/* ==========================================================
   home.css — homepage-only sections (carousel, pricing, fort,
   mailbox, chat, toasts...). Shared chrome lives in site.css,
   which the homepage loads before this file.
   ========================================================== */

/* ==========================================================
   Homepage — story layout on top of the glass system
   ========================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.scroll-cue {
  margin-top: 46px;
  font-size: 13px; color: var(--text-faint);
}

/* ── Acts ────────────────────────────────────────────────── */

.act { padding: 104px 0; }

.act-grid {
  display: grid;
  /* A matching empty column on the right. Without it the act-mark's 92px
     pushed every section's content right, leaving ~124px of margin on the
     left and almost none on the right — most visible in Act 02, where the
     cards are full width and run to the edge. */
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  gap: 32px;
  align-items: start;
}

.act-body > h2 { margin-bottom: 20px; }

.statement {
  font-size: clamp(32px, 4.8vw, 58px);
  line-height: 1.04;
  margin-bottom: 26px;
}

.aside {
  margin-top: 30px;
  font-size: 14px; line-height: 1.6;
  color: var(--text-faint);
  max-width: 620px;
}

.aside a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }

/* ── Ask surface ─────────────────────────────────────────── */

.ask { width: 100%; max-width: 760px; padding: 18px; border-radius: var(--r-xl); }

.ask-form { display: flex; gap: 10px; align-items: center; }

.ask-input {
  flex: 1 1 auto; min-width: 0;
  padding: 15px 18px;
  font-family: inherit; font-size: 16px;   /* 16px min or iOS zooms on focus */
  letter-spacing: -0.01em; color: var(--text);
  background: var(--tint);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}

.ask-input::placeholder { color: var(--text-faint); }

.ask-input:focus {
  border-color: var(--cyan);
  background: var(--pill-bg);
  box-shadow: 0 0 0 4px rgba(11, 111, 133, 0.16);
}

.ask-send { flex: 0 0 auto; padding: 14px 26px; }

.ask-spinner {
  display: none;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.ask.is-loading .ask-spinner { display: block; }

.ask.is-loading .ask-send-label { display: none; }

.ask-answer {
  margin-top: 16px; padding: 18px; text-align: left;
  background: var(--panel-soft);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  animation: sheet-in .5s var(--spring);
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.ask-answer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}

.ask-answer-q { font-size: 15px; font-weight: 560; color: var(--text); line-height: 1.4; }

.ask-close {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 19px; line-height: 1; color: var(--text-dim);
  background: var(--tint-strong);
  border: none; border-radius: 50%; cursor: pointer;
  transition: background .2s, color .2s;
}

.ask-close:hover { background: var(--glass-stroke-strong); color: var(--text); }

.ask-answer-body { font-size: 15px; line-height: 1.62; color: var(--text-dim); }

.ask-answer-body p { margin-bottom: 10px; }

.ask-answer-body p:last-child { margin-bottom: 0; }

.ask-answer-body strong { color: var(--text); font-weight: 560; }

.ask-answer-body ul { margin: 0 0 10px 18px; }

.ask-answer-body li { margin-bottom: 5px; }

.ask-answer-body.streaming::after {
  content: ''; display: inline-block;
  width: 7px; height: 15px; margin-left: 2px;
  vertical-align: text-bottom; background: var(--cyan);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.ask-disclaimer {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 12px; line-height: 1.5; color: var(--text-faint);
}

/* ── Work list ───────────────────────────────────────────── */

.work-list { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }

.work-item {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px; padding: 24px 26px;
  transition: transform .45s var(--spring), border-color .3s;
}

.work-item:hover { transform: translateX(5px); border-color: var(--glass-stroke-strong); }

.work-n {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--cyan); padding-top: 2px;
}

.work-n b { font-size: 12px; font-weight: 620; letter-spacing: 0.08em; color: var(--text-ghost); }

/* ── Animated line icons ─────────────────────────────────────
   Hand-built SVG rather than Lottie: the same draw-on effect most Lottie
   exports actually contain, without a 250KB runtime or an external JSON
   fetch, and it inherits currentColor so it follows the theme.
   ────────────────────────────────────────────────────────── */

.ico {
  width: 40px; height: 40px;
  stroke: currentColor; stroke-width: 2;
  overflow: visible;
}

/* Stroke draw-on */

.ico .dw {
  stroke-dasharray: var(--len, 140);
  stroke-dashoffset: var(--len, 140);
  transition: stroke-dashoffset 1.1s var(--ease);
}

/* Bars rising from their base */

.ico .grow {
  transform: scaleY(0);
  transform-origin: 50% 34px;
  transition: transform .8s var(--spring);
}

/* Dots landing last */

.ico .pop {
  transform: scale(0);
  transform-origin: center;
  transition: transform .6s var(--spring);
}

/* The branch that gets killed stays ghosted */

.ico .fade { opacity: .28; }

.ico .d1 { transition-delay: .22s; }

.ico .d2 { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  .ico .dw   { stroke-dashoffset: 0 !important; transition: none !important; }
  .ico .grow { transform: scaleY(1) !important; transition: none !important; }
  .ico .pop  { transform: scale(1) !important; transition: none !important; }
}

.work-item h3 { margin-bottom: 8px; }

.work-item p { font-size: 14.5px; line-height: 1.62; color: var(--text-dim); }

/* ── Track record carousel ───────────────────────────────────
   Native scroll-snap: keeps momentum scrolling and trackpad swipes
   working, stays keyboard navigable, needs no library. JS only syncs
   the indicators to wherever the user actually landed.
   ────────────────────────────────────────────────────────── */

.carousel { position: relative; margin-top: 36px; }

/* The viewport fades the slides out at both edges so the track reads as
   continuing past the container rather than being clipped by it. */

.carousel-viewport {
  position: relative;
  margin: 0 -6px;
  padding: 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 62px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 62px), transparent 100%);
}

.carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 2px 22px;
  scrollbar-width: none;
}
/* Snap arms after load (html.anim-ready). Mandatory snap at load time
   performs a snap-scroll during layout, and any scroll ends LCP
   observation: the page never reported an LCP entry because of it. */
.anim-ready .carousel-track { scroll-snap-type: x mandatory; }

.carousel-track::-webkit-scrollbar { display: none; }

/* Lets every card become the leading card, so each one is its own stop. */

.carousel-track::after {
  content: '';
  flex: 0 0 calc(100% - clamp(272px, 30%, 392px) - 18px);
}

.carousel-track:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: var(--r-lg); }

.carousel .done-card {
  position: relative;
  flex: 0 0 clamp(272px, 30%, 392px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: 300px;
  padding: 26px 26px 22px;
  overflow: hidden;
  transition: transform .5s var(--spring), border-color .35s, box-shadow .4s;
}

/* A diagonal accent wash, strongest at the corner the index sits in. */

.carousel .done-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 100% 0%,
    rgba(53, 214, 238, 0.16), transparent 58%);
  pointer-events: none;
  opacity: .8;
  transition: opacity .4s var(--ease);
}

.carousel .done-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-stroke-strong);
  box-shadow: var(--specular), var(--lift-lg);
}

.carousel .done-card:hover::after { opacity: 1; }

.done-index {
  position: absolute; top: 16px; right: 22px;
  font-size: 52px; font-weight: 700;
  letter-spacing: -0.05em; line-height: 1;
  color: var(--text);
  opacity: .09;
  pointer-events: none;
}

.done-body { display: flex; flex-direction: column; flex: 1 1 auto; }

.done-tag {
  display: inline-block; align-self: flex-start;
  margin-bottom: 16px; padding: 5px 11px;
  font-size: 10.5px; font-weight: 620; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cyan);
  background: var(--pill-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
}

.done-card h3 { margin-bottom: 11px; padding-right: 44px; }

.done-card p { font-size: 14.5px; line-height: 1.62; color: var(--text-dim); }

.done-foot {
  margin-top: 20px; padding-top: 15px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px; font-weight: 560;
  letter-spacing: 0.01em; color: var(--text-faint);
}

/* ── Controls ── */

.carousel-ui { margin-top: 10px; }

.carousel-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.carousel-dots { display: flex; gap: 7px; }

.dot {
  width: 7px; height: 7px; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: var(--tint-strong);
  border: 1px solid var(--glass-stroke);
  transition: transform .4s var(--spring), background .3s, box-shadow .3s;
}

.dot.is-active {
  background: linear-gradient(140deg, var(--accent-a), var(--accent-b));
  border-color: transparent;
  transform: scale(1.35);
  box-shadow: 0 0 0 3px rgba(53, 214, 238, 0.18);
}

.carousel-arrows { display: flex; gap: 9px; }

.carousel-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--text);
  background: var(--refract), var(--glass-thin);
  backdrop-filter: blur(12px) saturate(200%);
  -webkit-backdrop-filter: blur(12px) saturate(200%);
  border: 1px solid var(--glass-stroke);
  border-radius: 50%;
  box-shadow: var(--specular);
  cursor: pointer;
  transition: transform .3s var(--spring), border-color .25s, background .25s;
}

.carousel-btn svg { width: 17px; height: 17px; }

.carousel-btn:hover {
  transform: translateY(-2px);
  border-color: var(--glass-stroke-strong);
  background: var(--refract), var(--glass-regular);
}

.carousel-btn:active { transform: scale(0.94); }

@media (max-width: 820px) {
  .carousel .done-card { flex-basis: 84%; min-height: 270px; }
  .carousel-viewport {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
}

/* ── Pricing tiers ───────────────────────────────────────── */

/* ── Delivery mode switch ────────────────────────────────── */

.modes {
  display: inline-flex; gap: 3px;
  margin-top: 28px; padding: 4px;
  background: var(--tint);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-pill);
}

.mode {
  padding: 9px 20px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--text-dim);
  background: none; border: none; border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s;
}

.mode:hover { color: var(--text); }

.mode.is-active {
  color: var(--on-accent); font-weight: 600;
  background: linear-gradient(140deg, var(--accent-a), var(--accent-b));
  box-shadow: var(--specular);
}

.mode-note {
  margin-top: 14px;
  font-size: 14px; line-height: 1.6;
  color: var(--text-dim);
  max-width: 620px;
  min-height: 44px;   /* stop the tiers jumping as the note changes length */
}

.tiers {
  display: grid;
  /* Three real engagements side by side. Free and Custom span the full row as
     bookends — auto-fit left Custom orphaned on a row of its own. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: 28px;
}

/* ── Full-width bookends ── */

.tier-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 22px 26px;
}

.tier-wide .tier-name { margin-bottom: 6px; }

.tier-wide .tier-price { margin-bottom: 0; font-size: 30px; }

.tier-wide .tier-desc { margin-bottom: 10px; }

.tier-wide .tier-cta { margin-top: 0; width: auto; white-space: nowrap; }

.tier-list-inline {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-bottom: 0;
}

.tier-list-inline li { margin-bottom: 0; }

@media (max-width: 900px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier-wide { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
  .tier-wide .tier-cta { justify-self: start; }
}

.tier-amount { transition: opacity .2s var(--ease); }

.tier { padding: 26px 22px; display: flex; flex-direction: column; }

/* The bookends are priced differently in kind, so they read quieter than
   the three engagements between them. */

.tier-custom { border-style: dashed; }

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

/* The free option, as a line of prose rather than a card.
   It used to be a full-width tier with a 30px "€0" at the top of the section,
   which gave the thing nobody pays for the loudest position on the page. It
   still has to be said — the research and the PDFs genuinely are free, and
   pretending otherwise would be worse — it just should not be said first or
   loudest. */

.tier-free-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
  text-align: center;
  text-wrap: balance;
}

.tier-free-note a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--glass-stroke-strong);
}

.tier-free-note a:hover { text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .tier-free-note { text-align: left; font-size: 14px; }
}

.tier-custom .tier-price { font-size: 26px; }

.tier-cta { margin-top: auto; width: 100%; text-align: center; }

.tier-featured { border-color: rgba(11, 111, 133, 0.34); }

.tier-badge {
  position: absolute; top: -10px; left: 24px;
  padding: 4px 11px;
  font-size: 11px; font-weight: 560; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--on-accent);
  background: linear-gradient(140deg, var(--accent-a), var(--accent-b));
  border-radius: var(--r-pill);
}

.tier-name {
  font-size: 13px; font-weight: 560; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 12px;
}

.tier-price {
  font-size: 34px; font-weight: 620; letter-spacing: -0.035em;
  margin-bottom: 14px; line-height: 1;
}

/* The unit suffix only. Scoped so it can't catch .tier-amount, which is also
   a span and must stay at the headline size. */

.tier-price > span:not(.tier-amount) {
  font-size: 14px; font-weight: 450; letter-spacing: -0.01em;
  color: var(--text-faint); margin-left: 5px;
}

.tier-amount { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }

.tier-desc { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin-bottom: 16px; }

.tier-list { list-style: none; margin-bottom: 22px; }

.tier-list li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  font-size: 13.5px; color: var(--text-dim);
}

.tier-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--cyan); font-size: 12px;
}

.tier-add { margin-top: auto; width: 100%; }

.tier-add.added { background: rgba(15, 159, 189, 0.16); border-color: var(--cyan); color: var(--text); }

/* ── Cart row + the button you cannot click ──────────────── */

.cart-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 28px;
}

.btn-ghost {
  background: none; border: 1px dashed var(--glass-stroke);
  color: var(--text-faint);
}

.dodge {
  position: relative;
  transition: transform .32s var(--spring), color .2s, border-color .2s;
  will-change: transform;
}

.dodge:hover { color: var(--text-faint); }

/* ── Comparison table ────────────────────────────────────── */

.compare-wrap {
  margin-top: 34px;
  overflow-x: auto;   /* the table scrolls, the page never does */
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  background: var(--tint);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.compare { width: 100%; border-collapse: collapse; min-width: 620px; }

.compare thead th {
  padding: 15px 18px;
  font-size: 12px; font-weight: 620;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); text-align: center;
  border-bottom: 1px solid var(--tint-strong);
}

.compare thead th:first-child { text-align: left; color: var(--text); }

.compare tbody th {
  padding: 13px 18px;
  font-size: 14px; font-weight: 450;
  color: var(--text-dim); text-align: left;
}

.compare tbody td {
  padding: 13px 18px;
  font-size: 13.5px; color: var(--text-dim); text-align: center;
}

.compare tbody tr { border-bottom: 1px solid var(--tint); }

.compare tbody tr:last-child { border-bottom: none; }

.compare tbody tr:hover { background: var(--tint); }

/* Words stay in the DOM for screen readers; sighted users get the glyph. */

.compare td[data-y], .compare td[data-n] { font-size: 0; }

.compare td[data-y]::before { content: '✓'; font-size: 15px; color: var(--cyan); font-weight: 700; }

.compare td[data-n]::before { content: '×'; font-size: 15px; color: var(--text-faint); }

/* ── Symptoms ────────────────────────────────────────────
   Replaces a scrolling keyword marquee. Same keywords, but the
   visitor reads their own complaint first and the jargon second,
   which is the order they actually think in.
   ────────────────────────────────────────────────────────── */

.symptoms { padding: 76px 0 104px; }

.symptoms-h {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  margin-bottom: 26px;
}

.symptom-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.symptom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; width: 100%;
  padding: 17px 20px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--refract), var(--glass-thin);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  box-shadow: var(--specular);
  transition: transform .35s var(--spring), border-color .25s, box-shadow .3s;
}

.symptom:hover {
  transform: translateY(-2px);
  border-color: var(--glass-stroke-strong);
  box-shadow: var(--specular), var(--lift);
}

.symptom:active { transform: scale(0.99); }

.symptom-say {
  font-size: 15.5px; line-height: 1.4; color: var(--text);
  font-weight: 500; letter-spacing: -0.012em;
}

.symptom-is {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 620;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cyan);
  padding: 5px 11px;
  background: var(--pill-bg);
  border: 1px solid rgba(11, 111, 133, 0.24);
  border-radius: var(--r-pill);
}

.symptoms-note { margin-top: 16px; font-size: 13px; color: var(--text-faint); }

@media (max-width: 820px) {
  .symptom-list { grid-template-columns: minmax(0, 1fr); }
  .symptom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── The fort: a Mac desktop ─────────────────────────────── */

.mac {
  margin-top: 34px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel-soft);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--specular), var(--lift-lg);
}

.mac-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 9px 14px;
  background: var(--tint);
  border-bottom: 1px solid var(--tint-strong);
  font-size: 12.5px; color: var(--text-dim);
}

.mac-lights { display: flex; gap: 6px; margin-right: 4px; }

.mac-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }

.mac-lights i:nth-child(2) { background: #febc2e; }

.mac-lights i:nth-child(3) { background: #28c840; }

.mac-menu { font-weight: 500; }

.mac-menu:first-of-type { font-weight: 620; color: var(--text); }

.mac-clock { margin-left: auto; font-variant-numeric: tabular-nums; }

.mac-desk {
  position: relative;
  min-height: 320px;
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  align-content: start;
  background:
    radial-gradient(70% 80% at 20% 10%, rgba(124, 92, 255, 0.20), transparent 70%),
    radial-gradient(60% 70% at 85% 80%, rgba(15, 159, 189, 0.16), transparent 70%);
}

.folder {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; color: var(--text); cursor: pointer;
  transition: background .18s, border-color .18s;
}

.folder:hover, .folder:focus-visible {
  background: var(--hair);
  border-color: var(--glass-stroke);
  outline: none;
}

.folder-icon { width: 56px; height: 44px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.20)); }

.folder-name { font-size: 12.5px; font-weight: 500; text-align: center; line-height: 1.3; }

.mac-hint { margin-top: 14px; font-size: 13px; color: var(--text-faint); }

/* Finder windows */

.mac-windows { position: fixed; inset: 0; z-index: 120; pointer-events: none; }

.win {
  position: absolute;
  width: min(520px, calc(100vw - 32px));
  pointer-events: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid var(--glass-stroke-strong);
  box-shadow: var(--specular-strong), var(--lift-lg);
  animation: win-in .34s var(--spring);
}

@keyframes win-in { from { opacity: 0; transform: scale(0.94) translateY(10px); } }

.win-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--tint-strong);
  border-bottom: 1px solid var(--hair);
  cursor: grab;
  user-select: none;
}

.win-bar:active { cursor: grabbing; }

.win-close {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ff5f57; border: none; padding: 0; cursor: pointer;
  flex-shrink: 0;
}

.win-title { font-size: 13px; font-weight: 560; }

.win-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Folders scroll rather than grow. A fort with forty documents in it should
   still leave the desktop behind it visible. */

.win-body { max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; }

.file {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 16px;
  background: none; border: none; border-bottom: 1px solid var(--tint);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  text-decoration: none;
  transition: background .18s;
}

.file:hover { background: var(--tint); }

.file-icon { font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; }

.file-name { flex: 1 1 auto; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-meta { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }

.file-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2.5px 8px;
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--tint);
  border: 1px solid var(--glass-stroke);
}

.win-note { padding: 18px; max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; }

.win-note p { font-size: 14px; line-height: 1.65; color: var(--text-dim); margin-bottom: 11px; }

.win-note p:last-child { margin-bottom: 0; }

/* ── Choice: me vs AI-me ─────────────────────────────────── */

.choice-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 34px;
}

.choice { padding: 30px 28px; display: flex; flex-direction: column; }

.choice-kind {
  font-size: 11px; font-weight: 560; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px;
}

.choice h3 { font-size: 26px; margin-bottom: 12px; }

.choice p { font-size: 14.5px; line-height: 1.62; color: var(--text-dim); margin-bottom: 22px; }

/* ── Mail client ─────────────────────────────────────────── */

.mail { margin-top: 34px; overflow: hidden; }

.mail-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--tint);
  border-bottom: 1px solid var(--hair);
}

.mail-lights { display: flex; gap: 6px; }

.mail-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }

.mail-lights i:nth-child(2) { background: #febc2e; }

.mail-lights i:nth-child(3) { background: #28c840; }

.mail-title { font-size: 13px; font-weight: 560; margin-left: 6px; }

.mail-demo {
  font-size: 10.5px; font-weight: 560; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 3px 8px; border: 1px solid var(--glass-stroke); border-radius: var(--r-pill);
}

.mail-new { margin-left: auto; padding: 8px 16px; font-size: 13px; }

.mail-item-demo {
  font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 1.5px 6px; margin-left: 7px;
  border: 1px solid var(--glass-stroke); border-radius: var(--r-pill);
  vertical-align: 1.5px;
}

.mail-read-demo {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  margin-top: 6px;
}

.mail-body {
  display: grid;
  grid-template-columns: 132px minmax(0, 260px) minmax(0, 1fr);
  min-height: 400px;
}

.mail-side {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px;
  border-right: 1px solid var(--tint-strong);
}

.mail-folder {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 11px;
  font: inherit; font-size: 13px; color: var(--text-dim);
  background: none; border: none; border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  transition: background .18s, color .18s;
}

.mail-folder:hover { background: var(--tint); color: var(--text); }

.mail-folder.is-active { background: var(--tint-strong); color: var(--text); font-weight: 560; }

.mail-badge {
  font-size: 11px; font-weight: 560;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--pill-bg); color: var(--cyan);
}

.mail-list {
  list-style: none;
  border-right: 1px solid var(--tint-strong);
  overflow-y: auto; max-height: 460px;
}

.mail-item {
  display: block; width: 100%;
  border-bottom: 1px solid var(--tint);
  border-left: 2px solid transparent;
  transition: background .18s;
}

.mail-item:hover { background: var(--tint); }
.mail-item-btn {
  display: block; width: 100%;
  padding: 13px 15px;
  font: inherit; color: inherit; text-align: inherit;
  background: none; border: 0; margin: 0;
  cursor: pointer;
}
.mail-item-btn:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; border-radius: 6px; }

.mail-item.is-open { background: var(--tint-strong); border-left-color: var(--cyan); }

.mail-item-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 3px;
}

.mail-item-from { font-size: 13.5px; font-weight: 620; color: var(--text); }

.mail-item.read .mail-item-from { font-weight: 450; color: var(--text-dim); }

.mail-item-time { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }

.mail-item-subject {
  font-size: 13px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mail-item-clip { font-size: 11px; color: var(--text-faint); margin-top: 3px; }

.mail-read { padding: 22px; overflow-y: auto; max-height: 460px; }

.mail-empty { font-size: 14px; color: var(--text-faint); }

.mail-read-head { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.09); }

.mail-read-subject { font-size: 19px; font-weight: 620; letter-spacing: -0.02em; margin-bottom: 8px; }

.mail-read-from { font-size: 13.5px; font-weight: 560; color: var(--text); }

.mail-read-meta { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }

.mail-read-body p { font-size: 14.5px; line-height: 1.68; color: var(--text-dim); margin-bottom: 13px; }

.mail-attach {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 11px 14px;
  background: var(--tint);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-sm);
  text-decoration: none; color: var(--text);
  transition: background .18s, border-color .18s;
}

.mail-attach:hover { background: var(--tint-strong); border-color: var(--glass-stroke-strong); }

.mail-attach-name { flex: 1 1 auto; font-size: 13.5px; font-weight: 500; }

.mail-attach-size { font-size: 11.5px; color: var(--text-faint); }

/* ── Compose modal ───────────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; }

.modal-scrim { position: absolute; inset: 0; background: rgba(13, 20, 36, 0.34); backdrop-filter: blur(6px); }

.modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px;
  animation: win-in .4s var(--spring);
}

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

.modal-head h3 { font-size: 19px; }

.field { display: block; margin-bottom: 14px; }

.field > span {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 560; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
}

.field input, .field textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--tint);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-sm);
  outline: none; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}

.field input:focus, .field textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(11, 111, 133, 0.16);
}

.field input[readonly] { color: var(--text-faint); cursor: default; }

.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

.modal-note { font-size: 12px; line-height: 1.55; color: var(--text-faint); margin: 4px 0 18px; }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Honeypot: off-screen rather than display:none, since some bots skip
   anything that is explicitly hidden. */

.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.compose-status { margin-top: 12px; font-size: 13px; line-height: 1.5; text-align: right; }

.compose-status.is-bad { color: #c0392b; }

.compose-status.is-good { color: var(--cyan); }

/* ── Live session stats ──────────────────────────────────── */

.stats {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  padding: 12px 14px; border-radius: var(--r-md);
  min-width: 168px;
  transition: transform .4s var(--spring), opacity .4s var(--ease);
}

.stats.collapsed { min-width: 0; padding: 9px 13px; }

.stats.collapsed .stats-body { display: none; }

.stats-toggle {
  display: flex; align-items: center; gap: 7px;
  font: inherit; font-size: 11px; font-weight: 560;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-faint);
  background: none; border: none; padding: 0; cursor: pointer;
}

.stats-body { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }

.stats-body > div { display: flex; justify-content: space-between; gap: 14px; }

.stats-body dt { font-size: 11.5px; color: var(--text-faint); }

.stats-body dd { font-size: 11.5px; font-weight: 560; color: var(--text); font-variant-numeric: tabular-nums; }

/* Liquid Glass transparency, the way iOS 27 exposes it */

.glass-ctl {
  display: flex !important; align-items: center; gap: 9px;
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--hair);
}

.glass-ctl label { font-size: 11.5px; color: var(--text-faint); }

/* Theme switch */

.theme-toggle {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 24px; padding: 0;
  border: 1px solid var(--glass-stroke); border-radius: var(--r-pill);
  background: var(--tint-strong);
  cursor: pointer;
  transition: background .3s var(--ease);
}

.theme-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-fill);
  box-shadow: var(--lift-sm);
  transition: transform .38s var(--spring);
}

[data-theme="dark"] .theme-knob { transform: translateX(22px); }

.theme-sun, .theme-moon {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 10px; line-height: 1; color: var(--text-faint);
  transition: opacity .25s;
}

.theme-sun  { right: 6px; }

.theme-moon { left: 7px; opacity: 0; }

[data-theme="dark"] .theme-sun  { opacity: 0; }

[data-theme="dark"] .theme-moon { opacity: 1; }

.glass-ctl input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 0; height: 4px;
  border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}

.glass-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--glass-stroke-strong);
  box-shadow: var(--lift-sm);
  cursor: pointer;
}

.glass-ctl input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--glass-stroke-strong);
  box-shadow: var(--lift-sm);
  cursor: pointer;
}

/* ── Dwell-time toasts ───────────────────────────────────── */

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  display: flex; flex-direction: column-reverse; gap: 10px;
  max-width: min(340px, calc(100vw - 40px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 14px 16px;
  background: var(--glass-thick);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--glass-stroke-strong);
  border-radius: var(--r-md);
  box-shadow: var(--specular-strong), var(--lift);
  font-size: 14px; line-height: 1.5; color: var(--text);
  animation: toast-in .55s var(--spring);
}

.toast.out { animation: toast-out .35s var(--ease) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(16px) scale(0.96); } }

@keyframes toast-out { to   { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* Two buttons that fit on one row in English and do not in French. `.btn`
   carries white-space: nowrap, so without wrapping here the second label
   simply ran past the card edge. They share a row when both fit and take a
   full row each when they do not, which is also what you want on a phone. */

.toast-actions {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 8px; margin-top: 11px;
}

@media (max-width: 1000px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier-badge { top: -10px; }
}

@media (max-width: 900px) {
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .act-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .act-mark { position: static; }
  /* Three mail panes don't fit — collapse to list, then reading pane. */
  .mail-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mail-side { flex-direction: row; border-right: none; border-bottom: 1px solid var(--tint-strong); }
  .mail-list { border-right: none; border-bottom: 1px solid var(--tint-strong); max-height: 300px; }
  .mail.reading .mail-list { display: none; }
  .mail:not(.reading) .mail-read { display: none; }
  .mail-read { max-height: none; }
}

@media (max-width: 820px) {
  .act { padding: 76px 0; }
  /* The dock and the toasts fight for the same corner on a phone, so the dock
     starts collapsed to its pill rather than disappearing — otherwise the
     glass control would be unreachable on mobile entirely. */
  .stats { left: 12px; bottom: 12px; min-width: 0; padding: 9px 12px; }
  .toasts { right: 12px; left: 12px; bottom: 74px; max-width: none; }
  .toast { padding: 13px 15px; }
}

@media (max-width: 560px) {
  .ask { padding: 14px; border-radius: var(--r-lg); }
  .ask-form { flex-direction: column; align-items: stretch; }
  .ask-send { width: 100%; }
  .work-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .inbox-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .inbox-subject { grid-column: 1 / -1; white-space: normal; }
  .cart-row { flex-direction: column; align-items: stretch; }
  .cart-summary { justify-content: space-between; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

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

.faq { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }

/* ── Hero chat transcript ────────────────────────────────────
   Open from first paint, with AI-me already having spoken. A
   collapsed input reads as a search box; a visible conversation
   reads as something already talking to you.
   ────────────────────────────────────────────────────────── */

.chat {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 340px; overflow-y: auto;
  margin-bottom: 14px; padding: 4px 2px;
  text-align: left;
  scroll-behavior: smooth;
}

.msg {
  padding: 14px 16px;
  border-radius: var(--r-md);
  animation: msg-in .45s var(--spring);
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
}

.msg-who {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 620;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan);
}

.msg p { font-size: 15px; line-height: 1.62; color: var(--text-dim); }

.msg p + p { margin-top: 10px; }

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

.msg ul { margin: 8px 0 0 18px; }

.msg li { font-size: 15px; line-height: 1.6; color: var(--text-dim); margin-bottom: 5px; }

.msg-ai {
  background: var(--tint);
  border: 1px solid var(--glass-stroke);
}

/* The visitor's own message: aligned right, accent-tinted, no label needed. */

.msg-you {
  align-self: flex-end;
  max-width: 85%;
  background: var(--pill-bg);
  border: 1px solid var(--accent-edge);
}

.msg-you .msg-who { color: var(--text-faint); }

.msg-you p { color: var(--text); font-weight: 500; }

.msg-ai.streaming p:last-child::after {
  content: ''; display: inline-block;
  width: 7px; height: 15px; margin-left: 3px;
  vertical-align: text-bottom; background: var(--cyan);
  animation: blink 1s steps(2) infinite;
}

/* ── AI handoff ──────────────────────────────────────────────
   Shown once, after the first answer. The AI is the opening move;
   this is the move it is supposed to lead to.
   ────────────────────────────────────────────────────────── */

.msg-handoff {
  border: 1px dashed var(--accent-edge);
  background: var(--tint);
}

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

.handoff-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

/* ── Newsletter opt-in ───────────────────────────────────── */

.news { margin-top: 22px; padding: 30px 32px; }

.news h3 { font-size: 22px; margin-bottom: 10px; }

.news p { font-size: 15px; line-height: 1.62; color: var(--text-dim); max-width: 560px; }

.news-choice { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* The Yes is meant to be the obvious one. */

.news-yes {
  position: relative;
  padding: 13px 26px; font-size: 15px;
  background: var(--accent-fill-hover);
  box-shadow: var(--specular), 0 8px 24px rgba(109, 75, 240, 0.30);
  animation: news-pulse 2.6s var(--ease) infinite;
  overflow: hidden;
}

@keyframes news-pulse {
  0%, 100% { box-shadow: var(--specular), 0 8px 24px rgba(109, 75, 240, 0.30); }
  50%      { box-shadow: var(--specular), 0 10px 32px rgba(53, 214, 238, 0.46); }
}

/* Specular sweep, same idea as the heading glint. */

.news-yes::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.62), transparent);
  transform: skewX(-18deg);
  animation: news-sparkle 2.6s var(--ease) infinite;
  pointer-events: none;
}

@keyframes news-sparkle {
  0%       { left: -70%; }
  55%, 100%{ left: 130%; }
}

.news-no {
  transition: transform .3s var(--spring), color .2s, border-color .2s;
  will-change: transform;
}

.news-no:disabled { opacity: .75; cursor: default; transform: none !important; }

.news-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.news-row .ask-input { flex: 1 1 240px; }

.news-note { margin-top: 12px; font-size: 12.5px; color: var(--text-faint); }

.news-status { margin-top: 10px; font-size: 13px; }

.news-status.is-bad { color: #c0392b; }

[data-theme="dark"] .news-status.is-bad { color: #ff9b9b; }

.news-done a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .news-yes { animation: none; }
  .news-yes::after { display: none; }
}

@media (max-width: 560px) {
  .news { padding: 24px 22px; }
  .news-row { flex-direction: column; }
}

/* ── Paywall ─────────────────────────────────────────────── */

.msg-paywall {
  border: 1px solid var(--accent-edge);
  background: var(--refract), var(--glass-regular);
}

.paywall-h { font-size: 16px !important; font-weight: 620; color: var(--text) !important; margin-bottom: 8px; }

.paywall-note { margin-top: 12px; font-size: 12.5px; color: var(--text-faint) !important; }

/* ══ Touch and mobile ergonomics ══════════════════════════
   Scoped to coarse pointers so the desktop keeps its tighter
   proportions — these are hit-area fixes, not a visual redesign.
   ═══════════════════════════════════════════════════════ */

/* iOS Safari zooms the whole page when a focused field is under 16px, then
   leaves the viewport scaled. Every text input has to clear that bar. */

.field input,
.field textarea,
.news-row .ask-input {
  font-size: 16px;
}

@media (pointer: coarse) {
  /* The carousel dots stay 7px visually — a bigger dot would look wrong —
     but get an invisible 36px hit area so they are actually tappable. */
  .dot { position: relative; }
  .dot::after {
    content: '';
    position: absolute;
    inset: -18px;              /* 7px dot + 36px = a 43px target */
    border-radius: 50%;
  }
  /* Same trick for the mail list and inbox rows. */
  .mail-item { min-height: 56px; }
  .carousel-btn { width: 46px; height: 46px; }
  /* The session dock is fixed to the bottom-left, exactly where the dots sat.
     Group dots with the arrows on the right so they clear it. */
  .carousel-controls { justify-content: flex-end; gap: 14px; }
  .theme-toggle { min-height: 32px; }
}

@media (max-width: 700px) {
  .win { width: calc(100vw - 24px); left: 12px !important; }
  .win-bar { cursor: default; }
}

/* The Finder windows are a desktop conceit: dragging a floating window on a
   phone is worse than useless, and the layer sits over the whole viewport. */

/* Free-tier counter, shown before the limit is reached rather than after. */

.ask-quota { color: var(--cyan); font-weight: 560; }

.ask-quota.is-out { color: var(--text-faint); }

/* ── Discount game ───────────────────────────────────────── */

.paywall-deal {
  margin-top: 14px;
  padding: 9px 16px;
  font: inherit; font-size: 13.5px; font-weight: 560;
  color: var(--cyan);
  background: var(--pill-bg);
  border: 1px dashed var(--accent-edge);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .3s var(--spring), border-color .25s, color .2s;
}

.paywall-deal:hover { transform: translateY(-1px); border-color: var(--cyan); }

.snake-panel { width: min(500px, 100%); }

.snake-lede { font-size: 15px; line-height: 1.6; color: var(--text-dim); margin-bottom: 16px; }

.snake-lede strong { color: var(--text); font-weight: 620; }

.snake-rules { list-style: none; margin-bottom: 22px; }

.snake-rules li {
  font-size: 14px; line-height: 1.5; color: var(--text-dim);
  padding: 6px 0;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}

.snake-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text);
  padding: 3px 8px;
  background: var(--tint-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: 6px;
}

.snake-hud {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 12px;
  font-size: 12.5px; color: var(--text-faint);
  letter-spacing: 0.04em; text-transform: uppercase;
}

.snake-stat b {
  color: var(--cyan); font-weight: 620;
  letter-spacing: 0.08em; margin-left: 6px;
}

.snake-board {
  display: flex; justify-content: center;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint);
  border: 1px solid var(--glass-stroke);
  /* the game owns vertical swipes while it is open */
  touch-action: none;
}

#snake-canvas { display: block; }

/* The board only exists while playing. Driven by a state class rather than a
   sibling selector: the board sits before the lost/won panels in the DOM, so
   `~` could never reach them and the board stayed visible behind both. */

.snake-board { display: none; }

#snake.is-play .snake-board { display: flex; }

.snake-code-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}

.snake-code {
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; font-weight: 620; letter-spacing: 0.12em;
  color: var(--text);
  padding: 12px 18px; text-align: center;
  background: var(--refract), var(--glass-thin);
  border: 1px dashed var(--accent-edge);
  border-radius: var(--r-sm);
}

.snake-note { font-size: 12.5px; color: var(--text-faint); margin-bottom: 18px; }

@media (max-width: 560px) {
  .snake-code { font-size: 17px; letter-spacing: 0.08em; }
  .snake-code-row { flex-direction: column; align-items: stretch; }
}

/* Cancel route in the paywall. Understated but not hidden: a subscription you
   cannot leave without writing an email is a support ticket waiting to happen,
   and in the EU it is also a compliance problem. */

.paywall-cancel {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--glass-stroke-strong);
}

.paywall-cancel:hover { color: var(--text); text-decoration-color: currentColor; }

/* ── Video in a Finder window ────────────────────────────────
   Self-hosted <video>, no embed: a YouTube iframe would put a second
   third-party script on a site whose privacy page says there is exactly one. */

.win-video { padding: 0 0 4px; }

.win-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-bottom: 1px solid var(--glass-stroke);
}

.win-video p {
  font-size: 14px; line-height: 1.6;
  color: var(--text-dim);
  padding: 14px 16px 0;
}

/* ── The basket ──────────────────────────────────────────────
   Fixed to the viewport, not inline under the pricing table. Inline, adding an
   engagement produced no visible response for anyone who had scrolled past the
   tiers — the confirmation was rendered off-screen. */

.cart-dock {
  position: fixed; z-index: 96;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 640px;
  pointer-events: none;
  animation: cart-in .5s var(--spring);
}

.cart-dock-in {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--r-pill);
}

@keyframes cart-in {
  from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.96); }
}

/* Fires again on every add, so a second item is acknowledged too. */

.cart-dock.bump .cart-dock-in { animation: cart-bump .45s var(--spring); }

@keyframes cart-bump {
  40% { transform: scale(1.035); box-shadow: var(--specular-strong), var(--lift-lg); }
}

.cart-dock-count {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 1px solid var(--accent-edge);
  color: var(--on-accent);
  font-size: 13px; font-weight: 650;
}

.cart-dock-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.cart-dock-text strong {
  font-size: 14.5px; letter-spacing: -0.015em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cart-dock-text span { font-size: 12.5px; color: var(--text-dim); }

.btn-cart-clear { padding: 9px 14px; font-size: 13px; flex-shrink: 0; }

/* The session dock and the toasts share this corner. Move them clear rather
   than letting the basket sit on top of them.

   `bottom`, not a transform: .stats transitions transform, so a transform here
   would animate — and anything that animates can be caught mid-flight or
   paused outright by a background tab, leaving the dock sitting under the
   basket. Position is not something worth animating when the alternative is
   overlap. */

.has-cart .stats  { bottom: 92px; }

.has-cart .toasts { bottom: 96px; }

@media (max-width: 620px) {
  .cart-dock { left: 12px; right: 12px; bottom: 12px; width: auto; transform: none; }
  @keyframes cart-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
  .cart-dock-in { flex-wrap: wrap; border-radius: var(--r-lg); padding: 12px 14px; }
  .cart-dock-text { flex: 1 1 auto; }
  .btn-cart-clear { min-height: 40px; }
  /* The bar wraps to two rows on a phone, so it is taller. */
  .has-cart .stats  { bottom: 140px; }
  .has-cart .toasts { bottom: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-dock, .cart-dock.bump .cart-dock-in { animation: none; }
}

/* ── An engagement the current delivery mode does not offer ──
   Espresso is ninety minutes; travelling for it makes no sense for either
   side. Dimmed and disabled rather than removed, so the reader can see what
   they would get back by switching to remote instead of wondering where a
   tier went. */

.tier.is-unavailable {
  opacity: 0.55;
  filter: saturate(0.6);
}

.tier.is-unavailable .tier-price,
.tier.is-unavailable .tier-list { text-decoration: line-through; text-decoration-thickness: 1px; }

.tier.is-unavailable .tier-add {
  cursor: not-allowed;
  opacity: 0.6;
}

.tier-unavailable {
  margin-top: 10px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}