/* ============================================================
   Subscriptions Landing Page  (/subs-landing)
   Page-scoped under .subs-landing — no global side effects.
   ============================================================ */

.subs-landing {
    --sl-hero-bg: #426163;
    --sl-darkgreen: #32583F;
    --sl-navygreen: #235456;
    --sl-teal: #3E5F5D;
    --sl-cream: #F2EEEA;
    --sl-cream-soft: #F8F5F1;
    --sl-text: #2A2A2A;
    --sl-muted: #6B6B6B;
    --sl-border: #E1DDD6;
    --sl-gold: #85764F;
    --sl-lime: #C9D752;
    --sl-white: #ffffff;

    --sl-radius-sm: 6px;
    --sl-radius-md: 10px;
    --sl-radius-lg: 14px;

    --sl-shadow-card: 0 2px 6px rgba(0,0,0,0.06);
    --sl-shadow-card-hover: 0 14px 32px rgba(0,0,0,0.12);

    --sl-easing: cubic-bezier(0.22, 0.61, 0.36, 1);

    color: var(--sl-text);
    font-family: 'Gill Sans W01 Medium', 'Gill Sans MT', Helvetica, Arial, sans-serif;
    line-height: 1.55;
}

.subs-landing *,
.subs-landing *::before,
.subs-landing *::after { box-sizing: border-box; }

.subs-landing img { max-width: 100%; height: auto; display: block; }

.subs-landing__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* Headings — h1 uses the brand display face; h2/h3 use a cleaner modern serif */
.subs-landing h1,
.subs-landing h2,
.subs-landing h3 {
    font-weight: 400;
    margin: 0 0 16px;
    line-height: 1.15;
}
.subs-landing h1 {
    color: var(--sl-text);
    font-family: 'hugos_handregular', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
    font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
}
.subs-landing h2,
.subs-landing h3 {
    color: var(--sl-navygreen);
    font-family: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', Times, serif;
    letter-spacing: -0.005em;
}
.subs-landing h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); text-align: center; }
.subs-landing h3 { font-size: 1.375rem; }

.subs-landing p { margin: 0 0 16px; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.subs-landing__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--sl-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition: transform 0.18s var(--sl-easing),
                background-color 0.18s var(--sl-easing),
                box-shadow 0.18s var(--sl-easing),
                color 0.18s var(--sl-easing);
    will-change: transform;
}
.subs-landing__btn:focus-visible {
    outline: 3px solid var(--sl-lime);
    outline-offset: 3px;
}
.subs-landing__btn--primary {
    background: var(--sl-navygreen);
    color: var(--sl-white);
}
.subs-landing__btn--primary:hover {
    background: #1a4244;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(35,84,86,0.35);
}
.subs-landing__btn--primary:active { transform: translateY(0); }
.subs-landing__btn--ghost {
    background: transparent;
    color: var(--sl-navygreen);
    border-color: var(--sl-navygreen);
}
.subs-landing__btn--ghost:hover {
    background: var(--sl-navygreen);
    color: var(--sl-white);
    transform: translateY(-2px);
}
.subs-landing__btn--lg {
    padding: 16px 36px;
    font-size: 1.0625rem;
}
.subs-landing__btn--hero {
    padding: 16px 36px;
    font-size: 1.0625rem;
    background: var(--sl-white);
    color: var(--sl-navygreen);
    border-color: var(--sl-white);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.subs-landing__btn--hero:hover {
    background: var(--sl-cream);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.subs-landing__hero {
    position: relative;
    background: var(--sl-hero-bg) var(--sl-hero-image) no-repeat center right / cover;
    color: var(--sl-white);
    overflow: hidden;
    isolation: isolate;
}
.subs-landing__hero::before {
    /* Left-side gradient overlay so hero copy stays readable on top of imagery */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(66,97,99,0.92) 0%,
        rgba(66,97,99,0.78) 35%,
        rgba(66,97,99,0.18) 65%,
        rgba(66,97,99,0) 100%);
    z-index: 0;
}
.subs-landing__hero-inner {
    position: relative;
    z-index: 1;
    padding: 88px 24px 72px;
    max-width: 1200px;
    margin: 0 auto;
}
.subs-landing__hero-content {
    max-width: 620px;
}
.subs-landing__hero h1 {
    color: var(--sl-white);
    margin-bottom: 20px;
    white-space: nowrap;
}
.subs-landing__hero-lede {
    font-size: 1.125rem;
    line-height: 1.55;
    margin-bottom: 32px;
    color: rgba(255,255,255,0.95);
}
.subs-landing__hero-lede strong {
    color: var(--sl-white);
    font-weight: 700;
}

.subs-landing__trustpilot-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.subs-landing__trustpilot-row .trustpilot-widget {
    /* Compensate for Trustpilot's internal iframe + content left padding so
       the first star aligns flush with the Get started button's left edge. */
    margin-left: -18px;
}
.subs-landing__trustpilot-row .trustpilot-widget iframe {
    /* Strip browser-default iframe border that contributes a couple of pixels. */
    border: 0;
}
.subs-landing__trustpilot-row .subs-landing__tp-label {
    font-size: 0.875rem;
    color: var(--sl-white);
}

/* ------------------------------------------------------------
   Benefits row
   ------------------------------------------------------------ */
.subs-landing__benefits {
    background: var(--sl-cream);
    padding: 36px 0;
}
.subs-landing__benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.subs-landing__benefit {
    text-align: center;
    padding: 8px 16px;
    position: relative;
}
.subs-landing__benefit + .subs-landing__benefit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(0,0,0,0.12);
}
.subs-landing__benefit-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    color: var(--sl-navygreen);
    display: block;
    transition: transform 0.4s var(--sl-easing);
    overflow: visible;
}
.subs-landing__benefit:hover .subs-landing__benefit-icon {
    transform: rotate(-4deg) scale(1.06);
}
.subs-landing__benefit-title {
    font-family: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: 500;
    margin: 0 0 8px;
    color: var(--sl-navygreen);
}
.subs-landing__benefit-copy {
    font-size: 0.9375rem;
    color: var(--sl-muted);
    line-height: 1.5;
    margin: 0;
}

/* ------------------------------------------------------------
   How it works
   ------------------------------------------------------------ */
.subs-landing__how {
    background: var(--sl-white);
    padding: 56px 0 56px;
}
.subs-landing__how h2 { margin-bottom: 36px; }
.subs-landing__how-cta {
    text-align: center;
    margin-top: 48px;
}

.subs-landing__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    counter-reset: step;
}
.subs-landing__step {
    text-align: center;
    position: relative;
    padding: 0 8px;
}
.subs-landing__step-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--sl-navygreen);
    background: var(--sl-navygreen);
    color: var(--sl-white);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
    font-size: 1.4rem;
    position: relative;
    z-index: 2;
    transition: transform 0.5s var(--sl-easing), background-color 0.3s ease;
}
/* Single connector line drawn behind all four circles. Spans from the centre
   of column 1 to the centre of column 4 — circles (z-index: 2) sit on top of
   it. (100% - 72px) accounts for the three 24px column gaps; /8 yields half a
   column, i.e. the offset from the row edge to the first circle's centre. */
.subs-landing__steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: calc((100% - 72px) / 8);
    right: calc((100% - 72px) / 8);
    height: 1px;
    background: var(--sl-border);
    z-index: 1;
}
.subs-landing__step h3 {
    font-size: 1.25rem;
    margin: 0 0 12px;
}
.subs-landing__step p {
    font-size: 0.9375rem;
    color: var(--sl-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   Choose your subscription style
   ------------------------------------------------------------ */
.subs-landing__styles {
    background: var(--sl-white);
    padding: 8px 0 64px;
}
.subs-landing__styles h2 { margin-bottom: 28px; }

.subs-landing__style-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.subs-landing__style-card {
    background: var(--sl-cream-soft);
    border-radius: var(--sl-radius-md);
    overflow: hidden;
    box-shadow: var(--sl-shadow-card);
    transition: transform 0.4s var(--sl-easing),
                box-shadow 0.4s var(--sl-easing);
    display: flex;
    flex-direction: column;
}
.subs-landing__style-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sl-shadow-card-hover);
}
.subs-landing__style-card:focus-within {
    box-shadow: 0 0 0 3px var(--sl-lime), var(--sl-shadow-card-hover);
}
.subs-landing__style-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sl-cream);
}
.subs-landing__style-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--sl-easing);
}
.subs-landing__style-card:hover .subs-landing__style-image img {
    transform: scale(1.04);
}
.subs-landing__style-body {
    padding: 28px 32px 32px;
}
.subs-landing__style-body h3 {
    margin: 0 0 12px;
    font-size: 1.625rem;
}
.subs-landing__style-body p {
    color: var(--sl-muted);
    margin: 0 0 24px;
}

/* ------------------------------------------------------------
   Loved by our customers
   ------------------------------------------------------------ */
.subs-landing__loved {
    background: var(--sl-white);
    padding: 16px 0 56px;
}
.subs-landing__loved-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}
.subs-landing__loved-aside h2 {
    text-align: left;
    margin: 0 0 20px;
    font-size: 1.5rem;
}
.subs-landing__loved-rating {
    color: var(--sl-muted);
    font-size: 0.9375rem;
    margin: 12px 0 0;
}

/* ------------------------------------------------------------
   Help & video band
   ------------------------------------------------------------ */
.subs-landing__help {
    background: var(--sl-cream-soft);
    padding: 32px 0;
}
.subs-landing__help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    align-items: center;
}
.subs-landing__help-block h2 {
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 12px;
}
.subs-landing__help-block p {
    color: var(--sl-muted);
    margin-bottom: 20px;
}
.subs-landing__video {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--sl-radius-md);
    overflow: hidden;
    background-color: #6E8E8B;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    border: 0;
    padding: 0;
    width: 100%;
    transition: transform 0.3s var(--sl-easing);
}
.subs-landing__video::before {
    /* Subtle dark overlay for play-icon contrast over varied thumbnails */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.subs-landing__video:hover { transform: scale(1.02); }
.subs-landing__video:focus-visible {
    outline: 3px solid var(--sl-lime);
    outline-offset: 3px;
}
.subs-landing__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--sl-easing), background-color 0.2s ease;
}
.subs-landing__video:hover .subs-landing__video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--sl-white);
}
.subs-landing__video-play svg { color: var(--sl-navygreen); width: 24px; height: 24px; }
.subs-landing__video-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.65);
    color: var(--sl-white);
    font-size: 0.8125rem;
    padding: 4px 8px;
    border-radius: 4px;
}

/* ------------------------------------------------------------
   Video lightbox modal
   ------------------------------------------------------------ */
.subs-landing__video-modal[hidden] { display: none; }
.subs-landing__video-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: subs-modal-fade 0.18s var(--sl-easing) both;
}
.subs-landing__video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    cursor: pointer;
}
.subs-landing__video-modal-frame {
    position: relative;
    width: min(960px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--sl-radius-md);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.subs-landing__video-modal-iframe-wrap,
.subs-landing__video-modal-iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.subs-landing__video-modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--sl-text);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
    transition: background-color 0.18s var(--sl-easing);
}
.subs-landing__video-modal-close:hover { background: var(--sl-white); }
.subs-landing__video-modal-close:focus-visible {
    outline: 3px solid var(--sl-lime);
    outline-offset: 3px;
}
.subs-landing__video-modal-close svg { width: 18px; height: 18px; }

@keyframes subs-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 767px) {
    .subs-landing__video-modal { padding: 16px; }
    .subs-landing__video-modal-close {
        top: 8px;
        right: 8px;
        background: rgba(255,255,255,0.92);
    }
}

/* ------------------------------------------------------------
   Reveal animations (gated by JS via .is-visible)
   ------------------------------------------------------------ */
.subs-landing .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--sl-easing), transform 0.8s var(--sl-easing);
}
.subs-landing .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.subs-landing .reveal--delay-1 { transition-delay: 0.08s; }
.subs-landing .reveal--delay-2 { transition-delay: 0.16s; }
.subs-landing .reveal--delay-3 { transition-delay: 0.24s; }
.subs-landing .reveal--delay-4 { transition-delay: 0.32s; }

@keyframes subs-pop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.subs-landing__step.is-visible .subs-landing__step-circle {
    animation: subs-pop 0.55s var(--sl-easing) both;
}
.subs-landing__step.is-visible:nth-child(1) .subs-landing__step-circle { animation-delay: 0s; }
.subs-landing__step.is-visible:nth-child(2) .subs-landing__step-circle { animation-delay: 0.12s; }
.subs-landing__step.is-visible:nth-child(3) .subs-landing__step-circle { animation-delay: 0.24s; }
.subs-landing__step.is-visible:nth-child(4) .subs-landing__step-circle { animation-delay: 0.36s; }

@keyframes subs-wobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-6deg); }
    75% { transform: rotate(6deg); }
}
.subs-landing__benefit.is-visible .subs-landing__benefit-icon {
    animation: subs-wobble 0.7s var(--sl-easing) both;
}

/* ------------------------------------------------------------
   Confetti (DOM particles, no library)
   ------------------------------------------------------------ */
.subs-landing__confetti-piece {
    position: fixed;
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
    display: inline-block;
    line-height: 0;
}
.subs-landing__confetti-piece svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ------------------------------------------------------------
   Reduced motion: kill all motion + confetti
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .subs-landing *,
    .subs-landing *::before,
    .subs-landing *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
    .subs-landing .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .subs-landing__benefits-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
    .subs-landing__benefit:nth-child(2)::before,
    .subs-landing__benefit:nth-child(4)::before { content: none; }
    .subs-landing__steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .subs-landing__steps::before { display: none; }
    .subs-landing__loved-grid { grid-template-columns: 1fr; gap: 24px; }
    .subs-landing__help-grid { grid-template-columns: 1fr 1fr; }
    .subs-landing__help-grid .subs-landing__video { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .subs-landing__hero {
        background-position: center bottom;
    }
    .subs-landing__hero::before {
        background: linear-gradient(180deg,
            rgba(66,97,99,0.94) 0%,
            rgba(66,97,99,0.85) 50%,
            rgba(66,97,99,0.45) 100%);
    }
    .subs-landing__hero-inner { padding: 48px 20px 48px; }
    .subs-landing__hero-content { max-width: 100%; }
    .subs-landing__hero h1 { white-space: normal; }

    /* Benefits — horizontal swipe with peek so users see there are more cards */
    .subs-landing__benefits { padding: 28px 0 32px; }
    .subs-landing__benefits-grid {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        padding: 4px 20px 20px;
        margin: 0 -20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .subs-landing__benefits-grid::-webkit-scrollbar { display: none; }
    .subs-landing__benefit {
        flex: 0 0 78%;
        scroll-snap-align: start;
        background: var(--sl-white);
        border-radius: var(--sl-radius-md);
        padding: 20px 18px;
    }
    .subs-landing__benefit::before,
    .subs-landing__benefit + .subs-landing__benefit::before { content: none !important; }

    /* How it works — same horizontal swipe treatment */
    .subs-landing__how { padding: 40px 0 40px; }
    .subs-landing__how h2,
    .subs-landing__styles h2 { text-align: left; }
    .subs-landing__how h2 { margin-bottom: 24px; }
    .subs-landing__steps {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        padding: 4px 20px 20px;
        margin: 0 -20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .subs-landing__steps::-webkit-scrollbar { display: none; }
    .subs-landing__step {
        flex: 0 0 78%;
        scroll-snap-align: start;
        background: var(--sl-cream-soft);
        border-radius: var(--sl-radius-md);
        padding: 24px 20px;
    }
    .subs-landing__step p { max-width: none; }

    .subs-landing__styles { padding: 8px 0 64px; }
    .subs-landing__style-grid { grid-template-columns: 1fr; }
    .subs-landing__style-body { padding: 24px; }

    .subs-landing__loved { padding: 24px 0 56px; }

    .subs-landing__help-grid { grid-template-columns: 1fr; gap: 24px; }
    .subs-landing__help-grid .subs-landing__video { grid-column: auto; max-width: 100%; }
}