/* ==========================================================================
   Ospelia marketing — page components (built on system.css)
   ========================================================================== */

/* ---- nav additions: grouped mega menu, mobile drawer ------------------- */
.mega-in{grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr));gap:var(--s-6) var(--s-6);padding-block:var(--s-6) var(--s-7);padding-inline:var(--gut)}
.mega-col>div+div{margin-top:var(--s-5)}
.mega h4{margin-bottom:var(--s-2)}
.mega li+li{margin-top:0}
.mega li a{padding:5px 10px;font-size:.9375rem;font-weight:500}
.mega-foot{grid-column:1/-1;display:flex;gap:var(--s-6);flex-wrap:wrap;padding-top:var(--s-4);border-top:1px solid var(--line)}
.mega-foot a{font-size:var(--t-small);font-weight:500;color:var(--ink-2)}
.mega-foot a:hover{color:var(--ink)}
.nav-links>li>a[aria-current="page"]{opacity:1}

.drawer{position:fixed;inset:68px 0 0 0;z-index:49;background:var(--paper);color:var(--ink);overflow-y:auto;padding:var(--s-4) var(--gut) var(--s-8);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s linear .2s}
.drawer.open{opacity:1;visibility:visible;transition-delay:0s}
.drawer>a,.drawer summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.125rem;font-weight:600;list-style:none;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--mute)}
.drawer details[open] summary::after{content:"–"}
.drawer details .grp{padding:var(--s-3) 0 var(--s-2)}
.drawer details h4{font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--mute);margin:var(--s-3) 0 var(--s-1)}
.drawer details .grp a{display:block;padding:6px 0;font-weight:500}
.drawer .drawer-acts{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
.drawer .drawer-acts .btn{justify-content:center}
body.drawer-open{overflow:hidden}
@media (max-width:960px){
  .nav-links,.nav-right .signin,.mega{display:none}
  .nav-right .btn{display:none}
  .burger{display:flex;margin-left:var(--s-2)}
}
@media (min-width:961px){.drawer{display:none}}

/* ---- generic page rhythm ---------------------------------------------- */
.sec{padding-block:var(--s-10)}
.sec-sm{padding-block:var(--s-8)}
.sec+.sec.tight{padding-top:0}
.band{background:var(--bone-2)}
.paper{background:var(--paper)}
.rule-top{border-top:1px solid var(--line)}
.night .rule-top{border-color:var(--night-line)}
.eyebrow{font-family:var(--mono);font-size:var(--t-label);color:var(--mute);display:block;margin-bottom:var(--s-4)}
.night .eyebrow{color:var(--fog)}
.eyebrow a:hover{color:var(--ink)} .night .eyebrow a:hover{color:#fff}
.split{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(32px,5vw,96px)}
.split>.side{position:sticky;top:96px;align-self:start}
.split .side p{color:var(--ink-2);margin-top:var(--s-4);max-width:36ch}
.night .split .side p{color:var(--mist)}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-7)}
.head-row .lede{margin-top:var(--s-4)}
.prose{max-width:var(--read)}
.prose h2{font-size:var(--t-3);font-weight:600;letter-spacing:-.02em;margin:var(--s-7) 0 var(--s-3)}
.prose p{color:var(--ink-2);margin-top:var(--s-3)}
.prose .note{font-family:var(--mono);font-size:var(--t-label);color:var(--mute);margin-top:var(--s-7)}

/* ---- page heads -------------------------------------------------------- */
.phead{padding-top:clamp(56px,9vh,104px);padding-bottom:var(--s-9)}
.phead h1{max-width:18ch}
.phead .lede{margin-top:var(--s-5);max-width:60ch}
.phead .acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.night.phead,.night .phead{color:var(--mist)}

/* night hero with a product screen that lands on the bone below */
.fhero{margin-top:-68px;padding-top:68px}
.fhero .phead{padding-bottom:var(--s-8)}
.fhero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end}
.fhero-grid .lede{margin-top:0}
.fhero .shot{margin-right:calc(-1 * var(--gut));margin-bottom:-180px;position:relative;z-index:2;border-radius:var(--r-2) 0 0 var(--r-2)}
.fhero .shot img{width:100%;height:auto}
.fhero .shot-wrap{padding-left:clamp(0px,12vw,200px)}
.fhero+.land{padding-top:calc(180px + var(--s-8))}

/* spec sheet: the visual for features without a screenshot */
.spec{background:var(--paper);color:var(--ink);border-radius:var(--r-2) 0 0 var(--r-2);box-shadow:var(--lift-night);margin-right:calc(-1 * var(--gut));margin-bottom:-180px;position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.spec-l{padding:var(--s-7) var(--s-7) var(--s-6);border-right:1px solid var(--line)}
.spec-l .stamp{margin-bottom:var(--s-6)}
.spec-l .big{font-weight:700;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.04em;line-height:1}
.spec-l .sub{color:var(--mute);margin-top:var(--s-3);max-width:32ch}
.spec-r{padding:var(--s-6) var(--s-7)}
.spec-r div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:14px 0;border-bottom:1px dashed var(--line-2)}
.spec-r div:last-child{border-bottom:0}
.spec-r dt{color:var(--ink-2);font-size:var(--t-small)}
.spec-r dd{margin:0;font-family:var(--mono);font-size:1rem;text-align:right}
.spec-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:var(--s-4);padding:14px var(--s-7);background:var(--bone);border-top:1px solid var(--line)}

/* figures row */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.figs .metric{padding:var(--s-5) var(--s-5) 0 0}
.figs .metric+.metric{padding-left:var(--s-5);border-left:1px solid var(--line)}
.figs-cap{margin-top:var(--s-4)}

/* numbered how-it-works */
.steps{counter-reset:s}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s-4);padding:var(--s-6) 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:var(--t-label);color:var(--mute);padding-top:6px}
.steps h3{font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.steps p{color:var(--ink-2);margin-top:var(--s-2);max-width:58ch}

/* link lists (connects to, index rows) */
.xlist li a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.xlist li:last-child a{border-bottom:1px solid var(--line)}
.xlist b{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.xlist span.d{display:block;color:var(--mute);font-size:var(--t-small);margin-top:2px}
.xlist .arr{font-family:var(--mono);color:var(--mute);transition:transform .25s var(--ease),color .2s}
.xlist a:hover .arr{transform:translateX(4px);color:var(--green-ink)}
.xlist a:hover b{color:var(--green-ink)}
.night .xlist li a{border-color:var(--night-line)}
.night .xlist b{color:#fff} .night .xlist span.d{color:var(--fog)}
.night .xlist a:hover b,.night .xlist a:hover .arr{color:var(--green-lit)}
.xgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}
.xgrid li:nth-last-child(2) a{border-bottom:1px solid var(--line)}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:var(--s-5);padding:22px 0;font-weight:600;font-size:1.125rem;letter-spacing:-.01em;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--mute);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding-bottom:var(--s-5);max-width:62ch;margin-top:-6px}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pager a{padding:var(--s-6) 0;display:block}
.pager a+a{text-align:right;border-left:1px solid var(--line);padding-left:var(--s-6)}
.pager .stamp{display:block;margin-bottom:6px}
.pager b{font-size:var(--t-3);font-weight:600;letter-spacing:-.02em}
.pager a:hover b{color:var(--green-ink)}

/* closing CTA band */
.cta{padding-block:var(--s-10)}
.cta-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-7);align-items:end}
.cta .acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.cta .stamp{margin-top:var(--s-5)}

/* ---- features index ---------------------------------------------------- */
.jumpbar{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--night-line)}
.jumpbar a{font-size:var(--t-small);color:var(--fog);font-weight:500}
.jumpbar a:hover{color:#fff}
.fgroup{padding-block:var(--s-8);border-top:1px solid var(--line);scroll-margin-top:72px}
.fgroup:first-child{border-top:0}
.fgroup .count{font-family:var(--mono);font-size:var(--t-label);color:var(--mute);margin-top:var(--s-4)}
.fthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
.fthumb a{display:block}
.fthumb .im{aspect-ratio:16/9;border-radius:var(--r-2);overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.fthumb .im img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .5s var(--ease)}
.fthumb a:hover .im img{transform:scale(1.025)}
.fthumb .im.none{display:flex;flex-direction:column;justify-content:space-between;padding:var(--s-4);background:var(--bone-2);box-shadow:none}
.fthumb .im.none b{font-size:1.5rem;letter-spacing:-.03em;line-height:1.05;max-width:12ch}
.fthumb h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin-top:var(--s-3)}
.fthumb p{font-size:var(--t-small);color:var(--mute);margin-top:2px}
.fthumb a:hover h3{color:var(--green-ink)}

/* ---- home sections ----------------------------------------------------- */
.loop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.loop>div{padding:var(--s-6) var(--s-6) 0 0}
.loop>div+div{padding-left:var(--s-6);border-left:1px solid var(--line)}
.loop .n{font-family:var(--mono);font-size:var(--t-label);color:var(--mute)}
.loop h3{font-size:var(--t-3);font-weight:600;letter-spacing:-.02em;margin-top:var(--s-3)}
.loop p{color:var(--ink-2);margin-top:var(--s-3)}
.loop ul{margin-top:var(--s-4)}
.loop li a{font-weight:500;font-size:var(--t-small);border-bottom:1px solid var(--line-2)}
.loop li a:hover{border-color:var(--ink)}
.loop li+li{margin-top:6px}

.show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,5vw,88px);align-items:center}
.show.flip{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.show.flip .show-t{order:2}
.show-t p{color:var(--ink-2);margin-top:var(--s-4);max-width:44ch}
.show-t .facts{margin-top:var(--s-6)}
.show-t .facts div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.show-t .facts dt{color:var(--mute);font-size:var(--t-small)}
.show-t .facts dd{margin:0;font-family:var(--mono)}
.show-t .link-arrow{margin-top:var(--s-6)}
.show .surface.bleed-r{margin-right:calc(-1 * var(--gut));border-radius:var(--r-2) 0 0 var(--r-2)}
.show .surface.bleed-l{margin-left:calc(-1 * var(--gut));border-radius:0 var(--r-2) var(--r-2) 0}

.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-6)}
.toc>div{padding:var(--s-6) 0;border-top:1px solid var(--line)}
.toc h3{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.toc h3 a:hover{color:var(--green-ink)}
.toc p{font-size:var(--t-small);color:var(--mute);margin-top:4px;max-width:36ch}
.toc ul{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:2px 14px}
.toc li a{font-size:var(--t-small);font-weight:500;color:var(--ink-2);border-bottom:1px solid transparent}
.toc li a:hover{color:var(--ink);border-color:var(--ink)}

.ilist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}
.ilist li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:14px 0;border-top:1px solid var(--night-line)}
.ilist li b{font-weight:600;color:#fff}
.ilist li span{font-size:var(--t-small);color:var(--fog)}

.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.tiers>div{padding:var(--s-5) var(--s-5) var(--s-5) 0}
.tiers>div+div{padding-left:var(--s-5);border-left:1px solid var(--line)}
.tiers .l{font-size:var(--t-small);color:var(--mute)}
.tiers .v{font-family:var(--mono);font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.03em;margin-top:var(--s-2)}
.tiers .v small{font-size:.875rem;color:var(--mute);letter-spacing:0}
.tiers .on .v{color:var(--green-ink)}

.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.trust>div{border-top:1px solid var(--night-line);padding-top:var(--s-5)}
.trust h3{font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.trust p{color:var(--mist);margin-top:var(--s-3);font-size:var(--t-small);line-height:1.65}

/* ---- tables (compare, integrations) ------------------------------------ */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.tbl th,.tbl td{text-align:left;padding:14px 16px 14px 0;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{border-top:1px solid var(--ink);font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--mute);padding-top:12px}
.tbl tbody th{font-weight:500;color:var(--ink)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:1px solid var(--line)}
.tbl .us{background:var(--green-wash)}
.tbl td.us,.tbl th.us{padding-left:14px}
.tbl-wrap{overflow-x:auto;margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}
.tbl.wide{min-width:760px}
.c-yes{display:inline-flex;gap:8px;align-items:center;color:var(--green-ink);font-weight:500}
.c-yes svg{flex:none}
.c-no{color:var(--ink-2)}
.c-na{color:var(--mute)}
.c-add{color:var(--ink-2)}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:var(--s-4)}
.src{margin-top:var(--s-5)}
.src a{border-bottom:1px solid var(--line-2)}
.src a:hover{border-color:var(--ink)}
.st{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.75rem;white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.st.live{color:var(--green-ink)} .st.live i{background:var(--green)}
.st.planned{color:var(--mute)} .st.planned i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.night .st.live{color:var(--green-lit)} .night .st.live i{background:var(--green-lit)}

.stance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7)}
.stance>div{border-top:1px solid var(--ink);padding-top:var(--s-5)}
.stance h2{font-size:var(--t-3);font-weight:600;letter-spacing:-.02em}
.stance p{color:var(--ink-2);margin-top:var(--s-3)}

/* ---- pricing ----------------------------------------------------------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper);border-radius:var(--r-2);box-shadow:var(--lift);overflow:hidden}
.calc-in{padding:var(--s-7)}
.calc-out{padding:var(--s-7);background:var(--night);color:var(--mist);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6)}
.calc label{display:block;font-weight:600;font-size:1.125rem;letter-spacing:-.01em}
.stepper{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4)}
.stepper button{width:48px;height:48px;border-radius:var(--r-1);box-shadow:inset 0 0 0 1px var(--line-2);font-size:1.25rem;font-family:var(--mono)}
.stepper button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.stepper input{width:88px;height:48px;text-align:center;font-family:var(--mono);font-size:1.5rem;border:0;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:var(--r-1);background:var(--paper);color:var(--ink)}
.range{width:100%;margin-top:var(--s-5);accent-color:var(--green)}
.cycle{display:inline-flex;margin-top:var(--s-6);border-radius:var(--r-1);box-shadow:inset 0 0 0 1px var(--line-2);padding:3px}
.cycle button{height:38px;padding:0 14px;border-radius:3px;font-weight:500;font-size:var(--t-small);color:var(--mute)}
.cycle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.calc-in .stamp{margin-top:var(--s-4)}
.calc-out .big{font-family:var(--mono);font-size:clamp(2.75rem,5vw,4rem);letter-spacing:-.04em;color:#fff;line-height:1}
.calc-out .per{color:var(--fog);margin-top:var(--s-2)}
.calc-out dl div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--night-line)}
.calc-out dt{color:var(--fog);font-size:var(--t-small)}
.calc-out dd{margin:0;font-family:var(--mono);color:#fff}
.calc-out .btn{align-self:flex-start}
.incl{columns:3;column-gap:var(--s-7)}
.incl>div{break-inside:avoid;padding:var(--s-5) 0;border-top:1px solid var(--line)}
.incl h3{font-size:1rem;font-weight:600}
.incl li{font-size:var(--t-small);color:var(--ink-2);padding:3px 0;display:flex;gap:8px;align-items:baseline}
.incl li::before{content:"";flex:none;width:9px;height:5px;border-left:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(-45deg) translateY(-2px)}

/* ---- solutions --------------------------------------------------------- */
.who{padding:var(--s-8) 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.who:first-child{border-top:0;padding-top:0}
.who h2{max-width:22ch}
.who .lede{margin-top:var(--s-4)}
.who .xgrid{margin-top:var(--s-6)}
.sidenav a{display:block;padding:8px 0;font-weight:500;color:var(--mute);border-top:1px solid var(--line)}
.sidenav a:hover{color:var(--ink)}

/* ---- footer ------------------------------------------------------------ */
.foot{padding:var(--s-9) 0 var(--s-6)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:var(--s-6)}
.foot .brand{color:#fff}
.foot-top p{color:var(--fog);font-size:var(--t-small);margin-top:var(--s-4);max-width:32ch}
.foot h4{font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--fog);margin-bottom:var(--s-3)}
.foot li a{display:inline-block;padding:4px 0;font-size:var(--t-small);color:var(--mist)}
.foot li a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-9);padding-top:var(--s-5);border-top:1px solid var(--night-line)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:1100px){
  .mega-in{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mega-feature{display:none}
  .fhero-grid,.cta-in,.show,.show.flip{grid-template-columns:1fr}
  .show.flip .show-t{order:0}
  .split{grid-template-columns:1fr;gap:var(--s-6)}
  .split>.side{position:static}
  .fthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-top>div:first-child{grid-column:1/-1}
  .incl{columns:2}
  .calc{grid-template-columns:1fr}
  .fhero .shot-wrap{padding-left:0}
}
@media (max-width:760px){
  .sec{padding-block:var(--s-9)}
  .figs,.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figs .metric:nth-child(3),.tiers>div:nth-child(3){padding-left:0;border-left:0}
  .figs .metric{padding-bottom:var(--s-5)}
  .loop,.trust,.stance{grid-template-columns:1fr}
  .loop>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:var(--s-6)}
  .xgrid,.ilist{grid-template-columns:1fr}
  .xgrid li:nth-last-child(2) a{border-bottom:0}
  .fthumbs,.toc{grid-template-columns:1fr}
  .incl{columns:1}
  .spec{grid-template-columns:1fr;margin-bottom:-120px}
  .spec-l{border-right:0;border-bottom:1px solid var(--line);padding:var(--s-6)}
  .spec-r{padding:var(--s-4) var(--s-6)}
  .spec-foot{padding:12px var(--s-6)}
  .fhero .shot{margin-bottom:-120px}
  .fhero+.land{padding-top:calc(120px + var(--s-7))}
  .pager{grid-template-columns:1fr}
  .pager a+a{text-align:left;border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-in,.calc-out{padding:var(--s-6)}
  .phead .acts .btn{flex:1;justify-content:center}
}

/* mega menu: feature panel + a 3-up grid of groups */
.mega-in{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.mega-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) var(--s-6)}
.mega-groups h4 a:hover{color:var(--ink)}
.mega .more{font-size:.84375rem;color:var(--mute);font-weight:500}
.mega .more:hover{color:var(--green-ink)}
@media (max-width:1100px){.mega-in{grid-template-columns:1fr}}

/* spacing + table + thumb refinements */
.phead+.sec.tight,.phead+.sec{padding-top:0}
.tbl.two th:first-child{width:38%}
.tbl.two th.us,.tbl.two td.us{width:31%}
.fthumb .im img{width:165%;max-width:none;height:auto;object-fit:initial}

/* ---- finish-review pass -------------------------------------------------- */
.crumbs{font-family:var(--mono);font-size:var(--t-label);color:var(--mute);margin-bottom:var(--s-5)}
.night .crumbs{color:var(--fog)}
.crumbs a:hover{color:var(--ink)} .night .crumbs a:hover{color:#fff}
.subhead{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:var(--s-7) 0 var(--s-2)}
.phead{padding-bottom:var(--s-8)}
.fhero .phead{padding-bottom:var(--s-8)}
.fhero:not(:has(.shot)) .phead{padding-bottom:var(--s-9)}
/* capabilities are parallel, not a sequence: no counters */
.steps li{grid-template-columns:1fr}
.steps li::before{content:none}
.notes{margin-top:var(--s-6)}
.notes div{padding:var(--s-4) 0;border-top:1px solid var(--line)}
.notes dt{font-weight:600}
.notes dd{margin:4px 0 0;color:var(--ink-2);max-width:58ch}
.also .xgrid li:nth-last-child(2) a{border-bottom:0}
.fthumb .im img{width:100%;height:100%;object-fit:cover;object-position:left top}
.fthumb .im.none{justify-content:flex-end}
/* home: connect loop now sits in the landing band under the hero */
.after .loop p{font-size:var(--t-body);line-height:1.6;max-width:none;color:var(--ink-2)}
.loop h3{margin-top:0}
.loop .feeds{margin-top:var(--s-4);font-size:var(--t-small)}
.loop .feeds a{font-weight:500;border-bottom:1px solid var(--line-2)}
.loop .feeds a:hover{border-color:var(--ink)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.09fr);gap:var(--s-5);align-items:center}
.pair figure .surface img{width:100%}
.pair figcaption{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:var(--s-3);font-size:var(--t-small);color:var(--mute)}
.pair figcaption b{color:var(--ink);font-weight:600}
.pair figcaption .num{color:var(--green-ink)}
.pair-arrow{color:var(--green);display:flex;justify-content:center}
.mob{display:none}
.tiers .v{white-space:nowrap}
@media (max-width:760px){
  .pair{grid-template-columns:1fr}
  .pair-arrow{transform:rotate(90deg);height:32px}
  .desk{display:none}
  .mob{display:block}
  .tbl-wrap{margin-right:0;padding-right:0}
  .tbl{font-size:.875rem}
  .tbl th,.tbl td{padding-right:10px}
  .tbl td.us,.tbl th.us{padding-left:8px}
  .tbl .c-yes{gap:5px}
  .tbl td,.tbl th{overflow-wrap:anywhere}
  .tbl.wide + .legend::before{content:"Scroll the table sideways for every column.";display:block;width:100%;font-family:var(--mono);font-size:var(--t-label);color:var(--mute)}
  .tiers{grid-template-columns:1fr}
  .tiers>div,.tiers>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .tiers>div:first-child{border-top:0}
  .show .surface.bleed-r,.show .surface.bleed-l{margin-inline:0;border-radius:var(--r-2)}
}

/* integration logos: each brand's own mark on a neutral tile */
.logo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:7px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.logo img{width:20px;height:20px;object-fit:contain}
.logo.mono{font-weight:700;font-size:.875rem;color:var(--ink-2)}
.lname{display:inline-flex;align-items:center;gap:12px}
.tbl .logo{width:36px;height:36px}
.tbl .logo img{width:24px;height:24px}
.tbl th .lname{font-weight:600}
.tbl td,.tbl th{vertical-align:middle}
.logos{display:flex!important;flex-wrap:wrap;gap:6px;margin-top:10px!important}
.night .logo{box-shadow:none}
.ilist li b{color:#fff}

/* ===================== visual pass (v3) ===================== */
/* screen cards: the product as the thumbnail */
.scgrid{display:grid;gap:var(--s-6) var(--s-5)}
.scgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sc{display:block}
.sc-im{aspect-ratio:16/10;border-radius:var(--r-2);overflow:hidden;background:var(--paper);box-shadow:var(--lift)}
.sc-im img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .6s var(--ease)}
.sc:hover .sc-im img{transform:scale(1.03)}
.sc-im.none{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:var(--s-5);background:var(--green);color:#fff;box-shadow:none}
.sc-im.none b{font-size:1.625rem;letter-spacing:-.03em;line-height:1.05}
.sc-im.none span{font-size:var(--t-small);opacity:.8}
.sc-cap{margin-top:var(--s-3)}
.sc-cap b{display:block;font-weight:600;letter-spacing:-.01em}
.sc-cap span{display:block;font-size:var(--t-small);color:var(--mute);margin-top:2px}
.sc:hover .sc-cap b{color:var(--green-ink)}
.night .sc-cap b{color:#fff} .night .sc-cap span{color:var(--fog)}
.night .sc:hover .sc-cap b{color:var(--green-lit)}
.night .sc-im{box-shadow:var(--lift-night)}
.night .sc-im.none{background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line)}

/* feature hero without its own screen: a fan of the screens it works with */
.fan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin-bottom:-140px;position:relative;z-index:2}
.fan figure{margin:0;background:var(--paper);border-radius:var(--r-2);overflow:hidden}
.fan figure:nth-child(2){transform:translateY(28px)}
.fan figure:nth-child(3){transform:translateY(56px)}
.fan img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.fan figcaption{font-family:var(--mono);font-size:var(--t-label);color:var(--mute);padding:10px 14px;border-top:1px solid var(--line)}
.fhero .fan+*{}
.fhero:has(.fan)+.land{padding-top:calc(140px + 56px + var(--s-8))}
.fhero.noshot .phead{padding-bottom:var(--s-9)}

/* big figures band */
.figband .bigfigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.bigfigs>div{border-top:2px solid var(--ink);padding-top:var(--s-4)}
.bigfigs>div:first-child{border-color:var(--green)}
.bigfigs .v{font-family:var(--mono);font-size:clamp(1.9rem,3.6vw,3.25rem);letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.bigfigs>div:first-child .v{color:var(--green-ink)}
.bigfigs .l{color:var(--mute);margin-top:6px;font-size:var(--t-small)}
.figband .stamp{margin-top:var(--s-5)}
.figband{padding-bottom:0}

/* capability layouts */
.stick{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start}
.stick-im{position:sticky;top:96px;margin-left:calc(-1 * var(--gut))}
.stick-im .surface{border-radius:0 var(--r-2) var(--r-2) 0}
.stick-im img{width:100%}
.caps{margin-top:var(--s-6)}
.caps li{padding:var(--s-5) 0;border-top:1px solid var(--line)}
.caps h3,.grid2 h3,.cols4 h3{font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.caps p,.grid2 p{color:var(--ink-2);margin-top:var(--s-2)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-8)}
.grid2>div{border-top:2px solid var(--ink);padding-top:var(--s-5)}
.grid2>div:nth-child(1){border-color:var(--green)}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.cols4>div{border-top:2px solid var(--green-lit);padding-top:var(--s-5)}
.cols4 p{color:var(--mist);margin-top:var(--s-3);font-size:var(--t-small);line-height:1.65}
.fedby{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.fedby a{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:var(--t-small)}
.fedby a span{margin-left:6px;border-bottom:1px solid var(--line-2)}
.fedby a:hover span{border-color:var(--ink)}
.night .fedby a span{color:#fff}

.pager2{display:grid;grid-template-columns:1fr auto 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pager2 a{padding:var(--s-6) 0;display:block}
.pager2 a.mid{text-align:center;padding-inline:var(--s-6);border-inline:1px solid var(--line)}
.pager2 a:last-child{text-align:right}
.pager2 .stamp{display:block;margin-bottom:6px}
.pager2 b{font-size:var(--t-3);font-weight:600;letter-spacing:-.02em}
.pager2 a:hover b{color:var(--green-ink)}

/* features index */
.fgroup2{padding-block:var(--s-9);scroll-margin-top:68px}
.fgroup2+.fgroup2:not(.night){border-top:1px solid var(--line)}
.fg-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s-6);align-items:end;margin-bottom:var(--s-7)}
.fg-head .lede{margin:0}
.fg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
.sc.big{grid-column:span 2;grid-row:span 2}
.sc.big .sc-im{aspect-ratio:auto;height:calc(100% - 64px)}
.sc.big .sc-cap b{font-size:1.375rem}
.night .also .xlist li a{border-color:var(--night-line)}
.night .subhead{color:#fff}

/* integrations: connection diagram */
.dia-wrap{margin-top:var(--s-8);padding-top:var(--s-7);border-top:1px solid var(--night-line)}
.dia{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(40px,.7fr) auto minmax(40px,.7fr) minmax(0,1fr)}
.dia ul{position:relative}
.dia li{position:absolute;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;gap:10px;font-size:var(--t-small);color:var(--mist)}
.dia-l li{justify-content:flex-end;flex-direction:row-reverse}
.dia-l li span{margin-left:auto;margin-right:10px}
.dia-l li{justify-content:flex-start}
.dia-r li a{color:#fff;font-weight:500;border-bottom:1px solid var(--night-line)}
.dia-r li a:hover{border-color:var(--green-lit)}
.dia-r li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-lit);flex:none}
.dia-w{width:100%;height:100%;fill:none;stroke:var(--green-lit);stroke-opacity:.45;stroke-width:1.2px;vector-effect:non-scaling-stroke}
.dia-w path{vector-effect:non-scaling-stroke}
.dia-c{display:flex;align-items:center}
.node{display:flex;flex-direction:column;align-items:center;gap:8px;padding:var(--s-5) var(--s-6);border-radius:var(--r-2);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line);color:#fff}
.node svg{width:40px;height:40px}
.node b{font-size:1.25rem;letter-spacing:-.02em}
.dia .logo{width:30px;height:30px}

.icats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.icats.sm{grid-template-columns:repeat(4,minmax(0,1fr))}
.icat{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5) 0;border-top:2px solid var(--ink);transition:border-color .2s}
.icat:hover{border-color:var(--green)}
.icat h3{font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.icat p{color:var(--ink-2);font-size:var(--t-small)}
.icat .stamp{margin-top:auto}
.icat:hover h3{color:var(--green-ink)}
.icat-logos{display:flex;flex-wrap:wrap;gap:6px}
.icats.sm .icat{padding:var(--s-4) 0}
.icats.sm .icat h3{font-size:1.0625rem}
.night .icat{border-color:var(--mist)} .night .icat p{color:var(--mist)}

.lwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-4);margin-top:var(--s-8)}
.lw{display:flex;flex-direction:column;gap:6px;padding:var(--s-5);border-radius:var(--r-2);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line)}
.lw .logo{width:56px;height:56px;border-radius:12px;margin-bottom:var(--s-3);box-shadow:none}
.lw .logo img{width:36px;height:36px}
.lw b{color:#fff;font-size:1.0625rem}
.lw>span:not(.st):not(.logo){font-size:var(--t-small);color:var(--fog)}
.lw .st{margin-top:var(--s-3)}
.lw.planned{opacity:.62}
.lw.live{box-shadow:inset 0 0 0 1px rgba(87,161,95,.55)}

/* compare: coverage bars and scorecard */
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;width:100%}
.seg i{height:14px;border-radius:2px;background:rgba(255,255,255,.08)}
.seg i.on{background:var(--mist)}
.seg.us i.on{background:var(--green-lit)}
.cov-wrap{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--night-line)}
.cov{display:grid;gap:4px}
.cov-row{display:grid;grid-template-columns:200px minmax(0,1fr) 64px minmax(0,220px);gap:var(--s-5);align-items:center;padding:12px 0;border-bottom:1px solid var(--night-line)}
.cov-row b{color:#fff;font-weight:600}
.cov-row .num{color:#fff;font-size:1.125rem;text-align:right}
.cov-row .p{font-size:var(--t-small);color:var(--fog)}
.cov-row.us .num{color:var(--green-lit)}
a.cov-row:hover b{color:var(--green-lit)}
.score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--night-line)}
.score .big{font-size:clamp(3.5rem,7vw,6rem);color:#fff;letter-spacing:-.05em;line-height:1;margin:var(--s-3) 0 var(--s-4)}
.score .big small{font-size:.35em;color:var(--fog);letter-spacing:0}
.score .us .big{color:var(--green-lit)}
.score p{color:var(--fog);font-size:var(--t-small);margin-top:var(--s-3)}

/* solutions */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.pills a{display:inline-block;padding:7px 12px;border-radius:999px;font-size:var(--t-small);font-weight:500;box-shadow:inset 0 0 0 1px var(--line-2)}
.pills a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.night .pills a{color:#fff;box-shadow:inset 0 0 0 1px #3A3F3B}
.night .pills a:hover{box-shadow:inset 0 0 0 1px var(--mist)}
.night .show-t p{color:var(--mist)}
.night .btn-quiet{color:#fff}
.day li{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-6);align-items:start;padding:var(--s-7) 0;border-top:1px solid var(--line)}
.day .when{font-size:1.125rem;color:var(--green-ink);padding-top:4px}
.day h3{font-size:var(--t-3);font-weight:600;letter-spacing:-.02em}
.day p{color:var(--ink-2);margin-top:var(--s-3);font-size:var(--t-small)}
.day .link-arrow{margin-top:var(--s-4);font-size:var(--t-small)}
.day .im img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top}

/* pricing rate chart */
.ratechart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;height:260px;align-items:end;border-bottom:1px solid var(--ink)}
.rb{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.rb i{display:block;width:100%;height:var(--h);min-height:18%;background:var(--ink);border-radius:3px 3px 0 0}
.rb:first-child i{background:var(--green)}
.rb span{font-size:.8125rem;margin-bottom:6px;color:var(--ink-2)}
.rb b{position:absolute;bottom:-26px;font-weight:400;font-size:.8125rem;color:var(--mute)}
.ratechart+.stamp{margin-top:34px!important}

/* about */
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4);padding-inline:var(--gut);margin-bottom:-120px;position:relative;z-index:2}
.mosaic .surface img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:left top}
.mosaic .surface:nth-child(even){transform:translateY(40px)}
.fhero:has(.mosaic)+.land{padding-top:calc(160px + var(--s-8))}
.prose.big p{font-size:var(--t-lede);line-height:1.6}
.beliefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7)}
.beliefs b{font-size:var(--t-label);color:var(--green-lit);font-weight:400}
.beliefs h3{font-size:var(--t-2);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:var(--s-4)}
.beliefs p{color:var(--mist);margin-top:var(--s-4)}
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.statrow>div{border-top:2px solid var(--ink);padding-top:var(--s-4)}
.statrow .v{font-size:clamp(2.5rem,5vw,4.25rem);letter-spacing:-.05em;line-height:1}
.statrow .l{color:var(--mute);margin-top:var(--s-2)}

/* CTA with a product peek */
.cta{overflow:hidden}
.cta-in{position:relative}
.cta-peek{align-self:end;margin-right:calc(-1 * var(--gut));margin-bottom:calc(-1 * var(--s-10) - 40px);border-radius:var(--r-2) 0 0 0;overflow:hidden;box-shadow:var(--lift-night);transform:rotate(-2deg) translateY(20px);transform-origin:bottom left}
.cta-peek img{width:100%;display:block}

@media (max-width:1100px){
  .stick,.fg-head{grid-template-columns:1fr}
  .stick-im{position:static;margin-left:0}
  .stick-im .surface{border-radius:var(--r-2)}
  .cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .icats,.icats.sm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cov-row{grid-template-columns:140px minmax(0,1fr) 52px}
  .cov-row .p{grid-column:2/-1;margin-top:-6px}
  .day li{grid-template-columns:120px minmax(0,1fr)}
  .day .im{grid-column:1/-1}
  .mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaic .surface:nth-child(n+4){display:none}
  .cta-peek{display:none}
}
@media (max-width:760px){
  .scgrid.c3,.fg-grid,.grid2,.cols4,.bigfigs,.beliefs,.icats,.icats.sm,.score{grid-template-columns:1fr}
  .figband .bigfigs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc.big{grid-column:auto;grid-row:auto}
  .sc.big .sc-im{aspect-ratio:16/10;height:auto}
  .fan{grid-template-columns:1fr;margin-bottom:-80px}
  .fan figure:nth-child(n+2){display:none}
  .fhero:has(.fan)+.land{padding-top:calc(80px + var(--s-7))}
  .pager2{grid-template-columns:1fr 1fr}
  .pager2 a.mid{display:none}
  .dia{display:block;height:auto!important}
  .dia-w,.dia-c{display:none}
  .dia ul{display:grid;gap:10px}
  .dia li{position:static;transform:none}
  .dia-l li{flex-direction:row;justify-content:flex-start}
  .dia-l li span{margin:0}
  .dia-r{margin-top:var(--s-6)}
  .cov-row{grid-template-columns:1fr 52px}
  .cov-row .seg{grid-column:1/-1;order:3}
  .cov-row .p{grid-column:1/-1;order:4}
  .day li{grid-template-columns:1fr;gap:var(--s-3)}
  .ratechart{height:200px;gap:4px}
  .rb span{font-size:.625rem}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:-60px}
  .mosaic .surface:nth-child(n+3){display:none}
  .fhero:has(.mosaic)+.land{padding-top:calc(100px + var(--s-7))}
  .lwall{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hide-m{display:none}
  .tbl.wide:has(.hide-m){min-width:0}
  .cta{padding-block:var(--s-9)}
  .scgrid.c3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-3)}
  .sc-cap span{display:none}
  .sc-cap b{font-size:.9375rem}
}
/* plan badge on feature pages (2026-09-24) */
.pkg-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;margin:0 0 var(--s-4);text-decoration:none;border:1px solid currentColor}
.pkg-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.night .pkg-badge{color:var(--fog)}
.night .pkg-badge.pkg-operations{color:#9fd4a8}
.night .pkg-badge.pkg-marketing{color:#f0c27a}
.pkg-badge:hover{text-decoration:underline}

/* ---- platforms: Operations / Marketing / Both (2026-09-24) ------------ */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.door{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.door:hover{border-color:var(--ink);transform:translateY(-2px)}
.door.on{background:var(--night);color:var(--mist);border-color:var(--night)}
.door-k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:8px}
.door-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.door-marketing .door-k::before{background:#C98A2B}
.door-both .door-k::before{background:linear-gradient(90deg,var(--green-lit) 50%,#E0A445 50%)}
.door.on .door-k{color:var(--fog)}
.door-n{font-size:var(--t-3);font-weight:600;letter-spacing:-.015em}
.door.on .door-n{color:#fff}
.door-p{color:var(--ink-2);font-size:var(--t-small);line-height:1.6;flex:1}
.door.on .door-p{color:var(--mist)}
.door-f{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line)}
.door.on .door-f{border-color:var(--night-line)}
.door-f .num{font-family:var(--mono);font-size:1.5rem}
.door-f small{font-size:var(--t-label);color:var(--mute)}
.door.on .door-f small,.door.on .door-c{color:var(--fog)}
.door-c{font-size:var(--t-label);color:var(--mute);font-family:var(--mono)}
.door-go{font-weight:600;font-size:var(--t-small);color:var(--green-ink)}
.door.on .door-go{color:var(--green-lit)}
.door[aria-current="page"]{border-color:var(--ink);border-width:2px}
.door.on[aria-current="page"]{border-color:var(--green-lit)}
.gtag{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--mute);margin-bottom:var(--s-3);text-decoration:none}
.gtag-operations{color:var(--green-ink);border-color:currentColor}
.gtag-marketing{color:#8A5A12;border-color:currentColor}
a.gtag:hover{background:var(--bone-2)}
.plat-hero{margin-top:-68px;padding-top:68px;padding-bottom:var(--s-8);color:var(--mist)}
.plat-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end;padding-top:clamp(56px,9vh,104px);padding-bottom:var(--s-8)}
.plat-kind{display:block;margin-bottom:var(--s-5);color:var(--fog)}
.plat-h{color:#fff;font-size:clamp(3rem,6.4vw,5.5rem)}
.plat-h .quiet{display:block;color:var(--fog)}
.plat-side .lede{color:var(--mist)}
.plat-side .hero-acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.plat-shot{box-shadow:var(--lift-night);border-radius:var(--r-2);overflow:hidden}
.plat-shot img{display:block;width:100%;height:auto}
.plat-hero .ex{margin-top:var(--s-4);color:var(--fog)}
.everylist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-6)}
.everylist li a{display:block;padding:12px 0;border-top:1px solid var(--line-2);font-weight:500}
.everylist li a:hover{color:var(--green-ink)}
.mplats{display:grid;gap:var(--s-2);margin-top:var(--s-3)}
.mplat{display:grid;grid-template-columns:1fr;gap:0 var(--s-3);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-1);text-decoration:none}
.mplat:hover{border-color:var(--ink)}
.mplat b{font-weight:600}
.mplat span{font-size:var(--t-label);color:var(--mute)}
.mplat .num{font-family:var(--mono);margin-top:2px}
.fplat{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-5)}
.fplat a{font-weight:600;color:#fff;border-bottom:1px solid var(--night-line)}
.fplat a:hover{color:var(--green-lit);border-color:currentColor}
.pkcol-h h3 a:hover,.tiers .l a:hover{color:var(--green-ink);text-decoration:underline}
@media (max-width:960px){
  .doors{grid-template-columns:1fr}
  .plat-top{grid-template-columns:1fr;align-items:start;gap:var(--s-6);padding-top:var(--s-7);padding-bottom:var(--s-6)}
  .plat-hero .hero-acts .btn{flex:1;justify-content:center}
  .everylist{grid-template-columns:1fr}
}

/* ---- status page ---- */
.st-sum{display:flex;align-items:center;gap:12px;padding:var(--s-5);border-radius:var(--r-2);background:var(--bone-2);font-size:1.15rem}
.st-sum.up{background:var(--green-wash)} .st-sum.degraded{background:#f6ecd6} .st-sum.down{background:#f6dcd6}
.st-dot{width:11px;height:11px;border-radius:50%;background:var(--mute);flex:none}
.up>.st-dot,.st-sum.up .st-dot{background:var(--green)} .degraded>.st-dot,.st-sum.degraded .st-dot{background:#b8862b} .down>.st-dot,.st-sum.down .st-dot{background:var(--red)}
.st-list{margin-top:var(--s-5);border-top:1px solid var(--line)}
.st-list li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.st-n{font-weight:600;flex:1;min-width:200px}
.st-s{color:var(--mute);font-size:var(--t-small)}
.st-list li{color:var(--ink)}

/* iPhone screenshots (2026-10) */
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);align-items:start;max-width:1040px;margin:var(--s-8) auto 0}
.phones.six{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s-8)}
.phone-fig{margin:0;text-align:center}
.phone-im{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;filter:drop-shadow(0 18px 30px rgba(20,30,20,.18)) drop-shadow(0 4px 8px rgba(20,30,20,.10))}
.phone-fig figcaption{margin-top:var(--s-4);font-size:var(--t-small);color:var(--mute);max-width:30ch;margin-left:auto;margin-right:auto}
.phone-fig figcaption b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.phones .phone-fig:nth-child(3n+2){transform:translateY(-18px)}
.hero-phones{display:flex;justify-content:center;gap:var(--s-5);align-items:flex-end}
.hero-phones .phone-im{max-width:260px}
.hero-phones .phone-fig:nth-child(2) .phone-im{max-width:290px}
@media (max-width:700px){
  .phones,.phones.six{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-4);padding:0 4px var(--s-4);margin-top:var(--s-6)}
  .phones .phone-fig{scroll-snap-align:center}
  .phones .phone-fig:nth-child(3n+2){transform:none}
  .hero-phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-4);padding-bottom:var(--s-4)}
  .hero-phones .phone-fig{flex:0 0 66%;scroll-snap-align:center}
  .hero-phones .phone-im,.hero-phones .phone-fig:nth-child(2) .phone-im{max-width:240px}
}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:var(--r-1)}
.skip:focus{left:8px}
.ro .go{margin-top:var(--s-5)}
.ro .go .link-arrow{color:#fff;font-size:var(--t-small)}
/* nav + footer group labels: styled like the old h4s, but not headings */
.grp-lbl{margin:0}
.mega .grp-lbl{font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--mute);margin-bottom:var(--s-2)}
.mega-groups .grp-lbl a:hover{color:var(--ink)}
.drawer details .grp-lbl{font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--mute);margin:var(--s-3) 0 var(--s-1)}
.foot .foot-top .grp-lbl{font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--fog);margin:0 0 var(--s-3);max-width:none}

/* packages (2026-09-23) */
.pkpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-6)}
@media (max-width:760px){.pkpick{grid-template-columns:1fr}}
.pk{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:var(--s-5);border-radius:var(--r-2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;font:inherit;color:var(--ink);transition:box-shadow .15s}
.pk:hover{box-shadow:inset 0 0 0 1px var(--green-ink)}
.pk.on{box-shadow:inset 0 0 0 2px var(--green-ink),var(--lift)}
.pk-n{font-weight:600;font-size:1.125rem;letter-spacing:-.01em}
.pk-v{font-family:var(--mono);font-size:clamp(1.75rem,3vw,2.25rem);letter-spacing:-.03em}
.pk-v small{font-size:.8125rem;color:var(--mute);letter-spacing:0}
.pk-d{color:var(--mute);font-size:var(--t-small);line-height:1.5}
.pk-save{font-size:var(--t-small);font-weight:600;color:var(--green-ink)}
.o-pkg{font-size:var(--t-small);color:var(--fog);margin-bottom:var(--s-2)}
.pkcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:760px){.pkcols{grid-template-columns:1fr}}
.pkcol{background:var(--paper);border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--line-2);padding:var(--s-6)}
.pkcol-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--line);margin-bottom:var(--s-3)}
.pkcol-h h3{font-size:1.375rem;letter-spacing:-.02em}
.pkcol-h .num{font-family:var(--mono);color:var(--green-ink)}
.pkcol ul{list-style:none;margin:0;padding:0}
.pkcol li a,.pkcol li .pkx{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.pkcol li:last-child a,.pkcol li:last-child .pkx{border-bottom:0}
.pkcol li a:hover b{color:var(--green-ink)}
.pkcol li span{color:var(--mute);font-size:var(--t-small)}
.pkcol li .pkx b{color:var(--ink)}
.ptable-wrap{overflow-x:auto}
@media (max-width:760px){.pkcol{padding:var(--s-5);min-width:0}.pkcol li a,.pkcol li .pkx{overflow-wrap:anywhere}}
.ptable{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.ptable th,.ptable td{padding:var(--s-4) var(--s-4) var(--s-4) 0;text-align:left;border-bottom:1px solid var(--line)}
.ptable thead th{font-size:var(--t-small);color:var(--mute);font-weight:500}
.ptable tbody th{font-weight:500}
.ptable td{font-family:var(--mono);font-size:1.25rem;letter-spacing:-.02em}
.ptable[data-pk="operations"] td[data-pk="operations"],.ptable[data-pk="marketing"] td[data-pk="marketing"],.ptable[data-pk="both"] td[data-pk="both"]{color:var(--green-ink);font-weight:600}
.ptable tr.on th{font-weight:700}
.ptable tr.on td{background:rgba(47,93,58,.06)}

/* help center + guides (2026-09-25) */
.hero-note{margin-top:var(--s-4);font-size:var(--t-small);color:var(--ink-2)}
.night .hero-note{color:var(--fog)}
.hero-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.night .hero-note a{color:#fff}
.hero-note+.hero-note{margin-top:var(--s-2)}
.ulink{text-decoration:underline;text-underline-offset:3px}
.ulink:hover{color:var(--green-ink)}
.hsearch{margin-top:var(--s-6);max-width:640px}
.hsearch label{display:block;font-family:var(--mono);font-size:var(--t-label);color:var(--mute);margin-bottom:var(--s-2)}
.hsearch-row{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.hsearch input{flex:1 1 280px;min-width:0;height:52px;padding:0 var(--s-4);font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--paper);border:0;border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.hsearch input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--green)}
.hjump{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-6)}
.hjump a{font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.hjump a:hover{color:var(--green-ink);border-color:currentColor}
.hcat{padding-block:var(--s-8);border-top:1px solid var(--line)}
.hcat:first-child{border-top:0;padding-top:0}
.hnone{padding:var(--s-6) 0;color:var(--ink-2)}
.stuck{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap;padding:var(--s-6);background:var(--paper);border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--line)}
.stuck p{color:var(--ink-2);margin-top:var(--s-2)}
.stuck.sm{margin-top:var(--s-8);max-width:var(--read)}
.art-h{max-width:22ch}
.art-meta{margin-bottom:var(--s-3)}
.art-meta a:hover{color:var(--green-ink)}
.phead .lede+.art-meta{margin-top:var(--s-5)}
.art-side .stamp{margin-bottom:var(--s-3)}
.art-side .sidenav a{font-size:var(--t-small);line-height:1.4;padding:10px 0}
.art-side .sidenav a[aria-current]{color:var(--ink);font-weight:600}
.article{font-size:var(--t-body);min-width:0}
.article>*:first-child{margin-top:0}
.article h2{scroll-margin-top:96px}
.article h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em;margin:var(--s-6) 0 var(--s-2)}
.article ul,.article ol{margin-top:var(--s-3);padding-left:1.4em;color:var(--ink-2)}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article li{margin-top:6px;padding-left:4px}
.article li ul,.article li ol{margin-top:6px}
.article strong{color:var(--ink);font-weight:600}
.article a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
.article a:hover{color:var(--ink)}
.article blockquote{margin:var(--s-5) 0;padding:var(--s-4) var(--s-5);background:var(--paper);border-left:3px solid var(--green);border-radius:0 var(--r-2) var(--r-2) 0}
.article blockquote p{margin-top:0;color:var(--ink)}
.article blockquote p+p{margin-top:var(--s-2)}
.article table{width:100%;border-collapse:collapse;margin-top:var(--s-4);font-size:var(--t-small);font-variant-numeric:tabular-nums}
.article th,.article td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.article thead th{font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink)}
.article td{color:var(--ink-2)}
.article .tbl-scroll{overflow-x:auto;margin-top:var(--s-4);-webkit-overflow-scrolling:touch}
.article .tbl-scroll table{margin-top:0;min-width:520px}
.article code{font-family:var(--mono);font-size:.9em}
.gcards .gcard h3{font-size:1.375rem;line-height:1.2}
.gcards .gcard p{font-size:var(--t-body)}
@media (max-width:900px){
  .art-split>.art-side{order:2}
  .art-split{display:flex;flex-direction:column}
}