/* ==========================================================================
   Jewish Verification — shared stylesheet
   Design tokens & components per brand style guide
   ========================================================================== */
:root {
  /* Teal — primary */
  --teal-50:#EFF8F8; --teal-100:#D9EFEF; --teal-200:#B3E0E1; --teal-300:#7CCBCD;
  --teal-400:#3EB3B6; --teal-500:#16999D; --teal-600:#137276; --teal-700:#11595C;
  --teal-800:#0E4446; --teal-900:#0A2F31;

  /* Gold — accent */
  --gold-100:#FBF5E6; --gold-200:#F3E6C8; --gold-300:#E8D2A0; --gold-400:#D9B978;
  --gold-500:#C8A04E; --gold-600:#B8893D; --gold-700:#9A7426; --gold-800:#7A5A1E;

  /* Neutrals */
  --bg:#FAF8F4; --bg-alt:#F4F7F7; --surface:#FFFFFF; --fill-subtle:#F2EFE8;
  --border:#E7E4DC; --border-cool:#E3E8E8;
  --ink:#1F2A2B; --text:#4A5556; --muted:#8A9293;

  /* Semantic */
  --success:#1E7A55; --success-bg:#E7F4EE;

  /* Gradients */
  --grad-primary: linear-gradient(135deg,#16999D 0%,#11595C 100%);
  --grad-gold:    linear-gradient(135deg,#D9B978 0%,#B8893D 100%);
  --grad-deep:    linear-gradient(135deg,#11595C 0%,#0A2F31 100%);
  --grad-hero:    linear-gradient(135deg,#FAF8F4 0%,#F2EFE8 100%);

  /* Type */
  --font-serif:'Cormorant Garamond','Frank Ruhl Libre',Georgia,serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-hebrew-serif:'Frank Ruhl Libre','David Libre',serif;

  /* Radius & shadow */
  --radius-sm:8px; --radius-md:12px; --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(20,40,40,.06),0 1px 2px rgba(20,40,40,.04);
  --shadow-hover:0 6px 20px rgba(17,89,92,.12);
  --shadow-btn:0 2px 8px rgba(22,153,157,.28);
  --transition:all .2s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-sans); color:var(--text); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  font-size:16px;
}

/* Layout ------------------------------------------------------------------ */
.container { max-width:880px; margin:0 auto; padding:0 24px; }
.container-wide { max-width:1140px; margin:0 auto; padding:0 24px; }
section { padding:64px 0; }

/* Header / nav ------------------------------------------------------------ */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; max-width:1140px; margin:0 auto;
}
.site-header .brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.site-header .brand img { width:40px; height:40px; }
.site-header .brand span {
  font-family:var(--font-serif); font-weight:600; font-size:1.25rem; color:var(--ink);
}
.site-header nav a {
  font-size:.9rem; color:var(--text); text-decoration:none; margin-left:24px;
  transition:var(--transition);
}
.site-header nav a:hover { color:var(--teal-700); }

/* Eyebrow ----------------------------------------------------------------- */
.eyebrow { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:20px; }
.eyebrow .rule { width:44px; height:1px; background:var(--gold-500); }
.eyebrow .label {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--gold-700);
}
.eyebrow.left { align-items:flex-start; }

/* Hero -------------------------------------------------------------------- */
.hero { background:var(--grad-hero); text-align:center; padding:72px 0 64px; }
.hero .seal { width:128px; height:128px; margin:0 auto 28px; display:block; }
.hero-hebrew {
  font-family:var(--font-hebrew-serif); direction:rtl; unicode-bidi:plaintext;
  font-size:1.5rem; font-weight:500; color:var(--teal-700); margin-bottom:8px;
}
h1 {
  font-family:var(--font-serif); font-weight:600; color:var(--ink);
  font-size:clamp(2rem,5vw,2.6rem); line-height:1.1; letter-spacing:.01em;
  margin-bottom:18px;
}
.lead {
  font-size:1.12rem; color:var(--text); max-width:600px; margin:0 auto 32px;
}
.lead strong { color:var(--ink); font-weight:600; }

/* Headings ---------------------------------------------------------------- */
h2 {
  font-family:var(--font-serif); font-weight:600; color:var(--ink);
  font-size:clamp(1.6rem,3.5vw,1.8rem); text-align:center; margin-bottom:14px;
}
h3 { font-family:var(--font-sans); font-weight:600; color:var(--ink); font-size:1.15rem; margin-bottom:6px; }
.section-intro { text-align:center; color:var(--text); max-width:620px; margin:0 auto 40px; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display:inline-block; font-family:var(--font-sans); font-weight:600; font-size:15px;
  letter-spacing:.01em; text-decoration:none; border-radius:var(--radius-sm);
  padding:14px 30px; cursor:pointer; transition:var(--transition); border:none;
}
.btn-primary { background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-btn); }
.btn-primary:hover { transform:translateY(-2px); background:linear-gradient(135deg,#137276 0%,#0E4446 100%); }
.btn-ghost { color:var(--teal-700); background:none; padding:0; font-weight:500; }
.btn-ghost:hover { text-decoration:underline; }

.cta-meta { margin-top:14px; font-size:.9rem; color:var(--muted); }
.cta-meta strong { color:var(--ink); font-weight:600; }
.cta-meta .dot { margin:0 8px; color:var(--gold-500); }

/* Fee + timeline banner --------------------------------------------------- */
.factbar {
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin:0 auto 8px; max-width:640px;
}
.fact {
  display:flex; align-items:baseline; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:9px 20px;
  font-size:.9rem; color:var(--text);
}
.fact strong { font-family:var(--font-serif); font-size:1.2rem; font-weight:600; color:var(--teal-700); }

/* Cards ------------------------------------------------------------------- */
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:24px 28px; box-shadow:var(--shadow-card); transition:var(--transition);
}
.card.accent { border-top:3px solid var(--teal-500); }
.card .num {
  font-family:var(--font-serif); font-size:1.6rem; font-weight:600; color:var(--gold-500);
  line-height:1; margin-bottom:10px;
}
.card p { font-size:.95rem; color:var(--text); }

/* Document list ----------------------------------------------------------- */
.doclist { list-style:none; display:grid; gap:12px; margin:0 auto; max-width:720px; }
.doclist li {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  border-left:3px solid var(--teal-500); padding:16px 20px; display:flex; gap:14px; align-items:flex-start;
}
.doclist .n {
  flex:none; width:26px; height:26px; border-radius:999px; background:var(--teal-50);
  color:var(--teal-700); font-size:.85rem; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.doclist .t { font-weight:600; color:var(--ink); }
.doclist .d { font-size:.9rem; color:var(--muted); }

/* Tinted panel ------------------------------------------------------------ */
.panel {
  background:var(--teal-50); border:1px solid var(--teal-200); border-radius:var(--radius-md);
  padding:24px 28px; color:var(--teal-800);
}
.panel h3 { color:var(--teal-800); }
.note { font-size:.95rem; }

/* Reassurance list -------------------------------------------------------- */
.reassure { list-style:none; display:grid; gap:10px; }
.reassure li { display:flex; gap:10px; align-items:flex-start; font-size:.97rem; }
.reassure .check { color:var(--success); flex:none; margin-top:2px; }

/* Form embed -------------------------------------------------------------- */
.form-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px; box-shadow:var(--shadow-card); max-width:720px; margin:0 auto;
}
.form-card iframe { width:100%; border:0; display:block; }

/* Terms prose ------------------------------------------------------------- */
.prose h2 { text-align:left; margin:36px 0 10px; font-size:1.45rem; }
.prose h2:first-child { margin-top:0; }
.prose p { margin-bottom:14px; }
.prose .meta { color:var(--muted); font-size:.9rem; }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  background:var(--grad-deep); color:var(--teal-100); text-align:center;
  padding:40px 24px; margin-top:24px;
}
.site-footer a { color:#fff; text-decoration:none; border-bottom:1px solid var(--teal-400); }
.site-footer a:hover { border-color:#fff; }
.site-footer .heb { font-family:var(--font-hebrew-serif); direction:rtl; font-size:1.05rem; margin-bottom:8px; color:var(--gold-300); }
.site-footer .small { font-size:.82rem; color:var(--teal-300); margin-top:10px; }

/* Back link --------------------------------------------------------------- */
.back { display:inline-block; font-size:.9rem; color:var(--muted); text-decoration:none; margin-bottom:8px; transition:var(--transition); }
.back:hover { color:var(--teal-700); }

/* Responsive -------------------------------------------------------------- */
@media (max-width:768px) {
  section { padding:40px 0; }
  .grid-3, .grid-2 { grid-template-columns:1fr; }
  .site-header { padding:16px; }
  .site-header nav a { margin-left:16px; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  .btn-primary:hover { transform:none; }
}