/* Flexa Next prototype. Tokens follow the Flexa brand system (tokens.json): Urbanist 400/600/800, Reflective Blue, warm ink. */
@font-face{font-family:'Urbanist';src:url('fonts/Urbanist.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Urbanist';src:url('fonts/Urbanist-Italic.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --paper:#F5F5F5; --card:#FFFFFF; --ink:#161513; --mid:#5A554E; --faint:#928D86; --line:#E1E1E0;
  --blue:#38BDF8; --blue-deep:#0384C6; --blue-wash:#F0F9FF; --green:#34D399; --green-deep:#05976A; --green-wash:#ECFDF5;
  --red:#FB7286; --red-deep:#E11D47; --red-wash:#FFF1F1; --yellow:#FACC16; --yellow-wash:#FDFCE7; --purple-wash:#F5F3FF; --purple-deep:#5B20B6;
  --shadow:0 4px 8px -2px rgba(22,21,19,.10); --shadow-lg:0 16px 32px -8px rgba(22,21,19,.14);
  --font:'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --scale:1;
}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:#E9E7E4;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}

.stage{min-height:100%;display:grid;grid-template-columns:minmax(260px,360px) auto;gap:48px;justify-content:center;align-items:center;padding:32px 24px}
.demo{display:grid;gap:14px;align-content:center;max-width:360px}
.demo-logo{width:120px}
.demo-kicker{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep)}
.demo-title{margin:0;font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-.02em}
.demo-title em{font-style:italic;color:var(--blue-deep)}
.demo-note{margin:0;color:var(--mid);font-size:15px}
.demo-group{display:grid;gap:6px}
.demo-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.demo-seg{display:flex;flex-wrap:wrap;gap:6px}
.demo-seg button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 12px;font-weight:600;font-size:14px}
.demo-seg button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.demo-ai{margin:0;font-size:13px;color:var(--faint)}

.phone{position:relative;width:390px;height:min(844px,calc(100vh - 64px));background:var(--paper);border-radius:46px;border:10px solid #161513;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}
.screen{flex:1;overflow-y:auto;padding:54px 18px 24px;display:flex;flex-direction:column;gap:16px;font-size:calc(16px * var(--scale))}
.screen > *{flex-shrink:0}
.tabs{display:flex;justify-content:space-around;background:var(--card);border-top:1px solid var(--line);padding:8px 4px 22px}
.tabs button{border:0;background:transparent;display:grid;justify-items:center;gap:2px;font-size:11.5px;font-weight:600;color:var(--faint);padding:4px 6px;border-radius:12px}
.tabs button .ti{font-size:18px;line-height:1}
.tabs button[aria-current="page"]{color:var(--ink)}
@media (max-width:860px){
  .stage{grid-template-columns:1fr;padding:0;gap:0}
  .demo{display:none}
  /* On a phone the demo panel opens full screen from Me → Demo controls */
  body.demo-open .demo{display:grid;position:fixed;inset:0;z-index:80;background:var(--bg, #f4f1ec);overflow:auto;padding:20px 20px 40px;max-width:none;align-content:start}
  body.demo-open .demo-close{display:block}
  .phone{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}
}

/* type */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:30px;line-height:1.1}
.h2{font-size:22px;line-height:1.2}
.h3{font-size:17px;line-height:1.3}
.kick{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.lead{color:var(--mid);font-size:16.5px}
.small{font-size:13.5px;color:var(--mid)}
.faint{color:var(--faint)}
em.acc{font-style:italic;color:var(--blue-deep)}
p{margin:0;text-wrap:pretty}

/* building blocks */
.card{background:var(--card);border-radius:24px;padding:16px;box-shadow:var(--shadow);display:grid;gap:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:grid;gap:10px}.hellofoot{width:100%;margin-top:auto}
.btn{border:0;border-radius:999px;padding:15px 18px;font-weight:800;font-size:16px;background:var(--ink);color:#fff;width:100%}
.btn.blue{background:var(--blue);color:#06212F}
.btn.ghost{background:transparent;color:var(--mid);font-weight:600;padding:10px}
.btn.line{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.4;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 14px;font-weight:600;font-size:15px}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}
.pill.green{background:var(--green-wash);color:var(--green-deep)}
.pill.blue{background:var(--blue-wash);color:var(--blue-deep)}
.pill.red{background:var(--red-wash);color:var(--red-deep)}
.why{background:var(--purple-wash);color:var(--purple-deep);border-radius:14px;padding:10px 12px;font-weight:600;font-size:14.5px}
.note{background:var(--yellow-wash);border-radius:14px;padding:10px 12px;font-size:13.5px;color:var(--mid)}
.yn{display:flex;gap:6px}
.yn button{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:7px 14px;font-weight:600}
.yn button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 0}
.slider{width:100%;accent-color:var(--ink);height:28px}
.bignum{font-size:56px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.scale-labels{display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.back{border:0;background:var(--line);border-radius:999px;width:38px;height:38px;font-size:18px}
.progressbar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}.progressbar i{display:block;height:100%;background:var(--blue)}
.logo{width:96px}
.hero-blob{height:150px;border-radius:28px;background:radial-gradient(120% 120% at 20% 10%,#BAE7FE 0%,#38BDF8 45%,#0384C6 100%);display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;letter-spacing:-.01em;padding:18px;text-align:center}

/* exercise */
.ex{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center}
.ex img,.ex .ph{width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--blue-wash)}
.ex b{display:block;font-size:15.5px;line-height:1.25}
.ex span{font-size:13px;color:var(--mid)}
.player-media{border-radius:24px;overflow:hidden;background:var(--blue-wash);aspect-ratio:4/3;display:grid;place-items:center}
.player-media img{width:100%;height:100%;object-fit:cover}
.ring{width:132px;height:132px;margin:0 auto;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.steps{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14.5px;color:var(--mid)}
.controls3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.controls3 button{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:10px 6px;font-weight:600;font-size:14px}

/* check-in */
.mood{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mood button{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px 10px;font-weight:800;font-size:15.5px;text-align:left}
.mood button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-wash)}
.say{display:flex;gap:8px}
.say input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:inherit;background:var(--card)}
.say button{border:0;border-radius:999px;background:var(--ink);color:#fff;padding:0 16px;font-weight:800}
.dots{display:flex;gap:6px}.dots i{width:28px;height:28px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;color:var(--mid)}
.dots i.on{background:var(--green);color:#fff}
.dots i.today{outline:2px solid var(--ink)}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px;flex:1}
.msg{max-width:84%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--card);box-shadow:var(--shadow);font-size:15px}
.msg.me{align-self:flex-end;background:var(--blue);color:#06212F;border-radius:18px 18px 6px 18px}
.receipt{align-self:center;border:1px solid var(--blue);color:var(--blue-deep);background:var(--blue-wash);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
/* A support answer (QUEUE 17b): the knowledge base's line breaks kept, and the way to a person under it */
.msg.sup .suptext{display:block;white-space:pre-line;text-wrap:pretty}
.msg.sup .supbtn{display:flex;width:max-content;max-width:100%;margin-top:10px;min-height:40px;padding:8px 16px;border:0;text-decoration:none;font-size:14px}
.msg.sup .linkbtn.supbtn{padding:0;margin-top:6px;text-align:left;text-decoration:underline}

/* care team + avatar */
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#38BDF8,#0384C6);color:#fff;display:grid;place-items:center;font-weight:800}
.spark{width:100%;height:56px}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-weight:600}
.toggle:last-child{border-bottom:0}
.toggle input{width:22px;height:22px;accent-color:var(--ink)}
select,input[type=time]{font:inherit;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--card)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ===== Playful layer, after the original UI kit (Figma: Original Template) ===== */
:root{ --warm:#F7F4F2; --orange:#FC923C; --purple:#A78BFA; --gray-face:#928D86; }
.phone{background:var(--warm)} .screen{background:var(--warm)}
.btn{box-shadow:0 6px 0 -2px rgba(22,21,19,.18)}
.card{border-radius:28px}
/* full-screen colour check-in */
.moodscreen{margin:-54px -18px -24px;min-height:calc(100% + 78px);padding:64px 22px 28px;display:flex;flex-direction:column;align-items:center;gap:18px;color:#fff;text-align:center;transition:background .35s ease}
.moodscreen h1{font-size:38px;line-height:1.08;color:#fff}
.moodscreen .face{width:190px;height:190px;margin-top:10px}
.moodscreen .feel{font-size:24px;font-weight:600}
.moodscreen .path{width:100%;max-width:330px}
.moodscreen .path button{cursor:pointer}
.moodscreen .pillbtn{margin-top:auto;width:100%;border:0;border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:18px;padding:18px;box-shadow:0 8px 0 -2px rgba(0,0,0,.15)}
.moodscreen .back{background:rgba(255,255,255,.25);color:#fff}
.moodscreen .say input{background:rgba(255,255,255,.95)}
.moodscreen .say button{background:#161513}
/* black header */
.hdr{margin:-54px -18px 0;padding:58px 20px 22px;background:#161513;color:#fff;border-radius:0 0 34px 34px;display:grid;gap:12px}
.hdr .hi{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hdr .meta{display:flex;flex-wrap:wrap;gap:8px}
.hdr .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600}
.hdr .date{font-size:13px;color:#C9C7C5;font-weight:600}
.hdr .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#FACC16,#FC923C);display:grid;place-items:center;font-weight:800;color:#161513;font-size:18px}
/* face row */
.faces{display:flex;justify-content:space-between;gap:6px}
.faces button{border:0;background:transparent;padding:0;display:grid;justify-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--mid)}
.faces svg{width:52px;height:52px;transition:transform .15s ease}
.faces button:hover svg{transform:translateY(-3px) rotate(-4deg)}
/* metric tiles */
.tiles{display:flex;gap:12px;overflow-x:auto;margin:0 -18px;padding:2px 18px 8px;scroll-snap-type:x mandatory}
.tile{flex:0 0 150px;height:170px;border-radius:28px;padding:14px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:start;box-shadow:0 10px 18px -10px rgba(22,21,19,.35)}
.tile .tl{font-size:13.5px;font-weight:800;display:flex;gap:6px;align-items:center}
.tile .tv{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}
.tile .ts{font-size:12.5px;font-weight:600;opacity:.9}
.tile.blue{background:var(--blue);color:#06212F} .tile.orange{background:var(--orange)} .tile.purple{background:var(--purple)} .tile.green{background:var(--green);color:#06301F}
.bars{display:flex;align-items:flex-end;gap:5px;height:56px}.bars i{flex:1;border-radius:6px;background:rgba(255,255,255,.45)}.bars i.on{background:#fff}
.ringmini{width:86px;height:86px;position:relative;align-self:center}.ringmini svg{width:100%;height:100%;transform:rotate(-90deg)}.ringmini b{position:absolute;inset:0;display:grid;place-items:center;font-size:26px}
/* list rows like the kit */
.lrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--card);border-radius:22px;padding:12px 14px;box-shadow:var(--shadow)}
.lrow .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.lrow b{display:block;font-size:15.5px}.lrow span{font-size:13px;color:var(--mid)}
.sec-t{font-size:15.5px;font-weight:800;margin-top:4px}
.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.tiles{scroll-padding:0 18px;scrollbar-width:none}
.screen{scrollbar-width:none}
.tiles::-webkit-scrollbar,.screen::-webkit-scrollbar{display:none}
.askcard{background:var(--yellow-wash,#FEF9C3)}
.askcard .ic{width:44px;height:44px;border-radius:50%;background:#FACC16;display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.askcard .kick{display:block}
.moodscreen{padding-top:48px;gap:12px}
.moodscreen h1{font-size:32px}
.moodscreen .face{width:150px;height:150px;margin-top:0}
.moodscreen .face svg{width:100%;height:100%}
.moodscreen .feel{font-size:22px}
.moodscreen .path{max-height:112px}
.faces button[aria-pressed="true"]{color:var(--ink);font-weight:800}
.faces button[aria-pressed="true"] svg{transform:scale(1.14);filter:drop-shadow(0 6px 8px rgba(22,21,19,.22))}
/* colour stat cards (UI kit tiles) */
.card.tint{color:#fff;border-radius:28px;box-shadow:0 12px 20px -12px rgba(22,21,19,.4)}
.card.tint.purple{background:var(--purple)} .card.tint.blue{background:var(--blue)} .card.tint.orange{background:var(--orange)}
.card.tint .small{color:rgba(255,255,255,.92)}
.card.tint .pill{background:rgba(255,255,255,.28);color:#fff}
.card.tint .spark{color:#fff}
.card.tint .dots i{background:rgba(255,255,255,.3);color:#fff}
.card.tint .dots i.on{background:#fff;color:var(--orange)}
.card.tint .dots i.today{outline-color:#fff}
/* welcome: full-colour screen with bouncing faces */
.welcome .trio{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:18px 0 6px}
.welcome .trio span{display:block;animation:bob 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .25s)}
.welcome .trio svg{display:block}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-3deg)}}
.welcome .lead-w{font-size:17px;line-height:1.45;color:#fff;max-width:300px}
.moodscreen .pillbtn.ghost{background:transparent;color:#fff;box-shadow:none;border:2px solid rgba(255,255,255,.7);margin-top:0}
@media (prefers-reduced-motion:reduce){.welcome .trio span{animation:none}}
.slider.white{accent-color:#fff;height:32px}
.moodscreen .kick{opacity:.9}
.moodscreen h1{color:inherit}
.moodscreen .back{color:inherit;background:rgba(255,255,255,.3)}

/* ===== Restyle pass 2: every screen in the kit style ===== */
.ic{border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:#fff}
.ic svg{display:block}
.moodscreen .lead-w{font-size:17px;line-height:1.45;color:inherit;max-width:310px}
.moodscreen .hint{font-size:13px;opacity:.88;max-width:310px;text-wrap:pretty}
.bigin{width:100%;border:0;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:20px;font-weight:800;text-align:center;padding:16px;letter-spacing:.03em;box-shadow:0 8px 0 -2px rgba(0,0,0,.12)}
.av-big{width:104px;height:104px;border-radius:50%;background:linear-gradient(135deg,#FACC16,#FC923C);display:grid;place-items:center;font-size:44px;font-weight:800;color:#161513}
.moodscreen .wcard{background:#fff;color:var(--ink);text-align:left;width:100%}
.moodscreen .pillbtn.dark{background:var(--ink);color:#fff}
.moodscreen .pillbtn.ghost.dark{background:transparent;color:var(--ink);border-color:rgba(22,21,19,.45)}
/* safety + yes/no */
.qcard{background:var(--card);border-radius:24px;padding:14px 16px;box-shadow:var(--shadow);display:grid;gap:10px}
.qcard b{font-size:16px;line-height:1.3}
.ynp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ynp button{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:11px;font-weight:800;font-size:15.5px}
.ynp button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ynp button.yes[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.ynp.big button{padding:15px;font-size:17px}
/* step dots + segmented progress */
.stepdots,.segs{display:flex;gap:6px;flex:1;max-width:170px}
.stepdots i,.segs i{flex:1;height:8px;border-radius:8px;background:var(--line)}
.stepdots i.on,.segs i.done{background:var(--ink)}
.segs i.now{background:var(--blue)}
.segs.light i{background:rgba(255,255,255,.35)} .segs.light i.done{background:#fff} .segs.light i.now{background:rgba(255,255,255,.75)}
/* body-area tiles */
.atiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atile{border:0;border-radius:24px;padding:12px 14px;display:flex;align-items:center;gap:10px;text-align:left;min-height:92px;box-shadow:0 10px 16px -12px rgba(22,21,19,.45);position:relative;transition:transform .15s ease}
.atile:hover{transform:translateY(-2px) rotate(-1deg)}
.atile b{display:block;font-size:17px;font-weight:800;line-height:1.15}
.atile small{display:block;font-size:12.5px;font-weight:600;opacity:.9;margin-top:2px}
.atile svg{flex:0 0 auto}
.atile[aria-pressed="true"]{outline:4px solid var(--ink);outline-offset:2px}
.atile[aria-pressed="true"]::after{content:'✓';position:absolute;top:8px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
/* moment */
.opt3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{border:0;background:var(--card);border-radius:24px;padding:14px 8px;display:grid;justify-items:center;gap:8px;box-shadow:var(--shadow);font-size:15px}
.opt b{font-weight:800}
.opt[aria-pressed="true"]{background:var(--c);color:#fff}
.opt[aria-pressed="true"] .ic{background:#fff!important;color:var(--c)!important}
.nums{display:flex;gap:14px;justify-content:space-between}
.nums button{flex:1;aspect-ratio:1;max-width:96px;border:0;border-radius:50%;background:var(--card);box-shadow:var(--shadow);display:grid;place-content:center;line-height:1.05}
.nums b{font-size:32px;font-weight:800}.nums span{font-size:13px;font-weight:600;color:var(--mid)}
.nums button[aria-pressed="true"]{background:var(--yellow)}
.nums button[aria-pressed="true"] span{color:var(--ink)}
/* plan */
.hero{border-radius:28px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 12px 20px -12px rgba(22,21,19,.4)}
.hero .h1{color:inherit;font-size:28px}
.hero .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hero .tag{background:rgba(255,255,255,.3);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600}
.exrow{grid-template-columns:64px minmax(0,1fr) auto}
.exrow img{width:64px;height:64px;border-radius:18px;object-fit:cover;background:var(--blue-wash)}
.num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
/* player */
.player-media{position:relative;border-radius:28px}
.ptag{position:absolute;left:12px;top:12px;background:rgba(22,21,19,.75);color:#fff;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600}
.heart{border:0;width:48px;height:48px;border-radius:50%;background:var(--red-wash);color:var(--red-deep);font-size:24px;flex:0 0 auto}
.heart[aria-pressed="true"]{background:var(--red);color:#fff}
.timercard{background:var(--blue);border-radius:28px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 12px 20px -12px rgba(22,21,19,.4)}
.timercard .ring{width:108px;height:108px;margin:0;flex:0 0 auto}
.timercard .ring .t{color:#fff;font-size:28px}
.voicebtn{border:0;background:#fff;border-radius:999px;padding:8px 16px 8px 8px;font-weight:800;display:flex;align-items:center;gap:8px}
.steplist{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.steplist li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;background:var(--card);border-radius:18px;padding:10px 12px;font-size:14.5px;box-shadow:var(--shadow)}
.steplist li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.steplist.move li::before{background:var(--orange)}
.controls3 button{border:0;background:var(--card);border-radius:22px;padding:12px 6px;display:grid;justify-items:center;gap:6px;font-weight:800;box-shadow:var(--shadow)}
/* settings rows + switches */
.toggle,.setrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-weight:600}
.toggle > span,.setrow > span:not(.ic){flex:1}
.toggle:last-child,.setrow:last-child{border-bottom:0}
input[type=checkbox].sw,.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .2s;flex:0 0 auto;margin:0}
input[type=checkbox].sw::after,.toggle input[type=checkbox]::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
input[type=checkbox].sw:checked,.toggle input[type=checkbox]:checked{background:var(--green)}
input[type=checkbox].sw:checked::after,.toggle input[type=checkbox]:checked::after{transform:translateX(20px)}
.setcard{gap:0;padding:6px 16px}
.setrow select,.setrow input[type=time]{border:0;background:var(--warm);border-radius:999px;padding:8px 12px;font-weight:600}
/* tab headers */
.hdr .sub{color:#C9C7C5;font-size:14.5px}
.tagbtn{border:0;color:#fff;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.tagbtn[aria-pressed="true"]{background:#fff;color:var(--ink)}
/* coach */
.msg{border-radius:22px 22px 22px 8px}
.msg.me{border-radius:22px 22px 8px 22px}
.receipt{border:0;background:var(--green-wash);color:var(--green-deep)}
.sendbar{position:sticky;bottom:0;padding:8px 0 0;background:var(--warm)}
.sendbar input{box-shadow:var(--shadow);border:0}
.sendbar button{width:48px;padding:0;background:var(--blue);color:#06212F;font-size:20px}
.chip.sug{border:0;box-shadow:var(--shadow)}
/* mindset */
.moodscreen .q{font-size:28px;line-height:1.15}
.answers{display:grid;gap:10px;width:100%}
.answers button{border:0;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);padding:15px;font-weight:800;font-size:16.5px}
.answers button[aria-pressed="true"]{background:var(--ink);color:#fff}
.chk{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto}
.wiggle{animation:wig 1.8s ease-in-out infinite;transform-origin:50% 10%}
@keyframes wig{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-6deg)}40%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.wiggle{animation:none}}
.steplist li{text-wrap:pretty}
.toggle > .ic,.setrow > .ic{flex:0 0 auto}
.btn.ghost{box-shadow:none}
.wcard span,.wcard p,.hdr .sub,.lrow span{text-wrap:pretty}

/* ===== Flexa, the companion ===== */
.fface{border-radius:50%;object-fit:cover;display:block;flex:0 0 auto;background:#E9E7E4}
.fsay{display:flex;align-items:flex-end;gap:10px}
.fsay-face{position:relative;border:0;padding:0;background:transparent;border-radius:50%;flex:0 0 auto}
.fsay-face .fface{box-shadow:0 0 0 3px var(--blue)}
.fsay-face.speaking .fface{animation:talkpulse .9s ease-in-out infinite}
@keyframes talkpulse{0%,100%{box-shadow:0 0 0 3px var(--blue)}50%{box-shadow:0 0 0 8px rgba(56,189,248,.45)}}
.online{position:absolute;right:1px;bottom:3px;width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid #161513}
.bubble{background:#fff;color:var(--ink);border-radius:20px 20px 20px 6px;padding:10px 14px;font-size:15px;font-weight:600;line-height:1.35;text-wrap:pretty}
.talk{border:0;border-radius:999px;background:var(--blue);color:#06212F;font-weight:800;font-size:15px;padding:10px 16px;display:inline-flex;align-items:center;gap:8px}
.talk.ghost{background:rgba(255,255,255,.14);color:#fff}
.talk.big{width:100%;justify-content:center;padding:14px;font-size:16.5px;background:#fff;color:var(--ink)}
.tabface{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block}
.tabs button[aria-current="page"] .tabface{box-shadow:0 0 0 2px var(--ink)}
.mrow{display:flex;align-items:flex-end;gap:8px}.mrow .msg{max-width:80%}
.xbtn{border:0;background:var(--warm);border-radius:50%;width:30px;height:30px;color:var(--mid);flex:0 0 auto}
/* welcome: meet Flexa */
.hello{position:relative;height:290px;width:100%;display:flex;justify-content:center;margin-top:2px}
.hello-fig{height:100%;filter:drop-shadow(0 14px 16px rgba(3,132,198,.45))}
.hello-bubble{position:absolute;left:2%;top:6%;background:#fff;color:var(--ink);font-weight:800;border-radius:18px 18px 4px 18px;padding:8px 13px;font-size:15px;box-shadow:var(--shadow-lg)} /* the point faces Flexa, below and to the right (JC 10/14) */
.hf{position:absolute;animation:bob 2.6s ease-in-out infinite}.hf svg{display:block}
.hf0{left:6%;top:48%}.hf1{right:6%;top:10%;animation-delay:.35s}.hf2{right:3%;top:58%;animation-delay:.7s}
/* player + wins */
.fcoach{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;color:#06212F;font-size:13.5px;font-weight:600;max-width:180px;text-wrap:pretty}
.fcoach .voicebtn{grid-column:1/-1;justify-self:start;padding:5px 12px 5px 5px;font-size:13px}
.winface{position:relative;width:140px;height:140px;flex:0 0 auto}.winface .fface{width:100%;height:100%;box-shadow:0 0 0 6px rgba(255,255,255,.55)}
/* live call */
.callscr{position:relative;margin:-54px -18px -24px;height:calc(100% + 78px);min-height:620px;overflow:hidden;background:#2b2622;color:#fff}
.cs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.88);transform:scale(1.06)}
.cs-top{position:absolute;top:0;left:0;right:0;padding:50px 16px 30px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(rgba(22,21,19,.55),transparent);z-index:3}
.cs-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(22,21,19,.62);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600}
.cs-pill i{width:9px;height:9px;border-radius:50%;background:var(--yellow);animation:blink 1s ease-in-out infinite}
.cs-pill.live i{background:var(--green);animation:none}
@keyframes blink{50%{opacity:.3}}
.cs-time{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;background:rgba(22,21,19,.62);border-radius:999px;padding:6px 10px}
.cs-time:empty{display:none}
.cs-fig{position:absolute;left:50%;bottom:0;height:64%;translate:-50% calc(var(--lvl,0) * -12px);transform-origin:50% 100%;animation:breathe 4.5s ease-in-out infinite;z-index:1;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));transition:filter .2s ease}
.cs-fig.talking{filter:drop-shadow(0 0 26px rgba(56,189,248,.75)) drop-shadow(0 18px 30px rgba(0,0,0,.35))}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.012}}
.cs-talk{position:absolute;top:98px;left:14px;right:14px;z-index:4;display:flex;flex-direction:column;gap:8px}
.cs-cap{background:rgba(255,255,255,.96);color:var(--ink);border-radius:22px 22px 22px 6px;padding:12px 16px;font-size:17px;font-weight:600;line-height:1.35;box-shadow:var(--shadow-lg);max-height:148px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;text-wrap:pretty}
.cs-you{align-self:flex-end;max-width:80%;background:var(--blue);color:#06212F;border-radius:18px 18px 6px 18px;padding:8px 12px;font-size:14.5px;font-weight:600}
.cs-cards{position:absolute;left:12px;right:12px;bottom:128px;z-index:4;display:flex;flex-direction:column;gap:8px}
.rchip{align-self:flex-start;background:#fff;color:var(--green-deep);border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px;box-shadow:var(--shadow-lg)}
.rchip.mem{color:#7A5B00;background:#FEF9C3}.rchip.urgent{background:var(--red);color:#fff}
.pcard{background:#fff;color:var(--ink);border-radius:22px;padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;box-shadow:var(--shadow-lg)}
.pcard .thumbs{display:flex}.pcard .thumbs img{width:40px;height:40px;border-radius:12px;object-fit:cover;border:2px solid #fff;margin-left:-14px}.pcard .thumbs img:first-child{margin-left:0}
.pcard b{display:block;font-size:14.5px}.pcard span{font-size:12.5px;color:var(--mid)}
.xcard{background:#fff;color:var(--ink);border-radius:22px;padding:12px 14px;display:grid;gap:4px;box-shadow:var(--shadow-lg)}.xcard p{font-size:14px;color:var(--mid)}
.cs-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:14px 16px 26px;background:linear-gradient(transparent,rgba(22,21,19,.78) 45%);display:grid;gap:12px}
.cs-ctl{display:flex;justify-content:center;align-items:center;gap:30px}
.cbtn{width:58px;height:58px;border-radius:50%;border:0;background:rgba(255,255,255,.24);color:#fff;display:grid;place-items:center;backdrop-filter:blur(8px)}
.cbtn.off{background:#fff;color:var(--ink)}
.cbtn.end{background:#E11D47;width:68px;height:68px}
.cs-type input{border:0}
@media (prefers-reduced-motion:reduce){.cs-fig,.hf{animation:none}}
.hello{height:236px}
/* call layout v2: cards up top, captions at the bottom, face clear */
.cs-fig{height:74%}
.cs-cards{top:92px;bottom:auto}
.cs-talk{position:static;display:flex;flex-direction:column;gap:8px}
.cs-cap{max-height:118px;font-size:16.5px}
.rchip{padding:6px 12px;font-size:13.5px}
.pcard{padding:8px 10px}.pcard .thumbs img{width:34px;height:34px}
.cs-bottom{padding-top:40px;background:linear-gradient(transparent,rgba(22,21,19,.82) 38%)}
.cs-cap{-webkit-mask-image:linear-gradient(transparent 0,#000 22px);mask-image:linear-gradient(transparent 0,#000 22px)}

/* ===== Design pass from the gpt-6-astra review: ink on colour, flatter, steadier rhythm ===== */
.screen{padding:54px 20px 24px}
.moodscreen{margin:-54px -20px -24px;color:var(--ink)}
.hdr{margin:-54px -20px 0}
.callscr{margin:-54px -20px -24px}
.moodscreen .back{background:rgba(255,255,255,.55);color:var(--ink)}
.moodscreen .pillbtn.ghost{color:var(--ink);border-color:rgba(22,21,19,.5)}
.moodscreen .lead-w,.welcome .lead-w{color:var(--ink)}
.moodscreen .kick{color:var(--ink)!important;opacity:.8}
.moodscreen .hint{color:var(--ink)}
/* flat colour blocks; hairline instead of shadow on white */
.card,.lrow,.qcard,.opt,.nums button,.steplist li,.controls3 button{box-shadow:0 0 0 1.5px #ECE7E1}
.card.tint,.hero,.timercard,.atile,.tile,.moodscreen .wcard{box-shadow:none}
.card.tint{color:var(--ink)}
.card.tint .small{color:rgba(22,21,19,.78)}
.card.tint .pill{background:rgba(255,255,255,.65);color:var(--ink)}
.card.tint .spark{color:var(--ink)}
.atile[aria-pressed="true"]{outline:3px solid var(--ink)}
.atile[aria-pressed="true"]::after{background:var(--ink)}
.hero .tag{background:rgba(255,255,255,.6)}
/* player: compact coach strip, timer on demand */
.timercard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;color:var(--ink);padding:14px 16px}
.timercard .ring{width:88px;height:88px}
.timercard .ring .t{color:var(--ink);font-size:22px}
.timercard .fcoach{color:var(--ink);max-width:none}
.tbtn{grid-column:1/-1;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;font-size:16px;min-height:52px}
.tbtn:disabled{opacity:.6}
/* choices: one selected treatment everywhere */
.opt[aria-pressed="true"]{color:var(--ink);box-shadow:0 0 0 3px var(--ink)}
.nums button{border-radius:24px;aspect-ratio:auto;min-height:72px;max-width:none}
.nums button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.ynp button.yes[aria-pressed="true"]{color:var(--ink)}
/* Flexa voice in the UI */
.who{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--mid);margin-bottom:2px}
.fline{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:22px;padding:12px 14px;box-shadow:0 0 0 1.5px #ECE7E1;font-size:15px;line-height:1.4}
.fline > div{display:grid;text-wrap:pretty}
.talkrow{justify-content:flex-start;gap:8px;flex-wrap:wrap}
.talk{min-height:48px}
.lrow.ci,.lrow.care{grid-template-columns:44px minmax(0,1fr) auto}
.lrow.ci svg{width:44px;height:44px}
.rowbtn{width:100%;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--card)}
.rowbtn > span:nth-child(2){display:grid}
.rowbtn b{font-size:15.5px}
.stickyfoot{position:sticky;bottom:-24px;margin:0 -20px -24px;padding:16px 20px 24px;background:linear-gradient(rgba(247,244,242,0),var(--warm) 35%)}
.fieldlabel{align-self:flex-start;font-size:15px;font-weight:600;color:var(--ink)}
.bigtext{width:100%;border:0;border-radius:22px;background:#fff;color:var(--ink);font:inherit;font-size:16px;padding:14px 16px;resize:none;margin-top:6px}
.stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;align-items:center}
.sbtn{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.65);color:var(--ink);font-size:24px;font-weight:800;line-height:1}
.slider.ink{accent-color:var(--ink)}
/* tabs: readable, selected pill */
.tabs button{color:var(--ink);opacity:.62}
.tabs button[aria-current="page"]{opacity:1}
.tabs button[aria-current="page"] .ti{background:var(--blue-wash);border-radius:999px;padding:3px 14px}
/* live call: explicit states, one change card */
.cs-pill{background:#fff;color:var(--ink)}
.cs-pill[data-s^="listen"] i{background:var(--blue);animation:none}
.cs-pill[data-s^="think"] i{background:var(--yellow);animation:blink 1s ease-in-out infinite}
.cs-pill[data-s^="speak"] i{background:var(--green);animation:none}
.cs-pill[data-s^="mic"] i{background:var(--faint);animation:none}
.cs-who{align-self:flex-start;background:rgba(22,21,19,.62);color:#fff;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;margin-bottom:-2px}
.pcard{grid-template-columns:auto minmax(0,1fr)}
.pcard .ptitle{grid-column:1/-1;font-weight:800;color:var(--green-deep);font-size:14px}
.pcard .pacts{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}
.pcard .pacts .pill{min-height:40px;padding:8px 16px;font-size:14px;background:var(--warm);color:var(--ink)}
.pcard .pacts .pill.blue{background:var(--blue)}
.rchip .mini{border:0;background:rgba(22,21,19,.08);border-radius:999px;padding:3px 10px;margin-left:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink)}
/* Flexa arrives once, then stays still */
.arrive{animation:arrive .32s ease-out both}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* prototype notes switch (demo panel) */
body:not(.notes) .pnote{display:none}
/* the buyer demo code's honest lines (QUEUE 34a): shown whatever the notes switch says, unlike the yellow prototype notes */
.demonote{margin:0;border-radius:12px;padding:8px 12px;background:var(--blue-wash);color:var(--blue-deep);font-size:13.5px;font-weight:600;text-wrap:pretty}
.moodscreen .demonote{background:rgba(255,255,255,.2);color:inherit;opacity:1;max-width:340px}
/* release mode (QUEUE 18a): the member build has no demo panel, no button to open it, and the phone fills the stage */
body.release .demo,body.release .demo-fab,body.release .demo-phone-only{display:none!important}
body.release .stage{grid-template-columns:auto}
/* consent (QUEUE 14a): ticks for what is agreed, a switch for service email (on, easy off), its own tick for marketing */
.consentform{gap:2px}
.consentform .setrow{align-items:center}
.consentform .setrow > span{font-weight:400;text-wrap:pretty}
.consentform .setrow b{font-weight:600}
.consentform a{color:var(--blue-deep);font-weight:600}
.consentform .setrow.agreerow{border-bottom:0;padding-bottom:2px}
.consentlinks{margin:0;padding:0 0 10px 39px;border-bottom:1px solid var(--line)}
.consent input[type=checkbox].sw{width:50px;height:30px;margin-top:0}
.consentform input:disabled{opacity:.55}
.consentform input[type=checkbox]:not(.sw){accent-color:var(--blue-deep)}
/* the button stays in reach while the member reads and ticks (the form is taller than a phone screen) */
.consentgo{position:sticky;bottom:-24px;z-index:1;margin:0 -20px;padding:14px 20px 24px;background:linear-gradient(rgba(247,244,242,0),var(--warm) 30%)}
body.desk .consentgo{bottom:-48px;padding-bottom:48px}
.moodscreen .lead-w,.moodscreen .hint,.moodscreen h1{text-wrap:balance}
.chat{flex:0 0 auto}.sendbar{margin-top:auto}
.rowbtn > span:nth-child(2){color:var(--ink);font-size:15.5px}.rowbtn > span:nth-child(2) > span{font-size:13.5px;color:var(--mid)}

/* JC 2026-10-09: white text on the brand colours (original kit look). Dark text only on yellow. Less black. */
.moodscreen{color:#fff}
.moodscreen .back{background:rgba(255,255,255,.28);color:#fff}
.moodscreen .pillbtn.ghost{color:#fff;border-color:rgba(255,255,255,.75)}
.moodscreen .lead-w,.welcome .lead-w,.moodscreen .hint,.moodscreen .fieldlabel{color:inherit}
.moodscreen .kick{color:inherit!important;opacity:.9}
/* Yellow screens (remind, lesson): dark text only on yellow, so the white-by-default back arrow and outline button turn dark there. */
.moodscreen.onyellow .back,.moodscreen.onyellow .pillbtn.ghost{color:var(--ink)}.moodscreen.onyellow .pillbtn.ghost{border-color:rgba(22,21,19,.5)}
.card.tint{color:#fff}
.card.tint .small{color:rgba(255,255,255,.92)}
.card.tint .pill{background:rgba(255,255,255,.28);color:#fff}
.card.tint .spark{color:#fff}
.hero .tag{background:rgba(255,255,255,.28)}
.timercard{color:#fff}
.timercard .ring .t,.timercard .fcoach{color:#fff}
.tbtn{background:#fff;color:var(--ink)}
.opt[aria-pressed="true"]{color:#fff;box-shadow:none}
.opt[aria-pressed="true"] .ic{color:var(--c)!important}
.nums button[aria-pressed="true"]{box-shadow:none}
.atile[aria-pressed="true"]{outline:4px solid #fff;box-shadow:0 0 0 7px var(--ink)}
.sbtn{background:rgba(255,255,255,.28);color:#fff}
.ynp button.yes[aria-pressed="true"]{color:#fff}
.atile[aria-pressed="true"]{outline:4px solid var(--ink);outline-offset:2px;box-shadow:none}
/* JC 10/09: her profile picture on the welcome screen, not the full-body shot */
.hello{height:250px;align-items:center}
.hello-face{width:208px;height:208px;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 16px 28px -12px rgba(3,80,130,.55)}
.hello-bubble{left:0;top:2%}
.hf0{left:2%;top:58%}.hf1{right:2%;top:4%}.hf2{right:0;top:62%}
/* test report panel (only with ?test) */
.testpanel{position:fixed;left:12px;top:12px;z-index:99;max-width:420px;max-height:90vh;overflow:auto;background:#fff;color:#161513;border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:12.5px;display:grid;gap:8px}
.testpanel .tf{border-top:1px solid #eee;padding-top:6px}
/* no lone last words anywhere (JC hard rule): pretty for prose, balance for short labels */
body{text-wrap:pretty}
h1,h2,h3,b,strong,.atile b,.qcard b,.lrow b,.setrow > span,.fieldlabel{text-wrap:balance}
/* 40px minimum tap targets */
button.pill,.tagbtn{min-height:40px;padding-left:14px;padding-right:14px}
.xbtn{width:40px;height:40px}
.steplist li,.lrow span,.small,.why,.bubble,.msg{text-wrap:balance}

/* ===== Motion: entrances, presses, typing, celebrations (all off under reduced motion) ===== */
.screen.enter > *,.screen.enter .moodscreen > *{animation:enterUp .38s cubic-bezier(.2,.8,.2,1) both}
.screen.enter > *:nth-child(2),.screen.enter .moodscreen > *:nth-child(2){animation-delay:.04s}
.screen.enter > *:nth-child(3),.screen.enter .moodscreen > *:nth-child(3){animation-delay:.08s}
.screen.enter > *:nth-child(4),.screen.enter .moodscreen > *:nth-child(4){animation-delay:.12s}
.screen.enter > *:nth-child(5),.screen.enter .moodscreen > *:nth-child(5){animation-delay:.16s}
.screen.enter > *:nth-child(6),.screen.enter .moodscreen > *:nth-child(6){animation-delay:.2s}
.screen.enter > *:nth-child(n+7),.screen.enter .moodscreen > *:nth-child(n+7){animation-delay:.24s}
.screen.enter > .callscr{animation:none}
@keyframes enterUp{0%{opacity:0;transform:translateY(16px)}70%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:none}} /* a little more bounce (JC 10/13) */
button{transition:transform .22s cubic-bezier(.3,1.7,.5,1),box-shadow .12s ease,background-color .2s ease} /* springs back with a little bounce (JC 10/13) */
button:active:not(:disabled){transform:scale(.96)}
.btn:active:not(:disabled),.pillbtn:active:not(:disabled),.tbtn:active:not(:disabled){transform:translateY(2px) scale(.985)}
.chip[aria-pressed="true"],.opt[aria-pressed="true"],.nums button[aria-pressed="true"],.ynp button[aria-pressed="true"],.answers button[aria-pressed="true"],.atile[aria-pressed="true"]{animation:pick .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes pick{0%{transform:scale(.9)}100%{transform:scale(1)}}
.faces button:active svg{transform:scale(1.2) rotate(-6deg)}
/* Flexa typing her line: invisible remainder keeps the layout still; she nods while she talks */
.tw-rest{visibility:hidden}
.typing .fface{animation:nod .7s ease-in-out infinite}
@keyframes nod{0%,100%{transform:none}50%{transform:translateY(-2px) rotate(-3deg)}}
.fsay-face{animation:breatheFace 5s ease-in-out infinite}
@keyframes breatheFace{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
/* countdown before the timer */
.countdown{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(56,189,248,.92);pointer-events:none}
.countdown .cd{font-size:120px;font-weight:800;color:#fff;animation:cdpop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cdpop{0%{transform:scale(.4);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:1}}
.tbtn.ready{background:var(--green);color:#fff;animation:readyPulse 1.4s ease-in-out infinite}
@keyframes readyPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.timercard.donecard{background:var(--green);transition:background-color .4s ease}
/* confetti */
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
@keyframes toastIn{from{transform:translateY(-30px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(-30px);opacity:0}}
/* Today's moves wiggle in a little when the plan changes */
.why{animation:whyIn .5s ease both}
@keyframes whyIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fsay-face,.typing .fface,.tbtn.ready{animation:none}}
.voicebtn{color:var(--ink)}
/* hands-free coaching strip in the player */
.vstart{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;border:0;border-radius:24px;background:var(--ink);color:#fff;padding:12px 16px;text-align:left;font:inherit}
.vstart > span{display:grid}.vstart b{font-size:16px}.vstart > span > span{font-size:13px;color:#C9C7C5}
.vstrip{background:var(--ink);color:#fff;border-radius:24px;padding:12px 14px;display:grid;gap:10px}
.vtop{display:flex;align-items:center;gap:10px}.vtop .cs-pill{flex:1;justify-self:start;max-width:max-content}.vtop .pill{margin-left:auto;background:rgba(255,255,255,.14);color:#fff}
.vstrip #cfig{border-radius:50%;transition:box-shadow .15s ease}
.vstrip #cfig.talking{box-shadow:0 0 0 4px rgba(56,189,248,.7)}
.vcap{font-size:16px;font-weight:600;line-height:1.4;min-height:22px;text-wrap:pretty}
.vstrip .say input{border:0}
.safetybar{background:var(--red-wash);border-radius:24px;padding:14px 16px;display:grid;gap:8px;box-shadow:0 0 0 2px var(--red)}
.moodscreen .vstrip{width:100%;text-align:left}
/* reminder notification (lock-screen style) */
.notif{position:absolute;left:10px;right:10px;top:10px;z-index:45;border:0;text-align:left;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:22px;background:rgba(250,250,250,.94);backdrop-filter:blur(14px);box-shadow:0 14px 34px -10px rgba(0,0,0,.4);font:inherit;color:var(--ink);animation:notifIn .5s cubic-bezier(.2,1.3,.4,1) both;cursor:pointer}
.notif img{border-radius:9px;flex:0 0 auto}
.notif .nbody{display:grid;gap:2px;min-width:0}
.notif .nhead{display:flex;justify-content:space-between;font-size:13px}.notif .nhead span{color:var(--faint)}
.notif .ntext{font-size:14.5px;line-height:1.35;text-wrap:pretty}
.notif.out{animation:notifOut .45s ease-in both}
@keyframes notifIn{from{transform:translateY(-120%)}to{transform:none}}
@keyframes notifOut{to{transform:translateY(-120%);opacity:0}}
.fromrem{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.25);border-radius:999px;padding:4px 12px 4px 4px;font-size:13.5px;font-weight:600}
/* goal picker */
.goals{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.goaltile{border:0;border-radius:22px;background:#fff;color:var(--ink);padding:12px;display:flex;align-items:center;gap:10px;text-align:left;font:inherit;min-height:68px}
.goaltile b{font-size:14.5px;line-height:1.25;text-wrap:balance}
.goaltile[aria-pressed="true"]{background:var(--ink);color:#fff;animation:pick .34s cubic-bezier(.2,1.6,.4,1)}
.goaltile[aria-pressed="true"] .ic{background:#fff!important;color:var(--c)!important}
.goalchip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(255,255,255,.1);border-radius:999px;padding:4px 14px 4px 4px;font-size:13.5px;font-weight:600;color:#fff}
.goalrow{grid-template-columns:44px minmax(0,1fr) auto}
/* survey result */
.scorebig{display:flex;align-items:flex-start;gap:14px;margin:6px 0} /* 14px: the number's negative letter-spacing lets its last digit run past its box */
.scorebig b{font-size:96px;line-height:1;font-weight:800;letter-spacing:-.04em}
.scorebig .delta{font-size:24px;font-weight:800;background:rgba(255,255,255,.28);border-radius:999px;padding:4px 12px;margin-top:10px}
.scorebig .delta.good{background:#fff;color:var(--green-deep)}
.fline.wide{width:100%;text-align:left;color:var(--ink)}
.goaltile b{text-wrap:pretty}
.scale{width:100%;display:grid;gap:6px}
.scale .track{position:relative;height:14px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.75))}
.scale .track.down{background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.25))}
.scale i{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%)}
.scale i.now{background:#fff;box-shadow:0 0 0 5px rgba(22,21,19,.18);animation:pick .5s cubic-bezier(.2,1.6,.4,1) both}
.scale i.start{width:14px;height:14px;background:transparent;box-shadow:0 0 0 3px #fff}
.scale-ends{display:flex;justify-content:space-between;font-size:13px;font-weight:600}
/* movement check */
.mvfig{height:150px;width:auto;filter:drop-shadow(0 10px 14px rgba(3,80,130,.4))}
.mvtips{gap:10px}.mvtips .tip{display:flex;align-items:center;gap:12px;font-size:15px;text-wrap:pretty}
.camscr{position:relative;margin:-54px -20px -24px;height:calc(100% + 78px);min-height:620px;overflow:hidden;background:#161513;color:#fff}
.camscr video,.camscr canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camscr.mirror video,.camscr.mirror canvas{transform:scaleX(-1)}
.cam-top{position:absolute;top:0;left:0;right:0;padding:50px 16px 24px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:linear-gradient(rgba(22,21,19,.6),transparent);z-index:3}
.cam-top .back{background:rgba(255,255,255,.25);color:#fff}
.cam-count{position:absolute;right:16px;top:110px;z-index:3;display:grid;justify-items:center;background:var(--green);color:#fff;border-radius:28px;padding:10px 18px;box-shadow:0 12px 24px -10px rgba(0,0,0,.5)}
.cam-count b{font-size:56px;line-height:1;font-weight:800}
.cam-count b.bump{animation:bump .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes bump{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.cam-count span{font-size:13px;font-weight:600}
.cam-depth{position:absolute;left:16px;top:120px;bottom:150px;width:12px;border-radius:999px;background:rgba(255,255,255,.25);z-index:3;display:flex;align-items:flex-end;overflow:hidden}
.cam-depth i{display:block;width:100%;height:0;background:var(--blue);border-radius:999px;transition:height .1s linear}
.cam-cap{position:absolute;left:14px;right:14px;bottom:26px;z-index:3;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);color:var(--ink);border-radius:22px;padding:10px 14px;font-weight:600;font-size:15.5px;text-wrap:pretty}
.cam-cap > span{flex:1}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.goaltile b{text-wrap:balance}
/* week 6 / 12 check-in and results */
.checkcard{background:var(--purple);color:#fff;border-radius:28px;padding:16px;display:grid;gap:10px}
.checkcard .kick{color:#fff;opacity:.9}.checkcard b{font-size:19px}.checkcard > span{font-size:14.5px;text-wrap:pretty}
.checkcard .pillbtn{margin:0;width:100%;background:#fff;color:var(--ink);border:0;border-radius:999px;font-weight:800;font-size:16px;padding:14px}
.rcard{background:var(--c);color:#fff;border-radius:26px;padding:14px 16px;display:grid;gap:6px}
.rcard .kick{color:#fff;opacity:.9}.rcard .small{color:rgba(255,255,255,.92)}
.rnums{display:flex;align-items:baseline;gap:10px}.rnums .was{font-size:26px;font-weight:600;opacity:.75}.rnums .arrow{font-size:22px;opacity:.75}.rnums b{font-size:44px;font-weight:800;line-height:1}
.rnums .delta{margin-left:auto;align-self:center;font-weight:800;background:rgba(255,255,255,.28);border-radius:999px;padding:4px 12px}
.rnums .delta.good{background:#fff;color:var(--green-deep)}
.pgicline{font-size:22px}
.answerbig{font-size:34px;font-weight:800;line-height:1.15;text-wrap:balance;margin:10px 0}
.checkcard .kick,.rcard .kick{display:block}
.scale i{transform:none;translate:-50% -50%}
/* Care Team hand-off */
.hmsg{box-shadow:0 0 0 1.5px #ECE7E1;line-height:1.45}
.sentcheck{width:110px;height:110px;border-radius:50%;background:#fff;color:var(--green-deep);display:grid;place-items:center;font-size:56px;font-weight:800;margin-top:40px}
/* paywall */
.perks{gap:10px}.perks .tip{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.plan{position:relative;border:0;border-radius:22px;background:rgba(255,255,255,.25);color:#fff;padding:16px 12px 12px;display:grid;gap:2px;justify-items:start;text-align:left;font:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.plan b{font-size:15px}.plan .price{font-size:26px;font-weight:800}.plan .price small{font-size:13px;font-weight:600}.plan > small{font-size:12px;font-weight:600;opacity:.9}
.plan[aria-checked="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.plan .best{position:absolute;top:-10px;right:10px;background:var(--yellow);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}
.linkbtn{border:0;background:transparent;color:inherit;text-decoration:underline;font:inherit;font-size:14px;font-weight:600;min-height:40px}
/* Flexa notices */
.notice{background:#fff;border-radius:26px;padding:14px 16px;display:grid;gap:10px;box-shadow:0 0 0 2px var(--c);animation:whyIn .5s ease both}
.notice .kick{display:block;color:var(--c)}.notice b{font-size:17px}.notice > span{font-size:15px;text-wrap:pretty}
.notice .row .xbtn{margin-left:auto}

/* Progress: trend axis (B13) */
.spark-x{display:flex;justify-content:space-between;font-size:12px;font-weight:600;opacity:.85;margin-top:4px}
.sec-t .count{font-weight:400;color:var(--mid);font-size:14px;margin-left:6px}

/* Me: sub-lines read as a block; saved confirmation (B14) */
.lrow > div > b + span,.lrow > span > b + span{display:block;line-height:1.4;margin-top:2px}
.savedpill{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:96px;z-index:42;background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;white-space:nowrap;animation:toastIn .4s cubic-bezier(.2,1.5,.4,1) both}
.replypill{border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:700;background:var(--orange);padding:12px 20px;box-shadow:0 6px 18px rgba(0,0,0,.18)} /* a person replied: orange (people) */

/* Your week with Flexa: story panels */
.story .segs{display:flex;gap:5px;width:100%;max-width:none;flex:0 0 auto;margin-top:-22px}
.story .segs i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.story .segs i.on{background:#fff}
.storyimg img{width:200px;height:200px;object-fit:cover;border-radius:32px;border:4px solid #fff;display:block}
.storybtns{margin-top:auto;width:100%;display:grid;gap:10px}
.storybody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%}
.story .scorebig b{font-size:132px;line-height:1}
.story h1{max-width:300px}

/* In-place redraws (a tap on the same screen): no entrance replays; only the tapped control pops. */
.screen.still .pop,.screen.still .arrive,.screen.still .why,.screen.still .notice,.screen.still [aria-pressed="true"],.screen.still [aria-checked="true"],.screen.still .goaltile[aria-pressed="true"],.screen.still .scale i.now{animation:none}
.screen.still .justpicked{animation:pick .34s cubic-bezier(.2,1.6,.4,1)}

/* Onboarding: skip link on colour screens */
.linkbtn.skip{color:inherit;font-weight:600;min-height:40px;padding:0 4px}

/* Player: demo video replaces the still once it has loaded */
.player-media .exvid{display:none;width:100%;height:100%;object-fit:cover}
.player-media .exvid.ok{display:block}
.player-media .exvid.ok ~ img{display:none}

/* Graded movement check: steps, test label, results list */
.mvsteps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mvstep{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);border-radius:999px;padding:6px 12px 6px 6px;font-weight:600;font-size:14px}
.mvstep b{width:22px;height:22px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-size:12px}
.cam-test{position:absolute;top:104px;z-index:3;left:50%;transform:translateX(-50%);background:rgba(22,21,19,.55);color:#fff;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.mvres{display:grid;gap:10px;text-align:left}
.mvrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center}
.mvrow b{display:block;font-size:15px}.mvrow span{font-size:13px;color:var(--mid)}
.mvrow .band{display:flex;align-items:center;gap:8px}.mvrow .band .lvl{flex:none}
/* The seated arm raise: the picture scale in place of a number (no degrees to members) */
.scorebig.band{flex-direction:column;align-items:center;gap:12px;margin:10px 0 12px}
.scorebig.band b{font-size:36px;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.scorebig.band .lvl{gap:6px}.scorebig.band .lvl i{width:16px;border-radius:5px;background:rgba(255,255,255,.3)}.scorebig.band .lvl i.on{background:#fff}
.scorebig.band .lvl i:nth-child(1){height:16px}.scorebig.band .lvl i:nth-child(2){height:24px}.scorebig.band .lvl i:nth-child(3){height:32px}.scorebig.band .lvl i:nth-child(4){height:40px}
.mvrow .mvn{position:static;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.mvrow.miss .mvn{background:var(--line);color:var(--mid)}
.mvrow .chk{width:28px;height:28px;font-size:15px;color:#fff!important}

/* Week-one forms: about you, work and pain */
.formcard{display:grid;gap:8px;text-align:left}
.formcard > b{margin-top:6px}
.formcard .setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 0}
.stepper.mini{display:flex;align-items:center;gap:10px}
.stepper.mini b{min-width:28px;text-align:center;font-size:18px}
.wslide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:14px}
.wslide input{grid-column:1 / -1;width:100%}
.wslide .wv{font-weight:800;font-size:18px}
.formcard .sbtn{background:var(--line);color:var(--ink);width:40px;height:40px;border-radius:50%;border:0;font-size:20px;font-weight:800}

/* Milestone check-in steps; 0-10 answer grid */
.csteps{display:flex;flex-wrap:wrap;gap:6px}
.cstep{font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.25)}
.cstep.done{background:rgba(255,255,255,.55)}
.cstep.now{background:#fff;color:var(--ink)}
.answers.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.answers.grid button{padding:0;min-height:48px;font-size:18px}

/* Flare-up mode */
.flarecard{background:var(--orange);color:#fff;border-radius:24px;padding:14px 16px;display:grid;gap:8px;margin:4px 0}
.flarecard .kick{color:#fff;opacity:.9}.flarecard b{font-size:18px}.flarecard span{font-size:14px}
.flarecard .pill{background:#fff;color:var(--ink)}
.linkbtn.badday{color:var(--mid);justify-self:center;display:block;margin:0 auto}

/* Care Team: profile, row link, weekly note; something new */
.carelink{background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:40px;display:grid;align-content:center}
.carelink b{display:block;font-size:15.5px}.carelink span{font-size:13px;color:var(--mid)}
/* Care Team thread (13a-3): the chat bubbles, with who and when on each; the badge says only that something came (orange = people) */
.thread{display:flex;flex-direction:column;gap:10px}.thread .msg{max-width:88%}
.thread .mfrom{display:block;font-size:12.5px;font-weight:600;color:var(--mid);margin-bottom:2px}.thread .msg.me .mfrom{color:inherit;opacity:.75}
.thread .mtext{white-space:pre-line;overflow-wrap:anywhere}
.sentnote{margin:0;padding:10px 14px;border-radius:14px;background:var(--orange);color:#fff;font-weight:600}
.carelink .cbadge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--orange);color:#fff;font-size:12px;font-weight:600;vertical-align:2px}
.careprofile{display:flex;gap:16px;align-items:center}
.careprofile .tag{display:inline-block;margin-top:6px}
.carenote{background:var(--blue-wash)}
.carenote p{margin:8px 0;font-size:15px}
.linkbtn.newthing{color:var(--mid);display:block;margin:6px auto 0}

/* Habit plan: phase bar, rest day */
.lrow.phase .phasebar{display:flex;gap:4px;margin-top:8px}
.lrow.phase .phasebar i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.lrow.phase .phasebar i.on{background:var(--green)}
.restcard{background:var(--green-wash)}

.demo-close{display:none;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:600;padding:12px 18px;justify-self:start}
.demo-phone-only{display:none}
@media (max-width:860px){.demo-phone-only{display:grid}}

/* Two-sided moves */
.player-media .ptag.side{left:auto;right:12px;background:var(--ink);color:#fff}
.countdown{grid-auto-flow:row;align-content:center;gap:6px}
.countdown .cdlabel{color:#fff;font-size:24px;font-weight:800;text-align:center}

/* Where do you feel it? */
.feelcheck{background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px 14px;display:grid;gap:8px;margin-top:10px}
.feelcheck b{font-size:15.5px}.feelcheck span{font-size:13.5px;color:var(--mid)}
.feelcheck.ok{background:var(--green-wash, #e6f8f0);border-color:transparent}
.setrow .skipimg{width:40px;height:40px;border-radius:10px;object-fit:cover}
.setrow small{display:block;color:var(--mid);font-size:12px;font-weight:400}
.lrow.bigchoice{grid-template-columns:48px minmax(0,1fr) auto;padding:16px}
.lrow.bigchoice b{font-size:17px}
.pill.onpurple{border:0;background:#fff;color:var(--ink);font-weight:700}

/* Posture photo with dots, lines and plumb line; before and after */
.postureshot{position:relative;width:fit-content;max-width:100%;margin:0 auto;border-radius:20px;overflow:hidden;background:#000;line-height:0}
.postureshot img{display:block;width:auto;max-width:100%}
.postureshot svg{position:absolute;inset:0;width:100%;height:100%}
.postureshot .plumb{position:absolute;left:8px;top:8px;line-height:1.2;background:rgba(22,21,19,.6);color:#FACC16;font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.beforeafter > div{display:grid;gap:4px;text-align:center}

/* "Looks like you paused" sheet in the player */
.pausesheet{position:absolute;left:12px;right:12px;bottom:12px;z-index:25;background:#fff;border-radius:24px;padding:14px;display:grid;gap:12px;box-shadow:0 12px 40px rgba(22,21,19,.22);animation:sheetup .32s cubic-bezier(.2,.9,.3,1.2)}
.pausesheet .fline{margin:0;box-shadow:none;border:0;padding:0;background:none}
.pausesheet .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pausesheet .pill{border:0;justify-content:center;min-height:44px}
@keyframes sheetup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pausesheet{animation:none}}

/* Other pain areas on the "where" screen */
.morerow{background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;display:grid;gap:8px}
.morerow b{font-size:15px}
.minigrid{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.minigrid button{min-height:36px;border:0;border-radius:10px;background:var(--paper);font:inherit;font-weight:600;color:var(--ink);padding:0;cursor:pointer}
.minigrid button[aria-pressed="true"]{background:var(--blue);color:#fff}
.areaicon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}

/* Ability questions before the movement check */
.squatpic{display:grid;place-items:center;background:#fff;border-radius:20px;padding:8px;border:1px solid var(--line)}
.squatpic img{border-radius:14px;max-height:180px;width:auto}
.tierwhy{margin:0;font-size:15px;text-align:center;max-width:320px}
.tierwhy .linkbtn{color:inherit;text-decoration:underline;font-weight:600;display:block;margin:2px auto 0}
.tierwhy{text-wrap:balance}

/* The Flexa kit */
.kitcard{display:grid;gap:8px;border:2px solid var(--orange)}
.kitcard b{font-size:18px}
.kitswap{display:flex;gap:10px;align-items:flex-start;background:#FFF4EA;border-radius:16px;padding:10px 12px;font-size:15px;margin-top:10px}
.kitform{display:grid;gap:6px}
.kitin{font:inherit;font-size:17px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
.kitin:focus{outline:none;border-color:var(--blue)}

/* Care Team: calls, the cap */
.callcard{display:grid;gap:8px;border:2px solid var(--purple)}
.callcard b{font-size:17px}
.lockedcard{display:grid;gap:8px;justify-items:start;background:var(--purple-wash)}
.lockedcard a{color:var(--ink);font-weight:600}
.callwhat .steps{margin:6px 0 0}
.why.care{background:var(--purple-wash);border-left:4px solid var(--purple)}
.callcard .row > div{display:grid;gap:2px}

/* End of the free week */
.trialcard,.pausedplan{display:grid;gap:8px;border:2px solid var(--purple)}
.trialcard b,.pausedplan b{font-size:17px}
.hint.offline{color:var(--green-deep);text-align:center;margin:6px 0 0;font-size:13.5px}

/* Printable program */
.printpage{background:#fff;border-radius:20px;padding:16px;display:grid;gap:14px;color:#161513}
.printhead{display:flex;gap:14px;align-items:center;border-bottom:2px solid var(--blue);padding-bottom:12px}
.printhead h1{font-size:22px;margin:0;font-weight:800}
.printhead p{margin:2px 0 0;font-size:14px;color:var(--mid)}
.printmove{display:grid;grid-template-columns:96px 1fr;gap:8px 12px;border-bottom:1px solid var(--line);padding-bottom:12px;break-inside:avoid}
.printmove .pimg{width:96px;height:96px;object-fit:cover;border-radius:12px}
.printmove .ptext h2{font-size:17px;margin:0;font-weight:800}
.printmove .ppos{margin:2px 0 6px;font-size:13px;color:var(--mid)}
.printmove ol{margin:2px 0 6px;padding-left:18px;font-size:14px}
.printmove b{font-size:14px;font-weight:600}
.printmove .pfeel{margin:4px 0 0;font-size:14px}
.printmove .pqr{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mid)}
.printmove .pqr svg{width:96px;height:96px}
.pfoot{font-size:13px;color:var(--mid);margin:0}
@media print{
  @page{margin:14mm}
  body{background:#fff !important}
  .demo,.tabs,.noprint,.pnote{display:none !important}
  .stage,.phone,.screen{display:block !important;position:static !important;width:auto !important;height:auto !important;max-width:none !important;overflow:visible !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;margin:0 !important;background:#fff !important;transform:none !important}
  .printpage{border-radius:0;padding:0}
  .printmove{grid-template-columns:110px 1fr 110px}.printmove .pqr{grid-column:auto;flex-direction:column}
}
.printpage li,.printpage p,.printpage h1,.printpage h2{text-wrap:pretty}
.printhead > div{flex:1;min-width:0}
.capline{grid-column:1 / -1;background:rgba(22,21,19,.82);color:#fff;border-radius:14px;padding:8px 12px;font-size:16px;line-height:1.35;text-align:center;margin-top:10px;text-wrap:balance}
.pausesheet .pgrid.one{grid-template-columns:1fr}
.pausesheet .pgrid.one .pill{justify-content:flex-start;text-align:left;padding:10px 14px}
.cam-skip{position:absolute;right:14px;bottom:130px;z-index:5;border:0;background:rgba(255,255,255,.9);color:var(--ink);font-weight:600}
.hurtq{display:grid;gap:6px}
.feelcheck.howto{border-color:var(--blue)}
.mpic{flex:none;width:44px;height:44px;display:grid;place-items:center}
.codeerr{background:#fff;color:var(--red-deep);border-radius:14px;padding:8px 12px;font-weight:600;font-size:15px;margin:0;max-width:320px;text-align:center}

/* Tap-on-body map on the "where" screen */
.bodymap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:340px;margin:4px auto 30px}
.bmview{position:relative;display:grid;justify-items:center;gap:6px;padding:14px 0 10px;border-radius:28px;background:var(--blue-wash);cursor:pointer;-webkit-tap-highlight-color:transparent}
.bmfig{position:relative;height:300px;aspect-ratio:247/1000}.bmfig img{display:block;height:100%;width:100%;user-select:none;-webkit-user-drag:none;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(3,132,198,.18))}
.bmsex{margin:0 0 12px}
.qhead{display:flex;align-items:center;gap:0;width:100%}.qhead > span{font-size:14px;font-weight:600;color:var(--mid)}
/* A quiet ? right after the question's label: 20px to see, 36px to tap (JC 10/14). */
.whybtn{flex:none;width:36px;height:36px;margin:-8px 0;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}.whybtn i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--faint);color:var(--faint);font:800 12px/1 inherit;font-style:normal;display:grid;place-items:center}.whybtn[aria-expanded=true] i{border-color:var(--mid);background:var(--mid);color:#fff}
.moodscreen > .qhead{justify-content:center;margin-top:10px}.moodscreen > .qhead .whybtn i{border-color:currentColor;color:inherit;opacity:.85}.moodscreen > .qhead .whybtn[aria-expanded=true] i{background:#fff;border-color:#fff;color:var(--ink);opacity:1}.moodscreen > .whybox{width:100%;border:0}
.crewcard{display:grid;gap:6px}.crewscore{display:grid;gap:6px}.crewscore b{font-size:24px}.crewcode{font-size:28px;letter-spacing:.12em}
.whybox{display:grid;gap:4px;margin:6px 0 10px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.45;text-align:left}.whybox b{font-size:14px}
.bmlab{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep)}
.bodymap .spot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;z-index:1}
.bodymap .spot::after{content:"";width:14px;height:14px;border-radius:50%;border:3px solid var(--blue);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .15s}
.bodymap .spot:hover::after{transform:scale(1.2)}
.bodymap .spot.on::after{width:20px;height:20px;background:var(--blue);box-shadow:0 0 0 6px rgba(56,189,248,.3)}
.bodymap .maphint{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-size:13px;font-weight:600;color:var(--mid)}
.consent{display:grid;gap:8px}
.consent .setrow{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.consent input[type=checkbox]{width:22px;height:22px;flex:none;margin-top:2px}
.medaddr{display:grid;gap:6px}
.listenall{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin:4px 0 6px}

/* Follow along: one screen driven by the voice-over */
.follow{display:flex;flex-direction:column;margin:-54px -20px -24px;height:calc(100% + 78px);flex:none;overflow:hidden;background:#161513;color:#fff}
/* The video's height doesn't depend on what's below it, so nothing jumps between set-up, hold and done (JC 10/11). */
.follow .f-media{position:relative;flex:none;height:clamp(220px,calc(100% - 432px),60vh);overflow:hidden;background:#000}
.follow .f-media img,.follow .f-media .exvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.follow .f-media .exvid{display:none}.follow .f-media .exvid.ok{display:block}.follow .f-media .exvid.ok ~ img{display:none}
.follow .f-media::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,rgba(22,21,19,.6));pointer-events:none}
.follow .f-top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:50px 16px 20px;background:linear-gradient(rgba(22,21,19,.6),transparent)}
.follow .f-top .back{background:rgba(255,255,255,.25);color:#fff}
.follow .f-top .segs{max-width:none}.follow .f-top .segs i{background:rgba(255,255,255,.35)}.follow .f-top .segs i.done{background:#fff}.follow .f-top .segs i.now{background:var(--blue)}
.follow .f-n{font-size:13px;font-weight:600;white-space:nowrap}
.follow .f-side{top:auto;bottom:16px;left:auto;right:16px;z-index:2}
.follow .f-meter{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;background:rgba(255,255,255,.2)}
.follow .f-meter i{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s linear}
.follow .f-body{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 12px;display:flex;flex-direction:column;gap:10px}
.follow .f-body > *{flex-shrink:0}
.follow .f-status{display:flex;align-items:flex-end;align-items:last baseline;justify-content:space-between;gap:12px;height:46px}
.follow .f-phase{font-size:15px;font-weight:800;color:var(--blue)}
.follow[data-phase=done] .f-phase{color:var(--green)}
.follow .f-clock{font-size:15px;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap;font-variant-numeric:tabular-nums}
.follow .f-clock b{color:#fff;font-weight:800}
.follow[data-phase=hold] .f-clock b{font-size:44px;line-height:1;letter-spacing:-.01em}
.follow .f-name{margin:0;font-size:22px;line-height:1.2;font-weight:800;color:#fff;text-wrap:balance}
.follow .f-cap{font-size:19px;line-height:1.4;font-weight:400;color:rgba(255,255,255,.92);min-height:2.8em;text-wrap:pretty}
.follow .f-go{display:grid;gap:10px;position:sticky;bottom:-12px;margin-bottom:-12px;padding:6px 0 12px;background:#161513} /* the way forward never scrolls away */.follow .f-go[hidden]{display:none}
.follow .f-steps{display:flex;gap:8px}
.follow .f-step{border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14px;font-weight:600;min-height:36px;padding:0 14px;cursor:pointer}
.follow .f-step:disabled{opacity:.35;cursor:default}
.follow .f-ready{border:0;border-radius:999px;background:var(--blue-deep);color:#fff;font:inherit;font-size:17px;font-weight:800;min-height:52px;width:100%;cursor:pointer}
.follow .f-ready[hidden]{display:none}
.follow .f-feel{background:rgba(255,255,255,.1);border-radius:18px;padding:12px 14px;display:grid;gap:8px;font-size:15px}
.follow .f-feel .row{gap:8px;justify-content:flex-start}.follow .f-feel .pill{border:0;min-height:40px}
.follow .f-feel .pill:not(.blue){background:rgba(255,255,255,.2);color:#fff}
.follow .safetybar{color:var(--ink)}
.follow .f-next{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.follow .f-next img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.follow .f-next .kick{display:block;color:rgba(255,255,255,.6)}
.follow .f-next b{display:block;font-size:15px;font-weight:600}
/* One thing at a time in the bottom slot: a question or the stop advice replaces "Up next", and so do the set-up controls. */
.follow .f-go:not([hidden]) ~ .f-next,.follow .f-feel:not([hidden]) ~ .f-next,.follow .safetybar:not([hidden]) ~ .f-next{display:none}
.follow[data-phase=done] .f-feel,.follow[data-phase=done] .f-next{display:none} /* the caption already says what's next */
.follow .f-bar{flex:none;display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;gap:6px;padding:10px 12px 22px;background:#161513;border-top:1px solid rgba(255,255,255,.1)}
.follow .f-bar > button{border:0;background:none;color:#fff;display:grid;justify-items:center;gap:2px;font:inherit;font-size:12.5px;font-weight:600;min-height:52px;cursor:pointer}
.follow .f-play{width:64px;height:64px;border-radius:50%;background:#fff !important;color:var(--ink) !important;font-size:20px !important;place-items:center}
.follow .f-glyph{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14);font-size:17px;line-height:1}
.follow .f-glyph.heart{color:var(--red)}
.followsheet{max-height:70%;overflow:auto;color:var(--ink)}
.followsheet .row{justify-content:space-between}
.followsheet .pill.hurt{background:var(--red-wash);color:var(--red-deep)}
.welcome-in{color:#fff;text-decoration:underline;font-weight:600}

/* ---------- Desktop web app (body.desk: 900px and wider, unless the phone preview is chosen) ---------- */
.demo-fab,.demo-desk-only{display:none}
@media (min-width:900px){.demo-desk-only{display:grid}}
body.desk{background:var(--warm, #F7F3EE)}
body.desk .stage{display:block;padding:0;min-height:100vh}
body.desk .demo{display:none}
body.desk.demo-open .demo{display:grid;position:fixed;top:0;right:0;bottom:0;width:380px;max-width:none;z-index:80;background:#F4F1EC;overflow:auto;padding:28px 24px 40px;align-content:start;box-shadow:-20px 0 40px rgba(22,21,19,.18)}
body.desk.demo-open .demo-close{display:block}
body.desk .demo-fab{display:block;position:fixed;left:16px;bottom:16px;z-index:70;border:0;border-radius:999px;background:#161513;color:#fff;font:inherit;font-weight:600;font-size:13px;padding:10px 16px;cursor:pointer;opacity:.8}
body.desk .phone{width:100%;height:100vh;border:0;border-radius:0;box-shadow:none;display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-areas:"nav screen"}
body.desk .phone:has(> .tabs[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"screen"}
body.desk .screen{grid-area:screen;padding:40px max(28px,calc((100% - 760px) / 2)) 48px}
body.desk .tabs{grid-area:nav;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;border-top:0;border-right:1px solid var(--line);padding:28px 14px 80px}
body.desk .tabs::before{content:"";display:block;height:34px;margin:0 10px 22px;background:url(brand/flexa-blue.svg) left center/auto 30px no-repeat}
body.desk .tabs button{grid-auto-flow:column;justify-content:start;align-items:center;gap:12px;font-size:16px;padding:10px 14px;border-radius:14px;cursor:pointer}
body.desk .tabs button[aria-current="page"]{background:var(--blue-wash)}
body.desk .tabs button[aria-current="page"] .ti{background:none;padding:0}
body.desk .tabs button .ti{font-size:20px;width:26px;display:grid;place-items:center}
/* full-window moments fill the window; their content stays a readable width */
body.desk .screen:has(> .moodscreen),body.desk .screen:has(> .camscr),body.desk .screen:has(> .follow){padding:0}
body.desk .moodscreen{margin:0;min-height:100%;padding:56px max(28px,calc((100% - 560px) / 2)) 40px}
body.desk .camscr{margin:0;height:100%;min-height:100%}
body.desk .hdr{margin:0;border-radius:28px;padding:28px 28px 24px}
/* follow along: the video on the left, the coaching text on the right, the controls along the bottom */
body.desk .follow{margin:0;height:100vh;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,1fr);grid-template-rows:minmax(0,1fr) auto}
body.desk .follow .f-media{height:auto;min-height:0}
body.desk .follow .f-body{padding:48px 32px 24px;overflow:auto}
body.desk .follow .f-bar{grid-column:1 / -1;padding:12px 24px 16px}
body.desk .follow .f-cap{font-size:26px}
body.desk .pausesheet{left:auto;right:24px;bottom:24px;width:420px}
/* desktop camera: the whole picture, not a crop, so head and feet stay in view */
body.desk .camscr video,body.desk .camscr canvas{object-fit:contain}
body.desk .follow .f-bar{grid-template-columns:repeat(2,96px) 72px repeat(2,96px);justify-content:center;gap:18px}
body.desk:has(.follow) .demo-fab,body.desk:has(.camscr) .demo-fab{display:none}
.handoff{display:grid;gap:6px;text-align:left;color:var(--ink)}
.remindrow > div{display:grid;gap:2px}
.timecard{display:grid;gap:8px;border:2px solid var(--green)}
.timecard b{font-size:17px}

/* The talking Flexa on a voice call: a video-call headshot; the frame shown follows her voice */
.talkhead{position:absolute;inset:0;overflow:hidden;background:#3a3029}
/* Natural video-call distance (JC's phone, 10/10: full-height cover made her face ~2.5x life size): the square headshot
   sits at full width in the upper part of the screen; a blurred copy fills the rest. */
.talkhead .tf-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(28px) brightness(.62) saturate(.9)}
.talkhead .tf{position:absolute;left:0;right:0;margin:0 auto;top:max(84px,13%);width:min(calc(100% - 32px),62vh,560px);aspect-ratio:1;height:auto;object-fit:cover;border-radius:28px;box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;transform-origin:50% 45%;animation:headbob 5.5s ease-in-out infinite}
.talkhead .tf-rest{opacity:1}
.talkhead .tf-rest{box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 calc(3px + var(--speak, 0) * 10px) rgba(56,189,248,calc(.15 + var(--speak, 0) * 1.6)),0 0 calc(var(--speak, 0) * 90px) rgba(56,189,248,.55)}
.talkhead::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(22,21,19,.85));pointer-events:none}
@keyframes headbob{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -3px;rotate:-.6deg}65%{translate:0 2px;rotate:.5deg}}
@media (prefers-reduced-motion:reduce){.talkhead .tf{animation:none}}
.liveface{position:relative;display:block;border-radius:50%;overflow:hidden;flex:none}
.liveface img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(1.35);transform-origin:50% 40%}
body.desk .screen:has(> .callscr){padding:0}
body.desk .callscr{margin:0;height:100%;min-height:100%}
body.desk:has(.callscr) .demo-fab{display:none}

/* ---------- Guided Today and the journey map (JC 10/11: clear next step, a map, fewer colours) ---------- */
.jstrip{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:var(--card);border-radius:20px;padding:12px 16px;box-shadow:var(--shadow);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.jstrip > span:first-child{display:grid;gap:2px;min-width:0}.jstrip b{font-size:15.5px;font-weight:800}.jstrip > span:first-child > span{font-size:13.5px;color:var(--mid)}
.jstrip .jgo{font-size:13.5px;font-weight:600;color:var(--blue-deep);white-space:nowrap}
.today{background:var(--card);border-radius:28px;padding:16px 16px 4px;box-shadow:var(--shadow)}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}.tl-head b{font-size:20px;font-weight:800}.tl-head span{font-size:13.5px;font-weight:600;color:var(--mid);text-align:right}
.tl{list-style:none;margin:0;padding:0}
.tl-i{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}
.tl-i:not(:last-child)::before{content:"";position:absolute;left:13px;top:32px;bottom:4px;width:2px;background:var(--line)}
.tl-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;border:2px solid var(--line);color:var(--faint);background:var(--card)}
.tl-i.now .tl-dot{border-color:var(--blue-deep);color:var(--blue-deep)}
.tl-i.done .tl-dot{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.tl-c{display:grid;gap:10px;min-width:0;padding-top:3px}
.tl-t{display:grid;gap:2px}.tl-t b,b.tl-t{font-size:16.5px;font-weight:800}.tl-t span{font-size:13.5px;color:var(--mid)}
.tl-i.done .tl-t b{color:var(--mid)}
.tl .faces svg{width:44px;height:44px}
.tl .lrow{box-shadow:none;background:var(--paper);border-radius:18px;padding:10px 12px}
.tl .lrow.ci{background:none;padding:0;grid-template-columns:36px minmax(0,1fr) auto}.tl .lrow.ci svg{width:36px;height:36px}.tl .lrow.ci b{font-size:15.5px;color:var(--mid)}
.tl .exrow{grid-template-columns:52px minmax(0,1fr) auto}.tl .exrow img{width:52px;height:52px;border-radius:14px}
.tl .exrow .num{background:var(--card)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--line)}
.tl .tl-again{justify-self:start;min-height:32px}
/* the one extra step reads as part of the list, not as another loud card */
.tl .checkcard{background:none;color:var(--ink);padding:0;border-radius:0;gap:8px}
.tl .checkcard .fface{display:none}.tl .checkcard > .row{gap:0!important}
.tl .checkcard .kick{color:var(--mid);opacity:1}.tl .checkcard b{font-size:16.5px}.tl .checkcard > span{font-size:14px;color:var(--mid)}
.tl .cstep{background:var(--paper);color:var(--mid)}.tl .cstep.done{background:var(--green-wash);color:var(--green-deep)}.tl .cstep.now{background:var(--blue-wash);color:var(--blue-deep)}
.tl .checkcard .pillbtn{background:var(--ink);color:#fff;font-size:15.5px;padding:13px}
.tl .pill.onpurple{background:var(--paper);color:var(--ink)}
.tl .answers.grid button{background:var(--paper);color:var(--ink);min-height:44px;font-size:17px}
.tl .askrow{background:none;padding:0;grid-template-columns:minmax(0,1fr) auto}.tl .askrow > .ic{display:none}
.tl .card{box-shadow:none;background:var(--paper)}
.more4u{background:var(--card);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.more4u > summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.more4u > summary::-webkit-details-marker{display:none}.more4u > summary::after{content:"›";font-size:20px;color:var(--mid);transition:transform .2s}.more4u[open] > summary::after{transform:rotate(90deg)}
.more4u-in{display:grid;gap:12px;padding:0 12px 12px}.more4u-in .card,.more4u-in .lrow{box-shadow:none;background:var(--paper)}
/* journey */
.lead{margin:-4px 0 0;font-size:16px;color:var(--mid);text-wrap:pretty}
.jcard{gap:14px}
.jrow{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}.jrow > div{display:grid;gap:2px}.jrow b{font-size:15.5px}.jrow span{font-size:14px;color:var(--mid);text-wrap:pretty}
.jline{list-style:none;margin:0;padding:0 2px}
.ji{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}
.ji:not(:last-child)::before{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:var(--line)}
.ji.done::before{background:var(--green)}
.jdot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.ji.done .jdot{background:var(--green-deep);border-color:var(--green-deep)}
.ji.now .jdot{border:7px solid var(--blue-deep)}
.ji > div{display:grid;gap:2px}.ji b{font-size:16px}.ji > div > span:last-child{font-size:14px;color:var(--mid);text-wrap:pretty}
.jwhen{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}.jwhen em{font-style:normal;color:var(--blue-deep)}
.ji.now b{color:var(--ink)}.ji.next b{color:var(--ink)}
.ji.past .jdot{background:var(--line)}.ji.past b,.ji.past > div > span:last-child{color:var(--faint)}
.also .card{box-shadow:var(--shadow)}
/* Me: settings grouped behind one-line summaries (JC 10/11: too many options at once) */
.megroup{background:var(--card);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.megroup > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px}
.megroup > summary::-webkit-details-marker{display:none}
.megroup > summary::after{content:"›";font-size:22px;color:var(--mid);transition:transform .2s}.megroup[open] > summary::after{transform:rotate(90deg)}
.megroup > summary > span{display:grid;gap:2px;min-width:0}.megroup > summary b{font-size:16px}.megroup > summary > span > span{font-size:13.5px;color:var(--mid)}
.megroup-in{display:grid;gap:10px;padding:0 12px 12px}
.megroup-in .card,.megroup-in .lrow{box-shadow:none;background:var(--paper)}.megroup-in .sec-t{font-size:14px;margin:4px 2px 0}
.lrow.kitrow{grid-template-columns:44px minmax(0,1fr)}.lrow.kitrow > .pill{grid-column:2;justify-self:start} /* the kit's ask under its text, not squeezing it */

.hdr .hdrback{display:inline-grid;place-items:center;vertical-align:middle;margin:0 10px 0 0;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:18px}
/* ===== Colour with a job (JC 10/11: "use the color but just be smart about it") =====
   Each brand colour means one thing everywhere: blue = moving (your moves, Start, Relief now, Flexa), purple = check-ins
   and your numbers, green = wins and done, orange = people and what's included (Care Team, calls, kit), yellow = time and
   habits (reminders, your moment, Learn tips), red = stop. Mood faces keep their own scale. White on colour, dark on yellow. */
.opt[aria-pressed="true"]{color:var(--fg,#fff)}
.today .btn[data-act=startToday]{background:var(--blue);color:#fff}
.tl-i.done .tl-dot{background:var(--green);border-color:var(--green)}
.tl-i[data-k=move].now .tl-dot{border-color:var(--blue);color:var(--blue-deep)}
.tl-i[data-k=check].now .tl-dot,.tl-i[data-k=ask].now .tl-dot{border-color:var(--purple);color:var(--purple-deep)}
.tl .exrow .num{background:var(--blue)!important;color:#fff!important;box-shadow:none}
.tl .checkcard .kick{color:var(--purple-deep)}
.tl .cstep.now{background:var(--purple-wash);color:var(--purple-deep)}.tl .cstep.done{background:var(--green-wash);color:var(--green-deep)}
.tl .checkcard .pillbtn{background:var(--purple);color:#fff}
.tl .answers.grid button,.tl .pill.onpurple,.tl .askrow .pill.blue{background:var(--purple-wash);color:var(--purple-deep)}
.callcard,.kitcard{border:2px solid var(--orange)}
.also .ic.avatar,.more4u-in .ic.avatar,.lrow.care .ic.avatar{background:var(--orange);color:#fff}
.learncard{background:var(--yellow-wash)}.learncard .pill.blue{background:var(--yellow);color:var(--ink)}
.ji.now .jdot{border-color:var(--blue)}.ji[data-k=check].now .jdot{border-color:var(--purple)}
.ji.done .jdot{background:var(--green);border-color:var(--green)}.ji.done::before{background:var(--green)}
.ji[data-k=check] .jwhen{color:var(--purple-deep)}.jwhen em{color:var(--blue-deep)}
.jstrip{box-shadow:inset 4px 0 0 var(--blue),var(--shadow)}
/* own words and "how was that one?" (Spencer: feel heard; try this, how did that feel, we'll do this based on that) */
.storybox{width:100%;border:0;border-radius:20px;padding:14px 16px;font:inherit;font-size:16.5px;line-height:1.45;background:var(--card);box-shadow:0 0 0 1.5px #ECE7E1;resize:vertical;min-height:150px}
.storybox:focus{outline:3px solid var(--blue);outline-offset:1px}
.heardq{gap:10px}.heardq b{font-size:15.5px}.heardq .kick{color:var(--purple-deep)}
.heardnote{box-shadow:inset 4px 0 0 var(--orange),0 0 0 1.5px #ECE7E1}.heardnote .kick{color:#C2410C}.heardnote b{font-size:17px}.heardnote > span{font-size:14.5px;text-wrap:pretty}
.basedon{text-align:left;width:100%}.basedon .steps{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
.follow .f-react{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.follow .f-react[hidden]{display:none}
.follow .f-react .fr{border:0;border-radius:18px;min-height:56px;padding:8px 6px;font:inherit;font-size:14.5px;font-weight:800;line-height:1.15;color:#fff;background:rgba(255,255,255,.14);cursor:pointer}
.follow .f-react .fr.good{background:var(--green);color:#fff}
.follow .f-sharp{color:rgba(255,255,255,.8);justify-self:start;min-height:32px}
.follow .f-react:not([hidden]) ~ .f-next{display:none}
/* ===== Desktop layouts (JC 10/11: "the layouts aren't really adjusting for a good desktop experience… columns are super
   narrow and most of the text all the way up at the top"). Phone stays as it was: the wrappers below vanish there. ===== */
.tgrid,.tmain,.tside,.jwrap,.jyear{display:contents}
body:not(.desk)[data-view=today] .screen > .hdr{order:-2}
body:not(.desk)[data-view=today] .jstrip{order:-1}
/* steps in a flow (name, safety, where, your moment, own words, plan…): one readable column, centred on the page */
body.desk.flow .screen{justify-content:safe center;padding:56px max(40px,calc((100% - 640px) / 2)) 64px;gap:18px}
body.desk.flow .h1{font-size:40px;line-height:1.1}
body.desk.flow .lead{font-size:18px}
body.desk.flow .btn{font-size:17px;padding:17px 20px}
/* full-colour steps (welcome, your name, how it feels, goal, surveys…): centred block, the button right under it */
body.desk .moodscreen{justify-content:safe center;gap:22px;padding:64px max(40px,calc((100% - 600px) / 2)) 64px}
body.desk .moodscreen h1{font-size:48px;max-width:600px}
body.desk .moodscreen .q{font-size:36px;max-width:600px}
body.desk .moodscreen .lead-w{font-size:19px;max-width:520px}
body.desk .moodscreen .pillbtn{margin-top:14px;max-width:440px}
body.desk .moodscreen .pillbtn.ghost{margin-top:0}
/* Welcome screens on a computer (JC 10/14: not centred): the buttons follow the text instead of sitting at the bottom of a
   tall window, centred under it, and the bubble sits by Flexa's face, not the column's edge. */
body.desk .moodscreen .hellofoot{margin-top:6px;max-width:440px;justify-items:center}body.desk .hellofoot .pillbtn{margin-top:0}
body.desk .hello-bubble{left:auto;right:calc(50% + 55px)}
body.desk .moodscreen .answers,body.desk .moodscreen .wcard,body.desk .moodscreen .card,body.desk .moodscreen > .whybox{max-width:520px}
body.desk .moodscreen .face,body.desk .moodscreen .winface{transform:scale(1.15)}
/* Today: today's list on the left, where you are and everything else on the right */
body.desk[data-view=today] .screen{padding:32px max(32px,calc((100% - 1160px) / 2)) 56px}
body.desk .tgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:24px;align-items:start}
body.desk .tmain,body.desk .tside{display:flex;flex-direction:column;gap:16px;min-width:0}
body.desk .tside{position:sticky;top:24px}
body.desk .tside .sec-t{margin-top:6px}
/* Progress: the numbers side by side */
body.desk[data-view=progress] .screen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:16px;padding:40px max(32px,calc((100% - 1040px) / 2)) 56px}
body.desk[data-view=progress] .screen > *{grid-column:1 / -1}
body.desk[data-view=progress] .screen > .card.tint{grid-column:auto}
/* Me: settings two by two */
body.desk[data-view=me] .screen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;align-items:start;gap:16px;padding:32px max(32px,calc((100% - 1040px) / 2)) 56px}
body.desk[data-view=me] .screen > *{grid-column:1 / -1}
body.desk[data-view=me] .screen > .megroup{grid-column:auto}
/* Flexa: a wider conversation */
body.desk[data-view=coach] .screen{padding:32px max(32px,calc((100% - 860px) / 2)) 40px}
/* Your journey: the rhythm and what's included beside the year */
body.desk[data-view=journey].flow .screen{padding:48px max(40px,calc((100% - 1040px) / 2)) 64px;justify-content:flex-start}
body.desk .jwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"x y" "r y" "it y" "i y";grid-template-rows:auto auto auto 1fr;gap:14px 40px;align-items:start}
/* Both timelines (the 12 weeks, then the rest) share the right column; what to expect heads the left (JC 10/14: they overlapped). */
body.desk .jwrap .expect{grid-area:x}body.desk .jwrap .jr{grid-area:r}body.desk .jwrap .jyear{grid-area:y;display:grid;gap:14px;align-content:start}body.desk .jwrap .jit{grid-area:it}body.desk .jwrap .ji2{grid-area:i}
body.desk .jbtn{max-width:360px}
body.desk .hdr > .row > img[alt="Flexa"]{display:none} /* the sidebar already carries the logo */
/* Progress as a story (JC 10/11): pain start → now, relief right after moving, moving days, what got easier */
.pc-say .bubble{font-size:16px}
.pc-pain .ptwo{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.pc-pain .ptwo > div{display:grid;gap:0}.pc-pain .ptwo .small{color:rgba(255,255,255,.85)}
.pc-pain .bignum{font-size:64px;line-height:1}.pc-pain .bignum.dim{opacity:.55}
.pc-pain .parrow{font-size:34px;font-weight:800;opacity:.7;padding-bottom:10px}
.pc-pain .ptail{padding-bottom:12px}
.pc-relief{color:#fff;gap:10px}.pc-relief .lead-in{margin:0;font-size:16px;line-height:1.4;text-wrap:pretty}.pc-relief .small{color:rgba(255,255,255,.92)}
.relief{display:grid;gap:6px}
.relief .rrow{display:grid;grid-template-columns:56px minmax(0,1fr) 64px;align-items:center;gap:10px;font-size:13px;font-weight:600}
.relief svg{width:100%;height:16px;overflow:visible}.relief .rnum{text-align:right;white-space:nowrap}.relief .rnum b{font-size:15px}
.pc-days b,.pc-life > b{font-size:17px}.pc-days .kick{color:var(--blue-deep)}
.mdays{display:grid;gap:6px;margin:4px 0}
.mdrow{display:grid;grid-template-columns:64px repeat(7,1fr);align-items:center;gap:6px}
.mdrow span{font-size:12px;font-weight:600;color:var(--mid)}
.mdrow i{aspect-ratio:1;max-width:30px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.mdrow i.on{background:var(--blue);box-shadow:none;animation:pop .35s ease both}
.mdrow i.later{background:none;box-shadow:inset 0 0 0 1.5px #EFEDEA;opacity:.6}
.mdrow i.today{box-shadow:0 0 0 2.5px var(--ink)}
.pc-life .kick,.pc-body .kick{color:var(--purple-deep)}.pc-working .kick{color:var(--green-deep)}
.lifenums{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lifenums > div{display:grid;gap:2px;background:var(--purple-wash);border-radius:16px;padding:10px 12px}
.lifenums b{font-size:24px;font-weight:800;color:var(--mid)}.lifenums em{font-style:normal;color:var(--purple-deep)}
.easier{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.easier li{display:grid;gap:1px;padding:8px 12px;border-radius:14px;background:var(--green-wash)}
.easier li b{font-size:15px}.easier li span{font-size:13.5px;color:var(--green-deep)}
.btn.go{background:var(--blue);color:#fff}
.pc-next .lrow,.pc-body .lrow,.pc-working .lrow{box-shadow:none;background:var(--paper)}
.pc{gap:10px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mdrow i.on{animation:none}}
body.desk[data-view=progress] .screen > .pc{grid-column:auto}
.pc{align-content:start}
.pc-pain .spark{width:100%;height:auto;max-height:90px}
.relief svg{height:20px}.relief .rscale{font-size:11px;font-weight:600;opacity:.85}.relief .rends{display:flex;justify-content:space-between;padding:0 2px}
/* tailoring you can see (JC 10/11): a choice at the start, and what the plan is based on */
.startopt{display:grid;gap:8px;text-align:left;border:0;font:inherit;color:var(--ink);cursor:pointer;width:100%;padding:18px}
.startopt b{font-size:21px;font-weight:800}.startopt .kick{color:var(--blue-deep)}
.startopt .steps{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px;color:var(--mid);text-wrap:pretty}
.startopt .go{font-weight:800;color:var(--blue-deep);font-size:15.5px}
.startopt.tailor{box-shadow:inset 0 0 0 2.5px var(--blue),var(--shadow)}
.startopt.short{padding:14px 18px;gap:4px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}.startopt.short b{font-size:17px}.startopt.short .kick{color:var(--mid)}.startopt.short .go{color:var(--mid)}
.tailored{display:grid;gap:10px}
.tailored .row{justify-content:space-between}.tailored .kick{color:var(--blue-deep)}.tailored .tcount{font-weight:800;color:var(--blue-deep);font-size:15px}
.tbar{height:8px;border-radius:4px;background:var(--paper);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}.tbar i{display:block;height:100%;background:var(--blue);border-radius:4px;transition:width .4s ease}
.tailored ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tailored li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center}
.tailored li > span:nth-child(2){display:grid;gap:1px}.tailored li b{font-size:15px;line-height:1.25}.tailored li > span:nth-child(2) > span{font-size:13.5px;color:var(--mid)}
.tmark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--paper);color:var(--mid);box-shadow:inset 0 0 0 1.5px var(--line)}
.tailored li.done .tmark{background:var(--green);color:#fff;box-shadow:none}
.tailored li:not(.done) b{color:var(--mid)}
.plantailor{gap:12px}
.askkind{display:block;color:var(--purple-deep)}
/* coming back (JC 10/12): forgiving weekly target, reminder re-ask, what Flexa uses */
.weekgoal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 12px;font-size:13.5px;color:var(--mid)}
.weekgoal b{color:var(--ink);font-size:14px}.weekgoal .wgplus{font-weight:800;color:var(--green-deep)}
.wgdots{display:inline-flex;gap:5px}.wgdots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);background:var(--card)}
.wgdots i.on{background:var(--blue);box-shadow:none}
.remindcard{border:2px solid var(--yellow);gap:8px}.remindcard .kick{color:#8A6D00}.remindcard b{font-size:17px}
.whatwe{margin:0;padding:0;list-style:none;display:grid;gap:12px}.whatwe li{display:grid;gap:2px}.whatwe b{font-size:15.5px}.whatwe span{font-size:14px;color:var(--mid);text-wrap:pretty}
.nevercard{box-shadow:inset 4px 0 0 var(--red),0 0 0 1.5px #ECE7E1;gap:4px}.nevercard b{color:var(--red-deep)}
/* Name screen (JC 10/13): Flexa stays in the circle and greets you as you type; no photo-slot look. */
.greet{min-height:1.5em;margin:0;font-weight:600;font-size:18px;color:inherit;text-align:center}
/* Never lost (JC 10/13): named step bar while getting started; "Last steps" row with Finish later after the first session. */
.obbar{display:grid;justify-items:center;gap:6px;flex:1;min-width:0}
.obsegs{display:flex;gap:4px;width:min(180px,100%)}.obsegs i{flex:1;height:5px;border-radius:5px;background:var(--line)}.obsegs i.done{background:var(--ink)}.obsegs i.now{background:var(--blue)}
.obname{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mid);white-space:nowrap}
.moodscreen .obname,.moodscreen .finlater{color:inherit;opacity:.85}
.finrow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%}
.finlater{font-size:14px;font-weight:600;padding:6px 0;white-space:nowrap;flex:0 0 auto}
/* First-session WOW check (JC 10/13, item 8): five self-scored levels, before and after. */
.wowscale{display:grid;gap:8px}
.wowopt{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;text-align:left;border:0;border-radius:16px;padding:12px 14px;background:var(--card);box-shadow:var(--shadow);font:inherit;color:var(--ink);cursor:pointer}
.wowopt b{font-weight:600;font-size:15.5px;text-wrap:pretty}
.wowopt[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--blue),var(--shadow);background:var(--blue-wash)}
.wowopt.off b{color:var(--mid)}
.lvl{display:inline-flex;gap:3px;align-items:flex-end}.lvl i{width:6px;border-radius:3px;background:var(--line)}
.lvl i:nth-child(1){height:8px}.lvl i:nth-child(2){height:12px}.lvl i:nth-child(3){height:16px}.lvl i:nth-child(4){height:20px}.lvl i:nth-child(5){height:24px}
.lvl i.on{background:var(--blue)}
.wowlinks{justify-content:space-between;gap:10px;flex-wrap:wrap}
.wowstops{display:grid;gap:8px}.wowstops .urgent{background:var(--red-wash);color:var(--red-deep)}
.wowres,.insight{background:rgba(255,255,255,.94);color:var(--ink);text-align:left;width:100%}
.wowres .ba{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:6px 0}
.wowres .ba > div{display:grid;gap:4px}.wowres .ba b{font-size:16px;text-wrap:balance}.wowres .arrow{font-size:22px;font-weight:800;color:var(--green-deep)}
.wowres p{margin:0;font-weight:600}
.insight .kick{color:var(--purple-deep)}.insight b{font-size:17px;text-wrap:pretty}
.stopnote{background:var(--yellow-wash)}
/* Meet your Care Team (JC 10/13, item 13): who does what, and the call rhythm. */
.careprofile.meet{display:flex;gap:14px;align-items:center;text-align:left;width:100%}
.whodoes{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;color:var(--ink);width:100%}.whodoes > div{display:grid;gap:4px;align-content:start}
.whodoes .kick{color:var(--orange-deep,#C2410C)}
.rhythm{display:grid;gap:8px;text-align:left;color:var(--ink);width:100%}
.callrhythm{list-style:none;margin:0;padding:0;display:grid;gap:6px}.callrhythm li{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:baseline}
.callrhythm .kick{color:var(--blue-deep)}
@media (max-width:380px){.whodoes{grid-template-columns:1fr}}
.careprofile.meet .ic.avatar{background:#fff;color:var(--orange)}
/* What to expect on the journey (JC 10/13, item 15). */
.expect{display:grid;gap:8px;text-align:left}.expect .callrhythm{gap:10px}.expect .callrhythm li{grid-template-columns:1fr;gap:2px}
/* What Flexa knows about you (JC 10/13, item 16). */
.knowrow{grid-template-columns:1fr auto}.knowrow > div{display:grid;gap:2px}
/* Anything more to share? (JC 10/13, item 7) */
.notebox{display:grid;gap:8px;text-align:left;color:var(--ink);width:100%}.notebox .storybox{width:100%;min-height:72px;height:auto}.notebox .pill,.notebox .linkbtn{white-space:nowrap;flex:0 0 auto}.notebox .row .small{flex:1 1 auto;min-width:0}.notelab{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
body.desk .bodymap{max-width:440px}body.desk .bmfig{height:380px}
/* Your colour (JC 10/13, item 1) */
.avbtn{position:relative;border:0;padding:0;cursor:pointer}.avedit{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink);font-size:12px;display:grid;place-items:center;box-shadow:var(--shadow)}
.avpick{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.avsw{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:var(--shadow);cursor:pointer;padding:0}.avsw[aria-pressed=true]{outline:3px solid #fff;outline-offset:3px;transform:scale(1.08)}
/* Things you touch that aren't buttons still give (JC 10/13, item 5) */
.bmview:active .bmfig{transform:scale(.98)}.bmfig{transition:transform .22s cubic-bezier(.3,1.7,.5,1)}.megroup > summary:active{transform:scale(.99)}.megroup > summary{transition:transform .22s cubic-bezier(.3,1.7,.5,1)}
/* The other side: the demo is filmed on the left, so side 2 shows it mirrored (JC 10/13, player audit). */
.follow[data-side="2"] .f-media .exvid,.follow[data-side="2"] .f-media > img{transform:scaleX(-1)}
/* Exercise demos are 16:9 (all 127 videos are 1920x1080). Cropping them to fill a squarish box cut off two thirds of the
   frame, so people lying across it lost their head or feet (JC 10/13). Show the whole frame, never cropped. */
.player-media{aspect-ratio:16/9}.player-media img,.player-media .exvid{object-fit:contain;background:#000}
body:not(.desk) .follow .f-media{height:auto;display:flex;flex-direction:column}
body:not(.desk) .follow .f-top{position:relative;order:-1;padding:50px 16px 12px;background:none} /* its own row above the picture, so it never covers the person */
body:not(.desk) .follow .f-media img,body:not(.desk) .follow .f-media .exvid{position:static;inset:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
body:not(.desk) .follow .f-media::after{display:none}
body.desk .follow .f-media img,body.desk .follow .f-media .exvid{object-fit:contain}
/* After a session (JC 10/13: "so monotonous"): one hero, one headline, Flexa speaking, one question, light extras. */
.sdone{gap:14px}
.sdhero{display:flex;align-items:flex-end;justify-content:center;gap:16px;width:100%;padding:16px 18px 18px;border-radius:32px;background:rgba(255,255,255,.18)}
.sdface{display:grid;justify-items:center;gap:6px}.sdface .kick{color:inherit;opacity:.85}.sdface b{font-size:26px;font-weight:800;line-height:1}
.sdface.now b{font-size:44px}.sdface svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
.sdarrow{font-size:34px;font-weight:800;line-height:1;margin-bottom:52px;opacity:.9}
.sdhero[data-trend=down] .sdface.now svg{animation:sdbounce .8s cubic-bezier(.3,1.7,.5,1) .2s both}
@keyframes sdbounce{0%{transform:scale(.6) rotate(-8deg)}100%{transform:none}}
.sdhead{font-size:32px;line-height:1.08;margin:2px 0 0}
.sdsay{display:flex;align-items:flex-end;gap:8px;width:100%;text-align:left;margin-top:4px}
.sdfig{width:92px;height:auto;flex:0 0 auto;align-self:flex-end;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.sdbubble{flex:1;display:grid;gap:4px;background:#fff;color:var(--ink);border-radius:22px 22px 22px 6px;padding:12px 14px;margin-bottom:22px;box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.sdweek{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-weight:600;font-size:14px}.sdweek .kick{color:inherit;opacity:.85}
.sdweek .dots i{width:16px;height:16px;background:rgba(255,255,255,.3);font-size:0}.sdweek .dots i.on{background:#fff}.sdweek .dots i.today{outline:2px solid #fff;outline-offset:2px}
.sdask{display:grid;gap:10px;width:100%}.sdask .chips{justify-content:center}.sdask .chip{background:#fff;color:var(--ink);border-color:transparent}.sdask .chip[aria-pressed=true]{background:var(--ink);color:#fff}
.ghostchip{background:transparent;border:2px solid rgba(255,255,255,.75);color:inherit}
.notebox.lite{background:rgba(255,255,255,.16);color:inherit;box-shadow:none}.notebox.lite .small{color:inherit;opacity:.85}.notebox.lite .storybox{background:#fff;color:var(--ink)}
.notebox.lite .fline{color:inherit}
.sdcare{display:flex;gap:8px;align-items:center;font-size:13px;opacity:.92;text-align:left;margin:0}.sdcare .avatar{width:28px;height:28px;font-size:11px;flex:0 0 auto}
.notebox.lite{display:block;width:100%;padding:0;border-radius:0}.noteline{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.95);border-radius:999px;padding:6px 6px 6px 16px}
.noteline .storybox{flex:1;min-width:0;min-height:0;height:40px;border:0;background:transparent;padding:10px 0;resize:none;overflow:hidden;box-shadow:none;outline-offset:4px;font-size:15px;line-height:20px}.noteline .pill{flex:0 0 auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* for screen readers only */
/* Audio-first guide (JC 10/13): a still of the position, the time and the words, readable from a mat on the floor */
.guide{display:flex;flex-direction:column;margin:-54px -20px -24px;min-height:calc(100% + 78px);background:#161513;color:#fff}
.g-top{display:flex;align-items:center;gap:12px;padding:50px 16px 12px}
.g-top .back{background:rgba(255,255,255,.18);color:#fff}
.g-top .segs{flex:1;display:flex;gap:6px}.g-top .segs i{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.3)}.g-top .segs i.done{background:#fff}.g-top .segs i.now{background:var(--blue)}
.g-top .f-n{font-size:13px;font-weight:600;white-space:nowrap}
.g-pic{position:relative;margin:0 16px;border-radius:24px;overflow:hidden;background:#000;aspect-ratio:16/9;max-width:100%}
.g-pic img,.g-pic .g-vid{display:block;width:100%;height:100%;object-fit:contain}
.guide[data-side="2"] .g-pic img,.guide[data-side="2"] .g-pic .g-loop{transform:scaleX(-1)} /* demos are filmed on the left */
.g-side{position:absolute;right:12px;bottom:12px;left:auto;top:auto;background:rgba(22,21,19,.75)}
.g-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:18px 20px}
.g-tip{margin:0;color:rgba(255,255,255,.82);max-width:32ch}
.g-phase{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.guide[data-phase=hold] .g-phase{color:var(--green)}
.g-name{margin:0;font-size:26px;font-weight:800;line-height:1.15}
.g-clock{font-size:16px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;min-height:1.4em}.g-clock b{color:#fff}
.guide[data-phase=hold] .g-clock b{display:block;font-size:88px;line-height:1;font-weight:800;letter-spacing:-.02em}
.g-cap{margin:0;font-size:17px;max-width:32ch;color:rgba(255,255,255,.88);min-height:2.7em}
.g-feel{display:grid;gap:8px;justify-items:center}.g-feel .kick{color:rgba(255,255,255,.75)}.g-feel .row{justify-content:center;flex-wrap:wrap;gap:8px}
.g-feel .chip{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.g-reply{margin:0;color:#A7F3CF;max-width:32ch}
.guide .f-ready{border:0;border-radius:999px;background:var(--blue-deep);color:#fff;font:inherit;font-size:17px;font-weight:800;min-height:52px;width:100%;max-width:360px;cursor:pointer}
.guide .f-ready[hidden]{display:none}.guide .g-start{font-size:20px;min-height:60px}.guide .f-ready:disabled{opacity:.6;cursor:default}
.guide .g-bar{flex:none;display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;gap:6px;padding:10px 12px 22px;background:#161513;border-top:1px solid rgba(255,255,255,.1)}
.guide .g-bar > button{border:0;background:none;color:#fff;display:grid;justify-items:center;gap:2px;font:inherit;font-size:12.5px;font-weight:600;min-height:52px;cursor:pointer}
.guide .g-bar > button[aria-pressed=false]{opacity:.55} /* music or words switched off */.guide .g-bar > button span{white-space:nowrap}.guide .g-bar > button:disabled{opacity:.35;cursor:default}
.guide .f-play{width:64px;height:64px;border-radius:50%;background:#fff !important;color:var(--ink) !important;font-size:20px !important;place-items:center}
.g-cc{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#06212F;font-size:11px;font-weight:800}
body.desk .guide{margin:0;min-height:100vh}body.desk .g-pic{width:min(100% - 32px,880px);margin:0 auto}

/* Progress, v2 (JC 10/13: "still a bit boring … could be better organized and engaging visually, maybe more imagery").
   Flexa and the headline numbers up top, then sections in the order a member asks: how I feel, how I move, everyday life,
   my body, what's next. The member's own moves are the imagery. Blue hero = moving; purple pain = check-ins; green = wins. */
.pghero{position:relative;display:grid;gap:12px;margin-top:4px;padding:18px 16px 16px;border-radius:32px;background:var(--blue);color:#fff;box-shadow:0 14px 24px -14px rgba(3,132,198,.55)}
.pgtop{position:relative;display:grid;align-content:end;gap:4px;min-height:92px;padding-right:112px}
.pghero .kick{color:rgba(255,255,255,.92)}
.pghead{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.pgfig{position:absolute;right:-8px;bottom:-14px;width:112px;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));animation:pop .5s cubic-bezier(.3,1.7,.5,1) both}
.pgstats{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.pgstats div{display:grid;gap:3px;align-content:start;background:rgba(255,255,255,.2);border-radius:18px;padding:10px 12px}
.pgstats b{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgstats b i{font-style:normal;font-weight:600;opacity:.75;margin:0 3px}
.pgstats span{font-size:12.5px;font-weight:600;line-height:1.2;opacity:.95;text-wrap:balance}
.pgsay{display:grid;gap:2px;background:#fff;color:var(--ink);border-radius:22px 22px 22px 6px;padding:12px 14px;font-size:15.5px;line-height:1.4;text-wrap:pretty}
.pgsec{font-size:21px;font-weight:800;line-height:1.1;margin:12px 4px -4px}
.pc-days > b,.pc-working > b{font-size:17px}
.relief{display:grid;grid-template-columns:20px repeat(var(--n),minmax(0,1fr));gap:4px;align-items:end;margin-top:4px}
.raxis{display:flex;flex-direction:column;justify-content:space-between;height:128px;margin-bottom:34px;font-size:11px;font-weight:600;opacity:.85;line-height:0}
.rcol{display:grid;justify-items:center;gap:6px}
.relief .rnum{font-size:15px;font-weight:800;line-height:1;text-align:center}
.rtrack{position:relative;width:12px;height:128px;border-radius:99px;background:rgba(255,255,255,.22)}
.rtrack i{position:absolute;left:50%;display:block}
.rbar{width:12px;transform:translateX(-50%);border-radius:99px;background:rgba(255,255,255,.85)}
.rbefore,.rafter{width:18px;height:18px;border-radius:50%;transform:translate(-50%,50%)}
.rbefore{background:var(--green);box-shadow:inset 0 0 0 3px #fff}
.rafter{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.rday{display:grid;font-size:13px;font-weight:800;line-height:1.1;text-align:center}.rday small{font-size:10.5px;font-weight:600;opacity:.85}
.rkey{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;font-weight:600}.rkey span{display:flex;align-items:center;gap:6px}
.rkey i{position:static;transform:none;display:inline-block;width:14px;height:14px}
.mvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.mvtile{position:relative;display:grid;gap:6px;align-content:start;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mvtile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:var(--paper);transition:transform .2s cubic-bezier(.3,1.7,.5,1)}
.mvtile:active img{transform:scale(.96)}
.mvtile b{font-size:14.5px;font-weight:600;line-height:1.2;text-wrap:balance}
.mvn{position:absolute;left:8px;top:8px;border-radius:99px;padding:3px 9px;background:var(--blue);color:#fff;font-size:13px;font-weight:800}
.mvlike{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--red-deep);font-size:14px}
.mvtile:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:20px}
.pgbody{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center}
.pgbody img{width:60px;height:auto;max-height:132px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
.pgbody > div{display:grid;gap:6px}.pgbody b{font-size:16px;line-height:1.25;text-wrap:balance}
@media (prefers-reduced-motion:reduce){.pgfig{animation:none}.mvtile img{transition:none}}

.careface{object-fit:cover;padding:0;display:block;background:var(--paper)} /* Spencer's photo in the avatar circles */
.g-top .g-tog{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;flex:0 0 auto}.g-top .g-tog[aria-pressed=false]{opacity:.45;text-decoration:line-through}
.g-pic .g-loop{display:block;width:100%;height:100%;object-fit:contain}.g-pic .g-loop[hidden],.g-pic img[hidden]{display:none}

/* Walkie-talkie voice with Flexa (QUEUE N7): her voice on or off in the chat header; the mic beside the message box, red while it
   listens (red = stop: a tap ends it); what it heard, and anything that went wrong, in a line just above the box. */
.walkievoice{margin-left:auto;align-self:center;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;border-radius:999px;padding:0 14px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14px;font-weight:600;white-space:nowrap}
.walkievoice[aria-pressed=false]{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);color:#C9C7C5}
.sendbar .walkiemic{background:var(--card);color:var(--ink);box-shadow:var(--shadow);display:grid;place-items:center;font-size:18px}
.sendbar .walkiemic.rec{background:var(--red);color:#fff;box-shadow:0 0 0 4px var(--red-wash)}
.sendbar .walkiemic:disabled{opacity:.7}
.sendbar:has(.walkienote:not([hidden])){flex-wrap:wrap}
.walkienote{flex:1 0 100%;margin:0;padding:8px 14px;border-radius:16px;background:var(--card);box-shadow:var(--shadow);font-size:14px;color:var(--mid);text-wrap:pretty}
.walkienote[hidden]{display:none}
.walkiesecs{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.hearbtn{align-self:flex-start;margin:-2px 0 0 38px;border:0;padding:8px 14px;font-size:14px;min-height:40px}
.bootwait{min-height:70vh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--mid);font-size:15px}.bootwait img{opacity:.9}
.hdr-r{display:flex;align-items:center;gap:10px}.msgbtn{position:relative;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.msgbtn .dot{position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px #161513} /* a Care Team reply waiting (JC 15 Oct) */
.pushask span{color:var(--mid)}.moodscreen .pushask{color:var(--ink);text-align:left;width:100%;max-width:360px} /* asked once after the first message to the Care Team (QUEUE N10) */
.textsask span{color:var(--mid)} /* text reminders, asked once (QUEUE N6) */
.textsnote,.texterr{margin:0;padding:6px 0 10px;text-wrap:pretty}.texterr{color:var(--red-deep);font-weight:600}
.textsform{display:grid;gap:8px;padding:6px 0 12px;border-bottom:1px solid var(--line)}.textsform .consenttext{margin:0;text-wrap:pretty}.textsform .texterr{padding:0}

/* The store app (QUEUE 19a; app.js nativeStart puts .native on <html>, which no browser gets). The app fills the whole screen,
   status bar and home indicator included: the layout's own 54px of top room (made for the phone mock-up) grows by however much
   more this phone needs, full-bleed screens keep their colour up to the top edge (a transparent border shows their background),
   and the tab bar clears the home indicator. The release layout's auto column is for wide screens; the app is always one column. */
/* --sat, --sab: the bars' sizes. Android sets --safe-area-inset-* itself (MainActivity.java): WebViews before 140 leave env() at 0. */
html.native{--sat:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));--sab:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--nt:max(0px, calc(var(--sat) - 38px))}
html.native body.release .stage{grid-template-columns:1fr}
html.native .screen{padding-top:calc(54px + var(--nt))}
html.native :is(.moodscreen,.hdr,.callscr,.camscr,.follow,.guide){margin-top:calc(-54px - var(--nt));border-top:var(--nt) solid transparent}
html.native :is(.moodscreen,.guide){min-height:calc(100% + 78px + var(--nt))} html.native :is(.callscr,.camscr,.follow){height:calc(100% + 78px + var(--nt))}
html.native .tabs{padding-bottom:max(22px, var(--sab))}
html.native :is(.follow .f-bar,.guide .g-bar){padding-bottom:max(22px, var(--sab))} /* the player's controls clear Android's three-button bar */
/* The status bar's strip (app.js nativeChrome): clear at the top of a screen, the screen's own colour once it scrolls, so content never
   shows under the clock. Above the screen's overlays, below the in-app notice, which moves down out of the status bar. */
html.native .phone::before{content:'';position:absolute;top:0;left:0;right:0;height:var(--sat);z-index:44;pointer-events:none;background:var(--sbar, transparent)}
html.native .notif{top:calc(10px + var(--sat))}
/* Your day (JC 17 Oct): the typical-day box with the mic, the shift line on Today, the quiet-hours note, a Learn card said for their day */
.daybox{display:flex;gap:8px;align-items:flex-end}.daybox .storybox{flex:1;min-width:0;min-height:84px}
.shiftday{margin:6px 0 2px}
.quietnote{display:grid;gap:6px;justify-items:start;margin-top:4px}
.forday{margin:6px 0 0;font-style:italic}.forday:has(> span:empty){display:none}
/* A Learn card still waiting for the clinician's sign-off (QUEUE 7b), seen only with ?review=1 in the member build */
.drafttag{display:inline-block;justify-self:start;align-self:center;white-space:nowrap;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;line-height:1.5}
.lrow .drafttag{display:table;margin-top:6px;font-size:12.5px;color:var(--ink)}