/* Studio site (Leif, 2026-11-06): the public pages (home, Ideas, Content, CopyDeck), from the design handoffs
   Website/handoff/studio-site (which supersedes CopyDeck Public Tools). Fonts self-hosted; controls as links so
   every page works without JavaScript. Sections: base + fonts, CopyDeck (with the shared header), product pages,
   home, then Studio's additions. */
/* CopyDeck online. From the design handoff (Direction A), with fonts self-hosted (no Google Fonts: CSP and privacy)
   and the tab/filter controls as links, so every view works without JavaScript and can be crawled. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
html,body{margin:0}body{background:#FAFAF8}

/* ---------- CopyDeck and the shared chrome (handoff copydeck.css) ---------- */
.cdk{--blue:#009FE3;--blue-t:#0072A8;--blue-b:#0077B0;--ink:#2E3A42;--green:#509E7A;--green-t:#3B7A5C;--grey:#7A7A7A;--muted:#5E6870;--rule:#E4E6E8;--paper:#FAFAF8;--stock:#FFFDF8;--edge:#E2DDD1;--serif:'Source Serif 4',Georgia,serif;--sans:'Schibsted Grotesk',system-ui,sans-serif;container-type:inline-size;background:var(--paper);color:var(--ink);font-family:var(--sans);min-height:100%}
.cdk *{box-sizing:border-box}
.cdk a{color:var(--blue-t)}.cdk a:hover{color:#005A85}
.cdk :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tP{--tc:#0072A8}.tC{--tc:#3B7A5C}.tR{--tc:#5E6870}
/* chrome */
.sh{background:#fff;border-bottom:1px solid var(--rule);position:relative}
.sh-i{display:flex;align-items:center;gap:28px;height:60px;padding:0 20px;max-width:1200px;margin:0 auto}
.mk{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink)!important}
.mk b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.mk b i{font-style:normal;color:var(--blue)}
.mk small{font-size:10px;font-weight:600;color:var(--muted);margin-top:3px}
.sh-i>nav{display:none;gap:22px;font-size:14.5px;font-weight:600}
.sh-i>nav a{color:var(--muted)!important;text-decoration:none;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:10px 0 8px;border-bottom:3px solid transparent;line-height:1.2}
.sh-i>nav a b{font-weight:600}
.sh-i>nav a small{font-size:12px;font-weight:400;color:var(--muted)}
.sh-i>nav a:hover{color:var(--ink)!important}
.sh-i>nav a.on{color:var(--ink)!important;border-bottom-color:var(--blue)}
.soon{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:1px 5px;border-radius:3px}
.sh-e{margin-left:auto;display:flex;align-items:center;gap:12px}
.sh .si{font-size:14.5px;font-weight:600;color:var(--ink)!important;text-decoration:none;white-space:nowrap}
.sh .mn{background:none;border:1px solid var(--rule);border-radius:6px;padding:7px 11px;font:600 13.5px var(--sans);color:var(--ink);cursor:pointer}
.me{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)!important;font-size:14.5px;font-weight:600}
.av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.me small{display:none;font-size:11.5px;font-weight:500;color:var(--muted)}
.mp{position:absolute;left:0;right:0;top:60px;background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 10px 20px -10px rgba(0,0,0,.15);z-index:30;padding:6px 20px 14px}
.mp a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:600;font-size:16px;color:var(--ink)!important;text-decoration:none}
.mp a.on{color:var(--blue-t)!important}
@container (min-width:760px){.sh-i>nav{display:flex}.sh .mn{display:none}.me small{display:block}.me>span:last-child{display:flex;flex-direction:column;line-height:1.15}}
.sf{border-top:1px solid var(--rule);background:#fff;font-size:13.5px;color:var(--muted)}
.sf-i{max-width:1200px;margin:0 auto;padding:22px 20px 28px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.sf a{color:var(--muted)!important}.sf .pc{margin-right:auto;color:var(--ink)!important;font-weight:700;text-decoration:none}
/* layout */
.wr{max-width:1120px;margin:0 auto;padding:0 20px}
.crumb{font-size:13.5px;color:var(--muted);padding:16px 0 14px;display:flex;gap:6px;flex-wrap:wrap}
.crumb a{color:var(--muted)!important}
.sec{margin-top:40px}
.sec>h3,.h3{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn{font:600 14.5px var(--sans);border-radius:6px;padding:10px 16px;border:1.5px solid transparent;cursor:pointer;text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn.q{background:none;color:var(--muted)!important}.btn.q:hover{color:var(--ink)!important}
.btn.s{background:#fff;color:var(--ink)!important;border-color:#C9CED2}.btn.s:hover{border-color:var(--ink)}
.btn.p{background:var(--blue-b);color:#fff!important}.btn.p:hover{background:#00628F}
.btn.g{background:var(--green-t);color:#fff!important}.btn.g:hover{background:#2F6449}
.btn.lg{font-size:16px;padding:13px 22px}
/* full card */
.cd{position:relative;isolation:isolate}
.cd .stk{position:absolute;inset:0;border-radius:14px;background:#F3F0E8;border:1px solid var(--edge);z-index:-1}
.cd .s1{transform:rotate(-2.2deg) translate(-4px,6px)}.cd .s2{transform:rotate(1.6deg) translate(6px,10px);background:#EEEAE0}
.face{background:var(--stock);border:1px solid var(--edge);border-radius:14px;padding:12px;box-shadow:0 1px 0 var(--edge),0 10px 24px -12px rgba(46,58,66,.25)}
.in{border:1.5px solid var(--tc);border-radius:9px;padding:22px 22px 26px;position:relative}
.tp{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tc)}
.tp .no{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--muted)}
.ti{margin:18px 0 16px;font-size:40px;line-height:1.03;font-weight:800;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.bd{margin:0 0 12px;font:400 18px/1.6 var(--serif);color:#2B3338;text-wrap:pretty}.bd:last-of-type{margin-bottom:0}
.pip{position:absolute;right:16px;bottom:14px;width:26px;height:26px;border-radius:50%;background:var(--tc);opacity:.14}
.src{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
@container (min-width:760px){.ti{font-size:56px}.in{padding:28px 30px 32px}}
.qn{background:var(--stock);border:1px dashed #CFC8B8;border-radius:10px;padding:16px 18px;margin-top:22px}
.qn .k{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-t);margin-bottom:6px}
.qn p{margin:0;font-size:21px;line-height:1.35;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
/* summary card */
.sm{display:block;text-decoration:none!important;color:var(--ink)!important;background:var(--stock);border:1px solid var(--edge);border-radius:12px;padding:8px;transition:transform .15s,box-shadow .15s;height:100%}
.sm .in{padding:14px 14px 16px;border-width:1.25px;height:100%}
.sm .tp{font-size:10.5px}
.sm h4{margin:10px 0 6px;font-size:21px;line-height:1.08;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.sm p{margin:0;font:400 14.5px/1.45 var(--serif);color:var(--muted)}
.sm:hover,.sm.hv{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 12px 22px -12px rgba(46,58,66,.35)}
.sm.dt{animation:deal .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes deal{from{opacity:0;transform:translate(-40px,-60px) rotate(-14deg) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sm.dt{animation:none}}
/* tiny card */
.tn{display:flex;flex-direction:column;justify-content:space-between;gap:8px;aspect-ratio:5/3.4;text-decoration:none!important;background:var(--stock);border:1px solid var(--edge);border-radius:8px;padding:9px 10px;color:var(--ink)!important;position:relative;border-top:3px solid var(--tc);transition:transform .12s,box-shadow .12s}
.tn b{font-size:14px;line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.tn span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tc)}
.tn:hover,.tn.hv{transform:translateY(-2px);box-shadow:0 8px 14px -8px rgba(46,58,66,.35)}
/* card page */
.top{display:grid;gap:22px}
@container (min-width:760px){.top{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:start;padding-top:6px}}
.rest{max-width:760px}
.try{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px}
.try h2{margin:0 0 4px;font-size:18px;font-weight:700}
.try>p{margin:0 0 12px;font-size:15px;color:var(--muted);line-height:1.45}
.try label{display:block;font-size:13px;font-weight:600;margin:0 0 5px}
.try textarea{width:100%;min-height:92px;border:1.5px solid #C9CED2;border-radius:6px;padding:11px 12px;font:17px/1.5 var(--serif);color:var(--ink);resize:vertical;background:#fff}
.try textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,159,227,.18)}
.try .ta+.ta{margin-top:12px}
.try .ac{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.try .nai{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.sig{background:#F1F7F4;border:1px solid #CFE3D8;border-radius:10px;padding:16px 18px;margin-bottom:14px}
.sig .k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-t);margin-bottom:6px}
.sig p{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--ink)}
.sig .btn{width:100%}
.ex{display:grid;gap:22px}
@container (min-width:760px){.ex{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.ex blockquote{margin:0;padding:0}
.ex blockquote p{margin:0 0 8px;font:italic 400 20px/1.35 var(--serif);color:var(--ink);text-wrap:pretty}
.ex blockquote p::before{content:"“";color:var(--blue);font-style:normal;font-weight:600}
.ex blockquote p::after{content:"”";color:var(--blue);font-style:normal;font-weight:600}
.ex cite{font-style:normal;font-size:13.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a,.chips button{font:600 14px var(--sans);color:var(--ink)!important;text-decoration:none;border:1px solid #C9CED2;border-radius:999px;padding:7px 14px;background:#fff;cursor:pointer}
.chips a:hover,.chips button:hover{border-color:var(--blue)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff!important}
.rel{display:flex;gap:14px;overflow-x:auto;padding:6px 4px 12px;margin:0 -4px;scroll-snap-type:x mandatory}
.rel>*{flex:0 0 240px;scroll-snap-align:start}
@container (min-width:760px){.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}}
.ho{margin-top:40px;background:#fff;border:1px solid var(--rule);border-left:4px solid var(--green);border-radius:10px;padding:20px 22px;display:grid;gap:14px}
@container (min-width:760px){.ho{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.ik{width:18px;height:18px;border-radius:4px;background:var(--green);display:inline-block;position:relative;flex:none}
.ik::after{content:"";position:absolute;inset:5px;border:2px solid #fff;border-radius:50%}
.ho .k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-t);margin-bottom:6px}
.ho h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.ho p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.sl{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.nx{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:34px 0 48px;padding-top:18px;border-top:1px solid var(--rule)}
.nx a{font-weight:700;font-size:15px;text-decoration:none}
/* index */
.ih{padding:28px 0 6px}
.ih .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-t)}
.ih h1{margin:6px 0 10px;font-size:40px;line-height:1.03;font-weight:800;letter-spacing:-.035em}
.ih p{margin:0 0 6px;font:400 18px/1.55 var(--serif);max-width:620px;color:#2B3338}
.ih .by{font:500 14px var(--sans);color:var(--muted)}
.ih .ac{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
@container (min-width:760px){.ih h1{font-size:64px}.ih{padding-top:44px}}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin:26px 0 22px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px 11px;font:700 15px var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.pb{padding:0 0 28px}
.pb+.pb{border-top:1px solid var(--rule);padding-top:22px}
.pb h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.015em}
.pb>p{margin:0 0 14px;font-size:14.5px;color:var(--muted)}
.ty{margin-bottom:34px}
.ty-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;border-bottom:2px solid var(--tc);padding-bottom:8px;margin-bottom:14px}
.ty-h h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ty-h p{margin:0;font-size:14px;color:var(--muted);flex-basis:100%}
.ty-h span{font-size:13px;font-weight:700;color:var(--tc)}
@container (min-width:760px){.ty-h p{flex-basis:auto}}
.gs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container (min-width:560px){.gs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:900px){.gs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.more{margin-top:12px;background:none;border:0;padding:0;font:700 14.5px var(--sans);color:var(--blue-t);cursor:pointer}
.az-f{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.az-f input{flex:1;min-width:200px;max-width:420px;border:1.5px solid #C9CED2;border-radius:6px;padding:10px 12px;font:16px var(--sans);color:var(--ink)}
.az-f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,159,227,.18)}
.az-f span{font-size:13.5px;color:var(--muted)}
.gt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@container (min-width:560px){.gt{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:900px){.gt{grid-template-columns:repeat(6,minmax(0,1fr))}}
.empty{padding:24px 0;font-size:15px;color:var(--muted)}
.su{margin:44px 0 0;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px;display:grid;gap:14px}
@container (min-width:760px){.su{grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center;gap:28px}}
.su h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.su p{margin:0;font-size:15px;color:var(--muted);line-height:1.5}
.su form{display:flex;flex-wrap:wrap;gap:8px}
.su label{flex-basis:100%;font-size:13px;font-weight:600}
.su input{flex:1;min-width:180px;border:1.5px solid #C9CED2;border-radius:6px;padding:10px 12px;font:16px var(--sans)}
.su small{flex-basis:100%;font-size:12.5px;color:var(--muted)}
.su .ok{font-size:15px;font-weight:600;color:var(--green-t)}
/* deal */
.dh{padding:26px 0 4px}
.dh h1{margin:0 0 6px;font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.dh p{margin:0;font:400 17px/1.55 var(--serif);color:#2B3338;max-width:560px}
@container (min-width:760px){.dh h1{font-size:52px}}
.dfl{display:grid;gap:12px;margin:20px 0 18px}
.dfl .r{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dfl .l{font-size:13px;font-weight:700;color:var(--muted);min-width:44px}
.seg{display:inline-flex;border:1px solid #C9CED2;border-radius:6px;overflow:hidden;background:#fff}
.seg button{background:#fff;border:0;padding:7px 13px;font:600 14px var(--sans);color:var(--muted);cursor:pointer}
.seg button+button{border-left:1px solid #C9CED2}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.hand{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:4px 0 0}
@container (min-width:560px){.hand{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:900px){.hand{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.hand>:nth-child(1){transform:rotate(-2deg)}.hand>:nth-child(2){transform:rotate(-1deg) translateY(-6px)}.hand>:nth-child(3){transform:translateY(-10px)}.hand>:nth-child(4){transform:rotate(1deg) translateY(-6px)}.hand>:nth-child(5){transform:rotate(2deg)}}
.hand .slot{min-width:0}
.da{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 0}
.da .sh2{font-size:13.5px;color:var(--muted);margin-left:auto}
.da .sh2 button{background:none;border:0;padding:0;font:700 13.5px var(--sans);color:var(--blue-t);cursor:pointer}
.face .in{padding-bottom:52px}
@container (min-width:760px){.face .in{padding-bottom:56px}}
.sm .in{padding-bottom:16px}
.chips a,.chips button{white-space:nowrap}
.crumb a,.crumb span{white-space:nowrap}
.me b,.me small{white-space:nowrap}
.subn{border-top:1px solid var(--rule);background:#FAFAF8}
.subn-i{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;gap:20px;overflow-x:auto}
.subn a{display:flex;align-items:center;gap:6px;padding:10px 0 8px;font-size:14px;font-weight:600;color:var(--muted)!important;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.subn a:hover{color:var(--ink)!important}
.subn a.on{color:var(--ink)!important;border-bottom-color:var(--green)}
.fr{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-t);background:#E6F3EC;padding:1px 6px;border-radius:3px}
.mp a.mp-s{padding-left:16px;font-size:15px;font-weight:500;justify-content:flex-start;gap:8px}

/* ---------- product pages (handoff tool-pages.css) ---------- */
.tp2 .hv2{background:#fff;border-bottom:1px solid var(--rule)}
.hv2-i{display:grid;gap:28px;padding-top:40px;padding-bottom:36px}
@container (min-width:900px){.hv2-i{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:68px;padding-bottom:60px}}
.hv2 .k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tk)}
.hv2 h1{margin:8px 0 12px;font-size:40px;line-height:1.03;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
@container (min-width:760px){.hv2 h1{font-size:58px}}
.hv2 p.l{margin:0;font:400 18.5px/1.55 var(--serif);color:#2B3338;max-width:560px}
.hv2 .ac{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hv2 .nt{margin:12px 0 0;font-size:14px;color:var(--muted)}
.shot2{aspect-ratio:4/3;background:#F1F2F3;border:1px solid var(--rule);border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;font-size:14px;line-height:1.5;color:var(--muted)}
.tp2{--tk:var(--blue-t);--tc2:var(--blue)}
.tp2.ideas{--tk:var(--green-t);--tc2:var(--green)}
.sx2{padding:52px 0}
.sx2>h2{margin:0 0 6px;font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.sx2>.ld{margin:0 0 26px;font:400 17.5px/1.55 var(--serif);color:var(--muted);max-width:640px}
.pr2{display:grid;gap:14px}
@container (min-width:760px){.pr2{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.pr2 div{border-top:3px solid var(--tc2);padding-top:14px}
.pr2 b{display:block;font-size:18px;font-weight:700;margin-bottom:4px}
.pr2 p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.st2{counter-reset:s;display:grid;gap:12px}
@container (min-width:900px){.st2{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px}}
.st2 li{list-style:none;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:16px 16px 18px;counter-increment:s}
.st2 li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--tc2);color:#fff;font-weight:800;font-size:14px;margin-bottom:10px}
.st2 b{display:block;font-size:17px;margin-bottom:4px}
.st2 p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.st2{margin:0;padding:0}
.ft3{display:grid;gap:22px}
@container (min-width:900px){.ft3{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
.fx{background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.fx .shot2{border:0;border-bottom:1px solid var(--rule);border-radius:0;aspect-ratio:16/9}
.fx .b{padding:18px 20px 20px}
.fx h3{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.015em}
.fx p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.qt{margin:0;padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.qt p{margin:0 0 10px;font:italic 400 24px/1.4 var(--serif);color:var(--ink);max-width:820px;text-wrap:pretty}
.qt cite{font-style:normal;font-size:14px;color:var(--muted)}
.qt .ph{background:#FFF1B8;padding:0 3px}
.cdx{background:#F3F0E8;border:1px solid var(--edge);border-radius:12px;padding:22px;display:grid;gap:18px}
@container (min-width:900px){.cdx{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:32px;padding:28px 32px}}
.cdx .k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-t)}
.cdx h2{margin:6px 0 8px;font-size:28px;font-weight:800;letter-spacing:-.025em}
.cdx p{margin:0 0 14px;font:400 16.5px/1.55 var(--serif);color:#2B3338}
.cdx .fan2{display:grid;gap:10px}
@container (min-width:560px){.cdx .fan2{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cdx .ac{display:flex;flex-wrap:wrap;gap:10px}
.pl3{display:grid;gap:14px}
@container (min-width:860px){.pl3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pc3{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:8px}
.pc3.hl{border:2px solid var(--tc2)}
.pc3 .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pc3.hl .k{color:var(--tk)}
.pc3 h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em}
.pc3 .pr{font-size:15px}.pc3 .pr b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.pc3 .pr .tbc{background:#FFF1B8;padding:0 3px;font-weight:800}
.pc3 ul{margin:4px 0 6px;padding-left:18px;font-size:14.5px;line-height:1.65;flex:1}
.pc3 .btn{align-self:stretch}
.pc3 small{font-size:12.5px;color:var(--muted)}
.fq{max-width:760px}
.fq details{border-bottom:1px solid var(--rule)}
.fq summary{cursor:pointer;padding:16px 0;font-size:17px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";font-weight:400;color:var(--muted);font-size:22px;line-height:1}
.fq details[open] summary::after{content:"–"}
.fq details p{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.xs{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--xc);border-radius:10px;padding:20px 22px;display:grid;gap:12px}
@container (min-width:760px){.xs{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.xs .k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--xk)}
.xs h2{margin:4px 0 4px;font-size:22px;font-weight:700}
.xs p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.cl2{padding:52px 0 60px;text-align:center}
.cl2 h2{margin:0 0 8px;font-size:34px;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.cl2 p{margin:0 auto 18px;font:400 17px/1.55 var(--serif);color:var(--muted);max-width:520px}
.cl2 .ac{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---------- home (handoff Studio Home v2) ---------- */
/* home */
.hv{padding:44px 0 40px;border-bottom:1px solid var(--rule);background:#fff}
.hv .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-t)}
.hv h1{margin:8px 0 12px;font-size:40px;line-height:1.03;font-weight:800;letter-spacing:-.035em;max-width:760px;text-wrap:balance}
.hv p{margin:0;font:400 18px/1.55 var(--serif);color:#2B3338;max-width:600px}
.hv .ac{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hv .nt{margin:12px 0 0;font:500 14px var(--sans);color:var(--muted)}
@container (min-width:760px){.hv{padding:72px 0 60px}.hv h1{font-size:64px}}
.tl{display:grid;gap:18px}
@container (min-width:760px){.tl{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
.tc{background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;border-top:4px solid var(--c,var(--blue))}
.tc .shot{aspect-ratio:16/9;background:#F1F2F3;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:13.5px;color:var(--muted)}
.tc .b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tc .kk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c2,var(--blue-t))}
.tc h3{margin:0;font-size:28px;font-weight:800;letter-spacing:-.025em}
.tc p{margin:0;font:400 16.5px/1.55 var(--serif);color:#2B3338}
.tc ul{margin:4px 0 0;padding-left:18px;font-size:14.5px;line-height:1.7;color:var(--ink)}
.tc .ft2{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ti2{--c:var(--green);--c2:var(--green-t)}.tco{--c:var(--blue);--c2:var(--blue-t)}
.pp{margin-top:18px;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.pp h3{margin:0;font-size:19px;font-weight:700}.pp p{margin:0;flex:1;min-width:240px;font-size:15px;color:var(--muted);line-height:1.5}
.cdb{overflow:hidden;background:#F3F0E8;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.cdg{display:grid;gap:26px;padding:44px 0}
@container (min-width:900px){.cdg{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:44px;align-items:center;padding:60px 0}}
.cdg .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-t)}
.cdg h2{margin:6px 0 10px;font-size:34px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.cdg p{margin:0 0 16px;font:400 17px/1.55 var(--serif);color:#2B3338}
.cdg .ac{display:flex;flex-wrap:wrap;gap:10px}
.fan{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container (min-width:560px){.fan{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:900px){.fan>:nth-child(1){transform:rotate(-2deg) translateY(6px)}.fan>:nth-child(3){transform:rotate(2deg) translateY(6px)}}
.acs{display:grid;gap:14px}
@container (min-width:860px){.acs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.acx{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:8px}
.acx.hl{border:2px solid var(--green)}
.acx .k{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.acx.hl .k{color:var(--green-t)}
.acx h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.acx p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);flex:1}
.acx .pr{font-weight:700;font-size:15px}
.acx .btn{align-self:flex-start}
.acx form{display:flex;flex-wrap:wrap;gap:6px}
.acx input{flex:1;min-width:150px;border:1.5px solid #C9CED2;border-radius:6px;padding:9px 11px;font:15px var(--sans)}
.wy{display:grid;gap:22px}
@container (min-width:760px){.wy{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wy h3{margin:0 0 6px;font-size:17px;font-weight:700}.wy p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.sec2{padding:48px 0}
.sec2>h2{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.025em}
.sec2>.ld{margin:0 0 24px;font:400 17px/1.55 var(--serif);color:var(--muted);max-width:620px}
/* signed in */
.dh2{padding:30px 0 18px}
.dh2 h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-.03em}
.dh2 p{margin:4px 0 0;font-size:15.5px;color:var(--muted)}
.pn{display:grid;gap:16px}
@container (min-width:760px){.pn{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.pl{background:#fff;border:1px solid var(--rule);border-radius:10px;display:flex;flex-direction:column;border-top:4px solid var(--c,var(--blue));min-width:0}
.pl-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 20px 4px}
.pl-h h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.pl-h span{font-size:13.5px;color:var(--muted)}
.pl-c{display:block;margin:8px 20px;padding:13px 15px;border:1.5px solid var(--ink);border-radius:8px;text-decoration:none!important;color:var(--ink)!important}
.pl-c:hover{border-color:var(--blue)}
.pl-c small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c2,var(--blue-t))}
.pl-c b{display:block;font-size:17px;line-height:1.3;margin:2px 0}
.pl-c span{font-size:13.5px;color:var(--muted)}
.pl-l{list-style:none;margin:4px 20px 0;padding:0}
.pl-l li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:14.5px}
.pl-l li span{color:var(--muted);font-size:13px;white-space:nowrap}
.pl-f{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 18px;margin-top:auto}
.pl-f .btn{font-size:14px;padding:8px 13px}
.pl.cd2{--c:#2E3A42;--c2:var(--blue-t)}
.pl .cod{margin:8px 20px 0}
.pl .cod .sm h4{font-size:19px}
.pl .rec{margin:12px 20px 0;font-size:13px;color:var(--muted)}
.pl .rec b{color:var(--ink);font-weight:600}
.pl.soon2 .pl-b{padding:6px 20px 0;font:400 15.5px/1.55 var(--serif);color:#2B3338}
.wt2{margin-top:24px}
.wt2 h2{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wt2 ul{list-style:none;margin:0;padding:0}
.wt2 li{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.wt2 li i{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-t)}
.wt2 li span{font-size:13px;color:var(--muted);white-space:nowrap}
.acct2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:24px 0 48px;padding:14px 18px;background:#fff;border:1px solid var(--rule);border-radius:10px;font-size:14.5px}
.acct2 .sp{flex:1}
.pil{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:#E6F3EC;color:var(--green-t);white-space:nowrap}
.pil.sa{background:#E6F2F8;color:var(--blue-t)}
.mup2{margin:-30px 0 48px;border:1px dashed #B9C1C6;border-radius:10px;padding:16px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:15px}
.mup2 p{margin:0;flex:1;min-width:240px;color:var(--muted)}.mup2 b{color:var(--ink)}

/* ---------- Studio's additions ---------- */
/* links in place of the prototype's buttons */
.tabs a{border-bottom:3px solid transparent;padding:12px 14px 11px;font:700 15px var(--sans);color:var(--muted)!important;text-decoration:none;white-space:nowrap}
.tabs a[aria-selected="true"]{color:var(--ink)!important;border-bottom-color:var(--blue)}
.seg a{background:#fff;padding:7px 13px;font:600 14px var(--sans);color:var(--muted)!important;text-decoration:none}
.seg a+a{border-left:1px solid #C9CED2}
.seg a[aria-pressed="true"]{background:var(--ink);color:#fff!important}
.chips a[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff!important}
.more{display:inline-block;text-decoration:none}
.hide{display:none!important}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
.sh nav .soonlink{display:flex;align-items:center;gap:6px;color:var(--muted);padding:20px 0 17px}
.mp .mpi{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:600;font-size:16px;color:var(--muted)}
.chips .chip{font:600 14px var(--sans);color:var(--ink);border:1px solid #C9CED2;border-radius:999px;padding:7px 14px;background:#fff;white-space:nowrap}

.soon-b{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:1px 5px;border-radius:3px;white-space:nowrap}
.shot2 img,.tc .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.shot2.has,.tc .shot.has{padding:0;background:#fff}
.shot2.soonshot{background:repeating-linear-gradient(135deg,#F4F5F6 0 12px,#EFF1F2 12px 24px);flex-direction:column;gap:8px}
.wlf{display:flex;flex-wrap:wrap;gap:6px}.wlf input{flex:1;min-width:150px;border:1.5px solid #C9CED2;border-radius:6px;padding:9px 11px;font:15px var(--sans)}
.wlf-ok{margin:0;font-size:14.5px;font-weight:700;color:var(--green-t)}
.si2{font-size:13.5px;color:var(--muted);margin:10px 0 0}
.hv .si2{font:500 14px var(--sans);color:var(--muted);margin:8px 0 0}

/* the tools' descriptions in the phone menu (2026-11-06) */
.mp-t{display:flex;flex-direction:column;gap:2px}.mp-t small{font-size:13px;font-weight:400;color:var(--muted)}