/* Yusho landing page on the VichSI brand layer (vichsi/vichsi.css holds the tokens).
   The first section follows ~/Projects/VichSI Branding/FIRST-SECTION-RULEBOOK.md v1.1:
   header, then one h1 (name, line, two-tone message), the description and two buttons.
   The vichsi.com look (PRODUCT-TOUCH-SPEC v1.5/v1.6): a small navigation bar, a calm hero with one
   soft violet light (no particles), Field and Room sections that blend into each other (160px, no
   seams), grain, Yusho's violet on buttons, one lit edge and one 0.15 light, the one violet thread,
   and the white SaaS footer shared by all four products. The example is vichsi.com's own Yusho
   conversation, with its words and beats beside it; signal cyan only for "live".
   One type scale: 12 (mono labels) / 14 (small) / 16 (body) / 18 (lead) / 20 (h3) / 24, then the
   section and hero headings. One reveal: 20px rise and fade, 820ms, expo out (vichsi.com). */
:root {
  --gutter: 24px;
  --hdr-logo-h: 40px;
  --hdr-pad: 12px;
  --hdr-h: calc(max(var(--hdr-logo-h), 44px) + 2 * var(--hdr-pad));   /* the bar: its 44px tap targets set it */
  --container: 1280px;
  --t: 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* the one reveal curve */
  --blend: 160px;                               /* how far one section tone fades into the next */
  --split-gap: clamp(32px, 5vw, 80px);          /* the gap of every two-part row */
}
@media (max-width: 599px) {
  :root { --gutter: 20px; --hdr-logo-h: 36px; --hdr-pad: 10px; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  position: relative; overflow-x: hidden;
  background: var(--v-bg); color: var(--v-text);
  font: 400 16px/1.5 var(--v-font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
/* The ground (spec v1.5 §000.1): no particles. The hero is a calm Field with one soft violet light;
   below it the sections are plain and alternate the two calm tones, and Yusho's own drawing is one
   violet thread from the brief to the launch. A fine grain lies over the whole page. */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: url(../vichsi/grain.png) 0 0 / 128px 128px; opacity: var(--v-grain);
  background-image: image-set(url(../vichsi/grain.webp) type("image/webp"), url(../vichsi/grain.png) type("image/png")); }
/* The browser's own surfaces, in the page's colours */
html { scrollbar-color: var(--v-line-strong) var(--v-bg); }
input { caret-color: var(--v-hue); }
button { font: inherit; }
img, svg, video { display: block; max-width: 100%; }
h2 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--v-signal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px;
  background: var(--v-accent); color: var(--v-on-accent); border-radius: var(--v-radius); font-weight: 600; }
.skip-link:focus { left: 8px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- The navigation bar (spec v1.5 §000.2, after vichsi.com's nav and RECC's) ----------
   Compact (64px, 56px on phones), sticky, on the Field. Quiet links that turn white on hover; a line
   appears under the bar once the page scrolls. On phones the links fold into a Menu panel. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: var(--hdr-pad) 0;
  background: transparent; box-shadow: 0 1px 0 transparent; transition: box-shadow 240ms ease; }
/* at the top the bar has no fill, so the hero's light runs up behind it without a seam; once the page
   scrolls it takes a frosted fill so the copy passing under it stays readable. The fill is a layer
   behind the bar: a backdrop-filter on the header itself would trap the phone menu (position: fixed) */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--v-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: opacity 240ms ease; }
.site-header[data-elevated="true"] { box-shadow: 0 1px 0 var(--v-line); }
.site-header[data-elevated="true"]::before { opacity: 1; }
.site-header.is-open::before { opacity: 1; background: var(--v-bg); }
.site-header-inner { display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; color: var(--v-text); border-radius: var(--v-radius); transition: color var(--t); }
.brand .vichsi-logo { width: auto; height: var(--hdr-logo-h); }
.nav-links { display: flex; align-items: center; gap: 26px; margin-right: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--v-muted);
  white-space: nowrap; transition: color 180ms ease; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-menu { display: none; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none;
  color: var(--v-text); font: 600 15px/1 var(--v-font-sans); cursor: pointer; }
.built-by { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px;
  color: var(--v-muted); transition: color var(--t); }
.built-by strong { color: var(--v-text); font-weight: 600; transition: color var(--t); }

/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px;
  padding: 0 18px; border: 1px solid transparent; border-radius: var(--v-radius); cursor: pointer;
  font: 500 14px/1 var(--v-font-sans); white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.button:active { transform: scale(0.97); }
.button-primary { background: var(--v-accent); color: var(--v-on-accent); border-color: var(--v-accent); }
.button-ghost { background: transparent; color: var(--v-text); border-color: var(--v-line-strong); }
/* Header Access button: outlined while the hero buttons are on screen, filled once they scroll away */
.header-cta { background: transparent; color: var(--v-text); border-color: var(--v-line-strong); }
.header-cta.is-filled { background: var(--v-accent); color: var(--v-on-accent); border-color: var(--v-accent); }

/* ---------- Hero (rule book §5-§9) ----------
   Top-anchored, as RECC's: the conversation follows close under the buttons, so its top edge shows at
   the foot of the first screen on a laptop. One soft violet light behind the words, nothing else. */
.hero { position: relative; isolation: isolate; text-align: center;
  padding: calc(var(--hdr-h) + clamp(48px, 11vh, 140px)) 0 clamp(40px, 6vh, 72px); }
.hero-glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1180px, 100%); height: min(820px, 100%);
  transform: translate(-50%, -50%); pointer-events: none; background: var(--v-glow); }
.hero h1 { margin: 0; font-family: var(--v-font-sans); font-weight: 600; }
.hero-name { display: block; font-size: clamp(2.7rem, 5.04vw, 4.2rem); line-height: 1; letter-spacing: 0.14em;
  padding-left: 0.14em; text-transform: uppercase; color: var(--v-text); }
.hero-line { display: block; margin-top: 16px; font: 400 13px/1.2 var(--v-font-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--v-muted); }
.hero-message { display: block; max-width: 1040px; margin: 40px auto 0; font-size: clamp(30px, 2.4vw + 20px, 52px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--v-lavender); text-wrap: balance; }
.hero-message > span { display: block; }
.hero-message .payoff { color: var(--v-text); }
.hero-desc { max-width: 36em; margin: 24px auto 0; font: 400 18px/1.6 var(--v-font-sans); color: var(--v-muted);
  text-wrap: pretty; }
.hero-desc strong { color: var(--v-text); font-weight: 600; }
.hero-cta { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.hero-cta .button { height: 52px; min-width: 200px; padding: 0 28px; font: 500 16px/1 var(--v-font-sans); gap: 8px; }
.hero-cta .button-primary svg { transition: transform 200ms ease; }

@keyframes vichsi-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-line, .hero-message, .hero-desc, .hero-cta { animation: vichsi-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-message { animation-delay: 70ms; }
.hero-desc { animation-delay: 140ms; }
.hero-cta { animation-delay: 210ms; }

/* ---------- The sections below ---------- */
/* sections paint no ground of their own: the page is the Field, so a soft light spilling over a
   section edge fades out instead of being cut flat by the next section (Ali, 2026-11-02) */
.band { padding: 96px 0; background: transparent; scroll-margin-top: var(--hdr-h); }
.band-head { max-width: 1040px; margin-bottom: 48px; }
.band-head p { max-width: 62ch; }
.band h2 { margin: 0; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
/* Two-tone headings (rule book): the setup in the quiet grey, the payoff in white */
.band h2 .setup { color: var(--v-lavender); }
.band h2 .payoff { color: var(--v-text); }
/* Section tones: Field and Room alternate, and each Room fades in and out over 160px, so no
   section has a hard edge. The white footer below meets the dark page on a clean straight line. */
.band--room { background: linear-gradient(to bottom, rgba(15, 18, 26, 0), var(--v-room) var(--blend), var(--v-room) calc(100% - var(--blend)), rgba(15, 18, 26, 0)); }

/* One reveal for everything that arrives (vichsi.com, 820ms, expo out): headings rise from a mask,
   the rest rises 20px and fades in, in order (--i). The thread measures layout, not transforms. */
.rise { overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.rise > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .rise > span { transform: translateY(105%); transition: transform 820ms var(--ease-expo); }
  .js .rise.is-on > span { transform: none; }
  .js [data-reveal] { opacity: 0; transform: translateY(20px);
    transition: opacity 820ms var(--ease-expo), transform 820ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-on { opacity: 1; transform: none; }
}

/* ---------- The thread: one violet line from the brief to the launch (site.js draws it) ---------- */
.threaded { position: relative; overflow-x: clip; }   /* the run's soft light may not widen the page */
.threaded.is-lane .band-head, .threaded.is-lane .tailor__end { padding-left: 20px; }   /* one lane: the words keep clear of the thread */
.thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.thread .seg { stroke: var(--v-hue); stroke-width: 1.5; opacity: 0.2; transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.thread .nd { fill: var(--v-hue); opacity: 0.3; transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.thread .is-lit { opacity: 1; }
.thread .quiet.is-lit { opacity: 0.38; }       /* "Run it your way": it passes quietly */
.thread .chev { fill: var(--v-hue); opacity: 0; transform: translateY(10px); transform-box: fill-box;
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
.thread .chev.is-lit { opacity: 1; transform: none; }

.band-head p { margin: 16px 0 0; color: var(--v-muted); max-width: 62ch; font-size: 18px; line-height: 1.6; }
h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.005em; }

/* ---------- The shared pieces: a soft light, the product's own chat frame, its switch ----------
   The frames are the product's own screen, so they keep the app's true-black neutrals. */
.glow { position: absolute; inset: -14%; z-index: -1; pointer-events: none; background: var(--v-glow); }
html:not(.js) .needs-ex, .no-ex .needs-ex { display: none; }   /* its names arrive from example.js */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.addr { font-family: var(--v-font-mono); font-size: 0.9em; }

.chat { position: relative; display: flex; flex-direction: column; background: #0E0E0E; border: 1px solid var(--v-lit-edge);
  color: #E6E9E8; font-family: var(--v-font-sans); font-size: 14px; line-height: 1.45; text-align: left;
  box-shadow: var(--v-lit-shadow); }
.chat .mark { display: inline-block; height: auto; }
.chat__bar { display: flex; align-items: center; gap: 14px; flex: none; height: 48px; padding: 0 16px;
  border-bottom: 1px solid var(--v-line); background: #0B0C0C; white-space: nowrap; }
.chat__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.chat__brand .mark { width: 11px; color: #FFFFFF; }
.chat__path { font-family: var(--v-font-mono); font-size: 12px; color: var(--v-muted); overflow: hidden; text-overflow: ellipsis; }
.chat__thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; height: 470px;
  padding: 20px 20px 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 64px); mask-image: linear-gradient(to bottom, transparent, #000 64px); }
.chat__thread > * { flex: none; }
.chat__msg { max-width: 90%; padding: 12px 14px; }
.chat__msg--you { align-self: flex-end; background: #1F2222; border: 1px solid #2E3232; }
.chat__msg--you small { display: block; margin-bottom: 4px; font-family: var(--v-font-mono); font-size: 11px; color: #9AA1A0; }
.chat__msg--yu { align-self: flex-start; padding-left: 0; padding-right: 0; color: #D7DBDA; }
.chat__who { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-weight: 600; color: #FFFFFF; }
.chat__who .mark { width: 9px; color: var(--v-hue); }
.chat__typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; font-size: 13px; color: #9AA1A0; }
.chat__typing i { width: 6px; height: 6px; background: #8C9392; animation: blink 1.1s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: 0.18s; }
.chat__typing i:nth-child(3) { animation-delay: 0.36s; }
.chat__typing span { margin-left: 6px; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 45% { opacity: 1; } }
/* a timed piece inside a message (a step of the chatbot's list) waits for its moment */
.js .chat .is-pending { opacity: 0; transform: translateY(6px); }
.chat [data-at] { transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.chat__replay { flex: none; height: 44px; padding: 0 16px; border: 1px solid var(--v-line-strong); background: transparent; font-size: 14px;
  font-weight: 500; color: var(--v-text-soft); cursor: pointer; transition: border-color 180ms ease, color 180ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.chat__replay:active { transform: scale(0.97); }
/* the switch: Paused is grey, Live is the light. In the tiles it is a picture of the real one. */
.switch { position: relative; width: 44px; height: 24px; flex: none; padding: 0; border: 0; background: #3A3F3F; }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #FFFFFF; }

/* ---------- The deliverables: one set of tiles, drawn from the product's real look ----------
   A document, lines of copy, a voice-over, a vertical video frame, three statics, a campaign waiting
   for its switch. The same tiles in "It does the work" and "Always by your side". */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-self: stretch; }
.tile { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid #2E3232; background: #121414; }
.tile b { font-weight: 600; font-size: 13.5px; color: #FFFFFF; }
.tile__sub { font: 400 11px/1.4 var(--v-font-mono); letter-spacing: 0.04em; color: #8C9392; }
.tile__lines { display: grid; gap: 5px; margin-top: 2px; }
.tile__lines i { height: 5px; background: #2A2E2E; }
.tile__lines i:nth-child(2) { width: 82%; }
.tile__lines i:nth-child(3) { width: 64%; }
.tile__quote { font-size: 13.5px; line-height: 1.4; color: #D7DBDA; }
.tile__player { display: flex; align-items: center; gap: 8px; height: 28px; min-width: 0; }   /* the wave fits its tile at any width */
.s-play { flex: none; width: 22px; height: 22px; background: var(--v-hue); clip-path: polygon(30% 22%, 30% 78%, 76% 50%); }
.s-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 100%; min-width: 0; overflow: hidden; }
.s-wave i { flex: 1; min-width: 2px; height: calc(var(--h) * 100%); background: #3A3F3F; }
.s-wave i:nth-child(-n+16) { background: var(--v-hue); }
.tile--video { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.tile__frame { position: relative; width: 44px; aspect-ratio: 9 / 16; overflow: hidden;
  background: linear-gradient(to bottom, #7FA6C9 0%, #BFD3E2 40%, #2F6F8F 41%, #1E4F68 70%, #D9C7A3 71%, #C7B28A 100%); }
.tile__frame .s-cap { position: absolute; left: 2px; right: 2px; top: 56%; text-align: center; font-size: 6px; font-weight: 700; color: #FFFFFF; line-height: 1.2; }
.tile__frame .s-cap .is-on { padding: 0 1px; background: var(--v-hue); color: #0E0E0E; }
.tile--statics { gap: 8px; }
.tile__ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mini { display: grid; align-content: end; aspect-ratio: 1; padding: 5px; overflow: hidden; filter: saturate(0.92) brightness(0.95); }
.mini b { font-size: 8.5px; line-height: 1.05; letter-spacing: -0.01em; }
.mini--min { background: #F2F3F1; color: #0E0E0E; }
.mini--max { background: var(--v-hue); color: #0E0E0E; }
.mini--own { background: #1F2430; color: #FFFFFF; border: 1px solid #343B4C; }
.mini b, .mini--min b { color: inherit; }
.tile--campaign { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
/* a title over its note, wherever a tile pairs them */
.tile--video > span:last-child, .tile--campaign > span:first-child { display: grid; gap: 3px; min-width: 0; }
.tile--campaign { grid-column: 1 / -1; }
.tile__state { padding: 4px 8px; border: 1px solid #4A5050; font: 400 11px/1 var(--v-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #D7DBDA; }

/* ---------- Your own ChatGPT for Meta ads: the line, and a campaign done task by task ---------- */
#yusho { padding-top: 8px; }
.own { overflow-x: clip; }
.own__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
/* the line stays put on the left while the chat scrolls past, as "Questions, answered." does */
.own__text { position: sticky; top: calc(var(--hdr-h) + 32px); padding-top: 8px; }
.own__title { margin: 0; font-size: clamp(44px, 5.2vw, 76px) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; color: var(--v-text); text-wrap: balance; }
.own__text p { margin: 28px 0 0; max-width: 30em; font-size: 19px; line-height: 1.6; color: var(--v-text-soft); }
.own__chat { position: relative; isolation: isolate; animation: vichsi-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 280ms both; }
.own__note { margin: 12px 0 0; font-size: 14px; color: var(--v-muted); }
.chat--own .chat__thread { height: 500px; gap: 10px; padding-top: 14px; }   /* the ask stays in view when every task is done */
.chat--own .chat__step { padding: 5px 12px; font-size: 13px; }
.chat--own .chat__msg { padding-top: 9px; padding-bottom: 9px; }
.chat--own .chat__foot { margin: 6px 20px 14px; }
.chat--own .chat__input { padding-top: 6px; padding-bottom: 6px; }
.chat--own .chat__send { width: 26px; height: 26px; }
.chat__sentinel { position: absolute; left: 0; right: 0; bottom: 0; height: 25%; pointer-events: none; }
.chat__mode { margin-left: auto; display: inline-flex; border: 1px solid #2E3232; font-size: 12px; }
.chat__mode > * { padding: 6px 10px; color: #8C9392; border-left: 1px solid #2E3232; }
.chat__mode > :first-child { border-left: 0; }
.chat__mode b { color: #0E0E0E; background: #E6E9E8; font-weight: 600; }
.chat__steps { list-style: none; margin: 0; padding: 0; align-self: stretch; display: grid; border: 1px solid var(--v-line); }
.chat__step { display: grid; grid-template-columns: auto 7.4em minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px;
  border-top: 1px solid #1F2222; font-size: 13.5px; transition: opacity 300ms ease-out; }
.chat__step:first-child { border-top: 0; }
.chat__step b { font-weight: 600; color: #FFFFFF; }
.chat__step span { color: #9AA1A0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  background: var(--v-hue); border: 1px solid var(--v-hue); color: #0E0E0E; transition: background-color 200ms, border-color 200ms, color 200ms; }
.chat__tick .ico { width: 13px; height: 13px; display: block; }
/* a step waits unticked, then ticks at its moment */
.js .chat__step.is-pending { opacity: 0.45; transform: none; }
.js .chat__step.is-pending .chat__tick { background: transparent; border-color: #3A3F3F; color: transparent; }
.chat__foot { display: flex; align-items: center; gap: 10px; flex: none; margin: 8px 20px 18px; }
.chat__input { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px; border: 1px solid #2E3232; background: #0B0C0C; font-size: 13.5px; color: #8C9392; }
.chat__input span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__send { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; background: var(--v-hue); color: #0E0E0E; }
.chat__send .ico { width: 16px; height: 16px; display: block; }

/* ---------- 1. It does the work: the same message, two answers ---------- */
/* the soft lights may spill past the panes, never past the page (clip keeps sticky things working) */
.compare { overflow-x: clip; }
.compare__head { margin-bottom: 40px; }
/* exaggerated on purpose (Ali, 2026-11-02): the chatbot narrower, greyer and slower; Yusho wider, lit, and done first */
.compare__panes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.compare__pane--bot { opacity: 0.8; filter: saturate(0); }
.chat--bot .chat__thread { font-size: 13px; }
.bot-steps { gap: 3px !important; }
.compare__pane { position: relative; isolation: isolate; }
/* tall enough for Yusho's whole answer (measured 646px finished): the same message stays in view on both sides */
.compare .chat__thread { height: 480px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px); mask-image: linear-gradient(to bottom, transparent, #000 20px); }
.compare .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.compare .tile { padding: 9px 11px; gap: 4px; }
.compare .tile b { font-size: 12.5px; }
.compare .tile__sub, .compare .tile__lines { display: none; }
.compare .tile__quote { font-size: 12px; }
.compare .tile__player { height: 18px; }
.compare .s-play { width: 16px; height: 16px; }
.compare .tile--video { gap: 8px; }
.compare .tile__frame { width: 22px; }
.compare .tile__frame .s-cap { display: none; }
.compare .tile__ads { grid-template-columns: repeat(3, 22px); gap: 3px; }
.compare .mini b { display: none; }
.compare .tile--campaign { padding: 9px 11px; }
.compare .tile--campaign .switch { width: 36px; height: 20px; }
.compare .tile--campaign .switch__knob { width: 14px; height: 14px; }
.compare .chat__msg { padding-top: 10px; padding-bottom: 10px; }
/* every finished piece carries what you do with it: download, copy, or open it in Ads Manager */
.compare .tile { position: relative; padding-right: 38px; }
.tile__act { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid #3A3F3F; background: #0E0E0E; color: #E6E9E8; }
.tile__act svg { width: 13px; height: 13px; }
.tile__act--down { color: var(--v-hue); border-color: rgba(var(--v-hue-rgb), 0.55); }
.compare .tile--campaign { grid-template-columns: minmax(0, 1fr) auto auto auto; padding-right: 11px; }
.compare .tile--campaign .tile__act { position: static; }
.chat--bot { border-color: var(--v-line); box-shadow: none; }
.chat--bot .chat__brand { color: #AEB4B3; }
.bot-dot { width: 10px; height: 10px; border-radius: 50%; background: #4A5050; }
.chat__msg--bot { align-self: flex-start; padding-left: 0; padding-right: 0; color: #AEB4B3; }
.bot-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; color: #9AA1A0; }
.bot-ask { display: block; margin-top: 12px; color: #AEB4B3; }
.chat--bot .chat__typing span { font-style: normal; }
.tiles__item { animation: tile-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 260ms); }
.tiles__item:has(.tile--campaign) { grid-column: 1 / -1; }
.compare .tiles__item { display: grid; }                     /* every tile in a row as tall as the row */
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.compare__verdict { margin: 16px 0 0; font-size: 16px; font-weight: 600; color: var(--v-muted); opacity: 0; transition: opacity 400ms ease; }
.compare__verdict--yu { color: var(--v-text); }
.compare__verdict--yu::before { content: ""; display: inline-block; width: 9px; height: 7px; margin-right: 10px; background: var(--v-hue);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 68.3% 100%, 50% 63.4%, 31.7% 100%); vertical-align: 0.15em; }
.compare__pane:has(.chat.is-done) .compare__verdict, html:not(.js) .compare__verdict { opacity: 1; }
/* phones and tablets (site.js sets .is-switch below 1024px): the two answers share one frame and a
   switch above it says whose answer is showing, so the comparison happens in one place, not one under
   the other */
.compare__switch { display: none; }
.compare.is-switch .compare__switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  margin: 0 0 14px; padding: 4px; border: 1px solid var(--v-line-strong); }
.compare__pick { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 10px;
  border: 1px solid transparent; background: transparent; color: var(--v-muted); font: 500 15px/1 var(--v-font-sans);
  cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); }
.compare__pick .mark { width: 10px; }
.compare__pick[aria-pressed="true"] { border-color: var(--v-line-strong); background: var(--v-raised); color: var(--v-text); }
.compare__pick--yu[aria-pressed="true"] { border-color: var(--v-hue); background: rgba(var(--v-hue-rgb), 0.12); }
.compare.is-switch .compare__pane { grid-area: 1 / 1; transition: opacity 320ms ease, visibility 0s; }
.compare.is-switch .compare__pane:not(.is-shown) { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms ease, visibility 0s 320ms; }
.compare.is-switch .compare__replay { display: none; }   /* a tap on the switch replays it */
.compare__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--v-line); }
.verbs { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: var(--v-muted-2); }
.verbs span { transition: color 400ms ease; transition-delay: calc(var(--i) * 180ms); }
.compare.is-done .verbs span, html:not(.js) .verbs span { color: var(--v-text); }

/* ---------- 2. Before and after: the line and its proof, nothing else (Ali, 2026-11-04) ----------
   Side by side on wide screens: the line on the left, the sentence under its last word on the right. */
.ba { padding: 64px 0; }
.ba .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px var(--split-gap); align-items: end; }
.ba .band-head { margin: 0; }
.ba__end { margin: 0; max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--v-text-soft); }

/* ---------- 3. Made for you, by VichSI: pick a business, see its Yusho ---------- */
.tailor { border: 1px solid var(--v-line); background: var(--v-raised); }
.tailor__pick { display: flex; align-items: center; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--v-line); }
.tailor__label { flex: none; font: 400 12px/1 var(--v-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-muted); }
.tailor__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .tailor__pick { display: none; }
.tailor__tab { height: 40px; padding: 0 16px; border: 1px solid var(--v-line-strong); background: transparent; color: var(--v-text-soft);
  font: 500 14px/1 var(--v-font-sans); cursor: pointer; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease; }
.tailor__tab[aria-selected="true"] { border-color: var(--v-hue); background: rgba(var(--v-hue-rgb), 0.12); color: var(--v-text); }
.js .tailor__panels { display: grid; }
.js .tailor__panel { grid-area: 1 / 1; }
.js .tailor__panel:not(.is-current) { visibility: hidden; }
html:not(.js) .tailor__panel:not(:first-child) { display: none; }
.tailor__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px var(--split-gap); align-items: center; padding: 24px 28px; }
.js .tailor__panel.is-in { animation: tailor-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tailor-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tailor h3 { position: relative; padding-left: 20px; font-size: 16px; }
.tailor h3::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 9px; height: 7px; background: var(--v-hue);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 68.3% 100%, 50% 63.4%, 31.7% 100%); }
.tailor dl { display: grid; gap: 0; margin: 12px 0 0; }
.tailor dl div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding: 9px 0; border-top: 1px solid var(--v-line); }
.tailor dt { font: 400 12px/1.5 var(--v-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-muted); }
.tailor dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--v-text); }
.ad { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 12px; padding: 16px;
  background: #0E0E0E; border: 1px solid var(--v-lit-edge); box-shadow: var(--v-lit-shadow); }
.ad__static { display: grid; align-content: space-between; gap: 8px; aspect-ratio: 1; padding: 12px; overflow: hidden; filter: saturate(0.92) brightness(0.96); }
.ad__static b { font-size: 15px; line-height: 1.08; letter-spacing: -0.01em; }
.ad__static em { justify-self: start; padding: 4px 6px; font: 600 9px/1 var(--v-font-sans); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; }
.ad__copy b { display: block; font-size: 18px; line-height: 1.2; color: #FFFFFF; }
.ad__copy p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #AEB4B3; }
/* each business's ad in its own look: the client's style, never the page's (drawn, system faces only) */
.tailor__panel--real-estate .ad__static { background: linear-gradient(to bottom, #9DBBD3 0%, #CFDCE6 46%, #2F6F8F 47%, #D7C6A2 100%); color: #0F2E44;
  font-family: Georgia, 'Times New Roman', serif; }
.tailor__panel--real-estate .ad__static b { font-weight: 400; }
.tailor__panel--real-estate .ad__static em { background: #FFFFFF; color: #1E4F68; }
.tailor__panel--clinic .ad__static { background: #EEF6F4; color: #12463F; }
.tailor__panel--clinic .ad__static b { font-weight: 600; }
.tailor__panel--clinic .ad__static em { background: #12463F; color: #FFFFFF; }
.tailor__panel--restaurant .ad__static { background: #C8361F; color: #FFE7A3; font-family: 'Arial Black', Impact, sans-serif; }
.tailor__panel--restaurant .ad__static b { font-size: 17px; text-transform: uppercase; }
.tailor__panel--restaurant .ad__static em { background: #FFE7A3; color: #C8361F; }
.tailor__panel--store .ad__static { background: #111111; color: #FF6FB1; }
.tailor__panel--store .ad__static b { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.tailor__panel--store .ad__static em { background: #FF6FB1; color: #111111; }
.tailor__panel--agency .ad__static { background: repeating-linear-gradient(90deg, #F2F3F1 0 33.3%, #C8361F 33.3% 66.6%, #12463F 66.6% 100%); color: #FFFFFF; }
.tailor__panel--agency .ad__static b { padding: 4px 6px; background: #0E0E0E; font-size: 12px; }
.tailor__panel--agency .ad__static em { background: #0E0E0E; color: #FFFFFF; }
.tailor__end { margin: 20px 0 0; font-size: 18px; font-weight: 600; color: var(--v-text); }
/* the steps follow the tailoring as one block (Ali, 2026-11-04): no full band between them */
#tailored { padding-bottom: 32px; }
#get-yusho { padding-top: 48px; }
#get-yusho .band-head { margin-bottom: 28px; }
#get-yusho h2 { font-size: clamp(26px, 2.6vw, 36px); }

/* ---------- 4. How you get your Yusho: three steps, the thread rising into the VichSI chevron ---------- */
.get { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.get li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: start; column-gap: 14px; padding: 20px;
  border: 1px solid var(--v-line); background: var(--v-raised); }
.get li.is-lit { border-color: var(--v-lit-edge); box-shadow: var(--v-lit-shadow); }
.get .n { width: 28px; height: 28px; display: grid; place-items: center; grid-row: 1 / span 2; margin: 0; border: 1px solid var(--v-lit-edge);
  font: 400 12px/1 var(--v-font-mono); color: var(--v-text); }
.get li.is-lit .n { background: var(--v-hue); border-color: var(--v-hue); color: #0E0E0E; }
.get h3 { grid-column: 2; align-self: center; font-size: 18px; letter-spacing: -0.01em; }
.get p { grid-column: 2; margin: 6px 0 0; color: var(--v-muted); font-size: 15px; line-height: 1.55; }
.get a { color: var(--v-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Questions, answered: one opens at a time ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px var(--split-gap); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--hdr-h) + 32px); }
.faq__intro p { margin: 16px 0 28px; color: var(--v-muted); font-size: 18px; line-height: 1.6; max-width: 24em; }
.faq__intro .button { height: 48px; padding: 0 24px; font-size: 15px; }
.faq__list { display: grid; gap: 6px; }
.faq__item { background: var(--v-raised); border: 1px solid var(--v-line); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 22px; cursor: pointer;
  list-style: none; font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__more { display: none; }
/* the questions wait behind "View FAQ" on every screen (Ali, 2026-11-04); two columns only while open,
   and the intro's Book a demo goes, the form being the next section */
.js .faq__more { display: inline-flex; }
.js .faq__list:not(.is-open) { display: none; }
.js .faq:not(.is-open) { grid-template-columns: minmax(0, 1fr); }
.faq__intro a.button { display: none; }
#faq { padding: 64px 0; }
.faq__q .ico { width: 22px; height: 22px; flex: none; color: var(--v-muted); transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.faq__item[open] .faq__q .ico { transform: rotate(45deg); color: var(--v-hue); }
.faq__a { padding: 0 22px 22px; color: var(--v-muted); font-size: 16px; line-height: 1.6; }
.faq__a p { margin: 0; max-width: 60ch; }
.faq__q:focus-visible { outline-offset: -2px; }

/* ---------- Book a demo: the closing band and the one form every "Book a demo" leads to ---------- */
.book { background: linear-gradient(to bottom, rgba(15, 18, 26, 0), var(--v-room) var(--blend)); }
.book__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px var(--split-gap); align-items: start; }
.book__text > p { margin: 20px 0 0; color: var(--v-text-soft); font-size: 18px; line-height: 1.55; max-width: 30em; }
.book__next { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: next; }
.book__next li { position: relative; padding-left: 40px; counter-increment: next; }
.book__next li::before { content: counter(next); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid;
  place-items: center; border: 1px solid var(--v-lit-edge); font: 400 12px/1 var(--v-font-mono); color: var(--v-text); }
.book__next b { display: block; font-weight: 600; }
.book__next span { display: block; margin-top: 2px; color: var(--v-muted); }
.book__mail { margin: 32px 0 0; color: var(--v-muted); }
.book__card { position: relative; padding: 32px; background: var(--v-room); border: 1px solid var(--v-lit-edge);
  border-top: 2px solid var(--v-hue); box-shadow: var(--v-lit-shadow); }
.book__form { display: grid; gap: 18px; }
.book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font: 400 12px/1.2 var(--v-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-muted); }
.field > span em { font-style: normal; color: var(--v-muted-2); margin-left: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 0 14px; border: 1px solid var(--v-line-strong); border-radius: 0;
  background: var(--v-bg); color: var(--v-text); font: 400 15px/1.4 var(--v-font-sans); transition: border-color var(--t); }
.field input, .field select { height: 46px; }
.field select { appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--v-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEB4B3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.field textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--v-signal); }
.field [aria-invalid="true"] { border-color: var(--v-danger); }
.field__err { color: var(--v-danger); font-size: 13px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book__error { margin: 0; padding: 10px 12px; border: 1px solid var(--v-danger); color: var(--v-danger); font-size: 14px; }
.book__error a { color: inherit; text-decoration: underline; }
.book__submit { width: 100%; height: 52px; font-size: 16px; }
.book__submit[disabled] { opacity: 0.7; cursor: progress; }
.book__fine { margin: 0; font-size: 13px; color: var(--v-muted); }
.book__fine a { color: var(--v-text); text-decoration: underline; text-underline-offset: 3px; }
.book__done { padding: 8px 0; outline: none; }
.book__done h3 { font-size: 28px; letter-spacing: -0.015em; }
.book__done p { margin: 12px 0 0; color: var(--v-text-soft); font-size: 17px; line-height: 1.6; }

/* ---------- The white SaaS footer (spec v1.6 §0000), the same as RECC's (.sf) on all four products ----------
   White ground, ink text, grey #5A5F60 (6.4:1), lines #DCDFDB, the hue only as the 2px rule on top
   and never as text. Above the page's grain. */
.sf { position: relative; z-index: 61; background: #FFFFFF; color: #0E0E0E; border-top: 2px solid var(--v-hue); font-family: var(--v-font-sans); }
.sf ::selection { background: #0E0E0E; color: #FFFFFF; }
.sf__in { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sf__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-top: 72px; padding-bottom: 56px; }
.sf__logo { display: inline-flex; color: #0E0E0E; }
/* the brand side (spec §0000b, the owner's sizes for all four products): the ink logo alone at 72px
   and the button 40px below it; 60px and 32px on phones */
.sf__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.sf__logo svg { display: block; height: 72px; width: auto; }
.sf__btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 0; border-radius: 0;
  background: #0E0E0E; color: #FFFFFF; font: 600 15px/1 var(--v-font-sans); text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, transform 140ms cubic-bezier(0.22, 1, 0.36, 1); }
.sf__btn:active { transform: scale(0.97); }
.sf__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sf__h { margin: 0 0 12px; font: 600 14px/1.3 var(--v-font-sans); letter-spacing: 0; color: #0E0E0E; }
.sf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sf__cols a, .sf__link { display: inline-flex; align-items: center; min-height: 34px; padding: 0; border: 0; background: none;
  font: 400 15px/1.3 var(--v-font-sans); color: #5A5F60; text-decoration: none; cursor: pointer; transition: color 0.18s ease; }
.sf__here { display: inline-flex; align-items: center; min-height: 34px; font: 600 15px/1.3 var(--v-font-sans); color: #0E0E0E; }
.sf__cols .sf__mail { font-family: var(--v-font-mono); font-size: 14px; }
.sf__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 28px;
  background: linear-gradient(#DCDFDB, #DCDFDB) top center / calc(100% - 48px) 1px no-repeat; }
.sf__bar p { margin: 0; font-size: 14px; color: #5A5F60; }
.sf__bar .sf__addr { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--v-font-sans); letter-spacing: 0;
  color: #0E0E0E; }   /* the label "VichSI": the wordmark's style, Archivo SemiBold, mixed case */
.sf__addr svg { width: 10px; height: auto; color: #0E0E0E; }
.sf a:focus-visible, .sf button:focus-visible { outline: 2px solid #0E0E0E; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sf__cols a:hover, .sf__link:hover { color: #0E0E0E; text-decoration: underline; text-underline-offset: 3px; }
  .sf__btn:hover { background: #262929; }
}
/* phones and tablets: stacked, the link columns two-up, 44px tap targets */
@media (max-width: 860px) {
  .sf__top { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; padding-bottom: 40px; }
  .sf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .sf__cols a, .sf__link, .sf__here { min-height: 44px; }
  .sf__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 599px) {                       /* the same 20px side margins as the page above */
  .sf__in { padding-left: 20px; padding-right: 20px; }
  .sf__brand { gap: 32px; }
  .sf__logo svg { height: 60px; }
  .sf__bar { background-size: calc(100% - 40px) 1px; }
}

/* ---------- A reading page (privacy/): the landing's ground, one readable column, the same footer ---------- */
.doc-main { padding: calc(var(--hdr-h) + 72px) 0 112px; }
.doc-col > * { max-width: 68ch; }
.doc h1 { margin: 0; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.doc-lead { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--v-text-soft); }
.doc-date { margin: 16px 0 0; font: 400 12px/1.4 var(--v-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-muted); }
.doc-col h2 { margin: 56px 0 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.doc-col h3 { margin: 28px 0 0; font-size: 18px; }
.doc-col p:not(.doc-lead):not(.doc-date) { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: var(--v-text-soft); }
.doc-col a { color: var(--v-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) { .doc-main { padding: calc(var(--hdr-h) + 40px) 0 80px; } }

/* ---------- Access Yusho (sign in / register) ---------- */
.auth { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
  background: transparent; color: var(--v-text); overflow: visible; }
.auth::backdrop { background: var(--v-overlay); }
.auth-modal { position: relative; padding: 28px 28px 24px; background: var(--v-room); border: 1px solid var(--v-lit-edge);
  border-top: 2px solid var(--v-hue);
  border-radius: var(--v-radius); box-shadow: var(--v-lit-shadow); }
.auth-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: var(--v-radius);
  background: transparent; color: var(--v-muted); cursor: pointer; transition: color var(--t); }
.auth-title { margin: 4px 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.auth-sub { margin: 0 0 18px; font-size: 14px; color: var(--v-muted); }
.auth-modal[data-tab="signin"] [data-for="register"], .auth-modal[data-tab="register"] [data-for="signin"] { display: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px;
  border: 1px solid var(--v-line); border-radius: var(--v-radius); }
.auth-tab { height: 34px; border: 0; border-radius: var(--v-radius); background: transparent; color: var(--v-muted);
  font: 500 14px/1 var(--v-font-sans); cursor: pointer; transition: color var(--t), background var(--t); }
.auth-modal[data-tab="signin"] [data-go="signin"], .auth-modal[data-tab="register"] [data-go="register"] {
  background: var(--v-raised); color: var(--v-text); }
.auth-error { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--v-danger); border-radius: var(--v-radius);
  color: var(--v-danger); font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span, .auth-field-label, .auth-field-label label { font: 400 12px/1.2 var(--v-font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--v-muted); }
.auth-field-label { display: inline-flex; align-items: center; gap: 6px; }
.auth-help { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--v-line-strong); border-radius: 0; background: transparent; color: var(--v-text); cursor: pointer;
  transition: color var(--t), border-color var(--t); }
.auth-help svg { width: 12px; height: 12px; }
.auth-field .auth-help-tip { display: block; margin: 2px 0 4px; padding: 10px 12px; border: 1px solid var(--v-line);
  border-radius: var(--v-radius); background: var(--v-raised); color: var(--v-text-soft); font: 400 14px/1.5 var(--v-font-sans);
  letter-spacing: 0; text-transform: none; }
.auth-field .auth-help-tip a { color: var(--v-text); text-decoration: underline; }
.auth-field input { height: 44px; padding: 0 14px; border: 1px solid var(--v-line-strong); border-radius: var(--v-radius);
  background: transparent; color: var(--v-text); font: 400 15px var(--v-font-sans); transition: border-color var(--t); }
.auth-field input::placeholder { color: var(--v-muted-2); }
.auth-field input:focus { outline: none; border-color: var(--v-signal); }
.auth-hint { color: var(--v-muted); font-size: 12px; }
.auth-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--v-text); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--v-hue); }
.auth-submit { width: 100%; height: 48px; margin-top: 4px; font-size: 15px; }
.auth-foot { margin: 18px 0 0; font-size: 14px; color: var(--v-muted); text-align: center; }
.auth-foot a { color: var(--v-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Desktop only (a real mouse): what you point at lights up, violet in dark, black in light ---------- */
@media (hover: hover) and (pointer: fine) {
  .brand:hover, .built-by:hover, .built-by:hover strong, .auth-tab:hover, .nav-links a:hover, .faq__q:hover .ico,
  .auth-close:hover, .auth-field .auth-help-tip a:hover, .auth-foot a:hover { color: var(--v-hover); }
  .chat__replay:hover { border-color: #4A5050; color: #FFFFFF; }
  .button-primary:hover { background: var(--v-hover-fill); border-color: var(--v-hover-fill); color: var(--v-on-hover-fill); }
  .hero-cta .button-primary:hover svg { transform: translateX(3px); }
  .button-ghost:hover, .header-cta:hover, .auth-help:hover { border-color: var(--v-hover); color: var(--v-hover); }
  .header-cta.is-filled:hover { background: var(--v-hover-fill); border-color: var(--v-hover-fill); color: var(--v-on-hover-fill); }
  .get li:hover, .faq__item:hover { border-color: var(--v-hover); }
  .tailor__tab:hover { border-color: var(--v-hover); color: var(--v-text); }
  .nav-links a:hover { color: var(--v-text); }
  .auth-field input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--v-text); }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--v-signal); }
  .auth-field input:focus { border-color: var(--v-signal); }
}

/* ---------- Sizes ---------- */
@media (max-width: 1023px) {
  .hero-line { font-size: 12px; }
  .hero-desc { font-size: 17px; }
  .compare__panes { grid-template-columns: minmax(0, 1fr); }
  .compare__foot { flex-direction: column; align-items: flex-start; }
  .ba .container, .tailor__panel, .faq, .book__in, .own__in { grid-template-columns: minmax(0, 1fr); }
  .get { grid-template-columns: minmax(0, 1fr); }
  .faq__intro, .own__text { position: static; }
  .tailor__pick { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 560px) {
  .chat__thread { height: 440px; padding: 16px 14px 12px; }
  .compare .chat__thread { height: auto; -webkit-mask-image: none; mask-image: none; }   /* site.js fixes it at the finished answer's height */
  .chat__bar { padding: 0 12px; gap: 10px; }
  .chat__mode { display: none; }
  .chat__step { grid-template-columns: auto minmax(0, 1fr); }
  .chat__step span { display: none; }
  .chat--own .chat__thread { height: auto; -webkit-mask-image: none; mask-image: none; }
  .chat__foot { margin: 8px 14px 14px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .compare .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two across: words and buttons keep their room */
  .ad { grid-template-columns: minmax(0, 1fr); }
  .ad__static { max-width: 220px; }
  .tailor__tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .tailor__tab { flex: none; }
  .tailor dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 1099px) { .header-actions .built-by { display: none; } }
/* phones and small tablets: the links fold into a Menu panel under the bar (vichsi.com, RECC) */
@media (max-width: 899px) {
  .site-header-inner { gap: 12px; }
  .nav-links { position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 16px var(--gutter) 40px; background: var(--v-bg); visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 200ms; }
  .site-header.is-open .nav-links { visibility: visible; opacity: 1; transform: none;
    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
  .nav-links a { min-height: 64px; color: var(--v-text); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
  .header-actions { gap: 6px; }
  .nav-menu { display: inline-flex; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 599px) {
  .header-cta { padding: 0 14px; }
  .brand { padding: 4px 0; margin: -4px 0; }          /* a 44px tap, the bar's height unchanged */
  .hero-line { margin-top: 12px; }
  .hero-message { margin-top: 28px; line-height: 1.12; }
  .hero-desc { margin-top: 20px; font-size: 16px; line-height: 1.55; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; margin: 32px auto 0; }
  .hero-cta .button { width: 100%; min-width: 0; }
  .band { padding: 56px 0; }
  .compare__foot { margin-top: 28px; padding-top: 20px; }
  #yusho { padding-top: 8px; }
  .book__row { grid-template-columns: 1fr; }
  .book__card { padding: 24px 20px; }
  .faq__q { padding: 18px 16px; font-size: 16px; }
  .faq__a { padding: 0 16px 18px; }
  .auth-modal { padding: 24px 20px 20px; }
}
@media (max-width: 599px), (max-height: 699px) {
  .hero { padding-top: calc(var(--hdr-h) + 48px); padding-bottom: 48px; }
}
/* ---------- Phones (Ali, 2026-11-04) ----------
   The first two sections explain everything; every section after them is shorter, so several share a
   screen. Sections that repeat a neighbour lose their visuals: Before and after keeps its words, the
   booking keeps its form, not the steps "How you get your Yusho" already gave. The questions wait
   behind one button. */
@media (max-width: 599px) {
  .band { padding: 44px 0; }
  .band-head { margin-bottom: 28px; }
  .band-head p { margin-top: 12px; font-size: 16px; line-height: 1.55; }
  .ba { padding: 32px 0; }
  .ba .container { gap: 12px; }
  .ba__end { font-size: 16px; color: var(--v-muted); }
  .js .ba .rise > span, .js .ba [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tailor__pick { padding: 14px 16px; }
  .tailor__panel { gap: 18px; padding: 18px 16px; }
  .tailor dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 10px; }
  .tailor dl div { align-content: start; padding: 10px 0; }
  .tailor dd { font-size: 15px; line-height: 1.4; }
  .ad { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; margin-top: 12px; padding: 12px; }
  .tailor .tailor__panel .ad__static { max-width: none; gap: 4px; padding: 7px; }
  .tailor .tailor__panel .ad__static b { padding: 0; font-size: 10px; }
  .tailor .tailor__panel .ad__static em { padding: 2px 4px; font-size: 7px; }
  .ad__copy b { font-size: 16px; }
  .ad__copy p { margin-top: 6px; font-size: 14px; line-height: 1.5; }
  .get { gap: 0; border: 1px solid var(--v-line); background: var(--v-raised); }
  .get li, .get li.is-lit { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 16px;
    border: 0; border-top: 1px solid var(--v-line); background: none; box-shadow: none; }
  .get li:first-child { border-top: 0; }
  .get .n { font-size: 13px; }
  .get h3 { font-size: 17px; }
  .get p { margin-top: 4px; line-height: 1.5; }
  #faq { padding: 44px 0; }
  .faq { gap: 20px; }
  .faq__intro p { margin: 12px 0 20px; font-size: 16px; }
  .book__next { display: none; }
  .book__text > p { margin-top: 14px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero *, .tiles__item, .tailor__panel.is-in, .own__chat { animation: none !important; }
  .nav-links, .faq__q .ico, .chat [data-at], .verbs span, .compare__verdict { transition: none !important; }
  .chat__typing i { animation: none; }
  .chat__replay { transition: none; }
  .field input, .field select, .field textarea { transition: none; }
  .sf__btn, .sf__btn:active { transition: none; transform: none; }
  .thread .seg, .thread .nd, .thread .chev { transition: none; }
  .button { transition: none; }
}