/* ==========================================================================
   Minted — landing page styles (index.html)
   Load after css/tokens.css and css/main.css.
   Organization: fixed chrome → hero → section frame → sections in page order
   → motion → reduced-motion → touch → breakpoints (desc).
   ========================================================================== */

/* ============ Fixed chrome (landing only) ============ */
.page-gridlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--minted-stroke-grid) 1px, transparent 1px),
                    linear-gradient(to top, var(--minted-stroke-grid) 1px, transparent 1px);
  background-size: var(--minted-cell) var(--minted-cell);
  background-position: left bottom; opacity: 0.3;
}

/* ============ S1 · Hero — background video: one line of light aligns the team ============
   Two stacked videos. The intro plays once (3.7s): four desks apart in a dim room each make one turn
   and lock into the Minted mark, the light coming up in the seams between them. The video fades up
   from the page on its first frame; the copy fades in from data-reveal-at (seconds) as the desks lock.
   Then the loop takes over with a straight cut (its first frame is the intro's last): the team at
   work on one square, for as long as the hero is on screen. Resting state is the final state: without
   JS, or with reduced motion, the copy is visible and the loop's poster (the aligned square) holds the hero. */
.hero6 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; border-bottom: var(--minted-border-hairline); padding: calc(var(--minted-nav-height) + 60px) var(--minted-pad-x) 90px; background-color: var(--minted-bg-page) }
.hero6__media { position: absolute; inset: var(--minted-nav-height) 0 0; z-index: 0 } /* starts under the fixed nav, so nobody at the top desk is hidden by it */
.hero6__video, .hero6__still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; background-color: var(--minted-bg-page) }
.hero6__video--intro { z-index: 1 } /* the loop waits underneath, cued on the frame the intro ends on; the switch is a straight cut */
.hero6__still { z-index: 1 } /* without JS (it's in <noscript>): the loop's poster covers both videos, since browsers show native controls on a video when scripting is off */
.hero6--looping .hero6__video--intro { opacity: 0 }
/* fixed ground under the copy: headline contrast never depends on the frame */
.hero6__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; /* above both videos, so the ground under the copy never changes at the cut */
  background: linear-gradient(90deg, color-mix(in srgb, var(--minted-dark-900) 92%, transparent) 0%, color-mix(in srgb, var(--minted-dark-900) 72%, transparent) 30%, transparent 54%) }
.hero6__content { position: relative; z-index: 1; display: grid; gap: 28px; justify-items: start; max-width: 620px }
.hero6__title { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 115%; font-size: var(--minted-size-headline); line-height: 1.12; letter-spacing: -0.01em; max-width: 19ch; text-wrap: balance }
.hero6__title .accent { font-style: normal; color: var(--minted-green-300) }
.hero6__sub { margin: 0; color: var(--minted-text-muted); font-size: var(--minted-size-lede); line-height: 1.55; max-width: 40ch; text-wrap: balance }
.hero6__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px }
.hero6__ctas .btn { padding: 20px 38px; font-size: 0.85rem }
.hero6__ctas .btn--secondary { background-color: var(--minted-dark-900-a55) }
.hero6__pause { position: absolute; z-index: 2; right: var(--minted-pad-x); bottom: 28px; width: 44px; height: 44px; display: grid; place-content: center; padding: 0; color: var(--minted-text-secondary); background-color: var(--minted-dark-900-a82); border: var(--minted-border-hairline); border-radius: var(--minted-radius); cursor: pointer; transition: color var(--minted-dur-fast) var(--minted-ease-state), border-color var(--minted-dur-fast) var(--minted-ease-state) }
.hero6__pause:hover { color: var(--minted-green-300); border-color: var(--minted-green-300) }
.hero6__pause[hidden] { display: none } /* the display above would otherwise beat the hidden attribute */
.hero6__pause svg { width: 14px; height: 14px; fill: currentColor }
/* intro: the copy waits for the lock. The hold is on the section, set by its first child, so the reveal restyles only the hero;
   a CSS failsafe shows the copy at 5s if landing.js stalls after that script ran. */
.hero6--intro .hero6__content > * { opacity: 0; animation: hero-failsafe 1ms linear 5s forwards }
.hero6--revealing .hero6__content > * { animation: hero-copy-in 1100ms cubic-bezier(0.35, 0, 0.25, 1) both } /* soft start and soft landing: an ease-out front-loads the opacity and reads as a pop */
.hero6--revealing .hero6__sub { animation-delay: 120ms }
.hero6--revealing .hero6__ctas { animation-delay: 240ms }
/* the video fades up from the page on its first frame; held only while the hero's script runs, with the same kind of failsafe as the copy */
.hero6--media-hold .hero6__media { opacity: 0; animation: hero-failsafe 1ms linear 3s forwards }
.hero6--media-in .hero6__media { animation: hero-fade-in 1400ms cubic-bezier(0.35, 0, 0.25, 1) both }

/* ============ Section frame variants (frame itself is in components.css) ============ */
.sec--team .sec-title { text-align: center }
.sec--team .sec-sub { font-size: var(--minted-size-body); max-width: 70ch; text-align: center; margin-left: auto; margin-right: auto }
.ind-intro__title em, .ggx-intro__title em { font-style: normal; color: var(--minted-green-300) }

/* ============ S2 · The Problem — scroll-scrubbed quote + pain tiles ============ */
.squote { margin: 0 0 clamp(48px, 8vh, 88px); font-family: var(--minted-font-display); font-weight: 700; font-stretch: 115%; font-size: var(--minted-size-quote); line-height: 1.12; letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance }
/* No-JS baseline: quote reads fully lit; JS dims words and lights them on scroll */
.sq-w { color: var(--minted-text-primary); transition: color var(--minted-dur-fast) linear }
.sq-w--em { color: var(--minted-green-300) }
:root.js .sq-w { color: var(--minted-text-faint) }
:root.js .sq-w.lit { color: var(--minted-text-primary) }
:root.js .sq-w--em.lit { color: var(--minted-green-300) }
:root.js .sq-w:hover { color: var(--minted-green-300); transition: color 0ms }

.pain-flow { position: relative; width: 100%; aspect-ratio: 1000/400; margin: clamp(12px, 3vh, 30px) 0 0 }
.pain-flow::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(var(--minted-stroke-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--minted-stroke-grid) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(130% 125% at 50% 50%, #000 42%, transparent 92%);
  mask-image: radial-gradient(130% 125% at 50% 50%, #000 42%, transparent 92%);
  pointer-events: none;
}
.pf-tile {
  position: absolute; z-index: 2;
  padding: clamp(12px, 1.4vw, 20px); display: flex; flex-direction: column;
  justify-content: flex-end; gap: var(--minted-space-2);
  transform: rotate(var(--rot, 0deg));
  animation: pf-drift var(--dur, 9s) ease-in-out infinite; animation-delay: var(--delay, 0s);
  transition: transform 440ms var(--minted-ease-enter), border-color 240ms var(--minted-ease-state),
              background-color 240ms var(--minted-ease-state), box-shadow 340ms var(--minted-ease-state),
              opacity 320ms var(--minted-ease-state);
}
/* Tile placement (desktop composition; <=980px they become a static grid) */
.pf-tile--tactics    { left: 2%;  top: 8%;  width: 18%; height: 44%; --rot: -4deg;   --dur: 8.5s; --delay: -1.2s; --dx: 7px;  --dy: -8px; --rotw: 0.9deg }
.pf-tile--software   { left: 4%;  top: 54%; width: 19%; height: 40%; --rot: 3.5deg;  --dur: 9.5s; --delay: -3s;   --dx: -6px; --dy: 7px;  --rotw: -0.8deg }
.pf-tile--agencies   { left: 30%; top: 24%; width: 22%; height: 52%; --rot: -2deg;   --dur: 11s;  --delay: -0.5s; --dx: 5px;  --dy: 9px;  --rotw: 0.7deg }
.pf-tile--vendors    { left: 59%; top: 6%;  width: 18%; height: 42%; --rot: 3deg;    --dur: 8s;   --delay: -2s;   --dx: -8px; --dy: -6px; --rotw: -0.9deg }
.pf-tile--priorities { left: 64%; top: 54%; width: 21%; height: 42%; --rot: -3.5deg; --dur: 10s;  --delay: -4s;   --dx: 7px;  --dy: 8px;  --rotw: 0.8deg }
.pf-tile__name { font-family: var(--minted-font-display); font-weight: 700; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.05rem, 1.7vw, 1.85rem); line-height: 0.98; color: var(--minted-text-secondary); text-wrap: balance; transition: color 240ms var(--minted-ease-state) }
.pf-tile:hover { animation: none; transform: rotate(0deg) translateY(-6px); z-index: 6 }
.pf-tile:hover .pf-tile__name { color: var(--minted-text-primary) }
.pf-tile__detail { margin: 0; font-family: var(--minted-font-body); font-size: clamp(0.85rem, 1.05vw, 1rem); line-height: 1.45; color: var(--minted-text-secondary); transition: color 220ms var(--minted-ease-state) }
.pain-flow:has(.pf-tile:hover) .pf-tile:not(:hover) { opacity: var(--minted-recede-opacity) }
@keyframes pf-drift {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translate(0, 0) }
  50% { transform: rotate(calc(var(--rot, 0deg) + var(--rotw, 0.8deg))) translate(var(--dx, 6px), var(--dy, -7px)) }
}

/* ============ S3 · GrowthFi Matrix™ — the four pillars as one square ============
   The four quarters are the 2x2 the hero's desks lock into: Brand top left, Technology top right, Content
   bottom left, Growth bottom right. Details always visible; the hover state tints, never lifts (the quarters
   are not controls). Motion: the quarters lock in once on entry (js: setupMatrixLock). Replaced the 6x5 mosaic, Nov 5. */
.sec--matrix { background-color: var(--minted-bg-surface) }
.matrix { display: grid; gap: clamp(40px, 6vh, 64px); justify-items: center; text-align: center }
.matrix__head { display: grid; gap: 22px; justify-items: center; max-width: 900px }
.ggx-intro__title { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 118%; font-size: clamp(1.8rem, 3vw, 2.9rem); line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase }
/* the page's subhead measure (.sec-sub, .ind-intro__lede): three lines from 768px up */
.ggx-intro__body { margin: 0 auto; color: var(--minted-text-secondary); max-width: 62ch; text-wrap: pretty }
.matrix__square { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 100%; max-width: 1040px; background-color: var(--minted-glow-200); border: var(--minted-border-hairline); text-align: left; transition: background-color var(--minted-dur-base) var(--minted-ease-state) }
/* the 1px gaps are the seams: at rest they keep the faint green the hero's seams light up with.
   The lock-in entrance (js: setupMatrixLock) animates from the quarters apart to this resting state. */
.matrix__quad { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: clamp(220px, 21vw, 300px); padding: clamp(22px, 2.4vw, 40px); background-color: var(--pbg); box-shadow: var(--minted-press) }
/* pillar tints, the same mixes the mosaic used (debt: promote to semantic tokens in the #83 sync) */
.matrix__quad--brand   { --pbg: color-mix(in srgb, var(--minted-green-700) 44%, var(--minted-dark-850)) }
.matrix__quad--tech    { --pbg: color-mix(in srgb, var(--minted-green-700) 25%, var(--minted-dark-850)) }
.matrix__quad--content { --pbg: color-mix(in srgb, var(--minted-green-700) 37%, var(--minted-dark-850)) }
.matrix__quad--growth  { --pbg: color-mix(in srgb, var(--minted-green-700) 30%, var(--minted-dark-850)) }
/* hover (pointer devices): the quarter under the pointer takes the deep green and the seams brighten.
   No lift or scale: the quarters are not controls, and a lift reads as something to click */
@media (hover: hover) {
  .matrix__quad { transition: background-color var(--minted-dur-base) var(--minted-ease-state) }
  .matrix__quad .matrix__detail { transition: color var(--minted-dur-fast) var(--minted-ease-state) }
  .matrix__quad:hover { background-color: var(--minted-green-700) }
  .matrix__quad:hover .matrix__detail { color: var(--minted-text-primary) }
  .matrix__square:hover { background-color: var(--minted-glow-300) }
}
.ggx-pillar__name { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 118%; font-size: clamp(1.4rem, 2.2vw, 2.25rem); line-height: 1; text-transform: uppercase; color: var(--minted-text-primary) }
.matrix__detail { margin: 0; color: var(--minted-text-secondary); font-size: clamp(0.95rem, 1.05vw, 1.15rem); line-height: 1.45; text-wrap: pretty }
.matrix__cta { display: grid; gap: 20px; justify-items: center }
.ggx-cta__head { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 115%; font-size: clamp(1.3rem, 1.9vw, 1.95rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance }

/* ============ S4 · What You'll Learn — the book beside the list ============
   The book mockup is the buy page's hero asset (assets/minted-book-mockup.jpg, 1536x1024), cropped to 4:5 by
   object-fit; slot s4-book. Each outcome is a row with a line icon (components.css .icon) where the number was;
   the list stays an <ol>, so the order still reads aloud. No hover: the rows are not links. Motion: [data-reveal]
   only. Replaced the row of four growing cards, Nov 5. */
.learn { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 6vw, 112px); align-items: center }
.learn__media { margin: 0; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border: var(--minted-border-hairline); background-color: var(--minted-bg-surface) }
.learn__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50% }
.learn__body .sec-sub { margin-bottom: clamp(32px, 5vh, 48px) }
.learn-list { list-style: none; margin: 0; padding: 0; border-bottom: var(--minted-border-hairline) }
/* the row type is the outcome type the old cards used; the icon box is one line of it tall,
   so the icon centres on the first line at every size */
.learn-row { --learn-size: clamp(1.05rem, 1.55vw, 1.5rem); display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 0 22px; padding-block: clamp(22px, 2.6vw, 34px); border-top: var(--minted-border-hairline) }
.learn-row__icon { display: flex; align-items: center; height: calc(1.25 * var(--learn-size)); color: var(--minted-text-label) }
.learn-row__text { margin: 0; font-family: var(--minted-font-display); font-weight: 600; font-stretch: 108%; font-size: var(--learn-size); line-height: 1.25; color: var(--minted-text-secondary); text-wrap: pretty }

/* ============ S5 · Why Finance & Regulated Brands — whys + industry scene ============ */
.sec--ind { padding-bottom: 0 }
.ind-intro { display: grid; gap: 24px; max-width: 900px; margin-bottom: clamp(36px, 6vh, 56px) }
.ind-intro__title { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 115%; font-size: clamp(1.9rem, 3.8vw, 3.3rem); line-height: 1.12; letter-spacing: -0.01em; text-transform: uppercase; max-width: 24ch; text-wrap: balance }
.ind-intro__lede { margin: 0; color: var(--minted-text-secondary); max-width: 62ch; text-wrap: pretty }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--minted-space-2); margin-bottom: clamp(36px, 6vh, 56px) }
.why-card { position: relative; padding: clamp(22px, 2.2vw, 32px); min-height: clamp(220px, 26vw, 300px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; gap: var(--minted-space-3); transition: transform 320ms var(--minted-ease-enter), border-color 260ms var(--minted-ease-state), box-shadow 320ms var(--minted-ease-state) }
.why-card:nth-child(2) { transition-delay: 90ms }
.why-card:nth-child(3) { transition-delay: 180ms }
.why-card:hover { transform: translateY(-6px) }
.why-card__lead { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 112%; font-size: var(--minted-size-card); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; color: var(--minted-text-primary); text-wrap: balance }
.why-card__with { display: flex; align-items: center; align-self: stretch; gap: 12px; font-family: var(--minted-font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--minted-text-label) }
.why-card__with::before, .why-card__with::after { content: ""; height: 1px; flex: 1; background: var(--minted-stroke-divider); transition: background-color 260ms var(--minted-ease-state) }
.why-card:hover .why-card__with::before, .why-card:hover .why-card__with::after { background: var(--minted-green-300) }
.why-card__counter { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 112%; font-size: var(--minted-size-card); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; color: var(--minted-green-300); text-wrap: balance }

/* the industry scene. Desktop (981px+), motion on: a 300vh scroll holds a 100vh stage in perspective; one phrase
   shows at a time and changes at the thirds; the eight tiles fly in from depth and from their own corners and stay
   (js: setupIndustryScene adds .is-scene). Below 981px, and with reduced motion: the three phrases stacked, then
   the tiles in a grid that lights up tile by tile (.is-lighting). Replaced the earlier scroll scene, Nov 5. */
.ind-scene { position: relative; margin: 0 calc(-1 * var(--minted-pad-x)) }
.ind-scene__stage { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--minted-space-2); padding: 0 var(--minted-pad-x) var(--minted-space-6) }
.ind-scene__phrases { grid-column: 1 / -1; display: grid; gap: 6px; margin-bottom: clamp(24px, 5vh, 40px) }
.ind-scene__line { margin: 0; max-width: 24ch; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 115%; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; color: var(--minted-text-primary) }
.ind-scene__line em { font-style: normal; color: var(--minted-green-300) }

/* the tile: on the raised plane (main.css card family), icon top, name bottom. No hover: the tiles are not links */
.ind-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 140px; padding: clamp(14px, 1.4vw, 20px); container-type: inline-size }
.ind-tile .icon { color: var(--minted-text-label); transition: color var(--minted-dur-base) var(--minted-ease-state) }
/* the name never runs past its tile: its size is capped so the longest word (--long, in em of this type) fits the inner width */
.ind-tile__name { margin: 0; font-family: var(--minted-font-display); font-weight: 700; font-stretch: 112%; font-size: min(clamp(0.95rem, 1.25vw, 1.3rem), calc(100cqi / var(--long, 7.1))); line-height: 1.14; text-transform: uppercase; color: var(--minted-text-secondary); text-wrap: balance; transition: color var(--minted-dur-base) var(--minted-ease-state) }
/* each tile's place on the stage (--x, --y, % of the stage) and its longest word (--long, in em) */
.ind-tile--banks { --x: 40; --y: 12; --long: 4.3 }
.ind-tile--mortgage { --x: 70; --y: 14; --long: 7.1 }
.ind-tile--insurance { --x: 7; --y: 16; --long: 9.9 }
.ind-tile--fintech { --x: 84; --y: 42; --long: 7.1 }
.ind-tile--ai { --x: 3; --y: 50; --long: 7.1 }
.ind-tile--crypto { --x: 20; --y: 70; --long: 7.1 }
.ind-tile--b2b { --x: 52; --y: 72; --long: 7.1 }
.ind-tile--b2c { --x: 78; --y: 70; --long: 7.1 }
/* phones and tablets with motion on: each tile lights up as it reaches the reading line (js adds .is-lit) */
.ind-scene.is-lighting .ind-tile:not(.is-lit) .icon { color: var(--minted-glow-200) }
.ind-scene.is-lighting .ind-tile:not(.is-lit) .ind-tile__name { color: var(--minted-text-faint) }

/* ============ S5b · Testimonials — the five-column field ============
   Fifteen cards: three centre columns carry the quotes a reader is meant to read;
   two edge columns and a bottom row bleed past the page edges and dissolve under
   a mask. Edge cards are aria-hidden and inert. Below 720px the field is one
   column and the extras are hidden. */
.sec:has(> .testi) { overflow-x: clip }
.testi--field {
  grid-template-columns: repeat(5, minmax(0, 1fr)); width: calc(100% * 5 / 3 + 20px);
  position: relative; left: 50%; transform: translateX(-50%);
  max-height: min(72vh, 860px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 72%, transparent 100%), linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 72%, transparent 100%), linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.testi--field .testi__col { display: grid; gap: var(--minted-space-2); align-content: start }
.testi__col--edge { padding-top: clamp(40px, 6vh, 90px) }
.testi__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--minted-space-2) }
.testi__row--edge { grid-column: 2 / 5 }
.testi-card--edge { pointer-events: none }
.testi-card--edge .testi-card__quote { color: var(--minted-text-muted) }
.testi--field .testi__col > .testi-card:nth-child(2) { transition-delay: 120ms }
.testi--field .testi__col > .testi-card:nth-child(3) { transition-delay: 240ms }
.testi--field .testi__col:nth-child(3) > .testi-card:nth-child(1), .testi--field .testi__col:nth-child(4) > .testi-card:nth-child(1) { transition-delay: 80ms }
.testi--field .testi__col:nth-child(3) > .testi-card:nth-child(2), .testi--field .testi__col:nth-child(4) > .testi-card:nth-child(2) { transition-delay: 200ms }
.testi__row--edge .testi-card:nth-child(2) { transition-delay: 120ms }
.testi__row--edge .testi-card:nth-child(3) { transition-delay: 240ms }

/* ============ S6 · The Team — authors + sessions band ============ */
.authors2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--minted-space-2) }
.author-card { display: grid; grid-template-rows: auto 1fr; transition: border-color 260ms var(--minted-ease-state), box-shadow 320ms var(--minted-ease-state) }
.author-card:nth-child(2) { transition-delay: 100ms }
.author-card__photo { position: relative; aspect-ratio: 16/10; overflow: hidden; border-bottom: var(--minted-border-hairline) }
.author-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: contrast(1.02); display: block }
.author-card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 106, 70, 0.16), rgba(5, 8, 6, 0.3)); mix-blend-mode: multiply; pointer-events: none }
.author-card__info { padding: clamp(20px, 2vw, 30px); display: grid; gap: 14px; align-content: start }
.author-card__id { display: flex; flex-direction: column; gap: var(--minted-space-1) }
.author-card__name { margin: 0; font-family: var(--minted-font-display); font-weight: 800; font-stretch: 120%; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em }
.author-card__role { margin: 0; font-family: var(--minted-font-mono); font-size: var(--minted-size-label); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--minted-text-label) }
.author-card__lead { margin: 0; color: var(--minted-text-secondary); font-size: 0.95rem; line-height: 1.6; text-wrap: pretty }
.author-card__quote { margin: 0; padding-left: 18px; border-left: 2px solid var(--minted-green-300); font-family: var(--minted-font-display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.3; color: var(--minted-text-primary); text-wrap: pretty }
.author-card__note { margin: 0; color: var(--minted-text-secondary); font-size: var(--minted-size-note); line-height: 1.6; text-wrap: pretty }
.author-card__note strong, .author-card__lead strong { color: var(--minted-text-secondary) }
.author-card__name a { color: var(--minted-text-primary); text-decoration: none; transition: color var(--minted-dur-fast) var(--minted-ease-state) }
.author-card__name a::after { content: "↗"; font-size: 0.55em; margin-left: 0.3em; vertical-align: super; color: var(--minted-green-300) }
.author-card__name a:hover { color: var(--minted-green-300) }
.team-band { margin-top: clamp(44px, 8vh, 72px); border: var(--minted-border-hairline); background-color: var(--minted-bg-surface); display: grid; grid-template-columns: 1.15fr 1fr }
.team-band__copy { padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 20px; align-content: start; border-right: var(--minted-border-hairline) }
.team-band__title { margin: 0; font-family: var(--minted-font-display); font-weight: 800; font-stretch: 120%; font-size: var(--minted-size-h3); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em }
.team-band__title .accent-line { color: var(--minted-green-300) }
.team-band__copy p { margin: 0; color: var(--minted-text-secondary); text-wrap: pretty }
.team-band__cta { display: flex; align-items: center; gap: var(--minted-space-3); flex-wrap: wrap; margin-top: 6px }
.team-band__avatars { display: flex; gap: 8px }
.team-band__ava { width: 58px; height: 58px; overflow: hidden; border: var(--minted-border-accent); flex: none }
.team-band__ava img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.28); transform-origin: center 26% }
.team-band__list { padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 16px; align-content: start }
.checklist-label { margin: 0 }

/* ============ S7 · Final CTA — hover-paint grid ============ */
.final3 { position: relative; overflow: hidden; display: flex; justify-content: center; border-top: var(--minted-border-hairline); padding: clamp(120px, 18vh, 200px) var(--minted-pad-x) }
.hovergrid { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: 64px; gap: 1px; overflow: hidden }
.hovergrid span { background: transparent; transition: background 1400ms ease }
.hovergrid span:hover { background: var(--minted-green-500); transition: background 0ms }
.final3__content { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 860px; pointer-events: none }
.final3__content a { pointer-events: auto }
.final3__line1 { margin: 0; font-family: var(--minted-font-display); font-weight: 800; font-stretch: 120%; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; text-transform: uppercase; max-width: 22ch; text-wrap: balance }
.final3__line1 em { font-style: normal; color: var(--minted-green-300) }
.final3__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; transition-delay: 260ms /* reveal stagger */ }
.final3__ctas .btn { padding: 22px 40px; font-size: 0.875rem }
/* "AI-powered" never breaks at its hyphen */
.final3__keep { white-space: nowrap }
/* the entry wave (js: setupGridWave): a wave cell takes the deep green with no transition; when the class comes
   off it fades on .hovergrid span's own 1400ms, like the pointer trail */
.hovergrid span.is-wave { background: var(--minted-green-700); transition: background 0ms }

/* ============ S8 · FAQ — native details accordion ============ */
.faq { max-width: 900px; margin: 0 auto }

/* ============ Motion ============ */
@keyframes hero-failsafe { to { opacity: 1 } }
@keyframes hero-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .hero6__pause, .hero6__video--intro { display: none } /* no playback: the loop's poster holds the hero from the first paint */
  .sq-w, :root.js .sq-w, :root.js .sq-w.lit { color: var(--minted-text-primary) }
  .sq-w--em, :root.js .sq-w--em, :root.js .sq-w--em.lit { color: var(--minted-green-300) }
  .pf-tile { animation: none }
  .pain-flow:has(.pf-tile:hover) .pf-tile:not(:hover) { opacity: 1 }
  .pf-tile:hover { transform: rotate(0deg) translateY(-4px) }
}

/* ============ Touch devices (any width, incl. iPad landscape) ============ */
/* no hover available: reveal hover-only content, neutralize hover effects */
@media (hover: none) {
  .pain-flow:has(.pf-tile:hover) .pf-tile:not(:hover) { opacity: 1 }
}

/* ============ Breakpoints ============ */
@media (min-width: 981px) {
  /* S5: the industry scene, only with motion on (js adds .is-scene) */
  .ind-scene__stage { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .ind-scene__phrases { margin-bottom: 24px }
  .ind-tile { min-height: 160px }
  .ind-scene.is-scene { height: 300vh }
  .ind-scene.is-scene .ind-scene__stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; padding: 0; overflow: hidden; perspective: 1200px; perspective-origin: 50% 50% }
  .ind-scene.is-scene .ind-scene__phrases { position: absolute; left: 50%; top: 50%; z-index: 2; display: block; width: min(80vw, 820px); height: 0; margin: 0; transform: translateX(-50%); text-align: center; pointer-events: none }
  .ind-scene.is-scene .ind-scene__line { position: absolute; left: 0; right: 0; top: 0; max-width: none; opacity: 0; transform: translateY(calc(-50% + 28px)); transition: opacity 520ms var(--minted-ease-state), transform 520ms var(--minted-ease-state) }
  .ind-scene.is-scene .ind-scene__line.is-on { opacity: 1; transform: translateY(-50%) }
  .ind-scene.is-scene .ind-scene__line.is-past { opacity: 0; transform: translateY(calc(-50% - 28px)) }
  /* the composition: position (% of the stage, kept clear of the nav and the bottom edge) and three sizes */
  .ind-scene.is-scene .ind-tile { position: absolute; left: calc(var(--x) * 1%); top: min(max(calc(var(--y) * 1%), calc(var(--minted-nav-height) + 36px)), calc(100% - var(--w) - 3vh)); width: var(--w); min-height: 0; aspect-ratio: 1; gap: 0; opacity: 0; will-change: transform, opacity }
  .ind-scene.is-scene .ind-tile--l { --w: clamp(170px, 15vw, 240px) }
  .ind-scene.is-scene .ind-tile--m { --w: clamp(136px, 12vw, 190px) }
  .ind-scene.is-scene .ind-tile--s { --w: clamp(130px, 9.5vw, 156px) }
  .ind-scene.is-scene .ind-tile--s .ind-tile__name { font-size: min(clamp(0.82rem, 0.95vw, 1rem), calc(100cqi / var(--long, 7.1))) }
}
@media (max-width: 980px) {
  .hero6 { padding: calc(var(--minted-nav-height) + 40px) var(--minted-pad-x) 72px }
  .pain-flow { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--minted-space-2) }
  .pain-flow::before { display: none }
  .pf-tile { position: static; transform: none !important /* beats .pf-tile:hover lift */; animation: none; left: auto; top: auto; width: auto; height: auto; min-height: 100px }
  .learn { grid-template-columns: 1fr; row-gap: clamp(40px, 7vh, 64px) }
  .learn__media { aspect-ratio: 3 / 2; max-width: 720px }
  .why-grid { grid-template-columns: 1fr }
  .why-card { min-height: 150px }
  .authors2 { grid-template-columns: 1fr }
  .team-band { grid-template-columns: 1fr }
  .team-band__copy { border-right: 0; border-bottom: var(--minted-border-hairline) }
}
@media (max-width: 720px) {
  /* phone: the video becomes a 4:3 block under the nav and the copy follows, everything centred.
     The desk square sits right of centre in the 16:9 frame (its seam cross is at 69.6% 46.3%), further right
     than a 4:3 cover crop can reach, so the frame is cropped to its right edge and scaled 1.25x around a point
     chosen to land the cross on the centre of the block. Valid while both videos stay 16:9. */
  .hero6 { display: block; min-height: 0; padding: var(--minted-nav-height) 0 0 }
  .hero6__media { position: relative; inset: auto; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden }
  .hero6__video, .hero6__still { object-position: 100% 46%; transform: scale(1.25); transform-origin: 98% 31.5% }
  .hero6__media::after { background: linear-gradient(0deg, var(--minted-bg-page) 0%, transparent 26%) }
  .hero6__content { padding: 24px var(--minted-pad-x) 64px; max-width: none; justify-items: center; text-align: center }
  .hero6__ctas { justify-content: center }
  .hero6__title { font-size: clamp(1.9rem, 8.4vw, 2.4rem) }
  .hero6__pause { bottom: auto; top: calc(var(--minted-nav-height) + 75vw - 56px) }
  .sec-title, .sec-sub { text-align: center; margin-left: auto; margin-right: auto }
  .squote { text-align: center; margin-left: auto; margin-right: auto }
  .ind-intro { justify-items: center; text-align: center }
  .why-card__with { align-self: stretch }
  .matrix__square { grid-template-columns: 1fr }
  .matrix__quad { min-height: 150px }
  .matrix__cta .btn { white-space: normal; line-height: 1.6; max-width: 100% }
  /* the phone hero's ratio, so the book reads larger in the narrow frame */
  .learn__media { aspect-ratio: 4 / 3 }
  .learn-row { grid-template-columns: 24px minmax(0, 1fr); gap: 0 16px }
  .learn-row .icon { width: 24px; height: 24px }
  .ind-scene__phrases { justify-items: center; text-align: center }
  .ind-scene__line { margin-inline: auto }
  .ind-tile .icon { width: 24px; height: 24px }
  .testi--field { grid-template-columns: 1fr; max-height: none; width: 100%; left: auto; transform: none; -webkit-mask-image: none; mask-image: none }
  .testi__col--edge, .testi__row--edge { display: none }
  .author-card__info { text-align: center; justify-items: center }
  .author-card__quote { border-left: 0; padding-left: 0; padding-top: 14px; border-top: 2px solid var(--minted-green-300) }
  .team-band__copy { text-align: center; justify-items: center }
  .team-band__cta { flex-direction: column; align-items: center; width: 100%; margin-top: 2px }
  .team-band__cta .btn { width: 100%; white-space: normal; line-height: 1.7; padding: 15px 16px; text-align: center }
  .team-band__list { justify-items: center }
  .checklist li { text-align: left }
  .hovergrid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); grid-auto-rows: 48px }
}
@media (max-width: 480px) {
  .hero6__ctas { flex-direction: column; align-items: stretch; width: 100% }
  .hero6__ctas .btn { width: 100%; padding: 18px 14px; white-space: normal; line-height: 1.6 }
  .final3__ctas { width: 100%; flex-direction: column; align-items: stretch }
  .final3__ctas .btn { width: 100%; white-space: normal; line-height: 1.6; padding: 18px 14px }
}