/* PLUSH SCOUT — marketing site. Plush 2026 system: paper/ink/hairlines/yellow.
   Rules: no shadows, no pills, 0-radius panels, 6px-radius buttons, yellow bg +
   ink text is THE CTA. Never yellow text on dark, never dark surfaces w/ yellow. */

:root {
  --yellow: #E9FF75;
  --ink: #0a0a0a;
  --paper: #ffffff;
  --grey: #6b6b6b;
  --hair: #e4e4de;
  --warm: #f7f7f2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'Maison Ext'; font-display: swap;
  src: url('/static/fonts/MaisonNeueExtended-Medium.woff2') format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'Maison Book'; font-display: swap;
  src: url('/static/fonts/MaisonNeue-Book.woff2') format('woff2');
  font-weight: 400;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Maison Book', system-ui, sans-serif;
  color: var(--ink); background: var(--paper);
  font-size: 16px; line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- type ---------- */
h1, h2, h3, .disp {
  font-family: 'Maison Ext', system-ui, sans-serif;
  font-weight: 500; text-transform: uppercase; line-height: 1.08;
  letter-spacing: .01em;
}
h1 { font-size: clamp(30px, 5.4vw, 62px); }
h2 { font-size: clamp(22px, 3.2vw, 36px); }
h3 { font-size: 15px; letter-spacing: .06em; }
.eyebrow {
  font-family: 'Maison Ext', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em; color: var(--grey);
}
.lead { font-size: clamp(17px, 1.6vw, 20px); max-width: 620px; }
.muted { color: var(--grey); }
.small { font-size: 13px; }

/* ---------- layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sect { padding: clamp(48px, 8vw, 104px) 0; border-top: 1px solid var(--hair); }
.sect--flush { border-top: 0; }
.sect--warm { background: var(--warm); }
/* minmax(0,1fr): plain 1fr = minmax(auto,1fr) — a nowrap button/wide child sets
   the track's min-content and overflows the viewport on small screens. */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) {
  .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid2, .grid3, .grid4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: 'Maison Ext', sans-serif; font-size: 12px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
  background: var(--yellow); color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink); border-radius: 6px; cursor: pointer;
  padding: 13px 22px; transition: background .15s;
}
.btn:hover { background: #dff255; }
/* Must come AFTER the .btn base rule (same specificity — source order decides):
   long labels may wrap on narrow screens instead of forcing overflow. */
@media (max-width: 620px) { .btn { white-space: normal; } }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--warm); }
.btn--big { padding: 16px 30px; font-size: 13px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.hdr .wrap {
  display: flex; align-items: center; gap: 28px; height: 62px;
}
.brand {
  position: relative;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: 'Maison Ext', sans-serif; font-size: 14px; letter-spacing: .18em;
  text-transform: uppercase;
}
.brand img { height: 15px; width: auto; }
/* Tap-target fix (WCAG 2.5.8): the visible logo/wordmark box is short, so an
   invisible pseudo-element extends the *hit area* to >=44px tall without
   changing anything visible — same technique used on the header CTA/hamburger
   below. Width matches the element's own box, so it never overlaps a sibling. */
.brand::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; min-height: 44px; transform: translateY(-50%);
}
.nav { display: flex; gap: 22px; margin-left: 8px; flex: 1; }
.nav a {
  font-family: 'Maison Ext', sans-serif; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a.on { border-bottom-color: var(--yellow); }
.hdr-cta { display: flex; gap: 10px; align-items: center; }
.hdr-cta .btn { padding: 10px 16px; position: relative; }
/* Same invisible hit-area extension as .brand — height only, so the 8-10px
   gap between the CTA and the hamburger is never bridged (no overlap). */
.hdr-cta .btn::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; min-height: 44px; transform: translateY(-50%);
}

/* mobile nav */
.mnav-toggle { display: none; }
.mnav { display: none; }
@media (max-width: 880px) {
  .nav, .hdr-cta .btn--ghost { display: none; }
  .hdr .wrap { gap: 10px; }
  .brand { font-size: 11px; letter-spacing: .1em; gap: 7px; flex: none; }
  .brand img { height: 12px; }
  /* right-align the CTA cluster so the header reads: brand ......... [Join waitlist] [☰].
     Both sides are flex:none (never shrink) so nothing overlaps; on very small phones the
     "Scout" wordmark drops out (below) rather than clipping. */
  .hdr-cta { margin-left: auto; gap: 8px; flex: none; }
  /* tiny phones (≤360px): keep only the PLUSH74 logo mark, drop the " Scout" suffix so the
     header never crowds — the logo already carries the brand. */
  @media (max-width: 360px) { .brand .brandword { display: none; } }
  .hdr-cta .btn { padding: 9px 13px; font-size: 10px; letter-spacing: .09em; }
  /* neat small hamburger — three bars that morph to an X on open (expand/collapse) */
  .mnav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin: 0; flex: none;
    background: none; border: 1px solid var(--hair); border-radius: 6px; cursor: pointer;
  }
  .mnav-toggle .bars { position: relative; width: 18px; height: 12px; }
  .mnav-toggle .bars span {
    position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
    transition: transform .22s ease, opacity .16s ease, top .22s ease;
  }
  .mnav-toggle .bars span:nth-child(1) { top: 0; }
  .mnav-toggle .bars span:nth-child(2) { top: 5px; }
  .mnav-toggle .bars span:nth-child(3) { top: 10px; }
  .mnav-toggle.open { background: var(--yellow); }
  .mnav-toggle.open .bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
  .mnav-toggle.open .bars span:nth-child(2) { opacity: 0; }
  .mnav-toggle.open .bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
  /* full-height solid paper panel — no page bleed-through under the links, no dimmed nav;
     the header (z:50) stays above it, and body scroll is locked while it's open. */
  .mnav.open {
    display: block; position: fixed; inset: 62px 0 0 0; background: var(--paper);
    z-index: 49; padding: 8px 0 16px; overflow: auto;
  }
  body:has(.mnav.open) { overflow: hidden; }
  .mnav a {
    display: block; padding: 13px 20px; text-decoration: none;
    font-family: 'Maison Ext', sans-serif; font-size: 13px; letter-spacing: .16em;
    text-transform: uppercase; border-top: 1px solid var(--hair);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mnav-toggle .bars span { transition: none; }
}

/* ---------- cards / panels ---------- */
.card { border: 1px solid var(--hair); border-radius: 0; background: var(--paper); }
.card--pad { padding: 26px; }
.imgbox { overflow: hidden; background: var(--warm); }
.imgbox img { width: 100%; height: 100%; object-fit: cover; }
.ratio43 { aspect-ratio: 4 / 3; }
.ratio169 { aspect-ratio: 16 / 9; }

/* numbered step */
.stepnum {
  font-family: 'Maison Ext', sans-serif; font-size: 12px; letter-spacing: .14em;
  display: inline-block; background: var(--yellow); border: 1px solid var(--ink);
  border-radius: 6px; padding: 4px 10px; margin-bottom: 14px;
}

/* scout profile card */
.scout-card { display: flex; flex-direction: column; gap: 0; }
.scout-card .mono {
  position: relative; font-family: 'Maison Ext', sans-serif; font-size: 34px; text-transform: uppercase;
  background: var(--yellow); border-bottom: 1px solid var(--hair);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
/* photo sits above the initials layer — a missing/broken src degrades to the
   initials instead of a blank yellow slab (P0-4) */
.scout-card .mono img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scout-card .bd { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.scout-card .nm { font-family: 'Maison Ext', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }
.scout-card .loc { font-size: 13px; color: var(--grey); }
.scout-card .rate { font-size: 13px; border-top: 1px solid var(--hair); padding-top: 10px; margin-top: auto; }
/* Become-a-scout card — sits flush with the scout tiles, yellow "+" header */
a.scoutcard--add { text-decoration: none; color: inherit; }
.scout-card .mono--add { font-size: 44px; line-height: 1; }
a.scoutcard--add:hover .nm { text-decoration: underline; }

.chip {
  display: inline-block; font-size: 11px; font-family: 'Maison Ext', sans-serif;
  text-transform: uppercase; letter-spacing: .12em; border: 1px solid var(--ink);
  border-radius: 6px; padding: 3px 8px;
}

/* ---------- forms ---------- */
label.f {
  display: block; font-family: 'Maison Ext', sans-serif; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; margin: 18px 0 6px;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; font: 15px 'Maison Book', system-ui, sans-serif; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 6px;
  padding: 12px 14px; outline: none;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--yellow); }
textarea { min-height: 130px; resize: vertical; }
.fnote { font-size: 12px; color: var(--grey); margin-top: 6px; }
.ferr { font-size: 13px; color: #b00020; margin-top: 10px; min-height: 18px; }
.fok {
  border: 1px solid var(--ink); background: var(--yellow); border-radius: 6px;
  padding: 16px 18px; font-size: 15px;
}
.checkrow { display: flex; gap: 12px; align-items: center; margin: 18px 0 6px; font-size: 14px; min-height: 44px; }
.checkrow input { width: auto; }
.checkrow input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.checkrow label { padding: 10px 0; cursor: pointer; }

/* FAQ accordion row — full class (not inline) so the tap-target fix applies
   everywhere at once. Height alone changes on purpose; text stays the same size. */
.faqq {
  cursor: pointer; font-family: 'Maison Ext', sans-serif; font-size: 14px;
  text-transform: uppercase; letter-spacing: .04em; list-style: none;
  display: flex; align-items: center; min-height: 44px; padding: 14px 0;
}
.faqq::-webkit-details-marker { display: none; }
.faqq::after { content: "+"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--ink); }
details[open] .faqq::after { content: "\2013"; }
/* FAQ rows sit inside a .card--pad — tighten that generic padding to the
   accordion's own rhythm so open/closed rows read as one tight list. */
details.card--pad { padding: 0 20px; }
details.card--pad .faqq { padding: 16px 0; }
details.card--pad p { padding: 0 0 18px; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--hair); background: var(--warm); }
/* brand + 4 balanced link columns (Product 5 · App 4 · Network 2 · Company 3) */
.ftr .cols {
  display: grid; grid-template-columns: 2.2fr repeat(4, minmax(0, 1fr)); gap: 28px;
  padding: 56px 0 40px;
}
@media (max-width: 1020px) {
  /* brand row on top, link columns as a 2×2 grid — no lopsided single stack */
  .ftr .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; padding: 44px 0 32px; }
  .ftr .ftr-brand { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
}
@media (max-width: 380px) { .ftr .cols { grid-template-columns: minmax(0, 1fr); } }
.ftr h4 {
  font-family: 'Maison Ext', sans-serif; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; margin-bottom: 14px;
}
.ftr a { display: block; text-decoration: none; font-size: 14px; padding: 4px 0; color: var(--grey); }
.ftr a:hover { color: var(--ink); }
.ftr .legal {
  border-top: 1px solid var(--hair); padding: 18px 0 26px; font-size: 12.5px;
  color: var(--grey); display: flex; gap: 18px; flex-wrap: wrap;
}
.ftr .legal a { display: inline; padding: 0; }

/* ---------- photography ---------- */
.photocap {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--grey); margin-top: 10px;
}
.photocap .city {
  font-family: 'Maison Ext', sans-serif; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}

/* ---------- field image band (full-bleed mosaic, zero copy) ---------- */
.fieldband {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
}
.fb { overflow: hidden; background: var(--warm); }
.fb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.fb-b, .fb-c, .fb-d, .fb-e, .fb-f, .fb-g { aspect-ratio: 4 / 3; }
.fb-c img { object-position: 32% center; }
@media (min-width: 761px) {
  .fieldband {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, clamp(120px, 15vw, 220px));
  }
  .fb-a, .fb-b, .fb-c, .fb-d, .fb-e, .fb-f, .fb-g { aspect-ratio: auto; }
  .fb-a { grid-column: 1 / 4; grid-row: 1 / 3; }
  .fb-b { grid-column: 4 / 6; grid-row: 1 / 2; }
  .fb-c { grid-column: 6 / 7; grid-row: 1 / 4; }
  .fb-d { grid-column: 4 / 6; grid-row: 2 / 3; }
  .fb-e { grid-column: 1 / 3; grid-row: 3 / 4; }
  .fb-f { grid-column: 3 / 5; grid-row: 3 / 4; }
  .fb-g { grid-column: 5 / 6; grid-row: 3 / 4; }
}

/* ---------- technical feature grid (home "what it does") ---------- */
.techgrid-sect { background: var(--paper); }
.techgrid-head {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 24px;
}
.techgrid-count {
  margin-left: auto; font-family: 'Maison Ext', sans-serif; font-size: 11px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .22em;
  color: var(--ink); white-space: nowrap;
}
.techgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.techplate { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 40px 32px; }
.techplate-top { margin-bottom: 24px; }
.techplate-idx {
  display: block; font-family: 'Maison Ext', sans-serif; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-bottom: 22px;
}
.techplate-icon { display: block; width: 72px; height: 72px; color: var(--ink); }
.techplate-icon svg { width: 100%; height: 100%; display: block; }
.techplate-title { position: relative; display: inline-block; padding-bottom: 10px; }
.techplate-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--yellow); transition: width .18s ease;
}
@media (hover: hover) and (min-width: 761px) {
  .techplate:hover .techplate-title::after { width: 100%; }
}
.techplate--wide { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .techplate--wide { display: flex; align-items: flex-start; gap: 40px; }
  .techplate--wide .techplate-top { margin-bottom: 0; flex: none; }
  .techplate--wide .techplate-body { max-width: 640px; }
}
@media (max-width: 760px) {
  .techgrid { grid-template-columns: 1fr; border-left: 0; }
  .techplate { border-right: 0; padding: 26px 4px; }
  .techplate-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
  .techplate-idx { margin-bottom: 0; }
  .techplate-icon { width: 48px; height: 48px; flex: none; }
}

/* ---------- misc ---------- */
.hairline { border: 0; border-top: 1px solid var(--hair); }
.yellowband { background: var(--yellow); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mt32 { margin-top: 32px; } .mt48 { margin-top: 48px; }
.tableover { overflow-x: auto; }
table.plain { border-collapse: collapse; width: 100%; font-size: 14.5px; }
table.plain th, table.plain td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
table.plain th { font-family: 'Maison Ext', sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- how-it-works: step icons (additive) ---------- */
.hiw-icon { display: block; width: 48px; height: 48px; color: var(--ink); margin: 0 0 16px; }
.hiw-icon svg { width: 100%; height: 100%; display: block; }
.center .hiw-icon { margin-left: auto; margin-right: auto; }
@media (min-width: 621px) { .hiw-icon { width: 56px; height: 56px; } }

/* ---------- live device frames (launch fb): the app in motion, not flat screenshots ----------
   Illustration, not UI chrome — the rounded phone silhouette is imagery, so the
   0-radius panel rule doesn't apply; still flat: no shadows anywhere. All motion
   sits behind prefers-reduced-motion. */
.phone { position: relative; width: 100%; max-width: 250px; margin: 0 auto; border: 2.5px solid var(--ink);
  border-radius: 34px; padding: 8px; background: var(--paper); }
/* no fake notch — it sat over the screen area (top:8px = inside the 8px bezel padding) and
   overlapped the real app-header text baked into every screenshot. The rounded 2.5px frame
   already reads as a phone; the screenshots carry their own status/header row. */
.phone-screen { position: relative; border-radius: 24px; overflow: hidden;
  aspect-ratio: 375 / 812; background: var(--warm); }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 4-screen story cycle — pure CSS cross-fade, 4s per screen */
.phone-screen--cycle img { opacity: 0; animation: phcycle 16s infinite; }
.phone-screen--cycle img:nth-child(1) { animation-delay: 0s; }
.phone-screen--cycle img:nth-child(2) { animation-delay: 4s; }
.phone-screen--cycle img:nth-child(3) { animation-delay: 8s; }
.phone-screen--cycle img:nth-child(4) { animation-delay: 12s; }
@keyframes phcycle { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; }
  31% { opacity: 0; } 100% { opacity: 0; } }
/* gentle float, phones out of phase — alive, not busy */
.phone--float { animation: phfloat 7s ease-in-out infinite; }
.phone--float2 { animation: phfloat 8s ease-in-out 1.4s infinite; }
@keyframes phfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.phone-cap { text-align: center; margin-top: 12px; }

/* desktop report in a browser frame with a slow reading pan */
.browser { border: 2px solid var(--ink); background: var(--paper); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 2px solid var(--ink); }
.browser-bar i { width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; display: block; }
.browser-bar .url { margin-left: 10px; font-size: 11px; letter-spacing: .04em; color: var(--grey);
  border: 1px solid var(--hair); padding: 2px 10px; }
.browser-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--warm); }
.browser-view img { position: absolute; left: 0; top: 0; width: 100%; height: auto;
  animation: bpan 22s ease-in-out infinite alternate; }
@keyframes bpan { from { transform: translateY(0); } to { transform: translateY(-18%); } }

@media (prefers-reduced-motion: reduce) {
  .phone--float, .phone--float2, .browser-view img { animation: none; }
  .phone-screen--cycle img { animation: none; opacity: 0; }
  .phone-screen--cycle img:first-child { opacity: 1; }
}

/* ===== v9 — home + how-it-works rewrite (append-only) ===================== */

/* short hero: one value line, one sub-line, one CTA, one image */
.hero-sect { padding: clamp(28px, 4.5vw, 60px) 0 clamp(44px, 6vw, 76px); }
.hero2 {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4.5vw, 60px); align-items: center;
}
.hero2-img { aspect-ratio: 4 / 5; }
@media (max-width: 760px) {
  .hero2 { grid-template-columns: 1fr; gap: 26px; }
  .hero2-img { aspect-ratio: 4 / 3; }
}

/* spot tags — every photo on the site is annotated the way the app annotates
   a scout day: number + name, in walking order. The paper variant is a raw
   camera-roll frame the app hasn't tagged yet. */
.spotbox { position: relative; }
.spottag {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-family: 'Maison Ext', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: var(--yellow); border: 1px solid var(--ink); border-radius: 6px;
  padding: 4px 9px; max-width: calc(100% - 20px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spottag--file { background: var(--paper); }
/* in the 2-col mobile grid the pill is too tight for one line — let it wrap instead of
   truncating "VAULTED MASSE…" */
@media (max-width: 620px) { .spottag { white-space: normal; text-overflow: clip; } }

/* small uppercase text link (yellow underline, matches nav affordance) */
.textlink {
  display: inline-block; font-family: 'Maison Ext', sans-serif; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 3px;
}
.textlink:hover { border-bottom-color: var(--ink); }

/* feature ledger — hairline definition rows, no icons */
.ledger { border-top: 1px solid var(--hair); }
.ledger-row {
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 8px 36px; padding: 18px 0; border-bottom: 1px solid var(--hair);
}
.ledger-row p { color: var(--grey); font-size: 15px; max-width: 640px; }
@media (max-width: 620px) {
  .ledger-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
}

/* how-it-works steps — alternating text/screenshot rows */
.step-sect { padding: clamp(36px, 5.5vw, 68px) 0; border-top: 1px solid var(--hair); }
.step {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.step-txt h2 { margin-top: 4px; }
.step-txt p { color: var(--grey); margin-top: 14px; max-width: 500px; font-size: 16.5px; }
.step .phone { max-width: 240px; }
@media (min-width: 761px) {
  .step--flip .step-txt { order: 2; }
  .step--flip .step-fig { order: 1; }
}
@media (max-width: 760px) {
  .step { grid-template-columns: 1fr; gap: 26px; }
}
.step--wide .step-txt { max-width: 640px; }
.step--wide .step-txt p { max-width: 640px; }
.step--wide .step-fig { margin-top: 36px; }

/* ===== marketing revamp — base nav/footer + home (append-only) ============== */

/* quiet nav-style login/account link inside the header CTA cluster (not a button) */
.hdr-login {
  font-family: 'Maison Ext', sans-serif; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.hdr-login:hover { border-bottom-color: var(--yellow); }
@media (max-width: 880px) { .hdr-login { display: none; } }

/* mobile menu: make the primary CTA row read as a CTA (yellow bg + ink text) */
.mnav a.mnav-cta { background: var(--yellow); }

/* icons rendered via <img> inside the icon-plate / step-icon boxes */
.techplate-icon img, .hiw-icon img { width: 100%; height: 100%; display: block; }

/* clickable feature tiles — reuse the techgrid/techplate idiom as <a> links */
a.techplate { text-decoration: none; color: inherit; transition: background .15s; }
a.techplate:hover { background: var(--warm); }
.techgrid--links { grid-template-columns: repeat(4, 1fr); }
.techgrid--links .techplate { padding: 26px 22px; }
.techgrid--links .techplate-icon { width: 42px; height: 42px; margin-bottom: 16px; }
.techgrid--links .techplate-title { font-size: 14px; }
.techgrid--links .techplate p { color: var(--grey); font-size: 13px; margin-top: 8px; }
@media (max-width: 900px) {
  .techgrid--links { grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--hair); }
  .techgrid--links .techplate { border-right: 1px solid var(--hair); padding: 16px 14px; }
  .techgrid--links .techplate-icon { width: 34px; height: 34px; margin-bottom: 10px; }
  .techgrid--links .techplate p { margin-top: 5px; font-size: 12.5px; line-height: 1.4; }
}
/* on phones the tiles read as icon + name only — the one-liner lives on the
   feature page; this keeps the 8-tile grid compact (4 short rows) */
@media (max-width: 620px) { .techgrid--links .techplate p { display: none; } }

/* home-only: trim section whitespace on the shorter bands so the page reads
   compact on mobile (does NOT touch the shared .sect used by other pages) */
.sect--tight { padding: clamp(34px, 6vw, 80px) 0; }
/* home-only: keep the hero "app in motion" proof, but cap its height on phones */
@media (max-width: 760px) {
  .hero-sect .phone { max-width: 194px; }
}
/* footer reads a touch tighter on phones (shared, consistent everywhere) */
@media (max-width: 880px) {
  .ftr .cols { padding: 40px 0 28px; }
  .ftr a { padding: 3px 0; }
}
/* home "how it works": compact icon-left rows on phones (saves vertical space) */
@media (max-width: 620px) {
  .hiw3 > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
  .hiw3 .hiw-icon { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; align-self: start; }
  .hiw3 h3 { align-self: center; }
  .hiw3 p { margin-top: 3px; }
}