/* /about, /referrals, /privacy, /terms, /blocked, from the knowledge base. Type sizes are the tokens.json roles, fluid from 375px to 1200px.
   Hero and close are centered orientation moments; sections are left-aligned, one column, open. */
.home-front .hf-about-col { max-width: 44rem; margin-inline: auto; }

.home-front .hf-about-hero {
  padding-block: clamp(64px, calc(64px + 0.09697 * (100vw - 375px)), 144px) clamp(48px, calc(48px + 0.05818 * (100vw - 375px)), 96px);
  border-bottom: 1px solid var(--hf-border); text-align: center;
}
/* /privacy, /terms: reading register (visual-grammar.md density modes), so content dominates, not the whitespace around it.
   The Spacious band stays with the mission-statement pages (/about, /referrals). Bands are the tokens: moderate = 48..96px,
   dense = 24..48px (tokens.css --space-section-*). The rule sits centred between the title block and the first line of the policy. */
.home-front .hf-about-hero-reading {
  padding-block: clamp(48px, calc(48px + 0.05818 * (100vw - 375px)), 96px) clamp(24px, calc(24px + 0.029091 * (100vw - 375px)), 48px);
}
/* Left-aligned like the policy below it: sustained reading needs one stable edge (visual-grammar.md, Alignment Grammar).
   Centred is for the Spacious orientation moments on /about and /referrals. */
.home-front .hf-about-hero-reading { text-align: left; }
.home-front .hf-about-hero-reading .hf-about-sub { margin-inline: 0; }
.home-front .hf-about-hero .hf-label { margin: 0; }
.home-front .hf-about-display {
  margin: var(--hf-space-16) 0 0; font-family: var(--hf-font-editorial); font-weight: 800; letter-spacing: -0.045em; line-height: 1.06; color: var(--hf-ink);
  font-size: clamp(34px, calc(34px + 0.01697 * (100vw - 375px)), 48px); text-wrap: balance;
}
.home-front .hf-about-display-lg { margin: 0; font-size: clamp(26px, calc(26px + 0.01697 * (100vw - 375px)), 40px); }
.home-front .hf-about-sub { margin: var(--hf-space-16) auto 0; max-width: 40ch; font-size: clamp(18px, calc(18px + 0.00242 * (100vw - 375px)), 20px); text-wrap: pretty; }

.home-front .hf-about-sec {
  padding-block: clamp(48px, calc(48px + 0.05818 * (100vw - 375px)), 96px);
  border-bottom: 1px solid var(--hf-border);
}
.home-front .hf-about-sec-last { border-bottom: 0; }
/* Proof/Context: a neutral cool surface, where color is the edge, so no border. */
.home-front .hf-about-sec-proof { background: var(--hf-surface-subtle); border-bottom: 0; }
.home-front .hf-about-block + .hf-about-block { margin-top: var(--hf-space-64); }
.home-front .hf-about-h2 {
  margin: 0; font-family: var(--hf-font-primary); font-weight: 700; line-height: 1.25; color: var(--hf-ink);
  font-size: clamp(24px, calc(24px + 0.0097 * (100vw - 375px)), 32px);
}
.home-front .hf-about-lead {
  margin: var(--hf-space-16) 0 0; font-weight: 400; line-height: 1.5; color: var(--hf-ink); text-wrap: pretty;
  font-size: clamp(18px, calc(18px + 0.00242 * (100vw - 375px)), 20px);
}
.home-front .hf-about-text,
.home-front .hf-about-steps p,
.home-front .hf-about-grid p,
.home-front .hf-about-proof p {
  font-weight: 400; line-height: 1.5; color: var(--hf-ink-a80); text-wrap: pretty;
  font-size: clamp(16px, calc(16px + 0.00121 * (100vw - 375px)), 17px);
}
.home-front .hf-about-text { margin: var(--hf-space-16) 0 0; }
.home-front .hf-about-h3 {
  margin: 0; font-family: var(--hf-font-primary); font-weight: 600; line-height: 1.25; color: var(--hf-ink);
  font-size: clamp(18px, calc(18px + 0.00242 * (100vw - 375px)), 20px);
}
.home-front .hf-about-steps p,
.home-front .hf-about-grid p,
.home-front .hf-about-proof p { margin: var(--hf-space-8) 0 0; }

.home-front .hf-about-steps { list-style: none; margin: var(--hf-space-32) 0 0; padding: 0; }
.home-front .hf-about-steps li { display: flex; gap: var(--hf-space-16); padding-block: var(--hf-space-24); border-top: 1px solid var(--hf-border); }
.home-front .hf-about-steps li:last-child { padding-bottom: 0; }
/* Plain numerals in the one micro-label voice. Pastel needs a job and order is already carried by position. */
.home-front .hf-about-n { flex: none; width: 16px; font-size: 12px; font-weight: 700; line-height: 25px; color: var(--hf-ink); }

.home-front .hf-about-grid { list-style: none; margin: var(--hf-space-32) 0 0; padding: 0; display: grid; column-gap: var(--hf-space-32); }
.home-front .hf-about-grid li { padding-block: var(--hf-space-24); border-top: 1px solid var(--hf-border); }
@media (min-width: 640px) {
  .home-front .hf-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* How we gather information: a plain list until about_steps_controller adds .is-pinned and the scene. Each step
   gets 60svh of scroll. Descriptions share one grid cell, sized by the tallest. Swap timing is the provisional D3:
   out 100ms, then in 150ms from 80ms, so two never overprint. */
.home-front .hf-about-sec-how { padding-block: var(--hf-space-32); border-bottom: 0; }
/* One height for the text column and the scene panel (--hf-sc-h), so neither stops short of the other. Proportions follow the Mews
   feature rows (measured on mews.com/en/solutions/general-managers): two near-equal columns with a 24px gap, a panel about 1.03:1,
   and a text block capped at about 29rem that fills roughly four-fifths of the column's height; the pair is centred in the window
   while pinned, and sits right under "Today" before that. */
.home-front .hf-about-track.is-pinned { --hf-sc-h: min(100svh, 520px, 62vw); position: relative; max-width: 1180px; height: 340svh; }
.home-front .hf-about-sec-how:has(.is-pinned) { padding-block: 0; overflow-x: clip; }
.home-front .is-pinned .hf-about-panel-pin {
  position: sticky; top: calc((100svh - var(--hf-sc-h)) / 2); height: var(--hf-sc-h); display: flex; flex-direction: column; justify-content: center;
  /* Two equal halves of one height, like the Mews feature rows: the text column centred against the scene panel beside it. */
  width: calc(50% - var(--hf-space-12)); z-index: 1;
}
.home-front .is-pinned .hf-about-panel-pin > * { max-width: 29rem; }
.home-front .is-pinned .hf-about-steps {
  margin-top: var(--hf-space-40, 40px); display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-auto-rows: min-content; gap: var(--hf-space-20);
}
.home-front .is-pinned .hf-about-steps li,
.home-front .is-pinned .hf-about-steps li > div { display: contents; }
.home-front .is-pinned .hf-about-n { grid-column: 1; }
.home-front .is-pinned .hf-about-h3 {
  grid-column: 2; color: var(--hf-ink-a70); text-decoration: underline 2px transparent; text-underline-offset: 6px;
  transition: color 100ms ease-in, text-decoration-color 100ms ease-in;
}
.home-front .is-pinned .is-active .hf-about-h3 {
  color: var(--hf-ink); text-decoration-color: currentColor;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}
.home-front .is-pinned .hf-about-steps p {
  grid-column: 1 / -1; grid-row: 5; margin: var(--hf-space-16) 0 0; opacity: 0; transition: opacity 100ms ease-in;
}
.home-front .is-pinned .is-active p { opacity: 1; transition: opacity 150ms ease-out 80ms; }

/* The scene. Decorative layer, aria-hidden, built by the controller. Pinned with its own sticky box. */
.home-front .hf-sc {
  position: absolute; top: 0; right: 0; width: calc(50% - var(--hf-space-12)); pointer-events: none;
  /* A near-square panel instead of a full-height strip (at most 520px tall, never taller than 62vw), and the scene is clipped to it:
     sheets slide in from behind its edges and never cross into the text column. The 16px matches the panel's inset below. */
  height: var(--hf-sc-h, min(100svh, 520px, 62vw)); clip-path: inset(var(--hf-space-16) 0 round var(--hf-radius-6));
}
.home-front .is-pinned .hf-sc { position: sticky; top: calc((100svh - var(--hf-sc-h)) / 2); float: right; margin-top: calc(var(--hf-sc-h) * -1); }
/* Butter panel: marks the scene as one bounded object beside the steps. Sheets may cross its edge as they arrive. */
.home-front .hf-sc::before { content: ""; position: absolute; inset: var(--hf-space-16) 0; border-radius: var(--hf-radius-6); background: var(--hf-surface-butter); }
.home-front .hf-sc-source {
  position: absolute; top: 12%; font-size: 12px; line-height: 1.25; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--hf-ink); opacity: 0;
}
.home-front .hf-sc-source[data-i="0"] { left: 6%; }
.home-front .hf-sc-source[data-i="1"] { left: 50%; top: auto; bottom: 10%; margin-left: -80px; }
.home-front .hf-sc-source[data-i="2"] { right: 6%; }
.home-front .hf-sc-sheet {
  position: absolute; left: 50%; top: 50%; width: 200px; height: 264px; margin: -132px 0 0 -100px; padding: 16px;
  background: var(--hf-white); border: 1px solid var(--hf-border-field, rgba(33, 33, 33, 0.5)); border-radius: var(--hf-radius-6); opacity: 0;
}
.home-front .hf-sc-sheet > p { margin: 0 0 12px; font-size: 12px; line-height: 1.25; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--hf-ink); }
.home-front .hf-sc-lines i, .home-front .hf-sc-row i { display: block; height: 6px; border-radius: 3px; background: var(--hf-ink-a10, rgba(33, 33, 33, 0.1)); }
.home-front .hf-sc-lines i { margin-bottom: 12px; }
.home-front .hf-sc-rows { display: flex; flex-direction: column; gap: 14px; }
.home-front .hf-sc-row { display: flex; align-items: center; gap: 8px; }
.home-front .hf-sc-row i { flex: 1; transition: background-color 150ms ease-out; }
.home-front .hf-sc-row b { flex: none; width: 14px; font-size: 12px; line-height: 1; font-weight: 700; text-align: center; color: var(--hf-ink); opacity: 0; }
.home-front .hf-sc-row.is-marked i { background: var(--hf-ink); }
.home-front .hf-sc-scan { position: absolute; left: 0; right: 0; top: 40px; height: 2px; background: var(--hf-accent); opacity: 0; }
.home-front .hf-sc-note {
  position: absolute; left: 0; right: 0; bottom: 8%; margin: 0; text-align: center; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--hf-ink); opacity: 0;
}
.home-front .hf-sc-card {
  position: absolute; left: 50%; top: 50%; width: min(420px, 88%); padding: 32px; border-radius: var(--hf-radius-6);
  background: var(--hf-white); opacity: 0; z-index: 20;
}
.home-front .hf-sc-card-label { margin: 0 0 16px; font-size: 12px; line-height: 1.25; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--hf-ink); }
.home-front .hf-sc-card-h { margin: 0 0 24px; font-family: var(--hf-font-editorial); font-weight: 800; font-size: 40px; line-height: 1.06; letter-spacing: -0.045em; color: var(--hf-ink); }
.home-front .hf-sc-card-h > span { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.home-front .hf-sc-card-h > span > span { display: inline-block; }
.home-front .hf-sc-card .hf-sc-lines i { background: rgba(33, 33, 33, 0.18); }
.home-front .hf-sc-card-meta { margin: 8px 0 0; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--hf-ink); }

/* Proof-point row: equal-weight claims, flat and imageless, no item outranking another (Mews Pattern 2).
   Grouped by a rule rather than boxed, because containment is earned (visual-direction.md section 8). */
.home-front .hf-about-proof { list-style: none; margin: var(--hf-space-16) 0 0; padding: 0; display: grid; gap: var(--hf-space-16); }
@media (min-width: 640px) { .home-front .hf-about-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-front .hf-about-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Closing ask: same ink as the footer with no seam, so no pastel here. */
.home-front .hf-about-end {
  background: var(--hf-ink); text-align: center;
  margin-top: var(--hf-space-48); padding-block: clamp(48px, calc(48px + 0.03879 * (100vw - 375px)), 80px) var(--hf-space-48);
}
.home-front .hf-about-end .hf-about-display { margin: 0 0 var(--hf-space-24); color: var(--hf-white); }

.home-front .hf-about-mail { font-weight: 600; color: var(--hf-link); }
.home-front .hf-about-mail:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Contextual pastel is always a bounded surface, never a full-bleed band (visual-grammar.md section 5). */
.home-front .hf-about-close-wrap { padding-bottom: clamp(48px, calc(48px + 0.05818 * (100vw - 375px)), 96px); }
.home-front .hf-about-close {
  display: flex; flex-direction: column; align-items: center; gap: var(--hf-space-24); text-align: center;
  padding: var(--hf-space-48) var(--hf-space-24); border-radius: var(--hf-radius-6); background: var(--hf-surface-blue);
}

.home-front .hf-about-text-first { margin-top: 0; }
.home-front .hf-about-text b, .home-front .hf-about-steps b { color: var(--hf-ink); font-weight: 600; }

/* /about: the story, in open typography with rules. One contextual pastel moment, the hero map panel
   (visual-direction.md section 10, "Pastel Is Contextual, Never Permanent"; docs/briefs/about-page-brief.md).
   Hues carry no city or status meaning. */
.home-front .hf-about.hf-story { padding-top: 0; }
.home-front { --hf-surface-butter: #fdf4cd; --hf-surface-peach: #fde0cd; --hf-surface-mint: #d1f9d6; --hf-surface-blush: #ffc5ee; }

/* Hero: an editorial split. Statement left (stable left edge), the city map right. Moderate band above, dense below. */
.home-front .hf-story-hero {
  display: grid; gap: var(--hf-space-32); align-items: center; text-align: left;
  padding-block: clamp(48px, calc(48px + 0.05818 * (100vw - 375px)), 96px) clamp(24px, calc(24px + 0.029091 * (100vw - 375px)), 48px);
}
.home-front .hf-story-hero-copy > * { margin: 0; }
.home-front .hf-story-hero .hf-about-display { margin-top: var(--hf-space-12); }
.home-front .hf-story-hero .hf-about-sub { margin: var(--hf-space-16) 0 0; max-width: 46ch; color: var(--hf-ink); }
.home-front .hf-story-hero-map { display: grid; place-items: center; padding: var(--hf-space-24); border-radius: var(--hf-radius-6); background: var(--hf-surface-blue); }
@media (min-width: 900px) {
  .home-front .hf-story-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--hf-space-48); }
}

.home-front .hf-story-card { padding: var(--hf-space-24); border-radius: var(--hf-radius-6); color: var(--hf-ink); }
.home-front .hf-story-card.is-subtle { background: var(--hf-surface-subtle); }
.home-front .hf-story-card .hf-label { margin: 0 0 var(--hf-space-12); }
.home-front .hf-story-card > p:not(.hf-label):not(.hf-about-lead) {
  margin: var(--hf-space-8) 0 0; font-weight: 400; line-height: 1.5; color: var(--hf-ink); text-wrap: pretty;
  font-size: clamp(16px, calc(16px + 0.00121 * (100vw - 375px)), 17px);
}
.home-front .hf-story-h {
  margin: 0; font-family: var(--hf-font-primary); font-weight: 600; line-height: 1.25; color: var(--hf-ink);
  font-size: clamp(18px, calc(18px + 0.00242 * (100vw - 375px)), 20px);
}

/* Beats and standards: equal-weight items grouped by an ink top rule, not boxed (same pattern as /support). */
.home-front .hf-story-beats { display: grid; gap: var(--hf-space-32); margin-top: var(--hf-space-32); }
.home-front .hf-story-beat, .home-front .hf-story-item { padding-top: var(--hf-space-16); border-top: 2px solid var(--hf-ink); }
.home-front .hf-story-beat .hf-label { margin: 0 0 var(--hf-space-12); }
.home-front .hf-story-beat p:not(.hf-label), .home-front .hf-story-item p {
  margin: var(--hf-space-8) 0 0; font-weight: 400; line-height: 1.5; color: var(--hf-ink); text-wrap: pretty;
  font-size: clamp(16px, calc(16px + 0.00121 * (100vw - 375px)), 17px);
}

/* Today: plain type and the city links; the map lives in the hero. */
.home-front .hf-story-todaywrap { margin-top: var(--hf-space-64); }
.home-front .hf-story-today .hf-label { margin: 0 0 var(--hf-space-12); }
.home-front .hf-story-today-text { margin: var(--hf-space-12) 0 0; max-width: 56ch; font-weight: 400; line-height: 1.5; font-size: clamp(16px, calc(16px + 0.00121 * (100vw - 375px)), 17px); }

/* Capped so the labels, which scale with the drawing, stay near body size on wide screens (about 17px) and about 11px on phones. */
.home-front .hf-story-map { display: block; width: 100%; max-width: 460px; height: auto; overflow: visible; }
.home-front .hf-story-arc { fill: none; stroke: var(--hf-ink); stroke-width: 1.5; stroke-opacity: 0.4; stroke-linecap: round; }
.home-front .hf-story-dot circle { fill: var(--hf-ink); }
.home-front .hf-story-origin circle { fill: var(--hf-accent); }
/* Sizes are map units, scaled with the drawing. The halo keeps a label readable where an arc passes behind it. */
.home-front .hf-story-map text {
  font-family: var(--hf-font-primary); font-size: 18px; font-weight: 500; fill: var(--hf-ink);
  paint-order: stroke; stroke: var(--hf-surface-blue); stroke-width: 5px; stroke-linejoin: round;
}
.home-front .hf-story-origin text { font-weight: 700; }

.home-front .hf-story-standards { margin-top: var(--hf-space-64); }
.home-front .hf-story-standards .hf-about-proof { gap: var(--hf-space-32) var(--hf-space-24); margin-top: var(--hf-space-32); }
.home-front .hf-story-more { margin: var(--hf-space-32) 0 0; }
.home-front .hf-story-cover { display: grid; gap: var(--hf-space-16); margin-top: var(--hf-space-64); }
.home-front .hf-story-mail { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .home-front .hf-story-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-space-24); }
  .home-front .hf-story-cover { grid-template-columns: 2fr 1fr; }
}

/* Motion (txlw-motion): the reach is drawn once on load, from Farmersville outward, then the cities appear and the origin
   pulses once. Purpose: relationship ("it started here, now it reaches 10 cities"). No loop, not scroll-linked, and static
   under prefers-reduced-motion. Timings are provisional pattern timing, not tokens. */
@media (prefers-reduced-motion: no-preference) {
  .home-front .hf-story-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hf-story-reach .9s cubic-bezier(.45, .05, .25, 1) .3s forwards; }
  .home-front .hf-story-dot { opacity: 0; animation: hf-story-appear .4s ease-out .9s forwards; }
  .home-front .hf-story-pulse { transform-box: fill-box; transform-origin: center; animation: hf-story-pulse 1.2s ease-out .2s 1 both; }
}
@keyframes hf-story-pulse { from { transform: scale(1); opacity: 0.45; } 70%, to { transform: scale(2.6); opacity: 0; } }
@keyframes hf-story-reach { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hf-story-appear { from { opacity: 0; } to { opacity: 1; } }

/* /referrals */
.home-front .hf-about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hf-space-12); margin-top: var(--hf-space-24); }
.home-front .hf-btn.hf-btn-ink { background: var(--hf-ink); }
.home-front .hf-btn.hf-btn-ink:hover { background: #3a3a3a; }
.home-front .hf-about-panel {
  margin-top: var(--hf-space-24); padding: var(--hf-space-24); border-radius: var(--hf-radius-6); background: var(--hf-surface-blue); color: var(--hf-ink);
  font-weight: 400; line-height: 1.5; font-size: clamp(16px, calc(16px + 0.00121 * (100vw - 375px)), 17px);
}
.home-front .hf-about-panel p { margin: 0; }
.home-front .hf-about-panel ul { margin: var(--hf-space-12) 0 0; padding-left: 1.25em; list-style: disc; }
.home-front .hf-about-panel li + li { margin-top: var(--hf-space-8); }
.home-front .hf-about-panel b { font-weight: 600; }
.home-front .hf-about-panel .hf-about-panel-note { margin-top: var(--hf-space-12); font-size: 13px; font-weight: 500; }

/* /privacy, /terms: sustained reading, so body-reading rather than body-ui. */
.home-front .hf-legal-sec { padding-block: clamp(48px, calc(48px + 0.05818 * (100vw - 375px)), 96px); }
.home-front .hf-legal {
  max-width: 44rem; margin-inline: auto; font-weight: 400; line-height: 1.625; color: var(--hf-ink-a80);
  font-size: clamp(17px, calc(17px + 0.00121 * (100vw - 375px)), 18px);
}
.home-front .hf-legal-sec-reading { padding-top: clamp(24px, calc(24px + 0.029091 * (100vw - 375px)), 48px); }
/* a page with no "Last Updated" line starts straight into its first section: no second 48px on top of the band */
.home-front .hf-legal-sec-reading .hf-legal > section:first-child { margin-top: 0; }
/* higher specificity than `.hf-legal p`, so the first line sits exactly one band below the rule */
.home-front .hf-legal .hf-legal-updated { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--hf-ink-a70); }
.home-front .hf-legal section { margin-top: var(--hf-space-48); }
.home-front .hf-legal h2 {
  margin: 0 0 var(--hf-space-16); font-family: var(--hf-font-primary); font-weight: 700; line-height: 1.25; color: var(--hf-ink);
  font-size: clamp(24px, calc(24px + 0.0097 * (100vw - 375px)), 32px);
}
.home-front .hf-legal h3 {
  margin: var(--hf-space-24) 0 var(--hf-space-8); font-family: var(--hf-font-primary); font-weight: 600; line-height: 1.25; color: var(--hf-ink);
  font-size: clamp(18px, calc(18px + 0.00242 * (100vw - 375px)), 20px);
}
.home-front .hf-legal p { margin: var(--hf-space-12) 0 0; }
.home-front .hf-legal h2 + p, .home-front .hf-legal h3 + p { margin-top: 0; }
.home-front .hf-legal ul { margin: var(--hf-space-12) 0 0; padding-left: 1.25em; list-style: disc; }
.home-front .hf-legal li + li { margin-top: var(--hf-space-8); }
.home-front .hf-legal strong { color: var(--hf-ink); font-weight: 600; }
.home-front .hf-legal a { color: var(--hf-link); font-weight: 600; }
.home-front .hf-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }