/* offerpage.css - GetStartedOffer.aspx (/offer/{studio}/{offer-slug}).
   Two jobs. (1) Hide the parts of the Get Started funnel that make no sense on a single-offer page: its step counter,
   its back chevron and its "Back to options" button. (2) Style the offer header that offerpage.js draws above the
   funnel's own order-review step. The header carries the ring label's look (Oswald, the gold accent) so the label the
   buyer tapped is recognisably the thing they landed on. Everything below the header is the funnel's own styling,
   untouched. Every header rule is scoped under .l9-offerhead because the master loads Bootstrap.
   Colours (2026-10-14, Terence: "the colours drifted"): every value is a token from l9.tokens.css. The header used to
   carry its own palette (an orange gold, its own greys), the one surface the token sweep had not reached. */

/* (1) funnel chrome that belongs to a multi-step flow */
body.l9-offerpage #screen-step6 > .gs-screen-header,
body.l9-offerpage #screen-step6 > .gs-progress-wrap { display:none !important; }
/* the "To finish, add ..." hint waits until the buyer has started the form (see offerpage.js) */
body.l9-offerpage:not(.oh-touched) #gsCtaHint { display:none !important; }
body.l9-offerpage #gsOfferDateSlot { margin:18px 0 6px; }
body.l9-offerpage #gsOfferDateSlot .gs-activation-card { margin-top:0 !important; }

/* (2) the offer header: the names below are the header's own words for the site tokens, nothing else */
.l9-offerhead { --oh-accent:var(--l9-accent); --oh-ink:var(--l9-text); --oh-soft:var(--l9-text-muted); --oh-mute:var(--l9-text-muted); --oh-card:var(--l9-surface); --oh-line:var(--l9-border); color:var(--oh-ink); padding-top:14px; }
.l9-offerhead * { box-sizing:border-box; }
.l9-offerhead button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }

.l9-offerhead .oh-label { background:var(--oh-card); border:1px solid color-mix(in srgb, var(--oh-accent) 30%, transparent); border-radius:18px; padding:20px 20px 18px; }
.l9-offerhead .oh-label.promo { box-shadow:0 0 0 1px color-mix(in srgb, var(--oh-accent) 50%, transparent), 0 0 34px color-mix(in srgb, var(--oh-accent) 18%, transparent); }
.l9-offerhead .oh-row1 { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:18px; }
.l9-offerhead .oh-kicker { font-family:Oswald,sans-serif; font-size:12px; letter-spacing:.24em; color:var(--oh-accent); text-transform:uppercase; }
.l9-offerhead .oh-badge { font-family:Oswald,sans-serif; font-size:10px; letter-spacing:.16em; padding:3px 8px; border-radius:3px; background:var(--oh-accent); color:#111111; white-space:nowrap; text-transform:uppercase; }
.l9-offerhead .oh-count { margin-top:14px; border-radius:12px; border:2px solid color-mix(in srgb, var(--oh-accent) 80%, transparent); background:color-mix(in srgb, var(--oh-accent) 16%, transparent); padding:8px 8px 10px; text-align:center; }
.l9-offerhead .oh-count small { display:block; font-family:Oswald,sans-serif; font-size:11px; letter-spacing:.3em; color:var(--oh-accent); }
.l9-offerhead .oh-digits { display:flex; justify-content:center; align-items:flex-start; gap:6px; margin-top:2px; }
.l9-offerhead .oh-digits div { min-width:54px; }
.l9-offerhead .oh-digits b { display:block; font-family:Oswald,sans-serif; font-weight:600; font-size:38px; line-height:1; color:var(--oh-ink); }
.l9-offerhead .oh-digits i { display:block; font-style:normal; font-family:Oswald,sans-serif; font-size:10px; letter-spacing:.18em; color:var(--oh-accent); margin-top:3px; }
.l9-offerhead .oh-digits span { font-family:Oswald,sans-serif; font-weight:600; font-size:28px; line-height:1.2; color:var(--oh-accent); opacity:.7; }
.l9-offerhead .oh-ended { font-family:Oswald,sans-serif; font-size:22px; letter-spacing:.1em; color:var(--oh-ink); text-transform:uppercase; padding:6px 0 2px; }
.l9-offerhead h1 { font-family:Oswald,sans-serif; font-weight:600; font-size:32px; letter-spacing:.02em; line-height:1.05; margin:14px 0 0; color:var(--oh-ink); }
.l9-offerhead .oh-sub { font-size:14px; color:var(--oh-soft); margin-top:6px; line-height:1.45; }
.l9-offerhead .oh-pricerow { margin-top:12px; }
.l9-offerhead .oh-bigprice { font-family:Oswald,sans-serif; font-weight:600; font-size:56px; line-height:1; color:var(--oh-accent); }
.l9-offerhead .oh-bigprice small { font-size:18px; font-weight:400; color:var(--oh-soft); margin-left:6px; }

.l9-offerhead .oh-cap { font-family:Oswald,sans-serif; font-size:12px; letter-spacing:.24em; color:var(--oh-accent); margin:22px 0 10px; }
/* one selectable row per variant: name and its own detail line on the left, price on the right */
.l9-offerhead .oh-row { display:flex; width:100%; align-items:center; gap:12px; text-align:left; border:1px solid var(--oh-line); border-radius:14px; padding:14px 14px; background:var(--oh-card); margin-top:8px; }
.l9-offerhead .oh-row.on { border-color:var(--oh-accent); background:color-mix(in srgb, var(--oh-accent) 8%, transparent); }
.l9-offerhead .oh-dot { flex:none; width:20px; height:20px; border-radius:50%; border:2px solid var(--oh-line); }
.l9-offerhead .oh-row.on .oh-dot { border-color:var(--oh-accent); background:radial-gradient(circle, var(--oh-accent) 0 45%, transparent 50%); }
.l9-offerhead .oh-txt { flex:1; min-width:0; }
.l9-offerhead .oh-txt b { display:block; font-size:15px; font-weight:600; color:var(--oh-ink); }
.l9-offerhead .oh-txt i { display:block; font-style:normal; font-size:12.5px; color:var(--oh-soft); margin-top:3px; line-height:1.4; }
.l9-offerhead .oh-price { flex:none; text-align:right; font-family:Oswald,sans-serif; font-size:19px; font-weight:600; color:var(--oh-accent); white-space:nowrap; }
.l9-offerhead .oh-price em { display:block; font-family:Inter,system-ui,sans-serif; font-style:normal; font-size:11px; font-weight:600; color:var(--oh-soft); margin-top:3px; white-space:normal; max-width:96px; }
.l9-offerhead .oh-row.on .oh-price em { color:var(--oh-accent); }
.l9-offerhead .oh-bonus { margin-top:18px; border-radius:16px; padding:16px 14px 14px; background:linear-gradient(180deg, color-mix(in srgb, var(--oh-accent) 10%, transparent), color-mix(in srgb, var(--oh-accent) 3%, transparent)); border:1px solid color-mix(in srgb, var(--oh-accent) 35%, transparent); }
.l9-offerhead .oh-bonus h3 { font-family:Oswald,sans-serif; font-weight:600; font-size:19px; letter-spacing:.08em; text-transform:uppercase; margin:0; color:var(--oh-accent); }
.l9-offerhead .oh-bonus p { font-size:13.5px; color:var(--oh-soft); line-height:1.5; margin:8px 0 6px; }
.l9-offerhead .oh-note { font-size:13px; color:var(--oh-accent); margin:12px 2px 0; line-height:1.45; }
.l9-offerhead .oh-empty { text-align:center; padding:60px 10px; }
.l9-offerhead .oh-empty p { color:var(--oh-soft); font-size:14px; margin:10px 0 22px; }
.l9-offerhead .oh-cta { display:inline-block; text-decoration:none; font-weight:600; font-size:15px; padding:14px 22px; border-radius:12px; background:var(--oh-accent); color:#111111; }
.l9-offerhead .oh-cta:hover { background:var(--l9-accent-hover); color:#111111; }