@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Jost:wght@200;300;400;500&display=swap');

:root{
  --cc-ink:#000000;
  --cc-ink-soft:#3A3835;
  --cc-ivory:#FAF9F6;
  --cc-white:#FFFFFF;
  --cc-stone:#D7D1C6;
  --cc-stone-soft:#EDE9E1;
  --cc-stone-deep:#B7AFA0;
  --status-danger:#7A3B33;
  --hairline: rgba(0,0,0,0.14);
  --font-display:'Cormorant Garamond', serif;
  --font-sans:'Jost', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--cc-ivory);
  color:var(--cc-ink);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.1;
  margin:0 0 0.5em;
  color:var(--cc-ink);
}
h1{font-size:clamp(2.5rem,6vw,4.2rem); letter-spacing:0.01em;}
h2{font-size:clamp(1.7rem,3.2vw,2.3rem); margin-top:0.2em;}
h3{font-size:1.3rem; font-weight:500;}

p{margin:0 0 1.3em; max-width:62ch;}
a{color:var(--cc-ink); text-decoration:none;}

.wrap{max-width:740px; margin:0 auto; padding:0 32px;}
.wrap-wide{max-width:1080px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){ .wrap,.wrap-wide{padding:0 20px;} }

/* ---------- Header: transparent-to-ivory sticky, hairline on scroll ---------- */
header.site{
  background:var(--cc-ivory);
  border-bottom:1px solid var(--hairline);
  position:sticky;
  top:0;
  z-index:10;
  padding:22px 0;
}
header.site .wrap-wide{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.logo{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--cc-ink);
}
nav.site-nav a{
  color:var(--cc-ink);
  margin-left:28px;
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:3px;
}
nav.site-nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--cc-ink);
  transition:width 220ms ease;
}
nav.site-nav a:hover::after{width:100%;}

/* ---------- Hero: stone-tint ground, no dark blocks, no gradients ---------- */
.hero{
  background:var(--cc-stone-soft);
  padding:96px 0 72px;
  border-bottom:1px solid var(--hairline);
}
.hero .kicker{
  font-family:var(--font-sans);
  color:var(--cc-ink-soft);
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.hero h1{max-width:16ch; letter-spacing:0.005em;}
.hero p.lede{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:1.05rem;
  color:var(--cc-ink-soft);
  max-width:52ch;
  margin-top:20px;
}
.hero-rule{width:56px; height:1px; background:var(--cc-ink); margin:28px 0 0;}
.byline{
  display:flex; align-items:center; gap:8px;
  font-size:0.78rem; letter-spacing:0.02em; color:var(--cc-ink-soft);
  margin:30px 0 0;
}
.byline .dot{opacity:.5;}

/* ---------- Content sections ---------- */
.section-light{padding:96px 0;}
.section-light + .section-light{border-top:1px solid var(--hairline); padding-top:80px;}

.disclosure{
  background:var(--cc-white);
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:16px 20px;
  font-size:0.88rem;
  color:var(--cc-ink-soft);
  margin:0 0 54px;
}
.disclosure a{text-decoration:underline; text-underline-offset:3px;}

/* ---------- Comparison table (card-derived: white ground, hairline, 3px radius) ---------- */
table.compare{
  width:100%;
  border-collapse:collapse;
  margin:0 0 20px;
  font-size:0.92rem;
  background:var(--cc-white);
  border:1px solid var(--hairline);
  border-radius:3px;
  overflow:hidden;
}
table.compare th{
  text-align:left;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cc-ink-soft);
  padding:16px 16px 14px;
  border-bottom:1px solid var(--hairline);
}
table.compare td{
  padding:22px 16px;
  border-bottom:1px solid var(--hairline);
  vertical-align:top;
}
table.compare tr:last-child td{border-bottom:none;}
.brand-cell{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:0.01em;
}
.cta{white-space:nowrap;}
.btn{
  display:inline-block;
  background:var(--cc-ink);
  color:var(--cc-ivory);
  padding:9px 18px;
  border-radius:3px;
  text-decoration:none;
  font-size:0.66rem;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  transition:background 220ms ease;
}
.btn:hover{background:#1A1A1A;}

.route-note{
  font-family:var(--font-display);
  font-style:italic;
  font-size:0.82rem;
  color:var(--cc-ink-soft);
  display:block;
  margin-top:6px;
}

/* ---------- Callout / pull-quote — treated as a card, not a dark block ---------- */
.callout{
  background:var(--cc-white);
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:48px 40px;
  margin:8px 0;
}
.callout p.pull{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem,2.4vw,1.85rem);
  color:var(--cc-ink);
  line-height:1.4;
  max-width:52ch;
  margin:0;
}
.callout .hero-rule{margin-bottom:22px;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--hairline); padding:24px 0;}
.faq-item:first-child{border-top:1px solid var(--hairline);}
.faq-item h3{margin-bottom:8px;}

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--hairline);
  margin-top:0;
  padding:36px 0;
  font-size:0.78rem;
  color:var(--cc-ink-soft);
  letter-spacing:0.01em;
}
footer.site a{text-decoration:underline; text-underline-offset:3px;}
footer.site .wrap-wide{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}

.grid-two{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin:32px 0;}
@media(max-width:640px){
  .grid-two{grid-template-columns:1fr;}
  table.compare{font-size:0.84rem;}
  table.compare th, table.compare td{padding:14px 10px;}
  .hero{padding:64px 0 48px;}
  .section-light{padding:56px 0;}
  .callout{padding:32px 24px;}
}

.tag{
  display:inline-block;
  font-size:0.62rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:3px 9px;
  border:1px solid var(--cc-ink);
  border-radius:3px;
  color:var(--cc-ink);
}