/* Store landing page (/store).
 *
 * Colours read the --sd-* tokens printed by layouts/store from
 * EmailBrandingService, so this page wears each studio's own brand.
 *
 * Hierarchy is deliberate and reflects the page's job: creating an account is
 * the FIRST objective (the studio's CTA colour, once, above the fold), and the
 * picture-day code lookup is the second (quieter, further down, still one
 * click from the hero for a parent holding a slip).
 */

.sl-hero { background: var(--sd-primary); color: #fff; padding: 2.5rem 0 3rem; }
.sl-hero-copy { max-width: 44rem; }
.sl-eyebrow {
    font-family: 'Oswald', 'Segoe UI', sans-serif; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; font-size: .72rem;
    color: var(--sd-cta);
}
.sl-hero-title { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.sl-hero-sub { color: rgba(255,255,255,.82); font-size: 1.02rem; max-width: 38rem; }
.sl-hero-note { color: rgba(255,255,255,.7); font-size: .88rem; margin-top: 1rem; }
.sl-hero-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.sl-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.sl-btn-primary {
    display: inline-block; background: var(--sd-cta); color: var(--sd-on-cta);
    border-radius: 10px; padding: .8rem 1.6rem; font-weight: 700; font-size: 1rem;
    text-decoration: none; white-space: nowrap;
}
.sl-btn-primary:hover { filter: brightness(1.07); color: var(--sd-on-cta); }
.sl-btn-quiet {
    display: inline-block; border: 1px solid rgba(255,255,255,.45); color: #fff;
    border-radius: 10px; padding: .8rem 1.4rem; font-weight: 600; font-size: .95rem;
    text-decoration: none; white-space: nowrap;
}
.sl-btn-quiet:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- why an account ----------
   Each reason sits on its own card with a top rule in the studio's accent, so
   the section reads as part of the brand rather than three bare paragraphs.
   The accent appears here as a hairline and an icon tile — never as a button,
   so the only accent-filled control on the page stays the account CTA. */
.sl-benefit {
    height: 100%;
    background: #fff;
    border: 1px solid #e6eaf1;
    border-top: 3px solid var(--sd-cta);
    border-radius: 12px;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 6px 18px rgba(16,24,40,.04);
}
.sl-benefit-ic {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--sd-tint); color: var(--sd-primary); font-size: 1.2rem; margin-bottom: .8rem;
    border: 1px solid var(--sd-hairline);
}
.sl-benefit-h { font-size: 1.02rem; font-weight: 700; margin-bottom: .35rem; }
.sl-benefit-p { color: #55607a; font-size: .92rem; margin: 0; }

/* ---------- the code lookup (second objective) ---------- */
.sl-find {
    background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 1.6rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 6px 18px rgba(16,24,40,.04);
}
.sl-find { border-top: 3px solid var(--sd-primary); }
.sl-find-head { margin-bottom: 1.1rem; }
.sl-find-h { font-size: 1.12rem; font-weight: 700; margin-bottom: .25rem; }
.sl-find-p { color: #55607a; font-size: .92rem; }
.sl-find-row { display: flex; gap: .6rem; }
.sl-find-row .form-control { flex: 1 1 auto; min-width: 0; }
.sl-btn-find {
    background: var(--sd-primary); color: #fff; border: none; border-radius: 10px;
    padding: .6rem 1.3rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.sl-btn-find:hover { filter: brightness(1.15); }
@media (max-width: 575.98px) {
    .sl-find-row { flex-direction: column; }
    .sl-btn-find { width: 100%; padding: .75rem 1rem; }
}

/* ---------- closing nudge ---------- */
.sl-closer {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    background: var(--sd-tint); border: 1px solid var(--sd-hairline);
    border-radius: 14px; padding: 1.3rem 1.5rem;
}
.sl-closer > .min-w-0 { flex: 1 1 16rem; min-width: 0; }
.sl-closer-h { font-weight: 700; font-size: 1.05rem; }
.sl-closer-p { color: #55607a; font-size: .92rem; }