/* Reactivation Agent — the home page and every /for/<kind> front (app/public/ra/index.html, rendered by fronts/index.js renderFront).
   B141: the approved preview's site.css (site-output/reactivation-agent/site/site.css, codex judge r3 PASS), lifted as is;
   the block marked "app slots" at the end styles the HTML the template slots emit (rowsHtml, moneyHtml, servicesHtml, signupHtml).
   Every value is a theme.css or tokens.css variable.
   Concept (brief.md): the approve moment — the owner's list already counted, one text waiting for a thumb.
   Six type stops at 1440: 64/700 count · 52/700 hero · 32/600 headline · 17/400 lead · 15/600 · 15/400. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: var(--spacing-nav); }
body { font-family: var(--font-body-md); font-size: var(--text-body-md); font-weight: var(--font-weight-body-md); line-height: 1.5; color: var(--color-ink); background: var(--color-ground); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-control); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.in { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.last { order: 2; }
.stack > * + * { margin-top: 20px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 5; height: var(--spacing-nav); background: var(--color-ground); border-bottom: 1px solid var(--color-line); }
.nav .in { display: flex; align-items: center; gap: 28px; height: 100%; }
.wordmark { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 16px; }
.mark { width: 22px; height: 22px; color: var(--color-primary); flex: none; }
.nav .links { display: flex; gap: 4px; font-size: var(--text-small); font-weight: 600; color: var(--color-ink-soft); }
.nav .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--radius-control); }
.nav .links a:hover { color: var(--color-ink); }
.nav .sp { flex: 1; }

/* type */
.leadin { font-size: var(--text-lead); color: var(--color-ink-soft); margin-bottom: 12px; }
h1 { font-family: var(--font-hero); font-size: var(--text-hero); font-weight: var(--font-weight-hero); line-height: 1.06; letter-spacing: var(--tracking-hero); text-wrap: balance; }
h2 { font-family: var(--font-headline); font-size: var(--text-headline); font-weight: var(--font-weight-headline); line-height: 1.15; letter-spacing: var(--tracking-headline); text-wrap: balance; }
h3 { font-size: var(--text-body-md); font-weight: 600; line-height: 1.35; }
.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-soft); max-width: 60ch; }
.note { color: var(--color-ink-soft); }

/* actions */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: var(--color-ground); color: var(--color-ink); font: inherit; font-size: var(--text-body-md); font-weight: 600; white-space: nowrap; }
.btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn.ghost { border-color: transparent; color: var(--color-ink-soft); }
.btn.lg { height: 48px; padding: 0 22px; }
a.btn:active { transform: translateY(1px); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.link, .anchor { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-primary-ink); }
.link:hover, .anchor:hover { text-decoration: underline; text-underline-offset: 4px; }

/* bands — each fills one screen under the nav at desktop */
.band { min-height: calc(100vh - var(--spacing-nav)); display: flex; align-items: center; padding: var(--pad) 0; }
.wash { background: var(--color-surface); }
.dark { background: var(--color-dark); color: var(--color-on-primary); }
.dark .lead, .dark .note { color: var(--color-dark-soft); }
.dark .anchor { color: var(--color-primary-on-dark); }

/* 1 the plan card — one bordered surface, the one lifted thing, no tile inside */
.card { border: 1px solid var(--color-line); border-radius: var(--radius-container); background: var(--color-ground); box-shadow: var(--shadow-card); overflow: hidden; }
.card .head { display: flex; align-items: baseline; gap: 12px; padding: var(--row-pad) 24px; border-bottom: 1px solid var(--color-line); color: var(--color-ink-soft); }
.card .head b { color: var(--color-ink); font-weight: 600; }
.card .head .ex { margin-left: auto; font-weight: 600; }
.card .due { display: flex; align-items: baseline; gap: 18px; padding: calc(var(--row-pad) * 2) 24px var(--row-pad); }
.card .count { font-size: var(--text-count); font-weight: var(--font-weight-count); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.card .what b { display: block; font-size: var(--text-lead); font-weight: 400; color: var(--color-ink); }
.card .what span { color: var(--color-ink-soft); }
.card .reasons { padding: 0 24px var(--row-pad); }
.card .reasons > div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: var(--row-pad) 0; border-top: 1px solid var(--color-line); }
.card .reasons b { font-weight: 600; }
.card .reasons span { color: var(--color-ink-soft); }
.card .reasons .held b { color: var(--color-ink-soft); }
.card .foot { display: grid; gap: 14px; padding: calc(var(--row-pad) * 1.6) 24px; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.sms .from { display: block; color: var(--color-ink-soft); margin: 0 0 4px 14px; }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: var(--radius-bubble); border-bottom-left-radius: var(--radius-control); background: var(--color-bubble); color: var(--color-ink); line-height: 1.45; }
.approve { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* the Approve control is a drawing of the desk (a target frame, labelled Example) — it does nothing here */
.drawn { cursor: default; }

/* 2 how it works — five hairline rows */
.flow { border-bottom: 1px solid var(--color-line-strong); }
.fstep { display: grid; grid-template-columns: 9.5em 1fr 1fr; gap: 24px; align-items: start; padding: var(--step-pad) 0; border-top: 1px solid var(--color-line-strong); }
.fstep .n { font-weight: 600; color: var(--color-ink-soft); }
.fstep .v { color: var(--color-ink-soft); overflow-wrap: anywhere; }
.fstep .v b { display: block; font-weight: 600; color: var(--color-ink); }
.fstep .v .status { display: block; margin-top: 2px; font-weight: 600; color: var(--color-ink); }
/* rows 3-5 draw what the desk shows: the drafted text with its Approve, her reply, the booking */
.fstep .v.desk { display: grid; gap: var(--desk-gap); justify-items: start; color: var(--color-ink); }
.fstep .v.desk .bubble { width: fit-content; max-width: 100%; }
.nowrap { white-space: nowrap; }
/* step 4: "<name> replied", the reply bubble and "Booking request" hang on the column's one right edge */
.fstep .v.desk .from { justify-self: end; margin: 0; }
.fstep .v.desk .bubble.reply { justify-self: end; background: var(--color-bubble); border-bottom-left-radius: var(--radius-bubble); border-bottom-right-radius: var(--radius-control); }
.fstep .v.desk .status { justify-self: end; margin-top: 0; }
.booking { display: flex; justify-content: space-between; align-items: center; gap: var(--desk-gap) var(--desk-pad-x); width: 100%; padding: var(--desk-pad-y) var(--desk-pad-x); border: 1px solid var(--color-line); border-radius: var(--radius-container); background: var(--color-ground); color: var(--color-ink-soft); }
.booking b { display: block; font-weight: 600; color: var(--color-ink); }
.booking .state { font-weight: 600; color: var(--color-ink); }
.exnote { margin-top: 20px; color: var(--color-ink-soft); max-width: 80ch; }

/* 3 pricing */
.price { border: 1px solid var(--color-line); border-radius: var(--radius-container); background: var(--color-ground); overflow: hidden; }
.price .top { padding: 24px; }
.price .plan { font-weight: 600; color: var(--color-ink-soft); margin-bottom: 8px; }
.trades { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.trades div { display: flex; justify-content: space-between; align-items: baseline; padding: var(--row-pad) 0; border-bottom: 1px solid var(--color-line); }
.trades b { font-weight: 600; font-variant-numeric: tabular-nums; }
.unit { margin-top: 14px; color: var(--color-ink-soft); }
.price ul { display: grid; gap: 6px; padding: 18px 24px; border-top: 1px solid var(--color-line); color: var(--color-ink-soft); }
.price .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 24px 24px; border-top: 1px solid var(--color-line); background: var(--color-surface); }

/* 4 questions */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--step-pad) * 1.3) 48px; }
.qa p { margin-top: 6px; color: var(--color-ink-soft); }

/* 5 who it's for */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.who div { padding: var(--step-pad) 0 calc(var(--step-pad) * .8); border-top: 1px solid var(--color-dark-line); }
.who b { display: block; font-weight: 600; }
.who span { color: var(--color-dark-soft); }
.who-note { margin-top: 16px; }
.lockup { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.lockup .mark { color: var(--color-primary-on-dark); }

/* 6 close — compact: one line and one button need no full screen */
.band.close { min-height: 0; padding: var(--close-pad) 0; }
.center { text-align: center; }
.center .cta { justify-content: center; margin-top: 32px; }
/* the close is the page's last loud line: it takes the hero stop */
.close-h { font-family: var(--font-hero); font-size: var(--text-hero); font-weight: var(--font-weight-hero); letter-spacing: var(--tracking-hero); line-height: 1.08; max-width: 20ch; margin: 0 auto; }

/* footer */
footer { border-top: 1px solid var(--color-line); padding: 24px 0; font-size: var(--text-small); color: var(--color-ink-soft); }
footer .in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* app slots — the HTML fronts/index.js emits into the template, drawn as the preview draws it */
/* rowsHtml: <div class="sent"><b>name</b><span>reason</span></div>; the held row's reason carries .muted,
   the closing "and N more due" row is one span that sits in the reason column */
.card .reasons .sent:has(> .muted) b { color: var(--color-ink-soft); }
.card .reasons .muted { color: var(--color-ink-soft); }
.card .reasons .sent > span:only-child { grid-column: 2; }
/* moneyHtml wraps the amount in <em>; the preview sets the whole line plain */
.card .what em { font-style: normal; }
/* servicesHtml (fronts only): the services the front starts with */
.svc-line { color: var(--color-ink-soft); }
/* signupHtml (fronts only): shows only while sign-up is open (data-signup on <html>, set by the server) */
html:not([data-signup="open"]) .for-signup { display: none; }
.for-signup a { font-weight: 600; color: var(--color-primary-ink); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1000px) {
  .nav .links { display: none; }
}
@media (max-width: 720px) {
  .nav .ghost { display: none; }
  .nav .in { gap: 12px; }
  .nav .btn { padding: 0 14px; }
  .band { min-height: 0; }
  .grid { grid-template-columns: 1fr; }
  .c4, .c5, .c7, .c8, .c12 { grid-column: auto; }
  .last { order: 0; }
  h1 { font-size: var(--text-display-phone); }
  h2 { font-size: var(--text-headline-phone); }
  .close-h { font-size: var(--text-display-phone); }
  .lead, .leadin { font-size: var(--text-lead-phone); }
  .cta .btn, .price .foot .btn { width: 100%; }
  .btn.lg { white-space: normal; text-align: center; height: auto; min-height: 48px; padding: 10px 16px; }
  .card .head { display: block; padding: 12px 16px; }
  .card .head b { display: block; }
  .card .head .ex { margin-left: var(--desk-gap); }
  /* the note steps under the card so the count sits in the first screen */
  .hero .hero-copy { display: contents; }
  .hero .hero-copy > * { margin-top: 0; }
  .hero .c7 { order: 1; }
  .hero .hero-note { order: 2; }
  .wide-only { display: none; }
  .card .due, .card .reasons, .card .foot { padding-left: 16px; padding-right: 16px; }
  .card .reasons > div { grid-template-columns: 1fr; gap: 2px; }
  .card .reasons .sent > span:only-child { grid-column: auto; }
  .bubble { max-width: 100%; }
  .fstep { grid-template-columns: 1fr; gap: 6px; }
  /* the step sentence steps down to 400 so it and its desk object read as two things */
  .fstep h3 { font-weight: var(--font-weight-body-md); }
  .faq, .trades, .who { grid-template-columns: 1fr; }
  footer .in { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  a.btn:active { transform: none; }
}