/* Floow Agents Gen 4 — page styles.
   Extracted from the approved Signal sample. Design tokens live in
   tokens.css; this file is layout and components only. */

/* ---------- Direction A — "Signal" -------------------------------------
   The live floowagents.com grammar, kept: dark/light alternating bands,
   gradient two-tone headings, eyebrow tags, pill buttons. What changes is
   the substance — every block the Gen 4 locks forbid is gone, and real
   imagery replaces the wall of text that drew the "looks like a blog" note.
   ---------------------------------------------------------------------- */

/* Nav */
/* Solid background, no backdrop-filter.
   The blurred version ghosted a second copy of the bar into the hero in
   Chrome. On a dark page the frosted effect buys almost nothing visually,
   and it is not worth a rendering artifact on the live site. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #080D18;
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* The supplied logo is a full lockup — mark plus wordmark — so the brand is
   one image, not an icon beside type. Height is fixed and width follows the
   6.309:1 artwork ratio. */
.brand img { height: 30px; width: auto; display: block; }
.foot .brand img { height: 26px; }
@media (max-width: 620px) { .brand img { height: 24px; } }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
/* Sections sit under a 74px sticky bar, so anchors need a matching offset
   or every jump lands with the heading hidden behind the nav. */
[id] { scroll-margin-top: 90px; }
.nav__burger {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 10px; width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  display: block; width: 18px; height: 2px; background: var(--light);
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav__burger span { position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; }
.nav__burger span::before { top: -6px; }
.nav__burger span::after  { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }
.drawer {
  display: none; border-top: 1px solid var(--line); background: var(--navy);
  padding: 10px var(--gut) 22px;
}
.drawer.open { display: block; }
.drawer a {
  display: block; padding: 15px 0; text-decoration: none; font-weight: 600;
  font-size: 16px; border-bottom: 1px solid var(--line); color: var(--light);
}
.drawer .btn { margin-top: 18px; width: 100%; }
.nav__links a {
  text-decoration: none; font-size: 14.5px; font-weight: 600;
  color: rgba(241,245,249,.74); padding: 6px 0; position: relative;
}
.nav__links a:hover { color: #fff; }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__tel {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px;
}
/* Call and Chat are the same kind of action, so they get the same shape:
   a matched pair of pills, secondary then primary. Scoped to the nav so the
   footer's phone link stays plain text. */
.nav__tel b { font-weight: 700; }
.nav__tel .sep { color: var(--cyan-ink); margin: 0 2px; }
.nav__cta .nav__tel {
  font-size: 14px; padding: 12px 18px; min-height: 46px; white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: var(--light);
  transition: background .18s ease, border-color .18s ease;
}
.nav__cta .nav__tel:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.34); }

/* Hero — two columns. The photograph used to be a full-bleed background with
   the copy laid over it, which meant that at wide viewports the text landed on
   the subject's face. Text and image now occupy separate grid columns, so they
   cannot collide at any width. */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 6vw, 96px) 0 clamp(52px, 6vw, 88px); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% 6%, rgba(99,102,241,.30), transparent 62%),
    radial-gradient(700px 420px at 92% 78%, rgba(6,182,212,.16), transparent 62%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
}
.hero__in { max-width: 620px; }
.hero h1 { font-size: clamp(34px, 4.4vw, 58px); margin: 20px 0 18px; font-weight: 900; }
.hero__sub { font-size: clamp(16.5px, 1.5vw, 18.5px); color: #CBD5E1; }
.hero__skill {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--cyan-ink); margin: 0 0 28px;
}
/* Capped, and pushed to the right edge of its column. Left uncapped, a 4:5
   frame in a ~640px column stands 800px tall and drives the whole hero past
   the fold on a laptop. */
.hero__art { position: relative; max-width: 470px; margin-left: auto; }
/* Explicit height, not aspect-ratio. The ratio form rendered close to twice
   the expected height here, and a hero that overshoots the fold is worse than
   a hero that is one line less flexible. object-fit keeps the crop right. */
.hero__art img {
  position: relative; z-index: 1;
  width: 100%; height: 560px; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  filter: brightness(.82) saturate(.88) contrast(1.02);
}
/* Shadowed rather than definitive: the photograph is darkened and a navy
   gradient is laid over it so it sinks into the page instead of sitting on
   top as a crisp rectangle. It still keeps its own column, so it cannot
   collide with the copy the way a full-bleed background did. */
.hero__art::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-lg);
  background:
    linear-gradient(200deg, rgba(10,15,28,0) 28%, rgba(10,15,28,.55) 78%, rgba(10,15,28,.85) 100%),
    linear-gradient(90deg, rgba(10,15,28,.55) 0%, rgba(10,15,28,0) 38%);
  pointer-events: none;
}
.hero__art::after {
  content: ""; position: absolute; inset: -18px; border-radius: 34px; z-index: 0;
  background: var(--grad); opacity: .14; filter: blur(26px);
}

/* Demo strip */
.demo {
  margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: 22px 26px; border-radius: var(--r);
  border: 1px solid var(--line); background: rgba(255,255,255,0.045);
}
.demo__n { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(24px,3vw,32px); }
.demo p { margin: 0; color: var(--muted); font-size: 15px; max-width: 420px; }

/* Assurance strip — qualitative only, no metrics */
.assure { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--navy-2); }
.assure__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.assure__i { background: var(--navy-2); padding: 26px 22px; }
.assure__i h3 { font-size: 15.5px; margin-bottom: 6px; }
.assure__i p { margin: 0; font-size: 14px; color: var(--muted); }

/* Loss cards */
.loss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.lcard {
  background: #fff; border: 1px solid var(--line-dark); border-radius: var(--r);
  box-shadow: var(--shadow-light); overflow: hidden;
  display: flex; flex-direction: column;
}
/* Explicit heights everywhere, never aspect-ratio. The ratio form is not
   honoured in the target browser: the box stretched to the card's full height
   and object-fit: cover then zoomed the source in, which is what made these
   read as tall AND soft. A fixed height also keeps the three cards' text
   baselines aligned. */
.lcard__media { flex: 0 0 auto; }
.lcard__media img { width: 100%; height: 220px; object-fit: cover; display: block; }
.lcard__body { padding: 24px 26px 28px; }
.lcard h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.lcard p { margin: 0; font-size: 15px; }

/* Module grid */
.mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 42px; }
.mod {
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 22px 20px; min-height: 148px;
}
.mod__i {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(6,182,212,.13); border: 1px solid rgba(6,182,212,.28); margin-bottom: 14px;
}
.mod h3 { font-size: 15.5px; margin-bottom: 6px; }
.mod p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.mod--voice { border-color: rgba(139,92,246,.4); background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(139,92,246,.04)); }
.mod--voice .mod__i { background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.35); }

/* Image split — gives the economics line a picture to sit against
   instead of floating as a lone paragraph under the module grid. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 56px; }
.split__media img { width: 100%; height: 380px; object-fit: cover; display: block; border-radius: var(--r-lg); border: 1px solid var(--line); }
.split h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
.split p { font-size: 17px; color: #CBD5E1; }
.split p:last-child { margin-bottom: 0; }

/* Solutions teaser — the jobs-to-be-done list from the Gen 4 home spec. */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.job {
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.job__n { font-family:'Inter',sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--cyan-ink); }
.job h3 { font-size: 17px; margin: 10px 0 8px; }
.job p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.step { position: relative; padding-top: 22px; }
.step__n {
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 46px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1; margin-bottom: 12px;
}
/* Steps appear on BOTH grounds: a light band on the home page, a dark one on
   How it works. Defaulting to dark ink made the headings 1.06:1 on navy and
   effectively invisible, so the ground now decides. */
.step h3 { font-size: 19px; margin-bottom: 10px; color: var(--light); }
.band--light .step h3 { color: var(--ink); }
.band--light .step p  { color: var(--ink-soft); }
.step p { margin: 0; font-size: 15px; }

/* Seats */
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.seat {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  display: flex; flex-direction: column;
}
.seat--pick {
  border-color: rgba(99,102,241,.55);
  background: linear-gradient(180deg, rgba(99,102,241,.18), rgba(99,102,241,.05));
  box-shadow: var(--shadow);
}
.seat__badge {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: none; color: var(--cyan-ink); margin-bottom: 12px; min-height: 32px; line-height: 1.35;
}
.seat h3 { font-size: 17px; margin-bottom: 10px; }
.seat__p { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 34px; margin: 0 0 4px; }
.seat__p span { font-size: 14px; font-weight: 600; color: var(--muted); }
.seat p { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.seats__note { margin-top: 26px; font-size: 15px; color: var(--muted); }

/* Estimator */
.est { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; margin-top: 40px; }
.est__panel {
  background: #fff; border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  padding: 30px; box-shadow: var(--shadow-light);
}
.field { margin-bottom: 22px; }
.field label { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 9px; }
.field input[type=range] { width: 100%; accent-color: var(--purple); }
.field__v { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--purple-ink); font-size: 15px; }
.est__out {
  border-radius: var(--r-lg); padding: 32px 30px; color: #fff;
  background: linear-gradient(150deg, var(--charcoal), var(--navy));
  border: 1px solid rgba(99,102,241,.4);
}
.est__band { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(28px, 4vw, 40px); margin: 10px 0 6px; }
.est__dis { font-size: 13px; color: var(--muted); margin: 14px 0 0; line-height: 1.55; }

/* Final */
.final { background: linear-gradient(140deg, #140F3B 0%, var(--navy) 55%, #06232B 100%); text-align: center; }
.final h2 { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 16px; }
.final .btn-row { justify-content: center; margin-top: 26px; }

/* Footer */
.foot { background: #070B14; border-top: 1px solid var(--line); padding: 56px 0 30px; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.foot h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot a { display: block; text-decoration: none; color: rgba(241,245,249,.72); font-size: 14.5px; padding: 5px 0; }
.foot a:hover { color: #fff; }
.foot__bar { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 13.5px; color: var(--muted); }

@media (max-width: 1130px) {
  .assure__grid, .mods, .seats, .jobs { grid-template-columns: repeat(2, 1fr); }
  .loss, .steps { grid-template-columns: 1fr; }
  .est, .split { grid-template-columns: 1fr; }
  .lcard__media img { height: 200px; }
  .split__media img { height: 300px; }
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero__in { max-width: none; }
  .hero__art { max-width: 460px; }
  .hero__art img { height: 400px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__cta .btn { display: none; }
}
@media (max-width: 620px) {
  .assure__grid, .mods, .seats, .jobs { grid-template-columns: 1fr; }
  .nav__tel span { display: none; }
}

/* ---------- Prose pages (Privacy, Terms) ---------- */
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 20px; }
.prose h2 { font-size: 21px; margin: 38px 0 12px; color: var(--cyan-ink); }
.prose p { font-size: 17px; color: #CBD5E1; }
.prose a { color: var(--cyan-ink); }
.prose .updated { font-size: 14px; color: var(--muted); margin-bottom: 30px; }
/* Footer entries for pages that do not exist yet render as plain text, so the
   column keeps its shape without offering a link that goes nowhere. */
.foot__soon { display: block; padding: 5px 0; font-size: 14.5px; color: rgba(148,163,184,.55); }


/* ---------- Explainer video ----------
   Click to play, with sound. It is a narrated 64-second film, so it must not
   autoplay: muted autoplay would strip the narration, and unmuted autoplay is
   blocked by every browser and rightly resented by visitors.

   The poster is a real <img> behind the <video>, so the block is a finished
   picture before anything loads and if the file never arrives. */
.explainer { background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.explainer__head { max-width: 640px; margin-bottom: 30px; }
.explainer__head h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 16px 0 12px; }
.explainer__head p { color: var(--muted); font-size: 17px; margin: 0; }

.vframe {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);
  background: #0B1018;
}
/* A true 16:9 box via percentage padding. aspect-ratio is not honoured in the
   target browser (it doubled the hero image earlier), and a fixed pixel height
   made object-fit crop the poster. Percentage padding resolves against the
   element WIDTH, so 56.25% is exactly 9/16 at any size, and the whole frame
   is visible with nothing cropped. */
.vframe__media { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.vframe__media > img,
.vframe__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vframe__media > video { z-index: 1; opacity: 0; transition: opacity .35s ease; }
.vframe.is-playing .vframe__media > video { opacity: 1; }

/* The control sits bottom-left as a single cluster with its label, rather than
   centred. A centred button lands on whatever the poster frame happens to say —
   here it covered the word "through". Anchoring it to a corner keeps it clear
   of the artwork at any width and on any future poster. */
.vframe__cover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: 16px; padding: 26px;
  background: linear-gradient(180deg, rgba(10,15,28,0) 38%, rgba(10,15,28,.82) 100%);
  border: 0; cursor: pointer;
  transition: opacity .3s ease, visibility .3s ease;
  text-align: left;
}
.vframe.is-playing .vframe__cover { opacity: 0; visibility: hidden; pointer-events: none; }
.vframe__play {
  width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto;
  background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 14px 38px rgba(99,102,241,.45);
  transition: transform .22s ease;
}
.vframe__cover:hover .vframe__play { transform: scale(1.07); }
.vframe__play svg { margin-left: 5px; }
.vframe__label {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px;
  color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); text-align: left;
}
.vframe__label span { display: block; font-weight: 500; font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .vframe__play { animation: vpulse 2.6s ease-in-out infinite; }
}
@keyframes vpulse {
  0%, 100% { box-shadow: 0 14px 38px rgba(99,102,241,.45); }
  50%      { box-shadow: 0 14px 38px rgba(99,102,241,.45), 0 0 0 14px rgba(99,102,241,0); }
}

@media (max-width: 600px) { .vframe__play { width: 66px; height: 66px; } }


/* =========================================================
   Inner pages — components the home page did not need
   ========================================================= */

/* Numbered module tiles (Platform) */
.mod__num { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--cyan-ink); }
.mod__num--v { color: var(--violet-ink); }
.mod__skill { font-style: normal; color: var(--violet-ink); }

/* Tick lists */
.svc-list { list-style: none; margin: 0 0 20px; padding: 0; }
.svc-list li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 16px; color: var(--ink-soft); }
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--cyan);
}
.band:not(.band--light) .svc-list li { color: #CBD5E1; }

/* The economics spine sentence, given room */
.spine {
  font-size: clamp(20px, 2.6vw, 28px); font-weight: 300; letter-spacing: -.02em;
  color: #CBD5E1; line-height: 1.5; margin: 0;
}

/* Callout panel */
.callout {
  background: rgba(99,102,241,.10); border: 1px solid rgba(99,102,241,.26);
  border-radius: var(--r-lg); padding: 26px 28px;
}
.callout p:last-child { margin-bottom: 0; }

/* Three-up cards (Demo) */
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.diff {
  background: #fff; border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--shadow-light);
}
.diff h3 { font-size: 19px; margin-bottom: 8px; color: var(--ink); }
.diff p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

/* The demo number, used as a block on its own pages */
.demo--hero { margin-top: 34px; }

/* FAQ — native <details>, so it works with JavaScript off */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17.5px;
  color: var(--light);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--cyan-ink); border-bottom: 2px solid var(--cyan-ink);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__item summary:hover { color: #fff; }
.faq__a { padding: 0 44px 22px 0; }
.faq__a p { margin: 0; color: var(--muted); font-size: 16.5px; }

@media (max-width: 1000px) { .diffs { grid-template-columns: 1fr; } }