@charset "UTF-8";

/* ==========================================================================
   Floow Agents — design system

   The brief rejected the previous build as "functionally fine, visually ugly"
   and named what to avoid: generic purple gradients, Inter everywhere, neon
   SaaS, stock robot receptionists.

   The client has asked to KEEP the existing Floow colour palette, so the
   redesign is carried by everything else: a high-contrast serif for display
   against a neutral grotesk for operational text, a white page rather than a
   wall of dark gradient, generous whitespace, and the brand navy used as
   emphasis on three or four bands per page instead of as the background for
   all of them. The product is a front-office EMPLOYEE for regulated offices
   -- servicers, clinics, law firms -- and it should read closer to a private
   bank's letterhead than to a developer tool.

   Every colour pair used for text was checked against WCAG AA (4.5:1 for
   body, 3:1 for large). The ratios are noted beside the tokens so the next
   person does not have to re-derive them before changing one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /*
   * THE PALETTE IS THE EXISTING FLOOW BRAND, carried over unchanged from
   * v2.floowagents.com: navy, cyan, indigo, violet. The redesign is in the
   * typography, spacing and structure, not in the colours.
   *
   * What did change is WHERE each colour is allowed to go, because several
   * of the brand colours are unusable as text on a light ground:
   *
   *   cyan #06B6D4 on white ....... 2.45:1  — fails; decorative only
   *   indigo #6366F1 on white ..... 4.46:1  — fails small text by a hair
   *   cyan #06B6D4 on navy ........ 7.83:1  — passes; the accent lives here
   *
   * So the accent has two forms: --accent (the brand cyan, for dark grounds
   * and fills) and --accent-ink (a darkened cyan at 5.4:1, for accent text
   * on light grounds). Do not swap one for the other.
   */

  /* Ink — text on light */
  --ink:        #1E293B;   /* 14.6:1 on white */
  --ink-2:      #334155;   /* 11.2:1 on white */
  --ink-3:      #475569;   /*  7.6:1 on white — the floor for body text */

  /* Light grounds */
  --paper:      #FFFFFF;
  --paper-2:    #F1F5F9;
  --paper-3:    #E2E8F0;
  --line:       #E2E8F0;
  --line-2:     #CBD5E1;

  /* Navy — the brand ground */
  --dark:       #0A0F1C;   /* --navy       */
  --dark-2:     #111827;   /* --navy-light */
  --dark-3:     #1E293B;   /* --charcoal   */

  /* Cyan — the accent */
  --accent:     #06B6D4;   /*  7.8:1 on --dark  — safe for small text on dark */
  --accent-ink: #0E7490;   /*  5.4:1 on white   — safe for small text on light */
  --accent-800: #0E7490;
  --accent-900: #164E63;
  --accent-soft:#CFFAFE;

  /* Indigo / violet — gradient only, never as text */
  --indigo:     #6366F1;
  --violet:     #8B5CF6;
  --grad: linear-gradient(90deg, var(--accent), var(--indigo), var(--violet));

  --muted:      #94A3B8;   /*  7.5:1 on --dark */
  --white:      #FFFFFF;   /* 19.2:1 on --dark */

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--2: 0.8125rem;
  --step--1: 0.9375rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.3rem + 1.9vw, 2.4rem);
  --step-4:  clamp(2.1rem, 1.5rem + 2.8vw, 3.1rem);
  --step-5:  clamp(2.5rem, 1.6rem + 4.2vw, 4.15rem);

  /* Space */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;

  /* Structure */
  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);   /* never below the 16px phone gutter */
  --radius: 4px;
  --radius-lg: 10px;
  --head-h: 76px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:    0 14px 40px -18px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 40px 90px -40px rgba(2, 6, 23, 0.5);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors land below the sticky header instead of under it. */
  scroll-padding-top: calc(var(--head-h) + var(--s-4));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.021em;
  margin: 0;
  /* Fraunces is a variable font; hold the optical size steady at display
     sizes so headings do not drift thin when the clamp() shrinks them. */
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.18em; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select { font: inherit; color: inherit; }

/* One visible focus treatment everywhere, including inside dark bands. */
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.strip :focus-visible,
.band--dark :focus-visible,
.site-foot :focus-visible { outline-color: var(--accent); }

::selection { background: var(--accent-soft); color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--dark);
  color: var(--white);
  padding: var(--s-2) var(--s-4);
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }
.container--mid    { max-width: 940px; }

.band { padding-block: clamp(3.5rem, 8vw, var(--s-9)); position: relative; }
.band--tight { padding-block: clamp(2.5rem, 5vw, var(--s-7)); }
.band--alt   { background: var(--paper-2); }
.band--edge  { border-top: 1px solid var(--line); }

/* The dark ground. Used sparingly -- demo strip, final CTA, footer -- so it
   still reads as emphasis rather than as the site's default. */
.band--dark {
  background: var(--dark);
  color: var(--white);
}
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--white); }
.band--dark .lede, .band--dark p { color: rgba(255, 255, 255, 0.82); }
.band--dark .eyebrow { color: var(--accent); }

/*
 * Links inside dark bands are WHITE, not the accent.
 *
 * An earlier site on this account shipped brand-coloured links on a dark
 * ground at 1.4:1 -- phone numbers that were effectively invisible. White on
 * --dark is 12.5:1. Do not "brand" these back.
 */
.band--dark a:not(.btn) { color: var(--white); }

.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 42%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.split {
  display: grid;
  gap: clamp(var(--s-5), 5vw, var(--s-8));
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--art-first > .split__art { order: -1; }
}

/* --------------------------------------------------------------------------
   4. Type components
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.prose { color: var(--ink-2); max-width: 68ch; }
.prose > * + * { margin-top: var(--s-3); }

.t-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A rule that reads as letterpress rather than as a border. */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--s-6);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--dark);
  --btn-fg: var(--white);
  --btn-bd: var(--dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.45em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover {
  --btn-bg: var(--dark-2);
  --btn-bd: var(--dark-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--lg { padding: 1.05em 1.9em; font-size: var(--step-0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
}
.btn--ghost:hover {
  --btn-bg: var(--paper-3);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
}

/*
 * On a dark ground both button styles invert, and both stay above 4.5:1.
 *
 * .strip IS ON THIS LIST. It is a navy band that is not .band--dark, and
 * leaving it off meant its ghost button rendered navy text on navy -- the
 * "See skill tiers" CTA on the home page was effectively invisible. Any new
 * dark section must be added here too.
 */
.strip .btn,
.band--dark .btn,
.site-foot .btn {
  --btn-bg: var(--white);
  --btn-fg: var(--dark-2);
  --btn-bd: var(--white);
}
.strip .btn:hover,
.band--dark .btn:hover,
.site-foot .btn:hover {
  --btn-bg: var(--accent-soft);
  --btn-bd: var(--accent-soft);
}
.strip .btn--ghost,
.band--dark .btn--ghost,
.site-foot .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.4);
}
.strip .btn--ghost:hover,
.band--dark .btn--ghost:hover,
.site-foot .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-bd: rgba(255, 255, 255, 0.7);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-head.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px -12px rgba(15, 23, 42, 0.18);
}

.head-in {
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand svg { width: 30px; height: 30px; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand__word span { color: var(--accent-ink); font-weight: 600; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.5rem); }
.nav a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.head-cta { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/*
 * The header phone is a LINK, not a button, sitting beside the CTA.
 *
 * It is set in the display face at a size that survives being read aloud off
 * a screen -- this number is the product's primary conversion path, not a
 * detail. Tabular figures keep it from shifting as it renders.
 */
.head-phone {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink);
}
.head-phone small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.head-phone strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variation-settings: "opsz" 20;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.head-phone:hover strong { color: var(--accent-ink); }

.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21.25px; }
.burger span:nth-child(3) { top: 26.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

.mnav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s-4) 0 var(--s-5);
}
.mnav[hidden] { display: none; }
.mnav ul { display: grid; gap: 0.15rem; }
.mnav a {
  display: block;
  padding: 0.7rem 0;
  font-size: var(--step-1);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mnav a[aria-current="page"] { color: var(--accent-ink); }
.mnav__cta { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.mnav__cta .btn { width: 100%; }

@media (max-width: 61.999rem) {
  .nav, .head-cta { display: none; }
  .burger { display: block; }
  .mnav:not([hidden]) { display: block; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}

/*
 * A single hairline grid behind the hero, fading out downward.
 *
 * This replaces the gradient blobs the previous build used. It reads as
 * ledger paper rather than as a product launch, and because it is a CSS
 * gradient there is no image to download and nothing to go wrong on a slow
 * connection.
 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__title { max-width: 18ch; }
.hero .lede { margin-top: var(--s-4); }
.hero .btn-row { margin-top: var(--s-5); }

.hero--inner { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); }
.hero--inner .hero__title { max-width: 22ch; }

/* The trail of "Financial services · Mortgage servicing" above an H1. */
.crumb {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-3);
}
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Demo strip — the phone number, treated as the headline it is
   -------------------------------------------------------------------------- */

.strip {
  background: var(--dark);
  color: var(--white);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.strip__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.strip__text { max-width: 46ch; }
.strip__text p { color: rgba(255, 255, 255, 0.82); font-size: var(--step-0); }
.strip__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.strip__num:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--ink-2); font-size: var(--step--1); }

a.card, .card--link { text-decoration: none; display: block; }
a.card:hover, .card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--s-4);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-ink);
}
.card__more svg { width: 0.9em; height: 0.9em; transition: transform 0.3s var(--ease); }
a.card:hover .card__more svg, .card--link:hover .card__more svg { transform: translateX(4px); }

/* A card whose number is the point — the module and step grids. */
.num-card { position: relative; padding-top: var(--s-6); }
.num-card__n {
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}

/* Before / after pair on the Home cost section. */
.ba { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .ba { grid-template-columns: 1fr 1fr; } }
.ba__item {
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--white);
}
.ba__item small {
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  color: var(--ink-3);
}
.ba__item--after { background: var(--dark); border-color: var(--dark); color: var(--white); }
.ba__item--after small { color: var(--accent); }

/* --------------------------------------------------------------------------
   10. Lists
   -------------------------------------------------------------------------- */

/* The tick list used inside pricing cards and industry pages. */
.ticks { display: grid; gap: var(--s-2); }
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.6;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 1.5px solid var(--accent-ink);
  border-bottom: 1.5px solid var(--accent-ink);
  transform: rotate(-45deg);
}
.band--dark .ticks li { color: rgba(255, 255, 255, 0.85); }
.band--dark .ticks li::before { border-color: var(--accent); }

/* The plain bullet list used for "what these phones sound like". */
.dots { display: grid; gap: var(--s-3); }
.dots li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-2);
}
.dots li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.75em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-ink);
}

/* Numbered steps that read as a path, not as a feature grid. */
.steps { display: grid; gap: 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps__n {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.steps h3 { margin-bottom: var(--s-1); }
.steps p { color: var(--ink-2); }
.band--dark .steps li { border-color: rgba(255, 255, 255, 0.16); }
.band--dark .steps__n { color: var(--accent); }

/* Jump links across the top of Solutions. */
.jumps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.jumps a {
  display: inline-block;
  padding: 0.45em 0.95em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-2);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.jumps a:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }

/* Small trust chips (Demo page). */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips li {
  font-size: var(--step--1);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   11. Pricing
   -------------------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  align-items: start;
}

.tier {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier__label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tier__name { margin: var(--s-2) 0 var(--s-3); font-size: var(--step-2); }
.tier__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tier__period {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: 0.35rem;
}
.tier__blurb { margin: var(--s-4) 0; color: var(--ink-2); font-size: var(--step--1); }

/*
 * The tick list sits directly under the blurb, NOT pushed to the bottom.
 *
 * margin-top:auto was aligning the four lists on a common baseline, which
 * sounds tidy but opened 300px of dead space inside the shortest card --
 * the cards are different heights because their intros are different
 * lengths, and the eye reads that gap as missing content.
 */
.tier .ticks { padding-top: var(--s-4); border-top: 1px solid var(--line); }

/*
 * The Operations tier is marked, but NOT with the word "Recommended" --
 * the brief forbids it by name. The badge is a full sentence about where
 * people start and that they are expected to move, which is a different
 * claim from "this is the best one".
 */
.tier--marked {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.tier--marked .tier__name { color: var(--white); }
.tier--marked .tier__blurb { color: rgba(255, 255, 255, 0.82); }
.tier--marked .tier__period { color: var(--accent); }
.tier--marked .ticks { border-top-color: rgba(255, 255, 255, 0.2); }
.tier--marked .ticks li { color: rgba(255, 255, 255, 0.85); }
.tier--marked .ticks li::before { border-color: var(--accent); }

.tier__badge {
  display: block;
  background: var(--accent-soft);
  color: #0E5E70;               /* 7.4:1 on --accent-soft */
  border-radius: var(--radius);
  padding: 0.6em 0.9em;
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: var(--s-3);
  text-wrap: pretty;
}

.tier__perloc {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 2px solid var(--accent-ink);
  background: var(--paper-2);
  font-size: var(--step--1);
  color: var(--ink-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Comparison table — scrolls horizontally on a phone rather than squashing. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.cmp { width: 100%; border-collapse: collapse; min-width: 44rem; }
.cmp caption { text-align: left; padding: var(--s-4) var(--s-4) 0; color: var(--ink-3); font-size: var(--step--1); }
.cmp th, .cmp td { padding: 0.85rem var(--s-4); text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  position: sticky;
  top: 0;
}
.cmp tbody th { font-weight: 500; color: var(--ink); }
.cmp td { text-align: center; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .yes { color: var(--accent-800); font-weight: 700; }
.cmp .no  { color: var(--ink-3); }
.cmp .quote { font-size: var(--step--2); font-weight: 700; color: var(--accent-ink); letter-spacing: 0.06em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   12. Calculator
   -------------------------------------------------------------------------- */

.calc {
  display: grid;
  gap: clamp(var(--s-4), 4vw, var(--s-7));
  align-items: start;
}
@media (min-width: 56rem) { .calc { grid-template-columns: 1fr 1fr; } }

.calc__fields { display: grid; gap: var(--s-4); }
.calc__field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--s-1);
}
.calc__input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.calc__input:focus-within {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
}
.calc__input span {
  padding-inline: 0.85rem;
  color: var(--ink-3);
  font-size: var(--step--1);
  background: var(--paper-2);
  align-self: stretch;
  display: flex;
  align-items: center;
  flex: none;
}
.calc__input input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.75rem 0.9rem;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.calc__input input:focus { outline: none; }

.calc__out {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
.calc__rows { display: grid; gap: var(--s-1); }
.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.calc__row:last-child { border-bottom: 0; }
.calc__row dt { color: rgba(255, 255, 255, 0.72); font-size: var(--step--1); }
.calc__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.calc__row--big dd { font-size: var(--step-3); color: var(--accent); }

.calc__note {
  font-size: var(--step--2);
  color: var(--ink-3);
  margin-top: var(--s-3);
}
.band--dark .calc__note { color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------------------
   13. FAQ / accordion
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  position: relative;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.7rem; height: 0.7rem;
  margin-top: -0.45rem;
  border-right: 1.5px solid var(--accent-ink);
  border-bottom: 1.5px solid var(--accent-ink);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.2rem; }
.faq .faq__a { padding: 0 var(--s-5) var(--s-5) 0; color: var(--ink-2); max-width: 72ch; }

/* --------------------------------------------------------------------------
   14. Final CTA
   -------------------------------------------------------------------------- */

.final { text-align: center; }
.final h2 { max-width: 20ch; margin-inline: auto; }
.final p { max-width: 58ch; margin: var(--s-4) auto 0; }
.final .btn-row { justify-content: center; margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-foot {
  background: var(--dark-2);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--step--1);
}
.site-foot a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-foot a:hover { color: var(--white); text-decoration: underline; }

.foot-top {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 52rem) {
  .foot-top { grid-template-columns: 1.4fr 1fr 1fr; }
}
.foot-brand .brand { color: var(--white); }
.foot-brand p { color: rgba(255, 255, 255, 0.62); margin-top: var(--s-3); max-width: 44ch; }
.foot-phone {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--white) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.foot-phone:hover { color: var(--accent) !important; text-decoration: none; }
.foot-note { color: rgba(255, 255, 255, 0.5); margin-top: var(--s-2); font-size: var(--step--2); max-width: 40ch; }

.foot-col h3 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.foot-col li + li { margin-top: 0.55rem; }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  padding-top: var(--s-5);
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--step--2);
}

/* --------------------------------------------------------------------------
   16. Chat widget
   -------------------------------------------------------------------------- */

.chat-launch {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.35em;
  border: 0;
  border-radius: 999px;
  background: var(--dark);
  color: var(--white);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.chat-launch:hover { transform: translateY(-2px); background: var(--accent-800); }
.chat-launch svg { width: 1.1em; height: 1.1em; }
.chat-launch[hidden] { display: none; }

.chat-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 130;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 2rem));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }

.chat-head {
  background: var(--dark);
  color: var(--white);
  padding: var(--s-4);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.chat-head h2 {
  font-size: var(--step-1);
  color: var(--white);
  margin: 0;
}
.chat-head p { font-size: var(--step--2); color: rgba(255, 255, 255, 0.72); margin-top: 0.15rem; }
.chat-head a { color: var(--accent); }
.chat-close {
  margin-left: auto;
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.chat-close:hover { background: rgba(255, 255, 255, 0.22); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--paper);
}
.chat-msg {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  font-size: var(--step--1);
  line-height: 1.55;
}
.chat-msg--bot { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.chat-msg--me {
  align-self: flex-end;
  background: var(--dark);
  color: var(--white);
  border-bottom-right-radius: 3px;
}
.chat-help { font-size: var(--step--2); color: var(--ink-3); padding-left: 0.2rem; }
.chat-err { font-size: var(--step--2); color: #B91C1C; padding: 0 var(--s-4); }

.chat-form {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--white);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper);
}
.chat-form input:focus { outline: none; border-color: var(--dark); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25); }
.chat-form button {
  flex: none;
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
}
.chat-form button:hover { background: var(--dark-2); }
.chat-done { padding: var(--s-4); border-top: 1px solid var(--line); background: var(--white); }
.chat-done .btn { width: 100%; }

/* --------------------------------------------------------------------------
   17. Illustrations
   -------------------------------------------------------------------------- */

.art { width: 100%; height: auto; display: block; }
.art-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: var(--white);
}

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */

/*
 * Reveal-on-scroll. The no-js / no-IntersectionObserver path must leave
 * content VISIBLE, so the hidden state is applied by a class that only the
 * script adds -- never by the base rule. A stylesheet that hides content and
 * waits for JS is one broken script away from a blank page.
 */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .chat-launch, .chat-panel, .strip .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1rem; }
}