/* =========================================================
   Cheer Solutions — design tokens
   Direction: high-energy team spirit — red/gold/black, bold
   condensed athletic type, disc + strap motifs lifted from
   the actual product (Mat Mover II disc, Mat Strap webbing).
   ========================================================= */
:root{
  /* color */
  --ink:        #14100f;   /* warm near-black */
  --ink-2:      #221b19;   /* raised black (cards on dark) */
  --paper:      #ffffff;
  --mist:       #f6f4f1;   /* warm off-white section fill */
  --red:        #d0132b;
  --red-deep:   #7a0a1d;
  --gold:       #d4af37;
  --gold-deep:  #9c7d24;
  --steel:      #8b9098;
  --steel-line: #d8dadd;

  --ink-70: rgba(20,16,15,.72);
  --ink-45: rgba(20,16,15,.45);
  --paper-80: rgba(255,255,255,.82);
  --paper-55: rgba(255,255,255,.58);

  /* type */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-utility: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --fs-hero:   clamp(2.9rem, 4vw + 2rem, 6.5rem);
  --fs-h1:     clamp(2.4rem, 2.2vw + 1.7rem, 4.1rem);
  --fs-h2:     clamp(1.7rem, 1.3vw + 1.35rem, 2.6rem);
  --fs-h3:     clamp(1.2rem, .4vw + 1.1rem, 1.5rem);
  --fs-lede:   clamp(1.05rem, .3vw + 1rem, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-small:  .9rem;
  --fs-eyebrow: .8125rem;

  /* layout */
  --container: 1180px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius-lg: 22px;
  --radius-md: 14px;

  --ease: cubic-bezier(.22,.75,.28,1);
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ color-scheme: light; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
.text-link{ color: var(--red); font-size: 1.05em; text-decoration: none; }
.text-link:hover, .text-link:focus-visible{
  text-decoration: underline dotted; text-decoration-color: currentColor; text-underline-offset: 3px;
}
h1,h2,h3,h4{ margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.015em; line-height: .98; text-wrap: balance; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
ul{ margin: 0; padding: 0; }
button{ font: inherit; }

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

.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }

/* =========================================================
   Eyebrow / signature "strap" rule
   The gold bar echoes the webbing strap that cinches every
   mat — used wherever we introduce a new section.
   ========================================================= */
.eyebrow{
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-utility); font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; font-size: var(--fs-eyebrow);
  color: var(--red);
}
.page-title{
  display: inline-block; position: relative; margin-top: .5rem;
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h1);
  text-transform: uppercase; letter-spacing: -.025em; padding-bottom: .5rem;
}
.page-title::after{
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 72px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}
.on-dark .page-title::after{ background: linear-gradient(90deg, var(--red), var(--red-deep)); }

.eyebrow::before{
  content: ""; width: 34px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  flex: none;
}
.on-dark .eyebrow{ color: var(--gold); }

/* =========================================================
   Header / nav
   ========================================================= */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__bar{
  /* Grid with symmetric fr tracks, not flex space-between: the PayPal cart
     widget in .header-cart renders async and its width changes once loaded.
     With space-between that resize would visibly shift the nav; with fr
     tracks the nav's centered position depends only on the container's
     total width, never on a sibling's content size. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding-block: .85rem;
}
.brand{
  display: flex; align-items: center; gap: .65rem;
  justify-self: start; text-decoration: none; color: var(--paper);
}
.brand__mark{
  width: 40px; height: 40px; flex: none; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #3a2f2b, var(--ink) 70%);
  border: 2px solid var(--gold);
}
.brand__mark svg{ width: 21px; height: 21px; }
.brand__text{ display: flex; flex-direction: column; line-height: 1; }
.brand__name{ font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; text-transform: uppercase; }
.brand__tag{ font-family: var(--font-utility); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; }

.nav-toggle{
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px; color: var(--paper); cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; }

.site-nav{ justify-self: center; }
.site-nav__list{
  display: flex; align-items: center; gap: .2rem; list-style: none; flex-wrap: wrap;
}
.site-nav__list a{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.05rem; text-decoration: none;
  font-family: var(--font-utility); font-weight: 700; font-size: .95rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--paper-80);
  border-radius: 8px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.site-nav__list a:hover, .site-nav__list a:focus-visible{ background: rgba(255,255,255,.08); color: var(--paper); }
.site-nav__list a[aria-current="page"]{ background: var(--red); color: var(--paper); }
.site-nav__list a[aria-current="page"]:hover{ background: var(--red); }

.header-cart{ display: flex; align-items: center; justify-self: end; min-width: 90px; justify-content: flex-end; }
.header-cart paypal-cart-button{ display: block; }

/* mobile nav */
@media (max-width: 860px){
  .site-header__bar{ display: flex; justify-content: space-between; }
  .nav-toggle{ display: inline-flex; }
  .site-nav{
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--ink); border-top: 1px solid rgba(255,255,255,.08);
    max-height: 0; overflow: hidden; transition: max-height .28s var(--ease);
  }
  .site-nav.is-open{ max-height: 420px; }
  .site-nav__list{ flex-direction: column; align-items: stretch; padding: .5rem var(--pad) 1.25rem; gap: .15rem; }
  .site-nav__list a{ width: 100%; }
  .header-cart{ display: none; }
}

/* =========================================================
   Buttons — small consistent corner radius. Not a pill, not
   a chevron: the plain, common modern default.
   ========================================================= */
.btn{
  --btn-bg: var(--red);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .95rem 1.9rem; border-radius: 8px;
  font-family: var(--font-utility); font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bg);
  cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover, .btn:focus-visible{ transform: translateY(-2px); }
.btn--ghost{ --btn-bg: transparent; --btn-fg: var(--paper); border-color: rgba(255,255,255,.4); }
.btn--ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn--gold{ --btn-bg: var(--gold); --btn-fg: var(--ink); border-color: var(--gold); }
.btn--gold:hover{ --btn-bg: var(--ink); --btn-fg: var(--gold); border-color: var(--gold); }
.btn--outline-ink{ --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn--outline-ink:hover{ --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--sm{ padding: .7rem 1.35rem; font-size: .88rem; border-radius: 6px; }
.btn--block{ width: 100%; }

/* =========================================================
   Sections / rhythm
   ========================================================= */
.section{ padding-block: clamp(3rem, 5vw, 5rem); }
.section--tight{ padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.section.on-dark{ background: var(--ink); color: var(--paper); }
.action-shot{
  margin-top: 2.5rem; max-width: 420px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--steel-line);
}
.action-shot img{ width: 100%; display: block; }
.action-shot__caption{
  padding: .85rem 1.1rem; background: var(--mist);
  font-family: var(--font-utility); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-70);
}
.section.on-mist{ background: var(--mist); }
.section-head{ max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2{ margin-top: .6rem; }
.section-head p{ margin-top: 1rem; font-size: var(--fs-lede); color: var(--ink-70); }
.section-head--compact{ margin-bottom: 1.5rem; }
.section-head--compact h2{ font-size: var(--fs-h3); margin-top: .4rem; }
.on-dark .section-head p{ color: var(--paper-80); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  background: var(--ink); color: var(--paper);
  position: relative; overflow: clip;
  border-bottom: 6px solid var(--gold);
}
.hero::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 88% 10%, rgba(208,19,43,.35), transparent 60%),
    radial-gradient(50% 60% at 8% 100%, rgba(212,175,55,.16), transparent 60%);
  pointer-events: none;
}
.hero__ghost{
  position: absolute; z-index: 0; right: -.02em; bottom: -.14em;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(7rem, 19vw, 17rem); line-height: .78; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.hero__grid{
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hero__eyebrow{ margin-bottom: 1.1rem; }
.hero h1{ font-size: var(--fs-hero); text-transform: uppercase; letter-spacing: -.03em; }
.hero h1 em{ font-style: normal; color: var(--red); -webkit-text-stroke: 1px var(--gold); }
.hero__lede{ margin-top: 1.4rem; font-size: var(--fs-lede); color: var(--paper-80); max-width: 34rem; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero__proof{ display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.5rem; }
.hero__proof-item{ font-family: var(--font-utility); }
.hero__proof-num{ display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); line-height: 1; }
.hero__proof-label{ display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-55); margin-top: .35rem; }

.hero__media{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.hero__media::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.35);
  pointer-events: none;
}
.hero__video{ position: relative; aspect-ratio: 16/9; }
.hero__video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Disc badge — the numbered "how it works" marker, shaped
   like the Mat Mover's plywood disc with its steel pole.
   ========================================================= */
.disc{
  --disc-size: 64px;
  width: var(--disc-size); height: var(--disc-size); flex: none;
  border-radius: 50%; position: relative;
  background: var(--gold);
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--ink);
}
.disc::before{
  content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 14px; border-radius: 2px; background: var(--ink);
}
.disc::after{
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px solid rgba(20,16,15,.3);
}

.steps{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  counter-reset: step;
}
.step{ position: relative; display: flex; flex-direction: column; gap: 1rem; padding-top: .5rem; }
.step__num{
  position: absolute; top: -1.9rem; left: -.15rem; z-index: 0;
  font-family: var(--font-display); font-weight: 900; font-size: 6.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(20,16,15,.13);
  pointer-events: none; user-select: none;
}
.step > *{ position: relative; z-index: 1; }
.step h3{ font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: -.01em; }
.step p{ color: var(--ink-70); font-size: var(--fs-small); }
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }

/* =========================================================
   Cards — product / value cards
   ========================================================= */
.card-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2vw, 2rem); }
@media (max-width: 780px){ .card-grid{ grid-template-columns: 1fr; } }

.product-card{
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--steel-line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.product-card__media{ aspect-ratio: 4/3; background: var(--ink); overflow: hidden; }
.product-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.product-card__body{ padding: clamp(1.25rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.product-card__body h3{ font-size: var(--fs-h3); text-transform: uppercase; }
.product-card__price{ font-family: var(--font-utility); font-weight: 700; color: var(--red); font-size: 1.15rem; }
.product-card__body p{ color: var(--ink-70); }
.product-card__body .btn{ margin-top: auto; align-self: flex-start; }

/* =========================================================
   Pull quote — founder story
   ========================================================= */
.pull-quote{
  position: relative; max-width: 46rem; margin-inline: auto; text-align: center;
  padding-inline: clamp(0rem, 4vw, 2rem);
}
.pull-quote__mark{ font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--gold); display: block; margin-bottom: -.5rem; }
.pull-quote p{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2vw, 2.1rem); text-transform: uppercase; letter-spacing: .01em; }
.pull-quote cite{ display: block; margin-top: 1.5rem; font-style: normal; font-family: var(--font-utility); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-55); font-size: .85rem; }

/* =========================================================
   Trust bar
   ========================================================= */
.trust-bar{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 720px){ .trust-bar{ grid-template-columns: 1fr; } }
.trust-item{ display: flex; gap: 1rem; align-items: flex-start; }
.trust-item__icon{
  flex: none; width: 46px; height: 46px; border-radius: 999px;
  border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.trust-item h3{ font-size: 1.05rem; text-transform: uppercase; font-family: var(--font-utility); font-weight: 700; letter-spacing: .04em; }
.trust-item p{ color: var(--paper-80); font-size: var(--fs-small); margin-top: .35rem; }

/* =========================================================
   Testimonials — editorial pull-quotes, not boxed cards.
   Real quotes run short to long, so these sit in two
   explicit columns (grouped by hand to balance total length)
   rather than a grid that would force uneven items to match
   row height, or CSS multicol balancing that guesses badly
   with only a few, very unequal blocks. The gold top rule is
   the same signature device as the eyebrow bar and
   page-title underline, laid on its side.
   ========================================================= */
.testimonial-columns{
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 760px){ .testimonial-columns{ grid-template-columns: 1fr; } }
.testimonial-col{ display: flex; flex-direction: column; gap: 1.75rem; }
.testimonial-card{ border-top: 2px solid var(--gold); padding-top: .8rem; }
.testimonial-card__mark{
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; line-height: .4; color: var(--gold-deep); margin-bottom: .4rem;
}
.testimonial-card blockquote{ margin: 0; }
.testimonial-card blockquote p{ font-size: .9rem; line-height: 1.5; font-style: italic; color: var(--ink-70); }
.testimonial-card blockquote p + p{ margin-top: .75em; }
.testimonial-card figcaption{
  margin-top: .65rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem;
  font-family: var(--font-utility);
}
.testimonial-card__name{ font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .7rem; color: var(--red); }
.testimonial-card__role{ font-size: .7rem; color: var(--ink-45); }
.testimonial-card__role::before{ content: "\2013"; margin-right: .4rem; color: var(--steel); }

/* =========================================================
   Materials strip (About)
   ========================================================= */
.materials{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 780px){ .materials{ grid-template-columns: 1fr; } }
.material-card{ padding: 1.6rem; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--steel-line); }
.material-card__media{ margin: -1.6rem -1.6rem 1.2rem; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.material-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.material-card__label{ font-family: var(--font-utility); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); font-size: .8rem; }
.material-card h3{ margin-top: .5rem; font-size: 1.3rem; text-transform: uppercase; }
.material-card p{ margin-top: .5rem; color: var(--ink-70); font-size: var(--fs-small); }

/* =========================================================
   About page layout
   ========================================================= */
/* The media column sizes to its content (420px action shot at most), not an
   arbitrary fraction of the container. A wide fr column left a dead gap next
   to the narrower photos. */
.about-hero{ display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: clamp(1.5rem, 2.5vw, 2.25rem); align-items: start; }
@media (max-width: 820px){
  .about-hero{ grid-template-columns: 1fr; }
  /* Lead with the story on mobile, photos after, not photos first. */
  .about-hero__copy{ order: -1; }
}
.about-hero__portrait{ border-radius: var(--radius-lg); overflow: hidden; border: 3px solid var(--gold); max-width: 280px; }
.about-hero__portrait img{ width: 100%; }

/* =========================================================
   FAQ accordion — native <details>, zero JS required
   ========================================================= */
.faq-group{ margin-bottom: clamp(2rem, 4vw, 3rem); }
.faq-group:last-child{ margin-bottom: 0; }
.faq-group__title{
  font-family: var(--font-utility); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .9rem; color: var(--red); margin-bottom: 1rem;
}
.faq-item{ border-bottom: 1px solid var(--steel-line); }
.faq-item:first-child{ border-top: 1px solid var(--steel-line); }
.faq-item summary{
  list-style: none; cursor: pointer; padding: 1.15rem 2.4rem 1.15rem 0; position: relative;
  font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+"; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.4rem; color: var(--red); transition: transform .2s var(--ease);
}
.faq-item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.faq-item__body{ padding: 0 1.5rem 1.4rem 0; color: var(--ink-70); }
.faq-item__body p{ margin-bottom: .8rem; }
.faq-item__body p:last-child{ margin-bottom: 0; }

/* =========================================================
   Info tip — a single-ring "i" badge in each tier card's
   corner. Quiet by default (near-invisible until the card
   is hovered or focused), so it never competes with the
   price and Add to Cart button. Ordering details live off
   the card entirely, surfaced only on hover/focus of the
   badge itself.
   ========================================================= */
.info-tip{
  position: absolute; top: 1.5rem; right: 1.5rem; z-index: 5;
  opacity: 0; transition: opacity .15s var(--ease);
}
.tier:hover .info-tip, .tier:focus-within .info-tip{ opacity: 1; }
.info-tip__trigger{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--steel-line); background: var(--paper);
  color: var(--steel); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.info-tip__trigger svg{ width: 16px; height: 16px; }
.info-tip__trigger:hover, .info-tip__trigger:focus-visible{ border-color: var(--gold-deep); color: var(--gold-deep); }
.info-tip__panel{
  position: absolute; right: 0; left: auto; top: calc(100% + .6rem); z-index: 20;
  width: min(260px, 78vw); padding: .9rem 1.1rem; border-radius: var(--radius-md);
  background: var(--ink); color: var(--paper-80); box-shadow: 0 18px 40px -20px rgba(0,0,0,.5);
  font-family: var(--font-body); font-size: .82rem; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: normal;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.info-tip__panel a{ color: var(--gold); }
.info-tip__trigger:hover ~ .info-tip__panel, .info-tip__trigger:focus-visible ~ .info-tip__panel{
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* =========================================================
   Product page tier tables
   ========================================================= */
.product-section{ margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.product-section:last-child{ margin-bottom: 0; }
.product-section__head{ display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; margin-bottom: 2.5rem; }
@media (max-width: 820px){ .product-section__head{ grid-template-columns: 1fr; } }
.product-section__media{ border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--steel-line); background: var(--ink); }
.product-section__media img{ width: 100%; }
.product-section__copy h2{ text-transform: uppercase; }
.product-section__copy p{ margin-top: 1rem; color: var(--ink-70); }

.tiers{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px){ .tiers{ grid-template-columns: 1fr; } }
.tier{
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.6rem; border-radius: var(--radius-md); background: var(--paper);
  border: 1px solid var(--steel-line); position: relative;
}
.tier--featured{ border-color: var(--gold); box-shadow: 0 18px 40px -24px rgba(212,175,55,.55); }
.tier--featured::before{
  content: attr(data-ribbon); position: absolute; top: -13px; left: 1.4rem;
  background: var(--gold); color: var(--ink); font-family: var(--font-utility); font-weight: 700;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 999px;
}
.tier__name{ font-family: var(--font-utility); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; padding-right: 2.25rem; }
.tier__price{ font-family: var(--font-display); font-weight: 900; font-size: 2.75rem; letter-spacing: -.02em; color: var(--red); font-variant-numeric: tabular-nums; }
.tier__price span{ font-family: var(--font-utility); font-weight: 700; font-size: .8rem; color: var(--ink-45); text-transform: uppercase; letter-spacing: .04em; }
.tier p{ color: var(--ink-70); font-size: var(--fs-small); }
.tier paypal-add-to-cart-button{ margin-top: auto; display: block; }

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card{ background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.5rem); }
.contact-card h2{ text-transform: uppercase; }
.contact-card__email{ display: inline-flex; margin-top: 1.5rem; }
.related-links{ list-style: none; display: flex; flex-direction: column; gap: .1rem; }
.related-links a{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; text-decoration: none; border-bottom: 1px solid var(--steel-line);
  font-family: var(--font-utility); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.related-links li:first-child a{ border-top: 1px solid var(--steel-line); }
.related-links a:hover{ color: var(--red); }
.related-links svg{ width: 16px; height: 16px; flex: none; opacity: .5; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--ink); color: var(--paper-80); border-top: 4px solid var(--gold); }
.site-footer__top{ display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; padding-block: 3rem; }
@media (max-width: 780px){ .site-footer__top{ grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h4{ font-family: var(--font-utility); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--gold); margin-bottom: 1rem; }
.site-footer .brand__tag{ color: var(--paper-55); }
.site-footer p{ font-size: var(--fs-small); }
.footer-nav{ list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-nav a{ text-decoration: none; font-size: var(--fs-small); }
.footer-nav a:hover{ color: var(--gold); }
.site-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8rem; color: var(--paper-55);
}
.site-footer__bottom a{ text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   404
   ========================================================= */
.error-page{
  min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ink); color: var(--paper); padding: 4rem var(--pad);
}
.error-page .disc{ --disc-size: 96px; font-size: 2.2rem; margin-bottom: 1.75rem; }
.error-page h1{ font-size: clamp(2.5rem, 5vw, 4rem); text-transform: uppercase; }
.error-page p{ margin-top: 1rem; color: var(--paper-80); max-width: 34rem; }
.error-page .btn{ margin-top: 2rem; }

/* =========================================================
   Reveal-on-scroll (progressive enhancement)
   ========================================================= */
[data-reveal]{ opacity: 1; transform: none; }
.js [data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-visible{ opacity: 1; transform: none; }