/* ==========================================================================
   responsive.css — breakpoints (desktop-first)

   1200px  large tablet / small desktop — tighten the tech-specs row
    900px  tablet — stack the tech-specs row, single-column cards
    640px  MOBILE — dedicated layout: everything stacks, type scales down
   ========================================================================== */

/* ---- Large tablets / small desktops ---- */
@media (max-width: 1200px) {
  .specs { padding: 80px var(--gutter); gap: 24px; }
  .spec-item.is-active { flex-basis: 340px; }
  .spec-item.is-active .spec-name { font-size: 26px; }
  .spec-body p { font-size: 18px; line-height: 26px; }

  .how-grid { gap: 40px; }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; }
  .nav-links { order: 3; flex-basis: 100%; overflow-x: auto; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-pill { flex: 0 0 auto; }

  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }
  .hero-caption { display: none; }
  /* The copy stacks in flow; the video stays a full-bleed background layer
     (absolute inset:0 + cover), so it covers the section at every size.
     `inset: auto` is essential — the desktop top/right/bottom values would
     otherwise become relative offsets and shove the copy out of place. */
  .hero-title--bottom {
    position: relative;
    inset: auto;
    text-align: left;
    z-index: 2;
  }
  .hero-buy {
    position: relative;
    inset: auto;
    margin-top: 8px;
    z-index: 3;
  }

  .feature-grid { grid-template-columns: 1fr; max-width: 432px; }
  .feature-card { aspect-ratio: auto; height: 480px; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .stat { padding-inline: 32px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: none; }

  /* ---- Tech specs: the horizontal row can't hold three panels here, so it
     becomes a vertical accordion with the photo pinned on top. ---- */
  .specs { flex-direction: column; align-items: stretch; height: auto; }
  .specs-rail { writing-mode: horizontal-tb; transform: none; font-size: 28px; }
  .specs-grid { flex-direction: column; }

  /* JS writes inline `order` for the desktop row — override it here. */
  .specs-photo { order: -1 !important; flex: 0 0 auto; height: 300px; }
  .spec-item,
  .spec-item.is-active { flex: 0 0 auto; height: auto; border-radius: var(--radius-md); }

  .spec-head {
    position: relative;
    inset: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
  }
  /* Matches the specificity of the desktop `:not(.is-active)` rules, which
     otherwise keep the collapsed labels rotated vertically. */
  .spec-item:not(.is-active) .spec-num,
  .spec-item.is-active .spec-num {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    font-size: 24px;
  }
  .spec-item:not(.is-active) .spec-name,
  .spec-item.is-active .spec-name {
    position: static;
    left: auto;
    bottom: auto;
    top: auto;
    transform: none;
    writing-mode: horizontal-tb;
    font-size: 20px;
    white-space: normal;
    max-width: none;
  }

  /* Collapse by display so the tab keeps its natural height */
  .spec-body {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    gap: 24px;
    padding: 0 24px 24px;
  }
  .spec-item.is-active .spec-body { display: flex; }
  .spec-body p { max-width: none; }
}

/* ==========================================================================
   MOBILE — 640px and below
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --header-h: 76px;
    --radius-lg: 24px;
    --radius-md: 20px;
  }

  /* Sections are content-driven on mobile; forcing 100vh leaves big voids. */
  .intro,
  .features,
  .specs,
  .community,
  .how { min-height: 0; padding-block: 64px; }

  /* ---- Header: logo + cart + menu (Figma 1337:309) ----
     The pills collapse into a panel behind the grid button. */
  .menu-btn { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
                visibility 0.25s;
  }
  .site-header.is-menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-pill { width: 100%; height: 44px; }

  /* ---- Hero — Figma 1337:309 (393x852) ----
     Full-bleed video with a frosted panel over the lower 609px; the copy sits
     on top of it. `display: contents` on the buy block lets its children take
     part in this grid, so the dots can sit above the headline and the name /
     price can share a centred row without duplicating markup. */
  .hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "t1    t1    t1"
      "t2    t2    t2"
      "name  div   price"
      "cta   cta   cta";
    align-content: end;
    justify-items: center;
    /* 16px side inset, per the design */
    padding: 28px 16px;
    gap: 0;
    text-align: center;
  }

  /* Frosted panel over the bottom 609/852 of the frame */
  .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    z-index: 1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
  }

  /* Video stays a full-bleed background layer */
  /* The spin canvas fills the whole hero — it is the section's backdrop, not a
     banded thumbnail. `contain` inside the canvas keeps the product uncropped,
     so filling the viewport simply renders it larger. */
  .hero-media.product-spin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    z-index: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  /* Larger again on the small screen (1.5 desktop x 1.5), and biased upward so
     the copy below stays clear of the product. */
  .hero-media.product-spin { --spin-zoom: 0.934; }
  .hero-media.product-spin .product-spin-canvas { transform: translateY(-10%); }

  .hero-caption { display: none; }
  /* The copy stacks in flow; the video stays a full-bleed background layer
     (absolute inset:0 + cover), so it covers the section at every size.
     `inset: auto` is essential — the desktop top/right/bottom values would
     otherwise become relative offsets and shove the copy out of place. */
  .hero-title--bottom {
    position: relative;
    inset: auto;
    text-align: left;
    z-index: 2;
  }
  .hero-buy {
    position: relative;
    inset: auto;
    margin-top: 8px;
    z-index: 3;
  }

  .feature-grid { grid-template-columns: 1fr; max-width: 432px; }
  .feature-card { aspect-ratio: auto; height: 480px; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .stat { padding-inline: 32px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: none; }

  /* ---- Tech specs: the horizontal row can't hold three panels here, so it
     becomes a vertical accordion with the photo pinned on top. ---- */
  .specs { flex-direction: column; align-items: stretch; height: auto; }
  .specs-rail { writing-mode: horizontal-tb; transform: none; font-size: 28px; }
  .specs-grid { flex-direction: column; }

  /* JS writes inline `order` for the desktop row — override it here. */
  .specs-photo { order: -1 !important; flex: 0 0 auto; height: 300px; }
  .spec-item,
  .spec-item.is-active { flex: 0 0 auto; height: auto; border-radius: var(--radius-md); }

  .spec-head {
    position: relative;
    inset: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
  }
  /* Matches the specificity of the desktop `:not(.is-active)` rules, which
     otherwise keep the collapsed labels rotated vertically. */
  .spec-item:not(.is-active) .spec-num,
  .spec-item.is-active .spec-num {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    font-size: 24px;
  }
  .spec-item:not(.is-active) .spec-name,
  .spec-item.is-active .spec-name {
    position: static;
    left: auto;
    bottom: auto;
    top: auto;
    transform: none;
    writing-mode: horizontal-tb;
    font-size: 20px;
    white-space: normal;
    max-width: none;
  }

  /* Collapse by display so the tab keeps its natural height */
  .spec-body {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    gap: 24px;
    padding: 0 24px 24px;
  }
  .spec-item.is-active .spec-body { display: flex; }
  .spec-body p { max-width: none; }
}

/* ==========================================================================
   MOBILE — 640px and below
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --header-h: 76px;
    --radius-lg: 24px;
    --radius-md: 20px;
  }

  /* Sections are content-driven on mobile; forcing 100vh leaves big voids. */
  .intro,
  .features,
  .specs,
  .community,
  .how { min-height: 0; padding-block: 64px; }

  /* ---- Header: logo + cart + menu (Figma 1337:309) ----
     The pills collapse into a panel behind the grid button. */
  .menu-btn { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
                visibility 0.25s;
  }
  .site-header.is-menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-pill { width: 100%; height: 44px; }

  /* ---- Hero — Figma 1337:309 (393x852) ----
     Full-bleed video with a frosted panel over the lower 609px; the copy sits
     on top of it. `display: contents` on the buy block lets its children take
     part in this grid, so the dots can sit above the headline and the name /
     price can share a centred row without duplicating markup. */
  .hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "t1    t1    t1"
      "t2    t2    t2"
      "name  div   price"
      "cta   cta   cta";
    align-content: end;
    justify-items: center;
    /* 16px side inset, per the design */
    padding: 28px 16px;
    gap: 0;
    text-align: center;
  }

  /* Frosted panel over the bottom 609/852 of the frame */
  .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    z-index: 1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
  }

  /* Video stays a full-bleed background layer */
  /* The product occupies the clear band above the frosted panel (the panel
     starts at 243/852 = 28.5% in the design), so it never sits under the blur.
     `contain` because the source clip is landscape — `cover` would crop it
     hard on a 393x852 viewport. */
  .hero-media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 28.5%;
    width: 100%;
    /* motion.css pins min-width/min-height to 100% for the desktop full-bleed
       fill — both must be released here or the box stays full height. */
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
    z-index: 0;
    /* The clip carries its own light-grey backdrop; fade the lower edge so the
       box boundary doesn't read as a band across the hero. */
    mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  }

  .hero-caption { display: none; }

  /* Everything sits above the frosted panel (z-index 1) */
  .hero-buy-name,
  .hero .price,
  .hero-buy-row .divider--v,
  .hero-buy-actions {
    position: relative;
    z-index: 2;
  }

  .hero-title {
    font-size: 9.1vw;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: center;
  }
  .hero-title--top    { grid-area: t1; }
  .hero-title--bottom { grid-area: t2; text-align: center; margin-bottom: 32px; }

  /* Buy block dissolves into the hero grid */
  .hero-buy,
  .hero-buy-row { display: contents; }

  /* Design: 20px regular, centred, split by a 24px rule */
  .hero-buy-name {
    grid-area: name;
    justify-self: end;
    font-size: 20px;
    font-weight: var(--w-regular);
  }
  .hero-buy-row .divider--v {
    grid-area: div;
    display: block;
    align-self: center;
    margin-inline: 16px;
  }
  .hero .price {
    grid-area: price;
    justify-self: start;
    font-size: 20px;
  }

  /* Full-width stacked CTAs, 56px tall with a 12px gap */
  .hero-buy-actions {
    grid-area: cta;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 32px;
  }
  .hero-buy-actions .btn {
    width: 100%;
    height: 56px;
    justify-content: center;
  }
  .hero-buy-actions .btn--ghost { border-radius: 40px; }
  .hero-buy-actions .btn--lime  { border-radius: 74px; }

  /* Header: 16px inset, 48px controls, cart + menu only */
  .site-header { padding: 28px 16px; gap: 8px; }
  .nav-logo { width: 156px; height: 48px; }
  .nav-logo img { width: 126.714px; height: 14px; }
  .icon-btn { width: 48px; height: 48px; }
  .icon-btn img { width: 24px; height: 24px; }
  .nav-actions { margin-left: auto; gap: 8px; }
  .nav-actions > .icon-btn:first-child { display: none; }

  /* ---- Intro + stats ---- */
  .intro .container { gap: 40px; }
  .intro-head { gap: 24px; }
  .intro-mark { width: 56px; height: 24px; }
  .intro-lead { font-size: 20px; line-height: 1.45; letter-spacing: -0.3px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .stat { padding-inline: 16px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .stat-label { font-size: 13px; }
  .stat-value { font-size: 28px; letter-spacing: -0.5px; }

  /* ---- Feature cards ---- */
  .feature-grid { gap: 12px; max-width: none; }
  .feature-card { height: 420px; padding: 20px; }
  .feature-card::before,
  .feature-card::after { height: 180px; }
  .feature-card--top::before,
  .feature-card--top::after { height: 220px; }
  .feature-card-title { font-size: 24px; line-height: 32px; margin-bottom: 8px; }
  .feature-card-text { font-size: 14px; line-height: 20px; }

  /* ---- Tech specs (inherits the stacked layout from 900px) ---- */
  .specs { gap: 20px; }
  .specs-rail { font-size: 22px; }
  .specs-photo { height: 220px; }
  .spec-head { padding: 16px 20px; gap: 12px; }
  /* Design puts the index on the right at this size */
  .spec-item:not(.is-active) .spec-num,
  .spec-item.is-active .spec-num { order: 2; margin-left: auto; }
  .spec-body .btn--pill { width: 100%; justify-content: center; }
  .spec-item:not(.is-active) .spec-num,
  .spec-item.is-active .spec-num { font-size: 20px; }
  .spec-item:not(.is-active) .spec-name,
  .spec-item.is-active .spec-name { font-size: 17px; }
  .spec-body { padding: 0 20px 20px; gap: 20px; }
  .spec-body p { font-size: 15px; line-height: 22px; }

  /* ---- Community ---- */
  .community-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }
  /* Heading above the strip, hashtag + CTA below it (Figma 1337:279).
     `display: contents` lifts the heading and CTA out of .community-head so
     they can be ordered against the strip, which is their uncle in the DOM. */
  .community { display: flex; flex-direction: column; }
  .community-head { display: contents; }
  .community-title {
    order: 1;
    padding-inline: var(--gutter);
    margin-bottom: 24px;
  }
  .community-viewport { order: 2; }
  .community-cta {
    order: 3;
    justify-content: flex-start;
    padding-inline: var(--gutter);
    margin-top: 24px;
  }
  .community-title { font-size: 26px; }
  .community-cta { width: 100%; }
  .hashtag { font-size: 16px; }
  .tile { flex-basis: 260px; height: 340px; }
  .tile::before,
  .tile::after { height: 110px; }
  .tile figcaption { left: 20px; right: 20px; bottom: 18px; }
  .handle { font-size: 15px; }
  .tile-caption { font-size: 18px; }

  /* ---- How it works ---- */
  .how-grid { flex-direction: column; align-items: stretch; gap: 32px; }
  .how-media { flex-direction: column; align-self: stretch; gap: 12px; }
  .how-photo { width: 100%; height: 280px; }
  .how-rail { writing-mode: horizontal-tb; transform: none; font-size: 22px; }

  .acc-head { grid-template-columns: 30px 1fr 20px; gap: 12px; padding: 16px 0; }
  .acc-num { font-size: 18px; }
  .acc-title { font-size: 17px; line-height: 1.3; }
  .acc-icon { width: 20px; height: 20px; }
  .acc-panel > p { padding-inline: 0; font-size: 15px; line-height: 22px; }
  .acc-item.is-open .acc-panel > p { padding-bottom: 16px; }

  /* ---- Footer ---- */
  .site-footer { padding-bottom: 24px; }
  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 20px;
  }
  .footer-logo img { width: 150px; height: 17px; }
  .footer-links { margin-left: 0; flex-wrap: wrap; gap: 14px; }
  .footer-links a { font-size: 14px; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px) {
  .hero-title { font-size: 30px; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding-left: 0; border-left: none; }
  .tile { flex-basis: 220px; height: 300px; }
}