/* Tokens mirror idra-system.jsx: T and TX (app ramp), TXW and WEB (web scale). */
/* Build: Nunito, served from this site rather than Google Fonts, so no page sends a visitor's address to Google. These are
   Google's own rules and files for weights 500, 600 and 700 (one variable font, split by script; a page only downloads the
   scripts its text uses), with the URLs pointed at /fonts/. License: /fonts/OFL.txt. */
/* cyrillic-ext */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/nunito-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/nunito-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* vietnamese */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/nunito-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/nunito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* cyrillic-ext */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* vietnamese */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* cyrillic-ext */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* vietnamese */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{--shadowCard:0 1px 2px rgba(15,14,10,.04),0 8px 18px -10px rgba(15,14,10,.2);--bg:#FEFDF9;--white:#FFFFFF;--ink:#0F0E0A;--inkMuted:#4F4E4A;--inkFaint:#8F8E8A;--onInk:#FEFDF9;--neutralWash:#EFEEEA;--gold:#FFEEAA;--goldWash:#FAF2D1;--goldInk:#6C510A;--sky:#CCDDEE;--skyInk:#3A5875;--skyWash:#EAF3FC;--mint:#CCEEDD;--mintWash:#E6F7EE;--mintInk:#1A6448;--coral:#EECCBB;--coralWash:#FFEEE5;--coralInk:#7D4425;--line:rgba(15,14,10,.1);--onInkMuted:#8F8E8A;--font:"Nunito",system-ui,sans-serif}
/* Web spacing (WEB.space): four jobs, desktop then phone. Section 128/64 — a section's top and bottom
   and below the curve · Block 64/48 — between big pieces inside a section · Group 24/16 — things that
   belong together · Bind 8/8 — a line to its own sub-line. Component insides (card and button padding)
   keep their own sizes. */
:root{--sec:128px;--blk:64px;--grp:24px;--bnd:8px}
@media (max-width:560px){:root{--sec:64px;--blk:48px;--grp:16px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-weight:500;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--goldInk)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
/* Web scale (TXW, app/idra-system.jsx) — desktop, then phone below 560px. The site sets all of its own
   type in it; the advice drawings keep the small sizes they were drawn at (.voices, below). */
h1,.display{font-size:68px;font-weight:700;line-height:82px;letter-spacing:-.03em;text-wrap:balance}
h2,.headline,.legal-title{font-size:48px;font-weight:700;line-height:58px;letter-spacing:-.025em;text-wrap:balance}
.title,.t1,.t2,.t3,.card-title{font-size:32px;font-weight:700;line-height:42px;letter-spacing:-.015em}
.lead,.body,.body-sm{font-size:21px;font-weight:500;line-height:27px;text-wrap:pretty}
.lead{color:var(--inkMuted)}
.lead-ink{color:var(--ink)}
.lead strong{font-weight:700}
.label{font-size:16px;font-weight:500;line-height:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--goldInk)}
.caption,.body-xs{font-size:16px;font-weight:500;line-height:22px;color:var(--inkMuted)}
.muted{color:var(--inkMuted)}
.voices .lead{font-size:22px;line-height:1.5}.voices .t2{font-size:22px;line-height:1.2;letter-spacing:-.015em}.voices .card-title{font-size:17px;line-height:1.25;letter-spacing:-.01em}.voices .body-sm{font-size:15px;line-height:1.45}.voices .body-xs{font-size:13px;line-height:1.45}
@media (max-width:560px){
h1,.display{font-size:34px;line-height:41px}
h2,.headline,.legal-title{font-size:28px;line-height:34px}
.title,.t1,.t2,.t3,.card-title{font-size:22px;line-height:28px}
.lead,.body,.body-sm{font-size:17px;line-height:22px}
.label,.caption,.body-xs{font-size:13px;line-height:18px}
.voices }
.text-link{color:var(--inkMuted);text-decoration:underline;text-underline-offset:2px}.text-link:hover{color:var(--ink)}
/* Keyboard focus: a 2px ink ring (selection weight), shown only for keyboard navigation. */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
/* 404 */
.nf{max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.nf .lead{margin-top:var(--grp)}
.nf .btn{margin-top:var(--grp)}
/* Header: her name alone, centred, at Headline; it scrolls away with the page. On her gold (home,
   about) it runs straight into the gold field below it. */
header{position:relative;z-index:20;background:var(--bg)}
header.on-gold{background:var(--gold)}
/* Build: iOS 26 Safari ignores theme-color and tints the strip under the status bar, and its toolbar, from the body's
   background. So on pages with the gold header the body is gold while the gold field is at the top of the screen, and
   cream once it has scrolled away (.past-gold, site.js); main and the footer keep their own cream, so the page itself
   looks the same in every browser. */
body:has(>header.on-gold){background:var(--gold)}
body:has(>header.on-gold).past-gold{background:var(--bg)}
body:has(>header.on-gold)>main,body:has(>header.on-gold)>footer{background:var(--bg)}
.nav{display:flex;align-items:center;justify-content:center;height:120px}
.brand{font-size:48px;font-weight:700;line-height:58px;letter-spacing:-.025em;color:var(--ink)}.brand:hover{color:var(--ink)}
@media (max-width:560px){.nav{height:72px}.brand{font-size:28px;line-height:34px}}
/* Web button (TXW.button on WEB.buttonPad): 21/27 on 20 × 32, a 67px control; phones 17/22 on 16 × 32. */
.btn{font-family:var(--font);font-size:21px;font-weight:700;line-height:27px;border-radius:999px;padding:20px 32px;border:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-ink{background:var(--ink);color:var(--onInk)}.btn-ink:hover{color:var(--onInk);opacity:.9}
.btn-outline{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--inkMuted)}.btn-outline:hover{color:var(--ink);background:var(--neutralWash)}
@media (max-width:560px){.btn{font-size:17px;line-height:22px;padding:16px 32px}}
/* Emphasis: "doing" in goldInk wherever it appears. */
.em{color:var(--goldInk)}
/* Drawn illustrations in the icon language: 2.5px ink lines, palette fills, the app icon's head-and-shoulders figure. */
.v-illo{display:block;width:100%;height:auto}
/* Advice is everywhere: sky band, cooler than the story around it; each voice is a figure or object beside its message. Narrow: one column alternating left and right. Wide: see the pile below. */
.section.advice{background:var(--skyWash);border-top:0}
.voices{list-style:none;display:flex;flex-direction:column;gap:var(--blk);margin-top:var(--blk)}
.voice{display:flex;align-items:flex-end;gap:12px;width:100%;max-width:640px}
.voice:nth-child(even){align-self:flex-end}
.v-illo{flex:0 0 auto;width:96px}
.v-msg{flex:1 1 auto;min-width:0}
.v-meta{display:flex;align-items:center;gap:8px;color:var(--inkMuted)}
.v-meta .body-sm{color:var(--ink);font-weight:700}
.v-meta .body-xs:last-child{margin-left:auto}
.v-av{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink);font-size:15px;font-weight:700;line-height:1}
.v-av.coral{background:var(--coral)}.v-av.white{background:var(--white)}.v-av.wash{background:var(--neutralWash);box-shadow:inset 0 0 0 1px var(--line)}
.v-av svg{display:block}
/* TX label (12 · 500 · .12em uppercase · ink): the note's summary line, the article kicker and the chatbot avatar's "AI". */
.tx-label{font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
/* A text from a friend: a white notification card — avatar, name and time in its top row, the message beneath. */
.v-notif{padding:16px 20px 20px}
.v-notif .lead{margin-top:8px}
/* White sheets: the clinic letter (mint letterhead band) and the chat window. */
.v-sheet{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:var(--shadowCard)}
.v-band{display:flex;align-items:center;gap:8px;background:var(--mint);padding:12px 16px;color:var(--inkMuted)}
.v-band .body-sm{color:var(--ink);font-weight:700}
.v-band .body-xs:last-child{margin-left:auto}
.v-note-body{padding:16px 20px 20px}
.v-note-body .card-title{margin-top:8px}
.v-note-body .lead{margin-top:4px}
/* The rest of the text, implied: light text-bars in neutralWash, the system's placeholder-shape grey, under the doctor's note and the article headline. */
.v-note-lines{margin-top:16px}
.v-note-lines.v-lines b{display:block;height:8px;border-radius:999px;background:var(--neutralWash)}
/* An article: the newspaper beside its kicker and headline. */
.v-article{align-items:center}
.v-article-text{min-width:0;flex:1 1 auto}
.v-article .t2{margin-top:8px}
/* A watch and a ring, the notification as an ink card. */
.v-watch .face{background:var(--ink);color:var(--onInk);border-radius:20px 20px 20px 6px;padding:16px 20px;align-self:flex-start;margin-top:8px}
.v-watch .v-meta,.v-watch .v-meta .body-xs{color:var(--onInkMuted)}
.v-watch .lead{margin-top:8px;color:var(--onInk)}
/* A chatbot: the screen beside a chat window — the reply as a wash bubble holding a plan of unchecked lines, an empty composer beneath. */
.v-bot .v-sheet{padding:16px 20px 20px}
.v-reply{margin-top:12px;background:var(--neutralWash);border-radius:20px 20px 20px 6px;padding:12px 16px;max-width:360px}
.v-lines{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.v-lines span{display:flex;align-items:center;gap:8px}
.v-lines i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--inkFaint)}
.v-lines b{display:block;height:8px;border-radius:999px;background:var(--white)}
.v-input{margin-top:16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--inkMuted);padding:12px 16px;color:var(--inkFaint)}
/* But doing is hard: three steps in a row, each drawing above its line; then the closing line beside the life square (drawing 2/5, line 3/5). Drawings sit on white cards. */
.hard-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--blk)}
.hard-step .title{margin-top:var(--grp);text-align:center}
.hard-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--blk);align-items:center}
.hard-last{margin-top:var(--blk)}
.js .hard-last{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .4s ease-out}
.js .hard-last.play{opacity:1;transform:none}
.hard-fade{display:block;margin-top:var(--grp)}
.js .hard-fade,.js .hard-fade .em{transition:color .9s ease-in-out 2.1s}
.js .hard-last.play .hard-fade .em{color:var(--inkMuted)}
.js .hard-last.play .hard-fade,.js .hard-last:has(.play) .hard-fade{color:var(--inkMuted)}
@media (prefers-reduced-motion:reduce){.js .hard-fade,.js .hard-fade .em{color:var(--inkMuted);transition:none}}
.hard-art{background:var(--white);border-radius:20px;box-shadow:var(--shadowCard);padding:24px}
.hard-svg{display:block;width:100%;height:auto}
/* The doing, drawn: each drawing plays once on .play (site.js). The three steps arrive one by one, .4s apart (--seq) — each card and its line rise in, then its drawing plays; the closing row rises in only once they have finished. Puzzle: needs, goals, likes and limits each drift 70% of the way toward health, bump and shake against it, and ease back (1.6s each, .5s apart) — a near miss. Start: the first step of the staircase rises in and fades away three times over 3.6s, ending gone. Calendar: once its card has landed, done days pop in 90ms apart (idra-pop) and thin out by week. Life square: tiles drop in 8px and settle, each sooner than the last (--d); the health tile squeezes in last, holds, and fades to its dashed trace. No-script shows every drawing complete; reduced motion lands on each end state. */
.hard-step:nth-child(1){--seq:0s}.hard-step:nth-child(2){--seq:.4s}.hard-step:nth-child(3){--seq:.8s}
.js .hard-step{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .4s ease-out;transition-delay:var(--seq)}
.js .hard-steps.play .hard-step{opacity:1;transform:none}
.nm{transform-box:fill-box;transform-origin:50% 50%}
@keyframes nearMiss{0%,100%{transform:none}36%{transform:translate(var(--x),var(--y))}42%{transform:translate(calc(var(--x)*.85),calc(var(--y)*.85)) rotate(-4deg)}48%{transform:translate(var(--x),var(--y)) rotate(4deg)}54%{transform:translate(calc(var(--x)*.85),calc(var(--y)*.85)) rotate(-3deg)}60%{transform:translate(calc(var(--x)*.95),calc(var(--y)*.95)) rotate(0)}}
.js .play .nm{animation:nearMiss 1.6s ease-in-out calc(var(--seq) + var(--i)*.5s) both}
.step-pop{transform-box:fill-box;transform-origin:50% 100%}
@keyframes stepFlicker{0%{opacity:0;transform:scaleY(.2)}10%,26%{opacity:1;transform:none}34%{opacity:0;transform:none}44%,60%{opacity:1;transform:none}68%{opacity:0}78%,88%{opacity:1}100%{opacity:0}}
.js .step-pop{opacity:0}
.js .play .step-pop{animation:stepFlicker 3.6s ease-in-out var(--seq) both}
.cal-done{transform-box:fill-box;transform-origin:50% 50%}
.js .cal-done{transform:scale(0)}
.js .play .cal-done{animation:idraPop .4s cubic-bezier(.34,1.56,.64,1) calc(var(--seq,0s) + .5s + var(--i)*90ms) both}
@keyframes tileDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.js .lt{opacity:0}
.js .play .lt{animation:tileDrop .4s ease-out var(--d) both}
@keyframes healthInOut{0%{opacity:0}12%,40%{opacity:1}100%{opacity:0}}
.js .life-health{opacity:0}
.js .play .life-health{animation:healthInOut 1.6s ease-in-out 1.45s both}
@media (prefers-reduced-motion:reduce){.js .hard-step,.js .hard-last{opacity:1;transform:none;transition:none}.js .play .nm{animation:none}.js .step-pop{opacity:0;animation:none!important}.js .cal-done{transform:none;animation:none!important}.js .lt{opacity:1;animation:none!important}.js .life-health{opacity:0;animation:none!important}}
/* Private by default, inside How Idra helps (96px below its cards), kept quiet: one white card (the step-card construction) holding a Headline heading and three small drawings (160px wide), each above its fact at Title size. They rise in with the page's plain arrival stagger; the drawings don't move. */
.priv-block{margin-top:96px;background:var(--white);border-radius:20px;box-shadow:var(--shadowCard);padding:48px 32px}
.priv-head{text-align:center}
.priv-cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:32px}
.priv{display:flex;flex-direction:column;align-items:center;text-align:center}
.priv-art{width:160px}
.priv .title{margin-top:16px;max-width:22ch}
/* sections (WEB) */
.section{padding:var(--sec) 0;border-top:1px solid var(--line)}
/* Section grounds, all app washes: gold hero → skyWash (advice) → coralWash (hard) → mintWash (approach); the ink closer ends the page. */
.section.hard{background:var(--coralWash);border-top:0}
#approach{background:var(--mintWash);border-top:0}
/* Section headings sit centered, like the hero and the closer. */
.section-head,.advice h2{text-align:center}
.section-head{margin-bottom:var(--blk)}
.section-head .lead{margin-left:auto;margin-right:auto}
.section-head .label:only-child{margin-bottom:-16px}
.section-head .about-name+h2{margin-top:var(--grp)}
.section-head .label+h2{margin-top:var(--grp)}
.section-head .lead{margin-top:var(--grp);max-width:60ch}
.cards{display:flex;flex-direction:column}
.card{border-radius:16px;padding:32px}
.card.coral{background:var(--coralWash)}.card.coral .disc{background:var(--coral)}
.card.sky{background:var(--skyWash)}.card.sky .disc{background:var(--sky)}
.card.mint{background:var(--mintWash)}.card.mint .disc{background:var(--mint)}
/* Private by default: one white card on its own band, the same construction as the step cards above it. */
.privacy{background:var(--white);border-radius:20px;box-shadow:var(--shadowCard);padding:32px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:center}
.privacy-head{display:flex;align-items:center;gap:24px}
.privacy .disc{flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.privacy .facts{list-style:none;display:flex;flex-direction:column;max-width:560px}
.privacy .facts li+li{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.privacy .facts li{display:flex;align-items:flex-start;gap:12px}
.privacy .facts svg{margin-top:8px}
.privacy .facts svg{flex:0 0 auto;display:block}
.card .disc{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:32px}
.card .lead{margin-top:12px;text-wrap:pretty}
/* How Idra helps: one table of rows, centred on the page, a block apart — a white card holding its drawing (a third of the width) in the left column, its title and line in the right, vertically centred, on the section's gold wash. Under 1100px each step stacks, the copy centred beneath its drawing. Each step rises in and its drawing settles once when it comes into view (site.js adds .play to each step): the conversation's nine topics pop in 100ms apart (idra-pop); the person hops up the stairs — first step, each step after, then onto the flag's platform — pausing briefly on each (2.8s); each step, and the platform at the top, turns mint as they land on it; the puzzle pieces slide in and fit around health (.9s, arrival ease). No-script shows each finished; reduced motion lands on the end state. */
#approach .cards{display:grid;grid-template-columns:calc((100% - 64px) / 3) auto;justify-content:center;column-gap:64px;row-gap:var(--blk)}
.card.help{background:none;padding:0;border-radius:0;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
.help-art{background:var(--white);border-radius:20px;box-shadow:var(--shadowCard);padding:24px}
.card.help .help-copy{text-align:left}
.card.help .headline{max-width:18ch}
.help-svg{display:block;width:100%;height:auto}
.card.help{--seq:0s}
.js .card.help{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .4s ease-out;transition-delay:var(--seq)}
.js .card.help.play{opacity:1;transform:none}
.chip-in,.pc,.deal{transform-box:fill-box;transform-origin:50% 50%}
.step-up{transform:translate(240px,-144px)}
@keyframes stepHop{0%{transform:none}10%{transform:translate(29px,-58px)}20%,28%{transform:translate(58px,-36px)}36%{transform:translate(88px,-94px)}44%,52%{transform:translate(118px,-72px)}60%{transform:translate(148px,-130px)}68%,76%{transform:translate(178px,-108px)}84%{transform:translate(209px,-166px)}92%,100%{transform:translate(240px,-144px)}}
.js .step-up{transform:none}
.js .play .step-up{animation:stepHop 2.8s ease-in-out calc(var(--seq) + .3s) both}
.st{fill:var(--mint)}
.js .st{fill:var(--neutralWash);transition:fill .3s ease-out calc(var(--seq) + .3s + var(--t))}
.js .play .st{fill:var(--mint)}
.deal{transform:rotate(var(--r))}
.js .deal{transform:translateY(40px);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--seq) + var(--i)*120ms),opacity .3s ease-out calc(var(--seq) + var(--i)*120ms)}
.js .play .deal{transform:rotate(var(--r));opacity:1}
.js .chip-in{transform:scale(0)}
.js .play .chip-in{animation:idraPop .5s cubic-bezier(.34,1.56,.64,1) calc(var(--seq) + var(--i)*100ms) both}
.pc{transform:translate(var(--x),var(--y))}
.js .pc{transform:rotate(var(--r));transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--seq)}
.js .play .pc{transform:translate(var(--x),var(--y))}
@media (prefers-reduced-motion:reduce){.js .step-up{transform:translate(240px,-144px);animation:none!important}.js .st{fill:var(--mint);transition:none}.js .card.help{opacity:1;transform:none;transition:none}.js .chip-in{transform:none;animation:none!important}.js .deal{transform:rotate(var(--r));opacity:1;transition:none}.js .pc{transform:translate(var(--x),var(--y));transition:none}}
/* about view: centered like the home page. Gold hero — vision (Display) and mission (Headline) — then values as white drawing cards (the step-card construction) on the mint wash, each value beneath its card, then contact on the page ground. */
.about-hero{background:var(--gold);padding:var(--grp) 0 0;text-align:center}
/* Her name, spelled out: four cells (the letter at Display over its word at Label and what it stands for at Caption), the loop drawn in the
   2.5px ink line around Reflection and Action. One row of 176px cells on desktop; two rows of 140px on
   phones, the loop around the second. The loop reaches 48px (30) past the letters, inside the block above
   and below it. */
.name-row{display:grid;grid-template-columns:repeat(4,176px);column-gap:24px;justify-content:center;margin:var(--blk) auto 0;font:inherit;letter-spacing:0}
.name-cell{display:flex;flex-direction:column;align-items:center;gap:var(--bnd)}
.name-cell .display{display:block}
.name-cell{grid-row:1}.name-cell:nth-child(1){grid-column:1}.name-cell:nth-child(2){grid-column:2}.name-cell:nth-child(3){grid-column:3}.name-cell:nth-child(4){grid-column:4}
.name-loop{grid-row:1;grid-column:3/5;align-self:center;justify-self:center;margin:-56px 0;pointer-events:none}
.name-loop-sm{display:none}
/* What Idra is, as Headline, under her mark and a block above what her name comes from (Title),
   which sits a block above the letters. Both take the full column, balanced. */
.about-what{margin:var(--grp) auto var(--blk);text-wrap:balance}
.name-intro{text-wrap:balance}
.name-line{margin-top:var(--blk)}
.name-line strong{font-weight:700}
@media (max-width:560px){.name-row{grid-template-columns:repeat(2,140px);column-gap:16px;row-gap:var(--blk)}.name-cell:nth-child(3){grid-row:2;grid-column:1}.name-cell:nth-child(4){grid-row:2;grid-column:2}.name-loop-lg{display:none}.name-loop-sm{display:block;grid-row:2;grid-column:1/3;margin:-44px 0}}
.about-vm{border-top:0;text-align:center}
.about-vm h2,.about-vm .about-mission h2{margin-left:auto;margin-right:auto}
.about-vm .display{margin-top:var(--grp);max-width:20ch}
.about-mission{margin-top:var(--blk)}
.about-mission h2{margin-top:var(--grp);max-width:30ch}
.about-values{background:var(--mintWash);border-top:0}
.values{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grp)}
.value .title{margin-top:var(--grp);text-align:center}
.about-contact{border-top:0}
/* Footer: her mark, still, at the site's 48 on her gold disc beside the copyright; the links at the right. */
footer{padding:var(--blk) 0;border-top:1px solid var(--line)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:var(--grp);flex-wrap:wrap}
.foot-sign{display:flex;align-items:center;gap:var(--grp)}
.foot-legal{display:flex;gap:16px;flex-wrap:wrap}
.foot-legal a{color:var(--inkMuted);text-decoration:underline;text-underline-offset:2px}.foot-legal a:hover{color:var(--ink)}
@media (max-width:560px){.foot{flex-direction:column;text-align:center}.foot-legal{justify-content:center;gap:4px 16px}}
/* legal view */
.legal{max-width:720px;margin:0 auto}
.legal-title{font-size:48px;line-height:1.1;letter-spacing:-.025em}
.legal .dates{margin-top:var(--grp);color:var(--inkMuted)}
.legal .dates+p{margin-top:var(--grp)}
.legal h2.title{margin-top:var(--blk)}
.legal h3.card-title{margin-top:var(--grp)}
.legal p.body{margin-top:var(--grp)}
.legal ul.body{list-style:none;margin-top:var(--grp);display:flex;flex-direction:column;gap:var(--bnd)}
.legal ul.body li{position:relative;padding-left:24px}
.legal ul.body li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--inkFaint)}
.legal strong{font-weight:700;color:var(--ink)}
/* FAQs: shares the legal page shell; each section's questions sit in one white card, answers always open. */
.faq-sec{margin-top:var(--blk)}
.faq-list{margin-top:var(--grp);background:var(--white);border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line);padding:0 32px}
.faq-item{padding:24px 0}
.faq-item+.faq-item{border-top:1px solid var(--line)}
.faq h2.title{margin-top:0}
.faq .faq-item p.body{margin-top:var(--bnd);text-wrap:pretty}
/* Advice column spacing applies only below 860px; the pile keeps its own layout above 1000px. */
@media (max-width:860px){.voices{gap:48px}.voice{max-width:480px}}
/* Under 1100px the side-by-side rows (steps, help steps, privacy facts) stack into one centered column. */
@media (max-width:1100px){
.hard-step{display:flex;flex-direction:column;align-items:center}
.hard-step .hard-art{width:100%}
.hard-steps{grid-template-columns:1fr;gap:var(--blk)}
.cards,#approach .cards{display:flex;gap:var(--blk)}
.card.help{grid-template-columns:1fr;gap:var(--grp);justify-items:center}
.help-art{width:100%;max-width:560px}
.card.help .help-copy{text-align:center}
.card.help .headline{margin:0 auto}
.priv-cards{grid-template-columns:1fr;gap:32px}
.priv-block{padding:32px 24px}
.hard-row{grid-template-columns:1fr;gap:var(--grp)}
.hard-last{justify-items:center}
.hard-close{text-align:center}
.hard-last{margin-top:var(--blk)}
.hard-art{max-width:440px}
.cards,.values{grid-template-columns:1fr}
.value{display:flex;flex-direction:column;align-items:center}
.value .hard-art{width:100%}
.section-head{max-width:none}
}
/* Under 720px the label drops to its own line under the brand name; the icon stays on the name's line. No divider. */
@media (max-width:560px){
.wrap{padding:0 24px}
.voice{max-width:none;gap:8px}
.v-illo{width:64px}
.v-bot{padding:16px}
.hard-art{padding:16px}
.legal h2.title{margin-top:var(--blk)}
.faq-sec{margin-top:var(--blk)}
.faq h2.title{margin-top:0}
.faq-list{padding:0 24px}
.lead{font-size:18px}
.section{padding:var(--sec) 0}.about-hero{padding:var(--grp) 0 var(--grp)}
.section-head{margin-bottom:var(--blk)}
.about-mission{margin-top:var(--blk)}
.privacy{grid-template-columns:1fr;gap:24px}
.privacy-head{gap:16px}
.card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.card.help{grid-template-columns:1fr;gap:var(--grp)}
.card .disc{margin-bottom:0}
.card .lead{grid-column:1/-1;margin-top:16px}
}

/* Arrival (spec: Motion · one-shots, Arrival — idra-rise): content rises 8px over .4s ease-out, once, when it comes into view; items in a group step 100ms apart. Gated on .js so no-script shows everything; reduced motion shows everything in place. */
@keyframes idraRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* The pile (wide and tall screens — 1000×800 and up): the section is 260vh tall and its content pins to the top of the screen for the stretch. Voices sit in a tight three-column grid (the clinic letter's middle column 1.4× wider), tilted (--r) with the second row tucked up so card edges overlap but no message is covered; they land as the scroll passes each fifth — rising 40px and settling at .5s on the arrival ease. Reduced motion shows the whole pile in place. Smaller screens use the column. */
@media (min-width:1000px) and (min-height:800px){
.section.advice{padding:0;height:260vh}
.advice-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.advice-pin .wrap{width:100%}
.voices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"a b c" "d e e";gap:var(--blk);align-items:start;margin-top:var(--blk)}
.voice{max-width:none;align-self:start;transform:rotate(var(--r))}
.voice:nth-child(even){align-self:start}
.voice:nth-child(1){grid-area:a;--r:-2deg}
.voice:nth-child(2){grid-area:b;--r:1.5deg;margin-top:24px}
.voice:nth-child(3){grid-area:c;--r:1deg;margin-top:8px}
.voice:nth-child(4){grid-area:d;--r:-2.5deg;margin-top:24px;margin-left:48px}
.voice:nth-child(5){grid-area:e;--r:-1deg;margin-top:24px;margin-left:48px;max-width:640px}
.js .voice{opacity:0;transform:translateY(40px) rotate(var(--r));transition:opacity .4s ease-out,transform .5s cubic-bezier(.2,.8,.2,1)}
.js .voice.on{opacity:1;transform:rotate(var(--r))}
}
@media (min-width:1000px) and (min-height:800px) and (prefers-reduced-motion:reduce){.js .voice{opacity:1;transform:rotate(var(--r));transition:none}}
/* Reduced motion: no pin — the section takes its natural height and the pile sits in place. */
@media (min-width:1000px) and (min-height:800px) and (prefers-reduced-motion:reduce){.section.advice{height:auto;padding:var(--sec) 0}.advice-pin{position:static;height:auto;display:block}}
@media not all and (min-width:1000px) and (min-height:800px){.js .voice{opacity:0;transform:translateY(24px);transition:opacity .4s ease-out,transform .5s cubic-bezier(.2,.8,.2,1)}.js .voice.on{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .voice{opacity:1;transition:none}}
@media not all and (min-width:1000px) and (min-height:800px){@media (prefers-reduced-motion:reduce){.js .voice{transform:none}}}
@keyframes idraWordIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.js .rise{opacity:0}
.js .rise.in{animation:idraRise .4s ease-out both;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1}.js .rise.in{animation:none}}
@keyframes idraPop{0%{transform:scale(0)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Below the ladder: colour changing under a cursor eases at .2s. */
.btn,.text-link,a,.wl-input{transition:color .2s,background-color .2s,opacity .2s,box-shadow .2s}

/* Her gold field, ending in one bow (WEB.curve): the app's 60 at the app's proportion — 15.4% of the
   width, 60 on a phone, capped at 240. The bow is the lower half of an ellipse 130.8% of the field's
   width, painted as a gradient inside the field's own width, so nothing reaches past the screen's
   sides. The section after it (.after-bow) is padded by the same depth. */
:root{--bow:clamp(60px,15.4vw,240px)}
.gold{background:var(--gold)}
.bow{position:relative;z-index:2}
.bow::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--bow));height:var(--bow);background:radial-gradient(65.4% 100% at 50% 0,var(--gold) 99.5%,rgba(255,238,170,0) 100%);pointer-events:none;z-index:0}
.bow>*{position:relative;z-index:1}
.section.after-bow{padding-top:calc(var(--sec) + var(--bow))}
@media (min-width:1000px) and (min-height:800px){.section.advice.after-bow{padding-top:calc(var(--grp) + var(--bow))}.advice .voices{margin-top:var(--blk)}}
html,body{overflow-x:clip}
/* A section's head: centred, 48 (32 on phones) above what it introduces. */
.w-head{text-align:center;max-width:760px;margin:0 auto var(--blk)}
/* Her mark (the living mark, app/idra-character.jsx): her figure on a disc, sized by --s. */
.lm{position:relative;flex:0 0 auto;isolation:isolate;width:var(--s,72px);height:var(--s,72px)}
.lm-disc{position:absolute;inset:0;border-radius:50%;background:var(--gold);transition:background-color .2s}
.lm>svg{position:relative;overflow:visible;display:block;width:100%;height:100%}
.mark-lg{--s:128px}
@media (max-width:560px){.mark-lg{--s:72px}}
/* The waitlist. Stacked (hero, popup): the field full width, the button centred under it, the age line
   centred under that; an error sits under the field. The send field (the closer): one pill, the email
   and the 32px send disc, ink once something is typed. */
.wl{width:100%;max-width:560px;margin:0 auto}
.wl-row{display:flex;flex-direction:column;align-items:center;gap:var(--grp)}
.wl-input{font-family:var(--font);font-size:21px;font-weight:500;line-height:27px;color:var(--ink);background:var(--white);border:none;outline:none;border-radius:999px;padding:20px 24px;width:100%;min-width:0;box-shadow:inset 0 0 0 1px var(--inkMuted)}
.wl-input::placeholder{color:var(--inkMuted)}
.wl-input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.wl.error .wl-input,.wl.error .wl-send-field{box-shadow:inset 0 0 0 2px var(--coralInk)}
.wl-err{display:none;align-self:stretch;gap:8px;align-items:flex-start;color:var(--coralInk)}
.wl-err svg{flex:0 0 auto;margin-top:5px}
.wl.error .wl-err{display:flex}
.wl-age{margin-top:var(--bnd);text-align:center}
.wl-send-field{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:999px;padding:20px 16px 20px 24px;box-shadow:inset 0 0 0 1px var(--inkMuted)}
.wl-send-field:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.wl-send-field .wl-input{padding:0;box-shadow:none!important;background:transparent;flex:1}
.wl-send{width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:none;cursor:pointer;background:var(--line);display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.wl-send.on{background:var(--ink)}
.wl-send-field+.wl-err{margin-top:var(--bnd)}
.wl-arrow.error .wl-age{display:none}
@media (max-width:560px){.wl-input{font-size:17px;line-height:22px;padding:16px 24px}.wl-send-field{padding:16px 16px 16px 24px}}
/* Build: the Cloudflare Turnstile widget (Managed, interaction-only, flexible size, light theme to match the white field), added by site.js just above the age line. It is hidden and takes no space unless Cloudflare needs the visitor to interact; then it shows (.shown) at the form's width and pushes the age line down. */
.wl-turnstile.shown{margin-top:var(--grp)}
/* Joined: one centred card wider than the form it replaces (to 760, centred on it), so the three
   choices hold one line; in the popup and on phones it takes its column's width and they wrap. */
.joined{background:var(--white);border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--line);padding:32px;display:flex;flex-direction:column;align-items:center;gap:var(--grp);text-align:center;width:min(760px,calc(100vw - 48px));align-self:center}
.moment .joined,.pop .joined{width:100%}
@media (max-width:560px){.joined{width:100%;padding:24px}}
/* It takes the place of the form, so it keeps the form's 32 above it. */
.pitch .joined,.pop-side .joined,.closer .joined{margin-top:var(--grp)}
.joined-slot{align-self:stretch;border-top:1px solid var(--line);padding-top:var(--grp);display:flex;flex-direction:column;align-items:center;gap:var(--grp)}
.joined-goals{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--bnd)}
.joined-goals .btn{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--inkMuted)}
/* Build: an error line under the choices when saving an answer fails (the design has no failure state), in the error colour on the white card wherever it sits. */
.joined-err{display:none;gap:8px;align-items:flex-start;color:var(--coralInk);text-align:left}
.joined-err svg{flex:0 0 auto;margin-top:5px}
.joined-slot.error .joined-err{display:flex}
/* The closer: her mark, the heading, one line, the send field — on ink. */
.closer{background:var(--ink);padding:var(--sec) 0;text-align:center}
.closer .wrap{display:flex;flex-direction:column;align-items:center}
.closer .wrap>h2{color:var(--onInk);margin-top:var(--grp)}
.closer .wrap>.lead{color:var(--onInkMuted);margin-top:var(--grp);white-space:nowrap}
.closer .wl{margin-top:var(--grp);text-align:left}
.closer .wl-age{color:var(--onInkMuted)}
.closer .wl-err{color:var(--onInk)}
@media (max-width:720px){.closer .wrap>.lead{white-space:normal;text-wrap:balance}}
/* Her mark at the top of every page, where the home page has it: 16 under the header, 128 (72 on phones) —
   on her cream disc over the about hero's gold, her gold disc on the cream pages. 32 (24) above the first line. */
main>.section:first-child{padding-top:var(--grp)}
.page-mark{display:flex;justify-content:center;margin-bottom:var(--grp)}
.about-hero .lm-disc{background:var(--bg)}
/* Every page fills the screen, so the footer always sits at the foot of it — the same footer, the same place. */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}