:root{
  --bg:#faf9fc; --surface:#ffffff; --surface-2:#f4f0fb;
  --ink:#1e0c45; --text:#2b2540; --muted:#615a78; --faint:#8d87a3;
  --line:#ebe6f4; --line-2:#ddd5ee;
  --violet:#6e3adf; --violet-2:#875ce4; --lilac:#cbb9f4; --lilac-2:#a280ea; --mist:#e3d8f9; --mist-2:#f1ebfd;
  --teal:#3fae8f; --teal-soft:#c9eadf; --coral:#f0634b; --coral-soft:#ffe0da;
  --heat-lo:#f1ebfd; --heat-hi:#5a28c9;
  --r-us:#1e0c45; --r-eu:#6e3adf; --r-apac:#a280ea; --r-latam:#3fae8f; --r-mea:#ff7c66;
  --btn:#1e0c45; --btn-text:#ffffff;
  --hero:#6e3adf; --hero-cell:#e3d8f9;
  --shadow:0 1px 0 rgba(30,12,69,.04), 0 12px 32px -18px rgba(30,12,69,.18);
  --display:"Manrope", "Inter", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark) and (min-width:100000px){
  :root:not([data-theme="light"]){
    --bg:#110a22; --surface:#1a1231; --surface-2:#22183f;
    --ink:#f3eeff; --text:#ddd6ef; --muted:#a79fc2; --faint:#7e769a;
    --line:#2b2148; --line-2:#3a2e5e;
    --violet:#9d7bf0; --violet-2:#b096f4; --lilac:#5a46a0; --lilac-2:#8a6ce6; --mist:#2d2152; --mist-2:#231a42;
    --teal:#5cc9a8; --teal-soft:#1d4a3f; --coral:#ff8a74; --coral-soft:#4b2520;
    --heat-lo:#251b45; --heat-hi:#b39af5;
    --r-us:#f3eeff; --r-eu:#9d7bf0; --r-apac:#6c55b8; --r-latam:#5cc9a8; --r-mea:#ff8a74;
    --btn:#f3eeff; --btn-text:#1e0c45;
    --hero:#4a22b0; --hero-cell:#b9a3f2;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 12px 32px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="__light-only__"]{
    --bg:#110a22; --surface:#1a1231; --surface-2:#22183f;
    --ink:#f3eeff; --text:#ddd6ef; --muted:#a79fc2; --faint:#7e769a;
    --line:#2b2148; --line-2:#3a2e5e;
    --violet:#9d7bf0; --violet-2:#b096f4; --lilac:#5a46a0; --lilac-2:#8a6ce6; --mist:#2d2152; --mist-2:#231a42;
    --teal:#5cc9a8; --teal-soft:#1d4a3f; --coral:#ff8a74; --coral-soft:#4b2520;
    --heat-lo:#251b45; --heat-hi:#b39af5;
    --r-us:#f3eeff; --r-eu:#9d7bf0; --r-apac:#6c55b8; --r-latam:#5cc9a8; --r-mea:#ff8a74;
    --btn:#f3eeff; --btn-text:#1e0c45;
    --hero:#4a22b0; --hero-cell:#b9a3f2;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 12px 32px -18px rgba(0,0,0,.6);
}
html{scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); margin:0; letter-spacing:-.02em}
p{margin:0}
a{color:var(--violet)}
button,select,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--violet); outline-offset:2px; border-radius:6px}
img,svg{max-width:100%}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px} body{font-size:16px}}

/* top bar */
.bar{position:fixed; top:0; left:0; right:0; z-index:40; padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line); transform:translateY(-110%); transition:transform .3s ease}
.bar.on{transform:none}
.bar .wrap{min-width:0; display:flex; align-items:center; gap:16px; height:60px}
.bar .logo{height:22px; color:var(--ink); display:flex}
.bar .logo svg{height:22px; width:auto}
.bar .rep{font:600 15px/1 var(--display); color:var(--ink); white-space:nowrap}
.bar .sep{width:1px; height:20px; background:var(--line-2)}
#secNav{min-width:0; margin-left:auto; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{font:500 14px/1 var(--body); color:var(--muted); text-decoration:none; padding:9px 10px; border-radius:8px; white-space:nowrap}
.bar nav a:hover{color:var(--ink); background:var(--mist-2)}
.bar nav a.cur{color:var(--violet); background:var(--mist-2)}
.bar .prog{position:absolute; left:0; bottom:-1px; height:2px; background:var(--violet); width:0}
@media (max-width:820px){.bar .rep,.bar .sep{display:none} .bar nav a span{display:none}}

/* v13: the cover is the Figma frame itself, exported as SVG and embedded 1:1 */
.cover{background:#6e3adf; height:auto; padding:0; display:block}
.cover canvas{display:none}
.cv13{position:relative; width:100%; aspect-ratio:1472/828; min-height:560px; max-height:960px; overflow:hidden}
.cv13 .fsvg{position:absolute; inset:0; width:100%; height:100%; display:block}
@media (max-width:900px){.cv13{aspect-ratio:3/4; height:auto; min-height:0; max-height:none}}

/* phone cover: keep a landscape frame so the side panels peek in; the baked title is swapped for live text that can wrap */
.cv-mt{display:none}
@media (max-width:900px){
  .cv13{aspect-ratio:3/4; height:auto; min-height:0; max-height:none}
  .cv13 .cv-bk{display:none}
  .cv-mt{display:flex; position:absolute; inset:15% 9% 15%; z-index:2; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0; pointer-events:none}
  .cv-mt .lg{display:flex; color:#FFFFFF; margin-bottom:clamp(8px,3vw,14px)} .cv-mt .lg svg{height:clamp(16px,5vw,22px); width:auto}
  .cv-mt{inset:15% 11% 15%}
  .cv-mt b{display:block; max-width:100%; font:500 clamp(24px,7.4vw,56px)/1.04 Inter, var(--body); letter-spacing:-.03em; color:#EFEAFC; overflow-wrap:break-word; text-wrap:balance}
  .cv-mt b span{display:block; color:#CBB9F4}
  .cv-mt p{margin:clamp(8px,2.6vw,16px) 0 0; max-width:min(100%,460px); font:400 clamp(11px,3.4vw,17px)/1.4 Inter, var(--body); color:#F6F0FF}
  .cv-mt .lg svg{height:clamp(16px,4.6vw,30px)}
}
/* chapters menu: pale violet frame like chart cards, six equal centred cells */
.chapters{background:var(--bg); padding:28px 0}
.ch-list{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line-2); gap:1px; background:var(--line-2)}
.ch{display:flex; align-items:center; justify-content:center; text-align:center; min-height:64px; padding:14px 16px; background:var(--bg); color:var(--ink); text-decoration:none; font:600 15px/1.3 var(--display); letter-spacing:-.005em; transition:background .2s, color .2s}
a.ch:hover{background:var(--mist-2); color:var(--violet)}
.ch.soon{color:var(--faint); cursor:default}
@media (max-width:980px){.ch-list{grid-template-columns:repeat(3,1fr)} .ch-list .ch:last-child{grid-column:span 2}}
@media (max-width:560px){.chapters{padding:20px 0} .ch-list{grid-template-columns:repeat(2,1fr)} .ch{min-height:56px; padding:12px 10px; font-size:14px}}

/* chapter 2 components */
:root{--pw:#a280ea; --pm:#6e3adf; --pa:#4a22b0; --po:#cfccd8; --pl:#1e0c45; --track:#e7e3ef}
@media (prefers-color-scheme: dark) and (min-width:100000px){:root:not([data-theme="light"]){--pw:#8a6ce6; --pm:#9d7bf0; --pa:#c4b0ff; --po:#4a4560; --pl:#f3eeff; --track:#2b2148}}
:root[data-theme="__light-only__"]{--pw:#8a6ce6; --pm:#9d7bf0; --pa:#c4b0ff; --po:#4a4560; --pl:#f3eeff; --track:#2b2148}
.sb{display:grid; gap:8px}
.sb-g{font:600 12px/1 var(--body); color:var(--faint); text-transform:uppercase; letter-spacing:.07em; margin:12px 0 2px}
.sb-g:first-child{margin-top:0}
.sb-row{display:grid; grid-template-columns:minmax(110px,28%) 1fr; gap:12px; align-items:center; font-size:14px}
.sb-row .nm{color:var(--text); font-weight:500; line-height:1.25}
.sb-row.hl .nm{color:var(--ink); font-weight:700}
.sb-bar{display:flex; height:28px; background:var(--surface-2)}
.sb-bar i{display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; font-weight:600; overflow:hidden; white-space:nowrap; transition:width .45s cubic-bezier(.2,.7,.2,1)}
@media (max-width:520px){.sb-row{grid-template-columns:92px 1fr; gap:8px; font-size:13px} .sb-bar i{font-size:11px}}
.big2{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:22px}
.big2 div{background:var(--surface); padding:16px 18px}
.big2 b{display:block; font:700 clamp(32px,4vw,44px)/1 var(--display); color:var(--ink); letter-spacing:-.03em}
.big2 span{display:block; margin-top:8px; font-size:14px; line-height:1.4; color:var(--muted)}
.big2 em{font-style:normal; font-weight:700}
.big2.under{margin:22px 0 26px}
.sub-h{font:600 15px/1.3 var(--display); color:var(--ink); margin:0 0 14px}
.c-head.sub2{margin:32px 0 14px}
.ab .tr .ref50{position:absolute; left:50%; top:-5px; bottom:-5px; width:0; border-left:1.5px dashed var(--coral)}
.grp-h{font:600 14px/1.3 var(--display); color:var(--ink); margin:4px 0 10px}
.grp + .grp{margin-top:22px}
.gb-row{display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; margin-bottom:10px; font-size:14px}
.gb-row .nm{color:var(--text); font-weight:500}
.gb-bars{display:grid; gap:3px}
.gb-bars div{position:relative; height:18px}
.gb-bars i{position:absolute; left:0; top:0; bottom:0; transition:width .45s}
.gb-bars b{position:absolute; top:50%; transform:translateY(-50%); font-size:12px; font-weight:600; color:var(--ink); padding-left:6px; white-space:nowrap}
.dd{display:grid; gap:12px}
.dd-row{display:grid; grid-template-columns:minmax(120px,30%) 1fr 48px; gap:12px; align-items:center; font-size:14px}
.dd-row .nm{color:var(--text); font-weight:500}
.dd-tr{position:relative; height:34px; background:var(--track)}
.dd-tr i{position:absolute; left:0; top:0; bottom:0; background:var(--violet); display:flex; align-items:center; padding-left:10px; font-style:normal; font-weight:700; font-size:14px; color:#fff}
.dd-row.full .dd-tr i{background:var(--faint)}
.dd-row s{text-decoration:none; font-weight:700; font-size:14px; color:var(--coral); text-align:right; white-space:nowrap}
@media (max-width:520px){.dd-row{grid-template-columns:84px 1fr 42px; gap:8px; font-size:13px} .dd-row s{font-size:13px} .big2{grid-template-columns:1fr}}
.chsw{position:relative; flex:none}
.bar .logo{flex:none}
#secNav a span{display:none} #secNav a.cur span{display:inline}
#curCh{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:var(--surface); padding:8px 12px; font:600 14px/1 var(--display); color:var(--violet); white-space:nowrap; cursor:pointer}
#curCh::after{content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.chsw.open #curCh::after{transform:translateY(2px) rotate(-135deg)}
#curCh:hover{background:var(--mist-2)}
.chsw-menu{position:absolute; top:calc(100% + 8px); left:0; min-width:260px; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 18px 40px -20px rgba(30,12,69,.35); padding:6px; display:none; z-index:50}
.chsw.open .chsw-menu{display:block}
.chsw-menu a, .chsw-menu span{display:flex; align-items:center; gap:12px; padding:11px 12px; font:500 14px/1.3 var(--body); color:var(--ink); text-decoration:none}
.chsw-menu i{font-style:normal; font-size:12px; color:var(--faint); width:14px}
.chsw-menu a:hover{background:var(--mist-2); color:var(--violet)}
.chsw-menu a.cur{color:var(--violet); font-weight:600}
.chsw-menu span{color:var(--faint); cursor:default}

/* chapter opener */
.opener{padding:72px 0 72px}
.opener{position:relative; isolation:isolate; overflow:hidden}
.op-px{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block}
.opener .num{font:700 15px/1 var(--display); color:var(--violet); margin-bottom:18px; display:block}
.opener h2{font-size:clamp(44px,7vw,88px); line-height:1; letter-spacing:-.035em; font-weight:700}
.opener .idea{margin-top:24px; max-width:720px; font-size:20px; line-height:1.55; color:var(--text)}
@media (max-width:640px){.opener{padding:48px 0 24px} .opener .idea{font-size:18px}}

/* journey: four independent blocks, no timeline */
.journey{margin-top:44px; background:var(--surface); border:1px solid var(--line-2); padding:28px 28px 32px}
.j-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:28px}
.j-top h3{font-size:22px}
.j-top p{font-size:14px; color:var(--muted); margin-top:4px}
.track{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2)}
.stop{background:var(--surface); padding:0 24px}
.stop:first-child{padding-left:0} .stop:last-child{padding-right:0}
.stop .tag{display:inline-block; visibility:hidden; font:600 12px/1 var(--body); color:var(--coral); background:var(--coral-soft); padding:5px 8px; margin-bottom:14px}
.stop.drop .tag{visibility:visible}
.stop h4{font:600 14px/1.3 var(--body); color:var(--muted); margin:0 0 10px; letter-spacing:0}
.stop .big{font:700 clamp(30px,3.6vw,44px)/1 var(--display); color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stop p{font-size:15px; line-height:1.45; margin-top:8px; color:var(--text); max-width:240px; min-height:4.35em}
.stop .vs{font-size:13px; line-height:18px; height:18px; color:var(--muted); margin-top:8px}
@media (max-width:820px){
  .journey{padding:20px 16px 22px}
  .track{grid-template-columns:1fr 1fr}
  .stop, .stop:first-child, .stop:last-child{padding:16px 14px}
  .stop:nth-child(odd){padding-left:0} .stop:nth-child(even){padding-right:0}
  .stop:nth-child(-n+2){padding-top:0} .stop:nth-child(n+3){padding-bottom:0}
  .stop:not(.drop) .tag{display:none}
  .stop .big{font-size:30px}
  .stop p{font-size:14px; min-height:5.8em}
  .stop h4{min-height:2.6em}
}

/* segmented control */
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; max-width:100%; overflow-x:auto; scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0; background:transparent; padding:8px 12px; min-height:36px; border-radius:8px; font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.sel{appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23857fa0' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; border-radius:11px; padding:9px 36px 9px 12px; min-height:42px; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer}

/* thesis */
.thesis{padding:84px 0; border-top:1px solid var(--line)}

.t-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:start}
.t-text{}
.t-num{display:flex; align-items:center; gap:8px; font:500 12px/1 var(--body); color:var(--faint); margin-bottom:16px; letter-spacing:.01em}
.t-num b{font:500 12px/1 var(--body); color:var(--faint)}
.t-text h3{font-size:clamp(32px,3.7vw,48px); line-height:1.08; font-weight:700; letter-spacing:-.025em}
.t-sub{margin-top:14px; color:var(--muted); font-size:16px; line-height:1.5}
.ins{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:20px}
.ins li{padding-left:0; position:relative; font-size:16px; line-height:1.55}

.ins li b{color:var(--ink); font-weight:600}
.card{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:24px}
.c-head{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:20px}
.c-head h4{font:700 19px/1.3 var(--display); color:var(--ink); letter-spacing:-.015em}
.c-ctrl{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.c-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:16px; font-size:11px; line-height:1.45; color:var(--faint)}
.c-foot button{border:0; background:none; padding:0; color:var(--muted); cursor:pointer; font-size:13px; font-weight:500}
.c-foot button:hover{color:var(--violet)}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); margin:0 0 16px}
.legend:empty{display:none}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px}
@media (max-width:960px){
  .t-grid{grid-template-columns:minmax(0,1fr); gap:28px}
  .t-text{position:static}
  .t-grid .t-chart{order:2} .t-grid .ins-after{order:3}
}
@media (min-width:961px){.ins-after{display:none}}
@media (max-width:960px){.t-text .ins{display:none}}
@media (max-width:640px){.thesis{padding:72px 0} .card{padding:16px; border-radius:16px; margin:0 -4px} .c-head{margin-bottom:16px} .c-head h4{font-size:17px}}

/* heatmap */
.heat-wrap{overflow-x:auto; margin:0 -4px; padding:0 4px}
table.heat{width:100%; border-collapse:separate; border-spacing:3px; min-width:440px; font-variant-numeric:tabular-nums}
.heat th{font:600 13px/1.2 var(--body); color:var(--muted); text-align:center; padding:6px 2px}
.heat th.rowh{text-align:left; padding:0 8px 0 0; font-weight:500; color:var(--text); white-space:nowrap; position:sticky; left:0; background:var(--surface); z-index:1}
.heat th.rowh button{border:0; background:none; padding:6px 0; cursor:pointer; text-align:left; color:inherit; font:inherit}
.heat th.rowh button:hover{color:var(--violet)}
.heat tr.all th.rowh, .heat tr.all td{font-weight:700}
.heat td{text-align:center; font-size:14px; font-weight:500; border-radius:6px; height:40px; padding:0 4px; cursor:default; transition:opacity .2s, background-color .3s}
.heat td.allc{font-weight:500}
.heat tr.dim td, .heat tr.dim th.rowh{opacity:.28}
.heat tr.mark th.rowh{color:var(--coral); font-weight:700}
.heat tr.mark td{outline:2px solid var(--coral); outline-offset:-2px}
.heat td.na{background:var(--surface-2) !important; color:var(--faint) !important}
.pair .tr{height:24px; background:none}
.pair .fill{height:11px; bottom:auto}
.pair .fill.h1{top:0; background:var(--violet)} .pair .fill.h24{top:13px; background:var(--lilac)}
.pair .v{line-height:1.15}
.pair .hb-row.hl .fill.h1{background:var(--violet)} .pair .hb-row.hl .fill.h24{background:var(--lilac)} .pair .hb-row.hl .nm{font-weight:700; color:var(--ink)}
.pair .v small{color:var(--violet); font-weight:600}
.heat col.allcol{}
@media (max-width:440px){.heat .allc{display:none}}
@media (max-width:520px){table.heat{min-width:0; border-spacing:2px} .heat td{font-size:11.5px; height:36px; padding:0 1px} .heat th{font-size:11.5px} .heat th.rowh{white-space:normal; width:84px; font-size:12px; line-height:1.2}}
.scale{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--faint); margin:0 0 12px}
.scale i{display:block; width:120px; height:8px; border-radius:4px; background:linear-gradient(90deg,var(--heat-lo),var(--heat-hi))}

/* svg charts */
.svgc{width:100%; display:block; overflow:visible}
.svgc text{font-family:var(--body); fill:var(--muted); font-size:12px}
.svgc .lbl{fill:var(--text); font-size:13px; font-weight:500}
.svgc .val{fill:var(--ink); font-weight:600; font-size:12px}
.svgc .grid{stroke:var(--line); stroke-width:1}
.svgc .ref{stroke:var(--coral); stroke-width:1.5; stroke-dasharray:4 4}
.svgc .reft{fill:var(--coral); font-weight:600}

/* your app */
.you{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:18px; padding:14px 16px; background:var(--surface-2); border-radius:14px}
.you label{font-size:14px; font-weight:600; color:var(--ink)}
.you .inp{display:flex; align-items:center; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:0 12px; min-height:42px}
.you input{border:0; background:transparent; width:64px; padding:8px 0; font-size:15px; font-weight:600; color:var(--ink); outline:none}
.you .hint{font-size:13px; color:var(--muted)}
.you-res{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px}
.you-res div{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--muted)}
.you-res b{display:block; color:var(--ink); font-size:14px; font-weight:600}
.you-res em{font-style:normal; font-weight:600}

/* html bars */
.hb{display:grid; gap:10px}
.hb-row{display:grid; grid-template-columns:minmax(120px,30%) 1fr 64px; gap:12px; align-items:center; font-size:14px}
.hb-row .nm{color:var(--text); font-weight:500; line-height:1.25}
.hb-row .tr{position:relative; height:26px; background:none}
.hb-row .fill{position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--lilac-2); transition:width .45s cubic-bezier(.2,.7,.2,1)}
.hb-row.hl .fill{background:var(--coral)}
.hb-row.hl .nm{color:var(--ink); font-weight:700}
.hb-row .tick{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:1px; transition:left .45s cubic-bezier(.2,.7,.2,1)}
.hb-row .v{font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.hb-row .v small{display:block; font-weight:500; color:var(--faint); font-size:12px}
.hb-row .in{position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:600; color:#fff}
@media (max-width:520px){.hb-row{grid-template-columns:96px 1fr 54px; gap:8px; font-size:13px}}

.gap-reg{padding:14px 0; border-bottom:1px solid var(--line)}
.gap-reg:last-child{border-bottom:0}
.gap-reg h5{font:600 15px/1 var(--display); color:var(--ink); margin:0 0 10px; display:flex; align-items:center; gap:8px}
.gap-reg h5 i{width:10px; height:10px; border-radius:50%}
.gap-row{display:grid; grid-template-columns:104px 1fr 48px; gap:10px; align-items:center; font-size:13px; color:var(--muted); margin-top:6px}
.gap-row .tr{position:relative; height:14px}
.gap-row .fill{position:absolute; left:0; top:0; bottom:0; border-radius:4px; transition:width .45s cubic-bezier(.2,.7,.2,1)}
.gap-row .one{position:absolute; top:-5px; bottom:-5px; width:1px; background:var(--faint); opacity:.6}
.gap-row b{color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}

.stk .fill.a{background:var(--violet); border-radius:6px 0 0 6px}
.stk .fill.b{background:var(--lilac); border-radius:0 6px 6px 0}
.stk .hb-row.hl .nm{color:var(--ink)}

/* takeaways */
.take{padding:80px 0 60px; border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 50%, var(--bg) 100%), radial-gradient(circle, var(--dots) 1px, transparent 1.3px) 0 0 / 12px 12px, var(--bg)}
:root{--dots:#ddd3f5; --pill-text:#4d4d4d}
@media (prefers-color-scheme: dark) and (min-width:100000px){:root:not([data-theme="light"]){--dots:#2c2350; --pill-text:var(--text)}}
:root[data-theme="__light-only__"]{--dots:#2c2350; --pill-text:var(--text)}
.take > .wrap > h2{font-size:clamp(32px,4.4vw,52px); line-height:1.05; text-align:center; margin:0 auto}
.tk{list-style:none; margin:40px auto 0; padding:0; display:flex; flex-direction:column; align-items:center; gap:20px}
.tk li{position:relative; width:min(100%,760px); min-height:160px; display:flex; align-items:center; background:var(--surface); border:1px solid var(--mist); border-radius:9999px !important; padding:36px 80px 36px 159px; transition:box-shadow .25s ease, transform .25s ease}
@media (hover:hover){.tk li:hover{box-shadow:0 10px 26px -14px rgba(110,58,223,.45), 0 2px 6px -2px rgba(110,58,223,.12); transform:translateY(-1px)}}
.tk-n{position:absolute; left:82.5px; top:50%; transform:translate(-50%,-50%); width:70px; text-align:center; font:700 64px/1 "Inter Tight", "Inter", sans-serif; color:var(--surface); -webkit-text-stroke:3px var(--lilac); paint-order:stroke fill; font-feature-settings:"ss02" 1}
.tk p{margin:0; font:400 16px/1.55 var(--body); color:var(--text)}
.tk p b{color:var(--ink); font-weight:600}
@media (max-width:760px){
  .tk{gap:12px; margin-top:28px}
  .tk li{min-height:0; border-radius:9999px !important; padding:30px 40px 30px 80px}
  .tk-n{left:44px; font-size:40px; width:44px; -webkit-text-stroke-width:2.4px}
}

/* promo */
.promo-sec{background:var(--bg); padding:56px 0}
/* one divider between chapters: after the last block of a chapter (promo or thesis), before the next chapter */
.chapter ~ .chapter{border-top:1px solid var(--line)}
.promo-sec .promo-ph{margin-top:0}
.promo{margin:0; background:var(--ink); color:#fff; border-radius:28px; padding:56px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; overflow:hidden; position:relative}
:root[data-theme="__light-only__"] .promo{background:#2a1c55}
@media (prefers-color-scheme: dark) and (min-width:100000px){:root:not([data-theme="light"]) .promo{background:#2a1c55}}
.promo h2{color:#fff; font-size:clamp(28px,3.6vw,44px); line-height:1.1}
.promo p{color:rgba(255,255,255,.78); margin-top:16px; font-size:17px; max-width:520px}
.promo .acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:12px; font:600 16px/1 var(--body); text-decoration:none}
.btn.w{background:#fff; color:#1e0c45} .btn.w:hover{background:#f1ebfd}
.btn.o{border:1px solid rgba(255,255,255,.35); color:#fff} .btn.o:hover{background:rgba(255,255,255,.08)}
.pw{justify-self:center; width:min(100%,300px); aspect-ratio:9/16; max-height:420px; border-radius:28px; background:linear-gradient(180deg,#6e3adf,#4a22b0); padding:22px 18px; display:flex; flex-direction:column; gap:10px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.pw .ph{flex:1; border-radius:16px; background:rgba(255,255,255,.12)}
.pw .pl{height:46px; border-radius:12px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-size:13px; color:#fff}
.pw .pl.on{background:#fff; color:#1e0c45; font-weight:600}
.pw .cta{height:48px; border-radius:12px; background:#ff7c66; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px}
.pw .loc{display:flex; gap:6px}
.pw .loc span{font-size:11px; font-weight:600; padding:5px 8px; border-radius:6px; background:rgba(255,255,255,.14); color:#fff}
.pw .loc span.on{background:#fff; color:#1e0c45}
@media (max-width:860px){.promo{grid-template-columns:1fr; padding:32px 22px; border-radius:22px} .pw{display:none}}

/* next + method */
.next{padding:72px 0 24px}
.next .nx{display:flex; justify-content:space-between; align-items:center; gap:24px; text-decoration:none; padding:32px; border-radius:24px; border:1px dashed var(--line-2); color:var(--ink)}
.next small{display:block; font:600 14px/1 var(--body); color:var(--muted); margin-bottom:12px}
.next h3{font-size:clamp(26px,3.4vw,40px)}
.next .soon{font:600 13px/1 var(--body); color:var(--violet); background:var(--mist-2); padding:10px 14px; border-radius:999px; white-space:nowrap}
details.method{margin:24px 0 0; border-top:1px solid var(--line)}
details.method summary{cursor:pointer; padding:22px 0; font:600 18px/1.3 var(--display); color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center}
details.method summary::-webkit-details-marker{display:none}
details.method summary::after{content:"+"; font-size:24px; color:var(--violet); font-weight:500}
details.method[open] summary::after{content:"−"}
.m-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 48px; padding-bottom:32px; font-size:15px; color:var(--text)}
.m-grid h4{font:600 15px/1.3 var(--body); color:var(--ink); margin-bottom:4px; letter-spacing:0}
@media (max-width:700px){.m-grid{grid-template-columns:1fr}}
footer{padding:40px 0 56px; color:var(--faint); font-size:14px}
footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--line); padding-top:28px}
footer .logo{color:var(--ink); display:flex} footer .logo svg{height:20px; width:auto}


/* square charts: no rounding on chart cards, controls and marks */
.card,.journey,.seg,.seg button,.sel,.you,.you .inp,.you-res div,
.scale i,.hb-row .tr,.hb-row .fill,.stk .fill.a,.stk .fill.b,.gap-row .fill,.heat td,.legend i,.stop.drop .tag{border-radius:0 !important}
.seg button[aria-pressed="true"]{box-shadow:none}


/* chart placeholders + chapter 3 charts */
.card.ph{min-height:360px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; border:1px dashed var(--line-2); box-shadow:none; background:repeating-linear-gradient(135deg, transparent 0 14px, var(--mist-2) 14px 15px)}
.card.ph span{font:600 12px/1 var(--body); text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}
.card.ph p{font:600 17px/1.35 var(--display); color:var(--ink); max-width:320px}
.card.ph em{font-style:normal; font-size:13px; color:var(--muted)}
.promo-ph{margin-top:40px; border:1px dashed var(--line-2); padding:40px; text-align:center; font:600 15px/1 var(--body); color:var(--faint)}
.db{display:grid; gap:6px}
.db-row{display:grid; grid-template-columns:minmax(130px,34%) 1fr; gap:12px; align-items:center; font-size:14px}
.db-row .nm{color:var(--text); font-weight:500; line-height:1.25}
.db-tr{position:relative; height:44px}
.db-tr::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line)}
.db-tr .ln{position:absolute; top:50%; height:3px; margin-top:-1.5px; background:var(--lilac)}
.db-tr .dt{position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%}
.db-tr b{position:absolute; top:0; font-size:12px; font-weight:600; transform:translateX(-50%); white-space:nowrap}
.db-tr b.lo{top:auto; bottom:0}
@media (max-width:520px){.db-row{grid-template-columns:96px 1fr; gap:8px; font-size:13px}}
.btns{display:grid; gap:16px}
.bt-row{display:grid; grid-template-columns:28px 1fr 56px; gap:12px; align-items:start}
.bt-row .n{font:700 15px/26px var(--display); color:var(--faint)}
.bt-row .b{display:inline-flex; align-items:center; min-height:26px; padding:4px 10px; background:var(--ink); color:var(--bg); font-size:13px; font-weight:600}
.bt-row .tr{position:relative; height:8px; background:var(--surface-2); margin-top:8px}
.bt-row .tr i{position:absolute; left:0; top:0; bottom:0; background:var(--violet)}
.bt-row small{display:block; margin-top:6px; font-size:12px; color:var(--muted)}
.bt-row .v{font:700 18px/26px var(--display); color:var(--ink); text-align:right}


/* row hover: bars get lighter, label darkens — all row-based charts */
.sb-row .sb-bar i, .hb-row .fill, .hb-row .tick, .dd-tr i, .db-tr .dt, .db-tr .ln, .gap-row .fill, .bt-row .tr i, .gb-bars i{transition:filter .18s ease, opacity .18s ease, width .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .sb-row, .hb-row, .dd-row, .db-row, .gap-row, .bt-row, .gb-bars > div{cursor:default}
  .sb-row:hover .sb-bar i, .hb-row:hover .fill, .dd-row:hover .dd-tr i, .db-row:hover .dt, .db-row:hover .ln, .gap-row:hover .fill, .bt-row:hover .tr i, .gb-bars > div:hover i{filter:brightness(1.18) saturate(.92)}
  .sb-row:hover .nm, .hb-row:hover .nm, .dd-row:hover .nm, .db-row:hover .nm, .gap-row:hover > span:first-child{color:var(--ink)}
}


/* chapter 3–4 charts redrawn from the images in the copy */
.anat{position:relative}
.anat .phone{width:min(46%,220px); aspect-ratio:393/852; margin:0 auto; display:flex; flex-direction:column; justify-content:space-between; gap:0; padding:28px 14px 18px; border-radius:36px !important}
.anat .ph-img{height:22%; flex:none}
.an-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:1}
.anat.wide .anat-list{position:absolute; inset:0; pointer-events:none}
.anat.wide .anat-list li{position:absolute; padding:0; counter-increment:none; pointer-events:auto}
.anat.wide .anat-list li::before{display:none}
.anat.wide .anat-list li[data-side="l"]{text-align:right}
.anat.wide .mk{display:none}
.anat:not(.wide) .an-lines{display:none}
.anat:not(.wide) .anat-list{margin-top:22px}
.phone{position:relative; border:2px solid var(--line-2); border-radius:34px !important; padding:30px 18px 22px; background:var(--surface); display:grid; gap:12px}
.ph-notch{position:absolute; top:12px; left:50%; width:70px; height:6px; margin-left:-35px; background:var(--line-2); border-radius:3px !important}
.ph-x{position:absolute; top:12px; right:16px; color:var(--faint); font-size:16px; line-height:1}
.ph-img{position:relative; height:84px; border:1.5px dashed var(--line-2); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--faint); border-radius:10px !important}
.ph-h{position:relative; display:grid; justify-items:center; gap:6px} .ph-h i{display:block; height:12px; width:88%; background:var(--ink); border-radius:4px !important} .ph-h i+i{width:66%}
.ph-stars{position:relative; text-align:center; color:var(--faint); letter-spacing:3px; font-size:13px}
.ph-feat{position:relative; display:grid; gap:7px} .ph-feat p{display:flex; align-items:center; gap:8px; margin:0} .ph-feat s{text-decoration:none; color:var(--violet); font-size:11px} .ph-feat i{display:block; height:8px; width:80%; background:var(--line); border-radius:4px !important}
.ph-plan{position:relative; display:flex; align-items:center; gap:10px; border:1.5px solid var(--line-2); padding:12px; border-radius:10px !important}
.ph-plan.on{border:2px solid var(--violet)} .ph-plan u{width:14px; height:14px; border-radius:50% !important; border:1.5px solid var(--line-2); flex:none} .ph-plan.on u{background:var(--violet); border-color:var(--violet)}
.ph-plan div{display:grid; gap:5px; flex:1} .ph-plan div i{display:block; height:8px; width:60%; background:var(--ink); border-radius:3px !important} .ph-plan div i+i{width:80%; background:var(--line)}
.ph-plan em{position:absolute; top:-9px; right:10px; font-style:normal; font-size:9px; font-weight:700; color:#fff; background:var(--violet); padding:3px 7px; border-radius:8px !important}
.ph-btn{position:relative; background:var(--ink); color:var(--bg); text-align:center; font-size:13px; font-weight:600; padding:13px; border-radius:24px !important}
.ph-note{position:relative; text-align:center; font-size:10px; line-height:1.4; color:var(--faint)}
.mk{position:absolute; right:-26px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50% !important; background:var(--violet); color:#fff; font:700 11px/20px var(--body); text-align:center; font-style:normal}
.mk6{top:auto; bottom:-14px; transform:none}
.anat-list{list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:an}
.anat-list li{counter-increment:an; position:relative; padding-left:30px; font-size:13px; line-height:1.4; color:var(--muted)}
.anat-list li::before{content:counter(an); position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--violet); color:#fff; font:700 11px/20px var(--body); text-align:center}
.anat-list b{display:block; color:var(--ink); font-size:14px; font-weight:600; margin-bottom:2px}
@media (max-width:640px){.anat .phone{width:min(62%,220px)}}
.big3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:24px}
.big3 div{background:var(--surface); padding:16px 18px} .big3 b{display:block; font:700 clamp(28px,3.4vw,38px)/1 var(--display); color:var(--ink); letter-spacing:-.03em} .big3 span{display:block; margin-top:8px; font-size:13px; line-height:1.4; color:var(--muted)}
@media (max-width:520px){.big3{grid-template-columns:1fr}}


/* chapter opener illustrations (desktop) */
.opener .wrap{position:relative}
.op-ill{position:absolute; right:24px; top:-16px; width:400px; height:auto; pointer-events:none}
@media (min-width:1121px){.opener h2{max-width:720px}}
@media (max-width:1240px){.op-ill{width:360px; right:16px} .opener h2{max-width:620px} .opener .idea{max-width:620px}}
@media (max-width:1120px){.op-ill{position:static; display:block; width:min(100%,380px); margin:0 auto 20px} .opener h2,.opener .idea{max-width:none}}
@media (max-width:560px){.op-ill{width:min(100%,320px); margin-bottom:12px}}


/* row hover in SVG charts (1.2 spread rows, scatter points): the whole row/point gets lighter */
.svgc g[data-tip]{transition:filter .18s ease, opacity .18s ease; cursor:default}
@media (hover:hover){.svgc g[data-tip]:hover{filter:brightness(1.15) saturate(.9)}}


/* 1.6 cancellations: compact two-bar rows, values next to their own bar */
.cb{display:grid; gap:12px}
.cb-row{display:grid; grid-template-columns:132px 1fr; gap:10px; align-items:center; font-size:14px}
.cb-row .nm{color:var(--text); font-weight:500; line-height:1.2}
.cb-row.hl .nm{color:var(--ink); font-weight:700}
.cb-bars{display:grid; gap:3px}
.cb-b{position:relative; height:15px}
.cb-b i{position:absolute; left:0; top:0; bottom:0; transition:width .45s cubic-bezier(.2,.7,.2,1), filter .18s ease}
.cb-b b{position:absolute; top:50%; transform:translateY(-50%); padding-left:6px; font-size:12px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.cb-b.d i{background:var(--violet)} .cb-b.d b{color:var(--ink)}
.cb-b.l i{background:var(--lilac)} .cb-b.l b{color:var(--lilac-2); font-weight:600}
@media (hover:hover){.cb-row:hover .cb-b i{filter:brightness(1.15) saturate(.9)} .cb-row:hover .nm{color:var(--ink)}}
@media (max-width:520px){.cb-row{grid-template-columns:96px 1fr; font-size:13px}}


/* 2.3 A/B tests: stretched bars, one pale reference line through all rows */
.ab-h{font:600 15px/1.3 var(--display); color:var(--ink); margin:0 0 30px}
.ab2{position:relative; display:grid; gap:10px; padding-top:4px}
.ab-ref{position:absolute; top:-18px; bottom:0; width:0; border-left:1px dashed #cfcbdb; pointer-events:none}
.ab-ref em{position:absolute; top:0; left:6px; font-style:normal; font-size:11px; color:var(--faint); white-space:nowrap}
.ab-row{display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center; font-size:14px}
.ab-row .nm{color:var(--text); font-weight:500}
.ab-row.hl .nm{color:var(--ink); font-weight:700}
.ab-tr{position:relative; height:24px}
.ab-tr i{position:absolute; left:0; top:0; bottom:0; background:var(--lilac-2); transition:width .45s cubic-bezier(.2,.7,.2,1), filter .18s ease}
.ab-tr b{position:absolute; top:50%; transform:translateY(-50%); padding-left:8px; font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap}
.ab-tr b small{font-size:11px; font-weight:500; color:var(--faint)}
@media (hover:hover){.ab-row:hover .ab-tr i{filter:brightness(1.12) saturate(.9)} .ab-row:hover .nm{color:var(--ink)}}


.card > .big2.after, .card > .big3.after{margin:24px 0 0}


/* every chart title inside a card uses the same size as .c-head h4 */
.card .sub-h, .card .ab-h{font:700 19px/1.3 var(--display); letter-spacing:-.015em; color:var(--ink)}
.card .sub-h{margin:0 0 16px}
@media (max-width:640px){.card .sub-h, .card .ab-h{font-size:17px}}

.card.card-next{margin-top:20px}


/* 3.7 buttons: number · button (same width, rounded) · plain violet bar with value at its end · caption below */
.btns{display:grid; gap:18px}
.bt2{display:grid; grid-template-columns:22px 140px 1fr; column-gap:14px; row-gap:6px; align-items:center}
.bt2 .n{font:700 15px/1 var(--display); color:var(--faint)}
.bt2 .btn-ui{display:flex; align-items:center; justify-content:center; height:34px; padding:0 10px; background:var(--ink); color:var(--bg); font-size:13px; font-weight:600; border-radius:17px; white-space:nowrap}
.bt2 .bt-bar{position:relative; height:22px}
.bt2 .bt-bar i{position:absolute; left:0; top:0; bottom:0; background:var(--violet); transition:width .45s cubic-bezier(.2,.7,.2,1), filter .18s ease}
.bt2 .bt-bar b{position:absolute; top:50%; transform:translateY(-50%); padding-left:8px; font:700 14px/1 var(--display); color:var(--ink); white-space:nowrap}
.bt2 small{grid-column:2 / 4; font-size:12px; color:var(--muted)}
@media (hover:hover){.bt2:hover .bt-bar i{filter:brightness(1.15) saturate(.9)}}
@media (max-width:520px){.bt2{grid-template-columns:18px 118px 1fr; column-gap:10px} .bt2 .btn-ui{font-size:12px}}


/* cover frame of chart fragments sits in the background: lower contrast */
/* frame: every panel takes one flat tone from the centre gradient — dark blue, saturated violet-blue, light violet — alternating around.
   Inside a panel each chart is recoloured with a clean duotone built from that tone (SVG filters #duoD/#duoS/#duoL):
   no grey or muddy mixes, every colour sits between the panel tone and one clean tint. */
.frag{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16)}
.frag > *{opacity:.8}
.fL, .fM, .fR3{background:#170344 !important}
.fT1, .fR1, .fB2{background:#5a1ee0 !important}
.fT2, .fR2, .fB1{background:#cdb8fa !important; box-shadow:inset 0 0 0 .5px rgba(30,12,69,.12)}
.fL > *, .fM > *, .fR3 > *{filter:url(#duoD)}
.fT1 > *, .fR1 > *, .fB2 > *{filter:url(#duoS)}
.fT2 > *, .fR2 > *, .fB1 > *{filter:url(#duoL)}
.fT1 svg text, .fR1 svg text, .fB2 svg text{fill:#000 !important}   /* labels land on the pale end of the duotone */


/* chart title (moved from under the slide heading into the chart card) */
.card .card-title{font:700 19px/1.3 var(--display); letter-spacing:-.015em; color:var(--ink); margin:0 0 18px}
@media (max-width:640px){.card .card-title{font-size:17px}}
.c-head:empty{display:none}


/* takeaways: one framed grid, title cell + numbered cells (Figma 820:9660) */
.tk-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-2); border-left:1px solid var(--line-2); background:var(--surface)}
.tk-grid > div{border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:32px 40px 40px}
.tk-grid.n4 .tk-head{grid-row:span 2}
.tk-grid.n3{grid-template-columns:1.4fr repeat(3,1fr)}
.tk-grid.n3 .tk-head h2{font-size:clamp(32px,3.1vw,44px)}
.tk-head h2{font:700 clamp(36px,3.8vw,52px)/1.05 var(--display); letter-spacing:-.03em; color:var(--ink); margin:12px 0 0; text-align:left}
.tk-num{display:block; font:500 30px/1 var(--body); color:var(--lilac-2); margin-bottom:22px}
.tk-cell h3{font:600 20px/1.35 var(--body); color:var(--ink); letter-spacing:-.01em; margin:0 0 12px}
.tk-cell p{font-size:16px; line-height:1.5; color:var(--muted); margin:0}
.tk-cell p b{color:var(--text); font-weight:600}
@media (max-width:1100px){.tk-grid, .tk-grid.n3{grid-template-columns:1fr 1fr} .tk-grid.n4 .tk-head{grid-row:auto; grid-column:1 / -1} .tk-grid.n3 .tk-head{grid-column:1 / -1}}
@media (min-width:641px) and (max-width:1100px){.tk-grid.n3{grid-template-columns:repeat(3,1fr)} .tk-grid.n3 > div{padding:28px 26px 32px} .tk-grid.n3 .tk-cell h3{font-size:18px}}
@media (max-width:640px){.tk-grid, .tk-grid.n3{grid-template-columns:1fr} .tk-grid > div{padding:24px 22px 28px}}


/* hover feedback that works on dark bars too: the hovered row's bars get visibly lighter */
.sb-bar i, .hb-row .fill, .dd-tr i, .cb-b i, .ab-tr i, .bt-bar i, .gb-bars i, .gap-row .fill{transition:width .45s cubic-bezier(.2,.7,.2,1), filter .18s ease, opacity .18s ease}
@media (hover:hover){
  .sb-row:hover .sb-bar i, .hb-row:hover .fill, .dd-row:hover .dd-tr i, .cb-row:hover .cb-b i, .ab-row:hover .ab-tr i,
  .bt2:hover .bt-bar i, .gb-bars > div:hover i, .gap-row:hover .fill, .db-row:hover .dt, .db-row:hover .ln{opacity:.72}
}


/* 2.5 lifetime: compact rows, value and ratio in one line at the bar end */
.lb{display:grid; gap:10px}
.lb-row{display:grid; grid-template-columns:132px 1fr; gap:10px; align-items:center; font-size:14px}
.lb-row .nm{color:var(--text); font-weight:500}
.lb-row.hl .nm{color:var(--ink); font-weight:700}
.lb-tr{position:relative; height:24px}
.lb-tr i{position:absolute; left:0; top:0; bottom:0; background:var(--pl); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .18s ease}
.lb-tr b{position:absolute; top:50%; transform:translateY(-50%); padding-left:8px; font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap}
.lb-tr b small{font-size:12px; font-weight:500; color:var(--faint)}
@media (hover:hover){.lb-row:hover .lb-tr i{opacity:.72} .lb-row:hover .nm{color:var(--ink)}}
@media (max-width:520px){.lb-row{grid-template-columns:104px 1fr; font-size:13px}}

.card .cap{font-size:14px; line-height:1.4; color:var(--text); margin:24px 0 12px}


/* methodology (Figma 920:4980): lead + bordered card grid; "+" opens the full text in an overlay over the grid */
.mt{width:min(100%,940px); margin:72px auto 0; color:#242424}
.mt-lead{font:400 clamp(22px,2.4vw,32px)/1.4 Inter, var(--body); color:#242424; margin:0 0 40px}
.mt-lead b{font-weight:700}
.mt-grid{position:relative}
.mt-row{display:flex}
.mt-row + .mt-row{margin-top:-1px}
.mt-card{position:relative; flex:1 1 0; min-width:0; border:1px solid #d9d9d9; padding:20px; display:flex; flex-direction:column; gap:10px; background:#fff}
.mt-row .mt-card + .mt-card{margin-left:-1px}
.mt-card.w395{flex:0 0 395px}
.r2 .mt-card{min-height:220px}
.mt-ico{display:inline-flex; align-self:flex-start; padding:10px; border:1px solid #bfbfbf}
.mt-card h4, .mt-dlg h4{font:500 22px/1.21 Inter, var(--body); color:#242424; margin:0; letter-spacing:0}
.mt-txt{font:400 16px/1.4 Inter, var(--body); color:#808080}
.mt-txt p{margin:0 0 20px} .mt-txt p:last-child{margin-bottom:0}
.mt-txt ul{margin:0 0 20px; padding-left:24px; list-style:disc} .mt-txt ul:last-child{margin-bottom:0}
.mt-txt li{margin-bottom:12px} .mt-txt li:last-child{margin-bottom:0}
.mt-txt a{color:#808080; text-decoration:underline}
.mt-txt.clamp{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
.mt-txt.clamp p, .mt-txt.clamp ul{margin:0} .mt-txt.clamp p + *{display:none}
.mt-more, .mt-close{position:absolute; top:19.5px; right:19.5px; width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; line-height:0}
.mt-more:hover svg, .mt-close:hover svg{stroke:#4d4d4d}
.mt-close svg{transform:rotate(45deg)}
.mt-pop{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.8); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); border:1px solid #d9d9d9; z-index:3}
.mt-pop[hidden]{display:none}
.mt-dlg{position:relative; width:min(620px,calc(100% - 32px)); max-height:calc(100% - 24px); overflow:auto; background:#fff; border:1px solid #d9d9d9; padding:20px; display:flex; flex-direction:column; gap:10px}
@media (max-width:760px){
  .mt-row{flex-direction:column} .mt-card.w395{flex:auto} .r2 .mt-card{height:auto} .mt-row .mt-card + .mt-card{margin-left:0; margin-top:-1px}
  .mt-pop{position:fixed; inset:0; border:0; z-index:60} .mt-dlg{max-height:80vh}
}

.mt-body{display:flex; flex-direction:column; gap:10px}
.mt-ico svg{display:block; width:24px; height:24px}
.mt-dlg h4{padding-right:36px}


/* methodology in the report's own type scale: lead = chapter intro, card titles = chart titles, text = slide text */
.mt{width:100%; margin:72px 0 0; color:var(--text)}
.mt-lead{max-width:720px; font:400 20px/1.55 var(--body); color:var(--text); margin:0 0 40px}
.mt-lead b{font-weight:600; color:var(--ink)}
.mt-lead br{display:none}
.mt-card{border-color:var(--line-2); background:var(--surface)}
.mt-pop{border-color:var(--line-2)} .mt-dlg{border-color:var(--line-2); background:var(--surface)}
.mt-ico{border-color:var(--line-2)}
.mt-card h4, .mt-dlg h4{font:700 19px/1.3 var(--display); letter-spacing:-.015em; color:var(--ink)}
.mt-txt{font:400 16px/1.55 var(--body); color:var(--muted)}
.mt-txt a{color:var(--muted)}
.mt-txt.clamp{-webkit-line-clamp:3}
.mt-txt.clamp > :not(:first-child){display:none}
@media (max-width:640px){.mt-lead{font-size:18px} .mt-card h4, .mt-dlg h4{font-size:17px}}


/* methodology grid: one 3-column grid so every vertical line runs straight through both rows (no steps at the joins) */
.mt-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-2); border:1px solid var(--line-2)}
.mt-row{display:contents}
.mt-row + .mt-row{margin-top:0}
.mt-grid .mt-card{border:0; margin:0 !important}
.mt-grid .mt-card.w395{grid-column:1; flex:none}
.r1 .mt-card:not(.w395){grid-column:2 / 4}
.r2 .mt-card{min-height:220px; height:auto}
.mt-grid .mt-pop{inset:-1px}
@media (max-width:760px){.mt-grid{grid-template-columns:1fr} .mt-grid .mt-card.w395, .r1 .mt-card:not(.w395){grid-column:auto}}


/* chapter 5: range bars (low–high uplift) */
.rg{display:grid; gap:10px}
.rg-row{display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:center; font-size:14px}
.rg-row .nm{color:var(--text); font-weight:500; line-height:1.25}
.rg-tr{position:relative; height:22px; margin-right:64px}
.rg-tr em{position:absolute; top:-5px; bottom:-5px; width:0; border-left:1px solid var(--line)}
.rg-tr i{position:absolute; top:3px; height:16px; border-radius:8px !important; transition:opacity .18s}
.rg-tr b{position:absolute; top:50%; transform:translateY(-50%); padding-left:8px; font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap}
.rg-ax .rg-tr{height:14px} .rg-ax small{position:absolute; transform:translateX(-50%); font-size:11px; color:var(--faint)}
@media (hover:hover){.rg-row:not(.rg-ax):hover .rg-tr i{opacity:.72}}
.rg-note{margin-top:18px !important}
@media (max-width:520px){.rg-row{grid-template-columns:110px 1fr; font-size:13px}}
.cb-row .nm{line-height:1.25}

.ins li ul{margin:8px 0 0; padding-left:20px; list-style:disc}
.ins li ul li{margin:4px 0 0; padding:0}
.ins li ul li::before{content:none}

.mt-txt ul{margin:0; padding-left:20px; list-style:disc}
.mt-txt ul li{margin:6px 0 0}
.mt-txt p + p, .mt-txt p + ul{margin-top:10px}

/* all headings: Manrope SemiBold */
h1, h2, h3, h4, .card-title, .sub-h, .ab-h, .nx h3{font-weight:600 !important}


/* 2.7 discount bars: typical discount under the label; plan view gets thicker rows so both tabs keep about the same height */
#discBars{min-height:286px}
.lb.disc .nm small{display:block; margin-top:3px; font-size:12px; font-weight:400; color:var(--faint)}
.lb.disc.tall{gap:22px} .lb.disc.tall .lb-tr{height:40px}
.lb.disc:not(.tall) .lb-tr{height:24px}


/* Mobbin logomark + wordmark set inline in the chapter 3 intro */
.mobbin{display:inline; white-space:nowrap; margin:0 .05em}
.mobbin svg{display:inline-block; vertical-align:baseline; width:auto; height:.73em}   /* svg bottom = glyph baseline; .73em = Inter cap height */
.mobbin .mb-lm{margin-right:.22em}


/* shorter screens: tighter slide padding so more slides fit whole */
@media (min-width:961px) and (max-height:900px){ .thesis{padding:48px 0} .thesis .card{padding-top:20px; padding-bottom:18px} }

.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px}
.card-top .card-title{margin:0; flex:1 1 auto}
.card-top .sel{flex:0 0 auto; margin-top:-6px}


/* 4.2: 100% stacked look — pale full-width track behind each bar, bars stretched between label and value, tabular one-decimal values */
#s42 .hb-row{grid-template-columns:96px 1fr 52px; gap:10px}
#s42 .hb-row .tr{background:var(--mist)}
#s42 .hb-row .v{font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; letter-spacing:0}

/* 4.4: category | onboarding | later — column headers instead of a legend */
.ob3{display:grid; gap:10px}
.ob3-row{display:grid; grid-template-columns:150px 1fr 1fr; gap:14px; align-items:center; font-size:14px}
.ob3-h{font-size:13px; font-weight:600; color:var(--muted); margin-bottom:2px}
.ob3-row .nm{color:var(--text); font-weight:500; line-height:1.25}
.ob3-row.hl .nm{color:var(--ink); font-weight:700}
.ob3-tr{position:relative; height:24px}
.ob3-tr i{position:absolute; left:0; top:0; bottom:0; transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .18s}
.ob3-tr.on i{background:var(--ink)} .ob3-tr.lt i{background:var(--violet)}
.ob3-tr b{position:absolute; top:50%; transform:translateY(-50%); padding-left:7px; font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
@media (hover:hover){.ob3-row:not(.ob3-h):hover .ob3-tr i{opacity:.72}}
@media (max-width:520px){.ob3-row{grid-template-columns:96px 1fr 1fr; gap:8px; font-size:13px}}


/* bars stretch with the card: the track keeps a fixed gutter on the right for the value label, the bar uses the rest */
.cb-bars{margin-right:64px} .lb-tr{margin-right:88px} .lb.disc .lb-tr{margin-right:48px}
.ab-tr{margin-right:120px} .ab2{--lbl:120px} .bt2 .bt-bar{margin-right:48px} .ob3-tr{margin-right:52px}
#t51 .cb-bars{margin-right:80px}
/* numbers on bars: Medium */
.cb-b b, .lb-tr b, .ab-tr b, .bt2 .bt-bar b, .ob3-tr b, .rg-tr b, .hb-row .v, .dd-row .v, .sb-bar b, .gap-row .v{font-weight:500 !important}
.lb-tr b small, .ab-tr b small{font-weight:400}


/* 1.7 hard vs soft: two small panels side by side */
.hs{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:8px}
.hs-h{font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px}
.hs-row{display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:center; margin-bottom:10px; font-size:14px}
.hs-row .nm{color:var(--text); font-weight:500}
.hs-tr{position:relative; height:40px; margin-right:56px}
.hs-tr i{position:absolute; left:0; top:0; bottom:0; transition:opacity .18s}
.hs-tr b{position:absolute; top:50%; transform:translateY(-50%); padding-left:8px; font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
@media (hover:hover){.hs-row:hover .hs-tr i{opacity:.72}}
@media (max-width:520px){
  /* 1.7 on phones: both groups side by side, narrower bars, group titles may wrap */
  .hs{grid-template-columns:1fr 1fr; gap:14px}
  .hsv{height:190px; gap:8px; padding:0}
  .hsv-tr i{left:4%; right:4%}
  .hsv-tr b{font-size:13px}
  .hsv-col .nm{font-size:13px}
  .hs-p .hs-h{padding-left:0; font-size:14px; line-height:1.3; max-width:9em}
}


/* 1.7 vertical bars */
.hsv{display:grid; grid-template-columns:1fr 1fr; gap:14px; height:220px; margin-bottom:40px; border-bottom:0; padding:0 6%}
.hsv-col{display:grid; grid-template-rows:1fr auto; height:calc(100% + 28px); margin-bottom:-28px}
.hsv-tr{position:relative; padding-top:26px}
.hsv-tr i{position:absolute; left:8%; right:8%; bottom:0; transition:opacity .18s}
.hsv-tr b{position:absolute; left:0; right:0; margin-bottom:6px; text-align:center; font-size:15px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; transform:translateY(0)}
.hsv-col .nm{text-align:center; font-size:14px; font-weight:500; color:var(--text); padding-top:8px}
@media (hover:hover){.hsv-col:hover i{opacity:.72}}
.hs-h{text-align:center}


/* 3.7 close button charts */
.cb3{display:grid; gap:18px; margin-top:6px}
.cb3-row{display:grid; grid-template-columns:192px 1fr 48px; gap:12px; align-items:center; font-size:14px}
.cb3-row .nm{color:var(--text); font-weight:500; line-height:1.25}
.cb3-row.hl .nm{color:var(--ink); font-weight:700}
.cb3-tr{position:relative; height:32px; background:var(--mist)}
.cb3-tr i{position:absolute; left:0; top:0; bottom:0; background:var(--violet); transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .18s}
.cb3-row .v{text-align:right; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
@media (hover:hover){.cb3-row:hover .cb3-tr i{opacity:.72}}
#cbDelay .cb3-row{grid-template-columns:90px 1fr 48px}
.cb3w{display:grid; gap:30px; margin-top:8px}
.cb3w-top{font-size:14px; color:var(--ink); margin-bottom:8px}
.cb3w-lab{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px}
.cb3w-bar{display:flex; gap:0; height:44px}
.cb3w-bar i{display:flex; align-items:center; justify-content:center; font-style:normal; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums}
.cb3w-bar .on{background:var(--violet); color:#fff}
.cb3w-bar .lt{background:var(--lilac); color:var(--ink)}
@media (hover:hover){.cb3w-row:hover .cb3w-bar i{opacity:.82}}
@media (max-width:520px){.cb3-row{grid-template-columns:120px 1fr 40px; font-size:13px}}


/* CTA before methodology (Figma 635:4452), gradient plate + pixel field */
.cta-sec{padding:88px 0 24px}
.cta-box{position:relative; isolation:isolate; overflow:hidden; max-width:820px; margin:0 auto; padding:64px 56px; border-radius:8px; text-align:center;
  background:linear-gradient(104deg,#e3d8f9 0%,#ffffff 38%,#ffffff 59%,#dfdafc 100%)}
.cta-px{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.cta-box h2{font:600 40px/1.22 var(--display); letter-spacing:-.02em; color:var(--ink); margin:0 auto; max-width:620px}
.cta-box p{font-size:18px; line-height:1.5; color:var(--muted); margin:16px 0 0}
.cta-btns{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:540px; margin:36px auto 0}
.cta-b{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 12px 0 20px; border-radius:8px; font:500 18px/24px var(--body); text-decoration:none; transition:transform .18s, box-shadow .18s, background .18s}
.cta-b.o{color:var(--violet); border:1px solid var(--violet); background:rgba(255,255,255,.6)}
.cta-b.p{color:#fff; background:var(--violet); box-shadow:0 4px 12px rgba(110,58,223,.25)}
@media (hover:hover){.cta-b:hover{transform:translateY(-1px)} .cta-b.o:hover{background:#fff} .cta-b.p:hover{box-shadow:0 8px 20px rgba(110,58,223,.32)}}
@media (max-width:640px){.cta-box{padding:44px 22px} .cta-box h2{font-size:28px} .cta-box p{font-size:16px} .cta-btns{grid-template-columns:1fr}}


/* final CTA after methodology: dotted backdrop with a soft violet glow and the product collage (Figma 23:3656) */
.cta-sec.final{position:relative; overflow:hidden; padding:120px 0 0; margin-top:40px; background:#faf9fc}
.cta-sec.final::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(30,12,69,.16) 1.1px, transparent 1.3px); background-size:15px 15px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%)}
.cta-sec.final::after{content:""; position:absolute; left:50%; bottom:-120px; width:1350px; height:450px; transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(98,26,255,.16), rgba(98,26,255,0)); filter:blur(30px)}
.cta-sec.final .wrap{position:relative; z-index:1}
.cta-soc{display:flex; justify-content:center; gap:16px; margin-top:32px}
.cta-soc a{color:#242424; display:inline-flex; transition:color .18s, transform .18s}
@media (hover:hover){.cta-soc a:hover{color:var(--violet); transform:translateY(-1px)}}
.fc-stage{position:relative; max-width:1284px; margin:24px auto 0; height:400px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%); mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.fc-art{display:block; width:100%; height:auto}
@media (max-width:900px){.fc-stage{height:auto; aspect-ratio:1284/360}}


/* final CTA on phones: quieter social icons, bigger product collage (desktop unchanged) */
@media (max-width:640px){
  .cta-soc{gap:12px; margin-top:24px}
  .cta-soc svg{width:18px; height:18px}
  .fc-stage{aspect-ratio:auto; height:auto; width:100vw; max-width:none; margin:20px 0 0; left:50%; transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
  .fc-art{width:205%; max-width:none; margin-left:-55%; margin-top:-5%}
}
main{margin-bottom:0} body > section:last-of-type, main > section:last-of-type{margin-bottom:0}


/* quote before methodology (Figma 23:4322) */
.quote-sec{padding:96px 0 0}
.qt{max-width:900px; margin:0 auto}
.qt-top{display:grid; grid-template-columns:1fr 100px; height:100px}
.qt-who{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 20px 0 36px; background:#fff; border:1px solid var(--line-2); border-right:0}
.qt-name{text-align:right; display:grid; gap:4px}
.qt-name b{font:500 20px/1.2 var(--body); color:#242424}
.qt-name span{font:400 16px/1.3 var(--body); color:#a6a6a6}
.qt-ph{display:block; width:100px; height:100px; object-fit:cover; border:1px solid var(--line-2)}
.qt-body{margin:0; padding:40px; background:#fff; border:1px solid var(--line-2); border-top:0}
.qt-body h2{font:600 30px/1.2 var(--display); letter-spacing:-.01em; color:#242424; margin:0 0 28px}
.qt-body p{font:400 18px/1.55 var(--body); color:#242424; margin:0 0 18px}
.qt-body p:last-child{margin-bottom:0}
@media (max-width:640px){.qt-top{grid-template-columns:1fr 72px; height:72px} .qt-ph{width:72px; height:72px} .qt-who{padding:0 14px} .qt-who > svg{display:none} .qt-name b{font-size:16px} .qt-name span{font-size:12.5px}
  .qt-body{padding:24px 20px} .qt-body h2{font-size:24px; margin-bottom:20px} .qt-body p{font-size:16px}}

/* final CTA plate: plain page colour, no gradient or pixels; it masks the dotted pattern behind it */
#cta .cta-box{background:#faf9fc}
#cta .cta-px{display:none}

#quote{padding:96px 0 40px}

/* methodology: thin dividers above and below, like every slide */
main > section.next{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-bottom:72px}
#cta.cta-sec.final{margin-top:0}

/* 2.6: lighter violet for 1–3 day trials, for contrast with 4–7 days */
:root{--t13:#c4adf8}


/* 5.1 tile bars: tight columns inside a group (gap = one tile), wider gap between groups; groups pinned to the card edges */
.tb5{display:flex; justify-content:space-between; gap:56px; margin-top:8px}
.tb5-g{flex:0 0 auto}
.tb5-h{font:600 15px/1.3 var(--body); color:var(--ink); text-align:left; margin-bottom:16px}
.tb5-cols{display:flex; justify-content:flex-start; gap:20px; align-items:flex-end; height:330px}
.tb5-col{display:flex; flex-direction:column; align-items:center; gap:10px}
.tb5-v{font:500 17px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums}
.tb5-bar{display:flex; flex-wrap:wrap-reverse; width:calc(5*20px + 4*4px); gap:4px}
.tb5-bar i{width:20px; height:20px; border-radius:3px}
.tb5-col.q .tb5-bar i{background:var(--violet)}
.tb5-col.d .tb5-bar i{background:var(--lilac)}
.tb5-l{font-size:13px; color:var(--muted); font-weight:500}
@media (hover:hover){.tb5-col:hover .tb5-bar{opacity:.75}}
@media (max-width:620px){
  /* phones: the two groups side by side; small tiles, tight inside a group, wider gap between groups */
  .tb5{flex-direction:row; gap:20px} .tb5-cols{height:160px; gap:8px}
  .tb5-bar{width:calc(5*9px + 4*2px); gap:2px} .tb5-bar i{width:9px; height:9px; border-radius:2px}
  .tb5-v{font-size:14px} .tb5-l{font-size:12px} .tb5-col{gap:6px}
  .tb5-g .tb5-h{font-size:14px !important; max-width:6.5em; margin-top:12px !important}
}
/* 5.4: thicker rows, more air (~25% taller chart) */
#t54.sb{gap:12px; margin-top:6px} #t54 .sb-bar{height:34px}

/* thin divider above the first chapter, like the other chapters */
#ch1{border-top:1px solid var(--line)}


/* "whole report as a Claude Skill" slide before the final CTA */
.skill-sec{padding:96px 0; border-top:1px solid var(--line)}
.sk-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center}
.sk-text h2{font:600 52px/1.08 var(--display); letter-spacing:-.02em; color:var(--ink); margin:0}
.sk-text p{font-size:20px; line-height:1.55; color:var(--text); margin:24px 0 0; max-width:460px}
.sk-btn{display:inline-flex; align-items:center; gap:10px; margin-top:32px; height:52px; padding:0 22px; border-radius:8px; background:var(--violet); color:#fff; font:500 17px/1 var(--body); text-decoration:none; box-shadow:0 4px 12px rgba(110,58,223,.25); transition:transform .18s, box-shadow .18s}
@media (hover:hover){.sk-btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(110,58,223,.32)}}
.sk-chat{background:#fff; border:1px solid var(--line-2); border-radius:16px; box-shadow:0 24px 60px rgba(30,12,69,.10); overflow:hidden}
.sk-bar{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line)}
.sk-bar .dots{display:flex; gap:6px} .sk-bar .dots i{width:10px; height:10px; border-radius:50%; background:var(--line-2)}
.sk-title{font:600 13px/1 var(--body); color:var(--muted)}
.sk-body{padding:22px 22px 6px; display:grid; gap:18px}
.sk-msg.me{justify-self:end; max-width:82%; background:#f4f0fb; color:var(--ink); padding:12px 16px; border-radius:14px 14px 4px 14px; font-size:15px; line-height:1.5}
.sk-msg.ai{font-size:15px; line-height:1.55; color:var(--text)}
.sk-msg.ai p{margin:8px 0 0} .sk-msg.ai ul{margin:10px 0 0; padding-left:18px; display:grid; gap:6px} .sk-msg.ai b{color:var(--ink)}
.sk-who{display:flex; align-items:center; gap:8px; font:600 14px/1 var(--body); color:var(--ink)}
.sk-who .av{width:24px; height:24px; border-radius:6px; background:var(--violet); color:#fff; display:inline-flex; align-items:center; justify-content:center}
.sk-skill{display:inline-block; margin-top:10px; padding:5px 10px; border-radius:999px; background:#f4f0fb; color:var(--muted); font-size:12px}
.sk-skill b{color:var(--violet); font-weight:600}
.sk-cmp{margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; display:grid; gap:8px}
.sk-cmp .sk-r{display:grid; grid-template-columns:150px 1fr 48px; gap:10px; align-items:center; font-size:13px}
.sk-cmp .sk-t{display:block; height:14px; background:var(--mist); overflow:hidden}
.sk-cmp .sk-t i{display:block; height:14px; background:var(--lilac)}
.sk-cmp .sk-t i.sk-you{background:var(--violet)}
.sk-cmp b{text-align:right; font-weight:500; font-variant-numeric:tabular-nums}
.sk-input{display:flex; align-items:center; justify-content:space-between; margin:14px 16px 16px; padding:12px 14px; border:1px solid var(--line-2); border-radius:12px; color:var(--faint); font-size:14px}
.sk-input i{width:30px; height:30px; border-radius:8px; background:var(--violet); color:#fff; display:inline-flex; align-items:center; justify-content:center}
@media (max-width:960px){.sk-grid{grid-template-columns:1fr; gap:40px} .sk-text h2{font-size:38px}}
@media (max-width:520px){.skill-sec{padding:64px 0} .sk-text h2{font-size:32px} .sk-text p{font-size:17px} .sk-cmp .sk-r{grid-template-columns:110px 1fr 44px} .sk-msg.me{max-width:92%}}


/* skill slide on a plate: text + CTA on the left, chat window bleeding off the right and bottom edges, fading out */
.sk-plate{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; min-height:600px;
  background:linear-gradient(135deg,#f4f0fb 0%,#efe8fd 55%,#e6dcfa 100%); border-radius:16px; padding:64px 0 0 64px}
.sk-plate .sk-text{display:flex; flex-direction:column; padding-bottom:64px}
.sk-plate .sk-text .sk-btn{margin-top:auto; align-self:flex-start}
.sk-plate .sk-text p{margin-bottom:32px}
.sk-plate .sk-chat{align-self:start; margin-right:-60px; margin-bottom:-80px; box-shadow:0 30px 70px rgba(30,12,69,.14);
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%), linear-gradient(180deg,#000 55%,transparent 100%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 62%,transparent 100%), linear-gradient(180deg,#000 55%,transparent 100%); mask-composite:intersect}
@media (max-width:960px){.sk-plate{grid-template-columns:1fr; padding:40px 0 0 32px; min-height:0} .sk-plate .sk-text{padding:0 32px 0 0} .sk-plate .sk-text .sk-btn{margin-top:8px} .sk-plate .sk-chat{margin-right:-40px}}
@media (max-width:520px){.sk-plate{padding:28px 0 0 20px} .sk-plate .sk-text{padding-right:20px}}


/* skill chat mock: landing palette, larger comparison chart */
.sk-plate .sk-body{padding:26px 26px 4px; gap:20px}
.sk-plate .sk-msg.me{max-width:88%; font-size:15px}
.sk-plate .sk-msg.me .cmd{color:var(--violet); font-weight:400} .sk-plate .sk-msg.me .cmd i{font-style:normal; color:var(--lilac-2); margin-right:1px}
.sk-plate .sk-who .av{width:22px; height:22px; border-radius:50%; background:var(--violet)}
.sk-plate .sk-cmp{padding:16px; gap:12px; margin-top:14px}
.sk-plate .sk-cmp .sk-r{grid-template-columns:170px 1fr 56px; font-size:14px}
.sk-plate .sk-cmp .sk-t, .sk-plate .sk-cmp .sk-t i{height:22px}
.sk-plate .sk-cmp b{font-size:14px}
.sk-plate .sk-input{margin:12px 18px 18px}
/* show the conclusions: wider chat, fade only at the far right and the very bottom */
.sk-plate{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); min-height:680px}
.sk-plate .sk-chat{margin-right:-40px; margin-bottom:-120px;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%), linear-gradient(180deg,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 78%,transparent 100%), linear-gradient(180deg,#000 72%,transparent 100%)}

/* skill badge: plain small caption, no plate */
.sk-plate .sk-skill{background:none; padding:0; margin-top:8px; font-size:12px; color:var(--faint)}
.sk-plate .sk-skill b{color:var(--muted); font-weight:500}

/* Claude symbol in the brand violet, skill line next to it */
.sk-plate .sk-who{gap:10px}
.sk-plate .sk-who .lg{display:inline-flex; color:var(--violet)}
.sk-plate .sk-who .sk-skill{margin:0; font-size:13px; font-weight:400}

/* window header with three dots */
.sk-plate .sk-bar{padding:14px 18px; background:#fff; border-bottom:1px solid var(--line)}
.sk-plate .sk-bar .dots i{width:11px; height:11px; background:var(--line-2)}

/* pixel field on the skill plate */
.sk-plate{isolation:isolate}
.sk-px{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}

/* grouped vertical bars: group title goes under the bars, left-aligned, larger and dark */
.hs-p{display:flex; flex-direction:column}
.hs-p .hs-h{order:2; text-align:left; margin:12px 0 0; padding-left:6%; font:600 16px/1.3 var(--body); color:var(--ink)}
.hs-p .hsv{margin-bottom:28px}
.tb5-g{display:flex; flex-direction:column}
.tb5-g .tb5-h{order:2; margin:16px 0 0; font:600 16px/1.3 var(--body); color:var(--ink); text-align:left}

/* cover frame: square tiles butted together, light lines between them (same tone as the centre panel's border) */
.cover{padding:0}
.mo{gap:1px; background:rgba(214,192,255,.38)}
.mo > .t{border-radius:0; border:0}
.mo > .cv-core{border-radius:0; border:0; box-shadow:none}

/* cover pixel overlay */
.cv13 .cv-px{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; display:block !important}


/* 3.3 vertical bars */
.vb3{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; height:400px; margin:12px 0 28px}
.vb3-col{display:grid; grid-template-rows:1fr auto; min-width:0}
.vb3-tr{position:relative}
.vb3-tr i{position:absolute; left:14%; right:14%; bottom:0; background:var(--violet); transition:opacity .18s}
.vb3-tr b{position:absolute; left:0; right:0; margin-bottom:8px; text-align:center; font:500 18px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums}
.vb3-col .nm{text-align:center; font-size:14px; font-weight:500; color:var(--text); line-height:1.3; padding-top:10px; min-height:46px}
.vb3-col.hl .nm{color:var(--ink); font-weight:700}
@media (hover:hover){.vb3-col:hover i{opacity:.72}}
@media (max-width:520px){.vb3{gap:10px; height:240px} .vb3-col .nm{font-size:12px}}


/* 4.5: square-ish card with vertical bars / unit squares */
#s45 .vb3.sc,#s45 .tc3{height:290px; margin:4px 0 18px}
#s45 .vb3-tr b,#s45 .tc3-tr b{font-size:16px}
#s45 .tc3-grid{width:calc(9*12px + 8*3px); gap:3px} #s45 .tc3-grid i{width:12px; height:12px}
@media (max-width:520px){
  /* phones: narrower unit columns so the three groups never overlap; labels wrap onto two lines */
  #s45 .tc3{gap:10px}
  #s45 .tc3-grid{width:calc(7*9px + 6*3px); gap:3px} #s45 .tc3-grid i{width:9px; height:9px}
  #s45 .tc3-col .nm{max-width:7.6em; margin:0 auto; font-size:12.5px}
  #s45 .vb3.sc .nm{font-size:12.5px}
}
#s45 .big3 b{font-size:clamp(24px,2.4vw,30px)}
#s45 .big3 div{padding:12px 16px}
.vb3.sc{height:380px; grid-template-columns:repeat(3,1fr); gap:36px; margin:12px 0 28px}
.tc3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; height:380px; margin:12px 0 28px}
.tc3-col{display:grid; grid-template-rows:1fr auto; min-width:0}
.tc3-tr{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px}
.tc3-tr b{font:500 18px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums}
.tc3-grid{display:flex; flex-wrap:wrap-reverse; width:calc(9*14px + 8*4px); gap:4px}
.tc3-grid i{width:14px; height:14px; border-radius:2px; background:var(--violet)}
.tc3-col .nm{text-align:center; font-size:14px; font-weight:500; color:var(--text); line-height:1.3; padding-top:10px; min-height:46px}
@media (hover:hover){.tc3-col:hover .tc3-grid{opacity:.75}}
@media (max-width:520px){.vb3.sc,.tc3{height:280px; gap:12px} .tc3-grid{width:calc(7*9px + 6*3px); gap:3px} .tc3-grid i{width:9px; height:9px} .tc3-col .nm{font-size:12px}}

/* 5.5 bars: stretched to the card, value at the bar end */
.p55{display:grid; gap:12px; margin-top:6px}
.p55-row{display:grid; grid-template-columns:190px 1fr; gap:12px; align-items:center; font-size:14px}
.p55-row .nm{color:var(--text); font-weight:500; line-height:1.25}
.p55-row.hl .nm{color:var(--ink); font-weight:700}
.p55-tr{position:relative; height:28px; margin-right:52px}
.p55-tr i{position:absolute; left:0; top:0; bottom:0; transition:width .45s cubic-bezier(.2,.7,.2,1), opacity .18s}
.p55-tr b{position:absolute; top:50%; transform:translateY(-50%); padding-left:8px; font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
@media (hover:hover){.p55-row:hover .p55-tr i{opacity:.72}}
@media (max-width:520px){.p55-row{grid-template-columns:110px 1fr; gap:8px; font-size:13px} .p55-tr{margin-right:40px}}

/* 3.2: blocks with a heading, legend and a full-width stacked bar */
.fb-block{margin-top:22px}
.fb-block + .fb-block{margin-top:36px}
.fb-h{font:600 16px/1.3 var(--body); color:var(--ink); margin:0 0 10px}
.fb-block .legend{margin:0 0 12px}
.fb-block .legend .lg-h{color:var(--ink); margin-right:6px}
@media (max-width:520px){.fb-block .legend .lg-h{flex-basis:100%; margin-right:0}}
.fb{display:flex; height:52px; background:var(--surface-2,#f4f0fb)}
.fb i{display:flex; align-items:center; justify-content:center; font-style:normal; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; min-width:0; overflow:hidden; transition:opacity .18s}
@media (hover:hover){.fb i:hover{opacity:.82}}
#s32 .big2.under{margin-top:36px}

/* skill slide on phones: 3:4 plate — title, subtitle, a scaled-down chat window that fades out, full-width CTA at the bottom */
@media (max-width:640px){
  .sk-plate{display:block !important; aspect-ratio:3/4; min-height:0 !important; padding:26px 20px !important; border-radius:14px}
  .sk-plate .sk-text{display:block !important; padding:0 !important; position:static}
  .sk-plate .sk-text h2,.sk-plate .sk-text p{position:relative; z-index:2}
  .sk-plate .sk-text h2{font-size:30px; line-height:1.1}
  .sk-plate .sk-text p{font-size:15px; line-height:1.5; margin:10px 0 0 !important; max-width:none}
  .sk-plate .sk-chat{width:600px; margin:18px 0 0 !important; transform:scale(var(--sk-k,.53)); transform-origin:top left; box-shadow:0 18px 40px rgba(30,12,69,.12);
    -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 62%) !important; mask-image:linear-gradient(180deg,#000 30%,transparent 62%) !important}
  .sk-plate .sk-text .sk-btn{position:absolute; left:20px; right:20px; bottom:20px; z-index:3; margin:0 !important; justify-content:center; white-space:normal; text-align:center; font-size:15px; line-height:1.25; height:auto; min-height:52px; padding:10px 16px}
}

/* phone cover side strips */
#cvArt foreignObject{}
.cv13 .cv-side foreignObject, .cv13 .cv-side use foreignObject{display:none}
.cv13 .cv-side{display:none; position:absolute; top:0; bottom:0; width:30px; height:100%}
.cv13 .cv-side.l{left:0} .cv13 .cv-side.r{right:0}
@media (max-width:900px){.cv13 .fsvg{width:auto !important}}

/* 5.1: tile size follows the card width so the chart never spills out of its frame */
#t51.tb5{flex-direction:row !important; justify-content:space-between; gap:calc(var(--t,20px)*2)}
#t51 .tb5-cols{gap:var(--t,20px) !important; height:calc(11*(var(--t,20px) + var(--g,4px)) + 44px) !important}
#t51 .tb5-bar{width:calc(5*var(--t,20px) + 4*var(--g,4px)) !important; gap:var(--g,4px) !important}
#t51 .tb5-bar i{width:var(--t,20px) !important; height:var(--t,20px) !important; border-radius:calc(var(--t,20px)*.15) !important}


/* 3.1 anatomy on narrow cards: smaller phone, names only on both sides, tap a name for the stat */
.anat.compact .anat-list li{font-size:12px; cursor:pointer}
.anat.compact .anat-list li b{font-size:12.5px; line-height:1.25; margin:0; text-decoration:underline dotted var(--lilac-2); text-underline-offset:3px}
.anat.compact .anat-list li .ds{display:none}
.anat.compact .anat-list li.on{z-index:6}
.anat.compact .anat-list li.on .ds{display:block; position:absolute; top:calc(100% + 6px); width:max(150px,100%); padding:8px 10px; border-radius:8px; background:var(--ink); color:#fff; font-size:12px; line-height:1.4; text-align:left; box-shadow:0 8px 20px rgba(30,12,69,.18)}
.anat.compact .anat-list li[data-side="l"].on .ds{left:0}
.anat.compact .anat-list li[data-side="r"].on .ds{right:0}


/* Adapty-in-numbers screen before the quote: icon artwork as background, text and facts in the project fonts */
.facts-sec{position:relative; background:var(--bg,#faf9fc); line-height:0}
.facts-sec img{display:block; width:100%; height:auto}
.facts-in{position:absolute; left:25.52%; width:48.96%; top:29.6%; line-height:normal}
.facts-in h2{font:600 clamp(28px,3.05vw,58px)/1.12 var(--display); letter-spacing:-.025em; color:var(--ink); margin:0 0 clamp(16px,1.9vw,36px)}
.facts-in h2 span{color:var(--violet)}
.facts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2)}
.facts-grid div{background:var(--bg,#faf9fc); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(14px,1.9vw,36px) 8px; text-align:center}
.facts-grid b{font:700 clamp(24px,2.7vw,52px)/1 var(--display); letter-spacing:-.03em; color:var(--ink)}
.facts-grid span{margin-top:clamp(6px,.6vw,12px); font:400 clamp(12px,.95vw,18px)/1.3 var(--body); color:var(--muted)}
.facts-grid.m{display:none}
@media (max-width:640px){
  .facts-in{left:4.55%; width:90.9%; top:22.4%}
  .facts-in h2{font-size:7.6vw; margin-bottom:4vw}
  .facts-grid.d{display:none} .facts-grid.m{display:grid; grid-template-columns:repeat(2,1fr)} .facts-in .fbr{display:none}
  .facts-grid div{padding:6.5vw 6px}
  .facts-grid b{font-size:7.4vw} .facts-grid span{font-size:3.1vw; margin-top:1.6vw}
}


/* skill slide: “zip → Claude” illustration between the text and the CTA */
.sk-plate .sk-ill{display:block; width:min(361px,100%); height:auto; margin:28px 0 0}
@media (max-width:640px){
  .sk-plate{aspect-ratio:auto !important; min-height:0; padding-bottom:96px !important}
  .sk-plate .sk-ill{width:min(300px,86%); margin:14px 0 0}
  .sk-plate .sk-chat{margin-top:10px !important; margin-bottom:calc(-1 * (1 - var(--sk-k,.53)) * 640px) !important}
}


/* final CTA: Flow Builder animation under the text and buttons */
.fc-stage.anim{height:auto !important; max-width:1082px; margin:48px auto 0; overflow:visible; -webkit-mask-image:none !important; mask-image:none !important; padding-bottom:72px}
.fc-anim{display:block; width:100%; aspect-ratio:1082/610; border:0; background:transparent; border-radius:16px}
@media (max-width:640px){.fc-stage.anim{margin-top:28px; padding:0 12px 40px} .fc-anim{border-radius:10px}}


/* final CTA: no dot pattern, page colour fading to #F9F9F8 at the bottom, tighter spacing above and around the text block */
#cta.cta-sec.final{padding-top:64px; background:linear-gradient(180deg,#faf9fc 0%,#f9f9f8 100%)}
#cta.cta-sec.final::before{display:none}
#cta.cta-sec.final::after{display:none}
#cta .cta-box{background:transparent; padding:40px 56px 24px}
#cta .fc-stage.anim{margin-top:24px}
@media (max-width:640px){#cta.cta-sec.final{padding-top:40px} #cta .cta-box{padding:28px 22px 16px}}


/* opener illustrations ~20% larger and pulled in towards the text */
.op-ill{width:480px; right:auto; left:min(748px, calc(100% - 456px)); top:-28px}
@media (max-width:1240px){.op-ill{width:420px; right:auto; left:calc(100% - 436px)} .opener h2,.opener .idea{max-width:560px}}
@media (max-width:1120px){.op-ill{position:static; width:min(100%,456px); left:auto} .opener h2,.opener .idea{max-width:none}}
@media (max-width:560px){.op-ill{width:min(100%,384px)}}


/* skill slide on phones: back to a 3:4 plate (text, smaller zip→Claude art, a peek of the chat, CTA at the bottom) */
@media (max-width:640px){
  .sk-plate{aspect-ratio:3/4 !important; padding:24px 20px 20px !important; overflow:hidden}
  .sk-plate .sk-text h2{font-size:28px}
  .sk-plate .sk-text p{font-size:14.5px; margin-top:8px !important}
  .sk-plate .sk-ill{width:min(230px,68%); margin:10px 0 0}
  .sk-plate .sk-chat{margin-top:6px !important; margin-bottom:0 !important;
    -webkit-mask-image:linear-gradient(180deg,#000 12%,transparent 34%) !important; mask-image:linear-gradient(180deg,#000 12%,transparent 34%) !important}
}


/* skill art centred in its space: horizontally under the text, and vertically between the text and the CTA on desktop */
.sk-plate .sk-ill{align-self:center; margin:auto !important}
@media (min-width:641px){.sk-plate .sk-text .sk-btn{margin-top:0 !important} .sk-plate .sk-text p{margin-bottom:0 !important}}
@media (max-width:640px){.sk-plate .sk-ill{display:block; margin:10px auto 0 !important}}

/* 3.1 anatomy — as tuned in Figma (Anatomy of a paywall): tinted screen, hairline outline, soft shadow, translucent image slot */
.anat .phone{background:#faf8ff !important; border:1px solid #cbbdf1 !important; box-shadow:0 22px 48px -10px rgba(110,58,223,.08), 0 6px 14px rgba(30,12,69,.06) !important}
.anat .phone .ph-img{background:rgba(255,255,255,.4) !important; border:1px dashed #ddd5ee !important}
.anat .phone .ph-img span{color:rgba(141,135,163,.5) !important}
.anat .phone .ph-x{opacity:.5}
.anat .phone .ph-plan{background:#faf8ff !important}

/* tooltip */
.tip{position:fixed; z-index:60; pointer-events:none; background:var(--ink); color:var(--bg); font-size:13px; line-height:1.45; padding:10px 12px; border-radius:10px; max-width:260px; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.tip.on{opacity:1; transform:none}
.tip b{font-weight:600}
.tip .t-h{font-weight:600; margin-bottom:4px}
.tip .t-r{display:flex; justify-content:space-between; gap:16px}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-size:14px; opacity:0; transition:.2s; z-index:70; pointer-events:none}
.toast.on{opacity:1; transform:translate(-50%,0)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important} html{scroll-behavior:auto}}