/* Workspace design system
   Notion-style marketing UI for Wide Awake AI.
   Purple accents from the Notion system are navy here.
   Loaded after site.css and pages.css. Same class names, new paint. */

:root {
  /* Brand. primary was #5645d4; navy is the CTA and the hero. */
  --primary: #0a1530;
  --primary-pressed: #070f24;
  --primary-deep: #070f24;
  --on-primary: #ffffff;
  --brand-navy: #0a1530;
  --brand-navy-deep: #070f24;
  --brand-navy-mid: #1a2a52;
  --link-blue: #0075de;
  --link-blue-pressed: #005bab;
  --sun: #f5c451;
  --brand-orange: #dd5b00;
  --brand-teal: #2a9d99;
  --brand-green: #1aae39;

  /* Pastel tiles, the database-property colors, kept as tints not as the brand. */
  --card-tint-peach: #ffe8d4;
  --card-tint-rose: #fde0ec;
  --card-tint-mint: #d9f3e1;
  --card-tint-lavender: #e6e0f5;
  --card-tint-sky: #dcecfa;
  --card-tint-yellow: #fef7d6;
  --card-tint-yellow-bold: #f9e79f;
  --card-tint-cream: #f8f5e8;
  --card-tint-gray: #f0eeec;
  --tag-green-bg: #dbeddb;
  --tag-green-ink: #1c3829;
  --tag-sky-bg: #d3e5ef;
  --tag-sky-ink: #183347;
  --tag-warn-bg: #fdecc8;
  --tag-warn-ink: #402c1b;

  --canvas: #ffffff;
  --surface: #f6f5f4;
  --surface-soft: #fafaf9;
  --hairline: #e5e3df;
  --hairline-soft: #ede9e4;
  --hairline-strong: #c8c4be;

  --ink-deep: #000000;
  --ink: #1a1a1a;
  --charcoal: #37352f;
  --slate: #5d5b54;
  --steel: #787671;
  --stone: #a4a097;
  --muted: #bbb8b1;
  --on-dark: #ffffff;
  --on-dark-muted: #a4a097;

  --semantic-success: #1aae39;
  --semantic-warning: #dd5b00;
  --semantic-error: #e03131;

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-card: rgba(15, 15, 15, 0.08) 0 4px 12px;
  --shadow-mock: rgba(15, 15, 15, 0.2) 0 24px 48px -8px;

  /* Bridge the previous tokens so unpainted rules follow the new palette. */
  --paper: var(--canvas);
  --paper-2: var(--surface);
  --card: var(--canvas);
  --ink-2: var(--slate);
  --ink-3: var(--steel);
  --rule: var(--hairline);
  --rule-2: var(--hairline-strong);
  --night: var(--brand-navy);
  --night-2: var(--brand-navy-deep);
  --night-3: var(--brand-navy-mid);
  --bone: var(--on-dark);
  --bone-2: var(--on-dark-muted);
  --amber: var(--primary);
  --amber-lit: var(--sun);
  --live: var(--semantic-success);
  --sky: var(--canvas);
  --sky-2: var(--surface);
  --panel: var(--canvas);
  --panel-2: var(--surface);
  --line: var(--hairline);
  --line-2: var(--hairline-strong);
  --muted-2: var(--steel);
  --body-c: var(--charcoal);
  --amber-deep: var(--brand-navy-mid);
  --ember: var(--brand-orange);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.hero h1, .sechead h2, .srow h3, .darkband h2, .bookband h2, .paraband h2,
.pagehero h1, .article h2, .article h3, .ctapanel h2, .founder q,
.fig b, .figures b, .calc .out b, .tc h3, .ind b, .lawcard b, .qa h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-style: normal;
}

h1 em, h2 em, .hero h1 em { font-style: normal; color: inherit; }

a { color: inherit; }
a:hover { color: var(--primary); }

.skip {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { color: var(--on-primary); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- sun mark. Same drawing, gold on navy, gold on white. ---------- */
.mark circle { fill: var(--sun); }
.head .mark > path { stroke: rgba(255, 255, 255, 0.55); }
.head .mark g { stroke: var(--sun); }
footer .mark > path { stroke: var(--primary); opacity: 0.45; }
footer .mark g { stroke: var(--sun); }

/* ---------- buttons. 8px rectangles, navy where purple used to be. ---------- */
.btn {
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  padding: 10px 18px;
  letter-spacing: 0;
  box-shadow: none;
}
.btn:hover { background: var(--brand-navy-mid); color: var(--on-primary); border-color: var(--brand-navy-mid); }
.btn-xl { font-size: 15px; padding: 12px 20px; border-radius: var(--r-md); box-shadow: none; white-space: nowrap; }
.btn-line, .btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.btn-line:hover, .btn-ghost:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-lit { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-lit:hover { background: var(--brand-navy-mid); border-color: var(--brand-navy-mid); color: var(--on-primary); }

/* ---------- header. Sticky navy bar, white wordmark, white button. ---------- */
.head {
  position: sticky;
  top: 0;
  background: var(--brand-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 60;
}
.head .wrap { height: 64px; }
a.brand, .head .brand, .head .brand:hover { color: var(--on-dark); }
.brand { font-weight: 600; letter-spacing: -0.02em; }
.head nav a, .head .mtrig { color: rgba(255, 255, 255, 0.72); }
.head nav a:hover, .menu:hover .mtrig, .menu.open .mtrig, .menu:focus-within .mtrig { color: var(--on-dark); }
.mtrig svg { color: rgba(255, 255, 255, 0.5); }
.head .btn {
  background: var(--on-dark);
  color: var(--primary);
  border-color: var(--on-dark);
}
.head .btn:hover { background: var(--surface); color: var(--primary); border-color: var(--surface); }
.burger { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.28); border-radius: var(--r-md); }

@media (min-width: 861px) {
  .menu { height: 64px; }
  .drop { top: 64px; }
  .head nav { gap: 22px; }
}

.drop {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-mock);
}
.ditem { border-radius: var(--r-sm); }
.ditem:hover { background: var(--surface); }
.drop .ditem b { color: var(--ink); font-weight: 600; }
.drop .ditem span { color: var(--slate); }
.drop .dfoot, .drop a.dfoot { color: var(--primary); letter-spacing: 0.04em; text-transform: none; font-family: var(--sans); font-weight: 600; }
.drule { background: var(--hairline); }

.head a:focus-visible, .head button:focus-visible { outline-color: var(--sun); }

/* ---------- eyebrows become quiet labels, not tracked capitals ---------- */
.eyebrow, .shead, .tc .k, .viz-h span, .contact dt, footer h3, .crumb, .fnote, .shotcap, .flownote {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- hero band. Navy, dotted, with a workspace card. ---------- */
.hero {
  position: relative;
  background: var(--brand-navy);
  color: var(--on-dark);
  border-bottom: 0;
  overflow: visible;
}
/* Dots were floating in the type. The hero is the type and the card. */
.hero::before { content: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--sun); }
.hero h1 {
  color: var(--on-dark);
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.hero .sub { color: rgba(255, 255, 255, 0.74); font-size: 18px; line-height: 1.5; }
.hero .sub a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.hero .sub a:hover { color: var(--sun); }
.hero .ctanote b { color: var(--on-dark); }
.hero .ctanote span { color: rgba(255, 255, 255, 0.68); }
.hero .btn, .hero .btn-xl, .hero .btn-lit {
  background: var(--on-dark);
  color: var(--primary);
  border-color: var(--on-dark);
}
.hero .btn:hover, .hero .btn-xl:hover {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--surface);
}
.hero .btn-line, .hero .btn-ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.35);
}
.hero .btn-line:hover, .hero .btn-ghost:hover {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.hero .demonow {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  box-sizing: border-box;
}
.hero .demonow p { color: rgba(255, 255, 255, 0.8); }
.hero .demonow .num { color: var(--on-dark); border-bottom-color: rgba(255, 255, 255, 0.4); font-family: var(--sans); }
.hero .demonow .num:hover { color: var(--sun); border-bottom-color: var(--sun); }
.hero .demonow em { color: rgba(255, 255, 255, 0.5); letter-spacing: 0; text-transform: none; font-family: var(--sans); font-size: 13px; }
.hero .proof { border-top-color: rgba(255, 255, 255, 0.14); }
.hero .proof div + div { border-left-color: rgba(255, 255, 255, 0.14); }
.hero .proof b { color: var(--on-dark); font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }
.hero .proof span { color: rgba(255, 255, 255, 0.58); font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
.hero a:focus-visible, .hero button:focus-visible { outline-color: var(--sun); }

.hero .viz, .hero .heroshot, .hero .hubviz .viz {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-mock);
}
.hero .heroshot { overflow: hidden; }
.hero .heroshot img { display: block; width: 100%; height: auto; }
.hero .qrow p, .hero .viz p { color: var(--ink); }
.hero .qrow small { color: var(--steel); }

/* One text column. Product pages keep it left in the two-column hero.
   The homepage centers that same column. */
.herocol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}
.herocol .sub { max-width: 40rem; margin-top: 16px; }
.herocol .cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
}
.herocol .ctanote { max-width: 42ch; text-align: left; flex: none; align-self: auto; }
.herocol .demonow { width: 100%; max-width: none; margin-top: 20px; }
.herocol .proof { width: 100%; max-width: none; margin-top: 28px; }
.herocol .proof div,
.herocol .proof div + div { padding: 16px 12px 0; }
.hero .hubviz { margin: 0; width: 100%; max-width: none; }

/* Homepage hero matches the industry pages: left type, right photo card.
   Call the demo line is the large control. Book a walkthrough stays the outline button. */
#demo .cta {
  width: auto;
  max-width: none;
  margin-top: 28px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#demo .callpair {
  display: inline-flex;
  align-items: stretch;
  gap: 12px;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  max-width: 100%;
  min-height: 64px;
  height: auto;
  text-decoration: none;
}
#demo .phonetile {
  width: 64px;
  min-height: 64px;
  height: auto;
  flex: 0 0 64px;
  align-self: stretch;
  border-radius: 16px;
  background: #3093c7;
  display: grid;
  place-items: center;
}
#demo .phonetile svg { width: 38px; height: 38px; display: block; }
#demo .callpair .callface {
  height: auto;
  min-height: 64px;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 22px;
  font-size: 19px;
  font-weight: 600;
  white-space: normal;
  gap: 12px;
  line-height: 1.15;
}
#demo .calllabel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
#demo .callnum {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hero a.btn[href^="tel:"],
.hero a.btn-xl[href^="tel:"] {
  white-space: normal;
  max-width: 100%;
  height: auto;
}
.hero .callwords {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 0;
}
.hero .callnum {
  font-size: 0.84em;
  font-weight: 500;
}
#demo .callface .dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 6px rgba(63, 190, 143, 0.22);
}
#demo .callpair:hover .phonetile { background: #2786b6; }
#demo .callpair:hover .callface {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--primary);
}
#demo .heroshot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 46% 28%;
}

.demostrip { background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.demostrip .wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 36px;
  padding-bottom: 28px;
}
.demostrip .demonow {
  margin: 0;
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--live);
  border-radius: var(--r-md);
}
.demostrip .demonow p { color: var(--charcoal); }
.demostrip .demonow .num {
  color: var(--primary);
  border-bottom-color: var(--hairline-strong);
  font-family: var(--sans);
}
.demostrip .demonow .num:hover { color: var(--link-blue); border-bottom-color: var(--link-blue); }
.demostrip .demonow em {
  color: var(--slate);
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--sans);
  font-size: 13px;
}
.demostrip .proof { margin-top: 12px; border-top: 0; }
.demostrip .proof b {
  color: var(--primary);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.demostrip .proof span {
  color: var(--slate);
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}
.demostrip .proof div + div { border-left-color: var(--hairline); }

.crumb { background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.crumb .wrap { flex-wrap: wrap; row-gap: 4px; }
.crumb .wrap, .crumb a, .crumb .now { color: var(--steel); font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
.crumb .now { color: var(--ink); font-weight: 500; }

/* ---------- sections ---------- */
.sec { border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.sec .wrap { padding-top: 80px; padding-bottom: 80px; }
/* Two-column heads were bottom-aligned. The paragraph starts with the heading block. */
.sechead { align-items: start; }
.sechead > p { padding-top: 0; padding-bottom: 0; }
/* Header strips use the founder quote yellow, and only the heading block. */
.bandhead { background: var(--card-tint-yellow-bold); }
.bandhead .wrap { padding-top: 78px; padding-bottom: 78px; }
.bandhead + .wrap { padding-top: 48px; }
.sechead h2, .darkband h2, .bookband h2, .paraband h2 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-top: 10px;
}
.sechead p, .srow .said, .split p, .hstep p, .tc p, .ind p, .lawcard span, .qa p {
  color: var(--slate);
}
.srow { border-top-color: var(--hairline); }
.srow h3 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.02em; }
.srow li, .hublist li { border-top-color: var(--hairline); }
.srow li svg, .hublist li svg, .darkband li svg, .paraband li svg { color: var(--primary); }
.srow .go, .split .go, .ind .go, .indsfoot a {
  color: var(--link-blue);
  border-bottom: 0;
  font-weight: 500;
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}
.srow .go:hover, .split .go:hover, .indsfoot a:hover { color: var(--link-blue-pressed); }
.ind .go { color: var(--link-blue); }

.viz, .dviz, .shotpanel, .sourcebox, .calc, .tldr, .options > div, .tablewrap, .crosslinks a {
  border-radius: var(--r-lg);
  border-color: var(--hairline);
  box-shadow: none;
}
.viz { box-shadow: var(--shadow-card); }
.viz-h { border-bottom-color: var(--hairline); }
.viz-h .badge, .dviz-h .badge {
  background: var(--card-tint-lavender);
  color: var(--brand-navy-mid);
  border-radius: var(--r-sm);
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--sans);
  font-weight: 600;
}
.pill {
  background: var(--tag-green-bg);
  color: var(--tag-green-ink);
  border-radius: var(--r-xs);
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
}
.pill.warn { background: var(--tag-warn-bg); color: var(--tag-warn-ink); }
.pill.off { background: var(--card-tint-gray); color: var(--steel); }
.qrow { border-bottom-color: var(--hairline); }
.node { background: var(--surface); border-color: var(--hairline); border-radius: var(--r-md); }
.node span { color: var(--slate); }

.viz.dark {
  background: var(--brand-navy-deep);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-mock);
}
.viz.dark::after { opacity: 0; }
.viz.dark .viz-h .badge { background: rgba(245, 196, 81, 0.16); color: var(--sun); }

/* Pastel feature tiles. Photos stay in their frames. */
.inds { gap: 16px; }
.ind {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: none;
  overflow: hidden;
}
.ind:hover { border-color: var(--hairline-strong); }
.ind .ph { border-bottom: 1px solid var(--hairline); background: var(--surface); }
.ind b { font-size: 20px; letter-spacing: -0.02em; }
.indsfoot { border-top-color: var(--hairline); }

.three { gap: 16px; }
.tc, .lawcard {
  border: 0;
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.three .tc:nth-child(3n+1), .lawgrid .lawcard:nth-child(6n+1) { background: var(--card-tint-yellow); }
.three .tc:nth-child(3n+2), .lawgrid .lawcard:nth-child(6n+2) { background: var(--card-tint-mint); }
.three .tc:nth-child(3n), .lawgrid .lawcard:nth-child(6n+3) { background: var(--card-tint-sky); }
.lawgrid .lawcard:nth-child(6n+4) { background: var(--card-tint-peach); }
.lawgrid .lawcard:nth-child(6n+5) { background: var(--card-tint-rose); }
.lawgrid .lawcard:nth-child(6n) { background: var(--card-tint-gray); }
/* Lavender is in the pastel set and is not part of the six-color cycle,
   so the insurance card stays distinct when it lands on a repeated slot. */
.lawgrid .lawcard.tint-lav { background: var(--card-tint-lavender); }
.lawcard:hover { border-color: transparent; }
.lawcard .arw, .tc .k { color: var(--primary); }
.lawgrid { gap: 16px; }
/* Industry grids hold 7 or 8 cards. Four columns makes 8 a full pair of rows
   and 7 a row of four plus a row of three, instead of one card alone. */
@media (min-width: 1081px) {
  .lawgrid.trades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.howgrid, .hubgrid {
  gap: 16px;
  border-top: 0;
  margin-top: 36px;
}
.hstep, .hubgrid .hstep, .hstep + .hstep, .hubgrid .hstep + .hstep {
  border: 0;
  border-radius: var(--r-lg);
  padding: 28px 26px 32px;
  background: var(--surface);
}
.howgrid .hstep:nth-child(3n+1), .hubgrid .hstep:nth-child(3n+1) { background: var(--card-tint-yellow-bold); }
.howgrid .hstep:nth-child(3n+2), .hubgrid .hstep:nth-child(3n+2) { background: var(--card-tint-mint); }
.howgrid .hstep:nth-child(3n), .hubgrid .hstep:nth-child(3n) { background: var(--card-tint-sky); }
.hstep .k {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  color: var(--primary);
  letter-spacing: -0.03em;
}
.hstep h3 { font-weight: 600; }

.lawband { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.figs {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  margin-top: 36px;
  overflow: hidden;
}
/* The first stat used to sit flush with the section edge. Inside this card
   it needs the same inset as the columns beside it. */
.fig {
  padding: 32px 30px;
  min-width: 0;
}
.fig b, .figures b {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--primary);
}
.fig + .fig, .figures .f + .f { border-left-color: var(--hairline); }
.fnote { border-top-color: var(--hairline); color: var(--steel); font-family: var(--sans); }

.founder { background: var(--card-tint-yellow-bold); border-bottom: 0; }
.founder q {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--charcoal);
}
.founder cite {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  border-top-color: rgba(82, 52, 16, 0.15);
}

.faqgrid { border-top-color: var(--hairline); }
.qa { border-bottom-color: var(--hairline); }
.qa h3 { font-size: 18px; letter-spacing: -0.01em; }

/* ---------- dark bands stay navy, without the paper grain ---------- */
.darkband, .paraband, .bookband { background: var(--brand-navy); }
.darkband::before, .paraband::before, .bookband::before { opacity: 0; }
.darkband .eyebrow, .paraband .eyebrow, .bookband .eyebrow { color: var(--sun); }
.darkband h2, .paraband h2, .bookband h2 { color: var(--on-dark); }
.darkband .lede, .paraband .lede, .bookband p.l, .darkband li, .paraband li { color: rgba(255, 255, 255, 0.72); }
.darkband .go, .paraband .go {
  color: var(--on-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.darkband .go:hover, .paraband .go:hover { color: var(--sun); border-bottom-color: var(--sun); }
.shot { border-color: rgba(255, 255, 255, 0.16); border-radius: var(--r-lg); box-shadow: var(--shadow-mock); }
.dviz { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }

/* ---------- booking form. White workspace card on the navy band. ---------- */
.bookband .form {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-mock);
}
.bookband .form label, .form label {
  color: var(--slate);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.form label.req::after, .form .req::after { color: var(--semantic-error); }
.bookband .form input, .bookband .form textarea, .form input, .form textarea {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 16px;
}
.bookband .form input::placeholder, .bookband .form textarea::placeholder,
.form input::placeholder, .form textarea::placeholder { color: var(--stone); }
.bookband .form input:focus, .bookband .form textarea:focus,
.form input:focus, .form textarea:focus {
  border: 2px solid var(--primary);
  outline: none;
}
.bookband .form .btn, .bookband .form .btn-lit {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  border-radius: var(--r-md);
  cursor: pointer;
}
.bookband .form .btn:hover, .bookband .form .btn-lit:hover {
  background: var(--brand-navy-mid);
  color: var(--on-primary);
  border-color: var(--brand-navy-mid);
}
.bookband .form .fine, .form .fine { color: var(--slate); }
.bookband .contact { border-top-color: rgba(255, 255, 255, 0.14); }
.bookband .contact div { border-bottom-color: rgba(255, 255, 255, 0.14); }
.bookband .contact dt { color: rgba(255, 255, 255, 0.55); }
.bookband .contact dd { color: var(--on-dark); }
.bookband a:focus-visible, .bookband button:focus-visible, .bookband input:focus-visible, .bookband textarea:focus-visible {
  outline-color: var(--sun);
}

/* ---------- footer. Light, hairline, steel links. ---------- */
footer { background: var(--canvas); color: var(--slate); border-top: 1px solid var(--hairline); }
footer .brand, footer a.brand, footer a.brand:hover { color: var(--ink); }
footer p { color: var(--slate); }
footer h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  font-family: var(--sans);
}
footer li a { color: var(--steel); }
footer li a:hover { color: var(--primary); }
.legal { border-top: 1px solid var(--hairline); }
.legal .wrap { color: var(--steel); opacity: 1; font-family: var(--sans); letter-spacing: 0; }
.legal a, .legal button.js-cookie-settings { border-bottom-color: var(--hairline-strong); }
.legal a:hover, .legal button.js-cookie-settings:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- long pages: guides, legal, calculator, comparison ---------- */
main.wrap { max-width: 1100px; }
.pagehero {
  background: var(--brand-navy);
  color: var(--on-dark);
  margin: 28px -26px 8px;
  padding: 48px 40px 44px;
  border-radius: var(--r-xl);
  position: relative;
}
.pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 92% 24%, var(--sun) 0 4px, transparent 5px),
    radial-gradient(circle at 96% 70%, #8fb6f2 0 4px, transparent 5px);
}
.pagehero .inner { position: relative; max-width: 40rem; }
.pagehero .eyebrow { color: var(--sun); }
.pagehero h1 {
  color: var(--on-dark);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(34px, 4.5vw, 48px);
}
.pagehero .sub { color: rgba(255, 255, 255, 0.74); }

.article h2 { letter-spacing: -0.02em; color: var(--ink); font-weight: 600; }
.article h3 { font-weight: 600; color: var(--ink); }
.article p, .article li { color: var(--charcoal); }
.article a:not(.btn) { color: var(--link-blue); }
.article a:not(.btn):hover { color: var(--link-blue-pressed); }
.article .mono { background: var(--surface); border-color: var(--hairline); border-radius: var(--r-md); color: var(--ink); font-family: var(--sans); }

.tldr { background: var(--card-tint-yellow); border: 0; border-left: 0; border-radius: var(--r-lg); color: var(--charcoal); }
.tldr b { color: var(--charcoal); }

.formats b { color: var(--ink); }
.formats span { color: var(--primary); font-family: var(--sans); }
.formats div { border-bottom-color: var(--hairline); }
.shead { color: var(--primary); font-weight: 600; }
.sources .sicon { fill: var(--steel); }
.sourcebox, .options > div, .shotpanel, .calc, .crosslinks a { background: var(--canvas); }
.checklist .tick, .options .tick { background: var(--tag-green-bg); color: var(--tag-green-ink); }
.options .fit { border-top-color: var(--hairline); color: var(--steel); }
.shotpanel img { border-color: var(--hairline); border-radius: var(--r-lg); background: var(--surface); }
.shotpanel figcaption, .footnote { color: var(--steel); font-family: var(--sans); }
.shotpanel figcaption a { color: var(--link-blue); }

.figures { border-color: var(--hairline); }
.figures b, .calc .out b { color: var(--primary); }
.figures span, .calc .out span { color: var(--slate); }
.tablewrap { border-color: var(--hairline); border-radius: var(--r-lg); }
th, td { border-bottom-color: var(--hairline); color: var(--slate); }
thead th { background: var(--surface); color: var(--slate); letter-spacing: 0; text-transform: none; font-size: 14px; }
thead th:last-child { background: var(--primary); color: var(--on-primary); }
td:last-child { background: var(--surface-soft); color: var(--ink); }
tbody th { color: var(--charcoal); }

.faq details { border-bottom-color: var(--hairline); }
.faq summary { font-weight: 600; }
.faq summary::after { color: var(--primary); }
.faq details p { color: var(--slate); }

.ctapanel {
  background: var(--brand-navy);
  color: var(--on-dark);
  border: 0;
  border-radius: var(--r-xl);
}
.ctapanel h2 { color: var(--on-dark); }
.ctapanel p, .ctapanel .alt { color: rgba(255, 255, 255, 0.74); }
.ctapanel .alt a { color: var(--on-dark); }
.ctapanel .btn { background: var(--on-dark); color: var(--primary); border-color: var(--on-dark); }
.ctapanel .btn:hover { background: var(--surface); color: var(--primary); }
.ctapanel .btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, 0.35); }
.ctapanel .btn-ghost:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.crosslinks a:hover { border-color: var(--primary); }
.crosslinks b { color: var(--ink); }
.crosslinks span { color: var(--slate); }

.calc { border-color: var(--hairline); }
.calc label { color: var(--slate); letter-spacing: 0; }
.calc input {
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--sans);
}
.calc input:focus { outline: 2px solid var(--primary); border-color: transparent; }
.calc .out { border-top-color: var(--hairline); }

/* ---------- status notes inside the form ---------- */
.form .ts-note { color: var(--charcoal); }

/* ---------- mobile ---------- */
@media (max-width: 1080px) {
  footer .wrap { grid-template-columns: 1fr 1fr; }
  /* Stacked heroes stay left-aligned and full width, matching the homepage
     and the industry pages. Centering only .herocol put solutions, the
     receptionist and managed services in the middle of the band. */
}

@media (max-width: 860px) {
  .head .wrap { height: 64px; }
  .burger { display: grid; color: var(--on-dark); border-color: rgba(255, 255, 255, 0.28); }
  .head .right { display: none; }
  .head nav {
    top: 64px;
    background: var(--brand-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
  }
  .head nav > a { color: var(--on-dark); border-top-color: rgba(255, 255, 255, 0.12); }
  .menu { border-top-color: rgba(255, 255, 255, 0.12); height: auto; }
  .mtrig { color: var(--on-dark); }
  .ditem { border-left-color: rgba(255, 255, 255, 0.22); }
  .head nav .ditem b { color: var(--on-dark); }
  .head nav .dfoot, .head nav a.dfoot { color: var(--sun); }
  .head .telrow { border-top-color: rgba(255, 255, 255, 0.12); }
  .head .telrow .btn { background: var(--on-dark); color: var(--primary); border-color: var(--on-dark); }
  footer .wrap { grid-template-columns: 1fr; }

  .hero h1 { font-size: 36px; }
  .hero .cta { align-items: flex-start; }
  .btn-xl { width: auto; }
  #demo .cta {
    align-items: stretch;
    flex-direction: column;
  }
  #demo .callpair { width: 100%; }
  #demo .callpair .callface { flex: 1 1 auto; justify-content: center; }
  .demostrip .proof { grid-template-columns: repeat(3, 1fr); }
  .hero .proof div:nth-child(3) { border-top-color: rgba(255, 255, 255, 0.14); }

  .pagehero { margin-left: -26px; margin-right: -26px; padding: 36px 22px; border-radius: var(--r-lg); }
  .hstep + .hstep, .hubgrid .hstep + .hstep { border-left: 0; border-top: 0; padding-left: 26px; }
  .figs { grid-template-columns: 1fr; }
  .fig,
  .fig + .fig {
    padding: 26px 24px;
    border-left: 0;
  }
  .fig + .fig { border-top: 1px solid var(--hairline); }
  .sechead h2, .darkband h2, .bookband h2, .paraband h2, .answersec .bandhead h2 { font-size: 32px; }
}

@media (max-width: 560px) {
  .hero h1, #demo h1 { font-size: 34px; }
  #demo .callpair { width: 100%; }
  .demostrip .proof,
  .demostrip .proof div:nth-child(3) {
    grid-template-columns: 1fr;
    grid-column: auto;
    border-left: 0;
  }
  .demostrip .proof div,
  .demostrip .proof div + div {
    border-left: 0;
    padding: 14px 0 0;
    margin-top: 0;
  }
  .demostrip .proof div + div { border-top: 1px solid var(--hairline); margin-top: 14px; }
  .pagehero { margin-left: -20px; margin-right: -20px; }
  main.wrap { padding-left: 20px; padding-right: 20px; }
}

/* Answer-ready blocks sit in their own section under the hero. Yellow is only
   the heading strip. The definition and the cards sit on white. */
.answersec .sechead { grid-template-columns: 1fr; }
.answersec .sechead h2 {
  margin-top: 0;
  max-width: 28ch;
  color: var(--ink);
}
.answersec .bandhead .wrap { padding-top: 40px; padding-bottom: 40px; }
.answersec > .wrap { padding-top: 32px; padding-bottom: 48px; }
.answerblock { margin: 0; max-width: none; }
.answerblock > p { max-width: 68ch; }
.answerblock h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 28px 0 14px;
  color: var(--ink);
}
.answerblock h3:first-child { margin-top: 0; }
.answerblock p { color: var(--slate); font-size: 16px; line-height: 1.6; margin: 0; }
.answerblock p + p { margin-top: 10px; }
.glance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.glance li {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.glance a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.glance a:hover { color: var(--primary); }
.tasklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: task;
  max-width: 760px;
}
.tasklist li {
  counter-increment: task;
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px 18px 16px 52px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}
.tasklist li::before {
  content: counter(task);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 24px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: var(--primary);
  text-align: center;
}

/* Comparison tables. The table scrolls inside the page instead of widening
   it. Last-column highlight is turned off here so no vendor is painted as
   the winner. */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 22px 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.tablewrap table { width: 100%; border-collapse: collapse; min-width: 760px; }
.tablewrap th, .tablewrap td {
  padding: 12px 14px;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.45;
  vertical-align: top;
}
.tablewrap.compare thead th:last-child,
.tablewrap.compare td:last-child {
  background: transparent;
  color: var(--charcoal);
}
.tablewrap.compare thead th:last-child { background: var(--surface); color: var(--slate); }
.tablescrollhint { display: none; margin: 0; font-size: 13px; color: var(--slate); }
.asof { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--steel); }
.asof a { color: var(--link-blue); text-decoration: underline; }
@media (max-width: 800px) {
  .tablescrollhint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Restaurant page (FM-REST-1). Stacked paragraphs in a section head,
   the restaurant card tint, and grids that hold 9 or 4 cards. */
.sechead p.more { margin-top: 14px; }
.lawgrid .lawcard.tint-cream { background: var(--card-tint-cream); }
@media (min-width: 1081px) {
  .lawgrid.trades:has(> .lawcard:nth-child(9)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lawgrid.quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile submenu panels sit on the navy header. The desktop .drop fill
   and .ditem hover would paint white behind the light link text. */
@media (max-width: 860px) {
  .drop,
  .menu:hover .drop,
  .menu.open .drop,
  .menu:focus-within .drop {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .ditem:hover,
  .ditem:focus,
  .ditem:active,
  .ditem:focus-visible {
    background: rgba(255, 255, 255, 0.06);
  }
  .head nav .ditem,
  .head nav .ditem:hover,
  .head nav .ditem:focus,
  .head nav .ditem:active,
  .head nav .ditem b,
  .head nav .ditem:hover b,
  .head nav .ditem:focus b,
  .head nav .ditem:active b,
  .head nav .ditem span,
  .head nav .ditem:hover span,
  .head nav .ditem:focus span,
  .head nav .ditem:active span {
    color: var(--on-dark);
  }
  .head nav .dfoot,
  .head nav a.dfoot,
  .head nav .dfoot:hover,
  .head nav a.dfoot:hover {
    color: var(--sun);
  }
}

/* Header phone (FM-WA-28). Desktop: number beside Book a walkthrough.
   Mobile: a 44px phone button beside the menu toggle, and the number in the menu panel. */
.head .hdtel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.head .hdtel svg { flex: none; opacity: 0.85; }
.head .hdtel:hover span { text-decoration: underline; text-underline-offset: 3px; }
.head .hdtel-m { display: none; }
@media (max-width: 860px) {
  .head .hdtel-m {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-md);
    color: var(--on-dark);
  }
  .head .hdtel-m + .burger { margin-left: 0; }
  .head .telrow .tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--on-dark);
    font-weight: 600;
    white-space: nowrap;
  }
}
@media (max-width: 860px) {
  /* site.css hides .telrow after its own media query turns it on, so the
     menu panel never showed it. Turn it on here so the number is readable. */
  .head .telrow { display: flex; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  /* Not enough room for the digits beside the nav: icon button instead. */
  .head .right { gap: 12px; }
  .head .wrap { gap: 20px; }
  .head nav { gap: 14px; margin-left: 0; }
  .head .hdtel {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-md);
  }
  .head .hdtel span { display: none; }
  .head .hdtel svg { width: 20px; height: 20px; }
}

/* FM-WA-28b: homepage stats strip, balanced spacing now that the demo strip is gone */
.demostrip .wrap { padding-top: 28px; padding-bottom: 28px; }
.demostrip .proof { margin-top: 0; }
.demostrip .proof div { padding-top: 0; }
@media (max-width: 560px) {
  .demostrip .proof div:first-child { padding-top: 0; }
  .demostrip .proof div + div { padding-top: 14px; }
}

/* FM-WA-29: demo scenario line next to the Ava demo button */
.demonote { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }
.hero .demonote { color: rgba(255, 255, 255, 0.74); }
.ctapanel .demonote { position: relative; margin-top: 16px; }

/* FM-WA-37: /receptionist-cost on the industry-page layout */
.costpage .costcta-box { padding: 24px 26px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas); }
.costpage .costcta { color: var(--primary); font-size: 22px; line-height: 1.35; margin: 0 0 12px; }
.costpage a.costpdf { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.costpage .copylink { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.costpage .copylabel { color: var(--slate); font-size: 14px; }
.costpage .copylink code { font-family: var(--sans); font-size: 14px; color: var(--charcoal); background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; max-width: 100%; user-select: all; }
.costpage .copybtn { min-height: 44px; }
.costpage .copystatus { color: var(--slate); font-size: 14px; }
.costpage .costsummary { max-width: 80ch; margin-top: 24px; color: var(--charcoal); font-size: 16px; line-height: 1.65; }
.costpage .tablecap { color: var(--slate); font-size: 14px; margin: 0 0 -8px; }
.costpage .costnote, .costpage .notquote { color: var(--slate); font-size: 14px; line-height: 1.55; max-width: 90ch; }
.costpage .notquote b { color: var(--primary); }
.costpage .prose { max-width: 80ch; color: var(--charcoal); font-size: 16px; line-height: 1.65; }
.costpage .prose h3 { color: var(--primary); font-size: 20px; margin: 32px 0 10px; }
.costpage .prose li { margin-bottom: 10px; }
.costpage .costsources li { margin-bottom: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.costpage .costsources a, .costpage .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.costpage tr.rowstrong th, .costpage tr.rowstrong td { font-weight: 600; color: var(--primary); }
.costpage .tablewrap thead th,
.costpage .tablewrap thead th:last-child { background: var(--surface); color: var(--slate); }
.costpage .tablewrap td:last-child { background: transparent; color: var(--charcoal); }
.costpage .tablewrap tr.rowstrong td:last-child { color: var(--primary); }
@media (max-width: 760px) { .costpage .costcta { font-size: 19px; } }

/* FM-WA-38: homepage floating savings card (WebsiteDesign concept 5), pulled higher per captain */
.hero.hero-float { padding-bottom: 110px; }
.savecard { display: flow-root; position: relative; z-index: 2; background: var(--surface); padding: 0 24px 40px; }
.savecard .card { position: relative; margin: -110px auto 0; max-width: 1080px; background: var(--canvas); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(7, 15, 36, 0.55); padding: 40px 44px 32px; border-top: 5px solid var(--sun); }
.savecard .line { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; letter-spacing: -0.02em; color: var(--primary); margin: 0 0 28px; max-width: 820px; }
.savecard .pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); margin-bottom: 28px; }
.savecard .pts div { padding: 22px 20px 0 0; }
.savecard .pts div + div { padding-left: 20px; border-left: 1px solid var(--hairline); }
.savecard .pts b { display: block; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--primary); letter-spacing: -0.03em; margin-bottom: 8px; }
.savecard .pts span { font-size: 14px; line-height: 1.45; color: var(--slate); }
.savecard a.btn-card { display: inline-block; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 15px; padding: 14px 22px; border-radius: 8px; text-decoration: none; }
.savecard a.btn-card:hover { background: var(--brand-navy-mid); }
.savecard .fn { margin: 18px 0 0; font-size: 13px; line-height: 1.4; color: var(--slate); }
@media (max-width: 760px) {
  .hero.hero-float { padding-bottom: 90px; }
  .savecard { padding: 0 16px 32px; }
  .savecard .card { margin-top: -90px; padding: 28px 22px 24px; }
  .savecard .pts { grid-template-columns: 1fr; }
  .savecard .pts div { padding: 16px 0; }
  .savecard .pts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
}
/* FM-WA-38: 360px overflow in "How we work" rows; let grid children shrink */
.srow > * { min-width: 0; }
@media (max-width: 400px) { .flowviz { grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr); } .flowviz .node { min-width: 0; overflow-wrap: break-word; } }