/* ==========================================================================
   AskWisy — Base styles
   --------------------------------------------------------------------------
   Reset, design tokens (CSS custom properties), SPA page switching, shared
   layout primitives and utility classes. Loaded first; every other file in
   css/site/ depends on the variables defined in :root here.
   ========================================================================== */

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* CRITICAL iOS TOUCH FIX */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:#FAF8F4;color:#1A1A1A;line-height:1.6;overflow-x:hidden}
button,a,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:'DM Sans',sans-serif}
button{cursor:pointer;border:none;background:none}
img,svg{display:block;max-width:100%}

:root{
  --navy:#0D1B2A;--navy2:#1A2E45;--blue:#1B6CA8;--sky:#3A9BD5;
  --ice:#D4EAF7;--ice2:#EBF5FC;--gold:#F0AC4E;--gold2:#F2B969;
  --coral:#C84B31;--coral2:#F05B4E;--cream:#FAF8F4;--white:#FFFFFF;
  --gray1:#F4F4F2;--gray2:#E0DDD8;--gray3:#9A9590;--dark:#1A1A1A;
  --nav-h:68px;--teal1:#00D1D1;
}

/* ── PAGE SWITCHING — display:none ONLY (iOS WebKit requirement) ── */
.page{display:none}
.page.active{display:block}

/* ── LAYOUT ── */
.pt{padding-top:var(--nav-h)}
section{padding:100px clamp(20px,4vw,48px)}
.si{max-width:1200px;margin:0 auto}
.section-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.section-h2{font-family:'Helvetica',serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:var(--navy);line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.section-h2 em{color:var(--blue);font-style:normal}
.section-lead{font-size:1.10rem;color:var(--gray3);max-width:560px;line-height:1.7;margin-bottom:48px}

/* ── UTILS ── */
.text-center{text-align:center}
.mt-40{margin-top:40px}.mt-60{margin-top:60px}.mt-80{margin-top:80px}
.two-col{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}