/* anchor.css — AlaCarteLedger and ReceptionistAnchor.
   Token names carry dark-theme fallbacks so this file also works on the Home
   hero, which predates the token layer and defines only a subset. */

.anchor-block { padding: clamp(26px, 3vw, 38px); border-radius: var(--r-xl, 18px); border: 1px solid var(--hairline, rgba(245,243,238,.07)); background: var(--surface-1, rgba(245,243,238,.014)); }
.anchor-title { margin: 0 0 clamp(20px, 2.6vh, 28px); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tertiary); }
.anchor-label { margin: 0 0 14px; font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--heading); max-width: 30ch; }
.anchor-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--tertiary); max-width: 46ch; }
.anchor-note--wide { max-width: none; }
.ledger-per { font-weight: 400; font-size: 13px; color: var(--tertiary); margin-left: 3px; letter-spacing: 0; }

/* variant A — ledger: itemise the lines, let the reader do the arithmetic */
.anchor-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.ledger-col { display: flex; flex-direction: column; }
.ledger-lines { list-style: none; margin: 0; padding: 0; }
.ledger-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hairline, rgba(245,243,238,.07)); font-size: 14.5px; color: var(--body); }
.ledger-line:last-child { border-bottom: none; }
.ledger-name { min-width: 0; }
.ledger-price { font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.ledger-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(221,172,58,.5); font-weight: 700; font-size: 15px; color: var(--heading); }
.ledger-total .ledger-price { font-size: 25px; letter-spacing: -.014em; }
.ledger-salary { display: flex; flex-direction: column; gap: 7px; padding: 16px 0; border-top: 1px solid var(--hairline, rgba(245,243,238,.07)); border-bottom: 1px solid var(--hairline, rgba(245,243,238,.07)); }
.salary-amount { font-weight: 700; font-size: clamp(28px, 3.2vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.salary-derived { font-size: 13.5px; color: var(--tertiary); }
.ledger-ours { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: auto 0 0; padding: 16px 18px; border-radius: var(--r-lg, 12px); background: rgba(221,172,58,.08); border: 1px solid rgba(221,172,58,.26); font-weight: 700; font-size: 15px; color: var(--heading); }
.ledger-price--gold { color: var(--gold-text, var(--gold)); font-size: 25px; letter-spacing: -.014em; }

/* variant B — bars: everything normalised to a monthly basis */
.anchor-bars { display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 26px); }
.bar-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto; gap: clamp(16px, 2.2vw, 28px); align-items: center; }
.bar-head { display: flex; flex-direction: column; gap: 4px; }
.bar-label { font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--heading); }
.bar-sub { font-size: 13px; line-height: 1.4; color: var(--tertiary); }
.bar-track { height: 16px; border-radius: 999px; background: var(--control-off, rgba(245,243,238,.05)); border: 1px solid var(--hairline, rgba(245,243,238,.07)); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(125,122,114,.4), rgba(125,122,114,.75)); }
.bar-row--ours .bar-fill { background: linear-gradient(90deg, var(--gold-600), var(--gold)); }
.bar-value { font-weight: 700; font-size: 20px; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row--ours .bar-value { color: var(--gold-text, var(--gold)); }

/* variant C — split: each anchor kept in its native period, ours matched to it */
.anchor-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 22px); }
.split-card { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg, 14px); background: var(--surface-2, linear-gradient(160deg, rgba(245,243,238,.042), rgba(245,243,238,.012))); border: 1px solid var(--hairline, rgba(245,243,238,.07)); }
.split-figure { margin: 0; font-weight: 700; font-size: clamp(32px, 4vw, 46px); line-height: 1; letter-spacing: -.024em; color: var(--heading); font-variant-numeric: tabular-nums; }
.split-per { font-weight: 400; font-size: 15px; color: var(--tertiary); margin-left: 4px; letter-spacing: 0; }
.split-card .anchor-note { margin-bottom: 24px; }
.split-ours { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: auto 0 0; padding: 15px 17px; border-radius: var(--r-md, 11px); background: rgba(221,172,58,.08); border: 1px solid rgba(221,172,58,.26); }
.split-ours-label { font-weight: 700; font-size: 14px; color: var(--heading); }
.split-ours-val { font-weight: 700; font-size: 21px; color: var(--gold-text, var(--gold)); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 980px) {
  .anchor-ledger, .anchor-split { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr; gap: 10px; }
  .bar-value { justify-self: start; }
  .ledger-ours, .split-ours { margin-top: 22px; }
}


/* Coverage leads the receptionist anchor; the cost figure supports it. */
.anchor-coverage { margin: 0 0 14px; font-weight: 700; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.4; letter-spacing: -.008em; color: var(--heading); text-wrap: pretty; max-width: 30ch; }
/* --body, not --tertiary. This is attribution a sceptical reader is meant to
   check, and --tertiary is the token with an open contrast decision on it —
   putting new copy there would be applying that unapproved change sideways. */
.anchor-source { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--body); max-width: 44ch; }
/* Home has its own token subset and does not define --gold-text; without the
   fallback this rendered in --body there and gold everywhere else. */
.anchor-honoured { margin: 12px 0 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--gold-text, var(--gold)); }

.anchor-bars .anchor-coverage { margin-bottom: clamp(18px, 2.4vh, 26px); max-width: 42ch; }
.anchor-bars .anchor-honoured, .anchor-bars .anchor-source { margin-top: 10px; }
.split-card .anchor-coverage { font-size: clamp(15px, 1.4vw, 17px); margin-bottom: 10px; }

/* ReceptionistAnchor — /services/voice. Coverage leads, cost lands after it. */
.anchor-rec { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
@media (max-width: 820px) { .anchor-rec { grid-template-columns: minmax(0, 1fr); } }
.rec-lead { min-width: 0; }
.rec-lead .anchor-coverage { font-size: clamp(20px, 2.5vw, 30px); line-height: 1.2; letter-spacing: -0.015em; max-width: 22ch; margin-bottom: clamp(20px, 2.6vh, 28px); }
.rec-gap { display: flex; align-items: baseline; gap: 14px; margin: 0; padding-top: 18px; border-top: 1px solid var(--anchor-rule, rgba(245,243,238,0.13)); }
.rec-gap-num { font-size: clamp(40px, 5.5vw, 68px); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; color: var(--gold, #DDAC3A); font-variant-numeric: tabular-nums; }
.rec-gap-label { font-size: 14.5px; line-height: 1.4; color: var(--body, #B4B1A8); max-width: 16ch; }
.rec-cost { min-width: 0; }
.ledger-col--arg { display: flex; flex-direction: column; }