/* ==========================================================================
   Statehouse — the marketing site for the US CRM.

   Same design language as foundationbuilds.com (deep ink, copper, a Grotesk
   display face over a mono overline) because it is the same studio and the
   two should look related. Not the same stylesheet: that one is a studio
   site with a device stage and eleven sector bands, and inheriting its
   classes to build a product page means carrying rules for sections that
   will never exist here.
   ========================================================================== */

:root {
  --ink:        #08150F;
  --ink-2:      #0C1D14;
  --green:      #12291F;
  --green-mid:  #1B3527;
  --green-line: #24402F;

  --copper:     #E2A75E;
  --copper-mid: #B87333;
  --gold:       #F2C186;
  --glow:       rgba(226, 167, 94, 0.28);

  --cream:      #F7F4EE;
  --white:      #FFFFFF;

  --text:       #12291F;
  --text-muted: #4A564E;
  --text-soft:  #6E7A70;
  --on-dark:    #F7F4EE;
  --muted-dark: #9DAEA3;

  --rule:       #E5DFD2;
  --rule-dark:  rgba(247, 244, 238, 0.12);

  --shell:      1200px;
  --gutter:     clamp(20px, 5vw, 56px);
  /* Tightened from clamp(72px,10vh,128px). The page was 9,970px at 1440 and
     the bands were doing a lot of that on their own: ten of them, each paying
     the padding twice. Nothing here is about making sections feel cramped,
     it is about a reader reaching the pricing without four scroll gestures
     of nothing. */
  --band-y:     clamp(64px, 8vh, 104px);

  --display: 'Space Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --sans:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `height: auto` is load-bearing, not tidying. Every <img> here carries width
   and height attributes so the browser can reserve the right box before the
   file arrives; without this line those attributes are applied as a literal
   CSS height, so a 1440x900 screenshot in a 335px column renders 335x900 and
   the whole UI is crushed sideways. With it, the attributes do their real job
   (an aspect ratio, so nothing jumps on load) and the image scales. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

/* A very fine noise so the dark bands are not flat plastic. */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- type ---------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(40px, 4.9vw, 62px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; }
h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.24; }
p  { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--copper); margin: 0 0 18px;
}
.lede { font-size: clamp(18px, 2.1vw, 21px); color: var(--muted-dark); max-width: 62ch; }
.on-cream .lede { color: var(--text-muted); }
.small { font-size: 14.5px; color: var(--muted-dark); }
.on-cream .small { color: var(--text-soft); }

/* ---------- header -------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 21, 15, .82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule-dark);
}
/* Once the page has scrolled the header is over content rather than over the
   top of the hero, and a translucent bar with nothing under it reads as
   floating. The rule firms up and a copper progress line shows how much of
   the page is left, which on a page this long is worth knowing. */
.site-head.stuck { border-bottom-color: rgba(247, 244, 238, .22); }
.site-head .progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--scrolled, 0%); background: var(--copper);
  transition: width .1s linear; pointer-events: none;
}

/* B9: the chevron turns rather than swapping a plus for a minus. */
.faq summary::after { transition: transform .22s var(--ease); }
.head-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.brandmark { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brandmark svg { width: 30px; height: 30px; color: var(--copper); flex: none; }
.brandmark .word {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: .06em;
}
.brandmark .suffix {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); margin-top: 2px;
}
.nav { display: flex; gap: 26px; }
.nav a {
  font-size: 15px; color: rgba(247, 244, 238, .8); text-decoration: none;
  transition: color .18s var(--ease);
}
.nav a:hover { color: var(--on-dark); }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 2px; text-decoration: none;
  font-size: 15px; font-weight: 500;
  background: var(--copper); color: var(--ink);
  border: 1px solid var(--copper);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px var(--glow); background: var(--gold); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--on-dark); border-color: var(--rule-dark); }
.btn.ghost:hover { background: rgba(247,244,238,.06); box-shadow: none; border-color: var(--copper); }
.on-cream .btn.ghost { color: var(--text); border-color: var(--rule-warm, #D6CEC0); }

.burger { display: none; }
/* Hidden by default at every width. It only ever had a display rule inside
   the mobile query, so above that breakpoint nothing hid it and it rendered
   as a stray row of links under the header. */
.drawer { display: none; }

/* ---------- bands --------------------------------------------------------- */
.band { padding: var(--band-y) 0; position: relative; }
.band.on-cream { background: var(--cream); color: var(--text); }
.band.on-cream h1, .band.on-cream h2, .band.on-cream h3 { color: var(--text); }
.band.on-green { background: var(--green); }
.band-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }

/* ---------- hero ---------------------------------------------------------- */
.hero { padding: clamp(64px, 9vh, 120px) 0 clamp(48px, 7vh, 88px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 span { color: var(--copper); }
.hero .lede { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 20px; font-size: 14px; color: var(--muted-dark); }
.hero-note b { color: var(--on-dark); font-weight: 500; }

/* The screenshot, on a plate rather than a fake laptop: the product is the
   thing being sold, and a drawn bezel around it only costs it pixels. */
.plate {
  position: relative; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--rule-dark);
  box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 2px 0 rgba(247,244,238,.06) inset;
  background: var(--ink-2);
}
.plate img { width: 100%; }
.plate .bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid var(--rule-dark); background: rgba(255,255,255,.03);
}
.plate .bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(247,244,238,.2); }
.plate .bar span {
  margin-left: 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; color: var(--muted-dark);
}

/* ---------- the numbers strip -------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-dark); }
.stats div { background: var(--ink); padding: 26px 22px; }
.on-cream .stats { background: var(--rule); }
.on-cream .stats div { background: var(--cream); }
.stats b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--copper);
}
.stats span {
  display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted-dark); line-height: 1.45;
}
.on-cream .stats span { color: var(--text-soft); }

/* ---------- feature grid -------------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--rule); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two   { grid-template-columns: repeat(2, 1fr); }
.grid > article { background: var(--cream); padding: clamp(26px, 3vw, 38px); }
.band:not(.on-cream) .grid { background: var(--rule-dark); }
.band:not(.on-cream) .grid > article { background: var(--ink); }
.grid h3 { margin-bottom: 12px; }
.grid p { color: var(--text-muted); font-size: 15.5px; margin: 0; }
.band:not(.on-cream) .grid p { color: var(--muted-dark); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--copper-mid);
  margin-bottom: 14px;
}
.band:not(.on-cream) .tag { color: var(--copper); }

/* ---------- screenshot tour ---------------------------------------------- */
.tour { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.tour-nav { display: flex; flex-direction: column; gap: 2px; }
.tour-nav button {
  appearance: none; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-left: 2px solid var(--rule);
  padding: 14px 18px; color: var(--text-soft);
  font-family: var(--sans); font-size: 15.5px; line-height: 1.4;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.tour-nav button b { display: block; font-weight: 500; color: var(--text); }
.tour-nav button span { display: block; font-size: 13.5px; margin-top: 3px; }
.tour-nav button:hover { background: rgba(18,41,31,.045); }
.tour-nav button[aria-selected="true"] { border-left-color: var(--copper-mid); background: rgba(226,167,94,.14); }
.tour-nav button[aria-selected="true"] b { color: var(--copper-mid); }
.tour-panel { display: none; }
.tour-panel[data-on="1"] { display: block; }

/* ---------- state list ---------------------------------------------------- */
/* ---------- the states grid ------------------------------------------------
   This was 51 decorative <span>s. It is the single most differentiating thing
   on the page — the whole pitch is that the product knows what your state
   requires — so it now answers the question it was only claiming.

   Buttons, not spans, so it is reachable by keyboard and announced as
   interactive. The facts come from assets/js/site.js, exported from the same
   `us_states.py` table the product resolves at runtime, so the page cannot
   drift from the product by being edited on its own.
   -------------------------------------------------------------------------- */
.states-hint {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper-mid); margin: 0 0 16px;
}
.hint-tap { display: none; }

.states-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(20px, 3vw, 40px); align-items: start;
}
.states { display: flex; flex-wrap: wrap; gap: 6px; }
.states button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  padding: 7px 10px; border: 1px solid var(--rule); color: var(--text-soft);
  background: var(--white); cursor: pointer; border-radius: 2px;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.states button:hover { border-color: var(--copper-mid); color: var(--copper-mid); }
.states button.on {
  border-color: var(--copper-mid); color: var(--white);
  background: var(--copper-mid);
}
.states button:focus-visible {
  outline: 2px solid var(--copper-mid); outline-offset: 2px;
}

.state-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 2px;
  padding: 22px 24px; position: sticky; top: 96px;
}
.state-card h3 { font-size: 21px; margin-bottom: 4px; }
.state-card .code {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper-mid);
}
.state-card dl { margin: 18px 0 0; }
.state-card dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-soft); margin-top: 14px;
}
.state-card dt:first-child { margin-top: 0; }
.state-card dd {
  margin: 3px 0 0; font-size: 14.5px; color: var(--text); line-height: 1.45;
}
.state-card .note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--text-soft);
}

@media (max-width: 860px) {
  /* The card goes under the grid rather than beside it, and stops sticking:
     a sticky card in a single column follows you past the thing it describes. */
  .states-wrap { grid-template-columns: 1fr; }
  .state-card { position: static; }
}
@media (pointer: coarse) {
  .hint-hover { display: none; }
  .hint-tap { display: inline; }
}

/* ---------- pricing ------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-dark); }
.plans > article { background: var(--ink); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; }
.plans > article.feature { background: var(--green); outline: 1px solid var(--copper); outline-offset: -1px; }
.plan-name { font-family: var(--display); font-size: 20px; font-weight: 500; }
.plan-who { font-size: 14px; color: var(--muted-dark); margin: 8px 0 22px; min-height: 42px; }
.price { display: flex; align-items: baseline; gap: 7px; }
.price b { font-family: var(--display); font-weight: 500; font-size: 46px; line-height: 1; }
.price span { font-size: 14px; color: var(--muted-dark); }
.price-note { font-size: 13px; color: var(--copper); margin-top: 10px; min-height: 20px; }
.plans ul { list-style: none; margin: 26px 0 30px; padding: 0; }
.plans li {
  position: relative; padding: 9px 0 9px 26px; font-size: 15px;
  color: var(--on-dark); border-top: 1px solid var(--rule-dark);
}
.plans li:first-child { border-top: 0; }
.plans li::before {
  content: ""; position: absolute; left: 2px; top: 17px; width: 9px; height: 5px;
  border-left: 1.5px solid var(--copper); border-bottom: 1.5px solid var(--copper);
  transform: rotate(-45deg);
}
.plans li.off { color: var(--muted-dark); }
.plans li.off::before { border-color: var(--muted-dark); opacity: .4; }
.plans .btn { margin-top: auto; justify-content: center; }

.offer {
  margin-top: 40px; padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--copper); background: rgba(226,167,94,.06);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
}
.offer h3 { margin-bottom: 12px; }
.offer .maths { font-family: var(--mono); font-size: 13.5px; line-height: 2; color: var(--muted-dark); }
.offer .maths b { color: var(--copper); font-weight: 400; }
.offer .maths .rule { display: block; border-top: 1px solid var(--rule-dark); margin: 8px 0; }

/* ---------- faq ----------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--display); font-size: clamp(17px, 1.8vw, 20px); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 10px; top: 30px;
  width: 9px; height: 9px; border-right: 1.5px solid var(--copper-mid);
  border-bottom: 1.5px solid var(--copper-mid);
  transform: rotate(45deg); transform-origin: 60% 60%;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { color: var(--text-muted); max-width: 76ch; padding-right: 40px; }

/* ---------- footer -------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--rule-dark); padding: 56px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--copper); margin: 0 0 16px; font-weight: 400;
}
.foot-grid a { display: block; font-size: 14.5px; color: var(--muted-dark); text-decoration: none; padding: 5px 0; }
.foot-grid a:hover { color: var(--on-dark); }
.legal {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
  font-size: 13px; color: var(--muted-dark);
}

/* ---------- reveal -------------------------------------------------------- */
[data-r] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-r].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Tablet: the screenshot first. There is room for it above the fold and
     the product is the argument. Undone at phone width below, where there
     is not. */
  .hero-aside { order: -1; }
  .grid.three { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .tour { grid-template-columns: 1fr; }
  /* The seven tabs are 1,365px of content in a 375px viewport, and nothing
     said so: no cut-off tab, no shadow, no scrollbar on iOS. It looked like
     a four-tab product. Snap points make the scroll feel deliberate, the
     mask fades the right edge so there is visibly more, and the per-tab
     description moves out of the button (it is already repeated in full
     under each screenshot) so seven tabs are scannable rather than seven
     paragraphs laid end to end. */
  .tour-nav {
    flex-direction: row; overflow-x: auto; gap: 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
  }
  .tour-nav::-webkit-scrollbar { display: none; }
  .tour-nav button { scroll-snap-align: start; }
  .tour-nav button span { display: none; }
  .tour-nav button { border-left: 0; border-bottom: 2px solid var(--rule-dark); white-space: nowrap; min-width: 190px; }
  .tour-nav button[aria-selected="true"] { border-left-color: transparent; border-bottom-color: var(--copper); }
  .offer { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav { display: none; }
  /* The CTA stays. It used to be hidden here, which left the mobile header as
     a logo and a hamburger: no call to action anywhere on the first screen,
     on the devices most likely to be the first visit. The wordmark's second
     line goes instead, which nobody was reading at 9.5px. */
  .brandmark .suffix { display: none; }
  .head-inner .btn { padding: 9px 14px; font-size: 13.5px; }
  .head-inner .btn .arrow { display: none; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; border: 1px solid var(--rule-dark); background: transparent;
    border-radius: 2px; cursor: pointer; padding: 0 11px;
  }
  .burger i { display: block; height: 1.5px; background: var(--on-dark); transition: transform .22s var(--ease); }
  .drawer {
    position: fixed; inset: 72px 0 auto; background: var(--ink);
    border-bottom: 1px solid var(--rule-dark); z-index: 55;
    display: none; flex-direction: column; padding: 8px var(--gutter) 24px;
  }
  .drawer.open { display: flex; }
  .drawer a { padding: 14px 0; border-bottom: 1px solid var(--rule-dark); text-decoration: none; font-size: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid.three, .grid.two { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Long-form documents: privacy, terms, fair housing.

   Cream rather than the ink used everywhere else. The marketing page is a
   sequence of short bands you scan; these are pages somebody has to actually
   read, sometimes because a regulator or a lawyer told them to, and light
   text on a dark ground at that length is tiring. The measure is capped for
   the same reason.

   49ch, not the 72ch you would reach for. The `ch` unit is the advance width
   of "0", which in Instrument Sans is 11.32px where the average character in
   running prose measures 7.68px. So 72ch rendered a 106-character line,
   nearly half again over the 65 to 75 that is comfortable. Measured in the
   browser rather than assumed; if the typeface changes, measure it again
   rather than trusting this number.
   ========================================================================== */
.doc {
  background: var(--cream); color: var(--text);
  padding: clamp(44px, 6vh, 76px) 0 var(--band-y);
}
/* The column is 720px; running prose is held to 49ch inside it. Tables and
   the contents list are scanned rather than read and get the full column,
   and the rules above each h2 span it too, so the page still reads as one
   document rather than two of different widths. */
.doc .shell > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.doc-head .lede,
.doc-body > p,
.doc-body > ul,
.doc-body > ol,
.doc-body > h3 { max-width: 49ch; }
.doc-note { max-width: calc(49ch + 50px); }

.doc-head { margin-bottom: clamp(30px, 4.5vh, 50px); }
.doc-head h1 { font-size: clamp(32px, 4.2vw, 50px); }
.doc-head .lede { color: var(--text-muted); margin-top: 20px; }
.doc-updated {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-soft);
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule);
}

.doc-body h2 {
  font-size: clamp(21px, 2.5vw, 28px);
  margin: 0 0 .55em; padding-top: 1.5em; margin-top: 1.7em;
  border-top: 1px solid var(--rule);
}
.doc-body > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.doc-body h3 { font-size: 17.5px; font-weight: 600; margin: 1.9em 0 .45em; }
.doc-body p, .doc-body li { color: var(--text-muted); }
.doc-body strong { color: var(--text); font-weight: 600; }
.doc-body a { color: var(--copper-mid); text-underline-offset: 3px; }
.doc-body a:hover { color: var(--text); }
.doc-body ul, .doc-body ol { margin: 0 0 1.25em; padding-left: 1.15em; }
.doc-body li { margin-bottom: .45em; }
.doc-body li::marker { color: var(--copper-mid); }

/* Sub-processors and protected classes are both tables. They are the two
   things on these pages somebody scans rather than reads, so they get to be
   tables and not prose. Wrapped in .doc-scroll so a narrow phone scrolls the
   table instead of the page. */
.doc-scroll { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.doc-body table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.doc-body th, .doc-body td {
  text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule); color: var(--text-muted);
}
.doc-body th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text); font-weight: 500;
  border-bottom-color: var(--text);
}

/* A pulled-aside point. Used sparingly: if everything is emphasised then the
   one clause somebody actually needs to see is not. */
.doc-note {
  background: var(--white); border: 1px solid var(--rule);
  border-left: 3px solid var(--copper-mid);
  padding: 20px 24px; margin: 1.6em 0 1.8em; border-radius: 2px;
}
.doc-note p:last-child { margin-bottom: 0; }
.doc-note h3 { margin-top: 0; }

.doc-toc {
  background: var(--white); border: 1px solid var(--rule);
  padding: 22px 26px; margin: 0 0 2.4em; border-radius: 2px;
}
.doc-toc h2 {
  border: 0; padding: 0; margin: 0 0 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-soft); font-weight: 500;
}
.doc-toc ol { margin: 0; padding-left: 1.15em; columns: 2; column-gap: 32px; }
.doc-toc li { margin-bottom: .3em; break-inside: avoid; }
.doc-toc a { color: var(--text-muted); text-decoration: none; }
.doc-toc a:hover { color: var(--copper-mid); text-decoration: underline; }

/* The Equal Housing Opportunity mark. Drawn rather than an image file so it
   inherits colour and stays crisp; HUD publishes the logo but not in a form
   that recolours cleanly against this palette. */
.eho { display: flex; align-items: center; gap: 16px; margin: 0 0 1.6em; }
.eho svg { width: 52px; height: 52px; flex: none; color: var(--text); }
.eho span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text); line-height: 1.7;
}

@media (max-width: 760px) {
  .doc-toc ol { columns: 1; }
}

/* A caption under a screenshot, where the band copy used to repeat it. */
.plate-caption {
  margin: 14px auto 0; max-width: 62ch; text-align: center;
  font-size: 13.5px; color: var(--muted-dark);
}

/* ---------- the hero on a phone ------------------------------------------
   At 375 the hero was 1,712px tall and the primary button sat at y≈1,576:
   two full screens below the fold, on a layout that also hid the header CTA.
   A visitor's first screen was a logo, a hamburger and a screenshot of a UI
   too small to read.

   So at phone width the order goes back to reading order (eyebrow, headline,
   one line of support, buttons) and the screenshot follows. The plate is
   capped and cropped from its top-left rather than scaled down whole: a
   1460px-wide CRM shrunk to fit 335px is not a smaller screenshot, it is a
   grey smudge, whereas its top-left corner still reads as software.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-aside { order: 0; margin-top: 28px; }
  .hero-grid { gap: 0; }
  .hero .lede { font-size: 17px; }
  .hero-aside .plate img {
    max-height: 46vh;
    object-fit: cover;
    object-position: top left;
  }
}

/* The equal-housing mark in the footer legal line. Small, drawn, and
   deliberately a link: the page it points at is the substantive one. */
.eho-inline { display: inline-flex; align-items: flex-start; gap: 9px; }
.eho-inline svg { width: 15px; height: 15px; flex: none; margin-top: 2px; opacity: .75; }
.eho-inline a { color: inherit; text-underline-offset: 3px; }
.eho-inline a:hover { color: var(--copper); }

/* ---------- the phone's persistent call to action -------------------------
   Desktop keeps the header CTA on screen at all times; a phone loses it the
   moment the hero scrolls. This replaces it, and only while it is useful:
   after 60% of the hero has gone, and not over the footer, which carries the
   same links already.
   -------------------------------------------------------------------------- */
.stickybar { display: none; }
@media (max-width: 720px) {
  .stickybar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 21, 15, .92);
    backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--rule-dark);
    transform: translateY(110%);
    transition: transform .26s var(--ease);
  }
  .stickybar.show { transform: translateY(0); }
  .stickybar .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .stickybar { transition: none; }
}

/* The demo band's screenshot is supporting evidence, not the hero: the tour
   above it already shows this screen full width. Capped so the band argues
   its point without paying a second full-bleed screenshot for it. */
#demo .plate { max-width: 860px; margin-left: auto; margin-right: auto; }
.band-head { margin-bottom: clamp(28px, 3.6vw, 48px); }

/* ---------- billing toggle -------------------------------------------------
   The annual figures are not a new offer: the Solo card already said "$590 a
   year, two months free", so ten months for twelve is the rule the page was
   already making. The toggle states it for all three rather than leaving two
   of them to be worked out.
   -------------------------------------------------------------------------- */
.billing-toggle {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 28px;
  background: rgba(247, 244, 238, .07); border: 1px solid var(--rule-dark);
  border-radius: 2px;
}
.billing-toggle button {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--sans); font-size: 14px; color: var(--muted-dark);
  background: transparent; border: 0; padding: 9px 18px; cursor: pointer;
  border-radius: 2px; transition: background .16s var(--ease), color .16s var(--ease);
}
.billing-toggle button:hover { color: var(--on-dark); }
.billing-toggle button.on { background: var(--copper); color: var(--ink); font-weight: 500; }
.billing-toggle .save {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .85;
}
.billing-toggle button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* Why the Team card is the outlined one, said rather than implied. */
.plan-name .pill {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--copper);
  border: 1px solid var(--copper); border-radius: 2px; padding: 3px 7px;
}

@media (max-width: 720px) {
  /* The launch-offer arithmetic is four label/figure pairs. Stacked, it reads
     as eight unrelated lines; as two columns it reads as a sum. */
  .offer .maths { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
  .offer .maths b { text-align: right; }
  .plan-name .pill { display: block; margin: 8px 0 0; width: fit-content; }
}

/* ---------- trust, without inventing anyone --------------------------------
   No testimonials: there are no customers to quote, and a fabricated one is
   the fastest way to lose a brokerage that checks. Four checkable facts.
   -------------------------------------------------------------------------- */
.trust { padding: clamp(40px, 5vh, 64px) 0; }
.trust-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.trust-who { font-size: 16.5px; color: var(--text-muted); margin: 0; max-width: 46ch; }
.trust-who b { color: var(--text); font-weight: 600; }
.trust-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trust-facts li {
  position: relative; padding-left: 24px; font-size: 15px; color: var(--text-muted);
}
.trust-facts li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 7px; height: 4px; border-left: 1.5px solid var(--copper-mid);
  border-bottom: 1.5px solid var(--copper-mid); transform: rotate(-45deg);
}
@media (max-width: 720px) { .trust-grid { grid-template-columns: 1fr; } }