/* ============================================================================
   AddressIQ marketing kit — enterprise design system.
   Self-contained (no CDNs). Token-driven: colour, type scale, spacing, motion.
   UX-FIX notes reference the July 2026 UX audit (Nielsen/NN, WCAG 2.1 AA, Fiori).
   ========================================================================== */
:root{
  /* colour tokens — WCAG AA verified pairs */
  --navy:#0a1f44; --navy-2:#122c5c; --navy-3:#14406b;
  --ink:#16213a;                 /* headings on light */
  --body:#3a4763;                /* body on light — 9.2:1 on #fff */
  --mute:#5b6880;                /* UX-FIX UX-004: was #7a869e (3.6:1, AA fail) → 6.1:1 */
  --teal:#0fb5a6; --teal-d:#0a8f83; --teal-dd:#087267;
  --gold:#f2a93b; --gold-ink:#3d2a05; --red:#c53030;
  --bg:#f6f8fc; --card:#ffffff; --line:#dfe6f2;
  --on-dark:#e7edf9; --on-dark-2:#c9d5ec; --on-dark-3:#a6b6d6; /* ≥7:1, ≥4.5:1 on navy */
  /* type scale — 1.25 modular, consistent across pages */
  --fs-900:clamp(34px,4.6vw,46px); --fs-800:clamp(28px,3.4vw,34px);
  --fs-700:24px; --fs-600:19px; --fs-500:17px; --fs-400:15.5px; --fs-300:13.5px; --fs-200:12px;
  /* spacing scale (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;
  /* elevation + motion (Fiori-calibrated: subtle, purposeful) */
  --shadow-1:0 1px 3px rgba(10,25,60,.07), 0 1px 2px rgba(10,25,60,.05);
  --shadow-2:0 6px 18px rgba(10,25,60,.10), 0 2px 5px rgba(10,25,60,.06);
  --shadow-3:0 16px 40px rgba(10,25,60,.16);
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:150ms; --t-med:240ms;
  --radius:12px; --radius-sm:8px;
  /* UX-FIX UX-003: universal font stack — identical rendering weighting on macOS/Windows/Linux */
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
*{box-sizing:border-box; margin:0;}
html{scroll-behavior:smooth;}
/* UX-FIX UX-008: anchored sections stop hiding under the sticky nav (WCAG 2.4 target visibility) */
section[id], [id]{scroll-margin-top:76px;}
body{font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; font-size:16px;
     -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--teal-dd); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--s-5);}

/* UX-FIX UX-005 (WCAG 2.4.7): visible, consistent keyboard focus everywhere */
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:4px;}
nav.top :focus-visible{outline-color:var(--gold);}

/* UX-FIX: skip link for keyboard/screen-reader users (WCAG 2.4.1) */
.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--gold-ink);
      padding:10px 18px; font-weight:700; z-index:100; border-radius:0 0 8px 0;}
.skip:focus{left:0;}

/* ---------------- navigation ---------------- */
nav.top{background:var(--navy); position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(4,10,30,.28);}
nav.top .wrap{display:flex; align-items:center; gap:26px; min-height:64px; flex-wrap:wrap;}
.logo{color:#fff; font-weight:700; font-size:18px; letter-spacing:.2px; padding:10px 0;}
.logo b{color:var(--teal);}
.logo .by{display:block; font-size:9.5px; font-weight:600; color:var(--on-dark-3); letter-spacing:1.4px; text-transform:uppercase;}
nav.top a.nl{color:var(--on-dark-2); font-size:14px; padding:10px 2px; position:relative;}
nav.top a.nl:hover{color:#fff; text-decoration:none;}
/* UX-FIX UX-001a (Nielsen H1 — where am I): persistent active-page indicator */
nav.top a.nl[aria-current="page"], nav.top a.nl.active{color:#fff; font-weight:600;}
nav.top a.nl[aria-current="page"]::after, nav.top a.nl.active::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:3px; border-radius:2px; background:var(--teal);}
nav.top .cta{margin-left:auto;}
/* UX-FIX UX-001b (mobile nav was display:none — dead end): disclosure menu behind a real <button>, 44px trigger */
.nav-burger{display:none; margin-left:auto; width:44px; height:44px; border:1px solid #ffffff33;
  border-radius:8px; color:#fff; background:transparent; cursor:pointer; font-size:20px; line-height:1;
  align-items:center; justify-content:center;}
.nav-burger:hover{background:#ffffff1a;}

/* ---------------- buttons: full state set (default/hover/active/focus) ---------------- */
.btn{display:inline-block; border-radius:var(--radius-sm); padding:12px 24px; font-weight:600; font-size:14.5px;
     cursor:pointer; border:none; text-decoration:none !important; min-height:44px; /* UX-FIX UX-103: Fitts/HIG 44px */
     transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--teal); color:#042521; box-shadow:var(--shadow-1);}
.btn-primary:hover{background:#16cabb; box-shadow:var(--shadow-2);}
.btn-outline{border:1.5px solid var(--teal); color:var(--teal-dd); background:transparent;}
.btn-outline:hover{background:#0fb5a614;}
.btn-ghost{background:#ffffff14; color:#fff; border:1px solid #ffffff2e;}
.btn-ghost:hover{background:#ffffff24;}

/* ---------------- hero ---------------- */
.hero{background:
  radial-gradient(1100px 500px at 85% -10%, #1c5a8a55 0%, transparent 60%),
  linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  color:#fff; padding:var(--s-8) 0 var(--s-7);}
.hero h1{font-size:var(--fs-900); line-height:1.12; max-width:800px; font-weight:750; letter-spacing:-.5px;}
.hero h1 em{color:var(--teal); font-style:normal;}
.hero p.lede{margin:22px 0 32px; font-size:var(--fs-600); color:var(--on-dark-2); max-width:660px; line-height:1.55;}
.hero .actions{display:flex; gap:14px; flex-wrap:wrap;}
.kicker{display:inline-block; background:#ffffff14; border:1px solid #ffffff26; color:#ffd089; /* 4.9:1 on navy */
  font-size:var(--fs-200); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:7px 14px; border-radius:20px; margin-bottom:22px;}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-top:var(--s-7);}
.stat{background:#ffffff0f; border:1px solid #ffffff1f; border-radius:var(--radius); padding:20px 22px;
      transition:border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);}
.stat:hover{border-color:#ffffff42; transform:translateY(-2px);}
.stat .n{font-size:30px; font-weight:750; color:var(--teal); font-variant-numeric:tabular-nums;}
.stat .l{font-size:13px; color:var(--on-dark-2); margin-top:4px; line-height:1.45;}

/* ---------------- sections & cards ---------------- */
section{padding:var(--s-8) 0;}
section.alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.eyebrow{color:var(--teal-dd); font-size:var(--fs-200); font-weight:800; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:10px;}
h2.sec{font-size:var(--fs-800); line-height:1.18; margin-bottom:12px; letter-spacing:-.3px;}
p.sub{color:var(--mute); font-size:var(--fs-500); max-width:720px; margin-bottom:var(--s-6); line-height:1.6;}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-1);
      transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);}
.card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:#c8d4ea;}
.card h3{font-size:var(--fs-500); margin-bottom:8px; line-height:1.35;}
.card p{font-size:14px; color:var(--body); line-height:1.6;}
.card .ic{width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#e2f6f3,#d3f0ec);
  color:var(--teal-dd); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; font-weight:750;}

/* persona rail (UX-FIX UX-006: audience-segmented entry points) */
.personas{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;}
.persona{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:var(--radius-sm);
  padding:20px; box-shadow:var(--shadow-1); transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);}
.persona:hover{box-shadow:var(--shadow-2); transform:translateY(-2px);}
.persona .who{font-size:var(--fs-200); font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--teal-dd); margin-bottom:6px;}
.persona h3{font-size:15px; margin-bottom:6px; line-height:1.35;}
.persona p{font-size:13px; color:var(--body); line-height:1.55; margin-bottom:10px;}
.persona a{font-size:13px; font-weight:600;}

table.cmp{width:100%; border-collapse:collapse; font-size:14px; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1);}
table.cmp th{background:var(--navy); color:#fff; text-align:left; padding:13px 16px; font-size:13px; letter-spacing:.2px;}
table.cmp td{padding:12px 16px; border-top:1px solid var(--line); vertical-align:top; line-height:1.55;}
table.cmp tr td:first-child{font-weight:600;}
table.cmp tbody tr:hover td{background:#f4f8ff;}
.tblwrap{overflow-x:auto; border-radius:var(--radius);} /* UX-FIX: tables scroll inside, page never scrolls sideways */
.tick{color:var(--teal-dd); font-weight:700;} .cross{color:var(--red); font-weight:700;}
.pill{display:inline-block; background:#dff3f0; color:#076a60; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:12px; margin-right:6px;}
.pill.gold{background:#fdeed2; color:#7c5407;}
.pill.red{background:#fbdddd; color:#8f1d1d;}

/* countdown band */
.band{background:var(--gold); color:var(--gold-ink); padding:14px 0; font-weight:600; font-size:14.5px;}
.band .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.band .days{background:var(--gold-ink); color:var(--gold); border-radius:8px; padding:5px 13px; font-family:var(--mono); font-size:15px; white-space:nowrap;}
.band a{color:var(--gold-ink); text-decoration:underline; font-weight:700;}

/* ---------------- ROI calculator ---------------- */
.roi{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
.roi .inputs label{display:block; font-size:13.5px; font-weight:600; margin:18px 0 6px;}
.roi input[type=range]{width:100%; accent-color:var(--teal-d); height:28px; cursor:pointer;}
.roi .val{font-family:var(--mono); font-size:13px; color:var(--teal-dd); font-weight:700; float:right;}
.roi select, .roi input[type=number]{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; min-height:44px; background:#fff;}
.roi .outputs{background:linear-gradient(170deg, var(--navy), var(--navy-2)); color:#fff; border-radius:16px; padding:32px; box-shadow:var(--shadow-3); position:sticky; top:84px;}
.roi .outputs h3{font-size:13px; color:var(--on-dark-3); font-weight:700; text-transform:uppercase; letter-spacing:1.4px;}
.big{font-size:44px; font-weight:800; color:var(--teal); margin:8px 0 20px; font-family:var(--mono); font-variant-numeric:tabular-nums;
     transition:opacity var(--t-fast) var(--ease);}
.roiline{display:flex; justify-content:space-between; gap:14px; font-size:13.5px; padding:10px 0; border-bottom:1px solid #ffffff1c; color:var(--on-dark-2);}
.roiline .v{font-family:var(--mono); font-weight:700; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap;}
.roinote{font-size:12px; color:var(--on-dark-3); margin-top:16px; line-height:1.55;}

/* ---------------- footer ---------------- */
footer{background:var(--navy); color:var(--on-dark-2); padding:var(--s-7) 0 40px; font-size:13.5px;}
footer .grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px;}
footer h4{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:12px;}
footer a{color:var(--on-dark-2); display:block; padding:5px 0;}
footer a:hover{color:#fff;}
footer .fine{border-top:1px solid #ffffff1f; margin-top:36px; padding-top:20px; font-size:12px; color:var(--on-dark-3); line-height:1.6;}
footer .fine a{display:inline; color:var(--on-dark-2);}

/* ---------------- article / blog ---------------- */
.article{max-width:780px; margin:44px auto 64px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:56px 60px; box-shadow:var(--shadow-1);}
.article h1{font-size:var(--fs-800); line-height:1.22; margin-bottom:10px; letter-spacing:-.3px;}
.article .meta{color:var(--mute); font-size:13px; margin-bottom:32px;}
.article h2{font-size:22px; margin:36px 0 12px; letter-spacing:-.2px;}
.article h3{font-size:17px; margin:26px 0 8px;}
.article p, .article li{font-size:var(--fs-400); color:var(--body); margin-bottom:14px; line-height:1.7;}
.article ul{padding-left:22px;}
.article blockquote{border-left:4px solid var(--teal); padding:12px 20px; background:#f0faf9; margin:20px 0; font-style:italic; border-radius:0 8px 8px 0;}
.article code{font-family:var(--mono); background:#eef2fa; padding:1px 6px; border-radius:4px; font-size:13px;}
.article pre{background:#0f1420; color:#c8d3e8; padding:18px; border-radius:10px; font-size:12.5px; overflow:auto; margin-bottom:16px; line-height:1.6;}
.bloglist .card{margin-bottom:18px;}
.bloglist .card .meta{font-size:12px; color:var(--mute); margin-bottom:6px;}
.bloglist .card h3 a{color:var(--ink);}
.bloglist .card h3 a:hover{color:var(--teal-dd);}

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  .hero h1{font-size:31px;}
  .roi{grid-template-columns:1fr;}
  .roi .outputs{position:static;}
  footer .grid{grid-template-columns:1fr 1fr;}
  .article{padding:34px 24px; margin-top:24px;}
  /* mobile disclosure menu (checkbox pattern, JS-free, works on every page) */
  .nav-burger{display:flex; order:2;}
  nav.top .cta{display:none;}
  nav.top a.nl{display:none;}
  nav.top .wrap.open a.nl{display:block; width:100%; padding:13px 4px; border-top:1px solid #ffffff17; font-size:15px; order:5;}
  nav.top .wrap.open .cta{display:inline-block; margin:12px 0 16px; order:9;}
  nav.top .wrap{padding-bottom:2px;}
}
/* UX-FIX (WCAG 2.3.3): honour reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition:none !important; animation:none !important;}
  html{scroll-behavior:auto;}
}
/* print: sales collateral prints clean from any page */
@media print{
  nav.top, .band, footer, .noprint{display:none !important;}
  body{background:#fff;}
  .article, .card{box-shadow:none; border-color:#bbb;}
}