/* ==========================================================================
   SattvaRig public site design system (DBC v5 card language, SattvaRig skin).

   DIRECTION (2026-07-21): the DBC command center (dubaibc-aios/app/globals.css)
   is now the source of truth. This file carries its depth pass across to the
   public site: Inter body + Outfit headings, the type scale lifted 15%, opaque cards
   built from three cheap static layers, one filled blue card per section, and
   a dot-matrix canvas. The site keeps its own energy: motion and scroll
   reveals stay, because a site is scrolled past, not stared at.

   PHONE FIRST. Effectively all traffic is on phones. Every rule here is
   written to be right at 375px before it is right on a desktop. The phone-only
   overrides live in ONE block at the very bottom, headed PHONE EXPERIENCE, so
   they are easy to find and tune.

   Smoothness rule: animate transform and opacity only. Respect reduced motion.
   ========================================================================== */

:root{
  /* base: SattvaRig recovery-night theme (the optional dark mode) */
  --bg-0:#050D08;
  --bg-1:#08130C;
  --paper:#0C1A11;
  /* cards are OPAQUE. Translucent glass over a gradient hazes everything. */
  --glass:#0C1911;
  --glass-hi:#102316;
  --card-grad:linear-gradient(168deg,#0C1911 0%,#09130C 100%);
  --card-edge:rgba(255,255,255,.07);     /* the lit hairline on the top edge */
  --plate:rgba(74,222,128,.05);          /* the faint plate stacked behind a card */
  --dots:rgba(74,222,128,.10);           /* canvas dot matrix */
  --bar:rgba(5,12,8,.82);                /* the sticky top bar, the one translucent surface */
  --line:rgba(134,239,172,.14);
  --line-strong:rgba(134,239,172,.28);
  --line-soft:rgba(255,255,255,.06);
  /* ink */
  --text-1:#E7F5EA;
  --text-2:#A3C0AB;
  --text-3:#6E8A76;
  /* SATTVARIG BRAND PALETTE (lifted from the live sattvarig.com tokens,
     2026-07-23): green #16A34A is the brand accent, #4ADE80 the light
     accent, #BBF7D0 the soft tint. On the dark theme the accent runs light
     green with deep-forest ink on buttons. */
  --accent:#4ADE80;
  --accent-ink:#052E16;   /* ink that sits ON the accent (buttons) */
  --accent-2:#86EFAC;
  --accent-deep:#BBF7D0;
  --accent-glow:rgba(74,222,128,.28);
  --accent-soft:rgba(74,222,128,.13);
  --success:#2FBF71;
  --success-soft:rgba(47,191,113,.1);
  --warn:#E3A008;
  --warn-soft:rgba(227,160,8,.12);
  --danger:#F2555C;
  /* money highlights ride the brand green, SattvaRig has no gold */
  --gold:#4ADE80;
  --gold-soft:rgba(74,222,128,.1);
  --gold-line:rgba(74,222,128,.4);
  --field-bg:rgba(255,255,255,.05);
  /* the filled card: ONE per section. Brand green, shaded darker at the foot. */
  --fill:linear-gradient(158deg,#22C55E 0%,#16A34A 46%,#166534 100%);
  --fill-glow:0 34px 76px -34px rgba(22,163,74,.8);
  --fill-ink:#FFFFFF;
  --fill-muted:rgba(220,252,231,.78);
  --fill-line:rgba(255,255,255,.16);
  --grad:linear-gradient(100deg,#4ADE80,#BBF7D0);
  /* motion */
  --t-fast:170ms;
  --t-med:340ms;
  --t-slow:680ms;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --radius:20px;
  --radius-sm:14px;
  --shadow:0 22px 50px -20px rgba(0,0,0,.65);
  --shadow-soft:0 14px 34px -18px rgba(0,0,0,.72);
  --shadow-lg:0 34px 74px -26px rgba(0,0,0,.85);
}
[data-theme="light"]{
  /* THE DEFAULT. SattvaRig is a clinic: clean, clinical, light. These are
     the live sattvarig.com tokens: soft green paper #F4F8F2, brand green
     #16A34A accent, deep green-black ink #0C1A0E. */
  --bg-0:#F4F8F2;
  --bg-1:#FAFCF8;
  --paper:#FFFFFF;
  --glass:#FFFFFF;
  --glass-hi:#F6FAF4;
  --card-grad:linear-gradient(168deg,#FFFFFF 0%,#F6FAF4 100%);
  /* a white highlight is invisible on a white card, so the lit edge becomes a
     faint green hairline. Same job: it crisps the top of the card. */
  --card-edge:rgba(22,163,74,.2);
  --plate:rgba(22,163,74,.05);
  --dots:rgba(22,163,74,.12);
  --bar:rgba(250,252,248,.86);
  --line:rgba(22,163,74,.15);
  --line-strong:rgba(22,163,74,.3);
  --line-soft:rgba(17,26,19,.07);
  --text-1:#0C1A0E;
  --text-2:#3F6145;
  --text-3:#7A937F;
  --accent:#16A34A;
  --accent-ink:#FFFFFF;
  --accent-2:#15803D;
  --accent-deep:#166534;
  --accent-glow:rgba(22,163,74,.25);
  --accent-soft:rgba(22,163,74,.08);
  --success:#12A150;
  --success-soft:rgba(18,161,80,.08);
  --warn:#D98A00;
  --warn-soft:rgba(217,138,0,.1);
  --danger:#E5484D;
  --gold:#16A34A;
  --gold-soft:rgba(22,163,74,.08);
  --gold-line:rgba(22,163,74,.35);
  --field-bg:rgba(255,255,255,.85);
  --fill:linear-gradient(158deg,#22C55E 0%,#16A34A 46%,#15803D 100%);
  --fill-glow:0 30px 66px -30px rgba(22,163,74,.45);
  --fill-muted:rgba(230,252,238,.82);
  --fill-line:rgba(255,255,255,.2);
  --grad:linear-gradient(100deg,#16A34A,#4ADE80);
  --shadow:0 22px 50px -20px rgba(23,84,44,.22);
  --shadow-soft:0 12px 32px -18px rgba(23,84,44,.2);
  --shadow-lg:0 30px 66px -24px rgba(23,84,44,.28);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg-0);
  color:var(--text-1);
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:18.4px;
  font-feature-settings:'tnum';
  line-height:1.6;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- the card recipe ----------
   Three cheap static layers, no glass blur:
   1. a soft 168deg gradient fill
   2. a 1px lit hairline across the top edge, inset from both sides
   3. a faint plate ring stacked behind the card
   Everything that is a card in this stylesheet uses .surface-card. */
.surface-card,
.gcard,.stat,.answer-card,.table-wrap,.faq,.form-card,.info-card,.quote,
.est-card,.band,.calc-shell,.step,.tnode .t-card,.gpt-side,.gpt-main{
  background:var(--card-grad);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 0 0 6px var(--plate),var(--shadow-soft);
  position:relative;
}
.surface-card::before,
.gcard::before,.stat::before,.answer-card::before,.table-wrap::before,.faq::before,
.form-card::before,.info-card::before,.quote::before,.est-card::before,.band::before,
.calc-shell::before,.step::before,.tnode .t-card::before,.gpt-side::before,.gpt-main::before{
  content:"";position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--card-edge),transparent);
  pointer-events:none;z-index:2;
}
/* nested tiles sit inside a section, so they skip the plate ring: stacking
   plates everywhere turns a grid into mush */
.step,.tnode .t-card,.checklist li,.opt,.answer-grid .ans,.result-rows,.gpt-side{
  box-shadow:var(--shadow-soft);
  border-radius:var(--radius-sm);
}

/* THE FILLED CARD. One per section. A solid blue panel carrying that
   section's single most important message. */
.fill-card{
  background:var(--fill);
  border-color:transparent;
  color:var(--fill-ink);
  box-shadow:0 0 0 6px var(--plate),var(--fill-glow);
  overflow:hidden;
}
/* the inner light: a soft top-left highlight plus the same dot matrix as the
   canvas, so it reads as a lit panel and not a flat blue box */
.fill-card::before{
  content:"";position:absolute;inset:0;top:0;left:0;right:0;height:auto;
  background:
    radial-gradient(ellipse 70% 60% at 12% -10%,rgba(215,251,227,.34),transparent 62%),
    radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:auto,22px 22px;
  opacity:.9;pointer-events:none;
}
.fill-card>*{position:relative;z-index:1}
.fill-card h2,.fill-card h3,.fill-card strong,.fill-card b{color:var(--fill-ink)}
.fill-card p,.fill-card small{color:var(--fill-muted)}
.fill-card .sec-kicker{color:#D7FBE3}
.fill-card .sec-kicker::before{background:#D7FBE3}
.fill-card h2 em,.fill-card h1 em{background:none;-webkit-text-fill-color:#D7FBE3;color:#D7FBE3}
/* a button on a blue card flips to white, a blue button on blue disappears */
.fill-card .btn{background:rgba(255,255,255,.12);border-color:var(--fill-line);color:var(--fill-ink)}
.fill-card .btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34);color:var(--fill-ink)}
.fill-card .btn.primary,.fill-card .btn.primary:hover,
.fill-card .btn.gold,.fill-card .btn.gold:hover,
.fill-card .btn-primary,.fill-card .btn-primary:hover{
  background:#FFFFFF;color:#15803D;border-color:transparent;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5);
}

/* ---------- ambient field: two slow orbs over a static dot matrix ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 78% -8%,rgba(34,197,94,.10),transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 10%,rgba(74,222,128,.05),transparent 58%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
}
[data-theme="light"] .ambient{background:
  radial-gradient(ellipse 80% 60% at 78% -8%,rgba(74,222,128,.20),transparent 60%),
  radial-gradient(ellipse 70% 60% at 12% 8%,rgba(22,163,74,.12),transparent 58%),
  linear-gradient(180deg,var(--bg-1),var(--bg-0))}
.ambient .orb{position:absolute;border-radius:50%;opacity:.16;will-change:transform}
[data-theme="light"] .ambient .orb{opacity:.3}
.orb-a{width:860px;height:860px;background:radial-gradient(circle closest-side,var(--accent-2) 0%,transparent 72%);top:-380px;right:-280px;animation:drift 22s var(--ease) infinite alternate}
.orb-b{width:740px;height:740px;background:radial-gradient(circle closest-side,var(--accent) 0%,transparent 72%);bottom:-360px;left:-320px;animation:drift 28s var(--ease) infinite alternate-reverse}
.ambient .grid{position:absolute;inset:0;
  background-image:radial-gradient(var(--dots) 1px,transparent 1px);
  background-size:26px 26px;opacity:.7;
  mask-image:radial-gradient(ellipse 95% 80% at 50% 0%,black 10%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 50% 0%,black 10%,transparent 80%)}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}

/* ---------- layout ---------- */
.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
main{position:relative;z-index:1}
section{padding:56px 0;position:relative}
@media (min-width:721px){
  .wrap{width:min(1180px,calc(100% - 48px))}
  section{padding:92px 0}
}

/* ---------- top command bar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--bar);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:14px;padding:11px 0}
.brand{display:flex;align-items:center;gap:11px;min-width:0;flex:none}
/* the real DBC lockup (brand guidelines 2022): mark + Arabic + English in
   one horizontal artwork. SattvaRig runs a text wordmark instead, green on
   light surfaces and white on dark ones, so the dark theme whitens the same
   file with a filter. Height-driven so it scales cleanly on any screen. */
.brand img{height:40px;width:auto;border-radius:0;flex:none}
html:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1)}
@media (max-width:720px){.brand img{height:31px}}
.brand .b-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
/* the mark swaps with the theme: white art on dark, navy art on light,
   exactly the guidelines' logo usage rules */
.logo-on-dark{display:block}
.logo-on-light{display:none}
[data-theme="light"] .logo-on-dark{display:none}
[data-theme="light"] .logo-on-light{display:block}
.brand .b-name{font-weight:700;font-size:16.7px;letter-spacing:-.02em;white-space:nowrap}
.brand .b-sub{font-family:"JetBrains Mono",monospace;font-size:10.4px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:4px;margin-left:auto}
.navlinks a{font-size:15.5px;font-weight:600;color:var(--text-2);padding:8px 12px;border-radius:100px;border:1px solid transparent;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);white-space:nowrap}
.navlinks a:hover{color:var(--accent);border-color:var(--line)}
.navlinks a.on{color:var(--text-1);border-color:var(--line);background:var(--glass)}
.topbar-cta{display:flex;align-items:center;gap:9px;flex:none}
.topbar .btn{white-space:nowrap}
.theme-toggle{appearance:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--glass);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.theme-toggle:hover{transform:scale(1.08);border-color:var(--accent)}
.theme-toggle svg{width:17px;height:17px;color:var(--text-2)}
.theme-toggle:hover svg{color:var(--accent)}
.theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:block}
.nav-toggle{display:none;appearance:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--glass);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--text-1);border-radius:2px;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.nav-toggle.on span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle.on span:nth-child(2){opacity:0}
.nav-toggle.on span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* tablet: the menu drops from the bar. Phone gets a bottom sheet instead,
   see PHONE EXPERIENCE at the bottom of this file. */
@media (max-width:1080px){
  /* solid panel, anchored to the bottom of the sticky bar. No backdrop-filter
     here: nesting one inside the bar's own filter reads as see-through. */
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:14px 18px 20px;background:#08130C;border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform var(--t-med) var(--ease),opacity var(--t-med) var(--ease)}
  [data-theme="light"] .navlinks{background:#F7FBF5}
  .navlinks.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .navlinks a{padding:12px 14px;font-size:16.7px}
  .nav-toggle{display:flex}
  .topbar-cta .btn.nav-quote{display:none}
}

/* ---------- buttons ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);background:var(--glass);color:var(--text-1);
  font-family:inherit;font-weight:600;font-size:15px;border-radius:100px;
  padding:12px 20px;min-height:46px;cursor:pointer;text-align:center;
  /* NOT nowrap: a long label ("Price my jurisdiction") then sets a 390px
     min-content floor on its grid track and pushes the whole page sideways at
     375px. Only the header bar, where wrapping looks untidy, keeps nowrap. */
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  box-shadow:var(--shadow-soft);-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn .arrow{transition:transform var(--t-fast) var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
/* The accent flipped per theme (light blue on dark, navy on light), so the
   button ink flips with it: navy ink on the light-blue button, white ink on
   the navy button. --accent-ink carries that. */
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 12px 30px -10px var(--accent-glow)}
.btn.primary:hover{color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 18px 42px -12px var(--accent-glow)}
/* gold is not a brand colour: the old gold CTA now rides the same brand pair */
.btn.gold{background:var(--gold);color:var(--accent-ink);border-color:var(--gold);box-shadow:0 10px 26px -10px var(--accent-glow)}
.btn.gold:hover{color:var(--accent-ink);transform:translateY(-2px)}
.btn.sm{font-size:14.4px;padding:9px 16px;min-height:40px}
.btn.lg{font-size:17.3px;padding:14px 26px;min-height:52px}

/* ---------- shared type ---------- */
h1,h2,h3,h4{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:-.03em;line-height:1.1}
/* v5: type reverted to the v3 face on DP's call 2026-07-22. Headings ride the
   body Inter (no serif), the hook word is Outfit light italic with
   the gradient clipped into the text. The brand palette stays as applied. */
h1 em,h2 em,h3 em,.it{
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;font-style:italic;font-weight:300;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:"JetBrains Mono",monospace}
.num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:12.1px;font-weight:500;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:8px 18px;background:var(--glass);box-shadow:var(--shadow-soft)}
.eyebrow.gold{color:var(--gold);border-color:var(--gold-line)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse-dot 2.2s var(--ease) infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(47,191,113,.45)}50%{box-shadow:0 0 0 7px transparent}}
/* the font strip: mono, uppercase, wide-tracked, with a leading rule */
.sec-kicker{font-family:"JetBrains Mono",monospace;font-size:12.1px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-kicker::before{content:"";width:18px;height:1px;background:var(--accent);flex:none}
.sec-kicker.gold{color:var(--gold)}
.sec-kicker.gold::before{background:var(--gold)}
.sec-head{margin-bottom:28px;max-width:760px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .sec-kicker{justify-content:center}
.sec-head h2{font-size:clamp(29.9px,3.6vw,43.7px);font-weight:620;letter-spacing:-.032em;line-height:1.12;margin-bottom:12px}
.sec-head p{color:var(--text-2);font-size:17.3px}
.sec-head.center p{margin-left:auto;margin-right:auto}
@media (min-width:721px){.sec-head{margin-bottom:34px}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- hero ---------- */
.hero{padding:36px 0 44px}
.hero-inner{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(36.8px,5.4vw,59.8px);font-weight:600;letter-spacing:-.035em;line-height:1.06;margin:20px 0 14px}
.hero .lead{color:var(--text-2);font-size:19px;max-width:560px}
.hero-ctas{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.hero-trust{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--text-2);border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:var(--glass)}
.hero-trust i{width:5px;height:5px;border-radius:50%;background:var(--success);flex:none}
/* phone-only scroll cue between the hero copy and the snapshot card. Desktop
   shows both side by side, so there is nothing to hint at. */
.scroll-cue{display:none}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (min-width:961px){
  .hero{padding:64px 0 52px}
  .hero-inner{grid-template-columns:1.15fr .85fr;gap:44px}
}

/* the live estimate card: the home hero's ONE filled blue card */
.est-card{background:var(--fill);border-color:transparent;color:var(--fill-ink);
  box-shadow:0 0 0 6px var(--plate),var(--fill-glow);padding:22px 22px;overflow:hidden}
.est-card::before{content:"";position:absolute;inset:0;top:0;left:0;right:0;height:auto;
  background:
    radial-gradient(ellipse 70% 60% at 12% -10%,rgba(215,251,227,.34),transparent 62%),
    radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:auto,22px 22px;opacity:.9;pointer-events:none}
.est-card>*{position:relative;z-index:1}
.est-card .scan{position:absolute;top:0;bottom:0;width:120px;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-160px);opacity:0;z-index:1}
.est-card.in .scan{animation:scan-sweep 1.3s var(--ease) .2s 1 both}
@keyframes scan-sweep{0%{opacity:1;transform:translateX(-160px)}100%{opacity:0;transform:translateX(760px)}}
.est-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--fill-line)}
.est-top strong{font-size:17.3px;font-weight:650;color:var(--fill-ink)}
.est-badge{font-family:"JetBrains Mono",monospace;font-size:10.4px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;border:1px solid var(--fill-line);background:rgba(255,255,255,.14);border-radius:100px;padding:5px 10px;display:inline-flex;align-items:center;gap:6px}
.est-badge i{width:5px;height:5px;border-radius:50%;background:#B9F2D3;animation:pulse-dot 2s var(--ease) infinite}
.est-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;font-size:15.5px}
.est-row span:first-child{color:var(--fill-muted)}
.est-row span:last-child{font-weight:650;color:var(--fill-ink);text-align:right}
.est-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:14px;padding-top:15px;border-top:1px solid var(--fill-line)}
.est-total span{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fill-muted)}
.est-total strong{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-size:31px;font-weight:700;color:var(--fill-ink);letter-spacing:-.02em}
.est-foot{margin-top:14px;font-size:13.2px;color:var(--fill-muted);line-height:1.5}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card-grad);padding:12px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:march 38s linear infinite;will-change:transform}
.marquee-track span{font-family:"JetBrains Mono",monospace;font-size:12.1px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);padding:0 26px;position:relative;white-space:nowrap}
.marquee-track span::after{content:"";position:absolute;right:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.5;transform:translateY(-50%)}
@keyframes march{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- inner page hero ---------- */
.page-hero{padding:30px 0 34px}
.page-hero h1{font-size:clamp(32px,4.6vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1.08;margin:16px 0 14px;max-width:900px}
.page-hero .lead{color:var(--text-2);font-size:18.4px;max-width:760px}
.page-hero .hero-ctas{margin-top:24px}
@media (min-width:721px){.page-hero{padding:48px 0 40px}}
/* founder portrait in the page hero (DP, 2026-07-23) */
.founder-photo{width:132px;height:132px;border-radius:50%;object-fit:cover;border:2px solid var(--line-strong);box-shadow:var(--shadow-soft),0 0 0 6px var(--accent-glow);display:block;margin-bottom:18px}

/* ---- founder hero: copy on the left, a big portrait on the right. Stacks on
       a phone with the photo under the copy, so the headline still lands
       first. The source photo is 400x400, so the frame is capped at 400 and
       never upscaled into mush. ---- */
.founder-hero-in{display:grid;gap:28px;align-items:center}
.founder-copy{min-width:0}
.founder-shot{margin:0;position:relative;width:100%;max-width:400px;justify-self:center}
.founder-shot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow),0 0 0 8px var(--plate)}
/* the name plate sits ON the photo, so it wears its own dark glass in both
   themes rather than following the page tokens */
.founder-shot figcaption{position:absolute;left:13px;right:13px;bottom:13px;
  display:flex;flex-direction:column;gap:3px;padding:12px 15px;border-radius:14px;
  background:rgba(6,20,10,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15)}
.founder-shot figcaption strong{font-size:15.5px;font-weight:700;letter-spacing:-.012em;color:#fff}
.founder-shot figcaption span{font-family:"JetBrains Mono",monospace;font-size:10.2px;
  letter-spacing:.12em;text-transform:uppercase;color:#BBF7D0}
@media (min-width:901px){
  .founder-hero-in{grid-template-columns:minmax(0,1fr) 400px;gap:60px}
  .founder-shot{justify-self:end}
}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0 0;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.crumbs a{color:var(--text-3);transition:color var(--t-fast) var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-current]{color:var(--accent)}
.crumbs .sep{opacity:.5}

/* Grid items default to min-width:auto, so one wide child (the price table,
   whose AED column is nowrap) sets a min-content floor and pushes the whole
   page sideways at 375px. min-width:0 caps the track and lets the table
   scroll inside its own .table-scroll instead. */
.split>*,.grid-2>*,.grid-3>*,.grid-4>*,.steps>*,.track>*,.stats>*,
.answer-grid>*,.opt-grid>*,.form-grid>*,.gpt-wrap>*{min-width:0}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
@media (min-width:901px){.split{grid-template-columns:1fr 1fr;gap:34px}}

/* ---------- checklist ---------- */
.checklist{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:18px}
.checklist li{display:flex;gap:12px;align-items:flex-start;background:var(--card-grad);border:1px solid var(--line);padding:15px 16px;font-size:15.5px;color:var(--text-2);line-height:1.6;transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.checklist li:hover{border-color:var(--accent);transform:translateX(2px)}
.checklist li strong{color:var(--text-1);font-weight:700}
.checklist .check{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;background:var(--accent);margin-top:2px}

/* ---------- caution note (honest limits, not a scare box) ---------- */
.caution{margin-top:22px;display:flex;gap:14px;align-items:flex-start;background:linear-gradient(150deg,var(--warn-soft),transparent 62%),var(--card-grad);border:1px solid rgba(227,160,8,.34);border-radius:var(--radius-sm);padding:17px 18px}
.caution .c-ico{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--warn-soft);border:1px solid rgba(227,160,8,.34)}
.caution .c-t{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--warn);margin-bottom:6px}
.caution p{font-size:15.5px;color:var(--text-2);line-height:1.6}
.caution p a{color:var(--accent);font-weight:700}

/* ---------- price table ---------- */
.table-wrap{overflow:hidden}
.table-wrap .tw-head{padding:16px 20px;border-bottom:1px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:12.1px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.table-scroll{overflow-x:auto}
.price-table{width:100%;border-collapse:collapse;min-width:340px}
.price-table th{text-align:left;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:14px 18px;border-bottom:1px solid var(--line)}
.price-table th:last-child,.price-table td:last-child{text-align:right}
.price-table td{padding:14px 18px;font-size:15.5px;color:var(--text-2);border-bottom:1px solid var(--line-soft)}
.price-table td:last-child{font-family:"JetBrains Mono",monospace;font-size:14.4px;color:var(--text-1);font-weight:500;white-space:nowrap}
.price-table tr:last-child td{border-bottom:0}
/* opt-in total row. Do not key this off :last-child, most tables end on a normal row. */
.price-table tr.total td{background:var(--accent-soft);color:var(--text-1);font-weight:700}
.price-table tr.total td:last-child{color:var(--gold)}

/* ---------- numbered steps grid ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:12px}
.step{padding:18px 18px;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.step:hover{transform:translateY(-3px);border-color:var(--accent)}
.step .n{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--accent);margin-bottom:9px}
.step h3{font-size:18.4px;font-weight:650;margin-bottom:6px;letter-spacing:-.02em}
.step p{font-size:14.4px;color:var(--text-2);line-height:1.55}
@media (min-width:561px){.steps,.steps.cols-5,.steps.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1001px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .steps.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- answer-first block (SEO / answer-engine surface) ---------- */
.answer-sec{padding-top:48px}
.answer-card{padding:24px 20px}
.answer-lead{font-size:17.8px;line-height:1.72;color:var(--text-2);max-width:900px}
/* short answers are one sentence per paragraph (DP, 2026-07-25), so consecutive
   leads need breathing room or they read as one block again */
.answer-lead+.answer-lead{margin-top:14px}
.answer-lead strong{color:var(--text-1);font-weight:700}
.answer-grid{display:grid;grid-template-columns:1fr;gap:11px;margin-top:22px}
.answer-grid .ans{background:var(--glass-hi);border:1px solid var(--line);padding:15px 16px}
.answer-grid dt{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.answer-grid dd{font-size:15.5px;font-weight:650;color:var(--text-1);line-height:1.45}
.answer-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:14.4px;color:var(--text-3);line-height:1.6}
@media (min-width:421px){.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:721px){.answer-sec{padding-top:64px}.answer-card{padding:30px 32px}.answer-lead{font-size:19px}}
@media (min-width:1001px){.answer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- cards ---------- */
.grid-2,.grid-3,.grid-4{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:621px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:821px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:961px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.gcard{padding:22px 22px 20px;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease);display:flex;flex-direction:column}
.gcard:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 0 0 6px var(--plate),var(--shadow-lg)}
.gcard .g-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--accent-soft);border:1px solid var(--line);margin-bottom:14px}
.gcard .g-ico.gold{background:var(--gold-soft);border-color:var(--gold-line)}
.gcard .g-ico.cyan{background:rgba(74,222,128,.1)}
.gcard h3{font-size:21.8px;font-weight:650;letter-spacing:-.025em;margin-bottom:7px;line-height:1.2}
.gcard p{font-size:15.5px;color:var(--text-2);line-height:1.6}
.gcard .g-link{margin-top:auto;padding-top:16px;font-family:"JetBrains Mono",monospace;font-size:12.1px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.gcard .g-link .arrow{transition:transform var(--t-fast) var(--ease)}
.gcard:hover .g-link .arrow{transform:translateX(3px)}
.gcard .g-price{display:inline-block;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:100px;padding:5px 11px;color:var(--gold);border:1px solid var(--gold-line);background:var(--gold-soft)}
/* the section's one filled card, opt in per section with class="gcard fill-card" */
.gcard.fill-card .g-ico{background:rgba(255,255,255,.14);border-color:var(--fill-line)}
.gcard.fill-card .g-link{color:#D7FBE3}
.gcard.fill-card .g-price{color:#FFFFFF;border-color:var(--fill-line);background:rgba(255,255,255,.14)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{padding:22px 16px;text-align:center;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.stat:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.stat .num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-size:clamp(32px,4vw,46px);font-weight:700;line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .label{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:9px;line-height:1.5}
/* the stats row's one filled card */
.stat.fill-card .num{background:none;-webkit-text-fill-color:var(--fill-ink);color:var(--fill-ink)}
.stat.fill-card .label{color:var(--fill-muted)}
@media (min-width:961px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}

/* ---------- process track ---------- */
.track{position:relative;display:grid;grid-template-columns:1fr;gap:14px}
.track .tline{display:none}
.tnode{position:relative;z-index:1;display:flex;flex-direction:column;opacity:.4;transform:translateY(8px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.tnode.lit{opacity:1;transform:translateY(0)}
.tnode .t-pin{width:46px;height:46px;margin:0 auto 13px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--glass-hi);border:2px solid var(--line);transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.tnode.lit .t-pin{border-color:var(--accent);box-shadow:0 0 0 6px var(--accent-glow),0 0 24px var(--accent-glow)}
/* flex:1, not height:100%: the pin above the card sits inside the same grid
   cell, so a 100% tall card overflowed the cell by the pin's height and the
   last step landed on top of the stats row on phones (DP, 2026-07-23) */
.tnode .t-card{padding:16px 16px;flex:1}
.tnode.lit .t-card{border-color:var(--line-strong)}
.tnode .t-step{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.tnode .t-t{font-weight:650;font-size:18.4px;line-height:1.25;margin-bottom:6px;letter-spacing:-.02em}
.tnode .t-d{font-size:14.4px;color:var(--text-2);line-height:1.55}
@media (min-width:561px){.track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1001px){
  .track{grid-template-columns:repeat(5,minmax(0,1fr))}
  .track .tline{display:block;position:absolute;top:22px;left:6%;right:6%;height:2px;background:var(--line-soft);border-radius:2px;z-index:0}
  .track .tline .tfill{display:block;height:100%;width:0%;border-radius:2px;background:var(--grad);box-shadow:0 0 12px var(--accent-glow);transition:width 1.8s var(--ease)}
}

/* ---------- CTA band: the filled blue panel that closes a page ---------- */
.band{padding:34px 22px;text-align:center;overflow:hidden;
  background:var(--fill);border-color:transparent;color:var(--fill-ink);
  box-shadow:0 0 0 6px var(--plate),var(--fill-glow)}
.band::before{content:"";position:absolute;inset:0;top:0;left:0;right:0;height:auto;
  background:
    radial-gradient(ellipse 70% 60% at 12% -10%,rgba(215,251,227,.34),transparent 62%),
    radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:auto,22px 22px;opacity:.9;pointer-events:none}
.band>*{position:relative;z-index:1}
.band h2{font-size:clamp(27.6px,3.4vw,41.4px);font-weight:620;letter-spacing:-.03em;line-height:1.14;margin-bottom:12px;color:var(--fill-ink)}
.band h2 em{background:none;-webkit-text-fill-color:#D7FBE3;color:#D7FBE3}
.band p{color:var(--fill-muted);font-size:17.3px;max-width:620px;margin:0 auto}
.band .sec-kicker{color:#D7FBE3;justify-content:center}
.band .sec-kicker::before{background:#D7FBE3}
.band .hero-ctas{justify-content:center}
.band .btn{background:rgba(255,255,255,.12);border-color:var(--fill-line);color:var(--fill-ink)}
.band .btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34);color:var(--fill-ink)}
.band .btn.primary,.band .btn.primary:hover,.band .btn.gold,.band .btn.gold:hover{
  background:#FFFFFF;color:#15803D;border-color:transparent;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
/* the gold band stays a money panel, not a second blue one: gold trim on the
   normal card surface, so a page never shows two filled blue cards in a row */
.band.gold{background:linear-gradient(150deg,var(--gold-soft),transparent 62%),var(--card-grad);
  border-color:var(--gold-line);color:var(--text-1);box-shadow:0 0 0 6px var(--plate),var(--shadow-soft)}
.band.gold::before{background:none}
.band.gold h2{color:var(--text-1)}
.band.gold h2 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.band.gold p{color:var(--text-2)}
.band.gold .sec-kicker{color:var(--gold)}
.band.gold .sec-kicker::before{background:var(--gold)}
.band.gold .btn{background:var(--glass);border-color:var(--line);color:var(--text-1)}
.band.gold .btn:hover{border-color:var(--accent);color:var(--accent)}
.band.gold .btn.gold,.band.gold .btn.gold:hover{background:var(--gold);border-color:var(--gold);color:var(--accent-ink)}
@media (min-width:621px){.band{padding:48px 40px}}

/* ---------- testimonials ---------- */
.quote{padding:22px;display:flex;flex-direction:column;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.quote:hover{transform:translateY(-3px);border-color:var(--gold-line)}
.quote .stars{color:var(--gold);letter-spacing:.16em;font-size:14.4px;margin-bottom:12px}
.quote p{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;font-style:italic;font-weight:300;font-size:20px;line-height:1.45;color:var(--text-1);letter-spacing:-.02em}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:18px}
.quote .avatar{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;background:conic-gradient(from 40deg,var(--accent),var(--accent-2),var(--accent))}
.quote .avatar.gold{background:conic-gradient(from 40deg,var(--gold),#BBF7D0,var(--gold));color:#052E16}
.quote .who strong{display:block;font-size:15.5px;font-weight:700}
.quote .who small{display:block;font-family:"JetBrains Mono",monospace;font-size:10.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;overflow:hidden}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item:last-child{border-bottom:0}
.faq-q{appearance:none;width:100%;display:flex;align-items:center;gap:16px;text-align:left;background:transparent;border:0;color:var(--text-1);font-size:17.3px;font-weight:650;line-height:1.4;letter-spacing:-.02em;padding:18px 20px;min-height:60px;transition:color var(--t-fast) var(--ease)}
.faq-q:hover{color:var(--accent)}
.faq-q .plus{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:400;color:var(--accent);transition:transform var(--t-med) var(--ease)}
.faq-q[aria-expanded="true"] .plus{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease)}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 20px 20px;font-size:16px;color:var(--text-2);line-height:1.65}
.faq-a p a{color:var(--accent);font-weight:700}
@media (min-width:721px){.faq-q{padding:19px 24px}.faq-a p{padding:0 24px 20px}}

/* ---------- footer ---------- */
.site-foot{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--card-grad);padding:44px 0 24px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px}
.foot-brand p{font-size:15.5px;color:var(--text-2);line-height:1.65;margin-top:14px;max-width:340px}
.site-foot h4{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.site-foot ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.site-foot li a{font-size:15.5px;color:var(--text-2);display:flex;align-items:center;min-height:44px;transition:color var(--t-fast) var(--ease)}
.site-foot li a:hover{color:var(--accent)}
.foot-bottom{display:flex;flex-direction:column;gap:8px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line-soft);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
@media (min-width:521px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (min-width:721px){
  .site-foot{padding:56px 0 28px}
  .foot-bottom{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:14px}
  .site-foot ul{gap:8px}
  .site-foot li a{min-height:0;display:block}
}
@media (min-width:861px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}}

/* =========================================================================
   DBC GPT, an APP not a page.
   DP, 2026-07-22: the old version was a tall marketing page. On a phone you
   landed on a wall of topic buttons, and as soon as you scrolled the chat box
   went up off the screen. It now behaves like a chat app: the shell is exactly
   one viewport tall, only the transcript scrolls, and the composer never moves.
   On a phone the topic list is a bottom sheet behind a Topics button instead
   of a column you have to scroll past.
   ========================================================================= */

/* the chat shell is viewport height minus the page chrome above it, so the
   composer sits on the bottom edge and stays there while the log scrolls */
/* --gpt-chrome is the no-JS fallback. gpt.js measures the real distance from
   the top of the viewport and sets the height exactly, so the composer is on
   screen whatever the headline wraps to. */
.gpt-section{--gpt-chrome:250px}
.gpt-wrap{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch;
  height:calc(100dvh - var(--gpt-chrome));min-height:400px}
@media (min-width:1001px){
  .gpt-wrap{grid-template-columns:280px minmax(0,1fr)}
}
/* the header above the app stays compact: this is a tool, not a landing page */
.gpt-section{padding-top:0}
.gpt-page-hero{padding:18px 0 14px}
.gpt-page-hero h1{font-size:clamp(25px,3.2vw,36px);margin:10px 0 8px}
.gpt-page-hero .lead{font-size:16.7px}

.gpt-side{padding:16px 14px;display:flex;flex-direction:column;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.gpt-side::-webkit-scrollbar{width:7px}
.gpt-side::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.gpt-side h3{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.gpt-side .gs-group{margin-bottom:18px}
.gpt-side .gs-group:last-child{margin-bottom:0}
.gs-sheet-head{display:none}
.gpt-topic{display:flex;align-items:center;gap:9px;width:100%;text-align:left;appearance:none;background:transparent;border:1px solid transparent;border-radius:11px;padding:10px;color:var(--text-2);font-family:inherit;font-size:15.5px;font-weight:600;line-height:1.35;cursor:pointer;transition:all var(--t-fast) var(--ease);min-height:44px}
.gpt-topic:hover{border-color:var(--line);background:var(--glass-hi);color:var(--accent)}
.gpt-topic .gt-ico{flex:none;font-size:16px}

/* the main column: header pinned, log scrolls, composer pinned */
.gpt-main{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.gpt-head{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line);flex:none;position:relative;z-index:2}
.gpt-head .gh-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;animation:pulse-dot 2.2s var(--ease) infinite}
.gpt-head .gh-t{font-weight:650;font-size:17.3px;letter-spacing:-.02em}
.gpt-head .gh-s{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.gpt-head .gh-topics{display:none}
.gpt-head .gh-new{margin-left:auto}

/* the transcript is the only thing on this page that scrolls */
.gpt-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:22px 18px 8px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth}
.gpt-log::-webkit-scrollbar{width:8px}
.gpt-log::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.gpt-msg{display:flex;gap:12px;animation:rise .4s var(--ease) both;max-width:760px;width:100%}
.gpt-msg .gm-av{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;background:conic-gradient(from 40deg,var(--accent),var(--accent-2),var(--accent))}
.gpt-msg.me .gm-av{background:var(--glass-hi);border:1px solid var(--line);color:var(--text-2)}
.gpt-msg .gm-body{flex:1;min-width:0;font-size:16.7px;line-height:1.68;color:var(--text-1);padding-top:3px}
.gpt-msg .gm-body p{margin-bottom:11px}
.gpt-msg .gm-body p:last-child{margin-bottom:0}
.gpt-msg .gm-body a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.gpt-msg .gm-body strong{color:var(--text-1);font-weight:700}
/* the visitor's own turn reads as a bubble, the way a chat app looks */
.gpt-msg.me{align-self:flex-end;flex-direction:row-reverse;max-width:620px}
.gpt-msg.me .gm-body{background:var(--accent-soft);border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:11px 15px;color:var(--text-1);font-weight:500}
.gpt-err{border:1px solid rgba(242,85,92,.4);background:rgba(242,85,92,.08);border-radius:var(--radius-sm);padding:13px 15px;font-size:15.5px;color:var(--text-2);line-height:1.6}
.gpt-err b{color:var(--danger)}
.gpt-typing{display:inline-flex;gap:4px;align-items:center;padding-top:8px}
.gpt-typing i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.4;animation:blink 1.3s var(--ease) infinite}
.gpt-typing i:nth-child(2){animation-delay:.18s}
.gpt-typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* the suggestion chips sit directly above the composer and scroll sideways,
   so people can see there are things to ask without a wall of buttons */
.gpt-starters{flex:none;padding:10px 18px 0;display:flex;gap:8px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gpt-starters::-webkit-scrollbar{display:none}
.gpt-starters button{appearance:none;flex:none;white-space:nowrap;border:1px solid var(--line);background:var(--glass-hi);color:var(--text-2);font-family:inherit;font-weight:600;font-size:14.4px;border-radius:100px;padding:9px 15px;cursor:pointer;transition:all var(--t-fast) var(--ease);min-height:42px}
.gpt-starters button:hover{border-color:var(--accent);color:var(--accent)}

/* the composer: one rounded field, always on screen */
.gpt-form{flex:none;padding:12px 18px 6px;display:flex;gap:10px;align-items:flex-end}
.gpt-form textarea{flex:1;appearance:none;background:var(--field-bg);border:1px solid var(--line);border-radius:22px;outline:0;color:var(--text-1);font-family:inherit;font-size:16.7px;padding:13px 18px;resize:none;max-height:130px;line-height:1.5;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.gpt-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.gpt-form textarea::placeholder{color:var(--text-3)}
.gpt-send{appearance:none;flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast) var(--ease);box-shadow:0 6px 16px -4px var(--accent-glow)}
.gpt-send:hover:not(:disabled){transform:translateY(-2px)}
.gpt-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.gpt-note{flex:none;padding:4px 18px 12px;font-size:12.5px;color:var(--text-3);line-height:1.5;text-align:center}


/* ---------- proof strip: authority and free zone logos under the hero ---------- */
.proof-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch}
.proof-row .pl{background:#FFFFFF;border:1px solid var(--line);border-radius:14px;padding:10px 18px;display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.proof-row .pl:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.proof-row .pl img{height:30px;width:auto;max-width:150px;object-fit:contain;display:block}
.proof-note{text-align:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:14px}
@media (max-width:720px){.proof-row .pl{padding:8px 14px}.proof-row .pl img{height:24px;max-width:120px}}

/* ---------- footer payment methods row ---------- */
.pay-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pay-row span{background:#FFFFFF;border:1px solid var(--line-soft);border-radius:6px;padding:3px 8px;display:inline-flex;align-items:center}
.pay-row img{height:18px;width:auto;display:block}

/* ---------- FAQ encyclopedia ---------- */
.kb-search{position:relative;max-width:640px;margin:0 auto}
.kb-search input{width:100%;appearance:none;background:var(--card-grad);border:1px solid var(--line);border-radius:100px;outline:0;color:var(--text-1);font-family:inherit;font-size:16.7px;font-weight:500;padding:15px 52px 15px 22px;box-shadow:var(--shadow-soft);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.kb-search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.kb-search input::placeholder{color:var(--text-3);font-weight:450}
.kb-search .kb-ico{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none;display:flex}
.kb-count{text-align:center;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:14px}
.kb-count b{color:var(--accent)}
/* the category row scrolls sideways inside itself, it never wraps */
.kb-cats{display:flex;gap:8px;margin:24px 0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.kb-cats::-webkit-scrollbar{display:none}
.kb-cats button{appearance:none;flex:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card-grad);color:var(--text-2);font-family:inherit;font-weight:600;font-size:14.4px;border-radius:100px;padding:10px 18px;cursor:pointer;white-space:nowrap;transition:all var(--t-fast) var(--ease);min-height:44px}
.kb-cats button:hover{border-color:var(--accent);color:var(--accent)}
.kb-cats button.on{border-color:var(--accent);color:var(--text-1);box-shadow:0 6px 18px -6px var(--accent-glow)}
.kb-cats button .kb-n{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--text-3)}
.kb-cats button.on .kb-n{color:var(--accent)}
@media (min-width:721px){.kb-cats{justify-content:center;flex-wrap:wrap;overflow:visible;margin:26px 0 8px}.kb-cats button{flex:0 0 auto}}
.kb-group{margin-top:38px;scroll-margin-top:88px}
.kb-group-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.kb-group-head .kb-gi{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--accent-soft);border:1px solid var(--line)}
.kb-group-head h3{font-size:21.8px;font-weight:650;letter-spacing:-.025em;line-height:1.25}
.kb-group-head p{font-size:15.5px;color:var(--text-2);line-height:1.55;margin-top:3px}
.kb-group-head .kb-gn{flex:none;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);border-radius:100px;padding:5px 12px;white-space:nowrap}
@media (min-width:721px){.kb-group-head{flex-wrap:nowrap}.kb-group-head .kb-gn{margin-left:auto}}
.kb-empty{text-align:center;padding:48px 20px;color:var(--text-2)}
.kb-empty b{display:block;font-size:19px;color:var(--text-1);margin-bottom:8px}
.kb-hit{background:rgba(74,222,128,.22);border-radius:3px;padding:0 2px;color:var(--text-1)}

/* screen readers and crawlers get the heading, sighted users do not need it twice */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- forms ---------- */
.form-card{padding:22px 18px}
/* pair fields two to a row: it turns a six line block into three.
   align-items:end so a label that wraps to two lines ("Phone (with country
   code)") does not push its input below its neighbour's. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.form-grid .field.full{grid-column:1/-1}
.field label{display:block;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;appearance:none;background:var(--field-bg);border:1px solid var(--line);border-radius:12px;outline:0;color:var(--text-1);font-family:inherit;font-size:16.7px;font-weight:500;padding:13px 14px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);font-weight:450}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:14px;padding-right:38px}
[data-theme="light"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.field .note{font-size:13.8px;color:var(--text-3);margin-top:10px;line-height:1.5}
.form-ok{display:none;padding:24px 22px;border-radius:var(--radius);background:var(--success-soft);border:1px solid rgba(47,191,113,.42)}
.form-ok.show{display:block;animation:rise .5s var(--ease) both}
.form-ok strong{font-size:18.4px;font-weight:700;color:var(--success)}
.form-ok p{color:var(--text-2);font-size:15.5px;margin-top:7px;line-height:1.6}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:621px){.form-card{padding:26px 26px 24px}.form-grid{gap:14px}}

/* ---------- contact info cards ---------- */
.info-card{display:block;padding:20px;margin-bottom:12px;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.info-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.info-card .g-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--accent-soft);border:1px solid var(--line);margin-bottom:13px}
.info-card .g-ico.wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.4)}
.info-card h3{font-size:18.4px;font-weight:650;margin-bottom:6px;letter-spacing:-.02em}
.info-card p{font-size:15.5px;color:var(--text-2);line-height:1.6}
.info-card .g-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:12.1px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* =========================================================================
   Cost calculator UI. The classes are exactly what assets/calculator.js
   emits, so the pricing logic and markup are untouched. Do not rename these.
   ========================================================================= */
.calc-shell{overflow:hidden}
.calc-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.calc-head .title{font-weight:650;font-size:17.3px;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}
.calc-head .title .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;animation:pulse-dot 2.2s var(--ease) infinite}
.calc-progress{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.calc-bar{width:110px;height:6px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
[data-theme="light"] .calc-bar{background:rgba(15,23,42,.08)}
.calc-bar i{display:block;height:100%;border-radius:100px;background:var(--grad);transform-origin:left;transform:scaleX(.2);transition:transform .6s var(--ease)}
.calc-xp{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);padding:5px 12px;border-radius:100px}
.calc-xp.bump{animation:xp-bump .5s var(--ease)}
@keyframes xp-bump{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
.calc-body{padding:26px 18px 30px;min-height:400px;position:relative}
.calc-q{font-size:clamp(21.8px,2.6vw,29.9px);font-weight:650;letter-spacing:-.03em;line-height:1.2;margin-bottom:8px}
.calc-sub{color:var(--text-2);font-size:16px;margin-bottom:22px}
.opt-grid,.opt-grid.three{display:grid;grid-template-columns:1fr;gap:11px}
@media (min-width:761px){.opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.opt-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.opt{appearance:none;text-align:left;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 17px;cursor:pointer;color:var(--text-1);font-family:inherit;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);position:relative;min-height:56px}
.opt:hover{transform:translateY(-3px);border-color:var(--accent)}
.opt.selected{border-color:var(--accent);box-shadow:0 6px 18px -6px var(--accent-glow)}
.opt.selected::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.opt .opt-emoji{font-size:22px;display:block;margin-bottom:9px}
.opt strong{display:block;font-size:16.7px;font-weight:650;margin-bottom:4px;letter-spacing:-.02em}
.opt small{color:var(--text-2);font-size:14.4px;line-height:1.5;display:block}
.stepper{display:flex;align-items:center;justify-content:center;gap:24px;padding:26px 0}
.stepper button{appearance:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--glass-hi);color:var(--text-1);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.stepper button:hover{transform:scale(1.08);border-color:var(--accent);color:var(--accent)}
.stepper button:active{transform:scale(.94)}
.stepper .count{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-size:52px;font-weight:700;min-width:90px;text-align:center;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stepper .count.tick{animation:xp-bump .35s var(--ease)}
.calc-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.calc-back{appearance:none;background:none;border:0;color:var(--text-3);font-family:inherit;font-weight:600;font-size:15.5px;display:inline-flex;gap:8px;align-items:center;cursor:pointer;min-height:44px;transition:color var(--t-fast) var(--ease)}
.calc-back:hover{color:var(--accent)}
.calc-back[disabled]{opacity:0;pointer-events:none}
.calc-result{text-align:center}
.result-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 17px;border-radius:100px;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);font-family:"JetBrains Mono",monospace;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.result-total{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-size:clamp(40px,6vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1;margin:8px 0 6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.result-total .cur{font-size:.42em;vertical-align:super;margin-right:6px;-webkit-text-fill-color:var(--text-3)}
.result-note{color:var(--text-3);font-size:14.4px;margin-bottom:24px}
.result-rows{max-width:470px;margin:0 auto 24px;text-align:left;background:var(--glass-hi);border:1px solid var(--line);padding:6px 18px}
.result-rows .rr{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px;opacity:0;transform:translateY(12px)}
.result-rows .rr:last-child{border-bottom:0}
.result-rows .rr.show{animation:rr-in .5s var(--ease) forwards}
@keyframes rr-in{to{opacity:1;transform:translateY(0)}}
.result-rows .rr span:first-child{color:var(--text-2)}
.result-rows .rr span:last-child{font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--text-1);white-space:nowrap}
.result-ctas{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.calc-result details{max-width:470px;margin:0 auto 24px;text-align:left;background:var(--glass-hi);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px}
.calc-result details summary{cursor:pointer;font-weight:650;font-size:15.5px;color:var(--text-1);list-style:none;min-height:32px}
.calc-result details summary::-webkit-details-marker{display:none}
.calc-result details ul{list-style:none;padding:12px 0 4px;display:grid;gap:8px;color:var(--text-2);font-size:14.4px;line-height:1.5}
@media (min-width:621px){.calc-head{padding:18px 24px}.calc-body{padding:32px 26px 34px}.calc-bar{width:140px}}

/* button aliases: calculator.js emits the original class names */
.btn-yellow{background:var(--gold);color:var(--accent-ink);border-color:var(--gold);box-shadow:0 10px 26px -10px var(--accent-glow)}
.btn-yellow:hover{color:var(--accent-ink);transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 12px 30px -10px var(--accent-glow)}
.btn-primary:hover{color:var(--accent-ink);transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--gold-line);color:var(--gold)}
.btn-outline:hover{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}
.btn-ghost{background:transparent;box-shadow:none;color:var(--text-3);border-color:var(--line)}
.btn-ghost:hover{color:var(--danger);border-color:var(--danger)}
.btn-lg{font-size:17.3px;padding:14px 26px;min-height:52px}
.btn-sm{font-size:14.4px;padding:9px 16px;min-height:40px}

/* ---------- the filled card, last word on ink ----------
   These repeat the .fill-card ink rules on purpose. The component sections
   above (.gcard h3, .info-card p, .stat .num and friends) come later in the
   cascade at equal specificity, so without this block a filled card would
   render dark body text on a blue panel. Keep this block at the bottom. */
.gcard.fill-card h3,.info-card.fill-card h3,.stat.fill-card .num,
.gcard.fill-card strong,.info-card.fill-card strong{color:var(--fill-ink)}
.gcard.fill-card p,.info-card.fill-card p,.gcard.fill-card small,
.stat.fill-card .label,.info-card.fill-card .g-link{color:var(--fill-muted)}
.gcard.fill-card .g-link,.info-card.fill-card .g-link{color:#D7FBE3}
.stat.fill-card .num{background:none;-webkit-text-fill-color:var(--fill-ink)}
.gcard.fill-card:hover,.info-card.fill-card:hover,.stat.fill-card:hover{
  border-color:transparent;box-shadow:0 0 0 6px var(--plate),var(--fill-glow)}
.info-card.fill-card .g-ico,.gcard.fill-card .g-ico,
.info-card.fill-card .g-ico.wa{background:rgba(255,255,255,.16);border-color:var(--fill-line)}

/* a price table as the section's filled card (offshore's jurisdictions).
   Every hairline and every ink colour has to survive the blue. */
.table-wrap.fill-card .tw-head{color:#D7FBE3;border-bottom-color:var(--fill-line)}
.table-wrap.fill-card .price-table th{color:var(--fill-muted);border-bottom-color:var(--fill-line)}
.table-wrap.fill-card .price-table td{color:var(--fill-muted);border-bottom-color:rgba(255,255,255,.1)}
.table-wrap.fill-card .price-table td:last-child{color:var(--fill-ink)}
.table-wrap.fill-card .price-table tr.total td{background:rgba(255,255,255,.12);color:var(--fill-ink)}
.table-wrap.fill-card .price-table tr.total td:last-child{color:#D7FBE3}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================================
   BLOG. The generator (scripts/build-blog.mjs) emits exactly these classes.
   Two surfaces: the INDEX (a card grid in the site's own language, one
   fill-card per view) and an ARTICLE (a centred single column that reads like
   a long-form post, no sidebar, generous measure and type). Phone rules for
   both live in the PHONE EXPERIENCE block below, not here.
   ========================================================================= */

/* ---- category pills. BUTTONS on /blog (they filter the grid in place) and
       LINKS on a category page (they navigate). One class, so the row looks
       identical either way. ---- */
.np-cats{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px}
.np-pill{appearance:none;flex:none;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--card-grad);color:var(--text-2);
  font-family:inherit;font-weight:600;font-size:14.4px;border-radius:100px;
  padding:10px 18px;cursor:pointer;white-space:nowrap;min-height:44px;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.np-pill:hover{border-color:var(--accent);color:var(--accent)}
.np-pill .np-n{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--text-3)}
.np-pill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 8px 22px -10px var(--accent-glow)}
.np-pill.on .np-n{color:var(--accent-ink);opacity:.72}

/* ---- the card grid: 3 up on desktop, 2 on a tablet, 1 on a phone ---- */
.np-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:stretch}
@media (max-width:1024px){.np-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}

/* ---- the card. Image, then category + read time, then headline, then
       excerpt, then the author footer with the date. It is an <article> and
       not one big <a> on purpose: the category and the headline are separate
       destinations, and a link cannot legally sit inside a link. ---- */
.npcard{display:flex;flex-direction:column;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card-grad);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
  animation:np-in .42s var(--ease) both}
@keyframes np-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.npcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.np-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--glass);
  border-bottom:1px solid var(--line)}
.np-img img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.npcard:hover .np-img img{transform:scale(1.04)}
.np-ico{display:flex;align-items:center;justify-content:center;height:100%;font-size:40px}
.np-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.np-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.np-cat{min-width:0;font-family:"JetBrains Mono",monospace;font-size:10.4px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-cat:hover{text-decoration:underline;text-underline-offset:3px}
.np-read,.np-date{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-family:"JetBrains Mono",monospace;font-size:10.4px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.np-i{width:13px;height:13px;flex:none}
.np-h{font-size:19px;font-weight:680;letter-spacing:-.022em;line-height:1.26;margin:0}
.np-h a{color:var(--text-1);transition:color var(--t-fast) var(--ease)}
.npcard:hover .np-h a{color:var(--accent)}
.np-ex{font-size:14.8px;color:var(--text-2);line-height:1.56;margin:9px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* the author footer: avatar, name, job title, then the date on the right */
.np-foot{display:flex;align-items:center;gap:10px;margin:auto 0 0;padding-top:15px;
  border-top:1px solid var(--line-soft)}
.np-av{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-strong);background:var(--glass-hi)}
.np-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.np-name{font-size:12.8px;font-weight:700;color:var(--text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-job{font-size:10.6px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-foot .np-date{margin-left:auto}

/* ---- our own promo tiles, where Neil Patel sells ad space. No sponsors, so
       no "join 5000 companies" banners: just the next step on this site.
       ui.js places them with CSS order, so filtering never strands one. ---- */
/* the tile stretches to the tallest card in its row, so the copy is centred
   rather than pinned top and bottom with a hole in the middle */
.np-promo{display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:linear-gradient(158deg,var(--glass-hi),var(--glass));padding:22px 20px 20px}
.np-promo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:20px 20px;opacity:.5;
  mask-image:radial-gradient(ellipse 78% 70% at 82% 0,black,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 78% 70% at 82% 0,black,transparent 72%)}
.np-promo>*{position:relative;z-index:1}
.np-p-k{font-family:"JetBrains Mono",monospace;font-size:10.4px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.np-p-h{display:block;font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.22;
  margin:10px 0 0;color:var(--text-1)}
.np-promo p{font-size:14.6px;color:var(--text-2);line-height:1.56;margin:9px 0 18px}
.np-p-cta{align-self:flex-start;flex:none}
.np-promo.fill{background:var(--fill);border-color:transparent;color:var(--fill-ink);
  box-shadow:0 0 0 6px var(--plate),var(--fill-glow)}
.np-promo.fill::after{opacity:.3}
.np-promo.fill .np-p-k{color:#D7FBE3}
.np-promo.fill .np-p-h{color:var(--fill-ink)}
.np-promo.fill p{color:var(--fill-muted)}
.np-promo.fill .btn.primary{background:#fff;color:#15803D;border-color:transparent;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.np-promo.fill .btn.primary:hover{background:#fff;color:#15803D;transform:translateY(-2px)}

/* ---- Load More, in place of the old 1 2 3 4 5 pager ---- */
.np-more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:38px}
.np-more .btn{min-width:250px;justify-content:center}
.np-count{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);margin:0}
.np-count b{color:var(--accent);font-weight:600}
.np-empty{text-align:center;color:var(--text-2);font-size:16.3px;padding:36px 0}

/* ---- featured card: the newest guide, above the grid ---- */
.bfeat{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 26px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card-grad);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.bfeat:hover{border-color:var(--accent);box-shadow:var(--shadow-soft)}
.bfeat .bf-body{display:flex;flex-direction:column;padding:20px 18px 22px}
.bfeat .np-h{font-size:24px;font-weight:700;letter-spacing:-.028em;line-height:1.18}
.bfeat .np-ex{font-size:15.4px;-webkit-line-clamp:4}
.bfeat .np-foot{margin-top:16px}
.bfeat .bf-more{align-self:flex-start;margin-top:20px}
.bfeat:hover .np-h a{color:var(--accent)}
@media (min-width:781px){
  /* the image keeps its 16:9 shape and centres itself rather than stretching to
     the row height, so the thumbnail is never cropped on a wide screen */
  .bfeat{grid-template-columns:1.1fr 1fr;align-items:center}
  .bfeat .np-img{align-self:center;border-bottom:0;border-right:1px solid var(--line)}
  .bfeat .bf-body{padding:30px 30px 32px;justify-content:center}
  .bfeat .np-h{font-size:31px}
}
@media (min-width:1025px){
  .bfeat .np-h{font-size:35px}
  .bfeat .bf-body{padding:38px 38px 40px}
}

/* ---- archive ---- */
.archive-wrap{max-width:820px;margin:0 auto}
.archive-group{margin-bottom:34px}
.ar-month{display:flex;align-items:center;gap:12px;font-size:21.8px;font-weight:650;letter-spacing:-.025em;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ar-month .ar-count{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--text-3);border:1px solid var(--line);border-radius:100px;padding:4px 11px}
.archive-list{list-style:none}
.archive-list li{border-bottom:1px solid var(--line-soft)}
.archive-list li:last-child{border-bottom:0}
.archive-list a{display:flex;flex-direction:column;gap:3px;padding:14px 2px;transition:padding var(--t-fast) var(--ease)}
.archive-list a:hover{padding-left:10px}
.archive-list .ar-t{font-size:16.7px;font-weight:600;color:var(--text-1);line-height:1.35;transition:color var(--t-fast) var(--ease)}
.archive-list a:hover .ar-t{color:var(--accent)}
.archive-list .ar-meta{font-family:"JetBrains Mono",monospace;font-size:10.9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3)}
.archive-list .ar-meta .bdot{opacity:.6}

/* =========================================================================
   ARTICLE: two columns from 1025px up. The reading column on the left, a
   sticky rail on the right carrying the table of contents and the CTA cards.
   Below 1025px it collapses to one centred column and the TOC goes back to
   being the collapsible strip above the prose.
   ========================================================================= */
.article{position:relative;z-index:1;padding:8px 0 40px}
.article-main{min-width:0;max-width:820px;margin:0 auto}
.art-side{display:none}
@media (min-width:1025px){
  .article-shell{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:56px}
  .article-main{max-width:none;margin:0}
  .art-side{display:block;min-width:0}
  /* the rail sticks INSIDE its own column, so the column has to keep the
     row's full height. Never add align-items:start to the grid above, that
     shrink-wraps the column and sticky then has nowhere to travel. */
  .art-side-in{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px;
    max-height:calc(100dvh - 108px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;padding-right:2px}
  .toc{display:none}
}
.article-head{margin:18px 0 22px}
.btag.standalone{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line);border-radius:100px;padding:7px 15px;background:var(--glass);margin:0}
.btag.standalone:hover{border-color:var(--accent)}
.article-head h1{font-size:clamp(31px,4.4vw,49px);font-weight:600;letter-spacing:-.035em;line-height:1.08;margin:16px 0 14px}

/* the byline: avatar, name, job title, then the date and read time.
   When an article has been updated, the shown date is the update date and the
   full history lives in the title attribute and the BlogPosting schema, which
   is what search engines actually read. */
.art-by{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line-soft)}
.art-by .np-av{width:44px;height:44px}
.art-by .np-name{font-size:14.4px}
.art-by .np-job{font-size:11.5px}
.art-by-meta{display:flex;align-items:center;gap:16px;margin-left:auto}
.art-by .d-sm{display:none}

/* ---- the sticky rail ---- */
.side-k{display:block;font-family:"JetBrains Mono",monospace;font-size:10.6px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.side-toc{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card-grad);
  padding:16px 17px 10px}
/* a 14-heading guide would make the rail taller than the screen and push the
   green Book card out of sight, so the list gets its own scroll and the CTAs
   always stay reachable */
.side-toc-list{list-style:none;counter-reset:stoc;margin-top:10px;position:relative;
  max-height:min(34vh,300px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.side-toc-list li{counter-increment:stoc}
.side-toc-list a{display:flex;gap:10px;padding:8px 0 8px 11px;margin-left:-12px;
  border-left:2px solid transparent;font-size:14.4px;line-height:1.4;color:var(--text-2);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.side-toc-list a::before{content:counter(stoc,decimal-leading-zero);font-family:"JetBrains Mono",monospace;
  font-size:10.6px;color:var(--text-3);flex:none;padding-top:3px}
.side-toc-list a:hover{color:var(--accent)}
.side-toc-list a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.side-toc-list a.on::before{color:var(--accent)}
.side-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card-grad);
  padding:18px 17px}
.side-card strong{display:block;font-size:17.3px;font-weight:700;letter-spacing:-.02em;line-height:1.25;
  color:var(--text-1);margin:9px 0 0}
.side-card strong em{font-style:normal;color:var(--accent)}
.side-card p{font-size:14px;color:var(--text-2);line-height:1.55;margin:8px 0 14px}
.side-card .btn{width:100%;justify-content:center}
.side-card.fill{background:var(--fill);border-color:transparent;
  box-shadow:0 0 0 5px var(--plate),var(--fill-glow)}
.side-card.fill .side-k{color:#D7FBE3}
.side-card.fill strong,.side-card.fill strong em{color:var(--fill-ink)}
.side-card.fill p{color:var(--fill-muted)}
.side-card.fill .btn.primary{background:#fff;color:#15803D;border-color:transparent}
.side-card.fill .btn.primary:hover{background:#fff;color:#15803D}

/* the answer-first box, the featured-snippet target */
.article-answer{padding:22px 24px;margin-bottom:26px}
.article-answer .aa-k{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.article-answer .answer-lead{font-size:19px;line-height:1.66;color:var(--text-1)}
.article-answer .answer-lead+.answer-lead{margin-top:14px}

/* table of contents, collapsible */
.toc{margin:0 0 30px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card-grad);overflow:hidden}
.toc-toggle{appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;
  background:transparent;border:0;color:var(--text-1);font-family:"JetBrains Mono",monospace;font-size:11.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:15px 18px;cursor:pointer;min-height:50px}
.toc-toggle .toc-caret{transition:transform var(--t-med) var(--ease);color:var(--accent)}
.toc-toggle[aria-expanded="true"] .toc-caret{transform:rotate(180deg)}
/* the collapse animates ONE wrapper (.toc-body), exactly like the FAQ. Do NOT
   put the 0fr/1fr grid on .toc-list itself: its children are the <li>s, so the
   fr track only sizes the first row and the first item (Step 1) collapses to
   zero while the rest overflow into implicit auto rows. Wrapping fixes it. */
.toc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease)}
.toc-toggle[aria-expanded="true"]+.toc-body{grid-template-rows:1fr}
.toc-body>*{overflow:hidden;min-height:0}
.toc-list{list-style:none;counter-reset:toc}
.toc-list li{counter-increment:toc;border-top:1px solid var(--line-soft)}
.toc-list a{display:flex;gap:11px;padding:12px 18px;font-size:15.5px;color:var(--text-2);line-height:1.4;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.toc-list a::before{content:counter(toc,decimal-leading-zero);font-family:"JetBrains Mono",monospace;
  font-size:11.5px;color:var(--accent);flex:none;padding-top:2px}
.toc-list a:hover{color:var(--accent);background:var(--glass-hi)}
/* on a wide screen the TOC can stay open by default, it is not in the way */
@media (min-width:721px){
  .toc-body{grid-template-rows:1fr}
  .toc-toggle{cursor:default;pointer-events:none}
  .toc-toggle .toc-caret{display:none}
}

/* the prose body: the whole point is that it reads better than Shuraa */
.prose{font-size:19px;line-height:1.78;color:var(--text-1)}
.prose>*+*{margin-top:22px}
.prose p{color:var(--text-1);font-weight:400}
.prose h2{font-size:clamp(25px,3vw,32px);font-weight:620;letter-spacing:-.03em;line-height:1.18;
  margin-top:44px;scroll-margin-top:84px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;font-weight:650;letter-spacing:-.02em;line-height:1.3;margin-top:30px}
.prose a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-strong);transition:text-decoration-color var(--t-fast) var(--ease)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong{color:var(--text-1);font-weight:700}
.prose-ul,.prose-ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.prose-ul li,.prose-ol li{position:relative;padding-left:32px;color:var(--text-1);line-height:1.65}
.prose-ul li::before{content:"";position:absolute;left:8px;top:12px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.prose-ol{counter-reset:pro}
.prose-ol li{counter-increment:pro}
.prose-ol li::before{content:counter(pro);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--line);color:var(--accent);font-family:"JetBrains Mono",monospace;
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.prose-table{margin-top:26px;margin-bottom:26px}
.prose-quote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:28px 0;
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;font-style:italic;font-weight:300;font-size:22px;line-height:1.5;
  color:var(--text-1);letter-spacing:-.02em}

/* inline note / tip */
.prose-note{display:flex;gap:14px;align-items:flex-start;margin:28px 0;padding:18px 20px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:linear-gradient(150deg,var(--accent-soft),transparent 64%),var(--card-grad)}
.prose-note.tip{border-color:var(--gold-line);background:linear-gradient(150deg,var(--gold-soft),transparent 64%),var(--card-grad)}
.prose-note .pn-ico{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--accent-soft);border:1px solid var(--line)}
.prose-note.tip .pn-ico{background:var(--gold-soft);border-color:var(--gold-line)}
.prose-note .pn-t{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.prose-note.tip .pn-t{color:var(--gold)}
.prose-note p{font-size:16px;color:var(--text-2);line-height:1.62;margin:0}

/* key takeaways box, sits high in the article */
.takeaways{margin:26px 0;padding:20px 22px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);
  background:linear-gradient(158deg,var(--glass-hi),var(--glass))}
.takeaways .tk-t{display:block;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.takeaways li{position:relative;padding-left:30px;font-size:16.3px;line-height:1.55;color:var(--text-1)}
.takeaways li::before{content:"";position:absolute;left:6px;top:9px;width:8px;height:8px;border-radius:2px;
  transform:rotate(45deg);background:var(--accent)}

/* the inline calculator CTA (calculator-only, per the build decision) */
.prose-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  margin:32px 0;padding:22px 24px;border-radius:var(--radius);background:var(--fill);color:var(--fill-ink);
  border:1px solid transparent;box-shadow:0 0 0 6px var(--plate),var(--fill-glow);position:relative;overflow:hidden}
.prose-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 10% -10%,rgba(215,251,227,.3),transparent 62%),
  radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1px);background-size:auto,22px 22px;opacity:.9}
.prose-cta>*{position:relative;z-index:1}
.prose-cta .pc-k{display:block;font-family:"JetBrains Mono",monospace;font-size:10.9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#D7FBE3;margin-bottom:7px}
.prose-cta strong{display:block;font-size:20px;font-weight:650;color:var(--fill-ink);letter-spacing:-.02em;line-height:1.25}
.prose-cta p{font-size:15px;color:var(--fill-muted);margin:6px 0 0;max-width:440px;line-height:1.55}
.prose-cta .btn{flex:none;background:#fff;color:#15803D;border-color:transparent;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.prose-cta .btn:hover{background:#fff;color:#15803D;transform:translateY(-2px)}

/* the article FAQ reuses the .faq accordion; just spacing around it */
.article-faq{margin-top:46px}
.article-faq>h2{font-size:clamp(25px,3vw,32px);font-weight:620;letter-spacing:-.03em;margin-bottom:18px;text-align:center}
.article-faq .faq{margin-top:0}
.article-cta{margin-top:40px}
.article-related{position:relative;z-index:1;padding-top:8px}

/* ════════════════════════ PHONE EXPERIENCE ════════════════════════
   Effectively all of this site's traffic is on phones, so the phone layout is
   its own thing, not the desktop layout squeezed. Everything phone-specific
   lives in this ONE block so it is easy to find and tune later.
   Carried over from the command center: bottom sheets instead of centred
   boxes, icon-only in tight bars, fields paired two to a row, headers stacked
   instead of squeezed, pill rows that scroll sideways, tighter frames.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* tighter frames: page padding 24/16, card padding 20/17, radius 18 */
  :root{--radius:18px}
  section{padding:44px 0}
  /* DP, 2026-07-25: one gutter for the WHOLE site on a phone. The new sections
     used 16px and the ported legacy sections used 18px, so nothing lined up as
     you scrolled and cards read as if they were touching the screen edge.
     20px each side, matched in scanner.css, is the single source of truth. */
  .wrap{width:calc(100% - 40px)}

  /* phones scroll a lot: reveals FADE only, no upward slide (the 16px shift
     read as jumpy boxes while scrolling, DP 2026-07-23) */
  .reveal{transform:none;transition:opacity .45s var(--ease)}
  .reveal.in{transform:none}
  .tnode{transform:none}
  .tnode.lit{transform:none}

  /* no green glow pinned to the viewport edges on phones: the fixed radial
     washes read as an ugly fade at the top and bottom while scrolling */
  .ambient{background:linear-gradient(180deg,var(--bg-1),var(--bg-0))}
  [data-theme="light"] .ambient{background:linear-gradient(180deg,var(--bg-1),var(--bg-0))}
  .ambient .orb{display:none}

  /* the bar carries the brand, the theme toggle and the menu. No page can
     afford a label-heavy header at 375px: the labels go, the icons stay. */
  .topbar{background:var(--bg-1);backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-theme="light"] .topbar{background:var(--bg-1)}
  .topbar-inner{gap:10px;padding:9px 0}
  /* the horizontal lockup stays height-driven on phones too, never squashed
     back to a square */
  .brand img{height:31px;width:auto}
  /* the mark swaps with the theme: white art on dark, navy art on light,
   exactly the guidelines' logo usage rules */
.logo-on-dark{display:block}
.logo-on-light{display:none}
[data-theme="light"] .logo-on-dark{display:none}
[data-theme="light"] .logo-on-light{display:block}
.brand .b-name{font-size:15.5px}
  .brand .b-sub{font-size:9.4px;letter-spacing:.16em}
  .topbar-cta{gap:7px;margin-left:auto}

  /* the menu rises from the bottom edge, the way a phone menu should.
     The bar drops its backdrop-filter above precisely so this can be fixed to
     the viewport: a filtered ancestor becomes the containing block for fixed
     children and the sheet would open inside the header instead. */
  .navlinks{position:fixed;top:auto;left:0;right:0;bottom:0;
    border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:0;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom));
    max-height:82dvh;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 -30px 70px -20px rgba(0,0,0,.7);
    transform:translateY(102%);opacity:1;z-index:90}
  /* the grab handle, so it reads as a sheet and not a stuck panel */
  .navlinks::before{content:"";flex:none;width:38px;height:4px;border-radius:99px;
    background:var(--line-strong);align-self:center;margin-bottom:10px}
  .navlinks.open{transform:translateY(0)}
  /* the dim behind the sheet. It cannot live on .navlinks::before: the sheet
     scrolls, and overflow:auto clips its own pseudo-elements. */
  .topbar:has(.navlinks.open)::after{content:"";position:fixed;inset:0;z-index:1;
    background:rgba(2,5,12,.62);animation:scrim-in var(--t-med) var(--ease) both}
  [data-theme="light"] .topbar:has(.navlinks.open)::after{background:rgba(14,26,51,.45)}
  @keyframes scrim-in{from{opacity:0}to{opacity:1}}
  /* the brand and the close button stay above the dim so the sheet can be shut */
  .brand,.topbar-cta{position:relative;z-index:3}
  .navlinks a{padding:13px 14px;font-size:17.3px;min-height:50px;display:flex;align-items:center;border-radius:12px}
  .navlinks a.on{background:var(--accent-soft);color:var(--accent)}

  /* hero */
  .hero{padding:28px 0 36px}
  .hero h1{margin:16px 0 12px}
  .hero .lead{font-size:17.3px}
  .hero-ctas{gap:10px;margin-top:20px}
  .hero-ctas .btn,.result-ctas .btn{flex:1 1 100%}
  /* the eyebrow drops its pill frame on phones: one quiet mono line, no box */
  .hero .eyebrow{border:0;background:transparent;box-shadow:none;padding:0;font-size:10.4px;letter-spacing:.12em;gap:7px}
  /* trust proof reads as one plain line with dot separators, so it stops
     competing with the two real buttons above it. The .chip-x tails are
     hidden here so all three fit a 375px line. */
  .hero-trust{gap:0;margin-top:16px;flex-wrap:nowrap;align-items:center;justify-content:flex-start;white-space:nowrap}
  .hero-trust span{border:0;background:transparent;padding:0;font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:11px;letter-spacing:0}
  .hero-trust i{display:none}
  .hero-trust > span + span::before{content:"\00B7";margin:0 7px;color:var(--text-3)}
  .hero-trust .chip-x{display:none}
  /* the scroll cue between the hero copy and the snapshot card */
  .scroll-cue{display:flex;justify-content:center;margin:20px 0 2px;color:var(--accent);animation:cue-bob 2s var(--ease) infinite}
  .scroll-cue svg{width:20px;height:20px}

  /* cards: less frame, more content */
  .gcard,.quote,.info-card,.answer-card,.form-card{padding:20px 17px}
  .est-card{padding:20px 17px}
  .band{padding:30px 20px}
  .stat{padding:20px 12px}
  .gcard::before,.quote::before,.info-card::before,.stat::before,.est-card::before,
  .band::before,.step::before,.tnode .t-card::before{left:16px;right:16px}
  .gcard h3{font-size:20px}
  .gcard .g-link{padding-top:16px;min-height:44px;align-items:center}
  .sec-head{margin-bottom:22px}

  /* a squeezed header renders its subtitle one word per line. Stack it. */
  .calc-head{flex-wrap:wrap;align-items:center;gap:10px 12px}
  .calc-head .title{flex:1 0 100%}
  .calc-progress{flex:1;min-width:0}
  .calc-bar{flex:1;width:auto}
  .calc-xp{flex:none}
  .gpt-head{gap:8px}
  .gpt-head .gh-new{margin-left:auto}

  /* pair fields two to a row instead of stacking every field on its own line */
  .form-grid{grid-template-columns:1fr 1fr;gap:10px}
  .field label{font-size:10.4px;letter-spacing:.12em}

  /* the estimate total: stack it so the AED figure never wraps mid-number */
  .est-total{flex-direction:column;align-items:flex-start;gap:2px}
  .est-total strong{font-size:28px}
  .est-row{font-size:14.8px}

  /* quotes and FAQ stay readable, not shrunk */
  .quote p{font-size:18.4px}
  .faq-q{font-size:16.7px;padding:16px 16px}
  .faq-a p{padding:0 16px 18px;font-size:15.5px}

  /* the price tables: tighter cells so most of them fit without the inner
     sideways scroll. The scroll stays as the fallback for the wide ones. */
  .price-table th{padding:12px 12px;font-size:10.9px}
  .price-table td{padding:12px 12px;font-size:14.4px}
  .price-table td:last-child{font-size:13.2px}
  .table-wrap .tw-head{padding:14px 16px;font-size:11.5px}

  /* the footer link columns */
  .foot-brand p{font-size:15px}

  /* ── DBC GPT on a phone ──────────────────────────────────────────
     You land IN the chat. The header above it is cut to the headline, the
     breadcrumb goes, and the topic list moves into a bottom sheet, so the
     composer is on screen the moment the page opens and never moves after. */
  .gpt-section{--gpt-chrome:196px}
  .gpt-page-hero{padding:14px 0 12px}
  .gpt-page-hero .eyebrow,.gpt-page-hero .lead{display:none}
  .gpt-page-hero h1{font-size:25px;margin:0;line-height:1.15}
  .gpt-section .crumbs,.gpt-crumbs{display:none}
  .gpt-wrap{gap:0;min-height:400px}

  .gpt-head{padding:11px 14px;gap:8px}
  .gpt-head .gh-s{display:none}
  .gpt-head .gh-topics{display:inline-flex;margin-left:auto}
  .gpt-head .gh-new{margin-left:0}
  .gpt-head .btn.sm{font-size:13.2px;padding:8px 13px;min-height:38px}
  .gpt-log{padding:16px 14px 6px;gap:15px}
  .gpt-msg .gm-body{font-size:16px}
  /* a hairline over the chips row: chat text clips against the composer area
     while scrolling, and without a separator the cut read as broken layout */
  .gpt-starters{padding:9px 14px 0;border-top:1px solid var(--line)}
  .gpt-form{padding:10px 14px 6px}
  .gpt-note{font-size:11.5px;padding:2px 14px calc(10px + env(safe-area-inset-bottom))}

  /* the topic list rises from the bottom, like every other sheet on the site.
     transform:none matters: .reveal leaves an identity transform behind, and a
     transformed element cannot host a fixed-position sheet correctly. */
  .gpt-side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;
    opacity:1;transform:translateY(102%);
    border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:0;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom));
    max-height:78dvh;box-shadow:0 -30px 70px -20px rgba(0,0,0,.7);
    transition:transform var(--t-med) var(--ease)}
  .gpt-side.open{transform:translateY(0)}
  .gs-sheet-head{display:flex;align-items:center;gap:10px;flex:none;
    padding:2px 2px 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .gs-sheet-head span{font-family:"JetBrains Mono",monospace;font-size:11.5px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
  .gs-close{margin-left:auto;appearance:none;width:38px;height:38px;border-radius:50%;
    border:1px solid var(--line);background:var(--glass-hi);color:var(--text-2);
    font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .gpt-topic{font-size:16.7px;min-height:48px}
  /* the dim behind the sheet, on the section so the sheet's own scroll cannot clip it */
  .gpt-section:has(.gpt-side.open)::after{content:"";position:fixed;inset:0;z-index:89;
    background:rgba(2,5,12,.62);animation:scrim-in var(--t-med) var(--ease) both}
  [data-theme="light"] .gpt-section:has(.gpt-side.open)::after{background:rgba(14,26,51,.45)}

  /* ── BLOG on a phone ─────────────────────────────────────────────
     The filter pills scroll sideways instead of wrapping into a tall block.
     ONE card per row (DP, 2026-07-25): the Neil Patel card carries an author
     footer with an avatar, a name and a job title, and that simply cannot be
     read at 167px, which is what a 2-up card is on a 375px screen. The
     article column loses its side gutters so the measure stays generous, and
     the prose type steps down so it is comfortable, not shrunk. */
  .np-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    gap:8px;margin:0 0 20px;padding-bottom:2px}
  .np-cats::-webkit-scrollbar{display:none}
  .np-pill{font-size:13.6px;padding:9px 15px}

  .np-grid{grid-template-columns:1fr;gap:16px}
  .np-body{padding:14px 16px 16px}
  .np-h{font-size:18.4px}
  .np-ex{font-size:14.4px}
  .np-promo{padding:20px 17px 18px}
  .np-p-h{font-size:19px}
  .np-more{margin-top:30px}
  .np-more .btn{width:100%;min-width:0}

  /* featured card */
  .bfeat .np-h{font-size:21px}
  .bfeat .bf-body{padding:17px 15px 19px}
  .bfeat .np-ex{font-size:14.6px}

  /* article */
  .article{padding:4px 0 32px}
  .article-head{margin:14px 0 18px}
  /* the byline holds ONE line on a phone: avatar, name, date, read time.
     The job title is the thing that goes, it is already in the schema. */
  .art-by{gap:9px;margin-top:15px;padding-top:13px;flex-wrap:nowrap}
  .art-by .np-av{width:38px;height:38px}
  .art-by .np-name{font-size:13.2px}
  .art-by .np-job{display:none}
  .art-by-meta{gap:10px;min-width:0;flex:none}
  .art-by-meta .np-date,.art-by-meta .np-read{font-size:9.4px;letter-spacing:.03em;gap:5px}
  .art-by-meta .np-i{width:11px;height:11px}
  .art-by .d-lg{display:none}
  .art-by .d-sm{display:inline}
  .article-answer{padding:18px 17px}

  /* DP, 2026-07-25: on a phone the "On this page" bar is shut by default and
     people scrolled straight past it. While it is SHUT it breathes a green
     ring, gives an occasional wobble and bobs its caret, so it reads as a
     thing you can tap. The moment it opens, aria-expanded flips to true, the
     :has() below stops matching and the bar goes completely still. */
  .toc:has(.toc-toggle[aria-expanded="false"]){
    border-color:var(--accent);
    animation:toc-pulse 2.3s var(--ease) infinite, toc-wobble 6s var(--ease) infinite}
  @keyframes toc-pulse{
    0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}
    55%{box-shadow:0 0 0 9px transparent}
  }
  @keyframes toc-wobble{
    0%,86%,100%{transform:none}
    89%{transform:rotate(-.55deg)}
    92%{transform:rotate(.55deg)}
    95%{transform:rotate(-.28deg)}
  }
  .toc-toggle[aria-expanded="false"]{color:var(--accent)}
  .toc-toggle[aria-expanded="false"] .toc-caret{animation:toc-bob 1.5s var(--ease) infinite}
  @keyframes toc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
  /* nobody should get a wobbling box if they asked the phone to calm down */
  @media (prefers-reduced-motion:reduce){
    .toc:has(.toc-toggle[aria-expanded="false"]){animation:none;box-shadow:0 0 0 3px var(--accent-soft)}
    .toc-toggle[aria-expanded="false"] .toc-caret{animation:none}
  }
  .article-answer .answer-lead{font-size:17.3px}
  .prose{font-size:17.3px;line-height:1.72}
  .prose>*+*{margin-top:19px}
  .prose h2{margin-top:36px}
  .prose-cta{padding:20px 18px;gap:14px}
  .prose-cta .btn{flex:1 1 100%}
  .takeaways{padding:18px 17px}
  .prose-note{padding:16px 16px}
  .archive-list .ar-t{font-size:15.8px}

  /* Article tables stay TABLES on a phone (DP, 2026-07-23): the box keeps its
     card frame and the grid scrolls sideways inside .table-scroll when it is
     wider than the screen. Compact type keeps the rows short instead of the
     old stacked-card layout that ate vertical space. */
  .prose-table .tw-head{padding:13px 16px;font-size:10.4px;letter-spacing:.12em}
  .prose-table .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose-table table.price-table{min-width:480px}
  .prose-table th{padding:10px 12px;font-size:9.8px;letter-spacing:.1em}
  .prose-table td{padding:10px 12px;font-size:13.2px;white-space:normal}
  .prose-table td:last-child{font-size:12.1px}
}
@media (max-width:380px){
  /* the mark swaps with the theme: white art on dark, navy art on light,
   exactly the guidelines' logo usage rules */
.logo-on-dark{display:block}
.logo-on-light{display:none}
[data-theme="light"] .logo-on-dark{display:none}
[data-theme="light"] .logo-on-light{display:block}
.brand .b-name{font-size:14.4px}
  .brand .b-sub{font-size:8.8px}
  .stepper .count{font-size:44px;min-width:74px}
}


/* ---------- handwritten aside (Caveat), the SattvaRig wink ---------- */
.hand{font-family:"Caveat",cursive;font-size:21px;font-weight:500;color:var(--accent-2);letter-spacing:0;transform:rotate(-1.6deg);display:inline-block;line-height:1.3}
[data-theme="light"] .hand{color:#15803D}