@font-face{font-family:"Syne";src:url(fonts/syne-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
/* primitives */
--navy-900:#121C27;--navy-800:#1C2A3A;--navy-700:#24364A;--navy-600:#2B4058;--navy-300:#AEB8C3;--navy-200:#C9D0D8;
--sand-500:#D9B86A;--sand-600:#C9A657;--paper-0:#FAFAF7;--rust-700:#9A4A2A;--sand-100:#F3EBD6;--stone-50:#F8F9F6;--stone-100:#ECEEEA;--stone-300:#C7CCC6;--slate-600:#5A6573;--white-0:#FFFFFF;
--red-700:#8A3A2F;--red-600:#B5483C;--red-100:#F5E1DD;--red-50:#FDECEC;--green-600:#3E7D57;--amber-50:#FFF6DC;
/* semantic: components use only these */
--c-bg:var(--stone-100);--c-surface:var(--stone-50);--c-field:var(--white-0);--c-ink:var(--navy-800);--c-ink-muted:var(--slate-600);--c-rule:var(--stone-300);
--c-inverse-bg:var(--navy-800);--c-inverse-bg-deep:var(--navy-900);--c-inverse-ink:var(--stone-100);--c-inverse-muted:var(--navy-300);--c-inverse-soft:var(--navy-200);--c-inverse-rule:var(--navy-600);
--c-action:var(--sand-500);--c-action-ink:var(--navy-800);--c-action-hover:var(--sand-100);--c-focus:var(--sand-500);--c-poster-bg:var(--sand-500);--c-poster-ink:var(--navy-800);--c-reserve:var(--rust-700);
--c-danger:var(--red-700);--c-danger-strong:var(--red-600);--c-danger-bg:var(--red-100);--c-danger-bg-soft:var(--red-50);--c-success:var(--green-600);--c-changed-bg:var(--amber-50);
--shadow-figure:0 12px 32px rgba(18,28,39,.08);--shadow-deep:0 30px 60px rgba(28,42,58,.35);
/* type */
--display:"Syne","Arial Black",sans-serif;--sans:"Manrope",ui-sans-serif,system-ui,sans-serif;--serif:"Manrope",ui-sans-serif,system-ui,sans-serif;
--fs-1:.875rem;--fs-2:1rem;--fs-3:1.125rem;--fs-4:1.40625rem;--fs-5:1.75rem;--fs-6:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);--fs-7:clamp(3rem,1.2rem + 4.8vw,5.5rem);
/* space */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
--m:clamp(20px,5vw,72px);--sec:clamp(72px,9vw,112px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font:400 var(--fs-3)/1.6 var(--serif);font-optical-sizing:auto;text-rendering:optimizeLegibility}
::selection{background:var(--c-action);color:var(--c-ink)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-action);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--c-action);color:var(--c-ink);padding:10px 14px;font-family:var(--sans);z-index:9}.skip:focus{left:8px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--m)}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
h2{font-size:var(--fs-6);font-weight:650}h3{font-size:var(--fs-5);font-weight:600;letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 1em;max-width:66ch}
.sans{font-family:var(--sans)}
.lede{font-size:var(--fs-4);line-height:1.45}
.muted{color:var(--c-ink-muted)}
.ul{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .3s}
.ul:hover{background-size:0 1px;background-position:100% 100%}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;background:var(--c-action);color:var(--c-ink);font:600 var(--fs-2)/1 var(--sans);text-decoration:none;border-radius:2px;transition:background-color .2s,transform .1s}
.btn:hover{background:var(--c-surface)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px currentColor}.btn.ghost:hover{background:var(--c-ink);color:var(--c-bg)}
/* header */
.top{position:absolute;inset:0 0 auto;z-index:5;color:var(--c-bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 var(--fs-2)/1 var(--sans);letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:2px}
.top nav{display:flex;gap:28px;font:500 var(--fs-2)/1 var(--sans)}
.top nav a{text-decoration:none;opacity:.85}.top nav a:hover{opacity:1;color:var(--c-action)}
.top .btn{min-height:42px;padding:10px 18px;font-size:var(--fs-2)}
/* hero */
.hero{background:var(--c-ink);color:var(--c-bg);position:relative;overflow:hidden;padding:168px 0 72px}
.hero .topo{position:absolute;right:-8%;top:40px;width:min(68vw,980px);height:auto;stroke:var(--c-inverse-rule);pointer-events:none}
.topo path{stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 2.4s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:calc(var(--i)*70ms)}
.topo .hl{stroke:var(--c-action);stroke-width:1.4;opacity:.9}
.topo .pin{fill:var(--c-action);stroke:none}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.coords{grid-column:1/-1;font:500 var(--fs-2)/1.4 var(--sans);color:var(--c-action);margin-bottom:28px}
.hero h1{grid-column:1/11;font-size:var(--fs-7);line-height:.92;letter-spacing:-.045em;font-weight:700;animation:rise .9s .2s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.hero .intro{grid-column:1/7;margin-top:48px}
.hero .intro p{color:var(--c-inverse-soft)}
.hero .cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:28px;font-family:var(--sans)}
.hero .facts{grid-column:8/13;margin-top:48px;border-top:1px solid var(--c-inverse-rule);font-family:var(--sans)}
.facts div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-inverse-rule);font-size:var(--fs-2)}
.facts b{font-weight:600}.facts span{color:var(--c-inverse-muted);text-align:right}
.offer{grid-column:1/-1;margin-top:40px;font:italic 400 var(--fs-2)/1.4 var(--serif);color:var(--c-inverse-muted)}
.offer b{font:600 var(--fs-2) var(--sans);color:var(--c-action);font-style:normal}
/* sections */
section{padding:var(--sec) 0}
.head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:56px;align-items:end}
.head h2{grid-column:1/8}.head p{grid-column:8/13;margin:0;color:var(--c-ink-muted)}
/* work */
.work .feature{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:72px}
.work .feature figure{grid-column:1/9;margin:0}
.work .feature .cap{grid-column:9/13}
figure.shot img{width:100%;border:1px solid var(--c-rule);background:var(--c-surface);box-shadow:0 30px 60px -30px __SD__}
.tag{display:inline-block;font:600 var(--fs-1)/1 var(--sans);padding:6px 9px;border:1px solid currentColor;border-radius:2px;margin-bottom:16px}
.work .cap h3{margin-bottom:12px}.work .cap p{font-size:var(--fs-2)}
.work .list{display:grid;grid-template-columns:repeat(12,1fr);gap:48px 24px}
.work .item{text-decoration:none;display:block}
.work .item:nth-child(1){grid-column:1/6}.work .item:nth-child(2){grid-column:7/13;margin-top:96px}
.work .item:nth-child(3){grid-column:2/7}.work .item:nth-child(4){grid-column:8/13;margin-top:64px}
.work .item img{border:1px solid var(--c-rule);transition:transform .4s}
.work .item:hover img{transform:scale(1.015)}
.work .item h3{margin:20px 0 8px;font-size:var(--fs-4)}
.work .item p{font-size:var(--fs-2);color:var(--c-ink-muted)}
.work .item:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* rate card */
.rates{background:var(--c-surface)}
.svc{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:40px 0;border-top:1px solid var(--c-ink)}
.svc>header{grid-column:1/5}.svc>header p{font-size:var(--fs-2);color:var(--c-ink-muted);margin-top:12px}
.svc .tiers{grid-column:5/13}
.tier{display:grid;grid-template-columns:1.1fr 2.2fr .8fr .9fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--c-rule);align-items:baseline}
.tier:first-child{padding-top:4px}
.tier b{font:600 var(--fs-2) var(--sans)}
.tier .inc{font-size:var(--fs-2)}
.tier .t{font:500 var(--fs-2) var(--sans);color:var(--c-ink-muted)}
.tier .p{text-align:right;font:700 var(--fs-5)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.tier .p small{display:block;font:400 var(--fs-1)/1.4 var(--serif);font-style:italic;color:var(--c-ink-muted);letter-spacing:0;margin-top:6px}
.notes{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;border-top:1px solid var(--c-ink);padding-top:32px}
.notes p{grid-column:5/13;font-size:var(--fs-2)}
.notes .btnrow{grid-column:5/13;display:flex;gap:20px;align-items:center;flex-wrap:wrap;font:400 var(--fs-2) var(--serif);color:var(--c-ink-muted)}
.btnrow .btn:hover{background:var(--c-ink);color:var(--c-bg)}
/* steps */
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--c-ink)}
.steps li{padding:32px 32px 0 0;counter-increment:s}
.steps li+li{padding-left:32px;border-left:1px solid var(--c-rule)}
.steps li::before{content:counter(s);display:block;font:700 var(--fs-7)/1 var(--sans);letter-spacing:-.05em;color:var(--c-action);-webkit-text-stroke:1px var(--c-ink);margin-bottom:24px}
.steps h3{margin-bottom:12px}.steps p{font-size:var(--fs-2)}
/* terms */
.terms{background:var(--c-ink);color:var(--c-bg)}
.terms .head p{color:var(--c-inverse-muted)}
.terms .cols{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.terms .col{grid-column:span 6;border-top:1px solid var(--c-action);padding-top:24px}
.terms h3{color:var(--c-action);margin-bottom:20px}
.terms ul{margin:0;padding:0;list-style:none}
.terms li{padding:12px 0 12px 28px;border-bottom:1px solid var(--c-inverse-rule);position:relative;font-size:var(--fs-2)}
.terms li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:1px;background:var(--c-action)}
.terms .btnrow{margin-top:48px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:var(--fs-2);color:var(--c-inverse-muted)}
.terms .btnrow .btn:hover{background:var(--c-surface);color:var(--c-ink)}
/* about + faq */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.about .who{grid-column:1/5;align-self:start;position:sticky;top:32px}
.about .who img{width:72px;height:72px;margin-bottom:28px;border-radius:2px}
.about .who h2{font-size:var(--fs-6);margin-bottom:24px}
.about .who p{font-size:var(--fs-2)}
.about .faq{grid-column:6/13}
.faq h2{font-size:var(--fs-6);margin-bottom:24px}
details{border-top:1px solid var(--c-rule)}details:last-of-type{border-bottom:1px solid var(--c-rule)}
summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;font:600 var(--fs-3)/1.3 var(--sans);letter-spacing:-.01em;position:relative}
summary::-webkit-details-marker{display:none}
summary::after,summary::before{content:"";position:absolute;right:6px;top:50%;width:16px;height:1.5px;background:var(--c-ink);transition:transform .25s}
summary::before{transform:rotate(90deg)}details[open] summary::before{transform:rotate(0)}
details p{padding:0 48px 20px 0;font-size:var(--fs-2)}
/* contact */
.contact{border-top:1px solid var(--c-ink)}
.contact .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.contact h2{grid-column:1/9;font-size:var(--fs-7);line-height:.95;letter-spacing:-.04em}
.contact .side{grid-column:9/13}.contact .side p{font-size:var(--fs-2)}
.contact .mail{display:block;grid-column:1/-1;margin-top:56px;font:600 var(--fs-6)/1.05 var(--sans);letter-spacing:-.03em;text-decoration:none;overflow-wrap:anywhere;padding-bottom:12px;border-bottom:2px solid var(--c-ink);transition:color .2s}
.contact .mail:hover{color:var(--c-ink-muted)}
.btnrow2{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:20px}
.btnrow2 .btn:hover{background:var(--c-ink);color:var(--c-bg)}
/* footer */
footer{background:var(--c-ink);color:var(--c-inverse-muted);padding:64px 0 40px;font-size:var(--fs-2)}
footer .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
footer .brand{color:var(--c-bg);grid-column:1/5}
footer address,footer .legal,footer .mailcol{font-style:normal;grid-column:span 4}
footer .mailcol{grid-column:5/9}footer address{grid-column:9/13}
footer .legal{grid-column:1/-1;border-top:1px solid var(--c-inverse-rule);margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .legal p{margin:0}
footer a{color:var(--c-bg)}
/* demo banner (portfolio pages) */
.demo-bar{background:var(--c-ink);color:var(--c-bg);font:500 var(--fs-1)/1.4 var(--sans);position:relative;z-index:10}
.demo-bar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px;align-items:center}
.demo-bar strong{color:var(--c-action);font-weight:600}
.demo-bar a{color:var(--c-bg);white-space:nowrap}
@media (max-width:900px){
 .top nav{display:none}
 .hero{padding:128px 0 56px}.hero .topo{width:150vw;right:-60%;top:60px;opacity:.7}
 .hero h1,.hero .intro,.hero .facts{grid-column:1/-1}.hero .intro,.hero .facts{margin-top:32px}
 .head{margin-bottom:36px}.head h2,.head p{grid-column:1/-1}
 .work .feature figure,.work .feature .cap{grid-column:1/-1}
 .work .list{gap:48px}.work .item:nth-child(n){grid-column:1/-1;margin-top:0}
 .svc>header,.svc .tiers,.notes p,.notes .btnrow{grid-column:1/-1}
 .tier{grid-template-columns:1fr auto;gap:6px 16px}
 .tier .inc{grid-column:1/2;grid-row:2}.tier .t{grid-column:1/2;grid-row:3}.tier .p{grid-row:1/4;grid-column:2;align-self:start}
 .steps ol{grid-template-columns:1fr}.steps li,.steps li+li{padding:28px 0;border-left:0;border-bottom:1px solid var(--c-rule)}
 .steps li::before{font-size:var(--fs-6);margin-bottom:12px}
 .terms .col{grid-column:1/-1}.terms .col+.col{margin-top:32px}
 .about .who,.about .faq{grid-column:1/-1;position:static}.about .faq{margin-top:56px}
 .contact h2,.contact .side{grid-column:1/-1}
 footer .brand,footer .mailcol,footer address{grid-column:1/-1}
 .demo-bar .wrap{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.topo path{stroke-dashoffset:0}}
/* sample pages */
.subtop{background:var(--c-bg);border-bottom:1px solid var(--c-rule)}.subtop .wrap{display:flex;justify-content:space-between;align-items:center;height:76px}
.subtop .brand{color:var(--c-ink)}
.sample-h{padding:96px 0 56px}.sample-h .meta{font:500 var(--fs-2)/1.4 var(--sans);color:var(--c-ink-muted);margin-bottom:24px}
.sample-h h1{font-size:var(--fs-7);line-height:.95;letter-spacing:-.04em;max-width:16ch;margin-bottom:32px}
.sample-h .lede{max-width:58ch}
.sample-b{padding:0 0 var(--sec)}
.state{display:inline-flex;gap:10px;align-items:center;font:600 var(--fs-2) var(--sans);margin:40px 0 14px}
.state::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-danger-strong)}.state.ok::before{background:var(--c-success)}
.tw{overflow-x:auto;border:1px solid var(--c-ink);background:var(--c-surface)}
table{width:100%;border-collapse:collapse;font:400 var(--fs-2)/1.4 var(--sans);font-variant-numeric:tabular-nums}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--c-rule);white-space:nowrap}th{background:var(--c-ink);color:var(--c-bg);font-weight:600}
tr.bad td{background:var(--c-danger-bg)}td.flag{color:var(--c-danger);font-style:italic;font-family:var(--serif);white-space:normal;min-width:220px}
.cap2{font:italic 400 var(--fs-2) var(--serif);color:var(--c-ink-muted);margin-top:10px}
.trio{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:72px;border-top:1px solid var(--c-ink)}
.trio>div{grid-column:span 4;padding-top:28px}
.trio h3{font-size:var(--fs-4);margin-bottom:16px}
.dash{list-style:none;margin:0;padding:0}.dash li{padding:10px 0 10px 24px;border-bottom:1px solid var(--c-rule);position:relative;font-size:var(--fs-2)}.dash li::before{content:"";position:absolute;left:0;top:20px;width:12px;height:1px;background:var(--c-ink)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-rule);border:1px solid var(--c-rule);margin-bottom:12px}
.kpi div{background:var(--c-surface);padding:16px;font:400 var(--fs-1) var(--sans);color:var(--c-ink-muted)}.kpi b{display:block;font:700 var(--fs-5)/1.1 var(--sans);color:var(--c-ink);letter-spacing:-.02em}
.langs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--c-ink)}
.langs>div{padding:28px 28px 32px 0}.langs>div+div{padding-left:28px;border-left:1px solid var(--c-rule)}
.langs .code{font:600 var(--fs-2) var(--sans);color:var(--c-ink-muted);margin-bottom:20px;display:block}
.langs .src .code{color:var(--c-ink)}
.langs h3{font-size:var(--fs-5);margin-bottom:20px}
.langs p{font-size:var(--fs-2)}
.tnotes{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:72px;background:var(--c-ink);color:var(--c-bg);padding:56px clamp(24px,4vw,56px)}
.tnotes h2{grid-column:1/5;font-size:var(--fs-6);color:var(--c-action)}
.tnotes ol{grid-column:5/13;margin:0;padding-left:1.2em;font-size:var(--fs-2)}.tnotes li{padding:8px 0 8px 8px;border-bottom:1px solid var(--c-inverse-rule)}
.backrow{margin-top:56px;display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:var(--fs-2);color:var(--c-ink-muted)}.backrow .btn:hover{background:var(--c-ink);color:var(--c-bg)}
@media(max-width:900px){.trio>div{grid-column:1/-1}.langs{grid-template-columns:1fr}.langs>div,.langs>div+div{padding:24px 0;border-left:0;border-bottom:1px solid var(--c-rule)}.tnotes h2,.tnotes ol{grid-column:1/-1}}
@media (max-width:900px){
 .hero .grid,.head,.work .feature,.work .list,.svc,.notes,.terms .cols,.about,.contact .grid,footer .grid,.trio,.tnotes{grid-template-columns:minmax(0,1fr);column-gap:0}
 .hero .grid>*,.head>*,.work .feature>*,.work .list>*,.svc>*,.notes>*,.terms .cols>*,.about>*,.contact .grid>*,footer .grid>*,.trio>*,.tnotes>*{grid-column:1/-1!important}
 .facts div{grid-template-columns:1fr;gap:2px}.facts span{text-align:left}
 .top .btn{min-height:40px;padding:8px 14px}
}
/* blog */
.posts{list-style:none;padding:0;margin:0 0 72px;border-top:1px solid var(--c-rule)}
.posts li{padding:32px 0;border-bottom:1px solid var(--c-rule)}
.posts .meta,.post .meta{font:500 var(--fs-2)/1.4 var(--sans);color:var(--c-ink-muted);margin-bottom:8px}
.posts h2{font-size:var(--fs-5);margin:0 0 8px}.posts h2 a{text-decoration:none;color:var(--c-ink)}
.posts .slot{opacity:.6;border-left:3px dashed var(--c-action);padding-left:20px}
.post{max-width:68ch;margin:0 auto;padding-bottom:72px}.post h2{font-size:var(--fs-5);margin:48px 0 12px}.post p,.post li{font-size:var(--fs-3);line-height:1.7}
.post .ctabox{margin-top:56px;padding:28px;border:1px solid var(--c-rule);border-radius:12px}
.wrap.sample-h{padding-left:var(--m);padding-right:var(--m)}
/* tools */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-bottom:72px}
.tool label{display:block;font:600 var(--fs-2)/1.4 var(--sans);margin:0 0 8px}
.tool input[type=url],.tool input[type=text],.tool textarea,.tool select{width:100%;font:inherit;font-size:var(--fs-2);padding:12px 14px;border:1px solid var(--c-rule);border-radius:8px;background:var(--c-field);color:var(--c-ink)}
.tool textarea{min-height:180px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-1)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.row>*{flex:1}.row .btn{flex:0 0 auto;border:0;cursor:pointer;font:inherit}
.phone{width:390px;max-width:100%;height:760px;border:12px solid var(--c-ink);border-radius:36px;overflow:hidden;background:var(--c-field);position:relative;margin:0 auto}
.phone iframe{width:390px;height:100%;border:0;display:block}
.phone .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;font:500 var(--fs-2)/1.5 var(--sans);color:var(--c-ink-muted);background:var(--c-field)}
.note{font:400 var(--fs-1)/1.5 var(--sans);color:var(--c-ink-muted);margin-top:10px}
.checks{list-style:none;padding:0;margin:0 0 24px}.checks li{border-bottom:1px solid var(--c-rule);padding:12px 0}
.checks label{display:flex;gap:12px;font-weight:500;margin:0;cursor:pointer}.checks input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--c-ink)}
.checks small{display:block;color:var(--c-ink-muted);font-weight:400}
.score{font:700 var(--fs-6)/1 var(--sans);color:var(--c-ink)}.bar{height:10px;background:var(--c-rule);border-radius:99px;overflow:hidden;margin:12px 0}.bar i{display:block;height:100%;width:0;background:var(--c-action);transition:width .3s}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:16px 0}.opts label{display:flex;gap:8px;font-weight:500}
.tbl{overflow:auto;max-height:340px;border:1px solid var(--c-rule);border-radius:8px;background:var(--c-field)}.tbl table{border-collapse:collapse;font-size:var(--fs-1);width:100%}.tbl th,.tbl td{border-bottom:1px solid var(--c-rule);padding:6px 8px;text-align:left;white-space:pre-wrap;vertical-align:top}.tbl th{background:var(--c-ink);color:var(--c-bg);position:sticky;top:0}
.tbl td.chg{background:var(--c-changed-bg)}.tbl td.flag{background:var(--c-danger-bg-soft)}.sum{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.sum div{border:1px solid var(--c-rule);border-radius:8px;padding:12px;background:var(--c-field)}.sum b{display:block;font-size:var(--fs-5);color:var(--c-ink)}
.privacy{border-left:3px solid var(--c-action);padding:10px 16px;background:var(--c-field);font:500 var(--fs-2)/1.5 var(--sans)}
.toolcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:72px}.toolcards a{display:block;border:1px solid var(--c-rule);border-radius:12px;padding:28px;text-decoration:none;color:var(--c-ink);background:var(--c-field)}.toolcards h2{font-size:var(--fs-5);margin:0 0 8px}
@media(max-width:900px){.tool,.toolcards{grid-template-columns:1fr}.sum{grid-template-columns:1fr 1fr}.opts{grid-template-columns:1fr}.phone{height:640px}}
.tool button.btn{font-family:var(--sans);font-weight:600;font-size:var(--fs-2)}

/* ===== v3 redesign (proposal-live.md) ===== */
/* proposal tokens: primitive -> semantic */

.p-hero{background:var(--c-inverse-bg);color:var(--c-inverse-ink);position:relative;overflow:hidden;padding:136px 0 var(--s-9)}
.p-hero .topo{position:absolute;right:-24%;top:-150px;width:min(64vw,940px);stroke:var(--navy-600)}
.p-hero .topo path{animation:none;stroke-dashoffset:0}
.p-hero .g{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5)}
.p-hero .loc{grid-column:1/-1;font:500 var(--fs-2)/1.4 var(--sans);color:var(--c-action);margin-bottom:var(--s-5)}
.p-hero h1{grid-column:1/9;grid-row:2;font-size:var(--fs-7);line-height:.95;letter-spacing:-.045em}
.p-hero .sub{grid-row:3;grid-column:1/7;margin-top:var(--s-6);font-size:var(--fs-4);line-height:1.45;color:var(--navy-200)}
.p-hero .act{align-self:start;grid-row:4;grid-column:1/7;display:flex;gap:var(--s-5);align-items:center;margin-top:var(--s-6);font-family:var(--sans)}
.p-hero .act small{font:italic 400 var(--fs-2) var(--serif);color:var(--c-inverse-muted)}
.ledger{grid-column:8/13;grid-row:3/5;align-self:start;margin-top:var(--s-6);border-top:2px solid var(--c-action);font-family:var(--sans)}
.ledger h2{font:600 var(--fs-2)/1 var(--sans);letter-spacing:0;color:var(--c-action);padding:var(--s-4) 0 var(--s-3)}
.ledger a{display:grid;grid-template-columns:1fr auto auto;gap:var(--s-4);align-items:baseline;padding:var(--s-4) 0;border-bottom:1px solid var(--navy-600);text-decoration:none}
.ledger b{font:600 var(--fs-3) var(--sans)}.ledger span{font:400 var(--fs-1) var(--sans);color:var(--c-inverse-muted)}
.ledger em{font:700 var(--fs-5)/1 var(--sans);font-style:normal;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;min-width:4.2ch;text-align:right}
.terms3{grid-column:1/-1;margin-top:var(--s-9);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--navy-600)}
.terms3 p{margin:0;padding:var(--s-5) var(--s-5) 0 0;font-size:var(--fs-2);color:var(--navy-200)}.terms3 p+p{padding-left:var(--s-5);border-left:1px solid var(--navy-600)}
.terms3 b{display:block;font:600 var(--fs-3) var(--sans);color:var(--c-inverse-ink);margin-bottom:var(--s-1)}
/* services */
.p-svc{background:var(--c-surface);padding:var(--s-10) 0}
.p-svc .hd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);margin-bottom:var(--s-8)}
.p-svc .hd h2{grid-column:1/7;font-size:var(--fs-6);line-height:1.02}.p-svc .hd p{grid-column:8/13;align-self:end;color:var(--c-ink-muted);margin:0}
.lead-svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);background:var(--c-inverse-bg);color:var(--c-inverse-ink);padding:var(--s-8) var(--s-7)}
.lead-svc header{grid-column:1/5}.lead-svc header h3{font-size:var(--fs-5);margin-bottom:var(--s-4)}.lead-svc header p{color:var(--navy-200);font-size:var(--fs-2)}
.lead-svc .tierx{grid-column:span 4;border-top:2px solid var(--c-action);padding-top:var(--s-5)}
.tierx .tt{display:flex;justify-content:space-between;align-items:baseline}
.tierx b{font:600 var(--fs-4) var(--sans)}.tierx .pr{font:700 var(--fs-6)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums}
.tierx .meta{font:500 var(--fs-1) var(--sans);color:var(--c-inverse-muted);margin:var(--s-3) 0 var(--s-4)}
.tierx ul{list-style:none;margin:0;padding:0;font-size:var(--fs-2)}.tierx li{padding:var(--s-2) 0;border-bottom:1px solid var(--navy-600)}
.rest{margin-top:var(--s-8);border-top:1px solid var(--c-ink)}
.rest .row{display:grid;grid-template-columns:4fr 4fr 2fr 2fr;gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--c-rule);align-items:baseline}
.rest .row.h{font:600 var(--fs-1) var(--sans);color:var(--c-ink-muted);padding:var(--s-3) 0}
.rest h3{font-size:var(--fs-4)}.rest .row p{margin:var(--s-2) 0 0;font-size:var(--fs-2);color:var(--c-ink-muted)}
.rest .t{font:400 var(--fs-2) var(--serif)}.rest .t b{font:600 var(--fs-3) var(--sans);display:block}
.rest .pr{text-align:right;font:700 var(--fs-5)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.rest .pr small{display:block;font:italic 400 var(--fs-1)/1.4 var(--serif);color:var(--c-ink-muted);letter-spacing:0;margin-top:var(--s-2)}
.foot-n{display:flex;gap:var(--s-5);align-items:center;margin-top:var(--s-7);font-size:var(--fs-2);color:var(--c-ink-muted)}
@media(max-width:900px){
 .p-hero .g{grid-template-rows:none}
 .p-hero{padding:120px 0 var(--s-8)}.p-hero .topo{width:170vw;right:-95%;top:-10px;opacity:.75}
 .p-hero .g>*{grid-column:1/-1!important;grid-row:auto!important}.p-hero .sub{margin-top:var(--s-5)}
 .p-hero .act{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
 .ledger{margin-top:var(--s-7)}.terms3{grid-template-columns:1fr;margin-top:var(--s-7)}.terms3 p,.terms3 p+p{padding:var(--s-4) 0;border-left:0;border-bottom:1px solid var(--navy-600)}
}
.p-hero .terms3 a{color:var(--c-action);font:500 var(--fs-2) var(--sans)}
.ledger a:hover b,.ledger a:focus-visible b{text-decoration:underline;text-underline-offset:4px}
/* buttons: visible hover + focus on any background */
.btn{transition:background-color .15s,color .15s,box-shadow .15s}
.btn:hover,.btnrow .btn:hover,.btnrow2 .btn:hover,.backrow .btn:hover{background:var(--sand-100);color:var(--navy-800);box-shadow:inset 0 0 0 2px var(--navy-800);text-decoration:underline;text-underline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--navy-800);color:var(--stone-100)}
.btn-dark:hover{background:var(--navy-600)!important;color:var(--stone-50)!important;box-shadow:inset 0 0 0 2px var(--sand-500)!important}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sand-500);outline-offset:2px;box-shadow:0 0 0 6px var(--navy-800)}
.p-svc .foot-n a.ul{color:var(--c-ink)}
/* how we build */
.build{padding:var(--s-10) 0;background:var(--c-bg)}
.build .hd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);margin-bottom:var(--s-8)}
.build .hd h2{grid-column:1/7;font-size:var(--fs-6);line-height:1.02}.build .hd p{grid-column:8/13;align-self:end;margin:0;color:var(--c-ink-muted);font-size:var(--fs-3)}
.build .hd strong{color:var(--c-ink);font-weight:600}
.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-5)}
.bgrid figure{margin:0}.bgrid .feat{grid-column:1/-1}
.bgrid img{width:100%;height:auto;display:block;border:1px solid var(--c-rule);border-radius:2px;box-shadow:var(--shadow-figure)}
.bgrid figcaption{margin-top:var(--s-4);font:400 var(--fs-2)/1.5 var(--sans);color:var(--c-ink-muted)}.bgrid figcaption b{display:block;font:600 var(--fs-4)/1.2 var(--sans);color:var(--c-ink);margin-bottom:var(--s-1)}
.caption-note{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--c-rule);font:italic 400 var(--fs-2) var(--serif);color:var(--c-ink-muted)}
.mbar{display:none}
@media(max-width:900px){
 .top nav{display:flex;flex-wrap:wrap;gap:var(--s-4);font-size:var(--fs-2)} /* no-JS fallback: links stay visible */
 .top .wrap{flex-wrap:wrap;height:auto;min-height:72px;padding-top:var(--s-3);padding-bottom:var(--s-3)}
 .js .top nav{display:none}
 .top .top-cta{display:none}
 .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));background:var(--navy-800);border-top:1px solid var(--navy-600)}
 .mbar .btn{width:100%;justify-content:center}
 body{padding-bottom:76px}
 .p-svc,.build{padding:var(--s-8) 0}
 .p-svc .hd,.build .hd{grid-template-columns:1fr;gap:var(--s-4)}.p-svc .hd>*,.build .hd>*{grid-column:1/-1!important}
 .lead-svc{grid-template-columns:1fr;padding:var(--s-6) var(--s-5)}.lead-svc>*{grid-column:1/-1!important}
 .rest .row{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-4)}
 .rest .row.h{display:none}.rest .row>div:first-child{grid-column:1/-1}.rest .row>div:first-child:empty{display:none}
 .rest .row .t:nth-child(2){grid-column:1/2}.rest .row span.t{grid-column:1/2;color:var(--c-ink-muted);font-size:var(--fs-1)}.rest .row .pr{grid-column:2;grid-row:span 2;align-self:center}
 .foot-n{flex-direction:column;align-items:flex-start}
 .bgrid{grid-template-columns:1fr;gap:var(--s-6)}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

.mbar{transition:transform .2s}.mbar.mbar-hide{transform:translateY(110%)}@media (prefers-reduced-motion:reduce){.mbar{transition:none}}

/* ===== v4 direction C "Poster" (design/directions/README.md + src/c-poster.html) ===== */
body{font-weight:500}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em}
h3,.lead-svc header h3,.rest h3,.tierx b,.bgrid figcaption b{font-family:var(--sans);font-weight:800;letter-spacing:-.01em}
.p-svc .hd h2,.build .hd h2,.tierx .pr,.rest .pr{font-family:var(--display);font-weight:800}
em,i,.caption-note,.p-svc .rest .pr small{font-style:normal}
.top-poster{color:var(--c-poster-ink)}
.top-poster .brand{font-family:var(--display);font-weight:800}
.top-poster nav a{opacity:1;font-weight:700}
.top-poster .btn{background:var(--c-poster-ink);color:var(--c-poster-bg)}
.top-poster .btn:hover{background:var(--paper-0);color:var(--c-poster-ink);box-shadow:inset 0 0 0 2px var(--c-poster-ink)}
.poster{background:var(--c-poster-bg);color:var(--c-poster-ink);position:relative;overflow:hidden;padding:104px 0 var(--s-8)}
.poster .wrap{position:relative}
.big{margin:var(--s-5) 0 0;font:800 clamp(4.4rem,1rem + 13vw,15rem)/.82 var(--display);letter-spacing:-.05em}
.big span{display:block}.big .r{text-align:right}
.stamp{position:absolute;left:clamp(0px,4vw,100px);top:clamp(180px,17vw,260px);width:170px;height:170px;margin:0;border-radius:50%;background:var(--c-poster-ink);color:var(--c-poster-bg);display:grid;place-items:center;text-align:center;font:800 1.1rem/1.15 var(--display);transform:rotate(12deg)}
.prow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-7);border-top:3px solid var(--c-poster-ink);padding-top:var(--s-5)}
.prow h1{grid-column:1/6;font:700 var(--fs-5)/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}
.prow>p{grid-column:6/10;margin:0;font-size:var(--fs-3)}
.pact{grid-column:10/13;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-2)}
.pact small{font:600 var(--fs-1) var(--sans)}
.plist{list-style:none;padding:0;margin:var(--s-7) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--c-poster-ink)}
.plist li+li{border-left:1px solid var(--c-poster-ink)}
.plist a{display:block;padding:var(--s-4) var(--s-4) var(--s-5);text-decoration:none;font:700 var(--fs-2)/1.3 var(--sans)}
.plist li:first-child a{padding-left:0}
.plist b{display:block;font:800 var(--fs-6)/1 var(--display);letter-spacing:-.02em;margin-bottom:var(--s-2)}
.plist span{display:block;font:600 var(--fs-1) var(--sans);margin-top:var(--s-1)}
.plist a:hover{text-decoration:underline;text-underline-offset:4px}
.ploc{margin:var(--s-6) 0 0;padding-top:var(--s-4);border-top:1px solid var(--c-poster-ink);font:600 var(--fs-1)/1.5 var(--sans)}
.ploc a{color:inherit;text-underline-offset:3px}
.poster .btn-dark{background:var(--c-poster-ink);color:var(--c-poster-bg)}
.poster .btn-dark:hover{background:var(--paper-0)!important;color:var(--c-poster-ink)!important;box-shadow:inset 0 0 0 2px var(--c-poster-ink)!important}
.poster a:focus-visible,.top-poster a:focus-visible,.top-poster button:focus-visible{outline:3px solid var(--c-poster-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--paper-0)}
.p-svc{background:var(--paper-0)}
.lead-svc{background:var(--c-poster-ink)}
.lead-svc .tierx{border-top-width:3px}
.rest{border-top:3px solid var(--c-ink)}
.build .bgrid img{border:3px solid var(--c-ink);border-radius:0;box-shadow:none}
.caption-note{font:600 var(--fs-2) var(--sans)}
.terms{border-top:0}
@media(max-width:900px){
 .poster{padding:96px 0 var(--s-7)}
 .big{font-size:clamp(4rem,1rem + 13vw,6rem);line-height:.85}
 .stamp{position:static;width:120px;height:120px;margin-top:var(--s-5);font-size:var(--fs-1)}
 .prow>*{grid-column:1/-1!important}.pact{align-items:flex-start}
 .plist{grid-template-columns:repeat(2,minmax(0,1fr))}
 .plist li{border-bottom:1px solid var(--c-poster-ink)}.plist li+li{border-left:0}.plist li:nth-child(even){border-left:1px solid var(--c-poster-ink)}.plist li:nth-child(even) a{padding-left:var(--s-4)}.plist li:nth-child(odd) a{padding-left:0}
}
.about .who h2{font-size:clamp(1.75rem,1rem + 2vw,2.5rem);overflow-wrap:break-word}
.bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.stamp{top:clamp(150px,13.5vw,205px)}
@media(max-width:900px){.bgrid{grid-template-columns:1fr}}
.about .who h2{font-size:clamp(1.5rem,.9rem + 1.3vw,1.875rem);overflow-wrap:normal;letter-spacing:-.02em}
@media(max-width:900px){.top-poster .brand{font-size:var(--fs-2);gap:var(--s-2)}.top-poster .brand img{width:30px;height:30px}.top-poster .wrap{flex-wrap:nowrap}}

/* QA fixes: no horizontal overflow at 390px */
.hero,.p-hero{overflow-x:clip}
.tool>*{min-width:0}.phone{max-width:100%}.phone iframe{max-width:100%}
.prose table,article table{display:block;max-width:100%;overflow-x:auto}
@media(max-width:600px){.sample-h h1{font-size:clamp(1.75rem,7.6vw,2.4rem);overflow-wrap:break-word;hyphens:manual}}
.brand{min-height:44px}@media(max-width:900px){footer a[href^="mailto:"]{display:inline-block;padding-block:10px}}