/* LAT-2785: the three CTA looks. Every colour, face and geometry value below is
   present verbatim in assets/cta.json `brand` (colours, type, card_geometry, looks);
   scripts/check-cta-brand.py diffs this file against it. Nothing is drawn locally.
   Card markup/geometry lifted from index.html .bcard* (LAT-2622), per doctrine 3d.0. */

.cta-unit{max-width:760px;margin:44px auto 8px;display:grid;gap:22px}
.cta-unit-core,.cta-unit-offer{max-width:980px}
.cta-cardwrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-cardwrap-both{gap:10px}
.cta-mark{position:absolute;top:9%;right:6.5%;width:34px;height:43px;opacity:.9;pointer-events:none}
.cta-mark-inline{position:static;width:14px;height:18px;vertical-align:-3px;margin-right:6px;opacity:.9}
.cta-s{color:#94a3b8;font-weight:500}

/* THE CARD, front: white, orange band, the mark in mark_orange */
.cta-bcard{width:100%;max-width:340px;aspect-ratio:3.5/2;background:#ffffff;position:relative;overflow:hidden;border-radius:6px;box-shadow:0 1px 3px rgba(15,20,28,.10),0 12px 30px rgba(15,20,28,.16)}
.cta-bcard-front{transform:rotate(-1.6deg)}
.cta-bcard-hero{transform:rotate(-1.2deg);margin:0 auto}
.cta-bcard-band{position:absolute;left:0;top:0;bottom:0;width:9px;background:#C65000}
.cta-bcard-pad{padding:24px 26px 20px 34px;height:100%;display:flex;flex-direction:column;position:relative;z-index:1}
.cta-bcard-n{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-size:1.85rem;font-weight:600;letter-spacing:-0.03em;line-height:1;color:#0f172a;margin:0}
.cta-bcard-r{font-family:'Geist Mono',ui-monospace,monospace;font-size:0.6rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#C65000;margin:7px 0 0}
.cta-bcard-h{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-size:0.92rem;line-height:1.3;color:#475569;margin:auto 0 0}
.cta-bcard-m{margin-top:12px;padding-top:10px;border-top:2px solid #e8e2da;display:flex;justify-content:space-between;gap:10px;font-family:'Geist Mono',ui-monospace,monospace;font-size:0.68rem;font-weight:600;color:#C65000}
.cta-bcard-m a{color:inherit;text-decoration:none}
.cta-bcard-s{color:#94a3b8;font-weight:500}

/* THE CARD, back: orange ground, white type, the mark in white */
.cta-bcard-back{background:#C65000;transform:rotate(1.4deg);margin-top:-6px}
.cta-bcard-back .cta-mark{width:52px;height:66px;opacity:.95}
.cta-bcard-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:0.6rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#f7d9be;margin:0}
.cta-bcard-bh{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-size:1.6rem;font-weight:600;letter-spacing:-0.03em;line-height:1.05;color:#ffffff;margin:8px 0 0}
.cta-bcard-bb{font-size:0.82rem;line-height:1.35;color:#fde3cd;margin:8px 0 0}
.cta-bcard-go{display:inline-block;margin-top:10px;font-family:'Geist Mono',ui-monospace,monospace;font-size:0.68rem;font-weight:600;letter-spacing:.06em;color:#ffffff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:2px;width:max-content}
.cta-bk-f{margin-top:auto;padding-top:9px;border-top:2px solid rgba(255,255,255,.32);font-family:-apple-system,'Segoe UI',Arial,sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-0.02em;color:#ffffff;line-height:1}
.cta-bk-f .lite{font-weight:400;color:#fde3cd}

/* the first-person action (full_plus_action) */
.cta-action{margin:4px 0 0;text-align:center}
.cta-action-btn{display:inline-block;padding:12px 22px;background:#C65000;color:#ffffff;border-radius:6px;font-weight:600;font-size:0.95rem;text-decoration:none}

/* the signature: one line */
.cta-sig{max-width:760px;margin:36px auto 8px;padding:14px 18px;border:1px solid #e8e2da;border-left:9px solid #C65000;border-radius:0 6px 6px 0;background:#ffffff;font-size:0.95rem;line-height:1.5;color:#475569}
.cta-sig-h{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;color:#0f172a}
.cta-sig-n{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-weight:600;letter-spacing:-0.03em;color:#0f172a}
.cta-sig-r{font-family:'Geist Mono',ui-monospace,monospace;font-size:0.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C65000;margin:0 10px 0 6px}
.cta-sig-a{font-family:'Geist Mono',ui-monospace,monospace;font-weight:600;color:#C65000;text-decoration:none;border-bottom:2px solid #C65000;padding-bottom:1px;white-space:nowrap}

/* THE FOUR WORDS: paper with a .5em ink rule on top, the mark in mark_orange */
.cta-fw{background:#ffffff;color:#0f172a;border-radius:6px;position:relative;overflow:hidden;border-top:.5em solid #0f172a;padding:22px 24px 18px;box-shadow:0 1px 3px rgba(15,20,28,.10),0 12px 30px rgba(15,20,28,.16)}
.cta-fw .cta-mark{width:38px;height:48px}
.cta-fw-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:0.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#C65000;margin:0}
.cta-fw-h{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-size:1.5rem;line-height:1.1;letter-spacing:-.025em;color:#0f172a;margin:.5em 0 0}
.cta-fw-h em{font-style:normal;color:#C65000}
.cta-fw-t{display:inline-block;margin-left:.4em;font-family:-apple-system,'Segoe UI',Arial,sans-serif;font-weight:700;letter-spacing:-0.02em;font-size:.82em;color:#0f172a;vertical-align:baseline}
.cta-fw-rows{margin-top:14px}
.cta-fw-row{display:grid;grid-template-columns:6.4em 1fr;gap:.8em;border-top:1px solid #e8e2da;padding:.5em 0;font-size:.86rem;line-height:1.35;align-items:baseline}
.cta-fw-row b{font-family:'Geist Mono',ui-monospace,monospace;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:#C65000;font-weight:600}
.cta-fw-row span{color:#475569}
.cta-fw-compact .cta-fw-h{font-size:1.2rem}
.cta-fw-compact .cta-fw-row{font-size:.8rem}
.cta-fw-f,.cta-vc-f{margin-top:12px;padding-top:10px;display:flex;justify-content:space-between;gap:10px;font-family:'Geist Mono',ui-monospace,monospace;font-size:0.68rem;font-weight:600}
.cta-fw-f{border-top:2px solid #e8e2da;color:#C65000}
.cta-fw-f a{color:inherit;text-decoration:none}

/* THE DIFFERENTIATOR: ink, white type, orange_on_ink for the second line, the mark in white at .55 */
.cta-vc{background:#0f172a;color:#ffffff;border-radius:6px;position:relative;overflow:hidden;padding:22px 24px 18px;box-shadow:0 1px 3px rgba(15,20,28,.10),0 12px 30px rgba(15,20,28,.16)}
.cta-vc .cta-mark{width:38px;height:48px}
.cta-vc-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:0.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#ff9a5c;margin:0}
.cta-vc-h{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;font-size:1.6rem;line-height:1.1;letter-spacing:-.025em;color:#ffffff;margin:.5em 0 0}
.cta-vc-h em{font-style:normal;color:#ff9a5c}
.cta-vc-rows{margin-top:14px}
.cta-vc-row{display:grid;grid-template-columns:1fr 1fr;gap:.9em;border-top:1px solid rgba(255,255,255,.14);padding:.5em 0;font-size:.86rem;line-height:1.35}
.cta-vc-row .t{color:#8b97a8}
.cta-vc-row .o{color:#ffffff;font-weight:500}
.cta-vc-f{border-top:1px solid rgba(255,255,255,.14);color:#ff9a5c}
.cta-vc-f a{color:inherit;text-decoration:none}
.cta-vc-f .cta-s{color:#8b97a8}

/* THE DIFFERENTIATOR, BYLINE RENDERING (LAT-2830).
   Sits directly under the tool door in an article's FIRST VIEWPORT. Measured
   2026-09-04: the door is one line at 473px inside an 800px viewport at 1280
   (0.9%, screen 1 of 54 at 390), with ~180px free beneath it before the body.
   This block is built to cost a fraction of that, so it never pushes the body
   text below the fold. No panel, no rows, no shadow: the door above already
   carries the cream block and the orange rule, and a second panel under it
   competes with the thing we want clicked.
   The 17px left pad is deliberate: it equals the door's 3px border plus its
   14px padding, so this line's text sits on the door's text edge rather than
   floating at the page margin. If the door's inline style changes, change this. */
.cta-vc-byline{margin:8px 0 0;padding:0 0 0 17px;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em .7em;font-size:.9rem;line-height:1.45}
.cta-vc-byline-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C65000;white-space:nowrap}
.cta-vc-byline-s{color:#0f172a;font-weight:500}
/* arm B has no second clause, so diff_sentence_html() emits no <em>. Kept so a
   flip back to a two-clause arm renders without a CSS change. */
.cta-vc-byline-s em{font-style:normal;color:#C65000}
/* LAT-2856: an author `display` beats the UA sheet's [hidden]{display:none}, so
   without this the A/B pair renders BOTH arms and the experiment silently shows
   every visitor two contradictory sentences. Must stay adjacent to the rule
   above; anything that sets display on this class needs the same guard. */
.cta-vc-byline[hidden]{display:none !important}

@media (max-width:640px){
  .cta-unit{margin:32px 16px 8px}
  .cta-sig{margin:28px 16px 8px}
  .cta-fw-row{grid-template-columns:1fr;gap:.2em}
  .cta-vc-row{grid-template-columns:1fr}
  /* at 390 the kicker wraps onto its own line above the sentence */
  .cta-vc-byline{font-size:.86rem;gap:.15em .6em}
}

/* LAT-2917 — the framing above a rung (cta.json ctas.<rung>.framing).
   Operator, 2026-09-07: the CTA must carry its framing in the source of truth,
   in all formats. Without it the unit is an artefact rather than an ask.
   Kicker matches .cta-fw-k exactly: the mono micro-label is the house signal
   that a block is ours, and inventing a second treatment here would be the
   drift this file exists to end. */
.cta-framing{max-width:620px;margin:0 auto 18px;text-align:center}
.cta-framing-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:0.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#C65000;margin:0 0 6px}
.cta-framing-l{font-size:1.02rem;line-height:1.5;color:#0f172a;margin:0}
@media (max-width:640px){.cta-framing{margin-bottom:14px}.cta-framing-l{font-size:0.96rem}}


/* THE PROMISE, panel rendering (LAT-3062): the homepage's bottom rung. The address is
   the ad. Two-line lockup per brand.ds_lockup (ds black, @ orange; mcp black,
   analytics. orange, ai lighter), the sentence beneath in body grey, nothing else:
   no button, no kicker, no card. The whole lockup is the mailto. */
.cta-pr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.cta-pr-lock{display:flex;flex-direction:column;align-items:center;gap:.34em;text-decoration:none;color:#000000;font-family:-apple-system,'Segoe UI',Arial,sans-serif;font-weight:800;letter-spacing:-.05em;line-height:.95}
.cta-pr-h{font-size:clamp(96px,14vw,168px)}
.cta-pr-h em{font-style:normal;color:#ff7b00;font-size:.88em;letter-spacing:0}
.cta-pr-d{font-size:clamp(20px,2.6vw,30px);letter-spacing:-.02em;font-weight:700}
.cta-pr-d em{font-style:normal;color:#ff7b00}
.cta-pr-d .l{font-weight:500}
.cta-pr-s{margin:0;max-width:46ch;font-family:-apple-system,'Segoe UI',Arial,sans-serif;font-weight:500;font-size:clamp(17px,1.6vw,21px);line-height:1.4;color:#475569}
/* the signature rail under the panel (operator, 2026-09-11, the ad unit): the four words in
   the rail's mono, ember, uppercase, .13em, separated by dots, over a 2px ember rule, ending
   in the tail in ink at 700. Same values as index.html .ds-sign-r; no name. */
.cta-pr-rail{margin:18px 0 0;padding-top:16px;border-top:2px solid #C65000;width:100%;max-width:760px;font-family:'Geist Mono',ui-monospace,monospace;font-size:0.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#C65000;line-height:1.6}
.cta-pr-rail span+span::before{content:" \00B7  ";color:#C65000}
.cta-pr-rail .cta-pr-tail{font-weight:700;color:#0f172a}