/* =====================================================================
   NanoLeap — site design system  (assets/site.css)
   Shared by every page. Page-only CSS lives in each page's <style>,
   prefixed with the body class (.pg-index, .pg-oddsforge, …).
   Canonical markup for every component: nanoleap-site-v2-tools/COMPONENTS.md
   ---------------------------------------------------------------------
   01 Fonts          06 Buttons            11 Flow diagram
   02 Tokens         07 Nav + mobile menu  12 Pins + legend
   03 Reset + base   08 Page hero          13 Stat row
   04 Layout         09 Cards + chips      14 Screen frame
   05 Type           10 Comparison pair    15 Closing CTA band
                                           16 Footer
                                           17 Motion utilities
   ===================================================================== */

/* ---------- 01 Fonts (self-hosted) ---------- */
@font-face{font-family:"Inter";src:url(fonts/Inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(fonts/Inter-latin-ext.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";src:url(fonts/SpaceGrotesk-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/SpaceGrotesk-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/SpaceGrotesk-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/SpaceGrotesk-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 02 Tokens ---------- */
:root{
  /* brand colour */
  --ink:#15151A;          /* text, headings */
  --ink-2:#4B505B;        /* secondary text (never lighter for body copy) */
  --ink-3:#8C919B;        /* footnotes, column labels only */
  --ink-4:#B9BDC5;        /* disabled, hairline marks */
  --line:#E7E9ED;         /* hairlines, card borders */
  --line-2:#D9DCE2;       /* stronger borders (secondary buttons, inputs) */
  --bg:#FFFFFF;
  --bg-2:#F5F6F8;         /* alt section, muted cards */
  --bg-3:#EEF0F3;         /* muted footers inside muted cards */
  --neon:#22FF86;         /* buttons, pins, accents on dark */
  --green:#00DE64;        /* marks: squares, lines, connectors */
  --green-ink:#0A8A47;    /* green used as text on white */
  --green-tint:#F2FFF8;   /* "after"/success surfaces */
  --green-line:#CFF3DF;
  --green-soft:#E6FBEF;
  --red:#C2261D;
  --red-tint:#FDECEB;
  --night:#0E0E11;        /* dark bookends: hero, CTA band */
  --night-2:#15151A;      /* dark cards */
  --night-3:#0B0B0E;      /* footer */
  --on-night:#FFFFFF;
  --on-night-2:#B4B8C1;
  --on-night-3:#8A8E98;

  /* type */
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; /* mock-screen code only */

  /* layout */
  --wrap:1200px;
  --gutter:clamp(20px,5vw,48px);
  --nav-h:72px;
  --section-y:clamp(88px,10vw,144px);
  --section-y-tight:clamp(64px,7vw,96px);

  /* spacing scale (4-based) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;

  /* radii */
  --r-xs:5px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;

  /* shadows — zero-blur stacks (no gaussian blur, as in the decks) */
  --shadow-1:0 1px 0 0 rgba(21,21,26,.035),0 2px 0 -1px rgba(21,21,26,.03);
  /* each layer sits lower and narrower (negative spread), so the stack tapers like a soft shadow */
  --shadow-2:0 1px 0 0 rgba(21,21,26,.04),0 3px 0 -1px rgba(21,21,26,.026),0 7px 0 -3px rgba(21,21,26,.022),0 12px 0 -5px rgba(21,21,26,.019),0 18px 0 -8px rgba(21,21,26,.016),0 26px 0 -12px rgba(21,21,26,.013),0 36px 0 -17px rgba(21,21,26,.01);
  --shadow-3:0 1px 0 0 rgba(21,21,26,.045),0 4px 0 -2px rgba(21,21,26,.03),0 9px 0 -4px rgba(21,21,26,.026),0 16px 0 -7px rgba(21,21,26,.022),0 25px 0 -11px rgba(21,21,26,.018),0 36px 0 -16px rgba(21,21,26,.014),0 50px 0 -22px rgba(21,21,26,.011),0 66px 0 -30px rgba(21,21,26,.008);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.8s;

  /* context (light by default) — components read these, never raw colours */
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --rule:var(--line);
  --surface:#FFFFFF;
  --surface-2:var(--bg-2);
  --card-line:#E3E6EA;
  --accent:var(--green-ink);
  --mark:var(--green);
  --focus:var(--green-ink);
}
/* dark context: anything inside these adapts automatically */
.on-dark,.section--dark,.page-hero,.cta-band,.site-footer,.site-menu{
  --fg:var(--on-night);
  --fg-2:var(--on-night-2);
  --fg-3:var(--on-night-3);
  --rule:rgba(255,255,255,.09);
  --surface:var(--night-2);
  --surface-2:#1B1B21;
  --card-line:rgba(255,255,255,.08);
  --accent:var(--neon);
  --mark:var(--neon);
  --focus:var(--neon);
  color:var(--fg-2);
}
.on-light{
  --fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--rule:var(--line);--surface:#FFFFFF;--surface-2:var(--bg-2);
  --card-line:#E3E6EA;--accent:var(--green-ink);--mark:var(--green);--focus:var(--green-ink);color:var(--fg-2);
}

/* ---------- 03 Reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px);scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--bg);color:var(--fg-2);
  font-family:var(--font-body);font-size:17px;font-weight:400;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
@media (max-width:720px){body{font-size:16px}}
img,svg,video,canvas,picture{display:block;max-width:100%}
img,video{height:auto}
svg{overflow:visible}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul[class],ol[class],.site-footer ul,.site-menu ul{list-style:none}
strong,b{font-weight:600;color:var(--fg)}
::selection{background:var(--neon);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-60px;z-index:300;background:var(--neon);color:var(--ink);font:500 15px/1 var(--font-display);padding:12px 16px;border-radius:var(--r-sm);transition:top .2s}
.skip-link:focus{top:12px}
.prose-link,p a:not([class]){color:var(--fg);text-decoration:underline;text-decoration-color:var(--mark);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s}
.prose-link:hover,p a:not([class]):hover{text-decoration-color:currentColor}

/* ---------- 04 Layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(880px + var(--gutter) * 2)}

.section{position:relative;padding-block:var(--section-y);background:var(--bg)}
.section--tight{padding-block:var(--section-y-tight)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section--alt{background:var(--bg-2)}
.section--dark{background:var(--night)}
.section--ruled{border-top:1px solid var(--rule)}

.grid{display:grid;gap:var(--grid-gap,24px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}

/* text + visual, side by side; collapses under 960px.
   The visual always gets the wide column: split--reverse swaps the columns, not just the order. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,80px)}   /* narrow text, big screen */
.split--reverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--reverse.split--wide{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.split--reverse.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--reverse>:first-child{order:2}
.split--top{align-items:start}
@media (max-width:959px){.split,.split--even,.split--wide,.split--reverse,.split--reverse.split--wide{grid-template-columns:minmax(0,1fr)}.split--reverse>:first-child{order:0}}

/* ---------- 05 Type ---------- */
h1,h2,h3,h4,.t-display,.t-h1,.t-h2,.t-h3{font-family:var(--font-display);font-weight:500;color:var(--fg);text-wrap:balance;font-feature-settings:"kern" 1}
.t-display{font-size:clamp(42px,5.4vw + 6px,88px);line-height:1.02;letter-spacing:-.035em}
h1,.t-h1{font-size:clamp(38px,4vw + 8px,68px);line-height:1.04;letter-spacing:-.032em}
h2,.t-h2{font-size:clamp(30px,2.6vw + 10px,52px);line-height:1.08;letter-spacing:-.028em}
h3,.t-h3{font-size:clamp(20px,.5vw + 15px,24px);line-height:1.25;letter-spacing:-.014em}
h4,.t-h4{font-family:var(--font-body);font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
p,li,dd{text-wrap:pretty}
.lead{font-size:clamp(18px,.45vw + 14px,21px);line-height:1.5;color:var(--fg-2);letter-spacing:-.01em;max-width:60ch}
.text-sm,.small{font-size:15px;line-height:1.55}
.text-xs{font-size:13.5px;line-height:1.5}
.text-fg{color:var(--fg)}
.text-accent{color:var(--accent)}
.tnum{font-feature-settings:"tnum" 1}

/* kicker / eyebrow — Space Grotesk caps with the deck's green square */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:13px;font-weight:500;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.eyebrow::before{content:"";flex:none;width:9px;height:9px;background:var(--mark)}
.eyebrow--plain::before{display:none}
.eyebrow--accent{color:var(--accent)}
@media (max-width:720px){.eyebrow{font-size:12px;gap:10px}.eyebrow::before{width:8px;height:8px}}

/* column / group label (no marker) */
.label{font-family:var(--font-display);font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* section header: eyebrow + h2 + lead */
.section-head{max-width:880px;margin-bottom:clamp(40px,5vw,72px)}
.section-head .eyebrow{margin-bottom:22px}
.section-head .lead{margin-top:20px}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}
.section-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(40px,6vw,96px);align-items:end}
.section-head--split .eyebrow{grid-column:1/-1;margin-bottom:0}
.section-head--split .lead{margin-top:0;padding-bottom:.35em}
.section-head--split>.section-head__kicker{grid-column:1/-1}
@media (max-width:959px){.section-head--split{grid-template-columns:minmax(0,1fr)}.section-head--split .lead{padding-bottom:0}}
/* eyebrow + badge on one line (e.g. "Website testing  [Early access]") */
.section-head__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:22px}
.section-head .section-head__kicker .eyebrow{margin-bottom:0}
.section-head--split .section-head__kicker{margin-bottom:0}
/* a link or button under the lead */
.section-head .btn-row{margin-top:28px}
.section-head--split .btn-row{margin-top:24px}
/* no gap below (the head is the whole section, e.g. a closing strip) */
.section-head--flush{margin-bottom:0}

/* "Illustrative example." and other footnotes */
.note{font-size:13.5px;line-height:1.5;color:var(--fg-3);letter-spacing:0}
.note--center{text-align:center}
* + .note{margin-top:20px}

/* number in a circle (legends, stages): Inter + tabular figures, only here */
.num-dot{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--neon);color:var(--ink);font-family:var(--font-body);font-size:14.5px;font-weight:600;line-height:1;font-feature-settings:"tnum" 1}
.num-dot--ink{background:var(--ink);color:#fff}

/* ---------- 06 Buttons ---------- */
.btn{
  --btn-h:48px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--btn-h);padding:0 22px;border:1px solid transparent;border-radius:10px;
  background:var(--neon);color:var(--ink);
  font-family:var(--font-display);font-size:16px;font-weight:500;line-height:1;letter-spacing:-.005em;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{background:#5BFFA6}
.btn:active{transform:translateY(1px)}
/* primary on white needs an edge: neon is nearly as light as the page */
.btn:not(.btn--secondary):not(.btn--ghost):not(.btn--ink){box-shadow:inset 0 0 0 1px rgba(0,150,70,.16)}
.on-dark .btn,.section--dark .btn,.page-hero .btn,.cta-band .btn,.site-menu .btn,.site-nav .btn{box-shadow:none}
.btn--secondary{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--secondary:hover{background:rgba(21,21,26,.035);border-color:var(--ink-3)}
.on-dark .btn--secondary,.section--dark .btn--secondary,.page-hero .btn--secondary,.cta-band .btn--secondary,.site-menu .btn--secondary{border-color:rgba(255,255,255,.22)}
.on-dark .btn--secondary:hover,.section--dark .btn--secondary:hover,.page-hero .btn--secondary:hover,.cta-band .btn--secondary:hover,.site-menu .btn--secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.5)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#2A2A31}
.btn--ghost{--btn-h:auto;height:auto;padding:6px 0;background:none;color:var(--fg);border-radius:4px}
.btn--ghost:hover{background:none;color:var(--accent)}
.btn--sm{--btn-h:40px;padding:0 16px;font-size:15px;border-radius:9px}
.btn--lg{--btn-h:56px;padding:0 28px;font-size:17px;border-radius:12px}
.btn--block{display:flex;width:100%}
.btn--arrow::after{
  content:"";flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease-out);
}
.btn--arrow:hover::after{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.btn-row:has(>.btn--ghost+.btn--ghost){column-gap:34px}   /* two text links side by side */
@media (max-width:480px){.btn-row--stack{flex-direction:column;align-items:stretch}.btn-row--stack .btn{width:100%}}

/* ---------- 07 Nav + mobile menu ---------- */
.site-nav{
  --nav-fg:#FFFFFF;--nav-fg-2:rgba(255,255,255,.74);--nav-bg:rgba(14,14,17,0);--nav-line:rgba(255,255,255,0);--logo-mark:var(--neon);--focus:var(--neon);
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  background:var(--nav-bg);border-bottom:1px solid var(--nav-line);color:var(--nav-fg);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.site-nav.is-scrolled{--nav-bg:rgba(14,14,17,.82);--nav-line:rgba(255,255,255,.07);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
.site-nav.is-light{--nav-fg:var(--ink);--nav-fg-2:var(--ink-2);--logo-mark:var(--green);--focus:var(--green-ink)}
.site-nav.is-light.is-scrolled{--nav-bg:rgba(255,255,255,.86);--nav-line:rgba(21,21,26,.08)}
.site-nav__inner{height:100%;display:flex;align-items:center;gap:40px}
.site-nav__logo{display:flex;align-items:center;flex:none;color:var(--nav-fg);border-radius:4px}
.logo{display:block;height:22px;width:auto;aspect-ratio:3250/601;overflow:hidden}

/* top-level items: plain links and dropdown triggers share one look */
.site-nav__links{height:100%;margin-left:auto}
.site-nav__list{display:flex;align-items:center;gap:4px;height:100%}
.site-nav__item{position:relative;display:flex;align-items:center;height:100%}
.site-nav__link,.site-nav__trigger{
  position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:9px;
  font-family:var(--font-display);font-size:15px;font-weight:500;line-height:1;letter-spacing:-.003em;white-space:nowrap;
  color:var(--nav-fg-2);cursor:pointer;transition:color .2s var(--ease),background-color .2s var(--ease)
}
.site-nav__link:hover,.site-nav__trigger:hover,.site-nav__item.is-open>.site-nav__trigger{color:var(--nav-fg);background:color-mix(in srgb,var(--nav-fg) 7%,transparent)}
.site-nav__link[aria-current="page"],.site-nav__item.is-current>.site-nav__trigger{color:var(--nav-fg)}
/* current page: the green rule under the label (not under the caret) */
.site-nav__link::after,.site-nav__trigger::after{content:"";position:absolute;left:13px;right:var(--rule-r,13px);bottom:3px;height:2px;background:var(--logo-mark);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.site-nav__trigger{--rule-r:31px}
.site-nav__link[aria-current="page"]::after,.site-nav__item.is-current>.site-nav__trigger::after{transform:scaleX(1)}
.site-nav__caret{flex:none;width:11px;height:11px;margin-right:-2px;opacity:.7;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease-out),opacity .2s var(--ease)}
.site-nav__item.is-open .site-nav__caret{transform:rotate(180deg);opacity:1}

/* dropdown panel: always a white card, over the dark hero and on light pages */
.site-nav__panel{
  --focus:var(--green-ink);
  position:absolute;top:calc(100% - 6px);left:50%;z-index:2;
  width:max-content;min-width:320px;max-width:min(440px,calc(100vw - 32px));padding:8px;
  background:#fff;color:var(--ink);border:1px solid rgba(21,21,26,.09);border-radius:16px;box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.985);transform-origin:50% 0;
  transition:opacity .16s var(--ease),transform .24s var(--ease-out),visibility 0s linear .24s;
}
.site-nav__panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px}   /* hover bridge from the trigger */
.site-nav__item.is-open>.site-nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s var(--ease),transform .34s var(--ease-out),visibility 0s}
html:not(.js) .site-nav__item:hover>.site-nav__panel,html:not(.js) .site-nav__item:focus-within>.site-nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.site-nav__menu{display:flex;flex-direction:column;gap:2px}
.site-nav__opt{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:1px 14px;padding:10px 16px 10px 10px;border-radius:10px;color:var(--ink);transition:background-color .15s var(--ease)}
.site-nav__opt:hover,.site-nav__opt:focus-visible{background:var(--bg-2)}
.site-nav__opt:focus-visible{outline-offset:-2px}
.site-nav__opt[aria-current="page"]{background:var(--green-tint)}
.site-nav__ico{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .15s var(--ease)}
.site-nav__opt:hover .site-nav__ico,.site-nav__opt:focus-visible .site-nav__ico,.site-nav__opt[aria-current="page"] .site-nav__ico{background:#fff}
.site-nav__ico svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.site-nav__ico svg .ac{stroke:var(--green)}
.site-nav__ico svg .acf{fill:var(--green);stroke:none}
.site-nav__ico svg.is-mark{width:19px;height:19px;stroke:none;--logo-mark:var(--green)}
.site-nav__opt-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:15.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.site-nav__opt-text{font-size:13.5px;line-height:1.4;color:var(--ink-2)}

.site-nav__actions{display:flex;align-items:center;gap:8px;margin-left:4px}
.site-nav__toggle{display:none;position:relative;width:40px;height:40px;border-radius:9px;color:var(--nav-fg);border:1px solid color-mix(in srgb,var(--nav-fg) 22%,transparent)}
.site-nav__toggle i{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;border-radius:1px;transition:transform .3s var(--ease-out),top .3s var(--ease-out)}
.site-nav__toggle i:first-of-type{top:15px}
.site-nav__toggle i:last-of-type{top:23px}
.site-nav__toggle[aria-expanded="true"] i:first-of-type{top:19px;transform:rotate(45deg)}
.site-nav__toggle[aria-expanded="true"] i:last-of-type{top:19px;transform:rotate(-45deg)}
@media (max-width:1079px) and (min-width:960px){.site-nav__inner{gap:24px}.site-nav__link,.site-nav__trigger{padding:0 10px}.site-nav__link::after,.site-nav__trigger::after{left:10px}.site-nav__link{--rule-r:10px}.site-nav__trigger{--rule-r:28px}}
@media (max-width:959px){
  :root{--nav-h:64px}
  .site-nav__links{display:none}
  .site-nav__actions{margin-left:auto}
  .site-nav__toggle{display:block}
}
@media (max-width:380px){.site-nav__actions .btn{padding:0 12px}}
body.menu-open{overflow:hidden}
body.menu-open .site-nav{--nav-fg:#FFFFFF;--nav-fg-2:rgba(255,255,255,.74);--nav-bg:var(--night);--nav-line:rgba(255,255,255,.07);--logo-mark:var(--neon);--focus:var(--neon)}

/* mobile menu: grouped sections with large tap targets */
.site-menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:99;background:var(--night);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .4s var(--ease-out),visibility 0s linear .4s;
}
.site-menu.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .4s var(--ease-out),visibility 0s}
.site-menu__inner{display:flex;flex-direction:column;min-height:100%}
.site-menu__nav{display:flex;flex-direction:column;gap:30px;padding-top:24px}
.site-menu__label{margin-bottom:4px;font-family:var(--font-display);font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.site-menu__item{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:60px;padding:12px 40px 12px 0;border-bottom:1px solid var(--rule);color:var(--fg)}
.site-menu__item strong{font-family:var(--font-display);font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.016em;color:var(--fg)}
.site-menu__item span{font-size:14.5px;line-height:1.4;color:var(--fg-2)}
.site-menu__item[aria-current="page"] strong{color:var(--neon)}
.site-menu__item::after{content:"";position:absolute;right:2px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--fg-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.site-menu__item:active{background:rgba(255,255,255,.03)}
.site-menu__foot{margin-top:auto;padding:36px 0 calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
.site-menu__foot p{font-size:15px;color:var(--fg-2)}
.site-menu__foot a:not(.btn){color:var(--fg)}
@media (min-width:960px){.site-menu{display:none}}

/* ---------- 08 Page hero (dark bookend) ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--night);padding-top:calc(var(--nav-h) + clamp(72px,10vw,152px));padding-bottom:clamp(80px,9vw,136px)}
.page-hero--full{min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:center}
.page-hero .wrap{position:relative;z-index:1}
.page-hero__content{max-width:880px}
.page-hero .eyebrow{margin-bottom:28px}
.page-hero__title{color:var(--fg);font-size:clamp(42px,5.4vw + 6px,88px);line-height:1.02;letter-spacing:-.035em}
.page-hero__lead{margin-top:28px;max-width:56ch;font-size:clamp(18px,.5vw + 14px,21px);line-height:1.55;color:var(--fg-2)}
.page-hero .btn-row{margin-top:40px}
.page-hero__meta{margin-top:clamp(56px,7vw,96px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.page-hero__meta a{color:var(--fg-2);text-decoration:underline;text-decoration-color:rgba(34,255,134,.55);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.page-hero__meta a:hover{color:var(--fg);text-decoration-color:var(--neon)}
.page-hero__visual{margin-top:clamp(48px,6vw,80px)}
@media (max-width:720px){
  .page-hero__meta{flex-direction:column;align-items:flex-start;gap:14px}
  .page-hero .btn-row{display:grid;grid-template-columns:minmax(0,max-content)}   /* stacked buttons share one width */
}

/* hero with a visual beside the copy (e.g. a phone). The aside can bleed off the hero's bottom edge
   with .page-hero__aside--bleed. Stacks under 960px. */
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-aside,340px));gap:clamp(40px,6vw,96px);align-items:end}
.page-hero .page-hero__grid .page-hero__content{max-width:none}
.page-hero__aside{position:relative;min-width:0}
.page-hero__aside--bleed{margin-bottom:calc(-1 * clamp(80px,9vw,136px))}
@media (max-width:959px){
  .page-hero__grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .page-hero__aside{width:100%;max-width:var(--hero-aside,340px);margin-inline:auto}
}

/* brand particle field (+ / | ■) — rendered by site.js into <svg data-field> */
.brand-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.4s var(--ease)}
.brand-field.is-drawn{opacity:1}
@media (max-width:720px){.brand-field.is-drawn{opacity:.4}}

/* AWS Partner Network mark */
.aws-mark{display:inline-flex;align-items:center;gap:12px;color:var(--fg-3);font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.aws-mark svg{width:38px;height:auto;aspect-ratio:304/182;color:#EDEDED;transform:translateY(2px)}
.on-light .aws-mark svg{color:#232F3E}

/* ---------- 09 Cards + chips ---------- */
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-lg);padding:clamp(24px,2.2vw,32px)}
.card--raised{box-shadow:var(--shadow-2)}
.card--muted{background:var(--surface-2);border-color:transparent}
.card--accent{border-top:0;padding-top:calc(clamp(24px,2.2vw,32px) + 1px)}
.card--accent::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--green)}
.card__eyebrow{margin-bottom:18px}
.card__title{font-family:var(--font-display);font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.014em;color:var(--fg);text-wrap:balance}
.card__text{margin-top:10px;font-size:16px;line-height:1.55;color:var(--fg-2)}
.card__list{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.card__list li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.card__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--mark)}
.card__foot{margin-top:auto;padding-top:24px}
.card__foot--ruled{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
a.card{transition:border-color .25s var(--ease),transform .35s var(--ease-out)}
a.card:hover{border-color:var(--ink-4)}
.on-dark a.card:hover,.section--dark a.card:hover{border-color:rgba(255,255,255,.22)}
a.card .btn--ghost{pointer-events:none}
a.card:hover .btn--arrow::after{transform:translateX(3px)}

.badge{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:var(--r-xs);background:var(--bg-3);color:var(--ink-2);font-family:var(--font-display);font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.badge--ink{background:var(--ink);color:#fff}
.badge--green{background:var(--green-soft);color:var(--green-ink)}
.badge--neon{background:var(--neon);color:var(--ink)}
.badge--fail{background:var(--red-tint);color:var(--red)}
.badge--outline{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.on-dark .badge--outline,.section--dark .badge--outline{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:var(--fg-2)}

/* small bullet list with the deck's green squares */
.ticks{display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:22px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--mark)}
.ticks b,.ticks strong{color:var(--fg)}

/* ---------- 10 Comparison pair (before / after) ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:stretch}
@media (max-width:959px){.compare{grid-template-columns:minmax(0,1fr)}}
.compare__card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;background:#fff;border:1px solid #DDE1E6;color:var(--ink-2)}
.compare__card--before{background:var(--bg-2);border-color:#E6E8EC}
.compare__card--after{box-shadow:var(--shadow-2)}
.compare__card--after::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--green);z-index:1}
.compare__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.compare__title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.012em;color:var(--ink)}
.compare__title::before{content:"";width:11px;height:11px;border-radius:2px;background:var(--ink)}
.compare__card--after .compare__title::before{background:var(--green)}
.compare__meta{font-size:13.5px;color:var(--ink-2)}
.compare__body{flex:1;display:flex;flex-direction:column}
.compare__rows{display:flex;flex-direction:column}
.compare__row{display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:52px;padding:12px 24px;border-top:1px solid var(--line);font-size:15px;line-height:1.35}
.compare__row:first-child{border-top:0}
.compare__row-label{font-size:13.5px;color:var(--ink-2)}
/* one-line rows when the content is short (label | value). Every row shares one label column,
   so the values line up row to row; set --compare-label on .compare to change its width.
   When a card gets too narrow for one line, rows fall back to the two-line layout. */
.compare__card{container-type:inline-size}
.compare--inline .compare__row{display:grid;grid-template-columns:var(--compare-label,10.5rem) minmax(0,1fr);align-items:center;gap:6px 20px}
.compare--inline .compare__row-label{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:520px){
  .compare--inline .compare__row{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px}
  .compare--inline .compare__row-label{font-size:13.5px}
}
.compare__row-label b{font-weight:500;color:var(--ink)}
.compare__row-value{display:flex;align-items:center;gap:10px;min-width:0;min-height:32px;color:var(--ink)}
.compare__row-value .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compare__gap{flex:1;display:flex;align-items:center;height:32px;padding:0 12px;border:1.5px dashed #C3C8CF;border-radius:7px;font-size:13.5px;color:#6E747F;white-space:nowrap}
.compare__gap--sm{flex:none;height:26px;padding:0 9px;font-size:12.5px;border-radius:6px}   /* compact: inside tiles, or a short row */
.compare__price{flex:none;margin-left:auto;min-width:46px;padding:4px 8px;border-radius:7px;background:var(--ink);color:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;text-align:center;font-feature-settings:"tnum" 1}
.compare__card--after .compare__price{background:var(--neon);color:var(--ink)}
.compare__foot{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:18px 24px 20px;border-top:1px solid var(--line);background:var(--bg-3)}
.compare__card--after .compare__foot{background:var(--green-tint);border-top-color:var(--green-line)}
.compare__stat{font-family:var(--font-display);font-size:clamp(28px,2.4vw,36px);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.compare__card--after .compare__stat{color:var(--green-ink)}
.compare__foot-label{font-size:15px;color:var(--ink-2)}
@media (max-width:560px){
  .compare__row,.compare--inline .compare__row{padding:12px 18px}
  .compare--inline .compare__row{grid-template-columns:minmax(0,1fr)}
  .compare__head,.compare__foot{padding-inline:18px}
}

/* ---------- 11 Flow diagram (in → stages → out) ---------- */
.flow{--flow-gap:clamp(48px,6vw,96px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:var(--flow-gap);align-items:center}
.flow__col,.flow__core{position:relative;z-index:1;min-width:0}
.flow__col .label,.flow__core .label{display:block;margin-bottom:16px}
.flow__core .label{text-align:center}
/* desktop: the three column labels share one baseline row; items and screen centre on each other below it */
@media (min-width:960px){
  .flow{grid-template-rows:auto auto auto;row-gap:0;align-items:start}
  .flow__col,.flow__core{display:grid;grid-row:1/span 3;grid-template-rows:subgrid}
  .flow__col>.label,.flow__core>.label{grid-row:1;align-self:end}
  .flow__col>.flow__items{grid-row:2;align-self:center}
  .flow__core>.flow__screen{grid-row:2;align-self:center}
  .flow__core>.flow__caption{grid-row:3}
}
.flow__items{display:flex;flex-direction:column;gap:10px}
.flow__item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 14px;padding:13px 16px;background:var(--surface);border:1px solid #E1E4E9;border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.flow__item>b{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--accent);font-feature-settings:"tnum" 1}
.flow__item strong{display:block;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--fg)}
.flow__item span:not(.badge){display:block;font-size:13.5px;line-height:1.4;color:var(--fg-2)}
.flow__item--out{grid-template-columns:minmax(0,1fr)}
.flow__item--out .badge{margin-bottom:6px;justify-self:start}
.flow__screen{position:relative;background:#fff;border:1px solid #DFE2E7;border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden}
.flow__stages{position:relative;display:flex;flex-direction:column;padding:14px 18px 18px}
.flow__stages::before{content:"";position:absolute;left:calc(18px + 12px + 17px);top:40px;bottom:40px;width:2px;background:var(--green);transform-origin:top;transition:transform 1.2s var(--ease-out)}
html.js .flow:not(.is-in) .flow__stages::before{transform:scaleY(0)}
.flow__stage{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:0 16px;padding:10px 12px;border-radius:var(--r-md);transition:background-color .5s var(--ease)}
.flow__stage>b{position:relative;z-index:1;grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--font-body);font-size:15px;font-weight:600;font-feature-settings:"tnum" 1;box-shadow:0 0 0 4px #fff;transition:background-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.flow__stage strong{display:block;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.flow__stage span:not(.badge){display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.flow__stage.is-active{background:var(--green-tint)}
.flow__stage.is-active>b{background:var(--neon);color:var(--ink);box-shadow:0 0 0 4px var(--green-tint),0 0 0 5.5px rgba(0,222,100,.45)}
.flow__caption{margin-top:18px;text-align:center;font-size:15px;color:var(--fg-2)}
.flow__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.flow__wires path{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round}
.flow__wires circle{fill:var(--green);stroke:var(--bg);stroke-width:2.5}
.section--alt .flow__wires circle{stroke:var(--bg-2)}
@media (max-width:959px){
  .flow{grid-template-columns:minmax(0,1fr);gap:56px}
  .flow__wires{display:none}
  .flow__core::before,.flow__col--out::before{content:"";position:absolute;left:50%;top:-44px;width:2px;height:32px;background:var(--green);transform:translateX(-1px)}
  .flow__core::after,.flow__col--out::after{content:"";position:absolute;left:50%;top:-20px;width:8px;height:8px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translate(-4.5px,0) rotate(45deg)}
}

/* ---------- 12 Pins + legend ---------- */
.pinned{position:relative}
.screen .pin,.pinned .pin{
  position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:3;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  display:grid;place-items:center;background:var(--neon);color:var(--ink);
  font-family:var(--font-body);font-size:14.5px;font-weight:600;line-height:1;font-feature-settings:"tnum" 1;
  box-shadow:0 0 0 4px #fff;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease);
}
.screen .pin::after,.pinned .pin::after{content:"";position:absolute;inset:-11px;border-radius:50%;border:1.5px solid rgba(0,222,100,.5);transition:transform .4s var(--ease-out),border-color .3s}
.pin.pin--plain::after{display:none}
.pin.is-hot::after{transform:scale(1.18);border-color:rgba(0,222,100,.9)}
html.js [data-pins] .pin{opacity:0;transform:scale(.6)}
html.js [data-pins].is-in .pin{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 110ms + 250ms)}
@media (max-width:720px){.screen .pin,.pinned .pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:12.5px;box-shadow:0 0 0 3px #fff}.screen .pin::after,.pinned .pin::after{inset:-8px}}

ol.legend,ul.legend{counter-reset:legend;display:flex;flex-direction:column;gap:20px}
.legend>li{counter-increment:legend;position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:3px 16px;align-items:start}
.legend>li::before{content:counter(legend);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--neon);color:var(--ink);font-family:var(--font-body);font-size:14.5px;font-weight:600;font-feature-settings:"tnum" 1;transition:box-shadow .3s var(--ease)}
.legend>li.is-hot::before{box-shadow:0 0 0 4px rgba(34,255,134,.28)}
.legend>li strong{display:block;font-size:18px;font-weight:600;line-height:30px;letter-spacing:-.01em;color:var(--fg)}
.legend>li span:not(.badge){display:block;font-size:15.5px;line-height:1.45;color:var(--fg-2)}
ol.legend--compact,ul.legend--compact{gap:14px}
.legend--compact>li strong{font-size:16px}
.legend--compact>li span:not(.badge){font-size:14.5px}
/* legend as a row of columns under a full-width screen (4 across, 2 under 960px, 1 under 560px) */
ol.legend--row,ul.legend--row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:28px clamp(24px,3vw,40px);margin-top:clamp(32px,4vw,48px)}
.legend--row + .note{margin-top:clamp(28px,3vw,40px)}
@media (max-width:959px){ol.legend--row,ul.legend--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){ol.legend--row,ul.legend--row{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---------- 13 Stat row ---------- */
.stat-row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:32px clamp(24px,3vw,48px)}
.stat-row__item{padding-top:22px;border-top:1px solid var(--rule)}
.stat-row__value{display:block;font-family:var(--font-display);font-size:clamp(40px,3.4vw + 4px,60px);font-weight:500;line-height:1;letter-spacing:-.035em;color:var(--fg);font-feature-settings:"tnum" 1;white-space:nowrap}
.stat-row__value small{font-size:.45em;font-weight:500;letter-spacing:-.01em;margin-left:.12em;color:var(--fg-2)}
.stat-row__label{display:block;margin-top:14px;max-width:28ch;font-size:15.5px;line-height:1.45;color:var(--fg-2)}
@media (max-width:959px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.stat-row{grid-template-columns:minmax(0,1fr)}}

/* ---------- 14 Screen frame (browser chrome for product screenshots) ---------- */
.screen{position:relative;margin:0;background:#fff;border:1px solid #DFE2E7;border-radius:14px;box-shadow:var(--shadow-3)}
.screen__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);border-radius:13px 13px 0 0;background:#FBFBFC}
.screen__bar>i{width:9px;height:9px;border-radius:50%;background:#E1E3E8}
.screen__url{margin:0 auto;transform:translateX(-22px);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 16px;border-radius:7px;background:#F1F2F4;font-size:12.5px;line-height:1.2;color:var(--ink-3);letter-spacing:.01em}
.screen__body{position:relative;border-radius:0 0 13px 13px}
.screen__body>img,.screen__body>picture>img{display:block;width:100%;height:auto;border-radius:0 0 13px 13px}
.screen--bare .screen__body>img{border-radius:13px}
.screen figcaption,.screen-caption{margin-top:16px}
.on-dark .screen,.section--dark .screen{border-color:rgba(255,255,255,.1);box-shadow:none}
@media (max-width:720px){.screen{border-radius:10px}.screen__bar{height:30px;border-radius:9px 9px 0 0}.screen__bar>i{width:7px;height:7px}.screen__url{font-size:11px;padding:3px 10px;transform:translateX(-14px)}.screen__body,.screen__body>img{border-radius:0 0 9px 9px}}

/* ---------- 15 Closing CTA band (dark) ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--night);padding-block:clamp(96px,11vw,168px)}
.cta-band .wrap{position:relative;z-index:1}
.cta-band .brand-field,.page-hero .brand-field{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
/* Below 1200px the field would run under the copy: keep it to the right edge, and keep the copy clear of it. */
@media (max-width:1199px){
  .cta-band .brand-field,.page-hero .brand-field{
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent),linear-gradient(to right,transparent 60%,#000 84%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,#000 72%,transparent),linear-gradient(to right,transparent 60%,#000 84%);
    mask-composite:intersect}
}
@media (max-width:720px){
  .cta-band .brand-field,.page-hero .brand-field{
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent),linear-gradient(to right,transparent 50%,#000 92%);
    mask-image:linear-gradient(to bottom,#000 72%,transparent),linear-gradient(to right,transparent 50%,#000 92%)}
}
.cta-band__title{color:var(--fg);max-width:15em;font-size:clamp(36px,4.2vw + 6px,72px);line-height:1.04;letter-spacing:-.035em}
.cta-band__title em{display:block;font-style:normal;color:var(--neon)}
.cta-band__lead{margin-top:28px;max-width:52ch;font-size:clamp(18px,.45vw + 14px,21px);line-height:1.55;color:var(--fg-2)}
.cta-band__actions{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.cta-band__email{font-size:16px;color:var(--fg-2)}
.cta-band__email a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(34,255,134,.6);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .2s}
.cta-band__email a:hover{text-decoration-color:var(--neon)}
@media (max-width:480px){.cta-band__actions{flex-direction:column;align-items:stretch}.cta-band__actions .btn{width:100%}}
/* phones: the first line ("See OddsForge running") stays on one line instead of leaving a lone word */
@media (max-width:480px){.cta-band__title{font-size:min(36px,calc((100vw - 2 * var(--gutter)) / 11))}}
@media (min-width:721px) and (max-width:1199px){
  .page-hero__content{max-width:min(880px,62%)}
  .page-hero .page-hero__grid .page-hero__content{max-width:none}
  .cta-band__title,.cta-band__lead{max-width:min(15em,62%)}
}
@media (min-width:721px) and (max-width:959px){.page-hero .page-hero__grid .page-hero__content{max-width:62%}}   /* split hero, stacked */

/* ---------- 16 Footer (dark) ---------- */
.site-footer{--logo-mark:var(--neon);background:var(--night-3);border-top:1px solid rgba(255,255,255,.06);padding-top:clamp(56px,6vw,80px);padding-bottom:36px;font-size:15px}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:48px clamp(40px,5vw,80px)}
.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.site-footer__logo{color:#fff;border-radius:4px}
.site-footer__brand p{max-width:30ch;color:var(--fg-2);line-height:1.55}
.site-footer__brand .aws-mark{margin-top:10px}
.site-footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.site-footer__col h2{margin-bottom:18px;font-family:var(--font-display);font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.site-footer__col ul{display:flex;flex-direction:column;gap:12px}
.site-footer__col a{color:var(--fg-2);transition:color .2s var(--ease)}
.site-footer__col a:hover{color:#fff}
.site-footer__base{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:13.5px;color:var(--fg-3)}
.site-footer__legal{display:flex;gap:24px}
.site-footer__legal a:hover{color:#fff}
@media (max-width:1199px){.site-footer__top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.site-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}

/* ---------- 17 Motion utilities ---------- */
/* reveal: fade + 14px rise. Needs <html class="js"> (set inline in <head>). */
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);transition-delay:calc(var(--reveal-delay,0ms))}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-reveal-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
html.js [data-reveal-stagger].is-in>*{opacity:1;transform:none}
html.js [data-reveal="fade"]{transform:none}
/* draw-in for SVG strokes (site.js sets pathLength=1) */
html.js .draw-ready{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
html.js .is-in .draw-ready,html.js .draw-ready.is-in{stroke-dashoffset:0}
/* counters keep their width while they settle */
[data-count]{font-feature-settings:"tnum" 1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal],html.js [data-reveal-stagger]>*,html.js [data-pins] .pin{opacity:1;transform:none;transition:none}
  html.js .draw-ready{stroke-dashoffset:0;transition:none}
  html.js .flow:not(.is-in) .flow__stages::before{transform:none}
  .brand-field{transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{.site-nav,.site-menu,.brand-field{display:none}html.js [data-reveal],html.js [data-reveal-stagger]>*{opacity:1;transform:none}}

/* Products menu icons: small hover animations (owner request) */
.site-nav__ico svg g,.site-nav__ico svg .ic-mark,.site-nav__ico svg .ic-ring,.site-nav__ico svg .ic-ball,.site-nav__ico svg .ic-arm,.site-nav__ico svg .ic-knob,.site-nav__ico svg .ic-reels{transform-box:fill-box}
.site-nav__ico svg .ic-l1,.site-nav__ico svg .ic-l2{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.site-nav__opt:is(:hover,:focus-visible) .ic-l1{transform:translateY(-2.2px)}
.site-nav__opt:is(:hover,:focus-visible) .ic-l2{transform:translateY(-1.1px)}
.site-nav__opt:is(:hover,:focus-visible) .ic-mark{animation:ic-glow 1.2s ease-in-out infinite}
@keyframes ic-glow{50%{opacity:.45}}
.site-nav__ico svg .ic-ring{transform-origin:center}
.site-nav__opt:is(:hover,:focus-visible) .ic-ring{animation:ic-ring .9s cubic-bezier(.2,.8,.2,1)}
@keyframes ic-ring{35%{transform:scale(1.18)}}
.site-nav__opt:is(:hover,:focus-visible) .ic-ball{animation:ic-ball 1.1s cubic-bezier(.45,0,.2,1)}
@keyframes ic-ball{0%{transform:none}55%{transform:translateX(6.7px);opacity:1}70%{transform:translateX(6.7px);opacity:0}71%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.site-nav__ico svg .ic-arm{transform-origin:bottom}
.site-nav__opt:is(:hover,:focus-visible) .ic-arm{animation:ic-arm .8s cubic-bezier(.3,0,.2,1)}
.site-nav__opt:is(:hover,:focus-visible) .ic-knob{animation:ic-knob .8s cubic-bezier(.3,0,.2,1)}
.site-nav__opt:is(:hover,:focus-visible) .ic-reels{animation:ic-reels .8s steps(1,end)}
@keyframes ic-arm{40%{transform:scaleY(.3)}}
@keyframes ic-knob{40%{transform:translateY(3.5px)}}
@keyframes ic-reels{40%{fill:#C9F7DC}55%{fill:#fff}65%{fill:#C9F7DC}80%{fill:#fff}}
@media (prefers-reduced-motion:reduce){.site-nav__ico svg *{animation:none!important;transition:none!important}}