/* SOUL, sage glass for every page except the home page (home-sage.css) and the journal index (journal-sage.css).
   Same Cloud Cushions treatment: sage ground, cream glass with a white edge, green buttons, round shapes. Fonts and markup are unchanged. */
body {
  --porcelain: #e8eee3;
  --ink: #283e32;
  --ink-2: #3d5345;
  --muted: #536557;
  --accent: #3e614d;
  --accent-soft: #d8e4d1;
  --hair: rgba(62, 97, 77, .15);
  --surface: #f3f6ed;
  --surface-2: #eef3e8;
  --s-glass: rgba(250, 254, 245, .7);
  --s-glass-x: rgba(250, 254, 245, .86);
  --s-rim: #fff;
  --s-tile: rgba(182, 207, 163, .35);
  --s-hi: inset 0 2px 4px rgba(255, 255, 255, .85);
  --s-lift: 0 18px 35px -24px rgba(91, 122, 71, .5);
  background:
    radial-gradient(ellipse at 0 20%, #d5e6c9, transparent 55%),
    radial-gradient(ellipse at 100% 85%, #dbe8d1, transparent 50%),
    #e9f0e3;
}
body::before { display: none; }

/* glass surfaces */
body :is(.hdr, .post.mh .post-body, .partner, .crit-card, .hub-card, .pick, .takeaway,
  .author, .contact-form, .table-scroll, .promise, .note, .verdict, .studio, .voice, .pc-col, .empty,
  .band-in, .ftr > .wrap, .glass, .modal-card, .faq-item) {
  background: var(--s-glass);
  border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15);
  backdrop-filter: blur(25px) saturate(1.15);
}
body .glass::after { display: none; }

/* header */
body .hdr { padding: .65rem .8rem .65rem 1.6rem; }
body .mark { color: var(--ink); }
body .nav :is(a, button) { color: var(--ink-2); }
body .nav a[aria-current="page"] { color: var(--accent); }
body .nav-menu { background: #f1f6ed; border-color: var(--s-rim); }
body .hsearch { background: none; border-color: transparent; box-shadow: none; }
body .hsearch input { background: rgba(255,255,255,.5); border: 1.5px solid var(--s-rim); }

/* buttons, labels, text links */
body .btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  box-shadow: 0 5px 18px -10px rgba(43,71,48,.45);
}
body .btn:hover { background: #2f4e3d; border-color: #2f4e3d; transform: none; }
body .btn-ghost, body .btn.btn-ghost {
  background: var(--s-glass);
  border: 1.5px solid var(--s-rim);
  color: var(--ink);
  box-shadow: var(--s-hi);
}
body .btn-ghost:hover { background: #f6faef; color: var(--accent); border-color: var(--s-rim); }
body .eyebrow { text-transform: none; letter-spacing: .035em; font-size: .88rem; font-weight: 500; }
body .eyebrow::before { width: 1.1rem; }
body .tlink, body .mag-link, body .linkish { color: var(--accent); }
body .sec-head .d2, body h1.d1, body .art-h1 { color: var(--ink); }
body :is(a, button, input, select, textarea):focus-visible { outline: 2px solid #31533c; outline-offset: 4px; }

/* page heroes (about, contact, categories, tools): the home page's sage island with a glass card */
body .hero-editorial-frame {
  background: var(--s-tile);
  border: 1.5px solid var(--s-rim);
  border-radius: 48px;
}
body .hero-editorial .portrait { border: 1.5px solid var(--s-rim); border-radius: 48px; }
body .hero-editorial .hero-copy { border-radius: 38px; }

/* article cover: same island, the title panel is glass over the photo edge */
body .art-cover {
  background: var(--s-tile);
  border: 1.5px solid var(--s-rim);
  border-radius: 48px;
}
body .art-cover-photo { border-radius: 48px; }
body .art-cover-panel { border-radius: 38px; }

/* cards */
body .post.mh {
  padding: 18px;
  background: var(--s-tile);
  border: 1.5px solid var(--s-rim);
  border-radius: 48px;
}
body .post.mh .post-img { border-radius: 48px; }
body .post.mh .post-body { padding: 25px; border-radius: 32px; }
body .post.mh .post-meta { text-transform: none; font-size: .75rem; letter-spacing: .03em; }
body :is(.partner, .crit-card, .hub-card, .promise, .note, .verdict, .studio, .voice, .pc-col, .empty, .contact-form, .author, .takeaway, .toc, .table-scroll) { border-radius: 32px; }
body .hub-card { padding: 1.4rem 1.5rem; border-width: 1.5px; }
body .pick { border-radius: 36px; border-color: var(--s-rim); }
body .pick-media, body .partner-img { border-radius: 24px; }
body .faq-item { border-radius: 26px; }
body .author-mark { background: var(--accent); }
body .ctable th, body .ctable td { border-bottom-color: var(--hair); }
body .prose a:not(.btn) { color: var(--accent); }

/* forms and the quiz */
body .field input, body .field select, body .field textarea,
body .capture input {
  background: rgba(255,255,255,.55);
  border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi);
}
body .field input:focus, body .field select:focus, body .field textarea:focus, body .capture input:focus { background: #f8fbf4; border-color: var(--accent); }
body .quiz-opt { background: rgba(251,253,247,.7); border: 1.5px solid var(--s-rim); color: var(--ink); }
body .quiz-opt:hover { border-color: var(--accent); background: #f6faef; }
body .quiz-opt[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* newsletter band and footer */
body .band { position: relative; isolation: isolate; background: #c7d6bf; border-radius: 2.2rem; border: 1px solid var(--s-rim); overflow: hidden; }
body .band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
body .band-in { margin: 1.5rem; border-radius: 1.6rem; padding: 2.2rem; }
body .band .lede { color: var(--ink-2); }
body .ftr { margin-top: 2rem; }
body .ftr > .wrap { border-radius: 2rem; padding: 2.5rem; }
body .ftr .ftr-brand .mark { color: var(--ink); }
body .ftr .disclose { background: transparent; }

@media (max-width: 800px) {
  body .hero-editorial-frame, body .art-cover { border-radius: 36px; }
  body .hero-editorial .portrait, body .art-cover-photo { border-radius: 36px; }
  body .post.mh { padding: 14px; border-radius: 40px; }
  body .post.mh .post-img { border-radius: 40px; }
  body .post.mh .post-body { padding: 20px; border-radius: 28px; }
}
@media (max-width: 560px) {
  body .hdr { padding: .55rem 1rem; }
  body .post.mh { padding: 0 0 14px; border-radius: 36px; }
  body .post.mh .post-img { border-radius: 36px; }
  body .post.mh .post-body { padding: 22px; border-radius: 28px; }
  body .band { display: block; padding: 12rem .7rem .7rem; }
  body .band-in { position: relative; margin: 0; padding: 1.5rem; }
  body .ftr > .wrap { padding: 1.5rem; }
}
/* pill banner hero (about, contact): a wide glass pill, text on the left, one round photo on the right */
body .hero-editorial { padding-block: clamp(1.5rem, 3vw, 2.6rem) .75rem; }
body .hero-editorial-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  min-height: 0;
  padding: clamp(2.2rem, 4.4vw, 3.6rem);
  border-radius: clamp(56px, 7vw, 88px);
  background: var(--s-glass);
  border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15);
  backdrop-filter: blur(25px) saturate(1.15);
}
body .hero-editorial .hero-copy {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  gap: 1.15rem;
}
body .hero-editorial .d1 { letter-spacing: -.035em; max-width: 12ch; }
body .hero-editorial .lede { max-width: 46ch; line-height: 1.7; }
body .hero-editorial .portrait {
  position: relative;
  inset: auto;
  width: clamp(210px, 31vw, 350px);
  height: auto;
  aspect-ratio: 1;
  border: 1.5px solid var(--s-rim);
  border-radius: 50%;
  box-shadow: var(--s-lift);
}
body .hero-editorial .portrait img { height: 100%; aspect-ratio: 1; object-position: 50% 40%; }
body .hero-editorial .portrait figcaption { display: none; }
@media (max-width: 800px) {
  body .hero-editorial-frame {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 1.6rem 1.4rem 2.2rem;
    border-radius: 52px;
  }
  body .hero-editorial .portrait { order: -1; width: min(70%, 260px); height: auto; }
  body .hero-editorial .hero-copy { justify-items: center; }
  body .hero-editorial .d1 { max-width: none; }
  body .hero-editorial .cta-row, body .hero-editorial .capture { justify-content: center; }
}
/* phones: heroes never cover their photo. The text card sits below it, and photo captions are dropped. */
@media (max-width: 800px) {
  body .hero-editorial .portrait figcaption, body .art-cover-photo figcaption { display: none; }
  body .hero-editorial-frame { padding-bottom: .9rem; }
}
/* articles: the pill on a sage island header, contents as pills, one calm column, round at-a-glance facts */
body .art-cover {
  --isl: clamp(14px, 2.4vw, 28px);
  --pad: clamp(30px, 4.4vw, 58px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  min-height: 0;
  padding: calc(var(--isl) + var(--pad));
  border-radius: clamp(56px, 8vw, 104px);
  background: var(--s-tile);
  border: 1.5px solid var(--s-rim);
}
body .art-cover::before {
  content: "";
  position: absolute;
  inset: var(--isl);
  z-index: -1;
  border-radius: clamp(40px, 6vw, 72px);
  background: var(--s-glass);
  border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15);
  backdrop-filter: blur(25px) saturate(1.15);
}
body .art .art-cover .art-cover-photo {
  position: relative;
  inset: auto;
  order: 2;
  width: clamp(190px, 31vw, 340px);
  height: auto;
  margin: 0;
  aspect-ratio: 1;
  border: 1.5px solid var(--s-rim);
  border-radius: 50%;
  box-shadow: var(--s-lift);
}
body .art .art-cover .art-cover-photo img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 40%; }
body .art-cover .art-cover-panel {
  order: 1;
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1rem;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .art-cover .art-h1 { letter-spacing: -.03em; }
body .art-layout, body .art-layout.art-layout-solo { display: block; max-width: 740px; margin-inline: auto; }
body .art-main { max-width: 740px; margin-inline: auto; }
body .art-side { display: block; position: static; max-width: none; margin: 0 0 1.8rem; }
body .art-side .toc { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
body .art-side .toc-h { margin: 0 .5rem 0 0; white-space: nowrap; flex: none; }
body .art-side .toc ol { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
body .art-side .toc li { margin: 0; padding: 0; }
body .art-side .toc li a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.05rem; border-radius: 999px;
  background: var(--s-glass); border: 1.5px solid var(--s-rim); box-shadow: var(--s-hi);
  color: var(--ink); font-size: .85rem; text-decoration: none; transition: background-color .18s ease, color .18s ease;
}
body .art-side .toc li a:hover { background: #f6faef; color: var(--accent); }
.glance { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 2rem; }
.gb {
  --d: clamp(140px, 20vw, 190px);
  display: grid; place-content: center; gap: .25rem; text-align: center; flex: none;
  width: var(--d); height: var(--d); padding: 14px; overflow: hidden; border-radius: 50%;
  background: var(--s-glass); border: 1.5px solid var(--s-rim); box-shadow: var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15); backdrop-filter: blur(25px) saturate(1.15);
}
.gb b { font-family: var(--f-d); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 400; line-height: 1.05; color: var(--ink); }
.gb span { font-size: .8rem; line-height: 1.3; color: var(--muted); max-width: 11ch; margin-inline: auto; }
@media (min-width: 700px) { .glance { gap: 0; } .gb + .gb { margin-left: -20px; } .gb:nth-child(2) { margin-top: 26px; } }
@media (max-width: 800px) {
  body .art-cover { --isl: 12px; --pad: 26px; grid-template-columns: 1fr; justify-items: center; text-align: center; border-radius: 52px; }
  body .art-cover::before { border-radius: 40px; }
  body .art .art-cover .art-cover-photo { order: -1; width: min(66%, 230px); }
  body .art-cover .art-cover-panel { order: 0; justify-items: center; }
  body .art-cover .art-actions { justify-content: center; }
  body .art-layout, body .art-layout.art-layout-solo { max-width: 100%; }
}
@media (max-width: 620px) {
  body .art-side .toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  body .art-side .toc::-webkit-scrollbar { display: none; }
  body .art-side .toc ol { flex-wrap: nowrap; }
  body .art-side .toc li a { white-space: nowrap; }
  .gb { --d: min(42vw, 160px); padding: 12px; } .gb span { font-size: .74rem; } .gb b { font-size: 1.3rem; }
}
/* padding for cards that the old flat design left unboxed: text must never touch a card edge */
body .faq-item { padding: 0 clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: .6rem; border-bottom: 0; }
body .faq-item .faq-q { padding: 1.15rem 0; }
body .faq-item .faq-a { padding: 0 0 1.35rem; max-width: 68ch; font-size: 1rem; line-height: 1.7; }
body .crit-card { padding: clamp(1.5rem, 2.6vw, 2rem); }
body .brand-row { padding: 1rem 1.4rem 1rem 1rem; border-radius: 32px; background: var(--s-glass); border: 1.5px solid var(--s-rim); box-shadow: var(--s-hi), var(--s-lift); }
body .partner-body { padding: 1.1rem 1.4rem 1.4rem; }
body .hub-card { padding: 1.4rem 1.6rem; }
/* guide hubs: the pill header runs full width like the articles, the rest stays a readable column; cover photos always fill their circle */
body .art .art-cover .art-cover-photo img { height: 100%; max-width: none; max-height: none; }
body .art.hub { max-width: 1180px; }
body .art.hub > :not(.art-cover) { max-width: 900px; margin-inline: auto; }
/* text-only headers (tools, 404): the same sage island pill, with a soft sage bubble standing in for the photo */
body .art-head:not(.art-cover-panel), body .nf {
  --isl: clamp(14px, 2.4vw, 28px);
  --pad: clamp(30px, 4.4vw, 58px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1180px;
  margin: .4rem auto 2.4rem;
  padding: calc(var(--isl) + var(--pad));
  padding-right: calc(var(--isl) + var(--pad) + clamp(0px, 24vw, 300px));
  border: 1.5px solid var(--s-rim);
  border-top: 1.5px solid var(--s-rim);
  border-radius: clamp(56px, 8vw, 104px);
  background: var(--s-tile);
  display: grid;
  gap: 1rem;
  justify-items: start;
}
body .art-head:not(.art-cover-panel)::before, body .nf::before {
  content: "";
  position: absolute;
  inset: var(--isl);
  z-index: -2;
  border-radius: clamp(40px, 6vw, 72px);
  background: var(--s-glass);
  border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15);
  backdrop-filter: blur(25px) saturate(1.15);
}
body .art-head:not(.art-cover-panel)::after, body .nf::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: calc(var(--isl) + clamp(28px, 5vw, 70px));
  width: clamp(150px, 22vw, 270px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #f6faef 0, #dce8d3 38%, #b9cdb0 100%);
  border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-lift), 26px -40px 0 -36px #c6d6bd, -46px 54px 0 -52px #c6d6bd;
}
body .art-head:not(.art-cover-panel) .art-h1, body .nf .d1 { max-width: 16ch; }
body .art.tool { max-width: 1180px; }
body .art.tool > :not(.art-head) { max-width: 760px; margin-inline: auto; }
body .nf { margin-top: 1.5rem; }
@media (max-width: 800px) {
  body .art-head:not(.art-cover-panel), body .nf {
    --isl: 12px; --pad: 26px;
    padding: calc(var(--isl) + var(--pad));
    padding-top: calc(var(--isl) + var(--pad) + 120px);
    border-radius: 52px;
    justify-items: center;
    text-align: center;
  }
  body .art-head:not(.art-cover-panel)::before, body .nf::before { border-radius: 40px; }
  body .art-head:not(.art-cover-panel)::after, body .nf::after { top: calc(var(--isl) + 22px); right: 50%; width: 104px; transform: translateX(50%); }
  body .nf .nf-links { justify-content: center; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body :is(.hdr, .post.mh .post-body, .partner, .crit-card, .hub-card, .pick, .takeaway,
    .author, .contact-form, .table-scroll, .promise, .note, .verdict, .studio, .voice, .pc-col, .empty,
    .band-in, .ftr > .wrap, .glass, .modal-card, .faq-item) { background: #f1f6eb; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { animation: none !important; transition: none !important; }
}

/* pill on a sage island: the sage tile is the frame, the glass pill is drawn inside it */
body .hero-editorial-frame {
  --isl: clamp(14px, 2.4vw, 28px);
  --pad: clamp(30px, 4.4vw, 58px);
  position: relative;
  isolation: isolate;
  padding: calc(var(--isl) + var(--pad));
  border-radius: clamp(56px, 8vw, 104px);
  background: var(--s-tile);
  border: 1.5px solid var(--s-rim);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .hero-editorial-frame::before {
  content: "";
  position: absolute;
  inset: var(--isl);
  z-index: -1;
  border-radius: clamp(40px, 6vw, 72px);
  background: var(--s-glass);
  border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15);
  backdrop-filter: blur(25px) saturate(1.15);
}
@media (max-width: 800px) {
  body .hero-editorial-frame { --isl: 12px; --pad: 26px; border-radius: 52px; padding: calc(var(--isl) + var(--pad)); }
  body .hero-editorial-frame::before { border-radius: 40px; }
}

/* phones: no reading text below 12.5px */
@media (max-width: 620px) {
  body :is(.quiz-count, .pick-eyebrow, .aff-mid-tag, .home-strip-item, .home-strip .tlink, .post-meta, .legal-stamp span, .gb span) { font-size: 12.5px; }
  body .gb span { line-height: 1.25; }
}

@media (max-width: 620px) {
  body.t-home .home-start .post-meta, body.t-home .home-strip .tlink, body.t-home .home-strip .home-strip-item, body .tool-link span { font-size: 12.5px; }
}

/* the Pinterest save button does not fit inside round photos */
body :is(.hero-editorial .portrait, .art-cover-photo) .pin-float { display: none; }

/* ===== Shop and edition pages, 2026-10-13: pill bands, round bubbles, a tighter rhythm =====
   Same language as the headers: a sage island holding a cream glass band, round photos, round
   bubbles, one green accent. Sections lose most of their empty air so the page reads as one piece. */
body .ed-sec { padding-block: clamp(1rem, 2.2vw, 1.7rem); }
body .ed-sec .sec-head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

/* round bubbles */
.bubbles { display: flex; flex-wrap: wrap; gap: .65rem; }
.bubble {
  display: grid; place-content: center; gap: .1rem; text-align: center;
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--s-glass); border: 1.5px solid var(--s-rim); box-shadow: var(--s-hi), var(--s-lift);
}
.bubble b { font-family: var(--f-d); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--accent); }
.bubble i { font-style: normal; font-size: .78rem; line-height: 1.2; color: var(--muted); max-width: 9ch; margin-inline: auto; }
.ed-facts { justify-content: center; gap: clamp(.7rem, 1.8vw, 1.3rem); }
.ed-facts .bubble { width: clamp(104px, 12vw, 136px); height: clamp(104px, 12vw, 136px); }
.ed-facts .bubble b { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.bubbles-sm { gap: .5rem; margin: .2rem 0 .3rem; }
.bubbles-sm .bubble { width: 88px; height: 88px; }
.bubbles-sm .bubble b { font-size: 1.35rem; }
.bubbles-sm .bubble i { font-size: .74rem; }

/* sage island holding a glass band */
.ed-island { background: var(--s-tile); border-radius: 100px; padding: clamp(10px, 1.6vw, 16px); }
.ed-island > .glass { border-radius: 86px; }

/* host: a pill band with a round portrait */
body .ed-host {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem); padding: clamp(.9rem, 2vw, 1.3rem) clamp(1.6rem, 4.5vw, 3.6rem) clamp(.9rem, 2vw, 1.3rem) clamp(.9rem, 2vw, 1.3rem);
}
body .ed-host img {
  width: clamp(124px, 15vw, 180px); height: clamp(124px, 15vw, 180px); aspect-ratio: 1;
  object-fit: cover; object-position: 50% 18%; border-radius: 50%; border: 5px solid #fff; box-shadow: var(--s-lift);
}
body .ed-host > div { display: grid; gap: .55rem; }
body .ed-quote { font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.35; max-width: 40ch; }
.ed-host-note { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.ed-host-note a { color: var(--accent); }

/* the files in the kit, as pill rows */
.ed-rows { display: grid; gap: .75rem; }
body .ed-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(1rem, 2.4vw, 1.6rem); padding: .95rem clamp(1.3rem, 3vw, 2.1rem) .95rem .95rem; border-radius: 999px;
}
.ed-dot {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font: 400 1.3rem/1 var(--f-d); box-shadow: 0 6px 14px -8px rgba(43,71,48,.6);
}
.ed-row h3 { font-family: var(--f-d); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .15rem; }
.ed-row p { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--ink-2); }
.ed-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.ed-meta span { padding: .2rem .75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; white-space: nowrap; }

/* chapter chips */
.ed-chapters { margin-top: 1rem; }
.ed-chapters > .glass { padding: 1.25rem clamp(1.2rem, 3vw, 2rem) 1.4rem; display: grid; gap: .85rem; border-radius: 86px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ed-chip {
  display: inline-flex; align-items: center; gap: .55rem; padding: .3rem 1rem .3rem .3rem; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1.5px solid #fff; font-size: .92rem; color: var(--ink-2);
}
.ed-chip b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 400 .85rem/1 var(--f-d); }

/* app features */
.ed-feats { --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
.ed-feats > .ed-feat { flex: 0 0 calc((100% - (var(--cols) - 1) * .85rem) / var(--cols)); min-width: 0; }
@media (max-width: 900px) { .ed-feats > .ed-feat { flex-basis: calc((100% - .85rem) / 2); } }
@media (max-width: 560px) { .ed-feats > .ed-feat { flex-basis: 100%; } }
body .ed-feat { border-radius: 30px; padding: 1.15rem 1.3rem 1.25rem; display: grid; gap: .3rem; align-content: start; }
.ed-pip { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); margin: .15rem 0 .25rem .2rem; }
.ed-feat h3 { font-family: var(--f-d); font-weight: 400; font-size: 1.2rem; line-height: 1.2; margin: .3rem 0 0; }
.ed-feat p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }

/* real pages strip */
.ed-pages { margin: 0; }
.ed-pages > .glass { padding: clamp(.6rem, 1.4vw, 1rem); display: grid; gap: .6rem; border-radius: 40px; }
.ed-pages img { width: 100%; height: auto; border-radius: 28px; display: block; }
.ed-pages figcaption { padding: 0 .7rem .3rem; font-size: .9rem; color: var(--muted); }
.ed-island.ed-pages { border-radius: 52px; }

/* outcomes, fit panels and the closing promise */
body .ed-tile { border-radius: 34px; padding: 1.2rem 1.4rem; }
body .ed-fit > div { border-radius: 34px; padding: 1.4rem 1.6rem; }
body .ed-promise {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.8rem, 4.5vw, 3.4rem);
}
body .ed-promise .d2 { color: #fff; }
body .ed-promise p { color: rgba(255,255,255,.85); }
body .ed-promise .btn, body .ed-promise .btn.payhip-buy-button { background: #fff; color: var(--accent); border-color: #fff; }

/* the shop cards and the "other edition" card: a sage island, a glass band, a round cover */
body :is(#guides, .ed-sec) .pick {
  position: relative; isolation: isolate; display: grid; grid-template-columns: clamp(180px, 23vw, 260px) minmax(0, 1fr);
  align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); min-height: 0; margin: 0 0 1rem;
  padding: calc(14px + clamp(1.1rem, 2.2vw, 1.8rem)); background: var(--s-tile); border: 0; border-radius: 100px;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body :is(#guides, .ed-sec) .pick::before {
  content: ""; position: absolute; inset: 14px; z-index: -1; border-radius: 86px;
  background: var(--s-glass); border: 1.5px solid var(--s-rim); box-shadow: var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15); backdrop-filter: blur(25px) saturate(1.15);
}
body :is(#guides, .ed-sec) .pick-media {
  position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 5px solid #fff; box-shadow: var(--s-lift); max-width: none;
}
body :is(#guides, .ed-sec) .pick-media img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; }
body :is(#guides, .ed-sec) .pick-body { width: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; gap: .65rem; }
body :is(#guides, .ed-sec) .pick .disclose-inline {
  display: inline-block; justify-self: start; margin: .1rem 0 0; padding: .3rem .9rem; border: 0; border-radius: 999px;
  background: var(--accent-soft); font-size: .8rem; line-height: 1.4;
}

@media (max-width: 800px) {
  .ed-island, .ed-island.ed-pages { border-radius: 40px; }
  .ed-island > .glass, body .ed-chapters > .glass { border-radius: 30px; }
  body .ed-host { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.4rem 1.3rem 1.6rem; }
  body .ed-host > div { justify-items: center; }
  body .ed-row { grid-template-columns: auto minmax(0, 1fr); border-radius: 34px; padding: .9rem 1.1rem .9rem .9rem; }
  .ed-meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
  body .ed-promise { border-radius: 38px; }
  body :is(#guides, .ed-sec) .pick { grid-template-columns: 1fr; border-radius: 44px; padding: calc(12px + 1.3rem) calc(12px + 1.1rem) calc(12px + 1.4rem); justify-items: start; }
  body :is(#guides, .ed-sec) .pick::before { inset: 12px; border-radius: 34px; }
  body :is(#guides, .ed-sec) .pick-media { width: min(210px, 62%); height: auto; justify-self: center; }
  .bubbles-sm .bubble { width: 80px; height: 80px; }
}
@media (max-width: 420px) {
  .ed-facts .bubble { width: 92px; height: 92px; }
  .ed-facts .bubble b { font-size: 1.5rem; }
}

@media (max-width: 560px) {
  .bubbles-sm .bubble:nth-child(n+4) { display: none; }
}

/* ===== About and Contact, 2026-10-14 =====
   About: the promise and the three checks are rows of round glass "bubble" icons with centred
   words, the hosts are a wide glass band with two round portraits, and the money note is one green
   band. Contact: the two notes sit side by side as wide bands above a full-width form. */
body .ab-sec, body .ct-sec { padding-block: clamp(1rem, 2.4vw, 1.8rem); }
.ab-island {
  border: 14px solid var(--s-tile); border-radius: 64px;
  background: var(--s-glass) padding-box;
  box-shadow: inset 0 0 0 1.5px var(--s-rim), var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15); backdrop-filter: blur(25px) saturate(1.15);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.1rem, 3vw, 2.4rem) clamp(1.6rem, 3.2vw, 2.4rem);
  display: grid; gap: clamp(1.3rem, 2.6vw, 2rem);
}
.ab-head { display: grid; gap: .3rem; text-align: center; justify-items: center; }
.ab-bubbles { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }
.ab-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-bubbles li { display: grid; justify-items: center; align-content: start; text-align: center; gap: .55rem; min-width: 0; }
.ab-ico {
  width: 78px; height: 78px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: var(--s-glass-x); border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
}
.ab-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ab-q { font-family: var(--f-d); font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: .35rem 0 0; text-wrap: balance; }
.ab-bubbles p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); max-width: 30ch; text-wrap: pretty; }
.ab-3 p { max-width: 34ch; }

body .ab-hosts {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(1.3rem, 3.4vw, 2.8rem); border-radius: 120px;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(2rem, 5vw, 4rem) clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.4rem);
}
.ab-faces { display: flex; }
.ab-faces img {
  width: clamp(120px, 13vw, 160px); height: clamp(120px, 13vw, 160px); border-radius: 50%;
  object-fit: cover; object-position: 50% 40%; border: 5px solid #fff; box-shadow: var(--s-lift);
}
.ab-faces img + img { margin-left: -28px; }
.ab-hosts-text { display: grid; gap: .6rem; max-width: 62ch; }
.ab-hosts-text p, .ab-money p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.ab-hosts-text a { color: var(--accent); }
.ab-money {
  display: grid; gap: .6rem; border-radius: 72px; background: var(--accent); color: #fff;
  padding: clamp(1.6rem, 3.4vw, 2.4rem) clamp(1.8rem, 6vw, 4.6rem);
}
.ab-money .d3 { color: #fff; }
.ab-money p { color: rgba(255, 255, 255, .88); max-width: 72ch; }
.ab-money strong { color: #fff; }

.ct-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
body .ct-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  gap: 1.2rem; border-radius: 48px; padding: 1.3rem 2.2rem 1.5rem 1.3rem;
}
.ct-note .ab-ico { width: 66px; height: 66px; }
.ct-note .ab-ico svg { width: 30px; height: 30px; }
.ct-note > div { display: grid; gap: .55rem; padding-top: .35rem; min-width: 0; }
.ct-note .d3 { margin: 0; }
.ct-note p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
body .ct-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem;
  border-radius: 44px; padding: clamp(1.4rem, 3vw, 2.2rem); max-width: none;
}
.ct-form .field { margin: 0; min-width: 0; }
.ct-form .ct-wide { grid-column: 1 / -1; }
.ct-send { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.ct-send .fineprint { margin: 0; }
.ct-form .said:empty { display: none; }

@media (max-width: 900px) {
  .ab-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.8rem; }
  .ct-notes { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ab-island { border-width: 10px; border-radius: 40px; }
  .ab-3 { grid-template-columns: 1fr; }
  body .ab-hosts { grid-template-columns: 1fr; justify-items: center; text-align: center; border-radius: 40px; padding: 1.4rem 1.3rem 1.6rem; }
  .ab-money { border-radius: 40px; padding: 1.6rem 1.4rem; }
  body .ct-note { border-radius: 36px; padding: 1.1rem 1.3rem 1.3rem 1.1rem; gap: 1rem; }
  .ct-note .ab-ico { width: 54px; height: 54px; }
  .ct-note .ab-ico svg { width: 26px; height: 26px; }
  body .ct-form { grid-template-columns: 1fr; border-radius: 34px; }
}
@media (max-width: 420px) {
  .ab-4 { grid-template-columns: 1fr; }
  .ab-ico { width: 68px; height: 68px; }
}

/* About: the "How we decide" heading sits centred above its three bubbles. */
body .ab-sec .sec-head { max-width: none; margin-inline: auto; text-align: center; justify-items: center; }
body .ab-sec .sec-head .d2 { max-width: 26ch; margin-inline: auto; }

/* ===== Hub pages (Fashion, Jewelry, Beauty, Wellness), 2026-10-14 =====
   Same language as About and Contact: the checks are round glass icon bubbles inside one sage
   island, brand photos are round, the pick and the empty notes are wide rounded islands, and
   the guide cards are soft rounded bands. Scoped to body.t-hub, set in build.py. */
body.t-hub .sec { padding-block: clamp(1.2rem, 2.8vw, 2.2rem); }

/* the checks: bubbles in one island */
body.t-hub .crit {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2rem);
  border: 14px solid var(--s-tile); border-radius: 64px;
  background: var(--s-glass) padding-box;
  box-shadow: inset 0 0 0 1.5px var(--s-rim), var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15); backdrop-filter: blur(25px) saturate(1.15);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.1rem, 3vw, 2.4rem) clamp(1.6rem, 3.2vw, 2.4rem);
}
body.t-hub .crit.crit-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.t-hub .crit .crit-card {
  display: grid; justify-items: center; align-content: start; text-align: center; gap: .55rem;
  padding: 0; min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.t-hub .crit .crit-ico {
  width: 78px; height: 78px; margin: 0; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: var(--s-glass-x); border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
}
body.t-hub .crit .crit-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body.t-hub .crit .crit-q { font-family: var(--f-d); font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: .35rem 0 0; text-wrap: balance; }
body.t-hub .crit .crit-a { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); max-width: 32ch; text-wrap: pretty; }

/* one brand worth a look: a pill band with a round photo */
body.t-hub .brand-row.glass {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(1.1rem, 3vw, 2.2rem); border-radius: 999px;
  padding: 12px clamp(2rem, 5vw, 4rem) 12px 12px;
}
body.t-hub .brand-row > img {
  width: clamp(96px, 10vw, 124px); height: clamp(96px, 10vw, 124px); aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: var(--s-lift);
}
body.t-hub .brand-row-body { display: grid; gap: .3rem; justify-items: start; }

/* our pick: a wide rounded island with a round photo */
body.t-hub .catpick.glass {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(1.4rem, 3.6vw, 3rem); border-radius: 72px;
  border: 14px solid var(--s-tile); background: var(--s-glass) padding-box;
  box-shadow: inset 0 0 0 1.5px var(--s-rim), var(--s-hi), var(--s-lift);
  padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.6rem, 4.4vw, 3.4rem) clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.2rem, 2.6vw, 1.8rem);
}
body.t-hub .catpick-media {
  width: clamp(180px, 22vw, 260px); aspect-ratio: 1; height: auto; max-width: 100%;
  border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: var(--s-lift);
}
body.t-hub .catpick-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
body.t-hub .catpick-body { display: grid; gap: .7rem; justify-items: start; padding: 0; min-width: 0; }
body.t-hub .catpick-body .lede { max-width: 58ch; font-size: .98rem; }

/* "we haven't found one yet": centred, full width */
body.t-hub .empty.glass {
  display: grid; justify-items: center; text-align: center; gap: .7rem; max-width: none;
  border-radius: 64px; border: 14px solid var(--s-tile); background: var(--s-glass) padding-box;
  box-shadow: inset 0 0 0 1.5px var(--s-rim), var(--s-hi), var(--s-lift);
  padding: clamp(1.6rem, 3.4vw, 2.6rem) clamp(1.4rem, 5vw, 4rem);
}
body.t-hub .empty .lede { max-width: 62ch; margin-inline: auto; }

/* brands we trust: rounded cards, round photo on top, centred words */
body.t-hub .partners { gap: 1rem; }
body.t-hub .partners .partner {
  display: grid; grid-template-rows: auto 1fr; justify-items: center; text-align: center;
  gap: .9rem; border-radius: 44px; padding: 16px 18px 22px; overflow: visible;
}
body.t-hub .partner .partner-img {
  display: block; width: min(100%, 168px); aspect-ratio: 1; height: auto; border-radius: 50%; overflow: hidden;
  border: 5px solid #fff; box-shadow: var(--s-lift); margin: 0;
}
body.t-hub .partner .partner-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: 1; }
body.t-hub .partner .partner-body { display: grid; justify-items: center; align-content: start; gap: .45rem; padding: 0; }
body.t-hub .partner .partner-name { font-size: 1.3rem; }
body.t-hub .partner .partner-why { font-size: .9rem; line-height: 1.6; color: var(--muted); max-width: 34ch; text-wrap: pretty; }
body.t-hub .partner .partner-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1rem; margin-top: auto; }
body.t-hub .partner .partner-links .tlink {
  padding: .4rem 1rem; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none;
}

/* complete guides: soft rounded bands */
body.t-hub .hub-cards { gap: 1rem; }
body.t-hub .hub-card {
  display: grid; gap: .45rem; align-content: start; border-radius: 48px;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.5rem, 3.4vw, 2.6rem);
}
body.t-hub .hub-card .eyebrow {
  justify-self: start; padding: .15rem .8rem; border-radius: 999px; background: var(--accent-soft);
}
body.t-hub .hub-card-h { font-size: clamp(1.3rem, 2vw, 1.6rem); text-wrap: balance; }
body.t-hub .hub-card-p { max-width: 60ch; text-wrap: pretty; }

@media (max-width: 900px) {
  body.t-hub .crit.crit-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.8rem; }
}
@media (max-width: 760px) {
  body.t-hub .crit { grid-template-columns: 1fr; border-width: 10px; border-radius: 40px; row-gap: 1.8rem; }
  body.t-hub .brand-row.glass, body.t-hub .catpick.glass {
    grid-template-columns: 1fr; justify-items: center; text-align: center; border-radius: 40px; padding: 1.3rem 1.3rem 1.6rem;
  }
  body.t-hub .catpick.glass { border-width: 10px; }
  body.t-hub .brand-row-body, body.t-hub .catpick-body { justify-items: center; }
  body.t-hub .catpick-body .pick-actions { justify-content: center; }
  body.t-hub .catpick-media { width: min(64%, 220px); }
  body.t-hub .empty.glass { border-width: 10px; border-radius: 40px; }
  body.t-hub .hub-card { border-radius: 36px; }
}
@media (max-width: 480px) {
  body.t-hub .crit.crit-4 { grid-template-columns: 1fr; }
}
body.t-hub .brand-row.glass { max-width: none; width: 100%; }
body.t-hub .hub-cards.hub-cards-1 { grid-template-columns: 1fr; }
body.t-hub .hub-cards-1 .hub-card { border-radius: 999px; padding-inline: clamp(1.8rem, 5vw, 3.6rem); }
@media (max-width: 760px) { body.t-hub .hub-cards-1 .hub-card { border-radius: 36px; padding-inline: 1.4rem; } }
/* brand cards: a short last row sits centred instead of leaving one card alone on the left */
body.t-hub .partners { display: flex; flex-wrap: wrap; justify-content: center; }
body.t-hub .partners > .partner { flex: 0 0 calc((100% - 2rem) / 3); min-width: 0; }
body.t-hub .partners:has(> .partner:nth-child(4):last-child) > .partner { flex-basis: calc((100% - 3rem) / 4); }
@media (max-width: 900px) { body.t-hub .partners > .partner, body.t-hub .partners:has(> .partner:nth-child(4):last-child) > .partner { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 560px) { body.t-hub .partners > .partner, body.t-hub .partners:has(> .partner:nth-child(4):last-child) > .partner { flex-basis: 100%; } }
@media (min-width: 901px) { body.t-hub .partners.partners-7 > .partner { flex-basis: calc((100% - 3rem) / 4); } }

/* ===== Site-wide consistency, 2026-10-14 =====
   The bubble, island and rounded-band language from About, Contact and the hubs, applied to every
   other page that uses the same components: review pages (Beetles, Janet Howard), How we test,
   the editor page, guides, tools and edition pages. `html body` outranks the glass rule above. */

/* checks: round glass icon bubbles inside one sage island */
html body .crit {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2rem);
  border: 14px solid var(--s-tile); border-radius: 64px;
  background: var(--s-glass) padding-box;
  box-shadow: inset 0 0 0 1.5px var(--s-rim), var(--s-hi), var(--s-lift);
  -webkit-backdrop-filter: blur(25px) saturate(1.15); backdrop-filter: blur(25px) saturate(1.15);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.1rem, 3vw, 2.4rem) clamp(1.6rem, 3.2vw, 2.4rem);
}
html body .crit.crit-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body .crit > .crit-card.crit-card.glass, html body .crit > .crit-card.crit-card {
  display: grid; justify-items: center; align-content: start; text-align: center; gap: .55rem;
  padding: 0; min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body .crit .crit-ico {
  width: 78px; height: 78px; margin: 0; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: var(--s-glass-x); border: 1.5px solid var(--s-rim);
  box-shadow: var(--s-hi), var(--s-lift);
}
html body .crit .crit-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
html body .crit .crit-q { font-family: var(--f-d); font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: .35rem 0 0; text-wrap: balance; }
html body .crit .crit-a { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); max-width: 32ch; text-wrap: pretty; }

/* notes and promise panels: full width, soft rounded, text kept to a readable measure */
html body .sec > .note.glass,
html body .sec > .promise.glass {
  max-width: none; width: 100%; border-radius: 48px;
  padding: clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.5rem, 4.4vw, 3.4rem);
  display: grid; gap: .7rem; align-content: start;
}
html body .sec > .note.glass > :is(p, ul, ol),
html body .sec > .promise.glass > :is(p, ul, ol) { max-width: 72ch; margin: 0; }
/* several notes in one section (How we test) sit side by side */
html body .sec:has(> .note.glass ~ .note.glass) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch;
}
html body .sec:has(> .note.glass ~ .note.glass) > :not(.note) { grid-column: 1 / -1; }
html body .sec:has(> .note.glass ~ .note.glass) > .note.glass { border-radius: 40px; padding: 1.5rem 1.7rem 1.7rem; }

/* tool and guide cards everywhere: soft rounded bands */
html body .hub-card { border-radius: 40px; padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.4rem, 3vw, 2.2rem); }
html body .hub-card .eyebrow { justify-self: start; padding: .15rem .8rem; border-radius: 999px; background: var(--accent-soft); }

/* reviews block on edition and review pages: centred, full width */
html body .rv .rv-empty {
  max-width: none; width: 100%; text-align: center; display: grid; justify-items: center; gap: .3rem;
  border-radius: 40px; padding: 1.6rem 1.4rem;
}

/* free tool widgets */
html body :is(.tool, .tool-card, .calc, .tool-box).glass { border-radius: 40px; }

@media (max-width: 900px) {
  html body .crit.crit-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.8rem; }
  html body .sec:has(> .note.glass ~ .note.glass) { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html body .crit { grid-template-columns: 1fr; border-width: 10px; border-radius: 40px; row-gap: 1.8rem; }
  html body .sec > .note.glass, html body .sec > .promise.glass { border-radius: 34px; }
  html body .hub-card { border-radius: 32px; }
}
@media (max-width: 480px) {
  html body .crit.crit-4 { grid-template-columns: 1fr; }
}
html body .tool-box { border-radius: 40px; padding: clamp(1.3rem, 2.6vw, 1.9rem); }
html body .tool-box .tool-out { border-radius: 24px; }
.ab-follow a { display: inline-flex; padding: .1rem .7rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.ab-follow a:hover { background: var(--accent); color: #fff; }

/* Photos inside article prose, 2026-10-16. */
body .prose-fig { margin: 1.8rem 0; padding: 10px; border-radius: 30px; background: var(--s-glass); border: 1.5px solid var(--s-rim); box-shadow: var(--s-hi), var(--s-lift); }
body .prose-fig img { width: 100%; height: auto; display: block; border-radius: 22px; }
body .prose-fig figcaption { padding: .6rem .5rem .2rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { body .prose-fig { max-width: 560px; margin-inline: auto; } }

/* body shape calculator (2026-10-16) */
body .bs-units { display: flex; gap: .4rem; }
body .bs-u { font: inherit; font-size: .88rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--s-rim); background: rgba(255,255,255,.6); color: var(--ink-2); cursor: pointer; }
body .bs-u[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
body .bs-in { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
body .bs-hint { font-weight: 400; font-size: .78rem; color: var(--muted); }
body .bs-nums { font-size: .9rem; color: var(--muted); }
body .bs-shapes { display: grid; gap: 1rem; margin: 1.4rem auto; }
body .bs-shape { border-radius: 1.6rem; padding: clamp(1.2rem, 3vw, 1.8rem); line-height: 1.7; scroll-margin-top: 6rem; }
body .bs-shape h3 { font-family: var(--f-d); font-weight: 400; font-size: 1.6rem; margin: 0 0 .5rem; }
body .bs-shape p { margin: .5rem 0; }
body .bs-shape ul, body .bs-shape ol { margin: .4rem 0 .8rem; padding-left: 1.2rem; display: grid; gap: .3rem; }
body .bs-f-h { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
body .bs-cta { border-radius: 1.6rem; padding: 1.3rem 1.5rem; display: grid; gap: .8rem; justify-items: start; margin: 1.6rem auto; }
body .bs-cta p { margin: 0; line-height: 1.65; }
body .bs-faq { margin: 2rem auto 0; }
body .bs-faq h2 { margin-bottom: 1rem; }

/* in-page signup with instant previews (2026-10-16): Color Studio, body shape calculator, Kibbe */
body .lead-box { display: grid; gap: 1rem 2rem; align-items: center; border-radius: 1.8rem; padding: clamp(1.2rem, 3vw, 1.9rem); margin: 1.6rem auto; text-align: left; }
@media (min-width: 820px) { body .lead-box { grid-template-columns: 1.1fr 1fr; } }
body .lead-copy { display: grid; gap: .4rem; justify-items: start; }
body .lead-copy p { margin: 0; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }
body .lead-h { font-family: var(--f-d); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.15; margin: 0; color: var(--ink); }
body .lead-form { display: grid; gap: .45rem; }
body .lead-form .capture { max-width: none; }
body .lead-form .capture input { flex: 1 1 200px; }
body .lead-form .said a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
body .lead-form .said:empty { display: none; }
body .lead-form .fineprint { margin: 0; }
body .cq-lead[hidden] { display: none; }
body .cq-lead .lead-box { max-width: 760px; }
body .prose .lead-box h3 { margin-top: 0; }