/* SitePex — base.css
   Shared foundation. MUST load before navbar.css / footer.css / main.css. */

/* ---- 00. TOKENS ---- */
:root{
  --paper:#F0F4FF;
  --paper-2:#FFFFFF;
  --ink:#0F1B2E;
  --ink-2:#14223A;
  --ink-3:#1C2F4F;
  --fg:#0F1B2E;
  --muted:#5A6A85;
  --bone:#E8F0FF;
  --bone-dim:#8BA0C4;
  --line:#D6E2F8;
  --line-2:#B8CFF0;
  --line-ink:rgba(180,210,255,.12);
  --blue:#2563EB;
  --blue-bright:#3B82F6;
  --blue-deep:#1D4ED8;
  --blue-soft:#DBEAFE;
  --grad-blue:linear-gradient(140deg,#60A5FA 0%,#3B82F6 34%,#2563EB 64%,#1D4ED8 100%);
  --grad-blue-soft:linear-gradient(140deg,#EFF6FF,#DBEAFE);
  --cyan:#0EA5E9;
  --cyan-soft:#E0F2FE;
  --green:#059669;
  --green-bright:#10B981;
  --green-soft:#D1FAE5;
  --rust:#DC2626;
  --rust-soft:#FEE2E2;
  --orange:#F97316;
  --orange-soft:#FFF7ED;
  --sh-1:0 1px 2px rgba(15,27,46,.06);
  --sh-2:0 6px 20px -8px rgba(15,27,46,.18);
  --sh-3:0 22px 50px -18px rgba(15,27,46,.28);
  --sh-4:0 40px 90px -30px rgba(15,27,46,.38);
  --sh-blue:0 18px 40px -16px rgba(37,99,235,.45);
  --r-sm:10px;--r:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px;
  --ub-h:42px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1400px;

  /* One font for the whole site. Change it here and nowhere else. */
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- 01. RESET & BASE ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;line-height:1.6;font-weight:450;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font);font-weight:600;color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--font);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

/* ---- 02. LAYOUT PRIMITIVES ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
:target{scroll-margin-top:calc(var(--nav-h) + 16px)}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.section{padding-block:clamp(56px,7vw,104px);position:relative}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font);font-weight:600;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-deep);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-blue)}
.eyebrow--center::before{display:none}
.head{max-width:660px;margin-inline:auto;text-align:center}
.head h2{font-size:clamp(1.9rem,3.4vw,2.85rem);margin-top:16px}
.head p{margin-top:16px;color:var(--muted);font-size:1.06rem}
.lead{color:var(--muted)}

/* ---- 03. BUTTONS ---- */
.btn{
  --_bg:var(--ink);--_fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  font-family:var(--font);font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  padding:13px 22px;border-radius:var(--r-pill);
  background:var(--_bg);color:var(--_fg);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .3s;
  will-change:transform;position:relative;white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px)}
.btn__chev{display:inline-flex;align-items:center;justify-content:center;max-width:0;opacity:0;overflow:hidden;margin-left:0;transform:translateX(-6px);transition:max-width .32s var(--ease-out),opacity .26s var(--ease),margin-left .32s var(--ease-out),transform .32s var(--ease-out)}
.btn__chev svg{width:18px;height:18px;flex:none}
.btn:hover .btn__chev,.btn:focus-visible .btn__chev{max-width:22px;opacity:1;margin-left:8px;transform:translateX(0)}
.btn--primary{
  --_bg:var(--grad-blue);--_fg:#fff;
  box-shadow:var(--sh-blue);overflow:hidden;
}
.btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);
}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--primary:hover{box-shadow:0 24px 50px -14px rgba(37,99,235,.55)}
.btn--light{--_bg:var(--paper-2);--_fg:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.btn--light:hover{border-color:var(--blue-bright);box-shadow:var(--sh-2)}
.btn--ghost{--_bg:transparent;--_fg:var(--blue-deep);padding:10px 4px}
.btn--block{width:100%}
.btn--lg{padding:16px 30px;font-size:1.05rem}
.arrow{width:16px;height:16px}


/* ---- 17. REVEAL ANIM ---- */
/* Fail-open: content is only hidden once JS confirms it's alive (html.js).
   If the script is blocked, errors out, or never loads, everything stays visible
   instead of a page of invisible sections. */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
/* NOTE: this must carry >= the specificity of the rule above, or .in never wins.
   html.js .reveal = (0,2,1); a bare .reveal.in = (0,2,0) and LOSES. */
html.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}


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

/* ---- numerals ----
   DM Sans is proportional: "1" is narrower than "8". Without tabular figures the
   countdown reflows every single second and prices in a column don't align.
   tnum fixes the digit advance width without changing the typeface. */
.mono,.cd-box b,.cd-sep,.u-count,.plan__list,.plan__now,.cmp__hp,.crow__v,
.cmpbar__p,.tld .p,.ubar .r,.dsite .nm,.dash__url,.priceblock .amt,.rail__p{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}