:root {
--brand-primary: var(--sr-link);
--brand-dark: #241C2E;
--brand-blue: #E85D2A;
--brand-accent: #E85D2A;
--brand-warm: #E85D2A;
--brand-wash: var(--sr-canvas);
--on-accent: #241C2E;
--ink: var(--sr-text);
--ink-soft: var(--sr-muted);
--line: var(--sr-border);
--surface: var(--sr-surface);
--surface-soft: var(--sr-canvas);
--shadow-sm: 0 12px 30px rgba(36, 28, 46, .08);
--shadow-lg: 0 34px 90px rgba(36, 28, 46, .2);
--font: var(--sr-font);

/* ---- type scale -------------------------------------------------------
   One ladder, every rung fluid between a phone and a wide desktop. The
   headings were hand-tuned per section and had drifted a long way: the
   hero was clamp(3.35rem, 6.3vw, 5.7rem), which is 54px on a 375px phone
   -- about seven characters a line -- and 91px on a 1440px desktop. Big
   is not the same as confident, and a headline that fills the screen
   pushes the sentence that explains it below the fold.

   The rungs below land at roughly 36/60 (page), 28/44 (section),
   22/28 (sub) and 17/18 (lede), which is where this kind of page reads
   best on both ends. */
--step-page: clamp(2.625rem, 1.5rem + 4.2vw, 4.5rem);
--step-section: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);
--step-sub: clamp(1.375rem, 1.15rem + .95vw, 1.75rem);
--step-lede: clamp(1.0625rem, 1.02rem + .18vw, 1.125rem);
--step-body: 1rem;
--step-small: .875rem;      /* 14px -- the floor for anything a person reads */
--step-label: .78rem;       /* uppercase eyebrows and chips, which are short */
/* Deliberately not tokenised: the type inside .overview-*, .screen-*,
   .record-* and .mini-* is an illustration of a shrunk-down interface.
   Setting it at reading size stops it reading as a screen. Those figures
   carry an aria-label and a figcaption, so nothing is only in the mockup. */

/* ---- spacing ----------------------------------------------------------
   Section rhythm was written as a fresh clamp() each time, so neighbouring
   bands differed by a few pixels for no reason. Three rungs cover it. */
--band: clamp(3.5rem, 7vw, 6rem);
--band-lg: clamp(4.5rem, 8vw, 7rem);
--gap-grid: clamp(2rem, 5vw, 4.5rem);
}
* { box-sizing: border-box;}
html { scroll-behavior: smooth;}
body {
margin: 0;
color: var(--ink);
background: var(--surface);
font-family: var(--font);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.skip-link {
position: fixed;top: .5rem;left: .5rem;z-index: 100;
padding: .65rem .9rem;border-radius: 8px;background: var(--surface);color: var(--ink);
font-weight: 750;box-shadow: var(--shadow-sm);transform: translateY(-180%);
}
.skip-link:focus { transform: none;}
a { color: var(--brand-primary);}
img, svg { display: block;}
.wrap { width: min(100% - 2.5rem, 1180px);margin-inline: auto;}
.site-head {
position: relative;
z-index: 20;
border-bottom: 1px solid rgba(215, 229, 232, .8);
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(14px);
}
.site-head .wrap { display: flex;min-height: 78px;align-items: center;gap: 1.5rem;}
.logo { display: inline-flex;flex: 0 0 auto;align-items: center;text-decoration: none;}
.logo img { width: auto;height: 30px;}
.site-head nav { display: flex;align-items: center;gap: 1.35rem;margin-left: auto;}
.site-head nav > a:not(.btn),
.nav-menu summary {
color: var(--ink);
font-size: .9rem;
font-weight: 720;
text-decoration: none;
}
.site-head nav > a:not(.btn):hover,
.nav-menu summary:hover { color: var(--brand-primary);}
.nav-menu { position: relative;}
.nav-menu summary {
display: flex;
min-height: 44px;
align-items: center;
gap: .38rem;
list-style: none;
cursor: pointer;
}
.nav-menu summary::-webkit-details-marker { display: none;}
.nav-menu summary::after {
width: .42rem;
height: .42rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
content: "";
transform: translateY(-.12rem) rotate(45deg);
transition: transform .16s ease;
}
.nav-menu[open] summary::after { transform: translateY(.12rem) rotate(225deg);}
.nav-menu-panel {
position: absolute;
top: calc(100% + .45rem);
left: -.85rem;
display: grid;
width: max-content;
min-width: 220px;
padding: .55rem;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255, 255, 255, .98);
box-shadow: 0 18px 50px rgba(18, 58, 77, .16);
}
.nav-menu-panel a {
display: block;
padding: .6rem .8rem;
border-radius: 10px;
color: var(--ink);
font-size: .86rem;font-weight: 650;
text-decoration: none;white-space: nowrap;
}
.nav-menu-heading {
margin: .5rem 0 .15rem;padding: 0 .8rem;
color: var(--ink-soft);font-size: var(--step-label);font-weight: 700;
letter-spacing: .07em;text-transform: uppercase;
}
.nav-menu-panel a:hover { background: var(--surface-muted);color: var(--brand-primary);}
.site-head > .mobile-discovery { display: none;}
.btn {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .75rem 1.45rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: .93rem;
font-weight: 780;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px);border-color: #b6cdd1;box-shadow: var(--shadow-sm);}
.btn.primary {
border-color: var(--brand-accent);
background: var(--brand-accent);
color: var(--on-accent);
box-shadow: 0 10px 28px rgba(232, 93, 42, .2);
}
.btn.primary:hover { border-color: var(--brand-dark);background: var(--brand-accent);color: var(--on-accent);}
.btn.secondary { border-color: #c7d9dd;background: rgba(255, 255, 255, .78);}
.btn.light { border-color: #fff;background: var(--surface);color: var(--brand-dark);}
.btn.light:hover { background: var(--sr-canvas);}
.btn.block { width: 100%;}
.btn:focus-visible,
.skip-link:focus-visible,
.site-head a:focus-visible,
.nav-menu summary:focus-visible,
.site-foot a:focus-visible,
.text-link:focus-visible,
.capability-rail:focus-visible {
outline: 3px solid rgba(232, 93, 42, .34);
outline-offset: 3px;
}
.nav-cta { min-height: 44px;padding: .62rem 1.15rem;}
.hero {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 8vw, 7.6rem) 0 clamp(5rem, 8vw, 7rem);
background:
  radial-gradient(circle at 83% 14%, rgba(232, 93, 42, .14), transparent 26rem),
  radial-gradient(circle at 96% 80%, rgba(232, 93, 42, .18), transparent 25rem),
  radial-gradient(circle at 7% 5%, rgba(232, 93, 42, .1), transparent 19rem),
  linear-gradient(145deg, var(--sr-canvas) 0%, var(--sr-canvas) 48%, var(--sr-canvas) 100%);
}
.hero::before {
position: absolute;
inset: 0;
background-image:
  linear-gradient(rgba(36, 28, 46, .045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(36, 28, 46, .045) 1px, transparent 1px);
background-size: 54px 54px;
content: "";
mask-image: linear-gradient(to right, #000, transparent 56%);
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(3rem, 6vw, 6.2rem);
}
.hero-copy { position: relative;z-index: 2;}
.eyebrow {
margin: 0 0 1.1rem;
color: var(--brand-primary);
font-size: .73rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.hero .eyebrow { display: flex;align-items: center;gap: .65rem;}
.hero .eyebrow span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--brand-accent);
box-shadow: 0 0 0 6px rgba(232, 93, 42, .12);
}
.hero h1 {
max-width: 10ch;
margin: 0 0 1.4rem;
color: var(--ink);
font-size: var(--step-page);
font-weight: 800;
letter-spacing: -.045em;
line-height: .94;
}
.hero p.lede { max-width: 47ch;margin: 0 0 1.8rem;color: var(--ink-soft);font-size: 1.12rem;line-height: 1.65;}
.hero-actions { display: flex;flex-wrap: wrap;gap: .75rem;}
.hero-actions .btn { min-width: 145px;}
.hero-note { display: flex;align-items: center;gap: .5rem;margin: 1.15rem 0 0;color: var(--ink-soft);font-size: .82rem;}
.hero-note span { display: grid;width: 19px;height: 19px;place-items: center;border-radius: 50%;background: var(--sr-canvas);color: var(--ink);font-size: .68rem;font-weight: 800;}
.inventory-story { padding: clamp(3.5rem, 7vw, 6rem) 0;}
.story-dark { background: radial-gradient(ellipse at 85% 50%, #241C2E 0, transparent 60%), #241C2E;color: #F6F2E9;}
.story-light { background: var(--sr-canvas);}
.story-grid { display: grid;grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);align-items: center;gap: clamp(2rem, 6vw, 6rem);}
.story-reverse .story-copy { order: 2;}
.story-copy h2 { margin: 0 0 1.2rem;font-size: var(--step-section);letter-spacing: -.05em;line-height: 1.06;}
.story-copy > p:not(.eyebrow) { max-width: 40ch;color: var(--ink-soft);font-size: 1rem;}
.story-dark .eyebrow { color: var(--sr-link);}
.story-dark .story-copy > p:not(.eyebrow) { color: #b0c9d1;}
.story-tags { display: flex;flex-wrap: wrap;gap: .5rem;margin: 1.5rem 0 0;padding: 0;list-style: none;}
.story-tags li { padding: .4rem .65rem;border: 1px solid #bfd8d0;border-radius: 6px;color: var(--ink);font-size: .7rem;}
.story-dark .story-tags li { border-color: #655F6B;color: #bde9de;}
.story-copy .text-link { display: inline-block;margin-top: 1.8rem;color: var(--sr-link);}
.story-screen { --screen-bg: #fff;--screen-ink: #241C2E;--screen-muted: #655F6B;--screen-line: #dce7eb;min-width: 0;margin: 0;overflow: hidden;border: 1px solid var(--screen-line);border-radius: 15px;background: var(--screen-bg);color: var(--screen-ink);box-shadow: 0 20px 50px #02101b18;}
.screen-dark { --screen-bg: #241C2E;--screen-ink: #eef6f9;--screen-muted: #a1bdc7;--screen-line: #655F6B;}
.screen-heading { display: flex;justify-content: space-between;flex-wrap: wrap;gap: .3rem .8rem;padding: .85rem 1.2rem;border-bottom: 1px solid var(--screen-line);font-size: .72rem;font-weight: 600;}
.screen-label { color: var(--screen-muted);font-size: .65rem;font-weight: 400;}
.screen-body { padding: 1.5rem;}
.screen-title { display: flex;align-items: center;justify-content: space-between;gap: .8rem;}
.screen-title small { color: var(--screen-muted);font-size: .62rem;letter-spacing: .08em;}
.screen-title h3 { margin: .2rem 0 0;font-size: 1.15rem;}
.record-state { padding: .3rem .65rem;border-radius: 5px;background: var(--sr-canvas);color: var(--ink);font-size: .68rem;font-weight: 700;white-space: nowrap;}
.serial-focus { position: relative;display: flex;flex-direction: column;gap: .35rem;margin: 1.4rem 0;padding: 1rem;border: 1px solid #241C2E;border-radius: 9px;background: #241C2E;}
.serial-focus > span:first-child { color: #9ac9ce;font-size: .6rem;letter-spacing: .1em;}
.serial-focus strong { font-family: ui-monospace, monospace;font-size: clamp(.85rem, 2vw, 1.2rem);letter-spacing: .04em;}
.serial-bars { width: 110px;height: 20px;margin-top: .3rem;background: repeating-linear-gradient(90deg, #93c7cf 0 2px, transparent 2px 4px, #93c7cf 4px 5px, transparent 5px 9px);opacity: .65;}
.record-fields { display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;margin: 1.4rem 0;}
.record-fields dt { color: var(--screen-muted);font-size: .65rem;}
.record-fields dd { margin: .2rem 0 0;font-size: .82rem;font-weight: 600;}
.location-path { display: flex;align-items: center;justify-content: space-between;gap: .5rem;padding: .9rem;border: 1px solid var(--screen-line);border-radius: 8px;color: #b5e4da;font-size: .75rem;}
.location-path b { color: var(--sr-link);}
.screen-note { margin: 1rem 0 0;color: var(--screen-muted);font-size: .7rem;line-height: 1.5;}
.handover-people { display: flex;justify-content: center;align-items: center;gap: 2rem;margin: 1.6rem 0;text-align: center;}
.handover-people div { display: grid;justify-items: center;}
.handover-people b { display: grid;width: 54px;height: 54px;margin-bottom: .5rem;place-items: center;border-radius: 50%;background: #e5f1f4;color: var(--ink);font-size: 1.15rem;}
.handover-people div:last-child b { background: var(--sr-canvas);color: var(--ink);}
.handover-people strong { font-size: .85rem;}
.handover-people small { color: var(--screen-muted);font-size: .68rem;}
.handover-people > span { color: var(--ink);font-size: 1.5rem;}
.acceptance-note { display: flex;align-items: center;gap: .7rem;padding: .8rem 1rem;border: 1px solid #bcded1;border-radius: 8px;background: var(--sr-canvas);color: var(--ink);}
.acceptance-note > b { font-size: 1.2rem;}
.acceptance-note strong, .acceptance-note span { display: block;font-size: .75rem;}
.acceptance-note span { margin-top: .15rem;font-size: .65rem;}
.history-row { display: grid;grid-template-columns: 1.2fr 1fr 1fr;gap: .4rem;padding: .65rem 0;border-bottom: 1px solid var(--screen-line);font-size: .7rem;}
.history-row:first-of-type { color: var(--screen-muted);}
.receipt-item { display: grid;grid-template-columns: 1fr auto;gap: .3rem;margin-top: 1.5rem;padding-block: 1.2rem;border-block: 1px dashed #655F6B;font-size: .85rem;}
.receipt-item > span { grid-row: 2;color: var(--screen-muted);font-size: .7rem;}
.receipt-item b { grid-column: 2;grid-row: 1 / span 2;align-self: center;font-size: 1.1rem;}
.record-trail { display: grid;grid-template-columns: repeat(4, 1fr);margin: 1.5rem 0 0;padding: 0;list-style: none;}
.record-trail li { padding: .65rem .1rem;border-top: 2px solid #E85D2A;color: var(--sr-link);font-size: .65rem;text-align: center;}
.record-trail li::before { display: block;margin: -.98rem auto .5rem;width: 9px;height: 9px;border: 3px solid #241C2E;border-radius: 50%;background: #E85D2A;content: "";box-sizing: content-box;}
.feature-index { margin-top: 2.5rem;padding-top: 2rem;border-top: 1px solid var(--line);text-align: center;}
.feature-index p { margin: 0 0 1rem;font-size: 1.1rem;font-weight: 750;}
.feature-index ul { display: flex;justify-content: center;flex-wrap: wrap;gap: .6rem;margin: 0 0 1.4rem;padding: 0;list-style: none;}
.feature-index li { padding: .5rem .8rem;border: 1px solid var(--line);border-radius: 7px;color: var(--ink-soft);font-size: .78rem;}
.feature-index a { font-size: .85rem;font-weight: 700;}
.proof-strip { border-block: 1px solid var(--line);background: var(--surface);}
.proof-grid { display: grid;grid-template-columns: repeat(4, 1fr);}
.proof-grid > div { position: relative;min-width: 0;padding: 1.55rem 1.35rem 1.55rem 2.8rem;border-left: 1px solid var(--line);}
.proof-grid > div:last-child { border-right: 1px solid var(--line);}
.proof-grid > div > span { position: absolute;top: 1.58rem;left: 1rem;color: var(--brand-primary);font-size: .62rem;font-weight: 800;}
.proof-grid strong, .proof-grid small { display: block;}
.proof-grid strong { margin-bottom: .18rem;color: var(--brand-dark);font-size: .84rem;}
.proof-grid small { color: var(--ink-soft);font-size: .7rem;line-height: 1.45;}
.benefits { padding: clamp(5rem, 9vw, 7.5rem) 0;}
.section-heading { max-width: 720px;margin: 0 auto 3.4rem;text-align: center;}
.section-heading h2 { margin: 0;font-size: var(--step-section);letter-spacing: -.048em;line-height: 1.02;}
.section-heading > p:last-child { max-width: 52ch;margin: 1rem auto 0;color: var(--ink-soft);font-size: 1.02rem;}
.benefit-scroll-cue { display: none;}
.capability-rail { display: grid;grid-template-columns: repeat(4, 1fr);gap: .85rem;}
.capability-card { position: relative;display: flex;min-height: 350px;flex-direction: column;overflow: hidden;padding: 1.45rem;border: 1px solid rgba(17, 68, 78, .09);border-radius: 22px;transition: transform .2s ease, box-shadow .2s ease;}
.capability-card:hover { transform: translateY(-4px);box-shadow: var(--shadow-sm);}
.custody-card { background: var(--sr-canvas);}
.sales-card { background: var(--sr-canvas);}
.stock-card { background: var(--sr-canvas);}
.offline-card { background: var(--sr-canvas);}
.feature-icon { display: grid;width: 44px;height: 44px;margin-bottom: 2.7rem;place-items: center;border-radius: 13px;background: rgba(255, 255, 255, .76);color: var(--brand-primary);box-shadow: 0 7px 22px rgba(13, 55, 67, .07);}
.sales-card .feature-icon { color: var(--brand-blue);}
.stock-card .feature-icon { color: var(--ink);}
.offline-card .feature-icon { color: var(--ink);}
.feature-icon svg { width: 22px;height: 22px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;}
.capability-number { position: absolute;top: 1.55rem;right: 1.5rem;color: rgba(13, 32, 42, .3);font-size: .68rem;font-weight: 800;letter-spacing: .08em;}
.capability-card h3 { max-width: 14ch;margin: 0 0 .55rem;font-size: 1.14rem;letter-spacing: -.02em;line-height: 1.2;}
.capability-card p { margin: 0;color: var(--ink-soft);font-size: .86rem;line-height: 1.6;}
.mini-handover, .mini-count, .mini-offline, .mini-bars { margin-top: auto;}
.mini-handover { display: grid;grid-template-columns: auto auto auto;align-items: center;gap: .35rem;padding-top: 1.2rem;}
.mini-handover span { display: grid;width: 42px;height: 42px;place-items: center;border-radius: 50%;background: var(--surface);color: var(--ink);font-size: .58rem;font-weight: 800;}
.mini-handover i { color: var(--sr-link);font-style: normal;}
.mini-handover b { grid-column: 1 / -1;color: var(--ink);font-size: .63rem;}
.mini-bars { display: flex;height: 72px;align-items: end;gap: .38rem;padding-top: 1rem;}
.mini-bars i { width: 16%;border-radius: 5px 5px 2px 2px;background: rgba(232, 93, 42, .25);}
.mini-bars i:nth-child(1) { height: 32%;}
.mini-bars i:nth-child(2) { height: 52%;}
.mini-bars i:nth-child(3) { height: 68%;}
.mini-bars i:nth-child(4) { height: 94%;background: var(--brand-blue);}
.mini-bars span { align-self: flex-start;margin-left: auto;color: var(--ink);font-size: .68rem;font-weight: 800;}
.mini-count { display: grid;grid-template-columns: 1fr 1fr;gap: .45rem;padding-top: 1.2rem;}
.mini-count span { padding: .65rem;border-radius: 10px;background: rgba(255, 255, 255, .72);color: var(--ink);font-size: .56rem;}
.mini-count b { display: block;color: var(--ink);font-size: 1rem;}
.mini-offline { padding-top: 1.2rem;}
.mini-offline span { display: flex;align-items: center;gap: .45rem;padding: .65rem;border-radius: 10px;background: rgba(255, 255, 255, .72);color: var(--ink);font-size: .65rem;font-weight: 750;}
.mini-offline span i { width: 8px;height: 8px;border-radius: 50%;background: #E85D2A;box-shadow: 0 0 0 4px rgba(232, 93, 42, .13);}
.mini-offline b { display: block;margin: .45rem 0 0 .65rem;color: var(--ink);font-size: .56rem;}
.closing-section { padding: 0 0 6rem;}
.closing-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 3rem;
overflow: hidden;
padding: 3.4rem;
border-radius: 28px;
background:
  radial-gradient(circle at 92% 24%, rgba(232, 93, 42, .36), transparent 17rem),
  radial-gradient(circle at 62% 140%, rgba(232, 93, 42, .26), transparent 22rem),
  var(--brand-dark);
color: #fff;
box-shadow: var(--shadow-lg);
}
.closing-card::after { position: absolute;right: -7rem;bottom: -11rem;width: 24rem;height: 24rem;border: 1px solid rgba(255,255,255,.13);border-radius: 50%;content: "";}
.closing-card > * { position: relative;z-index: 1;}
.closing-card .eyebrow { color: var(--sr-link);}
.closing-card h2 { max-width: 14ch;margin: 0;font-size: var(--step-section);letter-spacing: -.045em;line-height: 1.03;}
.closing-card p:last-child { max-width: 48ch;margin: .85rem 0 0;color: #bcd0d7;}
.closing-actions { display: flex;align-items: center;gap: 1.2rem;}
.text-link { color: var(--sr-link);font-size: .88rem;font-weight: 750;text-underline-offset: 4px;}
.pricing-hero {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 8vw, 7rem) 0;
background:
  radial-gradient(circle at 84% 0%, rgba(232, 93, 42, .2), transparent 25rem),
  radial-gradient(circle at 7% 100%, rgba(232, 93, 42, .16), transparent 22rem),
  var(--sr-canvas);
}
.pricing-hero::after { position: absolute;top: -11rem;right: -8rem;width: 32rem;height: 32rem;border: 1px solid rgba(232, 93, 42, .14);border-radius: 50%;content: "";}
.pricing-hero-grid { position: relative;z-index: 1;display: grid;grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);align-items: center;gap: clamp(3rem, 8vw, 7rem);}
.pricing-hero h1 { max-width: 11ch;margin: 0;font-size: var(--step-page);font-weight: 800;letter-spacing: -.065em;line-height: .95;}
.pricing-lede { max-width: 54ch;margin: 1.35rem 0 0;color: var(--ink-soft);font-size: 1.04rem;line-height: 1.7;}
.pricing-promise { display: grid;gap: .55rem;padding: 1rem;border: 1px solid rgba(36, 28, 46, .12);border-radius: 22px;background: rgba(255, 255, 255, .72);box-shadow: var(--shadow-sm);backdrop-filter: blur(12px);}
.pricing-promise span { display: grid;grid-template-columns: 2rem auto 1fr;align-items: center;gap: .55rem;padding: .8rem;border-radius: 13px;background: var(--surface);color: var(--ink-soft);font-size: .78rem;}
.pricing-promise i { display: grid;width: 2rem;height: 2rem;place-items: center;border-radius: 9px;background: var(--brand-wash);color: var(--brand-primary);font-size: .58rem;font-style: normal;font-weight: 800;}
.pricing-promise span:nth-child(2) i { background: var(--sr-canvas);color: var(--brand-primary);}
.pricing-promise span:nth-child(3) i { background: var(--sr-canvas);color: var(--ink);}
.pricing-promise b { color: var(--ink);}
.pricing-section { padding: clamp(4.5rem, 8vw, 7rem) 0;}
.pricing-controls { display: flex;align-items: end;justify-content: space-between;gap: 2rem;margin-bottom: 2.3rem;}
.pricing-controls h2 { max-width: 15ch;margin: 0;font-size: var(--step-section);letter-spacing: -.045em;line-height: 1.05;}
.termbar { display: flex;flex-wrap: wrap;gap: .3rem;width: fit-content;max-width: 100%;margin: 0 0 .6rem;padding: .3rem;border: 1px solid var(--line);border-radius: 999px;background: var(--surface-soft);}
.termbar .term { display: inline-flex;min-height: 44px;align-items: center;justify-content: center;gap: .35rem;padding: .48rem .78rem;border-radius: 999px;color: var(--ink-soft);font-size: .78rem;text-decoration: none;white-space: nowrap;}
.term:focus-visible { outline: 3px solid var(--brand-primary);outline-offset: 2px;}
.pricing-status { min-height: 1.5em;margin: 0 0 .75rem;color: var(--ink-soft);font-size: .8rem;}
.pricing-grid { overflow-anchor: none;}
.termbar .term:hover { background: var(--surface);}
.termbar .term.on { background: var(--brand-dark);color: #fff;font-weight: 700;box-shadow: 0 6px 16px rgba(7, 29, 42, .16);}
.termbar .term .save { color: var(--brand-primary);font-size: var(--step-small);font-weight: 800;}
.termbar .term.on .save { color: var(--sr-link);}
.termnote { margin: 0;color: var(--ink-soft);font-size: .74rem;}
.pricing-grid { display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));align-items: stretch;gap: .85rem;}
.plan-card { position: relative;display: flex;min-width: 0;min-height: 590px;flex-direction: column;padding: 1.7rem;border: 1px solid var(--line);border-radius: 24px;background: var(--surface);box-shadow: 0 16px 42px rgba(13, 56, 69, .06);}
.plan-card.is-featured { border-color: rgba(232, 93, 42, .5);background: linear-gradient(180deg, var(--sr-canvas) 0, var(--surface) 42%);box-shadow: 0 24px 58px rgba(232, 93, 42, .15);}
.plan-scale { background: linear-gradient(180deg, var(--sr-canvas) 0, var(--surface) 42%);}
.plan-badge { position: absolute;top: 1.35rem;right: 1.35rem;padding: .34rem .65rem;border-radius: 999px;background: var(--brand-blue);color: var(--on-accent);font-size: var(--step-label);font-weight: 800;}
.plan-index { display: block;margin-bottom: 2.25rem;color: var(--brand-primary);font-size: .65rem;font-weight: 800;letter-spacing: .09em;}
.is-featured .plan-index { color: var(--brand-primary);}
.plan-heading h3 { margin: 0;font-size: 1.45rem;letter-spacing: -.025em;}
.plan-heading p { min-height: 2.8rem;margin: .35rem 0 0;color: var(--ink-soft);font-size: .83rem;line-height: 1.55;}
.plan-price { margin: 1.25rem 0 .25rem;color: var(--ink);font-size: var(--step-sub);font-weight: 800;letter-spacing: -.045em;line-height: 1;}
.plan-price > span { font-size: .8rem;font-weight: 800;letter-spacing: .02em;}
.plan-price small { margin-left: .18rem;color: var(--ink-soft);font-size: .7rem;font-weight: 500;letter-spacing: 0;}
.plan-saving { min-height: 3.2rem;color: var(--ink-soft);font-size: .72rem;}
.plan-saving s { opacity: .72;}
.plan-saving b { margin-left: .35rem;padding: .18rem .38rem;border-radius: 999px;background: var(--sr-canvas);color: var(--ink);font-size: var(--step-label);}
.plan-saving small { display: block;margin-top: .28rem;}
.plan-card ul { margin: 0;padding: 0;color: var(--ink-soft);font-size: .82rem;list-style: none;}
.plan-card .plan-limits { margin: 1.1rem 0 1.25rem;padding: 1.1rem 0 0;border-top: 1px solid var(--line);}
.plan-card li { position: relative;padding: .3rem 0 .3rem 1.25rem;}
.plan-card li::before { position: absolute;left: 0;color: var(--brand-accent);font-weight: 800;content: "\2713";}
.plan-card li b { color: var(--ink);}
.plan-core { margin: 0 0 1rem;padding: 1rem;border: 1px solid rgba(5,43,67,.14);border-radius: 14px;background: var(--sr-canvas);}
.plan-core-title { display: flex;align-items: center;gap: .5rem;margin: 0 0 .6rem;color: var(--ink);font-size: .76rem;font-weight: 800;}
.plan-core-title span { padding: .2rem .4rem;border-radius: 5px;background: var(--sr-canvas);color: var(--ink);font-size: var(--step-label);letter-spacing: .06em;text-transform: uppercase;}
.plan-core li { padding: .27rem 0 .27rem 1.15rem;font-size: .74rem;line-height: 1.4;}
.plan-card > .btn { margin-top: auto;}
.included { padding: clamp(4.5rem, 8vw, 7rem) 0;border-block: 1px solid var(--line);background: var(--surface-soft);}
.included-heading { display: grid;grid-template-columns: .72fr 1.1fr;gap: 0 4rem;margin-bottom: 2.5rem;}
.included-heading .eyebrow { grid-column: 1;}
.included-heading h2 { grid-column: 1;max-width: 11ch;margin: 0;font-size: var(--step-section);letter-spacing: -.045em;line-height: 1.04;}
.included-heading > p:last-child { grid-column: 2;grid-row: 1 / span 2;align-self: end;max-width: 34ch;margin: 0;color: var(--ink-soft);font-size: 1rem;}
.included-grid { display: grid;grid-template-columns: repeat(3, 1fr);gap: .75rem;margin-bottom: 2rem;}
.included-grid article { position: relative;min-height: 180px;padding: 1.4rem;border: 1px solid var(--line);border-radius: 18px;background: var(--surface);}
.included-grid article > span { position: absolute;top: 1.4rem;right: 1.4rem;color: rgba(13, 32, 42, .28);font-size: .62rem;font-weight: 800;}
.included-grid h3 { max-width: 16ch;margin: 2rem 0 .4rem;font-size: .98rem;letter-spacing: -.01em;}
.included-grid p { margin: 0;color: var(--ink-soft);font-size: .8rem;line-height: 1.55;}
.everything { margin: 0 0 1rem;border: 1px solid var(--line);border-radius: 16px;background: var(--surface);}
.everything > summary { padding: 1rem 1.2rem;cursor: pointer;list-style: none;font-size: .88rem;font-weight: 750;}
.everything > summary::-webkit-details-marker { display: none;}
.everything > summary::after { float: right;color: var(--brand-primary);font-weight: 750;content: "Show all";}
.everything[open] > summary::after { content: "Hide";}
.everything > summary:focus-visible { outline: 3px solid rgba(232, 93, 42, .3);outline-offset: -3px;}
.everything-grid { display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1.4rem 2rem;padding: 1.2rem;border-top: 1px solid var(--line);}
.everything-grid h4 { margin: 0 0 .5rem;color: var(--ink-soft);font-size: .72rem;letter-spacing: .08em;text-transform: uppercase;}
.everything-grid ul { margin: 0;padding: 0;list-style: none;}
.everything-grid li { position: relative;margin-bottom: .35rem;padding-left: 1.1rem;font-size: .8rem;line-height: 1.45;}
.everything-grid li::before { position: absolute;left: 0;color: var(--brand-accent);content: "\2713";}
.isolation { display: flex;align-items: flex-start;gap: 1rem;padding: 1.25rem 1.4rem;border: 1px solid rgba(232, 93, 42, .3);border-radius: 16px;background: var(--sr-canvas);}
.isolation-mark { display: grid;width: 2.3rem;height: 2.3rem;flex: 0 0 auto;place-items: center;border-radius: 11px;background: var(--surface);color: var(--brand-accent);font-weight: 800;}
.isolation h3 { margin: 0 0 .3rem;font-size: .98rem;}
.isolation p { max-width: 70ch;margin: 0;color: var(--ink-soft);font-size: .82rem;line-height: 1.55;}
.pricing-end { padding: 0 0 5rem;}
.pricing-end-grid { display: grid;grid-template-columns: minmax(0, 1fr) auto;align-items: center;gap: 2rem;padding: 2.7rem;border-radius: 24px;background: var(--brand-dark);color: #fff;}
.pricing-end .eyebrow { color: var(--sr-link);}
.pricing-end h2 { margin: 0;font-size: var(--step-section);letter-spacing: -.04em;}
.pricing-end p { margin: .55rem 0 0;color: #b9cdd4;}
.pricing-notes { grid-column: 1 / -1;padding-top: 1rem;border-top: 1px solid rgba(255, 255, 255, .12);color: #b9cdd4;font-size: .78rem;}
.pricing-notes summary { color: #fff;cursor: pointer;font-weight: 750;}
.pricing-notes p { max-width: 80ch;}
.panel { max-width: 460px;margin: 3rem auto;padding: 2rem;border: 1px solid var(--line);border-radius: 12px;}
.panel.wide { max-width: 620px;}
.panel h1 { margin-bottom: .35rem;font-size: 1.5rem;}
.panel .lede { margin-bottom: 1.5rem;color: var(--ink-soft);font-size: .93rem;}
.field { margin-bottom: 1rem;}
.field label { display: block;margin-bottom: .3rem;color: var(--ink-soft);font-size: .8rem;font-weight: 600;}
.field input, .field select { width: 100%;padding: .6rem .7rem;border: 1px solid var(--line);border-radius: 7px;color: var(--ink);font: inherit;}
.field input:focus, .field select:focus { outline: none;border-color: var(--brand-accent);box-shadow: 0 0 0 3px rgba(232, 93, 42,.16);}
.field .help { margin-top: .25rem;color: var(--ink-soft);font-size: .78rem;}
.field .errors { margin-top: .25rem;color: #B52A3B;font-size: .8rem;}
.field-row { display: grid;grid-template-columns: 1fr 1fr;gap: .75rem;}
.addr-preview { margin-top: .3rem;color: var(--ink-soft);font-size: .82rem;}
.addr-preview strong { color: var(--brand-primary);}
.addr-ok { color: #24634B;}
.addr-bad { color: #B52A3B;}
.form-errors { margin-bottom: 1rem;padding: .7rem .9rem;border: 1px solid #f0c7c4;border-radius: 7px;background: #fbeceb;color: #7e1b15;font-size: .88rem;}
.flash { margin-bottom: 1rem;padding: .7rem .9rem;border: 1px solid;border-radius: 7px;font-size: .88rem;}
.flash.error, .flash.debug { border-color: #f0c7c4;background: #fbeceb;color: #7e1b15;}
.flash.success          { border-color: #bfe3cd;background: #eef8f2;color: #14603a;}
.flash.info             { border-color: #c7dcef;background: #eef4fb;color: #16496f;}
.flash.warning          { border-color: #efdcb4;background: #fdf5e7;color: #7a5200;}
.site-foot { padding: 2.8rem 0;border-top: 1px solid var(--line);background: var(--sr-canvas);color: var(--ink-soft);font-size: .82rem;}
.foot-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem 3rem;
}
.foot-inner strong { color: var(--ink);}
.foot-inner > p strong { display: block;margin-bottom: .25rem;font-size: .95rem;}
.foot-inner > p { max-width: 40ch;margin: 0;}
.notice { max-width: 520px;margin: 5rem auto;padding: 0 1.25rem;text-align: center;}
.notice h1 { font-size: 1.6rem;}
.notice p { color: var(--ink-soft);}
.password-field { position: relative;display: block;}
.password-field input { padding-right: 4.2rem;}
.password-toggle {
position: absolute;
top: 50%;
right: .35rem;
min-height: 32px;
padding: .35rem .5rem;
transform: translateY(-50%);
border: 0;
border-radius: 6px;
background: transparent;
color: var(--brand-primary);
font: inherit;
font-size: .78rem;
font-weight: 650;
cursor: pointer;
}
.password-toggle:hover { background: rgba(0, 0, 0, .05);}
@media (max-width: 860px) {
.site-head nav { gap: .75rem;}
.site-head nav > a:not(.btn), .nav-menu summary { font-size: .8rem;}
.nav-cta { padding-inline: .9rem;}
.hero { padding-top: 4.5rem;}
.hero-grid { grid-template-columns: 1fr;gap: 3.5rem;}
.hero-copy { max-width: 680px;}
.proof-grid { grid-template-columns: repeat(2, 1fr);}
.proof-grid > div { border-bottom: 1px solid var(--line);}
.proof-grid > div:nth-child(2n) { border-right: 1px solid var(--line);}
.proof-grid > div:nth-last-child(-n+2) { border-bottom: 0;}
.capability-rail { grid-template-columns: repeat(2, 1fr);}
.closing-card { grid-template-columns: 1fr;gap: 1.8rem;}
.pricing-hero-grid { grid-template-columns: 1fr;gap: 2.5rem;}
.pricing-promise { max-width: 620px;}
.pricing-controls { align-items: flex-start;flex-direction: column;}
.included-grid { grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px) {
.wrap { width: min(100% - 2rem, 1120px);}
.site-head .wrap { min-height: 72px;gap: .6rem;}
.logo img { height: 25px;}
.site-head nav { gap: .55rem;}
.site-head nav > a:not(.btn) { font-size: .75rem;}
.nav-desktop { display: none;}
.site-head > .mobile-discovery {
position: relative;
display: flex;
width: 100%;
align-items: stretch;
margin: 0;
padding: 0 1rem;
border-top: 1px solid rgba(215, 229, 232, .7);
}
/* The panel hangs off the row, not off the word that opened it.
 *
 * .nav-menu is position:relative for the desktop header, where a menu
 * should sit under its own label. Left in place on a phone that is a panel
 * 70px wide -- the width of the word "Product" -- clipped against the hero
 * and unreadable. Taking the <details> out of the positioning flow hands
 * the panel to this row instead, and a row is the width of the screen,
 * which is the only shape a menu has on a phone.
 */
.mobile-discovery .nav-menu { position: static;flex: 1 1 0;}
.mobile-discovery .nav-menu summary { justify-content: center;}
.mobile-discovery > a {
display: flex;min-height: 44px;flex: 1 1 0;align-items: center;justify-content: center;
}
.mobile-discovery .nav-menu-panel {
top: 100%;right: 0;left: 0;
width: auto;min-width: 0;max-height: min(68vh, 26rem);overflow-y: auto;
padding: .4rem .65rem .8rem;
border-width: 0 0 1px;border-radius: 0 0 18px 18px;
background: var(--surface);
box-shadow: 0 24px 46px -18px rgba(18, 58, 77, .34);
}
.mobile-discovery .nav-menu-panel a {
display: flex;min-height: 44px;align-items: center;white-space: normal;
}
.nav-sign-in { max-width: 5.6rem;text-align: center;line-height: 1.12;}
.nav-cta { min-height: 40px;padding: .55rem .78rem;font-size: .78rem;white-space: nowrap;}
.hero { padding: 3.4rem 0 3.9rem;}
.hero-grid { gap: 2.8rem;}
.hero h1 { max-width: 13ch;margin-bottom: 1.1rem;}
.hero p.lede { margin-bottom: 1.5rem;font-size: 1rem;line-height: 1.62;}
.hero-actions { display: grid;grid-template-columns: 1fr 1fr;}
.hero-actions .btn { min-width: 0;padding-inline: .85rem;}
.story-grid { grid-template-columns: 1fr;}
.story-reverse .story-copy { order: 0;}
.story-copy h2 { font-size: 2.1rem;}
.screen-body { padding: 1.1rem;}
.screen-heading { padding: .8rem 1.1rem;}
.record-fields dd { font-size: .75rem;}
.receipt-item b { font-size: .95rem;}
.proof-grid > div { padding: 1.05rem .75rem;}
/* 01 02 03 04 go. They are not a sequence -- there is no order in which you
   track a unit, then know who has it -- so on a phone they were a decimal
   point of decoration charging 1.5rem of indent per cell, and the sentence
   that pays for the cell was being set at ten pixels to fit beside them. */
.proof-grid > div > span { display: none;}
.proof-grid strong { font-size: .88rem;line-height: 1.3;}
.proof-grid small { font-size: .78rem;}
.benefits { padding: 4.5rem 0;}
.section-heading { margin-bottom: 2rem;text-align: left;}
.section-heading h2 { font-size: 2rem;}
.section-heading > p:last-child { margin-left: 0;}
.benefit-scroll-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -.55rem 0 .7rem;
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.benefit-scroll-cue span { font-size: 1rem;}
.capability-rail {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 320px);
  gap: .85rem;
  width: calc(100% + (100vw - 100%) / 2);
  overflow-x: auto;
  padding: .2rem 1rem 1rem 0;
  scroll-padding-inline-start: 0;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.capability-rail::-webkit-scrollbar { display: none;}
.capability-card { min-height: 330px;padding: 1.4rem;scroll-snap-align: start;}
/* The rest of the workspace, in two even columns.
 *
 * Centred, the six chips wrapped three-two-one and left a ragged edge and a
 * hole on the right, which reads as a layout that gave up rather than one
 * that chose. Everything else on this page is set from the left margin on a
 * phone; this is the one block that was not. A grid also gives each chip the
 * same box, so "Customers" and "Warranties & claims" stop being different
 * sizes of the same thing.
 */
.feature-index { margin-top: 2rem;padding-top: 1.6rem;text-align: left;}
.feature-index p { max-width: 18ch;margin-bottom: .9rem;font-size: 1.1rem;}
.feature-index ul { display: grid;grid-template-columns: 1fr 1fr;gap: .45rem;margin-bottom: 1.2rem;}
.feature-index li {
  display: flex;min-height: 44px;align-items: center;
  padding: .5rem .7rem;font-size: .8rem;line-height: 1.25;
}
.closing-section { padding-bottom: 4rem;}
.closing-card { padding: 2rem 1.4rem;border-radius: 18px;}
.closing-actions { flex-wrap: wrap;}
.closing-actions .btn { width: 100%;}
.pricing-hero { padding: 3.8rem 0;}
.pricing-hero h1 { font-size: clamp(2.75rem, 13vw, 3.7rem);}
.pricing-promise { padding: .7rem;border-radius: 17px;}
.pricing-promise span { grid-template-columns: 2rem auto 1fr;padding: .65rem;font-size: .7rem;}
.pricing-section { padding: 4rem 0;}
.pricing-controls { margin-bottom: 1.6rem;}
.pricing-controls h2 { font-size: 2rem;}
.billing-picker { width: 100%;}
.termbar { display: grid;grid-template-columns: 1fr 1fr;width: 100%;border-radius: 16px;}
.termbar .term { padding: .45rem .68rem;font-size: .72rem;}
.pricing-grid { grid-template-columns: 1fr;}
.plan-card { min-height: 0;padding: 1.45rem;border-radius: 20px;}
.plan-heading p { min-height: 0;}
.plan-card .plan-limits { margin-bottom: 1rem;}
.included { padding: 4rem 0;}
.included-heading { display: block;}
.included-heading h2 { max-width: 13ch;font-size: 2rem;}
.included-heading > p:last-child { margin-top: .8rem;}
.included-grid { grid-template-columns: 1fr;}
.included-grid article { min-height: 155px;}
.isolation { padding: 1.1rem;}
.pricing-end { padding-bottom: 4rem;}
.pricing-end-grid { grid-template-columns: 1fr;padding: 2rem 1.4rem;border-radius: 20px;}
.pricing-end-grid > .btn { width: 100%;}
.field-row { grid-template-columns: 1fr;}
.panel { margin: 2rem auto;padding: 1.3rem;}
}
@media (max-width: 360px) {
.wrap { width: min(100% - 1.5rem, 1120px);}
.site-head .wrap { gap: .45rem;}
.site-head nav { gap: .4rem;}
.nav-sign-in { max-width: 4.8rem;font-size: .69rem !important;}
.nav-cta { padding-inline: .65rem;}
.nav-cta span { display: none;}
.hero-actions { grid-template-columns: 1fr;}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto;}
.btn, .capability-card { transition: none;}
}
.code-input {
width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1.6rem;
letter-spacing: .5em;
text-align: center;
text-indent: .5em;
padding: .7rem .5rem;
margin-bottom: 1rem;
}
.form-note {
margin-bottom: 1rem;padding: .6rem .8rem;
background: #E9F6EF;border: 1px solid #BFE3D0;border-radius: 8px;
color: #14522F;font-size: .88rem;
}
.verify-foot {
margin-top: 1.2rem;padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: .88rem;color: var(--ink-soft);
}
.verify-foot .text-link {
color: var(--ink-soft);background: none;border: 0;padding: 0;
font: inherit;cursor: pointer;text-decoration: underline;
}
.verify-foot .text-link:hover { color: var(--ink);}
.verify-why { margin-top: 1rem;font-size: .82rem;}
.panel > .help { margin-top: .6rem;color: var(--ink-soft);font-size: .84rem;}
.notice-actions { margin: 1.4rem 0 .6rem;}
.notice-actions .btn { display: inline-block;}
.notice-support {
margin: 2rem auto 0;
max-width: 34rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
font-size: .9rem;
color: var(--ink-soft);
}
.notice-support-head { font-weight: 650;color: var(--ink);margin-bottom: .3rem;}
.notice-support a { color: var(--ink);}
.notice-support-hours { margin-top: .3rem;font-size: .82rem;}
.support-block {
margin-top: 1.5rem;padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: .88rem;color: var(--ink-soft);
}
.support-head { font-weight: 650;color: var(--ink);margin-bottom: .25rem;}
.support-lines a { color: var(--ink);}
.support-hours { margin-top: .25rem;font-size: .8rem;}
.site-foot .support-block {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
@media (max-width: 640px) {
.foot-inner { gap: 1.1rem;}
.site-foot .support-block {
  width: 100%;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
}
.about-block { padding: 3.6rem 0;border-top: 1px solid var(--line);}
.about-identity { background: var(--surface-soft);}
.about-grid { display: grid;grid-template-columns: minmax(200px, .6fr) minmax(0, 1.4fr);gap: clamp(1.5rem, 5vw, 4.5rem);}
.about-grid h2 { max-width: 12ch;margin: 0;font-size: clamp(1.5rem, 2.6vw, 2.2rem);letter-spacing: -.035em;line-height: 1.08;}
.about-grid .lede { max-width: 62ch;margin: 0 0 .8rem;color: var(--ink);font-size: 1.05rem;line-height: 1.6;}
.about-grid p { max-width: 68ch;margin: 0 0 .9rem;color: var(--ink-soft);font-size: .95rem;line-height: 1.65;}
.about-note { font-size: .88rem;}
.about-hero { padding: 3.6rem 0 2.6rem;}
.about-hero h1 { max-width: 18ch;margin: .4rem 0 1rem;}
.about-hero .lede { max-width: 62ch;}
.about-promises h2 { margin: 0 0 1.8rem;font-size: clamp(1.5rem, 2.6vw, 2.2rem);letter-spacing: -.035em;}
.promise-grid { display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 1.5rem 2.5rem;}
.promise-grid h3 { margin: 0 0 .4rem;font-size: 1rem;letter-spacing: -.01em;}
.promise-grid p { max-width: 52ch;margin: 0;color: var(--ink-soft);font-size: .92rem;line-height: 1.6;}
.range-lede { max-width: 60ch;margin: -1.2rem auto 2rem;color: var(--ink-soft);font-size: .98rem;line-height: 1.6;}
.faq { padding: 4.5rem 0 5rem;}
/* The heading sits beside the questions rather than above them.
 *
 * A single stack of accordions in a readable measure leaves half the width
 * empty on a desktop, which reads as something missing. Two columns of
 * accordions is the obvious fix and the wrong one: opening an answer in the
 * left column shunts the right column down, so the thing somebody is
 * reaching for moves as they reach. Putting the heading in the empty half
 * fills it, keeps every question in one predictable column, and holds the
 * line length where it belongs.
 */
.faq > .wrap { display: grid;grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);gap: clamp(2rem, 6vw, 5rem);align-items: start;}
.faq > .wrap > h2 {
  position: sticky;top: 2rem;
  max-width: 14ch;margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);letter-spacing: -.04em;line-height: 1.05;
}
.faq-grid { display: grid;min-width: 0;gap: 0;}
.faq-item { border-bottom: 1px solid var(--line);}
.faq-item:first-child { border-top: 1px solid var(--line);}
.faq-item > summary {
  display: flex;align-items: flex-start;justify-content: space-between;gap: 1rem;
  min-height: 44px;padding: .95rem 0;cursor: pointer;list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none;}
/* A plus that becomes a minus. Drawn rather than a glyph so it is the same
   two strokes in every font, and marked decorative: the open state is
   already carried by <details> for anything that reads the document. */
.faq-item > summary::after {
  flex: none;width: 14px;height: 14px;margin-top: .22rem;
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) center/14px 2px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) center/2px 14px no-repeat;
  content: "";
}
.faq-item[open] > summary::after { background-size: 14px 2px, 0 0;}
.faq-item h3 { margin: 0;font-size: 1rem;font-weight: 650;letter-spacing: -.01em;}
.faq-item p {
  max-width: 62ch;margin: 0 0 1.1rem;
  color: var(--ink-soft);font-size: .95rem;line-height: 1.65;
}
@media (max-width: 640px) {
.about-block { padding: 2.6rem 0;}
.about-grid { grid-template-columns: 1fr;gap: 1.1rem;}
.about-grid h2 { max-width: none;}
.range-lede { margin-top: -.6rem;}
.faq { padding: 3.5rem 0 4rem;}
/* Stacked again once there is no width to put it beside, and unstuck:
   a heading pinned to the top of a short screen is a heading in the way. */
.faq > .wrap { grid-template-columns: 1fr;gap: 1.5rem;}
.faq > .wrap > h2 { position: static;max-width: none;}
.faq-grid { gap: 0;}
}

.inventory-range { padding: 3.2rem 0;text-align: center;}
.inventory-range h2 { margin: 0 0 2rem;font-size: clamp(1.5rem, 2.5vw, 2.2rem);letter-spacing: -.035em;}
.range-grid { display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 1rem;}
.range-grid > div { display: grid;justify-items: center;gap: .35rem;}
.range-grid svg { width: 48px;height: 48px;margin-bottom: .6rem;fill: none;stroke: #241C2E;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;}
.range-grid strong { font-size: .85rem;}
.range-grid span { color: var(--ink-soft);font-size: .72rem;}
.serial-focus small { color: #b5e4da;font-size: .68rem;}
@media (max-width: 640px) {
.range-grid { grid-template-columns: 1fr 1fr;gap: 1.8rem .8rem;}
.range-grid strong { font-size: .75rem;}
.overview-metrics strong { font-size: clamp(.95rem, 4vw, 1.25rem);}
.overview-metrics .revenue { grid-column: span 2;}
}
/* The trade pages, in the footer of every page. Internal linking is most of
   how a new page gets crawled at all: linked from one place it is visited
   once, linked from everywhere it is treated as part of the site. */
.foot-pages { display: flex;flex-wrap: wrap;gap: .35rem 1rem;flex-basis: 100%;order: 3;padding-top: 1rem;border-top: 1px solid var(--line);}
.foot-social { display: flex;flex-wrap: wrap;align-items: baseline;gap: .35rem 1rem;flex-basis: 100%;order: 3;}
.foot-social span { color: var(--ink-soft);}
.foot-what { flex-basis: 100%;order: 4;max-width: 80ch;margin: 0;padding-top: 1rem;border-top: 1px solid var(--line);font-size: .76rem;line-height: 1.6;color: var(--ink-faint, var(--ink-soft));}
.foot-pages a { color: var(--ink-soft);font-size: .82rem;text-decoration: none;}
.foot-pages a:hover { color: var(--brand-primary);}

/* Controls need a visible boundary, separate from decorative dividers. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { border-color: var(--sr-controlBorder); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--sr-focus); }

body { background: var(--sr-canvas); }
.site-head { background: var(--sr-canvas); border-color: var(--line); backdrop-filter: none; }
.logo img { width: 176px; height: auto; }
.btn { border-radius: 8px; }
.site-head nav > a:not(.btn), .nav-menu summary { color: var(--ink); }
.nav-menu-panel { background: var(--surface); }
.public-brand-line { display: block; margin-top: .5rem; }

.story-dark, .closing-card { color: #F6F2E9; }
.story-dark .eyebrow, .story-dark .text-link, .closing-card .eyebrow, .closing-card .text-link { color: #F5CBA7; }
.story-dark .story-copy > p:not(.eyebrow), .closing-card p:last-child { color: #C6BDCC; }
.story-dark .story-tags li { color: #C4D8CC; }
.story-light .text-link { color: var(--sr-link); }
.site-foot { background: var(--sr-canvas); }
.hero h1 { color: var(--ink); }

/* Fixed editorial fields keep their own readable foregrounds in every mode. */
.btn.secondary, .pricing-promise, .mini-count span, .mini-offline span, .feature-icon { background: var(--surface); border-color: var(--line); }
.included-grid article > span { color: var(--ink-soft); }
.included-grid article > span[aria-hidden] { color: var(--ink-soft); opacity: 1; }
.pricing-end-grid .eyebrow { color: #F5CBA7; }
:root[data-sr-theme="high-contrast"] { --brand-accent: var(--sr-action); --on-accent: var(--sr-onAction); }
@media (max-width: 1100px) {
 .site-head .wrap > nav { min-width: 0; flex: 1; flex-wrap: wrap; gap: .65rem 1rem; justify-content: flex-end; }
 .site-head .wrap { padding-block: .75rem; }
}
@media (max-width: 640px) {
 .site-head .wrap { display: grid; grid-template-columns: 1fr; gap: .65rem; }
 .site-head .wrap > nav { width: 100%; justify-content: space-between; }
 .site-head .logo { justify-self: start; }
 .logo img { width: 176px; height: auto; }
}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { background: var(--surface); color: var(--ink); }
.password-toggle { background: var(--surface); }

.about-brand-scene { margin: 2rem 0; }
.about-brand-scene img { width: 100%; height: auto; }
.about-brand-scene figcaption { margin-top: .5rem; font-size: .875rem; color: var(--ink-soft); }