/* The home page (7 October 2026): the violet direction's own parts, loaded only here. The site-wide design (tokens,
   header, buttons, the body without its rules) is css/violet.css. Here: the hero that fills the first screen, night
   to violet, with the free plan in a pill, the question in very large, tight white Geist type, a white question box
   on a lavender ring and translucent example pills; then, in the body (components/home_body.php), the feature tour,
   the steps as a two-by-two bento (the one section of the body in colour), the example window, trust as a bento, and
   the closing. */

/* ---------- The body's headings and copy, for the parts only the home page has. */
.is-violet .lx-tour__text h3, .is-violet .lx-answer h3 { font-family: var(--vi-display); font-weight: 700; letter-spacing: -.022em; color: var(--vi-ink); }
.is-violet .lx-tour__text p { text-wrap: balance; }
.is-violet .lx-tour__text p:not(.lx-tour__label) { max-width: 26em; font-size: 16.5px; }

/* The example window's tabs: the pressed one in ink. */
.is-violet .lx-tab[aria-pressed="true"] { background: var(--vi-ink); color: #fff; }

/* The feature tour: the heading on the page, left, like every other section; the five features under it as a labelled
   segmented control (the labels are the ones the markup carries for screen readers, shown here); and the open panel on
   one neutral card, the text on the left and its mock-up on a white inset on the right. With a tab bar naming the
   feature, the panel's own label is left out. */
.is-violet .lx-tour { margin: 0 32px; overflow: visible; border: 0; background: none; }
.is-violet .lx-tour__band { align-items: flex-start; gap: 32px; padding: 8px 0 24px; background: none; text-align: left; }
.is-violet .lx-tour__band .fr-title { max-width: 21em; font-size: clamp(34px, 4.2vw, 54px); }
.is-violet .lx-tour__tabs { flex-wrap: wrap; gap: 2px; padding: 5px; border-radius: 999px; background: var(--fr-soft); transform: none; }
.is-violet .lx-tour__tab { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 42px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: none; color: var(--vi-muted); font-size: 15px; font-weight: 550; box-shadow: none; transition: background .2s, color .2s, box-shadow .2s; }
.is-violet .lx-tour__tab .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.is-violet .lx-tour__tab:hover { color: var(--vi-ink); transform: none; }
.is-violet .lx-tour__tab[aria-selected="true"] { background: #fff; color: var(--vi-ink); box-shadow: 0 1px 2px rgba(23, 23, 31, .08), 0 8px 18px -10px rgba(23, 23, 31, .32); }
.is-violet .lx-tour__stage, .is-violet .lx-tour.is-tabbed .lx-tour__stage { padding: 10px; border: 0; border-radius: 32px; background: var(--vi-neutral); }
.is-violet .lx-tour__panel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 460px; border-top: 0; }
.is-violet .lx-tour.is-tabbed .lx-tour__label { display: none; }
.is-violet .lx-tour__text { padding: 40px 44px; }
.is-violet .lx-tour__text h3 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.04; }
.is-violet .lx-tour.is-tabbed .lx-tour__text h3 { margin-top: 0; }
.is-violet .lx-tour__mock { margin: 0; padding: 44px 36px; border: 0; border-radius: 24px; }
.is-violet .lx-tour .lx-tour__mock { background: radial-gradient(rgba(23, 23, 31, .07) 1px, transparent 1.4px) 0 0 / 18px 18px, #fff; }
.is-violet .lx-tour .fr-chat { width: min(100%, 440px); gap: 12px; }
.is-violet .lx-tour .fr-bubble { padding: 12px 15px; border-radius: 18px; font-size: 15px; }
.is-violet .lx-tour .fr-bubble:not(.fr-bubble--me, .fr-bubble--float) { background: var(--vi-neutral); box-shadow: none; }

/* The steps: a two-by-two grid of cards in four tones (neutral, lavender, vivid violet, lime). Each card shows its
   mock-up on top, on a lighter inset and at one height so the titles line up, then the number, the title and one line.
   The tick lists are left out to keep the cards light (they stay in the markup, for the home page). */
.is-violet .fr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.is-violet .fr-step { display: flex; flex-direction: column; min-height: 0; padding: 10px; border: 0; border-radius: 30px; background: var(--vi-neutral); box-shadow: none; }
.is-violet .fr-step:nth-child(2) { background: linear-gradient(160deg, #f1edff, #e4dcff); }
.is-violet .fr-step:nth-child(3) { background: radial-gradient(90% 70% at 85% 0%, #7a63ff, #4a2fe0 70%); color: #fff; }
.is-violet .fr-step:nth-child(4) { background: var(--vi-lime); }
.is-violet .fr-step .fr-ticks { display: none; }
.is-violet .fr-step .fr-step__mock { order: -1; flex: none; height: 320px; min-height: 0; padding: 20px; border-left: 0; border-radius: 22px; background: rgba(255, 255, 255, .55); }
.is-violet .fr-step:nth-child(3) .fr-step__mock { background: rgba(255, 255, 255, .1); }
.is-violet .fr-step__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 24px 24px 26px; }
.is-violet .fr-step .fr-step__title { margin: 14px 0 8px; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.1; }
.is-violet .fr-step .fr-step__text p { max-width: 22em; margin: 0; font-size: 16px; line-height: 1.5; }
.is-violet .fr-step:nth-child(3) .fr-step__title { color: #fff; }
.is-violet .fr-step:nth-child(3) .fr-step__text p { color: rgba(255, 255, 255, .8); }
.is-violet .fr-step:nth-child(3) .fr-step__n { background: rgba(255, 255, 255, .16); color: #fff; }
.is-violet .fr-step:nth-child(4) .fr-step__text p { color: rgba(29, 15, 85, .72); }

/* The example window: pill tabs, a rounded window, the finding on a rounded card. */
.is-violet .lx-tabs { flex-wrap: wrap; gap: 8px; border: 0; background: none; }
.is-violet .lx-tab, .is-violet .lx-tab:last-child { border: 0; border-radius: 999px; background: var(--fr-soft); }
.is-violet .lx-tab:hover { background: var(--fr-soft-2); }
.is-violet .lx-window { border: 0; border-radius: 30px; box-shadow: var(--vi-card-shadow); }
.is-violet .lx-answer { border: 0; border-radius: 20px; }
.is-violet .lx-answer__support { border: 0; border-radius: 14px; }
.is-violet .lx-answer__proof { border: 0; border-radius: 14px; background: var(--fr-soft); }
.is-violet .lx-answer__file { border-radius: 10px; }
.is-violet .lx-shot__tag { border-radius: 999px; }
.is-violet .lx-window__ctrl { border-radius: 50%; }

/* The closing, the preview's own: a neutral card, the heading and its actions on the left, and on the right a small
   echo of the hero on white: a question box and four examples that fill the real one. */
.vi-end { width: min(1240px, calc(100% - 24px)); margin: 0 auto; padding: 72px 32px 96px; }
.vi-end__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 36px; background: var(--vi-neutral); }
.vi-end__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 48px 40px 48px 44px; }
.vi-end__pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 14px 4px 4px; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 500; color: var(--vi-ink); }
.vi-end__pill span { padding: 3px 10px; border-radius: 999px; background: var(--vi-ink); color: #fff; font-size: 12px; font-weight: 600; }
.vi-end h2 { margin: 22px 0 0; font: 700 clamp(32px, 3.6vw, 48px)/1.04 var(--vi-display); letter-spacing: -.03em; color: var(--vi-ink); text-wrap: balance; }
.vi-end h2 span { display: block; color: var(--fr-tone); }
.vi-end__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.vi-end__ask { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 44px 36px; overflow: hidden; border-radius: 28px; background: #fff; color: var(--vi-ink); box-shadow: 0 1px 2px rgba(17, 17, 31, .04), 0 24px 50px -32px rgba(17, 17, 31, .25); }
.vi-end__box { padding: 18px 18px 14px; border-radius: 18px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 0 0 1px rgba(17, 17, 31, .08), 0 18px 40px -24px rgba(17, 17, 31, .3); }
.vi .vi-end .lx-suggest__item { border-color: rgba(17, 17, 31, .08); background: var(--vi-neutral); color: var(--vi-ink); }
.vi .vi-end .lx-suggest__item:hover { border-color: rgba(17, 17, 31, .16); background: #ececf0; }
.vi-end__label { margin: 0; font: 500 11px/1.4 var(--vi-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vi-end__prompt { margin: 8px 0 16px; font: 600 19px/1.35 var(--vi-body); letter-spacing: -.01em; color: var(--vi-ink); }
.vi-end__prompt i { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--vi-ink); }
.vi-end__send { display: flex; justify-content: flex-end; margin: 0; }
.vi-end__send span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 16px; border-radius: 12px; background: var(--vi-ink); color: #fff; font: 600 14px/1 var(--vi-body); }
.vi-end__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Trust, restructured as a bento: the four facts are one path (a neutral card, a step per row, the icons joined by a
   line, the last one lime: you read it); what never gets in and the figures sit beside it on two more neutral cards. The section's own children are placed on a grid, so the markup stays the home page's. */
.is-violet .fr-section:has(#trust-band-title) { display: grid; grid-template-columns: 32px minmax(0, 1.15fr) 20px minmax(0, 1fr) 32px; grid-template-areas: "head head head head head" ". facts . never ." ". facts . stats ."; }
.is-violet .fr-section:has(#trust-band-title) > .fr-head { grid-area: head; padding-bottom: 36px; }
.is-violet .fr-section:has(#trust-band-title) > .fr-facts { grid-area: facts; display: flex; flex-direction: column; justify-content: center; gap: 0; margin: 0; padding: 32px 36px; border-radius: 30px; background: var(--vi-neutral); color: var(--vi-ink); }
.is-violet .fr-section:has(#trust-band-title) > .fr-never { grid-area: never; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 0 20px; padding: 28px 30px; border-radius: 30px; background: var(--vi-neutral); }
.is-violet .fr-section:has(#trust-band-title) > .fr-stats { grid-area: stats; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-content: center; gap: 20px; margin: 0; padding: 28px 30px; border-radius: 30px; background: var(--vi-neutral); }
.is-violet .fr-section:has(#trust-band-title) .fr-fact { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 16px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--vi-ink); }
.is-violet .fr-section:has(#trust-band-title) .fr-fact .fr-icon { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--vi-ink); box-shadow: 0 1px 2px rgba(17, 17, 31, .06); }
.is-violet .fr-section:has(#trust-band-title) .fr-fact:last-child .fr-icon { background: var(--vi-lime); color: var(--vi-ink); }
.is-violet .fr-section:has(#trust-band-title) .fr-fact + .fr-fact::before { content: ""; position: absolute; left: 23px; top: -16px; width: 2px; height: 32px; background: rgba(17, 17, 31, .12); }
.is-violet .fr-section:has(#trust-band-title) .fr-fact h3 { margin: 0; font: 700 20px/1.2 var(--vi-display); letter-spacing: -.012em; color: var(--vi-ink); }
.is-violet .fr-section:has(#trust-band-title) .fr-fact .fr-mono { margin-top: 4px; color: var(--muted); }
.is-violet .fr-section:has(#trust-band-title) .fr-never .fr-mono { color: var(--muted); }
.is-violet .fr-section:has(#trust-band-title) .fr-never ul { flex-direction: column; gap: 10px; font-size: 16px; }
.is-violet .fr-section:has(#trust-band-title) .fr-never li { color: var(--vi-ink); text-decoration-color: rgba(29, 15, 85, .4); }
.is-violet .fr-section:has(#trust-band-title) .fr-seal { margin: 4px 0 0; font-size: 14px; }
.is-violet .fr-section:has(#trust-band-title) .fr-stats div { display: grid; gap: 6px; align-items: start; padding: 0; border: 0; }
.is-violet .fr-section:has(#trust-band-title) .fr-stats b { font-size: clamp(48px, 4.6vw, 64px); }
.is-violet .fr-section:has(#trust-band-title) .fr-stats span { max-width: 12em; font-size: 15px; color: var(--vi-ink); }

/* ---------- Hero: fills the first screen, night to violet with a glow behind the box, fading into the white page at its
   foot. The question in very large, tight white type, the lead, the question box and the examples under it.
   The fade is its own layer: an eased ramp of white over the last 240px, starting just under See more examples so it stays readable (many stops, so no band shows where it
   starts), on a violet that runs to the very bottom, with the glow kept clear of it. */
/* The first screen holds the whole question on any device: the headline and the gaps scale with the screen's height as
   well as its width, so the question box is in view on a short laptop screen too (it was below the fold at 1280×720). */
.vi-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; margin-top: calc(-1 * var(--vi-top)); min-height: 100svh; padding: calc(clamp(20px, 6svh, 56px) + var(--vi-top)) 24px 210px; text-align: center; color: #fff; background: radial-gradient(55% 40% at var(--vi-gx) var(--vi-gy), rgba(122, 92, 255, .56), rgba(122, 92, 255, 0) 72%), radial-gradient(44% 36% at var(--vi-lx) var(--vi-ly), rgba(196, 184, 255, .28), rgba(196, 184, 255, 0) 70%), linear-gradient(180deg, var(--vi-night) 0%, #1b0e57 36%, #2d1a8e 60%, #4f37d0 80%, #5f47e0 100%); }
.vi-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 240px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .013) 8.1%, rgba(255, 255, 255, .049) 15.5%, rgba(255, 255, 255, .104) 22.5%, rgba(255, 255, 255, .175) 29%, rgba(255, 255, 255, .259) 35.3%, rgba(255, 255, 255, .352) 41.2%, rgba(255, 255, 255, .45) 47.1%, rgba(255, 255, 255, .55) 52.9%, rgba(255, 255, 255, .648) 58.8%, rgba(255, 255, 255, .741) 64.7%, rgba(255, 255, 255, .825) 71%, rgba(255, 255, 255, .896) 77.5%, rgba(255, 255, 255, .951) 84.5%, rgba(255, 255, 255, .987) 91.9%, #fff 100%); }
.vi-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1040px; margin: auto; }
.vi-hero h1 { max-width: 7em; margin: 0 auto; font: 700 clamp(40px, min(8vw, 25svh - 95px), 112px)/.92 var(--vi-display); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
/* The free plan, above the question: a frosted pill with its tag in lime, to pricing. */
.vi-hero__pill { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: background .2s, border-color .2s; margin: 0 0 clamp(14px, 3.2svh, 28px); padding: 5px 16px 5px 5px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 14px; font-weight: 500; color: #fff; }
.vi-hero__pill:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .16); color: #fff; }
.vi-hero__pill .icon { opacity: .8; transition: transform .2s; }
.vi-hero__pill:hover .icon { transform: translateX(2px); }
.vi-hero__pill span:first-child { padding: 4px 11px; border-radius: 999px; background: var(--vi-lime); color: var(--vi-ink); font-size: 12.5px; font-weight: 650; }
.vi-hero__lead { max-width: 33em; margin: clamp(14px, 3.2svh, 28px) auto 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .8); text-wrap: balance; }

/* The question box: white and rounded on a lavender ring, its button a violet pill (lavender until the question is long enough). */
.lx-ask { --menu-h: 316px; position: relative; z-index: 4; width: min(100%, 760px); margin: clamp(20px, 4svh, 36px) auto 0; }
.lx-composer { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; color: var(--ink); caret-color: var(--vi-violet); text-align: left; box-shadow: 0 0 0 8px rgba(185, 173, 255, .5), 0 40px 90px -30px rgba(8, 3, 36, .75); transition: box-shadow .2s, border-radius .2s; }
.lx-composer:focus-within { box-shadow: 0 0 0 8px rgba(201, 191, 255, .75), 0 40px 90px -30px rgba(8, 3, 36, .75); }
.lx-composer:has(.lx-prompts[open]) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.lx-composer__field { position: relative; }
.lx-composer textarea, .lx-ghost { padding: 22px 22px 6px; font-size: 18px; line-height: 1.45; }
.lx-composer textarea { display: block; width: 100%; min-height: clamp(56px, 11svh, 100px); max-height: 260px; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); field-sizing: content; }
.lx-composer textarea::placeholder { color: #8d8aa3; }
.lx-ghost { position: absolute; inset: 0; display: none; overflow: hidden; color: #8d8aa3; white-space: pre-wrap; pointer-events: none; }
.lx-ghost i { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--vi-violet); }
.lx-composer.is-typing textarea::placeholder { color: transparent; }
.lx-composer.is-typing textarea:placeholder-shown + .lx-ghost { display: block; }
.lx-composer__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px 12px; }
.lx-composer .dictation-button { width: 40px; height: 40px; border-radius: 12px; color: var(--vi-muted); }
.lx-composer .dictation-button:hover { background: var(--vi-mist); color: var(--vi-ink); }
.lx-composer .dictation-panel { margin: 0 12px 12px; text-align: left; }
.lx-send { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 42px; padding: 0 16px 0 18px; border: 0; border-radius: 12px; background: var(--vi-violet); color: #fff; font: 600 15px/1 var(--vi-body); transition: background .2s; }
.lx-send:hover { background: #4a2fe0; }
.lx-composer:has(textarea:invalid) .lx-send { background: var(--vi-lavender); }
.lx-busy { border-radius: 22px; background: rgba(29, 15, 85, .94); }
.lx-busy .ring { border-top-color: var(--vi-lavender); }
.lx-prompts { position: static; margin-right: auto; }
.lx-prompts summary { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--vi-ink); list-style: none; cursor: pointer; user-select: none; }
.lx-prompts summary::-webkit-details-marker { display: none; }
.lx-prompts summary:hover, .lx-prompts[open] summary { background: var(--vi-mist); }
.lx-prompts summary .icon:first-child { color: var(--vi-violet); }
.lx-prompts summary .icon:last-child { color: var(--vi-muted); transition: transform .2s; }
.lx-prompts[open] summary .icon:last-child { transform: rotate(180deg); }
.lx-prompts__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; height: var(--menu-h); padding: 4px 8px 8px; border-top: 1px solid var(--fr-rule); border-radius: 0 0 22px 22px; background: #fff; text-align: left; box-shadow: 0 0 0 6px rgba(185, 173, 255, .35), 0 30px 70px -34px rgba(31, 16, 102, .5); }
.lx-prompts__head { margin: 0; padding: 12px 12px 6px; font: 500 11.5px/1.4 var(--vi-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vi-muted); }
.lx-prompts__list { flex: 1; min-height: 0; display: grid; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lx-prompt { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; font-size: 14px; line-height: 1.35; color: var(--vi-ink); text-align: left; }
.lx-prompt:hover, .lx-prompt:focus-visible { background: var(--vi-mist); }
.lx-prompt__topic { font: 500 11.5px/1.4 var(--vi-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vi-violet); }

/* Examples under the box: six one-line pills in an even grid of two columns, as wide as the question box, so the rows
   never break unevenly whatever the face; the rest in place behind See more examples (site.js). At 13.5px every
   example fits a half-width pill on one line.
   While the Examples menu is open they step back, so nothing peeks out beside it. */
.vi-examples { width: min(100%, 760px); margin: 22px auto 0; transition: filter .2s; }
.vi-hero__inner:has(.lx-prompts[open]) .vi-examples { filter: opacity(0); pointer-events: none; }
.vi .lx-suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vi .lx-suggest--more { margin-top: 8px; }
.vi .lx-suggest__item { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .09); color: #fff; font: 500 13.5px/1.3 var(--vi-body); overflow: hidden; text-overflow: ellipsis; text-align: center; transition: background .2s, border-color .2s, transform .2s; }
.vi .lx-suggest__item:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.vi .lx-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 12px; border: 0; border-radius: 999px; background: none; color: #fff; font: 600 14px/1 var(--vi-body); transition: background .2s; }
.vi .lx-more:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.vi .lx-more .icon { transition: transform .2s; }
.vi .lx-more[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* ---------- Motion: one staggered entrance and a caret. None with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .vi-hero__pill, .vi-hero h1, .vi-hero__lead, .lx-ask, .vi-examples { animation: vi-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .vi-hero__lead { animation-delay: .08s; }
  .lx-ask { animation-delay: .14s; }
  .vi-examples { animation-delay: .24s; }
  .lx-ghost i, .vi-end__prompt i { animation: vi-caret 1.05s steps(1) infinite; }
  .lx-prompts[open] .lx-prompts__panel { animation: vi-drop .24s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes vi-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes vi-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes vi-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Narrower screens */
/* A very short screen (a phone held sideways): the headline on two lines, and the sentence under it left out, so the
   free pill, the headline and the question box still share the first screen. */
@media (max-height: 480px) and (min-width: 600px) {
  .vi-hero h1 { max-width: 12em; font-size: clamp(32px, 10svh, 44px); }
  .vi-hero__lead { display: none; }
}

@media (max-width: 860px) {
  .is-violet .lx-tour__panel { grid-template-columns: 1fr; min-height: 0; }
  .is-violet .lx-tour__mock { min-height: 300px; }
  .is-violet .fr-steps { grid-template-columns: 1fr; }
  .is-violet .fr-step .fr-step__mock { height: auto; padding: 24px 12px; }
  .vi-end__panel { grid-template-columns: 1fr; }
  .is-violet .fr-section:has(#trust-band-title) { grid-template-columns: 12px minmax(0, 1fr) 12px; grid-template-areas: "head head head" ". facts ." ". never ." ". stats ."; }
  .is-violet .fr-section:has(#trust-band-title) > .fr-facts { margin-bottom: 16px; padding: 24px; }
  .is-violet .fr-section:has(#trust-band-title) > .fr-never { margin-bottom: 16px; padding: 24px; }
  .is-violet .fr-section:has(#trust-band-title) > .fr-stats { padding: 24px; }
}
@media (max-width: 720px) {
  .is-violet .lx-tour { margin: 0 16px; }
  .is-violet .lx-tour__band { gap: 24px; padding-bottom: 20px; }
  .is-violet .lx-tour__tabs { border-radius: 24px; }
  .is-violet .lx-tour__tab { height: 38px; padding: 0 14px 0 11px; font-size: 14px; }
  .is-violet .lx-tour__stage, .is-violet .lx-tour.is-tabbed .lx-tour__stage { padding: 8px; border-radius: 26px; }
  .is-violet .lx-tour__text { padding: 28px 18px 30px; }
  .is-violet .lx-tour__mock { padding: 28px 14px; border-radius: 20px; }
  .is-violet .lx-window { border-radius: 24px; }
  .vi-end { width: calc(100% - 16px); padding: 48px 0 64px; }
  .vi-end__panel { padding: 8px; border-radius: 28px; }
  .vi-end__text { padding: 30px 18px 32px; }
  .vi-end__ask { padding: 28px 16px; border-radius: 22px; }
  .vi-end__chips .lx-suggest__item { white-space: normal; }
  .vi-hero { min-height: max(710px, 100svh); padding: calc(36px + var(--vi-top)) 16px 150px; }
  .vi-hero::after { height: 170px; }
  .vi-hero h1 { font-size: clamp(44px, 12.5vw, 60px); }
  .lx-ask { margin-top: 28px; --menu-h: 330px; }
  .lx-composer textarea, .lx-ghost { padding: 18px 18px 4px; font-size: 17px; }
  .lx-prompt { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; }
  .lx-send span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lx-send { width: 44px; padding: 0; justify-content: center; }
  /* Two rows that scroll sideways together, so all six stay one swipe away. */
  .vi .lx-suggest { display: grid; justify-content: start; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; width: calc(100% + 32px); margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
  .vi .lx-suggest::-webkit-scrollbar { display: none; }
  .vi .lx-suggest__item { min-height: 44px; scroll-snap-align: start; }
  .vi .lx-suggest--more { margin-top: 0; }
}