/* The Claim Letter - homepage (v2 editorial ledger) */

/* ---------- topbar ---------- */
.topbar { background:var(--ink); border-bottom:3px solid var(--gold); }
.topbar .bar { max-width:1080px; margin:0 auto; padding:16px 24px; display:flex;
  align-items:center; justify-content:space-between; }
.brandrow { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logomark { height:32px; width:32px; display:block; }
.wordmark { font-family:var(--disp); font-weight:900; font-size:1.3rem; color:#f7f4ee;
  letter-spacing:.2px; line-height:1; }
.wordmark em { font-style:normal; color:var(--gold); }
.topnav { display:flex; align-items:center; gap:22px; }
.topnav a { color:#cfc8ba; text-decoration:none; font-size:14px; font-weight:500; }
.topnav a:hover { color:#fff; }
.topnav .nav-cta { color:var(--gold); font-weight:600; }
@media (max-width: 620px) { .topnav a:not(.nav-cta) { display:none; } }

/* ---------- hero ---------- */
.hero { position:relative; background:var(--ink); color:#f7f4ee; padding:84px 24px 96px;
  text-align:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0;
  background:radial-gradient(700px 340px at 50% -80px, rgba(217,164,65,.14), transparent 70%); }
.hero > * { position:relative; }
.hero .kicker { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(217,164,65,.45); border-radius:999px; padding:7px 16px; margin-bottom:24px; }
.hero h1 { font-family:var(--disp); font-size:clamp(34px,6vw,58px); font-weight:900;
  line-height:1.06; max-width:820px; margin:0 auto; letter-spacing:-.5px; }
.hero h1 em { font-style:italic; color:var(--gold); }
.hero .lede { font-size:clamp(15.5px,2.2vw,18.5px); color:#b8b2a4; max-width:640px;
  margin:22px auto 0; line-height:1.65; }
.hero .micro { font-family:var(--mono); font-size:12px; color:#a39d8d; margin-top:20px;
  letter-spacing:.4px; }
.tick { display:inline-block; width:16px; height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cg fill='%23d9a441'%3E%3Crect x='1' y='2' width='2.4' height='9' rx='1'/%3E%3Crect x='5.2' y='2' width='2.4' height='9' rx='1'/%3E%3Crect x='9.4' y='2' width='2.4' height='9' rx='1'/%3E%3Crect x='13' y='4.5' width='2.4' height='6.5' rx='1' transform='rotate(14 14.2 7.7)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; }

/* signup form */
.signup { max-width:480px; margin:36px auto 0; display:flex; flex-direction:column; gap:10px;
  text-align:left; }
.frow { display:flex; gap:10px; }
.frow > * { flex:1; min-width:0; }
.s-in { padding:15px 16px; font-size:16px; border:1px solid #3a3f4b; border-radius:10px;
  outline:none; background:#23272f; color:#f7f4ee; width:100%; font-family:var(--sans); }
.s-in::placeholder { color:#8b8677; }
.s-in:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,164,65,.22); }
select.s-in { appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b8677' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.signup input[type=email] { flex:1; padding:15px 18px; font-size:16px; border:1px solid #3a3f4b;
  border-radius:10px; outline:none; background:#23272f; color:#f7f4ee; font-family:var(--sans); }
.signup input[type=email]::placeholder { color:#8b8677; }
.signup input[type=email]:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,164,65,.22); }
.signup button { padding:15px 26px; font-size:16px; font-weight:600; border:0; border-radius:10px;
  background:var(--gold); color:#231a07; cursor:pointer; white-space:nowrap; font-family:var(--sans);
  box-shadow:0 2px 12px rgba(217,164,65,.35); }
.signup button:hover { background:#e2b052; }
.note { font-size:13px; color:#a39d8d; margin-top:16px; font-family:var(--mono); letter-spacing:.2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ok,.err { max-width:480px; margin:18px auto 0; padding:14px 18px; border-radius:10px;
  font-size:15px; display:none; line-height:1.55; text-align:left; }
.ok { background:#e8f2e8; color:var(--green); border:1px solid #cfe3cf; }
.err { background:#f9e9e7; color:var(--red); border:1px solid #ecd2ce; }

/* ---------- stats strip ---------- */
.stats { display:flex; justify-content:center; gap:56px; padding:38px 24px; background:var(--paper2);
  border-bottom:1px solid var(--line); flex-wrap:wrap; }
.stat { text-align:center; }
.stat b { display:block; font-family:var(--disp); font-size:34px; font-weight:900;
  color:var(--ink); line-height:1.1; }
.stat span { font-size:11.5px; color:var(--dim); letter-spacing:1.6px; font-family:var(--mono);
  text-transform:uppercase; }

/* ---------- how it works ---------- */
.how { max-width:1000px; margin:72px auto; padding:0 24px; }
.how h2 { font-family:var(--disp); font-size:clamp(26px,4vw,36px); font-weight:900;
  text-align:center; margin-bottom:38px; color:var(--ink); }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.step { background:#fffdf9; border:1px solid var(--line); border-radius:14px; padding:26px 24px;
  box-shadow:0 2px 10px rgba(32,36,44,.05); }
.step .ic { width:40px; height:40px; border-radius:10px; background:var(--ink); color:var(--gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.step .ic svg { width:20px; height:20px; stroke:var(--gold); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.step h3 { font-size:16.5px; margin-bottom:8px; font-weight:600; }
.step p { font-size:14.5px; color:var(--dim); line-height:1.62; }

/* ---------- quote band ---------- */
.band { background:var(--ink); padding:56px 24px; text-align:center; position:relative; }
.band::before { content:""; position:absolute; inset:0;
  background:radial-gradient(560px 240px at 50% 120%, rgba(217,164,65,.12), transparent 70%); }
.band .q { font-family:var(--disp); font-size:clamp(19px,3vw,26px); font-weight:700; font-style:italic;
  color:#f7f4ee; max-width:720px; margin:0 auto 6px; line-height:1.4; position:relative; }
.band .src { font-family:var(--mono); font-size:12.5px; color:#a39d8d; margin-top:12px; position:relative; }

/* ---------- sample issue ---------- */
.sample-wrap { max-width:900px; margin:72px auto; padding:0 24px; }
.sample-wrap h2 { font-family:var(--disp); font-size:clamp(26px,4vw,36px); font-weight:900;
  text-align:center; margin-bottom:12px; color:var(--ink); }
.sample-wrap > p.sub { text-align:center; color:var(--dim); font-size:15px; margin:0 0 34px;
  line-height:1.6; }
.illus-tag { display:inline-block; font-family:var(--mono); font-size:12px; color:#54514a;
  background:#fffdf9; border:1px solid var(--line2); border-radius:999px; padding:4px 12px;
  margin-top:8px; letter-spacing:.2px; }
.sample { max-width:660px; margin:0 auto; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(32,36,44,.16); background:#fffdf9; border:1px solid var(--line2); }
.s-hero { background:var(--ink); color:#f7f4ee; text-align:center; padding:36px 20px;
  border-bottom:3px solid var(--gold); }
.s-brand { font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--gold);
  font-weight:600; margin-bottom:10px; }
.s-title { font-family:var(--disp); font-size:clamp(20px,3vw,26px); font-weight:900; line-height:1.25; }
.s-stats { margin-top:12px; font-family:var(--mono); font-size:12px; color:#b8b2a4; letter-spacing:.5px; }
.s-body { padding:26px 26px 20px; }
.s-sec { font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:2px;
  color:#8a6520; margin:22px 0 10px; text-transform:uppercase; }
.s-sec:first-child { margin-top:0; }
.card { border:1px solid var(--line); border-radius:12px; padding:16px 18px 12px; margin-bottom:12px;
  background:#fff; }
.c-top { font-size:15.5px; font-weight:600; margin-bottom:6px; color:var(--ink); }
.dot { margin-right:4px; }
.c-elig { font-size:13.5px; color:var(--dim); margin-bottom:6px; line-height:1.5; }
.c-close { font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--green);
  margin-bottom:6px; }
.c-close.red { color:var(--red); }
.c-pay { font-size:13px; color:var(--text); margin-bottom:6px; line-height:1.5; }
.c-pay b { color:var(--ink); }
.c-proof { font-size:12.5px; color:var(--dim); margin-bottom:12px; line-height:1.5; }
.c-btn { display:inline-block; background:var(--blue); color:#fff; font-size:13.5px; font-weight:600;
  padding:10px 18px; border-radius:8px; margin-bottom:10px; }
.c-btn.red { background:var(--red); }
.c-foot { font-family:var(--mono); font-size:11.5px; color:#5f5b4e; border-top:1px solid var(--line);
  padding-top:8px; }
.s-more { text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--dim);
  margin-top:16px; font-style:italic; }
/* per-claim share rows (rendered by ca_site_sample.py after each weekly send) */
.c-share { border-top:1px solid var(--line); padding-top:8px; margin-top:8px; }
.c-share a { font-size:12.5px; color:var(--blue); font-weight:600; text-decoration:none; }
.c-share a:active { opacity:.6; }

/* ---------- closing CTA ---------- */
.cta { background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:64px 24px; text-align:center; }
.cta h2 { font-family:var(--disp); font-size:clamp(24px,4vw,34px); font-weight:900;
  color:var(--ink); margin-bottom:8px; }
.cta p { color:var(--dim); font-size:15.5px; max-width:520px; margin:0 auto 24px; line-height:1.6; }

/* ---------- share ---------- */
.share { max-width:680px; margin:56px auto 0; padding:0 24px; }
.share-box { background:#fffdf9; border:1px solid var(--line); border-radius:16px; padding:34px 30px;
  text-align:center; box-shadow:0 2px 12px rgba(32,36,44,.05); }
.share-box h3 { font-family:var(--disp); font-size:21px; font-weight:900; margin-bottom:10px;
  color:var(--ink); }
.share-box p { font-size:15px; color:var(--dim); line-height:1.65; max-width:540px;
  margin:0 auto 20px; }
.share-btn { padding:14px 26px; font-size:15.5px; font-weight:600; border:0; border-radius:10px;
  background:var(--ink); color:#f7f4ee; cursor:pointer; font-family:var(--sans); }
.share-btn:hover { background:var(--ink2); }

@media (max-width: 620px) {
  .hero { padding:60px 20px 68px; }
  .hero h1 { font-size:clamp(28px,7.4vw,34px); }
  .frow { flex-wrap:wrap; }
  .frow .s-in { flex:1 1 100%; }
  .frow input[type=email], .frow button { flex:1 1 100%; }
  .stats { gap:26px; padding:30px 14px; }
  .stat b { font-size:27px; }
  .share-box { padding:26px 18px; }
  .s-body { padding:22px 16px 16px; }
  .how { margin:56px auto; }
  .sample-wrap { margin:56px auto; }
  .s-stats { font-size:11px; }
  .c-top { font-size:15px; }
  .illus-tag { font-size:11.5px; padding:3px 10px; }
}