/* ============================================================
   OpenPulse site styles
   ============================================================ */

:root{
  --ink:        #101f3c;
  --ink-2:      #3f4b64;
  --ink-3:      #5b6678;
  --red:        #cf3826;
  --paper:      #f4f3f1;
  --paper-2:    #eceae4;
  --white:      #fff;
  --line:       rgba(16,31,60,.13);
  --line-soft:  rgba(16,31,60,.08);

  --blue:       #3c6ea6;
  --blue-tint:  #dfe7f3;
  --cream:      #e9e3d6;
  --night:      #0a0c0f;

  /* --shell resolves `100%` against the element's own containing block, so it
     is only safe as a `width` on a full-bleed element. Use --edge (which is
     purely viewport-relative) to line inner content up with the shell. */
  --shell:  min(1280px, 100% - 2 * var(--gutter));
  --edge:   max(var(--gutter), calc((100vw - 1280px) / 2));
  --gutter: 24px;

  --f-display: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --f-ui: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  /* Type scale. Five steps, used everywhere. Sizes were drifting to ten
     distinct values chosen per section, which reads as accumulation rather
     than hierarchy. */
  --t-hero:    clamp(40px, 7vw, 82px);
  --t-section: clamp(30px, 4.2vw, 50px);
  --t-sub:     clamp(19px, 1.9vw, 24px);
  --t-body:    15px;
  --t-label:   11px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --hdr: 68px;
}

@media (min-width: 700px){ :root{ --gutter: 40px; --hdr: 76px; } }
@media (min-width:1100px){ :root{ --gutter: 56px; } }

/* keep content clear of rounded corners and the home indicator in landscape */
@supports (padding: max(0px)){
  :root{ --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  @media (min-width: 700px){
    :root{ --gutter: max(40px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  }
  @media (min-width:1100px){
    :root{ --gutter: max(56px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  }
  .site-footer{ padding-bottom:max(clamp(44px,5vw,64px), env(safe-area-inset-bottom)); }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; -webkit-tap-highlight-color:rgba(16,31,60,.08); }
button{ font:inherit; color:inherit; -webkit-tap-highlight-color:rgba(16,31,60,.08); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:6px;
  font-size:14px; text-decoration:none; transition:top .18s var(--ease);
}
.skip:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px; }

/* ---------- type primitives ---------- */

.display{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.0;
  letter-spacing:-.04em;
  margin:0;
  font-variant-ligatures:common-ligatures;
}
.dot{ color:var(--red); }

.kicker{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 18px;
}
.kicker-light{ color:rgba(255,255,255,.55); }

.muted{ color:var(--ink-2); }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease),
                            border-color .2s var(--ease), transform .2s var(--ease);
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:#b52e1e; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(16,31,60,.04); }

/* ============================================================
   header
   ============================================================ */

.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line-soft); background:color-mix(in srgb, var(--paper) 94%, transparent); }

.header-inner{
  width:var(--shell); margin-inline:auto;
  height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.wordmark{
  font-size:19px; font-weight:600; letter-spacing:-.025em;
  text-decoration:none; color:var(--ink); flex:none;
  display:inline-flex; align-items:center; min-height:44px;   /* touch target */
}

/* slot indicators */
.slots{ display:none; position:relative; }
@media (min-width: 940px){ .slots{ display:block; } }

.slots-list{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }

.slot a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); transition:color .2s var(--ease);
}
.slot a:hover{ color:var(--ink); }

.slot-dot{
  width:15px; height:15px; border-radius:50%;
  border:1.5px solid rgba(16,31,60,.28);
  position:relative; flex:none;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.slot-dot::after{
  content:""; position:absolute; inset:2.5px; border-radius:50%;
  background:var(--fill, var(--ink)); transform:scale(0); opacity:0;
  transition:transform .34s var(--ease), opacity .2s var(--ease);
}
.slot.is-filled .slot-dot{ border-color:var(--fill, var(--ink)); }
.slot.is-filled .slot-dot::after{ transform:scale(1); opacity:1; }
.slot.is-filled a{ color:var(--ink); }

.slot[data-slot="body1"]{ --fill:var(--blue); }
.slot[data-slot="body2"]{ --fill:#b8892f; }
.slot[data-slot="env"]  { --fill:#6f7f6a; }

.slots-status{
  position:absolute; left:0; right:0; top:calc(100% + 2px);
  margin:0; text-align:center;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  opacity:0; transition:opacity .3s var(--ease);
}
.slots-status.is-on{ opacity:.8; }

/* menu button */
.menu-btn{
  background:none; border:0; cursor:pointer; flex:none;
  display:grid; place-items:center;
  width:44px; height:44px; margin-right:-11px;   /* 44px minimum touch target */
}
.menu-bars{ display:grid; gap:5px; width:22px; }
.menu-bars i{ height:1.5px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.menu-btn[aria-expanded="true"] .menu-bars i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

body.menu-open{ overflow:hidden; }

.menu{
  position:fixed; inset:var(--hdr) 0 auto 0; z-index:49;
  background:var(--paper); border-bottom:1px solid var(--line-soft);
  animation:menuIn .32s var(--ease);
  /* six items do not fit a landscape phone, so let the panel scroll */
  max-height:calc(100dvh - var(--hdr));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
@supports not (height: 100dvh){
  .menu{ max-height:calc(100vh - var(--hdr)); }
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-8px); } }

.menu-inner{ width:var(--shell); margin-inline:auto; padding:22px 0 34px; }
.menu-inner ul{ list-style:none; margin:0; padding:0; }
.menu-inner li + li{ border-top:1px solid var(--line-soft); }
.menu-inner a{
  display:flex; align-items:baseline; gap:16px; padding:14px 0; text-decoration:none;
  font-family:var(--f-display); font-size:clamp(24px,4vw,34px); line-height:1.1;
  transition:color .2s var(--ease), padding-left .25s var(--ease);
}
.menu-inner a:hover{ color:var(--red); padding-left:8px; }
.menu-inner a span{
  font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:.14em;
  color:var(--ink-3);
}

/* ============================================================
   hero
   ============================================================ */

/* #f5f5f5 is what the hero clip's flat backdrop paints as in the browser,
   so the video and the still both sit on the page with no visible edge.
   Engines differ by a level or two on YUV range, hence the mask below. */
.hero{ background:#f5f5f5; padding:clamp(40px,7vw,84px) 0 clamp(48px,7vw,96px); overflow:hidden; }

.hero-inner{
  width:var(--shell); margin-inline:auto;
  display:grid; gap:clamp(24px,4vw,40px); align-items:center;
}
@media (min-width: 860px){
  .hero-inner{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,4vw,56px); }
}

.hero h1{ font-size:var(--t-hero); }

.hero-config{
  margin:clamp(20px,2.6vw,28px) 0 0;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue);
}
.hero-config span{ opacity:.45; margin:0 6px; }

.hero-sub{
  margin:18px 0 0; max-width:44ch;
  font-size:var(--t-body); color:var(--ink-2); line-height:1.62;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* The box itself carries the size cap, so the absolutely positioned canvas
   at inset:0 lands exactly on the still instead of stretching to the column. */
.hero-media{ position:relative; width:100%; max-width:560px; margin-inline:auto; }
.hero-media img,
.hero-media video{
  width:100%; display:block;
  animation:floatIn 1s var(--ease) both;
  /* the band clears this by ~60px on every side; the fade only ever eats
     flat backdrop, and hides any per-engine YUV range difference */
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 86%, transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 86%, transparent 100%);
}
@keyframes floatIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } }

/* The canvas takes the still's place once a real frame has been painted.
   The video stays in the box, transparent, purely as the decoder: iOS will
   not decode an element that is detached or display:none. */
.has-canvas .clip-still{ visibility:hidden; }

.clip-source{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none; animation:none;
}
.clip-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  animation:none;
  /* same edge fade as the still, so the swap is seamless */
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 86%, transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 86%, transparent 100%);
}

/* Mobile hero: lift the product above the supporting copy so it lands in the
   first screen, and let the buttons share one full-width column instead of
   stacking at two different ragged widths. `display:contents` promotes the
   copy's children to grid items so they can be reordered around the media.
   Must sit after the .hero-media rules above to win on source order. */
@media (max-width: 859px){
  .hero-inner{ gap:20px; }
  .hero-copy{ display:contents; }
  .hero h1       { order:1; }
  .hero-config   { order:2; margin:-6px 0 0; }
  /* small enough that the paragraph and primary CTA stay one short scroll away */
  .hero-media    { order:3; margin:2px auto; max-width:255px; }
  .hero-sub      { order:4; margin:0; max-width:none; }
  .hero-actions  { order:5; margin:2px 0 0; gap:10px; }
  .hero-actions .btn{ flex:1 1 100%; }
}

/* ============================================================
   sensor pucks
   ============================================================ */

.sensors{ display:grid; grid-template-columns:1fr; }
@media (min-width: 760px){ .sensors{ grid-template-columns:repeat(3,1fr); } }

.puck-panel{
  padding:clamp(30px,3.4vw,44px) clamp(22px,2.6vw,36px) clamp(26px,3vw,38px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.4vw,26px);
  text-align:center;
  position:relative; isolation:isolate;
}
/* full-height panels only once they sit side by side */
@media (min-width: 760px){
  .puck-panel{ min-height:min(62vh,470px); }
}
/* --panel-bg lets the "loaded" button knock its label and dot back out
   in the panel's own colour, whatever that colour is. */
.is-ppg{ background:var(--blue);    color:#fff;     --panel-bg:var(--blue); }
.is-eda{ background:var(--paper-2); color:var(--ink); --panel-bg:var(--paper-2); }
.is-env{ background:var(--cream);   color:#4a4335;  --panel-bg:var(--cream); }

.puck-img{ flex:1; width:100%; display:grid; place-items:center; padding:4px; }
.puck-img img{
  width:min(80%,268px);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.18));
  transition:transform .55s var(--ease);
}
.puck-panel:hover .puck-img img{ transform:translateY(-6px) scale(1.03); }

.puck-foot{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.puck-desc{ margin:0; font-size:14px; line-height:1.55; opacity:.82; max-width:32ch; }

.puck-btn{
  cursor:pointer;
  background:transparent; border:1px solid currentColor; border-radius:2px;
  padding:11px 18px 11px 34px; position:relative; min-height:46px;
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  opacity:.7; transition:opacity .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.puck-btn::before{
  content:""; position:absolute; left:15px; top:50%; margin-top:-5px;
  width:9px; height:9px; border-radius:50%; border:1.5px solid currentColor;
  transition:background .25s var(--ease);
}
.puck-btn:hover{ opacity:1; }
.puck-panel.is-loaded .puck-btn{ opacity:1; background:currentColor; }
.puck-panel.is-loaded .puck-btn-txt{ color:var(--panel-bg); }
.puck-panel.is-loaded .puck-btn::before{ background:var(--panel-bg); border-color:var(--panel-bg); }

/* ============================================================
   the core
   ============================================================ */

.core{ padding:clamp(52px,6vw,88px) 0 clamp(48px,5.5vw,76px); }

.core-inner{
  width:var(--shell); margin-inline:auto;
  display:grid; gap:clamp(32px,4vw,56px); align-items:center;
}
@media (min-width: 900px){ .core-inner{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }

.core-copy h2{ font-size:var(--t-section); margin-bottom:26px; }
.core-copy p{ margin:0 0 16px; max-width:46ch; font-size:var(--t-body); }

.spec{
  display:grid; gap:0; margin:32px 0 0; padding:0;
  border-top:1px solid var(--line);
}
.spec > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.spec dt{ font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.spec dd{ margin:0; font-family:var(--f-display); font-size:19px; font-weight:500; letter-spacing:-.01em; }

.core-media{ margin:0; }
.core-media img{
  width:100%; border-radius:4px;
  box-shadow:0 30px 70px -30px rgba(16,31,60,.4);
}

/* ============================================================
   connector detail (dark band)
   ============================================================ */

.detail{ background:var(--night); color:#fff; padding:clamp(48px,5.5vw,80px) 0; }

.detail-inner{
  width:var(--shell); margin-inline:auto;
  display:grid; gap:clamp(32px,4.5vw,64px); align-items:center;
}
@media (min-width: 900px){
  .detail-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}

.detail-copy h2{ font-size:var(--t-section); max-width:15ch; }
.detail-copy > p{ margin:22px 0 0; max-width:46ch; color:rgba(255,255,255,.7); font-size:var(--t-body); }

/* the macro is a lit studio shot: give it its own frame rather than
   bleeding it into the page, so the gradient reads as lighting */
.detail-media{ margin:0; }
.detail-media img{
  width:100%; border-radius:4px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}

.spec-dark{ border-top-color:rgba(255,255,255,.22); margin-top:36px; }
.spec-dark > div{ border-bottom-color:rgba(255,255,255,.1); }
.spec-dark dt{ color:rgba(255,255,255,.5); }
.spec-dark dd{ color:#fff; }

/* ============================================================
   data path
   ============================================================ */

.flow{ background:var(--blue-tint); padding:clamp(52px,6.5vw,88px) 0; }
.flow-inner{ width:var(--shell); margin-inline:auto; }

.flow-head{ margin-bottom:clamp(40px,5vw,64px); }
.flow-h{ font-size:var(--t-section); }
.flow-h .arrow{ color:var(--blue); margin:0 .12em; font-family:var(--f-ui); font-weight:400; }

/* --- signal path -------------------------------------------------------
   Four stages sitting on one continuous rail. The rail is drawn per stage
   and clipped back at the two ends so the line starts and stops on a node
   rather than running off the edge. A pulse travels it left to right.     */

.path{
  --path-gap:clamp(20px,3vw,40px);
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; row-gap:38px; column-gap:var(--path-gap);
  grid-template-columns:1fr;
}
@media (min-width: 620px){ .path{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 940px){ .path{ grid-template-columns:repeat(4,1fr); } }

.path-stage{ position:relative; padding-top:34px; }

.path-rail{ position:absolute; inset:0 0 auto; height:9px; }
/* bleed the line half a gap either side so it crosses the column gutters
   and reads as one continuous rail rather than four stubs */
.path-rail::before{
  content:""; position:absolute; top:50%; height:1px; transform:translateY(-.5px);
  left:calc(var(--path-gap) / -2); right:calc(var(--path-gap) / -2);
  background:rgba(60,110,166,.42);
}
/* the rail only exists between the first and last node */
.path-stage:first-child .path-rail::before{ left:50%; }
.path-stage:last-child  .path-rail::before{ right:50%; }

/* below four columns a centred node would float over left-aligned text,
   so the rail drops out and the 01..04 numbering carries the sequence */
@media (max-width: 939px){
  .path-rail{ display:none; }
  .path-stage{ padding-top:0; }
}

.path-node{
  position:absolute; left:50%; top:50%; width:10px; height:10px;
  margin:-5px 0 0 -5px; border-radius:50%;
  background:var(--blue-tint); border:1.5px solid var(--blue);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.path-stage:hover .path-node{ background:var(--blue); transform:scale(1.25); }

/* pulse: rides the rail from the first node to the last. Sized against the
   container (not the sliver itself) so it spans whatever the width is. */
@media (min-width: 940px){
  .path::after{
    content:""; position:absolute; top:4px; left:12.5%; right:12.5%;
    height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--blue), transparent);
    background-size:130px 100%; background-repeat:no-repeat;
    animation:pathPulse 4.6s linear infinite;
  }
  @keyframes pathPulse{
    0%   { background-position:-130px 0;            opacity:0; }
    10%  {                                          opacity:1; }
    90%  {                                          opacity:1; }
    100% { background-position:calc(100% + 130px) 0; opacity:0; }
  }
}

.path-stage h3{
  margin:0 0 10px; font-family:var(--f-display); font-weight:500;
  font-size:var(--t-sub); letter-spacing:-.01em; line-height:1.1;
}
.path-desc{ margin:0 0 18px; font-size:14.5px; color:var(--ink-2); max-width:26ch; }
.path-spec{
  margin:0; padding-top:12px; border-top:1px solid rgba(60,110,166,.22);
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}

.flow-note{
  display:flex; align-items:center; gap:14px;
  margin:clamp(34px,4vw,52px) 0 0; padding-top:20px;
  border-top:1px solid rgba(16,31,60,.12);
  font-size:13.5px; color:var(--ink-2);
}
.flow-note .rule{ width:22px; height:1.5px; background:var(--red); flex:none; }

/* ============================================================
   example configurations
   ============================================================ */

.uses{ padding:clamp(48px,5.5vw,80px) 0; }
.uses-h{
  width:var(--shell); margin:0 auto clamp(28px,3.4vw,44px);
  font-family:var(--f-display); font-weight:500; font-size:var(--t-sub);
  letter-spacing:-.01em;
}
.uses-h span{ color:var(--ink-3); margin:0 4px; }

.use-grid{
  width:var(--shell); margin-inline:auto;
  display:grid; gap:clamp(26px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}

.use-media{ position:relative; margin-bottom:34px; }
.use-media img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  clip-path:inset(0 round 3px);   /* clips the zoom without hiding the badge */
  transition:transform .6s var(--ease);
}
.use:hover .use-media img{ transform:scale(1.035); }

.use-badge{
  position:absolute; left:20px; bottom:-26px;
  width:54px; height:54px; border-radius:50%;
  background:#fff; color:var(--ink);
  display:grid; place-items:center;
  box-shadow:0 10px 24px -10px rgba(16,31,60,.4);
}
.use-badge svg{ width:24px; height:24px; }

.use h3{ margin:0 0 12px; font-family:var(--f-display); font-weight:500; font-size:var(--t-sub); letter-spacing:-.01em; }
.use-rule{ display:block; width:34px; height:2px; background:var(--blue); margin-bottom:14px; }
.use p{ margin:0; font-size:14.5px; color:var(--ink-2); max-width:34ch; }

/* ============================================================
   team
   ============================================================ */

.team{
  background:var(--paper-2);
  display:grid; align-items:center;
}
@media (min-width: 880px){
  .team{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); }
}

.team-copy{
  padding:clamp(48px,6vw,80px) var(--gutter);
}
@media (min-width: 880px){
  .team-copy{ padding-left:var(--edge); padding-right:clamp(28px,3vw,48px); }
}
.team-copy h2{ font-size:var(--t-section); }
.team-copy p{ margin:24px 0 0; color:var(--ink-2); font-size:var(--t-body); max-width:38ch; }

.team-media{ margin:0; height:100%; }
.team-media img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 24%;
  min-height:clamp(300px,48vw,640px);
}

/* ============================================================
   contact
   ============================================================ */

.contact{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--paper) 0%, #eeece7 100%);
  padding:clamp(52px,6vw,84px) 0 clamp(56px,7vw,92px);
}
.contact-bg{
  position:absolute; left:50%; top:-9%; transform:translateX(-50%);
  width:min(1240px,150%); opacity:.07; pointer-events:none;
  filter:grayscale(.55);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
}

.contact-inner{
  position:relative; z-index:1;
  width:var(--shell); margin-inline:auto;
  display:grid; gap:clamp(36px,4.5vw,64px);
}
@media (min-width: 900px){ .contact-inner{ grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); } }

.contact-copy h2{ font-size:var(--t-section); max-width:13ch; }
.contact-lede{ margin:22px 0 0; color:var(--ink-2); max-width:38ch; font-size:var(--t-body); }

.config-readout{
  margin-top:34px; padding:20px 22px;
  background:rgba(255,255,255,.62); border:1px solid var(--line-soft); border-radius:4px;
  backdrop-filter:blur(6px);
}
.config-label{
  margin:0 0 12px; font-size:10.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}
.config-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.config-list li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  font-size:13px; padding-bottom:8px; border-bottom:1px solid var(--line-soft);
}
.config-list li:last-child{ border-bottom:0; padding-bottom:0; }
.config-list b{ font-weight:600; letter-spacing:.02em; }
.config-list span{ color:var(--ink-3); font-variant-numeric:tabular-nums; transition:color .25s var(--ease); }
.config-list li.is-set span{ color:var(--red); font-weight:600; }
.config-hint{ margin:14px 0 0; font-size:12px; color:var(--ink-3); }
.config-hint a{ color:var(--ink-2); }

/* form */
.contact-form{
  display:grid; gap:20px 22px;
  grid-template-columns:1fr;
  align-content:start;
}
@media (min-width: 560px){ .contact-form{ grid-template-columns:1fr 1fr; } }
.field-wide{ grid-column:1 / -1; }

.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label{
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.field input, .field textarea{
  font:inherit; font-size:15px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:9px 0; border-radius:0; width:100%;
  transition:border-color .2s var(--ease);
  resize:vertical;
}
/* iOS Safari zooms the whole page when a focused control is under 16px */
@media (max-width: 700px){
  .field input, .field textarea{ font-size:16px; padding:12px 0; }
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(16,31,60,.32); }
.field input:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--ink); }
.field.is-invalid input, .field.is-invalid textarea{ border-bottom-color:var(--red); }

.err{ margin:0; font-size:12px; color:var(--red); min-height:0; }
.err:empty{ display:none; }

.form-foot{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
  margin-top:6px;
}
.form-note{ margin:0; font-size:12.5px; color:var(--ink-3); }
@media (max-width: 559px){
  .form-foot .btn{ width:100%; }
  .form-note{ text-align:center; width:100%; }
}

.form-success{
  grid-column:1 / -1; margin:0; padding:16px 18px;
  background:rgba(60,110,166,.1); border-left:2px solid var(--blue); border-radius:2px;
  font-size:14.5px; color:var(--ink);
}

/* ============================================================
   footer
   ============================================================ */

.site-footer{ background:var(--ink); color:rgba(255,255,255,.68); padding:clamp(44px,5vw,64px) 0; }
.footer-inner{
  width:var(--shell); margin-inline:auto;
  display:grid; gap:14px;
}
@media (min-width: 780px){
  .footer-inner{ grid-template-columns:auto 1fr auto; align-items:center; gap:16px 40px; }
  .footer-meta{ grid-column:1 / -1; }
}
.site-footer .wordmark{ color:#fff; }
.footer-line{ margin:0; font-size:13.5px; max-width:44ch; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:0 22px; margin:-10px 0; }
.footer-nav a{
  display:inline-flex; align-items:center; min-height:44px;   /* touch target */
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:rgba(255,255,255,.6); transition:color .2s var(--ease);
}
.footer-nav a:hover{ color:#fff; }
.footer-meta{
  margin:14px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12px; color:rgba(255,255,255,.42);
}

/* ============================================================
   scroll reveal
   ============================================================ */

/* Scoped to .js so that if the script never boots the content is simply
   visible rather than a page of invisible sections. The <head> sets the
   class and withdraws it if main.js fails to check in. */
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-media img{ animation:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   the problem
   ============================================================ */

.problem{ background:var(--paper-2); padding:clamp(48px,5.5vw,80px) 0; }
.problem-inner{ width:var(--shell); margin-inline:auto; }
.problem-head{ margin-bottom:clamp(34px,4.5vw,56px); }
.problem-head h2{ font-size:var(--t-section); }

.problem-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(26px,3vw,40px);
  grid-template-columns:1fr;
}
@media (min-width: 760px){ .problem-list{ grid-template-columns:repeat(3,1fr); } }

.problem-opt{ padding-top:20px; border-top:1px solid rgba(16,31,60,.18); }
.problem-opt h3{
  margin:0 0 12px; font-family:var(--f-display); font-weight:500;
  font-size:var(--t-sub); letter-spacing:-.01em; line-height:1.15;
}
.problem-opt p{ margin:0; font-size:14.5px; color:var(--ink-2); max-width:34ch; }

/* the third option is ours: mark it without shouting */
.problem-opt.is-us{ border-top-color:var(--red); }
/* ============================================================
   what you get out
   ============================================================ */

.open{ padding:clamp(52px,6vw,84px) 0; }
.open-inner{
  width:var(--shell); margin-inline:auto;
  display:grid; gap:clamp(34px,4.5vw,64px);
}
@media (min-width: 900px){ .open-inner{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }

.open-head h2{ font-size:var(--t-section); }
.open-head p{ margin:24px 0 0; color:var(--ink-2); max-width:38ch; font-size:var(--t-body); }

.open-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(22px,2.6vw,32px);
  grid-template-columns:1fr;
}
@media (min-width: 620px){ .open-list{ grid-template-columns:repeat(2,1fr); } }

.open-list li{ padding-top:18px; border-top:1px solid var(--line-soft); }
.open-list h3{
  margin:0 0 10px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.open-list p{ margin:0; font-size:14.5px; color:var(--ink-2); }

/* ============================================================
   build status
   ============================================================ */

.status{ background:var(--paper-2); padding:clamp(48px,5.5vw,80px) 0; }
.status-inner{ width:var(--shell); margin-inline:auto; }
.status-head{ margin-bottom:clamp(34px,4.5vw,56px); max-width:52ch; }
.status-head h2{ font-size:var(--t-section); }
.status-head p{ margin:22px 0 0; color:var(--ink-2); font-size:var(--t-body); }

.status-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(24px,3vw,32px);
  grid-template-columns:1fr;
}
@media (min-width: 820px){ .status-list{ grid-template-columns:repeat(3,1fr); } }

.status-item{ padding-top:20px; border-top:2px solid var(--blue); }
.status-item.is-now { border-top-color:var(--red); }
.status-item.is-next{ border-top-color:rgba(16,31,60,.22); }

.status-tag{
  display:inline-block; margin-bottom:14px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue);
}
.status-item.is-now  .status-tag{ color:var(--red); }
.status-item.is-next .status-tag{ color:var(--ink-3); }

.status-item h3{
  margin:0 0 12px; font-family:var(--f-display); font-weight:500;
  font-size:var(--t-sub); letter-spacing:-.01em; line-height:1.15;
}
.status-item p{ margin:0; font-size:14.5px; color:var(--ink-2); }

.status-note{
  display:flex; align-items:flex-start; gap:14px;
  margin:clamp(32px,4vw,48px) 0 0; padding-top:20px;
  border-top:1px solid rgba(16,31,60,.12);
  font-size:13.5px; color:var(--ink-2); max-width:62ch;
}
.status-note .rule{ width:22px; height:1.5px; background:var(--red); flex:none; margin-top:9px; }

/* ============================================================
   recognition
   ============================================================ */

.traction{ background:var(--paper-2); padding:clamp(40px,5vw,64px) 0; }
.traction-inner{ width:var(--shell); margin-inline:auto; }
.traction-inner .kicker{ margin-bottom:22px; }

.traction-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px clamp(24px,4vw,56px);
  grid-template-columns:1fr;
}
@media (min-width: 660px){ .traction-list{ grid-template-columns:repeat(3,1fr); } }

.traction-list li{
  display:flex; flex-direction:column; gap:6px;
  padding-left:16px; border-left:2px solid var(--red);
}
.traction-list b{
  font-family:var(--f-display); font-weight:500; font-size:var(--t-sub);
  letter-spacing:-.01em; line-height:1;
}
.traction-list span{ font-size:13px; color:var(--ink-2); }

/* ============================================================
   what happens next (contact)
   ============================================================ */

.next-steps{
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; gap:12px;
}
.next-steps li{
  display:flex; gap:14px; align-items:baseline;
  font-size:14.5px; color:var(--ink-2);
}

/* founders */
.founders{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:12px;
}
.founders li{
  display:flex; flex-direction:column; gap:2px;
  padding-left:14px; border-left:2px solid var(--blue);
}
.founders b{ font-size:15px; font-weight:600; letter-spacing:-.005em; }
.founders span{ font-size:12px; letter-spacing:.03em; color:var(--ink-3); }
.team-note{ margin:22px 0 0; font-size:13px; color:var(--ink-3); max-width:34ch; }

/* direct contact address: the path that works with no JS and no backend */
.contact-direct{
  margin:16px 0 0; font-size:14.5px; color:var(--ink-2);
}
.contact-direct a{
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line);
  transition:text-decoration-color .2s var(--ease);
}
.contact-direct a:hover{ text-decoration-color:var(--red); }

.footer-mail{ margin:0; }
.footer-mail a{
  display:inline-flex; align-items:center; min-height:44px;   /* standalone: give it a target */
  font-size:13.5px; color:#fff; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35);
  transition:text-decoration-color .2s var(--ease);
}
.footer-mail a:hover{ text-decoration-color:#fff; }

/* exploded view: portrait clip in its own framed panel. Unlike the hero it
   sits on a full studio scene, so it is contained rather than blended and
   takes no edge mask. */
.core-media{ position:relative; }
.core-media .clip-still,
.core-media .clip-canvas{
  border-radius:4px;
  -webkit-mask-image:none; mask-image:none;
}
.core-media .clip-source{ border-radius:4px; }
@media (min-width: 900px){
  /* width:100% is required, not decorative: auto inline margins turn a grid
     item into shrink-to-fit, and the only in-flow child is a lazy image, so
     the panel would collapse to zero before that image loads. */
  .core-media{ width:100%; max-width:440px; margin-inline:auto; }
}

/* ---------- logo lockup ---------- */
.wordmark{ gap:9px; }
.wordmark .mark{ width:22px; height:22px; flex:none; display:block; }
.wordmark span{ letter-spacing:-.02em; }
.site-footer .wordmark .mark path[stroke="#101f3c"]{ stroke:#fff; }
.site-footer .wordmark .mark circle[fill="#101f3c"]{ fill:#fff; }

/* ---------- puck header, name over state ---------- */
.puck-name{
  margin:0; font-size:12.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
}
.puck-state{
  margin:6px 0 0; font-size:10.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; opacity:.6;
}

/* ---------- problem: verbs instead of decorative numbering ---------- */
.problem-tag{
  display:block; margin-bottom:14px;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.problem-opt.is-us .problem-tag{ color:var(--red); }

/* ---------- next steps: a rule per step rather than a number ---------- */
.next-steps li{ position:relative; padding-left:30px; }
.next-steps li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:18px; height:1.5px; background:var(--red);
}

/* ============================================================
   legal pages
   ============================================================ */

.legal{ padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px); }
.legal-inner{ width:min(760px, 100% - 2 * var(--gutter)); margin-inline:auto; }
.legal h1{ font-size:var(--t-section); }
.legal-lede{ margin:22px 0 0; color:var(--ink-2); font-size:var(--t-body); max-width:52ch; }

.legal section{ margin-top:clamp(34px,4vw,52px); }
.legal h2{
  margin:0 0 14px; font-size:15px; font-weight:600;
  letter-spacing:.01em; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.legal h3{ margin:26px 0 10px; font-size:13.5px; font-weight:600; letter-spacing:.01em; }
.legal p{ margin:0 0 14px; font-size:15px; line-height:1.7; color:var(--ink-2); }
.legal p strong{ color:var(--ink); font-weight:600; }
.legal ul{ margin:0 0 14px; padding-left:20px; }
.legal li{ font-size:15px; line-height:1.7; color:var(--ink-2); margin-bottom:5px; }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line); transition:text-decoration-color .2s var(--ease); }
.legal a:hover{ text-decoration-color:var(--red); }

.legal-note{
  padding:14px 16px; background:var(--paper-2); border-left:2px solid var(--blue);
  border-radius:2px; font-size:14px !important;
}
.legal-rule{ border:0; border-top:1px solid var(--line); margin:clamp(40px,5vw,64px) 0 0; }
.legal-updated{ margin-top:36px; font-size:12.5px; color:var(--ink-3); }

.legal-back{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-3);
  display:inline-flex; align-items:center; min-height:44px;
}
.legal-back:hover{ color:var(--ink); }

/* ---------- language switch ---------- */
.lang{
  display:flex; align-items:center; gap:2px; flex:none;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; min-height:44px; text-decoration:none; color:var(--ink-3);
  transition:color .2s var(--ease);
}
.lang a:hover{ color:var(--ink); }
.lang a[aria-current="true"]{ color:var(--ink); }
.lang span{ color:var(--line); }
.site-footer .lang a{ color:rgba(255,255,255,.55); }
.site-footer .lang a[aria-current="true"],
.site-footer .lang a:hover{ color:#fff; }
.site-footer .lang span{ color:rgba(255,255,255,.25); }

/* ============================================================
   persistent call to action
   ============================================================ */

/* Hidden until past the hero: before that the hero's own buttons are on
   screen, and two competing CTAs in view at once is noise. */
.header-cta{
  display:none; padding:10px 18px; font-size:10.5px; flex:none;
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.site-header.is-past-hero .header-cta{ opacity:1; transform:none; }
@media (min-width: 620px){ .header-cta{ display:inline-flex; } }

/* ---------- mid-page CTA ---------- */
.midcta{ background:var(--ink); color:#fff; padding:clamp(48px,5.5vw,76px) 0; }
.midcta-inner{ width:var(--shell); margin-inline:auto; max-width:none; }
.midcta .kicker{ color:rgba(255,255,255,.5); }
.midcta h2{ font-size:var(--t-section); max-width:18ch; }
.midcta p{
  margin:20px 0 28px; max-width:46ch;
  font-size:var(--t-body); color:rgba(255,255,255,.72);
}

/* ---------- signal path lede ---------- */
.flow-lede{
  margin:20px 0 0; max-width:62ch;
  font-size:var(--t-body); color:var(--ink-2);
}
.flow .open-list{ margin-top:clamp(34px,4vw,52px); }

/* ============================================================
   configurator feedback on small screens
   ============================================================ */

/* The slot indicators used to vanish below 940px, which left the whole
   configurator with no visible payoff on a phone: tapping a puck changed a
   button label and nothing else. Below 940px they stay, as dots only. */
@media (max-width: 939px){
  .slots{ display:block; }
  .slots-list{ gap:10px; }
  .slot-name{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .slot a{ gap:0; }
  .slot-dot{ width:13px; height:13px; }
  .slots-status{ display:none; }
}
@media (max-width: 420px){
  .slots-list{ gap:8px; }
  .header-inner{ gap:12px; }
}

/* On phones the header cannot carry wordmark, slot dots, language switch,
   CTA and menu button at once. The language switch moves into the menu, which
   frees the CTA to stay visible: without it a mobile reader has no way to act
   for roughly 9,000px between the hero and the mid-page band. */
@media (max-width: 619px){
  .lang{ display:none; }
  .header-cta{ display:inline-flex; padding:9px 14px; font-size:10px; letter-spacing:.08em; }
}
@media (min-width: 620px){
  .menu-lang{ display:none; }
}
.menu-lang a{ font-family:var(--f-ui) !important; font-size:12px !important;
  letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--ink-3); }
.menu-lang a:hover{ color:var(--red); }

/* Two dark fields, one colour: the interface band and the CTA band both sit on
   --ink rather than introducing a sixth background. */
.detail{ background:var(--ink); }

/* At 390px the header carried 385px of children in a 342px bar and pushed the
   menu button off screen. The wordmark text is the one element the mark can
   stand in for, so below 620px only the mark shows. */
@media (max-width: 619px){
  .wordmark span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .wordmark .mark{ width:26px; height:26px; }
}