@font-face { font-family: 'Google Sans Flex'; font-weight: 300 800; font-display: swap; src: url(/fonts/GoogleSansFlex.woff2) format('woff2'); }
  .site { background: var(--paper); }
  :root { --ink: #201a16; --ink-2: #6d625a; --ink-3: #96897f; --paper: #fbfaf8; --line: #efe9e3; --hot: #e8461c; --hot-2: #c93a14; --ok: #1e8e3e;
          --gmail: 'Google Sans Flex', 'Google Sans', Roboto, Arial, sans-serif; --gstar: #0b57d0;
          --display: 'Gabarito'; --display-w: 800; --display-ls: -.03em; --display-fvs: normal; --display-k: 1; }
  * { box-sizing: border-box; }
  body { margin: 0; font: 16px/1.55 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); background: #e9e4de; }
  a { color: inherit; }
  button { font: inherit; }
  .disp { font-family: var(--display), sans-serif; font-weight: var(--display-w); letter-spacing: var(--display-ls); font-variation-settings: var(--display-fvs); }


  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
  nav.top { display: flex; align-items: center; gap: 28px; padding: 22px 0; font-size: 15px; }
  nav.top .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; text-decoration: none; margin-right: auto; }
  nav.top .brand img { width: 30px; height: 30px; }
  nav.top a:not(.brand) { text-decoration: none; opacity: .75; }
  nav.top a:not(.brand):hover { opacity: 1; }

  .hero { display: grid; grid-template-columns: 380px 1fr; grid-template-areas: 'copy demo' 'rcpt demo'; grid-template-rows: auto 1fr; gap: 0 56px; align-items: start; padding: 40px 0 96px; }
  .hero .copy { grid-area: copy; } .hero .demo { grid-area: demo; } .hero .rcpt { grid-area: rcpt; }
  .h { font-size: calc(48px * var(--display-k)); line-height: 1.04; margin: 8px 0 18px; text-wrap: balance; }
  .lede { color: var(--ink-2); margin: 0 0 26px; }
  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; border: 0; cursor: pointer;
         font-weight: 700; text-decoration: none; transition: transform .15s ease-out, background .15s ease-out; }
  .btn:hover { transform: translateY(-1px); }
  .btn.go { background: var(--hot); color: #fff; }
  .btn.go:hover { background: var(--hot-2); }
  .btn.quiet { background: transparent; color: var(--ink); padding-left: 8px; padding-right: 8px; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
  .fine { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
  .chrome-ico { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#ea4335 0 33%, #fbbc04 0 66%, #34a853 0); position: relative; flex: none; }
  .chrome-ico::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #4285f4; box-shadow: 0 0 0 2px #fff; }
  .cta.glow { animation: glow 1.1s ease-out 2; }
  @keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(232,70,28,.55); } 100% { box-shadow: 0 0 0 18px rgba(232,70,28,0); } }

  /* ---------------- the inbox: Gmail's font, stars and hover buttons ---------------- */
  .inbox { background: #fff; border: 1px solid #e6dfd7; border-radius: 12px; overflow: hidden; font: 14px/1.3 var(--gmail); color: #1f1f1f; }
  .bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); color: #444746; font-size: 14px; }
  .bar .dots { display: flex; gap: 6px; } .bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #e6dfd7; }
  .bar .q { flex: 1; display: flex; align-items: center; gap: 10px; background: #eaf1fb; border-radius: 24px; padding: 8px 14px; }
  .bar .q svg { width: 18px; height: 18px; fill: #444746; }
  .snd { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: transparent; padding: 6px 10px; font: 500 13px var(--gmail); cursor: pointer; color: #444746; white-space: nowrap; }
  .snd:hover { background: rgba(68,71,70,.08); }
  .snd svg { width: 18px; height: 18px; }
  .snd[aria-pressed=false] .w { display: none; }
  .snd[aria-pressed=false] .x { display: inline; } .snd .x { display: none; }
  .tabs { display: flex; align-items: stretch; height: 44px; border-bottom: 1px solid var(--line); padding-left: 8px; font-size: 14px; color: #444746; }
  .tabs > span { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 3px solid transparent; font-weight: 500; }
  .tabs > span.on { color: var(--ink); font-weight: 700; border-color: var(--hot); }
  .tabs .n { background: var(--hot); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; font-style: normal; transition: transform .2s ease-out; font-variant-numeric: tabular-nums; }
  .tabs .n.bump { transform: scale(1.25); }
  .tabs .chain { margin: 6px 8px 6px auto; display: none; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font: 700 12px 'Plus Jakarta Sans'; padding: 0 12px; cursor: pointer; }
  .tabs .chain.on { display: flex; animation: pop .35s ease-out; }
  .tabs .chain svg { width: 18px; height: 18px; }
  @keyframes pop { from { transform: scale(.6); opacity: 0; } }

  .body { position: relative; height: 420px; overflow: hidden; }   /* fixed: the inbox never shrinks, so nothing below it moves */
  .cleared .body { overflow-y: auto; }
  .mail { --rowbg: #f2f6fc; display: grid; grid-template-columns: 20px 20px 168px 1fr 64px; gap: 10px; align-items: center; height: 42px; padding: 0 10px 0 14px;
          border-bottom: 1px solid #eceff3; overflow: hidden; background: var(--rowbg); transition: height .28s ease-out; position: relative; }
  .mail.unread { --rowbg: #fff; }
  .mail:hover { z-index: 1; box-shadow: inset 1px 0 #dadce0, inset -1px 0 #dadce0, 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
  .mail .cb { width: 14px; height: 14px; border: 2px solid #747775; border-radius: 2px; }
  .mail .st { width: 20px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; color: #747775; }
  .mail .st svg { width: 20px; height: 20px; fill: currentColor; }
  .mail .st .on, .mail[data-star] .st .off { display: none; }
  .mail[data-star] .st .on { display: block; }
  .mail[data-star] .st { color: var(--gstar); }
  .mail .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mail .who small { color: #5e5e5e; font-size: 12px; margin-left: 4px; }
  .mail .what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #5e5e5e; }
  .mail .what b { color: #1f1f1f; font-weight: inherit; }
  .mail.unread .who, .mail.unread .what b { font-weight: 700; }
  .mail .date { justify-self: end; font-size: 12px; color: #5e5e5e; }
  .mail.unread .date { font-weight: 700; color: #1f1f1f; }
  .mail:hover .date, .mail:has(.bomb:is(.hint, .pick, .lit, .dud)) .date { visibility: hidden; }
  .mail .acts { position: absolute; right: 10px; top: 5px; display: flex; }
  .mail:hover .acts { background: var(--rowbg); box-shadow: -18px 0 12px -6px var(--rowbg); }
  .mail .ga { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: #444746; cursor: pointer; opacity: 0; pointer-events: none; }
  .mail:hover .ga { opacity: 1; pointer-events: auto; }
  .mail .ga:hover { background: rgba(68,71,70,.1); }
  .mail .ga svg { width: 20px; height: 20px; fill: currentColor; }
  .kept { display: inline-block; margin-left: 8px; background: #e6f4ea; color: var(--ok); border-radius: 999px; padding: 1px 8px; font: 700 11px var(--gmail); vertical-align: 1px; animation: pop .35s ease-out; }
  .mail.burn { animation: burn .32s ease-out forwards; }
  @keyframes burn { 0% { background: #ffd2bd; } 35% { background: #ffb08f; } 100% { background: #ffb08f; opacity: 0; transform: translateX(28px) skewX(-8deg); filter: blur(3px); } }
  .mail.dead { pointer-events: none; }  /* an empty slot: nothing moves under the cursor while playing */
  .mail.gone { height: 0; border-bottom-width: 0; }

  /* ---------------- the bomb: SVG, its spark flickers, it swells, then it's gone ---------------- */
  .bomb { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0;
          display: grid; place-items: center; transition: background .12s; }
  .mail .bomb { opacity: 0; }
  .mail:hover .bomb, .mail .bomb.hint, .mail .bomb.pick, .mail .bomb:focus-visible, .mail .bomb.lit, .mail .bomb.dud { opacity: 1; }
  .bomb:hover { background: #fde4da; }
  .bomb svg { width: 22px; height: 22px; overflow: visible; }
  .bomb .b-spark, .bomb .b-star { transform-box: fill-box; transform-origin: center; }
  .bomb .b-star { display: none; }
  :is(.mail, .tile)[data-star] .bomb .b-star { display: inline; }
  .bomb:hover .b-spark, .bomb.hint .b-spark, .bomb.pick .b-spark { animation: flick .3s steps(2) infinite alternate; }
  @keyframes flick { from { transform: scale(.85); fill: #ff8a3d; } to { transform: scale(1.25) rotate(25deg); fill: #ffd36b; } }
  .bomb.hint::before, .bomb.pick::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; animation: ping 1.6s ease-out infinite; }
  @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(232,70,28,.55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(232,70,28,0); } }
  :is(.mail, .tile, .gm) .bomb.lit { background: #ffd2bd; }
  :is(.mail, .tile, .gm) .bomb.lit svg { animation: swell .16s ease-in forwards; }
  :is(.mail, .tile, .gm) .bomb.lit .b-spark { animation: flick .05s steps(2) infinite alternate; }
  .bomb .b-shell { transition: fill .14s; }
  .bomb.lit .b-shell { fill: #6b2414; }
  @keyframes swell { 30% { transform: scale(1.15) rotate(-10deg); } 70% { transform: scale(1.22) rotate(10deg); } 100% { transform: scale(1.34); } }
  :is(.mail, .tile, .gm) .bomb.blown { background: transparent; }
  :is(.mail, .tile, .gm) .bomb.blown svg { opacity: 0; animation: none; }
  /* Starred: the fuse fizzles out and the bomb shakes its head */
  :is(.mail, .tile) .bomb.dud { background: #e8f0fe; }
  :is(.mail, .tile) .bomb.dud svg { animation: nope .62s ease-out; }
  :is(.mail, .tile) .bomb.dud .b-spark { animation: fizz .62s ease-out forwards; }
  :is(.mail, .tile) .bomb.dud .b-star { animation: starpop .5s ease-out .1s; }
  @keyframes nope { 15% { transform: rotate(-18deg); } 30% { transform: rotate(15deg); } 45% { transform: rotate(-11deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
  @keyframes fizz { 0% { transform: scale(1.7); fill: #ffd36b; } 35% { transform: scale(1.2); fill: #ff8a3d; } 100% { transform: scale(.3); fill: #9aa0a6; } }
  @keyframes starpop { 50% { transform: scale(1.6); } }

  /* The ending: fills the space the junk left behind */
  .clear { display: none; place-content: center; justify-items: center; text-align: center; padding: 24px; min-height: 300px; height: calc(100% - var(--kept, 1) * 42px); }
  .cleared .clear { display: grid; animation: clearin .4s ease-out; }
  @keyframes clearin { from { opacity: 0; transform: scale(.96); } }
  .clear .big { font-size: calc(42px * var(--display-k)); line-height: 1.05; margin: 14px 0 8px; }
  .clear p { margin: 0 0 22px; color: var(--ink-2); max-width: 380px; font: 15px/1.5 'Plus Jakarta Sans', sans-serif; }
  .clear .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; }
  .sun { width: 92px; height: 92px; }
  .cleared .sun { animation: rise .7s cubic-bezier(.2,.8,.2,1.2); }
  @keyframes rise { from { transform: translateY(30px) scale(.6); opacity: 0; } }

  /* ---------------- toasts: one per nuke, stacked like the extension's ---------------- */
  .slot { min-height: 56px; margin-top: 12px; position: relative; }
  .slot .hint-t { position: absolute; inset: 0 0 auto; height: 56px; pointer-events: none; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); transition: opacity .2s; }
  .slot .hint-t svg { width: 16px; height: 16px; }
  .slot.used .hint-t { opacity: 0; }
  .stack { display: flex; flex-direction: column; gap: 8px; }
  .t { display: flex; align-items: center; gap: 12px; background: #202124; color: #e8eaed; padding: 10px 10px 10px 14px; border-radius: 12px;
       font: 13px/1.3 var(--gmail); box-shadow: 0 6px 16px rgba(32,26,22,.25); overflow: hidden; }
  .t .tb { flex: 1; min-width: 0; }
  .t .top { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; color: #9aa0a6; }
  .t .sub:empty { display: none; }
  .t .count { display: inline-flex; align-items: center; gap: 5px; color: #e8eaed; }
  .t .count svg { width: 14px; height: 14px; color: #9aa0a6; }
  .t .count b { font-size: 15px; font-variant-numeric: tabular-nums; }
  .t .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap; }
  .t .badge svg { width: 12px; height: 12px; }
  .t .badge.green { background: rgba(52,168,83,.2); color: #81c995; animation: pop .3s ease-out; }
  .t .badge.blue { background: rgba(138,180,248,.18); color: #a8c7fa; }
  .t .badge.red { background: rgba(234,67,53,.2); color: #f28b82; }
  .t .badge.amber { background: rgba(251,188,5,.2); color: #fdd663; }
  .t .badge.grey { background: rgba(255,255,255,.1); color: #e8eaed; }
  .t .acts { display: flex; gap: 2px; flex-shrink: 0; }
  .t .acts button { background: none; border: 0; color: #8ab4f8; font: 600 13px var(--gmail); cursor: pointer; padding: 6px 10px; border-radius: 4px; }
  .t .acts button:hover { background: rgba(138,180,248,.14); }
  .ring { position: relative; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; margin: -5px -2px -5px -5px; }
  .ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
  .ring circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
  .ring .track { stroke: rgba(255,255,255,.12); }
  .ring .fill { stroke: #8ab4f8; transition: stroke-dashoffset .6s cubic-bezier(.3,.7,.3,1), stroke .2s; }
  .ring.done .fill { stroke: #81c995; }
  .ring .av { position: relative; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; font: 700 11px var(--gmail); }
  .lead { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; margin-left: -2px; }
  .lead svg { width: 18px; height: 18px; fill: currentColor; }
  .lead.star { background: rgba(138,180,248,.18); color: #a8c7fa; }
  .lead.g { background: rgba(255,255,255,.1); color: #e8eaed; }

  /* Floating numbers, the receipt */
  .float { position: fixed; z-index: 60; pointer-events: none; font-size: 26px; color: var(--hot); text-shadow: 0 2px 0 #fff, 0 0 12px #fff; transform: translate(-50%, -50%); white-space: nowrap; }
  canvas.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
  .boomlayer { position: fixed; inset: 0; pointer-events: none; z-index: 51; overflow: hidden; }
  .bp { position: absolute; display: grid; place-items: center; }
  .bp > svg { overflow: visible; display: block; }
  .puff { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd6cf, #b3aaa2); }
  .flash { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #fff3c4 45%, rgba(255,176,32,.6) 65%, rgba(255,176,32,0) 72%); }
  .streak { width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(#fff3c4, #ffb020 50%, rgba(255,90,31,0)); }
  .fire { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #fff3c4 0 20%, #ffb020 45%, #ff5a1f 75%, rgba(255,90,31,0) 78%); }
  .stem { width: 100%; height: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(#cfc7bf, #a9a097); }
  .base { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #ffb020; }

  .receipt { margin-top: 28px; font: 13px/1.75 'JetBrains Mono', monospace; background: #fff; padding: 20px 22px 18px; position: relative;
             box-shadow: 0 1px 2px rgba(60,30,10,.05), 0 8px 24px rgba(60,30,10,.07); }
  .receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
                    background: radial-gradient(circle at 5px 10px, transparent 4px, #fff 4.5px) 0 0 / 10px 10px repeat-x; }
  .receipt .hd { text-align: center; font-weight: 600; letter-spacing: .2em; }
  .receipt .sub { text-align: center; color: var(--ink-3); font-size: 11px; }
  .receipt hr { border: 0; border-top: 1px dashed #d8ccc1; margin: 10px 0; }
  .receipt .r { display: flex; gap: 8px; overflow: hidden; }
  .receipt .r span { white-space: nowrap; }
  .receipt .r i { flex: 1; border-bottom: 1px dotted #d8ccc1; transform: translateY(-6px); }
  .receipt .r b { font-weight: 600; }
  .receipt .r b.hot { color: var(--hot); } .receipt .r b.ok { color: var(--ok); }
  .receipt .empty { color: var(--ink-3); text-align: center; font-size: 12px; }
  .receipt .total { font-weight: 600; }
  .stamp { position: absolute; left: 50%; top: 52%; translate: -50% -50%; border: 3px solid var(--hot); color: var(--hot); border-radius: 6px; padding: 6px 14px;
           font-size: 26px; line-height: 1; transform: rotate(-10deg); opacity: 0; mix-blend-mode: multiply; pointer-events: none; white-space: nowrap; }

  /* ---------------- the bomb lab ---------------- */
  .lab { background: var(--paper); padding: 48px 0 80px; }
  .lab h3 { font-size: 26px; margin: 0 0 6px; }
  .lab .note { color: var(--ink-2); margin: 0 0 22px; max-width: 680px; }
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
  .tile { background: #fff; border: 1px solid #ece6df; border-radius: 12px; padding: 28px 18px 18px; text-align: center; }
  .tile .bomb { width: 88px; height: 88px; margin: 0 auto 18px; }
  .tile .bomb svg { width: 60px; height: 60px; }
  .tile b { display: block; font-size: 15px; }
  .tile span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
  .gm { background: #fff; border: 1px solid #e6dfd7; border-radius: 12px; overflow: hidden; font: 14px/1.3 var(--gmail); max-width: 880px; }
  .gm .mail { grid-template-columns: 20px 20px 190px 1fr 64px; height: 40px; }
  .ext { display: flex; flex-direction: column-reverse; gap: 8px; max-width: 440px; margin-top: 20px; }
  .ext .t { box-shadow: 0 6px 16px rgba(0,0,0,.3); }
  .busy { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(154,160,166,.3); border-top-color: #9aa0a6; animation: turn .8s linear infinite; }
  @keyframes turn { to { transform: rotate(360deg); } }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .popfoot { margin-top: 20px; background: #fff; border: 1px solid #e6dfd7; border-radius: 12px; padding: 12px 16px; font: 13px var(--gmail); display: flex; align-items: center; gap: 12px; color: #444746; max-width: 440px; }
  .popfoot .seg { display: inline-flex; border: 1px solid #dadce0; border-radius: 999px; overflow: hidden; }
  .popfoot .seg span { padding: 4px 10px; } .popfoot .seg .on { background: #d3e3fd; color: #041e49; font-weight: 600; }
  .popfoot .grow { flex: 1; }

  @media (max-width: 900px) {
    .wrap { padding: 0 16px; }
    nav.top a:not(.brand) { display: none; }
    .hero { grid-template-columns: 1fr; grid-template-areas: 'copy' 'demo' 'rcpt'; gap: 28px; padding-top: 16px; padding-bottom: 64px; }
    .receipt { margin-top: 0; }
    .h { font-size: calc(36px * var(--display-k)); }
    .mail, .gm .mail { grid-template-columns: 20px 92px 1fr 34px; padding: 0 6px 0 10px; }
    .mail .cb, .mail .what > span:not(.kept), .mail .date, .mail .ga { display: none; }
    .mail .acts { right: 6px; }
    .mail .bomb { opacity: 1; }
    .bar .dots, .snd span { display: none; }
    .clear .big { font-size: calc(32px * var(--display-k)); }
    .tiles { grid-template-columns: 1fr 1fr; }
    .cols { grid-template-columns: 1fr; }
  }
  @media (hover: none) { .mail .bomb { opacity: 1; } .mail .date { display: none; } }

  /* ================= full page ================= */
  html { scroll-behavior: smooth; }
  .mocknote { background: var(--ink); color: #f5f0eb; font-size: 13px; padding: 8px 24px; text-align: center; opacity: .92; }
  nav.top .navcta { margin-left: 4px; padding: 9px 14px; border-radius: 9px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; opacity: 1 !important; }
  nav.top .navcta:hover { background: #3a302a; }
  .get .m { display: none; }
  .fine .m { display: none; }
  @media (hover: none), (max-width: 900px) {
    .get .d, .fine .d { display: none; } .get .m, .fine .m { display: inline; }
    .get .chrome-ico { display: none; }
    nav.top .navcta { display: inline-flex !important; }
  }
  .band { padding: 112px 0; position: relative; }
  .band.white { background: #fff; }
  .band.paper { background: var(--paper); }
  .band.ink { background: var(--ink); color: #f5f0eb; }
  /* the popup's perforated edge, where a band meets the one above it */
  .band.white::before, .band.paper.cut::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
    background: radial-gradient(circle at 6px 6px, var(--edge, var(--paper)) 4.5px, transparent 5px) 0 0 / 12px 12px repeat-x; }
  .band.white { --edge: var(--paper); } .band.paper.cut { --edge: #fff; }
  .h2 { font-size: 42px; line-height: 1.06; margin: 0 0 16px; text-wrap: balance; }
  .sub { color: var(--ink-2); font-size: 17px; margin: 0; max-width: 560px; }
  .ink .sub { color: #c9bfb6; }
  .two { display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: start; }

  /* how it works */
  .steps { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: s; }
  .steps li { counter-increment: s; position: relative; padding: 0 0 22px 46px; color: var(--ink-2); }
  .steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--hot); color: #fff;
                      display: grid; place-items: center; font: 800 14px 'Gabarito'; }
  .steps b { color: var(--ink); }
  .gm .mail.force { box-shadow: inset 1px 0 #dadce0, inset -1px 0 #dadce0, 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); z-index: 1; }
  .gm .mail.force .ga, .gm .mail.force .bomb { opacity: 1; pointer-events: auto; }
  .gm .mail.force .acts { background: var(--rowbg); box-shadow: -18px 0 12px -6px var(--rowbg); }
  .gm .mail.force .date { visibility: hidden; }
  .gm .mail.force .bomb::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; animation: ping 1.6s ease-out infinite; }
  .gmcap { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-3); margin: 10px 2px 0; }
  .how .ext { margin-top: 28px; max-width: 460px; }

  /* what a click does: one long receipt */
  .receipt.long { margin: 0; padding: 26px 30px 24px; }
  .receipt.long .ri { padding: 12px 0; border-bottom: 1px dashed #e7ddd3; }
  .receipt.long .ri:last-of-type { border-bottom: 0; }
  .receipt.long .r { font-size: 14px; }
  .receipt.long .ri p { margin: 4px 0 0; font: 14px/1.55 'Plus Jakarta Sans', sans-serif; color: var(--ink-2); max-width: 520px; }
  .receipt.long .total { font-size: 15px; padding-top: 4px; }

  /* clean up: a window onto the Clean up page */
  .win { background: #fffdfb; border: 1px solid #e6dfd7; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,30,10,.05), 0 12px 32px rgba(60,30,10,.08); }
  .win .wbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
  .win .wbar .dots { display: flex; gap: 6px; } .win .wbar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #e6dfd7; }
  .win .wbar img { width: 18px; height: 18px; }
  .win .whead { padding: 22px 22px 14px; }
  .win .whead .big { font: 800 30px/1.1 'Gabarito'; letter-spacing: -.02em; }
  .win .whead .big em { font-style: normal; color: var(--hot); }
  .win .whead p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
  .cu { width: 100%; border-collapse: collapse; font-size: 13px; }
  .cu th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
  .cu td { padding: 9px 12px; border-bottom: 1px solid #f3eee9; vertical-align: middle; }
  .cu .who2 { display: flex; align-items: center; gap: 10px; }
  .cu .fav { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font: 700 11px 'Plus Jakarta Sans'; flex-shrink: 0; }
  .cu .nm { font-weight: 700; } .cu .ad { color: var(--ink-3); font-size: 12px; }
  .cu .cnt { display: flex; align-items: center; gap: 8px; } .cu .cnt b { min-width: 34px; text-align: right; }
  .cu .meter { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #ff8a3d, var(--hot)); opacity: .75; }
  .cu .no { color: #c5221f; font-weight: 700; }
  .cu .nk { border: 0; border-radius: 8px; background: #fff1ea; color: var(--hot); font: 700 12px 'Plus Jakarta Sans'; padding: 6px 12px; cursor: pointer; }
  .cu .nk:hover { background: #ffe1d3; }
  .cu tr.gone td { background: #fcfaf7; color: var(--ink-3); }
  .cu tr.gone .nm { text-decoration: line-through; }
  .cu tr.gone .ok { color: var(--ok); }
  .cu .col-o, .cu .col-u { white-space: nowrap; }

  /* privacy */
  .priv { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
  .priv .story { margin-top: 24px; color: #c9bfb6; font-size: 15px; max-width: 520px; }
  .priv .story a { color: #ffb08f; }
  .lists { display: grid; gap: 28px; }
  .lists h3 { font: 800 19px 'Gabarito'; margin: 0 0 10px; color: #fff; }
  .lists ul { margin: 0; padding: 0; list-style: none; }
  .lists li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px dashed #4a3f37; color: #e8e1da; font-size: 15px; }
  .lists li svg { position: absolute; left: 0; top: 11px; width: 18px; height: 18px; }
  .lists .see li svg { color: #9ccfa9; } .lists .out li svg { color: #ffb08f; }
  .ink a.more { display: inline-block; margin-top: 18px; color: #fff; font-weight: 700; text-underline-offset: 4px; }

  /* compare */
  .cmp { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 36px; }
  .cmp th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 13px; padding: 10px 14px; border-bottom: 1px solid #e3dbd2; vertical-align: bottom; }
  .cmp td { padding: 14px; border-bottom: 1px solid #ece5dd; }
  .cmp td:first-child { color: var(--ink); font-weight: 600; width: 34%; }
  .cmp .us { color: var(--ink); font-weight: 700; }
  .cmp th.us { color: var(--hot); font: 800 17px 'Gabarito'; }
  .cmp svg { width: 18px; height: 18px; vertical-align: -4px; }
  .cmp .y { color: var(--ok); } .cmp .n { color: #b3a79c; }
  .cmp td small { display: block; color: var(--ink-3); font-weight: 400; font-size: 12px; }

  /* pricing */
  .plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }
  .plan { border: 1px solid #e6dfd7; border-radius: 14px; padding: 28px; background: #fff; display: flex; flex-direction: column; }
  .plan.hot { background: var(--ink); color: #f5f0eb; border-color: var(--ink); }
  .plan h3 { margin: 0; font: 800 20px 'Gabarito'; }
  .plan .price { font: 800 44px/1 'Gabarito'; letter-spacing: -.03em; margin: 14px 0 4px; }
  .plan .price small { font: 600 15px 'Plus Jakarta Sans'; letter-spacing: 0; opacity: .7; }
  .plan .what { color: var(--ink-2); margin: 0 0 18px; } .plan.hot .what { color: #c9bfb6; }
  .plan ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
  .plan li { padding: 6px 0 6px 26px; position: relative; font-size: 15px; }
  .plan li svg { position: absolute; left: 0; top: 9px; width: 16px; height: 16px; color: var(--ok); }
  .plan.hot li svg { color: #9ccfa9; }
  .plan .btn { justify-content: center; }
  .plan.hot .btn.go { background: var(--hot); }
  .plan .btn.line { background: transparent; border: 1px solid #d9cfc5; color: var(--ink); }

  /* faq */
  .faq { margin-top: -18px; }
  .faq details { border-bottom: 1px solid #e6dfd7; }
  .faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 700 18px/1.3 'Gabarito'; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; margin-top: -17px; line-height: 34px; font: 400 26px 'Plus Jakarta Sans'; color: var(--hot); transition: transform .2s ease-out; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq p { margin: 0 0 22px; color: var(--ink-2); max-width: 680px; }

  /* last word */
  .last { text-align: center; }
  .last .bomb.huge { width: 140px; height: 140px; margin: 26px auto 22px; background: #fff1ea; }
  .last .bomb.huge:hover { background: #ffe1d3; }
  .last .bomb.huge svg { width: 88px; height: 88px; }
  .last .bomb.huge::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; animation: ping 2s ease-out infinite; }
  .last .tap { font-size: 13px; color: var(--ink-3); margin-bottom: 28px; }
  .last .sub { margin: 0 auto 26px; }
  .last .bomb.lit { background: #ffd2bd; } .last .bomb.lit svg { animation: swell .16s ease-in forwards; }
  .last .bomb.blown svg { opacity: 0; } .last .bomb.blown::before { display: none; }

  footer.site-foot { background: #17120f; color: #b5aaa0; font-size: 14px; padding: 40px 0 48px; }
  footer.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
  footer.site-foot .brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; text-decoration: none; margin-right: auto; }
  footer.site-foot .brand img { width: 24px; height: 24px; }
  footer.site-foot a { color: #e8e1da; text-decoration: none; } footer.site-foot a:hover { color: #fff; }
  footer.site-foot .legal { flex-basis: 100%; font-size: 12.5px; color: #8a7f76; margin-top: 10px; }

  @media (max-width: 900px) {
    .band { padding: 72px 0; }
    .h2 { font-size: 32px; }
    .two, .priv { grid-template-columns: 1fr; gap: 36px; }
    .plans { grid-template-columns: 1fr; }
    .cmp { font-size: 13px; } .cmp td, .cmp th { padding: 10px 6px; } .cmp td:first-child { width: auto; }
    .cu .col-l, .cu .col-u { display: none; }
    .cu td, .cu th { padding: 8px 6px; }
    .win .whead .big { font-size: 24px; }
    .gmcap { flex-direction: column; gap: 4px; }
    .receipt.long { padding: 22px 18px; }
    .receipt.long .r { font-size: 12.5px; }
  }

  /* ================= A+ additions ================= */
  body { position: relative; }
  .mail:is(.hov, .ghost) { z-index: 1; box-shadow: inset 1px 0 #dadce0, inset -1px 0 #dadce0, 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
  .mail:is(.hov, .ghost) .date { visibility: hidden; }
  .mail:is(.hov, .ghost) .acts { background: var(--rowbg); box-shadow: -18px 0 12px -6px var(--rowbg); }
  .mail:is(.hov, .ghost) .ga, .mail:is(.hov, .ghost) .bomb { opacity: 1; }
  .mail:is(.hov, .ghost) .bomb .b-spark { animation: flick .3s steps(2) infinite alternate; }
  .mail.hov .bomb.hot { background: rgba(60,64,67,.12); }

  /* the pointer the page uses to show things (hero hint and the how-it-works stage) */
  .cur { position: absolute; left: 0; top: 0; width: 22px; height: 26px; pointer-events: none; z-index: 30; transform: translate(-200px, -200px); }
  .cur svg { width: 22px; height: 26px; display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); transform-origin: 3px 3px; }
  .demo { position: relative; }
  .demo > .cur { opacity: 0; transition: opacity .3s; }
  .demo > .cur.on { opacity: 1; }

  /* hero headline: words rise out of a mask */
  .h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .h .w > span { display: inline-block; }

  /* ---------- how it works: a sticky Gmail stage that plays each step ---------- */
  .how2 .story { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; margin-top: 40px; }
  .beats { list-style: none; margin: 0; padding: 0; counter-reset: s; }
  .beat { counter-increment: s; min-height: 58vh; display: flex; flex-direction: column; justify-content: center; position: relative; padding-left: 52px; opacity: .32; transition: opacity .3s ease-out; }
  .beat.on { opacity: 1; }
  .beat::before { content: counter(s); position: absolute; left: 0; top: 50%; margin-top: -60px; width: 34px; height: 34px; border-radius: 50%; background: var(--line); color: var(--ink-2);
                  display: grid; place-items: center; font: 800 15px 'Gabarito'; transition: background .3s, color .3s, transform .3s; }
  .beat.on::before { background: var(--hot); color: #fff; transform: scale(1.1); }
  .beat h3 { font: 800 26px/1.15 'Gabarito'; letter-spacing: -.02em; margin: 0 0 8px; }
  .beat p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 330px; }
  .beat kbd, .cp kbd { font: 600 12px 'Plus Jakarta Sans'; border: 1px solid #d9cfc5; border-radius: 4px; padding: 0 5px; background: #fff; }
  .stagecol { position: relative; }
  .stage { position: sticky; top: calc(50vh - 250px); }
  .stage .sbody { position: relative; height: 380px; overflow: hidden; }
  .stage .mail { cursor: default; }
  .stage .bomb, .stage .ga { cursor: default; }
  .stage .scap { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-3); margin: 10px 2px 0; }
  .sdeck { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 5; }
  .sdeck .t { min-width: 320px; max-width: 440px; box-shadow: 0 6px 16px rgba(0,0,0,.45); animation: tin .14s ease-out; }
  @keyframes tin { from { opacity: 0; transform: translateY(6px); } }
  .t .of { color: #9aa0a6; font-size: 12px; }
  .ring.spin svg { animation: turn 1.1s linear infinite; }
  .ring.spin .fill { stroke-dashoffset: 70 !important; transition: none; }
  .t .badge { animation: pop .3s ease-out; }
  /* Gnuke's hover tooltip (content/tip.js) */
  .stip { position: absolute; z-index: 8; background: rgba(60,64,67,.9); color: #fff; border-radius: 4px; padding: 4px 8px; font: 12px/16px var(--gmail); letter-spacing: .2px; white-space: nowrap; pointer-events: none; transform: translateX(-50%); animation: tin .12s ease-out; }
  .stip i { opacity: .85; }
  .stip.wide { white-space: normal; width: 260px; }
  /* Gnuke's right-click menu (content/menu.js) */
  .smenu { position: absolute; z-index: 9; background: #fff; color: #1f1f1f; border-radius: 10px; padding: 6px 0; min-width: 260px; font: 13.5px var(--gmail);
           box-shadow: 0 2px 6px rgba(60,64,67,.25), 0 8px 24px rgba(60,64,67,.2); animation: tin .1s ease-out; }
  .smenu .mh { display: flex; align-items: center; gap: 8px; padding: 6px 14px 8px; font-size: 11.5px; color: #5f6368; border-bottom: 1px solid #eceff1; margin-bottom: 4px; }
  .smenu .fav { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; color: #fff; font: 700 9px var(--gmail); }
  .smenu .it { display: flex; align-items: center; gap: 12px; padding: 8px 14px; white-space: nowrap; }
  .smenu .it.on { background: #f1f3f4; }
  .smenu .em { width: 18px; display: grid; place-items: center; color: #5f6368; }
  .smenu .em svg { width: 18px; height: 18px; }
  .smenu .k { margin-left: auto; font-size: 11.5px; color: #5f6368; }
  .smenu .sep { height: 1px; background: #eceff1; margin: 4px 0; }
  /* "Ignored your unsubscribe" (inject.js) */
  .mail.wide { grid-template-columns: 20px 20px 330px 1fr 64px; }
  .itag { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 0 2px 0 7px; border-radius: 4px; font: 500 12px/18px var(--gmail); color: #d93025; background: rgba(234,67,53,.12); vertical-align: 1px; }
  .itag b { padding: 0 8px; border-radius: 999px; font-weight: 700; color: #fff; background: #d93025; }
  .itag b.hov { background: #b3261e; }
  .mail.arrive { animation: arrive .45s cubic-bezier(.2,.8,.2,1); }
  @keyframes arrive { from { height: 0; opacity: 0; } }

  /* ---------- the long receipt prints, then gets stamped ---------- */
  html.js .receipt.printing > :is(.ri, .r, hr, .hd, .sub) { opacity: 0; transform: translateY(-6px); }
  .receipt > .shown { opacity: 1 !important; transform: none !important; transition: opacity .2s ease-out, transform .25s ease-out; }
  .receipt.long .stamp { top: 46%; font-size: 34px; }

  /* ---------- clean up: the real Clean up page (scan.html), running a scan ---------- */
  .cp { --bg: #fffdfa; --sheet: #fff; --ink: #201a16; --ink-2: #6d625a; --ink-3: #96897f; --chip: #f6efe8; --tear: #f3ebe3; --rule: #eadfd5; --line: #f1e9e2;
        --hover: #fcf8f4; --sel: #fff7f2; --hot: #e8461c; --hot-soft: #fff1ea; --bar: #f2a27c; --ok: #1e8e3e; --no: #c5221f; --mid: #b06000;
        background: var(--bg); color: var(--ink); font: 13px/1.35 'Plus Jakarta Sans', sans-serif; border: 1px solid #e6dfd7; border-radius: 12px; overflow: hidden; position: relative;
        box-shadow: 0 1px 2px rgba(60,30,10,.05), 0 12px 32px rgba(60,30,10,.08); }
  .cp .chrome { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #f7f2ed; font-size: 12px; color: var(--ink-3); }
  .cp .chrome .dots { display: flex; gap: 6px; } .cp .chrome .dots i { width: 10px; height: 10px; border-radius: 50%; background: #e6dfd7; }
  .cp .chrome .url { flex: 1; background: #fff; border-radius: 999px; padding: 3px 12px; }
  .cp .cph { display: flex; align-items: center; gap: 8px; padding: 14px 22px 0; }
  .cp .cph img { width: 22px; height: 22px; } .cp .cph b { font-size: 15px; font-weight: 800; } .cp .cph span { color: var(--ink-3); }
  .cp .cph .acct { margin-left: auto; font-size: 12px; }
  .cp .hero2 { padding: 14px 22px 12px; }
  .cp .hl { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
  .cp .hl em { font-style: normal; color: var(--hot); font-variant-numeric: tabular-nums; }
  .cp .hs { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
  .cp .sbar { padding: 0 22px 12px; }
  .cp .trk { height: 6px; background: var(--tear); border-radius: 99px; overflow: hidden; }
  .cp .trk i { display: block; height: 100%; width: 0; background: var(--hot); border-radius: 99px; transition: width .4s; }
  .cp.done .trk i { background: var(--bar); }
  .cp .bt { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 12px; color: var(--ink-3); }
  .cp .bt .l { display: flex; align-items: center; gap: 6px; color: var(--ink-2); } .cp .bt b { color: var(--ink); }
  .cp .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tear); border-top-color: var(--hot); animation: turn .8s linear infinite; flex: none; }
  .cp.done .spin { display: none; }
  .cp .filt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 22px 12px; }
  .cp .fc { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); }
  .cp .fc.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .cp .fc.nw { display: inline-flex; align-items: center; gap: 5px; color: var(--hot); border-color: transparent; background: color-mix(in srgb, var(--hot) 10%, transparent); }
  .cp .fc.nw i { font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--hot); border-radius: 999px; padding: 0 6px; }
  .cp .fdiv { width: 1px; height: 18px; background: var(--rule); margin: 0 4px; }
  .cp .tear { height: 10px; background: radial-gradient(circle at 5px 0, transparent 4px, var(--tear) 4.5px) 0 0 / 10px 10px repeat-x; }
  .cp .sheet { background: var(--sheet); height: 372px; overflow: hidden; position: relative; }
  .cp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .cp col.c0 { width: 36px; } .cp col.c2 { width: 112px; } .cp col.c3 { width: 82px; } .cp col.c4 { width: 96px; } .cp col.c5 { width: 96px; } .cp col.c6 { width: 122px; }
  .cp .nm, .cp .ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp .snd2 > div { min-width: 0; }
  .two > :last-child { min-width: 0; }
  .cp th { text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .cp td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .cp tr.row:hover td { background: var(--hover); } .cp tr.sel td { background: var(--sel); }
  .cp tr.row.new { animation: arrive2 .35s ease-out; }
  @keyframes arrive2 { from { opacity: 0; transform: translateY(-6px); } }
  .cp input[type=checkbox] { accent-color: var(--hot); width: 15px; height: 15px; margin: 0; cursor: pointer; }
  .cp .snd2 { display: flex; align-items: center; gap: 9px; }
  .cp .fav { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; font: 700 10px 'Plus Jakarta Sans'; flex: none; }
  .cp .nm { font-weight: 700; } .cp .ad { font-size: 11px; color: var(--ink-3); }
  .cp .cnt { display: flex; align-items: center; gap: 8px; } .cp .cnt b { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
  .cp .track { width: 90px; } .cp .track i { display: block; height: 6px; background: var(--bar); border-radius: 0 3px 3px 0; min-width: 3px; }
  .cp .never { color: var(--no); font-weight: 600; }
  .cp .k-ok { color: var(--ok); } .cp .k-mid { color: var(--mid); }
  .cp .nk { font: 700 11.5px 'Plus Jakarta Sans'; color: var(--hot); background: var(--hot-soft); border: 0; border-radius: 7px; padding: 5px 11px; cursor: pointer; }
  .cp .nk:hover { background: #ffe1d3; }
  .cp .nk.undo { color: var(--ink); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
  .cp .ra { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
  .cp .kp { font: 700 11.5px 'Plus Jakarta Sans'; color: var(--ink-2); background: var(--chip); border: 0; border-radius: 7px; padding: 5px 11px; cursor: pointer; }
  .cp .kp:hover { color: var(--ink); }
  .cp tr.held td { background: var(--bg); } .cp tr.held .snd2 { opacity: .55; }
  .cp tr.held .ra .kp { display: none; }
  .cp .dock .kp2 { font: 700 12.5px 'Plus Jakarta Sans'; background: transparent; color: #fff; border: 1px solid #5a4d44; border-radius: 8px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
  .cp tr.gone td { background: var(--bg); } .cp tr.gone .snd2 { opacity: .55; } .cp tr.gone .nm { text-decoration: line-through; }
  .cp .stat { color: var(--ink-2); font-size: 12px; } .cp .stat b { color: var(--ink); }
  .cp .more { text-align: center; padding: 10px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .cp .dock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: #201a16; color: #fff; font-size: 12px;
              transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .cp .dock.on { transform: none; }
  .cp .dock span { flex: 1; color: #d9cfc6; }
  .cp .dock .go { font: 700 12.5px 'Plus Jakarta Sans'; background: var(--hot); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
  .cupnote { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-3); margin: 10px 2px 0; }

  /* ---------- privacy: the request log, printed ---------- */
  .receipt.log { margin-top: 28px; max-width: 470px; color: var(--ink); }
  .receipt.log .r b { font-weight: 600; }
  .receipt.log .r.total b { color: var(--ok); }

  /* ---------- the toolbar popup (popup.html), live ---------- */
  .tb2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: center; }
  .tb2 .sub + .sub { margin-top: 14px; }
  .tb2 .live { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff1ea; border-radius: 999px; padding: 6px 14px; }
  .tb2 .live svg { width: 16px; height: 16px; color: var(--hot); }
  .pop { --bg: #fffdfa; --sheet: #fff; --ink: #201a16; --ink-2: #6d625a; --ink-3: #96897f; --chip: #f6efe8; --tear: #f3ebe3; --rule: #eadfd5; --line: #f1e9e2; --hover: #fcf8f4;
         --hot: #e8461c; --btn: #201a16; --btn-ink: #fff; --ok: #1e8e3e; --no: #c5221f; --mid: #b06000; --gblue: #0b57d0;
         width: 360px; background: var(--bg); color: var(--ink); font: 13px/1.35 'Plus Jakarta Sans', sans-serif; border-radius: 10px; overflow: hidden; position: relative;
         box-shadow: 0 2px 6px rgba(60,30,10,.12), 0 18px 48px rgba(60,30,10,.18); transition: background .2s, color .2s; }
  .pop[data-theme=dark] { --bg: #1c1917; --sheet: #242120; --ink: #f5f0eb; --ink-2: #b8ada4; --ink-3: #8f847b; --chip: #2f2a27; --tear: #2f2a27; --rule: #3a3431; --line: #2f2a27;
         --hover: #2b2725; --hot: #ff7a3d; --btn: #f5f0eb; --btn-ink: #201a16; --ok: #81c995; --no: #f28b82; --mid: #fdd663; --gblue: #a8c7fa; }
  .popwrap { position: relative; justify-self: center; }
  .popwrap .tbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; height: 38px; padding: 0 10px; background: #e9e4de; border-radius: 10px 10px 0 0; width: 360px; color: #6d625a; }
  .popwrap .tbar .pin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2px var(--hot); }
  .popwrap .tbar img { width: 18px; height: 18px; }
  .popwrap .tbar svg { width: 16px; height: 16px; }
  .popwrap .pop { margin-top: 6px; }
  .popwrap .pop::before { content: ''; position: absolute; }
  .pop .ph { padding: 16px 18px 12px; }
  .pop .br { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
  .pop .br img { width: 22px; height: 22px; } .pop .br .acct { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-3); }
  .pop .big { margin-top: 12px; }
  .pop .big b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .pop .big em { font-style: normal; color: var(--hot); }
  .pop .big div { font-size: 13px; color: var(--ink-2); font-weight: 500; }
  .pop .row2 { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
  .pop .chip { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--chip); color: var(--ink-2); }
  .pop .clean { margin-left: auto; font: 700 11px 'Plus Jakarta Sans'; background: var(--btn); color: var(--btn-ink); border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
  .pop .tear { height: 10px; background: radial-gradient(circle at 5px 0, transparent 4px, var(--tear) 4.5px) 0 0 / 10px 10px repeat-x; }
  .pop .still { background: var(--sheet); border-bottom: 1px dashed var(--rule); padding: 8px 0 6px; }
  .pop .still h4 { margin: 0; padding: 2px 18px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--no); }
  .pop ul { list-style: none; margin: 0; padding: 0; }
  .pop li { display: flex; align-items: center; gap: 11px; padding: 8px 18px; }
  .pop li:hover { background: var(--hover); }
  .pop li.fresh { animation: fresh 1.2s ease-out; }
  @keyframes fresh { 0% { background: #ffe1d3; } 100% { background: transparent; } }
  .pop .fv { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; font: 700 10px 'Plus Jakarta Sans'; flex: none; }
  .pop .who { flex: 1; min-width: 0; }
  .pop .a { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pop .m { font-size: 10.5px; color: var(--ink-3); }
  .pop .m .ok { color: var(--ok); } .pop .m .no { color: var(--no); font-weight: 700; }
  .pop .n { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .pop .act { width: 86px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
  .pop .undo { width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 7px; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
  .pop .undo svg { width: 15px; height: 15px; }
  .pop .blk { font: 700 11px 'Plus Jakarta Sans'; background: var(--btn); color: var(--btn-ink); border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
  .pop .blkd { font-size: 11px; color: var(--ink-3); font-weight: 600; }
  .pop .unblk { font: 700 11px 'Plus Jakarta Sans'; color: var(--ink-2); background: transparent; border: 1px solid var(--rule); border-radius: 7px; padding: 4px 8px; cursor: pointer; }
  .pop .unblk:hover { color: var(--ink); border-color: var(--ink-3); }
  .pop .act { width: 92px; }
  .pop .hist { background: var(--sheet); max-height: 214px; overflow-y: auto; }
  .pop .keep { border-top: 1px dashed var(--rule); padding: 9px 18px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; background: var(--bg); }
  .pop .keep svg { width: 15px; height: 15px; flex: none; }
  .pop .keep .t2 { flex: 1; } .pop .keep .ch { color: var(--hot); font-weight: 700; }
  .pop .fresh { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 11.5px; color: var(--ink-2); background: var(--sheet); border-bottom: 1px dashed var(--rule); }
  .pop .fresh .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 18%, transparent); }
  .pop .fresh .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pop .fresh b { color: var(--hot); } .pop .fresh .go { color: var(--hot); font-weight: 700; white-space: nowrap; }
  .pop .chk { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px dashed var(--rule); background: var(--sheet); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
  .pop .chk .tx { flex: 1; min-width: 0; } .pop .chk small { display: block; font-weight: 500; font-size: 10px; color: var(--ink-3); }
  .pop .chk .pro { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; background: var(--ink); color: var(--bg); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
  .pop .chk .nseg { display: flex; gap: 4px; }
  .pop .chk .nseg button { font: inherit; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink-2); }
  .pop .chk .nseg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .pop footer { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 10.5px; background: var(--sheet); border-top: 1px dashed var(--rule); }
  .pop .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
  .pop .seg button { font: 700 11px 'Plus Jakarta Sans'; padding: 3px 8px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
  .pop .seg button + button { border-left: 1px solid var(--rule); }
  .pop .seg button svg { width: 12px; height: 12px; }
  .pop .seg button[aria-pressed=true] { background: var(--ink); color: var(--bg); }
  .pop .seg + .seg { margin-left: -2px; margin-right: auto; }
  .pop .sy { color: var(--ink-3); } .pop .sy button { font: 700 10.5px 'Plus Jakarta Sans'; color: var(--hot); background: none; border: 0; padding: 0; cursor: pointer; }

  /* compare: checks draw in */
  .cmp.draw svg path { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .cmp.draw.go svg path { transition: stroke-dashoffset .45s ease-out; stroke-dashoffset: 0; }

  /* the fuse: burns down the margin as you scroll and sets off the last bomb */
  .fuse { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; overflow: visible; }
  .fuse path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .fuse .rope { stroke: #c9ad85; stroke-width: 5; }
  .fuse .rope2 { stroke: #a88a5f; stroke-width: 5; stroke-dasharray: 2 5; }
  .fuse .ash { stroke: #9a8f86; stroke-width: 2.5; stroke-dasharray: 2 6; }
  .fuse .spark path { fill: #ffd36b; transform: scale(1.8); }
  .fuse .spark .glow { fill: #ff8a3d; opacity: .45; }
  .fuse .spark { transform: var(--at); animation: sflick .12s steps(2) infinite alternate; }
  @keyframes sflick { from { transform: var(--at) scale(.8); } to { transform: var(--at) scale(1.3) rotate(30deg); } }
  .fuse.done .spark, .fuse.cold .spark { display: none; }
  @media (prefers-reduced-motion: reduce) { .fuse .spark { animation: none; } }

  @media (max-width: 1100px) { .how2 .story { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; } .tb2 { gap: 40px; } }
  @media (max-width: 900px) {
    .how2 .story { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
    .stagecol { order: -1; position: sticky; top: 0; z-index: 6; background: #fff; padding: 8px 0 6px; }
    .stage { position: static; }
    .stage .sbody { height: 300px; }
    .stage .scap { display: none; }
    .beat { min-height: 70vh; justify-content: flex-start; padding-top: 32px; background: transparent; }
    .beat::before { top: 32px; margin-top: 0; }
    .sdeck { left: 8px; right: 8px; } .sdeck .t { min-width: 0; }
    .mail.wide { grid-template-columns: 20px 1fr 34px; }
    .mail.wide .who { white-space: normal; }
    .cp .col-l, .cp .col-u, .cp .fc.x, .cp .fc.ev, .cp .fdiv { display: none; }
    .cp .track { width: 40px; }
    .cp col.c2 { width: 92px; } .cp col.c4 { width: 70px; } .cp col.c3, .cp col.c5 { width: 0; }
    .cp .hl { font-size: 24px; }
    .cp .dock span { display: none; }
    .tb2 { grid-template-columns: 1fr; gap: 36px; }
    .popwrap, .popwrap .tbar, .pop { width: 100%; max-width: 360px; }
    .fuse { display: none; }
  }
  /* ================= v3 ================= */
  /* toasts: the page's section .sub was leaking its 17px into the toast's .sub */
  .t .sub { font-size: 13px; max-width: none; margin: 3px 0 0; }
  html.lenis, html.lenis body { height: auto; }
  html.lenis { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }

  /* mock note: hero picker */
  .mocknote { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
  .hsw { display: inline-flex; gap: 4px; align-items: center; }
  .hsw span { opacity: .75; margin-right: 4px; }
  .hsw button { font: 600 12px 'Plus Jakarta Sans'; color: #f5f0eb; background: transparent; border: 1px solid #5a4d44; border-radius: 999px; padding: 3px 11px; cursor: pointer; }
  .hsw button[aria-pressed=true] { background: #f5f0eb; color: var(--ink); border-color: #f5f0eb; }

  /* ---------------- hero ideas ---------------- */
  .v2 { position: relative; overflow: clip; }
  .v2 > .wrap { position: relative; z-index: 1; }
  .hdeco { position: absolute; inset: 0; pointer-events: none; z-index: 0; display: none; }
  .bframe, .meter, .tally2, .trust { display: none; }
  .hero .receipt .lines { max-height: 150px; overflow: hidden; }
  @media (min-width: 901px) {
    body:is([data-hero="2"], [data-hero="3"], [data-hero="4"]) .v2 .rcpt { position: absolute; left: -9999px; top: 0; width: 300px; }
    body:is([data-hero="1"], [data-hero="2"], [data-hero="4"]) .trust { display: flex; }

    /* 1: spotlight stage, mail drifting up behind, the receipt peeking out from behind the inbox */
    [data-hero="1"] .v2 { background: radial-gradient(ellipse 70% 60% at 50% 38%, #fff 0, #fff 30%, var(--paper) 75%); }
    [data-hero="1"] .hd1 { display: block; }
    [data-hero="1"] .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'demo'; grid-template-rows: auto; justify-items: center; text-align: center; padding: 28px 0 80px; }
    [data-hero="1"] .copy { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
    [data-hero="1"] .h { font-size: 64px; }
    [data-hero="1"] .lede { max-width: 600px; }
    [data-hero="1"] .demo { width: min(840px, 100%); margin-top: 36px; position: relative; z-index: 2; }
    [data-hero="1"] .rcpt { grid-area: demo; justify-self: center; align-self: start; width: 220px; margin-top: 96px; position: relative; z-index: 1;
                            transform: translateX(min(514px, calc(50vw - 126px))) rotate(4deg); }
    [data-hero="1"] .rcpt .receipt { margin-top: 0; padding: 18px 16px 14px; font-size: 12px; }

    /* 2: inside a browser window, with Gnuke in the toolbar */
    [data-hero="2"] .hero { grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: 'copy demo'; grid-template-rows: auto; align-items: center; padding-bottom: 72px; }
    [data-hero="2"] .bframe { display: block; }
    [data-hero="2"] .v2 .inbox { border-radius: 0 0 12px 12px; border: 8px solid #dfe3e8; border-top: 0; }
    [data-hero="2"] .tally2 { display: grid; }
    [data-hero="2"] .hd2 { display: block; }

    /* 3: the giant counter */
    [data-hero="3"] .hero { grid-template-columns: 330px minmax(0, 1fr); grid-template-areas: 'copy copy' 'meter demo'; grid-template-rows: auto auto; gap: 28px 48px; padding-bottom: 72px; }
    [data-hero="3"] .copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
    [data-hero="3"] .copy .h { grid-column: 1 / -1; font-size: 60px; }
    [data-hero="3"] .copy .lede { margin: 0; max-width: 560px; }
    [data-hero="3"] .copy .cta { grid-column: 2; grid-row: 2; }
    [data-hero="3"] .copy .fine { grid-column: 2; grid-row: 3; text-align: right; }
    [data-hero="3"] .meter { display: flex; }
    [data-hero="3"] .hd3 { display: block; }

    /* 4: buried in mail; every nuke digs some out */
    [data-hero="4"] .hd4 { display: block; }
    [data-hero="4"] .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'demo'; grid-template-rows: auto; justify-items: center; text-align: center; padding: 28px 0 80px; }
    [data-hero="4"] .copy { max-width: 760px; display: flex; flex-direction: column; align-items: center; background: color-mix(in srgb, var(--paper) 88%, transparent); border-radius: 24px; padding: 18px 36px 22px; box-shadow: 0 0 60px 30px color-mix(in srgb, var(--paper) 88%, transparent); }
    [data-hero="4"] .h { font-size: 64px; }
    [data-hero="4"] .demo { width: min(860px, 100%); margin-top: 36px; }
  }
  body:is([data-hero="1"], [data-hero="4"]) .v2 :is(.demo, .rcpt) { text-align: left; }
  .trust { list-style: none; margin: 18px 0 0; padding: 0; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
  .trust li { display: inline-flex; align-items: center; gap: 6px; }
  .trust svg { width: 15px; height: 15px; color: var(--ok); }
  [data-hero="1"] .trust, [data-hero="4"] .trust { justify-content: center; }

  /* 1: envelopes drifting up */
  .hd1 .env { position: absolute; bottom: -60px; color: var(--ink); opacity: .07; animation: env-rise var(--d) linear infinite; animation-delay: var(--delay); }
  .hd1 .env svg { display: block; width: var(--s); height: var(--s); transform: rotate(var(--r)); }
  @keyframes env-rise { to { transform: translateY(calc(-1 * var(--h, 1100px))); } }
  @media (prefers-reduced-motion: reduce) { .hd1 .env { animation: none; bottom: auto; top: var(--y); } }

  /* 2: the browser chrome */
  .bframe { background: #dfe3e8; border-radius: 12px 12px 0 0; padding: 8px 8px 0; font: 12px var(--gmail); color: #3c4043; }
  .btabs { display: flex; align-items: flex-end; gap: 6px; padding: 0 6px; }
  .btab { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px 10px 0 0; padding: 8px 12px; width: 300px; }
  .btab .fi { width: 16px; height: 16px; color: #d93025; flex: none; }
  .btab .bt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btab i { font-style: normal; color: #5f6368; }
  .bplus { padding: 0 8px 8px; color: #5f6368; font-size: 16px; }
  .bbar { display: flex; align-items: center; gap: 10px; background: #fff; padding: 6px 10px; }
  .bbar .nv { display: flex; gap: 10px; color: #5f6368; } .bbar .nv svg { width: 16px; height: 16px; }
  .bbar .url { flex: 1; background: #f1f3f4; border-radius: 999px; padding: 6px 14px; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bbar .url b { font-weight: 400; color: #202124; }
  .bbar .gx { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff1ea; }
  .bbar .gx img { width: 18px; height: 18px; }
  .bbar .bdg { position: absolute; right: -4px; bottom: -3px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--hot); color: #fff; font: 700 10px/16px var(--gmail); text-align: center; padding: 0 4px; }
  .bbar .bdg.bump { animation: pop .35s ease-out; }
  .tally2 { margin-top: 26px; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .tally2 div { background: #fff; padding: 12px 14px; }
  .tally2 b { display: block; font: 800 28px/1 'Gabarito'; letter-spacing: -.02em; color: var(--hot); font-variant-numeric: tabular-nums; }
  .tally2 span { font-size: 12.5px; color: var(--ink-2); }
  .hd2 .glow { position: absolute; right: -10%; top: 10%; width: 60%; height: 80%; background: radial-gradient(closest-side, rgba(232,70,28,.10), transparent); }

  /* 3: the meter and the subject-line stream */
  .meter { grid-area: meter; flex-direction: column; background: #fff; border: 1px solid #e6dfd7; border-radius: 12px; padding: 22px 22px 18px; height: 100%; min-height: 515px; position: relative; overflow: hidden; }
  .meter .mk { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .meter .mn { font-size: 104px; line-height: .95; color: var(--hot); letter-spacing: -.04em; margin: 8px 0 12px; font-variant-numeric: tabular-nums; transition: color .3s; }
  .meter.low .mn { color: var(--ok); }
  .meter .mbar { height: 10px; border-radius: 99px; background: #f3ebe3; overflow: hidden; }
  .meter .mbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff8a3d, var(--hot)); border-radius: 99px; transition: width .6s cubic-bezier(.3,.7,.3,1); }
  .meter .ml { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin: 6px 0 14px; }
  .meter .mchips { display: flex; flex-direction: column; gap: 6px; }
  .meter .mchip { display: flex; justify-content: space-between; font: 13px/1 'JetBrains Mono', monospace; padding: 7px 10px; background: #fff7f2; border-radius: 8px; animation: chipin .3s ease-out; }
  .meter .mchip b { color: var(--hot); }
  @keyframes chipin { from { opacity: 0; transform: translateX(-10px); } }
  .meter .mempty { font-size: 13px; color: var(--ink-3); }
  .hd3 .row { position: absolute; left: 0; white-space: nowrap; font: 800 52px/1 'Gabarito'; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(32,26,22,.09); animation: drift var(--d) linear infinite; opacity: var(--left, 1); transition: opacity .6s; }
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .hd3 .row { animation: none; } }

  /* 4: the wall of mail */
  .hd4 .wall { position: absolute; inset: -12% -8%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 28px; transform: rotate(-5deg); align-content: start; }
  .hd4 .wr { font: 14px/26px var(--gmail); color: #201a16; opacity: .16; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .5s; }
  .hd4 .wr b { font-weight: 700; margin-right: 8px; }
  .hd4 .wr.burnt { animation: wburn .6s ease-out forwards; }
  @keyframes wburn { 0% { color: #e8461c; opacity: .6; } 100% { opacity: 0; transform: translateX(20px); filter: blur(2px); } }

  /* ---------------- privacy: where your email goes ---------------- */
  .priv3 { overflow: hidden; }
  .priv3 .pbg { position: absolute; inset: 0; pointer-events: none; }
  .priv3 .pbg .lockbig { position: absolute; right: -60px; top: -40px; width: 520px; height: 520px; color: #fff; opacity: .045; transform: rotate(-12deg); }
  .priv3 .pbg .env { position: absolute; color: #fff; opacity: .05; }
  .priv3 .wrap { position: relative; }
  .phead { max-width: 760px; }
  .phead .sub { max-width: 680px; }
  .flow { position: relative; aspect-ratio: 1100 / 340; margin: 48px 0 56px; }
  .flow svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .flow .ln { fill: none; stroke: #6b5d53; stroke-width: 2; }
  .flow .ln.go { stroke: #ffb08f; stroke-dasharray: 6 8; animation: dash 1.2s linear infinite; }
  .flow .ln.no { stroke: #5a4d44; stroke-dasharray: 3 7; }
  @keyframes dash { to { stroke-dashoffset: -28; } }
  .flow .pk { fill: #ffb08f; }
  .flow .nd { position: absolute; border-radius: 16px; padding: 14px 18px; display: flex; gap: 14px; align-items: center; }
  .flow .nd .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
  .flow .nd .ic svg { width: 26px; height: 26px; }
  .flow .nd b { display: block; font: 800 19px/1.15 'Gabarito'; color: #fff; }
  .flow .nd span { font-size: 13px; color: #c9bfb6; }
  .flow .nd.me { left: 3.6%; top: 30%; width: 26%; height: 40%; background: #2c2420; border: 1px solid #4a3f37; }
  .flow .nd.me .ic { background: var(--hot); color: #fff; }
  .flow .nd.me .shield { position: absolute; inset: -10px; border-radius: 22px; border: 2px solid rgba(255,176,143,.35); animation: shield 2.6s ease-out infinite; }
  @keyframes shield { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
  .flow .nd.gm { right: 3.6%; top: 30%; width: 26%; height: 40%; background: #2c2420; border: 1px solid #4a3f37; }
  .flow .nd.gm .ic { background: #fff; color: #d93025; }
  .flow .nd.un { left: 37.3%; top: 0; width: 25.4%; height: 22%; background: #2c2420; border: 1px solid #4a3f37; padding: 10px 14px; }
  .flow .nd.un .ic { width: 34px; height: 34px; background: #3a302a; color: #ffb08f; } .flow .nd.un .ic svg { width: 18px; height: 18px; }
  .flow .nd.un b { font-size: 15px; }
  .flow .nd.gk { left: 37.3%; bottom: 0; width: 25.4%; height: 22%; border: 2px dashed #5a4d44; padding: 10px 14px; }
  .flow .nd.gk .ic { width: 34px; height: 34px; background: transparent; color: #8a7d73; border: 1px dashed #5a4d44; } .flow .nd.gk .ic svg { width: 18px; height: 18px; }
  .flow .nd.gk b { font-size: 15px; color: #a89d94; text-decoration: line-through; text-decoration-color: #ff7a59; }
  .flow .nd.gk em { font-style: normal; margin-left: auto; font: 800 26px 'Gabarito'; color: #9ccfa9; }
  .flow .lab { position: absolute; font: 600 12px 'Plus Jakarta Sans'; color: #c9bfb6; background: var(--ink); padding: 2px 8px; border-radius: 99px; white-space: nowrap; transform: translate(-50%, -50%); }
  .flow .lab.no { color: #8a7d73; }
  @media (prefers-reduced-motion: reduce) { .flow .pk { display: none; } .flow .ln.go { animation: none; } .flow .nd.me .shield { animation: none; opacity: .5; } }
  .sec6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #3a302a; border: 1px solid #3a302a; border-radius: 16px; overflow: hidden; }
  .sec6 li { background: var(--ink); padding: 22px 22px 24px; }
  .sec6 .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #2c2420; color: #ffb08f; margin-bottom: 12px; }
  .sec6 .ic svg { width: 20px; height: 20px; }
  .sec6 b { display: block; font: 800 18px/1.2 'Gabarito'; color: #fff; margin-bottom: 4px; }
  .sec6 span { font-size: 14px; color: #c9bfb6; }
  .pstory { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: center; margin-top: 56px; }
  .pstory .story { color: #c9bfb6; font-size: 15px; margin: 0; }
  .pstory .story b { color: #fff; font-weight: 700; }
  .pstory .receipt.log { margin-top: 0; max-width: none; }

  /* ---------------- compare: the click race + the scorecard ---------------- */
  .race { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin: 40px 0 56px; }
  .lane { background: #fff; border: 1px solid #e6dfd7; border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; min-height: 400px; }
  .lane .lh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
  .lane .lh b { font: 800 20px 'Gabarito'; white-space: nowrap; }
  .lane .clk { font: 600 14px 'Plus Jakarta Sans'; color: var(--ink-2); white-space: nowrap; }
  .lane .clk b { font: 800 34px/1 'Gabarito'; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
  .lane.gm .clk b { color: #c5221f; }
  .lane.gn { background: var(--ink); color: #f5f0eb; border-color: var(--ink); }
  .lane.gn .clk { color: #c9bfb6; } .lane.gn .clk b { color: #ffb08f; }
  .steps2 { list-style: none; margin: 0; padding: 0; counter-reset: k; display: flex; flex-direction: column; gap: 6px; }
  .steps2 li { counter-increment: k; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); padding: 7px 10px; border-radius: 8px; background: #faf6f2; opacity: .25; transition: opacity .25s, background .25s; }
  .steps2 li::before { content: counter(k); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #ece5dd; font: 700 11px 'Plus Jakarta Sans'; color: var(--ink-2); flex: none; }
  .steps2 li.on { opacity: 1; }
  .steps2 li.now { background: #fff1ea; color: var(--ink); }
  .steps2 li.now::before { background: var(--hot); color: #fff; }
  .steps2 kbd { font: 600 12px 'JetBrains Mono', monospace; background: #f1ebe4; border-radius: 4px; padding: 1px 5px; }
  .lane .lfoot { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--ink-2); }
  .lane.gm .lfoot b { color: #c5221f; }

  /* the spark: the outer group follows the fuse, the flame inside flickers on its own clock */
  .fuse .spark { transform: var(--at); animation: none !important; }
  .fuse .flame, .fuse .flame > * { transform-box: fill-box; transform-origin: center; } /* SVG transforms pivot on the canvas corner otherwise */
  .fuse .flame { animation: flame-burn .45s steps(5) infinite; }
  .fuse .flame .glow { fill: #ff8a3d; animation: glowp .23s ease-in-out infinite alternate; }
  .fuse .flame .core { fill: #fff3c4; }
  .fuse .flame .star { fill: #ffd36b; transform: scale(1.8); animation: starf .17s steps(2) infinite alternate; }
  .fuse .flame .star2 { fill: #ff5a1f; transform: rotate(45deg) scale(1.15); opacity: .85; animation: starf2 .21s steps(2) infinite alternate; }
  @keyframes flame-burn { 0% { transform: rotate(0) scale(1); } 20% { transform: rotate(18deg) scale(1.15); } 40% { transform: rotate(-12deg) scale(.9); } 60% { transform: rotate(28deg) scale(1.22); } 80% { transform: rotate(-20deg) scale(.95); } 100% { transform: rotate(8deg) scale(1.08); } }
  @keyframes glowp { from { opacity: .28; transform: scale(.8); } to { opacity: .55; transform: scale(1.25); } }
  @keyframes starf { from { transform: scale(1.5); fill: #ffd36b; } to { transform: scale(2.1) rotate(20deg); fill: #fff3c4; } }
  @keyframes starf2 { from { transform: rotate(45deg) scale(1); } to { transform: rotate(70deg) scale(1.35); } }

  /* the race's Gmail, clicked through at human speed */
  .mini { position: relative; height: 300px; border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden; background: #fff; font: 13px/1.3 var(--gmail); color: #1f1f1f; }
  .mbar { padding: 8px 10px; border-bottom: 1px solid #f1f1f1; }
  .msrch { display: flex; align-items: center; gap: 8px; background: #eaf1fb; border-radius: 20px; padding: 7px 12px; color: #444746; }
  .msrch.focus { background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3); }
  .msrch svg { width: 16px; height: 16px; fill: #444746; flex: none; }
  .mq { white-space: nowrap; overflow: hidden; } .mq .mph { color: #5f6368; }
  .mq .caret { display: inline-block; width: 1px; height: 14px; background: #1f1f1f; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .mtool { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 12px; border-bottom: 1px solid #f1f1f1; }
  .mcb, .mcb2 { width: 13px; height: 13px; border: 2px solid #747775; border-radius: 2px; flex: none; position: relative; }
  .mini .ck .mcb2, .mcb.ck { background: #0b57d0; border-color: #0b57d0; }
  .mini .ck .mcb2::after, .mcb.ck::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .mtr { display: none; } .mtr svg { width: 18px; height: 18px; fill: #444746; }
  .mini.sel .mtr { display: block; }
  .mcount { margin-left: auto; font-size: 12px; color: #5f6368; }
  .mbanner { display: none; padding: 7px 12px; background: #f2f6fc; font-size: 12px; text-align: center; border-bottom: 1px solid #e3e3e3; }
  .mbanner.on { display: block; }
  .mbanner b { color: #0b57d0; font-weight: 500; text-decoration: underline; }
  .mr { display: grid; grid-template-columns: 13px 96px minmax(0, 1fr) 54px; gap: 10px; align-items: center; height: 34px; padding: 0 12px; border-bottom: 1px solid #f1f1f1; background: #f2f6fc; transition: opacity .3s, height .3s; }
  .mr.u { background: #fff; } .mr.u b, .mr.u .ms { font-weight: 700; } .mr b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mr .ms { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr .md { font-size: 11px; color: #5f6368; text-align: right; }
  .mr.ck { background: #c2dbff; } .mr.hov { box-shadow: inset 0 0 0 1px #dadce0, 0 1px 3px rgba(60,64,67,.25); position: relative; z-index: 1; }
  .mr.gone { opacity: 0; height: 0; border-width: 0; }
  .mempty { padding: 28px 12px; text-align: center; color: #5f6368; }
  .mview { display: none; padding: 14px 16px; } .mini.view .mview { display: block; } .mini.view .mlist, .mini.view .mtool { display: none; }
  .mview .vs { font-size: 17px; margin-bottom: 12px; }
  .mview .vf { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; min-width: 0; }
  .mview .av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #d93025; color: #fff; display: grid; place-items: center; font-weight: 700; }
  .mview .ve { color: #5f6368; font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mview .vu { margin-left: 6px; color: #444746; text-decoration: underline; font-size: 12px; }
  .mview .vb { margin-top: 16px; display: grid; gap: 8px; } .mview .vb i { display: block; height: 9px; border-radius: 4px; background: #eef0f2; }
  .mdlg { position: absolute; inset: 0; background: rgba(32,33,36,.35); display: none; place-items: center; z-index: 3; }
  .mdlg.on { display: grid; animation: tin .15s ease-out; }
  .dbox { background: #fff; border-radius: 12px; width: 82%; padding: 18px 20px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
  .dbox .dt { font-size: 16px; font-weight: 500; } .dbox .dp { margin: 8px 0 14px; color: #444746; font-size: 13px; }
  .dbt { display: flex; justify-content: flex-end; gap: 6px; } .dbt span { padding: 7px 14px; border-radius: 18px; color: #0b57d0; font-weight: 500; }
  .dbt .dok { background: #0b57d0; color: #fff; }
  .msnack { position: absolute; left: 10px; bottom: 10px; background: #323232; color: #fff; border-radius: 6px; padding: 9px 14px; font-size: 12.5px; display: none; z-index: 2; }
  .msnack.on { display: block; animation: tin .15s ease-out; }
  .mcur { position: absolute; left: 0; top: 0; width: 20px; height: 24px; z-index: 5; pointer-events: none; transform: translate(260px, 240px); }
  .mcur svg { width: 20px; height: 24px; display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); transform-origin: 3px 3px; }
  .mrip { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(11,87,208,.25); z-index: 4; pointer-events: none; animation: rip .45s ease-out forwards; }
  @keyframes rip { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
  .mstep { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; font-size: 14.5px; }
  .mstep .msn { font: 700 12px 'Plus Jakarta Sans'; color: #c5221f; white-space: nowrap; }
  .mstep .mst { color: var(--ink); }
  .mstep kbd { font: 600 12px 'JetBrains Mono', monospace; background: #f1ebe4; border-radius: 4px; padding: 1px 5px; }
  .mdots { display: flex; gap: 6px; margin-top: 10px; } .mdots i { flex: 1; height: 5px; border-radius: 9px; background: #ece5dd; transition: background .3s; } .mdots i.on { background: #c5221f; }
  .lane .kk { font-weight: 600; } .lane .kk b { font-size: 20px !important; color: var(--ink-2) !important; }
  .gnbox { flex: 1; display: grid; place-items: center; text-align: center; }
  .gnbox .bomb.racer { width: 120px; height: 120px; background: #2c2420; }
  .gnbox .bomb.racer svg { width: 76px; height: 76px; }
  .gnbox .bomb.racer.lit { background: #ffd2bd; } .gnbox .bomb.racer.lit svg { animation: swell .16s ease-in forwards; }
  .gnbox .bomb.racer.blown svg { opacity: 0; }
  .gnbox .gdone { display: none; font: 800 26px/1.2 'Gabarito'; color: #fff; }
  .gnbox .gdone small { display: block; font: 500 14px/1.5 'Plus Jakarta Sans'; color: #c9bfb6; margin-top: 6px; }
  .gnbox.done .bomb { display: none; } .gnbox.done .gdone { display: block; animation: clearin .4s ease-out; }
  .lane.gn .lfoot { color: #c9bfb6; }
  .again { font: 600 13px 'Plus Jakarta Sans'; background: none; border: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
  .lane.gn .again { color: #c9bfb6; }
  .score { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .score > div { padding: 15px 16px; border-bottom: 1px solid #ece5dd; display: flex; align-items: center; gap: 8px; font-size: 15px; }
  .score .hd { font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom-color: #e3dbd2; align-items: flex-end; }
  .score .rl { font-weight: 600; }
  .score .us { background: #fff; border-left: 2px solid var(--hot); border-right: 2px solid var(--hot); font-weight: 700; }
  .score .us.hd { border-top: 2px solid var(--hot); border-radius: 14px 14px 0 0; color: var(--hot); font: 800 19px 'Gabarito'; gap: 8px; }
  .score .us.hd { align-items: center; } .score .us.hd img { width: 26px; height: 26px; flex: none; }
  .score .us.last { border-bottom: 2px solid var(--hot); border-radius: 0 0 14px 14px; }
  .score .ot { color: var(--ink-2); }
  .score svg.y, .score svg.n { width: 20px; height: 20px; flex: none; }
  .score svg.y { color: var(--ok); } .score svg.n { color: #c5221f; opacity: .7; }
  .score small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; }
  .score.draw svg path { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .score.draw.go svg path { transition: stroke-dashoffset .45s ease-out; stroke-dashoffset: 0; }

  /* ---------------- the last word ---------------- */
  .fin { background: var(--ink); color: #f5f0eb; overflow: hidden; padding: 128px 0; text-align: left; }
  .fin::before { display: none; }
  .fin .rays { position: absolute; left: 70%; top: 50%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; border-radius: 50%;
               background: repeating-conic-gradient(from 0deg, rgba(232,70,28,.10) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); animation: spinr 80s linear infinite; }
  @keyframes spinr { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .fin .rays { animation: none; } }
  .fin .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; }
  .fin .fyou { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #ffb08f; background: rgba(232,70,28,.14); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }
  .fin .fyou[hidden] { display: none; }
  .fin h2 { font-size: 72px; line-height: 1; margin: 0 0 18px; color: #fff; }
  .fin .fsub { font-size: 19px; color: #c9bfb6; max-width: 520px; margin: 0 0 30px; }
  .fin .btn.go { font-size: 18px; padding: 18px 28px; }
  .fin .assure { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; font-size: 15px; color: #e8e1da; }
  .fin .assure li { display: flex; align-items: center; gap: 8px; }
  .fin .assure svg { width: 18px; height: 18px; color: #9ccfa9; }
  .fin .stagebomb { display: grid; justify-items: center; position: relative; }
  .fin .bomb.huge { width: 260px; height: 260px; background: radial-gradient(circle, #3a2a22 0, #2a211c 70%); margin: 0; }
  .fin .bomb.huge::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; animation: ping 2s ease-out infinite; }
  .fin .bomb.huge svg { width: 170px; height: 170px; }
  .fin .bomb.huge:hover { background: radial-gradient(circle, #4a3328 0, #2a211c 70%); }
  .fin .bomb.lit { background: radial-gradient(circle, #6b2414 0, #2a211c 70%); } .fin .bomb.lit svg { animation: swell .16s ease-in forwards; }
  .fin .bomb.blown { background: transparent; } .fin .bomb.blown svg { opacity: 0; } .fin .bomb.blown::before { display: none; }
  .fin .press { margin-top: 18px; font-size: 14px; color: #c9bfb6; }
  .fin .shadow { width: 200px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(6px); margin-top: -6px; }

  @media (max-width: 900px) {
    .flow { aspect-ratio: auto; display: grid; gap: 10px; margin: 32px 0; }
    .flow svg.lines, .flow .lab { display: none; }
    .flow .nd { position: static; width: auto !important; height: auto !important; }
    .flow .nd.gk em { font-size: 20px; }
    .sec6 { grid-template-columns: 1fr; }
    .pstory { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
    .race { grid-template-columns: 1fr; }
    .lane { min-height: 0; }
    .mr { grid-template-columns: 13px 70px minmax(0, 1fr); } .mr .md { display: none; }
    .score > div { padding: 10px 6px; font-size: 13px; }
    .score .us.hd { font-size: 15px; }
    .score small { display: none; }
    .fin { padding: 80px 0; }
    .fin .wrap { grid-template-columns: 1fr; }
    .fin h2 { font-size: 44px; }
    .fin .assure { grid-template-columns: 1fr; }
    .fin .stagebomb { order: -1; }
    .fin .bomb.huge { width: 180px; height: 180px; } .fin .bomb.huge svg { width: 120px; height: 120px; }
  }

  /* ================= v5: three hero ideas with impact, all on the Spotlight layout ================= */
  .hsw .x { border-color: #ffb08f; }
  .hsw .replay { border-style: dashed; display: none; }
  body[data-x="5"] .hsw .replay { display: inline-block; }

  /* 5: the avalanche */
  .aval { position: absolute; left: 0; right: 0; top: 0; z-index: 20; overflow: hidden; pointer-events: none; }
  .acard { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr) 54px; gap: 10px; align-items: center; height: 38px; padding: 0 12px;
           background: #fff; border: 1px solid #e6e1dc; border-radius: 8px; box-shadow: 0 3px 10px rgba(32,26,22,.14); font: 13px var(--gmail); color: #1f1f1f; will-change: transform; }
  .acard b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acard span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #444746; }
  .acard i { font-style: normal; font-size: 11px; color: #5f6368; text-align: right; }
  .acard.u b, .acard.u span { font-weight: 700; color: #1f1f1f; }
  .acount { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 2; text-align: center; font: 800 112px/1 'Gabarito'; letter-spacing: -.04em; color: var(--hot);
            text-shadow: 0 4px 0 #fff, 0 0 40px #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .acount small { display: block; font: 700 22px 'Plus Jakarta Sans'; letter-spacing: 0; color: var(--ink); margin-top: 6px; }
  .abomb { position: absolute; left: 0; top: 0; width: 120px; height: 120px; z-index: 3; }
  .abomb svg { width: 100%; height: 100%; overflow: visible; }
  .aflash { position: fixed; inset: 0; z-index: 70; background: #fff; pointer-events: none; }

  /* 6: shockwave */
  .sring { position: fixed; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 6px solid rgba(232,70,28,.75); box-shadow: 0 0 0 10px rgba(255,176,32,.12), inset 0 0 30px rgba(255,138,61,.25);
           pointer-events: none; z-index: 55; }
  .h .ch { display: inline-block; white-space: pre; }

  /* 7: the detonator */
  .det { display: none; position: absolute; left: -196px; top: 120px; width: 170px; z-index: 3; text-align: center; cursor: pointer; user-select: none; }
  body[data-x="7"] .det { display: block; }
  .det svg { width: 170px; height: 190px; overflow: visible; display: block; }
  .det .handle { transition: transform .12s ease-in; }
  .det.pushed .handle { transform: translateY(30px); }
  .det:hover .handle { transform: translateY(-4px); }
  .det.pushed:hover .handle { transform: translateY(30px); }
  .det .lbl { margin-top: 6px; font: 700 14px 'Plus Jakarta Sans'; color: var(--ink); }
  .det .lbl small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-3); }
  .det:focus-visible { outline: 2px solid var(--hot); outline-offset: 6px; border-radius: 12px; }
  .det .wire { fill: none; stroke: #3c3c44; stroke-width: 3; stroke-linecap: round; }
  .det .wspark { fill: #ffd36b; }
  @media (max-width: 1240px) { .det { left: -150px; width: 140px; } .det svg { width: 140px; height: 160px; } }
  @media (max-width: 900px) { body[data-x="7"] .det { display: none; } }


  /* ================= v6 ================= */
  /* toasts sit in a one-toast slot and stack downward over the empty space below, so nothing on the page moves */
  .v2 .slot { height: 64px; min-height: 0; }
  .v2 .stack { position: absolute; left: 0; right: 0; top: 0; z-index: 8; }

  /* 5: the avalanche, drawn on one canvas */
  .aval2 { position: absolute; left: 0; right: 0; top: 0; z-index: 20; pointer-events: none; }
  .aval2 canvas { display: block; width: 100%; height: 100%; }
  .aval2 .acount2 { position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; pointer-events: none;
                    font: 800 128px/1 'Gabarito'; letter-spacing: -.045em; color: var(--hot); font-variant-numeric: tabular-nums;
                    text-shadow: 0 3px 0 #fff, 0 0 30px rgba(255,255,255,.95), 0 0 60px rgba(255,255,255,.9); }
  .aval2 .acount2 small { display: block; margin-top: 4px; font: 700 20px 'Plus Jakarta Sans'; letter-spacing: 0; color: var(--ink); text-shadow: 0 0 18px #fff, 0 0 18px #fff; }
  .aval2 .askip { position: absolute; right: 24px; bottom: 18px; pointer-events: auto; font: 600 13px 'Plus Jakarta Sans'; color: var(--ink-2); background: rgba(255,255,255,.9);
                  border: 1px solid #e6dfd7; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
  body[data-x="5"] .v2.buried > .wrap { opacity: .18; filter: blur(1.5px); transition: opacity .3s, filter .3s; }

  /* the last bomb: four looks to compare */
  .fin .bomb.huge.v { width: 280px; height: 280px; background: transparent; }
  .fin .bomb.huge.v svg { width: 280px; height: 280px; overflow: visible; }
  .fin .bomb.huge.v::before { display: none; }
  .fin .bomb.huge.v:hover { background: transparent; transform: scale(1.03); }
  .fin .bomb.huge.v .fglow { animation: fglow 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  @keyframes fglow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
  .fin .bomb.huge.v .b-spark { animation: flick .3s steps(2) infinite alternate; }
  .bsw { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; font: 600 12px 'Plus Jakarta Sans'; color: #c9bfb6; align-items: center; }
  .bsw button { font: 600 12px 'Plus Jakarta Sans'; color: #f5f0eb; background: transparent; border: 1px solid #5a4d44; border-radius: 999px; padding: 4px 11px; cursor: pointer; }
  .bsw button[aria-pressed=true] { background: #f5f0eb; color: var(--ink); border-color: #f5f0eb; }
  @media (max-width: 900px) { .fin .bomb.huge.v, .fin .bomb.huge.v svg { width: 200px; height: 200px; } }


  /* ================= v7 ================= */
  /* the Avalanche is the hero now: only its replay stays in the top bar */
  .hsw > span, .hsw button[data-h] { display: none; }

  /* toasts where Gmail and the extension put them: the inbox's bottom-left corner, 400px wide, stacking upward */
  .v2 .slot { height: 40px; }
  .v2 .slot .hint-t { height: 40px; }
  .v2 .stack { top: auto; right: auto; left: 16px; bottom: calc(100% + 28px); width: min(400px, calc(100% - 32px)); }
  .v2 .stack .t { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
  @media (max-width: 700px) { /* a phone's inbox is too narrow to cover; they go under it, as in v6 */
    .v2 .slot { height: 64px; } .v2 .slot .hint-t { height: 56px; }
    .v2 .stack { top: 0; bottom: auto; left: 0; right: 0; width: auto; }
  }

  /* phones: the receipt sits under the demo, so it keeps its full length from the start instead of growing per nuke */
  @media (max-width: 900px) { .hero .receipt .lines { height: 150px; } }

  /* the avalanche runs on load: the hero starts out buried, so it never shows bare for a moment first */
  .v2.boot > .wrap { opacity: .18; filter: blur(1.5px); }

  /* the last bomb: the mail bomb only */
  .bsw { display: none; }

  /* the real Chrome logo in the install buttons */
  .chrome-ico { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23fff'/%3E%3Cpath fill='%23ea4335' d='M24 14H43.6A22 22 0 0 0 5.54 12.03L15.34 29A10 10 0 0 1 24 14Z'/%3E%3Cpath fill='%23fbbc04' d='M32.66 29L22.86 45.97A22 22 0 0 0 43.6 14H24A10 10 0 0 1 32.66 29Z'/%3E%3Cpath fill='%2334a853' d='M15.34 29L5.54 12.03A22 22 0 0 0 22.86 45.97L32.66 29A10 10 0 0 1 15.34 29Z'/%3E%3Ccircle cx='24' cy='24' r='8.2' fill='%234285f4'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; }
  .chrome-ico::after { display: none; }

  footer.site-foot .brand .glogo { width: 24px; height: 24px; }


  /* ================= v7: back to top, five ideas (picked in the top bar) ================= */
  .btt { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: none; opacity: 0; transform: translateY(16px); pointer-events: none;
         transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1.2); }
  .btt.on { opacity: 1; transform: none; pointer-events: auto; }
  body[data-btt="1"] .btt1, body[data-btt="2"] .btt2, body[data-btt="3"] .btt3, body[data-btt="4"] .btt4, body[data-btt="5"] .btt5 { display: block; }
  .btt button { cursor: pointer; border: 0; padding: 0; background: none; font: inherit; color: inherit; }
  .btt :focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
  .btt .b-star { display: none; }

  /* 1 liftoff: the bomb is a rocket, fuse down; it takes off and the page follows */
  .btt1 button { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid #ece4dc; box-shadow: 0 6px 18px rgba(32,26,22,.16); display: grid; place-items: center; position: relative; }
  .btt1 svg.rk { width: 38px; height: 38px; transform: rotate(135deg); transition: transform .2s; overflow: visible; }
  .btt1 button:hover svg.rk { transform: rotate(135deg) translate(2px, 2px); }
  .btt1 .b-spark { transform-box: fill-box; transform-origin: center; }
  .btt1 button:hover .b-spark { animation: flick .12s steps(2) infinite alternate; }
  .btt1 .lbl { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 12px 'Plus Jakarta Sans'; color: var(--ink-2);
               background: #fff; border: 1px solid #ece4dc; border-radius: 999px; padding: 4px 10px; opacity: 0; transition: opacity .15s; pointer-events: none; }
  .btt1 button:hover .lbl, .btt1 button:focus-visible .lbl { opacity: 1; }

  /* 2 fuse ring: a fuse around the button burns as you read; the spark marks how far down you are */
  .btt2 button { width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(32,26,22,.18); display: grid; place-items: center; position: relative; }
  .btt2 svg.rg { position: absolute; inset: 0; width: 58px; height: 58px; overflow: visible; }
  .btt2 .rope { fill: none; stroke: #b48650; stroke-width: 3.5; }
  .btt2 .ash { fill: none; stroke: #e6dfd7; stroke-width: 3.5; }
  .btt2 .arw { width: 20px; height: 20px; color: var(--ink); transition: transform .2s; }
  .btt2 button:hover .arw { transform: translateY(-3px); }
  .btt2 .glow { fill: url(#btt-spk); }

  /* 3 undo scroll: a Gmail toast, because Gnuke undoes everything */
  .btt3 .t { min-width: 0; width: max-content; box-shadow: 0 6px 18px rgba(0,0,0,.3); padding: 8px 8px 8px 16px; gap: 14px; }
  .btt3 .t .top { font-weight: 400; color: #e8eaed; }
  .btt3 .t .top b { font-variant-numeric: tabular-nums; font-weight: 600; }
  .btt3 .t button { color: #8ab4f8; font: 600 13px var(--gmail); padding: 6px 10px; border-radius: 4px; }
  .btt3 .t button:hover { background: rgba(138,180,248,.14); }

  /* 4 mushroom: an up arrow made of a mushroom cloud; press it and it goes off */
  .btt4 button { width: 56px; height: 56px; border-radius: 18px; background: var(--hot); box-shadow: 0 6px 18px rgba(232,70,28,.35); display: grid; place-items: center; }
  .btt4 svg { width: 34px; height: 34px; overflow: visible; }
  .btt4 .puff { transform-box: fill-box; transform-origin: center bottom; transition: transform .25s cubic-bezier(.2,.8,.2,1.4); }
  .btt4 button:hover .puff { transform: translateY(-3px) scale(1.12); }
  .btt4 button:active { transform: scale(.94); }

  /* 5 pull cord: a fuse hangs from the top of the window with a bomb on the end; pull it */
  .btt5 { right: 30px; top: 0; bottom: auto; transform: translateY(-40px); }
  .btt5.on { transform: none; }
  .btt5 .cord { display: block; width: 2px; margin: 0 auto; height: 120px; background: repeating-linear-gradient(180deg, #b48650 0 4px, #7d5730 4px 7px); transform-origin: top; }
  .btt5 .hang { transform-origin: 50% 0; animation: btt-sway 3.2s ease-in-out infinite alternate; }
  @keyframes btt-sway { from { transform: rotate(2.5deg); } to { transform: rotate(-2.5deg); } }
  .btt5 button { display: block; width: 40px; height: 40px; margin: -4px auto 0; touch-action: none; }
  .btt5 button svg { width: 40px; height: 40px; transform: rotate(-45deg); overflow: visible; }
  .btt5 .pl { display: block; text-align: center; margin-top: 2px; font: 600 11px 'Plus Jakarta Sans'; color: var(--ink-3); }
  .btt5 .pulled .hang { animation: none; }

  /* the fuse ring, burnt out at the bottom of the page: it smolders */
  .btt2.out .rope, .btt2.out .glow, .btt2.out .core { display: none; }
  .btt2 button { transition: background-color .3s; }
  .btt2.out button { background: #2a211c; } .btt2.out .ash { stroke: #3a2e27; }
  .btt2.out .arw { color: #ff8a3d; filter: drop-shadow(0 0 5px rgba(255,138,61,.9)); animation: btt-ember 1.6s ease-in-out infinite alternate; }
  @keyframes btt-ember { from { opacity: .7; } to { opacity: 1; } }
  @media (max-width: 900px) { .btt2 button, .btt2 svg.rg { width: 48px; height: 48px; } }

  @media (max-width: 900px) { .btt { right: 14px; bottom: 14px; } .btt5 { right: 18px; } .btt5 .cord { height: 80px; } }
  @media (prefers-reduced-motion: reduce) { .btt5 .hang { animation: none; } }


  /* ================= v7: phones ================= */
  /* the hero's receipt is an empty box until something is nuked; on a phone the toasts carry the count */
  @media (max-width: 900px) { .v2 .rcpt { display: none; } }

  /* privacy: a long line in the request log must never widen the column past the screen */
  .pstory > * { min-width: 0; }
  /* receipts on a phone: a line that doesn't fit puts its price on the next line, the way a till does, instead of cutting the words off */
  @media (max-width: 600px) {
    .receipt .r { flex-wrap: wrap; }
    .receipt .r span { white-space: normal; min-width: 0; }
    .receipt .r i { min-width: 20px; }
    .receipt .r b { margin-left: auto; text-align: right; }
  }
  /* the request log on a small phone: every request on two lines, where it goes and then what for, so no line ever breaks halfway */
  @media (max-width: 380px) {
    .receipt.log .r { display: grid; grid-template-columns: minmax(20px, 1fr) auto; column-gap: 8px; line-height: 1.45; margin-bottom: 12px; }
    .receipt.log .r span { grid-column: 1 / -1; }
  }
  /* the long receipt: the last item's rule and the total's rule were two dashed lines on top of each other */
  .receipt.long .ri + hr { display: none; }

  /* phones: one install button in view at a time. The hero's is right under the header. */
  @media (max-width: 900px) { nav.top .navcta { display: none !important; } }

  /* "Nuke the other 5 at once" can't squeeze in beside the tabs on a phone. It sits in the space the nuked rows left at the
     bottom of the inbox, so nothing moves under a finger that's about to tap the next bomb. */
  .tabs .chain { white-space: nowrap; }
  @media (max-width: 600px) {
    .inbox { position: relative; }
    .tabs .chain { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; justify-content: center; height: 46px; margin: 0; font-size: 14px; box-shadow: 0 6px 16px rgba(32,26,22,.25); }
  }

  /* toasts on a phone: name, count and buttons on one line, badges on the next. Never three lines, never a badge under a button. */
  @media (max-width: 600px) {
    .t { flex-wrap: wrap; gap: 6px; }
    .t .tb, .t .sub { display: contents; }
    .t .ring { order: 0; margin-right: 2px; }
    .t .top { order: 1; flex: 1 1 0; min-width: 62px; }
    .t .acts button { padding: 6px 7px; }
    .t .sub > * { order: 5; }
    .t .sub > .count { order: 2; }
    .t .acts { order: 3; }
    .t::after { content: ''; order: 4; flex-basis: 100%; height: 0; }
  }

  /* Clean up on a phone: the sender gets the room, and "opened" moves under the name */
  .cp .op2 { display: none; font-size: 11px; color: var(--ink-3); }
  .cp .op2 b { color: var(--ink); }
  @media (max-width: 600px) {
    .cp .track { display: none; }
    /* a table hides cells unpredictably across browsers, so on a phone each row is a plain grid: checkbox, sender, emails, Nuke */
    .cp table, .cp thead, .cp tbody { display: block; }
    .cp tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) 48px 70px; align-items: center; border-bottom: 1px solid var(--line); }
    .cp td, .cp th { display: block; border-bottom: 0; padding-left: 6px; padding-right: 6px; }
    .cp th:nth-child(4), .cp th:nth-child(5), .cp th:nth-child(6), .cp td.col-l, .cp td.op, .cp td.col-u { display: none; }
    .cp .cnt { justify-content: flex-end; }
    .cp tr.sel { background: var(--sel); } .cp tr.gone { background: var(--bg); } .cp tr.row:hover td, .cp tr.sel td, .cp tr.gone td { background: none; }
    .cp .ad { display: none; } .cp .op2 { display: block; }
    .cp .ra { flex-direction: column-reverse; gap: 4px; align-items: stretch; }
    .cp .ra .kp, .cp .ra .nk { padding: 3px 6px; font-size: 11px; }
  }

  /* the race: the email's address gives way so the Unsubscribe link stays on screen */
  @media (max-width: 600px) { .mview .ve { display: none; } }

  /* the popup hint points at the popup: right of it on a computer, below it on a phone */
  .tb2 .live { cursor: pointer; border: 0; font-family: inherit; }
  @media (max-width: 900px) { .tb2 .live svg { transform: rotate(90deg); } }
  .pop footer.flash { animation: ft-flash 1.2s ease-out 2; }
  @keyframes ft-flash { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(232,70,28,0); } 30% { box-shadow: inset 0 0 0 3px rgba(232,70,28,.8); } }

  /* the toolbar popup: never wider than a small phone */
  @media (max-width: 420px) {
    .tb2 > * { min-width: 0; }
    .popwrap, .popwrap .tbar, .pop { max-width: 100%; }
    .pop .chk { flex-wrap: wrap; row-gap: 6px; } .pop .chk .tx { flex-basis: 100%; }
    .tb2 .live { display: flex; max-width: 100%; }
    .receipt.log { font-size: 11.5px; }
  }

  /* compare: on a phone, short headers and just the ticks, so nothing runs into the next column */
  .score .sm { display: none; }
  @media (max-width: 600px) {
    .score { grid-template-columns: minmax(0, 1fr) 56px 56px 74px; }
    .score > div { padding: 12px 4px; font-size: 13.5px; justify-content: center; text-align: center; }
    .score > .rl { justify-content: flex-start; text-align: left; padding-right: 8px; }
    .score .hd { font-size: 12px; line-height: 1.2; }
    .score .lg { display: none; } .score .sm { display: inline; }
    .score .us.hd { flex-direction: column; gap: 4px; font-size: 13px; padding-top: 10px; }
    .score .us.hd img { width: 24px; height: 24px; }
    .score .ot:not(.pr) { font-size: 0; gap: 0; }
    .score .pr { font-size: 12px; line-height: 1.25; }
    .score .ot:not(.pr):not([data-v]) { font-size: 12px; color: var(--ink-3); }  /* "Some do": no tick or cross to stand in for it */
  }

  /* phones: the install buttons open "send it to my computer" */
  .handoff { position: fixed; inset: 0; z-index: 80; display: none; }
  .handoff.open { display: block; }
  .handoff .scrim { position: absolute; inset: 0; background: rgba(23,18,15,.5); animation: ho-fade .2s ease-out; }
  .handoff .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
                    box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: ho-up .28s cubic-bezier(.2,.8,.2,1); }
  .handoff .grab { width: 40px; height: 4px; border-radius: 4px; background: #d9cfc5; margin: 0 auto 16px; }
  .handoff .ttl { display: flex; gap: 12px; align-items: center; }
  .handoff .ttl img { width: 40px; height: 40px; }
  .handoff h3 { font: 800 22px/1.15 'Gabarito'; letter-spacing: -.02em; margin: 0; }
  .handoff p { margin: 10px 0 16px; color: var(--ink-2); font-size: 15px; }
  .handoff .opts { display: grid; gap: 10px; }
  .handoff .opts button, .handoff .opts a { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: 600 16px 'Plus Jakarta Sans'; color: var(--ink);
                    background: #fff; border: 1px solid #e6dfd7; border-radius: 14px; padding: 14px 16px; text-decoration: none; cursor: pointer; }
  .handoff .opts .main { background: var(--hot); border-color: var(--hot); color: #fff; }
  .handoff .opts svg { width: 22px; height: 22px; flex: none; }
  .handoff .opts small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); }
  .handoff .opts .main small { color: rgba(255,255,255,.85); }
  .handoff .url { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-3); }
  .handoff .url b { color: var(--ink); }
  @keyframes ho-fade { from { opacity: 0; } }
  @keyframes ho-up { from { transform: translateY(100%); } }


  /* ================= v7: what you nuked on this page, printed as a receipt ================= */
  .fin .fs { margin-bottom: 40px; }
  .fin .fs[hidden] { display: none; }
  .fin .fs .nudge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #ffb08f; background: rgba(232,70,28,.14); border-radius: 999px; padding: 7px 15px; text-decoration: none; }
  .fs .receipt { max-width: 380px; transform: rotate(-1.5deg); color: var(--ink); }
  .fs .receipt .r.total b { color: var(--hot); }


  .hsw[hidden] { display: none !important; }
  .home-body > .site > .wrap { padding-top: 74px; }
  @media (max-width: 900px) { .home-body > .site > .wrap { padding-top: 72px; } }