/*
Theme Name: MCM360 Sports Site
Theme URI: https://mcm360sports.com/
Author: MCM Digital Products
Author URI: https://mcmdigitalproducts.com/
Description: The public sales website for MCM360 Sports. Hand-built, no page builder, no jQuery, fonts and screenshots bundled. Creates its own pages and menu on activation. Prices live in inc/pricing.php.
Version: 1.20.1
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcm360-sports-site
*/

/* ==========================================================================
   Palette. MCM360 Sports brand colors (Oct 2026): Navy #1F3A68 · Star #E3A93B
   Ring #B0B0B0 · Mist #F4F6F9. Variable names are historical: --green is the
   brand Navy (used on light), --lime is the Star gold (used on dark).
   ========================================================================== */
:root {
	--green: #1F3A68;
	--green-deep: #152B50;
	--lime: #E3A93B;
	--lime-hi: #EDBB5A;
	--silver: #B0B0B0;
	--steel: #4A5568;
	--ink: #0F1D36;
	--ink-2: #152744;
	--ink-3: #1E3355;
	--gold: #E3A93B;
	--paper: #FFFFFF;
	--mist: #F4F6F9;
	--line: #D9DEE7;
	--text: #1A2233;
	--muted: #4A5568;
	--on-dark: #E8ECF3;
	--on-dark-muted: #AEB7C7;

	--display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Impact, sans-serif;
	--body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--wrap: 1200px;
	--gutter: clamp(20px, 4vw, 40px);
	--radius: 6px;
	--head-h: 72px;
	--hatch: repeating-linear-gradient(118deg, rgba(255,255,255,.028) 0 2px, transparent 2px 16px);
}

/* Fonts are bundled. No outside font service is called. */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("assets/fonts/inter-var.woff2") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--paper); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .98; letter-spacing: .005em; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(46px, 7vw, 96px); }
h2 { font-size: clamp(34px, 4.4vw, 58px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; font-weight: 700; letter-spacing: .01em; }
h4 { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
strong, b { font-weight: 700; }
[id] { scroll-margin-top: calc(var(--head-h) + 70px); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.band-dark :focus-visible, .site-head :focus-visible, .site-foot :focus-visible, .band-green :focus-visible, .hero :focus-visible { outline-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: 12px; transform: translateY(-300%); z-index: 200; background: #fff; color: var(--ink); padding: 12px 16px; font-weight: 700; border-radius: var(--radius); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border: 2px solid transparent; border-radius: 4px; font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: .045em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ico { flex: none; }
.btn-go { background: var(--lime); color: var(--ink); }               /* primary: the demo */
.btn-go:hover { background: var(--lime-hi); color: var(--ink); }
.btn-solid { background: var(--green); color: #fff; }                  /* on light: form submit */
.btn-solid:hover { background: var(--green-deep); color: #fff; }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }   /* secondary: follows the text color */
.btn-line:hover { background: rgba(127,127,127,.14); color: inherit; }
.btn-line-light { color: #fff; }
.btn-on-green { background: #fff; color: var(--green-deep); }
.btn-on-green:hover { background: var(--mist); color: var(--green-deep); }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-note { margin: 16px 0 0; font-size: 15px; color: var(--on-dark-muted); }
.text-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--lime); color: inherit; padding-bottom: 1px; }
.text-link:hover { color: var(--green); }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 100; background: var(--ink); color: #fff; border-bottom: 1px solid var(--ink-3); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--head-h); }
.brand { display: block; flex: none; }
.logo { height: 46px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list a { display: block; padding: 10px 12px; color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; border-radius: 4px; background-image: linear-gradient(var(--lime), var(--lime)); background-repeat: no-repeat; background-size: 0 2px; background-position: 12px calc(100% - 4px); transition: background-size .25s ease; }
.nav-list a:hover, .nav-list .current-menu-item > a, .nav-list a[aria-current="page"] { background-size: calc(100% - 24px) 2px; color: #fff; }
.burger { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; background: transparent; color: #fff; border: 2px solid var(--ink-3); border-radius: 4px; font: 700 18px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.burger-box { display: grid; gap: 4px; width: 20px; }
.burger-box i { display: block; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] .burger-box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Bands ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(44px, 6vw, 72px) 0; }
.section.no-top { padding-top: 0; }
.band-mist { background: var(--mist); }
.band-dark { background-color: var(--ink); background-image: var(--hatch); color: var(--on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: #fff; }
.band-dark a:not(.btn) { color: #fff; }
.band-green { background-color: var(--green); background-image: var(--hatch); color: #fff; }
.band-green a:not(.btn) { color: #fff; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.eyebrow::before { content: ""; flex: none; width: 30px; height: 4px; background: var(--lime); transform: skewX(-24deg); }
.band-dark .eyebrow, .hero .eyebrow { color: var(--lime); }
.band-green .eyebrow { color: #fff; }
.band-green .eyebrow::before { background: #fff; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 62ch; }
.band-dark .lede { color: var(--on-dark); }
.section-head { max-width: 800px; margin: 0 0 clamp(36px, 5vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.hl { color: var(--lime); }
.band-mist .hl, .section:not(.band-dark):not(.band-green) .hl { color: var(--green); }
.band-dark .hl, .hero .hl { color: var(--lime); }

/* ---------- Hero ---------- */
.hero { position: relative; background-color: var(--ink); background-image: var(--hatch); color: var(--on-dark); overflow: clip; }
.hero::before { content: ""; position: absolute; right: -14vw; top: -22vw; width: 78vw; height: 78vw; max-width: 1180px; max-height: 1180px; border-radius: 50%; border: clamp(18px, 3vw, 44px) solid rgba(176,176,176,.07); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 5vw, 72px); background: var(--paper); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(84px, 10vw, 150px); }
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero .lede { color: var(--on-dark); margin-bottom: 30px; }
.phones { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 10px 0 0; }
.phones .phone { --pw: clamp(190px, 19vw, 262px); flex: none; }
.phones .phone-c { --pw: clamp(210px, 21.5vw, 296px); z-index: 2; }
.phones .phone-l { margin-right: calc(var(--pw) * -.34); margin-top: 9%; transform: rotate(-5deg); transform-origin: bottom right; }
.phones .phone-r { margin-left: calc(var(--pw) * -.34); margin-top: 9%; transform: rotate(5deg); transform-origin: bottom left; }
.phones .phone-l .phone-body, .phones .phone-r .phone-body { filter: brightness(.9); }

/* ---------- Phone frame (drawn in CSS, no downloaded mockup) ---------- */
.phone { --pw: 280px; margin: 0; width: var(--pw); max-width: 100%; }
.phone-body { position: relative; padding: calc(var(--pw) * .034); background: #0A0C0E; border-radius: calc(var(--pw) * .145); box-shadow: inset 0 0 0 1.5px #3A4148, inset 0 0 0 4px #0A0C0E, 0 34px 70px -28px rgba(0,0,0,.6), 0 12px 24px -12px rgba(0,0,0,.35); }
.phone-body::after { content: ""; position: absolute; right: -2.5px; top: 22%; width: 3px; height: 11%; background: #2A3036; border-radius: 0 2px 2px 0; }
.phone-screen { aspect-ratio: 390 / 844; overflow: hidden; border-radius: calc(var(--pw) * .112); background: #F2F3F5; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone figcaption, .browser figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.band-dark .phone figcaption, .band-dark .browser figcaption { color: var(--on-dark-muted); }

/* ---------- Browser frame ---------- */
.browser { margin: 0; }
.browser-body { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(15,29,54,.45), 0 10px 24px -14px rgba(15,29,54,.25); }
.band-dark .browser-body { border-color: var(--ink-3); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #E6EAF1; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #B6BECC; }
.browser-bar span { flex: 1; max-width: 420px; height: 16px; margin-left: 14px; border-radius: 8px; background: #fff; }
.browser img { width: 100%; }

/* ---------- Facts strip ---------- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts li { padding: 26px 20px; border-left: 1px solid var(--line); text-align: center; }
.facts li:first-child { border-left: 0; }
.facts b .count-vis { text-align: center; }
.facts span { max-width: 24ch; margin-left: auto; margin-right: auto; }
.facts b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 4.4vw, 60px); line-height: .95; color: var(--green); text-transform: uppercase; }
.facts span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.4; color: var(--muted); }

/* ---------- Split: copy beside screenshots ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split + .split { margin-top: clamp(72px, 10vw, 140px); }
.split.flip .split-media { order: -1; }
.split-copy h2, .split-copy h3.big { font-size: clamp(32px, 3.8vw, 50px); font-weight: 800; line-height: .98; }
.split-copy p { max-width: 54ch; }
.split-media { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 30px); }
.split-media .phone { --pw: clamp(180px, 20vw, 264px); }
.split-media .phone:nth-child(2) { margin-top: clamp(28px, 5vw, 64px); }
.split-media.one .phone { --pw: clamp(220px, 24vw, 300px); }
.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; max-width: 54ch; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 14px; height: 8px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
.band-dark .ticks li::before, .band-green .ticks li::before { border-color: var(--lime); }
.band-green .ticks li::before { border-color: #fff; }
.ticks b { font-weight: 700; }
.more-link { margin-top: 24px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: block; padding: 28px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; font-size: 16px; color: var(--muted); }
a.card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
a.card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 18px 30px -22px rgba(15,29,54,.4); color: var(--text); }
a.card::after { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--lime); transition: width .25s ease; }
a.card:hover::after { width: 100%; }
.card .plan-for { min-height: 2.9em; margin-bottom: 10px; }
.card .price b { font-size: clamp(54px, 5.4vw, 76px); }
.card .go { display: inline-block; margin-top: 16px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.band-dark .card { background: var(--ink-2); border-color: var(--ink-3); color: var(--on-dark); }
.band-dark .card p { color: var(--on-dark-muted); }
.num { display: block; margin-bottom: 14px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .1em; color: var(--lime); }
.section:not(.band-dark) .num { color: var(--green); }

/* Roles */
.role { padding: 26px 24px; border-top: 4px solid var(--lime); background: #fff; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }
.role h3 { margin-bottom: 8px; }
.role p { margin: 0; font-size: 16px; color: var(--muted); }
.role .who { display: block; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }

/* Promises (dark) */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink-3); }
.promise { padding: 30px 26px 8px; border-left: 1px solid var(--ink-3); }
.promise:first-child { border-left: 0; padding-left: 0; }
.promise h3 { color: #fff; margin-bottom: 10px; }
.promise p { color: var(--on-dark-muted); font-size: 16px; }

/* Showcase of the club website */
.showcase { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.shots-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); }

.shots-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 72px); }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 32px 28px 30px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--green); border-radius: var(--radius); }
.plan-for { min-height: 2.7em; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.plan h3 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; margin-bottom: 18px; min-height: 2.1em; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; }
.price b { font-family: var(--display); font-weight: 800; font-size: clamp(60px, 6vw, 84px); line-height: .9; color: var(--ink); }
.price span { font-size: 16px; font-weight: 600; color: var(--muted); }
.price-sub { margin: 0 0 20px; font-size: 16px; color: var(--muted); }
.plan .ticks { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--line); gap: 10px; font-size: 16px; flex: 1; }
.plan .cta-row { margin-top: 26px; }
.tiers { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.tiers li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--mist); border-radius: 4px; font-size: 16px; }
.tiers b { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--ink); white-space: nowrap; }
.tiers li > span:first-child { white-space: nowrap; }
.tiers small { font-size: 14px; color: var(--muted); font-weight: 600; }
.fine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.fine li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 16.5px; }
.fine b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; margin-bottom: 4px; }
.example { padding: 28px; background: var(--ink); background-image: var(--hatch); color: var(--on-dark); border-radius: var(--radius); }
.example h3 { color: #fff; }
.example p:last-child { margin-bottom: 0; }
.example .sum { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--lime); line-height: 1; }

/* FAQ */
.faq { max-width: 880px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 22px 56px 22px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 20px; height: 3px; margin-top: -1.5px; background: var(--green); transition: transform .2s ease; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq .answer { padding: 0 56px 24px 0; max-width: 68ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Page head (inner pages) ---------- */
.page-head { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 10vw, 132px); overflow: clip; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(24px, 4.4vw, 60px); background: var(--paper); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.page-head.to-mist::after { background: var(--mist); }
.page-head h1 { font-size: clamp(44px, 6.4vw, 88px); max-width: 16ch; margin-bottom: 20px; }
.page-head .cta-row { margin-top: 30px; }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.page-head-grid .split-media { margin-bottom: -40px; }

/* Jump links on the Features page */
.jump { position: sticky; top: var(--head-h); z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.jump ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a { display: block; padding: 9px 14px; white-space: nowrap; border-radius: 4px; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--mist); }
.jump a:hover { background: var(--green); color: #fff; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature .split { align-items: start; }
.feature .split-copy { position: sticky; top: calc(var(--head-h) + 90px); }
.feature-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.feature-list li { padding: 14px 0; border-top: 1px solid var(--line); }
.feature-list b { display: block; font-size: 17px; }
.feature-list span { display: block; font-size: 16px; color: var(--muted); }
.band-mist .feature-list li { border-color: #D3D9E3; }

/* ---------- Closing band ---------- */
.closing { padding: clamp(52px, 7vw, 88px) 0; }
.closing-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.closing h2 { margin-bottom: 10px; color: #fff; }
.closing p { margin: 0; max-width: 52ch; font-size: 18px; }

/* ---------- Mike's note ---------- */
.note { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.note blockquote { margin: 0; padding: 0; font-size: clamp(20px, 2vw, 25px); line-height: 1.5; }
.note blockquote p { max-width: 36em; }
.note .sig { margin-top: 22px; font-size: 16px; color: var(--muted); }
.note .sig b { display: block; font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .03em; color: var(--text); }
.badge-art { justify-self: center; width: min(100%, 300px); }

/* ---------- Forms ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.form { display: grid; gap: 4px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.field { margin: 0 0 18px; }
.field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 16px; }
.field .opt { font-weight: 500; color: var(--muted); font-size: 14px; margin-left: 4px; }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 17px; color: var(--text); background: #fff; border: 2px solid #8A94A6; border-radius: 4px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field-error { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: #B3261E; }
.form-alert { margin: 0 0 22px; padding: 16px 18px; background: #FDECEA; border-left: 5px solid #B3261E; color: #5F1410; border-radius: 4px; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 0; }
.form-note { font-size: 14.5px; color: var(--muted); max-width: 34ch; }
.form-done { padding: 34px 30px; background: var(--mist); border-left: 6px solid var(--green); border-radius: var(--radius); }
.form-done h2 { font-size: clamp(32px, 3.4vw, 44px); }
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.aside-card { padding: 28px 26px; background: var(--mist); border-radius: var(--radius); }
.aside-card h2 { font-size: 28px; }
.aside-card + .aside-card { margin-top: 20px; }
.aside-card p:last-child, .aside-card ul:last-child { margin-bottom: 0; }

/* ---------- Plain text pages ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(28px, 3vw, 38px); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose li { margin-bottom: .4em; }
.updated { font-size: 15px; color: var(--muted); }

/* ---------- Demo page ---------- */
.demo-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.demo-more-h { margin: 36px 0 4px; }
.demo-more { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px 22px; }
.demo-more li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 10px 0; border-top: 1px solid var(--line, #E3E7EC); }
.demo-more li .nm { color: var(--muted, #5B6570); }
.demo-more li span:last-child { flex-basis: 100%; }
.demo-role { padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.demo-role .who { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.demo-role h3 { margin-bottom: 8px; }
.demo-role ul { margin: 12px 0 0; padding-left: 1.1em; font-size: 16px; color: var(--muted); }
.demo-role li { margin-bottom: 6px; }
.big-cta { text-align: center; }
.big-cta .cta-row { justify-content: center; }
.big-cta .btn { min-height: 68px; padding: 18px 36px; font-size: clamp(24px, 2.6vw, 30px); }
.big-cta p { margin: 16px auto 0; max-width: 52ch; color: var(--on-dark-muted); font-size: 16px; }

/* ---------- 404 ---------- */
.lost { text-align: center; padding: clamp(72px, 12vw, 160px) 0; }
.lost .score { font-family: var(--display); font-weight: 800; font-size: clamp(110px, 20vw, 240px); line-height: .8; color: var(--lime); }
.lost h1 { font-size: clamp(36px, 5vw, 60px); margin-top: 18px; }
.lost .cta-row { justify-content: center; margin-top: 28px; }
.lost .lede { margin-left: auto; margin-right: auto; }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: var(--on-dark-muted); padding: clamp(48px, 6vw, 80px) 0 0; font-size: 16px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); padding-bottom: clamp(36px, 5vw, 56px); }
.foot-logo { height: 54px; width: auto; margin-bottom: 18px; }
.foot-brand p { max-width: 36ch; margin: 0; }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-nav h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: .12em; color: var(--lime); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav a { display: inline-block; padding: 7px 0; color: #fff; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.foot-base { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--ink-3); font-size: 15px; }
.foot-base p { margin: 0; }
.foot-base a { color: #fff; }

/* ==========================================================================
   Smaller screens. Keep these blocks in descending order.
   ========================================================================== */
@media (max-width: 1080px) {
	.burger { display: inline-flex; }
	.site-nav { display: block; padding: 0 0 18px; }
	.head-in { flex-wrap: wrap; }
	.site-nav { flex-basis: 100%; }
	.js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gutter) 24px; background: var(--ink); border-bottom: 1px solid var(--ink-3); max-height: calc(100svh - var(--head-h)); overflow-y: auto; box-shadow: 0 30px 40px -20px rgba(0,0,0,.5); }
	.js .site-nav.is-open { display: block; }
	.nav-list { display: block; }
	.nav-list a { padding: 15px 2px; font-size: 19px; border-bottom: 1px solid var(--ink-3); border-radius: 0; background-image: none; }
	.nav-list .current-menu-item > a, .nav-list a[aria-current="page"] { color: var(--lime); }
	.nav-cta { margin-top: 18px; width: 100%; min-height: 54px; font-size: 21px; }
	.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.promise:nth-child(odd) { border-left: 0; padding-left: 0; }
	.promise:nth-child(n+3) { border-top: 1px solid var(--ink-3); }
}

@media (max-width: 900px) {
	:root { --head-h: 66px; }
	.logo { height: 42px; }
	.hero-in { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(70px, 12vw, 110px); }
	.phones { margin-top: 14px; }
	.phones .phone { --pw: clamp(150px, 30vw, 240px); }
	.phones .phone-c { --pw: clamp(170px, 34vw, 270px); }
	.split, .showcase, .note, .contact-grid, .page-head-grid { grid-template-columns: minmax(0, 1fr); }
	.split.flip .split-media { order: 0; }
	.split-media .phone { --pw: clamp(150px, 36vw, 250px); }
	.split-media.one .phone { --pw: clamp(210px, 52vw, 290px); }
	.feature .split-copy { position: static; }
	.page-head-grid .split-media { margin-bottom: 0; }
	.facts { grid-template-columns: repeat(2, 1fr); }
	.facts li:nth-child(odd) { border-left: 0; }
	.facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
	.plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
	.plan h3, .plan-for, .card .plan-for { min-height: 0; }
	.grid-3, .demo-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot-in { grid-template-columns: minmax(0, 1fr); }
	.badge-art { width: 200px; justify-self: start; }
	.closing-in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
	body { font-size: 16.5px; }
	.btn { font-size: 20px; }
	.hero .cta-row .btn, .page-head .cta-row .btn, .closing .cta-row .btn, .lost .cta-row .btn { width: 100%; }
	.hero .cta-row, .page-head .cta-row, .closing .cta-row { width: 100%; }
	.grid-2, .grid-3, .grid-4, .demo-roles, .fine, .field-row, .shots-row { grid-template-columns: minmax(0, 1fr); }
	.shots-row { gap: 22px; }
	.promises { grid-template-columns: minmax(0, 1fr); }
	.promise { border-left: 0; padding-left: 0; }
	.promise + .promise { border-top: 1px solid var(--ink-3); }
	.foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faq summary { padding-right: 44px; }
	.faq .answer { padding-right: 0; }
	.form-foot .btn { width: 100%; }
	.form-note { max-width: none; }
	.split-media { gap: 12px; }
	.tiers li { flex-direction: column; gap: 2px; }
}

@media (max-width: 400px) {
	.facts { grid-template-columns: minmax(0, 1fr); }
	.facts li { border-left: 0; }
	.facts li + li { border-top: 1px solid var(--line); }
	.foot-nav { grid-template-columns: minmax(0, 1fr); }
	.logo { height: 40px; }
	.burger-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.btn:hover, a.card:hover { transform: none; }
}

/* ==========================================================================
   1.1.0: motion and interactive parts.
   Rules: only opacity and transform are animated. Nothing is hidden unless
   js/theme.js has put "reveal-on" on <html>. Reduced motion turns it all off
   (see the last block in this file).
   ========================================================================== */

/* ---------- Fade and rise on scroll ---------- */
.reveal-on .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms); }
.reveal-on .rv.is-in { opacity: 1; transform: none; }
/* Check marks draw in just after their line arrives. */
.reveal-on .ticks li.rv::before { transform: rotate(-45deg) scale(0); transition: transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--rv-d, 0ms) + .25s); }
.reveal-on .ticks li.rv.is-in::before { transform: rotate(-45deg) scale(1); }

/* ---------- Count-up numbers ---------- */
/* The count spans sit inside <b>; keep the older "span" rules for labels off them. */
.price b span, .facts b span, .tiers b span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.price b .count-vis, .facts b .count-vis, .tiers b .count-vis { display: inline-block; }
.price b .sr-only, .facts b .sr-only, .tiers b .sr-only { position: absolute; }
.count-vis { display: inline-block; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }

/* ---------- Hero: slow float and a little drift on scroll ---------- */
@keyframes m360-float { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
.hero .phones { transform: translateY(var(--par, 0px)); }
.hero .phones .phone-body { animation: m360-float 7s ease-in-out infinite alternate; }
.hero .phones .phone-l .phone-body { animation-duration: 8.5s; animation-delay: -2s; }
.hero .phones .phone-r .phone-body { animation-duration: 9.5s; animation-delay: -4.5s; }

/* ---------- Header tightens after scrolling (moves, never resizes) ---------- */
.site-head, .head-in, .logo, .jump { transition: transform .25s ease; }
.logo { transform-origin: left center; }
.site-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,0)); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.is-scrolled .site-head { transform: translateY(-10px); }
.is-scrolled .head-in { transform: translateY(5px); }
.is-scrolled .logo { transform: scale(.88); }
.is-scrolled .site-head::after { opacity: 1; }
.is-scrolled .jump { transform: translateY(-10px); }
.nav-open .site-head::after { opacity: 0; }

/* ---------- Hover lift ---------- */
.plan, .demo-role, .tile { transition: transform .2s ease, box-shadow .2s ease; }
.plan:hover, .demo-role:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -24px rgba(15,29,54,.45); }
.btn:active { transform: translateY(0); }

/* ---------- Features jump bar: where you are ---------- */
.jump a { transition: background-color .2s ease, color .2s ease; }
.jump a[aria-current] { background: var(--ink); color: #fff; }

/* ---------- "See it as" switcher ---------- */
.roles-tabs { display: none; }
.tabs-on .roles-tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; max-width: 100%; margin: 0 0 clamp(28px, 4vw, 48px); padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.roles-tab { min-height: 48px; padding: 10px 26px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: 700 21px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.roles-tab:hover { background: var(--mist); }
.roles-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.roles-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.roles-panel + .roles-panel { margin-top: clamp(56px, 8vw, 96px); }
.roles-who { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.roles-copy h3.big { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1; }
.tabs-on .roles-who { display: none; }
.tabs-on .roles-panels { display: grid; }
.tabs-on .roles-panel { grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.tabs-on .roles-panel.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* ---------- Pricing calculator ---------- */
.calc { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--green); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); }
.calc-on .calc-static { display: none; }
.calc-live[hidden], .calc-panel[hidden] { display: none; }
.calc-table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 16px; }
.calc-table caption { padding: 0 0 10px; text-align: left; font: 700 22px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.calc-table th, .calc-table td { padding: 10px 12px 10px 0; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.calc-table thead th { font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0 0 28px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--mist); min-width: 0; }
.seg-item { position: relative; display: block; min-width: 0; }
.seg-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-item span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 12px; border-radius: 5px; text-align: center; font: 700 19px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--text); transition: background-color .2s ease, color .2s ease; }
.seg-item input:checked + span { background: var(--ink); color: #fff; }
.seg-item input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.calc-label { display: block; margin-bottom: 10px; font-weight: 700; font-size: 17px; }
.calc-hint { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.calc-slider { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 18px; align-items: center; }
.calc input[type="number"] { width: 100%; min-height: 52px; padding: 10px 12px; font: inherit; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); background: #fff; border: 2px solid #8A94A6; border-radius: 4px; }
.calc input[type="number"]:focus { outline: 3px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --fill: 10%; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--green) 0, var(--green) var(--fill), #CDD4E0 var(--fill), #CDD4E0 100%); }
.calc input[type="range"]::-moz-range-track { height: 10px; border-radius: 5px; background: #CDD4E0; }
.calc input[type="range"]::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--green); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; background: var(--green); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(15,29,54,.4); }
.calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--green); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(15,29,54,.4); }
.calc input[type="range"]:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 6px; }
.stepper { display: inline-grid; grid-template-columns: 56px 110px 56px; gap: 8px; }
.stepper button { min-height: 52px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); font: 700 28px/1 var(--display); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.stepper button:hover { background: var(--ink); color: #fff; }
.stepper input { text-align: center; }
.calc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.calc-field { margin: 0; }
.calc-field .calc-label { font-size: 15.5px; min-height: 2.6em; display: flex; align-items: flex-end; }
.money { position: relative; display: block; }
.money::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 19px; color: var(--muted); pointer-events: none; }
.calc .money input { padding-left: 28px; }
.calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; }
.tile { padding: 20px 20px 18px; background: var(--mist); border-radius: var(--radius); }
.tile-main { background-color: var(--ink); background-image: var(--hatch); color: var(--on-dark); }
.tile-l { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.tile-main .tile-l { color: var(--lime); }
.tile b { display: block; margin: 8px 0 6px; font: 800 clamp(40px, 4.4vw, 58px)/.95 var(--display); color: var(--ink); }
.tile-main b { color: #fff; }
.tile-s { display: block; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.tile-main .tile-s { color: var(--on-dark-muted); }
.calc-say { margin: 24px 0 0; font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; line-height: 1.45; min-height: 2.9em; }
.calc-note { margin: 10px 0 0; font-size: 15.5px; color: var(--muted); }
.calc-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.calc-foot-note { flex: 1; min-width: 220px; font-size: 14.5px; color: var(--muted); }
.calc-pair { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.calc-wrap { margin-top: clamp(40px, 6vw, 72px); }
.calc-wrap > h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; margin-bottom: 20px; }
.calc-teaser { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(16px, 2vw, 24px); padding: 24px 28px; background: var(--mist); border-left: 6px solid var(--green); border-radius: var(--radius); }
.calc-teaser h3 { margin-bottom: 4px; }
.calc-teaser p { margin: 0; color: var(--muted); }

@media (max-width: 1080px) {
	.calc-pair { grid-template-columns: minmax(0, 1fr); }
	.calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.roles-panel { grid-template-columns: minmax(0, 1fr); }
	.tabs-on .roles-tabs { display: grid; }
	.roles-tab { padding: 10px 8px; }
	.seg { grid-auto-flow: row; }
	.calc-out { grid-template-columns: minmax(0, 1fr); }
	.tile b { font-size: 48px; }
}

@media (max-width: 620px) {
	.roles-tab { font-size: 18px; letter-spacing: .03em; }
	.calc-slider { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.calc-slider input[type="number"] { max-width: 160px; }
	.calc-table { font-size: 14.5px; }
	.calc-table thead th { font-size: 12px; }
	.calc-foot .btn { width: 100%; }
	.calc-teaser .btn { width: 100%; }
}

@media (max-width: 400px) {
	.calc-grid { grid-template-columns: minmax(0, 1fr); }
	.calc-field .calc-label { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero .phones { transform: none; }
	.hero .phones .phone-body { animation: none !important; }
	.reveal-on .rv, .reveal-on .ticks li.rv::before { opacity: 1; transform: none; transition: none; }
	.reveal-on .ticks li.rv::before { transform: rotate(-45deg); }
	.is-scrolled .site-head, .is-scrolled .head-in, .is-scrolled .jump { transform: none; }
	.is-scrolled .logo { transform: none; }
	.plan:hover, .demo-role:hover { transform: none; }
	.tabs-on .roles-panel, .tabs-on .roles-panel.is-active { transition: none; }
}

@media print {
	.site-head, .site-foot, .closing, .jump, .burger { display: none; }
	.band-dark, .hero, .page-head { background: #fff !important; color: #000; }
	.band-dark h1, .hero h1, .page-head h1 { color: #000; }
}

/* Signed-in administrators: keep the header below the WordPress toolbar. */
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-head { top: 0; } }

/* ==========================================================================
   1.2.0: "Easy for everyone" and the AI demonstration.
   Same motion rules as above: only opacity and transform move, and the
   typed-out version only exists after js/theme.js adds "talk-on".
   Without it (scripts off, or reduced motion) the examples are a plain list.
   ========================================================================== */

/* Seven header links: tighten the spacing on smaller laptops so they fit on one line. */
@media (min-width: 1081px) and (max-width: 1260px) {
	.head-in { gap: 16px; }
	.site-nav { gap: 12px; }
	.nav-list { gap: 0; }
	.nav-list a { padding: 10px 9px; background-position: 9px calc(100% - 4px); }
	.nav-list a:hover, .nav-list .current-menu-item > a, .nav-list a[aria-current="page"] { background-size: calc(100% - 18px) 2px; }
	.nav-cta { padding: 8px 12px; }
	.nav-list a { font-size: 15px; }
}
@media (min-width: 1081px) and (max-width: 1180px) {
	.nav-cta .btn-ico { display: none; }
}

/* Safety net: if the links still don't fit on one line (browser zoom,
   Windows display scaling, a missing font, a longer menu built by hand),
   theme.js adds .nav-squeeze and the header switches to the Menu button. */
.nav-squeeze .burger { display: inline-flex; }
.nav-squeeze .head-in { flex-wrap: wrap; }
.nav-squeeze .site-nav { display: none; flex-basis: 100%; position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gutter) 24px; background: var(--ink); border-bottom: 1px solid var(--ink-3); max-height: calc(100svh - var(--head-h)); overflow-y: auto; box-shadow: 0 30px 40px -20px rgba(0,0,0,.5); }
.nav-squeeze .site-nav.is-open { display: block; }
.nav-squeeze .nav-list { display: block; }
.nav-squeeze .nav-list a { padding: 15px 2px; font-size: 19px; border-bottom: 1px solid var(--ink-3); border-radius: 0; background-image: none; }
.nav-squeeze .nav-list .current-menu-item > a, .nav-squeeze .nav-list a[aria-current="page"] { color: var(--lime); }
.nav-squeeze .nav-cta { margin-top: 18px; width: 100%; min-height: 54px; font-size: 21px; }
.nav-squeeze .nav-cta .btn-ico { display: inline-block; }

/* ---------- Icons ---------- */
.ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--mist); color: var(--green); }
.band-mist .ico { background: #fff; }
.band-dark .ico { background: var(--ink-3); color: var(--lime); }
.ico-svg { display: block; flex: none; }

/* ---------- Easy for everyone ---------- */
.ease { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ease-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3.4vw, 48px); }
.ease-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; padding: 24px 0; border-top: 1px solid var(--line); }
.ease-item h3 { margin: 2px 0 6px; font-size: clamp(22px, 2vw, 25px); }
.ease-item p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.ease-media .phone { --pw: clamp(170px, 16.5vw, 228px); }

/* ---------- AI band: copy beside the demonstration ---------- */
.talk-band { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 5.5vw, 88px); align-items: center; }
.talk-copy h2 { font-size: clamp(48px, 6.4vw, 92px); margin-bottom: 18px; }
.safe { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.safe li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; max-width: 50ch; }
.safe .ico-svg { margin-top: 1px; color: var(--green); }
.band-dark .safe .ico-svg { color: var(--lime); }
.safe-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); font-size: 16px; }
.fineprint { margin: 26px 0 0; max-width: 86ch; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- The demonstration window ---------- */
.talk { min-width: 0; }
.talk-win { position: relative; background: #fff; color: var(--text); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.75), 0 18px 30px -18px rgba(0,0,0,.5); }
.section:not(.band-dark) .talk-win { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -44px rgba(15,29,54,.45); }
.talk-bar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 16px; background: #E6EAF1; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 700; color: var(--ink); }
.talk-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.talk-bar em { margin-left: auto; padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-style: normal; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.talk-list { list-style: none; margin: 0; padding: 20px; display: grid; gap: 22px; }
.talk-scene { display: grid; gap: 10px; align-content: start; min-width: 0; }
.talk-list .talk-scene + .talk-scene { padding-top: 22px; border-top: 1px dashed var(--line); }
.talk-who { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--green); }
.talk-ask, .talk-say { margin: 0; max-width: 86%; padding: 11px 16px; font-size: 16px; line-height: 1.42; }
.talk-ask { justify-self: end; background: var(--ink); color: #fff; border-radius: 18px 18px 5px 18px; }
.talk-say { justify-self: start; background: var(--mist); color: var(--text); border-radius: 18px 18px 18px 5px; }
.talk-done { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--green); }
.talk-done .ico-svg, .ev-s .ico-svg { width: 20px; height: 20px; }
.talk-card { justify-self: start; width: min(100%, 430px); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 22px -18px rgba(15,29,54,.55); }
.talk-card span, .talk-card small, .talk-card b { display: block; }
.talk-card .sr-only { position: absolute; }
/* Schedule card, laid out like an event in the app */
.ev { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 14px 14px 0; }
.ev-date { display: grid !important; place-items: center; align-content: center; gap: 3px; height: 60px; border-radius: 11px; background: var(--ink); color: #fff; font-family: var(--display); line-height: 1; }
.ev-date small { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.ev-date b { font-size: 25px; font-weight: 800; letter-spacing: .01em; }
.ev-t { font-size: 17px; font-weight: 700; line-height: 1.25; }
.ev-flag { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 99px; background: #F7E7B0; color: #4A3A00; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; vertical-align: 2px; }
.ev-m { font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.ev-s { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 0 11px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 700; color: var(--green); }
/* Announcement preview */
.post { padding: 14px; }
.post-h { display: grid !important; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.post-h .ico-svg { width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--mist); color: var(--green); }
.post-h b { font-size: 15.5px; line-height: 1.25; }
.post-h small { font-size: 13.5px; color: var(--muted); }
.post-b { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; }
/* Short list of names */
.ppl { padding: 14px; }
.ppl-h { font-size: 15.5px; font-weight: 700; }
.ppl-list { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ppl-n { padding: 6px 11px; border-radius: 99px; background: var(--mist); font-size: 14.5px; font-weight: 600; }
.ppl-f { padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.talk-note { margin: 14px 2px 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.band-dark .talk-note { color: var(--on-dark-muted); }

/* The typed-out version (scripts on, motion allowed) */
.talk-on .talk-list { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.talk-stage { display: grid; margin: 0; padding: 20px 20px 8px; list-style: none; }
.talk-stage .talk-scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.talk-stage .talk-scene.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.talk-stage .talk-part { opacity: 0; transform: translateY(12px); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
.talk-stage .talk-ask { transform: translateY(12px) scale(.96); transform-origin: bottom right; }
.talk-stage .talk-part.is-in { opacity: 1; transform: none; }
.talk-input { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 10px; align-items: center; margin: 4px 14px 14px; padding: 8px 8px 8px 16px; min-height: 66px; border: 1.5px solid #C4CBD8; border-radius: 16px; background: #fff; }
.talk-typed { font-size: 16px; line-height: 1.4; color: var(--text); }
.talk-typed:empty::before { content: attr(data-ph); color: #7A8496; }
.talk-typed.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--green); animation: m360-caret 1s steps(1) infinite; }
@keyframes m360-caret { 50% { opacity: 0; } }
.talk-send { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mist); color: #7A8496; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.talk-send .ico-svg { width: 20px; height: 20px; }
.talk-send.is-ready { background: var(--green); color: #fff; }
.talk-send.is-sent { transform: scale(.86); }
.talk-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; }
.talk-pick, .talk-pause { min-height: 40px; padding: 8px 13px; white-space: nowrap; border-radius: 99px; border: 1.5px solid var(--line); background: transparent; color: inherit; font: 600 14.5px/1.1 var(--body); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.band-dark .talk-pick, .band-dark .talk-pause { border-color: var(--ink-3); color: var(--on-dark); }
.talk-pick:hover, .talk-pause:hover { border-color: var(--lime); }
.talk-pick[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.talk-pause { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.talk-pause::before { content: ""; width: 10px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.talk-pause.is-paused::before { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }

/* ---------- AI page ---------- */
.ai-head .page-head-grid { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; }
.ai-head .talk-note { color: var(--on-dark-muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.steps .card { border-top: 6px solid var(--green); }
.steps .num { font-size: 40px; line-height: 1; letter-spacing: .02em; }
.ask-groups { columns: 2; column-gap: clamp(16px, 2vw, 24px); }
.ask-group { break-inside: avoid; margin: 0 0 clamp(16px, 2vw, 24px); padding: 28px 26px 12px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--green); border-radius: var(--radius); }
.ask-group h3 { margin-bottom: 6px; }
.ask-who { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }
.ask-group ul { list-style: none; margin: 0; padding: 0; }
.ask-group li { padding: 14px 0; border-top: 1px solid var(--line); }
.ask-group li b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.ask-group li span { display: block; margin-top: 3px; font-size: 15px; color: var(--muted); }
.ask-group li span::before { content: ""; display: inline-block; width: 12px; height: 7px; margin: 0 8px 3px 2px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); }

/* ---------- Short band on the audience pages ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 96px); align-items: start; }
.duo-half h2 { font-size: clamp(32px, 3.6vw, 48px); }
.duo-half p { max-width: 50ch; }
.quotes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; justify-items: start; }
.quotes li { max-width: 100%; padding: 11px 16px; border-radius: 18px 18px 18px 5px; background: var(--ink-3); color: #fff; font-size: 16.5px; line-height: 1.4; }
.duo-note { margin: 18px 0 0; font-size: 15px; color: var(--on-dark-muted); }

@media (max-width: 1080px) {
	.ease { grid-template-columns: minmax(0, 1fr); }
	.ease-media { order: -1; }
	.ease-media .phone { --pw: clamp(150px, 26vw, 230px); }
	.safe-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.talk-band, .duo, .ai-head .page-head-grid { grid-template-columns: minmax(0, 1fr); }
	.steps { grid-template-columns: minmax(0, 1fr); }
	.ask-groups { columns: 1; }
	.talk { max-width: 620px; }
}

@media (max-width: 620px) {
	.ease-grid { grid-template-columns: minmax(0, 1fr); }
	.ease-item { padding: 20px 0; }
	.talk-list, .talk-stage { padding-left: 14px; padding-right: 14px; }
	.talk-ask, .talk-say { max-width: 94%; font-size: 15.5px; }
	.talk-input { margin: 4px 10px 12px; }
	.safe-row { grid-template-columns: minmax(0, 1fr); }
	.ask-group { padding: 24px 20px 8px; }
	.talk-pause { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.talk-stage .talk-part, .talk-stage .talk-scene { transition: none; }
	.talk-typed.is-typing::after { animation: none; }
}

/* 1.2.1: the Features jump bar never hides a link. Wide screens wrap onto a second row; phones scroll with a fade that hints there is more. */
.jump a { padding: 8px 9px; font-size: 14px; }
.jump ul { gap: 4px; }
@media (min-width: 900px) { .jump ul { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 899px) {
	.jump .wrap { position: relative; }
	.jump ul { padding-right: 44px; scroll-padding: 0 44px; }
	.jump .wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 80%); }
}

/* ---------- Get started (1.3.0) ---------- */
.start-step { border: 0; padding: 0; margin: 0 0 34px; min-width: 0; }
.start-step legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0; margin-bottom: 16px; font-family: var(--display, inherit); font-size: 22px; font-weight: 800; line-height: 1.2; }
.start-step legend .opt { font-size: 14px; font-weight: 500; }
.start-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; font-size: 16px; font-weight: 800; flex: none; }
.start-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.start-kind { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; }
.start-kind:has(input:checked) { border-color: var(--green); background: var(--mist); }
.start-kind:focus-within { outline: 3px solid var(--green); outline-offset: 2px; }
.start-kind input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--green); }
.start-kind span { display: grid; gap: 4px; }
.start-kind b { font-size: 18px; }
.start-kind em { font-style: normal; font-size: 15px; }
.start-kind small { font-size: 14px; font-weight: 600; }
.start-color > span { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.start-color input[type=color] { width: 56px; height: 44px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.start-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.start-check input { width: 18px; height: 18px; margin-top: 4px; flex: none; accent-color: var(--green); }
.start-agree { padding: 18px; background: var(--mist); border-radius: var(--radius); }
.start-form input[type=file] { display: block; width: 100%; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; }
.start-list { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 14px; }
.start-list li b { display: block; }
.form-done h3 { margin: 26px 0 8px; font-size: 20px; }
@media (max-width: 640px) { .start-kinds { grid-template-columns: 1fr; } }

/* ---------- FAQ hub (1.3.5) ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faq-hub [hidden] { display: none !important; }
.faq-tools { margin-bottom: 48px; }
.faq-search input { width: 100%; max-width: 880px; font: inherit; font-size: 18px; padding: 16px 18px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); }
.faq-search input:focus { outline: none; border-color: var(--green); }
.faq-count { min-height: 1.5em; margin: 10px 0 18px; color: var(--muted); font-size: 15px; }
.faq-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-cats a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--mist); color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.2; }
.faq-cats a span { font-size: 12px; font-weight: 700; color: var(--green); }
.faq-cats a:hover, .faq-cats a:focus-visible { border-color: var(--green); background: #fff; }
.faq-cat { padding-top: 40px; scroll-margin-top: calc(var(--head-h) + 12px); }
.faq-cat + .faq-cat { border-top: 4px solid var(--mist); margin-top: 32px; }
.faq-cat-head h2 { margin-bottom: 6px; }
.faq-cat-head p { color: var(--muted); max-width: 68ch; margin-bottom: 18px; }
.faq-top { margin-top: 14px; font-size: 14px; }
.faq-top a { color: var(--muted); }
.faq-none { font-size: 18px; margin-top: 24px; }
@media (max-width: 620px) {
	.faq-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
	.faq-cats a { flex: 0 0 auto; }
	.faq-tools { margin-bottom: 24px; }
}
.league-shot{margin-top:clamp(28px,4vw,44px);max-width:1100px}

/* ---------- Feature pages: the walkthrough ---------- */
.fp-head .eyebrow a { color: inherit; text-decoration: none; }
.fp-head .eyebrow a:hover { text-decoration: underline; }
.fp-split { align-items: center; }
.fp-h3 { margin: 30px 0 4px; font-size: 20px; }
.walk { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.walk-phone { --pw: clamp(230px, 24vw, 300px); }
.walk-screen { position: relative; }
.walk-screen img { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.walk-screen img.on { opacity: 1; }
.walk-tap { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(227,169,59,.35); box-shadow: 0 0 0 3px rgba(227,169,59,.9), 0 6px 16px rgba(0,0,0,.25); opacity: 0; transform: scale(1.6); pointer-events: none; z-index: 2; }
.walk-tap.go { animation: walk-tap 1.4s ease-out forwards; }
@keyframes walk-tap { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(.82); } 100% { opacity: .9; transform: scale(1); } }
.walk-bar { display: flex; align-items: center; gap: 8px; }
.walk-btn { min-width: 44px; min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 15px/1 inherit; cursor: pointer; }
.walk-btn:hover { border-color: var(--green); }
.walk-play { min-width: 74px; }
.walk-dots { display: flex; gap: 6px; padding: 0 4px; }
.walk-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.walk-dots i.on { background: var(--green); transform: scale(1.25); }
.walk-steps { list-style: none; margin: 18px 0 10px; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.walk-steps button { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; cursor: pointer; transition: border-color .2s, background .2s; }
.walk-steps li.on button { border-color: var(--lime); background: #FDF6E8; }
.walk-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mist); font-weight: 800; font-size: 14px; }
.walk-steps li.on .walk-n { background: var(--lime); color: var(--ink); }
.walk-note { font-size: 14.5px; color: var(--muted); margin: 0; }
@media (prefers-reduced-motion: reduce) { .walk-screen img { transition: none; } .walk-tap.go { animation: none; opacity: 1; transform: none; } }
.fp-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.fp-pg { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
.fp-pg:hover { border-color: var(--green); }
.fp-pg span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.fp-next { text-align: right; }
.fp-all { text-align: center; }
@media (max-width: 700px) { .fp-pager { grid-template-columns: 1fr 1fr; } .fp-all { grid-column: 1 / -1; order: 3; } }
.fl-link { display: block; color: inherit; text-decoration: none; }
.fl-link span { display: block; }
.feature-list .fl-more { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--green); }
.fl-link:hover b { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.band-dark .feature-list .fl-more { color: var(--lime); }
.split-media .walk-phone { --pw: clamp(230px, 24vw, 300px); }
@media (max-width: 900px) { .fp-split .split-media { order: -1; margin-bottom: 8px; } }
.walk-cap { display: none; margin: 0; max-width: 320px; min-height: 3em; text-align: center; font-size: 15.5px; line-height: 1.4; font-weight: 600; }
@media (max-width: 900px) { .walk-cap { display: block; } }

/* ==========================================================================
   1.6.0: a moving picture in every page's top band (inc/hero-visuals.php).
   The cards reuse the AI chat engine; the phones reuse the walkthrough player.
   ========================================================================== */
.head-with-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.head-with-media h1 { font-size: clamp(40px, 4.8vw, 72px); }
.head-media { position: relative; z-index: 1; display: flex; justify-content: center; min-width: 0; }
.head-media .talk { width: 100%; max-width: 560px; }
.talk-hero .talk-win { text-align: left; }
.band-dark .walk-cap { color: var(--on-dark); }
.band-dark .walk-dots i { background: rgba(255,255,255,.28); }
.band-dark .walk-dots i.on { background: var(--lime); }
.walk-cap.walk-cap-on { display: block; min-height: 0; }
.head-media .walk { gap: 12px; }
.head-media .walk-phone { --pw: clamp(200px, 19vw, 250px); }

/* Receipt card */
.rc { padding: 14px 16px; }
.rc-h { font-size: 15.5px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rc-row { display: flex !important; justify-content: space-between; gap: 16px; padding: 9px 0 0; font-size: 15px; line-height: 1.35; }
.rc-row > span { color: var(--muted); }
.rc-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-total { margin-top: 9px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 17px; }
.rc-total > span { color: var(--ink); font-weight: 700; }
.rc .ev-s { margin-top: 12px; padding-bottom: 2px; }

/* Checklist card: items tick off one at a time */
.tk { padding: 14px 16px; }
.tk-h { font-size: 15.5px; font-weight: 700; }
.tk-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tk-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; line-height: 1.35; }
.tk-c { display: grid !important; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; }
.tk-c .ico-svg { width: 18px; height: 18px; }
.tk .ppl-f { margin-top: 12px; }
.talk-stage .tk-list li { opacity: .38; }
.talk-stage .tk-c { background: var(--mist); color: transparent; transition: background-color .3s ease, color .3s ease; }
.talk-stage .tk.is-in .tk-list li { animation: m360-tk-row .4s ease forwards; animation-delay: calc(var(--i) * .52s + .35s); }
.talk-stage .tk.is-in .tk-c { animation: m360-tk-dot .4s ease forwards; animation-delay: calc(var(--i) * .52s + .35s); }
@keyframes m360-tk-row { to { opacity: 1; } }
@keyframes m360-tk-dot { 0% { transform: scale(.6); background: var(--mist); color: transparent; } 60% { transform: scale(1.15); } 100% { transform: scale(1); background: var(--green); color: #fff; } }

/* Chips card: chips pop in one at a time */
.talk-stage .chp .ppl-n { opacity: 0; transform: translateY(8px) scale(.9); }
.talk-stage .chp.is-in .ppl-n { animation: m360-chip .35s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * .33s + .25s); }
@keyframes m360-chip { to { opacity: 1; transform: none; } }

.fp-get { align-self: start; padding: 26px 28px; border-radius: 16px; background: var(--mist); }
.fp-get .fp-h3 { margin-top: 0; }
.fp-get .cta-row { margin: 22px 0 0; }

@media (max-width: 900px) {
	.head-with-media { grid-template-columns: minmax(0, 1fr); }
	.head-media { margin-top: 8px; }
	.head-media .walk-phone { --pw: clamp(200px, 56vw, 260px); }
	.fp-split .fp-get { order: 0; }
}
@media (max-width: 620px) {
	.fp-get { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.talk-stage .tk-list li, .talk-stage .chp .ppl-n { opacity: 1; transform: none; animation: none !important; }
	.talk-stage .tk-c { background: var(--green); color: #fff; animation: none !important; }
}
.talk-hero .talk-card { width: 100%; }
.talk-hero[data-noinput] .talk-stage { padding-bottom: 20px; }

/* ---------- 1.7.0: "Your app, not ours" on the home page ---------- */
.own { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.own-phone { --pw: clamp(220px, 22vw, 270px); }
.own-screen { position: relative; overflow: hidden; background: linear-gradient(165deg, #46525E 0%, #232B33 55%, #161B20 100%); }
.own-time { position: absolute; top: 3.2%; left: 0; right: 0; text-align: center; font: 700 12px/1 var(--body); color: #fff; letter-spacing: .02em; }
.own-grid { position: absolute; top: 10%; left: 7%; right: 7%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9% 10%; }
.own-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.own-cell i { display: block; width: 100%; aspect-ratio: 1; border-radius: 23%; background: rgba(255,255,255,.16); }
.own-cell:nth-child(3n) i { background: rgba(255,255,255,.11); }
.own-cell:nth-child(4n+1) i { background: rgba(255,255,255,.2); }
.own-cell u { display: block; width: 70%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); text-decoration: none; }
.own-app .own-ico { display: grid; place-items: center; background: var(--c1); color: var(--c2); box-shadow: inset 0 0 0 2px var(--c2), 0 6px 14px rgba(0,0,0,.35); font: 800 clamp(13px, 1.3vw, 16px)/1 var(--display); font-style: normal; letter-spacing: .02em; transition: background-color .3s, color .3s; }
.own-app .own-name { width: auto; height: auto; background: none; color: #fff; font: 600 10.5px/1.1 var(--body); white-space: nowrap; }
.own-dock { position: absolute; left: 5%; right: 5%; bottom: 3.5%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8%; padding: 4.5% 6%; border-radius: 20px; background: rgba(255,255,255,.12); }
.own-dock i { display: block; aspect-ratio: 1; border-radius: 23%; background: rgba(255,255,255,.18); }
.own-ring { position: absolute; left: 50%; top: 36%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(227,169,59,.35); box-shadow: 0 0 0 3px rgba(227,169,59,.9); opacity: 0; pointer-events: none; }
.own-open { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 10%; text-align: center; background: var(--c1); color: #fff; opacity: 0; transform: scale(.2); transform-origin: 63% 28%; }
.own-crest { display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--c2); color: var(--c1); font: 800 clamp(26px, 2.8vw, 38px)/1 var(--display); font-style: normal; box-shadow: 0 0 0 5px rgba(255,255,255,.18); }
.own-full { font: 800 clamp(20px, 2.1vw, 26px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.own-open small { font-size: 11.5px; opacity: .8; }
.own-cap { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted); text-align: center; }
.own-cap span { color: var(--ink); }
/* Animated version (js adds own-on) */
.own-on .own-app { opacity: 0; transform: scale(.3); transition: opacity .35s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
.own-on.is-added .own-app { opacity: 1; transform: none; }
.own-on.is-tap .own-ring { animation: walk-tap .65s ease-out forwards; }
.own-on .own-open { transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.own-on.is-open .own-open { opacity: 1; transform: none; }
.own-split .split-media { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .own-on .own-app, .own-on .own-open { transition: none; } }
/* About Mike */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about-card h2 { font-size: clamp(24px, 2.4vw, 30px); }
.about-card .ticks li { font-size: 16px; }
.about-straight { max-width: 46em; margin: 28px 0 0; font-size: 17.5px; line-height: 1.55; }
#ask .cta-row { margin-top: 24px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }
/* 1.7.1: Mike's photo */
.mike-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #1F3A68; }
.mike-card { margin-bottom: 20px; padding: 0; background: var(--mist); border-radius: var(--radius); overflow: hidden; }
.mike-card .mike-photo { border-radius: 0; aspect-ratio: 566 / 600; object-fit: cover; object-position: 50% 12%; }
.mike-card-t { padding: 20px 26px 24px; }
.mike-card-t p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.mike-card-t .mike-card-k { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--green); }
.mike-card-t .mike-card-n { margin: 2px 0 8px; font: 800 30px/1 var(--display); text-transform: uppercase; color: var(--ink); }
.mike-card-mobile { display: none; }
.about-photo { margin: -4px 0 22px; aspect-ratio: 566 / 640; object-fit: cover; object-position: 50% 15%; }
@media (max-width: 900px) {
	.mike-card-side { display: none; }
	.mike-card-mobile { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
	.mike-card-mobile .mike-photo { aspect-ratio: 1; height: 100%; object-position: 50% 15%; }
	.mike-card-mobile .mike-card-t { padding: 14px 16px; }
	.mike-card-mobile .mike-card-t p { font-size: 14.5px; }
	.mike-card-mobile .mike-card-t .mike-card-n { font-size: 26px; margin-bottom: 4px; }
	.mike-card-mobile .mike-card-t .mike-card-k { font-size: 11.5px; }
	.about-photo { max-width: 340px; }
}

/* ==========================================================================
   The Huddle (blog), 1.12.0
   ========================================================================== */
.h-head .eyebrow a { color: inherit; text-decoration: none; }
.h-head h1 { max-width: 20ch; }
.h-search { display: flex; gap: 10px; max-width: 680px; margin-top: 28px; }
.h-search input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 16px; border: 2px solid var(--ink-3); border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 17px; }
.h-search input:focus { outline: 3px solid var(--lime); outline-offset: 1px; border-color: var(--lime); }
.h-search .btn { min-height: 52px; }
.h-chips { margin-top: 22px; }
.h-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.h-chips a { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--ink-3); border-radius: 999px; color: var(--on-dark); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.h-chips a:hover { border-color: var(--lime); }
.h-chips a[aria-current="page"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* Post cards */
.hc { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.hc:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,29,54,.10); }
.hc-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.hc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hc:hover .hc-img img { transform: scale(1.03); }
.hc-noimg { display: block; width: 100%; height: 100%; background-color: var(--ink-2); background-image: var(--hatch); }
.hc-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.hc-topic { position: relative; z-index: 2; align-self: flex-start; margin-bottom: 10px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); text-decoration: none; }
.hc-topic:hover { text-decoration: underline; }
.hc-title { margin: 0 0 12px; font-size: clamp(23px, 2vw, 27px); line-height: 1.04; }
.hc-title a { color: var(--ink); text-decoration: none; }
.hc-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hc-title a:focus-visible { outline: none; }
.hc:focus-within { outline: 3px solid var(--green); outline-offset: 3px; }
.hc-dek { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.hc-meta { margin: auto 0 0; color: var(--muted); font-size: 14px; }
.hc-lead { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; margin-bottom: clamp(48px, 6vw, 72px); }
.hc-lead .hc-img { aspect-ratio: auto; min-height: 340px; }
.hc-lead .hc-body { justify-content: center; padding: clamp(26px, 3.4vw, 48px); }
.hc-lead .hc-title { font-size: clamp(32px, 3.6vw, 48px); line-height: .98; }
.hc-lead .hc-dek { font-size: 18px; }
.h-sub { font-size: clamp(28px, 3vw, 38px); margin-bottom: 24px; }
.h-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.h-latest .pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 4px; color: var(--ink); font-weight: 700; text-decoration: none; }
.pagination .page-numbers.current { background: var(--green); border-color: var(--green); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--green); }

/* Topic wall */
.h-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.h-topic { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--green); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.h-topic:hover { border-left-color: var(--lime); transform: translateY(-2px); color: var(--text); }
.h-topic-n { font-family: var(--display); font-weight: 800; font-size: 27px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.h-topic-d { color: var(--muted); font-size: 16px; }
.h-topic-c { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--green); }

/* Single post */
.h-post-head { padding-bottom: clamp(120px, 14vw, 190px); }
.h-post-head h1 { max-width: 22ch; font-size: clamp(38px, 5vw, 66px); line-height: 1; }
.h-post-head .lede { max-width: 64ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.crumbs a { color: var(--lime) !important; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.h-byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.h-byline-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--lime); }
.h-byline p { margin: 0; display: flex; flex-direction: column; line-height: 1.35; }
.h-byline-n { font-weight: 700; color: #fff !important; text-decoration: none; }
.h-byline-n:hover { text-decoration: underline; }
.h-byline-m { font-size: 15px; color: var(--on-dark-muted); }
.h-hero { position: relative; z-index: 2; margin: calc(-1 * clamp(96px, 12vw, 160px)) auto 0; }
.h-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(15,29,54,.28); }
.h-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 96px); }
.h-main { min-width: 0; max-width: 760px; }
.h-answer { margin: 0 0 28px; padding: 22px 26px; background: var(--mist); border-left: 6px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; font-size: 19px; line-height: 1.55; }
.h-answer p:last-child { margin: 0; }
.h-answer-k, .h-toc-k, .h-next-k, .h-author-k { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.h-checked { margin: -10px 0 26px; font-size: 15px; color: var(--muted); }
.h-toc-inline { display: none; margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--radius); }
.h-toc-inline summary { padding: 14px 18px; cursor: pointer; font-weight: 700; }
.h-toc-inline ol { margin: 0; padding: 0 18px 16px 38px; }
.h-toc ol { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.45; }
.h-toc li { margin-bottom: 8px; }
.h-toc a { color: var(--text); text-decoration: none; }
.h-toc a:hover, .h-toc a.is-here { color: var(--green); text-decoration: underline; }
.h-side-in { position: sticky; top: calc(var(--head-h) + 24px); display: flex; flex-direction: column; gap: 22px; }
.h-side .h-toc { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.h-next { padding: 24px; background-color: var(--ink); background-image: var(--hatch); border-radius: var(--radius); color: var(--on-dark); }
.h-next .h-next-k { color: var(--lime); }
.h-next-t { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; color: #fff; }
.h-next p:not(.h-next-k):not(.h-next-t) { font-size: 15px; color: var(--on-dark); }
.h-next .btn-solid { background: var(--lime); color: var(--ink); }
.h-next .btn-solid:hover { background: var(--lime-hi); color: var(--ink); }
.h-next-mobile { display: none; margin-top: 32px; }

/* Post body type */
.h-body { font-size: 18px; line-height: 1.7; }
.h-body h2 { font-size: clamp(30px, 3.2vw, 40px); margin: 1.7em 0 .5em; }
.h-body h3 { font-size: clamp(22px, 2.2vw, 27px); margin: 1.5em 0 .45em; }
.h-body p, .h-body ul, .h-body ol { margin-bottom: 1.1em; }
.h-body a { font-weight: 600; }
.h-body img { border-radius: var(--radius); }
.h-body figure { margin: 1.6em 0; }
.h-body figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.h-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--lime); font-size: 20px; font-style: italic; }
.h-body table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.h-body .wp-block-table, .h-body .h-table { overflow-x: auto; }
.h-body .wp-block-table table, .h-body .h-table table { margin: 0; min-width: 480px; }
.h-body th, .h-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.h-body th { background: var(--ink); color: #fff; font-weight: 700; }
.h-body tr:nth-child(even) td { background: var(--mist); }
.h-body .wp-block-table { margin: 1.6em 0; }
.h-body .h-box, .h-body .wp-block-group.is-style-h-box { margin: 1.6em 0; padding: 20px 24px; border: 2px solid var(--green); border-radius: var(--radius); }
.h-body .h-box > :last-child { margin-bottom: 0; }
.h-body h2#common-questions { padding-top: 28px; border-top: 4px solid var(--ink); }
.h-body h2#common-questions ~ h3 { margin: 0; padding: 20px 0 8px; border-top: 1px solid var(--line); font-size: clamp(21px, 2vw, 24px); }
.h-body h2#common-questions ~ h3 + p { color: var(--text); }
.h-sources { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; }
.h-sources h2 { font-size: 26px; }
.h-sources li { margin-bottom: 6px; }
.h-author { display: flex; gap: 20px; align-items: flex-start; margin-top: 44px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.h-author-photo { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; }
.h-author p { margin: 0 0 6px; font-size: 16px; }
.h-author .h-author-n { margin-bottom: 8px; font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1; }
.h-author-n a { color: var(--ink); text-decoration: none; }
.h-author-big { margin-top: 0; }
.h-author-big .h-author-photo { width: 160px; height: 160px; }

@media (max-width: 1080px) {
	.h-grid, .h-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.h-layout { grid-template-columns: minmax(0, 1fr); }
	.h-side { display: none; }
	.h-toc-inline, .h-next-mobile { display: block; }
	.h-main { max-width: 760px; margin: 0 auto; }
}
@media (max-width: 900px) {
	.hc-lead { grid-template-columns: minmax(0, 1fr); }
	.hc-lead .hc-img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
	.h-grid, .h-topic-grid { grid-template-columns: minmax(0, 1fr); }
	.h-search { flex-direction: column; }
	.h-search .btn { width: 100%; }
	.h-body { font-size: 17px; }
	.h-answer { font-size: 17px; padding: 18px; }
	.h-author { flex-direction: column; }
	.h-chips ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
	.h-chips a { white-space: nowrap; }
	.h-hero { padding: 0; }
	.h-hero img { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hc, .hc-img img, .h-topic { transition: none; }
	.hc:hover, .h-topic:hover { transform: none; }
	.hc:hover .hc-img img { transform: none; }
}
@media print {
	.h-side, .h-next-mobile, .h-related, .h-search, .h-chips, .closing { display: none !important; }
	.h-layout { display: block; }
}

.h-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; flex-wrap: wrap; }
.h-band-head h2 { margin-bottom: 0; }
article.h-post { padding: 0; }

/* ---------- Coaches and players band (home) ---------- */
.coach-band .section-head { max-width: 860px; }
.coach-band .lede { color: #fff; opacity: .94; }
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); margin-top: clamp(28px, 4vw, 48px); }
.cp-card { background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; }
.cp-who { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-hi); }
.cp-card h3 { margin: 6px 0 0; font-size: clamp(28px, 2.8vw, 38px); font-weight: 800; line-height: 1; color: #fff; }
.cp-phones { display: flex; justify-content: center; gap: clamp(12px, 2vw, 22px); margin: 26px 0 6px; }
.cp-phones .phone { --pw: clamp(150px, 15vw, 210px); }
.cp-phones .phone:nth-child(2) { margin-top: 36px; }
.cp-card .ticks { margin-top: 18px; }
.cp-card .ticks li { max-width: none; }
.cp-links { margin: auto 0 0; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cp-cta { margin: clamp(28px, 4vw, 44px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 860px) {
	.cp-grid { grid-template-columns: minmax(0, 1fr); }
	.cp-phones .phone { --pw: clamp(140px, 38vw, 200px); }
}

/* ---------- Home: who is reading (1.16) ---------- */
.role-jump { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.role-jump-l { font-size: 15px; color: var(--on-dark-muted); margin-right: 2px; }
.role-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.role-jump a::after { content: "↓"; margin-left: 8px; color: var(--lime); }
.role-jump a:hover { border-color: var(--lime); background: rgba(227, 169, 59, .12); }
.role-band { scroll-margin-top: calc(var(--head-h) + 12px); }
#coaches-and-players { scroll-margin-top: calc(var(--head-h) + 12px); }
.role-band .ticks li { max-width: 60ch; }
.role-band .cp-links { margin: 22px 0 0; padding: 0; }
.role-band .cp-links a { color: var(--green-deep); }
.role-cta { margin: 22px 0 0; }
.share-box { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 8px; background: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.share-box p { margin: 0; flex: 1 1 260px; font-size: 16px; line-height: 1.45; }
@media (max-width: 620px) { .role-jump a { width: 100%; justify-content: space-between; } .role-jump-l { width: 100%; } }

/* ---------- Switching steps (home band, Switching page) ---------- */
.switch-steps { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.switch-steps li { padding: 24px 22px 6px 0; }
.switch-steps li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.switch-steps .num { display: block; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--green); margin-bottom: 10px; }
.switch-steps h3 { font-size: 22px; line-height: 1.05; margin: 0 0 8px; }
.switch-steps p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.band-dark .switch-steps { border-color: var(--ink-3); }
.band-dark .switch-steps li + li { border-color: var(--ink-3); }
.band-dark .switch-steps .num { color: var(--lime); }
.band-dark .switch-steps p { color: var(--on-dark-muted); }
.switch-from { margin: 28px 0 0; font-size: 16px; color: var(--on-dark); }
.switch-from span { font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); margin-right: 8px; }
.switch-cta { justify-content: flex-start; }
.switch-src .card p { margin-top: 10px; color: var(--text); font-size: 15.5px; }
.switch-src .card p b { color: var(--text); }
.small-note { margin: 22px 0 0; font-size: 14.5px; color: var(--muted); max-width: 80ch; }
.role-feats .card { display: flex; flex-direction: column; }
.role-feats .card p { flex: 1; }
.role-feats + .share-box { margin-top: 32px; }
@media (max-width: 1000px) {
	.switch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.switch-steps li, .switch-steps li + li { padding: 22px 18px 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
	.band-dark .switch-steps li { border-color: var(--ink-3); }
}
@media (max-width: 620px) { .switch-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- "Who it's for" dropdown (1.17) ---------- */
.nav-list .has-sub { position: relative; }
.sub-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border: 0; background: none; color: #fff; font: 600 16px var(--body); cursor: pointer; border-radius: 4px; }
.sub-toggle svg { transition: transform .2s ease; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.has-sub.current-menu-item > .sub-toggle { box-shadow: inset 0 -2px 0 var(--lime); }
.sub { display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 60; width: 560px; padding: 22px 24px 16px; background: var(--ink); border: 1px solid var(--ink-3); border-radius: 8px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6); }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-sub:hover > .sub, .has-sub.is-open > .sub { display: block; }
.sub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sub-head { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.sub ul { list-style: none; margin: 0; padding: 0; }
.nav-list .sub a { padding: 8px 0; font-size: 16px; font-weight: 600; background-image: none; border-radius: 0; }
.nav-list .sub a:hover, .nav-list .sub a[aria-current="page"] { color: var(--lime); }
.nav-list .sub .sub-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-3); color: var(--on-dark); font-weight: 600; }
@media (max-width: 1080px) {
	.sub-toggle { width: 100%; justify-content: space-between; padding: 15px 2px; font-size: 19px; border-bottom: 1px solid var(--ink-3); border-radius: 0; }
	.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: none; }
	.sub, .has-sub.is-open > .sub { position: static; transform: none; width: auto; padding: 6px 0 12px 14px; border: 0; border-left: 3px solid var(--lime); border-radius: 0; box-shadow: none; background: none; }
	.has-sub.is-open > .sub { display: block; }
	.sub-cols { grid-template-columns: 1fr; gap: 10px; }
	.nav-list .sub a { font-size: 18px; border-bottom: 0; padding: 9px 0; }
}
.nav-squeeze .sub-toggle { width: 100%; justify-content: space-between; padding: 15px 2px; font-size: 19px; border-bottom: 1px solid var(--ink-3); border-radius: 0; }
.nav-squeeze .has-sub:hover > .sub, .nav-squeeze .has-sub:focus-within > .sub { display: none; }
.nav-squeeze .sub, .nav-squeeze .has-sub.is-open > .sub { position: static; transform: none; width: auto; padding: 6px 0 12px 14px; border: 0; border-left: 3px solid var(--lime); border-radius: 0; box-shadow: none; background: none; }
.nav-squeeze .has-sub.is-open > .sub { display: block; }
.nav-squeeze .sub-cols { grid-template-columns: 1fr; gap: 10px; }