/* GENERATED by landing-co/scripts/trim-css.mjs from frontend/public/site.css.
   Do not edit by hand: change the source or the script, then `npm run trim-css`. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/hanken-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */


/* ============================================================
   callSaul website v2 — "The Closer" design system
   warm charcoal · cream · amber signal · clay
   ============================================================ */
:root {
  --ink:        oklch(0.205 0.014 58);
  --ink-2:      oklch(0.262 0.016 56);
  --ink-3:      oklch(0.325 0.018 56);
  --cream:      oklch(0.967 0.011 82);
  --cream-2:    oklch(0.935 0.015 80);
  --line:       oklch(0.86 0.016 76);
  --line-dark:  oklch(0.40 0.02 56);
  --text:       oklch(0.24 0.012 60);
  --text-soft:  oklch(0.44 0.014 62);
  --text-dim:   oklch(0.60 0.012 64);
  --on-dark:    oklch(0.93 0.012 82);
  --on-dark-soft: oklch(0.74 0.014 70);
  --amber:      oklch(0.76 0.142 73);
  --amber-deep: oklch(0.68 0.145 62);
  --clay:       oklch(0.60 0.105 44);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', monospace;

  --maxw: 1200px;
  --pad: 32px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--clay); }
.btn:hover, .logo:hover { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.04; }
.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--text-soft); line-height: 1.5; }
section.dark .lead { color: var(--on-dark-soft); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 14px 26px; border: none; cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn-primary { background: var(--amber); color: oklch(0.24 0.03 60); }
.btn-primary:hover { background: oklch(0.80 0.145 75); transform: translateY(-1px); color: oklch(0.24 0.03 60); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-dark); }
section.dark .btn-ghost, .hero .btn-ghost { color: var(--on-dark); box-shadow: inset 0 0 0 2px oklch(0.5 0.02 60); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
section.dark .btn-ghost:hover, .hero .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--on-dark); color: var(--on-dark); }
.btn .arrow { font-family: var(--font-mono); }

/* grain for dark sections */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE0MCcgaGVpZ2h0PScxNDAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}
.grain > * { position: relative; z-index: 1; }

/* signal ring motif */

/* scroll reveal (base = visible; .rv hides only when JS arms it) */

/* ============ NAV ============ */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.205 0.014 58 / 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid oklch(0.40 0.02 56 / 0.5);
  transition: background .3s ease, border-color .3s ease;
}
header.nav.on-light { background: oklch(0.967 0.011 82 / 0.86); border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo .mark { width: 30px; height: 30px; flex: none; }
.logo .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--on-dark); }
header.nav.on-light .logo .wordmark { color: var(--ink); }
section.dark .logo .wordmark, .footer .logo .wordmark { color: var(--on-dark); }

/* ============ HERO — full-width call scene ============ */
.hero { background: var(--ink); color: var(--on-dark); padding: 92px 0 0; overflow: hidden; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 78% -8%, oklch(0.45 0.09 60 / 0.5), transparent 62%),
    radial-gradient(45% 55% at 8% 30%, oklch(0.35 0.06 50 / 0.4), transparent 60%);
  pointer-events: none;
}
.hero h1 { font-size: clamp(42px, 5.6vw, 82px); line-height: 0.98; color: var(--on-dark); text-wrap: balance; }
.hero h1 .amber { color: var(--amber); }
.hero .lead { margin: 26px auto 36px; max-width: 52ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* the scene */
.live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--amber); letter-spacing: 0.08em; white-space: nowrap; }

/* Saul sidebar in the scene */

/* call arc steps */

/* ============ SAUL'S RULES ============ */

/* ============ sections ============ */
section { padding: 110px 0; }
section.dark { background: var(--ink); color: var(--on-dark); }

/* ============ HOW IT WORKS — animated flow ============ */

/* mini product snippets (inside flow steps) */

/* ============ PRODUCT TOUR ============ */

/* browser-framed dark product shot */

/* app chrome shared */
.app { display: grid; grid-template-columns: 168px 1fr; min-height: 340px; }

/* 1 — chat command center */

/* 2 — live call: transcript + reasoning (compact) */

/* 3 — pipeline board */

/* 4 — rep scorecard */

/* ============ FEATURES ============ */

/* ============ MEET SAUL — reasoning chain ============ */

/* ============ STATS BAND — counters ============ */

/* ============ WHO IT'S FOR ============ */

/* ============ INTEGRATIONS ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* An odd last tile sits centred under the pair above it, at the same width,
   rather than leaving an empty slot beside it. */

/* ============ PRICING ============ */

/* ============ INQUIRY ============ */
.inquiry-sec { background: var(--ink); color: var(--on-dark); padding-top: 76px; padding-bottom: 76px; }
.inquiry-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.inquiry-intro .h2 { color: var(--on-dark); max-width: 12ch; }
.inquiry-form { display: flex; flex-direction: column; gap: 14px; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 28px; }
.inquiry-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.inquiry-form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.inquiry-form input, .inquiry-form select { font-family: var(--font-body); font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--on-dark); background: var(--ink); border: 1px solid var(--line-dark); border-radius: 10px; padding: 13px 15px; outline: none; transition: border-color .15s; }
.inquiry-form input::placeholder { color: var(--text-dim); }
.inquiry-form input:focus, .inquiry-form select:focus { border-color: var(--amber); }
.inquiry-form select { width: 100%; min-width: 0; appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
.inquiry-form button { margin-top: 6px; align-self: flex-start; }
.inquiry-form .opt { color: var(--text-dim); text-transform: none; letter-spacing: 0; font-size: 11px; }
.inquiry-form .err { display: none; font-family: var(--font-body); font-size: 12.5px; text-transform: none; letter-spacing: 0; color: oklch(0.7 0.14 35); margin-top: -2px; }
.inquiry-form label.invalid .err { display: block; }
.inquiry-form label.invalid input { border-color: oklch(0.62 0.16 32); }
.form-micro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; color: var(--on-dark-soft); margin: 4px 0 0; }

/* ============ FOOTER ============ */
.footer { background: var(--ink); color: var(--on-dark-soft); padding: 60px 0 40px; border-top: 1px solid var(--line-dark); }
.footer .logo { margin-bottom: 16px; }
/* One line by design. The old 30ch cap measured 252px against a string that
   sets 256.5px at this size, so it broke by 4.5px — hence the cap goes and
   nowrap holds it. No size change: 256.5px still clears a 320px phone. */
/* Email and phone: the only two ways to reach a human, so they sit with the
   wordmark rather than buried in a link column. */
/* Three columns now (Product, Company, Legal), so the gap comes in from 64px
   to keep them on one row alongside the brand block on a laptop. */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line-dark); font-family: var(--font-mono); font-size: 13px; color: var(--on-dark-soft); flex-wrap: wrap; gap: 12px; }

/* ============ v2.1 — UI/UX Pro Max checklist: a11y + micro-interactions ============ */
a, button { cursor: pointer; }
::selection { background: oklch(0.76 0.142 73 / 0.4); }

.btn:active { transform: translateY(1px) scale(0.99); }
.btn .arrow { display: inline-block; transition: transform .2s cubic-bezier(0.2,0.7,0.2,1); }
.btn:hover .arrow { transform: translateX(4px); }

/* kinetic hero headline */

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .inquiry-wrap { grid-template-columns: 1fr; gap: 36px; }
  .inquiry-form .frow { grid-template-columns: 1fr; }
  section { padding: 76px 0; }
  .app { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --pad: 20px; }
}

/* Insurance for the tagline's nowrap. It needs a 297px viewport to fit, which
   is narrower than any real handset, but a failed webfont falls back to
   system-ui and that sets wider. 360 is below the smallest common device, so
   this never fires on a phone that had the room. */


/* =============================================================
   ADDED MOTION LAYER — v3
   ============================================================= */

/* 1) HERO AURORA — ambient drifting mesh behind hero content */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 22% 32%, oklch(0.76 0.142 73 / 0.22), transparent 62%),
    radial-gradient(48% 40% at 78% 44%, oklch(0.68 0.145 62 / 0.18), transparent 62%),
    radial-gradient(42% 32% at 50% 88%, oklch(0.60 0.105 44 / 0.16), transparent 62%);
  filter: blur(64px);
  animation: aurora-drift 24s ease-in-out infinite;
  opacity: 0.85;
}
.hero > .wrap { position: relative; z-index: 1; }
@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3%, -2%) scale(1.06); }
  66%      { transform: translate(-2%, 3%) scale(0.98); }
}

/* 1b) HERO LEAD — larger, brighter, tighter */

/* 2) AMBER UNDERLINE DRAW — on reveal of any .rv that contains .amber */

/* 3) PRIMARY CTA — shine sweep on hover, subtle amber glow */
.btn { position: relative; overflow: hidden; transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.26s ease-out, background 0.2s ease-out; }
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
  transform: translateX(-140%);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.btn-primary:hover::before { transform: translateX(140%); }
.btn-primary:hover { box-shadow: 0 10px 34px oklch(0.76 0.142 73 / 0.32); }
.btn .arrow { display: inline-block; transition: transform 0.24s ease-out; }
.btn:hover .arrow { transform: translateX(3px); }

/* 4) 3D TILT on cards (hover only) */

/* 5) CURSOR SPOTLIGHT on dark sections */
section.dark {
  position: relative;
  --mx: 50%;
  --my: 50%;
}
section.dark::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), oklch(0.76 0.142 73 / 0.07), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease-out;
  z-index: 0;
}
section.dark:hover::after { opacity: 1; }
section.dark > .wrap { position: relative; z-index: 1; }

/* 6) INTEGRATIONS SPOTLIGHT — static grid, auto-cycling amber highlight */

/* 7) SECTION ACCENT — small amber bar draws in at each section head */

/* 8) Stat number — subtle amber glow when in view */

/* 9) INSIDE-SAUL MOCKUP ANIMATIONS — play once per shot on view */
/* Base hidden state — reveal via .shot.playing */
/* Sequenced chat delays */

/* Chat deals fade in inside Saul's first response */

/* The call log's status dot carries the liveness the chat caret used to. */

/* Live-Call transcript reveal */

/* Live-Call right column: chip pops in with the seller's objection, blocks slide in after */
/* Say-this glow when it lands */

/* Pipeline cards drop in column by column */

/* Hot tag pulse ring after cards land */
/* Saul-owned card gets a soft amber wash on land */

/* Scorecard skill rows reveal sequentially */
/* Score big number highlight on land */
/* Rep list — currently-selected rep gets a subtle amber sweep */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none !important; }
  .btn-primary::before { display: none; }
  section.dark::after { display: none; }
  .amber::after { transform: scaleX(1) !important; transition: none !important; }
}
/* =============== END MOTION LAYER =============== */


/* =============================================================
   HERO LEGIBILITY
   The hero headline sits on the ink ground with a blurred amber aurora
   drifting behind it, which lifts the backdrop enough that --on-dark (L 0.93)
   reads grey rather than white. Pin the headline and lead to full strength,
   and make sure a word that is not mid-animation is always fully opaque —
   the kinetic entrance parks each word at opacity 0 until its animation runs.
   ============================================================= */
.hero h1 { color: oklch(0.985 0.005 82); }
.hero h1 .amber { color: oklch(0.82 0.148 76); }

/* =============================================================
   HERO v4 — receptionist-led, on the same cream ground as the
   rest of the page. Replaces the dark full-width coaching scene.
   Resting state is fully opaque: the entrance animation only ever
   fades IN from a `from` state, so if it never runs the copy is
   already at full strength.
   ============================================================= */

/* ---------- the incoming-call scene ---------- */
/* the three-bar "on air" meter, only while Saul is actually on the call */

/* the whole card dips out between scenarios */

/* =============================================================
   NAV on the light hero
   The bar is back on its ink ground. At the original 0.82 alpha the ink
   washed out to grey against cream, so it is taken nearly opaque here; the
   blur still earns its keep as content scrolls underneath.
   ============================================================= */
header.nav { background: oklch(0.205 0.014 58 / 0.96); border-bottom-color: var(--line-dark); }

/* =============================================================
   HOW IT WORKS — stepwise build
   The connector dots already lit on .built, but the delays were indexed off
   by one (.flow's first child is the track, so :nth-child(5) matched nothing
   and step 1 fired at 0s alongside step 2). Re-indexed here, and the numeral,
   heading, copy and mini-widget of each step now follow their own dot.
   All of it is inside a no-preference query, so under reduced motion nothing
   is ever hidden and there is nothing to un-hide.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* dots: step 1, 2, 3 are .flow's children 2, 3, 4 */

  /* each step trails its own dot by a beat; inside a step the numeral leads,
     then the heading and copy, then the widget lands last */

  /* the numeral warms as its step arrives */
}

/* =============================================================
   PRODUCTS OVERVIEW — per-row link out to the product page
   ============================================================= */

/* =============================================================
   LIVE-CALL HIGHLIGHT
   The motion layer marks the caller's last line `.current` 1.6s after the
   shot scrolls into view, but nothing ever styled that class, so the
   highlight it exists to draw has never actually appeared. The negative
   margin cancels the padding, so nothing reflows when it lands, and
   box-decoration-break keeps the band intact if the line wraps.
   ============================================================= */

/* =============================================================
   PRODUCT PAGE TEMPLATE  (.pp-*)
   Everything a product page needs beyond what the homepage already
   defines. Lives here rather than in the page so the next three
   products cost a few KB each instead of a copy of this block.

   A clone changes exactly two things in its own \3c style>:
       :root { --accent: <colour>; --accent-deep: <colour>; }
   and its content. Nothing below is per-product.
   ============================================================= */
:root { --accent: var(--amber); --accent-deep: var(--amber-deep); }

/* --- hook band: one line, dark, between the hero and the steps --- */

/* --- section heads --- */

/* --- feature grid: reuses .feat/.feat-ic, adds a full-width card --- */

/* --- who it's for: plain text, no links until the solutions pages exist --- */

/* --- setup strip --- */

/* --- cross-sell --- */

/* --- final CTA --- */

/* --- the accent hook: the one colour a clone overrides --- */

/* --- a product page's mockup sits in a dark band, centred --- */

/* =============================================================
   PRODUCTS DROPDOWN
   CSS only, on purpose: these are static documents with no shared
   script, and :focus-within gives keyboard access without one. The
   parent stays a real link to the homepage overview, so a tap on
   touch (where :hover does not apply) still goes somewhere useful.
   The nav itself is hidden below 900px, so this is desktop-only.
   ============================================================= */
/* bridges the gap under the nav item so the pointer can cross without closing */   /* the nav's underline sweep is wrong in here */

/* =============================================================
   FIVE-COLUMN CAMPAIGN BOARD
   The homepage board is four columns and its reveal delays are indexed
   to four. Outbound needs five, so the extra column gets its own
   delays; without them those two cards would fire at 0s.
   ============================================================= */
/* match the breakpoints the four-column board already uses */

/* --- cross-sell band: the sibling products are links now they exist --- */

/* =============================================================
   PRODUCT VIDEO HERO  (.pp-vhero, .pp-video)
   For a product page whose hero is a Claude Design video instead of the
   two-column card: copy centred on top, the video full width below.
   The player inside the iframe (/videos/<name>/embed.html) always
   reserves 44px for its hidden playback bar when it scales, so the
   iframe is 44px taller than the box and shifted up 22px to crop it
   evenly. Phones get the square cut; the page's inline picker chooses
   the cut before the frame loads anything.
   ============================================================= */

/* =============================================================
   SOLUTIONS PAGE TEMPLATE  (.ps-*)
   A different spine from the product pages: the middle of the page is a
   list of concrete moments in one trade's day, not a grid of features.
   Everything else (header, hero, dark bands, footer, behaviour script)
   is shared with the product template.

   A clone (Real Estate, Dental, Auto, Salons) changes its content and
   one line: :root { --accent: ...; --accent-deep: ...; }
   ============================================================= */

/* --- the use-case list --- */

/* --- what powers it: the use cases mapped back onto the products --- */

/* --- the call example --- */
/* Staged like the product mockups, and hidden ONLY inside a no-preference
   query: under reduced motion nothing is ever hidden, so there is nothing
   left needing to be un-hidden if the reveal never runs. */

/* --- the mini pricing line above the final CTA --- */

/* The industry chips become links as each solutions page ships; the ones with
   no page yet stay plain spans, so there is never a dead link here. */

/* Solutions names are longer than product names, so that menu gets more room.
   With five items in the bar the gap tightens before the nav hides at 900px. */

/* =============================================================
   RESPONSIVE PASS — header menu and phone-width layout
   The header rules are scoped to header.nav.has-menu: only pages that
   ship the toggle button and its script collapse their links into it.
   ============================================================= */
html { scroll-padding-top: 72px; }   /* anchor jumps land below the sticky bar */
.nav-inner { gap: 20px; }

@media (max-width: 1023px) {

  /* the open panel: the same links, stacked under the bar */

  /* Products / Solutions open in place, never as the hover popover */
}

@media (max-width: 640px) {
  html { scroll-padding-top: 64px; }
  .nav-inner { height: 64px; gap: 12px; }
  .logo { gap: 10px; }
  .logo .mark { width: 26px; height: 26px; }
  .logo .wordmark { font-size: 20px; }
}
@media (max-width: 359px) {
  .logo .wordmark { font-size: 18px; }
}

/* Landing hero fills the first screen under the sticky bar, content centred.
   min-height rather than height: on a short or narrow screen the copy and
   card stack taller than that and the hero grows instead of clipping. */
/* the chip row holds its height whether or not the outcome chips are showing */

/* Entrance animations slide some cards in from the right (the who-it's-for
   roles, the reasoning chain). Clip sideways at the section so that slide
   never widens the page on phones; vertical bleed is untouched. */
section { overflow-x: clip; }

/* Inquiry labels: the asterisk and "Optional" sit on the label's line, with
   the field and its error on full-width rows below. */
.inquiry-form label:not(.consent) { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 8px; }
.inquiry-form label:not(.consent) > input,
.inquiry-form label:not(.consent) > select,
.inquiry-form label:not(.consent) > .err { flex: 1 0 100%; min-width: 0; }

@media (max-width: 560px) {
  section { padding: 64px 0; }
  .inquiry-sec { padding-top: 64px; padding-bottom: 64px; }

  /* product tour mockups */
  /* minmax(0, …) so the swipeable board below can't widen the column */
  /* the board swipes sideways instead of stacking every column */

  /* the moat */

  /* who it's for */

  /* inquiry */
  .inquiry-form { padding: 20px; }
  .inquiry-form button { align-self: stretch; justify-content: center; }

  /* footer: brand on top, the three link columns side by side under it */
  .footer { padding: 48px 0 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 36px; gap: 8px; }
}