/* Home page: live proof strip, Start here path, control block, collapsible feature index. */

.proof-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.proof-strip a{display:flex;flex-direction:column;gap:2px;height:100%;padding:16px 18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);color:var(--text-2);text-decoration:none;font-size:.9rem;line-height:1.35;transition:border-color .2s,transform .2s var(--ease)}
.proof-strip a:hover,.proof-strip a:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.proof-strip strong{font-family:var(--font-display);font-size:1.9rem;font-weight:500;line-height:1.1;color:var(--text)}
.proof-note{margin:10px 0 0;font-size:.82rem;color:var(--muted)}

.start-section{padding-bottom:72px}
.start-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.start-step{display:flex;gap:18px;align-items:flex-start;padding:26px 24px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line)}
.start-num{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:1.1rem}
.start-step h3{font-size:1.15rem;margin:6px 0 8px}
.start-step p{margin:0 0 12px;color:var(--text-2);font-size:.95rem}
.start-time{display:inline-block;font-size:.78rem;font-weight:650;letter-spacing:.04em;color:var(--accent-text);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.start-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.start-cta p{margin:0;font-size:.95rem}
.start-cta p a{color:var(--accent-text)}

.control-section{background:var(--surface-2);border-top:1px solid var(--line)}
.control-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 36px}
.control-grid h3{font-size:1.08rem;margin:0 0 6px;padding-left:28px;position:relative}
.control-grid h3::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:8px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.control-grid p{margin:0;padding-left:28px;color:var(--text-2);font-size:.95rem}

/* Feature index groups open on demand */
.fi-grid{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.fi-grid .fi-group{margin:0;padding:0}
.fi-group summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--target,44px);padding:20px 24px}
.fi-group summary::-webkit-details-marker{display:none}
.fi-group summary h3{margin:0}
.fi-count{flex:none;font-size:.8rem;color:var(--on-ink-muted)}
.fi-count::after{content:"+";display:inline-block;margin-left:10px;font-size:1.2rem;line-height:1;color:var(--accent-2);transition:transform .25s var(--ease)}
.fi-group[open] .fi-count::after{transform:rotate(45deg)}
.fi-group dl,.fi-group .fi-more{margin-left:24px;margin-right:24px}
.fi-group .fi-more{margin-bottom:20px}
.fi-group summary:focus-visible{outline:3px solid var(--accent-2);outline-offset:-3px;border-radius:var(--radius-lg)}

@media (max-width:920px){
  .proof-strip{grid-template-columns:repeat(2,1fr)}
  .start-steps,.control-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .proof-strip a{padding:14px}
  .proof-strip strong{font-size:1.6rem}
  .start-step{padding:22px 18px;gap:14px}
}

/* Hero "Watch the film" trigger and the brand film lightbox (landing.js) */
.film-play{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.film-play svg{margin-left:2px}
.film-dialog{width:min(1100px,94vw);max-width:none;max-height:none;padding:0;overflow:hidden;background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.film-dialog[open]{animation:dialog-in .3s var(--ease)}
.film-dialog::backdrop{background:rgba(10,10,12,.8);backdrop-filter:blur(4px)}
.film-dialog video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 110px);background:#000}
@media (max-width:600px){
  .film-dialog{width:100vw;border-radius:0;border:0}
  .film-dialog-bar{padding:8px 8px 8px 14px;gap:8px}
  .film-dialog-bar .srx-dialog-title{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.film-dialog[open]{animation:none}}

/* Home hero motion: a muted loop sits exactly on the still art and only shows while playing.
   The loop starts and ends on the still, so the page rests on the identical picture between plays. */
.hv2-media{position:relative;isolation:isolate;cursor:pointer}
.hv2-media .hv2-art{position:relative;z-index:0}
.hv2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .35s ease;pointer-events:none}
.hv2-media.is-playing .hv2-video{opacity:1}
.hv2-motion-toggle{position:absolute;z-index:3;right:clamp(10px,1.6vw,22px);bottom:clamp(10px,1.6vw,22px);width:40px;height:40px;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(21,22,26,.18);background:rgba(250,248,244,.86);color:#15161a;cursor:pointer;box-shadow:0 2px 8px rgba(20,16,10,.12)}
.hv2-motion-toggle[hidden]{display:none}
.hv2-motion-toggle:hover{border-color:var(--accent)}
.hv2-motion-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hv2-motion-toggle svg{width:16px;height:16px;fill:currentColor}
.hv2-motion-toggle .i-play,.hv2-motion-toggle[aria-pressed="true"] .i-pause{display:none}
.hv2-motion-toggle[aria-pressed="true"] .i-play{display:block}
/* "Watch the story": opens the full sketchbook film with sound; clicking the art does the same */
.hv2-story{position:absolute;z-index:3;right:13%;top:24%;display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;background:rgba(250,248,244,.92);border:1px solid rgba(21,22,26,.16);color:#15161a;text-decoration:none;white-space:nowrap;font:600 .95rem/1 var(--font-body);box-shadow:0 6px 20px rgba(20,16,10,.14);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hv2-story small{font-weight:500;color:#4d4a44;margin-left:4px;font-size:inherit}
.hv2-story:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 10px 26px rgba(255,90,44,.22)}
.hv2-story:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hv2-story .film-play{width:30px;height:30px}
@media (prefers-reduced-motion:no-preference){.hv2-story .film-play{animation:story-pulse 2.6s ease-out 3}}
@keyframes story-pulse{0%{box-shadow:0 0 0 0 rgba(255,90,44,.55)}70%,100%{box-shadow:0 0 0 12px rgba(255,90,44,0)}}
@media (max-width:900px){
  .hv2-story{right:auto;left:50%;top:auto;bottom:clamp(10px,3vw,18px);transform:translateX(-50%);font-size:.85rem;padding:7px 13px 7px 7px}
  .hv2-story:hover{transform:translateX(-50%)}
  .hv2-story .film-play{width:24px;height:24px}
}
@media (max-width:600px){.hv2-motion-toggle{width:32px;height:32px}.hv2-motion-toggle svg{width:13px;height:13px}}
@media (prefers-reduced-motion:reduce){.hv2-video,.hv2-motion-toggle{display:none!important}}

/* Hero sample card: say plainly that it is a sample. */
.hv2-card{padding-top:22px}
.hv2-sample{position:absolute;top:-10px;right:16px;padding:3px 10px;border-radius:999px;background:#15161a;color:#f4efe6;font:700 .68rem/1.4 var(--font-body);letter-spacing:.1em;text-transform:uppercase}

/* One real call, start to finish (app/Views/worked_example.php). */
.example-section{padding-top:40px}
.example-section .section-head p a{color:var(--accent-text)}
.ex-flow{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;counter-reset:none}
.ex-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.ex-step{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.ex-step b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.78rem;letter-spacing:0}
.ex-card h3{font-family:var(--font-display);font-size:1.35rem;font-weight:550;margin:2px 0 0;line-height:1.2}
.ex-org{margin:0;color:var(--muted);font-size:.92rem}
.ex-facts{margin:6px 0 0;display:grid;gap:10px}
.ex-facts div{display:grid;gap:1px;padding-top:10px;border-top:1px solid var(--line)}
.ex-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ex-facts dd{margin:0;font-size:.93rem;color:var(--text)}
.ex-score{display:flex;gap:18px;align-items:center}
.ex-score .ring-label{font-size:1.9rem}
.ex-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:7px 10px;flex:1;min-width:0;font-size:.78rem;color:var(--text-2)}
.ex-bars li{display:contents}
.ex-bars li span{white-space:nowrap}
.ex-bars em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted)}
.ex-bar{display:block;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.ex-bar b{display:block;height:100%;width:0;border-radius:inherit;background:var(--spotlight);transition:width 1.1s var(--ease)}
.ex-points{display:grid;gap:8px;margin-top:4px}
.ex-points p{margin:0;font-size:.86rem;line-height:1.45;color:var(--text-2)}
.ex-points b{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.ex-points .plus{color:var(--good)}
.ex-points .minus{color:var(--warn)}
.ex-verdict{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:var(--good-soft);color:var(--good)}
.ex-verdict b{font-family:var(--font-display);font-size:1.5rem;font-weight:550;line-height:1.1}
.ex-verdict span{color:var(--text-2);font-size:.93rem}
.ex-explain{margin:0;font-size:.88rem;line-height:1.5;color:var(--text-2)}
.ex-form{padding:28px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.ex-form-head{max-width:760px;margin-bottom:18px}
.ex-form-head h3{font-family:var(--font-display);font-size:1.45rem;font-weight:550;margin:8px 0 6px}
.ex-form-head p{margin:0}
.ex-answers{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ex-answers div{padding:14px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.ex-answers .ex-wide{grid-column:1/-1}
.ex-answers dt{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ex-count{font-weight:600;letter-spacing:0;text-transform:none;color:var(--good)}
.ex-answers dd{margin:0;font-size:.94rem;line-height:1.55;color:var(--text)}
.ex-form-foot{margin:16px 0 0;font-size:.9rem;color:var(--text-2)}
.ex-form-foot a{color:var(--accent-text)}
.ex-cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.ex-cta p{margin:0}
@media (max-width:1020px){.ex-flow{grid-template-columns:1fr 1fr}.ex-flow>li:last-child{grid-column:1/-1}}
@media (max-width:680px){.ex-flow,.ex-answers{grid-template-columns:1fr}.ex-card,.ex-form{padding:20px 18px}.ex-score{flex-direction:column;align-items:stretch}.ex-score .ring{align-self:center}}

/* Founder note */
.founder-note{padding-top:40px}
.fn-grid{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:var(--radius-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.fn-photo{margin:0}
.fn-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:24px}
.fn-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;font-weight:460;margin:12px 0 14px}
.fn-copy p{color:var(--text-2);font-size:1.02rem;line-height:1.65;max-width:62ch}
.fn-sign{font-family:var(--font-display);font-style:italic;font-size:1.15rem!important;color:var(--text)!important;margin:4px 0 18px}
@media (max-width:760px){.fn-grid{grid-template-columns:1fr}.fn-photo{max-width:220px}}

/* Stage Coach band */
.sc-band-section{padding-top:0}
.sc-band{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:var(--radius-xl);background:var(--surface-2);border:1px solid var(--line)}
.sc-band h2{font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.02em;font-weight:460;margin:12px 0 10px}
.sc-band p{margin:0 0 20px;max-width:56ch}
.sc-band-shot{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/10}
.sc-band-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:820px){.sc-band{grid-template-columns:1fr}}
.fn-copy .row,.tour-section .row,.sc-band .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fn-photo img{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.fn-grid{background:var(--surface-2)}