/* SecuRight — tokens. Apple-grade light/dark: not inverted colors, separate compositions. */
:root {
  /* type */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* DEFAULT = brand-dark, anchored on the logo (securight-icon.svg):
     #0B1118 ink plate · #16B987 teal-green · #0E6E8A deep teal · #ECFFFA mint.
     Contrast verified WCAG AA: mint/ground 18.3, teal/ground 7.5, deep-teal 3.3 (structural). */
  --bg: #0B1118;            /* brand near-black plate */
  --bg-raised: #131C24;     /* slightly lifted panel */
  --bg-sunken: #0A0F15;     /* recessed wells */
  --ink: #ECFFFA;           /* brand mint — primary text */
  --ink-2: #A7BBB4;         /* muted text (7.7:1) */
  --ink-3: #6E827C;         /* faint mono captions (3.6:1, UI/large only) */
  --line: #1E2A2E;          /* hairlines on dark */
  --line-strong: #2C3B40;
  --accent: #16B987;        /* brand teal-green — primary accent (7.5:1) */
  --accent-2: #0E6E8A;      /* brand deep teal — secondary/structural */
  --accent-bg: #0E1F1B;     /* accent tint surface */
  --pos: #16B987;
  --warn: #E0A93B;          /* on-brand warm (replaces clashing amber) */
  --crit: #E5705A;
  --mint: #ECFFFA;

  /* radii + motion */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --ease: cubic-bezier(.2,.7,.1,1);
  --ease-apple: cubic-bezier(.32,.72,0,1);
}

html[data-theme="light"] {
  /* SECONDARY = brand-light. Re-anchored to the SAME brand accents (no cream,
     no forest-green) — clean near-white ground with a faint mint cast. */
  --bg: #FBFEFD;            /* near-white, faint mint cast (not cream) */
  --bg-raised: #FFFFFF;
  --bg-sunken: #EEF5F2;
  --ink: #0B1118;           /* brand ink plate as text */
  --ink-2: #41514B;
  --ink-3: #6B7A74;
  --line: #DDE7E2;
  --line-strong: #C6D3CD;
  --accent: #0E7A5B;        /* brand teal, darkened for AA on white (4.9:1) */
  --accent-2: #0E6E8A;      /* brand deep teal — secondary/structural */
  --accent-bg: #E5F3EE;
  --pos: #0E7A5B;
  --warn: #9A6B12;
  --crit: #B0432F;
  --mint: #ECFFFA;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; overflow-x: hidden; }   /* brand-dark is the default */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .45s var(--ease-apple), color .45s var(--ease-apple);
}
/* Long headings must wrap, never overflow the viewport (fixes left-edge clipping) */
h1, h2, h3 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
.mono { font-family: var(--font-mono); font-feature-settings: "zero"; }

/* layout */
.wrap { width: min(1200px, 92vw); margin: 0 auto; }

/* nav — fixed, translucent, Apple-style */
.nav {
  position: sticky; top: 16px; z-index: 20;
  margin: 16px auto 0;
  width: min(1200px, 92vw);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 10px 18px;
  background: color-mix(in oklab, var(--bg-raised) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background .4s var(--ease-apple), border-color .4s var(--ease-apple);
}
html[data-theme="dark"] .nav { background: color-mix(in oklab, var(--bg-raised) 65%, transparent); }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
.nav-brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav-brand b { font-weight: 600; }
.nav-brand i { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-links a:hover { background: var(--bg-sunken); color: var(--ink); }
.nav-links a.is-active { color: var(--ink); font-weight: 500; }
.nav-links a.nav-lock {
  color: var(--ink-3);
  display: inline-flex; align-items: center;
  border: 1px dashed var(--line-strong);
  padding: 7px 12px;
}
.nav-links a.nav-lock:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.theme-btn {
  width: 36px; height: 36px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.theme-btn:hover { background: var(--bg-sunken); color: var(--ink); border-color: var(--line-strong); }
.theme-btn svg { width: 16px; height: 16px; display: block; }
.theme-btn svg.hide { display: none !important; }
.theme-btn[data-theme-state="light"] svg.moon { display: none !important; }
.theme-btn[data-theme-state="dark"] svg.sun { display: none !important; }

/* Mobile nav: the pill can't fit 5 links + theme + button on a phone.
   Let the links scroll horizontally so nothing clips off-screen, and tighten
   spacing/labels so the brand, toggle and Contact button always stay visible. */
@media (max-width: 720px) {
  .nav { padding: 8px 10px 8px 14px; gap: 8px; }
  .nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
  .nav-brand span { display: none; }            /* keep just the logo mark on phones */
  .nav-right { flex: 0 0 auto; gap: 6px; }
  .nav-right .btn { padding: 7px 12px !important; font-size: 12px !important; }
}
@media (max-width: 420px) {
  /* On the smallest phones, drop the Contact-us button text to an icon-free compact pill */
  .nav-right .btn { padding: 7px 10px !important; }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: transform .3s var(--ease-apple), background .3s var(--ease), box-shadow .3s var(--ease);
  border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-sunken); }

/* type scale */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  line-height: 1.5;
  width: fit-content;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 15%, transparent); }
.display {
  font-size: clamp(48px, 7.4vw, 96px); line-height: 0.96; letter-spacing: -0.04em;
  font-weight: 500; margin: 0;
  max-width: 14ch;
}
.display em { font-style: normal; color: var(--accent); }
.h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; margin: 0; }
.h2 em { font-style: normal; color: var(--accent); }
.h3 { font-size: 28px; letter-spacing: -0.02em; font-weight: 500; margin: 0; }
.lead { font-size: 20px; line-height: 1.45; color: var(--ink-2); max-width: 640px; }

/* sections */
section { padding: 120px 0; }
@media (max-width: 700px) { section { padding: 80px 0; } }

/* footer */
footer { padding: 56px 0 40px; border-top: 1px solid var(--line); margin-top: 48px; color: var(--ink-3); font-size: 14px; }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.foot-links a:hover { color: var(--ink); }

/* tables / rows */
.row {
  display: grid; grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1.6fr) 140px;
  padding: 28px 0; border-bottom: 1px solid var(--line); align-items: baseline; gap: 24px;
}
.row:first-of-type { border-top: 1px solid var(--ink); }
/* Stack the roadmap-teaser rows on tablet/phone so the 4-column grid can't overflow. */
@media (max-width: 820px) {
  .row { grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px 0; }
  .row .when { grid-column: 1; }
  .row .status { grid-column: 2; grid-row: 1; text-align: right; }
  .row .what { grid-column: 1 / -1; }
  .row .desc { grid-column: 1 / -1; }
}
.row .when { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.row .what { font-size: 28px; letter-spacing: -0.02em; font-weight: 500; }
.row .desc { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.row .status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-align: right; color: var(--ink-3); }
.row .status.on { color: var(--pos); }
.row .status.on::before { content: "● "; }

/* product cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-raised);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background .3s var(--ease-apple), transform .3s var(--ease-apple);
  position: relative;
  min-height: 240px;
}
.card:hover { background: var(--bg-sunken); }
.card .tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.card h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: 500; margin: 0; }
.card p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.card .meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.card .chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink-3);
}
.card .badge {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
}
.badge-free { background: var(--accent-bg); color: var(--accent); }
.badge-paid { background: var(--bg-sunken); color: var(--ink-2); border: 1px solid var(--line-strong); }
.badge-ent  { background: color-mix(in oklab, var(--accent-2) 16%, transparent); color: var(--accent-2); border: 1px solid color-mix(in oklab, var(--accent-2) 40%, transparent); }

/* hero */
.hero { padding: 88px 0 56px; }
.hero .eyebrow { margin-bottom: 48px; position: relative; padding-bottom: 24px; }
.hero .eyebrow::after {
  content: ""; position: absolute; left: 20px; right: 0; bottom: 0;
  height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent);
  max-width: 280px;
}
.hero h1, .hero .display { margin-top: 0; }
.hero p.lead { margin-top: 36px; max-width: 620px; }
.hero-ctas { display: flex; gap: 10px; margin-top: 36px; align-items: center; }

/* artifact — subtle container with monospace detail */
.artifact {
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; margin-top: 56px;
}
.artifact-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

/* timeline */
.timeline { border-top: 1px solid var(--ink); margin-top: 24px; }

/* ========== MOTION SYSTEM ========== */
/* Global opt-out */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Scroll reveal — imperative via JS. CSS only sets the initial hidden state. */
html.motion-ready .reveal:not(.is-in) { opacity: 0; transform: translateY(28px); }
html.motion-ready .stagger:not(.is-in) > * { opacity: 0; transform: translateY(20px); }

/* Word-by-word mask reveal — Apple/Linear signature */
.word-reveal { display: inline; }
.word-reveal .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  /* use padding-bottom so descenders (g, y, p) aren't clipped */
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
.word-reveal .w > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.1s var(--ease-apple), opacity 1.1s var(--ease-apple);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.word-reveal.is-in .w > span { transform: translateY(0); opacity: 1; }

/* Count-up number: motion.js animates el.textContent directly, so the element
   just renders its own text (no transparent + ::after attr indirection — that
   left the JS-written value invisible). */
[data-count] { position: relative; }

/* Magnetic hover / tilt card */
.magnet {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-apple), box-shadow .5s var(--ease-apple);
  will-change: transform;
}

/* Nav scroll state */
.nav {
  transition: background .45s var(--ease-apple), border-color .45s var(--ease-apple), padding .45s var(--ease-apple), box-shadow .45s var(--ease-apple), transform .45s var(--ease-apple);
}
.nav[data-scrolled="true"] {
  padding: 7px 14px 7px 18px;
  background: color-mix(in oklab, var(--bg-raised) 88%, transparent);
  box-shadow: 0 10px 40px -12px color-mix(in oklab, var(--ink) 12%, transparent);
}
html[data-theme="dark"] .nav[data-scrolled="true"] {
  background: color-mix(in oklab, var(--bg-raised) 82%, transparent);
  box-shadow: 0 10px 40px -12px color-mix(in oklab, #000 60%, transparent);
}

/* Animated gradient sweep — used on gradient text on reveal */
@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer {
  background: linear-gradient(90deg,
    var(--ink-2) 0%,
    var(--ink) 35%,
    var(--accent) 50%,
    var(--ink) 65%,
    var(--ink-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-sweep 6s linear infinite;
  animation-play-state: paused;
}
.shimmer.is-in { animation-play-state: running; }

/* Pulsing accent dot */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 0%, transparent); }
}
.pulse-dot { animation: pulse-dot 2.2s var(--ease) infinite; border-radius: 999px; }

/* Breathing (for lock icon on confidential gate) */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.88; }
}
.breathe { animation: breathe 3.4s var(--ease-apple) infinite; }

/* Cursor blink */
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.caret::after { content: "▋"; color: var(--accent); animation: caret-blink 1s steps(1) infinite; margin-left: 2px; }

/* Live log — runtime artifact */
.livelog {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  height: 260px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
}
.livelog .ll-row {
  display: grid;
  grid-template-columns: 78px 64px 1fr auto;
  gap: 14px;
  padding: 2px 0;
  color: var(--ink-2);
  animation: log-enter .55s var(--ease-apple) both;
  white-space: nowrap;
}
.livelog .ll-row .t { color: var(--ink-3); }
.livelog .ll-row .lvl { letter-spacing: 0.08em; }
.livelog .ll-row .lvl.allow { color: var(--pos); }
.livelog .ll-row .lvl.block { color: var(--crit); }
.livelog .ll-row .lvl.scan  { color: var(--warn); }
.livelog .ll-row .msg { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.livelog .ll-row .ms { color: var(--ink-3); }
@keyframes log-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Gantt bar fill-on-reveal */
.bar { transform-origin: left center; transition: transform 1.2s var(--ease-apple); }
.bar.anim-in { animation: bar-grow 1.2s var(--ease-apple) both; }
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Phase number count-up feel */
.num { transition: transform .9s var(--ease-apple), opacity .9s var(--ease-apple); }
.reveal .num { opacity: 0; transform: translateY(12px); }
.reveal.is-in .num { opacity: 1; transform: none; }

/* Magnet tilt override: the CSS only handles lift/shadow; JS adds rotateX/Y via CSS vars */
.magnet {
  transform:
    perspective(800px)
    rotateX(var(--mx, 0deg))
    rotateY(var(--my, 0deg))
    translateZ(var(--mz, 0px));
}
.magnet:hover { box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--ink) 28%, transparent); }
html[data-theme="dark"] .magnet:hover { box-shadow: 0 30px 80px -24px color-mix(in oklab, #000 90%, transparent); }

/* Circular theme reveal — clip-path from toggle button */
html.theme-flipping::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  pointer-events: none;
  clip-path: circle(0% at var(--flip-x, 100%) var(--flip-y, 0%));
  transition: clip-path .85s var(--ease-apple);
}
html.theme-flipping.theme-flip-start::before { clip-path: circle(150% at var(--flip-x, 100%) var(--flip-y, 0%)); }

/* Inline highlight word (for subtle accent on hover) */
a.card, a.prod { transition: background .35s var(--ease-apple), transform .35s var(--ease-apple); }
a.card:hover, a.prod:hover { transform: translateY(-2px); }

/* dark subtle radial tint behind hero, Apple vibe */
.hero-tint {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1;
}

/* ─── flagship canvas animations ─────────────────────────────────────── */
.anim-frame { position: relative; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklab, var(--bg-raised) 60%, var(--bg)); overflow: hidden; }
.anim-frame canvas { display: block; width: 100%; height: 100%; }
.anim-frame .anim-label { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; }
.anim-frame .anim-label::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); animation: anim-pulse 1.8s ease-in-out infinite; }
@keyframes anim-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.9); } }
.anim-frame .anim-caption { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3); pointer-events: none; text-align: right; }

/* hero lattice sits behind content */
.hero-lattice { position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0.55; }
.hero-lattice canvas { width: 100%; height: 100%; display: block; }
.hero-tint::before {
  content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 80%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 14%, transparent), transparent);
  filter: blur(40px);
}
html[data-theme="dark"] .hero-tint::before {
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 22%, transparent), transparent);
}

/* pill strip */
.pill-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.pill {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--ink-2);
}

/* ============================================================
   SHARED UTILITY CLASSES (CSP-safe replacements for inline style="")
   Placed LAST so utilities win on source order over component classes
   (e.g. .u-nav-btn must beat .btn's padding). Used across all pages so
   the strict CSP keeps style-src 'self' with no 'unsafe-inline'.
   Do NOT reintroduce inline style attributes.
   ============================================================ */
.u-accent { font-style: normal; color: var(--accent); }
.u-mono-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.u-mono-cap { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.u-mono-note { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; }
.u-delay-1 { transition-delay: .4s; }
.u-delay-2 { transition-delay: .55s; }
.u-delay-3 { transition-delay: .7s; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.u-flex-gap { display: flex; gap: 10px; flex-wrap: wrap; }
.u-right { text-align: right; margin-top: 32px; }
.u-clickable { cursor: pointer; }
.u-pulse-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 8px; vertical-align: middle; }
/* nav "Contact us" button: override .btn's larger padding (utilities win, last in file) */
.btn.u-nav-btn { padding: 8px 16px; font-size: 13px; }
.u-brand-sm { font-size: 15px; }
.u-foot-copy { margin-top: 12px; font-size: 13px; }
.u-icon-22 { width: 22px; height: 22px; }
.u-anim-tall { margin-top: 28px; height: 460px; }