/* Shared customer-facing design system. Loaded after page-specific styles. */
:root {
  --forest: #144833;
  --forest-hover: #285f48;
  --wave-surface: #ffffff;
  --cream: #ffffff;
  --paper: #ffffff;
  --sage: #d8e1d5;
  --sage-light: #e6ebe1;
  --stone: #ffffff;
  --apricot: #fce3ba;
  /* Compatibility aliases for existing page components. */
  --blush: var(--wave-surface);
  --blush-light: var(--stone);
  --yellow: var(--apricot);
  --butter: var(--apricot);
  /* Copper is retired as a color; the name stays for older components. */
  --copper: var(--forest);
  --gold: var(--copper);
  --ink: var(--forest);
  --black: var(--forest);
  --muted: #52635a;
  --line: #dbe3de;
  --cream-2: var(--paper);
  --cream-photo: var(--stone);
  --ink-2: #385343;
  --muted-strong: var(--muted);
  --hair: var(--line);
  --hair-2: var(--line);
  --yellow-text: var(--copper);
  --yellow-dk: var(--forest);
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --display: "Fraunces Refined", Georgia, serif;
  --display-weight: 500;
  --mono: "DM Mono", ui-monospace, monospace;
  --f-body: var(--font);
  --f-heading: var(--display);
  --f-display: var(--display);
  --f-serif: var(--display);
  --f-mono: var(--mono);
  --brand-burst: polygon(50% 0%, 58% 30%, 75% 7%, 72% 35%, 93% 25%, 78% 45%, 100% 50%, 78% 58%, 93% 75%, 68% 69%, 75% 93%, 57% 77%, 50% 100%, 42% 77%, 25% 93%, 31% 68%, 7% 75%, 23% 56%, 0% 50%, 25% 43%, 7% 25%, 31% 30%, 25% 7%, 43% 29%);
  --brand-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 16'%3E%3Cpath d='M2 8Q12 2 22 8T42 8T62 8T82 8' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}

body { background: var(--paper); font-family: var(--font); font-synthesis: none; }
main :is(h1, h2, h3), .signup h2, .site-footer h2 {
  font-family: var(--display);
  font-weight: var(--display-weight, 500);
  letter-spacing: -0.025em;
}
main :is(h1, h2) { text-wrap: balance; }
main h2 { line-height: 1.08; }
/* Small category labels and ingredient data stay crisp and easy to scan. */
main .faq-group-title { font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.desktop-nav a, .header-actions > a, .bag-button {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.055em;
}
.desktop-nav a, .header-actions > a { font-size: 11px; }
.announcement { font: 400 12px/1.5 var(--font); letter-spacing: 0.015em; }
.site-header, .mobile-nav { background: var(--paper); }
.footer-brand img { width: clamp(210px, 24vw, 320px); height: auto; }
.checkout-logo { width: min(224px, 60vw); height: auto; }
.hero, .routine { background: var(--paper); color: var(--forest); }
.story, .formula, .shop, .carry, .pairings, .product, .preorder, .pep-how,
.page-hero, .ea-hero, .lab-hero, .site-footer { background: var(--wave-surface); }
.wave-header { fill: var(--paper); }
.routine > .wave-bottom { fill: var(--stone); }
.story { background: var(--stone); }
[data-page="product"] .story > .wave-bottom { fill: var(--paper); }
.photo-journal { background: var(--paper); }
.site-footer > .wave-top { fill: var(--paper); }
[data-page="article"] .site-footer > .wave-top { fill: var(--cream); }
.pep-how::after { background: var(--paper); }
.pairing-grid article:not(:first-child) { border: 1px solid var(--line); }
.pep-card:nth-child(n), .pep-col:nth-child(n), .pep-find:nth-child(n),
.pep-pair.is-apart, .pep-check.is-skip {
  background: var(--paper);
  border: 1px solid var(--line);
}
.tldr, .article-body blockquote, .journal-hero-art, .journal-story-image {
  background: var(--paper);
}
.product-gallery .gallery-arrow { background: rgb(255 255 255 / 0.9); }
.product-gallery .gallery-arrow:hover { background: var(--paper); }
.cart-line img { background: var(--paper); }

.hero h1 { font-weight: var(--display-weight); letter-spacing: -0.035em; line-height: 0.98; }
.hero #heroTitle { font-weight: 700; }
.hero-sweep-word:nth-child(1) { rotate: -2deg; }
.hero-sweep-word:nth-child(2) { rotate: 1deg; }
.hero-sweep-word:nth-child(3) { rotate: -1deg; }
.hero-copy > p:not(.hero-note) {
  font: 400 clamp(18px, 1.5vw, 22px)/1.5 var(--font);
  letter-spacing: -0.01em;
  max-width: 34ch;
}
.hero::before, .hero::after { background: var(--apricot); opacity: 1; }
.hero-image { background: var(--stone); }
.hero .wave-button { font-weight: 600; }
.hero .wave-button:hover::before, .closing-buy:hover::before { background: var(--forest-hover); }
.ribbon-track { font-family: var(--font); font-size: 14px; }
.routine-steps li > span { background: var(--cream); border: 1px solid rgb(20 72 51 / 0.16); }
.routine .routine-steps li > span {
  background: var(--paper);
  color: var(--forest);
  border-color: var(--forest);
}
.ingredient-panel { background: var(--sage-light); border-radius: 12px; }
.ingredient-panel h3 { font-weight: var(--display-weight); }
.formula-photo .gallery-stage, .product-gallery .gallery-stage { background: var(--stone); }
.formula-photo .gallery-stage img, .product-gallery .gallery-stage img,
.mobile-pack-content img, .product-purchase .mobile-pack-content img,
#formula .pack-option img, #cartUpsell .cart-upgrade img { mix-blend-mode: normal; }
#cartUpsell .cart-upgrade img { background: var(--stone); }

/* Pack tiers as quiet white cards: a hairline, soft corners and a faint
   forest-tinted shadow. The 2-pack, the default everywhere, carries a forest
   edge. Photography stays untinted. */
.pack-grid { gap: 26px; padding-top: 14px; }
.pack-card, .pack-card:nth-child(2), .pack-card:nth-child(3) {
  position: relative;
  overflow: visible;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px 22px 24px;
  box-shadow: 0 1px 2px rgb(20 72 51 / 0.04), 0 22px 44px -32px rgb(20 72 51 / 0.32);
  transition: translate 320ms var(--groove-ease, ease), box-shadow 320ms var(--groove-ease, ease), border-color 320ms;
}
.pack-card:nth-child(2) {
  border-color: var(--forest);
  box-shadow: 0 0 0 0.5px var(--forest), 0 1px 2px rgb(20 72 51 / 0.05), 0 26px 50px -30px rgb(20 72 51 / 0.42);
}
.pack-card > img { mix-blend-mode: normal; border-radius: 14px; }
/* The label now sits on the edge, so the head only needs room for the name
   and one line; the photos still line up across the three cards. */
.pack-card .pack-card-head { min-height: 82px; margin-bottom: 14px; }
@media (hover: hover) and (pointer: fine) {
  .pack-card:hover, .pack-card:nth-child(2):hover {
    rotate: 0deg; translate: 0 -4px;
    box-shadow: 0 1px 2px rgb(20 72 51 / 0.05), 0 30px 56px -30px rgb(20 72 51 / 0.42);
  }
  .pack-card:nth-child(2):hover { box-shadow: 0 0 0 0.5px var(--forest), 0 1px 2px rgb(20 72 51 / 0.05), 0 32px 60px -30px rgb(20 72 51 / 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .pack-card:hover { translate: none; }
}
.pack-card h3 { font-weight: var(--display-weight); letter-spacing: -0.025em; }
.pack-tag, .pack-card:not(:first-child) .pack-tag {
  background: transparent;
  color: var(--copper);
  border: 0;
  rotate: 0deg;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pack-formula-plus { color: var(--copper); }
.pack-card .button:hover { background: var(--forest-hover); color: var(--cream); }
.pairing-grid h3 { font-weight: var(--display-weight); }
#stickyBuy .sticky-product-name { font-weight: var(--display-weight); }
.cart-bundles-head h3 { font: 400 20px/1.2 var(--display); }
.product-title, .page-hero h1 { font-weight: var(--display-weight); letter-spacing: -0.025em; line-height: 1.05; }
.product-sub { font: 400 clamp(17px, 1.5vw, 20px)/1.55 var(--font); }
.product-legend, .product-purchase .mobile-pack-copy strong, .mobile-pack-amount {
  font-family: var(--font);
  font-weight: 600;
}
.page-hero h1 em, .article-body blockquote, .editorial-cta h2 em,
.ea-hero em, .ea-perks h2 em, .ea-how h2 em, .ea-product h2 em,
.lab-hero em { font-family: var(--display); font-weight: var(--display-weight, 500); }
.article-prose p, .article-body p { line-height: 1.75; }
.ea-field:focus-within { box-shadow: 0 0 0 4px rgb(252 227 186 / 0.65); }

/* Small echoes of the wordmark, packaging stamp, and original wave rhythm. */
.heading-accent { font-family: var(--display); font-style: italic; font-weight: var(--display-weight); }
.hero-image {
  outline: 2px solid var(--apricot);
  outline-offset: 8px;
}
.formula-photo .gallery-stage, .product-gallery .gallery-stage {
  outline: 1px solid rgb(20 72 51 / 0.24);
  outline-offset: 6px;
}
.page-hero .article-eyebrow::before, .product-buy .product-eyebrow::before,
.ea-hero .ea-eyebrow::before, .lab-hero .lab-eyebrow::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 9px;
  vertical-align: -1px;
  background: var(--forest);
  clip-path: var(--brand-burst);
  pointer-events: none;
}
.site-footer .signup > h2::before {
  content: "";
  display: block;
  width: 84px;
  height: 16px;
  background: var(--forest);
  -webkit-mask: var(--brand-wave) center / contain no-repeat;
  mask: var(--brand-wave) center / contain no-repeat;
  pointer-events: none;
}
.site-footer .signup > h2::before { margin: 0 auto 24px; opacity: 0.65; }

/* The welcome dialog shares the page typography and palette. */
.wo {
  --wo-forest: var(--forest);
  --wo-muted: var(--muted);
  --wo-cream: var(--cream);
  --wo-paper: var(--paper);
  --wo-blush: var(--wave-surface);
  --wo-apricot: var(--apricot);
  --wo-blush-light: var(--stone);
  --wo-copper: var(--copper);
  --wo-line: var(--line);
  font-family: var(--font);
}
.wo :is(h1, h2, h3), .wo-title { font-family: var(--display); font-weight: var(--display-weight, 500); letter-spacing: -0.025em; }

/* The ads entry uses legacy component tokens but the same brand system. */
body.offer {
  --home-black: var(--forest);
  --home-cream: var(--cream);
  --home-white: var(--paper);
  --home-photo: var(--wave-surface);
  --home-ink: var(--forest);
  --home-muted: var(--muted);
  --home-line: var(--line);
  --home-line-strong: #b9c6b6;
  --home-sage-tint: var(--sage-light);
  --home-yellow: var(--apricot);
  --lp-tint: var(--sage-light);
}
.offer :is(h1, h2, h3) { font-weight: var(--display-weight); letter-spacing: -0.025em; }
.offer .lp-hero { background: var(--wave-surface); }
.offer .lp-close, .offer .lp-media-tint, .offer .lp-chip,
.offer .lp-media-card, .offer .lp-close-card, .offer .lp-line,
.offer .lp-line.is-on, .offer .lp-sticky, .home.offer .nav {
  background: var(--paper);
}
.offer .lp-line.is-on { box-shadow: inset 3px 0 var(--forest); }
.offer .btn-yellow { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.offer .btn-yellow:hover { background: var(--forest-hover); border-color: var(--forest-hover); }

@media (max-width: 760px) {
  .hero-image, .formula-photo .gallery-stage, .product-gallery .gallery-stage { outline-offset: 4px; }
  .footer-brand { gap: 16px; }
  .footer-brand img { width: clamp(160px, 42vw, 190px); }
  .hero-copy > p:not(.hero-note) { max-width: 30ch; font-size: 18px; line-height: 1.5; }
  .pack-card h3 { font-size: 34px; }
  .cart-bundles-head h3 { font-size: 18px; }
}

/* Warmth and play. Forest stays the anchor (type, headings, buttons, one deep
   band) and apricot carries the bright moments. Headings stay one color. */
.announcement { background: var(--apricot); color: var(--forest); }
.announcement a { color: inherit; }

/* The benefit ribbon becomes a warm apricot band between two waves. */
.hero > .wave-bottom, .routine > .wave-top,
.product > .wave-bottom, [data-page="product"] .story > .wave-top { fill: var(--apricot); }
.benefit-ribbon { background: var(--apricot); color: var(--forest); }
.benefit-ribbon .ribbon-track span { font-weight: 500; }
/* Forest separators on the apricot band, spaced evenly on both sides. */
.ribbon-track span { padding-inline: 14px; }
.ribbon-track span::after { color: var(--forest); margin-left: 28px; font-size: 15px; opacity: 0.55; }

/* Numbered steps read as warm chips instead of green rings. */
.routine .routine-steps li > span, .routine-steps li > span, .benefit-row > span {
  background: var(--apricot);
  color: var(--forest);
  border-color: transparent;
}

/* Product photos sit on a soft offset card rather than a green hairline. */
.formula-photo .gallery-stage, .product-gallery .gallery-stage {
  outline: 0;
  box-shadow: 14px 14px 0 var(--sage-light);
}
.product-gallery .gallery-stage { box-shadow: 14px 14px 0 var(--apricot); }

/* Each tier's label sits on the card's top edge: savings as apricot
   stickers, the single stick as a matching white pill. */
.pack-card .pack-tag, .pack-card:not(:first-child) .pack-tag {
  position: absolute; top: 0; left: 50%; z-index: 1;
  translate: -50% -50%;
  display: inline-block; white-space: nowrap;
  padding: 6px 12px 5px;
  border-radius: 999px;
  background: var(--apricot);
  color: var(--forest);
  rotate: 0deg;
}
.pack-card:first-child .pack-tag { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* "Travels with you" sits on white like the sections around it, so the tan
   bag photo reads clearly; color is saved for the ribbon and the refer band. */
#why-a-solid-stick.carry { background: var(--paper); }
#why-a-solid-stick.carry::before { content: none; }
/* On white the band's own padding becomes dead space: match the ~125px
   rhythm between the other white sections. */
#why-a-solid-stick.carry { padding-top: 16px; padding-bottom: 40px; }
@media (max-width: 760px) {
  #why-a-solid-stick.carry { padding-top: 8px; padding-bottom: 16px; }
}
.carry figure img { border-color: var(--paper); box-shadow: 0 18px 40px -24px rgb(20 72 51 / 0.45); }
.carry-list li { border-color: rgb(20 72 51 / 0.18); }
#why-peptides.pairings { position: relative; padding-top: 88px; }
/* The intro reads like every other section intro: 17px, regular, muted,
   with room before the cards. */
#why-peptides .pairings-heading { margin-bottom: 52px; }
#why-peptides .pairings-heading > p {
  max-width: 50ch; margin-top: 20px;
  color: var(--muted); font-size: 17px; font-weight: 400;
  line-height: 1.6; letter-spacing: 0;
}
.pairing-grid article > span { text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 760px) {
  #why-peptides.pairings { padding-top: 56px; }
  #why-peptides .pairings-heading { margin-bottom: 36px; }
  #why-peptides .pairings-heading > p { font-size: 16px; }
}

/* The ritual cards: the stick's own card is the warm one. */
.pairing-grid article:first-child {
  position: relative;
  background: var(--apricot);
  color: var(--forest);
}
.pairing-grid article:first-child p { color: var(--forest); }
.pairing-grid article { transition: translate 260ms var(--groove-ease, ease), rotate 260ms var(--groove-ease, ease); }
@media (hover: hover) {
  .pairing-grid article:hover { translate: 0 -4px; rotate: -0.6deg; }
}

/* Refer stays the one deep forest moment. */

/* FAQ toggles are apricot buttons that turn forest once opened. */
.faq-list summary::after, .buy-details summary::after, .pep-faq summary::after {
  background: var(--apricot);
  color: var(--forest);
}
.faq-list details[open] summary::after, .buy-details details[open] summary::after,
.pep-faq details[open] summary::after { background: var(--forest); color: var(--paper); }

/* The social photos get a warm paper frame. */
.journal-grid img { border-color: var(--paper); box-shadow: 0 20px 40px -26px rgb(20 72 51 / 0.5); }
.journal-grid img:nth-child(2) { border-color: var(--apricot); }

@media (max-width: 760px) {
  .ribbon-track span { padding-inline: 11px; }
  .ribbon-track span::after { margin-left: 22px; }
  .formula-photo .gallery-stage, .product-gallery .gallery-stage { box-shadow: 9px 9px 0 var(--sage-light); }
  .product-gallery .gallery-stage { box-shadow: 9px 9px 0 var(--apricot); }
  .pairing-grid article, .pairing-grid article:first-child { padding-inline: 16px; }
  .pairing-grid h3 { font-size: clamp(20px, 5.6vw, 27px); }
}
@media (prefers-reduced-motion: reduce) {
  .pairing-grid article:hover { translate: none; rotate: none; }
}
.refer-steps li > span { background: var(--apricot); color: var(--forest); border-color: transparent; }

/* Desktop hero fits the first screen: the header starts as a clean flat bar
   (its wave appears once the page scrolls), and the hero's type, spacing and
   photo scale with the window's height as well as its width. Tall windows
   look as before; short ones keep the button, the shipping line and the
   whole arch above the fold. */
@media (min-width: 761px) {
  .site-header .wave-header { opacity: 0; transition: opacity 260ms var(--groove-ease, ease); }
  .site-header.is-scrolled .wave-header { opacity: 1; }
  .hero {
    --arch-top: clamp(16px, 4.2svh, 40px);
    --arch-bottom: calc(44px + clamp(20px, 5.6svh, 52px));
    min-height: clamp(480px, calc(100svh - 128px), 780px);
    padding-top: clamp(14px, 4.4svh, 46px);
    padding-bottom: calc(44px + clamp(18px, 5.4svh, 64px));
  }
  .hero h1 { font-size: clamp(50px, min(7.7vw, 11.4svh), 118px); }
  .hero .hero-copy > p:not(.hero-note) {
    margin-top: clamp(10px, 2.4svh, 26px);
    font-size: clamp(15px, min(1.5vw, 2.9svh), 22px);
    line-height: 1.45;
  }
  .hero .hero-packs { margin-top: clamp(10px, 2.6svh, 26px); }
  .hero .hero-pack { padding-bottom: clamp(7px, 1.6svh, 12px); }
  .hero .hero-pack-name { font-size: clamp(16px, 2.9svh, 19px); }
  .hero .hero-packs + .wave-button { margin-top: clamp(12px, 2.6svh, 22px); min-height: clamp(52px, 8.8svh, 76px); }
  .hero .hero-ship { margin-top: clamp(8px, 1.8svh, 16px); }
  .hero .hero-image { top: var(--arch-top); bottom: var(--arch-bottom); }
  /* Keep headroom above the balm however wide or short the arch gets. */
  .hero .hero-image :is(img, .hero-twist) { object-position: center 30%; }
  .hero::before { top: calc(var(--arch-top) + (100% - var(--arch-top) - var(--arch-bottom)) * 0.135 - 2px - var(--burst-big) / 2); }
  .hero::after { bottom: calc(var(--arch-bottom) + (100% - var(--arch-top) - var(--arch-bottom)) * 0.2 - var(--burst-small) / 2); }
}
@media (min-width: 761px) and (max-height: 760px) {
  .site-header { height: 76px; }
  .brand img { width: 212px; }
}
@media (min-width: 761px) and (max-height: 640px) {
  .site-header { height: 66px; }
  .brand img { width: 196px; }
  .hero { min-height: calc(100svh - 100px); }
  .hero h1 { font-size: clamp(48px, min(7.7vw, 10.4svh), 118px); }
}

/* A quiet info button keeps the usage estimate beside the benefit copy. */
.swipe-tip-trigger {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; text-decoration-color: rgb(20 72 51 / 0.45);
}
.swipe-tip-trigger:hover { text-decoration-color: currentColor; }
.swipe-tip-trigger:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 3px; }
.swipe-tip-trigger--info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; vertical-align: middle;
  text-decoration: none; color: var(--muted);
}
.swipe-tip-trigger--info:hover { color: var(--forest); }
.swipe-tip-trigger--info svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round;
}
.swipe-tip { position: relative; display: inline-block; text-indent: 0; }
/* The subline is a touch longer now; keep it to two balanced lines on desktop. */
@media (min-width: 761px) {
  .hero .hero-copy > p:has(.swipe-tip) { max-width: 40ch; text-wrap: balance; }
}
.swipe-tip-card {
  display: none;
  position: absolute; left: calc(100% + 8px); top: 0; z-index: 20;
  width: min(216px, calc(100vw - 32px)); padding: 12px 14px;
  background: var(--paper); color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 5px 18px -10px rgb(20 72 51 / 0.22);
  font: 400 12px/1.5 var(--font); font-style: normal; letter-spacing: 0; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 150ms ease, visibility 0s 150ms;
}
.swipe-tip-label {
  display: block; margin-bottom: 5px; color: var(--muted);
  font: 500 9px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.swipe-tip-card strong {
  display: block; margin-bottom: 4px; color: var(--forest);
  font: 500 17px/1.15 var(--display); letter-spacing: -0.02em;
}
.swipe-tip-card::after {
  content: ""; position: absolute; top: var(--tip-arrow-top, 50%);
  opacity: var(--tip-arrow-opacity, 1);
  width: 7px; height: 7px; margin-top: -4px; rotate: 45deg;
  background: var(--paper); border: solid var(--line);
}
.swipe-tip-card[data-placement="right"]::after { left: -4px; border-width: 0 0 1px 1px; }
.swipe-tip-card[data-placement="left"]::after { right: -4px; border-width: 1px 1px 0 0; }
.swipe-tip-card[data-placement="below"]::after { display: none; }
.swipe-tip-trigger[aria-expanded="true"] + .swipe-tip-card {
  display: block; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .swipe-tip-card { transition: none; }
}

/* Phones get the short hero line so the buy button stays above the fold. */
.hero-sub-short { display: none; }
@media (max-width: 760px) {
  .hero-sub-long { display: none; }
  .hero-sub-short { display: inline; }
}

/* A quiet list of guides under the FAQ intro: plain links in the body face,
   so the section gains reading paths without gaining a new visual element. */
.faq-guides { display: grid; justify-items: start; margin-top: 40px; }
.faq-guides > span {
  margin-bottom: 6px;
  font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.faq-guides a {
  display: inline-flex; align-items: center; min-height: 34px;
  font-size: 15px; color: var(--forest);
  text-decoration: underline; text-decoration-color: rgb(20 72 51 / 0.22);
  text-underline-offset: 5px; transition: text-decoration-color 180ms ease;
}
.faq-guides a:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .faq-guides { justify-items: center; margin-top: 28px; }
}