/* ==========================================================================
   CreateACard — Responsive layer
   Breakpoints: 1440 (large) · 1200 (laptop) · 1024 (tablet landscape)
                820 (tablet) · 640 (phone) · 400 (small phone)
   ========================================================================== */

/* Large desktop (1920 × 1080 and up) */
@media (min-width: 1600px) {
    :root { --container: 1440px; --sig-w: clamp(300px, 17.5vw, 360px); }
}

/* Laptop */
@media (max-width: 1200px) {
    .nav__link { margin: 0 .7rem; font-size: .88rem; }
    .dash-toast { left: -16px; }
    .row { grid-template-columns: 34px 1.3fr auto 1fr; }
    .row__when { display: none; }
}

/* Tablet landscape */
@media (max-width: 1024px) {
    .nav__links, .nav__login, .nav__actions > .btn { display: none; }
    .nav__burger { display: block; }
    .nav__inner { grid-template-columns: 1fr auto; }

    :root { --sig-w: clamp(220px, 30vw, 300px); }
    .hero { min-height: auto; padding-top: 130px; }
    .hero__layout { grid-template-columns: 1fr; gap: 1rem; }
    .hero__copy { justify-items: center; text-align: center; max-width: 720px; margin-inline: auto; }
    .hero__line--accent { margin-inline: auto; }
    .hero__ctas { justify-content: center; }
    .hero__stage { height: clamp(520px, 70vw, 660px); }
    .glow--lavender { width: 80vw; height: 80vw; top: 30%; }

    .ai__layout { grid-template-columns: 1fr; }
    .ai__copy { justify-items: center; text-align: center; }
    .prompt { text-align: left; }

    .manage__layout { grid-template-columns: 1fr; }
    .manage__copy { max-width: 640px; }
    .dash-toast { left: 12px; bottom: -28px; }

    .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }
}

/* Tablet portrait */
@media (max-width: 820px) {
    .how__steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 3rem; }
    .how__path { display: none; }
    .step--personalise, .step--share { margin-top: 0; }

    .gallery__head, .section-head--split { grid-template-columns: 1fr; }
    .section-head--split .section-lede { justify-self: start; }
    .gallery__intro { justify-self: start; }
    .gallery__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1.5rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
    .gallery__tabs::-webkit-scrollbar { display: none; }
    .tab { flex-shrink: 0; }

    .dash__body { grid-template-columns: 1fr; }
    .dash__side { display: none; }
    .dash__stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .stat { padding: .8rem; }
    .stat__value { font-size: 2rem; }
    .stat__icon { display: none; }

    .cta__card--3, .cta__card--4 { display: none; }
    .cta__card--1 { left: -4%; top: 6%; }
    .cta__card--2 { right: -3%; top: auto; bottom: 6%; }
}

/* Phone */
@media (max-width: 640px) {
    :root { --sig-w: min(58vw, 236px); --section-y: 5rem; }
    .nav__inner { height: 64px; }
    .nav__burger { width: 42px; height: 42px; }
    .nav__burger span { left: 12px; right: 12px; }
    .nav__burger span:first-child { top: 17px; }
    .nav__burger span:last-child { top: 24px; }
    .menu-open .nav__burger span:first-child, .menu-open .nav__burger span:last-child { top: 20.5px; }
    .brand__word { font-size: 1.55rem; }
    .brand__mark { width: 30px; height: 30px; }

    .hero { padding-top: 110px; padding-bottom: 40px; }
    .hero__title { font-size: clamp(2.9rem, 13.5vw, 4.2rem); }
    .hero__lede { font-size: 1rem; }
    .hero__ctas { width: 100%; flex-direction: column; }
    .hero__ctas .btn { width: 100%; }
    .hero__stage { height: calc(var(--sig-w) * 2.15); margin-top: .5rem; }
    .float-card--a { left: -6%; top: 2%; }
    .float-card--b { right: -6%; bottom: 14%; }
    .float-card--c { display: none; }
    .envelope { left: -4%; bottom: 10%; }
    .sig__hint, .sig__close { bottom: calc(var(--sig-w) * -.36); height: 46px; }

    .marquee { padding: .9rem 0; }

    .step__visual { height: 190px; }

    .gslide { width: 68vw; }

    .prompt__foot { flex-direction: column; align-items: stretch; }
    .prompt__foot .btn { width: 100%; }
    .ai__frame { width: min(76vw, 320px); }

    .expiry { padding: 1.2rem; }
    .expiry__timeline li { font-size: .76rem; }

    .dash { font-size: .78rem; }
    .dash__main { padding: 1rem; gap: 1rem; }
    .dash__header h3 { font-size: 1.35rem; }
    .dash__new { display: none; }
    .stat__value { font-size: 1.7rem; }
    .stat__label { font-size: .68rem; }
    .stat__foot { display: none; }
    .dash__tabs { display: none; }
    .row { grid-template-columns: 30px 1fr auto; gap: .6rem; padding: .65rem .8rem; }
    .row__thumb { width: 30px; }
    .row__expiry { grid-column: 2 / -1; }
    .row .pill { grid-column: 3; grid-row: 1; }
    .dash-toast { left: 8px; right: 8px; bottom: -64px; }
    .row__expiry svg { width: 22px; height: 22px; }
    .manage__visual { margin-bottom: 4rem; }

    .cta__panel { min-height: 560px; padding: 5rem 1.25rem; }
    .cta__title { font-size: clamp(2.7rem, 12vw, 4rem); }
    .cta .btn--xl { height: 58px; padding: 0 1.6rem; font-size: 1rem; }
    .cta__card--1 { width: 90px; left: -24px; top: 24px; }
    .cta__card--2 { width: 84px; right: -20px; bottom: 24px; }

    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer__brand { grid-column: 1 / -1; }
}

/* Small phone */
@media (max-width: 400px) {
    .ai__variants { gap: .4rem; }
    .ai__variant { width: 44px; }
    .footer__col:last-child { grid-column: 1 / -1; }
}

/* Touch devices: no hover-dependent states */
@media (hover: none) {
    .gallery__swiper.swiper-initialized .gslide:not(.swiper-slide-active) { opacity: .7; }
}