/* ==========================================================================
   GlobalServer Capital
   Design language lifted from coming_soon.html:
     - system sans for text, Georgia for display, no webfont request
     - twin radial atmosphere (cool from the top, warm from the bottom)
     - navy gradient buttons, gold pill eyebrows, gold focus ring
   ========================================================================== */

:root{
  /* surface */
  --bg:#f4f7fc;
  --paper:#ffffff;
  --line:#e6ebf5;
  --line-soft:#f0f3f9;

  /* ink */
  --ink:#111a3d;
  --navy-dark:#0f1d3d;
  --navy:#16224e;
  --navy-2:#27397e;
  --muted:#5f6d92;
  --muted-soft:#8a97b8;

  /* accent */
  --gold:#b6862f;
  --gold-soft:#d9b463;
  --gold-line:#ecdcb9;
  --gold-bg:#fbf5e8;

  /* status */
  --green:#1f9d6b;
  --red:#cf4a63;

  /* shape */
  --r:12px;
  --r-sm:9px;
  --r-lg:16px;
  --pill:999px;

  --shadow-sm:0 6px 20px rgba(20,30,70,.06);
  --shadow:0 8px 24px rgba(20,30,70,.09);
  --shadow-lg:0 18px 44px rgba(20,30,70,.13);

  --t:.16s cubic-bezier(.2,.7,.2,1);
  --wrap:1180px;
  --wrap-narrow:860px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  /* Light only design. Declared so the OS does not render form controls and
     scrollbars in dark mode against a light page. */
  color-scheme:light;
  -webkit-text-size-adjust:100%;
}

/* Grid and flex children default to min-width:auto, which stops a track from
   shrinking below its content. That is what pushed the terminal block past the
   viewport on narrow screens, so every layout child is allowed to shrink and
   the scrollable parts scroll inside their own box instead. */
.split > *,
.cards > *,
.cards-2 > *,
.cards-4 > *,
.products > *,
.posts > *,
.proof > *,
.versus > *,
.legal > *,
.stats-inner > *,
.flow li > *{min-width:0}

body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 50% -6%, #e9f0fb 0%, transparent 62%),
    radial-gradient(920px 520px at 50% 106%, #f7f0e2 0%, transparent 64%),
    var(--bg);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

img{max-width:100%;display:block}
::selection{background:var(--gold-soft);color:var(--navy-dark)}

/* Removes the 300ms double tap zoom delay and the default blue flash on tap. */
a,button,input,select,textarea,summary,label{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(22,34,78,.10);
}

/* Keeps a short last line off its own row in display headings. */
.display,.sec-head .lede,.page-head .lede{text-wrap:balance}
.lede,.card p,.prose p{text-wrap:pretty}

/* Long unbroken strings (an IBAN, a wallet address) must never widen the page. */
.card p,.checks li,.prose p,.spec-row dd,.proof-item p,.product-head p{overflow-wrap:anywhere}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  font-size:14px;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

/* ==========================================================================
   Motion
   The .js class is set by a tiny inline script in the head, and only when the
   browser supports IntersectionObserver and the visitor has not asked for
   reduced motion. Without it nothing is ever hidden, so content can never be
   stranded invisible if the script fails to run.
   ========================================================================== */
.js .card,
.js .product,
.js .proof-item,
.js .versus-col,
.js .spec,
.js .terminal,
.js .stat,
.js .post,
.js .sec-head,
.js .flow li,
.js .note-panel,
.js .cat-links,
.js .deflist > div,
.js .reasons > div,
.js .card-split,
.js .card-num,
.js .card-tone,
.js .card-panel,
.js .sendto,
.js .fees{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
}
/* Doubled class so this outranks the varied selectors above, several of which
   end in an element and would otherwise win on specificity. */
.js .is-in.is-in{opacity:1;transform:none}

/* ---------- Layout primitives ---------- */
/* max() with the safe area keeps content clear of a notch in landscape. */
.wrap{
  max-width:var(--wrap);margin:0 auto;
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
}
.wrap-narrow{
  max-width:var(--wrap-narrow);margin:0 auto;
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
}

.section{padding:88px 0}
.section-tight{padding:56px 0}
.section-paper{
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---------- Type ---------- */
.display{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.08;
  color:var(--navy);
}
.display .accent{color:var(--gold);font-style:italic}

h1.display{font-size:clamp(32px,5.4vw,54px)}
h2.display{font-size:clamp(26px,3.4vw,38px);line-height:1.16}
h3.display{font-size:clamp(20px,2.2vw,24px);line-height:1.25}

.eyebrow{
  display:inline-block;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--gold);
  border:1px solid var(--gold-line);
  background:var(--gold-bg);
  padding:7px 16px;border-radius:var(--pill);
}

.label{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--gold);
}

.lede{
  font-size:clamp(15px,1.7vw,17.5px);
  line-height:1.7;color:var(--muted);
}

/* Section heading block */
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .label{display:block;margin-bottom:12px}
.sec-head .display{margin-bottom:14px}

/* Labelled hairline divider, borrowed from the coming soon "or" rule */
.rule{
  display:flex;align-items:center;gap:14px;
  color:var(--muted-soft);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  margin:0 0 28px;
}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.rule.start::before{display:none}

/* ---------- Top accent + header ---------- */
.topbar-accent{height:3px;background:linear-gradient(90deg,var(--navy),var(--gold))}

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
  height:70px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand .logo{
  width:42px;height:42px;border-radius:13px;
  background:#fff;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(20,30,70,.10);
}
.brand .logo img{width:32px;height:32px;object-fit:contain}
.brand .word{font-size:17.5px;font-weight:800;letter-spacing:.01em;color:var(--navy);white-space:nowrap}
.brand .word span{color:var(--gold)}

.nav{display:flex;align-items:center;gap:4px;list-style:none}
.nav a{
  display:block;padding:9px 14px;
  font-size:14px;font-weight:500;color:var(--muted);
  text-decoration:none;border-radius:var(--r-sm);
  transition:color var(--t),background var(--t);
}
.nav a:hover{color:var(--navy);background:var(--line-soft)}
.nav a[aria-current="page"]{color:var(--navy);font-weight:600;background:var(--line-soft)}
.nav a.nav-cta{
  margin-left:8px;padding:10px 20px;
  color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  box-shadow:0 8px 20px rgba(22,34,78,.20);
}
.nav a.nav-cta:hover{color:#fff;background:linear-gradient(135deg,var(--navy-2),var(--navy-2));box-shadow:0 12px 26px rgba(22,34,78,.28)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px;cursor:pointer;color:var(--navy);
}

/* Services submenu. Opens on hover for pointers and on focus-within for
   keyboards, so it needs no JavaScript to be operable either way. */
.nav .has-menu{position:relative}
.nav .has-menu > a{display:flex;align-items:center;gap:5px}
.nav .has-menu > a svg{width:11px;height:11px;opacity:.55;transition:transform var(--t)}
.nav .has-menu:hover > a svg,
.nav .has-menu:focus-within > a svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:100%;left:0;
  min-width:460px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  z-index:110;
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{padding:10px 12px;font-size:13.5px;white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:700;font-size:14.5px;line-height:1;
  padding:14px 24px;border-radius:var(--r);
  text-decoration:none;border:none;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);
}
.btn svg{width:17px;height:17px;flex-shrink:0}

.btn-primary{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;box-shadow:0 12px 26px rgba(22,34,78,.22);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(22,34,78,.30)}

.btn-outline{
  background:var(--paper);color:var(--navy);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.btn-outline:hover{transform:translateY(-2px);border-color:var(--gold-soft);box-shadow:0 12px 28px rgba(182,134,47,.14)}

.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:#fff;box-shadow:0 12px 26px rgba(182,134,47,.26);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(182,134,47,.34)}

.btn-block{width:100%}

.link-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:700;color:var(--gold);
  text-decoration:none;transition:gap var(--t);
}
.link-more:hover{gap:11px}

/* ---------- Hero ---------- */
.hero{padding:84px 0 72px;text-align:center}
.hero-inner{max-width:760px;margin:0 auto}
.hero .eyebrow{margin-bottom:24px}
.hero .display{margin-bottom:20px}
.hero .lede{max-width:580px;margin:0 auto 32px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-note{
  margin-top:26px;font-size:13px;color:var(--muted-soft);
}

.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Page head (inner pages) ---------- */
.page-head{padding:72px 0 60px;text-align:center}
.page-head .eyebrow{margin-bottom:20px}
.page-head .display{margin-bottom:16px}
.page-head .lede{max-width:600px;margin:0 auto}

/* ---------- Stats ---------- */
.stats{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  position:relative;z-index:2;
}
.stats-inner{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.stat{padding:30px 22px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .value{
  font-family:var(--serif);font-weight:700;line-height:1.1;
  font-size:clamp(23px,2.5vw,29px);color:var(--navy);
}
.stat .value.accent{color:var(--gold)}
.stat .name{
  margin:9px auto 0;max-width:230px;
  font-size:13px;line-height:1.55;color:var(--muted);font-weight:500;
}

/* ---------- Cards ---------- */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.cards-4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
.card .icon{
  width:46px;height:46px;border-radius:13px;
  background:var(--gold-bg);border:1px solid var(--gold-line);
  display:grid;place-items:center;color:var(--gold);
  margin-bottom:20px;
}
.card .icon svg{width:22px;height:22px}
.card h3{font-size:17.5px;font-weight:700;color:var(--navy);margin-bottom:9px;line-height:1.35}
.card p{font-size:14.5px;color:var(--muted);line-height:1.65}
.card .link-more{margin-top:16px}

.card-flat{box-shadow:none}
.card-flat:hover{transform:none;box-shadow:var(--shadow-sm)}

/* A whole card that is itself a link, used on the services index */
a.card{display:block;text-decoration:none;color:inherit}

/* Tighter bullet list for use inside a card */
.checks-sm{margin-top:15px}
.checks-sm li{font-size:13.5px;padding:5px 0;color:var(--muted);line-height:1.55}
.checks-sm li::before{width:5px;height:5px;margin-top:8px}

/* ---------- Service category page furniture ---------- */
.crumbs{margin-bottom:22px}
.crumbs ol{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px;list-style:none;
  font-size:12.5px;font-weight:600;color:var(--muted-soft);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"/";color:var(--line);font-weight:400}
.crumbs a{color:var(--muted);text-decoration:none;transition:color var(--t)}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current="page"]{color:var(--navy)}

.back-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:22px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  transition:color var(--t),gap var(--t);
}
.back-link svg{width:15px;height:15px}
.back-link:hover{color:var(--gold);gap:12px}

.note-panel{
  margin-top:44px;
  background:var(--gold-bg);
  border:1px solid var(--gold-line);
  border-radius:var(--r-lg);
  padding:26px 30px;
}
.note-panel .label{display:block;margin-bottom:10px}
.note-panel p{font-size:14.5px;line-height:1.7;color:var(--ink);max-width:840px}

.cat-links{display:flex;flex-wrap:wrap;gap:10px}
.cat-links a{
  padding:9px 16px;border-radius:var(--pill);
  font-size:13.5px;font-weight:600;color:var(--muted);
  text-decoration:none;
  background:var(--paper);border:1px solid var(--line);
  transition:color var(--t),border-color var(--t),transform var(--t);
}
.cat-links a:hover{color:var(--navy);border-color:var(--gold-soft);transform:translateY(-2px)}

/* Numbered card (values, disciplines) */
.card .num{
  font-family:var(--serif);font-size:15px;font-weight:700;
  color:var(--gold);display:block;margin-bottom:12px;
  letter-spacing:.04em;
}

/* ---------- Split (two column) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.wide-left{grid-template-columns:1.05fr .95fr}
.split.flip .split-media{order:-1}
/* Use when the two columns differ a lot in height, so they do not read as staggered. */
.split.top{align-items:start}

.checks{list-style:none;margin-top:22px;display:grid;gap:2px}
.checks li{
  display:flex;align-items:flex-start;gap:12px;
  padding:8px 0;font-size:15px;color:var(--ink);
}
.checks li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold);flex-shrink:0;margin-top:9px;
}
/* The li is a flex row, so mixed inline content must be wrapped in a single
   element or the gap lands between the bold lead-in and the rest of the line. */
.checks li > span{min-width:0}
.checks li strong{color:var(--navy);font-weight:700}

/* ---------- Product cards (the two platforms) ---------- */
.products{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.product{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.product:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
.product-head{padding:30px 30px 24px}
.product-head .label{display:block;margin-bottom:11px}
.product-head h3{
  font-family:var(--serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(21px,2.3vw,26px);line-height:1.2;
  color:var(--navy);margin-bottom:11px;
}
.product-head p{font-size:14.5px;color:var(--muted);line-height:1.65}
.product-facts{display:grid;grid-template-columns:repeat(2,1fr)}
.product-facts > div{padding:15px 30px;border-top:1px solid var(--line)}
.product-facts > div:nth-child(odd){border-right:1px solid var(--line)}
.product-facts dt{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted-soft);margin-bottom:5px;
}
.product-facts dd{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.35}
.product-body{padding:24px 30px 0;flex:1}
.product-body .checks{margin-top:0}
.product-foot{padding:24px 30px 30px;display:flex;gap:10px;flex-wrap:wrap}
.product-foot .btn{flex:1;min-width:150px}

/* Mono tag and role line, used by the StoS / IPIP / IPID trio */
.card .tag{
  display:inline-block;margin-bottom:14px;
  font:800 11.5px/1 ui-monospace,Consolas,"Courier New",monospace;
  letter-spacing:.16em;color:var(--gold);
  background:var(--gold-bg);border:1px solid var(--gold-line);
  padding:8px 12px;border-radius:8px;
}
.card .role{font-size:13px;font-weight:700;color:var(--muted-soft);margin-bottom:10px}

/* ---------- Terminal mockup ---------- */
.terminal{
  background:var(--navy-dark);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.terminal-bar{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.terminal-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.terminal-dot.gold{background:var(--gold-soft)}
.terminal-title{
  margin-left:7px;
  font:700 10.5px/1 ui-monospace,Consolas,"Courier New",monospace;
  letter-spacing:.18em;color:rgba(255,255,255,.42);
}
.terminal-body{
  padding:18px 20px;
  font-family:ui-monospace,Consolas,"Courier New",monospace;
  font-size:13px;line-height:1.85;color:#e8edf9;
  overflow-x:auto;
}
.terminal-body p{margin:0;white-space:pre}
.terminal-body .prompt{color:#8ba4e8}
.terminal-body .ok{color:#43c98d}
.terminal-body .dim{color:rgba(255,255,255,.42)}
.terminal-cursor{
  display:inline-block;width:8px;height:14px;
  background:var(--gold-soft);vertical-align:-2px;
  animation:blink 1.06s step-end infinite;
}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- Versus comparison ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.versus-col{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px;
  box-shadow:var(--shadow-sm);
}
.versus-col.now{
  background:linear-gradient(135deg,var(--navy-dark),var(--navy-2));
  border-color:transparent;
  box-shadow:var(--shadow-lg);
}
.versus-h{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.versus-col.now .versus-h{border-bottom-color:rgba(255,255,255,.16)}
.versus-name{font-size:15px;font-weight:800;color:var(--navy)}
.versus-col.now .versus-name{color:#fff}
.versus-time{
  font-family:var(--serif);font-size:25px;font-weight:700;
  line-height:1.1;margin-top:5px;color:var(--red);
}
.versus-time.good{color:var(--gold-soft)}
.versus-col ul{list-style:none;display:grid;gap:12px}
.versus-col li{
  position:relative;padding-left:22px;
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
.versus-col li::before{
  content:"";position:absolute;left:0;top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--line);
}
.versus-col.now li{color:rgba(234,240,255,.88)}
.versus-col.now li::before{background:var(--gold-soft)}

/* ---------- Spec panel (services) ---------- */
.spec{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.spec-head{
  padding:20px 26px;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;
}
.spec-head .label{color:var(--gold-soft);display:block;margin-bottom:6px}
.spec-head strong{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.01em}
.spec-row{
  display:grid;grid-template-columns:150px 1fr;gap:18px;
  padding:16px 26px;border-top:1px solid var(--line);
  font-size:14.5px;
}
.spec-row:first-of-type{border-top:none}
.spec-row dt{color:var(--muted);font-weight:500}
.spec-row dd{color:var(--ink);font-weight:600}
.spec-foot{
  padding:16px 26px;border-top:1px solid var(--line);
  background:var(--line-soft);
  font-size:13px;color:var(--muted);
}

/* ---------- Anchor nav (services) ---------- */
.anchor-nav{
  position:sticky;top:70px;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.anchor-nav ul{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:flex;gap:6px;list-style:none;
  overflow-x:auto;scrollbar-width:none;
}
.anchor-nav ul::-webkit-scrollbar{display:none}
.anchor-nav a{
  display:block;padding:15px 14px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.anchor-nav a:hover{color:var(--navy);border-bottom-color:var(--gold-line)}

.svc{padding:80px 0;border-top:1px solid var(--line)}
/* The anchor nav already draws a bottom rule, so the first block must not add a second. */
.anchor-nav + .svc{border-top:none}
.svc.section-paper + .svc{border-top:none}

/* ---------- Numbered flow (solutions) ---------- */
.flow{list-style:none;display:grid;gap:0;counter-reset:step}
.flow li{
  position:relative;
  display:grid;grid-template-columns:56px 1fr;gap:22px;
  padding:0 0 34px 0;
}
.flow li::before{
  counter-increment:step;content:counter(step);
  grid-column:1;
  width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold-line);
  color:var(--gold);font-family:var(--serif);font-size:18px;font-weight:700;
  display:grid;place-items:center;
  box-shadow:var(--shadow-sm);
  z-index:1;
}
.flow li::after{
  content:"";position:absolute;left:23px;top:46px;bottom:0;
  width:1px;background:var(--line);
}
.flow li:last-child{padding-bottom:0}
.flow li:last-child::after{display:none}
.flow h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:7px;padding-top:11px}
.flow p{font-size:14.5px;color:var(--muted);line-height:1.65}

/* ---------- Rails / logo strip ---------- */
.rails{padding:52px 0;text-align:center}
.rails .label{display:block;margin-bottom:24px}
.rail-items{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;
}
.rail-items span{
  font-size:12.5px;font-weight:700;color:var(--muted);
  letter-spacing:.09em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--pill);padding:9px 18px;
  box-shadow:var(--shadow-sm);
}

/* ---------- Proof trio ---------- */
.proof{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.proof-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 30px;
  box-shadow:var(--shadow-sm);
}
.proof-item .figure{
  font-family:var(--serif);font-weight:700;line-height:1;
  font-size:clamp(30px,3.6vw,40px);color:var(--gold);
  margin-bottom:14px;
}
.proof-item h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:9px}
.proof-item p{font-size:14.5px;color:var(--muted);line-height:1.65}

/* ---------- Insights ---------- */
.posts{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.post{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
.post-mark{
  height:118px;display:grid;place-items:center;
  background:var(--line-soft);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:30px;font-weight:700;
  letter-spacing:.06em;color:var(--navy);opacity:.34;
}
.post-mark.warm{background:var(--gold-bg);color:var(--gold);opacity:.5}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-meta{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:11px;
}
.post h3{font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.4;margin-bottom:9px}
.post p{font-size:14px;color:var(--muted);line-height:1.6;flex:1}
.post-out{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:16px;font-size:12.5px;font-weight:700;color:var(--muted-soft);
}
.post-out svg{width:13px;height:13px}
.post:hover .post-out{color:var(--gold)}

/* ---------- Prose (legal, long form) ---------- */
.prose{font-size:15px;line-height:1.8;color:var(--ink)}
.prose h2{
  font-family:var(--serif);font-size:22px;font-weight:700;
  color:var(--navy);line-height:1.3;
  margin:44px 0 14px;scroll-margin-top:100px;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16.5px;font-weight:700;color:var(--navy);margin:26px 0 10px}
.prose p{margin-bottom:16px;color:var(--ink)}
.prose ul{margin:0 0 20px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--navy);font-weight:700}
.prose a{color:var(--gold);font-weight:600}

.legal{display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:100px}
.toc .label{display:block;margin-bottom:16px}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:1px}
.toc li{counter-increment:toc}
.toc a{
  display:block;padding:7px 0 7px 26px;position:relative;
  font-size:13.5px;line-height:1.45;color:var(--muted);
  text-decoration:none;transition:color var(--t);
}
.toc a::before{
  content:counter(toc);position:absolute;left:0;top:7px;
  font-family:var(--serif);font-size:12px;font-weight:700;color:var(--gold-soft);
}
.toc a:hover{color:var(--navy)}

.legal-stamp{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--pill);padding:8px 16px;
  font-size:12.5px;color:var(--muted);font-weight:600;
  box-shadow:var(--shadow-sm);
}

/* ---------- Forms ---------- */
.form-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px;
  box-shadow:var(--shadow);
}
.field{margin-bottom:20px}
.field label{
  display:block;font-size:13px;font-weight:700;
  color:var(--navy);margin-bottom:7px;
}
.field .req{color:var(--gold)}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:inherit;font-size:15px;color:var(--ink);
  padding:13px 15px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t);
}
.field input::placeholder,
.field textarea::placeholder{color:#98a2be}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold-soft);
  box-shadow:0 8px 24px rgba(182,134,47,.16);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field .hint{margin-top:7px;font-size:12.5px;color:var(--muted-soft)}
.field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{
  display:flex;align-items:flex-start;gap:12px;
  border-radius:var(--r);padding:15px 18px;margin-bottom:24px;
  font-size:14px;line-height:1.6;
}
.notice svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.notice-ok{background:#eaf7f1;border:1px solid #bfe6d5;color:#136c49}
.notice-err{background:#fdeef1;border:1px solid #f4c9d2;color:#a3283e}

/* ---------- Contact details ---------- */
.detail{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px}
.detail .icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:var(--gold-bg);border:1px solid var(--gold-line);
  display:grid;place-items:center;color:var(--gold);
}
.detail .icon svg{width:18px;height:18px}
.detail strong{display:block;font-size:14px;color:var(--navy);margin-bottom:3px}
.detail span{font-size:14px;color:var(--muted);line-height:1.6}
.detail a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.detail a:hover{color:var(--gold);border-bottom-color:var(--gold-soft)}

/* ---------- CTA banner ---------- */
.cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy) 55%,var(--navy-2));
  padding:76px 24px;text-align:center;
}
.cta::before{
  content:"";position:absolute;top:-45%;right:-15%;
  width:620px;height:620px;pointer-events:none;
  background:radial-gradient(circle,rgba(182,134,47,.18) 0%,transparent 68%);
}
.cta > *{position:relative}
.cta .display{color:#fff;margin-bottom:14px}
.cta .display .accent{color:var(--gold-soft)}
.cta p{color:rgba(255,255,255,.72);font-size:16px;max-width:520px;margin:0 auto 30px;line-height:1.7}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-dark);
  color:rgba(255,255,255,.62);
  padding:60px 0 calc(28px + env(safe-area-inset-bottom));
}
.footer-grid{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;
}
.footer-brand .word{font-size:18px;font-weight:800;color:#fff;margin-bottom:12px}
.footer-brand .word span{color:var(--gold-soft)}
.footer-brand p{font-size:13.5px;line-height:1.75;max-width:290px;margin-bottom:18px}
.footer-addr{
  font-style:normal;margin-bottom:20px;
  font-size:13px;line-height:1.7;color:rgba(255,255,255,.58);
}
.footer-addr .hq{
  display:block;margin-bottom:7px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-soft);
}
.footer-col h4{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;
  color:#fff;font-weight:700;margin-bottom:18px;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:11px}
.footer-col a{
  font-size:13.5px;color:rgba(255,255,255,.58);
  text-decoration:none;transition:color var(--t);
}
.footer-col a:hover{color:var(--gold-soft)}

.social{display:flex;gap:10px}
.social a{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.07);
  display:grid;place-items:center;
  color:rgba(255,255,255,.55);
  transition:background var(--t),color var(--t);
}
.social a:hover{background:var(--gold);color:#fff}

.footer-bottom{
  max-width:var(--wrap);margin:40px auto 0;padding:22px 24px 0;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;font-size:12.5px;
}
.footer-bottom a{color:rgba(255,255,255,.48);text-decoration:none}
.footer-bottom a:hover{color:var(--gold-soft)}

/* ==========================================================================
   Interaction detail
   Small, fast responses. Nothing here should read as decoration for its own
   sake: each one tells you an element is live before you commit to clicking it.
   ========================================================================== */

/* A gold rule draws across the top of a card as the pointer arrives. */
.card,.product,.post{position:relative;overflow:hidden}
.card::after,.product::after,.post::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.card:hover::after,.card:focus-visible::after,
.product:hover::after,
.post:hover::after,.post:focus-visible::after{transform:scaleX(1)}

/* The card icon fills gold and lifts. */
.card .icon{transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.card:hover .icon{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px)}

/* Arrow slides out of the link. */
.link-more span{display:inline-block;transition:transform var(--t)}
.link-more:hover span{transform:translateX(3px)}

/* Nav underline. */
.nav > li > a:not(.nav-cta){position:relative}
.nav > li > a:not(.nav-cta)::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav > li > a:not(.nav-cta):hover::after,
.nav > li > a[aria-current="page"]::after{transform:scaleX(1)}

/* A light sweeps across the solid buttons. */
.btn-primary,.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.btn-gold::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.20) 50%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover::after,.btn-gold:hover::after{transform:translateX(130%)}

/* Pillars pick up a gold cap and a tinted field. */
.stat{position:relative;transition:background var(--t)}
.stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.stat:hover{background:var(--line-soft)}
.stat:hover::before{transform:scaleX(1)}

/* Rail chips lift individually. */
.rail-items span{transition:transform var(--t),border-color var(--t),color var(--t),box-shadow var(--t)}
.rail-items span:hover{
  transform:translateY(-3px);border-color:var(--gold-soft);color:var(--navy);
  box-shadow:0 10px 22px rgba(182,134,47,.14);
}

/* Spec rows highlight under the pointer so a long table stays readable. */
.spec-row{transition:background var(--t)}
.spec-row:hover{background:var(--line-soft)}

/* The step marker fills as you read down the flow. */
.flow li::before{transition:background .3s,border-color .3s,color .3s,transform .3s}
.flow li:hover::before{background:var(--gold);border-color:var(--gold);color:#fff;transform:scale(1.07)}

/* Insight monogram breathes. */
.post-mark{transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity var(--t)}
.post:hover .post-mark{transform:scale(1.05)}

/* ==========================================================================
   Card variants
   Same family, different shapes, so a page can use cards throughout without
   every section looking identical.
   ========================================================================== */

/* --- Split card: badge column on the left, body on the right --- */
.cards-split{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.card-split{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 28px;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card-split::after{
  content:"";position:absolute;top:0;left:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  transform:scaleY(0);transform-origin:top center;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
}
.card-split:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
.card-split:hover::after{transform:scaleY(1)}
.card-split .badge{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  background:var(--gold-bg);border:1px solid var(--gold-line);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:17px;font-weight:700;color:var(--gold);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.card-split:hover .badge{background:var(--gold);border-color:var(--gold);color:#fff}
.card-split h3{font-size:16.5px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.35}
.card-split p{font-size:14.5px;line-height:1.7;color:var(--muted)}

/* --- Numbered card: ordinal sits above the title --- */
.cards-num{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));counter-reset:nc}
.card-num{
  counter-increment:nc;position:relative;overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 28px 30px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card-num::before{
  content:counter(nc,decimal-leading-zero);
  display:block;margin-bottom:14px;
  font-family:var(--serif);font-size:15px;font-weight:700;
  letter-spacing:.06em;color:var(--gold);
}
.card-num::after{
  content:counter(nc,decimal-leading-zero);
  position:absolute;right:-6px;bottom:-24px;
  font-family:var(--serif);font-size:86px;font-weight:700;line-height:1;
  color:var(--line-soft);pointer-events:none;
  transition:color var(--t);
}
.card-num:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
.card-num:hover::after{color:var(--gold-bg)}
.card-num h3,.card-num p{position:relative}
.card-num h3{font-size:16.5px;font-weight:700;color:var(--navy);margin-bottom:9px;line-height:1.35}
.card-num p{font-size:14.5px;line-height:1.7;color:var(--muted)}

/* --- Tone cards: a matched pair, one affirming and one cautioning --- */
.card-tone{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px;
  box-shadow:var(--shadow);
  border-top:3px solid var(--gold);
}
.card-tone.muted{
  background:var(--line-soft);
  box-shadow:none;
  border-top-color:var(--muted-soft);
}
.card-tone h3{
  font-family:var(--serif);font-size:21px;font-weight:700;
  color:var(--navy);margin-bottom:12px;letter-spacing:-.01em;
}
.card-tone > p{font-size:15px;line-height:1.7;color:var(--ink);margin-bottom:6px}
.card-tone .checks li{font-size:14.5px}
.card-tone .foot{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.7;color:var(--muted);
}

/* --- Panel card: wraps a table or other block so it is not left bare --- */
.card-panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 32px;
  box-shadow:var(--shadow);
}
.card-panel > .label{display:block;margin-bottom:16px}

/* ---------- Definition list ----------
   Term on the left, explanation on the right, hairline separated. Carries the
   same information as a card grid without another six boxes on the page. */
.deflist{border-top:1px solid var(--line)}
.deflist > div{
  display:grid;grid-template-columns:minmax(190px,1fr) 1.9fr;gap:22px;
  padding:20px 4px;border-bottom:1px solid var(--line);
  transition:background var(--t);
}
.deflist > div:hover{background:var(--line-soft)}
.deflist dt{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.45;
}
.deflist dt::before{
  content:"";flex-shrink:0;margin-top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);
}
.deflist dd{font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ---------- Reasons ----------
   Numbered prose. A third way of presenting a set, for pages that already use
   cards and a flow and should not use either again. */
.reasons{
  display:grid;gap:34px 46px;counter-reset:reason;
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
}
.reasons > div{counter-increment:reason;position:relative;padding-left:58px;min-width:0}
.reasons > div::before{
  content:counter(reason,decimal-leading-zero);
  position:absolute;left:0;top:-6px;
  font-family:var(--serif);font-size:27px;font-weight:700;
  color:var(--gold-soft);line-height:1;
}
.reasons h3{font-size:16.5px;font-weight:700;color:var(--navy);margin-bottom:9px;line-height:1.35}
.reasons p{font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ---------- Send-to band ----------
   Replaces a spec table where there is really only one thing to say: the
   address. Loud on purpose, since getting this wrong costs the client time. */
.sendto{
  display:flex;flex-wrap:wrap;gap:30px;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy) 62%,var(--navy-2));
  border-radius:var(--r-lg);padding:34px 36px;
  box-shadow:var(--shadow-lg);
}
.sendto .label{display:block;color:var(--gold-soft);margin-bottom:12px}
.sendto-main{flex:1 1 300px;min-width:0}
.sendto .addr{
  display:inline-block;max-width:100%;
  font-family:var(--serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(19px,2.5vw,29px);line-height:1.2;
  color:#fff;text-decoration:none;overflow-wrap:anywhere;
  border-bottom:2px solid rgba(217,180,99,.5);
  transition:border-color var(--t),color var(--t);
}
.sendto .addr:hover{color:var(--gold-soft);border-bottom-color:var(--gold-soft)}
.sendto p{margin-top:14px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.72)}
.sendto .aside{
  flex:0 1 240px;min-width:0;
  padding-left:28px;border-left:1px solid rgba(255,255,255,.16);
}
.sendto .aside strong{
  display:block;margin-bottom:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;
}
.sendto .aside li{
  list-style:none;padding:5px 0;
  font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72);
}

/* ---------- Fee table ----------
   A plain table beats another card: two columns, no chrome, scannable. */
.fees{width:100%;border-collapse:collapse}
.fees th,.fees td{text-align:left;padding:17px 0;border-bottom:1px solid var(--line);vertical-align:top}
.fees th{
  width:40%;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding-right:20px;
}
.fees td{font-size:15px;color:var(--ink);font-weight:600}
.fees td .sub{display:block;margin-top:4px;font-size:13.5px;font-weight:400;color:var(--muted)}
.fees .amt{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--navy);line-height:1.2}
.fees tr:last-child th,.fees tr:last-child td{border-bottom:none}
/* Wider label column and right aligned figures, for a rate card style table. */
.fees-wide th{width:auto;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;padding-right:24px}
.fees-wide td{text-align:right;white-space:nowrap}
.fees-wide tr{transition:background var(--t)}
.fees-wide tr:hover{background:var(--line-soft)}

/* ---------- Statement band ---------- */
.statement{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy) 58%,var(--navy-2));
  padding:76px 0;
}
.statement::before{
  content:"";position:absolute;top:-45%;left:-12%;
  width:580px;height:580px;pointer-events:none;
  background:radial-gradient(circle,rgba(182,134,47,.17) 0%,transparent 68%);
}
.statement .wrap{position:relative}
.statement .label{display:block;text-align:center;color:var(--gold-soft);margin-bottom:22px}
.statement blockquote{
  font-family:var(--serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(21px,2.9vw,33px);line-height:1.34;
  color:#fff;max-width:840px;margin:0 auto;text-align:center;
  text-wrap:balance;
}
.statement blockquote em{color:var(--gold-soft);font-style:italic}
.statement .attribution{
  margin-top:24px;text-align:center;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.42);
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .legal{grid-template-columns:1fr;gap:32px}
  .toc{position:static;padding-bottom:24px;border-bottom:1px solid var(--line)}
  .toc ol{grid-template-columns:repeat(2,1fr);display:grid}
}
@media (max-width:900px){
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split,.split.wide-left{grid-template-columns:1fr;gap:36px}
  .split.flip .split-media{order:0}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:36px}
  .products{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
}
@media (max-width:768px){
  body{background-attachment:scroll}
  .nav{
    position:fixed;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    padding:14px calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    display:none;
    /* With twelve service links the menu is taller than a phone screen, so it
       scrolls inside itself instead of hiding the sign in button off screen. */
    max-height:calc(100vh - 70px);
    max-height:calc(100dvh - 70px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav.open{display:flex}
  .nav a{padding:12px 14px;font-size:15px}
  .nav a.nav-cta{margin-left:0;margin-top:8px;text-align:center;justify-content:center}
  .nav-toggle{display:block}
  /* In the stacked mobile nav the submenu is simply an indented list. */
  .nav .has-menu > a svg{display:none}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    grid-template-columns:1fr;min-width:0;
    border:none;border-left:2px solid var(--line);border-radius:0;
    box-shadow:none;background:transparent;
    padding:0 0 0 10px;margin:2px 0 8px 16px;
  }
  .submenu a{padding:9px 10px;font-size:14px;white-space:normal}
  .anchor-nav{top:70px}
  .section{padding:60px 0}
  .section-tight{padding:44px 0}
  .hero{padding:56px 0 48px}
  .page-head{padding:52px 0 44px}
  .svc{padding:56px 0}
  .cta{padding:56px 20px}
  .sec-head{margin-bottom:32px}
  .card,.proof-item,.form-card,.versus-col{padding:26px 22px}
  .spec-row{grid-template-columns:1fr;gap:4px;padding:14px 20px}
  .spec-head,.spec-foot{padding:16px 20px}
  .product-head{padding:26px 22px 20px}
  .product-facts > div{padding:14px 22px}
  .product-body{padding:20px 22px 0}
  .product-foot{padding:20px 22px 26px}
  .terminal-body{font-size:12px;padding:16px}
  .note-panel{padding:22px}

  /* Comfortable touch targets. Standalone links become at least 44px tall so
     they can be hit reliably with a thumb. */
  .footer-col li{margin-bottom:0}
  .footer-col a,
  .cat-links a,
  .link-more,
  .back-link,
  .footer-bottom a,
  .toc a,
  .crumbs a,
  .crumbs [aria-current="page"],
  .detail a{min-height:44px;display:inline-flex;align-items:center}
  .toc a{padding-top:0;padding-bottom:0}
  .social a{width:44px;height:44px}
  .hero-note a{display:inline-flex;align-items:center;min-height:44px}
  .rail-items span{padding:11px 18px}

  .deflist > div{grid-template-columns:1fr;gap:9px;padding:18px 2px}
  .deflist dd{padding-left:19px}
  .reasons{gap:28px}
  .card-split{padding:24px 22px;gap:16px}
  .card-num{padding:24px 22px 26px}
  .card-num::after{font-size:66px}
  .card-tone,.card-panel{padding:26px 22px}
  .sendto{padding:26px 22px;gap:22px}
  .sendto .aside{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.16);padding-top:20px;flex-basis:100%}
  .fees th,.fees td{display:block;width:100%;padding:0}
  .fees th{padding-top:16px}
  .fees td{padding-bottom:16px;border-bottom:1px solid var(--line)}
  .fees tr:last-child td{border-bottom:none}
  .fees-wide td{text-align:left}
}
@media (max-width:600px){
  .product-facts{grid-template-columns:1fr}
  .product-facts > div:nth-child(odd){border-right:none}
  .product-foot{flex-direction:column}
  .product-foot .btn{width:100%}
  .stats-inner{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:none}
  .hero-actions{flex-direction:column;align-items:stretch}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .toc ol{grid-template-columns:1fr}
  .flow li{grid-template-columns:40px 1fr;gap:16px}
  .flow li::before{width:36px;height:36px;font-size:15px}
  .flow li::after{left:18px;top:36px}
  .flow h3{padding-top:7px}
}

@media (max-width:768px){
  .statement{padding:52px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .btn:hover,.card:hover,.post:hover{transform:none}
  /* Belt and braces: the head script already withholds .js under reduced
     motion, but if it is ever set anyway, nothing stays hidden. */
  .js .card,.js .product,.js .proof-item,.js .versus-col,.js .spec,.js .terminal,
  .js .stat,.js .post,.js .sec-head,.js .flow li,.js .note-panel,.js .cat-links,
  .js .deflist > div,.js .reasons > div,.js .sendto,.js .fees,
  .js .card-split,.js .card-num,.js .card-tone,.js .card-panel{
    opacity:1;transform:none;
  }
}