/* ── Hero (DOSSIER: the claim on the measurement grid) ── */
    .hero { padding: 72px 0 28px; text-align: center; position: relative; overflow: hidden; }
    .hero h1 {
      position: relative;
      font-size: clamp(2.75rem, 6.5vw, 5.25rem);
      font-weight: 400; letter-spacing: -0.025em;
      line-height: 1.02; margin: 0 0 18px;
    }
    .hero h1 .accent { color: var(--primary); }
    .hero p { position: relative; max-width: 600px; margin: 0 auto; font-size: 16px; color: var(--muted-foreground); }
    .hero .hero-close {
      margin-top: 12px;
      font-size: 14px; color: var(--text-tertiary);
    }
    @media (max-width: 720px) {
      .hero { padding: 40px 0 16px; }
    }

    /* ── Step indicator (mono counters, rules between) ── */
    .steps {
      display: flex; gap: 0; align-items: center; justify-content: center;
      padding: 14px 0 6px;
      flex-wrap: wrap;
      max-width: 720px;
      margin: 0 auto;
    }
    .step {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: 10.5px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-tertiary);
      padding: 0 10px;
    }
    .step + .step::before {
      content: ""; width: 24px; height: 1px; background: var(--border);
      margin-right: 10px;
    }
    .step .num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px;
      border-radius: 2px;
      border: 1px solid var(--border);
      font-size: 10px; font-weight: 600;
      letter-spacing: 0;
      transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    }
    .step.active .num { color: var(--primary); border-color: var(--primary); animation: gp-glow-pulse 2s infinite; }
    .step.done .num { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
    .step.done .num::after { content: "✓"; }
    .step.done .num span { display: none; }
    .step.active span:not(.num), .step.done span:not(.num) { color: var(--foreground); font-weight: 500; }

    /* ── Setup card ───────────────────────────────── */
    .setup-card { max-width: 540px; margin: 28px auto 0; padding: 30px; }
    .setup-card h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
    .setup-card p { margin: 0 0 22px; color: var(--muted-foreground); font-size: 14px; }
    .profile-note {
      padding: 10px 12px;
      border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
      background: color-mix(in srgb, var(--primary) 6%, transparent);
      font-size: 12px !important;
      line-height: 1.5;
    }
    .profile-note a {
      color: var(--foreground);
      text-underline-offset: 3px;
      white-space: nowrap;
    }
    .toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px; padding: 16px 0;
      border-top: 1px solid var(--border);
    }
    .toggle-row[hidden] { display: none !important; }
    .toggle-row:last-of-type { border-bottom: 1px solid var(--border); margin-bottom: 22px; }
    .toggle-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .toggle-label .name { font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
    .toggle-label .desc { font-size: 12.5px; color: var(--text-tertiary); }
    /* The signal switch: a sharp instrument slider, not a pill. */
    .toggle {
      flex: none;
      width: 40px; height: 22px;
      border-radius: 2px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      position: relative;
      cursor: pointer;
      transition: border-color 0.18s ease, background-color 0.18s ease;
    }
    .toggle::after {
      content: ""; position: absolute; top: 2px; left: 2px;
      width: 16px; height: 16px;
      background: var(--text-tertiary);
      border-radius: 1px;
      transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), background-color 0.18s ease;
    }
    .toggle.on { border-color: var(--primary); }
    .toggle.on::after { transform: translateX(18px); background: var(--primary); }

    /* ── Workspace (enroll + browse) ──────────────── */
    .workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 20px;
      margin-top: 24px;
    }
    @media (max-width: 980px) { .workspace { grid-template-columns: 1fr; } }
    .workspace-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
    .workspace-side { display: flex; flex-direction: column; gap: 16px; }

    /* ── Enrollment card (the examination chamber) ── */
    .enroll-card {
      padding: 0;
      display: flex;
      flex-direction: column;
    }
    .enroll-head {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
      gap: 10px;
    }
    .enroll-head h3 { font-size: 15px; font-weight: 600; margin: 0; }
    .enroll-head .meta {
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .enroll-progress {
      height: 2px;
      background: var(--surface-2);
      position: relative;
      overflow: hidden;
      flex: none;
    }
    .enroll-progress > span {
      display: block; height: 100%;
      background: var(--primary);
      width: 0%;
      transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
    }
    .enroll-body {
      padding: 28px 28px 36px;
      flex: 1;
      display: flex; flex-direction: column; gap: 16px;
      justify-content: flex-start;
      align-items: stretch;
      min-height: 540px;     /* generous so trace + click areas always fit */
    }
    @media (max-width: 720px) {
      /* Short mobile viewports: no fixed 540px wall of card. */
      .enroll-body { min-height: 0; padding: 20px 16px 26px; }
      .trace-area, .click-area { height: 260px; }
    }
    .enroll-task-icon {
      width: 56px; height: 56px;
      margin: 0 auto;
      border-radius: 2px;
      background: var(--surface-2);
      border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-weight: 600; font-size: 20px;
      color: var(--primary);
    }
    .enroll-title { font-size: 22px; font-weight: 550; text-align: center; letter-spacing: -0.015em; margin: 0; }
    .enroll-sub { text-align: center; color: var(--muted-foreground); font-size: 14px; margin: 0 auto; max-width: 460px; }

    /* type task */
    .type-prompt {
      max-width: 540px; margin: 8px auto 0;
      padding: 14px 18px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 2px;
      font-family: var(--font-mono); font-size: 14px; line-height: 1.6;
      color: var(--text-tertiary);
    }
    .type-prompt span.matched { color: var(--success); }
    .type-prompt span.mismatched {
      color: var(--destructive);
      background: color-mix(in srgb, var(--destructive) 14%, transparent);
    }
    .type-prompt span.cursor {
      display: inline-block; width: 7px; height: 16px;
      background: var(--primary);
      vertical-align: middle;
      margin: 0 1px;
      animation: gp-fade-in 0.6s alternate infinite;
    }
    .type-input {
      width: 100%; max-width: 540px;
      margin: 0 auto;
      padding: 12px 16px;
      /* 16px minimum: below that iOS Safari force-zooms on focus, which
         wrecks the enrollment layout mid-task. */
      font-family: var(--font-mono); font-size: 16px;
      background: var(--background); color: var(--foreground);
      caret-color: var(--primary);
      border: 1px solid var(--border);
      border-radius: 2px;
      outline: none;
      transition: border-color 0.18s ease;
    }
    .type-input:focus {
      border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    }
    .type-input.has-error {
      border-color: color-mix(in srgb, var(--destructive) 60%, var(--border));
    }
    .type-input.done {
      border-color: color-mix(in srgb, var(--success) 60%, var(--border));
    }
    .type-meta { letter-spacing: 0.02em; }
    .type-meta #type-progress { color: var(--muted-foreground); }

    /* mouse trace task */
    .trace-area {
      position: relative;
      width: 100%;
      max-width: 640px; height: 320px;
      margin: 0 auto;
      flex: none;
      background: var(--background);
      background-image: radial-gradient(color-mix(in srgb, var(--foreground) 6%, transparent) 1px, transparent 1px);
      background-size: 26px 26px;
      border: 1px solid var(--border);
      border-radius: 2px;
      overflow: hidden;
    }
    /* Pulse via a hard-edged ring, not glow. Keep 44px hit geometry. */
    @keyframes trace-pulse {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 0 0 10px transparent;
      }
    }
    .trace-target {
      position: absolute;
      width: 44px; height: 44px;
      border-radius: 2px;
      background: var(--primary);
      cursor: crosshair;
      z-index: 5;
      transform: translate(-50%, -50%);
      transition: top 0.45s cubic-bezier(0.22,1,0.36,1),
                  left 0.45s cubic-bezier(0.22,1,0.36,1),
                  opacity 0.25s ease;
      animation: trace-pulse 1.4s ease-in-out infinite;
    }
    .trace-target.hit { opacity: 0; animation: none; }

    /* scroll task */
    .scroll-area {
      max-height: 280px;
      max-width: 540px; margin: 0 auto;
      overflow-y: scroll;
      padding: 18px 22px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 2px;
      font-size: 14px; line-height: 1.65; color: var(--muted-foreground);
    }
    .scroll-area p { margin: 0 0 12px; }

    /* click task */
    .click-area {
      position: relative;
      width: 100%;
      max-width: 640px; height: 320px;
      margin: 0 auto;
      flex: none;
      background: var(--background);
      background-image: radial-gradient(color-mix(in srgb, var(--foreground) 6%, transparent) 1px, transparent 1px);
      background-size: 26px 26px;
      border: 1px solid var(--border);
      border-radius: 2px;
      overflow: hidden;
    }
    @keyframes click-pulse {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.06);
        box-shadow: 0 0 0 9px transparent;
      }
    }
    .click-target {
      position: absolute;
      width: 44px; height: 44px;
      padding: 0;
      border: 0;
      border-radius: 2px;
      background: var(--primary);
      cursor: pointer;
      z-index: 5;
      transform: translate(-50%, -50%);
      transition: opacity 0.18s ease;
      animation: click-pulse 1.4s ease-in-out infinite;
    }
    .click-target.popped {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2);
      animation: none;
    }

    /* Phone-native enrollment tasks. Every interaction is observed by the
       existing touch/motion collectors; these controls never synthesize data. */
    .rhythm-pad, .steady-stage, .phone-topup-pad {
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 22px;
      border: 1px solid var(--border);
      background: var(--background);
      border-radius: 2px;
      text-align: center;
    }
    .rhythm-pad { touch-action: manipulation; }
    .rhythm-button {
      width: min(180px, 52vw);
      aspect-ratio: 1;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border));
      background: color-mix(in srgb, var(--primary) 10%, var(--background));
      color: var(--foreground);
      font: 600 16px var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .rhythm-button:active {
      background: color-mix(in srgb, var(--primary) 22%, var(--background));
      border-color: var(--primary);
    }
    .rhythm-button:focus-visible,
    .click-target:focus-visible,
    .gp-widget-pill:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }
    .steady-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .steady-phone {
      width: 96px; height: 132px;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid var(--primary);
      border-radius: 16px;
      font-size: 34px;
      background: var(--surface-2);
    }
    .steady-samples {
      min-height: 18px;
      font: 11px var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .phone-topup-pad {
      min-height: 180px;
      display: flex; align-items: center; justify-content: center;
      color: var(--muted-foreground);
      font-size: 13px;
      line-height: 1.5;
      touch-action: none;
      user-select: none;
    }

    /* Gaze calibration overlay */
    .calib-overlay {
      position: fixed; inset: 0;
      background: rgba(6, 7, 8, 0.95);
      z-index: 9100;
      display: none;
      align-items: center; justify-content: center;
      flex-direction: column;
      color: #edeef0;
    }
    .calib-overlay.active { display: flex; animation: gp-fade-in 0.3s ease; }
    .calib-text { font-size: 14px; color: #9ba1ac; max-width: 460px; text-align: center; margin: 0 0 20px; }
    .calib-text strong { color: #edeef0; font-weight: 600; }
    .calib-grid {
      position: relative;
      width: 80vw; height: 60vh;
      max-width: 720px; max-height: 480px;
      border: 1px solid rgba(237,238,240,0.18);
      border-radius: 2px;
    }
    .calib-dot {
      position: absolute;
      width: 32px; height: 32px;
      margin: -16px;
      border-radius: 2px;
      background: var(--primary);
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.2s ease;
      border: 0;
      animation: click-pulse 1.6s ease-in-out infinite;
    }
    .calib-dot:hover { transform: scale(1.15); }
    .calib-dot.done { opacity: 0.22; pointer-events: none; animation: none; }
    .calib-progress {
      margin-top: 22px;
      font-family: var(--font-mono); font-size: 10.5px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: #7d8492;
    }

    /* Brainprint complete */
    .brainprint-success {
      text-align: center;
      padding: 36px 24px;
    }
    .check-bubble {
      width: 96px; height: 96px;
      margin: 0 auto 18px;
      border-radius: 2px;
      border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
      background: color-mix(in srgb, var(--success) 10%, transparent);
      display: inline-flex; align-items: center; justify-content: center;
      animation: gp-success-pop 0.6s cubic-bezier(0.22,1.36,0.36,1) both;
    }
    .check-bubble svg { width: 56px; height: 56px; color: var(--success); }
    .brainprint-success h3 { font-size: 22px; font-weight: 550; margin: 0 0 6px; letter-spacing: -0.015em; }
    .brainprint-success p { color: var(--muted-foreground); font-size: 14px; margin: 0 auto 22px; max-width: 420px; }
    .brainprint-meta {
      display: inline-flex; gap: 24px; padding: 12px 20px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 2px;
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--text-tertiary);
      flex-wrap: wrap; justify-content: center;
    }
    .brainprint-meta strong { color: var(--foreground); font-weight: 500; }

    /* Honest proof strip on the enroll-complete card. */
    .brainprint-proof {
      margin: 18px auto 0; max-width: 460px;
      display: grid; grid-template-columns: auto 1fr; gap: 12px 16px;
      align-items: center; text-align: left;
      padding: 16px 18px; border: 1px solid var(--border); border-radius: 4px;
      background: var(--card);
    }
    .bp-proof-num {
      font-family: var(--font-mono); font-size: 30px; font-weight: 700;
      letter-spacing: -0.02em; color: var(--success); line-height: 1;
    }
    .bp-proof-num small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 4px; }
    .bp-proof-note { font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground); }
    .bp-proof-note strong { color: var(--foreground); font-weight: 600; }

    /* One-line credibility footnote under the live-trust signals. */
    .proof-line {
      margin: 12px 0 0; font-family: var(--font-mono);
      font-size: 10.5px; line-height: 1.5; color: var(--text-tertiary);
    }

    /* ── Setup: first-name field ─────────────────── */
    .name-row { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px; }
    .name-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
    #name-input { font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 2px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); caret-color: var(--primary); outline: none; transition: border-color .2s; }
    #name-input:focus { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }

    /* ── Enrollment: physical calibration ritual ───── */
    .ritual-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 34px 16px 30px; text-align: center; }
    .ritual-glyph { width: 92px; height: 92px; border-radius: 2px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--surface-2); position: relative; transition: border-color .3s; }
    .ritual-glyph.ok { border-color: var(--success); }
    .ritual-glyph .dir { display: inline-block; transition: transform .3s; }
    .ritual-glyph[data-dir="left"] .dir { transform: rotate(-20deg); }
    .ritual-glyph[data-dir="right"] .dir { transform: rotate(20deg); }
    .ritual-glyph[data-dir="up"] .dir { transform: translateY(-6px); }
    .ritual-glyph[data-dir="down"] .dir { transform: translateY(6px); }
    .ritual-title { margin: 0; font-size: 21px; font-weight: 550; letter-spacing: -0.01em; }
    .ritual-sub { margin: 0; max-width: 420px; font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }
    .ritual-meter { width: min(340px, 80%); height: 4px; border-radius: 0; background: var(--surface-2); overflow: hidden; }
    .ritual-meter > span { display: block; height: 100%; width: 0; background: var(--success); transition: width .12s linear; }
    .ritual-live { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); min-height: 16px; }
    .ritual-done { color: var(--success); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
    /* Peripheral edge cue for ritual steps: lights the screen edge the user
       should turn toward, brightening with progress (--rit-glow 0..1) so it
       reads as a progress meter even when their eyes are off the card. */
    #ritual-glow {
      position: fixed; inset: 0; pointer-events: none; z-index: 8990;
      --rit-glow: 0.35;
      opacity: var(--rit-glow);
      transition: opacity .15s linear;
    }
    #ritual-glow[data-dir="left"]  { background: linear-gradient(90deg,  color-mix(in srgb, var(--success) 45%, transparent), transparent 14%); }
    #ritual-glow[data-dir="right"] { background: linear-gradient(270deg, color-mix(in srgb, var(--success) 45%, transparent), transparent 14%); }
    #ritual-glow[data-dir="up"]    { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 45%, transparent), transparent 14%); }
    #ritual-glow[data-dir="down"]  { background: linear-gradient(0deg,   color-mix(in srgb, var(--success) 45%, transparent), transparent 14%); }

    /* ── Workspace: mail reply + compose ───────────── */
    .inbox-reply { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
    .inbox-reply textarea { font: inherit; font-size: 13.5px; min-height: 74px; resize: vertical; padding: 10px 12px; border-radius: 2px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); caret-color: var(--primary); outline: none; }
    .inbox-reply textarea:focus { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
    .inbox-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .inbox-reply-hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
    .inbox-sent { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--success); padding: 8px 0 0; }

    /* ── Session report (PDF) ──────────────────────── */
    .report-row { margin-top: 10px; }
    .report-row .gp-btn { width: 100%; justify-content: center; }

    /* Signature-drift panel inside the lock card (real engine scores). */
    .lock-sig { margin: 2px 0 16px; display: flex; flex-direction: column; gap: 7px; }
    .lock-sig-row { display: flex; align-items: center; gap: 10px; }
    .lock-sig-name { width: 62px; flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); text-align: left; }
    .lock-sig-bar { flex: 1; height: 4px; background: var(--surface-2); border-radius: 0; overflow: hidden; }
    .lock-sig-bar > span { display: block; height: 100%; border-radius: 0; background: var(--destructive); width: 0; transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
    .lock-sig-val { width: 34px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 10.5px; color: var(--destructive); }

    /* ── Mock browser ─────────────────────────────── */
    .browser {
      position: relative;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
      display: flex; flex-direction: column;
      min-height: 600px;
    }
    @media (max-width: 720px) {
      /* Phone: size to the dynamic viewport instead of a fixed 600px. */
      .browser { min-height: min(600px, 72dvh); }
    }
    .browser.locked { border-color: var(--destructive); box-shadow: inset 0 0 0 1px var(--destructive); }

    /* ── Session-locked takeover overlay (oxblood statement) ── */
    .lockdown {
      position: absolute; inset: 0; z-index: 30;
      display: flex; align-items: center; justify-content: center;
      background: rgba(6, 7, 8, 0.82);
      animation: gp-fade-in 0.28s ease;
      padding: 20px; overflow-y: auto;
    }
    .lockdown-card {
      text-align: center; max-width: 430px; width: 92%;
      padding: 28px 26px;
      max-height: calc(100% - 40px); overflow-y: auto;
      background: #3a1218;
      color: #f6eef0;
      border: 1px solid rgba(246, 238, 240, 0.18);
      border-radius: 6px;
      animation: gp-scale-in 0.34s cubic-bezier(0.22,1,0.36,1);
    }
    .lockdown-card .gp-btn-outline { color: #f6eef0; border-color: rgba(246,238,240,0.3); --wipe-color: rgba(246,238,240,0.08); }
    .lockdown-card .gp-btn-outline:hover { border-color: rgba(246,238,240,0.6); color: #f6eef0; }
    .lockdown-card .gp-btn-primary { background: #f6eef0; color: #3a1218; border-color: #f6eef0; --wipe-color: #ffffff; }
    .lock-badge {
      width: 60px; height: 60px; margin: 0 auto 14px;
      border-radius: 2px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255, 141, 155, 0.55);
      background: transparent;
      color: #ff8d9b;
    }
    .lockdown-card h3 { margin: 0 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: #f6eef0; }
    .lockdown-card p { margin: 0 auto 16px; font-size: 13.5px; line-height: 1.55; color: rgba(246,238,240,0.72); max-width: 384px; }
    .lock-ttd {
      display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
      padding: 12px 24px; margin: 0 0 16px;
      background: #2b0d12; border: 1px solid rgba(246,238,240,0.14); border-radius: 2px;
    }
    .lock-ttd-num {
      font-family: var(--font-mono); font-size: 32px; font-weight: 700;
      color: #ff8d9b; line-height: 1; letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .lock-ttd-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246,238,240,0.55); }
    .lock-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 18px; }
    .lock-chip {
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 3px 9px; border-radius: 2px;
      background: transparent;
      color: #ff8d9b;
      border: 1px solid rgba(255, 141, 155, 0.4);
    }
    .lock-actions { display: flex; justify-content: center; gap: 10px; }
    .lock-hint { font-size: 10.5px !important; color: rgba(246,238,240,0.55) !important; margin: 14px auto 0 !important; font-family: var(--font-mono); letter-spacing: 0.06em; }
    .browser-chrome {
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
      padding: 10px 14px 0;
      flex: none;
    }
    .browser-traffic {
      display: inline-flex; gap: 6px; vertical-align: middle;
      margin-right: 10px;
    }
    .browser-traffic span {
      width: 11px; height: 11px; border-radius: 50%; display: block;
    }
    .browser-traffic span:nth-child(1) { background: #ff5f57; }
    .browser-traffic span:nth-child(2) { background: #febc2e; }
    .browser-traffic span:nth-child(3) { background: #28c840; }
    .browser-url {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--background);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 5px 14px;
      font-family: var(--font-mono); font-size: 12px;
      color: var(--muted-foreground);
      /* Fluid on narrow phones (a fixed 320px crowded the traffic lights);
         still comfortably wide on desktop. */
      min-width: min(320px, 55vw);
      max-width: 480px;
      overflow: hidden;
    }
    .browser-url #url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .browser-url .lock { color: var(--success); }
    .browser-url .gp-pill { font-size: 9px; padding: 1px 6px; margin-left: auto; }
    .browser-tabs {
      display: flex; align-items: end;
      gap: 2px; margin-top: 10px;
      overflow-x: auto;
    }
    .browser-tabs::-webkit-scrollbar { display: none; }
    .browser-tab {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-bottom: 0;
      border-radius: 2px 2px 0 0;
      font-size: 12px;
      color: var(--muted-foreground);
      cursor: pointer;
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      transition: background 0.15s ease;
      font-family: var(--font-sans);
      font-weight: 500;
      position: relative;
      bottom: -1px;
    }
    .browser-tab:hover { background: color-mix(in srgb, var(--card) 70%, var(--surface-2)); }
    .browser-tab.active {
      background: var(--card);
      color: var(--foreground);
      border-color: var(--border);
    }
    .browser-tab .favicon {
      width: 10px; height: 10px;
      border-radius: 0;
      flex: none;
      background: var(--primary);
    }
    .browser-tab .close {
      width: 16px; height: 16px;
      border-radius: 2px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px;
      color: var(--text-tertiary);
      cursor: pointer;
      background: transparent; border: 0;
    }
    .browser-tab .close:hover { background: var(--surface-2); color: var(--foreground); }
    .browser-tab.active.gp-anim-pop { animation: gp-success-pop 0.5s cubic-bezier(0.22,1.36,0.36,1); }

    .browser-body {
      flex: 1;
      min-height: 0;
      position: relative;
      overflow: hidden;
    }
    .browser-pane {
      position: absolute; inset: 0;
      display: none;
      overflow-y: auto;
    }
    .browser-pane.active { display: block; animation: gp-fade-in 0.3s ease; }

    /* Loading splash for new tabs */
    .browser-loading {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column;
      gap: 18px;
      background: var(--card);
      z-index: 10;
    }
    .browser-loading.hidden { display: none; }
    .loading-ring {
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 3px solid color-mix(in srgb, var(--primary) 20%, transparent);
      border-top-color: var(--primary);
      animation: gp-spin 0.8s linear infinite;
    }
    .loading-ring.success {
      border: 3px solid color-mix(in srgb, var(--success) 25%, transparent);
      border-top-color: var(--success);
      animation: none;
      position: relative;
    }
    .loading-ring.success::after {
      content: "✓";
      position: absolute;
      inset: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--success); font-size: 28px; font-weight: 700;
      animation: gp-success-pop 0.5s cubic-bezier(0.22,1.36,0.36,1);
    }
    .loading-msg { font-size: 13px; color: var(--text-tertiary); font-family: var(--font-mono); }
    .loading-msg strong { color: var(--foreground); }

    /* Step-up modal */
    .stepup {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(6, 7, 8, 0.62);
      z-index: 12;
      animation: gp-fade-in 0.25s ease;
    }
    .stepup-card {
      background: var(--popover, var(--card));
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 26px;
      max-width: 360px;
      width: 90%;
      animation: gp-scale-in 0.3s cubic-bezier(0.22,1,0.36,1);
    }
    .stepup-card h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
    .stepup-card p { margin: 0 0 16px; color: var(--muted-foreground); font-size: 13px; }
    /* iOS zoom-on-focus guard for the step-up phone/code inputs. */
    .stepup-card .gp-input { font-size: 16px; }

    /* ── Inbox / Editor / Reading panes ───────────── */
    .inbox-shell { display: grid; grid-template-columns: 280px 1fr; height: 100%; }
    @media (max-width: 720px) { .inbox-shell { grid-template-columns: 1fr; } }
    .inbox-list { border-right: 1px solid var(--border); overflow-y: auto; }
    .inbox-item {
      padding: 12px 16px; cursor: pointer;
      border-bottom: 1px solid var(--border);
      display: flex; gap: 10px; align-items: flex-start;
      transition: background 0.12s ease;
    }
    .inbox-item:hover { background: var(--surface-2); }
    .inbox-item.selected { background: var(--surface-2); border-left: 2px solid var(--primary); padding-left: 14px; }
    .inbox-avatar {
      flex: none; width: 32px; height: 32px;
      border-radius: 2px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--foreground); font-weight: 600; font-size: 12px; font-family: var(--font-mono);
    }
    .inbox-text { min-width: 0; flex: 1; }
    .inbox-from { font-size: 13.5px; font-weight: 500; }
    .inbox-subject { font-size: 12.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inbox-time { font-size: 11px; color: var(--text-tertiary); flex: none; font-family: var(--font-mono); }
    .inbox-detail { padding: 24px 28px; overflow-y: auto; }
    .inbox-detail h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
    .inbox-detail .meta { font-size: 12.5px; color: var(--text-tertiary); margin: 0 0 18px; font-family: var(--font-mono); }
    .inbox-detail-body { font-size: 14px; line-height: 1.6; color: var(--muted-foreground); }
    .inbox-detail-body p { margin: 0 0 12px; }
    .inbox-empty { padding: 40px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

    .editor-shell { padding: 20px 24px; height: 100%; display: flex; flex-direction: column; }
    .editor-typing {
      width: 100%; flex: 1; min-height: 0;
      border: 0; background: transparent; color: var(--foreground);
      font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
      resize: none; outline: none;
    }
    .editor-typing::placeholder { color: var(--text-tertiary); }
    .editor-status {
      display: flex; gap: 12px; align-items: center;
      padding-top: 12px; border-top: 1px solid var(--border);
      font-size: 11.5px; color: var(--text-tertiary); font-family: var(--font-mono);
    }

    .reading-shell { padding: 22px 28px; height: 100%; overflow-y: auto; }
    .reading-shell h2 { font-size: 21px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
    .reading-shell .reading-meta { font-size: 12px; color: var(--text-tertiary); margin: 0 0 20px; font-family: var(--font-mono); }
    .reading-shell p { font-size: 14.5px; line-height: 1.65; color: var(--muted-foreground); margin: 0 0 14px; }
    .reading-shell h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; color: var(--foreground); }

    /* Mock authenticated apps */
    .mock-app { padding: 28px; height: 100%; overflow-y: auto; }
    .mock-app-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
    .mock-app-head h2 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
    .mock-app-head .who {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono);
    }
    .mock-app-head .who .av {
      width: 22px; height: 22px; border-radius: 2px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--foreground); font-size: 11px; font-weight: 600;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .mock-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 22px; }
    .mock-stat { padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 2px; }
    .mock-stat .l { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-mono); }
    .mock-stat .v { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
    .mock-stat .t { font-size: 10.5px; margin-top: 4px; color: var(--success); font-family: var(--font-mono); }
    .mock-list { background: var(--card); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
    .mock-list-row { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .mock-list-row:last-child { border-bottom: 0; }
    .mock-list-row .info .name { font-weight: 500; font-size: 14px; }
    .mock-list-row .info .desc { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
    .mock-list-row .price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
    .mock-toggle { display: inline-block; width: 36px; height: 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 2px; position: relative; }
    .mock-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-tertiary); border-radius: 1px; transition: transform 0.18s ease, background-color 0.18s ease; }
    .mock-toggle.on { border-color: var(--primary); }
    .mock-toggle.on::after { transform: translateX(15px); background: var(--primary); }

    /* ── Right side panels (instrument readouts) ─── */
    .trust-card { padding: 20px; }
    .trust-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .trust-card-title { font-size: 10px; letter-spacing: 0.12em; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; margin: 0; }
    .trust-gauge { text-align: center; padding: 12px 0; position: relative; }
    .trust-num {
      font-family: var(--font-mono);
      font-size: 60px; font-weight: 500;
      letter-spacing: -0.04em; line-height: 1;
      color: var(--foreground);
      font-variant-numeric: tabular-nums;
      transition: color 0.4s ease;
    }
    .trust-num.high { color: var(--success); }
    .trust-num.mid { color: var(--warning); }
    .trust-num.low { color: var(--destructive); }
    /* Signal bars answer contribution with flat semantic fills - no gradients. */
    .signal-row[data-level="high"] .signal-bar > span { background: var(--success); }
    .signal-row[data-level="low"]  .signal-bar > span { background: var(--destructive); }
    .trust-state { margin-top: 10px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-mono); }
    .trust-spark {
      width: 100%; height: 32px;
      margin-top: 14px;
    }
    .signals { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
    .signal-row { display: flex; align-items: center; gap: 10px; }
    .signal-name {
      font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted-foreground);
      width: 74px; flex: none; font-family: var(--font-mono);
      display: inline-flex; align-items: center; gap: 4px;
    }
    .signal-name .off-mark {
      font-size: 9px; color: var(--text-tertiary);
      letter-spacing: 0.04em;
    }
    .signal-bar {
      flex: 1; height: 4px;
      background: var(--surface-2);
      border-radius: 0; overflow: hidden;
      position: relative;
    }
    .signal-bar > span {
      display: block; height: 100%;
      background: var(--primary);
      width: 0%;
      transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
      border-radius: 0;
    }
    .signal-bar.off > span { background: var(--text-tertiary); opacity: 0.3; }
    .signal-val { font-size: 11px; color: var(--text-tertiary); width: 30px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    /* Signal not sampled this window (nobody typed/scrolled): hold the last
       level dimmed with an "idle" tag, instead of a broken-looking 0 bar. */
    .signal-row.idle .signal-bar > span { opacity: 0.35; }
    .signal-row.idle .signal-val { opacity: 0.55; }
    .signal-name .idle-mark {
      font-size: 9px; color: var(--text-tertiary);
      letter-spacing: 0.04em; display: none;
    }
    .signal-name .quality-mark {
      font-size: 8px;
      color: var(--text-tertiary);
      letter-spacing: 0.03em;
      text-transform: lowercase;
    }
    .signal-row[data-kind="quality"] .signal-bar > span {
      background: var(--muted-foreground);
    }

    .cam-card { padding: 0; overflow: hidden; }
    .cam-head {
      padding: 12px 16px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border);
    }
    .cam-title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-mono); }
    .cam-video-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; }
    #gp-cam-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
    .cam-meta {
      padding: 10px 16px 14px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 6px 14px;
      font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-tertiary); font-family: var(--font-mono);
    }
    .cam-meta strong { color: var(--foreground); font-weight: 500; }

    /* Gaze dot: a sharp signal mark, no halo. */
    #gp-gaze-dot {
      position: fixed; top: 0; left: 0;
      width: 16px; height: 16px;
      margin-left: -8px; margin-top: -8px;
      border-radius: 2px;
      background: var(--primary);
      pointer-events: none;
      z-index: 9000;
      /* 120ms ease-out visually absorbs residual estimator noise between
         driver ticks (~33ms) without adding perceptible lag on saccades. */
      transition: transform 120ms cubic-bezier(0.25, 0.6, 0.35, 1), opacity 0.3s ease;
      opacity: 0.85;
    }
    #gp-gaze-dot.hidden { opacity: 0; }

    /* Activity log */
    .log-card { padding: 14px 16px; max-height: 240px; overflow-y: auto; }
    .log-line {
      font-family: var(--font-mono); font-size: 11.5px;
      padding: 4px 0; color: var(--muted-foreground);
      display: flex; gap: 8px;
      animation: gp-fade-up 0.3s ease both;
    }
    .log-line .ts { color: var(--text-tertiary); flex: none; }
    .log-line.ok { color: var(--success); }
    .log-line.warn { color: var(--warning); }
    .log-line.err { color: var(--destructive); }

    /* Authorize tray */
    .actions-tray {
      padding: 18px 22px;
    }
    .actions-tray h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
    .actions-tray .sub { margin: 0 0 14px; font-size: 12.5px; color: var(--text-tertiary); }
    .actions-row {
      display: flex; flex-wrap: wrap; gap: 8px;
    }

    /* Attack tray */
    .attack-row {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
    }
    .attack-btn.active { border-color: var(--destructive); color: var(--destructive); animation: gp-glow-pulse 2s infinite; --wipe-color: color-mix(in srgb, var(--destructive) 10%, transparent); }

    /* Hand-off tray (the real impostor test) */
    .handoff-tray {
      border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    }

    /* Try-it steps: collapsible tray shells (progressive disclosure). The
       full controls are one click away; collapsed, each is a single line. */
    .try-step > summary {
      display: flex; align-items: center; gap: 12px;
      cursor: pointer; list-style: none; user-select: none;
    }
    .try-step > summary::-webkit-details-marker { display: none; }
    .try-num {
      flex: none; width: 24px; height: 24px; border-radius: 2px;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 12px; font-weight: 600;
      background: var(--surface-2); color: var(--muted-foreground);
      border: 1px solid var(--border);
    }
    .try-step[open] .try-num { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
    .try-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .try-head h3 { margin: 0; }
    .try-sub { font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); font-family: var(--font-mono); }
    .try-step[open] .try-sub { display: none; }
    .try-chev { flex: none; color: var(--text-tertiary); transition: transform .2s ease; font-size: 14px; }
    .try-step[open] .try-chev { transform: rotate(180deg); }
    .try-body { margin-top: 12px; }
    .try-body .sub { margin-bottom: 10px; }
    .handoff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
    .handoff-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
    .handoff-status.watching { color: var(--primary); }
    .handoff-status.caught { color: var(--destructive); font-weight: 600; }
    .handoff-status.clear { color: var(--success); }

    /* Next-step nudge */
    .next-pulse {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
      border-radius: 2px;
      font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      font-family: var(--font-mono);
      color: var(--primary);
    }
    .next-pulse .arrow { animation: nudge 1.4s ease-in-out infinite; }
    @keyframes nudge {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(3px); }
    }

    /* End-of-demo cross-device CTA → Tandem (library-card grammar) */
    .tandem-cta-wrap { margin: 44px auto 72px; }
    .tandem-cta {
      display: flex; align-items: center; justify-content: space-between; gap: 28px;
      padding: 26px 30px; text-decoration: none;
      border: 1px solid var(--border); border-radius: 4px;
      background: var(--card);
      transition: border-color 0.22s ease;
    }
    .tandem-cta:hover {
      border-color: var(--text-tertiary);
    }
    .tandem-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    .tandem-cta h3 { margin: 10px 0 6px; font-size: 18px; letter-spacing: -0.02em; color: var(--foreground); font-weight: 550; }
    .tandem-cta p { margin: 0; max-width: 62ch; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.5; }
    .tandem-cta-btn { white-space: nowrap; }
    .tandem-cta-btn .arr { display: inline-block; margin-left: 7px; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
    .tandem-cta:hover .tandem-cta-btn .arr { transform: translateX(4px); }
    @media (max-width: 640px) {
      .tandem-cta { flex-direction: column; align-items: flex-start; gap: 18px; }
    }

    /* The profile is fixed once at boot. These rules key off that decision,
       not viewport width alone, so a narrow desktop window remains desktop.
       Tuned to fit every iPhone 12+ class cleanly: mini (375pt), standard
       (390/393pt), and Plus/Pro Max (428/430pt), portrait, notch included. */
    html[data-gp-device-profile="mobile"] body {
      padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
    /* Step indicator: an even four-column band instead of a wrapped row
       with orphaned connector dashes (SETUP/ENROLL on one line, WORK/
       AUTHORIZE floating on the next read as broken on a 375pt mini). */
    html[data-gp-device-profile="mobile"] .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      padding: 12px 0 4px;
      max-width: 100%;
    }
    html[data-gp-device-profile="mobile"] .step {
      flex-direction: column;
      gap: 6px;
      padding: 0;
      justify-content: flex-start;
      text-align: center;
      font-size: 9px;
      letter-spacing: 0.1em;
    }
    html[data-gp-device-profile="mobile"] .step + .step::before { display: none; }
    /* Signal switches: finger-sized (52x30, 24px knob) instead of the
       desktop's 40x22 pointer-sized slider. */
    html[data-gp-device-profile="mobile"] .toggle {
      width: 52px;
      height: 30px;
    }
    html[data-gp-device-profile="mobile"] .toggle::after {
      width: 24px;
      height: 24px;
      top: 2px;
      left: 2px;
    }
    html[data-gp-device-profile="mobile"] .toggle.on::after {
      transform: translateX(22px);
    }
    /* Invisible halo so the switch meets the 44px hit minimum without
       growing visually (the knob stays a 52x30 instrument slider). */
    html[data-gp-device-profile="mobile"] .toggle::before {
      content: "";
      position: absolute;
      inset: -8px -10px;
    }
    html[data-gp-device-profile="mobile"] .toggle-row { padding: 18px 0; }
    /* The desktop-demo escape hatch is a one-line text link; give it a
       real hit area. */
    html[data-gp-device-profile="mobile"] #desktop-demo-override {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 4px 2px;
    }
    /* The post-demo CTA cards: desktop's stately 44/72px bands read as a
       dead screen of black between cards on a phone. */
    html[data-gp-device-profile="mobile"] .tandem-cta-wrap { margin: 20px auto 24px; }
    html[data-gp-device-profile="mobile"] .tandem-cta-wrap:last-of-type { margin-bottom: 36px; }
    html[data-gp-device-profile="mobile"] .tandem-cta { padding: 20px 18px; }
    html[data-gp-device-profile="mobile"] .tandem-cta-btn { width: 100%; justify-content: center; }
    html[data-gp-device-profile="mobile"] .gp-shell {
      padding-left: env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
    html[data-gp-device-profile="mobile"] .hero { padding-top: 28px; }
    html[data-gp-device-profile="mobile"] .hero h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
    html[data-gp-device-profile="mobile"] .setup-card {
      margin-top: 18px;
      padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    }
    html[data-gp-device-profile="mobile"] .workspace { gap: 14px; margin-top: 14px; }
    html[data-gp-device-profile="mobile"] .enroll-head { padding: 14px 16px; }
    html[data-gp-device-profile="mobile"] .browser-chrome { padding: 10px 10px 0; }
    html[data-gp-device-profile="mobile"] .browser-chrome > .gp-row { width: 100%; }
    html[data-gp-device-profile="mobile"] .browser-traffic { display: none; }
    html[data-gp-device-profile="mobile"] .browser-url {
      width: 100%;
      min-width: 0;
      max-width: none;
    }
    html[data-gp-device-profile="mobile"] .browser-tab {
      min-height: 44px;
      padding: 9px 12px;
    }
    html[data-gp-device-profile="mobile"] .inbox-detail,
    html[data-gp-device-profile="mobile"] .reading-shell,
    html[data-gp-device-profile="mobile"] .mock-app {
      padding: 18px 16px;
    }
    html[data-gp-device-profile="mobile"] .editor-shell { padding: 16px; }
    html[data-gp-device-profile="mobile"] .actions-tray { padding: 16px; }
    html[data-gp-device-profile="mobile"] .trace-area,
    html[data-gp-device-profile="mobile"] .click-area {
      height: min(300px, 42dvh);
      touch-action: none;
    }
    html[data-gp-device-profile="mobile"] .trace-target,
    html[data-gp-device-profile="mobile"] .click-target {
      width: 54px;
      height: 54px;
    }
    html[data-gp-device-profile="mobile"] .gp-btn {
      min-height: 48px;
    }
    html[data-gp-device-profile="mobile"] .try-step > summary {
      min-height: 54px;
    }
    html[data-gp-device-profile="mobile"] .actions-row .gp-btn,
    html[data-gp-device-profile="mobile"] .attack-row .gp-btn,
    html[data-gp-device-profile="mobile"] .handoff-row .gp-btn {
      width: 100%;
      justify-content: center;
    }
    html[data-gp-device-profile="mobile"] .signal-name { width: 86px; }
    html[data-gp-device-profile="mobile"] .signal-val { width: 42px; }
    html[data-gp-device-profile="mobile"] .gp-widget {
      left: max(12px, env(safe-area-inset-left, 0px));
      right: max(12px, env(safe-area-inset-right, 0px));
      bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      width: auto;
      border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    }
    html[data-gp-device-profile="mobile"] .gp-widget.expanded { width: auto; }
    html[data-gp-device-profile="mobile"] .gp-widget-pill {
      min-height: 54px;
      justify-content: center;
      padding: 8px 16px;
    }
    html[data-gp-device-profile="mobile"] .gp-widget-body {
      max-height: 42dvh;
      overflow-y: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      .tandem-cta, .tandem-cta-btn .arr { transition: none; }
      .next-pulse .arrow { animation: none; }
      .trace-target, .click-target, .check-bubble, .rhythm-button {
        animation: none !important;
        transition: none !important;
      }
    }

.demo-inline-1a3719d010 { gap:8px;justify-content:flex-end;flex-wrap:wrap; }
.demo-inline-2ca3a889f7 { font-size:12.5px; }
.demo-inline-2cb7d23c41 { text-align:center;font-size:12px;margin:8px 0 0;font-family:var(--font-mono); }
.demo-inline-2df5190052 { --strike-delay:1.45s; }
.demo-inline-3665bfb93e { margin-left:4px;font-size:9.5px;padding:1px 6px; }
.demo-inline-37ce463d49 { opacity:0.6;cursor:default; }
.demo-inline-391a499392 { margin-left:14px;color:var(--text-tertiary); }
.demo-inline-3eaa777771 { width:68px }
.demo-inline-40898e0fad { color:#edeef0;text-decoration:underline; }
.demo-inline-48071d20a1 { gap:8px;margin-top:8px;justify-content:flex-end; }
.demo-inline-48261eda07 { animation-delay:0.16s; }
.demo-inline-49856d8a28 { max-height:200px; }
.demo-inline-4ae35a7b3f { --strike-delay:1.8s; }
.demo-inline-4b6a644b35 { gap:10px;flex-wrap:wrap; }
.demo-inline-5225e5b7d7 { width:0% }
.demo-inline-5619168479 { top:50%;left:50%; }
.demo-inline-68443324e1 { display:flex;align-items:center;gap:8px; }
.demo-inline-6da6ce6f79 { font-size:12px;margin-top:8px; }
.demo-inline-6ea259e7d1 { margin:14px 0 8px;flex-wrap:wrap;gap:10px; }
.demo-inline-7aa8b62a93 { color:inherit;text-decoration:underline; }
.demo-inline-7eeafc98c3 { text-align:center;font-size:13px;margin:0;color:var(--primary);font-family:var(--font-mono); }
.demo-inline-84dfe8ad07 { gap:10px; }
.demo-inline-86b968b550 { width:100%;font-size:16px; }
.demo-inline-8d84299030 { margin-top:14px; }
.demo-inline-8e9c11bfe4 { font-size:12.5px;margin-top:8px; }
.demo-inline-93879d4dd8 { font-size:11.5px;margin-top:14px;text-align:center;font-family:var(--font-mono); }
/* Returning-visitor verify button: hidden until init() finds a persisted
   enrollment; JS reveals it via element.style.display (CSP-safe). */
.verify-return-btn { width:100%;margin-top:10px;display:none; }
.demo-inline-97c425d756 { margin-right:4px; }
.demo-inline-9b3b4bcc88 { max-height:150px; }
.demo-inline-9ccc4ca9d6 { width:100%; }
.demo-inline-a157e40b04 { margin:10px 0; }
.demo-inline-bb31c33050 { font-size:9.5px;padding:1px 7px; }
.demo-inline-c255ac4aa1 { text-align:center;font-size:12px;margin:0;font-family:var(--font-mono); }
.demo-inline-cb17e52cfb { animation-delay:0.08s; }
.demo-inline-d0466aa33f { display:none; }
.demo-inline-d048b6cdd1 { height:12px; }
.demo-inline-d22790172a { text-align:center;font-size:12px;margin:10px 0 0;font-family:var(--font-mono); }
.demo-inline-d33f1cafcc { display:none;margin-top:10px; }
.demo-inline-d3ca3fc3fe { width:32px;text-align:right }
.demo-inline-d640729405 { font:inherit;font-size:11px;font-family:var(--font-mono);cursor:pointer;background:none;border:1px solid var(--border,#3a3a3a);color:var(--text-tertiary);border-radius:6px;padding:3px 8px; }
.demo-inline-d64c8cb335 { font-size:18px; }
.demo-inline-d886b9a9db { margin:0 0 6px; }
.demo-inline-f31ad688b8 { display:none;margin-top:10px;width:100%;justify-content:center; }
.demo-inline-f8ec6a65f7 { animation-delay:0.24s; }
.demo-inline-fda5d07625 { --strike-delay:1.1s; }

.lock-sig-label { display: block; margin-bottom: 2px; }
.click-counter-label { text-align: center; font-size: 12px; margin: 0; font-family: var(--font-mono); }