/* My Medical Daybook: the website. The app's own look (v3, 18 October 2026): teal and ink on warm white, the watercolour
   behind the page, Fraunces for headings and Inter for everything else. Every text colour is one the app measured against
   the wash at 4.5:1 or better, so words may sit on the painting directly. */
:root {
  --page: #F6F4EF; --surface: #FFFFFF; --mist: #EEF3F6; --sunken: #F0F4F6;
  --ink: #17263A; --slate: #4B5B6B; --muted: #56667A; --line: #D5DEE5;
  --teal: #18727A; --teal-fill: #1E7F86; --teal-deep: #135A60; --teal-light: #DDEEEF;
  --warm: #C2703D; --warm-text: #9A4E22; --warm-light: #F6E7DD;
  --green: #2D7354; --green-light: #E1F1E9; --amber-text: #8A5E10;
  --band: #135A60; --on-band: #FFFFFF; --on-band-muted: #CFE6E8;
  --foot: #17263A; --on-foot: #F3F6F8; --on-foot-muted: #B4C1CC;
  --head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 22px; --r-sm: 12px;
  --shadow: 0 1px 2px rgba(23, 38, 58, .06), 0 14px 36px rgba(23, 38, 58, .11);
  --shadow-soft: 0 1px 2px rgba(23, 38, 58, .05), 0 8px 22px rgba(23, 38, 58, .08);
  --max: 1180px; --gutter: clamp(16px, 4vw, 40px);
  --btn-fill: linear-gradient(180deg, #1E7F86, #135A60);
  --btn-text: #FFFFFF;
  --wash: url("../media/wash-light.jpg"); --wash-op: .8;
  --card: color-mix(in srgb, var(--surface) 84%, transparent);
  --solid: color-mix(in srgb, var(--surface) 72%, transparent);
  --paper: #F6F4EF; --paper-ink: #17263A; --paper-teal: #18727A; --paper-slate: #3D4D5C;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0F1B24; --surface: #172633; --mist: #13212C; --sunken: #13212C;
    --ink: #E8EEF3; --slate: #B4C1CC; --muted: #A3B2BF; --line: #2A3B49;
    --teal: #5CC3C9; --teal-fill: #1E7F86; --teal-deep: #43AAB0; --teal-light: #16343A;
    --warm: #D98A5A; --warm-text: #E7A57C; --warm-light: #3A281D;
    --green: #7BD0A3; --green-light: #1B3A2E; --amber-text: #E7B96A;
    --band: #0E2E31; --on-band: #F3F6F8; --on-band-muted: #B9D5D7;
    --foot: #0A141B; --on-foot: #F3F6F8; --on-foot-muted: #B4C1CC;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 36px rgba(0, 0, 0, .4);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .3);
    --btn-fill: linear-gradient(180deg, #2A8F97, #1E7F86);
    --wash: url("../media/wash-dark.jpg"); --wash-op: .9;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
/* the watercolour behind every page, as in the app: fixed, behind everything, never in the way */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--wash) 34% 50% / cover no-repeat; opacity: var(--wash-op); }
@media print, (forced-colors: active) { body::before { display: none; } }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
p > a, li > a { padding-block: 12px; overflow-wrap: anywhere; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--surface); color: var(--ink); padding: 12px 16px; border-radius: var(--r-sm); z-index: 100; box-shadow: var(--shadow); }
.skip:focus { top: 16px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(40px, 6.2vw, 68px); }
h2 { font-size: clamp(31px, 4.4vw, 50px); }
h3 { font-size: clamp(21px, 2.4vw, 26px); }
p { margin: 0; }
.lead { font-size: clamp(19px, 2vw, 22px); color: var(--ink); max-width: 36em; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
.muted { color: var(--slate); }
.small { font-size: 16px; }
.num { font-variant-numeric: tabular-nums; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px; border-radius: 26px; border: 0; font: 600 18px var(--body); color: var(--btn-text); background: var(--btn-fill); text-decoration: none; box-shadow: 0 8px 20px rgba(19, 90, 96, .28); cursor: pointer; }
.btn:hover { color: var(--btn-text); filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; filter: none; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 26px; border: 1.5px solid var(--teal); color: var(--teal); font: 600 18px var(--body); text-decoration: none; background: color-mix(in srgb, var(--surface) 70%, transparent); cursor: pointer; }
.btn-ghost:hover { background: var(--teal-light); color: var(--teal-deep); }
.btn .ico, .btn-ghost .ico { width: 22px; height: 22px; flex: none; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-height: 48px; }
.lockup img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 1px 3px rgba(23, 38, 58, .18); }
.lockup .pre { display: block; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); line-height: 1.1; }
.lockup .name { display: block; font-family: var(--head); font-weight: 600; font-size: 24px; line-height: 1; color: var(--ink); }
.top nav { display: flex; align-items: center; gap: 4px 18px; }
.top nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.top nav a:not(.btn):hover { color: var(--teal); text-decoration: underline; }
.top .btn { min-height: 46px; padding: 8px 20px; font-size: 16px; box-shadow: none; }
@media (max-width: 860px) { .top nav a.navlink { display: none; } }

/* the opening: the app's own opener, the watercolour clip with the name over the sky */
.hero { position: relative; min-height: min(calc(100vh - 120px), 860px); min-height: min(calc(100svh - 120px), 860px); display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; background: var(--paper); color: var(--paper-ink); isolation: isolate; }
.hero .film { position: absolute; inset: 0; z-index: 0; }
.hero .film video, .hero .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
.hero .film video { opacity: 0; transition: opacity .6s ease; }
.hero .film.playing video { opacity: 1; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; background: linear-gradient(to top, rgba(10, 24, 30, .78), rgba(10, 24, 30, .42) 55%, rgba(10, 24, 30, 0)); pointer-events: none; }
.hero-top { position: relative; z-index: 2; text-align: center; justify-self: center; align-self: start; margin-top: clamp(40px, 9vh, 96px); padding: clamp(24px, 4vw, 44px) clamp(28px, 6vw, 72px) clamp(28px, 4vw, 44px); max-width: 100%; background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 90%, transparent) 58%, color-mix(in srgb, var(--paper) 0%, transparent)); }
.hero-pre { display: block; margin-bottom: 8px; font-weight: 600; font-size: clamp(14px, 2.4vw, 20px); letter-spacing: .22em; line-height: 1; color: var(--paper-teal); text-transform: uppercase; }
.hero-brand { display: block; font-family: var(--head); font-weight: 600; font-size: clamp(64px, 14vw, 128px); letter-spacing: -0.01em; line-height: 1.05; color: var(--paper-ink); }
.hero-strap { display: block; margin: 14px auto 0; color: var(--paper-slate); font-size: clamp(18px, 2.2vw, 23px); letter-spacing: .01em; max-width: 24em; text-wrap: balance; }
.hero-pill { display: inline-block; margin-top: 16px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--paper-ink) 10%, transparent); color: var(--paper-slate); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.hero-top .ctas { justify-content: center; margin-top: 26px; }
.hero-top .btn-ghost { border-color: var(--paper-teal); color: var(--paper-teal); background: color-mix(in srgb, var(--paper) 72%, transparent); }
.hero-top .btn-ghost:hover { background: #DDEEEF; color: #135A60; }
.hero-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; padding: 0 var(--gutter) clamp(14px, 2.5vh, 22px); color: rgba(255, 255, 255, .9); font-size: 15px; text-align: center; }
.hero-foot .co { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--paper); color: var(--paper-ink); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero-foot .co img { height: 28px; width: auto; }
/* The band along the foot of the picture (Mark's choice, frosted glass): says there is more below and takes you there.
   The arrow sits centred under the words, bobbing and fading slowly (about once every two seconds, far below the
   three-a-second flash limit), and a soft sweep of light crosses the glass every few seconds. All off under reduced
   motion. */
.hero-band { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 64px; padding: 10px var(--gutter) 6px; overflow: hidden; font-size: 17px; font-weight: 600; letter-spacing: .01em; text-decoration: none; text-align: center; color: #fff; background: rgba(255, 255, 255, .13); border-top: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); --sweep: rgba(255, 255, 255, .5); }
.hero-band svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; animation: bandBob 2s ease-in-out infinite; }
.hero-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, var(--sweep) 50%, transparent 65%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 130% 0; animation: bandSweep 5.5s ease-in-out 1.6s infinite; }
.hero-band:hover span { text-decoration: underline; text-underline-offset: 3px; }
@keyframes bandBob { 0%, 100% { transform: translateY(-2px); opacity: 1; } 50% { transform: translateY(4px); opacity: .35; } }
@keyframes bandSweep { 0% { background-position: 130% 0; } 30%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-band svg, .hero-band::after { animation: none; } .hero-band::after { display: none; } }
.hero-band .short { display: none; }
@media (max-width: 560px) { .hero-band .long { display: none; } .hero-band .short { display: inline; } }
/* A short screen: the title block gives up height so the band stays on the first screen. */
@media (max-height: 800px) {
  .hero-top { margin-top: clamp(8px, 3vh, 40px); padding-top: clamp(12px, 2.5vh, 28px); padding-bottom: clamp(12px, 2.5vh, 28px); }
  .hero-brand { font-size: clamp(56px, min(14vw, 13vh), 120px); }
  .hero-strap { margin-top: 8px; }
  .hero-pill { margin-top: 10px; }
  .hero-top .ctas { margin-top: 16px; }
  .hero-foot { padding-bottom: 14px; }
}
.hero-in { animation: heroIn 1.4s cubic-bezier(.2, .7, .2, 1) .3s both; }
@keyframes heroIn { from { opacity: 0; filter: blur(7px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-in { animation: none; } }
@media (max-width: 480px) { .hero-top .ctas { flex-direction: column; } .hero-top .ctas > * { width: 100%; max-width: 320px; } }

/* sections */
.sec { padding-block: clamp(52px, 8vw, 112px); position: relative; }
.sec.solid { background: var(--solid); border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sec-head { max-width: 40em; margin-bottom: clamp(28px, 4vw, 48px); display: grid; gap: 14px; }
.sec-head.centre { margin-inline: auto; text-align: center; }
.sec-head.centre .lead { margin-inline: auto; }
.grid2 { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.text { display: grid; gap: 18px; max-width: 34em; }
.text ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.text ul li { padding-left: 26px; position: relative; }
.text ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-fill); }
.by { font-weight: 600; color: var(--ink); }
.by span { font-weight: 400; color: var(--slate); }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid2.flip > figure { order: 2; } }
figure { margin: 0; }
.pic { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--mist); aspect-ratio: 16 / 9; }
.pic img, .pic video { width: 100%; height: 100%; object-fit: cover; }
.pic.parallax img { height: 118%; top: -9%; position: absolute; left: 0; transform: translateY(var(--py, 0px)); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pic.parallax img { height: 100%; top: 0; transform: none; } }
.pic .walk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.pic.playing .walk { opacity: 1; }

/* reveals: with JavaScript, blocks rise in as they arrive; without it, or with motion reduced, everything simply shows */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal.d1 { transition-delay: .08s; } html.js .reveal.d2 { transition-delay: .16s; } html.js .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* what it does: real screens in small phones */
.features { display: grid; gap: 22px; }
.feat { background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--r); padding: 18px 18px 24px; box-shadow: var(--shadow-soft); display: grid; gap: 14px; align-content: start; }
.feat .shot { aspect-ratio: 390 / 520; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--mist); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.feat .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feat h3 { font-size: 21px; }
.feat p { color: var(--slate); font-size: 17px; }
@media (min-width: 680px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }
.also { display: grid; gap: 14px 28px; margin-top: 30px; }
.also .it { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.also .it svg { width: 36px; height: 36px; color: var(--teal); }
.also .it b { display: block; font-size: 18px; margin-bottom: 2px; }
.also .it p { color: var(--slate); font-size: 16px; }
@media (min-width: 760px) { .also { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .also { grid-template-columns: repeat(3, 1fr); } }

/* see it work: the app's own guide, played inside a phone */
.guide { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
.gphone { position: relative; width: min(100%, 350px); margin: 0 auto; aspect-ratio: 390 / 844; border-radius: 30px; overflow: hidden; background: var(--mist); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 0 0 6px var(--surface); }
.gphone img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border-radius: 24px; background: var(--mist); }
.gring { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 3px solid var(--warm); box-shadow: 0 0 0 5px rgba(194, 112, 61, .26); pointer-events: none; animation: gpulse 1.2s ease-out infinite; }
@keyframes gpulse { 0% { transform: scale(.72); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gring { animation: none; } }
.gphone[hidden], .gring[hidden] { display: none; }
.gwords { display: grid; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 500 16px var(--body); cursor: pointer; }
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip[aria-pressed="true"] { background: var(--teal-fill); border-color: var(--teal-fill); color: #FFFFFF; }
.gstep { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gcap { font-size: clamp(19px, 2vw, 22px); line-height: 1.4; min-height: 3.6em; }
.gctl { display: flex; gap: 10px; }
.gctl .btn-ghost { min-height: 50px; }
.gctl .arrow { flex: 0 0 64px; padding: 0; font-size: 26px; }
.gctl .play { flex: 1; }
.gintro { color: var(--slate); }
.glist { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; color: var(--slate); font-size: 17px; }
.glist li { padding-left: 4px; cursor: pointer; }
.glist li.is-current { color: var(--teal); font-weight: 600; }
.glist li::marker { color: var(--muted); }
@media (min-width: 820px) { .guide { grid-template-columns: 380px 1fr; } .gphone { margin: 0; } }

/* the reports: real pages, fanned out */
.rchips { margin-bottom: 26px; }
.pages { display: grid; gap: 18px; perspective: 1400px; }
.pages[hidden] { display: none; }
.page { background: #FFFFFF; border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1000 / 1415; }
.page img { width: 100%; height: 100%; object-fit: cover; }
html.js .pages .page { transform: translateY(26px) rotateX(10deg); opacity: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .7s ease; transform-origin: 50% 100%; }
html.js .pages.in .page { transform: none; opacity: 1; }
html.js .pages.in .page:nth-child(2) { transition-delay: .12s; } html.js .pages.in .page:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .pages .page { transform: none; opacity: 1; transition: none; } }
.pages[data-n="3"] { grid-template-columns: 1fr 1fr; }
.pages[data-n="3"] .page:nth-child(3) { grid-column: 1 / -1; max-width: 50%; margin-inline: auto; width: 100%; }
@media (min-width: 700px) { .pages { grid-template-columns: 1fr 1fr; } .pages[data-n="3"] { grid-template-columns: repeat(3, 1fr); } .pages[data-n="3"] .page:nth-child(3) { grid-column: auto; max-width: none; } }
.rcap { margin-top: 18px; color: var(--slate); font-size: 17px; max-width: 48em; }
.rholds { margin-top: 36px; }

/* try it: three cards */
.try3 { display: grid; gap: 18px; }
.trycard { display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; border-radius: var(--r); background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--shadow-soft); text-decoration: none; color: var(--ink); position: relative; min-height: 100%; }
.trycard::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--teal-fill); }
.trycard.soon::before { background: var(--line); }
a.trycard:hover { border-color: var(--teal); box-shadow: var(--shadow); }
a.trycard:hover h3 { color: var(--teal); }
.trycard .tag { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.trycard.soon .tag { color: var(--muted); }
.trycard h3 { font-size: 24px; }
.trycard p { color: var(--slate); font-size: 17px; }
.trycard .go { margin-top: 8px; font-weight: 600; color: var(--teal); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.trycard .go svg { width: 20px; height: 20px; }
.trycard.soon { color: var(--slate); }
.trycard.soon h3 { color: var(--slate); }
.trycard .soonpill { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--mist); color: var(--muted); font-size: 14px; font-weight: 600; }
.trynote { margin-top: 18px; color: var(--slate); font-size: 16px; }
@media (min-width: 760px) { .try3 { grid-template-columns: repeat(3, 1fr); } }

/* join the Beta: the code box */
.codebox { background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); display: grid; gap: 14px; }
.codebox label { font-weight: 600; font-size: 17px; }
.coderow { display: flex; flex-wrap: wrap; gap: 10px; }
.grid2 > * { min-width: 0; }
.coderow input { flex: 1 1 160px; min-width: 0; width: 100%; min-height: 54px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 22px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.coderow input:focus { border-color: var(--teal); }
.coderow .btn { flex: 0 0 auto; }
.codemsg { font-size: 17px; color: var(--slate); min-height: 1.5em; }
.codemsg.is-bad { color: #B0372E; }
@media (prefers-color-scheme: dark) { .codemsg.is-bad { color: #F0968C; } }
.codego { display: grid; gap: 16px; padding-top: 6px; border-top: 1px solid var(--line); }
.codego[hidden] { display: none; }
.codego .okline { display: flex; gap: 10px; align-items: flex-start; color: var(--green); font-weight: 600; }
.codego .okline svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.codego ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 12px; counter-reset: s; }
.codego ol li { position: relative; padding-left: 44px; font-size: 17px; color: var(--slate); }
.codego ol li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--teal-light); color: var(--teal); font: 600 16px var(--body); display: grid; place-items: center; }
.codego ol li b { color: var(--ink); }
.codego .ico { width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: var(--teal); }

/* quotes */
.quotes { display: grid; gap: 18px; margin-top: 8px; }
.quote { background: var(--card); border-radius: var(--r); padding: 22px 24px; border-left: 6px solid var(--warm); margin: 0; }
.quote p { font-size: 19px; }
.quote .by { margin-top: 12px; }

/* private by design */
.band { background: var(--band); color: var(--on-band); padding-block: clamp(44px, 6vw, 80px); }
.band h2 { color: var(--on-band); }
.band .promises { display: grid; gap: 22px; margin-top: 28px; }
.band .promise { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.band .promise svg { width: 44px; height: 44px; }
.band .promise b { display: block; font-size: 19px; margin-bottom: 4px; }
.band .promise p { color: var(--on-band-muted); font-size: 17px; }
.band a { color: var(--on-band); }
@media (min-width: 760px) { .band .promises { grid-template-columns: 1fr 1fr; gap: 28px 40px; } }

/* footer */
footer { background: var(--foot); color: var(--on-foot); padding-block: 40px 48px; font-size: 15px; }
footer .wrap { display: grid; gap: 22px; }
footer .lockup .pre { color: var(--on-foot-muted); }
footer .lockup .name { color: var(--on-foot); }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
footer a { color: var(--on-foot); min-height: 44px; display: inline-flex; align-items: center; }
footer a:hover { color: #FFFFFF; }
footer p { color: var(--on-foot-muted); max-width: 70em; }
footer .co { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--paper); color: var(--paper-ink); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; width: max-content; }
footer .co img { height: 28px; width: auto; }

/* legal and support pages */
.page-head { padding-block: clamp(36px, 6vw, 72px) 8px; }
.page-head .date { color: var(--slate); font-size: 16px; margin-top: 12px; }
.prose { padding-block: 24px clamp(48px, 7vw, 96px); max-width: 44em; overflow-wrap: anywhere; }
.prose h2 { font-size: 26px; color: var(--ink); margin: 36px 0 12px; }
.prose p, .prose li { margin-bottom: 14px; }
.prose ul { padding-left: 22px; }
.prose b { color: var(--ink); }
.prose .back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; }

/* the Beta page */
.promise-card { background: var(--band); color: var(--on-band); border-radius: var(--r); padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; box-shadow: var(--shadow); max-width: 44em; }
.promise-card h2 { color: var(--on-band); }
.promise-card p { font-size: clamp(18px, 1.8vw, 20px); color: var(--on-band); }
.text-only { max-width: 40em; display: grid; gap: 18px; }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 26px 92px; position: relative; display: grid; gap: 12px; box-shadow: var(--shadow-soft); }
.step .n { position: absolute; left: 26px; top: 22px; width: 48px; height: 48px; border-radius: 50%; background: var(--teal-fill); color: #FFFFFF; font-family: var(--head); font-weight: 600; font-size: 26px; display: grid; place-items: center; }
.step h3 { padding-top: 8px; }
.step .ico { width: 1.1em; height: 1.1em; vertical-align: -0.15em; color: var(--teal); }
@media (min-width: 900px) { .steps { grid-template-columns: 1fr 1fr 1fr; gap: 24px; } .step { padding: 92px 26px 28px 26px; } .step .n { left: 26px; top: 26px; } .step h3 { padding-top: 0; } }
@media (max-width: 420px) { .step { padding: 80px 20px 22px 20px; } .step .n { left: 20px; top: 20px; } .step h3 { padding-top: 0; } }