/* Georgian Partners — GTA real estate agent referral programme.
   Palette and type carried over from the construction microsite, so the
   subdomains read as one company. */

:root {
  --espresso: #2B2620;
  --bronze: #8A6F4D;
  --bronze-text: #765D3E; /* darker bronze for small text on light grounds */
  --gold: #C2A577;
  --cream: #EFE9DF;
  --sand: #E4DCCD;
  --ink: #1A231D;
  --field: #C9BEA9;
  --paper: #FFFFFF;
  --muted: #5C564E;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Public Sans', system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.wrap {
  max-width: 1180px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.eyebrow { display: inline-block; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze-text); font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--field); }

/* ── Header ─────────────────────────────────────────── */
.site-header { background: var(--cream); border-bottom: 1px solid var(--field); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }
.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.lockup-logo { width: 146px; height: auto; }
.lockup-rule { width: 1px; height: 30px; background: var(--field); }
.lockup-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-text); font-weight: 500; line-height: 1.4; }
.header-cta { display: flex; align-items: center; gap: 18px; }
.tel { font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.btn {
  display: inline-block; text-decoration: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 24px;
  background: var(--espresso); color: var(--cream); transition: background .18s ease;
}
.btn:hover { background: #3A332B; }
.btn-light { background: var(--gold); color: var(--espresso); }
.btn-light:hover { background: #D2B88C; }
.btn-ghost { background: transparent; color: var(--cream); border: 1px solid rgba(239,233,223,0.5); }
.btn-ghost:hover { background: rgba(239,233,223,0.1); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ── Hero ───────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; background: var(--espresso); color: var(--cream); overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.hero > .scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,20,16,0.86) 0%, rgba(23,20,16,0.74) 45%, rgba(23,20,16,0.90) 100%); }
/* Two columns, as the client's mockup lays it out: the pitch on the left, the
   assurance card on the right carrying the guarantee and the bonus. */
.hero .wrap { padding-block: clamp(62px, 9vw, 112px); display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 em { font-style: normal; color: var(--gold); }

.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.chip { border: 1px solid rgba(194,165,119,0.34); background: rgba(23,20,16,0.42); padding: 16px 18px 18px; }
.chip b { display: block; font-size: 14px; font-weight: 500; color: var(--cream); letter-spacing: 0.01em; }
.chip span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(239,233,223,0.62); }

.assure { position: relative; background: rgba(28,24,19,0.78); border: 1px solid rgba(194,165,119,0.34); padding: clamp(26px, 3vw, 38px); backdrop-filter: blur(3px); }
.assure-tab { position: absolute; top: -1px; right: -1px; background: var(--gold); color: var(--espresso); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; padding: 8px 16px; }
.assure h2 { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 28px); line-height: 1.16; color: var(--cream); margin: 0; max-width: 18ch; }
.assure .sub { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: rgba(239,233,223,0.72); }
.assure ul { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(194,165,119,0.26); display: flex; flex-direction: column; gap: 16px; }
.assure li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.65; color: rgba(239,233,223,0.78); }
.assure li::before { content: ''; position: absolute; left: 0; top: 6px; width: 13px; height: 7px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg); }
.assure li b { color: var(--cream); font-weight: 500; }
.bonus { margin-top: 26px; border: 1px solid rgba(194,165,119,0.34); background: rgba(194,165,119,0.08); padding: 20px 22px; text-align: center; }
.bonus .lab { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.bonus .fig { display: block; margin-top: 8px; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 36px); color: var(--cream); letter-spacing: -0.02em; }
.bonus .note { display: block; margin-top: 6px; font-size: 12px; color: rgba(239,233,223,0.62); }
.hero .eyebrow { color: var(--gold); border-bottom-color: rgba(194,165,119,0.4); }
.hero h1 { font-size: clamp(36px, 5.6vw, 68px); line-height: 1.02; color: var(--cream); margin-top: 26px; max-width: 16ch; }
.hero .lede { margin: 22px 0 0; font-size: 17px; line-height: 1.8; color: rgba(239,233,223,0.86); max-width: 58ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.assurances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(194,165,119,0.3);
  border: 1px solid rgba(194,165,119,0.3); margin-top: 40px; }
.assurances div { background: rgba(23,20,16,0.5); padding: 15px 16px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--sand); }

.assure-cta { margin-top: 20px; width: 100%; justify-content: center; }

/* ── Credibility strip ──────────────────────────────── */
/* Sits directly under the hero so registrations are read before promises. */
.creds { background: #211D18; color: var(--sand); border-bottom: 1px solid rgba(194,165,119,0.22); }
.creds .wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px 0; padding-block: 0; }
.creds > .wrap > div { padding: 22px 24px; border-left: 1px solid rgba(194,165,119,0.18); }
.creds > .wrap > div:first-child { border-left: 0; }
.creds b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--gold); letter-spacing: -0.01em; }
.creds span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.55; color: rgba(228,220,205,0.72); }

/* ── Generic section ────────────────────────────────── */
section { scroll-margin-top: 86px; }
.band { padding-block: clamp(62px, 10vw, 124px); }
.band.paper { background: var(--paper); border-top: 1px solid var(--field); }
.band h2 { font-size: clamp(28px, 3.9vw, 50px); line-height: 1.06; margin-top: 26px; max-width: 19ch; }
.band .lede { margin: 22px 0 0; font-size: 17px; line-height: 1.85; color: var(--muted); max-width: 58ch; }

/* ── Guarantee split ────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 46px; align-items: start; margin-top: 34px; }
.split figure { margin: 0; }
.split figure img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 30%; background: var(--sand); }
.split figcaption { margin-top: 12px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-text); }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ticks li { padding-left: 22px; position: relative; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 12px; width: 12px; height: 1px; background: var(--bronze); }
.ticks b { display: block; color: var(--ink); font-weight: 500; font-size: 16px; margin-bottom: 2px; }

/* ── Advantage cards ────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--field); border: 1px solid var(--field); margin-top: 38px; }
.cards > div { background: var(--paper); padding: 34px 32px 38px; }
.cards h3 { font-size: 23px; letter-spacing: -0.015em; }
.cards p { margin: 12px 0 0; font-size: 15px; line-height: 1.8; color: var(--muted); }

/* ── Stat ───────────────────────────────────────────── */
.stat { background: var(--espresso); color: var(--cream); padding: 42px 40px; margin-top: 44px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 36px; border-top: 2px solid var(--gold); }
.stat b { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); font-weight: 400; color: var(--gold); letter-spacing: -0.02em; }
.stat span { font-size: 14px; line-height: 1.7; color: rgba(239,233,223,0.8); max-width: 44ch; }

/* ── Calculator ─────────────────────────────────────── */
.calc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1px; background: var(--field); border: 1px solid var(--field); margin-top: 38px; }
.calc-controls { background: var(--paper); padding: 30px 28px 34px; }
.calc-out { background: var(--espresso); color: var(--cream); padding: 30px 28px 34px; display: flex; flex-direction: column; justify-content: center; }
.calc label { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13.5px; font-weight: 400; }
.calc .amount { font-family: var(--serif); font-size: 24px; color: var(--bronze-text); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 12px 0 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--field); }
input[type=range]::-moz-range-track { height: 2px; background: var(--field); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--espresso); border: 0; margin-top: -8px; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--espresso); border: 0; }
.scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.tier { border: 1px solid var(--field); padding: 14px 16px; background: var(--paper); cursor: pointer; text-align: left; font: inherit; color: var(--ink); appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease; }
.tier[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.tier b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.tier span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.tier[aria-pressed="true"] span { color: rgba(239,233,223,0.7); }
.calc-out .eyebrow { color: var(--gold); }
.calc-out .fee { font-family: var(--serif); font-size: clamp(38px, 6vw, 58px); line-height: 1.04; margin-top: 12px; font-variant-numeric: tabular-nums; }
.calc-out .basis { margin: 10px 0 0; font-size: 13px; color: rgba(239,233,223,0.72); }
.calc-out .btn { margin-top: 24px; align-self: flex-start; }
.calc-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* The conditions the figure depends on, beside the figure rather than in a footnote. */
.terms { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(239,233,223,0.18); font-size: 12.5px; line-height: 1.65; }
.terms dt { font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; color: var(--gold); }
.terms dd { margin: 3px 0 12px; color: rgba(239,233,223,0.74); }
.terms dd:last-child { margin-bottom: 0; }

/* ── Form modes ─────────────────────────────────────── */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px; }
.mode { border: 1px solid var(--field); background: #FBF9F6; color: var(--ink); font: inherit; font-size: 14px;
  padding: 13px 16px; cursor: pointer; appearance: none; -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.mode[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.opt { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }

/* ── Gallery ────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; background: var(--sand); }
.gallery figcaption { margin-top: 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze-text); }

/* ── Team ───────────────────────────────────────────── */

/* ── Process ────────────────────────────────────────── */
/* The process band sits on an aerial of a wooded estate lot, which is the thing
   the whole page is about. The step cards stay paper, so they read as documents
   laid over the property rather than as panels tinted by it. */
.process { position: relative; isolation: isolate; overflow: hidden;
  background: var(--espresso); color: var(--cream); }
.process > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: -2; }
.process > .scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,20,16,0.88) 0%, rgba(23,20,16,0.80) 45%, rgba(23,20,16,0.92) 100%); }
.process .eyebrow { color: var(--gold); border-bottom-color: rgba(194,165,119,0.4); }
.process h2 { color: var(--cream); }
.process .lede { color: rgba(239,233,223,0.84); }
.process .steps { background: rgba(194,165,119,0.28); border-color: rgba(194,165,119,0.28); }
/* The cards are paper, so they must not inherit the band's cream text. */
.process .steps li { color: var(--ink); }

.steps { counter-reset: s; list-style: none; margin: 38px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--field); border: 1px solid var(--field); }
.steps li { background: var(--paper); padding: 32px 28px 36px; position: relative; }
.steps li::before { counter-increment: s; content: "0" counter(s); display: block; font-family: var(--serif); font-size: 26px; color: var(--gold); letter-spacing: -0.02em; margin-bottom: 14px; }
.step-kicker { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze-text); font-weight: 500; }
  .steps h3 { font-size: 20px; margin-top: 8px; }
.steps p { margin: 9px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ── Form ───────────────────────────────────────────── */
/* The register band carries a photograph behind a heavy scrim, so the form card
   reads as the one lit object on the page. Heading block is centred over it. */
.form-band { position: relative; isolation: isolate; overflow: hidden;
  background: var(--espresso); color: var(--cream); }
.form-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; z-index: -2; }
.form-band > .scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,20,16,0.90) 0%, rgba(23,20,16,0.82) 42%, rgba(23,20,16,0.94) 100%); }
.form-band .wrap { text-align: center; }
.form-band h2, .form-band .lede { margin-left: auto; margin-right: auto; }
/* Centring the heading block must not reach the fields themselves. */
.form-card { text-align: left; }
.form-band .eyebrow { color: var(--gold); }
.form-band h2 { color: var(--cream); }
.form-band .lede { color: rgba(239,233,223,0.82); }
form { margin: 0; }
.form-card { background: var(--paper); color: var(--ink); padding: clamp(28px, 4vw, 48px); margin: 40px auto 0; max-width: 820px; box-shadow: 0 24px 60px rgba(12,10,8,0.3); }
.form-card legend { color: var(--bronze-text); }
.form-card .f label { color: var(--muted); }
.form-card .f input, .form-card .f select, .form-card .f textarea { background: #FBF9F6; border-color: var(--field); color: var(--ink); }
.form-card .f input::placeholder, .form-card .f textarea::placeholder { color: #A49C90; }
.form-card .consent { color: var(--muted); }
.form-card .fineprint { color: #8A8378; }
.form-card .btn { background: var(--espresso); color: var(--cream); }
.form-card .btn:hover { background: #3A332B; }
fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 500; padding: 0; margin-bottom: 14px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f { display: flex; flex-direction: column; gap: 7px; }
.f.span2 { grid-column: span 2; }
.f label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(239,233,223,0.78); }
.f input, .f select, .f textarea {
  font: inherit; font-size: 15px; color: var(--cream); background: rgba(239,233,223,0.07);
  border: 1px solid rgba(239,233,223,0.22); padding: 13px 14px; border-radius: 0; width: 100%;
}
.f textarea { min-height: 96px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: rgba(239,233,223,0.4); }
.f select option { color: var(--ink); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.65; color: rgba(239,233,223,0.82); margin-bottom: 22px; }
.consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--gold); }
.fineprint { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: rgba(239,233,223,0.55); max-width: 62ch; }
.hp { position: absolute; left: -9999px; }

/* ── FAQ ────────────────────────────────────────────── */
.faq { margin-top: 34px; border-top: 1px solid var(--field); max-width: 820px; }
details { border-bottom: 1px solid var(--field); }
summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-family: var(--serif); font-size: 19px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 6px; top: 19px; font-family: var(--sans); font-size: 19px; color: var(--bronze-text); }
details[open] summary::after { content: '\2013'; }
details p { margin: 0 0 22px; font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 64ch; }

/* ── Closing ────────────────────────────────────────── */
/* The closing band sits on a sunset facade. The scrim is weighted to the centre
   so the warm sky stays readable at the edges behind the type. */
.closing { position: relative; isolation: isolate; overflow: hidden;
  background: var(--espresso); color: var(--cream); text-align: center; }
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; z-index: -2; }
.closing > .scrim { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 100% at 50% 50%, rgba(23,20,16,0.88) 0%, rgba(23,20,16,0.66) 100%),
    linear-gradient(180deg, rgba(23,20,16,0.80) 0%, rgba(23,20,16,0.62) 50%, rgba(23,20,16,0.86) 100%); }
.closing h2 { color: var(--cream); margin: 0 auto; }
.closing p { margin: 18px auto 0; font-size: 16px; line-height: 1.75; color: rgba(239,233,223,0.82); max-width: 52ch; }
.closing .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { background: #211D18; color: var(--sand); padding-block: 30px; font-size: 12.5px; line-height: 1.75; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; align-items: baseline; }
.site-footer a { color: var(--gold); text-decoration: none; }

/* ── Thank you ──────────────────────────────────────── */
/* Reuses the register band's photograph and scrim, so the confirmation reads
   as the same room the agent just submitted from. */
.ty { min-height: calc(100svh - 86px); display: flex; align-items: center; }
.ty h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04;
  letter-spacing: -0.02em; color: var(--cream); margin: 26px auto 0; max-width: 18ch; }
.ty .lede { color: rgba(239,233,223,0.84); }
.ty-card { margin-top: 44px; position: relative; }
/* A rule rather than a tick: the submission is a registration, not a purchase. */
.ty-mark { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); }
/* The band paints headings cream for the dark background; inside the paper card they invert. */
.ty-card h2 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -0.015em; margin: 0; color: var(--ink); }

.ty-steps { list-style: none; counter-reset: ty; margin: 26px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 24px; }
.ty-steps li { counter-increment: ty; padding-left: 44px; position: relative; }
.ty-steps li::before { content: counter(ty, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font-family: var(--serif); font-size: 15px; color: var(--bronze-text); letter-spacing: 0.06em; }
.ty-steps b { display: block; font-weight: 500; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.ty-steps span { display: block; font-size: 15px; line-height: 1.8; color: var(--muted); }

.ty-urgent { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--field);
  font-size: 15px; line-height: 1.75; color: var(--muted); }
.ty-urgent a { color: var(--bronze-text); text-underline-offset: 3px; }
.ty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* The card is paper, so the ghost button has to invert out of its dark default. */
.ty-actions .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--field); }
.ty-actions .btn-ghost:hover { background: rgba(43,38,32,0.05); border-color: var(--bronze); }
.ty-foot { margin: 28px auto 0; max-width: 62ch; font-size: 12.5px; line-height: 1.7; color: rgba(239,233,223,0.52); }

@media (max-width: 900px) {
  .split, .calc, .cards, .gallery { grid-template-columns: 1fr; }
  .creds .wrap { grid-template-columns: 1fr 1fr; }
  .creds > .wrap > div:nth-child(odd) { border-left: 0; }
  .hero .wrap { grid-template-columns: 1fr; gap: 38px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .assurances, .chips { grid-template-columns: 1fr 1fr; }
  .header-cta .btn { display: none; }
  .lockup-logo { width: 120px; }
}
@media (max-width: 600px) {
  .steps, .fields, .tiers { grid-template-columns: 1fr; }
  .creds .wrap { grid-template-columns: 1fr; }
  .creds > .wrap > div { border-left: 0; border-top: 1px solid rgba(194,165,119,0.18); }
  .creds > .wrap > div:first-child { border-top: 0; }
  .modes { grid-template-columns: 1fr; }
  .ty { min-height: 0; }
  .ty-actions .btn { width: 100%; }
  .f.span2 { grid-column: span 1; }
  .assurances, .chips { grid-template-columns: 1fr; }
}