/*
  Signal marketing site (index.html). The fonts are declared in css/fonts.css.
  Values come from the design handoff's inline styles. css/style.css is the old
  stylesheet, still used by privacy-policy.html and terms-of-service.html.

  Breakpoints:
    1280px and up   as designed
    1100 to 1279px  desktop layout, hero diagram scales down
    761 to 1099px   menu button, vertical hero diagram, stacked grids
    760px and below single column
*/

/*
  Colour note (2026-09-29, contrast): two colours differ from the design handoff
  where the design's colour failed WCAG AA (4.5 to 1) on small text.
    #5f6b78 replaces #7c8894 on small grey text.
    #c8391d replaces #f35334 on small orange text on a light background, and on
            fills that carry white text.
  #f35334 and #7c8894 stay everywhere else: large headings, glyphs, rules,
  borders, the hero diagram and the floating CVE IDs.
*/

/* ===================== BASE ===================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:#f5f6f4; }
body{
  margin:0; min-height:100%; background:#f5f6f4; color:#12161b;
  font-family:'Inter',sans-serif; font-size:13px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
p,h1,h2,h3,h4,h5,h6{ margin:0; text-wrap:pretty; }
a{ color:#C4483A; text-decoration:none; }
a:hover{ color:#E0604D; }
button,input,select,textarea{ font:inherit; }
button,a,input,select,textarea{ outline:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #F0402A; outline-offset:2px;
}
img{ max-width:100%; }

.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-link{
  position:absolute; left:14px; top:-60px; z-index:1000;
  background:#12161b; color:#f5f6f4; padding:10px 18px; border-radius:8px;
  font:400 13px 'JetBrains Mono',monospace; transition:top .2s ease;
}
.skip-link:hover{ color:#f5f6f4; }
.skip-link:focus{ top:14px; }

.container{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; padding:13px 24px; border-radius:999px;
  font:600 14.5px 'Inter',sans-serif; white-space:nowrap;
}
.btn--lg{ padding:16px 30px; font-size:15.5px; }
.btn--block{ display:flex; width:100%; justify-content:center; }
.btn--ghost{ border:1px solid #c3c8c8; color:#12161b; transition:border-color .2s ease; }
.btn--ghost:hover{ border-color:#12161b; color:#12161b; }
.btn--primary{
  border:1px solid transparent; background:#12161b; color:#f5f6f4;
  transition:background .2s ease,transform .2s ease;
}
.btn--primary:hover{ background:#c8391d; color:#f5f6f4; transform:translateY(-1px); }
.btn--signal{ background:#c8391d; color:#ffffff; transition:transform .2s ease; }
.btn--signal:hover{ color:#ffffff; transform:translateY(-1px); }
.btn--ghost-dark{ border:1px solid #3a4048; color:#f5f6f4; transition:border-color .2s ease; }
.btn--ghost-dark:hover{ border-color:#f5f6f4; color:#f5f6f4; }

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(245,246,244,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #dcdfdf;
}
.site-header__inner{
  max-width:1180px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; }
.brand__logo{ height:36px; width:auto; display:block; }
.brand__logo--sm{ height:24px; }
.nav__menu{ display:flex; align-items:center; gap:24px; }
.nav__links{ display:flex; gap:30px; font:400 14px 'Inter',sans-serif; color:#4b5560; }
.nav__links a{ color:#4b5560; }
.nav__links a:hover{ color:#12161b; }
.nav__cta{ display:flex; gap:10px; }
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:36px; height:36px; padding:0; background:none; border:1px solid #c3c8c8; border-radius:8px; cursor:pointer;
}
.nav__toggle span{
  display:block; height:2px; width:16px; margin:0 auto; background:#12161b; border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}

/* ===================== HERO ===================== */
.hero{ padding:72px 0 60px; }
.hero__stage{ position:relative; }
.hero__blips{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.hero__content{ position:relative; z-index:1; text-align:center; max-width:840px; margin:0 auto; }
.hero__title{
  margin:0 -80px 22px; font:700 57.6px/1.06 'Space Grotesk',sans-serif; letter-spacing:-.01em;
  min-height:2.12em; white-space:nowrap;
}
.hero__title-dim{ color:#7c8894; }
.hero__title-signal{ color:#f35334; }
.hero__sub{ margin:0 auto 34px; max-width:620px; font:400 17.3px/1.6 'Inter',sans-serif; color:#4b5560; }
.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto 8px;
  font:400 11px 'JetBrains Mono',monospace; letter-spacing:.12em; color:#5f6b78; text-transform:uppercase;
}
.hero__scroll span{ width:1px; height:22px; background:linear-gradient(180deg,#f35334,transparent); }

/* Hero flow diagram */
.flowband{
  margin-top:0; background:#0b0e13; border-top:1px solid #1c222b; border-bottom:1px solid #1c222b;
  padding:34px 72px 28px; box-shadow:inset 0 1px 40px rgba(243,83,52,.03); color:#F4F5F7;
}
.diagram{ display:grid; grid-template-columns:836px 300px; position:relative; width:1136px; margin:0 auto; }
.flow{ display:block; overflow:visible; }
.flow--tall{ display:none; }
/* Reserves the height the diagram will have once js/hero-flow.js has scaled it, so nothing below moves. */
.flowband{ container-type:inline-size; }
.flowband__stage{ min-height:min(583.2px,calc(100cqw * 0.380282)); }
.js .diagram:not(.is-fit){ visibility:hidden; }
.diagram__side{ position:relative; }
.diagram__evidence{
  position:absolute; top:416px; left:0; right:0; text-align:center;
  font:400 10px/10px 'JetBrains Mono',monospace; letter-spacing:.16em; color:#8b94a0;
}
.finding{
  position:absolute; left:0; right:0; bottom:56px; background:#11151b; border:1px solid #1c222b;
  border-radius:10px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px;
}
.finding__head{ display:flex; justify-content:space-between; align-items:center; }
.finding__id{ font:600 12px 'JetBrains Mono',monospace; color:#F4F5F7; }
.finding__tag{ font:500 10px 'JetBrains Mono',monospace; letter-spacing:.14em; color:#8b94a0; }
.finding__product{ font:600 21px/1.2 'Space Grotesk',sans-serif; color:#F4F5F7; }
.finding__grid{ display:grid; grid-template-columns:80px 1fr; gap:10px 8px; align-items:center; }
.finding__key{ font:500 10px 'JetBrains Mono',monospace; letter-spacing:.1em; color:#8b94a0; }
.finding__verdict{
  justify-self:start; font:600 10.5px 'JetBrains Mono',monospace; letter-spacing:.06em; color:#FF7A66;
  background:rgba(240,64,42,.1); border:1px solid rgba(240,64,42,.5); padding:4px 10px; border-radius:999px;
}
.finding__context{ font:500 13px 'Inter',sans-serif; color:#cfd3d6; white-space:nowrap; }
.finding__priority{
  justify-self:start; font:700 10.5px 'JetBrains Mono',monospace; letter-spacing:.08em; color:#ffffff;
  background:#c8391d; padding:4px 10px; border-radius:999px;
}
.finding__rec{ border-top:1px solid #1c222b; padding-top:12px; display:flex; flex-direction:column; gap:6px; }
.finding__rec-main{ font:600 14px/1.45 'Inter',sans-serif; color:#F4F5F7; }
.finding__rec-note{ font:400 12px/1.45 'Inter',sans-serif; color:#8b94a0; }
.finding__evidence{ display:flex; flex-wrap:wrap; gap:6px; font:500 10.5px 'JetBrains Mono',monospace; color:#cfd3d6; }
.finding__evidence span{ border:1px solid #2a2f38; padding:4px 10px; border-radius:999px; }

/* ===================== FOUR PILLARS ===================== */
.pillars{
  max-width:1180px; margin:0 auto; padding:0 28px 72px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
}
.pillar{
  background:#ffffff; border:1px solid #dcdfdf; border-radius:10px; padding:24px 22px;
  display:flex; flex-direction:column; gap:10px;
}
.pillar__label{ font:500 11px 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#5f6b78; }
.pillar__title{ font:700 22px/1.2 'Space Grotesk',sans-serif; color:#12161b; text-wrap:balance; }
.pillar__body{ font:400 15px/1.55 'Inter',sans-serif; color:#4b5560; text-wrap:pretty; }
.pillar__accent{ font:700 15px/1.55 'Inter',sans-serif; color:#c8391d; }

/* ===================== SECTIONS ===================== */
.section{ padding:100px 0; border-top:1px solid #dcdfdf; scroll-margin-top:70px; }
.eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  font:600 12px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#7a2a18;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:#f35334; flex-shrink:0; }
.section__title{
  margin:0 0 16px; max-width:700px; font:700 37.6px/1.15 'Space Grotesk',sans-serif;
  letter-spacing:-.01em; color:#12161b; text-wrap:balance;
}
.section__lead{ margin:0 0 52px; max-width:600px; font:400 16.3px/1.6 'Inter',sans-serif; color:#4b5560; text-wrap:pretty; }

.grid{ display:grid; gap:20px; }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--gap-top{ margin-top:36px; }

.card{ background:#ffffff; border:1px solid #dcdfdf; border-radius:10px; padding:24px 22px; }
.card--lg{ padding:28px 26px; }
.card--col{ display:flex; flex-direction:column; }
.card__num{ margin-bottom:14px; font:400 11px 'JetBrains Mono',monospace; color:#4b5560; }
.card__glyph{ margin-bottom:14px; font:400 20px/1.2 'JetBrains Mono',monospace; color:#f35334; }
.card__title{ margin:0 0 10px; font:600 17.3px/1.3 'Space Grotesk',sans-serif; letter-spacing:-.01em; color:#12161b; }
.card__body{ margin:0; font:400 15px/1.6 'Inter',sans-serif; color:#4b5560; text-wrap:pretty; }

/* Problem: stat banner */
.stat{
  display:flex; align-items:center; gap:24px; background:#12161b; color:#f5f6f4;
  border-radius:10px; padding:26px 30px; margin-top:56px;
}
.stat__figure{ flex-shrink:0; font:700 41.6px/1.1 'Space Grotesk',sans-serif; color:#f35334; }
.stat__text{ margin:0; font:400 15.7px/1.6 'Inter',sans-serif; color:#cfd3d6; }
.stat__source{ display:block; margin-top:6px; font:400 11px 'JetBrains Mono',monospace; color:#8b95a0; }

/* ===================== SCREENSHOT FRAMES ===================== */
.proof{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:26px; align-items:start; }
.proof__side{ display:flex; flex-direction:column; gap:22px; }
.shot{
  border:1px solid #dcdfdf; border-radius:10px; overflow:hidden; background:#ffffff;
  box-shadow:0 30px 70px -35px rgba(18,22,27,.22);
}
.shot__bar{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid #dcdfdf; background:#f5f6f4;
}
.shot__dot{ width:8px; height:8px; border-radius:50%; background:#c3c8c8; }
.shot__dot--critical{ background:#c6284b; }
.shot__dot--high{ background:#c97a1f; }
.shot__dot--signal{ background:#f35334; }
.shot__label{ margin-left:6px; font:400 11px 'JetBrains Mono',monospace; color:#4b5560; }
.shot__frame{ position:relative; }
.shot__frame picture{ display:block; }
.shot__placeholder{
  min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:16px; text-align:center; background:#eceeed;
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(18,22,27,.035) 14px 15px);
  font:500 12px/1.5 'JetBrains Mono',monospace; color:#4b5560;
}
.shot__placeholder strong{
  font:700 10.5px 'JetBrains Mono',monospace; letter-spacing:.14em; color:#7a2a18;
  border:1px dashed #f35334; border-radius:999px; padding:4px 10px;
}
/* The frame takes its shape from the image's own width and height, so nothing is cropped or stretched. */
.shot__zoom{
  position:relative; display:block; width:100%; padding:0; margin:0;
  border:0; background:none; cursor:default;
}
.js .shot__zoom{ cursor:zoom-in; }
.shot__zoom img{ display:block; width:100%; height:auto; }
.shot__zoom::after{
  content:"+"; position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,22,27,.78); border:1px solid rgba(243,83,52,.4); color:#ffffff;
  font:400 20px/1 'JetBrains Mono',monospace;
  opacity:0; transform:scale(.85); transition:opacity .2s ease,transform .2s ease; pointer-events:none;
}
.shot__zoom:hover::after,.shot__zoom:focus-visible::after{ opacity:1; transform:scale(1); }
.shot__zoom:focus-visible{ outline:2px solid #f35334; outline-offset:-2px; }
.shot__caption{ margin:16px 0 0; font:400 14.7px/1.6 'Inter',sans-serif; color:#4b5560; text-wrap:pretty; }

/* ===================== LIGHTBOX ===================== */
.lightbox{
  position:fixed; inset:0; z-index:999; overflow-y:auto; text-align:center; padding:5vh 5vw;
  background:rgba(10,10,11,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none; }
.lightbox__img{
  display:inline-block; max-width:92vw; width:auto; height:auto; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 60px 120px -40px rgba(0,0,0,.7);
}
.lightbox__close{
  position:fixed; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#ffffff;
  font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.lightbox__close:hover{ background:rgba(243,83,52,.1); border-color:rgba(243,83,52,.5); }
.lightbox__close:focus-visible{ outline:2px solid #f35334; outline-offset:3px; }

/* ===================== HOW IT WORKS ===================== */
.steps{
  position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:#dcdfdf; border:1px solid #dcdfdf; border-radius:10px;
}
.step{ position:relative; background:#ffffff; padding:26px 22px; }
.step:nth-child(1){ border-top-left-radius:9px; }
.step:nth-child(3){ border-top-right-radius:9px; }
.step:nth-child(4){ border-bottom-left-radius:9px; }
.step:nth-child(6){ border-bottom-right-radius:9px; }
.step--final{ background:#12161b; }
.step__num{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:#12161b; color:#ffffff; font:700 12px 'JetBrains Mono',monospace;
  margin-bottom:14px;
}
.step--final .step__num{ box-shadow:inset 0 0 0 1px #5a626c; }
.step__label{ margin-bottom:16px; font:600 11px 'JetBrains Mono',monospace; color:#4b5560; }
.step--final .step__label{ color:#aab1bb; }
.step__title{ margin:0 0 8px; font:600 15.7px/1.3 'Space Grotesk',sans-serif; letter-spacing:-.01em; color:#12161b; }
.step__title--signal{ color:#c8391d; }
.step--final .step__title{ color:#ffffff; }
.step__body{ margin:0; font:400 13.6px/1.6 'Inter',sans-serif; color:#4b5560; text-wrap:pretty; }
.step--final .step__body{ color:#c3c8cc; }
.step__arrow{
  position:absolute; top:50%; right:-11px; transform:translateY(-50%); z-index:2;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  background:#12161b; color:#ffffff; font:700 13px 'JetBrains Mono',monospace;
  border-radius:50%; border:1px solid #12161b;
}
.step__arrow--stacked{ display:none; }

.range{ position:relative; height:46px; margin-top:18px; }
.range__track{ position:absolute; left:0; right:0; top:20px; height:4px; border-radius:2px; background:#e8eaea; }
.range__affected{ position:absolute; left:14%; right:14%; top:20px; height:4px; border-radius:2px; background:rgba(243,83,52,.4); }
.range__end{ position:absolute; top:31px; transform:translateX(-50%); font:500 11px 'JetBrains Mono',monospace; color:#4b5560; }
.range__end--from{ left:14%; }
.range__end--to{ left:86%; }
.range__marker{
  position:absolute; left:71.6%; top:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:left .9s cubic-bezier(.2,.7,.2,1),opacity .4s ease;
}
.range__marker-label{ font:600 11px 'JetBrains Mono',monospace; color:#12161b; }
.range__marker-dot{ width:10px; height:10px; border-radius:50%; background:#12161b; box-shadow:0 0 0 2px #ffffff; }

/* Animated states, set by js/walkthrough.js. Without JS or with reduced motion
   none of these classes are applied and every step shows its final state:
   full opacity, arrows filled, marker at 7.6.4. */
.steps.is-animated .step{ opacity:.35; transition:opacity .45s ease,box-shadow .45s ease; }
.steps.is-animated .step.is-active{ opacity:1; }
.steps.is-animated .step.is-newest{ box-shadow:inset 0 2px 0 #f35334; }
.steps.is-animated .step__arrow{
  background:#f5f6f4; color:#7c8894; border-color:#dcdfdf;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.steps.is-animated .step__arrow.is-filled{ background:#12161b; color:#ffffff; border-color:#12161b; }
.steps.is-animated .range__marker{ left:0%; opacity:0; }
.steps.is-animated .range__marker.is-placed{ left:71.6%; opacity:1; }

/* ===================== SCORING ===================== */
.scoring{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center; }
.checks{ margin:-26px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.checks li{ position:relative; padding-left:28px; font:400 15.2px/1.6 'Inter',sans-serif; color:#4b5560; }
.checks li::before{
  content:"\2713"; position:absolute; left:0; top:-1px;
  font:700 15px 'JetBrains Mono',monospace; color:#f35334;
}

.score{ margin-top:64px; padding-top:36px; border-top:1px solid #dcdfdf; }
.score__chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.score__cve{ margin-right:6px; font:500 12px 'JetBrains Mono',monospace; color:#4b5560; }
.score__chip{
  font:600 12px 'JetBrains Mono',monospace; padding:6px 12px; border-radius:999px; background:#ffffff;
  border:1px solid #f35334; color:#7a2a18; transition:opacity .35s ease,transform .35s ease;
}
.score__chip--base{ border-color:#12161b; color:#12161b; }
.score__chip.is-pending{ opacity:0; transform:translateY(4px); }
.score__scale{ position:relative; height:104px; }
.score__track{ position:absolute; left:0; right:0; top:44px; height:8px; border-radius:4px; background:#e3e6e6; }
.score__band{ position:absolute; left:90%; right:0; top:44px; height:8px; border-radius:0 4px 4px 0; background:rgba(243,83,52,.4); }
.score__tick{ position:absolute; top:38px; width:1px; height:20px; background:#7c8894; }
.score__cap{ position:absolute; right:0; top:34px; width:3px; height:28px; border-radius:1px; background:#12161b; }
.score__value{ position:absolute; top:64px; transform:translateX(-50%); font:500 11px 'JetBrains Mono',monospace; color:#4b5560; }
.score__value--start{ left:0; transform:none; }
.score__value--cap{ right:0; transform:none; }
.score__tier{
  position:absolute; top:84px; font:600 11px 'JetBrains Mono',monospace; letter-spacing:.06em;
  text-transform:uppercase; color:#4b5560;
}
.score__tier--act{ color:#7a2a18; }
.at-0{ left:0; } .at-40{ left:40%; } .at-70{ left:70%; } .at-90{ left:90%; }
.score__tier.at-0{ left:calc(0% + 6px); }
.score__tier.at-40{ left:calc(40% + 6px); }
.score__tier.at-70{ left:calc(70% + 6px); }
.score__tier.at-90{ left:calc(90% + 6px); }
.score__marker{ position:absolute; left:100%; top:0; height:56px; transition:left .5s cubic-bezier(.2,.7,.2,1); }
.score__marker-label{
  position:absolute; right:-8px; top:0; white-space:nowrap; font:600 12px 'JetBrains Mono',monospace;
  padding:5px 10px; border-radius:999px; border:1px solid #12161b; background:#12161b; color:#ffffff;
  transition:background .3s ease,color .3s ease;
}
.score__marker-label.is-outline{ background:#ffffff; color:#12161b; }
.score__marker-dot{
  position:absolute; left:-6px; top:42px; width:12px; height:12px; border-radius:50%;
  background:#f35334; box-shadow:0 0 0 2px #ffffff;
}

/* ===================== SUPPORTED TECHNOLOGY ===================== */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font:400 12.5px 'JetBrains Mono',monospace; color:#4b5560; border:1px solid #dcdfdf;
  padding:8px 14px; border-radius:999px; background:#ffffff;
  transition:border-color .2s ease,color .2s ease;
}
.chip:hover{ border-color:rgba(243,83,52,.4); color:#12161b; }
.chip--total{ font-weight:600; color:#7a2a18; border-color:#f35334; background:transparent; }
.chip--total:hover{ border-color:#f35334; color:#7a2a18; }
.chips__note{ margin:20px 0 0; font:400 13.6px/1.6 'Inter',sans-serif; color:#4b5560; }

/* ===================== PRICING ===================== */
.pricing__controls{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:14px;
}
.billing{ display:inline-flex; background:#ffffff; border:1px solid #dcdfdf; border-radius:999px; padding:4px; gap:4px; }
.billing__btn{
  font:600 12.5px 'JetBrains Mono',monospace; background:transparent; color:#4b5560; border:none;
  padding:8px 16px; border-radius:999px; cursor:pointer; transition:all .2s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.billing__btn[aria-pressed="true"]{ background:#12161b; color:#f5f6f4; }
.billing__save{ font-size:10px; opacity:.8; }
.currency{ display:flex; align-items:center; gap:8px; font:400 12px 'JetBrains Mono',monospace; color:#5f6b78; }
.currency select{
  background:#ffffff; border:1px solid #dcdfdf; color:#12161b; font:400 12.5px 'JetBrains Mono',monospace;
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
.pricing__disclaimer{ margin:0 0 32px; font:italic 400 12.5px 'Inter',sans-serif; color:#5f6b78; }
.pricing__disclaimer[hidden]{ display:none; }
.plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px; }
.plan{
  position:relative; background:#ffffff; border:1px solid #dcdfdf; border-radius:10px;
  padding:30px 26px; display:flex; flex-direction:column;
}
.plan--featured{ border-color:#f35334; box-shadow:0 0 0 1px #f35334; }
.plan__badge{
  position:absolute; top:-11px; left:24px; background:#c8391d; color:#ffffff;
  font:700 10.5px 'JetBrains Mono',monospace; padding:4px 10px; border-radius:999px;
}
.plan__name{ margin:0; font:600 19.2px/1.3 'Space Grotesk',sans-serif; color:#12161b; }
.plan__tag{ margin:6px 0 20px; font:400 14px/1.5 'Inter',sans-serif; color:#4b5560; }
.plan__price{ margin:4px 0 20px; display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; }
.plan__amount{ font:700 33.6px/1.1 'Space Grotesk',sans-serif; color:#12161b; white-space:nowrap; }
.plan__period{ font:500 13.6px 'Inter',sans-serif; color:#5f6b78; }
.plan__notice{ margin:-12px 0 20px; font:italic 400 12.5px/1.5 'Inter',sans-serif; color:#5f6b78; }
.plan__notice:empty,.plan__badge:empty{ display:none; }
.plan__features{ margin:0 0 26px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan__features li{ position:relative; padding-left:20px; font:400 13.9px/1.55 'Inter',sans-serif; color:#4b5560; }
.plan__features li::before{ content:"\2022"; position:absolute; left:0; color:#f35334; font-family:'JetBrains Mono',monospace; }
.pricing__footnote{ margin:28px 0 0; text-align:center; font:400 12px 'Inter',sans-serif; color:#5f6b78; }
.early{
  margin:64px auto 0; max-width:560px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.early__eyebrow{
  display:flex; align-items:center; gap:10px; margin:0;
  font:600 11px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#7a2a18;
}
.early__eyebrow::before,.early__eyebrow::after{ content:""; width:12px; height:1px; background:#f35334; flex-shrink:0; }
.early__title{ margin:0; font:600 20px/1.3 'Space Grotesk',sans-serif; letter-spacing:-.01em; color:#12161b; }
.early__body{ margin:0; font:400 14.4px/1.6 'Inter',sans-serif; color:#4b5560; text-wrap:pretty; }

/* ===================== FAQ ===================== */
.container--narrow{ max-width:760px; }
.faq{ margin-top:36px; }
.faq__item{ border-bottom:1px solid #dcdfdf; padding:20px 0; }
.faq__heading{ margin:0; font:inherit; }
.faq__q{
  width:100%; background:none; border:none; padding:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left;
  font:600 16px/1.6 'Inter',sans-serif; color:#12161b;
}
.faq__icon{
  font:400 20px/1 'JetBrains Mono',monospace; color:#f35334; flex-shrink:0;
  transition:transform .2s ease;
}
.faq__q[aria-expanded="true"] .faq__icon{ transform:rotate(45deg); }
.faq__a{ margin:14px 0 0; font:400 15.2px/1.7 'Inter',sans-serif; color:#4b5560; }
/* Without JavaScript every answer is shown. With it, js/site.js opens and closes them. */
.js .faq__item:not(.is-open) .faq__a{ display:none; }
html:not(.js) .faq__q{ cursor:default; }
html:not(.js) .faq__icon{ display:none; }
.faq__a a{ color:#7a2a18; text-decoration:underline; }

/* ===================== FINAL CTA ===================== */
.final{ text-align:center; padding:110px 0; background:#12161b; color:#f5f6f4; border-top:1px solid #dcdfdf; }
.final__title{
  margin:0 auto 32px; max-width:640px; font:700 41.6px/1.15 'Space Grotesk',sans-serif;
  letter-spacing:-.01em; color:#f5f6f4;
}
.final__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.final__note{ margin:22px 0 0; font:400 13px/1.6 'Inter',sans-serif; color:#8b95a0; }
.final__note + .final__note{ margin-top:4px; }

/* ===================== FOOTER ===================== */
.site-footer{ padding:36px 0; }
.site-footer__inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; align-items:center; }
.site-footer__links{ display:flex; gap:20px; flex-wrap:wrap; }
.site-footer__links a{ font:400 13px 'Inter',sans-serif; color:#4b5560; }
.site-footer__links a:hover{ color:#12161b; }
.site-footer__copy{ margin:0; font:400 12px 'Inter',sans-serif; color:#4b5560; }

/* ===================== TODO MARKER ===================== */
/* Visible on purpose. Search the site for data-todo before launch. */
.todo{
  display:inline-block; font:600 11px/1.5 'JetBrains Mono',monospace; color:#7a2a18;
  background:rgba(243,83,52,.1); border:1px dashed #f35334; border-radius:4px; padding:2px 8px;
  margin-top:10px;
}

/* ===================== 1100 TO 1279: DIAGRAM SCALES DOWN ===================== */
@media (max-width:1279px){
  .flowband{ padding-left:max(24px,calc((100vw - 1136px) / 2)); padding-right:max(24px,calc((100vw - 1136px) / 2)); }
}

/* ===================== 1099 AND BELOW: MENU BUTTON, VERTICAL DIAGRAM ===================== */
@media (max-width:1099px){
  .nav__menu{ display:none; }
  .nav__toggle{ display:flex; }
  .site-header.is-open .nav__menu{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 69px); max-height:calc(100svh - 69px);
    overflow-y:auto; background:#f5f6f4; border-bottom:1px solid #dcdfdf; padding:6px 28px 20px;
  }
  .site-header.is-open .nav__links{ flex-direction:column; gap:0; }
  .site-header.is-open .nav__links a{ padding:14px 0; border-bottom:1px solid #dcdfdf; font-size:15px; }
  .site-header.is-open .nav__cta{ flex-direction:column; align-items:stretch; gap:10px; padding-top:16px; }
  .site-header.is-open .nav__cta .btn{ justify-content:center; }
  .site-header.is-open .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .site-header.is-open .nav__toggle span:nth-child(2){ opacity:0; }
  .site-header.is-open .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .hero__content{ max-width:none; padding:0 28px; }
  .hero__title{ margin:0 0 22px; min-height:0; font-size:min(57.6px,calc((100vw - 56px) / 15)); }

  .flowband{ padding:28px 16px 32px; }
  .flowband__stage{ min-height:0; }
  .diagram{ grid-template-columns:minmax(0,1fr); width:328px; }
  .flow--wide{ display:none; }
  .flow--tall{ display:block; }
  .diagram__evidence{ display:none; }
  .finding{ position:static; }

  .pillars,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--3,.plans,.proof,.scoring{ grid-template-columns:minmax(0,1fr); }
  .scoring{ gap:48px; }
  .plans{ gap:28px; }

  .steps{ grid-template-columns:minmax(0,1fr); }
  .step:nth-child(n){ border-radius:0; }
  .step:first-child{ border-radius:9px 9px 0 0; }
  .step:last-child{ border-radius:0 0 9px 9px; }
  .step__arrow,.step__arrow--stacked{
    display:flex; top:auto; right:auto; bottom:-11px; left:50%;
    transform:translateX(-50%) rotate(90deg);
  }
}

/* ===================== 760 AND BELOW: SINGLE COLUMN ===================== */
@media (max-width:760px){
  .container,.site-header__inner{ padding-left:20px; padding-right:20px; }
  .site-header.is-open .nav__menu{ padding-left:20px; padding-right:20px; }
  .brand__logo{ height:30px; }
  .brand__logo--sm{ height:24px; }

  .hero{ padding:48px 0 0; }
  .hero__content{ padding:0 20px; }
  .hero__title{ white-space:normal; font-size:clamp(34px,9.4vw,47px); text-wrap:balance; }
  .hero__sub{ font-size:16px; }
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }

  .pillars{ grid-template-columns:minmax(0,1fr); padding:40px 20px 64px; }
  .grid--4{ grid-template-columns:minmax(0,1fr); }

  .section{ padding:64px 0; }
  .section__title{ font-size:30px; }
  .section__lead{ margin-bottom:36px; }
  .grid--gap-top{ margin-top:28px; }

  .stat{ flex-direction:column; align-items:flex-start; gap:12px; padding:24px 22px; margin-top:36px; }

  .checks{ margin-top:-10px; }
  .score{ margin-top:48px; }
  .score__scale{ height:134px; }
  .score__value--cap{ top:80px; }
  .score__tier{ top:100px; }
  .score__tier--act{ top:116px; left:auto; right:0; }
  .score__tier.at-90{ left:auto; }

  .pricing__controls{ flex-direction:column; align-items:flex-start; }
  .plan{ padding:28px 22px; }
  .early{ margin-top:48px; }

  .final{ padding:80px 0; }
  .final__title{ font-size:32px; }
  .final__actions .btn{ flex:1 1 100%; justify-content:center; }

  .site-footer__inner{ flex-direction:column; align-items:flex-start; gap:18px; }
  .site-footer__links{ gap:14px 20px; }

}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}