/* Homepage sections (templates/index.html), on top of site.css. */

/* ---------- Hero ---------- */

/* Pulled up under the header's rounded bottom edge so the cream runs
   straight into it */
.hero {
    margin-top: clamp(-36px, -3vw, -24px);
    padding: clamp(88px, 11vw, 168px) var(--gutter) clamp(64px, 10vw, 152px);
}

.hero-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.hero-copy { flex: 1 1 520px; min-width: 0; }
.hero-card-col { flex: 1 1 380px; min-width: 0; }

.hero .eyebrow { margin: 0; }

.hero h1 {
    font-size: clamp(40px, 4.6vw, 60px);
    line-height: 1.02;
    letter-spacing: -.03em;
    margin: 20px 0 26px;
    text-wrap: balance;
}

.hero-lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 36px;
    max-width: 460px;
    text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hero-quote {
    margin: 40px 0 0;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 460px;
}
.hero-quote .avatar { width: 44px; height: 44px; background: var(--green-soft); }
.stars { display: flex; gap: 1px; color: #F2C94C; }
.stars .ms { font-size: 16px; }
.hero-quote blockquote { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.hero-quote cite { font-style: normal; color: var(--muted); }

/* ---------- Hero on phones ----------
   On a phone the copy column dissolves (display: contents) so its pieces
   and the card can be ordered as one list: headline, what it is, the
   buttons, then the live card set in the outline of a phone.

   The hero fills the first screen exactly: its height is the small
   viewport (svh - the visible area with the browser's toolbars showing,
   wherever they sit) less the part of the sticky header it doesn't tuck
   under. The phone takes whatever height is left at the bottom (between
   200px and 380px), cropped at that edge as if it continues below the
   fold. Any space beyond that goes either side of the headline, lede and
   buttons, which stay together as one block (auto margins on the first
   and last of them, not stretched gaps). On a screen too short for even
   the smallest phone the hero just grows and the phone's base drops below
   the fold.

   The eyebrow and the quote are dropped - the phone lede says what the
   product is, and the testimonials further down carry the proof. */
.hero-lede-mobile { display: none; }

@media (max-width: 859px) {
    /* 78px header, of which the hero tucks 24px under (its negative margin) */
    .hero {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 54px);
        min-height: calc(100svh - 54px);
        padding: clamp(40px, 7svh, 56px) var(--gutter) 0;
    }
    .hero-grid { flex: 1; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .hero-copy { display: contents; }
    .hero .eyebrow,
    .hero-lede-desktop,
    .hero-quote { display: none; }
    .hero h1 { order: 1; font-size: clamp(28px, 7.6vw, 38px); line-height: 1.05; margin: auto 0 0; }
    .hero-lede-mobile { display: block; order: 2; font-size: 15px; line-height: 1.5; margin: 12px 0 20px; }
    .hero-actions { order: 3; gap: 10px; margin-bottom: auto; }
    .hero-card-col {
        order: 4;
        width: 100%;
        max-width: 340px;
        margin: 28px auto 0;
        padding: 10px 10px 0;
        position: relative;
        flex: 1 1 0;
        min-height: 200px;
        max-height: 380px;
        overflow: hidden;
        background: var(--bezel);
        border: 1px solid var(--line);
        border-bottom: 0;
        border-radius: 44px 44px 0 0;
    }
    .hero-card-col .pickup-card {
        min-height: 100%; /* screen fills the frame on tall phones */
        border-radius: 34px 34px 0 0;
        box-shadow: none;
        padding-top: 30px;
        position: relative;
    }
    /* Dynamic Island, in the frame's own soft tone */
    .hero-card-col .pickup-card::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 84px;
        height: 22px;
        margin-left: -42px;
        border-radius: 11px;
        background: var(--rule);
    }
    .hero-actions .btn { font-size: 16px; padding: 13px 20px; }

    /* "There's more below": a soft fade over the phone's cut-off edge with
       a gently bobbing arrow in it. Hidden by the hero script once the
       page is scrolled. */
    .hero-card-col::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 72px;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff 65%);
        pointer-events: none;
    }
    .scroll-cue {
        display: grid;
        place-items: center;
        position: absolute;
        z-index: 1;
        left: 50%;
        bottom: 10px;
        width: 36px;
        height: 36px;
        margin-left: -18px;
        border-radius: 50%;
        background: var(--card);
        border: 1px solid var(--line);
        box-shadow: 0 4px 12px rgba(20, 32, 31, .08);
        color: var(--green-ink);
        transition: opacity .3s;
        animation: scroll-cue-bob 1.6s ease-in-out infinite;
    }
    .scroll-cue .ms { font-size: 24px; }
    .scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
}

@media (min-width: 860px) {
    .scroll-cue { display: none; }
}

@keyframes scroll-cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue { animation: none; }
}

/* Animated "today's pickup" card */

.pickup-card {
    background: var(--card);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(20, 32, 31, .04), 0 20px 50px rgba(60, 48, 20, .08);
    overflow: hidden;
}
@media (min-width: 1000px) {
    .pickup-card { max-width: 500px; margin-left: auto; }
}
.pickup-card-head { padding: 24px 24px 8px; }
.pickup-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pickup-card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.live-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--green-ink);
    background: var(--green-soft);
    padding: 5px 10px;
    border-radius: 999px;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pickup-card-title { font-size: 26px; font-weight: 600; letter-spacing: -.015em; margin: 6px 0 4px; }
.pickup-card-sub { font-size: 15px; color: var(--muted); }

.timeline {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    padding: 4px 24px 22px;
}

/* On a phone the card keeps just the three beats that tell the story:
   joining, being called, being collected */
@media (max-width: 859px) {
    .tl-row:nth-child(1),
    .tl-row:nth-child(3) { display: none; }
}

/* Rows are pending until the script marks them done or current */
.tl-row {
    display: grid;
    grid-template-columns: 52px 14px 1fr;
    gap: 12px;
    align-items: stretch;
    margin: 0 -12px;
    padding: 0 12px;
    border-radius: 12px;
    background: transparent;
    transition: background .35s;
}
.tl-time {
    font-size: 15px;
    font-weight: 600;
    padding: 11px 0;
    font-variant-numeric: tabular-nums;
    color: var(--faint);
    transition: color .35s;
}
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-rail span { width: 2px; flex: 1; background: var(--rule); }
.tl-rail i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rule);
    flex: none;
    transition: background .35s;
}
.tl-desc {
    padding: 11px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--faint);
    transition: color .35s;
}

.tl-row.is-done .tl-time,
.tl-row.is-current .tl-time { color: var(--ink); }
.tl-row.is-done .tl-rail i,
.tl-row.is-current .tl-rail i { background: var(--dot); }
.tl-row.is-done .tl-desc { color: var(--muted); }
.tl-row.is-current { background: var(--page); }
.tl-row.is-current .tl-desc { color: var(--ink); }

/* Phones: the card has to share the first screen with the headline and the
   buttons, so it drops the school-times title and the label becomes the
   heading, with tighter rows */
@media (max-width: 859px) {
    .pickup-card { border-radius: 20px; }
    .pickup-card-head { padding: 16px 16px 2px; }
    .pickup-card-label {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -.01em;
        text-transform: none;
        color: var(--ink);
    }
    .pickup-card-title,
    .pickup-card-sub { display: none; }
    .timeline { margin-top: 4px; padding: 2px 16px 12px; }
    .tl-row { grid-template-columns: 42px 12px 1fr; gap: 10px; margin: 0 -8px; padding: 0 8px; border-radius: 10px; }
    .tl-time,
    .tl-desc { padding: 8px 0; font-size: 14px; }
    .tl-desc { line-height: 1.35; }
}

/* ---------- Before / after ---------- */

.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px;
}
.compare { border-radius: 20px; padding: clamp(26px, 3.5vw, 40px); }
.compare .eyebrow { margin: 0; }
.compare ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 17px;
    line-height: 1.45;
    margin-top: 20px;
}
.compare li { display: flex; gap: 12px; }
.compare li .ms { font-size: 20px; }

.compare-before { background: #FCE4E6; color: #5A3F3A; }
.compare-before .eyebrow { color: #9A4E46; }
.compare-before .ms { color: #C0675D; }

.compare-after { background: var(--green-soft); color: #1F4A3F; }
.compare-after .eyebrow { color: #2F7A65; }
.compare-after .ms { color: var(--green-ink); }

/* ---------- Metrics ---------- */

.metrics {
    background: var(--card);
    border-radius: 20px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
}
@media (min-width: 1100px) {
    .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Every cell draws a right and bottom border; the negative margin pushes the
   outer edges under the card's clipped edge, leaving only inner dividers. */
.metric {
    padding: clamp(20px, 3vw, 32px) clamp(16px, 2.4vw, 28px);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 0 -1px -1px 0;
}
.metric-value {
    font-size: clamp(32px, 4.4vw, 56px);
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--green-ink);
    line-height: 1;
}
.metric-label {
    font-size: clamp(14px, 1.3vw, 16px);
    color: var(--muted);
    margin-top: 10px;
    line-height: 1.4;
}

/* ---------- How it works ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}
.step { background: var(--card); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    flex: none;
}
.step-line { flex: 1; height: 2px; background: var(--green-soft); }
.step h3 { margin: 22px 0 8px; font-size: 21px; }
.step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ---------- Features ---------- */

.features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 16px);
}
.feature {
    border-radius: 20px;
    padding: clamp(18px, 2.4vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: clamp(190px, 18vw, 220px);
}
.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 24px;
}
.feature h3 { margin: auto 0 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.2; }
.feature p { margin: 0; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.45; }

/* Three tile colours, ordered so no two neighbours match at either column count */
.feature {
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow);
}
.feature .feature-icon { background: var(--green-soft); color: var(--green-ink); }
.feature p { color: var(--muted); font-weight: 400; }

.feature:nth-child(3n+2) { background: var(--green); color: #fff; box-shadow: none; }
.feature:nth-child(3n+2) .feature-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.feature:nth-child(3n+2) p { color: #fff; font-weight: 500; }

.feature:nth-child(3n) { background: var(--teal); color: #fff; box-shadow: none; }
.feature:nth-child(3n) .feature-icon { background: rgba(255, 255, 255, .1); color: var(--mint); }
.feature:nth-child(3n) p { color: rgba(255, 255, 255, .82); }

@media (min-width: 760px) {
    .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Second row runs teal, white, green so it doesn't repeat the first row's columns */
    .feature:nth-child(4) { background: var(--teal); color: #fff; box-shadow: none; }
    .feature:nth-child(4) .feature-icon { background: rgba(255, 255, 255, .1); color: var(--mint); }
    .feature:nth-child(4) p { color: rgba(255, 255, 255, .82); font-weight: 400; }

    .feature:nth-child(5) { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
    .feature:nth-child(5) .feature-icon { background: var(--green-soft); color: var(--green-ink); }
    .feature:nth-child(5) p { color: var(--muted); font-weight: 400; }

    .feature:nth-child(6) { background: var(--green); color: #fff; box-shadow: none; }
    .feature:nth-child(6) .feature-icon { background: rgba(255, 255, 255, .18); color: #fff; }
    .feature:nth-child(6) p { color: #fff; font-weight: 500; }
}

/* ---------- Who it's for ---------- */

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px;
}
.audience {
    background: var(--card);
    border-radius: 20px;
    padding: clamp(26px, 3.5vw, 44px);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.audience h3 {
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -.02em;
    margin: 20px 0 14px;
    line-height: 1.1;
}
.audience > p { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--muted); }

.ticks { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.ticks li { display: flex; gap: 12px; }
.ticks .ms { color: var(--green-ink); font-size: 22px; }

.store-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.store-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 15px;
}
.store-links a:hover { color: #fff; background: var(--teal); }
.store-links .ms { font-size: 20px; }

/* ---------- Case study ----------
   The story and a link to the PDF beside the geofence map, then the
   results (reusing the metrics card) and the school's quotes. */

.case {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-bottom: 16px;
}
.case-school { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.case-school img { width: 72px; height: auto; background: #fff; border-radius: 14px; padding: 6px; box-shadow: var(--shadow); }
.case-school strong { display: block; font-size: 19px; font-weight: 600; }
.case-school span { font-size: 15px; color: var(--muted); }
.case-story p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.case-story .btn { margin-top: 8px; width: fit-content; }

.case-map { position: relative; margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.case-map img { display: block; width: 100%; height: auto; }
.case-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--green);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.case-tag {
    position: absolute;
    transform: translateY(-50%);
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    white-space: nowrap;
}
.case-tag-zone { background: var(--teal); color: #fff; }
.case-tag-fence { background: var(--green); color: #fff; }
.case-credit { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: var(--muted); background: rgba(250, 247, 241, .85); padding: 1px 5px; border-radius: 4px; }

.case-metrics { margin-bottom: 16px; }
.case-metrics .metric-value { font-size: clamp(30px, 3.6vw, 46px); }

/* ---------- Testimonials ---------- */

.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}
@media (min-width: 1160px) {
    .quote-hero { grid-column: span 2; }
}

.quotes figure { margin: 0; display: flex; flex-direction: column; }
.quotes blockquote { margin: 0; font-weight: 500; text-wrap: pretty; }
.quotes figcaption { margin-top: auto; display: flex; align-items: center; }

.quote-hero {
    background: var(--teal);
    color: #fff;
    border-radius: 24px;
    padding: clamp(28px, 4vw, 56px);
    gap: 28px;
    min-height: 360px;
}
.quote-mark { font-size: 96px; line-height: .6; height: 40px; font-weight: 600; color: var(--mint); }
.quote-hero blockquote { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -.02em; }
.quote-hero figcaption { gap: 14px; }
.quote-hero strong { display: block; font-weight: 600; }
.quote-hero .role { color: rgba(255, 255, 255, .7); font-size: 15px; }
.quote-hero .avatar { width: 44px; height: 44px; background: var(--green); color: #fff; }

.quote-stack { display: flex; flex-direction: column; gap: 16px; }
.quote { flex: 1; background: var(--card); box-shadow: var(--shadow); border-radius: 24px; padding: 28px; gap: 20px; }
.quote blockquote { font-size: 19px; line-height: 1.45; }
.quote figcaption { gap: 12px; font-size: 15px; }
.quote strong { font-weight: 600; }
.quote .role { color: var(--muted); }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--page);
    color: var(--green-ink);
    display: grid;
    place-items: center;
    font-weight: 600;
    flex: none;
}
.avatar-gold { color: var(--gold-ink); }

/* ---------- Safeguarding ---------- */

.safeguarding {
    background: var(--card);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: clamp(28px, 4.5vw, 64px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 40px;
    align-items: center;
}
.section .safeguarding h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 0 0 14px; }
.safeguarding p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 460px; }

.safeguarding-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.safeguarding-list li {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
}
.safeguarding-list .ms { color: var(--green-ink); font-size: 22px; }

/* ---------- FAQ ---------- */

#faq h2 { margin-bottom: 28px; }

.faqs { display: flex; flex-direction: column; gap: 10px; }
.faqs details { background: var(--card); border-radius: 16px; padding: 0 24px; }
.faqs summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 600;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary .ms { color: var(--green-ink); font-size: 24px; transition: transform .2s; }
.faqs details[open] summary .ms { transform: rotate(180deg); }
.faqs p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- Contact ---------- */

.section-contact { padding-bottom: clamp(56px, 7vw, 96px); }

.contact {
    text-align: center;
    padding: clamp(40px, 6vw, 88px) 24px;
    border-radius: 24px;
    background: var(--teal);
    color: #fff;
}
.contact .eyebrow { color: var(--mint); }
.section .contact h2 {
    font-size: clamp(34px, 4.6vw, 60px);
    margin: 0 auto 16px;
    max-width: 760px;
}
.contact > p { margin: 0 auto 32px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 520px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.contact-actions .btn-primary { padding: 16px 28px; }
.contact-phone { color: #fff; font-size: 17px; padding: 16px 18px; font-weight: 500; }
.contact-phone:hover { color: var(--mint); }

/* "Email me the overview", for visitors not ready to book a call */
.overview-form {
    max-width: 520px;
    margin: 36px auto 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.overview-form label { display: block; margin-bottom: 14px; font-size: 16px; color: rgba(255, 255, 255, .82); }
.overview-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.overview-row input {
    flex: 1 1 220px;
    min-width: 0;
    font: inherit;
    font-size: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 14px;
    padding: 14px 16px;
}
.overview-row input::placeholder { color: rgba(255, 255, 255, .55); }
.overview-row input:focus { outline: none; border-color: var(--mint); background: rgba(255, 255, 255, .12); }
.btn-light {
    justify-content: center;
    background: #fff;
    color: var(--teal);
    font-weight: 600;
    padding: 14px 22px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.btn-light:hover { color: var(--teal); background: var(--green-soft); }
/* On a phone the input and button stack at the same full width, rather
   than the button wrapping onto a line of its own at its natural width */
@media (max-width: 600px) {
    .overview-row { flex-direction: column; align-items: stretch; }
    .overview-row input { flex: none; }
}
.overview-error { margin: 12px 0 0; font-size: 15px; font-weight: 500; color: #F7B4AD; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* One line of context under a section heading */
.section-lede {
    margin: calc(-1 * clamp(12px, 2vw, 24px)) 0 clamp(28px, 4vw, 40px);
    max-width: 640px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--muted);
}


/* ---------- See it in action ----------
   A three-column grid: the browser screenshots span two columns and the
   phones one, alternating sides row by row. On a phone the two phones sit
   side by side between the full-width browser shots. */

.shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 48px) clamp(16px, 2.4vw, 32px);
    align-items: start;
}
.shot { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.shot-wide { grid-column: span 2; }
.shot figcaption { font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 520px; }
.shot figcaption strong { color: var(--ink); font-weight: 600; }

.browser-frame {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 32, 31, .04), 0 20px 50px rgba(60, 48, 20, .08);
    overflow: hidden;
}
.browser-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--bezel); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.browser-frame img { display: block; width: 100%; height: auto; }

.shot-phone { align-items: center; text-align: center; }
.shot-phone figcaption { max-width: 260px; }
.browser-frame picture { display: block; }
/* A soft outline in the same tones as .browser-frame, not a black handset */
.phone-frame {
    width: 100%;
    max-width: 240px;
    padding: 8px;
    background: var(--bezel);
    border: 1px solid var(--line);
    border-radius: 38px;
    box-shadow: 0 1px 2px rgba(20, 32, 31, .04), 0 20px 50px rgba(60, 48, 20, .08);
}
.phone-frame > * {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 19.5;
    border-radius: 30px;
    overflow: hidden;
}
.phone-frame img { height: auto; object-fit: cover; object-position: top; }

@media (max-width: 759px) {
    .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shot-phone figcaption { font-size: 14px; }
    .phone-frame { padding: 6px; border-radius: 30px; }
    .phone-frame > * { border-radius: 24px; }
}

/* ---------- Pricing ---------- */

.pricing {
    background: var(--green-soft);
    border-radius: 24px;
    padding: clamp(28px, 4.5vw, 56px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.section .pricing h2 { margin-bottom: 24px; }
/* "From" as a small label above the figure rather than a word beside it */
.price { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 10px; }
.price-from {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2F7A65;
}
.price-per { font-size: 18px; color: #1F4A3F; }
.price-amount {
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--green-ink);
}
.price-note { margin: 12px 0 28px; font-size: 16px; color: #1F4A3F; }
.pricing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trial-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 15px; font-weight: 500; color: var(--green-ink); }
.trial-note .ms { font-size: 20px; }

.pricing-included { background: var(--card); border-radius: 20px; padding: clamp(22px, 3vw, 32px); }
.pricing-included-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
}