/* ==========================================================================
   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; }