/* /tutoring/remote — warm, parent-friendly layer on top of fp-components.css */

.fp-marketing-page {
    --remote-ink: #1f2a37;
    --remote-muted: #5b6474;
    --remote-cream: #fff8f1;
    --remote-peach: #fde9da;
    --remote-peach-ink: #c2562b;
    --remote-sky: #e3f1fc;
    --remote-sky-ink: #1f6fb2;
    --remote-mint: #e2f6ec;
    --remote-mint-ink: #1f8a5b;
    --remote-lilac: #eee8fb;
    --remote-lilac-ink: #6b46c1;
}

/* Optical centring: bootstrap-icons sit on the text baseline (vertical-align: -.125em), which drops
   them low in pills, circles and buttons. As flex items they centre on the box instead. */
.remote-btn,
.remote-service-more,
.remote-dusk-eyebrow,
.remote-counselor-eyebrow {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
}
.remote-btn .bi,
.remote-service-more .bi,
.remote-dusk-eyebrow .bi,
.remote-counselor-eyebrow .bi,
.remote-step-icon .bi,
.remote-service-icon .bi,
.remote-counselor-icon .bi,
.fp-hero-photo-badge .bi,
#remote-hero .fp-hero-stat-facts .bi {
    display: flex;
    line-height: 1;
    margin: 0 !important; /* spacing comes from the parent's gap */
}

/* Soft tint utilities shared by the step icons and service cards */
.remote-tint-peach { --remote-tint: var(--remote-peach); --remote-tint-ink: var(--remote-peach-ink); }
.remote-tint-sky { --remote-tint: var(--remote-sky); --remote-tint-ink: var(--remote-sky-ink); }
.remote-tint-mint { --remote-tint: var(--remote-mint); --remote-tint-ink: var(--remote-mint-ink); }
.remote-tint-lilac { --remote-tint: var(--remote-lilac); --remote-tint-ink: var(--remote-lilac-ink); }

/* ─── Hero: light and warm instead of the dark fp gradient ─── */
#remote-hero {
    --fp-hero-glow: rgba(251, 191, 146, 0.45);
    background: linear-gradient(160deg, var(--remote-cream) 0%, #fdeee2 55%, color-mix(in srgb, var(--fp-accent) 10%, #fff8f1) 100%);
    padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
    padding-top: clamp(2rem, 4vw, 3.25rem);
}
#remote-hero::before { opacity: 0; }
#remote-hero .fp-eyebrow {
    background: #fff;
    border-color: #f3dcc8;
    color: var(--remote-peach-ink);
}
#remote-hero .fp-page-heading {
    color: var(--remote-ink);
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}
#remote-hero .fp-page-heading em {
    color: var(--fp-accent);
    font-style: normal;
}
#remote-hero .fp-hero-sub {
    color: var(--remote-muted);
    font-size: 1.05rem;
    max-width: 34rem;
}
#remote-hero .fp-hero-btn {
    background: var(--fp-accent);
    border-color: var(--fp-accent);
    color: #fff;
}
#remote-hero .fp-hero-btn-ghost {
    background: #fff;
    border-color: #ead9ca;
    color: var(--remote-ink);
}
#remote-hero .fp-hero-stat-facts li {
    color: var(--remote-ink);
    font-weight: 600;
    text-shadow: none;
}
#remote-hero .fp-hero-stat-facts i {
    color: var(--fp-accent);
    opacity: 1;
}

/* ─── Buttons used inside Rich HTML blocks ─── */
.remote-btn {
    align-items: center;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 99px;
    color: var(--remote-ink);
    display: inline-flex;
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.remote-btn:hover,
.remote-btn:focus-visible {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
    color: var(--remote-ink);
}
.remote-btn--solid { background: var(--fp-accent); color: #fff; }
.remote-btn--solid:hover,
.remote-btn--solid:focus-visible {
    background: var(--fp-accent-dark, var(--fp-accent));
    color: #fff;
}

/* ─── Steps ─── */
.remote-steps {
    counter-reset: remote-step;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.remote-step {
    counter-increment: remote-step;
    text-align: center;
}
.remote-step-icon {
    align-items: center;
    background: var(--remote-tint);
    border-radius: 50%;
    color: var(--remote-tint-ink);
    display: inline-flex;
    font-size: 1.7rem;
    height: 4.5rem;
    justify-content: center;
    margin-bottom: 0.9rem;
    position: relative;
    width: 4.5rem;
}
.remote-step-icon::after {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
    color: var(--remote-ink);
    content: counter(remote-step);
    display: flex;
    font-size: 0.75rem;
    font-weight: 800;
    height: 1.5rem;
    justify-content: center;
    position: absolute;
    right: -0.2rem;
    top: -0.2rem;
    width: 1.5rem;
}
.remote-step h3 { color: var(--remote-ink); font-size: 1.1rem; font-weight: 700; margin: 0 0 0.35rem; }
.remote-step p { color: var(--remote-muted); font-size: 0.95rem; margin: 0 auto; max-width: 18rem; }

/* ─── Services: tinted cards, whole card is the link ─── */
.remote-service-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
a.remote-service {
    background: var(--remote-tint);
    border: 1px solid transparent;
    border-radius: 20px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.5rem 1.6rem;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
a.remote-service:hover,
a.remote-service:focus-visible {
    border-color: color-mix(in srgb, var(--remote-tint-ink) 35%, transparent);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}
.remote-service-icon {
    align-items: center;
    background: #fff;
    border-radius: 14px;
    color: var(--remote-tint-ink);
    display: inline-flex;
    font-size: 1.3rem;
    height: 2.8rem;
    justify-content: center;
    width: 2.8rem;
}
.remote-service h3 { color: var(--remote-ink); font-size: 1.15rem; font-weight: 700; margin: 0.35rem 0 0; }
.remote-service p { color: var(--remote-muted); font-size: 0.95rem; margin: 0; }
.remote-service-more {
    color: var(--remote-tint-ink);
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: auto;
    padding-top: 0.5rem;
}
.remote-service-more { transition: gap 0.2s ease; }
a.remote-service:hover .remote-service-more { gap: 0.7rem; }

/* ─── Progress split feature ─── */
/* Space reserved before the photo loads, so the page doesn't grow under an anchor jump */
#remote-progress .fp-split-feature img { aspect-ratio: 4 / 3; border-radius: 22px; object-fit: cover; }
#remote-progress h2 em { color: var(--fp-accent); font-style: normal; }

/* ─── Late-night block: dusk, not midnight ─── */
.remote-dusk {
    background: linear-gradient(135deg, #fde2cf 0%, #f6d3e4 45%, #d9d6f7 100%);
    border-radius: 24px;
    color: var(--remote-ink);
    padding: clamp(1.75rem, 4vw, 3rem);
}
.remote-dusk-copy { max-width: 44rem; }
.remote-dusk-eyebrow {
    color: #7c3aed;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.remote-dusk h2 {
    color: var(--remote-ink);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.4rem 0 0.6rem;
}
.remote-dusk-copy p { color: #3f4a5a; margin: 0 0 1.5rem; }
.remote-zone-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.remote-zone {
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    position: relative;
}
.remote-zone-name {
    color: var(--remote-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.remote-zone-time {
    color: var(--remote-ink);
    display: block;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 0.2rem;
    white-space: nowrap;
}
.remote-zone-time small { color: var(--remote-muted); font-size: 0.6em; font-weight: 700; margin-left: 0.2rem; }
.remote-zone-here {
    background: #7c3aed;
    border-radius: 99px;
    color: #fff;
    display: none;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.55rem;
    position: absolute;
    right: 0.75rem;
    text-transform: uppercase;
    top: 0.75rem;
}
.remote-zone.is-here { background: #fff; border-color: #7c3aed; }
.remote-zone.is-here .remote-zone-here { display: inline-block; }
.remote-dusk-local { color: #3f4a5a; font-weight: 600; margin: 1rem 0 0; }
.remote-dusk-foot {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    margin-top: 1.5rem;
}
.remote-dusk-foot p { color: #3f4a5a; margin: 0; }

/* ─── Counselor callout ─── */
.remote-counselor {
    align-items: center;
    background: var(--remote-sky);
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.remote-counselor-icon {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: var(--remote-sky-ink);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.5rem;
    height: 3.5rem;
    justify-content: center;
    width: 3.5rem;
}
.remote-counselor-copy { flex: 1 1 20rem; }
.remote-counselor-eyebrow {
    color: var(--remote-sky-ink);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.remote-counselor h2 { color: var(--remote-ink); font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 800; margin: 0.3rem 0 0.35rem; }
.remote-counselor p { color: #3f4a5a; margin: 0; }

/* ─── Open this week (hero, filled by remote.mjs) ─── */
.remote-week {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
    width: 100%;
}
.remote-week-label {
    align-items: center;
    color: var(--remote-ink);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.45rem;
}
.remote-week-label small { color: var(--remote-muted); font-size: inherit; font-weight: 600; }
.remote-next-dot {
    animation: remote-pulse 2s ease-in-out infinite;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    flex-shrink: 0;
    height: 0.5rem;
    width: 0.5rem;
}
@keyframes remote-pulse { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.06); } }
.remote-week-days {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.remote-day {
    background: #fff;
    border: 1px solid #ecdccd;
    border-radius: 16px;
    color: var(--remote-ink);
    display: flex;
    flex-direction: column;
    padding: 0.7rem 0.8rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remote-day:hover,
.remote-day:focus-visible {
    border-color: var(--fp-accent);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
    color: var(--remote-ink);
}
.remote-day-name { font-size: 0.92rem; font-weight: 800; line-height: 1.2; }
.remote-day-date { color: var(--remote-muted); font-size: 0.75rem; font-weight: 600; }
.remote-day-parts {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.45rem 0 0;
    border-top: 1px dashed #efe2d6;
}
.remote-day-part {
    align-items: center;
    color: #3f4a5a;
    display: flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.4rem;
}
.remote-day-part .bi { color: var(--remote-peach-ink); display: flex; font-size: 0.85rem; line-height: 1; }
.remote-day-part.is-late { color: #6b46c1; }
.remote-day-part.is-late .bi { color: #7c3aed; }
.remote-week-more {
    align-items: center;
    align-self: flex-start;
    color: var(--fp-accent);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    gap: 0.35rem;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.remote-week-more .bi { display: flex; line-height: 1; }
.remote-week-more:hover,
.remote-week-more:focus-visible { color: var(--fp-accent-dark, var(--fp-accent)); gap: 0.6rem; }

/* ─── Late-night button: a real, filled button on the dusk card ─── */
.remote-btn--late {
    background: #6d28d9;
    box-shadow: 0 8px 20px rgba(109, 40, 217, 0.28);
    color: #fff;
    padding: 0.8rem 1.6rem;
}
.remote-btn--late:hover,
.remote-btn--late:focus-visible {
    background: #5b21b6;
    box-shadow: 0 10px 24px rgba(91, 33, 182, 0.34);
    color: #fff;
}

/* ─── Counselor referral form (opens inside the card) ─── */
.remote-counselor-form {
    background: #fff;
    border-radius: 16px;
    flex-basis: 100%;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}
.remote-counselor-form .btn-primary {
    background: var(--fp-accent);
    border-color: var(--fp-accent);
    border-radius: 99px;
    font-weight: 700;
}
.remote-counselor-form .btn-primary:hover,
.remote-counselor-form .btn-primary:focus-visible {
    background: var(--fp-accent-dark, var(--fp-accent));
    border-color: var(--fp-accent-dark, var(--fp-accent));
}

/* ─── Results stat ─── */
.remote-result {
    align-items: center;
    background: linear-gradient(135deg, var(--remote-cream) 0%, var(--remote-mint) 100%);
    border-radius: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: center;
    padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
}
.remote-result-number {
    color: var(--remote-mint-ink);
    font-size: clamp(3.25rem, 7vw, 4.75rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
.remote-result-number span { font-size: 0.6em; margin-left: 0.05em; }
.remote-result-copy { display: flex; flex-direction: column; gap: 0.2rem; max-width: 30rem; }
.remote-result-copy strong { color: var(--remote-ink); font-size: 1.15rem; }
.remote-result-copy span { color: var(--remote-muted); font-size: 0.95rem; }
.remote-result-link {
    align-items: center;
    color: var(--fp-accent);
    display: inline-flex;
    font-weight: 700;
    gap: 0.4rem;
    margin-top: 0.35rem;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.remote-result-link .bi { display: flex; line-height: 1; }
.remote-result-link:hover,
.remote-result-link:focus-visible { color: var(--fp-accent-dark, var(--fp-accent)); gap: 0.65rem; }

/* ─── Tutors row ─── */
.remote-tutor-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.remote-tutor {
    align-items: center;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 20px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.1rem 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remote-tutor:hover,
.remote-tutor:focus-visible {
    border-color: color-mix(in srgb, var(--fp-accent) 40%, transparent);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
    color: inherit;
}
.remote-tutor-photo {
    aspect-ratio: 1;
    background: var(--remote-peach);
    border: 4px solid var(--remote-cream);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.1);
    margin-bottom: 0.5rem;
    object-fit: cover;
    width: min(100%, 7rem);
}
.remote-tutor-name { color: var(--remote-ink); font-size: 1.05rem; }
.remote-tutor-subjects { color: var(--remote-muted); font-size: 0.82rem; line-height: 1.35; }

@media (max-width: 991.98px) {
    .remote-tutor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tablets (576–991px): the page is one column, so keep things side by side where they fit instead of
   letting every block stack into a tall, mostly-empty column */
@media (min-width: 576px) and (max-width: 991.98px) {
    .remote-zone-here { margin-bottom: 0.35rem; position: static; }
    /* Photo beside the copy */
    #remote-progress .fp-split-feature { align-items: center; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #remote-progress .fp-split-feature img { aspect-ratio: 4 / 3; object-fit: cover; }
    #remote-progress .fp-split-feature h2 { font-size: 1.35rem; }
    .remote-steps { gap: 1rem; }
    .remote-step p { font-size: 0.9rem; }
    .remote-zone-time { font-size: 1.1rem; }
    .remote-zone { padding: 0.85rem 0.8rem; }
}
/* Tablet hero (700–991px): copy and photo side by side, "Open this week" across the full width below.
   The copy column's children join the hero grid (display: contents) so the tiles can span both columns. */
@media (min-width: 700px) and (max-width: 991.98px) {
    #remote-hero .fp-hero-split-inner { column-gap: 1.75rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); row-gap: 0.65rem; }
    #remote-hero .fp-hero-split-main { display: contents; }
    #remote-hero .fp-hero-split-main > * { grid-column: 1; justify-self: start; }
    #remote-hero .fp-hero-photo { align-self: center; grid-column: 2; grid-row: 1 / span 5; }
    #remote-hero .remote-week { grid-column: 1 / -1; justify-self: stretch; margin-top: 0.75rem; }
    #remote-hero .fp-page-heading { font-size: clamp(1.8rem, 4.2vw, 2.3rem); }
    #remote-hero .fp-hero-sub { font-size: 0.98rem; }
    #remote-hero .fp-hero-stat-facts { flex-direction: column; gap: 0.35rem; }
    #remote-hero .fp-hero-photo-badge { bottom: 0.6rem; font-size: 0.75rem; left: 0.6rem; max-width: calc(100% - 1.2rem); padding: 0.5rem 0.7rem; }
}
@media (max-width: 699.98px) {
    .remote-zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .remote-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .remote-week-days {
        display: flex;
        margin: 0 -1.5rem;
        overflow-x: auto;
        padding: 0.15rem 1.5rem 0.4rem;
        scroll-padding-inline: 1.5rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .remote-week-days::-webkit-scrollbar { display: none; }
    .remote-day { flex: 0 0 8.25rem; scroll-snap-align: start; }
    .remote-dusk-foot .remote-btn { justify-content: center; width: 100%; }
    .remote-tutor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .remote-service-grid { grid-template-columns: minmax(0, 1fr); }
    .remote-zone { padding: 0.85rem 0.8rem; }
    .remote-zone-time { font-size: 1.05rem; }
    .remote-zone-here { margin-bottom: 0.35rem; position: static; }
}
@media (prefers-reduced-motion: reduce) {
    .remote-next-dot { animation: none; }
    .remote-day,
    .remote-btn,
    .remote-tutor,
    .remote-result-link,
    a.remote-service,
    .remote-service-more { transition: none; }
}