/* ============================================================================
   JM Automated Solutions — MONOCHROME / cinematic
   "Binary at rest, alive on touch." Pure black & white; the only color is a
   sub-pixel red/cyan chromatic-aberration on hover/focus (per MILO's recipe),
   on CTAs + one hero word + active nav. Cinematic canvas, heavy-but-elegant.
   ========================================================================== */

:root {
  color-scheme: dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
          "Helvetica Neue", Arial, sans-serif;

  --bg:      #0b0b0c;
  --bg-2:    #131315;
  --surface: #141416;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.17);

  /* softened off-white — not a harsh 255 */
  --ink:    #e7e7e9;
  --muted:  #97979d;
  --faint:  #6b6b71;

  /* the ONLY color, interaction-only, kept whisper-quiet */
  --chroma-r: rgba(255,85,85,.28);
  --chroma-b: rgba(95,170,255,.28);

  --r-sm: 12px; --r: 18px; --r-lg: 26px;
  --maxw: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--bg); }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  line-height: 1.5; letter-spacing: -0.011em; overflow-x: hidden;
}

/* atmosphere — pure monochrome depth (no colored glow) */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 70% -5%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(50vw 45vh at 10% 110%, rgba(255,255,255,.035), transparent 60%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 78%);
}

/* ---- Type -------------------------------------------------------------- */
.display { font-size: clamp(2.9rem, 7.4vw, 5.8rem); line-height:1.02; font-weight:800; letter-spacing:-0.038em; }
h2.section-title { font-size: clamp(2.1rem,5vw,3.6rem); line-height:1.06; font-weight:800; letter-spacing:-0.03em; }
h3 { font-size:1.4rem; font-weight:700; letter-spacing:-0.02em; }
.lead { font-size: clamp(1.12rem,2vw,1.5rem); color:var(--muted); font-weight:400; }
.eyebrow { font-size:.8rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.muted{color:var(--muted);} .faint{color:var(--faint);}
a { color: var(--ink); text-decoration:none; }
a:hover { text-decoration:none; }

/* the chromatic-aberration accent — the only "RGB", interaction-only,
   on headline words only (NOT buttons — too loud there) */
.chroma { transition: text-shadow .3s ease; }
.chroma:hover, .chroma:focus-visible {
  text-shadow: -0.4px 0 0 var(--chroma-r), 0.4px 0 0 var(--chroma-b);
}
@media (prefers-reduced-motion: reduce){ .chroma:hover{ text-shadow:none; } }

/* ---- Layout ------------------------------------------------------------ */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }
section { padding: clamp(2rem, 3.5vw, 3rem) 0; position:relative; }
.center{ text-align:center; } .narrow{ max-width:760px; margin-inline:auto; }
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }

/* ---- Nav --------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:100;
  background: rgba(10,10,10,.6); backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px); border-bottom:1px solid var(--line);
}
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { font-weight:700; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink); }
.brand .tilde { color:var(--faint); }
.nav-links { display:flex; gap:clamp(1rem,2.4vw,2rem); align-items:center; }
.nav-links a { color:var(--muted); font-size:.92rem; transition:color .2s; }
.nav-links a:hover { color:var(--ink); }
@media (max-width:760px){ .nav-links a:not(.btn){ display:none; } }

/* ---- Buttons (mono; chroma on hover) ----------------------------------- */
.btn { display:inline-flex; align-items:center; gap:.5em; font-size:.98rem; font-weight:600; line-height:1;
  padding:.82em 1.5em; border-radius:980px; transition: transform .15s ease, background .2s ease, border-color .2s, color .2s; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary { background:var(--ink); color:#0a0a0a; }
.btn-primary:hover { background:#fff; }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover { border-color:#fff; }
.btn-lg { font-size:1.05rem; padding:.98em 1.9em; }

/* ---- Hero -------------------------------------------------------------- */
/* isolate creates a stacking context so the bg (z-index:0) paints ABOVE the
   page background, not behind it. Content (.wrap) rides above on z-index:2.
   --vh is set by JS so Safari's URL-bar-aware viewport doesn't make the hero jump. */
.hero { position:relative; isolation:isolate;
  min-height: 88vh; min-height: calc(var(--vh, 1vh) * 88);
  display:flex; align-items:center; padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem); overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero .wrap { position:relative; z-index:2; }
/* The real video is the star — bright and prominent. Canvas is a faint overlay. */
.hero-bg .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% 30%; opacity:.92; }
/* On phones the Sora person is centered tight, so the headline lands on her face.
   Reframe the crop so she sits upper-right instead, leaving the left clear for type. */
@media (max-width: 760px){ .hero-bg .hero-video { object-position: 78% 22%; } }
.hero-disclosure { position:absolute; right: clamp(1rem,2.5vw,2rem); bottom: clamp(.6rem,2vw,1.4rem); z-index:3;
  font-size:.72rem; letter-spacing:.04em; color: rgba(255,255,255,.55); }
.hero-bg canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.22; }
.hero-bg::after { content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,11,12,.20) 0%, rgba(11,11,12,.02) 28%, rgba(11,11,12,.55) 70%, var(--bg) 100%),
    linear-gradient(95deg, rgba(11,11,12,.62) 0%, rgba(11,11,12,.15) 48%, transparent 70%); }
.hero .lead { margin-top:1.6rem; max-width:660px; }
.hero-cta { display:flex; gap:.9rem; margin-top:2.4rem; flex-wrap:wrap; }
.hero-meta { margin-top:3rem; display:flex; gap:2.4rem; flex-wrap:wrap; color:var(--faint); font-size:.85rem; }
.hero-meta b { color:var(--ink); font-weight:700; display:block; font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.15rem; }

/* ---- Hero proof tiles -------------------------------------------------- */
.proof-row { margin-top:3rem; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; max-width: 760px; }
@media (max-width:760px){ .proof-row { grid-template-columns: 1fr; } }
.proof-tile { display:flex; flex-direction:column; gap:.25rem; padding:1rem 1.1rem; border-radius:14px;
  background: rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.proof-tile:hover { transform: translateY(-2px); border-color:#fff; background: rgba(255,255,255,.07); text-decoration:none; }
.proof-tile .proof-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.proof-tile .proof-title { font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.015em; }
.proof-tile .proof-meta { font-size:.78rem; color:var(--muted); }

/* ---- Cards / grids ----------------------------------------------------- */
.grid { display:grid; gap:1.4rem; }
/* minmax(0,1fr) is essential: lets grid items shrink below their native video width.
   Without it, .video-tile videos (intrinsic 1280px) blow the grid out horizontally. */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Work section: 2x2 grid that collapses to 1 column on phones */
.grid-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){ .grid-work { grid-template-columns: 1fr; } }

/* ---- Architectural-reference scholarly page ---------------------------- */
.ref-head { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem) !important;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.ref-head .eyebrow { color: var(--faint); letter-spacing: .14em; }
.ref-title { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin-top: 1rem; }
.ref-byline { color: var(--muted); margin-top: 1rem; font-size: 1.02rem; }
.ref-badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.ref-badge { display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.04); font-size: .8rem; }
.ref-badge b { color: #fff; font-weight: 700; font-size: .92rem; }
.ref-badge span { color: var(--faint); }
.ref-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.ref-actions .btn { font-size: .88rem; padding: .55em 1em; }

.ref-section { padding: clamp(2.2rem, 4vw, 3.4rem) 0 !important; }
.ref-section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.ref-h2 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: 1rem; }
.ref-section p { color: var(--ink); font-size: 1rem; line-height: 1.65; }
.ref-section p + p { margin-top: 1rem; }
.ref-muted { color: var(--muted) !important; font-size: .94rem !important; }
.ref-section em { color: #fff; font-style: italic; }

.ref-articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 760px) { .ref-articles { grid-template-columns: 1fr; } }
.ref-article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.5rem; transition: border-color .2s ease, transform .2s ease; }
.ref-article:hover { border-color: var(--line-2); transform: translateY(-1px); }
.ref-art-num { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ref-article h3 { margin: .55rem 0 .7rem; font-size: 1.12rem; line-height: 1.25; }
.ref-article p { font-size: .93rem; color: var(--muted); line-height: 1.55; }
.ref-meta { font-size: .82rem !important; margin-top: .8rem !important; }
.ref-meta a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.ref-actions-inline { font-size: .82rem !important; margin-top: .5rem !important; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.ref-actions-inline a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 1px; }
.ref-actions-inline a:hover { color: #fff; border-bottom-color: #fff; }

.ref-primitives, .ref-standards, .ref-record { list-style: none; padding: 0; counter-reset: r; }
.ref-primitives li, .ref-standards li, .ref-record li {
  padding: .9rem 0 .9rem 2.4rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .98rem; line-height: 1.55; position: relative; }
.ref-primitives li::before { counter-increment: r; content: counter(r); position: absolute; left: 0; top: .95rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--faint); font-variant-numeric: tabular-nums;
  width: 1.6rem; text-align: right; padding-right: .6rem; border-right: 1px solid var(--line); }
.ref-standards li::before, .ref-record li::before { content: "·"; position: absolute; left: .8rem; top: .85rem; color: var(--faint); font-size: 1.2rem; }
.ref-primitives li:last-child, .ref-standards li:last-child, .ref-record li:last-child { border-bottom: none; }
.ref-primitives b, .ref-standards b, .ref-record b { color: #fff; font-weight: 700; }

.ref-bibtex { background: #08080a; border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.3rem; margin-top: 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: #d7d7da;
  white-space: pre; }

/* ---- Payments page (/payments) ----------------------------------------- */
.pay-hero { position:relative; isolation:isolate; min-height: 56vh; display:flex; align-items:center;
  padding: clamp(5rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow:hidden; }
.pay-hero .hero-bg { position:absolute; inset:0; z-index:0; }
.pay-hero .hero-bg video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.pay-hero .hero-bg::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.1) 30%, rgba(11,11,12,.7) 80%, var(--bg) 100%); }
.pay-hero .wrap { position:relative; z-index:2; }
.pay-hero .display { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height:1.05; }

/* Gate banner — only visible while traffic is closed */
.pay-gate-banner { padding: clamp(.9rem,2vw,1.3rem) 0 !important; background: rgba(255,255,255,.04); border-block: 1px solid var(--line); }
.pay-gate-line { display:flex; gap:.75rem; align-items:flex-start; color: var(--ink); font-size:.95rem; line-height:1.5; margin: 0; }
.pay-gate-line strong { color:#fff; }
.pay-gate-line a { color:#fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.pay-gate-dot { width:.6rem; height:.6rem; border-radius:50%; background:#ffcc66; flex:none; margin-top:.55rem;
  box-shadow: 0 0 12px rgba(255,204,102,.5); animation: gatePulse 2.4s ease-in-out infinite; }
@keyframes gatePulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
body[data-payment-gate="open"] #payGateBanner { display:none; }

/* Methods grid */
.pay-methods { padding-top: clamp(2.5rem,5vw,4rem) !important; }
.pay-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2rem; }
@media (max-width: 760px){ .pay-grid { grid-template-columns: 1fr; } }
.pay-card { background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:1rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; }
.pay-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.pay-card-head { display:flex; flex-direction:column; gap:.35rem; }
.pay-card-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pay-card h3 { font-size: 1.18rem; line-height: 1.25; }
.pay-card-sub { color: var(--muted); font-size:.94rem; line-height:1.5; }
.pay-card-foot { color: var(--faint); font-size:.82rem; margin-top:auto; }

/* Method-mark chips (Apple Pay, Google Pay, Visa, MC, Amex, Discover, PayPal, Square, ACH) */
.pay-card-marks { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.pm { display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:30px; padding: 0 .65rem;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 6px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.06); color: #fff; }
.pm-apple { font-family: "SF Pro Display", -apple-system, system-ui, sans-serif; font-weight: 600; letter-spacing:.01em; }
.pm-apple::before { content: ""; display:inline-block; width:14px; height:14px; margin-right:.25em;
  background:#fff; -webkit-mask: radial-gradient(circle, #fff 56%, transparent 60%) center/100% 100% no-repeat; mask: radial-gradient(circle, #fff 56%, transparent 60%) center/100% 100% no-repeat; }
.pm-google { background:#fff; color:#202124; border-color:#fff; }
.pm-google::before { content: "G"; color:#4285f4; font-weight: 800; margin-right: .15rem; }
.pm-visa { font-family: "SF Pro Display", -apple-system, sans-serif; font-weight: 900; font-style: italic;
  background:#1a1f71; color:#f7b600; border-color: #1a1f71; letter-spacing: .04em; }
.pm-mc { background: #000; padding: 0 .9rem; gap: 2px; }
.pm-mc-a, .pm-mc-b { width:14px; height:14px; border-radius:50%; }
.pm-mc-a { background:#eb001b; margin-right:-5px; }
.pm-mc-b { background:#f79e1b; mix-blend-mode: screen; }
.pm-amex { background: #006fcf; color:#fff; border-color:#006fcf; font-weight: 900; letter-spacing: .05em; }
.pm-disc { background:#ff6000; color:#fff; border-color:#ff6000; font-weight:700; }
.pm-paypal { font-family: "SF Pro Display", -apple-system, sans-serif; font-weight: 800; font-style: italic;
  background: #ffc439; color: #003087; border-color: #003087; padding: 0 .8rem; }
.pm-square { background:#fff; color:#000; border-color:#fff; font-weight:700; }
.pm-ach { background: var(--accent); color: #06140a; border-color: var(--accent); font-weight: 800; letter-spacing:.06em; }
.pm-bank { background: rgba(255,255,255,.08); }

/* Trust section */
.pay-trust { background: var(--bg-2); border-top: 1px solid var(--line); }
.pay-trust .section-title { margin-bottom: 1rem; }
.pay-trust-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.pay-trust-list li { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size:.95rem; line-height: 1.6; }
.pay-trust-list li:last-child { border-bottom: none; }
.pay-trust-list strong { color: #fff; }
.pay-trust-list code { font-family: var(--mono); font-size: .85em;
  background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--line-2); }
.pay-gate-state-text { color: var(--accent); font-weight: 600; }
.pay-trust-foot { color: var(--muted); font-size: .92rem; margin-top: 1.4rem; }

/* Highlight the live PayPal card so the eye lands there first */
.pay-card-live { border-color: rgba(118,224,0,.35); box-shadow: 0 0 0 1px rgba(118,224,0,.2) inset, 0 18px 50px rgba(0,0,0,.4); }
.pay-card-live .pay-card-eyebrow-live { color: var(--accent); }
.pay-card-live .pay-card-eyebrow-live::before { content: "● "; }
.pay-gate-dot-ok { background: var(--accent) !important; box-shadow: 0 0 12px rgba(118,224,0,.55) !important; }
@media (max-width:880px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }
.card {
  position:relative; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r); padding:2.1rem; overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); opacity:0; transition:opacity .3s; }
.card:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 24px 70px rgba(0,0,0,.6); }
.card:hover::before { opacity:1; }
.card h3 { margin:.9rem 0 .6rem; } .card p { color:var(--muted); font-size:.98rem; }
.card .tag { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.card .card-link { display:inline-block; margin-top:1.1rem; font-weight:600; color:var(--ink); }
.card .card-link:hover { text-shadow:-0.5px 0 0 var(--chroma-r), 0.5px 0 0 var(--chroma-b); }

/* status pills — consistent shape; "live" LED pulses, "available" is a calm ring */
/* link-card: an <a> wrapping the card so the WHOLE tile is clickable */
a.card.link-card { display:flex; flex-direction:column; color: var(--ink); text-decoration:none; }
a.card.link-card:hover { color: var(--ink); text-decoration:none; }
a.card.link-card .card-link { color: #fff; opacity:.7; transition: opacity .2s ease, transform .2s ease; }
a.card.link-card:hover .card-link { opacity:1; transform: translateX(2px); }

/* Video benefit tiles (replace the canvas wireframes) — equal columns, proper crop */
.video-tiles { gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px){ .video-tiles { grid-template-columns: 1fr; } }
.video-tile { background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line); border-radius: var(--r); padding: 0; overflow:hidden;
  display:flex; flex-direction:column; min-width:0;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.video-tile:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
.video-tile-media { position:relative; aspect-ratio: 16/9; background:#0a0a0a; overflow:hidden; border-bottom: 1px solid var(--line); }
.video-tile-media video { width:100%; height:100%; object-fit:cover; object-position: center; display:block; }
.video-tile-media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,11,12,.55) 100%); pointer-events:none; }
.video-tile h3 { padding: 1.1rem 1.4rem 0; font-size:1.1rem; }
.video-tile p { padding: .45rem 1.4rem 1.4rem; color: var(--muted); font-size:.92rem; }

/* Soft research strip — replaces the heavy trust band */
.research-strip { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.research-strip .lead { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem); }
.research-strip .lead a { color: #fff; }

/* Tight global section rhythm — was much too airy */
section { padding: clamp(2rem, 3.5vw, 3rem) 0 !important; }
section h2.section-title + p.lead { margin-top: .6rem; }
.hero { padding-bottom: clamp(2rem, 3.5vw, 3rem) !important; }
.hero + section { padding-top: clamp(2rem, 3.5vw, 3rem) !important; }
section .grid { margin-top: 1.6rem !important; }
.video-tiles { margin-top: 1.6rem !important; }
.benefits { margin-top: 1.6rem !important; }
.wrap > .divider { margin: 0; }

/* Make sure the benefit grid never overflows on smaller desktops */
.video-tiles { width: 100%; max-width: 100%; }

.status { display:inline-flex; align-items:center; gap:.5em; font-size:.74rem; font-weight:700; letter-spacing:.05em;
  color:var(--ink); background:rgba(255,255,255,.06); border:1px solid var(--line-2); padding:.32em .8em; border-radius:980px; }
.status .dot{ position:relative; width:7px;height:7px;border-radius:50%;background:#fff; flex:none; }
.status .dot::after{ content:""; position:absolute; inset:-3px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.35); animation: led 2.2s ease-out infinite; }
@keyframes led { 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.5);} 70%,100%{ box-shadow:0 0 0 7px rgba(255,255,255,0);} }
.status.beta .dot{ background:transparent; border:1.5px solid var(--faint); }
.status.beta .dot::after{ animation:none; box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .status .dot::after{ animation:none; } }

/* ---- Benefits ---------------------------------------------------------- */
.benefits { display:grid; gap:2.4rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:880px){ .benefits{ grid-template-columns:1fr; } }
/* icons are interactive — click to play a short visual of the benefit */
.benefit .ic { appearance:none; -webkit-appearance:none; width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:1.1rem; font-size:1.35rem; color:var(--ink); background:rgba(255,255,255,.05); border:1px solid var(--line-2);
  cursor:pointer; position:relative; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.benefit .ic:hover { transform:translateY(-2px); border-color:#fff; background:rgba(255,255,255,.09); }
.benefit .ic::after { content:"▶"; position:absolute; right:-3px; bottom:-3px; width:18px;height:18px;border-radius:50%;
  background:#fff; color:#0b0b0c; font-size:.5rem; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.5); opacity:.9; }
.benefit h3{ font-size:1.18rem; margin-bottom:.5rem; } .benefit p{ color:var(--muted); font-size:.97rem; }

/* ---- Icon demo modal --------------------------------------------------- */
.modal { position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:1.5rem;
  background:rgba(5,5,7,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal.open { display:grid; animation: fade .25s ease; }
@keyframes fade { from{ opacity:0; } to{ opacity:1; } }
.modal-card { width:min(560px,100%); background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:1.6rem; box-shadow:0 30px 90px rgba(0,0,0,.7); }
.modal-card canvas { width:100%; height:240px; display:block; border-radius:14px; background:#08080a; border:1px solid var(--line); }
.modal-card h3 { margin:1.1rem 0 .4rem; }
.modal-card p { color:var(--muted); font-size:.95rem; }
.modal-close { float:right; appearance:none; background:transparent; border:1px solid var(--line-2); color:var(--ink);
  width:30px;height:30px;border-radius:50%; cursor:pointer; font-size:1rem; line-height:1; }
.modal-close:hover{ border-color:#fff; }

/* ---- Band -------------------------------------------------------------- */
.band { border:1px solid var(--line); border-radius:var(--r-lg);
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.05), transparent 60%), var(--bg-2);
  padding:clamp(2.5rem,6vw,4.5rem); }
.trust { display:flex; flex-wrap:wrap; gap:1.4rem 3rem; justify-content:center; }
.trust .badge { text-align:center; }
.trust .badge .k { font-weight:800; font-size:1.1rem; color:#fff; }
.trust .badge .v { font-size:.78rem; color:var(--faint); letter-spacing:.03em; }

/* ---- Footer ------------------------------------------------------------ */
.footer { border-top:1px solid var(--line); padding:3.5rem 0; font-size:.86rem; }
.footer .cols { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; }
@media (max-width:760px){ .footer .cols{ grid-template-columns:1fr 1fr; } }
.footer h4 { font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); margin-bottom:.9rem; }
.footer a { color:var(--muted); display:block; margin-bottom:.55rem; }
.footer a:hover{ color:var(--ink); }
.footer .legal { margin-top:2.6rem; color:var(--faint); border-top:1px solid var(--line); padding-top:1.5rem; }

/* ---- Form fields ------------------------------------------------------- */
.field { width:100%; padding:.85em 1em; border-radius:12px; background:rgba(255,255,255,.04);
  border:1px solid var(--line-2); color:var(--ink); font:inherit; font-size:1rem; transition:border-color .2s, background .2s; }
.field::placeholder{ color:var(--faint); }
.field:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.06); }
textarea.field{ resize:vertical; min-height:96px; }

/* ---- Reveal ------------------------------------------------------------ */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;} html{scroll-behavior:auto;} }