/* ============================================================
   Baseball Swing Counter — landing page
   Layers on top of v2-editorial.css (data-accent="orange").
   Only the bits the shared editorial system doesn't already give us.
   ============================================================ */

/* Hero watercolor art — mirrors the working .pcl-hero-art on the people page.
   No filter:drop-shadow on the base rule: iOS Safari can fail to paint a large
   transparent PNG that's drop-shadow-filtered (the "image won't load"). The
   shadow is desktop-only; on mobile the image is height-capped so the tall
   square art can't overflow the fold (the "cut off"). */
.bsc-hero-art{margin:0}
.bsc-hero-art img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
@media(min-width:781px){
    .bsc-hero-art img{filter:drop-shadow(0 14px 30px rgba(249,115,22,.18))}
}
@media(max-width:780px){
    .bsc-hero-art img{max-width:400px;max-height:54vh;width:auto}
}

/* Framing "how to stand the phone" steps — three numbered cards */
.bsc-steps{
    max-width:1240px;margin:0 auto;padding:0 1.5rem;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
}
.bsc-step{
    display:flex;gap:1rem;align-items:flex-start;
    padding:1.5rem;border:1px solid var(--rule);border-radius:14px;
    background:var(--paper);
}
.bsc-step-n{
    flex:0 0 auto;
    font-size:2rem;font-weight:800;font-style:italic;line-height:1;
    color:var(--accent-deep);
}
.bsc-step h3{
    font-size:1.125rem;font-weight:800;letter-spacing:-.01em;
    margin:.1rem 0 .35rem;color:var(--ink);
}
.bsc-step p{
    font-size:.9rem;line-height:1.5;color:var(--muted);margin:0;
}

/* Six-feature grid = the shared .v2-personas grid, but wants exactly
   3-up on desktop and 2-up on tablet so 6 cards read as 2 clean rows. */
@media(min-width:781px){
    .bsc-features{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:521px) and (max-width:780px){
    .bsc-features{grid-template-columns:repeat(2,1fr)}
}

/* Pro-gated feature cards get a corner tag + warm tint */
.bsc-features .bsc-pro{position:relative}
.bsc-features .bsc-pro::after{
    content:"PRO";
    position:absolute;top:.9rem;right:.9rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.5625rem;font-weight:700;letter-spacing:.14em;
    color:#fff;background:var(--accent-deep);
    padding:.2rem .4rem;border-radius:5px;
}

@media(max-width:780px){
    .bsc-steps{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:640px){
    .bsc-steps{padding:0 1rem}
}