/* Home page only. Shared tokens and components live in /styles.css. */

/* Hero. More air than the shared .hero-field (2026-10-12 tester feedback: it felt cramped). */
.home .hero { padding-top: 12px; }
/* 2026-10-13 owner (round 5, supersedes the v1 yellow text card): yellow across the whole hero again, with the
   chat, the site preview behind it and the "Try it" prompt inside the yellow. Kept from v1: no "See plans",
   the three ticks on one line, the preview looping with the chat. Fixed gaps in the text column
   (h1 → text → buttons → ticks: 16/28/16 on phones, 20/32/20 from 960px). */
.home .hero-field { padding: 32px 20px 28px; gap: 36px; }
@media (min-width: 640px) { .home .hero-field { padding: 40px 32px; gap: 40px; } }
@media (min-width: 960px) {
  .home .hero-field { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: center; padding: 48px 40px; gap: 40px; }
  .home .hero-field > div:first-child { display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1200px) { .home .hero-field { padding: 52px 48px; gap: 48px; } }
@media (max-width: 420px) { .home .hero-field { padding: 28px 16px 20px; gap: 32px; } }
/* The demo on yellow: the chat keeps its strong offset shadow; the site preview and the prompt box are white. */
.home .hd-chat { border-width: 2px; }
.home .hero-try .prompt-line { background: var(--surface); border-width: 1.5px; }
.hero h1.home-h1 { max-width: 12em; margin: 0 0 16px; font-size: clamp(32px, 8.75vw, 58px); line-height: 1.1; }
.hero h1.home-h1 span { display: inline; }
@media (min-width: 960px) { .hero h1.home-h1 { margin-bottom: 20px; font-size: clamp(38px, 3.4vw, 48px); } }
.home .hero .value { margin: 0 0 28px; max-width: 30em; font-size: var(--fs-body); line-height: 1.5; }
@media (min-width: 960px) { .home .hero .value { margin-bottom: 32px; font-size: var(--fs-h3); } }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0 0 16px; }
@media (min-width: 960px) { .hero-ctas { margin-bottom: 20px; } }
/* Older translated markup: "See plans" (removed from the English hero, owner 2026-10-13) gets its own row on phones. */
@media (max-width: 639px) { .hero-plans { flex-basis: 100%; } }
/* Three short facts on one line, each with a small tick (owner, 2026-10-13). When the line wraps, a fact
   moves whole to the next line, so no line ever starts or ends with a separator. */
.hero-free { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
@media (min-width: 1024px) { .hero-free { font-size: 14px; } }
.hero-free .sep { display: none; }
.hero-free span:not(.sep) { position: relative; padding-left: 18px; white-space: nowrap; max-width: 100%; }
@media (max-width: 420px) { .hero-free span:not(.sep) { white-space: normal; } }
.hero-free span:not(.sep)::before { content: ""; position: absolute; left: 1px; top: 0.55em; width: 9px; height: 4.5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.hero-plans { align-self: center; font-weight: 500; color: var(--ink); text-underline-offset: 3px; }

/* Hero right side: an AI chat publishing the site, overlapping the live result. Static HTML;
   with motion allowed the reply arrives after a short typing pause (CSS only). */
.hero-side { display: grid; gap: 28px; min-width: 0; }
.hero-demo { margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* The site is the background layer; the chat sits in front and covers most of it (owner, 2026-10-13). */
.hd-site { grid-area: 1 / 3 / 2 / 13; align-self: start; min-width: 0; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.hd-url { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; background: var(--paper); border-bottom: 1px solid var(--line); font: 500 var(--fs-xs)/1.2 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; }
.hd-site img { display: block; width: 100%; height: auto; }
.hd-chat {
  grid-area: 1 / 1 / 2 / 12; align-self: start; position: relative; z-index: 1; min-width: 0; margin-top: 17%;
  background: var(--surface); border: 2.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--pop); overflow: hidden;
}
.hd-chat-bar { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--paper); font: 500 var(--fs-xs)/1.2 var(--mono); color: var(--muted); }
.hd-log { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
.hd-log .msg { max-width: 94%; }
.hd-turn { display: grid; }
.hd-turn > * { grid-area: 1 / 1; }
.hd-reply { justify-self: start; }
.hd-reply p { margin: 0; }
.hd-link { display: flex; align-items: center; gap: 8px; margin-top: 4px !important; font: 500 14px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
/* Blue is for CTAs and main titles only: the user's bubble is ink (hero and How it works). */
.hd-chat .msg-user { background: var(--ink); color: var(--paper); }
.hd-dots { display: none; gap: 5px; justify-self: start; align-self: start; margin: 0; padding: 13px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }
.hd-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.hd-dots span:nth-child(2) { animation-delay: .2s; }
.hd-dots span:nth-child(3) { animation-delay: .4s; }
/* Translated home pages (old markup, no data-loop): one CSS-only reply after a typing pause */
@media (prefers-reduced-motion: no-preference) {
  .hero-demo:not([data-loop]) .hd-dots { display: flex; animation: hd-out 200ms ease 1.8s both; }
  .hero-demo:not([data-loop]) .hd-reply { animation: how-in 450ms cubic-bezier(.2, .7, .2, 1) 1.9s both; }
}
@keyframes hd-out { to { opacity: 0; visibility: hidden; } }

/* English hero: js/how.js loops two prompts (launch, then the domain) by setting .is-on on [data-steps].
   Without JS, or with reduced motion, both turns show and the bar shows the domain. */
.hd-win { display: inline-flex; gap: 5px; margin-right: 6px; }
.hd-win i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.hd-addr { display: inline-grid; min-width: 0; }
.hd-addr > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.hero-demo:not(.is-loop) .hd-live { display: none; }
.hd-chat-bar:has(.hd-pause) { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 4px; min-height: 40px; box-sizing: border-box; }
.hd-pause {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0 -8px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.hd-pause[hidden] { display: none; }
.hd-pause:hover { background: var(--bg); color: var(--ink); }
.hd-pause::before { content: ""; width: 9px; height: 10px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.hd-pause[data-state="paused"]::before { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-block: 5px solid transparent; }
.hd-step { display: flex; flex-direction: column; gap: 10px; }
.hero-demo.is-loop .hd-log { display: grid; }
.hero-demo.is-loop .hd-step { grid-area: 1 / 1; }
.hero-demo.is-loop .hd-dots { display: flex; }
.hero-demo.is-loop [data-steps] { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 350ms ease, visibility 350ms, transform 450ms cubic-bezier(.2, .7, .2, 1); }
.hero-demo.is-loop .hd-addr [data-steps] { transform: none; }
.hero-demo.is-loop [data-steps].is-on { opacity: 1; visibility: visible; transform: none; }
/* The site preview loops with the chat (owner, 2026-10-13 round 4): it comes in with the first reply,
   its address turns into the domain with the second, and it leaves in the gap before the loop restarts. */
.hero-demo.is-loop .hd-site[data-steps] { transition: opacity 600ms ease, visibility 600ms, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.hero-demo.is-loop .hd-site[data-steps]:not(.is-on) { transform: translateY(12px) scale(0.98); }
.hd-live, .hd-domain { min-width: 0; }
/* Owner 2026-10-14: the switch to the custom domain must be obvious. After Connect the old address slides up
   and away, the domain slides in on a yellow pill that flashes once, the bar gets a ring, and a "Your domain" tag shows. */
.hd-domain { margin-left: -6px; padding: 2px 6px; border-radius: 6px; font-weight: 700; color: var(--brand); }
.hd-tag { flex: none; margin-left: auto; padding: 3px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font: 700 11px/1.2 var(--body); letter-spacing: 0.02em; }
.hero-demo:not(.is-loop) .hd-domain { background: var(--field); }
/* On a phone the bar is too narrow for the tag; the pill and the flash carry the change there. */
@media (max-width: 559px) { .hd-tag { display: none; } }
.hero-demo.is-loop .hd-addr .hd-live:not(.is-on) { transform: translateY(-120%); }
.hero-demo.is-loop .hd-addr .hd-domain:not(.is-on) { transform: translateY(120%); }
.hero-demo.is-loop .hd-addr [data-steps] { transition: opacity 350ms ease, visibility 350ms, transform 450ms cubic-bezier(.2, .7, .2, 1); }
.hero-demo.is-loop .hd-domain.is-on { background: var(--field); animation: hd-flash 1.6s ease 300ms both; }
.hero-demo.is-loop .hd-tag:not(.is-on) { transform: scale(0.6); }
.hero-demo.is-loop .hd-tag.is-on { transition-delay: 500ms; }
.hero-demo.is-loop .hd-url:has(.hd-domain.is-on) { animation: hd-ring 1.6s ease 300ms both; }
@keyframes hd-flash { 0% { box-shadow: 0 0 0 0 var(--field); } 25% { box-shadow: 0 0 0 5px var(--field); transform: scale(1.06); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
@keyframes hd-ring { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; background: var(--paper); } 25%, 70% { box-shadow: inset 0 0 0 2px var(--live); background: var(--hl); } }
/* Older translated markup: the site appears once, when the AI first replies, and then stays. */
.hero-demo.is-loop [data-from] { opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 600ms, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.hero-demo.is-loop .hd-site[data-from] { transform: translateY(12px) scale(0.98); }
.hero-demo.is-loop [data-from].is-on { opacity: 1; visibility: visible; transform: none; }
.hero-demo.is-paused .hd-dots span { animation-play-state: paused; }

/* Copy button: quiet, never blue (blue is for CTAs and main titles) */
.hero-try .copy-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.hero-try .copy-btn:hover { background: var(--bg); }
.hero-try .copy-btn[data-copied] { background: var(--ink); color: var(--paper); }
@media (max-width: 959px) { .hd-link { font-size: var(--fs-xs); } }
@media (min-width: 960px) { .hd-chat { grid-column: 1 / 11; margin-top: 15%; } .hd-log { padding: 16px 14px; } }
@media (min-width: 640px) and (max-width: 959px) { .hero-demo { max-width: 540px; } }
/* Domain step (owner 2026-10-13 round 6): the AI's link opens the DNS host's Domain Connect window over the chat;
   the cursor glides to Connect and clicks it. A plain, unbranded registrar-style window. Only while the loop runs. */
.hd-href { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.hd-approve { grid-area: 1 / 2 / 2 / 13; align-self: start; position: relative; z-index: 2; min-width: 0; margin-top: 30%; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(35, 34, 29, 0.22); overflow: hidden; }
.hero-demo:not(.is-loop) .hd-approve { display: none; }
.hd-ap-body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.hd-ap-title { margin: 0; font: 700 var(--fs-body)/1.3 var(--body); color: var(--ink); }
.hd-ap-text { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.hd-ap-btns { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.hd-ap-swap { display: inline-grid; }
.hd-ap-swap > * { grid-area: 1 / 1; }
.hd-ap-go, .hd-ap-ok { padding: 8px 18px; border-radius: 8px; font: 600 var(--fs-sm)/1.2 var(--body); text-align: center; }
.hd-ap-go { background: var(--ink); color: var(--paper); }
.hd-ap-ok { background: var(--ok-bg); color: var(--ok); }
.hd-ap-no { padding: 8px 12px; font: 500 var(--fs-sm)/1.2 var(--body); color: var(--muted); }
.hd-cursor { position: absolute; left: 70px; top: calc(100% - 42px); width: 22px; height: 22px; fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.hero-demo.is-loop .hd-cursor[data-steps] { transition: opacity 300ms ease, visibility 300ms, transform 900ms cubic-bezier(.3, .7, .2, 1); }
.hero-demo.is-loop .hd-cursor[data-steps]:not(.is-on) { transform: translate(90px, 50px); }
.hero-demo.is-loop .hd-approve:has(.hd-ap-ok.is-on) .hd-cursor { animation: how-click 260ms ease; }
@media (max-width: 959px) { .hd-approve { margin-top: 26%; } }
/* Very narrow phones: the chat's title bar stays on one line. */
@media (max-width: 359px) { .hd-chat-bar > span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } }

/* ---------- How it works: three simple steps (owner 2026-10-14). Pure CSS drawings, tokens only, so dark works. ---------- */
.steps { padding: var(--section) 0 0; }
.steps-head { margin: 0 0 28px; }
.steps-head h2 { margin: 0 0 8px; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; counter-reset: none; }
@media (min-width: 860px) { .steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.step { display: grid; grid-template-rows: auto 1fr; gap: 20px; min-width: 0; }
.step-art {
  display: grid; place-items: center; height: 220px; padding: 22px 18px; box-sizing: border-box;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.step-body { position: relative; padding-left: 72px; min-width: 0; }
.step-num {
  position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 56px; height: 56px; margin: 0;
  border: 2px solid var(--line-strong); border-radius: 50%; background: var(--field); color: var(--brand);
  font: 700 28px/1 var(--display);
}
.step h3 { margin: 0 0 6px; font-size: var(--fs-h3, 22px); line-height: 1.25; }
.step-body p { margin: 0; color: var(--muted); line-height: 1.5; }
.step-body a { color: var(--primary); }
.step-addr { font-family: var(--mono); font-size: .9em; color: var(--ink); white-space: nowrap; }
.step-body .step-note { margin-top: 12px; font-size: var(--fs-sm); }

/* Step 1: a chat ask and the finished site. Step 3: the same site in a browser at its address. */
.sa-chat { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
.sa-chat .msg { max-width: 92%; }
.step .msg-user { background: var(--ink); color: var(--paper); }
.sa-site {
  display: grid; gap: 7px; width: 62%; padding: 8px; align-self: flex-start;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 10px;
}
.sa-nav, .sa-row { display: flex; gap: 6px; }
.sa-nav i { height: 5px; width: 18%; border-radius: 3px; background: var(--line); }
.sa-nav i:first-child { width: 26%; background: var(--brand); }
.sa-hero { display: grid; gap: 5px; padding: 10px; border-radius: 6px; background: var(--field); }
.sa-hero i { display: block; height: 6px; width: 70%; border-radius: 3px; background: var(--brand); }
.sa-hero i + i { width: 48%; opacity: .5; }
.sa-hero b { display: block; height: 10px; width: 30%; margin-top: 3px; border-radius: 5px; background: var(--primary); }
.sa-row i { flex: 1; height: 18px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); }
.sa-browser { width: 100%; max-width: 320px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.sa-url {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--line);
  font: 500 13px/1.2 var(--mono); color: var(--ink); min-width: 0;
}
.sa-url span + span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-site-big { width: auto; border: 0; border-radius: 0; padding: 12px; gap: 9px; }
.sa-site-big .sa-hero { padding: 16px 12px; }
/* Step 2: the real prompt with its Copy button, inside a chat box. */
.step-art-paste { place-items: stretch; align-content: center; }
.step-art-paste .prompt-line { background: var(--surface); }
.step-art-paste .prompt-line code { flex-basis: 100%; font-size: var(--fs-body); text-wrap: balance; }
.step-art-paste .prompt-line .copy-btn { margin-left: auto; }

/* ---------- Why Page Lemon: five plain cards (owner 2026-10-14). Generic comparisons only, no names or numbers. ---------- */
.why { padding: var(--section) 0 0; }
.why-head { margin: 0 0 28px; max-width: 46em; }
.why-head h2 { margin: 0 0 8px; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } .why-card { grid-column: span 2; } .why-card:nth-child(4) { grid-column: 2 / span 2; } }
.why-card { margin: 0; padding: 22px 20px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); min-width: 0; }
.why-icon {
  width: 40px; height: 40px; padding: 8px; box-sizing: border-box; margin: 0 0 14px; border-radius: 12px;
  background: var(--field); fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.why-card h3 { margin: 0 0 6px; font-size: var(--fs-body); line-height: 1.3; }
.why-card p { margin: 0; line-height: 1.5; }
.why-card .why-else { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- One chat does it all: five tabs, each a short chat and the real site it changes (js/how.js) ----------
   Without JS, or with reduced motion, every scene shows its end state. */
.how { padding: var(--section) 0 0; }
.how-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 28px; }
.how-head h2 { margin: 0 0 8px; }
.how-lede { margin: 0; font-size: var(--fs-lede); line-height: 1.4; color: var(--muted); }
/* Pause / play (owner 2026-10-14): a small, quiet icon button, like the hero's. Two bars while the examples play,
   a triangle once paused; pausing freezes the scene and the tab's progress bar where they are, play carries on. */
.how-pause {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0 -6px 2px 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; opacity: .75;
}
.how-pause[hidden] { display: none; }
.how-pause:hover, .how-pause:focus-visible { opacity: 1; color: var(--ink); background: var(--line); }
.how-pause::before { content: ""; width: 9px; height: 10px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.how-pause[data-state="paused"]::before { width: 0; height: 0; margin-left: 2px; border: 0; border-left: 9px solid currentColor; border-block: 5px solid transparent; }
.how-pause[data-state="paused"] { opacity: 1; color: var(--ink); }

/* Phones (owner 2026-10-14): one row that scrolls sideways with snap and a fade at the edges, never 3 lines;
   js/how.js scrolls the current tab into view. From 760 px: five equal columns. */
.how-tabs {
  display: flex; gap: 18px; margin: 0 calc(-1 * var(--gutter)) 24px; padding: 0 var(--gutter);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter); scrollbar-width: none; touch-action: pan-x pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 28px), transparent);
}
.how-tabs::-webkit-scrollbar { display: none; }
.how-tabs .how-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
@media (min-width: 760px) {
  .how-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0 0 24px; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .how-tabs .how-tab { white-space: normal; }
}
.how-tab {
  align-self: start; margin: 0; padding: 0 0 8px; border: 0; background: none; text-align: left; cursor: pointer;
  font: 500 var(--fs-sm)/1.3 var(--body); color: var(--muted);
}
@media (min-width: 760px) { .how-tab { font-size: var(--fs-body); } }
.how-tab:hover, .how-tab[aria-selected="true"] { color: var(--ink); }
.how-tab[aria-selected="true"] { font-weight: 600; }
.how-bar { display: block; height: 4px; margin: 0 0 12px; border-radius: 4px; background: var(--line); overflow: hidden; }
.how-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.how.is-still .how-tab[aria-selected="true"] .how-bar i { transform: none; }

.how-panel-title { margin: 40px 0 14px; }
.how-panel:first-of-type .how-panel-title { margin-top: 0; }
.how.is-js .how-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.how.is-js .how-panel:not([hidden]) { animation: how-fade 500ms ease both; }
.how-panel:focus-visible { outline-offset: 8px; border-radius: 12px; }
.how-note { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--muted); }

.how-stage { display: grid; gap: 16px; }
@media (min-width: 900px) { .how-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: stretch; } }

/* The AI chat: big, readable bubbles are the focus */
.how-chat {
  display: flex; flex-direction: column; height: 400px; min-width: 0;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 20px; overflow: hidden;
}
/* The chat never sets the row height: it matches the browser and older messages scroll off the top */
@media (min-width: 900px) { .how-chat { height: auto; min-height: 400px; contain: size; } }
.how-chat-bar { margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--paper); font: 500 var(--fs-xs)/1.2 var(--mono); color: var(--muted); }
.how-log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px 12px; overflow: hidden; }
@media (min-width: 900px) { .how-log { gap: 12px; padding: 18px 16px; } }
.hb { margin: 0; max-width: 92%; padding: 10px 14px; border-radius: 18px; font-size: var(--fs-body); line-height: 1.4; }
@media (min-width: 900px) { .hb { font-size: var(--fs-h3); padding: 13px 18px; } }
.hb-user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 6px; }
.hb-ai { align-self: flex-start; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.hb-new { background: var(--ok-bg); border: 2px solid var(--live); }
.hb-new b { display: block; margin: 0 0 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
/* Crumb: the AI's list of recent enquiries (smaller lines so all five fit the chat on phones) */
.hb-list p { margin: 0 0 6px; }
.hb-list ol { margin: 0; padding: 0 0 0 1.3em; font-size: var(--fs-sm); line-height: 1.4; }
.hb-list li + li { margin-top: 2px; }
.hb-list b { font-weight: 600; }
@media (min-width: 900px) { .hb.hb-list { font-size: 18px; } .hb-list ol { font-size: 16px; } }
.hb-dots { display: none; align-self: flex-start; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.hb-dots span { display: inline-block; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.hb-dots span:nth-child(2) { animation-delay: .2s; }
.hb-dots span:nth-child(3) { animation-delay: .4s; }
.how-composer { margin: 0 12px 12px; padding: 12px 14px; min-height: 50px; border: 1.5px solid var(--line-strong); border-radius: 14px; font-size: var(--fs-body); line-height: 1.4; }
.how-typed:empty::before { content: "Message your AI"; color: var(--muted); }
.how-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em; background: var(--ink); visibility: hidden; }

/* The browser: real Page Lemon templates (English: Summit, Sprint, Crumb, Sorrel; translated: Links, Terrace, Vow, Tidy) */
.how-browser { min-width: 0; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.how-url { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 9px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.how-addr {
  display: inline-flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 6px 12px;
  border-radius: 999px; background: var(--bg); font: 500 14px/1.3 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden;
}
.how-lock { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 1.7; stroke-linecap: round; }
.how-swap { display: inline-grid; }
.how-swap > * { grid-area: 1 / 1; }
.how-swap-end { flex: 0 0 auto; justify-items: end; }
.how-new { margin: 0 -5px; padding: 0 5px; border-radius: 6px; }
.how-pill { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 500 13px/1.2 var(--body); color: var(--ink); white-space: nowrap; }
.how-pill-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.how-pill-sam { flex: 0 0 auto; padding: 3px 11px 3px 3px; gap: 7px; background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.how-pill-sam b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.how-view { position: relative; container-type: inline-size; aspect-ratio: 8 / 5; overflow: hidden; background: #120E0B; }
.how-view img { display: block; width: 100%; height: 100%; object-fit: cover; }
.how-layer { position: absolute; inset: 0; }
.how-load { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--live); transform-origin: left; }

/* Launch scene: the site starts as a file on your computer */
.how-local { margin: 0 8px 0 -4px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 500 12px/1.3 var(--body); color: var(--muted); }
.how-view-light { background: var(--surface); }
@media (max-width: 899px) { .how-panel[data-scene="launch"] .how-chat { height: 480px; } }

/* Julian's cursor and selection on the Vow invitation */
.how-sel.how-sel-vow { left: 71.6%; top: 58.3%; width: 14%; height: 9.4%; }
.how-cursor-ed { --x: 92cqw; --y: 56cqw; }
.how-cursor-ed svg { fill: var(--ok); }
.how-cursor-ed b { margin: 18px 0 0 -6px; padding: 3px 8px; border-radius: 6px; background: var(--ok); color: #FFFFFF; font: 600 12px/1.2 var(--body); }
.how-stage:not(.is-anim) .how-cursor-ed { --x: 82cqw; --y: 40cqw; }

/* Sam's cursor and selection (Brasa; translated home pages) */
.how-sel { position: absolute; left: 60.5%; top: 38%; width: 33%; height: 17.5%; border: 2px solid var(--live); border-radius: 6px; background: rgba(46, 158, 91, 0.14); }
.how-cursor {
  position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: flex-start; pointer-events: none;
  transform: translate(var(--x), var(--y));
  transition: transform 1300ms cubic-bezier(.45, 0, .2, 1), opacity 500ms ease, visibility 500ms;
}
.how-cursor svg { width: clamp(18px, 3.6cqw, 26px); height: auto; fill: var(--ink); stroke: #FFFFFF; stroke-width: 1.5; stroke-linejoin: round; }
.how-cursor-sam { --x: 90cqw; --y: 54cqw; }
.how-cursor-sam svg { fill: var(--ok); }
.how-cursor-sam b { margin: 18px 0 0 -6px; padding: 3px 8px; border-radius: 6px; background: var(--ok); color: #FFFFFF; font: 600 12px/1.2 var(--body); }
.how-stage:not(.is-anim) .how-cursor-sam { --x: 84cqw; --y: 32cqw; }
.how-cursor-guest { --x: 24cqw; --y: 52cqw; }
.how-cursor.is-click svg { animation: how-click 320ms ease; }

/* The booking form that appears on the site. Base look: Brasa (translated home pages); .bk-tidy below */
.bk {
  position: absolute; left: 55%; top: 15%; width: 40%; padding: 2.4cqw;
  background: #201812; color: #EFE6D8; border: 1px solid #67564A; border-top: 3px solid #FF6A2B;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.45); font-family: var(--body);
}
@container (max-width: 560px) { .bk { left: 38%; width: 58%; top: 14%; } }
.bk-title { margin: 0 0 1.6cqw; font: 800 clamp(14px, 3.4cqw, 26px)/1 'Big Shoulders Display', var(--body); text-transform: uppercase; letter-spacing: 0.02em; }
.bk-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; margin: 0 0 1.4cqw; }
.bk-days span { display: grid; justify-items: center; gap: 0.4cqw; padding: 1cqw 0; border: 1px solid #67564A; border-radius: 1cqw; font: 600 clamp(11px, 2.3cqw, 17px)/1 var(--body); transition: background 300ms ease, color 300ms ease, border-color 300ms ease; }
.bk-days small { font: 500 clamp(8px, 1.4cqw, 11px)/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: #B7A99B; }
.bk-pick.is-on, .how-stage:not(.is-anim) .bk-pick { background: #FF6A2B; border-color: #FF6A2B; color: #120E0B; }
.bk-pick.is-on small, .how-stage:not(.is-anim) .bk-pick small { color: #120E0B; }
.bk-row { display: flex; gap: 1cqw; margin: 0 0 1.4cqw; }
.bk-row span { flex: 1; padding: 1cqw 1.2cqw; border: 1px solid #67564A; border-radius: 1cqw; font: 500 clamp(9px, 1.8cqw, 14px)/1.2 var(--body); }
.bk-pay { display: grid; place-items: center; margin: 0; padding: 1.5cqw; border-radius: 1cqw; background: #FF6A2B; color: #120E0B; font: 600 clamp(10px, 2cqw, 15px)/1 var(--body); transition: background 400ms ease; }
.bk-pay.is-on, .how-stage:not(.is-anim) .bk-pay { background: #EFE6D8; }
.bk-swap { display: inline-grid; justify-items: center; }
.bk-swap > * { grid-area: 1 / 1; }

/* The booking form on Tidy (Sunday Home): its own cream, plum and peach */
.bk-tidy { background: #FFF9F2; color: #392B43; border: 2px solid #392B43; border-radius: 2cqw; box-shadow: 0.8cqw 0.8cqw 0 #392B43; }
.bk-tidy .bk-title { font: 700 clamp(14px, 3cqw, 24px)/1.1 var(--body); text-transform: none; letter-spacing: -0.01em; }
.bk-tidy .bk-days span, .bk-tidy .bk-row span { border-color: #D9C9D6; }
.bk-tidy .bk-days small { color: #6E5F78; }
.bk-tidy .bk-pick.is-on, .how-stage:not(.is-anim) .bk-tidy .bk-pick { background: #F5CBBB; border-color: #392B43; color: #392B43; }
.bk-tidy .bk-pick.is-on small, .how-stage:not(.is-anim) .bk-tidy .bk-pick small { color: #392B43; }
.bk-tidy .bk-pay { border-radius: 999px; background: #392B43; color: #FFF9F2; }
.bk-tidy .bk-pay.is-on, .how-stage:not(.is-anim) .bk-tidy .bk-pay { background: #DCEBE0; color: #392B43; }

/* ---------- English home scenes: Summit (edit together), Sprint (protect), Crumb (form), Sorrel (booking) ---------- */
/* Expand icon: opens the template's page */
.how-open { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0 -4px 0 0; border-radius: 8px; color: var(--muted); }
.how-open:hover { background: var(--bg); color: var(--ink); }
.how-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hb-link { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Summit: a toast when a co-editor publishes */
.how-toast {
  position: absolute; right: 3cqw; bottom: 3cqw; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px 8px 8px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(35, 34, 29, 0.18);
  font: 500 clamp(13px, 2.4cqw, 16px)/1.2 var(--body);
}
.how-toast b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #FFFFFF; font-size: var(--fs-xs); font-weight: 600; }

/* Sprint: the passcode page on Page Lemon, then the gate visitors see */
.pc-veil { position: absolute; inset: 0; background: rgba(255, 253, 245, 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.pc-page { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); }
.pc-card {
  display: grid; justify-items: center; gap: 1.8cqw; width: min(80%, 380px); margin: 0; padding: 3.4cqw 3.6cqw;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(35, 34, 29, 0.14); text-align: center;
}
.pc-card p { margin: 0; }
.pc-gate { position: absolute; left: 10%; right: 10%; top: 50%; width: auto; transform: translateY(-50%); }
.how-view .pc-brand img { width: 20px; height: 20px; }
.pc-brand { display: inline-flex; align-items: center; gap: 6px; font: 600 clamp(11px, 2cqw, 14px)/1 var(--body); }
.pc-title { font: 600 clamp(13px, 2.8cqw, 20px)/1.25 var(--body); }
.pc-sub { margin-top: -1cqw !important; font: 400 clamp(11px, 2.1cqw, 15px)/1.3 var(--body); color: var(--muted); }
.pc-code { display: flex; gap: clamp(4px, 1cqw, 8px); }
.pc-code span { display: grid; place-items: center; width: clamp(22px, 5.4cqw, 40px); aspect-ratio: 4 / 5; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--paper); }
.pc-code i { width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.pc-btn { padding: 1.3cqw 2.6cqw; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 clamp(11px, 2cqw, 14px)/1 var(--body); }

/* Crumb: the bakery's contact form (its own cream, ink and riso pink), then the email it becomes */
.cf {
  position: absolute; right: 4%; top: 7%; width: 44%; display: grid; gap: 1.1cqw; margin: 0; padding: 2.4cqw;
  background: #FBF4E6; color: #1B1B3A; border: 2px solid #1B1B3A; box-shadow: 1cqw 1cqw 0 #FF48B0; font-family: var(--body);
}
.cf p { margin: 0; }
.cf-title { font: 800 clamp(14px, 3.4cqw, 26px)/1 var(--body); letter-spacing: -0.02em; }
.cf-field { display: grid; gap: 0.4cqw; }
.cf-field small { font: 600 clamp(9px, 1.5cqw, 12px)/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; }
.cf-field span { min-height: 1.3em; padding: 0.8cqw 1.2cqw; background: #FFFFFF; border: 1.5px solid #1B1B3A; font: 500 clamp(10px, 1.9cqw, 15px)/1.3 var(--body); }
.cf-msg span { min-height: 2.6em; }
.cf-send { justify-self: start; padding: 1.1cqw 2.8cqw; background: #FF48B0; color: #1B1B3A; border: 2px solid #1B1B3A; font: 700 clamp(10px, 2cqw, 15px)/1 var(--body); transition: background 300ms ease, color 300ms ease; }
.cf-send.is-on, .how-stage:not(.is-anim) .cf-send { background: #1B1B3A; color: #FBF4E6; }
@container (max-width: 560px) { .cf { width: 62%; right: 3%; top: 4%; gap: 0.8cqw; } .cf-msg span { min-height: 1.3em; } }

/* Emails (Crumb form message; Sorrel booking to the owner and to the guest) */
.how-mail {
  position: absolute; display: grid; gap: 0.9cqw; width: 52%; margin: 0; padding: 2.2cqw 2.6cqw;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(35, 34, 29, 0.2);
  font: 400 clamp(11px, 1.9cqw, 15px)/1.35 var(--body);
}
.how-mail p { margin: 0; }
.hm-head { display: grid; gap: 0.3cqw; padding: 0 0 0.9cqw; border-bottom: 1px solid var(--line); }
.hm-head b { font-weight: 600; font-size: 1.08em; }
.hm-head small, .hm-row small { display: block; color: var(--muted); font-size: 0.85em; }
.hm-head small::before { content: "✉ "; }
.how-mail-one { left: 24%; top: 10%; }
.how-mail-owner { left: 4%; top: 10%; width: 48%; }
.how-mail-guest { right: 4%; top: 48%; width: 48%; }
@container (max-width: 560px) { .how-mail-one { left: 8%; width: 84%; } .how-mail-owner, .how-mail-guest { width: 62%; } .how-mail-guest { top: 52%; } }

/* Sorrel: the booking form (its own butter paper and sorrel green) */
.sb {
  position: absolute; right: 4%; top: 8%; width: 46%; display: grid; gap: 1.3cqw; margin: 0; padding: 2.6cqw;
  background: #E9D995; color: #294D36; border: 1px solid #294D36; box-shadow: 0 2cqw 5cqw rgba(41, 77, 54, 0.25); font-family: var(--body);
}
.sb p { margin: 0; }
.sb-title { font: 400 clamp(15px, 3.6cqw, 28px)/1 Georgia, 'Times New Roman', serif; }
.sb-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8cqw; }
.sb-size { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-row span { display: grid; place-items: center; padding: 1cqw 0.3cqw; background: #F8F5EA; border: 1px solid #294D36; font: 600 clamp(9px, 1.8cqw, 14px)/1.1 var(--body); white-space: nowrap; transition: background 300ms ease, color 300ms ease; }
.sb-go { display: grid; place-items: center; padding: 1.4cqw; background: #294D36; color: #F8F5EA; font: 600 clamp(10px, 2cqw, 15px)/1 var(--body); transition: background 300ms ease; }
.sb .pick.is-on, .how-stage:not(.is-anim) .sb .pick { background: #294D36; color: #F8F5EA; }
.sb .sb-go.is-on, .how-stage:not(.is-anim) .sb .sb-go { background: #B83928; }
@container (max-width: 560px) { .sb { width: 64%; right: 3%; top: 4%; } }

/* Scene motion (only while js/how.js plays) */
.how-stage.is-anim .how-toast,
.how-stage.is-anim .how-mail,
.how-stage.is-anim .cf,
.how-stage.is-anim .sb { transition: opacity 600ms ease, visibility 600ms, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.how-stage.is-anim .how-toast:not(.is-on) { transform: translateY(3cqw); }
.how-stage.is-anim .how-mail:not(.is-on) { transform: translate(4cqw, -3cqw) scale(0.8); }
.how-stage.is-anim .how-mail-guest { transition-delay: 900ms; }
.how-stage.is-anim .cf:not(.is-on) { transform: translate(-6cqw, 3cqw) scale(0.8); }
.how-stage.is-anim .sb:not(.is-on) { transform: translateY(3cqw); }
.how-stage.is-anim .pc-code i { transition-duration: 150ms; }

/* ---------- English scenes, round 4 (2026-10-13): every step the user takes is shown ---------- */
/* clip: the cursor never makes the page scroll sideways */
.how-stage { position: relative; overflow: clip; overflow-clip-margin: 8px; }
/* One cursor per scene, above the chat and the browser, so it can click a link in the chat and then a
   button on the page. It shows only while it has something to do. */
.how-stage > .how-cursor { z-index: 5; opacity: 0; visibility: hidden; }
.how-stage > .how-cursor.is-shown { opacity: 1; visibility: visible; }
.how-stage > .how-cursor svg { width: 24px; }
.how-stage:not(.is-anim) .how-cursor { display: none; }
.how-cursor.is-jump { transition: none; }
/* Click feedback: whatever the cursor clicks is pressed for a moment */
.hb-link, .pl-btn, .cf-send, .sb-row span, .sb-go, .how-send { transition: transform 120ms ease, filter 120ms ease, background 300ms ease, color 300ms ease; }
.how-stage .is-press { transform: scale(0.94); filter: brightness(0.88); }
.how-stage .hb-link.is-press { transform: none; filter: none; background: color-mix(in srgb, var(--primary) 16%, transparent); }
.hb-link { color: var(--primary); border-radius: 4px; }

/* The composer's send button: grey while empty, ink while there is a message to send */
.how-composer { position: relative; padding-right: 52px; }
.how-send { position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--line); }
.how-send::before { content: ""; width: 8px; height: 8px; margin-top: 4px; border-left: 2.5px solid var(--surface); border-top: 2.5px solid var(--surface); transform: rotate(45deg); }
.how-composer:has(.how-typed:not(:empty)) .how-send { background: var(--ink); }

/* A field the visitor clicked: focused, with a caret after what they type */
.how-stage.is-anim .how-fill.is-focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.how-stage.is-anim .how-fill.is-focus::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: currentColor; animation: blink 1s steps(1) infinite; }
/* Crumb's fields: all three one line high, and they never grow while text is typed */
.cf-field span { display: block; box-sizing: border-box; height: calc(1.3em + 1.6cqw + 3px); min-height: 0; white-space: nowrap; overflow: hidden; }
.cf-msg span { min-height: 0; }

/* Page Lemon's own pages (approve, choose a passcode, members sign-in), as in the app: paper, a white card */
.pl-page { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); border-top: 3px solid var(--field); }
.pl-card {
  display: grid; gap: 1.3cqw; width: min(80%, 400px); margin: 0; padding: 3cqw 3.4cqw; box-sizing: border-box;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(35, 34, 29, 0.04), 0 8px 24px rgba(35, 34, 29, 0.08);
  font: 400 clamp(10px, 2.1cqw, 15px)/1.4 var(--body); text-align: left;
}
.pl-card p { margin: 0; }
.pl-brand { display: inline-flex; align-items: center; gap: 6px; font: 800 clamp(10px, 1.8cqw, 13px)/1 var(--display); }
.how-view .pl-brand img, .how-view .bkv-top img { width: clamp(14px, 2.6cqw, 20px); height: auto; }
.pl-title { font: 700 clamp(13px, 2.7cqw, 20px)/1.2 var(--body); color: var(--brand); }
.pl-note { font-size: 0.88em; color: var(--muted); }
.pl-btns { display: flex; gap: 1cqw; margin-top: 0.4cqw !important; }
.pl-btn { display: inline-grid; place-items: center; padding: 1.1cqw 2.4cqw; border: 1.5px solid var(--primary); border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 600; white-space: nowrap; }
.pl-btn-2 { background: var(--surface); border-color: rgba(35, 34, 29, 0.26); color: var(--ink); }
.pl-btn-wide { flex: 1; }
.pl-swap { display: grid; }
.pl-swap > * { grid-area: 1 / 1; }
.pl-done { align-self: center; font-weight: 600; color: var(--ok); }
.pl-seg { display: flex; gap: 2px; width: fit-content; padding: 2px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.88em; }
.pl-seg span { padding: 0.5cqw 1.6cqw; border-radius: 999px; white-space: nowrap; }
.pl-seg .is-cur { background: var(--bg); font-weight: 600; }
/* The connect screen: "It will be able to", the publish line, then the "manage" box (unticked by default) */
.pl-sub { font-weight: 700; }
.pl-tick { position: relative; padding-left: 1.4em; }
.pl-tick::before { content: ""; position: absolute; left: 0.2em; top: 0.4em; width: 0.6em; height: 0.3em; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.pl-check { display: flex; align-items: flex-start; gap: 0.6em; }
.pl-box { flex: none; display: grid; place-items: center; width: 1.15em; height: 1.15em; margin-top: 0.12em; border: 1.5px solid rgba(35, 34, 29, 0.4); border-radius: 4px; background: var(--surface); transition: background 150ms ease, border-color 150ms ease, transform 120ms ease, filter 120ms ease; }
.pl-box.is-on { background: var(--primary); border-color: var(--primary); }
.pl-box.is-on::after { content: ""; width: 0.5em; height: 0.25em; margin-top: -0.12em; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg); }
.pl-field { display: grid; gap: 0.5cqw; }
.pl-field small { font-size: 0.92em; font-weight: 600; }
.pl-input { display: block; box-sizing: border-box; height: calc(1.4em + 1.8cqw + 3px); padding: 0.9cqw 1.4cqw; border: 1.5px solid rgba(35, 34, 29, 0.26); border-radius: 10px; background: var(--surface); white-space: nowrap; overflow: hidden; letter-spacing: 0.12em; }
.how-stage.is-anim .pl-input.how-fill.is-focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.pl-toast { position: absolute; left: 50%; bottom: 3cqw; transform: translateX(-50%); margin: 0; padding: 1cqw 2cqw; border-radius: 10px; background: var(--ink); color: var(--paper); font: 500 clamp(10px, 1.8cqw, 14px)/1.3 var(--body); white-space: nowrap; }
@container (max-width: 480px) { .pl-card { width: 88%; gap: 1.1cqw; padding: 2.6cqw 3cqw; } .pl-card .pl-note { display: none; } }

/* The page a protected site shows its visitors (served by Page Lemon: cream, navy, a yellow button) */
.gate { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); color: var(--brand); font: 400 clamp(10px, 2cqw, 16px)/1.5 system-ui, sans-serif; }
.gate-box { display: grid; gap: 1.2cqw; width: min(72%, 380px); }
.gate p { margin: 0; }
.gate-title { font-size: 1.5em; font-weight: 700; line-height: 1.2; }
.gate-input { padding: 0.9cqw 1.3cqw; border: 1.5px solid var(--brand); border-radius: 10px; background: var(--surface); color: color-mix(in srgb, var(--brand) 55%, transparent); }
.gate-btn { padding: 0.9cqw 1.3cqw; border-radius: 10px; background: var(--field); font-weight: 600; text-align: center; }

/* Sorrel: the bookings list in the Page Lemon app (mirrors the app's Bookings tab) */
.bkv { position: absolute; inset: 0; overflow: hidden; background: var(--paper); border-top: 3px solid var(--field); color: var(--ink); font: 400 clamp(8px, 1.8cqw, 14px)/1.35 var(--body); }
.bkv p, .bkv ul { margin: 0; }
.bkv-top { display: flex; align-items: center; gap: 6px; padding: 1.2cqw 3cqw; border-bottom: 1px solid var(--line); font: 800 clamp(9px, 1.6cqw, 13px)/1 var(--display); }
.bkv-main { display: grid; gap: 1.3cqw; padding: 2cqw 3cqw; }
.bkv-site { font: 700 clamp(12px, 2.6cqw, 20px)/1.1 var(--body); color: var(--brand); }
.bkv-tabs { display: flex; gap: 2.6cqw; border-bottom: 1px solid var(--line); }
.bkv-tabs span { padding: 0 0 0.8cqw; color: var(--muted); }
.bkv-tabs .is-cur { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--field); }
.bkv-ctl { display: flex; gap: 0.8cqw; }
.bkv-ctl span { padding: 0.5cqw 1.8cqw; border: 1px solid rgba(35, 34, 29, 0.26); border-radius: 999px; background: var(--surface); font-weight: 600; }
.bkv-ctl .is-cur { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.bkv-day { font-weight: 700; }
.bkv-list { list-style: none; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.bkv-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2cqw; align-items: center; padding: 1.1cqw 1.8cqw; }
.bkv-list li + li { border-top: 1px solid var(--line); }
.bkv-row { display: flex; align-items: center; gap: 0.8cqw; }
.bkv-row i { padding: 0.1em 0.6em; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82em; font-style: normal; color: var(--muted); }
.bkv-who { grid-column: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkv-acts { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 0.6cqw; }
.bkv-acts span { padding: 0.5cqw 1.4cqw; border: 1px solid rgba(35, 34, 29, 0.26); border-radius: 999px; font-size: 0.92em; font-weight: 600; }
.bkv-acts .bkv-x { border-color: var(--alert); color: var(--alert); }
@container (max-width: 480px) { .bkv-acts span:not(.bkv-x) { display: none; } .bkv-main { gap: 1cqw; } }

/* ---------- Round 5 (2026-10-13) ---------- */
/* Whose chat it is: "You", then "Sam" once Sam's own AI takes over (Edit together) */
.how-chat-bar:has(.how-who) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 9px; }
.how-chat-bar:has(.how-who) > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.how-who { flex: none; font: 600 var(--fs-xs)/1 var(--body); color: var(--ink); }
.how-who > * { padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.how-who .how-new { margin: 0; }
/* The invite email Sam gets, with its button */
.how-mail-invite { top: 14%; }
.hm-btns { margin-top: 0.4cqw !important; }
.how-mail .pl-btn { padding: 1cqw 2.4cqw; font-size: 0.95em; }
/* The link that ends an AI's list (the dashboard) */
.hb-list .hb-more { margin: 8px 0 0; font-size: var(--fs-sm); }
@media (min-width: 900px) { .hb-list .hb-more { font-size: 16px; } }
/* The visitor's page on a protected site, as Page Lemon serves it: title, line, password field, button, small print */
.gate-input { display: block; box-sizing: border-box; height: calc(1.5em + 1.8cqw + 3px); white-space: nowrap; overflow: hidden; color: var(--brand); letter-spacing: 0.14em; }
.gate-input:empty::before { content: attr(data-placeholder); letter-spacing: 0; color: color-mix(in srgb, var(--brand) 55%, transparent); }
.how-stage.is-anim .gate-input.is-focus { outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.gate-small { font-size: 0.8em; opacity: 0.75; }
.gate-btn { transition: transform 120ms ease, filter 120ms ease; }
/* A 6-digit passcode goes in 6 boxes (owner 2026-10-13 round 6, as the real unlock page); fixed size while typed. */
.gate-label { font-size: 0.85em; font-weight: 600; }
.gate-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1cqw; }
.gate-code i { display: grid; place-items: center; box-sizing: border-box; height: calc(1.25em + 1.6cqw); border: 1.5px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 8px; background: var(--surface); font-style: normal; font-weight: 700; font-size: 1.3em; line-height: 1; color: var(--brand); }
.how-stage.is-anim .gate-code.is-focus i.is-cur { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.how-stage.is-anim .gate-code.is-focus { outline: 0; }
.how-stage.is-anim .gate-code.is-focus::after { content: none; }
/* The owner chooses the passcode in 6 boxes too (owner 2026-10-14), smaller than on the visitor page. */
.pl-code { gap: 0.8cqw; }
.pl-code i { height: calc(1.2em + 1.6cqw); font-size: 1.25em; border-color: rgba(35, 34, 29, 0.26); color: var(--ink); }
/* The team answer's list: bullets, not numbers */
.hb-list ul { margin: 0; padding: 0 0 0 1.2em; font-size: var(--fs-sm); line-height: 1.4; }
@media (min-width: 900px) { .hb-list ul { font-size: 16px; } }
/* Crumb: the Messages tab in the Page Lemon app (form picker, Inbox filter, each message with Archive and Bin) */
.msv-ctl .msv-sel { position: relative; padding-right: 2.6cqw; background: var(--surface); border-radius: 8px; font-weight: 500; }
.msv-ctl .msv-sel::after { content: ""; position: absolute; right: 1cqw; top: 40%; width: 0.4em; height: 0.4em; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-50%) rotate(45deg); }
.msv-list .bkv-row small { color: var(--muted); font-size: 0.86em; }
.msv-list .bkv-row .msv-new { border-color: transparent; background: var(--field); color: var(--ink); font-weight: 600; }
.msv-list li { padding-block: 0.9cqw; }

.how-stage.is-anim .pl-page,
.how-stage.is-anim .gate,
.how-stage.is-anim .bkv { transition: opacity 450ms ease, visibility 450ms; }
.how-stage.is-anim .pl-page .pl-card { transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.how-stage.is-anim .pl-page:not(.is-on) .pl-card { transform: translateY(2cqw); }
.how-stage.is-anim .pl-toast { transition: opacity 400ms ease, visibility 400ms, transform 500ms cubic-bezier(.2, .7, .2, 1); }
.how-stage.is-anim .pl-toast:not(.is-on) { transform: translate(-50%, 2cqw); }

/* Animation states, only while js/how.js plays a scene */
.fx { transition: opacity 600ms ease, visibility 600ms; }
.fx-slow { transition-duration: 1200ms; }
.how-stage:not(.is-anim) .fx[data-until],
.how-stage.is-anim .fx:not(.is-on) { opacity: 0; visibility: hidden; }
.how-stage.is-anim .hb[data-at]:not(.is-on) { display: none; }
.how-stage.is-anim .hb-dots.is-on { display: block; }
.how-stage.is-anim .hb.is-on { animation: how-in 450ms cubic-bezier(.2, .7, .2, 1) both; }
.how-stage.is-anim .how-caret { visibility: visible; animation: blink 1s steps(1) infinite; }
.how-stage.is-anim .how-new.is-on { animation: how-glow 2s ease both; }
.how-stage.is-anim .how-load.is-on { animation: how-load 900ms ease-out both; }
.how-stage.is-anim .bk { transform: translateY(3cqw); transition: opacity 600ms ease, visibility 600ms, transform 800ms cubic-bezier(.2, .7, .2, 1); }
.how-stage.is-anim .bk.is-on { transform: none; }
.how-stage:not(.is-anim) .how-cursor-guest { display: none; }
.how.is-paused .how-stage.is-anim .how-caret { animation-play-state: paused; }

@keyframes how-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes how-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes how-glow { 0%, 40% { background: var(--field); } 100% { background: transparent; } }
@keyframes how-load { from { transform: scaleX(0); } 80% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
@keyframes how-click { 50% { transform: scale(0.8); } }

@media (prefers-reduced-motion: reduce) {
  .how *, .how *::before { animation: none !important; transition: none !important; }
}

/* ---------- Roles: who it's for. A tab per role (js/how.js); without JS every card shows ----------
   2026-10-13 owner (round 4): compact enough to fit a 1440×900 screen, coloured group tags, and the
   same parts as the rest of the page: chips like the hero's buttons, the card framed like the How it
   works browser (2px ink line, 16px corners) on the same 5/7 split, the hero's "Try it" prompt box. */
.roles { padding: var(--section) 0 0; }
.roles-head { max-width: 46em; margin: 0 0 24px; }
.roles-head h2 { margin: 0 0 8px; }
.role { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.role[hidden] { display: none; }
.role-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); background: var(--bg); }
.role-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.role h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.role-what { margin: -8px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.role .ask { font-size: var(--fs-sm); }
.role .text-link { margin-top: auto; color: var(--primary); }
.roles-note { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.roles-note a { color: var(--primary); }

/* Role cards (English home). 2026-10-14 owner: calmer and scannable. One flat row of chips (no group tags),
   and each card is just the template picture, one line on what that person gets, the one prompt as the
   hero's chat bubble with Copy, and one link. The chip names who it is for, so the card doesn't repeat it
   (the small kicker shows only without JS, when every card is listed). */
.role-panels { display: grid; gap: 16px; }
/* 2026-10-13 owner (round 6): the template fills the whole picture box, edge to edge, no window or frame around
   it. Each preview is shot from the real template at the box's shape (scripts/build-role-previews.mjs): phones a
   4:3 box, tablets the 16:10 thumbnail, and from 900 px the whole left column, as tall as the card. */
.role-frame { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.role-frame picture { display: block; }
.role-frame .role-shot { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 0; }
@media (min-width: 600px) { .role-frame .role-shot { aspect-ratio: 16 / 10; } }
@media (min-width: 720px) { .roles:not(.is-js) .role-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.role-panels .role-body { gap: 0; padding: 22px 20px 24px; }
.role-kicker { margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.roles.is-js .role-kicker { display: none; }
.role-panels .role h3 { display: block; margin: 0; font-size: var(--fs-h3); line-height: 1.3; text-wrap: balance; }
/* The prompt: the hero's user bubble, with a quiet Copy button under it */
.role-ask { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 22px 0 0; }
.role-ask .msg { max-width: min(92%, 30em); font-size: var(--fs-body); }
.role-ask .copy-btn { min-height: 36px; min-width: 0; padding: 6px 14px; font-size: var(--fs-sm); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.role-ask .copy-btn:hover { background: var(--bg); }
.role-ask .copy-btn[data-copied] { background: var(--ink); color: var(--paper); }
.role-panels .text-link { margin: 22px 0 0; align-self: flex-start; }

/* Tabs (JS): one row of chips. Phones: it scrolls sideways. From 900px: it wraps, no scrolling. */
.role-tabs { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1) 16px; padding: 2px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
.role-tabs::-webkit-scrollbar { display: none; }
.role-tabs[hidden] { display: none; }
.role-tab {
  flex: none; margin: 0; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer; font: 500 var(--fs-sm)/1.2 var(--body); color: var(--ink);
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.role-tab:hover { border-color: var(--ink); }
.role-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.role-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.roles.is-js .role:not([hidden]) { animation: how-fade 400ms ease both; }

@media (min-width: 900px) {
  .role-tabs { flex-wrap: wrap; margin: 0 0 20px; padding: 0; overflow: visible; }
  .roles.is-js .role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 420px; }
  .roles.is-js .role-frame { border-bottom: 0; border-right: 1px solid var(--line); }
  .roles.is-js .role-frame .role-shot { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .roles.is-js .role-panels .role-body { justify-content: center; padding: 40px 48px; }
  .roles.is-js .role-panels .role h3 { font-size: 26px; letter-spacing: -0.015em; }
}
@media (prefers-reduced-motion: reduce) { .roles.is-js .role:not([hidden]) { animation: none; } }

/* Translated home pages keep the old card grid until they are rebuilt */
.role-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.role-gets { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); line-height: 1.45; }
.role-gets li { position: relative; padding: 3px 0 3px 24px; }
.role-gets li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 11px; height: 5px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }

/* ---------- Later (translated home pages only, until they are rebuilt) ---------- */
.home .later { padding: 88px 0 0; max-width: none; } /* styles.css caps .later (plugins) at 860px */
.later-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .later-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.later-lede { font-size: var(--fs-lede); line-height: 1.45; margin: -12px 0 18px; max-width: 30em; color: var(--muted); }
.later-list li { padding-top: 5px; padding-bottom: 5px; }
.later-note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }

.chat-card {
  margin: 0; min-width: 0; background: var(--surface);
  border: 2.5px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--pop); overflow: hidden;
}
.chat-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.chat-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.chat-bar p { margin: 0 0 0 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.chat-log { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; }
.chat-log .msg { font-size: var(--fs-body); }

/* Questions: title beside the list on desktop, on the same 5/7 grid as How it works */
.qs { padding: var(--section) 0 0; }
.qs-grid { display: grid; gap: 4px; }
@media (min-width: 960px) { .qs-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; } }
.qs-head { margin: 0 0 20px; }
.qs-head h2 { margin: 0 0 8px; }
.qs-head a { color: var(--primary); }
.qs .faq { margin: 0; max-width: none; }
.qs .faq summary { font-weight: 600; }
.qs .answer a { color: var(--primary); }
.qs .answer strong { font-weight: 600; }
.home .hd-reply { overflow-wrap: anywhere; }