:root{
  --paper:#F3F2EE; --paper-2:#E9E7E0; --surface:#FFFFFF;
  --ink:#14161B; --ink-2:#4A4D55; --ink-3:#6B6E76; --rule:#D6D3CA;
  --gold:#C9A84C; --gold-hi:#E8CC7A; --gold-text:#7A5F17; --gold-wash:#F4ECD3;
  --band:#111317; --band-2:#1B1E24; --band-text:#EEEBE3; --band-muted:#A9A69E; --band-rule:#2E3139;
  --focus:#1F5FD1; --ok:#256B45; --err:#A1281C;
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --wrap:1200px; --gut:clamp(20px,4vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1014; --paper-2:#1A1D23; --surface:#16191E;
    --ink:#ECE9E1; --ink-2:#BDBAB2; --ink-3:#99968F; --rule:#2B2F37;
    --gold-text:#E2C46F; --gold-wash:#2A2517; --band:#07080A; --band-2:#14161B; --band-rule:#262931;
    --focus:#7FA8FF; --ok:#6FCF97; --err:#FF8A7A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1014; --paper-2:#1A1D23; --surface:#16191E;
  --ink:#ECE9E1; --ink-2:#BDBAB2; --ink-3:#99968F; --rule:#2B2F37;
  --gold-text:#E2C46F; --gold-wash:#2A2517; --band:#07080A; --band-2:#14161B; --band-rule:#262931;
  --focus:#7FA8FF; --ok:#6FCF97; --err:#FF8A7A; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important; transition:none !important}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6}
body.lock{overflow:hidden}
img,svg{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.skip{position:absolute; left:-9999px; top:8px; background:var(--gold); color:#14161B; padding:10px 16px; z-index:200; font-weight:600}
.skip:focus{left:12px}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

h1,h2,h3,h4{font-family:var(--display); margin:0; line-height:1.04; letter-spacing:-0.01em}
h2{font-size:clamp(34px,5vw,58px); font-weight:800; font-variation-settings:"wdth" 78; max-width:18ch}
h3{font-size:22px; font-weight:700; line-height:1.2; font-variation-settings:"wdth" 92}
p{margin:0}
.lede{font-size:clamp(18px,1.6vw,20px); color:var(--ink-2); max-width:60ch; margin-top:20px}
.section{padding:clamp(72px,10vw,120px) 0}
.section-head{margin-bottom:clamp(36px,5vw,56px); display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px}
.section-head > div{max-width:720px}
.dark{background:var(--band); color:var(--band-text)}
.dark .lede{color:var(--band-muted)}
.white{background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; font:600 16px/1 var(--body); text-decoration:none; border-radius:4px; border:1.5px solid transparent; cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .15s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold); color:#14161B}
.btn-gold:hover{background:var(--gold-hi)}
.btn-line{border-color:currentColor; background:transparent}
.btn-line:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.btn-ink{background:var(--ink); color:var(--paper)}
.btn-ink:hover{background:color-mix(in srgb,var(--ink) 85%,var(--gold))}
.btn svg{width:18px; height:18px}
.btn[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--ink)}
.dark .btn[aria-pressed="true"]{background:#2A2517; color:var(--band-text)}
.link{color:var(--gold-text); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; cursor:pointer}
.link:hover{text-decoration:underline; text-underline-offset:4px}
.dark .link{color:var(--gold-hi)}

/* progress + header */
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--gold); z-index:120}
.site-head{position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--band) 94%,transparent); color:var(--band-text); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--band-rule); padding-top:env(safe-area-inset-top,0px); margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; transition:min-height .25s var(--ease)}
.site-head.small .wrap{min-height:60px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:40px; height:40px}
.wm{font-family:var(--serif); font-size:21px; line-height:1; white-space:nowrap}
.wm b{color:var(--gold); font-weight:700}
.wm span{font-weight:400; margin-left:5px}
.nav{display:flex; align-items:center; gap:2px}
.nav > a,.nav > .dd > button{text-decoration:none; padding:10px 12px; font-size:15px; color:var(--band-muted); border-radius:4px; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.nav > a:hover,.nav > .dd > button:hover,.nav > a[aria-current="page"],.nav .dd.cur > button{color:var(--band-text)}
.nav > a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}
.nav .dd.cur > button{box-shadow:inset 0 -2px 0 var(--gold)}
.dd{position:relative}
.dd > button svg{width:12px; height:12px; transition:transform .2s}
.dd > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); width:min(720px,92vw); background:var(--band-2); border:1px solid var(--band-rule); border-radius:8px; padding:12px; display:none; grid-template-columns:1fr 1fr; gap:2px; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.mega.open{display:grid; animation:drop .18s var(--ease)}
@keyframes drop{from{opacity:0; transform:translate(-50%,-6px)} to{opacity:1; transform:translate(-50%,0)}}
.mega a{display:grid; grid-template-columns:36px 1fr; gap:12px; padding:12px; border-radius:6px; text-decoration:none; color:var(--band-text)}
.mega a:hover,.mega a:focus-visible{background:#262931}
.mega .mi{width:36px; height:36px; border-radius:50%; border:1.5px solid var(--gold); color:var(--gold); display:grid; place-items:center}
.mega .mi svg{width:18px; height:18px}
.mega b{display:block; font-size:15px; font-weight:600}
.mega small{display:block; font-size:13px; color:var(--band-muted); line-height:1.4; margin-top:2px}
.mega .all{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding:14px 12px 6px; border-top:1px solid var(--band-rule); margin-top:6px; font-size:14px; color:var(--band-muted)}
.head-actions{display:flex; align-items:center; gap:8px}
.icon-btn{width:44px; height:44px; display:inline-grid; place-items:center; border-radius:4px; border:1.5px solid var(--band-rule); background:none; color:var(--band-text); cursor:pointer; position:relative}
.icon-btn:hover{border-color:var(--band-muted)}
.icon-btn svg{width:20px; height:20px}
.badge{position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; border-radius:10px; background:var(--gold); color:#14161B; font-size:12px; font-weight:700; display:grid; place-items:center; padding:0 5px}
.badge[hidden]{display:none}
.head-actions .btn{min-height:44px; padding:0 18px; font-size:15px}
.menu-btn{display:none}
.t-sun{display:none} :root[data-theme="dark"] .t-sun{display:block} :root[data-theme="dark"] .t-moon{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .t-sun{display:block} :root:not([data-theme="light"]) .t-moon{display:none} }
@media (max-width:1040px){
  .site-head{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--band)}
  .menu-btn{display:inline-grid}
  .head-actions .btn{display:none}
  .nav{display:none; position:fixed; inset:0; top:var(--head-h,72px); background:var(--band); flex-direction:column; align-items:stretch; padding:12px var(--gut) 40px; overflow:auto; gap:0}
  .nav.open{display:flex}
  .nav > a,.nav > .dd > button{font-size:20px; padding:16px 2px; border-bottom:1px solid var(--band-rule); border-radius:0; width:100%; justify-content:space-between; box-shadow:none !important}
  .nav > a[aria-current="page"]{color:var(--gold)}
  .mega{position:static; transform:none; width:auto; box-shadow:none; grid-template-columns:1fr; border:0; padding:4px 0 12px; background:none}
  .mega.open{animation:none}
  .nav .mobile-cta{display:flex; margin-top:24px}
}
.nav .mobile-cta{display:none}

/* views */
#app{min-height:60vh}
.view{animation:viewin .35s var(--ease)}
@keyframes viewin{from{opacity:0} to{opacity:1}}
.page-hero{background:var(--band); color:var(--band-text); padding:clamp(56px,8vw,96px) 0 clamp(48px,7vw,80px); position:relative; overflow:hidden}
.page-hero h1{font-size:clamp(42px,7vw,92px); font-weight:850; font-variation-settings:"wdth" 70; line-height:.94; max-width:16ch; margin-top:14px}
.page-hero .lede{color:var(--band-muted)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--band-muted); list-style:none; padding:0; margin:0}
.crumbs a{color:var(--band-muted); text-decoration:none} .crumbs a:hover{color:var(--band-text); text-decoration:underline}
.crumbs li+li::before{content:"/"; margin-right:8px; color:var(--band-rule)}

/* home hero proof */
.hero{background:var(--band); color:var(--band-text); padding:clamp(40px,7vw,80px) 0 0; overflow:hidden}
.proof{position:relative; padding:clamp(40px,5vw,64px) clamp(24px,3vw,48px) clamp(36px,5vw,56px)}
.crop{position:absolute; width:28px; height:28px; pointer-events:none}
.crop::before,.crop::after{content:""; position:absolute; background:var(--gold)}
.crop::before{width:28px; height:1.5px} .crop::after{width:1.5px; height:28px}
.crop.tl{top:0;left:0} .crop.tl::before,.crop.tl::after{top:0;left:0}
.crop.tr{top:0;right:0} .crop.tr::before,.crop.tr::after{top:0;right:0}
.crop.bl{bottom:0;left:0} .crop.bl::before,.crop.bl::after{bottom:0;left:0}
.crop.br{bottom:0;right:0} .crop.br::before,.crop.br::after{bottom:0;right:0}
.bleed{position:absolute; inset:14px; border:1px dashed color-mix(in srgb,var(--gold) 35%,transparent); pointer-events:none}
.slug{position:absolute; top:-26px; left:40px; right:40px; display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--band-muted)}
.swatches{display:flex; gap:4px} .swatches i{width:14px; height:14px; display:block}
@media (prefers-reduced-motion: no-preference){
  .hero .crop{animation:crop-in .9s var(--ease) both}
  .hero .crop.tr{animation-delay:.06s} .hero .crop.bl{animation-delay:.12s} .hero .crop.br{animation-delay:.18s}
  .hero .bleed{animation:viewin 1.2s .4s both}
  @keyframes crop-in{from{opacity:0; transform:scale(2.4)} to{opacity:1; transform:none}}
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:end}
@media (max-width:1000px){ .hero-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .slug{display:none} .bleed{inset:8px} }
@media (max-width:520px){ .hero h1{font-size:clamp(38px,11.5vw,56px)} .head-actions{gap:6px} .head-actions .icon-btn{width:42px;height:42px} .wm{font-size:18px} .brand img{width:34px;height:34px} }
.hero h1{font-size:clamp(46px,8.4vw,124px); font-weight:850; font-variation-settings:"wdth" 68; line-height:.9; letter-spacing:-0.015em}
.hero h1 .l2{display:block; color:var(--band-text)}
.hero h1 .mkt{display:inline-block; transition:opacity .25s, transform .25s var(--ease)}
.hero h1 .mkt.swap{opacity:0; transform:translateY(.15em)}
.hero .lede{color:var(--band-muted); margin-top:28px; max-width:58ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-cta .btn-line{color:var(--band-text)}
.market-card{border:1px solid var(--band-rule); background:var(--band-2); border-radius:8px; padding:20px}
.market-card p.q{font-size:14px; color:var(--band-muted); margin-bottom:12px}
.mk-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:var(--band); padding:4px; border-radius:6px}
.mk-tabs button{min-height:40px; border:0; border-radius:4px; background:none; color:var(--band-muted); font-weight:600; font-size:14px; cursor:pointer}
.mk-tabs button[aria-selected="true"]{background:var(--gold); color:#14161B}
.mk-list{list-style:none; margin:16px 0 0; padding:0; font-size:14px}
.mk-list li{display:grid; grid-template-columns:18px 1fr; gap:10px; padding:9px 0; border-top:1px solid var(--band-rule); color:var(--band-text)}
.mk-list svg{width:16px; height:16px; color:var(--gold); margin-top:3px}
.marquee{border-top:1px solid var(--band-rule); margin-top:clamp(40px,6vw,64px); padding:18px 0; overflow:hidden; position:relative; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex; gap:10px; width:max-content; animation:scroll 60s linear infinite}
.marquee:hover .track,.marquee.paused .track{animation-play-state:paused}
.marquee span{font-size:14px; padding:7px 14px; border:1px solid var(--band-rule); border-radius:999px; white-space:nowrap; color:var(--band-text)}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee .track{flex-wrap:wrap; width:auto} .marquee{mask-image:none} .marquee .dup{display:none} }

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--ink)}
.stats div{padding:24px 20px 24px 0; border-bottom:1px solid var(--rule)}
.stats dd{margin:0; font-family:var(--display); font-size:clamp(44px,5.5vw,72px); font-weight:850; font-variation-settings:"wdth" 70; line-height:1; font-variant-numeric:tabular-nums}
.stats dt{font-size:15px; color:var(--ink-2); margin-top:8px}
.stats div{display:flex; flex-direction:column-reverse; justify-content:flex-end}
@media (max-width:760px){ .stats{grid-template-columns:1fr 1fr} }

/* problem → solution */
.ps{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,56px)}
@media (max-width:900px){ .ps{grid-template-columns:1fr} }
.ps-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.ps-list button{width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--rule); padding:18px 40px 18px 0; font-size:18px; font-weight:600; cursor:pointer; position:relative; color:var(--ink-2); line-height:1.35}
.ps-list button::after{content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:translateY(-50%) rotate(45deg); opacity:.4}
.ps-list button[aria-selected="true"]{color:var(--ink)}
.ps-list button[aria-selected="true"]::after{opacity:1; color:var(--gold-text)}
.ps-list button[aria-selected="true"]::before{content:""; position:absolute; left:-16px; top:14px; bottom:14px; width:3px; background:var(--gold)}
.ps-panel{background:var(--band); color:var(--band-text); border-radius:8px; padding:clamp(24px,4vw,44px); min-height:100%}
.ps-panel .tag{font-size:14px; color:var(--gold-hi); font-weight:600}
.ps-panel h3{font-size:clamp(24px,3vw,32px); font-variation-settings:"wdth" 80; font-weight:800; margin:10px 0 16px}
.ps-panel p{color:var(--band-muted); max-width:56ch}
.ps-panel ul{list-style:none; padding:0; margin:22px 0 26px}
.ps-panel li{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--band-rule)}
.ps-panel li svg{width:18px; height:18px; color:var(--gold); margin-top:4px}
.ps-panel .row{display:flex; flex-wrap:wrap; gap:12px}
.ps-panel .btn-line{color:var(--band-text)}

/* service cards */
.filters{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:42px; padding:0 16px; border:1.5px solid var(--rule); border-radius:999px; background:transparent; color:var(--ink); font-size:15px; font-weight:500; cursor:pointer}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.dark .chip{border-color:var(--band-rule); color:var(--band-text)}
.dark .chip[aria-pressed="true"]{background:var(--gold); color:#14161B; border-color:var(--gold)}
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1100px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .cards{grid-template-columns:1fr} }
.card{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:24px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s, transform .2s var(--ease)}
.card:hover{border-color:var(--gold); transform:translateY(-2px)}
.card[hidden]{display:none}
.card .ci{width:48px; height:48px; border-radius:50%; background:var(--band); color:var(--gold); display:grid; place-items:center}
.card .ci svg{width:22px; height:22px}
.card h3 a{text-decoration:none}
.card h3 a::after{content:""; position:absolute; inset:0; border-radius:8px}
.card p{color:var(--ink-2); font-size:15px; flex:1}
.card .card-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative; z-index:1; padding-top:8px; border-top:1px solid var(--rule)}
.card .card-foot .more{font-size:14px; color:var(--gold-text); font-weight:600}
.add{min-height:38px; padding:0 12px; font-size:14px; border-radius:4px; border:1.5px solid var(--rule); background:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ink)}
.add svg{width:14px; height:14px}
.add:hover{border-color:var(--gold)}
.add[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#14161B}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags span{font-size:12px; padding:3px 9px; border-radius:999px; background:var(--paper-2); color:var(--ink-2)}

/* team builder */
.builder{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,56px); align-items:start}
@media (max-width:960px){ .builder{grid-template-columns:1fr} }
.roles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (max-width:520px){ .roles{grid-template-columns:1fr} }
.role{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center; text-align:left; min-height:72px; padding:14px 16px; border:1.5px solid var(--band-rule); border-radius:6px; background:var(--band-2); color:var(--band-text); cursor:pointer}
.role:hover{border-color:var(--band-muted)}
.role .box{width:22px; height:22px; border-radius:4px; border:1.5px solid var(--band-muted); display:grid; place-items:center; grid-row:span 2}
.role .box svg{width:14px; height:14px; opacity:0}
.role b{font-size:16px; font-weight:600}
.role small{font-size:13px; color:var(--band-muted)}
.role[aria-pressed="true"]{border-color:var(--gold); background:#231F14}
.role[aria-pressed="true"] .box{background:var(--gold); border-color:var(--gold); color:#14161B}
.role[aria-pressed="true"] .box svg{opacity:1}
.summary-card{border:1px solid var(--band-rule); border-radius:8px; padding:28px; background:var(--band-2); position:sticky; top:96px}
.meter{display:flex; gap:4px; margin:18px 0 10px}
.meter i{flex:1; height:8px; border-radius:2px; background:var(--band-rule); transition:background .25s}
.meter i.on{background:var(--gold)}
.summary-card .count{font-family:var(--display); font-size:56px; font-weight:850; font-variation-settings:"wdth" 70; line-height:1}
.summary-card .count small{font-size:20px; color:var(--band-muted); font-weight:500}
.summary-card p{color:var(--band-muted); font-size:15px; margin-top:6px}
.summary-card ul{list-style:none; padding:0; margin:18px 0 22px; font-size:15px}
.summary-card li{padding:7px 0; border-top:1px solid var(--band-rule); color:var(--band-text)}
.summary-card li.none{color:var(--band-muted)}
.summary-card .btn{width:100%}
.summary-card .reco{font-size:14px; color:var(--gold-hi); margin-top:14px}

/* process stepper */
.steps-nav{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; list-style:none; margin:0; padding:0}
.steps-nav::before{content:""; position:absolute; left:0; right:0; top:22px; height:2px; background:var(--rule)}
.steps-nav .fill{position:absolute; left:0; top:22px; height:2px; background:var(--gold); transition:width .4s var(--ease)}
.steps-nav button{position:relative; background:none; border:0; text-align:left; padding:0 16px 0 0; cursor:pointer; color:var(--ink-2)}
.steps-nav .dot{width:46px; height:46px; border-radius:50%; border:2px solid var(--rule); background:var(--paper); display:grid; place-items:center; font-weight:700; font-family:var(--display); font-size:18px; transition:all .25s}
.steps-nav b{display:block; margin-top:14px; font-size:19px; color:var(--ink); font-family:var(--display)}
.steps-nav small{font-size:14px}
.steps-nav button.done .dot{border-color:var(--gold); background:var(--gold-wash); color:var(--gold-text)}
.steps-nav button[aria-selected="true"] .dot{background:var(--gold); border-color:var(--gold); color:#14161B}
.step-panel{margin-top:36px; background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:clamp(22px,4vw,40px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px}
@media (max-width:820px){ .step-panel{grid-template-columns:1fr} .steps-nav b{font-size:15px} .steps-nav small{display:none} .steps-nav .dot{width:40px; height:40px} .steps-nav::before,.steps-nav .fill{top:19px} }
.step-panel h3{font-size:30px; font-variation-settings:"wdth" 80; font-weight:800}
.step-panel .when{color:var(--gold-text); font-weight:600; font-size:15px}
.step-panel p{color:var(--ink-2); margin-top:12px}
.step-panel ul{list-style:none; margin:0; padding:0}
.step-panel li{display:grid; grid-template-columns:110px 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--rule); font-size:16px}
.step-panel li span{color:var(--gold-text); font-weight:600; font-size:14px; padding-top:2px}
.step-ctrl{display:flex; gap:8px; margin-top:22px}

/* cases */
.case-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
@media (max-width:980px){ .case-grid{grid-template-columns:1fr} }
.case-card{position:relative; border:1px solid var(--rule); border-radius:8px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s var(--ease)}
.case-card:hover{border-color:var(--gold); transform:translateY(-2px)}
.case-card[hidden]{display:none}
.case-top{background:var(--band); color:var(--band-text); padding:22px 24px 26px; position:relative}
.case-top .route{font-size:13px; color:var(--gold-hi); font-weight:600}
.case-top .big{font-family:var(--display); font-size:56px; font-weight:850; font-variation-settings:"wdth" 68; line-height:1; margin-top:14px}
.case-top .lab{font-size:14px; color:var(--band-muted)}
.case-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:12px; flex:1}
.case-body h3 a{text-decoration:none}
.case-body h3 a::after{content:""; position:absolute; inset:0}
.case-body p{font-size:15px; color:var(--ink-2); flex:1}
.case-body .more{font-size:14px; color:var(--gold-text); font-weight:600}

/* testimonials carousel */
.carousel{position:relative}
.slides{overflow:hidden}
.slides-track{display:flex; transition:transform .5s var(--ease)}
.slide{flex:0 0 100%; padding-right:4px}
.slide blockquote{margin:0; font-family:var(--serif); font-size:clamp(22px,2.8vw,34px); line-height:1.45; max-width:34ch}
.slide figcaption{margin-top:28px; display:flex; align-items:center; gap:14px}
.slide .mono{width:48px; height:48px; border-radius:50%; background:var(--gold); color:#14161B; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:18px}
.slide figcaption b{display:block}
.slide figcaption span{font-size:14px; color:var(--band-muted)}
.car-ctrl{display:flex; align-items:center; gap:12px; margin-top:36px}
.car-ctrl .icon-btn{width:48px; height:48px}
.dots{display:flex; gap:8px; margin-left:8px}
.dots button{width:28px; height:28px; border:0; background:none; cursor:pointer; padding:0; display:grid; place-items:center}
.dots button::before{content:""; width:28px; height:4px; border-radius:2px; background:var(--band-rule); transition:background .2s}
.dots button[aria-current="true"]::before{background:var(--gold)}

/* faq */
.faq-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px,6vw,80px)}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr} }
.acc{border-top:1px solid var(--rule)}
.acc:last-child{border-bottom:1px solid var(--rule)}
.acc h3{font-size:inherit; font-weight:inherit; font-family:var(--body)}
.acc button{width:100%; background:none; border:0; text-align:left; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:22px 0; font-size:19px; font-weight:600; line-height:1.35; color:var(--ink)}
.acc button svg{flex:none; width:20px; height:20px; margin-top:3px; color:var(--gold-text); transition:transform .25s}
.acc button[aria-expanded="true"] svg{transform:rotate(45deg)}
.acc .pnl{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease)}
.acc .pnl > div{overflow:hidden}
.acc.open .pnl{grid-template-rows:1fr}
.acc .pnl p{padding:0 0 24px; color:var(--ink-2); max-width:66ch}

/* CTA band */
.cta-band{background:var(--gold); color:#14161B}
.cta-band .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:28px; padding-top:clamp(48px,7vw,80px); padding-bottom:clamp(48px,7vw,80px)}
.cta-band h2{max-width:20ch}
.cta-band p{margin-top:12px; font-size:18px; max-width:52ch}
.cta-band .btn-ink{background:#14161B; color:#F3F2EE}
.cta-band .btn-ink:hover{background:#2A2D35}
.cta-band .btn-line{color:#14161B}

/* service detail */
.sd-grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(32px,5vw,64px); align-items:start}
@media (max-width:960px){ .sd-grid{grid-template-columns:1fr} }
.sd-grid h2{font-size:clamp(28px,3.4vw,40px)}
.deliv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; list-style:none; padding:0; margin:24px 0 0}
@media (max-width:600px){ .deliv{grid-template-columns:1fr} }
.deliv li{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:13px 0; border-top:1px solid var(--rule)}
.deliv svg{width:18px; height:18px; color:var(--gold-text); margin-top:4px}
.outcomes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px}
@media (max-width:700px){ .outcomes{grid-template-columns:1fr} }
.outcomes div{padding:20px; border-radius:8px; background:var(--surface); border:1px solid var(--rule)}
.outcomes b{display:block; font-family:var(--display); font-size:30px; font-weight:850; font-variation-settings:"wdth" 72; line-height:1.05}
.outcomes span{font-size:14px; color:var(--ink-2)}
.side{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px}
.side-card{border:1px solid var(--rule); border-radius:8px; padding:24px; background:var(--surface)}
.side-card h3{font-size:19px}
.side-card p{font-size:15px; color:var(--ink-2); margin:8px 0 18px}
.side-card .btn{width:100%}
.side-card .btn + .btn{margin-top:10px}
.side-card ul{list-style:none; padding:0; margin:12px 0 0}
.side-card li a{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--rule); text-decoration:none; font-size:15px}
.side-card li a:hover{color:var(--gold-text)}
.pager{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(48px,6vw,72px)}
.pager a{border:1px solid var(--rule); border-radius:8px; padding:20px 22px; text-decoration:none; background:var(--surface)}
.pager a:hover{border-color:var(--gold)}
.pager small{display:block; color:var(--ink-3); font-size:13px}
.pager b{font-size:18px}
.pager .nx{text-align:right}
.faq-mini{margin-top:clamp(48px,6vw,72px)}

/* case detail */
.cd-metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--band-rule); margin-top:40px}
@media (max-width:760px){ .cd-metrics{grid-template-columns:1fr 1fr} }
.cd-metrics div{padding:22px 16px 0 0; display:flex; flex-direction:column-reverse; justify-content:flex-end}
.cd-metrics dd{margin:0; font-family:var(--display); font-size:clamp(36px,4.6vw,56px); font-weight:850; font-variation-settings:"wdth" 70; line-height:1; color:var(--gold-hi); font-variant-numeric:tabular-nums}
.cd-metrics dt{font-size:14px; color:var(--band-muted); margin-top:6px}
.cd-body{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px,5vw,64px)}
@media (max-width:860px){ .cd-body{grid-template-columns:1fr} }
.cd-body + .cd-body{margin-top:56px; padding-top:40px; border-top:1px solid var(--rule)}
.cd-body h2{font-size:clamp(26px,3vw,36px)}
.cd-body p{color:var(--ink-2); max-width:64ch}
.cd-body ol{margin:0; padding:0; list-style:none; counter-reset:s}
.cd-body ol li{counter-increment:s; display:grid; grid-template-columns:40px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--rule)}
.cd-body ol li::before{content:counter(s); width:32px; height:32px; border-radius:50%; background:var(--gold-wash); color:var(--gold-text); display:grid; place-items:center; font-weight:700; font-size:14px}
.cd-body ol li b{display:block}
.cd-body ol li span{color:var(--ink-2); font-size:15px}
.pull{margin:0; font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); line-height:1.5}
.pull + p{margin-top:16px; font-size:15px}

/* about */
.story{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,80px)}
@media (max-width:900px){ .story{grid-template-columns:1fr} }
.story .copy p{font-family:var(--serif); font-size:18px; line-height:1.75; color:var(--ink-2); max-width:62ch}
.story .copy p + p{margin-top:20px}
.story .copy p:first-child{color:var(--ink)}
.edges{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){ .edges{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .edges{grid-template-columns:1fr} }
.edges div{padding:24px; border-radius:8px; background:var(--band-2); border:1px solid var(--band-rule)}
.edges svg{width:28px; height:28px; color:var(--gold); margin-bottom:16px}
.edges h3{font-size:19px; margin-bottom:8px}
.edges p{color:var(--band-muted); font-size:15px}
.team{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .team{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .team{grid-template-columns:1fr} }
.member{perspective:1000px}
.member button{width:100%; min-height:220px; position:relative; background:none; border:0; padding:0; cursor:pointer; text-align:left; transform-style:preserve-3d; transition:transform .6s var(--ease); display:block}
.member button[aria-pressed="true"]{transform:rotateY(180deg)}
.member .face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:8px; border:1px solid var(--rule); background:var(--surface); padding:24px; display:flex; flex-direction:column}
.member .back{transform:rotateY(180deg); background:var(--band); color:var(--band-text); border-color:var(--band)}
.member .mono{width:60px; height:60px; border-radius:50%; background:var(--band); color:var(--gold); display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:24px}
.member b{display:block; font-size:19px; margin-top:auto}
.member .role-t{font-size:14px; color:var(--gold-text); font-weight:600}
.member .hint{font-size:13px; color:var(--ink-3); margin-top:8px}
.member .back p{color:var(--band-muted); font-size:15px; margin-top:10px}
.member .back b{margin-top:0; color:var(--gold-hi)}
@media (prefers-reduced-motion: reduce){ .member button[aria-pressed="true"] .front{visibility:hidden} .member button[aria-pressed="true"]{transform:none} .member .back{transform:none; visibility:hidden} .member button[aria-pressed="true"] .back{visibility:visible} }
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
@media (max-width:860px){ .values{grid-template-columns:1fr} }
.values div{border-top:2px solid var(--ink); padding-top:18px}
.values p{color:var(--ink-2); margin-top:8px}

/* quote wizard */
.wizard{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(24px,4vw,48px); align-items:start}
@media (max-width:960px){ .wizard{grid-template-columns:1fr} }
.wz-card{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:clamp(22px,4vw,44px)}
.wz-steps{display:flex; gap:6px; list-style:none; margin:0 0 30px; padding:0}
.wz-steps li{flex:1}
.wz-steps i{display:block; height:6px; border-radius:3px; background:var(--paper-2); transition:background .3s}
.wz-steps li.on i{background:var(--gold)}
.wz-steps span{display:block; font-size:13px; color:var(--ink-3); margin-top:8px}
.wz-steps li.cur span{color:var(--ink); font-weight:600}
@media (max-width:560px){ .wz-steps span{display:none} }
.wz-step[hidden]{display:none}
.wz-step h2{font-size:clamp(28px,3.4vw,40px); max-width:none}
.wz-step > p.sub{color:var(--ink-2); margin:10px 0 26px}
.opt-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (max-width:560px){ .opt-grid{grid-template-columns:1fr} }
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.opt label{display:grid; grid-template-columns:22px 1fr; gap:4px 12px; padding:14px 16px; border:1.5px solid var(--rule); border-radius:6px; cursor:pointer; min-height:56px; align-items:center; margin:0; font-weight:600; font-size:15px; color:var(--ink)}
.opt label small{grid-column:2; font-weight:400; color:var(--ink-2); font-size:13px; line-height:1.4}
.opt .bx{width:20px; height:20px; border:1.5px solid var(--ink-3); border-radius:4px; display:grid; place-items:center; grid-row:span 2; align-self:start; margin-top:2px}
.opt input[type=radio] + label .bx{border-radius:50%}
.opt .bx svg{width:13px; height:13px; opacity:0}
.opt input:checked + label{border-color:var(--gold); background:var(--gold-wash)}
.opt input:checked + label .bx{background:var(--gold); border-color:var(--gold); color:#14161B}
.opt input:checked + label .bx svg{opacity:1}
.opt input:focus-visible + label{outline:3px solid var(--focus); outline-offset:2px}
.chip-set{display:flex; flex-wrap:wrap; gap:8px}
.chip-set .opt label{grid-template-columns:auto; min-height:44px; padding:0 16px; border-radius:999px; font-weight:500}
.chip-set .opt .bx{display:none}
fieldset{border:0; padding:0; margin:0 0 26px; min-width:0}
legend{font-weight:600; font-size:16px; margin-bottom:12px; padding:0}
legend small,.lbl small{font-weight:400; color:var(--ink-3)}
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.fields .full{grid-column:1/-1}
@media (max-width:560px){ .fields{grid-template-columns:1fr} }
.lbl{display:block; font-size:15px; font-weight:600; margin-bottom:8px}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%; min-height:50px; padding:12px 14px; font:16px var(--body); color:var(--ink); background:var(--paper); border:1.5px solid var(--rule); border-radius:4px}
textarea{min-height:120px; resize:vertical}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9A84C' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px}
input:focus,select:focus,textarea:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent)}
[aria-invalid="true"]{border-color:var(--err) !important}
.err{display:block; font-size:14px; color:var(--err); margin-top:6px}
.err:empty{display:none}
.wz-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--rule)}
.wz-nav .save{font-size:13px; color:var(--ink-3)}
.review dl{margin:0}
.review div{display:grid; grid-template-columns:180px 1fr auto; gap:16px; padding:14px 0; border-top:1px solid var(--rule); align-items:start}
@media (max-width:560px){ .review div{grid-template-columns:1fr auto} .review dt{grid-column:1/-1} }
.review dt{color:var(--ink-3); font-size:14px}
.review dd{margin:0; font-weight:500}
.review .link{font-size:14px}
.consent{display:flex; gap:12px; align-items:flex-start; margin-top:20px; font-size:15px; color:var(--ink-2)}
.consent input{width:22px; height:22px; accent-color:var(--gold); margin-top:1px; flex:none}
.done-box{text-align:left}
.done-box .tick{width:64px; height:64px; border-radius:50%; background:var(--gold); color:#14161B; display:grid; place-items:center; margin-bottom:22px}
.done-box .tick svg{width:30px; height:30px}
.done-box .ref{display:inline-block; margin-top:16px; padding:8px 14px; background:var(--paper-2); border-radius:4px; font-variant-numeric:tabular-nums; font-weight:600}
.done-box ol{margin:24px 0; padding-left:20px; color:var(--ink-2)}
.done-box ol li{padding:4px 0}
.aside-stack{display:flex; flex-direction:column; gap:16px; position:sticky; top:96px}
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{padding:14px 0; border-top:1px solid var(--rule)}
.contact-list span{display:block; font-size:13px; color:var(--ink-3)}
.contact-list a,.contact-list b{font-weight:600; font-size:17px; text-decoration-color:var(--gold); text-underline-offset:4px}

/* quote drawer */
.scrim{position:fixed; inset:0; background:rgba(5,6,8,.55); z-index:140; opacity:0; pointer-events:none; transition:opacity .25s}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw); background:var(--surface); z-index:150; transform:translateX(100%); transition:transform .32s var(--ease); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); visibility:hidden; transition:transform .32s var(--ease), visibility 0s .32s}
.drawer.open{transform:none; visibility:visible; box-shadow:-20px 0 60px rgba(0,0,0,.25); transition:transform .32s var(--ease)}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--rule)}
.drawer-head h2{font-size:24px}
.drawer-head .icon-btn{color:var(--ink); border-color:var(--rule)}
.drawer-body{flex:1; overflow:auto; padding:8px 24px 24px}
.drawer-body .intro{font-size:15px; color:var(--ink-2); padding:12px 0}
.dlist{list-style:none; padding:0; margin:0}
.dlist li{display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--rule)}
.dlist .ci{width:40px; height:40px; border-radius:50%; background:var(--band); color:var(--gold); display:grid; place-items:center}
.dlist .ci svg{width:18px; height:18px}
.dlist b{font-size:15px}
.dlist button{min-height:38px; padding:0 10px; border:1.5px solid var(--rule); border-radius:4px; background:none; cursor:pointer; font-size:13px; font-weight:600}
.dlist button:hover{border-color:var(--err); color:var(--err)}
.dlist li.off b{color:var(--ink-3)}
.empty{padding:28px 0; color:var(--ink-2)}
.empty b{display:block; color:var(--ink); font-size:18px; margin-bottom:6px}
.drawer-foot{padding:20px 24px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:10px}
.drawer-foot .btn{width:100%}

/* toast + floating */
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,140%); background:var(--ink); color:var(--paper); padding:12px 14px 12px 18px; border-radius:6px; z-index:160; display:flex; align-items:center; gap:16px; font-size:15px; transition:transform .3s var(--ease); max-width:calc(100vw - 32px)}
.toast.show{transform:translate(-50%,0)}
.toast button{background:none; border:0; color:var(--gold); font-weight:700; cursor:pointer; min-height:36px; padding:0 6px}
.fab{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.fab-main{width:58px; height:58px; border-radius:50%; background:var(--gold); color:#14161B; border:0; cursor:pointer; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.3)}
.fab-main svg{width:26px; height:26px}
.fab-menu{display:none; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:8px; box-shadow:0 16px 40px rgba(0,0,0,.2); min-width:240px}
.fab-menu.open{display:flex; animation:viewin .2s}
.fab-menu a,.fab-menu button{display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:center; padding:10px 12px; border-radius:6px; text-decoration:none; text-align:left; background:none; border:0; cursor:pointer; font-size:15px}
.fab-menu a:hover,.fab-menu button:hover{background:var(--paper-2)}
.fab-menu svg{width:20px; height:20px; color:var(--gold-text)}
.fab-menu small{display:block; color:var(--ink-3); font-size:12px}
.to-top{width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--ink); border:1px solid var(--rule); cursor:pointer; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .2s}
.to-top.show{opacity:1; pointer-events:auto}
.to-top svg{width:18px; height:18px}

/* footer */
.foot{background:var(--band); color:var(--band-muted); border-top:1px solid var(--band-rule); padding:64px 0 32px; font-size:15px}
.foot-grid{display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)); gap:32px}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > :first-child{grid-column:1/-1} }
.foot .brand{color:var(--band-text)}
.foot .tag{margin-top:14px; color:var(--gold-hi); font-size:14px}
.foot .blurb{margin-top:12px; max-width:40ch}
.foot h4{margin:0 0 12px; color:var(--band-text); font-size:15px; font-weight:600; font-family:var(--body)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{padding:5px 0}
.foot a{text-decoration:none} .foot a:hover{color:var(--band-text); text-decoration:underline}
.news{display:flex; gap:8px; margin-top:20px; max-width:400px}
.news input{background:var(--band-2); border-color:var(--band-rule); color:var(--band-text); min-height:46px}
.news .btn{min-height:46px; flex:none}
.news-msg{font-size:13px; margin-top:8px; color:var(--gold-hi); min-height:1em}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:48px; padding-top:20px; border-top:1px solid var(--band-rule); font-size:13px}
.notfound{padding:120px 0; text-align:left}

/* =================== AGENCY SKIN (v3) =================== */
:root{
  --paper:#FFFFFF; --paper-2:#F6F5F1; --surface:#FFFFFF;
  --ink:#111111; --ink-2:#555555; --ink-3:#6E6E6E; --rule:#E7E7E7;
  --gold:#C9A84C; --gold-hi:#E8CC7A; --gold-text:#85660F; --gold-wash:#FBF5E4;
  --band:#111111; --band-2:#181B21; --band-rule:#2A2D35;
  --display:"Plus Jakarta Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --r:20px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0C0E12; --paper-2:#13161B; --surface:#171A20; --gold-wash:#262113; --rule:#262A31; --band:#06070A; } }
:root[data-theme="dark"]{ --paper:#0C0E12; --paper-2:#13161B; --surface:#171A20; --gold-wash:#262113; --rule:#262A31; --band:#06070A; }
body{font-size:16.5px; line-height:1.65}
h1,h2,h3,h4{letter-spacing:-0.025em; font-variation-settings:normal !important}
h2{font-size:clamp(32px,4.2vw,50px); font-weight:800; max-width:20ch; line-height:1.1}
h3{font-weight:700}
.btn{border-radius:999px; min-height:50px; padding:0 26px; font-weight:700}
.alt{background:var(--paper-2)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--gold-text); background:var(--gold-wash); border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); padding:6px 12px; border-radius:999px; margin-bottom:18px}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.dark .eyebrow{background:#221E12; color:var(--gold-hi); border-color:#3A3220}
.center{text-align:center} .center h2,.center .lede{margin-left:auto; margin-right:auto}
.sh{margin-bottom:clamp(36px,5vw,56px)}
.sh.row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px}

/* utility bar */
.topbar{background:var(--gold); color:#14161B; font-size:13.5px; font-weight:600}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; flex-wrap:wrap}
.topbar a{text-decoration:none} .topbar a:hover{text-decoration:underline}
.topbar .tb-l{display:flex; gap:18px; align-items:center}
.topbar .tb-r{display:flex; gap:18px; align-items:center}
@media (max-width:760px){ .topbar .tb-l{display:none} .topbar .wrap{justify-content:center} }
.site-head{background:color-mix(in srgb,var(--paper) 92%,transparent); color:var(--ink); border-bottom:1px solid var(--rule)}
.nav > a,.nav > .dd > button{color:var(--ink-2); font-weight:600}
.nav > a:hover,.nav > .dd > button:hover,.nav > a[aria-current="page"],.nav .dd.cur > button{color:var(--ink)}
.icon-btn{border-color:var(--rule); color:var(--ink); border-radius:999px}
.icon-btn:hover{border-color:var(--ink-3)}
.head-badges{display:flex; gap:6px; margin-left:4px}
.head-badges span{font-size:11px; font-weight:700; padding:4px 8px; border-radius:6px; border:1px solid var(--rule); color:var(--ink-2); white-space:nowrap}
@media (max-width:1240px){ .head-badges{display:none} }
.mega{background:var(--surface); border-color:var(--rule); box-shadow:0 30px 80px rgba(15,17,21,.18); border-radius:18px}
.mega a{color:var(--ink)} .mega a:hover,.mega a:focus-visible{background:var(--paper-2)}
.mega small{color:var(--ink-3)} .mega .all{border-color:var(--rule); color:var(--ink-3)}
.mega .mi{border:0; background:var(--gold-wash); color:var(--gold-text)}
@media (max-width:1040px){
  .site-head{background:var(--paper)}
  .nav{background:var(--paper)}
  .nav > a,.nav > .dd > button{border-color:var(--rule)}
}

/* hero */
.ahero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px); position:relative; overflow:hidden}
.ahero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:56px 56px; opacity:.45; mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 65%); pointer-events:none}
.ahero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,64px); align-items:center}
@media (max-width:980px){ .ahero .wrap{grid-template-columns:minmax(0,1fr)} }
.ahero h1{font-size:clamp(40px,5.8vw,74px); font-weight:800; line-height:1.03; letter-spacing:-0.035em}
.ahero h1 em{font-style:normal; background:linear-gradient(transparent 62%,var(--gold-hi) 62%,var(--gold-hi) 92%,transparent 92%); padding:0 4px}
:root[data-theme="dark"] .ahero h1 em{background:linear-gradient(transparent 62%,#5A4818 62%,#5A4818 92%,transparent 92%)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ahero h1 em{background:linear-gradient(transparent 62%,#5A4818 62%,#5A4818 92%,transparent 92%)} }
.ahero .lede{font-size:clamp(17px,1.5vw,19px)}
.ahero .hero-cta{margin-top:30px}
.ahero .btn-line{color:var(--ink)}
.proofline{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:28px; font-size:14px; color:var(--ink-2)}
.proofline .avs{display:flex}
.proofline .avs span{width:34px; height:34px; border-radius:50%; border:2px solid var(--paper); margin-left:-8px; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--band); color:var(--gold)}
.proofline .avs span:first-child{margin-left:0}
.proofline b{color:var(--ink)}
/* dashboard visual */
.dash{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:24px; padding:22px; box-shadow:0 40px 90px -30px rgba(15,17,21,.35)}
.dash-h{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px}
.dash-h b{font-size:15px} .dash-h small{font-size:12px; color:var(--ink-3)}
.dash-tabs{display:flex; gap:4px; background:var(--paper-2); padding:4px; border-radius:999px}
.dash-tabs button{border:0; background:none; border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--ink-2); min-height:32px}
.dash-tabs button[aria-selected="true"]{background:var(--ink); color:var(--paper)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.kpis div{background:var(--paper-2); border-radius:14px; padding:12px}
.kpis small{display:block; font-size:12px; color:var(--ink-3)}
.kpis b{font-size:22px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.kpis em{font-style:normal; font-size:12px; font-weight:700; color:var(--ok); margin-left:4px}
.chart-box{height:180px; position:relative}
.chart-box svg{width:100%; height:100%}
.chart-box .gl{stroke:var(--rule)}
.chart-box .ln{fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; transition:d .6s}
.chart-box .ar{fill:url(#gfill)}
.chart-box .lb{font-size:11px; fill:var(--ink-3)}
.dash-note{font-size:12px; color:var(--ink-3); margin-top:8px}
.float-card{position:absolute; background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:12px 14px; box-shadow:0 20px 40px -12px rgba(15,17,21,.3); display:flex; gap:10px; align-items:center; font-size:13px}
.float-card .fi{width:34px; height:34px; border-radius:10px; background:var(--gold-wash); color:var(--gold-text); display:grid; place-items:center}
.float-card .fi svg{width:18px; height:18px}
.float-card b{display:block; font-size:14px}
.float-card small{color:var(--ink-3)}
.fc1{left:-28px; bottom:56px} .fc2{right:-20px; top:-22px}
@media (max-width:1100px){ .fc1{left:12px; bottom:-24px} .fc2{right:12px} }
@media (prefers-reduced-motion: no-preference){ .float-card{animation:bob 6s ease-in-out infinite} .fc2{animation-delay:-3s} @keyframes bob{50%{transform:translateY(-8px)}} }

/* logos marquee */
.logos{padding:28px 0 8px}
.logos p{text-align:center; font-size:14px; color:var(--ink-3); margin-bottom:18px; font-weight:600}
.lm{overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lm .track{display:flex; gap:56px; width:max-content; animation:scroll 40s linear infinite; align-items:center}
.lm:hover .track{animation-play-state:paused}
.lm .lg{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink-3); white-space:nowrap; letter-spacing:-0.02em; opacity:.85}
.lm .lg i{width:28px; height:28px; border-radius:8px; background:var(--ink-3); display:grid; place-items:center; color:var(--paper); font-style:normal; font-size:13px}
@media (prefers-reduced-motion: reduce){ .lm .track{flex-wrap:wrap; width:auto; justify-content:center; gap:20px 40px} .lm{mask-image:none} .lm .dup{display:none} }

/* numbers */
.nums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:860px){ .nums{grid-template-columns:1fr 1fr} }
.nums div{background:var(--band-2); border:1px solid var(--band-rule); border-radius:var(--r); padding:28px 24px; display:flex; flex-direction:column-reverse; justify-content:flex-end}
.nums dd{margin:0; font-size:clamp(40px,4.6vw,60px); font-weight:800; letter-spacing:-0.04em; line-height:1; color:var(--gold-hi); font-variant-numeric:tabular-nums}
.nums dt{margin-top:10px; color:var(--band-muted); font-size:15px}

/* platforms */
.plat{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:940px){ .plat{grid-template-columns:1fr} }
.badges{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px}
.bdg{border:1px solid var(--rule); border-radius:16px; padding:16px; display:flex; gap:12px; align-items:center; background:var(--surface)}
.bdg i{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-style:normal; font-weight:800; color:#fff; font-size:15px; flex:none}
.bdg b{display:block; font-size:15px} .bdg small{font-size:12.5px; color:var(--ink-3)}
.benefits{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:600px){ .benefits{grid-template-columns:1fr} .badges{grid-template-columns:1fr} }
.benefit{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:26px}
.benefit .bi{width:46px; height:46px; border-radius:14px; background:var(--gold-wash); color:var(--gold-text); display:grid; place-items:center; margin-bottom:18px}
.benefit .bi svg{width:22px; height:22px}
.benefit h3{font-size:19px; margin-bottom:8px}
.benefit p{color:var(--ink-2); font-size:15px}
.plat-note{margin-top:20px; font-weight:600; color:var(--ink)}

/* services big cards */
.svc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:1000px){ .svc-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .svc-grid{grid-template-columns:1fr} }
.svc{position:relative; border:1px solid var(--rule); border-radius:var(--r); padding:28px; background:var(--surface); display:flex; flex-direction:column; gap:14px; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; overflow:hidden}
.svc:hover{transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(15,17,21,.35); border-color:var(--gold)}
.svc[hidden]{display:none}
.svc .si{width:52px; height:52px; border-radius:16px; background:var(--ink); color:var(--gold); display:grid; place-items:center}
.svc .si svg{width:24px; height:24px}
.svc h3{font-size:22px}
.svc h3 a{text-decoration:none} .svc h3 a::after{content:""; position:absolute; inset:0}
.svc p{color:var(--ink-2); font-size:15px}
.svc .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.svc .chips span{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--paper-2); color:var(--ink-2)}
.svc .sfoot{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; padding-top:14px; border-top:1px solid var(--rule)}
.svc .explore{font-size:14px; font-weight:700; color:var(--gold-text); display:inline-flex; gap:6px; align-items:center}
.svc .explore svg{width:16px; height:16px; transition:transform .2s}
.svc:hover .explore svg{transform:translateX(4px)}
.add{border-radius:999px}

/* featured case */
.feat{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); background:var(--band); color:var(--band-text); border-radius:24px; overflow:hidden; position:relative; text-decoration:none; margin-bottom:18px}
@media (max-width:900px){ .feat{grid-template-columns:1fr} }
.feat .fl{padding:clamp(28px,4vw,48px)}
.feat .tagl{font-size:13px; font-weight:700; color:var(--gold-hi)}
.feat h3{font-size:clamp(26px,3vw,38px); font-weight:800; margin:12px 0 14px; max-width:22ch}
.feat p{color:var(--band-muted); max-width:52ch}
.feat .rd{display:inline-flex; margin-top:24px; font-weight:700; color:var(--gold-hi); gap:6px; align-items:center}
.feat .fr{background:var(--band-2); padding:clamp(24px,3vw,40px); display:grid; gap:12px; align-content:center}
.feat .fr div{border-bottom:1px solid var(--band-rule); padding-bottom:12px}
.feat .fr div:last-child{border:0}
.feat .fr b{display:block; font-size:clamp(34px,4vw,48px); font-weight:800; letter-spacing:-0.04em; line-height:1; color:var(--gold-hi)}
.feat .fr span{font-size:14px; color:var(--band-muted)}
.feat:hover{outline:2px solid var(--gold)}
.mini-cases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:900px){ .mini-cases{grid-template-columns:1fr} }
.mc{border:1px solid var(--rule); border-radius:var(--r); padding:24px; background:var(--surface); text-decoration:none; display:flex; flex-direction:column; gap:10px; transition:border-color .2s, transform .2s}
.mc:hover{border-color:var(--gold); transform:translateY(-3px)}
.mc .cl{font-weight:800; font-size:15px}
.mc .cat{font-size:12.5px; color:var(--ink-3)}
.mc b{font-size:44px; font-weight:800; letter-spacing:-0.04em; line-height:1; margin-top:8px}
.mc .bl{font-size:14px; color:var(--ink-2)}
.mc h3{font-size:17px; margin-top:6px}
.mc .rd{margin-top:auto; padding-top:12px; font-weight:700; font-size:14px; color:var(--gold-text)}

/* team + why */
.why{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:940px){ .why{grid-template-columns:1fr} }
.photos{display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative}
.photo{border-radius:22px; aspect-ratio:4/5; background:linear-gradient(160deg,#2A2D35,#111111); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:18px; color:#fff}
.photo:nth-child(2){margin-top:44px}
.photo .ini{position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); font-family:var(--serif); font-size:96px; font-weight:700; color:var(--gold); opacity:.9}
.photo b{display:block; font-size:16px} .photo small{color:#BDBAB2; font-size:13px}
.photos .cap{position:absolute; left:50%; bottom:-18px; transform:translateX(-50%); background:var(--gold); color:#14161B; font-weight:700; font-size:13px; padding:8px 14px; border-radius:999px; white-space:nowrap}
.why-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px}
@media (max-width:600px){ .why-list{grid-template-columns:1fr} }
.why-list div{border:1px solid var(--rule); border-radius:18px; padding:20px; background:var(--surface)}
.why-list h3{font-size:17px; margin-bottom:6px; display:flex; gap:10px; align-items:center}
.why-list h3 svg{width:20px; height:20px; color:var(--gold-text); flex:none}
.why-list p{font-size:14.5px; color:var(--ink-2)}

/* four moves */
.moves{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:mv}
@media (max-width:980px){ .moves{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .moves{grid-template-columns:1fr} }
.move{border:1px solid var(--band-rule); border-radius:var(--r); padding:26px; background:var(--band-2); position:relative; cursor:default; transition:border-color .2s, background .2s}
.move:hover,.move:focus-within{border-color:var(--gold); background:#1E1B12}
.move .no{font-size:44px; font-weight:800; letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1.5px var(--gold); line-height:1}
.move h3{font-size:22px; margin:18px 0 8px}
.move p{color:var(--band-muted); font-size:15px}
.move .wh{display:inline-block; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--gold-hi); background:#221E12; padding:4px 10px; border-radius:999px}

/* testimonial cards */
.tcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:940px){ .tcards{grid-template-columns:1fr} }
.tc{border:1px solid var(--rule); border-radius:var(--r); padding:26px; background:var(--surface); display:flex; flex-direction:column; gap:16px}
.tc .hl{align-self:flex-start; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--gold-wash); color:var(--gold-text)}
.tc .stars{display:flex; gap:2px; color:var(--gold)} .tc .stars svg{width:16px; height:16px}
.tc blockquote{margin:0; font-size:16.5px; line-height:1.6; flex:1}
.tc figcaption{display:flex; gap:12px; align-items:center; padding-top:16px; border-top:1px solid var(--rule)}
.tc .av{width:44px; height:44px; border-radius:50%; background:var(--band); color:var(--gold); display:grid; place-items:center; font-weight:800}
.tc figcaption b{display:block; font-size:15px} .tc figcaption span{font-size:13px; color:var(--ink-3)}

/* videos */
.vids{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:940px){ .vids{grid-template-columns:1fr} }
.vid{border:0; padding:0; background:none; text-align:left; cursor:pointer; color:inherit}
.vid .th{aspect-ratio:16/10; border-radius:var(--r); background:linear-gradient(135deg,#1B1E24 0%,#111111 60%,#3A3220 100%); position:relative; overflow:hidden; display:grid; place-items:center}
.vid .th::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(201,168,76,.25),transparent 60%)}
.vid .pl{width:72px; height:72px; border-radius:50%; background:var(--gold); color:#14161B; display:grid; place-items:center; position:relative; z-index:1; transition:transform .2s}
.vid:hover .pl{transform:scale(1.08)}
.vid .pl svg{width:26px; height:26px; margin-left:4px}
.vid .dur{position:absolute; right:12px; bottom:12px; z-index:1; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px}
.vid b{display:block; margin-top:14px; font-size:16px}
.vid span{font-size:14px; color:var(--band-muted)}
.modal{position:fixed; inset:0; z-index:170; display:none; place-items:center; background:rgba(5,6,8,.8); padding:20px}
.modal.open{display:grid; animation:viewin .2s}
.modal-box{width:min(900px,100%); background:var(--band); border-radius:20px; overflow:hidden; color:var(--band-text)}
.modal-box .mv{aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:24px; background:linear-gradient(135deg,#1B1E24,#111111)}
.modal-box .mv p{color:var(--band-muted); max-width:46ch; margin-top:8px}
.modal-box .mb{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px}
.modal-box .icon-btn{color:var(--band-text); border-color:var(--band-rule)}

/* markets (tgp style) */
.markets{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:980px){ .markets{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .markets{grid-template-columns:1fr} }
.mkc{border:1px solid var(--rule); border-radius:var(--r); padding:26px; background:var(--surface); position:relative; overflow:hidden}
.mkc .code{font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--gold-text)}
.mkc h3{font-size:19px; margin:10px 0 8px}
.mkc p{color:var(--ink-2); font-size:14.5px}
.mkc .st{display:inline-block; margin-top:14px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--paper-2)}
.mkc .st.live{background:#E3F2E9; color:#1E5C3A}
:root[data-theme="dark"] .mkc .st.live{background:#163323; color:#8FDCAE}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mkc .st.live{background:#163323; color:#8FDCAE} }

/* problem -> solution (gp.in style) */
.prob{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:940px){ .prob{grid-template-columns:1fr} }
.pc{border:1px solid var(--rule); border-radius:var(--r); background:var(--surface); overflow:hidden}
.pc button{width:100%; text-align:left; background:none; border:0; padding:24px; cursor:pointer; display:flex; justify-content:space-between; gap:16px; color:var(--ink)}
.pc button b{font-size:18px; line-height:1.35}
.pc button small{display:block; font-size:12.5px; color:var(--err); font-weight:700; margin-bottom:6px}
.pc button svg{width:22px; height:22px; flex:none; color:var(--gold-text); transition:transform .25s}
.pc button[aria-expanded="true"] svg{transform:rotate(45deg)}
.pc .ans{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease)}
.pc .ans > div{overflow:hidden}
.pc.open .ans{grid-template-rows:1fr}
.pc .ans p{margin:0 24px; padding:18px 0 0; border-top:1px dashed var(--rule); color:var(--ink-2); font-size:15px}
.pc .ans small{display:block; margin:0 24px; font-size:12.5px; color:var(--ok); font-weight:700; padding-top:14px}
.pc .ans a{display:inline-flex; margin:14px 24px 24px; font-weight:700; font-size:14px; color:var(--gold-text)}

/* free plan CTA */
.plan{background:var(--band); color:var(--band-text); border-radius:28px; padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(24px,4vw,56px); position:relative; overflow:hidden}
.plan::after{content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%; border:60px solid rgba(201,168,76,.12)}
@media (max-width:900px){ .plan{grid-template-columns:1fr} }
.plan h2{color:var(--band-text)}
.plan .lede{color:var(--band-muted)}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:12px; position:relative; z-index:1}
.plan li{background:var(--band-2); border:1px solid var(--band-rule); border-radius:16px; padding:18px 20px}
.plan li b{display:block; font-size:16px} .plan li span{font-size:14.5px; color:var(--band-muted)}
.plan .btn-line{color:var(--band-text)}
.plan small{display:block; margin-top:16px; color:var(--band-muted); font-size:13px}

/* insights */
.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:940px){ .posts{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .posts{grid-template-columns:1fr} }
.post{position:relative; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:var(--surface); display:flex; flex-direction:column; transition:transform .2s, border-color .2s}
.post:hover{transform:translateY(-3px); border-color:var(--gold)}
.post[hidden]{display:none}
.post .pt{aspect-ratio:16/9; background:var(--band); display:grid; place-items:center; color:var(--gold); position:relative}
.post .pt svg{width:48px; height:48px; opacity:.9}
.post .pt span{position:absolute; left:14px; top:14px; background:var(--gold); color:#14161B; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px}
.post .pb{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.post h3{font-size:18px; line-height:1.3}
.post h3 a{text-decoration:none} .post h3 a::after{content:""; position:absolute; inset:0}
.post p{font-size:14.5px; color:var(--ink-2); flex:1}
.post small{font-size:13px; color:var(--ink-3)}
.article{max-width:760px}
.article p{font-size:18px; line-height:1.8; color:var(--ink-2); margin-bottom:20px}
.article h2{font-size:28px; margin:36px 0 14px}
.article ul{color:var(--ink-2); font-size:17px; line-height:1.8}

/* contact enquiry */
.contact-wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:940px){ .contact-wrap{grid-template-columns:1fr} }
.ben{display:grid; grid-template-columns:1fr 1fr; gap:10px; list-style:none; padding:0; margin:24px 0}
.ben li{display:flex; gap:10px; align-items:center; font-weight:600; font-size:15px}
.ben svg{width:18px; height:18px; color:var(--gold-text)}
.wn{list-style:none; margin:0; padding:0}
.wn li{display:grid; grid-template-columns:40px 1fr; gap:12px; padding:12px 0; align-items:center}
.wn li span{width:32px; height:32px; border-radius:50%; background:var(--gold); color:#14161B; display:grid; place-items:center; font-weight:800; font-size:14px}
.enq{background:var(--surface); border:1px solid var(--rule); border-radius:24px; padding:clamp(22px,4vw,40px)}
.enq h2{font-size:28px; margin-bottom:22px}
.sent-box{display:none} .enq.done form{display:none} .enq.done .sent-box{display:block}

/* re-skins of earlier components */
.page-hero{background:var(--paper-2); color:var(--ink); border-bottom:1px solid var(--rule)}
.page-hero h1{font-size:clamp(38px,5.6vw,68px); font-weight:800; line-height:1.05; letter-spacing:-0.035em; max-width:18ch}
.page-hero .lede{color:var(--ink-2)}
.page-hero .btn-line{color:var(--ink) !important}
.crumbs,.crumbs a{color:var(--ink-3)} .crumbs a:hover{color:var(--ink)} .crumbs li+li::before{color:var(--rule)}
.page-hero .cd-metrics{border-color:var(--rule)} .page-hero .cd-metrics dd{color:var(--ink)} .page-hero .cd-metrics dt{color:var(--ink-2)}
.card,.case-card,.side-card,.wz-card,.step-panel,.outcomes div,.pager a{border-radius:var(--r)}
.case-top{border-radius:0}
.cta-band{background:var(--paper)} .cta-band .wrap{background:var(--gold); border-radius:28px; padding:clamp(32px,5vw,64px); margin-bottom:clamp(48px,7vw,96px)}
.foot{border-radius:0}
.summary-card,.role,.edges div{border-radius:16px}
.tab,.chip{border-radius:999px}
.toast{border-radius:999px}
.fab-main{background:#25D366; color:#fff}
.steps-nav .dot{background:var(--paper)}
.foot-grid{grid-template-columns:minmax(0,3.4fr) repeat(4,minmax(0,2fr))} @media (max-width:980px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > :first-child{grid-column:1/-1} }

.nav > a,.nav > .dd > button{white-space:nowrap; padding:10px 10px}
@media (min-width:1101px){ .svc-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))} .svc-grid.four .svc{padding:24px} .svc-grid.four h3{font-size:19px} }
.fc1{left:-28px; bottom:auto; top:46%} .fc2{right:-22px; top:auto; bottom:-24px}
@media (max-width:1100px){ .fc1{left:10px; top:auto; bottom:-26px} .fc2{right:10px; bottom:-26px} }
@media (max-width:520px){ .fc2{display:none} }
.kpis div{border:1.5px solid transparent; transition:border-color .2s, background .2s}
.kpis div.on{border-color:var(--gold); background:var(--gold-wash)}
.mc.cta{background:var(--gold); border-color:var(--gold); color:#14161B; justify-content:center}
.mc.cta h3{font-size:24px} .mc.cta p{font-size:15px} .mc.cta .rd{color:#14161B}
.dash-h{flex-wrap:wrap} @media (max-width:520px){ .dash{padding:16px} .kpis b{font-size:18px} .kpis{gap:6px} }

/* =================== CLEAN NAVY + GOLD (v4) =================== */
:root{
  --paper:#FFFFFF; --paper-2:#FFFFFF; --surface:#FFFFFF;
  --ink:#111111; --ink-2:#555555; --ink-3:#6E6E6E; --rule:#E7E7E7;
  --navy:#111111; --navy-2:#FFFFFF; --navy-3:#2B2B2B;
  --gold:#C9A84C; --gold-hi:#E2C46F; --gold-text:#8A6A12; --gold-wash:#FBF6E6;
  --band:#111111; --band-2:#FFFFFF; --band-text:#F4F6FA; --band-muted:#A9B4C6; --band-rule:#22395F;
  --ok:#157F4C; --r:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#08111F; --paper-2:#0D1829; --surface:#111D31; --ink:#EEF2F8; --ink-2:#B4BFCF; --ink-3:#8D99AC; --rule:#1F2D45;
  --gold-text:#E2C46F; --gold-wash:#211D10; --band:#050C17; --band-2:#0D1829; --band-rule:#1F2D45; --ok:#5FD39A; } }
:root[data-theme="dark"]{
  --paper:#08111F; --paper-2:#0D1829; --surface:#111D31; --ink:#EEF2F8; --ink-2:#B4BFCF; --ink-3:#8D99AC; --rule:#1F2D45;
  --gold-text:#E2C46F; --gold-wash:#211D10; --band:#050C17; --band-2:#0D1829; --band-rule:#1F2D45; --ok:#5FD39A; }
body{color:var(--ink)}
h2{font-size:clamp(30px,3.6vw,44px); letter-spacing:-0.03em}
.section{padding:clamp(64px,8vw,104px) 0}
/* buttons: navy primary on light, gold primary on dark */
.btn-gold{background:var(--navy); color:#fff}
.btn-gold:hover{background:var(--navy-3)}
.btn-line{color:var(--ink); border-color:var(--rule); border-width:1.5px}
.btn-line:hover{border-color:var(--ink); background:transparent}
.dark .btn-gold,.plan .btn-gold,.site-head .mobile-cta,.drawer .btn-gold,.side-card .btn-gold{}
.dark .btn-gold,.plan .btn-gold{background:var(--gold); color:var(--navy)}
.dark .btn-gold:hover,.plan .btn-gold:hover{background:var(--gold-hi)}
.dark .btn-line,.plan .btn-line{color:#fff; border-color:rgba(255,255,255,.3)}
:root[data-theme="dark"] .btn-gold{background:var(--gold); color:#111111}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-gold{background:var(--gold); color:#111111} }
.eyebrow{background:none; border:0; padding:0; color:var(--gold-text); font-size:13px; letter-spacing:.02em; margin-bottom:14px}
.eyebrow::before{width:18px; height:2px; border-radius:0}
.dark .eyebrow,.plan .eyebrow{background:none; color:var(--gold-hi)}
.topbar{background:var(--navy); color:#D7DEEA; font-weight:500; font-size:13px}
.topbar .wrap{min-height:36px}
.head-badges span{border-color:var(--rule)}
.site-head{background:color-mix(in srgb,var(--paper) 94%,transparent); box-shadow:0 1px 0 var(--rule); border:0}
.head-actions .btn{min-height:42px}
/* hero */
.ahero{padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,80px); background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.ahero::before{display:none}
.ahero h1{font-size:clamp(40px,5.4vw,68px); letter-spacing:-0.04em}
.ahero h1 .hl{color:var(--gold-text); display:block}
.ticks{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14.5px; color:var(--ink-2); font-weight:500}
.ticks li{display:flex; gap:8px; align-items:center}
.ticks svg{width:18px; height:18px; color:var(--ok)}
.dash{border-radius:20px; box-shadow:0 24px 60px -24px rgba(11,31,58,.25); border-color:var(--rule)}
.dash-tabs button[aria-selected="true"]{background:var(--navy); color:#fff}
:root[data-theme="dark"] .dash-tabs button[aria-selected="true"]{background:var(--gold); color:#111111}
.kpis div{background:var(--paper-2)}
.float-card{box-shadow:0 16px 32px -12px rgba(11,31,58,.25); animation:none !important}
.fc1{left:-24px; top:auto; bottom:28px}
@media (max-width:1100px){ .fc1{left:12px; bottom:-24px} }
/* trust strip */
.trust{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:26px 0}
.trust .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:14px 40px}
.trust p{font-size:13.5px; color:var(--ink-3); font-weight:600; margin:0}
.trust ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 32px; flex:1; justify-content:space-between}
.trust li{font-weight:800; font-size:17px; color:var(--ink-3); letter-spacing:-0.02em}
/* numbers */
.nums2{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0}
@media (max-width:820px){ .nums2{grid-template-columns:1fr 1fr; row-gap:32px} }
.nums2 div{padding:0 24px; border-left:1px solid var(--rule); display:flex; flex-direction:column-reverse; justify-content:flex-end}
.nums2 div:first-child{border-left:0; padding-left:0}
@media (max-width:820px){ .nums2 div:nth-child(3){border-left:0; padding-left:0} }
.nums2 dd{margin:0; font-size:clamp(40px,4.4vw,56px); font-weight:800; letter-spacing:-0.04em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.nums2 dt{font-size:14.5px; color:var(--ink-2); margin-top:10px; max-width:22ch}
/* service cards */
.svc{border-radius:var(--r); padding:26px}
.svc:hover{transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(11,31,58,.3); border-color:var(--rule)}
.svc .si{background:var(--gold-wash); color:var(--gold-text); border-radius:12px; width:46px; height:46px}
.svc .chips span{background:var(--paper-2)}
.add[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
:root[data-theme="dark"] .add[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#111111}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#111111}
.chip{border-color:var(--rule); font-weight:600}
/* moves */
.moves2{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative}
.moves2::before{content:""; position:absolute; top:22px; left:22px; right:22px; height:2px; background:var(--rule)}
.moves2 li{position:relative; padding-right:24px}
.moves2 .no{width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:800; position:relative}
.moves2 li:last-child .no{background:var(--gold); color:var(--navy)}
.moves2 .wh{display:block; margin-top:20px; font-size:13px; font-weight:700; color:var(--gold-text)}
.moves2 h3{font-size:21px; margin:4px 0 8px}
.moves2 p{color:var(--ink-2); font-size:15px}
@media (max-width:900px){ .moves2{grid-template-columns:1fr 1fr; gap:36px 0} .moves2::before{display:none} }
@media (max-width:520px){ .moves2{grid-template-columns:1fr} }
/* cases */
.feat{background:var(--navy); border-radius:20px}
.feat .fr{background:var(--navy-2)}
.feat:hover{outline:0; box-shadow:0 24px 50px -20px rgba(11,31,58,.5)}
.mc{border-radius:var(--r)}
.mc:hover{border-color:var(--rule); box-shadow:0 20px 40px -24px rgba(11,31,58,.3)}
.mc .cat{font-weight:600; color:var(--gold-text)}
.mc.cta{background:var(--gold-wash); border-color:color-mix(in srgb,var(--gold) 40%,transparent); color:var(--ink)}
.mc.cta .rd{color:var(--gold-text)}
/* why */
.why{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.why-list{margin-top:0}
.why-list div{border-radius:var(--r); background:var(--paper-2); border-color:transparent}
.why-list h3 svg{color:var(--ok)}
/* testimonials */
.tc{border-radius:var(--r); gap:12px}
.tc .qm{font-family:var(--serif); font-size:56px; line-height:.6; color:var(--gold); height:24px}
.tc figcaption{display:block}
.tc figcaption b{font-size:15px} .tc figcaption span{display:block; font-size:13.5px; color:var(--ink-3)}
/* plan cta */
.plan{background:var(--navy); border-radius:24px}
.plan::after{border-color:rgba(201,168,76,.10)}
.plan li{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1)}
/* page hero + misc */
.page-hero{background:var(--paper-2); border-bottom:0}
.dark{background:var(--navy)}
.nums div{background:var(--navy-2)}
.case-top{background:var(--navy)}
.cta-band .wrap{background:var(--navy); color:#fff}
.cta-band .btn-ink{background:var(--gold); color:var(--navy)}
.cta-band .btn-line{color:#fff; border-color:rgba(255,255,255,.3)}
.fab-main{background:var(--navy); color:#fff; box-shadow:0 10px 24px rgba(11,31,58,.35)}
:root[data-theme="dark"] .fab-main{background:var(--gold); color:#111111}
.badge{background:var(--gold); color:var(--navy)}
.progress{background:var(--gold)}
.member .back{background:var(--navy)}
.photo{background:linear-gradient(160deg,var(--navy-3),var(--navy))}
.post .pt{background:var(--navy)}
.post .pt span{color:var(--navy)}
.wz-steps li.on i{background:var(--navy)}
:root[data-theme="dark"] .wz-steps li.on i{background:var(--gold)}
.opt input:checked + label{border-color:var(--navy); background:var(--paper-2)}
.opt input:checked + label .bx{background:var(--navy); border-color:var(--navy); color:#fff}
.done-box .tick{background:var(--ok); color:#fff}
.slide .mono{background:var(--gold); color:var(--navy); font-size:28px}
.role[aria-pressed="true"]{background:#1A2E4F}
.summary-card,.role{background:var(--navy-2); border-color:var(--band-rule)}
.steps-nav button[aria-selected="true"] .dot{background:var(--navy); border-color:var(--navy); color:#fff}
.mkc .st.live{background:#E6F4EC; color:#157F4C}
.lm .lg i{background:var(--navy)}
.vid .th{background:linear-gradient(135deg,var(--navy-3),var(--navy))}
.modal-box{background:var(--navy)}
.tc{margin:0}

/* ===== White + light golden backgrounds (v5) ===== */
:root:not([data-theme="dark"]){
  --paper:#FFFFFF; --paper-2:#FBF6E9; --surface:#FFFFFF; --rule:#EFE6CF; --gold-wash:#F7EDD2;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#08111F; --paper-2:#0D1829; --surface:#111D31; --rule:#1F2D45; --gold-wash:#211D10; } }
body{background:var(--paper)}
.ahero{background:linear-gradient(180deg,#FBF3DE 0%,#FDF9EF 55%,#FFFFFF 100%)}
.alt,.page-hero{background:var(--paper-2)}
.page-hero{background:linear-gradient(180deg,#FBF3DE,#FDF9EF)}
.site-head{background:color-mix(in srgb,#FFFFFF 92%,transparent)}
.trust{background:#FFFFFF; border-color:var(--rule)}
.kpis div,.svc .chips span,.why-list div,.post .pb,.wz-card{border-color:var(--rule)}
.kpis div{background:#FDF8EC}
.why-list div{background:#FDF8EC}
.svc .chips span{background:#FBF4E2}
input[type=text],input[type=email],input[type=tel],select,textarea{background:#FFFDF8}
.mc.cta{background:#F7EDD2}
.sec-alt-gold{background:var(--paper-2)}
:root[data-theme="dark"] .alt{background:#0D1829}
:root[data-theme="dark"] .ahero,:root[data-theme="dark"] .page-hero{background:linear-gradient(180deg,#0D1829,#08111F)}
:root[data-theme="dark"] .site-head,:root[data-theme="dark"] .trust{background:#08111F}
:root[data-theme="dark"] .kpis div,:root[data-theme="dark"] .why-list div{background:#0D1829}
:root[data-theme="dark"] .svc .chips span{background:#0D1829}
:root[data-theme="dark"] .mc.cta{background:#211D10}
:root[data-theme="dark"] input[type=text],:root[data-theme="dark"] input[type=email],:root[data-theme="dark"] input[type=tel],:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#08111F}
/* ===== Full white backgrounds (v6) ===== */
:root:not([data-theme="dark"]){ --paper-2:#FFFFFF; --rule:#EDEDED; --gold-wash:#FBF6E6; }
.ahero,.page-hero,.alt,.trust,.site-head{background:#FFFFFF}
.alt{border-top:1px solid var(--rule)}
.page-hero{border-bottom:1px solid var(--rule)}
.kpis div,.why-list div{background:#FFFFFF; border:1px solid var(--rule)}
.svc .chips span{background:#F5F5F5}
input[type=text],input[type=email],input[type=tel],select,textarea{background:#FFFFFF}
.mc.cta{background:#FFFFFF; border:1.5px solid var(--gold)}
.kpis div.on{background:#FFFFFF; border-color:var(--gold)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper-2:#0D1829; --rule:#1F2D45; }
  :root:not([data-theme="light"]) .alt{background:#0D1829}
  :root:not([data-theme="light"]) .ahero,:root:not([data-theme="light"]) .page-hero{background:linear-gradient(180deg,#0D1829,#08111F)}
  :root:not([data-theme="light"]) .site-head,:root:not([data-theme="light"]) .trust{background:#08111F}
  :root:not([data-theme="light"]) .kpis div,:root:not([data-theme="light"]) .why-list div,:root:not([data-theme="light"]) .svc .chips span{background:#0D1829}
  :root:not([data-theme="light"]) .mc.cta{background:#211D10}
  :root:not([data-theme="light"]) input[type=text],:root:not([data-theme="light"]) input[type=email],:root:not([data-theme="light"]) input[type=tel],:root:not([data-theme="light"]) select,:root:not([data-theme="light"]) textarea{background:#08111F}
}


/* ===== v7: team builder hero card + comparison table ===== */
.teamcard{background:#fff; border:1px solid var(--rule); border-radius:20px; padding:22px; box-shadow:0 24px 60px -28px rgba(11,31,58,.28)}
.tc-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px}
.tc-h b{display:block; font-size:16px} .tc-h small{font-size:13px; color:var(--ink-3)}
.tc-count{font-size:13px; font-weight:700; color:var(--gold-text); background:var(--gold-wash); padding:4px 10px; border-radius:999px; white-space:nowrap}
.tc-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:520px){ .tc-list{grid-template-columns:1fr} }
.tc-row{width:100%; display:grid; grid-template-columns:36px 1fr 34px; gap:10px; align-items:center; text-align:left; padding:10px; border:1px solid var(--rule); border-radius:12px; background:#fff; cursor:pointer; color:var(--ink); transition:border-color .2s, background .2s}
.tc-row:hover{border-color:#CFCFCF}
.tc-ic{width:36px; height:36px; border-radius:10px; background:#F5F5F5; color:var(--navy); display:grid; place-items:center}
.tc-ic svg{width:18px; height:18px}
.tc-t b{display:block; font-size:14px; line-height:1.25}
.tc-t small{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.3; margin-top:2px}
.tc-sw{width:34px; height:20px; border-radius:999px; background:#DEDEDE; position:relative; transition:background .2s}
.tc-sw i{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .2s}
.tc-row[aria-pressed="true"]{border-color:var(--gold); background:#FFFCF3}
.tc-row[aria-pressed="true"] .tc-ic{background:var(--gold-wash); color:var(--gold-text)}
.tc-row[aria-pressed="true"] .tc-sw{background:var(--navy)}
.tc-row[aria-pressed="true"] .tc-sw i{transform:translateX(14px)}
.tc-go{width:100%; margin-top:14px}
.cmp-wrap{overflow-x:auto; border:1px solid var(--rule); border-radius:16px; background:#fff}
.cmp{width:100%; border-collapse:collapse; min-width:640px; font-size:15px}
.cmp th,.cmp td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--rule)}
.cmp thead th{font-size:16px; color:var(--navy); background:#FAFAFA}
.cmp tbody th{font-weight:600; color:var(--ink-2)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.mini-cases .mc b{color:var(--navy)}
:root[data-theme="dark"] .teamcard,:root[data-theme="dark"] .tc-row,:root[data-theme="dark"] .cmp-wrap,:root[data-theme="dark"] .cmp thead th{background:var(--surface)}
:root[data-theme="dark"] .tc-ic{background:var(--paper-2); color:var(--ink)}
:root[data-theme="dark"] .tc-row[aria-pressed="true"]{background:#1A1B14}
:root[data-theme="dark"] .tc-row[aria-pressed="true"] .tc-sw{background:var(--gold)}
:root[data-theme="dark"] .mini-cases .mc b,:root[data-theme="dark"] .cmp thead th{color:var(--ink)}
@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]) .teamcard,:root:not([data-theme="light"]) .tc-row,:root:not([data-theme="light"]) .cmp-wrap,:root:not([data-theme="light"]) .cmp thead th{background:var(--surface)}
 :root:not([data-theme="light"]) .tc-ic{background:var(--paper-2); color:var(--ink)}
 :root:not([data-theme="light"]) .tc-row[aria-pressed="true"]{background:#1A1B14}
 :root:not([data-theme="light"]) .tc-row[aria-pressed="true"] .tc-sw{background:var(--gold)}
 :root:not([data-theme="light"]) .mini-cases .mc b,:root:not([data-theme="light"]) .cmp thead th{color:var(--ink)}
}

/* ===== v8: plain white, no blue (light theme) ===== */
:root[data-theme="light"]{--navy:#111111; --navy-2:#FFFFFF; --navy-3:#2B2B2B; --ink:#111111; --ink-2:#555555; --ink-3:#6E6E6E; --rule:#E7E7E7;
  --band:#FFFFFF; --band-2:#FFFFFF; --band-text:#111111; --band-muted:#555555; --band-rule:#E7E7E7; --paper:#FFFFFF; --paper-2:#FFFFFF; --surface:#FFFFFF}
:root[data-theme="light"] body{background:#FFFFFF; color:#111111}
:root[data-theme="light"] .topbar{background:#FFFFFF; color:#555555; border-bottom:1px solid #E7E7E7}
:root[data-theme="light"] .topbar a{color:#111111}
:root[data-theme="light"] .site-head{background:rgba(255,255,255,.96); box-shadow:0 1px 0 #E7E7E7}
:root[data-theme="light"] .dark,:root[data-theme="light"] .plan,:root[data-theme="light"] .feat,:root[data-theme="light"] .feat .fr,:root[data-theme="light"] .cta-band .wrap,:root[data-theme="light"] .foot,:root[data-theme="light"] .page-hero,:root[data-theme="light"] .ahero,:root[data-theme="light"] .alt,:root[data-theme="light"] .trust,:root[data-theme="light"] .case-top,:root[data-theme="light"] .post .pt,:root[data-theme="light"] .photo,:root[data-theme="light"] .member .back,:root[data-theme="light"] .modal-box,:root[data-theme="light"] .ps-panel,:root[data-theme="light"] .summary-card,:root[data-theme="light"] .role,:root[data-theme="light"] .move,:root[data-theme="light"] .nums div,:root[data-theme="light"] .market-card,:root[data-theme="light"] .mk-tabs{background:#FFFFFF !important; color:#111111}
:root[data-theme="light"] .dark,:root[data-theme="light"] .alt,:root[data-theme="light"] .foot{border-top:1px solid #E7E7E7}
:root[data-theme="light"] .plan,:root[data-theme="light"] .feat,:root[data-theme="light"] .cta-band .wrap,:root[data-theme="light"] .summary-card,:root[data-theme="light"] .role,:root[data-theme="light"] .move,:root[data-theme="light"] .nums div,:root[data-theme="light"] .ps-panel,:root[data-theme="light"] .market-card,:root[data-theme="light"] .member .back,:root[data-theme="light"] .case-top{border:1px solid #E7E7E7}
:root[data-theme="light"] .feat .fr{border:0; border-left:1px solid #E7E7E7}
:root[data-theme="light"] .plan::after{display:none}
:root[data-theme="light"] .plan li{background:#FFFFFF; border-color:#E7E7E7}
:root[data-theme="light"] .plan h2,:root[data-theme="light"] .feat h3,:root[data-theme="light"] .cta-band h2,:root[data-theme="light"] .dark h2,:root[data-theme="light"] .dark h3{color:#111111}
:root[data-theme="light"] .plan .lede,:root[data-theme="light"] .feat p,:root[data-theme="light"] .cta-band p,:root[data-theme="light"] .dark .lede,:root[data-theme="light"] .plan li span,:root[data-theme="light"] .plan small{color:#555555}
:root[data-theme="light"] .feat .tagl,:root[data-theme="light"] .feat .rd,:root[data-theme="light"] .feat .fr b,:root[data-theme="light"] .nums dd,:root[data-theme="light"] .dark .eyebrow,:root[data-theme="light"] .plan .eyebrow,:root[data-theme="light"] .case-top .route,:root[data-theme="light"] .move .wh,:root[data-theme="light"] .phase .when,:root[data-theme="light"] .cd-metrics dd{color:#8A6A12}
:root[data-theme="light"] .feat .fr span,:root[data-theme="light"] .nums dt,:root[data-theme="light"] .case-top .lab{color:#555555}
:root[data-theme="light"] .dark .btn-gold,:root[data-theme="light"] .plan .btn-gold,:root[data-theme="light"] .cta-band .btn-ink{background:#111111; color:#FFFFFF}
:root[data-theme="light"] .dark .btn-gold:hover,:root[data-theme="light"] .plan .btn-gold:hover,:root[data-theme="light"] .cta-band .btn-ink:hover{background:#2B2B2B}
:root[data-theme="light"] .dark .btn-line,:root[data-theme="light"] .plan .btn-line,:root[data-theme="light"] .cta-band .btn-line{color:#111111; border-color:#D6D6D6}
:root[data-theme="light"] .btn-gold{background:#111111; color:#FFFFFF}
:root[data-theme="light"] .btn-gold:hover{background:#2B2B2B}
:root[data-theme="light"] .foot,:root[data-theme="light"] .foot a,:root[data-theme="light"] .foot li{color:#555555}
:root[data-theme="light"] .foot h4,:root[data-theme="light"] .foot .brand{color:#111111}
:root[data-theme="light"] .foot .tag{color:#8A6A12}
:root[data-theme="light"] .foot .wm span{color:#111111}
:root[data-theme="light"] .legal{border-color:#E7E7E7}
:root[data-theme="light"] .news input{background:#FFFFFF; color:#111111; border-color:#D6D6D6}
:root[data-theme="light"] .news-msg{color:#8A6A12}
:root[data-theme="light"] .site-head .wm span{color:#111111}
:root[data-theme="light"] .fab-main{background:#111111; color:#FFFFFF}
:root[data-theme="light"] .moves2 .no,:root[data-theme="light"] .tc-row[aria-pressed="true"] .tc-sw,:root[data-theme="light"] .add[aria-pressed="true"],:root[data-theme="light"] .chip[aria-pressed="true"],:root[data-theme="light"] .steps-nav button[aria-selected="true"] .dot,:root[data-theme="light"] .wz-steps li.on i,:root[data-theme="light"] .opt input:checked + label .bx,:root[data-theme="light"] .dash-tabs button[aria-selected="true"],:root[data-theme="light"] .tab[aria-selected="true"]{background:#111111; border-color:#111111; color:#FFFFFF}
:root[data-theme="light"] .opt input:checked + label{border-color:#111111; background:#FFFFFF}
:root[data-theme="light"] .moves2 li:last-child .no{background:#C9A84C; color:#111111}
:root[data-theme="light"] .mini-cases .mc b,:root[data-theme="light"] .cmp thead th{color:#111111}
:root[data-theme="light"] .cmp thead th{background:#FFFFFF}
:root[data-theme="light"] .role[aria-pressed="true"]{background:#FFFCF3 !important; border-color:#C9A84C}
:root[data-theme="light"] .role b{color:#111111} :root[data-theme="light"] .role small{color:#6E6E6E}
:root[data-theme="light"] .summary-card li{color:#111111; border-color:#E7E7E7}
:root[data-theme="light"] .member .back b{color:#8A6A12} :root[data-theme="light"] .member .back p{color:#555555}
:root[data-theme="light"] .photo{color:#111111} :root[data-theme="light"] .photo small{color:#555555}
:root[data-theme="light"] .slide figcaption span{color:#555555}
:root[data-theme="light"] .dots button::before{background:#E7E7E7}
:root[data-theme="light"] .post .pt{border-bottom:1px solid #E7E7E7; color:#8A6A12}
:root[data-theme="light"] .mega{background:#FFFFFF}
:root[data-theme="light"] .nav{background:#FFFFFF}
:root[data-theme="light"] .drawer{background:#FFFFFF}
:root[data-theme="light"] .toast{background:#111111; color:#FFFFFF}
:root[data-theme="light"] .vid span,:root[data-theme="light"] .vid b{color:#111111}
:root[data-theme="light"] .modal-box .icon-btn{color:#111111; border-color:#E7E7E7}
:root[data-theme="light"] .page-hero{border-bottom:1px solid #E7E7E7}
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]){--navy:#111111; --navy-2:#FFFFFF; --navy-3:#2B2B2B; --ink:#111111; --ink-2:#555555; --ink-3:#6E6E6E; --rule:#E7E7E7;
  --band:#FFFFFF; --band-2:#FFFFFF; --band-text:#111111; --band-muted:#555555; --band-rule:#E7E7E7; --paper:#FFFFFF; --paper-2:#FFFFFF; --surface:#FFFFFF}
:root:not([data-theme="dark"]) body{background:#FFFFFF; color:#111111}
:root:not([data-theme="dark"]) .topbar{background:#FFFFFF; color:#555555; border-bottom:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .topbar a{color:#111111}
:root:not([data-theme="dark"]) .site-head{background:rgba(255,255,255,.96); box-shadow:0 1px 0 #E7E7E7}
:root:not([data-theme="dark"]) .dark,:root:not([data-theme="dark"]) .plan,:root:not([data-theme="dark"]) .feat,:root:not([data-theme="dark"]) .feat .fr,:root:not([data-theme="dark"]) .cta-band .wrap,:root:not([data-theme="dark"]) .foot,:root:not([data-theme="dark"]) .page-hero,:root:not([data-theme="dark"]) .ahero,:root:not([data-theme="dark"]) .alt,:root:not([data-theme="dark"]) .trust,:root:not([data-theme="dark"]) .case-top,:root:not([data-theme="dark"]) .post .pt,:root:not([data-theme="dark"]) .photo,:root:not([data-theme="dark"]) .member .back,:root:not([data-theme="dark"]) .modal-box,:root:not([data-theme="dark"]) .ps-panel,:root:not([data-theme="dark"]) .summary-card,:root:not([data-theme="dark"]) .role,:root:not([data-theme="dark"]) .move,:root:not([data-theme="dark"]) .nums div,:root:not([data-theme="dark"]) .market-card,:root:not([data-theme="dark"]) .mk-tabs{background:#FFFFFF !important; color:#111111}
:root:not([data-theme="dark"]) .dark,:root:not([data-theme="dark"]) .alt,:root:not([data-theme="dark"]) .foot{border-top:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .plan,:root:not([data-theme="dark"]) .feat,:root:not([data-theme="dark"]) .cta-band .wrap,:root:not([data-theme="dark"]) .summary-card,:root:not([data-theme="dark"]) .role,:root:not([data-theme="dark"]) .move,:root:not([data-theme="dark"]) .nums div,:root:not([data-theme="dark"]) .ps-panel,:root:not([data-theme="dark"]) .market-card,:root:not([data-theme="dark"]) .member .back,:root:not([data-theme="dark"]) .case-top{border:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .feat .fr{border:0; border-left:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .plan::after{display:none}
:root:not([data-theme="dark"]) .plan li{background:#FFFFFF; border-color:#E7E7E7}
:root:not([data-theme="dark"]) .plan h2,:root:not([data-theme="dark"]) .feat h3,:root:not([data-theme="dark"]) .cta-band h2,:root:not([data-theme="dark"]) .dark h2,:root:not([data-theme="dark"]) .dark h3{color:#111111}
:root:not([data-theme="dark"]) .plan .lede,:root:not([data-theme="dark"]) .feat p,:root:not([data-theme="dark"]) .cta-band p,:root:not([data-theme="dark"]) .dark .lede,:root:not([data-theme="dark"]) .plan li span,:root:not([data-theme="dark"]) .plan small{color:#555555}
:root:not([data-theme="dark"]) .feat .tagl,:root:not([data-theme="dark"]) .feat .rd,:root:not([data-theme="dark"]) .feat .fr b,:root:not([data-theme="dark"]) .nums dd,:root:not([data-theme="dark"]) .dark .eyebrow,:root:not([data-theme="dark"]) .plan .eyebrow,:root:not([data-theme="dark"]) .case-top .route,:root:not([data-theme="dark"]) .move .wh,:root:not([data-theme="dark"]) .phase .when,:root:not([data-theme="dark"]) .cd-metrics dd{color:#8A6A12}
:root:not([data-theme="dark"]) .feat .fr span,:root:not([data-theme="dark"]) .nums dt,:root:not([data-theme="dark"]) .case-top .lab{color:#555555}
:root:not([data-theme="dark"]) .dark .btn-gold,:root:not([data-theme="dark"]) .plan .btn-gold,:root:not([data-theme="dark"]) .cta-band .btn-ink{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .dark .btn-gold:hover,:root:not([data-theme="dark"]) .plan .btn-gold:hover,:root:not([data-theme="dark"]) .cta-band .btn-ink:hover{background:#2B2B2B}
:root:not([data-theme="dark"]) .dark .btn-line,:root:not([data-theme="dark"]) .plan .btn-line,:root:not([data-theme="dark"]) .cta-band .btn-line{color:#111111; border-color:#D6D6D6}
:root:not([data-theme="dark"]) .btn-gold{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .btn-gold:hover{background:#2B2B2B}
:root:not([data-theme="dark"]) .foot,:root:not([data-theme="dark"]) .foot a,:root:not([data-theme="dark"]) .foot li{color:#555555}
:root:not([data-theme="dark"]) .foot h4,:root:not([data-theme="dark"]) .foot .brand{color:#111111}
:root:not([data-theme="dark"]) .foot .tag{color:#8A6A12}
:root:not([data-theme="dark"]) .foot .wm span{color:#111111}
:root:not([data-theme="dark"]) .legal{border-color:#E7E7E7}
:root:not([data-theme="dark"]) .news input{background:#FFFFFF; color:#111111; border-color:#D6D6D6}
:root:not([data-theme="dark"]) .news-msg{color:#8A6A12}
:root:not([data-theme="dark"]) .site-head .wm span{color:#111111}
:root:not([data-theme="dark"]) .fab-main{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .moves2 .no,:root:not([data-theme="dark"]) .tc-row[aria-pressed="true"] .tc-sw,:root:not([data-theme="dark"]) .add[aria-pressed="true"],:root:not([data-theme="dark"]) .chip[aria-pressed="true"],:root:not([data-theme="dark"]) .steps-nav button[aria-selected="true"] .dot,:root:not([data-theme="dark"]) .wz-steps li.on i,:root:not([data-theme="dark"]) .opt input:checked + label .bx,:root:not([data-theme="dark"]) .dash-tabs button[aria-selected="true"],:root:not([data-theme="dark"]) .tab[aria-selected="true"]{background:#111111; border-color:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .opt input:checked + label{border-color:#111111; background:#FFFFFF}
:root:not([data-theme="dark"]) .moves2 li:last-child .no{background:#C9A84C; color:#111111}
:root:not([data-theme="dark"]) .mini-cases .mc b,:root:not([data-theme="dark"]) .cmp thead th{color:#111111}
:root:not([data-theme="dark"]) .cmp thead th{background:#FFFFFF}
:root:not([data-theme="dark"]) .role[aria-pressed="true"]{background:#FFFCF3 !important; border-color:#C9A84C}
:root:not([data-theme="dark"]) .role b{color:#111111} :root:not([data-theme="dark"]) .role small{color:#6E6E6E}
:root:not([data-theme="dark"]) .summary-card li{color:#111111; border-color:#E7E7E7}
:root:not([data-theme="dark"]) .member .back b{color:#8A6A12} :root:not([data-theme="dark"]) .member .back p{color:#555555}
:root:not([data-theme="dark"]) .photo{color:#111111} :root:not([data-theme="dark"]) .photo small{color:#555555}
:root:not([data-theme="dark"]) .slide figcaption span{color:#555555}
:root:not([data-theme="dark"]) .dots button::before{background:#E7E7E7}
:root:not([data-theme="dark"]) .post .pt{border-bottom:1px solid #E7E7E7; color:#8A6A12}
:root:not([data-theme="dark"]) .mega{background:#FFFFFF}
:root:not([data-theme="dark"]) .nav{background:#FFFFFF}
:root:not([data-theme="dark"]) .drawer{background:#FFFFFF}
:root:not([data-theme="dark"]) .toast{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .vid span,:root:not([data-theme="dark"]) .vid b{color:#111111}
:root:not([data-theme="dark"]) .modal-box .icon-btn{color:#111111; border-color:#E7E7E7}
:root:not([data-theme="dark"]) .page-hero{border-bottom:1px solid #E7E7E7}
}
@media not all and (prefers-color-scheme: dark){
:root:not([data-theme="dark"]){--navy:#111111; --navy-2:#FFFFFF; --navy-3:#2B2B2B; --ink:#111111; --ink-2:#555555; --ink-3:#6E6E6E; --rule:#E7E7E7;
  --band:#FFFFFF; --band-2:#FFFFFF; --band-text:#111111; --band-muted:#555555; --band-rule:#E7E7E7; --paper:#FFFFFF; --paper-2:#FFFFFF; --surface:#FFFFFF}
:root:not([data-theme="dark"]) body{background:#FFFFFF; color:#111111}
:root:not([data-theme="dark"]) .topbar{background:#FFFFFF; color:#555555; border-bottom:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .topbar a{color:#111111}
:root:not([data-theme="dark"]) .site-head{background:rgba(255,255,255,.96); box-shadow:0 1px 0 #E7E7E7}
:root:not([data-theme="dark"]) .dark,:root:not([data-theme="dark"]) .plan,:root:not([data-theme="dark"]) .feat,:root:not([data-theme="dark"]) .feat .fr,:root:not([data-theme="dark"]) .cta-band .wrap,:root:not([data-theme="dark"]) .foot,:root:not([data-theme="dark"]) .page-hero,:root:not([data-theme="dark"]) .ahero,:root:not([data-theme="dark"]) .alt,:root:not([data-theme="dark"]) .trust,:root:not([data-theme="dark"]) .case-top,:root:not([data-theme="dark"]) .post .pt,:root:not([data-theme="dark"]) .photo,:root:not([data-theme="dark"]) .member .back,:root:not([data-theme="dark"]) .modal-box,:root:not([data-theme="dark"]) .ps-panel,:root:not([data-theme="dark"]) .summary-card,:root:not([data-theme="dark"]) .role,:root:not([data-theme="dark"]) .move,:root:not([data-theme="dark"]) .nums div,:root:not([data-theme="dark"]) .market-card,:root:not([data-theme="dark"]) .mk-tabs{background:#FFFFFF !important; color:#111111}
:root:not([data-theme="dark"]) .dark,:root:not([data-theme="dark"]) .alt,:root:not([data-theme="dark"]) .foot{border-top:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .plan,:root:not([data-theme="dark"]) .feat,:root:not([data-theme="dark"]) .cta-band .wrap,:root:not([data-theme="dark"]) .summary-card,:root:not([data-theme="dark"]) .role,:root:not([data-theme="dark"]) .move,:root:not([data-theme="dark"]) .nums div,:root:not([data-theme="dark"]) .ps-panel,:root:not([data-theme="dark"]) .market-card,:root:not([data-theme="dark"]) .member .back,:root:not([data-theme="dark"]) .case-top{border:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .feat .fr{border:0; border-left:1px solid #E7E7E7}
:root:not([data-theme="dark"]) .plan::after{display:none}
:root:not([data-theme="dark"]) .plan li{background:#FFFFFF; border-color:#E7E7E7}
:root:not([data-theme="dark"]) .plan h2,:root:not([data-theme="dark"]) .feat h3,:root:not([data-theme="dark"]) .cta-band h2,:root:not([data-theme="dark"]) .dark h2,:root:not([data-theme="dark"]) .dark h3{color:#111111}
:root:not([data-theme="dark"]) .plan .lede,:root:not([data-theme="dark"]) .feat p,:root:not([data-theme="dark"]) .cta-band p,:root:not([data-theme="dark"]) .dark .lede,:root:not([data-theme="dark"]) .plan li span,:root:not([data-theme="dark"]) .plan small{color:#555555}
:root:not([data-theme="dark"]) .feat .tagl,:root:not([data-theme="dark"]) .feat .rd,:root:not([data-theme="dark"]) .feat .fr b,:root:not([data-theme="dark"]) .nums dd,:root:not([data-theme="dark"]) .dark .eyebrow,:root:not([data-theme="dark"]) .plan .eyebrow,:root:not([data-theme="dark"]) .case-top .route,:root:not([data-theme="dark"]) .move .wh,:root:not([data-theme="dark"]) .phase .when,:root:not([data-theme="dark"]) .cd-metrics dd{color:#8A6A12}
:root:not([data-theme="dark"]) .feat .fr span,:root:not([data-theme="dark"]) .nums dt,:root:not([data-theme="dark"]) .case-top .lab{color:#555555}
:root:not([data-theme="dark"]) .dark .btn-gold,:root:not([data-theme="dark"]) .plan .btn-gold,:root:not([data-theme="dark"]) .cta-band .btn-ink{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .dark .btn-gold:hover,:root:not([data-theme="dark"]) .plan .btn-gold:hover,:root:not([data-theme="dark"]) .cta-band .btn-ink:hover{background:#2B2B2B}
:root:not([data-theme="dark"]) .dark .btn-line,:root:not([data-theme="dark"]) .plan .btn-line,:root:not([data-theme="dark"]) .cta-band .btn-line{color:#111111; border-color:#D6D6D6}
:root:not([data-theme="dark"]) .btn-gold{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .btn-gold:hover{background:#2B2B2B}
:root:not([data-theme="dark"]) .foot,:root:not([data-theme="dark"]) .foot a,:root:not([data-theme="dark"]) .foot li{color:#555555}
:root:not([data-theme="dark"]) .foot h4,:root:not([data-theme="dark"]) .foot .brand{color:#111111}
:root:not([data-theme="dark"]) .foot .tag{color:#8A6A12}
:root:not([data-theme="dark"]) .foot .wm span{color:#111111}
:root:not([data-theme="dark"]) .legal{border-color:#E7E7E7}
:root:not([data-theme="dark"]) .news input{background:#FFFFFF; color:#111111; border-color:#D6D6D6}
:root:not([data-theme="dark"]) .news-msg{color:#8A6A12}
:root:not([data-theme="dark"]) .site-head .wm span{color:#111111}
:root:not([data-theme="dark"]) .fab-main{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .moves2 .no,:root:not([data-theme="dark"]) .tc-row[aria-pressed="true"] .tc-sw,:root:not([data-theme="dark"]) .add[aria-pressed="true"],:root:not([data-theme="dark"]) .chip[aria-pressed="true"],:root:not([data-theme="dark"]) .steps-nav button[aria-selected="true"] .dot,:root:not([data-theme="dark"]) .wz-steps li.on i,:root:not([data-theme="dark"]) .opt input:checked + label .bx,:root:not([data-theme="dark"]) .dash-tabs button[aria-selected="true"],:root:not([data-theme="dark"]) .tab[aria-selected="true"]{background:#111111; border-color:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .opt input:checked + label{border-color:#111111; background:#FFFFFF}
:root:not([data-theme="dark"]) .moves2 li:last-child .no{background:#C9A84C; color:#111111}
:root:not([data-theme="dark"]) .mini-cases .mc b,:root:not([data-theme="dark"]) .cmp thead th{color:#111111}
:root:not([data-theme="dark"]) .cmp thead th{background:#FFFFFF}
:root:not([data-theme="dark"]) .role[aria-pressed="true"]{background:#FFFCF3 !important; border-color:#C9A84C}
:root:not([data-theme="dark"]) .role b{color:#111111} :root:not([data-theme="dark"]) .role small{color:#6E6E6E}
:root:not([data-theme="dark"]) .summary-card li{color:#111111; border-color:#E7E7E7}
:root:not([data-theme="dark"]) .member .back b{color:#8A6A12} :root:not([data-theme="dark"]) .member .back p{color:#555555}
:root:not([data-theme="dark"]) .photo{color:#111111} :root:not([data-theme="dark"]) .photo small{color:#555555}
:root:not([data-theme="dark"]) .slide figcaption span{color:#555555}
:root:not([data-theme="dark"]) .dots button::before{background:#E7E7E7}
:root:not([data-theme="dark"]) .post .pt{border-bottom:1px solid #E7E7E7; color:#8A6A12}
:root:not([data-theme="dark"]) .mega{background:#FFFFFF}
:root:not([data-theme="dark"]) .nav{background:#FFFFFF}
:root:not([data-theme="dark"]) .drawer{background:#FFFFFF}
:root:not([data-theme="dark"]) .toast{background:#111111; color:#FFFFFF}
:root:not([data-theme="dark"]) .vid span,:root:not([data-theme="dark"]) .vid b{color:#111111}
:root:not([data-theme="dark"]) .modal-box .icon-btn{color:#111111; border-color:#E7E7E7}
:root:not([data-theme="dark"]) .page-hero{border-bottom:1px solid #E7E7E7}
}

/* =================== v9 CREATIVE WHITE HOME =================== */
html,body{background:#FFFFFF !important; color-scheme:light}
.btn{gap:10px} .btn svg{width:18px; height:18px}
.btn-lg{min-height:56px; padding:0 30px; font-size:16.5px}
.soft{background:#FFFFFF; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF}
.blob{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; opacity:.55}
.blob.b1{width:520px; height:520px; background:#F6E7BE; right:-120px; top:-140px}
.blob.b2{width:360px; height:360px; background:#FBF1D8; left:-160px; bottom:-120px}
.blob.b3{width:420px; height:420px; background:#F6E7BE; left:50%; top:-220px; transform:translateX(-50%); opacity:.6}

/* hero */
.h2o{position:relative; overflow:hidden; padding:clamp(56px,7vw,100px) 0 clamp(64px,8vw,110px); background:#FFFFFF}
.h2o-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width:1000px){ .h2o-grid{grid-template-columns:minmax(0,1fr)} }
.pill{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:999px; background:#FFFFFF; border:1px solid #ECE6D6; color:#111; box-shadow:0 6px 18px -10px rgba(0,0,0,.2)}
.pill .dot{width:8px; height:8px; border-radius:50%; background:#22A55A; box-shadow:0 0 0 4px #DDF3E6}
.h2o h1{font-size:clamp(44px,6.2vw,84px); font-weight:800; line-height:1.0; letter-spacing:-0.045em; margin:24px 0 0; color:#111}
.rot-wrap{display:inline-block; position:relative; background:linear-gradient(transparent 70%,#F3E3B5 70%,#F3E3B5 94%,transparent 94%); padding:0 6px; margin-left:-6px}
.rot{display:inline-block; color:#8A6A12; transition:opacity .35s, transform .35s var(--ease)}
.rot.out{opacity:0; transform:translateY(12px)}
.h2o .lede{font-size:clamp(17px,1.5vw,19.5px); color:#555555; margin-top:24px; max-width:52ch}
.h2o .hero-cta{margin-top:34px}
.hero-team{display:flex; align-items:center; gap:14px; margin-top:34px; font-size:14.5px}
.hero-team b{color:#111} .hero-team small{color:#6E6E6E}
.avs{display:flex}
.av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; color:#111; border:3px solid #fff; margin-left:-10px; box-shadow:0 2px 6px rgba(0,0,0,.08)}
.avs .av:first-child{margin-left:0}

/* collage */
.collage{position:relative; min-height:520px}
@media (max-width:1000px){ .collage{min-height:460px; max-width:620px; width:100%; margin:0 auto} }
@media (max-width:560px){ .collage{min-height:400px} }
.m-browser{position:absolute; inset:30px 40px 70px 10px; background:#fff; border:1px solid #EDEDED; border-radius:18px; box-shadow:0 40px 80px -30px rgba(17,17,17,.28); overflow:hidden}
.mb-bar{display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid #F1F1F1; background:#FAFAFA}
.mb-bar i{width:10px; height:10px; border-radius:50%; background:#E7E7E7}
.mb-bar i:nth-child(1){background:#F3B4A8} .mb-bar i:nth-child(2){background:#F3D79A} .mb-bar i:nth-child(3){background:#AEDDBE}
.mb-bar span{margin-left:12px; font-size:12px; color:#6E6E6E; background:#fff; border:1px solid #EFEFEF; border-radius:999px; padding:3px 12px; flex:1; max-width:220px}
.mb-body{padding:16px}
.mb-hero{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; background:linear-gradient(135deg,#FBF4E2,#FFFFFF); border-radius:14px; padding:18px; border:1px solid #F3EAD3}
.mb-hero b{display:block; font-size:clamp(15px,1.4vw,19px); letter-spacing:-0.02em; color:#111}
.mb-hero small{display:block; font-size:12px; color:#6E6E6E; margin-top:4px}
.mb-btn{display:inline-block; margin-top:12px; font-size:11.5px; font-weight:700; background:#111; color:#fff; border-radius:999px; padding:6px 12px}
.mb-art{position:relative; height:110px}
.mb-art span{position:absolute; border-radius:20px}
.mb-art .s1{width:70px; height:96px; background:#C9A84C; right:58px; top:8px; transform:rotate(-8deg)}
.mb-art .s2{width:64px; height:84px; background:#111; right:8px; top:18px; transform:rotate(6deg)}
.mb-art .s3{width:30px; height:30px; border-radius:50%; background:#F3E3B5; right:110px; bottom:0}
.mb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.mb-grid div{border:1px solid #F1F1F1; border-radius:12px; padding:8px}
.pimg{display:grid; place-items:center; height:62px; border-radius:9px}
.pimg em{display:block}
.pimg .sh0{width:26px; height:38px; border-radius:8px; background:#C9A84C}
.pimg .sh1{width:34px; height:34px; border-radius:50%; background:#111}
.pimg .sh2{width:40px; height:24px; border-radius:6px; background:#8FCBA3}
.mb-grid b{display:block; height:7px; width:70%; background:#E7E7E7; border-radius:4px; margin-top:8px}
.mb-grid s{display:block; height:7px; width:40%; background:#F3E3B5; border-radius:4px; margin-top:5px}
.m-card{position:absolute; background:#fff; border:1px solid #EDEDED; border-radius:16px; padding:14px; box-shadow:0 24px 48px -20px rgba(17,17,17,.25); font-size:13px}
.m-card b{display:block; color:#111; font-size:13.5px} .m-card small{display:block; color:#6E6E6E; font-size:12px}
.m-chat{width:230px; right:-6px; bottom:0}
.mc-h{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.mc-h .av{width:32px; height:32px; border:0; margin:0; font-size:12px}
.bub{margin:6px 0; padding:8px 12px; border-radius:14px; font-size:12.5px; max-width:90%; line-height:1.4}
.bub.in{background:#F4F4F4; color:#111; border-bottom-left-radius:4px}
.bub.out{background:#111; color:#fff; margin-left:auto; border-bottom-right-radius:4px; width:fit-content}
.typing{display:inline-flex; gap:3px; padding:8px 10px; background:#F4F4F4; border-radius:12px; margin-top:2px}
.typing i{width:6px; height:6px; border-radius:50%; background:#A3A3A3}
@media (prefers-reduced-motion: no-preference){ .typing i{animation:tp 1.2s infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s} @keyframes tp{0%,60%,100%{opacity:.3; transform:none} 30%{opacity:1; transform:translateY(-3px)}} }
.m-stat{width:170px; left:-14px; bottom:24px}
.m-stat b{font-size:20px; margin:2px 0 6px; letter-spacing:-0.02em}
.m-stat svg{width:100%; height:36px}
.m-mail,.m-deal{display:flex; gap:10px; align-items:center; width:230px}
.m-mail{right:-10px; top:0}
.m-deal{left:40px; top:-6px; width:220px}
.mi2{width:34px; height:34px; border-radius:10px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center; flex:none}
.mi2 svg{width:18px; height:18px}
.mi2.g{background:#DDF3E6; color:#1E7A46}
@media (max-width:560px){ .m-deal{display:none} .m-mail{top:-10px; right:0; width:200px} .m-chat{width:200px} .m-stat{width:140px; left:0} .m-browser{inset:30px 10px 80px 0} }
@media (prefers-reduced-motion: no-preference){
  .m-card{animation:pop .7s var(--ease) both} .m-mail{animation-delay:.3s} .m-chat{animation-delay:.5s} .m-stat{animation-delay:.7s} .m-deal{animation-delay:.9s}
  .m-browser{animation:rise .8s var(--ease) both}
  @keyframes pop{from{opacity:0; transform:translateY(16px) scale(.96)} to{opacity:1; transform:none}}
  @keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
}

/* platforms marquee */
.plat2{padding:30px 0 34px; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF; background:#fff}
.plat2 p{text-align:center; font-size:13.5px; color:#6E6E6E; font-weight:600; margin-bottom:18px}
.plat2 .lm .track{gap:64px; animation-duration:35s}
.plat2 .lg{font-size:21px; font-weight:800; color:#A3A3A3; letter-spacing:-0.03em; opacity:1}

/* bento */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1050px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .bento{grid-template-columns:1fr} }
.bc{position:relative; border:1px solid #EDEDED; border-radius:22px; background:#fff; padding:18px; display:flex; flex-direction:column; gap:14px; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.bc:hover{transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(17,17,17,.3); border-color:#E2D3A6}
.bc.b-wide{grid-column:span 2}
@media (max-width:600px){ .bc.b-wide{grid-column:auto} }
.bv{height:160px; border-radius:16px; background:linear-gradient(160deg,#FCF7EA,#FFFFFF 70%); border:1px solid #F3ECDB; padding:14px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.bt{padding:0 4px; flex:1}
.bi2{display:none}
.bc h3{font-size:19px} .bc h3 a{text-decoration:none} .bc h3 a::after{content:""; position:absolute; inset:0; border-radius:22px}
.bc p{font-size:14.5px; color:#555555; margin-top:6px}
.bc .add{position:relative; z-index:1; align-self:flex-start}
/* bento visuals */
.v-browser{width:100%; height:100%; background:#fff; border:1px solid #EDEDED; border-radius:12px; overflow:hidden}
.v-browser .mb-bar{padding:8px 10px} .v-browser .mb-bar i{width:8px; height:8px}
.vb-rows{padding:12px}
.vb-rows span{display:block; height:9px; border-radius:5px; background:#111; margin-bottom:7px}
.vb-rows .w60{width:55%} .vb-rows .w40{width:35%; background:#E7E7E7}
.vb-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px}
.vb-cards i{height:46px; border-radius:8px; background:#F3E3B5} .vb-cards i:nth-child(2){background:#EFEFEF} .vb-cards i:nth-child(3){background:#EAF5EE} .vb-cards i:nth-child(4){background:#FAF1DA}
.v-serp{width:100%; font-size:12px}
.v-serp .q{display:flex; gap:8px; align-items:center; background:#fff; border:1px solid #E7E7E7; border-radius:999px; padding:7px 12px; color:#555555; margin-bottom:8px}
.v-serp .q svg{width:14px; height:14px}
.v-serp .r{display:flex; gap:10px; align-items:center; padding:6px 8px; border-radius:10px; color:#A3A3A3}
.v-serp .r b{font-size:12px; color:#A3A3A3; width:22px}
.v-serp .r em{display:block; font-style:normal; font-weight:700}
.v-serp .r.top{background:#fff; border:1px solid #E2D3A6; color:#111}
.v-serp .r.top b{color:#8A6A12} .v-serp .r.top em{color:#8A6A12}
.v-chat{width:100%} .v-chat .bub{font-size:12px}
.csat{display:flex; gap:6px; align-items:center; margin-top:8px; font-size:12px; color:#111}
.csat svg{width:14px; height:14px; color:#C9A84C}
.v-flow{display:flex; flex-direction:column; align-items:center; gap:0; font-size:12px; font-weight:700}
.v-flow span{background:#fff; border:1px solid #E7E7E7; border-radius:999px; padding:6px 14px; color:#111}
.v-flow span.on{background:#111; color:#fff; border-color:#111}
.v-flow i{width:2px; height:12px; background:#E2D3A6}
.v-kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%}
.v-kanban div{background:#fff; border:1px solid #EDEDED; border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:6px; min-height:120px}
.v-kanban small{font-size:11px; font-weight:700; color:#6E6E6E}
.v-kanban span{font-size:11.5px; background:#FAFAFA; border:1px solid #F1F1F1; border-radius:8px; padding:5px 7px; color:#111}
.v-kanban div:last-child span{background:#F7EDD2; border-color:#EBDDB2}
.v-grid{display:grid; grid-template-columns:repeat(3,52px); gap:6px}
.v-grid i{height:52px; border-radius:10px}
.v-cert{text-align:center; background:#fff; border:1px solid #EDEDED; border-radius:14px; padding:14px 22px}
.v-cert .seal{width:40px; height:40px; border-radius:50%; background:#C9A84C; color:#111; display:grid; place-items:center; margin:0 auto 8px}
.v-cert .seal svg{width:20px; height:20px}
.v-cert b{display:block; font-size:14px} .v-cert small{font-size:11.5px; color:#6E6E6E}
.v-cert .bar{height:6px; background:#F4F4F4; border-radius:3px; margin-top:10px; overflow:hidden} .v-cert .bar i{display:block; height:100%; background:#22A55A}
.v-pal{display:flex; gap:8px; align-items:center}
.v-pal i{width:36px; height:64px; border-radius:10px}
.v-pal b{font-size:44px; font-weight:800; margin-left:8px; letter-spacing:-0.04em; color:#111}

/* stats band */
.statband{padding:clamp(48px,6vw,72px) 0; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF; background:#fff}
.nums3{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; gap:20px}
@media (max-width:820px){ .nums3{grid-template-columns:1fr 1fr; row-gap:32px} }
.nums3 div{display:flex; flex-direction:column-reverse; justify-content:flex-end; text-align:center}
.nums3 dd{margin:0; font-size:clamp(46px,5vw,68px); font-weight:800; letter-spacing:-0.05em; line-height:1; color:#111; font-variant-numeric:tabular-nums}
.nums3 dd::after{content:""; display:block; width:36px; height:4px; border-radius:2px; background:#C9A84C; margin:14px auto 0}
.nums3 dt{font-size:14.5px; color:#555555; margin-top:12px}

/* build */
.build2{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:960px){ .build2{grid-template-columns:1fr} }

/* steps */
.steps4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:960px){ .steps4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps4{grid-template-columns:1fr} }
.st4{border:1px solid #EDEDED; border-radius:20px; padding:26px; background:#fff; position:relative; overflow:hidden}
.st4 .n{font-size:64px; font-weight:800; letter-spacing:-0.05em; line-height:1; color:#F3E3B5; display:block}
.st4 .when{display:inline-block; margin-top:14px; font-size:12.5px; font-weight:700; background:#111; color:#fff; padding:4px 10px; border-radius:999px}
.st4 h3{font-size:21px; margin:12px 0 8px}
.st4 p{font-size:14.5px; color:#555555}

/* team photos */
.leads{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){ .leads{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .leads{grid-template-columns:1fr 1fr} }
.lead{margin:0}
.lead .ph{aspect-ratio:3/4; border-radius:20px; display:grid; place-items:center; overflow:hidden; position:relative}
.lead .ph span{font-family:var(--serif); font-size:64px; font-weight:700; color:#111; opacity:.8}
.lead .ph img{width:100%; height:100%; object-fit:cover}
.lead figcaption{margin-top:12px}
.lead b{display:block; font-size:15.5px} .lead small{font-size:13px; color:#6E6E6E}

/* big cta */
.bigcta{position:relative; overflow:hidden; text-align:center; border:1px solid #ECE6D6; border-radius:32px; padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px); background:#fff}
.bigcta h2{margin:0 auto; font-size:clamp(34px,4.6vw,58px)}
.bigcta .lede{margin:18px auto 0}
.bigcta .hero-cta{margin-top:32px}
.bigcta .eyebrow{justify-content:center}

/* teamcard on white */
.teamcard{box-shadow:0 30px 70px -36px rgba(17,17,17,.3)}
.tc-row[aria-pressed="true"] .tc-sw{background:#111 !important}

.bv{height:176px}
.v-serp{font-size:11.5px; align-self:center}
.v-serp .q{padding:6px 10px; margin-bottom:6px; white-space:nowrap; overflow:hidden}
.v-serp .r{padding:5px 8px}
.bigcta{background:linear-gradient(180deg,#FFFFFF,#FFFFFF); border-color:#E9E2CF}
.h2o h1{min-height:3em}

:root,:root[data-theme="light"]{--ink:#111111; --ink-2:#555555; --ink-3:#6E6E6E; --rule:#E9E9E9; --navy:#111111; --navy-3:#2B2B2B; --band-muted:#555555; --band-rule:#E9E9E9; --focus:#B8860B}
.lede{color:#555555}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,#main:focus{outline:none}

/* ===== v10: competitive upgrades ===== */
.cmp2-wrap{overflow-x:auto; border:1px solid #EDEDED; border-radius:22px; background:#fff}
.cmp2{width:100%; min-width:820px; border-collapse:separate; border-spacing:0; font-size:15px}
.cmp2 th,.cmp2 td{padding:16px 18px; text-align:center; border-bottom:1px solid #F1F1F1}
.cmp2 thead th{font-size:14.5px; font-weight:700; color:#555; background:#fff; vertical-align:bottom}
.cmp2 tbody th{text-align:left; font-weight:600; color:#111; width:30%}
.cmp2 tr:last-child th,.cmp2 tr:last-child td{border-bottom:0}
.cmp2 .us{background:#FFFBF0; color:#111}
.cmp2 thead .us{border-top:3px solid #C9A84C; color:#111; font-size:15.5px}
.cmp2 thead .us img{display:block; margin:0 auto 8px; border-radius:50%}
.cy{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#DDF3E6; color:#1E7A46}
.cy svg,.cn svg{width:16px; height:16px}
.cn{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#F4F4F4; color:#9A9A9A}
.cp{font-size:13.5px; color:#555}
.us .cp{color:#111; font-weight:600}
.week{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:940px){ .week{grid-template-columns:1fr} }
.wk-tabs{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:28px}
.wk-tabs button{border:1.5px solid #EDEDED; background:#fff; border-radius:14px; padding:12px 6px; cursor:pointer; text-align:center; color:#111; transition:all .2s}
.wk-tabs button b{display:block; font-size:16px} .wk-tabs button small{font-size:12px; color:#6E6E6E}
.wk-tabs button:hover{border-color:#D9C99A}
.wk-tabs button[aria-selected="true"]{background:#111; border-color:#111; color:#fff}
.wk-tabs button[aria-selected="true"] small{color:#E2C46F}
.wk-panel{border:1px solid #EDEDED; border-radius:24px; padding:clamp(22px,3vw,34px); background:#fff; box-shadow:0 30px 70px -40px rgba(17,17,17,.35); min-height:300px}
.wk-h{display:flex; gap:14px; align-items:center; padding-bottom:18px; border-bottom:1px solid #F1F1F1; margin-bottom:8px}
.wk-day{width:56px; height:56px; border-radius:16px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center; font-weight:800; font-size:16px}
.wk-h b{display:block; font-size:22px; letter-spacing:-0.02em} .wk-h small{color:#6E6E6E; font-size:13px}
.wk-panel ul{list-style:none; margin:0; padding:0}
.wk-panel li{display:flex; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid #F4F4F4; font-size:16px; font-weight:500}
.wk-panel li:last-child{border:0}
.wk-chk{width:30px; height:30px; border-radius:50%; background:#DDF3E6; color:#1E7A46; display:grid; place-items:center; flex:none}
.wk-chk svg{width:16px; height:16px}
@media (prefers-reduced-motion: no-preference){ .wk-panel li{animation:pop .4s var(--ease) both} }
.sec2{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:940px){ .sec2{grid-template-columns:1fr} }
.sec-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .sec-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .sec-grid{grid-template-columns:1fr} }
.sec-grid div{border:1px solid #EDEDED; border-radius:18px; padding:20px; background:#fff}
.sg-ic{width:40px; height:40px; border-radius:12px; background:#111; color:#C9A84C; display:grid; place-items:center; margin-bottom:14px}
.sg-ic svg{width:20px; height:20px}
.sec-grid h3{font-size:16.5px; margin-bottom:6px}
.sec-grid p{font-size:14px; color:#555}
/* mobile sticky CTA */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:95; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.96); border-top:1px solid #EDEDED; backdrop-filter:blur(8px)}
  .mbar .btn{flex:1; min-height:48px; font-size:15px}
  .fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:72px}
}
html{overflow-x:clip} .drawer:not(.open){display:none}
.cmp2-wrap,.cmp2 td,.cmp2 th{position:relative}

/* ===== v11: Searchlogy SEO partner ===== */
.pbadge{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:#555; padding:7px 14px 7px 7px; border:1px solid #EDEDED; border-radius:999px; background:#fff; margin-bottom:18px}
.pbadge b{color:#111}
.pb-dot{width:26px; height:26px; border-radius:50%; background:#111; color:#C9A84C; display:grid; place-items:center; font-weight:800; font-size:13px}
.partner-sec{border-top:1px solid #EFEFEF}
.ph-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:940px){ .ph-grid{grid-template-columns:1fr} }
.ph-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ph-stats div{border:1px solid #EDEDED; border-radius:18px; padding:20px; background:#fff}
.ph-stats .big{grid-column:1/-1; background:#111; border-color:#111; color:#fff}
.ph-stats b{display:block; font-size:clamp(30px,3.4vw,42px); font-weight:800; letter-spacing:-0.04em; line-height:1}
.ph-stats .big b{font-size:clamp(48px,6vw,72px); color:#E2C46F}
.ph-stats span{display:block; font-size:13.5px; color:#555; margin-top:8px}
.ph-stats .big span{color:#D6D6D6}
.pclients{display:flex; flex-wrap:wrap; align-items:center; gap:14px 36px; margin-top:40px; padding-top:26px; border-top:1px solid #EFEFEF}
.pclients span{font-size:13.5px; font-weight:600; color:#6E6E6E}
.pclients ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 32px}
.pclients li{font-weight:800; font-size:18px; color:#9A9A9A; letter-spacing:-0.02em}
.psb{border:1px solid #E9DFC3; background:#FFFCF3; border-radius:22px; padding:clamp(22px,3vw,32px); margin-bottom:clamp(40px,5vw,56px)}
.psb h2{font-size:clamp(24px,2.6vw,30px)}
.psb p{color:#555; margin:10px 0 20px; max-width:62ch}
.psb-nums{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
@media (max-width:560px){ .psb-nums{grid-template-columns:1fr} }
.psb-nums div{background:#fff; border:1px solid #EDEDED; border-radius:14px; padding:14px}
.psb-nums b{display:block; font-size:26px; font-weight:800; letter-spacing:-0.03em}
.psb-nums span{font-size:13px; color:#6E6E6E}
.src{font-size:13px; color:#6E6E6E; margin-top:22px}
.src a{color:#8A6A12; font-weight:600}
.gsc{border:1px solid #EDEDED; border-radius:24px; padding:clamp(18px,3vw,30px); background:#fff; box-shadow:0 30px 70px -44px rgba(17,17,17,.35)}
.gsc-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.gsc-h b{display:block} .gsc-h small{color:#6E6E6E; font-size:13px}
.g-logo{width:40px; height:40px; border-radius:12px; border:1px solid #EDEDED; display:grid; place-items:center; font-weight:800; font-size:20px; color:#111}
.g-tag{margin-left:auto; font-size:12.5px; font-weight:700; background:#F7EDD2; color:#8A6A12; padding:5px 11px; border-radius:999px}
.gsc-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:16px; overflow:hidden; border:1px solid #EDEDED}
@media (max-width:640px){ .gsc-kpis{grid-template-columns:1fr 1fr} }
.gsc-kpis div{padding:16px 18px; border-right:1px solid #EDEDED}
.gsc-kpis div:last-child{border-right:0}
.gsc-kpis .k0{background:#111; color:#fff} .gsc-kpis .k1{background:#FFFCF3}
.gsc-kpis small{display:block; font-size:12.5px; opacity:.8}
.gsc-kpis b{display:block; font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-0.03em; margin-top:4px}
.gsc-kpis .k0 b{color:#E2C46F}
.gsc-chart{width:100%; height:160px; margin-top:18px}
.gsc-note{font-size:12.5px; color:#6E6E6E; margin-top:8px}
.roi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}
@media (max-width:760px){ .roi-row{grid-template-columns:1fr} }
.roi-row div{border:1px solid #EDEDED; border-radius:18px; padding:22px; background:#fff}
.roi-row b{display:block; font-size:clamp(34px,4vw,48px); font-weight:800; letter-spacing:-0.04em; line-height:1}
.roi-row div:first-child b{color:#8A6A12}
.roi-row span{display:block; font-size:14px; color:#555; margin-top:10px}
.rchart{border:1px solid #EDEDED; border-radius:22px; background:#fff; padding:clamp(16px,3vw,28px); display:grid; gap:14px}
.rc-row{display:grid; grid-template-columns:130px 1fr 90px; gap:16px; align-items:center}
@media (max-width:560px){ .rc-row{grid-template-columns:90px 1fr 64px; gap:10px} }
.rc-lab b{display:block; font-size:15px} .rc-lab small{font-size:12.5px; color:#6E6E6E}
.rc-track{height:18px; background:#F4F4F4; border-radius:9px; overflow:hidden}
.rc-track i{display:block; height:100%; width:var(--w); background:linear-gradient(90deg,#E2C46F,#C9A84C); border-radius:9px}
.rc-row:first-child .rc-track i{background:linear-gradient(90deg,#333,#111)}
@media (prefers-reduced-motion: no-preference){ .rc-track i,.ai-t i{animation:grow 1.1s var(--ease) both} @keyframes grow{from{width:0}} }
.rc-val{text-align:right} .rc-val b{display:block; font-size:18px; font-weight:800} .rc-val small{font-size:12px; color:#6E6E6E}
.rcards{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:16px}
@media (max-width:1100px){ .rcards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .rcards{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .rcards{grid-template-columns:1fr} }
.rcard{border:1px solid #EDEDED; border-radius:18px; padding:16px; background:#fff; display:flex; flex-direction:column; gap:12px}
.rc-top{display:flex; justify-content:space-between; align-items:center}
.rc-top span{font-weight:800; font-size:15px} .rc-top small{font-size:12px; font-weight:700; background:#F4F4F4; padding:3px 8px; border-radius:999px; color:#555}
.rcard dl{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rcard dl div{display:flex; flex-direction:column-reverse}
.rcard dd{margin:0; font-size:22px; font-weight:800; letter-spacing:-0.03em}
.rcard dt{font-size:12px; color:#6E6E6E}
.rc-val2{border-top:1px solid #F1F1F1; padding-top:10px}
.rc-val2 small{display:block; font-size:12px; color:#6E6E6E}
.rc-val2 span{display:flex; align-items:center; gap:6px; font-size:15px}
.rc-val2 s{color:#A3A3A3} .rc-val2 svg{width:14px; height:14px; color:#A3A3A3} .rc-val2 b{color:#1E7A46; font-size:20px; font-weight:800}
.ai-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:940px){ .ai-grid{grid-template-columns:1fr} }
.ai-card{border:1px solid #EDEDED; border-radius:22px; padding:clamp(18px,3vw,28px); background:#fff; box-shadow:0 30px 70px -44px rgba(17,17,17,.35)}
.ai-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.ai-h small{font-size:12.5px; color:#6E6E6E}
.aichart{display:grid; gap:14px}
.ai-row{display:grid; grid-template-columns:150px 1fr 120px; gap:14px; align-items:center}
@media (max-width:560px){ .ai-row{grid-template-columns:1fr; gap:6px} }
.ai-n{font-weight:700; font-size:14.5px}
.ai-t{height:12px; background:#F4F4F4; border-radius:6px; overflow:hidden}
.ai-t i{display:block; height:100%; width:var(--w); background:#C9A84C; border-radius:6px}
.ai-v{font-size:13px; color:#555} .ai-v b{color:#111; font-size:16px} .ai-v small{display:block; font-size:12px; color:#6E6E6E}
.brandwall{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
@media (max-width:900px){ .brandwall{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .brandwall{grid-template-columns:1fr 1fr} }
.brandwall li{border:1px solid #EDEDED; border-radius:16px; height:90px; display:grid; place-items:center; font-weight:800; font-size:17px; color:#555; letter-spacing:-0.02em; background:#fff; text-align:center; padding:0 10px}
.pserv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .pserv{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .pserv{grid-template-columns:1fr} }
.pserv div{border:1px solid #EDEDED; border-radius:18px; padding:22px; background:#fff}
.pserv h3{font-size:17px; margin-bottom:6px} .pserv p{font-size:14.5px; color:#555}
.mega .all .link{display:inline}
.page-hero .pbadge{margin-top:22px}

/* ===== v12: Searchlogy screenshot replicas ===== */
.shot{margin:0; background:#fff; border:1px solid #E6E6E6; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px -44px rgba(17,17,17,.4)}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{font-size:12.5px; color:#6E6E6E; padding:10px 16px; border-top:1px solid #F1F1F1; background:#FCFCFC}
.gs-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid #F1F1F1; font-family:Roboto,Arial,sans-serif}
.gs-logo{display:grid; grid-template-columns:repeat(2,7px); gap:2px} .gs-logo i{width:7px; height:7px; border-radius:2px}
.gs-top b{font-size:15px; font-weight:500; color:#202124} .gs-sub{font-size:13px; color:#5F6368}
.gs-pills{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap} .gs-pills span{font-size:11.5px; border:1px solid #DADCE0; border-radius:999px; padding:3px 10px; color:#3C4043}
.gs-tiles{display:grid; grid-template-columns:repeat(4,1fr); font-family:Roboto,Arial,sans-serif}
@media (max-width:560px){ .gs-tiles{grid-template-columns:1fr 1fr} }
.gs-tile{padding:14px 14px 16px; border-right:1px solid #F1F1F1; color:#3C4043; position:relative}
.gs-tile:last-child{border-right:0}
.gs-tile.on{background:var(--c); color:#fff}
.gs-tile:not(.on){border-top:4px solid transparent}
.gs-cb{display:inline-grid; place-items:center; width:16px; height:16px; border:2px solid currentColor; border-radius:3px; margin-bottom:8px}
.gs-tile.on .gs-cb{background:#fff; color:var(--c); border-color:#fff}
.gs-cb svg{width:12px; height:12px}
.gs-tile small{display:block; font-size:12.5px; opacity:.92}
.gs-tile b{display:block; font-size:clamp(22px,2.4vw,30px); font-weight:400; margin-top:2px; letter-spacing:-0.01em}
.gs-chart{padding:14px 16px 8px}
.gs-chart svg{width:100%; height:180px; display:block}
.gs-x{display:flex; justify-content:space-between; font-size:11px; color:#80868B; padding:4px 10px 0; font-family:Roboto,Arial,sans-serif}
.ai-top{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #F1F1F1}
.ai-top b{font-size:15px} .ai-top span{font-size:12px; color:#6E6E6E; background:#F4F4F4; padding:3px 9px; border-radius:999px}
.ais table{width:100%; border-collapse:collapse; font-size:14px}
.ais th,.ais td{padding:12px 16px; text-align:left; border-bottom:1px solid #F4F4F4}
.ais thead th{font-size:12px; color:#6E6E6E; font-weight:600}
.ais tbody th{font-weight:600; white-space:nowrap}
.ais tbody tr:last-child th,.ais tbody tr:last-child td{border-bottom:0}
.ai-lg{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; color:#fff; font-size:12px; font-weight:800; margin-right:10px; vertical-align:middle}
.ais td b{display:inline-block; min-width:48px}
.ai-bar{display:inline-block; vertical-align:middle; width:110px; height:8px; background:#F1F1F1; border-radius:4px; overflow:hidden; margin-left:8px}
.ai-bar i{display:block; height:100%; width:var(--w); background:var(--c)}
@media (max-width:480px){ .ai-bar{display:none} }
.hstrip{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid #EDEDED; border-radius:20px; overflow:hidden; margin:28px 0}
@media (max-width:760px){ .hstrip{grid-template-columns:repeat(3,1fr)} .hstrip div:nth-child(n+4){border-top:1px solid #EDEDED} }
.hstrip div{padding:20px 18px; text-align:center; border-right:1px solid #EDEDED; background:#fff}
.hstrip div:last-child{border-right:0}
.hstrip b{display:block; font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-0.04em; line-height:1}
.hstrip span{display:block; font-size:13px; color:#6E6E6E; margin-top:8px}
.hstrip div:first-child b{color:#8A6A12}
.shots2{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px; align-items:start}
@media (max-width:960px){ .shots2{grid-template-columns:1fr} }
.ph-grid{align-items:start}
.roi-big{display:flex; align-items:center; gap:18px; margin-top:30px; padding:18px 20px; border:1px solid #E9DFC3; background:#FFFCF3; border-radius:18px}
.roi-big b{font-size:clamp(48px,5vw,64px); font-weight:800; letter-spacing:-0.05em; line-height:1; color:#8A6A12}
.roi-big span{font-size:14px; color:#555}
.ph-row2{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px; align-items:start}
@media (max-width:960px){ .ph-row2{grid-template-columns:1fr} }
.ph-res{border:1px solid #E6E6E6; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 30px 70px -44px rgba(17,17,17,.4)}
.phr{display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center; padding:13px 16px; border-bottom:1px solid #F4F4F4}
.phr:last-child{border:0}
.phr b{font-size:15px} .phr small{display:block; font-size:12px; color:#6E6E6E}
.phr-c{text-align:right} .phr-c b{font-size:18px; font-weight:800}
.phr-v{text-align:right; min-width:130px; font-size:14px} .phr-v s{color:#A3A3A3} .phr-v b{color:#1E7A46; font-size:18px; font-weight:800}
@media (max-width:480px){ .phr{grid-template-columns:1fr auto} .phr-c{display:none} }
.pclients{flex-wrap:nowrap}
.pclients > span{white-space:nowrap}
.sl-lm{flex:1; min-width:0}
.sl-lm .track{gap:48px; animation-duration:26s}
.sl-lm .lg{font-size:18px; font-weight:800; color:#9A9A9A; letter-spacing:-0.02em}
.mbo{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:960px){ .mbo{grid-template-columns:1fr} }
.mbo ul{list-style:none; padding:0; margin:0 0 16px}
.mbo li{display:flex; gap:8px; align-items:center; font-size:14.5px; padding:5px 0}
.mbo li svg{width:16px; height:16px; color:#1E7A46}
.audit{border:1px solid #EDEDED; border-radius:14px; overflow:hidden}
.au-row{display:flex; justify-content:space-between; padding:9px 14px; border-top:1px solid #F4F4F4; font-size:13.5px; font-weight:600}
.au-row em{font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.04em; padding:2px 9px; border-radius:999px}
.au-ok{background:#DDF3E6; color:#1E7A46} .au-mid{background:#FBF0D3; color:#8A6A12} .au-no{background:#F4F4F4; color:#888}
.ent{display:flex; align-items:center; gap:6px; flex-wrap:wrap; border:1px solid #EDEDED; border-radius:14px; padding:14px}
.ent span{font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:999px; border:1px solid #E7E7E7}
.ent span:first-child{background:#111; color:#fff; border-color:#111}
.ent i{width:16px; height:2px; background:#E2D3A6}
.funnel{display:grid; gap:6px}
.funnel span{font-size:12.5px; font-weight:700; text-align:center; padding:8px; border-radius:10px; background:#F7F7F7; border:1px solid #EDEDED}
.funnel span:nth-child(2){margin:0 10px} .funnel span:nth-child(3){margin:0 20px}
.funnel span.on{margin:0 30px; background:#111; color:#fff; border-color:#111}

/* ===== v13: Searchlogy chapter ===== */
.sl-hero{padding:clamp(64px,8vw,110px) 0 clamp(40px,5vw,64px); border-top:1px solid #EFEFEF; text-align:center}
.sl-hero-top{display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap}
.sl-hero-top .pbadge{margin:0}
.sl-label{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8A6A12}
.sl-h1{font-size:clamp(38px,5.6vw,76px); font-weight:800; line-height:1.04; letter-spacing:-0.045em; max-width:20ch; margin:26px auto 0}
.sl-rot-wrap{display:inline-block; background:linear-gradient(transparent 68%,#F3E3B5 68%,#F3E3B5 94%,transparent 94%); padding:0 6px}
.sl-rot{display:inline-block; color:#8A6A12; transition:opacity .3s, transform .3s var(--ease)}
.sl-rot.out{opacity:0; transform:translateY(10px)}
.sl-roi{font-size:clamp(20px,2vw,26px); font-weight:600; margin-top:22px; letter-spacing:-0.02em}
.sl-roi b{color:#8A6A12}
.sl-sub{margin:14px auto 0}
.sl-hero .hero-cta{justify-content:center; margin:30px 0 44px}
.sl-hero .shots2{text-align:left}
.sl-trust{padding:24px 0 30px; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF}
.sl-trust p{text-align:center; font-size:13.5px; font-weight:600; color:#6E6E6E; margin-bottom:16px}
.mbo-h{display:flex; justify-content:center; gap:.35em; flex-wrap:wrap; max-width:none; font-size:clamp(40px,6vw,80px)}
.mbo-h span:nth-child(2){color:#8A6A12}
.mbo-h em{font-style:normal; color:#C9A84C}
.mbo2{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:980px){ .mbo2{grid-template-columns:1fr} }
.mcol{display:flex; flex-direction:column; gap:12px}
.mcol-h{display:flex; align-items:center; gap:12px; padding:0 4px 4px}
.mcol-h span{width:38px; height:38px; border-radius:50%; background:#111; color:#E2C46F; display:grid; place-items:center; font-weight:800; font-size:14px}
.mcol-h b{font-size:20px; letter-spacing:-0.02em}
.mcard{border:1px solid #EDEDED; border-radius:18px; background:#fff; padding:16px}
.mcard h3{font-size:16.5px; margin:14px 0 6px} .mcard p{font-size:14px; color:#555}
.mcard > div:first-child{min-height:86px; border-radius:12px; background:#FAFAFA; border:1px solid #F1F1F1; padding:10px; display:flex; align-items:center; justify-content:center}
.mv-audit{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; width:100%}
.mv-audit span{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:10.5px}
.mv-audit em{font-style:normal; font-size:9px; font-weight:800; padding:2px 5px; border-radius:999px}
.mv-index{display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%}
.mv-index span{display:flex; gap:6px; align-items:center; font-size:12px; font-weight:600; background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:6px 8px}
.mv-index svg{width:14px; height:14px; color:#1E7A46}
.mv-entity{display:flex; align-items:center; gap:6px}
.mv-entity span{font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; border:1px solid #E7E7E7; background:#fff}
.mv-entity span.c{background:#111; color:#fff; border-color:#111}
.mv-entity i{width:16px; height:2px; background:#D9C99A}
.mv-cluster{position:relative; width:150px; height:72px}
.mv-cluster .hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:11px; font-weight:800; background:#111; color:#fff; border-radius:999px; padding:5px 10px; white-space:nowrap; z-index:1}
.mv-cluster .sat{position:absolute; width:14px; height:14px; border-radius:50%; background:#E2C46F}
.s1{left:6px; top:6px} .s2{left:68px; top:0} .s3{right:6px; top:6px} .s4{left:6px; bottom:6px} .s5{left:68px; bottom:0} .s6{right:6px; bottom:6px}
.mv-content{font-size:12px; text-align:left; background:#fff; border:1px solid #EDEDED; border-radius:10px; padding:8px 10px}
.mv-content mark{background:#F3E3B5; padding:0 3px; border-radius:3px}
.mv-content span{display:block; color:#8A6A12; font-size:11px; margin-top:4px; font-weight:700}
.mv-auth{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.mv-auth span{font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; background:#fff; border:1px solid #E7E7E7}
.mv-funnel{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; width:100%}
.mv-funnel span{font-size:11px; font-weight:800; text-align:center; background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:6px 2px; line-height:1.2}
.mv-funnel small{display:block; font-weight:500; font-size:9.5px; color:#6E6E6E}
.mv-funnel span.on{background:#111; color:#fff} .mv-funnel span.on small{color:#E2C46F}
.mv-agent{display:flex; gap:8px; align-items:center; font-size:12px; font-weight:800; letter-spacing:.06em}
.mv-agent span{color:#6E6E6E} .mv-agent b{background:#DDF3E6; color:#1E7A46; padding:4px 10px; border-radius:999px}
.mv-cta span{display:inline-block; background:#111; color:#fff; font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:999px}
.sl-em{font-style:italic; font-family:var(--serif); font-weight:700; color:#8A6A12}
.sl-results{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px}
@media (max-width:1100px){ .sl-results{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .sl-results{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .sl-results{grid-template-columns:1fr} }
.slr{border:1px solid #EDEDED; border-radius:18px; padding:18px; background:#fff; display:flex; flex-direction:column; gap:12px}
.slr-h{display:flex; justify-content:space-between; align-items:baseline}
.slr-h b{font-size:16px} .slr-h em{font-size:12.5px; color:#8A6A12; font-weight:700}
.slr-n{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.slr-n b{display:block; font-size:24px; font-weight:800; letter-spacing:-0.03em}
.slr-n span{font-size:11.5px; color:#6E6E6E}
.slr-v{display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid #F1F1F1}
.slr-v s{color:#A3A3A3; font-size:16px} .slr-v .arr svg{width:14px; height:14px; color:#A3A3A3} .slr-v b{font-size:24px; font-weight:800; color:#1E7A46; letter-spacing:-0.03em}
.slr small{font-size:11.5px; color:#6E6E6E; margin-top:-8px}
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
@media (max-width:960px){ .tiers{grid-template-columns:1fr} }
.tier{position:relative; border:1px solid #EDEDED; border-radius:22px; padding:28px; background:#fff; display:flex; flex-direction:column}
.tier.pop{border:2px solid #111; box-shadow:0 30px 70px -40px rgba(17,17,17,.45)}
.tier-tag{position:absolute; top:-13px; left:28px; background:#C9A84C; color:#111; font-size:12px; font-weight:800; padding:4px 12px; border-radius:999px}
.tier h3{font-size:26px; letter-spacing:-0.03em}
.tier-sub{font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12; margin-top:6px}
.tier-best{font-size:14.5px; color:#555; margin:14px 0 6px}
.tier ul{list-style:none; padding:0; margin:12px 0 22px; flex:1}
.tier li{display:flex; gap:8px; align-items:flex-start; font-size:14.5px; padding:6px 0; border-top:1px solid #F4F4F4}
.tier li svg{width:16px; height:16px; color:#1E7A46; flex:none; margin-top:3px}
.tier li:first-child{font-weight:700}
.nolock{display:flex; gap:14px; align-items:center; margin-top:20px; padding:18px 22px; border:1px solid #E9DFC3; background:#FFFCF3; border-radius:18px}
.nolock svg{width:28px; height:28px; color:#8A6A12; flex:none}
.nolock b{display:block; font-size:17px} .nolock span{font-size:14.5px; color:#555}
.sl-ask{padding-top:clamp(32px,4vw,48px); padding-bottom:clamp(32px,4vw,48px)}
.ask{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; border:1px solid #EDEDED; border-radius:20px; padding:22px 26px}
.ask h3{font-size:19px} .ask p{font-size:14px; color:#555}
.ask-links{display:flex; flex-wrap:wrap; gap:8px}
.ask-links a{font-size:14px; font-weight:700; text-decoration:none; border:1.5px solid #E7E7E7; border-radius:999px; padding:9px 16px}
.ask-links a:hover{border-color:#111}

/* ===== v14: launch ===== */
.byline{font-size:14px; color:#6E6E6E; margin-top:14px}
.article{max-width:740px; margin:0 auto}
.article h2{font-size:clamp(24px,2.6vw,30px); margin:40px 0 12px}
.article p{font-size:17.5px; line-height:1.8; color:#333; margin-bottom:18px}
.article ul{font-size:17px; line-height:1.8; color:#333; padding-left:22px; margin:0 0 18px}
.article li{margin-bottom:6px}
.art-cta{margin-top:48px; padding:28px; border:1px solid #E9DFC3; background:#FFFCF3; border-radius:20px}
.art-cta h3{font-size:22px} .art-cta p{font-size:15.5px; margin:6px 0 18px}
.legal-links{display:flex; gap:18px} .legal-links a{text-decoration:underline}

/* ===== v17: print industry ===== */
.w2p{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center}
.w2p-img{position:relative; height:190px; border-radius:14px; background:linear-gradient(135deg,#FBF4E2,#FFFFFF); border:1px solid #F3EAD3}
.w2p-img .card{position:absolute; width:58%; aspect-ratio:1.75; border-radius:8px; box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.w2p-img .c1{background:#111; left:12%; top:22%; transform:rotate(-8deg)}
.w2p-img .c1::after{content:""; position:absolute; left:14%; top:30%; width:30%; height:10%; background:#C9A84C; border-radius:2px}
.w2p-img .c2{background:#fff; border:1px solid #EDEDED; right:8%; bottom:16%; transform:rotate(6deg)}
.w2p-img .c2::after{content:""; position:absolute; left:14%; top:30%; width:44%; height:8%; background:#111; border-radius:2px; box-shadow:0 14px 0 -2px #C9A84C}
.w2p-cfg b{display:block; font-size:16px; letter-spacing:-0.02em}
.w2p-cfg small{display:block; font-size:12px; color:#6E6E6E; margin-bottom:8px}
.w2p-row{display:flex; justify-content:space-between; font-size:12px; padding:6px 8px; border:1px solid #EDEDED; border-radius:8px; margin-top:6px}
.w2p-row span{color:#6E6E6E} .w2p-row em{font-style:normal; font-weight:700}
.w2p-price{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
.w2p-price b{font-size:18px}
.w2p-price .mb-btn{margin:0}
.v-queue{width:100%; display:grid; gap:6px}
.v-queue div{display:grid; grid-template-columns:48px 1fr auto; gap:8px; align-items:center; background:#fff; border:1px solid #EDEDED; border-radius:10px; padding:7px 10px; font-size:12px}
.v-queue b{font-size:12px} .v-queue em{font-style:normal; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px}
.v-pre{display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%}
.v-pre span{display:flex; gap:6px; align-items:center; font-size:12px; font-weight:600; background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:8px}
.v-pre svg{width:14px; height:14px; color:#1E7A46; flex:none}
.v-inv{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%}
.v-inv div{background:#fff; border:1px solid #EDEDED; border-radius:12px; padding:10px; text-align:center}
.v-inv span{display:block; font-size:11px; color:#6E6E6E}
.v-inv b{display:block; font-size:22px; font-weight:800; letter-spacing:-0.03em; margin-top:4px} .v-inv b.g{color:#1E7A46}
.v-growth{width:100%; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center}
.v-growth span{display:block; font-size:12px; color:#6E6E6E} .v-growth b{font-size:26px; font-weight:800; color:#1E7A46}
.v-growth svg{width:100%; height:80px}
.inds{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media (max-width:1000px){ .inds{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .inds{grid-template-columns:minmax(0,1fr)} }
.ind{display:flex; flex-direction:column; gap:8px; padding:22px; border:1px solid #EDEDED; border-radius:18px; background:#fff; text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s}
.ind:hover{transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(17,17,17,.3); border-color:#E2D3A6}
.ind-ic{width:42px; height:42px; border-radius:12px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center}
.ind-ic svg{width:20px; height:20px}
.ind b{font-size:17px; letter-spacing:-0.02em} .ind small{font-size:14px; color:#555}
.mega{max-height:min(80vh,640px); overflow:auto}
@media (max-width:560px){ .w2p{grid-template-columns:1fr} .w2p-img{display:none} }
.bento .bc.b-last{grid-column:span 4} @media (max-width:1050px){ .bento .bc.b-last{grid-column:span 2} } @media (max-width:600px){ .bento .bc.b-last{grid-column:auto} }
/* keep logo and name whole at every width */
.site-head .brand{flex:none}
.head-actions{flex:none}
.head-actions .btn,.nav > a,.nav > .dd > button{white-space:nowrap}
@media (min-width:1041px) and (max-width:1280px){ .nav > a,.nav > .dd > button{padding:10px 7px; font-size:14px} .site-head .wrap{gap:12px} .head-actions .btn{padding:0 16px} }
@media (min-width:1041px) and (max-width:1160px){ .nav > a,.nav > .dd > button{padding:10px 5px; font-size:13.5px} .site-head .wm{font-size:19px} }
@media (max-width:380px){ .site-head .wm{font-size:17px} .site-head .brand img{width:32px; height:32px} .site-head .brand{gap:8px} .head-actions{gap:6px} }
@media (max-width:980px){ .mbo2{grid-template-columns:minmax(0,1fr)} }
.mcol,.mcard{min-width:0}
.mcard > div:first-child{overflow:hidden}
@media (max-width:400px){ .mv-audit span{font-size:9.5px} .mv-audit em{font-size:8px; padding:2px 4px} .mv-funnel span{font-size:10px} .mv-funnel small{font-size:8.5px} }
@media (max-width:600px){ .bento{grid-template-columns:minmax(0,1fr)} .bc{min-width:0} .v-kanban{grid-template-columns:repeat(3,minmax(0,1fr))} .v-kanban span{font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} }
@media (max-width:960px){ .sd-grid{grid-template-columns:minmax(0,1fr)} }
.sd-grid > *{min-width:0}
h1,h2,h3,.lede{overflow-wrap:break-word}
.pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .pager a{min-width:0; overflow-wrap:break-word}
.v-pal i{width:28px; height:56px} .v-pal b{font-size:36px}

/* ===== v18: owner build ===== */
/* reveal */
html.js-rv .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js-rv .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ html.js-rv .rv{opacity:1; transform:none} }
/* bottlenecks */
.bn-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px}
@media (max-width:820px){ .bn-grid{grid-template-columns:minmax(0,1fr)} }
.bn-card{border:1px solid #EDEDED; border-radius:18px; background:#fff; overflow:hidden; transition:border-color .2s, box-shadow .2s}
.bn-card[hidden]{display:none}
.bn-card.open{border-color:#E2D3A6; box-shadow:0 20px 40px -28px rgba(17,17,17,.35)}
.bn-q{width:100%; display:grid; grid-template-columns:1fr auto; gap:6px 16px; text-align:left; background:none; border:0; padding:20px 22px; cursor:pointer; color:#111}
.bn-tag{grid-column:1; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12}
.bn-q b{grid-column:1; font-size:17.5px; line-height:1.35; letter-spacing:-0.01em}
.bn-plus{grid-column:2; grid-row:1 / span 2; align-self:center; width:34px; height:34px; border-radius:50%; border:1.5px solid #E7E7E7; display:grid; place-items:center; font-size:20px; transition:transform .3s var(--ease), background .2s}
.bn-card.open .bn-plus{transform:rotate(45deg); background:#111; color:#fff; border-color:#111}
.bn-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
.bn-a > div{overflow:hidden; padding:0 22px}
.bn-card.open .bn-a{grid-template-rows:1fr}
.bn-a p{border-top:1px dashed #E7E7E7; padding-top:14px; color:#333; font-size:15.5px}
.bn-fix{display:block; font-size:12px; font-weight:800; color:#1E7A46; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px}
.bn-a .link{display:inline-flex; margin:12px 0 20px; font-size:14px}
/* catalog visual */
.v-cat{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%}
@media (max-width:600px){ .v-cat{grid-template-columns:1fr 1fr} }
.v-cat div{background:#fff; border:1px solid #EDEDED; border-radius:12px; padding:10px; position:relative}
.v-cat b{display:block; font-size:12.5px} .v-cat span{display:block; font-size:11px; color:#6E6E6E} .v-cat em{font-style:normal; font-weight:800; font-size:15px}
.v-cat i{position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background:#DDF3E6; color:#1E7A46; display:grid; place-items:center} .v-cat i svg{width:11px; height:11px}
/* reviews */
.rv-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .rv-grid{grid-template-columns:1fr} }
.rv-card{margin:0; border:1px solid #EDEDED; border-radius:20px; padding:24px; background:#fff}
.rv-card blockquote{margin:12px 0 16px; font-size:16.5px; line-height:1.6}
.rv-card figcaption b{display:block} .rv-card figcaption span{font-size:13.5px; color:#6E6E6E}
.rv-stars{display:inline-flex; gap:2px} .rv-stars span{color:#E7E7E7} .rv-stars span.on{color:#C9A84C} .rv-stars svg{width:18px; height:18px}
.rv-empty{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:center; border:1px dashed #D9C99A; border-radius:24px; padding:clamp(22px,4vw,44px); background:#fff}
@media (max-width:860px){ .rv-empty{grid-template-columns:1fr} }
.rv-ghosts{display:grid; gap:10px}
.rv-ghosts i{display:block; height:70px; border-radius:16px; background:linear-gradient(90deg,#F5F5F5 0%,#FBF6E6 50%,#F5F5F5 100%); background-size:200% 100%}
.rv-ghosts i:nth-child(2){margin-left:30px} .rv-ghosts i:nth-child(3){margin-right:30px}
@media (prefers-reduced-motion: no-preference){ .rv-ghosts i{animation:shim 2.4s linear infinite} .rv-ghosts i:nth-child(2){animation-delay:.3s} .rv-ghosts i:nth-child(3){animation-delay:.6s} @keyframes shim{to{background-position:-200% 0}} }
.rv-badge{display:inline-block; font-size:12px; font-weight:800; color:#1E7A46; background:#DDF3E6; padding:4px 10px; border-radius:999px; margin-bottom:12px}
.rv-msg h3{font-size:24px} .rv-msg p{color:#555; margin:10px 0 20px}
.rv-modal .rv-box{width:min(620px,100%); background:#fff; border-radius:22px; padding:clamp(20px,4vw,32px); max-height:90vh; overflow:auto}
.rv-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px} .rv-head h2{font-size:26px}
.rv-sub{font-size:14px; color:#555; margin-bottom:18px}
.rate{display:flex; gap:6px} .rate button{width:42px; height:42px; border-radius:10px; border:1.5px solid #E7E7E7; background:#fff; cursor:pointer; color:#D6D6D6; display:grid; place-items:center} .rate svg{width:22px; height:22px; fill:currentColor} .rate button.on{color:#C9A84C; border-color:#E2D3A6}
.rv-done{text-align:center; padding:20px 0} .rv-done .tick{width:56px; height:56px; border-radius:50%; background:#1E7A46; color:#fff; display:grid; place-items:center; margin:0 auto 12px} .rv-done .tick svg{width:26px; height:26px}
/* ask AI */
.ask2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:900px){ .ask2{grid-template-columns:1fr} }
.ask2-card{border:1px solid #EDEDED; border-radius:20px; padding:22px; background:#fff}
.ask2-h{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.ask2-h h3{font-size:18px} .ask2-h p{font-size:14px; color:#555}
.ask2-logo{width:44px; height:44px; border-radius:12px; background:#111; color:#E2C46F; display:grid; place-items:center; font-weight:800; flex:none}
.ask2-logo.eg{background:#fff; border:1px solid #EDEDED}
/* about */
.ab-hero{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px); border-bottom:1px solid #EFEFEF}
.ab-hero h1{font-size:clamp(38px,5.4vw,70px); font-weight:800; letter-spacing:-0.04em; line-height:1.04; max-width:17ch; margin-top:14px}
.ab-strip{display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; margin-top:36px}
.ab-strip > div{border:1px solid #EDEDED; border-radius:18px; padding:16px 20px; flex:1; min-width:200px; background:#fff}
.ab-strip b{display:block; font-size:20px} .ab-strip span{font-size:14px; color:#555}
.ab-strip .ab-plus{flex:0; min-width:0; border:0; display:grid; place-items:center; font-size:28px; font-weight:800; color:#C9A84C; padding:0}
.ab-strip .ab-eq{background:#111; border-color:#111; color:#fff} .ab-eq span{color:#D6D6D6} .ab-eq b{color:#E2C46F}
.ab-pains{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .ab-pains{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .ab-pains{grid-template-columns:1fr} }
.ab-card,.ww-c{border:1px solid #EDEDED; border-radius:18px; padding:22px; background:#fff}
.ab-card h3,.ww-c h3{font-size:18px; margin:12px 0 6px} .ab-card p,.ww-c p{font-size:14.5px; color:#555}
.ab-ic{width:42px; height:42px; border-radius:12px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center} .ab-ic svg{width:20px; height:20px}
.ab-note{max-width:70ch; margin:28px auto 0; text-align:center; font-size:17px; color:#333; font-weight:500}
.ab-two{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:940px){ .ab-two{grid-template-columns:1fr} }
.engines{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:600px){ .engines{grid-template-columns:1fr} }
.eng{border:1px solid #EDEDED; border-radius:22px; padding:22px; background:#fff}
.eng.gold{background:#111; color:#fff; border-color:#111}
.eng-t{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A6A12} .eng.gold .eng-t{color:#E2C46F}
.eng h3{font-size:20px; margin:6px 0 12px}
.eng ul{list-style:none; padding:0; margin:0}
.eng li a{display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid #F1F1F1; text-decoration:none; font-size:14.5px; font-weight:600}
.eng.gold li a{border-color:#2B2B2B} .eng li svg{width:18px; height:18px; color:#C9A84C; flex:none}
.fly{position:relative; width:min(460px,100%); aspect-ratio:1; margin:0 auto}
.fly-c{position:absolute; inset:34%; border-radius:50%; background:#fff; border:1px solid #EDEDED; display:grid; place-items:center; align-content:center; gap:4px; text-align:center; box-shadow:0 20px 40px -24px rgba(17,17,17,.35)}
.fly-c small{font-size:12px; font-weight:800; color:#8A6A12; letter-spacing:.05em; text-transform:uppercase}
.fly::before{content:""; position:absolute; inset:12%; border-radius:50%; border:2px dashed #E2D3A6}
@media (prefers-reduced-motion: no-preference){ .fly::before{animation:spin 40s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} }
.fly-n{position:absolute; width:150px; transform:translate(-50%,-50%); background:#fff; border:1px solid #EDEDED; border-radius:16px; padding:10px 12px; display:flex; gap:10px; align-items:center; box-shadow:0 14px 30px -20px rgba(17,17,17,.35)}
.fly-n span{width:26px; height:26px; border-radius:50%; background:#111; color:#E2C46F; display:grid; place-items:center; font-size:12px; font-weight:800; flex:none}
.fly-n b{font-size:13px; line-height:1.25}
.fly-n.n0{left:50%; top:9%} .fly-n.n1{left:89%; top:38%} .fly-n.n2{left:74%; top:86%} .fly-n.n3{left:26%; top:86%} .fly-n.n4{left:11%; top:38%}
@media (max-width:520px){ .fly-n{width:120px; padding:8px} .fly-n b{font-size:11.5px} .fly-n.n1{left:84%} .fly-n.n4{left:16%} }
@media (prefers-reduced-motion: no-preference){ .fly-n{animation:flyhl 10s infinite} .fly-n.n1{animation-delay:2s} .fly-n.n2{animation-delay:4s} .fly-n.n3{animation-delay:6s} .fly-n.n4{animation-delay:8s} @keyframes flyhl{0%,18%{border-color:#C9A84C; box-shadow:0 0 0 4px #FBF6E6,0 14px 30px -20px rgba(17,17,17,.35)} 22%,100%{border-color:#EDEDED}} }
html.js-rv .fly-n.rv{transform:translate(-50%,calc(-50% + 22px))} html.js-rv .fly-n.rv.in{transform:translate(-50%,-50%)}
.mv{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:820px){ .mv{grid-template-columns:1fr} }
.mv-card{border:1px solid #EDEDED; border-radius:24px; padding:clamp(24px,4vw,44px); background:#fff}
.mv-card.mv-dark{background:#111; color:#fff; border-color:#111}
.mv-k{font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A6A12} .mv-card.mv-dark .mv-k{color:#E2C46F}
.mv-card h3{font-size:clamp(22px,2.4vw,30px); line-height:1.3; margin-top:14px; letter-spacing:-0.02em}
.promise{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.promise li{display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; border:1px solid #EDEDED; border-radius:16px; padding:16px; background:#fff}
.promise li > span{width:34px; height:34px; border-radius:50%; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center; font-weight:800}
.promise b{display:block; font-size:16.5px} .promise p{font-size:14.5px; color:#555; margin-top:2px}
.meth{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding-bottom:14px}
.meth::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; border-radius:2px; background:#EFEFEF}
.meth-bar{position:absolute; left:0; bottom:0; height:4px; border-radius:2px; background:#C9A84C; z-index:1; transition:width .5s var(--ease)}
.meth button{border:1.5px solid #EDEDED; background:#fff; border-radius:14px; padding:14px 8px; cursor:pointer; font-weight:700; font-size:16px; color:#111; display:flex; flex-direction:column; align-items:center; gap:4px}
.meth button span{font-size:12px; color:#8A6A12}
.meth button[aria-selected="true"]{background:#111; color:#fff; border-color:#111} .meth button[aria-selected="true"] span{color:#E2C46F}
.meth button.done{border-color:#E2D3A6}
@media (max-width:560px){ .meth button{font-size:13px; padding:10px 4px} }
.meth-panel{margin-top:20px; border:1px solid #EDEDED; border-radius:22px; padding:clamp(22px,4vw,36px); background:#fff; animation:viewin .3s}
.mt-n{font-size:12.5px; font-weight:800; color:#8A6A12; letter-spacing:.05em; text-transform:uppercase}
.meth-panel h3{font-size:28px; margin:6px 0 8px} .meth-panel p{font-size:17px; color:#333; max-width:65ch}
.ww{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .ww{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .ww{grid-template-columns:1fr} }
.vs{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:0 auto}
@media (max-width:700px){ .vs{grid-template-columns:1fr} }
.vs-col{border:1px solid #EDEDED; border-radius:22px; padding:26px; background:#fff}
.vs-col.us{border:2px solid #111; box-shadow:0 30px 60px -40px rgba(17,17,17,.5)}
.vs-t{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#6E6E6E} .vs-col.us .vs-t{color:#8A6A12}
.vs-col ul{list-style:none; padding:0; margin:14px 0 0}
.vs-col li{display:flex; gap:10px; align-items:center; padding:11px 0; border-top:1px solid #F1F1F1; font-size:15.5px; color:#555}
.vs-col.us li{color:#111; font-weight:600} .vs-col li svg{width:18px; height:18px; color:#1E7A46; flex:none}
/* industry detail */
.ind3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .ind3{grid-template-columns:1fr} }
.i3{border:1px solid #EDEDED; border-radius:20px; padding:24px; background:#fff}
.i3.pain{background:#FFFBF5} .i3.win{background:#111; color:#fff; border-color:#111}
.i3-k{font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12} .i3.win .i3-k{color:#E2C46F}
.i3 ul{list-style:none; padding:0; margin:14px 0 0}
.i3 li{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid #F1F1F1; font-size:15px} .i3.win li{border-color:#2B2B2B}
.i3.pain li::before{content:"!"; flex:none; width:20px; height:20px; border-radius:50%; background:#FCE8E4; color:#A1281C; display:grid; place-items:center; font-size:12px; font-weight:800}
.i3 li svg{width:18px; height:18px; color:#1E7A46; flex:none; margin-top:1px} .i3.win li svg{color:#E2C46F}
/* service pains + form */
.sv-pf{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(24px,4vw,56px); align-items:start}
@media (max-width:900px){ .sv-pf{grid-template-columns:1fr} }
.sv-pains{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px}
.sv-pains li{display:flex; gap:12px; align-items:flex-start; border:1px solid #EDEDED; border-radius:16px; padding:16px; background:#fff; font-size:16px; font-weight:500}
.sv-pains li span{flex:none; width:24px; height:24px; border-radius:50%; background:#FCE8E4; color:#A1281C; display:grid; place-items:center; font-weight:800; font-size:13px}
.sv-form{border:1px solid #EDEDED; border-radius:22px; padding:clamp(20px,3vw,30px); background:#fff; box-shadow:0 30px 70px -44px rgba(17,17,17,.35)}
.sv-form h3{font-size:21px} .sv-form > p{font-size:14px; color:#555; margin:4px 0 16px}
.sv-form .btn{margin-top:16px}
.sf-ok{padding:16px; border-radius:14px; background:#DDF3E6; color:#145A33; margin-top:8px}
/* blog */
.bfeat{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); border:1px solid #EDEDED; border-radius:24px; overflow:hidden; text-decoration:none; background:#fff; transition:box-shadow .3s, transform .3s var(--ease)}
.bfeat:hover{transform:translateY(-3px); box-shadow:0 30px 60px -36px rgba(17,17,17,.4)}
@media (max-width:860px){ .bfeat{grid-template-columns:1fr} }
.bfeat-img svg,.bfeat-img img{width:100%; height:100%; min-height:260px; object-fit:cover; display:block}
.bfeat-t{padding:clamp(22px,3vw,40px); display:flex; flex-direction:column; gap:12px; justify-content:center}
.bfeat-t h2{font-size:clamp(24px,2.6vw,34px); max-width:none}
.bfeat-t p{color:#555} .bfeat-t small{color:#6E6E6E}
.bcat{font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12}
.pt2{position:relative; aspect-ratio:16/10; overflow:hidden; background:#F4F4F4}
.pt2 svg,.pt2 img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .6s var(--ease)}
.post:hover .pt2 svg,.post:hover .pt2 img{transform:scale(1.04)}
.pt2 span{position:absolute; left:14px; top:14px; background:#fff; color:#111; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; box-shadow:0 4px 10px rgba(0,0,0,.08)}
.art-hero{border-bottom:0}
.art-cover{border-radius:24px; overflow:hidden; border:1px solid #EDEDED; aspect-ratio:21/8; margin-top:-8px}
.art-cover svg,.art-cover img{width:100%; height:100%; display:block; object-fit:cover}
.art-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start}
@media (max-width:900px){ .art-grid{grid-template-columns:minmax(0,1fr)} .toc{position:static} }
.toc{position:sticky; top:96px; border:1px solid #EDEDED; border-radius:18px; padding:18px; font-size:14px}
.toc b{display:block; margin-bottom:8px} .toc ol{margin:0 0 14px; padding-left:18px} .toc li{padding:4px 0} .toc a{text-decoration:none; color:#555} .toc a:hover{color:#111; text-decoration:underline}
.toc .share{width:100%; min-height:40px; font-size:14px}
.art-grid .article{margin:0; max-width:720px}

/* ===== v19 about + scenarios ===== */
.eq{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.1fr); align-items:stretch; gap:14px; margin-top:40px}
@media (max-width:900px){ .eq{grid-template-columns:1fr; gap:10px} .eq-op{justify-self:center} }
.eq-card{display:flex; flex-direction:column; gap:6px; border:1px solid #EDEDED; border-radius:20px; padding:20px 22px; background:#fff; box-shadow:0 18px 40px -30px rgba(17,17,17,.35)}
.eq-card b{display:block; font-size:22px; letter-spacing:-0.02em}
.eq-t{display:block; font-size:14.5px; color:#555; line-height:1.5}
.eq-ic{width:40px; height:40px; border-radius:12px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center; margin-bottom:6px} .eq-ic svg{width:20px; height:20px}
.eq-op{align-self:center; width:44px; height:44px; border-radius:50%; background:#111; color:#E2C46F; display:grid; place-items:center; font-size:22px; font-weight:800}
.eq-res{background:#111; border-color:#111; color:#fff} .eq-res b{color:#E2C46F} .eq-res .eq-t{color:#D6D6D6} .eq-res .eq-ic{background:#fff}
.story2{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:900px){ .story2{grid-template-columns:1fr} }
.st-side{position:sticky; top:110px}
@media (max-width:900px){ .st-side{position:static} }
.st-badge{margin-top:24px; border:1px solid #EDEDED; border-radius:16px; padding:16px; background:#FFFCF3}
.st-badge b{display:block} .st-badge span{font-size:14px; color:#555}
.st-copy p{font-size:17.5px; line-height:1.8; color:#333; margin-bottom:18px}
.st-copy .st-lead{font-size:clamp(20px,2vw,24px); line-height:1.5; color:#111; font-weight:600; letter-spacing:-0.01em}
.st-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px}
@media (max-width:700px){ .st-steps{grid-template-columns:1fr} }
.st-steps div{border:1px solid #EDEDED; border-radius:16px; padding:18px; background:#fff}
.st-steps span{width:30px; height:30px; border-radius:50%; background:#111; color:#E2C46F; display:grid; place-items:center; font-weight:800; font-size:13px}
.st-steps b{display:block; margin-top:10px} .st-steps p{font-size:14.5px !important; margin:4px 0 0 !important; color:#555 !important; line-height:1.5 !important}
.org{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; position:relative}
@media (max-width:980px){ .org{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .org{grid-template-columns:1fr} }
.org-c{position:relative; border:1px solid #EDEDED; border-radius:18px; padding:22px; background:#fff}
.org-n{position:absolute; top:16px; right:18px; font-size:34px; font-weight:800; color:#F3E3B5; letter-spacing:-0.04em}
.org-c h3{font-size:18px; margin:12px 0 6px} .org-c p{font-size:14.5px; color:#555}
.fit{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:980px; margin:0 auto}
@media (max-width:760px){ .fit{grid-template-columns:1fr} }
.fit-c{border:1px solid #EDEDED; border-radius:22px; padding:26px; background:#fff}
.fit-c h3{display:flex; gap:10px; align-items:center; font-size:19px}
.fit-c.yes h3 svg{width:22px; height:22px; color:#1E7A46}
.fit-c.no h3 span{width:24px; height:24px; border-radius:50%; background:#F4F4F4; color:#888; display:grid; place-items:center; font-size:15px}
.fit-c ul{list-style:none; padding:0; margin:14px 0 0}
.fit-c li{padding:10px 0; border-top:1px solid #F1F1F1; font-size:15.5px}
.fit-c.yes{border-color:#CDE9D7} .fit-c.no li{color:#555}
.where{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .where{grid-template-columns:1fr} }
.where div{border:1px solid #EDEDED; border-radius:16px; padding:18px; background:#fff}
.where b{display:block} .where span{font-size:14px; color:#555}
.scen-h{margin:44px 0 16px; text-align:center} .scen-h h3{font-size:22px} .scen-h p{font-size:14.5px; color:#6E6E6E; max-width:60ch; margin:6px auto 0}
.scen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .scen{grid-template-columns:1fr} }
.scen-c{border:1px solid #EDEDED; border-radius:20px; padding:22px; background:#fff; display:flex; flex-direction:column; gap:10px}
.scen-tag{font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12}
.scen-q{font-size:17px; font-weight:700; line-height:1.4; letter-spacing:-0.01em}
.scen-a{font-size:14.5px; color:#555} .scen-a b{color:#111}
.scen-l{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.scen-l a{font-size:12.5px; font-weight:700; text-decoration:none; padding:5px 10px; border-radius:999px; background:#F4F4F4}
.scen-l a:hover{background:#F7EDD2}

/* ===== v21 brand motion: black + gold, from the logo ===== */
.fx-intro{position:fixed; inset:0; z-index:400; pointer-events:none}
.fx-intro i{position:absolute; left:0; right:0; transition:transform .8s cubic-bezier(.77,0,.18,1)}
.fx-intro .p1{top:0; height:50%; background:#111}
.fx-intro .p2{bottom:0; height:50%; background:#111; border-top:1px solid #2B2B2B}
.fx-intro.go .p1{transform:translateY(-101%)} .fx-intro.go .p2{transform:translateY(101%)}
.fx-mark{position:absolute; left:50%; top:50%; width:92px; height:92px; transform:translate(-50%,-62%); display:grid; place-items:center; transition:opacity .3s, transform .5s}
.fx-mark img{width:70px; height:70px; border-radius:50%; opacity:0; transform:scale(.8); transition:opacity .4s .15s, transform .5s .15s}
.fx-mark svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.fx-mark circle{fill:none; stroke:#C9A84C; stroke-width:2; stroke-dasharray:290; stroke-dashoffset:290; transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.fx-word{position:absolute; left:50%; top:50%; transform:translate(-50%,46px); font-family:var(--serif); font-size:20px; color:#fff; white-space:nowrap; opacity:0; transition:opacity .4s .3s}
.fx-word b{color:#C9A84C}
.fx-intro.draw circle{stroke-dashoffset:0} .fx-intro.draw img{opacity:1; transform:none} .fx-intro.draw .fx-word{opacity:1}
.fx-intro.go .fx-mark,.fx-intro.go .fx-word{opacity:0}
/* headings: soft gold echo settles into place */
.fx-reg{text-shadow:0 10px 0 rgba(201,168,76,.28); transition:text-shadow 1s cubic-bezier(.2,.8,.2,1)}
.fx-reg.fx-reg-go{text-shadow:0 0 0 rgba(201,168,76,0)}
html:not(.js-rv) .fx-reg{text-shadow:none}
@media (prefers-reduced-motion: reduce){ .fx-reg{text-shadow:none !important} }
/* ink spotlight + tilt */
.bc,.ind,.post,.svc,.ab-card,.ww-c,.scen-c,.mc,.tier,.org-c,.i3,.bn-card,.eq-card,.rv-card,.bfeat{position:relative; transition:transform .25s ease, box-shadow .25s, border-color .25s; will-change:transform}
.bc::after,.ind::after,.post::after,.svc::before,.ab-card::after,.ww-c::after,.scen-c::after,.mc::after,.tier::after,.org-c::after,.bn-card::after,.eq-card::after,.rv-card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(201,168,76,.12), transparent 45%)}
.fx-lit::after,.svc.fx-lit::before{opacity:1}
.fx-lit{box-shadow:0 26px 50px -30px rgba(17,17,17,.4); border-color:#E2D3A6 !important}
.eq-res.fx-lit::after,.i3.win.fx-lit::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(226,196,111,.18), transparent 45%)}
.btn-lg,.tc-go,.head-actions .btn{transition:transform .2s ease, background .15s, color .15s}
.btn,.chip,.add,.tab{position:relative; overflow:hidden}
.fx-ink{position:absolute; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(201,168,76,.4) 0%, rgba(201,168,76,.12) 40%, transparent 70%); transform:scale(0); animation:ink .6s ease-out forwards}
@keyframes ink{to{transform:scale(1); opacity:0}}
/* gold progress bar */
.progress{height:3px; background:linear-gradient(90deg,#C9A84C,#E2C46F)}
@media (prefers-reduced-motion: no-preference){
  html.js-rv .sh .eyebrow::before{transform-origin:left; animation:ruler 1s .2s both}
  @keyframes ruler{from{transform:scaleX(0)}}
  .rot-wrap,.sl-rot-wrap{background-size:100% 100%; animation:hl 1.2s .3s both} @keyframes hl{from{background-size:0 100%; background-repeat:no-repeat}}
  .w2p-img .card.c1{animation:sheetIn 1s .4s both} .w2p-img .card.c2{animation:sheetIn2 1s .6s both}
  @keyframes sheetIn{from{opacity:0; transform:translateY(30px) rotate(-14deg)}} @keyframes sheetIn2{from{opacity:0; transform:translateX(40px) rotate(14deg)}}
  .m-browser::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 40%, rgba(232,204,122,.25) 50%, transparent 60%); transform:translateX(-120%); animation:sheen 1.6s 1.1s ease-out}
  @keyframes sheen{to{transform:translateX(120%)}}
}
.collage,.m-card{transition:translate .2s linear}

/* ===== v23 service detail ===== */
.glance{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #EDEDED; border-radius:22px; overflow:hidden; background:#fff}
@media (max-width:900px){ .glance{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .glance{grid-template-columns:1fr} }
.glance div{padding:20px 22px; border-right:1px solid #F1F1F1}
.glance div:last-child{border-right:0}
@media (max-width:900px){ .glance div{border-bottom:1px solid #F1F1F1} }
.glance span{display:block; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12; margin-bottom:6px}
.glance b{font-size:15px; font-weight:600; line-height:1.45}
.mods{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .mods{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .mods{grid-template-columns:1fr} }
.mod{position:relative; border:1px solid #EDEDED; border-radius:20px; padding:24px; background:#fff; overflow:hidden}
.mod-n{position:absolute; right:18px; top:12px; font-size:42px; font-weight:800; letter-spacing:-0.05em; color:#F3E3B5}
.mod h3{font-size:18px; margin:0 40px 8px 0} .mod p{font-size:15px; color:#555; line-height:1.6}
.flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; position:relative}
.flow::before{content:""; position:absolute; left:8%; right:8%; top:21px; height:2px; background:linear-gradient(90deg,#E2D3A6,#C9A84C)}
@media (max-width:860px){ .flow{grid-template-columns:1fr} .flow::before{left:21px; right:auto; top:10px; bottom:10px; width:2px; height:auto} }
.flow li{position:relative; text-align:center; padding:0 6px}
@media (max-width:860px){ .flow li{text-align:left; display:grid; grid-template-columns:44px 1fr; column-gap:14px; padding:0} .flow li p{grid-column:2} }
.fl-dot{position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:#111; color:#E2C46F; display:inline-grid; place-items:center; font-weight:800; margin-bottom:12px}
@media (max-width:860px){ .fl-dot{grid-row:span 2; margin:0} }
.flow b{display:block; font-size:16.5px} .flow p{font-size:14px; color:#555; margin-top:4px}
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .trio{grid-template-columns:1fr} }
.tri{border:1px solid #EDEDED; border-radius:20px; padding:24px; background:#fff}
.tri:nth-child(2){background:#111; color:#fff; border-color:#111}
.tri-k{display:flex; gap:8px; align-items:center; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8A6A12}
.tri:nth-child(2) .tri-k{color:#E2C46F} .tri-k svg{width:18px; height:18px}
.tri ul{list-style:none; padding:0; margin:14px 0 0} .tri li{padding:10px 0; border-top:1px solid #F1F1F1; font-size:15px}
.tri:nth-child(2) li{border-color:#2B2B2B}
.tri small{display:block; margin-top:12px; font-size:12.5px; color:#A3A3A3}
.pairs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .pairs{grid-template-columns:1fr} }
.pair{display:grid; grid-template-columns:46px 1fr 18px; gap:14px; align-items:center; border:1px solid #EDEDED; border-radius:18px; padding:18px; background:#fff; text-decoration:none; transition:border-color .2s}
.pair:hover{border-color:#E2D3A6} .pair .si{width:46px; height:46px} .pair b{display:block; font-size:16px} .pair small{display:block; font-size:13.5px; color:#555; margin-top:2px} .pair > svg{width:18px; height:18px; color:#8A6A12}
.menu-g{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:28px; padding:32px 0; border-top:1px solid #EDEDED}
@media (max-width:900px){ .menu-g{grid-template-columns:1fr} }
.menu-gh p{font-size:15px; color:#555; margin-top:8px}
.menu-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:700px){ .menu-list{grid-template-columns:1fr} }
.menu-i{display:block; border:1px solid #EDEDED; border-radius:20px; padding:20px; background:#fff; text-decoration:none; transition:border-color .2s, transform .2s}
.menu-i:hover{border-color:#E2D3A6; transform:translateY(-2px)}
.menu-ih{display:grid; grid-template-columns:46px 1fr 18px; gap:12px; align-items:center}
.menu-ih .si{width:46px; height:46px} .menu-ih b{display:block; font-size:16.5px} .menu-ih small{display:block; font-size:13.5px; color:#555} .menu-ih > svg{width:18px; height:18px; color:#8A6A12}
.menu-i ul{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px}
.menu-i li{font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:#F5F5F5}
.pair .si,.menu-ih .si{border-radius:14px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center} .pair .si svg,.menu-ih .si svg{width:22px; height:22px}
.mod h3{margin-right:56px} .mod-n{font-size:34px; top:14px}

/* ===== v24 showcase ===== */
/* service explorer */
.ex-switch{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; margin-top:26px; padding:5px; border-radius:999px; background:#F4F4F4; border:1px solid #EDEDED}
.ex-switch button{position:relative; z-index:1; border:0; background:none; padding:11px 22px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; color:#555; transition:color .3s}
.ex-switch button[aria-selected="true"]{color:#fff}
.ex-pill{position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:#111; transition:transform .45s cubic-bezier(.65,0,.35,1)}
.ex-switch.g2 .ex-pill{transform:translateX(100%)}
.ex{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:20px; align-items:start}
@media (max-width:960px){ .ex{grid-template-columns:minmax(0,1fr)} }
.ex-grp{display:grid; gap:8px}
@media (max-width:960px){ .ex-grp{display:flex; overflow-x:auto; gap:8px; padding-bottom:6px; scroll-snap-type:x mandatory} .ex-item{min-width:250px; scroll-snap-align:start} }
.ex-item{position:relative; display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:center; text-align:left; width:100%; padding:14px 16px; border-radius:16px; border:1px solid #EDEDED; background:#fff; cursor:pointer; color:#111; overflow:hidden; transition:border-color .25s, background .25s, transform .25s}
.ex-item:hover{border-color:#E2D3A6}
.ex-item.on{background:#111; color:#fff; border-color:#111; transform:translateX(6px)}
@media (max-width:960px){ .ex-item.on{transform:none} }
.ex-ic{width:44px; height:44px; border-radius:12px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center; transition:background .25s}
.ex-item.on .ex-ic{background:#2B2B2B; color:#E2C46F}
.ex-ic svg{width:21px; height:21px}
.ex-tx b{display:block; font-size:15.5px} .ex-tx small{display:block; font-size:12.5px; color:#6E6E6E; line-height:1.4; margin-top:2px}
.ex-item.on small{color:#BDBDBD}
.ex-bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:#C9A84C; transform-origin:left; transform:scaleX(0)}
.ex-panel{position:sticky; top:100px; border:1px solid #EDEDED; border-radius:26px; background:#fff; overflow:hidden; box-shadow:0 40px 80px -50px rgba(17,17,17,.45)}
.ex-panel.swap{animation:exIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes exIn{from{opacity:0; transform:translateY(14px) scale(.99)}}
.ex-vis{height:230px !important; border-radius:0 !important; border:0 !important; border-bottom:1px solid #F3ECDB !important; padding:22px !important}
.ex-body{padding:26px 28px 28px}
.ex-k{font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12}
.ex-body h3{font-size:clamp(24px,2.4vw,30px); margin:8px 0 10px; letter-spacing:-0.025em}
.ex-body > p{font-size:15.5px; color:#555; line-height:1.65}
.ex-mods{list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:560px){ .ex-mods{grid-template-columns:1fr} }
.ex-mods li{display:flex; gap:8px; align-items:center; font-size:14px; font-weight:600; padding:10px 12px; border-radius:12px; background:#FAFAFA; border:1px solid #F1F1F1; animation:modIn .5s calc(var(--i)*60ms + .15s) both}
.ex-mods svg{width:16px; height:16px; color:#1E7A46; flex:none}
@keyframes modIn{from{opacity:0; transform:translateY(8px)}}
@media (prefers-reduced-motion: reduce){ .ex-panel.swap,.ex-mods li{animation:none} }
/* split headlines */
html.js-rv .split .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
html.js-rv .split .w > span{display:inline-block; transform:translateY(105%); transition:transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i)*45ms)}
html.js-rv .split.split-in .w > span{transform:none}
/* scrub text */
html.js-rv .scrub .sw{color:#CFCFCF; transition:color .35s}
html.js-rv .scrub .sw.lit{color:inherit}
html.js-rv .ab-note.scrub .sw.lit,html.js-rv .st-lead.scrub .sw.lit{color:#111}
/* flow line fill */
.flow::after{content:""; position:absolute; left:8%; top:21px; height:2px; width:calc(84% * var(--fill,0)); background:#111; transition:width .15s linear}
@media (max-width:860px){ .flow::after{left:21px; top:10px; width:2px; height:calc((100% - 20px) * var(--fill,0))} }
.flow li .fl-dot{transition:background .3s, transform .3s}
/* stacking process cards */
@media (min-width:900px){
  .steps4.stack{grid-template-columns:1fr; gap:24px; max-width:880px; margin:0 auto}
  .steps4.stack .st4{position:sticky; top:calc(110px + var(--i)*22px); display:grid; grid-template-columns:120px 1fr; column-gap:28px; align-items:center; min-height:200px; padding:34px 38px; box-shadow:0 -10px 40px -24px rgba(17,17,17,.25); transform-origin:center top; transition:transform .15s linear, filter .15s linear}
  .steps4.stack .st4 .n{grid-row:span 3; font-size:96px}
  .steps4.stack .st4 h3{font-size:28px}
  .steps4.stack .st4 p{font-size:16.5px; max-width:56ch}
  .steps4.stack .st4:nth-child(even){background:#111; color:#fff; border-color:#111}
  .steps4.stack .st4:nth-child(even) p{color:#BDBDBD}
  .steps4.stack .st4:nth-child(even) .when{background:#C9A84C; color:#111}
  .steps4.stack .st4:nth-child(even) .n{color:#3A3A3A}
}
/* second marquee row */
.lm.rev{margin-top:14px} .lm.rev .track{animation-direction:reverse; animation-duration:45s; gap:12px}
.lg2{font-size:13.5px; font-weight:700; padding:7px 14px; border-radius:999px; border:1px solid #EDEDED; color:#555; white-space:nowrap; background:#fff}
.steps4.stack .st4 .when{justify-self:start; width:auto}
.bn-card[data-a="grow"] .bn-tag{color:#1E7A46}

/* ===== v27 about enrichment ===== */
.ab-tag{display:inline-block; margin-top:18px; font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A6A12; padding:8px 14px; border:1px solid #E9DFC3; border-radius:999px; background:#FFFCF3}
.facts-wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px,5vw,64px); align-items:start}
@media (max-width:900px){ .facts-wrap{grid-template-columns:1fr} }
.facts{margin:0; border:1px solid #EDEDED; border-radius:22px; overflow:hidden; background:#fff}
.facts div{display:grid; grid-template-columns:180px 1fr; gap:16px; padding:14px 22px; border-top:1px solid #F1F1F1}
.facts div:first-child{border-top:0}
.facts div:nth-child(odd){background:#FCFCFB}
@media (max-width:560px){ .facts div{grid-template-columns:1fr; gap:2px} }
.facts dt{font-size:13px; font-weight:800; letter-spacing:.03em; color:#8A6A12; text-transform:uppercase}
.facts dd{margin:0; font-size:15.5px; font-weight:500; line-height:1.5}
.vals{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
@media (max-width:1100px){ .vals{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:700px){ .vals{grid-template-columns:1fr 1fr} } @media (max-width:480px){ .vals{grid-template-columns:1fr} }
.val{position:relative; border:1px solid #EDEDED; border-radius:20px; padding:22px; background:#fff}
.val-n{position:absolute; right:16px; top:12px; font-size:30px; font-weight:800; color:#F3E3B5; letter-spacing:-0.04em}
.val h3{font-size:17px; margin:14px 0 6px} .val p{font-size:14px; color:#555; line-height:1.55}
.dl{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:860px){ .dl{grid-template-columns:1fr} }
.dl-g{border:1px solid #EDEDED; border-radius:22px; padding:22px; background:#fff; display:grid; gap:8px; align-content:start}
.dl-g .eng-t{margin-bottom:6px}
.dl-i{display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; padding:10px; border-radius:14px; text-decoration:none; transition:background .2s}
.dl-i:hover{background:#FBF6E6}
.dl-i .si{width:42px; height:42px; border-radius:12px; background:#F7EDD2; color:#8A6A12; display:grid; place-items:center} .dl-i .si svg{width:20px; height:20px}
.dl-i b{display:block; font-size:15px} .dl-i small{display:block; font-size:12.5px; color:#6E6E6E; margin-top:2px}
.rhythm{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px}
@media (max-width:900px){ .rhythm{grid-template-columns:1fr 1fr} } @media (max-width:480px){ .rhythm{grid-template-columns:1fr} }
.rhythm div{border-radius:18px; padding:18px; background:#111; color:#fff}
.rhythm b{color:#E2C46F; font-size:15px} .rhythm p{font-size:14px; color:#D6D6D6; margin-top:6px}
.serve{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:900px){ .serve{grid-template-columns:1fr 1fr} } @media (max-width:480px){ .serve{grid-template-columns:1fr} }
.serve a{border:1px solid #EDEDED; border-radius:16px; padding:18px; background:#fff; text-decoration:none; transition:border-color .2s}
.serve a:hover{border-color:#E2D3A6} .serve b{display:block; font-size:15.5px} .serve span{font-size:13.5px; color:#555}
.kw{list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:1000px}
.kw li{font-size:14px; font-weight:600; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid #EDEDED}
.kw li:nth-child(3n){background:#111; color:#E2C46F; border-color:#111} .kw li:nth-child(5n){background:#FBF6E6; border-color:#E9DFC3}
.ai-doc{max-width:900px}
.ai-one{border:1px solid #E9DFC3; background:#FFFCF3; border-radius:20px; padding:22px 24px; margin-bottom:28px}
.ai-one span{display:block; font-size:13px; font-weight:700; color:#8A6A12; margin-bottom:6px} .ai-one b{font-size:clamp(18px,2vw,22px); line-height:1.45; letter-spacing:-0.01em}
.ai-toc{border:1px solid #EDEDED; border-radius:18px; padding:18px 22px; margin-bottom:12px} .ai-toc ol{columns:2; margin:8px 0 0; padding-left:18px; font-size:14.5px} .ai-toc a{color:#333}
@media (max-width:560px){ .ai-toc ol{columns:1} }
.ai-doc h2{font-size:clamp(24px,2.6vw,30px); margin:44px 0 14px; max-width:none; scroll-margin-top:100px}
.ai-doc > p{font-size:17px; line-height:1.75; color:#333}
.ai-svcs{display:grid; grid-template-columns:1fr 1fr; gap:10px} @media (max-width:600px){ .ai-svcs{grid-template-columns:1fr} }
.ai-svcs div{border:1px solid #EDEDED; border-radius:14px; padding:14px 16px} .ai-svcs h3{font-size:16px} .ai-svcs h3 a{text-decoration:none} .ai-svcs p{font-size:14px; color:#555; margin-top:4px}
.ai-list{padding-left:20px; font-size:16.5px; line-height:1.75; color:#333} .ai-list li{margin-bottom:6px}
.toast{opacity:0; visibility:hidden; transition:transform .3s var(--ease), opacity .25s, visibility 0s .3s} .toast.show{opacity:1; visibility:visible; transition:transform .3s var(--ease), opacity .25s}

/* ===== v29 story chapters ===== */
.story3{padding:clamp(72px,9vw,120px) 0; background:#fff; border-top:1px solid #EFEFEF}
.s3-open{max-width:880px; margin:0 auto clamp(56px,7vw,96px); text-align:center}
.s3-open .eyebrow{justify-content:center}
.s3-open h2{font-size:clamp(34px,5vw,62px); max-width:18ch; margin:16px auto 0; line-height:1.06}
.s3-lead{font-family:var(--serif); font-size:clamp(19px,2vw,24px); line-height:1.7; color:#333; margin-top:26px}
.s3-ch{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(24px,5vw,72px); padding:clamp(40px,5vw,64px) 0; border-top:1px solid #EFEFEF}
@media (max-width:900px){ .s3-ch{grid-template-columns:1fr; gap:16px} }
.s3-num{position:sticky; top:110px; align-self:start}
@media (max-width:900px){ .s3-num{position:static} }
.s3-num span{display:block; font-size:clamp(56px,7vw,96px); font-weight:800; letter-spacing:-0.06em; line-height:.9; color:#F3E3B5}
.s3-num b{display:block; margin-top:8px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A6A12}
.s3-fav{font-family:var(--serif); font-style:italic; font-size:17px; color:#8A6A12; margin-bottom:8px}
.s3-body h3{font-size:clamp(26px,3vw,38px); letter-spacing:-0.03em; line-height:1.15; max-width:24ch; margin-bottom:18px}
.s3-body > p{font-size:17.5px; line-height:1.8; color:#333; max-width:66ch; margin-bottom:16px}
.s3-quote{margin:26px 0; padding:6px 0 6px 24px; border-left:4px solid #C9A84C; font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); line-height:1.4; color:#111; max-width:30ch}
.s3-lived{margin-top:28px; border:1px solid #EDEDED; border-radius:24px; padding:clamp(18px,3vw,28px); background:#FCFCFB}
.s3-lived-h{display:block; font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A6A12; margin-bottom:16px}
.s3-lived ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media (max-width:1000px){ .s3-lived ul{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .s3-lived ul{grid-template-columns:1fr} }
.s3-lived li{display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:start; background:#fff; border:1px solid #EFEFEF; border-radius:14px; padding:12px; transition:border-color .2s, transform .2s}
.s3-lived li:hover{border-color:#E2D3A6; transform:translateY(-2px)}
.s3-ic{width:36px; height:36px; border-radius:10px; background:#111; color:#E2C46F; display:grid; place-items:center} .s3-ic svg{width:18px; height:18px}
.s3-lived b{display:block; font-size:14.5px} .s3-lived small{display:block; font-size:12.5px; color:#6E6E6E; line-height:1.45; margin-top:2px}
.s3-map{display:grid; gap:10px; margin-top:10px}
.s3-map a{display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:12px; align-items:center; border:1px solid #EDEDED; border-radius:16px; padding:16px 18px; text-decoration:none; background:#fff; transition:border-color .2s}
.s3-map a:hover{border-color:#E2D3A6}
@media (max-width:600px){ .s3-map a{grid-template-columns:1fr} .s3-arrow{transform:rotate(90deg)} }
.s3-from{font-size:15px; color:#555} .s3-to{font-weight:700; font-size:15.5px}
.s3-arrow{width:34px; height:34px; border-radius:50%; background:#C9A84C; color:#111; display:grid; place-items:center} .s3-arrow svg{width:16px; height:16px}
.s3-diff{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.s3-diff li{display:flex; gap:12px; align-items:flex-start; font-size:16.5px; padding:14px 16px; border-radius:14px; background:#FCFCFB; border:1px solid #EFEFEF}
.s3-diff svg{width:20px; height:20px; color:#1E7A46; flex:none; margin-top:2px}
.s3-close{margin-top:clamp(40px,5vw,64px); text-align:center; background:#111; color:#fff; border-radius:28px; padding:clamp(32px,5vw,64px)}
.s3-close p{font-family:var(--serif); font-size:clamp(18px,2vw,22px); color:#D6D6D6; max-width:56ch; margin:0 auto}
.s3-close h3{font-size:clamp(28px,3.6vw,46px); color:#E2C46F; margin:18px 0 26px; letter-spacing:-0.03em}
.s3-close .btn-line{color:#fff; border-color:rgba(255,255,255,.35)}
.s3-close .btn-gold{background:#C9A84C; color:#111}
html.js-rv .s3-lead.scrub .sw.lit{color:#111}
/* AI logo icons */
.ai-row{display:flex; flex-wrap:wrap; gap:10px}
.ai-ico{width:52px; height:52px; border-radius:14px; border:1.5px solid #E2E2E2; background:#fff; color:#555; display:grid; place-items:center; transition:background .25s, color .25s, border-color .25s, transform .25s}
.ai-ico svg{width:24px; height:24px}
.ai-ico:hover,.ai-ico:focus-visible{background:var(--brand); color:var(--brand-fg); border-color:transparent; transform:translateY(-3px)}
.foot-ai{margin-top:22px} .foot-ai b{display:block; color:#111; font-size:14px; margin-bottom:10px}
.foot-ai .ai-ico{width:44px; height:44px; border-radius:12px} .foot-ai .ai-ico svg{width:20px; height:20px}