/* ============ THE TULSA DOG BUGLE × CLOVER — Bugle Insider signup ============
   Loaded AFTER clover.css on /bugle only. Same structure as sunshine.css (the
   campaign band, the slashed Command hero card, the condensed comparison
   cards, the live spots counter and the Insider receipt) in the Bugle's
   masthead palette. Everything else is the regular signup design, untouched. */

:root{ --bug:#C9A227; --bug-deep:#7E6410; --bug-soft:#FBF6E4; --bug-line:#EEDFAE; }

/* ---- header: partnership lockup ---- */
.co-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink-soft);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.co-brand .x{color:var(--line)}
.co-brand .bug{display:inline-flex;align-items:center;gap:7px;color:var(--bug-deep)}
.co-brand .bug svg{width:18px;height:18px;fill:var(--bug-deep)}
.co-brand .bug img{height:28px;width:auto;display:block;border-radius:50%}
@media(max-width:640px){.co-brand{display:none}}

/* ---- hero ---- */
.hero.bugle{padding-top:34px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,39,.16);border:1px solid rgba(201,162,39,.55);color:#F3E3A6;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:18px}
.hero .eyebrow svg{width:14px;height:14px;fill:var(--bug)}
.hero p.sub{max-width:620px}
.hero .drliz{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:#C7D4EE;font-weight:700;font-size:.9rem}
.hero .drliz .av{width:34px;height:34px;border-radius:50%;background:var(--bug);color:var(--navy-deep);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex:none}

/* ---- campaign band (sticks to the top of the card on every step) ---- */
.band{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;background:linear-gradient(90deg,var(--bug-soft),#fff);border-bottom:1px solid var(--bug-line)}
.band .l{display:flex;align-items:center;gap:12px;min-width:0}
.band .l svg{width:26px;height:26px;fill:var(--bug-deep);flex:none}
.band .t{font-weight:900;color:var(--navy);font-size:.92rem;line-height:1.25}
.band .t small{display:block;font-weight:700;color:var(--ink-soft);font-size:.74rem;margin-top:2px}
.spots{flex:none;text-align:right}
.spots .n{font-family:var(--font-display);font-weight:900;color:var(--orange-dark);font-size:1.35rem;line-height:1}
.spots .n.sold{color:var(--red)}
.spots .s{display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.spots .bar{height:6px;border-radius:3px;background:var(--bug-line);margin-top:6px;overflow:hidden;min-width:120px}
.spots .bar i{display:block;height:100%;background:var(--orange);border-radius:3px;transition:width .5s}
@media(max-width:640px){.band{flex-direction:column;align-items:stretch}.spots{text-align:left}}


/* ---- step 1: the Command hero card ---- */
.hero-plan{position:relative;border:3px solid var(--navy);border-radius:18px;background:var(--white);box-shadow:0 12px 30px rgba(30,53,100,.16);padding:26px 22px 20px;margin-top:6px}
.hero-plan .chip{position:absolute;top:-13px;left:22px;background:var(--orange);color:#fff;font-size:.66rem;font-weight:900;letter-spacing:.1em;padding:5px 12px;border-radius:999px;text-transform:uppercase}
.hero-plan .approved{position:absolute;top:-13px;right:22px;background:var(--green);color:#fff;font-size:.66rem;font-weight:900;letter-spacing:.1em;padding:5px 12px;border-radius:999px;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.hero-plan .approved svg{width:11px;height:11px;stroke:#fff;stroke-width:3.5;fill:none}
.hero-plan .head{display:flex;align-items:center;gap:12px}
.hero-plan .pico{width:46px;height:46px;border-radius:12px;background:var(--orange);display:flex;align-items:center;justify-content:center;flex:none}
.hero-plan .pico svg{width:24px;height:24px;fill:#fff}
.hero-plan .head b{font-family:var(--font-display);font-weight:900;color:var(--navy);font-size:1.5rem;line-height:1.1}
.hero-plan .desc{font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-top:2px}
.hero-plan .prices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.hero-plan .pr{border-radius:12px;padding:14px 16px}
.hero-plan .pr .k{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.hero-plan .pr .v{font-family:var(--font-display);font-weight:900;font-size:1.7rem;line-height:1.15;margin-top:4px}
.hero-plan .pr .v small{font-family:var(--font-body);font-weight:800;font-size:.85rem}
.hero-plan .pr.std{background:var(--sky-soft);color:var(--ink-soft)}
.hero-plan .pr.std .v{color:var(--ink-soft);text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--red)}
.hero-plan .pr.you{background:var(--navy);color:#fff}
.hero-plan .pr.you .k{color:#FFD9AB}
.hero-plan .pr.you .v{color:var(--orange)}
.hero-plan .pr.you .v small{color:#C7D4EE}
.hero-plan .lock{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:var(--bug-soft);border:1px solid var(--bug-line);color:var(--bug-deep);font-weight:900;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.hero-plan .lock svg{width:14px;height:14px;fill:var(--bug-deep)}
.hero-plan .inc{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.hero-plan .inc .k{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.hero-plan .inc ul{list-style:none;display:grid;gap:6px}
@media(min-width:640px){.hero-plan .inc ul{grid-template-columns:1fr 1fr}}
.hero-plan .inc li{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;font-weight:700;color:var(--ink)}
.hero-plan .inc li b{color:var(--navy);font-weight:900}
.hero-plan .inc li svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--green);stroke-width:3.2;fill:none}
@media(max-width:480px){.hero-plan .prices{grid-template-columns:1fr}}

/* ---- comparison strip (Standard / Vanguard at list) ---- */
.compare{margin-top:18px}
.compare .k{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.compare .row{display:grid;gap:10px}
@media(min-width:640px){.compare .row{grid-template-columns:1fr 1fr}}
.cmp{border:2px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--white);display:flex;align-items:center;gap:12px;opacity:.92}
.cmp .pico{width:34px;height:34px;border-radius:10px;background:var(--sky-soft);display:flex;align-items:center;justify-content:center;flex:none}
.cmp .pico svg{width:18px;height:18px;fill:var(--navy)}
.cmp b{font-family:var(--font-display);font-weight:900;color:var(--navy);font-size:1rem;display:block}
.cmp .d{font-size:.76rem;font-weight:700;color:var(--ink-soft);line-height:1.3}
.cmp .p{margin-left:auto;text-align:right;flex:none}
.cmp .p .v{font-weight:900;color:var(--ink);font-size:.95rem;white-space:nowrap}
.cmp .p .s{display:block;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.compare .punch{margin-top:12px;background:var(--bug-soft);border-left:4px solid var(--bug);border-radius:10px;padding:12px 14px;font-size:.9rem;font-weight:700;color:var(--ink)}
.compare .punch b{color:var(--navy)}

/* ---- price box: Insider variant ---- */
.pricebox .was{display:inline-block;color:#AFC2E6;font-weight:800;font-size:1.05rem;text-decoration:line-through;text-decoration-color:rgba(255,120,120,.9);text-decoration-thickness:2.5px;margin-right:10px;vertical-align:baseline;font-family:var(--font-body)}
.pricebox .save{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:rgba(46,158,91,.18);border:1px solid rgba(46,158,91,.55);color:#BFF0D0;font-weight:800;font-size:.85rem;padding:7px 16px;border-radius:999px}
.pricebox .save svg{width:14px;height:14px;fill:#BFF0D0}
.pricebox .std-line{color:#AFC2E6;font-size:.8rem;font-weight:700;margin-top:8px}

/* ---- summary: Insider receipt ---- */
.summary .li .was{color:var(--ink-soft);text-decoration:line-through;font-weight:700;font-size:.85rem;margin-right:8px}
.summary .li.disc span:last-child{color:var(--green)}
.summary .li.std span:first-child small{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.summary .li.total .was{font-size:.95rem;font-family:var(--font-body)}
.summary .fm{margin-top:12px;background:var(--bug-soft);border-radius:10px;padding:10px 12px;font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.summary .fm b{color:var(--navy)}
.applied{display:flex;align-items:center;gap:10px;background:#EAF7EF;border:1.5px solid #BFE5CC;border-radius:12px;padding:12px 14px;margin-bottom:22px;font-weight:800;color:#1E6B3A;font-size:.92rem}
.applied svg{width:20px;height:20px;stroke:#2E9E5B;stroke-width:3;fill:none;flex:none}

/* ---- closed state ---- */
.closed{background:var(--bug-soft);border:1.5px solid var(--bug-line);border-radius:12px;padding:16px 18px;margin-top:16px;font-weight:700;color:var(--ink)}
.closed b{color:var(--navy)}

/* ---- success ---- */
.member-no{font-family:var(--font-display);font-weight:900;color:var(--orange-dark);font-size:1.4rem;margin:6px 0 10px}

/* ---- Extras: add-on cards (Front Yard, Haul-Away) ----
   Base .addon in clover.css is a single flex row (icon · text · price · tick).
   On phones the nowrap price + tick crushed the text into a narrow left
   column, so /bugle (like /sunshine) lays the card out as a grid instead. */
.addon .txt{min-width:0}
.addon .txt b{line-height:1.25}
.addon .txt span{line-height:1.5}
@media(max-width:760px){
  .addon{display:grid;grid-template-columns:46px minmax(0,1fr) 26px;grid-template-areas:"ico title tick" "desc desc desc" "price price price";column-gap:14px;row-gap:8px;align-items:center;padding:16px}
  .addon .ico{grid-area:ico}
  .addon .tick{grid-area:tick}
  .addon .txt{display:contents}
  .addon .txt b{grid-area:title;font-size:1.05rem}
  .addon .txt span{grid-area:desc;display:block;font-size:.92rem;margin-top:2px}
  .addon .price{grid-area:price;justify-self:start;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.95rem;margin-top:2px}
  .addon.sel .price{border-color:var(--orange);color:var(--orange-dark)}
}