/* Apron and Aura
   Premium, moderately minimal design system.
   Ivory ground, warm near-black ink, one muted bronze accent.
   Type system: Cormorant Garamond for display, Inter for text.
   Serif runs 500 at large sizes and 600 at small sizes, where the
   lighter weight would read too faint. Every uppercase label on
   the site shares one size and tracking from the tokens below:
   weight 500 for passive labels, 600 for actions and table heads. */

:root{
  --bg:#FAF7F1;
  --bg-soft:#F3EEE2;
  --paper:#FFFEFA;
  --ink:#211F1C;
  --ink-soft:#4C4740;
  --muted:#7D7668;
  --line:#E3DAC6;
  --line-strong:#C9BA97;
  --bronze:#9A7B4F;
  --bronze-deep:#7C6238;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --label-size:12px;
  --label-track:.18em;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#E9DFC6}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
.wrap.article{max-width:712px}

/* ---------- links ---------- */
a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(154,123,79,.55);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .18s ease,text-decoration-color .18s ease}
a:hover{color:var(--bronze-deep);text-decoration-color:var(--bronze)}
a:focus-visible{outline:1.5px solid var(--bronze);outline-offset:3px}

/* ---------- header ---------- */
.site-header{padding:52px 0 0;text-align:center}
.brand{
  font-family:var(--serif);
  font-size:42px;
  font-weight:600;
  line-height:1;
  letter-spacing:.015em;
  color:var(--ink);
  text-decoration:none;
}
.brand span{font-style:italic;font-weight:500;color:var(--bronze)}
.brand:hover{color:var(--ink)}
.tagline{
  margin:14px 0 0;
  font-size:var(--label-size);
  font-weight:500;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--muted);
}
.main-nav{
  margin-top:34px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 38px;
}
.main-nav a{
  font-size:var(--label-size);
  font-weight:500;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
}
.main-nav a:hover{color:var(--bronze-deep);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:5px}

/* ---------- type ---------- */
h1{
  font-family:var(--serif);
  font-size:46px;
  font-weight:500;
  line-height:1.12;
  letter-spacing:.002em;
  color:var(--ink);
  margin:56px 0 18px;
}
.article h1{font-size:clamp(36px,5.2vw,47px);margin:14px 0 10px}
h2{
  font-family:var(--serif);
  font-size:29px;
  font-weight:600;
  line-height:1.25;
  color:var(--ink);
  margin:54px 0 12px;
}
main:not(.article) > h2{
  border-top:1px solid var(--line);
  padding-top:44px;
  margin-top:64px;
}
h3{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  margin:30px 0 8px;
}
p{margin:0 0 18px;color:var(--ink-soft)}
h1 + p, h2 + p, h3 + p{color:var(--ink-soft)}
ul,ol{margin:0 0 20px;padding-left:22px;color:var(--ink-soft)}
li{margin-bottom:8px}
li::marker{color:var(--bronze)}
strong{color:var(--ink);font-weight:600}
.meta{
  font-size:var(--label-size);
  font-weight:500;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- home hero ---------- */
.hero{padding:78px 0 6px}
.hero h1{
  font-size:clamp(42px,6vw,60px);
  line-height:1.07;
  margin:0 0 22px;
  max-width:620px;
}
.lede{font-size:20px;line-height:1.65;color:var(--ink-soft);max-width:660px}
.hero p{max-width:660px}
.hero::after{
  content:"";
  display:block;
  width:54px;
  height:1px;
  background:var(--bronze);
  margin-top:50px;
}

/* ---------- disclosure and note blocks: quiet small print ---------- */
.disclosure-box{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 2px;
  margin:30px 0 34px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}
.article .disclosure-box{margin:24px 0 42px}
.disclosure-box strong{color:var(--ink-soft);font-weight:600}
.note-box{
  background:var(--paper);
  border:1px solid var(--line);
  padding:28px 30px;
  margin:26px 0;
}
.note-box p:last-child{margin-bottom:0}

/* ---------- selection standard block: quiet hairlines, small text ---------- */
.standard-box{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 2px;
  margin:36px 0;
}
.standard-box h2{font-size:22px;margin:0 0 8px}
.standard-box p,.standard-box li{font-size:15px;line-height:1.65}
.standard-box ul{margin-bottom:2px}

/* ---------- risk note under a product link ---------- */
.product-note{font-size:14px;line-height:1.65;color:var(--muted);margin:14px 0 0}

/* ---------- email checklist block: hairlines, no popup, no bright button ---------- */
.checklist-box{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:30px 2px;
  margin:46px 0;
}
.checklist-box h2{font-size:24px;margin:0 0 10px}
.checklist-box p{max-width:560px}
.checklist-form{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:16px}
.checklist-form label{flex-basis:100%}
.checklist-form input{
  flex:1 1 240px;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  padding:11px 13px;
  border:1px solid var(--line-strong);
  background:var(--paper);
  color:var(--ink);
}
.checklist-form input::placeholder{color:var(--muted)}
.checklist-form input:focus-visible{outline:1.5px solid var(--bronze);outline-offset:2px}
.checklist-form button{
  font-family:var(--sans);
  font-size:var(--label-size);
  font-weight:600;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  background:none;
  border:none;
  border-bottom:1px solid var(--bronze);
  border-radius:0;
  padding:0 0 6px;
  color:var(--ink);
  cursor:pointer;
}
.checklist-form button:hover{color:var(--bronze-deep);border-bottom-color:var(--bronze-deep)}

/* ---------- guide listings on the home page ---------- */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:64px;
  margin:6px 0 10px;
}
.card{padding:26px 0 28px;border-top:1px solid var(--line)}
.card h3{margin:0 0 8px;font-size:24px}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--bronze-deep);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:4px}
.card p{margin:0;font-size:15px;line-height:1.65;color:var(--muted)}

/* ---------- text action link (replaces the old button) ---------- */
.btn{
  display:inline-block;
  font-size:var(--label-size);
  font-weight:600;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--bronze);
  padding-bottom:6px;
  margin-top:6px;
}
.btn:hover{color:var(--bronze-deep);border-bottom-color:var(--bronze-deep)}

/* ---------- guide articles ---------- */
.breadcrumb{
  margin:40px 0 0;
  font-size:var(--label-size);
  font-weight:500;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--muted);
}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:4px}
.product-box{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:1px solid var(--bronze);
  padding:32px 34px;
  margin:38px 0;
}
.product-box h3{margin-top:0;font-size:24px}
.product-box p:last-child{margin-bottom:0}
.product-box a[href="#"]{
  display:inline-block;
  font-size:var(--label-size);
  font-weight:600;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--bronze);
  padding-bottom:5px;
  color:var(--ink);
}
.product-box a[href="#"]:hover{color:var(--bronze-deep)}

/* ---------- comparison table ---------- */
table{
  width:100%;
  border-collapse:collapse;
  margin:26px 0 30px;
  font-size:15px;
  line-height:1.6;
}
th{
  font-size:var(--label-size);
  font-weight:600;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:left;
  vertical-align:top;
  padding:0 18px 12px 0;
  border-bottom:1px solid var(--line-strong);
}
td{
  padding:16px 18px 16px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  color:var(--ink-soft);
}
td:first-child{color:var(--ink);font-weight:500}
th:last-child, td:last-child{padding-right:0}

/* ---------- footer ---------- */
.site-footer{
  margin-top:100px;
  border-top:1px solid var(--line);
  padding:46px 0 54px;
  text-align:center;
  font-size:15px;
}
.site-footer p{color:var(--muted);margin:0 0 12px}
.site-footer a{
  font-size:var(--label-size);
  font-weight:500;
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
}
.site-footer a:hover{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:4px}
.site-footer .small{font-size:13px;color:var(--muted);max-width:560px;margin-left:auto;margin-right:auto}

/* ---------- small screens ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  .site-header{padding-top:38px}
  .brand{font-size:33px}
  .main-nav{gap:8px 22px;margin-top:26px}
  .hero{padding:52px 0 2px}
  .hero h1{font-size:clamp(36px,10vw,44px)}
  .card h3,.product-box h3{font-size:22px}
  h1{font-size:36px;margin-top:44px}
  h2{font-size:26px;margin-top:44px}
  main:not(.article) > h2{padding-top:34px;margin-top:50px}
  .grid{grid-template-columns:1fr}
  .product-box{padding:24px 22px}
  .note-box{padding:22px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .site-footer{margin-top:72px}
}