/* Shared styles for every page: tokens, base type, nav, buttons, section
   scaffolding, chips, dark sections, footer and scroll reveals. Anything only
   one page uses stays in that page's own <style> block, which loads after
   this file. */
:root{
  --paper:#FCFCFD;
  --ink:#111A2E;
  --slate:#5A6478;
  --line:#E1E4EA;
  --signal:#FF2D00;
  --signal-ink:#D42400;
  --ember:#FF7A59;
  --deep:#152038;
  --deep-line:#283858;
  --deep-slate:#8B97AD;
  /* one typeface; the two names stay so display and label roles
     remain readable in the rules */
  --display:'Public Sans',system-ui,sans-serif;
  --label:'Public Sans',system-ui,sans-serif;
  /* the grey second half of a two-tone line, and the product cards'
     flat ground */
  --mute:#666D80;   /* 5.0:1 on paper, 4.7:1 on --card: passes AA as small text */
  --card:#F2F4F7;
  --card-line:rgba(17,26,46,.08);
  --w:1120px;
  --w-hero:1280px;
  --btn-r:6px;
  --chip-r:calc(var(--btn-r) * 2.5);
  /* the nav bar is concentric with the CTA inside it: the button's radius
     plus the bar that sits around it (11px here, 7px on phones) */
  --nav-r:12px;
}
/* the condensed bar pulls its contents in towards the CTA; registering the
   paddings lets the keyframes interpolate them. Browsers without @property
   simply hold the resting 28px. */
@property --nav-pl{syntax:'<length>';inherits:true;initial-value:28px}
@property --nav-pr{syntax:'<length>';inherits:true;initial-value:28px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Public Sans',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:#FFD9D0}

h1,h2,h3{font-family:var(--display);line-height:1.06;letter-spacing:-0.03em}
h1{font-size:clamp(2.5rem,4.6vw,3.9rem);font-weight:500}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:500;letter-spacing:-.022em}
h3{font-size:1.13rem;font-weight:500;letter-spacing:-0.01em}
.red{color:var(--signal)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
/* square off the ring on plain links; buttons keep their own radius */
a:not(.btn):focus-visible,button:not(.btn):focus-visible{border-radius:4px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
.sub{color:var(--slate);max-width:580px}
.section-head .sub{max-width:none}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  max-width:100%;margin-inline:auto;
  background:rgba(252,252,253,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid transparent;border-bottom-color:var(--line);
}
/* On scroll, condense the full-width bar into a floating card whose corners
   match the buttons'. Pure CSS (scroll-driven animation); browsers without
   support keep the sticky bar. */
@supports (animation-timeline: scroll()){
  /* At rest the bar is invisible and sits straight on the hero background; the frosted
     backing arrives over the first 80px so content never slides under bare
     links, then the shape keeps condensing until 140px. */
  /* The blur is static rather than keyframed from none: Safari doesn't
     animate backdrop-filter, so on iOS it never switched on. At rest nothing
     sits under the bar but that background, so an always-on blur is invisible
     there. The keyframes only layer saturation onto it, a bonus for
     browsers that animate the property; the rest keep the plain blur. */
  nav{
    background:transparent;border-bottom-color:transparent;
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    animation:nav-veil linear both,nav-pill linear both;
    animation-timeline:scroll();
    animation-range:0 80px,0 140px;
  }
  @keyframes nav-veil{
    to{
      background:rgba(255,255,255,.55);
      backdrop-filter:blur(16px) saturate(1.5);
    }
  }
  @keyframes nav-pill{
    to{
      max-width:var(--nav-pill-w,min(var(--w),100% - 32px));
      top:10px;
      --nav-pl:20px;--nav-pr:11px;
      border-radius:var(--nav-r);
      border-color:var(--line);
      box-shadow:0 12px 32px rgba(17,26,46,.12);
    }
  }
}
.nav-in{display:flex;align-items:center;gap:34px;height:66px}
.brand{display:flex;align-items:center}
.brand svg{display:block;height:22px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.94rem;font-weight:500}
.nav-links a{position:relative;color:var(--slate);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
/* scroll-spy: the section currently in view gets an ember underline */
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  border-radius:2px;background:var(--signal);opacity:0;transition:opacity .2s;
}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{opacity:1}
.nav-cta{display:flex;align-items:center;gap:18px;margin-left:26px}
.signin{font-size:.94rem;font-weight:500;color:var(--slate);white-space:nowrap}
.signin:hover{color:var(--ink)}
.btn{
  display:inline-block;background:var(--ink);color:#fff;
  font-family:'Public Sans',sans-serif;font-weight:600;font-size:.94rem;
  padding:13px 22px;border-radius:var(--btn-r);border:0;cursor:pointer;white-space:nowrap;
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,26,46,.18)}
.btn.red-btn{background:var(--signal)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn:disabled{opacity:.6;pointer-events:none;transform:none;box-shadow:none}
/* At rest the nav runs wider than the body column, matching the homepage
   hero, so the brand lines up with the headline under it. Once it condenses
   the padding tightens: 11px off the CTA's end, the same as the bar above
   and below it, and 20px of air in front of the brand. */
nav .wrap{max-width:var(--w-hero);padding-left:var(--nav-pl);padding-right:var(--nav-pr)}
@media(max-width:820px){
  /* a 42px CTA in a 56px bar, so its corner nests in the bar's. The CTA is a
     link, which (unlike a button) doesn't centre its text in a fixed height,
     so it centres as a flex box. */
  nav{--nav-pill-w:calc(100% - 20px);--nav-r:16px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto;gap:14px}
  .nav-in{gap:16px;height:56px}
  nav .btn{display:inline-flex;align-items:center;height:42px;padding:0 18px;font-size:.88rem}
  /* Where the bar condenses into the pill, hold it at the pill's width from
     the start (at rest it is invisible, so nothing shows) and seat the CTA
     7px off the pill's end, the same as its top and bottom. Only the pill's
     top, shape and backing animate; the contents never move sideways. */
  @supports (animation-timeline: scroll()){
    nav{max-width:var(--nav-pill-w)}
    nav .wrap{padding:0 7px 0 18px}
  }
}
/* phones: the bar has room for the brand and the CTA only; Sign in stays in
   the footer */
@media(max-width:480px){.signin{display:none}}
@media(max-width:340px){nav .btn{padding:0 14px;font-size:.82rem}}

/* ---------- sections ---------- */
.section{padding:112px 0 0}
.section.dark{padding:112px 0;margin-top:112px}
.section-head{max-width:760px;margin-bottom:52px}
.section-head p{margin-top:16px}

.chip{
  font-family:var(--label);font-weight:500;font-size:.72rem;letter-spacing:0;
  border:1px solid var(--line);border-radius:var(--chip-r);padding:8px 15px;background:#fff;color:var(--ink);
}

/* ---------- dark sections ---------- */
.dark{background:var(--deep);color:#fff}
.dark .sub{color:var(--deep-slate)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:96px 0 40px;background:var(--paper)}
/* Oversized wordmark: the full content width, ghosted behind the link columns
   and centred on them. Ink rather than signal -- at this opacity the orange
   goes peach and fights the CTA red above it. */
.foot-top{position:relative}
.foot-mark{
  position:absolute;left:0;right:0;top:50%;translate:0 -50%;
  pointer-events:none;
  opacity:.07;--logo-mark:var(--ink);--logo-word:var(--ink);
}
.foot-mark svg{display:block;width:100%;height:auto}
/* the links sit above the watermark, which is positioned and would otherwise
   paint over them */
.foot-cols{position:relative;display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:32px 40px}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-cols h4{font-weight:500;font-size:13px;color:var(--ink);margin-bottom:16px}
.foot-cols ul{list-style:none;display:grid;gap:10px;font-size:.95rem}
.foot-cols a,.foot-link-btn{color:var(--ink);transition:color .15s}
.foot-cols a:hover,.foot-link-btn:hover{color:var(--slate)}
.foot-link-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.foot-note{font-size:.95rem;color:var(--slate);max-width:300px}
@media(max-width:760px){.foot-note{grid-column:1/-1}}
.foot-base{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.legal{font-size:.8rem;color:var(--slate);line-height:1.7}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
/* Where scroll-driven animations exist, tie each reveal to the element's
   own viewport entry instead of the one-shot JS class. */
@supports (animation-timeline: view()){
  .rv{
    transition:none;
    animation:rv-in ease both;
    animation-timeline:view();
    /* end the fade 25% into the cover span (element height + viewport), so
       short blocks get a perceptible fade distance, not just their own height */
    animation-range:entry 0% cover 25%;
  }
  @keyframes rv-in{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }
}