/* =====================================================================
   Homepage (index.html): demo-first landing page.
   Loads after /assets/css/base.css (tokens, nav, .btn-cta). Everything here is prefixed .vb-
   Brand: Air Surface page, Deep Anchor dark band, Live Pulse buttons, Open Current accent,
   Minted Meadow success. Yellow only for live / listening states.
   ===================================================================== */
:root {
  --vb-tint-cyan: #D6F4FE;
  --vb-tint-blue: #DFE9FB;
  --vb-tint-mint: #E5F5E8;
  --vb-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --vb-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --vb-w: 1180px;
  --vb-gut: 32px;
}
body.vb { background: var(--page); }
.vb-wrap { width: 100%; max-width: calc(var(--vb-w) + var(--vb-gut) * 2); margin: 0 auto; padding: 0 var(--vb-gut); }
.vb-sec { padding: 112px 0 0; position: relative; }
.vb-mob { display: none; }

/* ---------- type ---------- */
.vb-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 12px/1 var(--vb-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
  margin: 0 0 22px;
}
.vb-eyebrow::before, .vb-eyebrow::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.vb-h2 {
  margin: 0 auto; max-width: 880px; text-align: center; text-wrap: balance;
  font-size: clamp(34px, 4.7vw, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; color: var(--text);
}
.vb-h2 em, .vb-h1 em {
  font-family: var(--vb-serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; font-size: 1.05em;
}
.vb-lede { margin: 22px auto 0; max-width: 620px; text-align: center; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn-cta.vb-btn {
  height: 56px; padding: 0 30px; gap: 10px; border-radius: 999px; background: #0B1C21; color: #fff; border: 0;
  font: 500 17px 'Outfit', sans-serif; letter-spacing: -.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 28px -12px rgba(11,28,33,.55);
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn-cta.vb-btn:hover { background: #1A2F36; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 32px -12px rgba(11,28,33,.6); }
.btn-cta.vb-btn:active { transform: translateY(1px); }
.vb-apple { width: 20px; height: 20px; fill: currentColor; flex: none; }
.vb-cta-row { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.vb-cta-row .cta-fineprint { margin-top: 14px; }
.vb-nav-dl {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; margin-left: 6px;
  border-radius: 999px; background: #0B1C21; color: #fff; white-space: nowrap;
  font: 500 14.5px 'Outfit', sans-serif; letter-spacing: -.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 18px -10px rgba(11,28,33,.55);
  transition: background .15s ease, transform .08s ease;
}
.vb-nav-dl:hover { background: #1A2F36; }
.vb-nav-dl:active { transform: translateY(1px); }
.vb-nav-dl .vb-apple { width: 15px; height: 15px; }

/* ---------- gradient stage (soft backdrop behind mockups) ---------- */
.vb-stage {
  position: relative; border-radius: 28px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 70% at 12% 18%, rgba(2,191,251,.34), transparent 70%),
    radial-gradient(48% 60% at 88% 22%, rgba(0,108,224,.20), transparent 72%),
    radial-gradient(70% 65% at 62% 108%, rgba(123,205,137,.46), transparent 70%),
    linear-gradient(160deg, var(--vb-tint-cyan), var(--vb-tint-blue) 52%, var(--vb-tint-mint));
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -40px rgba(11,28,33,.35);
}
.vb-stage::after { /* soft highlight swoosh */
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 80%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); filter: blur(10px);
}
.vb-stage.alt {
  background:
    radial-gradient(55% 70% at 85% 15%, rgba(123,205,137,.42), transparent 70%),
    radial-gradient(60% 70% at 10% 90%, rgba(2,191,251,.30), transparent 72%),
    linear-gradient(200deg, var(--vb-tint-mint), var(--vb-tint-cyan) 55%, var(--vb-tint-blue));
}

/* ---------- 1. HERO: wallpaper card, rotating app window, Scrubbr pill, macOS dock ---------- */
.vb-hero { --hw-m: clamp(12px, 3.4vw, 48px); padding: 80px var(--hw-m) 0; position: relative; }
.hw-card {
  position: relative; isolation: isolate; overflow: hidden; max-width: 1600px; margin: 0 auto; text-align: center;
  border-radius: 28px; background: #D6F4FE;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 80px -50px rgba(11,28,33,.45);
}
.hw-wall, .hw-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; }
.hw-grain { z-index: -1; opacity: .16; mix-blend-mode: soft-light; }
.hw-inner { position: relative; padding: calc(clamp(56px, 7.6vw, 110px) - 1.04 * (clamp(38px, 6vw, 84px) - clamp(38px, 5.4vw, 76px))) 24px 30px; }   /* the bigger h1 grows into the top padding, so nothing below it moves */
.hw-eyebrow { flex-wrap: wrap; row-gap: 6px; margin-bottom: clamp(24px, 3.3vw, 48px); font-size: 13px; color: #1E4E5C; }
.hw-eyebrow::before { background: #02BFFB; }
.hw-eyebrow::after { background: #006CE0; }
.hw-card .vb-h1 { font-size: clamp(38px, 6vw, 84px); line-height: 1.04; margin: 0; text-wrap: balance; }
.hw-sub { margin: clamp(18px, 1.8vw, 26px) auto 0; max-width: 700px; font-size: clamp(17px, 1.65vw, 22px); line-height: 1.5; color: #34484F; text-wrap: pretty; }
.hw-card .vb-cta-row { margin-top: clamp(28px, 2.6vw, 38px); }
.hw-micro {
  margin: 20px 0 0; font: 500 12px/1.6 var(--vb-mono); letter-spacing: .14em; text-transform: uppercase; color: #4A5D64;
  text-wrap: balance;
}
.hw-sep { margin: 0 .7em; opacity: .7; }

.hw-stagebox { margin-top: clamp(44px, 5vw, 72px); }
.hw-stage { position: relative; width: min(800px, 100%); aspect-ratio: 8 / 5; margin: 0 auto; --hw-s: 1; }
.hw-winwrap { position: absolute; inset: 0; will-change: transform, opacity; }
.hw-winwrap.is-hidden { visibility: hidden; }
.hw-win {
  position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform: scale(var(--hw-s)); transform-origin: 0 0;
  border-radius: 16px; overflow: hidden; background: #fff; text-align: left;
  box-shadow: 0 0 0 1px rgba(11,28,33,.08), 0 32px 60px -24px rgba(11,28,33,.5), 0 8px 18px -10px rgba(11,28,33,.25);
}
.hw-scene {
  position: absolute; inset: 0; display: none; flex-direction: column; color: #202124;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.hw-scene.is-on { display: flex; }
.hw-tb { height: 44px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 14px; }
.hw-tb b { font-weight: 600; font-size: 14px; }
.hw-tbtag { margin-left: auto; font: 500 11px/1 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; color: #7A8F96; }
.hw-dots { display: inline-flex; gap: 8px; margin-right: 6px; flex: none; }
.hw-dots i { width: 12px; height: 12px; border-radius: 50%; background: #ED6A5E; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.hw-dots i:nth-child(2) { background: #F4BF4F; }
.hw-dots i:nth-child(3) { background: #61C554; }
.hw-m { display: inline-block; flex: none; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.hw-m-docs { width: 20px; height: 24px; color: #4285F4; -webkit-mask-image: url(/assets/img/icons/google-docs.svg); mask-image: url(/assets/img/icons/google-docs.svg); }

/* text cursor + streamed text, shared by every scene */
.hw-txt { white-space: pre-wrap; }
.hw-txt.hw-rich { white-space: normal; }
.hw-caret { display: inline-block; width: 2px; height: 1.12em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; animation: hw-blink 1.05s steps(1) infinite; }
.hw-stage.is-typing .hw-caret { animation: none; opacity: 1; }
@keyframes hw-blink { 50% { opacity: 0; } }
.hw-ph { display: none; position: absolute; left: 6px; top: 0; color: #8E8EA0; pointer-events: none; white-space: nowrap; }
.is-empty .hw-ph { display: block; }
.hw-tgt { position: relative; }

/* Gmail */
.hw-gm .hw-tb { background: #F2F6FC; border-bottom: 1px solid #E4E8EE; }
.hw-gm-meta > div { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 24px; border-bottom: 1px solid #EEF0F3; font-size: 15px; }
.hw-gm-meta .k { width: 58px; color: #5F6368; flex: none; }
.hw-rcp { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 4px; border: 1px solid #DADCE0; border-radius: 14px; font-size: 14px; }
.hw-rcp i { width: 20px; height: 20px; border-radius: 50%; background: #1A73E8; color: #fff; font: 500 11px/20px sans-serif; text-align: center; font-style: normal; }
.hw-lnk { color: #1A73E8; text-decoration: underline; text-underline-offset: 2px; }
.hw-gm .hw-caret { background: #202124; }
.hw-gm-body { flex: 1; padding: 18px 24px 0; font-size: 16px; line-height: 1.6; color: #202124; }
.hw-gm-foot { flex: none; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.hw-send { display: inline-flex; align-items: center; height: 36px; padding: 0 24px; border-radius: 18px; background: #0B57D0; color: #fff; font-size: 14px; font-weight: 500; margin-right: 6px; }
.hw-gi { width: 20px; height: 20px; fill: none; stroke: #5F6368; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hw-gi.r { margin-left: auto; }

/* Slack */
.hw-sl .hw-tb { background: #350D36; color: #fff; }
.hw-sl-search { margin: 0 auto; width: 340px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.75); font-size: 13px; line-height: 26px; text-align: center; transform: translateX(-30px); }
.hw-sl-cols { flex: 1; display: flex; min-height: 0; }
.hw-sl-side { width: 210px; flex: none; background: #3F0E40; color: #CFC3CF; padding: 12px 10px; font-size: 14.5px; }
.hw-sl-ws { color: #fff; font-weight: 800; font-size: 16px; padding: 0 8px 12px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 10px; }
.hw-sl-ws span { font-size: 11px; opacity: .7; }
.hw-sl-sec { padding: 10px 8px 4px; font-size: 13px; color: rgba(207,195,207,.85); }
.hw-sl-ch { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 8px; border-radius: 6px; }
.hw-sl-ch span { width: 14px; text-align: center; opacity: .8; }
.hw-sl-ch.on { background: #1164A3; color: #fff; font-weight: 700; }
.hw-sl-ch .pr { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #CFC3CF; box-sizing: border-box; margin: 0 2.5px; }
.hw-sl-ch .pr.on { background: #2BAC76; border-color: #2BAC76; }
.hw-sl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.hw-sl-head { height: 50px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #E8E8E8; font-size: 15px; }
.hw-sl-head b { font-weight: 800; }
.hw-sl-head span { color: #616061; font-size: 13px; }
.hw-sl-msgs { flex: 1; padding: 14px 20px 0; overflow: hidden; }
.hw-sl-m { display: flex; gap: 10px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.4; }
.hw-sl-m .av { width: 36px; height: 36px; border-radius: 8px; flex: none; color: #fff; font: 700 15px/36px sans-serif; text-align: center; font-style: normal; background: #36C5F0; }
.hw-sl-m .av.a2 { background: #E01E5A; }
.hw-sl-m b { font-weight: 800; }
.hw-sl-m small { margin-left: 8px; color: #616061; font-size: 12px; }
.hw-sl-m p { margin: 2px 0 0; color: #1D1C1D; }
.hw-sl-comp { margin: 0 20px 36px; border: 1px solid #868686; border-radius: 9px; background: #fff; }
.hw-sl-bar { display: flex; gap: 14px; padding: 7px 12px; color: #616061; font-size: 14px; background: #F8F8F8; border-radius: 9px 9px 0 0; align-items: center; }
.hw-sl-bar.b { background: #fff; border-radius: 0 0 9px 9px; }
.hw-sl-bar em { margin-left: auto; width: 30px; height: 26px; border-radius: 6px; background: #007A5A; display: flex; align-items: center; justify-content: center; }
.hw-sl-bar em svg { width: 16px; height: 16px; fill: #fff; }
.hw-sl-in { min-height: 52px; padding: 10px 14px 4px; font-size: 15px; line-height: 1.45; color: #1D1C1D; }
.hw-sl-in .hw-ph { left: 14px; top: 10px; color: #868686; }

/* ChatGPT */
.hw-gp { background: #fff; color: #0D0D0D; }
.hw-gp-top { height: 56px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 18px; }
.hw-gp-model { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: #F4F4F4; font-size: 15px; font-weight: 600; }
.hw-gp-model span { font-size: 11px; color: #6B6B6B; }
.hw-gp-av { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #6E56CF; color: #fff; font: 600 13px/30px sans-serif; text-align: center; }
.hw-gp-h { margin-top: 18px; text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.hw-gp-box { width: 720px; margin: 18px auto 0; background: #F4F4F4; border-radius: 28px; padding: 14px 22px 10px; }   /* wide + top-anchored: grows downward to hold the full prompt, no scroll */
.hw-gp-in { min-height: 26px; font-size: 14px; line-height: 1.55; color: #0D0D0D; }
.hw-gp .hw-txt { display: block; }
.hw-gp .hw-l { display: block; }
.hw-gp .hw-li { padding-left: .73em; text-indent: -.73em; }
.hw-gp .hw-gap { margin-top: .85em; }   /* a blank line between blocks, like a prompt typed in ChatGPT */
.hw-gp-in .hw-ph { left: 2px; }
.hw-gp-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hw-gp-row .sp { flex: 1; }
.hw-gp-row .plus { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #D4D4D4; font-size: 22px; line-height: 31px; text-align: center; color: #5D5D5D; }
.hw-gp-row .gm, .hw-gp-row .go { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hw-gp-row .go { background: #0D0D0D; }
.hw-gp-row svg { width: 18px; height: 18px; fill: none; stroke: #5D5D5D; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hw-gp-row .go svg { stroke: #fff; }

/* Claude Code */
.hw-cc { background: #1C1B1A; color: #E7E4DF; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
.hw-cc .hw-tb { background: #2A2826; border-bottom: 1px solid #0E0D0C; color: #A9A39B; }
.hw-cc .hw-tb b { font-weight: 500; font-size: 13px; }
.hw-cc-path { font-size: 12.5px; color: #7C766E; }
.hw-cc-body { padding: 20px 28px 12px; }
.hw-cc-wel { display: flex; align-items: center; gap: 18px; border: 1px solid #D97757; border-radius: 8px; padding: 10px 20px; width: 470px; }
.hw-cc-wel img { width: 40px; height: 40px; flex: none; }
.hw-cc-wel div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.hw-cc-wel b { color: #D97757; font-weight: 600; font-size: 15px; }
.hw-cc-wel small { color: #8B857D; font-size: 12.5px; }
.hw-cc-prompt { margin-top: 18px; display: flex; gap: 12px; border: 1px solid #55514C; border-radius: 8px; padding: 12px 16px; font-size: 12.5px; line-height: 1.6; }   /* grows with the typed prompt (no scroll) */
.hw-cc-prompt .gt { color: #D97757; font-weight: 600; }
.hw-cc-in { flex: 1; min-width: 0; }
.hw-cc .hw-caret { width: 9px; height: 1.2em; margin-left: 0; vertical-align: text-bottom; background: #E7E4DF; }
.hw-cc-hint { margin: 6px 0 0 4px; font-size: 12px; color: #7C766E; }

/* Google Docs */
.hw-dc { background: #F9FBFD; font-family: Arial, "Helvetica Neue", sans-serif; }
.hw-dc .hw-tb { background: #F9FBFD; height: 48px; }
.hw-dc .hw-tb b { font-weight: 400; font-size: 17px; margin-left: 2px; }
.hw-dc-share { margin-left: auto; height: 34px; padding: 0 22px; border-radius: 17px; background: #C2E7FF; color: #001D35; font-size: 14px; font-weight: 500; line-height: 34px; }
.hw-dc-menu { display: flex; gap: 20px; padding: 0 18px 0 62px; height: 26px; font-size: 13px; color: #202124; align-items: center; flex: none; }
.hw-dc-tool { flex: none; display: flex; align-items: center; gap: 18px; height: 40px; margin: 4px 14px 0; padding: 0 18px; border-radius: 20px; background: #EDF2FA; font-size: 13px; color: #202124; }
.hw-dc-tool .sel { padding: 0 4px; }
.hw-dc-canvas { flex: 1; padding: 14px 0 0; min-height: 0; overflow: hidden; position: relative; }   /* scrolled by site.js while the roadmap is written */
.hw-dc-page { width: 560px; min-height: 100%; margin: 0 auto; background: #fff; padding: 34px 54px 190px; box-shadow: 0 0 0 1px #DADCE0; font-size: 14px; line-height: 1.55; color: #202124; }
.hw-dc-page .hw-caret { background: #202124; }
.hw-dc-page h1 { margin: 0 0 4px; font-size: 26px; font-weight: 400; line-height: 1.25; }
.hw-dc-page h2 { margin: 16px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.hw-dc-page p { margin: 0 0 4px; }
.hw-dc-page p.meta { font-size: 12.5px; line-height: 1.45; color: #5F6368; }
.hw-dc-page ul { margin: 2px 0 4px; padding-left: 22px; }
.hw-dc-page li { margin: 1px 0; padding-left: 2px; }
.hw-dc-page ul.chk { list-style: none; padding-left: 0; }
.hw-dc-page ul.chk li { position: relative; padding-left: 26px; }
.hw-dc-page ul.chk li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 12px; height: 12px; border: 1.5px solid #5F6368; border-radius: 2px; background: #fff center / 10px no-repeat; }
.hw-dc-page ul.chk li.on::before { border-color: #1A73E8; background-color: #1A73E8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-dc-page .src { color: #5F6368; font-size: 12px; }
.hw-dc-page table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 6px 0 4px; font-size: 13px; line-height: 1.4; }
.hw-dc-page th, .hw-dc-page td { border: 1px solid #DADCE0; padding: 5px 8px; text-align: left; vertical-align: top; }
.hw-dc-page th { background: #F1F3F4; font-weight: 600; }
.hw-dc-page th:nth-child(1) { width: 104px; }
.hw-dc-page th:nth-child(2) { width: 82px; }
.hw-dc-page th:nth-child(3) { width: 58px; }

/* Prompt pill: Lemon-style dark pill straddling the window's top edge (about 2/3 above it). At the top of the page it is the wide pill. As soon as
   the page scrolls (#hw-stage.is-compact, set by site.js) it shrinks to the size of the tray widget and fades out while the real #hw-tray widget row
   fades in at the same spot, then travels down with the scroll (inline `translate`, JS) and lands in its place under the window (#hw-tray.is-landed).
   Hidden without JS and under reduced motion. */
.hw-pill {
  display: none; --ph: 48px; position: absolute; left: 50%; top: calc(var(--ph) / -6); width: min(max(72%, 562px), 96%); height: var(--ph); z-index: 6; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 999px; overflow: hidden; will-change: transform, translate, opacity; color: #E8F6F1;
  transition: width .3s ease, height .3s ease, transform .3s ease, opacity .3s ease;
  background: rgba(11,28,33,.92); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 12px 26px -14px rgba(11,28,33,.6);
}
.hw-stage.has-pill .hw-pill { display: block; }
.hw-stage.is-compact .hw-pill:not(.hw-pill-probe) { width: 44px; height: 30px; opacity: 0; transform: translate(calc(-50% - 18px), -50%); }   /* the idle speak widget sits 18px left of the tray centre */
.hw-pill-in { transition: opacity .15s ease; }
.hw-stage.is-compact .hw-pill:not(.hw-pill-probe) .hw-pill-in { opacity: 0; }
.hw-pill.hw-pill-probe { visibility: hidden; top: 0; transition: none; will-change: auto; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* hidden clone used only to measure how many characters fit */
.hw-stage.is-instant .hw-pill, .hw-stage.is-instant .hw-pill-in, #hw-tray.is-instant .hw-wgrow, #hw-tray.is-instant .hw-fn, #hw-tray.is-instant .hw-chips, #hw-tray.is-instant .hw-cap { transition: none !important; }
/* tray widget row: hidden while the wide pill is up, fades in on the compact switch, travels via inline `translate`. Caption, chips and the fn keycap wait for the landing. */
#hw-tray.has-pill .hw-wgrow { opacity: 0; z-index: 7; transition: opacity .3s ease; }
#hw-tray.has-pill.is-compact .hw-wgrow { opacity: 1; }
#hw-tray.has-pill .hw-fn { opacity: 0; transition: opacity .25s ease; }
#hw-tray.has-pill.is-landed .hw-fn.is-on { opacity: 1; }
#hw-tray.has-pill .hw-chips { opacity: 0; transition: opacity .25s ease; }
#hw-tray.has-pill.is-landed .hw-chips { opacity: 1; }
#hw-tray.has-pill:not(.is-landed) .hw-cap.is-on { opacity: 0; }
#hw-tray.has-pill:not(.is-compact) .hw-ptr { visibility: hidden; }   /* in a type scene the cursor must not click the wide pill */
.hw-pill-in { height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 22px 0 14px; text-align: left; }
.hw-pill-mark { flex: none; width: 24px; height: 24px; display: block; }
.hw-pill-mark img { display: block; width: 44px; height: 44px; margin: -10px; max-width: none; object-fit: contain; }   /* the PNG is 268px with a 134x100 mark, so a 44px box shows a ~22px mark */
.hw-pill-bars { flex: none; height: 24px; display: none; align-items: center; gap: 3.5px; }   /* the same 6 bars as the landed widget (.hw-bars) */
.hw-pill-pen { flex: none; width: 18px; height: 18px; display: none; fill: none; stroke: #E8F6F1; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hw-pill[data-m="voice"] .hw-pill-bars { display: flex; }
.hw-pill[data-m="type"] .hw-pill-pen { display: block; }
.hw-pill-bars i { width: 3px; height: 4px; border-radius: 2px; background: #02BFFB; display: block; flex: none; }
.hw-pill-bars i:nth-child(n+4) { background: #006CE0; }
.hw-pill[data-st="listen"] .hw-pill-bars i { animation: hw-eq var(--d, .8s) ease-in-out var(--dl, 0s) infinite; }
.hw-pill-bars i:nth-child(1) { --p: 7px; --d: 0.74s; --dl: -0.15s; }
.hw-pill-bars i:nth-child(2) { --p: 12px; --d: 0.58s; --dl: -0.4s; }
.hw-pill-bars i:nth-child(3) { --p: 17px; --d: 0.9s; --dl: -0.25s; }
.hw-pill-bars i:nth-child(4) { --p: 17px; --d: 0.66s; --dl: -0.55s; }
.hw-pill-bars i:nth-child(5) { --p: 12px; --d: 0.82s; --dl: -0.1s; }
.hw-pill-bars i:nth-child(6) { --p: 7px; --d: 0.6s; --dl: -0.45s; }
.hw-pill-tx { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; font: 400 13px/1.4 var(--vb-mono); color: #E8F6F1; }
.hw-pill-tx:empty::before { color: #7C9AA2; }
.hw-pill[data-m="voice"] .hw-pill-tx:empty::before { content: "Hold Option to speak…"; }
.hw-pill[data-m="type"] .hw-pill-tx:empty::before { content: "Type a prompt…"; }
.hw-pill-st { flex: none; min-width: 80px; text-align: right; white-space: nowrap; font: 500 11px/1 var(--vb-mono); letter-spacing: .14em; text-transform: uppercase; color: #02BFFB; }
.hw-pill[data-st="listen"] .hw-pill-st::after { content: "Listening"; }
.hw-pill[data-st="type"] .hw-pill-st::after { content: "Typing"; }
.hw-pill[data-st="work"][data-k="write"] .hw-pill-st::after { content: "Writing"; }
.hw-pill[data-st="work"][data-k="prompt"] .hw-pill-st::after { content: "Prompting"; }
.hw-pill[data-st="done"] .hw-pill-st { color: #7BCD89; }
.hw-pill[data-st="done"] .hw-pill-st::before { content: "\2713"; margin-right: .5em; }
.hw-pill[data-st="done"][data-k="write"] .hw-pill-st::after { content: "Written"; }
.hw-pill[data-st="done"][data-k="prompt"] .hw-pill-st::after { content: "Prompted"; }

/* Scrubbr system widgets (speak widget + type button), caption, context chips. Minimal: 30px row. */
.hw-tray { position: relative; width: min(800px, 100%); height: 30px; margin: 16px auto 0; }
.hw-wgrow { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 6px; }
.hw-wgw { position: relative; flex: none; }
.hw-wg, .hw-ty {
  background: rgba(11,28,33,.92); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 5px 12px -7px rgba(11,28,33,.5); color: #E8F6F1;
}
/* speak widget: 44x30 pill -> 52px waveform pill (speak) -> 40px circle with the logo (type) */
.hw-wg { position: relative; width: 44px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: width .38s cubic-bezier(.3,.8,.3,1), height .38s cubic-bezier(.3,.8,.3,1); }
.hw-tray[data-s="speak"] .hw-wg { width: 52px; }
.hw-tray[data-s="type"] .hw-wg { width: 40px; height: 40px; }
/* logo: the PNG is 268px with a 134x100 mark, so a 50px box shows a ~25px-wide mark. .hw-rest = logo at rest (idle), .hw-mark = logo in type (own pop-in from site.js) */
.hw-rest, .hw-mark { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; object-fit: contain; pointer-events: none; }
/* idle: logo pops back in (scale .6 -> overshoot -> 1) after the bars have collapsed; leaving (speak/type) it squeezes toward the centre and fades */
.hw-rest { opacity: 1; transform: none; transition: opacity .12s ease .2s, transform .3s cubic-bezier(.34,1.5,.64,1) .2s; }
.hw-tray[data-s="speak"] .hw-rest, .hw-tray[data-s="type"] .hw-rest { opacity: 0; transform: scale(.3,1.14); transition: opacity .16s ease .02s, transform .18s cubic-bezier(.5,0,.8,.4); }
.hw-tray[data-s="type"] .hw-rest { transition: opacity .16s ease .09s, transform .18s cubic-bezier(.5,0,.8,.4); }   /* the type mark pops in at ~215ms: keep the logo up until then */
.hw-mark { opacity: 0; transform: scale(.4); transition: opacity .15s ease .1s, transform .2s ease; }   /* the .1s delay keeps it overlapping the rest logo coming back */
.hw-tray[data-s="type"] .hw-mark { opacity: 1; transform: none; transition: opacity .15s ease .18s, transform .2s ease .18s; }   /* site.js replays its own pop-in on top (200ms delay) */
/* waveform: 6 rounded bars, 3 cyan + 3 blue; tallest in the middle, shorter toward the sides.
   Rest: 4px dots stacked at the centre (--nx pulls each bar to the centre). Speak: born from the centre middle-first (--bd), overshoot, then the hw-eq loop
   takes over at its peak (delay = --bd + born duration - half the loop) so there is no jump. Leave: collapse to the centre (--cd), shrink, fade. */
.hw-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3.5px; }
.hw-bars i {
  width: 3px; height: 4px; border-radius: 2px; background: #02BFFB; display: block; flex: none; opacity: 0; transform: translateX(var(--nx, 0)) scaleX(1.34);
  transition: transform .22s cubic-bezier(.5,0,.8,.4) var(--cd, 0s), height .2s ease var(--cd, 0s), opacity .1s ease calc(var(--cd, 0s) + .12s);
}
.hw-bars i:nth-child(n+4) { background: #006CE0; }
.hw-tray[data-s="speak"] .hw-bars i {
  opacity: 1; transform: none; transition: none;
  animation: hw-eq var(--d, .8s) ease-in-out calc(var(--bd, 0s) + .34s - var(--d, .8s) / 2) infinite, hw-born .34s linear var(--bd, 0s) backwards;
}
.hw-bars i:nth-child(1) { --p: 7px; --d: 0.74s; --nx: 16.25px; --bd: .16s; --cd: 0s; }
.hw-bars i:nth-child(2) { --p: 12px; --d: 0.58s; --nx: 9.75px; --bd: .11s; --cd: .02s; }
.hw-bars i:nth-child(3) { --p: 17px; --d: 0.9s; --nx: 3.25px; --bd: .06s; --cd: .04s; }
.hw-bars i:nth-child(4) { --p: 17px; --d: 0.66s; --nx: -3.25px; --bd: .06s; --cd: .04s; }
.hw-bars i:nth-child(5) { --p: 12px; --d: 0.82s; --nx: -9.75px; --bd: .11s; --cd: .02s; }
.hw-bars i:nth-child(6) { --p: 7px; --d: 0.6s; --nx: -16.25px; --bd: .16s; --cd: 0s; }
@keyframes hw-born {
  0% { opacity: 0; height: 4px; transform: translateX(var(--nx, 0)) scaleX(1.34); animation-timing-function: ease-out; }
  14% { opacity: 1; }
  32% { height: 5px; transform: translateX(calc(var(--nx, 0) * .4)) scaleX(1.2); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  64% { height: calc(var(--p, 10px) * 1.22); transform: none; animation-timing-function: ease-in-out; }
  100% { opacity: 1; height: var(--p, 10px); transform: none; }
}
@keyframes hw-eq { 0%, 100% { height: 4px; } 50% { height: var(--p, 10px); } }
/* type button: 30px circle that itself extends into the prompt bar (is-open) */
.hw-ty {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 999px; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 0 0 0 16px;
  transition: width .45s cubic-bezier(.2,.9,.3,1), height .45s cubic-bezier(.2,.9,.3,1), transform .12s ease, background .12s ease;
}
.hw-ty.is-open { width: min(420px, calc(100% - 64px)); height: 40px; }
.hw-ty.is-press { transform: scale(.88); background: rgba(24,52,60,.96); }
.hw-ty-ic { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; fill: none; stroke: #E8F6F1; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 1; transition: opacity .2s ease .25s; }
.hw-ty.is-open .hw-ty-ic { opacity: 0; transition: opacity .14s ease; }
.hw-bar-body { position: relative; flex: 1; text-align: left; min-width: 0; white-space: nowrap; overflow: hidden; font: 400 14px/1.4 'Outfit', sans-serif; color: #fff; opacity: 0; transition: opacity .1s ease; }
.hw-bar-ph { display: none; position: absolute; left: 4px; top: 0; color: #7C9AA2; }
.hw-ty.is-empty .hw-bar-ph { display: block; }
.hw-ty .hw-caret { height: 1.1em; background: #02BFFB; }
.hw-wsend { flex: none; width: 30px; height: 30px; margin-right: 5px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .1s ease, transform .1s ease; }
.hw-wsend svg { width: 16px; height: 16px; fill: none; stroke: #0B1C21; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hw-ty.is-open .hw-bar-body, .hw-ty.is-open .hw-wsend { opacity: 1; transition: opacity .2s ease .2s, transform .1s ease; }
.hw-wsend.is-press { transform: scale(.88); }
.hw-fn { position: absolute; right: calc(100% + 10px); top: 50%; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-50%); transition: opacity .2s ease; white-space: nowrap; }
.hw-fn.is-on { opacity: 1; }
.hw-fn em { font: 500 11px/1 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; color: #34484F; font-style: normal; }
.hw-fn kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 26px; padding: 0 8px; border-radius: 8px;
  font: 500 12.5px/1 var(--vb-mono); color: #0B1C21; background: rgba(255,255,255,.92); border: 1px solid rgba(11,28,33,.14); border-bottom-width: 3px;
  box-shadow: 0 5px 12px -8px rgba(11,28,33,.5); transition: transform .08s ease, border-bottom-width .08s ease, background .1s ease;
}
.hw-fn.is-press kbd { transform: translateY(2px); border-bottom-width: 1px; background: #D6F4FE; }
/* caption stays above the row; chips slide out to the LEFT of the speak widget (row is 80px wide when idle) */
.hw-cap {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100% - 16px)); z-index: 5; text-align: center; pointer-events: none;
  padding: 9px 18px; border-radius: 16px; background: rgba(11,28,33,.92); color: #E8F6F1; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 22px -12px rgba(11,28,33,.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  font: italic 500 17px/1.4 var(--vb-serif); opacity: 0; transition: opacity .25s ease; display: block;
}
.hw-cap.is-on { opacity: 1; }
.hw-chips {
  position: absolute; right: calc(50% + 50px); bottom: 2px; z-index: 0; pointer-events: none;
  display: flex; flex-direction: row-reverse; flex-wrap: nowrap; gap: 6px;
  clip-path: inset(-60px -32px -30px -2000px);   /* hide anything right of the speak widget's centre, so chips slide in and out under it */
}
/* One row on wide screens (chips may run past the tray into the card); stack upward when the card is narrow */
@media (max-width: 1000px) { .hw-chips { max-width: calc(50% - 56px); flex-wrap: wrap-reverse; align-content: flex-start; } }
.hw-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 100%; padding: 0 11px 0 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(11,28,33,.92); border: 0; color: #A9C3CA; font-size: 12px; font-weight: 500;   /* dark glass, same as the widgets */
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 14px -9px rgba(11,28,33,.6); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0; transform: translateX(var(--out, 24px)); transition: transform .5s cubic-bezier(.6,0,.3,1), opacity .18s ease .34s;
}
.hw-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hw-chip.is-in { opacity: 1; transform: none; transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .12s ease; }
.hw-chip img, .hw-chip svg { width: 14px; height: 14px; flex: none; }
.hw-chip b { font-weight: 600; color: #fff; }
.hw-ptr { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 9; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
@media (max-width: 560px) { .hw-chip b, .hw-chip-sep { display: none; } #hw-chips .hw-chip ~ .hw-chip { display: none; } }   /* phones: one hero chip, so a second row never covers the compose window */

/* macOS Dock */
.hw-dock {
  --dk: 58px; position: relative; display: flex; align-items: flex-end; gap: 12px; width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 9px 12px 4px;
  border-radius: 24px; background: rgba(236,240,242,.34); border: 1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(26px) saturate(1.15); backdrop-filter: blur(26px) saturate(1.15);
  box-shadow: 0 18px 40px -14px rgba(11,28,33,.4), 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 .5px rgba(11,28,33,.14);
}
.hw-dk { position: relative; display: block; flex: none; width: var(--dk); height: calc(var(--dk) + 9px); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; font: inherit; }
.hw-dk-m { position: absolute; left: 0; right: 0; top: 0; height: var(--dk); transform-origin: 50% 100%; transition: transform .14s cubic-bezier(.2,.8,.3,1); display: block; }
.hw-ico {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 22.5%;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 5px 10px -2px rgba(0,0,0,.22), inset 0 0 0 .5px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.5);
}
.hw-ico img { display: block; width: 58%; height: auto; max-height: 58%; }
.hw-ico-gmail { background: linear-gradient(#fff, #F1F1F1); }
.hw-ico-gmail img { width: 60%; }
.hw-ico-slack { background: linear-gradient(#fff, #F1F1F1); }
.hw-ico-slack img { width: 56%; }
.hw-ico-gpt { background: linear-gradient(#262626, #000); }
.hw-ico-gpt::after, .hw-ico-docs::after { content: ""; position: absolute; inset: 21%; background: #fff; -webkit-mask: url(/assets/img/icons/chatgpt.svg) center / contain no-repeat; mask: url(/assets/img/icons/chatgpt.svg) center / contain no-repeat; }
.hw-ico-docs { background: linear-gradient(#fff, #F1F1F1); }
.hw-ico-docs::after { inset: 20% 24%; background: #4285F4; -webkit-mask-image: url(/assets/img/icons/google-docs.svg); mask-image: url(/assets/img/icons/google-docs.svg); }
.hw-ico-cc { background: linear-gradient(160deg, #3B3835, #1B1A19); }
.hw-ico-cc img { width: 54%; }
.hw-ico-cc b { position: absolute; right: 6%; bottom: 7%; padding: 1px 4px 2px; border-radius: 5px; background: #fff; color: #1B1A19; font: 600 calc(var(--dk) * .17)/1 var(--vb-mono); letter-spacing: -.02em; }
.hw-dot { position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(11,28,33,.78); opacity: 0; transition: opacity .2s ease; }
.hw-dk.is-run .hw-dot { opacity: 1; }
.hw-dk::after {
  content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 30px); transform: translate(-50%, 4px); padding: 5px 11px; border-radius: 8px; white-space: nowrap;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #1D1D1F; font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif;
  box-shadow: 0 6px 18px -6px rgba(11,28,33,.35), 0 0 0 .5px rgba(11,28,33,.12); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 8;
}
.hw-dk:hover::after, .hw-dk:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.hw-dk:focus-visible { outline: none; }
.hw-dk:focus-visible .hw-ico { outline: 2px solid #006CE0; outline-offset: 3px; }
@media (hover: none) { .hw-dk::after { display: none; } }

/* ---------- 2. LOGO STRIP ---------- */
.vb-logos { padding: 80px 0 0; text-align: center; }
.vb-logos .vb-eyebrow { margin-bottom: 56px; }
.vb-logos + .vb-sec { padding-top: 164px; }   /* generous air under the logo row before #how */
.vb-lmarq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.vb-ltrack { display: flex; width: max-content; animation: vb-scroll 48s linear infinite; }
.vb-lmarq:hover .vb-ltrack { animation-play-state: paused; }
.vb-lset { list-style: none; margin: 0; padding: 0 64px 0 0; display: flex; flex: none; align-items: center; gap: 64px; }
.vb-lset li { flex: none; display: flex; align-items: center; height: 48px; }
.vb-logos img { height: 36px; width: auto; max-width: 204px; object-fit: contain; opacity: .78; filter: grayscale(.2); }
.vb-logos img.lg-wide { height: 30px; }   /* long wordmark: shorter, so it weighs the same as the others */
.vb-logos img.lg-tall { height: 48px; }   /* stacked logo: taller, so its text stays readable */

/* ---------- 3. STEPS ---------- */
.vb-steps { --hiw-gap: 36px; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hiw-gap); padding: 0; list-style: none; }
@media (min-width: 1380px) { .vb-steps { margin-inline: -70px; --hiw-gap: 40px; } }
.vb-step { position: relative; container-type: inline-size; background: #fff; border-radius: 24px; box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 24px 48px -30px rgba(11,28,33,.34); display: flex; flex-direction: column; }
.vb-step:nth-child(-n+2) { z-index: 2; }
/* round arrow connector, sitting on the gap and centred on the visual (visual height = 2/3 of card width) */
.vb-step:not(:last-child)::after {
  content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; z-index: 3; pointer-events: none;
  left: calc(100% + var(--hiw-gap) / 2 - 20px); top: 22%; top: calc(100cqw / 3 - 20px);   /* 22% = fallback without container units */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%230B1C21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  box-shadow: 0 8px 18px -8px rgba(11,28,33,.4), 0 0 0 1px rgba(11,28,33,.07);
}
.vb-step-art { container-type: inline-size; aspect-ratio: 3 / 2; border-radius: 24px 24px 0 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; background: var(--vb-tint-cyan); }
.hiw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hiw-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; }
.vb-step-body { padding: 34px 36px 40px; }
.vb-num { display: block; font: 500 12.5px/1 var(--vb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
.vb-num b { font-weight: 500; color: var(--blue); }
.vb-step h3 { margin: 0 0 12px; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.vb-step p { margin: 0; color: var(--text-2); font-size: 17px; line-height: 1.5; }
#how .vb-eyebrow::before { background: #02BFFB; }
#how .vb-eyebrow::after { background: #006CE0; }
/* ---- How it works: visuals (hiw-). Default markup = finished state; JS adds .hiw-js to start the sequences. Sizes scale with the visual's width (cqw). ---- */
/* 01: fn key */
.hiw-keywrap { --k: clamp(88px, 31cqw, 134px); --kx: calc(var(--k) * -.064); --ky: calc(var(--k) * .09); position: relative; width: var(--k); height: var(--k); flex: none; }
.hiw-key-base, .hiw-key-top { position: absolute; left: 0; top: 0; width: var(--k); height: var(--k); border-radius: calc(var(--k) * .25); }
.hiw-key-base { transform: translate(var(--kx), var(--ky)); background: linear-gradient(180deg, #C2D9CE, #A6C3B5); box-shadow: 0 16px 24px -10px rgba(11,28,33,.4), inset 0 -1px 0 rgba(11,28,33,.08); }
.hiw-key-top {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--k) * .06);
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F8F4 55%, #E4F0E9 100%); border: 1px solid rgba(11,28,33,.1);
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 6px -2px rgba(11,28,33,.07), 0 1px 3px rgba(11,28,33,.12);
  transition: transform .42s cubic-bezier(.34,1.56,.64,1);
}
.hiw-keywrap.is-press .hiw-key-top { transform: translate(var(--kx), var(--ky)); transition: transform .12s cubic-bezier(.5,0,.8,.6); }
.hiw-logo { position: relative; display: block; width: calc(var(--k) * .236); height: calc(var(--k) * .182); overflow: hidden; }
.hiw-logo img { position: absolute; width: calc(var(--k) * .4727); height: calc(var(--k) * .4727); max-width: none; left: calc(var(--k) * -.118); top: calc(var(--k) * -.1455); }
.hiw-key-top b { font: 500 calc(var(--k) * .17)/1 var(--vb-mono); color: #0B1C21; letter-spacing: -.02em; }
.hiw-wave { position: absolute; left: calc(100% + 20px); top: 50%; height: 44px; margin-top: -22px; display: flex; align-items: center; gap: 4px; transition: opacity .18s ease, transform .25s cubic-bezier(.2,.8,.3,1); }
.hiw-wave i { width: 3.5px; height: calc(var(--p, 14px) * 1.25); border-radius: 2px; background: #02BFFB; display: block; flex: none; }
.hiw-wave i:nth-child(n+4) { background: #006CE0; }
.hiw-js .hiw-wave { opacity: 0; transform: translateX(-8px) scale(.85); }
.hiw-js .hiw-keywrap.is-wave .hiw-wave { opacity: 1; transform: none; }
.hiw-js .hiw-wave i { transform: scaleY(.3); }
.hiw-js .hiw-keywrap.is-wave .hiw-wave i { animation: hiw-eq .62s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hiw-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
/* 02: context checklist */
.hiw-list { position: relative; width: 100%; padding: 0 clamp(10px, 4cqw, 24px); font-size: clamp(12px, 3.3cqw, 14px); }
.vb-step .hiw-head { margin: 0 0 9px; padding-left: 4px; display: flex; align-items: center; gap: 8px; font: 500 clamp(11px, 2.9cqw, 12.5px)/1 var(--vb-mono); letter-spacing: .02em; color: #2F4852; white-space: nowrap; }
.hiw-dot { width: 7px; height: 7px; border-radius: 50%; background: #7BCD89; flex: none; }
.hiw-head-a { display: none; }
.hiw-js .hiw-head-a { display: inline; }
.hiw-js .hiw-head-b { display: none; }
.hiw-js .hiw-list.is-done .hiw-head-a { display: none; }
.hiw-js .hiw-list.is-done .hiw-head-b { display: inline; }
.hiw-js .hiw-dot { background: #02BFFB; animation: hiw-pulse 1s ease-in-out infinite; }
.hiw-js .hiw-list.is-done .hiw-dot { background: #7BCD89; animation: none; }
@keyframes hiw-pulse { 50% { opacity: .35; transform: scale(.7); } }
.hiw-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 2cqw, 9px); }
.hiw-row {
  display: flex; align-items: center; gap: clamp(6px, 1.9cqw, 8px); height: clamp(28px, 8.6cqw, 37px); padding: 0 clamp(8px, 2.6cqw, 11px) 0 clamp(8px, 2.4cqw, 10px); border-radius: 999px; white-space: nowrap; min-width: 0;
  background: rgba(255,255,255,.94); border: 1px solid rgba(11,28,33,.08); color: #0B1C21; font-size: inherit; font-weight: 500;
  box-shadow: 0 8px 16px -10px rgba(11,28,33,.5);
}
.hiw-ic { display: flex; flex: none; }
.hiw-ic img, .hiw-ic svg { width: 1.2em; height: 1.2em; flex: none; }
.hiw-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hiw-tx { flex: 1; }
.hiw-row b { font-weight: 600; }
.hiw-st { position: relative; width: 1.3em; height: 1.3em; flex: none; }
.hiw-spin, .hiw-ck { position: absolute; inset: 0; width: 100%; height: 100%; }
.hiw-spin { display: none; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(0,108,224,.18); border-top-color: #006CE0; }
.hiw-js .hiw-ck { opacity: 0; transform: scale(.4); }
.hiw-js .hiw-row { opacity: .5; transition: opacity .25s ease; }
.hiw-js .hiw-row.is-run, .hiw-js .hiw-row.is-done { opacity: 1; }
.hiw-js .hiw-row.is-run .hiw-spin { display: block; animation: hiw-rot .6s linear infinite; }
.hiw-js .hiw-row.is-done .hiw-ck { opacity: 1; transform: none; transition: opacity .15s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes hiw-rot { to { transform: rotate(360deg); } }
/* 03: typed email */
.hiw-art-mail { flex-direction: column; justify-content: flex-start; gap: clamp(7px, 2.6cqw, 12px); }
.hiw-mail { width: calc(100% - 2 * clamp(10px, 4cqw, 22px)); margin-top: clamp(10px, 4cqw, 22px); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 32px -18px rgba(11,28,33,.5), 0 0 0 1px rgba(11,28,33,.05); color: var(--text); font-size: clamp(10.5px, 3cqw, 13px); }
.vb-step .hiw-mail p { margin: 0; }
.hiw-mtb { display: flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 .9em; background: #F2F6FC; border-bottom: 1px solid #E4E8EE; font-size: .95em; }
.hiw-mtb img { width: 1.25em; height: auto; }
.hiw-mtb b { font-weight: 600; color: #202124; }
.hiw-mdots { display: inline-flex; gap: .38em; margin-right: .3em; }
.hiw-mdots i { width: .72em; height: .72em; border-radius: 50%; background: #ED6A5E; display: block; }
.hiw-mdots i:nth-child(2) { background: #F4BF4F; }
.hiw-mdots i:nth-child(3) { background: #61C554; }
.vb-step .hiw-mrow { font-size: 1em; display: flex; align-items: center; gap: .8em; height: 2.35em; padding: 0 1.1em; border-bottom: 1px solid #EEF0F3; white-space: nowrap; overflow: hidden; }
.hiw-mk { flex: none; color: #5F6368; }
.hiw-mrcp { display: inline-flex; align-items: center; gap: .45em; height: 1.75em; padding: 0 .7em 0 .22em; border: 1px solid #DADCE0; border-radius: 1em; color: #202124; }
.hiw-mrcp i { border-radius: 50%; background: #1A73E8; color: #fff; font: 500 .72em/1.8em sans-serif; text-align: center; font-style: normal; width: 1.8em; height: 1.8em; }
.hiw-msub { color: #202124; overflow: hidden; text-overflow: ellipsis; }
.vb-step .hiw-mb { display: block; position: relative; white-space: pre-line; padding: .8em 1.1em .8em; font-size: 1em; line-height: 1.45; color: #202124; }
.hiw-typed { padding: inherit; }
.hiw-ghost { display: block; visibility: hidden; }
.hiw-typed { position: absolute; left: 0; top: 0; right: 0; }
.hiw-caret { display: none; width: 2px; height: 1.05em; background: var(--blue); margin-left: 1px; vertical-align: -2px; animation: vb-blink 1s steps(1) infinite; }
.hiw-js .hiw-caret { display: inline-block; }
@container (max-width: 340px) { .vb-step .hiw-mrow + .hiw-mrow { display: none; } .hiw-mtb { height: 2.05em; } .vb-step .hiw-mrow { height: 2.15em; } .vb-step .hiw-mb { line-height: 1.38; } }
.vb-step .hiw-art-mail .hiw-mrow + .hiw-mrow { display: none; }   /* step 3: no Subject row, so the reply has room */
.hiw-art-mail .hiw-mail { flex: 1 1 0; min-height: 0; margin-bottom: 16px; --ah: 66.667cqw; --n: 17.65; font-size: calc((var(--ah) - clamp(10px, 4cqw, 22px) - 18px) / var(--n)); }   /* step 3: the window fills the art down to 16px of green; the reply writes past its bottom edge (hidden) */
/* font-size = window height / --n em, so the window edge cuts the same line at every width (art height = --ah) */
@media (max-width: 600px) { .hiw-art-mail .hiw-mail { --ah: 75cqw; } }   /* phones: 4/3 art */
@container (max-width: 340px) { .hiw-art-mail .hiw-mail { --n: 15.8; } }   /* tighter rows and lines in small cards */
@container (max-width: 340px) { .vb-step .hiw-art-mail .hiw-mb { line-height: 1.32; padding-top: .5em; padding-bottom: .5em; } }   /* small cards (~1000px page): last line keeps its padding */
@media (max-width: 1280px) {
  .vb-step-body { padding: 28px 28px 34px; }
  .vb-step h3 { font-size: 22px; }
  .vb-step p { font-size: 16px; }
}
/* stacked: one card per row, no connectors */
@media (max-width: 960px) {
  .vb-steps { grid-template-columns: minmax(0, 1fr); max-width: 580px; margin-inline: auto; --hiw-gap: 24px; }
  .vb-step:not(:last-child)::after { display: none; }
}
@media (max-width: 600px) {
  .vb-steps { margin-top: 40px; }
  .vb-step-art { aspect-ratio: 4 / 3; }
  .vb-step-body { padding: 24px 24px 30px; }
  .vb-step h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .hiw-wave i, .hiw-dot, .hiw-spin { animation: none !important; } }
@keyframes vb-blink { 50% { opacity: 0; } }

/* ---------- 4. WHAT WE SOLVE (pn-): Before -> After on a painted scene. Default = final state (pasture). .is-before = wasteland. --pn-t on .pn-art (0 wasteland ... 1 pasture) is the one progress value: it fades the wasteland layers at staggered times (sky, sun, hills, junk) over the pasture underneath, grows the sun, shrinks the flames and sinks the garbage, so the picture changes in place (no wipe edge). ---------- */
.pn-stage { padding: 60px 0 46px; container-type: inline-size; }
.pn-stage::after { display: none; }
.pn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pn-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; --pn-t: 1;
  --k-sky: clamp(0, calc((var(--pn-t) - .12) / .62), 1); --k-sun: clamp(0, calc((var(--pn-t) - .16) / .62), 1); --k-hill: clamp(0, calc((var(--pn-t) - .28) / .62), 1);
  --k-fire: clamp(0, calc(var(--pn-t) / .4), 1); --k-smoke: clamp(0, calc(var(--pn-t) / .65), 1); --k-junk: clamp(0, calc((var(--pn-t) - .18) / .5), 1); }
.pn-stage.is-before .pn-art { --pn-t: 0; }
.pn-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pn-stage:not(.is-before):not(.is-morph) .pn-w { display: none; }   /* final state: the wasteland layers are not painted at all */
.pn-sky-w, .pn-haze-w, .pn-hill-w, .pn-hill-p { will-change: opacity; }
.pn-sun-w, .pn-sun-p { will-change: opacity, transform; transform-origin: 0 0; }
.pn-sky-w, .pn-haze-w { opacity: calc(1 - var(--k-sky)); }
.pn-hill-w { opacity: calc(1 - var(--k-hill)); }
.pn-hill-p { opacity: clamp(0, calc((var(--pn-t) - .2) / .3), 1); }   /* hidden in the wasteland, so its crest never shows as a pale fringe behind the scorched hills */
.pn-sun-w { opacity: calc(1 - var(--k-sun)); transform: scale(calc(1 + .12 * var(--k-sun))); }
.pn-sun-p { opacity: var(--k-sun); transform: scale(calc(.82 + .18 * var(--k-sun))); }
/* wasteland motion: flames flicker from their base, smoke drifts up and fades. Runs only while the layers show (.is-before, or .is-morph set by the sequencer). Flames shrink and fade, smoke thins, garbage sinks into the grass as --pn-t rises. */
.pn-flame, .pn-smoke, .pn-fire { transform-box: fill-box; transform-origin: 50% 100%; }
.pn-stage.is-before .pn-flame, .pn-stage.is-morph .pn-flame { animation: pn-flick 1.1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.pn-stage.is-before .pn-smoke, .pn-stage.is-morph .pn-smoke { animation: pn-smoke 7s ease-in infinite; animation-delay: var(--d, 0s); }
.pn-fire { opacity: calc(1 - var(--k-fire)); transform: scale(calc(1 - .8 * var(--k-fire))); }
.pn-smoke > ellipse { opacity: calc(var(--so, .5) * (1 - var(--k-smoke))); }
.pn-glow { opacity: calc(var(--go, .5) * (1 - var(--k-fire))); }
.pn-body { opacity: calc(1 - var(--k-junk)); transform: translateY(calc(var(--k-junk) * 20px)); }
@keyframes pn-flick { 0% { transform: scale(1, 1) rotate(0); opacity: 1; } 50% { transform: scale(.9, 1.12) rotate(-2.5deg); } 100% { transform: scale(1.07, .88) rotate(2.5deg); opacity: .86; } }
@keyframes pn-smoke { 0% { transform: translate(0, 24px) scale(.7); opacity: 0; } 22% { opacity: 1; } 100% { transform: translate(20px, -110px) scale(1.5); opacity: 0; } }
/* One word says which phase is on: Before while .is-before, After otherwise (default = final state). */
.pn-label { position: absolute; left: 50%; top: 12px; z-index: 4; transform: translateX(-50%); display: grid; place-items: center; height: 40px; padding: 0 24px; border-radius: 999px; background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 20px -12px rgba(11,28,33,.4); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--text); pointer-events: none; }
.pn-label span { grid-area: 1 / 1; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.pn-lb-b { opacity: 0; transform: translateY(14px); } .pn-stage.is-before .pn-lb-b { opacity: 1; transform: none; }
.pn-lb-a { opacity: 1; transform: none; font-family: var(--vb-serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; font-size: 1.08em; } .pn-stage.is-before .pn-lb-a { opacity: 0; transform: translateY(-14px); }
.pn-nt .pn-col, .pn-nt:not(.pn-hand) .pn-label span { transition: none !important; }   /* .pn-hand = auto-advance handover: the Before/After label may still animate */
/* pain-point tab row (pills, like the old app tabs) + panes. Panes stack in one grid cell, so the stage keeps the Email pane's height; only .is-on is visible. */
#solve .vb-tabs { display: flex; justify-content: flex-start; gap: 10px; margin: 28px 0 12px; padding: 4px 0 16px; position: relative; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }   /* scrolls whenever the pills do not fit; the auto margins on the first/last pill keep them centred when they do */
#solve .vb-tabs::-webkit-scrollbar { display: none; }
#solve .vb-tab:first-child { margin-left: auto; } #solve .vb-tab:last-child { margin-right: auto; }
.vb-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px 0 16px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(11,28,33,.10); background: #fff; color: var(--text);
  font: 600 16px 'Outfit', sans-serif; letter-spacing: -.01em; white-space: nowrap; scroll-snap-align: center;
  box-shadow: 0 8px 20px -14px rgba(11,28,33,.4); transition: background .15s ease, color .15s ease, transform .08s ease;
}
.vb-tab svg { width: 20px; height: 20px; flex: none; }
.vb-tab:hover { background: #F6FBF8; }
.vb-tab[aria-selected="true"] { background: var(--anchor); color: #fff; border-color: var(--anchor); }
/* Progress bar between the tabs and the scene: fills as the pane's demo plays (JS sets transform/transition on the <i>). Hidden without JS; full = resting state. */
#solve .pn-prog { display: none; width: min(240px, 100%); height: 3px; margin: -8px auto 9px; border-radius: 3px; background: rgba(11,28,33,.08); overflow: hidden; }
#solve .pn-prog.is-on { display: block; }
#solve .pn-prog i { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--anchor); opacity: .8; transform-origin: 0 50%; will-change: transform; }
.vb-tab:active { transform: translateY(1px); }
.vb-tab:focus-visible { outline: 2px solid var(--anchor); outline-offset: 3px; }
.pn-panes { position: relative; z-index: 1; display: grid; }
.pn-pane { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
.pn-pane.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }
@media (max-width: 600px) {
  #solve .vb-tabs { justify-content: flex-start; gap: 8px; margin: 24px calc(var(--vb-gut) * -1) 20px; padding: 2px var(--vb-gut) 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--vb-gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #solve .vb-tabs::-webkit-scrollbar { display: none; }
  .vb-tab { height: 42px; padding: 0 16px 0 13px; font-size: 14.5px; gap: 7px; }
  .vb-tab svg { width: 18px; height: 18px; }
}
/* Two wide windows (16:10), one in focus: the focused one is slightly smaller and shifted away from the other (left in Before, right in After), the other is small, blurred and parked at the stage edge, clearly visible. Default (final state) = After in focus, Before small at the left; .is-before = the reverse.
   Each window is built at --nw x --wh px and scaled by --pn-s so it fits at any width, with or without JS (exact value from tan(atan2()) against the stage width; stepped fallbacks above/below). */
.pn-grid { position: relative; z-index: 1; --nw: 800; --wh: 520; --fw: .64; --ex: 0px; --pn-s: .94; height: calc(44px + var(--ex) + (var(--wh) + 52) * var(--pn-s) * 1px); }
.pn-col { position: absolute; top: 0; left: 50%; width: calc(var(--nw) * var(--pn-s) * 1px); margin-left: calc(var(--nw) * var(--pn-s) * -.5px); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s cubic-bezier(.2,.8,.2,1), opacity .8s cubic-bezier(.2,.8,.2,1); will-change: transform, filter; }
.pn-col-b { transform-origin: 0 50%; transform: translateX(calc(16px - 28%)) scale(.42); filter: blur(5px); opacity: .72; pointer-events: none; z-index: 1; }
.pn-col-a { transform-origin: 100% 50%; transform: translateX(21%); filter: blur(0); opacity: 1; z-index: 2; }
.pn-stage.is-before .pn-pane.is-on .pn-col-b { transform: translateX(-21%); filter: blur(0); opacity: 1; pointer-events: auto; z-index: 2; }
.pn-stage.is-before .pn-pane.is-on .pn-col-a { transform-origin: 100% 50%; transform: translateX(calc(28% - 16px)) scale(.42); filter: blur(5px); opacity: .72; pointer-events: none; z-index: 1; }
.pn-fit { position: relative; width: 100%; height: calc((var(--wh) + 52) * var(--pn-s) * 1px); }
.pn-sc { position: absolute; left: 0; top: 0; width: calc(var(--nw) * 1px); height: calc((var(--wh) + 52) * 1px); transform: scale(var(--pn-s)); transform-origin: 0 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.pn-bd { height: 36px; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.pn-timer { display: inline-flex; align-items: center; height: 26px; border-radius: 999px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 10px -6px rgba(11,28,33,.35); }
.pn-timer { gap: 5px; padding: 0 11px 0 8px; font: 600 12.5px/1 'Outfit', sans-serif; white-space: nowrap; }
.pn-timer svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pn-timer-old { color: #B4452B; } .pn-timer-new { color: #1E6B36; }
.pn-clk { color: #3A4A52; } .pn-clk svg { fill: currentColor; stroke: #fff; stroke-width: 1; stroke-linejoin: round; } .pn-clk-new svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* before: one real-app window at a time (Gmail, ChatGPT, Company wiki), swapped by tab clicks in one Chrome window */
.pn-bww { position: relative; }
.pn-bw, .pn-gmw, .pn-slw, .pn-clw, .pn-dcw { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; text-align: left; color: #202124; box-shadow: 0 0 0 1px rgba(11,28,33,.08), 0 28px 54px -24px rgba(11,28,33,.5), 0 8px 18px -10px rgba(11,28,33,.25); }
.pn-bw { height: calc(var(--wh) * 1px); display: flex; flex-direction: column; }
.pn-pgs { position: relative; flex: 1; min-height: 0; }
/* Google Chrome frame: tab strip + omnibox */
.pn-ch { flex: none; background: #DEE1E6; }
.pn-tabs { display: flex; align-items: flex-end; gap: 3px; height: 40px; padding: 8px 12px 0 14px; }
.pn-tabs .pn-dots { align-self: center; margin: -3px 14px 0 0; }
.pn-tab { position: relative; flex: 0 1 200px; min-width: 0; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-radius: 10px 10px 0 0; font-size: 12.5px; color: #5F6368; white-space: nowrap; transition: background .12s ease; }
.pn-tab img, .pn-tab svg { flex: none; width: 16px; height: 16px; } .pn-tab svg { fill: none; stroke: #5F6368; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-tab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.pn-tab .x { flex: none; width: 16px; height: 16px; border-radius: 50%; font: 400 15px/16px sans-serif; text-align: center; font-style: normal; color: #5F6368; }
.pn-tab.is-on { background: #fff; color: #202124; box-shadow: 0 1px 0 #fff; } .pn-tab.is-on::before, .pn-tab.is-on::after { content: ""; position: absolute; bottom: 0; width: 8px; height: 8px; background: radial-gradient(circle at 0 0, transparent 7.6px, #fff 8.4px); }
.pn-tab.is-on::before { left: -8px; } .pn-tab.is-on::after { right: -8px; transform: scaleX(-1); }
.pn-tab.is-hover { background: rgba(255,255,255,.5); } .pn-tab.is-on.is-hover { background: #fff; }
.pn-tab-new { align-self: center; margin-left: 6px; width: 22px; height: 22px; border-radius: 50%; font: 300 18px/21px sans-serif; text-align: center; color: #5F6368; }
.pn-nav { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #fff; border-bottom: 1px solid #DADCE0; }
.pn-nav > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn-omni { flex: 1; min-width: 0; height: 28px; margin-left: 4px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px; background: #F1F3F4; font-size: 13px; color: #202124; }
.pn-omni svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pn-app { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; }
.pn-app.is-on { display: flex; }
.pn-app p { margin: 0; }
.pn-tb { height: 42px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.pn-dots { display: inline-flex; gap: 7px; margin-right: 4px; flex: none; }
.pn-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ED6A5E; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.pn-dots i:nth-child(2) { background: #F4BF4F; } .pn-dots i:nth-child(3) { background: #61C554; }
.pn-hl { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply; z-index: 2; }
.pn-hl i { position: absolute; background: #9CC2FF; border-radius: 2px; }
/* Gmail reading view */
.pn-gm .pn-tb { background: #F2F6FC; border-bottom: 1px solid #E4E8EE; }
.pn-gm-s { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 14px; background: #E8EEF7; color: #5F6368; font-size: 12.5px; }
.pn-gm-s svg { width: 14px; height: 14px; fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round; }
.pn-gm-av, .pn-gp-av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #7B5EA7; color: #fff; font: 600 12px/26px sans-serif; text-align: center; }
.pn-gm-bd { position: relative; flex: 1; min-height: 0; overflow: hidden; font-size: 14px; line-height: 1.5; }
.pn-gm-th { position: relative; padding: 14px 28px 26px; will-change: transform; }
.pn-gm-subj { display: flex; align-items: center; gap: 9px; font-size: 20px; line-height: 1.25; margin-bottom: 6px !important; color: #1F1F1F; }
.pn-gm-lb { font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 5px; background: #E8EAED; color: #444746; }
.pn-gm-msg { padding: 14px 0 16px; border-top: 1px solid #EEF0F3; }
.pn-gm-from { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pn-gm-from i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #1A73E8; color: #fff; font: 500 15px/36px sans-serif; text-align: center; font-style: normal; }
.pn-gm-from i.a2 { background: #7B5EA7; }
.pn-gm-from i.a3 { background: #0B8043; }
.pn-gm-from i.a4 { background: #E37400; }
.pn-gm-from > span { flex: 1; min-width: 0; line-height: 1.35; }
.pn-gm-from b { font-weight: 600; }
.pn-gm-from small { color: #5F6368; font-size: 12px; }
.pn-gm-from em { flex: none; font-style: normal; font-size: 12px; color: #5F6368; }
.pn-gm-text { white-space: pre-line; font-size: 14px; line-height: 1.6; padding-left: 48px; color: #202124; }
/* ChatGPT (same look as the hero scene) */
.pn-gp { background: #fff; color: #0D0D0D; }
.pn-gp-top { justify-content: space-between; }
.pn-gp-model { margin-right: auto; margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: #F4F4F4; font-size: 13px; font-weight: 600; }
.pn-gp-model i { font-style: normal; font-size: 10px; color: #6B6B6B; }
.pn-gp-av { background: #6E56CF; }
.pn-gp-empty { display: none; }
.pn-gp.is-empty .pn-gp-empty { display: flex; flex: 1; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; letter-spacing: -.01em; padding-bottom: 20px; }
.pn-gp.is-empty .pn-chat { display: none; }
.pn-gp-box { flex: none; width: 72%; margin: 6px auto 16px; padding: 9px 8px 9px 16px; border-radius: 22px; background: #F4F4F4; }
.pn-gp-line { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.pn-gp-in { flex: 1; min-width: 0; font-size: 14px; color: #0D0D0D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-gp-in.is-ph { color: #8A8A8A; }
.pn-gp-line b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #0D0D0D; display: flex; align-items: center; justify-content: center; transition: background .12s ease; }
.pn-gp-line b.is-hover { background: #3C3C3C; }
.pn-gp-in.is-caret::after, .pn-gp-in.is-ph.is-caret::before { content: ""; display: inline-block; width: 1.5px; height: 1.15em; background: #0D0D0D; vertical-align: -.2em; animation: pn-blink 1s steps(1) infinite; }
.pn-gp-in.is-caret::after { margin-left: 1px; } .pn-gp-in.is-ph.is-caret::after { display: none; } .pn-gp-in.is-ph.is-caret::before { margin-right: -1.5px; }
@keyframes pn-blink { 50% { opacity: 0; } }
.pn-gp-line svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pn-chat { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 11px; padding: 8px 14% 12px; font-size: 14.5px; line-height: 1.5; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.pn-js .pn-chat { justify-content: flex-start; -webkit-mask-image: none; mask-image: none; }
.pn-js .pn-chat.is-sc { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.pn-m { flex: none; }
.pn-u { align-self: flex-end; max-width: 88%; background: #F4F4F4; border-radius: 16px; padding: 8px 13px; }
.pn-u:first-child { max-width: 96%; padding: 8px; }
.pn-u:first-child > p { padding: 0 5px 2px; }
.pn-a { align-self: flex-start; max-width: 94%; color: #202124; }
.pn-pastes { display: flex; gap: 6px; margin-bottom: 8px; }
.pn-dpastes { display: none; margin-bottom: 6px; }
.pn-gp.has-dp .pn-dpastes { display: flex; }
.pn-dpastes .pn-paste { background: #fff; }
.pn-paste { flex: 1; min-width: 0; background: #fff; border: 1px solid #E3E3E3; border-radius: 10px; padding: 7px 8px 5px; }
.pn-paste small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; line-height: 1.25; color: #6B6B6B; margin-bottom: 6px; }
.pn-paste i { display: block; height: 5px; border-radius: 3px; background: #D9D9D9; margin-bottom: 4px; filter: blur(.9px); }
.pn-paste i.s { width: 62%; }
.pn-x { display: none !important; }
.pn-th { display: inline-flex; gap: 4px; padding: 6px 0; }
.pn-th i { width: 6px; height: 6px; border-radius: 50%; background: #9A9A9A; animation: pn-th 1s ease-in-out infinite; }
.pn-th i:nth-child(2) { animation-delay: .15s; } .pn-th i:nth-child(3) { animation-delay: .3s; }
@keyframes pn-th { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* Company wiki: Notion-like page */
.pn-pb .pn-tb { border-bottom: 1px solid #EDEDEB; }
.pn-pb-bc { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: #787774; }
.pn-pb-bc img { flex: none; width: 18px; height: 18px; }
.pn-pb-bc i { font-style: normal; color: #C0BEBB; }
.pn-pb-bc b { font-weight: 500; color: #37352F; }
.pn-pb-sh { margin-left: auto; padding: 4px 10px; border-radius: 6px; background: #F1F1EF; font-size: 12.5px; color: #37352F; }
.pn-pb-bd { position: relative; flex: 1; min-height: 0; overflow: hidden; color: #37352F; }
.pn-pb-th { position: relative; padding: 28px 72px 36px; will-change: transform; }
.pn-pb-meta { font-size: 12.5px !important; color: #9B9A97; margin-bottom: 4px !important; }
.pn-pb-bd ul { margin: 6px 0 0; padding-left: 22px; font-size: 15px; line-height: 1.55; } .pn-pb-bd li { margin: 0 0 2px; }
.pn-pb-ic { width: 38px; height: 38px; fill: none; stroke: #9B9A97; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 8px; }
.pn-pb-bd h4 { margin: 0 0 8px; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.pn-pb-bd h5 { margin: 22px 0 3px; font-size: 18.5px; line-height: 1.3; font-weight: 600; }
.pn-pb-bd p { font-size: 15px; line-height: 1.55; }
/* keycap flash (outside the clipped window so it can straddle its edge) */
.pn-key { position: absolute; left: 50%; bottom: -15px; z-index: 6; display: flex; gap: 6px; opacity: 0; transform: translateX(-50%) translateY(6px); pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
.pn-key.is-on { opacity: 1; transform: translateX(-50%); }
.pn-key kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 9px; border-radius: 8px; font: 500 13px/1 var(--vb-mono); color: #0B1C21; background: rgba(255,255,255,.96); border: 1px solid rgba(11,28,33,.14); border-bottom-width: 3px; box-shadow: 0 6px 14px -8px rgba(11,28,33,.55); transition: transform .08s ease, border-bottom-width .08s ease, background .1s ease; }
.pn-key.is-press kbd { transform: translateY(2px); border-bottom-width: 1px; background: #D6F4FE; }
.pn-cur { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -2.5px 0 0 -4px; z-index: 9; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); will-change: transform; }
/* after: Gmail compose window + hero widget tray (hero classes .hw-gm*, .hw-tray, .hw-chip, .hw-cap are reused; these rules size them for the 520px window) */
.pn-gmw, .pn-slw, .pn-clw, .pn-dcw { height: calc(var(--wh) * 1px); display: flex; flex-direction: column; }
.pn-gmw .hw-tb { height: 42px; padding: 0 16px; font-size: 13.5px; }
.pn-gmw .hw-tb b { font-size: 13px; }
.pn-gmw .hw-gm-meta > div { height: 38px; padding: 0 26px; gap: 12px; font-size: 14px; }
.pn-gmw .hw-gm-meta .k { width: 52px; }
.pn-gmw .hw-rcp { height: 27px; font-size: 14px; }
.pn-gmw .hw-gm-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px 26px 0; font-size: 16px; line-height: 1.6; }
.pn-body p { margin: 0 0 7px; }
.pn-body .pn-l + p { margin-top: 7px; }
.pn-gmw .hw-gm-foot { height: 48px; padding: 0 16px; }
.pn-gmw .hw-send { height: 32px; padding: 0 20px; font-size: 13px; }
.pn-gmw .hw-gi { width: 18px; height: 18px; }
.pn-sc .pn-tray { width: 100%; margin: 16px 0 0; }
.pn-sc .hw-chips { max-width: none; flex-wrap: nowrap; align-content: normal; }
.pn-sc .hw-chip b, .pn-sc .hw-chip-sep, .pn-sc .hw-fn em { display: inline; }
.pn-sc .hw-cap { bottom: 40px; font-size: 17px; padding: 9px 18px; }
.pn-sc .hw-fn kbd { height: 26px; min-width: 32px; font-size: 12.5px; }
/* ---- Chat pane: Slack (+ a Gmail search) in the Chrome window; After = the same Slack look with the composer focused. Reuses the Email pane's window chrome, pills, tray and cursor. ---- */
.pn-sk { background: #fff; color: #1D1C1D; }
.pn-sk p { margin: 0; }
.pn-sk-top { position: relative; flex: none; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 14px; background: #350D36; }
.pn-sk-top .pn-dots { position: absolute; left: 16px; top: 50%; margin: -5.5px 0 0; }
.pn-sk-s, .pn-gm-s { transition: background .12s ease, color .12s ease; }
.pn-sk-s { display: flex; align-items: center; gap: 8px; width: min(54%, 400px); height: 26px; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.2); color: rgba(255,255,255,.88); font-size: 12.5px; white-space: nowrap; }
.pn-sk-s svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pn-sk-s.is-focus { background: #fff; color: #1D1C1D; }
.pn-t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pn-gm-s .pn-t2 { color: #202124; } .pn-gm-s .pn-t2.is-ph { color: #5F6368; }
.pn-gm-s.is-focus { background: #fff; box-shadow: 0 0 0 1.5px #1A73E8 inset; }
.pn-sk-s.is-focus .pn-t2::after, .pn-gm-s.is-focus .pn-t2::after { content: ""; display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; background: currentColor; vertical-align: -.2em; animation: pn-blink 1s steps(1) infinite; }
.pn-sk-cols { flex: 1; display: flex; min-height: 0; }
.pn-sk-side { flex: none; width: 176px; padding: 10px 8px; overflow: hidden; background: #3F0E40; color: #CFC3CF; font-size: 13.5px; }
.pn-sk-ws { padding: 0 8px 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 15px; font-weight: 800; }
.pn-sk-ws span { font-size: 10px; opacity: .7; }
.pn-sk-sec { padding: 9px 8px 3px; font-size: 12px; color: rgba(207,195,207,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-sk-chn { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .1s ease; }
.pn-sk-chn span { flex: none; width: 13px; text-align: center; opacity: .8; }
.pn-sk-chn .pr { flex: none; box-sizing: border-box; width: 9px; height: 9px; margin: 0 2px; border-radius: 50%; border: 1.5px solid #CFC3CF; }
.pn-sk-chn .pr.on { background: #2BAC76; border-color: #2BAC76; }
.pn-sk-chn.on { background: #1164A3; color: #fff; font-weight: 700; }
.pn-sk-chn.is-hover { background: rgba(255,255,255,.14); } .pn-sk-chn.on.is-hover { background: #1164A3; }
.pn-sk:not([data-v="ch"]) .pn-sk-chn.on { background: transparent; color: inherit; font-weight: 400; }
.pn-sk:not([data-v="ch"]) .pn-sk-chn.on.is-hover { background: rgba(255,255,255,.14); }
.pn-sk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.pn-sk-v { display: none; flex: 1; min-height: 0; flex-direction: column; }
.pn-sk[data-v="ch"] .pn-sk-v-ch, .pn-sk[data-v="sr"] .pn-sk-v-sr, .pn-sk[data-v="th"] .pn-sk-v-th { display: flex; }
.pn-sk-head { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-bottom: 1px solid #E8E8E8; font-size: 14px; white-space: nowrap; overflow: hidden; }
.pn-sk-head b { font-weight: 800; } .pn-sk-head span { color: #616061; font-size: 12.5px; }
.pn-sk-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 12px 18px 10px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.pn-sk-day { flex: none; display: flex; align-items: center; gap: 10px; color: #616061; font-size: 12px; font-weight: 700; }
.pn-sk-day::before, .pn-sk-day::after { content: ""; flex: 1; height: 1px; background: #E8E8E8; }
.pn-sk-m { flex: none; display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.pn-sk-m .av { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #36C5F0; color: #fff; font: 700 15px/36px sans-serif; text-align: center; font-style: normal; }
.pn-sk-m .av.a2 { background: #E01E5A; } .pn-sk-m .av.a3 { background: #2EB67D; } .pn-sk-m .av.a4 { background: #ECB22E; }
.pn-sk-m b { font-weight: 800; } .pn-sk-m small { margin-left: 8px; color: #616061; font-size: 12px; }
.pn-sk-m p { margin-top: 2px; }
.pn-sk-at { padding: 0 2px; border-radius: 3px; background: #E8F5FA; color: #1264A3; }
.pn-lnk { color: #1264A3; text-decoration: underline; text-underline-offset: 2px; } .pn-gm .pn-lnk { color: #1A73E8; }
.pn-sk-comp { flex: none; margin: 0 18px 14px; border: 1px solid #868686; border-radius: 9px; background: #fff; transition: box-shadow .1s ease, border-color .1s ease; }
.pn-sk-comp.is-focus { border-color: #1D1C1D; box-shadow: 0 0 0 1px #1D1C1D; }
.pn-sk-in { position: relative; min-height: 46px; padding: 11px 14px 4px; font-size: 14px; line-height: 1.45; color: #1D1C1D; }
.pn-sk-in.is-ph { color: #868686; }
.pn-sk-in.is-caret::after, .pn-sk-in.is-ph.is-caret::before { content: ""; display: inline-block; width: 1.5px; height: 1.15em; background: #1D1C1D; vertical-align: -.2em; animation: pn-blink 1s steps(1) infinite; }
.pn-sk-in.is-caret::after { margin-left: 1px; } .pn-sk-in.is-ph.is-caret::after { display: none; } .pn-sk-in.is-ph.is-caret::before { margin-right: -1.5px; }
.pn-sk-ph { display: none; position: absolute; left: 14px; top: 11px; color: #868686; pointer-events: none; white-space: nowrap; }
.pn-sk-comp.is-empty .pn-sk-ph { display: block; }
.pn-sk-cb { display: flex; align-items: center; gap: 14px; padding: 4px 10px 7px; color: #616061; font-size: 14px; }
.pn-sk-cb em { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 6px; background: #007A5A; font-style: normal; transition: background .12s ease; }
.pn-sk-cb em svg { width: 16px; height: 16px; fill: #fff; }
.pn-sk-cb em.is-hover { background: #005E45; }
.pn-sk-ghost { margin-bottom: 14px; border-color: #C9C9C9; }
.pn-sk-rl { flex: 1; min-height: 0; overflow: hidden; padding: 4px 0; }
.pn-sk-r { padding: 9px 18px; font-size: 13.5px; line-height: 1.4; transition: background .1s ease; }
.pn-sk-r .rh { display: flex; align-items: baseline; gap: 8px; } .pn-sk-r b { font-weight: 800; } .pn-sk-r small { color: #616061; font-size: 12px; }
.pn-sk-r mark { padding: 0; background: #F8E5A0; color: inherit; }
.pn-sk-r.is-hover { background: #F4F4F4; }
/* Gmail (Chat pane): inbox, search results, the open email */
.pn-gl { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.pn-gm[data-v="in"] .pn-gl-in, .pn-gm[data-v="rs"] .pn-gl-rs { display: flex; }
.pn-gm .pn-gv { display: none; } .pn-gm[data-v="ev"] .pn-gv { display: block; }
.pn-gl-r { flex: none; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 20px; border-bottom: 1px solid #EEF0F3; font-size: 13px; color: #202124; white-space: nowrap; transition: background .1s ease; }
.pn-gl-r b { flex: none; width: 124px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pn-gl-r span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #5F6368; }
.pn-gl-r strong { font-weight: 600; color: #202124; }
.pn-gl-r em { flex: none; font-style: normal; font-size: 12px; color: #5F6368; }
.pn-gl-r.is-hover { background: #F2F6FC; }
/* ---- AI prompts pane: ChatGPT writes a prompt, pasted into Claude (Before); After = the structured prompt streams into the Claude composer. Reuses the Email pane's window chrome, ChatGPT page, pills, tray and cursor. ---- */
.pn-cl { background: #FAF9F5; color: #1F1E1D; }
.pn-cl p { margin: 0; }
.pn-cl-top { background: #FAF9F5; border-bottom: 1px solid #ECE9DF; justify-content: space-between; }
.pn-cl-wm { display: inline-flex; align-items: center; gap: 8px; font: 500 17px/1 var(--vb-serif); letter-spacing: -.01em; color: #3D3929; }
.pn-cl-wm img { width: 18px; height: 18px; }
.pn-cl-av { background: #3D3929; }
.pn-cl-top2 { position: relative; justify-content: flex-start; }
.pn-cl-top2 .pn-cl-wm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pn-cl-bd { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pn-cl-hi { position: absolute; left: 0; right: 0; top: 15%; display: none; flex-direction: column; align-items: center; gap: 12px; text-align: center; font: 400 31px/1.15 var(--vb-serif); letter-spacing: -.015em; color: #3D3929; }
.pn-cl-hi img { width: 34px; height: 34px; }
.pn-clw .pn-cl-hi, .pn-cl.is-empty .pn-cl-hi { display: flex; }
.pn-cl-chat { position: absolute; left: 0; right: 0; top: 0; padding: 22px 14% 0; display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; line-height: 1.5; }
.pn-cl.is-empty .pn-cl-chat { display: none; }
.pn-cl-u { align-self: flex-end; width: 56%; padding: 8px; border-radius: 14px; background: #F0EEE6; }
.pn-cl-u .pn-paste { background: #fff; border-color: #E5E2D9; }
.pn-cl-a { align-self: flex-start; padding-left: 4px; }
.pn-cl-comp { position: absolute; left: 50%; bottom: 22px; width: min(84%, 640px); transform: translateX(-50%); box-sizing: border-box; padding: 12px 14px 8px; border: 1px solid #E5E2D9; border-radius: 20px; background: #fff; box-shadow: 0 2px 12px rgba(61,57,41,.07); transition: box-shadow .12s ease, border-color .12s ease; }
.pn-cl-comp.is-focus { border-color: #CFCABB; box-shadow: 0 6px 26px rgba(61,57,41,.11); }
.pn-cl-pc { margin-bottom: 8px; width: 46%; }
.pn-cl-pc .pn-paste { background: #FAF9F5; border-color: #E5E2D9; }
.pn-cl-in { position: relative; min-height: 26px; font-size: 15px; line-height: 1.5; color: #1F1E1D; }
.pn-cl-in.is-ph { color: #8B887E; }
.pn-cl-in.is-caret::after, .pn-cl-in.is-ph.is-caret::before { content: ""; display: inline-block; width: 1.5px; height: 1.15em; background: #1F1E1D; vertical-align: -.2em; animation: pn-blink 1s steps(1) infinite; }
.pn-cl-in.is-caret::after { margin-left: 1px; } .pn-cl-in.is-ph.is-caret::after { display: none; } .pn-cl-in.is-ph.is-caret::before { margin-right: -1.5px; }
.pn-cl-ph { display: none; position: absolute; left: 0; top: 0; color: #8B887E; pointer-events: none; white-space: nowrap; }
.pn-cl-comp.is-empty .pn-cl-ph { display: block; }
.pn-cl-tx .hw-caret { background: #1F1E1D; }
.pn-ln { margin: 0 0 6px; } .pn-ln:last-of-type { margin-bottom: 0; } .pn-ln b { font-weight: 700; }
.pn-cl-cb { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; color: #6B675B; font-size: 20px; line-height: 1; }
.pn-cl-cb em { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #D97757; font-style: normal; transition: background .12s ease; }
.pn-cl-cb em svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pn-cl-cb em.is-hover { background: #C15F3C; }
/* ChatGPT page of this pane: wrapping composer, plain-text generated prompt */
.pn-gp-in.pn-wrap { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
.pn-gpi .pn-gp-line { align-items: flex-end; }
.pn-u.pn-u2 { max-width: 88%; padding: 8px 13px; } .pn-u.pn-u2 > p { padding: 0; }
.pn-ga { position: relative; }
.pn-pre { white-space: pre-line; }
/* ---- Docs pane: Notion + HubSpot + Gmail in the Chrome window; After = the same Notion page with the summary streaming in. Reuses the Company wiki page look (.pn-pb-*, .pn-tb), the Email pane's chrome, pills, tray and cursor. ---- */
.pn-dn .pn-tb { border-bottom: 1px solid #EDEDEB; }
.pn-dn .pn-pb-th { padding: 30px 60px 28px; }
.pn-dn .pn-pb-bd h4 { margin-bottom: 14px; }
.pn-dn .pn-pb-bd h5 { margin: 4px 0 6px; }
.pn-dn .pn-pb-bd b { font-weight: 700; }
.pn-dn .pn-pb-bd p { margin: 0 0 8px; } .pn-dn .pn-pb-bd ul { margin: 0 0 4px; } .pn-dn .pn-pb-bd li { margin: 3px 0; }
.pn-d-bd { font-size: 15px; line-height: 1.55; }
.pn-d-bd { min-height: 118px; }
.pn-d-ln { min-height: 22px; margin: 0 0 2px; }
.pn-d-ln .hw-caret { margin-left: 1px; }
/* HubSpot deal record */
.pn-hs { background: #F5F8FA; color: #33475B; }
.pn-hs-top { background: #fff; border-bottom: 1px solid #DFE3EB; }
.pn-hs-s { flex: 1; min-width: 0; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 28px; margin: 0 auto 0 12px; padding: 0 12px; border-radius: 6px; background: #EAF0F6; color: #516F90; font-size: 12.5px; }
.pn-hs-s svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #516F90; stroke-width: 2; stroke-linecap: round; }
.pn-hs-av { background: #FF7A59; }
.pn-hs-bd { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 16px 24px 0; }
.pn-hs-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; margin-bottom: 14px; }
.pn-hs-hd small { flex-basis: 100%; margin-bottom: 4px; font-size: 12px; color: #0091AE; }
.pn-hs-hd b { font-size: 22px; line-height: 1.25; font-weight: 600; color: #2D3E50; }
.pn-hs-hd span { font-size: 13px; color: #516F90; }
.pn-hs-cols { display: flex; align-items: flex-start; gap: 16px; }
.pn-hs-card { background: #fff; border: 1px solid #DFE3EB; border-radius: 6px; padding: 12px 16px 8px; }
.pn-hs-cols > .pn-hs-card { flex: 0 0 310px; }
.pn-hs-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pn-hs-card h6 { margin: 0 0 6px; font-size: 14px; line-height: 1.3; font-weight: 600; color: #2D3E50; }
.pn-hs-r { display: flex; align-items: center; gap: 12px; height: 31px; border-top: 1px solid #EEF2F6; font-size: 13.5px; white-space: nowrap; }
.pn-hs-r .k { flex: none; width: 96px; color: #516F90; } .pn-hs-r .v { color: #2D3E50; font-weight: 500; }
.pn-hs-c { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.pn-hs-c i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #1A73E8; color: #fff; font: 500 13px/28px sans-serif; text-align: center; font-style: normal; }
.pn-hs-c i.a3 { background: #0B8043; } .pn-hs-c i.a4 { background: #E37400; }
.pn-hs-c span { line-height: 1.25; } .pn-hs-c b { display: block; font-size: 13.5px; font-weight: 600; color: #2D3E50; } .pn-hs-c small { font-size: 12px; color: #516F90; }
.pn-hs-card p { padding: 3px 0; font-size: 13px; line-height: 1.45; color: #516F90; }
.pn-gm-old { padding: 10px 0 !important; } .pn-gm-old .pn-gm-from { margin-bottom: 0; }
/* ---- Follow-ups pane: Granola notes + Gmail compose in the Chrome window; After = the hero Gmail compose. Reuses the shared window chrome, pills, tray and cursor. ---- */
.pn-body ul { margin: 0 0 7px; padding-left: 22px; } .pn-body li { margin: 0 0 2px; } .pn-body b { font-weight: 700; }
.pn-pane .hw-rcp i.a3 { background: #0B8043; }
/* Examples round 2: longer outputs, no scrolling. Rules scoped to each pane's own After output. */
#pn-f-body { font-size: 14.5px; line-height: 1.5; }
#pn-f-body p { margin-bottom: 5px; } #pn-f-body ul { margin-bottom: 5px; padding-left: 20px; } #pn-f-body li { margin-bottom: 1px; }
.pn-cl-tx .pn-ul { margin: 2px 0 8px; padding-left: 22px; } .pn-cl-tx .pn-ul li { margin: 0 0 3px; padding-left: 2px; } .pn-cl-tx .pn-ul li::marker { color: #6B6A63; }
#pn-i-aw .pn-cl-bd:has(.pn-cl-comp:not(.is-empty)) .pn-cl-hi { display: none; }
@media (max-width: 820px) {
  #pn-f-body { font-size: 12px; line-height: 1.4; padding: 10px 16px 0; }
  #pn-i-aw .pn-cl-in { font-size: 12px; line-height: 1.4; } #pn-i-aw .pn-ln { margin-bottom: 4px; } #pn-i-aw .pn-cl-tx .pn-ul { margin: 1px 0 5px; padding-left: 18px; } #pn-i-aw .pn-cl-tx .pn-ul li { margin-bottom: 2px; }
}
.pn-gr { background: #fff; color: #1F1E1B; }
.pn-gr-top { gap: 9px; border-bottom: 1px solid #ECEAE4; }
.pn-gr-top img { flex: none; width: 20px; height: 20px; border-radius: 5px; }
.pn-gr-bc { font-size: 12.5px; color: #8A877F; } .pn-gr-bc i { font-style: normal; color: #C4C1B9; margin: 0 3px; } .pn-gr-bc b { font-weight: 500; color: #1F1E1B; }
.pn-gr-sh { margin-left: auto; padding: 4px 11px; border-radius: 7px; background: #EEF5EF; font-size: 12.5px; font-weight: 500; color: #2C6B3F; }
.pn-gr-bd { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pn-gr-th { position: relative; padding: 26px 64px 30px; will-change: transform; }
.pn-gr-th h4 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.pn-gr-th h5 { margin: 18px 0 4px; font-size: 16.5px; line-height: 1.3; font-weight: 700; }
.pn-gr-th p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.pn-gr-th .pn-gr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px; font-size: 12.5px; color: #8A877F; }
.pn-gr-who { display: inline-flex; align-items: center; } .pn-gr-who i { width: 20px; height: 20px; margin-right: -4px; border-radius: 50%; border: 2px solid #fff; background: #0B8043; color: #fff; font: 600 10px/16px sans-serif; text-align: center; font-style: normal; } .pn-gr-who i.a2 { background: #7B5EA7; } .pn-gr-who i:last-of-type { margin-right: 8px; }
.pn-gr-th li.is-look { background: #E6F2E8; border-radius: 4px; box-shadow: -5px 0 0 #E6F2E8, 5px 0 0 #E6F2E8; }
.pn-gr-th ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.55; } .pn-gr-th li { margin: 0 0 2px; }
.pn-f-main { position: relative; flex: 1; min-height: 0; display: flex; background: #F6F8FC; overflow: hidden; }
.pn-f-rail { flex: none; width: 150px; padding: 12px 10px; font-size: 13px; color: #202124; }
.pn-f-rail span { display: flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; } .pn-f-rail span.on { background: #D3E3FD; } .pn-f-rail em { margin-left: auto; font-style: normal; font-size: 12px; }
.pn-f-rail .pn-f-cp { height: 40px; margin-bottom: 8px; padding: 0 16px; border-radius: 12px; background: #C2E7FF; font-weight: 500; }
.pn-f-list { flex: 1; min-width: 0; margin: 8px 8px 0 0; border-radius: 12px 12px 0 0; background: #fff; overflow: hidden; }
.pn-f-row { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid #EEF0F3; font-size: 12.5px; color: #5F6368; white-space: nowrap; }
.pn-f-row i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #1A73E8; color: #fff; font: 500 11px/22px sans-serif; text-align: center; font-style: normal; } .pn-f-row i.a3 { background: #0B8043; } .pn-f-row i.a4 { background: #E37400; } .pn-f-row i.a5 { background: #D93025; }
.pn-f-row b { flex: none; width: 96px; font-weight: 500; color: #202124; } .pn-f-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pn-f-row em { flex: none; font-style: normal; font-size: 12px; }
.pn-f-comp { position: absolute; right: 22px; top: 46px; bottom: 0; width: 500px; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 1px rgba(11,28,33,.1), 0 10px 32px -8px rgba(11,28,33,.4); }
.pn-f-ch { flex: none; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; border-radius: 12px 12px 0 0; background: #F2F6FC; font-size: 13px; color: #202124; } .pn-f-ch b { font-weight: 500; } .pn-f-ch span { color: #5F6368; }
.pn-f-cr { flex: none; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; border-bottom: 1px solid #EEF0F3; font-size: 13.5px; color: #202124; } .pn-f-cr .k { flex: none; width: 52px; color: #5F6368; }
.pn-f-cr .hw-rcp { height: 24px; font-size: 13px; } .pn-f-cr .hw-rcp i { width: 18px; height: 18px; font-size: 10px; line-height: 18px; }
.pn-f-cb { flex: 1; min-height: 0; overflow: hidden; padding: 12px 16px 0; font-size: 14px; line-height: 1.55; color: #202124; white-space: pre-wrap; word-break: break-word; }
.pn-f-cb .hw-caret { background: #202124; }
.pn-f-cb.is-hover { background: #FBFCFE; }
.pn-f-cf { flex: none; display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; } .pn-f-cf .hw-send { height: 32px; padding: 0 20px; font-size: 13px; } .pn-f-cf .hw-gi { width: 18px; height: 18px; }
@media (max-width: 820px) {
  .pn-gr-th { padding: 20px 22px 24px; } .pn-gr-th h4 { font-size: 25px; } .pn-gr-th p, .pn-gr-th ul { font-size: 13.5px; } .pn-gr-th h5 { font-size: 15px; margin-top: 14px; }
  .pn-f-rail { display: none; } .pn-f-list { margin: 8px 0 0; border-radius: 0; } .pn-f-row b { width: 82px; }
  .pn-f-comp { right: 12px; left: 12px; width: auto; } .pn-f-cb { font-size: 13px; }
  .pn-dn .pn-pb-th { padding: 22px 26px 16px; } .pn-dn .pn-pb-bd h4 { font-size: 24px; margin-bottom: 10px; }
  .pn-d-bd { min-height: 96px; font-size: 13.5px; line-height: 1.5; }
  .pn-hs-bd { padding: 14px 16px 0; } .pn-hs-side { display: none; } .pn-hs-cols > .pn-hs-card { flex: 1; }
  .pn-sk-side { width: 104px; padding: 8px 6px; font-size: 12px; }
  .pn-sk-ws { padding: 0 6px 8px; font-size: 13px; } .pn-sk-sec { padding: 8px 6px 2px; font-size: 11px; } .pn-sk-chn { padding: 0 6px; gap: 6px; }
  .pn-sk-head { height: 40px; padding: 0 12px; font-size: 13px; } .pn-sk-head span { display: none; }
  .pn-sk-msgs { padding: 10px 12px 8px; gap: 10px; } .pn-sk-m { gap: 8px; font-size: 12.5px; } .pn-sk-m .av { width: 30px; height: 30px; font: 700 13px/30px sans-serif; }
  .pn-sk-comp { margin: 0 12px 12px; } .pn-sk-in { padding: 9px 11px 3px; font-size: 12.5px; } .pn-sk-ph { left: 11px; top: 9px; }
  .pn-sk-r { padding: 7px 12px; font-size: 12.5px; }
  .pn-gl-r { gap: 10px; padding: 0 14px; font-size: 12px; } .pn-gl-r b { width: 78px; }
}
/* fallback scale steps (conservative) for engines without tan()/atan2(); the @supports rule below replaces them with the exact value */
@media (max-width: 1243px) { .pn-grid { --pn-s: .82; } }
@media (max-width: 1099px) { .pn-grid { --pn-s: .74; } }
@media (max-width: 999px) { .pn-grid { --pn-s: .66; } }
@media (max-width: 899px) { .pn-grid { --pn-s: .6; } }
@media (max-width: 820px) {
  /* narrow: both windows share one cell and only the active one shows (crossfade); windows are built narrower and taller */
  .pn-stage { padding: 60px 12px 46px; }
  .pn-grid { --nw: 480; --wh: 470; --fw: 1; --ex: 44px; --pn-s: 1; }
  .pn-gmw .hw-gm-body { font-size: 13px; line-height: 1.5; padding: 12px 18px 0; }
  .pn-gmw .hw-gm-meta > div { padding: 0 18px; }
  .pn-gm-th { padding: 14px 18px 22px; } .pn-gm-text { padding-left: 0; }
  .pn-chat { font-size: 13px; } .pn-gp-in { font-size: 13px; }
  .pn-cl-hi { font-size: 25px; top: 12%; } .pn-cl-chat { padding: 18px 16px 0; font-size: 13px; } .pn-cl-u { width: 62%; } .pn-cl-in { font-size: 13.5px; } .pn-cl-comp { width: auto; left: 16px; right: 16px; bottom: 16px; transform: none; padding: 10px 12px 7px; }
  .pn-pb-bd h4 { font-size: 28px; } .pn-pb-bd h5 { font-size: 16px; } .pn-pb-bd p { font-size: 13.5px; }
  .pn-label { font-size: 24px; }
  .pn-col-b, .pn-stage.is-before .pn-pane.is-on .pn-col-a { transform-origin: 50% 0; transform: scale(.94); opacity: 0; filter: blur(4px); pointer-events: none; }
  .pn-stage.is-before .pn-pane.is-on .pn-col-b, .pn-col-a { transform: none; opacity: 1; filter: blur(0); pointer-events: auto; }
  .pn-sc .hw-chips { right: auto; left: 0; width: 100%; top: calc(100% + 12px); bottom: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; clip-path: none; }
  .pn-sc .hw-chip { transform: translateY(-8px); }
  .pn-sc .hw-chip.is-in { transform: none; }
  .pn-gp-box { width: auto; margin: 6px 16px 14px; }
  .pn-chat { padding-left: 16px; padding-right: 16px; }
  .pn-pb-th { padding: 26px 34px 30px; } .pn-pb-bd ul { font-size: 13.5px; }
}
@media (max-width: 599px) { .pn-grid { --pn-s: .9; } }
@media (max-width: 499px) { .pn-grid { --pn-s: .8; } }
@media (max-width: 439px) { .pn-grid { --pn-s: .67; } }
@media (max-width: 379px) { .pn-grid { --pn-s: .55; } }
@supports (width: calc(tan(atan2(1cqw, 1px)) * 1px)) { .pn-grid { --pn-s: min(1, tan(atan2(calc(var(--fw) * 100cqw), calc(var(--nw) * 1px)))); } }
@media (prefers-reduced-motion: reduce) { .pn-flame, .pn-smoke { animation: none !important; } .pn-pane, .pn-pane.is-on, .vb-tab { transition: none; } .pn-col, .pn-label span { transition: none; } .pn-th i { animation: none; } .pn-gp-in.is-caret::after, .pn-gp-in.is-caret::before, .pn-cl-in.is-caret::after, .pn-cl-in.is-caret::before, .pn-sk-in.is-caret::after, .pn-sk-in.is-caret::before, .pn-sk-s.is-focus .pn-t2::after, .pn-gm-s.is-focus .pn-t2::after { animation: none; } }

/* ---------- 7. WORKS EVERYWHERE MARQUEE ---------- */
.vb-marq { margin-top: 52px; display: grid; gap: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vb-row { display: flex; width: max-content; animation: vb-scroll 54s linear infinite;   /* 12 apps per set, ~35.7px/s */ }
.vb-row.rev { animation-direction: reverse; animation-duration: 58s; }   /* 11 different apps, ~30.9px/s */
.vb-marq:hover .vb-row, .vb-marq:focus-within .vb-row { animation-play-state: paused; }
.vb-set { display: flex; gap: 14px; padding-right: 14px; }
@keyframes vb-scroll { to { transform: translateX(-50%); } }
.vb-app {
  display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px 0 16px; border-radius: 18px; background: #fff; white-space: nowrap;
  font-weight: 600; font-size: 17px; letter-spacing: -.01em; box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 12px 24px -18px rgba(11,28,33,.35);
}
.vb-app img, .vb-app svg { width: 30px; height: 30px; object-fit: contain; flex: none; }

/* ---------- 8. WALL OF LOVE: every quote visible in full-width masonry columns (5 / 4 / 3 / 2 / 1 by width), soft fade at the top and bottom (decorative; text near the edges stays readable) ---------- */
.vb-love { margin: 28px 0 0; padding: 24px var(--vb-gut) 50px; column-count: 5; column-gap: 20px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 90px), transparent 100%); }   /* full viewport width: only the page gutter at each side */
.vb-love { scroll-margin-top: 110px; }   /* "Show fewer quotes" scrolls the wall back under the fixed nav */
.vb-love.is-capped { max-height: 1500px; overflow: hidden; }
.vb-love-more { display: block; margin: 4px auto 0; height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(11,28,33,.2); background: #fff; color: var(--text); font: 500 16px 'Outfit', sans-serif; letter-spacing: -.005em; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.vb-love-more[hidden] { display: none; }
.vb-love-more:hover { border-color: rgba(11,28,33,.45); background: #F6FAFB; }
.vb-love-more:focus-visible { outline: 2px solid #006CE0; outline-offset: 3px; }
.vb-q { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; width: 100%; box-sizing: border-box; background: #fff; border-radius: 20px; padding: clamp(22px, 1.9vw, 30px) clamp(22px, 1.9vw, 30px) clamp(20px, 1.7vw, 26px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; box-shadow: 0 0 0 1px rgba(11,28,33,.05), 0 18px 40px -30px rgba(11,28,33,.3); margin: 0 0 20px; }
.vb-q-co { height: 34px; display: flex; align-items: center; margin-bottom: 20px; }
.vb-q-co img { height: 26px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.vb-q blockquote { margin: 0; font-size: clamp(17px, 1.1vw, 21px); line-height: 1.45; letter-spacing: -.012em; font-weight: 500; color: var(--text); text-wrap: pretty; }
.vb-q figcaption { display: flex; align-items: center; gap: 12px; }
.vb-q figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.vb-q .nm { font-weight: 600; font-size: 15.5px; display: block; }
.vb-q .rl { font-size: 13.5px; color: var(--text-2); line-height: 1.35; display: block; }
@media (max-width: 1699px) { .vb-love { column-count: 4; } }
@media (max-width: 1199px) { .vb-love { column-count: 3; } }
@media (max-width: 899px) { .vb-love { column-count: 2; } }
@media (max-width: 599px) { .vb-love { column-count: auto; } }   /* one column = plain block flow: a max-height on a multicol box would spill extra columns sideways */
/* Moving wall: JS adds .is-moving (two horizontal rows, endless loops). Without JS, or with reduced motion, the static masonry wall above stays as is.
   Every card is the same size: width here, height = --vb-love-h (the tallest card, measured in site.js). The wall is the full screen width and
   fades out only at the left and right screen edges. */
.vb-love.is-moving { display: flex; flex-direction: column; gap: 20px; column-count: auto; padding: 6px 0 26px; overflow: hidden; overflow: clip; box-sizing: border-box;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%); }
.vb-lane { flex: none; }
.vb-lane-track { display: flex; align-items: flex-start; width: max-content; will-change: transform; }
.vb-love.is-moving .vb-q { flex: 0 0 372px; width: 372px; height: var(--vb-love-h, auto); margin: 0 20px 0 0; }   /* name and role stay at the bottom: the card is a flex column with space-between */
.vb-love.is-moving .vb-q { padding: 22px 24px 20px; gap: 17px; border-radius: 20px; }   /* compact cards, about 20% larger than the first 2-row version */
.vb-love.is-moving .vb-q-co { height: 26px; margin-bottom: 12px; }
.vb-love.is-moving .vb-q-co img { height: 24px; max-width: 144px; }
.vb-love.is-moving .vb-q blockquote { font-size: 17px; line-height: 1.4; }
.vb-love.is-moving .vb-q blockquote p { margin: 0; }   /* the default p margins added ~19px of empty space to every card */
.vb-love.is-moving .vb-q figcaption { gap: 12px; }
.vb-love.is-moving .vb-q figcaption img { width: 44px; height: 44px; }
.vb-love.is-moving .vb-q .nm { font-size: 16px; }
.vb-love.is-moving .vb-q .rl { font-size: 14px; }
@media (max-width: 599px) {
  .vb-love.is-moving { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
  .vb-love.is-moving .vb-q { flex-basis: 310px; width: 310px; }
}

/* ---------- 9. TRUST AND SECURITY: heading left, badges right ---------- */
.vb-trust { margin-top: 88px; scroll-margin-top: 120px; }   /* nav "Security" link: heading clears the fixed nav */
.vb-trust-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.vb-trust-copy .vb-h2 { text-align: left; margin: 0; }
.vb-trust-copy p { margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); }
.vb-trust-marks { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 48px; }
.vb-trust-marks li { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 15.5px; line-height: 1.35; color: var(--text-2); }
.vb-trust-marks img { width: auto; height: 132px; }

/* ---------- 10. CLOSING CTA ---------- */
.vb-close { padding: 112px 0 112px; }
.vb-close-stage { padding: 88px 32px 80px; text-align: center; }
.vb-close .vb-h2 { max-width: 760px; }
.vb-close .vb-lede { max-width: 520px; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .vb-nav-dl { margin-left: 0; }
  .nav-links { background: #fff; }   /* phone menu: solid, so the hero text does not show through */
  .vb-trust-row { flex-direction: column; text-align: center; }
  .vb-trust-copy .vb-h2 { text-align: center; }
}
@media (max-width: 440px) {
  .vb-nav-for, .vb-nav-dl .vb-apple { display: none; }
}
@media (max-width: 700px) {
  :root { --vb-gut: 16px; }
  .vb-mob { display: inline; }
  .vb-sec { padding-top: 80px; }
  .vb-stage { border-radius: 22px; }
  .vb-cta-row .btn-cta { width: 100%; justify-content: center; max-width: 360px; }
  .hw-inner { padding: 44px 14px 22px; }
  .hw-card { border-radius: 22px; }
  .hw-sub { margin-top: 14px; }
  .hw-eyebrow { display: block; font-size: 10.5px; line-height: 1.7; letter-spacing: .1em; margin-bottom: 14px; }
  .hw-eyebrow::before, .hw-eyebrow::after { display: inline-block; vertical-align: middle; margin: 0 8px 2px; }
  .hw-card .vb-cta-row { margin-top: 22px; }
  .hw-micro { font-size: 10px; letter-spacing: .05em; margin-top: 14px; }
  .hw-sep { margin: 0 .45em; }
  .hw-stagebox { margin-top: 30px; }
  .hw-stagebox.has-pill { margin-top: 38px; }
  .hw-pill { --ph: 38px; width: 88%; }
  .hw-pill-in { gap: 9px; padding: 0 14px 0 10px; }
  .hw-pill-tx { font-size: 11.5px; }
  .hw-pill-st { min-width: 14px; font-size: 12px; letter-spacing: 0; }   /* phones: bars or pencil say what is happening; only the check shows when done */
  .hw-pill[data-st="listen"] .hw-pill-st::after, .hw-pill[data-st="type"] .hw-pill-st::after, .hw-pill[data-st="work"][data-k] .hw-pill-st::after { content: none; }
  .hw-pill[data-st="done"] .hw-pill-st::before { margin-right: 0; }
  .hw-pill[data-st="done"][data-k] .hw-pill-st::after { content: none; }
  .hw-tray { margin-top: 12px; }
  .hw-fn em { display: none; }
  .hw-fn kbd { height: 24px; min-width: 30px; font-size: 12px; }
  .hw-bar-body { font-size: 13px; }
  .hw-cap { bottom: 38px; font-size: 13.5px; padding: 7px 12px; }
  .hw-chip { font-size: 11.5px; }
  .hw-dock { --dk: 40px; gap: 8px; margin-top: 22px; padding: 7px 9px 3px; border-radius: 18px; }
  .hw-dk { height: calc(var(--dk) + 8px); }
  .vb-logos { padding-top: 60px; }
  .vb-logos .vb-eyebrow { font-size: 11px; letter-spacing: .1em; gap: 8px; margin-bottom: 46px; }
  .vb-logos + .vb-sec { padding-top: 104px; }
  .vb-lset { gap: 40px; padding-right: 40px; }
  .vb-logos img.lg-wide { height: 24px; }
  .vb-logos img.lg-tall { height: 40px; }
  .vb-logos img { height: 28px; max-width: 152px; }
  .vb-app { height: 54px; font-size: 15px; padding: 0 18px 0 12px; border-radius: 15px; }
  .vb-app img, .vb-app svg { width: 26px; height: 26px; }
  .vb-trust { margin-top: 72px; }
  .vb-trust-marks { gap: 28px; }
  .vb-trust-marks img { height: 100px; }
  .vb-close { padding: 80px 0; }
  .vb-close-stage { padding: 56px 20px 52px; }
}

/* ---------- reduced motion: final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .vb-row { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .vb-row .vb-set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .vb-row .vb-set[aria-hidden="true"] { display: none; }   /* each row has its own apps, so both rows show */
  .vb-marq { -webkit-mask-image: none; mask-image: none; }
  .vb-lmarq { -webkit-mask-image: none; mask-image: none; }
  .vb-ltrack { animation: none; width: auto; }
  .vb-lset { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: 20px; padding-right: 0; }
  .vb-lset[aria-hidden="true"] { display: none; }
  .hw-chip, .hw-dk-m, .hw-wg, .hw-ty, .hw-ty *, .hw-wsend, .hw-rest, .hw-mark, .hw-bars, .hw-bars i, .hw-cap { transition: none !important; }
  .hw-pill { display: none !important; }
  .hw-caret, .hw-bars i { animation: none !important; }
  .hw-bars i { height: var(--p, 4px); }
}