/* partners.seava.pro. Tokens are inlined from the product (client/src/index.css) by the build
   as HSL triplets; every colour here is hsl(var(--token)). Light only: the product has no
   dark theme and this site follows it. */
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:hsl(var(--copy));font:400 16px/1.6 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:hsl(var(--primary))}
h1,h2,h3{color:hsl(var(--deep));text-wrap:balance;margin:0}
h1{font:700 clamp(38px,6vw,62px)/1.02 "Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.032em;margin-top:14px}
h2{font:700 clamp(26px,3.4vw,36px)/1.08 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;margin-top:10px}
h3{font:600 18px/1.3 "Inter",ui-sans-serif,system-ui,sans-serif}
p{margin:0}
.eyebrow{font:600 11px/1.4 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--copy-dim))}
.on-deep .eyebrow,.deep .eyebrow{color:hsl(var(--on-deep-eyebrow))}
.shell{max-width:1520px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:640px){.shell{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.band{padding-block:72px}
.band.first{padding-top:96px}
.band.deep{background:hsl(var(--deep));color:hsl(var(--on-deep-lead))}
.band.deep h2,.band.deep h3{color:#fff}
.band.mist{background:hsl(var(--mist))}
.rule-top{border-top:1px solid hsl(var(--rule))}
.aqua-rule{display:block;width:36px;height:3px;background:hsl(var(--accent));margin-bottom:14px}
.lead{font-size:18px;line-height:1.55;max-width:60ch;margin-top:14px}
.deep .lead,.on-deep .lead{color:hsl(var(--on-deep-lead))}
.muted{color:hsl(var(--copy-muted));font-size:15px;margin-top:14px}
.deep .muted,.on-deep .muted{color:hsl(var(--on-deep-muted))}
.small{font-size:13px}
.note{margin-top:22px;font-size:13px;color:hsl(var(--copy-dim))}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;text-align:center;line-height:1.25;border-radius:4px;font:600 16px/1 "Inter",ui-sans-serif,system-ui,sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s,border-color .2s}
.btn.sm{min-height:40px;font-size:14px;padding:8px 16px}
.btn.primary{background:hsl(var(--primary));color:#fff}
.btn.primary:hover{background:hsl(var(--primary-hover))}
.btn.primary[disabled]{opacity:.5;cursor:not-allowed}
.btn.secondary{background:#fff;color:hsl(var(--primary));border-color:hsl(var(--field))}
.btn.secondary:hover{border-color:hsl(var(--field-hover))}
.deep .btn.secondary,.on-deep .btn.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.deep .btn.secondary:hover,.on-deep .btn.secondary:hover{border-color:#fff}
:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:2px}
.wm{display:inline-block;height:30px;width:auto;aspect-ratio:2692.5/719;fill:currentColor}
.wm [data-part="stop"]{fill:hsl(184.8 91.6% 37.3%)}
.wm.ink{color:hsl(var(--mark-ink))}
.wm.white{color:#fff}

header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:#fff;border-bottom:1px solid hsl(var(--rule))}
/* Staging header geometry (SHELL_WIDE: 1520px, 32px gutters; 64px bar; menu 40px after the mark). */
header.site .shell{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;height:64px;gap:24px}
header.site nav.main{justify-self:center}
/* The menu sits on the page centre once both side columns can hold the lockup. */
@media (min-width:1360px){header.site .shell{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
header.site .lockup{justify-self:start}
header.site .hdr-cta{justify-self:end;grid-column:3}
/* The staging bar's "Come aboard" pill: 40px tall, 20px sides, 14px semibold, Bright Blue on hover. */
header.site .hdr-cta .btn{height:40px;padding:0 20px;border-radius:9999px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:1199px){header.site .shell{gap:12px}}
@media (max-width:480px){header.site .hdr-cta .btn{padding:0 16px}}
header.site .hdr-cta .btn:hover{background:hsl(var(--primary-hover));border-color:hsl(var(--primary-hover))}
.lockup{display:flex;align-items:center;gap:14px;text-decoration:none}
.lockup .sep{width:1px;height:26px;background:hsl(var(--rule))}
.lockup .product{font:700 24px/1 "Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.04em;color:#00558B}
/* The staging header's menu (Seava client Header.tsx): 15px semibold in the wordmark blue, no
   colour change on hover; a 2px teal rule under the word opens from the centre over 300ms. */
nav.main{display:flex;align-items:center;gap:24px}
@media (min-width:1280px){nav.main{gap:28px}}
nav.main a{position:relative;font:600 15px/24px "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--mark-ink));text-decoration:none;padding:20px 0}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;background:hsl(184.8 91.6% 37.3%);transform:scaleX(0);transition:transform .3s}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a[aria-current="page"]::after{background:hsl(var(--primary));transform:scaleX(1);transition:none}
@media (max-width:1199px){nav.main{display:none}}

.hero{position:relative;isolation:isolate;background:hsl(var(--deep));color:hsl(var(--on-deep-lead));padding-block:72px 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("/assets/brand/hero.webp") center 40%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:hsl(var(--deep)/.82)}
.hero h1{color:#fff}
.hero h1 .signal-word{color:hsl(var(--signal))}
.hero .lead{margin-top:22px}
.hero{padding-block:96px 104px}
.hero-copy{max-width:760px}
.figures{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
@media (max-width:980px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.figures{grid-template-columns:minmax(0,1fr)}}
.figures li{display:grid;gap:6px;align-content:start;padding:18px 0 20px;border-top:1px solid hsl(var(--rule))}
.figures li b{font:700 44px/1 "Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.03em;color:hsl(var(--deep));font-variant-numeric:tabular-nums}
.figures li b.nil{color:hsl(var(--deep-aqua))}
.figures li .d{font-size:14px;color:hsl(var(--copy-muted))}
.register{margin:28px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media (max-width:760px){.register{grid-template-columns:minmax(0,1fr)}}
.register div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid hsl(var(--rule-soft));font-size:14px}
.register dt{font:600 11px/1.6 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--copy-dim))}
.register dd{margin:0;color:hsl(var(--copy))}

.screens{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:36px;container-type:inline-size}
.screen{grid-column:span 6;min-width:0;max-width:100%}
.two>figure.screen,.two>figure.screen.wide{min-width:0;width:100%;grid-column:1/-1}
.screen.wide{grid-column:span 8}.screen.narrow,.screen.third{grid-column:span 4}
.screen figure,figure.screen{margin:0}
.screen .frame{border:1px solid hsl(var(--rule));border-radius:4px;overflow:hidden;background:hsl(var(--mist));aspect-ratio:16/10}
.screen.phone .frame{aspect-ratio:390/560;max-width:280px}
/* Beside the wide home screen the phone frame takes its height: 8 of 12 columns (20px gaps) at 16:10. */
@media (min-width:901px){.screen.phone .frame{max-width:none;width:100%;aspect-ratio:auto;height:calc(((100cqw - 220px) * 8 / 12 + 140px) * .625)}}
.screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;max-width:100%}
.screen figcaption{display:grid;gap:4px;padding-top:12px}
.screen figcaption strong{color:hsl(var(--deep));font-weight:600;font-size:15px}
.screen figcaption span{font-size:14px;color:hsl(var(--copy-muted))}
@media (max-width:900px){.screen,.screen.wide,.screen.narrow,.screen.third{grid-column:1/-1}}
.features-head{margin-top:48px}.features-list{margin-top:12px}

.cols,.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:36px}
.terms{margin-top:28px}
@media (max-width:760px){.cols,.terms{grid-template-columns:minmax(0,1fr)}}
.statements{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.statements li{padding:16px 0;border-top:1px solid hsl(var(--rule));display:grid;gap:4px}
.statements li strong{color:hsl(var(--deep));font-weight:600}
.statements li span{color:hsl(var(--copy-muted));font-size:15px}
.deep .statements li{border-top-color:rgba(255,255,255,.14)}
.deep .statements li strong{color:#fff}
.deep .statements li span{color:hsl(var(--on-deep-lead))}

table{width:100%;border-collapse:collapse;margin-top:28px;font-size:15px}
th{font:600 11px/1.4 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--copy-dim));text-align:left;padding:0 12px 10px 0;border-bottom:1px solid hsl(var(--rule))}
td,tbody th{padding:14px 12px 14px 0;border-bottom:1px solid hsl(var(--rule-soft));vertical-align:top;text-align:left}
tbody th{font:600 15px/1.5 "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--deep));letter-spacing:0;text-transform:none;white-space:nowrap}
td.free{color:hsl(var(--deep-aqua));font-weight:600;white-space:nowrap}
.table-wrap{overflow-x:auto}

.wall{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:760px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.wall{grid-template-columns:minmax(0,1fr)}}
.slot{border:1px solid hsl(var(--rule));border-radius:4px;padding:18px;display:grid;gap:8px;align-content:start;min-height:120px;background:#fff}
.slot .eyebrow{color:hsl(var(--deep-aqua))}
.slot strong{color:hsl(var(--deep));font-weight:600}
.slot span{font-size:14px;color:hsl(var(--copy-muted))}

.placements{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:980px){.placements{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl{display:grid;gap:12px;align-content:start}
.pl .mini{aspect-ratio:4/3;border:1px solid hsl(var(--rule));border-radius:4px;background:#fff;position:relative;overflow:hidden;max-width:100%}
.mini i{position:absolute;display:block;background:hsl(var(--rule-soft));border-radius:2px}
.mini b{position:absolute;display:block;background:hsl(var(--primary));border-radius:2px}
.mini .lbl{position:absolute;left:8px;top:6px;font:600 9px/1 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--copy-dim))}
.pl strong{color:hsl(var(--deep));font-weight:600}
.pl span{font-size:14px;color:hsl(var(--copy-muted))}
.offer{margin-top:40px;background:hsl(var(--deep));color:hsl(var(--on-deep-lead));border-radius:4px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
@media (max-width:760px){.offer{grid-template-columns:minmax(0,1fr)}}
.offer h3{color:#fff;font:700 22px/1.2 "Inter",ui-sans-serif,system-ui,sans-serif;margin-top:8px}
.offer p{font-size:15px;margin-top:8px}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.notice{border-left:3px solid hsl(var(--accent));background:hsl(var(--mist));padding:14px 16px;font-size:14px;color:hsl(var(--copy));margin-top:22px}
.deep .notice{background:rgba(255,255,255,.06);color:hsl(var(--on-deep-lead))}
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.14)}
.steps li i{font:600 11px/28px "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;color:hsl(var(--on-deep-eyebrow));font-style:normal}
.steps li strong{color:#fff;font-weight:600;display:block}
.steps li span{font-size:14px}

.road{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:980px){.road{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.road{grid-template-columns:minmax(0,1fr)}}
.road li{border-top:3px solid hsl(var(--rule));padding-top:14px;display:grid;gap:6px;align-content:start}
.road li.now{border-top-color:hsl(var(--accent))}
.road li strong{color:hsl(var(--deep));font-weight:600;font-size:17px}
.road li span:last-child{font-size:15px;color:hsl(var(--copy-muted))}

.downloads{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media (max-width:760px){.downloads{grid-template-columns:minmax(0,1fr)}}
.downloads li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px solid hsl(var(--rule));font-size:15px}
.downloads li span{color:hsl(var(--copy-dim));font-size:13px;font-variant-numeric:tabular-nums}
.downloads li a{text-decoration:none;color:hsl(var(--deep));font-weight:600}
.downloads li a:hover{color:hsl(var(--primary))}

form#contact-form{display:grid;gap:16px;max-width:560px}
label{display:grid;gap:6px}
input,select,textarea{font:400 15px/1.4 "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--deep));border:1px solid hsl(var(--field));border-radius:2px;padding:11px 12px;background:#fff;width:100%;max-width:100%}
input:focus,select:focus,textarea:focus{border-color:hsl(var(--field-hover))}
textarea{min-height:120px;resize:vertical}
/* The product select (ui/select.tsx): field-bordered trigger, aqua ring on focus; a squared white
   panel with the strong hairline and the soft lift; 40px rows in 14px, mist tint plus a 2px aqua
   marker on the active row, the chosen row medium weight with the tick on the right. */
.sel{position:relative}
.sel-native{position:absolute;inset:0;opacity:0;pointer-events:none}
.sel-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font:400 15px/1.4 "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--deep));text-align:left;background:#fff;border:1px solid hsl(var(--field));border-radius:2px;padding:11px 12px;cursor:pointer;transition:border-color .15s}
.sel-trigger:hover{border-color:hsl(var(--field-hover))}
.sel-trigger:focus-visible,.sel.open .sel-trigger{outline:none;border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--accent))}
.sel-chev{width:16px;height:16px;flex:none;opacity:.5;transition:transform .15s}
.sel.open .sel-chev{transform:rotate(180deg)}
.sel-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px 0;list-style:none;max-height:16rem;overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid hsl(var(--rule));border-radius:4px;box-shadow:0 16px 40px -20px hsl(var(--deep) / .30);outline:none}
.sel-opt{position:relative;display:flex;align-items:center;min-height:40px;padding:8px 36px 8px 12px;font-size:14px;color:hsl(var(--copy));cursor:pointer;transition:background-color .15s,color .15s}
.sel-opt.active{background:hsl(var(--mist));color:hsl(var(--ink, var(--deep)));box-shadow:inset 2px 0 0 0 hsl(var(--accent))}
.sel-opt[aria-selected="true"]{font-weight:500;color:hsl(var(--ink, var(--deep)))}
.sel-tick{position:absolute;right:12px;width:16px;height:16px;color:hsl(var(--primary));visibility:hidden}
.sel-opt[aria-selected="true"] .sel-tick{visibility:visible}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.addr{display:grid;gap:10px;font-size:15px;margin-top:24px}
.addr strong{color:hsl(var(--deep));font-weight:600}
#contact-status{font-weight:600;color:hsl(var(--deep-aqua))}
#contact-status.error{color:hsl(var(--alert))}
/* Turnstile runs interaction-only: it takes room only when a person must answer a challenge. */
.turnstile:empty{display:none}
form#contact-form .actions{margin-top:4px}
form#contact-form p{margin:0}

footer{background:hsl(var(--deep));color:hsl(var(--on-deep-lead));padding-block:40px}
footer .shell{display:grid;gap:8px;text-align:center;font-size:13px}
footer a{color:#fff}
footer .wmrow{margin-top:20px}

dialog.gate{border:0;padding:0;background:transparent;max-width:min(34rem,calc(100vw - 32px));width:100%;margin:auto}
dialog.gate::backdrop{background:hsl(var(--deep)/.72)}
.window{background:#fff;border-radius:4px;max-width:34rem;width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 48px -16px hsl(var(--deep)/.35)}
.window .head{padding:20px 24px 14px;border-bottom:1px solid hsl(var(--rule));display:grid;gap:6px}
.window .head h3{font:700 22px/1.2 "Inter",ui-sans-serif,system-ui,sans-serif;margin:0}
.window .body{padding:20px 24px;display:grid;gap:16px;font-size:15px;margin:0}
.window .foot{padding:14px 24px 20px;border-top:1px solid hsl(var(--rule));display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.radio{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid hsl(var(--field));border-radius:2px;cursor:pointer}
.radio input{width:auto;margin-top:3px}
.radio strong{color:hsl(var(--deep));font-weight:600;display:block}
.radio span span{font-size:13px;color:hsl(var(--copy-muted))}
.warn{border-left:3px solid hsl(var(--alert));padding:10px 12px;background:#fff;font-size:13px;color:hsl(var(--copy))}
#gate-status.error{color:hsl(var(--alert))}
.prose{max-width:70ch}
.prose p,.prose ul{margin-top:14px;font-size:16px}
.prose h3{margin-top:28px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:400px){header.site .lockup{gap:10px}header.site .lockup .product{font-size:20px}}

/* Click to zoom (site.js). The frame is the link; the dialog fills the window on a navy scrim. */
a.zoom{display:block;cursor:zoom-in;color:inherit}
a.zoom:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:2px}
a.zoom img{transition:transform .3s}
a.zoom:hover img{transform:scale(1.015)}
dialog.lightbox{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;overflow:hidden}
dialog.lightbox::backdrop{background:hsl(var(--deep)/.88)}
dialog.lightbox[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.lb-stage{overflow:auto;display:grid;place-items:center;padding:24px 24px 0;overscroll-behavior:contain}
.lb-stage img{display:block;max-width:100%;max-height:calc(100dvh - 96px);width:auto;height:auto;object-fit:contain;cursor:zoom-in;border-radius:4px;box-shadow:0 24px 48px -16px hsl(var(--deep)/.5);background:#fff}
dialog.lightbox.zoomed .lb-stage{place-items:start}
dialog.lightbox.zoomed .lb-stage img{max-width:none;max-height:none;cursor:zoom-out}
.lb-bar{display:flex;align-items:center;gap:16px;padding:12px 24px 16px;color:#fff}
.lb-cap{margin:0;font-weight:600;font-size:15px;flex:1;min-width:0}
.lb-hint{font-size:13px;opacity:.75}
.lb-close{flex:none;width:40px;height:40px;border-radius:9999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:400 26px/1 "Inter",sans-serif;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.12)}
.lb-close:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:2px}
@media (max-width:600px){.lb-hint{display:none}.lb-stage{padding:12px 12px 0}}
@media (prefers-reduced-motion:reduce){a.zoom:hover img{transform:none}}

/* ============ The five pages ============ */
.skip{position:absolute;left:-10000px;top:8px;z-index:20;background:#fff;color:hsl(var(--primary));padding:8px 12px;border:1px solid hsl(var(--field))}
.skip:focus{left:8px}
main section[id]{scroll-margin-top:124px}

/* The page hero: a flat navy veil over the page's photograph (brand rule: text over a photo only
   on a flat veil), the headline on the left and the plate on the right. */
.phero{position:relative;isolation:isolate;background:hsl(var(--deep));color:hsl(var(--on-deep-lead));overflow:hidden;padding-block:88px 96px}
.phero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--photo) center 45%/cover no-repeat}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:hsl(var(--deep)/.84)}
/* Every hero shares one geometry, so switching pages never moves the eyebrow, the title or the
   plate: copy and plate start on the same top line, and the hero keeps one height. */
.phero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
@media (min-width:1024px){.phero-grid{min-height:var(--hero-h,480px)}}
@media (max-width:1023px){.phero-grid{grid-template-columns:minmax(0,1fr);gap:48px}}
.phero h1{color:#fff;font-size:clamp(40px,5.1vw,68px);line-height:1.02;margin-top:16px;max-width:18ch}
.phero h1 .signal-word{color:hsl(var(--signal))}
.phero .lead{margin-top:24px;font-size:19px;max-width:56ch}
.phero .actions{margin-top:32px}
.phero-notice{margin-top:24px;max-width:60ch;padding:12px 16px;border-left:3px solid hsl(var(--accent));background:hsl(0 0% 100%/.06);font-size:14px;line-height:1.55;color:hsl(var(--on-deep-lead))}

/* THE PLATE (signature): the product's ledger, label over figure between hairlines, set like a
   vessel's builder's plate. On load the hairlines draw in, row by row; the figures follow. */
.plate{border:1px solid hsl(0 0% 100%/.22);border-radius:2px;padding:22px 24px 6px;background:hsl(var(--deep)/.55)}
.plate>.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.plate>.eyebrow::before{content:"";width:36px;height:3px;background:hsl(var(--accent))}
.plate dl{margin:0}
.plate dl>div{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;align-items:baseline;padding:16px 0 15px}
.plate dl>div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:hsl(0 0% 100%/.18);transform-origin:left}
.plate dt{font:600 11px/1.4 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--on-deep-eyebrow))}
.plate dd{margin:0;display:grid;gap:3px}
.plate dd b{font:700 clamp(22px,2.2vw,30px)/1.1 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.plate a{color:#fff}
.plate dd span{font-size:13px;line-height:1.45;color:hsl(var(--on-deep-muted))}
@media (max-width:480px){.plate{padding:18px 18px 4px}.plate dl>div{grid-template-columns:minmax(0,1fr);gap:6px}}
@media (prefers-reduced-motion:no-preference){
  .plate dl>div::before{animation:plate-rule .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 110ms + 150ms)}
  .plate dl>div>*{animation:plate-in .5s ease-out both;animation-delay:calc(var(--i) * 110ms + 380ms)}
}
@keyframes plate-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes plate-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* On this page: the chapters of a long page, like a deck's slide index. Sticky under the bar. */
.chapters{position:sticky;top:64px;z-index:4;background:#fff;border-bottom:1px solid hsl(var(--rule))}
.chapters .shell{display:flex;align-items:center;gap:28px;height:48px}
.chapters .eyebrow{flex:none}
.chapters ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;min-width:0}
.chapters ul::-webkit-scrollbar{display:none}
.chapters a{position:relative;display:block;white-space:nowrap;font:500 14px/48px "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--copy-muted));text-decoration:none;transition:color .2s}
.chapters a:hover,.chapters a[aria-current="true"]{color:hsl(var(--deep))}
.chapters a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:hsl(var(--primary));transform:scaleX(0);transition:transform .3s}
.chapters a[aria-current="true"]::after{transform:scaleX(1)}
@media (max-width:760px){.chapters .eyebrow{display:none}.chapters ul{gap:20px}}

/* A real sequence, so it is numbered. */
.process{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
@media (max-width:980px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.process{grid-template-columns:minmax(0,1fr)}}
.process li{display:grid;gap:8px;align-content:start;padding:20px 0 24px;border-top:1px solid hsl(var(--rule))}
.process .n{font:700 34px/1 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;color:hsl(var(--deep-aqua));font-variant-numeric:tabular-nums}
.process strong{color:hsl(var(--deep));font-weight:600;font-size:17px}
.process span:last-child{color:hsl(var(--copy-muted));font-size:15px}

.offer-band{padding-block:80px}
.offer-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
@media (max-width:760px){.offer-grid{grid-template-columns:minmax(0,1fr)}}
.offer-grid h2{max-width:22ch}
.btn.white{background:#fff;color:hsl(var(--deep))}
.btn.white:hover{background:hsl(var(--mist))}
.register.wide{margin-top:32px}

/* Downloads, as tiles: what it is, the file, one action. */
.tiles{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.tiles a{display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:168px;padding:22px;border:1px solid hsl(var(--rule));border-radius:2px;background:#fff;text-decoration:none;transition:border-color .2s}
.tiles a:hover{border-color:hsl(var(--field-hover))}
.tiles strong{font:600 19px/1.3 "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--deep))}
.tiles .dl{position:relative;justify-self:start;font:600 14px/24px "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--primary))}
.tiles .dl::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:hsl(var(--primary));transform:scaleX(0);transition:transform .3s}
.tiles a:hover .dl::after{transform:scaleX(1)}

.quotes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;margin-top:32px}
@media (max-width:900px){.quotes{grid-template-columns:minmax(0,1fr)}}
.quote{margin:0;display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:24px;background:#fff;border:1px solid hsl(var(--rule));border-radius:2px}
.quote blockquote{margin:0;font-size:17px;line-height:1.6;color:hsl(var(--deep))}
.quote .copy{justify-self:start}

.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
@media (max-width:900px){.brand-grid{grid-template-columns:minmax(0,1fr)}}
.logo-tile{display:grid;gap:10px;min-width:0;font-size:14px;color:hsl(var(--copy-muted))}
.logo-tile .ground{display:grid;place-items:center;aspect-ratio:16/9;border:1px solid hsl(var(--rule));border-radius:2px}
.logo-tile .ground.navy{background:hsl(var(--deep));border-color:hsl(var(--deep))}
.logo-tile .wm{height:48px;max-width:70%}
.logo-tile.type .ground{place-items:center;align-content:center;gap:8px;text-align:center}
.spec-title{font:700 34px/1.05 "Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.032em;color:hsl(var(--deep))}
.spec-body{font:400 17px/1.4 "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--copy))}
.swatches{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:20px 16px}
.swatches li{display:grid;gap:3px;font-size:13px;color:hsl(var(--copy-muted))}
.swatches i{display:block;aspect-ratio:3/2;border:1px solid hsl(var(--rule));border-radius:2px;margin-bottom:6px}
.swatches strong{color:hsl(var(--deep));font-weight:600;font-size:14px}
.swatches .hex{font-variant-numeric:tabular-nums;color:hsl(var(--copy-dim));letter-spacing:.02em}

/* The next page, like turning a slide: the staging menu's widening rule under its name. */
.next{border-top:1px solid hsl(var(--rule))}
.next-link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"e a" "t a" "b a";column-gap:24px;padding-block:56px 60px;text-decoration:none}
.next-link .eyebrow{grid-area:e}
.next-link strong{grid-area:t;justify-self:start;position:relative;margin-top:6px;font:700 clamp(32px,4vw,48px)/1.1 "Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.025em;color:hsl(var(--deep))}
.next-link strong::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:hsl(var(--accent));transform:scaleX(0);transition:transform .3s}
.next-link:hover strong::after,.next-link:focus-visible strong::after{transform:scaleX(1)}
.next-link .blurb{grid-area:b;margin-top:14px;font-size:17px;color:hsl(var(--copy-muted))}
.next-link .arrow{grid-area:a;align-self:center;font:400 48px/1 "Inter",ui-sans-serif,system-ui,sans-serif;color:hsl(var(--primary));transition:transform .3s}
.next-link:hover .arrow{transform:translateX(8px)}

.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-bottom:16px}
.foot-nav a{color:#fff;font-weight:600;font-size:14px;text-decoration:none}
.foot-nav a:hover{text-decoration:underline}

/* Bunkering: the text and its screen side by side on a desktop. */
@media (min-width:1024px){.two>figure.screen,.two>figure.screen.wide{grid-column:auto}}
.logo-tile .smark{width:64px;height:64px}
.brand-rules{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
@media (max-width:900px){.brand-rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.brand-rules{grid-template-columns:minmax(0,1fr)}}
.brand-rules li{display:grid;gap:4px;padding:14px 0;border-top:1px solid hsl(var(--rule))}
.brand-rules strong{color:hsl(var(--deep));font-weight:600;font-size:15px}
.brand-rules span{color:hsl(var(--copy-muted));font-size:14px}
.risk-strip{background:hsl(var(--mist));border-bottom:1px solid hsl(var(--rule))}
.risk-strip p{margin:0;padding:14px 0 14px 14px;border-left:3px solid hsl(var(--accent));font-size:14px;line-height:1.55;color:hsl(var(--copy));max-width:120ch}
.risk-strip strong{color:hsl(var(--deep))}
.logo-tile .ground{aspect-ratio:auto;height:clamp(150px,17vw,250px)}