/* BowlEye — "Coach's Paper" marketing site.
   Tokens mirror the app (src/theme.js): warm paper, copper accent, stat inks,
   plus the Indigo dark theme for the dark section. No framework, no build. */
:root{
  --bg:#F5EFE1; --surface:#FFFDF8; --surface2:#ECE3CF; --line:#DDD1B7; --line2:#CBBB98;
  --ink:#221D16; --muted:#6E6352; --accent:#93602A; --accent2:#7E5222; --ring:#EFB673;
  --entry:#0A7596; --angle:#3A7D12; --brk:#8C6A00; --hook:#B8246F; --speed:#B4520F;
  --through:#2F8F3A; --miss:#C8302F;
  --ibg:#0a0a14; --isurf:#14142a; --isurf2:#1d1d3a; --iline:#2b2b4f; --iacc:#8676f5; --itext:#EEEDFB; --imuted:#ABA8CC;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px; --gut:clamp(16px,4vw,32px);
  --r:18px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-feature-settings:"cv11","ss01"}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;line-height:1.04;letter-spacing:-.018em;
  font-variation-settings:"opsz" 144;text-wrap:balance}
h2{font-size:clamp(2.1rem,5.6vw,3.9rem)}
h3{font-size:clamp(1.35rem,2.6vw,1.65rem);line-height:1.15;letter-spacing:-.01em;font-variation-settings:"opsz" 48}
em{font-style:italic}
.num{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;font-variation-settings:"opsz" 144}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.kicker{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4em .6em;font:600 .75rem/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.kicker .n{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0;font-size:1.05rem;text-transform:none;color:var(--ink)}
.kicker .n::after{content:"";display:inline-block;width:28px;height:1px;background:var(--line2);vertical-align:middle;margin-left:.6em}
.lede{font-size:clamp(1.06rem,1.6vw,1.2rem);color:var(--muted);max-width:38em}
.lede strong{color:var(--ink);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 1.35em;border-radius:999px;
  font:600 1rem/1 var(--sans);text-decoration:none;border:1.5px solid transparent;transition:transform .2s,background-color .2s,box-shadow .2s}
.btn-primary{background:var(--accent);color:#FFFDF8;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -10px rgba(126,82,34,.7)}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--surface)}
.btn svg{width:18px;height:18px}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(245,239,225,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 1.3rem/1 var(--serif);letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:9px}
.nav{display:none;gap:4px;margin-left:auto}
.nav a{font:500 .92rem/1 var(--sans);text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:999px}
.nav a:hover{color:var(--ink);background:var(--surface2)}
.head-cta{margin-left:auto;min-height:40px;padding:0 1.05em;font-size:.92rem}
@media (min-width:960px){.nav{display:flex}.head-cta{margin-left:8px}}

/* hero */
.hero{position:relative;padding:clamp(28px,6vw,72px) 0 clamp(40px,7vw,96px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 39px,rgba(203,187,152,.32) 39px 40px);
  -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent)}
.hero-grid{position:relative;display:grid;gap:40px;align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:24px}}
.hero h1{font-size:clamp(3rem,10.5vw,6.6rem);font-weight:450;letter-spacing:-.008em;line-height:.96;margin:18px 0 22px}
.hero h1 em{color:var(--accent);font-weight:400}
.hero h1 span{display:block}
.hero .lede{margin-bottom:28px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;padding:0;list-style:none;font-size:.9rem;color:var(--muted)}
.hero-note li{display:flex;align-items:center;gap:8px}
.hero-note li::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--accent)}

.hero-art{position:relative;display:grid;place-items:center;min-height:clamp(460px,118vw,640px)}
@media (min-width:960px){.hero-art{min-height:680px}}
.rings{position:absolute;width:min(132%,760px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.rings circle{fill:none}
.rings .spin{transform-origin:50% 50%;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-art .phone{position:relative;z-index:2;width:clamp(232px,62vw,300px)}
.hero-art .phone.back{position:absolute;z-index:1;width:clamp(190px,50vw,250px);transform:translate(-58%,6%) rotate(-7deg);left:50%;top:50%;margin-top:calc(clamp(190px,50vw,250px) * -1)}
.hero-art .phone.front{transform:translateX(16%) rotate(2.5deg)}
@media (max-width:420px){.hero-art .phone.back{transform:translate(-66%,8%) rotate(-7deg)}.hero-art .phone.front{transform:translateX(18%) rotate(2.5deg)}}
.chip{position:absolute;z-index:3;display:flex;align-items:baseline;gap:.4em;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;box-shadow:0 14px 30px -18px rgba(34,29,22,.55);font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.chip b{font:500 1.35rem/1 var(--serif);letter-spacing:0;text-transform:none}
.chip small{font:500 .78rem/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.chip.c1{right:2%;top:12%}
.chip.c2{left:0;bottom:16%}
.chip.c1 b{color:var(--entry)} .chip.c2 b{color:var(--through)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--through);align-self:center}

/* phone frame (CSS only) */
.phone{position:relative;border-radius:clamp(30px,3.2vw,40px);padding:clamp(7px,.8vw,10px);background:linear-gradient(145deg,#3a3127,#17130e 60%);
  box-shadow:0 0 0 1px rgba(34,29,22,.6),0 1px 0 1px rgba(255,255,255,.08) inset,0 30px 60px -28px rgba(34,29,22,.6),0 18px 36px -24px rgba(126,82,34,.45)}
.phone::before{content:"";position:absolute;top:calc(clamp(7px,.8vw,10px) + 2.4%);left:48.4%;width:3.2%;aspect-ratio:1;border-radius:50%;background:#0b0907;z-index:2;box-shadow:0 0 0 2px #1d1813}
.phone::after{content:"";position:absolute;right:-3px;top:22%;width:3px;height:12%;border-radius:0 3px 3px 0;background:#2b241c}
.phone picture,.phone img{border-radius:clamp(23px,2.5vw,31px);overflow:hidden;width:100%;background:var(--surface)}
.phone.dark picture,.phone.dark img{background:var(--isurf)}

/* proof strip */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip ul{display:grid;grid-template-columns:repeat(2,1fr);margin:0;padding:0;list-style:none}
.strip li{padding:18px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip li:nth-child(2n){border-right:0}
.strip b{display:block;font:500 1.55rem/1.1 var(--serif);font-variation-settings:"opsz" 144}
.strip span{display:block;font-size:.84rem;line-height:1.4;color:var(--muted)}
@media (min-width:860px){.strip ul{grid-template-columns:repeat(5,1fr)}.strip li{border-bottom:0;padding:24px 22px}.strip li:nth-child(2n){border-right:1px solid var(--line)}.strip li:last-child{border-right:0}}

/* sections */
section{position:relative}
.sec{padding:clamp(72px,11vw,140px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(36px,6vw,64px)}
.sec-head h2{margin:16px 0 18px}
.sec-head h2 em{color:var(--accent)}
.band{background:var(--surface2)}
.band-paper{background:var(--surface);border-block:1px solid var(--line)}

/* target training */
.types{display:grid;gap:14px;margin-bottom:clamp(48px,7vw,80px)}
@media (min-width:760px){.types{grid-template-columns:repeat(3,1fr)}}
.type{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 22px;display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center}
@media (min-width:760px){.type{grid-template-columns:1fr;align-items:start}}
.type svg{width:84px;height:84px}
@media (min-width:760px){.type svg{width:100%;height:120px}}
.type h3{font-size:1.4rem;margin-bottom:6px}
.type p{margin:0;color:var(--muted);font-size:.95rem}
.target-grid{display:grid;gap:48px;align-items:center}
@media (min-width:960px){.target-grid{grid-template-columns:1fr 1fr;gap:56px}}
.duo{display:flex;justify-content:center;gap:clamp(12px,3vw,24px);align-items:flex-start}
.duo .phone{width:min(46%,280px)}
.duo .phone:nth-child(2){margin-top:clamp(40px,8vw,72px)}

.ledger{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.ledger li{display:grid;grid-template-columns:2.2em 1fr;gap:4px 14px;padding:16px 0 17px;border-bottom:1px solid var(--line)}
.ledger .i{font:italic 500 1.05rem/1.4 var(--serif);color:var(--accent)}
.ledger h3{font-size:1.15rem;font-family:var(--sans);font-weight:650;letter-spacing:-.005em;line-height:1.35;margin:0 0 3px;font-variation-settings:normal}
.ledger p{margin:0;color:var(--muted);font-size:.97rem}
.mark{display:inline-block;width:.8em;height:.8em;border-radius:50%;vertical-align:-.05em;margin-right:.2em}
.mark.t{background:var(--through)} .mark.m{background:var(--miss)} .mark.c{border:2px solid #D9A400;background:transparent}

/* how it works */
.steps{display:grid;gap:22px;counter-reset:s}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:22px}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.step-fig{height:300px;overflow:hidden;background:var(--surface2);border-bottom:1px solid var(--line);position:relative}
.step-fig picture,.step-fig img{width:100%;height:100%;object-fit:cover}
.step-fig.top img{object-position:50% 0}
.step-fig.mid img{object-position:50% 46%}
.step-fig .tag{position:absolute;left:12px;bottom:12px;background:rgba(34,29,22,.82);color:#FFFDF8;font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 9px;border-radius:7px}
.step-body{padding:22px 22px 26px}
.step-body .sn{display:block;font:italic 500 3rem/1 var(--serif);color:var(--accent);margin-bottom:10px}
.step-body h3{margin-bottom:8px}
.step-body p{color:var(--muted);margin:0;font-size:.98rem}

/* numbers ledger */
.numbers-grid{display:grid;gap:48px}
@media (min-width:1000px){.numbers-grid{grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}}
.stat-table{width:100%;border-collapse:collapse;font-size:.97rem}
.stat-table caption{text-align:left;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:12px}
.stat-table th,.stat-table td{text-align:left;vertical-align:baseline;padding:14px 10px 14px 0;border-bottom:1px solid var(--line)}
.stat-table thead th{font:600 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--ink);padding-top:0}
.stat-table tbody th{font-weight:650;white-space:nowrap;padding-right:16px}
.stat-table td.v{text-align:right;white-space:nowrap;padding-right:0}
.stat-table td.v b{font:500 1.6rem/1 var(--serif);font-variation-settings:"opsz" 144}
.stat-table td.v small{color:var(--muted);font-size:.8rem;margin-left:3px}
.stat-table td.d{color:var(--muted)}
@media (max-width:560px){.stat-table thead{display:none}.stat-table tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line);padding:12px 0}
  .stat-table th,.stat-table td{border:0;padding:0}.stat-table td.d{grid-column:1/-1;padding-top:4px;font-size:.92rem}}
.ink-entry{color:var(--entry)} .ink-angle{color:var(--angle)} .ink-brk{color:var(--brk)} .ink-hook{color:var(--hook)} .ink-speed{color:var(--speed)} .ink-ink{color:var(--ink)}
.honest{display:flex;gap:14px;margin-top:26px;padding:18px 18px;background:var(--surface);border:1px dashed var(--line2);border-radius:14px;color:var(--muted);font-size:.95rem}
.badge{flex:none;align-self:flex-start;font:700 .66rem/1 var(--sans);letter-spacing:.1em;color:var(--accent);border:1.5px solid var(--accent);border-radius:6px;padding:5px 6px}
.card-shot{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 30px 60px -40px rgba(34,29,22,.5)}
.card-shot picture,.card-shot img{border-radius:12px;width:100%}
.card-shot figcaption{font-size:.86rem;color:var(--muted);padding:12px 6px 2px}

/* feature pairs (rev rate / pins) */
.pair{display:grid;gap:56px}
@media (min-width:960px){.pair{grid-template-columns:1fr 1fr;gap:40px}}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,4vw,40px);display:flex;flex-direction:column;gap:22px;overflow:hidden}
.feature h3{font-size:clamp(1.7rem,3.4vw,2.35rem);line-height:1.08}
.feature p{color:var(--muted);margin:0}
.feature .big{font:500 clamp(3.4rem,9vw,5.2rem)/.9 var(--serif);color:var(--entry);font-variation-settings:"opsz" 144;letter-spacing:-.03em}
.feature .big small{font:600 .9rem/1 var(--sans);color:var(--muted);letter-spacing:.08em;margin-left:.4em}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);margin:0}
.facts div{padding:14px 12px 4px 0}
.facts dt{font:600 .7rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:6px 0 0;font:500 1.5rem/1.1 var(--serif)}
.fine{font-size:.88rem!important;color:var(--muted)}
.pins-figs{display:flex;gap:14px;justify-content:center;margin-top:auto}
.pins-figs .phone{width:min(48%,240px)}
.pins-figs .phone:nth-child(2){margin-top:44px}

/* oil */
.oil-grid{display:grid;gap:48px;align-items:start}
@media (min-width:1000px){.oil-grid{grid-template-columns:1.15fr .85fr;gap:56px}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,18px);align-items:start}
.trio .phone:nth-child(2){margin-top:36px}
.trio .phone:nth-child(3){margin-top:72px}
.patterns{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.patterns caption{text-align:left;padding-bottom:10px;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.patterns th,.patterns td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);text-align:left}
.patterns thead th{font:600 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--ink)}
.patterns td.r,.patterns th.r{text-align:right}
.patterns tbody th{font-weight:600}
.patterns td.t{color:var(--muted)}
@media (max-width:480px){.patterns .t{display:none}}
.oil-points{margin:28px 0 0}

/* toolkit */
.kit{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:600px){.kit{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kit{grid-template-columns:repeat(3,1fr)}}
.kit-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.kit-fig{height:260px;overflow:hidden;background:var(--surface2);padding:22px 22px 0;border-bottom:1px solid var(--line)}
.kit-fig picture{width:72%;max-width:250px;margin:0 auto;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 0 0 7px #221D16,0 20px 40px -20px rgba(34,29,22,.55)}
.kit-fig img{width:100%}
.kit-body{padding:18px 20px 22px}
.kit-body h3{font-size:1.3rem;margin-bottom:6px}
.kit-body p{margin:0;color:var(--muted);font-size:.95rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.tags li{border:1px solid var(--line2);border-radius:999px;padding:8px 14px;font-size:.88rem;font-weight:500;background:var(--surface)}

/* indigo */
.indigo{background:var(--ibg);color:var(--itext);overflow:hidden}
.indigo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 75% 30%,rgba(134,118,245,.22),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(134,118,245,.12),transparent 70%)}
.indigo .kicker{color:var(--iacc)} .indigo .kicker .n{color:var(--itext)} .indigo .kicker .n::after{background:var(--iline)}
.indigo .lede{color:var(--imuted)} .indigo .lede strong{color:var(--itext)}
.indigo h2 em{color:var(--iacc)}
.indigo-grid{position:relative;display:grid;gap:48px;align-items:center}
@media (min-width:960px){.indigo-grid{grid-template-columns:.9fr 1.1fr}}
.swap{display:flex;flex-direction:column;align-items:center;gap:18px}
.toggle{display:inline-flex;padding:4px;border-radius:999px;background:var(--isurf);border:1px solid var(--iline)}
.toggle button{appearance:none;border:0;background:transparent;color:var(--imuted);font:600 .9rem/1 var(--sans);padding:11px 18px;border-radius:999px;cursor:pointer;min-height:40px}
.toggle button[aria-pressed="true"]{background:var(--iacc);color:#0a0a14}
.toggle button:focus-visible{outline-color:var(--iacc)}
.swap-stage{position:relative;width:min(70vw,300px)}
.swap-stage .phone{width:100%}
.swap-stage .phone + .phone{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.swap-stage.is-paper .phone + .phone{opacity:1}
.indigo .phone{background:linear-gradient(145deg,#2c2c48,#0c0c18 60%);box-shadow:0 0 0 1px #2b2b4f,0 40px 80px -30px rgba(134,118,245,.45)}
.indigo-side{display:flex;gap:14px;justify-content:center;margin-top:8px}
.indigo-side .phone{width:min(42%,190px)}
.indigo-list{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--iline)}
.indigo-list li{padding:13px 0;border-bottom:1px solid var(--iline);color:var(--imuted);display:flex;gap:12px}
.indigo-list li b{color:var(--itext);font-weight:600;min-width:9.5em}
@media (max-width:480px){.indigo-list li{flex-direction:column;gap:2px}}

/* ballroom */
.ball-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.ball-grid{grid-template-columns:1fr 1fr;gap:64px}}
.locker{background:var(--ink);color:#F3EFE3;border-radius:26px;padding:clamp(20px,4vw,32px);box-shadow:0 40px 70px -40px rgba(34,29,22,.8);position:relative;overflow:hidden}
.locker::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;border:16px solid rgba(239,182,115,.18);box-shadow:0 0 0 30px rgba(243,239,227,.04)}
.locker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font:600 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#C9BFA9}
.locker-head .ok{display:inline-flex;align-items:center;gap:6px;color:#9FD98F}
.locker-head .ok::before{content:"";width:8px;height:8px;border-radius:50%;background:#7BC86C}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative;z-index:1}
.flow li{display:flex;align-items:center;gap:14px;background:rgba(255,253,248,.06);border:1px solid rgba(243,239,227,.12);border-radius:14px;padding:14px 16px}
.flow svg{flex:none;width:28px;height:28px;color:var(--ring)}
.flow b{display:block;font-weight:600}
.flow span{font-size:.88rem;color:#C9BFA9}
.flow .back{border-style:dashed}
.locker-foot{margin-top:16px;font-size:.84rem;color:#C9BFA9;position:relative;z-index:1}

/* faq */
.faq-grid{display:grid;gap:40px}
@media (min-width:960px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:64px}}
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:500 1.2rem/1.3 var(--serif);font-variation-settings:"opsz" 36}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);
  background:linear-gradient(var(--accent),var(--accent)) center/10px 1.5px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1.5px 10px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;color:var(--muted);max-width:44em}
.faq .a p:last-child{margin:0}

/* final cta */
.final{position:relative;overflow:hidden;background:var(--ink);color:#F3EFE3;text-align:center}
.final .rings{width:min(170%,1100px);opacity:.9}
.final-in{position:relative;z-index:1;padding-block:clamp(88px,13vw,160px)}
.final h2{font-size:clamp(2.6rem,8vw,5.4rem);margin:18px 0 18px}
.final h2 em{color:var(--ring)}
.final p{color:#CFC5AE;max-width:34em;margin:0 auto 30px}
.final .kicker{color:var(--ring)}
.final .btn-primary{background:#F3EFE3;color:var(--ink);box-shadow:0 10px 30px -12px rgba(239,182,115,.55)}
.final .btn-primary:hover{background:#fff}
.final .cta-note{margin-top:18px;font-size:.86rem;color:#A99F8A;max-width:44em}
.final .cta-note a{color:#F3EFE3}

/* footer */
.foot{padding:40px 0 48px;font-size:.9rem;color:var(--muted);border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a{text-decoration:none;color:var(--ink)}
.foot a:hover{text-decoration:underline}
.foot .legal{flex-basis:100%;font-size:.8rem}

/* privacy / plain pages */
.doc{max-width:760px;margin:0 auto;padding:clamp(40px,8vw,88px) var(--gut) 80px}
.doc h1{font-size:clamp(2.4rem,7vw,3.8rem);margin:14px 0 18px}
.doc h2{font-size:1.6rem;margin:40px 0 12px}
.doc p,.doc li{color:#3d352a}
.doc ul{padding-left:1.2em}
.doc li{margin-bottom:.5em}
.doc a{color:var(--accent)}

/* reveal motion */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.no-js .reveal{opacity:1;transform:none}
.hero .dots circle{opacity:0;animation:land .5s cubic-bezier(.2,.8,.3,1.4) forwards}
@keyframes land{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rings .spin{animation:none}
  .hero .dots circle{animation:none;opacity:1}
  .swap-stage .phone + .phone{transition:none}
  .btn{transition:none}
}
.hero .dots circle{transform-box:fill-box;transform-origin:center}
.hero .dots circle:nth-child(1){animation-delay:.5s}.hero .dots circle:nth-child(2){animation-delay:.8s}
.hero .dots circle:nth-child(3){animation-delay:1.1s}.hero .dots circle:nth-child(4){animation-delay:1.4s}
.hero .dots circle:nth-child(5){animation-delay:1.7s}.hero .dots circle:nth-child(6){animation-delay:2s}
.hero .dots circle:nth-child(7){animation-delay:2.3s}.hero .dots circle:nth-child(8){animation-delay:2.6s}
.final-mark{margin:0 auto 18px;border-radius:18px;box-shadow:0 0 0 1px rgba(243,239,227,.15)}
.kicker + h2{margin:16px 0 18px}
@media (max-width:560px){.stat-table tbody th{order:1}.stat-table td.v{order:2}.stat-table td.d{order:3}}
@media (min-width:960px){
  .hero-art .phone{width:330px}
  .hero-art .phone.back{width:270px;margin-top:-300px;transform:translate(-92%,10%) rotate(-8deg)}
  .hero-art .phone.front{transform:translateX(22%) rotate(2.5deg)}
  .chip.c1{right:-2%;top:9%}
  .chip.c2{left:-4%;bottom:12%}
  .numbers-grid .card-shot{position:sticky;top:96px}
}

/* header CTA: one line on small phones (it wrapped to two at 327-360 px) */
.head-cta { white-space: nowrap; }
.head-cta .cta-short { display: none; }
@media (max-width: 400px) {
  .head-cta .cta-long { display: none; }
  .head-cta .cta-short { display: inline; }
}

/* footer (BowlBrain suite — matches bowleru.app) */
.bb-suite{border-top:1px solid #20293D;padding:48px 0 56px;background:#0B0F1A;color:var(--ink);--ink:#EEF2FB;--text2:#C6D0E4;--muted:#9BA7BF;--faint:#5C6883;--line:#20293D;--line2:#2B3750;--brand2:#DD9A52}
.bb-suite .fhead{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.bb-suite .fhead .bb{font-family:"Archivo";font-weight:900;font-size:17px}
.bb-suite .fhead .bb span{color:var(--brand2)}
.bb-suite .fhead .tl{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);letter-spacing:.04em}
.bb-suite .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:720px){.bb-suite .fcols{grid-template-columns:1fr 1fr}.bb-suite .fcols .c3{grid-column:1/-1}}
@media(max-width:460px){.bb-suite .fcols{grid-template-columns:1fr}}
.bb-suite .fcol h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.bb-suite .fcol a,.fcol .li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;padding:6px 0}
.bb-suite .fcol a:hover{color:var(--ink)}
.bb-suite .st-pill{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px}
.bb-suite .st-live{color:var(--angle);border:1px solid rgba(87,224,138,.35)}
.bb-suite .st-beta{color:var(--break);border:1px solid rgba(255,206,58,.35)}
.bb-suite .st-soon{color:var(--faint);border:1px solid var(--line2)}
.bb-suite .st-here{color:#ffffff;background:var(--brand)}
.bb-suite .fsoc{display:flex;gap:10px}
.bb-suite .fsoc a{width:38px;height:38px;border:1px solid var(--line2);border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.bb-suite .fsoc a:hover{color:var(--ink);border-color:var(--line2)}
.bb-suite .fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint)}

/* BowlBrain suite footer (same as bowleru.app / the other suite sites); tokens it reads, BowlEye copper as the brand */
.bb-suite{--brand:#93602A;--angle:#57E08A;--break:#FFCE3A;font-family:Inter,system-ui,sans-serif}
.bb-suite .wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.bb-suite .mono{font-family:"IBM Plex Mono",monospace}
.bb-suite .fleg{font-size:12px;color:var(--faint);margin:26px 0 0;line-height:1.5}
.bb-suite a{text-decoration:none}
.bb-suite .fcontact{font-size:11px;color:var(--faint);margin-top:14px}

/* looping app videos in phone frames (B: gate replay, shot replay) */
.vfig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.duo .vfig{width:min(46%,280px)}
.duo .vfig .phone{width:100%}
.phone video{display:block;width:100%;height:auto;border-radius:clamp(23px,2.5vw,31px);background:#0b0907}
.step-fig .vfig .phone{width:min(72%,260px);margin:0 auto}
.vcap{font-size:13px;color:var(--muted);text-align:center;max-width:26ch;line-height:1.4}

/* B: whole crops, never sliced by a fixed box (owner: "cut off by the phone… doesn't look professional") */
.kit-fig{height:auto;padding:16px 16px 0;background:var(--surface2)}
.kit-fig picture{width:100%;max-width:none;margin:0;border-radius:14px 14px 0 0;box-shadow:0 0 0 1px var(--line),0 14px 30px -22px rgba(34,29,22,.5);overflow:hidden}
.kit-fig img{width:100%;height:auto;display:block}
.step-fig{height:auto}
.step-fig picture,.step-fig img{height:auto;object-fit:contain}
.step-fig.mid{padding:14px;background:var(--surface2)}
.step-fig.mid picture{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.step-fig.top{padding:16px 0}
.sheet-shot{width:min(100%,360px);margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(34,29,22,.55)}
.sheet-shot img{display:block;width:100%;height:auto}

/* ===== next-level pass ===== */

/* platform "coming soon" pills: plain text + neutral phone glyphs (no store badges or logos) */
.platforms{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.platforms li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);
  font:500 .8rem/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.platforms svg{width:14px;height:20px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.6}
.platforms svg circle,.platforms svg rect + rect{fill:var(--ink);stroke:none}
.platforms b{color:var(--ink);font-weight:600;margin-right:.35em}
.platforms.on-dark{justify-content:center;margin:26px auto 0}
.platforms.on-dark li{background:rgba(243,239,227,.06);border-color:rgba(243,239,227,.22);color:#CFC5AE}
.platforms.on-dark b{color:#F3EFE3}
.platforms.on-dark svg{stroke:#F3EFE3}
.platforms.on-dark svg circle,.platforms.on-dark svg rect + rect{fill:#F3EFE3}
.hero-note{margin-top:20px}

/* hero: the gate replay is the front phone; both phones stay whole on small screens */
.hero-art .phone video{border-radius:clamp(23px,2.5vw,31px)}
@media (max-width:959px){
  .hero-art{min-height:0;display:block;height:calc(min(54vw,330px) * 1.94 + 56px)}
  .hero-art .phone.front{position:absolute;width:min(54vw,330px);right:max(4vw,calc(50% - 300px));top:12px;transform:rotate(2.5deg)}
  .hero-art .phone.back{width:min(42vw,256px);left:max(5vw,calc(50% - 290px));top:64px;margin:0;transform:rotate(-7deg)}
  .chip.c1{right:auto;left:max(1vw,calc(50% - 300px));top:auto;bottom:18%}
  .chip.c2{left:auto;right:max(1vw,calc(50% - 300px));bottom:0}
}
@media (max-width:420px){.hero-art .phone.back{transform:rotate(-7deg)}.hero-art .phone.front{transform:rotate(2.5deg)}}

/* proof strip: the odd fifth item spans the row on phones */
@media (max-width:859px){.strip li:last-child{grid-column:1/-1;border-right:0;border-bottom:0}}

/* bull's-eye motif on the section kicker rule */
.kicker .n::after{width:34px;height:9px;vertical-align:-1px;background:
  radial-gradient(circle at calc(100% - 4.5px) 50%,var(--accent) 0 1.6px,transparent 2px),
  radial-gradient(circle at calc(100% - 4.5px) 50%,transparent 0 3px,var(--ring) 3.2px 4.2px,transparent 4.5px),
  linear-gradient(var(--line2),var(--line2)) left center/24px 1px no-repeat}
.indigo .kicker .n::after{background:
  radial-gradient(circle at calc(100% - 4.5px) 50%,var(--iacc) 0 1.6px,transparent 2px),
  radial-gradient(circle at calc(100% - 4.5px) 50%,transparent 0 3px,var(--iacc) 3.2px 4.2px,transparent 4.5px),
  linear-gradient(var(--iline),var(--iline)) left center/24px 1px no-repeat}

/* call-the-ball demo */
.demo{display:grid;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:26px;
  padding:clamp(18px,3.4vw,36px);margin-bottom:clamp(56px,8vw,96px);box-shadow:0 30px 60px -48px rgba(34,29,22,.6)}
@media (min-width:860px){.demo{grid-template-columns:minmax(260px,340px) 1fr;grid-template-areas:"lane head" "lane ctrl";column-gap:48px;row-gap:0;align-items:start}
  .demo-lane{grid-area:lane;align-self:center}.demo-head{grid-area:head;align-self:end}.demo-panel{grid-area:ctrl}}
.demo-head .kicker + h3{margin:12px 0 10px}
.demo-head h3{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:12px 0 10px}
.tally dd .pm{font:500 .6em/1 var(--sans);vertical-align:.25em;margin-right:1px;color:var(--muted)}
.demo-lane{display:flex;justify-content:center}
.gate-svg{width:min(100%,340px);height:auto;border-radius:14px;box-shadow:0 20px 40px -26px rgba(34,29,22,.7)}
@media (max-width:859px){.gate-svg{width:min(100%,290px)}.demo{gap:20px}.demo-head{margin-bottom:-4px}}
.gate-svg .lane-txt text{font:600 11px/1 var(--sans);fill:#6E5634;letter-spacing:.04em}
.gate-svg .lane-txt text.sm{font-size:10px;font-weight:500}
.gate-svg .lane-foot{font:500 9px/1 var(--sans);fill:#A99F8A;letter-spacing:.04em}
.gate-posts rect{fill:#221D16;transition:fill .2s}
.gate-band{transition:fill .2s,fill-opacity .2s}
.gate-svg.flash-through .gate-posts rect{fill:var(--through)}
.gate-svg.flash-through .gate-band{fill-opacity:.38}
.gate-svg.flash-miss .gate-posts rect{fill:var(--miss)}
.gate-svg.flash-miss .gate-band{fill:var(--miss);fill-opacity:.2}
.gate-ball{fill:#221D16;stroke:#FFFDF8;stroke-width:1.5;opacity:0}
.gate-ball.on{opacity:1}
#gate-trail path{fill:none;stroke-linecap:round;stroke-width:3}
#gate-trail path.now{stroke:var(--entry);stroke-opacity:.85}
#gate-trail path.old{stroke:#8C5A22;stroke-opacity:.18;stroke-width:2}
.gate-mark{stroke:#FFFDF8;stroke-width:1.2}
.gate-mark.t{fill:var(--through)} .gate-mark.m{fill:var(--miss)}
.gate-ring{fill:none;stroke:#D9A400;stroke-width:2}
.demo-panel h3{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:12px 0 10px}
.demo-intro{color:var(--muted);max-width:32em}
.pips{display:flex;gap:7px;margin:4px 0 20px;padding:0;list-style:none}
.pips li{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);background:transparent;transition:background-color .2s,border-color .2s}
.pips li.t{background:var(--through);border-color:var(--through)}
.pips li.m{background:var(--miss);border-color:var(--miss)}
.pips li.c{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px #D9A400}
.tally{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.tally div{padding:12px 8px 12px 0}
.tally dt{font:600 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tally dd{margin:6px 0 0;font:500 clamp(1.5rem,3vw,2rem)/1 var(--serif);font-variation-settings:"opsz" 144}
#t-make{color:var(--through)}
.demo-result{min-height:3.2em;margin:16px 0 18px;font-weight:500}
.demo-result .r-t{color:var(--through);font-weight:650}
.demo-result .r-m{color:var(--miss);font-weight:650}
.demo-result .r-c{color:#8C6A00;font-weight:650}
.demo-actions{display:flex;flex-wrap:wrap;gap:10px}
.demo-actions .btn{cursor:pointer}
.demo-fine{margin:18px 0 0;max-width:40em}
.no-js .demo-actions{display:none}
@media (max-width:420px){.tally{grid-template-columns:repeat(2,1fr)}.tally div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* kit: every image whole, contained in a uniform stage, never cut by the card */
.kit-fig{display:flex;align-items:center;justify-content:center;padding:18px;min-height:230px}
.kit-fig picture{border-radius:12px;box-shadow:0 0 0 1px var(--line),0 14px 30px -22px rgba(34,29,22,.5)}
.kit-fig{flex:1}
.kit-fig.tall > picture{width:auto}
.kit-fig.tall > picture img{height:340px;width:auto}
.kit-fig .phone{width:178px;padding:6px;border-radius:26px}
.kit-fig .phone::before{top:calc(6px + 2.4%)}
.kit-fig .phone picture,.kit-fig .phone img{border-radius:20px;box-shadow:none}

/* how it compares */
.cmp-wrap{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(6px,2vw,14px) clamp(14px,2.6vw,28px)}
.cmp{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp th,.cmp td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font:600 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--ink);padding-top:18px}
.cmp thead td{border-bottom:1.5px solid var(--ink)}
.cmp thead th.be{color:var(--ink);font-size:.8rem}
.cmp thead th.be img{display:inline-block;vertical-align:-6px;margin-right:8px;border-radius:6px}
.cmp tbody th{font-weight:600;width:34%}
.cmp td{color:var(--muted);width:22%}
.cmp td.be,.cmp thead th.be{background:rgba(239,182,115,.14);color:var(--ink)}
.cmp .ck{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--through);vertical-align:middle;position:relative}
.cmp .ck::after{content:"";position:absolute;left:7.5px;top:4px;width:5px;height:10px;border:solid #FFFDF8;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.cmp .no{color:var(--line2);font-size:1.2rem}
.cmp small{display:block;margin-top:4px;font-size:.8rem;color:var(--muted);line-height:1.3}
.cmp .tx{font-size:.9rem}
.cmp-note{margin:16px 0 0}
@media (max-width:719px){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tr{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line);padding:14px 0}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th{grid-column:1/-1;width:auto;border:0;padding:0 0 10px}
  .cmp td{width:auto;border:0;padding:8px 8px 6px;font-size:.86rem}
  .cmp td::before{content:attr(data-label);display:block;font:600 .62rem/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .cmp td.be{border-radius:10px}
}

@media (prefers-reduced-motion:reduce){
  .gate-posts rect,.gate-band,.pips li{transition:none}
}
@media (max-width:419px){.platforms{gap:6px}.platforms li{font-size:.72rem;gap:6px;padding:5px 9px 5px 7px}.platforms svg{width:12px;height:17px}}
/* keep the speed chip off the replay's "through" banner */
@media (min-width:960px){.chip.c1{right:auto;left:-2%;top:16%}}

/* modern phone frame: the bezel is the screen's own thin border (sized to the phone with container units),
   a status-bar band in the screen's colour holds the camera dot so it never sits on the app, fine metal edge + soft shadow */
.phone{--st:#FFFDF8;--bz:#0d0d0f;container-type:inline-size;padding:0;background:none;border-radius:13cqw;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 28px 56px -26px rgba(34,29,22,.55),0 12px 24px -18px rgba(34,29,22,.35)}
.phone.st-cream{--st:#F2EDDF}.phone.st-ink{--st:#14142A}.phone.st-night{--st:#0A0A14}.phone.st-lane{--st:#0C1216}
.phone > picture,.phone > video,.phone > picture img{border-radius:13cqw}
.phone > picture,.phone > video{display:block;width:100%;box-sizing:border-box;overflow:hidden;
  border:2.6cqw solid var(--bz);padding-top:6.4cqw;background:var(--st);
  outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;box-shadow:0 0 0 1px #3d3d42}
.phone > picture img{border-radius:0 0 10.4cqw 10.4cqw;display:block;width:100%;height:auto;background:var(--st)}
.phone::before{top:calc(2.6cqw + 1.5cqw);left:50%;width:3.4cqw;transform:translateX(-50%);background:#050506;box-shadow:0 0 0 .7cqw rgba(255,255,255,.07)}
.phone::after{right:-.6cqw;top:21%;width:.8cqw;height:11%;border-radius:0 .6cqw .6cqw 0;background:#3a3a3f}
.phone.dark picture,.phone.dark img{background:var(--st)}
.indigo .phone{background:none;box-shadow:0 1px 2px rgba(0,0,0,.4),0 34px 70px -30px rgba(134,118,245,.45)}
.hero-art .phone video,.kit-fig .phone picture,.kit-fig .phone img{border-radius:13cqw}
.kit-fig .phone{padding:0;border-radius:13cqw}
.kit-fig .phone::before{top:calc(2.6cqw + 1.5cqw)}
.kit-fig .phone picture img{border-radius:0 0 10.4cqw 10.4cqw}

/* step 3: the shot replay big enough to read */
.step-fig.top{padding:22px 0 26px}
.step-fig .vfig .phone{width:min(84%,300px)}

/* section 4: two clean cards (carry behind, pin sheet in front), big enough to read — no tiny phone */
.pins-figs{display:grid;grid-template-columns:repeat(12,1fr);margin-top:auto;padding-top:8px}
.pins-figs .sheet-shot{width:auto;background:var(--surface);grid-row:1;align-self:start}
.pins-figs .sheet-shot:nth-child(2){grid-column:1 / 10;margin-top:0;z-index:1}
.pins-figs .sheet-shot:nth-child(1){grid-column:5 / 13;margin-top:46%;z-index:2;box-shadow:0 0 0 1px var(--line),0 30px 50px -24px rgba(34,29,22,.6)}

/* trimmed page (owner: "too much"): six-item proof strip */
@media (min-width:860px){.strip ul{grid-template-columns:repeat(6,1fr)}.strip li{padding:24px 18px}}
@media (max-width:859px){.strip li:last-child{grid-column:auto;border-bottom:0}.strip li:nth-last-child(2){border-bottom:0}}
/* pins & carry folded into The numbers */
.pins-row{display:grid;gap:32px;margin-top:clamp(56px,7vw,88px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line);align-items:center}
@media (min-width:960px){.pins-row{grid-template-columns:.9fr 1.1fr;gap:64px}}
.pins-row h3{font:500 clamp(1.6rem,2.6vw,2.1rem)/1.15 var(--serif);margin:12px 0 14px}
.pins-row h3 em{color:var(--accent,#93602A)}
.pins-row .pins-figs{max-width:520px;width:100%;justify-self:center}
/* slim sections */
.sec.slim{padding:clamp(56px,7vw,96px) 0}
.indigo.slim .indigo-grid{align-items:center}
.indigo.slim .swap-stage{width:min(62vw,250px)}
/* oil: families up top, the full table on demand */
.pat-chips{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.pat-chips li{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:.92rem;color:var(--muted)}
.pat-chips b{display:block;font:500 1.15rem/1.2 var(--serif);color:var(--ink)}
.pat-more{border-top:1px solid var(--line);padding-top:6px}
.pat-more summary{cursor:pointer;padding:12px 0;font:600 .9rem/1.2 var(--sans);color:var(--entry);list-style:none}
.pat-more summary::-webkit-details-marker{display:none}
.pat-more summary::after{content:" +"}
.pat-more[open] summary::after{content:" −"}
/* kit: four cards, two by two */
@media (min-width:1000px){.kit{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}}
.strip ul{margin-inline:auto}
.pat-chips{grid-template-columns:repeat(3,1fr);gap:8px}.pat-chips li{padding:10px 12px;font-size:.8rem;line-height:1.35}.pat-chips b{font-size:1.05rem}
/* trim 2: aim types as one line, one oil phone */
.type-line{list-style:none;padding:0;margin:0 0 clamp(40px,6vw,64px);display:grid;gap:10px}
@media (min-width:760px){.type-line{grid-template-columns:repeat(3,1fr)}}
.type-line li{padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--muted);font-size:.95rem}
.type-line b{display:block;font:500 1.25rem/1.2 var(--serif);color:var(--ink)}
.oil-phone{display:flex;justify-content:center}
.oil-phone .phone{width:min(70vw,280px)}