/* =====================================================================
   DopaFix — site stylesheet
   Sources: the DopaFix logo (flower gradient, wordmark purple), the owner's
   "Cognitive Editorial Dark" design doc, and the book jackets (forest, cream).
   See docs/DOPAFIX-DESIGN.md. Nothing here is shared with LYLLAK.
   ===================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/newsreader-normal-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}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/newsreader-normal-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-italic-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}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-italic-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-normal-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}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-normal-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --bg:#121314; --surface:#1A1C1E; --card:#1F2226; --line:#2A2D32; --line-2:#3A3E44;
  --text:#F5F1EA; --muted:#A5AAA8;
  --p1:#F5A91D; --p2:#F3982C; --p3:#F0814A; --p4:#EE6A56; --p5:#E94477; --p6:#E73387;
  --bloom:linear-gradient(120deg,#F5A91D 0%,#F3982C 25%,#EE6A56 55%,#E94477 80%,#E73387 100%);
  --story:#7044C2; --story-light:#A98BF0;
  --forest:#062720; --forest-2:#0C3329; --cream:#F7F0DE; --title-pink:#F48CA7;
  --paper:#F7F0DE; --ink:#1B1A1E; --ink-muted:#5A5650;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(1rem,4vw,3rem); --max:1240px;
  --r-sm:12px; --r:20px; --r-lg:28px;
  --ease:cubic-bezier(.22,.7,.15,1);
  --top-h:72px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 1rem);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
p a,li a,dd a{text-decoration:underline}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
em{font-style:italic}
/* the one phrase that matters, set like the book covers: italic, in petal colour */
h1 em,h2 em,.hero__title em{font-style:italic;background:var(--bloom);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
:focus-visible{outline:2px solid var(--p2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:100;background:var(--cream);color:var(--ink);padding:.7rem 1rem;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:1rem}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;font-size:inherit}
.eyebrow{font:600 .8rem/1.2 var(--sans);letter-spacing:.04em;color:var(--p2)}
.h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.link{font-weight:600;text-decoration:none;color:var(--p2);white-space:nowrap}
.link:hover{text-decoration:underline}
.ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.7rem;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.75rem;height:.75rem;border-radius:70% 0 70% 0;background:var(--bloom);transform:rotate(45deg)}

/* ---------- Buttons: pills, the flower gradient for the one main action ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;border:1.5px solid transparent;
  font:600 1rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background-color .2s,border-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.btn--bloom{background:var(--bloom);color:#1A1210}
.btn--bloom:hover{transform:translateY(-1px);box-shadow:0 8px 28px -6px #ee6a5680}
.btn--bloom:active{transform:translateY(0)}
.btn--quiet{border-color:var(--line-2);color:var(--text);background:transparent}
.btn--quiet:hover{border-color:var(--p2)}
.btn--sm{min-height:40px;padding:.5rem 1rem;font-size:.92rem}
.btn--lg{min-height:56px;padding:.9rem 1.8rem;font-size:1.06rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;height:var(--top-h);display:flex;align-items:center;gap:1.5rem;padding:0 var(--gut);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.is-scrolled{border-bottom-color:var(--line)}
.top__logo{display:block;width:132px;margin-right:auto;flex:none}
.top__nav{display:flex;gap:.2rem}
.top__nav a{padding:.5rem .8rem;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500;transition:color .2s,background-color .2s}
.top__nav a:hover{color:var(--text)}
.top__nav a[aria-current="page"]{color:var(--text);background:var(--card)}
.top__menu{display:none;min-height:44px;padding:.4rem 1rem;border-radius:999px;border:1.5px solid var(--line-2);background:none;font-weight:600;cursor:pointer}
.sheet{position:fixed;inset:var(--top-h) 0 0;z-index:45;background:var(--bg);padding:1.5rem var(--gut) 2rem;display:flex;flex-direction:column;gap:1.5rem;overflow:auto}
.sheet[hidden]{display:none}
.sheet nav{display:grid}
.sheet nav a{padding:1rem 0;border-bottom:1px solid var(--line);font:400 2rem/1.1 var(--serif);text-decoration:none}
.sheet__note{color:var(--muted);font-size:.9rem}

/* ---------- The flower ---------- */
.flower{display:block;width:100%;height:auto;overflow:visible}
.flower .petal{transform-box:view-box;transform-origin:0 0;transition:opacity .35s var(--ease),filter .35s}
.flower .centre{fill:var(--bg);stroke:var(--story);stroke-width:2.5;transition:fill .3s}
.flower--outline .petals,.flower--outline .petal{fill:none!important}
.flower--outline .petal{stroke:var(--line-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.flower--outline .centre{stroke:var(--line-2)}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(2rem,5vw,5rem);max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6.5rem) var(--gut) clamp(3rem,7vw,6rem);position:relative}
.hero::before{content:"";position:absolute;right:-10%;top:-10%;width:70%;height:90%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#f5a91d1c,transparent 70%)}
.hero__title{font-size:clamp(2.9rem,7vw,6.2rem);line-height:.98;letter-spacing:-.03em}
.hero__title em{display:block}
.hero__lede{max-width:34ch;margin-top:1.75rem;font:400 clamp(1.15rem,1.6vw,1.35rem)/1.5 var(--serif);color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2.25rem}
.hero__meta{display:flex;gap:1.1rem;color:var(--muted);font-size:.95rem}
.hero__meta span{display:inline-flex;align-items:center;gap:.5rem}
.hero__meta span+span::before{content:"";width:.45rem;height:.45rem;border-radius:70% 0 70% 0;background:var(--p4);transform:rotate(45deg)}
.hero__note{margin-top:1.25rem;font-size:.92rem;color:var(--muted);display:flex;align-items:center;gap:.6rem}
.hero__note::before{content:"";width:1.2rem;height:2px;background:var(--bloom)}
.hero__flower{position:relative;max-width:460px;width:100%;justify-self:center}
.hero__flower .petal{cursor:pointer}
.hero__petal{min-height:3.2em;margin-top:1.25rem;text-align:center;font:italic 400 clamp(1.15rem,1.7vw,1.4rem)/1.35 var(--serif);color:var(--text)}
.hero__petal b{display:block;font:600 .8rem/1.4 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--p2)}
.flower[data-focus] .petal{opacity:.22}
.flower[data-focus] .petal.is-on{opacity:1;filter:drop-shadow(0 0 14px #f5a91d55)}
/* bloom: petals unfold from the centre, one after another (load moment) */
@media (prefers-reduced-motion:no-preference){
  html.js .flower--hero .petal{animation:bloom .9s var(--ease) both}
  html.js .flower--hero .petal:nth-child(2){animation-delay:.08s}
  html.js .flower--hero .petal:nth-child(3){animation-delay:.16s}
  html.js .flower--hero .petal:nth-child(4){animation-delay:.24s}
  html.js .flower--hero .petal:nth-child(5){animation-delay:.32s}
  html.js .flower--hero .petal:nth-child(6){animation-delay:.4s}
  html.js .flower--hero .centre{animation:centre .6s var(--ease) .7s both}
}
@keyframes bloom{from{opacity:0;scale:.15}}
@keyframes centre{from{opacity:0;scale:0}}

/* ---------- Sections ---------- */
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1rem 2rem;align-items:end;max-width:var(--max);margin:0 auto 2.5rem}
.section-head p{color:var(--muted);max-width:44ch}

/* Recognition */
.recog{max-width:var(--max);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--gut)}
.recog__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 3rem;align-items:end;margin-bottom:2.5rem}
.recog__head p{color:var(--muted);max-width:46ch}
.recog__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.recog__list li{border-bottom:1px solid var(--line)}
.recog__list summary{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding:1.35rem .25rem;cursor:pointer;list-style:none}
.recog__list summary::-webkit-details-marker{display:none}
.recog__list summary::after{content:"+";font:300 1.6rem/1 var(--sans);color:var(--muted);transition:transform .3s var(--ease)}
.recog__list details[open] summary::after{transform:rotate(45deg)}
.recog__name{display:inline-flex;align-items:center;gap:.6rem;font:600 .85rem/1.2 var(--sans);letter-spacing:.03em;color:var(--muted)}
.recog__name::before{content:"";width:.8rem;height:.8rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c,var(--p2))}
.recog__list q{font:400 clamp(1.45rem,2.8vw,2.3rem)/1.2 var(--serif);quotes:"\201C" "\201D";transition:color .2s}
.recog__list summary:hover q{color:#fff}
.recog__list details p{padding:0 .25rem 1.5rem calc(9.5rem + 1.25rem);color:var(--muted);max-width:calc(60ch + 10rem)}
.recog__list details p a{color:var(--text)}
.recog__story{margin-top:2rem;color:var(--muted);max-width:68ch}
.recog__story em{color:var(--text);font-family:var(--serif);font-size:1.2em}
.recog__dot{display:inline-block;width:.8rem;height:.8rem;margin-right:.7rem;border-radius:50%;border:2.5px solid var(--story);vertical-align:-.05em}
[data-area="starting"]{--c:var(--p2)}[data-area="time"]{--c:var(--p4)}[data-area="focus"]{--c:var(--p6)}
[data-area="organisation"]{--c:var(--p5)}[data-area="finishing"]{--c:var(--p3)}[data-area="overwhelm"]{--c:var(--p1)}[data-area="story"]{--c:var(--story-light)}

/* Screening teaser */
.screen-teaser{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)}
.screen-teaser__card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(1.75rem,5vw,4rem);border-radius:var(--r-lg);background:radial-gradient(90% 70% at 0% 0%,#f5a91d14,transparent 60%),var(--surface);border:1px solid var(--line)}
.screen-teaser__flower{max-width:300px;width:100%;justify-self:center}
.screen-teaser__text p{margin-top:1rem;color:var(--muted);max-width:52ch}
.screen-teaser__text .btn{margin-top:2rem}

/* Why */
.why{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)}
/* one editorial statement in the books' voice, not a features trio */
.why__label{font:600 .8rem/1.2 var(--sans);letter-spacing:.04em;color:var(--p2)}
.why__statement{margin-top:1.25rem;max-width:30ch;font:400 clamp(1.8rem,3.6vw,3rem)/1.22 var(--serif);letter-spacing:-.015em;color:var(--muted)}
.why__statement em{font-style:italic;color:var(--text)}

/* ---------- Library (the book jackets' forest green) ---------- */
.library{background:radial-gradient(70% 60% at 85% 0%,#f48ca71a,transparent 60%),var(--forest);color:var(--cream);padding:clamp(4rem,9vw,7rem) var(--gut)}
.library__inner{max-width:var(--max);margin:0 auto}
.library__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1rem 2rem;align-items:end}
.library__head p{color:#cfd9cf;max-width:44ch}
.library h1 em,.library h2 em{background:none;color:var(--title-pink)}
.library .link{color:var(--title-pink)}
.library__head--page{grid-template-columns:minmax(0,1fr);max-width:52rem}
.library__head--page .eyebrow{color:var(--title-pink)}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.shelf__fallback{color:#cfd9cf}
.book{display:grid;align-content:start;gap:.9rem}
.book__cover{position:relative;border-radius:4px 10px 10px 4px;overflow:hidden;box-shadow:0 30px 50px -24px #000c,0 2px 0 #ffffff10 inset;transition:transform .5s var(--ease)}
.book__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0006 0,#0000 3%,#ffffff12 4%,#0000 7%);pointer-events:none}
.book:hover .book__cover{transform:translateY(-6px) rotate(-.6deg)}
.book__petal{display:inline-flex;align-items:center;gap:.5rem;font:600 .78rem/1.2 var(--sans);letter-spacing:.04em;color:#cfd9cf}
.book__petal::before{content:"";width:.7rem;height:.7rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)}
.book h3{font-size:1.65rem;color:var(--cream)}
.book__short{font:italic 400 1.15rem/1.4 var(--serif);color:var(--title-pink)}
.book__desc{color:#cfd9cf;font-size:.98rem}
.book__buy{justify-self:start;margin-top:.25rem}
.book__fmt{font-size:.82rem;color:#a9b8ad}
.book .btn--quiet{border-color:#ffffff33;color:var(--cream)}
.book .btn--quiet:hover{border-color:var(--title-pink)}
.library__fine{margin-top:3rem;font-size:.88rem;color:#a9b8ad;max-width:70ch}

/* ---------- Tools ---------- */
.tools-teaser{max-width:var(--max);margin:0 auto;padding:clamp(4rem,9vw,7rem) var(--gut)}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.tool{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden}
.tool__img{aspect-ratio:928/700;object-fit:cover;width:100%;background:#2a2620}
.tool__img--none{display:grid;place-items:center;aspect-ratio:928/700;background:radial-gradient(60% 60% at 50% 40%,#f5a91d1f,transparent 70%),var(--surface)}
.tool__img--none svg{width:34%}
.tool__body{display:grid;align-content:start;gap:.55rem;padding:1.25rem 1.35rem 1.5rem}
.tool h3{font-size:1.35rem}
.tool__fmt{font-size:.85rem;color:var(--muted)}
.tool__short{color:var(--muted);font-size:.96rem}
.status{display:inline-flex;align-items:center;gap:.45rem;justify-self:start;padding:.25rem .7rem;border-radius:999px;font:600 .75rem/1.3 var(--sans);letter-spacing:.02em;border:1px solid var(--line-2);color:var(--muted)}
.status::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.status--published{color:#9fe3b4;border-color:#9fe3b455}
.status--in_production,.status--qa,.status--ready{color:var(--p1);border-color:#f5a91d55}
.status--idea{color:var(--muted)}
.catalogue{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(3rem,6vw,5rem);display:grid;gap:3rem}
.catalogue__group h2{font-size:1.8rem;margin-bottom:1.25rem}
.catalogue__group p.catalogue__note{margin:-.75rem 0 1.25rem;color:var(--muted)}

/* ---------- Guides ---------- */
.guides-teaser{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)}
/* guides read like a book's contents page, not a row of blog cards */
.guide-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.guide-list li{border-bottom:1px solid var(--line)}
.guide-list a{display:grid;grid-template-columns:9.5rem minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:.4rem 1.5rem;padding:1.3rem .25rem;text-decoration:none}
.guide-list b{font:400 clamp(1.4rem,2.4vw,1.9rem)/1.15 var(--serif);transition:color .2s}
.guide-list a:hover b{color:#fff;text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:.18em}
.guide-list span:last-child{color:var(--muted);font-size:.98rem}
.guide-list__area{display:inline-flex;align-items:center;gap:.5rem;font:600 .78rem/1.2 var(--sans);letter-spacing:.04em;color:var(--muted)}
.guide-list__area::before{content:"";width:.7rem;height:.7rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)}
.guides-index{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(4rem,9vw,7rem)}

/* ---------- Final call ---------- */
.final{display:grid;justify-items:center;text-align:center;gap:1.1rem;padding:clamp(4rem,10vw,8rem) var(--gut);background:radial-gradient(50% 60% at 50% 0%,#ee6a561f,transparent 70%);border-top:1px solid var(--line)}
.flower--final{width:88px}
.final__title{font-size:clamp(2.4rem,5.5vw,4.2rem)}
.final p{color:var(--muted)}
.final .btn{margin-top:.75rem}
.final__note{font-size:.9rem}

/* ---------- Page heads, cross-links ---------- */
.page-head{max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut) clamp(2rem,5vw,3.5rem)}
.page-head .h1{max-width:16ch;margin-top:.75rem}
.page-head p:last-child{margin-top:1.25rem;color:var(--muted);max-width:58ch;font:400 1.2rem/1.5 var(--serif)}
.cross{display:grid;justify-items:start;gap:1rem;max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--gut);border-top:1px solid var(--line)}
.cross p{color:var(--muted);max-width:52ch}

/* ---------- Advanced assessment ---------- */
.adv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4rem);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut)}
.adv .h1{margin-top:.75rem}
.adv__status{display:flex;align-items:center;gap:.8rem;margin-top:1.5rem;color:var(--muted)}
.adv__lede{margin-top:1.5rem;max-width:50ch;font:400 1.25rem/1.5 var(--serif);color:var(--muted)}
.adv__flower{max-width:340px;width:100%;justify-self:center}
.adv__flower .centre{fill:var(--story);stroke:none}
.adv-detail{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(3rem,7vw,5rem)}
.adv-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.adv-list li{display:grid;gap:.4rem;padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.adv-list b{font:400 1.4rem/1.2 var(--serif)}
.adv-list span{color:var(--muted)}
.adv-boundary{margin-top:2.5rem;padding:1.5rem 1.75rem;border-radius:var(--r);border:1px dashed var(--line-2)}
.adv-boundary p{margin-top:.6rem;color:var(--muted);max-width:68ch}
.adv-why{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--gut);border-top:1px solid var(--line);display:grid;justify-items:start;gap:1rem}
.adv-why p{color:var(--muted);max-width:62ch}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut)}
.about .h1{margin-top:.75rem}
.about__lead{font:400 1.4rem/1.45 var(--serif)}
.about__body p+p{margin-top:1.25rem;color:var(--muted)}
.about-rules{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(3rem,7vw,5rem)}
.rules{margin:2rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.rules div{padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.rules dt{font:400 1.45rem/1.2 var(--serif)}
.rules dd{margin:.6rem 0 0;color:var(--muted)}
.about-owner{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,6vw,4rem) var(--gut);border-top:1px solid var(--line)}
.about-owner p{margin-top:.9rem;color:var(--muted);max-width:62ch}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut)}
.contact .h1{margin-top:.75rem}
.contact__intro p{margin-top:1.25rem;color:var(--muted);max-width:44ch}
.contact__aside{font-size:.95rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-content:start;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.form__field{display:grid;gap:.4rem}
.form__field--wide,.form__foot,.form__status{grid-column:1/-1}
.form label{font-weight:600;font-size:.93rem}
.form input,.form select,.form textarea{width:100%;min-height:48px;padding:.7rem .9rem;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--bg);color:var(--text);transition:border-color .2s,box-shadow .2s}
.form textarea{resize:vertical;min-height:140px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--p2);box-shadow:0 0 0 3px #f3982c33}
.form [aria-invalid="true"]{border-color:#FF8A80}
.form__err{min-height:1.2em;font-size:.88rem;color:#FF8A80}
.form__hint{font-size:.85rem;color:var(--muted)}
.form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem}
.form__note{font-size:.88rem;color:var(--muted)}
.form__status{min-height:1.5em;font-weight:600}
.form__status.is-ok{color:#9fe3b4}.form__status.is-bad{color:#FF8A80}

/* ---------- Guide article: cream reading paper ---------- */
.page-guide main{background:var(--paper);color:var(--ink)}
.guide{max-width:44rem;margin:0 auto;padding:clamp(3rem,8vw,6rem) var(--gut) clamp(3rem,8vw,5rem)}
.guide__area{display:inline-flex;align-items:center;gap:.6rem;font:600 .85rem/1.2 var(--sans);letter-spacing:.03em;color:var(--ink-muted)}
.guide__area .dot{width:.85rem;height:.85rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)}
.guide__title{margin-top:1rem;font-size:clamp(2.6rem,6vw,4.2rem);color:var(--ink)}
.guide__title em{background:none;color:#B23A6A}
.guide__lede{margin-top:1.25rem;font:italic 400 1.4rem/1.45 var(--serif);color:#3B3833}
.guide__meta{margin-top:1rem;font-size:.88rem;color:var(--ink-muted)}
.guide__body{margin-top:2.5rem;font:400 1.22rem/1.7 var(--serif);color:#2A2723}
.guide__body p+p,.guide__body ul+p{margin-top:1.1rem}
.guide__body h2{margin:2.25rem 0 .75rem;font:600 1.15rem/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.guide__body ul{margin:1rem 0;padding-left:1.25rem}
.guide__body li+li{margin-top:.6rem}
.guide__body strong{font-weight:600;color:var(--ink)}
.guide__try{margin:2.5rem 0;padding:1.4rem 1.6rem;border-radius:var(--r);background:#efe5cc;border-left:4px solid var(--c)}
.guide__try h2{margin:0 0 .5rem}
.guide__foot{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #d9cfb5;color:#3B3833}
.guide__foot a{color:#8E2C55}
.guide__disclaimer{margin-top:.75rem;font-size:.88rem;color:var(--ink-muted)}
.page-guide :focus-visible,.page-doc main :focus-visible{outline-color:#8E2C55}

/* ---------- Legal documents ---------- */
.page-doc main{background:var(--paper);color:var(--ink)}
.doc{max-width:44rem;margin:0 auto;padding:clamp(3rem,8vw,5rem) var(--gut) clamp(3rem,8vw,5rem)}
.doc h1{font-size:clamp(2.6rem,6vw,4rem)}
.doc h2{margin-top:2.25rem;font-size:1.55rem}
.doc p,.doc li{color:#2C2924}
.doc p{margin-top:.75rem}
.doc ul{padding-left:1.25rem;margin:.75rem 0}
.doc a{color:#8E2C55}
.doc__meta{color:var(--ink-muted)!important}
.doc__todo{padding:.85rem 1rem;border-radius:var(--r-sm);background:#f4dfa9;border-left:4px solid var(--p1)}
.doc code{font-size:.9em;background:#ece2c8;padding:.05em .35em;border-radius:4px}
.doc__table{width:100%;margin-top:1rem;border-collapse:collapse;font-size:.95rem}
.doc__table th,.doc__table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid #d9cfb5;vertical-align:top}
.doc .btn--bloom{color:#1A1210}

/* ---------- 404 ---------- */
.lost{display:grid;justify-items:center;text-align:center;gap:1rem;max-width:40rem;margin:0 auto;padding:clamp(4rem,12vw,9rem) var(--gut)}
.flower--lost{width:120px}
.flower--lost .petal:nth-child(4){opacity:.08}
.lost p{color:var(--muted)}
.lost__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1rem}

/* ---------- Footer ---------- */
.foot{padding:clamp(3.5rem,7vw,5rem) var(--gut) 2rem;border-top:1px solid var(--line);background:var(--bg)}
.foot > *{max-width:var(--max);margin-inline:auto}
.foot__grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.foot__brand img{width:150px}
.foot__brand p{margin-top:.75rem;font:italic 400 1.3rem/1.2 var(--serif);color:var(--muted)}
.foot__nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:flex-start}
.foot__nav a{text-decoration:none;color:var(--muted);padding:.3rem 0}
.foot__nav a:hover{color:var(--text)}
.foot__note{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);max-width:var(--max)}
.foot__fine{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:1.25rem;font-size:.88rem;color:var(--muted)}
.foot__fine a{color:var(--muted)}
.foot__fine p:first-child{margin-right:auto}
.foot__fine p:first-child a{text-decoration:underline;text-decoration-color:var(--story-light)}

/* ---------- Consent ---------- */
.consent{position:fixed;left:var(--gut);right:var(--gut);bottom:var(--gut);z-index:80;max-width:560px;padding:1.2rem 1.35rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line-2);box-shadow:0 20px 50px #000a}
.consent[hidden]{display:none}
.consent p{font-size:.93rem;line-height:1.5;color:var(--muted)}
.consent__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* =====================================================================
   SELF-SCREENING
   ===================================================================== */
.page-screening main{min-height:calc(100svh - var(--top-h))}
.sx{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,7vw,5rem) var(--gut) clamp(4rem,8vw,6rem)}
.sx__view[hidden]{display:none}
.sx__intro{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.sx__intro-flower{max-width:360px;width:100%;justify-self:center}
.sx__title{margin-top:.75rem;font-size:clamp(2.6rem,6vw,4.6rem)}
.sx__lede{margin-top:1.25rem;font:400 1.25rem/1.5 var(--serif);color:var(--muted);max-width:52ch}
.sx__start{margin-top:2rem;display:grid;justify-items:start;gap:.75rem}
.sx__resume{color:var(--muted);font-size:.95rem}
.sx__nojs{margin-top:1.5rem;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line-2)}

/* question */
.sx__q{max-width:46rem;margin:0 auto}
.sx__progress{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1rem;align-items:center}
.sx__mini{grid-row:1/3;width:56px}
.sx__count{font-size:1.05rem}
.sx__count b{font:500 1.5rem/1 var(--serif)}
.sx__of{color:var(--muted)}
.sx__bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:.5rem}
.sx__bar i{display:block;height:100%;width:var(--w,0%);background:var(--bloom);transition:width .45s var(--ease)}
.sx__form{margin-top:clamp(2rem,5vw,3rem)}
.sx__form fieldset{border:0;margin:0;padding:0;min-width:0}
.sx__form legend{display:grid;gap:.75rem;padding:0;width:100%}
.sx__area{display:inline-flex;align-items:center;gap:.6rem;font:600 .85rem/1.2 var(--sans);letter-spacing:.04em;color:var(--c,var(--p2))}
.sx__area::before{content:"";width:.8rem;height:.8rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c,var(--p2))}
.sx__timeframe{color:var(--muted);font-size:.95rem}
.sx__question{font:400 clamp(1.75rem,3.6vw,2.5rem)/1.2 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.sx__question:focus{outline:none} /* receives focus only so screen readers start here; not interactive */
.sx__options{display:grid;gap:.6rem;margin-top:2rem}
.opt{position:relative;display:flex;align-items:center;gap:1rem;min-height:56px;padding:.85rem 1.1rem;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--surface);cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s var(--ease)}
.opt:hover{border-color:#ffffff44}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt__key{display:grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;border:1.5px solid var(--line-2);font:600 .85rem/1 var(--sans);color:var(--muted);transition:all .2s}
.opt__label{font-weight:500}
.opt__scale{margin-left:auto;display:flex;gap:3px}
.opt__scale i{width:6px;height:16px;border-radius:3px;background:var(--line-2)}
.opt__scale i.on{background:var(--c,var(--p2))}
.opt:has(input:checked){border-color:var(--c,var(--p2));background:color-mix(in srgb,var(--c,var(--p2)) 10%,var(--surface))}
.opt:has(input:checked) .opt__key{background:var(--c,var(--p2));border-color:transparent;color:#1A1210}
.opt:has(input:focus-visible){outline:2px solid var(--p2);outline-offset:3px}
.sx__error{min-height:1.4em;margin-top:.75rem;color:#FF8A80;font-weight:600}
.sx__nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem}
.sx__hint{margin-top:1.25rem;font-size:.85rem;color:var(--muted)}
@media (hover:none){.sx__hint{display:none}}
@media (prefers-reduced-motion:no-preference){.sx__form.is-in legend,.sx__form.is-in .sx__options{animation:qin .45s var(--ease) both}.sx__form.is-in .sx__options{animation-delay:.06s}}
@keyframes qin{from{opacity:0;transform:translateY(10px)}}
.flower--mini .petal{transition:transform .5s var(--ease),opacity .3s}

/* result */
.sx__result:focus{outline:none}
.sx__rhead{max-width:52rem}
.sx__rtitle{margin-top:.75rem;font-size:clamp(2.2rem,5vw,3.8rem)}
.sx__rnotice{margin-top:1.25rem;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--surface);border-left:4px solid var(--story);color:var(--muted);max-width:62ch}
.sx__rbody{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(2.5rem,5vw,3.5rem)}
.sx__rflower{margin:0;max-width:420px;width:100%;justify-self:center}
.sx__rflower figcaption{margin-top:1rem;text-align:center;font-size:.9rem;color:var(--muted)}
.sx__h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.meters{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.95rem}
.meter{display:grid;grid-template-columns:8.5rem 1fr 6.5rem;align-items:center;gap:1rem}
.meter__name{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem}
.meter__name::before{content:"";flex:none;width:.75rem;height:.75rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)}
.meter[data-area="story"] .meter__name::before{border-radius:50%;transform:none}
.meter__track{height:10px;border-radius:10px;background:var(--line);overflow:hidden}
.meter__fill{display:block;height:100%;width:var(--w);border-radius:10px;background:var(--c);transition:width .9s var(--ease)}
.meter__level{font-size:.9rem;color:var(--muted);text-align:right}
.meter__level b{color:var(--text);font-weight:600}
.sx__standout,.sx__recs,.sx__deeper{margin-top:clamp(3rem,6vw,4.5rem)}
.standout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.25rem;margin-top:1.5rem}
.standout article{padding:1.5rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--c)}
.standout h3{font-size:1.5rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.standout h3 span{font:600 .8rem/1 var(--sans);color:var(--c);white-space:nowrap}
.standout q{display:block;margin-top:.75rem;font:italic 400 1.15rem/1.4 var(--serif);color:var(--text)}
.standout p{margin-top:.75rem;color:var(--muted)}
.standout a{display:inline-block;margin-top:.9rem;color:var(--text)}
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.25rem;margin-top:1.5rem}
.rec{display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:start;padding:1.1rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.rec img{width:72px;border-radius:4px 8px 8px 4px;box-shadow:0 10px 20px -10px #000}
.rec__noimg{width:72px;aspect-ratio:2/3;display:grid;place-items:center;border-radius:8px;background:var(--surface)}
.rec__noimg svg{width:60%}
.rec h3{font-size:1.2rem}
.rec p{margin-top:.35rem;font-size:.92rem;color:var(--muted)}
.rec__for{font:600 .75rem/1.2 var(--sans);color:var(--c);letter-spacing:.03em}
.rec .status,.rec a{margin-top:.6rem}
.rec a{display:inline-block;font-weight:600;font-size:.92rem}
.sx__deeper{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.sx__deeper p{margin-top:.9rem;color:var(--muted);max-width:60ch}
.sx__deeper p a{color:var(--text)}
.sx__actions{display:grid;align-content:start;justify-items:start;gap:.75rem}
.sx__actions .linkbtn{color:var(--muted);font-size:.92rem}
.sx__cleared{font-size:.9rem;color:#9fe3b4;min-height:1.2em}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .top__nav{display:none}
  .top__menu{display:inline-flex;align-items:center}
  .tool-grid,.guide-list,.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  :root{--top-h:64px}
  .top{gap:.75rem}
  .top__logo{width:118px}
  .hero{grid-template-columns:1fr;padding-top:2rem}
  .hero__flower{grid-row:1;max-width:240px;justify-self:start;margin-left:-.5rem}
  .hero__petal{display:none}
  .recog__head,.section-head,.library__head,.screen-teaser__card,.why__cols,.adv,.about,.contact,.sx__intro,.sx__rbody,.sx__deeper,.rules,.adv-list{grid-template-columns:1fr}
  .recog__list summary{grid-template-columns:1fr auto;row-gap:.35rem}
  .recog__name{grid-column:1/-1}
  .recog__list details p{padding-left:.25rem}
  .screen-teaser__flower{max-width:180px;justify-self:start}
  .sx__intro-flower{max-width:180px;justify-self:start}
  .adv__flower{max-width:220px;justify-self:start;grid-row:1}
  .meter{grid-template-columns:7rem 1fr 5.6rem;gap:.75rem}
  .guide-list a{grid-template-columns:1fr}
}
@media (max-width:560px){
  .top__cta{display:none}
  .tool-grid,.guide-list,.shelf{grid-template-columns:1fr}
  .shelf .book{grid-template-columns:110px 1fr;column-gap:1.1rem;align-items:start}
  .shelf .book__cover{grid-row:1/7}
  .form{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .meter{grid-template-columns:1fr auto;row-gap:.35rem}
  .meter__track{grid-column:1/-1;grid-row:2}
  .opt__scale{display:none}
  .sx__nav .btn{flex:1}
  .foot__fine p:first-child{flex-basis:100%}
  /* tables become labelled rows on phones */
  .doc__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc__table tr{display:block;padding:.75rem 0;border-bottom:1px solid #d9cfb5}
  .doc__table td{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem;padding:.2rem 0;border:0}
  .doc__table td::before{content:attr(data-label);font-weight:600;color:var(--ink-muted)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- Print (the result page prints as a clean report) ---------- */
@media print{
  body{background:#fff;color:#111}
  .top,.sheet,.foot,.consent,.skip,.sx__actions,.sx__hint{display:none!important}
  .sx__view:not(.sx__result){display:none!important}
  .sx__rnotice,.standout article,.rec,.sx__deeper{background:#fff!important;border-color:#ccc!important;color:#111}
  .standout p,.rec p,.sx__deeper p,.meter__level{color:#333!important}
  h1 em{color:#B23A6A;background:none;-webkit-background-clip:initial;background-clip:initial}
  .meter__track{background:#e5e5e5}
}