/* HonestMonth: premium editorial design system.
   Warm ivory ground, white surfaces, warm beige borders, muted coral CTA,
   lavender product art, plum/sage secondary accents.
   Type: Fraunces (large display only) + Inter (everything else).
   Rule of thumb: serif never below 20px. Small text is always Inter. */

:root {
  --bg: #FAF8F4;            /* warm ivory */
  --card: #FFFFFF;
  --text: #252321;          /* soft black */
  --text-dim: #6B655F;      /* warm gray (contrast-checked on ivory) */
  --coral: #D96F63;         /* primary accent: CTA, active nav, price, eyebrows */
  --coral-deep: #C75F53;
  --plum: #765477;          /* secondary accent */
  --lavender: #E9DDF0;      /* product background */
  --sage: #788875;          /* supporting accent: checkmarks, "yes" cells */
  --border: #E7E0D8;        /* warm beige */
  --charcoal: #252321;
  --r-sm: 8px;
  --r-btn: 11px;
  --r-card: 14px;
  --r-product: 18px;
  --shadow: 0 12px 40px rgba(37, 35, 33, 0.06);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: var(--coral-deep); text-decoration: none; transition: color 0.18s ease; }
h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--text); line-height: 1.16; margin: 0 0 14px; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 4.4vw, 56px); }
h2 { font-size: clamp(24px, 2.8vw, 34px); }
h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--text); margin: 0 0 10px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--text-dim); }
section { padding: 46px 0; }
.center { text-align: center; }

/* ---------- entrance reveals (subtle; disabled for reduced motion) -------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- header ---------- */
#site-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 18px; }
.logo { font-family: var(--serif); font-weight: 600; font-size: 25px; color: var(--text); letter-spacing: -0.01em; }
.logo:hover { color: var(--coral-deep); }
#site-header nav { display: flex; gap: 2px; align-items: center; }
#site-header nav > .nav-item { position: relative; }
#site-header nav a.nav-link, #site-header nav button.nav-link {
  display: inline-block; background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--text); padding: 10px 15px; font-size: 14.5px; font-weight: 500;
  transition: color 0.18s ease;
}
#site-header nav .nav-link:hover { color: var(--coral); }
#site-header nav .nav-link.active { color: var(--coral); position: relative; }
#site-header nav .nav-link.active::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px; height: 2px; background: var(--coral); border-radius: 2px; }
.caret { font-size: 9px; margin-left: 3px; color: var(--text-dim); }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: var(--shadow); padding: 10px 0; display: none; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 9px 20px; color: var(--text); font-size: 14px; }
.dropdown a:hover { color: var(--coral-deep); background: var(--bg); }
.dropdown .drop-flagship { font-weight: 600; color: var(--coral-deep); border-bottom: 1px solid var(--border); margin-bottom: 6px; padding-bottom: 12px; }
.drop-tag { display: inline-block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: color-mix(in srgb, var(--coral) 12%, #fff); color: var(--coral-deep); border-radius: 99px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--coral-deep); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn::after { content: " \25BE"; font-size: 11px; }
.link-btn[aria-expanded="true"]::after { content: " \25B4"; }
.includes-more { margin: 12px 0 0; }

/* mobile menu */
.menu-btn { display: none; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--text); }
@media (max-width: 920px) {
  .menu-btn { display: inline-block; }
  #site-header nav { display: none; }
  #site-header.nav-open nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 76px; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: 10px 0 16px; }
  #site-header.nav-open nav a.nav-link { padding: 12px 24px; font-size: 16px; }
  #site-header.nav-open .nav-link.active::after { display: none; }
  .dropdown { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 4px; background: transparent; }
  .dropdown a { padding: 8px 40px; color: var(--text-dim); }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 15.5px; border-radius: var(--r-btn); padding: 0 28px; height: 50px; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-deep); }
.btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: #d5cabb; }
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* ---------- hero / flagship ---------- */
.flagship { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: start; }
.eyebrow { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin: 0 0 14px; }
.flagship-copy h1 { margin-bottom: 18px; }
.flagship-copy .lead { max-width: 52ch; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 0; }
/* slim inline assurance line, replaces any card-based trust strip */
.assure { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center; color: var(--text-dim); font-size: 13.5px; margin: 18px 0 0; padding: 0; list-style: none; }
.assure li { display: flex; align-items: center; }
.assure li + li::before { content: "·"; margin: 0 10px; color: #C9C1B6; }
@media (max-width: 920px) {
  .flagship { grid-template-columns: 1fr; gap: 34px; }
  .cta-row .btn { flex: 1 1 100%; }
}

/* ---------- product covers (CSS-rendered package art) ---------- */
.cover { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; padding: 24px 22px 44px; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--accent, #9B7FA6) 20%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent, #9B7FA6) 26%, var(--border));
  border-radius: var(--r-card); }
.cover-tag { color: color-mix(in srgb, var(--accent, #9B7FA6) 55%, #454545); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.cover-title { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.14; color: var(--charcoal); max-width: 95%; }
.cover-sub { color: #5F5952; font-size: 13px; line-height: 1.45; max-width: 88%; }
.cover-badge { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--charcoal); color: #EDE9E3; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 8px; font-weight: 500; }
/* editorial deco details */
.cover .deco-dots { position: absolute; top: 26px; left: 26px; width: 74px; height: 52px; background-image: radial-gradient(color-mix(in srgb, var(--accent, #9B7FA6) 55%, #fff) 1.6px, transparent 1.6px); background-size: 13px 13px; opacity: 0.8; }
.cover .deco-circle { position: absolute; top: -34px; right: -34px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--accent, #9B7FA6) 30%, #ffffff); opacity: 0.55; }
.cover .deco-rings { position: absolute; bottom: 26px; left: -30px; width: 110px; height: 110px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent, #9B7FA6) 45%, #fff); opacity: 0.5; }
.cover .deco-rings::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent, #9B7FA6) 45%, #fff); }
.cover .deco-stem { position: absolute; right: 30px; bottom: 64px; width: 54px; height: 84px; opacity: 0.75; }
.cover .deco-stem path { stroke: color-mix(in srgb, var(--accent, #9B7FA6) 65%, #6b5a70); fill: color-mix(in srgb, var(--accent, #9B7FA6) 40%, #fff); stroke-width: 1; }
/* the flagship/product hero preview. The visual focal point */
.cover.big { aspect-ratio: auto; min-height: 440px; padding-bottom: 62px; border-radius: var(--r-product); box-shadow: var(--shadow); }
.cover.big .cover-title { font-size: clamp(34px, 3.6vw, 48px); }
.cover.big .cover-sub { font-size: 15.5px; }
.cover.big .cover-badge { font-size: 11.5px; padding: 13px 10px; }
.cover.lavender { --accent: #B49CC3; background: var(--lavender); border-color: #DACBE4; }
.cover.lavender .cover-tag { color: var(--plum); }

/* ---------- gallery (main preview + thumbnail strip) ---------- */
.gallery-main { border-radius: var(--r-product); }
/* height:auto matters: the markup carries the real pixel size so the page
   does not jump while the picture loads, and without this the browser
   obeys that height literally and squeezes the image into a tower. */
.gallery-main > img { display: block; width: 100%; height: auto; border-radius: var(--r-product); border: 1px solid var(--border); box-shadow: var(--shadow); }
.gallery-main > img.zoomable { cursor: zoom-in; }

/* ---------- lightbox (expanded product image) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: rgba(28, 24, 21, 0.86); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.lb-figure { margin: 0; max-width: min(1400px, 94vw); cursor: default; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-figure img { display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.lb-figure figcaption { display: flex; gap: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.02em; }
.lb-close, .lb-prev, .lb-next { position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; line-height: 1; cursor: pointer; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255, 255, 255, 0.28); }
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 30px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 34px; padding-bottom: 4px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lb-figure img { max-height: 78vh; }
  .lb-prev, .lb-next { width: 40px; height: 40px; font-size: 28px; top: auto; bottom: 14px; transform: none; }
  .lb-prev { left: 14px; }
  .lb-next { right: 14px; }
}
/* The picture on a generated page, before its script runs. */
.product-layout > .gallery > img { display: block; width: 100%; height: auto; border-radius: var(--r-product); border: 1px solid var(--border); }
/* Six previews, laid out so they share the row evenly. As a flex row with a
   minimum width they fitted five and left the sixth stranded underneath. */
.thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 10px; margin-top: 14px; }
/* Narrow enough that six will not share a row: three and three beats five
   and one stranded underneath. */
@media (max-width: 560px) { .thumbs { grid-template-columns: repeat(3, 1fr); } }
.thumb { min-width: 0; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); cursor: pointer; font: inherit; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-dim); transition: border-color 0.15s ease, transform 0.12s ease; overflow: hidden; }
.thumb:hover { transform: translateY(-1px); border-color: #d5cabb; }
.thumb.active { border-color: var(--coral); outline: 1px solid var(--coral); }
.thumb .t-num { font-family: var(--serif); font-weight: 600; font-size: 17px; color: color-mix(in srgb, var(--accent, #9B7FA6) 70%, #4a4a4a); }
.thumb .t-label { font-size: 10px; line-height: 1.25; text-align: center; letter-spacing: 0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb.t-cover { background: color-mix(in srgb, var(--accent, #9B7FA6) 18%, #fff); }
.thumb > img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
/* generated feature slide (used until real screenshots exist) */
.feature-slide { min-height: 440px; border-radius: var(--r-product); border: 1px solid color-mix(in srgb, var(--accent, #9B7FA6) 26%, var(--border)); background: color-mix(in srgb, var(--accent, #9B7FA6) 14%, #ffffff); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; padding: 48px; position: relative; overflow: hidden; }
.feature-slide .fs-num { font-family: var(--serif); font-weight: 600; font-size: 58px; color: color-mix(in srgb, var(--accent, #9B7FA6) 55%, #fff); line-height: 1; }
.feature-slide .fs-text { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; color: var(--charcoal); margin: 14px 0 18px; max-width: 22ch; }
.feature-slide .fs-cap { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--accent, #9B7FA6) 60%, #454545); font-weight: 600; }
.feature-slide .deco-circle { position: absolute; bottom: -48px; right: -48px; width: 170px; height: 170px; border-radius: 50%; background: color-mix(in srgb, var(--accent, #9B7FA6) 26%, #fff); opacity: 0.6; }

/* ---------- product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
.card { display: flex; flex-direction: column; color: var(--text); }
.card .cover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover .cover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* real product screenshot, cropped to the top of the app where the sidebar,
   page title and first cards read clearly even at card size */
.card-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--accent, #9B7FA6) 26%, var(--border));
  background: color-mix(in srgb, var(--accent, #9B7FA6) 14%, #ffffff);
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.card-shot .cover-badge { padding: 7px 6px; font-size: 9px; letter-spacing: 0.08em;
  white-space: nowrap; }
.card-shot .cover-badge svg { flex: 0 0 auto; }
.card:hover .card-shot { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-body { padding: 14px 4px 6px; text-align: center; }
.card-collection { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.card-body h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 4px; }
.card-tagline { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-dim);
  margin: 0 0 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.price { margin: 0; display: flex; align-items: baseline; gap: 10px; justify-content: center; flex-wrap: wrap; }
.price-now { font-weight: 700; font-size: 16px; color: var(--coral-deep); }
.price-was { color: var(--text-dim); text-decoration: line-through; font-size: 13.5px; }
.price-off { display: none; }

/* hero/product pricing: larger, serif current price */
.hero-price { justify-content: flex-start; margin: 22px 0 0; }
.hero-price .price-now { font-family: var(--serif); font-size: 38px; font-weight: 500; }
.hero-price .price-was { font-size: 17px; }

/* ---------- includes / checklist ---------- */
.includes h3 { font-size: 16px; margin: 30px 0 6px; }
.checklist { list-style: none; padding: 0; margin: 10px 0 0; }
.checklist li { padding: 6px 0 6px 32px; position: relative; font-size: 15px; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--sage) 18%, #fff); color: var(--sage); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.checklist.cols { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 22px; }
@media (max-width: 620px) { .checklist.cols { grid-template-columns: 1fr; } }

/* ---------- comparison table (own vs rent vs templates) ---------- */
.compare-wrap { overflow-x: auto; }
.compare { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.compare th, .compare td { padding: 14px 18px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--border); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; background: #F6F2EC; }
.compare thead th.us { color: var(--coral-deep); }
.compare tbody th { font-weight: 600; color: var(--text); width: 30%; }
.compare td.us { background: color-mix(in srgb, var(--coral) 6%, #fff); font-weight: 600; }
.compare .yes { color: var(--sage); font-weight: 700; }
.compare .no { color: var(--text-dim); }

/* ---------- numbered manifesto ---------- */
.manifesto { max-width: 880px; margin: 0 auto; }
.manifesto-item { display: grid; grid-template-columns: 96px 1fr; gap: 26px; padding: 30px 0; border-top: 1px solid var(--border); align-items: start; }
.manifesto-item:last-child { border-bottom: 1px solid var(--border); }
.manifesto-item .m-num { font-family: var(--serif); font-weight: 600; font-size: 44px; color: var(--plum); line-height: 1; }
.manifesto-item h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 8px; }
.manifesto-item p { margin: 0; color: var(--text-dim); font-size: 15.5px; max-width: 58ch; }
@media (max-width: 620px) { .manifesto-item { grid-template-columns: 54px 1fr; gap: 16px; } .manifesto-item .m-num { font-size: 30px; } }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px; }
.step .num { color: var(--coral); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; }
.step h3 { font-size: 16px; margin: 8px 0 6px; }
.step p { color: var(--text-dim); font-size: 14.5px; margin: 0; }

/* ---------- band sections ---------- */
.band { background: #F3EFE8; }
.band-coral { background: color-mix(in srgb, var(--coral) 9%, var(--bg)); }
.band-plum { background: color-mix(in srgb, var(--plum) 8%, var(--bg)); }

/* ---------- chips (shop filters) ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 30px; }
.chip { border: 1px solid var(--border); background: var(--card); color: var(--text-dim); border-radius: 99px; padding: 8px 17px; font-size: 13.5px; font-weight: 500; cursor: pointer; font: inherit; transition: all 0.15s ease; }
.chip:hover { color: var(--text); border-color: #d5cabb; }
.chip.active { border-color: var(--coral); color: #fff; background: var(--coral); }

/* ---------- product page ---------- */
.breadcrumb { font-size: 13px; color: var(--text-dim); padding: 20px 0 4px; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--coral-deep); }
.product-layout { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: start; padding-top: 22px; }
.product-info h1 { font-size: clamp(27px, 3vw, 38px); }
.buy-box { margin-top: 24px; }
.buy-box .btn { width: 100%; margin-top: 12px; }
.format-note { font-size: 13px; color: var(--text-dim); margin: 14px 0 0; text-align: center; }
.product-media { display: flex; flex-direction: column; gap: 26px; }
.what-you-get { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); padding: 22px 24px; }
.what-you-get h2 { font-size: 17px; margin: 0 0 12px; }
.what-you-get ul { list-style: none; margin: 0; padding: 0; }
.what-you-get li { position: relative; padding: 7px 0 7px 26px; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.what-you-get li + li { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.what-you-get li b { color: var(--text); }
.what-you-get li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--sage); font-weight: 700; font-size: 12.5px; }
@media (max-width: 920px) { .product-layout { grid-template-columns: 1fr; gap: 30px; } }

/* You may also like, horizontal scroll row */
.scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(215px, 1fr); gap: 20px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x mandatory; }
.scroll-row .card { scroll-snap-align: start; }

/* Frequently bought together */
.fbt { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px; }
.fbt-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin: 18px 0; }
.fbt-item { text-align: center; }
.fbt-item .cover { border-radius: var(--r-sm); }
.fbt-item .card-shot { border-radius: var(--r-sm); }
.fbt-item h4 { font-weight: 600; font-size: 14.5px; margin: 12px 0 4px; color: var(--text); }
.fbt-item label { font-size: 13.5px; color: var(--text-dim); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.fbt-item input { accent-color: var(--coral); }
.fbt-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 20px; }
.fbt-total strong { font-family: var(--serif); font-weight: 600; font-size: 21px; }

/* ---------- FAQ / details ---------- */
details { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 17px 22px; margin-bottom: 12px; }
details summary { cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--text); }
details p { color: var(--text-dim); margin: 12px 0 0; font-size: 15px; }

/* ---------- forms (contact) ---------- */
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 30px; }
.form-card label { display: block; font-size: 13.5px; font-weight: 600; margin: 16px 0 6px; color: var(--text); }
.form-card input, .form-card textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: 15px; background: var(--bg); color: var(--text); }
.form-card input:focus, .form-card textarea:focus { outline: 2px solid color-mix(in srgb, var(--coral) 25%, #fff); border-color: var(--coral); }
.form-card textarea { min-height: 150px; resize: vertical; }
.form-card .btn { margin-top: 20px; }
.form-note { background: color-mix(in srgb, var(--sage) 14%, #fff); border-radius: var(--r-sm); padding: 14px 18px; margin-top: 18px; font-size: 14.5px; }
.form-error { background: color-mix(in srgb, var(--coral) 12%, #fff); border-radius: var(--r-sm); padding: 14px 18px; margin-top: 18px; font-size: 14.5px; color: var(--coral-deep); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- free tools ---------- */
.tool { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 30px; margin-bottom: 26px; }
.tool h2 { font-size: 26px; }
.tool label { display: block; font-size: 13.5px; font-weight: 600; margin: 14px 0 5px; color: var(--text); }
.tool input { width: 100%; max-width: 320px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; background: var(--bg); }
.tool input:focus { outline: 2px solid color-mix(in srgb, var(--coral) 25%, #fff); border-color: var(--coral); }
.tool .result { background: color-mix(in srgb, var(--sage) 13%, #fff); border-radius: var(--r-sm); padding: 16px 20px; margin-top: 18px; }
.tool .result strong { color: var(--text); }
.tool table { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 14.5px; }
.tool th, .tool td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.debt-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.debt-row input { max-width: 150px; }
@media (max-width: 600px) { .debt-row input { flex: 1 1 calc(50% - 5px); max-width: none; min-width: 0; } }

/* ---------- footer (deep charcoal bookend) ---------- */
#site-footer { background: var(--charcoal); color: #CFC9C2; padding: 60px 0 30px; margin-top: 72px; }
#site-footer .logo { color: #F5F1EA; }
#site-footer .logo:hover { color: var(--coral); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: #9C958D; font-weight: 600; }
.footer-grid p { color: #B4ADA5; font-size: 14px; }
.footer-grid a { display: block; color: #CFC9C2; font-size: 14px; padding: 4px 0; }
.footer-grid a:hover { color: var(--coral); }
.footer-bottom { border-top: 1px solid rgba(231, 224, 216, 0.16); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #9C958D; }
.footer-bottom a { color: #CFC9C2; margin-left: 18px; }
.footer-bottom a:hover { color: var(--coral); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- success page ---------- */
.center-card { max-width: 560px; margin: 70px auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 42px; text-align: center; box-shadow: var(--shadow); }
.center-card .big-emoji { font-size: 44px; }

/* ---------- prose pages ---------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 42px; }

/* ---------- tools index + tool pages ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.tool-card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px; color: var(--text); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tool-card .t-ico { font-size: 28px; line-height: 1; }
.tool-card h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 4px 0 0; line-height: 1.2; }
.tool-card p { margin: 0; color: var(--text-dim); font-size: 14.5px; }
.tool-card .t-go { margin-top: auto; padding-top: 10px; color: var(--coral-deep); font-weight: 600; font-size: 14px; }
.tool-page { max-width: 860px; }
.tool-page .prose h2 { font-size: 26px; margin-top: 40px; }
.tool-page .prose h3 { font-size: 17px; margin-top: 26px; }
.tool-page .prose p, .tool-page .prose li { color: #3d3935; font-size: 16px; line-height: 1.65; }
.tool-page .prose li { margin: 6px 0; }
.tool-page .prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.tool-page .prose th, .tool-page .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tool-page .prose th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.tool-page .faq { margin-top: 10px; }
.more-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.more-tools a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px 16px; color: var(--text); font-weight: 600; font-size: 14.5px; }
.more-tools a:hover { border-color: var(--coral); color: var(--coral-deep); }

/* ---------- blog ---------- */
.post { display: grid; grid-template-columns: minmax(0, 1fr) 272px; column-gap: 56px; align-items: start; max-width: 1060px; padding-top: 10px; }
.post > * { grid-column: 1; min-width: 0; }
.post-toc { grid-column: 2; grid-row: 1 / span 80; position: sticky; top: 92px; align-self: start; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 20px; }
.post-toc details { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.post-toc summary { list-style: none; cursor: default; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin: 0 0 8px; }
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc ol { list-style: none; margin: 0; padding: 0; }
.post-toc li a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--border); color: var(--text-dim); font-size: 14px; line-height: 1.4; }
.post-toc li a:hover { color: var(--text); }
.post-toc li a.active { color: var(--coral-deep); border-left-color: var(--coral); font-weight: 600; }
.post-body h2, .post-body h3 { scroll-margin-top: 96px; }
@media (max-width: 1000px) {
  .post { display: block; }
  .post-toc { position: static; margin: 0 0 28px; }
  .post-toc summary { cursor: pointer; margin: 0; }
  .post-toc summary::after { content: " ▾"; }
  .post-toc details[open] summary { margin-bottom: 8px; }
  .post-toc details[open] summary::after { content: " ▴"; }
}
.post h1 { font-size: clamp(32px, 4vw, 46px); }
.post-meta { color: var(--text-dim); font-size: 14px; margin: 0 0 28px; }
.post-body { font-size: 17px; line-height: 1.7; }
.post-body h2 { font-size: 27px; margin-top: 44px; }
.post-body h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin-top: 30px; }
.post-body p, .post-body li { color: #3d3935; }
.post-body li { margin: 6px 0; }
.post-body blockquote { margin: 26px 0; padding: 16px 22px; border-left: 3px solid var(--coral); background: color-mix(in srgb, var(--coral) 6%, #fff); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.post-body blockquote p { margin: 0; }
.post-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.post-body th, .post-body td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.post-body th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.post-body code { background: #F3EFE8; padding: 2px 6px; border-radius: 5px; font-size: 0.92em; }
.post-body hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
.post-body img { max-width: 100%; border-radius: var(--r-card); border: 1px solid var(--border); }
.post-app { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; margin: 44px 0 0; }
.post-app img { display: block; width: 100%; border-radius: var(--r-sm); border: 1px solid var(--border); }
.post-app h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 6px; }
.post-app h3 a { color: var(--text); }
.post-app p { margin: 0 0 12px; color: var(--text-dim); font-size: 14.5px; }
.post-app .price { justify-content: flex-start; margin-bottom: 14px; }
.post-related { margin-top: 44px; }
.post-related h2 { font-size: 22px; }
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; color: var(--text); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--border); }
.post-card > div { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.post-card-cat { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); font-weight: 600; }
.post-card h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; margin: 0; }
.post-card p { margin: 0; color: var(--text-dim); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-meta { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--text-dim); }
.blog-hub-head { max-width: 760px; }
.blog-cat { padding: 34px 0 6px; }
.blog-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.blog-cat-head h2 { margin: 0; font-size: 28px; }
.blog-cat-head p { margin: 0; color: var(--text-dim); }
.read-guide { display: flex; gap: 14px; align-items: center; background: color-mix(in srgb, var(--plum) 8%, #fff); border: 1px solid color-mix(in srgb, var(--plum) 25%, var(--border)); border-radius: var(--r-card); padding: 14px 18px; margin-top: 22px; color: var(--text); }
.read-guide:hover { border-color: var(--plum); }
.read-guide .rg-ico { font-size: 22px; }
.read-guide .rg-title { display: block; font-size: 14.5px; }
.read-guide .rg-sub { display: block; font-size: 13px; color: var(--text-dim); }
@media (max-width: 560px) { .post-app { grid-template-columns: 1fr; } }

/* A call to action with nowhere to go yet: shown, but plainly not ready.
   store.js puts this on the buy buttons while brand.etsyShopUrl is still the
   placeholder, so a visitor is never sent to Etsy's front page by mistake. */
.btn.is-waiting {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}