/* ===========================================================================
   THE PUBLIC SITE — ONE's marketing pages
   ===========================================================================
   Its own sheet, for the same reason ONE has one: /styles.css is in
   LISTENER_FACING_PATHS and is the sheet a congregation's phones load. A
   marketing page has no business in it.

   NO WEB FONTS. The mockup pulls Newsreader and Geist from Google Fonts; a
   church on a slow or filtered connection would wait for them on every visit,
   and the page-load check fails on any failed request. The stacks name the
   real faces first and fall back to Georgia and the system sans, exactly as
   one.css does. Self-hosted woff2 is its own step.
   ========================================================================= */

.site-body {
  --ink: #14213D;
  --bg: #FFFFFF;
  --bg2: #F6F7F9;
  --card: #FFFFFF;
  --muted: #3D4A5C;
  --muted2: #4A5568;
  --faint: #6B7686;
  --line: #E3E6EC;
  --line2: #C9D0DB;
  --soft: #F2F4F7;
  --ph: #B8C0CC;
  --accent: #C2410C;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --green: #1F7A44;
  --amber: #E0A020;
  --red: #B3261E;
  --sans: "Geist", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  margin: 0;
  background: var(--bg);
  color: var(--ink);
  color-scheme: light;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.site-body *, .site-body *::before, .site-body *::after { box-sizing: border-box; }
.site-body .hidden { display: none !important; }
/* Ordinary links take the colour of the text around them. The buttons below
   are scoped to .site-body too, so their own colours win by declaration
   order rather than by accident. */
.site-body a { color: inherit; }
.site-body p { margin: 0 0 14px; color: var(--muted); }
.site-body img, .site-body svg { max-width: 100%; }
.site-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.site-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--ink); color: #FFFFFF; padding: 10px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.site-skip:focus { left: 16px; }
.site-body :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- type --- */
.site-h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.site-h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
.site-h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px;
}
.site-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.site-eyebrow-dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
}
.site-lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.site-placeholder { color: var(--ph); }

/* -------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header-row {
  display: flex; align-items: center; gap: 20px;
  min-height: 70px;
  flex-wrap: wrap;
}
.site-brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.site-brand-word { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.site-brand-product {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  padding: 3px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.site-nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.site-body .site-nav a { color: var(--muted); text-decoration: none; }
.site-body .site-nav a:hover { color: var(--ink); }
.site-header-actions { display: flex; align-items: center; gap: 12px; }
.site-lang select, .site-body select {
  font: inherit; font-size: 14px;
  border: 1px solid var(--line2); border-radius: 999px;
  padding: 7px 12px; background: var(--card); color: var(--ink);
}
.site-body .site-link { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); }
.site-body .site-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; text-decoration: none;
  padding: 12px 20px; border-radius: 999px;
  background: var(--accent); color: #FFFFFF; border: 1px solid var(--accent);
}
.site-body .site-cta:hover { opacity: .9; }
.site-body .site-cta-lg { font-size: 17px; padding: 16px 28px; }
.site-body .site-cta-quiet { background: transparent; color: var(--ink); border-color: var(--line2); }
.site-body .site-cta-invert { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

/* -------------------------------------------------------------- banner --- */
.site-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
  background: var(--soft); border-bottom: 1px solid var(--line);
  padding: 10px 16px; font-size: 14px; color: var(--muted);
}
.site-body .site-banner-action { font-weight: 600; color: var(--accent); }
.site-banner-dismiss {
  font: inherit; font-size: 13px; cursor: pointer;
  background: none; border: 0; color: var(--faint); text-decoration: underline;
}

/* ---------------------------------------------------------------- hero --- */
.site-hero { padding: 72px 0 84px; background: linear-gradient(180deg, #FFFFFF 0%, var(--bg2) 100%); }
.site-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.site-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 16px; }
.site-trial {
  display: inline-block;
  font-size: 15px; font-weight: 600; color: var(--green);
  background: #E3F2E9; border-radius: 999px; padding: 9px 16px; margin: 4px 0 0;
}
.site-trial-centre { margin: 14px auto 0; }
.site-trial-on-dark { background: rgba(255, 255, 255, .14); color: #D8F0E2; }
.site-proof { font-size: 14px; color: var(--faint); margin: 14px 0 0; }

/* The product shot: a likeness of ONE, in markup. */
.site-shot-wrap { display: flex; flex-direction: column; }
.site-shot {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 33, 61, .10);
  overflow: hidden;
}
.site-shot-top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 11px;
}
.site-shot-church { font-weight: 700; }
.site-shot-date { color: var(--faint); }
.site-shot-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
.site-shot-main { padding: 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-height: 230px; }
.site-shot-side { padding: 16px 16px 60px; display: flex; flex-direction: column; gap: 8px; }
.site-shot-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.site-shot-sermon { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.2; }
.site-shot-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.site-shot-rows > span { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted2); border-top: 1px solid var(--line); padding-top: 6px; }
.site-shot-rows b { color: var(--ink); font-weight: 600; }
.site-shot-meter { display: flex; gap: 2px; background: var(--ink); border-radius: 5px; padding: 4px; }
.site-pip { flex: 1 1 0; min-width: 0; height: 18px; border-radius: 2px; background: currentColor; opacity: .22; }
.site-pip-green { color: #3FD37F; }
.site-pip-amber { color: #FFC24B; }
.site-pip-red { color: #FF5A63; }
.site-pip-lit { opacity: 1; }
.site-shot-good { font-size: 11px; font-weight: 700; color: var(--green); background: #E3F2E9; border-radius: 999px; padding: 4px 10px; align-self: flex-start; }
.site-shot-golive {
  margin-top: auto; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  background: #2F5FD0; color: #FFFFFF; border-radius: 999px; padding: 12px;
}

.site-phone {
  /* IN FLOW, not floated over the card. Absolute positioning put it on top of
     the operator shot's right-hand column - the sound check and GO LIVE,
     which is the half of that picture worth seeing. A negative top margin
     keeps the tucked-under look without ever hiding anything: it overlaps the
     card's bottom padding and nothing else, at any width. */
  margin: -26px -4px 0 auto; width: 178px; position: relative; z-index: 1;
  background: var(--ink); color: #FFFFFF; border-radius: 22px;
  border: 6px solid #0C1529;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 24px 50px rgba(20, 33, 61, .28);
}
.site-phone-lang { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FA0C4; }
.site-phone-series { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8FA0C4; margin-top: 6px; }
.site-phone-title { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.2; }
.site-phone-ref { font-size: 11px; font-weight: 600; color: #E8A87C; }
.site-phone-caption { font-size: 13px; line-height: 1.35; color: #FFFFFF; margin: 8px 0 0; }
.site-phone-caption-dim { color: #9FADC8; font-size: 12px; margin-top: 6px; }

/* ------------------------------------------------------------ sections --- */
.site-section { padding: 84px 0; }
.site-section-alt { background: var(--bg2); }
.site-section-head { max-width: 760px; margin-bottom: 40px; }
.site-section-head .site-lead { margin-top: 10px; }

.site-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.site-step { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.site-step-num { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .1em; }
.site-step .site-h3 { margin-top: 10px; }
.site-step p, .site-feature p { margin: 0; font-size: 15px; }

.site-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.site-feature { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.site-feature svg { color: var(--accent); margin-bottom: 12px; }

.site-languages { max-width: 860px; }
.site-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.site-chips > span {
  font-size: 15px; padding: 9px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
}
.site-chip-more { color: var(--faint) !important; background: transparent !important; border-style: dashed !important; }

.site-story { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: center; }
.site-photo {
  aspect-ratio: 4 / 5; border-radius: 20px;
  background: var(--soft); border: 1px dashed var(--line2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ph); font-size: 14px; text-align: center; padding: 20px;
}
.site-byline { font-size: 14px; font-weight: 600; color: var(--faint); margin-top: 18px; }

.site-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; align-items: stretch; }
.site-plan {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.site-plan-featured { border-color: var(--accent); box-shadow: 0 16px 44px rgba(194, 65, 12, .10); }
.site-plan-price { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); margin: 4px 0 6px; }
.site-plan-per { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--faint); }
.site-plan .site-cta { margin-top: auto; }

.site-faq { max-width: 820px; }
.site-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.site-faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink);
}
.site-faq summary::-webkit-details-marker { display: none; }
.site-body .site-faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 600; }
.site-faq details[open] summary::after { content: "−"; }
.site-faq p { margin: 12px 0 0; font-size: 15px; }

.site-close { background: var(--ink); color: #FFFFFF; padding: 84px 0; }
.site-close-inner { max-width: 720px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.site-close .site-h2 { color: #FFFFFF; }
.site-close p { color: #C3CDE0; }
.site-close .site-cta { margin-top: 22px; }

/* -------------------------------------------------------------- footer --- */
.site-footer { border-top: 1px solid var(--line); padding: 36px 0; background: var(--bg); }
.site-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--muted2); flex-wrap: wrap; }
.site-soon { color: var(--ph); cursor: default; }
.site-contact b { font-weight: 600; color: var(--ink); }
.site-copy { font-size: 13px; color: var(--faint); }

/* --------------------------------------------------------------- phone --- */
@media (max-width: 980px) {
  .site-hero-grid, .site-story { grid-template-columns: 1fr; }
  .site-phone { width: 100%; max-width: 280px; margin: 24px auto 0; }
  .site-shot-side { padding-bottom: 16px; }
  .site-shot-wrap { margin-top: 8px; }
}
@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-header-row { min-height: 62px; padding-top: 10px; padding-bottom: 10px; }
  .site-header-actions { margin-left: auto; }
  .site-hero { padding: 48px 0 56px; }
  .site-section, .site-close { padding: 56px 0; }
  .site-wrap { padding: 0 16px; }
  .site-shot-body { grid-template-columns: 1fr; }
  .site-shot-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .site-footer-row { justify-content: flex-start; }
}

/* ===========================================================================
   W2 — THE SIGN-UP FORM
   ===========================================================================
   One column, one card's worth of fields, and every refusal in place. There
   is no dialog anywhere in this product and this is the screen where somebody
   is deciding whether to trust us at all.
   ========================================================================= */
.site-signup-section { padding-top: 56px; }
.site-signup-wrap { max-width: 560px; }
.site-form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.site-field { display: flex; flex-direction: column; gap: 6px; }
.site-field-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.site-body .site-field input,
.site-body .site-field select {
  font: inherit; font-size: 16px;
  background: var(--card); border: 1px solid var(--line2); border-radius: 12px;
  padding: 12px 14px; color: var(--ink); width: 100%;
}
.site-body .site-field input.site-input-bad { border-color: #B3261E; }
.site-field-hint, .site-field-state, .site-field-preview { font-size: 13px; color: var(--faint); }
.site-field-state-good { color: var(--green); font-weight: 600; }
.site-field-preview { overflow-wrap: anywhere; }
.site-field-error { font-size: 13px; font-weight: 600; color: #B3261E; }
.site-form-error {
  background: #FBE1E3; border: 1px solid #E8A2A8; border-radius: 12px;
  padding: 12px 14px; color: #7A1A20; font-size: 14px; font-weight: 600;
}
.site-form-foot { font-size: 14px; color: var(--muted2); margin: 0; }
.site-form-foot a { font-weight: 600; color: var(--accent); }
.site-body .site-form .site-cta { align-self: flex-start; }
/* THE HONEYPOT. Out of sight and out of the tab order, but still in the
   accessibility tree with a label, so the one person who does meet it is told
   to leave it alone. display:none would be the obvious tell to a bot. */
.site-honeypot {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}