/* ============================================================================
   VERDICT — Legal Intelligence System
   Design system: near-monochrome silver on near-black, glass panels, hairlines.
   Sections:
     01 tokens        06 header       11 pricing      16 dashboard
     02 reset/base    07 hero         12 guides/faq   17 legal docs
     03 typography    08 sections     13 forms/auth   18 footer
     04 layout        09 overlay      14 tables       19 utilities
     05 buttons       10 cards        15 steps/stats  20 responsive
   ========================================================================= */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  /* surfaces */
  --bg:        #050507;
  --bg-1:      #0a0b0e;
  --bg-2:      #101216;
  --bg-3:      #15181d;

  /* text */
  --t:         #e9ebef;
  --t-2:       #c3c7ce;
  --m:         #8d929c;
  --m-2:       #666c77;

  /* hairlines */
  --line:      rgba(255, 255, 255, .09);
  --line-2:    rgba(255, 255, 255, .16);
  --line-3:    rgba(255, 255, 255, .30);

  /* accents */
  --silver-1:  #ffffff;
  --silver-2:  #c9ccd3;
  --silver-3:  #8a8e97;
  --ok:        #7ee0a0;
  --warn:      #e8c07a;
  --err:       #ef8f8f;
  --info:      #9dc0f0;

  --grad-silver: linear-gradient(180deg, #fff 0%, #8a8e97 100%);
  --grad-btn:    linear-gradient(180deg, #f6f7f9 0%, #b8bcc4 100%);
  --grad-panel:  linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  --grad-glass:  linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));

  /* shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --pill: 999px;

  /* metrics */
  --w: 1280px;
  --w-narrow: 880px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec-y: clamp(72px, 9vw, 132px);
  --hd-h: 76px;

  /* effects */
  --sh-1: 0 18px 50px rgba(0, 0, 0, .55);
  --sh-2: 0 34px 90px rgba(0, 0, 0, .7);
  --glow: 0 0 60px rgba(150, 170, 220, .14);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* type */
  --fd: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: dark;
}

/* ------------------------------------------------------------ 02 reset/base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hd-h) + 20px);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t);
  font: 400 15px/1.65 var(--fs);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* film grain — one inline SVG, no extra request.
   Sits BELOW the header (z 60) so the blurred header is never recomposited
   against a fixed noise layer, which makes it shimmer while scrolling.
   translateZ(0) keeps the noise on its own layer instead of re-rasterising. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: .038;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; display: block; }
/* Artwork must not behave like content: dragging the logo copies the image and
   leaves a ghost thumbnail, which reads as broken in a client demo. Text stays
   selectable — only images are locked down. */
img, svg {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero-art .mark, .hero-art .orbit,
.brand img, .auth .mark, .ft-brand img { pointer-events: none; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* visible focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--line-3);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(220, 228, 245, .22); color: #fff; }

/* slim scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 9px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--t); color: #0c0d10; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600; font-size: 13px;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ 03 typography */
h1, h2, h3, h4, h5 {
  font-family: var(--fd);
  font-weight: 500;
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.12;
}

h1, .h1 {
  font-size: clamp(29px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.025em;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 b, .h1 b { font-weight: 600; }

h2, .h2 { font-size: clamp(24px, 3.1vw, 42px); line-height: 1.14; }
h3, .h3 { font-size: clamp(18px, 1.9vw, 26px); }
h4, .h4 { font-size: 16px; font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* eyebrow label: 01 / SECTION NAME */
.k, .eyebrow {
  font: 500 10.5px var(--fd);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--m);
  display: block;
}

.lead {
  font-size: clamp(14.5px, 1.25vw, 17px);
  line-height: 1.78;
  color: var(--t-2);
  max-width: 56ch;
}
.sub { color: var(--m); font-size: 14px; max-width: 58ch; }
.muted { color: var(--m); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; letter-spacing: .04em; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0; }

.silver {
  background: var(--grad-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- 04 layout */
.w {
  width: min(var(--w), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.w-narrow { width: min(var(--w-narrow), 100% - var(--gutter) * 2); margin-inline: auto; }

.sec { padding: var(--sec-y) 0; }
.sec-tight { padding: calc(var(--sec-y) * .62) 0; }
.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.sec-head.center { align-items: center; text-align: center; margin-inline: auto; }
.sec-head .h2 { max-width: 22ch; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------- 05 buttons */
.btn, .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .035);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn:hover, .pill:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .07); transform: translateY(-2px); }
.btn:active, .pill:active { transform: translateY(0); }

.btn-lt, .lt {
  background: var(--grad-btn);
  color: #0c0d10;
  border-color: #fff;
  box-shadow: 0 8px 30px rgba(255, 255, 255, .13);
}
.btn-lt:hover, .lt:hover { box-shadow: 0 12px 40px rgba(255, 255, 255, .22); background: linear-gradient(180deg, #fff, #c6c9d1); }

.btn-lg { padding: 17px 30px; font-size: 14px; }
.btn-sm { padding: 9px 16px; font-size: 12px; }
.btn-block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-danger { border-color: rgba(239,143,143,.4); color: var(--err); }
.btn-danger:hover { background: rgba(239,143,143,.1); border-color: rgba(239,143,143,.7); }

.arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow, .pill:hover .arrow { transform: translateX(3px); }

/* filter chips (knowledge base) */
.chip { border-radius: var(--pill); }
.chip.on { background: var(--t); color: #0c0d10; border-color: var(--t); }
.chip.on:hover { background: #fff; }

/* highlighted placeholder inside the legal templates */
.ph {
  color: var(--warn);
  border-bottom: 1px dashed rgba(232, 192, 122, .45);
  white-space: nowrap;
}

/* shown only on narrow screens, where wide tables scroll sideways */
.show-sm { display: none; }

/* text link with underline reveal */
.link {
  color: var(--t); border-bottom: 1px solid var(--line-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link:hover { border-color: #fff; }

/* ----------------------------------------------------------------- 06 header */
/* Note: the header deliberately keeps a constant height. Changing it on scroll
   shifted every element below by 12px, so nudging the scroll position around the
   trigger point made the whole top of the page jump. Only paint properties
   (background, border, shadow) change now, plus a scale on the inner content,
   which the compositor handles without touching layout.
   translateZ(0) gives the blurred header its own layer — without it a sticky
   backdrop-filter element visibly shivers during scroll in Chrome. */
.hd {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 5, 7, .72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transform: translateZ(0);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.hd.sc {
  background: rgba(5, 5, 7, .94);
  border-color: var(--line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.hd .w {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; height: var(--hd-h);
  transition: transform .3s var(--ease);
  transform-origin: 50% 50%;
}
.hd.sc .w { transform: scale(.955); }

.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { width: 38px; }
.brand .word {
  font: 400 14px var(--fd);
  letter-spacing: .42em;
  text-transform: uppercase;
  padding-left: .1em;
}
@media (max-width: 420px) { .brand .word { font-size: 12px; letter-spacing: .3em; } }

.nav { display: flex; gap: 30px; font-size: 13px; color: var(--t-2); }
.nav a {
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-color: #fff; }

.hd-act { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  flex-shrink: 0;
}
.burger i { display: block; width: 17px; height: 1.5px; background: var(--t); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(6, 6, 9, .97);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  padding: calc(var(--hd-h) + 30px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.open { opacity: 1; visibility: visible; transform: none; }
.drawer a.dl {
  font: 500 clamp(20px, 6vw, 30px) var(--fd);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 14px;
  color: var(--t-2);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.drawer a.dl:hover, .drawer a.dl[aria-current="page"] { color: #fff; padding-left: 8px; }
.drawer a.dl span { font: 500 10px var(--fs); color: var(--m-2); letter-spacing: .1em; }
.drawer .d-cta { margin-top: 26px; display: grid; gap: 10px; }
.drawer .d-cta .btn { width: 100%; padding: 16px; }
body.lock { overflow: hidden; }

/* ------------------------------------------------------------------- 07 hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
/* The hero backdrop drifts very slowly. It is kept on its own composited layer
   so the sticky blurred header above it does not have to re-read a backdrop
   that changes every frame — that combination is what made the top shimmer. */
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../img/hero-city.jpg");
  background-size: cover;
  background-position: center 38%;
  opacity: .70;
  transform: scale(1.04) translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  animation: heroDrift 40s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.4%, -1.2%, 0); }
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 72% 34%, rgba(70, 84, 116, .34) 0%, transparent 62%),
    linear-gradient(90deg, var(--bg) 14%, rgba(5,5,7,.88) 44%, rgba(5,5,7,.32) 76%, rgba(5,5,7,.66) 100%),
    linear-gradient(0deg, var(--bg) 3%, transparent 46%);
}

.hero .w {
  position: relative;
  display: grid;
  grid-template-columns: 1.14fr .86fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  min-height: min(84vh, 780px);
  padding: clamp(56px, 8vw, 104px) 0 clamp(70px, 9vw, 120px);
}

.hero-copy { max-width: 640px; }
.hero h1 { margin: 22px 0 24px; }
.hero .lead { max-width: 52ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-meta div { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--m); }
.hero-meta b { color: var(--t); font-weight: 600; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); flex-shrink: 0; }

/* right-hand logo art with orbit */
/* The glow used to be a 70px drop-shadow on the floating logo, so the browser
   re-rasterised that blur on every animation frame. It is now a separate static
   radial gradient that is rasterised once, and the logo only moves. */
.hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.hero-art::before {
  content: "";
  position: absolute;
  width: 74%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(186, 206, 240, .26) 0%, rgba(150, 175, 220, .10) 42%, transparent 68%);
  pointer-events: none;
}
.hero-art .mark {
  position: relative;
  width: min(100%, 420px);
  transform: translateZ(0);
  will-change: transform;
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate3d(0, -9px, 0); }
  50%      { transform: translate3d(0, 9px, 0); }
}
/* Orbit ring. Drawn as an SVG so the travelling dot can follow the actual
   ellipse curve via <animateMotion>.
   The previous version translated a straight track across the ellipse's
   bounding box, so the dot only touched the ring at the centre and drifted
   outside it everywhere else, and the translation snapped back to the start
   on every cycle. A path that begins and ends at the same point loops
   seamlessly and always sits on the ring. */
.orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 116%;
  height: auto;
  overflow: visible;          /* let the dot's glow escape the viewBox */
  transform: translate(-50%, -50%) rotate(-7deg);
  pointer-events: none;
  user-select: none;
}
/* the dot is decorative: hide it entirely when motion is unwelcome */
@media (prefers-reduced-motion: reduce) {
  .orbit-dot { display: none; }
}
.hero-tag {
  position: absolute; top: 4%; right: 0;
  font: 400 10px var(--fd); letter-spacing: .3em; color: var(--t-2);
}
.hero-sig {
  position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%);
  text-align: center;
  font: 400 9.5px var(--fd); letter-spacing: .34em; color: var(--m);
  white-space: nowrap;
}

/* --------------------------------------------------------------- 08 sections */
.strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(13, 14, 18, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin-top: -52px;
  box-shadow: var(--sh-1);
}
.strip > div {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 26px;
  border-right: 1px solid var(--line);
}
.strip > div:last-child { border-right: 0; }
.strip i {
  font-style: normal; font-size: 24px; line-height: 1;
  width: 34px; flex-shrink: 0; text-align: center;
  filter: grayscale(1) brightness(1.6);
}
.strip b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.strip small { color: var(--m); font-size: 11.5px; line-height: 1.5; display: block; }

/* feature split: copy | cards | overlay */
.split-3 {
  display: grid;
  grid-template-columns: .96fr 1.02fr 1.02fr;
  gap: clamp(20px, 2.6vw, 38px);
  align-items: center;
}
/* the copy column is narrow, so its heading steps down a size */
.split-3 .h2 { font-size: clamp(21px, 2.3vw, 32px); }

/* --------------------------------------------------------------- 09 overlay */
.ov { perspective: 1100px; }
.ov-card {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px 22px;
  background: rgba(17, 18, 23, .93);
  box-shadow: var(--sh-2), var(--glow);
  font-size: 13px;
  transform: rotateY(-9deg) rotateZ(1.6deg);
  transition: transform .5s var(--ease);
}
.ov:hover .ov-card { transform: rotateY(-4deg) rotateZ(.6deg) translateY(-4px); }
.ov-card header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 400 10px var(--fd); letter-spacing: .28em; color: var(--m);
  padding-bottom: 13px; margin-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.ov-card header em { font-style: normal; font-family: var(--fs); letter-spacing: .04em; color: var(--ok); }
.ov-card h4 { margin: 0 0 12px; font-size: 15.5px; }
.ov-card p { margin: 7px 0; color: var(--t-2); }
.ov-card p b { color: #fff; font-weight: 600; }
.ov-card .row-warn b { color: var(--warn); }
.ov-card footer {
  margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line);
  text-align: center; color: var(--m); font-size: 11px;
}
.ov-card kbd {
  font: 600 10px var(--fs); background: rgba(255,255,255,.09);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px;
}
.ov-glow {
  /* no horizontal bleed: an absolutely positioned box still extends the page's
     scrollable overflow, which showed up as a scrollbar on narrow phones */
  position: absolute; inset: -28% 0 -12%;
  background: radial-gradient(ellipse at 60% 40%, rgba(120, 150, 220, .18), transparent 62%);
  z-index: -1; pointer-events: none;
}

/* ------------------------------------------------------------------ 10 cards */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 2vw, 26px);
  background: var(--grad-panel);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card i.ic {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-style: normal; font-size: 19px;
  background: rgba(255,255,255,.035);
  filter: grayscale(1) brightness(1.5);
}
.card b.t { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.card p { color: var(--m); font-size: 12.5px; margin: 0; line-height: 1.6; }

/* numbered feature list */
.feat { display: grid; gap: 2px; }
.feat li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.feat li:last-child { border-bottom: 0; }
.feat .n { font: 500 10px var(--fd); color: var(--m-2); letter-spacing: .1em; padding-top: 4px; }

/* ------------------------------------------------------------------- 11 pricing */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--grad-panel);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.tier:hover { border-color: var(--line-2); transform: translateY(-4px); }
.tier.hot {
  border-color: rgba(255, 255, 255, .42);
  background: linear-gradient(150deg, rgba(188, 200, 224, .15), rgba(255, 255, 255, .015) 60%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 70px rgba(140, 165, 220, .10);
}
.tier .badge {
  align-self: flex-start;
  background: var(--t); color: #0c0d10;
  font: 700 9.5px var(--fs); letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--pill); margin-bottom: 16px;
}
.tier .tname { font: 600 clamp(22px, 2.4vw, 30px) var(--fd); margin: 12px 0 8px; letter-spacing: -.01em; }
.tier .tdesc { color: var(--m); font-size: 12.5px; min-height: 3.2em; }
.tier .price { display: flex; align-items: baseline; gap: 7px; margin: 22px 0 6px; }
.tier .price b { font: 600 clamp(28px, 3.4vw, 40px) var(--fd); letter-spacing: -.02em; }
.tier .price span { color: var(--m); font-size: 13px; }
.tier .tnote { color: var(--m-2); font-size: 11px; margin-bottom: 20px; }
.tier ul {
  list-style: none; padding: 20px 0 0; margin: 0 0 26px;
  border-top: 1px solid var(--line); flex: 1;
}
.tier li { position: relative; padding: 6px 0 6px 20px; color: var(--t-2); font-size: 13px; }
.tier li::before { content: "+"; position: absolute; left: 0; color: var(--m); }
.tier li.off { color: var(--m-2); }
.tier li.off::before { content: "–"; }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th {
  font: 500 10.5px var(--fd); letter-spacing: .22em; text-transform: uppercase;
  color: var(--m); vertical-align: bottom; padding-bottom: 16px;
}
.cmp thead th.hi { color: #fff; }
.cmp tbody tr:hover { background: rgba(255, 255, 255, .022); }
.cmp td:not(:first-child) { text-align: center; }
.cmp thead th:not(:first-child) { text-align: center; }
.cmp .yes { color: var(--ok); }
.cmp .no { color: var(--m-2); }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255,255,255,.014); }
.cmp-wrap .cmp { min-width: 620px; }
.cmp-group td {
  font: 500 10px var(--fd); letter-spacing: .22em; text-transform: uppercase;
  color: var(--m-2); background: rgba(255,255,255,.02); padding: 12px 18px;
}

/* --------------------------------------------------------- 12 guides & faq */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.tile {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 210px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  background: var(--grad-panel);
  color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
  overflow: hidden;
}
.tile:hover { border-color: var(--line-2); transform: translateY(-3px); }
.tile .ic { font-size: 22px; margin-bottom: auto; filter: grayscale(1) brightness(1.5); font-style: normal; }
.tile b { display: block; font-size: 15px; font-weight: 600; margin: 18px 0 7px; }
.tile p { color: var(--m); font-size: 12.5px; margin: 0 0 16px; }
.tile .more { margin-top: auto; font: 500 10px var(--fd); letter-spacing: .18em; color: var(--t-2); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at 100% 0%, rgba(150, 175, 230, .12), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.tile:hover::after { opacity: 1; }

/* photo-backed tiles. The image URL is declared HERE rather than in a style
   attribute: a relative url() that reaches the page through a custom property
   is resolved against this stylesheet, so an inline "assets/img/..." path would
   silently 404 from assets/css/. Declaring it here keeps ../img/ correct.
   The copy sits in the lower half (the icon's margin-bottom:auto pushes it
   down), so the gradient only darkens from the middle onward and the photo
   stays readable up top; brightness compensates for the dark graded sources. */
.tile--water    { --ph: url("../img/city-water.jpg"); }
.tile--police   { --ph: url("../img/police-night.jpg"); }
.tile--downtown { --ph: url("../img/city-downtown.jpg"); }

.tile.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(8, 9, 12, .08) 0%, rgba(8, 9, 12, .22) 30%,
                            rgba(8, 9, 12, .80) 52%, rgba(8, 9, 12, .94) 74%,
                            rgba(8, 9, 12, .97) 100%),
    var(--ph);
  background-size: cover, cover;
  background-position: center, center;
  filter: grayscale(.5) brightness(1.9) contrast(1.06);
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.tile.has-photo:hover::before { transform: scale(1.05); filter: grayscale(.25) brightness(2.15) contrast(1.06); }
.tile.has-photo > * { position: relative; z-index: 1; }
.tile.has-photo .ic { filter: grayscale(1) brightness(2.4) drop-shadow(0 2px 8px rgba(0, 0, 0, .9)); }
.tile.has-photo b { text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.tile.has-photo p { color: #a8aeb8; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(14.5px, 1.4vw, 16.5px); font-weight: 600;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary::after {
  content: "+"; flex-shrink: 0;
  font: 400 20px var(--fd); color: var(--m);
  transition: transform .3s var(--ease), color .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); color: #fff; }
.faq .ans { padding: 0 0 24px; color: var(--m); font-size: 13.5px; line-height: 1.75; max-width: 82ch; }
.faq .ans p { margin: 0 0 .8em; }

/* ----------------------------------------------------------- 13 forms & auth */
/* Centred stage with a photographic backdrop. Used by the auth pages and the
   404 page — the two places with the most empty space on the site.
   The image is a real element with an inline background-image rather than a
   custom property, because a relative url() reaching the page through var()
   would resolve against this stylesheet instead of the document. */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 116px);
  min-height: clamp(560px, 72vh, 880px);
}
.stage-bg {
  position: absolute; inset: -4% 0; z-index: -2;
  background-size: cover;
  background-position: center 46%;
  filter: grayscale(.68) brightness(.84) contrast(1.1);
  opacity: .84;
}
.stage::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 58% 58% at 50% 46%, rgba(5, 5, 7, .5) 0%, rgba(5, 5, 7, .88) 72%),
    linear-gradient(0deg, var(--bg) 3%, transparent 42%, var(--bg) 100%);
}
.stage > *:not(.stage-bg) { position: relative; }

.auth-wrap { display: grid; place-items: center; padding: clamp(40px, 7vw, 90px) 0 clamp(60px, 8vw, 110px); }
.auth {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 42px);
  background: var(--grad-glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--sh-2);
}
.auth .mark { width: 52px; margin: 0 auto 18px; opacity: .95; }
.auth h1 { font-size: clamp(22px, 2.6vw, 30px); text-align: center; margin-bottom: 8px; }
.auth .hint { text-align: center; color: var(--m); font-size: 13px; margin-bottom: 26px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--m); margin-bottom: 8px; font-weight: 600; }
.input, .field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .34);
  color: var(--t);
  font-size: 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .input::placeholder { color: var(--m-2); }
.field input:focus, .input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--line-3);
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .05);
}
.field .err-msg { display: none; color: var(--err); font-size: 11.5px; margin-top: 6px; }
.field.bad input { border-color: rgba(239, 143, 143, .65); }
.field.bad .err-msg { display: block; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--m); font-size: 15px;
}
.pw-toggle:hover { color: var(--t); background: rgba(255,255,255,.06); }

/* password strength meter */
.meter { display: flex; gap: 4px; margin-top: 8px; }
.meter i { height: 3px; flex: 1; border-radius: 3px; background: rgba(255,255,255,.12); transition: background .3s var(--ease); }
.meter[data-s="1"] i:nth-child(1) { background: var(--err); }
.meter[data-s="2"] i:nth-child(-n+2) { background: var(--warn); }
.meter[data-s="3"] i:nth-child(-n+3) { background: #cfe08a; }
.meter[data-s="4"] i { background: var(--ok); }

.check { display: flex; align-items: flex-start; gap: 11px; font-size: 12.5px; color: var(--t-2); cursor: pointer; margin: 4px 0 18px; }
.check input { appearance: none; width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px;
  border: 1px solid var(--line-2); border-radius: 5px; background: rgba(0,0,0,.4);
  transition: background .2s, border-color .2s; position: relative; cursor: pointer; }
.check input:checked { background: var(--t); border-color: var(--t); }
.check input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #0c0d10; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check a { color: var(--t); border-bottom: 1px solid var(--line-2); }

.auth-alt { text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--m); }

/* segmented steps */
.steps-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.steps-bar .s { flex: 1; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; transition: background .35s var(--ease); }
.steps-bar .s.on { background: var(--t); }

/* one-time code inputs */
.otp { display: flex; gap: 9px; justify-content: space-between; margin: 6px 0 8px; }
.otp input {
  width: 100%; aspect-ratio: 1 / 1.15; min-width: 0;
  text-align: center;
  font: 600 clamp(18px, 4vw, 24px) var(--fd);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: rgba(0,0,0,.4); color: var(--t);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.otp input:focus { outline: none; border-color: #fff; transform: translateY(-2px); }
.otp input.filled { border-color: var(--line-3); }

.note {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; background: rgba(255,255,255,.025);
  font-size: 12.5px; color: var(--m); line-height: 1.6;
}
.note .ni { flex-shrink: 0; font-size: 15px; filter: grayscale(1) brightness(1.6); }
.note.warn { border-color: rgba(232,192,122,.3); background: rgba(232,192,122,.055); color: #e6d3ae; }
.note.ok { border-color: rgba(126,224,160,.28); background: rgba(126,224,160,.05); color: #bfe9cd; }

/* --------------------------------------------------------------- 14 tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.014); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.tbl th, .tbl td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl thead th { font: 500 10px var(--fd); letter-spacing: .2em; text-transform: uppercase; color: var(--m); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(255,255,255,.022); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--pill);
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  border: 1px solid var(--line-2); color: var(--t-2);
}
.tag.ok { color: var(--ok); border-color: rgba(126,224,160,.34); background: rgba(126,224,160,.07); }
.tag.warn { color: var(--warn); border-color: rgba(232,192,122,.34); background: rgba(232,192,122,.07); }
.tag.err { color: var(--err); border-color: rgba(239,143,143,.34); background: rgba(239,143,143,.07); }
.tag.info { color: var(--info); border-color: rgba(157,192,240,.34); background: rgba(157,192,240,.07); }

/* --------------------------------------------------------- 15 steps & stats */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.timeline > div { position: relative; padding: 32px 26px 8px 0; border-right: 1px solid var(--line); }
.timeline > div:last-child { border-right: 0; padding-right: 0; }
.timeline > div::before {
  content: ""; position: absolute; top: -4.5px; left: 0;
  width: 8px; height: 8px; border-radius: 50%; background: var(--t);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline .n { font: 500 10px var(--fd); letter-spacing: .24em; color: var(--m-2); display: block; margin-bottom: 14px; }
.timeline b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.timeline p { color: var(--m); font-size: 12.5px; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.stat { padding: 26px 0; border-top: 1px solid var(--line); }
.stat b { display: block; font: 600 clamp(28px, 3.6vw, 46px) var(--fd); letter-spacing: -.02em; margin-bottom: 6px; }
.stat span { color: var(--m); font-size: 12.5px; }

/* cinematic photo band — full-bleed image with copy and figures laid over it */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 7vw, 104px) 0;
}
.band-bg {
  position: absolute; inset: -6% 0; z-index: -2;
  background-size: cover;
  background-position: center 42%;
  filter: grayscale(.7) brightness(.85) contrast(1.08);
  opacity: .92;
}
.band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 72% 90% at 22% 50%, rgba(6, 7, 10, .95) 0%, rgba(6, 7, 10, .55) 58%, transparent 82%),
    linear-gradient(0deg, rgba(5, 5, 7, .96) 2%, rgba(5, 5, 7, .38) 55%, rgba(5, 5, 7, .9) 100%);
}
.band-in {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.band-copy .h2 { max-width: 20ch; }
.band .stats { gap: clamp(16px, 2.4vw, 30px); }
.band .stat { border-top-color: rgba(255, 255, 255, .2); }
.band .stat b { font-size: clamp(26px, 3.2vw, 40px); }
.band .stat span { color: #a7adb8; }
/* facts list used by the pricing and download bands */
.band .feat li { border-bottom-color: rgba(255, 255, 255, .14); padding: 14px 0; }
.band .feat .n { color: rgba(255, 255, 255, .45); }
.band .feat li > span:last-child { color: #b9bec7; font-size: 13.5px; line-height: 1.65; }
.band .feat li > span:last-child b { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------ 16 dashboard */
.dash {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
  padding: clamp(28px, 4vw, 52px) 0 calc(var(--sec-y) * .8);
}
.side {
  position: sticky; top: calc(var(--hd-h) + 20px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--grad-panel);
  min-width: 0;
}
.side .who { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.side .av {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-btn); color: #0c0d10;
  font: 600 15px var(--fd);
}
.side .who b { display: block; font-size: 13.5px; font-weight: 600; }
.side .who small { color: var(--m); font-size: 11.5px; word-break: break-all; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--t-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.side nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.side nav a[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; }
.side nav a i { font-style: normal; width: 18px; text-align: center; filter: grayscale(1) brightness(1.4); }
.side .logout { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.dash-main { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; }
/* Grid and flex items default to min-width:auto, so a wide table inside a panel
   pushed the whole column past the viewport instead of scrolling inside its own
   wrapper. min-width:0 lets the wrappers shrink and keep their own scrollbar. */
.dash-main > * { min-width: 0; }
.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--grad-panel);
  min-width: 0;
}
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.panel > header h2 { font-size: clamp(17px, 1.7vw, 22px); }
.panel > header .k { margin-bottom: 6px; }

.dash-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 32px);
  background: rgba(16, 18, 22, .9);
}
.dash-hero .bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/city-downtown.jpg");
  background-size: cover; background-position: center;
  opacity: .3;
}
.dash-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(95deg, rgba(10,11,14,.96) 30%, rgba(10,11,14,.62) 100%);
}
.dash-hero > * { position: relative; z-index: 2; }
.dash-hero .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.dash-hero .plan { font: 600 clamp(24px, 3.2vw, 36px) var(--fd); letter-spacing: -.02em; margin: 10px 0 6px; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin-top: 24px; border-top: 1px solid var(--line); }
.kv > div { padding: 16px 18px 4px 0; }
.kv dt { font: 500 9.5px var(--fd); letter-spacing: .2em; text-transform: uppercase; color: var(--m-2); margin-bottom: 7px; }
.kv dd { margin: 0; font-size: 15px; font-weight: 600; }

.bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; border-radius: 5px; background: var(--grad-btn); transition: width .8s var(--ease); }

.acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.act-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 18px; background: rgba(255,255,255,.022);
  text-align: left; color: inherit;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.act-card:hover { border-color: var(--line-2); background: rgba(255,255,255,.05); transform: translateY(-2px); }
.act-card i { font-style: normal; font-size: 8px; color: var(--m); transition: transform .25s var(--ease); }
.act-card:hover i { transform: translateX(3px); color: #fff; }
.act-card b { display: block; font-size: 13.5px; font-weight: 600; }
.act-card small { color: var(--m); font-size: 11.5px; }
.act-card .ic { font-size: 19px; filter: grayscale(1) brightness(1.4); flex-shrink: 0; }

.hwid {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; background: rgba(0,0,0,.3);
}
.hwid code { font: 600 14px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .1em; color: var(--t); word-break: break-all; }

/* ----------------------------------------------------------- 17 legal docs */
.doc { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: start; padding: clamp(34px, 5vw, 64px) 0 var(--sec-y); }
.toc { position: sticky; top: calc(var(--hd-h) + 20px); border-left: 1px solid var(--line); padding-left: 18px; }
.toc .k { margin-bottom: 14px; }
.toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: 9px; }
.toc a { display: block; font-size: 12.5px; color: var(--m); line-height: 1.45; transition: color .2s var(--ease); }
.toc a:hover, .toc a.on { color: #fff; }
.doc-body { max-width: 76ch; }
.doc-body h2 { font-size: clamp(19px, 2vw, 25px); margin: 44px 0 16px; scroll-margin-top: 120px; }
.doc-body h2:first-of-type { margin-top: 0; }
.doc-body h3 { font-size: 15.5px; margin: 26px 0 10px; }
.doc-body p, .doc-body li { color: var(--t-2); font-size: 14px; line-height: 1.8; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul { list-style: none; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.doc-body ul li { position: relative; padding-left: 20px; }
.doc-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--m-2); }
.doc-body strong { color: var(--t); font-weight: 600; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  padding: 16px 18px; margin-bottom: 34px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255,255,255,.022);
  font-size: 12px; color: var(--m);
}

/* --------------------------------------------------------------- 18 footer */
/* no top margin: sections already carry bottom padding, and the support band
   sits straight above the footer with a single hairline between them */
.ft { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(11,12,15,.6), var(--bg)); margin-top: 0; }
.ft-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(22px, 3vw, 44px); padding: clamp(44px, 5vw, 68px) 0 44px; }
.ft-brand .brand { margin-bottom: 16px; }
.ft-brand p { color: var(--m); font-size: 12.5px; max-width: 34ch; }
.ft h4 { font: 500 10px var(--fd); letter-spacing: .24em; text-transform: uppercase; color: var(--m-2); margin-bottom: 16px; }
.ft ul { display: flex; flex-direction: column; gap: 10px; }
.ft ul a { font-size: 13px; color: var(--t-2); transition: color .2s var(--ease); }
.ft ul a:hover { color: #fff; }
.ft-bot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 0 30px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--m-2);
}
.ft-bot .sigs { display: flex; gap: 22px; flex-wrap: wrap; }
.ft-bot .sig { font: 400 9px var(--fd); letter-spacing: .26em; text-transform: uppercase; }

/* support band */
.sup {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  background: linear-gradient(115deg, #14161b 0%, #0a0b0e 55%, #07080a 100%);
}
.sup .bg { position: absolute; inset: 0; background-image: url("../img/city-water.jpg"); background-size: cover; background-position: center; opacity: .2; }
.sup::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,12,.94), rgba(8,9,12,.55) 60%, rgba(8,9,12,.8)); }
.sup .w { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; padding: clamp(48px, 6vw, 84px) 0; }
.sup h2 { max-width: 20ch; }
.sup .sup-act { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------------------------------------------------------------- 19 utilities */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 30px; } .mt-4 { margin-top: 44px; }
.mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 30px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--m-2); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--t); }
.breadcrumb span { opacity: .5; }

.page-head { padding: clamp(48px, 6vw, 88px) 0 clamp(26px, 3vw, 44px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-head .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  opacity: .42;
  filter: grayscale(.6) brightness(.8) contrast(1.08);
}
.page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 6%, rgba(5,5,7,.72)); }
.page-head .w { position: relative; z-index: 2; }
.page-head h1 { font-size: clamp(28px, 4.2vw, 56px); margin: 18px 0 18px; }

/* scroll reveal — hidden only when JS is running, so content is never lost */
.rv { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; } .rv-d4 { transition-delay: .28s; }

/* toast + modal */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 120;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--t); color: #0c0d10;
  padding: 13px 22px; border-radius: var(--pill);
  font-size: 12.5px; font-weight: 600;
  max-width: min(90vw, 460px); text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

dialog {
  width: min(540px, 100% - 32px);
  background: var(--bg-2); color: var(--t);
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--sh-2);
}
dialog::backdrop { background: rgba(0, 0, 0, .76); backdrop-filter: blur(6px); }
dialog h2 { font-size: 20px; margin-bottom: 14px; }
dialog p { color: var(--m); font-size: 13.5px; margin-bottom: 24px; }
dialog .d-act { display: flex; gap: 11px; flex-wrap: wrap; }

/* ------------------------------------------------------------ 20 responsive */

/* large tablet / small desktop */
@media (max-width: 1180px) {
  .split-3 { grid-template-columns: 1fr 1fr; }
  .split-3 .ov { grid-column: 1 / -1; max-width: 620px; margin: 8px auto 0; }
  .ft-top { grid-template-columns: 1fr 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}

/* the header runs out of room slightly before the nav collapses */
@media (max-width: 1120px) {
  .hd-act .hide-md { display: none; }
}

/* tablet portrait */
@media (max-width: 980px) {
  :root { --hd-h: 68px; }

  .nav { display: none; }
  .burger { display: flex; }
  .hd-act .btn-ghost-hide { display: none; }

  .hero .w { grid-template-columns: 1fr; min-height: 0; padding-top: 52px; text-align: left; }
  .hero-art { order: -1; min-height: 0; margin-bottom: 8px; }
  .hero-art .mark { width: min(72%, 300px); }
  .hero-tag, .hero-sig { display: none; }
  .hero-bg { background-position: center 30%; opacity: .42; }
  .hero::before { background:
      radial-gradient(ellipse 80% 50% at 50% 18%, rgba(70,84,116,.28) 0%, transparent 60%),
      linear-gradient(0deg, var(--bg) 8%, rgba(5,5,7,.8) 60%, rgba(5,5,7,.9) 100%); }

  .strip { grid-template-columns: 1fr 1fr; margin-top: -34px; }
  .strip > div { border-bottom: 1px solid var(--line); }
  .strip > div:nth-child(2n) { border-right: 0; }
  .strip > div:nth-last-child(-n+2) { border-bottom: 0; }

  .split-3 { grid-template-columns: 1fr; }
  .split-3 .ov { max-width: 560px; }
  .ov-card { transform: none; }
  .ov:hover .ov-card { transform: translateY(-4px); }

  .band-in { grid-template-columns: 1fr; gap: 30px; }
  .band-copy .h2 { max-width: none; }

  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 22px 22px 0; }
  .timeline > div:nth-child(2n) { padding-right: 0; }
  .timeline > div:nth-last-child(-n+2) { border-bottom: 0; }

  .stats { grid-template-columns: 1fr 1fr; }

  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 180px; }

  .dash { grid-template-columns: 1fr; }
  .side { position: static; }
  .side nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .side nav a { border: 1px solid var(--line); }
  .side .logout { border-top: 0; padding-top: 0; margin-top: 12px; }

  .doc { grid-template-columns: 1fr; }
  .toc { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
}

/* large phone */
@media (max-width: 720px) {
  .g-3, .g-4 { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier.hot { order: -1; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .tile .ic { margin-bottom: 14px; }
  /* photo cards keep the desktop composition; the compact layout would
     otherwise push the copy up into the bright part of the image */
  .tile.has-photo { min-height: 200px; }
  .tile.has-photo .ic { margin-bottom: auto; }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .sup .w { flex-direction: column; align-items: flex-start; }
  .show-sm { display: block; }
}

/* phone */
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  :root { --sec-y: 62px; --r-lg: 18px; --r-xl: 22px; }

  /* comfortable touch targets */
  .btn, .pill { padding: 14px 22px; }
  .btn-lg { width: 100%; padding: 16px; }
  .hero-act { flex-direction: column; align-items: stretch; }
  .hero-act .btn { width: 100%; }

  .strip { grid-template-columns: 1fr; margin-top: 0; border-radius: var(--r); }
  .strip > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
  .strip > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .strip > div:last-child { border-bottom: 0; }

  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .timeline > div { border-bottom: 1px solid var(--line); padding: 24px 0 20px; }
  .timeline > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .timeline > div:last-child { border-bottom: 0; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 20px 0; }

  .ft-top { grid-template-columns: 1fr; }
  .ft-bot { flex-direction: column; align-items: flex-start; }

  .otp { gap: 6px; }
  .otp input { border-radius: var(--r-xs); }

  .side nav { flex-direction: column; }
  .side nav a { border: 0; padding: 13px; }

  .hwid { flex-direction: column; align-items: stretch; }
  .hwid .btn { width: 100%; }

  .sec-head.center { text-align: left; align-items: flex-start; }
  .page-head h1 { margin: 14px 0; }
}

/* small phone */
@media (max-width: 380px) {
  .brand .word { display: none; }
  .stats { grid-template-columns: 1fr; }
  .hero-art .mark { width: 76%; }
}

/* landscape phones: reclaim vertical space */
@media (max-height: 520px) and (orientation: landscape) {
  .hero .w { min-height: 0; padding: 40px 0 56px; }
  .hero-art { display: none; }
}

/* --------------------------------------------------- motion & print hygiene */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .rv, .rv { opacity: 1; transform: none; }
  .hero-bg { animation: none; }
  .hero-art .mark { animation: none; }
}

@media print {
  body::after, .hd, .drawer, .ft, .sup, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .doc-body p, .doc-body li, .doc-body h2 { color: #000; }
}