/*
* This is a manifest file that'll be compiled into application.css.
*
* With Propshaft, assets are served efficiently without preprocessing steps. You can still include
* application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
* depending on specificity.
*
* Consider organizing styles into separate files for maintainability.
*/
/* ==================================================================
SPRIV — BRAND TOKENS
Sampled directly from the QA login screen.
Change these and the whole page follows.
================================================================== */
:root{
--brand: #00BC4E; /* Spriv green — app background, primary CTA */
--brand-deep: #00A344; /* hover / pressed */
--brand-check: #00CA00; /* the check inside the logo mark */
--brand-soft: #5FD98F; /* light accent */
--ink: #101627; /* wordmark, Sign in button, labels */
--body: #5C6675; /* body copy */
--muted: #8A93A0; /* captions, meta */
--tint: #E7F8EE; /* soft green wash */
--tint-2: #F4FBF7;
--paper: #FFFFFF;
--surface: #F8FAFB;
--line: #E5E7EB; /* matches the app's input borders */
--line-soft: #EFF1F4;
--display: 'DM Sans', sans-serif;
--text: 'DM Sans', sans-serif;
--mono: 'DM Mono', ui-monospace, monospace;
--serif: 'Source Serif 4', Georgia, serif;
--wrap: 1180px;
--r: 14px;
--shadow: 0 1px 2px rgba(16,22,39,.04), 0 12px 32px rgba(16,22,39,.06);
--shadow-lg: 0 2px 4px rgba(16,22,39,.04), 0 24px 60px rgba(16,22,39,.09);
}
/* ==================================================================
MOBILE-FIRST BASE
Every rule below is the phone layout by default. Tablet (≥640px /
≥760px) and desktop (≥980px) enhancements live in `min-width` media
queries directly under the component they adjust — keep new
breakpoints co-located with their component rather than collected
into a separate global block at the bottom of the file.
================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--body);
font-family:var(--text);font-size:16.5px;line-height:1.68;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;
letter-spacing:-.02em;line-height:1.16;font-weight:600}
h1{font-size:clamp(2.15rem,4.6vw,3.5rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:-.028em}
h3{font-size:1.1rem;letter-spacing:-.012em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:560px){
.wrap{padding:0 28px}
}
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--brand-deep)}
.lede{font-size:1.05rem;color:var(--body);max-width:62ch}
/* inline highlight — uses the same tint wash + deep-green accent
as .nav-link.active and the callout chips */
.hl{background:var(--tint);color:var(--brand-deep);font-weight:600;
padding:.05em .3em;border-radius:5px;
box-shadow:inset 0 -2px 0 var(--brand-soft)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-family:var(--text);font-weight:600;font-size:.94rem;
padding:.82rem 1.4rem;border-radius:9px;border:1px solid transparent;
cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;
/* Own compositing layer so buttons inside the backdrop-filter header don't
get their box-shadow (and text) smeared by the header's blur. */
isolation:isolate;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(0,188,78,.26)}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#1C243A;transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand-soft);color:var(--brand-deep)}
.btn-sm{padding:.6rem 1.05rem;font-size:.88rem}
/* Full-width button. `flex` rather than the base `inline-flex` on purpose: an
inline-level sits on a text baseline and picks up a descender
gap underneath, which makes the space below it read as uneven. */
.btn-block{display:flex;width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:.5rem}
.logo img{height:48px;width:auto;display:block}
.site-footer .logo img{height:56px}
@media(min-width:560px){
.logo img{height:60px}
}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-soft)}
.header-inner{display:flex;align-items:center;gap:1.6rem;height:92px}
.nav{display:none}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:.32rem;padding:.55rem .8rem;border-radius:8px;
font-size:.93rem;font-weight:500;color:var(--body);transition:color .16s,background .16s;cursor:pointer}
.nav-link:hover{color:var(--brand-deep);background:var(--tint-2)}
.nav-link.active{color:var(--brand-deep);background:var(--tint-2);font-weight:600}
.nav-link .caret{width:9px;height:9px;transition:transform .18s}
.nav-item:hover .nav-link .caret,.nav-item:focus-within .nav-link .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:340px;
background:#fff;border:1px solid var(--line);border-radius:14px;padding:.55rem;
box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(4px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
.dropdown.right{left:auto;right:0}
/* Menus whose own labels are short (the sub-lists live in flyouts) size to their text
instead of the 340px the long single-level menus need. */
.dropdown.compact{min-width:0;width:max-content}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:.6rem .75rem;border-radius:8px;font-size:.86rem;
color:var(--body);line-height:1.35;transition:background .16s,color .16s}
.dropdown a:hover{background:var(--tint);color:var(--brand-deep)}
.dropdown a.active{background:var(--tint);color:var(--brand-deep);font-weight:600}
.dropdown-item{position:relative}
.dropdown-parent{display:block;padding:.6rem .75rem;border-radius:8px;
font-size:.86rem;color:var(--body);line-height:1.35;cursor:pointer;
transition:background .16s,color .16s}
.dropdown-item:hover .dropdown-parent,.dropdown-item:focus-within .dropdown-parent{
background:var(--tint);color:var(--brand-deep)}
.dropdown-flyout{position:absolute;top:-.55rem;right:100%;margin-right:6px;width:330px;
background:#fff;border:1px solid var(--line);border-radius:14px;padding:.55rem;
box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateX(4px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:80}
.dropdown-item:hover .dropdown-flyout,.dropdown-item:focus-within .dropdown-flyout{
opacity:1;visibility:visible;transform:none}
.header-cta{display:none}
.header-cta .login{font-size:.93rem;font-weight:500;color:var(--body)}
.header-cta .login:hover{color:var(--brand-deep)}
.burger{display:block;margin-left:auto;background:none;border:1px solid var(--line);
border-radius:8px;width:42px;height:38px;cursor:pointer;color:var(--ink)}
@media(min-width:980px){
.nav{display:flex;gap:.25rem;margin-left:auto;align-items:center}
.header-cta{display:flex;align-items:center;gap:.9rem}
.burger{display:none}
}
.mobile-nav{display:none;border-top:1px solid var(--line-soft);background:#fff;padding:14px 24px 22px;
max-height:calc(100vh - 92px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-nav.open{display:block}
body.nav-open{overflow:hidden}
.mobile-nav details{border-bottom:1px solid var(--line-soft);padding:4px 0}
.mobile-nav summary{list-style:none;cursor:pointer;padding:.65rem 0;
font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);
display:flex;justify-content:space-between;align-items:center}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary::after{content:"+";font-size:1.15rem;color:var(--muted)}
/* Child combinator, not descendant: with nested accordions (Documentation), an open
parent would otherwise flip its closed children's "+" to "−" as well. */
.mobile-nav details[open] > summary::after{content:"−"}
.mobile-nav summary.active{color:var(--brand-deep)}
.mobile-nav a:not(.btn){display:block;padding:.5rem 0;font-size:.88rem;color:var(--body)}
.mobile-nav a:not(.btn):hover{color:var(--brand-deep)}
.mobile-nav a:not(.btn).active{color:var(--brand-deep);font-weight:600}
/* Nested sub-accordion: must read as subordinate to the section it sits inside, so it
steps down from the parent summary (ink/.95rem) rather than matching it. */
.mobile-nav details.mobile-nav-sub{border-bottom:none;padding:0 0 0 .9rem}
.mobile-nav-sub > summary{font-size:.88rem;font-weight:600;color:var(--body);padding:.5rem 0}
.mobile-nav-sub > summary::after{font-size:1rem}
.mobile-nav-sub[open] > summary{color:var(--brand-deep)}
.mobile-nav-sub a:not(.btn){font-size:.85rem;padding:.4rem 0 .4rem .2rem}
.mobile-nav .mobile-actions{display:flex;gap:.6rem;margin-top:1.2rem}
.mobile-nav .mobile-actions .btn{flex:1}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:74px 0 88px}
.hero::before{
content:"";position:absolute;inset:-240px 0 auto -10%;height:780px;z-index:-1;
background:
radial-gradient(560px 380px at 16% 32%, rgba(0,188,78,.10), transparent 70%),
radial-gradient(640px 430px at 84% 10%, rgba(0,188,78,.06), transparent 72%);
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.hero h1{margin:1.1rem 0 1.25rem}
.hero h1 em{font-style:normal;color:var(--brand-deep)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-note{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:1.5rem;
font-size:.84rem;color:var(--muted)}
.hero-note span{display:flex;align-items:center;gap:.4rem}
.hero-note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-soft)}
@media(min-width:980px){
.hero-grid{grid-template-columns:1fr 1.02fr;gap:64px}
}
/* ---------- SIGNATURE: latency ledger ---------- */
.ledger{background:var(--paper);border:1px solid var(--line);border-radius:20px;
box-shadow:var(--shadow-lg);overflow:hidden}
.ledger-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.4rem;
border-bottom:1px solid var(--line-soft);background:var(--surface)}
.ledger-head strong{font-family:var(--display);font-size:.88rem;color:var(--ink);font-weight:600}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--brand);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;
border:1.5px solid rgba(0,188,78,.42);animation:ripple 2.2s infinite ease-out}
@keyframes ripple{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.25);opacity:0}}
.ledger-head .who{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.steps{list-style:none;margin:0;padding:1.1rem 1.4rem .4rem}
.step{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:.85rem;
padding:.62rem 0;opacity:.3;transition:opacity .45s ease}
.step.on{opacity:1}
.step-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);
display:grid;place-items:center;transition:border-color .3s,background .3s}
.step.on .step-dot{border-color:var(--brand);background:var(--tint)}
.step-dot i{width:7px;height:7px;border-radius:50%;background:transparent;transition:background .3s}
.step.on .step-dot i{background:var(--brand)}
.step-label{font-size:.9rem;color:var(--ink);font-weight:500}
.step-ms{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.step.on .step-ms{color:var(--brand-deep)}
.ledger-result{display:flex;align-items:flex-end;gap:1rem;
margin:.5rem 1.4rem 1.3rem;padding:1.1rem 1.25rem;
background:linear-gradient(120deg,var(--tint),var(--tint-2));
border:1px solid #D4F0DF;border-radius:12px}
.big-ms{font-family:var(--mono);font-weight:600;font-size:2.6rem;line-height:1;
color:var(--brand-deep);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.big-ms sub{font-size:.95rem;font-weight:500;bottom:0;margin-left:.15rem}
.ledger-result p{font-size:.83rem;line-height:1.45;color:#4C6B58;padding-bottom:.2rem}
.bars{padding:1.15rem 1.4rem 1.5rem;border-top:1px solid var(--line-soft)}
.bars-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted);margin-bottom:.85rem}
.bar-row{display:grid;grid-template-columns:92px 1fr 46px;align-items:center;
gap:.7rem;margin-bottom:.55rem;font-size:.8rem}
.bar-row .name{color:var(--body)}
.bar-track{height:7px;border-radius:99px;background:#EEF1F3;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;width:0;transition:width 1.1s cubic-bezier(.22,.7,.3,1)}
.bar-row .val{font-family:var(--mono);color:var(--muted);text-align:right;font-size:.76rem}
.bar-row.is-spriv .name,.bar-row.is-spriv .val{color:var(--brand-deep);font-weight:600}
.bar-row.is-spriv .bar-fill{background:linear-gradient(90deg,var(--brand),var(--brand-check))}
.bar-row:not(.is-spriv) .bar-fill{background:#D3D8DE}
@media(min-width:560px){
.bar-row{grid-template-columns:112px 1fr 52px}
}
/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
background:var(--surface);padding:26px 0}
.trust-inner{display:flex;align-items:center;flex-wrap:wrap;gap:1.4rem 2.4rem}
.trust-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted)}
.trust-items{display:flex;flex-wrap:wrap;gap:.6rem;margin-left:0}
.chip{font-family:var(--display);font-size:.82rem;font-weight:600;color:#4B5563;
background:#fff;border:1px solid var(--line);border-radius:99px;padding:.4rem 1rem}
@media(min-width:560px){
.trust-items{margin-left:auto}
}
/* ---------- sections ---------- */
.section{padding:64px 0}
.section.alt{background:var(--surface);border-top:1px solid var(--line-soft);
border-bottom:1px solid var(--line-soft)}
.section-head{max-width:66ch;margin-bottom:52px}
.section-head h2{margin:.75rem 0 1rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
@media(min-width:560px){
.section{padding:92px 0}
}
/* how it works */
.flow{display:grid;grid-template-columns:1fr;
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.flow-step{padding:34px 30px;border-right:none;border-bottom:1px solid var(--line-soft)}
.flow-step:last-child{border-right:none;background:linear-gradient(150deg,var(--tint),#fff 68%)}
.flow-num{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--brand-deep);
letter-spacing:.1em;margin-bottom:1.1rem;display:block}
.flow-step h3{margin-bottom:.6rem}
.flow-step p{font-size:.93rem}
@media(min-width:980px){
.flow{grid-template-columns:repeat(3,1fr)}
.flow-step{border-right:1px solid var(--line-soft);border-bottom:none}
}
/* method cards */
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:18px}
.method{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
transition:border-color .2s,box-shadow .2s,transform .2s}
.method:hover{border-color:var(--brand-soft);box-shadow:var(--shadow);transform:translateY(-2px)}
.method .ic{width:38px;height:38px;border-radius:10px;background:var(--tint);
display:grid;place-items:center;color:var(--brand-deep);margin-bottom:1.05rem}
.method h3{font-size:1rem;margin-bottom:.4rem}
.method p{font-size:.89rem;line-height:1.6}
.method.featured{background:linear-gradient(155deg,var(--tint),#fff 72%);border-color:#CDEDDB}
.method .tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--brand-deep);display:block;margin-bottom:.5rem}
/* method showcase (interactive tabs) */
.showcase{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;
border:1px solid var(--line);border-radius:20px;background:#fff;padding:28px;box-shadow:var(--shadow)}
.showcase-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.showcase-item{border:1px solid transparent;border-radius:12px;padding:14px 16px;
cursor:pointer;transition:background .18s,border-color .18s}
.showcase-item:hover{background:var(--tint-2)}
.showcase-item.on{background:var(--tint);border-color:#CDEDDB}
.showcase-item .lb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
.showcase-item .lb .ic{width:34px;height:34px;border-radius:8px;background:#fff;
border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--brand-deep);flex:none;
transition:background .18s,color .18s,border-color .18s}
.showcase-item.on .lb .ic{background:var(--brand);color:#fff;border-color:var(--brand)}
.showcase-item h3{font-size:.97rem;margin:0;line-height:1.25;font-weight:600;flex:1 1 140px;min-width:0}
.showcase-item .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--brand-deep);margin-left:auto;background:#fff;
padding:.22rem .5rem;border-radius:99px;border:1px solid #CDEDDB;flex:none}
.showcase-item p{font-size:.83rem;line-height:1.55;margin:0 0 0 46px;
max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease,margin-top .25s}
.showcase-item.on p{max-height:130px;opacity:1;margin-top:.55rem}
@media(min-width:980px){
.showcase{grid-template-columns:1.02fr 1.1fr;gap:52px;padding:40px}
}
/* Fluid width (capped) instead of a fixed px value — a hardcoded width
left a lopsided gutter on narrower phones and never grew to fill wider
ones, so the mockup looked inconsistent against the full-width list
items next to it. aspect-ratio keeps the phone's proportions as it scales. */
/* No drawn device frame here: every screenshot in .phone-screen already has a
white iPhone bezel baked into the artwork, so a dark wrapper rendered a
second frame around the first. The container is a plain transparent box. */
.phone{position:relative;justify-self:center;width:100%;max-width:300px;aspect-ratio:250/500}
.phone-screen{position:relative;width:100%;height:100%}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
opacity:0;transition:opacity .35s ease}
.phone-screen img.on{opacity:1}
@media(min-width:980px){
.phone{width:300px;aspect-ratio:auto;height:600px}
}
/* four benefits split */
.benefits{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.benefits-grid{display:grid;grid-template-columns:1fr;gap:14px}
.benefit{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;
transition:border-color .2s,transform .2s,box-shadow .2s}
.benefit:hover{border-color:var(--brand-soft);box-shadow:var(--shadow);transform:translateY(-2px)}
.benefit .ic{width:36px;height:36px;border-radius:10px;background:var(--tint);
display:grid;place-items:center;color:var(--brand-deep);margin-bottom:.85rem}
.benefit .kicker{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--brand-deep);display:block;margin-bottom:.4rem}
.benefit h3{font-size:.98rem;margin:0 0 .45rem;letter-spacing:-.01em}
.benefit p{font-size:.85rem;line-height:1.55}
.benefits-visual{position:relative;border-radius:20px;overflow:hidden;
border:1px solid var(--line);background:linear-gradient(150deg,var(--tint),#fff 65%);
padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.benefits-visual img{width:100%;height:auto;max-height:420px;object-fit:contain;
display:block;border-radius:10px;margin:0 auto}
.benefits-visual .cap{margin-top:1rem;font-size:.82rem;color:var(--muted);
font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
@media(min-width:640px){
.benefits-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:980px){
.benefits{grid-template-columns:1fr 1.05fr;gap:56px}
}
/* testimonials carousel */
.carousel{position:relative}
.carousel-track{overflow:hidden;padding:6px 2px}
.carousel-slides{display:flex;transition:transform .55s cubic-bezier(.4,.1,.3,1);will-change:transform}
.carousel-slide{flex:0 0 100%;margin-right:0;display:flex}
.carousel-slide:last-child{margin-right:0}
.carousel-slide .quote{width:100%}
.carousel-nav{display:flex;justify-content:center;align-items:center;gap:1.4rem;margin-top:2rem}
.carousel-btn{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);
cursor:pointer;display:grid;place-items:center;color:var(--ink);
transition:border-color .18s,color .18s,background .18s,transform .18s}
.carousel-btn:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--tint-2);transform:translateY(-1px)}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.carousel-dots{display:flex;gap:.5rem;align-items:center}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:#D3D8DE;border:none;cursor:pointer;
padding:0;transition:background .18s,transform .18s,width .18s}
.carousel-dot.on{background:var(--brand);width:22px;border-radius:99px}
@media(min-width:760px){
.carousel-slide{flex:0 0 calc((100% - 20px)/2);margin-right:20px}
}
/* how-it-works video carousel (sits beside the section copy) */
.section-head.has-media{max-width:none;display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.section-head.has-media .section-head-copy{max-width:66ch}
.video-carousel{position:relative;min-width:0}
.video-track{overflow:hidden;border-radius:14px}
.video-slides{display:flex;transition:transform .55s cubic-bezier(.4,.1,.3,1);will-change:transform}
.video-slide{flex:0 0 100%;min-width:0}
.video-frame{position:relative;aspect-ratio:16/9;background:var(--ink);
border:1px solid var(--line);border-radius:14px;overflow:hidden}
.video-frame video,
.video-frame iframe{width:100%;height:100%;display:block;border:0}
.video-frame video{object-fit:cover}
.video-cap{margin-top:.8rem;font-size:.82rem;line-height:1.5}
.video-cap strong{display:block;font-family:var(--display);color:var(--ink);font-size:.9rem}
.video-cap span{color:var(--muted)}
.video-nav{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-top:1.1rem}
@media(min-width:960px){
.section-head.has-media{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px}
}
@media(prefers-reduced-motion:reduce){
.video-slides{transition:none}
}
/* awards page: ceremony photo + video, side by side below the award list */
.award-media{margin-top:56px}
.award-media .section-head{margin-bottom:24px}
.award-media-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.award-photo,
.award-video{margin:0;min-width:0}
/* The source photo is only 289px wide, so it is displayed scaled up to fill
its column. object-fit keeps the framing while the 16/9 box matches the
video beside it. */
.award-photo img{width:100%;height:100%;display:block;object-fit:cover;
border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.award-photo img,
.award-video .video-frame{aspect-ratio:16/9}
.award-photo figcaption,
.award-video figcaption{margin-top:.7rem;font-size:.8rem;line-height:1.5;color:var(--muted)}
@media(min-width:880px){
.award-media-grid{grid-template-columns:1fr 1fr;gap:36px}
}
/* Single explainer video embedded on a docs page (see EmbeddableVideo). */
.doc-video{max-width:640px;margin:32px auto}
/* When a section-head already precedes it, its own margin-bottom is enough
spacing -- don't stack the video's default margin on top of it. */
.section-head + .doc-video{margin:0 auto}
.doc-video .video-frame{border-radius:var(--r)}
.doc-video figcaption{margin-top:.7rem;font-size:.8rem;line-height:1.5;color:var(--muted)}
/* quote with avatar */
.quote .qhead{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.quote .qhead img{width:46px;height:46px;border-radius:50%;object-fit:cover;
border:1px solid var(--line);background:var(--surface);flex:none}
.quote .qhead .qname{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink);line-height:1.2}
.quote .qhead .qrole{font-size:.78rem;color:var(--muted);margin-top:.2rem;line-height:1.35}
.quote .mark{font-family:var(--serif);font-size:2.4rem;color:var(--brand-soft);line-height:.5;display:block}
/* split */
.split{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.deploy-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.deploy-list li{padding:20px 0;border-bottom:1px solid var(--line);
display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.deploy-list .k{font-family:var(--display);font-weight:600;color:var(--ink);font-size:.98rem}
.deploy-list .v{font-size:.9rem;margin-top:.15rem}
.deploy-list .badge{width:34px;height:34px;border-radius:9px;background:var(--tint);
display:grid;place-items:center;color:var(--brand-deep)}
@media(min-width:980px){
.split{grid-template-columns:1fr 1fr;gap:64px}
}
/* stats */
.stats{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:#fff;padding:30px 26px}
.stat .n{font-family:var(--mono);font-weight:600;font-size:1.95rem;color:var(--brand-deep);
letter-spacing:-.035em;line-height:1}
.stat .n small{font-size:1rem;font-weight:500}
.stat .l{font-size:.85rem;margin-top:.55rem}
@media(min-width:560px){
.stats{grid-template-columns:1fr 1fr}
}
@media(min-width:980px){
.stats{grid-template-columns:repeat(4,1fr)}
}
/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:28px 26px;display:flex;flex-direction:column}
.quote p{font-size:.94rem;color:#4B5563;line-height:1.66;flex:1}
.quote footer{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.quote .nm{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink)}
.quote .ro{font-size:.81rem;color:var(--muted);margin-top:.15rem}
/* final cta */
.cta-band{background:linear-gradient(135deg,var(--tint) 0%,var(--tint-2) 58%,#FFFFFF 100%);
border:1px solid #D4F0DF;border-radius:20px;padding:40px 24px;text-align:center}
.cta-band h2{margin-bottom:1rem}
.cta-band .lede{margin:0 auto}
.cta-band .hero-actions{justify-content:center}
@media(min-width:560px){
.cta-band{padding:58px 52px}
}
/* footer */
.site-footer{border-top:1px solid var(--line-soft);padding:62px 0 30px;background:var(--surface)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:32px}
.foot-brand p{font-size:.87rem;margin-top:1rem;max-width:34ch}
.foot-col h4{font-family:var(--display);font-size:.78rem;font-weight:600;color:var(--ink);
letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.foot-col a{display:block;font-size:.88rem;color:var(--body);padding:.28rem 0;transition:color .16s;line-height:1.4}
.foot-col a:hover{color:var(--brand-deep)}
.foot-hotline{margin-top:1.4rem;padding:1rem 1.1rem;background:#fff;
border:1px solid var(--line);border-radius:12px}
.foot-hotline .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.foot-hotline .num{font-family:var(--display);font-weight:700;font-size:1.15rem;
color:var(--ink);letter-spacing:-.01em}
.foot-hotline .note{font-size:.78rem;color:var(--body);margin-top:.55rem}
.foot-hotline .hours{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line);
font-size:.76rem;color:var(--muted);line-height:1.55}
.foot-hotline .hours span{color:var(--body)}
.foot-store{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.foot-store a{display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;
background:#fff;border:1px solid var(--line);border-radius:10px;
font-size:.82rem;color:var(--ink);transition:border-color .16s,color .16s}
.foot-store a:hover{border-color:var(--brand-soft);color:var(--brand-deep)}
.foot-store svg{flex:none}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
font-size:.82rem;color:var(--muted)}
@media(min-width:560px){
.foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(min-width:980px){
.foot-grid{grid-template-columns:1.7fr repeat(4,1fr);gap:40px}
}
/* ---------- article / inner-page components ---------- */
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;padding:36px 0 0}
.crumbs a{color:var(--muted);transition:color .16s}
.crumbs a:hover{color:var(--brand-deep)}
.crumbs .sep{opacity:.45}
.crumbs .cur{color:var(--brand-deep)}
.article-hero{padding:28px 0 72px;position:relative;overflow:hidden}
.article-hero::before{content:"";position:absolute;inset:-160px 0 auto -8%;height:520px;z-index:-1;
background:radial-gradient(560px 340px at 18% 40%, rgba(0,188,78,.08), transparent 70%),
radial-gradient(500px 300px at 85% 10%, rgba(0,188,78,.05), transparent 72%);}
.article-hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;margin-top:28px}
.article-hero .eyebrow{margin-bottom:.9rem;display:inline-block}
.article-hero h1{margin:0 0 1.2rem;font-size:clamp(1.9rem,3.6vw,2.9rem)}
.article-hero .lede{font-size:1.05rem;color:var(--body);max-width:60ch;margin:0}
.article-hero .hero-actions{margin-top:1.8rem}
.article-hero-visual{border:1px solid var(--line);border-radius:20px;overflow:hidden;
background:linear-gradient(150deg,var(--tint),#fff 65%);padding:22px;box-shadow:var(--shadow)}
.article-hero-visual img{width:100%;height:auto;max-height:440px;object-fit:contain;display:block;border-radius:12px;margin:0 auto}
.article-hero-visual .cap{margin-top:.9rem;font-size:.78rem;color:var(--muted);
font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
@media(min-width:980px){
.article-hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}
}
.prose{max-width:74ch}
.prose > * + *{margin-top:1.2rem}
.prose h3{font-size:1.3rem;margin-top:2.4rem;letter-spacing:-.015em}
.prose p{font-size:1rem;color:var(--body);line-height:1.75;margin:0}
.prose ul{margin:0;padding:0;list-style:none}
.prose ul li{padding-left:1.4rem;position:relative;font-size:.98rem;line-height:1.7;color:var(--body)}
.prose ul li + li{margin-top:.7rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;
border-radius:50%;background:var(--brand)}
.callout{background:linear-gradient(150deg,var(--tint),var(--tint-2));border:1px solid #D4F0DF;
border-radius:14px;padding:22px 26px;font-size:.95rem;color:#1F3A2A;line-height:1.65}
.callout strong{color:var(--brand-deep)}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;
transition:border-color .18s,transform .18s,box-shadow .18s}
.info-card:hover{border-color:var(--brand-soft);transform:translateY(-3px);box-shadow:var(--shadow)}
.info-card .num{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
color:var(--brand-deep);text-transform:uppercase;display:block;margin-bottom:.75rem}
.info-card .ic{width:38px;height:38px;border-radius:10px;background:var(--tint);
display:grid;place-items:center;color:var(--brand-deep);margin-bottom:1rem}
.info-card h3{font-size:1.02rem;margin-bottom:.55rem;letter-spacing:-.01em}
.info-card p{font-size:.9rem;line-height:1.6}
.info-card-img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:1rem}
/* A whole info-card that is itself the link (e.g. the Contact Us squares).
The inner "Get in touch" text is a span, not a nested -- an anchor
inside an anchor is invalid and browsers drop the outer link. */
.info-card-link{display:block;text-decoration:none;color:inherit}
.info-card-link:hover{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.info-card-link .cue{display:inline-block;margin-top:.75rem;
color:var(--brand-deep);font-weight:600;font-size:.9rem}
.info-card-link:hover .cue{text-decoration:underline}
.article-body{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.article-body .aside{position:static;background:#fff;border:1px solid var(--line);
border-radius:16px;padding:22px 22px;box-shadow:var(--shadow)}
.article-body .aside h4{font-family:var(--display);font-size:.78rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin:0 0 .8rem}
.article-body .aside p{font-size:.86rem;line-height:1.6;color:var(--body);margin:0 0 1rem}
.article-body .aside .hero-actions{margin-top:.6rem;flex-direction:column;gap:.55rem}
.article-body .aside .btn{width:100%}
.article-body .aside .facts{list-style:none;padding:0;margin:.4rem 0 0;
border-top:1px solid var(--line-soft);padding-top:1rem}
.article-body .aside .facts li{display:flex;justify-content:space-between;font-size:.83rem;
color:var(--body);padding:.4rem 0}
.article-body .aside .facts li span{color:var(--muted)}
.article-body .aside .facts li b{color:var(--ink);font-weight:600}
@media(min-width:980px){
.article-body{grid-template-columns:minmax(0,1fr) 320px;gap:64px}
.article-body .aside{position:sticky;top:110px}
}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.related a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;
display:flex;flex-direction:column;gap:.35rem;transition:border-color .18s,transform .18s,box-shadow .18s}
.related a:hover{border-color:var(--brand-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.related a .kicker{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--brand-deep)}
.related a h4{font-family:var(--display);font-size:.98rem;color:var(--ink);font-weight:600;margin:0;letter-spacing:-.01em}
.related a .arrow{margin-top:.5rem;font-size:.86rem;color:var(--brand-deep);display:inline-flex;
align-items:center;gap:.3rem;transition:gap .18s}
.related a:hover .arrow{gap:.55rem}
/* Comparison — mobile: one accordion row per method (below), reusing the
.accordion component; desktop: full table (further down). Only one of
the two is ever displayed at a given width. */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.6rem 0;border-top:1px solid var(--line-soft);font-size:.88rem}
.checklist li:first-child{border-top:none}
.checklist .crit{color:var(--body)}
.checklist .yes{color:var(--brand-deep);font-size:1.1rem;font-weight:700}
.checklist .no{color:#94A3B8;font-size:1.05rem}
/* Comparison table */
.compare-wrap{display:none;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff;
box-shadow:var(--shadow)}
.compare{width:100%;border-collapse:collapse;font-size:.84rem;min-width:960px}
.compare th, .compare td{padding:14px 12px;border-bottom:1px solid var(--line-soft);
text-align:center;vertical-align:middle}
.compare thead th{background:var(--surface);font-family:var(--display);font-weight:600;color:var(--ink);
font-size:.75rem;letter-spacing:-.005em;line-height:1.35}
.compare th:first-child,.compare td:first-child{text-align:left;font-family:var(--display);
font-weight:600;color:var(--ink);position:sticky;left:0;background:#fff;z-index:1;
min-width:200px;box-shadow:1px 0 0 var(--line-soft)}
.compare tr.spriv td:first-child{color:var(--brand-deep);background:var(--tint)}
.compare tr.spriv td{background:var(--tint-2);font-weight:600}
.compare .yes{color:var(--brand-deep);font-size:1.15rem;font-weight:700}
.compare .no{color:#94A3B8;font-size:1.05rem}
.compare tbody tr:hover td{background:var(--tint-2)}
.compare tbody tr.spriv:hover td{background:var(--tint)}
@media(min-width:760px){
/* Specificity needs to beat the later, unconditional .accordion{display:flex}
base rule, not just match it. */
.accordion.compare-accordion{display:none}
.compare-wrap{display:block}
}
/* ---------- interactive components (inner pages) ---------- */
/* simple hero (lighter than article-hero) */
.simple-hero{padding:36px 0 60px;position:relative;overflow:hidden}
.simple-hero::before{content:"";position:absolute;inset:-160px 0 auto -8%;height:480px;z-index:-1;
background:radial-gradient(500px 320px at 18% 40%, rgba(0,188,78,.08), transparent 70%),
radial-gradient(460px 280px at 85% 10%, rgba(0,188,78,.05), transparent 72%);}
.simple-hero .eyebrow{margin-bottom:1rem;display:inline-block}
.simple-hero h1{max-width:22ch;margin:0;font-size:clamp(1.9rem,3.6vw,2.9rem)}
.simple-hero .lede{max-width:62ch;margin-top:1.2rem;font-size:1.05rem}
.simple-hero .hero-actions{margin-top:1.8rem}
/* animated stat strip */
.factstrip{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.factstrip .cell{background:#fff;padding:26px 24px;transition:background .2s}
.factstrip .cell:hover{background:var(--tint-2)}
.factstrip .cell .n{font-family:var(--mono);font-weight:600;font-size:1.9rem;color:var(--brand-deep);
letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
display:inline-flex;align-items:baseline;gap:.15rem}
.factstrip .cell .n small{font-size:.9rem;font-weight:500}
.factstrip .cell .l{font-size:.85rem;margin-top:.55rem;color:var(--body);line-height:1.5}
@media(min-width:760px){
.factstrip{grid-template-columns:repeat(4,1fr)}
}
/* accordion */
.accordion{display:flex;flex-direction:column;gap:14px}
.acc{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease}
.acc:hover{border-color:var(--brand-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.acc[open]{border-color:var(--brand-soft);box-shadow:var(--shadow)}
.acc summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;
justify-content:space-between;gap:1rem;font-family:var(--display);font-weight:600;
font-size:1.02rem;color:var(--ink);transition:color .18s ease}
.acc summary:hover{color:var(--brand-deep)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .plus{position:relative;width:28px;height:28px;border-radius:50%;
border:1px solid var(--line);flex:none;color:var(--muted);
font-family:var(--mono);font-size:1.1rem;line-height:1;
transition:background .28s ease, border-color .28s ease, color .28s ease, transform .35s cubic-bezier(.4,.1,.3,1)}
.acc[open] summary .plus{background:var(--brand);color:#fff;border-color:var(--brand);transform:rotate(180deg)}
.acc summary .plus::before, .acc summary .plus::after{
position:absolute;inset:0;display:grid;place-items:center;
transition:opacity .3s ease, transform .35s cubic-bezier(.4,.1,.3,1)}
.acc summary .plus::before{content:"+";opacity:1;transform:rotate(0)}
.acc summary .plus::after{content:"−";opacity:0;transform:rotate(-90deg)}
.acc[open] summary .plus::before{opacity:0;transform:rotate(90deg)}
.acc[open] summary .plus::after{opacity:1;transform:rotate(-180deg)}
.acc-body{overflow:hidden;color:var(--body);font-size:.95rem;line-height:1.72}
.acc-body-inner{padding:0 24px 22px}
.acc-body p{margin:0 0 .8rem;opacity:0;transform:translateY(-4px);
transition:opacity .4s ease, transform .4s cubic-bezier(.4,.1,.3,1)}
.acc-body p:last-child{margin-bottom:0}
.acc-body .callout{margin-top:1rem;opacity:0;transform:translateY(-4px);
transition:opacity .4s ease, transform .4s cubic-bezier(.4,.1,.3,1)}
.acc-body .checklist{opacity:0;transform:translateY(-4px);
transition:opacity .4s ease, transform .4s cubic-bezier(.4,.1,.3,1)}
.acc[open] .acc-body p, .acc[open] .acc-body .callout, .acc[open] .acc-body .checklist{
opacity:1;transform:none;transition-delay:.14s}
.acc[open] .acc-body p:nth-child(2){transition-delay:.22s}
.acc[open] .acc-body p:nth-child(3){transition-delay:.28s}
.acc[open] .acc-body .callout:nth-child(n+2){transition-delay:.30s}
/* tabs */
.tabs{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
/* Mobile: a wrapping pill/chip selector — every method stays visible with
no horizontal scroll, just overflows onto a second row. */
.tab-heads{display:flex;flex-wrap:wrap;gap:.5rem;padding:14px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.tab-head{padding:.55rem 1rem;font-family:var(--display);font-weight:600;font-size:.85rem;
color:var(--body);background:#fff;border:1px solid var(--line);border-radius:99px;
cursor:pointer;white-space:nowrap;transition:color .16s,border-color .16s,background .16s}
.tab-head:hover{color:var(--brand-deep);border-color:var(--brand-soft)}
.tab-head.on{color:#fff;background:var(--brand);border-color:var(--brand)}
.tab-panels{padding:24px 22px}
.tab-panel{display:none;color:var(--body);font-size:.98rem;line-height:1.72}
.tab-panel.on{display:block;animation:fadeIn .32s ease}
.tab-panel h3{margin-bottom:.7rem;font-size:1.2rem;letter-spacing:-.015em}
.tab-panel p{margin:0 0 .9rem}
.tab-panel p:last-child{margin-bottom:0}
.tab-panel .callout{margin-top:1rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(min-width:760px){
/* Desktop: back to a classic underline tab bar — there's room for all
five labels on one line without needing the pill treatment. */
.tab-heads{gap:0;padding:0}
.tab-head{padding:16px 22px;font-size:.9rem;background:transparent;border:none;
border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-head:hover{color:var(--brand-deep);background:#fff;border-color:transparent}
.tab-head.on{color:var(--brand-deep);background:#fff;border-color:var(--brand)}
.tab-panels{padding:32px}
}
/* Adaptive-2FA tab enrichments */
.tab-panel .split-content{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.tab-panel .method-visual{border-radius:14px;background:linear-gradient(160deg,var(--tint),#fff 70%);
border:1px solid var(--line-soft);padding:16px 16px 14px;display:flex;flex-direction:column;
align-items:center;gap:10px;max-width:220px;margin:0 auto;position:static;order:-1}
.tab-panel .method-visual img{width:100%;max-height:260px;height:auto;object-fit:contain;
display:block;border-radius:8px}
.tab-panel .method-visual .cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.35}
.tab-panel ul.keys{margin:1rem 0 0;padding:0;list-style:none}
.tab-panel ul.keys li{padding-left:1.4rem;position:relative;font-size:.94rem;line-height:1.65;color:var(--body)}
.tab-panel ul.keys li + li{margin-top:.55rem}
.tab-panel ul.keys li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
border-radius:50%;background:var(--brand)}
.tab-panel ul.keys li strong{color:var(--ink);font-weight:600}
.tab-panel .best-for{background:var(--surface);border-radius:10px;padding:12px 16px;margin-top:1.2rem;
border-left:3px solid var(--brand)}
.tab-panel .best-for .lbl{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--brand-deep);display:block;margin-bottom:.3rem}
.tab-panel .best-for p{font-size:.87rem;margin:0}
.tab-panel .caution{background:#FFF8ED;border:1px solid #F6E1B8;border-radius:12px;
padding:14px 18px;margin-top:1rem;font-size:.9rem;color:#7A5518;line-height:1.55}
.tab-panel .caution strong{color:#5C3E0F}
@media(min-width:760px){
.tab-panel .split-content{grid-template-columns:1fr 220px}
.tab-panel .method-visual{max-width:none;margin:0;position:sticky;top:110px;order:0}
}
/* ---------- company pages ---------- */
/* Pricing cards */
.pricing{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}
@media(min-width:760px){.pricing{grid-template-columns:1fr 1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px 32px;
display:flex;flex-direction:column;transition:border-color .22s,transform .22s,box-shadow .22s}
.plan:hover{border-color:var(--brand-soft);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.plan.featured{background:linear-gradient(155deg,var(--tint),#fff 65%);border-color:#CDEDDB}
.plan .badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--brand-deep);display:inline-block;background:#fff;padding:.35rem .7rem;
border-radius:99px;border:1px solid #CDEDDB;margin-bottom:1rem;align-self:flex-start}
.plan h3{font-size:1.4rem;margin:0 0 .4rem;letter-spacing:-.02em}
.plan .subhead{font-size:.9rem;color:var(--muted);margin:0 0 1.2rem}
.plan .price{font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--ink);
letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:.2rem;margin-bottom:.35rem}
.plan .price .curr{font-size:1.2rem;font-weight:600}
.plan .price .per{font-family:var(--text);font-size:.85rem;font-weight:500;color:var(--muted)}
.plan .price-note{font-size:.82rem;color:var(--body);margin:0 0 1.6rem}
.plan ul.feats{list-style:none;padding:0;margin:0 0 1.8rem;flex:1}
.plan ul.feats li{padding:.55rem 0 .55rem 1.9rem;position:relative;font-size:.9rem;
color:var(--body);line-height:1.5}
.plan ul.feats li::before{content:"";position:absolute;left:0;top:.65em;width:16px;height:16px;
border-radius:50%;background:var(--tint)}
.plan ul.feats li::after{content:"";position:absolute;left:5px;top:.55em;width:5px;height:9px;
border-right:2px solid var(--brand-deep);border-bottom:2px solid var(--brand-deep);
transform:rotate(45deg)}
/* Awards */
.award-list{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:760px){.award-list{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}}
.award{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;
display:grid;grid-template-columns:1fr;gap:22px;align-items:start;text-align:center;
transition:border-color .2s,transform .2s,box-shadow .2s}
@media(min-width:760px){.award{grid-template-columns:auto 1fr;text-align:left}}
.award:hover{border-color:var(--brand-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.award img{width:96px;height:96px;object-fit:contain;border-radius:12px;
background:var(--surface);padding:10px;flex:none;margin:0 auto}
@media(min-width:760px){.award img{margin:0}}
.award .year{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--brand-deep);margin-bottom:.4rem;display:block}
.award h3{font-size:1.05rem;margin:0 0 .5rem;letter-spacing:-.01em}
.award p{font-size:.88rem;line-height:1.6;color:var(--body);margin:0}
.award .judges{font-size:.78rem;color:var(--muted);margin-top:.7rem;line-height:1.5}
.award .judges strong{color:var(--body);font-weight:600}
/* Patents grid */
.patents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.patent{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
transition:border-color .18s,transform .18s,box-shadow .18s;
display:flex;flex-direction:column;gap:.55rem}
.patent:hover{border-color:var(--brand-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
/* A patent card that links to its press release: the whole card is the click
target, so it must not inherit the default link colour/underline. */
.patent-link{text-decoration:none;color:inherit}
.patent-link:hover{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.patent-link .num::after{content:"\2197";margin-left:.4rem;font-size:.9em;opacity:.55}
.patent-link:hover .num{text-decoration:underline}
.patent .num{font-family:var(--mono);font-weight:600;font-size:.85rem;color:var(--brand-deep);
letter-spacing:-.005em}
.patent .desc{font-size:.85rem;color:var(--body);line-height:1.45}
.patent .jurisdiction{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.3rem;
align-self:flex-start;background:var(--surface);padding:.28rem .55rem;border-radius:6px}
/* Contact form: flash, errors, honeypot */
.contact-form-wrap{min-width:0}
.form-flash{border-radius:12px;padding:14px 16px;font-size:.9rem;line-height:1.5;margin-bottom:20px}
.form-flash.ok{background:var(--tint);color:var(--brand-deep);border:1px solid var(--brand-soft)}
.form-flash.err{background:#FEF2F2;color:#B91C1C;border:1px solid #FCA5A5}
.form-errors{margin:0 0 20px;padding:14px 16px 14px 34px;border-radius:12px;
background:#FEF2F2;border:1px solid #FCA5A5;color:#B91C1C;font-size:.86rem;line-height:1.6}
/* Honeypot: removed from view and from the accessibility tree, but NOT with
display:none -- some bots skip hidden inputs, and this one needs to be
filled to be useful. */
.hp-field{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Contact form */
.contact-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media(min-width:760px){.contact-grid{grid-template-columns:1.15fr .85fr;gap:56px}}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--ink)}
.field input, .field textarea, .field select{
width:100%;padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;
font-family:var(--text);font-size:.95rem;color:var(--ink);background:#fff;
transition:border-color .18s,box-shadow .18s}
.field input:focus, .field textarea:focus, .field select:focus{
outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,188,78,.14)}
.field textarea{resize:vertical;min-height:140px}
.field-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:760px){.field-row{grid-template-columns:1fr 1fr}}
/* Invisible reCAPTCHA draws nothing inline -- its badge is fixed to the
viewport corner by Google's own stylesheet -- so this block only ever holds
the hidden token field and the error message. It must take no vertical space
while there is no error to show, or it opens a gap above the submit button. */
.captcha-field{display:contents}
.captcha-field .captcha-error:not([hidden]){margin-top:.75rem}
.captcha-error{font-size:.82rem;line-height:1.5;color:#B91C1C;margin:0}
/* Google's own attribution disclosure, sitting under the submit button as in
the design. The floating badge is left visible too; this is the readable
half of the same notice. */
.captcha-note{margin-top:.75rem}
/* Submit sits a little further from the last field than the fields sit from each
other, so it reads as the end of the form rather than another row. */
.contact-form .btn-block{margin-top:.6rem}
.form-note{font-size:.78rem;line-height:1.5;color:var(--muted);margin-top:1rem;text-align:center}
/* Stacked under the form on a phone, the panel needs the form's card treatment —
otherwise it reads as loose text spilling out from under a bordered box. From 760px
up it's a sidebar column standing beside the card, so it drops back to bare text. */
.contact-info-panel{background:#fff;border:1px solid var(--line);border-radius:16px;
padding:26px 22px;box-shadow:var(--shadow)}
@media(min-width:760px){
.contact-info-panel{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
}
.contact-info-panel .info-block{margin-bottom:1.4rem;padding-bottom:1.4rem;
border-bottom:1px solid var(--line-soft)}
.contact-info-panel .info-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.contact-info-panel .info-block .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.contact-info-panel .info-block .val{font-family:var(--display);font-weight:700;font-size:1.35rem;
color:var(--ink);letter-spacing:-.015em}
/* For a .val that's a sentence rather than a phone number / short label. */
.contact-info-panel .info-block .val.val-sm{font-size:1rem;line-height:1.45}
.contact-info-panel .info-block p{font-size:.9rem;color:var(--body);margin:.3rem 0 0;line-height:1.55}
/* Auto-space section-head when it follows an accordion/tabs/pricing block */
.accordion + .section-head,
.tabs + .section-head,
.pricing + .section-head,
.patents-grid + .section-head,
.award-list + .section-head,
.info-cards + .section-head,
.press-list + .section-head{
margin-top:56px;
}
@media(min-width:760px){
.accordion + .section-head,
.tabs + .section-head,
.pricing + .section-head,
.patents-grid + .section-head,
.award-list + .section-head,
.info-cards + .section-head,
.press-list + .section-head{
margin-top:80px;
}
}
/* Press release list */
.press-list{display:flex;flex-direction:column;gap:14px}
.press{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 28px;
display:grid;grid-template-columns:1fr;gap:.5rem;align-items:center;
transition:border-color .18s,transform .18s,box-shadow .18s;color:inherit}
@media(min-width:640px){.press{grid-template-columns:140px 1fr auto;gap:1.6rem}}
.press:hover{border-color:var(--brand-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.press .date{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);
text-transform:uppercase;font-weight:500}
.press h3{font-family:var(--display);font-size:1.05rem;color:var(--ink);margin:0;
letter-spacing:-.01em;line-height:1.4;font-weight:600}
.press .arrow{font-size:.92rem;color:var(--brand-deep);font-weight:600;transition:transform .18s;display:none}
@media(min-width:640px){.press .arrow{display:inline}}
.press:hover .arrow{transform:translateX(4px)}
/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.rv{opacity:1;transform:none}
.step{opacity:1}
}
/* ---------- one-off layout utilities (replace inline style="" attrs) ---------- */
.u-pt-0{padding-top:0}
.u-pt-24{padding-top:24px}
.u-mt-12{margin-top:.75rem}
.u-mt-24{margin-top:1.5rem}
.u-mt-36-measure{margin-top:36px;max-width:82ch}
.u-heading-spacing{margin:.75rem 0 1rem}
/* Only force the 2-up grid once .split has room to be side-by-side itself
(matches the .split breakpoint above) — otherwise let .methods' own
auto-fit collapse it to a single column on mobile. */
@media(min-width:980px){
.u-cols-2{grid-template-columns:1fr 1fr}
}
/* ---------- docs ---------- */
/* `overflow-wrap:anywhere` is load-bearing on phones: install commands and callback
URLs run past 60 unbroken characters, which would otherwise force the whole page
to scroll horizontally. */
code{font-family:var(--mono);font-size:.87em;background:var(--surface);
border:1px solid var(--line-soft);border-radius:5px;padding:.15em .4em;color:var(--ink);
overflow-wrap:anywhere}
/* Prose measure for docs articles. Phone gets the full .wrap gutter; the cap only
starts mattering once the viewport is wider than the measure itself. */
.wrap.doc-wrap{max-width:820px}
.callout.info{background:linear-gradient(150deg,#EAF3FF,#F5F9FF);border-color:#CFE3FB;color:#1E3A5C;margin:1.5rem 0}
.callout.info strong{color:#1D5DAD}
.callout.warn{background:linear-gradient(150deg,#FFF3E8,#FFFAF3);border-color:#F6DEC0;color:#5C3B1F;margin:1.5rem 0}
.callout.warn strong{color:#B0611B}
.step-list{list-style:none;margin:0;padding:0;counter-reset:step}
.step-list li{position:relative;padding:0 0 1.6rem 2.6rem;counter-increment:step}
.step-list li::before{content:counter(step);position:absolute;left:0;top:0;width:1.9rem;height:1.9rem;
border-radius:50%;background:var(--tint);color:var(--brand-deep);font-family:var(--mono);font-weight:600;
font-size:.82rem;display:grid;place-items:center}
.step-list li::after{content:"";position:absolute;left:.95rem;top:1.9rem;bottom:0;width:1px;background:var(--line-soft)}
.step-list li:last-child::after{display:none}
.step-list li:last-child{padding-bottom:0}
.step-list h3{font-size:.98rem;margin-bottom:.3rem}
.step-list p{font-size:.9rem;line-height:1.6}
.methods.two-col{grid-template-columns:1fr}
@media(min-width:640px){.methods.two-col{grid-template-columns:1fr 1fr}}
.field-list{list-style:none;margin:0;padding:0}
.field-list li{padding:.55rem 0;border-top:1px solid var(--line-soft);font-size:.88rem;color:var(--body);line-height:1.55}
.field-list li:first-child{border-top:none}
.field-list code{margin-right:.5rem}
.endpoint{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:14px;background:#fff}
.endpoint-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.7rem}
.endpoint-method{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;
padding:.22rem .55rem;border-radius:6px;background:var(--tint);color:var(--brand-deep)}
.endpoint-method.delete{background:#FDEAEA;color:#C0392B}
.endpoint-path{font-family:var(--mono);font-size:.86rem;color:var(--ink)}
.endpoint-title{font-family:var(--display);font-weight:600;color:var(--ink);font-size:.92rem}
.endpoint-body .note{font-size:.85rem;color:var(--muted);margin-top:.6rem}
/* Method + path + title stack in reading order on a phone; the title only floats to
the far edge once there's a row wide enough to justify it. */
@media(min-width:560px){.endpoint-title{margin-left:auto}}
.article-foot{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line-soft)}
@media(min-width:560px){
.article-foot{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
}
.article-foot > a{font-weight:600;color:var(--brand-deep);font-size:.92rem}
.article-foot > a:hover{text-decoration:underline}
.helpful{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted)}
.helpful button{font:inherit;font-size:.82rem;padding:.35rem .8rem;border-radius:8px;border:1px solid var(--line);
background:#fff;cursor:pointer;color:var(--body);transition:border-color .16s,color .16s}
.helpful button:hover{border-color:var(--brand-soft);color:var(--brand-deep)}
.pull-quote{border-left:3px solid var(--brand);background:var(--tint-2);border-radius:0 10px 10px 0;
padding:1.2rem 1.4rem;margin:1.6rem 0;font-size:.98rem;color:#1F3A2A;line-height:1.65;font-style:italic}
/* Inline link inside body copy — replaces per-link style="" attributes. */
.link-inline{color:var(--brand-deep);font-weight:600}
.link-inline:hover{text-decoration:underline}
.doc-cat + .doc-cat{margin-top:44px}
.doc-cat-title{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--brand-deep);display:block;margin-bottom:1rem}
/* ==================================================================
API REFERENCE (docs/api)
A three-part reading layout in the shape developers already know from
Stripe's reference: a sticky "on this page" rail, a prose column, and
a dark request/response panel beside each endpoint — rendered in
Spriv's own palette rather than Stripe's blues.
Everything is scoped under `.api-ref` on purpose: `.endpoint` and
`.field-list` are also used by docs/pam, docs/company_settings and
docs/users_profile, and those pages must keep the plain light styling.
================================================================== */
.api-ref{--code-bg:#0E1526;--code-fg:#DCE3EE;--code-line:#1E2A40}
.wrap.api-wrap{max-width:var(--wrap)}
.api-layout{display:block}
@media(min-width:1080px){
.api-layout{display:grid;grid-template-columns:216px minmax(0,1fr);gap:56px;align-items:start}
}
/* --- sticky "on this page" rail. Hidden below the breakpoint where it
would push the prose column too narrow to read. --- */
.api-nav{display:none}
@media(min-width:1080px){
.api-nav{display:block;position:sticky;top:110px;max-height:calc(100vh - 140px);
overflow-y:auto;padding-right:8px;border-right:1px solid var(--line-soft)}
}
.api-nav-title{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);display:block;margin:0 0 .9rem}
.api-nav-group{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--brand-deep);display:block;margin:1.4rem 0 .5rem}
.api-nav-group:first-of-type{margin-top:0}
.api-nav ul{list-style:none;margin:0;padding:0}
.api-nav li a{display:block;padding:.3rem 0 .3rem .7rem;font-size:.84rem;line-height:1.45;
color:var(--body);border-left:2px solid transparent;transition:color .16s,border-color .16s}
.api-nav li a:hover{color:var(--brand-deep)}
.api-nav li a.is-active{color:var(--brand-deep);font-weight:600;border-left-color:var(--brand)}
/* --- section anchors: the "#" only appears on hover, as in a reference --- */
.api-ref .section-head h2{scroll-margin-top:120px}
.api-anchor{margin-left:.45rem;font-family:var(--mono);font-size:.8em;color:var(--brand-soft);
opacity:0;transition:opacity .16s}
h2:hover .api-anchor,.endpoint-title:hover .api-anchor,.api-anchor:focus{opacity:1}
/* --- endpoint: prose on the left, samples on the right --- */
.api-ref .endpoint{padding:0;overflow:hidden;scroll-margin-top:120px}
.api-ref .endpoint-head{margin:0;padding:16px 22px;gap:.6rem;
border-bottom:1px solid var(--line-soft);background:var(--tint-2)}
.endpoint-grid{display:block}
@media(min-width:1080px){
.endpoint-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:stretch}
}
.api-ref .endpoint-body{padding:20px 22px}
.endpoint-samples{background:var(--code-bg);padding:18px 20px}
@media(min-width:1080px){
.endpoint-samples{border-left:1px solid var(--code-line)}
}
/* --- parameters, Stripe-style: mono name, type, then the description --- */
.api-ref .field-list li{padding:.7rem 0}
.param-name{font-family:var(--mono);font-size:.84rem;color:var(--ink);font-weight:500}
.param-type{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-left:.5rem}
.param-req{display:inline-block;margin-left:.5rem;padding:.08rem .4rem;border-radius:5px;
font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
background:var(--tint);color:var(--brand-deep)}
.param-req.optional{background:var(--surface);color:var(--muted)}
.param-desc{display:block;margin-top:.28rem;font-size:.86rem;line-height:1.6;color:var(--body)}
/* --- code panels. `overflow-x:auto` is load-bearing: JSON bodies run
past the column on a phone, and without the scroll container the whole
page would scroll sideways. --- */
.code-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.1rem 0 .45rem}
.code-head:first-child{margin-top:0}
.code-label{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted)}
.endpoint-samples .code-label{color:#7C8AA3}
.code-copy{font:inherit;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
padding:.2rem .5rem;border-radius:6px;border:1px solid var(--code-line);background:transparent;
color:#7C8AA3;cursor:pointer;transition:color .16s,border-color .16s}
.code-copy:hover{color:var(--brand-soft);border-color:var(--brand-soft)}
.code-copy.copied{color:var(--brand-check);border-color:var(--brand-check)}
.code-block{font-family:var(--mono);font-size:.78rem;line-height:1.65;margin:0;
color:var(--code-fg,var(--ink));background:transparent;padding:0;
overflow-x:auto;-webkit-overflow-scrolling:touch;
/* `pre-wrap` over `pre`: request lines carry a full https:// URL that would
otherwise be clipped mid-path in the narrow sample column, which reads as
a broken sample. Wrapping keeps the JSON indentation and lets the long
line fold instead. */
white-space:pre-wrap;overflow-wrap:anywhere}
.code-block .cmt{color:#6E7C95;font-style:italic}
.code-block .str{color:#7FE0A6}
.code-block .key{color:#9FC3F5}
/* --- status codes: one scannable row per code, the number pinned left --- */
.enum-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.enum-list li{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.8rem 0;
border-bottom:1px solid var(--line-soft)}
@media(min-width:640px){
.enum-list li{grid-template-columns:76px minmax(0,1fr);gap:0 1.1rem;align-items:baseline}
}
.enum-code{font-family:var(--mono);font-size:.86rem;font-weight:600;color:var(--brand-deep)}
.enum-msg{font-weight:600;color:var(--ink);font-size:.9rem}
.enum-desc{display:block;margin-top:.2rem;font-size:.86rem;line-height:1.6;color:var(--body)}
/* Prose measure for the reference column. Below the two-column breakpoint
the main column would otherwise inherit the full 1180px wrap and run to
~140 characters a line. */
.api-main{max-width:820px;margin:0 auto}
@media(min-width:1080px){.api-main{max-width:none;margin:0}}
/* --- vertical rhythm -------------------------------------------------
The marketing `.section-head` puts 52px under every heading, which on a
reference page reads as a heading floating away from the content it
introduces. Inside `.api-ref` the scale is inverted so that the space
between two sections is always larger than the space inside one:
56px between sections (.api-block)
14px heading -> its own intro paragraph
20px intro -> first card, list or step list
12px paragraph -> paragraph
------------------------------------------------------------------- */
.api-ref .api-block{margin-top:56px}
.api-ref .section-head{margin-bottom:0}
.api-ref .section-head h2{margin:.55rem 0 0}
.api-ref .section-head > p{margin-top:.85rem}
.api-ref .section-head + p{margin-top:.9rem}
.api-ref .section-head + .field-list,
.api-ref .section-head + .enum-list,
.api-ref .section-head + .step-list,
.api-ref .section-head + .endpoint{margin-top:1.25rem}
.api-ref p + p{margin-top:.75rem}
.api-ref p + .field-list,
.api-ref p + .enum-list,
.api-ref p + .step-list,
.api-ref p + .endpoint{margin-top:1.25rem}
.api-ref .callout{margin:1.75rem 0}
.api-ref .callout.api-block{margin-top:56px}
.api-ref .endpoint{margin-bottom:1.25rem}
.api-ref .endpoint + .endpoint{margin-top:0}
.api-ref .enum-list + .callout{margin-top:1.5rem}
.api-ref .step-list{margin-bottom:0}
/* Inside a card the first line sits flush with the padding, and the
parameter list keeps one clear step away from the prose above it. */
.api-ref .endpoint-body > .note:first-child{margin-top:0}
.api-ref .endpoint-body > .field-list{margin-top:1.1rem}
.api-ref .endpoint-body > .field-list + .note{margin-top:1rem}
.api-ref .article-foot{margin-top:56px}
/* Status-code groups are subsections of "Status codes", so they sit closer
to it than two top-level sections do, and carry a smaller heading. */
.api-ref .api-sub{margin-top:40px}
.api-ref .api-sub h2{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.02em}