/* ============================================================
   Desktop and mobile refinement (Aryan's brief, 2026-10-28).
   Loaded last on every page. A layout refinement, not a redesign: same identity,
   photography and copy, less empty space on phones, a stronger hero, a shorter header.
   ============================================================ */

/* ---------- Header height: one setting that everything else follows ---------- */
:root { --nav-h: 100px; }
@media (max-width: 720px) { :root { --nav-h: 76px; } }
html { scroll-padding-top: calc(var(--nav-h) + 12px) !important; }
.nav { min-height: var(--nav-h); }
.hero, .page-hero { margin-top: var(--nav-h); }
@media (max-width: 720px) {
  .nav, .nav.scrolled { padding-block: 6px; }
  .nav__brand img, .nav.scrolled .nav__brand img { height: 31px; }
}

/* ---------- Phone hero photos: shorter, so the message arrives sooner ---------- */
@media (max-width: 768px) {
  .hero__bg { height: clamp(220px, 62vw, 260px) !important; }
  .page-hero:not(.page-hero--haloed) .page-hero__bg { height: clamp(220px, 62vw, 260px) !important; min-height: 0 !important; }
  .page-hero:not(.page-hero--haloed) { padding-bottom: 2rem !important; }
  .page-hero__inner { padding-top: 1.4rem !important; }
  .page-hero__inner > .eyebrow:first-child { min-height: 0 !important; display: block !important; margin-bottom: .9rem !important; }
  .page-hero__inner > .hero-lockup:first-child { height: 56px !important; margin-bottom: 1rem !important; }
}

/* ---------- Phone heading scale: the hero leads, sections follow ---------- */
@media (max-width: 768px) {
  .hero h1, .page-hero h1 { font-size: clamp(2.05rem, 8.6vw, 2.45rem) !important; line-height: 1.07 !important; }
  main h2:not(.spore-page *):not(.pdm *) { font-size: clamp(1.6rem, 6.8vw, 1.85rem) !important; line-height: 1.12 !important; }
  .close-cta h2 { margin-bottom: 1rem; }
}

/* ---------- Phone section spacing: less empty space, same text size ---------- */
@media (max-width: 768px) {
  .sec, .st-sec, .pu-sec { padding-block: 52px !important; }
  .close-cta { padding-block: 48px !important; }
  .sec-head, .disc__top, .how__grid, .pkgs__head, .prods__head { gap: 1.1rem !important; }
  .disc__top { margin-bottom: 1.8rem !important; }
}

/* ---------- Closing section and footer: compact on phones ---------- */
@media (max-width: 900px) {
  .close-cta__grid { gap: 1.6rem !important; }
  .close-cta__fig { padding-bottom: 58% !important; }
  .close-cta__body { margin-bottom: 1.6rem !important; }
}
@media (max-width: 720px) {
  .footer { padding-block: 2.6rem 1.4rem; }
  .footer__top { gap: 1.8rem !important; }
  .footer__brand img { height: 40px; }
  .footer__blurb { margin-block: .9rem 1.2rem; }
  .footer__h { margin-bottom: .7rem; }
  .footer__col ul { gap: .55rem; }
  .footer__cols { gap: 1.6rem 1.5rem !important; }
  .footer__bottom { padding-top: 1.3rem; margin-top: 1.6rem; gap: .8rem; }
}

/* ---------- Homepage ---------- */
@media (max-width: 768px) {
  /* five disciplines: number and title on one line, description close beneath */
  .disc-row { padding: 1.1rem 0 !important; row-gap: .35rem !important; grid-template-columns: 2.4rem 1fr !important; }
  .disc-row__num { font-size: 1.25rem !important; }
  .disc-row__title { font-size: 1.35rem !important; }
  .disc-row__desc { grid-column: 2; font-size: .95rem !important; }
  .disc__more { margin-top: 1.4rem !important; }
  .pkg { padding: 1.4rem !important; }
  .pkgs__grid { gap: .9rem !important; }
  .pkgs__notes { margin-top: 1.2rem !important; }
}

/* ---------- pulse ---------- */
/* desktop: the small "Included with" line sits on the photo; give it a quiet local backing
   instead of a fade across the image */
@media (min-width: 769px) {
  .page-hero--pulse .pu-included { display: inline-block; background: rgba(247,239,221,.86); padding: .35rem .7rem; border-radius: 8px; }
}
@media (max-width: 768px) {
  /* "pulse at a glance": six compact rows that jump to each section */
  .pu-overview .pu-cards { gap: 0 !important; margin-top: 1.2rem !important; border-top: 1px solid var(--line); }
  .pu-overview .pu-cards a { display: grid !important; grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: .5rem; row-gap: .15rem; align-items: start; padding: .85rem 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; transform: none !important; }
  .pu-overview .pu-cards__n { grid-column: 1; grid-row: 1; font-size: .95rem !important; line-height: 1.6; }
  .pu-overview .pu-cards h3 { grid-column: 2; grid-row: 1; font-size: 1.2rem !important; }
  .pu-overview .pu-cards p { grid-column: 2; grid-row: 2; font-size: .9rem !important; line-height: 1.5 !important; }
  .pu-overview .pu-cards__go { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0 !important; font-size: 0 !important; }
  .pu-overview .pu-cards__go::after { content: "↓"; font-size: 1.1rem; color: var(--burgundy); }
}
@media (max-width: 768px) {
  .pu-list { margin-top: 1.2rem !important; }
  .pu-list li { padding: .95rem 0 !important; }
  .pu-list h3 { font-size: 1.18rem !important; margin-bottom: .3rem !important; }
  .pu-list p { font-size: .95rem !important; line-height: 1.6 !important; }
}

/* ---------- Footer: products that are not available yet ---------- */
@media (min-width: 721px) { .footer__cols { grid-template-columns: 1fr 1fr auto; } }
.footer__next { display: inline-flex; flex-direction: column; gap: .12rem; }
.footer__next span { font-size: .74rem; line-height: 1.3; color: rgba(247,239,221,.56); }

/* ---------- One look across the site, taken from the homepage (2026-10-30) ---------- */
@media (min-width: 769px) {
  .page-hero h1, .legal-hero h1, .spore-page .landing h1.font-display { font-size: clamp(2.6rem, 4.8vw, 4.6rem) !important; line-height: 1.02 !important; letter-spacing: -.012em; }
  .st-head h2, .st-h2, .st-faq .faq > h2, .pu-sec h2, .spore-page .spore-main h2 { font-size: clamp(2rem, 3.9vw, 3.3rem) !important; line-height: 1.05 !important; }
  .st-sec, .pu-sec, .cs-chapter, .spore-page .spore-main > section > div[class*="py-20"] { padding-block: clamp(5rem, 11vh, 9rem) !important; }
  main .btn, .spore-page .landing a.bg-burgundy, .spore-page .landing a.bg-cream, .spore-page .landing button.bg-burgundy { height: auto; padding: .78rem 1.5rem !important; font-size: .9rem !important; font-weight: 500 !important; line-height: 1.6 !important; }
}
@media (min-width: 769px) { .page-hero--pulse .page-hero__inner { max-width: min(36rem, 46vw) !important; } .page-hero--pulse h1 { text-wrap: wrap; } }
.spore-page .landing a.bg-burgundy:hover { background: var(--walnut); }
.spore-page .landing .rounded-xl { border-radius: 14px; }
.spore-page .landing p[class*="tracking-[0.16em]"], .spore-page .landing .spore-lite p[class*="tracking-[0.16em]"] { color: var(--cocoa); font-size: .72rem; letter-spacing: .22em; }

/* ---------- Photos fade in once they have fully arrived (slow phone connections) ---------- */
.ph img.is-loading { opacity: 0; }
.ph img { transition: opacity .35s ease; }


/* ---------- Phones: section headings use the full width (Aryan, 2026-11-06) ----------
   On desktop the headings keep a measured width and balanced lines. On a phone that squeezed
   them into two thirds of the screen, so they looked pushed to the left beside full-width text. */
@media (max-width: 600px) {
  main h2 { max-width: none !important; text-wrap: pretty !important; }
}

/* ---------- Phones: the open menu is fully solid (Aryan's review, 2026-11-06) ----------
   It was 98% opaque with a blur that does not apply inside the frosted header, so the page
   headline showed faintly through the menu links. */
@media (max-width: 720px) {
  .nav__links { background: var(--cream) !important; }
}