/* ==========================================================================
   /recommended — the affiliate editorial pages
   --------------------------------------------------------------------------
   Sits on the .tools shell (css/tools.css) for the ivory ground, the
   breadcrumb and the eyebrow, and takes its palette from the same custom
   properties, so a colour changed in Settings changes here too.

   Headings use the site's heading face (Playfair Display, via the
   --font-heading variable the layout sets from Settings) rather than a
   hard-coded Georgia, so the page reads as the same publication as the
   articles and the shop rather than as a widget dropped into it.

   Hand-written rather than Tailwind utilities, following css/hub.css and
   css/tools.css: css/app.css is a compiled build, and a class that does not
   exist until somebody re-runs it is a class that ships broken.

   Class prefix is `rec-`, not the product's name. The controller renders
   every recommendation page through one template; a stylesheet named after
   the first product would be the caffeine.css mistake again.
   ========================================================================== */

/* --- Making the sticky rail actually stick --------------------------------
   Three ancestors clip horizontal overflow with `overflow-x: hidden`: html
   and body (css/app.css, for the decorative blobs) and the .tools shell. A
   hidden overflow makes a box a scroll container, and a sticky element
   sticks to its nearest scrolling ancestor rather than the viewport. None
   of those boxes scrolls — html does — so the rail had nothing to stick
   inside and simply scrolled away; it never held position.

   `clip` clips identically without creating a scroll container. The body
   rule names the utility class the layout puts on the tag, because an
   element selector cannot outrank it. article.php carries the same fix for
   the same reason. Scoped to this page by the `.rec` descendant, so no other
   template's layout changes. */
html:has(main.rec) { overflow-x: clip; }
body.overflow-x-hidden:has(main.rec) { overflow-x: clip; }
main.tools.rec { overflow-x: clip; }

.rec {
  --rec-pro:  #4F7A4A;   /* a green that sits with the sage accent */
  --rec-con:  #A4553A;   /* the terracotta, darkened for text on ivory */
  --rec-pro-bg: rgba(102, 112, 81, 0.08);
  --rec-con-bg: rgba(196, 123, 85, 0.08);
  --rec-note-bg: rgba(111, 130, 155, 0.08);
  --rec-shadow: 0 10px 40px rgba(7, 27, 69, 0.06);
}

/* --- Layout ------------------------------------------------------------- */

/* Three grid items: the hero, the reading column and the rail. On a wide
   screen the rail spans both rows, so the offer card and the contents list
   sit beside the headline rather than a screen below it. */
.rec-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  grid-template-areas: "hero" "rail" "main";
}

.rec-hero { grid-area: hero; }
.rec-rail { grid-area: rail; min-width: 0; }
.rec-main { grid-area: main; max-width: 46rem; min-width: 0; }

@media (min-width: 1000px) {
  .rec-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    grid-template-areas: "hero rail" "main rail";
    row-gap: clamp(1rem, 2vw, 1.5rem);
  }
  .rec-rail { align-self: stretch; }
  /* Sticky on the inner wrapper rather than the grid item: a grid item that
     spans two rows is as tall as both, and an element cannot stick inside
     its own height. Allowed to scroll within itself because the card plus a
     thirteen-entry contents list is taller than a laptop viewport, and a
     sticky column taller than the screen cuts off its own bottom. */
  .rec-rail__inner {
    position: sticky;
    top: 6.5rem;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room for the card's shadow, which overflow would otherwise clip. */
    margin: -1rem;
    padding: 1rem;
    /* No scrollbar: it read as a broken panel beside the offer card. The
       wheel and the trackpad still scroll it, and the fade below says there
       is more. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .rec-rail__inner::-webkit-scrollbar { display: none; }
  /* A soft fade at the bottom edge while there is more below, lifted by the
     script once the reader has reached the end so the last entry is never
     left half-visible. */
  .rec-rail__inner[data-more] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent);
  }
  .rec-offer-foot { display: none; }
}

@media (max-width: 999px) {
  /* The rail's offer is hidden here and the foot copy — plus the bottom bar
     once the reader is under way — shows instead, so a phone reader is not
     met by a button before the review has said anything. The contents list
     stays between the headline and the verdict. */
  .rec-rail .rec-offer { display: none; }
}

/* --- Hero --------------------------------------------------------------- */

.rec-hero {
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.rec-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--tools-navy);
}

.rec-lede {
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--tools-secondary);
}

/* Who checked it, and the four facts a reader weighs first. */
.rec-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
}

.rec-byline__who {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

.rec-byline__who img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tools-surface);
  box-shadow: 0 0 0 1px var(--tools-border);
}

.rec-byline__who span { display: flex; flex-direction: column; line-height: 1.25; }
.rec-byline__who small {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tools-gold);
}
.rec-byline__who b { font-size: .98rem; color: var(--tools-navy); }
.rec-byline__who em { font-style: normal; font-size: .8rem; color: var(--tools-secondary); }
a.rec-byline__who:hover b { color: var(--tools-terra); }

.rec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec-meta li { display: flex; flex-direction: column; line-height: 1.25; }
.rec-meta small {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tools-secondary);
}
.rec-meta b { font-size: .95rem; color: var(--tools-navy); }

.rec-disclosure {
  margin: 1rem 0 0;
  font-size: .82rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--tools-secondary);
}
.rec-disclosure--tight { margin-top: .75rem; }

/* --- Sections ----------------------------------------------------------- */

.rec-section { margin-bottom: clamp(2rem, 4vw, 3rem); scroll-margin-top: 6rem; }

.rec-section h2 {
  margin: 0 0 1rem;
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tools-navy);
}

.rec-section p {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--tools-secondary);
}
.rec-section p:last-child { margin-bottom: 0; }
.rec-section a { color: var(--tools-dusk); text-decoration: underline; text-underline-offset: 2px; }
.rec-section a:hover { color: var(--tools-terra); }

.rec-h3 {
  margin: 1.5rem 0 .75rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tools-navy);
}
.rec-h3:first-of-type { margin-top: 0; }
.rec-h3--pro { color: var(--rec-pro); }
.rec-h3--con { color: var(--rec-con); }

.rec-note {
  padding: .85rem 1.1rem;
  background: var(--rec-note-bg);
  border-radius: 10px;
  font-size: .92rem !important;
  line-height: 1.6 !important;
}

/* The answer, before the argument. */
.rec-verdict {
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-left: 4px solid var(--tools-terra);
  border-radius: var(--tools-radius);
  box-shadow: var(--rec-shadow);
}
.rec-verdict h2 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); }
.rec-verdict p { font-size: 1.08rem; color: var(--tools-navy); }

/* The facts a searcher wants in one screen. */
.rec-glance__grid {
  display: grid;
  margin: 0;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
  overflow: hidden;
}

.rec-glance__grid > div {
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--tools-border);
}
.rec-glance__grid > div:last-child { border-bottom: 0; }

/* Two columns, ruled between and below, with no rule under the last row —
   an odd number of facts leaves the final cell alone rather than beside a
   blank one, which the ruled-background trick rendered as a beige block. */
@media (min-width: 40rem) {
  .rec-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-glance__grid > div:nth-child(odd) { border-right: 1px solid var(--tools-border); }
  .rec-glance__grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  /* An odd number of facts: the last one takes the whole row rather than
     sitting beside an empty ruled cell. */
  .rec-glance__grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}
.rec-glance__grid dt {
  margin: 0 0 .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tools-gold);
}
.rec-glance__grid dd {
  margin: 0;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--tools-navy);
}
.rec-glance__grid dd small { display: block; font-size: .78rem; color: var(--tools-secondary); }

/* --- Lists -------------------------------------------------------------- */

.rec-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.rec-list:last-child { margin-bottom: 0; }

.rec-list li {
  position: relative;
  padding: .45rem 0 .45rem 1.85rem;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--tools-secondary);
}

.rec-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .95rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tools-gold);
}

/* Pros and cons carry their own marks so a reader scanning one column does
   not need the heading to know which side it is on. */
.rec-list--pro li::before,
.rec-list--con li::before,
.rec-list--suit li::before,
.rec-list--clinician li::before {
  top: .7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

.rec-list--pro li::before,
.rec-list--suit li::before {
  background-color: var(--rec-pro-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F7A4A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.rec-list--con li::before,
.rec-list--clinician li::before {
  background-color: var(--rec-con-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4553A' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.rec-list--clinician li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4553A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5h.01'/%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/svg%3E");
}

/* The label, set as a panel: it is the one list on the page that is a
   quotation of a document rather than our own words. */
.rec-label {
  padding: 1rem 1.25rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
}
.rec-list--label li { font-size: .98rem; border-bottom: 1px solid var(--tools-border); }
.rec-list--label li:last-child { border-bottom: 0; }
.rec-list--label li::before { background: var(--tools-dusk); }

.rec-list--claim li::before { background: var(--tools-dusk); }

/* --- Quote -------------------------------------------------------------- */

.rec-quote {
  margin: 0 0 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--tools-surface);
  border-left: 3px solid var(--tools-gold);
  border-radius: 0 12px 12px 0;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--tools-navy);
}

/* --- Paired cards (pros/limitations, suits/ask first) -------------------- */

.rec-pair {
  display: grid;
  gap: var(--tools-gap);
}
@media (min-width: 46rem) { .rec-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rec-card {
  padding: 1.25rem 1.35rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-top-width: 4px;
  border-radius: var(--tools-radius);
}
.rec-card h3 {
  margin: 0 0 .75rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tools-navy);
}
.rec-card .rec-list li { font-size: .97rem; }
.rec-card--pro,  .rec-card--suit      { border-top-color: var(--rec-pro); }
.rec-card--con,  .rec-card--clinician { border-top-color: var(--rec-con); }

/* --- Caution ------------------------------------------------------------ */

.rec-caution {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--rec-con-bg);
  border: 1px solid rgba(196, 123, 85, 0.35);
  border-radius: var(--tools-radius);
}
.rec-caution__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tools-surface);
  color: var(--rec-con);
}
.rec-caution h2 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); }
.rec-caution p  { font-size: 1rem; color: var(--tools-navy); }

/* --- Facts -------------------------------------------------------------- */

.rec-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .75rem 1.5rem;
  margin: 0 0 1.25rem;
  font-size: 1rem;
}
.rec-facts dt { font-weight: 700; color: var(--tools-navy); }
.rec-facts dd { margin: 0; line-height: 1.6; color: var(--tools-secondary); }
@media (max-width: 28rem) {
  .rec-facts { grid-template-columns: 1fr; gap: .25rem; }
  .rec-facts dd { margin-bottom: .75rem; }
}

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

.rec-faq {
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
  background: var(--tools-surface);
  overflow: hidden;
}
.rec-faq__item + .rec-faq__item { border-top: 1px solid var(--tools-border); }

.rec-faq__item summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}
.rec-faq__item summary::-webkit-details-marker { display: none; }
.rec-faq__item summary h3 {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tools-navy);
}
.rec-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--tools-gold);
  transition: transform .2s ease;
}
.rec-faq__item[open] summary::after { content: '−'; }
.rec-faq__item summary:hover h3 { color: var(--tools-terra); }
.rec-faq__item summary:focus-visible { outline: 3px solid var(--tools-dusk); outline-offset: -3px; }

.rec-faq__body { padding: 0 1.25rem 1.25rem; }
.rec-faq__body p { font-size: .98rem; }

/* --- Method / share / next ---------------------------------------------- */

.rec-method p { font-size: .98rem; }

.rec-share {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: 1.25rem 1.35rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
}
.rec-share h2 {
  margin: 0 0 .25rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.15rem;
  color: var(--tools-navy);
}
.rec-share p { margin: 0 0 1rem; font-size: .92rem; color: var(--tools-secondary); }
.rec-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rec-share__btn {
  display: inline-block;
  padding: .5rem .95rem;
  border: 1px solid var(--tools-border);
  border-radius: 999px;
  background: var(--tools-ivory);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tools-navy);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.rec-share__btn:hover { border-color: var(--tools-terra); color: var(--tools-terra); }
.rec-share__btn[data-copied] { border-color: var(--rec-pro); color: var(--rec-pro); }

.rec-next { margin-bottom: clamp(2rem, 4vw, 3rem); }
.rec-next h2 {
  margin: 0 0 .5rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  color: var(--tools-navy);
}
.rec-next > p { margin: 0 0 1rem; font-size: .98rem; line-height: 1.65; color: var(--tools-secondary); }
.rec-next__list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rec-next__list a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.15rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.rec-next__list a:hover { border-color: var(--tools-dusk); }
@media (prefers-reduced-motion: no-preference) { .rec-next__list a:hover { transform: translateY(-2px); } }
.rec-next__list b { font-size: 1rem; color: var(--tools-navy); }
.rec-next__list span { font-size: .88rem; line-height: 1.5; color: var(--tools-secondary); }

/* --- Offer card --------------------------------------------------------- */

.rec-offer {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
  box-shadow: var(--rec-shadow);
}

.rec-offer__eyebrow {
  margin: 0 0 .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tools-gold);
}

.rec-offer__title {
  margin: 0 0 .75rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tools-navy);
}

.rec-offer__price { margin: 0 0 .75rem; line-height: 1; }
.rec-offer__price span {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tools-navy);
}
.rec-offer__price small {
  display: block;
  margin-top: .4rem;
  font-size: .74rem;
  color: var(--tools-secondary);
}

.rec-offer__facts {
  display: grid;
  gap: .5rem;
  margin: 0 0 .25rem;
  padding: 0;
  list-style: none;
}
.rec-offer__facts li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--tools-secondary);
}
.rec-offer__facts svg { flex: none; margin-top: .15rem; color: var(--rec-pro); }
.rec-offer__more {
  margin-left: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tools-dusk);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.rec-offer__more:hover { color: var(--tools-terra); }

/* The editorial score, drawn as stars only when somebody entered one. */
.rec-offer__score {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0 0 .75rem;
  line-height: 1;
}
.rec-offer__score b { font-size: 1.05rem; color: var(--tools-navy); }
.rec-offer__score small { font-size: .74rem; color: var(--tools-secondary); }
.rec-stars {
  --rec-score: 0%;
  position: relative;
  display: inline-block;
  width: 5.2em;
  height: 1em;
  font-size: .95rem;
  align-self: center;
  background: var(--tools-border);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.6 7 .8-5.2 4.9 1.4 7L12 17.8 5.8 21.3l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E") 0 0 / 1.04em 1em repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.6 7 .8-5.2 4.9 1.4 7L12 17.8 5.8 21.3l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E") 0 0 / 1.04em 1em repeat-x;
}
.rec-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--rec-score);
  background: var(--tools-gold);
}

.rec-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin: 1rem 0 .85rem;
  padding: .9rem 1.25rem;
  background: var(--tools-terra);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .2s ease, transform .2s ease;
}
.rec-btn:hover { background: var(--tools-navy); color: #fff; }
.rec-btn:focus-visible { outline: 3px solid var(--tools-dusk); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .rec-btn:hover { transform: translateY(-2px); } }

.rec-offer__note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--tools-secondary);
}

/* --- Inline call to action (under the verdict) --------------------------- */

.rec-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  margin: -1rem 0 clamp(2rem, 4vw, 3rem);
  padding: .9rem 1.1rem .9rem 1.35rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: 14px;
}
.rec-cta__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rec-cta__text b { font-size: .98rem; color: var(--tools-navy); }
.rec-cta__text span { font-size: .84rem; color: var(--tools-secondary); }
.rec-cta__text a { color: var(--tools-dusk); text-decoration: underline; text-underline-offset: 2px; }
.rec-cta__text a:hover { color: var(--tools-terra); }

.rec-btn--slim {
  width: auto;
  margin: 0;
  padding: .7rem 1.1rem;
  font-size: .92rem;
}
@media (max-width: 30rem) {
  .rec-btn--slim { width: 100%; }
}

/* --- Phone bar ----------------------------------------------------------- */

/* Fixed to the bottom edge on narrow screens only. The script shows it once
   the headline has scrolled away and hides it again at the foot card; the
   [hidden] attribute does the rest, and the reset in the layout makes that
   attribute win over this display rule. */
.rec-bar {
  display: none;
}
@media (max-width: 999px) {
  .rec-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem max(1rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: rgba(255, 253, 249, 0.96);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-top: 1px solid var(--tools-border);
    box-shadow: 0 -8px 30px rgba(7, 27, 69, 0.08);
  }
  .rec-bar[hidden] { display: none; }
}
.rec-bar__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; line-height: 1.2; }
.rec-bar__text b { font-size: .95rem; color: var(--tools-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-bar__text span { font-size: .74rem; color: var(--tools-secondary); }
.rec-btn--bar {
  flex: none;
  width: auto;
  margin: 0;
  padding: .65rem 1.05rem;
  font-size: .9rem;
}
@media (prefers-reduced-motion: reduce) { .rec-bar { transition: none; } }

/* --- Contents ----------------------------------------------------------- */

.rec-toc {
  padding: 1.25rem 1.35rem;
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
}
.rec-toc__fold summary {
  position: relative;
  cursor: pointer;
  list-style: none;
}
.rec-toc__fold summary::-webkit-details-marker { display: none; }
.rec-toc__fold summary::after {
  content: '';
  position: absolute;
  right: .25rem;
  top: .15rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tools-gold);
  border-bottom: 2px solid var(--tools-gold);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.rec-toc__fold[open] summary::after { transform: rotate(225deg); top: .35rem; }
.rec-toc__fold summary:focus-visible { outline: 3px solid var(--tools-dusk); outline-offset: 2px; border-radius: 6px; }

.rec-toc h2 {
  margin: 0;
  padding-bottom: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tools-gold);
}
.rec-toc__fold[open] h2 { margin-bottom: .75rem; border-bottom: 1px solid var(--tools-border); }
.rec-toc__fold:not([open]) h2 { padding-bottom: 0; }
.rec-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rec-toc;
}
.rec-toc li { counter-increment: rec-toc; }
.rec-toc a {
  display: flex;
  gap: .6rem;
  padding: .38rem 0 .38rem .5rem;
  border-left: 2px solid transparent;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--tools-dusk);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.rec-toc a::before {
  content: counter(rec-toc, decimal-leading-zero);
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--tools-gold);
  line-height: 1.7;
}
.rec-toc a:hover { color: var(--tools-terra); }
.rec-toc a[aria-current="true"] { border-left-color: var(--tools-terra); color: var(--tools-navy); font-weight: 600; }

/* --- Holding / stale ---------------------------------------------------- */

.rec-holding {
  max-width: 46rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--tools-surface);
  border: 1px solid var(--tools-border);
  border-radius: var(--tools-radius);
}

.rec-stale {
  margin: 0 0 1.5rem;
  padding: .85rem 1.1rem;
  background: rgba(185, 154, 94, 0.12);
  border: 1px solid rgba(185, 154, 94, 0.4);
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--tools-navy);
}

/* --- Legal -------------------------------------------------------------- */

.rec-legal {
  max-width: 46rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--tools-border);
}
.rec-legal h2 {
  margin: 0 0 .75rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.15rem;
  color: var(--tools-navy);
}
.rec-legal p { margin: 0 0 .75rem; font-size: .88rem; line-height: 1.6; color: var(--tools-secondary); }
.rec-verified {
  margin-top: 1.25rem !important;
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tools-dusk) !important;
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .rec-rail, .rec-share, .rec-offer-foot, .rec-next, .rec-cta, .rec-bar { display: none !important; }
  .rec-layout { grid-template-areas: "hero" "main"; grid-template-columns: 1fr; }
  .rec-main { max-width: none; }
}