/* The Bendis presentation site. One stylesheet, no build step.
   The palette is the approved reference of 2026-10-28 (owner): warm ivory, near black, royal blue for
   the one action colour, warm grey for supporting copy, cyan only for conversational state and small
   accents, soft charcoal for the host's panel. Every colour is a token here and nowhere else.
   Contrast (WCAG AA): grey on ivory 5.9:1; blue on ivory 5.4:1; white on blue 5.4:1; ivory on charcoal
   15:1; the charcoal panel's soft text (#C9C3BA) 9.2:1; cyan is never small text on ivory. */

@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 500; font-display: swap;
             src: url("../fonts/literata.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap;
             src: url("../fonts/literata-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap;
             src: url("../fonts/source-sans-3.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
             src: url("../fonts/source-sans-3-italic.woff2") format("woff2"); }

:root {
    --ivory: #F8F7F4;
    --ink: #1B1917;
    --blue: #1057DF;
    --blue-deep: #0C45B3;
    --grey: #675F59;
    --cyan: #21C7E1;
    --charcoal: #202020;
    --charcoal-lift: #2A2927;
    --white: #FFFFFF;
    --border: #DED9D2;
    --panel-text: #F3EFE8;
    --panel-soft: #C9C3BA;
    --ink-deep: #000000;
    --error: #B3261E;

    --serif: "Literata", Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

    --gutter: clamp(1rem, 4vw, 3rem);
    --max: 1280px;
    --measure: 60ch;
    --radius: 14px;
    --radius-lg: 24px;
    --pill-h: 52px;
    --shadow: 0 30px 60px -36px rgba(27, 25, 23, 0.35), 0 0 0 1px rgba(27, 25, 23, 0.06);

}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font: 400 1.125rem/1.6 var(--serif);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}
body.paper { background: var(--ivory); }

img, video, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1rem; }
ul, ol, dl { margin: 0; padding: 0; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.skip {
    position: absolute; left: var(--gutter); top: -4rem; z-index: 30;
    padding: 0.75rem 1.25rem; border-radius: 999px;
    background: var(--ink); color: var(--ivory); font: 500 1rem/1 var(--sans);
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---- type -------------------------------------------------------------------------------- */

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.04; letter-spacing: -0.022em; margin-bottom: 1.25rem; max-width: 14ch; }
h1 em { font-style: italic; color: var(--blue); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.018em; max-width: 24ch; margin-bottom: 1rem; }
h3 { font-weight: 500; font-size: 1.3125rem; line-height: 1.3; margin-bottom: 0.6rem; }
.eyebrow { display: block; margin: 0 0 1.1rem; font: 600 0.875rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.lede { font-size: clamp(1.125rem, 1.35vw, 1.3125rem); color: var(--grey); max-width: 46ch; margin-bottom: 1.75rem; }
.note { color: var(--grey); max-width: var(--measure); }
.small { font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); }
figcaption { margin-top: 0.75rem; font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); }

/* ---- controls ---------------------------------------------------------------------------- */

.pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: var(--pill-h); padding: 0 1.6rem; border: 1px solid transparent; border-radius: 999px;
    font: 500 1.0625rem/1 var(--sans); text-decoration: none; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pill-blue { background: var(--blue); color: var(--white); }
.pill-blue:hover { background: var(--blue-deep); }
.pill-ink { background: var(--ink); color: var(--ivory); }
.pill-ink:hover { background: var(--ink-deep); }
.pill-ghost { background: var(--white); color: var(--ink); border-color: var(--border); }
.pill-ghost:hover { border-color: var(--ink); }
.textlink {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0; font: 400 1.0625rem/1 var(--sans); color: var(--ink);
    text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.textlink:hover { text-decoration-thickness: 2px; }

/* ---- header ------------------------------------------------------------------------------ */

.top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; padding: 0.8rem max(var(--gutter), calc((100% - var(--max)) / 2));
    background: rgba(248, 247, 244, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
[id] { scroll-margin-top: 84px; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font: 500 1.375rem/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; }
.wordmark img { width: 36px; height: 36px; flex: none; }
.wordmark span { font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); padding-top: 0.45rem; white-space: nowrap; }
.top nav { display: flex; align-items: center; gap: clamp(0.75rem, 2.2vw, 1.75rem); font-family: var(--sans); }
.top nav a:not(.pill) { color: var(--grey); text-decoration: none; font-size: 0.9375rem; padding: 0.75rem 0.125rem; }
.top nav a:not(.pill):hover { color: var(--ink); }
.top .pill { min-height: 44px; padding: 0 1.2rem; font-size: 1rem; }
@media (max-width: 900px) { .top nav a:not(.pill):not(.try-link) { display: none; } .wordmark span { display: none; } }
@media (max-width: 599px) { .lede-more { display: none; } .top nav .try-link { display: none; } }
.top nav .try-link, .top .pill { white-space: nowrap; }

/* ---- the first screen: promise, experience, discovery ------------------------------------ */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "promise" "stage" "reveal" "actions";
    gap: 1.75rem;
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.hero-promise { grid-area: promise; align-self: center; }
.hero-stage { grid-area: stage; margin: 0; }
.hero-reveal { grid-area: reveal; }
.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.hero-promise .lede { margin-bottom: 0; }
@media (min-width: 760px) and (max-width: 1099px) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "promise promise" "stage reveal" "actions actions"; align-items: start; }
}
@media (min-width: 1100px) {
    .hero {
        grid-template-columns: minmax(0, 1.2fr) 400px minmax(0, 0.8fr);
        grid-template-areas: "promise stage reveal" "actions stage reveal";
        /* The spare height of a tall discovery card goes to the second row only, so the actions stay
           under the promise instead of sliding down as the card grows. */
        grid-template-rows: auto 1fr;
        column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 1.5rem; align-items: start;
    }
    /* Anchored to the top: the discoveries landing on the right must never move the headline. */
    .hero-promise { align-self: start; padding-top: 2rem; }
    .hero-actions { align-self: start; }
}

/* The host's panel: a product, not a screenshot. Charcoal, her face, our captions in our type. */
.panel {
    background: var(--charcoal); color: var(--panel-text);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
    display: grid; grid-template-rows: auto auto auto;
}
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.1rem 0.6rem; }
.panel-brand { font: 500 1rem/1 var(--serif); color: var(--panel-text); }
.state {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--panel-soft);
}
.state i { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-soft); flex: none; }
.state[data-state="speaking"] i { background: var(--cyan); box-shadow: 0 0 0 0 rgba(33, 199, 225, 0.5); animation: pulse 1.6s ease-out infinite; }
.state[data-state="speaking"] { color: var(--panel-text); }
.state[data-state="listening"] i { background: transparent; box-shadow: inset 0 0 0 2px var(--cyan); }
.state[data-state="ended"] i, .state[data-state="ready"] i { background: var(--panel-soft); }
@keyframes pulse { to { box-shadow: 0 0 0 9px rgba(33, 199, 225, 0); } }

.panel .clip { aspect-ratio: 4 / 3; border-radius: 0; background: var(--charcoal); }
/* The kiosk's own brand line and caption band sit outside this crop; the panel carries its own. */
.panel .clip img, .panel .clip video { object-position: 50% 14%; }
/* Tall enough for the longest pair of lines (three lines each), so the panel never changes height. */
.panel-captions { padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.5rem; align-content: start; min-height: 12.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cap { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.6rem; margin: 0; align-items: baseline; }
.cap .who { font: 600 0.8125rem/1.5 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--panel-soft); }
.cap-prev .what { font: 400 0.9375rem/1.4 var(--sans); color: var(--panel-soft); }
.cap-now .what { font: 400 1.125rem/1.4 var(--sans); color: var(--panel-text); }
.cap-now.you .what { font: italic 400 1.1875rem/1.35 var(--serif); }
.panel-label { margin: 0.9rem 0 0; font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); max-width: 42ch; }

/* ---- a clip: poster, video, visible controls ---------------------------------------------- */

.clip { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--charcoal); }
.clip picture, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; }
.clip img, .clip video { width: 100%; height: 100%; object-fit: cover; }
.clip video { opacity: 0; transition: opacity 0.25s ease; }
.clip.is-playing video { opacity: 1; }
.clip-controls { position: absolute; right: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.5rem; }
.clip-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; min-width: 44px; min-height: 44px; padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
    background: rgba(32, 32, 32, 0.78); color: var(--panel-text); font: 500 0.9375rem/1 var(--sans); cursor: pointer;
}
.clip-btn svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.clip-btn:hover { background: rgba(32, 32, 32, 0.95); border-color: rgba(255, 255, 255, 0.5); }

/* What this conversation revealed: two or three discoveries, landing as she hears them. */
.reveal {
    background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem 1.4rem; box-shadow: var(--shadow);
}
.reveal h2 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.25rem; }
.reveal .small { margin: 0 0 0.75rem; }
.reveals { list-style: none; display: grid; }
.reveals li { display: none; gap: 0.2rem; padding: 0.95rem 0; border-top: 1px solid var(--border); }
.reveals li.is-in { display: grid; animation: land 0.7s ease both; }
@keyframes land { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reveals .said { font: italic 400 1.125rem/1.35 var(--serif); color: var(--ink); margin: 0; }
.reveals .said::before { content: "“"; } .reveals .said::after { content: "”"; }
.reveals .why { font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); margin: 0; }
.reveals .ev { font: 600 0.8125rem/1.5 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin: 0; }
.reveals .ev b { color: var(--blue); font-weight: 600; }
.reveal-wait { margin: 0; padding: 0.95rem 0 0.25rem; border-top: 1px solid var(--border); font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); }
.reveal.has-one .reveal-wait, .reveal.is-playing .reveal-wait { display: none; }
.reveal-note { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--border); font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); }
.reveal-note a { color: var(--ink); }

/* ---- sections ---------------------------------------------------------------------------- */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); border-top: 1px solid var(--border); }
.section.paper { background: var(--ivory); color: var(--ink); }
.section .intro { max-width: 60ch; }
.section .intro .lede { margin-bottom: 0; }

/* Engagement: the thing you can do here. */
.ask { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .ask { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } }
.ask-qs { display: grid; gap: 0.6rem; }
.ask-q {
    text-align: left; padding: 0.95rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--white); color: var(--ink); font: 400 1.0625rem/1.4 var(--sans); cursor: pointer;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: baseline;
}
.ask-q .n { font: 600 0.8125rem/1.5 var(--sans); color: var(--grey); letter-spacing: 0.06em; }
.ask-q:hover { border-color: var(--ink); }
.ask-q[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.ask-q[aria-pressed="true"] .n { color: var(--cyan); }
.ask-a { background: var(--white); border-radius: var(--radius-lg); padding: 1.6rem 1.75rem; box-shadow: var(--shadow); }
.ask-a blockquote { margin: 0 0 1rem; font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.35 var(--serif); letter-spacing: -0.01em; }
.ask-a .from { margin: 0 0 1.1rem; font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); }
.ask-a .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.ask-a .small { margin: 0; }
.ask-note { margin: 1.25rem 0 0; }

/* Discovery: what they said, what it reveals, what you might do. */
.map { margin-top: 2.5rem; display: grid; gap: 0.75rem; }
.map-row { display: grid; gap: 0.75rem; background: var(--white); border-radius: var(--radius-lg); padding: 1.35rem 1.5rem; box-shadow: var(--shadow); }
@media (min-width: 900px) { .map-row { grid-template-columns: 1.1fr 1fr 1.2fr; gap: 2rem; align-items: start; } }
.map-head { display: none; }
@media (min-width: 900px) { .map-head { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 2rem; padding: 0 1.5rem; } }
.map-head span, .map-row .k { font: 600 0.8125rem/1.5 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.map-row .k { display: block; margin-bottom: 0.2rem; }
.map-note { margin-top: 1rem; }
.more { margin-top: 1.25rem; }
.steps-lead { margin: 2rem auto 0; max-width: 60ch; text-align: left; }
@media (min-width: 900px) { .map-row .k { display: none; } }
.map-row .said { margin: 0; font: italic 400 1.1875rem/1.35 var(--serif); }
.map-row .said::before { content: "“"; } .map-row .said::after { content: "”"; }
.map-row p { margin: 0; font: 400 1rem/1.5 var(--sans); color: var(--ink); }
.map-row .opp { color: var(--ink); }
.map-row .opp b { color: var(--blue); font-weight: 600; }
.pattern { margin-top: 2.5rem; background: var(--ink); color: var(--ivory); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; }
@media (min-width: 900px) { .pattern { grid-template-columns: minmax(0, 1fr) 280px; gap: 2.5rem; align-items: center; } }
.pattern h3 { margin: 0 0 0.5rem; font: 400 1.125rem/1.4 var(--sans); color: var(--panel-soft); }
.pattern blockquote { margin: 0; font: 400 clamp(1.25rem, 2vw, 1.75rem)/1.3 var(--serif); letter-spacing: -0.012em; }
.pattern .small { color: var(--panel-soft); }
.pattern-note { margin-top: 0.75rem; }
.pattern .tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }

/* Opportunity: the full report, for the prospect who wants it. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pair-text p { color: var(--grey); max-width: 52ch; }
.pair-text h2 + p { color: var(--grey); }
.list { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.25rem; font: 400 1rem/1.5 var(--sans); color: var(--ink); }
.list li { padding-left: 1.25rem; position: relative; }
.list li::before { content: ""; position: absolute; left: 0; top: 0.65rem; width: 8px; height: 2px; background: var(--blue); }
.shot { margin: 0; }
.shot .frame { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.shot img { width: 100%; }
.shot.phone .frame { max-width: 300px; }
.shots { display: grid; gap: 1.5rem; justify-items: center; }
@media (min-width: 700px) { .shots { grid-template-columns: auto auto; justify-content: center; align-items: start; } }

/* Where Bendis works: honest status on every card. */
.uses { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.use { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; }
.use .pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--charcoal); }
.use .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.use .body { padding: 1.25rem 1.4rem 1.5rem; }
.use .status { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.4rem 0.7rem; border-radius: 999px; font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--border); color: var(--grey); }
.use .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey); }
.use .status.live { color: var(--blue); border-color: var(--blue); } .use .status.live i { background: var(--blue); }
.use .body p { margin: 0; font: 400 1rem/1.5 var(--sans); color: var(--grey); }
.use.plain { background: var(--blue); color: var(--white); }
.use.plain .body { padding: 1.5rem 1.4rem; }
.use.plain .status { color: var(--white); border-color: rgba(255, 255, 255, 0.6); } .use.plain .status i { background: var(--white); }
.use.plain h3 { color: var(--white); } .use.plain .body p { color: rgba(255, 255, 255, 0.88); }

/* ---- rows of term and description: the demo facts, the privacy page ---------------------- */

.trust { margin-top: 2.5rem; max-width: 62rem; }
.trust > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem 2rem; padding: 1.25rem 0; border-top: 1px solid var(--border); }
.trust > div:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 760px) { .trust > div { grid-template-columns: 240px minmax(0, 1fr); } }
.trust dt { font: 500 1.125rem/1.35 var(--serif); color: var(--ink); }
.trust dd { margin: 0; color: var(--grey); max-width: 60ch; }
.trust q { font-style: italic; color: var(--ink); }
.trust dd p { margin: 0 0 0.6rem; }
.trust dd p:last-child { margin-bottom: 0; }
.trust dd ul { margin: 0 0 0.6rem 1.1rem; padding: 0; }
.trust dd li { margin: 0.2rem 0; }
.trust dd strong { font-weight: 600; color: var(--ink); }
.updated { margin-top: 2.5rem; }

/* ---- request a demo ---------------------------------------------------------------------- */

.demo { text-align: center; }
.demo h2, .demo .lede { margin-inline: auto; }
.demo .trust { margin: 2.5rem auto 0; text-align: left; }
.demo .steps { margin: 0.5rem auto 0; max-width: 60ch; text-align: left; padding-left: 1.5rem; color: var(--grey); display: grid; gap: 0.6rem; font-family: var(--sans); }
.demo .steps li::marker { color: var(--blue); font-weight: 600; }
.demo-form { margin: 3rem auto 0; max-width: 560px; text-align: left; display: grid; gap: 1.25rem; font-family: var(--sans); }
.demo-form label { display: grid; gap: 0.4rem; font-size: 0.9375rem; color: var(--grey); }
.demo-form input, .demo-form textarea {
    width: 100%; min-height: 48px; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--white); color: var(--ink); font: 400 1.0625rem/1.4 var(--sans);
}
.demo-form textarea { resize: vertical; }
.demo-form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-form input:focus-visible, .demo-form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.demo-form [aria-invalid="true"] { border-color: var(--error); }
.form-error { margin: 0; font-size: 0.9375rem; color: var(--error); }
.form-error[hidden] { display: none; }
.demo-form .pill { justify-self: center; min-width: 264px; margin-top: 0.5rem; }
.form-note { margin: 0; text-align: center; font-size: 0.9375rem; color: var(--grey); }
.form-note a { color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: 0.25em; }
.form-done { margin: 0; text-align: center; font-size: 1rem; color: var(--ink); }
.form-done[hidden] { display: none; }

/* ---- the "Give it a try" page: the motto, the notice, the button with its QR, three rows ------ */

.try { border-top: 0; padding-top: clamp(2rem, 5vw, 3.5rem); min-height: calc(100vh - 160px); }
.try h1 { max-width: 24ch; font-size: clamp(1.75rem, 3.2vw, 2.625rem); }
.try h1 em { font-style: italic; color: var(--blue); }
.try .lede { max-width: 52ch; }
.try-ask { margin: 0 0 1.25rem; font: 400 1.0625rem/1.5 var(--sans); }
.try-act { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.try-qr { display: none; align-items: center; gap: 1rem; margin: 0; }
.try-qr img { width: 220px; height: 220px; flex: none; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; }
.try-qr figcaption { max-width: 16ch; font: 400 0.9375rem/1.45 var(--sans); color: var(--grey); }
@media (min-width: 760px) { .try-qr { display: flex; } }
.try-rows { list-style: none; display: grid; gap: 1rem; margin: 2.5rem 0 0; max-width: 40rem; }
.try-rows li { display: grid; gap: 0.2rem; padding: 1.1rem 1.3rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.try-rows strong { font: 600 1.0625rem/1.35 var(--sans); color: var(--ink); }
.try-rows span { font: 400 0.9375rem/1.5 var(--sans); color: var(--grey); }
.try-links { margin-top: 2rem; }

/* ---- footer ------------------------------------------------------------------------------ */

.foot { padding: 2rem var(--gutter) 3rem; border-top: 1px solid var(--border); font: 400 0.9375rem/1.55 var(--sans); color: var(--grey); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 3rem; }
.foot p { margin: 0; max-width: 60ch; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: 0.25em; }
.foot-sep::before { content: '\00b7'; margin: 0 0.6rem; }
.paper-foot { color: var(--grey); }

/* ---- preferences ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .reveals li { display: grid; }
    .reveal-wait { display: none; }
}

@media print {
    body { background: #fff; color: #000; }
    .top nav, .clip-controls, .demo-form, .skip, .hero-actions { display: none; }
    .panel, .pattern, .deep { background: #fff; color: #000; border: 1px solid #999; }
    .clip video { display: none; }
}