@font-face{font-family:'Söhne';src:url(fonts/soehne-buch.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Söhne';src:url(fonts/soehne-dreiviertelfett.woff2) format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/Inter-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/EBGaramond-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/EBGaramond-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ground:#f6f5f2;--card:#fdfdfc;--ink:#1a1917;--body:#4a4640;--quiet:#6a665f;
  --line:rgba(26,25,23,.16);--hair:rgba(26,25,23,.11);--off:rgba(26,25,23,.06);--tile:#efece6;
  --fill:#1a1917;--onFill:#fdfdfc;--red:#a34a39;
  --violet:#7a2f86;--vTint:#f7f0f8;--vLine:#ddc8e1;
  --gold:#a8873c;--goldText:#7d6526;--goldTint:#fffdf7;
  --shadow:0 34px 90px -30px rgba(26,25,23,.45);--soft:0 16px 40px -22px rgba(26,25,23,.4);
  --a:.26;--b0:.18;--b1:.20;
  --orb:radial-gradient(46% 44% at 80% 28%,#f48ac8 0%,rgba(238,120,188,.95) 36%,rgba(238,120,188,0) 72%),radial-gradient(64% 54% at 58% 88%,#003d1b 0%,#004a21 44%,rgba(0,74,33,0) 80%),radial-gradient(72% 72% at 26% 32%,#1a9be0 0%,#0087cc 48%,rgba(0,135,204,0) 84%),linear-gradient(160deg,#0087cc,#006aa3);
  --curve:cubic-bezier(.32,.72,0,1);
  --sans:'Inter',-apple-system,"Helvetica Neue",Arial,sans-serif;--serif:'EB Garamond',Georgia,serif;
  /* five sizes */
  --t1:80px;--t2:40px;--t2l:48px;--t3:28px;--t4:18px;--tb:17px;--t5:13px;
  --pad:40px;--gap:80px;
}
@media (prefers-color-scheme:dark){:root:not(.theme-light){
  --ground:#161513;--card:#1b1a17;--ink:#f4f2ee;--body:#c4c0b8;--quiet:#b4b0a8;
  --line:rgba(255,255,255,.18);--hair:rgba(255,255,255,.12);--off:rgba(255,255,255,.08);--tile:#24221f;
  --fill:#f4f2ee;--onFill:#1a1917;--red:#e89f8b;
  --violet:#c79ad0;--vTint:rgba(199,154,208,.10);--vLine:rgba(199,154,208,.32);
  --goldText:#e2c685;--goldTint:rgba(168,135,60,.10);
  --shadow:0 34px 90px -30px rgba(0,0,0,.7);--soft:0 16px 40px -22px rgba(0,0,0,.8);
  --a:.40;--b0:.26;--b1:.30;
}}
:root.theme-dark{
  --ground:#161513;--card:#1b1a17;--ink:#f4f2ee;--body:#c4c0b8;--quiet:#b4b0a8;
  --line:rgba(255,255,255,.18);--hair:rgba(255,255,255,.12);--off:rgba(255,255,255,.08);--tile:#24221f;
  --fill:#f4f2ee;--onFill:#1a1917;--red:#e89f8b;
  --violet:#c79ad0;--vTint:rgba(199,154,208,.10);--vLine:rgba(199,154,208,.32);
  --goldText:#e2c685;--goldTint:rgba(168,135,60,.10);
  --shadow:0 34px 90px -30px rgba(0,0,0,.7);--soft:0 16px 40px -22px rgba(0,0,0,.8);
  --a:.40;--b0:.26;--b1:.30;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--ground);overflow-x:clip}
body{margin:0;font-family:var(--sans);line-height:1.55;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}
:focus-visible{outline:2px solid #a8873c;outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.045em;line-height:1.06;text-wrap:balance}
p{margin:0;text-wrap:pretty}
em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.012em}
.page{container:page/inline-size;position:relative;margin:0 auto}
.fixed-w .page{width:var(--w);border-left:1px solid var(--hair);border-right:1px solid var(--hair)}
main,.foot{position:relative;font-size:var(--t4)}
.sec{position:relative;background:var(--ground);padding:var(--gap) var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px}
.lede{max-width:600px;font-size:var(--tb);color:var(--body)}
.lede.strong{font-weight:600;color:var(--ink)}
.b-kick{font-size:12px;font-weight:700;letter-spacing:0;color:var(--quiet);text-transform:none}

/* ---------- gradient · only behind the hero and the end ---------- */
.flow-layer{position:absolute;inset:0 0 auto 0;height:100svh;overflow:hidden;pointer-events:none;z-index:0}
.flow{position:absolute;inset:-10%;
  background-image:radial-gradient(42% 58% at 20% 30%,rgba(0,135,204,var(--a)) 0%,rgba(0,135,204,0) 70%),radial-gradient(42% 58% at 80% 20%,rgba(238,120,188,var(--a)) 0%,rgba(238,120,188,0) 70%),radial-gradient(42% 58% at 50% 90%,rgba(0,74,33,var(--a)) 0%,rgba(0,74,33,0) 70%);
  background-size:160% 160%;background-repeat:no-repeat;animation:flowA 34s ease-in-out infinite alternate,flowB 47s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
@keyframes flowA{0%{background-position:0% 20%,100% 0%,40% 100%}50%{background-position:60% 60%,30% 40%,100% 30%}100%{background-position:100% 0%,0% 80%,0% 60%}}
@keyframes flowB{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-6%,4%,0) scale(1.08)}}

/* ---------- orb ---------- */
.orb{display:block;border-radius:50%;background:var(--orb);flex:none}
.orb-16{width:16px;height:16px}.orb-28{width:28px;height:28px}
.orb-mark{width:30px;height:30px;background:url(aavi-orb.webp) center/cover}
.orb-mark-s{width:18px;height:18px;background:url(aavi-orb.webp) center/cover}
.orb-hero{position:relative;width:200px;height:200px;background:url(aavi-orb.webp) center/cover;animation:breath 9s ease-in-out infinite}
.orb-end{position:relative;width:120px;height:120px;background:url(aavi-orb.webp) center/cover}
.orb-stage{position:relative;display:flex;align-items:center;justify-content:center}
.bloom{position:absolute;left:50%;top:50%;width:420%;height:420%;transform:translate(-50%,-50%);border-radius:50%;background:var(--orb);filter:blur(110px);opacity:var(--b0);animation:bloom 9s ease-in-out infinite;pointer-events:none}
.end-glow{position:absolute;inset:-90%;border-radius:50%;background:var(--orb);filter:blur(70px);opacity:.45;pointer-events:none}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes bloom{0%,100%{opacity:var(--b0)}50%{opacity:var(--b1)}}

/* ---------- logo ---------- */
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo{display:block;height:22px;width:auto}.logo-w{display:none}
:root.theme-dark .logo-b{display:none}:root.theme-dark .logo-w{display:block}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .logo-b{display:none}:root:not(.theme-light) .logo-w{display:block}}
.logo-foot{display:block;height:14px;width:auto}

/* ---------- 1 · hero ---------- */
.hero{position:relative;z-index:1;overflow:clip;padding-bottom:0}
.top{position:relative;padding:28px var(--pad)}
.hero-col{position:relative;min-height:calc(100svh - 86px - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:0 var(--pad) 40px}
.label{display:inline-flex;align-items:center;gap:8px;font-size:var(--t5);font-weight:600;letter-spacing:-.005em;color:var(--ink);white-space:nowrap}
.label.dark{position:relative;color:#f4f2ee}
.hero h1{max-width:1000px;font-size:var(--t1)}
.sub{max-width:740px;font-size:var(--tb);line-height:1.5;color:var(--ink)}
.hero-brief{position:relative;width:100%;max-width:980px;margin:0 auto;padding:0 var(--pad)}
.hero-brief .brief{box-shadow:var(--shadow)}

/* ---------- the brief · one object everywhere ---------- */
.brief{width:100%;display:flex;flex-direction:column;gap:12px;padding:32px 36px;border-radius:24px;background:var(--card);border:1px solid var(--hair);text-align:left}
.b-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.b-st{font-size:12px;font-weight:600;color:var(--quiet);white-space:nowrap}
.b-title{font:italic 34px/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.b-meta{font-size:13px;color:var(--quiet)}
.b-ch{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.b-ch li{display:grid;grid-template-columns:28px 150px minmax(0,1fr);align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid var(--hair);transition:opacity .5s var(--curve)}
.b-ch li span{font-size:12px;font-weight:700;color:var(--quiet);font-variant-numeric:tabular-nums}
.b-ch li b{font-size:15px;font-weight:700;letter-spacing:-.016em}
.b-ch li em{font:14.5px/1.45 var(--sans);color:var(--body)}
.b-sign{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:14px 18px;border-radius:14px;border:1.5px solid var(--gold);background:var(--goldTint);transition:opacity .6s var(--curve),transform .6s var(--curve)}
.b-sign small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--goldText)}
.b-sign i{font:italic 28px/1.1 var(--serif);color:var(--ink)}
.b-sign span{font-size:12px;color:var(--quiet)}

/* ---------- 2 · problem ---------- */
.prob{padding-top:calc(var(--gap) * 2)}

/* ---------- 3 · acts ---------- */
.acts{position:relative;height:260svh;background:var(--ground)}
.acts-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.acts-text{display:flex;flex-direction:column;gap:28px}
.counter{display:flex;align-items:center;gap:10px;font-size:var(--t5);font-weight:600;color:var(--quiet);white-space:nowrap}
.counter span{transition:color .4s}.counter span.on{color:var(--ink)}.counter i{font-style:normal;opacity:.5}
.act-stack{display:grid}
.act{grid-area:1/1;display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(16px);transition:opacity .6s var(--curve),transform .8s var(--curve)}
.act.on{opacity:1;transform:none}.act.past{transform:translateY(-16px)}
.act-kick{font-size:var(--t5);font-weight:600;color:var(--quiet);white-space:nowrap}
.act h2{font-size:var(--t2)}
.act p{max-width:520px;font-size:var(--tb);color:var(--body)}
.acts-stage{position:relative;height:min(680px,82svh)}
.layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.98);transition:opacity .6s var(--curve),transform .8s var(--curve);pointer-events:none}
.layer.on{opacity:1;transform:none;pointer-events:auto}
.layer .brief{max-height:100%;overflow:hidden;box-shadow:var(--shadow);gap:10px;padding:26px 30px}
.layer .b-ch li{grid-template-columns:24px 128px minmax(0,1fr);padding:8px 0}
.layer .b-ch li em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer .b-title{font-size:30px}
.after .selects figure{aspect-ratio:1/1}
[data-fill] li{opacity:.18}[data-fill] li.done{opacity:1}
[data-sign]{opacity:0;transform:translateY(8px)}[data-sign].on{opacity:1;transform:none}
.day{display:flex;align-items:center;justify-content:center;gap:24px}
.roles{display:flex;flex-direction:column;gap:8px}
.roles button{min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 14px var(--sans);white-space:nowrap;cursor:pointer}
.roles [aria-checked=true]{border-color:transparent;background:var(--fill);color:var(--onFill)}
.phone{width:300px;height:min(600px,78svh);display:flex;flex-direction:column;gap:6px;padding:28px 16px 16px;border-radius:44px;background:var(--card);border:8px solid var(--ink);box-shadow:var(--shadow);text-align:left;overflow:hidden}
.ph-top{display:flex;flex-direction:column;gap:2px;padding:0 6px 10px}
.ph-top b{font:italic 22px/1.1 var(--serif)}
.cs{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px;border-radius:10px;background:var(--ground);transition:opacity .4s}
.cs time{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.cs span{font-size:13.5px;line-height:1.35}
.cs.off{opacity:.25}.cs.price.off span{filter:blur(5px)}
.after{width:100%;display:flex;flex-direction:column;gap:12px;padding:28px 30px;border-radius:24px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow);text-align:left}
.selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.selects figure{aspect-ratio:4/5}
.selects figure.pick{outline:2px solid var(--ink);outline-offset:-2px}
.selects figure>i{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;background:var(--fill);color:var(--onFill)}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600}
.track{height:6px;border-radius:3px;background:var(--off);overflow:hidden}
.fill{height:100%;width:calc(var(--k,0)*100%);border-radius:3px;background:var(--ink)}
.rowline.pay{padding:12px 14px;border-radius:12px;border:1px solid var(--hair);transition:border-color .4s}
.rowline.pay.done{border-color:var(--ink)}

/* ---------- image places · labelled until CJ's images exist ---------- */
.ph{position:relative;margin:0;border-radius:10px;overflow:hidden;background:var(--tile)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.ph.loaded img{opacity:1}
.ph figcaption{position:absolute;left:8px;right:8px;bottom:8px;font-size:12px;font-weight:600;line-height:1.3;color:var(--quiet)}
.ph.loaded figcaption{display:none}

/* ---------- 4 · Aavi ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%;max-width:1180px}
.aavi-card{display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:24px;background:var(--card);border:1px solid var(--vLine);text-align:left}
.aavi-kick{display:inline-flex;align-items:center;gap:8px;font-size:var(--t5);font-weight:600;color:var(--violet)}
.aavi-card h3{font-size:var(--t3);letter-spacing:-.035em}
.aavi-card>p{font-size:var(--tb);color:var(--body)}
.vis{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.vis .ph{aspect-ratio:16/9}
.b-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--hair);font-size:13.5px;font-weight:600}
.b-row.by{background:var(--vTint);border-color:var(--vLine)}
.b-row small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--violet)}
.chat{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.chat .q{align-self:flex-end;max-width:80%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--off);font-size:14.5px;font-weight:600}
.chat .a{display:flex;gap:10px;align-items:flex-start;max-width:90%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--vTint);border:1px solid var(--vLine);font-size:14.5px;line-height:1.45}
.chat .a small{display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--violet)}

/* ---------- 5 · library ---------- */
.lib h2,.for h2{font-size:var(--t2)}
.lib-row{position:relative;width:100%;max-width:1240px;display:grid;grid-template-columns:220px minmax(0,1fr) 280px;gap:16px;align-items:center}
.lib-pick{position:relative;z-index:1}.lib-pick .lc{width:100%;box-shadow:var(--soft)}
.track-x{display:flex;gap:12px;width:max-content;animation:slide 70s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.lc{position:relative;width:220px;flex:none;display:flex;flex-direction:column;gap:3px;padding:10px 10px 14px;border-radius:16px;background:var(--card);border:1px solid var(--hair);text-align:left}
.lc.adding{border:1.5px solid var(--ink)}
.lc .ph{aspect-ratio:4/3;margin-bottom:8px}
.lc small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--quiet)}
.lc b{font-size:15px;letter-spacing:-.016em}
.lc .d{font-size:12.5px;line-height:1.4;color:var(--body)}
.lc .tag{align-self:flex-start;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:0;color:var(--violet)}
.lc .add{position:absolute;top:8px;left:8px;height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:13px;background:var(--fill);color:var(--onFill);font-size:12px;font-weight:600}
.lib-brief{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--soft);text-align:left}
.lb-t{font-size:14px}
.lb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;background:var(--ground);font-size:13.5px;font-weight:600}
.lb-row small{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--quiet)}
.lb-row.land{outline:1.5px solid var(--ink);outline-offset:-1.5px;animation:land 7s var(--curve) infinite}
@keyframes land{0%,30%{opacity:0;transform:translateY(-10px)}40%,90%{opacity:1;transform:none}100%{opacity:0}}

/* ---------- 6 · built for ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:1100px}
.cards div{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:20px;background:var(--card);border:1px solid var(--hair);text-align:left}
.cards b{font-size:var(--t4);letter-spacing:-.02em}
.cards span{font-size:16px;line-height:1.45;color:var(--body)}

/* ---------- 7 · letter ---------- */
.letter{gap:28px}
.letter .lead{max-width:980px;font:italic var(--t2l)/1.12 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.letter .body{display:flex;flex-direction:column;gap:14px;max-width:620px;text-align:left}
.letter .body p{font-size:var(--tb);color:var(--body)}
.letter .sign{display:flex;flex-direction:column;gap:2px}
.letter .sign i{font:italic var(--t3)/1.1 var(--serif);white-space:nowrap}
.letter .sign small{font-size:var(--t5);color:var(--quiet)}

/* ---------- 8 · end ---------- */
.end{position:relative;overflow:clip;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px;padding:calc(var(--gap) * 1.5) var(--pad);background:#100f0d;color:#f4f2ee;margin-top:0}
.end h2{position:relative;font-size:var(--t1);color:#f4f2ee}
.on-black{--card:#fdfdfc;--ink:#1a1917;--line:rgba(26,25,23,.16);--fill:#1a1917;--onFill:#fdfdfc}
:root.theme-dark .on-black{--card:#1b1a17;--ink:#f4f2ee;--line:rgba(255,255,255,.18);--fill:#f4f2ee;--onFill:#1a1917}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .on-black{--card:#1b1a17;--ink:#f4f2ee;--line:rgba(255,255,255,.18);--fill:#f4f2ee;--onFill:#1a1917}}
.on-black .consent,.on-black .status-line,.on-black .thanks,.on-black .msg,.on-black .sug{color:#f4f2ee}
.on-black .thanks i{background:#f4f2ee}
.end .share{background:transparent;color:#f4f2ee;border-color:rgba(255,255,255,.22)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px var(--pad) 32px;background:#100f0d;color:#f4f2ee;border-top:1px solid rgba(255,255,255,.12);font-size:var(--t5)}
.foot nav{display:flex;gap:20px}.foot a{text-decoration:none}
.mark.small{gap:8px}

/* ---------- form ---------- */
.join-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:560px}
.join{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;margin:0}
.pill{display:flex;align-items:center;gap:6px;width:100%;padding:5px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--soft);transition:transform .45s var(--curve),box-shadow .45s var(--curve)}
.on-grad .pill,.on-black .pill{border-color:transparent;box-shadow:var(--shadow)}
.pill:focus-within{transform:scale(1.01)}
.join.bad-email .pill{border-color:var(--red)}
.pill input{flex:1;min-width:0;height:48px;padding:0 0 0 18px;border:0;border-radius:24px;background:transparent;color:var(--ink);font:16px/1 var(--sans);letter-spacing:-.014em;outline:none}
.btn{flex:none;min-height:48px;padding:0 22px;border-radius:24px;border:0;background:var(--fill);color:var(--onFill);font:600 15px/1 var(--sans);letter-spacing:-.014em;white-space:nowrap;cursor:pointer}
.btn.line{border:1px solid var(--line);background:transparent;color:var(--ink)}
.join.sending .btn{opacity:.85;cursor:progress}
.sug{align-self:center;min-height:32px;padding:0 6px;border:0;background:transparent;font:14px var(--sans);color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line)}
.sug strong{font-weight:600}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.consent{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;font-size:var(--t5);line-height:1.45;color:var(--ink);cursor:pointer;text-align:left}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.box{flex:none;width:20px;height:20px;border-radius:6px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center}
.consent input:checked+.box{background:var(--fill);border-color:var(--fill)}
.consent input:checked+.box::after{content:'';width:9px;height:5px;border:solid var(--onFill);border-width:0 0 1.8px 1.8px;transform:translateY(-1px) rotate(-45deg)}
.consent input:focus-visible+.box{outline:2px solid #a8873c;outline-offset:2px}
.join.bad-consent .box{border-color:var(--red)}
.msg{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.msg::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;background:var(--red)}
.status-line{font-size:var(--t5);text-align:center}
.thanks{display:flex;align-items:baseline;justify-content:center;gap:9px;font-size:var(--t4);font-weight:600;letter-spacing:-.016em;text-align:center;overflow-wrap:anywhere}
.thanks i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink);transform:translateY(-2px)}
.spread{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.quiet{font-size:12.5px;color:var(--quiet)}
.qs{display:flex;flex-direction:column;gap:8px}
.seg2{display:flex;gap:2px;padding:3px;border-radius:14px;background:var(--off)}
.seg2 button{flex:1;min-height:40px;padding:0 6px;border-radius:11px;border:1.5px solid transparent;background:transparent;color:var(--body);font:600 13px var(--sans);cursor:pointer}
.seg2 [aria-checked=true]{border-color:var(--ink);background:var(--card);color:var(--ink)}
.extra{display:grid;gap:10px;margin-top:4px}
.extra label{display:flex;flex-direction:column;gap:6px}
.extra input{height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:16px var(--sans);outline:none}
.extra .btn{width:100%}
.saved{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--body)}
.saved i{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}

/* ---------- phone bar ---------- */
.bar-host{position:sticky;bottom:0;height:0;z-index:30;display:none}
.bar{position:absolute;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;padding:6px 6px 6px 10px;border-radius:28px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow);transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .5s var(--curve),opacity .3s}
.bar.show{transform:none;opacity:1;pointer-events:auto}
.bar.open{padding:12px 12px 6px;border-radius:24px}
.bar-row{display:flex;align-items:center;gap:10px;min-height:44px}
.bar-txt{flex:1;min-width:0;font-size:15px;font-weight:600}
.bar .x{width:44px;height:44px;border-radius:22px;border:0;background:transparent;color:var(--body);font-size:22px;cursor:pointer}
.bar .join-slot{max-width:none}

/* ---------- reveal ---------- */
.js [data-reveal]{transition:opacity 1s var(--curve),transform 1.2s var(--curve)}
.js [data-reveal]:not(.seen){opacity:0;transform:translateY(32px)}

/* ---------- iPad (by the page's own width) ---------- */
@container page (max-width:1159px){
  main,.foot,.bar-host{--t1:64px;--t2:34px;--t2l:40px;--t3:24px;--t4:17px;--tb:17px;--gap:72px}
  .orb-hero{width:180px;height:180px}
  .acts{height:auto}
  .acts-sticky{position:relative;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:24px;padding-top:var(--gap);padding-bottom:var(--gap)}
  .acts-text,.act-stack,.acts-stage{display:contents}
  .counter{display:none}
  .act{opacity:1;transform:none;position:relative;width:100%;margin-top:calc(var(--gap) * .5);text-align:center;align-items:stretch}
  .act h2{line-height:1.1}
  .act[data-act="0"]{margin-top:0}
  .act p{margin:0 auto}
  .layer{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
  .act[data-act="0"]{order:1}.layer[data-layer="0"]{order:2}.act[data-act="1"]{order:3}.layer[data-layer="1"]{order:4}.act[data-act="2"]{order:5}.layer[data-layer="2"]{order:6}
  .layer .brief{max-height:none}
  .layer .b-ch li em{white-space:normal}
  .after .selects figure{aspect-ratio:4/5}
  .lib-row{grid-template-columns:minmax(0,1fr)}
  .lib-pick{width:240px;margin:0 auto}
  .lib-brief{max-width:420px;margin:0 auto;width:100%}
}
/* ---------- phone ---------- */
@container page (max-width:743px){
  main,.foot,.bar-host{--t1:40px;--t2:28px;--t2l:32px;--t3:22px;--t4:16px;--tb:16px;--t5:13px;--pad:18px;--gap:48px}
  .top{padding:20px var(--pad)}
  .logo{height:19px}.orb-mark{width:26px;height:26px}
  .hero-col{gap:18px;min-height:auto;padding:24px var(--pad) 32px}
  .orb-hero{width:120px;height:120px}
  .bloom{filter:blur(60px)}
  .pill input{padding-left:14px}.btn{padding:0 16px}
  .brief{padding:20px 18px;border-radius:20px}
  .b-title{font-size:24px}
  .b-ch li{grid-template-columns:24px minmax(0,1fr);row-gap:2px}
  .b-ch li em{grid-column:2}
  .prob{padding-top:calc(var(--gap) * 2)}
  .day{flex-direction:column;gap:12px}
  .roles{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .phone{width:min(300px,100%);height:520px}
  .after{padding:18px 16px}
  .duo{grid-template-columns:minmax(0,1fr)}
  .aavi-card{padding:22px 20px}
  .lc{width:180px}
  .lib-pick{width:220px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .cards div{padding:18px}
  .cards span{font-size:15px}
  .orb-end{width:96px;height:96px}
  .foot{padding:20px var(--pad) 28px}
  .foot a{min-height:44px;display:inline-flex;align-items:center}
  .bar-host{display:block}
}

/* ---------- still ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]:not(.seen){opacity:1;transform:none}
  .acts{height:auto}
  .acts-sticky{position:relative;height:auto;grid-template-columns:minmax(0,1fr)}
  .act-stack{display:flex;flex-direction:column;gap:32px}.act{opacity:1;transform:none}
  .acts-stage{height:auto;display:flex;flex-direction:column;gap:20px}
  .layer{position:relative;opacity:1;transform:none}
  [data-fill] li{opacity:1}[data-sign]{opacity:1;transform:none}
  .track-x{flex-wrap:wrap;width:auto;justify-content:center}.lc.dup{display:none}
  .lb-row.land{opacity:1}
}
html:not(.js) .acts .layer:first-child{opacity:1}
html:not(.js) .act{opacity:1;transform:none;position:relative}
html:not(.js) .bar-host{display:none}
@media print{.flow-layer,.bar-host,.bloom,.end-glow,.join-slot{display:none!important}body,.end,.foot{background:#fff!important;color:#000!important}}

/* privacy */
.priv{display:flex;flex-direction:column;gap:88px;padding:28px var(--pad) 160px;font-size:var(--t4)}
.priv .mark{align-self:flex-start}
.priv article{display:flex;flex-direction:column;gap:40px;width:100%;max-width:640px;margin:0 auto}
.priv h1{font-size:var(--t2)}
.priv h2{font-size:var(--t4);letter-spacing:-.018em;line-height:1.3}
.priv section{display:flex;flex-direction:column;gap:6px}
.priv p{color:var(--body)}
.privacy .foot{background:var(--ground);color:var(--ink);border-top-color:var(--hair)}
.privacy .foot .logo-foot{display:none}
@container page (max-width:743px){.priv{gap:56px;padding:22px var(--pad) 96px}}

/* ---------- 2 · problem, then the gathering ---------- */
.prob2{position:relative;background:var(--ground)}
.brief.mini{box-shadow:var(--shadow);padding:24px 28px}
.brief.mini .b-title{font-size:28px}
/* phone: a tight wrapping row, the gathering becomes a crossfade */




/* ---------- v15 · new elements and finish ---------- */
/* 10a · the client's signature is drawn once act 1 completes */
.b-sign .sig{display:block;width:180px;height:44px;color:var(--ink)}
.b-sign .sig path{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);transition:stroke-dashoffset 1.4s cubic-bezier(.45,.05,.25,1) .2s}
[data-sign].on .sig path{stroke-dashoffset:0}
.hero-brief .b-sign .sig path,.acts.static .b-sign .sig path{stroke-dashoffset:0;transition:none}
/* 10b · a quiet sheen on Aavi's status, chapter 05 types once */
.b-st.shimmer{display:inline-flex;align-items:center;gap:6px;color:var(--violet);background:linear-gradient(100deg,var(--violet) 0%,var(--violet) 40%,var(--vLine) 50%,var(--violet) 60%,var(--violet) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 3.6s ease-in-out infinite}
.orb-12{width:12px;height:12px;-webkit-text-fill-color:initial}
@keyframes sheen{0%{background-position:100% 0}60%,100%{background-position:0 0}}
.caret-once::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--violet);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* 10c · grain against banding, 2–3 % */
.grain{position:absolute;inset:0;background:url(grain.png);background-size:160px;opacity:.025;mix-blend-mode:overlay;pointer-events:none}
.end .grain{opacity:.03;mix-blend-mode:soft-light}
/* 10d · paper to black over ~200 px */
.to-black{height:200px;background:linear-gradient(var(--ground),#100f0d)}
/* 10e · typography */
.cs time,.cs.price span,.rowline span,[data-pay-txt],.counter{font-variant-numeric:tabular-nums}
.letter .lead{hanging-punctuation:first last}
.letter .body p{hanging-punctuation:first}
h1,h2,h3,.letter .lead{text-wrap:balance}
p,.cards span,.lc .d,.chat .a,.qa p{text-wrap:pretty}
/* 9b · questions */
.faq h2{font-size:var(--t2)}
.qa{width:100%;max-width:760px;text-align:left;border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:18px 0;font-size:var(--t4);font-weight:600;letter-spacing:-.016em;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:16px;height:16px;transition:transform .4s var(--curve)}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--ink);border-radius:1px}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i{transform:rotate(45deg)}
.qa p{padding:0 40px 22px 0;font-size:var(--tb);color:var(--body)}
/* 9c · proof */
.proof{max-width:640px;font-size:var(--t5);font-weight:600;color:var(--quiet)}
/* 10f · footer details */
.foot{gap:12px 24px}
.legal{font-size:var(--t5);color:rgba(244,242,238,.7)}
.foot nav{flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.b-sign .sig path{stroke-dashoffset:0!important}.b-st.shimmer{animation:none;-webkit-text-fill-color:var(--violet)}.caret-once::after{display:none}}

/* the letter is signed with a face */
.letter .sign{flex-direction:row;align-items:center;gap:16px;text-align:left}
.sign-face{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;background:var(--tile);box-shadow:0 0 0 1px var(--hair)}
.sign-name{display:flex;flex-direction:column;gap:2px}
@container page (max-width:743px){.sign-face{width:52px;height:52px}.letter .sign{gap:14px}}

/* ---------- 12 · the brief under the hero ---------- */
/* a · one background: the gradient fades into the paper over ~300 px, no hard edge behind the card */
.flow-layer{height:calc(100svh + 160px)}
.flow{-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 300px),transparent 100%);mask-image:linear-gradient(#000 0,#000 calc(100% - 300px),transparent 100%)}
.hero .grain{-webkit-mask-image:linear-gradient(#000 calc(100% - 300px),transparent);mask-image:linear-gradient(#000 calc(100% - 300px),transparent)}
/* b · the peek: the card's top sits at 100svh − 140 px on every screen */
.hero{display:block}
.hero-col{min-height:calc(100svh - 140px - 86px);padding-bottom:40px}
.hero-brief{max-width:980px;perspective:1400px}
/* c · tilts back, straightens over the first 300 px */
.hb-tilt{transform-origin:50% 0;transform:rotateX(calc(8deg * (1 - var(--t,0)))) scale(calc(.94 + .06 * var(--t,0)));will-change:transform}
/* d · three mood images on top */
.brief.hb{gap:12px;padding:22px 26px 26px}
.hb-moods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 2px}
.hb-moods .ph{aspect-ratio:3/2;border-radius:12px}
/* e · signs of life */
.brief.hb .b-head{align-items:center}
.aavi-st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--violet);background:none;-webkit-text-fill-color:currentColor;animation:none}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
.hb-shared{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--quiet);white-space:nowrap}
.avs{display:inline-flex}
.avs i{width:24px;height:24px;margin-left:-6px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;color:var(--ink);background:var(--tile);box-shadow:0 0 0 2px var(--card)}
.avs i:first-child{margin-left:0}
.live{width:7px;height:7px;border-radius:50%;background:#3f9a5c;box-shadow:0 0 0 3px rgba(63,154,92,.16)}
/* f · one card width, chapter column ~160 px, lighter numbers */
.brief.hb .b-ch li{grid-template-columns:28px 160px minmax(0,1fr)}
.brief .b-ch li span{color:var(--quiet);opacity:.6}
@container page (max-width:743px){
  .brief.hb{padding:16px 16px 20px}
  .hb-moods{gap:6px}
  .brief.hb .b-ch li{grid-template-columns:24px minmax(0,1fr)}
  .hb-shared .avs{display:none}
}
@media (prefers-reduced-motion:reduce){.hb-tilt{transform:none!important}.pulse{animation:none}}

/* b · keep the peek on shorter screens: the hero tightens so the card can sit at 100svh − 140 px */
@media (max-height:900px){.orb-hero{width:150px;height:150px}.hero-col{gap:18px}}
@media (max-height:760px){.orb-hero{width:110px;height:110px}.hero-col{gap:14px;padding-bottom:24px}.top{padding-top:18px;padding-bottom:18px}}

/* ---------- 14 · the Aavi cards come alive · once, left first, right 0.6 s later ---------- */
.aavi-card{min-height:0}
.vis,.chat{margin-top:auto}
/* See it */
.ph.dev img{filter:blur(var(--blur,0px)) contrast(var(--grit,1));transform:scale(var(--zs,1));transition:filter 2.5s cubic-bezier(.2,.7,.2,1),transform 2.5s cubic-bezier(.2,.7,.2,1)}
.ph.dev::after{content:'';position:absolute;inset:0;background:url(grain.png);background-size:120px;mix-blend-mode:overlay;opacity:var(--noise,0);transition:opacity 2.5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ph.dev figcaption{z-index:1}
.undo{position:absolute;right:8px;bottom:8px;z-index:2;height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 12.5px var(--sans);opacity:0;transform:translateY(4px);transition:opacity .4s var(--curve),transform .4s var(--curve);pointer-events:none}
.undo.on{opacity:1;transform:none}
[data-by]{opacity:1;transition:opacity .5s var(--curve)}
.w{display:inline;opacity:1;transition:opacity .25s var(--curve)}
.w.off{opacity:0}
/* Ask */
.chat{display:flex;flex-direction:column;gap:10px}
.thread{display:flex;flex-direction:column;gap:8px}
.chat .q,.chat .a{transition:opacity .45s var(--curve),transform .45s var(--curve)}
.chat .hide{opacity:0;transform:translateY(10px)}
.chat .gone{visibility:hidden}
.a-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.a-state{font-size:12px;font-weight:700;letter-spacing:0;color:var(--violet);display:none}
.a.writing .a-state{display:block}
.a.thinking .a-state{display:block;background:linear-gradient(100deg,var(--violet) 0%,var(--violet) 40%,var(--vLine) 50%,var(--violet) 60%,var(--violet) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 1.2s linear infinite}
.a.thinking .a-txt,.a.thinking [data-src]{display:none}
.a.thinking > .orb{animation:pulse 1.2s ease-in-out infinite}
.a.writing .a-txt::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--violet);animation:blink 1s steps(1) infinite}
.chat [data-src]{transition:opacity .5s var(--curve)}
.chat .pending [data-src]{opacity:0}
.ask-field{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 6px 6px 14px;border-radius:22px;background:var(--ground);border:1px solid var(--hair)}
.ask-in{flex:1;min-width:0;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ask-in .ph-txt{color:var(--quiet)}
.ask-in.typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-.15em;background:var(--ink);animation:blink 1s steps(1) infinite}
.ask-send{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--fill);color:var(--onFill);font-size:15px;font-weight:700;transition:transform .2s var(--curve)}
.ask-send.press{transform:scale(.88)}
@media (prefers-reduced-motion:reduce){.ph.dev img{filter:none!important;transform:none!important}.ph.dev::after{opacity:0!important}.chat .hide{opacity:1;transform:none}}
.b-row .b-kick{white-space:nowrap}
.thread{min-height:0}
.letter .body p.lines{line-height:1.6}

/* ---------- 16 · Aavi (assistant) and AI images (optional) are kept apart ---------- */
.brief.mini-ch{padding:16px;gap:8px;box-shadow:none;border-radius:18px}
.b-row.ghost{opacity:.55;border-style:dashed}
.undo-row{display:flex;justify-content:flex-end;min-height:30px}
.undo-row .undo{position:static}
/* AI images · neutral: no orb, no violet */
.aiimg{padding-top:calc(var(--gap) * .6)}
.ai-wrap{width:100%;max-width:1100px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;text-align:left}
.ai-copy{display:flex;flex-direction:column;gap:14px}
.ai-copy h2{font-size:var(--t2)}
.ai-copy p{font-size:var(--tb);color:var(--body)}
.ai-vis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:14px;border-radius:22px;background:var(--card);border:1px solid var(--hair)}
.mood6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start}
.mood6 .ph{aspect-ratio:1}
.mood6 .ph.ai figcaption,.ai-vis .dev figcaption{color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;font-size:12px}
.mood6 .ph.ai{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ai-vis .ph.dev{aspect-ratio:auto;height:100%;min-height:200px}
@container page (max-width:743px){.ai-wrap{grid-template-columns:minmax(0,1fr);gap:24px}.ai-vis{grid-template-columns:minmax(0,1fr)}.ai-vis .ph.dev{min-height:0;aspect-ratio:4/3}}
.chat .a{height:auto;align-items:flex-start}
.chat .a .a-body{flex:1}

/* ---------- v16 · library as a still mosaic ---------- */
.mosaic{position:relative;width:100%;max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:stretch;text-align:left}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.mc{position:relative;display:flex;flex-direction:column;gap:3px;padding:10px 10px 14px;border-radius:16px;background:var(--card);border:1px solid var(--hair);transition:transform .5s var(--curve),box-shadow .5s var(--curve)}
.mc .ph{aspect-ratio:4/3;margin-bottom:8px;border-radius:10px}
.mc small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--quiet)}
.mc b{font-size:15px;letter-spacing:-.012em}
.mc .d{font-size:12.5px;line-height:1.4;color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-tag{position:absolute;top:8px;left:8px;z-index:1;height:20px;display:inline-flex;align-items:center;padding:0 7px;border-radius:6px;background:var(--card);color:var(--violet);font-size:12px;font-weight:700;letter-spacing:0}
.mc .add{position:absolute;right:8px;bottom:8px;z-index:1;height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:13px;background:var(--fill);color:var(--onFill);font-size:12px;font-weight:600;transition:transform .18s var(--curve)}
.mc .add.press{transform:scale(.9)}
.mc.pick{border-color:var(--ink)}
.mc.pick.lift{transform:translateY(-6px);box-shadow:var(--shadow)}
.mbrief{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--soft)}
.mbrief .lb-t{font-size:14px;margin-bottom:4px}
.mbrief .lb-row.land{transition:opacity .5s var(--curve),transform .5s var(--curve)}
.mosaic.pre .lb-row.land{opacity:0;transform:translateY(-6px)}
.flyer{position:absolute;left:0;top:0;z-index:3;height:30px;display:flex;align-items:center;padding:0 12px;border-radius:10px;background:var(--card);border:1px solid var(--ink);box-shadow:var(--shadow);font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .3s var(--curve)}
@container page (max-width:1159px){.mosaic{grid-template-columns:minmax(0,1fr)}.mbrief{max-width:440px;width:100%;justify-self:center}}
@container page (max-width:743px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mc{padding:8px 8px 12px}.mc b{font-size:14px}.mc .d{font-size:12px}}
@media (prefers-reduced-motion:reduce){.mosaic.pre .lb-row.land{opacity:1;transform:none}.flyer{display:none}}
/* ---------- v16 · the end rises out of the paper ---------- */
.end{border-radius:40px 40px 0 0}
@container page (max-width:743px){.end{border-radius:28px 28px 0 0}}
/* ---------- v16 · questions: one open at a time, plus turns to a cross ---------- */
.qa details[open] summary i{transform:rotate(45deg)}

/* ---------- v17 · phone, designed for itself ---------- */
.b-brand{font-size:12px;font-weight:700;letter-spacing:0;color:var(--quiet);margin-bottom:-6px}
.b-title{text-wrap:balance}
.more-ch,.sub-phone{display:none}
html,body{background:#100f0d}
main{background:var(--ground)}
.foot{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.pill input,.extra input{font-size:16px}
@container page (max-width:743px){
  .sub-wide{display:none}.sub-phone{display:inline}
  .hero-col{min-height:0;padding-bottom:28px}
  /* a · label above text, full width, max two lines */
  .b-ch li,.brief.hb .b-ch li,.layer .b-ch li{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px 0}
  .b-ch li span{display:none}
  .b-ch li b{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--quiet)}
  .b-ch li em,.layer .b-ch li em{white-space:normal;font-size:14.5px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .b-row,.lb-row{flex-wrap:wrap}
  .b-row .b-kick{flex-basis:100%}
  /* b · act 1: chapters 01–04, then "+ 4 more chapters", then the signature */
  [data-fill] li:nth-child(n+5){display:none}
  .more-ch{display:block;padding:10px 0;border-top:1px solid var(--hair);font-size:13px;font-weight:600;color:var(--quiet)}
  [data-fill] li{opacity:1}
  /* c · hero card: title, images and first row, then it fades out */
  .hero-brief{max-height:420px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .hb-tilt{transform:none!important}
  .brief.hb .b-head .hb-shared{display:none}
  /* h · no dead area after "Nobody has the full picture" */
  
  .aavi-card{min-height:0}.chat{margin-top:12px}.vis{margin-top:12px}
  /* f · library: 2 columns, panel below, nothing clipped */
  .mosaic{grid-template-columns:minmax(0,1fr)}
  .mbrief{max-width:none}
  /* g · AI images: 2 × 2, no extra large image */
  .ai-vis{grid-template-columns:minmax(0,1fr);padding:10px}
  .mood6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mood6 .ph:nth-child(n+5){display:none}
  .ai-vis .ph.dev{display:none}
  /* j · the dark card rises */
  .end{border-radius:28px 28px 0 0}
  /* k · targets */
  .btn,.seg2 button,.qa summary,.roles button{min-height:44px}
  .bar{bottom:calc(8px + env(safe-area-inset-bottom))}
}

/* ---------- 19 · the hero opening: focus pulls in once on load (≤ 1.4 s) ---------- */
.js .orb-hero{animation:focusIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes focusIn{0%{filter:blur(24px);transform:scale(.96)}70%{filter:blur(2px)}100%{filter:blur(0);transform:scale(1)}}
.js .bloom{animation:fadeIn .8s ease-out .6s both}
@keyframes fadeIn{from{opacity:0}}
.js [data-open]{animation:openUp .5s cubic-bezier(.2,.8,.2,1) both}
.js [data-open="1"]{animation-delay:.9s}
.js [data-open="2"]{animation-delay:.98s}
.js [data-open="3"]{animation-delay:1.06s}
.js [data-open="4"]{animation-delay:1.14s;animation-duration:.26s}
@keyframes openUp{from{opacity:0;transform:translateY(6px)}}
/* glass pill with a 1 px border in the orb's three colours, shimmering once */
.label.glass{position:relative;padding:6px 12px;border-radius:999px;font-size:13px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#1a1917}
.label.glass::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(100deg,#0087CC,#EE78BC,#004A21,#0087CC);background-size:300% 100%;background-position:0 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.js .label.glass::before{animation:rim 1.2s ease-in-out .9s both}
@keyframes rim{from{background-position:100% 0}to{background-position:0 0}}
:root.theme-dark .label.glass{background:rgba(26,25,23,.55);color:#f4f2ee}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .label.glass{background:rgba(26,25,23,.55);color:#f4f2ee}}
@media (prefers-reduced-motion:reduce){.js .orb-hero,.js .bloom,.js [data-open],.js .label.glass::before{animation:none!important;filter:none;opacity:1;transform:none}}
.end-line{position:relative;font-size:var(--tb);color:rgba(244,242,238,.82)}

/* ---------- 20 · the orb as glass · colours, still ribbed glass, light (replaces 13 and 19a–b) ---------- */
.gorb-defs{position:absolute;width:0;height:0;overflow:hidden}
.gorb{position:relative;display:block;flex:none;border-radius:50%;perspective:800px}
.gorb.orb-hero,.gorb.orb-end{background:none;animation:none}
.js .gorb.orb-hero{animation:none}
.g-tilt{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:#0a78b8;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
/* 1 · colours: three soft patches that circle each other */
.g-col{position:absolute;inset:-12%;transform:translateX(var(--sx,0px))}
.g-boost,.g-spin{position:absolute;inset:0}
.g-spin{animation:gspin 24s linear infinite}
.g-spin i{position:absolute;border-radius:50%}
.g-spin i:nth-child(1){left:-6%;top:6%;width:78%;height:88%;background:radial-gradient(closest-side,#0087CC 0%,#0087CC 55%,rgba(0,135,204,0) 100%)}
.g-spin i:nth-child(2){right:-4%;top:-6%;width:66%;height:64%;background:radial-gradient(closest-side,#EE78BC 0%,#EE78BC 45%,rgba(238,120,188,0) 100%)}
.g-spin i:nth-child(3){left:24%;bottom:-10%;width:72%;height:66%;background:radial-gradient(closest-side,#004A21 0%,#004A21 50%,rgba(0,74,33,0) 100%)}
@keyframes gspin{to{transform:rotate(360deg)}}
.g-boost.go{animation:gspin 1.6s cubic-bezier(.45,.05,.25,1) 1}
/* 2 · ribbed glass that stands still · refraction on desktop, ribbed mask everywhere */
@media (hover:hover) and (pointer:fine){.g-col{filter:url(#ribs)}}
.g-rib{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(255,255,255,.16) 38%,rgba(255,255,255,.04) 62%,rgba(0,0,0,.14) 100%);background-size:calc(100% / 14) 100%;mix-blend-mode:soft-light}
/* 3 · light: a soft bright reflection that follows the pointer */
.g-light{position:absolute;inset:0;background:radial-gradient(circle at var(--lx,34%) var(--ly,26%),rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 22%,rgba(255,255,255,0) 46%);mix-blend-mode:screen;transition:background-position .7s;pointer-events:none}
.g-sweep{position:absolute;inset:-10%;background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 62%);transform:translateX(-120%);opacity:0;mix-blend-mode:screen}
.g-sweep.go{animation:gsweep 1.4s cubic-bezier(.4,0,.2,1) 1}
@keyframes gsweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}
/* a · opening: focus pulls in, the ribs sharpen last */
.gorb.pre .g-tilt{filter:blur(24px);transform:scale(.96)}
.gorb.pre .g-rib{opacity:0}
.gorb.opening .g-tilt{animation:gfocus .9s cubic-bezier(.2,.8,.2,1) both}
.gorb.opening .g-rib{animation:gribs .45s ease-out .5s both}
@keyframes gfocus{0%{filter:blur(24px);transform:scale(.96)}75%{filter:blur(1.5px)}100%{filter:blur(0);transform:scale(1)}}
@keyframes gribs{from{opacity:0}to{opacity:1}}
/* pause everything off screen */
.gorb.off .g-spin,.gorb.off .g-sweep{animation-play-state:paused}
/* e · fades as you scroll past the hero */
[data-orb-stage]{opacity:var(--of,1)}
/* g · reduced motion: the still image, sharp, no sweep */
@media (prefers-reduced-motion:reduce){
  .g-tilt{background:url(aavi-orb.webp) center/cover;transform:none!important;filter:none!important;animation:none!important}
  .g-col,.g-rib,.g-sweep{display:none}
  [data-orb-stage]{opacity:1}
}
/* ?still=1 · side-by-side with the logo PNG */
.still-cmp{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--quiet)}
.still-cmp img{border-radius:50%}

/* ---------- v18 · the orb looks like the logo ---------- */
.g-tilt{background:#0a86c8}
.g-col{inset:-6%}
.g-spin{background:radial-gradient(36% 40% at 81% 30%,#f47fc4 0%,#ee78bc 34%,rgba(238,120,188,.45) 64%,rgba(238,120,188,0) 90%),radial-gradient(52% 46% at 62% 88%,#004a21 0%,#004a21 42%,rgba(0,74,33,.55) 68%,rgba(0,74,33,0) 94%),radial-gradient(50% 50% at 18% 88%,rgba(0,80,110,.35),rgba(0,80,110,0) 80%),linear-gradient(#0087CC,#0087CC);animation:gbreathe 12s ease-in-out infinite;transform-origin:50% 50%}
@keyframes gbreathe{0%{transform:rotate(0deg)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}100%{transform:rotate(0deg)}}
.g-boost.go{animation:gspin 1.6s cubic-bezier(.45,.05,.25,1) 1}
.g-rib{background:linear-gradient(90deg,rgba(0,0,0,.05) 0%,rgba(255,255,255,.07) 45%,rgba(255,255,255,0) 70%,rgba(0,0,0,.04) 100%);background-size:calc(100% / 24) 100%;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 55%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 55%)}
.g-light{background:radial-gradient(circle at var(--lx,34%) var(--ly,26%),rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 24%,rgba(255,255,255,0) 46%)}
.g-sweep{background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 60%)}
/* 4 · hero gradient back to v14 strength */
:root{--a:.42}
/* ---------- v18 · phone ---------- */
@container page (max-width:743px){
  .phone{width:100%;height:auto;border:0;border-radius:20px;padding:16px;box-shadow:var(--soft)}
  .selects{gap:6px}.selects figure{aspect-ratio:1/1}
  .selects figure:nth-child(n+7){display:none}
  .mgrid .mc:nth-child(3),.mgrid .mc:nth-child(4),.mgrid .mc:nth-child(6),.mgrid .mc:nth-child(7){display:none}
  .mini-ch .b-row{flex-direction:column;align-items:flex-start;gap:2px}
  .mini-ch .b-row .b-kick{width:auto;flex:none}
  .aavi-card,.chat,.thread{height:auto;min-height:0}
}

/* fix · mini-ch rows stack on phone (grid → flex) */
@container page (max-width:743px){.mini-ch .b-row{display:flex}}
/* ---------- 21 · Built for, the letter and Questions as three distinct parts ---------- */
/* paper → tinted panel → paper → dark card */
.for h2,.faq h2{font-size:var(--t2)}
.for-cards{gap:16px;max-width:1180px}
.for-cards > div{padding:12px 12px 24px;gap:8px;border-radius:24px}
.for-cards .ph{aspect-ratio:4/5;border-radius:16px;margin-bottom:10px}
.for-cards b{font-size:28px;line-height:1.1;letter-spacing:-.03em;padding:0 8px}
.for-cards span{font-size:var(--t4);padding:0 8px}
.for-note{font-size:var(--t5);font-weight:400;color:var(--quiet)}
.letter{--panel:#ECE7DE;background:radial-gradient(60% 80% at 12% 10%,rgba(0,135,204,.05),transparent 70%),radial-gradient(50% 70% at 92% 20%,rgba(238,120,188,.06),transparent 70%),radial-gradient(60% 70% at 60% 110%,rgba(0,74,33,.05),transparent 70%),var(--panel);padding-top:max(120px,var(--gap));padding-bottom:max(120px,var(--gap))}
:root.theme-dark .letter{--panel:#1F1E1B}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .letter{--panel:#1F1E1B}}
.l-grid{width:100%;max-width:1040px;display:grid;grid-template-columns:360px minmax(0,560px);gap:80px;justify-content:center;align-items:start;text-align:left}
.l-side{display:flex;flex-direction:column;gap:14px}
.l-face{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:6px;filter:grayscale(1) contrast(1.04);background:var(--tile)}
.l-sig{font-size:var(--t5);color:var(--quiet)}
.l-sig i{font:italic 22px/1 var(--serif);color:var(--ink)}
.l-main{display:flex;flex-direction:column;gap:28px}
.letter .l-main .lead{max-width:none;font-size:var(--t2l);text-align:left}
.letter .l-main .body{max-width:none}
.faq{align-items:stretch}
.f-grid{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;text-align:left}
.f-stick{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.f-more{font-size:var(--tb);color:var(--body)}
.f-more a{color:var(--ink);font-weight:600}
.faq .qa{max-width:none;border-top-color:color-mix(in oklab,var(--hair) 60%,transparent)}
.faq .qa details{border-bottom-color:color-mix(in oklab,var(--hair) 60%,transparent)}
.faq .qa summary{min-height:64px;font-size:19px}
.faq .qa p{font-size:var(--tb)}
@container page (max-width:1159px){
  .l-grid{grid-template-columns:260px minmax(0,1fr);gap:48px}
  .f-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .f-stick{position:static}
}
@container page (max-width:743px){
  .for-cards{grid-template-columns:minmax(0,1fr)}
  .for-cards b{font-size:24px}
  .letter{padding-top:var(--gap);padding-bottom:var(--gap)}
  .l-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .l-side{flex-direction:row;align-items:center;gap:14px}
  .l-face{width:96px;height:96px;aspect-ratio:1;border-radius:50%;flex:none}
  .faq .qa summary{font-size:17px}
}
.g-light{background:radial-gradient(circle at var(--lx,34%) var(--ly,26%),rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 40%)}

/* ---------- 22 · Ask Aavi · a live conversation, fixed height ---------- */
.chat .thread{height:520px;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 22%);mask-image:linear-gradient(transparent 0,#000 22%)}
.t-in{display:flex;flex-direction:column;gap:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.t-in.fade{opacity:0}
.t-in .msg-in{opacity:0;transform:translateY(10px)}
.t-in .q,.t-in .a{transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.t-in .src-in{opacity:0}
.t-in small,.t-in .a-act{transition:opacity .5s ease}
.a-act{align-self:flex-start;margin-top:6px;height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--vLine,var(--line));background:transparent;color:var(--violet,var(--ink));font:600 12px var(--sans);cursor:pointer}
.a-txt a{color:inherit;font-weight:600}
.ask-sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ask-sugs button{min-height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:500 13px var(--sans);cursor:pointer;text-align:left}
.ask-sugs button:hover{border-color:var(--ink)}
.ask-field{display:flex;align-items:center;gap:8px}
input.ask-in{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:16px var(--sans);outline:none;padding:0}
input.ask-in::placeholder{color:var(--quiet)}
button.ask-send{border:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700}
@container page (max-width:743px){
  .chat .thread{height:420px;min-height:420px}
  .ask-sugs button{min-height:44px;border-radius:22px}
  .chat .ask-send{min-width:44px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.chat .thread{height:auto;min-height:0;-webkit-mask-image:none;mask-image:none}}
.ask-sugs button,.a-act{white-space:nowrap}
@container page (max-width:743px){
  .for-cards > div{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:4px;padding:10px;align-items:start}
  .for-cards .ph{grid-row:1 / span 2;margin:0;border-radius:12px}
  .for-cards b{font-size:22px;padding:6px 0 0}
  .for-cards span{padding:0;font-size:15px}
}

/* ---------- v19 ---------- */
/* 2 · images CJ hasn't delivered yet: hide what the page can do without */
.no-media .for-cards .ph,.no-media .hb-moods{display:none}
.no-media .for-cards > div{display:flex!important;flex-direction:column;padding:28px 20px}
/* 3 · problem: the gathering ends where the section ends */


/* 4 · Questions: the heading stays at the top, level with the first question */
@container page (min-width:1160px){.f-side{align-self:start;position:sticky;top:120px}.f-stick{position:static}}
/* 6 + 11 · Aavi cards are as tall as their content */
.duo{align-items:start}
.aavi-card[data-see] .vis{margin-top:8px}
@container page (min-width:744px){.chat .thread{height:440px;min-height:440px}}
/* 7 · dark mode: the end is its own card with a thin rim in the orb's colours */
:root.theme-dark .end{border-top:1px solid transparent;background:linear-gradient(#1F1E1B,#1F1E1B) padding-box,linear-gradient(90deg,#0087CC,#EE78BC,#004A21) border-box}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .end{border-top:1px solid transparent;background:linear-gradient(#1F1E1B,#1F1E1B) padding-box,linear-gradient(90deg,#0087CC,#EE78BC,#004A21) border-box}}
/* 8 · nothing under 12 px */
.b-kick,.b-sign small,.lc small,.mc small,.b-brand{font-size:12px;letter-spacing:0}
.b-ch li span,.ph figcaption,.chat .a small,.lc .add,.mc .add,.still-cmp{font-size:12px}
.b-row small,.lc .tag,.lb-row small,.a-state{font-size:12px;letter-spacing:0}
.lib-tag{font-size:12px;height:22px;letter-spacing:0}
.avs i{font-size:12px;width:26px;height:26px}
.mood6 .ph.ai figcaption,.ai-vis .dev figcaption{font-size:12px;letter-spacing:0}
@container page (max-width:743px){.b-ch li b{font-size:12px;letter-spacing:0}}
/* 9 · the parasol label moves up, clear of "+ Add to brief" */
.mc.pick .ph figcaption{bottom:auto;top:38px}
/* 10 · Built for: 3:2 on desktop */
@container page (min-width:1160px){.for-cards .ph{aspect-ratio:3/2}}
/* 12 · tablet: two columns for the acts, the library and Built for */
@container page (min-width:744px) and (max-width:1159px){
  .acts-sticky{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;row-gap:calc(var(--gap) * .8);align-items:center}
  .act{grid-column:1;margin-top:0!important;text-align:left;align-items:flex-start}
  .act p{margin:0}
  .layer{grid-column:2}
  .act[data-act="0"],.layer[data-layer="0"]{grid-row:1}
  .act[data-act="1"],.layer[data-layer="1"]{grid-row:2}
  .act[data-act="2"],.layer[data-layer="2"]{grid-row:3}
  .layer .brief{padding:20px}
  .layer .b-ch li{grid-template-columns:22px minmax(0,1fr);row-gap:2px}
  .layer .b-ch li em{grid-column:2}
  [data-fill] li:nth-child(n+5){display:none}
  .more-ch{display:block;padding:10px 0;border-top:1px solid var(--hair);font-size:13px;font-weight:600;color:var(--quiet)}
  .phone{width:100%;height:auto}
  .mosaic{grid-template-columns:minmax(0,1fr) 260px;align-items:center}
  .mbrief{max-width:none}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mgrid .mc:nth-child(n+5){display:none}
  .for-cards{grid-template-columns:minmax(0,1fr);max-width:720px}
  .for-cards > div{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px;row-gap:6px;align-items:start;padding:12px}
  .for-cards .ph{grid-row:1 / span 2;margin:0;aspect-ratio:3/2}
  .for-cards b{padding:8px 0 0}.for-cards span{padding:0}
  .no-media .for-cards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
}
/* 14 · AI block on desktop: 2 × 2 next to the large image, more air in the text */
@container page (min-width:1160px){
  .ai-wrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px}
  .ai-copy{gap:20px}
  .ai-vis{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}
  .mood6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mood6 .ph:nth-child(n+5){display:none}
}
/* 15 · the letter: one centred column, signed at the end */
.l-col{width:100%;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:28px;text-align:left}
.letter .l-col .lead{max-width:none;margin:0;text-align:left;font:italic var(--t2l)/1.12 var(--serif);letter-spacing:-.012em}
.letter .l-col .body{max-width:none}
.l-sign{display:flex;align-items:center;gap:14px;margin-top:4px}
.l-sign .l-face{flex:none;width:64px;height:64px;aspect-ratio:1;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(.9) brightness(1.04);background:var(--tile)}
.l-sign span{display:flex;flex-direction:column;gap:2px}
.l-sign i{font:italic 24px/1.1 var(--serif);color:var(--ink)}
.l-sign small{font-size:var(--t5);color:var(--quiet)}
@container page (max-width:743px){.l-sign .l-face{width:56px;height:56px}.l-sign i{font-size:22px}}

/* 10–12 · length */
@container page (min-width:1160px){
  main,.foot,.bar-host{--gap:64px}
  .acts{height:180svh}
  .letter{padding-top:var(--gap);padding-bottom:var(--gap)}
}
.faq .qa summary{min-height:52px;padding:12px 0}
.end{padding-top:calc(var(--gap) * 1.2);padding-bottom:calc(var(--gap) * 1.2)}
@container page (max-width:743px){
  main,.foot,.bar-host{--gap:40px}
  .hero-brief{max-height:320px}
  .phone .cs:nth-of-type(n+5){display:none}
  .selects figure:nth-child(n+4){display:none}
  .chat .thread{height:320px;min-height:320px}
  .ask-sugs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-4px;margin-right:-4px;padding:0 4px}
  .ask-sugs::-webkit-scrollbar{display:none}
  .ask-sugs button{flex:none}
  .no-media .ai-vis{display:none}
}
@container page (min-width:1160px){.end{padding-top:var(--gap);padding-bottom:var(--gap)}}
@container page (max-width:743px){
  main,.foot,.bar-host{--gap:36px}
  [data-fill] li:nth-child(n+4){display:none}
  .hero-brief{max-height:260px}
  .chat .thread{height:280px;min-height:280px}
  .no-media .for-cards > div{padding:18px 18px 20px}
  .mbrief .lb-row:not(.land){display:none}
  .faq .qa summary{min-height:44px;padding:10px 0}
  .no-media .selects{display:none}
}
@container page (max-width:743px){
  main,.foot,.bar-host{--gap:32px}
  .hero-brief{max-height:220px}
  .chat .thread{height:260px;min-height:260px}
  .no-media .for-cards > div{padding:14px 16px 16px}
}

/* ---------- v20 ---------- */
/* 1e · the problem on a slightly darker paper */
.prob2{background:#F0EEE9}
:root.theme-dark .prob2{background:#1B1A17}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .prob2{background:#1B1A17}}
/* 1f · three rows that do what they say */

.pl{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.pl b{font-weight:700;color:var(--body)}
.pl em{color:var(--ink)}
.pl2{padding-left:8%}.pl3{padding-left:16%}
.proof{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--hair);font-size:13px;font-weight:500;color:var(--quiet);white-space:nowrap;letter-spacing:0}
.proof .ti{width:14px;height:14px}
.proof s{text-decoration-thickness:1.5px}
.swap{display:inline-grid;vertical-align:baseline}
.swap>span{grid-area:1/1;white-space:nowrap}
.swap .was{position:relative;opacity:0;justify-self:start}
.swap .was::after{content:"";position:absolute;left:0;right:0;top:55%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left}
.shr{display:inline-block;font-size:1em;transition:font-size .8s cubic-bezier(.16,1,.3,1) .5s}
.scat>span{display:inline-block;transition:transform .9s cubic-bezier(.16,1,.3,1) .35s}
@keyframes strike{to{transform:scaleX(1)}}
@keyframes wasOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes nowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .swap .was{opacity:1}
  .js .swap .now{opacity:0}
  .js .pl1.seen .was::after{animation:strike .4s ease-out .7s forwards}
  .js .pl1.seen .was{animation:wasOut .3s ease-in 1.25s forwards}
  .js .pl1.seen .now{animation:nowIn .5s cubic-bezier(.16,1,.3,1) 1.4s forwards}
  .js .pl2.seen .shr{font-size:.86em}
  .js .scat>span{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--dr,0))}
  .js .pl3.seen .scat>span{transform:none}
}
@container page (max-width:743px){
  .pl{flex-direction:column;align-items:flex-start;gap:10px}
  .pl2,.pl3{padding-left:0}
  .proof{height:28px;font-size:12px}
}
/* 1a · tools as small cards with a symbol */

/* 1b · depth: near sharp, middle 90 %, far 80 % and soft */

/* 1c · its own beat */

/* 1d · the symbols have landed in the brief */
.b-icons{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.b-icons i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--tile);color:var(--body)}
/* 2 · phone: normal flow, no pinning, nothing flies */


/* 3 · tablet under 1024: Aavi cards and the AI block stack */
@container page (max-width:1023px){
  .duo{grid-template-columns:minmax(0,1fr);max-width:720px}
  .ai-wrap{grid-template-columns:minmax(0,1fr);max-width:720px;gap:28px}
}
/* 4 · selects are design, not images: 3 × 2 with ticks, always */
@container page (max-width:743px){
  .no-media .selects{display:grid}
  .selects figure:nth-child(n+4){display:block}
  .after .selects figure{aspect-ratio:1/1}
}
/* 6 · Ask suggestions wrap on the phone */
@container page (max-width:743px){
  .ask-sugs{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0}
}
.scat{display:inline-block;white-space:nowrap}

.pl{row-gap:14px}
.pl{align-items:flex-end}

@container page (max-width:743px){.pl{align-items:flex-start}}

@container page (min-width:744px) and (max-width:1159px){main,.foot,.bar-host{--gap:64px}}
/* v21 · phone: library cards keep their description, two cards; Aavi's suggestion stays */
@container page (max-width:743px){
  .mc .d{display:block}
  .mgrid .mc:nth-child(n+3){display:none}
  .aavi-card[data-see] .b-row.ghost{display:grid}
}
/* v23 · Aavi cards: same height, the left one filled with a living scene */
[data-sug]{transition:opacity .6s var(--curve)}
.sug-act{display:flex;gap:6px}
.sug-act button{height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--hair);background:var(--card);font:600 12px/1 var(--sans);color:var(--ink);cursor:default}
.sug-act button:first-child{background:var(--ink);color:var(--card);border-color:var(--ink)}
.undo-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--quiet)}
.undo-row .undo{opacity:1;transform:none}
@container page (min-width:1024px){
  .duo{align-items:stretch}
  .aavi-card{height:100%}
  .aavi-card[data-see] .vis{flex:1;display:flex;flex-direction:column}
  .aavi-card[data-see] .mini-ch{flex:1;display:flex;flex-direction:column;gap:8px}
  .aavi-card[data-see] .undo-row{margin-top:auto;padding-top:8px}
  .aavi-card[data-ask] .ask-field{margin-top:auto}
}
@container page (max-width:743px){.sug-act{grid-column:1 / -1}}
/* v23 · phone: chapter label above its text */
@container page (max-width:743px){.mini-ch .b-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.mini-ch .b-row small{align-self:flex-start}}
.undo-row span{white-space:nowrap}
/* v24 · the problem rows: one centred column, no staircase */

.pl2,.pl3{padding-left:0}
.pl{display:block}
.pl .proof{margin-left:16px;vertical-align:.18em}
@container page (max-width:743px){.pl .proof{display:flex;width:fit-content;margin:10px 0 0;vertical-align:baseline}}
/* 24d · the darker paper fades in over 160 px */
.prob2{--pb:#F0EEE9;background:linear-gradient(var(--ground),var(--pb) 160px)}
:root.theme-dark .prob2{--pb:#1B1A17;background:linear-gradient(var(--ground),var(--pb) 160px)}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .prob2{--pb:#1B1A17;background:linear-gradient(var(--ground),var(--pb) 160px)}}
/* v26 · the letter looks like a letter */
.letter{--panel:#EFE9E0;background:var(--panel);border:0;border-radius:32px;margin:0 var(--pad)}
:root.theme-dark .letter{--panel:#1F1D1A}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .letter{--panel:#1F1D1A}}
@container page (max-width:743px){.letter{margin:0 12px;border-radius:24px}}
.l-eye{font:500 13px/1.2 var(--sans);color:var(--quiet);letter-spacing:.02em}
.letter .l-col .body{gap:20px}
.letter .l-col .body p{font:400 21px/1.6 var(--serif);color:#2a2824;letter-spacing:0}
:root.theme-dark .letter .l-col .body p{color:#e8e4dc}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .letter .l-col .body p{color:#e8e4dc}}
@container page (max-width:743px){.letter .l-col .body p{font-size:19px}}
.l-quote{margin:28px 0;font:italic 400 30px/1.25 var(--serif);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
@container page (max-width:743px){.l-quote{font-size:26px}}
.l-sign .l-face{filter:none}
.l-sigimg{display:block;width:160px;height:auto}
.l-sign.has-sig i{display:none}
/* 24d · the hero fades into the darker paper behind the brief card */
:root{--pb:#F0EEE9}
:root.theme-dark{--pb:#1B1A17}
@media (prefers-color-scheme:dark){:root:not(.theme-light){--pb:#1B1A17}}
.prob2,:root.theme-dark .prob2{background:var(--pb)}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .prob2{background:var(--pb)}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(rgba(0,0,0,0),var(--pb));pointer-events:none;z-index:0}
.hero-brief{z-index:1}
.letter .l-col .body p{font-style:normal}
.hero::after{z-index:2}
.hero .hero-brief{z-index:3}
.letter .l-sign .l-face{filter:none}
.l-sign i{white-space:nowrap}
/* v27 · CJ's signature, inline so it follows the theme · revealed left to right once */
.l-sign{align-items:center;gap:16px;max-width:100%}
.l-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.l-sig{display:block;width:190px;max-width:100%;height:auto;color:#1a1917}
:root.theme-dark .l-sig{color:#f4f2ee}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .l-sig{color:#f4f2ee}}
.l-name small{font-size:13px;color:var(--quiet);padding-left:4px}
@container page (max-width:743px){.l-sig{width:160px}}
@media (prefers-reduced-motion:no-preference){
  .js .l-sign .l-sig{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.16,1,.3,1) .5s}
  .js .l-sign.seen .l-sig{clip-path:inset(0 0 0 0)}
}
/* ---------- v29 · the problem as a desk of evidence, then the gathering ---------- */

.bubble{max-width:260px;padding:12px 14px;border-radius:18px 18px 18px 4px;background:#DCF3D2;color:#1a1917;font-weight:500;line-height:1.35}
.files{display:grid;width:250px}
.files span{grid-area:1/1;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;background:var(--card);border:1px solid var(--hair);font-size:13px;font-weight:600;white-space:nowrap}
.files span:nth-child(1){transform:translate(14px,-14px) rotate(3deg);color:var(--quiet)}
.files span:nth-child(2){transform:translate(7px,-7px) rotate(-2deg);color:var(--quiet)}
.files .ti{flex:none}
.mail{width:280px;padding:14px 16px;background:var(--card);border:1px solid var(--hair);display:flex;flex-direction:column;gap:6px}
.mail small,.quote small{font-size:12px;font-weight:600;letter-spacing:0;color:var(--quiet);text-transform:none}
.mail b{font-size:15px}
.mail i{display:block;height:6px;border-radius:3px;background:var(--tile)}.mail i:nth-of-type(2){width:80%}.mail i:nth-of-type(3){width:55%}
.quote{width:220px;padding:14px 16px;background:var(--card);border:1px solid var(--hair);display:flex;flex-direction:column;gap:6px}
.quote span{display:flex;align-items:baseline;gap:10px;font-size:22px;font-variant-numeric:tabular-nums}
.quote s{color:var(--quiet);font-size:16px}
:root.theme-dark .bubble{background:#2C4A2A;color:#f4f2ee}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .bubble{background:#2C4A2A;color:#f4f2ee}}


/* ---------- v30 · the letter ---------- */
.l-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.l-date{font:400 13px/1.2 var(--sans);color:var(--quiet)}
.l-first::first-letter{float:left;font:400 104px/.82 var(--serif);margin:6px 12px 0 -2px;color:var(--ink)}
.l-quote{width:min(820px,calc(100cqw - 2 * var(--pad) - 48px));margin:56px 0 56px 50%;transform:translateX(-50%);padding:32px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font:italic 400 40px/1.2 var(--serif);text-align:center;text-wrap:balance}
.l-name small{font:400 13px/1.3 var(--sans);color:var(--quiet)}
@container page (max-width:743px){
  .l-first::first-letter{font-size:66px;margin-top:5px}
  .l-quote{width:auto;margin:40px 0;transform:none;font-size:28px;padding:24px 0}
}
.files{padding-top:48px}
.files span:nth-child(1){transform:translate(-6px,-48px) rotate(-2.5deg)}
.files span:nth-child(2){transform:translate(4px,-24px) rotate(2deg)}
@container page (max-width:743px){.files{padding-top:48px}}
.files{padding-top:60px}
.files span{align-items:flex-start;padding-top:11px}
.files span:nth-child(1){transform:translate(-6px,-60px) rotate(-2.5deg)}
.files span:nth-child(2){transform:translate(4px,-30px) rotate(2deg)}
@container page (max-width:743px){.files{padding-top:60px}}
.letter .body .l-quote{margin-top:36px;margin-bottom:36px}
@container page (max-width:743px){.letter .body .l-quote{margin-top:20px;margin-bottom:20px}}
/* v31 · Aavi helps you write it · eight chapters, a note, fills its height */
.ch-prog{display:flex;flex-direction:column;gap:6px;font:600 12.5px/1.2 var(--sans);color:var(--ink);padding:2px 2px 4px}
.ch-prog i{display:block;height:2px;border-radius:2px;background:var(--hair);overflow:hidden}
.ch-prog b{display:block;width:75%;height:100%;background:var(--ink)}
.aavi-note{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:12px;background:color-mix(in oklab,#7B5CF0 9%,var(--card));border:1px solid color-mix(in oklab,#7B5CF0 30%,transparent);font-size:13px;font-weight:500;line-height:1.35;color:#4B33B8;transition:opacity .7s var(--curve),transform .7s var(--curve)}
.aavi-note .orb{flex:none}
.aavi-note span:nth-child(2){flex:1;min-width:0}
.aavi-note button{flex:none;height:28px;padding:0 12px;border-radius:999px;border:0;background:#5B3FD6;color:#fff;font:600 12px/1 var(--sans);cursor:default}
:root.theme-dark .aavi-note{color:#CFC3FF;background:color-mix(in oklab,#7B5CF0 18%,var(--card))}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .aavi-note{color:#CFC3FF;background:color-mix(in oklab,#7B5CF0 18%,var(--card))}}
@container page (min-width:744px){
  .aavi-card[data-see] .mini-ch{gap:6px}
  .aavi-card[data-see] .mini-ch .b-row{min-height:38px;padding-top:6px;padding-bottom:6px}
}
@container page (min-width:744px) and (max-width:1023px){.ch-7{display:none!important}}
@container page (max-width:743px){.mini-ch .ch-x{display:none!important}}
@container page (max-width:743px){.aavi-card[data-see] .mini-ch .b-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.aavi-card[data-see] .mini-ch .b-row.ch-x{display:none}}
/* v32 · call sheet fills the phone (desktop and iPad) */
.ph-meta{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;font-weight:500;color:var(--quiet);white-space:nowrap}
.ph-meta svg{flex:none}.ph-meta svg:nth-of-type(2){margin-left:2px}
.phone{padding-bottom:10px}
.sched{flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:4px}
.sched .cs{align-items:center;padding:0 10px;min-height:0}
.sched .cs span{line-height:1.2}
.ph-crew{display:flex;align-items:center;gap:0;padding:10px 6px 4px}
.ph-crew .av{width:26px;height:26px;margin-right:-6px;border-radius:50%;display:grid;place-items:center;background:var(--tile);border:2px solid var(--card);font:700 11px/1 var(--sans);color:var(--ink)}
.ph-call{margin-left:16px;flex:1;font-size:12.5px;font-weight:600}
.ph-crew button{width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--ink);color:var(--card);cursor:default}
.ph-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:6px -6px 0;padding-top:8px;border-top:1px solid var(--hair);font-size:12px;font-weight:600;color:var(--quiet);text-align:center}
.ph-tabs .on{color:var(--ink)}
@container page (max-width:743px){
  .ph-meta,.ph-crew,.ph-tabs,.sched .cs-x{display:none}
  .sched{display:flex;flex-direction:column;gap:6px}
  .sched .cs{padding:10px;align-items:baseline}
  .phone .sched .cs:nth-of-type(-n+4){display:grid}
}
/* v34 · Aavi's note in Aavi's own violet */
.aavi-note,:root.theme-dark .aavi-note{background:var(--vTint);border-color:var(--vLine);color:var(--violet)}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .aavi-note{background:var(--vTint);border-color:var(--vLine);color:var(--violet)}}
.aavi-note button{background:var(--violet);color:var(--card)}
/* v33 · the letter, simpler: sticky title left, letter right */
.letter,.letter .l-col{overflow:visible}
.letter .l-col{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);column-gap:10%;align-items:start;text-align:left}
.l-head{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
.l-head .l-eye{font:400 13px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--quiet)}
.letter .l-head .lead{margin:0;font:italic 400 56px/1.05 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;max-width:none}
.l-main{display:flex;flex-direction:column;gap:40px;min-width:0}
.letter .l-main .body{display:flex;flex-direction:column;gap:1em;margin:0;max-width:none}
.letter .l-main .body p{margin:0;font:400 21px/1.6 var(--serif);color:var(--ink)}
.letter .l-sign{margin:0}
@container page (max-width:743px){
  .letter .l-col{display:flex;flex-direction:column;gap:24px}
  .l-head{position:static;gap:12px}
  .letter .l-head .lead{font-size:36px}
  .letter .l-main .body p{font-size:19px}
  .l-main{gap:32px}
  .letter .l-face{width:56px;height:56px}
}
@container page (min-width:744px){.letter .l-col{max-width:1080px;width:100%;margin-inline:auto;column-gap:8%}}
@container page (min-width:744px) and (max-width:1023px){.letter .l-head .lead{font-size:44px}}
/* v35 · the letter is one centred column; Questions on the page grid */
@container page (min-width:744px){
  .letter .l-col{display:flex;flex-direction:column;gap:0;max-width:640px;width:100%;margin-inline:auto;text-align:left}
  .l-head{position:static;gap:16px;margin-bottom:32px}
  .letter .l-head .lead{font-size:52px;line-height:1.06;text-align:left}
  .l-main{gap:40px}
}
@container page (min-width:744px) and (max-width:1023px){.letter .l-head .lead{font-size:52px}}
@container page (min-width:1024px){
  .f-grid{max-width:1180px;width:100%;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,720px);column-gap:64px}
}
@container page (min-width:1000px){
  .faq .f-grid{grid-template-columns:minmax(0,1fr) minmax(0,720px);column-gap:56px;gap:0 56px}
  .faq .f-side{align-self:start;position:sticky;top:120px}
}
@container page (min-width:1000px) and (max-width:1159px){.faq .f-grid{grid-template-columns:minmax(0,1fr) minmax(0,600px)}}
/* v36 · the letter without a heading */
.letter .l-main .body .l-open{display:block;margin-bottom:.5em;font:400 28px/1.35 var(--serif);color:var(--ink)}
@container page (max-width:743px){.letter .l-main .body .l-open{font-size:24px}}
/* v38 · the desk: evidence always readable, no blur, objects level with their claim */

/* v38b · claims keep Söhne on one line; filenames never cover each other; quote stays inside */
@container page (min-width:744px){
  .files{padding-top:92px}
  .files span:nth-child(1){transform:translate(-8px,-92px) rotate(-2deg)}
  .files span:nth-child(2){transform:translate(6px,-46px) rotate(1.5deg)}
  .quote{width:200px}
}

@container page (min-width:744px) and (max-width:1159px){
  .bubble{max-width:210px}
  .files{width:200px;left:54%!important}
  .files span{font-size:12px}
  .mail{width:230px}
  .quote{width:180px;left:56%!important;top:50%!important}
}
/* v41 · phone: nothing below the footer */
.page{overflow:clip}
/* v42 · desk positions come from the packing script (px) */

/* v43–44 · the problem simplified below 1180 px: one proof per claim, tools in two sliding rows */

@container page (max-width:1159px){
  .bubble,.mail{display:none!important}.files{order:2}.quote{order:4}
  .files{padding-top:92px}
  .files span{width:100%}
  .files span:nth-child(1){transform:translateY(-92px)!important}
  .files span:nth-child(2){transform:translateY(-46px)!important}
  .quote span{justify-content:flex-start}
}
@container page (max-width:743px){
  .prob2{padding-bottom:88px}
}

@keyframes mq{to{transform:translateX(-50%)}}





/* v45 · lock screen (v62: also on desktop, in a phone frame) */

@container page (min-width:0px){
  .prob2{padding:0!important;background:var(--ground)}
}




/* v46a · AI block on the phone shows its 2 × 2 even without media */
@container page (max-width:743px){ .no-media .ai-vis{display:grid!important} .no-media .ai-vis .ph.dev{display:none} .no-media .mood6 figcaption{display:block} }
/* v46b · nothing under 12 px */
.b-kick,.b-sign small,.b-ch li span,.ph figcaption,.chat .a small,.lc small,.lc .tag,.lb-row small,.mc small,.lib-tag,.b-brand,.lc .add,.mc .add,.ph-tabs,.ph-crew .av,.avs i,.still-cmp{font-size:max(12px,1em)!important}
.b-kick,.b-sign small,.b-ch li span,.ph figcaption,.lc small,.lc .tag,.lb-row small,.mc small,.lib-tag,.b-brand,.ph-tabs,.ph-crew .av,.avs i{font-size:12px!important}
.ph-crew .av{width:28px;height:28px}
/* v46c · Ask Aavi: three answered questions from the start */
@container page (min-width:744px){.chat .thread{height:auto;min-height:0;-webkit-mask-image:none;mask-image:none}}
@container page (max-width:743px){ .mood6 .ph:nth-child(4){display:none!important} .mood6 .ph:nth-child(5){display:block!important} }


/* v47 · Aavi helps you write it: one label column, one line per row */
.mini-ch .undo-row,.mini-ch .aavi-note{transition:opacity .6s var(--curve)}
@container page (min-width:1250px){
  .mini-ch .b-row{display:grid!important;grid-template-columns:168px minmax(0,1fr) auto!important;flex-direction:row!important;align-items:center!important;gap:12px!important}
  .mini-ch .b-row .b-kick{width:auto!important;white-space:nowrap}
  .mini-ch .b-row > span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini-ch .ch-x,.mini-ch .ch-7{display:grid!important}
}
@container page (max-width:1249px){
  .mini-ch .b-row{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important}
  .mini-ch .b-row .b-kick{width:auto!important}
  .mini-ch .b-row small,.mini-ch .b-row .sug-act{margin-top:4px}
}
/* v48 · call sheet with the role switcher */
.r-s,.fee-h,.roles-n[hidden]{display:none}
.cs.fee .fee-h{align-items:center;gap:6px;color:var(--quiet);font-weight:600}
.cs.fee.locked .fee-v{display:none}.cs.fee.locked .fee-h{display:inline-flex}
.roles-n{margin:0;font-size:13px;font-weight:600;color:var(--quiet);text-align:center;font-variant-numeric:tabular-nums}
.roles-on .sched .cs{display:grid!important;overflow:hidden;max-height:60px;transition:max-height .3s var(--curve),opacity .3s var(--curve),padding .3s var(--curve),margin .3s var(--curve)}
.roles-on .sched .cs.gone{max-height:0;opacity:0;padding-top:0!important;padding-bottom:0!important;margin-top:-6px}
.cs-gap{display:flex;align-items:center;height:24px;max-height:28px;padding:0 10px;border-radius:8px;background:var(--off);color:var(--quiet);font-size:12px;font-weight:600;animation:gapIn .3s var(--curve)}
@keyframes gapIn{from{opacity:0}to{opacity:1}}
@container page (max-width:743px){
  .roles{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));flex-wrap:nowrap!important;gap:0!important;width:100%;padding:3px;border-radius:24px;background:var(--off);border:1px solid var(--hair)}
  .roles button{min-height:44px;padding:0 4px;border:0;border-radius:21px;background:transparent;font-size:14px;min-width:0}
  .roles [aria-checked=true]{background:var(--fill);color:var(--onFill)}
  .r-l{display:none}.r-s{display:inline}
  .roles button[data-role=client] .r-s,.roles button[data-role=stylist] .r-s{display:none}
}
@media (prefers-reduced-motion:reduce){.roles-on .sched .cs,.cs-gap{transition:none;animation:none}}
.roles-on .sched .cs{max-height:90px}
.roles-n{white-space:nowrap}
@container page (max-width:743px){ .day:has(.roles-on){align-items:stretch} .day .roles,.day .roles-n{align-self:stretch;width:auto;max-width:none} .day .roles-on{align-self:center} }
.phone.roles-on{height:auto!important;max-height:none!important}
.roles-on .sched{flex:none}
.roles-on .sched .cs{flex:none}
@container page (max-width:743px){ .day .roles,.day .roles-n{align-self:center;width:calc(100cqw - 40px);max-width:420px;flex:none} }
@container page (min-width:1250px){
  .mini-ch .b-row small{white-space:nowrap}
  .mini-ch .b-row > span:nth-child(2){overflow:visible;text-overflow:clip}
  .mini-ch .sug-act{gap:4px}.mini-ch .sug-act button{padding:0 9px;font-size:12px;height:26px}
}
.sx-i{display:none}
.aavi-note button{white-space:nowrap}
@container page (min-width:1250px){
  .mini-ch .sug-x{width:26px;padding:0!important;display:inline-grid;place-items:center}
  .mini-ch .sug-x .sx-l{display:none}.mini-ch .sug-x .sx-i{display:inline;font-size:15px;line-height:1}
}
/* v49 · act 2: switcher, count and call sheet are one unit */
.unit{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:300px;max-width:100%}
.unit .roles{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;width:100%!important;max-width:none!important;padding:3px;border-radius:22px;background:var(--off);border:1px solid var(--hair);align-self:stretch!important}
.unit .roles button{min-height:36px!important;height:36px;padding:0 2px;border:0;border-radius:19px;background:transparent;color:var(--ink);font:600 14px var(--sans);min-width:0}
.unit .roles [aria-checked=true]{background:var(--fill);color:var(--onFill)}
.unit .roles-n{width:auto!important;max-width:none!important;align-self:center!important;margin:-2px 0 4px}
.unit .phone{width:100%!important;max-width:100%;height:auto!important;max-height:none!important;margin:0}
.roles-on .sched{justify-content:flex-start;align-content:start}
.roles-on .sched .cs{transition:opacity .3s var(--curve)}
.roles-on .sched .cs.gone{display:none!important}
.cs-gap{flex:none;height:24px}
.layer[data-layer="1"] .day{display:flex;justify-content:center}
@container page (min-width:1160px){
  .layer[data-layer="1"]{align-items:flex-start;overflow:visible}
  .layer[data-layer="1"] .day{width:100%;height:100%;align-items:center}
  .unit .phone{padding:22px 14px 10px;border-width:7px;border-radius:40px}
  .unit .phone .cs{padding-top:7px;padding-bottom:7px}
}
@container page (min-width:744px) and (max-width:1159px){
  .act[data-act="1"]{grid-column:1 / -1;grid-row:2;text-align:center;align-items:center;max-width:620px;justify-self:center}
  .act[data-act="1"] p{margin-inline:auto}
  .layer[data-layer="1"]{grid-column:1 / -1;grid-row:3}
  .act[data-act="2"],.layer[data-layer="2"]{grid-row:4}
  .unit{width:420px}
}
@container page (max-width:743px){ .unit{width:100%;max-width:420px;margin-inline:auto} }
.unit .sched{display:flex!important;flex-direction:column;gap:5px;grid-auto-rows:auto}
.unit .sched .cs{flex:none;max-height:none!important;overflow:visible;padding:8px 10px!important;align-items:baseline;min-height:0}
.unit .sched .cs span{line-height:1.3}
@container page (min-width:1160px){.unit{transform-origin:50% 50%;flex:none}}
@container page (min-width:744px) and (max-width:1159px){.act[data-act="1"] h2{max-width:520px;margin-inline:auto;text-wrap:balance}}
/* v51 · Aavi card: values never truncate; a long value wraps to a second line */
.aavi-card[data-see] .mini-ch .b-row > span:not(.b-kick){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-width:0;text-wrap:pretty}
.priv .updated{margin:8px 0 0;font-size:14px;color:var(--quiet)}
/* v53 · Aavi card: label above value up to 1249 px page width (a 1280 window with scrollbar is ~1265) */
@container page (max-width:1249px){
  .mini-ch .b-row > span,.mini-ch .b-row > .b-kick{width:100%!important;max-width:none!important;flex:none!important}
  .mini-ch .b-row > span:not(.b-kick){white-space:normal!important}
}

/* ---------- v56 · the profile card after joining ---------- */
.pf{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.pf[hidden]{display:none}
.pf-dim{position:absolute;inset:0;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s var(--curve)}
.pf-card{position:relative;width:100%;max-width:480px;max-height:calc(100svh - 48px);overflow:auto;display:flex;flex-direction:column;gap:22px;padding:24px 28px 28px;border-radius:28px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);opacity:0;transform:translateY(24px) scale(.98);transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1);outline:none}
.pf.open .pf-dim{opacity:1}.pf.open .pf-card{opacity:1;transform:none}
.pf-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.pf-dots{display:flex;gap:6px}.pf-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.pf-dots i.on{background:var(--ink)}.pf-dots i.now{transform:scale(1.25)}
.pf-skip{min-height:44px;min-width:44px;padding:0 4px;border:0;background:none;font:14px var(--sans);color:var(--quiet);cursor:pointer}
.pf-skip[hidden]{visibility:hidden;display:block}
.pf-stage{display:grid}
.pf-step{grid-area:1/1;display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-step h2{font-size:var(--t3);letter-spacing:-.035em}
.pf-step p{font-size:var(--tb);color:var(--body)}
.pf-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pf-acts .btn{flex:1}
.pf-big{display:flex;flex-direction:column;gap:10px}
.pf-big button{min-height:60px;padding:0 20px;border-radius:16px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 18px/1 var(--sans);letter-spacing:-.016em;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.pf-big button:hover{background:var(--off)}
.pf-big button[aria-checked=true]{border-color:var(--ink);background:var(--off)}
.pf-in{width:100%;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:16px var(--sans);outline:none}
.pf-in:focus{border-color:var(--ink)}
.pf-list{display:flex;flex-direction:column;max-height:216px;overflow:auto;border:1px solid var(--hair);border-radius:12px;padding:4px;overscroll-behavior:contain}
.pf-list button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--ink);font:15px var(--sans);text-align:left;cursor:pointer;flex:none}
.pf-list button:hover{background:var(--off)}
.pf-list button[aria-selected=true]{background:var(--off);font-weight:600}
.pf-list button[aria-selected=true]::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.pf-flag{width:24px;font-size:18px;line-height:1;text-align:center}
.pf-flag.iso{font-size:12px;font-weight:600;color:var(--quiet);letter-spacing:0}
.pf-none{padding:12px 10px;font-size:14px!important;color:var(--quiet)}
.pf-lab{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.pf-lab small{font-weight:400;color:var(--quiet);font-size:13px}
.pf-lab span+small{margin-top:-24px;align-self:flex-end}
:root.pf-lock,:root.pf-lock body{overflow:hidden}
@media (max-width:743px){
  .pf{align-items:flex-end;padding:0}
  .pf-card{max-width:none;max-height:92svh;border-radius:28px 28px 0 0;padding:16px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .pf-list{max-height:30svh}
}
@media (prefers-reduced-motion:reduce){.pf-card{transform:none!important;transition:opacity .25s!important}.pf-dim{transition:opacity .25s!important}}
/* ---------- v57 · cards arrive the same way; the hero card arrives last ---------- */
.js [data-reveal]{transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js [data-reveal]:not(.seen){opacity:0;transform:translateY(40px)}
.js .hero-brief{animation:hbIn .8s cubic-bezier(.2,.8,.2,1) 1.3s both}
@keyframes hbIn{from{opacity:0;transform:translateY(60px)}}
@media (prefers-reduced-motion:reduce){.js [data-reveal]:not(.seen){opacity:1;transform:none}.js .hero-brief{animation:none}}
/* v57b · leans back (top edge away), straightens over the first 300 px */
.hero-brief{perspective:1000px;perspective-origin:50% 0}
.hb-tilt{transform-origin:50% 100%;transform:rotateX(calc(8deg * (1 - var(--t,0)))) scale(calc(.94 + .06 * var(--t,0)))}
.pf-list{overflow-x:hidden;max-height:min(216px,26svh)}
.pf-list button{width:100%}
.pf-list button span:last-of-type{flex:1;min-width:0}
@media (max-width:743px){.pf-list{max-height:min(216px,28svh)}}
/* ---------- v58 · Safari on iPhone: keep every orb round ---------- */
.gorb,.orb,.orb-mark,.orb-mark-s,.orb-end{clip-path:circle(50% at 50% 50%);-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate;transform:translateZ(0);overflow:hidden}
.gorb .g-tilt{clip-path:circle(50% at 50% 50%);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.bloom,.end-glow{isolation:isolate;will-change:opacity}
.label.glass{isolation:isolate;clip-path:inset(0 round 999px);-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}
/* ---------- v59 (retired in v62, kept off) ---------- */



/* ---------- v60 · phone (below 744 px page width): scaled down and trimmed ---------- */
.aavi-tabs,.q-more-btn{display:none}
@container page (max-width:743px){
  main,.foot,.bar-host{--gap:48px;--t2:28px;--t2l:32px;--t3:24px}
  .sec{gap:24px}
  .sec h2,.act h2,.lib h2,.for h2,.faq h2,.ai-copy h2{font-size:28px!important;line-height:1.1}
  /* a · hero card: only its top edge */
  .hero-brief{max-height:140px!important;-webkit-mask-image:linear-gradient(#000 35%,transparent)!important;mask-image:linear-gradient(#000 35%,transparent)!important}
  /* b · Aavi: one card, two tabs */
  .aavi-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--off);width:100%;max-width:360px}
  .aavi-tabs button{flex:1;min-height:44px;border:0;border-radius:999px;background:none;color:var(--quiet);font:600 15px var(--sans);cursor:pointer}
  .aavi-tabs button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 2px 8px -4px rgba(0,0,0,.3)}
  .duo{grid-template-columns:minmax(0,1fr)!important}
  .duo[data-tab=see] [data-ask],.duo[data-tab=ask] [data-see]{display:none!important}
  .aavi-card{padding:24px!important}
  .aavi-card .aavi-kick{display:none}
  /* c · AI images: two tiles side by side */
  .ai-vis .ph.dev{display:none!important}
  .ai-vis .mood6{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .ai-vis .mood6 figure{display:none!important}
  .ai-vis .mood6 figure:nth-child(1),.ai-vis .mood6 figure:nth-child(3){display:block!important;aspect-ratio:4/5}
  /* d · library: one swipeable row, descriptions kept, no brief panel */
  .mosaic{display:block!important;width:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad))}
  .mbrief,.flyer{display:none!important}
  .mgrid{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mgrid::-webkit-scrollbar{display:none}
  .mgrid .mc{display:flex!important;flex:0 0 84%;scroll-snap-align:start;padding:12px 12px 18px!important;text-align:left}
  .mgrid .mc b{font-size:17px!important}.mgrid .mc .d{font-size:14px!important}
  .mgrid .mc .add,.mgrid .mc .lib-tag{display:none}
  /* f · questions: six, then the rest on request */
  .qa .q-more{display:none}.qa.all .q-more{display:block}
  .q-more-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:20px;width:100%}
  /* g · act 3: three selects on one row */
  .selects{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .selects figure{display:block}.selects figure:nth-child(n+4){display:none!important}
  /* h · cards breathe */
  .act .brief,.layer .brief{padding:24px!important}
}

@container page (max-width:743px){
  .mini-ch .b-row{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;height:auto!important;min-height:0!important;padding:8px 12px!important}
  .mini-ch .b-row > span,.mini-ch .b-row > .b-kick{width:auto!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:left}
  .selects + *,.after .b-head .b-kick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@container page (max-width:743px){
  .aiimg .ai-vis .mood6 > figure:not(:nth-child(1)):not(:nth-child(3)),.aiimg .ai-vis > .ph.dev{display:none!important}
  .lib h2{margin-bottom:4px}.lib .lede{margin-top:0!important;position:relative}
  .mini-ch .b-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:2px}
  .mini-ch .b-row > *{grid-column:1!important;grid-row:auto!important;position:static!important}
}
@container page (max-width:743px){
  .lib h2{padding-bottom:8px;line-height:1.12!important}.lib .lede{margin-top:4px!important}
}
/* ---------- v61 · Built for: three tall image cards ---------- */
.sec.for .for-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;width:100%;max-width:1180px;border:0!important}
.sec.for .for-cards > div{position:relative!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;gap:6px!important;aspect-ratio:3/4;padding:28px!important;border-radius:24px!important;border:0!important;overflow:hidden;isolation:isolate;text-align:left;color:#fff;box-shadow:var(--soft)!important;background:linear-gradient(160deg,#0b6a9e,#063b59)!important}
.sec.for .for-cards > div:nth-child(2){background:linear-gradient(160deg,#94406f,#4e1f3c)!important}
.sec.for .for-cards > div:nth-child(3){background:linear-gradient(160deg,#17683d,#07361e)!important}
.sec.for .for-cards > div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));z-index:-1;pointer-events:none}
.sec.for .for-cards .ph{display:block!important;position:absolute!important;inset:0!important;margin:0!important;aspect-ratio:auto!important;border-radius:0!important;z-index:-2;background:none!important;border:0!important}
.sec.for .for-cards .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sec.for .for-cards .ph figcaption{display:none!important}
.no-media .sec.for .for-cards .ph,.sec.for .for-cards .ph:not(.loaded){visibility:hidden}
.sec.for .for-cards b{display:block!important;font-size:28px!important;line-height:1.1;letter-spacing:-.03em;color:#fff!important;padding:0!important;margin:0!important;white-space:normal!important}
.sec.for .for-cards span{display:block!important;font-size:16px!important;line-height:1.4;color:#fff!important;padding:0!important;margin:0!important;white-space:normal!important}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.sec.for .for-cards > div:hover .ph img{transform:scale(1.04)}}
@container page (max-width:743px){
  .sec.for .for-cards{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;width:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:none;gap:12px!important}
  .sec.for .for-cards::-webkit-scrollbar{display:none}
  .sec.for .for-cards > div{flex:0 0 80%;scroll-snap-align:start;padding:24px!important}
  .sec.for .for-cards b{font-size:24px!important}
}
.sec.for .for-cards b,.sec.for .for-cards span{max-width:none!important;width:auto!important}
/* ---------- v62 · the problem on desktop: claims left, a lock screen in an iPhone right ---------- */
@container page (min-width:1160px){
  .prob2{background:var(--ground)!important}
}
@container page (max-width:743px){ .mini-ch > .b-row:nth-child(6){display:none!important} }

/* ---------- v62 · desktop problem, A and B (from 1160 px page width) ---------- */
.m-only,.m-txt{display:none}
@keyframes pbxFlow{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1.1)}33%{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.15)}66%{transform:translate3d(-3%,4%,0) rotate(-6deg) scale(1.12)}100%{transform:translate3d(0,0,0) rotate(0deg) scale(1.1)}}
@container page (min-width:1160px){
  .prob2{background:var(--ground)!important;padding:0!important}
  /* common · the card, white claims, glass */
  
  .glassy{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#1a1917!important;border:0!important;box-shadow:0 10px 30px -14px rgba(0,0,0,.4)!important}

  /* ---------- A · claims left, one proof at a time right ---------- */
  

  /* ---------- B · the desk as a lock screen ---------- */
  
  @keyframes pbxPulse{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
  @keyframes pbxShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
  /* d9 · reduced motion: the end first, the still desk under it */
  
}


/* ---------- 63 · phone: Aavi helps you write, four short rows ---------- */
@container page (max-width:743px){
  .aavi .d-only{display:none}.aavi p.m-only{display:block}
  .aavi .mini-ch > .b-row:nth-child(n+6){display:none!important}
  .aavi .mini-ch .b-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding:0 12px!important;flex-direction:row!important}
  .aavi .mini-ch .b-row > *{grid-column:auto!important;grid-row:1!important}
  .aavi .mini-ch .b-row > span:not(.b-kick):not(.sug-act){justify-self:start!important;text-align:left!important;max-width:100%;font-weight:500!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:15px}
  .aavi .mini-ch .b-kick{font-size:0!important;letter-spacing:0!important}
  .aavi .mini-ch .b-kick::before{content:attr(data-l);font-size:13px;font-weight:500;text-transform:none;color:var(--quiet)}
  .aavi .mini-ch [data-m] .m-txt{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .aavi .mini-ch .sug-act.m-only{display:inline-flex}
  .aavi .mini-ch .sug-x{display:none!important}
  .aavi .mini-ch .sug-act button{min-height:32px;padding:0 12px}
  .aavi .mini-ch small[data-by]{font-size:0!important;width:7px;height:7px;padding:0!important;border-radius:50%;background:var(--violet)!important;justify-self:start!important;align-self:center!important}
  .aavi .mini-ch .b-row > .b-kick{flex:0 0 64px!important;width:64px!important}
  .aavi .mini-ch .b-row > span:not(.b-kick):not(.sug-act){flex:0 1 auto!important;min-width:0!important}
  .aavi .mini-ch .b-row > .sug-act{flex:none!important;width:auto!important;margin:0!important}
  .aavi .mini-ch .b-row > span:not(.b-kick):not(.sug-act){width:auto!important}
  .aavi .mini-ch .b-row > small[data-by]{flex:none!important;margin:0!important}
  .aavi .mini-ch .b-row > span[data-m]:not(.b-kick):not(.sug-act){flex:1 1 auto!important;width:auto!important;max-width:none!important;min-width:0!important;overflow:hidden!important}
}

/* ---------- v64 · B only; hero card whole; lock screen as a card ---------- */
.hero{padding-bottom:96px!important}
.hero::after{background:linear-gradient(rgba(0,0,0,0),var(--ground))!important;height:45%!important}
.hero-brief,.js .hero-brief{max-height:none!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
.hero-brief .brief{border-radius:24px}
@container page (max-width:743px){
  .hero{padding-bottom:96px!important}
  .hero-brief .b-ch li:nth-child(n+4){display:none!important}
  .hero-brief .b-ch li{display:flex}
}
.prob2{padding-top:0!important;background:var(--ground)!important}




/* ---------- v65 · the end of the problem: one brief, eight rows ---------- */
.one-brief{width:100%;max-width:720px;text-align:left;padding:22px 24px 14px;border-radius:24px;box-shadow:var(--shadow)}
.one-brief .b-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.one-brief .hb-shared{display:inline-flex}
.ob-rows{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.ob-rows li{display:grid;grid-template-columns:18px minmax(96px,auto) minmax(0,1fr) auto 18px;align-items:center;column-gap:12px;min-height:40px;border-top:1px solid var(--hair);font-size:15px}
.ob-rows .ti{width:16px;height:16px;color:var(--quiet)}
.ob-rows b{font-weight:600;color:var(--ink);white-space:nowrap}
.ob-rows span{color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-rows small{font-size:13px;font-weight:600;color:#1f7a45}
:root.theme-dark .ob-rows small{color:#5fc48a}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .ob-rows small{color:#5fc48a}}
.ob-rows .ok{width:18px;height:18px}
.ok circle{fill:#1f8a4c;stroke:none}.ok path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* rows land one at a time, the tick last */
.js .one-brief li{opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .35s ease calc(.35s + var(--i) * 90ms),transform .5s cubic-bezier(.34,1.4,.64,1) calc(.35s + var(--i) * 90ms)}
.js .one-brief li .ok{opacity:0;transform:scale(.6);transition:opacity .25s ease calc(.65s + var(--i) * 90ms),transform .35s cubic-bezier(.34,1.6,.64,1) calc(.65s + var(--i) * 90ms)}
/* counter: All caught up */


/* iPad and phone: the brief at the end of the lock screen */


@container page (max-width:743px){
  .ob-rows li{grid-template-columns:16px 84px minmax(0,1fr) auto 16px;column-gap:8px;min-height:34px;font-size:13.5px}
  .ob-rows small{font-size:12px}
  .ob-rows .ok{width:16px;height:16px}
}
@media (max-height:740px){@container page (max-width:743px){.ob-rows li{min-height:30px}}}

/* ---------- v66 · the join card ---------- */
.pf-top{display:grid;grid-template-columns:24px auto 1fr auto;align-items:center;gap:12px}
.pf-orb{width:24px;height:24px;border-radius:50%;clip-path:circle(50%);isolation:isolate}
.pf-orb.spin{animation:pfSpin 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes pfSpin{from{transform:rotate(-360deg) scale(.6)}to{transform:none}}
.pf-back{grid-column:2;width:36px;height:36px;margin-left:-6px;border:0;border-radius:50%;background:transparent;color:var(--ink);font:500 20px/1 var(--sans);cursor:pointer}
.pf-back:hover{background:var(--off)}
.pf-back[hidden]{display:none}
.pf-count{grid-column:3;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--quiet)}
.pf-skip{grid-column:4}
#pf-h em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.pf-big button{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:14px;min-height:64px;padding:12px 18px;transition:background .2s,border-color .2s,box-shadow .25s}
.pf-big .ti{color:var(--ink)}
.pf-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.pf-t b{font:600 17px/1.2 var(--sans);letter-spacing:-.016em}
.pf-t small{font:400 14px/1.35 var(--sans);letter-spacing:0;color:var(--body)}
.pf-big button.chosen,.pf-big button:focus-visible{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink);border-color:var(--ink)}
.pf-cur{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 18px;border:1px solid var(--line);border-radius:16px}
.pf-cur .pf-flag{font-size:28px;line-height:1}
.pf-cur .pf-flag.iso{font:700 13px/1 var(--sans);letter-spacing:0;padding:6px 8px;border-radius:8px;background:var(--off)}
.pf-cur b{flex:1;font:600 19px/1.2 var(--sans);letter-spacing:-.016em}
.pf-change{min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:600 15px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pf-pick{display:flex;flex-direction:column;gap:10px}
.pf-pick[hidden]{display:none}
.pf-share-wrap{position:relative;display:flex}
.pf-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:2;display:flex;flex-direction:column;min-width:200px;padding:6px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.pf-menu[hidden]{display:none}
.pf-menu a,.pf-menu button{display:flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--ink);font:500 15px/1 var(--sans);text-decoration:none;text-align:left;cursor:pointer}
.pf-menu a:hover,.pf-menu button:hover,.pf-menu a:focus-visible,.pf-menu button:focus-visible{background:var(--off);outline:none}
@media (prefers-reduced-motion:reduce){.pf-orb.spin{animation:none}.pf-big button{transition:none}}
.pf-step[data-step="5"] .pf-acts{flex-wrap:wrap}
.pf-share-wrap{flex-direction:column;align-items:stretch;flex:1 1 auto}
.pf-menu{position:static;order:2;margin-top:8px;min-width:0;box-shadow:none;background:var(--off);border:0}
.pf-step[data-step="5"] .pf-acts{align-items:flex-start}

/* ---------- v67 · the problem: shorter pin, three beats, gentle snap ---------- */
html{scroll-snap-type:y proximity}






/* ---------- v69 · type, copy and scrolling ---------- */
html{scroll-snap-type:none!important}
.lead-b{color:var(--body)!important}.lead-b b{color:var(--ink);font-weight:600}
/* section headings left, except hero, problem and end */
.sec.aiimg,.sec.lib,.sec.for,.sec.aavi,.sec.faq{text-align:left}
.sec.lib>h2,.sec.lib>.lede,.sec.for>h2,.sec.for>.for-note,.sec.for>.proof{align-self:center;width:100%;max-width:1180px;margin-inline:auto;text-align:left}
.sec.lib>h2,.sec.lib>.lede{max-width:1240px}
.sec.lib>.lede,.sec.for>.for-note{max-width:620px!important;margin-right:auto!important;align-self:flex-start}
.sec.lib>.lede{margin-left:max(0px,calc((100% - 1240px) / 2))!important}
.sec.for>.for-note{margin-left:max(0px,calc((100% - 1180px) / 2))!important}
.act,.act[data-act]{text-align:left!important;align-items:flex-start!important}
@container page (max-width:1159px){.act[data-act="1"]{justify-self:stretch!important;max-width:none!important}.act h2,.act p{margin-inline:0!important}}
/* hero cue */
.cue{position:absolute;left:50%;bottom:6px;display:grid;place-items:center;width:32px;height:32px;margin-left:-16px;color:var(--ink);opacity:.6;transition:opacity .5s var(--curve);animation:cue 2.4s var(--curve) infinite}
.cue.gone{opacity:0;pointer-events:none}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* top bar on every screen, replaces the phone bar at the bottom */
.bar-host{display:block!important;position:fixed!important;top:0;left:0;right:0;bottom:auto!important;height:auto!important;z-index:40;pointer-events:none}
html:not(.js) .bar-host{display:none!important}
.bar-host .bar{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;margin:0!important;display:flex;flex-direction:column;gap:8px;padding:8px var(--pad)!important;border-radius:0!important;border:0!important;border-bottom:1px solid var(--hair)!important;background:color-mix(in srgb,var(--ground) 74%,transparent)!important;-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);box-shadow:none!important;transform:translateY(-100%)!important;opacity:0!important;visibility:hidden;transition:transform .45s var(--curve),opacity .45s var(--curve),visibility 0s .45s!important;pointer-events:none}
.bar-host .bar.show{transform:none!important;opacity:1!important;visibility:visible;pointer-events:auto;transition:transform .45s var(--curve),opacity .45s var(--curve)!important}
.bar-host .bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1240px;margin:0 auto}
.bar-mark{display:flex;align-items:center}.bar-mark .logo{height:22px;width:auto}
.bar-right{display:flex;align-items:center;gap:16px}
.bar-host .bar-txt{font-size:13px;font-weight:600;color:var(--body)}
.bar-host .btn{min-height:36px;padding:0 16px;font-size:14px}
.bar-host .x{width:36px;height:36px}
.bar-host [data-bar-expanded] .join-slot{width:100%;max-width:560px;margin:4px auto 6px}
/* phone progress line */
.prog{display:none;position:fixed;top:0;left:0;right:0;height:2px;z-index:41;pointer-events:none}
.prog i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@container page (max-width:743px){
  .prog{display:block}
  .bar-host .btn,.bar-host .x{min-height:44px;height:44px}
  .bar-host .btn{padding:0 18px}
  .bar-host .bar{padding:6px 12px 6px var(--pad)!important;background:var(--ground)!important}
  .bar-host .bar-txt{display:none}
  .bar-host [data-bar-expanded] .bar-txt,.bar-host [data-bar-thanks] .bar-txt{display:inline}
  /* performance: no backdrop blur, no SVG filter, sections render when near */
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .g-col{filter:none!important}
  .label.glass,.glassy{background:rgba(255,255,255,.93)!important}
  main>section:not(.hero):not(.prob2),main>.sec{content-visibility:auto;contain-intrinsic-size:auto 1000px}
  /* the lock screen as a card in normal flow */
  
}
@media (max-width:743px){.pf-dim{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(0,0,0,.5)!important}}
@media (prefers-reduced-motion:reduce){.cue{animation:none}.bar-host .bar,.bar-host .bar.show{transition:none!important}}



/* v72 · + Add to brief */
.mc .add,.lc .add{height:28px!important;padding:0 10px!important;border-radius:14px!important;font:600 12px/1 var(--sans,'Inter'),system-ui,sans-serif!important;letter-spacing:0!important;white-space:nowrap}
.mc .add::after,.lc .add::after{content:"";position:absolute;inset:-8px}
.mc.pick .ph figcaption{bottom:auto!important;top:38px!important}
@container page (max-width:743px){
  .mgrid .mc.pick .add{display:inline-flex!important;font-size:13px!important}
  .mc .add::after,.lc .add::after{inset:-8px -6px}
}


/* ---------- v77 · B: no clock, smaller claims; D: the carousel (default), &prob=b for B ---------- */



@container page (max-width:743px){.pd{display:block;padding:var(--gap) 0}}
.pd{--side:max(var(--pad),calc((100% - 1180px) / 2))}
.pd-h{margin:0 0 32px;padding:0 var(--side);font-size:var(--t2);text-align:left}
.pd-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--side);padding:0 var(--side) 8px;scrollbar-width:none;touch-action:pan-x pan-y}
.pd-track::-webkit-scrollbar{display:none}
.pd-track:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pd-item{flex:0 0 min(80%,900px);margin:0;scroll-snap-align:start}
.pd-card{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/3;border-radius:28px;display:flex;align-items:center;justify-content:center;padding:32px;background:#1d1a22}
.pd-bg{position:absolute;inset:-12%;z-index:-1;background:radial-gradient(60% 55% at 20% 25%,#0087CC 0%,rgba(0,135,204,0) 70%),radial-gradient(55% 50% at 85% 40%,#EE78BC 0%,rgba(238,120,188,0) 70%),radial-gradient(70% 55% at 40% 95%,#004A21 0%,rgba(0,74,33,0) 70%),#1d1a22;filter:blur(24px)}
.pd-bg::after{content:"";position:absolute;inset:0;background:rgba(14,12,18,.45)}
.pd-card.light{background:color-mix(in srgb,var(--ink) 5%,var(--ground));flex-direction:column}
.pd-stack{display:flex;flex-direction:column;gap:8px;width:100%;max-width:400px}
.pd-stack.full{align-self:flex-start;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.pd-n{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:20px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#1a1917;text-align:left;box-shadow:0 10px 30px -14px rgba(0,0,0,.4)}
.js .pd-n{opacity:0;transform:translateY(-20px);transition:opacity .5s var(--curve),transform .5s var(--curve)}
.js .pd-item.in .pd-n{opacity:1;transform:none}
.pd-item.in .pd-n:nth-child(2){transition-delay:.12s}.pd-item.in .pd-n:nth-child(3){transition-delay:.24s}.pd-item.in .pd-n:nth-child(4){transition-delay:.36s}.pd-item.in .pd-n:nth-child(5){transition-delay:.48s}.pd-item.in .pd-n:nth-child(6){transition-delay:.6s}
.pd-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font:700 14px/1 var(--sans)}
.pd-ic.g{background:#2f9e55}.pd-ic.b{background:#3a7bd5}.pd-ic.m{background:#2f6fd6}.pd-ic.q{background:#7a6a4a}.pd-ic.d{background:#c98a14}.pd-ic.p{background:#c8463c}.pd-ic.t{background:#3c55c8}.pd-ic.w{background:#2b8a5e}
.pd-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.pd-nh{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;color:#3f3c36;text-transform:none;letter-spacing:0;line-height:1.3}
.pd-nh time{text-transform:none;letter-spacing:0;font-weight:500}
.pd-n b,.pd-n p{margin:0;font-size:15px;line-height:1.3;color:#1a1917}.pd-n b{font-weight:700}.pd-n s{color:#5e5a53}
.pd-more{justify-content:center}.pd-more p{font-weight:600;color:#3f3c36}
.pd-four{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.pd-four .one-brief{max-width:620px;margin:0}
.pd-ok{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--hair);font-size:13px;font-weight:600;color:#1f7a45}
.pd-ok svg{width:14px;height:14px;fill:#1f7a45}.pd-ok svg path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.js .pd-item.in .one-brief li,.js .pd-item.in .one-brief li .ok{opacity:1;transform:none}
.pd-item figcaption{max-width:640px;margin-top:18px;font-size:17px;line-height:1.45;color:var(--body);text-wrap:pretty}
.pd-item figcaption b{color:var(--ink);font-weight:600}
.pd-nav{display:flex;justify-content:flex-end;gap:12px;padding:16px var(--side) 0}
.pd-arrow{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);cursor:pointer;transition:opacity .25s var(--curve),background .25s var(--curve)}
.pd-arrow:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)}
.pd-arrow:disabled{opacity:.35;cursor:default}
.pd-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@container page (max-width:743px){
  .pd-h{margin-bottom:24px}
  .pd-track{gap:12px}
  .pd-item{flex-basis:86%}
  .pd-card{aspect-ratio:3/4;padding:16px;border-radius:28px}
  .pd-card.light{justify-content:center;padding:14px 10px}
  .pd-n{padding:9px 11px;border-radius:18px;gap:8px;background:rgba(255,255,255,.93)}
  .pd-ic{width:26px;height:26px;font-size:12px}
  .pd-n b,.pd-n p{font-size:13.5px}
  .pd-bg{filter:none}
  .pd-four .hb-shared{display:none}
  .pd-four .one-brief{padding:14px 12px 8px}
  .pd-item figcaption{font-size:16px;margin-top:14px}
  .pd-nav{display:none}
}
@media (prefers-reduced-motion:reduce){.js .pd-n,.js .pd-item .one-brief li,.js .pd-item .one-brief li .ok{opacity:1!important;transform:none!important;transition:none!important}}
@container page (max-width:743px){
  .pd-card.light{padding:10px 8px;gap:0}
  .pd-four{gap:8px}
  .pd-ok{padding:4px 10px;font-size:12px}
  .pd-four .one-brief{padding:12px 12px 6px;border-radius:20px}
  .pd-four .b-head{display:none}
  .pd-four .b-brand{font-size:12px}
  .pd-four .b-title{font-size:18px}
  .pd-four .ob-rows{margin-top:8px}
  .pd-four .ob-rows li{min-height:29px;font-size:13px;grid-template-columns:14px 76px minmax(0,1fr) auto 14px;column-gap:6px}
  .pd-four .ob-rows .ti,.pd-four .ob-rows .ok{width:14px;height:14px}
  .pd-four .ob-rows small{font-size:12px}
}
/* v79 · the problem keeps its section spacing; card 4 fits on iPad */
.pd{display:block;padding:var(--gap) 0}
@container page (min-width:744px) and (max-width:1159px){
  .pd-card.light{padding:16px;gap:0}
  .pd-four{gap:8px}
  .pd-four .b-head{display:none}
  .pd-four .one-brief{padding:16px 18px 8px}
  .pd-four .b-title{font-size:20px}
  .pd-four .ob-rows{margin-top:8px}
  .pd-four .ob-rows li{min-height:32px;font-size:14px}
  .pd-four .ob-rows small{font-size:12px}
}
/* v81 · the carousel: a clock and time rows on top, notifications stacked from the top */
.pd-card:not(.light){flex-direction:column;justify-content:flex-start;align-items:center;gap:20px;padding:48px 32px 32px}
.pd-top{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-align:center}
.pd-clock{font:600 96px/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pd-sub{font-size:15px;font-weight:600;color:rgba(255,255,255,.92)}
.pd-time{font-size:15px;font-weight:600;color:#fff}
.pd-stack.full{align-self:auto;-webkit-mask-image:none;mask-image:none}
.pd-ok .orb-16{width:16px;height:16px;flex:none}
@container page (max-width:743px){
  .pd-card:not(.light){gap:12px;padding:20px 14px 14px}
  .pd-clock{font-size:64px}
  .pd-sub,.pd-time{font-size:14px}
  .pd-stack.full{gap:6px}
  .pd-stack.full .pd-n{padding:8px 10px}
}
/* v82 · carousel timeline, AI row in Aavi, the client's read view in act 1, four library cards on desktop */
.pd-card.day .pd-top{gap:4px}
@container page (max-width:743px){
  .pd-card{aspect-ratio:4/5}
  .pd-card.day{padding:14px 12px 12px;gap:8px}
  .pd-card.day .pd-stack{gap:5px}
  .pd-card.day .pd-n{padding:6px 10px;gap:8px}
  .pd-card.day .pd-ic{width:22px;height:22px;font-size:12px;border-radius:6px}
  .pd-card.day .pd-n b,.pd-card.day .pd-n p{font-size:13px;line-height:1.25}
  .pd-card.day .pd-nh{font-size:12px;line-height:1.2}
  .pd-card.day .pd-stack.full{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
  .pd-four .ob-rows li{min-height:26px}
  .pd-four .ob-rows span{display:none}
  .pd-four .ob-rows li{grid-template-columns:14px minmax(0,1fr) auto 14px}
}
.ai-row{display:flex;align-items:center;justify-content:space-between;gap:32px;width:100%;max-width:1180px;margin:8px auto 0;padding-top:28px;border-top:1px solid var(--hair)}
.ai-row p{max-width:560px}
.ai-mini{display:flex;gap:10px;flex:none}
.ai-mini .ph{width:120px;aspect-ratio:4/5;margin:0;border-radius:14px}
@container page (max-width:743px){.ai-row{flex-direction:column;align-items:flex-start;gap:0;padding-top:20px}.ai-mini{display:none}}
.rv-rows{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.rv-rows li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;opacity:.35;transition:opacity .5s var(--curve)}
.rv-rows li.done,.acts.static .rv-rows li,html:not(.js) .rv-rows li{opacity:1}
.rv-rows .ph{width:72px;aspect-ratio:1;margin:0;border-radius:12px}
.rv-rows .ph figcaption{display:none}
.rv-rows b{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--quiet);text-transform:none}
.rv-rows p{margin:2px 0 0;font-size:15px;line-height:1.4;color:var(--ink)}
.rv-price{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.rv-price span{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--quiet)}
.rv-price b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.rv-price small{grid-column:1/-1;font-size:13px;color:var(--body)}
@container page (min-width:744px){.mgrid .mc.m-x{display:none!important}}
/* v83–84 · card 3 per screen, compact notifications, never down to the card's edge */
.pd-n.fit-x{display:none!important}
@container page (max-width:1159px){
  .pd-n.pd-dk{display:none}
  .pd-card.day{justify-content:flex-start;padding:24px 28px 24px;gap:14px}
  .pd-card.day .pd-clock{font-size:64px}
  .pd-card.day .pd-n{align-items:center;padding:10px 14px;min-height:60px;box-sizing:border-box}
  .pd-card.day .pd-n:not(.pd-more) .pd-tx>b{display:none}
  .pd-card.day .pd-n p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;line-height:1.3}
  .pd-card.day .pd-stack{gap:8px}
  .pd-card.day .pd-more{min-height:40px}
  .pd-card.day .pd-stack.full{-webkit-mask-image:none;mask-image:none}
}
@container page (max-width:743px){
  .pd-n.pd-tab{display:none}
  .pd-card.day{padding:16px 12px 20px;gap:10px}
  .pd-card.day .pd-clock{font-size:48px}
  .pd-card.day .pd-sub{font-size:13px}
  .pd-card.day .pd-n{min-height:56px;padding:8px 12px}
  .pd-card.day .pd-ic{width:26px;height:26px;font-size:12px;border-radius:7px}
  .pd-card.day .pd-n p{font-size:14px}
  .pd-card.day .pd-nh{font-size:12px;line-height:1.3}
  .pd-card.day .pd-more{min-height:36px;padding:6px 12px}
}
.pd-sub,.pd-time,.pd-nh time,.pd-more p{white-space:nowrap}
.pd-four .ob-rows small{white-space:nowrap}
.pd-more p{overflow:visible!important;text-overflow:clip!important;flex:none}
.pd-ok{white-space:nowrap}
@container page (min-width:744px) and (max-width:1159px){
  .pd-card.day{gap:12px}
  .pd-card.day .pd-n{min-height:56px;padding:8px 14px}
  .pd-card.day .pd-more{min-height:36px}
}
/* v84 fixes · equal card widths, library picks by class, card 4 air at 375 */
.pd-item,.pd-card,.pd-stack,.pd-tx{min-width:0}
@container page (min-width:744px){
  .mgrid .mc.m-x{display:none!important}
  .mgrid .mc:not(.m-x){display:flex!important}
}
@container page (max-width:380px){
  .pd-four .ob-rows li{min-height:24px}
  .pd-card.light{padding:8px}
  .pd-four{gap:6px}
}
@container page (min-width:744px) and (max-width:820px){
  .pd-card.light{padding:12px 16px}
  .pd-four{gap:8px}
  .pd-four .one-brief{padding:12px 16px 6px}
  .pd-four .b-title{font-size:20px}
  .pd-four .ob-rows{margin-top:8px}
  .pd-four .ob-rows li{min-height:28px}
}
/* v85 · card 4: the brief's activity feed */
.pd-four{display:flex;flex-direction:column;gap:14px;width:100%;max-width:480px;align-items:stretch}
.pd-fh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pd-card.light .pd-time{font-size:13px;font-weight:600;color:var(--body)}
.pd-ok .orb{flex:none}
.pd-feed{display:flex;flex-direction:column;gap:10px}
.pd-a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--hair);box-shadow:0 12px 30px -20px rgba(26,25,23,.35);text-align:left}
.pd-ah{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--body)}
.pd-a p{margin:0;font-size:15px;line-height:1.35;color:var(--ink)}
.pd-a .pd-q{color:var(--body)}
.pd-a small{font-size:12px;color:var(--quiet)}
.pd-done{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#1f7a45}
[data-theme="dark"] .pd-done,.dark .pd-done{color:#5fc78a}
.pd-done svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.js .pd-a{opacity:0;transform:translateY(-16px);transition:opacity .5s var(--curve),transform .5s var(--curve)}
.js .pd-item.in .pd-a{opacity:1;transform:none}
.pd-item.in .pd-a:nth-child(2){transition-delay:.12s}.pd-item.in .pd-a:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .pd-a{opacity:1!important;transform:none!important;transition:none!important}}
@container page (max-width:743px){
  .pd-four{gap:8px}
  .pd-fh{gap:6px}.pd-ok{padding:4px 10px;font-size:12px}.pd-card.light .pd-time{font-size:12px}
  .pd-feed{gap:6px}
  .pd-a{padding:8px 11px;gap:1px;border-radius:14px;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card)}
  .pd-ah{font-size:12px}
  .pd-a p{font-size:13px;line-height:1.3}
  .pd-a small{font-size:12px}
  .pd-done{font-size:12px}
}
.pd-ic.i{background:#b4467a}
/* v85 fixes */
@container page (max-width:1159px){
  .pd-card .pd-n p,.pd-card .pd-n b{white-space:normal!important;overflow:hidden;text-overflow:clip!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@container page (max-width:380px){
  .pd-fh{flex-wrap:nowrap;gap:6px}
  .pd-ok{padding:3px 8px!important;font-size:12px!important;gap:4px}
  .pd-card.light .pd-time{font-size:12px!important;white-space:nowrap}
  .pd-a p{font-size:12.5px!important}
  .pd-a small{font-size:12px!important}
  .pd-card.light{padding:10px}
  .pd-feed{gap:5px}
  .pd-a{padding:7px 10px}
}
@container page (min-width:744px) and (max-width:820px){
  .pd-card:not(.light):not(.day){padding-top:18px;padding-bottom:18px}
  .pd-card:not(.light):not(.day) .pd-stack{gap:6px}
  .pd-card:not(.light):not(.day) .pd-n{padding:8px 12px}
}

/* ---------- v86 · library: one slow rail of the library next to the umbrella, same height as before ---------- */
@container page (min-width:744px){
  .mosaic .mgrid{display:grid!important;grid-template-columns:200px minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:12px!important;align-items:stretch}
  .mgrid>.mc.pick{display:flex!important;z-index:2}
  .mrail{position:relative;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 64px),transparent)}
  .mtrack{display:flex;gap:12px;width:max-content;height:100%;animation:mrail 90s linear infinite;will-change:transform}
  .mrail:hover .mtrack,.mrail:focus-within .mtrack,.mosaic.pre .mtrack{animation-play-state:paused}
  .mtrack .mc{display:flex!important;flex:0 0 200px;width:200px}
}
@container page (min-width:744px) and (max-width:1159px){
  .mosaic .mgrid{grid-template-columns:180px minmax(0,1fr)!important}
  .mtrack .mc{flex-basis:180px;width:180px}
}
@keyframes mrail{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none!important}
  .mrail{overflow-x:auto;scrollbar-width:none}
  .mrail::-webkit-scrollbar{display:none}
  .mtrack .mc.dup{display:none!important}
}
@container page (max-width:743px){
  .mrail,.mtrack{display:contents}
  .mgrid .mc:not(.dup){display:flex!important}
  .mgrid .mc.dup{display:none!important}
}

/* ---------- v87 · library on the phone: one card that shows Add, two quiet rows that show how much there is ---------- */
.mtiles{display:none}
@container page (max-width:743px){
  .mosaic .mgrid{display:block!important;overflow:visible!important;padding:0 var(--pad)!important}
  .mgrid .mrail{display:none!important}
  .mgrid .mc.pick{display:grid!important;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:2px;align-items:start;padding:10px!important}
  .mgrid .mc.pick .ph{grid-row:1/4;aspect-ratio:1/1;margin:0!important;border-radius:10px}
  .mgrid .mc.pick .ph figcaption{display:none}
  .mgrid .mc.pick small{margin-top:2px}
  .mgrid .mc.pick b{font-size:16px!important}
  .mgrid .mc.pick .d{font-size:13px!important;-webkit-line-clamp:2}
  .mgrid .mc.pick .add{position:static!important;grid-column:2;justify-self:start;align-self:end;margin-top:6px}
  .mtiles{display:flex;flex-direction:column;gap:6px;margin-top:12px}
  .mrow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent)}
  .mrow-t{display:flex;gap:6px;width:max-content;animation:mrowL 70s linear infinite}
  .mrow.r .mrow-t{animation-name:mrowR;animation-duration:80s}
  .mt{position:relative;flex:none;width:76px;height:76px;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,var(--card));border:1px solid var(--hair);display:flex;align-items:flex-end}
  .mt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .mt b{position:relative;width:100%;padding:0 6px 6px;font-size:12px;font-weight:600;line-height:1.15;color:var(--ink);text-wrap:balance}
  .mt img[src]+b{color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.45));padding-top:16px}
  .mscale{margin:8px var(--pad) 0;font-size:14px;color:var(--body)}
  .mosaic .mbrief{margin:16px var(--pad) 0!important;width:auto!important;max-width:none!important}
}
@keyframes mrowL{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 3px))}}
@keyframes mrowR{from{transform:translateX(calc(-50% - 3px))}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.mrow-t{animation:none!important;transform:none!important}}

/* v88 · Share menu after the thanks (hero and end), same links as the profile card */
.share-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.share-wrap[hidden]{display:none}
.share-menu{position:absolute!important;top:auto!important;bottom:calc(100% + 8px)!important;left:50%;transform:translateX(-50%);z-index:5;min-width:200px;margin:0!important;background:var(--card)!important;border:1px solid var(--line,var(--hair))!important;box-shadow:var(--soft)!important;text-align:left}
.share-menu[hidden]{display:none!important}
/* step 4: buttons without an icon use the full width */
.pf-step[data-step="4"] .pf-big button{grid-template-columns:minmax(0,1fr)}
/* share menu in the profile card: full-width rows */
.pf-step[data-step="5"] .pf-share-wrap{flex:1 1 100%;width:100%}
.pf-step[data-step="5"] .pf-share-wrap>.btn{width:100%;justify-content:center}
.pf-step[data-step="5"] .pf-acts>.btn.line{flex:1 1 100%;justify-content:center}
.pf-menu a,.pf-menu button{display:flex!important;align-items:center;width:100%;min-height:44px;box-sizing:border-box;text-align:left}
.pf-step[data-step="5"] .pf-menu{width:100%;box-sizing:border-box}

/* v90 · hero orb 30 % smaller on every screen; the hero gives back the space so what's below moves up */
.orb-hero{width:140px!important;height:140px!important}
.orb-stage .bloom{width:600%;height:600%}
.hero-col{min-height:calc(100svh - 140px - 86px - 60px)}
@container page (min-width:744px) and (max-width:1159px){.orb-hero{width:126px!important;height:126px!important}}
@container page (max-width:743px){.orb-hero{width:84px!important;height:84px!important}.hero-col{min-height:0}}
@media (max-height:900px){.orb-hero{width:105px!important;height:105px!important}}
@media (max-height:760px){.orb-hero{width:77px!important;height:77px!important}}

/* ---------- v91 · motion when things come into view ---------- */
:root{--me:cubic-bezier(.28,.11,.32,1)}
.m [data-m]{transition:opacity .8s var(--me) var(--mdl,0ms),translate .8s var(--me) var(--mdl,0ms)}
.m [data-m]:not(.m-in){opacity:0;translate:0 40px}
.m [data-m="h"]{transition:none}
.m [data-m="h"]:not(.m-in){opacity:1;translate:none}
.mw{display:inline-block;overflow:visible clip;padding:.12em 0 .16em;margin:-.12em 0 -.16em;vertical-align:top}
.mnb{white-space:nowrap}
.mwi{display:inline-block}
.m [data-m="h"] .mwi{transition:translate .9s var(--me),opacity .9s var(--me);transition-delay:calc(var(--ln,0) * 90ms)}
.m [data-m="h"]:not(.m-in) .mwi{translate:0 -105%;opacity:0}
.m-sc{transform-origin:50% 40%;will-change:scale}
.sec.for .for-cards .ph img{scale:1.12;translate:0 var(--py,0px);will-change:translate}
.sec.for .for-cards > div{overflow:hidden}
.m .end .orb-stage{transition:scale 1.2s var(--me)}
.m .end .end-glow{transition:opacity 1.4s var(--me) .15s}
.m .end:not(.m-in) .orb-stage{scale:.8}
.m .end:not(.m-in) .end-glow{opacity:0}
.layer{transition:opacity .7s var(--me),transform .8s var(--me)}
.js .pd-n{transition:opacity .5s var(--me),transform .5s var(--me)}
@media (prefers-reduced-motion:reduce){.m-sc{scale:none!important}.sec.for .for-cards .ph img{translate:none!important;scale:1}}

/* ---------- v92 · Inter, calmer type, one grid, bands, bento, laptop ---------- */
:root{--sans:'Inter',-apple-system,"Helvetica Neue",Arial,sans-serif;--r:24px;--ri:12px;--cw:1200px;
  --soft:0 1px 2px rgba(26,25,23,.04),0 14px 36px -18px rgba(26,25,23,.22);--shadow:0 60px 120px -50px rgba(26,25,23,.38),0 2px 6px rgba(26,25,23,.05);
  --warm:#efeae2;--band:var(--ground)}
:root.theme-dark{--warm:#1c1b18}
@media (prefers-color-scheme:dark){:root:not(.theme-light){--warm:#1c1b18}}
body{font-family:var(--sans);font-optical-sizing:auto;letter-spacing:-.011em}
h1,h2,h3,.pd-h,.b-title,.lb-t{font-weight:600!important;letter-spacing:-.025em!important;line-height:1.08!important}
main,.foot,.bar-host{--t1:clamp(72px,6.2vw,88px);--t2:52px;--gap:160px}
@container page (max-width:1159px){main,.foot,.bar-host{--t1:64px;--t2:42px;--gap:120px}}
@container page (max-width:743px){main,.foot,.bar-host{--t1:40px;--t2:30px;--gap:80px}}
/* Garamond only in the hero's last word and the letter */
h2 em,h3 em,.pd-h em,.lk-claims em,.pbx-claims em,.claims em,.p-lines em,.lk-turn em,.end h2 em,.b-title{font-family:var(--sans)!important;font-style:normal!important;font-weight:inherit!important;font-size:inherit!important;letter-spacing:inherit!important;color:inherit}
.b-title{font-weight:600!important}
.letter .lead,.letter .lead em,.hero h1 em{font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important}
/* labels: sentence case, no wide tracking, at least 12 px */
.b-kick,.b-brand,.lib-tag,small,.ps-h,.pd-nh,.counter,.act-kick,.kick,.aavi-kick,.a-state,.b-st{text-transform:none!important;letter-spacing:0!important}
/* hero */
.kicker{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.on-grad .consent,.consent{font-size:13px!important;color:var(--body)!important;gap:8px;min-height:44px}
.consent .box{width:16px;height:16px;border-radius:5px;border-color:var(--line)}
.consent a{color:var(--body)}
.hero-brief{max-width:calc(var(--cw) + 2 * var(--pad))!important;perspective:none!important}
.laptop{width:100%;max-width:var(--cw);margin:0 auto}
.lt-screen{position:relative;padding:14px 14px 0;border-radius:var(--r) var(--r) 0 0;background:#111110;box-shadow:var(--shadow)}
.lt-screen::before{content:"";position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2b2a28}
.lt-view{overflow:hidden;border-radius:var(--ri) var(--ri) 0 0;padding:32px 40px 0;background:var(--warm)}
.lt-view .hb-tilt{transform:none!important}
.lt-view .brief.hb{max-width:none;margin:0;border:0!important;border-radius:var(--ri) var(--ri) 0 0!important;box-shadow:none!important}
.lt-base{position:relative;height:16px;margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(#d7d3cc,#b6b1a9);box-shadow:var(--soft)}
.lt-base::before{content:"";position:absolute;top:0;left:50%;width:16%;height:6px;margin-left:-8%;border-radius:0 0 8px 8px;background:#a7a29a}
:root.theme-dark .lt-base{background:linear-gradient(#45433f,#2a2926)}:root.theme-dark .lt-base::before{background:#22211f}
@media (prefers-color-scheme:dark){:root:not(.theme-light) .lt-base{background:linear-gradient(#45433f,#2a2926)}:root:not(.theme-light) .lt-base::before{background:#22211f}}
@container page (max-width:743px){
  .lt-screen{padding:0;background:none;box-shadow:none;border-radius:0}.lt-screen::before,.lt-base{display:none}
  .lt-view{padding:0;background:none;border-radius:0;overflow:visible}
  .lt-view .brief.hb{border-radius:var(--r)!important;box-shadow:var(--shadow)!important}
}
/* bands instead of lines */
.prob2{background:var(--warm)!important}.acts{background:var(--ground)!important}
.bento-sec{background:var(--warm)}.sec.for{background:var(--ground)}
.sec.letter{background:var(--warm)!important;border-radius:0!important;margin:0!important;max-width:none!important}
.sec.faq{background:var(--ground)}
.sec,.prob2 .pd{padding-block:var(--gap)!important}
.sec>h2,.pd-h,.sec.for>h2,.faq h2{text-align:center!important;margin-inline:auto!important;max-width:var(--cw)!important}
.sec.for>.for-note,.sec.lib>.lede{text-align:center!important;max-width:640px!important;margin:-24px auto 0!important;padding:0!important;align-self:center!important}
.sec>h2+*{margin-top:0}
.sec{gap:56px}
@container page (max-width:743px){.sec{gap:32px}.sec.for>.for-note{margin-top:-12px!important}}
/* one content width and one left edge */
.pd{--side:max(var(--pad),calc((100% - var(--cw)) / 2))!important}
.pd-h{padding:0 var(--pad)!important;margin-bottom:56px!important}
.sec.for .for-cards,.bento{max-width:var(--cw)!important}
.acts-sticky{max-width:calc(var(--cw) + 2 * var(--pad))!important}
.f-grid{display:flex!important;flex-direction:column;align-items:center;gap:56px;max-width:var(--cw)!important;margin:0 auto}
.f-side,.f-stick{position:static!important;width:100%}
.faq .qa{width:100%;max-width:800px!important;margin:0 auto}
@container page (max-width:743px){.pd-h{margin-bottom:32px!important}.f-grid{gap:32px}}
/* cards: one radius, one shadow, no hairlines */
.brief,.aavi-card,.tile,.mc,.mbrief,.pd-card,.for-cards>div,.layer .brief,.phone,.lk-scene,.pbx-board,.l-panel,.end{border-radius:var(--r)!important}
.end{border-radius:var(--r) var(--r) 0 0!important}
.brief,.aavi-card,.tile,.mc,.mbrief,.layer .brief,.after{border:0!important;box-shadow:var(--soft)!important}
.hero-brief .brief{box-shadow:none!important}
.ph,.ai-mini .ph,.lm,.selects figure,.hb-moods .ph{border-radius:var(--ri)!important}
/* bento */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%;margin:0 auto}
.bento .tile{display:flex!important;flex-direction:column;gap:10px;min-width:0;min-height:0;height:min(80svh,400px);max-height:80svh;padding:36px!important;background:var(--card)!important;overflow:hidden;text-align:left}
.bento .t-see,.bento .t-ask{height:min(80svh,660px)}
.bento .tile h3{margin:0;font-size:30px!important;max-width:none}
.bento .tile>p{margin:0;font-size:17px;color:var(--body);max-width:44ch}
.bento .tile .aavi-kick{margin-bottom:2px}
.bento .tile .t-img,.bento .tile .vis,.bento .tile .chat{flex:1;min-height:0;margin-top:14px}
.bento .t-see .vis{overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.bento .t-see .mini-ch{box-shadow:none!important;background:var(--ground)!important}
.bento .t-ask .chat{display:flex;flex-direction:column;gap:10px}
.bento .t-ask .thread{flex:1;height:auto!important;min-height:0!important;max-height:none!important}
.t-img{display:flex;align-items:flex-end}
.lib-mini{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.lm{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:12px;min-height:120px;background:var(--tile)}
.lm small{font-size:12px;color:var(--quiet)}.lm b{font-size:14px;font-weight:600;line-height:1.25}
.lm-add{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:999px;background:var(--fill);color:var(--onFill);font-size:12px;font-weight:600}
.sign-mini,.pay-mini{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:10px}
.sm-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:var(--ri);background:var(--goldTint);color:var(--ink)}
.sm-card small{font-size:12px;font-weight:600;color:var(--goldText)}
.sm-card svg{width:150px;height:auto;color:var(--ink)}.sm-card svg path{stroke-dashoffset:0!important}
.sm-card span{font-size:13px;color:var(--body)}
.pm-row{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--ri);background:var(--ground);font-size:14px}
.pm-row span{color:var(--quiet)}.pm-row b{font-weight:600;text-align:right}
.pm-track{height:4px;border-radius:2px;background:var(--off);overflow:hidden}.pm-track i{display:block;height:100%;width:100%;background:#1f7a45}
.t-ai .ai-mini{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.t-ai .ai-mini .ph{display:block!important;visibility:visible!important;aspect-ratio:16/10;margin:0;background:var(--tile)}
.no-media .t-ai .ai-mini .ph{display:block!important}
@container page (max-width:743px){
  .bento{grid-template-columns:minmax(0,1fr);gap:12px}
  .bento .tile{height:auto;padding:24px!important}
  .bento .t-see,.bento .t-ask{height:min(80svh,600px)}
  .bento .tile h3{font-size:24px!important}
  .bento .tile>p{font-size:16px}
}
/* the dark cards: notifications sit in the middle, no empty bottom */
.pd-card:not(.light){justify-content:flex-start}
.pd-card .pd-stack{margin-block:auto}
.lt-screen{box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.07)}
.lm-add{white-space:nowrap}
.t-ai .ai-mini .ph{width:100%!important;height:auto!important;max-width:none!important}
.pm-row b{white-space:nowrap}
:root.theme-dark{--soft:0 1px 2px rgba(0,0,0,.3),0 14px 36px -18px rgba(0,0,0,.6);--shadow:0 60px 120px -50px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){:root:not(.theme-light){--soft:0 1px 2px rgba(0,0,0,.3),0 14px 36px -18px rgba(0,0,0,.6);--shadow:0 60px 120px -50px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.3)}}

/* v93 · Söhne for headings, Inter for everything else; headings tracked −0.03 em */
:root{--head:'Söhne',-apple-system,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3,.pd-h,.lk-claims p,.pbx-claims p,.lk-turn,.lk-after h2,#pf-h{font-family:var(--head)!important;font-weight:700!important;letter-spacing:-.03em!important}
h1 em,h2 em,h3 em,.pd-h em,.lk-claims em,.pbx-claims em,.claims em,.p-lines em,.lk-turn em,.end h2 em,#pf-h em,.b-title{font-family:var(--head)!important;font-style:normal!important;font-weight:700!important}
.hero h1 em,.letter em{font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.01em!important}

/* v93b · brief title in the app's own type; Questions: same space between heading and content as other sections */
.b-title,.hero-brief .b-title,.layer .b-title,.pd-four .b-title{font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.01em!important}
.faq .f-grid{gap:48px!important}
.faq .f-side,.faq .f-stick,.faq h2{margin:0!important;padding:0!important}
.faq .qa{margin-top:0!important;padding-top:0!important}
.faq .qa details:first-child summary{padding-top:0}
@container page (max-width:743px){.faq .f-grid{gap:32px!important}}

/* demo only · Start over */
.demo-restart{display:block;margin:12px auto 0;min-height:44px;padding:0 12px;border:0;background:none;color:inherit;font:500 14px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;opacity:.75;cursor:pointer}
.demo-restart:hover{opacity:1}

/* v95 · hero brief with images: moodboard row and chapter thumbnails (calm sand placeholders until CJ's images exist) */
:root{--sand1:#ebdfca;--sand2:#dfcdb0;--sand3:#d3bd99;--sand4:#e6d6bb;--sand5:#cbb48f}
:root.theme-dark{--sand1:#5a4f40;--sand2:#4f4536;--sand3:#463c2f;--sand4:#554a3b;--sand5:#41382b}
@media (prefers-color-scheme:dark){:root:not(.theme-light){--sand1:#5a4f40;--sand2:#4f4536;--sand3:#463c2f;--sand4:#554a3b;--sand5:#41382b}}
.hero-brief .hbp{display:block!important;visibility:visible!important;position:relative;margin:0;overflow:hidden;border-radius:8px;border:0!important;background:var(--sand1)}
.hero-brief .hbp.s1{background:linear-gradient(160deg,var(--sand1),var(--sand2))}.hero-brief .hbp.s2{background:linear-gradient(170deg,var(--sand4),var(--sand3))}.hero-brief .hbp.s3{background:linear-gradient(150deg,var(--sand2),var(--sand5))}.hero-brief .hbp.s4{background:linear-gradient(175deg,var(--sand1),var(--sand4))}.hero-brief .hbp.s5{background:linear-gradient(160deg,var(--sand3),var(--sand2))}
.hero-brief .hbp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.hero-brief .hbp.loaded img{opacity:1}
.hero-brief .hbp figcaption{display:none!important}
.no-media .hero-brief .hb-moods.hbm,.hero-brief .hb-moods.hbm{display:flex!important;gap:6px;height:56px;margin:2px 0 4px;overflow:hidden}
.hero-brief .hbm .hbp{flex:none;height:100%}
.hero-brief .hbm .p{aspect-ratio:3/4}.hero-brief .hbm .l{aspect-ratio:4/3}
.hero-brief .b-ch li em.hbx{display:flex!important;align-items:center;justify-content:space-between;gap:10px;min-width:0;-webkit-line-clamp:unset!important}
.hero-brief .hbx>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-brief .hbt{display:flex;gap:4px;flex:none}
.hero-brief .hbt .hbp{height:26px;border-radius:6px}
.hero-brief .hbt .sq{aspect-ratio:1}.hero-brief .hbt .l{aspect-ratio:4/3}
.hero-brief .hbt .face{width:26px;aspect-ratio:1;border-radius:50%}
.hero-brief .hbb{position:relative;display:flex}
.hero-brief .hbb i{position:absolute;right:-6px;bottom:-7px;padding:1px 5px;border-radius:6px;background:var(--ink);color:var(--ground);font:600 12px/1.3 var(--sans);font-style:normal;white-space:nowrap}
@container page (max-width:743px){
  .no-media .hero-brief .hb-moods.hbm,.hero-brief .hb-moods.hbm{height:48px;gap:5px}
  .hero-brief .hbm .hbp:nth-child(5){display:none!important}
  .hero-brief .hbt .hbp{height:24px}.hero-brief .hbt .face{width:24px}
}

/* v96 · fixes after the coordinator's measurement of v95 */
/* 5 · inner spans in the hero chapters keep the text style, not the number style */
.hero-brief .b-ch li em.hbx span{display:inline;font:inherit;color:inherit;letter-spacing:inherit;opacity:1;font-variant-numeric:normal}
.hero-brief .b-ch li em.hbx>span:first-child{flex:1 1 auto;display:block}
.hero-brief .b-ch li em.hbx .hbt,.hero-brief .b-ch li em.hbx .hbb{display:flex}
/* 4 · booked: a small dot on the booked portrait, inside its edge */
.hero-brief .hbb i{right:0;bottom:0;width:9px;height:9px;padding:0;border-radius:50%;background:#1f7a45;box-shadow:0 0 0 2px var(--card);font-size:0;line-height:0;color:transparent;overflow:hidden}
/* 1 · library tile on the phone: a round ✓ button inside the card */
.lm{position:relative}
.lm-add i{display:none;font-style:normal}
@container page (max-width:743px){
  .lm-add{position:absolute!important;top:6px;right:6px;display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:0!important;padding:0!important;border-radius:50%!important;font-size:0!important}
  .lm-add i{display:block;font-size:18px;line-height:1}
  .lm-add-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .lm{padding-top:56px!important}
  /* 2 · the look shows its text; 3 · hero brief ≤ 80 % of 844 */
  .hero-brief .b-ch li em.hbx{flex-direction:row!important}
  .hero-brief .b-ch li em.hbx>span:first-child{white-space:normal;overflow:visible}
  .hero-brief .b-ch li:nth-child(3){display:none!important}
  .hero-brief .b-ch li{padding:7px 0!important}
  .no-media .hero-brief .hb-moods.hbm,.hero-brief .hb-moods.hbm{height:40px}
}
/* 7 · acts cards within 80 % of a 720 px window */
@media (min-width:1160px) and (max-height:820px){
  .acts-stage{height:min(560px,76svh)!important}
  .layer .brief,.act .brief{padding:18px 22px!important;gap:6px!important}
  .layer .b-title{font-size:24px!important}
  .layer .rv-rows li,.layer .b-ch li{padding-top:5px!important;padding-bottom:5px!important}
  .layer .selects{gap:6px!important}
  .phone{height:min(540px,74svh)!important}
}

/* v96b */
.hero-brief .b-ch li em.hbx span{font-size:inherit!important;font-weight:inherit!important;color:inherit!important;letter-spacing:inherit!important;opacity:1!important}
@media (min-width:1160px) and (max-height:820px){
  .layer[data-layer="0"] .rv-rows li:nth-child(n+3){display:none!important}
  .layer[data-layer="0"] .rv-price{padding-top:8px!important;padding-bottom:8px!important;margin-top:4px!important}
  .layer[data-layer="0"] .b-sign{padding-top:6px!important;margin-top:0!important}
  .layer[data-layer="0"] .b-sign .sig{height:40px!important;width:auto!important}
  .layer .after{gap:8px!important}
  .layer .after .selects{max-height:220px}
}

/* v97 · role-card names and FAQ questions are headings: Söhne bold */
.sec.for .for-cards b,.for-cards b,.faq .qa summary{font-family:var(--head)!important;font-weight:700!important;letter-spacing:-.02em!important}

/* v98 · hero orb another 30 % smaller (from the v90 sizes) */
.orb-hero{width:98px!important;height:98px!important}
@container page (min-width:744px) and (max-width:1159px){.orb-hero{width:88px!important;height:88px!important}}
@container page (max-width:743px){.orb-hero{width:59px!important;height:59px!important}}
@media (max-height:900px){.orb-hero{width:74px!important;height:74px!important}}
@media (max-height:760px){.orb-hero{width:54px!important;height:54px!important}}
.hero-col{min-height:calc(100svh - 140px - 86px - 100px)}
@container page (max-width:743px){.hero-col{min-height:0}}

/* v98b · the end orb 30 % smaller too */
.orb-end{width:84px!important;height:84px!important}
@container page (max-width:743px){.orb-end{width:67px!important;height:67px!important}}

/* v98c · phone: both orbs another 30 % smaller */
@container page (max-width:743px){.orb-hero{width:41px!important;height:41px!important}.orb-end{width:47px!important;height:47px!important}}

/* v98d · phone: both orbs 20 % larger than v98c */
@container page (max-width:743px){.orb-hero{width:49px!important;height:49px!important}.orb-end{width:56px!important;height:56px!important}}

/* v99 · no square box behind rounded cards: wrappers carry no background, border, outline or shadow */
.hb-tilt,.lt-view,.acts-stage,.sec.lib .mosaic,.layer,.duo{background:none!important;border:0!important;outline:0!important;box-shadow:none!important}
.hero-brief .brief,.layer .brief,.aavi-card,.tile{border-radius:var(--r,24px)!important;overflow:clip}
@container page (max-width:743px){
  .hero-brief .laptop,.hero-brief .lt-screen,.hero-brief .lt-view,.hero-brief .hb-tilt{background:none!important;border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;border-radius:var(--r,24px)!important}
  .hero-brief .lt-base,.hero-brief .laptop::before,.hero-brief .laptop::after,.hero-brief .lt-screen::before,.hero-brief .lt-screen::after{display:none!important}
}

/* v99b · iPad: both orbs 15 % smaller */
@container page (min-width:744px) and (max-width:1159px){.orb-hero{width:75px!important;height:75px!important}.orb-end{width:71px!important;height:71px!important}}

/* v100 · The team: five people, overlapping like avatars */
.hero-brief .hbteam{gap:0!important}
.hero-brief .hbteam .hbp{box-shadow:0 0 0 2px var(--card)}
.hero-brief .hbteam .hbp+.hbp{margin-left:-7px}

/* v101 · Questions: the same space above and below every question, between every line */
.faq .qa details{margin:0!important;padding:0!important;border:0!important;border-top:1px solid var(--hair)!important}
.faq .qa details:last-child{border-bottom:1px solid var(--hair)!important}
.faq .qa summary,.faq .qa details:first-child summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;margin:0!important;padding:18px 0!important;line-height:1.3}
.faq .qa details>p{margin:0!important;padding:0 0 20px!important}
@container page (max-width:743px){.faq .qa summary,.faq .qa details:first-child summary{min-height:56px;padding:14px 0!important}.faq .qa details>p{padding-bottom:16px!important}}