/* ==========================================================================
   Shul Services — marketing site
   One stylesheet, shared by every page. No build step, no framework.
   ========================================================================== */

:root {
  /* Navy + gold, carried over from the portal so the marketing site and the
     product a prospect logs into afterwards read as the same company. */
  --navy-900: #0b1f36;
  --navy-800: #102c4a;
  --navy-700: #16375a;
  --navy-600: #1d4571;
  --gold-600: #b8862f;
  --gold-500: #c6973f;
  --gold-400: #d9b169;
  --gold-100: #f6ecd8;

  --ink: #16202b;
  --ink-soft: #46566a;
  --ink-mute: #6d7d90;
  --line: #e3e0d9;
  --line-soft: #efece5;

  --paper: #fbf9f5;
  --paper-2: #f4f1ea;
  --white: #ffffff;

  --ok: #2f855a;
  --ok-bg: #e8f4ed;
  --warn: #b7791f;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(11, 31, 54, .06), 0 2px 8px rgba(11, 31, 54, .05);
  --shadow: 0 4px 14px rgba(11, 31, 54, .08), 0 12px 34px rgba(11, 31, 54, .07);
  --shadow-lg: 0 18px 60px rgba(11, 31, 54, .16);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.18; color: var(--navy-900); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.65rem); }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.02rem; font-family: var(--sans); font-weight: 700; letter-spacing: -.005em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 840px; margin: 0 auto; padding: 0 24px; }

/* ----------------------------------------------------------------- nav -- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 249, 245, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  height: var(--nav-h); display: flex; align-items: center; gap: 26px;
}
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 700; font-size: 1.24rem; color: var(--navy-900); flex-shrink: 0; }
.brand:hover { color: var(--navy-900); }
.brand__mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--navy-700), var(--navy-900));
  color: var(--gold-400); display: grid; place-items: center;
  font-size: 1.02rem; box-shadow: var(--shadow-sm);
}
.brand__mark svg { width: 19px; height: 19px; }

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 8px 13px; border-radius: 8px; font-size: .93rem; font-weight: 500;
  color: var(--ink-soft); white-space: nowrap; transition: background .15s, color .15s;
}
.nav__links a:hover { background: var(--paper-2); color: var(--navy-800); }
.nav__links a.is-active { color: var(--navy-900); font-weight: 650; background: var(--paper-2); }
.nav__cta { margin-left: 10px; }

.nav__toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 9px; width: 42px; height: 38px; cursor: pointer; color: var(--navy-800);
  align-items: center; justify-content: center;
}
.nav__toggle span { display: block; width: 17px; height: 2px; background: currentColor; position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 0; width: 17px; height: 2px; background: currentColor; }
.nav__toggle span::before { top: -5.5px; } .nav__toggle span::after { top: 5.5px; }

/* --------------------------------------------------------------- parts -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; font-size: .93rem; font-weight: 600;
  font-family: var(--sans); cursor: pointer; border: 1px solid transparent;
  transition: transform .14s, box-shadow .14s, background .14s, color .14s;
  text-align: center;
}
.btn--gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #2a1e06; box-shadow: 0 3px 12px rgba(184,134,47,.32); }
.btn--gold:hover { color: #2a1e06; transform: translateY(-1.5px); box-shadow: 0 7px 20px rgba(184,134,47,.4); }
.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; transform: translateY(-1.5px); box-shadow: var(--shadow); }
.btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.06); }
.btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn--outline { border-color: var(--line); color: var(--navy-800); background: var(--white); }
.btn--outline:hover { border-color: var(--gold-500); color: var(--navy-900); background: var(--white); }
.btn--sm { padding: 9px 17px; font-size: .87rem; }

.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-600); margin-bottom: 14px;
}
.eyebrow--light { color: var(--gold-400); }

.lede { font-size: 1.14rem; color: var(--ink-soft); line-height: 1.72; }
.muted { color: var(--ink-mute); }
.small { font-size: .89rem; }

section { padding: 88px 0; }
section.tight { padding: 62px 0; }
.band-paper2 { background: var(--paper-2); }
.band-white  { background: var(--white); }
.band-navy   { background: var(--navy-900); color: #cfdae6; }
.band-navy h2, .band-navy h3, .band-navy h4 { color: #fff; }
.band-navy .lede { color: #a9bccf; }

.section-head { max-width: 730px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.rule { width: 54px; height: 3px; border-radius: 2px; background: var(--gold-500); margin: 0 0 22px; }
.center .rule { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- cards -- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d8d3c8; }
.card h3, .card h4 { margin-bottom: .45em; }
.card p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 0; }
.card__icon {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--gold-100); color: var(--gold-600); margin-bottom: 16px; font-size: 1.2rem;
}
.card__icon svg { width: 21px; height: 21px; }
.band-navy .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.11); box-shadow: none; }
.band-navy .card p { color: #a9bccf; }
.band-navy .card__icon { background: rgba(198,151,63,.16); color: var(--gold-400); }

/* ------------------------------------------------------------ features -- */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.feature-list li { position: relative; padding-left: 30px; font-size: .96rem; color: var(--ink-soft); }
.feature-list li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 17px; height: 17px; border-radius: 50%;
  background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f855a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.feature-list li strong { color: var(--ink); font-weight: 650; }
.band-navy .feature-list li { color: #a9bccf; }
.band-navy .feature-list li strong { color: #fff; }
.band-navy .feature-list li::before { background-color: rgba(47,133,90,.22); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(198,151,63,.2), transparent 62%),
    radial-gradient(760px 420px at 8% 108%, rgba(29,69,113,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 52%, #0d2540 100%);
  padding: 104px 0 96px;
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 76%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--gold-400); }
.hero__lede { font-size: 1.2rem; color: #b7c8da; max-width: 60ch; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 13px; flex-wrap: wrap; }
.hero__note { margin-top: 26px; font-size: .87rem; color: #8fa4ba; }

.hero--page { padding: 72px 0 66px; }
.hero--page h1 { max-width: 22ch; }

.hero__stats { display: flex; gap: 42px; flex-wrap: wrap; margin-top: 54px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.14); }
.hero__stat b { display: block; font-family: var(--serif); font-size: 1.95rem; color: #fff; line-height: 1.1; }
.hero__stat span { font-size: .82rem; color: #8fa4ba; letter-spacing: .05em; text-transform: uppercase; }

/* --------------------------------------------------------------- split -- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--wide-right { grid-template-columns: .88fr 1.12fr; }
.split--wide-left  { grid-template-columns: 1.12fr .88fr; }
.split + .split { margin-top: 84px; }

/* --------------------------------------------------------- screenshots -- */
.shot {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--white);
}
.shot img { width: 100%; }
.shot__bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: #eef0f3; border-bottom: 1px solid #dfe3e8;
}
.shot__dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd2da; }
.shot__url {
  margin-left: 8px; font-family: var(--mono); font-size: .74rem; color: #7c8794;
  background: #fff; border-radius: 5px; padding: 3px 11px; border: 1px solid #dfe3e8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot__caption { font-size: .85rem; color: var(--ink-mute); margin-top: 12px; }
figure { margin: 0; }

/* ------------------------------------------------------ UI recreations -- */
/* Faithful in-page rebuilds of portal screens. Drawn rather than screenshotted
   so they stay crisp, respond to the viewport, and never show real client data. */
.ui {
  border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow); font-size: .8rem;
}
.ui__chrome { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: #eef0f3; border-bottom: 1px solid #dfe3e8; }
.ui__body { display: flex; min-height: 0; }
.ui__side { width: 152px; flex-shrink: 0; background: var(--navy-900); padding: 14px 9px; }
.ui__brand { display: flex; align-items: center; gap: 7px; color: #fff; font-family: var(--serif); font-size: .82rem; padding: 0 6px 13px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 10px; }
.ui__navitem { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; color: #93a8bf; font-size: .74rem; margin-bottom: 2px; }
.ui__navitem.on { background: rgba(198,151,63,.17); color: var(--gold-400); font-weight: 600; }
.ui__main { flex: 1; padding: 17px 19px; background: var(--paper); min-width: 0; }
.ui__h { font-family: var(--serif); font-size: 1rem; color: var(--navy-900); margin-bottom: 13px; font-weight: 700; }

.ui__cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-bottom: 15px; }
.ui__card { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; }
.ui__card b { display: block; font-family: var(--serif); font-size: 1rem; color: var(--navy-800); line-height: 1.2; }
.ui__card span { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); font-weight: 600; margin-bottom: 3px; }
.ui__card.ok b { color: var(--ok); }
.ui__card.gold b { color: var(--gold-600); }

.ui__table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ui__table th { background: var(--navy-800); color: #fff; font-size: .63rem; text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 7px 10px; font-weight: 600; }
.ui__table td { padding: 7px 10px; border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: .74rem; white-space: nowrap; }
.ui__table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ui__table tr:nth-child(even) td { background: #fcfbf9; }

.pill { display: inline-block; padding: 1.5px 8px; border-radius: 999px; font-size: .62rem; font-weight: 650; }
.pill--ok   { background: var(--ok-bg); color: var(--ok); }
.pill--gold { background: var(--gold-100); color: var(--gold-600); }
.pill--grey { background: #edf0f3; color: #64748b; }
.pill--red  { background: #fdeceb; color: #c53030; }

/* ----------------------------------------------------------- flow/step -- */
.steps { counter-reset: step; display: grid; gap: 20px; }
.step {
  position: relative; padding: 25px 26px 25px 78px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 25px; top: 25px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy-800); color: var(--gold-400); display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.02rem;
}
.step h3 { margin-bottom: .35em; }
.step p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 0; }
.step__meta { margin-top: 11px; font-size: .82rem; color: var(--ink-mute); }

/* ------------------------------------------------------------- diagram -- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
.flow__node {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; text-align: center; box-shadow: var(--shadow-sm);
}
.flow__node h4 { margin-bottom: .3em; font-size: .95rem; }
.flow__node p { font-size: .84rem; color: var(--ink-mute); margin: 0; }
.flow__node--accent { border-color: var(--gold-400); background: linear-gradient(180deg, #fffdf8, #fff); }
.flow__arrow { display: grid; place-items: center; color: var(--gold-500); font-size: 1.3rem; font-weight: 700; }

/* ----------------------------------------------------------- security -- */
.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.sec {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: var(--white); box-shadow: var(--shadow-sm);
}
.sec__top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.sec__ico { width: 36px; height: 36px; border-radius: 9px; background: var(--navy-800); color: var(--gold-400); display: grid; place-items: center; flex-shrink: 0; }
.sec__ico svg { width: 18px; height: 18px; }
.sec h3 { margin: 0; font-size: 1.06rem; }
.sec p { font-size: .93rem; color: var(--ink-soft); }
.sec ul { margin: 0; padding-left: 19px; font-size: .9rem; color: var(--ink-soft); }
.sec ul li { margin-bottom: 6px; }

/* -------------------------------------------------------------- tables -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
table.data { width: 100%; border-collapse: collapse; min-width: 560px; }
table.data th { background: var(--navy-800); color: #fff; text-align: left; padding: 13px 17px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
table.data td { padding: 13px 17px; border-top: 1px solid var(--line-soft); font-size: .93rem; color: var(--ink-soft); vertical-align: top; }
table.data td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
table.data tr:nth-child(even) td { background: #fcfbf9; }

/* --------------------------------------------------------------- price -- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; align-items: start; }
.tier { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 27px; box-shadow: var(--shadow-sm); position: relative; }
.tier--featured { border-color: var(--gold-500); box-shadow: var(--shadow); }
.tier__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #2a1e06; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 5px 15px; border-radius: 999px; white-space: nowrap; }
.tier h3 { margin-bottom: .2em; }
.tier__price { font-family: var(--serif); font-size: 2.5rem; color: var(--navy-900); line-height: 1.1; margin: 14px 0 2px; }
.tier__price sup { font-size: 1.1rem; top: -.7em; }
.tier__per { font-size: .84rem; color: var(--ink-mute); margin-bottom: 20px; }
.tier .feature-list { margin: 20px 0 24px; }
.tier .btn { width: 100%; }

/* -------------------------------------------------------------- faq/qa -- */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; padding: 21px 44px 21px 2px; font-weight: 650; color: var(--navy-900);
  list-style: none; position: relative; font-size: 1.02rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--gold-500); line-height: 1;
}
.qa details[open] summary::after { content: '\2013'; }
.qa details > div { padding: 0 44px 22px 2px; color: var(--ink-soft); font-size: .96rem; }

/* ---------------------------------------------------------------- form -- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 650; color: var(--navy-800); }
.field label span { color: var(--ink-mute); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white); color: var(--ink); width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(198,151,63,.16);
}
.form-note { font-size: .84rem; color: var(--ink-mute); margin-top: 15px; }
.form-status { margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-sm); font-size: .92rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #bfe0cd; }
.form-status.err { background: #fdeceb; color: #c53030; border: 1px solid #f5c6c3; }

/* ------------------------------------------------------------- contact -- */
.contact-card { display: flex; gap: 15px; align-items: flex-start; padding: 21px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.contact-card:last-child { border-bottom: none; }
.contact-card__ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(198,151,63,.16); color: var(--gold-400); display: grid; place-items: center; flex-shrink: 0; }
.contact-card__ico svg { width: 19px; height: 19px; }
.contact-card h4 { margin: 0 0 3px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #8fa4ba; font-weight: 650; }
.contact-card p, .contact-card a { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 500; }
.contact-card a:hover { color: var(--gold-400); }
.contact-card .sub { font-size: .86rem; color: #8fa4ba; font-weight: 400; margin-top: 3px; }

/* ------------------------------------------------------------- callout -- */
.callout {
  border-left: 3px solid var(--gold-500); background: var(--white);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-sm);
}
.callout h4 { margin-bottom: .35em; }
.callout p { font-size: .94rem; color: var(--ink-soft); margin-bottom: 0; }

.cta-band { background: linear-gradient(140deg, var(--navy-800), var(--navy-900)); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: #b7c8da; margin: 0 auto 30px; max-width: 58ch; }
.cta-band__actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------- footer -- */
.foot { background: #081726; color: #7f93a8; padding: 60px 0 30px; font-size: .91rem; }
.foot__grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 42px; }
.foot h4 { color: #fff; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 15px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: #7f93a8; }
.foot a:hover { color: var(--gold-400); }
.foot .brand { color: #fff; margin-bottom: 14px; }
.foot__bottom { border-top: 1px solid rgba(255,255,255,.09); padding-top: 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .85rem; }

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1020px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--paper);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 13px 15px; font-size: 1rem; }
  .nav__cta { margin: 8px 0 0; }
  .nav__toggle { display: flex; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flow { grid-template-columns: 1fr; }
  .flow__arrow { transform: rotate(90deg); padding: 2px 0; }
  .split, .split--wide-right, .split--wide-left { grid-template-columns: 1fr; gap: 38px; }
  .tiers { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ui__side { display: none; }
}
@media (max-width: 720px) {
  section { padding: 62px 0; }
  .hero { padding: 74px 0 66px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sec-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 26px; }
  .hero__stat b { font-size: 1.6rem; }
  .ui__cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .step { padding: 22px 20px 22px 20px; }
  .step::before { position: static; margin-bottom: 13px; }
  .foot__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* A flow node keeps its white card even on the navy band, so its heading must
   stay dark — the generic `.band-navy h4 {color:#fff}` rule would otherwise
   paint white text onto a white card and the headings vanish entirely. */
.band-navy .flow__node h4 { color: var(--navy-900); }
.band-navy .flow__node p  { color: var(--ink-mute); }

/* Same trap for the numbered "what happens next" cards on Contact, where the
   icon holds a digit rather than a glyph. */
.card__icon { font-family: var(--serif); font-weight: 700; }

/* ------------------------------------------------------- text contrast -- */
/* --gold-600 is a good BORDER and ICON colour but fails as small text on the
   light grounds: it measured 2.87:1 against --paper, where AA wants 4.5:1 for
   text this size. The eyebrows and badges are small AND uppercase, which is the
   hardest case to read, so they get a darker gold reserved for ink. Buttons and
   rules keep the brighter one — they are large or non-textual. */
:root { --gold-ink: #7a5717; }
.eyebrow { color: var(--gold-ink); }
.eyebrow--light { color: var(--gold-400); }   /* on navy, where the light gold is correct */
.pill--gold { background: var(--gold-100); color: var(--gold-ink); }
.ui__card.gold b { color: var(--gold-ink); }

/* --ink-mute measured 4.21:1 on the light grounds — just under the 4.5:1 that
   AA asks for at these sizes, and it is used for a lot of small print. Darkened
   until it passes rather than left "nearly right". The mock browser address
   bars in the screenshots and UI recreations get the same treatment: they are
   decorative, but decorative text is still text somebody may try to read. */
:root { --ink-mute: #5d6b7d; }
.shot__url, .ui__url { color: #5d6b7d; }

/* ------------------------------------------------- mobile overflow fix -- */
/* A grid column defaults to `minmax(auto, 1fr)`, and `auto` will not shrink
   below its content's min-content width. The portal UI recreations contain
   nowrap table cells, so on a phone that min-content pushed the column — and
   the whole page — wider than the viewport, giving a sideways scroll on the
   BODY, which is the one place it must never happen. minmax(0, 1fr) lets the
   column shrink; the wide thing inside then scrolls in its own box instead. */
.split, .split--wide-right, .split--wide-left { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.split--wide-right { grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); }
.split--wide-left  { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); }

/* The UI recreations scroll inside their own frame rather than stretching the
   page. Their tables are deliberately nowrap — a wrapped ledger row stops
   looking like a ledger. */
.ui__main { overflow-x: auto; }
.ui__table { min-width: 330px; }

/* pill--grey measured 4.16:1 at ~10px inside the mockups. Darkened to clear AA. */
.pill--grey { background: #edf0f3; color: #4a5769; }

@media (max-width: 1020px) {
  .split, .split--wide-right, .split--wide-left { grid-template-columns: minmax(0,1fr); }
}

/* The success green measured 4.02:1 as a badge on its own tint and 4.47:1 as a
   heading — both a hair under AA. Darkened; the tint backgrounds stay put, so
   only the ink moves. */
:root { --ok: #276749; }

/* .field is a flex column, so a child stretches to fill it — the submit button
   ignored its own width:auto and spanned the whole form. */
.field--full > .btn { align-self: flex-start; }

/* --------------------------------------------------------------- logo -- */
/* The crown (keter) mark, shared with the congregation sites. The artwork is
   the same one Beth Knesset uses; here it sits on the navy tile rather than
   being dropped straight onto the page, which is the only difference. The
   crown PNG is transparent so the tile's gradient shows through and one asset
   serves the light nav and the dark footer alike. */
.brand__mark img {
  width: 21px; height: auto; display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
}

/* The crown carries a lot of small detail — the beaded points read as mush
   below about 24px, so the tile and the mark inside it are both a step larger
   than the generic icon they replaced, and the drop shadow is dropped entirely
   (at this size it only muddied the beads). */
.brand__mark { width: 40px; height: 40px; border-radius: 11px; }
.brand__mark img { width: 26px; filter: none; }
.foot .brand__mark { width: 38px; height: 38px; }
.foot .brand__mark img { width: 25px; }

/* The mark is Beth Knesset's Star of David, on our navy rather than their
   emerald — the tile paints the navy, the star PNG is transparent gold, so one
   asset serves the light nav and the dark footer. It is taller than it is wide,
   so it is sized on height. */
.brand__mark img { width: auto; height: 26px; filter: none; }
.foot .brand__mark img { height: 25px; }

/* ============================================================================
   MOBILE PASS
   `rem` resolves against the root (16px), not the 16.5px body, so .74rem was
   rendering at 11.84px — under the 12px floor where uppercase letter-spaced
   text stops being comfortably readable on a phone.
   ========================================================================== */
.eyebrow { font-size: .79rem; }

/* Tap targets. 44px is the smallest a thumb hits reliably; anything advertised
   as tappable gets there, while links inside running prose are left alone —
   padding them out would wreck the line rhythm and they are not the primary
   way to reach anything. */
.nav__toggle { width: 46px; height: 44px; }
.brand { min-height: 44px; }

/* Standalone "see more" links end a card, so they ARE a primary control. */
.card > a.small,
.card > p > a.small {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600;
}

@media (max-width: 860px) {
  /* Footer links stack tightly on a phone; give each its own comfortable row
     rather than a 18px sliver between two others. */
  .foot li { margin-bottom: 2px; }
  .foot li a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The two date inputs on the Transactions-style filter and every form
     control already sit at 16px, which is what stops iOS zooming on focus. */
  .btn { min-height: 46px; }

  /* Summary rows in the FAQ are the whole hit area on a phone. */
  .qa summary { padding-top: 18px; padding-bottom: 18px; }
}

/* A phone in landscape, or a very small phone, must never letterbox the hero
   type into an unreadable corner. */
@media (max-width: 400px) {
  h1 { font-size: clamp(1.95rem, 8.5vw, 2.4rem); }
  .hero__lede, .lede { font-size: 1.02rem; }
  .wrap, .wrap-narrow { padding: 0 18px; }
  .card { padding: 22px 18px; }
  .tier { padding: 26px 20px; }
}

/* The mock browser address bar sat at 11.84px. It is decoration, but it names
   the domain the screenshot came from, so it is worth reading — lift it over
   the 12px floor and let a long URL truncate rather than shrink further. */
.shot__url, .ui__url {
  font-size: .76rem;
  max-width: 100%;
}

/* The "Most congregations" ribbon was 10.88px — smaller than anything else on
   the page and the one label a buyer is meant to notice. */
.tier__flag { font-size: .78rem; }

/* Contact details are long unbroken strings — an email and a domain — inside a
   padded card. On a 320px phone they pushed the card, and the page, sideways.
   They now break rather than overflow, and each is a proper tap target. */
.contact-card a, .contact-card p { overflow-wrap: anywhere; }
.contact-card a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-card .sub { min-height: 0; }

@media (max-width: 420px) {
  .contact-card a, .contact-card p { font-size: .95rem; }
  /* The navy contact panel carries the same padding as a full-width card at
     this size, which left almost no room for the content inside it. */
  .contact-card__ico { width: 34px; height: 34px; }
}
.contact-panel { padding: 34px 32px; }
@media (max-width: 420px) { .contact-panel { padding: 24px 18px; } }

/* The email in the footer's bottom bar sits outside the <ul>, so the footer
   tap-target rule did not reach it. */
.foot__bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------------- legal pages -- */
/* Long-form reading: privacy, terms, account deletion. Narrower measure and
   more air between headings than a marketing section, because people actually
   read these top to bottom. */
.legal { padding-bottom: 10px; }
.legal__stamp {
  font-size: .84rem; color: var(--ink-mute); margin-bottom: 34px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.legal h2 {
  font-size: 1.45rem; margin: 48px 0 14px; padding-top: 4px;
  scroll-margin-top: 90px;
}
.legal h2:first-of-type { margin-top: 34px; }
.legal h3 { font-size: 1.04rem; margin: 28px 0 8px; color: var(--navy-800); }
.legal p { color: var(--ink-soft); margin-bottom: 15px; max-width: 70ch; }
.legal .feature-list { margin-bottom: 18px; }
.legal .callout { margin: 26px 0; }
.legal .callout h3 { margin: 0 0 .4em; font-size: 1.02rem; }
.legal .callout .feature-list { margin-bottom: 0; }
.legal .table-wrap { margin: 20px 0 26px; }

/* A quieter aside: the caveat under a section, not a section of its own. */
.legal__note {
  font-size: .9rem; color: var(--ink-mute); background: var(--paper-2);
  border-radius: var(--radius); padding: 14px 18px; margin: 18px 0 22px;
}

/* The deletion warning. Red, because it is the one thing on these pages that
   cannot be undone. */
.callout--warn { border-left-color: #c53030; }
.callout--warn h3 { color: #c53030; }

/* The tick box that has to be ticked before an irreversible request is sent. */
.confirm-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; font-weight: 400; color: var(--ink-soft);
  line-height: 1.55; cursor: pointer;
}
.confirm-check input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }

/* A list of things being destroyed should not be marked with cheerful green
   ticks. Same spacing, neutral marker. */
.feature-list--plain li::before {
  background: var(--ink-mute); width: 5px; height: 5px; top: .62em; left: 6px;
}

/* ===================================================== 2026-10 additions == */

/* ---- live-demo bar: one line under the nav on every page ---------------- */
.demobar { background: var(--navy-900); color: #cfdae6; font-size: .9rem; }
.demobar__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; text-align: center;
}
.demobar b { color: #fff; font-weight: 650; }
.demobar__dot { width: 8px; height: 8px; border-radius: 50%; background: #48bb78; box-shadow: 0 0 0 4px rgba(72,187,120,.18); flex-shrink: 0; }
.demobar a { color: var(--gold-400); font-weight: 650; white-space: nowrap; }
.demobar a:hover { color: #fff; }

/* nav: "Live demo" sits beside "Book a demo" */
.nav__links a { padding: 8px 11px; }
.nav__links a.nav__demo {
  margin-left: 8px; border: 1px solid var(--gold-500); border-radius: 999px;
  color: var(--navy-900); font-weight: 600; padding: 8px 16px;
}
.nav__links a.nav__demo:hover, .nav__links a.nav__demo.is-active { background: var(--gold-100); }
.nav__cta { margin-left: 6px; }
@media (max-width: 1180px) { .nav__inner { gap: 14px; } .nav__links a { padding: 8px 8px; font-size: .9rem; } }
@media (max-width: 1020px) {
  .nav__links a { padding: 13px 15px; font-size: 1rem; }
  .nav__links a.nav__demo { margin: 8px 0 0; justify-content: center; text-align: center; }
}

/* ---- four pillars on the home page -------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.pillar {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm); color: inherit;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-400); color: inherit; }
.pillar h3 { margin-bottom: .35em; }
.pillar p { font-size: .93rem; color: var(--ink-soft); margin-bottom: 14px; }
.pillar ul { list-style: none; padding: 0; margin: 0 0 16px; font-size: .86rem; color: var(--ink-soft); display: grid; gap: 5px; }
.pillar li { padding-left: 14px; position: relative; }
.pillar li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }
.pillar__go { margin-top: auto; font-weight: 650; font-size: .9rem; color: var(--navy-600); }
.pillar:hover .pillar__go { color: var(--gold-600); }
@media (max-width: 1020px) { .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  { .pillars { grid-template-columns: 1fr; } }

/* ---- demo tour ---------------------------------------------------------- */
.tour { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.tour--4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.stop {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); color: inherit;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.stop:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-400); color: inherit; }
.stop__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.stop__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.stop__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.tour--4 .stop__body { padding: 15px 17px 17px; }
.stop__num { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7a5717; margin-bottom: 6px; }
.stop h3 { margin-bottom: .35em; }
.stop p { font-size: .93rem; color: var(--ink-soft); margin-bottom: 12px; }
.stop__try { font-size: .86rem; color: var(--ink-soft); background: var(--paper); border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 14px; }
.stop__try b { color: var(--navy-900); }
.stop__go { margin-top: auto; font-weight: 650; font-size: .92rem; color: var(--navy-600); }
.stop:hover .stop__go { color: var(--gold-600); }
@media (max-width: 1020px) { .tour, .tour--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  { .tour, .tour--4 { grid-template-columns: 1fr; } }

.testcard {
  display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  background: var(--white); border: 1px dashed var(--gold-500); border-radius: var(--radius-sm);
  padding: 10px 16px; font-size: .92rem; color: var(--ink-soft);
}
.testcard code { font-family: var(--mono); font-size: .95rem; color: var(--navy-900); font-weight: 600; letter-spacing: .04em; }
.band-navy .testcard { background: rgba(255,255,255,.05); border-color: var(--gold-400); color: #cfdae6; }
.band-navy .testcard code { color: #fff; }

/* phone frame for a mobile screenshot */
.phone { max-width: 290px; margin: 0 auto; border-radius: 34px; padding: 10px; background: var(--navy-900); box-shadow: var(--shadow-lg); }
.phone img { border-radius: 26px; }

/* ---- mockups: page builder, email designer, analytics ------------------- */
.mk { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--white); box-shadow: var(--shadow); font-size: .8rem; }
.mk__top { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: #eef0f3; border-bottom: 1px solid #dfe3e8; }
.mk__tabs { display: flex; gap: 4px; padding: 8px 14px 0; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.mk__tab { padding: 6px 10px 8px; font-size: .74rem; color: var(--ink-mute); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.mk__tab.on { color: var(--navy-900); border-color: var(--gold-500); }
.mk__body { display: grid; grid-template-columns: 128px minmax(0,1fr) 156px; min-height: 300px; background: var(--paper); }
.mk__col { padding: 12px; border-right: 1px solid var(--line); }
.mk__col--side { border-right: 0; border-left: 1px solid var(--line); background: #fff; }
.mk__label { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); font-weight: 700; margin-bottom: 7px; }
.mk__block { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: .72rem; color: var(--ink-soft); margin-bottom: 5px; }
.mk__block i { font-style: normal; width: 16px; height: 16px; border-radius: 4px; background: var(--gold-100); color: #7a5717; display: grid; place-items: center; font-size: .6rem; font-weight: 700; flex-shrink: 0; }
.mk__block.smart i { background: #e6eef7; color: var(--navy-600); }
.mk__canvas { padding: 14px; display: flex; justify-content: center; align-items: flex-start; }
.mk__page { width: 100%; max-width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.mk__hero { background: linear-gradient(150deg, #0b5d3b, #127a52); color: #fff; padding: 16px 14px; text-align: center; }
.mk__hero b { display: block; font-family: var(--serif); font-size: 1rem; }
.mk__hero span { font-size: .68rem; color: #d7efe3; }
.mk__hero--navy { background: linear-gradient(150deg, var(--navy-900), var(--navy-700)); }
.mk__sec { padding: 10px 12px; position: relative; }
.mk__sec + .mk__sec { border-top: 1px solid var(--line-soft); }
.mk__sec.sel { outline: 2px solid var(--gold-500); outline-offset: -2px; background: #fffdf7; }
.mk__sec h5 { margin: 0 0 4px; font-family: var(--serif); font-size: .82rem; color: #0b5d3b; }
.mk__sec p { font-size: .7rem; color: var(--ink-soft); margin: 0 0 4px; line-height: 1.5; }
.mk__row { display: flex; justify-content: space-between; gap: 8px; font-size: .7rem; color: var(--ink-soft); padding: 2px 0; border-bottom: 1px solid var(--line-soft); }
.mk__btn { display: inline-block; margin-top: 6px; background: #c9a227; color: #1d1604; font-size: .64rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.mk__tag { position: absolute; top: -9px; right: 8px; background: var(--gold-500); color: #2a1e06; font-size: .58rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.mk__field { margin-bottom: 9px; }
.mk__field span { display: block; font-size: .64rem; color: var(--ink-mute); font-weight: 600; margin-bottom: 3px; }
.mk__input { border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; font-size: .7rem; color: var(--ink); background: var(--paper); }
.mk__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mk__chip { font-size: .64rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: #fff; }
.mk__chip.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.mk__nav { padding: 14px; display: grid; gap: 6px; background: var(--paper); }
.mk__navrow { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: .76rem; color: var(--ink); }
.mk__navrow.sub { margin-left: 24px; }
.mk__navrow.drag { border-color: var(--gold-500); box-shadow: var(--shadow); transform: rotate(-.6deg); background: #fffdf7; }
.mk__grip { color: #a7b0bb; font-size: .74rem; letter-spacing: -1px; }
.mk__navrow em { margin-left: auto; font-style: normal; font-size: .64rem; color: var(--ink-mute); }
.mk__drop { height: 3px; background: var(--gold-500); border-radius: 2px; margin-left: 24px; }
.mk__foot { display: flex; gap: 6px; justify-content: flex-end; padding: 9px 13px; border-top: 1px solid var(--line); background: #fff; }
.mk__pbtn { font-size: .7rem; font-weight: 650; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--navy-800); background: #fff; }
.mk__pbtn.gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); border-color: transparent; color: #2a1e06; }

/* analytics */
.an { padding: 14px; background: var(--paper); }
.an__kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.an__kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.an__kpi span { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); font-weight: 650; }
.an__kpi b { font-family: var(--serif); font-size: 1.05rem; color: var(--navy-900); }
.an__kpi em { display: block; font-style: normal; font-size: .64rem; font-weight: 650; color: #276749; }
.an__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.an__card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; }
.an__card h6 { margin: 0 0 7px; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); font-family: var(--sans); }
.an__card svg { width: 100%; height: auto; display: block; }
.an__legend { display: flex; gap: 12px; font-size: .64rem; color: var(--ink-soft); margin-top: 4px; }
.an__legend i { display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 4px; }
.an__bar { display: grid; grid-template-columns: 82px 1fr 34px; align-items: center; gap: 6px; font-size: .68rem; color: var(--ink-soft); margin-bottom: 5px; }
.an__bar s { display: block; height: 7px; border-radius: 3px; background: #2a78d6; text-decoration: none; }
.an__bar span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* email report rows */
.er { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.er__row { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(0,.6fr)); gap: 6px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--line-soft); font-size: .7rem; color: var(--ink-soft); background: #fff; }
.er__row.h { background: var(--navy-800); color: #fff; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; border: 0; }
.er__row b { color: var(--navy-900); font-weight: 650; display: block; }
.er__row small { font-size: .62rem; color: var(--ink-mute); }
.er__row > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .mk__body { grid-template-columns: minmax(0,1fr); }
  .mk__col:first-child { display: none; }
  .mk__col--side { border-left: 0; border-top: 1px solid var(--line); }
  .an__kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .an__grid { grid-template-columns: minmax(0,1fr); }
  .er__row { grid-template-columns: 1.5fr repeat(2, minmax(0,.6fr)); }
  .er__row .hide-sm { display: none; }
}

/* small capability tiles */
.minis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.mini { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.mini h4 { margin-bottom: .3em; }
.mini p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.band-paper2 .mini { box-shadow: var(--shadow-sm); }
@media (max-width: 1020px) { .minis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  { .minis { grid-template-columns: 1fr; } }

@media (max-width: 720px) { .demobar__dot { display: none; } .demobar { font-size: .86rem; } }
/* The nav-link colour and padding outranked the gold button, greying its label. */
.nav__links a.nav__cta, .nav__links a.nav__cta:hover { color: #2a1e06; font-weight: 600; padding: 9px 17px; background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); }