/* TFI Brand Guidelines — site system v2
   Type: Crimson Text Regular (editorial) + General Sans 400/500 (information)
   Grid: 12 columns · 24px text gutter · 10px media gutter · one 4px radius */
@font-face{font-family:"General Sans";src:url(fonts/GeneralSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/GeneralSans-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/GeneralSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/GeneralSans-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/GeneralSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --red:#E70023;--pressed:#D90429;--brick:#C1121F;--ox:#780000;--ember:#38040E;--blush:#F8F9FA;
  --r50:#F8F9FA;--r200:rgba(255,255,255,.78);--r300:#E70023;--r400:#E70023;--r500:#E70023;--r700:#C1121F; /* the pink ramp is retired: these names now point at real reds */
  --ink:#212529;--g50:#F8F9FA;--g100:#E9ECEF;--g200:#DEE2E6;--g300:#CED4DA;--g400:#ADB5BD;--g500:#6C757D;--g600:#495057;--g700:#343A40;
  --ok:#287F3C;--warn:#9A5B00;
  --nav:256px;--pad:56px;--gut:24px;--mg:10px;--rad:4px;
  --serif:"Crimson Text",Georgia,serif;--sans:"General Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);--brand:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
[class^="ph-"],[class*=" ph-"]{font-size:1.15em;line-height:1;vertical-align:-.15em}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- progress ---------- */
.progress{position:fixed;left:var(--nav);right:0;top:0;height:2px;z-index:25;pointer-events:none}
.progress i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- navigation ---------- */
.nav{position:fixed;inset:0 auto 0 0;width:var(--nav);background:#fff;border-right:1px solid var(--g100);display:flex;flex-direction:column;z-index:20;overflow-y:auto}
.nav-top{padding:32px 24px 28px}
.nav-top a{display:inline-block}
.nav-title{font-size:12px;color:var(--g500);margin-top:14px;line-height:1.4}
.nav ol{list-style:none;padding:0 12px 32px}
.nav li>a{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:15px;line-height:1;padding:10px 12px;border-radius:var(--rad);color:var(--g700);transition:color .2s var(--ease),background .2s var(--ease)}
.nav li>a i{font-size:20px;color:var(--g500);transition:color .2s var(--ease)}
.nav li>a:hover{background:var(--g50);color:var(--ink)}
.nav li>a:hover i{color:var(--ink)}
.nav li.on>a{color:var(--red);background:transparent;box-shadow:inset 3px 0 0 var(--red)}
.nav li.on>a i{color:var(--red)}
.nav .subs{list-style:none;padding:6px 0 10px 44px;border-left:1px solid var(--g200);margin-left:22px}
.nav .subs a{display:block;font-size:13px;line-height:1.5;padding:4px 0;color:var(--g500);text-decoration:none;transition:color .2s var(--ease)}
.nav .subs a:hover,.nav .subs a.act{color:var(--ink)}
.nav .subs a.act{color:var(--red)}
.nav-foot{margin-top:auto;padding:18px 24px 24px;font-size:12px;color:var(--g500);border-top:1px solid var(--g100)}
.burger{display:none}

main{margin-left:var(--nav);min-width:0}
.wrap{padding:0 var(--pad);max-width:1640px}

/* ---------- type ---------- */
.serif{font-family:var(--serif);font-weight:400}
.d1{font-family:var(--serif);font-weight:400;font-size:clamp(72px,10vw,188px);line-height:.88;letter-spacing:-.04em}
.d2{font-family:var(--serif);font-weight:400;font-size:clamp(52px,6.6vw,116px);line-height:.94;letter-spacing:-.04em}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4vw,68px);line-height:1;letter-spacing:-.035em}
.d4{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.5vw,40px);line-height:1.08;letter-spacing:-.03em}
.lead{font-size:clamp(20px,1.75vw,27px);line-height:1.36;letter-spacing:-.012em}
.big{font-size:19px;line-height:1.5;letter-spacing:-.005em}
.small{font-size:13px;line-height:1.5}
.lbl{font-size:13px;font-weight:500;color:var(--g600);letter-spacing:.01em}
.muted{color:var(--g500)}
.red{color:var(--red)}
.dot{color:var(--red)}
.cap{font-size:13px;color:var(--g600);margin-top:10px;line-height:1.45}
p+p{margin-top:1em}
b,strong{font-weight:500}
.ok{color:var(--ok);font-weight:500}.no{color:var(--red);font-weight:500}.warn{color:var(--warn);font-weight:500}

/* ---------- page hero ---------- */
.hero{padding:112px 0 0}
.hero-top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:end}
.hero-num{grid-column:1/3;font-size:15px;color:var(--g500);padding-bottom:20px;font-variant-numeric:tabular-nums}
.hero-title{grid-column:3/13}
.hero-intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);margin-top:48px}
.hero-intro .lead{grid-column:3/11}
.hero-media{margin-top:80px}
.contents{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);margin-top:96px;padding-top:20px;border-top:1px solid var(--ink)}
.contents h4{grid-column:1/3;font-weight:400;font-size:15px}
.contents ol{grid-column:3/13;list-style:none;columns:3;column-gap:var(--gut)}
.contents li{break-inside:avoid;font-size:15px;line-height:1.9}
.contents a{text-decoration:none;display:grid;grid-template-columns:48px 1fr;transition:color .2s var(--ease)}
.contents a span{color:var(--g500);font-variant-numeric:tabular-nums}
.contents a:hover{color:var(--red)}

/* ---------- sub-section ---------- */
.sec{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);padding:24px 0 0;margin-top:176px;border-top:1px solid var(--g200);scroll-margin-top:24px}
.sec-h{grid-column:1/4}
.sec-h .n{font-size:15px;color:var(--g500);font-variant-numeric:tabular-nums}
.sec-h h2{font-weight:400;font-size:20px;line-height:1.3;margin-top:2px}
.sec-b{grid-column:4/10}
.block{grid-column:1/13;margin-top:56px;min-width:0}
.block.wide{margin-top:48px}

/* ---------- utilities ---------- */
.g{display:grid;gap:var(--mg)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gap24{column-gap:var(--gut);row-gap:32px}
.mt32{margin-top:32px}
.center{display:flex;align-items:center;justify-content:center}
.m{position:relative;overflow:hidden;background:var(--g100);border-radius:var(--rad)}
.m img,.m video{width:100%;height:100%;object-fit:cover}
.m.contain img{object-fit:contain}
.m.top img{object-position:top}
.r11{aspect-ratio:1/1}.r34{aspect-ratio:3/4}.r45{aspect-ratio:4/5}.r43{aspect-ratio:4/3}.r169{aspect-ratio:16/9}.r32{aspect-ratio:3/2}.r21{aspect-ratio:2/1}.r916{aspect-ratio:9/16}
.fig{margin:0}
.panel{background:var(--g50);padding:40px;border-radius:var(--rad)}
.big-pad{padding:clamp(40px,6vw,96px) clamp(32px,5vw,80px)}
.dark{background:var(--ember);color:#fff}
.redbg{background:var(--red);color:#fff}
.split{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end}

/* ---------- rules, rows, cards ---------- */
.rule{border-top:1px solid var(--g200);padding-top:14px}
.rule h3{font-weight:500;font-size:15px}
.rule p{font-size:15px;color:var(--g600);margin-top:4px}
.rulegrid{column-gap:var(--gut);row-gap:28px}
.rowlink{display:grid;grid-template-columns:56px 36px minmax(0,3fr) minmax(0,5fr) 32px;align-items:center;gap:12px;padding:22px 0;border-top:1px solid var(--g200);text-decoration:none;transition:padding .35s var(--ease),color .2s var(--ease)}
.rowlink:last-child{border-bottom:1px solid var(--g200)}
.rowlink .rn{font-size:13px;color:var(--g500);font-variant-numeric:tabular-nums}
.rowlink .ri{font-size:24px;color:var(--g500);transition:color .2s var(--ease)}
.rowlink .rt{font-family:var(--serif);font-size:clamp(26px,2.4vw,38px);letter-spacing:-.03em;line-height:1.05}
.rowlink .rd{font-size:15px;color:var(--g600)}
.rowlink .ra{font-size:22px;color:var(--g400);transition:transform .35s var(--ease),color .2s var(--ease)}
.rowlink:hover{padding-left:12px}
.rowlink:hover .rt,.rowlink:hover .ri,.rowlink:hover .ra{color:var(--red)}
.rowlink:hover .ra{transform:translateX(6px)}
.lnk{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-size:13px;font-weight:500;color:var(--red);cursor:pointer;text-decoration:none;margin-top:12px}
.lnk:hover{color:var(--ox)}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;background:var(--red);color:#fff;border:0;border-radius:var(--rad);padding:12px 18px;text-decoration:none;cursor:pointer;transition:background .2s var(--ease)}
.btn:hover{background:var(--pressed)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--g300)}
.btn.done{background:var(--ok)}

/* ---------- tabs, accordion, pills, seg ---------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:28px;border-bottom:1px solid var(--g200)}
.tabs button{background:none;border:0;font-size:15px;color:var(--g500);cursor:pointer;padding:12px 14px;position:relative;transition:color .2s var(--ease)}
.tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transition:transform .35s var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{transform:none}
.pane{display:none}
.pane.on{display:block;animation:fadein .5s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vtabs{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:40px}
.vtabs>.tabs{flex-direction:column;border:0;border-left:1px solid var(--g200);margin:0;align-self:start;position:sticky;top:24px}
.vtabs>.tabs button{text-align:left;padding:10px 16px}
.vtabs>.tabs button::after{left:-1px;right:auto;top:8px;bottom:8px;width:2px;height:auto;transform:scaleY(0)}
.vtabs>.tabs button.on::after{transform:none}
.vtabs>.pane{grid-column:2;grid-row:1}
.acc details{border-top:1px solid var(--g200)}
.acc details:last-child{border-bottom:1px solid var(--g200)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:22px 0;font-size:20px}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{font-size:22px;color:var(--g500);transition:transform .35s var(--ease)}
.acc details[open] summary i{transform:rotate(45deg);color:var(--red)}
.acc summary:hover{color:var(--red)}
.acc-b{padding:0 0 36px;max-width:1100px;animation:fadein .5s var(--ease)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills button{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--g50);box-shadow:inset 0 0 0 1px var(--g200);border-radius:999px;padding:9px 16px;font-size:14px;cursor:pointer;transition:all .2s var(--ease)}
.pills button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pills button.on{background:var(--ink);color:#fff;box-shadow:none}
.seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--g300);border-radius:var(--rad);overflow:hidden}
.seg button{font-size:13px;border:0;background:none;padding:9px 14px;cursor:pointer;color:var(--g600);transition:all .2s var(--ease)}
.seg button.on{background:var(--ink);color:#fff}
.ctrl{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--g600)}
.ctrl label{display:flex;gap:10px;align-items:center}
input[type=range]{accent-color:var(--red);width:100%}
.chip{display:inline-block;width:14px;height:14px;border-radius:2px;vertical-align:-2px;margin-right:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.ck{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--g50)}
.ck.ok{color:var(--ok);background:#EAF1EA}.ck.no{color:var(--red);background:var(--r50)}.ck.warn{color:var(--warn);background:#FFF4E6}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-weight:500;font-size:13px;color:var(--g600);padding:0 16px 10px 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:13px 16px 13px 0;border-bottom:1px solid var(--g200);vertical-align:top}
.tbl .lnk{margin:0}

/* ---------- swatches ---------- */
.sw{cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:16px;min-height:220px;border-radius:var(--rad);transition:transform .25s var(--ease)}
.sw:hover{transform:translateY(-4px)}
.sw .job{font-family:var(--serif);font-size:28px;line-height:1;letter-spacing:-.03em}
.sw .hex{font-size:13px;font-weight:500;letter-spacing:.02em}
.sw.line{box-shadow:inset 0 0 0 1px var(--g200)}
.spec{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.spec td{padding:3px 0;vertical-align:top}
.spec td:first-child{color:var(--g500);width:56px}
.ramp{display:grid;gap:var(--mg)}
.shb{width:44px;height:44px;border:0;border-radius:var(--rad);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .2s var(--ease)}
.shb:hover{transform:translateY(-2px)}
.shb.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13px;padding:10px 16px;border-radius:var(--rad);opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- do / don't ---------- */
.dd .m{display:flex;align-items:center;justify-content:center}
.dd .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin-top:12px}
.dd .tag i{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;color:#fff;background:var(--ok)}
.dd.no .tag i{background:var(--red)}
.dd.no .m::after{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:2px;background:var(--red);transform:rotate(-22deg)}
.dd p{font-size:15px;color:var(--g600);margin-top:4px}

/* ---------- next ---------- */
.next{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:end;margin-top:200px;padding:28px 0 120px;border-top:1px solid var(--ink);text-decoration:none}
.next .l{grid-column:1/3;font-size:15px;color:var(--g600);align-self:start}
.next .t{grid-column:3/12;transition:color .3s var(--ease)}
.next .nx{grid-column:12/13;justify-self:end;font-size:48px;color:var(--g400);transition:transform .4s var(--ease),color .3s var(--ease)}
.next:hover .t,.next:hover .nx{color:var(--red)}
.next:hover .nx{transform:translateX(8px)}

/* ---------- downloads drawer ---------- */
.dlbtn{position:fixed;right:24px;bottom:24px;z-index:30;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:13px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s var(--ease),transform .3s var(--ease)}
.dlbtn:hover{background:var(--red);transform:translateY(-2px)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:50;transform:translateX(100%);transition:transform .6s var(--brand);overflow-y:auto;box-shadow:-1px 0 0 var(--g200)}
.drawer-in{padding:36px 32px 48px}
.drawer-h{display:flex;justify-content:space-between;align-items:center}
.drawer-h button{border:0;background:var(--g50);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center}
.dlist{margin-top:8px}
.dlrow{display:grid;grid-template-columns:28px 1fr 24px;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--g100);text-decoration:none;font-size:15px;transition:color .2s var(--ease)}
.dlrow i{font-size:20px;color:var(--g500)}
.dlrow:hover,.dlrow:hover i{color:var(--red)}
.scrim{position:fixed;inset:0;background:rgba(33,37,41,.32);z-index:45;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.drawer-on .drawer{transform:none}
.drawer-on .scrim{opacity:1;pointer-events:auto}

/* ---------- page components ---------- */
/* home cover */
.cover{background:var(--red);border-radius:var(--rad);padding:clamp(32px,4vw,64px);min-height:min(68vh,720px);display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.cover-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cover-line{color:#fff;max-width:1200px}
.cover-line span{display:inline-block}

/* about */
.stmt{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);padding:28px 0 56px;border-top:1px solid var(--ink)}
.stmt .lbl{grid-column:1/3}.stmt .d3{grid-column:3/12}
.vcard{min-height:400px;display:flex;flex-direction:column;justify-content:space-between}
.vcard .vi{font-size:44px}
.vcard.redbg .big,.vcard.dark .big{color:#fff}
.model{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mg);counter-reset:m}
.mstep{position:relative;background:var(--g50);border-radius:var(--rad);padding:36px;min-height:380px;display:flex;flex-direction:column;gap:14px}
.mstep .mi{font-size:40px;color:var(--red);margin:12px 0 auto}
.mstep:nth-child(2){background:var(--red);color:#fff}.mstep:nth-child(2) .mi,.mstep:nth-child(2) .lbl,.mstep:nth-child(2) .muted{color:#fff}
.mstep:nth-child(3){background:var(--ember);color:#fff}.mstep:nth-child(3) .mi{color:var(--r400)}.mstep:nth-child(3) .lbl,.mstep:nth-child(3) .muted{color:var(--r200)}
.statgrid{column-gap:var(--gut);row-gap:56px}
.stat{border-top:1px solid rgba(255,255,255,.4);padding-top:16px}
.stat .pl{font-size:.6em}

/* brand family */
.tree{display:flex;flex-direction:column;align-items:center;padding:64px 24px;background:var(--g50);border-radius:var(--rad)}
.tree-root{text-align:center}.tree-root p{margin-top:12px}
.tree-line{display:block;width:1px;height:48px;background:var(--g300);margin:24px 0 0}
.tree-kids{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--mg);width:100%;border-top:1px solid var(--g300);padding-top:32px}
.tree-kid{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-radius:var(--rad);padding:28px 12px;min-height:150px;text-align:center}
.subcard{min-height:460px;display:flex;flex-direction:column;justify-content:space-between}
.subchips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.subchips i{width:56px;height:24px;border-radius:2px}
.subchips span{margin-left:10px;flex:1 1 220px}
.lockrow{display:flex;align-items:center;gap:24px;padding:36px;background:var(--g50);border-radius:var(--rad)}
.lockrow>i{width:1px;height:52px;background:var(--ink)}
.lockrow>span{font-size:15px;font-weight:500;letter-spacing:.06em;line-height:1.3}

/* voice */
.tonecard{min-height:280px;display:flex;flex-direction:column;justify-content:space-between}
.tonecard .lbl{display:flex;align-items:center;gap:6px}
.hl{border-top:1px solid var(--g200);padding:22px 0;transition:color .3s var(--ease),padding .4s var(--ease)}
.hl:hover{color:var(--red);padding-left:12px}
.forttest .ftq{display:grid;grid-template-columns:64px 1fr;align-items:center;border-top:1px solid rgba(255,255,255,.22);padding:22px 0;cursor:pointer}
.forttest input{position:absolute;opacity:0;pointer-events:none}
.forttest .box{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:20px;color:transparent;transition:all .3s var(--ease)}
.forttest input:checked+.box{background:var(--red);box-shadow:none;color:#fff}
.forttest input:checked~.d4{color:var(--r200)}
.forttest .d4{color:#fff;transition:color .3s var(--ease)}
.ftres{margin-top:32px;color:var(--r200);opacity:.35;transition:opacity .4s var(--ease),color .4s var(--ease)}
.forttest.done .ftres{opacity:1;color:#fff}

/* logo */
.anat{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.anat-art{background:var(--g50);border-radius:var(--rad);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.anat-art svg{width:48%;height:auto}
.anat-art path{transition:opacity .5s var(--ease)}
.anat-art path.dim{opacity:.12}
.anat-list button{display:grid;grid-template-columns:48px 1fr;column-gap:12px;text-align:left;width:100%;background:none;border:0;border-top:1px solid var(--g200);padding:22px 0;cursor:pointer}
.anat-list button:last-child{border-bottom:1px solid var(--g200)}
.anat-list .big{grid-column:2;margin-top:6px;max-height:0;overflow:hidden;opacity:0;transition:all .45s var(--ease)}
.anat-list button.on .d4{color:var(--red)}
.anat-list button.on .big{max-height:120px;opacity:1}
.lockgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--mg)}
.lockgrid .m{aspect-ratio:auto;height:360px}
.lk .lbl{margin-top:14px}
.clrbox{position:relative;padding:34px;transition:all .5s var(--ease)}
[data-toggle][data-state=on] .clrbox{box-shadow:0 0 0 1px var(--red);background:repeating-linear-gradient(45deg,rgba(231,0,35,.08) 0 6px,transparent 6px 12px)}
.sz-art{transition:height .15s}.sz-art svg{height:100%;width:auto}
.sizer.bad .sz-art svg{fill:var(--g400)!important}
.sz-out{min-width:280px}
.ground-stage{position:relative;transition:background .6s var(--brand)}
.ground-stage svg{transition:fill .6s var(--brand)}
.gverdict{position:absolute;left:20px;top:18px;display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;background:#fff}
.gverdict.ok{color:var(--ok)}.gverdict.no{color:var(--red)}
.ground-btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ground-btns button{width:56px;height:56px;border:0;border-radius:var(--rad);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:transform .2s var(--ease)}
.ground-btns button:hover{transform:translateY(-2px)}
.ground-btns button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.gwhy{margin-top:20px}
.sigmark{position:absolute;left:3%;bottom:4%;width:12%}
.sigguide{position:absolute;left:3%;bottom:4%;width:18%;aspect-ratio:3/1;outline:1px dashed rgba(255,255,255,.8);outline-offset:8px;pointer-events:none}
.avs{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap}
.av{border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;flex:none}

/* colour */
.albers{position:relative;aspect-ratio:21/9;overflow:hidden;cursor:crosshair;border-radius:var(--rad)}
.albers div{position:absolute;transition:all .9s var(--brand)}
.cguide{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.cg-q{display:flex;flex-direction:column;gap:32px}
.cg-q .lbl{margin-bottom:12px}
.cg-why{border-top:1px solid var(--g200);padding-top:16px}
.cg-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.cg-post{aspect-ratio:4/5;border-radius:var(--rad);padding:9%;display:flex;flex-direction:column;justify-content:space-between;transition:background .6s var(--brand)}
.cg-logo{width:24%}.cg-logo svg{width:100%;height:auto;transition:fill .6s var(--brand)}
.cg-head{font-family:var(--serif);font-size:clamp(30px,2.8vw,48px);line-height:.98;letter-spacing:-.04em;margin-top:10px;transition:color .6s var(--brand)}
.cg-body{font-size:14px;margin-top:14px;transition:color .6s var(--brand)}
.cg-kick{letter-spacing:.08em;text-transform:uppercase;transition:color .6s var(--brand)}
.cg-cta{align-self:flex-start;font-size:13px;font-weight:500;padding:10px 16px;border-radius:var(--rad);transition:all .6s var(--brand)}
.cg-spec{display:flex;flex-direction:column}
.cgr{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-top:1px solid var(--g200);cursor:pointer;font-size:14px}
.cgr:hover{color:var(--red)}
.cgr>span:nth-child(2){display:none}
.cgr>span:nth-child(3)::before{content:"";display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:8px;vertical-align:-1px;background:currentColor}
.cgr .ck{justify-self:start}
.modecard{padding:9%;display:flex;flex-direction:column;justify-content:space-between}

/* typography */
.facecard{min-height:480px;display:flex;flex-direction:column;justify-content:space-between}
.aa{font-size:clamp(120px,15vw,280px);line-height:.8;letter-spacing:-.04em}
.srow{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline;border-top:1px solid var(--g200);padding:18px 0}
.srow>.lbl{grid-column:1/3}.srow>p:last-child{grid-column:3/13}
.tester{width:100%;border:0;outline:0;background:none;font:inherit;color:inherit;resize:none}

/* imagery */
.treat-img{position:relative}
.treat-img img{transition:filter .6s var(--brand)}
.treat-img::before,.treat-img::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s var(--brand);pointer-events:none}
.treat-img::before{background:#E70023;mix-blend-mode:multiply}
.treat-img::after{background:#38040E;mix-blend-mode:lighten}
[data-treat=mono] .treat-img img{filter:grayscale(1) contrast(1.08)}
[data-treat=duo] .treat-img img{filter:grayscale(1) contrast(1.15) brightness(1.08)}
[data-treat=duo] .treat-img::before,[data-treat=duo] .treat-img::after{opacity:1}
.treat-notes{margin-top:20px;max-width:760px}
.treat-notes p{display:none}
[data-treat=true] [data-n=true],[data-treat=mono] [data-n=mono],[data-treat=duo] [data-n=duo]{display:block;animation:fadein .5s var(--ease)}
.crop-stage{position:relative;aspect-ratio:3/2;max-height:72vh;overflow:hidden;border-radius:var(--rad);background:var(--ink)}
.crop-stage img{width:100%;height:100%;object-fit:cover;opacity:.92}
.crop-frame{position:absolute;box-shadow:0 0 0 2000px rgba(33,37,41,.62),inset 0 0 0 2px #fff;cursor:grab;transition:width .5s var(--brand),height .5s var(--brand),top .5s var(--brand)}
.crop-frame:active{cursor:grabbing}
.crop-frame .thirds{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.5) calc(33.33% - .5px) calc(33.33% + .5px),transparent 0,transparent calc(66.66% - .5px),rgba(255,255,255,.5) 0 calc(66.66% + .5px),transparent 0),linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.5) calc(33.33% - .5px) calc(33.33% + .5px),transparent 0,transparent calc(66.66% - .5px),rgba(255,255,255,.5) 0 calc(66.66% + .5px),transparent 0)}
.bars{display:flex;gap:28px;align-items:flex-end;height:380px;border-bottom:1px solid var(--ink)}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:8px}
.bar i{display:block;border-radius:2px 2px 0 0}
.barl{display:flex;gap:28px;margin-top:10px}.barl p{flex:1}

/* composition: grid cards, recipes */
.mini{width:100%;height:auto;display:block}
.gtlist{display:flex;flex-direction:column}
.gtcard{display:grid;grid-template-columns:140px minmax(0,1fr);gap:32px;align-items:start;padding:28px 0;border-top:1px solid var(--g200)}
.gtcard:last-child{border-bottom:1px solid var(--g200)}
.rccard .mini{border-radius:var(--rad)}
.mx{position:relative;aspect-ratio:1/1;background:var(--g50);border-radius:var(--rad)}
.mx .ax{position:absolute;background:var(--g300)}
.mx .ax.x{left:0;right:0;top:50%;height:1px}.mx .ax.y{top:0;bottom:0;left:50%;width:1px}
.mx .al{position:absolute;font-size:13px;color:var(--g600)}
.mx .pt{position:absolute;width:15%;transform:translate(-50%,-50%);transition:transform .3s var(--ease);cursor:pointer;border-radius:2px}
.mx .pt:hover{transform:translate(-50%,-50%) scale(1.08);z-index:2}

/* composition: the studio */
.studio{background:var(--g50);border-radius:var(--rad);padding:24px}
.st-top{display:flex;flex-wrap:wrap;gap:24px 40px;padding-bottom:24px;border-bottom:1px solid var(--g200)}
.st-group .lbl{margin-bottom:10px}
.fmts,.gts{display:flex;gap:6px;flex-wrap:wrap}
.fmts button,.gts button{border:0;background:#fff;border-radius:var(--rad);box-shadow:inset 0 0 0 1px var(--g200);cursor:pointer;transition:all .2s var(--ease)}
.fmts button{display:grid;grid-template-rows:44px auto auto;justify-items:center;align-items:end;padding:12px 14px 10px;min-width:84px;font-size:14px;font-weight:500}
.fmts button small{font-size:12px;font-weight:400;color:var(--g500)}
.fmts .fr{display:block;height:100%;max-width:56px;max-height:40px;background:var(--g200);border-radius:2px;align-self:center}
.fmts .fr[style*="1920/1080"],.fmts .fr[style*="2400/1200"]{height:auto;width:56px}
.gts button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;font-size:13px;width:88px}
.gts .mini{width:40px}
.fmts button:hover,.gts button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.fmts button.on,.gts button.on{box-shadow:inset 0 0 0 2px var(--red)}
.fmts button.on .fr{background:var(--red)}
.st-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding-top:24px}
.st-canvas-wrap{display:flex;flex-direction:column;align-items:center;min-width:0}
.st-canvas{position:relative;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px var(--g200);touch-action:none}
.st-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.st-art,.st-grid,.st-blocks{position:absolute;inset:0}
.st-art{transition:background .5s var(--brand)}
.st-grid{pointer-events:none;z-index:2}
.st-grid i{position:absolute;display:block}
.st-grid .glab,.st-grid .gnum{position:absolute;font-weight:500;font-size:26px;letter-spacing:.02em;white-space:nowrap}
.st-grid .gnum{text-align:center;font-size:24px}
.st-blocks{z-index:3}
.sb{position:absolute;cursor:grab;transition:left .25s var(--ease),top .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
.sb:active{cursor:grabbing}
.sb:hover{outline:3px solid rgba(33,37,41,.25)}
.sb.sel{outline:4px solid #212529;outline-offset:2px;z-index:5}
.sb-tag{position:absolute;left:0;top:-42px;font-size:22px;font-weight:500;background:#212529;color:#fff;padding:4px 10px;border-radius:4px;display:none;text-transform:capitalize}
.sb.sel .sb-tag{display:block}
.sb-h{position:absolute;right:-16px;bottom:-16px;width:32px;height:32px;background:#fff;border:4px solid #212529;border-radius:50%;cursor:nwse-resize;display:none}
.sb.sel .sb-h{display:block}
.sb-img{width:100%;height:100%;background-size:cover;background-position:center;border-radius:4px}
.sb-logo{width:100%;height:100%;display:flex;align-items:flex-start}
.sb-logo svg{width:100%;height:100%;max-height:100%;object-fit:contain}
.sb-head{font-family:var(--serif);line-height:.92;letter-spacing:-.04em;outline:0;overflow:hidden;cursor:text;word-break:normal;overflow-wrap:break-word}
.sb-kick{font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.sb-body{overflow:hidden}
.sb-cta{display:flex;align-items:center;height:100%;width:max-content;max-width:100%;font-weight:500;white-space:nowrap}
.sb-foot{font-weight:500;letter-spacing:.3em;white-space:nowrap;overflow:hidden}
.st-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%;margin-top:14px;font-size:13px;color:var(--g600)}
.st-checks{display:flex;gap:6px;flex-wrap:wrap}
.st-panel{display:flex;flex-direction:column;gap:0;background:#fff;border-radius:var(--rad);box-shadow:inset 0 0 0 1px var(--g200);align-self:start}
.st-sec{padding:18px 20px;border-bottom:1px solid var(--g100)}
.st-sec:last-child{border-bottom:0}
.st-sec>.lbl{margin-bottom:12px}
.sl{display:grid;grid-template-columns:84px 1fr 58px;align-items:center;gap:10px;font-size:13px;color:var(--g600);padding:4px 0}
.sl output{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.st-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.tg{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--g600);cursor:pointer}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg span{width:30px;height:18px;border-radius:999px;background:var(--g300);position:relative;transition:background .2s var(--ease)}
.tg span::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.tg input:checked+span{background:var(--red)}
.tg input:checked+span::after{transform:translateX(12px)}
.tg input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.rcs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rcs button{border:0;background:none;padding:4px;border-radius:var(--rad);cursor:pointer;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.2;text-align:left;color:var(--g600)}
.rcs button .mini{border-radius:2px}
.rcs button.on{box-shadow:inset 0 0 0 2px var(--red);color:var(--ink)}
.els{display:flex;flex-wrap:wrap;gap:6px}
.els button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;background:var(--g50);box-shadow:inset 0 0 0 1px var(--g200);color:var(--g500);transition:all .2s var(--ease)}
.els button.on{background:var(--ink);color:#fff;box-shadow:none}
.st-out pre{font:12px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;background:var(--g50);padding:12px;border-radius:var(--rad);margin-bottom:12px;color:var(--ink)}

/* templates */
.kit-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);margin-top:28px}
.phone{max-width:380px;border-radius:40px;background:#fff;box-shadow:0 0 0 10px var(--ink);padding:26px 14px}
.phone-h{display:flex;gap:14px;align-items:center;padding:0 6px 16px}
.doc{max-width:760px;margin:0 auto;box-shadow:0 0 0 1px var(--g200);border-radius:var(--rad);overflow:hidden;background:#fff}
.gal .gi{animation:fadein .5s var(--ease)}

/* ---------- v3: kinetic flyer wall (after Cosmos + RISD) ---------- */
.kwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kt{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--g50)}
.ktrack{display:flex;flex-direction:column;height:100%;will-change:transform}
.ktrack.anim{transition:transform .9s var(--brand)}
.kf{flex:0 0 100%;height:100%;position:relative;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--g200)}
.kf img{width:100%;height:100%;object-fit:cover;display:block}
.kw{display:flex;align-items:flex-end;padding:8%}
.kw span{font-family:var(--serif);font-size:clamp(40px,5.4vw,104px);line-height:.82;letter-spacing:-.045em;color:var(--red)}
.kw.dk{background:var(--ember);box-shadow:none}
.km{display:flex;align-items:center;justify-content:center}
.km svg{width:56%;height:auto;fill:var(--red)}
.km.dk{background:var(--ember);box-shadow:none}
/* page logo */
.hero-top{position:relative}
.hero-logo{position:absolute;right:0;top:-76px}
.hero-logo svg{height:40px;width:auto;fill:var(--red)}
/* chart cards (lieflat four-part card) */
.chartcard{background:#fff;box-shadow:inset 0 0 0 1px var(--g200);padding:32px}
.chartcard .sub{font-size:13px;color:rgba(33,37,41,.68);margin-top:8px}
.chartcard svg{width:100%;height:auto;display:block;margin-top:18px}
.chartcard .src{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#6C757D;margin-top:10px}
.chartcard .pop{transform-box:fill-box;transform-origin:center;animation:cpop .5s cubic-bezier(.2,.7,.3,1.3) both}
@keyframes cpop{from{transform:scale(0)}to{transform:none}}
.chartcard .fade{animation:cfade .9s ease both}
@keyframes cfade{from{opacity:0}}
.chartcard .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:cdraw 1s cubic-bezier(.4,0,.2,1) both}
@keyframes cdraw{to{stroke-dashoffset:0}}
/* Swiss review: one accent, opacity for hierarchy, rectilinear, tabular numbers */
:root{--rad:2px}
.muted{color:rgba(33,37,41,.68)}
.lbl,.cap,.rule p,.rowlink .rd,.tbl th{color:rgba(33,37,41,.72)}
.sec-h .n,.hero-num,.contents a span,.rowlink .rn{color:rgba(33,37,41,.66)}
.pills button,.els button,.ck,.dlbtn{border-radius:2px}
.tbl td,.stat,.sz-out,.sl output{font-variant-numeric:tabular-nums}
.hero-title{text-wrap:balance}
.sec-b .big{max-width:60ch}
@media (max-width:820px){.hero-logo{display:none}.kwall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.ktrack.anim{transition:none}.chartcard .pop,.chartcard .fade{animation:none}.chartcard .draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0}}
.chartcard svg{max-height:560px}

/* ---------- layout grid overlay ---------- */
[data-grid]{position:relative;cursor:zoom-in}
[data-grid] img{width:100%;height:100%;object-fit:cover;display:block}
.gridov{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s cubic-bezier(.2,.7,.2,1)}
.grid-on>.gridov,.viewer.grid-on .gridov{opacity:1}
.gridov .gc{position:absolute;top:0;bottom:0;background:rgba(231,0,35,.07);border-left:1px solid rgba(231,0,35,.55);border-right:1px solid rgba(231,0,35,.55)}
.gridov .gc b{position:absolute;top:6px;left:50%;transform:translateX(-50%);font:500 11px/1 var(--sans);color:#fff;background:var(--red);padding:3px 5px;letter-spacing:.04em}
.gridov .gr{position:absolute;left:0;right:0;border-top:1px dashed rgba(0,122,255,.6);border-bottom:1px dashed rgba(0,122,255,.6);display:none}
.grid-on>.gridov .gr{display:block;opacity:.6}
.viewer .gridov .gr{display:none}.viewer.rows-on .gridov .gr{display:block}
.gridov .gm{position:absolute;border:1px dashed rgba(231,0,35,.8)}
.gtog,.gzoom{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(255,255,255,.94);color:var(--ink);font:500 12px/1 var(--sans);padding:8px 10px;cursor:pointer;opacity:0;transition:opacity .2s}
.gtog{left:10px;bottom:10px}.gzoom{right:10px;bottom:10px;padding:8px}
.gtog i,.gzoom i{font-size:16px}
[data-grid]:hover .gtog,[data-grid]:hover .gzoom,.gtog:focus-visible,.gzoom:focus-visible,.grid-on .gtog{opacity:1}
.gtog[aria-pressed="true"]{background:var(--red);color:#fff}
@media (hover:none){.gtog,.gzoom{opacity:1}}
.gridbtn{position:fixed;right:24px;bottom:84px;z-index:60;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--g300);background:#fff;color:var(--ink);font:500 14px/1 var(--sans);padding:12px 16px;cursor:pointer}
.gridbtn i{font-size:18px}.gridbtn kbd{font:500 11px/1 var(--sans);border:1px solid var(--g300);padding:3px 5px;color:var(--g600)}
.gridbtn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}.gridbtn[aria-pressed="true"] kbd{color:#fff;border-color:rgba(255,255,255,.5)}
.gridbtn[hidden]{display:none}
/* viewer */
.viewer{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.97);display:none;flex-direction:column;padding:16px 24px 20px;box-sizing:border-box}
.viewer.open{display:flex}
.v-bar{display:flex;align-items:center;gap:24px;color:#fff}
.v-bar>div:first-child{flex:1;min-width:0}
.v-title{margin:0;font:400 22px/1.2 var(--sans);color:#fff}
.v-spec{margin:4px 0 0;font:500 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.v-seg{background:rgba(255,255,255,.1)}.v-seg button{color:#fff}.v-seg button.on{background:#fff;color:var(--ink)}
.v-x{border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer;padding:6px}
.v-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 0}
.v-art{position:relative;height:100%;max-height:100%;max-width:100%;width:auto}
@supports (aspect-ratio:1){.v-art{height:auto;width:min(100%, calc((100vh - 180px) * var(--ar, 1)))}}
.v-art img{display:block;width:100%;height:100%;object-fit:contain}
.v-tip{margin:0;text-align:center;color:rgba(255,255,255,.6);font:400 13px/1.4 var(--sans)}
/* video page */
.vt{border-top:2px solid var(--ink);padding-top:16px}.vt.on{border-top-color:var(--red)}
.vt-s{margin:10px 0 6px;font-size:56px;line-height:1;letter-spacing:-.02em}
.vt-f{margin:10px 0 6px;font-size:60px;line-height:1;letter-spacing:-.01em}
.capcheck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:start}
.cc-controls textarea{width:100%;box-sizing:border-box;font:400 20px/1.4 var(--sans);padding:14px 16px;border:1px solid var(--g300);margin-top:10px;resize:vertical}
.cc-controls textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.cc-checks{list-style:none;padding:0;margin:20px 0 0}
.cc-checks li{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--g200);font-size:15px}
.cc-checks li.ok i{color:#2F9E44}.cc-checks li.no i{color:var(--red)}.cc-checks i{font-size:20px}
.cc-phone{background:var(--ink);padding:14px;border-radius:28px}
.cc-frame{position:relative;aspect-ratio:9/16;background:linear-gradient(var(--g300),var(--g300));overflow:hidden;border-radius:16px;container-type:inline-size}
.cc-zone{position:absolute;background:repeating-linear-gradient(135deg,rgba(33,37,41,.55) 0 6px,rgba(33,37,41,.3) 6px 12px);transition:opacity .2s}
.cc-zone.t{left:0;right:0;top:0;height:11.46%}.cc-zone.b{left:0;right:0;bottom:0;height:20.83%}.cc-zone.r{right:0;top:11.46%;bottom:20.83%;width:12.96%;background:repeating-linear-gradient(135deg,rgba(33,37,41,.35) 0 6px,rgba(33,37,41,.15) 6px 12px)}
.nozones .cc-zone{opacity:0}
.cc-logo{position:absolute;left:5.93%;top:11.46%;width:14%;background:#fff;padding:1.3% 1.6%}
.cc-cap{position:absolute;left:5.93%;right:12.96%;bottom:22.9%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4cqw}
.cc-cap span{display:inline-block;background:var(--ember);color:#fff;font-weight:500;font-size:5cqw;line-height:1.12;padding:.9cqw 1.7cqw}
.cc-cap em{font-style:normal;background:var(--red);padding:0 .3cqw}
.steps .step{display:grid;grid-template-columns:56px 1fr;gap:16px;border-top:1px solid var(--g200);padding:14px 0}
.steps .sn{font:400 28px/1 var(--sans);color:var(--red);font-variant-numeric:tabular-nums}
.steps h3{margin:0;font:500 18px/1.3 var(--sans)}.steps p{margin:4px 0 0;color:var(--g600)}
.never{list-style:none;padding:0;margin:12px 0 0}.never li{border-top:1px solid var(--g200);padding:12px 0}.never li::before{content:"×  ";color:var(--red)}
@media (max-width:860px){.capcheck{grid-template-columns:1fr}.gridbtn span{display:none}.gridbtn kbd{display:none}.v-seg{display:none}}

/* ---------- colour mixer ---------- */
.mix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr);gap:40px;align-items:start}
.mx-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 22px}
.mx-row button{width:36px;height:36px;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(33,37,41,.15);position:relative}
.mx-row button.on::after{content:"";position:absolute;inset:-4px;border:2px solid var(--ink)}
.mx-row button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mx-swap{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:#fff;font:500 14px/1 var(--sans);padding:12px 16px;cursor:pointer}
.mx-swap:hover{background:var(--ink);color:#fff}.mx-swap i{font-size:18px}
.mx-card{aspect-ratio:4/5;padding:9%;display:flex;flex-direction:column;justify-content:space-between;transition:background .45s cubic-bezier(.2,.7,.2,1),color .45s cubic-bezier(.2,.7,.2,1)}
.mx-card.flip{animation:mxflip .45s cubic-bezier(.2,.7,.2,1)}
@keyframes mxflip{0%{transform:scale(.97)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.mx-card,.mx-card.flip{transition:none;animation:none}}
.mx-card svg{fill:currentColor}
.mx-card .mx-h{margin:0;font:400 clamp(36px,4vw,64px)/.95 var(--sans);letter-spacing:-.035em}
.mx-card .mx-b{margin:16px 0 0;font-size:16px;line-height:1.5}
.mx-card .mx-s{margin:0;font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.mx-ratio{margin:0;font:400 72px/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mx-ratio span{color:var(--ink)}
.mx-lines{list-style:none;padding:0;margin:20px 0 0}
.mx-lines li{display:flex;gap:10px;align-items:center;border-top:1px solid var(--g200);padding:10px 0;font-size:15px}
.mx-lines li i{font-size:20px}.mx-lines li.ok i{color:#2F9E44}.mx-lines li.no{color:var(--g500)}.mx-lines li.no i{color:var(--red)}
.mx-note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:14px 16px;background:var(--g50);font-size:15px;line-height:1.45}
.mx-note i{font-size:20px;flex:none}.mx-note.ok i{color:#2F9E44}.mx-note.warn i{color:#B35C00}.mx-note.no i{color:var(--red)}
@media (max-width:1100px){.mix{grid-template-columns:1fr 1fr}.mx-out{grid-column:1/-1}}
@media (max-width:700px){.mix{grid-template-columns:1fr}}

/* ---------- live designs ---------- */
[data-live]{overflow:hidden;background:var(--g50)}
.lv-stage{position:absolute;left:0;top:0;transform-origin:0 0;user-select:text}
.is-live>img{display:none}
.gridov{z-index:1}
.ltools{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;gap:6px;opacity:0;transition:opacity .2s}
.ltools .gtog{position:static;opacity:1}
.ltools button{display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(255,255,255,.94);color:var(--ink);font:500 12px/1 var(--sans);padding:8px 10px;cursor:pointer}
.ltools button i{font-size:16px}
.ltools button[aria-pressed="true"]{background:var(--red);color:#fff}
.ltools button[hidden]{display:none}
[data-grid]:hover .ltools,[data-grid]:focus-within .ltools,.editing .ltools,.grid-on .ltools{opacity:1}
@media (hover:none){.ltools{opacity:1}}
.editing{cursor:text;outline:2px solid var(--red);outline-offset:4px}
.editing .lv-stage [contenteditable]{outline:1px dashed rgba(231,0,35,.6);outline-offset:4px}
.editing .lv-stage [contenteditable]:focus{outline:2px solid var(--red)}
/* entrance: parts arrive in layout order */
.lv-e{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 70ms)}
.lv-in .lv-e{opacity:1;transform:none}
.lv-grow{transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(400ms + var(--p,0) * 14ms)}
.lv-in .lv-grow{transform:none}
.lv-pop{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(500ms + var(--p,0) * 12ms)}
.lv-in .lv-pop{transform:none}
.lv-line{opacity:0;transition:opacity .5s ease;transition-delay:calc(300ms + var(--i,0) * 160ms)}
.lv-in .lv-line{opacity:1}
@media (prefers-reduced-motion:reduce){.lv-e,.lv-grow,.lv-pop,.lv-line{opacity:1;transform:none;transition:none}}
/* live design in the full-size viewer */
.v-art .lv-stage{pointer-events:none}
.v-art.is-live>img{visibility:hidden}

/* grey placeholder frame: where a photograph goes */
.phframe{background:#E9ECEF;display:flex;align-items:flex-end;padding:16px;box-sizing:border-box}
.phframe span{font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(33,37,41,.5);max-width:36ch}

/* review fixes */
.livehint{display:flex;gap:10px;align-items:center;margin-top:18px;padding:12px 16px;background:var(--g50);font-size:15px;line-height:1.45;max-width:66ch}
.livehint i{font-size:20px;color:var(--red);flex:none}
.livehint kbd{font:500 12px/1 var(--sans);border:1px solid var(--g300);background:#fff;padding:3px 6px}
.phframe span{color:rgba(33,37,41,.68)}
@media (hover:none){.ltools button{min-height:40px;min-width:40px;justify-content:center}.mx-row button{width:44px;height:44px}}
@media (max-width:760px){.ltools{left:6px;bottom:6px;gap:4px}.ltools button span{display:none}.ltools button{padding:10px}}

/* ---------- motion playground ---------- */
.mo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:start}
.mo .q{margin-bottom:22px}
.mo .seg{flex-wrap:wrap}
.mo input[type=range]{width:100%;accent-color:var(--red)}
.mo-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mo-row output,.mo-ms{font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.mo .spr{display:none}.mo.is-spring .spr{display:block}.mo.is-spring .durq{display:none}
.mo-stage{position:relative;aspect-ratio:16/10;background:var(--g50);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mo-card{width:46%;aspect-ratio:4/5;background:var(--ember);color:#fff;padding:7%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}
.mo-card p{margin:0;font:400 clamp(22px,2.4vw,36px)/1 var(--sans);letter-spacing:-.03em}.mo-card p b{font-weight:400;color:var(--red)}
.mo-card i{display:block;width:30%;height:4px;background:var(--red)}
.mo-graph{margin-top:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--g200)}
.mo-graph svg{display:block;width:100%;height:auto}
.mo-graph .ax{stroke:var(--g300);stroke-width:1}.mo-path{fill:none;stroke:var(--red);stroke-width:2.5}
.mo-dot{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);position:absolute;left:0;top:0;offset-rotate:0deg}
.mo-graphwrap{position:relative}
.mo-code{margin:16px 0 0;padding:14px 16px;background:var(--ink);color:#fff;font:400 13px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.mo-actions{display:flex;gap:8px;margin-top:12px}
.mo-actions button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:#fff;font:500 14px/1 var(--sans);padding:11px 14px;cursor:pointer}
.mo-actions button:first-child{background:var(--red);border-color:var(--red);color:#fff}
.mo-notes{list-style:none;padding:0;margin:16px 0 0}
.mo-notes li{display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--g200);padding:10px 0;font-size:15px;line-height:1.4}
.mo-notes i{font-size:20px;flex:none}.mo-notes .ok i{color:#2F9E44}.mo-notes .warn i{color:#B35C00}.mo-notes .no i{color:var(--red)}
@media (max-width:900px){.mo{grid-template-columns:1fr}}
/* type-in-motion cards: breathing room, red emphasis */
.demo{padding:0 8%;box-sizing:border-box;text-align:center}
.demo .w{max-width:100%}
@keyframes emphd{0%,30%{color:#fff}45%,85%{color:var(--red)}100%{color:#fff}}

/* audit: no faux bold (TFI loads Regular and Medium only); small text at 4.5:1 or better */
h3.big{font-weight:500}

/* ---------- symbol explorer and pattern builder ---------- */
.sx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:start}
.sx-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sx-pick button{aspect-ratio:1;border:0;background:var(--g50);padding:18%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sx-pick button svg{width:100%;height:100%;fill:var(--ink)}
.sx-pick button:hover svg{fill:var(--red)}
.sx-pick button.on{background:var(--red)}.sx-pick button.on svg{fill:#fff}
.sx-pick button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sx-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.sx-stage{aspect-ratio:1;display:flex;align-items:center;justify-content:center;transition:background .4s cubic-bezier(.2,0,0,1)}
.sx-stage svg{width:62%;height:62%}.sx-stage path{transition:fill .4s cubic-bezier(.2,0,0,1)}
.sx-meta .big{margin-top:8px}
.sx-ways{flex-wrap:wrap}
.sx-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sx-act button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:#fff;font:500 14px/1 var(--sans);padding:11px 14px;cursor:pointer;min-height:44px}
.sx-act button:first-child{background:var(--ink);color:#fff}
.pb{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:40px;align-items:start}
.pb .q{margin-bottom:20px}.pb .seg{flex-wrap:wrap}.pb input[type=range]{width:100%;accent-color:var(--red)}
.pb-out svg{display:block;width:100%;height:auto}
.pb-out.is-band{max-width:none}
@media (max-width:1100px){.sx,.sx-view,.pb{grid-template-columns:1fr}.sx-pick{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:600px){.sx-pick{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ================= v6: one control system, quieter red, designs seen whole ================= */
/* every design sits on the page with a hairline and a very soft lift, so white work shows its edges */
[data-grid]{box-shadow:0 0 0 1px rgba(33,37,41,.08),0 6px 18px -8px rgba(33,37,41,.18)}
.car-slide [data-grid]{box-shadow:0 0 0 1px rgba(33,37,41,.08),0 10px 28px -10px rgba(33,37,41,.22)}
/* buttons: one family. Secondary = white with a grey hairline; selected and primary = Ink. Red is kept for the brand, not for tools */
.ltools button,.sx-act button,.mo-actions button,.mx-swap,.gridbtn,.v-zoom button,.car-bar button,.pb .sx-act button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--g300);border-radius:2px;
  background:#fff;color:var(--ink);font:500 14px/1 var(--sans);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.ltools button:hover,.sx-act button:hover,.mo-actions button:hover,.mx-swap:hover,.gridbtn:hover,.car-bar button:hover{border-color:var(--ink)}
.ltools button[aria-pressed="true"],.gridbtn[aria-pressed="true"],.sx-act button:first-child,.mo-actions button:first-child,.mx-swap:active{background:var(--ink);border-color:var(--ink);color:#fff}
.ltools button{min-height:34px;padding:0 10px;font-size:12px;border-color:transparent;background:rgba(255,255,255,.96)}
.ltools button i,.sx-act button i,.mo-actions button i,.gridbtn i{font-size:16px}
.gridbtn kbd{color:inherit;border-color:currentColor;opacity:.6}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* segmented controls: one row, equal height, never wrap into a broken second row */
.seg{display:inline-flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 0 0 1px var(--g300)}
.mo .seg,.pb .seg,.sx-ways{flex-wrap:nowrap}
.seg button{white-space:nowrap;min-height:38px;font-size:13px}
.seg button+button{box-shadow:inset 1px 0 0 var(--g300)}
.seg button.on+button,.seg button+button.on{box-shadow:none}
/* quieter red in tools */
.gridov .gc{background:transparent;border-left:1px solid rgba(231,0,35,.5);border-right:1px solid rgba(231,0,35,.5)}
.gridov .gc b{background:var(--ink)}
.mo input[type=range],.pb input[type=range]{accent-color:var(--ink)}
.sx-pick button.on{background:var(--ink)}
.livehint i{color:var(--ink)}
/* carousel */
.car{outline:none}
.car-stage{position:relative;background:var(--g50);padding:48px;display:flex;justify-content:center;align-items:center;min-height:200px}
.car-slide{display:none;width:100%}
.car-slide.on{display:block;animation:carin .5s cubic-bezier(.2,0,0,1)}
@keyframes carin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.car.portrait .car-slide{max-width:480px;margin:0 auto}
.car.tall .car-slide{max-width:340px;margin:0 auto}
.car.wide .car-slide{max-width:980px;margin:0 auto}
.car-slide .fig{margin:0}
.car-bar{display:flex;align-items:center;gap:12px;margin-top:16px}
.car-count{font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums;min-width:64px}
.car-dots{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.car-dots button{width:28px;height:28px;border:1px solid var(--g300);background:#fff;font:500 11px/1 var(--sans);color:var(--g600);cursor:pointer;padding:0}
.car-dots button.on{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:760px){.car-stage{padding:20px}.car-dots{display:none}}
@media (prefers-reduced-motion:reduce){.car-slide.on{animation:none}}
/* viewer zoom */
.v-zoom{display:flex;align-items:center;gap:6px}
.v-zoom button{min-height:36px;width:36px;padding:0;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.v-zoom button:hover{border-color:#fff}
.v-z{color:#fff;font:500 13px/1 var(--sans);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.v-stage{overflow:hidden;touch-action:none}
.v-stage.zoomed{cursor:grab}.v-stage.zoomed:active{cursor:grabbing}
.v-art{transition:transform .25s cubic-bezier(.2,0,0,1);transform-origin:center}
.is-chart .v-seg,.is-chart .gridov{display:none}
.is-chart .v-art{background:#fff}
.v-art .v-chart{position:absolute;inset:0;width:100%;height:100%}
.zoomcard{cursor:zoom-in}
.zoomcard:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- logo construction ---------- */
.logobuild{position:relative;background:#fff;box-shadow:inset 0 0 0 1px var(--g200);display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(33,37,41,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(33,37,41,.045) 1px,transparent 1px);background-size:24px 24px}
.logobuild>svg{width:38%;height:auto;overflow:visible}
.lb-l{stroke:var(--ink);stroke-width:.25;stroke-dasharray:1;stroke-dashoffset:1;opacity:.45;fill:none;vector-effect:non-scaling-stroke}
.lb-l.lb-c{stroke:var(--red);opacity:.6}
.lb-l.lb-r{stroke-dasharray:1;opacity:.35}
.lb-e,.lb-w{opacity:0}
.lb-go .lb-l{animation:lbdraw .8s cubic-bezier(.65,0,.35,1) forwards,lbfade .8s 3s ease forwards;animation-delay:calc(var(--k) * 90ms),3s}
.lb-go .lb-e{animation:lbrise .7s cubic-bezier(.2,0,0,1) forwards;animation-delay:calc(900ms + var(--k) * 220ms)}
.lb-go .lb-w{animation:lbset .5s cubic-bezier(.2,0,0,1) forwards;animation-delay:calc(1500ms + var(--k) * 70ms)}
@keyframes lbdraw{to{stroke-dashoffset:0}}
@keyframes lbfade{to{opacity:.12}}
@keyframes lbrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lbset{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.lb-e,.lb-w{transform-box:fill-box;transform-origin:center bottom}
.lb-static .lb-l{animation:none;stroke-dashoffset:0;opacity:.12}.lb-static .lb-e,.lb-static .lb-w{animation:none;opacity:1}
.lb-notes{position:absolute;left:24px;bottom:20px;display:flex;gap:18px;flex-wrap:wrap;opacity:0;transition:opacity .6s ease}
.lb-notes.on{opacity:1}
.lb-notes span{font:500 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(33,37,41,.68)}
.lb-notes span i{display:inline-block;width:14px;height:0;border-top:1px solid var(--ink);vertical-align:middle;margin-right:6px;opacity:.6}
.lb-notes span.c i{border-color:var(--red)}
.lb-replay{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--g300);border-radius:2px;background:#fff;font:500 13px/1 var(--sans);cursor:pointer}
.lb-replay:hover{border-color:var(--ink)}
/* clear space shown on a transparency checkerboard, like a PNG */
[data-toggle][data-state=on] .clrbox{box-shadow:0 0 0 1px var(--red);background:conic-gradient(#E9ECEF 25%,#fff 0 50%,#E9ECEF 0 75%,#fff 0) 0 0/16px 16px}
/* colour pairings under each ramp */
.pairs{display:grid;gap:8px;margin-top:10px}
.pair{border-top:1px solid var(--g200);padding-top:10px;font-size:12px;line-height:1.35;color:var(--g600)}
.pair b{display:block;font-weight:500;color:var(--ink);margin-bottom:6px}
.pair .pc{display:flex;align-items:center;gap:6px;margin-top:4px}
.pair .pc i{width:14px;height:14px;flex:none;box-shadow:inset 0 0 0 1px rgba(33,37,41,.15)}
/* red ground done well */
.redcard{display:flex;flex-direction:column;justify-content:space-between;padding:8%;box-sizing:border-box}
.redcard .rc-h{margin:0;font:400 clamp(40px,4.6vw,76px)/.9 var(--serif);letter-spacing:-.035em;color:#fff}
.redcard .rc-band{background:var(--ember);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;font:500 13px/1.3 var(--sans)}
.redcard .rc-band b{font-weight:500;color:#fff}
.redcard .rc-m{display:flex;gap:6px}
.redcard .rc-m svg{width:22px;height:22px;fill:#fff}

/* boards that do not need the full page */
.car.medium .car-slide{max-width:760px;margin:0 auto}
.car.medium .car-stage{padding:32px}
.narrow{max-width:820px}
.hero-media .car{max-width:960px}

/* carousel numbers on their own row, clear of the floating buttons */
.car-bar{justify-content:center}
.car-dots{flex-basis:100%;justify-content:center;margin:12px 0 0}
.car-bar{flex-wrap:wrap}
@media (max-width:1100px){.car-dots{display:none}}

/* symbols hero: a field of tiles that swap one at a time */
.symhero{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.symhero .sh-t{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(33,37,41,.08);transition:background-color .3s cubic-bezier(.2,.8,.2,1)}
.symhero svg{width:56%;height:56%;display:block;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s cubic-bezier(.2,.8,.2,1)}
.symhero .sh-out svg{transform:translateY(-30%);opacity:0;transition-duration:.24s;transition-timing-function:cubic-bezier(.4,0,1,1)}
.symhero .sh-in svg{transform:translateY(30%);opacity:0;transition:none}
@media (max-width:700px){.symhero{grid-template-columns:repeat(3,minmax(0,1fr))}.symhero .sh-t:nth-child(n+10){display:none}}

/* Phosphor finder */
.phx-s{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ink);padding:10px 0;max-width:560px;margin-bottom:24px}
.phx-s i{font-size:22px}.phx-s input{flex:1;border:0;outline:0;font:inherit;font-size:18px;background:transparent;color:var(--ink)}
.phx-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.ph-t{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px 14px;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--g200);cursor:pointer;font:inherit;color:var(--ink)}
.ph-t i{font-size:32px}.ph-t span{font-size:12px;color:var(--g600)}
.ph-t:hover,.ph-t:focus-visible{box-shadow:inset 0 0 0 1px var(--ink)}.ph-t:hover i{color:var(--red)}
.ph-t.no{background:var(--g50);opacity:.75}.ph-t.no i{color:var(--g500)}.ph-t.no{cursor:default}
.ph-t[hidden]{display:none}

/* typography hero: construction */
.typebuild{position:relative}
.typebuild .tb{position:relative}
.typebuild .tb-mark{display:inline-block;width:0;height:0;vertical-align:baseline}
.typebuild .tb-line{position:absolute;left:0;right:0;height:1px;background:currentColor;opacity:.3;transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.typebuild .tb-lab{position:absolute;right:0;transform:translateY(calc(-100% - 6px));font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .5s cubic-bezier(.2,.8,.2,1) 1.1s}
.typebuild .facecard:not(.dark) .tb{color:var(--ink)}
.typebuild .tb-g{display:inline-block;opacity:0;transform:translateY(18%);transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .7s cubic-bezier(.2,.8,.2,1)}
.typebuild .tb-g:nth-child(1){transition-delay:.45s}.typebuild .tb-g:nth-child(2){transition-delay:.6s}
.typebuild .facecard.dark .tb-g:nth-child(1){transition-delay:.6s}.typebuild .facecard.dark .tb-g:nth-child(2){transition-delay:.75s}
.typebuild.tb-go .tb-line{transform:scaleX(1)}
.typebuild.tb-go .tb-g{opacity:1;transform:none}
.typebuild.tb-go .tb-lab{opacity:.65}
.typebuild.tb-static *{transition:none!important}
.typebuild .lb-replay{position:static;margin-top:12px}

/* navigation v2: hierarchy and accessibility */
.skip{position:fixed;left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;font-size:14px;font-weight:500;text-decoration:none;transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}
main:focus{outline:0}
.nav-title{color:var(--g600)}
.nav ol{padding:0 12px 24px}
.nav li>a{min-height:44px;padding:0 12px;color:var(--ink);font-weight:400}
.nav li>a i{color:var(--g600)}
.nav li>a:hover{background:var(--g50);color:var(--ink)}
.nav li.on>a{font-weight:500;color:var(--red);background:transparent;box-shadow:inset 3px 0 0 var(--red)}
.nav li.on>a i{color:var(--red)}
.nav .subs{padding:8px 0 14px 0;margin-left:34px;border-left:1px solid var(--g200)}
.nav .subs a{display:grid;grid-template-columns:32px 1fr;align-items:baseline;min-height:32px;padding:6px 8px 6px 14px;margin-left:-1px;font-size:14px;line-height:1.35;color:var(--g600);border-left:2px solid transparent}
.nav .subs .sn{font-size:12px;color:var(--g500);font-variant-numeric:tabular-nums}
.nav .subs a:hover{color:var(--ink);background:var(--g50)}
.nav .subs a.act{color:var(--ink);font-weight:500;border-left-color:var(--red)}
.nav .subs a.act .sn{color:var(--red)}
.nav a:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.nav-foot{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--g600);text-decoration:none}
.nav-foot:hover{color:var(--ink)}
.burger{min-width:44px;min-height:44px}
@media (prefers-reduced-motion:reduce){.skip,.nav li>a,.nav .subs a{transition:none}}

/* phone: nothing may push the page sideways */
@media (max-width:700px){
  .g2{grid-template-columns:minmax(0,1fr)}
  .mo .seg,.pb .seg,.sx-ways,.seg{flex-wrap:wrap}
  .sx-pick{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-page=colour] .ramp,body[data-page=colour] [style*="grid-template-columns:repeat("]{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  body[data-page=colour] .ramp>*,body[data-page=colour] [style*="grid-template-columns:repeat("]>*{flex:0 0 132px;scroll-snap-align:start}
  body:not([data-page=colour]) [style*="grid-template-columns:repeat("]:not(.lv-stage *):not([data-live] *){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tbl,table.spec{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .lockrow{flex-wrap:wrap;gap:14px;padding:24px}
  .lockrow svg{max-width:100%;height:auto}
  .livehint{flex-wrap:wrap}
  .ctrl input[type=range]{width:100%!important}
  .ctrl label{flex:1 1 100%}
  .d1{font-size:clamp(44px,12.5vw,72px)}
  .panel p{overflow-wrap:break-word}
}
@media (max-width:700px){
  .vt .vt-s,.vt .vt-f{font-size:clamp(24px,7vw,44px)!important;white-space:normal;overflow-wrap:break-word}
}
@media (max-width:480px){
  .g3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .d2{font-size:clamp(34px,10vw,52px)}
  summary{overflow-wrap:break-word}
}

.menu-open .dlbtn,.menu-open .gridbtn{visibility:hidden}
.menu-open{overflow:hidden}

/* round 21 Oct */
.redcard .rc-h{margin-top:auto}
.pairs .pc{display:grid;grid-template-columns:12px 1fr auto;column-gap:8px;align-items:center;padding:3px 0}
.pairs .pc .pr{font-variant-numeric:tabular-nums;color:var(--ink)}
.pairs .pc .pu{grid-column:2 / -1;font-size:11px;color:var(--g600);margin-top:-2px}
.pairs .pc.no{opacity:.45}
.pairs .pc.no .pu{text-decoration:line-through}
.demo.redtx .w{color:var(--red)}
.demo:not(.dk) .w{color:var(--ink)}.demo.redtx .w{color:var(--red)}
.phone{box-shadow:0 0 0 1px var(--g200),0 18px 40px -24px rgba(33,37,41,.35);border:8px solid var(--g100)}
.fbar{position:sticky;top:0;z-index:5;background:#fff;padding:14px 0;margin-bottom:20px;box-shadow:0 1px 0 var(--g200)}
.st-main{grid-template-columns:280px minmax(0,1fr) 300px}
@media (max-width:1280px){.st-main{grid-template-columns:minmax(0,1fr) 300px}.st-left{order:3;grid-column:1 / -1}}
@media (max-width:1100px){.st-main{grid-template-columns:1fr}.st-left{order:3}}

.demo{background:#fff;box-shadow:inset 0 0 0 1px var(--g200)}

/* caption checker, cleaned up */
.capcheck{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:56px}
.cc-phone{background:#fff;padding:10px;border-radius:30px;box-shadow:0 0 0 1px var(--g200),0 24px 48px -28px rgba(33,37,41,.4)}
.cc-frame{border-radius:22px;background:var(--g200)}
.cc-zone{background:repeating-linear-gradient(135deg,rgba(231,0,35,.16) 0 6px,rgba(231,0,35,.06) 6px 12px)}
.cc-zone.r{background:repeating-linear-gradient(135deg,rgba(231,0,35,.12) 0 6px,rgba(231,0,35,.04) 6px 12px)}
.cc-cap span{background:var(--ink)}
.cc-controls textarea{border-color:var(--g200);background:var(--g50);min-height:96px}
.cc-checks li{font-weight:500}
/* live hint reads as one sentence */
.livehint{display:block}
.livehint>i:first-child{margin-right:8px;vertical-align:-3px;font-size:18px}

/* logo on photos: five allowed spots */
.sigph .sigmark{width:12%;outline:1px dashed rgba(255,255,255,.75);outline-offset:10px;transition:left .5s var(--ease),right .5s var(--ease),top .5s var(--ease),bottom .5s var(--ease),transform .5s var(--ease)}
.sigph.pos-bl .sigmark{left:3%;right:auto;top:auto;bottom:4%;transform:none}
.sigph.pos-bc .sigmark{left:50%;right:auto;top:auto;bottom:4%;transform:translateX(-50%)}
.sigph.pos-br .sigmark{left:auto;right:3%;top:auto;bottom:4%;transform:none}
.sigph.pos-tl .sigmark{left:3%;right:auto;top:4%;bottom:auto;transform:none}
.sigph.pos-tr .sigmark{left:auto;right:3%;top:4%;bottom:auto;transform:none}
.avs{justify-content:center}


.demo.redmark{background:#fff;color:var(--red)}
.demo:not(.dk):not(.rd) .emb{color:var(--red)}

/* Use menu: a split control in the design toolbar, opening upward like a download-format picker */
.usewrap{position:relative;display:inline-flex}
.ltools .usebtn{gap:6px}
.ltools .usebtn i:last-child{font-size:12px;margin-left:-2px}
.usemenu{position:absolute;right:0;bottom:calc(100% + 6px);min-width:220px;background:#fff;box-shadow:0 0 0 1px var(--g200),0 12px 28px -12px rgba(33,37,41,.35);padding:6px;display:flex;flex-direction:column;z-index:5}
.usemenu[hidden]{display:none}
.usemenu a,.usemenu button{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border:0;background:transparent;color:var(--ink);font:400 13px/1 var(--sans);text-decoration:none;cursor:pointer;text-align:left;width:100%}
.usemenu a:hover,.usemenu button:hover,.usemenu a:focus-visible,.usemenu button:focus-visible{background:var(--g50);outline:0}
.usemenu i{font-size:16px;color:var(--g600)}
.use-open .ltools{opacity:1}

.capture *,.capture *::before,.capture *::after{transition:none!important;animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;animation-fill-mode:both!important}   /* every animation shown at its final frame */
.capture .drawer,.capture .scrim,.capture .skip,.capture .progress,.capture .burger,.capture .dlbtn,.capture .gridbtn,.capture .ltools,.capture .gtog,.capture .gzoom{display:none!important}

/* nav groups: three parts, only the current one open */
.nav .ngroup{list-style:none}
.nav .ngroup>details>summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 12px;margin-top:6px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--g600);cursor:pointer;list-style:none;border-radius:var(--rad)}
.nav .ngroup>details>summary::-webkit-details-marker{display:none}
.nav .ngroup>details>summary:hover{color:var(--ink);background:var(--g50)}
.nav .ngroup>details>summary i{font-size:14px;transition:transform .2s var(--ease)}
.nav .ngroup>details:not([open])>summary i{transform:rotate(-90deg)}
.nav .ngroup>details>ol{padding:0 0 6px}
.nav li>a i.ph-bold{font-size:19px}

/* chapter 14 · AI: light, scannable layout */
.ai-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ai-step{padding:28px;background:var(--g50);display:flex;flex-direction:column;gap:10px}
.ai-step h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.01em}
.ai-step p{margin:0;color:var(--g600);line-height:1.5}
.ai-n{font-size:44px;line-height:1;font-weight:500;color:var(--red);letter-spacing:-.03em}
.ai-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--g300)}
.ai-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ai-card{padding:24px 0;border-top:2px solid var(--ink)}
.ai-card h3{margin:0 0 4px;font-size:20px;font-weight:500}
.ai-card p{margin:8px 0 0;line-height:1.5}
.ai-ol{margin:0;padding-left:22px;max-width:62ch;line-height:1.7;font-size:17px}
.ai-never{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.ai-x{display:flex;align-items:center;gap:8px;margin:0 0 4px}.ai-x i{color:var(--red);font-size:20px}
.ai-rcps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.rcp{padding:24px;box-shadow:inset 0 0 0 1px var(--g200);display:flex;flex-direction:column;gap:8px}
.rcp-t{margin:0;font-size:20px;font-weight:500}
.rcp-get{margin:0;color:var(--g600);line-height:1.5}
.rcp details summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink);list-style:none;margin-top:6px}
.rcp details summary::-webkit-details-marker{display:none}
.rcp details[open] summary i{transform:rotate(180deg)}
.rcp-body{white-space:pre-wrap;font:400 13px/1.6 var(--sans);background:var(--g50);padding:16px;margin:10px 0 0;max-height:320px;overflow:auto}
.rcp .lnk{align-self:flex-start;margin-top:auto}
.ai-slop{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ai-chip{padding:8px 12px;background:var(--g50);font-size:14px;text-decoration:line-through;text-decoration-color:rgba(231,0,35,.6);color:var(--g600)}
.ai-instead{margin-top:28px;max-width:62ch;font-size:17px;line-height:1.55}
.ai-check{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;max-width:900px}
.ai-check label{display:flex;gap:12px;align-items:center;min-height:44px;border-bottom:1px solid var(--g200);cursor:pointer}
.ai-check input{width:20px;height:20px;accent-color:var(--red);flex:none}
.ai-check input:checked+span{color:var(--g500);text-decoration:line-through}
@media (max-width:860px){.ai-steps,.ai-who,.ai-never,.ai-slop,.ai-check{grid-template-columns:1fr}}

/* nav: wider, clearer footer */
:root{--nav:296px}
.nav-top{padding:32px 28px 28px}
.nav-foot{font-size:14px;gap:10px;padding:18px 28px 22px}
.nav-foot i{font-size:18px;color:var(--red)}

/* chapter 14 · AI: light, scannable layout */
.ai-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ai-step{padding:28px;background:var(--g50);display:flex;flex-direction:column;gap:10px}
.ai-step h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.01em}
.ai-step p{margin:0;color:var(--g600);line-height:1.5}
.ai-n{font-size:44px;line-height:1;font-weight:500;color:var(--red);letter-spacing:-.03em}
.ai-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.ai-act .btn.ghost{background:#fff}
.ai-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ai-card{padding:24px 0;border-top:2px solid var(--ink)}
.ai-card h3{margin:0 0 4px;font-size:20px;font-weight:500}
.ai-card p{margin:8px 0 0;line-height:1.5}
.ai-ol{margin:0;padding-left:22px;max-width:62ch;line-height:1.7;font-size:17px}
.ai-never{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.ai-x{display:flex;align-items:center;gap:8px;margin:0 0 4px}.ai-x i{color:var(--red);font-size:20px}
.ai-rcps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.rcp{padding:24px;box-shadow:inset 0 0 0 1px var(--g200);display:flex;flex-direction:column;gap:8px}
.rcp .lbl{margin:0}
.rcp-t{margin:0;font-size:20px;font-weight:500}
.rcp-get{margin:0;color:var(--g600);line-height:1.5}
.rcp details summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink);list-style:none;margin-top:6px}
.rcp details summary::-webkit-details-marker{display:none}
.rcp details[open] summary i{transform:rotate(180deg)}
.rcp-body{white-space:pre-wrap;font:400 13px/1.6 var(--sans);background:var(--g50);padding:16px;margin:10px 0 0;max-height:320px;overflow:auto}
.rcp .lnk{align-self:flex-start;margin-top:auto}
.ai-slop{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ai-chip{padding:8px 12px;background:var(--g50);font-size:14px;text-decoration:line-through;text-decoration-color:rgba(231,0,35,.6);color:var(--g600)}
.ai-instead{margin-top:28px;max-width:62ch;font-size:17px;line-height:1.55}
.ai-check{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;max-width:900px}
.ai-check label{display:flex;gap:12px;align-items:center;min-height:44px;border-bottom:1px solid var(--g200);cursor:pointer}
.ai-check input{width:20px;height:20px;accent-color:var(--red);flex:none}
.ai-check input:checked+span{color:var(--g500);text-decoration:line-through}
@media (max-width:860px){.ai-steps,.ai-who,.ai-never,.ai-slop,.ai-check{grid-template-columns:1fr}}

.nav-bottom{margin-top:auto;border-top:1px solid var(--g100);padding:16px 28px 20px}
.nav-ver{margin:0 0 6px;font-size:13px;color:var(--g600)}
.nav-bottom .nav-foot{margin:0;padding:0;border:0;min-height:36px}
.ai-knows span{padding:8px 12px;background:#fff;box-shadow:inset 0 0 0 1px var(--g200);font-size:14px;color:var(--ink)}

/* design toolbar: icons only; a label opens on hover or keyboard focus */
.ltools{gap:4px}
.ltools button,.ltools .usebtn{gap:0;padding:0 9px;min-width:34px;justify-content:center;white-space:nowrap}
.ltools button>span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;vertical-align:middle;transition:max-width .25s var(--ease),opacity .2s var(--ease),margin .25s var(--ease)}
.ltools button:hover>span,.ltools button:focus-visible>span,.ltools button[aria-expanded="true"]>span{max-width:120px;opacity:1;margin-left:6px}
.ltools .usebtn i:last-child{margin-left:2px}
@media (hover:none){.ltools button>span{display:none}}

/* sentence case everywhere: no all caps, no wide tracking unless truly needed */
.cg-kick,.sb-kick,.chartcard .src,.v-spec,.mx-card .mx-s,.phframe span,.lb-notes span,.typebuild .tb-lab{text-transform:none;letter-spacing:0}
.lockrow>span,.sb-foot{letter-spacing:0}
@media (max-width:700px){.sw .d3,.ramp .d3{font-size:clamp(20px,6vw,28px);overflow-wrap:break-word}.ai-step{padding:22px}.ai-n{font-size:36px}.rcp{padding:20px}.nav-bottom{padding:14px 20px 18px}}
@media (max-width:700px){[data-tabs]>.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}[data-tabs]>.tabs::-webkit-scrollbar{display:none}[data-tabs]>.tabs>button{flex:none;white-space:nowrap;scroll-snap-align:start}}

/* motion playground v2: preview + controls on top, a compact output strip below */
.mo{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"stage ctrl" "out ctrl";gap:24px 40px;align-items:start}
.mo-stage{grid-area:stage;aspect-ratio:16/9}
.mo-ctrl{grid-area:ctrl}
.mo-out{grid-area:out;display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.mo-card{width:34%;background:var(--red)}
.mo-card i{background:#fff}
.mo-card p b{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.mo-graph{margin-top:0;width:300px;height:190px}
.mo-graph svg{width:300px;height:190px}
.mo-notes{margin:0}
.mo-notes li:first-child{border-top:0;padding-top:0}
.mo-notes .warn i{color:var(--ink)}.mo-notes .ok i{color:var(--ink)}
.mo-code{margin-top:12px}
@media (max-width:1100px){.mo{grid-template-columns:1fr;grid-template-areas:"stage" "ctrl" "out"}}
@media (max-width:700px){.mo-out{grid-template-columns:1fr}.mo-graph{transform-origin:0 0}}
.mo .mo-ctrl .seg{flex-wrap:wrap}
.mo-notes li,.mo-notes li.ok,.mo-notes li.warn{color:var(--ink)}
.mo-notes li.no{color:var(--red)}

/* motion playground v3: two panels side by side on the 12-column grid, aligned top and bottom */
.mo{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none;gap:0 24px;align-items:stretch}
.mo-stage{grid-area:auto;grid-column:1/8;aspect-ratio:auto;min-height:100%;position:relative}
.mo-panel{grid-column:8/13;display:flex;flex-direction:column;gap:28px;padding:28px;box-shadow:inset 0 0 0 1px var(--g200)}
.mo-ctrl{grid-area:auto}
.mo .mo-ctrl .q:last-child{margin-bottom:0}
.mo-cols{position:absolute;inset:0 32px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;pointer-events:none}
.mo-cols i{background:rgba(231,0,35,.035)}
.mo-card{position:relative;width:calc((100% - 64px - 80px)/6*4 + 48px);padding:28px;justify-content:space-between}
.mo-card svg{width:44px;height:44px;display:block}
.mo-card p{font:700 clamp(26px,2.6vw,40px)/1 var(--sans);letter-spacing:-.03em;color:#fff}
.mo-out{grid-area:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;border-top:1px solid var(--g200);padding-top:28px}
.mo-gw .mo-graph{width:300px;height:190px}
.mo-code,.mo-actions{grid-column:1/-1;margin:0}
.mo-notes li{font-weight:500}
@media (max-width:1100px){.mo{grid-template-columns:1fr;gap:24px}.mo-stage{grid-column:auto;aspect-ratio:5/4;min-height:0}.mo-panel{grid-column:auto}.mo-card{width:calc((100% - 64px - 80px)/6*3 + 32px)}}
@media (max-width:700px){.mo-panel{padding:20px}.mo-out{grid-template-columns:1fr}.mo-cols{inset:0 16px;gap:8px}.mo-card{width:calc((100% - 32px - 40px)/6*3 + 16px);padding:18px}.mo-card svg{width:32px;height:32px}.mo-card p{font-size:22px}}

/* Theory of Change: scrolling through the section opens each step in turn */
.tocs{height:calc(100vh + 160vh)}
.tocs>.acc{position:sticky;top:max(12vh,72px)}
.tocs .acc-b{animation:none}
@media (max-height:560px){.tocs{height:auto}.tocs>.acc{position:static}}

/* auto-advancing tabs: the red line fills while a tab is shown, then the next one opens */
[data-auto]>.tabs button.on.run::after{transform-origin:left;animation:tabfill 6s linear forwards}
[data-auto].hold>.tabs button.on.run::after{animation-play-state:paused}
@keyframes tabfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-auto]>.pane.on{animation:fadein .6s var(--ease)}

/* guide bodies render as text, not raw markdown */
.rcp-body{white-space:normal}
.rcp-body p{margin:0 0 8px}.rcp-body p:last-child{margin:0}
.rcp-body ul{margin:0 0 8px;padding-left:18px}.rcp-body li{margin:0 0 4px}
.rcp-body b{font-weight:500;color:var(--ink)}

/* construction drawings on the pattern guides */
.rcp-fig{background:var(--g50);margin:4px 0 6px;padding:12px 8px}
.rcp-fig svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.rcp-fig{padding:16px 16px 14px}
.rcp-fig svg{max-width:240px;margin:0 auto}
.rcp-spec{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rcp-spec li{font-size:12px;line-height:1;padding:6px 8px;background:#fff;box-shadow:inset 0 0 0 1px var(--g200);color:var(--ink)}

/* ground verdict: a toast that slides in each time the ground changes */
.gverdict{font-size:15px;padding:10px 16px 10px 12px;gap:8px;box-shadow:0 6px 20px rgba(33,37,41,.18);z-index:2}
.gverdict i{font-size:20px}
.gverdict.no{background:var(--red);color:#fff}
.gverdict.ok{background:#fff;color:var(--ok)}
.gverdict.pop{animation:toastin .45s var(--ease) both}
.gverdict.no.pop{animation:toastin .45s var(--ease) both,toastnudge .4s .45s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastnudge{0%,100%{transform:none}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.gverdict.pop,.gverdict.no.pop{animation:none}}

/* studio: custom size and grid download */
.st-custom{display:flex;gap:16px;margin-top:10px;font-size:14px}
.st-custom input{width:84px;margin-left:6px;padding:6px 8px;border:1px solid var(--g300);font:inherit}
.st-dl .small{margin:4px 0 10px}
.st-dl .st-row{display:flex;gap:8px}

/* studio button: hugs its words, sits on the block's baseline */
.sb-ctaw{height:100%;display:flex;align-items:flex-end}
.sb-ctaw .sb-btn{display:inline-flex;align-items:center;height:auto;width:auto;font-weight:500;letter-spacing:-.005em;white-space:nowrap;line-height:1}

/* icon finder: square tiles, icon centred, name beneath */
.phx-g{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.ph-t{aspect-ratio:1/1;justify-content:center;padding:12px 8px;transition:box-shadow .2s var(--ease),background .2s var(--ease)}
.ph-t i{transition:color .2s var(--ease),transform .25s var(--ease)}
.ph-t:hover i{transform:translateY(-2px)}
.ph-t span{text-align:center;line-height:1.3;overflow-wrap:anywhere}

/* ===== micro-interactions: one standard across the guide =====
   hover 150 to 200 ms; a 3% press on click (the scale property, so it never fights a positioning transform);
   things that appear ease in from where they come from; colour swaps cross-fade; reduced motion stills everything */
button,.btn,.lnk,.dlrow,.usemenu a,.seg button,.ltools button,.tabs button,[data-copy]{transition-property:color,background-color,box-shadow,border-color,opacity,scale;transition-duration:.18s;transition-timing-function:var(--ease)}
button:not(:disabled):active,.btn:active,.lnk:active,.dlrow:active,.usemenu a:active,[data-copy]:active{scale:.97}
.ph-t:active,.sx-pick button:active,.mx-row button:active{scale:.94}
.usemenu:not([hidden]){transform-origin:100% 100%;animation:menuin .2s var(--ease)}
@keyframes menuin{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.nav details[open]>ol{animation:navin .32s var(--ease)}
@keyframes navin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav summary i{transition:transform .25s var(--ease)}
.drawer{transition:transform .42s var(--ease)}
.lv-swapping,.lv-swapping *{transition:background-color .45s var(--ease),color .45s var(--ease),fill .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)!important}
.toast{transition:opacity .25s var(--ease),transform .3s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  button:active,.btn:active,.lnk:active,.dlrow:active{scale:1}
}

/* capture mode: the scroll-driven Theory of Change lays out flat */
.capture .tocs{height:auto}.capture .tocs>.acc{position:static}

/* motion card v4: a real TFI post. Logo and kicker hang from the top; headline and motif sit on the bottom line */
.mo-card{display:flex;flex-direction:column;justify-content:space-between;padding:7%}
.mo-top{display:flex;flex-direction:column;gap:10px}
.mo-logo{display:block;width:38%}
.mo-logo svg{display:block;width:100%;height:auto}
.mo-kick{font:500 clamp(11px,1vw,14px)/1.3 var(--sans);color:rgba(255,255,255,.8)}
.mo-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.mo-card .mo-bot p{font:400 clamp(28px,3.1vw,48px)/1.02 var(--serif);letter-spacing:-.025em;color:#fff;margin:0}
.mo-motif{width:16%;height:auto;flex:none;margin-bottom:.2em}
@media (max-width:700px){.mo-card .mo-bot p{font-size:28px}.mo-logo{width:46%}}

/* 6.8 sub-brand proposal */
.prop-tag{display:inline-block;font:500 13px/1 var(--sans);padding:7px 12px;border-radius:999px;background:var(--ink);color:#fff;margin-right:10px;vertical-align:3px}
.prop-figs{display:grid;grid-template-columns:1fr 1.23fr;gap:24px;align-items:start}
.prop-fig{margin:0;cursor:zoom-in}
.prop-fig img{display:block;width:100%;height:auto;box-shadow:inset 0 0 0 1px var(--g200)}
.prop-fig figcaption{font-size:13px;color:var(--g600);margin-top:10px;line-height:1.45}
.prop-q{margin:8px 0 0;padding-left:20px;font-size:17px;line-height:1.5;max-width:70ch}
.prop-q li{margin:0 0 8px}
@media (max-width:900px){.prop-figs{grid-template-columns:1fr}}

/* motion card: a real poster rides the motion */
.mo-card.mo-poster{padding:0;background:#fff;box-shadow:0 0 0 1px var(--g200),0 18px 40px -24px rgba(33,37,41,.35)}
.mo-card.mo-poster img{display:block;width:100%;height:100%;object-fit:cover}

/* icon cards: rules and notes without hairline borders */
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.icard{background:var(--g50);padding:24px 24px 26px;border-radius:var(--rad)}
.icard>i{font-size:28px;color:var(--ink);display:block;margin-bottom:16px}
.icard h3{font-weight:500;font-size:17px;margin:0}
.icard p{font-size:15px;line-height:1.5;color:var(--g600);margin:6px 0 0}
.rv-head{padding:40px 0 24px;max-width:900px}
.rv-head .prop-tag{margin:0 0 20px}
.rv-head .small{margin-top:16px}
/* the shared rule grid: a short red mark instead of a full-width hairline */
.rule{border-top:0;background:var(--g50);padding:24px 24px 26px;border-radius:var(--rad)}
.rule h3{font-size:17px}
.rule p{margin-top:6px;line-height:1.5}
.rulegrid{row-gap:16px;column-gap:16px}

/* carousel numbers: true squares (the general 40px button minimum stretched them) */
.car-dots button{width:32px;height:32px;min-width:32px;min-height:32px;aspect-ratio:1/1;flex:none;display:inline-flex;align-items:center;justify-content:center}

/* 11.2: the ball rides the curve itself (SVG user units, so it stays on the line at every width) */
.curve .ball{offset-path:path("M20 180 C 260 180, 340 20, 580 20");offset-rotate:0deg;animation:ballpath 2.4s var(--brand) infinite alternate;transform:none}
@keyframes ballpath{from{offset-distance:0%}to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.curve .ball{animation:none;offset-distance:100%}}

/* ===== review fixes, chapters 1 to 4 ===== */
/* readable text in tiles and cards */
.rule p,.icard p{color:#495057}
.cap,.small{font-size:13px}
/* mosaic: one edge treatment for every tile */
.kf{box-shadow:none}
.kw:not(.dk){background:var(--g50)}
/* 2.3 values: content hangs from the top, the same in all three */
.vcard{justify-content:flex-start;gap:28px}
/* 2.4 model: icons readable on every ground */
.mstep:nth-child(3) .mi{color:#fff}
/* 3.0 family tree: five equal columns, each tile hangs from the bar on its own line */
.tree-kids{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative}
.tree-kid{position:relative;min-height:170px;padding:32px 16px 22px;justify-content:center;gap:18px}
.tree-kid::before{content:"";position:absolute;left:50%;top:-33px;width:1px;height:33px;background:var(--g300)}
.tree-kid svg{max-width:82%;height:auto}
/* 4.1 tone: the definition first, both quotes hang from the top */
.tone-def{margin:0 0 20px;max-width:60ch}
.tonecard{justify-content:flex-start;gap:20px;min-height:220px}
.tone-no{color:#495057}
.tonecard .lbl{font-size:13px}
/* 4.8 Fort Test: square boxes, readable result */
.ftq .box{border-radius:0}
.ftres{color:rgba(255,255,255,.82)}
/* phones: no two-up cards that split words */
@media (max-width:760px){
  .g3,.rulegrid,.vcard-grid{grid-template-columns:1fr!important}
  .tree-kids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tree-kid::before{display:none}
  [data-tabs]>.tabs{flex-wrap:wrap;overflow:visible}
}

/* ===== review fixes, chapters 5 to 8 ===== */
/* 5 hero: the full lock-up at rest; letters hide only while the build is playing */
.logobuild .lb-e,.logobuild .lb-w{opacity:1}
.logobuild.lb-go:not(.lb-static) .lb-e{animation:lbrise .7s cubic-bezier(.2,0,0,1) both;animation-delay:calc(900ms + var(--k) * 220ms)}
.logobuild.lb-go:not(.lb-static) .lb-w{animation:lbset .5s cubic-bezier(.2,0,0,1) both;animation-delay:calc(1500ms + var(--k) * 70ms)}
/* 5.0 emblem explorer: unpicked parts in Grey 300; every part a Grey 50 tile with its line always visible */
.anat-art path{transition:fill .5s var(--ease)}
.anat-art path.dim{opacity:1;fill:#DEE2E6}
.anat-list{display:grid;gap:var(--mg)}
.anat-list button,.anat-list button:last-child{background:var(--g50);border:0;border-radius:0;padding:20px 24px}
.anat-list button:hover{background:var(--g100)}
.anat-list button.on{background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.anat-list button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.anat-list .big,.anat-list button.on .big{max-height:none;opacity:1;font-size:15px;line-height:1.45;color:#495057}
/* 5.1 stacked lock-up and emblem at one optical height; readable captions */
.lockgrid .lk:not(.lk-main) .m svg{width:auto!important;height:46%!important}
.lockgrid .lk:last-child .m svg{height:40%!important}  /* the solid emblem reads larger: 40% matches the stacked lock-up optically */
.lk .small.muted{font-size:13px;color:#495057}
/* 5.4 each chip shows the logo on its ground, with its name beneath */
.ground-btns{gap:14px 8px}
.ground-btns button{width:76px;height:auto;padding:0;border:0;background:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.ground-btns button:hover,.ground-btns button.on{transform:none;box-shadow:none}
.gchip{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--rad);box-shadow:inset 0 0 0 1px rgba(33,37,41,.12);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ground-btns button:hover .gchip{transform:translateY(-2px)}
.ground-btns button.on .gchip{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.ground-btns button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.gname{font-size:12px;line-height:1.25;color:#495057;text-align:center}
.ground-btns button.on .gname{color:var(--ink);font-weight:500}
/* 5.6 avatars on the content columns */
.avs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);align-items:end;justify-content:stretch}
.avs .av{max-width:100%;height:auto!important;aspect-ratio:1/1}
.avs .av svg{height:60%!important;width:auto}
/* 5.7 a neutral placeholder for the partner's logo */
.lockrow .plh{display:inline-flex;align-items:center;justify-content:center;height:56px;min-width:176px;padding:0 20px;background:#DEE2E6;color:#495057;font:500 13px/1 var(--sans);letter-spacing:0}
.lockrow .pplate{display:inline-flex;background:#fff;padding:14px 20px}
/* 6.0, 6.3, 6.4, 6.6: one headline setting, General Sans Medium, tight, sized to its card */
.cg-post,.modecard,.redcard,[data-pout]{container-type:inline-size}
.modecard .mc-h,.redcard .rc-h{margin:0;font:500 clamp(22px,11.5cqw,56px)/.95 var(--sans);letter-spacing:-.035em}
.mx-card .mx-h{font-weight:500}
/* 6.2 pairings: solid chips, struck-through Ink label for "not with this"; room between the columns */
.pairs .pc.no{opacity:1;color:var(--ink);font-weight:400}
.pairs .pc .pu{font-size:12px;color:#495057}
.pairs .pc.no .pu{color:var(--ink);text-decoration:line-through;text-decoration-color:var(--ink)}
body[data-page=colour] .pairs[style]{column-gap:20px;row-gap:12px}
body[data-page=colour] .tbl td,body[data-page=colour] .tbl th{padding-right:28px}
/* 6.5 the open accordion's close mark in Ink, like the plus */
body[data-page=colour] .acc details[open] summary i{color:var(--ink)}
/* 7.0 specimens sized to their tile */
.specimen{container-type:inline-size;min-height:320px}
/* 7.3 the headline never breaks inside a word */
[data-tester]{container-type:inline-size}
.tester{overflow-wrap:normal;word-break:keep-all}
/* 7.4 sizes at true px; labels readable; rows sit on their baseline without a gap above Display */
.srow{align-items:end}
.srow>p+p{margin-top:0}  /* the generic p+p 1em margin made a 200px gap above Display */
.srow>.lbl,.srow .muted{font-size:13px;color:#495057}
/* 7.8 inline link at body size; Tier 1 marked in Ink */
body[data-page=typography] .sec-b .lnk{display:inline;font-size:inherit;margin:0;text-decoration:underline;text-underline-offset:3px}
body[data-page=typography] .vt.on{border-top-color:var(--ink)}
/* 7 hero: both panels alike, guide labels readable */
.typebuild .tb-lab{font-size:12px;color:#495057}
.typebuild.tb-go .tb-lab{opacity:1}
/* 8.2 the photo covers the stage; the area outside the frame is Ink at 60% */
.crop-stage img{position:absolute;inset:0;opacity:1}
.crop-frame{box-shadow:0 0 0 2000px rgba(33,37,41,.6),inset 0 0 0 2px #fff}
.crop .small.muted{color:#495057}
/* 8.4 portraits cropped tight on one flat field, names in Crimson Text */
.cutgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cut-f{display:flex;flex-direction:column;padding:8% 9% 7%}
.cut-ph{flex:1;min-height:0;overflow:hidden}
.cut-ph img{display:block;width:100%;height:100%;object-fit:cover}
.cut-n{margin:7% 0 0;font:400 clamp(24px,2.3vw,34px)/1 var(--serif);letter-spacing:-.03em}
.cut-r{margin:6px 0 0;font:500 13px/1.3 var(--sans)}
.cut-n+.cut-r{margin-top:6px}
@media (max-width:760px){.cutgrid{grid-template-columns:minmax(0,1fr)}}
/* phones */
@media (max-width:700px){
  .ground-stage{aspect-ratio:auto;padding:76px 24px 40px}
  .sigwrap .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sigwrap .seg button{flex:none;white-space:nowrap;min-height:44px}
  .sigph .sigmark{width:max(12%,60px)}
  .avs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  body[data-page=colour] .ramp{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible}
  body[data-page=colour] .pane>.g[style*="grid-template-columns:repeat("]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible}
  body[data-page=colour] .pairs[style]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible;row-gap:16px}
  body[data-page=colour] .ramp>*,body[data-page=colour] .pane>.g[style]>*,body[data-page=colour] .pairs[style]>*{flex:none}
  body[data-page=colour] .ramp .sw,body[data-page=colour] .pane .sw{min-height:120px!important}
  .specimen{min-height:0;padding:24px}
  body[data-page=logo] .lockrow{flex-wrap:nowrap;padding:32px 16px!important;gap:12px}
  body[data-page=logo] .lockrow svg{height:40px!important;width:auto}
  .lockrow .plh{min-width:0;width:112px;height:40px;padding:0 8px}
  .lockrow .pplate{padding:8px 10px}
  .lockrow>i{height:40px}
  [data-tester].panel{padding:24px!important}
}

/* ===== review fixes, video, AI and review page ===== */
/* 13.0 lead-in above the three tiles */
.vlead{margin:0 0 16px}
/* 13.1, 13.4, 13.5: no red as ornament */
.vt.on{border-top-color:var(--ink)}
.steps .sn{color:var(--ink)}
.vnum{color:var(--ink)}
.vnever{align-self:start}
.vnever>.lbl{color:var(--g700)}
/* 13.3 kit note */
.vkitnote{margin:14px 0 0;max-width:66ch;color:var(--g600);font-size:15px;line-height:1.5}
/* 13.2 caption checker: footage stand-in, Ink hatching, white logo, caption on the 400 px line */
.cc-frame{background:var(--g500)}
.cc-zone,.cc-zone.r{background:repeating-linear-gradient(135deg,rgba(33,37,41,.35) 0 6px,rgba(33,37,41,.15) 6px 12px)}
.cc-logo{background:none;padding:0;width:14%}
.cc-cap{bottom:20.83%}
.cc-cap span{border-radius:1.11cqw}
.cc-checks li.ok i{color:var(--ink)}
@media (max-width:860px){
  .capcheck{grid-template-columns:minmax(0,1fr);gap:32px}
  .cc-phone{width:100%;max-width:340px;margin:0 auto;box-sizing:border-box}
}

/* sub-brand proposal: card rows always fill, no orphans */
.icards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.icards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pgroup+.pgroup{margin-top:40px}
.pgroup>.lbl{margin:0 0 14px}
@media (max-width:1100px){.icards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.icards.c3,.icards.c4{grid-template-columns:1fr}}

/* 6.4 canvas modes: the headline in each mode card is set in Crimson */
.modecard .mc-h,.redcard .rc-h{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.02em}

/* 6.2 ramps: no sideways scrolling. Swatches sit in one row and their names scale to the swatch; pairing tables use one row up to seven columns, two even rows beyond that */
body[data-page=colour] #ramps .swg{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
body[data-page=colour] #ramps .pairs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
body[data-page=colour] #ramps .sw{container-type:inline-size;padding:14px}
body[data-page=colour] #ramps .sw .job{font-size:clamp(18px,21cqw,28px)}
body[data-page=colour] #ramps .sw .hex{font-size:clamp(11px,10.5cqw,13px);line-height:1.4}
@media (max-width:1280px){body[data-page=colour] #ramps .swg,body[data-page=colour] #ramps .pairs{grid-template-columns:repeat(var(--h),minmax(0,1fr));row-gap:16px}}
/* pairings that fail are dimmed and struck through, so the ones that work stand out */
body[data-page=colour] .pairs .pc.no{opacity:.45;filter:grayscale(1)}   /* greyed, never a pale red that reads pink */
body[data-page=colour] .pairs .pc.no .pu{text-decoration:line-through}

/* ===== styles for the chapter 9 to 12 page fixes ===== */
/* inline links inside body text: body size, underlined */
.inl{color:var(--brick);text-decoration:underline;text-underline-offset:3px}
.inl:hover{color:var(--ox)}
/* 9.0 hero caption and 9.5 device captions, readable */
.symhero-cap{margin-top:12px}
.dev-cap{font-size:14px;line-height:1.45;color:#495057;margin:4px 0 0}
/* 10.6 label under the centre item of the loud and quiet map */
.mx .ptl{position:absolute;left:50%;top:calc(50% + 9%);transform:translateX(-50%);font-size:12px;font-weight:500;color:var(--ink);background:#fff;padding:2px 8px;white-space:nowrap}
/* 10.2 formats table: one card per row on phones */
@media (max-width:767px){
  .tbl-stack thead{display:none}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack tr{background:var(--g50);padding:14px 16px;margin-bottom:10px}
  .tbl-stack td{border:0!important;padding:4px 0!important;display:grid;grid-template-columns:96px 1fr;gap:12px}
  .tbl-stack td::before{content:attr(data-l);font-size:12px;font-weight:500;color:#495057}
  .tbl-stack td[data-l=""]::before{content:""}
}

/* ===== remaining page fixes ===== */
/* 9.0, 9.1, 9.2 colourway control: an even 2 x 2 grid of equal buttons, no inner scroll */
.seg.sx-ways,.pb .seg.pb-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible;width:100%;max-width:440px}
.sx-meta .seg.sx-ways button,.pb .seg.pb-ways button{background:#fff;box-shadow:inset 0 0 0 1px var(--g300);border-radius:var(--rad);white-space:normal;min-height:40px;padding:8px 10px;text-align:center}
.sx-meta .seg.sx-ways button.on,.pb .seg.pb-ways button.on{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
/* 9.0, 9.1 Copy SVG and Download SVG: same 40 px as the pattern builder buttons */
.sx .sx-act button,.pb .sx-act button{min-height:40px}
/* 10.0 Figma layout grid readout: one property per line, never wrapped */
.st-out pre{white-space:pre;overflow-x:auto;font-size:13px;line-height:1.6}
/* 10.0 studio on phones: 1, 2, 3 settings, then the preview, then 4, 5, 6; grid readout and download after */
@media (max-width:767px){
  .st-main{display:flex;flex-direction:column;gap:12px}
  .st-main>.st-left{display:contents}
  .st-left>.st-sec{order:1;background:#fff;border-radius:var(--rad);box-shadow:inset 0 0 0 1px var(--g200);border-bottom:0}
  .st-main>.st-canvas-wrap{order:2}
  .st-main>.st-right{order:3}
  .st-left>.st-out{order:4}
  .st-left>.st-dl{order:5}
}
/* 10.3 recipe cards: the studio link sits on the bottom of every card */
.rccard{display:flex;flex-direction:column}
.rccard>.lnk{margin-top:auto;padding-top:12px;align-self:flex-start}
/* carousel numbers: 13 px label; 32 px squares on desktop, 44 px on phones */
.car-dots button{font-size:13px}
@media (max-width:767px){.car-dots button{width:44px;height:44px;min-width:44px;min-height:44px}}
/* 11.3 Try it: Grey 50 stage with Grey 200 column stripes */
.mo-stage{background:var(--g50)}
.mo-cols i{background:var(--g200)}
/* 11.3 curve and direction: equal-width grids, no lone item (7 = 4 + 3, 6 = 3 + 3) */
.mo .mo-ctrl .seg{display:grid;gap:6px;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible;width:100%;flex-wrap:initial}
.mo .mo-ctrl .seg[data-mo-curve]{grid-template-columns:repeat(4,minmax(0,1fr))}
.mo .mo-ctrl .seg[data-mo-dir]{grid-template-columns:repeat(3,minmax(0,1fr))}
.mo .mo-ctrl .seg button{background:#fff;box-shadow:inset 0 0 0 1px var(--g300);border-radius:var(--rad);white-space:normal;min-height:40px;padding:8px 4px;text-align:center;line-height:1.2}
.mo .mo-ctrl .seg button.on{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
/* 11.3 code block */
.mo .mo-code{font-size:13px;line-height:1.6}
/* the contents label is a paragraph now (no heading jump after the H1); it looks as before */
.contents>.contents-t{grid-column:1/3;font-weight:400;font-size:15px;color:inherit;letter-spacing:0}
@media (max-width:767px){.contents>.contents-t{grid-column:1/13}}
/* 14.0 step numerals in Ink; step 1 buttons side by side at one height */
.ai-step .ai-n{color:var(--ink)}
/* 14.0 what the brief already knows: a plain two-column list */
.ai-knows-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 32px;max-width:900px}
.ai-knows-list li{font-size:16px;line-height:1.5;color:var(--ink)}
@media (max-width:600px){.ai-knows-list li{font-size:15px}}
/* 14.1 audience numbers and the default */
.ai-cn{display:block;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:6px;font-variant-numeric:tabular-nums}
.ai-default{margin-top:24px}

/* ===== responsiveness ===== */
/* a button label never breaks over lines: rows of buttons wrap as whole buttons instead */
.btn{white-space:nowrap;max-width:100%}
.ai-act{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.ai-act .btn{min-height:44px}
/* control labels stay on one line; grids of option buttons give each label room instead of squeezing it */
.seg button,.pills button,.mx-swap,.lnk,.tabs button{white-space:nowrap}
.seg.sx-ways,.pb .seg.pb-ways{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))!important}
.sx-meta .seg.sx-ways button,.pb .seg.pb-ways button{white-space:nowrap!important;font-size:13px}
.mo .mo-ctrl .seg{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))!important}
.mx-swap{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.livehint kbd,.gridbtn kbd{font-size:12px}
/* carousels never push the page sideways while a slide moves */
.car{overflow-x:clip;overflow-clip-margin:24px}
/* 13.1 type tiers: the sample line scales to its tile instead of running past it */
.vt{container-type:inline-size;min-width:0}
.vt-s{font-size:min(56px,17cqw)}
.vt-f{font-size:min(60px,18cqw)}
/* symbols and pattern builder: single-column layouts may not grow wider than the page */
@media (max-width:1100px){.sx,.sx-view,.pb{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.seg.sx-ways,.pb .seg.pb-ways{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sx-meta .seg.sx-ways button,.pb .seg.pb-ways button{font-size:12.5px;padding:8px 6px}}
/* 14.0 AI steps: three cards only when each has room; otherwise one per row, the buttons side by side */
@media (max-width:1279px){.ai-steps{grid-template-columns:minmax(0,1fr)!important}}
.ai-act .btn{flex:0 0 auto}
/* 11.3 curve (7) and direction (6): even rows, never a lone button */
.mo .mo-ctrl .seg[data-mo-curve]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.mo .mo-ctrl .seg[data-mo-dir]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:480px){.mo .mo-ctrl .seg[data-mo-curve]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .mo .mo-ctrl .seg button{font-size:12.5px;padding-inline:4px}}
/* 5.5 logo position on phones: the buttons sit where the logo goes, top row and bottom row */
@media (max-width:700px){
  .sigwrap .seg{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"tl . tr" "bl bc br";gap:6px;overflow:visible!important;box-shadow:none;width:100%}
  .sigwrap .seg button{white-space:nowrap;min-height:44px;box-shadow:inset 0 0 0 1px var(--g300);font-size:13px;padding:0 6px}
  .sigwrap .seg button[data-pos=tl]{grid-area:tl}.sigwrap .seg button[data-pos=tr]{grid-area:tr}
  .sigwrap .seg button[data-pos=bl]{grid-area:bl}.sigwrap .seg button[data-pos=bc]{grid-area:bc}.sigwrap .seg button[data-pos=br]{grid-area:br}
}
@media (max-width:480px){.mo .mo-ctrl .seg[data-mo-curve] button:first-child{grid-column:1 / -1}}
@media (max-width:700px){.sigwrap .seg button{box-shadow:inset 0 0 0 1px var(--g300)!important;border:0!important}.sigwrap .seg button.on{box-shadow:none!important}}

/* capture mode for Figma: every tab panel shown, each under its own tab name; accordions open */
.capture [data-tabs]+[data-tabs].cap-copy{margin-top:64px}
.capture .car-dots,.capture .car-bar{display:none}
.capture .gverdict,.capture .toast{display:none!important}

/* ---------- reveal & motion ---------- */
[data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-r].in{opacity:1;transform:none}
.words span{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.words.in span{opacity:1;transform:none}

.demo{position:relative;aspect-ratio:4/3;background:var(--g50);display:flex;align-items:center;justify-content:center;overflow:hidden}
.demo.dk{background:var(--ember);color:#fff}
.demo.rd{background:var(--red);color:#fff}
.demo .w{font-family:var(--serif);font-size:clamp(24px,2.8vw,44px);letter-spacing:-.035em;line-height:1}
.play .rise{animation:rise 2.8s var(--brand) infinite}
@keyframes rise{0%{transform:translateY(60%);opacity:0}22%,78%{transform:none;opacity:1}100%{transform:translateY(-40%);opacity:0}}
.play .cut{animation:cut 2.4s steps(1) infinite}
@keyframes cut{0%,49%{opacity:1}50%,100%{opacity:0}}
.seqw span{display:inline-block;opacity:0}
.play .seqw span{animation:seqw 3.2s var(--ease) infinite}
.play .seqw span:nth-child(2){animation-delay:.18s}.play .seqw span:nth-child(3){animation-delay:.36s}.play .seqw span:nth-child(4){animation-delay:.54s}
@keyframes seqw{0%{opacity:0;transform:translateY(.3em)}15%,80%{opacity:1;transform:none}100%{opacity:0}}
.play .emph i{font-style:normal;animation:emph 2.8s var(--brand) infinite}
@keyframes emph{0%,30%{color:inherit}45%,85%{color:var(--red)}100%{color:inherit}}
.dk .emph i{animation-name:emphd}
@keyframes emphd{0%,30%{color:#fff}45%,85%{color:var(--red)}100%{color:#fff}}
.play .count{animation:none}
.tr-box{width:34%;aspect-ratio:3/4;background:var(--red)}
.play .tr-up{animation:trup 2.6s var(--brand) infinite}
@keyframes trup{0%{transform:translateY(120%)}30%,70%{transform:none}100%{transform:translateY(-120%)}}
.play .tr-left{animation:trleft 2.6s var(--brand) infinite}
@keyframes trleft{0%{transform:translateX(160%)}30%,70%{transform:none}100%{transform:translateX(-160%)}}
.play .tr-scale{animation:trscale 2.6s var(--brand) infinite}
@keyframes trscale{0%{transform:scale(.2);opacity:0}30%,70%{transform:none;opacity:1}100%{transform:scale(1.25);opacity:0}}
.play .tr-wipe{animation:trwipe 2.6s var(--brand) infinite}
@keyframes trwipe{0%{clip-path:inset(0 100% 0 0)}30%,70%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}

/* emblem animation */
.emb{width:34%;height:auto;fill:var(--red)}
.dk .emb,.rd .emb{fill:#fff}
.emb path{transform-box:fill-box}
.play .emb.intro path:nth-child(1){animation:towerin 3.6s var(--brand) infinite}
.play .emb.intro path:nth-child(2){animation:bookin 3.6s var(--brand) infinite;transform-origin:50% 0}
@keyframes towerin{0%{transform:translateY(-70%);opacity:0}20%,85%{transform:none;opacity:1}100%{opacity:0}}
@keyframes bookin{0%,18%{transform:scaleY(0);opacity:0}40%,85%{transform:none;opacity:1}100%{opacity:0}}
.play .emb.idle{animation:idle 3.2s ease-in-out infinite}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
.play .emb.idle path:nth-child(1){animation:nod 3.2s ease-in-out infinite}
@keyframes nod{0%,100%{transform:none}50%{transform:translateY(-6%)}}
.play .emb.outro{animation:outro 3.2s var(--brand) infinite}
@keyframes outro{0%,40%{transform:none;opacity:1}75%,100%{transform:translateY(-30%);opacity:0}}
.curve path{stroke:var(--red);stroke-width:3;fill:none}
.curve .ball{fill:var(--ink)}
.play .curve .ball{animation:ball 2.4s var(--brand) infinite}
@keyframes ball{0%{transform:translate(0,0)}100%{transform:translate(88%,0)}}


/* ---------- responsive ---------- */
@media (max-width:1280px){
  .st-main{grid-template-columns:1fr}
  .cguide{grid-template-columns:1fr}
}
@media (max-width:1100px){
  :root{--pad:32px}
  .contents ol{columns:2}
  .sec-h,.sec-b{grid-column:1/13}
  .tree-kids{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kit-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vtabs{grid-template-columns:1fr}
  .vtabs>.tabs{position:static;flex-direction:row;border-left:0;border-bottom:1px solid var(--g200);margin-bottom:28px}
  .vtabs>.pane{grid-column:1;grid-row:auto}
  .rowlink{grid-template-columns:44px 30px minmax(0,1fr) 28px}
  .rowlink .rd{grid-column:3/4}
}
@media (max-width:820px){
  :root{--pad:16px;--nav:0px}
  .nav{transform:translateX(-100%);width:100%;transition:transform .4s var(--ease)}
  .nav.open{transform:none}
  .progress{left:0}
  .burger{display:flex;position:fixed;top:12px;right:12px;z-index:30;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:0;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
  .hero{padding-top:88px}
  .hero-num,.hero-title,.hero-intro .lead,.contents h4,.contents ol,.stmt .lbl,.stmt .d3,.srow>.lbl,.srow>p:last-child{grid-column:1/13}
  .contents ol{columns:1}
  .g3,.g4,.g5,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .model,.split,.anat,.lockgrid,.cg-out{grid-template-columns:1fr}
  .lockgrid .m{height:220px}
  .gtcard{grid-template-columns:80px 1fr;gap:16px}
  .sec{margin-top:104px}
  .next .l,.next .t{grid-column:1/13}.next .nx{display:none}
  .tbl{font-size:13px}
  .rcs{grid-template-columns:repeat(3,1fr)}
  .dlbtn span{display:none}.dlbtn{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-r]{opacity:1;transform:none}.words span,.seqw span{opacity:1;transform:none}
}