/* =========================================================
  HeyOne AI · v1.0  -  Shared design system
  Released 2026-05-18 · Cupertino × Editorial
  Themes: light · dark · e-ink
  Motion: scroll-driven, magnetic, tilt, spotlight, liquid-glass
  ========================================================= */

/* ---------- FONTS  -  self-hosted, woff2 latin subsets, no third parties ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/literata-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/literata-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Literata';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/literata-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Literata';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/literata-latin-600-italic.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-mono-latin-700-normal.woff2') format('woff2');}

/* ---------- FONTS (provenance note) ----------
   All families are self-hosted woff2 latin subsets (declared above), so the
   stylesheet is self-sufficient and no request ever leaves the domain. */

/* ---------- TOKENS ---------- */
:root {
  --orange: #FF4F00;
  --orange-2: #FF7536;
  --orange-deep: #DB3E00;
  --orange-soft: #FFA866;
  --pop: #30D158;
  --blue: #00B4C4;
  --purple: #B247E5;
  --yellow: #FFD60A;
  --pink: #FF375F;

  --sf: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* @kind font */
  --sf-mono: "SF Mono", ui-monospace, Menlo, monospace; /* @kind font */
  --serif: 'Literata', Georgia, "Times New Roman", serif;

  --easing: cubic-bezier(0.28, 0.16, 0.22, 1); /* @kind other */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* @kind other */
  --btn-angle: 0deg; /* @kind other */

  --max-w: 1180px;
  --max-w-wide: 1320px;
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-xl: 32px;
  --radius-pill: 980px;
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #0A0A0C;
  --bg-3: #14141A;
  --ink: #FFFFFF;
  --ink-2: rgba(255,255,255,0.78);
  --muted: rgba(255,255,255,0.58);
  --silver: rgba(255,255,255,0.40);
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.18);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bd: rgba(255,255,255,0.08);
  --glass-hi: rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.07);
  --btn-text: #000;
  --btn-bg: #FFFFFF;
  --hero-orbs: 1; /* @kind other */
  --shadow-l: 0 30px 80px -20px rgba(0,0,0,0.5);
  --shadow-m: 0 10px 30px -8px rgba(0,0,0,0.35);
}

[data-theme="light"] {
  --bg: #FBFBFD;
  --bg-2: #F5F5F7;
  --bg-3: #ECECEF;
  --ink: #1D1D1F;
  --ink-2: #2A2A2F;
  --muted: #6E6E73;
  --silver: #86868B;
  --line: rgba(0,0,0,0.08);
  --line-2: rgba(0,0,0,0.14);
  --glass-bg: rgba(255,255,255,0.65);
  --glass-bd: rgba(0,0,0,0.06);
  --glass-hi: rgba(255,255,255,0.85);
  --glass-strong: rgba(255,255,255,0.85);
  --btn-text: #fff;
  --btn-bg: #1D1D1F;
  --hero-orbs: 1; /* @kind other */
  --shadow-l: 0 30px 70px -22px rgba(0,0,0,0.15);
  --shadow-m: 0 10px 24px -8px rgba(0,0,0,0.10);
}/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--sf);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  /* Refined type rendering  -  Apple-grade kerning, ligatures, contextual alternates */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  font-variant-numeric: lining-nums proportional-nums;
  overflow-x: hidden;
  /* Smoother theme transitions across the whole tree */
  transition: background 0.45s var(--easing), color 0.45s var(--easing);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1; }
/* The React mount carries the themed page background so plain (transparent)
   sections always sit on the correct surface, even if an embedding context
   forces the <body> background to transparent. */
#root { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
#root > main, #root main#main { flex: 1; }img, svg { max-width: 100%; display: block; }
::selection { background: var(--orange); color: #fff; }
[data-theme="light"] ::selection { color: #fff; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }

/* ---------- FOCUS  -  refined soft ring, theme-aware ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset 0.15s ease;
}
.btn:focus-visible,
.nav-cta:focus-visible,
.svc-cta:focus-visible,
.theme-switcher button:focus-visible {
  outline-offset: 4px;
}/* ---------- SKIP LINK  -  a11y first ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: top 0.2s var(--spring);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}/* ---------- SCROLLBAR  -  subtle brand-coloured thumb ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--orange); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) var(--bg); }

/* ---------- SCROLL PROGRESS  -  pure CSS, scroll-driven, falls back to invisible ---------- */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--orange) 0%, var(--orange-2) 50%, var(--orange) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9998;
  pointer-events: none;
  opacity: 0.85;
  animation: scroll-progress linear;
  animation-timeline: scroll(root);
}
@keyframes scroll-progress { to { transform: scaleX(1); } }@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}/* ---------- TYPOGRAPHY ---------- */
.h-cinema { font-size: clamp(64px, 11vw, 180px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.14; padding-bottom: 0.18em; overflow: visible; }
.h-mega { font-size: clamp(52px, 8.5vw, 124px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; padding-bottom: 0.06em; }
.h-section { font-size: clamp(40px, 5.6vw, 80px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.08; padding-bottom: 0.04em; }
.h-card { font-size: clamp(26px, 3vw, 44px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; }
.h-sub { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
/* Headings carry an explicit theme-aware colour so they never depend on an
   inherited body colour (which an embedding/preview context can override). */
h1, h2, h3, h4, h5, h6,
.h-cinema, .h-mega, .h-section, .h-card, .h-sub,
.hero h1 .w { color: var(--ink); }.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sf-mono);
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; }.grad {
  background: linear-gradient(135deg, var(--orange) 0%, #FF7536 50%, var(--orange-soft) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 8s ease infinite;
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}.lede {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.45;
  letter-spacing: -0.012em;
}/* ---------- LAYOUT ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(90px, 12vw, 160px) 24px; }
.section-tight { padding: clamp(70px, 9vw, 120px) 24px; }
.center { text-align: center; }
.col-narrow { max-width: 720px; margin: 0 auto; }

/* ---------- THEME SWITCHER ---------- */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: var(--chrome-blur, blur(20px) saturate(160%));
  -webkit-backdrop-filter: var(--chrome-blur, blur(20px) saturate(160%));
  border-radius: var(--radius-pill);
  padding: 3px;
}
.theme-switcher button {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  border-radius: var(--radius-pill);
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-family: var(--sf-mono);
}
.theme-switcher button.active { background: var(--ink); color: var(--bg); }
.theme-switcher button:hover:not(.active) { color: var(--ink); }
.theme-switcher button[data-theme-toggle] {
  width: 32px;
  height: 26px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--bg);
  background: var(--ink);
  font-family: var(--sf);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.12);
}
.theme-switcher button[data-theme-toggle]:hover { transform: translateY(-1px); }
[data-theme="dark"] .theme-switcher button[data-theme-toggle] { background: rgba(255,255,255,0.94); color: #000; }
[data-theme="light"] .theme-switcher button[data-theme-toggle] { background: #1D1D1F; color: #fff; }/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: var(--chrome-blur, saturate(180%) blur(24px));
  -webkit-backdrop-filter: var(--chrome-blur, saturate(180%) blur(24px));
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-family: var(--sf);
}
.logo .mark {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,0.68) 0 10%, transparent 36%),
    linear-gradient(145deg, #ff7a30 0%, #ff4f00 52%, #e23800 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
  text-shadow: 0 1px 2px rgba(104,25,0,0.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 10px 28px rgba(255,79,0,0.34),
    0 0 38px rgba(255,79,0,0.22),
    inset 0 1px 1px rgba(255,255,255,0.34),
    inset 0 -10px 18px rgba(114,22,0,0.20);
  position: relative;
  overflow: hidden;
}
.logo .mark::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 46%);
  pointer-events: none;
}
.logo .name {
  font-family: var(--sf);
  font-weight: 700;
  font-size: clamp(27px, 2.25vw, 34px);
  line-height: 1;
  letter-spacing: -0.052em;
  color: var(--ink);
}
.logo .name .ai {
  color: var(--orange);
  letter-spacing: -0.045em;
  margin-left: 0.12em;
}.nav-list {
  display: flex;
  gap: 4px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-list a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 15px;
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}
.nav-list a:hover, .nav-list a.active { color: var(--orange); background: var(--glass-bg); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-cta {
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255,79,0,0.25);
}
.nav-cta:hover {
  background: var(--orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,79,0,0.35);
}

.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--easing);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

/* Compact desktop / tablet: never wrap nav links into a second row.
   Keep logo + theme + Contact + hamburger on one line; move links into drawer. */
@media (max-width: 1120px) {
  .nav-inner {
    flex-wrap: nowrap;
    height: 68px;
    padding: 0 16px;
    column-gap: 12px;
  }
  .nav-list { display: none !important; }
  .nav-actions {
    flex-shrink: 0;
    margin-left: auto;
    gap: 10px;
  }
  .nav-toggle { display: inline-flex !important; }
  .nav-toggle{
    border-color: color-mix(in srgb, var(--orange) 45%, var(--glass-bd));
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{ background: var(--orange); }
  .nav.open .nav-toggle span{ background: transparent; }
  .nav-drawer{
    display: block;
    background:var(--heyone-nav-mobile-drawer-bg) !important;
    background-color:var(--heyone-nav-mobile-drawer-solid) !important;
    border-bottom:1px solid var(--heyone-nav-mobile-drawer-bd);
    box-shadow:var(--heyone-nav-mobile-drawer-shadow);
  }
}
@media (min-width: 1121px) { .nav-drawer { display: none; } }@media (max-width: 720px) {
  .logo { gap: 11px; }
  .logo .mark { width: 36px; height: 36px; font-size: 21px; }
  .logo .name { font-size: 27px; }
}@media (max-width: 540px) {
  .theme-switcher button:nth-child(3) { display: none; }
  .logo { gap: 9px; }
  .logo .mark { width: 32px; height: 32px; font-size: 19px; }
  .logo .name { font-size: 24px; }
}/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  transition: transform 0.25s var(--spring), box-shadow 0.35s var(--easing), background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
  position: relative;
  will-change: transform;
  /* Inner highlight  -  gives buttons a quietly premium feel */
  isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow:
  0 6px 18px rgba(255,79,0,0.30),
  inset 0 1px 0 rgba(255,255,255,0.18),
  inset 0 -1px 0 rgba(0,0,0,0.08);
}
.btn-primary:hover {
  background: var(--orange-deep);
  box-shadow:
  0 14px 32px rgba(255,79,0,0.50),
  inset 0 1px 0 rgba(255,255,255,0.22),
  inset 0 -1px 0 rgba(0,0,0,0.10);
}
.btn-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--ink);
}
.btn-glass:hover { background: var(--glass-hi); }
.btn-dark { background: var(--btn-bg); color: var(--btn-text); }
.btn-dark:hover { transform: translateY(-2px); opacity: 0.92; }
.btn-ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: var(--glass-bg); border-color: var(--orange); }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn .chev { display: inline-block; transition: transform 0.2s; }
.btn:hover .chev { transform: translateX(3px); }

/* magnetic wobble removed - buttons use the border light-up hover instead */

.link-arrow {
  color: var(--orange);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}
.link-arrow:hover { gap: 8px; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(110px, 12vh, 150px) 24px 118px;
  background: var(--bg);
}
[data-theme="dark"] .hero { background: linear-gradient(180deg, #000 0%, #0A0A0C 100%); }
[data-theme="light"] .hero { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }

.hero-short {
  min-height: 60vh;
  padding: 110px 24px 90px;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  transition: transform 0.4s ease-out;
  will-change: transform;
  opacity: var(--hero-orbs);
}
.orb.o1 { width: 540px; height: 540px; background: var(--orange); top: -10%; left: -8%; opacity: calc(var(--hero-orbs) * 0.55); }
.orb.o2 { width: 480px; height: 480px; background: var(--purple); bottom: -12%; right: -8%; opacity: calc(var(--hero-orbs) * 0.30); }
.orb.o3 { width: 380px; height: 380px; background: var(--yellow); top: 30%; right: 14%; opacity: calc(var(--hero-orbs) * 0.20); }
[data-theme="light"] .orb.o1 { opacity: calc(var(--hero-orbs) * 0.30); }
[data-theme="light"] .orb.o2 { opacity: calc(var(--hero-orbs) * 0.18); }
[data-theme="light"] .orb.o3 { opacity: calc(var(--hero-orbs) * 0.14); }

.hero-content { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; }

/* Letter-stagger reveal */
.hero h1 { margin: 0 auto 22px; max-width: 14ch; }
.hero h1 .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: drift-up 1.1s var(--easing) forwards;
  overflow: visible;
}
.hero h1 .w.grad {
  display: inline-block;
  line-height: 1.18;
  padding-bottom: 0.16em;
  margin-bottom: -0.10em;
  overflow: visible;
}
.hero h1 .w:nth-child(1) { animation-delay: 0.15s; }
.hero h1 .w:nth-child(2) { animation-delay: 0.45s; }
.hero h1 .w:nth-child(3) { animation-delay: 0.75s; }
@keyframes drift-up { to { opacity: 1; transform: translateY(0); } }

/* Letter-by-letter (used when each char is .l) */
.split .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotateX(45deg);
  animation: letter-in 0.7s var(--easing) forwards;
}
@keyframes letter-in { to { opacity: 1; transform: translateY(0) rotateX(0); } }

.hero .deck, .hero-deck {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto 32px;
  letter-spacing: -0.012em;
  line-height: 1.4;
  opacity: 0;
  animation: drift-up 1.1s 1.05s var(--easing) forwards;
}.hero .actions, .hero-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: drift-up 1.1s 1.25s var(--easing) forwards;
}

.hero-trust {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  animation: drift-up 1.1s 1.4s var(--easing) forwards;
}
.hero-trust .avatars { display: inline-flex; }
.hero-trust .avatars .av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  border: 2px solid var(--bg);
  margin-left: -8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.hero-trust .avatars .av:first-child { margin-left: 0; }
.hero-trust .avatars .av:nth-child(2) { background: linear-gradient(135deg, var(--blue), #0090A8); }
.hero-trust .avatars .av:nth-child(3) { background: linear-gradient(135deg, var(--pop), #178C3C); }
.hero-trust .avatars .av:nth-child(4) { background: linear-gradient(135deg, var(--purple), #6E1FA8); }

.scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sf-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--silver), transparent);
}
@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}/* ---------- HERO CLOCK ---------- */
.hero-clock {
  position: relative;
  margin-top: 72px;
  width: min(720px, 92%);
  opacity: 0;
  animation: drift-up 1.3s 1.55s var(--easing) forwards;
}
.hero-clock .glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,79,0,0.30), transparent 70%);
  filter: blur(30px);
  z-index: 0;
  opacity: var(--hero-orbs);
}
.clock-glass {
  position: relative;
  z-index: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: var(--radius-l);
  padding: 32px;
  box-shadow: var(--shadow-l), inset 0 1px 0 var(--glass-hi);
}
.clock-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 640px) { .clock-row { grid-template-columns: 1fr; gap: 12px; } }.clock-cell {
  text-align: left;
  position: relative;
  padding: 18px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-m);
  backdrop-filter: blur(12px);
  transition: transform 0.4s var(--easing), border-color 0.3s, background 0.3s;
  opacity: 0;
  transform: translateY(12px);
  animation: clock-cell-in 0.9s var(--easing) forwards;
}
.clock-row .clock-cell:nth-child(1) { animation-delay: 1.55s; }
.clock-row .clock-cell:nth-child(2) { animation-delay: 1.68s; }
.clock-row .clock-cell:nth-child(3) { animation-delay: 1.81s; }
@keyframes clock-cell-in { to { opacity: 1; transform: translateY(0); } }
.clock-cell:hover { transform: translateY(-2px); border-color: rgba(255,79,0,0.30); background: var(--glass-hi); }.clock-cell .clock-lab {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}.clock-cell .clock-val {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.clock-cell .clock-val.orange { color: var(--orange); }
.clock-cell .clock-sub { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }

/* ---------- MARQUEE  -  with optical edge fade ---------- */
.marquee {
  background: var(--bg-2);
  color: var(--muted);
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  cursor: grab;
  /* Soft fade-in/out at edges so words "appear"  -  Apple-style */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 64px;
  animation: scroll-x 38s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.marquee-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}/* ---------- GLASS CARDS w/ TILT + SPOTLIGHT ---------- */
.card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--radius-l);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--easing), border-color 0.3s;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 800px;
}.card.tilt {
  --tilt-x: 0; /* @kind other */ --tilt-y: 0; /* @kind other */
  transform: rotateX(calc(var(--tilt-y) * 1deg)) rotateY(calc(var(--tilt-x) * 1deg));
  transition: transform 0.2s ease-out;
}

.card-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
  600px circle at var(--mx, 50%) var(--my, 50%),
  rgba(255, 79, 0, 0.15), transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 0;
}
.card-spotlight:hover::before { opacity: 1; }/* ---------- PILLAR ---------- */
.pillar { padding: clamp(120px, 16vw, 200px) 24px; text-align: center; background: var(--bg); position: relative; }
.pillar h2 { max-width: 18ch; margin: 0 auto; }
.pillar .sub {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 32px auto 0;
  line-height: 1.45;
}/* ---------- USE CASES GRID ---------- */
.uc-head { text-align: center; padding: 80px 24px 60px; max-width: 920px; margin: 0 auto; }
.uc-head h2 { margin-top: 14px; }
.uc-head p { font-size: 21px; color: var(--muted); max-width: 50ch; margin: 22px auto 0; }.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 11px 11px;
}
@media (max-width: 1000px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }@media (max-width: 660px) { .uc-grid { grid-template-columns: 1fr; } }.uc-card {
  position: relative;
  padding: 40px 36px 36px;
  border-radius: var(--radius-l);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden;
  isolation: isolate;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--easing), border-color 0.3s;
}
.uc-card::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--uc-glow, var(--orange));
  filter: blur(60px);
  opacity: 0.22;
  z-index: -1;
  bottom: -80px; right: -80px;
  transition: transform 0.7s var(--easing), opacity 0.4s;
}
.uc-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-hi);
  /* Subtle inset ring matching the radius  -  feels like a soft halo */
  box-shadow:
  0 20px 40px -20px rgba(0,0,0,0.25),
  inset 0 0 0 1px rgba(255,79,0,0.12);
}
.uc-card:hover::before { transform: scale(1.3); opacity: 0.35; }.uc-emoji {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  display: grid; place-items: center;
  margin-bottom: 22px;
  font-size: 26px;
  position: relative;
  overflow: hidden;
}
.uc-emoji::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--uc-glow, var(--orange)), transparent 70%);
  opacity: 0.20;
}
.uc-card h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--ink);
}
.uc-card h3 .it { color: var(--orange); }
.uc-card p { font-size: 16px; color: var(--ink-2); line-height: 1.5; margin-bottom: auto; max-width: 34ch; }
/* Deployment-card integration footer: real brand logos in their own colours */
.uc-card .dep-stack{ display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:24px; padding-top:16px; border-top:1px solid var(--glass-bd); }
.uc-card .dep-stack-label{ font-family:var(--sf-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:2px; }
.uc-card .dep-ico{ display:inline-flex; transition:transform .25s var(--easing); }
.uc-card .dep-ico:hover{ transform:translateY(-2px); }
.dep-logo{ width:19px; height:19px; display:block; fill:currentColor; }
.dep-logo.is-line{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.uc-card .dep-ico.is-key .dep-logo{ width:22px; height:22px; }
.dep-ico.b-whatsapp{ color:#25D366; }
.dep-ico.b-gmail{ color:#EA4335; }
.dep-ico.b-drive{ color:#1FA463; }
.dep-ico.b-zoho{ color:#E42527; }
.dep-ico.b-clickup{ color:#7B68EE; }
.dep-ico.b-calendar{ color:#4285F4; }
.dep-ico.b-docs{ color:#4285F4; }
.dep-ico.b-sap{ color:#0AA1DD; }
.dep-ico.b-web{ color:var(--orange); }
#am-body .kw, .arc-def .kw{ color:var(--orange); font-weight:600; }
.uc-time {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.uc-time .v { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; color: var(--orange); font-variant-numeric: tabular-nums lining-nums; }
.uc-time .k {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}.uc-card.c1 { --uc-glow: #FF4F00; /* @kind color */ }
.uc-card.c2 { --uc-glow: #00B4C4; /* @kind color */ }
.uc-card.c3 { --uc-glow: #30D158; /* @kind color */ }
.uc-card.c4 { --uc-glow: #FFD60A; /* @kind color */ }
.uc-card.c5 { --uc-glow: #B247E5; /* @kind color */ }
.uc-card.c6 { --uc-glow: #FF375F; /* @kind color */ }
.uc-card.c7 { --uc-glow: #5AC8FA; /* @kind color */ }
.uc-card.c8 { --uc-glow: #FF9F0A; /* @kind color */ }
.uc-card.c9 { --uc-glow: #AF52DE; /* @kind color */ }

/* ---------- PRIVACY ---------- */
.privacy-band {
  padding: clamp(110px, 14vw, 170px) 24px;
  text-align: center;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.privacy-band::before {
  content: "";
  position: absolute;
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,79,0,0.10), transparent 60%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 0;
  opacity: var(--hero-orbs);
}
.privacy-inner { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; }
.privacy-band h2 { margin: 14px auto 0; max-width: 18ch; }
.privacy-band .sub {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 32px auto 0;
  line-height: 1.45;
}.privacy-pills {
  display: inline-flex;
  gap: 10px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.priv-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: transform 0.25s var(--spring), border-color 0.25s, background 0.25s;
  cursor: default;
}
.priv-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(255,79,0,0.35);
  background: var(--glass-hi);
}
.priv-pill .ck {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* ---------- SERVICES ---------- */
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: min(94vw, 1480px); margin: 0 auto; }
@media (max-width: 1080px) { .services-grid { grid-template-columns: 1fr; max-width: 640px; } }.svc {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 56px 50px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 580px;
  transition: transform 0.5s var(--easing);
}
.svc:hover { transform: translateY(-6px); }
.svc::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--svc-glow, var(--orange));
  filter: blur(80px);
  opacity: 0.25;
  z-index: -1;
  top: -100px; right: -100px;
}.svc.s1 { --svc-glow: #FF4F00; /* @kind color */ }
.svc.s2 { --svc-glow: #00B4C4; /* @kind color */ }
.svc.s3 { --svc-glow: #30D158; /* @kind color */ }

.svc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-pill);
  font-family: var(--sf-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 24px;
  width: max-content;
}.svc h3 {
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin-bottom: 18px;
  max-width: none;
}
.svc p {
  font-size: 19px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 34px;
  max-width: 46ch;
}.svc-steps { list-style: none; margin-bottom: auto; display: flex; flex-direction: column; gap: 12px; }
.svc-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 14px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.4;
}.svc-steps .n {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--svc-glow);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.svc-steps b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }

.svc-cta {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  width: max-content;
  transition: all 0.25s var(--spring);
}
.svc-cta:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,79,0,0.3);
}
.svc-cta .chev { transition: transform 0.2s; }
.svc-cta:hover .chev { transform: translateX(4px); }

/* ---------- SUPPORT ---------- */
.support-card {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--radius-xl);
  padding: 56px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
}
.support-card::before {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(48,209,88,0.18), transparent 60%);
  filter: blur(40px);
  top: -200px; right: -200px;
  border-radius: 50%;
  z-index: 0;
}@media (max-width: 880px) { .support-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 30px; } }.support-card > * { position: relative; z-index: 1; }

.support-card .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(48,209,88,0.18);
  border: 1px solid rgba(48,209,88,0.40);
  border-radius: var(--radius-pill);
  font-family: var(--sf-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pop);
  margin-bottom: 18px;
  width: max-content;
}.support-card h3 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.support-card p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 44ch;
}
.support-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.support-feats li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.support-feats li::before {
  content: "✓";
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--pop);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.support-sla {
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 24px;
  padding: 36px 28px;
}
.support-sla .v {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.support-sla .v .rs { font-size: 0.55em; font-weight: 600; vertical-align: super; margin-right: 2px; color: var(--orange); }
.support-sla .v .per { font-size: 16px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.support-sla .badge-sla {
  margin-top: 12px;
  display: inline-block;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}.support-sla .cta {
  display: block;
  margin-top: 22px;
  padding: 12px 20px;
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.25s var(--spring);
}
.support-sla .cta:hover { background: var(--orange-deep); transform: translateY(-2px); }

/* ---------- STATS ---------- */
.stats {
  padding: clamp(100px, 12vw, 140px) 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-inner { max-width: var(--max-w); margin: 0 auto; }
.stats .head { text-align: center; margin-bottom: 70px; max-width: 820px; margin-inline: auto; }
.stats .head h2 { margin-top: 14px; }
.stats .head p { font-size: 19px; color: var(--muted); margin-top: 22px; max-width: 48ch; margin-inline: auto; }.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
@media (max-width: 880px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }.stat { padding: 50px 28px 40px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
@media (max-width: 880px) {
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}.stat .v {
  font-size: clamp(52px, 6.5vw, 92px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--orange);
  /* Locked column widths so the counter doesn't jitter as it ticks up */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
}
.stat .k { font-size: 13px; color: var(--muted); font-family: var(--sf-mono); letter-spacing: 0.06em; text-transform: uppercase; }.stat .d { font-size: 15px; color: var(--ink-2); margin-top: 12px; line-height: 1.4; max-width: 26ch; }

/* ---------- TESTIMONIAL ---------- */
.testimonials {
  padding: clamp(100px, 12vw, 140px) 24px;
  background: var(--bg);
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: var(--max-w-wide);
  margin: 0 auto;
}
@media (max-width: 1000px) { .testi-grid { grid-template-columns: 1fr 1fr; } }@media (max-width: 660px) { .testi-grid { grid-template-columns: 1fr; } }.testi {
  position: relative;
  padding: 36px 32px;
  border-radius: var(--radius-l);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}.testi::before {
  content: "“";
  position: absolute;
  top: 6px; right: 22px;
  font-size: 88px;
  line-height: 1;
  color: var(--orange);
  opacity: 0.35;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  /* Optical alignment  -  the curve of the open-quote sits where it should */
  transform: translateY(0);
  pointer-events: none;
  user-select: none;
}
.testi blockquote {
  /* Hanging punctuation  -  opening quote inside copy sits in the optical margin */
  hanging-punctuation: first last;
}
.testi blockquote {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin-bottom: 22px;
  flex: 1;
}.testi-by {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testi-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  display: grid; place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.testi-by .name { font-size: 15px; font-weight: 600; color: var(--ink); }
.testi-by .role { font-size: 13px; color: var(--muted); }

/* ---------- TIMELINE (about / process) ---------- */
.timeline { max-width: 820px; margin: 0 auto; position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-2), transparent);
}
.timeline-item { position: relative; padding: 18px 0 26px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -30px; top: 26px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--orange);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(255,79,0,0.4);
}
.timeline-item h3 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.timeline-item p { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.timeline-item .yr {
  font-family: var(--sf-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 920px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  text-align: left;
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 500;
  letter-spacing: -0.015em;
  padding: 26px 50px 26px 4px;
  color: var(--ink);
  position: relative;
  line-height: 1.35;
  transition: color 0.2s, padding-left 0.25s var(--easing);
  border-radius: 6px;
}
.faq-q:hover { padding-left: 12px; }
.faq-item.open .faq-q { padding-left: 12px; color: var(--orange); }.faq-q::after {
  content: "+";
  position: absolute;
  right: 8px; top: 22px;
  font-size: 28px;
  color: var(--orange);
  font-weight: 300;
  transition: transform 0.3s;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-q:hover { color: var(--orange); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--easing); }
.faq-a-inner { padding: 0 60px 28px 0; font-size: 17px; color: var(--ink-2); line-height: 1.6; }.faq-item.open .faq-a { max-height: 900px; }

/* ---------- ENDCARD ---------- */
.endcard {
  text-align: center;
  padding: clamp(140px, 18vw, 200px) 24px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.endcard::before {
  content: "";
  position: absolute;
  width: 1000px; height: 1000px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--orange), var(--yellow), var(--orange-2), var(--orange));
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(140px);
  opacity: 0.30;
  animation: spin 30s linear infinite;
}
[data-theme="light"] .endcard::before { opacity: 0.18; }@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.endcard > * { position: relative; z-index: 1; }
.endcard h2 { margin: 0 auto 24px; max-width: 18ch; }
.endcard p {
  font-size: 22px;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 auto 40px;
  line-height: 1.45;
}.endcard .actions {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- FOOTER ---------- */
footer.foot {
  background: var(--bg-2);
  font-size: 13px;
  color: var(--muted);
  padding: 60px 24px 32px;
  border-top: 1px solid var(--line);
}
.foot-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: 50px;
  align-items: flex-start;
}
@media (max-width: 800px) { .foot-inner { grid-template-columns: 1fr; gap: 30px; } }.foot-brand .logo { margin-bottom: 14px; }
.foot-brand p { color: var(--ink-2); line-height: 1.55; font-size: 14px; max-width: 32ch; }.foot-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
@media (max-width: 660px) { .foot-links { grid-template-columns: repeat(2, 1fr); } }.foot-col h6,
.foot-col .foot-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.foot-col a {
  display: block;
  color: var(--muted);
  padding-block: 5px;
  margin-bottom: 4px;
  font-size: 13.5px;
  transition: color 0.2s;
}
.foot-col a:hover { color: var(--orange); }

.foot-bottom {
  max-width: var(--max-w);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--silver);
}
.foot-bottom .made { display: inline-flex; align-items: center; gap: 6px; }
.foot-bottom .heart { color: var(--orange); animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ---------- REVEAL on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--easing), transform 1s var(--easing);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: 0.08s; }
.reveal-2 { transition-delay: 0.16s; }
.reveal-3 { transition-delay: 0.24s; }
.reveal-4 { transition-delay: 0.32s; }
.reveal-5 { transition-delay: 0.40s; }
.reveal-6 { transition-delay: 0.48s; }@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  }
}/* ---------- LIQUID GLASS PILL (iOS26 vibe) ---------- */
.lg-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.22),
  inset 0 -1px 0 rgba(0,0,0,0.12),
  0 12px 30px -10px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px) saturate(180%);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
[data-theme="light"] .lg-pill {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.4));
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.04), 0 6px 14px -4px rgba(0,0,0,0.06);
}

/* ---------- FORM ---------- */
.form-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-l);
  padding: 44px;
  backdrop-filter: blur(24px) saturate(180%);
  position: relative;
  overflow: hidden;
}.form-card::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,79,0,0.18), transparent 60%);
  filter: blur(60px);
  z-index: 0;
}.form-card > * { position: relative; z-index: 1; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row.single { grid-template-columns: 1fr; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}.field input,
.field textarea,
.field select {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s var(--easing), box-shadow 0.2s var(--easing), background 0.2s;
  font-family: var(--sf);
  font-feature-settings: "kern" 1, "liga" 1;
}.field input::placeholder,
.field textarea::placeholder { color: var(--silver); }
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--glass-hi); background: var(--glass-bg); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--glass-bg);
  box-shadow:
  0 0 0 4px rgba(255,79,0,0.14),
  inset 0 0 0 1px var(--orange);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(255,55,95,0.5);
}
.field textarea { min-height: 120px; resize: vertical; }
.field.invalid input,
.field.invalid textarea {
  border-color: rgba(255,55,95,0.6);
  box-shadow: 0 0 0 1px rgba(255,55,95,0.35) inset;
}
.field-error {
  font-family: var(--sf-mono); font-size: 11.5px; letter-spacing: 0.01em;
  color: #FF6B81; margin-top: 1px;
}.form-submit {
  width: 100%;
  padding: 16px;
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 600;
  margin-top: 8px;
  transition: all 0.25s var(--spring);
  box-shadow: 0 8px 22px rgba(255,79,0,0.32);
}
.form-submit:hover { background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,79,0,0.45); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-note {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}

.form-success {
  background: rgba(48,209,88,0.10);
  border: 1px solid rgba(48,209,88,0.30);
  color: var(--pop);
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 15px;
  margin-bottom: 18px;
  display: none;
}
.form-success.show { display: block; animation: drift-up 0.5s var(--easing); }

/* ---------- CONTACT info grid ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 50px;
  max-width: 920px;
  margin-inline: auto;
}
@media (max-width: 660px) { .contact-grid { grid-template-columns: 1fr; } }.contact-item {
  padding: 26px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-m);
  backdrop-filter: blur(20px);
  transition: transform 0.3s var(--easing), border-color 0.3s;
}.contact-item:hover { transform: translateY(-3px); border-color: var(--orange); }
.contact-item .lab {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}.contact-item .v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.contact-item .d { font-size: 14px; color: var(--muted); }

/* ---------- LEGAL PROSE ---------- */
.prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}.prose h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 50px 0 16px;
  line-height: 1.2;
}
.prose h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
}
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote{ margin:38px 0; padding:6px 0 6px 24px; border-left:3px solid var(--orange); font-size:clamp(21px,2.5vw,26px); line-height:1.36; font-weight:600; color:var(--ink); letter-spacing:-0.012em; }
.prose hr{ border:0; height:1px; width:80px; margin:48px auto; background:color-mix(in srgb, var(--orange) 40%, var(--glass-bd)); }
.prose .essay-cta{ margin:48px 0 0; padding:28px 30px; border:1px solid color-mix(in srgb, var(--orange) 28%, var(--glass-bd)); border-radius:var(--radius-l); background:linear-gradient(180deg, color-mix(in srgb, var(--orange) 8%, transparent), transparent); color:var(--ink-2); font-size:16px; line-height:1.62; }
.prose .essay-cta strong{ color:var(--ink); }
.prose .essay-byline{ font-family:var(--sf-mono); font-size:13px; letter-spacing:0.03em; color:var(--muted); margin-top:18px; }
.prose code {
  font-family: var(--sf-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.prose-head {
  text-align: center;
  padding: 100px 24px 60px;
  max-width: 760px;
  margin: 0 auto;
}
.prose-head .updated {
  font-family: var(--sf-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
}/* ---------- ANCHOR PRICING ---------- */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (max-width: 880px) { .scope-grid { grid-template-columns: 1fr; } }.scope-card {
  position: relative;
  padding: 40px 32px 36px;
  border-radius: var(--radius-l);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--easing), border-color 0.3s;
}.scope-card:hover { transform: translateY(-4px); }
.scope-card.featured {
  border-color: var(--orange);
  box-shadow: 0 30px 70px -30px rgba(255,79,0,0.5);
}
.scope-card.featured::after {
  content: "Common path";
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  font-family: var(--sf-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}.scope-tag {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}.scope-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 8px; }
.scope-card .scope-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.scope-card .scope-v {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}
.scope-card .scope-v .rs { font-size: 0.55em; vertical-align: super; color: var(--orange); margin-right: 2px; }
.scope-card .scope-v .per { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.scope-card ul { list-style: none; margin: 22px 0 28px; display: flex; flex-direction: column; gap: 10px; }
.scope-card ul li {
  font-size: 14.5px;
  color: var(--ink-2);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.scope-card ul li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.scope-card .anchor {
  font-size: 13px;
  color: var(--muted);
  margin-top: -10px;
  margin-bottom: 4px;
}
.scope-card .anchor s { color: var(--silver); }

/* ---------- FOUNDER CARD ---------- */
.founder {
  max-width: 760px;
  margin: 0 auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-l);
  padding: 40px;
  backdrop-filter: blur(24px);
  display: block;
}@media (max-width: 560px) { .founder { padding: 28px 22px; } }.founder h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.founder .role { font-size: 14px; color: var(--orange); margin-bottom: 12px; font-family: var(--sf-mono); letter-spacing: 0.04em; text-transform: uppercase; }.founder p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- 404 ---------- */
.notfound {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.notfound .big {
  font-size: clamp(120px, 22vw, 280px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  background: linear-gradient(135deg, var(--orange), var(--orange-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}/* ---------- UTILITIES ---------- */
.flex { display: flex; }
.gap-14 { gap: 14px; }
.gap-18 { gap: 18px; }
.wrap-r { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.muted { color: var(--muted); }
.bg-2 { background: var(--bg-2); }

/* Inline rhythmic stat highlight */
.inline-stat {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,79,0,0.10);
  color: var(--orange);
  border-radius: 6px;
  font-weight: 600;
}


/* ---------- RC_0.2 upgrades: Monday + private agent office ---------- */
.rc2-monday { background: var(--bg); position: relative; overflow: hidden; }
.rc2-monday::before {
  content: ""; position: absolute; inset: 10% -20% auto -20%; height: 420px;
  background: radial-gradient(ellipse at 50% 20%, rgba(255,79,0,0.14), transparent 65%);
  filter: blur(24px); pointer-events: none; opacity: var(--hero-orbs);
}
.monday-grid {
  position: relative; z-index: 1; max-width: var(--max-w-wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 10px;
}
.monday-card {
  min-height: 330px; padding: 34px 28px; border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--glass-bg), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-bd); backdrop-filter: blur(24px) saturate(180%);
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;
  transition: transform .45s var(--easing), border-color .3s, background .3s;
}
.monday-card::before { content:""; position:absolute; inset:auto -40% -35% -40%; height:220px; background:radial-gradient(circle, rgba(255,79,0,.22), transparent 60%); filter:blur(30px); }
.monday-card:hover { transform: translateY(-6px); border-color: rgba(255,79,0,.34); background: var(--glass-hi); }
.monday-card span { position: relative; z-index:1; font-family: var(--sf-mono); color: var(--orange); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 0; }
.monday-card h3 { position: relative; z-index:1; color: var(--ink); font-size: clamp(22px,2vw,30px); line-height:1.08; letter-spacing:-.024em; margin: 36px 0 14px; }
.monday-card p { position: relative; z-index:1; color: var(--ink-2); font-size: 15px; line-height:1.5; margin-bottom: auto; }

.rc2-office { position: relative; overflow: hidden; }
.office-wrap { max-width: var(--max-w-wide); margin: 0 auto; display:grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items:center; }
.office-copy p { color: var(--ink-2); font-size: 20px; line-height:1.5; margin: 24px 0 26px; max-width: 48ch; }
.office-list { list-style:none; display:grid; gap: 12px; }
.office-list li { background: var(--glass-bg); border:1px solid var(--glass-bd); border-radius:16px; padding: 14px 16px; color: var(--ink-2); }
.office-list b { color: var(--ink); }
.office-board { min-height: 560px; border-radius: var(--radius-xl); border:1px solid var(--glass-bd); background: radial-gradient(circle at 50% 45%, rgba(255,79,0,.20), transparent 42%), var(--glass-bg); backdrop-filter: blur(28px) saturate(180%); position:relative; overflow:hidden; box-shadow: var(--shadow-l), inset 0 1px 0 var(--glass-hi); }
.office-board::before { content:""; position:absolute; inset:64px; border:1px solid var(--line); border-radius:50%; opacity:.65; }
.office-board::after { content:""; position:absolute; inset:132px; border:1px dashed var(--line-2); border-radius:50%; opacity:.55; animation: spin 45s linear infinite; }
.node { position:absolute; width:132px; height:132px; border-radius:32px; display:grid; place-items:center; text-align:center; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.13); box-shadow: 0 22px 60px -26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.node span { display:block; font-size: 22px; font-weight:700; letter-spacing:-.02em; }
.node small { display:block; color: var(--muted); font-family: var(--sf-mono); font-size: 11px; text-transform: uppercase; letter-spacing:.08em; margin-top:6px; }
.node.chief { left:50%; top:50%; transform: translate(-50%,-50%); background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color:#fff; z-index:2; }
.node.chief small { color: rgba(255,255,255,.72); }
.node.meera { left:11%; top:16%; }
.node.ledger { right:12%; top:18%; }
.node.scout { left:13%; bottom:15%; }
.node.ops { right:12%; bottom:14%; }
.bus { position:absolute; left:50%; top:50%; width:60%; height:60%; transform: translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,79,0,.30); box-shadow: 0 0 90px rgba(255,79,0,.18); animation: rc2-pulse 4s ease-in-out infinite; }
@keyframes rc2-pulse { 0%,100% { transform: translate(-50%,-50%) scale(.98); opacity:.65; } 50% { transform: translate(-50%,-50%) scale(1.04); opacity:1; } }@media (max-width: 1000px) { .monday-grid { grid-template-columns: repeat(2,1fr); } .office-wrap { grid-template-columns:1fr; } }@media (max-width: 620px) { .monday-grid { grid-template-columns:1fr; } .office-board { min-height: 520px; } .node { width:112px; height:112px; border-radius:26px; } .node span { font-size:19px; } }@media (prefers-reduced-motion: reduce) { .office-board::after, .bus { animation:none; } }/* ---------- RC_0.4 orange theme refinement ---------- */
:root {
  --copper: #C84C16;
  --ember: #FF8A3D;
  --paper-warm: #FFF2E8;
}
[data-theme="dark"] {
  --bg: #030201;
  --bg-2: #0C0806;
  --bg-3: #17100D;
  --glass-bg: rgba(255, 129, 64, 0.045);
  --glass-bd: rgba(255, 90, 20, 0.115);
  --glass-hi: rgba(255, 180, 124, 0.105);
  --line: rgba(255, 148, 91, 0.11);
  --line-2: rgba(255, 148, 91, 0.20);
}
.nav-list a.active,
.nav-list a[aria-current="page"] {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,79,0,0.16), rgba(255,79,0,0.07));
  border-color: rgba(255,79,0,0.24);
}
.nav-list a.active::after,
.nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
  opacity: 1;
}
[data-theme="dark"] .hero {
  background:
  radial-gradient(ellipse at 50% 14%, rgba(255,79,0,0.16), transparent 44%),
  linear-gradient(180deg, #030201 0%, #0C0806 58%, #030201 100%);
}
.orb.o1 { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); }
.orb.o2 { background: #35130A; opacity: calc(var(--hero-orbs) * 0.45); }
.orb.o3 { background: var(--orange-soft); opacity: calc(var(--hero-orbs) * 0.13); }
.operating-strip {
  width: min(980px, 94%);
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  padding: 1px;
  border-radius: 22px;
  background: linear-gradient(90deg, transparent, rgba(255,79,0,0.32), transparent);
  box-shadow: 0 24px 80px -50px rgba(255,79,0,0.8);
  animation: drift-up 1.1s 1.45s var(--easing) both;
}
.operating-strip > span {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px;
  text-align: left;
  color: var(--muted);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.055);
  backdrop-filter: blur(20px) saturate(160%);
}
.operating-strip > span:first-child { border-radius: 21px 0 0 21px; }
.operating-strip > span:last-child { border-radius: 0 21px 21px 0; }
.operating-strip b {
  color: var(--ink);
  font-size: 13px;
  font-family: var(--sf-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.operator-notes .testi blockquote { font-size: clamp(19px, 2vw, 25px); text-align: center; }
.operator-notes .testi-av {
  font-family: var(--sf-mono);
  font-size: 13px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
}
.rc2-monday .uc-head p,
.rc2-office .office-copy p { text-wrap: pretty; }
.monday-card {
  min-height: 300px;
  background: var(--glass-bg);
  border-color: var(--glass-bd);
}
.monday-card span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px rgba(255,79,0,0.7);
  vertical-align: 1px;
}
.office-board {
  background:
  radial-gradient(circle at 50% 45%, rgba(255,79,0,.24), transparent 39%),
  linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.node:not(.chief) { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,79,0,.025)); }
@media (max-width: 760px) {
  .operating-strip { grid-template-columns: 1fr 1fr; }
  .operating-strip > span:first-child { border-radius: 21px 0 0 0; }
  .operating-strip > span:nth-child(2) { border-radius: 0 21px 0 0; }
  .operating-strip > span:nth-child(3) { border-radius: 0 0 0 21px; }
  .operating-strip > span:last-child { border-radius: 0 0 21px 0; }
}@media (max-width: 520px) {
  .operating-strip { grid-template-columns: 1fr; }
  .operating-strip > span,
  .operating-strip > span:first-child,
  .operating-strip > span:nth-child(2),
  .operating-strip > span:nth-child(3),
  .operating-strip > span:last-child { border-radius: 18px; }
  .hero-clock { margin-top: 44px; }
}/* RC_0.4 hero layout cleanup after screenshot QA */
.hero .actions, .hero-actions {
  display: flex;
  width: 100%;
  justify-content: center;
}
.hero-trust {
  display: flex;
  justify-content: center;
  width: min(760px, 92%);
  margin: 24px auto 0;
}
.hero-clock { margin: 56px auto 0; }
@media (max-width: 700px) {
  .hero-trust { flex-direction: column; gap: 10px; }
}/* RC_0.4 mobile overflow fixes */
@media (max-width: 540px) {
  .nav-inner { padding-inline: 14px; }
  .nav-list { margin-inline: -14px; padding-inline: 14px; }
  .nav-cta { padding: 7px 13px; font-size: 13px; }
  .hero { padding-inline: 18px; }
  .hero-content { max-width: 100%; }
  .hero h1 { max-width: 100%; }
  .h-cinema { font-size: clamp(58px, 18vw, 78px); letter-spacing: -0.052em; }
  .hero h1 .w { display: block; }
  .hero .deck, .hero-deck { max-width: 32ch; font-size: 18px; }
  .hero .actions, .hero-actions { gap: 10px; }
  .hero .actions .btn, .hero-actions .btn { padding-inline: 22px; }
  .operating-strip { width: 100%; }
  .clock-glass { padding: 20px; }
}/* RC_0.4 mobile hard clamp */
@media (max-width: 540px) {
  html, body { width: 100%; overflow-x: hidden; }
  .hero h1 .w,
  .hero h1 .w.grad {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  text-align: center;
  }
  .hero h1 .w.grad { font-size: 0.92em; }
  .btn-lg { font-size: 15px; }
}
@media (max-width: 390px) {
  .h-cinema { font-size: 52px; }
  .hero .actions .btn, .hero-actions .btn { padding-inline: 18px; }
}/* RC_0.4 mobile hero word wrap: let multi-word gradient lines wrap naturally at
   spaces instead of a fixed 6ch cap, which clipped longer words ("privately.")
   against the body overflow-x:hidden. Full width + centered does the right thing
   for short ("Yours again.") and long ("Run privately.") grads alike. */
@media (max-width: 540px) {
  .hero h1 .w.grad {
  max-width: 100%;
  margin-inline: auto;
  overflow-wrap: normal;
  word-break: normal;
  }
  .hero .actions, .hero-actions { flex-wrap: wrap; }
  .hero .actions .btn, .hero-actions .btn { min-width: 0; }
}


/* RC_0.4 mobile vertical rhythm */
@media (max-width: 540px) {
  .hero { padding-top: 66px; }
  .hero .deck, .hero-deck { margin-bottom: 28px; }
  .hero-trust { margin-top: 22px; }
  .operating-strip { margin-top: 34px; }
}


/* RC-1.0 mobile polish: tighter gutters, calmer vertical rhythm,
   and safeguards so nothing overflows the viewport on a phone. */
@media (max-width: 540px) {
  .section { padding: clamp(64px, 16vw, 96px) 18px; }
  .section-tight { padding: clamp(54px, 13vw, 84px) 18px; }
  .wrap, .wrap-wide { padding-inline: 18px; }
  .uc-head { padding: 56px 18px 40px; }
  .uc-head p { font-size: 18px; }
  .h-section { font-size: clamp(34px, 8.6vw, 46px); }
  .h-mega { font-size: clamp(44px, 12.5vw, 64px); }
  .svc h3 { font-size: clamp(30px, 8vw, 40px); }
  .svc { padding: 42px 22px; }
  .svc-steps li { padding: 15px 18px; }
  .support-card h3 { font-size: clamp(28px, 7.4vw, 38px); }
  /* cards/sections never push past the screen edge */
  
  img, svg, video, canvas { max-width: 100%; }
}
@media (max-width: 420px) {
  .section { padding-inline: 15px; }
  .section-tight { padding-inline: 15px; }
  .wrap, .wrap-wide { padding-inline: 15px; }
}/* =========================================================
   heyone.ai v2, International Orange (#FF4F00) + fresh type
   Display: Space Grotesk · Body: Hanken Grotesk · Mono: Space Mono · Serif: Literata
   ========================================================= */
:root{
  --sf: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* @kind font */
  --display: 'Space Grotesk', 'Hanken Grotesk', sans-serif; /* @kind font */
  --sf-mono: 'Space Mono', ui-monospace, Menlo, monospace; /* @kind font */
  --azure: #00B4C4;        /* complementary to International Orange */
  --azure-deep: #0090A8;
}
[data-theme="dark"]{
  --glass-bg: rgba(255,79,0,0.05);
  --glass-bd: rgba(255,90,20,0.13);
  --glass-hi: rgba(255,150,95,0.11);
  --line:   rgba(255,100,40,0.12);
  --line-2: rgba(255,100,40,0.20);
}/* Gradient headline uses tokens end-to-end so the brand-color tweak stays cohesive.
   NOTE: the `background` shorthand resets background-clip, so re-declare the text clip. */
.grad{
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 50%, var(--orange-soft) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* Tweak: pointer motion off → neutralise tilt transforms */
[data-kit-motion="off"] .tilt{ transform:none !important; }

/* =========================================================
   v3 - teammate review pass (centering, icons, buttons, iso office)
   ========================================================= */

/* --- Eyebrows: larger, bolder per request (global) --- */
.eyebrow{ font-size:20px !important; }

/* --- Hero operating strip: clean glass tiles that mirror the clock cells below --- */
.operating-strip{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
  width:min(980px,94%); margin:34px auto 0; padding:0;
  border:0 !important; background:none !important; box-shadow:none !important;
}
.operating-strip > span{
  display:flex !important; flex-direction:column; align-items:center; text-align:center !important; gap:7px;
  padding:18px 20px !important; min-width:0 !important; min-height:0;
  background: var(--glass-bg) !important;
  border:1px solid var(--glass-bd) !important; border-radius:var(--radius-m) !important;
  backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: border-color .3s var(--easing), background .3s var(--easing), box-shadow .3s var(--easing);
}
/* Subtle, steady hover: the border eases toward the brand accent with a hairline ring - no lift, no wobble. */
.operating-strip > span:hover{ border-color:rgba(255,79,0,0.32) !important; background:var(--glass-hi) !important; box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(255,79,0,0.10); }.operating-strip > span > b{ display:block; width:100%; font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-0.012em; text-transform:none; color:var(--ink); line-height:1.1; }
.operating-strip > span > i{ display:block; width:100%; font-style:normal; font-size:13px; line-height:1.4; color:var(--muted); }/* --- Use-case tiles: centered, bolder Lucide icons, "Hours" wording --- */
.use-cases .uc-card, .uc-card.uc-centered{ text-align:center; align-items:center; }
.uc-card .uc-emoji{ display:grid; place-items:center; margin-inline:auto; }
.uc-card .uc-emoji i{ display:inline-flex; }
.uc-card .uc-emoji svg{ width:30px; height:30px; color:var(--orange); stroke-width:2.4; }
.uc-card.uc-centered .uc-time{ flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.uc-card.uc-centered .uc-time .v{ font-family:var(--display); }
.uc-card.uc-centered .uc-time .k{ text-align:center; }

/* --- link-arrow: no border/underline --- */
.link-arrow{ border:none !important; text-decoration:none !important; }

/* --- Service cards: centered contents, symmetric headings, roomier steps --- */
.svc{ text-align:center; align-items:center; }
.svc .svc-tag{ align-self:center; }
/* Heading: dark part on line 1, gradient phrase on its own line 2 - identical
   structure in both cards. Wider cards keep line 1 unbroken on desktop. */
.svc h3{ max-width:none; }
.svc h3 .grad{ display:block; }
.svc p{ min-height: 4.6em; }
@media (min-width: 1081px){
  .svc h3{ white-space:nowrap; }
  /* Every step box the same height so row N mirrors row N across both cards */
  .svc-steps li{ min-height:156px; justify-content:center; }
}.svc-steps{ align-items:center; width:100%; max-width:520px; gap:14px; }
.svc-steps li{ align-self:stretch; width:100%; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:18px 24px; font-size:17px; line-height:1.45; }
.svc-steps li .n{ margin:0 auto; width:30px; height:30px; font-size:13px; }
.svc-steps li b{ font-size:18px; margin-bottom:4px; }
.svc-cta{ align-self:center; margin-inline:auto; }

/* --- Stats: centered boxes + wide 2-line subtitle --- */
.stats .stat{ text-align:center; align-items:center; display:flex; flex-direction:column; }
.stats .head p{ max-width:920px; margin-inline:auto; text-align:center; }
/* Symmetry: equal figure height, baseline-locked number + small unit, even rows */
.stat-fig{
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  min-height: clamp(58px, 7vw, 98px);
}
.stat .v{ line-height:1; }
.stat .v-unit{
  font-family:var(--display); font-weight:600; letter-spacing:-0.01em;
  font-size:clamp(19px, 2.1vw, 28px); color:var(--ink-2); line-height:1;
}
.stats .stat .k{ margin-top:20px; }
.stats .stat .d{
  margin-top:12px; max-width:24ch; margin-inline:auto;
  min-height:2.8em; display:flex; align-items:flex-start; justify-content:center;
  text-wrap:balance;
}

/* --- Monday cards: centered contents --- */
.monday-card{ text-align:center; align-items:center; }
.monday-card > span{ margin-inline:auto; }

/* --- Calculator: centered + orange accents, year/week context --- */


/* =========================================================
   BUTTONS - border-light-up hover (replaces magnetic wiggle)
   Smooth conic light travels the border + soft brand glow.
   Theme-aware: glow in dark/light, calm ink edge in e-ink.
   ========================================================= */
@property --btn-angle{ syntax:'<angle>'; initial-value:0deg; inherits:true; }
.btn, .nav-cta, .svc-cta{
  position:relative; isolation:isolate;
  transition: transform .2s var(--easing), box-shadow .35s var(--easing), background .25s, color .25s;
}
.btn::before, .nav-cta::before, .svc-cta::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.7px;
  background: conic-gradient(from var(--btn-angle),
      transparent 0deg, var(--orange) 60deg, var(--orange-soft) 130deg, transparent 210deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition:opacity .4s var(--easing);
  pointer-events:none; z-index:2;
}
.btn:hover, .nav-cta:hover, .svc-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px -8px color-mix(in srgb, var(--orange) 60%, transparent);
}
.btn:hover::before, .nav-cta:hover::before, .svc-cta:hover::before{
  opacity:1;
}
/* tap: gentle press, border stays lit */
.btn:active, .nav-cta:active, .svc-cta:active{ transform:translateY(0) scale(.985); }
.btn:active::before, .nav-cta:active::before, .svc-cta:active::before{ opacity:1; }@media (prefers-reduced-motion: reduce){
  .btn:hover::before, .nav-cta:hover::before, .svc-cta:hover::before{ transition:opacity .4s var(--easing, ease); opacity:1; }
}/* =========================================================
   AGENT OFFICE - 2.5D bird's-eye digital office (rooms + desks)
   ========================================================= */
.office-iso{ position:relative; min-height:600px; display:flex; align-items:center; justify-content:center; perspective:1500px; perspective-origin:50% 44%; pointer-events:none; }
.iso-floor{
  --up: rotateZ(45deg) rotateX(-56deg); /* @kind other */
  position:relative; width:min(100%,620px); aspect-ratio:1 / 0.92;
  transform-style:preserve-3d;
  transform: rotateX(56deg) rotateZ(-45deg);
  border-radius:20px;
  background:
    linear-gradient(var(--glass-bg), var(--glass-bg)),
    repeating-linear-gradient(0deg, transparent 0 9%, color-mix(in srgb, var(--orange) 12%, transparent) 9% calc(9% + 1px)),
    repeating-linear-gradient(90deg, transparent 0 9%, color-mix(in srgb, var(--orange) 12%, transparent) 9% calc(9% + 1px));
  border:1px solid var(--glass-bd);
  box-shadow: 0 64px 84px -36px rgba(0,0,0,.62), inset 0 0 90px color-mix(in srgb, var(--orange) 6%, transparent);
}
.iso-beams{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.iso-beams .beam{ fill:none; stroke:var(--orange); stroke-width:0.5; opacity:.5; stroke-dasharray:2 2.4; }
.iso-beams .packet{ fill:var(--orange-soft); filter:drop-shadow(0 0 1.6px var(--orange)); }

/* --- a department room: floor tile + floating wall rim --- */
.room{
  position:absolute; width:42%; height:42%;
  transform-style:preserve-3d; border-radius:11px;
  background:
    radial-gradient(120% 120% at 30% 18%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 72%),
    color-mix(in srgb, var(--rc) 7%, var(--glass-bg));
  border:1px solid color-mix(in srgb, var(--rc) 32%, transparent);
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--rc) 12%, transparent);
}
.room::after{ /* glass wall rim, floats above the floor to read as low walls */
  content:""; position:absolute; inset:0; border-radius:11px;
  border:1.5px solid color-mix(in srgb, var(--rc) 52%, transparent);
  transform: translateZ(18px);
  box-shadow: 0 0 20px -3px color-mix(in srgb, var(--rc) 42%, transparent);
}
/* desk / table */
.room-desk{
  position:absolute; left:50%; top:56%; width:48%; height:23%;
  transform: translate(-50%,-50%) translateZ(11px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 24%, #1b100a), color-mix(in srgb, var(--rc) 11%, #140c08));
  border:1px solid color-mix(in srgb, var(--rc) 40%, transparent);
  border-radius:5px;
  box-shadow: 0 7px 11px -5px rgba(0,0,0,.65);
}
.room-screen{
  position:absolute; left:50%; top:50%; width:42%; height:46%;
  transform: translate(-50%,-50%) translateZ(2px);
  border-radius:2px; background: color-mix(in srgb, var(--rc) 70%, #fff);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent);
}
/* chair */
.room-chair{
  position:absolute; left:50%; top:80%; width:15%; height:11%;
  transform: translate(-50%,-50%) translateZ(7px);
  border-radius:4px 4px 3px 3px;
  background: color-mix(in srgb, var(--rc) 22%, #14100e);
  border:1px solid color-mix(in srgb, var(--rc) 34%, transparent);
}
/* 2.5D worker bot at each desk */
.room-bot{
  position:absolute; left:50%; top:60%;
  transform: translate(-50%,-100%) var(--up) translateZ(16px);
  transform-origin:center bottom;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  pointer-events:none; z-index:3;
  filter: drop-shadow(0 11px 9px rgba(0,0,0,.5));
}
.bot-head{
  position:relative; width:30px; height:25px; border-radius:9px 9px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 26%, #f4efe9), color-mix(in srgb, var(--rc) 34%, #aaa39c));
  border:1.5px solid color-mix(in srgb, var(--rc) 72%, #fff);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.55), 0 3px 6px rgba(0,0,0,.42);
  animation: bot-nod 1.6s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
}
.bot-head::before{ /* antenna with lit tip */
  content:""; position:absolute; left:50%; top:-10px; width:2.5px; height:8px;
  transform:translateX(-50%); border-radius:2px;
  background: color-mix(in srgb, var(--rc) 58%, #cfcac4);
  box-shadow: 0 -3px 0 0 color-mix(in srgb, var(--rc) 88%, #fff), 0 -3px 9px 1.5px color-mix(in srgb, var(--rc) 75%, transparent);
}
.bot-head::after{ /* glowing eyes (two, via box-shadow) */
  content:""; position:absolute; left:8px; top:9.5px; width:5px; height:5px; border-radius:50%;
  background: color-mix(in srgb, var(--rc) 82%, #fff);
  box-shadow: 9px 0 0 color-mix(in srgb, var(--rc) 82%, #fff),
              0 0 8px color-mix(in srgb, var(--rc) 80%, transparent),
              9px 0 8px color-mix(in srgb, var(--rc) 80%, transparent);
  animation: bot-blink 4s infinite;
  animation-delay: var(--bd, 0s);
}
.bot-body{
  position:relative; width:38px; height:27px; border-radius:11px 11px 7px 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 64%, #2a221d), color-mix(in srgb, var(--rc) 42%, #161110));
  border:1.5px solid color-mix(in srgb, var(--rc) 72%, #fff);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--rc) 48%, transparent), 0 5px 9px rgba(0,0,0,.55);
}
.bot-body::before{ /* chest light */
  content:""; position:absolute; left:50%; top:9px; transform:translateX(-50%);
  width:13px; height:4.5px; border-radius:3px;
  background: color-mix(in srgb, var(--rc) 88%, #fff);
  box-shadow: 0 0 9px color-mix(in srgb, var(--rc) 82%, transparent);
}
@keyframes bot-nod{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-2px) rotate(1.5deg); } }
@keyframes bot-blink{ 0%, 92%, 100%{ transform:scaleY(1); } 96%{ transform:scaleY(.14); } }
@media (prefers-reduced-motion: reduce){ .bot-head, .bot-head::after{ animation:none; } }/* upright task chips near the desk front */
.room-tasks{
  position:absolute; left:50%; top:90%;
  transform: translate(-50%,-50%) var(--up) translateZ(20px);
  display:flex; gap:4px; white-space:nowrap;
}
.room-tasks span{
  font-family:var(--sf-mono); font-size:10.5px; font-weight:600; letter-spacing:.02em; line-height:1; padding:4px 8px; border-radius:7px;
  background:var(--glass-strong); border:1px solid var(--glass-bd); color:var(--ink-2); white-space:nowrap;
}
/* upright department nameplate at the room's back wall */
.room-sign{
  position:absolute; left:50%; top:9%; z-index:5; /* paint the name over the room's own bot (bot is z-index:3) so longer names aren't clipped */
  transform: translate(-50%,-50%) var(--up) translateZ(38px);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  padding:5px 12px 5px 6px; border-radius:999px;
  background: color-mix(in srgb, var(--rc) 15%, rgba(10,6,4,0.9));
  border:1px solid color-mix(in srgb, var(--rc) 48%, transparent);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.72), 0 0 18px -5px color-mix(in srgb, var(--rc) 55%, transparent);
}
.room-ico{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background: radial-gradient(circle at 34% 24%, color-mix(in srgb, var(--rc) 86%, #000), color-mix(in srgb, var(--rc) 34%, #000));
  border:1px solid color-mix(in srgb, var(--rc) 55%, #fff);
}
.room-ico svg{ width:14px; height:14px; color:#fff; stroke-width:2.4; }
.room-name{ font-family:var(--display); font-weight:600; font-size:15px; color:#f4f1ea; letter-spacing:-.01em; }/* pill is always dark (hardcoded) -> light text in both themes */

/* central orchestrator hub */
.orch{ position:absolute; left:50%; top:50%; width:22%; height:22%; transform:translate(-50%,-50%); transform-style:preserve-3d; z-index:4; }
.orch-pad{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--orange) 42%, transparent), transparent 70%);
  border:1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--orange) 30%, transparent);
}
.orch-pad::after{
  content:""; position:absolute; inset:-34%; border:1px dashed color-mix(in srgb, var(--orange) 42%, transparent);
  border-radius:50%; animation: orch-spin 14s linear infinite;
}
@keyframes orch-spin{ to{ transform: rotate(360deg); } }
.orch-sign{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) var(--up) translateZ(50px);
  display:flex; flex-direction:column; align-items:center; gap:8px; white-space:nowrap;
}
.orch-core{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  border:1.5px solid color-mix(in srgb, var(--orange) 55%, #fff);
  box-shadow: 0 16px 32px -8px rgba(0,0,0,.62), 0 0 28px -4px color-mix(in srgb, var(--orange) 70%, transparent);
}
.orch-orb{ font-family:var(--display); font-weight:800; font-size:22px; color:#fff; line-height:1; }
.orch-name{
  font-family:var(--display); font-weight:700; font-size:15px; color:#f4f1ea; letter-spacing:-.01em;
  padding:3px 11px; border-radius:999px; background:rgba(10,6,4,0.82); border:1px solid color-mix(in srgb, var(--orange) 40%, transparent);
}@media (prefers-reduced-motion: reduce){ .orch-pad::after{ animation:none; } }@media (max-width: 900px){
  .office-iso{ min-height:480px; }
  .iso-floor{ width:min(100%,500px); }
}@media (max-width: 640px){
  /* Match desktop's 3D geometry on the smaller floor by scaling PERSPECTIVE to the
     floor width (desktop ratio perspective/floorW ~= 2.42). A fixed 1500px
     perspective on a ~360px floor renders ~2x too flat, which collapses depth and
     piles the floating labels on top of each other. No transform:scale - that only
     shrinks uniformly and skews the ratio further. ~360 * 2.42 ~= 870px. */
  .rc2-office{ overflow:visible; }
  .office-iso{ min-height:auto; overflow:visible; perspective:820px; perspective-origin:50% 44%; padding:14px 0 6px; }
  .iso-floor{ width:min(88%,338px); }
  /* declutter for the narrow canvas: the per-room task chips reach past the
     viewport edges and the long "Orchestrator" word piles onto the center. The
     4 labelled rooms + bots + the central "1" carry the meaning cleanly. */
  .room-tasks{ display:none; }
  .orch-name{ display:none; }
  /* Float the name chips clearly in FRONT of their bot (hovering name-tag look),
     smaller so they stay compact. The bot keeps z-index:3, so we push the chip
     much further toward the viewer on Z AND give it a higher z-index so it wins
     the paint order inside the room's preserve-3d context. Depth between rooms is
     untouched (each chip only re-orders against its own room's bot). */
  .room-name{ font-size:11px; }
  .room-ico{ width:18px; height:18px; }
  .room-bot{ z-index:1; }
  .room-sign{ z-index:8; padding:3px 9px 3px 4px; gap:5px;
    transform: translate(-50%,-50%) var(--up) translateZ(64px); }
  /* Orchestrator "1" orb: centred hub that hovers CLEARLY above the front-row
     Finance bot. On the dense mobile floor the centre and the Finance bot sit at
     the same height, so a mid translateZ makes them collide - lift it high enough
     (translateZ 148) that the bot passes fully behind it. */
  .orch{ top:50%; }
  .orch-core{ width:44px; height:44px; }
  .orch-orb{ font-size:19px; }
  .orch-sign{ z-index:12; transform: translate(-50%,-50%) var(--up) translateZ(148px); }
}/* =========================================================
   RESPONSIVE UTILITIES + MOBILE FIXES
   ========================================================= */
/* Column utilities - use instead of inline grid-template-columns,
   so grids still collapse on small screens */
.cols-2{ grid-template-columns: repeat(2, 1fr); }
.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px){ .cols-3{ grid-template-columns: repeat(2, 1fr); } }@media (max-width: 880px){ .cols-2, .cols-3{ grid-template-columns: 1fr; } }/* No e-ink mode on mobile */


/* Office copy: never wider than the screen */
@media (max-width: 640px){
  .office-copy h2{ max-width: 100% !important; }
  .office-copy p{ max-width: 100%; }
}

/* =========================================================
   MOBILE SWEEP · touch ergonomics + form safety
   ========================================================= */
@media (pointer: coarse){
  .nav-cta{ min-height: 44px; display: inline-flex; align-items: center; }
  .theme-switcher button{ padding: 10px 14px; }
  .nav-list a{ min-height: 40px; display: inline-flex; align-items: center; }
  .btn, button, a{ -webkit-tap-highlight-color: transparent; }
  .btn, .nav-cta, .theme-switcher button, .nav-list a{ touch-action: manipulation; }
}
.form-row, .field{ min-width: 0; }
.field input, .field textarea, .field select{ width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 768px){
  .field input, .field textarea, .field select{ font-size: 16px; }
}/* =========================================================
   HeyOne AI Academy - cohort format facts
   ========================================================= */
.aca-facts{
  max-width: var(--max-w-wide); margin: 56px auto 0; padding: 0 10px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.aca-fact{
  position: relative; overflow: hidden; isolation: isolate;
  padding: 32px 26px; border-radius: var(--radius-l);
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  text-align: center;
  transition: transform 0.5s var(--easing), border-color 0.3s;
}
.aca-fact::before{
  content:""; position:absolute; width:280px; height:280px; border-radius:50%;
  background: var(--orange); filter: blur(60px); opacity:0.22; z-index:-1;
  bottom:-90px; right:-90px;
}.aca-fact-n{
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(46px, 5vw, 68px); letter-spacing: -0.03em; color: var(--orange);
  font-variant-numeric: tabular-nums lining-nums;
}
.aca-fact-n span{ font-size: 0.34em; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
.aca-fact-k{
  font-family: var(--sf-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); margin: 16px 0 10px;
}
.aca-fact p{ color: var(--ink-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }@media (max-width: 920px){ .aca-facts{ grid-template-columns: 1fr 1fr; } }@media (max-width: 480px){ .aca-facts{ grid-template-columns: 1fr; } }/* =========================================================
   LEGAL PAGES - privacy / terms documents
   ========================================================= */
.legal-hero{ min-height: auto; padding-bottom: 20px; }
.legal-updated{
  font-family: var(--sf-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-top: 18px;
}
.legal-section{ padding-top: 24px; }
.legal-wrap{
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start;
}
.legal-toc{ position: sticky; top: 104px; }
.legal-toc-h{
  display: block; font-family: var(--sf-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.legal-toc ol{ list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 9px; }
.legal-toc li{ counter-increment: toc; }
.legal-toc a{
  display: flex; gap: 9px; font-size: 14px; color: var(--muted); text-decoration: none;
  line-height: 1.35; transition: color 0.2s;
}
.legal-toc a::before{
  content: counter(toc, decimal-leading-zero); font-family: var(--sf-mono);
  font-size: 11px; color: var(--orange); flex-shrink: 0; padding-top: 2px;
}
.legal-toc a:hover{ color: var(--ink); }

.legal-doc{ max-width: 68ch; }
.legal-block{ scroll-margin-top: 100px; }
.legal-block + .legal-block{ margin-top: 40px; }
.legal-doc h2{
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px; color: var(--ink);
}
.legal-num{ font-family: var(--sf-mono); font-size: 14px; font-weight: 600; color: var(--orange); flex-shrink: 0; }
.legal-doc p{ color: var(--ink-2); font-size: 16px; line-height: 1.65; margin-bottom: 14px; text-wrap: pretty; }
.legal-doc ul{ margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.legal-doc li{
  position: relative; padding-left: 22px; color: var(--ink-2); font-size: 16px; line-height: 1.55; text-wrap: pretty;
}
.legal-doc li::before{
  content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px;
  border-radius: 2px; background: var(--orange);
}
.legal-doc a{ color: var(--orange); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.legal-doc a:hover{ border-bottom-color: var(--orange); }
.legal-foot{
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
}
.legal-foot p{ margin: 0; font-size: 15px; color: var(--muted); }@media (max-width: 860px){
  .legal-wrap{ grid-template-columns: 1fr; gap: 36px; }
  .legal-toc{ position: static; }
  .legal-toc ol{ display: grid; grid-template-columns: 1fr 1fr; }
}/* =========================================================
   INDIAN TRICOLOUR - footer "Made in India" mark
   ========================================================= */
.india-flag{
  display:inline-flex; flex-direction:column; width:22px; height:15px;
  border-radius:2.5px; overflow:hidden; vertical-align:-3px; margin-left:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.16), 0 1px 3px rgba(0,0,0,0.35);
}
.india-flag > span{ flex:1; display:block; }
.india-flag .saffron{ background:#FF9933; }
.india-flag .band-white{ background:#FFFFFF; display:flex; align-items:center; justify-content:center; }
.india-flag .green{ background:#138808; }
.india-flag .chakra{
  width:5px; height:5px; border-radius:50%;
  border:1.1px solid #0A0A8C; box-sizing:border-box;
}/* =========================================================
   CALCULATOR v2 - "free capacity" model
   ========================================================= */


@keyframes dot-pop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
.dot-person{ background: var(--ink); }
.dot-ghost{
  background: transparent; border: 2px dashed var(--orange);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--orange) 60%, transparent);
}


.dot-key{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot-key.person{ background: var(--ink); }
.dot-key.ghost{ background:transparent; border:2px dashed var(--orange); }/* Footer tagline - "One, for Everyone" */
.foot-tagline{
  font-family: var(--sf-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--orange);
  margin: 12px 0 10px;
}/* =========================================================
   SUBPAGE COMPONENTS  -  merged from 1ai.css (v1.0 base)
   Blocks below exist only in the base sheet and are required
   by the inner pages (academy format band, contact form
   errors, footer flag, mobile nav refinements, etc.).
   RC2 wins every selector defined above this banner.
   ========================================================= */


/* ---------- TOKENS ---------- */
:root {
  --orange: #FF4F00;
  --orange-2: #FF7A3D;
  --orange-deep: #C2410C;
  --orange-soft: #FFB84D;
  --pop: #30D158;
  --blue: #4A6CF7;
  --purple: #B247E5;
  --yellow: #FFD60A;
  --pink: #FF375F;

  /* Font tokens must match the rc2 design set above - this legacy :root
     used to re-declare Inter / SF Mono / Lora here, silently shadowing the
     self-hosted Hanken Grotesk / Space Mono / Literata site-wide. */
  --sf: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* @kind font */
  --sf-mono: 'Space Mono', ui-monospace, Menlo, monospace; /* @kind font */
  --serif: 'Literata', Georgia, "Times New Roman", serif; /* @kind font */

  --easing: cubic-bezier(0.28, 0.16, 0.22, 1); /* @kind other */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* @kind other */
  --btn-angle: 0deg; /* @kind other */

  --max-w: 1180px;
  --max-w-wide: 1320px;
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-xl: 32px;
  --radius-pill: 980px;
}
@media (max-width: 1120px) {
.nav.open .nav-drawer { transform: translateY(0); }
.nav-drawer ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nav-drawer a {
  display: block;
  padding: 14px 16px;
  font-size: 18px;
  color: var(--ink) !important;
  font-weight: 700;
  border-radius: 12px;
  transition: background 0.2s;
  }
.nav-drawer a:hover, .nav-drawer a.active { background: var(--glass-bg); color: var(--orange); }
}@media (max-width: 900px) {
.services-grid { grid-template-columns: 1fr; }
}.stat-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
.stat-row-3 { grid-template-columns: repeat(2, 1fr); }
}.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-error {
  background: rgba(255,79,0,0.08);
  border: 1px solid rgba(255,79,0,0.32);
  color: var(--ink);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.55;
  display: none;
}
.form-error.show { display: block; animation: drift-up 0.5s var(--easing); }
.form-error strong { color: var(--orange); }
.form-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.form-error-actions .btn { font-size: 14px; }
.operating-strip span {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px;
  text-align: left;
  color: var(--muted);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.055);
  backdrop-filter: blur(20px) saturate(160%);
}
.operating-strip span:first-child { border-radius: 21px 0 0 21px; }
.operating-strip span:last-child { border-radius: 0 21px 21px 0; }
@media (max-width: 760px) {
.operating-strip span:first-child { border-radius: 21px 0 0 0; }
.operating-strip span:nth-child(2) { border-radius: 0 21px 0 0; }
.operating-strip span:nth-child(3) { border-radius: 0 0 0 21px; }
.operating-strip span:last-child { border-radius: 0 0 21px 0; }
}@media (max-width: 520px) {
.operating-strip span,
  .operating-strip span:first-child,
  .operating-strip span:nth-child(2),
  .operating-strip span:nth-child(3),
  .operating-strip span:last-child { border-radius: 18px; }
}.fmt-band{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px;
  margin: 50px auto 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}.fmt-cell{
  padding: 40px 26px 36px;
  text-align: center;
  border-right: 1px solid var(--line);
  transition: background 0.3s ease;
}
.fmt-cell:last-child{ border-right: none; }
.fmt-cell:hover{ background: var(--glass-hi); }
.fmt-v{
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums lining-nums;
}
.fmt-v .fmt-vx{ font-size: 0.42em; font-weight: 700; letter-spacing: -0.01em; margin-left: 2px; }
.fmt-k{
  font-family: var(--sf-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  margin-top: 12px;
}.fmt-d{
  font-size: 14px; color: var(--muted); line-height: 1.5;
  margin: 10px auto 0; max-width: 22ch;
}
@media (max-width: 880px){
.fmt-band{ grid-template-columns: repeat(2, 1fr); }
.fmt-cell:nth-child(2n){ border-right: none; }
.fmt-cell:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
}.fmt-rhythm{
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 28px auto 0; max-width: 620px;
}
.fmt-day{
  width: 56px; padding: 10px 0;
  text-align: center;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--line);
  font-family: var(--sf-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.fmt-day.on{
  background: var(--orange);
  border-color: var(--orange);
  color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(255,79,0,0.5);
}.fmt-rhythm-note{
  flex-basis: 100%;
  text-align: center;
  margin-top: 12px;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
.founder-facts{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.ff{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--glass-bg);
  transition: transform 0.3s var(--easing), border-color 0.3s;
}.ff:hover{ transform: translateY(-3px); border-color: var(--orange); }
.ff-v{
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--orange);
  font-variant-numeric: tabular-nums lining-nums;
}
.ff-k{
  font-family: var(--sf-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink);
  margin-top: 6px;
}.ff-d{ font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 7px; }
@media (max-width: 640px){
.founder-facts{ grid-template-columns: 1fr; }
}@media (max-width: 480px){
.fmt-band{ grid-template-columns: 1fr; }
.fmt-cell{ border-right: none !important; border-bottom: 1px solid var(--line); }
.fmt-cell:last-child{ border-bottom: none; }
}@media (pointer: coarse){
.nav-toggle{ width: 44px; height: 44px; }
.btn, .nav-cta, .nav-toggle, .theme-switcher button{ touch-action: manipulation; }
}/* ---------- PAGE OVERRIDES - HOME ---------- */
.hero h1{ line-height:1.0; }
 .hero h1 .w, .hero h1 .w.grad{ display:block; line-height:1.04; margin:0 auto; }
 .hero h1 .w.grad{ padding-bottom:0.14em; }
 .nav-list a, .nav-cta, .promo{ white-space:nowrap; }
 .nav-list{ gap:2px; }
 /* Hero must show its end-state even if the drift-up entrance stalls behind fonts/filters */
 .hero h1 .w, .hero .deck, .hero .actions, .hero-clock,
 .hero-clock .clock-cell{ opacity:1 !important; transform:none !important; animation:none !important; }


/* ---------- PAGE OVERRIDES - USE-CASES ---------- */

.arc-search{ max-width:760px; margin:0 auto 26px; padding:0 24px; text-align:left; }
.arc-search label{ display:block; font-size:13px; color:var(--ink-2); margin-bottom:10px; font-weight:700; letter-spacing:-0.01em; }
.arc-search input{ width:100%; border:1px solid var(--line-2); border-radius:18px; background:var(--glass); color:var(--ink); padding:16px 18px; font-size:16px; box-shadow:var(--shadow-soft); }
.arc-search input:focus{ outline:2px solid var(--orange); outline-offset:2px; }
.arc-search p{ margin:10px 0 0; color:var(--muted); font-size:13px; font-family:var(--sf-mono); letter-spacing:0.02em; }
.arc-empty{ grid-column:1/-1; text-align:center; color:var(--ink-2); border:1px solid var(--line-2); border-radius:20px; padding:36px 24px; background:var(--glass); }
.arc-filter{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:1120px; margin:0 auto 46px; padding:0 24px; }
@media (pointer: coarse){ .arc-chip{ min-height:44px; } }.arc-chip{
 display:inline-flex; align-items:center;
 font-family:var(--sf); font-size:13px; font-weight:500; letter-spacing:0.01em;
 padding:9px 16px; border-radius:999px; cursor:pointer; user-select:none;
 color:var(--ink-2); background:var(--glass-bg); border:1px solid var(--glass-bd);
 backdrop-filter:var(--chrome-blur, blur(14px) saturate(150%));
 -webkit-backdrop-filter:var(--chrome-blur, blur(14px) saturate(150%));
 transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.arc-chip:hover{ border-color:var(--orange); color:var(--ink); }
.arc-chip.on{ background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); }
.arc-chip .ct{ opacity:.55; margin-left:5px; }
.arc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1180px; margin:0 auto; padding:0 24px; }
@media (max-width: 1020px){ .arc-grid{ grid-template-columns:repeat(2, 1fr); } }@media (max-width: 620px){ .arc-grid{ grid-template-columns:1fr; } }.arc-card{
 position:relative; display:flex; flex-direction:column; gap:9px; text-align:left;
 padding:26px 24px 22px; border-radius:20px; cursor:pointer;
 background:linear-gradient(140deg, var(--glass-hi), var(--glass-bg) 55%);
 border:1px solid var(--glass-bd);
 backdrop-filter:var(--chrome-blur, blur(18px) saturate(160%));
 -webkit-backdrop-filter:var(--chrome-blur, blur(18px) saturate(160%));
 box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 28px rgba(0,0,0,0.16);
 transition:transform .25s var(--spring, ease), border-color .25s ease, box-shadow .25s ease;
 animation:arc-in .5s ease both; animation-delay:calc(var(--i, 0) * 30ms);
}
@keyframes arc-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .arc-card{ animation:none; } }.arc-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--orange) 55%, var(--glass-bd)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 38px rgba(0,0,0,0.22); }
.arc-card:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.arc-num{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--sf-mono); font-size:11px; letter-spacing:0.1em; color:var(--muted); text-transform:uppercase; }
.arc-word{ font-size:21px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.arc-word .hi{ font-weight:500; color:var(--orange); margin-left:8px; font-size:18px; }
.arc-title{ font-size:14px; color:var(--ink-2); font-weight:500; }
.arc-def{ font-size:13px; line-height:1.55; color:var(--muted); text-wrap:pretty; }
/* overlay */
.arc-overlay{
 position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center;
 padding:22px; background:rgba(8,5,3,0.45);
 backdrop-filter:var(--chrome-blur, blur(18px) saturate(120%));
 -webkit-backdrop-filter:var(--chrome-blur, blur(18px) saturate(120%));
}
.arc-overlay.open{ display:flex; }
.arc-modal{
 position:relative; width:min(660px, 100%); max-height:84vh; overflow:auto;
 border-radius:26px; padding:clamp(28px, 4vw, 42px);
 background:linear-gradient(150deg, var(--glass-strong), var(--glass-bg) 70%);
 border:1px solid var(--glass-bd);
 backdrop-filter:var(--chrome-blur, blur(30px) saturate(170%));
 -webkit-backdrop-filter:var(--chrome-blur, blur(30px) saturate(170%));
 box-shadow:0 30px 80px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.12);
}
.arc-modal .arc-num{ margin-bottom:14px; padding-right:48px; }
.arc-modal h3{ font-size:clamp(24px, 3vw, 32px); font-weight:700; letter-spacing:-0.02em; margin-bottom:16px; }
.arc-modal .story{ font-size:16px; line-height:1.65; color:var(--ink-2); text-wrap:pretty; }
.arc-dict{ margin-top:26px; padding:22px 24px; border-radius:18px; background:var(--glass-bg); border:1px solid var(--glass-bd); }
.arc-dict .w{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px; overflow:hidden; font-size:24px; font-weight:700; letter-spacing:-0.01em; }
.arc-dict .w .hi{ display:inline-block; max-width:100%; overflow-wrap:anywhere; font-weight:500; color:var(--orange); margin-left:0; font-size:20px; }
.arc-dict .pos{ font-family:var(--sf-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin:7px 0 4px; }
.arc-dict .d{ font-size:15px; line-height:1.5; color:var(--ink-2); }
.arc-close{
 position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
 display:flex; align-items:center; justify-content:center; cursor:pointer;
 font-size:16px; line-height:1; color:var(--ink-2);
 background:var(--glass-bg); border:1px solid var(--glass-bd);
}
.arc-close:hover{ color:var(--ink); border-color:var(--orange); }
body.arc-lock{ overflow:hidden; }/* ---------- PAGE OVERRIDES - CAREERS ---------- */
/* Careers  -  role cards */
.role-list{ max-width: 880px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 14px; }
.role-card{
 display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
 border: 1px solid var(--line); border-radius: 18px;
 padding: 24px 28px;
 background: var(--glass-bg);
 transition: transform 0.3s var(--easing), border-color 0.3s;
}.role-card:hover{ transform: translateY(-3px); border-color: var(--orange); }
.role-title{ font-size: 21px; font-weight: 700; letter-spacing: -0.018em; color: var(--ink); }
.role-meta{
 display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px;
 font-family: var(--sf-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
 color: var(--muted);
}
.role-meta b{ color: var(--orange); font-weight: 600; }
.role-desc{ margin-top: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
.role-cta{ white-space: nowrap; }
@media (max-width: 640px){ .role-card{ grid-template-columns: 1fr; } }.role-empty{
 border: 1px dashed var(--line-2, var(--line)); border-radius: 18px;
 padding: 36px 28px; text-align: center;
 color: var(--ink-2); font-size: 16px; line-height: 1.6;
}
.role-empty b{ color: var(--ink); }
.role-boards{
 display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
 margin: 26px auto 0;
}
.role-boards a{
 display: inline-flex; align-items: center; gap: 8px;
 padding: 10px 18px;
 border: 1px solid var(--line); border-radius: var(--radius-pill, 999px);
 font-family: var(--sf-mono); font-size: 12px; letter-spacing: 0.05em;
 color: var(--ink-2); text-decoration: none;
 transition: border-color 0.3s, color 0.3s;
}
.role-boards a:hover{ border-color: var(--orange); color: var(--orange); }

/* ---------- WEEK PICKER - tap the busywork, watch the week add up ---------- */
.wk{ max-width: 1040px; margin: 56px auto 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: stretch; }
.wk-chips{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.wk-chip{
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px;
  padding: 16px 18px; text-align: left; cursor: pointer;
  font-family: var(--sf); font-size: 15.5px; font-weight: 500; color: var(--ink-2);
  background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--radius-m);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: border-color 0.25s var(--easing), background 0.25s var(--easing), color 0.25s var(--easing), transform 0.25s var(--easing);
}
.wk-chip:hover{ border-color: rgba(255,79,0,0.35); color: var(--ink); transform: translateY(-1px); }
.wk-chip svg{ width: 20px; height: 20px; color: var(--muted); stroke-width: 2.1; transition: color 0.25s; }
.wk-chip .wk-name{ line-height: 1.25; }
.wk-chip .wk-h{ font-family: var(--sf-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--silver); white-space: nowrap; }
.wk-chip[aria-pressed="true"]{
  border-color: var(--orange); color: var(--ink);
  background: linear-gradient(180deg, rgba(255,79,0,0.14), rgba(255,79,0,0.05));
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1px rgba(255,79,0,0.22), 0 10px 28px -14px rgba(255,79,0,0.45);
}
.wk-chip[aria-pressed="true"] svg{ color: var(--orange); }
.wk-chip[aria-pressed="true"] .wk-h{ color: var(--orange); }

.wk-res{
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 34px 28px; border-radius: var(--radius-l);
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-m);
  transition: border-color 0.4s var(--easing), box-shadow 0.4s var(--easing);
}
.wk-res.live{ border-color: rgba(255,79,0,0.30); }
.wk-total{ line-height: 1; }
.wk-num{
  font-family: var(--display); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(72px, 9vw, 124px); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wk-res.live .wk-num{
  background: linear-gradient(135deg, var(--orange) 0%, #FF9D52 60%, var(--orange-soft) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.wk-unit{ font-family: var(--display); font-weight: 600; font-size: 0.34em; color: var(--ink-2); margin-left: 6px; vertical-align: 18%; font-size: clamp(24px, 3vw, 40px); }
.wk-sub{ font-family: var(--sf-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin-top: 10px; min-height: 1.4em; }
.wk-line{ font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 18px 0 0; max-width: 30ch; min-height: 3.0em; }
.wk-bar{ width: 100%; max-width: 280px; height: 6px; border-radius: 99px; background: var(--bg-3); margin-top: 20px; overflow: hidden; }
.wk-fill{ display: block; height: 100%; width: 0; border-radius: 99px; background: var(--ink-2); opacity: 0.55; transition: width 0.45s var(--easing), background 0.45s, opacity 0.45s; }
.wk-fill.hot{ background: linear-gradient(90deg, var(--orange), var(--orange-soft)); opacity: 1; }
.wk-barcap{ font-family: var(--sf-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--silver); margin-top: 10px; }
.wk-cta{ margin-top: 24px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.4s var(--easing), transform 0.4s var(--easing); }
.wk-cta.show{ opacity: 1; transform: none; pointer-events: auto; }
.wk-foot{ text-align: center; font-size: 14px; color: var(--muted); max-width: 62ch; margin: 28px auto 0; }

@media (max-width: 920px){
  .wk{ grid-template-columns: 1fr; }
  .wk-chips{ grid-template-columns: repeat(2, 1fr); }
}@media (max-width: 560px){
  .wk-chips{ grid-template-columns: 1fr; }
  .wk-chip{ padding: 14px 16px; }
  .wk-res{ padding: 28px 18px; }
}@media (prefers-reduced-motion: reduce){
  .wk-chip, .wk-fill, .wk-cta{ transition: none; }
}/* ---------- MOBILE POLISH - 2026-06-12 responsive audit ---------- */
/* Hero operating strip: the 4-up row squeezed to one word per line on phones.
   2x2 keeps the panel readable; corner radii follow the new grid. */
@media (max-width: 640px) {
  .operating-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operating-strip > span { min-height: 64px; padding: 14px 16px; }
  .operating-strip > span:first-child { border-radius: 21px 0 0 0; }
  .operating-strip > span:nth-child(2) { border-radius: 0 21px 0 0; }
  .operating-strip > span:nth-child(3) { border-radius: 0 0 0 21px; }
  .operating-strip > span:last-child { border-radius: 0 0 21px 0; }
}

/* Once card grids go single column, content sizes the card - the desktop
   380px floor left careers' short cards two-thirds empty. */
@media (max-width: 660px) {
  .uc-card { min-height: 0; }
}

/* Touch targets: footer links measured 20px tall, inline arrows 26px.
   WCAG 2.5.8 asks 24px minimum; these land at ~38-44px without changing
   the visual rhythm (spacing moves from margins into the hit area). */
@media (pointer: coarse), (max-width: 600px) {
  .foot-col a { padding-block: 9px; margin-bottom: 0; }
  .link-arrow { padding-block: 8px; }
  .logo { padding-block: 8px; }
  .nav-cta { padding-block: 9px; }
  .theme-switcher button { padding: 12px 15px; }
  .arc-chip { min-height: 44px; }
  .contact-item .v a { display: inline-block; padding-block: 8px; }
}
@media (pointer: coarse) and (max-width: 940px), (max-width: 600px) {
  .nav-list a { padding: 10px 15px; }
}/* ---------- BRAND + CONTENT PASS - 2026-06-13 ---------- */

/* Use-cases filter chips: more presence, clearer counts, still calm. */
.arc-chip{ font-size:14px; font-weight:600; padding:11px 18px; color:var(--ink); border-color:var(--line-2); }
.arc-chip .ct{ opacity:1; color:var(--orange); font-family:var(--sf-mono); font-size:11.5px; margin-left:8px; }
.arc-chip.on .ct{ color:inherit; opacity:.75; }
.arc-chip.on{ box-shadow:0 8px 24px -10px rgba(255,79,0,0.55); }/* Story modal: liquid glass. Layered translucency + light edges + a top
   sheen and warm refraction glow; e-ink keeps its solid paper card. */
.arc-overlay{
 background:
  radial-gradient(90% 70% at 50% 6%, rgba(255,79,0,0.10), transparent 62%),
  rgba(8,5,3,0.55);
}
.arc-modal{
 background:
  linear-gradient(165deg, rgba(255,255,255,0.085), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.05) 100%),
  linear-gradient(150deg, var(--glass-strong), var(--glass-bg) 70%);
 border:1px solid rgba(255,255,255,0.16);
 box-shadow:
  0 48px 120px -24px rgba(0,0,0,0.62),
  0 18px 40px rgba(0,0,0,0.30),
  inset 0 1px 0 rgba(255,255,255,0.22),
  inset 0 -1px 0 rgba(255,255,255,0.05),
  inset 1px 0 0 rgba(255,255,255,0.07),
  inset -1px 0 0 rgba(255,255,255,0.07);
}
.arc-modal::after{
 content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
 background:
  linear-gradient(180deg, rgba(255,255,255,0.10), transparent 14%),
  radial-gradient(130% 55% at 88% -6%, rgba(255,79,0,0.10), transparent 55%),
  radial-gradient(80% 40% at 8% 104%, rgba(255,122,61,0.06), transparent 60%);
}
[data-theme="light"] .arc-overlay{
 background:
  radial-gradient(90% 70% at 50% 6%, rgba(255,79,0,0.08), transparent 62%),
  rgba(250,245,240,0.45);
}
[data-theme="light"] .arc-modal{
 border-color:rgba(30,15,5,0.10);
 box-shadow:
  0 48px 120px -28px rgba(30,15,5,0.35),
  0 18px 40px rgba(30,15,5,0.12),
  inset 0 1px 0 rgba(255,255,255,0.85);
}
[data-theme="light"] .arc-modal::after{
 background:
  linear-gradient(180deg, rgba(255,255,255,0.55), transparent 16%),
  radial-gradient(130% 55% at 88% -6%, rgba(255,79,0,0.07), transparent 55%);
}/* Founder card: press coverage chips */
.ff-press-h{ font-family:var(--sf-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:13px; }
.ff-press-h + .ff-press{ margin-top:6px; }
.ff-press{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px; }
/* About: humble team prose (replaces the founder-fact boxes) */
.team-block{ max-width:760px; margin:38px auto 0; }
.team-lede{ font-size:clamp(17px,2vw,20px); line-height:1.74; color:var(--ink-2); }
.team-lede + .team-lede{ margin-top:22px; }
.team-block .hl{ color:var(--orange); font-weight:700; }
[data-theme="light"] .team-block .hl{ color:var(--orange-deep, #C2410C); }
.team-block .ff-press-h{ margin-top:34px; }
.team-block .ff-press{ margin-top:9px; }

/* AI Cafe blog */
.post-kicker{ font-family:var(--sf-mono); font-size:13px; letter-spacing:0.04em; color:var(--muted); text-transform:uppercase; }
.post-kicker a{ color:var(--orange); }
.cafe-list{ max-width:var(--max-w); margin:0 auto; display:grid; gap:22px; }
.cafe-card{ display:block; text-decoration:none; color:var(--ink); background:var(--glass-bg); border:1px solid var(--glass-bd); border-radius:var(--radius-l); padding:clamp(26px,4vw,40px); backdrop-filter:blur(18px); transition:border-color .2s ease, transform .2s ease; }
.cafe-card:hover{ border-color:var(--orange); transform:translateY(-3px); }
.cafe-card-meta{ display:flex; align-items:center; gap:14px; font-family:var(--sf-mono); font-size:12px; letter-spacing:0.06em; color:var(--muted); text-transform:uppercase; margin-bottom:16px; }
.cafe-tag{ color:var(--orange); border:1px solid color-mix(in srgb, var(--orange) 40%, transparent); border-radius:999px; padding:3px 11px; }
[data-theme="light"] .cafe-tag{ color:var(--orange-deep, #C2410C); }
.cafe-card-title{ font-size:clamp(28px,4vw,42px); font-weight:700; letter-spacing:-0.022em; line-height:1.08; }
.cafe-card-excerpt{ color:var(--ink-2); font-size:17px; line-height:1.62; margin-top:14px; max-width:66ch; }
.cafe-card-cta{ display:inline-flex; align-items:center; gap:6px; color:var(--orange); font-weight:700; margin-top:20px; }
[data-theme="light"] .cafe-card-cta{ color:var(--orange-deep, #C2410C); }
.post-body{ max-width:680px; margin:0 auto; }
.post-body > p{ font-size:clamp(17px,2vw,20px); line-height:1.76; color:var(--ink-2); }
.post-body > p + p{ margin-top:22px; }
.post-body .hl{ color:var(--orange); font-weight:700; }
[data-theme="light"] .post-body .hl{ color:var(--orange-deep, #C2410C); }
.post-cta{ margin:54px auto; text-align:center; background:var(--glass-bg); border:1px solid var(--glass-bd); border-radius:var(--radius-xl); padding:clamp(34px,5vw,48px) clamp(26px,4vw,40px); backdrop-filter:blur(20px); }
.post-cta h2{ font-size:clamp(26px,4vw,38px); font-weight:700; letter-spacing:-0.02em; margin-top:8px; }
.post-cta p{ color:var(--ink-2); font-size:17px; line-height:1.6; max-width:52ch; margin:14px auto 26px; }
.post-back{ margin-top:40px !important; }
.post-back a{ color:var(--muted); font-family:var(--sf-mono); font-size:14px; }
.post-back a:hover{ color:var(--orange); }
/* Live local-brain demo embedded in the cafe post: reuse the .takeaway-page
   demo styling but strip its page-level padding/background so it sits in-flow. */
.cafe-demo.takeaway-page{ padding-top:0 !important; background:none !important; max-width:1100px; margin:48px auto 0; }
.cafe-demo.takeaway-page .takeaway-demo{ margin:0; }
.ff-press a{
 display:inline-flex; align-items:center; gap:7px;
 font-size:12.5px; font-weight:600; color:var(--ink-2);
 border:1px solid var(--line); border-radius:var(--radius-pill);
 padding:8px 14px; background:var(--glass-bg);
 transition:color .2s, border-color .2s;
}
.ff-press a:hover{ color:var(--orange); border-color:var(--orange); }
.ff-press svg{ width:15px; height:15px; flex-shrink:0; }
.ff-press .brandmark{ width:17px; height:17px; }/* ---------- LIQUID GLASS PASS - 2026-06-13 ---------- */
/* Shared recipe: a 1px light inner edge + soft deep elevation reads as glass
   without extra backdrop-filter cost; an ::after top sheen on the big card
   families. Light theme gets white-glass edges; e-ink stays flat paper. */
.uc-card, .form-card, .support-card, .role-card, .founder{
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 24px 60px -32px rgba(0,0,0,0.55);
}
.role-card, .founder{ position: relative; }
.arc-card{
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
  border-color: rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 16px 40px -28px rgba(0,0,0,0.45);
}
.uc-card::after, .role-card::after, .founder::after, .support-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent 16%);
}
[data-theme="light"] .uc-card, [data-theme="light"] .form-card,
[data-theme="light"] .support-card, [data-theme="light"] .role-card,
[data-theme="light"] .founder{
  border-color: rgba(30,15,5,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 24px 60px -36px rgba(30,15,5,0.28);
}
[data-theme="light"] .arc-card{
  border-color: rgba(30,15,5,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 16px 40px -30px rgba(30,15,5,0.22);
}
[data-theme="light"] .uc-card::after, [data-theme="light"] .role-card::after,
[data-theme="light"] .founder::after, [data-theme="light"] .support-card::after{
  background: linear-gradient(180deg, rgba(255,255,255,0.50), transparent 18%);
}/* ---------- CONTRAST PASS - WCAG AA (2026-06-13 axe audit) ---------- */
/* Footer legal line and week-picker hour labels measured 3.3-3.8:1. */
.foot-bottom{ color: var(--ink-2); }
.wk-h, .wk-barcap{ color: var(--ink-2); }
/* International orange reads 3.0:1 on light backgrounds - small orange text
   shifts to a deeper shade there (headlines and the logotype keep the brand
   colour; logos are exempt under WCAG 1.4.3). */
[data-theme="light"] .eyebrow,
[data-theme="light"] .link-arrow,
[data-theme="light"] .arc-chip .ct{ color: #C2410C; }
/* In-prose links were distinguishable by colour alone. */
main p > a:not([class]){ text-decoration: underline; text-underline-offset: 3px; }

/* contrast pass, round 2: specificity + light-theme stragglers */
.wk-chip .wk-h{ color: var(--ink-2); }
.nav-list a{ color: var(--ink-2); }
[data-theme="light"] .timeline .yr{ color: #C2410C; }
[data-theme="light"] .arc-chip.on .ct{ color: inherit; }

/* contrast pass, round 3: last four nodes */
.nav-list a{ color: var(--ink); }
[data-theme="light"] .faq-item.open .faq-q{ color: #C2410C; }
[data-theme="light"] main p > a:not(.btn){ color: #C2410C; }
main p > a:not([class]){ color: var(--orange); }

/* ---------- AUDIT FIXES - 2026-06-13 (workflow findings) ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* 73 glassy cards + chips = compositing jank on phones; blur is a desktop luxury */
@media (max-width: 768px){
  .arc-card, .arc-chip{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ---------- PAGE OVERRIDES - TRUST ---------- */
.trust-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:14px; max-width:var(--max-w); margin:50px auto 0; padding:0 11px;
}
.trust-card{
  position:relative; padding:26px 28px 28px; border-radius:var(--radius-l);
  background:var(--glass-bg); border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 60px -32px rgba(0,0,0,0.55);
  display:flex; flex-direction:column;
}
.trust-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), transparent 18%);
}
.trust-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.trust-card h3{ font-size:19px; font-weight:700; letter-spacing:-0.018em; color:var(--ink); }
.trust-card p{ font-size:15.5px; line-height:1.55; color:var(--ink-2); margin:0; }
.trust-chip{
  flex-shrink:0; font-family:var(--sf-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--orange);
  border:1px solid color-mix(in srgb, var(--orange) 38%, transparent);
  background:color-mix(in srgb, var(--orange) 10%, transparent);
  padding:5px 10px; border-radius:var(--radius-pill); white-space:nowrap;
}
[data-theme="light"] .trust-card{
  border-color:rgba(30,15,5,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 24px 60px -36px rgba(30,15,5,0.28);
}
[data-theme="light"] .trust-chip{ color:#C2410C; border-color:rgba(194,65,12,0.30); background:rgba(194,65,12,0.07); }.trust-checklist{
  max-width:680px; margin:30px auto 0; display:grid; gap:12px; text-align:left;
  list-style:none; padding:0;
}
.trust-checklist li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:16px; line-height:1.5; color:var(--ink-2);
}
.trust-checklist li::before{
  content:"✓"; flex-shrink:0; color:var(--orange); font-weight:700;
  font-size:15px; line-height:1.5;
}
[data-theme="light"] .trust-checklist li::before{ color:#C2410C; }
@media (max-width:540px){ .trust-grid{ gap:11px; } .trust-card{ padding:22px 22px 24px; } }/* ---------- CARD TEXT CENTERING (global) - 2026-06-13 ---------- */
/* Centre the principle / feature cards (icon, heading, body) site-wide -
   reads cleaner than the previous left rag, per design review. Works for
   cards with or without a .uc-emoji; the emoji is already a flex item so it
   centres with the column. */
.uc-card{ align-items: center; text-align: center; }
.uc-card p{ margin-left: auto; margin-right: auto; }

/* ---------- NO-JS / PRINT-SAFE REVEALS - 2026-06-13 ---------- */
/* .reveal sections start hidden and animate in via JS. If JS is off (or before
   boot.js runs, or in print / "save full page"), force them visible so no-JS
   users, crawlers, printers and screenshot tools still see the content. boot.js
   adds .js synchronously in <head>, so JS visitors never see a flash. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }/* ---------- ADDENDUM REVAMP: ROUTER, CTAS, SVG, TAKEAWAY GATE ---------- */
a:not(.btn):not(.logo):not(.nav-cta):not(.uc-route-tile):not(.svc-cta):not(.go){ color:var(--orange-deep); }
[data-theme="dark"] a:not(.btn):not(.logo):not(.nav-cta):not(.uc-route-tile):not(.svc-cta):not(.go){ color:var(--orange); }
.uc-route-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1160px; margin:0 auto; padding:0 24px; }
.uc-route-tile{ position:relative; min-height:360px; padding:34px; border-radius:34px; background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--bg-2) 88%, transparent)); border:1px solid var(--glass-bd); box-shadow:var(--shadow-soft); text-decoration:none; overflow:hidden; color:var(--ink); backdrop-filter:blur(18px); }
.uc-route-tile::before{ content:""; position:absolute; inset:-30% -20% auto auto; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--orange) 50%, transparent), transparent 65%); opacity:.5; }
.uc-route-tile.premium{ background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--orange) 8%, var(--bg-2))); }
.uc-route-tile h2{ position:relative; font-size:clamp(34px,5vw,68px); line-height:.94; letter-spacing:-.06em; max-width:8ch; margin:44px 0 24px; }
.uc-route-tile p{ position:relative; color:var(--ink-2); font-size:18px; line-height:1.6; max-width:44ch; }
.tile-arrow{ position:absolute; left:34px; bottom:32px; font-weight:800; color:var(--orange); }
.uc-crosslink{ max-width:1040px; margin:-18px auto 0; padding:22px 28px; border:1px solid var(--glass-bd); border-radius:24px; background:color-mix(in srgb, var(--surface) 72%, transparent); display:flex; gap:20px; align-items:center; justify-content:space-between; }
.uc-crosslink p{ margin:0; color:var(--ink-2); }
.uc-crosslink a{ font-weight:900; color:var(--orange); white-space:nowrap; }
.arc-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:22px; align-items:center; }
.arc-actions span{ border:1px solid var(--glass-bd); border-radius:999px; padding:8px 11px; font-size:12px; font-weight:900; color:var(--ink); background:color-mix(in srgb, var(--surface) 70%, transparent); }
.arc-actions .arc-video-pill{ color:var(--orange); border-color:color-mix(in srgb, var(--orange) 45%, var(--glass-bd)); }
.arc-modal-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; padding-right:0; }
.arc-modal-actions button[disabled]{ opacity:.72; cursor:not-allowed; }
.arc-nav-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:14px; padding:0; }
/* On phones the share FAB (absolute, bottom-right of the modal) sat on top of the
   Next arrow. Group prev+next to the left so the bottom-right corner stays clear
   for the share button. */
@media (max-width:640px){ .arc-nav-row{ justify-content:flex-start; padding-right:52px; } }
.arc-nav{
  width:46px; min-height:46px; padding:0; border:0; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--orange); background:transparent; box-shadow:none !important;
  cursor:pointer; touch-action:manipulation; user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--easing), color .18s ease, opacity .18s ease;
}
.arc-nav span[aria-hidden="true"]{ font:900 34px/1 var(--sf-sans, var(--sf)); letter-spacing:-.06em; color:currentColor; }
.arc-nav-copy{ display:none; }
.arc-nav:hover,.arc-nav:focus-visible{ transform:translateY(-1px) scale(1.06); color:color-mix(in srgb, var(--orange) 88%, white); outline:none; box-shadow:none !important; }
.arc-nav:focus-visible span[aria-hidden="true"]{ text-shadow:0 0 18px color-mix(in srgb, var(--orange) 30%, transparent); }
.arc-nav:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
@media (max-width:520px){
  .arc-modal-actions{ padding-right:0; padding-bottom:56px; }
  .arc-nav-row{ margin-top:12px; padding:0; }
  .arc-nav{ width:44px; min-height:44px; }
}
.svg-showcase{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:42px; align-items:center; }
.svg-copy{ max-width:560px; padding-inline:24px; justify-self:end; }
.svg-copy p{ color:var(--ink-2); font-size:18px; line-height:1.7; }
.svg-stage{ padding:16px; aspect-ratio:920/520; border-radius:34px; background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--bg-2) 86%, transparent)); border:1px solid var(--glass-bd); box-shadow:var(--shadow-soft); backdrop-filter:blur(18px); }
.svg-triptych{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.brand-svg{ width:100%; height:auto; color:var(--ink); }
.brand-svg .svg-bg{ fill:color-mix(in srgb, var(--surface) 74%, transparent); stroke:var(--glass-bd); }
.brand-svg text{ fill:var(--ink); font-family:var(--sf-sans); font-weight:900; font-size:22px; letter-spacing:-.03em; }
.brand-svg .tiny,.brand-svg .caption{ fill:var(--ink-2); font-size:15px; font-weight:700; letter-spacing:0; }
.brand-svg .caption{ font-size:18px; }
.sovereignty-svg .lane path,.team-svg .team-lines path{ fill:none; stroke:color-mix(in srgb, var(--orange) 72%, var(--ink)); stroke-width:3; stroke-linecap:round; stroke-dasharray:8 14; animation:svg-dash 9s linear infinite; opacity:.82; }
.sovereignty-svg .lane .return{ stroke:var(--ink-faint); animation-duration:12s; }
.sovereignty-svg .zone rect,.team-svg .node,.flywheel-svg .fly-node circle{ fill:color-mix(in srgb, var(--surface) 88%, transparent); stroke:var(--glass-bd); stroke-width:2; }
.sovereignty-svg .zone text:first-of-type{ font-size:24px; }
.sovereignty-svg .no-server circle{ fill:color-mix(in srgb, var(--orange) 11%, var(--surface)); stroke:color-mix(in srgb, var(--orange) 60%, var(--glass-bd)); stroke-width:2; }
.sovereignty-svg .no-server path{ stroke:var(--orange); stroke-width:5; stroke-linecap:round; }
.sovereignty-svg .packet{ offset-path:path('M188 260 C290 144, 390 144, 460 260 C530 376, 630 376, 732 260'); animation:packet-move 6s ease-in-out infinite; }
.sovereignty-svg .packet circle{ fill:var(--orange); filter:url(#glow); }
.sovereignty-svg .p2{ animation-delay:2s; opacity:.74; }
.team-svg .node.main{ fill:url(#gteam); stroke:none; }
.team-svg .node.main+text{ fill:white; font-size:46px; }
.team-svg .mini{ fill:white; font-size:14px; }
.team-svg .small{ animation:node-breathe 5s ease-in-out infinite; }
.team-svg .n2,.team-svg .n5{ animation-delay:.7s; } .team-svg .n3,.team-svg .n6{ animation-delay:1.2s; }
.team-svg .svg-halo{ fill:var(--orange); opacity:.13; filter:url(#blurteam); }
.flywheel-svg .fly-ring{ fill:none; stroke:var(--glass-bd); stroke-width:28; }
.flywheel-svg .fly-flow{ fill:none; stroke:url(#gfly); stroke-width:8; stroke-linecap:round; stroke-dasharray:80 42; animation:svg-dash 10s linear infinite; }
.flywheel-svg .fly-node circle{ fill:color-mix(in srgb, var(--surface) 78%, var(--orange) 6%); }
@keyframes svg-dash{ to{ stroke-dashoffset:-180; } }
@keyframes packet-move{ 0%{ offset-distance:0%; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{ offset-distance:100%; opacity:0;} }
@keyframes node-breathe{ 0%,100%{ transform:translateY(0); opacity:.86;} 50%{ transform:translateY(-5px); opacity:1;} }
.takeaway-page{ padding-top:96px; background:radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 34%), var(--bg); color:var(--ink); }
.takeaway-page .wrap{ max-width:1180px; }
.takeaway-page .top{ display:none; }
.takeaway-page .hero{ padding:72px 0 36px; min-height:auto; text-align:center; }
.takeaway-page .hero h1{ font-family:var(--sf-sans); font-size:clamp(58px,10vw,118px); letter-spacing:-.075em; line-height:.88; }
.takeaway-page .hero h1 em{ color:var(--orange); font-style:normal; }
.takeaway-page .lede{ max-width:820px; margin-inline:auto; color:var(--ink-2); }
.takeaway-gate{ display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center; padding:30px; margin:0 auto 34px; border:1px solid var(--glass-bd); border-radius:34px; background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--orange) 9%, var(--bg-2))); box-shadow:var(--shadow-soft); }
.gate-copy h2{ font-size:clamp(34px,5vw,64px); letter-spacing:-.06em; line-height:.92; margin:12px 0; }
.gate-copy p,.gate-status{ color:var(--ink-2); line-height:1.6; }
.gate-form{ display:grid; gap:14px; }
.gate-form label{ display:grid; gap:7px; font-weight:900; color:var(--ink); }
.gate-form input{ width:100%; border:1px solid var(--glass-bd); border-radius:18px; background:var(--surface); color:var(--ink); padding:14px 16px; font:inherit; }
.gate-form .btn{ justify-self:start; width:auto; }
.gate-form input:focus{ outline:2px solid var(--orange); outline-offset:2px; }
.takeaway-demo[hidden]{ display:none; }
.takeaway-page .panel,.takeaway-page .explain,.takeaway-page .cta{ background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--glass-bd); box-shadow:var(--shadow-soft); }
.takeaway-page .privacy-pill{ border-color:color-mix(in srgb, var(--orange) 40%, var(--glass-bd)); color:var(--orange); }
@media (max-width:900px){ .uc-route-grid,.svg-showcase,.svg-triptych,.takeaway-gate{ grid-template-columns:1fr; } .uc-crosslink{ flex-direction:column; align-items:flex-start; } .svg-copy{ justify-self:start; } }@media (prefers-reduced-motion: reduce){ .sovereignty-svg .lane path,.flywheel-svg .fly-flow,.sovereignty-svg .packet,.team-svg .small{ animation:none !important; } }/* ---------- 2026-06-16 SNIP FEEDBACK PASS ---------- */
.foot-brand-links{
  display:grid;
  gap:7px;
  margin-top:14px;
  font-size:15px;
  line-height:1.45;
}
.foot-brand-links a{
  color:var(--ink-2) !important;
  text-decoration:none;
  width:max-content;
  transition:color .2s ease, transform .2s ease;
}
.foot-brand-links a:hover{ color:var(--orange) !important; transform:translateX(3px); }.foot-bottom .made{ gap:0; }

.uc-route-tile{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:390px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--bg-2) 82%, transparent));
  box-shadow:0 24px 80px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s ease;
}
.uc-route-tile:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--orange) 48%, var(--glass-bd));
  box-shadow:0 28px 100px rgba(255,79,0,.16), inset 0 1px 0 rgba(255,255,255,.18);
}
.uc-route-tile .tile-arrow{
  position:static;
  align-self:flex-start;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 18px;
  border-radius:999px;
  color:var(--ink);
  background:color-mix(in srgb, var(--surface) 76%, transparent);
  border:1px solid color-mix(in srgb, var(--orange) 44%, var(--glass-bd));
  box-shadow:0 16px 42px rgba(255,79,0,.16), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(16px);
}
.uc-route-tile:hover .tile-arrow{ background:var(--orange); color:white; }.agent-fit-note{ margin-top:40px; }
.agent-fit-note a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 16px;
  border:1px solid color-mix(in srgb, var(--orange) 42%, var(--glass-bd));
  border-radius:999px;
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  text-decoration:none;
}
.agent-fit-note a:hover{ background:var(--orange); color:white !important; }

.support-plan-grid{ max-width:1040px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.support-plan-card{
  position:relative;
  min-height:100%;
  padding:34px;
  border-radius:32px;
  border:1px solid var(--glass-bd);
  background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 84%, transparent), color-mix(in srgb, var(--bg-2) 88%, transparent));
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
}
.support-plan-card.featured{ border-color:color-mix(in srgb, var(--orange) 50%, var(--glass-bd)); background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--orange) 10%, var(--bg-2))); }
.support-plan-card::before{ content:""; position:absolute; inset:-20% -20% auto auto; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--orange) 34%, transparent), transparent 70%); opacity:.45; pointer-events:none; }
.support-plan-card > *{ position:relative; z-index:1; }
.plan-kicker{ font-family:var(--sf-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-weight:900; }
.support-plan-card h3{ font-size:clamp(30px,4vw,48px); line-height:.96; letter-spacing:-.055em; margin:0; }
.plan-price{ font-size:clamp(42px,6vw,72px); line-height:1; font-weight:950; letter-spacing:-.06em; color:var(--ink); }
.plan-price span{ font-size:16px; color:var(--ink-2); font-weight:700; letter-spacing:0; }
.support-plan-card p{ color:var(--ink-2); line-height:1.62; margin:0; }
.support-plan-card .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:820px){ .support-plan-grid{ grid-template-columns:1fr; } }.uc-emoji{
  color:var(--ink);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid var(--glass-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.uc-emoji::after{ display:none; }
.uc-card .uc-emoji svg,
.uc-emoji svg{
  color:currentColor;
  stroke:currentColor;
  fill:none;
}
[data-theme="dark"] .uc-card.featured .uc-emoji,
[data-theme="dark"] .uc-card.c1 .uc-emoji,
[data-theme="dark"] .uc-card.c2 .uc-emoji,
[data-theme="dark"] .uc-card.c3 .uc-emoji,
[data-theme="dark"] .uc-card.c4 .uc-emoji,
[data-theme="dark"] .uc-card.c5 .uc-emoji,
[data-theme="dark"] .uc-card.c6 .uc-emoji{ color:white; }.sovereignty-svg .svg-logo circle{ fill:var(--orange); }
.sovereignty-svg .svg-logo text:first-of-type{ fill:white; font-size:26px; font-weight:950; }
.sovereignty-svg .svg-logo text:last-of-type{ fill:var(--ink); font-size:22px; font-weight:950; }
.sovereignty-svg .control-badge rect{ fill:color-mix(in srgb, var(--surface) 88%, var(--orange) 5%); stroke:color-mix(in srgb, var(--orange) 45%, var(--glass-bd)); stroke-width:2; }
.sovereignty-svg .lane path{ stroke-width:4; }
.sovereignty-svg .packet{ offset-path:path('M326 232 C426 134, 494 134, 596 232'); }
.sovereignty-svg .packet.p2{ offset-path:path('M596 296 C494 394, 426 394, 326 296'); }
[data-theme="light"] .svg-stage{ background:linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,245,235,.72)); }
[data-theme="light"] .brand-svg .svg-bg{ fill:rgba(255,255,255,.82); }/* ============================================================
   MOBILE PERFORMANCE (<=768px)
   On small viewports under Lighthouse-mobile CPU throttling, paint
   and non-composited animation are the dominant TBT cost. Trim them
   here; desktop keeps the full glass + motion experience.
   ============================================================ */
@media (max-width: 768px) {
  /* Lighter glass: one cheap blur instead of per-element 18-30px radii
     (blur radius drives backdrop-filter paint cost). Routes through the
     existing --chrome-blur control var. */
  :root { --chrome-blur: saturate(140%) blur(7px); }

  /* Static warm-orange gradient headline: drop the infinite
     background-position repaint (non-compositable; 15 .grad elements). */
  .grad { animation: none; background-position: 0% 50%; }

  /* Pause perpetual diagram animations (non-composited stroke-dashoffset /
     offset-path / breathe). Diagrams still render, just hold still. */
  .sovereignty-svg .lane path,
  .team-svg .team-lines path,
  .flywheel-svg .fly-flow,
  .sovereignty-svg .packet,
  .team-svg .small { animation: none !important; }
}@media (max-width:900px){ .uc-crosslink{ margin:40px auto; } }/* ===== W13 (#34): use-cases route-tile .tile-arrow as a prominent glass-box button =====
   Appended last so it wins over the earlier .tile-arrow (abs-positioned, line ~3603)
   and the later .uc-route-tile .tile-arrow block (~3696) at equal/greater specificity.
   The tile is already display:flex (column); margin-top:auto pins this to the bottom,
   and the gap/border-top guarantee clear separation from the <p> above it. */
.uc-route-tile .tile-arrow{
  position:static;
  align-self:flex-start;
  margin-top:auto;            /* push to bottom of the flex tile */
  margin-bottom:0;
  /* clear separation from the paragraph above */
  margin-top:max(28px, auto);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  min-height:48px;
  padding:13px 20px;
  border-radius:16px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1;
  color:var(--ink);
  /* glassmorphism */
  background:var(--glass-bg);
  border:1px solid var(--glass-bd);
  -webkit-backdrop-filter:var(--chrome-blur, saturate(160%) blur(14px));
  backdrop-filter:var(--chrome-blur, saturate(160%) blur(14px));
  box-shadow:0 10px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .22s var(--easing, ease), border-color .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
}
/* give a visible top border-edge of breathing room so it reads as a distinct gated box,
   independent of how tall the paragraph is */
.uc-route-tile{ row-gap:24px; }
.tile-arrow b{ font-weight:700; color:var(--orange); transition:color .22s ease, transform .22s var(--easing, ease); display:inline-block; }
/* lit-up hover: orange glow + border + subtle lift (override the old solid-orange fill hover) */
.uc-route-tile:hover .tile-arrow,
.uc-route-tile:focus-visible .tile-arrow{
  background:color-mix(in srgb, var(--orange) 16%, var(--glass-bg));
  border-color:var(--orange);
  color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 16px 44px rgba(255,79,0,.30), 0 0 0 1px color-mix(in srgb, var(--orange) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.20);
}
.uc-route-tile:hover .tile-arrow b,
.uc-route-tile:focus-visible .tile-arrow b{ color:var(--orange); transform:translateX(3px); }
/* keyboard focus ring on the tile link itself */
.uc-route-tile:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

/* Drawer base positioning. Hidden + non-interactive until .nav.open. */
.nav-drawer{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--chrome-blur, saturate(180%) blur(24px));
  -webkit-backdrop-filter: var(--chrome-blur, saturate(180%) blur(24px));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  padding: 10px 16px 16px;
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s var(--easing, ease), opacity 0.2s ease, visibility 0s linear 0.28s;
  z-index: 99;
}
.nav.open .nav-drawer{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.28s var(--easing, ease), opacity 0.2s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce){
  .nav-drawer, .nav.open .nav-drawer{ transition: opacity 0.2s ease, visibility 0s; transform: none; }
}/* Show the mobile bar: hide the inline link rail, reveal the toggle */
@media (max-width: 768px), (pointer: coarse){
  .nav-inner{
    flex-wrap: nowrap;
    height: 68px;
    padding: 0 16px;
    column-gap: 12px;
  }
  .nav-list{ display: none !important; }
  .nav-actions{ gap: 10px; }
  .nav-toggle{ display: inline-flex !important; }

  /* International Orange (#FF4F00 / var(--orange)) hamburger -> X */
  .nav-toggle{
    border-color: color-mix(in srgb, var(--orange) 45%, var(--glass-bd));
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{ background: var(--orange); }
  .nav.open .nav-toggle span{ background: transparent; }

  /* Drawer is available at the compact breakpoint; these keep the approved
     mobile-sized one-line bar rules authoritative on phones/coarse pointers. */
  .nav-drawer{ display: block; }
}/* ============================================================
   W7 (#28)  LIQUID SUN / ORB  (lab port, namespaced lq-)
   Self-hosted fonts only (--display/--sf). Lab vars mapped to
   site tokens, scoped under .lq so e-ink + light/dark all work.
   Every infinite animation is gated OFF at <=768px and under
   prefers-reduced-motion to protect Lighthouse-mobile 100.
   ============================================================ */
.lq{
  /* lab token -> site token map (scoped, no globals touched) */
  --lq-accent: var(--orange);
  --lq-accent2: var(--orange-2);
  --lq-ring: var(--glass-bd);
  --lq-tether: color-mix(in srgb, var(--orange) 40%, transparent);
  --lq-glass-bg: var(--glass-bg);
  --lq-glass-stroke: var(--glass-bd);
  --lq-ink: var(--ink);
  --lq-muted: var(--ink-2);
}

/* ---- shared SVG primitives (hero + sun) ---- */
.lq-art{ width:100%; height:auto; display:block; overflow:visible; }
.lq-art text{ font-family:var(--sf); }
.lq-orbtext, .lq-art .lq-t{ font-family:var(--display); }

.lq-art .lq-ringline{ fill:none; stroke:var(--lq-ring); stroke-width:1.5; }
.lq-art .lq-comet{ fill:none; stroke:var(--lq-accent2); stroke-width:3; stroke-linecap:round; filter:url(#lqGlowSoft); }
.lq-art .lq-orb{ fill:url(#lqOrbGrad); filter:url(#lqGlowStrong); }
.lq-art .lq-radiance{ fill:url(#lqRadGrad); }
.lq-art .lq-halo{ fill:none; stroke:var(--lq-accent2); stroke-width:1.5; opacity:0; }
.lq-art .lq-orbtext{ fill:#fff; font-weight:800; text-anchor:middle; dominant-baseline:central; }
.lq-art .lq-orbsub{ fill:rgba(255,255,255,.92); font-weight:600; text-anchor:middle; }

.lq-art .lq-gp rect{ fill:var(--lq-glass-bg); stroke:var(--lq-glass-stroke); stroke-width:1; }
.lq-art .lq-gp .lq-t{ fill:var(--lq-ink); font-weight:700; text-anchor:middle; dominant-baseline:central; }
.lq-art .lq-gp .lq-s{ fill:var(--lq-muted); text-anchor:middle; dominant-baseline:central; }
.lq-art .lq-edgeglow{ fill:none; stroke:var(--lq-accent2); stroke-width:1; opacity:0; }

.lq-art .lq-teth{ stroke:var(--lq-tether); stroke-width:1; stroke-dasharray:2 6; }
.lq-art .lq-bead{ stroke:var(--lq-accent2); stroke-width:4; stroke-linecap:round; stroke-dasharray:6 240; }

/* ---- infinite animations (desktop / motion-ok only) ---- */
.lq-art .lq-radiance{ animation:lq-radiate 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.lq-art .lq-breathe{ animation:lq-breathe 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.lq-art .lq-halo{ animation:lq-halo 4s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.lq-art .lq-bead{ animation:lq-flow 4s linear infinite; }
.lq-art .lq-mote{ animation:lq-absorb 7s ease-in infinite; transform-box:fill-box; transform-origin:center; }
.lq-art .lq-edgeglow{ animation:lq-edgepulse 6s ease-in-out infinite; }

@keyframes lq-radiate{ 0%,100%{ opacity:.55; transform:scale(.78); } 50%{ opacity:1; transform:scale(1.18); } }
@keyframes lq-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@keyframes lq-halo{ 0%{ transform:scale(.7); opacity:.55; } 80%,100%{ transform:scale(1.5); opacity:0; } }
@keyframes lq-spin{ to{ transform:rotate(360deg); } }
@keyframes lq-flow{ to{ stroke-dashoffset:-610; } }
@keyframes lq-absorb{ 0%{ transform:translate(var(--tx,0),var(--ty,0)) scale(1); opacity:1; } 70%{ opacity:1; } 100%{ transform:translate(0,0) scale(.4); opacity:0; } }
@keyframes lq-edgepulse{ 0%,100%{ opacity:0; } 50%{ opacity:.9; } }

/* the comet uses an inline animation:lq-spin via style attr; nothing else needed */

/* ---- hero art layout ---- */
.lq-hero-art{ position:relative; z-index:2; width:100%; max-width:760px; margin:46px auto 0; pointer-events:none; }
.lq-hero-art .lq-art{ overflow:visible; }

/* ---- "What it does" Sun section layout ---- */
.lq-what{ text-align:center; }
.lq-what .lq-head{ max-width:640px; margin:0 auto 38px; }
.lq-what .lq-head p{ color:var(--ink-2); font-size:18px; line-height:1.7; margin-top:14px; }
.lq-sun-wrap{ width:100%; max-width:812px; margin:0 auto; }
/* +10% sizing lives on the inner SVG, NOT the .lq-sun-wrap (.reveal) wrapper -
   the reveal animation sets transform:translateY(0) which would override a scale
   on the same element. Visual-only -> no horizontal scroll; the SVG's internal
   padding keeps the nodes inside the viewport. Desktop (>=961px) bumps to 1.31. */
.lq-sun-wrap .lq-art{ transform:scale(1.1); transform-origin:center center; }/* e-ink: animations enabled in crisp monochrome ink (no glow filters) */
/* Consolidated into new e-ink animation block below (lines ~4320+) for cleaner scoping and color conversion to pure ink. */

/* ---- PERF GATE: disable all infinite motion on small screens ---- */
@media (max-width: 768px){
  .lq-art .lq-radiance,
  .lq-art .lq-breathe,
  .lq-art .lq-halo,
  .lq-art .lq-bead,
  .lq-art .lq-mote,
  .lq-art .lq-comet,
  .lq-art .lq-edgeglow{ animation:none !important; }
  .lq-art .lq-halo{ opacity:0; }
  .lq-hero-art{ margin-top:34px; max-width:560px; }
}

/* ---- PERF GATE: respect reduced motion everywhere ---- */
@media (prefers-reduced-motion: reduce){
  .lq-art .lq-radiance,
  .lq-art .lq-breathe,
  .lq-art .lq-halo,
  .lq-art .lq-bead,
  .lq-art .lq-mote,
  .lq-art .lq-comet,
  .lq-art .lq-edgeglow{ animation:none !important; }
  .lq-art .lq-halo{ opacity:0; }
}.lq-dp-svg .lq-dp-link{ fill:none; stroke:var(--glass-bd); stroke-width:2; }
.lq-dp-svg .lq-dp-link.flow{ stroke:color-mix(in srgb, var(--orange) 46%, transparent); stroke-width:2.5; stroke-dasharray:2 12; stroke-linecap:round; }
.lq-dp-svg .lq-dp-node{ fill:color-mix(in srgb, var(--surface) 76%, transparent); stroke:var(--glass-bd); stroke-width:1.5; }
.lq-dp-svg .lq-dp-core{ fill:color-mix(in srgb, var(--orange) 16%, transparent); stroke:color-mix(in srgb, var(--orange) 60%, transparent); stroke-width:2; }
.lq-dp-svg .lq-dp-bead{ fill:var(--orange); }
.lq-dp-svg .lq-dp-glyph{ stroke:var(--orange); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.lq-dp-svg .lq-dp-glyph.muted{ stroke:var(--ink-2); }
.lq-dp-svg .lq-dp-ring{ fill:none; stroke:color-mix(in srgb, var(--orange) 28%, transparent); stroke-width:1.5; }
.lq-dp-svg .lq-dp-tag{ fill:var(--ink); font-family:var(--sf-sans); font-weight:900; font-size:21px; letter-spacing:-.03em; }
.lq-dp-svg .lq-dp-sub{ fill:var(--ink-2); font-weight:700; font-size:14px; letter-spacing:0; }
.lq-dp-svg .lq-dp-cap{ fill:var(--ink-2); font-weight:700; font-size:18px; letter-spacing:0; }
.lq-dp-svg .lq-dp-pill{ fill:color-mix(in srgb, var(--surface) 88%, transparent); stroke:color-mix(in srgb, var(--orange) 40%, var(--glass-bd)); stroke-width:1.5; }
.lq-dp-svg .lq-dp-pilltxt{ fill:var(--orange); font-family:var(--sf-sans); font-weight:900; font-size:15px; letter-spacing:.02em; }
/* travelling beads: dash march along the two tethers (self-contained keyframe,
   name is dp-scoped so it cannot collide with W7's lq-flow) */
.lq-dp-svg .lq-dp-link.flow{ animation:lqDpMarch 3.6s linear infinite; }
.lq-dp-svg .lq-dp-link.flow.rev{ animation-direction:reverse; animation-duration:4.2s; }
.lq-dp-svg .lq-dp-bead.b1{ animation:lqDpBead 3.6s ease-in-out infinite; }
.lq-dp-svg .lq-dp-bead.b2{ animation:lqDpBead 4.2s ease-in-out infinite reverse; }
.lq-dp-svg .lq-dp-bead.b3{ animation:lqDpBead 4.0s ease-in-out .6s infinite; }
.lq-dp-svg .lq-dp-core{ transform-box:fill-box; transform-origin:center; animation:lqDpBreathe 5s ease-in-out infinite; }
.lq-dp-svg .lq-dp-ring{ transform-box:fill-box; transform-origin:center; animation:lqDpPulse 5s ease-in-out infinite; }
@keyframes lqDpMarch{ to{ stroke-dashoffset:-140; } }
@keyframes lqDpBead{ 0%{ offset-distance:6%; } 100%{ offset-distance:94%; } }
@keyframes lqDpBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
@keyframes lqDpPulse{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.12); opacity:.18; } }
/* perf gate - match site rule: no infinite animation on mobile (protect LH-100) */
@media (max-width:768px){
  .lq-dp-svg .lq-dp-link.flow,
  .lq-dp-svg .lq-dp-bead,
  .lq-dp-svg .lq-dp-core,
  .lq-dp-svg .lq-dp-ring{ animation:none !important; }
  .lq-dp-svg .lq-dp-bead{ offset-distance:50%; }
}
@media (prefers-reduced-motion: reduce){
  .lq-dp-svg .lq-dp-link.flow,
  .lq-dp-svg .lq-dp-bead,
  .lq-dp-svg .lq-dp-core,
  .lq-dp-svg .lq-dp-ring{ animation:none !important; }
  .lq-dp-svg .lq-dp-bead{ offset-distance:50%; }
}/* The brand "1-in-a-circle" mark on the Agent card: keep the numeral solid-weight
   so it reads clearly at small size while the rest of the set stays hairline. */
.uc-grid .uc-card.c1 .uc-emoji svg .heyone-mark-1{ stroke-width:2; }


/* ===== W5 (#26): careers value-box icons + alignment ===== */
#why .uc-grid.cols-3 .uc-card{ display:flex; flex-direction:column; }
.uc-card-ico{ width:30px; height:30px; color:var(--orange); margin-bottom:16px; display:block; }/* W10b (#31): multiple vernacular anchors compact + wrap */
.arc-word{ line-height:1.5; }
.arc-word .hi{ font-size:15px; margin-left:6px; white-space:nowrap; }

/* W4 (#25): takeaway page on-theme controls + form polish */
.demo-tag{ font:600 11px/1 var(--sf-mono, monospace); letter-spacing:.09em; text-transform:uppercase; color:var(--orange); padding:7px 13px; border:1px solid var(--glass-bd); border-radius:999px; background:var(--glass-bg); }
.theme{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; border:1px solid var(--glass-bd); background:var(--glass-bg); }
.theme button{ width:32px; height:32px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); cursor:pointer; font-size:15px; line-height:1; }
.theme button[aria-pressed="true"]{ background:var(--orange); color:#fff; }
.sw{ width:26px; height:26px; border-radius:999px; border:2px solid var(--glass-bd); cursor:pointer; padding:0; }
.sw[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--orange); transform:scale(1.06); }
.gate-form input{ width:100%; font:400 16px var(--sf); padding:13px 15px; border-radius:14px; border:1px solid var(--glass-bd); background:var(--glass-bg); color:var(--ink); }
.gate-form input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent); }/* USE-CASES disclaimer + sensitive glow + multi-anchor */
/* Disclaimer footer section - glassmorphism block */
.disclaimer-section{
  margin-top:48px; padding:20px 24px 28px; border-radius:24px;
  background:linear-gradient(150deg, var(--glass-strong), var(--glass-bg) 65%));
  border:1px solid var(--glass-bd);
  backdrop-filter:var(--chrome-blur, blur(20px) saturate(150%));
  -webkit-backdrop-filter:var(--chrome-blur, blur(20px) saturate(150%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.12);
  max-width:1180px; margin-left:auto; margin-right:auto;
}
.disclaimer-section .eyebrow{
  display:block; font-size:13px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.disclaimer-section p{
  font-size:15px; line-height:1.6; color:var(--ink-2);
}/* sensitive-card glow removed per request (HITL stays in modal) */
/* Multi-anchor language styling - compact wrap for 4 anchors */
.arc-word .hi{
  display:inline-block; font-weight:500; color:var(--orange); font-size:18px;
  margin-left:8px; white-space:normal; word-break:break-word;
}
@media (max-width:768px){
  .arc-word .hi{ font-size:16px; margin-left:6px; }
}@media (max-width:480px){
  .arc-word{ font-size:18px; }
  .arc-word .hi{ font-size:14px; margin-left:4px; }
}/* Frosty surface: opaque-readable glass for floating UI.
   Same family as the mobile nav chrome, but with a solid base so text never
   sits directly on page content. First use: story share popup. */
:root{
  --frosty-blur:saturate(180%) blur(24px);
  --frosty-bg:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025)), radial-gradient(120% 90% at 12% -12%, rgba(255,79,0,.22), rgba(255,79,0,0) 62%), linear-gradient(180deg, #1a100b 0%, #0d0806 100%);
  --frosty-fab-bg:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025)), color-mix(in srgb, var(--bg-3) 88%, var(--orange) 12%);
  --frosty-border:color-mix(in srgb, var(--orange) 38%, rgba(255,255,255,.18));
  --frosty-shadow:0 24px 70px rgba(0,0,0,.48), 0 8px 24px rgba(255,79,0,.10), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.35);
  --frosty-row-hover:color-mix(in srgb, var(--orange) 16%, rgba(255,255,255,.06));
  --frosty-title:rgba(255,255,255,.70);
}
[data-theme="light"]{
  --frosty-bg:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,244,.95)), radial-gradient(120% 90% at 12% -12%, rgba(255,79,0,.11), rgba(255,79,0,0) 62%), #fff9f5;
  --frosty-fab-bg:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,242,.93));
  --frosty-border:color-mix(in srgb, var(--orange) 28%, rgba(0,0,0,.12));
  --frosty-shadow:0 20px 58px rgba(30,15,5,.16), 0 8px 22px rgba(255,79,0,.08), inset 0 1px 0 rgba(255,255,255,.92);
  --frosty-row-hover:color-mix(in srgb, var(--orange) 11%, rgba(0,0,0,.035));
  --frosty-title:var(--muted);
}
[data-theme="eink"]{
  --frosty-bg:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,238,226,.96)), var(--bg-2);
  --frosty-fab-bg:var(--bg-2);
  --frosty-border:var(--line-2);
  --frosty-shadow:0 18px 45px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.85);
  --frosty-row-hover:var(--bg-3);
  --frosty-title:var(--muted);
}
.arc-share-dock{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:360;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  pointer-events:none;
}
.arc-share-fab{
  pointer-events:auto;
  width:44px; height:44px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink);
  background:var(--frosty-fab-bg);
  border:1px solid var(--frosty-border);
  box-shadow:0 16px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:var(--chrome-blur, var(--frosty-blur));
  -webkit-backdrop-filter:var(--chrome-blur, var(--frosty-blur));
  cursor:pointer;
  transition:transform .2s var(--easing), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.arc-share-fab:hover,.arc-share-fab:focus-visible,.arc-share-fab[aria-expanded="true"]{
  transform:translateY(-2px);
  border-color:var(--orange);
  box-shadow:0 18px 48px rgba(0,0,0,.30), 0 0 0 1px rgba(255,79,0,.16), inset 0 1px 0 rgba(255,255,255,.20);
  outline:none;
}
.arc-share-panel{
  pointer-events:auto;
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  width:min(244px, calc(100vw - 44px));
  padding:10px;
  border-radius:18px;
  background:var(--frosty-bg);
  border:1px solid var(--frosty-border);
  box-shadow:var(--frosty-shadow);
  backdrop-filter:var(--chrome-blur, var(--frosty-blur));
  -webkit-backdrop-filter:var(--chrome-blur, var(--frosty-blur));
  overflow:hidden;
  color:var(--ink);
}
.arc-share-panel[hidden]{ display:none; }
.arc-share-title{
  margin:2px 4px 8px;
  color:var(--frosty-title);
  font:700 11px/1 var(--sf-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.arc-share-row{
  width:100%;
  display:flex;
  align-items:center;
  min-height:38px;
  padding:9px 11px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  font:800 14px/1.2 var(--sf-sans, var(--sf));
  cursor:pointer;
  text-align:left;
}
.arc-share-row:hover,.arc-share-row:focus-visible{
  background:var(--frosty-row-hover);
  color:var(--ink);
  outline:none;
}
.arc-share-status{
  min-height:16px;
  margin:7px 4px 0;
  color:var(--orange);
  font-size:12px;
  line-height:1.3;
}/* CP2 E-ink theme animation redo: en */
/* REMOVED: Problematic universal rule removed. Animations now properly scoped to specific e-ink elements to prevent flicker. */

/* Consolidated e-ink animations now handled by new comprehensive block above. */

/* CP2 TAKEAWAY PAGE REWORK: integrat */
/* ===== TAKEAWAY PAGE LIQUID-GLASS INTEGRATION ===== */
.takeaway-page {
  background: var(--bg);
  color: var(--ink);
}

.takeaway-page .hero {
  margin: 28px 0 8px;
  max-width: 70ch;
}

.takeaway-page .eyebrow {
  display: block;
  font-family: var(--sf-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.takeaway-page h1 {
  font-family: var(--sf);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ink);
}

.takeaway-page h1 em {
  font-style: italic;
  color: var(--orange);
}

.takeaway-page .lede {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 68ch;
  margin: 0 0 16px;
}

/* Privacy line: subtle, no green dot */
.takeaway-page .privacy-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.takeaway-page .privacy-line::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 4px;
}

/* ===== GATE SECTION ===== */
.takeaway-page .takeaway-gate {
  margin-top: 48px;
  padding: 32px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-m);
  backdrop-filter: var(--chrome-blur, blur(20px) saturate(160%));
  -webkit-backdrop-filter: var(--chrome-blur, blur(20px) saturate(160%));
}

.takeaway-page .gate-copy h2 {
  font-family: var(--sf);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  margin: 8px 0 12px;
  color: var(--ink);
}

.takeaway-page .gate-copy .eyebrow {
  margin-bottom: 8px;
}

.takeaway-page .gate-copy p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 60ch;
  margin: 12px 0 0;
}

/* Gate form styling */
.takeaway-page .gate-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}

.takeaway-page .gate-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.takeaway-page .gate-form input {
  padding: 10px 14px;
  font-size: 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.takeaway-page .gate-form input::placeholder {
  color: var(--muted);
}

.takeaway-page .gate-form input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-color: var(--orange);
}

.takeaway-page .gate-form .btn {
  align-self: flex-start;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.takeaway-page .gate-form .btn:hover {
  background: var(--orange-2);
  transform: translateY(-1px);
}

.takeaway-page .gate-form .btn:active {
  transform: translateY(0);
}

.takeaway-page .gate-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  min-height: 20px;
}

/* Demo section when unlocked */
.takeaway-page .takeaway-demo {
  margin-top: 48px;
}

.takeaway-page .stage {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .takeaway-page .stage {
    grid-template-columns: 1fr;
  }
}.takeaway-page .panel {
  padding: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-m);
  backdrop-filter: var(--chrome-blur, blur(12px));
  -webkit-backdrop-filter: var(--chrome-blur, blur(12px));
}

.takeaway-page .panel h3 {
  font-family: var(--sf-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
  font-weight: 600;
}

/* Drawing canvas */
.takeaway-page .draw-host {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-2);
  cursor: crosshair;
}

.takeaway-page #pad {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.takeaway-page .draw-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 18px;
  pointer-events: none;
  font-family: var(--sf);
}

.takeaway-page .tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.takeaway-page .swatches {
  display: flex;
  gap: 8px;
}

.takeaway-page .sw {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--line);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.takeaway-page .sw:hover {
  transform: scale(1.08);
}

.takeaway-page .sw[aria-pressed="true"] {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}

.takeaway-page .tools .btn {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.takeaway-page .tools .btn:hover {
  background: var(--bg-3);
  border-color: var(--orange);
}

.takeaway-page .tip {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
}

/* Graph visualization */
.takeaway-page .graph-host {
  width: 100%;
  aspect-ratio: 1.55 / 1;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.takeaway-page #graph {
  display: block;
  width: 100%;
  height: 100%;
}

/* Verdict section */
.takeaway-page .verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
}

.takeaway-page .big {
  font-family: var(--sf);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
  min-width: 60px;
  text-align: center;
}

.takeaway-page .vtext {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}

.takeaway-page .vtext b {
  color: var(--orange);
  font-weight: 700;
}

.takeaway-page .vsure {
  font-family: var(--sf-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.takeaway-page .human {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 10px;
  font-style: italic;
  min-height: 20px;
  line-height: 1.5;
}

/* Details/explain section */
.takeaway-page details.explain {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 10px;
}

.takeaway-page details.explain summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 2px 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.takeaway-page details.explain summary::-webkit-details-marker {
  display: none;
}

.takeaway-page details.explain summary::before {
  content: '+';
  font-family: var(--sf-mono);
  color: var(--orange);
  font-weight: 700;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.takeaway-page details.explain[open] summary::before {
  content: '-';
}

.takeaway-page details.explain .body {
  padding: 12px 0 0 24px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.takeaway-page details.explain .body p {
  margin: 0 0 10px;
}

.takeaway-page details.explain .body p:last-child {
  margin-bottom: 0;
}

.takeaway-page details.explain .body b {
  color: var(--ink);
  font-weight: 600;
}

/* Footer CTA */
.takeaway-page footer.cta {
  margin-top: 40px;
  padding: 28px 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: var(--radius-m);
  backdrop-filter: var(--chrome-blur, blur(12px));
  -webkit-backdrop-filter: var(--chrome-blur, blur(12px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.takeaway-page footer.cta .ct-h {
  font-family: var(--sf);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  max-width: 40ch;
}

.takeaway-page footer.cta .ct-h em {
  color: var(--orange);
  font-style: italic;
}

.takeaway-page footer.cta p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 50ch;
  margin: 0;
}

.takeaway-page footer.cta a.go {
  background: var(--orange);
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  margin-inline: auto; /* centered when the CTA stacks (button on its own row); the auto margins override space-between. Reset to the right-aligned split once side-by-side (>=870px). */
}
@media (min-width: 870px) {
  .takeaway-page footer.cta a.go { margin-inline: 0; }
}

.takeaway-page footer.cta a.go:hover {
  background: var(--orange-2);
  transform: translateY(-1px);
}

.takeaway-page .fineprint {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 18px;
  font-family: var(--sf-mono);
  letter-spacing: 0.02em;
}

/* Theme-aware overrides for demo header */
.takeaway-page header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.takeaway-page .demo-tag {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.takeaway-page .theme {
  display: flex;
  gap: 4px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 999px;
  padding: 4px;
}

.takeaway-page .theme button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.takeaway-page .theme button[aria-pressed="true"] {
  background: var(--orange);
  color: #fff;
}


/* CP2 Add "Try local AI yourself" se */
.try-local-cta {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 12px;
  padding: clamp(40px, 5vw, 60px) clamp(24px, 5vw, 40px);
  text-align: center;
  backdrop-filter: var(--chrome-blur);
}

.try-local-cta h3 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.try-local-cta p {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.5;
  margin-bottom: 28px;
  opacity: 0.9;
}

.try-local-cta .actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .try-local-cta h3 {
    margin-bottom: 12px;
  }
  .try-local-cta p {
    margin-bottom: 20px;
    font-size: 16px;
  }
}/* CP2 Homepage edits: text changes ( */
.lq-what { display: flex; flex-direction: column; align-items: center; gap: 48px; } .lq-what-content { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; } .lq-what-left { text-align: left; } .lq-what-left .lq-head { text-align: left; margin: 0; } .lq-what-right { display: flex; justify-content: center; } @media (max-width: 960px) { .lq-what-content { grid-template-columns: 1fr; gap: 40px; } .lq-what-left { text-align: center; } .lq-what-left .lq-head { text-align: center; margin: 0 auto; } .lq-what-right { justify-content: center; } .lq-hero-art { max-width: 100%; } }.support-card .tag { background: rgba(255, 79, 0, 0.12); border: 1px solid rgba(255, 79, 0, 0.28); color: var(--orange); }.support-card::before { background: radial-gradient(circle, rgba(255, 79, 0, 0.10), transparent 60%); }

/* FIX: language anchors wrap inside the card box (no overflow) */
.arc-card .arc-word{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; max-width:100%; }
.arc-card .arc-word .hi{ display:inline-block; margin-left:0 !important; white-space:normal; font-size:13.5px; line-height:1.3; }

/* DESIGN lightmode */
[data-theme="light"] .lq-art .lq-orbsub {
  fill: var(--ink-2);
}

[data-theme="light"] .team-svg .node.main + text {
  fill: var(--ink);
}

[data-theme="light"] .team-svg .mini {
  fill: var(--ink);
}

[data-theme="light"] .sovereignty-svg .svg-logo text:first-of-type {
  fill: var(--ink);
}

[data-theme="light"] .uc-route-tile:hover .tile-arrow {
  color: var(--ink);
}

[data-theme="light"] .agent-fit-note a:hover {
  color: var(--ink) !important;
}/* PERFORMANCE GATES - mobile and reduced-motion respect */
/* DESIGN animpolish */
/* ============================================================
   ANIMATION POLISH: Premium Easings & Choreography
   Applied to lq- and lqDp- animation system
   Scope: dark + light themes, respects mobile/reduced-motion gate
   ============================================================ */

/* Hero Orb + Sun: Enhanced keyframe curves & timing */

@keyframes lq-radiate {
  0%, 100% { opacity: 0.52; transform: scale(0.76); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes lq-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.038); }
}

@keyframes lq-halo {
  0% { transform: scale(0.68); opacity: 0.54; }
  75% { transform: scale(1.42); opacity: 0.12; }
  100% { transform: scale(1.52); opacity: 0; }
}

@keyframes lq-absorb {
  0% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); opacity: 1; }
  68% { opacity: 1; }
  100% { transform: translate(0, 0) scale(0.38); opacity: 0; }
}

@keyframes lq-edgepulse {
  0%, 100% { opacity: 0; }
  45%, 55% { opacity: 0.88; }
}

@keyframes lq-flow {
  to { stroke-dashoffset: -610; }
}

/* Update animation assignments with refined easing & timing */
.lq-art .lq-radiance {
  animation: lq-radiate 3.4s cubic-bezier(0.34, 0.26, 0.32, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.lq-art .lq-breathe {
  animation: lq-breathe 4.2s cubic-bezier(0.38, 0.22, 0.38, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.lq-art .lq-halo {
  animation: lq-halo 4.4s cubic-bezier(0.28, 0.12, 0.54, 0.98) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.lq-art .lq-bead {
  animation: lq-flow 4.2s linear infinite;
}

.lq-art .lq-mote {
  animation: lq-absorb 7.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.lq-art .lq-edgeglow {
  animation: lq-edgepulse 6.2s cubic-bezier(0.32, 0.08, 0.32, 1) infinite;
}

/* Trust data-path: enhanced beads + breathing core + pulsing ring */
.lq-dp-svg .lq-dp-link.flow {
  animation: lqDpMarch 3.8s linear infinite;
}

.lq-dp-svg .lq-dp-link.flow.rev {
  animation-direction: reverse;
  animation-duration: 4.4s;
}

.lq-dp-svg .lq-dp-bead.b1 {
  animation: lqDpBead 3.8s cubic-bezier(0.34, 0.12, 0.34, 1) infinite;
}

.lq-dp-svg .lq-dp-bead.b2 {
  animation: lqDpBead 4.4s cubic-bezier(0.34, 0.12, 0.34, 1) infinite reverse;
}

.lq-dp-svg .lq-dp-bead.b3 {
  animation: lqDpBead 4.1s cubic-bezier(0.34, 0.12, 0.34, 1) 0.6s infinite;
}

.lq-dp-svg .lq-dp-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: lqDpBreathe 5.2s cubic-bezier(0.38, 0.22, 0.38, 1) infinite;
}

.lq-dp-svg .lq-dp-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: lqDpPulse 5.4s cubic-bezier(0.32, 0.08, 0.32, 1) infinite;
}

/* Enhanced data-path keyframes */
@keyframes lqDpMarch {
  to { stroke-dashoffset: -140; }
}

@keyframes lqDpBead {
  0% { offset-distance: 6%; }
  100% { offset-distance: 94%; }
}

@keyframes lqDpBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.042); }
}

@keyframes lqDpPulse {
  0%, 100% { transform: scale(1); opacity: 0.53; }
  50% { transform: scale(1.11); opacity: 0.16; }
}/* Mobile perf gate remains: disable all lq- animations at <=768px */
@media (max-width: 768px) {
  .lq-art .lq-radiance,
  .lq-art .lq-breathe,
  .lq-art .lq-halo,
  .lq-art .lq-bead,
  .lq-art .lq-mote,
  .lq-art .lq-comet,
  .lq-art .lq-edgeglow {
    animation: none !important;
  }
  .lq-art .lq-halo { opacity: 0; }
  .lq-dp-svg .lq-dp-link.flow,
  .lq-dp-svg .lq-dp-bead,
  .lq-dp-svg .lq-dp-core,
  .lq-dp-svg .lq-dp-ring {
    animation: none !important;
  }
  .lq-dp-svg .lq-dp-bead { offset-distance: 50%; }
}

/* Reduced motion gate remains: respect user preferences everywhere */
@media (prefers-reduced-motion: reduce) {
  .lq-art .lq-radiance,
  .lq-art .lq-breathe,
  .lq-art .lq-halo,
  .lq-art .lq-bead,
  .lq-art .lq-mote,
  .lq-art .lq-comet,
  .lq-art .lq-edgeglow {
    animation: none !important;
  }
  .lq-art .lq-halo { opacity: 0; }
  .lq-dp-svg .lq-dp-link.flow,
  .lq-dp-svg .lq-dp-bead,
  .lq-dp-svg .lq-dp-core,
  .lq-dp-svg .lq-dp-ring {
    animation: none !important;
  }
  .lq-dp-svg .lq-dp-bead { offset-distance: 50%; }
}

/* Trust data-path: cleaned diagram surface + theme-safe circles */
#data-path .svg-stage{
  background:linear-gradient(145deg, color-mix(in srgb, var(--bg) 88%, var(--orange) 4%), color-mix(in srgb, var(--bg-2) 92%, transparent));
}
#data-path .brand-svg .svg-bg{
  fill:color-mix(in srgb, var(--bg) 90%, var(--orange) 3%);
  stroke:color-mix(in srgb, var(--orange) 18%, var(--glass-bd));
}
#data-path .lq-dp-svg .lq-dp-node{
  fill:color-mix(in srgb, var(--bg) 88%, var(--orange) 4%);
  stroke:color-mix(in srgb, var(--orange) 26%, var(--glass-bd));
  stroke-width:1.7;
}
#data-path .lq-dp-svg .lq-dp-glyph.muted{ stroke:color-mix(in srgb, var(--ink) 72%, transparent); }
[data-theme="light"] #data-path .svg-stage{
  background:linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,247,242,.74));
}
[data-theme="light"] #data-path .brand-svg .svg-bg{ fill:rgba(255,255,255,.86); stroke:rgba(0,0,0,.06); }
[data-theme="light"] #data-path .lq-dp-svg .lq-dp-node{ fill:rgba(255,255,255,.88); stroke:rgba(255,79,0,.30); }
[data-theme="dark"] #data-path .lq-dp-svg .lq-dp-node{ fill:rgba(255,79,0,.045); stroke:rgba(255,79,0,.34); }
/* Trust data-path: protective shield enclosing User + 1 (1 stands between you and the open web). Theme-adaptive for dark and light. */
.lq-dp-svg .lq-dp-shield{ fill:color-mix(in srgb, var(--orange) 6%, transparent); stroke:color-mix(in srgb, var(--orange) 44%, transparent); stroke-width:2; stroke-dasharray:6 9; stroke-linecap:round; }
.lq-dp-svg .lq-dp-shieldtag{ fill:color-mix(in srgb, var(--orange) 76%, var(--ink)); font-family:var(--sf-sans); font-weight:800; font-size:15px; letter-spacing:.02em; }
[data-theme="dark"] #data-path .lq-dp-svg .lq-dp-shield{ fill:rgba(255,79,0,.05); stroke:rgba(255,79,0,.42); }
[data-theme="light"] #data-path .lq-dp-svg .lq-dp-shield{ fill:rgba(255,79,0,.055); stroke:rgba(255,79,0,.36); }
/* B2/B3: operating-strip labels bold + International Orange */
.operating-strip > span > b{ font-weight:700; color:var(--orange); }/* B6: scroll cue in International Orange, catchier */
.scroll-cue{ color:var(--orange); letter-spacing:0.22em; }/* B7: eyebrows in International Orange (small text, more readable/catchy) */
.eyebrow{ color:var(--orange); }[data-theme="light"] .eyebrow{ color:var(--orange-deep, #C2410C); }

/* What-it-does: stacked/vertical on mobile, side-by-side on desktop
   (text column left, agent-orbit right). Supersedes the earlier B5 centering. */
.lq-what{ display:grid; grid-template-columns:1fr; gap:40px; justify-items:center; align-items:center; max-width:1180px; margin-inline:auto; }
.lq-what .lq-head{ margin:0; }
.lq-what .lq-head .eyebrow{ justify-content:center; }
@media (min-width:961px){
  .lq-what{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(40px,5vw,84px); justify-items:stretch; text-align:left; }
  .lq-what .lq-head{ max-width:none; text-align:left; }
  .lq-what .lq-head .eyebrow{ justify-content:flex-start; }
  .lq-what .lq-head .h-section{ font-size:clamp(40px,4.4vw,60px); }
  .lq-sun-wrap{ margin:0; max-width:707px; }
  .lq-sun-wrap .lq-art{ transform:scale(1.31); transform-origin:center center; }
}/* HP-design Homepage Tagline Rewrite */
.h-section .grad, .h-mega .grad { background: var(--orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: none; }[data-theme="light"] .lq-art .lq-orbsub {
  fill: var(--ink-2);
}/* ── Nav links: B&W bold (override global orange link rule) ─────────── */
.nav .nav-list a{ color:var(--ink) !important; font-weight:700; }
.nav .nav-list a:hover,
.nav .nav-list a.active{ color:var(--orange) !important; }
[data-theme="light"] .nav .nav-list a{ color:var(--ink) !important; }

/* ── Footer links: B&W instead of muted gray ───────────────────────── */
.foot-col a{ color:var(--ink-2) !important; }
.foot-col a:hover{ color:var(--orange) !important; }

/* Mobile nav: restore the old top-bar glass while keeping the drawer opaque.
   The previous fix tied `.nav` and `.nav-drawer` together; that fixed the menu
   but also changed the top bar. Keep their surfaces separate. */
:root,
[data-theme="dark"]{
  --heyone-nav-mobile-bar-bg:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)), radial-gradient(120% 150% at 10% -24%, rgba(255,79,0,.22), rgba(255,79,0,0) 64%), var(--glass-bg);
  --heyone-nav-mobile-bar-bd:var(--line);
  --heyone-nav-mobile-bar-shadow:0 4px 24px rgba(0,0,0,.18);
  --heyone-nav-mobile-drawer-solid:#1b0d0a;
  --heyone-nav-mobile-drawer-bg:linear-gradient(180deg, rgba(255,112,60,.14), rgba(255,79,0,.035) 42%, rgba(0,0,0,.16)), var(--heyone-nav-mobile-drawer-solid);
  --heyone-nav-mobile-drawer-bd:rgba(255,111,64,.22);
  --heyone-nav-mobile-drawer-shadow:0 12px 36px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="light"]{
  /* Light mobile topbar should match the desktop glass: clean white frost,
     not the peach drawer surface. Keep the opaque peach only for the menu. */
  --heyone-nav-mobile-bar-bg:var(--glass-bg);
  --heyone-nav-mobile-bar-bd:var(--line);
  --heyone-nav-mobile-bar-shadow:none;
  --heyone-nav-mobile-drawer-solid:#fff7f2;
  --heyone-nav-mobile-drawer-bg:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,246,241,.38)), radial-gradient(120% 150% at 8% -30%, rgba(255,79,0,.13), rgba(255,79,0,0) 62%), var(--heyone-nav-mobile-drawer-solid);
  --heyone-nav-mobile-drawer-bd:rgba(255,79,0,.15);
  --heyone-nav-mobile-drawer-shadow:0 10px 32px rgba(30,15,5,.10), inset 0 1px 0 rgba(255,255,255,.88);
}
[data-theme="eink"]{
  --heyone-nav-mobile-bar-bg:linear-gradient(180deg, rgba(255,251,243,.98), rgba(247,238,226,.96)), var(--bg-2);
  --heyone-nav-mobile-bar-bd:var(--line-2);
  --heyone-nav-mobile-bar-shadow:0 10px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.84);
  --heyone-nav-mobile-drawer-solid:#fbf4ea;
  --heyone-nav-mobile-drawer-bg:linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,238,226,.54)), var(--heyone-nav-mobile-drawer-solid);
  --heyone-nav-mobile-drawer-bd:var(--line-2);
  --heyone-nav-mobile-drawer-shadow:0 10px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.84);
}
@media (max-width:768px){
  .nav{
    position:fixed;
    left:0;
    right:0;
    background:var(--heyone-nav-mobile-bar-bg) !important;
    backdrop-filter:var(--chrome-blur, saturate(180%) blur(24px));
    -webkit-backdrop-filter:var(--chrome-blur, saturate(180%) blur(24px));
    border-bottom:1px solid var(--heyone-nav-mobile-bar-bd);
    box-shadow:var(--heyone-nav-mobile-bar-shadow);
  }
  .nav-drawer{
    background:var(--heyone-nav-mobile-drawer-bg) !important;
    background-color:var(--heyone-nav-mobile-drawer-solid) !important;
    backdrop-filter:var(--chrome-blur, saturate(180%) blur(24px));
    -webkit-backdrop-filter:var(--chrome-blur, saturate(180%) blur(24px));
    border-bottom:1px solid var(--heyone-nav-mobile-drawer-bd);
    box-shadow:var(--heyone-nav-mobile-drawer-shadow);
    padding:14px 28px 22px;
    max-height:calc(100dvh - 68px);
    overflow:auto;
  }
  .nav-drawer ul{ gap:8px; max-width:var(--max-w-wide); margin:0 auto; }
  .nav-drawer a{
    color:var(--ink) !important;
    font-weight:700;
    border:1px solid transparent;
    border-radius:var(--radius-pill);
    background:transparent !important;
  }
  .nav-drawer a:hover,
  .nav-drawer a.active,
  .nav-drawer a[aria-current="page"]{
    color:var(--orange) !important;
    background:linear-gradient(180deg, rgba(255,79,0,.16), rgba(255,79,0,.07)) !important;
    border-color:rgba(255,79,0,.24);
  }
  /* Hide Contact CTA on mobile - it lives in the drawer instead */
  .nav-cta{ display:none !important; }
  /* Body offset so content doesn't hide under the fixed bar */
  main#main{ padding-top:68px; }
  /* Hero: remove its legacy top-pad - main offset already covers the nav */
  .hero{ padding-top:16px !important; }
  /* Tighten vertical rhythm - sections and pillar have outsized mobile gaps */
  .pillar{ padding-top:clamp(60px,14vw,96px) !important; padding-bottom:clamp(60px,14vw,96px) !important; }
  .section{ padding-top:clamp(52px,13vw,80px) !important; padding-bottom:clamp(52px,13vw,80px) !important; }
  .section-tight{ padding-top:clamp(44px,11vw,68px) !important; padding-bottom:clamp(44px,11vw,68px) !important; }
  .lq-what{ gap:28px !important; }
}

/* ── Sun orbit: re-enable animations on mobile (perf-gate exception) ── */
@media (max-width:768px){
  .lq-sun-wrap .lq-art .lq-radiance{ animation:lq-radiate 3.2s ease-in-out infinite !important; transform-box:fill-box; transform-origin:center; }
  .lq-sun-wrap .lq-art .lq-breathe { animation:lq-breathe 4s ease-in-out infinite !important; transform-box:fill-box; transform-origin:center; }
  .lq-sun-wrap .lq-art .lq-halo    { animation:lq-halo 4s ease-out infinite !important; opacity:0; transform-box:fill-box; transform-origin:center; }
  .lq-sun-wrap .lq-art .lq-bead    { animation:lq-flow 4s linear infinite !important; }
  .lq-sun-wrap .lq-art .lq-comet   { animation:lq-spin 6s linear infinite !important; }
  .lq-sun-wrap .lq-art .lq-edgeglow{ animation:lq-edgepulse 6s ease-in-out infinite !important; }
}

/* ── Light mode Sun: visible ring/tethers/cards on white bg ────────── */
[data-theme="light"] .lq-sun-wrap{
  --lq-ring: rgba(0,0,0,0.28);
  --lq-tether: rgba(255,79,0,0.30);
  --lq-glass-bg: rgba(255,255,255,0.92);
  --lq-glass-stroke: rgba(0,0,0,0.22);
  --lq-ink: #1D1D1F;
  --lq-muted: rgba(0,0,0,0.55);
  --lq-accent2: var(--orange);
}
/* Ring and tethers: explicit stroke so they read on light page */
[data-theme="light"] .lq-art .lq-ringline{ stroke:rgba(0,0,0,0.28); stroke-width:1.5; }
[data-theme="light"] .lq-art .lq-teth{ stroke:rgba(255,79,0,0.28); stroke-dasharray:2 6; }
[data-theme="light"] .lq-art .lq-bead{ stroke:var(--orange); stroke-width:4; }
[data-theme="light"] .lq-art .lq-comet{ stroke:var(--orange); }
/* Cards: warm slightly-off-white fill so they stand out from the white page */
[data-theme="light"] .lq-art .lq-gp rect{ fill:rgba(30,15,5,0.07); stroke:rgba(0,0,0,0.22); stroke-width:1.2; }
[data-theme="light"] .lq-art .lq-gp .lq-t{ fill:#1D1D1F; }
[data-theme="light"] .lq-art .lq-gp .lq-s{ fill:rgba(0,0,0,0.55); }

/* AI Cafe local-brain article fixes: no demo mode selector, gray canvases, orange-only pen. */
#hero .local-brain-title .w{ display:block; }
#hero .local-brain-title{ margin-bottom:clamp(28px,5vw,54px); }
#hero .local-brain-deck{ max-width:min(650px, calc(100vw - 48px)); margin-left:auto; margin-right:auto; }
#hero .hero-actions,
#hero .actions,
#hero .btn{ display:none !important; }
.cafe-demo.takeaway-page{
  --brain-gray:#171717;
  --brain-gray-2:#202020;
  --brain-gray-3:#2a2a2a;
  --bg-2:var(--brain-gray);
  --bg-3:var(--brain-gray-2);
  --surface:var(--brain-gray-3);
  --line:#3f3f3f;
  --glass-bd:rgba(255,255,255,.13);
  --ink:#f3f3f3;
  --ink-2:#d4d4d4;
  --ink-faint:#b9b9b9;
  --muted:#b9b9b9;
}
.cafe-demo.takeaway-page header.top{ justify-content:flex-start; }
.cafe-demo.takeaway-page header.top .theme{ display:none !important; }
.cafe-demo.takeaway-page .draw-host,
.cafe-demo.takeaway-page .graph-host{ background:var(--brain-gray) !important; border-color:#3f3f3f; }
.cafe-demo.takeaway-page .tools{ justify-content:center; gap:18px; margin-top:20px; }
.cafe-demo.takeaway-page .swatches{ gap:0; }
.cafe-demo.takeaway-page .sw{ width:38px; height:38px; border-color:rgba(255,255,255,.26); box-shadow:0 0 0 2px rgba(255,79,0,.36); }
.cafe-demo.takeaway-page .sw[aria-pressed="true"]{ border-color:var(--orange); box-shadow:0 0 0 2px rgba(255,79,0,.42), 0 10px 26px rgba(255,79,0,.22); }
.cafe-demo.takeaway-page .tools .btn{ min-height:42px; padding:10px 22px; background:#101010; color:#fff; border-color:#4a2a1c; border-radius:14px; }
.cafe-demo.takeaway-page .tools .btn:hover{ background:#171717; border-color:var(--orange); }
.cafe-demo.takeaway-page .tip{ max-width:62ch; margin-left:auto; margin-right:auto; }
@media (max-width:640px){
  #hero .local-brain-deck{ max-width:min(560px, calc(100vw - 36px)); }
  .cafe-demo.takeaway-page .tools{ gap:14px; }
}


/* ============================================================
   CHAT SIMULATION (in-code WhatsApp-style agent demo)
   ============================================================ */
html.csim-lock{ overflow:hidden; }
.csim-overlay{
  position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(8,6,4,0.55); backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);
  opacity:0; transition:opacity .22s ease;
}
.csim-overlay.open{ opacity:1; }
.csim-overlay[hidden]{ display:none; }
.csim-shell{
  position:relative; width:min(366px,94vw); border-radius:26px; padding:14px 14px 16px;
  background:linear-gradient(160deg, var(--glass-strong), var(--glass-bg) 70%);
  border:1px solid var(--glass-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 36px 90px rgba(0,0,0,0.5);
  transform:translateY(14px) scale(.96); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.csim-overlay.open .csim-shell{ transform:none; opacity:1; }
.csim-close{
  position:absolute; top:-12px; right:-10px; z-index:6; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--glass-bd); background:var(--glass-strong); color:var(--ink); font-size:15px; cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.csim-close:hover{ color:var(--orange); }

/* the phone / WhatsApp skin - LIGHT defaults */
.csim-phone{
  --wa-wall:#ECE5DD; --wa-head:#F6F5F3; --wa-line:#D9D6CF; --wa-title:#0B141A; --wa-sub:#667781;
  --wa-inbg:#FFFFFF; --wa-intx:#111B21; --wa-outbg:#D9FDD3; --wa-outtx:#111B21; --wa-meta:#667781; --wa-read:#53BDEB;
  border-radius:18px; overflow:hidden; background:var(--wa-wall);
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
[data-theme="dark"] .csim-phone{
  --wa-wall:#0B141A; --wa-head:#1F2C34; --wa-line:#0c151b; --wa-title:#E9EDEF; --wa-sub:#8696A0;
  --wa-inbg:#1F2C34; --wa-intx:#E9EDEF; --wa-outbg:#005C4B; --wa-outtx:#E9EDEF; --wa-meta:#8696A0; --wa-read:#53BDEB;
}
/* Telegram skin (opt-in via .csim-tg) */
.csim-phone.csim-tg{ --wa-wall:#DCE6EE; --wa-head:#FFFFFF; --wa-line:#E1E6EA; --wa-title:#1C1C1E; --wa-sub:#8A9099; --wa-inbg:#FFFFFF; --wa-intx:#000000; --wa-outbg:#EFFDDE; --wa-outtx:#000000; --wa-meta:#A1AAB3; --wa-read:#4FAE4E; }
[data-theme="dark"] .csim-phone.csim-tg{ --wa-wall:#0E1621; --wa-head:#17212B; --wa-line:#0a1118; --wa-title:#FFFFFF; --wa-sub:#7D8E9E; --wa-inbg:#182533; --wa-intx:#FFFFFF; --wa-outbg:#2B5278; --wa-outtx:#FFFFFF; --wa-meta:#6D8095; --wa-read:#62A0D6; }
.csim-tg .csim-row.in .csim-bubble{ border-top-left-radius:9px; border-bottom-left-radius:3px; }
.csim-tg .csim-row.out .csim-bubble{ border-top-right-radius:9px; border-bottom-right-radius:3px; }
.csim-head{
  display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--wa-head);
  border-bottom:1px solid var(--wa-line);
}
.csim-av{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:16px;
}
.csim-metawrap{ display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1; }
.csim-name{ color:var(--wa-title); font-size:14px; font-weight:600; }
.csim-sub{ color:var(--wa-sub); font-size:11.5px; }
.csim-tag{ color:var(--wa-sub); font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.csim-body{
  height:430px; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:7px;
  background-color:var(--wa-wall);
  background-image:radial-gradient(circle at 20% 30%, rgba(127,110,80,0.05) 0, transparent 40%);
}
.csim-body::-webkit-scrollbar{ width:0; }
.csim-row{ display:flex; }
.csim-row.in{ justify-content:flex-start; }
.csim-row.out{ justify-content:flex-end; }
.csim-bubble{
  max-width:80%; padding:6px 9px 4px; border-radius:9px; font-size:14px; line-height:1.4; position:relative;
  box-shadow:0 1px 0.5px rgba(0,0,0,0.13); animation:csimPop .2s ease;
}
@keyframes csimPop{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.csim-row.in .csim-bubble{ background:var(--wa-inbg); color:var(--wa-intx); border-top-left-radius:3px; }
.csim-row.out .csim-bubble{ background:var(--wa-outbg); color:var(--wa-outtx); border-top-right-radius:3px; }
.csim-txt{ display:block; }
.csim-meta{ display:flex; align-items:center; gap:4px; justify-content:flex-end; margin-top:1px; }
.csim-time{ font-size:10px; color:var(--wa-meta); }
.csim-ticks{ font-size:10px; color:var(--wa-meta); letter-spacing:-1px; }
.csim-ticks.read{ color:var(--wa-read); }
.csim-typing{ padding:9px 12px; display:inline-flex; gap:4px; align-items:center; }
.csim-typing span{ width:6px; height:6px; border-radius:50%; background:var(--wa-meta); opacity:.5; animation:csimBlink 1.1s infinite; }
.csim-typing span:nth-child(2){ animation-delay:.18s; } .csim-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes csimBlink{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:.9; transform:translateY(-2px); } }
.csim-cap{ padding:13px 6px 2px; text-align:center; }
.csim-capline{ font-size:13px; line-height:1.5; color:var(--ink-2); margin:0 0 11px; }
.csim-cta{ display:inline-flex; }
@media (prefers-reduced-motion: reduce){ .csim-bubble,.csim-shell,.csim-overlay{ animation:none; transition:none; } }

/* tappable agent cards: live light + "Tap to see" */
.uc-card[data-chatsim]{ cursor:pointer; position:relative; }
.uc-card[data-chatsim]:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.uc-live{
  position:absolute; top:14px; right:16px; display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.uc-live-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,0.6); animation:ucPulse 2s infinite; }
@keyframes ucPulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.55); } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.uc-tap{
  display:block; text-align:center; margin-top:24px; font-size:15px; font-weight:700;
  letter-spacing:.05em; color:var(--orange);
}
.uc-tap .chev{ transition:transform .2s ease; display:inline-block; }
.uc-card[data-chatsim]:hover .uc-tap .chev{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){ .uc-live-dot{ animation:none; } }


/* ===== Essay figures (subtle glassmorphism SVG graphics) ===== */
.essay-figure{
  margin:30px auto; max-width:560px; padding:22px 24px 16px; border-radius:20px;
  background:linear-gradient(160deg, var(--glass-strong), var(--glass-bg) 72%);
  border:1px solid var(--glass-bd);
  backdrop-filter:var(--chrome-blur, blur(20px) saturate(150%));
  -webkit-backdrop-filter:var(--chrome-blur, blur(20px) saturate(150%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.12);
}
.essay-fig-svg{ width:100%; height:auto; display:block; color:var(--ink); }
.essay-fig-svg .axis{ stroke:currentColor; opacity:.13; stroke-width:1.5; }
.essay-fig-svg .bar{ fill:currentColor; opacity:.15; }
.essay-fig-svg .bar-hot{ fill:var(--orange); opacity:.92; }
.essay-fig-svg .curve{ fill:none; stroke:var(--orange); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.essay-fig-svg .node{ fill:currentColor; opacity:.32; }
.essay-fig-svg .flow{ stroke:currentColor; opacity:.2; stroke-width:1.5; fill:none; }
.essay-fig-svg .flow-hot{ stroke:var(--orange); opacity:.6; stroke-width:2; fill:none; }
.essay-fig-svg .dot{ fill:var(--orange); }
.essay-figure figcaption{ margin-top:14px; text-align:center; font-size:13px; line-height:1.5; color:var(--muted); }
@media (prefers-reduced-motion: no-preference){ .essay-fig-svg .curve, .essay-fig-svg .flow-hot{ stroke-dasharray:560; stroke-dashoffset:560; animation:figDraw 1.6s ease forwards; } }
@keyframes figDraw{ to{ stroke-dashoffset:0; } }

.b-telegram{ color:#26A5E4; }
.uc-card .uc-stat{ margin:12px 0 0; font-size:14px; line-height:1.45; color:var(--ink-2); }
.uc-card .uc-stat b{ color:var(--orange); font-weight:800; font-size:1.1em; }

/* ===== chat-sim rich media bubbles ===== */
.csim-bubble.csim-media{ padding:5px; }
.csim-imgtile{ width:206px; height:120px; border-radius:8px; display:grid; place-items:center; color:rgba(255,255,255,0.78); background:linear-gradient(135deg, var(--orange), #8f2d00 78%); }
.csim-imgtile svg{ width:30px; height:30px; opacity:.9; }
.csim-imgcap{ display:block; padding:5px 4px 0; font-size:13px; }
.csim-doccard{ display:flex; align-items:center; gap:9px; min-width:188px; padding:8px; border-radius:8px; background:rgba(0,0,0,0.06); }
[data-theme="dark"] .csim-doccard{ background:rgba(255,255,255,0.07); }
.csim-fico{ flex:0 0 auto; width:32px; height:36px; display:grid; place-items:center; color:var(--orange); }
.csim-fico svg{ width:26px; height:26px; }
.csim-fmeta{ display:flex; flex-direction:column; min-width:0; }
.csim-fmeta b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.csim-fmeta span{ font-size:10.5px; opacity:.7; text-transform:uppercase; letter-spacing:.03em; }
.csim-voice{ display:flex; align-items:center; gap:9px; min-width:178px; padding:3px 2px; }
.csim-play{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; }
.csim-play svg{ width:13px; height:13px; margin-left:1px; }
.csim-wave{ flex:1; height:24px; opacity:.5; }
.csim-wave rect{ fill:currentColor; }
.csim-vdur{ font-size:11px; opacity:.7; }
.csim-contact-card{ display:flex; align-items:center; gap:9px; min-width:180px; padding:4px 2px; }
.csim-cav{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,0.08); display:grid; place-items:center; color:var(--orange); }
[data-theme="dark"] .csim-cav{ background:rgba(255,255,255,0.09); }
.csim-cav svg{ width:21px; height:21px; }
.csim-cinfo{ display:flex; flex-direction:column; min-width:0; }
.csim-cinfo b{ font-size:13.5px; } .csim-cinfo span{ font-size:11.5px; opacity:.7; }
.csim-loc-card{ display:flex; flex-direction:column; width:206px; border-radius:8px; overflow:hidden; }
.csim-map{ height:84px; position:relative; display:grid; place-items:center; background-color:#33424d; background-image:linear-gradient(rgba(255,255,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.07) 1px,transparent 1px); background-size:17px 17px; }
.csim-pin{ color:var(--orange); } .csim-pin svg{ width:26px; height:26px; }
.csim-linfo{ padding:6px 5px 1px; display:flex; flex-direction:column; }
.csim-linfo b{ font-size:13px; } .csim-linfo span{ font-size:11px; opacity:.7; }

/* ===== Use Cases benefits / ROI ===== */
.benefit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; max-width:1180px; margin:0 auto; }
.benefit{ padding:24px; border-radius:18px; background:linear-gradient(160deg,var(--glass-strong),var(--glass-bg) 70%); border:1px solid var(--glass-bd); }
.benefit h3{ font-size:19px; line-height:1.25; margin:0 0 10px; font-weight:700; letter-spacing:-0.01em; }
.benefit .o{ color:var(--orange); }
.benefit p{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0; }
/* live badge must not overlap the (long) scope-tag on narrow cards */
.uc-card[data-chatsim] .scope-tag{ display:block; padding-right:72px; }