:root {
      color-scheme: dark;
      --wood-1: #7a4a27;
      --wood-2: #4a2918;
      --wood-3: #2b180f;
      --cream: #eee5ce;
      --ink: #171714;
      --screen-black: #080a08;
      --paper: #e4dc91;
      --ease-cinema: cubic-bezier(.16, 1, .3, 1);
      --hand: "Coming Soon", "Comic Neue", "Comic Sans MS", cursive;
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #130f0c;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    button, input { font: inherit; }

    button { color: inherit; }

    body {
      display: grid;
      place-items: center;
      min-height: 100dvh;
      background:
        radial-gradient(circle at 50% 20%, rgba(126, 85, 48, .25), transparent 32%),
        radial-gradient(circle at 50% 110%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .88) 70%),
        linear-gradient(180deg, #2b2119 0 56%, #17110d 56% 100%);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .22;
      background-image:
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.018) 47px, transparent 49px),
        repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.07) 47px, transparent 49px);
      mix-blend-mode: soft-light;
    }

    .room-shadow {
      position: fixed;
      left: 50%;
      bottom: 2.5vh;
      width: min(1100px, 84vw);
      height: 8vh;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(0,0,0,.63);
      filter: blur(26px);
      pointer-events: none;
    }

    .tv-wrap {
      position: relative;
      z-index: 1;
      width: min(1180px, 95vw, calc((100dvh - 112px) * 1.98));
      margin-top: 34px;
      filter: drop-shadow(0 34px 34px rgba(0,0,0,.52));
    }

    .antenna-hub {
      position: absolute;
      z-index: 0;
      left: 50%;
      top: -49px;
      width: 76px;
      height: 42px;
      transform: translateX(-50%);
      border-radius: 36px 36px 12px 12px;
      background: linear-gradient(180deg, #46372c, #181411);
      border: 4px solid #100e0c;
      box-shadow: inset 0 5px 7px rgba(255,255,255,.09);
    }

    .antenna {
      position: absolute;
      z-index: -1;
      left: 50%;
      top: -79px;
      width: 10px;
      height: 118px;
      transform-origin: 50% 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #151515, #8a8d89 45%, #242424 75%);
      border: 2px solid #111;
      box-shadow: 0 3px 8px rgba(0,0,0,.5);
    }

    .antenna.left { transform: translateX(-15px) rotate(-31deg); }
    .antenna.right { transform: translateX(5px) rotate(31deg); }

    .antenna::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -11px;
      width: 19px;
      height: 19px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 28%, #bfc2be, #444 42%, #101010 80%);
      border: 2px solid #111;
    }

    .tv-cabinet {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(102px, 13.5vw, 155px);
      gap: clamp(13px, 1.5vw, 22px);
      padding: clamp(19px, 2.2vw, 31px);
      border: 2px solid #1b100a;
      border-radius: clamp(26px, 3vw, 46px);
      background:
        linear-gradient(104deg, rgba(255,255,255,.12), transparent 18% 74%, rgba(0,0,0,.22)),
        repeating-linear-gradient(3deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.03) 3px 6px),
        linear-gradient(145deg, var(--wood-1), var(--wood-2) 42%, var(--wood-3));
      box-shadow:
        inset 0 2px 1px rgba(255,255,255,.19),
        inset 0 -9px 18px rgba(0,0,0,.34),
        0 0 0 5px #29170f;
    }

    .tv-cabinet::after {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: calc(clamp(26px, 3vw, 46px) - 8px);
      pointer-events: none;
    }

    .screen-bezel {
      min-width: 0;
      padding: clamp(8px, 1vw, 13px);
      border-radius: clamp(25px, 2.9vw, 42px);
      background:
        linear-gradient(145deg, #151713, #020302 58%, #1c1b17);
      box-shadow:
        inset 0 0 0 2px #000,
        inset 0 0 23px rgba(255,255,255,.06),
        0 2px 1px rgba(255,255,255,.09);
    }

    .screen {
      position: relative;
      width: 100%;
      aspect-ratio: 596 / 335;
      overflow: hidden;
      isolation: isolate;
      border-radius: clamp(20px, 2.3vw, 35px) / clamp(17px, 2vw, 30px);
      background: var(--screen-black);
      box-shadow:
        inset 0 0 62px rgba(0,0,0,.85),
        0 0 0 2px rgba(255,255,255,.035);
      transform: translateZ(0);
    }

    .screen.is-off::before {
      content: "";
      position: absolute;
      z-index: 40;
      inset: 0;
      background: #020302;
    }

    .screen.powering-on {
      animation: crt-on .52s ease-out both;
    }

    @keyframes crt-on {
      0% { filter: brightness(0); transform: scaleY(.012) scaleX(.72); }
      36% { filter: brightness(2.2); transform: scaleY(.018) scaleX(1); }
      70% { filter: brightness(1.35); transform: scaleY(1.025) scaleX(.995); }
      100% { filter: brightness(1); transform: none; }
    }

    .visual-layer {
      position: absolute;
      inset: 0;
    }

    #scene-layer {
      z-index: 1;
      overflow: hidden;
      background: #111;
    }

    #scene-photo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform-origin: 0 0;
      will-change: transform, filter, opacity;
      user-select: none;
      -webkit-user-drag: none;
      filter: saturate(.86) contrast(1.035) brightness(.93);
    }

    .paper-layer {
      z-index: 3;
      display: grid;
      place-items: center;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      color: #2f3426;
      background:
        linear-gradient(rgba(235,231,156,.08), rgba(216,210,122,.06)),
        url("/assets/notebook-paper.jpg") center / cover;
      transition: opacity 1.15s var(--ease-cinema), visibility 1.15s;
    }

    .paper-layer.visible {
      opacity: 1;
      visibility: visible;
    }

    .paper-copy {
      position: relative;
      z-index: 1;
      max-width: 92%;
      color: #2f3426;
      font-family: var(--hand);
      font-weight: 400;
      text-align: center;
      text-shadow: .012em .018em 0 rgba(0,0,0,.12);
      text-rendering: geometricPrecision;
      transform: rotate(-.35deg);
    }

    .paper-buy-copy {
      font-size: clamp(47px, 8.6vw, 122px);
      line-height: .98;
      letter-spacing: -.045em;
      white-space: nowrap;
    }

    .paper-protect-copy {
      width: min(91%, 1050px);
      font-size: clamp(29px, 5.2vw, 72px);
      line-height: 1.28;
      letter-spacing: -.018em;
    }

    .btc-b {
      position: relative;
      display: inline-block;
      padding: 0 .015em;
    }

    .btc-b::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -7%;
      width: .042em;
      height: 114%;
      transform: translateX(-50%) rotate(-1.5deg);
      border-radius: 999px;
      background: currentColor;
      opacity: .92;
      box-shadow: .014em .01em 0 rgba(0,0,0,.1);
    }

    #paper-protect {
      z-index: 4;
      transition-duration: 1.35s;
    }

    .chat-ui {
      position: absolute;
      z-index: 8;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding: clamp(15px, 2.25vw, 31px);
      color: #181914;
      font-family: var(--hand);
      opacity: 0;
      visibility: hidden;
      transform: scale(1.025);
      background:
        linear-gradient(rgba(239,235,190,.93), rgba(239,235,190,.93)),
        url("/assets/notebook-paper.jpg") center / cover;
      transition:
        opacity 1.05s var(--ease-cinema),
        visibility 1.05s,
        transform 1.2s var(--ease-cinema);
    }

    .chat-ui.visible {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    .chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: clamp(9px, 1.25vw, 15px);
      border-bottom: 1px solid rgba(24,25,20,.18);
    }

    .chat-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: clamp(12px, 1.12vw, 16px);
      font-weight: 850;
      letter-spacing: .16em;
    }

    .shield {
      width: clamp(20px, 2vw, 27px);
      height: clamp(22px, 2.2vw, 30px);
      display: grid;
      place-items: center;
    }

    .shield svg { width: 100%; height: 100%; }

    .online {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: rgba(24,25,20,.63);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: clamp(9px, .9vw, 12px);
      font-weight: 750;
      letter-spacing: .09em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .online::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #50632f;
      box-shadow: 0 0 0 4px rgba(80,99,47,.12);
    }

    .chat-body {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(10px, 1.3vw, 17px);
      width: min(760px, 94%);
      margin: 0 auto;
    }

    .message-row {
      display: flex;
      align-items: flex-start;
      gap: clamp(8px, 1vw, 13px);
    }

    .avatar {
      flex: 0 0 auto;
      width: clamp(27px, 2.8vw, 39px);
      height: clamp(27px, 2.8vw, 39px);
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #f5f1d3;
      background: #171915;
      font-family: Georgia, serif;
      font-size: clamp(12px, 1.2vw, 17px);
    }

    .assistant-copy {
      max-width: 680px;
      padding: clamp(11px, 1.35vw, 17px) clamp(13px, 1.7vw, 21px);
      border: 1px solid rgba(24,25,20,.16);
      border-radius: 4px 17px 17px 17px;
      background: rgba(255,255,255,.43);
      box-shadow: 0 9px 30px rgba(36,36,20,.07);
      font-family: var(--hand);
      font-size: clamp(18px, 2.15vw, 29px);
      letter-spacing: -.018em;
      line-height: 1.2;
    }

    .user-row {
      display: none;
      justify-content: flex-end;
    }

    .user-row.visible { display: flex; }

    .user-copy {
      max-width: 72%;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 9px 13px;
      border-radius: 14px 4px 14px 14px;
      background: #1d2019;
      color: #f3efd4;
      font-family: var(--hand);
      font-size: clamp(12px, 1.2vw, 17px);
      white-space: nowrap;
    }

    .demo-response {
      min-height: 1.35em;
      color: rgba(24,25,20,.68);
      font-family: var(--hand);
      font-size: clamp(11px, 1.12vw, 16px);
      line-height: 1.45;
      padding-left: clamp(35px, 3.8vw, 52px);
    }

    .next-step-link {
      display: inline-block;
      margin-top: 7px;
      color: #171914;
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 800;
    }

    .typing {
      display: inline-flex;
      gap: 4px;
      align-items: center;
      min-height: 16px;
    }

    .typing i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      animation: dot 1s ease-in-out infinite;
    }
    .typing i:nth-child(2) { animation-delay: .12s; }
    .typing i:nth-child(3) { animation-delay: .24s; }
    @keyframes dot { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

    .composer {
      width: min(760px, 94%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: clamp(7px, .8vw, 10px);
      border: 1px solid rgba(24,25,20,.22);
      border-radius: 16px;
      background: rgba(255,255,255,.61);
      box-shadow: 0 14px 36px rgba(36,36,20,.11);
    }

    .composer input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      color: #171914;
      background: transparent;
      padding: 0 clamp(6px, .7vw, 10px);
      font-family: var(--hand);
      font-size: clamp(13px, 1.4vw, 19px);
    }

    .composer input::placeholder { color: rgba(23,25,20,.46); }

    .composer button {
      border: 0;
      border-radius: 11px;
      padding: clamp(9px, 1vw, 12px) clamp(12px, 1.25vw, 17px);
      background: #181a16;
      color: #f5f0ce;
      font-family: var(--hand);
      font-size: clamp(11px, 1.12vw, 16px);
      font-weight: 800;
      cursor: pointer;
      transition: transform .16s ease, background .16s ease;
    }

    .composer button:hover { background: #2a2d24; }
    .composer button:active { transform: translateY(1px); }
    .composer button:disabled { opacity: .58; cursor: wait; }

    .fine-print {
      width: min(760px, 94%);
      margin: clamp(7px, .8vw, 11px) auto 0;
      color: rgba(24,25,20,.53);
      font-family: var(--hand);
      font-size: clamp(9px, .86vw, 12px);
      line-height: 1.35;
    }

    .screen-effects,
    .screen-effects::before,
    .screen-effects::after {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .screen-effects {
      z-index: 20;
      border-radius: inherit;
      background:
        radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.24) 100%),
        linear-gradient(115deg, rgba(255,255,255,.11), transparent 23% 76%, rgba(255,255,255,.025));
      box-shadow: inset 0 0 52px rgba(0,0,0,.47);
    }

    .screen-effects::before {
      content: "";
      opacity: .18;
      background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.34) 0,
        rgba(0,0,0,.34) 1px,
        transparent 1px,
        transparent 4px
      );
      mix-blend-mode: multiply;
    }

    .screen-effects::after {
      content: "";
      opacity: .095;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      animation: noise .22s steps(2) infinite;
      mix-blend-mode: overlay;
    }

    @keyframes noise {
      0% { transform: translate(0,0); }
      25% { transform: translate(-1.4%, .8%); }
      50% { transform: translate(.8%, -1.2%); }
      75% { transform: translate(1.3%, .9%); }
      100% { transform: translate(-.7%, -1%); }
    }

    .signal-flash {
      position: absolute;
      z-index: 18;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.34) 0 1px, transparent 1px 5px),
        rgba(255,255,255,.25);
      mix-blend-mode: screen;
    }

    .signal-flash.pop { animation: signal-pop .42s ease-out; }
    @keyframes signal-pop {
      0% { opacity: 0; }
      24% { opacity: .43; }
      62% { opacity: .09; }
      100% { opacity: 0; }
    }

    .skip {
      position: absolute;
      z-index: 30;
      right: 14px;
      bottom: 12px;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.46);
      padding: 4px 1px;
      color: rgba(255,255,255,.72);
      background: transparent;
      font-size: clamp(8px, .75vw, 10px);
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color .2s ease;
    }

    .skip:hover { color: white; }
    .skip.hidden { opacity: 0; visibility: hidden; }

    .control-panel {
      position: relative;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: clamp(9px, 1.15vw, 15px) clamp(6px, .8vw, 10px);
      border-radius: 18px;
      color: var(--cream);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 22%),
        #241d18;
      border: 2px solid #17120f;
      box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.025),
        inset 0 -12px 22px rgba(0,0,0,.28);
    }

    .tv-label {
      margin: 2px 0 clamp(10px, 1.2vw, 16px);
      text-align: center;
      font-family: Georgia, serif;
      font-size: clamp(10px, 1.05vw, 14px);
      font-weight: 700;
      letter-spacing: .15em;
      line-height: 1.25;
    }

    .tv-label small {
      display: block;
      margin-top: 3px;
      color: rgba(238,229,206,.52);
      font-family: ui-sans-serif, sans-serif;
      font-size: clamp(6px, .55vw, 8px);
      letter-spacing: .12em;
      font-weight: 700;
    }

    .dial-label {
      margin-bottom: 5px;
      color: rgba(238,229,206,.5);
      font-size: clamp(6px, .55vw, 8px);
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .dial {
      position: relative;
      width: clamp(44px, 5vw, 66px);
      aspect-ratio: 1;
      margin-bottom: clamp(9px, 1.1vw, 15px);
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      background:
        radial-gradient(circle at 38% 32%, #858076, #383833 38%, #0b0c0b 70%);
      box-shadow:
        inset 0 0 0 3px #0a0b0a,
        inset 0 0 0 7px rgba(255,255,255,.05),
        0 5px 8px rgba(0,0,0,.45);
      transition: transform .28s ease;
    }

    .dial:hover { transform: rotate(8deg); }
    .dial:active { transform: rotate(15deg) scale(.97); }

    .dial::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 8%;
      width: 3px;
      height: 24%;
      transform: translateX(-50%);
      border-radius: 2px;
      background: #d9d0b8;
      box-shadow: 0 0 2px #000;
    }

    .speaker {
      width: 82%;
      flex: 1;
      min-height: 48px;
      border-radius: 10px;
      opacity: .76;
      background-image: radial-gradient(circle, #080908 0 2px, transparent 2.2px);
      background-size: 9px 9px;
      box-shadow: inset 0 0 12px rgba(0,0,0,.4);
    }

    .power-row {
      width: 82%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: clamp(8px, 1vw, 12px);
      color: rgba(238,229,206,.5);
      font-size: clamp(6px, .55vw, 8px);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .power-light {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #a63d26;
      box-shadow: 0 0 9px rgba(214,73,45,.72);
    }

    .feet {
      position: absolute;
      z-index: 0;
      left: 7%;
      right: 7%;
      bottom: -20px;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
    }

    .foot {
      width: 12%;
      height: 28px;
      border-radius: 0 0 12px 12px;
      background: linear-gradient(180deg, #25160e, #0d0907);
      transform: skewX(-8deg);
      box-shadow: 0 9px 12px rgba(0,0,0,.38);
    }

    .foot:last-child { transform: skewX(8deg); }

    @media (max-width: 720px) {
      .tv-wrap {
        width: min(97vw, calc((100dvh - 78px) * 2.04));
        margin-top: 24px;
      }

      .tv-cabinet {
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 9px;
        padding: 12px;
        border-radius: 25px;
      }

      .screen-bezel { padding: 7px; border-radius: 21px; }
      .screen { border-radius: 16px / 14px; }
      .control-panel { border-radius: 14px; padding: 7px 4px; }
      .tv-label { font-size: 8px; margin-bottom: 7px; }
      .tv-label small { display: none; }
      .dial-label { display: none; }
      .dial { width: 34px; margin-bottom: 8px; }
      .speaker { background-size: 7px 7px; min-height: 32px; }
      .power-row { font-size: 5px; gap: 4px; }
      .power-light { width: 6px; height: 6px; }
      .antenna-hub { top: -37px; transform: translateX(-50%) scale(.78); }
      .antenna { top: -61px; height: 92px; }
      .chat-ui { padding: 12px; }
      .chat-body { width: 96%; gap: 7px; }
      .composer { width: 96%; padding: 5px; }
      .fine-print { display: none; }
      .assistant-copy { font-size: clamp(13px, 3.3vw, 18px); }
      .online { display: none; }
    }

    @media (max-height: 560px) {
      .tv-wrap {
        width: min(96vw, calc((100dvh - 54px) * 2.06));
        margin-top: 18px;
      }
      .antenna-hub { top: -34px; transform: translateX(-50%) scale(.7); }
      .antenna { top: -53px; height: 80px; }
      .feet { bottom: -13px; }
      .foot { height: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }


    .paper-buy-wordmark {
      width: min(83%, 900px);
      height: auto;
      display: block;
      filter: drop-shadow(.012em .018em 0 rgba(0,0,0,.12));
      transform: rotate(-.35deg);
    }

    .composer button { white-space: nowrap; }


    .review-card {
      width: min(760px, 100%);
      padding-left: clamp(35px, 3.8vw, 52px);
      font-family: var(--hand);
    }

    .review-kicker {
      margin-bottom: 7px;
      color: rgba(24,25,20,.58);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: clamp(8px, .8vw, 11px);
      font-weight: 850;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .review-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      margin: 7px 0 9px;
    }

    .review-grid div {
      min-width: 0;
      padding: 8px 9px;
      border: 1px solid rgba(24,25,20,.15);
      border-radius: 11px;
      background: rgba(255,255,255,.34);
    }

    .review-grid span {
      display: block;
      margin-bottom: 4px;
      color: rgba(24,25,20,.57);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: clamp(6px, .56vw, 8px);
      font-weight: 850;
      letter-spacing: .09em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .review-grid b {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #181914;
      font-size: clamp(10px, 1vw, 15px);
      white-space: nowrap;
    }

    .analysis-copy {
      margin: 7px 0 9px;
      color: rgba(24,25,20,.76);
      font-size: clamp(10px, 1vw, 15px);
      line-height: 1.32;
    }

    .option-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin: 8px 0 4px;
    }

    .coverage-option {
      min-height: 94px;
      border: 1px solid rgba(24,25,20,.16);
      border-radius: 13px;
      padding: 9px;
      color: #181914;
      background: rgba(255,255,255,.38);
      text-align: left;
      font-family: var(--hand);
      transition: transform .16s ease, background .16s ease, border-color .16s ease;
    }

    .coverage-option.recommended,
    .coverage-option.selected {
      border-color: rgba(24,25,20,.5);
      background: rgba(255,255,255,.62);
      box-shadow: 0 6px 20px rgba(36,36,20,.09);
    }

    .coverage-option:hover { transform: translateY(-1px); }
    .coverage-option span,
    .coverage-option b,
    .coverage-option small,
    .coverage-option em { display: block; }
    .coverage-option span {
      color: rgba(24,25,20,.58);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: clamp(6px, .58vw, 8px);
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .coverage-option b {
      margin-top: 4px;
      font-size: clamp(12px, 1.1vw, 16px);
      line-height: 1.05;
    }
    .coverage-option small {
      margin-top: 4px;
      color: rgba(24,25,20,.72);
      font-size: clamp(9px, .85vw, 12px);
    }
    .coverage-option em {
      margin-top: 4px;
      color: rgba(24,25,20,.60);
      font-size: clamp(8px, .76vw, 10px);
      font-style: normal;
      line-height: 1.2;
    }

    @media (max-width: 720px) {
      .review-card { padding-left: 0; }
      .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .option-grid { grid-template-columns: 1fr; }
    }


    .chat-ui.has-review .chat-body {
      justify-content: flex-start;
      width: min(850px, 96%);
      gap: 7px;
      overflow-y: auto;
      padding: 4px 0 6px;
    }

    .chat-ui.has-review .message-row:first-child {
      display: none;
    }

    .chat-ui.has-review .user-copy {
      max-width: 92%;
      font-size: clamp(9px, .9vw, 13px);
      padding: 6px 10px;
    }

    .chat-ui.has-review .demo-response {
      padding-left: 0;
    }

    .chat-ui.has-review .review-card {
      padding-left: 0;
    }

    .chat-ui.has-review .analysis-copy {
      font-size: clamp(8px, .82vw, 12px);
      line-height: 1.22;
      margin: 5px 0 6px;
    }

    .chat-ui.has-review .review-grid div {
      padding: 6px 7px;
    }

    .chat-ui.has-review .coverage-option {
      min-height: 72px;
      padding: 7px;
    }

    .chat-ui.has-review .composer {
      padding: 5px;
    }

    .chat-ui.has-review .fine-print {
      margin-top: 4px;
      font-size: clamp(7px, .68vw, 9px);
    }


    /* Explicit client-mode split: desktop keeps the normal CRT cabinet; mobile gets a phone-first paper screen. */
    html[data-client-mode="mobile"],
    html[data-client-mode="mobile"] body {
      height: auto;
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      background: #17110d;
    }

    body[data-client-mode="mobile"] {
      display: block;
      min-height: 100svh;
      padding: 12px 10px 18px;
      background:
        radial-gradient(circle at 50% 0%, rgba(126, 85, 48, .22), transparent 32%),
        linear-gradient(180deg, #241a13 0%, #100c09 100%);
    }

    body[data-client-mode="mobile"]::before {
      opacity: .13;
      background-size: 36px 36px;
    }

    body[data-client-mode="mobile"] .room-shadow,
    body[data-client-mode="mobile"] .antenna,
    body[data-client-mode="mobile"] .antenna-hub,
    body[data-client-mode="mobile"] .control-panel,
    body[data-client-mode="mobile"] .feet {
      display: none;
    }

    body[data-client-mode="mobile"] .tv-wrap {
      width: min(100%, 560px);
      margin: 0 auto;
      filter: drop-shadow(0 16px 24px rgba(0,0,0,.36));
    }

    body[data-client-mode="mobile"] .tv-cabinet {
      display: block;
      padding: 10px;
      border-radius: 25px;
      background:
        linear-gradient(104deg, rgba(255,255,255,.10), transparent 20% 72%, rgba(0,0,0,.2)),
        repeating-linear-gradient(3deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.03) 3px 6px),
        linear-gradient(145deg, var(--wood-1), var(--wood-2) 48%, var(--wood-3));
      box-shadow:
        inset 0 2px 1px rgba(255,255,255,.18),
        inset 0 -8px 16px rgba(0,0,0,.32),
        0 0 0 3px #29170f;
    }

    body[data-client-mode="mobile"] .screen-bezel {
      padding: 7px;
      border-radius: 21px;
    }

    body[data-client-mode="mobile"] .screen {
      aspect-ratio: auto;
      min-height: calc(100svh - 46px);
      border-radius: 16px / 14px;
    }

    body[data-client-mode="mobile"] #scene-layer,
    body[data-client-mode="mobile"] .paper-layer {
      min-height: inherit;
    }

    body[data-client-mode="mobile"] .paper-buy-wordmark {
      width: min(92%, 440px);
    }

    body[data-client-mode="mobile"] .paper-protect-copy {
      width: 92%;
      font-size: clamp(34px, 11vw, 56px);
      line-height: 1.08;
      white-space: normal;
    }

    body[data-client-mode="mobile"] .chat-ui {
      min-height: inherit;
      padding: 13px 12px 12px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    body[data-client-mode="mobile"] .chat-header {
      gap: 8px;
      padding-bottom: 10px;
    }

    body[data-client-mode="mobile"] .chat-brand {
      font-size: 12px;
      gap: 7px;
    }

    body[data-client-mode="mobile"] .shield {
      width: 21px;
      height: 23px;
    }

    body[data-client-mode="mobile"] .online {
      display: inline-flex;
      max-width: 48%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 8px;
      letter-spacing: .06em;
    }

    body[data-client-mode="mobile"] .chat-body {
      width: 100%;
      justify-content: flex-start;
      gap: 9px;
      padding: 18px 0 8px;
      overflow: visible;
    }

    body[data-client-mode="mobile"] .message-row {
      gap: 8px;
    }

    body[data-client-mode="mobile"] .avatar {
      width: 28px;
      height: 28px;
      font-size: 12px;
    }

    body[data-client-mode="mobile"] .assistant-copy {
      max-width: calc(100% - 38px);
      padding: 12px 13px;
      font-size: clamp(20px, 6vw, 28px);
      line-height: 1.08;
      border-radius: 4px 14px 14px 14px;
    }

    body[data-client-mode="mobile"] .user-row {
      width: 100%;
    }

    body[data-client-mode="mobile"] .user-copy {
      max-width: 100%;
      white-space: normal;
      word-break: break-all;
      font-size: 12px;
      line-height: 1.15;
      padding: 8px 10px;
    }

    body[data-client-mode="mobile"] .demo-response {
      padding-left: 0;
      font-size: 13px;
    }

    body[data-client-mode="mobile"] .composer {
      width: 100%;
      position: sticky;
      bottom: 0;
      z-index: 5;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      margin-top: 8px;
      padding: 6px;
      border-radius: 14px;
    }

    body[data-client-mode="mobile"] .composer input {
      font-size: 16px;
      padding: 0 7px;
    }

    body[data-client-mode="mobile"] .composer button {
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 13px;
    }

    body[data-client-mode="mobile"] .fine-print {
      display: block;
      width: 100%;
      margin-top: 8px;
      font-size: 10px;
      line-height: 1.25;
    }

    body[data-client-mode="mobile"] .review-card {
      width: 100%;
      padding-left: 0;
    }

    body[data-client-mode="mobile"] .review-kicker {
      font-size: 9px;
      margin-bottom: 7px;
    }

    body[data-client-mode="mobile"] .review-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin: 7px 0;
    }

    body[data-client-mode="mobile"] .review-grid div {
      padding: 8px;
      border-radius: 10px;
    }

    body[data-client-mode="mobile"] .review-grid span {
      font-size: 7px;
      letter-spacing: .06em;
    }

    body[data-client-mode="mobile"] .review-grid b {
      font-size: 14px;
    }

    body[data-client-mode="mobile"] .analysis-copy {
      max-height: none;
      margin: 8px 0;
      font-size: 12px;
      line-height: 1.25;
    }

    body[data-client-mode="mobile"] .option-grid {
      grid-template-columns: 1fr;
      gap: 7px;
      margin: 8px 0;
    }

    body[data-client-mode="mobile"] .coverage-option {
      min-height: auto;
      padding: 10px;
      border-radius: 12px;
    }

    body[data-client-mode="mobile"] .coverage-option b {
      font-size: 18px;
    }

    body[data-client-mode="mobile"] .coverage-option small {
      font-size: 13px;
    }

    body[data-client-mode="mobile"] .coverage-option em {
      font-size: 11px;
    }

    body[data-client-mode="mobile"] .next-step-link {
      margin: 4px 0 6px;
      font-size: 15px;
    }

    body[data-client-mode="mobile"] .skip {
      right: 12px;
      bottom: 10px;
    }

    body[data-client-mode="mobile"] .chat-ui.has-review .chat-body {
      width: 100%;
      overflow: visible;
      padding: 8px 0 4px;
    }

    body[data-client-mode="mobile"] .chat-ui.has-review .message-row:first-child {
      display: none;
    }

    body[data-client-mode="mobile"] .chat-ui.has-review .user-copy {
      max-height: 3.5em;
      overflow: hidden;
      font-size: 10px;
    }

    @media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
      html:not([data-client-mode="desktop"]),
      html:not([data-client-mode="desktop"]) body {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }