/* Goldsmith by Smith Block Markets
   Mobile-first. No framework. */

/* Fonts, served from this site rather than a third party, so the page can
   paint without a DNS lookup and TLS handshake to Google first.
   Inter is a variable font: one file covers weights 400 to 700. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/cormorant-garamond-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("assets/fonts/inter-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#0E0F12;        /* near-black page ground */
  --char:#17181C;       /* charcoal, raised surfaces */
  --gold:#C6A052;       /* matte gold, never glossy */
  --gold-lift:#D8B76A;  /* gold on hover, one step up */
  --paper:#F7F4EE;      /* warm paper, primary text */
  --paper-2:#B9B4AA;    /* secondary text, 7.2:1 on --ink */
  --loss:#B4574B;       /* muted brick for the one negative month */

  /* thin gold hairlines: the only dividers on the page */
  --hair:rgba(198,160,82,.17);
  --hair-soft:rgba(198,160,82,.10);
  --tint:rgba(198,160,82,.06);

  /* one spacing scale, used everywhere */
  --s1:.5rem;
  --s2:.75rem;
  --s3:1rem;
  --s4:1.5rem;
  --s5:2rem;
  --s6:2.75rem;
  --s7:4rem;

  --w:clamp(1.25rem,5vw,2.5rem);   /* side gutter, never below 20px */
  --max:62rem;                     /* one container width */
  --measure:54ch;                  /* one reading width for body copy */
  --tap:44px;                      /* minimum tap target */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 1rem/1.7 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}

b,strong{font-weight:600}

a{color:var(--gold);text-underline-offset:.22em}

:focus-visible{
  outline:1.5px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- layout ---------- */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--w);
}

section{padding-block:clamp(4rem,11vw,7.5rem)}
section + section{border-top:1px solid var(--hair-soft)}

/* the measure, applied by class instead of inline styles */
.measure{max-width:var(--measure)}
.spaced{margin-top:var(--s5)}

.eyebrow{
  font-size:.6875rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  margin:0 0 var(--s4);
}

h2{
  font-size:clamp(2.125rem,6.5vw,3.25rem);
  letter-spacing:-.008em;
  margin-bottom:var(--s4);
}

h3{font-size:clamp(1.25rem,4vw,1.5rem);margin-bottom:var(--s1)}

.lede{
  font-size:clamp(1.0625rem,2.4vw,1.1875rem);
  line-height:1.62;
  color:var(--paper);
  max-width:var(--measure);
}

.note{color:var(--paper-2);font-size:.9375rem}
.note-sm{color:var(--paper-2);font-size:.875rem;line-height:1.65}

/* ---------- hero ---------- */

.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(4rem,14vh,7rem);
  text-align:center;
  border-top:0;
}

.house{
  font-size:.8125rem;            /* 1.3x the original .625rem */
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--paper-2);
  margin:0 0 var(--s6);
  padding-left:.34em;            /* optical centring: tracking adds a trailing gap */
}

h1{
  font-size:clamp(2.625rem,12.5vw,7.5rem);
  letter-spacing:.055em;
  margin:0 0 var(--s4);
  padding-left:.055em;
  color:var(--paper);
  max-width:100%;
  overflow-wrap:break-word;
}

.hero-sub{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.375rem,4.8vw,2.125rem);
  line-height:1.22;
  color:var(--gold);
  margin:0 0 var(--s3);
}

.hero-tag{
  font-size:.75rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--paper-2);
  margin:0 0 var(--s6);
  padding-left:.24em;
}

.rule{
  width:56px;height:1px;
  background:var(--gold);
  border:0;margin:0 auto var(--s6);
  opacity:.55;
}

/* ---------- buttons ---------- */

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:var(--s3) var(--s5);
  background:var(--gold);
  color:var(--ink);
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:.005em;
  text-decoration:none;
  border-radius:2px;
  border:1px solid var(--gold);
  cursor:pointer;
  text-align:center;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.btn:hover{background:var(--gold-lift);border-color:var(--gold-lift)}

.btn-ghost{
  background:transparent;
  color:var(--paper);
  border:1px solid var(--hair);
  font-weight:500;
}
.btn-ghost:hover{background:var(--tint);border-color:var(--gold);color:var(--paper)}

.btn-row{display:grid;gap:var(--s2);margin-top:var(--s5)}
@media(min-width:560px){.btn-row{grid-template-columns:1fr 1fr;gap:var(--s3)}}

.hero .btn{max-width:24rem;margin-inline:auto;width:100%}

.btn-hint{
  font-size:.8125rem;
  color:var(--paper-2);
  margin:var(--s3) 0 0;
}

/* WhatsApp call-to-action: the gold button, sized to its own text */
.btn-wa{
  display:inline-flex;
  width:auto;
  max-width:100%;
  margin-top:var(--s4);
}

/* ---------- cards ---------- */

.cards{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}

.card{
  background:var(--char);
  border:1px solid var(--hair-soft);
  border-radius:3px;
  padding:clamp(1.25rem,3.6vw,1.75rem);
  transition:border-color .22s ease;
}
.card:hover{border-color:var(--hair)}
.card h3{color:var(--gold)}

.card dl{
  margin:var(--s4) 0 0;
  padding-top:var(--s3);
  border-top:1px solid var(--hair-soft);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.45rem var(--s3);
  font-size:.9375rem;
}
.card dt{color:var(--paper-2)}
.card dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--paper)}

/* ---------- performance ---------- */

.period{
  color:var(--paper-2);
  font-size:.9375rem;
  max-width:var(--measure);
  margin-bottom:var(--s6);
}

.figs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hair-soft);
  border:1px solid var(--hair-soft);
  border-radius:3px;
  overflow:hidden;
}
@media(min-width:720px){.figs{grid-template-columns:repeat(4,1fr)}}

.fig{background:var(--ink);padding:var(--s4) var(--s3)}
.fig b{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.875rem,5.6vw,2.5rem);
  font-weight:400;
  line-height:1.08;
  color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.fig span{
  display:block;
  margin-top:var(--s1);
  font-size:.8125rem;
  color:var(--paper-2);
  line-height:1.45;
}

.disclaimer{
  margin:var(--s4) 0 0;
  font-size:.875rem;
  color:var(--paper-2);
  font-style:italic;
}

/* monthly bar row */

.chart{margin-top:var(--s7)}
.chart-title{
  font-size:.8125rem;
  color:var(--paper-2);
  margin:0 0 var(--s4);
}

.bars{
  display:flex;
  align-items:flex-end;
  gap:clamp(2px,1vw,10px);
  /* --h on each bar is that month's return, as a percentage.
     --bar-unit converts one percentage point into pixels. */
  --bar-unit:2.02px;
  --bar-max:55.4;      /* the best month */
  --bar-min:3.7;       /* the worst month */
}
@media(min-width:720px){.bars{--bar-unit:3.44px}}

.bar{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.bar-pos,.bar-neg{display:flex;flex-direction:column}
.bar-pos{height:calc(var(--bar-max) * var(--bar-unit) + 1.3rem);justify-content:flex-end}
.bar-neg{height:calc(var(--bar-min) * var(--bar-unit) + 1.2rem);justify-content:flex-start}

.bar-fill{
  height:calc(var(--h,0) * var(--bar-unit));
  background:var(--gold);
  border-radius:1px 1px 0 0;
  min-height:2px;
}
.bar-neg .bar-fill{
  background:var(--loss);
  border-radius:0 0 1px 1px;
}

.bar-val{
  font-size:clamp(.5rem,2.1vw,.75rem);
  color:var(--paper-2);
  text-align:center;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  margin-bottom:.3rem;
  white-space:nowrap;
}
.bar-neg .bar-val{margin:.3rem 0 0}

.axis{height:1px;background:var(--hair)}

.bars.labels{align-items:flex-start}

.bar-mo{
  font-size:clamp(.5625rem,2.1vw,.6875rem);
  color:var(--paper-2);
  text-align:center;
  margin-top:var(--s1);
  letter-spacing:.03em;
}

/* ---------- bonus callout ---------- */

.bonus{
  border:1px solid var(--gold);
  border-radius:3px;
  padding:clamp(1.5rem,4.5vw,2.5rem);
  background:var(--tint);
}
.bonus h2{
  font-size:clamp(1.625rem,4.8vw,2.125rem);
  color:var(--gold);
  margin-bottom:var(--s3);
}
.bonus .shout{
  font-family:Inter,sans-serif;
  font-weight:700;
  font-size:clamp(1.0625rem,3.2vw,1.1875rem);
  line-height:1.45;
  color:var(--paper);
  margin-bottom:var(--s4);
}

/* ---------- how to join ---------- */

/* the warning bar above step 1 */
.warnbar{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  margin-top:var(--s5);
  padding:var(--s3) var(--s4);
  border:1px solid var(--gold);
  border-radius:3px;
  background:var(--tint);
}
.warnbar-icon{
  flex:0 0 auto;
  width:22px;height:22px;
  color:var(--gold);
  margin-top:.14rem;
}
.warnbar p{
  margin:0;
  font-size:.9375rem;
  line-height:1.55;
  color:var(--paper);
}
.warnbar b{color:var(--gold);font-weight:600}

.steps{
  list-style:none;
  counter-reset:s;
  margin:var(--s5) 0 0;
  padding:0;
}

.steps li{
  counter-increment:s;
  position:relative;
  padding:0 0 var(--s5) 3.25rem;
}
.steps li:last-child{padding-bottom:0}

/* the number */
.steps li::before{
  content:counter(s);
  position:absolute;
  left:0;top:-.15rem;
  width:2rem;height:2rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:50%;
  color:var(--gold);
  font-family:Inter,sans-serif;
  font-size:.8125rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* the hairline joining one step to the next */
.steps li::after{
  content:"";
  position:absolute;
  left:1rem;top:2.25rem;bottom:.35rem;
  width:1px;
  background:var(--hair-soft);
}
.steps li:last-child::after{display:none}

.steps h3{
  font-size:1.0625rem;
  font-family:Inter,sans-serif;
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:.3rem;
  line-height:1.35;
}
.steps p{font-size:.9375rem;color:var(--paper-2);margin-bottom:0}

/* STEP 4: the one that costs money if it is skipped */
.steps li.step-critical{
  display:flex;
  gap:var(--s3);
  align-items:flex-start;
  margin:0 0 var(--s5);
  padding:var(--s4);
  border:1px solid var(--gold);
  border-radius:3px;
  background:var(--tint);
}
.steps li.step-critical::before{
  position:static;
  flex:0 0 auto;
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:700;
  box-shadow:0 0 0 3px rgba(198,160,82,.15);
}
.steps li.step-critical::after{display:none}
.steps li.step-critical .step-body{min-width:0}
.steps li.step-critical h3{color:var(--gold)}
.steps li.step-critical p{color:var(--paper)}

.after-steps{
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--hair-soft);
  font-size:1.0625rem;
}

/* ---------- plain list ---------- */

.ticks{list-style:none;margin:var(--s5) 0 0;padding:0}
.ticks li{
  position:relative;
  padding:0 0 var(--s2) 1.75rem;
  color:var(--paper);
  font-size:1.0625rem;
}
.ticks li:last-child{padding-bottom:0}
.ticks li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:10px;height:1px;
  background:var(--gold);
}

/* ---------- contact ---------- */

.contact-alt{
  margin-top:var(--s4);
  font-size:.9375rem;
  color:var(--paper-2);
}
.contact-alt a{
  font-weight:500;
  display:inline-block;
  min-height:var(--tap);
  line-height:var(--tap);
}

/* ---------- footer ---------- */

footer{
  padding-block:clamp(3rem,7vw,4.5rem);
  border-top:1px solid var(--hair);
  background:var(--char);
}
footer h2{
  font-size:1.125rem;
  font-family:Inter,sans-serif;
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:var(--s3);
}
footer p{font-size:.875rem;color:var(--paper-2);line-height:1.7}

.footer-contact{
  margin-top:var(--s4);
  font-size:.9375rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 .5rem;
}
.footer-contact a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  display:inline-block;
  min-height:var(--tap);
  line-height:calc(var(--tap) - 2px);
  transition:border-color .22s ease,color .22s ease;
}
.footer-contact a:hover{border-bottom-color:var(--gold);color:var(--gold-lift)}
.footer-contact span{color:var(--paper-2)}

.copyright{
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid var(--hair-soft);
  font-size:.8125rem;
}

/* ---------- a11y helper ---------- */

.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;
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ================================================================
   SITE CHROME: nav, inner-page headers, and the article template.
   Everything below reuses the tokens above, so the look is unchanged.
   ================================================================ */

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--gold);color:var(--ink);
  padding:.75rem 1rem;border-radius:0 0 2px 0;
  font-weight:600;z-index:50;
}
.skip:focus{left:0}

/* ---------- navigation ---------- */

.nav{
  border-bottom:1px solid var(--hair-soft);
  background:var(--ink);
}
.nav-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2) var(--s4);
  padding-block:var(--s2);
}
.nav-mark{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.25rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  transition:color .22s ease;
}
.nav-mark:hover{color:var(--gold)}
.nav-mark span{
  font-family:Inter,sans-serif;
  font-size:.625rem;
  letter-spacing:.24em;
  color:var(--paper-2);
  margin-left:.6rem;
}
.nav nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:0 var(--s4);
}
.nav nav a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  font-size:.875rem;
  color:var(--paper-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .22s ease,border-color .22s ease;
}
.nav nav a:hover{color:var(--paper)}
.nav nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

@media(max-width:560px){
  .nav-mark span{display:none}
  .nav nav ul{gap:0 var(--s3)}
  .nav nav a{font-size:.8125rem}
}

/* the home hero sits directly under the bar and keeps its full height */
.home .hero{min-height:calc(100svh - 4rem)}

/* ---------- hero additions ---------- */

h1 .wordmark{display:block}
h1 .h1-sub{
  display:block;
  font-family:Inter,sans-serif;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:var(--s3);
  padding-left:.26em;
}

.hero-points{
  list-style:none;
  margin:var(--s5) auto 0;
  padding:0;
  max-width:30rem;
  text-align:left;
  display:grid;
  gap:.6rem;
}
.hero-points li{
  position:relative;
  padding-left:1.5rem;
  font-size:.9375rem;
  color:var(--paper);
  line-height:1.5;
}
.hero-points li::before{
  content:"";position:absolute;
  left:0;top:.68em;width:9px;height:1px;
  background:var(--gold);
}
.hero .rule{margin-top:var(--s6)}

/* ---------- figure labelling ---------- */

.fig-fall b{color:var(--loss)}

.figure-label{
  margin:var(--s4) 0 0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--paper);
  max-width:var(--measure);
  padding-left:var(--s3);
  border-left:2px solid var(--gold);
}
.figure-link{
  margin:var(--s3) 0 0;
  font-size:.9375rem;
  color:var(--paper-2);
  max-width:var(--measure);
}
.figure-link a{font-weight:500}

/* ---------- inner page header ---------- */

.page-head{padding-block:clamp(3rem,8vw,5rem) 0}
.page-head h1{
  font-size:clamp(2.25rem,6.5vw,3.5rem);
  letter-spacing:-.008em;
  padding-left:0;
  margin-bottom:var(--s4);
  text-align:left;
}
.page-head .lede{margin-bottom:0}

/* ---------- prose ---------- */

.prose{max-width:var(--measure)}
.prose h2{
  font-size:clamp(1.5rem,4.5vw,2rem);
  margin:var(--s6) 0 var(--s3);
}
.prose h3{
  font-family:Inter,sans-serif;
  font-size:1.0625rem;
  font-weight:600;
  letter-spacing:-.005em;
  margin:var(--s5) 0 var(--s2);
  line-height:1.4;
}
.prose p{margin-bottom:var(--s3);line-height:1.75}
.prose ul,.prose ol{margin:0 0 var(--s3);padding-left:1.25rem}
.prose li{margin-bottom:.5rem;line-height:1.7}
.prose li::marker{color:var(--gold)}
.prose a{font-weight:500}
.prose strong{color:var(--paper)}
.prose blockquote{
  margin:var(--s4) 0;
  padding-left:var(--s3);
  border-left:2px solid var(--gold);
  color:var(--paper-2);
  font-style:italic;
}

/* ---------- tables ---------- */

.table-scroll{
  overflow-x:auto;
  margin:var(--s4) 0;
  border:1px solid var(--hair-soft);
  border-radius:3px;
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-size:.875rem;
  font-variant-numeric:tabular-nums;
}
caption{
  caption-side:top;
  text-align:left;
  padding:var(--s3);
  color:var(--paper-2);
  font-size:.8125rem;
}
th,td{
  padding:.7rem var(--s3);
  text-align:right;
  border-bottom:1px solid var(--hair-soft);
}
th:first-child,td:first-child{text-align:left}
thead th{
  color:var(--gold);
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:500;color:var(--paper)}
td.pos{color:var(--paper)}
td.neg{color:var(--loss)}

/* ---------- article furniture ---------- */

.article{padding-block:clamp(2rem,6vw,3.5rem) clamp(3rem,9vw,6rem)}

.crumbs{
  font-size:.8125rem;
  color:var(--paper-2);
  margin-bottom:var(--s4);
  display:flex;flex-wrap:wrap;gap:0 .5rem;
}
.crumbs a{color:var(--paper-2);text-decoration:none;border-bottom:1px solid var(--hair-soft)}
.crumbs a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.article h1{
  font-size:clamp(2rem,6vw,3rem);
  letter-spacing:-.008em;
  padding-left:0;
  text-align:left;
  margin-bottom:var(--s3);
}

.byline{
  font-size:.8125rem;
  color:var(--paper-2);
  margin-bottom:var(--s6);
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--hair-soft);
  max-width:var(--measure);
  display:flex;flex-wrap:wrap;gap:0 .5rem;
}

.riskbox{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  margin:var(--s6) 0 0;
  padding:var(--s3) var(--s4);
  border:1px solid var(--gold);
  border-radius:3px;
  background:var(--tint);
  max-width:var(--measure);
}
.riskbox p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--paper)}
.riskbox b{color:var(--gold);font-weight:600}

.related{margin-top:var(--s6);max-width:var(--measure)}
.related h2{
  font-family:Inter,sans-serif;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:var(--s3);
}
.related ul{list-style:none;margin:0;padding:0}
.related li{border-top:1px solid var(--hair-soft)}
.related a{
  display:block;
  padding:var(--s3) 0;
  min-height:var(--tap);
  color:var(--paper);
  text-decoration:none;
  font-size:1.0625rem;
  transition:color .22s ease;
}
.related a:hover{color:var(--gold)}

.article-cta{margin-top:var(--s6)}

/* ---------- learn index ---------- */

.cardlist{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
@media(min-width:720px){.cardlist{grid-template-columns:1fr 1fr}}
.cardlist a{
  display:block;
  height:100%;
  padding:clamp(1.25rem,3.6vw,1.75rem);
  background:var(--char);
  border:1px solid var(--hair-soft);
  border-radius:3px;
  text-decoration:none;
  transition:border-color .22s ease;
}
.cardlist a:hover{border-color:var(--gold)}
.cardlist h2{
  font-size:1.25rem;
  color:var(--paper);
  margin:.5rem 0 .5rem;
  line-height:1.25;
}
.cardlist a:hover h2{color:var(--gold)}
.cardlist p{font-size:.9375rem;color:var(--paper-2);margin:0}
.tag{
  display:inline-block;
  font-size:.625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:.25rem .5rem;
}

/* ---------- FAQ ---------- */

.faq{margin-top:var(--s5);max-width:var(--measure)}
.faq > div{
  border-top:1px solid var(--hair-soft);
  padding:var(--s4) 0;
}
.faq > div:last-child{border-bottom:1px solid var(--hair-soft)}
.faq h2{
  font-family:Inter,sans-serif;
  font-size:1.0625rem;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.4;
  margin-bottom:var(--s2);
}
.faq p{font-size:.9375rem;color:var(--paper-2);line-height:1.7}
.faq p:last-child{margin-bottom:0}

/* ---------- footer additions ---------- */

.footer-nav{
  margin-top:var(--s2);
  font-size:.9375rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;
}
.footer-nav a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  display:inline-block;
  min-height:var(--tap);
  line-height:calc(var(--tap) - 2px);
  transition:border-color .22s ease,color .22s ease;
}
.footer-nav a:hover{border-bottom-color:var(--gold);color:var(--gold-lift)}
.footer-nav span{color:var(--paper-2)}

/* a step-4 panel shown on its own page still shows "4", not "1" */
.steps li.step-critical::before{content:var(--step-n, counter(s))}
.steps li.step-critical .eyebrow{margin-bottom:var(--s2)}