:root {
    /* ── dark-glass / premium palette ───────────────────────────────── */
    --ink:        #eef1f6;              /* near-white primary text */
    --ink-soft:   rgba(238,241,246,.66);
    --ink-faint:  rgba(238,241,246,.40);

    --amber:      #ffb020;             /* brand accent */
    --amber-deep: #f59000;
    --amber-lite: #ffc94d;
    --amber-glow: rgba(255,176,32,.55);

    /* layered backdrop */
    --bg-0:       #0a0c10;
    --bg-1:       #0e1117;

    /* translucent glass materials (never stack two light ones) */
    --glass:      rgba(255,255,255,.045);
    --glass-2:    rgba(255,255,255,.065);   /* interactive / raised */
    --glass-strong: rgba(18,22,30,.62);     /* heavier structural chrome */
    --stroke:     rgba(255,255,255,.09);
    --stroke-top: rgba(255,255,255,.16);     /* bright top edge = light catching glass */
    --stroke-strong: rgba(255,255,255,.22);

    --cream:      var(--bg-1);          /* legacy aliases kept so every rule still resolves */
    --cream-2:    rgba(255,255,255,.06);
    --card:       var(--glass);
    --foam:       var(--glass-2);

    --brand: var(--amber);
    --ok: #37d08a;

    --radius: 22px;
    --radius-sm: 14px;
    --brd: 1px solid var(--stroke);
    --brd-strong: 1px solid var(--stroke-strong);

    --lift: 0 30px 60px -28px rgba(0,0,0,.75), 0 8px 24px -16px rgba(0,0,0,.6);
    --lift-sm: 0 14px 30px -18px rgba(0,0,0,.7);
    --glow: 0 0 0 1px rgba(255,176,32,.12), 0 20px 60px -24px rgba(255,160,24,.28);

    /* critically-damped ease + a gentle spring for momentum-y motion */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --spring: linear(
      0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 59.9%,
      1.013 65.3%, 1.006 73%, 1.001 83.2%, 1);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
    --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  body {
    font-family: var(--font); font-optical-sizing: auto;
    color: var(--ink); min-height: 100vh; overflow-x: hidden; position: relative;
    background:
      radial-gradient(130% 90% at 50% -18%, rgba(255,176,32,.16) 0%, transparent 52%),
      radial-gradient(90% 70% at 85% 8%, rgba(120,90,255,.08) 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    background-attachment: fixed;
  }

  /* living backdrop: soft amber light + slow rising bubbles (dimmed for dark) */
  .stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .stage .glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .32; }
  .stage .g1 { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: radial-gradient(circle at 40% 40%, #ffb84d, transparent 66%); animation: drift1 26s var(--ease) infinite alternate; }
  .stage .g2 { width: 40vw; height: 40vw; right: -6vw; top: -8vw; background: radial-gradient(circle at 60% 40%, #ff9e2e, transparent 66%); animation: drift2 30s var(--ease) infinite alternate; }
  .stage .g3 { width: 44vw; height: 44vw; left: 24vw; bottom: -24vw; background: radial-gradient(circle at 50% 50%, #7a5aff, transparent 68%); opacity: .2; animation: drift1 34s var(--ease) infinite alternate-reverse; }
  @keyframes drift1 { to { transform: translate(6vw, 8vh) scale(1.12); } }
  @keyframes drift2 { to { transform: translate(-5vw, 7vh) scale(1.1); } }

  .bubbles { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .bubbles b {
    position: absolute; bottom: -40px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,201,77,.28) 60%, rgba(245,144,0,.12));
    box-shadow: inset 0 0 6px rgba(255,255,255,.35);
    animation: rise linear infinite;
  }
  @keyframes rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .5; }
    90%  { opacity: .35; }
    100% { transform: translateY(-112vh) translateX(18px); opacity: 0; }
  }

  .shell { position: relative; z-index: 1; max-width: 1680px; margin: 0 auto; padding: 14px clamp(16px, 2vw, 34px) 48px; }

  /* header — floating frosted toolbar (translucent chrome, content scrolls under) */
  header {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: sticky; top: 12px; z-index: 50; margin-bottom: clamp(18px, 3vh, 32px);
    padding: 10px 14px 10px 18px; border-radius: 999px;
    background: var(--glass-strong);
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--stroke); border-top-color: var(--stroke-top);
    box-shadow: 0 16px 40px -24px rgba(0,0,0,.8);
  }
  .wordmark { display: flex; align-items: center; gap: 11px; }
  .wordmark img { width: 40px; height: 40px; display: block; filter: drop-shadow(0 4px 12px rgba(255,160,24,.4)); }
  .wordmark .name { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
  .wordmark .name .dot { color: var(--amber); }

  /* hero */
  .hero { max-width: 840px; margin: 0 auto clamp(18px, 2.6vh, 30px); text-align: center; padding-top: clamp(10px, 3vh, 34px); }
  h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 58px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700; color: var(--ink); }
  h1 em { font-style: normal; color: var(--amber); position: relative; white-space: nowrap; text-shadow: 0 0 36px rgba(255,176,32,.35); }
  .sub { margin: 14px auto 0; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.55; color: var(--ink-soft); max-width: 580px; font-weight: 450; }

  /* main grid */
  .grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;
    height: clamp(390px, calc(100dvh - 240px), 640px); min-height: 0;
  }
  @media (max-width: 940px) {
    .grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .grid .panel { height: min(560px, 68dvh); min-height: 390px; }
  }

  /* glass panels */
  .panel {
    position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--glass);
    backdrop-filter: blur(30px) saturate(135%); -webkit-backdrop-filter: blur(30px) saturate(135%);
    border: 1px solid var(--stroke); border-top-color: var(--stroke-top);
    border-radius: var(--radius); box-shadow: var(--lift);
  }
  /* second panel (result) carries a faint amber ring — the "glowing" card */
  .grid .panel:last-child { box-shadow: var(--lift), var(--glow); }
  /* light-catch sheen across the top of each panel */
  .panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.07), transparent);
  }
  .panel > * { position: relative; z-index: 1; }

  .panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 22px 0; }
  .panel-title { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }

  /* segmented control (Apple-style sliding pill) */
  .seg {
    display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid var(--stroke);
  }
  .seg button {
    border: 0; background: transparent; font: inherit; font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    transition: color .2s var(--ease), background .35s var(--spring), box-shadow .3s var(--ease), transform .2s var(--spring);
  }
  .seg button:hover { color: var(--ink); }
  .seg button.on {
    color: #1a1205;
    background: linear-gradient(180deg, var(--amber-lite), var(--amber-deep));
    box-shadow: 0 8px 18px -8px rgba(255,160,24,.7), inset 0 1px 0 rgba(255,255,255,.5);
  }

  /* editor */
  .editor { padding: 16px 22px 4px; flex: 1; min-height: 0; display: flex; overflow: hidden; }
  textarea {
    width: 100%; min-height: 0; height: 100%; resize: none; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-gutter: stable; border: 0; outline: none; background: transparent;
    font-family: var(--font); font-size: 17px; line-height: 1.62; color: var(--ink); font-weight: 450;
  }
  textarea::placeholder { color: var(--ink-faint); font-weight: 450; }

  /* shared footer height so the two cards line up */
  .foot, .out-foot { box-sizing: border-box; min-height: 100px; padding: 14px 22px; border-top: 1px solid var(--stroke); }
  .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .count { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600; }
  .count b { color: var(--ink); font-weight: 800; }

  /* primary button — amber pour, glowing on dark */
  .btn {
    position: relative; overflow: hidden; border: 0; cursor: pointer; font: inherit; font-family: var(--display); font-weight: 700; font-size: 16px;
    color: #1a1205; padding: 14px 28px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, var(--amber-lite), var(--amber-deep));
    box-shadow: 0 14px 30px -10px rgba(255,160,24,.65), inset 0 1px 0 rgba(255,255,255,.5);
    transition: transform .22s var(--spring), box-shadow .22s var(--ease), opacity .2s;
  }
  .btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease);
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -12px rgba(255,160,24,.8), inset 0 1px 0 rgba(255,255,255,.5); }
  .btn:hover::after { left: 130%; }
  .btn:active { transform: translateY(0) scale(.985); }
  .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  .btn .arrow { transition: transform .3s var(--spring); }
  .btn:hover .arrow { transform: translateX(4px); }

  .spinner { width: 15px; height: 15px; border: 2px solid rgba(26,18,5,.3); border-top-color: #1a1205; border-radius: 50%; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .save-note { font-size: 12.5px; color: var(--ink-faint); padding: 0 22px 14px; margin: 0; line-height: 1.5; }
  .save-note a { color: var(--ink-soft); }
  .save-note label { white-space: nowrap; cursor: pointer; }
  .save-note input { vertical-align: -2px; margin: 0 2px 0 0; accent-color: var(--amber-deep); }
  .turnstile-slot { display: flex; justify-content: flex-end; min-height: 0; padding: 0 22px 12px; }
  .turnstile-slot:empty { display: none; }
  .err { color: #ff7a5c; font-size: 14px; font-weight: 700; padding: 0 22px 18px; }
  .err:empty { display: none; }

  /* output */
  .out-body { padding: 18px 0 0; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .pane { display: none; flex: 1; min-height: 0; flex-direction: column; animation: rise2 .5s var(--spring); }
  .pane.on { display: flex; }
  @keyframes rise2 { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
  .output {
    flex: 1; min-height: 0; padding: 0 22px; font-size: 17.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap;
    font-family: var(--font); font-weight: 450; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  }
  .output .empty { color: var(--ink-faint); font-size: 16px; font-weight: 500; }

  /* video ad in the result window while the rewrite runs */
  .ad-slot { display: flex; flex-direction: column; gap: 12px; white-space: normal; }
  .ad-msg { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--ink); text-align: center; }
  .ad-msg span { display: block; font-family: var(--font); font-weight: 500; font-size: 14.5px; color: var(--ink-faint); }
  .ad-gamble { align-self: center; }
  .ad-gamble[hidden] { display: none; }
  .ad-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--stroke); }

  /* "pouring" state while the rewrite runs */
  .pouring { height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
  .pouring p { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
  .pouring small { color: var(--ink-faint); font-weight: 500; font-size: 13.5px; max-width: 320px; }
  .mug {
    width: 56px; height: 64px; margin-bottom: 14px; border-radius: 10px 10px 14px 14px;
    border: 3px solid rgba(255,255,255,.55); position: relative; overflow: hidden; background: rgba(255,255,255,.04);
    box-shadow: 0 0 30px -6px var(--amber-glow);
  }
  .mug::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
    background: linear-gradient(180deg, var(--amber-lite), var(--amber-deep));
    animation: fill 2.2s var(--ease) infinite;
  }
  .mug::before {
    content: ""; position: absolute; right: -16px; top: 12px; width: 16px; height: 26px;
    border: 3px solid rgba(255,255,255,.55); border-left: 0; border-radius: 0 10px 10px 0;
  }
  @keyframes fill { 0% { height: 8%; } 70% { height: 82%; } 100% { height: 8%; } }
  .out-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
  .meta { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-weight: 600; }

  /* GPTZero scan result bars */
  .gz { flex: 1; min-width: 0; display: none; flex-direction: column; gap: 7px; }
  .gz.show { display: flex; }
  .gz-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .gz-head .gz-logo { width: 22px; height: 22px; display: block; flex: none; }
  .gz-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
  .gz-rows { display: flex; flex-direction: column; gap: 5px; }
  .gz-row { display: grid; grid-template-columns: 58px 1fr 54px; align-items: center; gap: 10px; }
  .gz-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
  .gz-track { height: 9px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; border: 1px solid var(--stroke); }
  .gz-track i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .9s var(--spring); }
  .gz-row.human .gz-track i { background: linear-gradient(90deg, #45e08c, #19a85c); box-shadow: 0 0 12px -2px rgba(55,208,138,.6); }
  .gz-row.ai .gz-track i { background: linear-gradient(90deg, #ff9573, #e8512f); box-shadow: 0 0 12px -2px rgba(232,81,47,.5); }
  .gz-val { font-size: 12.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
  .gz-msg:empty { display: none; }
  .gz-msg { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); font-weight: 500; }
  .gz-msg b { color: var(--ink-soft); font-weight: 700; }
  .gz.busy .gz-rows { display: none; }
  .ghost {
    color: var(--ink); font: inherit; font-family: var(--display); font-size: 16px; font-weight: 700; padding: 12px 26px; cursor: pointer; flex: none;
    display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--stroke-strong); border-radius: 999px;
    background: var(--glass-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: transform .2s var(--spring), background .2s, box-shadow .2s, border-color .2s;
  }
  .ghost:hover { background: rgba(255,255,255,.1); border-color: var(--stroke-top); box-shadow: var(--lift-sm); }
  .ghost:active { transform: scale(.97); }

  /* SEO content */
  .seo { max-width: 920px; margin: clamp(56px, 9vh, 96px) auto 8px; color: var(--ink-soft); }
  .seo section { margin-bottom: clamp(44px, 7vh, 64px); }
  .seo h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 29px); color: var(--ink); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; text-align: center; }
  .seo h3 { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.35; margin-bottom: 6px; }
  .seo p { font-size: 15.5px; line-height: 1.7; font-weight: 450; }
  .seo .lede { max-width: 680px; margin: 0 auto; text-align: center; }
  .seo strong { color: var(--ink); font-weight: 700; }
  .seo em { font-style: normal; color: var(--amber); font-weight: 600; }
  .seo ul, .seo ol { list-style: none; display: grid; gap: 14px; margin-top: 22px; }
  .seo .cards { grid-template-columns: repeat(3, 1fr); }
  .seo .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
  .seo .card {
    background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--stroke); border-top-color: var(--stroke-top); border-radius: 18px; box-shadow: var(--lift-sm);
    padding: 18px 20px; font-size: 15px; line-height: 1.6; font-weight: 450;
  }
  .seo .cards .card strong { display: block; font-family: var(--display); font-size: 16px; margin-bottom: 4px; }
  .seo ol { counter-reset: step; }
  .seo ol .card { counter-increment: step; display: flex; flex-direction: column; gap: 10px; }
  .seo ol .card::before {
    content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    font-family: var(--display); font-weight: 800; font-size: 15px; color: #1a1205;
    background: linear-gradient(180deg, var(--amber-lite), var(--amber));
    box-shadow: 0 8px 16px -7px rgba(255,160,24,.7), inset 0 1px 0 rgba(255,255,255,.5);
  }
  @media (max-width: 760px) { .seo .cards, .seo .faq { grid-template-columns: 1fr; } }
  .seo-foot a { color: var(--ink-soft); }
  .seo-foot { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--stroke); font-size: 13px; line-height: 1.6; color: var(--ink-faint); font-weight: 500; text-align: center; }

  /* staged entrance — spring, materialize with scale */
  .reveal { opacity: 0; transform: translateY(18px) scale(.99); animation: reveal .9s var(--spring) forwards; }
  .reveal.d1 { animation-delay: .04s; }
  .reveal.d2 { animation-delay: .12s; }
  .reveal.d3 { animation-delay: .2s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }

  /* ───────── site chrome shared by every page ───────── */
  a.wordmark { text-decoration: none; }
  .nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
  .nav a {
    font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink-soft); text-decoration: none;
    padding: 8px 14px; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease);
  }
  .nav a:hover { color: var(--ink); background: rgba(255,255,255,.08); }
  .nav a[aria-current="page"] { color: #1a1205; background: linear-gradient(180deg, var(--amber-lite), var(--amber)); }
  @media (max-width: 640px) {
    header { flex-direction: column; gap: 10px; border-radius: var(--radius); top: 8px; }
    .nav a { font-size: 14px; padding: 6px 11px; }
  }

  .crumbs { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin-bottom: 14px; }
  .crumbs a { color: var(--ink-soft); text-decoration: none; }
  .crumbs a:hover { color: var(--amber); }

  .site-foot { max-width: 1100px; margin: clamp(48px, 8vh, 80px) auto 0; padding-top: 28px; border-top: 1px solid var(--stroke); }
  .foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .foot-cols h2 { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .08em; }
  .foot-cols ul { list-style: none; display: grid; gap: 7px; }
  .foot-cols a { font-size: 14.5px; font-weight: 450; color: var(--ink-soft); text-decoration: none; }
  .foot-cols a:hover { color: var(--amber); }
  .foot-base { margin-top: 28px; font-size: 13px; color: var(--ink-faint); font-weight: 500; text-align: center; }
  .foot-base a { color: var(--ink-soft); }
  @media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

  /* related pages + call to action */
  .related { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
  .related a { display: block; height: 100%; text-decoration: none; color: inherit; }
  .related a:hover .card { box-shadow: var(--lift), var(--glow); border-top-color: var(--stroke-top); transform: translateY(-3px); }
  .related .card { transition: transform .3s var(--spring), box-shadow .3s var(--ease); }
  .related .card strong { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); margin-bottom: 4px; }
  @media (max-width: 760px) { .related { grid-template-columns: 1fr; } }
  .cta {
    margin: 36px auto 0; max-width: 680px; text-align: center; padding: 30px 24px;
    background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--stroke); border-top-color: var(--stroke-top); border-radius: var(--radius); box-shadow: var(--lift), var(--glow);
  }
  .cta p { margin: 6px 0 18px; }
  .cta .btn { text-decoration: none; }

  /* long-form content (guides, comparisons, about) */
  .prose { max-width: 760px; margin: 0 auto; color: var(--ink-soft); }
  .prose h1 { text-align: left; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.03em; }
  .prose .standfirst { margin-top: 14px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); font-weight: 450; }
  .prose .updated { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-faint); }
  .prose h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); line-height: 1.25; margin: 38px 0 10px; letter-spacing: -.02em; }
  .prose h3 { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); margin: 24px 0 6px; }
  .prose p, .prose li { font-size: 16.5px; line-height: 1.75; font-weight: 450; }
  .prose p + p { margin-top: 12px; }
  .prose ul, .prose ol { margin: 10px 0 0 22px; display: grid; gap: 6px; }
  .prose strong { color: var(--ink); font-weight: 700; }
  .prose a { color: var(--amber); font-weight: 600; text-underline-offset: 3px; }
  .prose a:hover { color: var(--amber-lite); }
  .prose blockquote { margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--amber); background: var(--glass); border-radius: 0 14px 14px 0; font-style: italic; }
  .prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; background: var(--glass); border: 1px solid var(--stroke); border-radius: 14px; overflow: hidden; }
  .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--stroke); vertical-align: top; }
  .prose th { font-family: var(--display); color: var(--ink); background: rgba(255,255,255,.05); }
  .prose .note { font-size: 14px; color: var(--ink-faint); }
  .prose .seo-faq { margin-top: 10px; display: grid; gap: 12px; }
  .prose .seo-faq .card h3 { margin-top: 0; }

  /* AI detector result */
  .det-result { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 8px 22px 22px; }
  .det-result[hidden] { display: none; }
  .det-verdict { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 33px); line-height: 1.15; text-align: center; letter-spacing: -.02em; }
  .det-verdict.ai { color: #ff7a5c; }
  .det-verdict.mixed { color: var(--amber-lite); }
  .det-verdict.human { color: var(--ok); }
  .det-result .gz { display: flex; flex: none; }
  .det-result .gz-row { grid-template-columns: 70px 1fr 64px; }
  .det-result .gz-track { height: 14px; }
  .det-note { font-size: 13px; color: var(--ink-faint); font-weight: 500; text-align: center; }
  .det-result .btn { align-self: center; }
  #det-out[hidden] { display: none; }

  /* "English text only" notice on localized pages */
  .lang-note { margin: 0 auto 14px; max-width: 640px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); border-radius: 16px; padding: 8px 18px; }
  .tool-prose { margin-top: clamp(56px, 9vh, 96px); }
  .prose ul + p, .prose ol + p, .prose table + p, .prose blockquote + p { margin-top: 14px; }
  .prose .seo-faq + h2, .prose .related { margin-top: 18px; }

/* ───────── accounts (Google Sign-In) ───────── */
header .wordmark { margin-right: auto; }
.auth-slot { display: flex; align-items: center; }
.auth-slot:empty { display: none; }
header .nav + .auth-slot { margin-left: 10px; }
.hb-signin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-weight: 700;
  color: var(--ink); background: var(--glass-2); border: 1px solid var(--stroke-strong);
  text-decoration: none; box-shadow: var(--lift-sm); transition: transform .2s var(--spring), border-color .2s;
}
.hb-signin:hover { transform: translateY(-1px); border-color: var(--stroke-top); }
.hb-acct { display: inline-flex; align-items: center; gap: 10px; }
.hb-avatar {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--stroke-strong); background: rgba(255,255,255,.06);
}
.hb-avatar-i {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #1a1205; background: var(--amber); font-size: 15px;
}
.hb-signout {
  padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: transparent; border: 1px solid var(--stroke); color: var(--ink-soft); cursor: pointer;
}
.hb-signout:hover { color: var(--ink); border-color: var(--stroke-top); }

/* gate modal */
.hb-modal-ov {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6,8,12,.64); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: hb-fade .18s var(--ease);
}
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }
.hb-modal {
  position: relative; width: 100%; max-width: 420px; text-align: center;
  background: var(--glass-strong); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--stroke); border-top-color: var(--stroke-top); border-radius: var(--radius);
  box-shadow: var(--lift); padding: 34px 28px 30px; animation: hb-pop .4s var(--spring);
}
@keyframes hb-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.hb-modal h2 { font-family: var(--display); margin: 6px 0 10px; font-size: 24px; letter-spacing: -.02em; }
.hb-modal p { color: var(--ink-soft); margin: 0 0 18px; line-height: 1.5; }
.hb-modal-x {
  position: absolute; top: 12px; right: 14px; border: none; background: transparent;
  font-size: 26px; line-height: 1; color: var(--ink-faint); cursor: pointer;
}
.hb-modal-x:hover { color: var(--ink); }
.hb-gbtn { display: flex; justify-content: center; min-height: 44px; }
.hb-auth-err { color: #ff7a5c; font-size: 14px; min-height: 18px; margin: 10px 0 0 !important; }

/* /login and /signup card */
.hb-auth-page {
  max-width: 440px; margin: 10px auto 0; text-align: center;
  background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--stroke); border-top-color: var(--stroke-top); border-radius: var(--radius);
  box-shadow: var(--lift); padding: 30px 28px;
}
.hb-auth-page > p { color: var(--ink-soft); line-height: 1.55; }
.hb-auth-page .hb-gbtn { margin: 22px 0 6px; }
.hb-auth-fine { font-size: 13px; color: var(--ink-faint); margin-top: 16px; }
.hb-auth-note { color: var(--ink-soft); font-size: 14px; }

/* email-code sign-in */
.hb-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--ink-faint); font-size: 13px; }
.hb-or::before, .hb-or::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }
.hb-email { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hb-email input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit;
  border: 1px solid var(--stroke-strong); border-radius: 14px; background: rgba(255,255,255,.05); color: var(--ink);
}
.hb-email input::placeholder { color: var(--ink-faint); }
.hb-email input:focus { outline: none; border-color: var(--amber-deep); box-shadow: 0 0 0 4px rgba(245,144,0,.16); }
.hb-code-in { text-align: center; letter-spacing: 6px; font-weight: 800; font-size: 20px; }
.hb-email .btn { width: 100%; justify-content: center; }
.hb-sent { margin: 14px 0 2px; color: var(--ink-soft); font-size: 14px; }
.hb-link { background: none; border: none; color: var(--amber); font: inherit; font-size: 14px; cursor: pointer; margin-top: 10px; text-decoration: underline; }
.hb-link:hover { color: var(--amber-lite); }
.hb-modal #hb-signin-host { display: flex; flex-direction: column; align-items: stretch; }
.hb-modal .hb-gbtn { justify-content: center; }

/* email-code: toast + verification card + OTP */
.hb-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px);
  display: flex; align-items: center; gap: 10px; z-index: 1200; max-width: 90vw;
  padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  color: var(--ink); background: var(--glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--stroke); box-shadow: var(--lift);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .35s var(--spring);
}
.hb-toast.show { opacity: 1; transform: translate(-50%, 0); }
.hb-toast-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.hb-toast-err .hb-toast-dot { background: #ff7a5c; }

.hb-codecard { position: relative; text-align: center; animation: hb-slide .3s var(--spring); }
@keyframes hb-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hb-back {
  position: absolute; top: -6px; left: -4px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: transparent; color: var(--ink-soft); font-size: 20px; cursor: pointer; line-height: 1;
}
.hb-back:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.hb-codeicon { font-size: 30px; margin: 2px 0 6px; }
.hb-code-h { font-family: var(--display); font-size: 21px; margin: 0 0 6px; letter-spacing: -.02em; }
.hb-code-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.hb-code-sub strong { color: var(--ink); }
.hb-otp { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; }
.hb-otp-box {
  width: 46px; height: 56px; text-align: center; font: 800 24px/1 var(--display);
  color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--stroke-strong);
  border-radius: 14px; padding: 0; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.hb-otp-box:focus { outline: none; border-color: var(--amber-deep); box-shadow: 0 0 0 4px rgba(245,144,0,.2); }
.hb-code-foot { margin: 14px 0 0; }
@media (max-width: 400px) { .hb-otp { gap: 6px; } .hb-otp-box { width: 40px; height: 50px; font-size: 20px; } }

  /* ── Yik Yak account recruitment banner (home page) ── */
  .recruit-banner {
    display: flex; align-items: center; gap: 16px;
    margin: 4px 0 18px; padding: 15px 20px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(13,213,178,.22) 0%, rgba(10,196,163,.14) 100%);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: var(--ink); text-decoration: none;
    box-shadow: 0 18px 38px -22px rgba(13,213,178,.5);
    border: 1px solid rgba(13,213,178,.4); border-top-color: rgba(120,255,230,.5);
    transition: transform .22s var(--spring), box-shadow .22s var(--ease);
  }
  .recruit-banner:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -20px rgba(13,213,178,.65); }
  .recruit-logo { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px;
    background: #fff; border-radius: 14px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); }
  .recruit-logo img { display: block; width: 46px; height: 46px; border-radius: 10px; }
  .recruit-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
  .recruit-text strong { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); }
  .recruit-text span { font-size: 14.5px; color: var(--ink-soft); font-weight: 450; }
  .recruit-arrow { margin-left: auto; flex: 0 0 auto; font-size: 26px; font-weight: 800; color: #0dd5b2; transition: transform .22s var(--spring); }
  .recruit-banner:hover .recruit-arrow { transform: translateX(4px); }
  @media (max-width: 520px) {
    .recruit-banner { gap: 12px; padding: 13px 15px; }
    .recruit-logo { width: 46px; height: 46px; }
    .recruit-logo img { width: 38px; height: 38px; }
    .recruit-text strong { font-size: 17px; }
    .recruit-text span { font-size: 13px; }
    .recruit-arrow { font-size: 22px; }
  }

  /* GEO "lead with the answer" block */
  .lead-answer {
    font-size: 17.5px; line-height: 1.6; font-weight: 500; color: var(--ink);
    background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--stroke); border-left: 3px solid var(--amber);
    border-radius: 0 16px 16px 0; padding: 16px 20px; margin: 0 0 8px; box-shadow: var(--lift-sm);
  }
  .lead-answer strong { font-weight: 800; color: #fff; }
  .prose .lead-answer { max-width: none; }

  /* ───────── accessibility: honor the three signals ───────── */
  @media (prefers-reduced-motion: reduce) {
    .stage .glow, .bubbles b, .reveal, .pane, .btn::after,
    .mug::after, .gz-track i { animation: none !important; }
    * { transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    header, .panel, .cta, .seo .card, .hb-modal, .hb-toast, .lead-answer, .recruit-banner {
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      background: #141922 !important;
    }
    .grid .panel:last-child { box-shadow: var(--lift); }
  }
  @media (prefers-contrast: more) {
    :root { --ink-soft: rgba(238,241,246,.86); --ink-faint: rgba(238,241,246,.6); --stroke: rgba(255,255,255,.3); }
  }