:root {
    --paper: #faf8f3;
    --cream: #f4f1e8;
    --ink: #0f0d07;
    --ink-soft: #4a4738;
    --ink-mute: #8f8b7e;
    --line: rgba(15, 13, 7, 0.08);
    --line-strong: rgba(15, 13, 7, 0.14);
    --indigo: #3730d8;
    --indigo-soft: #6b67e6;
    --coral: #ff6b4a;
    --amber: #f5b544;
    /* IK_App dashboard tokens (mirrors IK_app/frontend/src/app/globals.css :root) */
    --ik-bg: oklch(1 0 0);
    --ik-fg: oklch(0.145 0 0);
    --ik-card: oklch(1 0 0);
    --ik-border: oklch(0.922 0 0);
    --ik-muted: oklch(0.97 0 0);
    --ik-muted-fg: oklch(0.556 0 0);
    --ik-sidebar: oklch(0.985 0 0);
    --ik-sidebar-fg: oklch(0.145 0 0);
    --ik-sidebar-border: oklch(0.922 0 0);
    --ik-sidebar-accent: oklch(0.97 0 0);
    --ik-primary: oklch(0.205 0 0);
    --ik-primary-fg: oklch(0.985 0 0);
    --ik-radius: 0.625rem;
  }

  /* IK_App shell: sidebar 260px, header h-14 — see IK_app/frontend Sidebar + Header */
  .ik-app-shell {
    display: flex;
    min-height: 0;
    align-items: stretch;
    background: var(--ik-bg);
    color: var(--ik-fg);
    font-size: 13px;
    line-height: 1.4;
  }
  .ik-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--ik-sidebar);
    border-right: 1px solid var(--ik-sidebar-border);
  }
  .ik-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 64px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ik-sidebar-border);
  }
  .ik-sidebar-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--ik-radius);
    background: var(--ik-primary);
    color: var(--ik-primary-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .ik-sidebar-nav {
    padding: 8px;
    flex: 1;
  }
  .ik-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ik-radius);
    color: var(--ik-muted-fg);
    font-size: 13px;
    margin-bottom: 2px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .ik-sidebar-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
  }
  .ik-sidebar-link.is-active {
    background: var(--ik-sidebar-accent);
    color: var(--ik-sidebar-fg);
    font-weight: 500;
  }
  .ik-main-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--ik-bg);
  }
  .ik-header {
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--ik-border);
    background: var(--ik-card);
  }
  .ik-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    flex-wrap: wrap;
  }
  .ik-breadcrumb .ik-crumb {
    color: var(--ik-muted-fg);
  }
  .ik-breadcrumb .ik-crumb:hover {
    color: var(--ik-fg);
  }
  .ik-breadcrumb .ik-sep {
    color: var(--ik-muted-fg);
    opacity: 0.55;
    font-size: 12px;
  }
  .ik-breadcrumb .ik-current {
    font-weight: 500;
    color: var(--ik-fg);
  }
  .ik-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ik-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: oklch(0.93 0.05 250);
    color: oklch(0.45 0.15 250);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Compact IK strip for smaller mock cards (single bar) */
  .ik-mock-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ik-border);
    background: var(--ik-card);
    font-size: 12px;
    color: var(--ik-muted-fg);
  }
  .ik-mock-strip .ik-url {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ik-muted-fg);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html { scroll-behavior: smooth; }

  /* Offset anchor scroll so targets land below the sticky 64px nav */
  section[id] {
    scroll-margin-top: 72px;
  }

  body {
    font-family: 'Geist', sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
  }

  /* Grain texture overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  .serif { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
  .serif-i { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
  .mono { font-family: 'Geist Mono', monospace; }

  /* i18n: highlights injected via JSON (<em class="hl*">) */
  em.hl {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-size: 1.1em;
    padding-inline-end: 0.35rem;
    background-image: linear-gradient(90deg, var(--indigo), var(--coral), var(--indigo));
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: gradShift 3.5s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  em.hl-sm {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-size: 1.05em;
    color: rgba(15, 13, 7, 0.55);
  }
  em.hl-ink {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: rgba(15, 13, 7, 0.55);
  }
  em.hl-coral {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--coral);
  }
  em.hl-indigo {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--indigo);
  }
  em.hl-emerald {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #047857;
  }
  em.hl-grad {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    background-image: linear-gradient(90deg, var(--indigo-soft), var(--indigo), var(--coral));
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: gradShift 3.5s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  em.hl-quote {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: rgba(15, 13, 7, 0.85);
  }
  @media (prefers-reduced-motion: reduce) {
    em.hl, em.hl-grad { animation: none; }
  }

  /* Hero gradient wash */
  .hero-wash {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(55, 48, 216, 0.10), transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255, 107, 74, 0.08), transparent 60%),
      radial-gradient(ellipse 50% 40% at 15% 30%, rgba(107, 103, 230, 0.08), transparent 60%);
  }

  /* Decorative dot grid */
  .dot-grid {
    background-image: radial-gradient(circle at center, rgba(15,13,7,0.15) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Fine top-border hairlines */
  .hair {
    border-top: 1px solid var(--line);
  }
  .hair-b {
    border-bottom: 1px solid var(--line);
  }

  /* Chip / pill badge */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    backdrop-filter: blur(8px);
  }
  .chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.18);
  }

  /* Primary CTA button */
  .btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 12px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 10px 30px -15px rgba(15, 13, 7, 0.5);
    overflow: hidden;
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
  }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary:hover::before { transform: translateX(100%); }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: rgba(255,255,255,0.6);
    color: var(--ink);
    border-radius: 12px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .btn-secondary:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); }

  /* ============================================================
     Hero Try-input: job-title input welded to the primary CTA.
     Posts (GET) to ./interview-demo.html so keyboard/no-JS users
     still reach the demo. JS enhances with a pre-emptive mic
     permission prompt before navigating.

     Visual: a 2.5px animated "snake" gradient stroke loops around
     the pill using @property + conic-gradient. The form itself has
     a neutral padding-box background; the gradient lives on ::before
     with a mask so only the ring shows. Safari 16.4+, Chrome 85+,
     Firefox 128+ honor @property; older browsers see a static arc.
     ============================================================ */
  @property --hero-try-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  .hero-try-form {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    height: 54px;
    padding: 4px;
    padding-inline-start: 16px;
    background: rgba(255, 255, 255, 0.7);
    background-clip: padding-box;
    border: 2.5px solid transparent;  /* space for the animated gradient ring */
    border-radius: 14px;
    backdrop-filter: blur(8px);
    transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 1px 2px rgba(15, 13, 7, 0.03),
      0 10px 30px -20px rgba(15, 13, 7, 0.15);
    max-width: 100%;
    isolation: isolate;
  }

  /* Animated gradient "snake" stroke — looping conic arc rotated via
     the custom --hero-try-angle property. Rendered inside the 2.5px
     border gutter using the standard border-mask trick. */
  .hero-try-form::before {
    content: "";
    position: absolute;
    inset: -2.5px;
    border-radius: inherit;
    padding: 2.5px;
    background: conic-gradient(
      from var(--hero-try-angle),
      transparent 0deg,
      transparent 200deg,
      var(--indigo-soft) 250deg,
      var(--indigo) 295deg,
      var(--coral) 335deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
            mask-composite: exclude;
    animation: hero-try-snake 3.2s linear infinite;
    pointer-events: none;
    z-index: 0;
  }

  /* Soft outer halo that brightens with the snake — purely decorative. */
  .hero-try-form::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 20px;
    background: conic-gradient(
      from var(--hero-try-angle),
      transparent 0deg,
      transparent 210deg,
      rgba(55, 48, 216, 0.25) 275deg,
      rgba(255, 107, 74, 0.25) 325deg,
      transparent 360deg
    );
    filter: blur(14px);
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
    animation: hero-try-snake 3.2s linear infinite;
  }

  @keyframes hero-try-snake {
    to { --hero-try-angle: 360deg; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-try-form::before,
    .hero-try-form::after {
      animation: none;
    }
  }

  .hero-try-form:focus-within {
    background: #fff;
    transform: translateY(-1px);
    box-shadow:
      0 0 0 3px rgba(55, 48, 216, 0.12),
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 12px 34px -20px rgba(15, 13, 7, 0.2);
  }
  .hero-try-form:focus-within::before {
    animation-duration: 1.8s; /* accelerate the snake when user is typing */
  }
  .hero-try-form:focus-within::after {
    opacity: 0.8;
    animation-duration: 1.8s;
  }
  .hero-try-form .hero-try-icon {
    align-self: center;
    color: var(--ink-mute);
    flex-shrink: 0;
    margin-inline-end: 10px;
  }
  .hero-try-form .hero-try-input {
    flex: 1;
    min-width: 0;
    width: 240px;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0 10px;
    font-family: inherit;
    font-size: 14.5px;
    letter-spacing: -0.005em;
    color: var(--ink);
    min-height: 44px;
  }
  .hero-try-form .hero-try-input::placeholder {
    color: var(--ink-mute);
    opacity: 1;
  }
  .hero-try-form .hero-try-btn {
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    min-height: 44px;
    gap: 8px;
  }
  .hero-try-form[data-loading="true"] .hero-try-btn {
    opacity: 0.75;
    pointer-events: none;
  }
  /* Subtle inline spinner shown while pre-requesting mic permission */
  .hero-try-form[data-loading="true"] .hero-try-btn::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    margin-inline-start: 2px;
    animation: spin 0.8s linear infinite;
  }
  /* Mobile: stack vertically so the input gets full width */
  @media (max-width: 639px) {
    .hero-try-form {
      display: flex;
      width: 100%;
      max-width: 420px;
      height: auto;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 10px;
      padding-inline-start: 10px;
    }
    .hero-try-form .hero-try-icon {
      display: none;
    }
    .hero-try-form .hero-try-input {
      width: 100%;
      padding: 10px 12px;
      background: rgba(15, 13, 7, 0.03);
      border-radius: 10px;
    }
    .hero-try-form .hero-try-btn {
      width: 100%;
      justify-content: center;
      min-height: 46px;
    }
  }

  /* Section label */
  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-soft);
  }
  .section-label::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--ink-soft);
  }

  /* Card base */
  .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow:
      0 1px 2px rgba(15, 13, 7, 0.03),
      0 8px 24px -12px rgba(15, 13, 7, 0.08);
  }

  .card-premium {
    background: linear-gradient(180deg, #fff 0%, #fdfcf8 100%);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 1px 2px rgba(15, 13, 7, 0.04),
      0 20px 50px -20px rgba(15, 13, 7, 0.12);
  }

  /* Reveal animations */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }
  /* No JS / scripting disabled: do not hide half the page */
  @media (scripting: none) {
    .reveal,
    .reveal-stagger > * {
      opacity: 1;
      transform: none;
    }
  }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-stagger.in > * {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
  .reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; }

  /* Hero headline reveal */
  @keyframes heroLineIn {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .hero-line {
    display: block;
    opacity: 0;
    animation: heroLineIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Animated gradient text — soft, seamless flow between two brand colors.
     We override Tailwind's gradient stops with a repeating 2-color pattern
     (indigo → coral → indigo) so the loop has no visible seam. */
  @keyframes gradShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  .grad-shift {
    background-image: linear-gradient(90deg, var(--indigo), var(--coral), var(--indigo)) !important;
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: gradShift 3.5s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .grad-shift { animation: none; }
  }

  /* Brand logo SVG: viewBox includes a tiny top empty band; ensure descenders/letters
     never get clipped by parent overflow. */
  .brand-logo { overflow: visible; }
  .hero-line:nth-child(1) { animation-delay: 0.15s; }
  .hero-line:nth-child(2) { animation-delay: 0.30s; }
  .hero-line:nth-child(3) { animation-delay: 0.45s; }

  @keyframes fadeUp {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .fade-up { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* Orbital voice wave */
  @keyframes orbit-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 1; }
  }
  .orbit-ring {
    animation: orbit-pulse 2.4s ease-in-out infinite;
  }
  .orbit-ring-2 { animation-delay: 0.3s; }
  .orbit-ring-3 { animation-delay: 0.6s; }

  /* Waveform bars */
  @keyframes wave {
    0%, 100% { height: 18%; }
    50% { height: 100%; }
  }
  .wave-bar {
    width: 3px;
    background: var(--ink);
    border-radius: 2px;
    animation: wave 1.2s ease-in-out infinite;
  }

  /* Gradient beam */
  @keyframes beam-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  .beam {
    background: linear-gradient(90deg, transparent 0%, var(--indigo-soft) 30%, var(--coral) 50%, var(--indigo-soft) 70%, transparent 100%);
    background-size: 200% 100%;
    animation: beam-flow 6s linear infinite;
  }

  /* Floating effect */
  @keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .float-soft { animation: float-soft 5s ease-in-out infinite; }

  /* Marquee */
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .marquee-track {
    display: flex;
    gap: 64px;
    animation: marquee 40s linear infinite;
    width: max-content;
  }

  /* Hover lift for feature cards */
  .feature-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  }
  .feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 2px 4px rgba(15, 13, 7, 0.04),
      0 30px 60px -20px rgba(15, 13, 7, 0.15);
  }

  /* Score bar fill */
  @keyframes score-fill {
    0% { width: 0%; }
    100% { width: var(--score); }
  }
  .score-bar {
    animation: score-fill 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  }

  /* Progress dashed connector */
  .step-connector {
    background-image: linear-gradient(to right, var(--ink-mute) 50%, transparent 50%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    height: 1px;
  }

  /* Nav — sticky shrink-on-scroll */
  .nav-blur {
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    background: rgba(250, 248, 243, 0.72);
    transition:
      background 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }
  .nav-row {
    transition:
      height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-logo {
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-blur.is-scrolled {
    background: rgba(250, 248, 243, 0.92);
    box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(15, 13, 7, 0.12);
    border-bottom-color: transparent;
  }
  .nav-blur.is-scrolled .nav-row {
    height: 52px;
  }
  .nav-blur.is-scrolled .nav-logo {
    height: 22px;
  }

  /* Minimal language dropdown in the navbar */
  .lang-menu {
    position: relative;
  }
  .lang-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(8px);
  }
  /* Mobile: EN label is hidden → trigger should shrink to flag + chevron. */
  @media (max-width: 639px) {
    .lang-menu-trigger {
      min-width: 0;
      padding: 0 8px;
      gap: 4px;
    }
  }

  /* Funnel bar number — inside fill by default (white on dark fill),
     pushed just past the fill's right edge when it doesn't fit (dark on
     cream track). JS (.funnel layout) sets left/right pixel values and
     toggles `.is-overflow` on the track. */
  .funnel-num {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
    font-weight: 600;
    color: var(--paper);
    white-space: nowrap;
    pointer-events: none;
    transition: color 0.2s ease;
  }
  .funnel-bar.is-overflow .funnel-num {
    color: var(--ink);
  }

  /* ====================================================================
     Policy pages (privacy / terms / security) — readable article layout.
     ==================================================================== */
  .policy-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 248, 243, 0.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .policy-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .policy-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .policy-back:hover { color: var(--ink); }
  .policy-back svg { width: 14px; height: 14px; }

  .policy-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 96px;
  }
  @media (min-width: 1024px) {
    .policy-page { padding: 72px 24px 120px; }
  }
  .policy-eyebrow {
    font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .policy-page h1 {
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 500;
    margin-top: 12px;
    color: var(--ink);
  }
  @media (min-width: 640px) {
    .policy-page h1 { font-size: 52px; }
  }
  .policy-meta {
    font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
    font-size: 12px;
    color: var(--ink-mute);
    margin-top: 14px;
    margin-bottom: 40px;
  }
  .policy-page h2 {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: 44px;
    margin-bottom: 14px;
    color: var(--ink);
  }
  .policy-page h3 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 22px;
    margin-bottom: 8px;
    color: var(--ink);
  }
  .policy-page p,
  .policy-page li {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .policy-page p { margin-bottom: 14px; }
  .policy-page ul,
  .policy-page ol {
    padding-left: 22px;
    margin-bottom: 16px;
  }
  .policy-page li { margin-bottom: 4px; }
  .policy-page ul li { list-style: disc; }
  .policy-page ol li { list-style: decimal; }
  .policy-page strong { color: var(--ink); font-weight: 600; }
  .policy-page a {
    color: var(--indigo);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .policy-page a:hover { color: var(--coral); }
  .policy-page hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 52px 0;
  }
  .policy-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 13.5px;
  }
  .policy-page th,
  .policy-page td {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--line);
    vertical-align: top;
    color: var(--ink-soft);
  }
  .policy-page th {
    background: rgba(0, 0, 0, 0.02);
    font-weight: 600;
    color: var(--ink);
  }
  .lang-menu-trigger:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.86);
    border-color: var(--line);
  }
  .lang-menu-trigger:focus-visible {
    outline: none;
    border-color: rgba(55, 48, 216, 0.35);
    box-shadow: 0 0 0 3px rgba(55, 48, 216, 0.16);
  }
  .lang-menu-flag {
    font-size: 14px;
    line-height: 1;
  }
  .lang-menu-current {
    line-height: 1;
  }
  .lang-menu-chevron {
    opacity: 0.6;
    transition: transform 0.2s ease;
  }
  .lang-menu.is-open .lang-menu-chevron {
    transform: rotate(180deg);
  }
  .lang-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 136px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px -18px rgba(15, 13, 7, 0.45), 0 2px 8px rgba(15, 13, 7, 0.08);
    backdrop-filter: blur(12px);
    z-index: 30;
  }
  .lang-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 8px 9px;
    font-size: 13px;
    color: var(--ink-soft);
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .lang-menu-item:hover {
    background: rgba(15, 13, 7, 0.06);
    color: var(--ink);
  }
  .lang-menu-item.is-active {
    background: rgba(55, 48, 216, 0.1);
    color: var(--indigo);
    font-weight: 500;
  }

  /* Section anchor offset stays in sync with the slimmer scrolled nav */
  section[id] {
    scroll-margin-top: 64px;
  }

  /* =====================================================================
     Interactive IK_App mock — view switcher
     Each nav link in the sidebar swaps the main panel content (see main.js).
     ===================================================================== */
  .ik-view {
    display: none;
    border-top: 1px solid var(--ik-border);
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }
  .ik-view.is-active {
    display: flex;
  }
  /* Applications view keeps its own grid; skip the default stacking. */
  .ik-view[data-view="applications"] {
    border-top: 0; /* original grid already has border-t */
  }
  .ik-view-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  @media (min-width: 640px) {
    .ik-view-body { padding: 24px; }
  }
  @media (min-width: 1024px) {
    .ik-view-body { padding: 32px; }
  }

  /* Dashboard stats */
  .ik-stat {
    padding: 12px;
    border: 1px solid var(--ik-border);
    border-radius: 10px;
    background: var(--ik-card);
  }

  /* Generic list row (Jobs / Interviews / Templates / Team) */
  .ik-job-row,
  .ik-int-row,
  .ik-tpl-row,
  .ik-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ik-border);
    border-radius: 10px;
    background: var(--ik-card);
  }
  .ik-tpl-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 107, 74, 0.1);
    color: #ff6b4a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
  }

  /* Inline chip used inside rows (smaller than .chip) */
  .ik-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.2;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    border: 1px solid;
    white-space: nowrap;
  }
  .ik-chip-live   { background: rgba(5,150,105,0.08);  border-color: rgba(5,150,105,0.25);  color: #059669; }
  .ik-chip-soon   { background: rgba(55,48,216,0.08);  border-color: rgba(55,48,216,0.22); color: #3730d8; }
  .ik-chip-draft  { background: rgba(100,100,100,0.08); border-color: rgba(100,100,100,0.2); color: #737373; }
  .ik-chip-paused { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.22); color: #d97706; }

  .ik-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-family: var(--font-mono);
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--ik-border);
    color: var(--ik-muted-fg);
  }

  /* Sidebar links are clickable in mock — keep the cursor honest */
  .ik-sidebar-link[data-view] {
    cursor: pointer;
    user-select: none;
  }
  .ik-sidebar-link[data-view]:hover:not(.is-active) {
    background: var(--ik-sidebar-accent);
  }

  /* Candidate rows in the Applications view — clickable, drives detail panel */
  .ik-candidate-row {
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
  }
  .ik-candidate-row:not(.is-selected):hover {
    background: rgba(255, 255, 255, 0.6);
  }
  .ik-candidate-row.is-selected {
    background: #ffffff;
    border-color: var(--line-strong);
  }
  .ik-candidate-row:focus-visible {
    outline: 2px solid rgba(55, 48, 216, 0.4);
    outline-offset: 1px;
  }

  /* =====================================================================
     "The Philosophy" section — interactive mode cards + automation dial
     Click a card OR drag the dial; selection syncs in both directions.
     ===================================================================== */
  .flex-card {
    position: relative;
    padding: 28px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition:
      background 0.3s ease,
      border-color 0.3s ease,
      transform 0.2s ease;
  }
  @media (min-width: 1024px) {
    .flex-card { padding: 32px; }
  }
  .flex-card:hover:not(.is-selected) {
    background: rgba(255, 255, 255, 0.05);
  }
  .flex-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.4);
  }
  .flex-card-glow {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    filter: blur(56px);
    background: rgba(255, 107, 74, 0.22);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .flex-card-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease;
  }
  .flex-card-dot-inner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.3s ease;
  }
  .flex-card-label {
    color: rgba(250, 248, 243, 0.6);
    transition: color 0.3s ease;
  }
  .flex-card.is-selected {
    border-color: rgba(255, 107, 74, 0.45);
    background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    );
  }
  .flex-card.is-selected .flex-card-glow {
    opacity: 1;
  }
  .flex-card.is-selected .flex-card-dot {
    background: #ff6b4a;
    border-color: transparent;
  }
  .flex-card.is-selected .flex-card-dot-inner {
    background: #ffffff;
  }
  .flex-card.is-selected .flex-card-label {
    color: #ff6b4a;
  }

  /* Interactive dial */
  .flex-dial {
    position: relative;
    height: 8px;
    padding: 14px 0; /* expands hit target for touch */
    cursor: pointer;
    touch-action: none;
    user-select: none;
  }
  .flex-dial-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    pointer-events: none;
  }
  .flex-dial-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    width: 50%;
    border-radius: 999px;
    background: linear-gradient(to right, #6b67e6, #ff6b4a);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .flex-dial-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #ff6b4a;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .flex-dial.is-dragging .flex-dial-fill,
  .flex-dial.is-dragging .flex-dial-thumb {
    transition: none;
  }
  .flex-dial:focus-visible {
    outline: none;
  }
  .flex-dial:focus-visible .flex-dial-thumb {
    box-shadow:
      0 0 0 4px rgba(255, 107, 74, 0.35),
      0 4px 12px rgba(0, 0, 0, 0.3);
  }

  /* ============================================================
     Hero IK_App mock — responsive guards
     The mock is a faux app with sidebar (260px) + content area.
     On narrow screens the inner two-column candidate grid,
     padded score cards, and overlap floats need tighter values
     so nothing overflows. */
  /* Mobile: make sure Tailwind's `hidden` beats our .ik-* display rules.
     Our custom rules are layer-less and load after tailwind.css, so on
     equal specificity they win — which breaks `hidden md:flex` patterns
     (breadcrumb in mock strips was showing at <768px and forcing hscroll). */
  @media (max-width: 767px) {
    .hidden {
      display: none !important;
    }
  }

  @media (max-width: 767px) {
    .ik-sidebar {
      width: 52px;
      flex-shrink: 0;
    }
    .ik-sidebar-brand {
      justify-content: center;
      padding: 0 6px;
      height: 48px;
    }
    .ik-sidebar-brand span {
      display: none;
    }
    .ik-sidebar-mark {
      width: 30px;
      height: 30px;
      font-size: 10px;
    }
    .ik-sidebar-nav {
      padding: 6px;
    }
    .ik-sidebar-link {
      justify-content: center;
      padding: 9px 0;
      gap: 0;
    }
    .ik-sidebar-link span {
      display: none;
    }
    .ik-sidebar-link svg {
      width: 18px;
      height: 18px;
      opacity: 0.9;
    }
    /* Collapse the two-col candidate grid to one column on phones. */
    .ik-app-shell .md\:grid-cols-\[280px_1fr\],
    .ik-app-shell .grid.md\:grid-cols-\[280px_1fr\] {
      grid-template-columns: 1fr !important;
    }
    /* Candidate column: unhide, drop right border, lay rows horizontally
       as a scrollable chip strip above the detail panel. `min-width: 0`
       lets the grid cell shrink below its content's min-width so the
       strip's own `overflow-x: auto` actually scrolls instead of blowing
       out the card. */
    .ik-candidate-col {
      display: block !important;
      min-width: 0 !important;
      border-right: 0 !important;
      border-bottom: 1px solid var(--ik-border);
      padding: 10px 12px !important;
    }
    .ik-candidate-list-head {
      display: none !important;
    }
    .ik-candidate-rows {
      display: flex !important;
      flex-direction: row !important;
      gap: 8px;
      /* Clamp the flex container to its parent so the flex-shrink:0 chips
         overflow INSIDE it (scrollable) instead of widening the parent. */
      max-width: 100%;
      width: 100%;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .ik-candidate-rows::-webkit-scrollbar {
      display: none;
    }
    .ik-candidate-rows > * {
      margin-top: 0 !important;
      min-width: 170px;
      flex-shrink: 0;
      padding: 7px 9px !important;
    }
    /* Shrink the avatar inside the row a touch */
    .ik-candidate-rows > * > .w-8 {
      width: 28px !important;
      height: 28px !important;
    }
  }

  @media (max-width: 640px) {
    .ik-app-shell {
      font-size: 12px;
      /* Relax the desktop guard so the card grows with content on phones
         rather than trying to fill 360px of dead space. */
      min-height: 280px !important;
    }
    /* Tighter header so breadcrumb + avatar sit on one clean row */
    .ik-header {
      height: 44px;
      padding: 0 12px;
    }
    .ik-breadcrumb {
      gap: 4px;
      font-size: 12px;
      flex-wrap: nowrap;
      min-width: 0;
      overflow: hidden;
    }
    .ik-breadcrumb .ik-current {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ik-avatar {
      width: 26px;
      height: 26px;
      font-size: 10px;
    }
    /* Shrink the whole candidate detail panel padding */
    .ik-main-col .p-4 {
      padding: 14px !important;
    }
    /* Score number row — 4 cols too tight under ~360px, allow wrap */
    .ik-app-shell .grid.grid-cols-4 {
      gap: 0.5rem;
    }
    /* Smaller typography & tighter rhythm for the candidate detail panel */
    .ik-app-shell .text-\[22px\] {
      font-size: 17px !important;
    }
    .ik-app-shell .text-\[16px\] {
      font-size: 14px !important;
    }
    .ik-app-shell .text-\[15px\] {
      font-size: 13px !important;
    }
    .ik-app-shell .mb-6 {
      margin-bottom: 14px !important;
    }
    .ik-app-shell .mb-5 {
      margin-bottom: 12px !important;
    }
    .ik-app-shell .space-y-3 > * + * {
      margin-top: 10px !important;
    }
    /* Candidate avatar circle in the detail header */
    .ik-app-shell .w-10.h-10 {
      width: 36px !important;
      height: 36px !important;
    }
    /* AI summary card: slightly less inner padding */
    .ik-app-shell .p-4.rounded-xl {
      padding: 12px !important;
    }
    /* Chip ("AI recommended") a hair smaller */
    .ik-app-shell .chip {
      font-size: 10px;
      padding: 3px 8px;
    }
  }

  /* Very narrow devices (<380px): drop to 1-col scores so nothing squeezes */
  @media (max-width: 380px) {
    .ik-app-shell .grid.grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.4rem;
    }
    .ik-app-shell .text-\[22px\] {
      font-size: 16px !important;
    }
  }

  /* Typing cursor */
  @keyframes caret {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--ink);
    vertical-align: -2px;
    animation: caret 1s steps(1) infinite;
  }

  /* Subtle conic border glow for CTA section */
  .conic-glow {
    position: relative;
  }
  .conic-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from 0deg, transparent 0deg, var(--indigo-soft) 90deg, var(--coral) 180deg, transparent 270deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.4;
    animation: spin 8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Selection */
  ::selection { background: var(--ink); color: var(--paper); }

  /* Scroll spotlight */
  .spotlight {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
  }

  /* ============================================================
     Interview-demo Card + Buttons.
     Originally mirrored IK_App/shadcn (flat white SaaS look), now
     tuned toward the landing page's warm "paper + premium card"
     aesthetic so the demo feels like a continuation of the site
     rather than a separate product surface. Class names keep the
     `ik-` prefix to avoid touching HTML elsewhere.
     ============================================================ */
  .ik-card {
    background: linear-gradient(180deg, #fff 0%, #fdfcf8 100%);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 1px 2px rgba(15, 13, 7, 0.04),
      0 20px 50px -20px rgba(15, 13, 7, 0.12);
    overflow: hidden;
  }
  .ik-card-header {
    padding: 28px 28px 0;
  }
  .ik-card-body {
    padding: 22px 26px 28px;
  }
  @media (min-width: 640px) {
    .ik-card-header { padding: 32px 32px 0; }
    .ik-card-body   { padding: 26px 32px 30px; }
  }

  .ik-btn-primary,
  .ik-btn-secondary,
  .ik-btn-destructive {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    user-select: none;
    overflow: hidden;
  }
  .ik-btn-primary {
    background: var(--ink);
    color: var(--paper);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.1) inset,
      0 10px 30px -15px rgba(15, 13, 7, 0.5);
  }
  /* Sheen sweep on hover — lifted from landing's .btn-primary */
  .ik-btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
  }
  .ik-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
  .ik-btn-primary:hover:not(:disabled)::before { transform: translateX(100%); }
  .ik-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .ik-btn-secondary {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    border-color: var(--line-strong);
    backdrop-filter: blur(8px);
  }
  .ik-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
  }
  .ik-btn-destructive {
    background: oklch(0.96 0.015 25);
    color: oklch(0.42 0.2 25);
    border-color: oklch(0.88 0.06 25);
  }
  .ik-btn-destructive:hover:not(:disabled) {
    background: oklch(0.93 0.03 25);
    border-color: oklch(0.82 0.1 25);
    transform: translateY(-1px);
  }
  /* End-call button variant that stays in brand language while still
     reading as a "stop" action. */
  .interview-end-btn {
    background: rgba(255, 107, 74, 0.08);
    color: #b42318;
    border-color: rgba(255, 107, 74, 0.35);
  }
  .interview-end-btn:hover:not(:disabled) {
    background: rgba(255, 107, 74, 0.14);
    border-color: rgba(255, 107, 74, 0.52);
  }

  .ik-pill-ok,
  .ik-pill-bad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
  }
  .ik-pill-ok  { color: #047857; background: rgba(4, 120, 87, 0.08); border: 1px solid rgba(4, 120, 87, 0.18); }
  .ik-pill-bad { color: #b91c1c; background: rgba(185, 28, 28, 0.08); border: 1px solid rgba(185, 28, 28, 0.18); }

  /* ============================================================
     Interview result summary (demo done-phase) — intentionally
     minimal: single-line score rows with hair-thin bars + compact
     evidence snippets (finding + italic citation). Mirrors what a
     recruiter sees after a real interview, stripped of chrome.
     ============================================================ */
  .result-rows {
    display: grid;
    row-gap: 10px;
  }
  .result-row {
    display: grid;
    grid-template-columns: 96px 1fr 48px;
    align-items: center;
    gap: 12px;
  }
  .result-row-label {
    font-size: 12.5px;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
  }
  .result-row-track {
    height: 3px;
    background: rgba(15, 13, 7, 0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .result-row-fill {
    height: 100%;
    background: var(--ink);
    border-radius: 999px;
    width: var(--score, 0%);
    transform-origin: left center;
    animation: result-fill-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  }
  .result-row:nth-child(1) .result-row-fill { animation-delay: 0.10s; }
  .result-row:nth-child(2) .result-row-fill { animation-delay: 0.22s; }
  .result-row:nth-child(3) .result-row-fill { animation-delay: 0.34s; }
  .result-row:nth-child(4) .result-row-fill { animation-delay: 0.46s; }
  .result-row:nth-child(5) .result-row-fill { animation-delay: 0.58s; }
  /* Overall row gets slightly more weight (first row). */
  .result-row:first-child .result-row-label {
    font-weight: 500;
  }
  .result-row:first-child .result-row-fill {
    background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo-soft) 60%, var(--coral) 100%);
  }
  .result-row-value {
    font-size: 12.5px;
    color: var(--ink);
    text-align: end;
    white-space: nowrap;
    font-weight: 500;
  }
  .result-row-denom {
    color: var(--ink-mute);
    font-weight: 400;
    font-size: 10.5px;
    margin-inline-start: 1px;
  }

  @keyframes result-fill-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .result-row-fill {
      animation: none;
    }
  }

  .evidence-item {
    padding-inline-start: 0;
  }
  .evidence-finding {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin: 0;
  }
  .evidence-quote {
    margin: 4px 0 0 0;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--line-strong);
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-mute);
    letter-spacing: -0.005em;
  }

  /* Result preloader skeleton (shown while OpenAI analysis is running). */
  .analysis-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Ensure JS toggling with `.hidden` always wins regardless of CSS order. */
  .analysis-loading.hidden {
    display: none !important;
  }
  .analysis-loading-head {
    display: flex;
    align-items: center;
  }
  .analysis-loading-rows {
    display: grid;
    gap: 10px;
  }
  .analysis-loading-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .analysis-loading-evidence {
    display: grid;
    gap: 9px;
  }
  .skeleton-line {
    position: relative;
    border-radius: 999px;
    background: rgba(15, 13, 7, 0.08);
    overflow: hidden;
  }
  .skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
  }
  @keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton-line::after { animation: none; }
  }

  /* ============================================================
     Interview card — same snake-stroke gradient as the hero input,
     but only while the AI is speaking (data-voice-status="speaking").
     Listening & idle keep the calm static card border.
     ============================================================ */
  @property --interview-card-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  .interview-card {
    position: relative;
    isolation: isolate;
  }
  .interview-card::before,
  .interview-card::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  /* The snake stroke — drawn in a border-wide gutter using the mask trick. */
  .interview-card::before {
    inset: 0;
    padding: 2.5px;
    background: conic-gradient(
      from var(--interview-card-angle),
      transparent 0deg,
      transparent 200deg,
      var(--indigo-soft) 250deg,
      var(--indigo) 295deg,
      var(--coral) 335deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
            mask-composite: exclude;
    z-index: 1;
    /* Animation runs continuously so micro speech-end → speech-start pauses
       during an AI turn don't reset the angle back to 0. Opacity is the
       only thing that actually toggles on voice state. */
    animation: interview-card-snake 3.2s linear infinite;
  }
  /* Soft outer halo following the same angle. */
  .interview-card::after {
    inset: -8px;
    border-radius: calc(var(--ik-radius) + 10px);
    background: conic-gradient(
      from var(--interview-card-angle),
      transparent 0deg,
      transparent 210deg,
      rgba(55, 48, 216, 0.25) 275deg,
      rgba(255, 107, 74, 0.25) 325deg,
      transparent 360deg
    );
    filter: blur(18px);
    z-index: -1;
    animation: interview-card-snake 3.2s linear infinite;
  }
  .interview-card[data-voice-status="speaking"]::before {
    opacity: 1;
  }
  .interview-card[data-voice-status="speaking"]::after {
    opacity: 0.6;
  }
  @keyframes interview-card-snake {
    to { --interview-card-angle: 360deg; }
  }
  @media (prefers-reduced-motion: reduce) {
    .interview-card::before,
    .interview-card::after {
      animation: none;
    }
  }

  /* Prevent a brief consent-screen flash on autostart deep links
     before defer scripts run. */
  .interview-autostart #phase-pre {
    display: none !important;
  }

  /* ============================================================
     Voice visualizer — concentric pulse rings + reactive wave bars
     Mirrors IK_app/frontend voice-visualizer.tsx
     ============================================================ */
  .voice-viz {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
  }
  .voice-ring {
    position: absolute;
    border-radius: 50%;
    transition: background 0.6s ease, transform 0.5s ease, opacity 0.5s ease;
  }
  .voice-ring-outer {
    width: 176px;
    height: 176px;
    background: oklch(0.205 0 0 / 0.04);
  }
  .voice-ring-mid {
    width: 128px;
    height: 128px;
    background: oklch(0.205 0 0 / 0.06);
  }
  .voice-core {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: oklch(0.205 0 0 / 0.85);
    box-shadow:
      0 10px 28px -10px rgba(15, 13, 7, 0.25),
      inset 0 1px 0 rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  }
  .voice-bars {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .voice-bar {
    display: inline-block;
    width: 3px;
    height: 10px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: height 0.12s ease;
  }
  /* Listening: gentle idle sway */
  .voice-viz[data-status="listening"] .voice-ring-outer {
    animation: orbit-pulse 2.6s ease-in-out infinite;
  }
  .voice-viz[data-status="listening"] .voice-ring-mid {
    animation: orbit-pulse 2.6s ease-in-out 0.4s infinite;
  }
  /* Speaking: stronger pulse + scaled core + full wave bars */
  .voice-viz[data-status="speaking"] .voice-core {
    background: linear-gradient(140deg, var(--indigo) 0%, var(--indigo-soft) 65%, var(--coral) 120%);
    transform: scale(1.08);
    box-shadow:
      0 18px 40px -12px rgba(55, 48, 216, 0.4),
      inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .voice-viz[data-status="speaking"] .voice-ring-outer {
    background: oklch(0.5 0.2 270 / 0.08);
    animation: orbit-pulse 1.6s ease-in-out infinite;
  }
  .voice-viz[data-status="speaking"] .voice-ring-mid {
    background: oklch(0.5 0.2 270 / 0.14);
    animation: orbit-pulse 1.6s ease-in-out 0.3s infinite;
  }
  .voice-viz[data-status="speaking"] .voice-bar {
    animation: voice-wave 0.9s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.11s);
  }
  /* Idle (pre-start placeholder) */
  .voice-viz[data-status="idle"] .voice-core {
    background: oklch(0.82 0 0);
  }
  .voice-viz[data-status="idle"] .voice-bar {
    background: oklch(0.55 0 0);
    height: 6px;
  }
  @keyframes voice-wave {
    0%, 100% { height: 8px; }
    50%      { height: 26px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .voice-viz .voice-ring,
    .voice-viz .voice-bar {
      animation: none !important;
    }
  }