/* ==========================================================================
   CoreGrand Group Inc., design system
   Display: Bodoni Moda (carried from the printed brochure identity)
   Body:    Inter Tight
   Utility: IBM Plex Mono  (ledger codes, eyebrows, data)
   ========================================================================== */

:root {
  --ink:        #06121f;
  --navy:       #0b2545;
  --navy-2:     #123a63;
  --navy-3:     #1d5288;
  --gold:       #c8973f;
  --gold-2:     #e0b76b;
  --gold-soft:  #f3e6cd;
  --sand:       #f7f4ed;
  --sand-2:     #efeade;
  --paper:      #ffffff;
  --slate:      #5a6b80;
  --slate-2:    #8496a9;
  --line:       rgba(11, 37, 69, .13);
  --line-2:     rgba(11, 37, 69, .07);
  --line-dark:  rgba(255, 255, 255, .14);

  --ok:      #1c7a4f;
  --ok-bg:   #e6f4ec;
  --warn:    #a9741a;
  --warn-bg: #fbf1de;
  --bad:     #a32b2b;
  --bad-bg:  #fbeaea;
  --info:    #1d5288;
  --info-bg: #e8f0f8;

  --display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --body:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(6, 18, 31, .06);
  --shadow:    0 4px 16px rgba(6, 18, 31, .08);
  --shadow-lg: 0 18px 50px rgba(6, 18, 31, .16);

  --wrap: 1200px;
  --nav-h: 74px;
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--navy-3); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--navy);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.06rem; font-family: var(--body); font-weight: 650; letter-spacing: 0; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* gold word inside a heading */
.gold { color: var(--gold); }
em.gold, .display-italic { font-style: italic; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem;
}
.skip:focus { left: 8px; top: 8px; color: #fff; }

/* -------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: 860px; }
.wrap--mid { max-width: 1010px; }

.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 4.5vw, 4rem) 0; }
.section--sand { background: var(--sand); }
.section--navy { background: var(--navy); color: #fff; }
.section--ink  { background: var(--ink); color: #fff; }

.section--navy h1, .section--navy h2, .section--navy h3,
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--navy p, .section--ink p { color: rgba(255,255,255,.8); }

/* ---- eyebrow: the ledger label. Signature structural device. ---- */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ''; width: 34px; height: 1px; background: var(--gold); flex: none;
}
.eyebrow--center { justify-content: center; }
.section--navy .eyebrow, .section--ink .eyebrow { color: var(--gold-2); }
.section--navy .eyebrow::before, .section--ink .eyebrow::before { background: var(--gold-2); }

.lead {
  font-size: clamp(1.04rem, 1.5vw, 1.19rem);
  color: var(--slate);
  line-height: 1.68;
  max-width: 66ch;
}
.section--navy .lead, .section--ink .lead { color: rgba(255,255,255,.78); }

.head { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head--center .lead { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1.05fr .95fr; align-items: start;
}
.split--even { grid-template-columns: 1fr 1fr; }
.split--center { align-items: center; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-size: .875rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .95rem 1.7rem; border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; transition: all .18s ease; text-align: center; line-height: 1.2;
}
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--ink); }
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); background: rgba(11,37,69,.03); }
.btn--ghost-light { background: transparent; color: #fff; border-color: var(--line-dark); }
.btn--ghost-light:hover { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--sm { padding: .58rem 1rem; font-size: .76rem; }
.btn--block { width: 100%; }
.btn--danger { background: transparent; color: var(--bad); border-color: rgba(163,43,43,.3); }
.btn--danger:hover { background: var(--bad-bg); color: var(--bad); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.link-arrow {
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .45rem; color: var(--navy);
}
.link-arrow::after { content: '→'; transition: transform .18s ease; }
.link-arrow:hover { color: var(--gold); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------- topbar ---- */
.topbar {
  background: var(--ink); color: rgba(255,255,255,.72);
  font-size: .8rem; padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.topbar a { color: rgba(255,255,255,.78); }
.topbar a:hover { color: var(--gold-2); }
.topbar__meta { display: flex; gap: 1.4rem; align-items: center; }
.topbar__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }

/* ---------------------------------------------------------------- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 1.6rem; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: .85rem; flex: none; }
.brand img { height: 62px; width: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  color: var(--navy); letter-spacing: .005em;
}
.brand__sub {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold); margin-top: 4px;
}

.nav__links { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav__link {
  font-size: .875rem; font-weight: 500; color: var(--navy);
  padding: .55rem .72rem; border-radius: var(--r-sm); position: relative;
}
.nav__link:hover { color: var(--gold); }
.nav__link.is-active { color: var(--gold); }
.nav__link.is-active::after {
  content: ''; position: absolute; left: .72rem; right: .72rem; bottom: -.15rem;
  height: 2px; background: var(--gold);
}
.nav__actions { display: flex; align-items: center; gap: .6rem; margin-left: .8rem; flex: none; }

/* dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 265px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .5rem; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop a {
  display: block; padding: .6rem .75rem; border-radius: var(--r-sm);
  color: var(--navy); font-size: .875rem;
}
.drop a:hover { background: var(--sand); color: var(--navy); }
.drop a small { display: block; color: var(--slate-2); font-size: .76rem; margin-top: 1px; }
.drop__label {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate-2);
  padding: .55rem .75rem .3rem;
}

.nav__toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .5rem .6rem; cursor: pointer;
}
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px 0; transition: .2s; }
.nav__mobile { display: none; }

/* ---------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(200,151,63,.16), transparent 62%),
    linear-gradient(168deg, var(--navy) 0%, var(--ink) 100%);
  color: #fff;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}
.hero::after {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.hero__in { position: relative; z-index: 2; display: grid; gap: clamp(2.2rem, 5vw, 4rem);
  grid-template-columns: 1.08fr .92fr; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero h1 em { font-style: italic; color: var(--gold-2); }
.hero__lead { color: rgba(255,255,255,.8); font-size: clamp(1.03rem, 1.4vw, 1.16rem); max-width: 54ch; }
.hero .btn-row { margin-top: 2rem; }
.hero__trust {
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 1.4rem;
}
.hero__trust div { display: flex; flex-direction: column; gap: 2px; }
.hero__trust b { font-family: var(--display); font-size: 1.5rem; color: var(--gold-2); font-weight: 700; }
.hero__trust span { font-family: var(--mono); font-size: .63rem; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---- SIGNATURE: the accountability ledger card ---- */
.ledger {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}
.ledger__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .9rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--line-dark);
}
.ledger__title {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-2);
}
.ledger__ref { font-family: var(--mono); font-size: .68rem; color: rgba(255,255,255,.45); }
.ledger__row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: .78rem 0; border-bottom: 1px dashed rgba(255,255,255,.11);
  align-items: baseline;
}
.ledger__row:last-of-type { border-bottom: 0; }
.ledger__row dt { color: rgba(255,255,255,.72); font-size: .9rem; }
.ledger__row dd {
  margin: 0; font-family: var(--mono); font-size: .82rem; color: #fff; text-align: right;
}
.ledger__row dd.is-none { color: var(--gold-2); }
.ledger__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: 1.1rem; border-top: 2px solid var(--gold);
}
.ledger__total span { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
.ledger__total b { font-family: var(--display); font-size: 1.85rem; color: var(--gold-2); }
.ledger__note {
  margin-top: .9rem; font-size: .74rem; color: rgba(255,255,255,.45); line-height: 1.5;
}

/* ------------------------------------------------------------- strip ----- */
.strip { background: var(--ink); padding: 1.6rem 0; border-block: 1px solid rgba(255,255,255,.08); }
.strip__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.strip__item { display: flex; flex-direction: column; gap: 3px; }
.strip__item b { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--gold-2); }
.strip__item span { font-family: var(--mono); font-size: .62rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.5); }

/* -------------------------------------------------------------- cards --- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.7rem; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column; height: 100%;
}
.card:hover { border-color: rgba(200,151,63,.5); box-shadow: var(--shadow); }
.card--link:hover { transform: translateY(-2px); }
.card__code {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem;
}
.card__code::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.card h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.card p { color: var(--slate); font-size: .92rem; margin-bottom: 1rem; }
.card__foot { margin-top: auto; padding-top: .3rem; }

.card--dark {
  background: rgba(255,255,255,.04); border-color: var(--line-dark); color: #fff;
}
.card--dark h3 { color: #fff; }
.card--dark p { color: rgba(255,255,255,.72); }
.card--dark:hover { border-color: rgba(224,183,107,.45); }

/* feature list inside cards */
.ticks { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .5rem; }
.ticks li {
  position: relative; padding-left: 1.5rem; font-size: .9rem; color: var(--slate); line-height: 1.5;
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-right: 1.6px solid var(--gold);
  border-bottom: 1.6px solid var(--gold); transform: rotate(45deg);
}
.card--dark .ticks li { color: rgba(255,255,255,.75); }

/* numbered process (order carries meaning) */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step { background: #fff; padding: 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; }
.step__n {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--gold);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--gold-soft); border-radius: 50%; background: #fffdf8; flex: none;
}
.step h4 { margin-bottom: .3rem; }
.step p { color: var(--slate); font-size: .91rem; margin: 0; }

/* stat blocks */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stats > div { background: #fff; padding: 1.5rem 1.3rem; text-align: center; }
.stats b { display: block; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--navy); }
.stats span { font-family: var(--mono); font-size: .61rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-2); line-height: 1.4; display: block; margin-top: .3rem; }

/* quote */
.quote {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  padding: 1.6rem; border-radius: 0 var(--r) var(--r) 0; height: 100%;
  display: flex; flex-direction: column;
}
.quote blockquote {
  margin: 0 0 1.1rem; font-family: var(--display); font-size: 1.07rem;
  line-height: 1.55; color: var(--navy); font-style: italic;
}
.quote__who { margin-top: auto; }
.quote__who b { display: block; font-size: .9rem; }
.quote__who span { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate-2); }
.stars { color: var(--gold); font-size: .8rem; letter-spacing: .12em; margin-bottom: .7rem; }

/* pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .65rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 100px; border: 1px solid transparent; white-space: nowrap;
}
.pill--new, .pill--pending, .pill--submitted { background: var(--info-bg); color: var(--info); border-color: rgba(29,82,136,.2); }
.pill--reviewing, .pill--contacted, .pill--draft { background: var(--warn-bg); color: var(--warn); border-color: rgba(169,116,26,.22); }
.pill--matched, .pill--inprogress, .pill--qualified, .pill--shortlisted { background: var(--gold-soft); color: #8a6416; border-color: rgba(200,151,63,.35); }
.pill--delivered, .pill--active, .pill--won, .pill--approved, .pill--accepted { background: var(--ok-bg); color: var(--ok); border-color: rgba(28,122,79,.2); }
.pill--closed, .pill--expired { background: var(--sand-2); color: var(--slate); border-color: var(--line); }
.pill--cancelled, .pill--lost, .pill--rejected, .pill--declined, .pill--suspended { background: var(--bad-bg); color: var(--bad); border-color: rgba(163,43,43,.2); }
.pill--gold { background: var(--navy); color: var(--gold-2); border-color: var(--navy); }
.pill--outline { border-color: var(--line); color: var(--slate); }

.badge-verified {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(200,151,63,.4); background: #fffdf8;
  padding: .26rem .55rem; border-radius: 100px;
}

.tag {
  display: inline-block; font-size: .78rem; color: var(--slate);
  border: 1px solid var(--line); border-radius: 100px; padding: .22rem .68rem;
  background: var(--sand);
}

/* --------------------------------------------------- comparison ledger --- */
.compare { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.compare__col { background: #fff; padding: 1.7rem; }
.compare__col--win { background: var(--navy); color: #fff; position: relative; }
.compare__col--win .compare__label { color: var(--gold-2); }
.compare__col--win .compare__price { color: var(--gold-2); }
.compare__col--win .compare__lines li { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.12); }
.compare__label {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-2); margin-bottom: .7rem;
}
.compare__col h4 { margin-bottom: 1.1rem; }
.compare__col--win h4 { color: #fff; }
.compare__price { font-family: var(--display); font-size: 2.1rem; color: var(--navy); line-height: 1; margin-bottom: 1.1rem; }
.compare__lines { list-style: none; margin: 0; padding: 0; }
.compare__lines li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px dashed var(--line);
  font-size: .87rem; color: var(--slate);
}
.compare__lines li:last-child { border-bottom: 0; }
.compare__lines span { font-family: var(--mono); font-size: .8rem; white-space: nowrap; }
.compare__flag {
  position: absolute; top: -1px; right: 1.7rem;
  background: var(--gold); color: var(--ink); padding: .3rem .7rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
}

/* ------------------------------------------------------------- pricing -- */
.toggle-bar {
  display: inline-flex; background: var(--sand-2); border: 1px solid var(--line);
  border-radius: 100px; padding: 4px; gap: 3px; margin-bottom: 2.4rem;
}
.toggle-bar button {
  border: 0; background: transparent; cursor: pointer; border-radius: 100px;
  padding: .58rem 1.3rem; font-family: var(--body); font-size: .84rem; font-weight: 600;
  color: var(--slate); transition: .16s;
}
.toggle-bar button.is-on { background: var(--navy); color: #fff; }
.toggle-bar small {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  color: var(--gold); text-transform: uppercase; margin-left: .4rem;
}
.toggle-bar button.is-on small { color: var(--gold-2); }

.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.9rem; display: flex; flex-direction: column; position: relative; height: 100%;
}
.plan--featured { border-color: var(--gold); box-shadow: 0 10px 34px rgba(200,151,63,.15); }
.plan__flag {
  position: absolute; top: -11px; left: 1.9rem; background: var(--gold); color: var(--ink);
  font-family: var(--mono); font-size: .61rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 2px;
}
.plan__tier {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .5rem;
}
.plan h3 { font-size: 1.35rem; margin-bottom: .7rem; }
.plan__price { display: flex; align-items: baseline; gap: .3rem; margin: .3rem 0 .2rem; }
.plan__price b { font-family: var(--display); font-size: 2.9rem; color: var(--navy); line-height: 1; }
.plan__price span { font-family: var(--mono); font-size: .78rem; color: var(--slate-2); }
.plan__cycle { font-size: .8rem; color: var(--slate-2); margin-bottom: 1.2rem; }
.plan__desc { font-size: .9rem; color: var(--slate); padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.plan__ideal {
  font-size: .84rem; color: var(--slate); background: var(--sand);
  border-radius: var(--r-sm); padding: .8rem .9rem; margin-bottom: 1.2rem;
}
.plan__ideal b { color: var(--navy); display: block; font-size: .74rem;
  font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; }
.plan .btn { margin-top: auto; }

/* --------------------------------------------------------- directory ---- */
.filters {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.2rem; display: grid; gap: .9rem;
  grid-template-columns: 1.6fr 1fr 1fr auto; align-items: end; margin-bottom: 2rem;
}
.provider {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; display: flex; flex-direction: column; height: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.provider:hover { border-color: rgba(200,151,63,.5); box-shadow: var(--shadow); }
.provider__top { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--navy); color: var(--gold-2);
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
}
.avatar--lg { width: 84px; height: 84px; font-size: 2rem; }
.avatar--sm { width: 36px; height: 36px; font-size: .95rem; }
.provider__name { font-weight: 650; font-size: 1.02rem; color: var(--navy); }
.provider__meta { font-family: var(--mono); font-size: .69rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-2); }
.provider__headline { font-size: .93rem; color: var(--navy); font-weight: 550; margin-bottom: .5rem; }
.provider__bio { font-size: .87rem; color: var(--slate); margin-bottom: 1rem; }
.provider__stats {
  display: flex; gap: 1.2rem; padding: .85rem 0; margin-bottom: 1rem;
  border-block: 1px solid var(--line-2);
}
.provider__stats div { display: flex; flex-direction: column; }
.provider__stats b { font-size: .95rem; color: var(--navy); font-family: var(--mono); }
.provider__stats span { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-2); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; }
.chip {
  font-family: var(--mono); font-size: .66rem; color: var(--slate);
  background: var(--sand); border: 1px solid var(--line-2);
  padding: .2rem .5rem; border-radius: 2px;
}

/* -------------------------------------------------------------- forms --- */
.field { margin-bottom: 1.15rem; }
.field label, .label {
  display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: .45rem;
}
.field .req { color: var(--gold); }
.input, .select, .textarea {
  width: 100%; font-family: var(--body); font-size: .95rem; color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .78rem .9rem; transition: border-color .16s, box-shadow .16s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,151,63,.14);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b80' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.3rem;
}
.hint { font-size: .78rem; color: var(--slate-2); margin-top: .35rem; }
.field-error { font-size: .8rem; color: var(--bad); margin-top: .35rem; }
.has-err .input, .has-err .select, .has-err .textarea { border-color: var(--bad); }

.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .88rem; color: var(--slate); }
.check input { margin-top: .28rem; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.check label { font-family: var(--body); text-transform: none; letter-spacing: 0;
  font-size: .88rem; color: var(--slate); margin: 0; }

.radio-cards { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
.radio-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem;
  cursor: pointer; transition: .16s; display: block;
}
.radio-card:hover { border-color: var(--slate-2); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card:has(input:checked) { border-color: var(--gold); background: #fffdf8; box-shadow: 0 0 0 3px rgba(200,151,63,.1); }
.radio-card b { display: block; font-size: .95rem; margin-bottom: .15rem; }
.radio-card span { font-size: .82rem; color: var(--slate); }

.form-grid { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr 1fr; }
.form-grid--full { grid-column: 1 / -1; }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

/* ------------------------------------------------------------- alerts --- */
.alert {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.1rem; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: .9rem; margin-bottom: 1.2rem;
}
.alert b { font-weight: 650; }
.alert--success { background: var(--ok-bg); color: #14603d; border-color: rgba(28,122,79,.25); }
.alert--error   { background: var(--bad-bg); color: #8a2323; border-color: rgba(163,43,43,.25); }
.alert--info    { background: var(--info-bg); color: #164272; border-color: rgba(29,82,136,.22); }
.alert--warn    { background: var(--warn-bg); color: #7d560f; border-color: rgba(169,116,26,.25); }
.flash-stack { position: relative; }

/* -------------------------------------------------------------- table --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 640px; }
table.data th {
  text-align: left; font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2);
  padding: .85rem 1rem; border-bottom: 1px solid var(--line); background: var(--sand);
  white-space: nowrap;
}
table.data td { padding: .9rem 1rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #fcfbf8; }
table.data .ref { font-family: var(--mono); font-size: .8rem; color: var(--slate); }
table.data .strong { font-weight: 600; color: var(--navy); }
.t-right { text-align: right; }
.nowrap { white-space: nowrap; }

.empty {
  text-align: center; padding: 3.2rem 1.5rem; color: var(--slate);
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--sand);
}
.empty h4 { color: var(--navy); margin-bottom: .35rem; }
.empty p { font-size: .9rem; margin-bottom: 1.2rem; }

.pager { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pager a, .pager span {
  font-family: var(--mono); font-size: .8rem; padding: .5rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--navy); background: #fff;
}
.pager .is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager span { color: var(--slate-2); }

/* ----------------------------------------------------------- app shell -- */
.shell { display: grid; grid-template-columns: 258px 1fr; min-height: 100vh; }
.side {
  background: var(--ink); color: rgba(255,255,255,.72); padding: 1.5rem 1.1rem;
  display: flex; flex-direction: column; gap: 1.6rem;
}
.side__brand { display: flex; align-items: center; gap: .6rem; padding-bottom: 1.3rem;
  border-bottom: 1px solid rgba(255,255,255,.09); }
.side__brand img { height: 38px; background: #fff; border-radius: 4px; padding: 2px; }
.side__brand b { font-family: var(--display); color: #fff; font-size: 1rem; display: block; line-height: 1.1; }
.side__brand span { font-family: var(--mono); font-size: .55rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-2); }
.side__group { display: grid; gap: 2px; }
.side__label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.35); padding: 0 .7rem .5rem;
}
.side a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .7rem; border-radius: var(--r-sm); color: rgba(255,255,255,.72);
  font-size: .89rem; transition: .15s;
}
.side a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a.is-active { background: var(--navy-2); color: #fff; }
.side a.is-active::before { content: ''; width: 2px; height: 15px; background: var(--gold); margin-right: -.35rem; }
.side__count {
  font-family: var(--mono); font-size: .68rem; background: rgba(255,255,255,.1);
  padding: .1rem .4rem; border-radius: 3px; color: #fff;
}
.side__foot { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.09); }
.side__user { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.side__user b { color: #fff; font-size: .87rem; display: block; line-height: 1.2; }
.side__user span { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-2); }

.main { background: var(--sand); min-width: 0; }
.main__bar {
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 1.1rem clamp(1.1rem, 3vw, 2.2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 20;
}
.main__bar h1 { font-size: 1.4rem; margin: 0; }
.main__bar .eyebrow { margin: 0 0 .25rem; }
.main__body { padding: clamp(1.3rem, 3vw, 2.2rem); }

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.2rem, 2.5vw, 1.8rem); margin-bottom: 1.4rem;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.panel__head h2, .panel__head h3 { margin: 0; font-size: 1.16rem; }
.panel--flat { padding: 0; overflow: hidden; }

.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.4rem; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.kpi__label { font-family: var(--mono); font-size: .63rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate-2); }
.kpi b { font-family: var(--display); font-size: 2rem; color: var(--navy); line-height: 1.1; }
.kpi small { font-size: .78rem; color: var(--slate-2); }
.kpi--gold { background: var(--navy); border-color: var(--navy); }
.kpi--gold .kpi__label { color: rgba(255,255,255,.6); }
.kpi--gold b { color: var(--gold-2); }
.kpi--gold small { color: rgba(255,255,255,.6); }

/* thread */
.thread { display: grid; gap: 1rem; }
.msg {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.msg--staff { background: #fbfaf6; border-color: rgba(200,151,63,.3); }
.msg--internal { background: var(--warn-bg); border-color: rgba(169,116,26,.25); }
.msg__head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.msg__head b { font-size: .92rem; }
.msg__head time { font-family: var(--mono); font-size: .68rem; color: var(--slate-2); }
.msg p { font-size: .92rem; color: var(--navy); margin: 0; }

.meta-list { display: grid; gap: 0; }
.meta-list > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .68rem 0; border-bottom: 1px dashed var(--line);
}
.meta-list > div:last-child { border-bottom: 0; }
.meta-list dt, .meta-list .k {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-2); flex: none;
}
.meta-list dd, .meta-list .v { margin: 0; font-size: .9rem; text-align: right; color: var(--navy); }

/* ------------------------------------------------------------- footer --- */
.footer { background: var(--ink); color: rgba(255,255,255,.66); padding: clamp(3rem, 5vw, 4.5rem) 0 0; }
.footer__grid {
  display: grid; gap: 2.2rem; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding-bottom: 2.8rem; border-bottom: 1px solid rgba(255,255,255,.09);
}
.footer h5 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-2); margin: 0 0 1.1rem;
}
.footer a { color: rgba(255,255,255,.66); font-size: .9rem; display: block; padding: .28rem 0; }
.footer a:hover { color: var(--gold-2); }
.footer__about { font-size: .89rem; line-height: 1.65; margin-bottom: 1.3rem; max-width: 38ch; }
.footer__contact { font-size: .88rem; display: grid; gap: .4rem; }
.footer__contact strong { color: #fff; font-weight: 550; }
.footer__bot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 0; font-size: .8rem; flex-wrap: wrap;
}
.footer__bot span { font-family: var(--mono); font-size: .7rem; color: rgba(255,255,255,.4); }
.footer__legal { display: flex; gap: 1.2rem; }
.footer__legal a { display: inline; font-size: .8rem; padding: 0; }

.news-form { display: flex; gap: .5rem; margin-top: .9rem; }
.news-form input {
  flex: 1; min-width: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm); padding: .65rem .8rem; color: #fff; font-family: var(--body); font-size: .87rem;
}
.news-form input::placeholder { color: rgba(255,255,255,.4); }
.news-form input:focus { outline: none; border-color: var(--gold); }

/* --------------------------------------------------------------- misc --- */
.crumbs {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-2); margin-bottom: 1rem; display: flex; gap: .5rem; flex-wrap: wrap;
}
.crumbs a { color: var(--slate-2); }
.crumbs a:hover { color: var(--gold); }

.page-head {
  background: linear-gradient(168deg, var(--navy) 0%, var(--ink) 100%);
  color: #fff; padding: clamp(2.8rem, 5vw, 4.5rem) 0;
}
.page-head h1 { color: #fff; max-width: 24ch; }
.page-head .lead { color: rgba(255,255,255,.78); }
.page-head .crumbs, .page-head .crumbs a { color: rgba(255,255,255,.5); }
.page-head .crumbs a:hover { color: var(--gold-2); }

.prose { max-width: 68ch; }
.prose p { font-size: 1.03rem; line-height: 1.75; color: #24384d; }
.prose h2 { font-size: 1.65rem; margin-top: 2.4rem; }
.prose h3 { font-size: 1.25rem; margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; color: #24384d; }
.prose li { margin-bottom: .5rem; line-height: 1.7; }
.prose blockquote {
  border-left: 3px solid var(--gold); margin: 1.8rem 0; padding: .3rem 0 .3rem 1.3rem;
  font-family: var(--display); font-size: 1.14rem; font-style: italic; color: var(--navy);
}

.accordion { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.accordion details { border-bottom: 1px solid var(--line-2); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary {
  cursor: pointer; padding: 1.15rem 1.4rem; font-weight: 600; font-size: .98rem;
  color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; color: var(--gold); font-size: 1.2rem; line-height: 1; flex: none; }
.accordion details[open] summary::after { content: '−'; }
.accordion details[open] summary { background: var(--sand); }
.accordion__body { padding: 0 1.4rem 1.3rem; color: var(--slate); font-size: .93rem; }

.cta-band {
  background:
    radial-gradient(800px 400px at 88% 0%, rgba(200,151,63,.18), transparent 60%),
    linear-gradient(168deg, var(--navy) 0%, var(--ink) 100%);
  color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; text-align: center;
}
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 56ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }
.cta-band__tag {
  font-family: var(--display); font-style: italic; font-size: 1.15rem;
  color: var(--gold-2); margin-top: 1.6rem;
}

.note {
  font-size: .82rem; color: var(--slate-2); background: var(--sand);
  border-left: 2px solid var(--gold); padding: .85rem 1.1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  line-height: 1.6;
}

.divider { height: 1px; background: var(--line); margin: 2.2rem 0; border: 0; }

/* utilities */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1.2rem; } .mb-3 { margin-bottom: 2rem; }
.text-center { text-align: center; }
.muted { color: var(--slate-2); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); }
.flex { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: grid; gap: 1rem; }
.hide { display: none !important; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .shell { grid-template-columns: 1fr; }
  .side {
    flex-direction: row; align-items: center; overflow-x: auto; gap: 1rem;
    padding: .8rem 1rem;
  }
  .side__brand, .side__label, .side__foot { display: none; }
  .side__group { display: flex; gap: .3rem; }
  .side a { white-space: nowrap; padding: .5rem .8rem; }
  .side a.is-active::before { display: none; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__actions { display: none; }
  .nav__mobile { display: none; background: #fff; border-top: 1px solid var(--line);
    padding: 1rem clamp(1.1rem, 4vw, 2.5rem) 1.4rem; }
  .nav__mobile.is-open { display: block; }
  .nav__mobile a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--line-2);
    color: var(--navy); font-size: .95rem; }
  .nav__mobile .btn-row { margin-top: 1.1rem; }
  .nav__mobile .btn { flex: 1; }

  .hero__in, .split, .split--even { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero__trust { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .topbar__in { justify-content: center; }
  .topbar__meta { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .grid-4, .stats, .kpis, .filters { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: .8rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bot { flex-direction: column; text-align: center; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .btn--sm, .btn-row--inline .btn { width: auto; }
  .ledger__total b { font-size: 1.5rem; }
  table.data { min-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .nav, .topbar, .footer, .side, .btn { display: none !important; }
  body { color: #000; }
}

/* ============================================================
   ADDITIONS, admin console & app shell refinements
   ============================================================ */

.panel-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.4rem;flex-wrap:wrap;margin-bottom:1.6rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--rule);
}
.panel-head h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:.2rem 0 0}
.panel-head .eyebrow{margin-bottom:.35rem}

.kpis--4{grid-template-columns:repeat(4,1fr)}
.kpi--sm{padding:1rem 1.15rem}
.kpi--sm b{font-size:1.35rem}

/* activity log */
.log{list-style:none;margin:0;padding:0}
.log li{padding:.7rem 0;border-bottom:1px dashed var(--rule)}
.log li:last-child{border-bottom:0;padding-bottom:0}

/* extra-small controls for dense admin tables */
.btn--xs{
  padding:.3rem .6rem;font-size:.68rem;letter-spacing:.05em;
  border-radius:3px;line-height:1.3;
}
.select--xs{
  padding:.32rem .5rem;font-size:.74rem;min-width:7.5rem;
  height:auto;background-position:right .4rem center;
}
.nowrap{white-space:nowrap}
.nowrap .btn--xs{margin-right:.3rem}

.filters--admin{
  grid-template-columns:1fr auto auto;
  background:var(--sand);border:1px solid var(--rule);
}

/* two-column app layout: main + sticky aside */
.split--app{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:start}
.split--app > aside{position:sticky;top:1.5rem}

/* auth screens */
.auth__sub{color:var(--muted);font-size:.95rem;margin:-.4rem 0 1.6rem;max-width:34ch}

/* internal-only messages in the ops thread */
.thread__msg.is-internal{
  background:#fffaf0;border-left:3px solid var(--gold);
}
.thread__msg.is-internal p{color:#6b5628}

/* pill + alert variants */
.pill--ok{background:rgba(31,122,74,.1);color:#1f7a4a;border-color:rgba(31,122,74,.28)}
.pill--muted{background:rgba(6,18,31,.06);color:var(--muted);border-color:var(--rule)}
.alert--ok{background:rgba(31,122,74,.08);border-color:rgba(31,122,74,.3);color:#1a6440}

.mb-1{margin-bottom:.4rem !important}

@media (max-width:1080px){
  .split--app{grid-template-columns:1fr}
  .split--app > aside{position:static}
}
@media (max-width:900px){
  .kpis--4{grid-template-columns:repeat(2,1fr)}
  .filters--admin{grid-template-columns:1fr}
}

/* compact context strip in the app shell, each view owns its own <h1> */
.main__bar-label{
  margin:0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.55rem;min-width:0;
}
.main__bar-label span{color:var(--gold);opacity:.7}
.main__bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   LIVE SYNC, update banner and counter highlight
   ============================================================ */
.sync-toast{
  position:fixed;z-index:200;left:50%;transform:translateX(-50%);
  bottom:max(1rem, env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:.85rem;
  max-width:min(30rem, calc(100vw - 2rem));
  padding:.75rem .85rem .75rem 1.1rem;
  background:var(--navy);color:#fff;border-radius:4px;
  box-shadow:0 12px 32px rgba(6,18,31,.28);
  font-size:.88rem;line-height:1.4;
  animation:syncIn .28s ease-out;
}
@keyframes syncIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.sync-toast__btn{
  flex:none;background:var(--gold);color:var(--ink);border:0;cursor:pointer;
  padding:.4rem .8rem;border-radius:3px;font:inherit;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}
.sync-toast__btn:hover{background:var(--gold-2)}
.sync-toast__close{
  flex:none;background:transparent;border:0;color:rgba(255,255,255,.65);
  cursor:pointer;font-size:1.25rem;line-height:1;padding:0 .2rem;
}
.sync-toast__close:hover{color:#fff}

/* brief highlight when a live counter changes */
[data-sync-count].is-updated{
  animation:countPulse 1.6s ease-out;
  border-radius:3px;
}
@keyframes countPulse{
  0%{background:rgba(200,151,63,.35)}
  100%{background:transparent}
}
@media (prefers-reduced-motion:reduce){
  .sync-toast{animation:none}
  [data-sync-count].is-updated{animation:none}
}

/* ============================================================
   DIAGNOSTICS, log viewer
   ============================================================ */
.logview{
  background:var(--ink);color:#d6dde6;
  padding:1.1rem 1.2rem;border-radius:4px;
  font-family:var(--mono);font-size:.72rem;line-height:1.65;
  max-height:36rem;overflow:auto;white-space:pre;
  -webkit-overflow-scrolling:touch;
}
.pill--warn{background:rgba(200,151,63,.16);color:#8a6520;border-color:rgba(200,151,63,.4)}
.alert--error{background:rgba(163,43,43,.07);border-color:rgba(163,43,43,.3);color:#8f2626}
code.mono{
  background:rgba(6,18,31,.06);padding:.1rem .35rem;border-radius:3px;
  font-family:var(--mono);font-size:.85em;
}
@media (max-width:620px){
  .logview{font-size:.66rem;padding:.8rem}
}

/* Spam honeypot, visually removed but still present in the DOM for bots.
   Zero height means it can never be a stray tap target on touch devices. */
.honeypot{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
  pointer-events:none;
}

/* ============================================================
   MOBILE APP SHELL, dashboards and admin console on phones/tablets
   Wide data tables are the main cause of horizontal page overflow, so they
   scroll inside their own panel instead of stretching the whole document.
   ============================================================ */
@media (max-width: 1080px) {
  /* A grid child will otherwise refuse to shrink below its content width. */
  .shell, .main, .side, .panel, .split, .split--app { min-width: 0; }
  .side { max-width: 100vw; }

  /* Tables scroll within the panel, not the page. */
  .panel table.data,
  .main table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel table.data thead,
  .main table.data thead { white-space: nowrap; }
  table.data { max-width: 100%; }
}

@media (max-width: 820px) {
  .main__bar { padding-left: 1rem; padding-right: 1rem; }
  .main__body { padding: 1.1rem 1rem 2.5rem; }

  .panel { padding: 1.1rem 1rem; border-radius: 4px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .panel-head h1 { font-size: 1.4rem; }

  .kpis, .kpis--4 { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .kpi, .kpi--sm { padding: .85rem .9rem; }
  .kpi b { font-size: 1.4rem; }
  .kpi span { font-size: .68rem; }

  /* Dense admin controls need finger-sized targets on touch screens. */
  .btn--xs { padding: .5rem .75rem; font-size: .7rem; }
  .select--xs { padding: .5rem .55rem; font-size: .8rem; min-width: 6.5rem; }
  .nowrap { white-space: normal; }
  .nowrap .btn--xs { margin: .15rem .3rem .15rem 0; }

  /* Stacked filter bars rather than squeezed columns. */
  .filters, .filters--admin { grid-template-columns: 1fr; gap: .7rem; }
  .filters button, .filters--admin button { width: 100%; }

  .thread__msg { padding: .8rem .9rem; }
  .meta-list > div { grid-template-columns: 1fr; gap: .15rem; }
  .meta-list .k { font-size: .66rem; }
}

@media (max-width: 520px) {
  .kpis, .kpis--4 { grid-template-columns: 1fr; }
  .main__bar { flex-wrap: wrap; gap: .6rem; }
  .logview { font-size: .62rem; }
}

/* Touch devices: every interactive control gets a comfortable target,
   per the ~44px guidance, without changing the desktop look. */
@media (hover: none) and (pointer: coarse) {
  .btn, button[type="submit"], .input, .select, .textarea { min-height: 44px; }
  .btn--xs { min-height: 38px; }
  .check input, .radio-card input { width: 20px; height: 20px; }
  .check, .radio-card { padding-block: .35rem; }
  .side a { min-height: 40px; display: flex; align-items: center; }
}

/* ============================================================
   MOBILE SIDEBAR, horizontal scrolling nav strip
   The desktop sidebar becomes a swipeable row of links. Both the grid column
   and the strip itself must be allowed to shrink below their content width,
   otherwise the long nav pushes the whole document sideways.
   ============================================================ */
@media (max-width: 1080px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr;
  }

  .shell > .side {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .shell > .side::-webkit-scrollbar { display: none; }

  /* Groups keep their intrinsic width and scroll as one continuous strip. */
  .shell > .side .side__group {
    display: flex !important;
    flex: 0 0 auto;
    gap: .3rem;
  }
  .shell > .side .side__group a { flex: 0 0 auto; }

  /* Fade at the right edge hints that the strip scrolls. */
  .shell > .side::after {
    content: '';
    position: sticky; right: 0; flex: 0 0 1.5rem; align-self: stretch;
    background: linear-gradient(to right, transparent, var(--ink));
    pointer-events: none;
  }

  .main { min-width: 0; overflow-x: hidden; }
}

/* Radio and checkbox inputs are small by nature, so the whole surrounding
   label is the tap target. These rules guarantee that area is finger-sized. */
.radio-card { min-height: 56px; cursor: pointer; }
.check { min-height: 44px; align-items: center; cursor: pointer; }
.check input, .radio-card input { flex: none; }

/* Keep a compact brand mark in the mobile nav strip but drop the wordmark,
   so the width goes to navigation rather than decoration. */
@media (max-width: 1080px) {
  .shell > .side .side__brand {
    display: flex !important;
    flex: 0 0 auto;
    padding: 0 .9rem 0 0;
    margin-right: .3rem;
    border-right: 1px solid rgba(255,255,255,.12);
    border-bottom: 0;
  }
  .shell > .side .side__brand b,
  .shell > .side .side__brand span { display: none; }
  .shell > .side .side__brand img { height: 30px; }

  .shell > .side .side__label,
  .shell > .side .side__foot { display: none !important; }

  /* Top bar stays on one line: label truncates, action keeps its size. */
  .main__bar {
    flex-wrap: nowrap;
    gap: .75rem;
    padding: .7rem 1rem;
  }
  .main__bar-label { flex: 1 1 auto; min-width: 0; }
  .main__bar .btn { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  /* On the narrowest screens the "view website" label is redundant next to
     a breadcrumb that already says where you are. */
  .main__bar .btn { font-size: .64rem; padding: .45rem .7rem; }
}

/* SMTP connection probe results */
.probe__row{padding:.7rem .85rem;border:1px solid var(--rule);border-radius:3px;margin-bottom:.5rem}
.probe__row.is-ok{border-color:rgba(31,122,74,.35);background:rgba(31,122,74,.05)}
.probe__row.is-bad{background:rgba(6,18,31,.02)}
.probe__head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.3rem;flex-wrap:wrap}
.probe__head .mono{font-size:.76rem}

/* ============================================================
   HERO BACKGROUND IMAGES
   When a page has a photograph set in Admin → Appearance, the inline style
   supplies the image plus a dark overlay. These rules make sure text stays
   readable over any photograph, and that the image never causes layout shift.
   ============================================================ */
.page-head.has-bg,
.hero.has-bg{
  background-color:var(--ink);
  background-repeat:no-repeat;
  position:relative;
  isolation:isolate;
}

/* A slight bottom-weighted scrim: photographs are usually busiest in the
   middle, and headings sit low in these blocks. */
.page-head.has-bg::after,
.hero.has-bg::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, rgba(6,18,31,.12), rgba(6,18,31,.42));
  pointer-events:none;
}

.page-head.has-bg .lead,
.hero.has-bg .hero__sub{color:rgba(255,255,255,.9)}
.page-head.has-bg .crumbs,
.page-head.has-bg .crumbs a{color:rgba(255,255,255,.72)}

/* Text over a photograph needs a little weight behind it. */
.page-head.has-bg h1,
.hero.has-bg h1{text-shadow:0 2px 20px rgba(0,0,0,.35)}

/* Parallax is a nice touch on desktop but janky on touch devices. */
@media (min-width:1024px) and (hover:hover){
  .page-head.has-bg,
  .hero.has-bg{background-attachment:fixed}
}
@media (prefers-reduced-motion:reduce){
  .page-head.has-bg,
  .hero.has-bg{background-attachment:scroll}
}

/* ---------- Admin: appearance / image picker ---------- */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.hero-card{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:#fff}
.hero-card__preview{
  height:8.5rem;background:var(--navy) center/cover no-repeat;
  display:flex;align-items:flex-end;padding:.6rem .75rem;
}
.hero-card__preview span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(6,18,31,.6);padding:.2rem .5rem;border-radius:2px;
}
.hero-card__body{padding:.85rem}
.hero-card__body h4{margin:0 0 .5rem;font-size:.92rem}

.img-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.6rem;max-height:22rem;overflow:auto;padding:.2rem}
.img-library label{cursor:pointer;position:relative;display:block}
.img-library img{width:100%;height:5.5rem;object-fit:cover;border-radius:3px;border:2px solid transparent;display:block}
.img-library input{position:absolute;opacity:0;pointer-events:none}
.img-library input:checked + img{border-color:var(--gold);box-shadow:0 0 0 2px rgba(200,151,63,.3)}
.img-library__none{
  display:flex;align-items:center;justify-content:center;height:5.5rem;
  border:2px dashed var(--rule);border-radius:3px;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;padding:.3rem;
}

/* Destructive-action panel and misc admin form controls */
.panel--danger{border-color:rgba(163,43,43,.28)}
.panel--danger .panel__head h2{color:var(--bad)}
.input--file{padding:.5rem;font-size:.82rem}
.range{width:100%;accent-color:var(--gold);height:1.6rem}

/* CRM pipeline board */
.pipeline{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}
.pipeline__col{
  display:block;text-align:center;padding:.85rem .5rem;border:1px solid var(--rule);
  border-radius:4px;text-decoration:none;background:#fff;transition:border-color .15s,background .15s;
}
.pipeline__col:hover{border-color:var(--gold);background:var(--sand)}
.pipeline__col.is-on{border-color:var(--navy);background:var(--navy)}
.pipeline__col.is-on b,.pipeline__col.is-on span{color:#fff}
.pipeline__col b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--navy);line-height:1}
.pipeline__col span{
  display:block;margin-top:.3rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:1080px){.pipeline{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.pipeline{grid-template-columns:repeat(2,1fr)}}

.plan__fee{
  font-size:.78rem;color:var(--muted);margin:-.4rem 0 .9rem;
  padding-bottom:.7rem;border-bottom:1px dashed var(--rule);
}
.input--xs{padding:.32rem .5rem;font-size:.8rem;height:auto}

/* ============================================================
   READABILITY PASS
   The original scale leaned on small mono type for structural labels, which
   read as fine print rather than as information. Everything below raises the
   floor: no interface text sits under about 13px, body copy is larger, and
   line lengths stay in a comfortable measure.
   ============================================================ */

/* ---------- Body copy and headings ---------- */
p { font-size: 1rem; line-height: 1.7; }

.lead {
  font-size: 1.16rem;
  line-height: 1.62;
  max-width: 62ch;
}

.prose { font-size: 1.05rem; line-height: 1.75; }
.prose p, .prose li { font-size: 1.05rem; }
.prose h2 { font-size: 1.6rem; margin-top: 2.4rem; }
.prose h3 { font-size: 1.24rem; margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .5rem; }

/* Card and panel headings were competing with body text at the old sizes. */
.card h3, .panel h3 { font-size: 1.14rem; line-height: 1.35; }
.card h4, .panel h4 { font-size: 1.02rem; line-height: 1.4; }
.card p { font-size: .98rem; line-height: 1.62; }

/* ---------- Structural labels ---------- */
/* Mono labels carry real information, so they need to be legible, not decorative. */
.eyebrow { font-size: .78rem; letter-spacing: .15em; }
.card__code { font-size: .74rem; letter-spacing: .12em; }
.mono { font-size: .88rem; }
.small { font-size: .9rem; }
.hint { font-size: .88rem; line-height: 1.55; }
.crumbs { font-size: .82rem; letter-spacing: .1em; }

/* ---------- Forms ---------- */
.field label, .label {
  font-size: .88rem;
  letter-spacing: .04em;
}
.input, .select, .textarea {
  font-size: 1rem;
  padding: .8rem .95rem;
}
.textarea { line-height: 1.6; }
.check, .radio-card { font-size: .98rem; }
.radio-card b { font-size: 1.02rem; }
.field-error { font-size: .86rem; }

/* ---------- Buttons ---------- */
.btn { font-size: .82rem; letter-spacing: .08em; padding: .85rem 1.5rem; }
.btn--sm { font-size: .76rem; padding: .6rem 1.1rem; }
.btn--xs { font-size: .72rem; padding: .45rem .8rem; }

/* ---------- Navigation ---------- */
.nav__link { font-size: .96rem; }
.nav__drop a { font-size: .95rem; }
.nav__drop a small { font-size: .8rem; }
.topbar { font-size: .82rem; }

/* ---------- Tables and data ---------- */
table.data { font-size: .96rem; }
table.data th { font-size: .74rem; letter-spacing: .1em; }
table.data td { padding: 1rem; }
.pill { font-size: .74rem; padding: .28rem .65rem; }

/* ---------- App shell ---------- */
.side a { font-size: .98rem; }
.side__label { font-size: .72rem; letter-spacing: .13em; }
.main__bar-label { font-size: .78rem; }
.kpi span { font-size: .8rem; letter-spacing: .06em; }
.kpi b { font-size: 2rem; }
.kpi--sm b { font-size: 1.6rem; }
.meta-list .k { font-size: .8rem; }
.meta-list .v { font-size: .98rem; }
.panel__head h2 { font-size: 1.22rem; }
.thread__msg p { font-size: .99rem; line-height: 1.65; }
.thread__meta { font-size: .86rem; }
.log li { font-size: .92rem; }

/* ---------- Marketing components ---------- */
.strip__item b { font-size: 1.9rem; }
.strip__item span { font-size: .82rem; }
.stats b { font-size: 2.3rem; }
.stats span { font-size: .85rem; letter-spacing: .06em; }
.ticks li { font-size: 1rem; line-height: 1.6; padding-left: 1.7rem; }
.step h4 { font-size: 1.14rem; }
.step p { font-size: 1rem; }
.plan__tier { font-size: .74rem; }
.plan h3 { font-size: 1.35rem; }
.plan__price b { font-size: 2.6rem; }
.plan__cycle, .plan__desc { font-size: .95rem; }
.plan__fee { font-size: .88rem; }
.compare__lines li { font-size: .95rem; }
.compare__price { font-size: 2rem; }
.accordion summary { font-size: 1.06rem; }
.accordion__body { font-size: 1rem; line-height: 1.7; }
.quote p { font-size: 1.15rem; line-height: 1.6; }
.provider__headline { font-size: 1rem; }
.provider__bio { font-size: .95rem; }
.chip { font-size: .8rem; }
.footer { font-size: .96rem; }
.footer a { font-size: .96rem; }
.note { font-size: .98rem; line-height: 1.65; }
.alert { font-size: .98rem; }
.empty h4 { font-size: 1.1rem; }
.empty p { font-size: .98rem; }

/* ---------- Mobile: keep the lift, tighten the spacing ---------- */
@media (max-width: 820px) {
  .brand img { height: 50px; }
  .brand__name { font-size: 1.32rem; }
  .brand__sub { font-size: .66rem; }

  .lead { font-size: 1.08rem; }
  .prose, .prose p, .prose li { font-size: 1.02rem; }
  .kpi b { font-size: 1.7rem; }
  .stats b { font-size: 1.9rem; }
  .plan__price b { font-size: 2.2rem; }

  /* 16px minimum on inputs stops iOS zooming the page on focus. */
  .input, .select, .textarea { font-size: 16px; }
}

@media (max-width: 420px) {
  .brand img { height: 44px; }
  .brand__name { font-size: 1.18rem; }
  .brand__sub { font-size: .6rem; letter-spacing: .12em; }
}

/* Membership plan pricing editor */
.plan-editor__row{
  border:1px solid var(--line);border-radius:4px;padding:1.1rem 1.2rem;margin-bottom:.9rem;background:#fff;
}
.plan-editor__head{margin-bottom:.9rem}
.plan-editor__head .card__code{margin-bottom:.5rem}
.plan-editor__prices{
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:.85rem;align-items:end;
}
.plan-editor__save{min-width:7rem}
@media (max-width:1080px){
  .plan-editor__prices{grid-template-columns:repeat(2,1fr)}
  .plan-editor__save{grid-column:1/-1}
}
@media (max-width:520px){
  .plan-editor__prices{grid-template-columns:1fr}
}

/* ============================================================
   PARTNERS & AFFILIATES
   ============================================================ */
.partners{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;
}
.partner-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:4px;text-decoration:none;overflow:hidden;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.partner-card:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(6,18,31,.09);
}
.partner-card__top{
  height:6.5rem;display:flex;align-items:center;justify-content:center;
  background:var(--sand);border-bottom:1px solid var(--line);padding:1rem;
}
.partner-card__top img{max-height:3.6rem;max-width:100%;width:auto;object-fit:contain}
.partner-card__initial{
  font-family:var(--display);font-size:2.2rem;color:var(--navy);opacity:.35;
}
.partner-card__body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;flex:1}
.partner-card__rel{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:.4rem;
}
.partner-card__body h3{font-size:1.06rem;margin:0 0 .45rem;color:var(--navy)}
.partner-card__body p{font-size:.92rem;color:var(--slate);margin:0 0 .9rem;line-height:1.55}
.partner-card__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.76rem;color:var(--slate-2);
}
.partner-card:hover .partner-card__go{color:var(--navy)}

/* Leaving-site interstitial */
.leaving-card{
  max-width:26rem;margin:2rem auto 0;padding:1.8rem;background:#fff;
  border:1px solid var(--line);border-radius:4px;text-align:center;
}
.leaving-card__logo{max-height:4.5rem;max-width:80%;width:auto;margin-bottom:1rem}
.leaving-card__host{
  font-size:1.02rem;color:var(--navy);word-break:break-all;margin:0 0 .6rem;
}
.text-left{text-align:left}

/* Campaign landing pages */
.campaign-meta{
  display:flex;flex-wrap:wrap;gap:2rem;margin-top:1.6rem;
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
}
.campaign-meta span{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:.3rem;
}
.campaign-meta b{font-size:1.06rem;color:#fff;font-weight:500}
@media (max-width:620px){ .campaign-meta{gap:1.2rem} }

/* Console-wide search box in the admin top bar */
.main__search{flex:1 1 16rem;max-width:24rem;min-width:0;margin-left:auto}
.main__search input{
  width:100%;padding:.55rem .85rem;font-size:.9rem;font-family:var(--body);
  border:1px solid var(--line);border-radius:3px;background:var(--sand);
  color:var(--navy);
}
.main__search input:focus{
  outline:none;border-color:var(--gold);background:#fff;
  box-shadow:0 0 0 3px rgba(200,151,63,.16);
}
@media (max-width:820px){
  .main__search{flex:1 1 100%;order:3;max-width:none;margin-left:0}
  .main__bar{flex-wrap:wrap}
}

/* ---------- Error log entries ---------- */
.logentry{border:1px solid var(--line);border-radius:3px;margin-bottom:.45rem;background:#fff}
.logentry summary{
  display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;cursor:pointer;
  list-style:none;font-size:.9rem;
}
.logentry summary::-webkit-details-marker{display:none}
.logentry__level{
  flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;
  padding:.2rem .45rem;border-radius:2px;background:var(--sand-2);color:var(--slate);
}
.logentry--error .logentry__level,
.logentry--emergency .logentry__level{background:var(--bad-bg);color:var(--bad)}
.logentry--warning .logentry__level{background:var(--warn-bg);color:var(--warn)}
.logentry--info .logentry__level{background:var(--info-bg);color:var(--info)}
.logentry__msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logentry__time{flex:none;font-family:var(--mono);font-size:.74rem;color:var(--slate-2)}
.logentry__body{padding:0 .9rem .9rem}
.logentry--error,.logentry--emergency{border-left:3px solid var(--bad)}
.logentry--warning{border-left:3px solid var(--gold)}

/* ---------- Mail authentication checks ---------- */
.authcheck{border:1px solid var(--line);border-radius:3px;padding:.85rem 1rem;margin-bottom:.6rem}
.authcheck--pass{border-left:3px solid var(--ok);background:rgba(28,122,79,.03)}
.authcheck--warn{border-left:3px solid var(--gold);background:rgba(200,151,63,.04)}
.authcheck--fail{border-left:3px solid var(--bad);background:rgba(163,43,43,.03)}
.authcheck__head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.45rem}
.authcheck .input{margin-top:.4rem;font-size:.82rem}

@media (max-width:620px){
  .logentry summary{flex-wrap:wrap;gap:.4rem}
  .logentry__msg{white-space:normal;flex:1 1 100%;order:3}
}



/* ============================================================
   SOCIAL ICONS, circular, official brand colours
   ============================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.social{
  display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap;
}

/* The footer sets its links to display:block, which would defeat the flex
   centring below, so this is scoped to win regardless of context. */
.social .social__link,
.social__link{
  --tile: 3rem;
  display:inline-flex !important;
  align-items:center;justify-content:center;
  width:var(--tile);height:var(--tile);
  border-radius:50%;
  color:#fff;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.social__link svg{
  display:block;
  width:calc(var(--tile) * .58);
  height:calc(var(--tile) * .58);
}

/* Official platform colours */
.social__link--facebook { background:#1877F2; }
.social__link--linkedin { background:#0A77B5; }
.social__link--instagram{ background:#E1306C; }
.social__link--youtube  { background:#FF0000; }
.social__link--whatsapp { background:#25D366; }

/* TikTok and X are black-on-white, as those brands specify. */
.social__link--tiktok,
.social__link--x{
  background:#FFFFFF;color:#000000;
  box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.08);
}

.social__link:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.32);
  filter:brightness(1.06);
}
.social__link--tiktok:hover,
.social__link--x:hover{
  box-shadow:0 10px 22px rgba(0,0,0,.32), inset 0 0 0 1px rgba(0,0,0,.08);
}
.social__link:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

.footer .social__link{ box-shadow:0 2px 10px rgba(0,0,0,.45); }

.social--compact{ margin-top:1.1rem; gap:.6rem; }
.social--compact .social__link{ --tile: 2.5rem; }

@media (hover:none) and (pointer:coarse){
  .social__link{ --tile: 3.1rem; }
  .social--compact .social__link{ --tile: 2.8rem; }
}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   A solid green circle with the white glyph, as WhatsApp specifies for its
   click-to-chat button. Bottom-right is the established position for chat
   launchers, so it is where people look for one.
   ============================================================ */
.wa-float,
.wa-float:hover,
.wa-float:visited{ color:#fff; text-decoration:none; }

.wa-float{
  position:fixed; z-index:150;
  display:inline-flex !important;
  right:max(1.25rem, env(safe-area-inset-right));
  bottom:max(1.25rem, env(safe-area-inset-bottom));
  align-items:center; justify-content:center;
  width:3.75rem; height:3.75rem;
  background:#25D366;
  border-radius:50%;
  box-shadow:0 6px 20px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float__icon{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.wa-float__icon svg{ width:60%; height:60%; display:block; }

.wa-float:hover,
.wa-float:focus-visible{
  transform:scale(1.06);
  box-shadow:0 10px 28px rgba(37,211,102,.55), 0 3px 10px rgba(0,0,0,.25);
}
.wa-float:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* One gentle pulse cycle draws the eye without nagging. */
@keyframes waPulse{
  0%   { box-shadow:0 6px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow:0 6px 20px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow:0 6px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-float{ animation:waPulse 2.6s ease-out 3s 3; }

/* Keep clear of the live-sync banner, which also sits at the bottom. */
.sync-toast{ margin-right:5rem; }

@media (max-width:620px){
  .wa-float{ width:3.4rem; height:3.4rem; }
  .sync-toast{
    margin-right:0;
    bottom:max(5.2rem, calc(env(safe-area-inset-bottom) + 5rem));
  }
}

@media print{ .wa-float{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .wa-float{ animation:none; transition:none; }
  .wa-float:hover{ transform:none; }
  .social__link{ transition:none; }
  .social__link:hover{ transform:none; }
}

/* Footer brand lockup, identical structure to the header, recoloured for the
   dark background so the two read as one consistent mark. */
.brand--footer{
  display:inline-flex !important;
  align-items:center;gap:.85rem;
  margin-bottom:1.2rem;text-decoration:none;
}
.brand--footer img{height:56px;width:auto;background:none;padding:0}
.brand--footer .brand__name{color:#fff;font-size:1.5rem}
.brand--footer .brand__sub{color:var(--gold-2)}
.brand--footer:hover .brand__name{color:#fff}

@media (max-width:820px){
  .brand--footer img{height:48px}
  .brand--footer .brand__name{font-size:1.28rem}
}

/* ============================================================
   PASSWORD VISIBILITY TOGGLE
   ============================================================ */
.pw-wrap{ position:relative; display:block; }
/* Room for the button so long values never slide underneath it. */
.pw-wrap .input{ padding-right:3rem; width:100%; }

.pw-toggle{
  position:absolute; top:0; right:0; height:100%;
  width:2.9rem;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--slate-2); border-radius:0 3px 3px 0;
  transition:color .15s ease, background .15s ease;
}
.pw-toggle:hover{ color:var(--navy); background:rgba(6,18,31,.04); }
.pw-toggle:focus-visible{
  outline:2px solid var(--gold); outline-offset:-2px; color:var(--navy);
}
.pw-toggle svg{ display:block; }

/* On the dark auth split-screen the icon needs the lighter treatment. */
.auth .pw-toggle,
.layout-auth .pw-toggle{ color:var(--slate-2); }

@media (hover:none) and (pointer:coarse){
  .pw-toggle{ width:3.2rem; }
  .pw-wrap .input{ padding-right:3.4rem; }
}

/* ============================================================
   SITE SEARCH
   ============================================================ */
.sitesearch{ display:flex; align-items:stretch; gap:.5rem; }
.sitesearch__input{
  flex:1; min-width:0;
  font-family:var(--body); font-size:.95rem;
  padding:.6rem .85rem;
  border:1px solid var(--line); border-radius:3px;
  background:#fff; color:var(--navy);
}
.sitesearch__input::placeholder{ color:var(--slate-2); }
.sitesearch__input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,151,63,.16);
}
.sitesearch__go{
  flex:none; width:2.6rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; border:0; border-radius:3px; cursor:pointer;
  transition:background .15s ease;
}
.sitesearch__go:hover{ background:var(--gold); color:var(--ink); }
.sitesearch__go:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* --- Header: always visible, so a click always lands in the field.
       A collapse-on-hover version put the submit button on top of the input,
       which meant clicking it fired an empty search instead of opening it. --- */
.sitesearch--nav{ position:relative; gap:0; width:11.5rem; }
.sitesearch--nav .sitesearch__input{
  width:100%; padding:.5rem .75rem; padding-right:2.4rem; font-size:.9rem;
  background:var(--sand); border-color:var(--line);
  transition:width .2s ease, background .2s ease, box-shadow .2s ease;
}
.sitesearch--nav .sitesearch__input:focus{ background:#fff; }
.sitesearch--nav .sitesearch__go{
  position:absolute; right:0; top:0; height:100%; width:2.4rem;
  background:transparent; color:var(--slate);
}
.sitesearch--nav .sitesearch__go:hover{ background:transparent; color:var(--navy); }

@media (max-width:1240px){
  .sitesearch--nav{ width:8.5rem; }
}
/* Matches the breakpoint where .nav__links collapses into the burger menu.
   Below this the mobile panel provides a full-width search field instead. */
@media (max-width:1080px){
  .sitesearch--nav{ display:none; }
}

/* --- Large field on the results page --- */
.sitesearch--lg{ margin-top:1.6rem; max-width:34rem; }
.sitesearch--lg .sitesearch__input{ font-size:1.05rem; padding:.85rem 1rem; }

/* --- Mobile menu and footer --- */
.sitesearch--mobile{ margin-bottom:1.2rem; }
.sitesearch--footer{ margin-top:1.3rem; max-width:20rem; }
.sitesearch--footer .sitesearch__input{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff;
}
.sitesearch--footer .sitesearch__input::placeholder{ color:rgba(255,255,255,.5); }
.sitesearch--footer .sitesearch__go{ background:var(--gold); color:var(--ink); }
.sitesearch--footer .sitesearch__go:hover{ background:var(--gold-2); }

/* --- Results --- */
.searchgroup{ margin-bottom:2.4rem; }
.searchgroup .eyebrow{ margin-bottom:1rem; }

.searchhit{
  display:block; padding:1.1rem 1.2rem; margin-bottom:.6rem;
  border:1px solid var(--line); border-left:3px solid transparent;
  border-radius:4px; background:#fff; text-decoration:none;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.searchhit:hover{
  border-color:var(--line); border-left-color:var(--gold);
  transform:translateX(2px); box-shadow:0 6px 18px rgba(6,18,31,.07);
}
.searchhit h3{
  margin:0 0 .35rem; font-size:1.08rem; color:var(--navy); line-height:1.35;
}
.searchhit p{ margin:0 0 .5rem; font-size:.95rem; color:var(--slate); line-height:1.6; }
.searchhit__meta{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold);
}
.searchhit__url{ color:var(--slate-2); text-transform:none; letter-spacing:0; }

.searchhit mark{
  background:rgba(200,151,63,.28); color:inherit;
  padding:0 .12em; border-radius:2px;
}

@media (max-width:620px){
  .sitesearch--lg{ flex-direction:column; }
  .sitesearch--lg .btn{ width:100%; }
  .searchhit{ padding:.95rem 1rem; }
}

/* ============================================================
   FIXES: footer spacing, nav baseline, mobile search gap
   ============================================================ */

/* --- Footer: the search box sits below the social icons, with enough
       separation that neither can overlap the other. --- */
.footer .social{ margin-bottom:1.5rem; }
.sitesearch--footer{ margin-top:0; clear:both; }

/* --- Nav baseline.
   Dropdown parents wrap their link in a div. An inline link's vertical
   padding does not expand that wrapper, so it measured shorter than the
   plain links beside it and centred higher. Making both the wrapper and the
   links flex boxes of equal height puts every item on one baseline, open or
   closed, hovered or active. --- */
.nav__links > a.nav__link,
.nav__links > .has-drop{
  display:flex; align-items:center;
  align-self:stretch;
}
.nav__links > .has-drop > .nav__link{
  display:flex; align-items:center; height:100%;
}
.nav__link{ line-height:1.2; }
/* The underline is positioned from the link box, so it stays put too. */
.nav__link.is-active::after{ bottom:.15rem; }

/* --- Mobile search: the stacked field and button were touching. --- */
@media (max-width:620px){
  .sitesearch--lg{ gap:.85rem; }
  .sitesearch--lg .sitesearch__input{ margin-bottom:0; }
}

/* Sign out is a form so it cannot be triggered from another site. These
   rules keep it looking exactly like the link it replaced. */
.logout-form{ display:inline; margin:0; }
.logout-form button{ font:inherit; cursor:pointer; }
.linklike{
  background:none; border:0; padding:0; color:inherit;
  font:inherit; cursor:pointer; text-align:left;
}
.side .logout-form{ display:block; }
.side .logout-form button{ width:100%; }

/* ============================================================
   COOKIE AND CACHING NOTICE
   ============================================================ */
.cookie-notice{
  position:fixed; z-index:160;
  left:max(1rem, env(safe-area-inset-left));
  bottom:max(1rem, env(safe-area-inset-bottom));
  width:min(30rem, calc(100vw - 2rem));
  background:var(--navy); color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px; padding:1.15rem 1.3rem;
  box-shadow:0 16px 44px rgba(6,18,31,.4);
  opacity:0; transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease;
}
.cookie-notice.is-visible{ opacity:1; transform:translateY(0); }

.cookie-notice__title{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-2); margin:0 0 .5rem;
}
.cookie-notice__text{
  font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.82); margin:0 0 1rem;
}
.cookie-notice__text a{ color:var(--gold-2); text-decoration:underline; }

.cookie-notice__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

.cookie-notice__close{
  position:absolute; top:.5rem; right:.6rem;
  background:none; border:0; color:rgba(255,255,255,.5);
  font-size:1.3rem; line-height:1; cursor:pointer; padding:.2rem .35rem;
}
.cookie-notice__close:hover{ color:#fff; }

/* Keep clear of the WhatsApp button on narrow screens. */
@media (max-width:820px){
  .cookie-notice{
    width:calc(100vw - 2rem);
    bottom:max(5.5rem, calc(env(safe-area-inset-bottom) + 5.2rem));
  }
}
@media print{ .cookie-notice{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .cookie-notice{ transition:none; }
}

/* ============================================================
   COREGRAND ESSENTIALS  (/essentials)
   Provider recruitment page. Reuses the shared components (.card, .steps,
   .head, .cta-band, .ticks); only the pieces below are specific to it, all
   namespaced so nothing else is affected.
   ============================================================ */

/* Hero, on the same navy gradient as other interior page heads. */
.ess-hero{
  background:linear-gradient(168deg, var(--navy) 0%, var(--ink) 100%);
  color:#fff; position:relative; overflow:hidden;
  padding:clamp(3rem,6vw,5rem) 0 clamp(2.6rem,5vw,4rem);
}
.ess-hero::after{
  content:''; position:absolute; right:-160px; top:-120px;
  width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(200,151,63,.22), transparent 68%);
  pointer-events:none;
}
.ess-hero .wrap{ position:relative; z-index:2; }
.ess-hero h1{
  color:#fff; font-size:clamp(2.2rem,5.4vw,3.2rem);
  margin:.9rem 0; max-width:18ch;
}
.ess-hero h1 em{ font-style:italic; color:var(--gold-2); }
.ess-hero__lead{
  color:rgba(255,255,255,.82);
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.65; max-width:54ch; margin:0;
}

/* Light eyebrow for use on the dark hero. */
.eyebrow--light{ color:var(--gold-2); }
.eyebrow--light::before{ background:var(--gold-2); }

/* "What you get" as a two column ticked list. */
.ticks--grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem 2rem;
}
.ticks--grid li{ align-items:flex-start; }
.ticks--grid strong{ color:var(--navy); }
@media (max-width:640px){ .ticks--grid{ grid-template-columns:1fr; } }

/* Founder quote. */
.ess-quote{ margin:0; text-align:center; }
.ess-quote p{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.45;
  color:var(--ink); margin:0 0 1rem;
}
.ess-quote cite{
  font-family:var(--mono); font-style:normal;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate);
}

/* Apply contact buttons, on the navy cta-band. */
.ess-contact{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
  margin:1.4rem 0 .4rem;
}
.ess-contact__c{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
  color:#fff; border-radius:var(--r); padding:.8rem 1.25rem;
  font-family:var(--mono); font-size:1rem; font-weight:600;
  letter-spacing:.02em; text-decoration:none; min-width:260px; text-align:center;
  transition:background .16s ease, border-color .16s ease;
}
.ess-contact__c:hover{ background:rgba(255,255,255,.18); border-color:#fff; }
.ess-contact__c:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; }
@media (max-width:560px){ .ess-contact__c{ min-width:0; width:100%; } }