@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-v20-latin-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-v20-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-v20-latin-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-v20-latin-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-v20-latin-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-v20-latin-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-v20-latin-900.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-tight-v9-latin-300.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-tight-v9-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-tight-v9-latin-500.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-tight-v9-latin-600.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-tight-v9-latin-700.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-tight-v9-latin-800.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:900;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/inter-tight-v9-latin-900.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2')}
@font-face{font-family:'Shadows Into Light';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.talkherenow.com/ai/fonts/shadows-into-light-v22-latin-regular.woff2') format('woff2')}

/* ============================================================
   GLOBAL RESET + SHELL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #F2E8D6;
  color: #211608;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* ============================================================
   PAGE STYLES — Bento Premium
   ============================================================ */
.page {
  --paper: #F2E8D6;
  --tile: #ffffff;
  --tile-2: #EFE5D4;
  --ink: #211608;
  --ink-soft: #6E5C45;
  --line: rgba(0,0,0,0.06);
  --blue: #FF3B1F;
  --blue-soft: #FDEAE2;
  --pink: #FFB81C;
  --green: #C77A12;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -0.012em;
}
.nav {
  max-width: 1120px; margin: 0 auto;
  padding: 20px 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.logo {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 22px; letter-spacing: -0.04em;
  display: flex; align-items: center; gap: 8px;
}
.logo .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); display: inline-block;
}
/* Nav coin + wordmark — WebAR animation ported (light mode): steady glow behind, coin flip-in, sheen, wordmark cascade, eyebrow draw */
.nav-coin { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.nav-coin::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,184,28,.5), rgba(255,59,31,.22) 48%, transparent 72%);
  filter: blur(3px);
  animation: navGlowBreathe 3.6s ease-in-out infinite;
}
.nav-coin .ring {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%; padding: 2.5px;
  background: linear-gradient(135deg,#FF3B1F 0%,#FFB81C 50%,#FF3B1F 100%);
  transform-style: preserve-3d;
  animation: navCoinFlipIn 1s .1s cubic-bezier(.22,1,.36,1) both;
}
.nav-coin .inner {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative;
  background: linear-gradient(160deg,#FFFEFA 0%,#FBF5EA 55%,#F8EEDB 100%);
  display: flex; align-items: center; justify-content: center;
}
.nav-coin .inner span {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.5px;
  background: linear-gradient(135deg,#2A1810,#C77A12);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; z-index: 1;
}
.nav-coin .inner::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 33%, rgba(255,255,255,.7) 50%, transparent 67%);
  transform: translateX(-110%);
  animation: navCoinSheen 4.5s 1.2s ease-in-out infinite;
}
.nav-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: -.5px; color: var(--ink); line-height: 1; display: inline-flex;
}
.nav-wordmark .ch {
  display: inline-block; opacity: 0; transform: translateY(10px);
  animation: navChIn .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.45s + var(--i) * .04s);
}
.nav-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; color: #FF3B1F;
  letter-spacing: 2.5px; text-transform: uppercase; margin-top: 5px; line-height: 1;
  font-weight: 700; display: inline-block; padding-bottom: 4px; position: relative;
  opacity: 0; animation: navEbFade .5s .95s ease-out forwards;
}
.nav-eyebrow::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 1px;
  background: linear-gradient(135deg,#FF3B1F 0%,#FFB81C 100%);
  transform: scaleX(0); transform-origin: center;
  animation: navUlDraw .5s 1.15s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes navCoinFlipIn {
  0%   { opacity: 0; transform: perspective(400px) rotateY(-180deg) scale(.6); }
  55%  { opacity: 1; transform: perspective(400px) rotateY(-12deg) scale(1.06); }
  78%  { transform: perspective(400px) rotateY(6deg) scale(.99); }
  100% { transform: perspective(400px) rotateY(0deg) scale(1); }
}
@keyframes navGlowBreathe {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50%      { opacity: .9; transform: scale(1.06); }
}
@keyframes navCoinSheen {
  0%       { transform: translateX(-110%); }
  55%,100% { transform: translateX(110%); }
}
@keyframes navChIn { to { opacity: 1; transform: translateY(0); } }
@keyframes navEbFade { to { opacity: 1; } }
@keyframes navUlDraw { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .nav-coin::before, .nav-coin .ring, .nav-coin .inner::before { animation: none; }
  .nav-wordmark .ch { opacity: 1; transform: none; animation: none; }
  .nav-eyebrow { opacity: 1; animation: none; }
  .nav-eyebrow::after { transform: scaleX(1); animation: none; }
}
.menu {
  display: flex; gap: 0;
  background: var(--tile); padding: 12px 8px;
  border-radius: 999px; border: 1px solid var(--line);
}
.menu a {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  padding: 0 22px;
  position: relative;
  transition: color 0.15s;
}
.menu a + a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px;
  background: rgba(33,22,8,0.12);
}
.menu a:hover { color: var(--ink); }
.menu a.on { color: var(--ink); font-weight: 600; }
.nav-right { display: flex; justify-content: flex-end; gap: 10px; }
.nav-right .ghost {
  font-size: 14px; color: var(--ink-soft); padding: 8px 14px;
}
.nav-right .filled {
  font-size: 14px; color: #fff; background: var(--ink); padding: 9px 18px;
  border-radius: 999px; font-weight: 500;
  transition: transform 0.15s;
}
.nav-right .filled:hover { transform: translateY(-1px); }

/* bento */
.bento {
  max-width: 1120px; margin: 0 auto;
  padding: 24px 32px 56px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 14px;
}
.tile {
  background: var(--tile);
  border-radius: 28px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
  border: 1px solid var(--line);
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(33,22,8,0.08); }
.tile-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.tile-eyebrow .pip {
  width: 6px; height: 6px; background: var(--blue); border-radius: 50%;
}

/* Fix: -webkit-background-clip:text gradient accents lose their last glyph when a
   heading's negative letter-spacing makes the box narrower than the final letter's
   ink. Extend the box right so the gradient covers it; negative margin keeps layout. */
.accent { padding-right: 0.14em; margin-right: -0.14em; }

/* hero tile */
.tile-hero {
  grid-column: 1 / span 8; grid-row: 1;
  background: linear-gradient(135deg, #ffffff 0%, #F2E8D6 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 460px;
  padding: 44px;
}
.tile-hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  /* Fluid type: 48px at small desktop widths up to 88px on large screens.
     Prevents the hero from dominating short laptop viewports. */
  font-size: clamp(48px, 6.1vw, 72px);
  line-height: 0.95; letter-spacing: -0.045em;
  margin-bottom: 24px;
}
.tile-hero h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tile-hero .deck {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.5; color: var(--ink-soft);
  font-weight: 400; max-width: 580px;
}
.tile-hero .actions { display: flex; gap: 12px; margin-top: 28px; align-items: center; }
.tile-hero .actions .primary {
  background: var(--ink); color: #fff;
  padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-hero .actions .primary::after { content: '→'; transition: transform 0.2s; }
.tile-hero .actions .primary:hover::after { transform: translateX(3px); }
.tile-hero .actions .secondary {
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 13px 22px; border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  transition: all 0.15s;
}
.tile-hero .actions .secondary:hover {
  background: var(--ink); color: #fff;
}
/* Tertiary — same pill shape as secondary, but in a softer color
   so it reads as a less-prominent button without losing the button form. */
.tile-hero .actions .tertiary {
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  padding: 13px 22px; border-radius: 999px;
  border: 1.5px solid var(--ink-soft);
  background: transparent;
  transition: all 0.15s;
}
.tile-hero .actions .tertiary:hover {
  border-color: var(--ink); color: var(--ink);
}
.tile-hero .marker {
  /* Always sits above the headline (was previously absolute-positioned top-right
     at wide viewports, which made it appear inconsistently next to the headline). */
  align-self: flex-start;
  margin-bottom: 16px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue);
  padding: 6px 12px; border-radius: 999px; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-hero .marker::before {
  content: ''; width: 6px; height: 6px; background: var(--blue);
  border-radius: 50%; animation: switchPulse 1.6s ease infinite;
}

/* QR tile (tall) */
.tile-qr {
  grid-column: 9 / span 4; grid-row: 1;
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column;
  padding: 28px 24px;
  position: relative;
}
.tile-qr::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,59,31,0.4) 0%, transparent 50%);
  pointer-events: none;
}
.tile-qr .qr-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.tile-qr .qr-eyebrow::before {
  content: ''; width: 6px; height: 6px; background: var(--green);
  border-radius: 50%; box-shadow: 0 0 10px var(--green);
}
.tile-qr h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 32px; line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.tile-qr .qr-frame {
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  margin: 18px 0 0;
  position: relative; z-index: 1;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.tile-qr .qr-frame img { width: 100%; }
.tile-qr .qr-meta {
  margin-top: auto;
  padding-top: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  position: relative; z-index: 1;
}
.tile-qr .qr-meta .item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 12px;
}
.tile-qr .qr-meta .lbl {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 2px;
}
.tile-qr .qr-meta .val {
  font-size: 13px; font-weight: 600;
}

/* phone mockup tile */
.tile-phone {
  grid-column: 6 / span 7; grid-row: 2;
  /* Dark fallback color visible only during the brief window before the image decodes */
  background-color: #1F1812;
  /* Inpainted room background, behind the phone, creates an "AR see-through" illusion */
  background-image:
    /* corner vignettes for text legibility — subtle, keep middle of image clean */
    radial-gradient(ellipse 50% 30% at 0% 0%, rgba(0,0,0,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 0% 100%, rgba(0,0,0,0.55) 0%, transparent 70%),
    url('/media/outpaint.webp');
  background-size: auto, auto, cover;
  background-position: top left, bottom left, center calc(50% - 12px);
  background-repeat: no-repeat;
  color: #fff;
  min-height: 280px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 51px;
  position: relative;
  /* 3D perspective for the phone tilt-up animation */
  perspective: 900px;
  perspective-origin: center 60%;
}
.tile-phone .phone {
  width: 175px; height: 322px;
  border-radius: 32px;
  background: transparent;
  /* Modern iPhone Pro bezel built entirely with stacked box-shadows.
     Solid 3px border for the metal rail base color (respects border-radius).
     Inset shadows add: chamfer highlight, screen mask, top/bottom shading.
     Outset shadows add: outer rim darkening + grounding drop shadows. */
  border: 3px solid #1A140C;
  box-shadow:
    /* === INSIDE — listed first paints on top === */
    /* 1. Glossy specular highlight — sharp 0.5px bright ring just inside the metal frame.
          This is the polished chamfer that makes phones look premium */
    inset 0 0 0 0.5px rgba(255,255,255,0.25),
    /* 2. Top-edge brightener — adds subtle lit feeling along the top of the chamfer */
    inset 0 1.5px 0 rgba(255,255,255,0.08),
    /* 3. Black screen mask — 2px dark ring inside the chamfer, simulates the
          black border around the OLED panel. Together with the metal border,
          the visible "bezel" reads as ~5px wide which matches a real iPhone */
    inset 0 0 0 2.5px #0A0703,
    /* 4. Bottom-edge darkener — subtle shadow along the bottom of the screen mask */
    inset 0 -1px 0 rgba(0,0,0,0.5),

    /* === OUTSIDE — outer first, painted underneath === */
    /* 5. Top-edge specular on the metal rail — a thin bright line where light
          catches the polished top edge */
    0 -0.5px 0 rgba(255,255,255,0.15),
    /* 6. Outer rim — subtle darkening just outside the frame, suggests the
          metal curving toward the back of the phone */
    0 0 0 1px rgba(0,0,0,0.6),
    /* 7. Tight ambient grounding shadow */
    0 4px 14px rgba(0,0,0,0.35),
    /* 8. Wide soft drop shadow */
    0 24px 50px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  /* Tilt-up animation: phone rotates from 45° down to vertical.
     Phone background stays transparent throughout — once the video reveals,
     it covers the screen area, so we never need a solid black phone bg. */
  transform-origin: center bottom;
  animation: phoneTiltUp 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes phoneTiltUp {
  from { transform: rotateX(45deg) translateY(20px); }
  to   { transform: rotateX(0deg)  translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
  .tile-phone .phone {
    animation: none;
    background: #000;
  }
}
.tile-phone .preview-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tile-phone .preview-video.visible {
  display: block;
}
.tile-phone .preview-video.lit {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tile-phone .preview-video {
    display: block;
    opacity: 1;
    transition: none;
  }
}
.tile-phone .phone::before {
  /* Dynamic Island-style camera cutout: floating pill, pure black, sits over the screen */
  content: ''; position: absolute;
  top: 11px; left: 50%; transform: translateX(-50%);
  width: 57px; height: 18px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
  /* subtle inner edge to suggest depth */
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.05),
    0 1px 2px rgba(0,0,0,0.5);
}
.tile-phone .phone::after {
  /* front-camera lens with a glassy highlight */
  content: ''; position: absolute;
  top: 16px; left: 50%; transform: translate(13px, 0);
  width: 8px; height: 8px;
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  /* radial gradient: dark center, slightly-lighter rim, bright spec highlight upper-left */
  background:
    radial-gradient(circle at 32% 28%, rgba(190,210,240,0.85) 0%, rgba(190,210,240,0) 28%),
    radial-gradient(circle at 50% 50%, #2A1F12 0%, #100A05 70%, #0A0703 100%);
  box-shadow:
    inset 0 0 0 0.5px rgba(180,200,230,0.45),
    0 0 2px rgba(150,110,70,0.5);
}
.tile-phone .phone .scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 70%, rgba(255,59,31,0.5) 0%, transparent 50%),
    linear-gradient(180deg, #221A10 0%, #261A12 100%);
}
.tile-phone .phone .figure {
  position: absolute;
  bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 110px;
  background: linear-gradient(180deg, #FF3B1F 0%, #3E2410 100%);
  border-radius: 30px 30px 24px 24px;
  filter: drop-shadow(0 10px 20px rgba(255,184,28,0.45));
  animation: float 4s ease infinite;
}
.tile-phone .phone .figure::after {
  content: '';
  position: absolute;
  top: -22px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px;
  background: #ffd1c0;
  border-radius: 50%;
}
@keyframes float {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
.tile-phone .phone .ui {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 28px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
  display: grid; place-items: center;
}
.tile-phone .phone .ui::before {
  content: ''; width: 12px; height: 12px;
  background: var(--green); border-radius: 50%; box-shadow: 0 0 8px var(--green);
  animation: switchPulse 1.4s ease infinite;
}
.tile-phone .label {
  position: absolute; top: 22px; left: 22px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
  /* frosted-glass pill backing */
  background: rgba(33,22,8,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 12px 6px 11px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.tile-phone .label::before {
  content: ''; width: 6px; height: 6px;
  background: var(--green); border-radius: 50%;
  box-shadow: 0 0 6px rgba(199,122,18,0.7);
  flex-shrink: 0;
}
.tile-phone .corner-tag {
  position: absolute; bottom: 14px; left: 20px;
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 18px; color: #fff; line-height: 1.1;
  letter-spacing: -0.02em;
  /* frosted-glass card backing — same material as the PREVIEW pill */
  background: rgba(33,22,8,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  max-width: 320px;
  white-space: nowrap;
}
.tile-phone .corner-tag span {
  display: block; font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.5); margin-top: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* no-app tile */
.tile-noapp {
  grid-column: 1 / span 5; grid-row: 2;
  background: linear-gradient(135deg, var(--blue-soft), #fff);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px;
}
.tile-noapp .nw-voice { display: flex; align-items: center; gap: 4px; height: 78px; flex-shrink: 0; }
.tile-noapp .nw-voice i { flex: 1; height: 78px; border-radius: 999px; background: linear-gradient(180deg, var(--blue), var(--pink)); opacity: .55; transform: scaleY(.2); transform-origin: center; animation: nwVoice 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.07s); }
@keyframes nwVoice { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .tile-noapp .nw-voice i { animation: none; transform: scaleY(.55); } }
.tile-noapp h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(22px, 2.1vw, 25px); line-height: 1.12; letter-spacing: -0.035em;
  color: var(--ink); margin-bottom: 10px;
}
.tile-noapp .tile-eyebrow { margin-bottom: 18px; }
.tile-noapp h3 .phone-em {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tile-noapp p strong {
  font-weight: 600; color: var(--ink);
  background: rgba(255,59,31,0.08);
  padding: 1px 6px; border-radius: 4px;
}
.tile-noapp p {
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.6;
}
.tile-noapp p.closing {
  /* Distinct closing sentiment — bigger, Inter Tight italic, full ink color.
     Bookends the opening h3 with a softer, reflective beat. */
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

/* privacy tile */
.tile-privacy {
  grid-column: 1 / span 8; grid-row: 4;
  background: var(--tile);
  padding: 36px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center;
}
.tile-privacy h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 36px; line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.tile-privacy p {
  font-size: 15px; color: var(--ink-soft); line-height: 1.55;
}
.tile-privacy .specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tile-privacy .specs .spec {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px;
}
.tile-privacy .specs .lbl {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px;
}
.tile-privacy .specs .val {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: -0.02em;
}

/* browser tile */
.tile-browser {
  grid-column: 9 / span 4; grid-row: 3;
  background: var(--tile);
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 240px;
}
.tile-browser h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 26px; letter-spacing: -0.025em; line-height: 1.05;
  margin-bottom: 8px;
}
.tile-browser p {
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.tile-browser .device-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 20px;
}
.tile-browser .device {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all 0.2s ease;
}
.tile-browser .device:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}
.tile-browser .device .ico {
  width: 28px; height: 38px;
  border-radius: 5px;
  position: relative;
  flex-shrink: 0;
}
/* iPhone — silver/light gradient */
.tile-browser .device:nth-child(1) .ico {
  background: linear-gradient(180deg, #F4ECDC 0%, #DAD0C0 100%);
  border: 1px solid #C9BCA8;
}
.tile-browser .device:nth-child(1) .ico::before {
  content: ''; position: absolute;
  top: 3px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 3px;
  background: #1F1812; border-radius: 0 0 4px 4px;
}
/* Android — green-tinted */
.tile-browser .device:nth-child(2) .ico {
  background: linear-gradient(180deg, #1F1812 0%, #100A05 100%);
  border: 1px solid #251D14;
}
.tile-browser .device:nth-child(2) .ico::before {
  content: ''; position: absolute;
  top: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: #C77A12;
  box-shadow: 0 0 4px rgba(199,122,18,0.6);
}
/* Tablet — wider, blue accent */
.tile-browser .device:nth-child(3) .ico {
  width: 40px; height: 32px;
  background: linear-gradient(180deg, #211608 0%, #1F1812 100%);
  border: 1px solid #251D14;
  border-radius: 4px;
}
.tile-browser .device:nth-child(3) .ico::before {
  content: ''; position: absolute;
  top: 50%; right: 3px; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 4px rgba(255,59,31,0.6);
}
.tile-browser .device .name {
  font-size: 12px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
}

/* moments section */
.moments {
  max-width: 1120px; margin: 0 auto;
  padding: 32px 32px 80px;
}
.moments-h {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 56px; line-height: 1; letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.moments-sub {
  font-size: 18px; color: var(--ink-soft); margin-bottom: 48px;
}
.moments-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.moment {
  background: var(--tile); border: 1px solid var(--line);
  border-radius: 24px; padding: 32px;
  transition: all 0.3s;
}
.moment:hover { transform: translateY(-4px); }
.moment .step {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--blue);
  letter-spacing: 0.02em; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.moment .step::before {
  content: ''; width: 24px; height: 1px; background: var(--blue); display: inline-block;
}
.moment h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 26px; line-height: 1.1; letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.moment p {
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}

/* footer */
.foot {
  background: var(--ink); color: #fff;
  padding: 64px 32px 32px;
  border-radius: 32px 32px 0 0;
}
.foot-inner { max-width: 1120px; margin: 0 auto; }
.foot-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.foot-logo {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 28px; letter-spacing: -0.04em; margin-bottom: 10px;
}
.foot-blurb { font-size: 13px; opacity: 0.6; line-height: 1.55; max-width: 280px; }
.foot h4 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.5; margin-bottom: 14px;
}
.foot ul li {
  font-size: 13px; margin-bottom: 8px;
}
.foot ul li a {
  color: inherit; opacity: 0.78; transition: opacity 0.2s;
  cursor: pointer;
}
.foot ul li a:hover { opacity: 1; }
.foot-bot {
  padding-top: 22px;
  display: flex; justify-content: space-between;
  font-size: 12px; opacity: 0.4;
}



/* SPA page sections ------------------------------------------ */
.page-section { display: none; }
.page-section.active { display: block; }

/* nav active state ------------------------------------------- */
.menu .nav-link { position: relative; }
.menu .nav-link.active { color: var(--ink); font-weight: 600; }

/* stub-page tiles — built on the same .bento + .tile primitives as home,
   so the page never shifts between navigations ----------------------- */

/* Title tile takes 8 columns, like the home hero tile, so its left edge
   aligns perfectly with the hero's left edge on the home page. */
.tile-stub-title {
  grid-column: 1 / span 8;
  grid-row: 1 / span 1;
  min-height: 320px;
  background: linear-gradient(135deg, #ffffff 0%, #F2E8D6 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px;  /* same as .tile-hero on the home page */
}
.tile-stub-title h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 60px; line-height: 1.0; letter-spacing: -0.04em;
  margin-top: 16px;
  margin-bottom: 16px;
}
.tile-stub-title h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tile-stub-title .deck {
  font-size: 18px; line-height: 1.5; color: var(--ink-soft);
  font-weight: 400; max-width: 620px;
}
.tile-stub-title .marker {
  align-self: flex-start;  /* sits above the H1, never overlaps */
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue);
  padding: 6px 12px; border-radius: 999px;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-stub-title .marker::before {
  content: ''; width: 6px; height: 6px; background: #FFB81C;
  border-radius: 50%; box-shadow: 0 0 8px rgba(255,184,28,0.6);
}

/* Side tile (dark) — span 4, 1 row, sits next to the title tile */
.tile-stub-aside {
  grid-column: 9 / span 4;
  grid-row: 1 / span 1;
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  position: relative; overflow: hidden;
}
.tile-stub-aside::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255,59,31,0.4) 0%, transparent 55%);
  pointer-events: none;
}
.tile-stub-aside .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.tile-stub-aside .lbl::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #FFB81C; box-shadow: 0 0 10px rgba(255,184,28,0.7);
}
.tile-stub-aside h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.025em;
  position: relative; z-index: 1;
}
.tile-stub-aside p {
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.75);
  position: relative; z-index: 1;
}

/* Body tile — span 8, second row, holds the placeholder content rows */
.tile-stub-body {
  grid-column: 1 / span 8;
  grid-row: 2 / span 1;
  padding: 36px 44px;
}
.tile-stub-body .row {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 24px; padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.tile-stub-body .row:first-child { padding-top: 4px; }
.tile-stub-body .row:last-child { border-bottom: 0; padding-bottom: 4px; }
.tile-stub-body .row .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tile-stub-body .row .skel {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--paper) 0%, #ECE2D1 50%, var(--paper) 100%);
  animation: stubShimmer 2.4s ease-in-out infinite;
}
.tile-stub-body .row .skel.short { width: 68%; }
.tile-stub-body .row .skel.med   { width: 84%; }
.tile-stub-body .row .skel.long  { width: 100%; }
@keyframes stubShimmer {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.5; }
}

/* Back-to-home tile — span 4, second row */
.tile-stub-back {
  grid-column: 9 / span 4;
  grid-row: 2 / span 1;
  background: var(--blue-soft);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
}
.tile-stub-back .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-stub-back .lbl::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.tile-stub-back h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.025em;
}
.tile-stub-back .home-link {
  align-self: flex-start;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.15s;
}
.tile-stub-back .home-link::after { content: '→'; transition: transform 0.2s; }
.tile-stub-back .home-link:hover { transform: translateY(-1px); }
.tile-stub-back .home-link:hover::after { transform: translateX(3px); }

/* What's New — changelog (full-width tile holding the release entries) */
.tile-changelog { grid-column: 1 / -1; padding: 40px 44px; }
.tile-changelog .cl-title { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.tile-changelog .cl-title h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(34px, 4.5vw, 46px); line-height: 1.0; letter-spacing: -0.035em; margin-bottom: 14px;
}
.tile-changelog .cl-title h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tile-changelog .cl-title .deck { font-size: 17px; line-height: 1.5; color: var(--ink-soft); font-weight: 400; max-width: 640px; }
.tile-changelog .cl-head .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.tile-changelog .cl-head .lbl::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink); box-shadow: 0 0 8px rgba(255,184,28,0.6);
}
.release { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 30px 0; border-top: 1px solid var(--line); }
.release:first-of-type { border-top: 0; padding-top: 18px; }
@media (max-width: 720px) { .release { grid-template-columns: 1fr; gap: 16px; } }
.rel-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rel-ver {
  font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
  color: #3D2400; background: linear-gradient(135deg,#FFE38A,#FFB81C 45%,#C9831A);
  padding: 6px 14px; border-radius: 999px;
}
.rel-pill { font-size: 11px; font-weight: 700; background: var(--blue-soft); color: var(--blue); padding: 4px 11px; border-radius: 999px; }
.rel-date { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.rel-body h3 { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 18px; }
.feat-list { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.feat { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
.feat-kind { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 7px; text-align: center; margin-top: 1px; }
.feat-kind.new { background: var(--blue-soft); color: var(--blue); }
.feat-kind.improved { background: rgba(255,184,28,0.18); color: var(--green); }
.feat-kind.fixed { background: rgba(0,0,0,0.05); color: var(--ink-soft); }
.feat-text b { font-weight: 700; font-size: 15px; color: var(--ink); display: block; margin-bottom: 2px; }
.feat-text p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.cl-foot { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cl-foot .home-link {
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px; transition: transform 0.15s;
}
.cl-foot .home-link::after { content: '→'; transition: transform 0.2s; }
.cl-foot .home-link:hover { transform: translateY(-1px); }
.cl-foot .home-link:hover::after { transform: translateX(3px); }
.cl-foot .note { font-size: 12.5px; color: var(--ink-soft); }

/* vibe tile (replaces old privacy tile) -------------------- */
.tile-vibe {
  grid-column: 1 / span 8; grid-row: 3;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,59,31,0.06) 0%, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255,184,28,0.05) 0%, transparent 40%),
    var(--tile);
  padding: 36px;
  display: flex; flex-direction: column; gap: 24px;
}
.tile-vibe h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 0; max-width: 580px;
}
.tile-vibe .vibe-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: auto;
}
.tile-vibe .chip {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  transition: all 0.2s ease;
  cursor: default;
}
.tile-vibe .chip:hover {
  background: var(--ink); color: #fff;
  border-color: var(--ink);
  transform: translateY(-2px);
}
.tile-noapp .phone-hint {
  margin-top: 18px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.tile-noapp .phone-frame {
  width: 76px; height: 132px;
  background: linear-gradient(180deg, #1F1812 0%, #100A05 100%);
  border-radius: 12px;
  padding: 5px;
  position: relative;
  flex-shrink: 0;
  transform: rotate(-4deg);
  box-shadow:
    0 8px 22px rgba(33,22,8,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 0.3s ease;
}
.tile-noapp .phone-frame:hover {
  transform: rotate(-2deg) translateY(-2px);
}
.tile-noapp .phone-notch {
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px;
  background: #000; border-radius: 0 0 3px 3px;
  z-index: 2;
}
.tile-noapp .phone-screen {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #F2E8D6 0%, #EBE1D0 100%);
  border-radius: 8px;
  padding: 12px 4px 4px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.tile-noapp .phone-bar {
  background: #fff;
  border-radius: 999px;
  padding: 4px 7px;
  display: flex; align-items: center; gap: 4px;
  font-size: 7px; font-weight: 500;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  box-shadow: 0 1px 0 rgba(33,22,8,0.06);
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
.tile-noapp .phone-bar .phone-globe {
  font-size: 7px; opacity: 0.6;
  flex-shrink: 0;
}
.tile-noapp .phone-bar .phone-url {
  letter-spacing: -0.02em;
  font-size: 7px;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.tile-noapp .tablet-frame {
  width: 124px; height: 88px;
  background: linear-gradient(180deg, #1F1812 0%, #100A05 100%);
  border-radius: 10px;
  padding: 6px 6px 6px 14px;
  position: relative;
  flex-shrink: 0;
  transform: rotate(4deg);
  box-shadow:
    0 8px 22px rgba(33,22,8,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 0.3s ease;
}
.tile-noapp .tablet-frame:hover {
  transform: rotate(2deg) translateY(-2px);
}
.tile-noapp .tablet-cam {
  position: absolute;
  left: 5px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px;
  background: #000; border-radius: 50%;
  z-index: 2;
}
.tile-noapp .tablet-screen {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #F2E8D6 0%, #EBE1D0 100%);
  border-radius: 6px;
  padding: 6px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* trust & safety page ---------------------------------------- */


/* prose body — single column, readable width */


/* table of contents */

/* rule cards (the 10 "designed not to do") */
.doc-rules {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 14px 0;
}
.doc-rule {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}
.doc-rule:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}
.doc-rule .num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 14px;
  color: var(--blue);
  letter-spacing: 0.04em;
  display: block; margin-bottom: 12px;
}
.doc-rule h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: 10px;
}
.doc-rule p {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* crisis callout */
.doc-crisis {
  background: linear-gradient(135deg, #fff8e6 0%, #ffeed0 100%);
  border: 1px solid #FFD282;
  border-radius: 22px;
  padding: 32px;
  margin: 18px 0;
}
.doc-crisis-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.doc-crisis-head .icon {
  font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: #FFB81C;
  border-radius: 50%;
  flex-shrink: 0;
}
.doc-crisis-head h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.doc-crisis > p {
  font-size: 14px; line-height: 1.55;
  color: var(--ink); margin: 0 0 16px 0;
}
.doc-crisis-table {
  width: 100%;
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13px;
}
.doc-crisis-table th {
  text-align: left;
  padding: 12px 16px;
  background: rgba(255,255,255,0.5);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
  border-bottom: 1px solid #FFD282;
}
.doc-crisis-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,210,130,0.4);
  vertical-align: top;
  line-height: 1.5;
}
.doc-crisis-table tr:last-child td { border-bottom: 0; }
.doc-crisis-table td strong {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; letter-spacing: -0.01em;
}
.doc-crisis-table a {
  color: #C77A12;
  border-bottom: 1px solid rgba(196,123,0,0.3);
}
.doc-crisis-table a:hover { border-bottom-color: #C77A12; }

/* report CTA box */
.doc-report-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 20px;
  padding: 32px;
  margin: 18px 0 8px 0;
  position: relative; overflow: hidden;
}
.doc-report-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255,184,28,0.3) 0%, transparent 50%);
  pointer-events: none;
}
.doc-report-cta h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.doc-report-cta p {
  font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.doc-report-cta .email-link {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink);
  padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  border-bottom: none;
  transition: transform 0.15s;
  position: relative; z-index: 1;
}
.doc-report-cta .email-link:hover {
  transform: translateY(-1px);
  border-bottom: none;
}
.doc-report-cta .email-link::before { content: '✉'; }

/* version footer */

/* back link tile at bottom */

/* about page ------------------------------------------------- */

/* hero title tile (mirrors .tile-stub-title geometry) */
.tile-about-title {
  grid-column: 1 / span 8; grid-row: 1;
  background: linear-gradient(135deg, #ffffff 0%, #F2E8D6 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px;
  min-height: 320px;
}
.tile-about-title .marker {
  align-self: flex-start;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue);
  padding: 6px 12px; border-radius: 999px;
  letter-spacing: -0.01em;
}
.tile-about-title h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 60px; line-height: 1.0; letter-spacing: -0.04em;
  margin-top: 16px; margin-bottom: 16px;
}
.tile-about-title h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tile-about-title .deck {
  font-size: 18px; line-height: 1.5; color: var(--ink-soft);
  font-weight: 400; max-width: 620px;
}

/* dark pull-quote aside */
.tile-about-promise {
  grid-column: 9 / span 4; grid-row: 1;
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  position: relative; overflow: hidden;
}
.tile-about-promise::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,59,31,0.4) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(255,184,28,0.25) 0%, transparent 55%);
  pointer-events: none;
}
.tile-about-promise .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.tile-about-promise .lbl::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 10px rgba(255,59,31,0.7);
}
.tile-about-promise .quote {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 26px;
  line-height: 1.1; letter-spacing: -0.025em;
  position: relative; z-index: 1;
  margin: 12px 0;
}
.tile-about-promise .quote .em {
  background: linear-gradient(90deg, #FF6E3D, #FFB347);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tile-about-promise .footnote {
  font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,0.55);
  position: relative; z-index: 1;
}

/* full-width prose tile (used for "The technology" and "Privacy and safety") */
.tile-about-prose {
  grid-column: 1 / span 12;
  background: var(--tile);
  padding: 44px 56px;
}
.tile-about-prose .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-about-prose .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-about-prose h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 36px; line-height: 1.05; letter-spacing: -0.035em;
  margin-bottom: 18px;
}
.tile-about-prose .body {
  max-width: 760px;
}
.tile-about-prose .body p {
  font-size: 15px; line-height: 1.65; color: var(--ink);
  margin-bottom: 14px;
}
.tile-about-prose .body p:last-child { margin-bottom: 0; }
.tile-about-prose .body strong { font-weight: 600; }
.tile-about-prose .body a {
  color: var(--blue); font-weight: 500;
  border-bottom: 1px solid rgba(255,59,31,0.3);
  transition: border-color 0.15s;
}
.tile-about-prose .body a:hover { border-bottom-color: var(--blue); }

/* nested "what is / isn't" + "18+" row */
.tile-about-isnt {
  grid-column: 1 / span 8;
  background: var(--tile);
  padding: 44px 48px;
}
.tile-about-isnt .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-about-isnt .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
}
.tile-about-isnt h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 32px; line-height: 1.05; letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.tile-about-isnt p {
  font-size: 15px; line-height: 1.65; color: var(--ink);
  margin-bottom: 14px;
  max-width: 720px;
}
.tile-about-isnt p:last-child { margin-bottom: 0; }
.tile-about-isnt p strong { font-weight: 600; }

.tile-about-age {
  grid-column: 9 / span 4;
  background: linear-gradient(135deg, var(--blue-soft) 0%, #FCEFE0 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  position: relative; overflow: hidden;
}
.tile-about-age::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,59,31,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.tile-about-age .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
  position: relative; z-index: 1;
}
.tile-about-age .number {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 96px; line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--blue);
  margin: 12px 0 14px;
  position: relative; z-index: 1;
}
.tile-about-age .number .plus {
  font-size: 64px; vertical-align: top; margin-left: -4px;
}
.tile-about-age p {
  font-size: 13px; line-height: 1.55; color: var(--ink);
  position: relative; z-index: 1;
  margin: 0;
}

/* company + reach us row */
.tile-about-company {
  grid-column: 1 / span 4;
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  position: relative; overflow: hidden;
}
.tile-about-company::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 100%, rgba(255,59,31,0.3) 0%, transparent 55%);
  pointer-events: none;
}
.tile-about-company .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  position: relative; z-index: 1;
}
.tile-about-company h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.025em;
  position: relative; z-index: 1;
  margin: 12px 0 10px;
}
.tile-about-company p {
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.75);
  position: relative; z-index: 1;
  margin: 0;
}

.tile-about-reach {
  grid-column: 5 / span 8;
  background: var(--tile);
  padding: 36px 40px;
}
.tile-about-reach .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-about-reach .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-about-reach h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 28px; line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.tile-about-reach .reach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.tile-about-reach .card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, transform 0.2s;
}
.tile-about-reach .card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.tile-about-reach .card .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tile-about-reach .card .email {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.015em; color: var(--ink);
  border-bottom: none;
  overflow-wrap: anywhere;
}
.tile-about-reach .card .email:hover {
  color: var(--blue);
  border-bottom: none;
}

/* back-to-home tile (full-width) */
.tile-about-back {
  grid-column: 1 / span 12;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 36px;
  gap: 24px;
}
.tile-about-back .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
}
.tile-about-back h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: -0.02em;
  margin-top: 4px;
}
.tile-about-back .home-link {
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.tile-about-back .home-link::after { content: '→'; }
.tile-about-back .home-link:hover { transform: translateY(-1px); }

/* ============================================================
   ABOUT: MANIFESTO PAGE
   Single full-width tile carrying the entire About page.
   No other tiles, no bento grid — just one statement.
   ============================================================ */
.bento-about-manifesto {
  /* Override the bento grid for this one page: single column,
     tile fills the available width and stretches vertically. */
  display: block !important;
  padding-top: 4px;
}
.tile-about-manifesto {
  background: linear-gradient(135deg, #ffffff 0%, #F5EDDD 100%);
  border-radius: 24px;
  padding: clamp(28px, 4.5vw, 60px) clamp(20px, 3.5vw, 44px) clamp(32px, 5vw, 64px);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.tile-about-manifesto::before {
  /* Subtle gradient corner glow — sets the mood without dominating */
  content: ''; position: absolute;
  top: -40%; right: -20%;
  width: 70%; height: 80%;
  background: radial-gradient(circle, rgba(255,59,31,0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.tile-about-manifesto::after {
  content: ''; position: absolute;
  bottom: -30%; left: -10%;
  width: 60%; height: 70%;
  background: radial-gradient(circle, rgba(255,184,28,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.tile-about-manifesto > * { position: relative; z-index: 1; }
.tile-about-manifesto .marker {
  align-self: flex-start;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue);
  padding: 6px 14px; border-radius: 999px;
  letter-spacing: -0.005em;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.tile-about-manifesto h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: clamp(20px, 2.6vw, 32px);
  max-width: none;
}
.tile-about-manifesto h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tile-about-manifesto .manifesto-body {
  max-width: 920px;
  display: flex; flex-direction: column;
}
.tile-about-manifesto .manifesto-body p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  letter-spacing: -0.005em;
}
.tile-about-manifesto .manifesto-body p:last-child {
  margin-bottom: 0;
}
.tile-about-manifesto .manifesto-body p code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}
/* "Today it stood up." — its own beat */
.tile-about-manifesto .manifesto-body p.beat {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: clamp(4px, 0.6vw, 8px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
/* "AI was in its 1981. We made its Macintosh moment." — the closer */
.tile-about-manifesto .manifesto-body p.closer {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: clamp(8px, 1.2vw, 14px);
  padding-top: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid rgba(0,0,0,0.08);
}

@media (max-width: 720px) {
  .tile-about-manifesto {
    border-radius: 20px;
    min-height: auto;
  }
  .tile-about-manifesto h1 {
    font-size: 44px;
    line-height: 1.0;
  }
  .tile-about-manifesto .manifesto-body p.beat {
    font-size: 22px;
  }
  .tile-about-manifesto .manifesto-body p.closer {
    font-size: 22px;
  }
}

/* New About variants: full-width title; bright "what we're trying to do" tile */
.tile-about-title.tile-about-title-full {
  grid-column: 1 / span 12;
  min-height: auto;
  padding: 56px 48px 48px;
}
.tile-about-title.tile-about-title-full h1 {
  font-size: clamp(40px, 5.4vw, 64px);
  max-width: 900px;
}
.tile-about-title.tile-about-title-full .deck {
  max-width: 760px;
}
.tile-about-company.tile-about-company-bright {
  background: linear-gradient(135deg, var(--blue-soft) 0%, #FCEFD8 100%);
  color: var(--ink);
  padding: 44px 36px;
  justify-content: flex-start;
  gap: 20px;
}
.tile-about-company.tile-about-company-bright::before {
  /* Replace the dark-tile radial glow with a subtle light-bg shimmer */
  background: radial-gradient(circle at 80% 110%, rgba(255,59,31,0.18) 0%, transparent 60%);
}
.tile-about-company.tile-about-company-bright .lbl {
  color: var(--blue);
  opacity: 1;
  font-weight: 700;
}
.tile-about-company.tile-about-company-bright h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.tile-about-company.tile-about-company-bright p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
/* Row 3 of About: 7/5 split between the analysis prose and the manifesto pull-quote */
.tile-about-isnt.tile-about-row3-left {
  grid-column: 1 / span 7;
}
.tile-about-company.tile-about-row3-right {
  grid-column: 8 / span 5;
}

/* Row 5 of About: 8/4 split between built-for-everyone and 18+ */
.tile-about-isnt.tile-about-row5-left {
  grid-column: 1 / span 8;
}
.tile-about-age.tile-about-row5-right {
  grid-column: 9 / span 4;
}

/* The .tile-about-isnt.tile-about-prose composite is used for narrower
   tiles that still want prose styling — the .tile-about-isnt gets
   the col positioning, .tile-about-prose contributes typography. */


/* ============================================================
   PRESS & MEDIA KIT PAGE
   Bento composition with: full-width hero, copy-clipboard boilerplate,
   4-cell at-a-glance grid, split quick-facts + soundbites row,
   accordion FAQ, brand-assets row, and contact + downloads row.
   ============================================================ */

/* Row 1: Hero ---------------------------------------------- */
.tile-press-title {
  grid-column: 1 / span 12;
  background: linear-gradient(135deg, #ffffff 0%, #F2E8D6 100%);
  padding: 56px 48px 48px;
  display: flex; flex-direction: column;
  min-height: 220px;
}
.tile-press-title .marker {
  align-self: flex-start;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue);
  padding: 6px 12px; border-radius: 999px;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.tile-press-title h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(40px, 5vw, 59px);
  line-height: 1.0; letter-spacing: -0.04em;
  margin-bottom: 16px;
  max-width: 900px;
}
.tile-press-title h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tile-press-title .deck {
  font-size: 17px; line-height: 1.55; color: var(--ink-soft);
  max-width: 720px;
}

/* Row 2: Boilerplate (with copy button) ------------------- */
@keyframes dosblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.blink-cursor { display: inline-block; animation: dosblink 1.06s steps(1, end) infinite; }
.tile-press-founder { grid-column: 1 / span 12; }
.tile-press-founder .founder-grid { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: center; }
.tile-press-founder .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tile-press-founder .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.tile-press-founder h2 { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px; }
.tile-press-founder .founder-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 8px; border: 1px solid var(--line); }
.tile-press-founder .founder-dl { display: inline-block; font-size: 10px; font-weight: 400; font-style: italic; color: var(--ink-soft); opacity: 0.75; text-decoration: none; margin-bottom: 16px; }
.tile-press-founder .founder-dl:hover { text-decoration: underline; }
.tile-press-founder .founder-bio p:first-child { margin-top: 0; }
.tile-press-founder .founder-name { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1.05; }
.tile-press-founder .founder-role { color: var(--ink-soft); margin-top: 6px; font-size: 15px; }
.tile-press-founder .founder-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tile-press-founder .founder-tags span { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.tile-press-founder .founder-bio p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 12px; }
.tile-press-founder .founder-bio p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .tile-press-founder .founder-grid { grid-template-columns: 1fr; gap: 18px; } }
.tile-press-boilerplate {
  grid-column: 1 / span 12;
  background: var(--ink); color: #fff;
  padding: 36px 44px;
  position: relative; overflow: hidden;
}
.tile-press-boilerplate::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 100%, rgba(255,184,28,0.25) 0%, transparent 55%);
  pointer-events: none;
}
.tile-press-boilerplate .boilerplate-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.tile-press-boilerplate .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-press-boilerplate .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
}
.tile-press-boilerplate .copy-btn {
  background-color: rgba(255,255,255,0.1);
  background-image: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 0.15s, transform 0.15s;
}
.tile-press-boilerplate .copy-btn:hover {
  background-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.tile-press-boilerplate .copy-btn.copied {
  background-color: var(--green);
  border-color: var(--green);
}
.tile-press-boilerplate .copy-icon { font-size: 14px; }
.tile-press-boilerplate .boilerplate-text {
  font-size: 16.5px; line-height: 1.65;
  color: rgba(255,255,255,0.92);
  max-width: 900px;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.tile-press-boilerplate .boilerplate-note {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  position: relative; z-index: 1;
}

/* Row 3: At a glance ------------------------------------- */
.tile-press-glance {
  grid-column: 1 / span 12;
  background: var(--tile);
  padding: 36px 40px;
}
.tile-press-glance .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 24px;
}
.tile-press-glance .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-press-glance .glance-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.tile-press-glance .glance-cell {
  padding-top: 18px;
  border-top: 2px solid var(--line);
}
.tile-press-glance .glance-num {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 56px; line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.tile-press-glance .glance-lbl {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 14.5px; color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.tile-press-glance .glance-cell p {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .tile-press-glance .glance-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 540px) {
  .tile-press-glance .glance-grid { grid-template-columns: 1fr; }
}

/* Row 4: Quick facts (cols 1-7) + Soundbites (cols 8-12) -- */
.tile-press-facts {
  grid-column: 1 / span 7;
  background: var(--tile);
  padding: 36px 40px;
}
.tile-press-soundbites {
  grid-column: 8 / span 5;
  background: linear-gradient(135deg, #FCEFD8 0%, #FDEAE2 100%);
  padding: 36px 36px;
}
.tile-press-facts .eyebrow,
.tile-press-soundbites .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.tile-press-facts .eyebrow::before,
.tile-press-soundbites .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-press-facts h2,
.tile-press-soundbites h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 26px; line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.tile-press-facts .facts-list {
  margin: 0;
}
.tile-press-facts .fact-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.tile-press-facts .fact-row:last-child { border-bottom: 1px solid var(--line); }
.tile-press-facts dt {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 13.5px; color: var(--ink);
  letter-spacing: -0.005em;
}
.tile-press-facts dd {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  margin: 0;
}
.tile-press-facts .lang-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tile-press-facts .lang-tags > span { display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); cursor: default; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tile-press-facts .lang-tags > span:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.tile-press-facts .lang-tags > span > span { grid-area: 1 / 1; transition: opacity 0.15s; }
.tile-press-facts .lang-tags > span .en { opacity: 0; }
.tile-press-facts .lang-tags > span:hover .nm { opacity: 0; }
.tile-press-facts .lang-tags > span:hover .en { opacity: 1; }
.tile-press-facts dd a {
  color: var(--blue); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.tile-press-facts dd a:hover { border-bottom-color: var(--blue); }
.tile-press-soundbites .soundbite-intro {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  margin-bottom: 18px;
}
.tile-press-soundbites .soundbite-intro em {
  color: var(--ink); font-style: italic; font-weight: 500;
}
.tile-press-soundbites .soundbites {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.tile-press-soundbites .soundbites li {
  background: rgba(255,255,255,0.6);
  border-left: 3px solid var(--blue);
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}

/* Row 5: Press FAQ (full width, accordion) -------------- */
.tile-press-faq {
  grid-column: 1 / span 12;
  background: var(--tile);
  padding: 36px 40px;
}
.tile-press-faq .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.tile-press-faq .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-press-faq h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.tile-press-faq .faq-list {
  display: flex; flex-direction: column; gap: 4px;
}
.tile-press-faq .faq-item {
  border-top: 1px solid var(--line);
}
.tile-press-faq .faq-item:last-child { border-bottom: 1px solid var(--line); }
.tile-press-faq .faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s;
}
.tile-press-faq .faq-item summary::-webkit-details-marker { display: none; }
.tile-press-faq .faq-item summary:hover { color: var(--blue); }
.tile-press-faq .faq-item .q {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 16px; color: var(--ink);
  letter-spacing: -0.015em;
}
.tile-press-faq .faq-item .caret {
  font-family: 'Inter Tight', sans-serif; font-weight: 400;
  font-size: 22px; color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.tile-press-faq .faq-item[open] .caret {
  transform: rotate(45deg);
}
.tile-press-faq .faq-item .a {
  padding: 0 4px 22px;
}
.tile-press-faq .faq-item .a p {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0;
  max-width: 880px;
}
.tile-press-faq .faq-item .a a {
  color: var(--blue); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.tile-press-faq .faq-item .a a:hover { border-bottom-color: var(--blue); }

/* Row 6: Brand assets (full width, sub-grid) ------------ */
.tile-press-brand {
  grid-column: 1 / span 12;
  background: var(--tile);
  padding: 36px 40px;
}
.tile-press-brand .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.tile-press-brand .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-press-brand h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.tile-press-brand .brand-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
}
.tile-press-brand .brand-section h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.tile-press-brand .logo-card {
  background: var(--paper);
  border-radius: 12px;
  padding: 24px;
}
.tile-press-brand .logo-preview {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 14px;
}
.tile-press-brand .logo-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #FFB81C, #FF3B1F);
}
.tile-press-brand .logo-note {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 0;
}
.tile-press-brand .palette {
  display: flex; flex-direction: column; gap: 10px;
}
.tile-press-brand .swatch {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.tile-press-brand .swatch-chip {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}
.tile-press-brand .swatch-hex {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 12.5px; color: var(--ink);
  letter-spacing: 0.02em;
}
.tile-press-brand .swatch-name {
  font-size: 12px; color: var(--ink-soft);
}
.tile-press-brand .type-row {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.tile-press-brand .type-row:last-child { border-bottom: 1px solid var(--line); }
.tile-press-brand .type-sample { color: var(--ink); }
.tile-press-brand .type-note {
  font-size: 12px; color: var(--ink-soft);
}
@media (max-width: 900px) {
  .tile-press-brand .brand-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Row 7: Press contact (cols 1-7) + Downloads (cols 8-12) - */
.tile-press-contact {
  grid-column: 1 / span 7;
  background: var(--ink); color: #fff;
  padding: 36px 40px;
  position: relative; overflow: hidden;
}
.tile-press-contact::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 10% 100%, rgba(255,59,31,0.3) 0%, transparent 55%);
  pointer-events: none;
}
.tile-press-contact .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.tile-press-contact .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-press-contact h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.025em;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.tile-press-contact p {
  font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 540px;
  margin-bottom: 22px;
  position: relative; z-index: 1;
}
.tile-press-contact .contact-link {
  display: inline-flex; align-items: center; gap: 10px;
  background-color: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.15s;
  position: relative; z-index: 1;
}
.tile-press-contact .contact-link:hover {
  background-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.tile-press-contact .contact-icon { font-size: 16px; }

.tile-press-downloads {
  grid-column: 8 / span 5;
  background: var(--tile);
  padding: 36px 36px;
}
.tile-press-downloads .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.tile-press-downloads .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-press-downloads h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.tile-press-downloads .downloads-note {
  font-size: 13px; line-height: 1.55; color: var(--ink-soft);
  margin-bottom: 18px;
}
.tile-press-downloads .downloads-note a {
  color: var(--blue); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.tile-press-downloads .downloads-note a:hover { border-bottom-color: var(--blue); }
.tile-press-downloads .downloads-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tile-press-downloads .download-item {
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 8px;
}
.tile-press-downloads .download-info {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.tile-press-downloads .download-name {
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
}
.tile-press-downloads .download-status {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  white-space: nowrap;
  text-transform: uppercase;
}
.tile-press-downloads .download-status-ready {
  background: rgba(199, 122, 18, 0.15);
  color: #8A5512;
}

/* Mobile-responsive press page ------------------------------ */
@media (max-width: 900px) {
  .tile-press-title { grid-column: 1 / -1; padding: 36px 28px; }
  .tile-press-title h1 { font-size: 36px; }
  .tile-press-boilerplate { grid-column: 1 / -1; padding: 28px; }
  .tile-press-glance { grid-column: 1 / -1; padding: 28px; }
  .tile-press-facts,
  .tile-press-soundbites { grid-column: 1 / -1; padding: 28px; }
  .tile-press-facts .fact-row { grid-template-columns: 1fr; gap: 4px; }
  .tile-press-faq { grid-column: 1 / -1; padding: 28px; }
  .tile-press-brand { grid-column: 1 / -1; padding: 28px; }
  .tile-press-contact,
  .tile-press-downloads { grid-column: 1 / -1; padding: 28px; }
}

/* ============================================================
   CAREERS PAGE
   ============================================================ */

/* Pricing page (bento, careers-style, fewer boxes) */
.tile-pricing-title {
  grid-column: 1 / span 12;
  background: linear-gradient(135deg, #ffffff 0%, #F2E8D6 100%);
  display: flex; flex-direction: column; padding: 48px; min-height: 240px;
}
.tile-pricing-title .marker {
  align-self: flex-start; font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
.tile-pricing-title h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: clamp(40px, 5vw, 60px);
  line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 16px; max-width: 760px;
}
.tile-pricing-title h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tile-pricing-title .deck { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 620px; }
.tile-pricing-plan { background: var(--tile); padding: 32px 36px; display: flex; flex-direction: column; }
.tile-pricing-plan.monthly { grid-column: 1 / span 6; }
.tile-pricing-plan.founders { grid-column: 7 / span 6; background: linear-gradient(150deg, #FFFDF7 0%, #FFF4E2 100%); border-color: rgba(255, 184, 28, 0.45); }
.tile-pricing-plan .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tile-pricing-plan .plan-name { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.tile-pricing-plan .plan-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: var(--blue-soft); color: var(--blue); padding: 4px 10px; border-radius: 999px; flex-shrink: 0; }
.tile-pricing-plan .plan-price { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; }
.tile-pricing-plan .plan-price span { font-size: 16px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.tile-pricing-plan .plan-sub { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 20px; }
.tile-pricing-plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.tile-pricing-plan li { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); padding-left: 24px; position: relative; }
.tile-pricing-plan li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 800; }
.tile-pricing-billing { grid-column: 1 / span 12; background: var(--tile); padding: 32px 40px; }
.tile-pricing-billing .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.tile-pricing-billing .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.tile-pricing-billing p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 900px; }
@media (max-width: 720px) {
  .tile-pricing-title { grid-column: 1 / -1; padding: 32px; }
  .tile-pricing-plan.monthly, .tile-pricing-plan.founders { grid-column: 1 / -1; padding: 26px; }
  .tile-pricing-billing { grid-column: 1 / -1; padding: 26px; }
}
.tile-careers-title {
  grid-column: 1 / span 12; grid-row: 1;
  background: linear-gradient(135deg, #ffffff 0%, #F2E8D6 100%);
  display: flex; flex-direction: column;
  padding: 48px;
  min-height: 280px;
}
.tile-careers-title .marker {
  align-self: flex-start;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 700;
  background: var(--blue-soft); color: var(--blue);
  padding: 6px 12px; border-radius: 999px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.tile-careers-title h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.0; letter-spacing: -0.04em;
  margin-bottom: 18px;
  max-width: 820px;
}
.tile-careers-title h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tile-careers-title .deck {
  font-size: 17px; line-height: 1.55; color: var(--ink-soft);
  max-width: 720px;
}

.tile-careers-principles {
  grid-column: 1 / span 12;
  background: var(--tile);
  padding: 36px 40px;
}
.tile-careers-principles .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-careers-principles .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-careers-principles h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.tile-careers-principles .principles-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px;
}
.tile-careers-principles .principles-grid p {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 0;
}
.tile-careers-principles .principles-grid p strong {
  color: var(--ink); font-weight: 600;
}

.tile-careers-role {
  background: var(--tile);
  padding: 32px 36px;
  display: flex; flex-direction: column;
}
.tile-careers-role.lead {
  grid-column: 1 / span 6;
}
.tile-careers-role.ic {
  grid-column: 7 / span 6;
}
.tile-careers-role .role-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.tile-careers-role .role-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-careers-role .role-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.tile-careers-role .role-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--blue-soft); color: var(--blue);
  padding: 4px 10px; border-radius: 999px;
  flex-shrink: 0;
}
.tile-careers-role h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 26px; line-height: 1.1; letter-spacing: -0.03em;
  margin-top: 10px; margin-bottom: 8px;
}
.tile-careers-role .summary {
  font-size: 15px; line-height: 1.5; color: var(--ink);
  font-weight: 500;
  margin-bottom: 22px;
  font-style: italic;
}
.tile-careers-role .section-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-top: 18px; margin-bottom: 10px;
}
.tile-careers-role .section-lbl:first-child { margin-top: 0; }
.tile-careers-role ul {
  list-style: none; padding: 0; margin: 0;
}
.tile-careers-role ul li {
  position: relative; padding-left: 16px;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 8px;
}
.tile-careers-role ul li::before {
  content: '·'; position: absolute; left: 4px; top: -1px;
  color: var(--blue); font-weight: 700; font-size: 18px;
}
.tile-careers-role .tools {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
.tile-careers-role .tools strong {
  color: var(--ink); font-weight: 600;
}
.tile-careers-role .look-for {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}

.tile-careers-apply {
  grid-column: 1 / span 12;
  background: var(--ink); color: #fff;
  padding: 40px 44px;
}
.tile-careers-apply .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile-careers-apply .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #D89A2E;
}
.tile-careers-apply h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 32px; line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.tile-careers-apply .apply-body p {
  font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.8);
  margin-bottom: 14px;
  max-width: 780px;
}
.tile-careers-apply .apply-body p:last-child { margin-bottom: 0; }
.tile-careers-apply .apply-body strong { color: #fff; font-weight: 600; }
.tile-careers-apply .apply-body a {
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color 0.15s;
}
.tile-careers-apply .apply-body a:hover { border-bottom-color: #fff; }

.tile-careers-back {
  grid-column: 1 / span 12;
  background: var(--tile);
  padding: 28px 36px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
}
.tile-careers-back p {
  font-size: 14px; color: var(--ink-soft); margin: 0;
}
.tile-careers-back .home-link {
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.15s;
  flex-shrink: 0;
  text-decoration: none;
}
.tile-careers-back .home-link::after { content: '→'; }
.tile-careers-back .home-link:hover { transform: translateY(-1px); }

/* Mobile responsive for careers */
@media (max-width: 900px) {
  .tile-careers-title { grid-column: 1 / -1; padding: 32px; }
  .tile-careers-title h1 { font-size: 36px; }
  .tile-careers-principles { grid-column: 1 / -1; padding: 28px; }
  .tile-careers-principles .principles-grid { grid-template-columns: 1fr; gap: 14px; }
  .tile-careers-role.lead,
  .tile-careers-role.ic { grid-column: 1 / -1; padding: 26px; }
  .tile-careers-role h2 { font-size: 22px; }
  .tile-careers-apply { grid-column: 1 / -1; padding: 32px; }
  .tile-careers-apply h2 { font-size: 24px; }
  .tile-careers-back { grid-column: 1 / -1; padding: 24px; }
}


/* contact grid (used in TOS section 21) ---------------------- */

/* privacy / legal pages ----------------------------------- */

/* Override page-section overflow so the hero can extend full bleed */
.doc-page { overflow: visible; }

/* full-bleed gradient hero */
.doc-hero {
  background:
    linear-gradient(135deg, var(--blue) 0%, #C23A14 50%, var(--pink) 100%);
  background-size: 200% 200%;
  animation: privGradientShift 18s ease infinite;
  padding: 64px 32px 96px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.doc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
@keyframes privGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.doc-hero-inner {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto;
}
.doc-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.doc-hero h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 60px; line-height: 1.0; letter-spacing: -0.04em;
  margin-bottom: 14px;
}
.doc-hero .subtitle {
  font-size: 20px; line-height: 1.4;
  font-weight: 400; opacity: 0.95;
  margin-bottom: 24px;
}
.doc-meta {
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  font-size: 13px; opacity: 0.9;
}
.doc-meta .item {
  display: inline-flex; align-items: center; gap: 8px;
}
.doc-meta .item::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
}

/* main content area */
.doc-content {
  max-width: 920px; margin: 0 auto;
  padding: 0 32px 80px 32px;
}

/* Summary card — overlaps the hero */
.doc-summary {
  background: #fff;
  border: 1.5px solid var(--blue);
  border-radius: 18px;
  padding: 28px 32px;
  margin-top: -56px;
  margin-bottom: 36px;
  display: flex; gap: 20px;
  align-items: flex-start;
  box-shadow: 0 8px 28px rgba(255,59,31,0.12);
  position: relative; z-index: 5;
}
.doc-summary .icon {
  font-size: 32px; flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-soft), #FBE8D8);
  border-radius: 14px;
}
.doc-summary h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--blue);
  margin-bottom: 6px;
}
.doc-summary p {
  color: var(--ink);
  font-size: 15px; line-height: 1.6;
  margin: 0;
}

/* numbered section card */
.doc-section {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255,59,31,0.1);
  overflow: hidden;
  margin-bottom: 18px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.doc-section:hover {
  box-shadow: 0 6px 26px rgba(255,59,31,0.13);
  transform: translateY(-1px);
}
.doc-section-head {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(255,59,31,0.04) 0%, rgba(255,184,28,0.04) 100%);
  border-bottom: 1px solid rgba(255,59,31,0.1);
}
.doc-section-num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.doc-section-head h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.doc-section-body {
  padding: 24px 28px 26px 28px;
}
.doc-section-body p {
  color: var(--ink);
  font-size: 15px; line-height: 1.65;
  margin-bottom: 12px;
}
.doc-section-body p:last-child { margin-bottom: 0; }
.doc-section-body ul { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-section-body ul:last-child { margin-bottom: 0; }
.doc-section-body li { color: var(--ink); font-size: 15px; line-height: 1.6; padding-left: 22px; position: relative; }
.doc-section-body li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.doc-section-body strong {
  font-weight: 600; color: var(--ink);
}
.doc-section-body em {
  font-style: italic;
  color: var(--ink-soft);
}
.doc-section-body a {
  color: var(--blue); font-weight: 500;
  border-bottom: 1px solid rgba(255,59,31,0.3);
  transition: border-color 0.15s;
}
.doc-section-body a:hover { border-bottom-color: var(--blue); }

/* highlighted in-section text */
.doc-highlight {
  color: var(--blue); font-weight: 600;
}

/* bullet list with blue dot */
.doc-list {
  list-style: none; margin: 4px 0 12px 0; padding: 0;
}
.doc-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 15px; line-height: 1.6;
  color: var(--ink);
}
.doc-list li::before {
  content: ''; position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  background: var(--blue); border-radius: 50%;
}
.doc-list li strong {
  font-weight: 600; color: var(--ink);
}

/* "what stays / what we store" two-column comparison grid */
.doc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin: 8px 0 4px 0;
}
.doc-card {
  border-radius: 12px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: #fff;
}
.doc-card.stays {
  background: linear-gradient(135deg, #FBF3E2 0%, #FCEFD8 100%);
  border-color: rgba(199, 122, 18, 0.25);
}
.doc-card.stays h4 {
  color: #8A5512;
}
.doc-card.stays h4::before {
  content: '✓'; margin-right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: #8A5512; color: #fff;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  vertical-align: middle;
}
.doc-card.stores {
  background: linear-gradient(135deg, var(--blue-soft) 0%, #FBE7D6 100%);
  border-color: rgba(255,59,31,0.25);
}
.doc-card.stores h4 {
  color: var(--blue);
}
.doc-card.stores h4::before {
  content: '◉'; margin-right: 8px;
  color: var(--blue);
  font-size: 16px;
  vertical-align: middle;
}
.doc-card h4 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  display: flex; align-items: center;
}
.doc-card ul {
  list-style: none; padding: 0; margin: 0;
}
.doc-card ul li {
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.doc-card ul li:first-child {
  border-top: 0; padding-top: 4px;
}
.doc-card ul li:last-child { padding-bottom: 4px; }
.doc-card ul li strong {
  font-weight: 600; color: var(--ink);
  display: block; margin-bottom: 2px;
}

/* third-party services table */
.doc-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 14px 0 4px 0;
  background: #fff;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.doc-table th {
  background: var(--paper);
  text-align: left;
  padding: 12px 16px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.doc-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* info callout (used for ">" key promises) */
.doc-callout {
  background: linear-gradient(135deg, var(--blue-soft) 0%, #fff 100%);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 14px 0;
  display: flex; gap: 12px; align-items: flex-start;
}
.doc-callout .icon {
  font-size: 18px; flex-shrink: 0;
  margin-top: 1px;
}
.doc-callout p {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: var(--ink);
}
.doc-callout p strong { color: var(--blue); font-weight: 600; }

/* contact box at the end */
.doc-contact {
  margin-top: 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  position: relative; overflow: hidden;
}
.doc-contact::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,59,31,0.32) 0%, transparent 55%);
  pointer-events: none;
}
.doc-contact h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 20px;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  position: relative; z-index: 1;
}
.doc-contact > p {
  font-size: 14px; color: rgba(255,255,255,0.78);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.doc-contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative; z-index: 1;
}
.doc-contact-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.doc-contact-card:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-1px);
}
.doc-contact-card .lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.doc-contact-card .email {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600; font-size: 13px;
  letter-spacing: -0.01em;
  color: #fff;
  overflow-wrap: anywhere;
}
.doc-address {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 12px; color: rgba(255,255,255,0.55);
  font-style: italic;
  position: relative; z-index: 1;
}

/* footer back-to-home */
.doc-back {
  background: var(--blue-soft);
  border-radius: 16px;
  margin-top: 28px;
  padding: 24px 30px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.doc-back .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
}
.doc-back h3 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: -0.02em;
  margin-top: 4px;
}
.doc-back .home-link {
  background: var(--ink); color: #fff;
  padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.15s;
  flex-shrink: 0;
  border-bottom: none;
}
.doc-back .home-link::after { content: '→'; }
.doc-back .home-link:hover { transform: translateY(-1px); }
.doc-code {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(255,59,31,0.08);
  color: var(--blue);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0;
}

/* demo page ------------------------------------------------- */
#demo .demo-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 32px 80px;
}

/* Hero — clean tile, not gradient (gradient hero is reserved for legal pages) */
#demo .demo-hero {
  background: var(--tile);
  border-radius: 28px;
  padding: 56px 56px 48px;
  margin-bottom: 32px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px;
}
#demo .demo-hero::before {
  content: ''; position: absolute;
  top: -120px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,59,31,0.08) 0%, transparent 65%);
  pointer-events: none;
}
#demo .demo-hero::after {
  content: ''; position: absolute;
  bottom: -160px; left: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,184,28,0.06) 0%, transparent 65%);
  pointer-events: none;
}
#demo .demo-hero .marker {
  background: var(--blue-soft); color: var(--blue);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
#demo .demo-hero h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 64px; line-height: 1.0; letter-spacing: -0.045em;
  position: relative; z-index: 1;
  max-width: 800px;
}
#demo .demo-hero h1 .accent {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#demo .demo-hero .deck {
  font-size: 18px; line-height: 1.55; color: var(--ink-soft);
  max-width: 640px;
  position: relative; z-index: 1;
}

/* step block — alternating image/text columns */
#demo .demo-step {
  background: var(--tile);
  border-radius: 28px;
  padding: 48px 48px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#demo .demo-step.reverse {
  direction: rtl;
}
#demo .demo-step.reverse > * {
  direction: ltr;
}

#demo .demo-step-text .num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  padding: 8px 15px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(255,59,31,0.25);
}
#demo .demo-step-text h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 38px;
  line-height: 1.05; letter-spacing: -0.035em;
  margin-bottom: 14px;
}
#demo .demo-step-text p {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
#demo .demo-step-text p:last-child { margin-bottom: 0; }
#demo .demo-step-text p strong { color: var(--ink); font-weight: 600; }
#demo .demo-step-text .hint {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
}
#demo .demo-step-text .hint::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 8px rgba(255,59,31,0.5);
}

/* phone mockup column */
#demo .demo-phone-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 520px;
}
#demo .demo-phone-wrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,59,31,0.06) 0%, transparent 70%);
  pointer-events: none;
}

#demo .demo-phone {
  width: 240px; height: 488px;
  background: linear-gradient(180deg, #1F1812 0%, #100A05 100%);
  border-radius: 36px;
  padding: 10px;
  position: relative;
  box-shadow:
    0 30px 60px -20px rgba(33,22,8,0.4),
    0 12px 28px -12px rgba(33,22,8,0.25),
    inset 0 0 0 1.5px rgba(255,255,255,0.06);
  transition: transform 0.4s ease;
}
#demo .demo-phone:hover {
  transform: translateY(-4px) rotate(-1deg);
}
#demo .demo-phone-notch {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 22px;
  background: #000; border-radius: 0 0 14px 14px;
  z-index: 5;
}
#demo .demo-phone-screen {
  width: 100%; height: 100%;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #F6EEDE 0%, #EDE3D2 100%);
  display: flex; flex-direction: column;
}

/* phone status bar (fake: time + indicators) */
#demo .demo-status {
  height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 24px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--ink);
  flex-shrink: 0;
  padding-top: 8px;
}
#demo .demo-status .right {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; opacity: 0.7;
}

/* generic placeholder content area inside the phone — Bob will replace this */
#demo .demo-shot {
  flex: 1; position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* placeholder badge (small overlay) */
#demo .demo-replace {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(33,22,8,0.7);
  color: #fff;
  font-size: 9px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  z-index: 10;
  white-space: nowrap;
}

/* ===== Realistic WebAR screen mocks (app dark theme) ===== */
#demo .wm{flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden;font-family:'Plus Jakarta Sans','Inter',sans-serif;color:#FFF1E2;padding:16px 14px;background:radial-gradient(120% 70% at 50% -10%,rgba(255,184,28,.10),transparent 55%),radial-gradient(120% 70% at 50% 112%,rgba(255,59,31,.10),transparent 55%),linear-gradient(170deg,#1A0F0A,#140C07);}
#demo .wm::before{content:'';position:absolute;left:0;right:0;top:0;height:150%;pointer-events:none;background:radial-gradient(circle 30px at 22% 84%,rgba(255,184,28,.13),transparent 64%),radial-gradient(circle 46px at 68% 68%,rgba(255,150,50,.10),transparent 64%),radial-gradient(circle 18px at 84% 86%,rgba(255,184,28,.12),transparent 64%),radial-gradient(circle 56px at 40% 96%,rgba(255,59,31,.07),transparent 64%),radial-gradient(circle 14px at 91% 76%,rgba(255,184,28,.11),transparent 64%),radial-gradient(circle 24px at 12% 58%,rgba(255,184,28,.09),transparent 64%),radial-gradient(circle 12px at 55% 40%,rgba(255,184,28,.10),transparent 64%);animation:wmparts 16s ease-in-out infinite alternate;}
@keyframes wmparts{from{transform:translateY(0);}to{transform:translateY(-26px);}}
#demo .wm-logo{display:flex;align-items:center;gap:7px;justify-content:center;}
#demo .wm-coin{width:26px;height:26px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#FF3B1F,#FFB81C 50%,#FF3B1F);flex-shrink:0;}
#demo .wm-coin i{display:flex;width:100%;height:100%;border-radius:50%;background:#1A0F0A;align-items:center;justify-content:center;font-style:normal;font-size:8px;font-weight:800;letter-spacing:-.2px;color:#FFD9A6;}
#demo .wm-wm{font-weight:700;font-size:13px;letter-spacing:-.3px;}
#demo .wm-card{background:linear-gradient(160deg,rgba(48,30,20,.95),rgba(34,22,15,.97));border:1px solid rgba(139,111,92,.5);border-radius:18px;padding:15px 14px;box-shadow:0 16px 40px rgba(0,0,0,.5);}
#demo .wm-eye{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#A88B75;text-align:center;}
#demo .wm-title{font-weight:800;font-size:17px;letter-spacing:-.02em;text-align:center;margin:3px 0 3px;}
#demo .wm-title b{background:linear-gradient(135deg,#FFB81C,#FF7530);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;}
#demo .wm-sub{font-size:10.5px;line-height:1.4;color:rgba(255,241,226,.6);text-align:center;}
#demo .wm-cta{background:linear-gradient(45deg,#C9831A,#FF3B1F);color:#fff;border-radius:12px;padding:10px;text-align:center;font-weight:700;font-size:12px;box-shadow:0 8px 20px rgba(255,59,31,.35);}
#demo .wm-dob{display:flex;gap:8px;justify-content:center;margin:13px 0;}
#demo .wm-dob>div{display:flex;flex-direction:column;align-items:center;gap:3px;}
#demo .wm-dob label{font-size:8px;color:#A88B75;text-transform:uppercase;letter-spacing:.08em;}
#demo .wm-dob span{background:rgba(245,235,216,.06);border:1px solid rgba(255,184,28,.28);border-radius:8px;font-size:12px;font-weight:700;color:rgba(255,241,226,.42);padding:8px 0;width:38px;text-align:center;}
#demo .wm-dob span.yr{width:52px;}
#demo .wm-foot{font-size:8px;line-height:1.4;color:rgba(255,241,226,.42);text-align:center;margin-top:9px;}
#demo .wm-foot u{color:#FFB81C;text-decoration:none;}
#demo .wm-pick{text-align:center;margin-bottom:2px;}
#demo .wm-pick small{display:block;font-size:13px;color:rgba(255,241,226,.6);font-weight:500;}
#demo .wm-pick b{font-weight:800;font-size:23px;letter-spacing:-.02em;background:linear-gradient(135deg,#FFB81C,#FF3B1F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#demo .wm-stagewrap{flex:1;display:flex;align-items:flex-end;justify-content:center;position:relative;padding-bottom:46px;overflow:hidden;}
#demo .wm-fig{border-radius:34px 34px 22px 22px/52px 52px 22px 22px;background:linear-gradient(180deg,#FCE7CF,#FFC078 38%,#C77A12);position:relative;flex-shrink:0;}
#demo .wm-fig::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:30px;height:34px;border-radius:50%;background:#FAE6D2;}
#demo .wm-fig.center{width:62px;height:148px;filter:drop-shadow(0 0 18px rgba(255,184,28,.45));z-index:2;}
#demo .wm-fig.side{width:40px;height:100px;opacity:.45;}
#demo .wm-char{position:relative;flex-shrink:0;display:flex;align-items:flex-end;}
#demo .wm-char.center{height:272px;z-index:2;}
#demo .wm-char.side{height:175px;opacity:.42;z-index:1;margin:0 6px;}
#demo .wm-cimg{position:relative;z-index:2;height:100%;width:auto;display:block;object-fit:contain;object-position:bottom center;}
#demo .wm-char.center .wm-cimg{filter:drop-shadow(0 8px 16px rgba(255,184,28,.35));}
/* character-select dais — flat gold-metal disc + glowing rim, mirrors the WebAR CharacterPortalStage */
#demo .wm-dais{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;z-index:1;pointer-events:none;}
#demo .wm-char.center .wm-dais{width:82px;height:21px;bottom:-8px;}
#demo .wm-char.side .wm-dais{width:54px;height:13px;bottom:-5px;}
#demo .wm-dais::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 34%,#FFF0CE 0%,#F1C05A 44%,#B9791F 78%,#6E460F 100%);box-shadow:inset 0 -3px 7px rgba(50,22,6,.6),inset 0 2px 4px rgba(255,240,206,.4),0 4px 11px rgba(0,0,0,.5);}
#demo .wm-dais::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,184,28,.95);box-shadow:0 0 9px rgba(255,184,28,.6),0 0 17px rgba(255,59,31,.28),inset 0 0 6px rgba(255,230,176,.5);}
#demo .demo-note{margin-top:14px;background:var(--blue-soft);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.5;color:var(--ink);}
#demo .demo-note strong{font-weight:700;}
#demo .wm-nav{position:absolute;left:0;right:0;bottom:13px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;z-index:8;}
#demo .wm-nav .btn{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,184,28,.3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72);backdrop-filter:blur(4px);}
#demo .wm-nav .btn.spk{border-width:2px;background:rgba(0,0,0,.4);}
/* Modes box framed as a reference, not a 5th step */
#demo .demo-divider{display:flex;align-items:center;gap:20px;margin:10px 2px 30px;}
#demo .demo-divider::before,#demo .demo-divider::after{content:'';flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--line));}
#demo .demo-divider::after{background:linear-gradient(90deg,var(--line),transparent);}
#demo .demo-divider span{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;background:linear-gradient(90deg,var(--blue),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#demo .demo-step.ref{background:linear-gradient(155deg,#FCF8F0 0%,#F5EDDC 100%);}
#demo .demo-step-text .ref-tag{display:inline-flex;align-items:center;gap:7px;font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);background:rgba(255,255,255,.5);border:1px solid var(--line);padding:6px 13px;border-radius:999px;margin-bottom:18px;}
#demo .demo-step-text .ref-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);}
/* Modes box: faithful WebAR hamburger menu — floating card, tabs, featured card, 3-col tile grid */
#demo .modelist{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
#demo .modelist li{font-size:14px;line-height:1.45;color:var(--ink-soft);}
#demo .modelist li b{color:var(--ink);font-weight:700;}
#demo .wm-menu{position:absolute;left:9px;right:9px;bottom:56px;max-height:80%;display:flex;flex-direction:column;overflow:hidden;z-index:18;background:linear-gradient(160deg,rgba(42,27,15,.97),rgba(24,15,8,.98));border:1px solid rgba(255,184,28,.22);border-radius:20px;box-shadow:0 10px 32px rgba(0,0,0,.55),0 -4px 22px rgba(255,184,28,.1);backdrop-filter:blur(10px);transform:translateY(16px) scale(.98);opacity:0;transform-origin:bottom left;transition:transform .45s cubic-bezier(.2,.8,.2,1) .2s,opacity .4s .2s;}
#demo .demo-step.in-view .wm-menu{transform:translateY(0) scale(1);opacity:1;}
#demo .wm-menu .handle{width:38px;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(255,184,28,.6),rgba(255,210,130,.7),rgba(255,184,28,.6));margin:8px auto 6px;flex-shrink:0;}
#demo .wm-tabs{display:flex;padding:0 14px 7px;border-bottom:1px solid rgba(139,111,92,.2);margin-bottom:6px;flex-shrink:0;}
#demo .wm-tab{padding:5px 11px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,241,226,.45);position:relative;}
#demo .wm-tab.on{color:#FFF1E2;}
#demo .wm-tab.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-8px;height:2px;background:#FFB81C;border-radius:2px 2px 0 0;}
#demo .wm-feat{display:flex;align-items:center;gap:8px;padding:7px 9px 8px 10px;margin:2px 9px 5px;border-radius:10px;background:rgba(255,184,28,.07);border:1px solid rgba(255,184,28,.22);border-left:3px solid #FFB81C;}
#demo .wm-feat-ic{width:29px;height:29px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,210,130,.95);background:rgba(255,210,130,.14);border:1px solid rgba(255,210,130,.28);flex-shrink:0;}
#demo .wm-feat-ic svg{width:16px;height:16px;}
#demo .wm-feat-meta{flex:1;min-width:0;}
#demo .wm-feat-top{display:flex;align-items:center;gap:6px;}
#demo .wm-feat-name{font-size:12px;font-weight:700;color:#FFF1E2;line-height:1.1;}
#demo .wm-feat-cur{display:inline-flex;align-items:center;gap:4px;font-size:7.5px;font-style:italic;color:#FFB81C;font-weight:600;letter-spacing:.04em;padding:2px 5px;border-radius:999px;background:rgba(255,184,28,.14);border:1px solid rgba(255,184,28,.32);}
#demo .wm-feat-cur::before{content:'';width:4px;height:4px;border-radius:50%;background:#FFB81C;box-shadow:0 0 5px rgba(255,184,28,.8);}
#demo .wm-feat-desc{font-size:8.5px;color:rgba(255,241,226,.65);margin-top:2px;line-height:1.25;}
#demo .wm-pick-label{font-size:8px;font-weight:700;color:rgba(255,210,130,.7);letter-spacing:.12em;text-transform:uppercase;margin:3px 13px 4px;}
#demo .wm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 9px 9px;}
#demo .wm-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 3px 7px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center;}
#demo .wm-tile-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;}
#demo .wm-tile-ic svg{width:14px;height:14px;}
#demo .wm-tile-name{font-size:8px;font-weight:600;color:#FFF1E2;line-height:1.1;}
#demo .wm-tile.g-social{color:rgba(255,210,170,.85);} #demo .wm-tile.g-social .wm-tile-ic{background:rgba(255,210,170,.13);}
#demo .wm-tile.g-show{color:#FFB81C;} #demo .wm-tile.g-show .wm-tile-ic{background:rgba(255,184,28,.14);}
#demo .wm-tile.g-spicy{color:#FF7530;} #demo .wm-tile.g-spicy .wm-tile-ic{background:rgba(255,117,48,.14);}
#demo .wm-tile.g-prep{color:rgba(255,210,170,.85);} #demo .wm-tile.g-prep .wm-tile-ic{background:rgba(255,210,170,.13);}
#demo .wm-tile.g-calm{color:rgba(255,241,226,.8);} #demo .wm-tile.g-calm .wm-tile-ic{background:rgba(255,241,226,.12);}
#demo .wm-tile.g-learn{color:rgba(255,241,226,.7);} #demo .wm-tile.g-learn .wm-tile-ic{background:rgba(255,241,226,.1);}
#demo .wm-tile .pro{position:absolute;top:3px;right:3px;font-size:6.5px;font-weight:800;letter-spacing:.4px;padding:1px 4px;border-radius:999px;background:linear-gradient(180deg,#FFE38A,#FFB81C 45%,#C9831A);color:#3D2400;}
#demo .wm-room .wm-nav.open{z-index:22;}
#demo .wm-nav.open .ham{background:rgba(255,59,31,.5);border-color:rgba(255,184,28,.6);color:#fff;}
/* Settings reference: the menu's Settings tab */
#demo .wm-slist{display:flex;flex-direction:column;gap:4px;padding:2px 9px 6px;}
#demo .wm-srow{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.88);font-size:11px;}
#demo .wm-srow .ic{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,210,130,.9);}
#demo .wm-srow .ic svg{width:16px;height:16px;}
#demo .wm-srow .nm{flex:1;}
#demo .wm-srow .chev{display:flex;opacity:.45;}
#demo .wm-srow .chev svg{width:13px;height:13px;}
#demo .wm-srow.danger{color:#fca5a5;border-color:rgba(248,113,113,.2);}
#demo .wm-srow.danger .ic{color:#fca5a5;}
#demo .wm-prow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 11px 4px;border-top:1px solid rgba(255,255,255,.06);}
#demo .wm-plabel{font-size:8.5px;color:rgba(255,255,255,.42);letter-spacing:.5px;text-transform:uppercase;}
#demo .wm-pgroup{display:flex;gap:4px;}
#demo .wm-pill2{padding:3px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);font-size:9px;}
#demo .wm-pill2.on{background:rgba(255,184,28,.25);border-color:rgba(255,210,130,.5);color:#fff;}
#demo .wm-tog{position:relative;width:30px;height:17px;background:linear-gradient(135deg,rgba(255,184,28,.5),rgba(255,184,28,.4));border:1px solid rgba(255,184,28,.55);border-radius:999px;flex-shrink:0;}
#demo .wm-tog::after{content:'';position:absolute;top:1px;left:14px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.6);}
#demo .wm-langv{display:flex;align-items:center;gap:5px;font-size:9.5px;color:rgba(255,255,255,.7);}
#demo .wm-langv b{color:#FFB81C;font-weight:600;}
#demo .wm-langv .chev{display:flex;opacity:.6;}
#demo .wm-langv .chev svg{width:11px;height:11px;}
#demo .wm-arrow{position:absolute;top:42%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:rgba(20,12,7,.55);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.85);z-index:5;}
#demo .wm-arrow.l{left:32px;} #demo .wm-arrow.r{right:32px;}
#demo .wm-carousel{display:flex;align-items:flex-end;justify-content:center;gap:0;}
#demo .demo-step.in-view .wm-carousel{animation:wmcar 4.2s ease forwards;}
@keyframes wmcar{0%,16%{transform:translateX(0);}28%{transform:translateX(20px);}44%,52%{transform:translateX(0);}64%{transform:translateX(-20px);}78%,100%{transform:translateX(0);}}
#demo .demo-step.in-view .wm-arrow.l{animation:wmarrL 4.2s ease forwards;}
#demo .demo-step.in-view .wm-arrow.r{animation:wmarrR 4.2s ease forwards;}
@keyframes wmarrL{0%,20%,32%,100%{transform:translateY(-50%) scale(1);background:rgba(20,12,7,.55);}25%{transform:translateY(-50%) scale(1.3);background:rgba(255,184,28,.55);}}
@keyframes wmarrR{0%,56%,68%,100%{transform:translateY(-50%) scale(1);background:rgba(20,12,7,.55);}61%{transform:translateY(-50%) scale(1.3);background:rgba(255,184,28,.55);}}
#demo .demo-step.in-view .wm-char.center .wm-dais{animation:wmstg 4.2s ease forwards;}
@keyframes wmstg{0%,84%{box-shadow:none;}92%,100%{box-shadow:0 0 18px rgba(255,184,28,.6);}}
#demo .wm-hint{text-align:center;font-size:9.5px;color:rgba(255,241,226,.6);}
#demo .wm-steps3{display:flex;align-items:center;justify-content:center;gap:3px;margin:12px 0;}
#demo .wm-s3{display:flex;flex-direction:column;align-items:center;gap:4px;width:46px;}
#demo .wm-s3 i{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;}
#demo .wm-s3.a i{background:rgba(255,184,28,.18);} #demo .wm-s3.b i{background:rgba(139,111,92,.28);} #demo .wm-s3.c i{background:rgba(255,117,48,.18);}
#demo .wm-s3 span{font-size:7.5px;color:rgba(255,241,226,.62);text-align:center;line-height:1.1;}
#demo .wm-s3sep{color:rgba(255,59,31,.6);font-size:11px;}
#demo .wm-chips{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:8px 0;}
#demo .wm-chip{display:inline-flex;align-items:center;gap:4px;font-size:8.5px;font-weight:600;color:#FFE0A6;background:rgba(255,184,28,.12);border:1px solid rgba(255,184,28,.24);border-radius:999px;padding:4px 8px;}
#demo .wm-disc{display:flex;align-items:center;gap:5px;justify-content:center;font-size:8px;color:rgba(255,241,226,.55);background:rgba(255,184,28,.1);border:1px solid rgba(255,184,28,.2);border-radius:9px;padding:6px 8px;margin-top:8px;}
#demo .wm-room{padding:0;}
#demo .wm-room .floor{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 92%,rgba(255,184,28,.12),transparent 55%),repeating-linear-gradient(175deg,rgba(255,255,255,.03) 0 1px,transparent 1px 16px);}
#demo .wm-room .tiltprompt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transition:opacity .5s;z-index:3;}
#demo .wm-room .tiltprompt .up{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(255,59,31,.18);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;animation:tilt-pulse 2.4s ease-in-out infinite;}
#demo .wm-room .tiltprompt b{font-weight:700;font-size:13px;}
#demo .wm-room .tiltprompt small{font-size:9px;color:rgba(255,255,255,.55);max-width:140px;text-align:center;}
#demo .wm-room .char{position:absolute;bottom:24px;left:50%;transform:translate(-50%,28px);opacity:0;transition:opacity .7s .25s,transform .7s .25s;z-index:2;width:80px;height:200px;}
#demo .wm-room .char .body{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:64px;height:188px;border-radius:36px 36px 26px 26px/56px 56px 26px 26px;background:linear-gradient(180deg,#FCE7CF,#FFC078 35%,#C77A12);filter:drop-shadow(0 0 22px rgba(255,184,28,.4));}
#demo .wm-room .char .body::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:38px;border-radius:50%;background:#FAE6D2;}
#demo .wm-room .char .sh{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:88px;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);}
#demo .wm-room .portal{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:108px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,184,28,.4),rgba(255,59,31,.2) 60%,transparent 75%);opacity:0;transition:opacity .5s;z-index:1;}
#demo .wm-aibadge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 9px;font-size:9px;font-weight:700;color:#fff;z-index:4;}
#demo .wm-aibadge::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#FFB81C;margin-right:5px;vertical-align:middle;box-shadow:0 0 7px rgba(255,184,28,.8);}
#demo .demo-step.s-room .demo-phone{transform:perspective(820px) rotateX(45deg);transform-origin:center 78%;transition:transform 2s cubic-bezier(.2,.8,.2,1) .35s;}
#demo .demo-step.s-room.in-view .demo-phone{transform:perspective(900px) rotateX(0deg);}
#demo .demo-step.s-room.in-view .wm-room .tiltprompt{opacity:0;}
#demo .demo-step.s-room.in-view .wm-room .char{opacity:1;transform:translate(-50%,0);}
#demo .demo-step.s-room.in-view .wm-room .portal{opacity:1;}
#demo .wm-seq .wm-boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;opacity:1;}
#demo .wm-boot .coin{width:48px;height:48px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#FF3B1F,#FFB81C 50%,#FF3B1F);flex-shrink:0;}
#demo .wm-boot .coin i{display:flex;width:100%;height:100%;border-radius:50%;background:#1A0F0A;align-items:center;justify-content:center;font-style:normal;font-size:14px;font-weight:800;letter-spacing:-.4px;color:#FFD9A6;}
#demo .wm-boot .txt{display:flex;flex-direction:column;align-items:flex-start;}
#demo .wm-boot .nm{font-weight:700;font-size:19px;letter-spacing:-.5px;line-height:1;}
#demo .wm-boot .tag{font-weight:700;font-size:9px;letter-spacing:3px;text-transform:uppercase;margin-top:5px;background:linear-gradient(135deg,#FFB81C,#FF7530);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#demo .wm-seq .wm-gate{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;padding:20px 12px 12px;opacity:0;}
#demo .wm-gate .wm-card{padding:24px 16px;}
#demo .wm-gate .wm-eye{font-size:9px;}
#demo .wm-gate .wm-title{font-size:20px;margin:9px 0;}
#demo .wm-gate .wm-sub{font-size:11px;}
#demo .wm-gate .wm-dob{margin:26px 0;gap:8px;}
#demo .wm-gate .wm-dob label{font-size:8px;}
#demo .wm-gate .wm-dob span{font-size:14px;padding:12px 0;width:44px;}
#demo .wm-gate .wm-dob span.yr{width:60px;}
#demo .wm-gate .wm-cta{padding:13px;font-size:13px;}
#demo .wm-gate .wm-foot{font-size:8.5px;margin-top:15px;}
#demo .demo-step.in-view .wm-seq .wm-boot{animation:wmboot 1.3s ease forwards;}
#demo .demo-step.in-view .wm-seq .wm-gate{animation:wmgate 1.3s ease forwards;}
@keyframes wmboot{0%,72%{opacity:1;}100%{opacity:0;}}
@keyframes wmgate{0%,58%{opacity:0;}100%{opacity:1;}}
#demo .wm-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#100A05;}
#demo .wm-iosdim{position:absolute;inset:0;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;z-index:20;opacity:0;pointer-events:none;transition:opacity .4s;}
#demo .demo-step.in-view .wm-iosdim{animation:wmios 5s ease infinite;}
@keyframes wmios{0%,8%{opacity:0;}16%{opacity:1;}76%{opacity:1;}88%,100%{opacity:0;}}
#demo .demo-step.in-view .wm-iosdim .row a+a{animation:wmallow 5s ease infinite;}
@keyframes wmallow{0%,60%{background:transparent;}66%,72%{background:rgba(10,132,255,.25);}78%,100%{background:transparent;}}
#demo .wm-ios{width:74%;max-width:196px;background:rgba(249,247,245,.97);border-radius:14px;overflow:hidden;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.45);}
#demo .wm-ios .b{padding:14px 14px 12px;}
#demo .wm-ios .t{font-family:-apple-system,system-ui,sans-serif;font-weight:600;font-size:11.5px;color:#000;line-height:1.3;}
#demo .wm-ios .m{font-family:-apple-system,system-ui,sans-serif;font-size:10px;color:rgba(0,0,0,.65);line-height:1.3;margin-top:4px;}
#demo .wm-ios .row{display:flex;border-top:1px solid rgba(0,0,0,.14);}
#demo .wm-ios .row a{flex:1;padding:9px 0;font-family:-apple-system,system-ui,sans-serif;font-size:12px;color:#0A84FF;}
#demo .wm-ios .row a+a{border-left:1px solid rgba(0,0,0,.14);font-weight:600;}

/* ===== STEP 1: Open on your phone — browser address bar mock ===== */
#demo .shot-step1 {
  background: linear-gradient(180deg, #ffffff 0%, #F2E8D6 100%);
  padding: 8px 10px 0;
}
#demo .shot-step1 .url-bar {
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(33,22,8,0.04);
}
#demo .shot-step1 .url-bar .globe { font-size: 12px; opacity: 0.6; }
#demo .shot-step1 .url-bar .url {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink);
}
#demo .shot-step1 .page-content {
  flex: 1; padding: 28px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px;
}
#demo .shot-step1 .logo-mark {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
#demo .shot-step1 .logo-mark::before {
  content: '•';
  color: var(--ink); margin-right: 4px;
}
#demo .shot-step1 .h-mock {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 24px;
  line-height: 1.05; letter-spacing: -0.03em;
}
#demo .shot-step1 .h-mock .em {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#demo .shot-step1 .sub-mock {
  font-size: 11px; color: var(--ink-soft); line-height: 1.5;
  max-width: 180px;
}
#demo .shot-step1 .btn-mock {
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
#demo .shot-step1 .btn-mock::after { content: '→'; }

/* ===== STEP 2: Pick your AI Friend — 2x2 grid of avatar tiles ===== */
#demo .shot-step2 {
  background: linear-gradient(180deg, #ffffff 0%, #EFE5D4 100%);
  padding: 16px 14px;
  display: flex; flex-direction: column;
}
#demo .shot-step2 .pick-h {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: -0.025em;
  text-align: center; margin: 6px 0 4px;
}
#demo .shot-step2 .pick-sub {
  font-size: 10px; color: var(--ink-soft);
  text-align: center; margin-bottom: 14px;
}
#demo .shot-step2 .grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; flex: 1;
}
#demo .shot-step2 .ch {
  border-radius: 14px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 10px;
  min-height: 100px;
  box-shadow: 0 2px 10px rgba(33,22,8,0.08);
}
#demo .shot-step2 .ch.ch1 {
  background: linear-gradient(135deg, #FCE7CF 0%, #FFC078 60%, #C77A12 100%);
}
#demo .shot-step2 .ch.ch2 {
  background: linear-gradient(135deg, #FBEAD8 0%, #FF7A4D 60%, #C75A2A 100%);
}
#demo .shot-step2 .ch.ch3 {
  background: linear-gradient(135deg, #FCEFD8 0%, #FFB347 60%, #C75A2A 100%);
}
#demo .shot-step2 .ch.ch4 {
  background: linear-gradient(135deg, #ffe7ce 0%, #ff9d6c 60%, #c46c3f 100%);
}
#demo .shot-step2 .ch::before {
  /* a soft circle to suggest a face */
  content: '';
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
}
#demo .shot-step2 .ch .name {
  color: #fff;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  white-space: nowrap;
}
#demo .shot-step2 .ch.ch1.selected {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}
#demo .shot-step2 .pick-cta {
  background: var(--ink); color: #fff;
  padding: 11px 14px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
  text-align: center;
  margin-top: 12px;
}

/* ===== STEP 3: Tilt up your phone — floor view + tilt indicator ===== */
#demo .shot-step3 {
  background: linear-gradient(180deg, #251D14 0%, #161009 60%, #211608 100%);
  position: relative; overflow: hidden;
}
#demo .shot-step3::before {
  /* soft "floor" texture */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255,255,255,0.08) 0%, transparent 50%),
    repeating-linear-gradient(170deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 18px);
  pointer-events: none;
}
#demo .shot-step3 .tilt-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  z-index: 2;
  padding: 30px;
}
#demo .shot-step3 .tilt-arrow {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: rgba(255,59,31,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  color: #fff;
  position: relative;
  animation: tilt-pulse 2.4s ease-in-out infinite;
}
@keyframes tilt-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(255,59,31,0.5); }
  50%      { transform: translateY(-6px); box-shadow: 0 0 0 12px rgba(255,59,31,0); }
}
#demo .shot-step3 .tilt-h {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 16px;
  color: #fff; text-align: center;
  letter-spacing: -0.02em;
}
#demo .shot-step3 .tilt-sub {
  font-size: 10px; color: rgba(255,255,255,0.55);
  text-align: center; max-width: 160px;
  line-height: 1.4;
}
#demo .shot-step3 .horizon {
  position: absolute; left: 0; right: 0; bottom: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* ===== STEP 4: They appear — AI Friend silhouette in a room ===== */
#demo .shot-step4 {
  background: linear-gradient(180deg, #251D14 0%, #1A140C 50%, #100A05 100%);
  position: relative; overflow: hidden;
}
#demo .shot-step4::before {
  /* soft floor with horizon */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,59,31,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(255,184,28,0.06) 0%, transparent 50%);
  pointer-events: none;
}
#demo .shot-step4 .character {
  position: absolute;
  bottom: 50px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 240px;
  background: radial-gradient(ellipse 50% 8% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 70%);
}
#demo .shot-step4 .figure {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 220px;
  background: linear-gradient(180deg,
    #FCE7CF 0%, #FFC078 35%, #C77A12 100%);
  border-radius: 40px 40px 30px 30px / 60px 60px 30px 30px;
  filter: drop-shadow(0 0 24px rgba(255,184,28,0.4));
  position: relative;
}
#demo .shot-step4 .figure::before {
  /* head */
  content: ''; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 38px; height: 42px;
  background: #FAE6D2;
  border-radius: 50%;
}
#demo .shot-step4 .room-grid {
  /* faint perspective grid on the floor */
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  background:
    linear-gradient(0deg,
      rgba(255,255,255,0.04) 0%, transparent 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 24px);
  perspective: 200px;
  transform: rotateX(50deg);
  transform-origin: top center;
  opacity: 0.35;
}
#demo .shot-step4 .ai-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 10px; font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  z-index: 3;
}
#demo .shot-step4 .ai-badge::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: #C77A12; margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(199,122,18,0.7);
}

/* ===== STEP 5: Talk to them — AI Friend + mic interface ===== */
#demo .shot-step5 {
  background: linear-gradient(180deg, #251D14 0%, #1A140C 50%, #100A05 100%);
  position: relative; overflow: hidden;
}
#demo .shot-step5::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,59,31,0.15) 0%, transparent 60%);
  pointer-events: none;
}
#demo .shot-step5 .character-small {
  position: absolute;
  bottom: 110px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 180px;
  background: linear-gradient(180deg,
    #FCE7CF 0%, #FFC078 35%, #C77A12 100%);
  border-radius: 35px 35px 25px 25px / 50px 50px 25px 25px;
  filter: drop-shadow(0 0 20px rgba(255,184,28,0.35));
}
#demo .shot-step5 .character-small::before {
  content: ''; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 36px;
  background: #FAE6D2;
  border-radius: 50%;
}
#demo .shot-step5 .speech {
  position: absolute;
  top: 90px; left: 18px; right: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 11px; line-height: 1.45;
  color: var(--ink);
}
#demo .shot-step5 .speech .who {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 3px;
}
#demo .shot-step5 .controls {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
}
#demo .shot-step5 .mic {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow:
    0 8px 24px rgba(255,59,31,0.45),
    0 0 0 8px rgba(255,59,31,0.12);
  position: relative;
  animation: mic-pulse 2.4s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255,59,31,0.45), 0 0 0 8px rgba(255,59,31,0.12); }
  50%      { box-shadow: 0 8px 24px rgba(255,59,31,0.45), 0 0 0 16px rgba(255,59,31,0.04); }
}
#demo .shot-step5 .ctl-side {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff;
}
#demo .shot-step5 .ai-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 10px; font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  z-index: 3;
}
#demo .shot-step5 .ai-badge::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: #C77A12; margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(199,122,18,0.7);
}

/* closing CTA tile */
#demo .demo-cta {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,59,31,0.4) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(255,184,28,0.3) 0%, transparent 55%),
    var(--ink);
  color: #fff;
  border-radius: 28px;
  padding: 56px 56px;
  text-align: center;
  margin-top: 24px;
  position: relative; overflow: hidden;
}
#demo .demo-cta h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800; font-size: 42px;
  line-height: 1.05; letter-spacing: -0.035em;
  margin-bottom: 12px;
}
#demo .demo-cta p {
  font-size: 17px; line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin-bottom: 28px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
#demo .demo-cta .actions {
  display: inline-flex; gap: 12px;
}
#demo .demo-cta .actions .primary {
  background: #fff; color: var(--ink);
  padding: 14px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s;
}
#demo .demo-cta .actions .primary::after { content: '→'; transition: transform 0.2s; }
#demo .demo-cta .actions .primary:hover { transform: translateY(-1px); }
#demo .demo-cta .actions .primary:hover::after { transform: translateX(3px); }
#demo .demo-cta .actions .secondary {
  background: transparent; color: #fff;
  padding: 14px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  border: 1.5px solid rgba(255,255,255,0.3);
  transition: all 0.15s;
}
#demo .demo-cta .actions .secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}


/* =========================================================
   MOBILE + TABLET RESPONSIVE STYLES
   Desktop CSS above is untouched. Two breakpoints:
   - 900px: tablet portrait + phone landscape (hamburger appears,
            multi-col grids collapse to fewer cols)
   - 540px: phone portrait (everything stacks single-column,
            type scales further)
   ========================================================= */

/* Hamburger button — shown only at <900px */
.nav-burger {
  display: none;
  background: var(--tile);
  border: 1px solid var(--line);
  width: 42px; height: 42px;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 60;
}
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ----------------- TABLET / NARROW DESKTOP (<= 900px) ----------------- */
@media (max-width: 900px) {

  /* ===== Site chrome ===== */

  body { -webkit-text-size-adjust: 100%; }

  /* Nav becomes: logo + hamburger. Menu + buttons collapse into a panel. */
  .nav {
    grid-template-columns: 1fr auto;
    padding: 14px 18px;
    column-gap: 10px;
    row-gap: 0;
    position: relative;
  }
  .nav-burger { display: inline-flex; }
  .menu, .nav-right {
    display: none;
  }
  .nav.menu-open {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .nav.menu-open .logo { grid-row: 1; }
  .nav.menu-open .nav-burger { grid-row: 1; }
  .nav.menu-open .menu,
  .nav.menu-open .nav-right {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: 2;
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 12px 36px rgba(33,22,8,0.12);
    margin-top: 8px;
    gap: 4px;
  }
  /* Stack them by giving .nav-right a separate grid-row */
  .nav.menu-open .nav-right {
    grid-row: 3;
    border-radius: 0 0 18px 18px;
    padding-top: 12px;
  }
  /* Make the two drawer pieces look like ONE panel: kill bottom of menu, top of nav-right */
  .nav.menu-open .menu {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 8px;
    margin-bottom: 0;
    box-shadow: 0 12px 36px -12px rgba(33,22,8,0.05);
  }
  .nav.menu-open .nav-right {
    margin-top: 0;
    border-top: 1px solid var(--line);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 12px 36px rgba(33,22,8,0.12);
  }
  /* Menu items inside the open panel */
  .nav.menu-open .menu a {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 16px;
    color: var(--ink);
  }
  .nav.menu-open .menu a + a::before { display: none; }
  .nav.menu-open .menu a:hover { background: var(--paper); }
  .nav.menu-open .nav-right .ghost,
  .nav.menu-open .nav-right .filled {
    text-align: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 999px;
  }
  .nav.menu-open .nav-right .ghost {
    background: var(--paper);
    color: var(--ink);
  }

  /* Logo size shrinks slightly */
  .logo {
    font-size: 18px;
  }

  /* Footer: 5 cols → 2 cols */
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
  }
  .foot-bot {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .foot {
    padding: 40px 0 32px;
  }
  .foot-inner { padding: 0 24px; }

  /* ===== HOMEPAGE ===== */

  /* Bento grid: collapse 12-col grid to a flexible single column */
  .bento {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px 32px;
  }
  /* Force every tile to span full width */
  .tile-hero, .tile-qr, .tile-phone, .tile-noapp,
  .tile-vibe, .tile-browser {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  /* Hero typography scales down */
  .tile-hero {
    padding: 32px 28px;
  }
  .tile-hero h1 {
    font-size: 48px;
    line-height: 1.0;
  }
  .tile-hero p.deck {
    font-size: 16px;
  }
  .tile-hero .marker {
    position: static;
    margin-bottom: 16px;
    align-self: flex-start;
  }
  /* QR card scales down */
  .tile-qr {
    padding: 28px;
  }
  .tile-qr h3 { font-size: 22px; }
  .tile-qr .qr {
    max-width: 320px;
    margin: 16px auto;
  }
  /* Preview tile (dark with phone) */
  .tile-phone {
    min-height: 320px;
    padding: 28px;
  }
  /* No-app/Your-device tile */
  .tile-noapp { padding: 28px; }
  .tile-noapp h3 { font-size: 26px; }
  /* Vibe tile chips */
  .tile-vibe { padding: 28px; }
  .tile-vibe h3 { font-size: 24px; }
  /* Just-works tile */
  .tile-browser { padding: 28px; }
  .tile-browser h3 { font-size: 24px; }

  /* Three steps section */
  .moments {
    padding: 24px 18px 56px;
  }
  .moments-h { font-size: 38px; }
  .moments-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ===== ABOUT PAGE ===== */
  .tile-about-title,
  .tile-about-promise,
  .tile-about-prose,
  .tile-about-isnt,
  .tile-about-age,
  .tile-about-company,
  .tile-about-reach,
  .tile-about-back {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .tile-about-title { padding: 36px 28px; }
  .tile-about-title h1 { font-size: 44px; }
  .tile-about-promise { padding: 28px; }
  .tile-about-promise .quote { font-size: 22px; }
  .tile-about-prose { padding: 32px 28px; }
  .tile-about-prose h2 { font-size: 30px; }
  .tile-about-isnt { padding: 32px 28px; }
  .tile-about-isnt h2 { font-size: 28px; }
  .tile-about-age { padding: 28px; }
  .tile-about-age .number { font-size: 76px; }
  .tile-about-company { padding: 28px; }
  .tile-about-reach { padding: 28px; }
  .tile-about-reach h2 { font-size: 24px; }
  .tile-about-reach .reach-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tile-about-back {
    padding: 22px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* ===== DOC PAGES (Privacy / Terms / T&S / Cookies) ===== */
  .doc-hero {
    padding: 44px 22px 64px;
  }
  .doc-hero h1 { font-size: 40px; }
  .doc-hero .subtitle { font-size: 16px; }
  .doc-hero .doc-meta {
    gap: 14px;
    font-size: 12px;
  }
  .doc-content {
    padding: 0 18px 56px;
  }
  .doc-summary {
    margin-top: -40px;
    padding: 22px 24px;
    flex-direction: row;
    gap: 14px;
  }
  .doc-summary .icon { width: 44px; height: 44px; font-size: 24px; }
  .doc-section-head {
    padding: 18px 22px;
    gap: 14px;
  }
  .doc-section-num {
    width: 36px; height: 36px; font-size: 14px;
    border-radius: 10px;
  }
  .doc-section-head h2 { font-size: 18px; }
  .doc-section-body { padding: 20px 22px 22px; }
  .doc-section-body p, .doc-list li { font-size: 14px; }

  /* Comparison grid (Privacy section 2: stays/stores) */
  .doc-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Rule cards (T&S section 4) */
  .doc-rules {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Contact grid */
  .doc-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .doc-contact { padding: 24px; }
  .doc-contact h3 { font-size: 18px; }

  /* Crisis callout */
  .doc-crisis { padding: 22px; }
  .doc-crisis-head h3 { font-size: 16px; }
  .doc-crisis-table th { font-size: 10px; padding: 10px 12px; }
  .doc-crisis-table td { padding: 10px 12px; font-size: 12px; }

  /* Tables: convert to stacked rows on tablet+phone */
  .doc-table-wrap, .doc-crisis-table {
    overflow-x: auto;
  }
  .doc-table { font-size: 12px; }
  .doc-table th { padding: 10px 12px; font-size: 10px; }
  .doc-table td { padding: 10px 12px; }

  /* Back-to-home tile */
  .doc-back {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px;
    gap: 14px;
  }

  /* ===== DEMO PAGE ===== */
  #demo .demo-content {
    padding: 16px 18px 56px;
  }
  #demo .demo-hero {
    padding: 36px 28px;
    border-radius: 22px;
  }
  #demo .demo-hero h1 { font-size: 44px; }
  #demo .demo-hero .deck { font-size: 16px; }

  #demo .demo-step {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 28px;
    border-radius: 22px;
  }
  /* On mobile, undo the .reverse row-flip — phone always sits BELOW text */
  #demo .demo-step.reverse {
    direction: ltr;
  }
  #demo .demo-step.reverse > * {
    direction: ltr;
  }
  /* Always render text first, phone second */
  #demo .demo-step .demo-step-text { order: 1; }
  #demo .demo-step .demo-phone-wrap { order: 2; min-height: auto; }

  #demo .demo-step-text h2 { font-size: 30px; }
  #demo .demo-step-text p { font-size: 15px; }

  #demo .demo-cta { padding: 36px 28px; border-radius: 22px; }
  #demo .demo-cta h2 { font-size: 32px; }
  #demo .demo-cta p { font-size: 15px; }
  #demo .demo-cta .actions {
    flex-direction: column;
    width: 100%;
  }
  #demo .demo-cta .actions .primary,
  #demo .demo-cta .actions .secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ===== STUB PAGES (knowledgebase, what's-new, etc.) ===== */
  .tile-stub-title,
  .tile-stub-aside,
  .tile-stub-skeleton,
  .tile-stub-back {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

}


/* ----------------- PHONE (<= 540px) ----------------- */
@media (max-width: 540px) {

  /* ===== Site chrome ===== */
  .nav { padding: 12px 14px; }
  .logo { font-size: 17px; }
  /* Brand block spans both columns at top, then 2-col grid for the 4 sections */
  .foot-top {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 28px;
  }
  /* The first child div (brand: logo + blurb) spans both columns */
  .foot-top > div:first-child {
    grid-column: 1 / -1;
  }
  .foot-inner { padding: 0 18px; }
  .foot { padding: 44px 0 24px; }
  .foot-logo { font-size: 22px; }
  .foot-blurb {
    font-size: 13px;
    max-width: none;
  }
  /* Tighter section headers */
  .foot h4 {
    font-size: 10px;
    margin-bottom: 10px;
  }
  /* Tighter link rows */
  .foot ul li {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .foot ul li:last-child { margin-bottom: 0; }
  /* Tap target padding so links are still easy to hit */
  .foot ul li a {
    display: inline-block;
    padding: 4px 0;
  }
  .foot-bot {
    padding-top: 18px;
    margin-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 11px;
  }

  /* ===== HOMEPAGE ===== */
  .bento { padding: 12px 14px 28px; }
  .tile-hero {
    padding: 28px 22px;
    border-radius: 22px;
  }
  .tile-hero h1 {
    font-size: 38px;
    letter-spacing: -0.035em;
  }
  .tile-hero p.deck {
    font-size: 15px;
  }
  .tile-hero .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tile-hero .actions .primary,
  .tile-hero .actions .secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .tile-hero .marker {
    font-size: 12px;
    padding: 5px 10px;
  }

  .tile-qr { padding: 22px; border-radius: 22px; }
  .tile-qr h3 { font-size: 20px; }
  .tile-qr .qr { max-width: 240px; }
  .tile-qr .meta {
    grid-template-columns: 1fr 1fr;
  }

  .tile-phone { padding: 22px; min-height: 280px; border-radius: 22px; }
  .tile-noapp { padding: 22px; border-radius: 22px; }
  .tile-noapp h3 { font-size: 22px; line-height: 1.1; }
  .tile-noapp p { font-size: 14px; }
  .tile-vibe { padding: 22px; border-radius: 22px; }
  .tile-vibe h3 { font-size: 20px; }
  .tile-vibe .chip { font-size: 13px; padding: 8px 14px; }
  .tile-browser { padding: 22px; border-radius: 22px; }
  .tile-browser h3 { font-size: 20px; }

  .moments {
    padding: 16px 14px 40px;
  }
  .moments-h { font-size: 30px; }
  .moments-sub { font-size: 14px; }
  .moments-grid { gap: 12px; }
  .moment {
    padding: 22px;
    border-radius: 18px;
  }
  .moment h3 { font-size: 19px; }
  .moment p { font-size: 14px; }

  /* ===== ABOUT PAGE ===== */
  .tile-about-title { padding: 28px 22px; border-radius: 22px; }
  .tile-about-title h1 { font-size: 36px; line-height: 1.0; }
  .tile-about-title .deck { font-size: 15px; }
  .tile-about-promise { padding: 24px; border-radius: 22px; }
  .tile-about-promise .quote { font-size: 19px; }
  .tile-about-prose { padding: 24px 22px; border-radius: 22px; }
  .tile-about-prose h2 { font-size: 24px; }
  .tile-about-prose .body p { font-size: 14px; }
  .tile-about-isnt { padding: 24px 22px; border-radius: 22px; }
  .tile-about-isnt h2 { font-size: 22px; }
  .tile-about-isnt p { font-size: 14px; }
  .tile-about-age { padding: 24px; border-radius: 22px; }
  .tile-about-age .number { font-size: 64px; }
  .tile-about-age p { font-size: 13px; }
  .tile-about-company { padding: 24px; border-radius: 22px; }
  .tile-about-company h3 { font-size: 19px; }
  .tile-about-reach { padding: 24px; border-radius: 22px; }
  .tile-about-reach h2 { font-size: 22px; }
  .tile-about-back { padding: 20px; border-radius: 22px; }

  /* ===== DOC PAGES ===== */
  .doc-hero { padding: 36px 18px 56px; }
  .doc-hero h1 {
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .doc-hero .subtitle { font-size: 14px; }
  .doc-hero .doc-meta {
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
  }
  .doc-hero .doc-meta .item::before { display: none; }
  .doc-badge { font-size: 12px; padding: 6px 14px; }

  .doc-content { padding: 0 14px 40px; }
  .doc-summary {
    flex-direction: column;
    align-items: flex-start;
    margin-top: -32px;
    padding: 18px 20px;
    gap: 10px;
    border-radius: 14px;
  }
  .doc-summary .icon { width: 38px; height: 38px; font-size: 22px; border-radius: 10px; }
  .doc-summary h3 { font-size: 16px; }
  .doc-summary p { font-size: 13px; }

  .doc-section { border-radius: 12px; margin-bottom: 14px; }
  .doc-section-head { padding: 16px 18px; gap: 12px; }
  .doc-section-num {
    width: 32px; height: 32px;
    border-radius: 9px;
    font-size: 13px;
  }
  .doc-section-head h2 { font-size: 17px; }
  .doc-section-body { padding: 18px 20px; }
  .doc-section-body p, .doc-list li { font-size: 14px; line-height: 1.55; }

  /* Rule cards (T&S 04) */
  .doc-rule { padding: 18px; border-radius: 14px; }
  .doc-rule h4 { font-size: 16px; }
  .doc-rule p { font-size: 12px; }

  /* Comparison grid */
  .doc-card { padding: 16px 18px; }
  .doc-card h4 { font-size: 14px; }
  .doc-card ul li { font-size: 12px; }

  /* Tables: stacked card style on phone */
  .doc-table-wrap {
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .doc-table {
    display: block;
  }
  .doc-table thead { display: none; }
  .doc-table tbody, .doc-table tr {
    display: block;
  }
  .doc-table tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .doc-table tr:last-child { margin-bottom: 0; }
  .doc-table td {
    display: block;
    padding: 6px 0;
    border: none;
    font-size: 13px;
    line-height: 1.5;
  }
  .doc-table td:first-child {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .doc-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2px;
  }

  /* Crisis table — same stacked pattern */
  .doc-crisis-table { display: block; }
  .doc-crisis-table thead { display: none; }
  .doc-crisis-table tbody, .doc-crisis-table tr { display: block; }
  .doc-crisis-table tr {
    background: rgba(255,255,255,0.85);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-bottom: 0;
  }
  .doc-crisis-table tr:last-child { margin-bottom: 0; }
  .doc-crisis-table td {
    display: block;
    padding: 4px 0;
    border: none;
    font-size: 12px;
  }
  .doc-crisis-table td:first-child {
    font-weight: 700; font-size: 13px;
    color: var(--ink); margin-bottom: 2px;
  }
  .doc-crisis-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2px;
  }

  /* Contact box on phone */
  .doc-contact { padding: 22px; border-radius: 14px; }
  .doc-contact h3 { font-size: 17px; }
  .doc-contact > p { font-size: 13px; }
  .doc-contact-card { padding: 12px 14px; border-radius: 10px; }
  .doc-contact-card .email { font-size: 13px; }

  /* Callouts */
  .doc-callout { padding: 14px 16px; }
  .doc-callout p { font-size: 13px; }

  .doc-back { padding: 18px 20px; gap: 12px; border-radius: 14px; }
  .doc-back h3 { font-size: 16px; }

  /* ===== DEMO PAGE ===== */
  #demo .demo-content { padding: 12px 14px 40px; }
  #demo .demo-hero { padding: 28px 22px; border-radius: 18px; }
  #demo .demo-hero h1 { font-size: 36px; line-height: 1.0; }
  #demo .demo-hero .deck { font-size: 15px; }

  #demo .demo-step {
    padding: 24px 22px;
    gap: 22px;
    border-radius: 18px;
  }
  #demo .demo-step-text h2 { font-size: 26px; }
  #demo .demo-step-text p { font-size: 14px; }
  #demo .demo-step-text .num {
    width: 40px; height: 40px;
    border-radius: 11px;
    font-size: 13px;
  }
  #demo .demo-step-text .hint { font-size: 12px; }

  #demo .demo-phone {
    width: 200px; height: 408px;
  }
  #demo .demo-phone-wrap::before {
    width: 280px; height: 280px;
  }

  /* Step 5 mic + speech sizes scale down */
  #demo .shot-step5 .speech { font-size: 10px; padding: 9px 12px; }
  #demo .shot-step5 .mic { width: 48px; height: 48px; font-size: 18px; }
  #demo .shot-step5 .ctl-side { width: 34px; height: 34px; font-size: 12px; }

  #demo .demo-cta { padding: 28px 22px; border-radius: 18px; }
  #demo .demo-cta h2 { font-size: 26px; }
  #demo .demo-cta p { font-size: 14px; }

  /* Stub-page tiles */
  .tile-stub-title { padding: 28px 22px; }
  .tile-stub-aside { padding: 24px; }
  .tile-stub-skeleton { padding: 24px; }
  .tile-stub-back { padding: 22px; }
  .tile-stub-title h1 { font-size: 34px; }
}

/* ============================================================
   REDIRECT REASON OVERLAY
   Shown once when the user lands on this page via device-check.js
   with a ?reason= query parameter explaining why they were redirected
   from the main site. Backdrop blurs the page behind it.
   ============================================================ */
#redirect-overlay {
  /* Re-declare design tokens here because they're scoped to .page on this site
     and this overlay sits outside .page (at the end of <body>) for stacking. */
  --paper: #F2E8D6;
  --tile: #ffffff;
  --ink: #211608;
  --ink-soft: #6E5C45;
  --blue: #FF3B1F;
  --blue-soft: #FDEAE2;
  --pink: #FFB81C;

  position: fixed; inset: 0; z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: redirectOverlayFade 0.25s ease-out;
}
#redirect-overlay.visible { display: flex; }
@keyframes redirectOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#redirect-overlay .ro-card:focus { outline: none; }
#redirect-overlay .ro-card {
  background: #fff;
  border-radius: 22px;
  padding: 36px 36px 30px;
  max-width: 460px; width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  position: relative;
  animation: redirectCardRise 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes redirectCardRise {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#redirect-overlay .ro-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
#redirect-overlay .ro-eyebrow::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue);
}
#redirect-overlay .ro-title {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 12px;
}
#redirect-overlay .ro-title .accent {
  background-image: linear-gradient(90deg, var(--blue), var(--pink));
  background-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
#redirect-overlay .ro-body {
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 22px;
}
#redirect-overlay .ro-body strong { color: var(--ink); font-weight: 600; }
#redirect-overlay .ro-actions {
  display: flex; justify-content: flex-end;
  margin-top: 6px;
}
#redirect-overlay .ro-qr-slot {
  display: flex; flex-direction: column; align-items: center;
  margin: 4px 0 18px;
}
#redirect-overlay .ro-qr-slot[hidden] { display: none; }
#redirect-overlay .ro-qr-frame {
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 10px;
  width: 160px; height: 160px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  display: flex; align-items: center; justify-content: center;
}
#redirect-overlay .ro-qr-frame img {
  width: 100%; height: 100%;
  display: block;
}
#redirect-overlay .ro-qr-caption {
  text-align: center;
  margin-top: 12px;
  font-size: 12.5px; color: var(--ink-soft);
  letter-spacing: -0.005em;
}
@media (max-width: 540px) {
  #redirect-overlay .ro-qr-frame { width: 140px; height: 140px; }
}
#redirect-overlay .ro-skip {
  /* De-emphasized text link. Visible to users who deliberately seek an out;
     muted enough that skim-readers do not gravitate to it. */
  background: transparent;
  border: none;
  padding: 6px 2px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
#redirect-overlay .ro-skip:hover {
  color: var(--ink);
}
#redirect-overlay .ro-skip:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
  border-radius: 4px;
}
#redirect-overlay .ro-skip .arrow {
  transition: transform 0.15s;
}
#redirect-overlay .ro-skip:hover .arrow {
  transform: translateX(2px);
}
@media (max-width: 540px) {
  #redirect-overlay .ro-card { padding: 28px 24px 24px; border-radius: 18px; }
  #redirect-overlay .ro-title { font-size: 20px; }
  #redirect-overlay .ro-body { font-size: 14px; }
}

/* ============================================================
   UNIVERSAL REDUCED-MOTION SAFETY NET
   Disables all CSS animations and transitions for users who set
   prefers-reduced-motion. Specific tile-level rules elsewhere
   (phone tilt, video fade) already provide their own targeted
   handling; this block catches anything not individually addressed.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.alt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(12px,1.4vw,18px);}
        .alt-card{background:linear-gradient(135deg, var(--tile) 0%, var(--tile-2) 100%); border:1px solid var(--line); border-radius:18px; padding:clamp(20px,2.4vw,28px);}
        .alt-card .stat{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(28px,3.2vw,38px); line-height:1; letter-spacing:-0.03em; background:linear-gradient(90deg,var(--blue),var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; display:inline-block;}
        .alt-card .ic{width:38px; height:38px; border-radius:11px; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1;}
        .alt-card h4{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-0.01em; margin:12px 0 0;}
        .alt-card p{font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.45; color:var(--ink-soft); margin:5px 0 0;}

.tech-feat{display:flex; gap:clamp(24px,4vw,56px); align-items:center; background:linear-gradient(135deg,var(--tile) 0%,var(--tile-2) 100%); border:1px solid var(--line); border-radius:24px; padding:clamp(26px,3.6vw,48px); margin-top:clamp(14px,1.8vw,22px);}
        .tech-feat.rev{flex-direction:row-reverse;}
        .tech-feat .txt{flex:1 1 300px; min-width:0;}
        .tech-feat .txt .eb{display:inline-block; font-family:'Inter Tight',sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:12px;}
        .tech-feat .txt h3{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(23px,2.6vw,34px); letter-spacing:-0.03em; color:var(--ink); margin:0;}
        .tech-feat .txt p{font-family:'Inter',sans-serif; font-size:clamp(15px,1.35vw,18px); line-height:1.55; color:var(--ink-soft); margin:12px 0 0; max-width:46ch;}
        .tech-feat .viz{flex:1 1 300px; min-width:0; display:flex; align-items:center; justify-content:center; min-height:196px;}
        /* routing */
        .viz-route{display:flex; flex-direction:column; gap:13px; width:100%; max-width:320px;}
        .viz-route .row{display:flex; align-items:center; gap:10px;}
        .viz-route .job{flex:0 0 96px; display:flex; align-items:center; gap:7px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:13px; color:var(--ink); background:var(--tile); border:1px solid var(--line); border-radius:10px; padding:8px 11px;}
        .viz-route .wire{flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--blue) 0 5px,transparent 5px 11px); opacity:.5;}
        .viz-route .chip{flex:0 0 auto; width:46px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--blue),var(--pink)); box-shadow:0 5px 14px rgba(255,59,31,.22);}
        .viz-route .tag{align-self:flex-start; margin-top:5px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:11.5px; color:var(--blue); background:var(--blue-soft); padding:6px 12px; border-radius:999px;}
        /* waveform */
        .viz-wave{display:flex; align-items:center; gap:5px; height:130px;}
        .viz-wave i{display:block; width:8px; border-radius:5px; background:linear-gradient(180deg,var(--pink),var(--blue)); height:22px; animation:vizWave 1.2s ease-in-out infinite;}
        @keyframes vizWave{0%,100%{height:20px; opacity:.6;} 50%{height:98px; opacity:1;}}
        /* phone presence */
        .viz-phone{width:158px; height:202px; border-radius:26px; border:3px solid var(--ink); background:linear-gradient(180deg,#fff 0%,var(--tile-2) 100%); position:relative; overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.12);}
        .viz-phone .floor{position:absolute; left:-20%; right:-20%; bottom:0; height:46%; background:var(--blue-soft); background-image:repeating-linear-gradient(180deg,rgba(255,59,31,.15) 0 1px,transparent 1px 15px);}
        .viz-phone .sh{position:absolute; left:50%; bottom:20%; transform:translateX(-50%); width:58px; height:11px; border-radius:50%; background:rgba(0,0,0,.16); filter:blur(2px);}
        .viz-phone .fig{position:absolute; left:50%; bottom:23%; transform:translateX(-50%); width:38px; height:78px; border-radius:20px 20px 10px 10px; background:linear-gradient(180deg,var(--pink),var(--blue)); box-shadow:0 8px 18px rgba(255,59,31,.28);}
        .viz-phone .fig::after{content:""; position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:23px; height:23px; border-radius:50%; background:var(--pink);}
        .viz-phone .badge{position:absolute; top:11px; left:50%; transform:translateX(-50%); font-family:'Inter Tight',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.06em; background:var(--ink); color:#fff; padding:4px 10px; border-radius:999px;}
        /* shield */
        .viz-shield{position:relative; width:132px; height:150px; display:flex; align-items:center; justify-content:center;}
        .viz-shield .ring{position:absolute; width:120px; height:120px; border-radius:50%; border:1.5px solid var(--blue); opacity:.3; animation:vizPulse 2.8s ease-out infinite;}
        .viz-shield .ring.r2{animation-delay:1.4s;}
        .viz-shield .sh{width:94px; height:114px; background:linear-gradient(135deg,var(--blue),var(--pink)); clip-path:polygon(50% 0,100% 16%,100% 54%,50% 100%,0 54%,0 16%); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(255,59,31,.24);}
        @keyframes vizPulse{0%{transform:scale(.68); opacity:.4;} 100%{transform:scale(1.18); opacity:0;}}
        @media(max-width:760px){.tech-feat,.tech-feat.rev{flex-direction:column;} .tech-feat .viz{width:100%;}}
        @media(prefers-reduced-motion:reduce){.viz-wave i,.viz-shield .ring{animation:none !important;} .viz-wave i{height:58px;}}

.spd-steps{display:flex; align-items:flex-start; width:100%; margin-top:0;}
        .spd-step{box-sizing:border-box; padding-right:16px; min-width:0;}
        .spd-tick{width:2px; height:10px; border-radius:2px; margin:0 0 9px 10px;}
        .spd-ms{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:15px; color:var(--ink); letter-spacing:-0.02em; white-space:nowrap;}
        .spd-title{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:13px; color:var(--ink); margin-top:1px; letter-spacing:-0.01em;}
        .spd-desc{font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.4; color:var(--ink-soft); margin-top:4px;}
        .spd-step.compact .spd-desc{display:none;}
        .spd-shield{display:flex; gap:12px; align-items:flex-start;}
        .spd-shield .ic{flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1;}
        .spd-shield h4{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-0.01em; margin:0;}
        .spd-shield p{font-family:'Inter',sans-serif; font-size:13px; line-height:1.45; color:var(--ink-soft); margin:3px 0 0;}
        @media (max-width:820px){
          .spd-steps{flex-direction:column; gap:14px;}
          .spd-step{flex:none !important; width:100% !important; padding-right:0; display:flex; gap:12px; align-items:flex-start;}
          .spd-tick{width:12px !important; height:12px !important; border-radius:50% !important; margin:4px 0 0 !important; flex:0 0 auto;}
          .spd-step.compact .spd-desc{display:block;}
          .spd-ms{font-size:15px;} .spd-title{font-size:14px;} .spd-desc{font-size:13px;}
        }

/* ===== Latency report modal (about "How fast") ===== */
    .lr-trigger{display:inline-flex; align-items:center; gap:10px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:14px; color:#fff; background:linear-gradient(90deg,var(--blue),var(--pink)); border:none; border-radius:999px; padding:11px 20px; cursor:pointer; box-shadow:0 8px 22px rgba(255,59,31,0.22); transition:transform .15s, box-shadow .15s;}
    .lr-trigger:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(255,59,31,0.28);}
    .lr-trigger svg{flex:0 0 auto;}
    .lr-trigger-arr{transition:transform .15s;}
    .lr-trigger:hover .lr-trigger-arr{transform:translateX(3px);}

    .lr-backdrop{position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:clamp(12px,4vw,48px); background:rgba(20,12,6,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; overflow-y:auto;}
    .lr-backdrop.open{opacity:1; visibility:visible;}
    .lr-modal{position:relative; width:100%; max-width:780px; margin:auto; background:var(--paper, #F2E8D6); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,0.35); transform:translateY(16px) scale(0.985); transition:transform .28s cubic-bezier(.2,.8,.2,1); overflow:hidden;}
    .lr-backdrop.open .lr-modal{transform:none;}

    .lr-head{position:sticky; top:0; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:clamp(22px,3vw,30px) clamp(22px,3.4vw,38px) 16px; background:var(--paper,#F2E8D6); border-bottom:1px solid var(--line);}
    .lr-head .lr-eyebrow{font-family:'Inter Tight',sans-serif; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:7px;}
    .lr-head .lr-eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--pink));}
    .lr-head h2{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(20px,2.6vw,26px); letter-spacing:-0.03em; color:var(--ink); margin:9px 0 3px; line-height:1.1;}
    .lr-head .lr-sub{font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-soft); margin:0;}
    .lr-close{flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, transform .15s;}
    .lr-close:hover{background:var(--paper); transform:rotate(90deg);}

    .lr-body{padding:clamp(18px,2.6vw,26px) clamp(22px,3.4vw,38px) clamp(26px,3.4vw,38px);}
    .lr-tldr{background:var(--blue-soft); border:1px solid var(--line); border-radius:16px; padding:16px 18px; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:clamp(15px,1.7vw,18px); line-height:1.45; color:var(--ink); letter-spacing:-0.01em; margin-bottom:clamp(20px,2.6vw,28px);}
    .lr-tldr b{background:linear-gradient(90deg,var(--blue),var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

    .lr-sec{margin-top:clamp(24px,3vw,34px);}
    .lr-sec-h{font-family:'Inter Tight',sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;}

    .lr-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
    .lr-stat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px;}
    .lr-stat .v{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(34px,5vw,46px); line-height:1; letter-spacing:-0.04em; background:linear-gradient(90deg,var(--blue),var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
    .lr-stat .k{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:13px; color:var(--ink); margin-top:8px;}
    .lr-stat .d{font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.4;}

    .lr-parts-bar{display:flex; width:100%; height:18px; border-radius:999px; overflow:hidden; border:1px solid var(--line); margin-bottom:12px;}
    .lr-parts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
    .lr-part{background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 14px;}
    .lr-part .dot{width:9px; height:9px; border-radius:50%; margin-bottom:8px;}
    .lr-part .v{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:18px; color:var(--ink); letter-spacing:-0.02em;}
    .lr-part .k{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:12.5px; color:var(--ink); margin-top:2px;}
    .lr-part .d{font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-soft); margin-top:4px; line-height:1.4;}

    .lr-chart{position:relative; height:190px; margin:2px 0 0; padding-left:38px;}
    .lr-chart .axis{position:absolute; left:38px; right:0; bottom:0; top:0; border-left:1px solid var(--line); border-bottom:1px solid var(--line);}
    .lr-grid{position:absolute; left:38px; right:0; border-top:1px dotted var(--line);}
    .lr-grid span{position:absolute; left:-36px; top:-7px; font-family:'Inter Tight',sans-serif; font-size:9px; color:var(--ink-soft);}
    .lr-med{position:absolute; left:38px; right:0; border-top:2px dashed var(--pink); z-index:2;}
    .lr-med span{position:absolute; right:2px; top:-9px; background:var(--pink); color:#fff; font-family:'Inter Tight',sans-serif; font-size:9px; font-weight:800; padding:2px 7px; border-radius:7px; white-space:nowrap;}
    .lr-bars{position:absolute; left:38px; right:0; bottom:0; top:0; display:flex; align-items:flex-end; gap:4px; padding:0 6px 0;}
    .lr-bars i{position:relative; flex:1; min-width:0; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--blue),var(--pink)); opacity:.9;}
    .lr-bars i em{position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-family:'Inter Tight',sans-serif; font-style:normal; font-size:8.5px; font-weight:700; color:var(--ink-soft);}
    .lr-bars i.out{background:repeating-linear-gradient(-45deg,#e7d6b6,#e7d6b6 3px,#f0e6cf 3px,#f0e6cf 6px); border:1px solid #d8c39a; border-bottom:none; opacity:1;}
    .lr-bars i.out em{color:#b27e2c;}
    .lr-chartx{font-family:'Inter',sans-serif; font-size:10.5px; color:var(--ink-soft); text-align:right; margin-top:8px;}

    .lr-callouts{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
    .lr-callouts span{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:12px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px;}
    .lr-callouts span b{color:var(--blue);}
    .lr-note{font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin:14px 0 0;}
    .lr-note b{color:var(--ink);}

    .lr-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
    .lr-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 16px;}
    .lr-card .ic{font-size:18px; margin-bottom:8px; display:block;}
    .lr-card h4{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); margin:0 0 4px;}
    .lr-card p{font-family:'Inter',sans-serif; font-size:12px; line-height:1.45; color:var(--ink-soft); margin:0;}

    .lr-list{display:flex; flex-direction:column; gap:10px;}
    .lr-li{display:flex; gap:12px; align-items:flex-start;}
    .lr-li .n{flex:0 0 auto; width:24px; height:24px; border-radius:8px; background:var(--blue-soft); color:var(--blue); font-family:'Inter Tight',sans-serif; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;}
    .lr-li .t{font-family:'Inter',sans-serif; font-size:13px; line-height:1.5; color:var(--ink-soft);}
    .lr-li .t b{font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--ink);}

    .lr-strict{background:var(--blue-soft); border:1px solid var(--line); border-radius:16px; padding:16px 18px; font-family:'Inter',sans-serif; font-size:13px; line-height:1.55; color:var(--ink-soft);}
    .lr-strict b{font-family:'Inter Tight',sans-serif; color:var(--ink);}
    .lr-foot{font-family:'Inter',sans-serif; font-size:11.5px; line-height:1.5; color:var(--ink-soft); opacity:.85; margin:clamp(22px,2.6vw,30px) 0 0; padding-top:16px; border-top:1px solid var(--line);}

    @media (max-width:560px){ .lr-parts{grid-template-columns:1fr;} .lr-bars i em{font-size:7px;} }
    @media (prefers-reduced-motion: reduce){ .lr-backdrop,.lr-modal,.lr-trigger,.lr-close,.lr-trigger-arr{transition:none;} }

/* ===== Live system status (OneUptime) ===== */
    #status .status-wrap{max-width:880px; margin:0 auto; padding:clamp(12px,2.4vw,24px) clamp(20px,4vw,32px) clamp(56px,8vw,100px);}
    #status .status-panel{background:var(--tile); border:1px solid var(--line); border-radius:24px; padding:clamp(26px,4vw,48px) clamp(22px,3.4vw,40px);}
    #status .status-head{margin-bottom:0;}
    #status .status-overall{display:flex; align-items:center; gap:14px; margin:14px 0 8px;}
    #status .status-dot{width:16px; height:16px; border-radius:50%; background:var(--ink-soft); flex:0 0 auto; transition:background .3s, box-shadow .3s;}
    #status .status-overall h1{font-family:'Inter Tight',sans-serif; font-weight:800; font-size:clamp(30px,5vw,46px); letter-spacing:-0.03em; color:var(--ink); margin:0; line-height:1.04;}
    #status .status-sub{font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink-soft); margin:0; letter-spacing:-0.005em;}

    #status .status-monitors{display:flex; flex-direction:column; gap:0; margin-top:clamp(22px,3vw,30px); padding-top:clamp(22px,3vw,30px); border-top:1px solid var(--line);}
    #status .status-loading{font-family:'Inter',sans-serif; font-size:14px; color:var(--ink-soft); padding:22px 2px;}
    #status .mon-card + .mon-card{margin-top:clamp(20px,2.6vw,28px); padding-top:clamp(20px,2.6vw,28px); border-top:1px solid var(--line);}
    #status .mon-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px;}
    #status .mon-name{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:clamp(15px,1.8vw,18px); color:var(--ink); letter-spacing:-0.01em;}
    #status .mon-status{display:inline-flex; align-items:center; gap:7px; font-family:'Inter Tight',sans-serif; font-weight:700; font-size:12.5px; white-space:nowrap;}
    #status .mon-status .d{width:9px; height:9px; border-radius:50%; background:currentColor; flex:0 0 auto;}
    #status .mon-bars{display:flex; align-items:stretch; gap:2px; height:38px; margin-bottom:10px;}
    #status .mon-bars .bar{flex:1 1 0; min-width:0; border-radius:2px; background:var(--line); transition:opacity .15s, transform .12s; transform-origin:center bottom;}
    #status .mon-bars .bar:hover{opacity:.75; transform:scaleY(1.1);}
    #status .mon-axis{display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-soft);}
    #status .mon-axis .up{font-family:'Inter Tight',sans-serif; font-weight:700; color:var(--ink); letter-spacing:-0.01em;}

    #status .status-error{background:var(--blue-soft); border:1px solid var(--line); border-radius:16px; padding:18px 20px;}
    #status .status-error p{font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink-soft); margin:0 0 12px; line-height:1.5;}
    #status .status-error button{font-family:'Inter Tight',sans-serif; font-weight:700; font-size:13px; color:#fff; background:linear-gradient(90deg,var(--blue),var(--pink)); border:none; border-radius:999px; padding:9px 18px; cursor:pointer;}
    #status .status-foot{font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-soft); margin:clamp(26px,3.4vw,38px) 0 0; padding-top:18px; border-top:1px solid var(--line); line-height:1.5;}
    #status .status-foot a{color:var(--blue); text-decoration:none; font-weight:600;}
    #status .status-foot a:hover{text-decoration:underline;}
    @media (max-width:560px){ #status .mon-bars{height:32px;} #status .mon-top{flex-wrap:wrap; gap:8px;} }