/* Rerio company site. Ported from the OpenDesign mock rerio-company-website/vision-brain.html.
   Semantic tokens mirror ios_app/Rerio/DesignSystem/RerioTokens.swift (Cobalt). Light appearance only.
   Numeric CSS px represent native base-point values in this browser reference. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../assets/bricolage-variable.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../assets/geist-variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --kin-canvas: #F5F3EE;
  --kin-surface: #FFFDF9;
  --kin-ink: #202830;
  --kin-muted: #596570;
  --kin-border: #D9DDE0;
  --kin-control-border: #7B8791;
  --kin-action: #315A78;
  --kin-pressed: #23445D;
  --kin-soft: #E5EBEF;
  --kin-accent: #BD7568;
  --kin-accent-soft: #F3E6E1;
  --kin-focus: #315A78;
  --kin-success: #365E49;
  --kin-warning: #805719;
  --kin-danger: #A13739;
  --kin-background: var(--kin-canvas);
  --kin-accent-pressed: var(--kin-pressed);
  --kin-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --kin-font-body: 'Geist', system-ui, sans-serif;
  --kin-type-display: 36px;
  --kin-weight-display: 600;
  --kin-type-form-title: 36px;
  --kin-weight-form-title: 600;
  --kin-type-heading: 36px;
  --kin-weight-heading: 600;
  --kin-type-section-title: 22px;
  --kin-weight-section-title: 600;
  --kin-type-body: 17px;
  --kin-weight-body: 400;
  --kin-type-list-title: 16px;
  --kin-weight-list-title: 600;
  --kin-type-button: 16px;
  --kin-weight-button: 600;
  --kin-type-caption: 14px;
  --kin-weight-caption: 400;
  --kin-type-eyebrow: 14px;
  --kin-weight-eyebrow: 600;
  --kin-card-corner-radius: 20px;
  --kin-minimum-tap-target-side: 44px;
  --kin-preferred-tap-target-side: 48px;
  --kin-content-padding: 20px;
  --kin-button-height: 48px;
  --kin-button-corner-radius: 14px;
  --kin-form-field-height: 48px;
  --kin-form-field-corner-radius: 14px;
  --kin-icon-chip-side: 48px;
  --kin-icon-chip-corner-radius: 14px;
  --kin-feature-corner-radius: 28px;
  --kin-space-4: 4px;
  --kin-space-8: 8px;
  --kin-space-12: 12px;
  --kin-space-16: 16px;
  --kin-space-20: 20px;
  --kin-space-24: 24px;
  --kin-space-32: 32px;
  --kin-space-40: 40px;
  --kin-space-48: 48px;
  --kin-space-64: 64px;
  --kin-space-80: 80px;
  --kin-space-96: 96px;
  --kin-shadow-card: none;
  --kin-shadow-chip: none;
  --kin-shadow-button: none;
  /* Browser adaptations, not new native tokens. */
  --kin-leading-body: 1.55;
  --kin-leading-title: 1.15;
  --kin-motion-feedback: 200ms;
  --kin-motion-enter: 250ms;
  --kin-motion-exit: 160ms;
  --kin-pressed-scale: .97;
  --kin-border-width: 1px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --kin-motion-feedback: 0ms; --kin-motion-enter: 0ms; --kin-motion-exit: 0ms; --kin-pressed-scale: 1; }
}
/* Layout */
:root{--gutter:clamp(20px,5vw,64px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--kin-canvas);color:var(--kin-ink);font:400 17px/1.55 var(--kin-font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}ol,ul{list-style:none;padding:0}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
/* Component display rules must never reveal something a script or the markup has hidden. */
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}img{height:auto}
a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--kin-focus);outline-offset:3px;border-radius:6px}
p{text-wrap:pretty}
.wrap{width:min(1120px,100% - 2*var(--gutter));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:12px;z-index:10;padding:12px 20px;border-radius:14px;background:var(--kin-ink);color:var(--kin-surface);transform:translateY(-200%)}
.skip-link:focus{transform:none}
h1,h2{font-family:var(--kin-font-display);font-weight:600;text-wrap:balance}
h1{font-size:clamp(46px,6.4vw,84px);line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.03em}
h3{font:600 20px/1.3 var(--kin-font-body)}
.label{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--kin-muted);margin-bottom:16px}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:40ch}
.muted{color:var(--kin-muted)}
.caption{margin-top:16px;font-size:14px;color:var(--kin-muted)}
.small{font-size:14px;line-height:1.5}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* Status markers: always paired with words. */
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.3;color:var(--kin-ink);white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.status-now::before{background:var(--kin-success)}
.status-dev::before{border:2px solid var(--kin-action);background:var(--kin-soft)}
.status-planned::before{border:1.5px dashed var(--kin-control-border)}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:500;text-decoration:underline;text-decoration-color:var(--kin-control-border)}
.text-link:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:112px}
.brand{display:flex;align-items:center;min-height:48px;margin-left:-14px}.brand img{width:280px}
.primary-nav{display:flex;align-items:center;gap:4px}
.primary-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:500;text-decoration:none;transition:background-color var(--kin-motion-feedback)}
.primary-nav a:hover{background:var(--kin-soft)}
.primary-nav a[aria-current="page"]{background:var(--kin-soft);color:var(--kin-action);font-weight:600}

/* Hero */
.hero{padding:clamp(48px,8vw,112px) 0 clamp(56px,7vw,96px)}
.hero h1 .line{display:block}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:end;margin-top:clamp(28px,4vw,48px)}
/* Hero variant: brain-shaped network, top left */
.hero-brain{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,6.6fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(24px,4vw,56px)}
.brain{order:2;margin:0 calc(-1 * clamp(0px,2vw,24px)) 0 0;aspect-ratio:600 / 440}
.brain canvas{display:block;width:100%;height:100%}
.hero-brain h1{font-size:clamp(40px,4.2vw,60px)}
.hero-brain .hero-row{grid-template-columns:1fr;justify-items:start;gap:28px}
.jump{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:14px;background:var(--kin-action);color:var(--kin-surface);font-size:16px;font-weight:600;text-decoration:none;transition:background-color var(--kin-motion-feedback)}
.jump:hover{background:var(--kin-pressed)}
.jump svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}


/* Audience pages: a text hero with one primary action */
.page-hero{padding:clamp(32px,6vw,88px) 0 clamp(56px,7vw,96px)}
.page-hero h1{max-width:15ch}
.page-hero .lede{margin-top:clamp(24px,3vw,36px);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:32px}
.hero-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--kin-border);font-size:15px;color:var(--kin-muted);max-width:60ch}

/* 404 */
.not-found{display:grid;justify-items:start;gap:28px;min-height:50vh;align-content:center}

/* Sections */
.section{padding-block:clamp(72px,9vw,120px);border-top:1px solid var(--kin-border)}
.section-surface{background:var(--kin-surface)}
/* A surface card on a surface section takes the canvas, so it still reads as a card. */
.section-surface .signup{background:var(--kin-canvas)}
.intro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.intro p:not(.label){max-width:44ch}

/* Infographic 1: one year of weeks */
.year{padding:clamp(24px,3.5vw,40px);border:1px solid var(--kin-border);border-radius:28px;background:var(--kin-surface)}
.year-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;font-size:14px;color:var(--kin-muted);margin-bottom:16px}
.year-toggle{display:inline-flex;gap:4px;padding:4px;margin-left:auto;border:1px solid var(--kin-border);border-radius:14px;background:var(--kin-canvas)}
.year-toggle button{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--kin-ink);font:600 15px var(--kin-font-body);cursor:pointer;transition:background-color var(--kin-motion-feedback),color var(--kin-motion-feedback)}
.year-toggle button:hover{background:var(--kin-soft)}
.year-toggle button[aria-pressed="true"]{background:var(--kin-action);color:var(--kin-surface)}
.weeks{display:grid;grid-template-columns:repeat(52,minmax(0,1fr));gap:4px}
.weeks i{display:flex;flex-direction:column;justify-content:center;gap:3px;height:56px;border-radius:4px;background:var(--kin-soft);overflow:hidden}
.weeks i.visit{background:var(--kin-action)}
/* With Rerio: three daily records sweep through every week, left to right. */
/* One mark per day; a thinner mark is a partial day and a missed day is left blank. */
.lane{display:flex;height:5px;transform:scaleX(0);transform-origin:left center;transition:transform var(--kin-motion-exit) ease-in}
.lane span{flex:1}
.lane .on,.lane .part{background:var(--c)}
.lane .part{transform:scaleY(.45)}
.lane-hr{--c:var(--kin-action)}
.lane-sleep{--c:color-mix(in srgb,var(--kin-action) 55%,var(--kin-surface))}
.lane-activity{--c:var(--kin-control-border)}
.lane-med{--c:var(--kin-accent)}
.lane-checkin{--c:color-mix(in srgb,var(--kin-accent) 60%,var(--kin-surface))}
.lane-cognitive{--c:var(--kin-ink)}
.year[data-view="after"] .lane{transform:none;transition:transform 320ms ease-out calc(var(--w) * 22ms + var(--l) * 50ms)}
.months{display:grid;grid-template-columns:repeat(52,minmax(0,1fr));column-gap:4px;margin-top:8px;font-size:12px;color:var(--kin-muted);letter-spacing:.02em}
.months span{padding:2px 0 0 6px;border-left:1px solid var(--kin-control-border);white-space:nowrap}
.months .w5{grid-column:span 5}.months .w4{grid-column:span 4}
.year-keys{margin-top:28px;padding-top:24px;border-top:1px solid var(--kin-border)}
.year-key{display:flex;flex-wrap:wrap;gap:12px 40px}
.year[data-view="before"] .key-after,.year[data-view="after"] .key-before{display:none}
.key-after{flex-direction:column;gap:12px}
.year-key .lane-key{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 56px}
.year-key .lane-key div{display:block}
.lane-group{font-size:14px;font-weight:500;color:var(--kin-muted);margin-bottom:8px}
.lane-key ul{display:grid;gap:6px}
.lane-key li{display:flex;align-items:center;gap:10px;font-size:16px}
.key-after p{font-size:16px;color:var(--kin-muted)}
.year-key div{display:flex;align-items:baseline;gap:12px}
.year-key b{font:600 clamp(32px,3.4vw,44px)/1 var(--kin-font-display);letter-spacing:-.02em}
.year-key span{font-size:16px;max-width:24ch}
.swatch{width:14px;height:14px;border-radius:3px;flex:0 0 14px;align-self:center}
.swatch.visit{background:var(--kin-action)}.swatch.between{background:var(--kin-soft);border:1px solid var(--kin-border)}
.line{width:24px;height:6px;border-radius:2px;flex:0 0 24px;background:var(--c)}

/* Infographic 2: the idea. One month of readings as time series, filtered, searched and gathered for the doctor.
   js/idea-month.js draws the month and runs the steps; below 560px of chart it wraps into two-week blocks. */
.idea-steps{display:flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:14px;width:max-content;max-width:100%;border:1px solid var(--kin-border);border-radius:14px;background:var(--kin-canvas)}
.idea-steps button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:10px;font:600 15px var(--kin-font-body)}
.idea-steps button span{font-size:13px;color:var(--kin-muted)}
.idea-steps button:hover{background:var(--kin-soft)}
.idea-steps button[aria-selected="true"]{background:var(--kin-action);color:var(--kin-surface)}
.idea-steps button[aria-selected="true"] span{color:var(--kin-surface)}
html:not(.js) .idea-steps,html:not(.js) .idea-chart,html:not(.js) .idea-say{display:none}
.idea-month{container-type:inline-size;padding:clamp(18px,2.4vw,28px);border:1px solid var(--kin-border);border-radius:28px;background:var(--kin-surface)}
.idea-example{margin-bottom:12px;font:600 clamp(18px,1.7vw,21px)/1.25 var(--kin-font-display);letter-spacing:-.01em}
.idea-stage{position:relative;display:grid;grid-template-columns:minmax(0,720px) 290px;gap:24px;align-items:start}
.idea-chart{display:block;width:100%;height:auto;overflow:visible}
.idea-say{margin-top:10px;min-height:3em;font-size:15px;max-width:72ch}
.idea-month .caption{margin-top:4px}
/* Chart parts */
.idea-chart .src{font:600 12px var(--kin-font-body);fill:var(--kin-ink)}
.idea-chart .wk,.idea-chart .note{font:500 11px var(--kin-font-body);fill:var(--kin-muted)}
.idea-chart .base line{stroke:var(--kin-border);stroke-width:1}
.idea-chart .seg{stroke-width:2;stroke-linecap:round;transition:stroke 300ms ease,opacity 400ms ease}
/* Filter: the lines through the noise fade first, then the redrawn lines fade in as the noise drops to the tray. */
.idea-month:not([data-step="0"]) .seg.raw,.idea-month[data-step="0"] .seg.clean{opacity:0}
.idea-month[data-step="1"] .seg.raw{transition-duration:300ms,250ms}
.idea-month[data-step="1"] .seg.clean{transition-delay:0ms,450ms}
.idea-month[data-step="1"] .pt.noise{transition-delay:var(--toss)}
.idea-chart .pt{transition:transform 900ms cubic-bezier(.2,.7,.2,1),opacity 500ms ease,fill 300ms ease}
.idea-chart .hl{fill:var(--kin-accent-soft);opacity:0;transition:opacity 400ms ease}
.idea-chart .tray-label{font:600 13px var(--kin-font-body);fill:var(--kin-danger)}
.idea-chart .tray-reason{font:400 12px var(--kin-font-body);fill:var(--kin-muted)}
.idea-chart .tie{stroke:var(--kin-action);stroke-width:1}
.idea-chart .scan{fill:var(--kin-action);opacity:0}
.idea-chart .usual{fill:var(--kin-soft)}
.idea-chart .tray-label,.idea-chart .tray-reason,.idea-chart .tie,.idea-chart .usual,.idea-chart .note{opacity:0;transition:opacity 400ms ease}
.idea-month:not([data-step="0"]) .tray-label,.idea-month:not([data-step="0"]) .tray-reason{opacity:1}
/* Analyze: the usual weeks shade in and the scan reads each day across sources.
   Each point and line turns as the scan reaches its day (--delay, set by the script): coral where Rerio highlights
   a section, grey elsewhere. */
.idea-month[data-step="2"] .usual,.idea-month[data-step="2"] .note{opacity:1}
.idea-month[data-step="2"] .scan{animation:idea-scan 2.4s linear 300ms forwards}
.idea-month.is-split[data-step="2"] .scan{animation-name:idea-scan-split}
.idea-month[data-step="2"] .tie{opacity:.16;transition-delay:var(--delay)}
@keyframes idea-scan{0%{opacity:.14;transform:translate(0,0)}96%{opacity:.14;transform:translate(var(--tx),0)}100%{opacity:0;transform:translate(var(--tx),0)}}
@keyframes idea-scan-split{0%{opacity:.14;transform:translate(0,0)}49%{opacity:.14;transform:translate(var(--tx),0)}49.5%{opacity:0;transform:translate(var(--tx),0)}50%{opacity:0;transform:translate(0,var(--ty))}50.5%{opacity:.14;transform:translate(0,var(--ty))}98%{opacity:.14;transform:translate(var(--tx),var(--ty))}100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
.idea-month[data-step="2"] .hl{opacity:1;transition-delay:var(--delay)}
.idea-month[data-step="3"] .hl{opacity:1}
.idea-month[data-step="2"] .pt.hit,.idea-month[data-step="3"] .pt.hit{fill:var(--kin-accent)}
.idea-month[data-step="2"] .pt.calm,.idea-month[data-step="3"] .pt.calm{fill:var(--kin-control-border)}
.idea-month[data-step="2"] .pt.hit,.idea-month[data-step="2"] .pt.calm{transition-delay:0ms,0ms,var(--delay)}
.idea-month[data-step="2"] .seg.hit,.idea-month[data-step="3"] .seg.hit{stroke:var(--kin-accent)}
.idea-month[data-step="2"] .seg.calm,.idea-month[data-step="3"] .seg.calm{stroke:var(--kin-control-border)}
.idea-month[data-step="2"] .seg.hit,.idea-month[data-step="2"] .seg.calm{transition-delay:var(--delay),0ms}
.idea-month[data-step="3"] .seg.calm{opacity:.35}
/* The doctor's card: a placeholder until Present; copies of the highlighted sections gather in its chart. */
.idea-card{position:relative;min-height:180px;padding:16px 18px;border:1px dashed var(--kin-control-border);border-radius:20px;background:var(--kin-canvas);transition:border-color 400ms ease,background-color 400ms ease}
.idea-card .label{margin-bottom:6px}
.idea-card h3{font:600 18px/1.25 var(--kin-font-display);letter-spacing:-.01em;margin-bottom:8px}
.idea-count{font-size:13px;line-height:1.45;color:var(--kin-muted)}
.idea-gather{min-height:28px;margin-bottom:10px}
.gather-row{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:end;gap:6px;margin-bottom:3px}
.gather-row span{padding-bottom:2px;font:600 11px var(--kin-font-body);color:var(--kin-muted)}
.gather-row i{position:relative;display:block;width:100%;height:20px;border-bottom:1px solid var(--kin-border)}
.gather-row svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gather-row line{stroke:var(--kin-control-border);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.gather-axis{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;padding-left:74px;white-space:nowrap;font:500 10px var(--kin-font-body);color:var(--kin-muted)}
.gather-axis .key{order:3;flex-basis:100%}
.js .idea-card::before{content:"What the doctor sees";position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--kin-muted);transition:opacity 300ms ease}
.js .idea-card>*{opacity:0;transition:opacity 400ms ease 300ms}
.idea-month[data-step="3"] .idea-card{border-style:solid;border-color:var(--kin-accent);background:var(--kin-surface)}
.idea-month[data-step="3"] .idea-card::before{opacity:0}
.idea-month[data-step="3"] .idea-card>*{opacity:1}
/* The card moves under the month while there's still room for the whole month on one row, and sits its small
   chart beside the finding there. */
@container (max-width:880px){.idea-stage{grid-template-columns:minmax(0,720px);gap:20px}.idea-card{min-height:0}}
@container (min-width:560px) and (max-width:880px){.idea-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start}.idea-gather{grid-column:2;grid-row:1/span 3;margin-bottom:0}}
.idea-fly{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.idea-fly g{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.idea-fly line{stroke:var(--kin-accent);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.idea-fly .dot{stroke-width:6}

/* Infographic 3: three layers, side by side */
.layers{display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr) 112px minmax(0,1fr);align-items:stretch}
.layer{display:flex;flex-direction:column;padding:28px;border:1px solid var(--kin-border);border-radius:20px;background:var(--kin-surface)}
.layer-mid{background:var(--kin-soft);border-color:var(--kin-soft)}
.layer .label{margin-bottom:6px}
.layer h3{font:600 clamp(24px,2.2vw,30px)/1.1 var(--kin-font-display);letter-spacing:-.02em;min-height:2.2em}
.layer li{text-wrap:pretty}
.layer ul{display:grid;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--kin-border)}
.layer-mid ul{border-top-color:var(--kin-control-border)}
.layer li{position:relative;padding-left:18px;font-size:16px;line-height:1.45}
.layer li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--kin-control-border)}
.flow{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:0 8px}
.flow span{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;font-weight:500;line-height:1.35;color:var(--kin-ink)}
.flow svg{width:28px;height:16px;fill:none;stroke:var(--kin-action);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plan-return{grid-column:1 / -1;position:relative;height:84px}
.plan-return .bracket{position:absolute;top:0;left:calc((100% - 224px) / 6);right:calc((100% - 224px) / 6);height:32px;border:2px solid var(--kin-action);border-top:0;border-radius:0 0 16px 16px}
.plan-return .bracket::before{content:"";position:absolute;left:-7px;top:2px;width:10px;height:10px;border-left:2px solid var(--kin-action);border-top:2px solid var(--kin-action);transform:rotate(45deg)}
.plan-return p{position:absolute;top:44px;left:0;right:0;display:flex;justify-content:center;font-size:14px;font-weight:500;line-height:1.35;text-align:center}
.plan-return p svg{display:none;width:28px;height:16px;fill:none;stroke:var(--kin-action);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 28px}

/* Infographic 4: start narrow */
.focus{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.focus p:not(.label){max-width:44ch}
.focus p+p{margin-top:16px}.focus h2+p{margin-top:24px}
.rings{position:relative;width:min(100%,460px);aspect-ratio:1;margin-inline:auto}
.ring{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:50%;display:flex;justify-content:center;padding-top:clamp(14px,3%,24px);text-align:center}
.ring span{font-size:15px;font-weight:500;line-height:1.3}
.ring small{display:block;font-size:13px;font-weight:400;color:var(--kin-muted)}
.ring-1{width:100%;height:100%;border:1.5px dashed var(--kin-control-border)}
.ring-2{width:70%;height:70%;border:1.5px solid var(--kin-control-border);background:var(--kin-surface)}
.ring-3{width:40%;height:40%;background:var(--kin-action);color:var(--kin-surface);align-items:center;padding-top:0}
.ring-2 span{transform:translate(6px,22px)}
.ring-3 small{color:var(--kin-surface)}

/* Research + status */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{padding:28px;border:1px solid var(--kin-border);border-radius:20px;background:var(--kin-surface)}
.card h3{font:600 24px/1.15 var(--kin-font-display);letter-spacing:-.015em;margin-bottom:10px}
.card p{font-size:16px;color:var(--kin-muted)}
.consent{max-width:720px}
.research-note{margin-top:20px;font-size:15px;color:var(--kin-muted);max-width:62ch}
/* Email sign-up: the beta list and clinician updates */
.signup{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px clamp(32px,5vw,64px);align-items:center;padding:clamp(24px,3.5vw,40px);border-radius:28px;background:var(--kin-surface);border:1px solid var(--kin-border);margin-bottom:clamp(48px,6vw,80px)}
.signup-copy h3{font:600 clamp(26px,2.4vw,32px)/1.1 var(--kin-font-display);letter-spacing:-.02em;margin-bottom:10px}
.signup-copy p{font-size:16px;color:var(--kin-muted);max-width:48ch;text-wrap:pretty}
.signup-form label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.signup-row{display:flex;gap:12px}
.signup-row input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--kin-control-border);border-radius:14px;background:var(--kin-surface);color:var(--kin-ink);font:400 17px var(--kin-font-body)}
.signup-row input::placeholder{color:var(--kin-muted)}
.signup-row input:focus-visible{outline:3px solid var(--kin-focus);outline-offset:2px}
.signup-row input[aria-invalid="true"]{border-color:var(--kin-danger)}
.signup-row .jump{border:0;cursor:pointer;font-family:var(--kin-font-body);white-space:nowrap}
.signup-row .jump:focus-visible{outline:3px solid var(--kin-focus);outline-offset:3px}
.signup-row .jump[disabled]{opacity:.6;cursor:progress}
.signup-help{margin-top:8px;font-size:14px;color:var(--kin-muted)}
.signup-error{margin-top:4px;font-size:14px;color:var(--kin-danger)}
.signup-error:empty{display:none}
.signup-done{margin-top:8px;font-size:16px;font-weight:500;color:var(--kin-success)}
.status-head{font-size:17px;margin-bottom:16px}
.status-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.status-col h3{display:flex;align-items:center;gap:10px;font-size:17px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--kin-control-border)}
.status-col h3::before{content:"";width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.now h3::before{background:var(--kin-success)}
.dev h3::before{border:2px solid var(--kin-action);background:var(--kin-soft)}
.planned h3::before{border:1.5px dashed var(--kin-control-border)}
.status-col li{padding:10px 0;border-bottom:1px solid var(--kin-border);font-size:16px}

/* Home: one doorway per audience */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.door{display:flex;flex-direction:column;padding:clamp(24px,3vw,36px);border:1px solid var(--kin-border);border-radius:28px;background:var(--kin-canvas);text-decoration:none;transition:border-color var(--kin-motion-feedback),background-color var(--kin-motion-feedback)}
.door:hover{border-color:var(--kin-action);background:var(--kin-surface)}
.door h3{font:600 clamp(26px,2.4vw,32px)/1.1 var(--kin-font-display);letter-spacing:-.02em;max-width:18ch}
.door p:not(.label){margin-top:14px;font-size:16px;color:var(--kin-muted);max-width:44ch}
.door-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:28px;font-size:16px;font-weight:600;color:var(--kin-action)}
.door-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--kin-motion-feedback)}
.door:hover .door-link svg{transform:translateX(3px)}

/* Short facts with a rule above each, used for methods and summaries */
.methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:clamp(40px,5vw,64px)}
.method{padding-top:20px;border-top:1px solid var(--kin-control-border)}
.method h3{font-size:18px;margin-bottom:8px}
.method p{font-size:15px;color:var(--kin-muted)}
.methods-flush{margin-top:0}
.decision-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:clamp(32px,4vw,48px);padding:20px 24px;border:1px solid var(--kin-border);border-radius:20px;background:var(--kin-canvas)}
.decision-note p{max-width:62ch}

/* Patients: feature list beside screenshots from the app */
.patient-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.feature-tabs{display:grid;gap:8px}
.feature-tab{display:block;width:100%;text-align:left;padding:20px 24px;border:1px solid var(--kin-border);border-radius:20px;background:transparent;transition:background-color var(--kin-motion-feedback),border-color var(--kin-motion-feedback)}
.feature-tab:hover{background:var(--kin-canvas)}
.feature-tab[aria-selected="true"],.feature-tab[aria-selected="true"]:hover{background:var(--kin-canvas);border-color:var(--kin-action)}
.feature-tab .status{margin-bottom:10px}
.feature-tab-title{display:block;font-size:19px;font-weight:600;line-height:1.3}
.feature-tab-text{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--kin-muted)}
.phone-stage{display:flex;justify-content:center;padding:clamp(24px,4vw,56px) 16px;border-radius:28px;background:var(--kin-soft)}
.phone{width:100%;max-width:340px;padding:11px;border-radius:54px;background:var(--kin-ink)}
.phone-screen{position:relative;border-radius:43px;background:var(--kin-canvas);overflow:hidden}
.phone-screen img{display:block;width:100%;height:auto}
.app-view+.app-view{margin-top:12px}
.js .app-view+.app-view{margin-top:0}
.patient-caption{margin-top:12px;font-size:14px;color:var(--kin-muted);text-align:center}
.listening-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,3vw,48px);align-items:start}
.listening-points{display:grid;gap:24px}
.label .status{margin-left:8px;vertical-align:middle}
.phone-small .phone{max-width:280px;margin-inline:auto;padding:9px;border-radius:46px}
.phone-small .phone-screen{border-radius:37px}




/* Closing */
.closing{background:var(--kin-action);color:var(--kin-surface);padding-block:clamp(80px,10vw,136px)}
.closing h2{max-width:19ch;font-size:clamp(36px,4.6vw,60px)}
.closing p{margin-top:28px;font-size:19px;max-width:46ch}
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:28px 36px;font-size:14px;color:var(--kin-muted)}
.footer img{width:200px}
.footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--kin-ink)}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.footer-nav a{text-decoration:none}
.footer-nav a:hover{text-decoration:underline}

@media (max-width:1080px){
  /* Stacked: a rail on the left carries the approved plan from the label below the clinician box back up to the patient box. */
  .layers{grid-template-columns:28px minmax(0,1fr);column-gap:12px}
  .layers>*{grid-column:2}
  .layers>:nth-child(1){grid-row:1}.layers>:nth-child(2){grid-row:2}.layers>:nth-child(3){grid-row:3}.layers>:nth-child(4){grid-row:4}.layers>:nth-child(5){grid-row:5}
  .layer{padding:24px}
  .layer h3{min-height:0}
  .flow{flex-direction:row;justify-content:center;gap:clamp(24px,8vw,64px);padding:12px 0}
  .flow span{flex-direction:row;gap:8px;text-align:left}
  .flow svg{transform:rotate(90deg)}
  .plan-return{display:contents}
  .plan-return .bracket{position:relative;grid-column:1;grid-row:1 / 7;inset:auto;height:auto;margin:44px 0 9px;border:2px solid var(--kin-action);border-right:0;border-radius:16px 0 0 16px}
  .plan-return .bracket::before{left:auto;right:0;top:-6px;border:0;border-top:2px solid var(--kin-action);border-right:2px solid var(--kin-action)}
  .plan-return p{grid-column:2;grid-row:6;align-self:end;position:static;justify-content:flex-start;padding-top:12px;text-align:left}
  .methods{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .intro,.focus{grid-template-columns:1fr;align-items:start}
  .hero-row{grid-template-columns:1fr}
  .hero-brain{grid-template-columns:1fr}
  .brain{order:0;margin:0;max-width:520px;width:100%}
  .weeks{grid-template-columns:repeat(26,minmax(0,1fr));row-gap:8px}
  .weeks i{height:40px;gap:2px}
  .lane{height:4px}
  .months{display:none}
  .split,.status-row{grid-template-columns:1fr}
  .signup{grid-template-columns:1fr}
  .status-row{gap:32px}
  .site-header{flex-wrap:wrap;min-height:0;padding-block:20px 8px}
  .primary-nav{width:100%;margin-left:-14px}
  .doors{grid-template-columns:1fr}
  .patient-grid{grid-template-columns:1fr}
  .listening-grid{grid-template-columns:1fr 1fr}
  .listening-points{grid-column:1 / -1;grid-template-columns:1fr 1fr}
  /* Phones: titles only in a 2 by 2 grid, so the screenshot stays near the top. */
  .js .feature-tabs{grid-template-columns:1fr 1fr}
  .js .feature-tab{padding:14px 16px;min-height:56px}
  .js .feature-tab .status,.js .feature-tab-text{display:none}
  .js .feature-tab-title{font-size:16px}
}
@media (max-width:720px){
  .phone-stage{padding:20px 8px;margin-inline:calc(-1 * var(--gutter) + 8px)}
  .methods{grid-template-columns:1fr;gap:20px}
  .listening-points{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand img{width:220px}
  .primary-nav a{padding:0 10px;font-size:14px}
  .hero h1 .line{display:inline}
  .weeks{grid-template-columns:repeat(13,minmax(0,1fr))}
  .weeks i{height:28px;gap:1px}
  .lane{height:3px}
  .year-toggle{order:3;width:100%;margin-left:0}
  .year-toggle button{flex:1}
  .year-key{flex-direction:column}
  .card{padding:24px}
  .signup-row{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}