/* Homepage, "Text it": the service tour. 23 September 2026, cut down 24 September.
   Hero, the same morning twice, the three ways it finds out, why the answers hold up,
   paperwork, the rules, the price, questions, and the close on the river. */

.example-tag.t-tag { position: absolute; top: -14px; left: 26px; z-index: 5; }
/* the accent word in a heading: the plate's orange, deepened to read on paper */
.t-vs h2 em, .t-start h2 em { font-style: normal; color: #C24E12; }

/* a section head: the line on the left, one sentence beside it */
.t-sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; max-width: 1400px; margin-bottom: clamp(36px, 4vw, 64px); }
.t-sec-head h2 { font-size: clamp(2.5rem, 4.8vw, 5.6rem); }
.t-sec-head .lead, .t-sec-head .body { margin: 0; }

/* ---------- hero ---------- */
.t-hero { position: relative; display: grid; grid-template-columns: minmax(0, 46rem) auto; justify-content: start; align-items: center; gap: 0 clamp(40px, 5.5vw, 110px); min-height: max(720px, min(100svh, 58vw)); padding: 120px var(--g) 56px; overflow: hidden; }
.t-hero-plate { position: absolute; inset: 0; z-index: 0; }
.t-hero-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; transform: translateX(20vw) scale(1.04); transform-origin: 100% 50%; }
.t-hero-copy { position: relative; z-index: 2; max-width: 44rem; }
.t-soon { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 16px 6px 10px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 2px var(--river) inset, 5px 6px 0 -1px var(--orange); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.t-soon .rings { width: 34px; height: 15px; }.t-hero h1 { font-size: clamp(3.2rem, 5.8vw, 7.2rem); line-height: .92; max-width: 11.5ch; }
.t-hero .lead { margin-top: 30px; max-width: 28em; }
.t-hero .actions { margin: 32px 0 26px; }
.t-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9375rem; font-weight: 500; color: var(--olive); }
.t-facts li { display: inline-flex; align-items: center; gap: 8px; }
.t-facts li::before { content: ""; width: 16px; height: 7px; border: 2px solid var(--green); border-radius: 50%; }
/* the conversation floats on the water: no phone, just the bubbles, lifted off the plate by a printed shadow */
.t-hero-talk { position: relative; z-index: 2; width: clamp(320px, 27vw, 430px); align-self: center; margin-top: 40px; }
.t-hero-talk .thread { overflow: visible; -webkit-mask-image: none; mask-image: none; min-height: 31rem; padding: 0; gap: 12px; font-size: 1rem; line-height: 1.4; justify-content: flex-start; }
.t-hero-talk .msg { max-width: 88%; padding: 10px 15px 11px; box-shadow: 6px 7px 0 -1px rgba(14, 59, 40, .2); }
.t-hero-talk .msg.px { border: 1.5px solid rgba(14, 59, 40, .22); }
.t-hero-talk .msg.card { width: 94%; max-width: 94%; box-shadow: none; }
.t-hero-talk .minicard .ans { font-size: 1.3rem; }
.t-hero-talk .when { align-self: center; margin: 4px 0 0; padding: 3px 12px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1.5px rgba(14, 59, 40, .15); font-size: .75rem; }
.t-hero-talk .typing { box-shadow: 6px 7px 0 -1px rgba(14, 59, 40, .2); font-size: .8125rem; }
.t-from { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: .75rem; font-weight: 700; color: var(--olive); }
.t-from img { width: 20px; height: 20px; border-radius: 50%; }
.t-hero-talk > .t-tag { top: -38px; left: 0; }
/* on desktops the plate is sized by the hero's height, not stretched across its width, so the 1536px render
   is shown at about its own size instead of blown up; its bare-paper left edge fades into the page */
@media (min-width: 1200px) {
  .t-hero-plate { overflow: hidden; }
  .t-hero-plate img { position: absolute; top: 0; right: -14vw; width: auto; height: min(100%, 1120px); max-width: none; object-fit: contain; transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 12%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 12%); mask-composite: intersect; }
}
/* on laptop widths, a narrower line and the otter further right, so the bubbles float beside it, not over it */
@media (min-width: 1200px) and (max-width: 1699px) {
  .t-hero { grid-template-columns: minmax(0, 40rem) auto; column-gap: clamp(32px, 3.4vw, 56px); }
  .t-hero-plate img { right: -20vw; }
  .t-hero-talk { width: clamp(320px, 25vw, 380px); }
}

/* ---------- the value: the same morning, on two phones ---------- */
.t-vs { padding: clamp(56px, 6vw, 104px) var(--g) clamp(64px, 7vw, 120px); }
.t-vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: stretch; max-width: 1180px; margin-inline: auto; }
.t-vs-screen { display: flex; flex-direction: column; margin: 0; border-radius: 28px; overflow: hidden; }
/* your phone: faded, a little askew, the morning it ate */
.t-vs-old { background: #EFDDBD; border: 2px solid rgba(94, 90, 36, .45); transform: rotate(-1.2deg); }
/* Proxling's: crisp, on the card, with the orange print offset */
.t-vs-new { background: var(--card); border: 2.5px solid var(--river); box-shadow: 10px 11px 0 -1px var(--orange); transform: rotate(.8deg); }
.t-vs-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 18px 22px 12px; border-bottom: 1.5px solid rgba(94, 90, 36, .25); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--olive); }
.t-vs-bar span:first-child { display: flex; align-items: center; gap: 9px; font: 400 1.45rem/1 var(--display); letter-spacing: -0.01em; color: var(--river); }
.t-vs-bar img { width: 26px; height: 26px; border-radius: 50%; }
.t-calls { flex: 1; padding: 4px 22px; }
.t-calls li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(94, 90, 36, .2); }
.t-calls li::before { content: "↗"; grid-row: span 2; font-size: .9rem; font-weight: 700; line-height: 1; color: var(--olive); }
.t-calls li.miss::before { content: "✕"; color: #A3360A; }
.t-calls li.held::before { content: "♪"; color: #A3360A; }
.t-calls b { font-weight: 700; font-size: .9375rem; }
.t-calls span { grid-column: 2; font-size: .8125rem; color: var(--olive); }
.t-calls .held span, .t-calls .miss span { color: #A3360A; font-weight: 700; }
.t-calls time { grid-column: 3; grid-row: 1; font-size: .75rem; color: var(--olive); font-variant-numeric: tabular-nums; }
.t-calls .more { border-bottom: 0; opacity: .75; }
.t-calls .more::before { content: "⋯"; }
.t-vs-thread { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.t-vs-thread .msg { max-width: 86%; margin: 0; font-size: .9375rem; line-height: 1.4; }
.t-vs-quiet { align-self: center; margin: 4px 0; padding: 7px 14px; border: 1.5px dashed var(--green); border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.25; color: #0F6B3E; text-align: center; }
.t-vs-screen figcaption { padding: 16px 22px 18px; border-top: 1.5px solid rgba(94, 90, 36, .25); font-size: .9375rem; line-height: 1.4; }
.t-vs-screen figcaption b { font: 400 1.35rem/1 var(--display); }
.t-vs-old figcaption b { color: #A3360A; }
.t-vs-new figcaption { background: #FDE6D3; }
.t-vs-or { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.t-vs-or img { width: 150px; height: auto; }
.t-vs-or span { font: 400 2.2rem/1 var(--display); color: #C24E12; }

/* ---------- how it works: search, quick call, ring-round, as three rungs ---------- */
.t-kinds { padding: clamp(64px, 7vw, 120px) var(--g); background: var(--card); border-top: 2px solid var(--river); border-bottom: 2px solid var(--river); }
.t-ladder { counter-reset: rung; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1400px; }
.t-ladder > li { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.2vw, 30px); background: var(--paper); border: 2px solid var(--river); border-radius: 20px; }
/* each rung hands on to the next: a small arrow in the gap */
.t-ladder > li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 50%; right: calc(clamp(16px, 2vw, 28px) / -2 - 11px); width: 22px; height: 22px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--river); }
/* the chevron inside it, drawn with borders so it needs no image (the live CSP allows none inline) */
.t-ladder > li:not(:last-child)::before { content: ""; position: absolute; z-index: 3; top: calc(50% + 7px); right: calc(clamp(16px, 2vw, 28px) / -2 - 3px); width: 6px; height: 6px; border: solid var(--river); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
.t-ladder .t-rung-big { background: var(--orange); box-shadow: 8px 9px 0 -1px var(--river); }
.t-rung-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.t-rung-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--river); color: var(--card); }
.t-rung-icon .i { width: 20px; height: 20px; }
.t-rung-icon .rings { width: 30px; height: 14px; }
.t-rung-kind { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.t-rung-meta { margin-left: auto; padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--river) inset; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.t-ladder h3 { font-size: clamp(1.6rem, 2.1vw, 2.2rem); margin-bottom: 10px; }
.t-ladder > li > p:not(.msg) { margin: 0 0 16px; font-size: 1rem; line-height: 1.45; }
.t-qs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.t-qs li { padding: 5px 12px; border-radius: 999px 999px 999px 6px; background: var(--river); color: var(--card); font-size: .8125rem; font-weight: 500; line-height: 1.3; }
.t-ladder .msg.px { margin: auto 0 0; max-width: 100%; padding: 11px 14px 12px; border: 1.5px solid rgba(14, 59, 40, .22); font-size: .9375rem; line-height: 1.4; box-shadow: 5px 6px 0 -1px rgba(14, 59, 40, .16); }
.t-rung-big .msg.px { background: var(--card); }
.t-rung-big .t-rung-meta { background: var(--card); }
.t-kinds-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 48px); max-width: 1400px; margin-top: clamp(28px, 3vw, 44px); }
.t-kinds-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.t-keep { padding: 14px 18px; margin: -14px 0 0; border: 2px dashed var(--river); border-radius: 16px; }
.t-kinds-note .i { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--river); }

/* ---------- why the answers are good: the method beside the card that shows it ---------- */
.t-why { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 34rem); justify-content: center; gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(64px, 7vw, 112px) var(--g); background: var(--river); color: var(--paper); }
.t-why h2 { color: var(--paper); font-size: clamp(2.4rem, 4.2vw, 5rem); max-width: 13ch; margin-bottom: 18px; }
.t-why :focus-visible { outline-color: var(--orange); }
.t-why .kicker { color: var(--orange); }
.t-why-lead { margin: 0 0 24px; font-size: 1.1875rem; font-weight: 500; max-width: 32em; color: #E9DCC2; }
/* each point: the label in the display face, the plain explanation under it */
.t-notes { counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 2px solid rgba(246, 232, 207, .5); font-size: 1rem; font-weight: 500; line-height: 1.45; color: #E9DCC2; }
.t-notes li { counter-increment: n; position: relative; padding: 18px 0 18px 50px; border-bottom: 1.5px solid rgba(246, 232, 207, .22); }
.t-notes li::before { content: counter(n); position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--river); font: 400 1.1rem/1 var(--display); }
.t-notes b { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: var(--paper); }
.t-why .acard { max-width: none; }
.t-why .acard > .example-tag { top: 0; left: 24px; z-index: 3; background: var(--orange); color: var(--river); }
.t-why .acard-body { color: var(--river); border-color: var(--paper); box-shadow: 12px 14px 0 -2px var(--orange); }
.t-why .acard-actions { margin-top: 10px; padding-top: 14px; border-top: 1.5px solid var(--olive-soft); }

/* ---------- paperwork: the words and the app side by side ---------- */
.t-desk-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: center; max-width: 1760px; padding: clamp(64px, 7vw, 112px) var(--g); }
.t-desk-copy h2 { font-size: clamp(2.4rem, 4.2vw, 5rem); margin-bottom: 16px; }
.t-desk-copy .lead { margin-bottom: 20px; }
.t-desk-ways { display: grid; margin: 0 0 22px; border-top: 1.5px solid rgba(94, 90, 36, .35); }
.t-desk-ways li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1.5px solid rgba(94, 90, 36, .35); font-size: 1rem; line-height: 1.4; }
.t-desk-ways .i { width: 24px; height: 24px; margin-top: 1px; color: var(--river); }
.t-desk-app { position: relative; }
.t-desk-app .inked { --r: 16px; }
.t-desk-app .browser { font-size: 1rem; }
.t-desk-app .desk-ui { grid-template-columns: 172px minmax(0, 1fr); }
.t-desk-app .desk-ways { overflow-wrap: anywhere; }
.t-desk-app .lanes { gap: 8px; }
.t-desk-app .dates span { min-width: 36px; }

/* ---------- it asks, you decide; the person who steps in; what it never does ---------- */
.t-rules { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 120px); align-items: center; padding: clamp(64px, 7vw, 110px) var(--g); background: var(--card); border-top: 2px solid var(--river); border-bottom: 2px solid var(--river); }
.t-rules h2 { margin-bottom: 20px; font-size: clamp(2.4rem, 4.2vw, 5rem); }
.t-stuck { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: center; max-width: 36rem; margin-top: 28px; padding: 12px 18px 12px 12px; background: var(--paper); border: 2px solid var(--river); border-radius: 16px; box-shadow: 8px 10px 0 -2px var(--tint); }
.t-stuck img { width: 116px; height: 116px; border-radius: 10px; object-fit: cover; object-position: 68% 100%; }
.t-stuck p { margin: 8px 0 0; font-size: .9375rem; line-height: 1.45; }
.t-never { max-width: 30rem; padding: 22px 24px; border: 2px solid var(--river); border-radius: 18px; background: var(--paper); }
.t-never h3 { font-size: 1.6rem; margin-bottom: 12px; }
.t-never li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1.5px solid var(--olive-soft); font-weight: 500; }
.t-never li .i { color: #A3360A; margin-top: 2px; }

/* ---------- price ---------- */
.t-price { padding: clamp(64px, 7vw, 112px) var(--g) clamp(32px, 4vw, 64px); }
.t-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); max-width: 1400px; }
.t-amt small { margin-left: .3em; font: 700 1rem var(--text); color: var(--olive); }
.t-tier-hot .t-amt small { color: var(--river); }
.t-tiers li { display: flex; flex-direction: column; padding: 24px 22px; background: var(--card); border: 2px solid var(--river); border-radius: 18px; }
.t-tiers h3 { font-size: 1.5rem; margin-bottom: 18px; }
.t-amt { font-family: var(--display); font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1; margin: auto 0 12px; }
.t-tiers li > p:last-child { margin: 0; font-size: 1rem; }
.t-tiers .t-tier-hot { background: var(--orange); box-shadow: 8px 9px 0 -1px var(--river); }

/* ---------- start: the close on the river, the rain plate framed beside it ---------- */
.t-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(72px, 8vw, 130px) var(--g) clamp(40px, 5vw, 72px); background: var(--river); color: var(--paper); }
.t-start :focus-visible { outline-color: var(--orange); }
.t-start .kicker { color: var(--orange); }
.t-start h2 { color: var(--paper); font-size: clamp(2.9rem, 5.4vw, 6.4rem); margin-bottom: 26px; }
.t-start h2 em { display: block; color: var(--orange); }
.t-start .lead { color: #E9DCC2; max-width: 28em; }
.t-start .actions { margin: 30px 0 34px; }
.t-start .button:hover { box-shadow: 0 0 0 3px var(--paper) inset; }
.t-start-steps { counter-reset: s; display: grid; gap: 14px; max-width: 40rem; font-size: 1.0625rem; color: #E9DCC2; }
.t-start-steps li { counter-increment: s; position: relative; padding-left: 48px; }
.t-start-steps b { color: var(--paper); }
.t-start-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--orange); color: var(--paper); font: 400 1.05rem/1 var(--display); }
.t-start-steps .redact { color: transparent; background: var(--paper); }
/* the sign-up: a cream card on the river, the rain plate across its top */
.t-signup { justify-self: end; width: 100%; max-width: 540px; overflow: hidden; background: var(--card); color: var(--river); border: 2px solid var(--paper); border-radius: 22px; box-shadow: 12px 14px 0 -2px var(--orange); }
.t-signup-plate { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 64%; }
.t-signup #waitlist-form { max-width: none; margin: 0; padding: clamp(22px, 2.4vw, 32px); }
.t-signup :focus-visible { outline-color: var(--river); }
.t-signup h3 { font-size: 2rem; margin-bottom: 4px; }
.t-signup-sub { margin: 0 0 6px; font-size: 1rem; font-weight: 500; color: var(--olive); }
.t-signup #waitlist-form label { margin: 16px 0 6px; font-size: 1rem; }
.t-signup #waitlist-form .button { margin-top: 22px; }
.t-signup #waitlist-form .button:hover { box-shadow: 0 0 0 3px var(--river) inset; }
/* the status line stays in the page for screen readers, but takes no room until it has something to say */
.t-signup #form-status { min-height: 0; margin: 14px 0 0; }
.t-signup #form-status:empty { margin: 0; }
.t-signup .form-footer { margin: 16px 0 0; font-size: .875rem; }
.t-signup .signup-success { padding: 8px 0 4px; border: 0; background: none; }
/* the close runs straight on into the footer, one river, so the footer's line steps down a size */
.site-footer { padding-top: clamp(48px, 5vw, 80px); border-top: 1.5px solid rgba(246, 232, 207, .18); }
.site-footer .footer-line { font-size: clamp(2rem, 3.4vw, 3.6rem); max-width: 20ch; }

/* phones: a Text button that waits at the bottom once the hero's own has gone */
.float-cta { display: none; }
@media (max-width: 1099px) {
  .float-cta { position: fixed; z-index: 40; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 22px; border-radius: 999px; background: var(--orange); color: var(--river); text-decoration: none; box-shadow: 0 0 0 2px var(--river), 0 12px 28px -8px rgba(14, 59, 40, .45); transform: translate(-50%, 140%); transition: transform .35s cubic-bezier(.2, .7, .3, 1); white-space: nowrap; }
  .float-cta.is-shown { transform: translate(-50%, 0); }
  .float-cta span { display: grid; line-height: 1.15; }
  .float-cta b { font-size: 1rem; }
  .float-cta small { font-size: .75rem; font-weight: 500; }
  .float-cta .i { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--river); color: var(--card); }
}
@media (prefers-reduced-motion: reduce) { .float-cta { transition: none; } }

/* ---------- tablets ---------- */
@media (max-width: 1199px) {
  .t-hero { grid-template-columns: minmax(0, 1fr); padding: 110px var(--g) 0; min-height: 0; }
  .t-hero-plate { position: relative; grid-row: 3; margin: -34vw calc(var(--g) * -1) 0; z-index: 0; }
  .t-hero-plate img { transform: none; height: auto; }
  .t-hero-talk { grid-row: 2; justify-self: center; width: min(460px, 100%); margin: 72px 0 0; }
  .t-hero h1 { font-size: clamp(2.9rem, 10vw, 6.6rem); max-width: 11ch; }
  .t-sec-head, .t-why, .t-desk-grid, .t-rules, .t-start { grid-template-columns: minmax(0, 1fr); }
  .t-ladder { grid-template-columns: minmax(0, 1fr); max-width: 640px; row-gap: 30px; }
  .t-ladder > li:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: -26px; margin-left: -11px; }
  .t-ladder > li:not(:last-child)::before { top: auto; right: auto; left: 50%; bottom: -14px; margin-left: -5px; transform: rotate(135deg); }
  .t-why .acard { max-width: 36rem; }
  .t-signup { justify-self: start; }
  .t-kinds-foot { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .t-keep { margin: 0; }
}

/* two phones side by side need room: stack them below a small laptop */
@media (max-width: 900px) {
  .t-vs-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
  .t-vs-or { flex-direction: row; }
  .t-vs-or img { width: 84px; }
  .t-vs-old, .t-vs-new { transform: none; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .t-hero { padding: 92px 16px 0; }
  .t-hero h1 { font-size: clamp(2.8rem, 13.4vw, 3.6rem); max-width: none; }
  .t-hero .lead { margin-top: 20px; font-size: 1.125rem; }
  .t-hero .actions { margin: 24px 0 18px; gap: 14px 22px; }
  .t-hero-talk { margin-top: 56px; }
  .t-hero-talk .thread { min-height: 34rem; font-size: .9375rem; }
  .t-hero-plate { margin: -60vw -16px 0; }
  .t-vs { padding: 56px 16px 64px; }
  .t-vs-new { box-shadow: 7px 8px 0 -1px var(--orange); }
  .t-kinds { padding: 56px 16px; }
  .t-notes { grid-template-columns: minmax(0, 1fr); }
  .t-why { padding: 56px 16px; gap: 36px; }
  .t-why .acard-body { padding: 24px 18px 20px; }
  .t-desk-grid { padding: 56px 16px; gap: 28px; }
  .t-desk-app .desk-ui { grid-template-columns: minmax(0, 1fr); }
  .t-desk-app .desk-side { display: none; }
  .t-desk-app .lanes { grid-template-columns: minmax(0, 1fr); }
  .t-desk-app .lane.done { display: none; }
  .t-tiers { grid-template-columns: minmax(0, 1fr); }
  .t-rules { padding: 56px 16px; }
  .t-stuck { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .t-stuck img { width: 84px; height: 84px; }
  .t-price { padding: 56px 16px 32px; }
  .t-start { padding: 64px 16px 40px; }
  .t-signup { box-shadow: 8px 10px 0 -2px var(--orange); }
}

/* ---------- motion: the page settles as it arrives, never blocks reading ---------- */
@media (prefers-reduced-motion: no-preference) {
  .t-hero-copy > * { animation: rise-in .9s cubic-bezier(.2, .7, .3, 1) both; }
  .t-hero-copy > :nth-child(2) { animation-delay: .08s; }
  .t-hero-copy > :nth-child(3) { animation-delay: .16s; }
  .t-hero-copy > :nth-child(4) { animation-delay: .24s; }
  .t-hero-talk { animation: rise-in 1.1s .2s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }

/* scroll-linked where the browser can: small blocks rise the first stretch of the way in, then hold */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .t-sec-head, .t-vs-screen, .t-ladder > li, .t-why-copy > h2, .t-desk-copy > h2, .t-rules-copy > h2, .t-tiers li, .questions h2, .t-start-copy > h2 {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 28%;
    }
    .t-ladder > li:nth-child(2), .t-tiers li:nth-child(2), .t-vs-new { animation-range: entry 4% entry 32%; }
    .t-ladder > li:nth-child(3), .t-tiers li:nth-child(3) { animation-range: entry 8% entry 36%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 24px; } }