/* ==========================================================================
   SAGUI COMBAT — Core Stylesheet
   Brand: Purple / Black / White
   Author: build for Luca — Sagui Combat
   --------------------------------------------------------------------------
   CONTENTS
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Buttons & links
   06. Reveal / scroll animation system
   07. Navigation
   08. Hero
   09. Credentials strip
   10. About
   11. Pillars (What We Work On)
   12. Coaching
   13. Pricing
   14. Testimonials
   15. Instagram
   16. Contact
   17. Footer
   18. Utilities & motion preferences
   ========================================================================== */


/* ==========================================================================
   00. TYPEFACE
   --------------------------------------------------------------------------
   Loaded from fonts.css, which is imported before this file in index.html.
   One family — Archivo Variable — carries the entire site: the heavy
   condensed-to-wide display setting used on the posters, the letterspaced
   labels, and the body copy. See fonts.css for why it's embedded rather
   than linked.
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Brand colour ---------------------------------------------------
     Sampled directly from sagui-combat_logo.png. These are pixel values
     off the artwork, not approximations:
       #8113CA  the dominant stroke colour across the mark
       #A81BFD  the bright highlight on the lit edge of each stroke
       #5B1B7E  the shadow side
     If the logo is ever re-exported, re-sample and update ONLY these
     three values — every other purple on the site derives from them.   */
  --brand:          #8113CA;   /* logo core — fills, buttons             */
  --brand-bright:   #A81BFD;   /* logo highlight — gradients, borders    */
  --brand-deep:     #5B1B7E;   /* logo shadow                            */

  /* Derived tints. --brand-text is --brand-bright lifted just far enough
     to clear WCAG AA (6.5:1 on the page background) for small text and
     fine icon strokes — same hue, legible at 12px. */
  --brand-text:     #BE6BFF;
  --brand-glow:     #C77DFF;
  --brand-050:      rgba(129, 19, 202, 0.05);
  --brand-080:      rgba(129, 19, 202, 0.09);
  --brand-120:      rgba(129, 19, 202, 0.14);
  --brand-200:      rgba(129, 19, 202, 0.22);
  --brand-320:      rgba(168, 27, 253, 0.34);
  --brand-500:      rgba(129, 19, 202, 0.55);

  /* --- Neutrals -------------------------------------------------------- */
  --black:          #000000;
  --ink:            #060507;   /* page background                         */
  --ink-raised:     #0C0A0F;   /* section alt background                  */
  --surface:        #111015;   /* card background                         */
  --surface-hi:     #17151C;   /* card hover / nested                     */
  --line:           rgba(255, 255, 255, 0.08);
  --line-strong:    rgba(255, 255, 255, 0.14);

  --white:          #FFFFFF;
  --text:           #F4F2F7;
  --text-muted:     #A9A3B4;
  --text-dim:       #79737F;

  /* --- Typography ------------------------------------------------------
     One family at different settings, which is what holds the printed
     material together. The display setting is heavy and slightly expanded
     to match the poster headlines; labels run at 700 with wide tracking;
     body copy sits at 400-500 at normal width.                          */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wdth-display: 112;   /* semi-expanded, as on the posters */
  --wdth-label:   104;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-hero:    clamp(3.1rem, 9.4vw, 8.25rem);
  --fs-h1:      clamp(2.6rem, 6.4vw, 5.5rem);
  --fs-h2:      clamp(2.1rem, 4.8vw, 3.9rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.125rem);
  --fs-h4:      clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:    clamp(0.9688rem, 1.05vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* --- Spacing --------------------------------------------------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --section-y: clamp(5rem, 11vw, 9.5rem);

  /* --- Structure ------------------------------------------------------- */
  --container:   1240px;
  --container-narrow: 860px;
  --gutter:      clamp(1.25rem, 5vw, 3rem);
  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    0.25s;
  --dur:         0.5s;
  --dur-slow:    0.9s;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.5), 0 12px 32px -12px rgba(0,0,0,0.9);
  --shadow-lift:  0 2px 4px rgba(0,0,0,0.5), 0 28px 60px -20px rgba(0,0,0,1);
  --shadow-brand: 0 18px 50px -18px var(--brand-500);

  --nav-h: 76px;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, video, svg, iframe {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

::selection {
  background: var(--brand);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link for keyboard + screen-reader users */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 999;
  background: var(--brand);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 112%;
  font-variation-settings: 'wdth' var(--wdth-display);
  line-height: 0.9;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  text-wrap: balance;
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

/* The slanted headline treatment carried through the print material.
   Archivo ships a true italic, so this is a real drawn italic rather than
   a mechanical skew — the difference shows badly at poster sizes. */
.italic-cut {
  display: inline-block;
  font-style: italic;
}

/* Whole headlines set italic — used on the hero and the closing CTA, the
   way the posters set "ONLINE COACHING" and "START YOUR JOURNEY TODAY". */
.display-italic { font-style: italic; }

/* Purple word inside a white headline */
.accent { color: var(--brand-text); }

/* Outlined headline text — used sparingly for depth behind hero copy */
.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.28);
}

/* Section eyebrow: the wide-tracked label that sits above every heading in
   the print material ("TRAIN ANYWHERE. IMPROVE EVERYDAY.") */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: var(--space-md);
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-glow));
  border-radius: 3px;
}

/* --- Brush strokes ---------------------------------------------------------
   The signature graphic device from the posters. Generated by
   tools/make-brushes.py from the brand purples; see that file.            */

.brush-rule {
  display: block;
  width: clamp(180px, 22vw, 300px);
  height: 26px;
  margin-top: 1.1rem;
  background: url('../img/brush-rule.png?v=13b140d1') no-repeat left center / 100% 100%;
}
.section-head--center .brush-rule { margin-inline: auto; }

/* Big painterly bands. Placed as backgrounds so they never intercept
   clicks and never need an <img> in the markup. */
.brush-band,
.brush-sweep {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.brush-band  { background-image: url('../img/brush-band.png?v=89b921e0'); }
.brush-sweep { background-image: url('../img/brush-sweep.png?v=da944a8a'); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 62ch;
}

.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lead { margin-top: var(--space-md); }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lead { margin-inline: auto; }
.section-head--center .eyebrow::before { display: none; }


/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

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

.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
  /* `clip` rather than `hidden` — it contains the decorative blooms
     without turning the section into a scroll container. */
  overflow: clip;
}

.section--raised { background: var(--ink-raised); }

/* Hairline divider between sections, fading out at the edges */
.section--edge::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent);
}

/* Ambient purple bloom used behind key sections */
.bloom {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.5;
  z-index: 0;
}
.bloom--tl { width: 520px; height: 520px; top: -180px; left: -200px;
             background: radial-gradient(circle, var(--brand-320), transparent 68%); }
.bloom--br { width: 620px; height: 620px; bottom: -240px; right: -220px;
             background: radial-gradient(circle, var(--brand-200), transparent 70%); }

.section > .container { position: relative; z-index: 1; }

/* Fine film-grain overlay — stops the large black areas banding on
   cheap panels and gives the page a printed, tactile quality. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.05rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  overflow: hidden;
  isolation: isolate;
  /* Deliberately NOT nowrap. The hover sheen needs overflow:hidden, so a
     label that can't wrap gets silently clipped instead — which is what was
     eating the P off "Continue On WhatsApp" on narrow screens and at larger
     device text sizes. Wrapping to two lines is always better than losing
     characters. */
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* Sheen that wipes across the button on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%,
              rgba(255,255,255,0.28) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-bright) 100%);
  box-shadow: 0 10px 30px -14px var(--brand-500);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  border: 1.5px solid var(--line-strong);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--brand-bright);
  color: var(--brand-glow);
  box-shadow: none;
}

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
}
.btn--light:hover { box-shadow: 0 18px 40px -18px rgba(255,255,255,0.35); }

.btn--whatsapp {
  --btn-bg: #1FAE54;
  --btn-fg: var(--white);
}
.btn--whatsapp:hover { box-shadow: 0 18px 44px -18px rgba(31,174,84,0.6); }

.btn--sm { padding: 0.8rem 1.4rem; font-size: 0.75rem; }
.btn--block { display: flex; width: 100%; }

.btn .icon { width: 18px; height: 18px; flex: none; }

/* Text link with an underline that grows from the left */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-text);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--brand-text), var(--brand-text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1.5px; color: var(--brand-glow); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}


/* ==========================================================================
   06. REVEAL / SCROLL ANIMATION SYSTEM
   --------------------------------------------------------------------------
   Elements marked [data-reveal] start hidden and animate in when they
   enter the viewport. Kept deliberately restrained — a short rise and a
   fade, nothing that bounces or overshoots.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Variants */
[data-reveal='fade']  { transform: none; }
[data-reveal='left']  { transform: translateX(-36px); }
[data-reveal='right'] { transform: translateX(36px); }
[data-reveal='scale'] { transform: translateY(20px) scale(0.97); }
[data-reveal='clip']  {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal='clip'].is-visible { clip-path: inset(0 0 0 0); }

/* Once revealed we drop will-change so the compositor can release memory */
[data-reveal].is-settled { will-change: auto; }

/* Hero elements dissolve as the section leaves the viewport.
   Driven by a scroll-linked custom property set in main.js. */
.hero__inner {
  opacity: var(--hero-fade, 1);
  transform: translateY(var(--hero-shift, 0px));
}


/* ==========================================================================
   07. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              height var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  height: 64px;
  background: rgba(6, 5, 7, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}
.nav__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  transition: transform var(--dur) var(--ease-out);
}
.nav__brand:hover .nav__logo { transform: rotate(-6deg) scale(1.06); }
/* The lockup beside the logo is set in the same face and weight as the site's
   headings, so the wordmark reads as part of the title system rather than as
   a separate piece of UI. Header and footer share this exactly. */
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' var(--wdth-display);
  font-size: 1.0625rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
}
.nav__wordmark span {
  display: block;
  font-weight: 800;
  font-size: 0.5rem;
  letter-spacing: 0.40em;
  color: var(--brand-text);
  margin-top: 2px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.nav__link {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--brand-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--white); }

.nav__cta { flex: none; }

/* Burger */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  /* Flex column, not grid: auto grid rows stretch to fill the 44px box,
     which would space the bars unevenly and break the X on open. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex: none;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(6, 5, 7, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.drawer.is-open { opacity: 1; visibility: visible; }

.drawer__links { display: flex; flex-direction: column; gap: 0.25rem; }
.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text);
  padding-block: 0.35rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color var(--dur-fast);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:hover { color: var(--brand-bright); }
.drawer__foot { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); }


/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* Layered scrims: keeps text legible over any photo we drop in, and
   pushes the brand purple through the shadows. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__scrim::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,5,7,0.86) 0%, rgba(6,5,7,0.32) 38%, rgba(6,5,7,0.94) 88%, var(--ink) 100%),
    linear-gradient(94deg, rgba(6,5,7,0.94) 8%, rgba(6,5,7,0.48) 46%, transparent 76%);
}
.hero__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 18% 78%, var(--brand-320), transparent 62%);
  mix-blend-mode: screen;
}

/* Brush bands top and bottom, as on the Online Coaching poster. The top one
   is clipped by the nav area so only its lower edge shows; the bottom one
   anchors the hero and carries the eye into the credentials strip. */
.hero__brush-top,
.hero__brush-bottom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: url('../img/brush-band.png?v=89b921e0') no-repeat center / 100% 100%;
}
/* Hugging the top and bottom edges only — the headline area stays clear,
   exactly as the poster frames its type between the two painted bands. */
.hero__brush-top {
  top: -2%;
  left: -9%;
  width: 118%;
  height: clamp(72px, 11vh, 118px);
  opacity: 0.38;
  transform: rotate(-1.4deg);
}
.hero__brush-bottom {
  bottom: -1%;
  right: -11%;
  width: 122%;
  height: clamp(84px, 14vh, 150px);
  opacity: 0.46;
  transform: rotate(1.1deg);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The circular "REAL COACHING / REAL PROGRESS / REAL RESULTS" stamp from
   the Combat PT poster */
.hero__stamp {
  position: absolute;
  right: calc(var(--gutter) + 1rem);
  bottom: 28%;
  width: clamp(140px, 14vw, 196px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1.5px solid var(--brand-320);
  border-radius: 50%;
  background: rgba(6, 5, 7, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.2rem;
  z-index: 2;
}
.hero__stamp::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--brand-200);
  border-radius: 50%;
}
.hero__stamp p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(0.6875rem, 1.05vw, 0.875rem);
  line-height: 1.22;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero__stamp .accent { display: block; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.65rem;
  border: 1px solid var(--brand-320);
  border-radius: var(--radius-pill);
  background: var(--brand-080);
  backdrop-filter: blur(8px);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-md);
}
.hero__tag .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-glow);
  box-shadow: 0 0 0 4px var(--brand-200);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--brand-200); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.85;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-md);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}
.hero.is-ready .hero__title .line > span { transform: none; }

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}
.hero__sub strong { color: var(--white); font-weight: 600; }

.hero__actions { margin-bottom: clamp(2rem, 5vh, 3.5rem); }

/* Discipline ticker along the bottom of the hero */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__meta li { display: flex; align-items: center; gap: 0.75rem; }
.hero__meta li:not(:last-child)::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
}

/* Scroll hint */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: '';
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, var(--brand-bright), transparent);
  animation: drop 2.2s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%       { transform: scaleY(0); opacity: 0; }
  35%      { transform: scaleY(1); opacity: 1; }
  100%     { transform: scaleY(1) translateY(56px); opacity: 0; }
}


/* ==========================================================================
   09. CREDENTIALS STRIP
   ========================================================================== */

.creds {
  position: relative;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-raised), var(--ink));
}
.creds__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.creds__item {
  background: var(--ink);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 2.5vw, 2rem);
  text-align: center;
  transition: background-color var(--dur) var(--ease-out);
}
.creds__item:hover { background: var(--surface); }
/* Both must be block: the display face is wide enough that "Black Belt"
   wraps, and an inline label would then flow up beside the second line. */
.creds__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.9vw, 2.85rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  background: linear-gradient(160deg, var(--white) 30%, var(--brand-glow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.creds__label {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-wrap: balance;
}


/* ==========================================================================
   10. ABOUT
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.about__figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Matches luca-portrait.jpg exactly. The head-kick shot is near-square and
     its extended leg reaches the frame edge — forcing it into a 4:5 portrait
     crop cut the foot off, which is the one thing the photo is about. */
  aspect-ratio: 900 / 788;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.about__figure img { width: 100%; height: 100%; object-fit: cover; }
.about__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,5,7,0.75));
  pointer-events: none;
}
/* Purple frame offset behind the portrait */
.about__figure-wrap { position: relative; isolation: isolate; }
.about__figure-wrap::before {
  content: '';
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 60px -30px var(--brand);
  z-index: -1;
}

.about__badge {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(6,5,7,0.72);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about__badge img { width: 26px; height: 26px; object-fit: contain; }

.about__body p + p { margin-top: var(--space-md); }
.about__body .lead { color: var(--text); }

/* The line Luca leads on. Sits between the lead and the body copy in weight,
   so it lands as a statement without competing with the section heading. */
.about__hook {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' var(--wdth-display);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}

.about__quote {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--brand);
  background: linear-gradient(90deg, var(--brand-080), transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* Luca's own words, and long enough to be read rather than shouted. The
   display face carries the brand; uppercase at this length would not — the
   posters only set uppercase on short headlines, and body-length copy there
   is sentence case too. */
.about__quote p {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.38;
  letter-spacing: -0.005em;
  text-transform: none;
  text-wrap: pretty;
}
.about__quote cite {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.about__sign { margin-top: var(--space-lg); }


/* ==========================================================================
   11. PILLARS — WHAT WE WORK ON
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.pillar {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--surface), var(--ink-raised));
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
/* Purple wash that fades up on hover */
.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 100% at 50% 0%, var(--brand-120), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.pillar:hover { transform: translateY(-6px); border-color: var(--brand-320); }
.pillar:hover::before { opacity: 1; }

.pillar__num {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: var(--space-md);
}

/* Thin-outlined circle, as used for the icons on the Online Coaching poster */
.pillar__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--brand-320);
  background: var(--brand-080);
  margin-bottom: var(--space-md);
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.pillar:hover .pillar__icon {
  background: var(--brand-200);
  border-color: var(--brand-text);
  transform: scale(1.06);
}
.pillar__icon svg { width: 28px; height: 28px; stroke: var(--brand-glow); }

.pillar h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-bottom: 0.75rem; }
.pillar p { color: var(--text-muted); font-size: var(--fs-body); }

.pillar__list {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
}
.pillar__list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.pillar__list li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--brand);
}


/* ==========================================================================
   12. COACHING
   ========================================================================== */

.coaching {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.coach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.coach-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-320);
  box-shadow: var(--shadow-lift);
}

.coach-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-raised);
}
.coach-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.coach-card:hover .coach-card__media img { transform: scale(1.06); }
.coach-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,5,7,0.1), rgba(17,16,21,0.95));
}

.coach-card__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.coach-card__tag--alt { background: rgba(6,5,7,0.7); border: 1px solid var(--line-strong); }

.coach-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.6vw, 2rem);
}
.coach-card h3 { font-size: clamp(1.375rem, 2.1vw, 1.625rem); margin-bottom: 0.6rem; }
.coach-card p { color: var(--text-muted); font-size: var(--fs-small); }

.coach-card__features {
  margin: var(--space-md) 0 var(--space-lg);
  display: grid;
  gap: 0.6rem;
}
.coach-card__features li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--text);
}
.coach-card__features svg {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  stroke: var(--brand-text);
}

.coach-card__foot {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
/* The price text may wrap; the button must not be squeezed below its label */
.coach-card__foot .btn { flex: 0 0 auto; }
.coach-card__price { flex: 1 1 auto; min-width: 0; }
.coach-card__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.coach-card__price small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.25rem;
  text-wrap: nowrap;
}


/* ==========================================================================
   13. PRICING
   ========================================================================== */

.pricing__tabs {
  display: inline-flex;
  padding: 5px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  position: relative;
}
.pricing__tab {
  position: relative;
  z-index: 1;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.pricing__tab[aria-selected='true'] { color: var(--white); }
.pricing__thumb {
  position: absolute;
  top: 5px; left: 5px;
  height: calc(100% - 10px);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand), var(--brand-bright));
  transition: transform var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
  z-index: 0;
}

.pricing__panel[hidden] { display: none; }
.pricing__panel {
  animation: panelIn 0.55s var(--ease-out);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.price-card:hover { border-color: var(--line-strong); }

.price-card--featured {
  border-color: var(--brand-320);
  background:
    linear-gradient(180deg, var(--brand-080), transparent 42%),
    var(--surface);
  box-shadow: 0 0 0 1px var(--brand-200), var(--shadow-lift);
}
/* Sits inside the purple header bar, so it reads as part of it */
.price-card__flag {
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  font-size: 0.5938rem;
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-text);
  white-space: nowrap;
}

/* Solid purple header bar across the top of the card — the device used for
   "1-1 PRIVATE SESSIONS" and "ONLINE COMBAT COACHING" on the Combat PT
   poster. It runs full-bleed to the card edge, so the card padding is moved
   onto the body rather than the card itself. */
.price-card { padding: 0; overflow: hidden; }

.price-card__head {
  position: relative;
  padding: 1.15rem clamp(1.5rem, 2.6vw, 2.25rem) 1.05rem;
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-bright) 100%);
  margin-bottom: 0;
  /* Flag and title sit side by side as flex siblings rather than the flag
     being absolutely positioned over the bar. Absolute positioning meant the
     pill landed on top of the subtitle as soon as the text ran long enough —
     which is exactly what happened on the 1-to-1 card. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.price-card__head-text { flex: 1 1 14ch; min-width: 0; }
.price-card__head::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
}
.price-card__head h3 {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  color: var(--white);
}
.price-card__head p {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.85);
  margin-top: 0.25rem;
}

.price-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}

.price-card__figure {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.price-card__figure .amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.25rem);
  line-height: 0.9;
  background: linear-gradient(160deg, var(--white) 35%, var(--brand-glow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card__figure .per {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* Session ladder table (1-1 / 2-1) */
.ladder { display: grid; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.ladder__row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.95rem 1.1rem;
  background: var(--ink-raised);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.ladder__row:hover { background: var(--surface-hi); }
/* Circular session-count badge, matching the numbered circles on the
   Combat PT price tables */
.ladder__qty {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-320);
  background: var(--brand-080);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--brand-glow);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.ladder__row:hover .ladder__qty { border-color: var(--brand-text); background: var(--brand-200); }
.ladder__name { font-size: var(--fs-small); font-weight: 600; }
.ladder__name small {
  display: block;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
}
.ladder__price { text-align: right; }
.ladder__price b {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
}
.ladder__price small {
  display: block;
  font-size: 0.6875rem;
  color: var(--brand-text);
  font-weight: 600;
  margin-top: 3px;
}

.price-card__note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: var(--space-md);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--brand-050);
  border: 1px solid var(--brand-120);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.price-card__note svg { flex: none; width: 18px; height: 18px; stroke: var(--brand-text); margin-top: 2px; }

.price-card__features { display: grid; gap: 0.7rem; margin-bottom: var(--space-lg); }
.price-card__features li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: var(--fs-small);
}
.price-card__features svg { flex: none; width: 18px; height: 18px; margin-top: 1px; stroke: var(--brand-text); }
.price-card__features .muted { color: var(--text-dim); }

.price-card__cta { margin-top: auto; padding-top: var(--space-md); }
.price-card__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  font-size: var(--fs-micro);
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.price-card__secure svg { width: 13px; height: 13px; stroke: var(--text-dim); }

/* Policy strip under the pricing tables */
.policies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.policy {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-raised);
}
.policy svg { flex: none; width: 22px; height: 22px; stroke: var(--brand-text); }
.policy h4 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; }
.policy p { font-size: var(--fs-small); color: var(--text-dim); }


/* ==========================================================================
   14. TESTIMONIALS
   ========================================================================== */

.tst { position: relative; }
/* Fade the right edge so the cut-off card reads as "keep scrolling"
   rather than as a clipping bug. */
.tst::after {
  content: '';
  position: absolute;
  top: 0;
  right: calc(var(--gutter) * -1);
  width: clamp(40px, 8vw, 110px);
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink) 78%);
  z-index: 2;
}
.tst__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(400px, 84vw), 1fr);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-md);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tst__track::-webkit-scrollbar { display: none; }

.tst__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--ink-raised));
  transition: border-color var(--dur) var(--ease-out);
}
.tst__card:hover { border-color: var(--brand-320); }

.tst__mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--brand);
  opacity: 0.55;
  margin-bottom: var(--space-sm);
}
.tst__quote {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
  flex: 1;
}
.tst__stars { display: flex; gap: 3px; margin-top: var(--space-md); }
.tst__stars svg { width: 15px; height: 15px; fill: var(--brand-text); }
.tst__person {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}
.tst__avatar {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
}
.tst__name { font-weight: 700; font-size: var(--fs-small); }
.tst__meta { font-size: var(--fs-micro); color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }

.tst__nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: var(--space-sm); }
.tst__btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tst__btn:hover { background: var(--brand); border-color: var(--brand); transform: scale(1.05); }
.tst__btn svg { width: 18px; height: 18px; stroke: currentColor; }


/* ==========================================================================
   15. INSTAGRAM
   ========================================================================== */

.ig__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* The [hidden] rule must exist explicitly: our `display: grid` below beats
   the browser's built-in [hidden] { display: none }, because ANY author rule
   outranks UA styles. Without this, hiding the grid via the hidden attribute
   silently does nothing and both feeds render stacked. */
.ig__grid[hidden] { display: none; }

.ig__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

/* Each tile wraps an official Instagram embed. Before the embed script
   upgrades it, the tile shows a branded placeholder at the right ratio,
   so there is never a layout jump. */
.ig__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.ig__tile:hover { transform: translateY(-4px); border-color: var(--brand-320); }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.ig__tile:hover img { transform: scale(1.07); }
.ig__tile-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(6,5,7,0.1), rgba(6,5,7,0.72));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.ig__tile:hover .ig__tile-overlay { opacity: 1; }
.ig__tile-overlay svg { width: 30px; height: 30px; stroke: var(--white); }
.ig__tile blockquote.instagram-media { margin: 0 !important; min-width: 0 !important; }

/* Follow panel */
.ig__cta {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--brand-320);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--brand-200), transparent 60%),
    var(--ink-raised);
}
/* min-width:0 lets this flex column actually shrink below its content's
   intrinsic width — without it, the long unbreakable handle @sagui_combat
   forces the column wider than the card and spills past the rounded border. */
.ig__cta-text { min-width: 0; }
.ig__cta-text h3 {
  font-size: clamp(1.375rem, 5.5vw, 2.25rem);
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;      /* wrap the handle rather than overflow */
  word-break: break-word;
}
/* The handle is a single long token in the poster's expanded width. Drop it to
   normal width and keep it on its own line so it fits narrow screens cleanly. */
.ig__cta-text h3 .accent {
  font-variation-settings: 'wdth' 100;
  display: inline-block;
}
.ig__cta-text p { color: var(--text-muted); font-size: var(--fs-small); }


/* ==========================================================================
   16. CONTACT
   ========================================================================== */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.contact__aside h2 { margin-bottom: var(--space-md); }

.contact__details { display: grid; gap: 0.75rem; margin-top: var(--space-lg); }
.contact__detail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.contact__detail:hover { border-color: var(--brand-320); transform: translateX(4px); }
.contact__detail-icon {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-080);
  border: 1px solid var(--brand-120);
}
.contact__detail-icon svg { width: 19px; height: 19px; stroke: var(--brand-text); }
.contact__detail dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact__detail dd { font-size: var(--fs-body); font-weight: 600; margin: 2px 0 0; }

/* Form */
.form {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); }
.field { display: grid; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field label .req { color: var(--brand-text); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink-raised);
  color: var(--text);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-hi);
  box-shadow: 0 0 0 3px var(--brand-200);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A3B4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
  padding-right: 2.75rem;
}
.field option { background: var(--ink-raised); }

.field--error input,
.field--error select,
.field--error textarea { border-color: #FF5A6E; }
.field__error {
  font-size: var(--fs-micro);
  color: #FF8794;
  min-height: 1em;
}

/* Custom checkbox for the newsletter opt-in */
.optin {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  margin-top: 0.25rem;
  border: 1px solid var(--brand-120);
  border-radius: var(--radius);
  background: var(--brand-050);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.optin:hover { border-color: var(--brand-320); background: var(--brand-080); }
.optin input { position: absolute; opacity: 0; width: 0; height: 0; }
.optin__box {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--ink-raised);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.optin__box svg { width: 13px; height: 13px; stroke: var(--white); stroke-width: 3; opacity: 0; transform: scale(0.6);
                  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.optin input:checked + .optin__box { background: var(--brand); border-color: var(--brand); }
.optin input:checked + .optin__box svg { opacity: 1; transform: none; }
.optin input:focus-visible + .optin__box { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.optin__text strong { display: block; font-size: var(--fs-small); margin-bottom: 2px; }
.optin__text span { font-size: var(--fs-micro); color: var(--text-dim); line-height: 1.5; }

.form__foot { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.form__divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.form__divider::before, .form__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.form__legal { font-size: var(--fs-micro); color: var(--text-dim); text-align: center; line-height: 1.6; }

/* Success state */
.form__success {
  display: none;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}
.form.is-sent .form__body { display: none; }
.form.is-sent .form__success { display: block; animation: panelIn 0.6s var(--ease-out); }
.form__success-icon {
  width: 68px; height: 68px;
  margin: 0 auto var(--space-md);
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-bright));
  box-shadow: var(--shadow-brand);
}
.form__success-icon svg { width: 32px; height: 32px; stroke: var(--white); stroke-width: 2.5; }
.form__success h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.form__success p { color: var(--text-muted); max-width: 40ch; margin-inline: auto; }

/* Honeypot — hidden from humans, catches naive bots */
.hp { position: absolute !important; left: -9999px; opacity: 0; pointer-events: none; }

.btn.is-busy { pointer-events: none; opacity: 0.75; }
.btn.is-busy .btn__label { visibility: hidden; }
.btn .spinner {
  position: absolute;
  width: 19px; height: 19px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.btn.is-busy .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   16b. CLOSING CTA BAND
   --------------------------------------------------------------------------
   The painted bar that closes the Online Coaching poster — heavy black
   italic set straight onto a loaded purple brush stroke.
   ========================================================================== */

.cta-band {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  text-align: center;
  overflow: clip;
  background: var(--ink);
}
/* The paint is sized off the content, not a fixed height, so the type is
   always comfortably inside the stroke at any viewport width. */
.cta-band__brush {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-1.2deg);
  width: 138%;
  height: calc(100% + 2rem);
  background: url('../img/brush-bar.png?v=810a8a40') no-repeat center / 100% 100%;
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 {
  font-style: italic;
  font-size: clamp(1.75rem, 4.9vw, 3.75rem);
  line-height: 0.94;
  color: var(--black);
  max-width: 15ch;
  margin-inline: auto;
}
.cta-band p {
  margin-top: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-label);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.88);
}
.cta-band .btn-row { justify-content: center; margin-top: var(--space-lg); }

/* Solid black on the paint — the poster's black-on-purple contrast, but as
   a button that still reads as tappable. A ghost outline disappears here. */
.btn--ink {
  --btn-bg: var(--black);
  --btn-fg: var(--white);
}
.btn--ink:hover { box-shadow: 0 18px 44px -18px rgba(0,0,0,0.9); }


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--black);
  padding-block: var(--space-2xl) var(--space-lg);
  overflow: hidden;
}
/* Oversized watermark wordmark */
.footer__mark {
  position: absolute;
  left: 50%;
  bottom: -3.5vw;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 17rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--space-xl);
}
.footer__brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: var(--space-md); }
.footer__brand img { width: 56px; height: 56px; object-fit: contain; }
.footer__tagline { color: var(--text-dim); font-size: var(--fs-small); max-width: 34ch; }

.footer__col h4 {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: var(--space-md);
}
.footer__col ul { display: grid; gap: 0.65rem; }
.footer__col a {
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--white); padding-left: 5px; }

.footer__socials { display: flex; gap: 0.6rem; margin-top: var(--space-md); }
.footer__social {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.footer__social svg { width: 18px; height: 18px; }
.footer__social:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }

.footer__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-dim);
}
.footer__bar a:hover { color: var(--text); }

/* Sticky mobile action bar — always one tap from an enquiry */
.action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(6,5,7,0.9);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.action-bar.is-shown { transform: none; }
.action-bar .btn { flex: 1; padding-block: 0.85rem; font-size: 0.6875rem; }


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  /* No room for the stamp beside the headline once the hero narrows —
     it would land on top of the buttons. */
  .hero__stamp { display: none; }
  .pillars,
  .coaching { grid-template-columns: 1fr; }
  .policies { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .about__figure-wrap { max-width: 480px; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand-col { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .creds__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__scroll { display: none; }
  .ig__grid { grid-template-columns: repeat(2, 1fr); }
  .action-bar { display: flex; }
  body { padding-bottom: 0; }
  .footer { padding-bottom: 5.5rem; }
}

/* --------------------------------------------------------------------------
   Phone tuning.
   Two things change at this size. Letter-spacing and button padding come down,
   because tracking that reads as confident at 1440px just eats horizontal room
   on a 390px screen. And leading tightens — 1.65 line-height is comfortable on
   a wide measure but on a ~30-character line it strands each phrase on its own
   row and turns the page into a marathon. Both also give the layout headroom
   for visitors running larger device text sizes.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body { line-height: 1.55; }

  .btn {
    padding: 0.95rem 1.35rem;
    letter-spacing: 0.09em;
  }
  .btn--sm { padding: 0.75rem 1rem; letter-spacing: 0.07em; }
  .action-bar .btn { padding-inline: 0.7rem; letter-spacing: 0.05em; }

  .lead { line-height: 1.5; }
  .pillar p, .coach-card p, .tst__quote { line-height: 1.5; }
  .pillar__list li, .coach-card__features li,
  .price-card__features li, .policy p { line-height: 1.45; }
  .optin__text span, .form__legal { line-height: 1.4; }
  .eyebrow { letter-spacing: 0.2em; }

  /* The page is long on a phone — claw some of it back without it feeling cramped */
  :root { --section-y: clamp(3.5rem, 12vw, 5rem); }
}

@media (max-width: 560px) {
  .hide-sm { display: none; }
  .form__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .ig__grid { grid-template-columns: 1fr 1fr; }
  .hero { align-items: center; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .action-bar .btn { width: auto; }
  .tst__nav { justify-content: center; }
  .ladder__row { grid-template-columns: 40px 1fr auto; padding: 0.85rem; }
}


/* ==========================================================================
   19. MOTION PREFERENCES
   --------------------------------------------------------------------------
   Everything decorative is switched off for users who ask their OS to
   reduce motion. Content must never depend on an animation to appear.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__title .line > span { transform: none !important; }
  .hero__inner { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
}

/* Print — collapse to a clean readable sheet */
@media print {
  .nav, .drawer, .action-bar, .hero__scroll, .grain, .bloom { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
}

/* Footer lockup: identical treatment to the header, one step larger to suit
   the bigger mark it sits beside. */
.footer__wordmark { font-size: 1.375rem; }
.footer__wordmark span { font-size: 0.625rem; letter-spacing: 0.38em; }

/* Feature bullets carried over from the retired Coaching Options section, so
   the in-person tiers say what you actually get rather than just a price. */
.price-card__features--inperson {
  margin-top: var(--space-md);
  margin-bottom: 0;
}

/* Live Instagram feed slot. Sized to match the static grid it replaces so the
   page doesn't jump when the widget loads. */
/* Second line under the training location — the home-privates note. Smaller
   and dimmer so the gym name stays the thing you read first. */
.contact__detail-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.86em;
  color: var(--text-dim);
}

.ig__live { width: 100%; min-height: 200px; }
/* Custom elements default to display:inline, which makes a widget that is
   visibly full of photos measure as a ~20px line box. Force block so the slot
   lays out around its real content. */
.ig__live > * { display: block; width: 100%; }

/* Fallback state: the live slot is parked, not removed. height:0 + overflow
   clips it out of sight, but the widget inside keeps a real layout box, so
   JS can still measure it and swap the feed back in if it renders late. Using
   display:none here instead would collapse the widget and break that. */
.ig__live.is-standby {
  height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.ig__live[hidden] { display: none; }

/* Post-purchase onboarding note under the online pricing cards. Matches the
   card system: subtle brand border, envelope icon, muted body copy. */
.pricing__onboarding{
  display:flex; align-items:flex-start; gap:0.85rem;
  margin:1.5rem auto 0; padding:1rem 1.25rem;
  border:1px solid var(--brand-320); border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--brand-200), transparent 60%),
    var(--ink-raised);
}
.pricing__onboarding svg{
  width:22px; height:22px; flex:0 0 auto; margin-top:2px; color:var(--brand-bright);
}
.pricing__onboarding p{ margin:0; color:var(--text-muted); font-size:var(--fs-small); line-height:1.55; }
.pricing__onboarding strong{ color:var(--text); font-weight:700; }