/* ============================================================================
   site.css — the public pages (overview.html, proposal.html)

   Separate from the application's stylesheets on purpose: these pages are read
   by people who have never signed in, and they must not inherit 154KB of app
   theme. Nothing here loads except this file and the font.

   Built on the values measured off ipms.poanexgen.com, so the two products look
   like they came from the same place:
       page #F4F7FB · cards #FFFFFF · hairline #E3E9F2 · ink #0F1B2D
       h1 47/800/-0.025em · h2 28.7/800/-0.02em · h3 17.5/700 · body 14-16/1.55
   The church's own gold and green sit on top of that neutral.
   ============================================================================ */

:root {
  --ink: #0F1B2D;
  --ink-2: #21324B;
  --muted: #55637B;
  --faint: #8A94A6;
  --page: #F4F7FB;
  --paper: #FFFFFF;
  --line: #E3E9F2;
  --gold: #B98A32;
  --gold-soft: #F6EEDB;
  --green: #2F6E57;
  --navy-deep: #0C1A2E;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(15, 33, 56, .05), 0 8px 24px rgba(15, 33, 56, .05);
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: calc(100% - 32px); } }

h1, h2, h3 { margin: 0; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(32px, 5.2vw, 47px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: clamp(24px, 3.1vw, 29px); font-weight: 800; line-height: 1.16; }
h3 { font-size: 17.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }

.eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  color: var(--faint); margin: 0 0 12px; text-transform: uppercase;
}
.eyebrow.gold { color: var(--gold); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: -.006em;
  padding: 13px 22px; border-radius: 11px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s cubic-bezier(.32,.72,0,1), background .15s, border-color .15s;
}
.btn:active { transform: scale(.985); }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: 9px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); }
.btn-gold { background: var(--gold); color: #241A06; }
.btn-gold:hover { background: #CB9C3F; }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #EEF3FA; }
.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost-light:hover { background: rgba(255,255,255,.2); }

/* ------------------------------------------------------------------- head */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; gap: 20px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
  background: var(--ink); color: #fff; display: grid; place-items: center;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-text b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.brand-text i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.head-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.head-nav a {
  font-size: 14px; font-weight: 500; color: #3D4D63; text-decoration: none;
  padding: 8px 13px; border-radius: 9px;
}
.head-nav a:hover { background: #EEF3FA; color: var(--ink); }
.head-nav a.on { font-weight: 700; color: var(--ink); background: #EAF1FB; }
.head-nav a.btn { color: #fff; }
.head-nav a.btn:hover { color: #fff; }
@media (max-width: 720px) {
  .brand-text i { display: none; }
  .head-nav a:not(.btn) { display: none; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  background:
    linear-gradient(100deg, var(--navy-deep) 0%, #14294A 52%, rgba(20,41,74,.86) 100%),
    url('../assets/gracehub-church.jpg') right center / cover no-repeat;
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0 clamp(52px, 7vw, 88px);
}
.hero h1 { color: #fff; }
.hero .eyebrow { color: #C6B489; }
.lede {
  font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: #DBE7F7;
  max-width: 62ch; margin-top: 18px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-cta .btn-primary { background: #fff; color: var(--ink); }
.hero-cta .btn-primary:hover { background: #E9EFF8; }
.hero-note {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: 14.5px; color: #B9C9E0; max-width: 72ch;
}

/* ------------------------------------------------------------------ stats */
.stats { background: var(--paper); border-bottom: 1px solid var(--line); padding: 30px 0; }
.stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat span { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }
.stat i { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------------------ bands */
.band { padding: clamp(48px, 6.5vw, 82px) 0; }
.band.alt { background: var(--paper); border-block: 1px solid var(--line); }
.section-lede { font-size: 16px; color: var(--muted); max-width: 70ch; margin-top: 14px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards, .modules { margin-top: 30px; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.band.alt .card { background: var(--page); box-shadow: none; }
.card p { margin-top: 10px; font-size: 15px; color: var(--muted); }
.card.tall p + p { margin-top: 12px; }

.mod {
  background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 20px;
}
.band.alt .mod { background: var(--page); }
.mod p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------------ steps */
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr); counter-reset: s; }
.steps li {
  background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 22px;
}
.band.alt .steps li { background: var(--page); }
.steps .num {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em;
  color: var(--gold); margin-bottom: 10px;
}
.steps p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }

/* --------------------------------------------------------------- two-col */
.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li {
  position: relative; padding-left: 30px; font-size: 15px; color: var(--muted); line-height: 1.55;
}
.ticks li b { color: var(--ink); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--gold-soft);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.small-note {
  margin-top: 22px; font-size: 14px; color: var(--muted);
  border-left: 3px solid var(--gold); padding-left: 14px;
}
.shot { margin: 0; }
.shot img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.shot figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* The sunset photograph is 165x290 pixels — that is the only copy that exists.
   A 165px-wide image blown up to 420px is being invented 2.5x over, which is
   exactly the softness that looked wrong. 300px is the most it takes before
   that shows: roughly 1.8x, which a phone or a high-DPI screen absorbs and an
   ordinary monitor barely registers. If a full-size original turns up, raise
   this number — nothing else needs to change. */
/* `.shot` is unused at the moment: neither public page carries a photograph,
   because the only files available are too small or are themselves bad crops
   with text cut off mid-word. The rules above are kept so a real photograph can
   be dropped straight back in — see the note in index.html. */

/* Two sections lost their picture and now run the full width. Their tick lists
   are set in two columns so the line length stays readable rather than
   stretching to 110 characters. */
#privacy .ticks,
.feature-band .ticks {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 34px;
}
#privacy .section-lede,
.feature-band .section-lede { max-width: 78ch; }
.feature-band .small-note { max-width: 88ch; }

@media (max-width: 760px) {
  #privacy .ticks,
  .feature-band .ticks { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- cta band */
.cta-band { background: var(--ink); color: #fff; padding: clamp(42px, 5.5vw, 66px) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 12px; color: #C3D2E6; font-size: 15.5px; max-width: 60ch; }
.cta-inner { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }

/* ------------------------------------------------------------------- foot */
.site-foot { background: var(--paper); border-top: 1px solid var(--line); padding: 26px 0; }
.foot-inner { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foot-brand { font-size: 14.5px; font-weight: 700; }
.foot-small { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.foot-nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.foot-nav a {
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 7px 11px; border-radius: 9px;
}
.foot-nav a:hover { background: #EEF3FA; color: var(--ink); }

/* ============================================================================
   Proposal page
   ============================================================================ */

.hero-short { padding: clamp(46px, 6vw, 72px) 0 clamp(42px, 5.5vw, 64px); }

/* ------------------------------------------------------------------- toc */
.toc { background: var(--paper); border-bottom: 1px solid var(--line); padding: 26px 0; }
.toc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 18px;
}
.toc-list a {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; padding: 7px 9px; border-radius: 8px;
}
.toc-list a:hover { background: #EEF3FA; }
.toc-list b { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .04em; }

.group-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--faint);
  margin: 34px 0 -14px;
}

/* ----------------------------------------------------------------- tables */
.table-wrap { margin-top: 28px; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
.band.alt .table-wrap { background: var(--page); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td {
  text-align: left; padding: 14px 16px; font-size: 14.5px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.cmp thead th {
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #4A5670; background: #F7F9FC; white-space: nowrap;
}
.cmp tbody td { color: var(--muted); }
.cmp tbody td:first-child { color: var(--ink); font-weight: 600; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp thead th:last-child { color: var(--gold); }
.cmp tbody td:last-child { color: var(--ink); }
.cmp.compact th, .cmp.compact td { padding: 11px 15px; }
.cmp.compact { min-width: 620px; }

/* ------------------------------------------------------------------ tiers */
.tiers { margin-top: 32px; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow);
}
.tier.feature { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }
.tier.own { background: var(--ink); border-color: var(--ink); }
.tier.own h3, .tier.own .tier-price b, .tier.own .tier-year b { color: #fff; }
.tier.own .tier-for, .tier.own .tier-limit, .tier.own .tier-price span { color: #B9C9E0; }
.tier.own ul li { color: #D3DEEE; }
.tier.own ul li::before { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px var(--gold); }
.tier.own .tier-year { border-top-color: rgba(255,255,255,.18); color: #B9C9E0; }

.tier-flag {
  position: absolute; top: -11px; left: 22px;
  background: var(--gold); color: #241A06;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  padding: 4px 11px; border-radius: 999px;
}
.tier-for { font-size: 13.5px; color: var(--muted); margin-top: 7px; min-height: 40px; }
.tier-price { margin-top: 16px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.tier-price b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tier-price span { font-size: 13.5px; color: var(--muted); }
.tier-limit {
  font-size: 13px; font-weight: 700; color: var(--gold);
  margin-top: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.tier.own .tier-limit { border-bottom-color: rgba(255,255,255,.18); }
.tier ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; flex: 1 1 auto; }
.tier ul li { position: relative; padding-left: 24px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.tier ul li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--gold-soft); box-shadow: inset 0 0 0 1.4px var(--gold);
}
.tier-year {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.tier-year b { font-size: 15px; font-weight: 800; color: var(--ink); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .toc-list { grid-template-columns: repeat(3, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cta-actions { margin-left: 0; }
  .toc-list { grid-template-columns: repeat(2, 1fr); }
  .tier-for { min-height: 0; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .toc-list { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero-cta, .cta-actions { flex-direction: column; align-items: stretch; }
}

@media print {
  .site-head, .cta-band, .hero-cta { display: none; }
  body { background: #fff; font-size: 11pt; }
  .band { padding: 18px 0; break-inside: avoid; }
}