/* Vizzibo claim-flow: one stylesheet for every page in this tool.
   Palette and type are taken from the live vizzibo.com brand and hardcoded here
   so this tool depends on nothing outside its own folder.
     ink  #0d1117   page background on vizzibo.com
     teal #00ccb3   brand accent, headings, buttons
     violet #7c3aed secondary accent panel colour
     Raleway 900    heading face, self hosted in assets/brand/
   Every colour pair used below is checked by check_contrast.py. */

@font-face {
  font-family: "Raleway";
  src: url("brand/raleway-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0d1117;
  --ink-2: #121a23;
  --card: #172029;
  --card-2: #1c2733;
  --line: #2b3947;
  --line-soft: #22303c;
  /* Form controls need a boundary of at least 3:1 against their own fill, and
     the card border is too dim for that. See check_contrast.py. */
  --input-line: #5a7183;

  --text: #f7fafc;
  --muted: #a9bccb;
  --muted-2: #8ba2b3;

  --teal: #00ccb3;
  --teal-soft: #7cf0e0;
  --teal-dim: #0b6b5f;
  --on-teal: #04231f;

  --violet: #7c3aed;
  --violet-soft: #b79bff;
  --deep-teal: #002b26;

  --warn: #ffb454;
  --danger: #ff8a75;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .35);
  --glow: 0 0 0 1px rgba(0, 204, 179, .35), 0 18px 50px rgba(0, 204, 179, .16);
  --maxw: 1120px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Raleway", var(--font);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background-color: var(--ink);
  /* Two soft brand glows behind the page. Fixed so they do not repeat on scroll. */
  background-image:
    radial-gradient(58rem 34rem at 78% -8%, rgba(0, 204, 179, .16), transparent 62%),
    radial-gradient(46rem 30rem at 8% 4%, rgba(124, 58, 237, .16), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
/* Content stretches to ~80% of the viewport on larger screens, capped so it
   never gets uncomfortably wide to read. */
@media (min-width: 1000px) {
  .wrap { width: 82%; max-width: 1680px; padding: 0; }
}

a { color: var(--teal); }
a:hover { color: var(--teal-soft); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="link"]:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

@media (min-width: 760px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }
}

/* ---------- header ---------- */

.topbar {
  background: rgba(9, 13, 18, .78);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
  font-size: .95rem;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
/* The source logo is one square 300x300 PNG: the teal V mark sits at
   x 30-269, y 37-189, and the VIZZIBO wordmark below it at y 223-253.
   Those exact pixel bounds are cropped to here so only the mark shows, and the
   word is set as live text beside it. Scale factor is 44/240, so the 300px
   image is drawn at 55px and pulled up and left by the mark's own origin. */
.brand__mark {
  display: block;
  width: 44px;
  height: 28px;
  overflow: hidden;
  flex: none;
}
.brand__mark img {
  display: block;
  width: 55px;
  height: 55px;
  margin: -6.8px 0 0 -5.5px;
  filter: drop-shadow(0 0 10px rgba(0, 204, 179, .45));
}
.brand__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.18rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brandmark { /* legacy text-only brand, kept so old pages still render */
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prepared { color: var(--muted); }
.prepared strong, .prepared #prepared-for { color: var(--teal); font-weight: 700; }

/* ---------- footer ---------- */

.sitefoot {
  border-top: 1px solid var(--line-soft);
  margin-top: 64px;
  padding: 36px 0 56px;
  color: var(--muted-2);
  font-size: .9rem;
  background: rgba(0, 0, 0, .25);
}
.sitefoot a { color: var(--muted); }
.sitefoot a:hover { color: var(--teal); }
.footlogo { display: block; width: 74px; height: 74px; opacity: .9; margin: 0 0 12px; }

.sitefoot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .sitefoot__grid { grid-template-columns: 2fr 1fr; } }
.sitefoot__tag { max-width: 46ch; margin: 0; color: var(--muted); }
.sitefoot__h { font-size: 1rem; color: var(--text); margin: 0 0 10px; }
.sitefoot__line { margin: 0 0 6px; }
.sitefoot__contact a { color: var(--teal); font-weight: 700; }
.sitefoot__legal p { margin: 0 0 8px; }
.sitefoot__legal p:last-child { margin: 0; }

/* ---------- hero ---------- */

.hero { padding: 52px 0 0; }
/* Keep a tight, deliberate gap between the lede and the founding box below. */
.hero > :last-child { margin-bottom: 0; }
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 800;
  color: var(--teal);
  background: rgba(0, 204, 179, .1);
  border: 1px solid rgba(0, 204, 179, .32);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 0 0 18px;
}
.hero h1 .hl {
  color: var(--teal);
  /* A flat colour is kept as the real value; the gradient only paints on top
     where the browser supports clipping it to the text. */
  background: linear-gradient(96deg, var(--teal), var(--teal-soft) 55%, var(--violet-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lede { font-size: 1.14rem; color: var(--muted); max-width: 62ch; }
.hero__cta { margin-top: 22px; }

/* ---------- showcase: real screenshots from the builder ---------- */

.showcase { margin: 30px 0 8px; }
.showcase__grid { display: grid; grid-template-columns: 1fr; gap: 54px; }
@media (min-width: 760px) {
  .showcase__grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

/* Each shot is a desktop browser frame with the matching phone overlapping its
   bottom-right corner and poking past the right edge, so the pair reads as the
   same site on both screens. The wrapper does NOT clip, so the phone can stick
   out; the desktop image keeps its own rounded, clipped frame. */
.shot { position: relative; margin: 0; }
.shot__browser {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.shot__browser img { display: block; width: 100%; height: auto; }
/* A slim browser chrome bar with the three traffic-light dots, drawn in CSS
   so there is still no extra image request. */
.shot__bar {
  display: block;
  height: 30px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border-bottom: 1px solid var(--line);
  position: relative;
}
.shot__bar::before {
  content: "";
  position: absolute;
  left: 14px; top: 11px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
}
.shot__phone {
  position: absolute;
  right: -6%;
  bottom: -11%;
  width: 27%;
  border-radius: 16px;
  border: 3px solid rgba(230, 237, 243, .22);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .55);
  background: var(--card);
}
@media (max-width: 759px) {
  .shot__phone { right: 3%; bottom: -8%; width: 22%; }
}
/* The caption sits centred beneath the row of screenshots. */
.showcase__lede {
  color: var(--muted);
  text-align: center;
  max-width: 60ch;
  margin: 40px auto 0;
  font-size: 1.02rem;
}

/* ---------- founding banner ---------- */

.founding {
  position: relative;
  text-align: center;
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(0, 204, 179, .2), transparent 60%),
    linear-gradient(135deg, rgba(0, 204, 179, .12), rgba(124, 58, 237, .16)),
    var(--card);
  color: var(--text);
  border: 1px solid rgba(0, 204, 179, .5);
  border-radius: var(--radius);
  padding: 32px 26px;
  margin: 24px 0 10px;
  box-shadow: var(--glow);
}
.founding__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .72rem;
  font-weight: 800;
  color: var(--teal-soft);
  margin-bottom: 12px;
}
.founding__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 auto 14px;
  max-width: 22ch;
}
@media (min-width: 760px) { .founding__title { font-size: 2.7rem; } }
.founding__urgency {
  display: inline-block;
  background: var(--warn);
  color: #2a1a00;
  font-weight: 900;
  font-size: .98rem;
  letter-spacing: .01em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 16px;
  box-shadow: 0 0 0 4px rgba(255, 180, 84, .18);
}
.founding__sub {
  display: block;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 48ch;
  margin: 0 auto;
}

/* ---------- tier cards ---------- */

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 30px 0 8px;
}
@media (min-width: 760px) {
  .tiers { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
@media (min-width: 1120px) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
}

.tier {
  position: relative;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tier::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.tier:hover { transform: translateY(-3px); border-color: rgba(0, 204, 179, .5); }
.tier--featured {
  border-color: rgba(0, 204, 179, .55);
  box-shadow: var(--glow), var(--shadow);
}
.tier--featured::before { background: linear-gradient(90deg, var(--teal), var(--violet)); }

.tier .freepill {
  display: block;
  align-self: center;
  text-align: center;
  white-space: nowrap;
  background: rgba(255, 205, 90, .14);
  color: #ffd45e;
  border: 1px solid rgba(255, 205, 90, .5);
  border-radius: 999px;
  padding: 5px 15px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 auto 12px;
}

.tier .badge {
  display: inline-block;
  align-self: center;
  background: rgba(124, 58, 237, .9);
  color: #ffffff;
  border-radius: 999px;
  padding: 4px 13px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.tier--featured .badge { background: var(--teal); color: var(--on-teal); }
.tier h2 { margin-bottom: .1em; font-size: 1.5rem; text-align: center; }
.tier .tagline { color: var(--muted); margin: 0 0 14px; font-size: .98rem; text-align: center; }

.price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 2px; }
.term { text-align: center; color: var(--muted); font-weight: 600; font-size: .95rem; margin: 0; }
.price .amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--teal);
}
.price .per { color: var(--muted); font-weight: 600; }
.price .was {
  color: var(--muted-2);
  font-size: 1.2rem;
  font-weight: 700;
  margin-right: 2px;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
}
.setup { color: var(--muted-2); font-size: .92rem; margin: 8px 0 20px; text-align: center; }

.features { list-style: none; margin: 0 0 22px; padding: 0; }
.features li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 10px;
  font-size: .97rem;
  color: var(--text);
}
.features li::before {
  content: "";
  position: absolute;
  left: 4px; top: .5em;
  width: 10px; height: 5px;
  border-left: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(-45deg);
}

/* The CTA block is pinned to the bottom of each card, so cards of different
   heights still line their buttons up along the foot of the row. */
.tier__cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.tier__cta .btn { margin-top: 0; }
.altpay {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 700;
}
.altpay--link { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.altpay--link:hover { color: var(--teal-soft); }

/* ---------- buttons ---------- */

.btn {
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  background: var(--teal);
  color: var(--on-teal);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 15px 18px;
  border: 2px solid var(--teal);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover {
  background: var(--teal-soft);
  border-color: var(--teal-soft);
  color: var(--on-teal);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 204, 179, .28);
}
.btn--dark { background: var(--violet); border-color: var(--violet); color: #ffffff; }
.btn--dark:hover { background: #8b52f5; border-color: #8b52f5; color: #ffffff; box-shadow: 0 12px 30px rgba(124, 58, 237, .35); }
.btn--ghost { background: transparent; color: var(--teal); border-color: rgba(0, 204, 179, .5); }
.btn--ghost:hover { background: rgba(0, 204, 179, .12); color: var(--teal-soft); box-shadow: none; }
.btn--inline { display: inline-block; width: auto; margin-top: 0; }
.btn[aria-disabled="true"] {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--muted);
  pointer-events: none;
  box-shadow: none;
}

/* ---------- promise / prose blocks ---------- */

.promises {
  background: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(0, 204, 179, .08)), var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--violet);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 34px 0;
}
.promises p { margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; }
.promises p:last-child { margin-bottom: 0; }
.promises .why { font-weight: 400; color: var(--muted); font-size: .97rem; }

/* ---------- reporting dashboard ---------- */

.dash {
  background:
    linear-gradient(135deg, rgba(0, 204, 179, .06), rgba(124, 58, 237, .06)),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  margin: 40px 0;
}
.dash__intro { max-width: 64ch; }
.dash h2 { margin-bottom: .3em; }
.dash__lede { color: var(--muted); font-size: 1.1rem; margin: 0; }
.dash__shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 26px 0;
}
@media (min-width: 860px) { .dash__shots { grid-template-columns: 3fr 2fr; } }
.dashshot {
  position: relative;
  margin: 0;
  display: flex;
  min-height: 200px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--shadow);
}
.dashshot img { display: block; width: 100%; height: auto; object-fit: cover; }
.dashshot__ph {
  display: none;
  margin: auto;
  padding: 30px 22px;
  color: var(--muted-2);
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
}
.dashshot.is-missing { border-style: dashed; background: var(--ink-2); }
.dashshot.is-missing .dashshot__ph { display: block; }
.dash__grid {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 16px 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dash__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .dash__grid { grid-template-columns: repeat(3, 1fr); } }
.dash__grid li { padding-left: 15px; border-left: 2px solid var(--teal-dim); }
.dash__grid strong { display: block; color: var(--text); font-weight: 800; margin-bottom: 3px; }
.dash__grid span { color: var(--muted); font-size: .95rem; }
.dash__foot { margin: 24px 0 0; color: var(--muted); }
.dash__foot strong { color: var(--teal); }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin: 24px 0;
}
.panel ol, .panel ul { padding-left: 22px; }
.panel li { margin-bottom: 8px; }
.panel strong { color: var(--teal); }
.fineprint { color: var(--muted); font-size: .9rem; }
.fineprint li { margin-bottom: 7px; }

/* ---------- cross-sell (Permit Press) ---------- */

.crosssell {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(0, 204, 179, .06)),
    var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--violet);
  border-radius: var(--radius);
  padding: 28px 26px;
  margin: 34px 0;
}
.crosssell__h { margin: 0 0 .5em; font-size: 1.5rem; }
.crosssell__word {
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
}
.crosssell__body { color: var(--muted); max-width: 66ch; margin: 0 0 20px; }

.notice {
  background: rgba(255, 180, 84, .1);
  border: 1px solid rgba(255, 180, 84, .5);
  border-left: 5px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  margin: 22px 0;
  color: var(--text);
}
.notice strong { color: var(--warn); }

/* ---------- forms ---------- */

.form { margin: 8px 0 0; }
.field { margin-bottom: 24px; }
.field > label, .field > .label {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text);
}
.hint { display: block; color: var(--muted); font-size: .9rem; margin-bottom: 9px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--ink-2);
  border: 1px solid var(--input-line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 204, 179, .18);
}
textarea { min-height: 100px; resize: vertical; }
select {
  appearance: none;
  /* Chevron drawn with gradients so there is still no image request. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--teal) 50%),
    linear-gradient(135deg, var(--teal) 50%, transparent 50%);
  background-position: right 20px top 55%, right 14px top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
option { background: var(--ink-2); color: var(--text); }

.hours { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .hours { grid-template-columns: repeat(3, 1fr); } }
.hours label { font-weight: 600; font-size: .95rem; color: var(--muted); }

.choice { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; }
.choice input { margin-top: .35em; width: 18px; height: 18px; flex: none; accent-color: var(--teal); }
.choice span { font-size: .97rem; }

.required { color: var(--teal); font-weight: 800; }
.err { color: var(--danger); font-weight: 600; font-size: .92rem; margin-top: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 10px; }
.actions .btn { width: auto; flex: 1 1 220px; margin-top: 0; }

/* ---------- tracker ---------- */

.steps { list-style: none; margin: 30px 0; padding: 0; }
.step {
  position: relative;
  padding: 0 0 30px 54px;
  border-left: 3px solid var(--line);
  margin-left: 15px;
}
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step .dot {
  position: absolute;
  left: -16px; top: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 3px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  font-size: .85rem;
  line-height: 24px;
  text-align: center;
}
.step h3 { margin-bottom: .2em; color: var(--muted-2); }
.step p { color: var(--muted-2); margin: 0; font-size: .97rem; }
.step .when { display: block; font-size: .85rem; color: var(--muted-2); margin-top: 5px; }

.step--done { border-left-color: var(--teal); }
.step--done .dot { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.step--done h3 { color: var(--text); }
.step--done p, .step--done .when { color: var(--muted); }

.step--now { border-left-color: var(--violet); }
.step--now .dot {
  background: var(--violet);
  border-color: var(--violet);
  color: #ffffff;
  box-shadow: 0 0 0 6px rgba(124, 58, 237, .22);
}
.step--now h3 { color: var(--violet-soft); }
.step--now p { color: var(--text); }
.step--now::after {
  content: "Happening now";
  display: inline-block;
  margin-top: 12px;
  background: rgba(124, 58, 237, .9);
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 13px;
}

.live-banner {
  background: linear-gradient(135deg, rgba(0, 204, 179, .22), rgba(124, 58, 237, .2)), var(--card);
  border: 1px solid rgba(0, 204, 179, .45);
  color: var(--text);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 26px 0;
  box-shadow: var(--glow);
}
.live-banner strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  display: block;
  color: var(--teal);
}

.contact-card {
  background: linear-gradient(160deg, var(--deep-teal), var(--card));
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 24px;
  margin: 32px 0;
}
.contact-card h3 { color: var(--teal); }
.contact-card p { color: var(--muted); margin-bottom: .6em; }
.contact-card a { color: var(--teal); font-weight: 700; }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .tier:hover, .btn:hover { transform: none; }
}

@media print {
  body { background: #ffffff; color: #000000; }
  .topbar, .sitefoot { background: none; }
  .btn { box-shadow: none; }
}