/* ===========================================================================
   OmniSnap AI Studio — marketing site
   Tokens are lifted from the extension's own design system so the site and
   the product cannot drift apart.

   No third-party stylesheet, font or script is loaded anywhere on this site.
   A product whose entire claim is "nothing leaves your machine" should not
   open a connection to someone else's server to render its own homepage.
   =========================================================================== */

:root {
  --accent: #6366f1;
  --accent-soft: #818cf8;
  --accent-deep: #4f46e5;
  --emerald: #10b981;
  --emerald-soft: #34d399;
  --amber: #f59e0b;
  --rose: #f43f5e;
  /* The 400-step partner to --rose, matching how --accent-soft and
     --emerald-soft pair with their 500s. Needed because --rose on a raised
     surface falls under 4.5:1 at small sizes. */
  --rose-soft: #fb7185;
  --violet: #8b5cf6;
  /* Buy Me a Coffee's own brand colours, taken from their live button rather
     than guessed: #ffdd00 on #0d0c22. Not an arbitrary pick; using the
     platform's palette is what makes the button recognisable as that button. */
  --coffee: #ffdd00;
  --coffee-ink: #0d0c22;

  --obsidian: #0b0f17;
  --surface: #161e2e;
  --surface-2: #1c2638;
  --surface-3: #243049;
  --line: rgba(148, 163, 184, 0.14);
  --line-strong: rgba(148, 163, 184, 0.26);

  --text: #e8edf7;
  --text-dim: #9aa8c0;
  --text-faint: #7c8ba6;

  --glass: rgba(22, 30, 46, 0.62);
  --glass-strong: rgba(11, 15, 23, 0.86);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-3: 0 22px 56px rgba(0, 0, 0, 0.52);

  --font: 'Inter var', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* One rhythm for page gutters and section spacing, so every breakpoint
     stays in step without per-section media queries. */
  --gutter: clamp(22px, 5vw, 40px);
  --section: clamp(54px, 9vw, 128px);
  --measure: 1180px;

  color-scheme: dark;
}

/* ───────────────────────── reset ───────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchored sections must not land under the sticky header. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: overflow-x: hidden silently promotes overflow-y to
     auto, which turns body into a scroll container. Nothing here needs to
     scroll sideways — the only horizontal overflow is the decorative aurora
     and the code blocks' own scrollers. */
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-soft);
  text-decoration-color: rgba(129, 140, 248, 0.4);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--text);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.16;
  letter-spacing: -0.022em;
  font-weight: 650;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(99, 102, 241, 0.38);
  color: #fff;
}

/* Fixed, not absolute. An absolutely-positioned skip link resolves `top`
   against the document, so focusing it part-way down a long page parked it
   thousands of pixels above the viewport — invisible exactly when a keyboard
   user needs it. Fixed resolves against the viewport, which is the point. */
.skip {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--accent-deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-spring);
}

.skip:focus {
  top: 12px;
}

.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

.dim {
  color: var(--text-dim);
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ───────────────────────── atmosphere ───────────────────────── */

/* The same aurora the Studio uses, pinned behind everything. It is
   decorative, so it is hidden from assistive tech and stilled for anyone who
   asks for less motion. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  animation: drift 24s var(--ease-in-out, ease-in-out) infinite alternate;
}

.aurora i:nth-child(1) {
  width: 46vw;
  height: 46vw;
  min-width: 320px;
  min-height: 320px;
  top: -14vw;
  left: -8vw;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.62), transparent 68%);
}

.aurora i:nth-child(2) {
  width: 40vw;
  height: 40vw;
  min-width: 280px;
  min-height: 280px;
  top: 22vh;
  right: -12vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.44), transparent 68%);
  animation-delay: -8s;
}

.aurora i:nth-child(3) {
  width: 38vw;
  height: 38vw;
  min-width: 260px;
  min-height: 260px;
  bottom: -14vw;
  left: 28vw;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 70%);
  animation-delay: -15s;
}

@keyframes drift {
  to {
    transform: translate3d(5vw, 4vh, 0) scale(1.12);
  }
}

/* A faint grain breaks up the large flat gradients, which otherwise band on
   wide displays. Built from an inline SVG so it costs no request. */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");
}

/* ───────────────────────── header ───────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(11, 15, 23, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.header[data-stuck='true'] {
  border-bottom-color: var(--line);
  background: rgba(11, 15, 23, 0.9);
}

.header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

@media (pointer: coarse) {
  .brand {
    padding-block: 8px;
  }
}

.brand span {
  font-size: 15.5px;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Scoped off .btn: a bare `.nav a` rule outranks `.btn-primary` on
   specificity, which left the header's call to action with dim grey text on
   a saturated gradient. */
.nav a:not(.btn) {
  padding: 8px 13px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current='page'] {
  color: var(--text);
  background: rgba(148, 163, 184, 0.1);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle svg {
  margin-inline: auto;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px var(--gutter) 18px;
    /* Solid, not glass. The header above already owns a backdrop-filter, and
       a nested one does not compose against the page behind it — the panel
       stayed translucent and the hero text read straight through the menu. */
    background: var(--obsidian);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-3);
  }

  .nav[hidden] {
    display: none;
  }

  .nav a:not(.btn) {
    padding: 12px 14px;
    font-size: 16px;
  }

  .nav .btn {
    margin-top: 8px;
    justify-content: center;
  }
}

/* ───────────────────────── buttons ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.btn:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.38);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  color: #fff;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.46);
}

.btn-lg {
  padding: 15px 26px;
  font-size: 16px;
}

/* Pointer-coarse rather than a width query: a small tablet and a large phone
   both need a thumb-sized target, and neither is reliably identified by its
   viewport width. 44px is the documented minimum for a touch target. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }

  .btn-lg {
    min-height: 50px;
  }
}

/* ───────────────────────── sections ───────────────────────── */

section {
  position: relative;
  padding-block: var(--section);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(99, 102, 241, 0.09);
  color: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.section-head {
  max-width: 700px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-head h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  margin-bottom: 16px;
}

.section-head p {
  font-size: clamp(16px, 2vw, 18.5px);
  color: var(--text-dim);
}

.center {
  margin-inline: auto;
  text-align: center;
}

/* ───────────────────────── hero ───────────────────────── */

.hero {
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(48px, 7vw, 88px);
  text-align: center;
}

.hero h1 {
  max-width: 17ch;
  margin-inline: auto;
  font-size: clamp(36px, 7.4vw, 70px);
  letter-spacing: -0.035em;
}

.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent-soft), var(--violet) 46%, var(--emerald-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede {
  max-width: 62ch;
  margin: 22px auto 0;
  font-size: clamp(16.5px, 2.3vw, 20px);
  color: var(--text-dim);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--text-faint);
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-trust svg {
  color: var(--emerald);
  flex: none;
}

/* ── the product shot, drawn rather than photographed ──
   A screenshot would go stale the moment the Studio changes, and this has to
   look right at 360px as well as 1440. */

.shot {
  position: relative;
  max-width: 1020px;
  margin: clamp(44px, 7vw, 76px) auto 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), var(--obsidian));
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(99, 102, 241, 0.14);
  overflow: hidden;
}

.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(11, 15, 23, 0.72));
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 15, 23, 0.6);
}

.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-3);
}

.shot-bar i:nth-child(1) {
  background: #ff5f57;
}
.shot-bar i:nth-child(2) {
  background: #febc2e;
}
.shot-bar i:nth-child(3) {
  background: #28c840;
}

.shot-url {
  flex: 1;
  margin-left: 10px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shot-body {
  display: grid;
  grid-template-columns: 52px 1fr 232px;
  min-height: 390px;
}

.shot-rail {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px 0;
  border-right: 1px solid var(--line);
  justify-items: center;
}

.shot-rail b {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.shot-rail b.on {
  background: var(--accent-deep);
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.5);
}

.shot-stage {
  display: grid;
  place-items: center;
  padding: 26px;
  background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.12), transparent 62%);
}

.shot-plate {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--accent-soft), var(--violet) 50%, var(--emerald-soft));
  box-shadow: var(--shadow-3);
  transform: perspective(1400px) rotateX(6deg) rotateY(-11deg) rotateZ(1deg);
}

.shot-panel {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 16px 14px;
  border-left: 1px solid var(--line);
  background: rgba(11, 15, 23, 0.4);
}

.shot-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.shot-tabs em {
  padding: 4px 9px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
}

.shot-tabs em.on {
  background: rgba(99, 102, 241, 0.2);
  color: var(--accent-soft);
}

.shot-card {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.shot-card strong {
  font-size: 12px;
  line-height: 1.35;
}

.shot-card span {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}

.shot-card span:nth-of-type(2) {
  width: 78%;
}

.shot-card span:nth-of-type(3) {
  width: 56%;
}

.shot-sev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rose-soft);
  font-family: var(--mono);
  font-size: 10.5px;
}

.shot-sev i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

@media (max-width: 760px) {
  .shot-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .shot-rail {
    display: flex;
    justify-content: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .shot-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .shot-plate {
    transform: none;
    max-width: 240px;
  }
}

/* ───────────────────────── audience split ───────────────────────── */

.roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.role {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.role::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--role, var(--accent));
}

.role h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.role p {
  color: var(--text-dim);
  font-size: 15px;
}

.role ul {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 14.5px;
  color: var(--text-dim);
}

.role li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.role li svg {
  flex: none;
  margin-top: 4px;
  color: var(--role, var(--accent));
}

/* ───────────────────────── feature grid ───────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 16px;
}

.feature {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.feature:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: rgba(28, 38, 56, 0.72);
}

.feature-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: rgba(99, 102, 241, 0.14);
  color: var(--accent-soft);
}

.feature h3 {
  margin-bottom: 9px;
  font-size: 17.5px;
}

.feature p {
  color: var(--text-dim);
  font-size: 14.8px;
}

/* ───────────────────────── split feature ───────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.split-copy h2 {
  font-size: clamp(26px, 3.8vw, 38px);
  margin-bottom: 16px;
}

.split-copy p {
  color: var(--text-dim);
  font-size: 16.5px;
}

.split-copy ul {
  margin-top: 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.split-copy li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 15.3px;
}

.split-copy li svg {
  flex: none;
  margin-top: 4px;
  color: var(--emerald);
}

.split-copy li b {
  color: var(--text);
  font-weight: 600;
}

/* A framed code/output sample that sits beside the copy. */
.sample {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.sample header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(22, 30, 46, 0.6);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.sample header .tag {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(16, 185, 129, 0.14);
  color: var(--emerald-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
}

.sample pre {
  margin: 0;
  padding: 16px 15px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.4px;
  line-height: 1.72;
  color: var(--text-dim);
  -webkit-overflow-scrolling: touch;
}

.sample pre b {
  color: var(--text);
  font-weight: 600;
}

.sample pre i {
  color: var(--accent-soft);
  font-style: normal;
}

.sample pre u {
  color: var(--emerald-soft);
  text-decoration: none;
}

.sample pre s {
  color: var(--text-faint);
  text-decoration: none;
}

/* A code sample scrolls inside its own box rather than stretching the page,
   but on a phone that means scrolling nearly every line. A smaller step fits
   most of them outright. */
@media (max-width: 560px) {
  .sample pre {
    padding: 14px 13px;
    font-size: 11px;
    line-height: 1.68;
  }
}

/* ───────────────────────── support the build ───────────────────────── */

/* Cookie is the script face Buy Me a Coffee sets their own button in. It is
   served from this origin, not from Google Fonts: the site promises in
   writing that it loads nothing from third parties, and an exception for one
   button would make that claim false. Licensed under the SIL OFL, which the
   accompanying assets/fonts/cookie-OFL.txt satisfies.

   `swap` so the label is readable in the site face from the first paint; a
   14 KB font must never be the thing standing between a reader and a call to
   action. */
@font-face {
  font-family: 'Cookie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cookie-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.coffee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255, 221, 0, 0.09), rgba(99, 102, 241, 0.07) 62%);
  box-shadow: var(--shadow-2);
}

.coffee-copy {
  min-width: 0;
}

.coffee-copy h2 {
  margin-bottom: 14px;
  font-size: clamp(25px, 3.6vw, 36px);
}

.coffee-copy p {
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 16.2px;
}

.coffee-copy p + p {
  margin-top: 13px;
}

.coffee-copy .btn {
  margin-top: 24px;
}

.coffee-note {
  margin-top: 14px;
  font-size: 13.2px;
  color: var(--text-faint);
}

/* Built to match the official button: flat #ffdd00, ink-dark mark and label,
   the cup on the left, and the wordmark set in Cookie. Flat rather than the
   gradient used elsewhere on this site, because theirs is flat and the point
   is that it reads as their button. */
.btn-coffee {
  gap: 11px;
  padding: 11px 22px 11px 18px;
  background: var(--coffee);
  border-color: transparent;
  color: var(--coffee-ink);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(255, 221, 0, 0.22);
}

.btn-coffee:hover {
  background: #ffe53d;
  color: var(--coffee-ink);
  box-shadow: 0 10px 28px rgba(255, 221, 0, 0.32);
}

.btn-coffee .bmc-cup {
  flex: none;
  color: var(--coffee-ink);
}

.bmc-label {
  font-family: 'Cookie', 'Brush Script MT', cursive;
  font-size: 1.62em;
  font-weight: 400;
  /* Cookie sits high in its box and has a long descender, so it needs
     nudging back onto the button's optical centre. */
  line-height: 1;
  padding-top: 0.14em;
  letter-spacing: 0.01em;
}

.btn-coffee-ghost {
  gap: 10px;
  border-color: rgba(255, 221, 0, 0.45);
  color: var(--coffee);
}

.btn-coffee-ghost:hover {
  background: rgba(255, 221, 0, 0.1);
  border-color: var(--coffee);
  color: var(--coffee);
}

/* A cup drawn in CSS rather than shipped as an image — it costs no request
   and stays crisp at any size. Decorative, so it is hidden from assistive
   tech by the markup. */
.coffee-aside {
  display: grid;
  place-items: center;
  width: 170px;
}

/* The same cup as the button, drawn once and used at two sizes. A second,
   different cup beside the first is the kind of inconsistency that makes a
   page feel assembled rather than designed. */
.coffee-mark {
  position: relative;
  color: var(--coffee);
}

.coffee-mark svg {
  width: 112px;
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(255, 221, 0, 0.22));
}

.steam {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  translate: -50% 0;
  display: flex;
  gap: 13px;
}

.steam i {
  width: 4px;
  height: 26px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, transparent, rgba(255, 221, 0, 0.55));
  opacity: 0;
  animation: steam 3.1s var(--ease-in-out, ease-in-out) infinite;
}

.steam i:nth-child(2) {
  animation-delay: 0.6s;
}

.steam i:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes steam {
  0% {
    opacity: 0;
    transform: translateY(8px) scaleY(0.7);
  }
  35% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scaleY(1.3);
  }
}

@media (max-width: 720px) {
  .coffee {
    grid-template-columns: 1fr;
  }

  .coffee-aside {
    display: none;
  }
}

/* ───────────────────────── scroll progress ───────────────────────── */

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--violet) 55%, var(--emerald-soft));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.header[data-stuck='true'] .progress {
  opacity: 1;
}

/* ───────────────────────── back to top ───────────────────────── */

.totop {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring),
    background var(--dur-fast) var(--ease-out);
}

.totop[data-show='true'] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.totop:hover {
  background: var(--surface-3);
}

/* ───────────────────────── cursor spotlight ───────────────────────── */

/* A soft light follows the pointer across a card. The position arrives as
   two custom properties, so the browser repaints a gradient and never
   recalculates layout. */
.feature,
.role {
  position: relative;
  isolation: isolate;
}

.feature::after,
.role::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(129, 140, 248, 0.16),
    transparent 72%
  );
  transition: opacity var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .feature:hover::after,
  .role:hover::after {
    opacity: 1;
  }
}

/* ───────────────────────── privacy band ───────────────────────── */

.band {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), transparent 60%);
}

.pledge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.pledge div {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(11, 15, 23, 0.5);
}

.pledge h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 16px;
}

.pledge h3 svg {
  color: var(--emerald);
  flex: none;
}

.pledge p {
  font-size: 14.5px;
  color: var(--text-dim);
}

/* ───────────────────────── tables ───────────────────────── */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.6px;
}

caption {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 13.5px;
  text-align: left;
}

th,
td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody th {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-soft);
  white-space: nowrap;
}

td {
  color: var(--text-dim);
}

.yes,
.no {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  white-space: nowrap;
}

.no {
  color: var(--emerald-soft);
}

.yes {
  color: var(--amber);
}

/* ───────────────────────── FAQ ───────────────────────── */

.faq {
  display: grid;
  gap: 10px;
  max-width: 820px;
}

details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}

details[open] {
  border-color: var(--line-strong);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease-spring);
}

details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

details p {
  padding: 0 20px 18px;
  color: var(--text-dim);
  font-size: 15.2px;
}

/* ───────────────────────── CTA ───────────────────────── */

.cta {
  text-align: center;
}

.cta-box {
  padding: clamp(40px, 7vw, 72px) var(--gutter);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, rgba(99, 102, 241, 0.16), rgba(16, 185, 129, 0.08));
  box-shadow: var(--shadow-2);
}

.cta-box h2 {
  font-size: clamp(27px, 4.4vw, 42px);
  margin-bottom: 16px;
}

.cta-box p {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--text-dim);
  font-size: 17px;
}

/* ───────────────────────── legal pages ───────────────────────── */

.doc {
  max-width: 820px;
  padding-top: clamp(44px, 7vw, 76px);
}

.doc-head {
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.doc-head h1 {
  font-size: clamp(30px, 5vw, 46px);
  margin-bottom: 14px;
}

.doc-head p {
  color: var(--text-dim);
  font-size: 16.5px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}

.doc h2 {
  margin-top: 46px;
  margin-bottom: 14px;
  font-size: clamp(21px, 3vw, 27px);
  scroll-margin-top: 92px;
}

.doc h3 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 17.5px;
}

.doc p,
.doc li {
  color: var(--text-dim);
  font-size: 16px;
}

.doc p + p {
  margin-top: 15px;
}

.doc ul,
.doc ol {
  margin-top: 14px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.doc strong {
  color: var(--text);
  font-weight: 600;
}

.doc code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--accent-soft);
  font-family: var(--mono);
  font-size: 0.88em;
}

.doc .table-scroll,
.doc .callout {
  margin-top: 22px;
}

.callout {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--emerald);
  border-radius: var(--r-md);
  background: rgba(16, 185, 129, 0.06);
}

.callout.warn {
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, 0.06);
}

.callout p {
  font-size: 15.3px;
}

.toc {
  padding: 20px 22px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass);
}

.toc h2 {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 15px;
}

/* ───────────────────────── footer ───────────────────────── */

.footer {
  padding-block: clamp(44px, 6vw, 68px) 32px;
  border-top: 1px solid var(--line);
  background: rgba(11, 15, 23, 0.6);
}

.footer-grid {
  display: grid;
  /* minmax(0, …) on every track. A 220px floor cannot shrink, so on a phone
     the grid overflowed its own container and clipped the longest link in
     each column off the right edge. */
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 36px 28px;
}

@media (max-width: 680px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }

  /* The blurb reads badly in a half-width column; the link lists do not. */
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Two columns still fit a 375px phone once the tracks can shrink; only the
   very narrow ones (320px and below) need to stack. */
@media (max-width: 359px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-brand p {
  margin-top: 14px;
  max-width: 34ch;
  color: var(--text-faint);
  font-size: 14.2px;
}

/* h3, not h4: these follow an h2 in the page above, and jumping a level
   breaks heading navigation for screen-reader users. */
.footer h3 {
  margin-bottom: 14px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer ul a {
  display: inline-block;
  color: var(--text-dim);
  font-size: 14.6px;
  text-decoration: none;
}

@media (pointer: coarse) {
  .footer ul {
    gap: 2px;
  }

  /* Block rather than inline-block, so a short label like "FAQ" still gives
     a target the width of the column instead of the width of three letters. */
  .footer ul a {
    display: block;
    padding-block: 11px;
  }
}

.footer ul a:hover {
  color: var(--text);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 13.4px;
}

/* ───────────────────────── motion ───────────────────────── */

/* Everything below animates transform and opacity only. Those are the two
   properties a browser can composite without re-running layout or paint, so
   the page still scrolls at full rate on a laptop doing something else. */

/* ── hero entrance ──
   The hero uses the same .reveal mechanism as everything else rather than a
   keyframe animation of its own. A keyframe with `fill: both` holds its
   `from` state until the animation clock advances, so anything that stops it
   advancing — a backgrounded tab, a throttled renderer — leaves the headline
   at opacity 0. Above-the-fold copy must never depend on an animation
   running in order to be readable. The reveal path is JS-gated and carries a
   timeout that forces everything visible, so the worst case is no animation
   rather than no page. */

/* The gradient drifts slowly across the word rather than sitting still.
   Safe to keep as a keyframe: it animates background-position only, so a
   stalled clock costs the drift, never the text. */
.hero h1 .grad {
  background-size: 220% 100%;
  animation: sweep 9s var(--ease-in-out, ease-in-out) infinite alternate;
}

@keyframes sweep {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* The aurora drifts with the scroll as well as on its own timer, which stops
   the background feeling painted-on while the content moves over it. The
   offset is written by script to a custom property, so the browser only ever
   sees a transform. */
.aurora {
  transform: translate3d(0, calc(var(--drift, 0) * 1px), 0);
  will-change: transform;
}

/* The product shot lifts very slightly as it settles. */
.shot {
  transition: transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (min-width: 861px) {
  .shot:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3), 0 0 0 1px rgba(99, 102, 241, 0.26);
  }
}

/* Feature icons answer the card's hover rather than sitting inert. */
.feature-ico {
  transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.feature:hover .feature-ico {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(99, 102, 241, 0.22);
  color: #fff;
}

.role {
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .role:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
  }
}

/* The accent rule across the top of a role card draws itself in. */
.role::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.reveal-ready .role.in::before,
html:not(.reveal-ready) .role::before {
  transform: scaleX(1);
}

/* FAQ rows answer the pointer. */
summary {
  transition: background var(--dur-fast) var(--ease-out);
}

summary:hover {
  background: rgba(148, 163, 184, 0.06);
}

/* ───────────────────────── reveal ───────────────────────── */

/* Progressive: without JS, or with reduced motion, everything is simply
   visible. The class is only added by script once it is safe to animate. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.993);
  transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-spring);
}

.reveal-ready .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .aurora i {
    animation: none;
  }

  /* Nothing moves: no entrance, no sweep, no parallax, no hover travel. */
  .aurora {
    transform: none !important;
  }

  .hero h1 .grad {
    animation: none !important;
  }

  .shot:hover,
  .role:hover,
  .feature:hover {
    transform: none;
  }

  .feature:hover .feature-ico {
    transform: none;
  }

  .role::before {
    transform: scaleX(1);
  }

  .steam i {
    animation: none;
    opacity: 0.5;
  }

  .totop {
    transition: opacity var(--dur) linear;
    transform: none;
  }

  .feature::after,
  .role::after {
    display: none;
  }

  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .aurora,
  .grain::after,
  .header,
  .footer,
  .cta {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .doc p,
  .doc li,
  td {
    color: #222;
  }
}