/* Lectern home (third pass 2026-09-12; owner: "more taste, colours, scroll animations,
   things that give dopamine", then "the hero is too overwhelming, the shifting tabs make
   no sense"). The page is a binder. The hero is one chat on a stack of coloured sheets;
   every section after it is a coloured divider with a tab on the content's left edge,
   each laid over the bottom of the one before:
   How it works (steps that advance on their own; the band moves yellow, pink, sky),
   Read only (cobalt; liquid-glass tiles over coloured circles, actions that lock), Works with (mint; three client
   cards that fan out on scroll), Questions (paper), the close (tomato; two marquees).
   The display face, the paper and the glass top bar moved into lectern.css on
   2026-09-13 so every page shares them; this file keeps the binder colours and the
   front page's own layout. */

body.home { }
.home h3 { font-size: 1.28rem; line-height: 1.2; }

/* selection follows the site rule in lectern.css: prose selects natively in yellow,
   everything that moves or is clicked is .nosel (the stage, the stickers, the tabs, the
   drawings, the split headings, the marquees). The drawn-stroke selection of the fourth
   pass is gone: it selected animations and read as broken. */
.hero-title, .stage, .asks, .band-tabs, .how-art, .how-steps h3, .how-bar, .trust-art, .never-card, .read-g, .client-mark, .faq-q, .marquee, .hero-sticker, .how-sticker, .split, .burst { -webkit-user-select: none; user-select: none; }
section { position: relative; z-index: 1; }

/* headings rise word by word the first time they are reached */
html.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
html.js .split .w > span { display: inline-block; transform: translateY(110%) rotate(5deg); transform-origin: left bottom; transition: transform 0.9s var(--spring) calc(var(--wi) * 55ms); }
html.js .split.in .w > span { transform: none; }

/* ── hero ─────────────────────────────────────────────────────────── */
/* The hero (fifth pass, 2026-09-13): one centred headline that says what the product
   does, one line under it, the two actions, then the chat. The two-column top with a
   paragraph beside the headline was cut ("does not look good"). */
.hero { padding: 84px 0 0; }
.hero-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.hero-title { isolation: isolate; font-size: clamp(3.6rem, 6.6vw, 6.2rem); letter-spacing: -0.04em; line-height: 0.96; max-width: 13em; }
html.js .hero-title, html.js .hero-lede, html.js .hero-actions { animation: rise 0.9s var(--spring) both; }
html.js .hero-lede { animation-delay: 0.1s; }
html.js .hero-actions { animation-delay: 0.18s; }
.hero-lede { color: var(--ink-2); font-size: 1.2rem; line-height: 1.5; max-width: 34em; text-wrap: balance; }
.hero-actions { justify-content: center; gap: 26px; margin-top: 6px; }
.hero-actions .btn { padding: 16px 26px; font-size: 1.06rem; }
/* the client name flips in place; the highlighter under it takes the client's tint */
.fliphl { position: relative; display: inline-block; }
.fliphl::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; bottom: 0.08em; height: 0.32em; background: var(--flipc, var(--hi)); border-radius: 0.06em; z-index: -1; transition: background-color 0.6s var(--soft); }
.flip { position: relative; display: inline-block; height: 1.12em; overflow: hidden; vertical-align: -0.2em; transition: width 0.6s var(--spring); }
.flip-word { position: absolute; left: 0; top: 0; display: block; line-height: 1.12em; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform 0.6s var(--spring), opacity 0.35s var(--soft); }
.flip-word.cur { transform: none; opacity: 1; }
.flip-word.out { transform: translateY(-105%); opacity: 0; }

/* the stage: one chat on a small stack of coloured sheets. The sheets take the colours
   of each question and shuffle when it changes; nothing else moves around the chat.
   (A version with ten Brightspace cards flying into the answer was judged too much.) */
.stage { position: relative; width: min(820px, calc(100% - 56px)); margin: 64px auto 0; }
.sheets { position: absolute; inset: 0; pointer-events: none; }
/* Three sheets stay fanned out behind the chat the whole time, for the colour; they sway
   a little, and between questions each fades to the next question's colour in place.
   (Hiding them behind the chat between questions was tried and read as dull.) */
.sheets span { --t: rotate(-1.5deg) translate(0, 46px) scale(1.03); position: absolute; inset: 14px 0 0; border-radius: 30px; background: var(--s3, var(--c-pink)); transform: var(--t); transition: background-color 0.9s var(--soft); animation: sway 9s ease-in-out infinite alternate; }
.sheets span:nth-child(2) { --t: rotate(-5.5deg) translate(-40px, 16px); background: var(--s1, var(--c-sky)); animation-duration: 11s; animation-delay: -4s; }
.sheets span:nth-child(3) { --t: rotate(4.5deg) translate(42px, 22px); background: var(--s2, var(--c-yellow)); animation-duration: 10s; animation-delay: -7s; }
@keyframes sway { to { transform: var(--t) rotate(1.2deg) translateY(-6px); } }
html.js .sheets span { animation: sheet-in 1.1s cubic-bezier(0.2, 0.85, 0.25, 1) 0.45s backwards, sway 9s ease-in-out 1.6s infinite alternate; }
html.js .sheets span:nth-child(2) { animation-delay: 0.55s, -4s; animation-duration: 1.1s, 11s; }
html.js .sheets span:nth-child(3) { animation-delay: 0.65s, -7s; animation-duration: 1.1s, 10s; }
@keyframes sheet-in { from { transform: rotate(0deg) translate(0, 2px) scale(0.96); } to { transform: var(--t); } }
/* the question's sticker: its glyph on an ink disc, slapped on the chat's corner and
   re-slapped with every new question */
/* It sits half over the chat's lower left edge, where the reply column is empty, clear
   of the client switcher above and the composer below (the top corner covered the
   Claude button; beside the chat it floated loose over the sheets). */
.hero-sticker { position: absolute; z-index: 3; left: -42px; bottom: 96px; width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--s1, var(--c-sky)); box-shadow: 0 20px 36px -16px rgba(22, 19, 14, 0.65); transform: rotate(-12deg); transition: color 0.6s var(--soft); }
.hero-sticker svg { width: 40px; height: 40px; }
html.js .hero-sticker { animation: sticker 0.8s var(--snap) 0.9s backwards; }
.hero-sticker.pop { animation: sticker 0.7s var(--snap); }

/* the chat */
/* The chat's soft shadow is its own layer under the chat and never above it: a blurred
   box-shadow leaked a grey haze over the paper above the window. */
.chat { position: relative; z-index: 2; height: 520px; display: flex; flex-direction: column; background: var(--card); border-radius: 26px; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px rgba(22, 19, 14, 0.35); overflow: hidden; }
.stage::after { content: ""; position: absolute; z-index: 1; left: 48px; right: 48px; top: 55%; bottom: -22px; border-radius: 40px; background: rgba(22, 19, 14, 0.42); filter: blur(34px); pointer-events: none; }
html.js .chat { animation: chat-in 1s var(--spring) 0.2s backwards; }
@keyframes chat-in { from { opacity: 0; transform: translateY(40px) scale(0.96); } }
.c-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--line); }
.seg-c { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--paper-2); }
.seg-c button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.seg-c button:hover { background: rgba(22, 19, 14, 0.06); color: var(--ink); }
.seg-c button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 3px 8px -4px rgba(22, 19, 14, 0.35); }
.seg-c .logo { width: 17px; height: 17px; }
.chat .logo-chatgpt, .client .logo-chatgpt { color: var(--ink); }
.c-conn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 9px; border-radius: 999px; background: var(--paper-2); font-size: 0.88rem; font-weight: 600; }
.c-conn svg { width: 21px; height: 21px; }
.c-conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2.4s infinite; }
.c-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 22px 26px 6px; overflow: hidden; transition: opacity 0.3s var(--soft), transform 0.3s var(--soft); }
.c-body.leave { opacity: 0; transform: translateY(-12px); }
.me { align-self: flex-end; max-width: 80%; padding: 11px 17px; border-radius: 20px 20px 6px 20px; background: var(--ink); color: var(--paper); font-size: 1rem; line-height: 1.35; transform-origin: 100% 100%; animation: me-in 0.6s var(--snap) both; }
@keyframes me-in { from { opacity: 0; transform: translateY(80px) scale(0.7); } }
.reply { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; animation: t-in 0.4s var(--spring) both; }
@keyframes t-in { from { opacity: 0; transform: translateY(8px); } }
.reply > .logo { width: 26px; height: 26px; margin-top: 1px; }
.tool { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 7px; border-radius: 9px; background: var(--paper-2); font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.tool > svg:first-child { width: 18px; height: 18px; }
.tool .st { display: grid; width: 15px; height: 15px; }
.tool .st svg { width: 15px; height: 15px; color: var(--green); animation: tick 0.5s var(--snap) both; }
@keyframes tick { from { transform: scale(0) rotate(-40deg); } }
.tool.busy .st::before { content: ""; width: 11px; height: 11px; margin: 2px; border-radius: 50%; border: 1.7px solid var(--line-2); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.arow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 14px 7px 7px; border-radius: 13px; background: var(--paper); opacity: 0; }
.arow.on { opacity: 1; animation: land 0.75s var(--snap) both; }
@keyframes land { 0% { background: var(--hi); transform: scale(1.05); } 100% { background: var(--paper); transform: none; } }
.arow-g { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tab); }
.arow-g svg { width: 18px; height: 18px; }
.arow-t { min-width: 0; line-height: 1.25; }
.arow-t b { display: block; font-size: 0.94rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow-t span { display: block; font-size: 0.78rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow-w { font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aline { margin-top: 12px; font-size: 0.95rem; color: var(--ink-2); animation: t-in 0.5s var(--spring) both; }
/* the syllabus answer: the grade weights as one filled bar */
.wt { margin-top: 12px; padding: 18px; border-radius: 16px; background: var(--paper); opacity: 0; }
.wt.on { opacity: 1; animation: land 0.75s var(--snap) both; }
.wt-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wt-top b { display: block; font-size: 1rem; font-weight: 600; }
.wt-top span span { display: block; font-size: 0.8rem; color: var(--mute); }
.wt-v { font-family: var(--display); font-size: 2.8rem; font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.wt-bar { display: flex; gap: 4px; height: 40px; margin-top: 16px; }
.wt-seg { width: 0; border-radius: 9px; background: color-mix(in srgb, var(--tab) 55%, var(--card)); transition: width 0.9s var(--spring); }
.wt-seg:nth-child(2) { transition-delay: 0.08s; } .wt-seg:nth-child(3) { transition-delay: 0.16s; } .wt-seg:nth-child(4) { transition-delay: 0.24s; }
.wt-seg.key { background: var(--hi); box-shadow: inset 0 0 0 2px var(--ink); }
.wt.fill .wt-seg { width: calc(var(--w) * 1% - 3px); }
.wt-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; font-size: 0.78rem; color: var(--mute); }
.wt-legend > span { min-width: 0; white-space: nowrap; }
.wt-legend b { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.wt-legend b::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--tab) 55%, var(--card)); }
.wt-legend .key b::before { background: var(--hi); box-shadow: inset 0 0 0 1.5px var(--ink); }
/* the grades answer: a number that counts up, three bars that fill */
.gr { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--paper); opacity: 0; }
.gr.on { opacity: 1; animation: land 0.75s var(--snap) both; }
.gr-big b { display: block; font-family: var(--display); font-size: 3.6rem; font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.gr-big span { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--mute); }
.gr-bars { display: flex; flex-direction: column; gap: 6px; }
.gb { display: grid; grid-template-columns: 82px minmax(0, 1fr) 36px; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; font-size: 0.82rem; }
.gb.landed { animation: gb-land 0.8s var(--soft); }
@keyframes gb-land { from { background: var(--hi); } }
.gb-track { height: 10px; border-radius: 99px; background: rgba(22, 19, 14, 0.08); overflow: hidden; }
.gb-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--tab); transition: width 1s var(--spring); }
.gb.fill .gb-fill { width: var(--v); }
.gb.low .gb-fill { background: var(--c-tomato); }
.gb b { text-align: right; font-variant-numeric: tabular-nums; }
/* the composer: the question is typed here, then sent */
.c-comp { display: flex; align-items: center; gap: 10px; margin: 8px 14px 14px; padding: 8px 8px 8px 18px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.c-field { flex: 1; min-width: 0; height: 24px; line-height: 24px; font-size: 1rem; white-space: nowrap; overflow: hidden; }
.c-field:empty::before { content: "Ask anything"; color: var(--mute); }
.c-field.typing:not(:empty)::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -0.17em; background: var(--ink); animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.c-send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-3); color: var(--card); transition: background 0.25s, transform 0.3s var(--snap); }
.c-send.ready { background: var(--ink); }
.c-send.press { transform: scale(0.78); }
.c-send svg { width: 18px; height: 18px; }

/* the questions under the stage */
.asks { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* the questions are frosted glass: they sit on the sheets' edge and the chat's shadow,
   which show through them */
.ask { --tab: var(--hi); display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 8px; border: 0; border-radius: 999px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.42)); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px var(--line), 0 10px 20px -14px rgba(22, 19, 14, 0.5); font-weight: 600; font-size: 0.96rem; color: var(--ink); transition: transform 0.35s var(--snap), background 0.2s, box-shadow 0.2s, color 0.2s; user-select: none; }
.ask i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tab); color: var(--ink); transition: transform 0.5s var(--snap); }
.ask i svg { width: 17px; height: 17px; }
.ask:hover { transform: translateY(-3px) rotate(-1.2deg); background: linear-gradient(150deg, color-mix(in srgb, var(--tab) 40%, rgba(255, 255, 255, 0.75)), color-mix(in srgb, var(--tab) 25%, rgba(255, 255, 255, 0.5))); }
.ask:hover i { transform: rotate(-14deg) scale(1.08); }
.ask:active { transform: scale(0.95); }
.ask[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 12px 22px -12px rgba(22, 19, 14, 0.7); }
html.js .asks .ask { animation: rise 0.7s var(--spring) calc(0.9s + var(--i) * 80ms) backwards; }

/* ── the dividers (the band and tab rules are in lectern.css) ─────── */
.band-how { --bc: var(--howc, var(--c-yellow)); }
.band-trust { --bc: var(--c-cobalt); }
.band-with { --bc: var(--c-mint); }

/* ── how it works: a pinned scroll story ──────────────────────────── */
.band-how { z-index: 2; margin-top: 190px; padding-top: 130px; background: var(--howc, var(--c-yellow)); transition: background-color 0.8s var(--soft); }
.band-how[data-step="1"] { --howc: var(--c-pink); }
.band-how[data-step="2"] { --howc: var(--c-sky); }
.how-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.how-copy .lede { margin-top: 18px; }
.how-steps { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.how-step { position: relative; padding: 14px 20px 18px; border-radius: 20px; transition: background 0.4s var(--soft); }
.how-step h3 { font-size: 1.3rem; color: rgba(22, 19, 14, 0.62); transition: color 0.3s; }
.how-step h3 button { all: unset; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.how-step h3 button::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.how-step h3 button:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 2px; }
.how-step:hover h3 { color: var(--ink); }
.how-n { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(22, 19, 14, 0.4); font-family: var(--sans); font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.5s var(--snap); }
/* the description opens on a grid row (0fr to 1fr), which moves at a constant pace
   whatever its height; a max-height transition jumped at the end */
.how-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s var(--spring), opacity 0.45s var(--soft); }
.how-more p { margin: 0 0 0 50px; min-height: 0; overflow: hidden; color: var(--ink-2); transform: translateY(-4px); transition: transform 0.6s var(--spring), padding 0.6s var(--spring); }
.how-step { transition: background 0.5s var(--soft); }
.how-step.on { background: rgba(255, 255, 255, 0.55); }
.how-step.on h3 { color: var(--ink); }
.how-step.on .how-n { background: var(--ink); color: var(--paper); box-shadow: none; transform: rotate(-10deg); }
.how-step.on .how-more { grid-template-rows: 1fr; opacity: 1; }
.how-step.on .how-more p { transform: none; padding-top: 8px; }
.how-bar { position: absolute; left: 20px; right: 20px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(22, 19, 14, 0.1); overflow: hidden; opacity: 0; transition: opacity 0.4s; }
.how-step.on .how-bar { opacity: 1; }
/* the fill is driven by home.js (Web Animations), so it pauses off-screen and hands over
   to the next step when it lands, with no restart flicker */
.how-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.how-art { position: relative; display: grid; place-items: center; min-height: 480px; }
/* the step number, a sticker slapped on the drawing's corner each time the step changes */
.how-sticker { position: absolute; z-index: 2; left: -30px; top: -30px; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--howc, var(--c-yellow)); font-family: var(--display); font-size: 2.9rem; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; box-shadow: 0 14px 26px -12px rgba(22, 19, 14, 0.6); transform: rotate(-12deg); transition: color 0.8s var(--soft); }
.how-sticker.pop { animation: sticker 0.7s var(--snap); }
.how-card { position: relative; width: min(580px, 100%); padding: 30px; border-radius: 30px; background: var(--card); box-shadow: 0 0 0 1px rgba(22, 19, 14, 0.06), 0 50px 90px -46px rgba(22, 19, 14, 0.5); transform: rotate(var(--hr, -2.5deg)); transition: transform 0.9s var(--snap); }
.band-how[data-step="1"] .how-card { --hr: 2deg; }
.band-how[data-step="2"] .how-card { --hr: -1deg; }
.how-card { aspect-ratio: 360 / 230; box-sizing: content-box; }
.how-card svg { position: absolute; inset: 30px; display: block; width: calc(100% - 60px); height: auto; }
/* the drawings cross-fade: the new one rises in while the old one falls away underneath */
.how-card svg.enter { animation: how-in 0.75s var(--spring) both; }
.how-card svg.leave { z-index: 0; animation: how-out 0.45s var(--soft) both; pointer-events: none; }
@keyframes how-in { from { opacity: 0; transform: translateY(26px) scale(0.96); } }
@keyframes how-out { to { opacity: 0; transform: translateY(-14px) scale(0.98); } }

/* ── read only ────────────────────────────────────────────────────── */
.band-trust { z-index: 3; padding-top: 130px; isolation: isolate; background: var(--c-cobalt); color: var(--paper); }
.band-trust :focus-visible { outline-color: var(--hi); }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.trust-copy { position: sticky; top: 130px; }
.trust-copy h2 { font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: 0.98; }
.trust-copy .lede { margin: 22px 0 26px; color: rgba(248, 247, 243, 0.82); }
.trust-copy .textlink { color: var(--paper); }
.reads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.band-trust .wrap { position: relative; z-index: 1; }
/* the art: solid circles in the binder colours rising from the right, seen through
   frosted liquid-glass tiles. The circles sit in a box as wide as the content, so on an
   ultrawide screen they stay behind the tiles instead of drifting to the far edge. */
.trust-art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.trust-orbs { position: absolute; top: 0; bottom: 0; left: 50%; width: min(var(--wrap-max), calc(100% - var(--wrap-pad))); transform: translate3d(-50%, calc(var(--tp, 0.5) * -120px + 60px), 0); }
.trust-orbs i { position: absolute; border-radius: 50%; animation: orb 18s ease-in-out infinite alternate; }
.trust-orbs i:nth-child(1) { width: 460px; height: 460px; right: -190px; top: 130px; background: var(--c-yellow); }
.trust-orbs i:nth-child(2) { width: 250px; height: 250px; right: 270px; top: 70px; background: var(--c-tomato); animation-duration: 22s; animation-delay: -6s; }
.trust-orbs i:nth-child(3) { width: 350px; height: 350px; right: 70px; top: 520px; background: var(--c-pink); animation-duration: 20s; animation-delay: -3s; }
.trust-orbs i:nth-child(4) { width: 210px; height: 210px; right: 560px; top: 400px; background: var(--c-mint); animation-duration: 16s; animation-delay: -9s; }
.trust-orbs i:nth-child(5) { width: 320px; height: 320px; right: -80px; top: 850px; background: #7cc4ff; animation-duration: 24s; animation-delay: -12s; }
@keyframes orb { to { transform: translate3d(-46px, 34px, 0) scale(1.07); } }
.read { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 188px; padding: 20px; border-radius: 24px; color: var(--ink); background: linear-gradient(150deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34)); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 -20px 34px -26px rgba(255, 255, 255, 0.8), 0 26px 46px -30px rgba(8, 16, 90, 0.7); transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.4s var(--spring); }
/* the sheen follows the pointer across the glass */
.read::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--gx, 18%) var(--gy, 0%), rgba(255, 255, 255, 0.7), transparent 58%); opacity: 0.55; transition: opacity 0.3s; pointer-events: none; }
.read:hover::before { opacity: 1; }
.read > * { position: relative; }
html.js .reads:not(.in) .read { opacity: 0; }
html.js .reads.in .read { animation: pop 0.8s var(--snap) calc(var(--i) * 60ms) backwards; }
@keyframes pop { from { opacity: 0; transform: translateY(46px) scale(0.9) rotate(-3deg); } }
.read-g { width: 46px; height: 46px; margin-bottom: auto; display: grid; place-items: center; border-radius: 15px; background: var(--ink); color: var(--hi); transition: transform 0.5s var(--snap); }
.read-g svg { width: 23px; height: 23px; }
.read:hover .read-g { transform: rotate(-10deg) scale(1.1); }
.read b { margin-top: 22px; font-size: 1.06rem; font-weight: 600; }
.read-q { margin-top: 4px; font-size: 0.92rem; color: rgba(22, 19, 14, 0.72); }
.never-wrap { margin-top: 64px; }
.never-card { position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 22px 44px; padding: 30px 36px; border-radius: 30px; color: var(--ink); background: linear-gradient(150deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.42)); -webkit-backdrop-filter: blur(44px) saturate(190%); backdrop-filter: blur(44px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 30px 60px -34px rgba(8, 16, 90, 0.75); }
.never-label { font-family: var(--display); font-size: 2.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.never { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nv { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(22, 19, 14, 0.07), 0 8px 16px -12px rgba(8, 16, 90, 0.45); font-weight: 600; }
/* each action's glyph turns into a lock, one after the other, when the card is reached */
.nv-g { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); transition: background-color 0.3s var(--soft) var(--dl, 0s), color 0.3s var(--soft) var(--dl, 0s); }
.nv-g svg { position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; transition: transform 0.55s var(--snap) var(--dl, 0s), opacity 0.25s var(--soft) var(--dl, 0s); }
.nv-g svg + svg { opacity: 0; transform: scale(0.3) rotate(-90deg); }
.never-card.locked .nv-g { background: var(--c-tomato); color: var(--ink); }
.never-card.locked .nv-g svg:first-child { opacity: 0; transform: scale(0.3) rotate(90deg); }
.never-card.locked .nv-g svg + svg { opacity: 1; transform: none; }
.never-card.locked .nv { animation: nv-no 0.42s ease-out calc(var(--dl, 0s) + 0.12s); }
@keyframes nv-no { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* ── works with ───────────────────────────────────────────────────── */
.band-with { z-index: 4; padding-top: 130px; padding-bottom: 104px; background: var(--c-mint); }
.with-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: end; }
.with-side .lede { margin-bottom: 16px; }
.clients { --f: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 56px; }
.client { position: relative; transform: translate3d(calc((1 - var(--f)) * var(--k) * -104%), calc((1 - var(--f)) * 40px), 0) rotate(calc(var(--k) * (1.5deg + (1 - var(--f)) * 7deg))); }
.client:nth-child(2) { z-index: 2; }
.client-in { height: 100%; display: flex; flex-direction: column; gap: 24px; padding: 30px; border-radius: 30px; background: var(--card); box-shadow: 0 34px 60px -38px rgba(22, 19, 14, 0.55); transition: transform 0.55s var(--snap), box-shadow 0.3s; }
.client:hover .client-in { transform: translateY(-12px) rotate(calc(var(--k) * -1.5deg)); box-shadow: 0 50px 70px -40px rgba(22, 19, 14, 0.6); }
.client-head { display: flex; align-items: center; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.client-mark { flex: none; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 22px; background: var(--tint); }
.client-mark .logo { width: 36px; height: 36px; transition: transform 0.9s var(--snap); }
.client:hover .client-mark .logo { transform: rotate(180deg) scale(1.12); }
.client h3 { font-size: 2rem; line-height: 1; letter-spacing: -0.03em; }
.client .by { display: block; margin-top: 6px; font-family: var(--sans); font-size: 0.92rem; font-weight: 400; letter-spacing: 0; color: var(--mute); }
.client-spec { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.client-spec dt { font-size: 0.86rem; font-weight: 500; color: var(--mute); }
.client-spec dd { margin: 3px 0 0; font-weight: 500; }
.client .btn { align-self: flex-start; }
.ai-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 48px; padding: 30px 34px; border-radius: 30px; background: var(--ink); color: var(--paper); }
.ai-row :focus-visible { outline-color: var(--hi); }
.ai-copy h3 { font-size: 1.65rem; letter-spacing: -0.025em; }
.ai-copy p { margin-top: 8px; color: rgba(248, 247, 243, 0.78); }
.ai-copy a { color: var(--paper); text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ai-row .input { background: rgba(255, 255, 255, 0.08); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-size: 0.96rem; }
.ai-row .input:focus { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 2px var(--hi); }
.ai-row .btn { background: var(--hi); color: var(--ink); }
.ai-row .btn:hover { background: var(--hi-2); }
.ai-row .btn.did { background: var(--c-mint); color: var(--ink); }
/* the other way in: Lectern's own chat (owner, 2026-10-12) */
.here-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 48px; padding: 30px 34px; border-radius: 30px; background: var(--c-yellow); }
.here-copy h3 { font-size: 1.65rem; letter-spacing: -0.025em; }
.here-copy p { margin-top: 8px; color: var(--ink-2); max-width: 46em; }
.here-row .btn { flex: none; }
.here-row + .ai-row { margin-top: 16px; }
.burst { position: fixed; z-index: 60; width: 14px; height: 5px; border-radius: 3px; pointer-events: none; }

/* ── questions ────────────────────────────────────────────────────── */
.faq-section { padding: 140px 0 0; }
.faq-section .section-head { margin-bottom: 36px; }
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq details p { margin: 0; color: var(--ink-2); }
/* With script: the details become a question list on the left and one answer panel on
   the right, as tall as the tallest answer, so picking a question moves nothing. Each
   question carries a binder colour; the panel takes it. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.faq-q { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.faq-q button { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; font-weight: 600; font-size: 1.04rem; color: var(--ink-2); background: none; border: 0; border-radius: 12px; padding: 13px 16px; transition: background 0.2s, color 0.2s, transform 0.4s var(--snap); }
.faq-q button::before { content: ""; flex: none; width: 8px; height: 24px; border-radius: 4px; background: var(--c); opacity: 0.35; transform: scaleY(0.5); transition: opacity 0.25s, transform 0.4s var(--snap); }
.faq-q button:hover { background: rgba(22, 19, 14, 0.05); color: var(--ink); }
.faq-q button:hover::before { opacity: 1; }
.faq-q button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--hair); transform: translateX(6px); }
.faq-q button[aria-selected="true"]::before { opacity: 1; transform: none; }
.faq-a { padding: 36px 40px; display: grid; background: color-mix(in srgb, var(--c, var(--hi)) 34%, var(--card)); box-shadow: none; border-radius: 30px; transition: background-color 0.5s var(--soft); }
.faq-a > * { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 0.35s var(--soft), transform 0.5s var(--spring); pointer-events: none; }
.faq-a > .on { opacity: 1; transform: none; pointer-events: auto; }
.faq-a h3 { font-size: 1.8rem; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px; }
.faq-a p { margin: 0; color: var(--ink); font-size: 1.06rem; line-height: 1.6; }

/* ── the close ────────────────────────────────────────────────────── */
.band-close { margin: 150px 14px 14px; padding: 64px 0; background: var(--c-tomato); overflow: hidden; }
.marquee { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee.rev { animation-direction: reverse; animation-duration: 80s; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mq { flex: none; display: inline-flex; align-items: center; gap: 11px; height: 56px; margin: 6px 14px 6px 0; padding: 0 24px 0 11px; border-radius: 999px; background: var(--card); font-weight: 600; font-size: 1.06rem; white-space: nowrap; transform: rotate(var(--r)); box-shadow: 0 10px 20px -14px rgba(22, 19, 14, 0.5); }
.mq i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--tab); }
.mq i svg { width: 18px; height: 18px; }
.closing-inner { padding: 88px 0; text-align: center; }
.closing-inner h2 { font-size: clamp(3.4rem, 7.6vw, 7.4rem); line-height: 0.95; letter-spacing: -0.05em; isolation: isolate; }
.band-close .hl svg path { mix-blend-mode: normal; }
.closing-actions { justify-content: center; margin-top: 44px; }
.band-close .btn { padding: 19px 32px; font-size: 1.12rem; }

/* ── big, wide and short screens ──────────────────────────────────── */
/* Wider content on large monitors; an ultrawide gets the same page centred, with the
   bands running the full width. Short windows (a laptop with the dock, 2560x1080) pull
   the hero in so the whole chat is on the first screen. */
@media (min-width: 1800px) {
  .stage { width: 900px; }
  .chat { height: 560px; }
}
@media (min-width: 1061px) and (max-height: 860px) {
  .hero { padding-top: 56px; }
  .hero-title { font-size: clamp(3.2rem, 5.6vw, 5rem); }
  .stage { margin-top: 44px; }
  .chat { height: 480px; }
}

/* ── narrower screens ─────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .how-grid, .trust-grid, .with-head, .ai-row, .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .stage { margin-top: 56px; }
  .hero-sticker { display: none; }
  .how-art { min-height: 0; }
  .how-sticker { left: -14px; top: -20px; width: 72px; height: 72px; font-size: 2.3rem; }
  .trust-copy { position: static; }
  .clients { grid-template-columns: 1fr; }
  .client { transform: none; }
}
/* ── phones (owner, 2026-10-12: the site was desktop only until then) ── */
@media (max-width: 719px) {
  /* the tilted sheets behind the chat reach past the screen's edge; unclipped, a phone widened
     its layout viewport to hold them and the whole home page scrolled sideways */
  .hero { padding-top: 36px; overflow-x: clip; }
  .hero-title { font-size: clamp(2.5rem, 11.5vw, 3.3rem); }
  .hero-lede { font-size: 1.04rem; }
  .hero-actions { flex-direction: column; gap: 16px; }
  .stage { width: calc(100% - 24px); margin-top: 40px; }
  .chat { height: 470px; border-radius: 22px; }
  .c-conn { display: none; }
  .c-head { padding: 10px; }
  .seg-c button { height: 34px; padding: 0 10px 0 8px; font-size: 0.84rem; gap: 6px; }
  .c-body { padding: 18px 14px 6px; }
  .reply { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .reply > .logo { width: 22px; height: 22px; }
  .arow { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; padding: 6px 10px 6px 6px; }
  .arow-g { width: 30px; height: 30px; }
  .arow-w { font-size: 0.8rem; }
  .gr { gap: 14px; padding: 14px; }
  .gr-big b { font-size: 2.6rem; }
  .gb { grid-template-columns: 64px minmax(0, 1fr) 32px; }
  .wt-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asks { gap: 8px; margin-top: 24px; padding: 0 12px; }
  .ask { height: 44px; font-size: 0.9rem; padding: 0 16px 0 6px; }
  .ask i { width: 30px; height: 30px; }

  .band { margin: 0 8px; border-radius: 30px; padding-bottom: 96px; }
  .band + .band { margin-top: -30px; }
  .band-tabs { left: 14px; width: calc(100% - 28px); top: -58px; height: 66px; }
  .band-tab { height: 66px; font-size: 0.78rem; padding: 0 12px 8px; }
  .band-how { margin-top: 120px; padding-top: 84px; }
  .band-trust, .band-with { padding-top: 84px; }
  .band-with { padding-bottom: 72px; }
  .how-steps { margin-top: 26px; }
  .how-step { padding: 12px 14px 16px; }
  .how-step h3 { font-size: 1.12rem; }
  .how-more p { margin-left: 50px; font-size: 0.96rem; }
  .how-card { padding: 16px; border-radius: 22px; }
  .how-card svg { inset: 16px; width: calc(100% - 32px); }
  .how-sticker { left: 10px; top: -26px; width: 58px; height: 58px; font-size: 1.9rem; }

  .trust-copy h2 { font-size: clamp(2.4rem, 11vw, 3rem); }
  /* the circles sit behind the tiles, below the heading, so the white words stay on blue */
  .trust-orbs { top: 520px; }
  .trust-orbs i:nth-child(1) { width: 300px; height: 300px; right: -120px; }
  .trust-orbs i:nth-child(2) { width: 160px; height: 160px; right: 180px; }
  .trust-orbs i:nth-child(3) { width: 240px; height: 240px; right: 20px; top: 560px; }
  .trust-orbs i:nth-child(4) { width: 150px; height: 150px; right: 240px; top: 420px; }
  .trust-orbs i:nth-child(5) { width: 220px; height: 220px; right: -60px; top: 900px; }
  .reads { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .read { min-height: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; transform: none; }
  .read-g { grid-row: span 2; width: 42px; height: 42px; margin: 0; border-radius: 13px; }
  .read-g svg { width: 20px; height: 20px; }
  .read b { margin-top: 0; font-size: 1rem; }
  .read-q { margin-top: 1px; font-size: 0.88rem; }
  .never-wrap { margin-top: 36px; }
  .never-card { padding: 24px 20px; border-radius: 24px; gap: 18px; }
  .never-label { font-size: 2rem; }
  .nv { height: 46px; font-size: 0.96rem; }

  .clients { margin-top: 36px; gap: 14px; }
  .client-in { padding: 22px; border-radius: 24px; gap: 18px; }
  .client h3 { font-size: 1.7rem; }
  .client-mark { width: 56px; height: 56px; border-radius: 18px; }
  .ai-row { padding: 24px 20px; border-radius: 24px; margin-top: 32px; }
  .here-row { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; border-radius: 24px; margin-top: 32px; }
  .here-row + .ai-row { margin-top: 12px; }

  .faq-section { padding-top: 96px; }
  .faq-a { padding: 24px 22px; border-radius: 24px; }
  .faq-a h3 { font-size: 1.4rem; }
  .faq-a p { font-size: 1rem; }

  .band-close { margin: 96px 8px 8px; padding: 40px 0; border-radius: 30px; }
  .mq { height: 46px; font-size: 0.94rem; padding: 0 18px 0 8px; }
  .mq i { width: 30px; height: 30px; }
  .closing-inner { padding: 56px 0; }
  .closing-inner h2 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .closing-actions { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero-title, html.js .hero-side, html.js .chat, html.js .asks .ask, .marquee, html.js .sheets span, .sheets span, html.js .hero-sticker, .hero-sticker.pop { animation: none; }
  html.js .split .w > span { transform: none; transition: none; }
  html.js .reads .read { animation: none; opacity: 1; }
  .trust-orbs i, .never-card.locked .nv { animation: none; }
  .how-bar { display: none; }
  .how-more, .how-more p, .how-step { transition: none; }
  .how-card svg.enter, .how-card svg.leave { animation: none; }
  .band-tab, .band-tab.on, .band-tabs::after { transform: none; transition: none; }
}