/* ==========================================================
   Picsin Teal — global theme tokens + legacy override map
   ----------------------------------------------------------
   Phase T.0 (2026-04-30). Locks the Picsin Teal aesthetic:
   teal #1B9C85, slate #415161, white background, dark
   charcoal footer, Noto Sans (variable). Replaces the prior
   Atelier umber/cream/Instrument-Serif system.

   Strategy: this file is loaded LAST in the global Blade
   layout head, so its declarations win the cascade. By
   redefining the same custom-property names Atelier already
   uses (--bg, --ink, --accent, --serif, --sans, --line, ...)
   every legacy Atelier page (cart, account, payment, modals,
   shipping, thank-you, track-order, static pages) automatically
   reskins with zero per-file edits.

   New components built in T.1+ should use the .pt-* namespace
   defined at the bottom of this file.
   ========================================================== */

/* ----------------------------------------------------------
   1. Picsin Teal token palette
   ---------------------------------------------------------- */
:root {
  /* Brand */
  --pt-teal:        #1B9C85;
  --pt-teal-700:    #15806E;          /* hover / pressed */
  --pt-teal-50:     rgba(27,156,133,.5);  /* logo circles tint */
  --pt-teal-tint:   #E8F5F2;          /* soft fills, badges */

  /* Slate / ink scale */
  --pt-slate:       #415161;          /* headings, wordmark */
  --pt-ink:         #2C3742;          /* body */
  --pt-ink-2:       #5C6773;          /* secondary */
  --pt-ink-3:       #8A95A1;          /* tertiary, captions */

  /* Surfaces */
  --pt-bg:          #FFFFFF;
  --pt-band:        #F2F3F5;          /* "Three Steps" gray section */
  --pt-card:        #FFFFFF;
  --pt-rule:        #E3E6EA;
  --pt-rule-strong: #C9CFD6;

  /* Footer */
  --pt-footer-bg:    #404040;
  --pt-footer-ink:   #FFFFFF;
  --pt-footer-rule:  rgba(255,255,255,.18);
  --pt-footer-mute:  rgba(255,255,255,.65);

  /* CTAs */
  --pt-cta:         var(--pt-teal);
  --pt-cta-hover:   var(--pt-teal-700);
  --pt-cta-text:    #FFFFFF;

  /* Status */
  --pt-success:     #1B9C85;
  --pt-danger:      #C0392B;
  --pt-warning:     #D9822B;

  /* Geometry */
  --pt-radius-sm:   4px;
  --pt-radius:      6px;
  --pt-radius-lg:   12px;
  --pt-radius-pill: 999px;

  --pt-shadow-sm:   0 1px 2px rgba(28,38,50,.06), 0 2px 4px rgba(28,38,50,.04);
  --pt-shadow:      0 4px 14px -4px rgba(28,38,50,.12), 0 2px 6px -2px rgba(28,38,50,.06);
  --pt-shadow-lg:   0 18px 36px -16px rgba(28,38,50,.18), 0 4px 10px -4px rgba(28,38,50,.08);

  /* Typography — Google Sans, then native system stack fallback.
     (Phase T.1, 2026-04-30 — switched from Open Sans.) */
  --pt-font-sans:   "Google Sans", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, Helvetica, Arial,
                    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --pt-font-mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                    "Liberation Mono", "Courier New", monospace;

  /* Container scale (responsive) — 1280px to match the prior Atelier
     header inner and give footer link cols more breathing room on
     wide monitors (Phase T.1 fix6, 2026-04-30). */
  --pt-container:   1280px;
  --pt-container-sm: 720px;
  --pt-container-md: 960px;
  --pt-gutter:      24px;
  --pt-gutter-sm:   16px;
}

/* ----------------------------------------------------------
   2. Legacy Atelier override map
   ----------------------------------------------------------
   Every Atelier custom-property name is rebound here to a
   Picsin Teal value. Any selector that reads var(--accent),
   var(--ink), var(--bg), var(--serif) etc. now renders teal/
   slate/Noto Sans without any change to its own stylesheet.
   ---------------------------------------------------------- */
:root {
  /* Colors */
  --bg:        var(--pt-bg);
  --bg-card:   var(--pt-card);
  --bg-sunk:   var(--pt-band);
  --ink:       var(--pt-slate);
  --ink-2:     var(--pt-ink-2);
  --ink-3:     var(--pt-ink-3);
  --line:      var(--pt-rule);
  --line-2:    var(--pt-rule-strong);
  --accent:    var(--pt-teal);          /* WAS warm umber #7a5a34 */
  --accent-2:  var(--pt-teal-700);      /* WAS forest #3a5a46 */
  --danger:    var(--pt-danger);

  /* Typography — Atelier used Instrument Serif for display
     and Inter for UI. We collapse both onto Noto Sans. */
  --serif:     var(--pt-font-sans);
  --sans:      var(--pt-font-sans);

  /* Geometry */
  --radius:    var(--pt-radius);
  --radius-lg: var(--pt-radius-lg);
  --shadow-sm: var(--pt-shadow-sm);
  --shadow-md: var(--pt-shadow);
}

/* ----------------------------------------------------------
   3. Body baseline (Noto Sans + slate ink + white bg)
   ----------------------------------------------------------
   Forced because some legacy stylesheets still set
   font-family / background on body or .atl-root directly.
   ---------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}
/* Kill the default 8px body margin from the UA stylesheet — otherwise
   the body bg shows as a thin sliver on every edge of the dark footer
   (Phase T.1 hotfix, 2026-04-30). */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
body,
body.atl-root,
.atl-root {
  font-family: var(--pt-font-sans) !important;
  font-optical-sizing: auto;
  /* Google Sans variable axes: opsz (17..18), wght (400..700), GRAD.
     GRAD 0 = neutral grade (no weight perception shift). */
  font-variation-settings: "GRAD" 0;
  color: var(--pt-ink) !important;
  background: var(--pt-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Italic display copy (Atelier had serif italic everywhere).
   Keep italic emphasis but render in Noto Sans italic. */
.sp-section-head-title,
.atl-price-num,
.atl-price-currency,
.home-hero-title,
.home-how-step h4,
.plp-meta-val,
.plp-review-title {
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------
   3a. Atelier .sp-btn-primary text-color restore
   ----------------------------------------------------------
   Section 3's `color: var(--pt-ink) !important` on .atl-root
   beats .sp-btn-primary's plain `color: #fff` (atelier-storefront.css),
   making the CTA label and icon match the slate background → invisible
   on /canvas-print, /framed-pictures, /photo-collage, /photo-print.
   Re-assert white at !important level so it ties on weight and wins
   by source order (this file loads after atelier-storefront.css).
   Phase 3.3 fix, 2026-05-01.
   ---------------------------------------------------------- */
.sp-btn-primary,
.sp-btn-primary svg {
  color: #fff !important;
}

/* ----------------------------------------------------------
   4. Footer dark-charcoal override
   ----------------------------------------------------------
   The legacy .atl-footer was a cream block. The new design is
   dark charcoal with white text. We override here so even if
   a page hits the partial before T.0f's structural rebuild,
   nothing flashes cream.
   ---------------------------------------------------------- */
.atl-footer,
.sp-footer {
  background: var(--pt-footer-bg) !important;
  color: var(--pt-footer-ink) !important;
}
.atl-footer a,
.sp-footer a {
  color: var(--pt-footer-ink) !important;
}
.atl-footer a:hover,
.sp-footer a:hover {
  color: var(--pt-teal) !important;
}
.atl-footer h5,
.sp-footer h5,
.sp-footer-brand-word {
  color: var(--pt-footer-ink) !important;
}
.sp-footer-brand p,
.sp-footer-bottom {
  color: var(--pt-footer-mute) !important;
}
.sp-footer-bottom {
  border-top-color: var(--pt-footer-rule) !important;
}

/* ----------------------------------------------------------
   5. Picsin Teal namespace (.pt-*) — for new T.1+ components
   ---------------------------------------------------------- */

/* Container */
.pt-container {
  width: 100%;
  max-width: var(--pt-container);
  margin-inline: auto;
  padding-inline: var(--pt-gutter);
}
@media (max-width: 720px) {
  .pt-container { padding-inline: var(--pt-gutter-sm); }
}

/* Section spacing */
.pt-section      { padding-block: 72px; }
.pt-section--sm  { padding-block: 48px; }
.pt-section--lg  { padding-block: 96px; }
.pt-section--band {
  background: var(--pt-band);
}
@media (max-width: 720px) {
  .pt-section     { padding-block: 48px; }
  .pt-section--sm { padding-block: 32px; }
  .pt-section--lg { padding-block: 64px; }
}

/* Section header (teal short rule + label) */
.pt-section-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}
.pt-section-head::before,
.pt-section-head::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--pt-teal);
}
.pt-section-head h2 {
  font-size: 18px;
  font-weight: 500;
  color: var(--pt-slate);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Headings */
.pt-h1, h1.pt-h1 {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--pt-slate);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.pt-h2, h2.pt-h2 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--pt-slate);
  margin: 0 0 12px;
}
.pt-h3, h3.pt-h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--pt-slate);
  margin: 0 0 8px;
}
.pt-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pt-teal);
}
.pt-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pt-ink-2);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .pt-h1, h1.pt-h1 { font-size: 32px; }
  .pt-h2, h2.pt-h2 { font-size: 24px; }
  .pt-h3, h3.pt-h3 { font-size: 19px; }
}

/* CTA — green pill button matching design.
   !important on color/background defends against Atelier's
   .atl-root a { color: inherit } (specificity 0,2,0) reset
   that otherwise drags anchor CTAs back to slate ink. */
.pt-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--pt-cta) !important;
  color: #ffffff !important;
  font-family: var(--pt-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 0;
  border-radius: var(--pt-radius);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  line-height: 1;
}
.pt-cta:hover  { background: var(--pt-cta-hover) !important; color: #fff !important; }
.pt-cta:active { transform: translateY(1px); }
.pt-cta--lg { padding: 14px 26px; font-size: 14px; }
.pt-cta--ghost {
  background: transparent !important;
  color: var(--pt-teal) !important;
  border: 1px solid var(--pt-teal);
}
.pt-cta--ghost:hover {
  background: var(--pt-teal) !important;
  color: #fff !important;
}

/* Pill badge (e.g. "Printed & Shipped in 3 Days") */
.pt-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--pt-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--pt-radius-pill);
  line-height: 1;
}

/* Card — for product tiles + review cards */
.pt-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius-lg);
  overflow: hidden;
}
.pt-card--soft {
  border-radius: var(--pt-radius-lg);
  background: var(--pt-card);
  box-shadow: var(--pt-shadow-sm);
  border: 1px solid var(--pt-rule);
}

/* Hairline divider */
.pt-rule {
  height: 1px;
  background: var(--pt-rule);
  border: 0;
  margin: 0;
}

/* Trust strip pill */
.pt-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pt-ink);
  font-weight: 500;
}
.pt-trust-pill svg {
  color: var(--pt-teal);
  flex-shrink: 0;
}

/* Visually hidden (screen-reader only) */
.pt-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------
   6. Header — Picsin Teal overrides + responsive hamburger
   ---------------------------------------------------------- */
.pt-header {
  background: var(--pt-bg);
  border-bottom: 1px solid var(--pt-rule);
}
.pt-header-inner {
  max-width: var(--pt-container);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.pt-logo-img { height: 30px; width: auto; display: block; }

/* Nav */
.pt-nav { display: flex; gap: 28px; margin-left: 24px; }
.pt-nav a {
  color: var(--pt-ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}
.pt-nav a:hover,
.pt-nav a.is-active { color: var(--pt-slate); }

/* Right actions cluster */
.pt-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pt-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--pt-slate);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.pt-icon-btn:hover { background: var(--pt-band); color: var(--pt-teal); }

/* Cart count — teal dot */
.pt-cart-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--pt-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Hamburger (hidden on desktop) */
.pt-hamburger {
  display: none;
  width: 36px; height: 36px;
  background: none; border: 0; padding: 8px;
  flex-direction: column; justify-content: space-between;
  cursor: pointer;
  margin-left: auto;
}
.pt-hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--pt-slate);
  transition: transform .2s ease, opacity .2s ease;
}
.pt-hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.pt-hamburger.is-open span:nth-child(2) { opacity: 0; }
.pt-hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile drawer */
.pt-mobile-nav {
  display: none;
  background: var(--pt-bg);
  border-top: 1px solid var(--pt-rule);
  padding: 16px 24px 24px;
  flex-direction: column;
  gap: 4px;
}
.pt-mobile-nav a {
  display: block;
  padding: 12px 4px;
  color: var(--pt-slate);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--pt-rule);
}
.pt-mobile-nav hr {
  border: 0; border-top: 1px solid var(--pt-rule);
  margin: 8px 0;
}
.pt-mobile-nav a:last-child { border-bottom: 0; }
.pt-mobile-nav .pt-mobile-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px; padding: 0 6px;
  background: var(--pt-teal); color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 999px;
}
.pt-mobile-signout { color: var(--pt-danger) !important; }

body.pt-no-scroll { overflow: hidden; }

/* Desktop / mobile visibility helpers used inside the header.
   pt-show-mobile is hidden by default and revealed at the mobile
   breakpoint; pt-hide-mobile is the inverse. */
.pt-show-mobile { display: none; }

@media (max-width: 880px) {
  .pt-nav { display: none; }

  /* Action cluster STAYS visible on mobile so Login (or person icon when
     logged-in), Truck, and Cart sit beside the hamburger.
     Hamburger is the right-most item in the row. */
  .pt-header-actions { display: flex; gap: 2px; margin-left: auto; }
  .pt-hamburger      { display: flex; margin-left: 4px; order: 99; }

  /* Desktop name+chevron is too wide for a phone header — hide it and
     let the .pt-show-mobile person icon take over. */
  .pt-hide-mobile { display: none !important; }
  .pt-show-mobile { display: inline-flex; }

  .pt-mobile-nav:not([hidden]) { display: flex; }
  .pt-header-inner { gap: 8px; padding: 12px 16px; }
  .pt-icon-btn     { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
  /* Tighten further on very narrow screens so the 3 icons + hamburger
     don't push the logo off-screen. */
  .pt-header-inner { padding: 10px 12px; gap: 4px; }
  .pt-icon-btn     { width: 32px; height: 32px; }
  .pt-logo-img     { height: 26px; }
}

/* Account dropdown panel — already styled by atelier-print-create.css;
   we only colour the Sign-out item to match Picsin Teal danger. */
.atl-menu-item--signout { color: var(--pt-danger); }
.atl-menu-item--signout:hover { background: rgba(192,57,43,.06); color: var(--pt-danger); }

/* ----------------------------------------------------------
   7. Footer — Picsin Teal 3-col dark charcoal
   ----------------------------------------------------------
   Structural styles for the new T.0f footer markup. The
   override in section 4 forces dark-charcoal bg + white text
   on legacy .sp-footer markup too, so a half-rebuilt page
   still looks correct.
   ---------------------------------------------------------- */
.pt-footer {
  background: var(--pt-footer-bg);
  color: var(--pt-footer-ink);
  padding: 56px 0 28px;
  /* margin-top removed — was creating a 64px white gap between the
     last content section and the dark footer (Phase T.1 hotfix). */
}
.pt-footer-inner {
  max-width: var(--pt-container);
  margin: 0 auto;
  padding: 0 24px;
}
.pt-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.pt-footer-brand { display: flex; flex-direction: column; gap: 16px; }
.pt-footer-logo { height: 28px; width: auto; }
.pt-footer-tagline {
  font-size: 13px;
  color: var(--pt-footer-mute);
  line-height: 1.5;
  margin: 0;
}
.pt-footer-social {
  display: flex; gap: 10px;
  margin-top: 4px;
}
.pt-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: var(--pt-footer-ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pt-footer-social a:hover {
  background: var(--pt-teal);
  border-color: var(--pt-teal);
  color: #fff;
}
.pt-footer-social svg { width: 14px; height: 14px; }

.pt-footer-col h5 {
  font-size: 15px;
  font-weight: 600;
  color: var(--pt-footer-ink);
  margin: 0 0 18px;
}
.pt-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.pt-footer-col a {
  font-size: 13px;
  color: var(--pt-footer-mute);
  text-decoration: none;
  transition: color .15s ease;
}
.pt-footer-col a:hover { color: var(--pt-teal); }

.pt-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--pt-footer-rule);
  font-size: 12px;
  color: var(--pt-footer-mute);
}
.pt-footer-bottom a { color: var(--pt-footer-mute); text-decoration: none; }
.pt-footer-bottom a:hover { color: var(--pt-teal); }

@media (max-width: 880px) {
  .pt-footer { padding: 40px 0 24px; }
  .pt-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .pt-footer-brand { grid-column: 1 / -1; }
  .pt-footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .pt-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ----------------------------------------------------------
   8. Custom dropdown (.pt-select)
   ----------------------------------------------------------
   Phase T.2 (2026-04-30) — promoted from picsin-teal-home.css
   to the shared theme file so /create-print and any future
   page can re-use the component.

   Replaces native <select> so the popup height can be capped
   at ~10 visible options + scroll. Native popup height is
   OS-owned and not CSS-reachable. Built with a button trigger
   + role="listbox" popup for accessibility.

   The DOM is rendered + hydrated by public/js/picsin-teal-select.js
   which auto-inits any .pt-select on the page. Carriers carry
   the current value on data-value and dispatch a 'ptchange'
   event when the user picks a new option. When the .pt-select
   carries data-pt-source="<select-id>", the component also
   mirrors its value into the underlying hidden <select> and
   dispatches a native 'change' event there for backward
   compatibility with any code listening on the hidden select.
   ---------------------------------------------------------- */
.pt-select {
  position: relative;
  display: inline-flex;
  font-family: var(--pt-font-sans);
}
.pt-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pt-slate);
  padding: 4px 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--pt-slate);
  cursor: pointer;
  white-space: nowrap;
}
.pt-select__chevron {
  width: 10px; height: 6px;
  transition: transform .15s ease;
  color: var(--pt-slate);
}
.pt-select.is-open .pt-select__chevron { transform: rotate(180deg); }

.pt-select__popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  padding: 6px 0;
  /* ~10 options at ~36px each = 360px. Scroll for the rest. */
  max-height: 360px;
  overflow-y: auto;
  z-index: 50;
  scrollbar-width: thin;
  scrollbar-color: var(--pt-rule-strong) transparent;
}
.pt-select__popup[hidden] { display: none; }
.pt-select__popup::-webkit-scrollbar         { width: 8px; }
.pt-select__popup::-webkit-scrollbar-thumb   { background: var(--pt-rule-strong); border-radius: 999px; }
.pt-select__popup::-webkit-scrollbar-track   { background: transparent; }

.pt-select__option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--pt-slate);
  cursor: pointer;
  white-space: nowrap;
}
.pt-select__option:hover,
.pt-select__option:focus-visible {
  background: var(--pt-band);
  outline: none;
}
.pt-select__option.is-selected {
  color: var(--pt-teal);
  font-weight: 600;
  background: var(--pt-teal-tint);
}

/* Wider popup for combined size labels like "8 × 8 - Square Collage" */
.pt-select--wide .pt-select__popup,
.pt-hero-size__combined .pt-select__popup { min-width: 240px; }


/* ----------------------------------------------------------
   9. Responsive utility breakpoint reminders
   ----------------------------------------------------------
   Mobile-first defaults:
     - default            : <= 720px (mobile)
     - @media min-width 721px  (tablet)
     - @media min-width 1024px (desktop)

   Per Naman's 2026-04-30 directive, every new design must be
   responsive. Use these breakpoints consistently.
   ---------------------------------------------------------- */