/* =====================================================================
   DopaFix 2026 redesign layer — loaded after dopafix.css on every page.
   Rule: it only restyles. Every class, form, script and URL from dopafix.css keeps working;
   removing this file (and the <link> in Layout.php) brings the previous look back.
   Direction: Apple-like tiles, Inter only, light by default with a dark option,
   flower petals as the one motif, Calm mode for no motion. Plan: Lyllak/docs/REDESIGN-2026-11.md
   ===================================================================== */

/* ---------- Tokens ---------- */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#F5F5F7; --card:#FFFFFF; --line:#E5E5EA; --line-2:#D2D2D7;
  --text:#1D1D1F; --muted:#6E6E73; --story-light:#6A3FB8; --accent-ink:#C41F63;
  --accent:#D6246E; --accent-hover:#B81C5D; --on-accent:#FFFFFF;
  --tile:#F5F5F7; --tile-dark:#111213; --on-tile-dark:#F5F5F7; --on-tile-dark-2:#A1A1A6;
  --serif:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-sm:12px; --r:18px; --r-lg:28px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --top-h:52px; --max:1180px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --surface:#161617; --card:#1C1C1E; --line:#2C2C2E; --line-2:#3A3A3C;
  --text:#F5F5F7; --muted:#A1A1A6; --story-light:#B896E6; --accent-ink:#FF7AA8;
  --accent:#D6246E; --accent-hover:#E33A80;
  --tile:#161617; --tile-dark:#0D0D0E;
  --bloom-ink:var(--bloom);
}

/* ---------- Base type: one family, two tones instead of italics ---------- */
body{font:400 1.0625rem/1.5 var(--sans);letter-spacing:-.011em;background:var(--bg);color:var(--text)}
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.06}
.h1{font-size:clamp(2.6rem,6.4vw,5rem)}
.h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
h1 em,h2 em,.hero__title em,[data-theme="light"] h1 em,[data-theme="light"] h2 em,[data-theme="light"] .hero__title em{
  font-style:normal;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--muted);padding:0}
h1 em,h2 em,h3 em,.h1 em,.h2 em,.hero__title em,.guide__title em,.sx__cta-title em,.final__title em,.ap-hero__title em,.ap-h2 em,.ca-hero h1 em{font-style:normal!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--muted)!important;-webkit-text-fill-color:currentColor!important;padding:0!important}
.eyebrow,[data-theme="light"] .eyebrow{font:600 .95rem/1.3 var(--sans);letter-spacing:-.005em;color:var(--accent-ink)}
.link,[data-theme="light"] .link{color:var(--accent-ink);font-weight:500}
.link:hover{text-decoration:underline}
.ticks li::before{border-radius:50%;width:.6rem;height:.6rem;top:.55em;transform:none;background:var(--accent)}
.skip{background:var(--text);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:#E7338733}

/* ---------- Buttons: Apple pills, one solid accent ---------- */
.btn{min-height:44px;padding:.7rem 1.35rem;font:400 1.0625rem/1.18 var(--sans);letter-spacing:-.01em;border-width:0;transition:background-color .25s var(--ease),color .25s var(--ease),transform .2s var(--ease),box-shadow .25s}
.btn:active{transform:scale(.97)}
.btn--bloom{background:var(--accent);color:var(--on-accent)}
.btn--bloom:hover{background:var(--accent-hover);transform:none;box-shadow:none}
.btn--quiet{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}
.btn--quiet:hover{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
[data-theme="light"] .btn--quiet:hover{color:#fff}
.btn--sm{min-height:34px;padding:.45rem .95rem;font-size:.9rem}
.btn--lg{min-height:52px;padding:.85rem 1.7rem;font-size:1.0625rem}

/* ---------- Header: thin translucent bar ---------- */
.top,[data-theme="light"] .top{height:var(--top-h);gap:1.1rem;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:none;border-bottom:0}
.top.is-scrolled{border-bottom:0;box-shadow:0 1px 0 var(--line)}
.top__logo{width:104px}
.top__nav{gap:0}
.top__nav a{padding:.35rem .7rem;font-size:.8rem;font-weight:400;color:var(--text);opacity:.82;border-radius:999px}
.top__nav a:hover{opacity:1;color:var(--text)}
.top__nav a[aria-current="page"]{background:none;opacity:1;font-weight:600}
.top__cta.btn{min-height:30px;padding:.35rem .85rem;font-size:.8rem;font-weight:500;background:var(--text);color:var(--bg)}
.top__cta.btn:hover{background:var(--text);opacity:.86}
.theme-toggle,.pref-toggle{width:32px;height:32px;border:0;background:var(--surface);color:var(--text)}
.theme-toggle:hover,.pref-toggle:hover{background:var(--line)}
.top__menu{min-height:32px;padding:.25rem .8rem;border:0;background:var(--surface);font-weight:500;font-size:.85rem}
.lang__toggle{font-size:.8rem}
.sheet{background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(20px)}
.sheet nav a{font:600 1.75rem/1.15 var(--sans);letter-spacing:-.025em;border-bottom:0;padding:.55rem 0}

/* ---------- Preference switches (Calm, sound) ---------- */
.pref-toggle{flex:none;display:inline-grid;place-items:center;border-radius:50%;cursor:pointer;transition:background-color .25s,color .25s}
.pref-toggle[hidden]{display:none}
.pref-toggle[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.pref-toggle .is-on{display:none}
.pref-toggle[aria-pressed="true"] .is-on{display:block}
.pref-toggle[aria-pressed="true"] .is-off{display:none}

/* ---------- Surfaces: tone steps instead of outlines ---------- */
.card,.news__card,.screen-teaser__card,.book,.tool,.guide__box,.form,.ca-panel,.ap-feature,.help,.consent{border-color:transparent}
.news__card,.screen-teaser__card{background:var(--surface);border-radius:var(--r-lg)}

/* ---------- Footer: the name returns at full width ---------- */
.foot{background:var(--surface);border-top:0;padding-top:clamp(3.5rem,7vw,5.5rem)}
.foot__brand p{font:600 1.35rem/1.2 var(--sans);letter-spacing:-.02em;color:var(--text)}
.foot__nav a{color:var(--muted);font-size:.95rem;transition:color .2s,transform .25s var(--ease-out)}
.foot__nav a:hover{color:var(--text)}
.foot__social a{background:var(--bg);color:var(--text);transition:background-color .3s,color .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.foot__social a:nth-child(1){--c:#F5A91D}.foot__social a:nth-child(2){--c:#F3982C}.foot__social a:nth-child(3){--c:#EE6A56}
.foot__social a:nth-child(4){--c:#E94477}.foot__social a:nth-child(5){--c:#E73387}.foot__social a:nth-child(6){--c:#F08A3C}.foot__social a:nth-child(7){--c:#B896E6}
.foot__social a:hover,.foot__social a:focus-visible{background:var(--c);color:#000;transform:translateY(-3px) rotate(-6deg)}
.foot__note{border-top:0}
.foot__mark{max-width:var(--max);margin:clamp(2.5rem,5vw,4rem) auto 0;display:flex;align-items:flex-end;gap:2vw;user-select:none}
.foot__word{display:flex;margin:0;font:700 clamp(4.4rem,19vw,15.5rem)/1 var(--sans);letter-spacing:-.065em;color:var(--text);padding-bottom:.06em}
.foot__word span{display:inline-block;transition:color .35s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.foot__word span:hover{color:var(--c);transform:translateY(-.06em)}
.foot__bloom{flex:none;width:clamp(52px,11vw,140px);margin-bottom:clamp(14px,3.2vw,40px);cursor:pointer;transition:transform 1.2s var(--ease-out)}
.foot__bloom:hover{transform:rotate(120deg)}
.foot__bloom .centre{fill:var(--surface)}
.foot__secret{position:absolute;left:50%;transform:translate(-50%,8px);white-space:nowrap;font-weight:600;background:var(--bg);padding:.6rem 1rem;border-radius:999px;opacity:0;transition:opacity .4s,transform .5s var(--ease-out);pointer-events:none;margin-top:-3rem}
.foot__mark.party .foot__secret{opacity:1;transform:translate(-50%,0)}
.foot__mark.party .foot__word span{animation:df-jump .9s cubic-bezier(.34,1.56,.64,1) calc(var(--n)*70ms) 2;color:var(--c)}
.foot__mark.party .foot__bloom{transform:rotate(720deg) scale(1.1);transition:transform 1.6s var(--ease-out)}
@keyframes df-jump{40%{transform:translateY(-.22em)}}

/* ---------- Consent: a floating card ---------- */
.consent{background:var(--card);border:0;box-shadow:0 24px 60px -18px rgba(0,0,0,.35),0 0 0 1px var(--line)}

/* ---------- Music player (DopaTunes) ---------- */
.tunes{position:fixed;inset-inline-start:max(12px,var(--gut));bottom:max(12px,env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:.6rem;max-width:min(360px,calc(100vw - 24px));padding:.45rem .55rem .45rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 18px 40px -16px rgba(0,0,0,.35),0 0 0 1px var(--line);transform:translateY(140%);transition:transform .5s var(--ease-out)}
.tunes.is-on{transform:none}
.tunes__art{flex:none;width:36px;height:36px;border-radius:50%;animation:df-spin 12s linear infinite;animation-play-state:paused}
.tunes.is-playing .tunes__art{animation-play-state:running}
.tunes__txt{min-width:0;line-height:1.2}
.tunes__txt b{display:block;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tunes__txt span{display:block;font-size:.75rem;color:var(--muted)}
.tunes button{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer}
.tunes button:hover{background:var(--line)}
.tunes input[type=range]{width:64px;accent-color:var(--accent)}
@keyframes df-spin{to{transform:rotate(360deg)}}
@media (max-width:560px){.tunes input[type=range]{display:none}}

/* ---------- Motion helpers (motion.js adds .df-r / .in) ---------- */
.js .df-r{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*80ms)}
.js .df-r.in{opacity:1;transform:none}
html.theming body,html.theming body *{transition:background-color .45s ease,color .45s ease,fill .45s ease,box-shadow .45s ease!important}

/* petal cursor and page wipe */
.df-cursor{position:fixed;left:0;top:0;z-index:90;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;opacity:0;transition:opacity .3s}
.df-cursor svg{width:100%;height:100%;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.df-cursor.is-on{opacity:1}
.df-cursor.is-link svg{transform:scale(2.1)}
.df-cursor.is-press svg{transform:scale(.7)}
.df-wipe{position:fixed;inset:0;z-index:120;pointer-events:none;visibility:hidden}
.df-wipe svg{position:absolute;left:var(--x,50%);top:var(--y,50%);width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;transform:scale(0) rotate(-60deg)}
.df-wipe.is-go{visibility:visible}
.df-wipe.is-go svg{transform:scale(1) rotate(0);transition:transform .7s cubic-bezier(.7,0,.2,1)}
.df-wipe.is-back{visibility:visible}
.df-wipe.is-back svg{transform:scale(1)}
.df-wipe.is-back.is-out svg{transform:scale(0) rotate(60deg);transition:transform .7s cubic-bezier(.7,0,.2,1)}
@media (pointer:coarse){.df-cursor{display:none}}

/* ---------- Calm mode: still, softer, nothing buzzing ---------- */
:root[data-calm] *,:root[data-calm] *::before,:root[data-calm] *::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
:root[data-calm].js .df-r{opacity:1;transform:none}
:root[data-calm] .df-cursor,:root[data-calm] .df-wipe{display:none}
@media (prefers-reduced-motion:reduce){.js .df-r{opacity:1;transform:none;transition:none}.df-cursor,.df-wipe{display:none}.tunes__art{animation:none}}

/* =====================================================================
   HOME (page-home): story hero, try-reading-this, hold to start, tiles
   ===================================================================== */
.page-home main > section{padding-inline:var(--gut)}
/* story: a title, then the noise becomes the flower as you scroll */
.story{position:relative;padding:0!important}
.story.is-live{height:178vh}
.story.is-live.is-still{height:auto}
.story__pin{position:relative;min-height:calc(100svh - var(--top-h));overflow:hidden;display:flex;flex-direction:column}
.story.is-live .story__pin{position:sticky;top:var(--top-h);height:calc(100svh - var(--top-h));min-height:560px}
.story.is-live.is-still .story__pin{position:relative;top:0;height:min(900px,calc(100svh - var(--top-h)))}
.story__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:none}
.story.is-live .story__canvas{display:block}
.story__head{position:relative;z-index:2;text-align:center;max-width:1240px;margin:0 auto;padding:clamp(28px,6vh,72px) var(--gut) 0}
.story .hero__title{font-size:clamp(2.4rem,5.8vw,5rem);line-height:1.02;letter-spacing:-.045em}
.story .hero__title em{display:block;transition:opacity .4s}
.story .hero__lede{max-width:36em;margin:18px auto 0;color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.25rem)}
.story .hero__cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 20px;margin-top:24px}
.story .hero__meta{display:flex;gap:6px 14px;color:var(--muted);font-size:.95rem}
.hold-tip{font-size:.85rem;color:var(--muted);margin-top:10px;min-height:1.3em}
.hold-tip.is-nudge{color:var(--accent-ink)}
.story.is-still .hold-tip,html:not(.js) .hold-tip{display:none}
.story__thoughts{list-style:none;margin:0;padding:0;display:none}
.story.is-live:not(.is-still) .story__thoughts{display:block}
.story__thoughts li{position:absolute;left:0;top:0;z-index:1;font-size:clamp(.82rem,1.1vw,1rem);color:var(--muted);background:var(--surface);padding:7px 13px;border-radius:999px;white-space:nowrap;will-change:transform,opacity;pointer-events:none}
.story__quote{position:absolute;z-index:2;inset-inline-start:max(var(--gut),calc(50% - 540px));bottom:clamp(28px,7vh,72px);max-width:260px;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s var(--ease-out);pointer-events:none}
.story.is-formed .story__quote,.story.is-still .story__quote{opacity:1;transform:none}
.story__area{font-size:.9rem;font-weight:600;color:var(--muted)}
.story__q{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;margin-top:6px;transition:opacity .3s,transform .3s}
.story__q.is-swap{opacity:0;transform:translateY(6px)}
.story__cue{position:absolute;z-index:2;left:50%;bottom:20px;transform:translateX(-50%);font-size:.8rem;color:var(--muted);display:none}
.story.is-live:not(.is-still) .story__cue{display:block}
.story .hero__note{position:absolute;z-index:2;inset-inline-end:max(var(--gut),calc(50% - 540px));bottom:clamp(28px,7vh,72px);font-size:.85rem;color:var(--muted)}
html:not(.js) .story__quote,.story:not(.is-live) .story__quote{display:none}
.story:not(.is-live) .story__pin{min-height:0;padding-bottom:64px}
.story:not(.is-live) .hero__note{position:static;text-align:center;margin-top:16px}
@media (max-width:833px){
  .story__quote{inset-inline:var(--gut);max-width:none;text-align:center;bottom:44px}
  .story .hero__note{inset-inline:0;text-align:center;bottom:14px}
  .story__thoughts li:nth-child(n+7){display:none}
}

/* hold to start */
.hold{position:relative;overflow:hidden;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.hold__fill{position:absolute;inset:0;z-index:-1;background:#8F0F45;transform:scaleX(0);transform-origin:0 50%}
[dir="rtl"] .hold__fill{transform-origin:100% 50%}
.hold.is-holding{transform:scale(.96)}
.hold.is-done{transform:scale(1.04)}

/* try reading this */
.focus{background:var(--bg);padding-block:clamp(96px,11vw,150px)!important;text-align:center}
.focus .h2{font-size:clamp(2.2rem,4.8vw,3.6rem)}
.focus__sub{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.3rem);margin-top:8px}
.focus__stage{position:relative;max-width:var(--max);margin:44px auto 0;min-height:470px;display:grid;place-items:center}
.focus__text{position:relative;z-index:1;max-width:min(28em,calc(100% - 560px));font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.42;font-weight:500;letter-spacing:-.015em;padding:28px 32px;border-radius:28px;transition:background-color .6s,transform .8s var(--ease-out)}
.focus.is-focus .focus__text{background:var(--surface);transform:scale(1.03)}
.dz{--fx:0px;--fy:0px;--rot:0deg;position:absolute;z-index:2;display:flex;align-items:center;gap:10px;text-align:start;width:236px;padding:11px 14px;border-radius:16px;background:var(--card);box-shadow:0 14px 34px -14px rgba(0,0,0,.32),0 0 0 1px var(--line);font-size:.875rem;line-height:1.3;opacity:0;transform:translate(calc(var(--fx)*.4),calc(var(--fy)*.4)) scale(.85) rotate(var(--rot));transition:opacity .45s,transform .7s cubic-bezier(.34,1.56,.64,1)}
.dz p{margin:0}.dz b{display:block;font-size:.8125rem;font-weight:600}.dz span{color:var(--muted)}
.dz i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.875rem;color:#000;background:var(--c)}
.dz--note{width:auto;background:#FFE27A;color:#3A2F00;font-weight:700;font-size:1rem;padding:14px 18px;border-radius:4px;--rot:-5deg}
.dz--1{--c:#F5A91D;--fx:-160px;--fy:-60px}.dz--2{--c:#E94477;--fx:160px;--fy:-60px}.dz--3{--c:#B896E6;--fx:-200px}.dz--4{--fy:-140px}
.dz--5{--c:#EE6A56;--fx:200px}.dz--6{--c:#F3982C;--fx:-160px;--fy:80px}.dz--7{--c:#E73387;--fx:160px;--fy:80px}.dz--8{--c:#F08A3C;--fy:140px}
.focus.is-noisy .dz{opacity:1;transform:rotate(var(--rot));transition-delay:calc(var(--n,0)*380ms)}
.focus.is-noisy:not(.is-focus) .dz{animation:df-buzz 6s ease-in-out calc(var(--n,0)*.9s + 3.5s) infinite}
@keyframes df-buzz{0%,6%,100%{translate:0 0}1%{translate:-3px 0}2%{translate:3px 0}3%{translate:-2px 0}4%{translate:2px 0}}
.focus.is-focus .dz{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.9) rotate(var(--rot));transition:opacity .4s calc(var(--n,0)*45ms),transform .6s var(--ease-out) calc(var(--n,0)*45ms);animation:none}
html:not(.js) .dz{display:none}
.focus__ctl{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px}
.focus__after{color:var(--muted);max-width:34em;opacity:0;transform:translateY(8px);transition:opacity .6s .3s,transform .6s .3s var(--ease-out)}
.focus.is-focus .focus__after,html:not(.js) .focus__after{opacity:1;transform:none}
@media (min-width:900px){
  .dz--1{inset-inline-start:0;top:2%}.dz--3{inset-inline-start:3%;top:40%}.dz--6{inset-inline-start:0;bottom:4%}
  .dz--2{inset-inline-end:0;top:4%}.dz--5{inset-inline-end:3%;top:42%}.dz--7{inset-inline-end:0;bottom:2%}
  .dz--4{left:50%;top:-4%;margin-left:-60px}.dz--8{left:50%;bottom:-6%;margin-left:-118px}
}
@media (max-width:899px){
  .focus__stage{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:0}
  .dz{position:relative;width:calc(50% - 5px);font-size:.8125rem}
  .dz--note{width:auto}
  .focus__text{order:5;max-width:none;margin:14px 0;padding:22px 18px}
  .dz--1,.dz--2,.dz--3,.dz--4{order:1}.dz--5,.dz--6,.dz--7,.dz--8{order:9}
  .focus.is-focus .dz{display:none}
}
:root[data-calm] .dz{display:none}
:root[data-calm] .focus__after{opacity:1;transform:none}

/* tiles: the rest of the home, Apple-style */
.page-home .section-head,.page-home .recog__head,.page-home .library__head{display:block;text-align:center;max-width:760px;margin-inline:auto}
.page-home .section-head > *,.page-home .recog__head > *,.page-home .library__head > *{margin-inline:auto}
.page-home .section-head .link,.page-home .library__head .link{display:inline-block;margin-top:12px}
.page-home .news__card .news__tag{background:none;padding:0;-webkit-text-fill-color:currentColor;border:0}
.page-home .section-head p,.page-home .recog__head p,.page-home .library__head p{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.25rem)}
.page-home .recog{background:var(--surface);padding-block:clamp(88px,10vw,140px)}
.page-home .recog__list{max-width:var(--max);margin:44px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.page-home .recog__list li{border:0;border-radius:var(--r-lg);background:var(--pc,#F5A91D);color:#000;padding:0;overflow:hidden;transition:transform .45s var(--ease-out)}
.page-home .recog__list li:hover{transform:translateY(-4px)}
.page-home .recog__list li[data-area="starting"]{--pc:#F5A91D}.page-home .recog__list li[data-area="time"]{--pc:#F3982C}.page-home .recog__list li[data-area="focus"]{--pc:#EE6A56}
.page-home .recog__list li[data-area="organisation"]{--pc:#E94477}.page-home .recog__list li[data-area="finishing"]{--pc:#E73387}.page-home .recog__list li[data-area="overwhelm"]{--pc:#F08A3C}
.page-home .recog__list summary{display:block;padding:26px 26px 22px;min-height:190px;cursor:pointer;list-style:none;color:#000}
.page-home .recog__list summary::-webkit-details-marker{display:none}
.page-home .recog__name{display:block;font-weight:600;font-size:1rem;color:#000;opacity:.8}
.page-home .recog__list q{display:block;font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.15;font-weight:600;letter-spacing:-.02em;margin-top:10px;color:#000}
.page-home .recog__list details p{padding:0 26px 24px;color:#000;font-size:.98rem}
.page-home .recog__list details a{color:#000;font-weight:600}
.page-home .recog__story{max-width:760px;margin:36px auto 0;text-align:center;color:var(--muted)}
.page-home .screen-teaser{padding-block:12px}
.page-home .screen-teaser__card{max-width:none;border-radius:var(--r-lg);background:var(--tile-dark);color:var(--on-tile-dark);padding:clamp(48px,6vw,80px) clamp(24px,5vw,72px)}
.page-home .screen-teaser__card .h2{color:#fff}
.page-home .screen-teaser__card p,.page-home .screen-teaser__card .ticks li{color:var(--on-tile-dark-2)}
.page-home .screen-teaser__card h2 em{color:var(--on-tile-dark-2)!important}
.page-home .news{padding-block:clamp(88px,10vw,140px)}
.page-home .news__grid{max-width:var(--max);margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.page-home .news__card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--tile-dark);color:var(--on-tile-dark);border-radius:var(--r-lg);padding:44px 28px 0;overflow:hidden;min-height:560px}
.page-home .news__card--bloom{background:var(--surface);color:var(--text)}
.page-home .news__title{font-size:clamp(2rem,3.4vw,2.6rem);order:-1}
.page-home .news__card .news__tag{order:-2;color:#FF7AA8;font-weight:600}
.page-home .news__card--bloom .news__tag{color:var(--accent-ink)}
.page-home .news__card p{color:inherit;opacity:.8;max-width:30em;margin-top:8px}
.page-home .news__card .link{margin-top:14px;color:#FF7AA8}
.page-home .news__card--bloom .link{color:var(--accent-ink)}
.page-home .news__img{order:9;margin-top:auto;padding-top:28px;width:min(520px,100%);transition:transform 1s var(--ease-out)}
.page-home .news__card:hover .news__img{transform:translateY(-8px) scale(1.02)}
.page-home .why{padding-block:clamp(96px,12vw,170px);text-align:center}
.page-home .why__label{font:600 1rem/1.3 var(--sans);color:var(--accent-ink)}
.page-home .why__statement{max-width:30em;margin:18px auto 0;font:600 clamp(1.35rem,2.3vw,2.1rem)/1.25 var(--sans);letter-spacing:-.02em;color:var(--text)}
.page-home .why__statement em{font-style:normal;background:none;color:var(--text);-webkit-text-fill-color:currentColor}
.page-home .library{background:var(--surface);padding-block:clamp(88px,10vw,140px)}
.page-home .tools-teaser,.page-home .guides-teaser{padding-block:clamp(88px,10vw,140px)}
.page-home .app-teaser{max-width:var(--max);margin:0 auto 12px;background:var(--tile-dark);color:var(--on-tile-dark);border-radius:var(--r-lg);padding:clamp(40px,5vw,64px)}
.page-home .app-teaser .h2{color:#fff}
.page-home .app-teaser p{color:var(--on-tile-dark-2)}
.page-home .app-teaser .eyebrow{color:#FF7AA8}
.page-home .final{background:var(--tile-dark);color:var(--on-tile-dark);padding-block:clamp(96px,11vw,150px)}
.page-home .final__title{color:#fff}
.page-home .final p{color:var(--on-tile-dark-2)}
@media (max-width:833px){
  .page-home .recog__list{grid-template-columns:1fr}
  .page-home .news__grid{grid-template-columns:1fr}
  .page-home .news__card{min-height:0}
}

/* =====================================================================
   ALL PAGES: one language — no glows, no italic serif, paper is the page
   (html-prefixed so it also wins over page stylesheets loaded later, e.g. app-page.css)
   ===================================================================== */
:root[data-theme="light"]{--paper:#FFFFFF;--ink:#1D1D1F;--ink-muted:#6E6E73;--cream:#F5F5F7}
html .hero::before{display:none}
html .library{background:var(--surface)}
html .final{background:var(--tile-dark);color:var(--on-tile-dark)}
html .final .final__title,html .final h2{color:#fff}
html .final p{color:var(--on-tile-dark-2)}
html .news__card{background:var(--surface)}
html .tool__img--none{background:var(--surface)}
html .app-teaser__art{background:var(--surface)}
html .book__short,html .guide__lede,html .standout q,html .ap-pull,html .ap-quote,html .lightbox__cap,html .hero__petal,html .foot__brand p,html .why__statement em{
  font-family:var(--sans);font-style:normal;font-weight:600;letter-spacing:-.02em}
html .ap-pull{font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;color:var(--text)}
html .ap-light{background:var(--surface);color:var(--text)}
html [class*="ap-"] em{font-style:normal}
html .ap-hero__title,html .ap-h2{font-family:var(--sans);font-weight:600;letter-spacing:-.035em}
html .ap-eyebrow{letter-spacing:0;text-transform:none;font-weight:600}
html .page-guide main,html .page-doc main{background:var(--paper);color:var(--ink)}
html .guide__title,html .doc h1,html .doc h2{font-family:var(--sans);font-weight:600;letter-spacing:-.03em}
html .guide__body,html .doc{font-family:var(--sans)}
html .eyebrow{text-transform:none;letter-spacing:0}
/* cards and panels: tone steps instead of outlines */
html .tool,html .book,html .ca-panel,html .help,html .guide__box,html .ap-feature{border-color:transparent}
html .tool{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;transition:transform .45s var(--ease-out)}
html .tool:hover{transform:translateY(-4px)}
/* section rhythm: more air, Apple-like */
html main > section{padding-block:clamp(4.5rem,9vw,8rem)}
html main > section:first-child{padding-top:clamp(3rem,7vw,5.5rem)}
html .page-home main > section.story{padding-block:0}

html .guide__body h2{font-size:clamp(1.35rem,2vw,1.7rem);font-weight:600;letter-spacing:-.025em;margin-top:2.2em}

/* =====================================================================
   PAGE MOMENTS (motion.js): 3D books, tilting cards, title words, blooming flowers, guide colour sweep
   ===================================================================== */
/* books that open */
html .book__cover--3d{overflow:visible;perspective:1600px;background:transparent;box-shadow:none;transform:none}
html .book:hover .book__cover--3d{transform:none}
.book__inside{position:absolute;inset:0;display:flex;align-items:center;padding:14% 12%;border-radius:4px 10px 10px 4px;background:#FBF7EF;color:#1D1D1F;box-shadow:inset 8px 0 16px -10px rgba(0,0,0,.3),4px 0 0 #ECE5D6,8px 1px 0 #DDD4C2}
.book__inside p{font:600 clamp(1rem,1.7vw,1.4rem)/1.22 var(--sans);letter-spacing:-.02em}
.book__leaf{position:relative;z-index:1;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.05s var(--ease-out);border-radius:4px 10px 10px 4px;box-shadow:0 30px 50px -24px rgba(0,0,0,.5)}
.book__leaf img{display:block;width:100%;border-radius:4px 10px 10px 4px;backface-visibility:hidden}
.book__leaf::after{content:"";position:absolute;inset:0;border-radius:4px 10px 10px 4px;background:#141214;transform:rotateY(180deg);backface-visibility:hidden}
.book:hover .book__leaf,.book__cover--3d.is-open .book__leaf{transform:rotateY(-128deg)}
[dir="rtl"] .book__leaf{transform-origin:100% 50%}
[dir="rtl"] .book:hover .book__leaf,[dir="rtl"] .book__cover--3d.is-open .book__leaf{transform:rotateY(128deg)}
html .book__short{color:var(--text)}

/* cards lean towards the pointer */
.df-tilt{transition:transform .25s var(--ease-out),box-shadow .3s;will-change:transform}

/* title words */
.df-words .df-w{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.df-words.in .df-w{opacity:1;transform:none}

/* flowers bloom */
.df-bloom .petal{transform-box:view-box;transform-origin:0 0;scale:.25;opacity:0;transition:scale 1.1s cubic-bezier(.34,1.56,.64,1) calc(var(--n,0)*90ms),opacity .5s calc(var(--n,0)*90ms)}
.df-bloom.in .petal{scale:1;opacity:1}
.df-bloom{transition:rotate .6s var(--ease-out)}

/* guide lists: the petal colour sweeps in */
html .guide-list li{--pc:#F5A91D}
html .guide-list li[data-area="time"]{--pc:#F3982C}html .guide-list li[data-area="focus"]{--pc:#EE6A56}html .guide-list li[data-area="organisation"]{--pc:#E94477}
html .guide-list li[data-area="finishing"]{--pc:#E73387}html .guide-list li[data-area="overwhelm"]{--pc:#F08A3C}html .guide-list li[data-area="story"]{--pc:#B896E6}
html .guide-list a{position:relative;isolation:isolate;border-radius:14px;transition:color .3s}
html .guide-list a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;background:var(--pc);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out)}
[dir="rtl"] .guide-list a::before{transform-origin:100% 50%}
html .guide-list a:hover::before,html .guide-list a:focus-visible::before{transform:scaleX(1)}
html .guide-list a:hover,html .guide-list a:hover *,html .guide-list a:focus-visible,html .guide-list a:focus-visible *{color:#000}
html .guide-list b{font-family:var(--sans);font-weight:600;letter-spacing:-.025em}

:root[data-calm] .df-words .df-w,:root[data-calm] .df-bloom .petal{opacity:1;transform:none;scale:1}
@media (prefers-reduced-motion:reduce){.df-words .df-w,.df-bloom .petal{opacity:1;transform:none;scale:1;transition:none}.book__leaf{transition:none}}

/* =====================================================================
   ACCOUNT, REPORT (rp-), BLOOM 30 PROGRAMME (pg-), PRODUCT PAGES (ca-): same voice, gentle life.
   CSS only, so forms, payments and saved progress behave exactly as before.
   ===================================================================== */
html .sx__chapter-quote,html .rp-area__quote,html .ca-panel__quote{font-family:var(--sans);font-style:normal;font-weight:600;letter-spacing:-.02em}
html .rp-hero__lede,html .rp-pair__body,html .rp-area__lead,html .ca-hero__lede,html .pg-day__read,html .pg-hero__title span{font-family:var(--sans);letter-spacing:-.012em}
html .rp-help b,html .rp-pick b,html .rp-week__label b,html .pg-chip__n,html .ca-get__list b,html .ca-week__title,html .ca-week__label b,html .ca-day__t,html .ca-steps b,html .ca-table thead th,html .ca-faq summary,html .ca-buy__price b{font-family:var(--sans);font-weight:600;letter-spacing:-.025em}
html .pg-progress{background:var(--surface)}
html .rp-note textarea{background:var(--surface);border-color:var(--line-2);color:var(--text)}
html .rp-note textarea:focus-visible{outline-color:var(--accent)}
html .ca-get__list li::before{border-radius:50%;transform:none;width:.6rem;height:.6rem;top:.6em;background:var(--accent)}
html .ca-faq summary{border-radius:18px}
html .acct-notice{border-left:0;border-radius:16px;background:var(--surface)}
html .ca-table tbody tr:nth-child(odd){background:var(--surface)}
/* meters fill in, chips pop in, panels rise: on arrival, once */
@keyframes df-fill{from{transform:scaleX(0)}}
@keyframes df-pop{from{opacity:0;transform:scale(.6)}}
@keyframes df-rise{from{opacity:0;transform:translateY(18px)}}
html .meter__fill,html .acct-result .meter__fill,html .rp-meter__fill{transform-origin:0 50%;animation:df-fill 1.3s var(--ease-out) both}
[dir="rtl"] .meter__fill{transform-origin:100% 50%}
html .pg-chip{animation:df-pop .55s cubic-bezier(.34,1.56,.64,1) both}
html .pg-chip:nth-child(3n+2){animation-delay:.05s}html .pg-chip:nth-child(3n){animation-delay:.1s}
html .rp-area,html .rp-pair,html .rp-help,html .rp-pick,html .pg-day,html .pg-checkin,html .acct-row,html .ca-panel{animation:df-rise .8s var(--ease-out) both}
html .pg-chip,html .ca-chip,html .rp-tabs [role=tab]{transition:transform .25s var(--ease-out),background-color .25s,color .25s}
html .pg-chip:hover,html .ca-chip:hover,html .rp-tabs [role=tab]:hover{transform:translateY(-2px)}
:root[data-calm] .meter__fill,:root[data-calm] .pg-chip,:root[data-calm] .rp-area,:root[data-calm] .rp-pair,:root[data-calm] .pg-day,:root[data-calm] .acct-row,:root[data-calm] .ca-panel{animation:none}
@media (prefers-reduced-motion:reduce){html .meter__fill,html .pg-chip,html .rp-area,html .rp-pair,html .rp-help,html .rp-pick,html .pg-day,html .pg-checkin,html .acct-row,html .ca-panel{animation:none}}

/* CONVERSION FIXES (2026-11-12): the 14-day money-back guarantee shown beside every buy button.
   Hidden wherever the price or the buy button is hidden (not on sale). */
.dfx-guarantee{position:relative;margin:.75rem 0 0;padding-inline-start:1.35rem;font-size:.95rem;line-height:1.45;color:var(--muted)}
.dfx-guarantee::before{content:"";position:absolute;inset-inline-start:.3rem;top:.22em;width:.36rem;height:.68rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.85}
.dfx-guarantee a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.dfx-guarantee a:hover{color:var(--text)}
.dfx-guarantee--center{width:fit-content;max-width:100%;margin-inline:auto}
.page-product .dfx-guarantee{color:var(--on-tile-dark-2,#A1A1A6)}
.page-product .dfx-guarantee a:hover{color:var(--on-tile-dark,#F5F5F7)}
[data-ca-price][hidden]+.dfx-guarantee,[data-cta-price][hidden]+.dfx-guarantee,[data-pl-price][hidden]+.dfx-guarantee,.pl-actions:has(>[data-pl-cta][hidden])+.dfx-guarantee{display:none}
.sx__cta .dfx-guarantee{margin-top:.5rem}

/* =====================================================================
   MOBILE PASS (2026-11-12) — phones are the first screen most visitors see (Instagram, TikTok, search).
   Everything below is additive: delete from this banner to the end of the file to return to the previous look.
   Breakpoints follow the ones already in use: 560 (phone), 833 (phone + small tablet), 1200 (compact header).
   Capability queries (pointer / hover) are used for touch, never the screen width or the user agent.
   Source of this block: tools/dopafix-src/mobile-layer.css. Report: Lyllak/docs/MOBILE-2026-11.md
   ===================================================================== */
:root{
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --tap:44px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}

/* ---------- Platform layer: what makes a page feel like a website on a phone ---------- */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,[role=button],[role=tab]{touch-action:manipulation}
button,.btn,summary,.opt,.ca-chip,.pg-chip,.top__menu{-webkit-user-select:none;user-select:none}
.btn,.top__menu,.pref-toggle,.theme-toggle{-webkit-touch-callout:none}
/* the page runs under the notch in landscape (viewport-fit=cover): keep the bars' content inside the safe area */
.top{padding-left:max(var(--gut),var(--safe-l));padding-right:max(var(--gut),var(--safe-r))}
.foot{padding-bottom:calc(2rem + var(--safe-b))}
.consent{bottom:max(var(--gut),var(--safe-b))}
/* press feedback the moment the finger lands; hover styles that move things stay with real pointers */
.top__menu:active,.pref-toggle:active,.theme-toggle:active,.lang__toggle:active,.opt:active,.ca-chip:active{transform:scale(.97)}
.opt,.top__menu,.pref-toggle,.theme-toggle{transition:transform .12s var(--ease-out),background-color .2s,border-color .2s,color .2s}
@media (hover:none){
  html .tool:hover,.page-home .recog__list li:hover,.page-home .news__card:hover .news__img,.book:hover .book__cover,.foot__social a:hover,.btn--bloom:hover,.foot__bloom:hover,html .pg-chip:hover,html .ca-chip:hover,html .rp-tabs [role=tab]:hover{transform:none}
  .foot__social a:hover{background:var(--bg);color:var(--text)}
  .btn--quiet:hover,[data-theme="light"] .btn--quiet:hover{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}
  /* a tap opens the book (motion.js toggles .is-open); a hover left behind by that tap must not */
  .book:hover .book__leaf{transform:none}
  .book__cover--3d.is-open .book__leaf{transform:rotateY(-128deg)}
  [dir="rtl"] .book:hover .book__leaf{transform:none}
  [dir="rtl"] .book__cover--3d.is-open .book__leaf{transform:rotateY(128deg)}
  html .guide-list a:hover::before{transform:scaleX(0)}
  html .guide-list a:hover,html .guide-list a:hover *{color:inherit}
  html .guide-list a:active::before{transform:scaleX(1)}
  .hold-tip{display:none}
}

/* contrast: white on the accent is 5.0:1; the old dark ink on it was 3.9:1 (sign-in, legal pages) */
html .doc .btn--bloom{color:var(--on-accent)}

/* ---------- Touch targets: 44px for everything a thumb is meant to hit ---------- */
@media (pointer:coarse),(max-width:833px){
  .btn{min-height:48px}
  .btn--sm{min-height:var(--tap);padding:.55rem 1.1rem;font-size:.9375rem}
  .btn--lg{min-height:54px}
  .top__cta.btn{min-height:var(--tap);padding:.45rem 1.05rem;font-size:.875rem}
  .top__nav a{padding:.7rem .7rem}
  .pref-toggle,.theme-toggle{width:var(--tap);height:var(--tap)}
  .top__menu{min-height:var(--tap);min-width:var(--tap);padding:.4rem 1.05rem;font-size:1rem;font-weight:600}
  .lang__toggle{min-width:var(--tap);min-height:var(--tap);justify-content:center}
  .link:not(p .link):not(li .link){display:inline-flex;align-items:center;min-height:var(--tap)}
  .linkbtn{padding-block:.7rem}
  .foot__nav{gap:0 1.5rem}
  .foot__nav a,.foot__fine a,.foot__fine .linkbtn{display:inline-flex;align-items:center;min-height:var(--tap);padding-block:0}
  .foot__fine{gap:0 1.5rem}
  .rec a,.standout a{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:.25rem}
  .sx__keep-label{min-height:var(--tap)}
  .sx__keep-label input{width:22px;height:22px}
  .guide__toc a{display:inline-flex;align-items:center;min-height:var(--tap);padding:.35rem 1rem}
  .gcopy{min-height:var(--tap)}
  .tunes button{width:var(--tap);height:var(--tap)}
  .tunes{padding:.3rem .4rem .3rem .45rem;gap:.35rem}
  .lightbox__prev,.lightbox__next,.lightbox__close{width:2.75rem;height:2.75rem}
  .recog__list details p a,.sx__deeper p a,p .link,p a.linkbtn{padding-block:.65rem}
  .sources__list .link{display:inline-flex;align-items:center;min-height:var(--tap)}
  html .pl-link{position:relative}
  html .pl-link::before{content:"";position:absolute;inset:-.75rem 0}
  /* iOS zooms the page into any field under 16px and never zooms back */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(1rem,16px)}
}

/* ---------- Small print stays readable: nothing under 14px on a phone ---------- */
@media (max-width:833px){
  .status,.news__tag,.book__petal,.book__fmt,.guide-list__area,.tool__fmt,.tool__count,.hold-tip,.story__cue,.rec__for,.sx__keep-hint,.guide__area,.guide__toc-title,.lightbox__count,.ca-week__label small,.pl-pill,.pl-spec dt,.tunes__txt span,.tunes__txt b{font-size:.875rem}
  .dz,.dz b{font-size:.875rem}
}

/* ---------- Header on phones: logo, language, Menu. The three switches live in the menu. ---------- */
@media (max-width:833px){
  :root{--top-h:56px}
  .top,[data-theme="light"] .top{gap:.5rem}
  .top > .pref-toggle,.top > .theme-toggle{display:none}
  .top__logo{width:116px}
  .lang__now{display:none}
  .lang__toggle{padding:0}
  .lang__list{position:fixed;inset-inline:var(--gut);top:calc(var(--top-h) - .25rem);min-width:0;max-height:min(70dvh,34rem);overscroll-behavior:contain}
  .lang__list a{min-height:48px}
}
@media (max-width:359px){
  .top__logo{width:104px}
  .top__menu{padding-inline:.85rem}
}

/* ---------- Menu sheet: one thumb-length list, the main action, then the switches ---------- */
.sheet{inset:var(--top-h) 0 0;height:calc(100dvh - var(--top-h));gap:1.25rem;overscroll-behavior:contain;
  padding:1rem max(var(--gut),var(--safe-r)) calc(1.5rem + var(--safe-b)) max(var(--gut),var(--safe-l))}
.sheet nav a{display:flex;align-items:center;min-height:52px;padding:.2rem 0;font-size:clamp(1.5rem,6.8vw,1.75rem)}
.sheet nav a:active{opacity:.6}
@media (max-height:700px){.sheet{gap:1rem}.sheet nav a{min-height:46px;font-size:1.4rem}}
.sheet .btn{width:100%}
.sheet__note{text-align:center;margin-top:-.5rem}
.sheet__prefs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1rem}
.sheet .sheet__pref{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:auto;height:var(--tap);padding:0 1.05rem 0 .9rem;border-radius:999px;font:500 .9375rem/1 var(--sans);flex:1 1 auto;white-space:nowrap}
.sheet .sheet__pref[hidden]{display:none}
.sheet .sheet__pref::after{content:attr(aria-label)}
.sheet .sheet__pref[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.sheet .theme-toggle__moon,[data-theme="light"] .sheet .theme-toggle__moon{display:none}
.sheet .theme-toggle__sun,[data-theme="light"] .sheet .theme-toggle__sun{display:block}
@media (prefers-reduced-motion:no-preference){
  .sheet:not([hidden]){animation:df-sheet .28s var(--ease-out)}
  .sheet:not([hidden]) nav a{animation:df-rise .45s var(--ease-out) both;animation-delay:calc(var(--k,0)*28ms)}
  .sheet nav a:nth-child(2){--k:1}.sheet nav a:nth-child(3){--k:2}.sheet nav a:nth-child(4){--k:3}.sheet nav a:nth-child(5){--k:4}.sheet nav a:nth-child(6){--k:5}.sheet nav a:nth-child(7){--k:6}
  @keyframes df-sheet{from{opacity:0}}
}

/* ---------- Rhythm and type on phones ---------- */
@media (max-width:560px){
  :root{--gut:clamp(1rem,5.2vw,1.5rem)}
  html main > section{padding-block:var(--sp-7)}
  html main > section:first-child{padding-top:var(--sp-6)}
  .h1{font-size:clamp(2.125rem,9.4vw,2.75rem)}
  .h2{font-size:clamp(1.75rem,7.6vw,2.25rem)}
  .page-head p:last-child,.adv__lede,.about__lead{font-size:1.125rem}
  .section-head{margin-bottom:var(--sp-5)}
  .cross{padding-block:var(--sp-7)}
  .cross .btn,.lost__links .btn,.final .btn,.screen-teaser__text .btn,.app-teaser__copy .btn{width:100%}
  .lost__links{width:100%}
  .consent{left:max(.75rem,var(--safe-l));right:max(.75rem,var(--safe-r));padding:1rem 1.1rem}
  .consent__actions .btn{flex:1 1 auto}
  /* footer: links in two calm columns, the 18 languages on one swipeable line instead of five wrapped rows */
  .foot{padding-top:var(--sp-7)}
  .foot__nav{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .foot__social{justify-content:space-between;gap:.25rem}
  .foot__langs{flex-wrap:nowrap;overflow-x:auto;gap:.4rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;max-width:none}
  .foot__langs::-webkit-scrollbar{display:none}
  .foot__langs a{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1rem;border-radius:999px;background:var(--bg);scroll-snap-align:start;white-space:nowrap}
  .foot__langs a[aria-current="true"]{background:var(--text);color:var(--bg);text-decoration:none}
  .foot__note{margin-top:var(--sp-5);padding-top:0}
  .foot__mark{margin-top:var(--sp-6)}
  /* the wordmark and its secret must fit 320px in every language (German pushed the page 47px sideways) */
  .foot__word{font-size:clamp(3rem,18.5vw,6rem)}
  .foot__bloom{width:clamp(40px,11vw,60px);margin-bottom:clamp(8px,2.6vw,16px)}
  .foot__secret{white-space:normal;width:max-content;max-width:calc(100vw - 2 * var(--gut));text-align:center}
}

/* =====================================================================
   HOME on phones: the whole promise on the first screen, the flower forms by itself
   (home.js adds .is-auto under 834px: no pinned scroll, so one screen instead of two)
   ===================================================================== */
.story.is-live.is-auto{height:auto}
.story.is-live.is-auto .story__pin{position:relative;top:0;height:auto;min-height:calc(100svh - var(--top-h))}
.story.is-auto .story__pin::after{content:"";flex:1 0 clamp(330px,98vw,460px)}
.story.is-auto .story__cue{display:none}
/* layout stability: before home.js runs, the hero already has the height it will have (otherwise the next section jumps: CLS 0.31) */
@media (scripting:enabled) and (max-width:833px){
  .story:not(.is-live) .story__pin{min-height:calc(100svh - var(--top-h));padding-bottom:0}
  .story:not(.is-live) .story__pin::after{content:"";flex:1 0 clamp(330px,98vw,460px)}
  .story:not(.is-live) .hero__note{position:absolute;inset-inline:0;bottom:calc(14px + var(--safe-b));margin:0;text-align:center}
}
@media (max-width:833px){
  .story .story__head{padding-top:clamp(1.25rem,4.5svh,2.5rem)}
  .story .hero__title{font-size:clamp(2.125rem,10vw,3.25rem);line-height:1.03}
  .story .hero__lede{margin-top:.85rem;font-size:1.0625rem;line-height:1.45}
  .story .hero__cta{margin-top:1.25rem;gap:.75rem}
  .story .hero__cta .btn{width:100%}
  .story .hero__meta{font-size:.9375rem}
  .story__quote{bottom:52px}
  .story__q{font-size:1.25rem}
  .story .hero__note{bottom:calc(14px + var(--safe-b));font-size:.875rem;justify-content:center}
  .story .hero__note::before{display:none}
  /* sections: tighter, and the six patterns become a compact list instead of six half-empty tiles */
  .page-home .recog,.page-home .news,.page-home .library,.page-home .tools-teaser,.page-home .guides-teaser{padding-block:3.5rem}
  .focus{padding-block:3.5rem!important}
  .focus__stage{margin-top:1.5rem}
  .focus__text{font-size:1.1875rem;margin:.5rem 0;padding:1.1rem 1rem}
  .focus__ctl{margin-top:1.25rem}
  .dz{padding:.6rem .7rem;gap:.55rem}
  .page-home .recog__list{gap:.5rem;margin-top:1.75rem}
  .page-home .recog__list li{border-radius:20px}
  .page-home .recog__list summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.75rem;row-gap:.15rem;align-items:center;min-height:0;padding:.95rem 1.15rem}
  .page-home .recog__name{grid-column:1;font-size:.875rem}
  .page-home .recog__list q{grid-column:1;margin-top:0;font-size:1.1875rem;line-height:1.2}
  .page-home .recog__list summary::after{grid-column:2;grid-row:1 / span 2;color:#000;opacity:.7;font-size:1.75rem}
  .page-home .recog__list details p{padding:0 1.15rem 1.1rem}
  .page-home .recog__story{margin-top:1.5rem;text-align:start}
  .page-home .screen-teaser__card{padding:2.25rem 1.25rem}
  .page-home .screen-teaser__flower{max-width:96px}
  .page-home .news__grid{margin-top:1.75rem}
  .page-home .news__card{padding:2rem 1.25rem 0}
  .page-home .news__title{font-size:1.75rem}
  .page-home .why{padding-block:4rem}
  .page-home .why__statement{font-size:1.3125rem;line-height:1.3}
  .page-home .app-teaser{padding:2rem 1.25rem;margin-inline:var(--gut);gap:1.5rem}
  .page-home .app-teaser__art{max-height:300px;min-height:0}
  .page-home .final{padding-block:4.5rem}
  .page-home .shelf{margin-top:1.75rem}
}
@media (max-width:560px){
  /* three tools side by side on a swipe instead of three screens of scrolling */
  .page-home .tool-grid{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .page-home .tool-grid::-webkit-scrollbar{display:none}
  .page-home .tool-grid > *{flex:0 0 80%;scroll-snap-align:start}
}

/* =====================================================================
   SELF-SCREENING on phones (also the paid assessment, which uses the same classes)
   ===================================================================== */
@media (max-width:833px){
  .page-screening .sx,html main > section.sx:first-child{padding-top:1.25rem;padding-bottom:2.5rem}
  /* intro: title, one line of promise, the Start button; the small print follows it */
  .sx__intro{gap:.75rem}
  .sx__intro-flower{max-width:76px}
  .sx__intro-text{display:flex;flex-direction:column}
  .sx__intro-text .sx__start,.sx__intro-text .sx__nojs{order:1}
  .sx__intro-text .ticks{order:2;margin-top:1.75rem}
  .sx__title{font-size:clamp(2.125rem,9.6vw,2.9rem);margin-top:.35rem}
  .sx__lede{margin-top:.85rem;font-size:1.0625rem;line-height:1.5}
  .sx__start{margin-top:1.5rem;justify-items:stretch}
  .sx__start .btn{width:100%}
  /* CLS: Start is hidden in the HTML and shown by screening.js; with JS on, keep its space from the first paint */
  /* (the "keep my place" box is shown too whenever the browser has storage, i.e. almost always) */
  @media (scripting:enabled){.sx__start [data-action=start][hidden]{display:inline-flex;visibility:hidden}.sx__start .sx__keep[hidden]{display:grid;visibility:hidden}}
  /* question: progress, question, five answers and the buttons fit one screen; Back / Next stay under the thumb */
  .sx__progress{column-gap:.75rem}
  .sx__mini{width:40px}
  .sx__count{font-size:1rem}
  .sx__form{margin-top:1.1rem}
  .sx__form legend{gap:.35rem}
  .sx__question{margin-top:.25rem;font-size:clamp(1.3125rem,5.9vw,1.75rem);line-height:1.22;font-weight:600;letter-spacing:-.02em}
  .sx__options{gap:.5rem;margin-top:1rem}
  .opt{min-height:52px;padding:.55rem .9rem;gap:.85rem}
  .opt__label{font-size:1.0625rem}
  .sx__error{margin-top:.5rem}
  .sx__nav{position:sticky;bottom:0;z-index:5;margin:.5rem calc(var(--gut) * -1) 0;padding:.65rem var(--gut) calc(.65rem + var(--safe-b));
    background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
  .sx__nav .btn{flex:1;min-height:50px}
  .sx__nav .btn--bloom{flex:1.7}
  .sx__skip{margin-top:.25rem;text-align:start}
  .sx__q .sx__keep{margin-inline-start:0;text-align:start;justify-items:start;margin-top:.5rem}
  /* result: the sentence, the flower, the seven bars — then what stands out */
  .sx__rtitle{font-size:clamp(1.625rem,7.2vw,2.4rem);line-height:1.12;margin-top:.35rem}
  .sx__rnotice{margin-top:1rem;padding:.85rem 1rem;font-size:.9375rem}
  .sx__rbody{margin-top:1.75rem;gap:1.5rem}
  .sx__rflower{max-width:250px}
  .sx__h2{font-size:1.5rem}
  .meters{gap:.8rem}
  .sx__standout,.sx__recs,.sx__deeper,.sx__cta{margin-top:2.75rem}
  .standout{gap:.75rem;margin-top:1rem}
  .standout article{padding:1.15rem 1.15rem .75rem}
  .recs{gap:.75rem;margin-top:1rem}
  .rec{padding:.9rem}
  .sx__deeper{padding:1.25rem;gap:1.25rem}
  .sx__actions{justify-items:stretch}
  .sx__actions .btn{width:100%}
  .sx__cta{padding:1.5rem 1.25rem}
  .sx__cta-title{font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .sx__cta-list{margin-top:1.1rem;gap:.6rem}
  .sx__cta-list li{font-size:1rem}
}

/* =====================================================================
   PAID PAGES on phones: complete assessment, Bloom 30, product landings, tools
   ===================================================================== */
@media (max-width:833px){
  html .ca-buy,html .ca-buy__actions,html .pl-actions{width:100%}
  html .ca-buy{justify-items:stretch}
  html .ca-buy__actions .btn,html .pl-actions .btn{width:100%}
  html .ca-buy__actions,html .pl-actions{gap:.5rem 1.5rem}
  /* the comparison must show the column being sold: three columns that fit, not a table scrolled off the edge */
  html .ca-table table{min-width:0;table-layout:fixed}
  html .ca-table th,html .ca-table td{padding:.8rem .6rem;font-size:.9375rem;overflow-wrap:anywhere;hyphens:auto}
  html .ca-table th:first-child,html .ca-table td:first-child{padding-inline-start:.9rem}
  html .ca-table thead th{font-size:1rem}
  html .ca-week__row{grid-template-columns:minmax(5.5rem,1.3fr) repeat(7,minmax(0,1fr));gap:.2rem}
  .tool .btn{width:100%}
  html .pl-title{font-size:clamp(1.875rem,8.4vw,2.6rem)}
  html .pl-title--final{font-size:clamp(2.125rem,9.4vw,3rem)}
}
/* contrast on the light theme (all widths): petal orange as text on the pale surface was 2.1:1, the muted cells 4.25:1 */
html[data-theme="light"] .ca-panel__quote{color:var(--text)}
html[data-theme="light"] .ca-week__label small{color:var(--muted)}
html[data-theme="light"] .ca-table thead th:last-child{color:var(--accent-ink)}
html[data-theme="light"] .ca-table tbody td{color:#5C5C61}
html[data-theme="light"] .ca-table tbody td:last-child{color:var(--text)}
/* one bar with the price and the buy button, once the page's own button has scrolled away (motion.js) */
.buybar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;align-items:center;gap:.75rem;
  padding:.6rem max(var(--gut),var(--safe-r)) calc(.6rem + var(--safe-b)) max(var(--gut),var(--safe-l));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 -1px 0 var(--line);transform:translateY(110%);transition:transform .32s var(--ease-out),visibility 0s .32s;visibility:hidden}
.buybar.is-on{transform:none;visibility:visible;transition:transform .32s var(--ease-out)}
.buybar__txt{min-width:0;flex:1;display:grid;line-height:1.2}
.buybar__name{font-size:.875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__price{font:600 1.25rem/1.15 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.buybar .btn{flex:none;min-height:48px;padding-inline:1.4rem}
@media (max-width:833px){
  .buybar{display:flex}
  html.has-buybar .foot{padding-bottom:calc(2rem + 76px + var(--safe-b))}
  html.has-buybar .tunes{bottom:calc(76px + var(--safe-b))}
}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}
:root[data-calm] .buybar{transition:none}
@media print{.buybar,.sheet{display:none!important}}

/* =====================================================================
   SIGNED-IN PAGES on phones (2nd session, found with tools/mobile-qa/tpl-router.php + tpl-audit.cjs):
   checkout form, account, consent, Bloom 30 programme, written report, short result.
   account.css loads after this layer, so these rules carry an html prefix.
   ===================================================================== */
@media (max-width:833px){
  html .form__hint{font-size:.875rem}
  html .standout h3 span{font-size:.875rem}
  html .form__foot > a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  /* Bloom 30: check-in scale 1-5 at 44px, "Next day" as a real target, readable chips and legend */
  html .pg-checkin__scale label span{width:44px;height:44px}
  html .pg-checkin__scale{gap:.4rem}
  html .pg-day [data-go],html .pg-day [data-go-keep]{display:inline-flex;align-items:center;min-height:44px}
  html .pg-chip__p,html .pg-legend,html .pg-day__petal,html .pg-day__do h3,html .pg-day__small h3{font-size:.875rem}
  html .pg-checkin__scale label span{font-size:1rem}
  /* report: the picks are whole-card labels already; only the area name was under 14px */
  html .rp-pick__area{font-size:.875rem}
  /* product landings: product-page.css loads after the layer, so the 14px minimum needs the html prefix here */
  html .pl-pill,html .pl-spec dt,html .pl-specs dt{font-size:.875rem}
}