/* Privacy Shield — design system. Dark premium foundation, one accent,
   restrained motion. Shared across every page in this redesign. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#08090B; --bg-alt:#0C0D10; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.065);
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05);
  --ink:#F6F7F8; --ink-muted:#9498A3; --ink-faint:#5C606C;
  --accent:#7FA0FF; --accent-bright:#A9C0FF; --accent-deep:#0B0E14; --accent-soft:rgba(127,160,255,.12);
  --danger:#F0776C; --danger-soft:rgba(240,119,108,.14);
  --safe:#5FC9A9; --safe-soft:rgba(95,201,169,.14);
  --warn:#E6A03C; --warn-soft:rgba(230,160,60,.14);
  --radius:14px; --radius-sm:9px; --radius-lg:22px;
  --container:1180px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;width:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;line-height:1.5;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(127,160,255,.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 15%, rgba(95,201,169,.05), transparent 55%);
  background-repeat:no-repeat;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:24px;}
section{padding-block:76px;position:relative;}
@media (max-width:768px){section{padding-block:52px;}}

h1,h2,h3{margin:0;letter-spacing:-0.02em;font-weight:700;}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-bright);
  background:var(--accent-soft);border:1px solid rgba(127,160,255,.22);padding:6px 12px;border-radius:100px;
  margin-bottom:18px;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-bright);}
.section-head{max-width:680px;margin-bottom:40px;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.12;}
.section-head p{margin:16px 0 0;color:var(--ink-muted);font-size:17px;line-height:1.6;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:14.5px;padding:12px 22px;
  border-radius:var(--radius-sm);border:1px solid var(--line);cursor:pointer;text-decoration:none;
  transition:transform .15s var(--ease), filter .15s ease, border-color .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--ink);color:#0A0B0D;border-color:var(--ink);font-weight:700;}
.btn-primary:hover{filter:brightness(.92);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-faint);}
.btn-lg{padding:14px 26px;font-size:15.5px;}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Cards / surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
.mono{font-family:var(--font-mono);}
.label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);}

/* Reveal-on-scroll, matches existing site's convention */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- Nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-block:18px;transition:background .25s ease, border-color .25s ease, padding .25s ease;border-bottom:1px solid transparent;}
header.nav.is-scrolled{background:rgba(8,9,11,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line);padding-block:13px;}
header.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;font-weight:800;font-size:18px;text-decoration:none;color:var(--ink);letter-spacing:-0.01em;}
.brand em{font-style:normal;color:var(--accent-bright);font-weight:800;}
nav.links{display:flex;align-items:center;gap:30px;}
nav.links a{font-size:13.5px;font-weight:500;color:var(--ink-muted);text-decoration:none;transition:color .15s ease;}
nav.links a:hover{color:var(--ink);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;}
.mobile-menu{display:none;}
@media (max-width:860px){
  nav.links{display:none;}
  /* The full-width CTA button + hamburger together overflow past the
     viewport at phone widths, pushing the toggle itself off-screen and
     unclickable — the CTA moves into the mobile menu instead (below). */
  .nav-cta .btn-primary{display:none;}
  .menu-toggle{display:flex;}
  .mobile-menu{display:none;position:fixed;inset:64px 12px auto 12px;flex-direction:column;background:rgba(12,13,16,.97);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;padding:10px;z-index:49;}
  .mobile-menu.open{display:flex;animation:menuIn .18s ease;}
  @keyframes menuIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
  .mobile-menu a{padding:13px 10px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;border-bottom:1px solid var(--line-soft);}
  /* .mobile-menu a's color:var(--ink) otherwise beats .btn-primary's own
     color (equal specificity, but this rule comes later in the
     cascade) — without this override the CTA button renders white text
     on its own white background, i.e. invisible. */
  .mobile-menu a.btn{border-bottom:none;margin-top:10px;padding:13px 16px;color:#0A0B0D !important;}
}

/* ---------- Hero ---------- */
.hero{padding-top:136px;padding-bottom:64px;}
.hero .inner{display:grid;grid-template-columns:1fr;gap:44px;text-align:center;align-items:center;}
.hero h1{font-size:clamp(38px,6.4vw,80px);line-height:1.04;letter-spacing:-0.03em;max-width:820px;margin-inline:auto;}
.hero h1 em{font-style:italic;color:var(--accent-bright);}
.hero .sub{font-size:clamp(17px,2vw,20px);color:var(--ink-muted);max-width:600px;margin:22px auto 0;line-height:1.55;}
.hero .cta-row{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap;}
.hero .fine{margin-top:16px;font-size:12.5px;color:var(--ink-faint);}
/* Left text / right product demo, side by side — only once there's
   enough width for both to breathe; below that it stacks (centered),
   same as before. */
@media (min-width:980px){
  /* minmax(0, ...) matters here, not just style: a bare `1fr` track has an
     implicit content-based minimum width, so if the left column's text
     reflows wider — e.g. a web font swapping in later over the network —
     the grid would shrink the right column (the demo) to make room. That
     was the real cause of the demo "resizing": nothing in its own CSS/JS,
     the grid itself silently stealing its space when the left column's
     content changed width at an unpredictable, font-load-dependent time. */
  .hero .inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;text-align:left;align-items:center;}
  .hero h1{margin-inline:0;}
  .hero .sub{margin-inline:0;}
  .hero .sub:last-of-type{max-width:480px;}
  .hero .cta-row{justify-content:flex-start;}
  .hero .fine{text-align:left;}
}

/* Hero product demo */
/* width:100% is the actual fix here, not just tidiness: margin-inline:auto
   alone (for centering in single-column/mobile layout, where this isn't a
   grid item) makes a *grid item* shrink-to-fit its own content instead of
   stretching to fill its column — auto margins consume the stretch space
   instead of the box doing so. That's genuinely how CSS box/grid layout
   works, not a guess: with no explicit width, the box was quietly sized
   by whatever text happened to be inside it (the long unbroken URL, then
   later the short "[REDACTED]"), recentering itself every time the
   content's natural width changed — which *was* the demo "resizing".
   width:100% leaves auto margins nothing to consume, so it always fills
   its column regardless of content, in both layouts. */
.demo-stage{position:relative;max-width:900px;width:100%;margin-inline:auto;}
.demo-window{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;overflow:hidden;
  box-shadow:0 60px 120px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.02);
}
.demo-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);}
.demo-bar .dot{width:9px;height:9px;border-radius:50%;}
.demo-bar .tab{margin-left:12px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);}
/* Fixed-height stage: this is the ONE thing that guarantees the window
   never resizes between slides. Only .demo-line sits in normal document
   flow (top-anchored); the card and status are both position:absolute
   overlays pinned to fixed spots within this box, so neither the card
   appearing/disappearing nor the status text's length can ever change
   the stage's own height — there's nothing left for them to push against.
   min-height is a floor, not a target: it's sized generously enough that
   the tallest realistic code+card combination still fits inside it. */
.demo-body{padding:36px 40px;min-height:440px;position:relative;}
.demo-line{font-family:var(--font-mono);font-size:14.5px;line-height:2;color:var(--ink-muted);text-align:left;max-width:560px;margin-inline:auto;}
.demo-line .k{color:var(--ink-faint);}
/* Long unbroken tokens (a connection-string URL, a key) have no spaces to
   wrap at — without this they force the whole hero wider than the
   viewport on narrow screens instead of breaking inside their own box. */
.demo-line .v{color:var(--ink);position:relative;border-radius:4px;transition:background .3s ease, color .3s ease;overflow-wrap:anywhere;}
@media (max-width:480px){
  .demo-body{padding:24px 20px;min-height:440px;}
  .demo-line{font-size:12.5px;line-height:1.9;}
}
.demo-line .v.flagged{background:var(--danger-soft);color:#FFB4AC;padding:1px 4px;}
.demo-line .v.redacted{background:var(--safe-soft);color:var(--safe);padding:1px 4px;font-style:italic;}
.demo-card-wrap{position:absolute;left:0;right:0;top:150px;display:flex;justify-content:center;pointer-events:none;}
.demo-card-wrap img{width:min(320px,86vw);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .4s var(--ease), transform .4s var(--ease);border-radius:16px;box-shadow:0 30px 60px -18px rgba(0,0,0,.55);}
.demo-card-wrap img.show{opacity:1;transform:none;}
/* Anchored from the top (not bottom): the card's bottom edge sits at a
   known, fixed position (card top:150px + its own fixed rendered height),
   so anchoring status well below that guarantees clearance regardless of
   text length. Anchoring from the bottom instead would make a 2-line
   wrap grow *upward*, straight into the card — which is exactly the
   overlap this replaced. */
.demo-status{position:absolute;left:24px;right:24px;top:376px;text-align:center;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-faint);}
.demo-status .ok{color:var(--safe);}

/* Animated cursor — a simulated pointer moving between waypoints computed
   at runtime from real element positions (see moveCursorTo in the script
   below), so it stays aligned regardless of viewport/responsive sizing. */
.demo-cursor{position:absolute;top:0;left:0;width:20px;height:20px;pointer-events:none;opacity:0;z-index:5;transition:left .5s var(--ease), top .5s var(--ease), opacity .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.demo-cursor.show{opacity:1;}
.demo-click-ring{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;border:2px solid var(--accent-bright);opacity:0;transform:scale(.4);}
.demo-cursor.clicking .demo-click-ring{animation:cursorClick .5s ease-out;}
@keyframes cursorClick{0%{opacity:.9;transform:scale(.4);}70%{opacity:0;transform:scale(2.1);}100%{opacity:0;transform:scale(2.1);}}

/* Slide progress — makes clear this is a guided 3-step walkthrough, not a
   real screen recording. Each segment fills over its own step's
   duration; animation-play-state is toggled per step in the script. */
.demo-slidebar{padding:14px 20px 4px;}
.demo-caption{margin:0 0 10px;font-size:12.5px;color:var(--ink-muted);text-align:center;min-height:16px;}
.demo-progress{display:flex;gap:6px;}
.demo-seg{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;}
.demo-seg i{display:block;height:100%;width:0%;background:var(--accent-bright);border-radius:2px;}
.demo-seg.done i{width:100%;}
.demo-seg.active i{animation:segFill linear forwards;animation-duration:var(--seg-duration, 2.7s);}
@keyframes segFill{from{width:0%;}to{width:100%;}}

/* ---------- Trust strip ---------- */
.trust-strip{padding-block:52px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust-strip .head{text-align:center;font-size:15px;color:var(--ink-muted);margin-bottom:26px;}

/* Auto-scrolling marquee, Framer-style: the track holds the pill list
   twice back to back and animates exactly -50% (one full copy's width),
   which loops seamlessly since the second copy is pixel-identical to the
   first. Edges fade via mask so pills don't clip abruptly. */
.pill-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pill-track{display:flex;gap:9px;width:max-content;animation:pillScroll 28s linear infinite;}
.pill-track:hover{animation-play-state:paused;}
.pill-track .pill{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--ink-muted);background:var(--surface);border:1px solid var(--line);padding:8px 15px;border-radius:100px;white-space:nowrap;flex-shrink:0;}
/* Custom Rules is the one category a user actually configures themselves
   (their own regex patterns) rather than something Privacy Shield just
   detects out of the box — set apart in accent color, with a small pencil
   glyph, so it reads as "yours to define" against the rest of the strip. */
.pill-track .pill.pill-custom{color:var(--accent-bright);background:var(--accent-soft);border-color:rgba(127,160,255,.35);display:inline-flex;align-items:center;gap:5px;}
.pill-track .pill.pill-custom svg{flex-shrink:0;}
@keyframes pillScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .pill-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}
  .pill-track .dup{display:none;}
}

/* ---------- Problem / flow ---------- */
/* Both paths shown side by side, always visible (no phase sequencing).
   The only motion is a pulse that travels down each column's connector
   arrows on a loop, hinting at flow direction — pure CSS, no JS. */
.flow-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start;margin-top:8px;}
.flow-col{display:flex;flex-direction:column;align-items:center;}
.flow-col .flow-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;}
.flow-step{width:100%;max-width:240px;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);font-size:13.5px;text-align:center;}
.flow-step.accent{border-color:rgba(127,160,255,.35);background:var(--accent-soft);color:var(--accent-bright);font-weight:600;}
.flow-step.danger{border-color:rgba(240,119,108,.35);color:#FFB4AC;}
.flow-step.safe{border-color:rgba(95,201,169,.35);color:var(--safe);}
.flow-step.warn{border-color:rgba(230,160,60,.35);color:#F0C27B;}
/* Lights up the moment the relay dot on the arrow above it arrives —
   animation-delay (set inline per box) is timed to match that arrow's
   own arrival point in dotRelay's cycle. Every box but "Developer" gets
   this (nothing arrives into the very first step). */
.flow-step.arrives{animation:stepArrive 3.6s linear infinite;}
@keyframes stepArrive{
  0%{box-shadow:0 0 0 1px var(--accent-bright), 0 0 18px rgba(127,160,255,.55);filter:brightness(1.22);}
  18%{box-shadow:0 0 0 1px var(--accent-bright), 0 0 18px rgba(127,160,255,.55);filter:brightness(1.22);}
  55%{box-shadow:0 0 0 0 transparent;filter:brightness(1);}
  100%{box-shadow:0 0 0 0 transparent;filter:brightness(1);}
}
/* Dotted connector with a small glowing dot that travels top-to-bottom on
   a loop, then a static arrowhead where it points into the next step. */
.flow-arrow-v{
  position:relative;width:1px;height:28px;
  background-image:repeating-linear-gradient(to bottom, var(--line) 0 3px, transparent 3px 7px);
}
.flow-arrow-v::before{
  content:"";position:absolute;left:50%;bottom:-1px;width:6px;height:6px;
  border-right:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint);
  transform:translateX(-50%) rotate(45deg);
}
.flow-arrow-v::after{
  content:"";position:absolute;left:50%;top:0;width:5px;height:5px;border-radius:50%;
  background:var(--accent-bright);box-shadow:0 0 7px var(--accent-bright);
  transform:translateX(-50%);opacity:0;
  /* --relay-* custom properties are set inline per arrow (see index.html)
     so only one dot is ever traveling per column at a time — a true
     relay down the chain, not N independent loops running in parallel.
     They're set via CSS custom properties, not plain inline animation
     properties, because an inline `style` attribute on the real element
     can never reach its own ::after — custom properties are the one
     thing that still cascades through. */
  animation-name:var(--relay-name);
  animation-duration:var(--relay-duration);
  animation-delay:var(--relay-delay);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
/* Both columns now have exactly 4 arrows (5 steps each), so one shared
   keyframe covers both: its "active" window is one quarter of the full
   cycle — outside that window the dot sits invisible at rest. Paired
   with animation-delay = slotIndex * 0.9s and animation-duration = 3.6s
   (both set inline via --relay-*), every arrow in a column shares one
   synchronized cycle where exactly one dot is ever visible — and each
   box's own stepArrive delay (above) is timed to match when the arrow
   feeding into it reaches this keyframe's ~21% "arrived" point. */
@keyframes dotRelay{
  0%{top:0;opacity:0;}
  3%{opacity:1;}
  21%{opacity:1;}
  25%{top:calc(100% - 5px);opacity:0;}
  100%{top:calc(100% - 5px);opacity:0;}
}
.flow-vs{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:var(--font-mono);font-size:12px;align-self:center;}
@media (max-width:720px){.flow-compare{grid-template-columns:1fr;}.flow-vs{padding-block:4px;}}

/* ---------- How it works ---------- */
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.step-card{padding:28px 24px;position:relative;}
.step-card .num{font-family:var(--font-mono);font-size:13px;color:var(--accent-bright);margin-bottom:14px;}
.step-card h3{font-size:18px;margin-bottom:8px;}
.step-card p{margin:0;color:var(--ink-muted);font-size:14.5px;line-height:1.6;}
@media (max-width:860px){.steps-3{grid-template-columns:1fr;}}

/* ---------- Before/After ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.ba-col{padding:28px 26px;}
.ba-col.before{background:var(--bg-alt);border-right:1px solid var(--line);}
.ba-col.after{background:linear-gradient(180deg, rgba(95,201,169,.05), transparent);}
.ba-col .ba-label{display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.ba-col .ba-label .dot{width:7px;height:7px;border-radius:50%;}
.ba-col.before .dot{background:var(--danger);}
.ba-col.after .dot{background:var(--safe);}
.ba-code{font-family:var(--font-mono);font-size:13.5px;line-height:2;color:var(--ink-muted);overflow-x:auto;}
.ba-code .k{color:var(--ink-faint);}
.ba-code .v{color:var(--ink);}
.ba-code .redacted{color:var(--safe);}
@media (max-width:720px){.ba-grid{grid-template-columns:1fr;}.ba-col.before{border-right:none;border-bottom:1px solid var(--line);}}

/* ---------- Detection grid ---------- */
.detect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.detect-card{padding:22px;}
.detect-card .visual{font-family:var(--font-mono);font-size:12.5px;background:var(--bg-alt);border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;margin-bottom:16px;color:var(--ink-muted);}
.detect-card .visual .masked{color:var(--accent-bright);}
.detect-card h3{font-size:15px;margin-bottom:6px;}
.detect-card p{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.55;}

/* ---------- Benefits ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.benefit-card{background:var(--bg);padding:26px 22px;}
.benefit-card h3{font-size:15.5px;margin-bottom:8px;}
.benefit-card p{margin:0;font-size:13.5px;color:var(--ink-muted);line-height:1.6;}
@media (max-width:960px){.benefit-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.benefit-grid{grid-template-columns:1fr;}}

/* ---------- Architecture diagram ---------- */
.arch-diagram{font-family:var(--font-mono);font-size:13px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;background:var(--bg-alt);}
.arch-diagram .frame-label{text-align:center;color:var(--ink-faint);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;}
.arch-flow{display:flex;flex-direction:column;align-items:center;gap:0;max-width:320px;margin-inline:auto;}
.arch-node{width:100%;text-align:center;padding:11px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:13px;}
.arch-node.accent{border-color:rgba(127,160,255,.3);color:var(--accent-bright);}
.arch-arrow{width:1px;height:20px;background:var(--line-soft);position:relative;}
.arch-arrow::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--line-soft);}
.arch-facts{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-family:var(--font-sans);}
.arch-fact{display:flex;gap:9px;font-size:13.5px;color:var(--ink-muted);align-items:flex-start;}
.arch-fact svg{flex-shrink:0;margin-top:2px;color:var(--safe);}
@media (max-width:640px){.arch-facts{grid-template-columns:1fr;}}

/* ---------- Use cases ---------- */
.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.usecase-card{padding:24px 20px;}
.usecase-card h3{font-size:15.5px;margin-bottom:12px;}
.usecase-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;}
.usecase-card li{font-size:13px;color:var(--ink-muted);padding-left:14px;position:relative;}
.usecase-card li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--ink-faint);}
@media (max-width:960px){.usecase-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.usecase-grid{grid-template-columns:1fr;}}

/* ---------- Product showcase ---------- */
.showcase{display:flex;justify-content:center;}
.showcase img{max-width:340px;border-radius:20px;box-shadow:0 50px 100px -24px rgba(0,0,0,.6);}

/* ---------- Workflow (was "for developers") ---------- */
.workflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.workflow-copy p{color:var(--ink-muted);font-size:15.5px;line-height:1.7;margin:0 0 16px;}
.workflow-copy ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.workflow-copy li{font-size:14.5px;color:var(--ink-muted);padding-left:20px;position:relative;}
.workflow-copy li::before{content:"→";position:absolute;left:0;color:var(--accent-bright);}
.terminal{font-family:var(--font-mono);font-size:13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);overflow:hidden;}
.terminal .bar{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);}
.terminal .dot{width:9px;height:9px;border-radius:50%;}
.terminal .body{padding:20px;line-height:2;color:var(--ink-muted);}
.terminal .status-ok{color:var(--safe);font-weight:600;}
@media (max-width:860px){.workflow-grid{grid-template-columns:1fr;}}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin-inline:auto;}
.price-card{padding:32px 28px;display:flex;flex-direction:column;}
.price-card h3{font-size:19px;margin-bottom:6px;}
.price-card .desc{font-size:13.5px;color:var(--ink-muted);margin-bottom:22px;}
.price-card .amount{font-size:44px;font-weight:800;letter-spacing:-0.02em;margin-bottom:2px;}
.price-card .amount .cycle{font-size:14px;font-weight:500;color:var(--ink-muted);}
.price-card .profiles{font-size:13px;color:var(--accent-bright);font-weight:600;margin-bottom:22px;}
.price-card ul{margin:0 0 26px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;flex:1;}
.price-card li{font-size:13.5px;color:var(--ink-muted);padding-left:20px;position:relative;}
.price-card li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--safe);}
@media (max-width:640px){.pricing-grid{grid-template-columns:1fr;}}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin-inline:auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer;padding:20px 4px;font-size:15.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;list-style:none;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{font-family:var(--font-mono);font-size:18px;color:var(--ink-faint);transition:transform .2s ease;flex-shrink:0;}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item .a{padding:0 4px 20px;color:var(--ink-muted);font-size:14.5px;line-height:1.65;max-width:640px;}

/* ---------- Final CTA ---------- */
.final-cta{text-align:center;position:relative;overflow:hidden;}
.final-cta::before{content:"";position:absolute;top:0;left:50%;translate:-50% -35%;width:800px;height:460px;background:radial-gradient(ellipse at center, rgba(127,160,255,.12), transparent 65%);pointer-events:none;}
.final-cta .inner{position:relative;}
.final-cta h2{font-size:clamp(28px,4.4vw,46px);margin-bottom:14px;}
.final-cta p{color:var(--ink-muted);font-size:16px;margin-bottom:30px;}
.final-cta .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding-block:44px;}
/* .ftop carries the row layout that used to live on footer .wrap itself —
   that made .copy (a sibling of .ftop, not a child) a flex item riding
   alongside the brand/links row instead of stacking below it as its own
   full-width, border-topped line like its own rules already intended. */
footer .ftop{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;justify-content:space-between;}
footer .fcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin:0 0 14px;font-weight:600;}
footer .fcol a{display:block;font-size:13.5px;color:var(--ink-muted);text-decoration:none;margin-bottom:10px;}
footer .fcol a:hover{color:var(--ink);}
footer .fbrand p{color:var(--ink-muted);font-size:13.5px;max-width:220px;margin:12px 0 0;}
footer .flinks-row{display:flex;gap:48px;flex-wrap:wrap;}
footer .copy{margin-top:36px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-faint);}

/* ---------- Simple pages (security/privacy/terms) ---------- */
.doc-page{padding-top:150px;}
.doc-page .doc-head{max-width:720px;margin-bottom:48px;}
.doc-page .doc-head .updated{font-size:13px;color:var(--ink-faint);margin-top:10px;}
.doc-body{max-width:720px;}
.doc-body h2{font-size:22px;margin:40px 0 14px;}
.doc-body h2:first-child{margin-top:0;}
.doc-body p{color:var(--ink-muted);font-size:15px;line-height:1.75;margin:0 0 16px;}
.doc-body ul{color:var(--ink-muted);font-size:15px;line-height:1.75;padding-left:20px;}
.doc-body code{font-family:var(--font-mono);font-size:.9em;background:var(--surface);padding:2px 6px;border-radius:5px;}
.doc-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13.5px;}
.doc-body th,.doc-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-muted);}
.doc-body th{color:var(--ink);font-weight:600;}

/* ---------- Security page: interactive components ---------- */
.quicknav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px;}
.quicknav a{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-muted);background:var(--surface);border:1px solid var(--line);padding:7px 13px;border-radius:100px;text-decoration:none;transition:color .15s ease,border-color .15s ease;}
.quicknav a:hover{color:var(--ink);border-color:var(--ink-faint);}

.sec-block{scroll-margin-top:100px;margin-top:64px;}
.sec-block:first-of-type{margin-top:44px;}
/* Centered, matching the .section-head.center rhythm used everywhere
   else on the site — this page's headings were left-aligned while its
   own flow-diagram centered itself independently, which is what read as
   misaligned/cluttered on wide screens. */
.sec-block h2{font-size:22px;margin:0 0 6px;text-align:center;}
.sec-block .sec-sub{color:var(--ink-muted);font-size:14.5px;margin:0 auto 24px;max-width:640px;text-align:center;}

.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
.trust-card{padding:20px;}
.trust-card .trust-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.trust-card .trust-icon{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.trust-card h3{font-size:14.5px;margin:0;}
.trust-card .trust-where{font-size:12px;color:var(--ink-faint);margin:0 0 14px;}
.trust-card .trust-list{margin:0 0 10px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.trust-card .trust-list li{font-size:12.5px;line-height:1.5;padding-left:18px;position:relative;color:var(--ink-muted);}
.trust-card .trust-list.can li::before{content:"✓";position:absolute;left:0;color:var(--safe);font-weight:700;}
.trust-card .trust-list.cannot li::before{content:"✕";position:absolute;left:0;color:var(--ink-faint);font-weight:700;}

.perm-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:start;}
.perm-requested{display:flex;flex-direction:column;gap:12px;}
.perm-card{padding:18px 20px;display:flex;gap:14px;align-items:flex-start;}
.perm-card .perm-icon{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.perm-card code{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);}
.perm-card p{margin:4px 0 0;font-size:13px;color:var(--ink-muted);line-height:1.55;}
.not-req-panel{padding:18px 20px;}
.not-req-panel .not-req-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;}
.not-req-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;}
.not-req-badge{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);background:var(--bg-alt);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;}
.not-req-badge svg{flex-shrink:0;color:var(--danger);}
@media (max-width:760px){.perm-layout{grid-template-columns:1fr;}}