/* White website theme. Current Squadli identity is set in Round 7 below. */
:root {
  --ink:#212934; --paper:#fff; --text:#212934; --muted:#59616c; --line:#e1e1e5;
  --blaze:linear-gradient(100deg,#ff6a00,#eb3492);
  --blaze-title:linear-gradient(100deg,#f25f00,#eb3492);
  --night:linear-gradient(100deg,#7b5cff,#3e90ff);
  --control-radius:12px; --card-radius:18px;
  color-scheme:light;
}
body { background:#fff; }
#screen-preview[hidden] { display:none; }
.masthead { height:144px; background:#fff; border-bottom-color:var(--line); }
.brand { background:transparent; padding:0; width:220px; }
.brand img { width:100%; height:auto; }
.masthead nav a:hover, footer nav a:hover, .text-link:hover {
  color:transparent; background:var(--blaze-title); background-clip:text; -webkit-background-clip:text;
}
.action,.action:hover,.light-action,.light-action:hover,.orange-plane,.mini-rule { background:var(--blaze); }
.action,.action:hover,.dark-action,.dark-action:hover,.light-action,.light-action:hover { color:#fff; }
.action:hover,.dark-action:hover,.light-action:hover { filter:brightness(1.03); }
a:focus-visible,button:focus-visible { outline-color:var(--ink); }

.hero { background:#fff; min-height:0; align-items:start; }
.hero h1 { font-size:clamp(70px,7.1vw,107px); text-transform:uppercase; }
.hero-intro { color:var(--ink); max-width:470px; }
.founder-note,.screen-caption { color:var(--muted); }
.hero-product { min-width:0; container-type:inline-size; }
.hero-art { height:min(680px,122cqw); margin-top:0; width:100%; }
.hero-art .phone { background:var(--ink); border-color:var(--ink); box-shadow:0 24px 44px #21293429; }
.phone-main { width:min(270px,49%); left:46%; top:min(21px,3cqw); }
.phone-back { width:min(243px,44%); left:10%; top:min(88px,14cqw); filter:none; }
.field-grid { inset:0 -25px 0; opacity:.65; background-image:linear-gradient(#e5e5e8 1px,transparent 1px),linear-gradient(90deg,#e5e5e8 1px,transparent 1px); }
.orange-plane { inset:30px -30px 40px 8%; opacity:1; }
.hero-art-notes { position:relative; padding-top:12px; }
.art-caption { position:static; text-align:right; font-size:11px; line-height:1.9; color:var(--ink); }
.jersey-note { color:var(--muted); font-size:11px; line-height:1.55; text-align:right; margin:10px 0 0; }
.hero-bottom { margin-top:28px; border-color:var(--line); }
.hero h1 span,.inside h2 span,.season h2 span,.closing h2 span,
.eyebrow,.section-top .eyebrow,.tactics-line .eyebrow,.showcase-label span:first-child,.art-caption span:first-child,
.item-meta,.hero-bottom .scroll-arrow,.small-tagline span,.whistle-dot {
  color:transparent; background:var(--blaze-title); background-clip:text; -webkit-background-clip:text;
}
.art-caption span:first-child { justify-self:end; }
.hero-bottom .scroll-arrow { display:inline-block; font-size:23px; }
.manifesto { background:#f5f5f7; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); }

.inside { background:#fff; }
.section-note { color:var(--muted); }
.showcase { background:#f5f5f7; border-color:var(--line); border-radius:var(--card-radius); }
.showcase::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--blaze); }
.showcase-label { color:var(--muted); }
.screen-stage { height:auto; min-height:626px; padding:28px 0; }
.capture-button { max-width:100%; border-color:var(--ink); background:var(--ink); box-shadow:0 22px 38px #21293424; }
.feature { color:var(--ink); border-color:var(--line); padding-left:16px; padding-right:16px; }
.feature-no,.feature-plus,.feature-desc { color:var(--muted); }
.feature.active { background:var(--blaze); border-top-color:transparent; border-radius:var(--control-radius); }
.feature.active strong,.feature.active .feature-no,.feature.active .feature-plus,.feature.active .feature-desc { color:#fff; background:none; }
.feature:not(.active):hover strong { color:transparent; background:var(--blaze-title); background-clip:text; -webkit-background-clip:text; }

.training { background:#f5f5f7; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:visible; padding-bottom:24px; }
.training-copy>p:not(.eyebrow) { color:var(--ink); }
.training h2 span { color:transparent; background:var(--night); background-clip:text; -webkit-background-clip:text; }
.dark-action,.dark-action:hover { background:var(--night); }
.training-visual { min-height:0; height:auto; padding:24px 30px 40px; overflow:visible; }
.plan-crop { width:min(290px,100%); margin:42px auto 24px; border:7px solid var(--ink); border-radius:32px; box-shadow:0 20px 35px #21293429; overflow:hidden; }
.plan-crop img { border-radius:24px; }

.season { background:#fff; }
.season-header>p { color:var(--muted); }
.data-intro { display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:40px; padding:28px 34px 28px 39px; background:#f5f5f7; position:relative; border-radius:var(--card-radius); overflow:hidden; }
.data-intro::before { content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--blaze); }
.data-intro h3 { font-size:clamp(31px,3.7vw,50px); line-height:1.1; margin:13px 0 14px; }
.data-intro p { font-size:14px; color:var(--muted); }
.data-overview-button { width:190px; height:auto; background:var(--ink); border:5px solid var(--ink); border-radius:19px; padding:0; overflow:hidden; flex-shrink:0; box-shadow:0 15px 28px #21293424; transform:rotate(4deg); margin:8px; }
.data-overview-button img { width:100%; transform:none; }
.data-overview-button:hover { transform:rotate(2deg); }
.season-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:32px; }
.season-item { display:block; background:transparent; border:0; padding:0; text-align:left; min-width:0; color:var(--ink); }
.crop-frame { height:auto; padding:0; background:var(--ink); border:5px solid var(--ink); border-radius:24px; overflow:hidden; }
.crop-frame img,.season-item:hover .crop-frame img { width:100%; height:auto; transform:none; }
.item-meta { font-size:12px; letter-spacing:.07em; }
.season-item h3 { font-size:27px; line-height:1.1; }
.item-copy { font-size:14px; line-height:1.65; color:var(--muted); display:block; }
.tactics-line p { color:var(--muted); }

.closing { background:#fff; color:var(--ink); border-top:1px solid var(--line); }
.closing::before { content:''; position:absolute; inset:0 0 auto; height:6px; background:var(--blaze); }
.closing h2 span { -webkit-text-stroke:0; }
.closing-bottom { border-top-color:var(--line); }
footer { background:#fff; color:var(--muted); border-top:1px solid var(--line); }
footer .brand { width:180px; }
footer>span:first-of-type { display:block; }
dialog { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 20px 65px #21293444; }
dialog::backdrop { background:#21293499; backdrop-filter:blur(8px); }
.dialog-header button { color:var(--ink); }

@media(max-width:1000px) {
  .masthead { height:128px; gap:22px; }
  .masthead .brand { width:194px; }
  .masthead nav { gap:18px; }
  .hero { gap:0 12px; }
  .screen-stage { min-height:580px; }
  .season-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 28px; }
  .crop-frame { max-width:310px; margin:auto; }
}
@media(max-width:700px) {
  .masthead { height:110px; gap:12px; }
  .masthead .brand { width:160px; padding:0; }
  .hero h1 { font-size:clamp(58px,16vw,95px); }
  .hero-intro { max-width:345px; }
  .hero-product { width:100%; margin-top:36px; }
  .hero-art { height:122cqw; margin:0; }
  .phone-main { left:42%; }
  .art-caption { font-size:11px; }
  .jersey-note { text-align:right; font-size:11px; }
  .hero .eyebrow,.founder-note { font-size:12px; }
  .hero-bottom { width:100%; margin-top:24px; font-size:9px; flex-wrap:wrap; }
  .hero-bottom a { font-size:9px; }
  .eyebrow,.showcase-label,.screen-caption,.feature-no { font-size:12px; }
  .feature-desc { font-size:14px; }
  .feature { padding:17px 12px; }
  .screen-stage { min-height:520px; }
  .training { overflow:hidden; gap:20px; padding-bottom:24px; }
  .training-visual { padding:24px 32px 42px; height:auto; min-height:0; overflow:visible; }
  .plan-crop { width:255px; max-width:100%; margin:50px auto 24px; }
  .training-foot { font-size:12px; }
  .data-intro { padding:24px 20px 28px 25px; display:block; margin-top:29px; }
  .data-intro h3 { font-size:34px; max-width:285px; }
  .data-intro p { font-size:13px; line-height:1.7; max-width:265px; }
  .data-overview-button { width:182px; display:block; margin:28px auto 10px; }
  .season-grid { grid-template-columns:1fr; gap:36px; }
  .season-item { margin-bottom:0; }
  .crop-frame { max-width:275px; }
  .item-meta,.item-copy { font-size:14px; }
  .closing-top .eyebrow { font-size:12px; }
  .closing-top>span { font-size:11px; }
  .closing-bottom p { font-size:14px; }
  footer .brand { width:150px; }
  footer nav,footer>span:last-child { font-size:12px; }
}
@media(max-width:370px) {
  .masthead .brand { width:142px; }
  .masthead .action.small { font-size:11px; padding:11px 16px; white-space:nowrap; }
  .hero h1 { font-size:48px; }
  .feature { gap:9px; padding-left:8px; padding-right:8px; }
  .screen-stage { min-height:490px; }
  .data-intro h3 { font-size:31px; }
}

/* Round 7: the current Squadli mark and a fuller coaching story. */
.masthead { height:174px; }
.brand { width:174px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.brand .brand-mark { width:100%; height:auto; }
.brand .brand-tagline { width:88%; height:auto; }
footer .brand { width:150px; }
.hero-intro { font-size:18px; line-height:1.7; }
.feature-desc { max-width:440px; }
.training { gap:6%; padding-top:72px; padding-bottom:52px; align-items:center; }
.training h2 { font-size:clamp(45px,5.1vw,74px); }
.training-copy>.training-intro { font-size:16px; line-height:1.75; max-width:540px; }
.preparation-steps { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:21px; max-width:545px; }
.preparation-steps li { display:grid; grid-template-columns:28px 1fr; gap:14px; }
.preparation-steps li>span { font-size:12px; font-weight:700; padding-top:6px; color:transparent; background:var(--blaze-title); background-clip:text; -webkit-background-clip:text; align-self:start; }
.preparation-steps h3 { font-size:27px; line-height:1.15; margin:0 0 6px; }
.preparation-steps p { font-size:14px; line-height:1.65; color:var(--muted); }
.planning-fan { position:relative; width:100%; min-width:0; height:700px; align-self:center; }
.planning-phone { position:absolute; margin:0; width:39%; max-width:250px; padding:6px; background:var(--ink); border:1px solid var(--ink); border-radius:29px; box-shadow:0 22px 38px #21293430; }
.planning-phone img { border-radius:22px; width:100%; height:auto; }
.planning-phone figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.phone-availability { left:3%; top:70px; transform:rotate(-12deg); z-index:1; }
.phone-squad { right:3%; top:70px; transform:rotate(12deg); z-index:2; }
.phone-training { left:30.5%; top:20px; z-index:3; }
.capture-review-note { grid-column:1/-1; font-size:11px; color:var(--muted); line-height:1.5; text-align:right; margin-top:8px; }
.data-intro { gap:8%; padding:40px 42px; }
.data-intro>div { max-width:650px; }
.data-intro h3 { font-size:clamp(43px,4.4vw,64px); line-height:.98; }
.data-intro h3 span,#tactics-title span { color:transparent; background:var(--blaze-title); background-clip:text; -webkit-background-clip:text; }
.data-intro p { font-size:16px; line-height:1.75; max-width:620px; }
.stat-coverage { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:22px 0 0; }
/* App source: ApprovedData.tsx DataQuietButton = 12; DataPanel = 18. */
.stat-coverage li { padding:6px 11px; background:var(--blaze); color:#fff; font-size:12px; font-weight:700; border-radius:var(--control-radius); }
.item-copy { margin-top:10px; }
.tactics-line { grid-template-columns:.95fr 1.1fr; gap:9%; align-items:start; padding-top:48px; margin-top:65px; }
.tactics-line h3 { font:800 clamp(38px,4.4vw,62px)/.96 var(--display); margin:20px 0 0; }
.tactics-line .tactics-copy p { font-size:16px; line-height:1.8; max-width:none; }
.tactics-copy p+p { margin-top:16px; }
.tactics-capabilities { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:9px; font-size:14px; font-weight:600; }
.tactics-capabilities li { display:flex; align-items:center; gap:10px; }
.tactics-capabilities li::before { content:''; width:18px; height:3px; flex-shrink:0; background:var(--blaze); }
@media(max-width:1100px) and (min-width:701px) {
  .training { display:block; }
  .training-copy { max-width:660px; }
  .training h2 { font-size:64px; }
  .planning-fan { width:min(680px,90%); height:680px; margin:38px auto 0; }
  .capture-review-note { text-align:center; }
}
@media(max-width:1000px) {
  .masthead { height:160px; }
  .masthead .brand { width:158px; }
}
@media(max-width:700px) {
  .masthead { height:138px; }
  .masthead .brand { width:140px; }
  .brand { gap:4px; }
  .hero-intro { font-size:15px; line-height:1.75; }
  .feature-desc { max-width:none; }
  .training { display:flex; padding-top:51px; padding-bottom:34px; gap:28px; }
  .training h2 { font-size:clamp(40px,10.5vw,68px); }
  .training-copy>.training-intro { font-size:15px; }
  .preparation-steps { gap:22px; margin-top:26px; }
  .preparation-steps h3 { font-size:26px; }
  .preparation-steps p { font-size:14px; }
  .planning-fan { width:100%; height:114vw; max-height:640px; margin-top:12px; }
  .planning-phone { padding:4px; border-radius:18px; width:40%; }
  .planning-phone img { border-radius:13px; }
  .phone-availability { left:4%; top:42px; }
  .phone-squad { right:4%; top:42px; }
  .phone-training { left:30%; top:7px; }
  .capture-review-note { margin-top:0; text-align:center; font-size:11px; }
  .data-intro { padding:28px 22px; }
  .data-intro h3 { font-size:46px; }
  .data-intro p { font-size:14px; }
  .stat-coverage { gap:6px; }
  .stat-coverage li { font-size:11px; padding:5px 9px; }
  .tactics-line { display:block; padding-top:34px; margin-top:42px; }
  .tactics-line h3 { font-size:44px; margin-bottom:22px; }
  .tactics-line .tactics-copy p { font-size:14px; line-height:1.75; }
  footer .brand { width:130px; }
}
@media(max-width:370px) {
  .masthead .brand { width:128px; }
  .masthead { height:128px; }
  .training h2 { font-size:38px; }
}

/* Round 9: approved standalone logo proportions, one centred vector lockup. */
.brand .brand-lockup { display:block; width:100%; height:auto; }
/* A connected fan: back phones open outward; the front phone sits lower. */
.planning-fan { height:auto; aspect-ratio:1/1.08; }
.planning-phone { width:36%; max-width:none; }
.phone-availability { left:0; top:2%; transform:rotate(-8deg); }
.phone-squad { right:0; top:2%; transform:rotate(8deg); }
.phone-training { left:32%; top:23%; }
.planning-capture { display:block; width:100%; padding:0; border:0; border-radius:22px; background:transparent; cursor:zoom-in; }
.planning-capture:focus-visible { outline:3px solid var(--ink); outline-offset:12px; }
@media(min-width:701px) and (max-width:1100px) {
  .planning-fan { width:min(680px,90%); height:auto; aspect-ratio:1/1.08; }
}
@media(max-width:700px) {
  .planning-fan { width:100%; height:auto; max-height:none; aspect-ratio:1/1.1; margin-top:12px; }
  .planning-phone { width:36%; }
  .phone-availability { left:0; top:2%; }
  .phone-squad { right:0; top:2%; }
  .phone-training { left:32%; top:23%; }
  .planning-capture { border-radius:13px; }
}
/* Keep each hero line intact in the portrait-tablet two-column layout. */
@media(min-width:701px) and (max-width:900px) {
  .hero h1 { font-size:clamp(52px,7.4vw,66px); }
  .hero-intro { font-size:16px; line-height:1.7; }
  .hero-actions { gap:18px; flex-wrap:wrap; }
  .hero-actions .action { padding:14px 23px; font-size:13px; }
}
.dialog-header { position:sticky; top:0; z-index:2; background:#fff; padding:8px 0; }
.dialog-header button { min-width:44px; min-height:44px; }

/* Round 17: retain the complete owner-supplied founder/offline sentence. */
.closing-top { gap:32px; }
.closing-founder { margin:0; max-width:430px; font-size:15px; line-height:1.6; text-align:right; }
@media(max-width:700px) {
  .closing-top { flex-direction:column; gap:12px; }
  .closing-founder { max-width:none; font-size:14px; text-align:left; }
}

/* Mobile feature browsing: the selected capture opens immediately below its item. */
@media(max-width:700px) {
  .feature-list { overflow-anchor:none; }
  .feature-list>.showcase { margin:10px 0 20px; }
  .feature-list .screen-stage { min-height:0; padding:24px 0 18px; }
  .feature-list .capture-button { width:216px; }
}