/* ================= interactive grid cells =================
   The system allows exactly one hover lift, and it is conditional:
   --shadow-lift is "hover lift on grid cells only", and IMPLEMENTATION.md
   narrows it to an INTERACTIVE cell. So a card lifts if and only if the
   whole card is a target. The stretched pseudo-element below is what makes
   that true, rather than the lift promising a click the card cannot take.
   Tokens are the bundle's own: -2px over .28s, and the one card shadow. */
:root{--lift-offset:-2px;--dur-lift:.28s;--shadow-lift:0 12px 30px rgba(32,36,46,.06)}
/* The design sets display type as flat sizes with its own breakpoints, not as
   fluid clamps. Our clamps only reached 56 above 1037px and 34 above 1134px, so
   every desktop narrower than that rendered a heading smaller than the spec. */
:root{--text-h1:56px;--text-h2:34px;--text-lead:17px;--text-body-size:16.5px}
/* 16.5 is the reconciled value: the V16 (6) export raised nine steps and notes
   that anyone building from the older tokens shipped the smaller scale. */
@media (max-width:920px){:root{--text-h1:40px;--text-h2:28px}}
@media (max-width:560px){:root{--text-h1:34px;--text-h2:26px} .hero{padding-top:36px}}
.lift{position:relative;
  transition:transform var(--dur-lift) var(--ease-out),
             box-shadow var(--dur-lift) var(--ease-out),
             border-color var(--dur-lift) ease}
/* descendant, not child: the link sits inside the card body, and inset:0 still
   resolves against .lift because nothing between them is positioned */
.lift .stretch::after{content:"";position:absolute;inset:0;z-index:1}
/* doubled class on purpose: the scroll-reveal sets transform on the same
   element through `.js .rgroup.in > *`, which is (0,3,0). A single .lift:hover
   is (0,2,0) and would lose the transform silently. */
.lift.lift:hover,.lift.lift:focus-within{transform:translateY(var(--lift-offset));
  box-shadow:var(--shadow-lift);border-color:var(--hairline-strong)}
.lift:hover .tlink,.lift:focus-within .tlink{text-decoration:underline;
  text-underline-offset:3px}
/* the cell is the target, so anything else inside it must sit above the sheet */
.lift a:not(.stretch),.lift button:not(.stretch){position:relative;z-index:2}

/* A cell in a hairline grid (gap:1px over a container fill) cannot be lifted:
   moving it 2px opens a band of container colour under it and covers its
   neighbour, tearing the very rule that separates the cells. Interactive cells
   in those grids change surface instead, which is what the footer lead band and
   the mega rail already do. Same duration, same promise, no torn hairline. */
.lift-well{position:relative;transition:background var(--dur-lift) var(--ease-out)}
.lift-well .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.lift-well a:not(.stretch),.lift-well button:not(.stretch){position:relative;z-index:2}
.lift-well.lift-well:hover,.lift-well.lift-well:focus-within{background:var(--well)}
@media (prefers-reduced-motion:reduce){
  .lift{transition:box-shadow var(--dur-lift) ease,border-color var(--dur-lift) ease}
  .lift.lift:hover,.lift.lift:focus-within{transform:none}
}

/* The closing panel, verbatim from the design: ONE bordered panel split by an
   inner rule, no gap, no eyebrow, cells at 44px, H2 at 28px on a 26ch measure.
   A translate would tear that inner rule the way it tears any hairline grid, so
   the hover is a surface change. The lift lives where the design leaves room for
   it: the product cards and the route blocks, which stand apart. */
.cta{border:0!important;margin-top:44px}
.cta-cols{grid-template-columns:1fr 1fr!important;gap:0!important;background:none!important;
  border:1px solid var(--hairline)}
.cta-col{background:#fff;padding:44px;border-right:1px solid var(--hairline);position:relative;
  display:flex;flex-direction:column;transition:background var(--dur-lift) var(--ease-out)}
.cta-col:last-child{border-right:0}
.cta-col h2{font-size:38px;letter-spacing:-.02em;line-height:1.12;margin-top:18px}
.cta-col p{margin-top:18px;max-width:46ch;font-size:16.5px;color:var(--body);line-height:1.6}
.cta-col .cta-mail{font-size:15.5px;color:var(--muted);margin-top:auto;padding-top:22px}
.cta-col p.eyebrow{font-size:var(--text-eyebrow);letter-spacing:var(--text-eyebrow-ls);color:var(--muted);margin-top:0;max-width:none}
.cta-col .route p{margin-top:14px;font-size:15.5px}
.route h3{font-size:22px;line-height:1.3}
.route p{font-size:15.5px}
.cta-col .hero-acts,.cta-col .cta-go{margin-top:28px}
.cta-col .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.cta-col a:not(.stretch):not(.route-go),.cta-col button:not(.stretch){position:relative;z-index:2}
/* the artboards' closing panel with a plate: ONE bordered box round plate, columns and
   the privacy line; the right column is two ways stacked through a hairline (06.09) */
.band .cta:has(.cta-plate){border:1px solid var(--hairline)!important;margin-top:48px}
.cta:has(.cta-plate) .cta-cols{border:0!important}
.cta-col.cta-ways{display:flex;flex-direction:column}
.cta-col .way p{margin-top:0;max-width:none;font-size:15.5px}
.cta-col .cta-mail{max-width:none}
/* the surface answers the hover only where the whole cell is the link */
.cta-col:has(.stretch):hover,.cta-col:has(.stretch):focus-within{background:var(--well)}
@media (max-width:760px){.cta-cols{grid-template-columns:1fr!important}
  .cta-col{border-right:0;border-bottom:1px solid var(--hairline)}
  .cta-col:last-child{border-bottom:0}}


/* ===== corrections found by the design audit, 05.09 =====
   Every value here is the design's; each replaced one I had invented. */

/* the section header is two columns, 180px, with the note UNDER the H2 */
.sec-head{grid-template-columns:180px 1fr!important;gap:0 44px!important}
.sec-head > .eyebrow{padding-top:8px}
.sec-head h2{grid-column:2}
.sec-head .sec-note{grid-column:2;margin-top:18px;max-width:78ch}

/* the hero proof line is a 24px serif statement behind a rule, not body copy */
.hero-proof{padding-top:0;border-left:1px solid var(--hairline);padding-left:36px}
.hero-proof .pay{font-family:var(--font-display);font-size:24px;
  font-weight:var(--weight-display);letter-spacing:-.01em;line-height:1.3;color:var(--ink);
  margin-top:12px}
.hero-proof .sec-note{margin-top:14px;font-size:16px}
.hero-body{grid-template-columns:1.3fr .7fr;gap:56px}
.hero h1{max-width:22ch}

/* text links are 15px, and the tick is 15px */
.tlink{font-size:var(--text-button-lg)}
.tick{font-size:15.5px}

/* the design's blue action, distinct from the ink one */
.btn-blue{background:var(--blue);color:var(--on-accent)}
.btn-blue:hover{filter:brightness(1.08)}
.btn-quiet{background:#fff;border:1px solid var(--hairline-strong);color:var(--ink)}
.btn-quiet:hover{border-color:var(--ink)}

/* the accordion marker sits on the left, in the sans, and the answer is indented */
.faq summary{grid-template-columns:14px 1fr!important;gap:16px}
.faq summary::after{content:none}
.faq summary::before{content:"+";font-family:var(--font-sans);font-size:18px;color:var(--blue);
  width:14px;line-height:1.3}
.faq details[open] summary::before{content:"–"}
.faq p{margin-left:30px;max-width:82ch}

/* the two-column section header: eyebrow, then H2 with its supporting line
   under it rather than floating alone in a third column */
.sec-head-2{grid-template-columns:180px 1fr}
.sec-head-2 .sec-note{margin-top:14px;max-width:78ch}

/* ---- after the audit of 05.09, second pass ----
   The rules below restate base breakpoints that chrome's later, equal-specificity
   rules had silently killed, and close the collisions the audit measured. */
@media (max-width:1040px){
  .sec-head{grid-template-columns:1fr!important;gap:0!important}
  .sec-head h2{margin-top:14px}
  .sec-head h2,.sec-head .sec-note{grid-column:auto}
  .hero-body{grid-template-columns:1fr;gap:34px}
  .hero-proof{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:26px}
}
/* A stretched control must never transform: a transform makes it the containing
   block of its own overlay, so on mousedown the overlay collapses to the button,
   mouseup lands on the card, and the click is lost. filter and the rest create the
   same containing block. Found 06.09 by a real click. */
.stretch.stretch:hover,.stretch.stretch:active,.stretch.stretch:focus{transform:none;filter:none;
  backdrop-filter:none;will-change:auto;perspective:none}
.foot-bottom .mark{position:static;height:auto;margin-bottom:0}
.hero .eyebrow + h1{margin-top:20px}
.hero h1 + .hero-lead{margin-top:24px}
.band-tight .cta{margin-top:0}
.cta-col:hover .tlink,.cta-col:focus-within .tlink{text-decoration:underline;text-underline-offset:3px}
/* the reveal transition on rgroup children outranks the lift's own; once a card has
   arrived, its transition belongs to the hover again */
.js .rgroup.in > .lift,.js .rgroup.in > .lift-well,.js .rgroup.in > a{
  transition:transform var(--dur-lift) var(--ease-out),box-shadow var(--dur-lift) var(--ease-out),
  border-color var(--dur-lift) var(--ease-out),background var(--dur-lift) var(--ease-out)}

/* ================= figures that complete on scroll =================
   Doctrine: content arrives once, over --dur-reveal, on a decelerating curve,
   and never moves again. A chart drawing itself as it enters obeys that: the
   ring sweeps its arc, the radar grows its polygon from the centre, both once.
   Under reduced motion each renders finished, with no transition at all. */
.ring circle:nth-of-type(2){transition:stroke-dashoffset var(--dur-reveal) var(--ease-out)}
.js .figdraw .ring circle:nth-of-type(2){stroke-dashoffset:var(--sweep,0)}
.js .figdraw.in .ring circle:nth-of-type(2){stroke-dashoffset:0}
.radar .rd-data{transform-origin:250px 205px;
  transition:transform var(--dur-reveal) var(--ease-out),opacity var(--dur-reveal) var(--ease-out)}
.radar circle[stroke="var(--blue)"]{transition:opacity var(--dur-reveal) var(--ease-out)}
.js .figdraw .radar .rd-data{transform:scale(.04);opacity:0}
.js .figdraw .radar circle[stroke="var(--blue)"]{opacity:0}
.js .figdraw.in .radar .rd-data{transform:scale(1);opacity:1}
.js .figdraw.in .radar circle[stroke="var(--blue)"]{opacity:1;transition-delay:.24s}
.ring-n{transition:opacity var(--dur-reveal) var(--ease-out)}
.js .figdraw .ring-n{opacity:0}
.js .figdraw.in .ring-n{opacity:1;transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .ring circle:nth-of-type(2),.radar .rd-data,.radar circle,.ring-n{transition:none}
  .js .figdraw .ring circle:nth-of-type(2){stroke-dashoffset:0}
  .js .figdraw .radar .rd-data{transform:none;opacity:1}
  .js .figdraw .radar circle[stroke="var(--blue)"]{opacity:1}
  .js .figdraw .ring-n{opacity:1}
}

/* ================= site chrome ================= */
:root{--shadow-menu:0 18px 44px rgba(12,20,39,.10);--blue-bright:#46b9ff;
  --header-blur:blur(10px);--on-dark-link:rgba(238,242,248,.84)}

/* notification bar, variant A */
.notice{background:var(--dark);color:var(--on-dark)}
.notice[hidden]{display:none}
.notice .wrap{display:flex;align-items:center;gap:16px;padding-block:11px}
.notice-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--blue-bright);
  flex:none}
.notice p{font-size:var(--text-small);color:var(--on-dark-link);margin-right:auto}
.notice p .short{display:none}
.notice a{font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--blue-bright);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.notice a:hover{text-decoration:underline;text-underline-offset:3px}
.notice button{width:28px;height:28px;border:0;background:none;cursor:pointer;color:var(--on-dark-muted);
  font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:none}
.notice button:hover{color:#fff}
.notice :focus-visible{outline-color:var(--on-dark)}

/* header.
   padding-block is 16px because the panels anchor with calc(100% + 16px): the
   term IS the row's top padding, and the two must move together or the panel
   stops sitting flush with the header hairline. Measured 3px low at 12px. */
.site-head .nav{gap:28px;padding-block:16px}
.btn-register{padding:11px 22px}
.trigs{display:flex;align-items:center;gap:26px;align-self:stretch}
.trig{position:relative;align-self:stretch;display:flex;align-items:center}
.trig > button,.trig > a.tg{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  padding:0;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-nav);color:var(--ink);
  transition:color var(--dur-control) ease}
.trig > button::after,.trig > a.tg::after{content:"\25BE";font-size:9px;line-height:1;
  transition:transform var(--dur-control) ease}
.trig[data-open="true"] > button,.trig[data-open="true"] > a.tg{color:var(--blue)}
.trig[data-open="true"] > button::after,.trig[data-open="true"] > a.tg::after{transform:rotate(180deg)}
.trig > button:hover,.trig > a.tg:hover{color:var(--blue)}
.panel{position:absolute;top:calc(100% + 16px);left:0;z-index:30;background:#fff;
  border:1px solid var(--hairline);box-shadow:var(--shadow-menu)}
.panel[hidden]{display:none}
.panel a{display:block;padding:10px 24px;font-size:var(--text-nav);color:var(--ink);
  transition:color var(--dur-control) ease}
.panel a:hover{color:var(--blue)}
.p-products{width:264px;padding:14px 0}
.p-learn{width:264px;padding:14px 0}
.p-solutions{width:552px;padding:22px 0}
.p-solutions .cols{display:grid;grid-template-columns:1fr 1fr}
.p-solutions .cols > div + div{border-left:1px solid var(--hairline)}
.p-investors{width:340px;padding:22px 0 14px}
.glabel{padding:0 24px 6px;font-size:var(--text-eyebrow);letter-spacing:var(--text-label-ls);
  text-transform:uppercase;color:var(--muted)}
.soon-row{padding:8px 24px;display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.soon-row span:first-child{font-size:var(--text-nav);color:var(--muted);max-width:22ch;line-height:1.4}
.soon-row span:last-child{font-size:var(--text-eyebrow);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.soon-sep{margin-top:12px;padding-top:14px;border-top:1px solid var(--hairline)}
/* mega, Products only */
.p-mega{width:820px;display:grid;grid-template-columns:300px 1fr;padding:0}
.p-mega .rail{padding:14px 0;border-right:1px solid var(--hairline)}
.p-mega .rail a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 24px;transition:background var(--dur-control) ease,color var(--dur-control) ease}
.p-mega .rail a::after{content:"→";font-size:13px;color:transparent;
  transition:color var(--dur-control) ease}
.p-mega .rail a[aria-current="true"]{background:var(--well);color:var(--blue)}
.p-mega .rail a[aria-current="true"]::after{color:var(--blue)}
.p-mega .pane{padding:24px 26px 26px;display:flex;flex-direction:column;gap:18px}
/* display:flex would otherwise beat the hidden attribute and show all five panes */
.p-mega .pane[hidden]{display:none}
.p-mega figure{width:100%;box-sizing:border-box;aspect-ratio:21/9;overflow:hidden;
  background:var(--paper);border:1px solid var(--paper-shade)}
.p-mega figure img{width:100%;height:100%;object-fit:cover}
.p-mega .nm{font-family:var(--font-display);font-size:var(--text-h3-sm);font-weight:var(--weight-display);
  letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.p-mega .pane p{margin:10px 0 0;max-width:48ch;font-size:var(--text-nav);color:var(--body);
  line-height:1.6}
/* the pane title is a <p class="nm">, so the rule above was out-ranking .nm and printing the
   product name at body size in body grey. Gene, 8 September: bigger, and lit. */
.p-mega .pane p.nm{margin:0;font-family:var(--font-display);font-size:26px;
  font-weight:var(--weight-display);letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.p-mega .pane .go{font-size:var(--text-nav);font-weight:var(--weight-medium);color:var(--blue);
  padding:0}
.p-mega .pane .go:hover{text-decoration:underline;text-underline-offset:3px}
.acts{margin-left:auto;display:flex;align-items:center;gap:22px}
.act-score{display:inline-flex;align-items:center;gap:9px;font-size:var(--text-nav);
  font-weight:var(--weight-medium);color:var(--blue);white-space:nowrap}
.act-score i{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--blue);flex:none;
  display:block}
.act-score:hover{text-decoration:underline;text-underline-offset:3px}
.act-talk{font-size:var(--text-nav);font-weight:var(--weight-medium);color:var(--ink);
  white-space:nowrap;transition:color var(--dur-control) ease}
.act-talk:hover{color:var(--blue)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:1px solid var(--hairline-strong);border-radius:var(--radius-control);
  padding:0 11px;cursor:pointer}
.burger i{display:block;height:1px;background:var(--ink)}
/* The drawer: a sheet under the header, scrolling inside itself, the page locked behind it.
   Rows are 48px targets with the hairline between them and an arrow at the end, the way the
   rest of the site draws a link; the wrap keeps the page padding it had lost. */
.drawer{display:none;border-top:1px solid var(--hairline);background:#fff;
  max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.drawer[data-open="true"]{display:block;animation:drawer-in .32s var(--ease-out)}
@keyframes drawer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drawer .wrap{padding:4px var(--page-pad) 28px}
.dgroup{padding:18px 0 10px;border-bottom:1px solid var(--hairline)}
.dgroup:last-of-type{border-bottom:0}
.dlabel{display:block;font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:var(--text-label-ls);
  text-transform:uppercase;color:var(--muted);padding-bottom:4px}
a.dlabel{color:var(--blue);min-height:44px;display:flex;align-items:center}
.dgroup .links{margin-top:2px;display:flex;flex-direction:column}
.dgroup .links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:11px 0;font-size:17px;color:var(--ink);border-top:1px solid var(--hairline-card)}
.dgroup .links a::after{content:"→";color:var(--muted);font-size:15px;transition:transform var(--dur-control) ease,color var(--dur-control) ease}
.dgroup .links a:active::after{transform:translateX(4px);color:var(--blue)}
.dgroup .links .glabel + a{border-top:0}
.dgroup .links .glabel{padding:14px 0 2px;font-family:var(--font-mono);font-size:var(--text-eyebrow);
  letter-spacing:var(--text-label-ls);text-transform:uppercase;color:var(--muted)}
.dacts{display:grid;gap:10px;padding:20px 0 4px}
.dacts-top{padding:16px 0 18px;border-bottom:1px solid var(--hairline)}
.dacts .btn{width:100%;justify-content:center;min-height:48px}
.dacts .row{display:flex;gap:18px;justify-content:center;font-size:15.5px;padding-top:6px}
.dacts .row a{color:var(--blue)}
.dacts .row.quick a{color:var(--ink);font-size:14.5px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger i{transition:transform var(--dur-control) ease,opacity var(--dur-control) ease}
html.drawer-open{overflow:hidden}
.dgroup .soon-row{padding:9px 0}
.dgroup .soon-row span:first-child{font-size:15.5px}
.head-row2{display:none;align-items:center;gap:14px;border-top:1px solid var(--hairline);
  padding:4px 0 6px}
/* every small link is a 44px target on a phone: the row links, the crumbs, the text links */
.head-row2 a,.dacts .row a{display:inline-flex;align-items:center;min-height:44px}
.crumb a,.sec-head > a{display:inline-block;padding:10px 0}
@media (max-width:1080px){.tlink,.essay > a,.btaglinks a{display:inline-flex;align-items:center;min-height:44px}
  .rgraph-ctl button,.cp-panel .ctl button{min-width:44px;min-height:44px}
  input,select,textarea{font-size:16px}}
.head-row2 .sep{color:var(--muted)}
@media (max-width:1080px){
  .trigs{display:none}
  .acts .act-score,.acts .act-talk{display:none}
  .burger{display:flex}
  .head-row2{display:flex}
  .site-head .nav{gap:16px;padding-block:14px}
  .site-head{position:sticky;top:0;z-index:60;background:#fff}
  /* one bar on a phone: the announcement duplicated the header's own button and cost a
     quarter of the first screen */
  .notice{display:none}
  .site-head.scrolled .head-row2{display:none}
  .site-head.scrolled{box-shadow:0 1px 0 var(--hairline),0 8px 24px -16px rgba(12,20,39,.18)}
  .notice p .long{display:none}
  .notice p .short{display:inline}
  .notice button{width:44px;height:44px}
  .btn-register{min-height:44px}
}

/* footer */
.foot-lead{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2)}
.foot-lead a{background:var(--dark);padding:38px 36px 40px;display:block;
  transition:background var(--dur-control) ease}
/* On a dark ground the eye needs a bigger step than on a light one. The old
   #111a2e was a 1.06 ratio against the footer fill: a faint rectangle rather
   than a state. #17223c is 1.16, legible without shouting, and the cell's own
   hairline brightens with it so the edge reads as picked up. */
.foot-lead a:hover{background:#111a2e}
/* the readiness cell is the one blue surface in the footer (SiteFooter.dc.html, bundle 15) */
.foot-lead a.lead-score{background:var(--blue)}
.foot-lead a.lead-score:hover{background:#0b5cad}
.foot-lead a.lead-score .t span,.foot-lead a.lead-score .meter-top b{color:#fff}
.foot-lead a.lead-score .meter-top span,.foot-lead a.lead-score .meter-scale{color:rgba(255,255,255,.72)}
.foot-lead a.lead-score .meter-bar{background:rgba(255,255,255,.28)}
.foot-lead a.lead-score .meter-bar u{background:#fff}
.foot-lead .t{display:flex;gap:14px;align-items:baseline}
.foot-lead h2{font-family:var(--font-display);font-size:26px;font-weight:var(--weight-display);
  letter-spacing:-.015em;line-height:1.25;color:#fff}
.foot-lead .t span{font-size:18px;color:var(--blue-bright)}
.foot-lead p{margin-top:12px;max-width:44ch;font-size:16px;color:rgba(255,255,255,.8);
  line-height:1.6}
/* the readiness meter in the lead band, from SiteFooter.dc.html */
.meter{margin-top:18px;max-width:34ch}
.meter-top{display:flex;gap:12px;align-items:baseline}
.meter-top b{font-family:var(--font-display);font-size:30px;font-weight:var(--weight-display);
  letter-spacing:-.02em;line-height:1;color:var(--blue-bright)}
.meter-top span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-muted)}
.meter-bar{margin-top:12px;height:4px;background:rgba(255,255,255,.16);display:flex}
.meter-bar i{flex:70;display:block}
.meter-bar u{flex:30;background:var(--blue-bright);display:block;text-decoration:none}
.meter-scale{margin-top:8px;display:flex;justify-content:space-between;font-size:12.5px;
  color:var(--on-dark-muted)}
@media (max-width:760px){.foot-lead{grid-template-columns:1fr}}
.foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;align-items:start;
  padding-block:44px 8px}
.foot-cols .lab{font-size:var(--text-eyebrow);letter-spacing:var(--text-label-ls);
  text-transform:uppercase;color:var(--on-dark-muted)}
a.lab{color:var(--on-dark-muted)}
a.lab:hover{color:#fff}
.foot-cols .links{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.foot-cols a:not(.lab){font-size:15.5px;color:var(--on-dark-link);
  transition:color var(--dur-control) ease}
.foot-cols a:not(.lab):hover{color:#fff}
.subrule{margin-top:8px;padding-top:12px;border-top:1px solid var(--on-dark-hairline)}
@media (max-width:1000px){.foot-cols{grid-template-columns:repeat(2,1fr);gap:28px}}
@media (max-width:560px){.foot-cols{grid-template-columns:1fr}}
.foot-plinth{margin-top:44px;background:#070c16;border-top:1px solid var(--on-dark-hairline)}
.foot-plinth .wrap{padding-top:34px}
.foot-bottom{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.foot-bottom img,.foot-bottom svg{height:18px;width:auto;display:block}
.foot-bottom .grp{display:flex;gap:16px;flex-wrap:wrap}
.foot-bottom a{font-size:14.5px;color:var(--on-dark-link)}
.foot-bottom a:hover{color:#fff}
.foot-bottom .spacer{flex:1}
.foot-off{margin-top:20px;display:flex;gap:20px;flex-wrap:wrap}
.foot-disc{margin-top:26px;padding-bottom:52px;max-width:92ch;font-size:16px;
  color:rgba(255,255,255,.8);line-height:1.6}
.site-foot :focus-visible{outline-color:var(--on-dark)}