/* Offer layer for the $140 a year flat / $15 a month price (see /offer.js); the code takes both plans down ($120 a year, $12 a month). Nothing here shows unless the script has added html.tpp-offer-on,
   which it does only while the visitor's own 7-day window is open. Colours use the site tokens with the same values as fallbacks
   (the 404 page loads no home.css). Bar: ink on sun yellow, about 10:1; button: white on ink, about 16:1. The 11/02 promo pieces (headline strike, pill, ribbon, red chips) are at the end. */
:root{--offer-h:3.5rem}
@media (min-width:1024px){:root{--offer-h:2.75rem}}

.offer-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Before the script builds the bar (head to DOMContentLoaded) a strip of the same height and colour holds its place, so nothing moves when it arrives. */
html.tpp-offer-on:not(.tpp-offer-ready) body::before{content:"";display:block;box-sizing:border-box;height:var(--offer-h);background:#ffcb3d;border-bottom:2px solid #12203a}

.offer-bar{position:relative;z-index:9;box-sizing:border-box;height:var(--offer-h);overflow:hidden;background:var(--sun,#ffcb3d);color:var(--ink,#12203a);border-bottom:2px solid var(--ink,#12203a);font:600 .8125rem/1.25 var(--body,'Instrument Sans',system-ui,sans-serif)}
.offer-bar-in{box-sizing:border-box;height:100%;max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.offer-bar-text{margin:0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.offer-w{display:none}
.offer-count{font-variant-numeric:tabular-nums;font-weight:800}
.offer-bar-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:2.25rem;padding:0 16px;border-radius:999px;background:var(--ink,#12203a);color:#fff;text-decoration:none;font:800 .8125rem/1 var(--body,'Instrument Sans',system-ui,sans-serif);letter-spacing:.02em;white-space:nowrap}
.offer-bar-btn:hover{background:var(--navy-2,#1c3d8f)}
.offer-bar-btn:focus-visible{outline:3px solid var(--navy-2,#1c3d8f);outline-offset:2px}
.offer-bw{display:none}
@media (max-width:359px){
  .offer-bar{font-size:.75rem}
  .offer-bar-in{gap:8px;padding:0 12px}
  .offer-bar-btn{padding:0 12px;font-size:.75rem}
}
@media (min-width:768px){
  .offer-bar-in{padding:0 28px;gap:20px}
  .offer-bar-text{flex-direction:row;flex-wrap:wrap;column-gap:.5em}
  .offer-w{display:inline}
  .offer-n{display:none}
  .offer-bw{display:inline}
  .offer-bn{display:none}
}
@media (min-width:1024px){
  .offer-bar{font-size:.875rem}
  .offer-bar-btn{font-size:.875rem}
}

/* Second line under the main sign-up buttons. The text comes from the --offer-line custom property the script sets, so a label the page rewrites
   ("Sending...") leaves it alone, and it is gone the moment the script removes html.tpp-offer-on. */
html.tpp-offer-on .tx-join::after,
html.tpp-offer-on a.btn[data-handoff]::after,
html.tpp-offer-on .cta-submit::after{content:var(--offer-line);font:600 .74rem/1.2 var(--body,'Instrument Sans',system-ui,sans-serif);letter-spacing:0;text-transform:none}
html.tpp-offer-on .tx-join,
html.tpp-offer-on a.btn[data-handoff]{flex-direction:column;gap:5px}
html.tpp-offer-on .cta-submit::after{display:block;margin-top:5px}

/* The main price card: .tx-tiles .plan-price (home page, county and place pages) and .plans .plan-price (the Houston page). Every other price on the site stays plain text.
   BOTH plans get the strike and the "Code TEXAS120" label ($140 -> $120 a year, $15 -> $12 a month), so the two cards are built the same way. The room for the label is
   reserved by one rule on both, before and after the script builds the strike, so the card does not jump and the two prices stay on one line. The price line never wraps
   (white-space:nowrap below): a tile grows to the width of its own line, so "a month" cannot split while the code shows, at any width. */
html.tpp-offer-on .tx-tiles .plan-price,
html.tpp-offer-on .plans .plan-price{position:relative;padding-top:1.5rem}
.plan-price .offer-vis{display:flex;align-items:baseline;gap:.5rem;white-space:nowrap}
.plan-price .offer-was{font:700 1.05rem/1 var(--body,'Instrument Sans',system-ui,sans-serif);letter-spacing:0;color:var(--ink-2,#33415c);text-decoration:line-through;text-decoration-thickness:2px}
.plan-price .offer-now{color:inherit}
.plan-price .offer-tag{position:absolute;top:0;left:0;box-sizing:border-box;padding:4px 9px;background:#c8202f;color:#fff;border:2px solid var(--ink,#12203a);border-radius:999px;font:500 .68rem/1 var(--mono,'DM Mono',ui-monospace,monospace);letter-spacing:.02em;white-space:nowrap}
/* The narrow two-column Houston cards have no room beside the price: the struck price sits on its own row under the label. */
html.tpp-offer-on .plans .plan-price{padding-top:2.9rem}
.plans .plan-price .offer-vis{display:block;white-space:normal}
.plans .plan-price .offer-was{position:absolute;top:1.65rem;left:0}

/* The chips are longer now ("TEXAS120: $3 off a month"). Where a Houston card is too narrow for one line (under about 195 px of room), both chips wrap to two lines and the room above
   both prices grows to match, so the prices stay level. The card is the container, so this follows the card's own width at every page width. */
html.tpp-offer-on .plans .plan{container-type:inline-size;align-content:start} /* start: the flat note is now two lines, and a stretched grid would push the monthly card's rows down to match it */
@container (max-width:195px){
  html.tpp-offer-on .plans .plan-price{padding-top:4.6rem}
  .plans .plan-price .offer-was{top:3.15rem}
  .plans .plan-price .offer-tag{white-space:normal;max-width:100%;line-height:1.2;text-wrap:balance;border-radius:12px;font-size:.62rem;padding:4px 7px}
}
/* Under 360 px the unit ("a year", "a month") drops under the price instead of splitting across lines (it split from 340 to 357 px, wider "a month" first). */
@media (max-width:359px){.plans .plan-price .offer-vis small{display:block;margin-top:2px}}

/* 11/02 promo pieces. Red #c8202f, yellow #ffd23f, ink and white only. Everything below is built by offer.js inside the window and removed when it ends. */

/* Headline: "for a flat [struck $140] $120." The struck figure is muted and struck like the card's offer-was. */
h1 .offer-vis{white-space:nowrap}
h1 .offer-h-was{color:var(--ink-2,#33415c);opacity:.7;text-decoration:line-through;text-decoration-thickness:.08em}

/* Pill directly under the headline, centred. */
.offer-pillrow{display:flex;justify-content:center;width:100%;box-sizing:border-box;margin:16px 0 0}
.offer-pill{margin:0;box-sizing:border-box;max-width:100%;padding:7px 16px 6px;background:#c8202f;color:#fff;border:2px solid var(--ink,#12203a);border-radius:999px;box-shadow:3px 3px 0 var(--ink,#12203a);font:500 .74rem/1.35 var(--mono,'DM Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.offer-dot{color:#ffd23f;font-weight:700}
.offer-pill-count{font-variant-numeric:tabular-nums;font-weight:700}
.hero-copy > .offer-pillrow{justify-self:stretch}
@media (max-width:700px){.hero-copy > .offer-pillrow{order:2}}
@media (max-width:420px){.offer-pill{font-size:.66rem;letter-spacing:.04em;padding:6px 12px 5px}}

/* Countdown ribbon at the top of each price card section. */
.offer-ribbon{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 22px;padding:12px 14px 12px 16px;background:#ffd23f;color:var(--ink,#12203a);border:2px solid var(--ink,#12203a);border-radius:14px;box-shadow:4px 4px 0 #c8202f}
.cty-pricecard > .offer-ribbon{grid-column:1 / -1;margin-bottom:0}
.offer-ribbon-text{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0;font:700 .68rem/1.25 var(--mono,'DM Mono',ui-monospace,monospace);letter-spacing:.02em;text-transform:uppercase;color:var(--ink,#12203a)}
.offer-ribbon-a{display:block;font-size:.82rem}
.offer-ribbon-b{display:block;font-weight:500}
.offer-clock{display:flex;gap:6px;flex:none}
.offer-clock-cell{box-sizing:border-box;min-width:2.7rem;padding:5px 6px 4px;background:var(--ink,#12203a);color:#fff;border-radius:8px;text-align:center}
.offer-clock-n{display:block;font:800 1.3rem/1 var(--disp,'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif);letter-spacing:0;font-variant-numeric:tabular-nums}
.offer-clock-u{display:block;margin-top:3px;font:500 .56rem/1 var(--mono,'DM Mono',ui-monospace,monospace);letter-spacing:.12em}
@media (max-width:600px){
  .offer-ribbon{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px}
  .offer-ribbon-text{font-size:.66rem}
  .offer-ribbon-a{font-size:.78rem}
}

@media print{.offer-bar,.offer-pillrow,.offer-ribbon,html.tpp-offer-on body::before{display:none}}