/* FloorStack layout proposals A, B and C (site/app/floorstack/a|b|c, shared parts in kit.tsx). Visual-first: images and
   the live demo carry the page; one short line per section. Built on theme.css tokens and the site's page system. */
.fv figure { margin: 0; }
.fv img { display: block; }
.fv-sec { padding-top: 120px; }
.fv-sec-tight { padding-top: 96px; }
.fv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
.fv-head h2 { font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.fv-head p { margin: 0; font-size: 16px; color: var(--muted); }
.fv-head .text-link { flex: none; }

/* A: full-bleed hero scene under the standard intro */
.fv-hero { position: relative; margin: 0 20px !important; height: clamp(460px, 54vw, 860px); overflow: hidden; background: #c9c2b5; user-select: none; -webkit-user-select: none; }
.fv-hero img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* a picture, not a page: no caption over it (Tim, 2026-10-27), and a clear cover so the app's words in the photo can't be
   selected or picked up as text (Safari's Live Text), and the picture can't be dragged */
.fv-hero::after { content: ""; position: absolute; inset: 0; }

/* devices */
.fv-devices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fv-devices.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fv-devices img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.fv-devices.is-tall img { aspect-ratio: 3 / 4; }
.fv-devices figcaption { margin-top: 14px; }
.fv-devices figcaption strong, .fv-feat figcaption strong, .fvc-aud figcaption strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.fv-devices figcaption span, .fv-feat figcaption span, .fvc-aud figcaption span { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }

/* features */
.fv-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 18px; }
.fv-feat-media { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #e8e6de; }
.fv-feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s; }
.fv-feat-card:hover .fv-feat-media img { transform: scale(1.035); }
.fv-feat-media.is-plan { background: #f6f4ec; }
.fv-feat-media.is-plan img { object-fit: contain; padding: 4%; }
.fv-feat figcaption { margin-top: 14px; }
.fv-badge { position: absolute; left: 14px; top: 14px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
/* bento (layout C): captions sit on the images */
.fv-feat.is-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 14.5vw, 225px); gap: 18px; }
.fv-feat.is-bento .fv-feat-card { position: relative; border-radius: 14px; overflow: hidden; }
.fv-feat.is-bento .fv-feat-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.fv-feat.is-bento .fv-feat-media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgb(12 18 14 / .6)); }
.fv-feat.is-bento .fv-feat-media.is-plan::after { display: none; }
.fv-feat.is-bento figcaption { position: absolute; left: 20px; right: 20px; bottom: 16px; margin: 0; color: #fff; z-index: 1; }
.fv-feat.is-bento figcaption span { color: rgb(255 255 255 / .82); }
.fv-feat.is-bento .is-plan + figcaption, .fv-feat.is-bento .fv-feat-card.is-2 figcaption { color: var(--ink); }
.fv-feat.is-bento .fv-feat-card.is-2 figcaption span { color: var(--muted); }
.fv-feat.is-bento .is-1 { grid-column: 1 / 8; grid-row: span 3; }
.fv-feat.is-bento .is-1 .fv-feat-media img { object-position: 0% 50%; }
.fv-feat.is-bento .is-2 { grid-column: 8 / 13; grid-row: span 2; }
.fv-feat.is-bento .is-3 { grid-column: 8 / 13; grid-row: span 1; }
.fv-feat.is-bento .is-4, .fv-feat.is-bento .is-5, .fv-feat.is-bento .is-6 { grid-column: span 4; grid-row: span 2; }
.fv-feat.is-bento .is-2 .fv-feat-media.is-plan img { padding: 6% 6% 18%; }

/* integrations band */
.fv-int { padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 120px; }
.fv-int .wrap { display: flex; align-items: center; gap: 28px 64px; flex-wrap: wrap; }
.fv-int .eyebrow { margin: 0; flex: none; }
.fv-int ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 52px; flex: 1; justify-content: space-between; }
.fv-int li { font-size: 30px; font-weight: 600; letter-spacing: -.025em; }
.fv-int.is-dark { background: var(--dark); color: var(--paper); border: 0; }
.fv-int.is-dark .eyebrow { color: #b9c2b2; }

/* industries */
.fv-ind { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.fv-ind-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; background: #d9d6cc; }
.fv-ind-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s; }
.fv-ind-card:hover img { transform: scale(1.04); }
.fv-ind-card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(12 18 14 / .65)); }
.fv-ind-card span { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 1; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.fv-ind.is-grid .fv-ind-card span { font-size: 18px; left: 18px; bottom: 16px; }
.fv-ind.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fv-ind.is-grid .fv-ind-card { aspect-ratio: 4 / 3; }

/* proof */
.fv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 48px; border-top: 1px solid var(--line); }
.fv-stats div { padding: 26px 24px 0 0; }
.fv-stats div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.fv-stats dd { margin: 0; font-size: clamp(48px, 5.4vw, 80px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.fv-stats dt { margin-top: 10px; font-size: 14px; color: var(--muted); }
.fv-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; }
.fv-logos img { filter: brightness(0); opacity: .55; }
.fv-logos.is-dark img { filter: brightness(0) invert(1); opacity: .7; }
.fv-note { font-size: 12px; color: var(--muted); margin-top: 88px; margin-bottom: 0; }

/* B: dark first screens */
.fvb-dark { background: var(--dark); color: var(--paper); }
.fvb-dark .page-intro h1, .fvb-dark .fv-head h2 { color: var(--paper); }
.fvb-dark .eyebrow, .fvb-dark .fv-head p { color: #b9c2b2; }
.fvb-dark .intro-text { color: #d9ded3; }
.fvb-dark .text-link { color: var(--paper); }
.fvb-dark .fv-devices figcaption span { color: #b9c2b2; }
.fvb-demo { padding-top: 8px; }
.fvb-dark .fv-int { margin-top: 120px; border-top: 1px solid #ffffff1a; }
.fvb-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 20vw, 330px); gap: 18px; }
.fvb-mosaic figure { position: relative; border-radius: 14px; overflow: hidden; }
.fvb-mosaic figure.is-big { grid-column: span 2; grid-row: span 2; }
.fvb-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.fvb-mosaic figcaption, .fvc-hero figcaption { position: absolute; left: 18px; bottom: 16px; color: #fff; font-size: 17px; font-weight: 600; z-index: 1; }
.fvb-mosaic figure::after, .fvc-hero figure::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(12 18 14 / .55)); }
.fvb-logos { display: flex; align-items: center; gap: 28px 48px; margin-top: 56px; flex-wrap: wrap; }
.fvb-logos p { margin: 0; font-size: 14px; color: var(--muted); max-width: 250px; }

/* C: product bento under the intro */
.fvc-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(220px, 20.5vw, 340px)); gap: 18px; }
.fvc-hero figure { position: relative; border-radius: 14px; overflow: hidden; }
.fvc-hero img { width: 100%; height: 100%; object-fit: cover; }
.fvc-hero .is-kiosk { grid-column: 1 / 6; grid-row: 1 / 3; }
.fvc-hero .is-kiosk img { object-position: 50% 35%; }
.fvc-hero .is-gallery { grid-column: 6 / 13; grid-row: 1 / 2; }
.fvc-hero .is-ipad { grid-column: 6 / 10; grid-row: 2 / 3; }
.fvc-hero .is-phone { grid-column: 10 / 13; grid-row: 2 / 3; }
.fvc-hero figcaption { font-size: 13px; font-weight: 400; }
.fvc-hero figcaption b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fvc-proof { display: flex; align-items: center; gap: 24px 48px; padding-top: 52px; flex-wrap: wrap; }
.fvc-proof p { margin: 0; font-size: 14px; color: var(--muted); max-width: 220px; }
.fvc-aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fvc-aud img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.fvc-aud figcaption { margin-top: 14px; }

/* review switcher (staging only) */
.fv-switch { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 4px; padding: 6px;
  background: rgb(20 26 21 / .92); color: #f1f0e9; border-radius: 999px; font-size: 13px; box-shadow: 0 14px 40px -12px #0008; backdrop-filter: blur(8px); }
.fv-switch > span { padding: 0 10px 0 12px; color: #b9c2b2; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fv-switch a { color: #f1f0e9; text-decoration: none; padding: 8px 14px; border-radius: 999px; display: inline-flex; gap: 8px; align-items: center; }
.fv-switch a b { font-weight: 700; }
.fv-switch a[aria-current="page"] { background: #f1f0e9; color: #232721; }
@media print { .fv-switch { display: none; } }

@media (max-width: 900px) {
  .fv-sec { padding-top: 80px; }
  .fv-sec-tight { padding-top: 64px; }
  .fv-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
  .fv-head h2 { font-size: 32px; }
  .fv-hero { margin: 0 !important; height: 62vw; min-height: 300px; }
  .fv-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .fv-feat { grid-template-columns: 1fr; }
  .fv-feat.is-bento { grid-template-columns: 1fr; grid-auto-rows: 64vw; }
  .fv-feat.is-bento .fv-feat-card { grid-column: auto !important; grid-row: auto !important; }
  .fv-int { padding: 48px 0; }
  .fv-int .wrap { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fv-int ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 30px; }
  .fv-int li { font-size: 22px; }
  .fv-ind { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
  .fv-ind-card { scroll-snap-align: start; }
  .fv-ind.is-grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; margin-right: 0; padding-right: 0; }
  .fv-ind.is-grid .fv-ind-card span { font-size: 14px; left: 12px; right: 12px; bottom: 11px; }
  .fv-compare-tag { top: 10px; font-size: 11px; padding: 5px 9px; }
  .fv-compare-tag.is-l { left: 10px; }
  .fv-compare-tag.is-r { right: 10px; }
  .fv-stats { grid-template-columns: 1fr; }
  .fv-stats div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .fvb-mosaic { grid-template-columns: 1fr; grid-auto-rows: 62vw; }
  .fvb-mosaic figure.is-big { grid-column: auto; grid-row: auto; }
  .fvc-hero { grid-template-columns: 1fr 1fr; grid-template-rows: 105vw 48vw 48vw; }
  .fvc-hero .is-kiosk { grid-column: 1 / 3; grid-row: 1 / 2; }
  .fvc-hero .is-gallery { grid-column: 1 / 3; grid-row: 2 / 3; }
  .fvc-hero .is-ipad { grid-column: 1 / 2; grid-row: 3 / 4; }
  .fvc-hero .is-phone { grid-column: 2 / 3; grid-row: 3 / 4; }
  .fvc-aud { grid-template-columns: 1fr; }
  .fv-switch { bottom: 10px; font-size: 12px; }
  .fv-switch > span { display: none; }
  .fv-switch a { padding: 7px 10px; }
}

/* the sales console section under the buyer app (kit.tsx AgentSection) and its own page */
.fv-agent .fv-head h2 em { white-space: nowrap; }
.fv-agent.is-dark .fv-head h2 { color: var(--paper); }
.fv-agent.is-dark .fv-head p { color: #b9c2b2; }
.fv-agent.is-page { padding-bottom: 40px; }

/* "Every answer, one tap away": a buyer's questions beside one screen that answers each (layout A, Tim 2026-10-23) */
.fv-ask { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.fv-ask-q { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(35 39 33 / .12); }
.fv-ask-q li { border-bottom: 1px solid rgb(35 39 33 / .12); }
.fv-ask-q button { position: relative; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 8px 18px 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fv-ask-q button::before { content: ""; position: absolute; left: -16px; top: 18px; bottom: 18px; width: 2px; background: #b08d57; transform: scaleY(0); transition: transform .35s ease; }
.fv-ask-n { padding-top: 5px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgb(35 39 33 / .4); font-variant-numeric: tabular-nums; transition: color .3s; }
.fv-ask-t strong { display: block; font-size: clamp(19px, 1.7vw, 25px); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; color: rgb(35 39 33 / .45); transition: color .3s; }
.fv-ask-t span { display: grid; grid-template-rows: 0fr; overflow: hidden; font-size: 14.5px; color: var(--muted); transition: grid-template-rows .4s ease, margin .4s ease, opacity .4s; opacity: 0; }
.fv-ask-q button:hover strong { color: rgb(35 39 33 / .75); }
.fv-ask-q button[aria-pressed="true"]::before { transform: scaleY(1); }
.fv-ask-q button[aria-pressed="true"] .fv-ask-n { color: #b08d57; }
.fv-ask-q button[aria-pressed="true"] strong { color: var(--ink, #232721); }
.fv-ask-q button[aria-pressed="true"] .fv-ask-t span { grid-template-rows: 1fr; margin-top: 6px; opacity: 1; }
.fv-ask-screen { position: relative; }
.fv-ask-frame { position: relative; aspect-ratio: 2620 / 1928; padding: 10px; border-radius: 22px; background: #121915;
  box-shadow: 0 50px 90px -50px rgb(12 18 14 / .75), inset 0 0 0 1px rgb(255 255 255 / .06); }
.fv-ask-frame figure { position: absolute; inset: 10px; margin: 0; overflow: hidden; border-radius: 13px; opacity: 0; transform: scale(1.015); transition: opacity .55s ease, transform .9s ease; }
.fv-ask-frame figure.is-on { opacity: 1; transform: none; }
.fv-ask-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-ask-bar { position: absolute; left: 24px; right: 24px; bottom: -18px; height: 2px; background: rgb(35 39 33 / .1); border-radius: 2px; overflow: hidden; }
.fv-ask-bar i { position: absolute; inset: 0; background: #b08d57; transform: scaleX(0); transform-origin: left; }
.fv-ask.is-playing .fv-ask-bar i { animation: fv-ask-run var(--ask-ms, 4800ms) linear forwards; }
@keyframes fv-ask-run { to { transform: scaleX(1); } }
.fv-ask-cap { margin: 30px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  .fv-ask { grid-template-columns: 1fr; gap: 26px; }
  .fv-ask-screen { order: -1; }
  .fv-ask-frame { padding: 6px; border-radius: 14px; }
  .fv-ask-frame figure { inset: 6px; border-radius: 9px; }
  .fv-ask-q button { padding: 15px 4px 15px 0; grid-template-columns: 28px minmax(0, 1fr); }
  .fv-ask-q button::before { left: -10px; }
}
@media (prefers-reduced-motion: reduce) { .fv-ask-frame figure, .fv-ask-t span { transition: none; } }