/* Hallmark · macrostructure: Catalogue · tone: utilitarian · anchor hue: electric blue
 * genre: editorial · theme: Industrial Artisan · enrichment: E8 real product photography
 * H2 Split Diptych: ratio=7/5, proof=featured product, divider=negative space
 * F6 Product Grid: ratio=1/1, density=4-up, micro-action=whole card
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41)
 * nav: N1b · footer: Ft3 · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57)
 */

/*
 * Approved PrintMe3D storefront tokens and semantic component CSS.
 * Source: /Users/deepak/pw/printme3d.in/.deploy/navmantra-labs/projects/printme3d/
 */

/*
 * Metric-matched fallback faces so the header/nav do not resize when the
 * Google-hosted webfonts swap in. size-adjust values were measured against
 * this app's actual nav copy (see git history for the measurement script),
 * not guessed: JetBrains Mono vs generic monospace is already near-identical
 * (~0.3% narrower), Inter and Hanken Grotesk vs Arial are ~5-7% narrower.
 */
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New");
  size-adjust: 99.66%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 95.07%;
}

@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial");
  size-adjust: 93.43%;
}

:root {
      /* Reconciled Bento & Industrial Precision Tokens */
      --bg: #fcf9f8;
      --surface: #ffffff;
      --surface-warm: #F9F7F2;
      --fg: #1b1b1b;
      --fg-2: #242424;
      --ink: #101010;
      --muted: #444748;
      --meta: #0035c6;
      --border: #E5E3DE;
      --border-soft: #f4f2ee;
      --accent: #0035c6;
      --accent-on: #ffffff;
      --accent-hover: #002bb0;
      --accent-active: #00208a;

      --accent-orange: #FF5C00;
      --accent-lime: #C1FF72;
      --danger: #ef4444;

      /* Typography */
      --font-display: "Hanken Grotesk", "Hanken Grotesk Fallback", Inter, system-ui, sans-serif;
      --font-body: Inter, "Inter Fallback", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace;

      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 24px;
      --text-2xl: 36px;
      --text-3xl: 48px;
      --text-4xl: 64px;

      --leading-body: 1.52;
      --leading-tight: 1.1;
      --tracking-display: -0.02em;

      /* Spacing & Radii */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;

      --radius-sm: 4px; /* Tight, precise corners */
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-pill: 9999px;

      /* Shadows & Borders */
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 12px 32px rgba(27, 27, 27, 0.04);
      --focus-ring: 0 0 0 4px rgba(0, 53, 198, 0.15);

      /* Motion */
      --motion-fast: 150ms;
      --motion-base: 240ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);

      /* Layout width */
      --container-max: 1180px;
      --container-gutter: 24px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      -webkit-font-smoothing: antialiased;
    }

    body {
      overflow-x: clip;
      /* Subtle grid pattern background representing precise manufacturing space */
      background-image:
        linear-gradient(to right, rgba(229, 227, 222, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 227, 222, 0.25) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* Layout Utilities */
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--container-gutter);
      padding-right: var(--container-gutter);
    }

    /* Topbar Navigation */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      min-height: 60px;
      background: rgba(252, 249, 248, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .topbar-inner {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      text-decoration: none;
    }

    .brand-logo {
      height: 32px;
      width: auto;
    }

    .brand-text {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: var(--text-lg);
      letter-spacing: 0.05em;
      color: var(--fg);
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      min-height: 40px;
      gap: 0;
      list-style: none;
      padding: 3px;
      background: #ffe45c;
      border: 1px solid #d8b900;
      border-radius: var(--radius-sm);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .nav-link {
      display: block;
      min-height: 34px;
      padding: 8px 11px;
      border: 1px solid transparent;
      border-radius: 3px;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
    }

    .nav-link:hover {
      color: var(--accent);
      border-color: color-mix(in oklab, var(--accent), transparent 68%);
      background: rgba(0, 53, 198, 0.06);
    }

    .nav-link.is-active,
    .nav-link[aria-current="page"] {
      color: var(--accent-on);
      background: var(--accent);
      border-color: var(--accent);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-decoration: none;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
      border: 1px solid transparent;
      user-select: none;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background-color: var(--accent);
      color: var(--accent-on);
    }

    .btn-primary:hover {
      background-color: var(--accent-hover);
    }

    .btn-secondary {
      background-color: transparent;
      border-color: var(--border);
      color: var(--fg);
    }

    .btn-secondary:hover {
      border-color: var(--fg);
      background-color: var(--surface-warm);
    }

    .btn-icon-only {
      width: 44px;
      height: 44px;
      border: 1px solid var(--accent);
      background: var(--accent);
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .btn-icon-only:hover {
      border-color: var(--accent-hover);
      background: var(--accent-hover);
    }

    .btn-icon-only svg {
      width: 18px;
      height: 18px;
      color: var(--accent-on);
    }

    /* Hero Section */
    .hero-section {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid var(--border);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-8);
      align-items: center;
    }

    .hero-content {
      max-width: 580px;
    }

    .hero-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    .hero-headline {
      font-family: var(--font-display);
      font-size: var(--text-4xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: var(--fg);
      margin-bottom: var(--space-4);
    }

    .hero-subheadline {
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--muted);
      margin-bottom: var(--space-6);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    .hero-visual {
      border: 1px solid var(--border);
      background: var(--surface);
      padding: var(--space-2);
      border-radius: var(--radius-md);
      box-shadow: var(--elev-raised);
    }

    .hero-image {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--radius-sm);
      display: block;
    }

    /* Bento Category Section */
    .section-padding {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid var(--border);
    }

    .section-head {
      margin-bottom: var(--space-8);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--fg);
    }

    .section-subtitle {
      font-size: var(--text-sm);
      color: var(--muted);
      margin-top: var(--space-1);
    }

    /* Bento Grid */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-4);
    }

    .bento-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 180px;
      transition: all var(--motion-base) var(--ease-standard);
      text-decoration: none;
      color: inherit;
    }

    .bento-card:hover {
      border-color: var(--accent);
      box-shadow: var(--elev-raised);
    }

    .bento-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background-color: var(--surface-warm);
      display: grid;
      place-items: center;
      margin-bottom: var(--space-4);
      transition: background-color var(--motion-fast) var(--ease-standard);
    }

    .bento-card:hover .bento-icon {
      background-color: rgba(0, 53, 198, 0.08);
    }

    .bento-icon svg {
      width: 20px;
      height: 20px;
      color: var(--accent);
    }

    .bento-meta {
      display: flex;
      flex-direction: column;
    }

    .bento-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .bento-desc {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    /* Bento grid spacing layouts */
    .bento-col-3 {
      grid-column: span 3;
    }

    .bento-col-2 {
      grid-column: span 2;
    }

    .bento-col-4 {
      grid-column: span 4;
    }

    /* Product Grid Section */
    .products-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: var(--space-8);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
    }

    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
    }

    .product-card:hover {
      border-color: var(--accent);
      box-shadow: var(--elev-raised);
    }

    .product-media {
      position: relative;
      background: var(--surface-warm);
      aspect-ratio: 1;
      overflow: hidden;
    }

    .product-image-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: var(--space-5);
      background:
        linear-gradient(135deg, rgba(0, 53, 198, 0.08), transparent 42%),
        repeating-linear-gradient(90deg, rgba(229, 227, 222, 0.7) 0 1px, transparent 1px 18px),
        var(--surface-warm);
      color: var(--fg-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .product-image {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-image.is-missing {
      display: none;
    }

    .product-tag {
      position: absolute;
      top: var(--space-2);
      left: var(--space-2);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 3px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.05em;
    }

    .dispatch-badge {
      position: absolute;
      bottom: var(--space-2);
      right: var(--space-2);
      background: rgba(27, 27, 27, 0.72);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: var(--radius-sm);
      padding: 3px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.02em;
    }

    .product-body {
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .product-title {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .product-description {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
      margin-bottom: var(--space-4);
      flex-grow: 1;
    }

    .product-footer {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-3);
      padding-top: var(--space-3);
      border-top: 1px solid var(--border-soft);
    }

    .product-price-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .product-price-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .product-price {
      font-family: var(--font-mono);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
    }

    .product-cta {
      width: 100%;
      min-height: 40px;
      padding: 9px var(--space-4);
    }

    .product-source-note {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--muted);
      margin-top: var(--space-2);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* Custom Quote Section */
    .quote-cta-card {
      background: var(--ink);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: var(--space-8);
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .quote-cta-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 8px);
      pointer-events: none;
    }

    .quote-cta-content,
    .quote-cta-actions {
      position: relative;
      z-index: 1;
    }

    .quote-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-orange);
      margin-bottom: var(--space-3);
    }

    .quote-headline {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: #ffffff;
      margin-bottom: var(--space-4);
    }

    .quote-body-text {
      font-size: var(--text-base);
      color: rgba(255, 255, 255, 0.68);
      line-height: var(--leading-body);
      margin-bottom: var(--space-6);
    }

    .accepted-inputs-list {
      list-style: none;
      margin-bottom: var(--space-6);
    }

    .accepted-input-item {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      font-weight: 600;
      color: rgba(255, 255, 255, 0.86);
      padding: var(--space-2) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .accepted-input-item svg {
      width: 16px;
      height: 16px;
      color: var(--accent-lime);
      flex-shrink: 0;
    }

    /*
     * .quote-headline / .quote-body-text / .accepted-input-item are reused
     * by the light-background guidance panels on the custom-quote and
     * product pages, whose rules appear later in this file and otherwise
     * win the cascade (equal specificity, later source order) and clobber
     * this black card's white text. Scope under .quote-cta-card so this
     * card's colors win regardless of file order, without touching those
     * other panels.
     */
    .quote-cta-card .quote-headline {
      color: #ffffff;
    }

    .quote-cta-card .quote-body-text {
      color: rgba(255, 255, 255, 0.68);
    }

    .quote-cta-card .accepted-input-item {
      color: rgba(255, 255, 255, 0.86);
    }

    .quote-cta-actions {
      display: flex;
      justify-content: flex-end;
    }

    /* How It Works Section */
    .how-it-works-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6);
    }

    .step-card {
      position: relative;
    }

    .step-number {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--accent);
      background: rgba(0, 53, 198, 0.06);
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      margin-bottom: var(--space-4);
    }

    .step-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .step-body {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    /* Trust Boundaries Grid */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
    }

    .trust-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-5);
      min-height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .trust-card-icon {
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    .trust-card-icon svg {
      width: 24px;
      height: 24px;
    }

    .trust-card-title {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .trust-card-body {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    /* Footer */
    .footer {
      background: var(--surface-warm);
      border-top: 1px solid var(--border);
      padding-top: var(--space-8);
      padding-bottom: var(--space-6);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-8);
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .footer-brand-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: var(--text-lg);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: var(--text-xs);
      color: var(--muted);
      max-width: 320px;
    }

    .footer-links-column {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .footer-links-title {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--fg);
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-link {
      font-size: var(--text-xs);
      color: var(--muted);
      text-decoration: none;
      transition: color var(--motion-fast) var(--ease-standard);
    }

    .footer-link:hover {
      color: var(--accent);
    }

    .footer-bottom {
      padding-top: var(--space-4);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-4);
    }

    .footer-copy {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .footer-disclaimer {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--muted);
      max-width: 600px;
      text-align: right;
    }

    /* Modal / File Uploader Interaction */
    .file-input {
      display: none;
    }

    .file-list {
      margin-top: var(--space-3);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-3);
      background: var(--surface-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: var(--text-xs);
    }

    .file-item-name {
      font-weight: 600;
      color: var(--fg-2);
    }

    .file-item-remove {
      cursor: pointer;
      color: var(--danger);
      font-weight: 700;
      border: none;
      background: none;
      padding: 0 4px;
    }

    /* Responsive Queries */
    @media (max-width: 980px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }

      .hero-visual {
        order: -1;
      }

      .bento-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .bento-col-3 {
        grid-column: span 2;
      }

      .bento-col-4 {
        grid-column: span 4;
      }

      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .quote-cta-card {
        grid-template-columns: 1fr;
        padding: var(--space-6);
        gap: var(--space-6);
      }

      .quote-cta-actions {
        justify-content: center;
      }

      .quote-cta-actions .btn {
        width: 100%;
      }

      .how-it-works-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .trust-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      :root {
        --text-4xl: 36px;
        --text-3xl: 28px;
        --text-2xl: 22px;
      }

      .topbar-inner {
        min-height: auto;
        padding: var(--space-2) 0 var(--space-1);
        flex-wrap: wrap;
        row-gap: var(--space-1);
      }

      .brand {
        order: 1;
      }

      .nav-actions {
        order: 2;
        margin-right: var(--space-2);
      }

      nav[data-od-id="main-nav"] {
        order: 3;
        width: 100%;
      }

      .nav-links {
        display: flex;
        width: 100%;
        min-height: 40px;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 3px;
        background: #ffe45c;
        border: 1px solid #d8b900;
        border-radius: var(--radius-sm);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-link {
        min-height: 33px;
        padding: 7px 9px;
        border: 1px solid transparent;
        border-radius: 3px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        line-height: 1.35;
        white-space: nowrap;
        flex-shrink: 0;
        background: transparent;
        color: var(--muted);
      }

      .nav-link:hover {
        color: var(--accent);
        border-color: color-mix(in oklab, var(--accent), transparent 68%);
        background: rgba(0, 53, 198, 0.06);
      }

      .nav-link.is-active,
      .nav-link[aria-current="page"] {
        color: var(--accent-on);
        background: var(--accent);
        border-color: var(--accent);
      }

      .hero-section {
        padding-top: var(--space-6);
        padding-bottom: var(--space-8);
      }

      .hero-actions {
        flex-direction: column;
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .products-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
      }

      .bento-grid {
        grid-template-columns: 1fr;
      }

      .bento-col-2, .bento-col-3, .bento-col-4 {
        grid-column: span 1;
      }

      .product-grid {
        grid-template-columns: 1fr;
      }

      .how-it-works-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-disclaimer {
        text-align: left;
      }
    }

    /* PM3D final storefront navigation and support footer */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .btn-icon-only.is-active {
      outline: 2px solid rgba(0, 53, 198, 0.22);
      outline-offset: 2px;
    }

    .menu-toggle {
      display: none;
    }

    .footer-grid.pm3d-footer-grid {
      grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
    }

    @media (max-width: 760px) {
      .topbar-inner {
        position: relative;
      }

      .menu-toggle {
        display: grid;
      }

      nav[data-od-id="main-nav"] {
        display: none;
        order: 3;
        width: 100%;
      }

      body.nav-open nav[data-od-id="main-nav"] {
        display: block;
      }

      .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
      }

      .nav-link {
        width: 100%;
        text-align: left;
        white-space: normal;
      }

      .footer-grid.pm3d-footer-grid {
        grid-template-columns: 1fr;
      }
    }

:root {
      /* Reconciled Bento & Industrial Precision Tokens */
      --bg: #fcf9f8;
      --surface: #ffffff;
      --surface-warm: #F9F7F2;
      --fg: #1b1b1b;
      --fg-2: #242424;
      --muted: #444748;
      --meta: #0035c6;
      --border: #E5E3DE;
      --border-soft: #f4f2ee;
      --accent: #0035c6;
      --accent-on: #ffffff;
      --accent-hover: #002bb0;
      --accent-active: #00208a;

      --accent-orange: #FF5C00;
      --accent-lime: #C1FF72;
      --danger: #ef4444;

      /* Typography */
      --font-display: "Hanken Grotesk", "Hanken Grotesk Fallback", Inter, system-ui, sans-serif;
      --font-body: Inter, "Inter Fallback", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace;

      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 24px;
      --text-2xl: 36px;
      --text-3xl: 48px;
      --text-4xl: 64px;

      --leading-body: 1.52;
      --leading-tight: 1.1;
      --tracking-display: -0.02em;

      /* Spacing & Radii */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-pill: 9999px;

      /* Shadows & Borders */
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 12px 32px rgba(27, 27, 27, 0.04);
      --focus-ring: 0 0 0 4px rgba(0, 53, 198, 0.15);

      /* Motion */
      --motion-fast: 150ms;
      --motion-base: 240ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);

      /* Layout width */
      --container-max: 1180px;
      --container-gutter: 24px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      -webkit-font-smoothing: antialiased;
    }

    body {
      overflow-x: clip;
      background-image:
        linear-gradient(to right, rgba(229, 227, 222, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 227, 222, 0.25) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--container-gutter);
      padding-right: var(--container-gutter);
    }

    /* Topbar Navigation */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      min-height: 60px;
      background: rgba(252, 249, 248, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .topbar-inner {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      text-decoration: none;
    }

    .brand-logo {
      height: 32px;
      width: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      min-height: 40px;
      gap: 0;
      list-style: none;
      padding: 3px;
      background: #ffe45c;
      border: 1px solid #d8b900;
      border-radius: var(--radius-sm);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .nav-link {
      display: block;
      min-height: 34px;
      padding: 8px 11px;
      border: 1px solid transparent;
      border-radius: 3px;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
    }

    .nav-link:hover {
      color: var(--accent);
      border-color: color-mix(in oklab, var(--accent), transparent 68%);
      background: rgba(0, 53, 198, 0.06);
    }

    .nav-link.is-active,
    .nav-link[aria-current="page"] {
      color: var(--accent-on);
      background: var(--accent);
      border-color: var(--accent);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-decoration: none;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
      border: 1px solid transparent;
      user-select: none;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background-color: var(--accent);
      color: var(--accent-on);
    }

    .btn-primary:hover {
      background-color: var(--accent-hover);
    }

    .btn-secondary {
      background-color: transparent;
      border-color: var(--border);
      color: var(--fg);
    }

    .btn-secondary:hover {
      border-color: var(--fg);
      background-color: var(--surface-warm);
    }

    .btn-icon-only {
      width: 44px;
      height: 44px;
      border: 1px solid var(--accent);
      background: var(--accent);
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .btn-icon-only:hover {
      border-color: var(--accent-hover);
      background: var(--accent-hover);
    }

    .btn-icon-only svg {
      width: 18px;
      height: 18px;
      color: var(--accent-on);
    }

    /* Section Padding */
    .section-padding {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid var(--border);
    }

    .section-head {
      margin-bottom: var(--space-8);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--fg);
    }

    .section-subtitle {
      font-size: var(--text-sm);
      color: var(--muted);
      margin-top: var(--space-1);
      max-width: 65ch;
    }

    /* Hero Layout */
    .hero-section {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid var(--border);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: var(--space-8);
      align-items: center;
    }

    .hero-content {
      max-width: 580px;
    }

    .hero-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    .hero-headline {
      font-family: var(--font-display);
      font-size: var(--text-4xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: var(--fg);
      margin-bottom: var(--space-4);
    }

    .hero-subheadline {
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--muted);
      margin-bottom: var(--space-6);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    /* Showcase Section (Hero Right Column) */
    .showcase-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      box-shadow: var(--elev-raised);
    }

    .showcase-header {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      border-bottom: 1px solid var(--border-soft);
      padding-bottom: var(--space-2);
      margin-bottom: var(--space-3);
      display: flex;
      justify-content: space-between;
    }

    .showcase-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .showcase-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-2);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-sm);
      text-decoration: none;
      color: inherit;
      background: var(--bg);
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .showcase-item:hover {
      border-color: var(--accent);
      background: var(--surface);
      transform: translateX(4px);
    }

    .showcase-img-container {
      width: 60px;
      height: 60px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--surface-warm);
      border: 1px solid var(--border);
      flex-shrink: 0;
      position: relative;
    }

    .showcase-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-size: 8px;
      text-transform: uppercase;
      text-align: center;
      font-weight: 700;
      background: var(--surface-warm);
      color: var(--muted);
      padding: 2px;
    }

    .showcase-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: relative;
      z-index: 1;
      display: block;
    }

    .showcase-details {
      flex-grow: 1;
      min-width: 0;
    }

    .showcase-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: var(--text-sm);
      color: var(--fg);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }

    .showcase-tag {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      color: var(--muted);
      background: var(--border-soft);
      padding: 1px 4px;
      border-radius: 2px;
    }

    .showcase-meta {
      text-align: right;
      flex-shrink: 0;
    }

    .showcase-price {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--fg);
      display: block;
    }

    .showcase-link {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* Product Cards & Grids */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
    }

    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
      text-decoration: none;
      color: inherit;
    }

    .product-card:hover {
      border-color: var(--accent);
      box-shadow: var(--elev-raised);
    }

    .product-media {
      position: relative;
      background: var(--surface-warm);
      aspect-ratio: 1.1;
      overflow: hidden;
      border-bottom: 1px solid var(--border-soft);
    }

    .product-image-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: var(--space-5);
      background:
        linear-gradient(135deg, rgba(0, 53, 198, 0.08), transparent 42%),
        repeating-linear-gradient(90deg, rgba(229, 227, 222, 0.7) 0 1px, transparent 1px 18px),
        var(--surface-warm);
      color: var(--fg-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .product-image {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-image.is-missing {
      display: none;
    }

    .product-tag {
      position: absolute;
      top: var(--space-2);
      left: var(--space-2);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 3px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.05em;
      z-index: 2;
    }

    .dispatch-badge {
      position: absolute;
      bottom: var(--space-2);
      right: var(--space-2);
      background: rgba(27, 27, 27, 0.72);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: var(--radius-sm);
      padding: 3px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.02em;
      z-index: 2;
    }

    .product-body {
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .product-title {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .product-description {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
      margin-bottom: var(--space-4);
      flex-grow: 1;
    }

    .product-footer {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-3);
      padding-top: var(--space-3);
      border-top: 1px solid var(--border-soft);
    }

    .product-price-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .product-price-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .product-price {
      font-family: var(--font-mono);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
    }

    .product-cta {
      width: 100%;
      min-height: 40px;
      padding: 9px var(--space-4);
    }

    .product-source-note {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--muted);
      margin-top: var(--space-2);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* Layout Family 1: Desk Setup - Split Row */
    .desk-setup-layout {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: var(--space-6);
      align-items: stretch;
    }

    .category-featured-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-6);
    }

    .category-featured-media {
      width: 100%;
      aspect-ratio: 4 / 3;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--surface-warm);
    }

    .category-featured-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .category-info {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .category-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 800;
      color: var(--fg);
    }

    .category-desc {
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    /* Layout Family 2: Home Decor - Bento Grid */
    .home-decor-bento {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
    }

    .bento-info-card {
      grid-column: span 3;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: var(--space-6);
      align-items: center;
    }

    .bento-info-media {
      width: 100%;
      aspect-ratio: 1.6;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--surface-warm);
    }

    .bento-info-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Layout Family 3: Lighting & Ritual - Full-Width Showcase */
    .lighting-showcase {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-8);
      align-items: center;
      background: var(--surface-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      box-shadow: var(--elev-raised);
    }

    .lighting-media {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--elev-raised);
      background: var(--surface);
    }

    .lighting-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .lighting-content {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .lighting-tag {
      align-self: flex-start;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: var(--space-1) var(--space-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--accent);
    }

    .lighting-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--fg);
      line-height: var(--leading-tight);
    }

    .lighting-desc {
      font-size: var(--text-base);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    .lighting-footer {
      border-top: 1px solid var(--border);
      padding-top: var(--space-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .lighting-price-col {
      display: flex;
      flex-direction: column;
    }

    .lighting-price-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .lighting-price {
      font-family: var(--font-mono);
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--fg);
    }

    /* Layout Family 4: Custom Ideas - Coordinate Bed Banner */
    .custom-ideas-banner {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6) var(--space-8);
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--space-8);
      align-items: center;
    }

    .custom-ideas-content {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .custom-ideas-eyebrow {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--accent-orange);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .custom-ideas-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 800;
      color: var(--fg);
    }

    .custom-ideas-desc {
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: var(--leading-body);
      max-width: 50ch;
    }

    .custom-ideas-visual {
      width: 100%;
      aspect-ratio: 1.6;
      background: var(--surface-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }

    .blueprint-grid {
      width: 100%;
      height: 100%;
      max-height: 160px;
    }

    /* Footer */
    .footer {
      background: var(--surface-warm);
      border-top: 1px solid var(--border);
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-8);
    }

    .footer-brand {
      max-width: 320px;
    }

    .footer-brand-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: var(--text-lg);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--fg);
      display: inline-block;
      margin-bottom: var(--space-3);
    }

    .footer-brand-desc {
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    .footer-links-column {
      display: flex;
      flex-direction: column;
    }

    .footer-links-title {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: var(--space-4);
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      list-style: none;
    }

    .footer-link {
      font-size: var(--text-sm);
      color: var(--muted);
      text-decoration: none;
      transition: color var(--motion-fast) var(--ease-standard);
    }

    .footer-link:hover {
      color: var(--accent);
    }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: var(--space-6);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .footer-copy {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .footer-disclaimer {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.4;
      text-align: right;
      max-width: 500px;
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .home-decor-bento {
        grid-template-columns: repeat(2, 1fr);
      }
      .bento-info-card {
        grid-column: span 2;
      }
    }

    @media (max-width: 768px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }
      .desk-setup-layout {
        grid-template-columns: 1fr;
      }
      .product-grid {
        grid-template-columns: 1fr;
      }
      .bento-info-card {
        grid-template-columns: 1fr;
        grid-column: span 1;
      }
      .home-decor-bento {
        grid-template-columns: 1fr;
      }
      .lighting-showcase {
        grid-template-columns: 1fr;
      }
      .custom-ideas-banner {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .footer-disclaimer {
        text-align: left;
      }
    }

    @media (max-width: 640px) {
      .topbar-inner {
        min-height: auto;
        padding: var(--space-2) 0 var(--space-1);
        flex-wrap: wrap;
        row-gap: var(--space-1);
      }

      .brand {
        order: 1;
      }

      .nav-actions {
        order: 2;
        margin-right: var(--space-2);
      }

      nav[data-od-id="main-nav"] {
        order: 3;
        width: 100%;
      }

      .nav-links {
        display: flex;
        width: 100%;
        min-height: 40px;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 3px;
        background: #ffe45c;
        border: 1px solid #d8b900;
        border-radius: var(--radius-sm);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-link {
        min-height: 33px;
        padding: 7px 9px;
        border: 1px solid transparent;
        border-radius: 3px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        line-height: 1.35;
        white-space: nowrap;
        flex-shrink: 0;
        background: transparent;
        color: var(--muted);
      }

      .nav-link:hover {
        color: var(--accent);
        border-color: color-mix(in oklab, var(--accent), transparent 68%);
        background: rgba(0, 53, 198, 0.06);
      }

      .nav-link.is-active,
      .nav-link[aria-current="page"] {
        color: var(--accent-on);
        background: var(--accent);
        border-color: var(--accent);
      }
    }

    /* PM3D final storefront navigation and support footer */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .btn-icon-only.is-active {
      outline: 2px solid rgba(0, 53, 198, 0.22);
      outline-offset: 2px;
    }

    .menu-toggle {
      display: none;
    }

    .footer-grid.pm3d-footer-grid {
      grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
    }

    @media (max-width: 760px) {
      .topbar-inner {
        position: relative;
      }

      .menu-toggle {
        display: grid;
      }

      nav[data-od-id="main-nav"] {
        display: none;
        order: 3;
        width: 100%;
      }

      body.nav-open nav[data-od-id="main-nav"] {
        display: block;
      }

      .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
      }

      .nav-link {
        width: 100%;
        text-align: left;
        white-space: normal;
      }

      .footer-grid.pm3d-footer-grid {
        grid-template-columns: 1fr;
      }
    }

:root {
      /* Reconciled Bento & Industrial Precision Tokens */
      --bg: #fcf9f8;
      --surface: #ffffff;
      --surface-warm: #F9F7F2;
      --fg: #1b1b1b;
      --fg-2: #242424;
      --muted: #444748;
      --meta: #0035c6;
      --border: #E5E3DE;
      --border-soft: #f4f2ee;
      --accent: #0035c6;
      --accent-on: #ffffff;
      --accent-hover: #002bb0;
      --accent-active: #00208a;

      --accent-orange: #FF5C00;
      --accent-lime: #C1FF72;
      --danger: #ef4444;

      /* Typography */
      --font-display: "Hanken Grotesk", "Hanken Grotesk Fallback", Inter, system-ui, sans-serif;
      --font-body: Inter, "Inter Fallback", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace;

      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 24px;
      --text-2xl: 36px;
      --text-3xl: 48px;
      --text-4xl: 64px;

      --leading-body: 1.52;
      --leading-tight: 1.1;
      --tracking-display: -0.02em;

      /* Spacing & Radii */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;

      --radius-sm: 4px; /* Tight, precise corners */
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-pill: 9999px;

      /* Shadows & Borders */
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 12px 32px rgba(27, 27, 27, 0.04);
      --focus-ring: 0 0 0 4px rgba(0, 53, 198, 0.15);

      /* Motion */
      --motion-fast: 150ms;
      --motion-base: 240ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);

      /* Layout width */
      --container-max: 1180px;
      --container-gutter: 24px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      -webkit-font-smoothing: antialiased;
    }

    body {
      overflow-x: clip;
      /* Subtle grid pattern background representing precise manufacturing space */
      background-image:
        linear-gradient(to right, rgba(229, 227, 222, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 227, 222, 0.25) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* Views */
    .view-container {
      display: none;
    }

    .view-container.is-active {
      display: block;
    }

    /* Layout Utilities */
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--container-gutter);
      padding-right: var(--container-gutter);
    }

    /* Topbar Navigation */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      min-height: 60px;
      background: rgba(252, 249, 248, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .topbar-inner {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      text-decoration: none;
    }

    .brand-logo {
      height: 32px;
      width: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      min-height: 40px;
      gap: 0;
      list-style: none;
      padding: 3px;
      background: #ffe45c;
      border: 1px solid #d8b900;
      border-radius: var(--radius-sm);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .nav-link {
      display: block;
      min-height: 34px;
      padding: 8px 11px;
      border: 1px solid transparent;
      border-radius: 3px;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
    }

    .nav-link:hover {
      color: var(--accent);
      border-color: color-mix(in oklab, var(--accent), transparent 68%);
      background: rgba(0, 53, 198, 0.06);
    }

    .nav-link.is-active,
    .nav-link[aria-current="page"] {
      color: var(--accent-on);
      background: var(--accent);
      border-color: var(--accent);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-decoration: none;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
      border: 1px solid transparent;
      user-select: none;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background-color: var(--accent);
      color: var(--accent-on);
    }

    .btn-primary:hover {
      background-color: var(--accent-hover);
    }

    .btn-secondary {
      background-color: transparent;
      border-color: var(--border);
      color: var(--fg);
    }

    .btn-secondary:hover {
      border-color: var(--fg);
      background-color: var(--surface-warm);
    }

    .btn-icon-only {
      width: 44px;
      height: 44px;
      border: 1px solid var(--accent);
      background: var(--accent);
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      cursor: pointer;
      position: relative;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .btn-icon-only:hover {
      border-color: var(--accent-hover);
      background: var(--accent-hover);
    }

    .btn-icon-only svg {
      width: 18px;
      height: 18px;
      color: var(--accent-on);
    }

    .cart-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--accent-orange);
      color: white;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      min-width: 18px;
      height: 18px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      padding: 0 4px;
      border: 1px solid var(--bg);
    }

    /* Product Detail Section */
    .product-detail-section {
      padding-top: var(--space-8);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid var(--border);
    }

    .breadcrumbs {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      list-style: none;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: var(--space-5);
      text-transform: uppercase;
    }

    .breadcrumbs a {
      color: var(--muted);
      text-decoration: none;
      transition: color var(--motion-fast);
    }

    .breadcrumbs a:hover {
      color: var(--accent);
    }

    .breadcrumbs li:not(:last-child)::after {
      content: "/";
      margin-left: var(--space-2);
      color: var(--border);
    }

    .product-detail-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-8);
      align-items: start;
    }

    /* Left Gallery Column */
    .gallery-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .main-media-card {
      position: relative;
      border: 1px solid var(--border);
      background: var(--surface);
      padding: var(--space-2);
      border-radius: var(--radius-md);
      box-shadow: var(--elev-raised);
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .main-media-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-sm);
      display: block;
      transition: transform var(--motion-base) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
    }

    .main-media-card:hover .main-media-image {
      transform: scale(1.015);
    }

    .thumbnail-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-3);
    }

    .thumbnail-card {
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 4px;
      border-radius: var(--radius-sm);
      aspect-ratio: 4 / 3;
      cursor: pointer;
      overflow: hidden;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .thumbnail-card:hover, .thumbnail-card.is-active {
      border-color: var(--accent);
      box-shadow: 0 4px 12px rgba(0, 53, 198, 0.06);
    }

    .thumbnail-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 2px;
      display: block;
    }

    /* Right Buy Column */
    .buy-panel-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      box-shadow: var(--elev-raised);
    }

    .product-meta-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-bottom: var(--space-3);
    }

    .category-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-orange);
      background: rgba(255, 92, 0, 0.06);
      padding: 4px 8px;
      border: 1px solid rgba(255, 92, 0, 0.15);
      border-radius: var(--radius-sm);
    }

    .tag-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
      background: rgba(0, 53, 198, 0.06);
      padding: 4px 8px;
      border: 1px solid rgba(0, 53, 198, 0.15);
      border-radius: var(--radius-sm);
    }

    .detail-title {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .detail-price {
      font-family: var(--font-mono);
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-4);
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .detail-price-currency {
      font-size: var(--text-sm);
      color: var(--muted);
      font-weight: 500;
    }

    .detail-desc {
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: var(--leading-body);
      margin-bottom: var(--space-5);
    }

    /* Spec Grid */
    .specs-label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .specs-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-2);
      margin-bottom: var(--space-5);
    }

    .spec-block {
      border: 1px solid var(--border-soft);
      background: var(--surface-warm);
      border-radius: var(--radius-sm);
      padding: var(--space-3);
    }

    .spec-name {
      display: block;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 2px;
    }

    .spec-value {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--fg-2);
    }

    /* Color Selection */
    .options-label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .color-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-bottom: var(--space-5);
    }

    .swatch-btn {
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: var(--space-2);
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      user-select: none;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .swatch-btn input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    .swatch-color-indicator {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      border: 1px solid rgba(0,0,0,0.1);
      display: inline-block;
    }

    .swatch-btn:hover {
      border-color: var(--fg-2);
      color: var(--fg);
    }

    .swatch-btn.is-active {
      border-color: var(--accent);
      background: rgba(0, 53, 198, 0.04);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    /* Quantity and Purchase Row */
    .purchase-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding-top: var(--space-4);
      border-top: 1px solid var(--border-soft);
    }

    .qty-picker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-warm);
      min-height: 44px;
      padding: 0 var(--space-2);
    }

    .qty-label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      padding-left: var(--space-2);
    }

    .qty-controls {
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    .qty-btn {
      width: 32px;
      height: 32px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: all var(--motion-fast);
    }

    .qty-btn:hover {
      border-color: var(--fg-2);
      background: var(--surface-warm);
    }

    .qty-input {
      width: 36px;
      text-align: center;
      border: none;
      background: transparent;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--fg);
      outline: none;
    }

    .qty-input::-webkit-outer-spin-button,
    .qty-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .product-quote-note {
      font-size: 11px;
      line-height: var(--leading-body);
      color: var(--muted);
      margin-top: var(--space-2);
      text-align: center;
    }

    .product-quote-note a {
      color: var(--accent);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color var(--motion-fast);
    }

    .product-quote-note a:hover {
      border-color: var(--accent);
    }

    /* Preservation Mode Alert Banner */
    .view-alert-banner {
      background: #fff9db;
      border-bottom: 1px solid #f5e6a0;
      color: #856404;
      font-size: var(--text-xs);
      font-weight: 600;
      text-align: center;
      padding: var(--space-2);
      font-family: var(--font-mono);
    }

    .view-alert-banner button {
      background: none;
      border: none;
      color: var(--accent);
      font-weight: 700;
      cursor: pointer;
      text-decoration: underline;
      margin-left: var(--space-1);
    }

    /* Common Sections for Preserved Landing page */
    /* Hero Section */
    .hero-section {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid var(--border);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-8);
      align-items: center;
    }

    .hero-content {
      max-width: 580px;
    }

    .hero-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    .hero-headline {
      font-family: var(--font-display);
      font-size: var(--text-4xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: var(--fg);
      margin-bottom: var(--space-4);
    }

    .hero-subheadline {
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--muted);
      margin-bottom: var(--space-6);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    .hero-visual {
      border: 1px solid var(--border);
      background: var(--surface);
      padding: var(--space-2);
      border-radius: var(--radius-md);
      box-shadow: var(--elev-raised);
    }

    .hero-image {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--radius-sm);
      display: block;
    }

    /* Bento Category Section */
    .section-padding {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid var(--border);
    }

    .section-head {
      margin-bottom: var(--space-8);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--fg);
    }

    .section-subtitle {
      font-size: var(--text-sm);
      color: var(--muted);
      margin-top: var(--space-1);
    }

    /* Bento Grid */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-4);
    }

    .bento-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 180px;
      transition: all var(--motion-base) var(--ease-standard);
      text-decoration: none;
      color: inherit;
    }

    .bento-card:hover {
      border-color: var(--accent);
      box-shadow: var(--elev-raised);
    }

    .bento-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background-color: var(--surface-warm);
      display: grid;
      place-items: center;
      margin-bottom: var(--space-4);
      transition: background-color var(--motion-fast) var(--ease-standard);
    }

    .bento-card:hover .bento-icon {
      background-color: rgba(0, 53, 198, 0.08);
    }

    .bento-icon svg {
      width: 20px;
      height: 20px;
      color: var(--accent);
    }

    .bento-meta {
      display: flex;
      flex-direction: column;
    }

    .bento-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .bento-desc {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    /* Bento grid spacing layouts */
    .bento-col-3 {
      grid-column: span 3;
    }

    .bento-col-2 {
      grid-column: span 2;
    }

    .bento-col-4 {
      grid-column: span 4;
    }

    /* Product Grid Section */
    .products-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: var(--space-8);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
    }

    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
      cursor: pointer;
    }

    .product-card:hover {
      border-color: var(--accent);
      box-shadow: var(--elev-raised);
    }

    .product-media {
      position: relative;
      background: var(--surface-warm);
      aspect-ratio: 1;
      overflow: hidden;
    }

    .product-image-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: var(--space-5);
      background:
        linear-gradient(135deg, rgba(0, 53, 198, 0.08), transparent 42%),
        repeating-linear-gradient(90deg, rgba(229, 227, 222, 0.7) 0 1px, transparent 1px 18px),
        var(--surface-warm);
      color: var(--fg-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .product-image {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .product-image.is-missing {
      display: none;
    }

    .product-tag {
      position: absolute;
      top: var(--space-2);
      left: var(--space-2);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 3px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.05em;
    }

    .dispatch-badge {
      position: absolute;
      bottom: var(--space-2);
      right: var(--space-2);
      background: rgba(27, 27, 27, 0.72);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: var(--radius-sm);
      padding: 3px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.02em;
    }

    .product-body {
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .product-title {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .product-description {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
      margin-bottom: var(--space-4);
      flex-grow: 1;
    }

    .product-footer {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-3);
      padding-top: var(--space-3);
      border-top: 1px solid var(--border-soft);
    }

    .product-price-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .product-price-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .product-price {
      font-family: var(--font-mono);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
    }

    .product-cta {
      width: 100%;
      min-height: 40px;
      padding: 9px var(--space-4);
    }

    .product-source-note {
      font-size: 9px;
      font-family: var(--font-mono);
      color: var(--muted);
      margin-top: var(--space-2);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* Custom Quote Section */
    .quote-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: var(--space-8);
      align-items: start;
    }

    .quote-form-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
    }

    .form-group {
      margin-bottom: var(--space-5);
    }

    .form-label {
      display: block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .upload-zone {
      border: 2px dashed var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-8) var(--space-4);
      text-align: center;
      background: var(--surface-warm);
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .upload-zone:hover, .upload-zone.dragover {
      border-color: var(--accent);
      background-color: rgba(0, 53, 198, 0.02);
    }

    .upload-icon {
      color: var(--muted);
      margin-bottom: var(--space-3);
    }

    .upload-icon svg {
      width: 32px;
      height: 32px;
    }

    .upload-text {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .upload-subtext {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .form-textarea {
      width: 100%;
      min-height: 100px;
      padding: var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-warm);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--fg);
      resize: vertical;
      transition: border-color var(--motion-fast) var(--ease-standard);
    }

    .form-textarea:focus {
      outline: none;
      border-color: var(--accent);
    }

    .quote-info-panel {
      padding: var(--space-2);
    }

    .quote-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-orange);
      margin-bottom: var(--space-3);
    }

    .quote-headline {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: var(--fg);
      margin-bottom: var(--space-4);
    }

    .quote-body-text {
      font-size: var(--text-base);
      color: var(--muted);
      line-height: var(--leading-body);
      margin-bottom: var(--space-6);
    }

    .accepted-inputs-list {
      list-style: none;
      margin-bottom: var(--space-6);
    }

    .accepted-input-item {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--fg-2);
      padding: var(--space-2) 0;
      border-bottom: 1px solid var(--border-soft);
    }

    .accepted-input-item svg {
      width: 16px;
      height: 16px;
      color: var(--accent);
    }

    .trust-badge-row {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-4);
      background: var(--surface-warm);
      border-left: 3px solid var(--accent-orange);
      border-radius: var(--radius-sm);
    }

    .trust-badge-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-2);
    }

    .trust-badge-item svg {
      width: 14px;
      height: 14px;
      color: var(--accent-orange);
      margin-top: 3px;
      flex-shrink: 0;
    }

    .trust-badge-text {
      font-size: var(--text-xs);
      line-height: var(--leading-body);
      color: var(--muted);
      font-weight: 500;
    }

    /* How It Works Section */
    .how-it-works-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6);
    }

    .step-card {
      position: relative;
    }

    .step-number {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--accent);
      background: rgba(0, 53, 198, 0.06);
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      margin-bottom: var(--space-4);
    }

    .step-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .step-body {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    /* Trust Boundaries Grid */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
    }

    .trust-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-5);
      min-height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .trust-card-icon {
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    .trust-card-icon svg {
      width: 24px;
      height: 24px;
    }

    .trust-card-title {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .trust-card-body {
      font-size: var(--text-xs);
      color: var(--muted);
      line-height: var(--leading-body);
    }

    /* Toast notification */
    .toast-notification {
      position: fixed;
      bottom: var(--space-6);
      right: var(--space-6);
      background: var(--fg);
      color: var(--surface);
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      box-shadow: 0 12px 32px rgba(0,0,0,0.15);
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: var(--space-3);
      transform: translateY(150%);
      transition: transform var(--motion-base) var(--ease-standard);
    }

    .toast-notification.is-visible {
      transform: translateY(0);
    }

    .toast-close {
      background: none;
      border: none;
      color: var(--accent-orange);
      cursor: pointer;
      font-weight: 700;
    }

    /* Footer */
    .footer {
      background: var(--surface-warm);
      border-top: 1px solid var(--border);
      padding-top: var(--space-8);
      padding-bottom: var(--space-6);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-8);
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .footer-brand-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: var(--text-lg);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: var(--text-xs);
      color: var(--muted);
      max-width: 320px;
    }

    .footer-links-column {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .footer-links-title {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--fg);
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-link {
      font-size: var(--text-xs);
      color: var(--muted);
      text-decoration: none;
      transition: color var(--motion-fast) var(--ease-standard);
    }

    .footer-link:hover {
      color: var(--accent);
    }

    .footer-bottom {
      padding-top: var(--space-4);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-4);
    }

    .footer-copy {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .footer-disclaimer {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--muted);
      max-width: 600px;
      text-align: right;
    }

    /* Modal / File Uploader Interaction */
    .file-input {
      display: none;
    }

    .file-list {
      margin-top: var(--space-3);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-3);
      background: var(--surface-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: var(--text-xs);
    }

    .file-item-name {
      font-weight: 600;
      color: var(--fg-2);
    }

    .file-item-remove {
      cursor: pointer;
      color: var(--danger);
      font-weight: 700;
      border: none;
      background: none;
      padding: 0 4px;
    }

    /* Responsive Queries */
    @media (max-width: 980px) {
      .product-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }

      .hero-visual {
        order: -1;
      }

      .bento-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .bento-col-3 {
        grid-column: span 2;
      }

      .bento-col-4 {
        grid-column: span 4;
      }

      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .quote-grid {
        grid-template-columns: 1fr;
      }

      .how-it-works-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .trust-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      :root {
        --text-4xl: 36px;
        --text-3xl: 28px;
        --text-2xl: 22px;
      }

      .topbar-inner {
        min-height: auto;
        padding: var(--space-2) 0 var(--space-1);
        flex-wrap: wrap;
        row-gap: var(--space-1);
      }

      .brand {
        order: 1;
      }

      .nav-actions {
        order: 2;
        margin-right: var(--space-2);
      }

      nav[data-od-id="main-nav"] {
        order: 3;
        width: 100%;
      }

      .nav-links {
        display: flex;
        width: 100%;
        min-height: 40px;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 3px;
        background: #ffe45c;
        border: 1px solid #d8b900;
        border-radius: var(--radius-sm);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-link {
        min-height: 33px;
        padding: 7px 9px;
        border: 1px solid transparent;
        border-radius: 3px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        line-height: 1.35;
        white-space: nowrap;
        flex-shrink: 0;
        background: transparent;
        color: var(--muted);
      }

      .nav-link:hover {
        color: var(--accent);
        border-color: color-mix(in oklab, var(--accent), transparent 68%);
        background: rgba(0, 53, 198, 0.06);
      }

      .nav-link.is-active,
      .nav-link[aria-current="page"] {
        color: var(--accent-on);
        background: var(--accent);
        border-color: var(--accent);
      }

      .hero-section {
        padding-top: var(--space-6);
        padding-bottom: var(--space-8);
      }

      .hero-actions {
        flex-direction: column;
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .products-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
      }

      .bento-grid {
        grid-template-columns: 1fr;
      }

      .bento-col-2, .bento-col-3, .bento-col-4 {
        grid-column: span 1;
      }

      .product-grid {
        grid-template-columns: 1fr;
      }

      .how-it-works-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-disclaimer {
        text-align: left;
      }
    }

    /* PM3D final storefront navigation and support footer */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .btn-icon-only.is-active {
      outline: 2px solid rgba(0, 53, 198, 0.22);
      outline-offset: 2px;
    }

    .menu-toggle {
      display: none;
    }

    .footer-grid.pm3d-footer-grid {
      grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
    }

    @media (max-width: 760px) {
      .topbar-inner {
        position: relative;
      }

      .menu-toggle {
        display: grid;
      }

      nav[data-od-id="main-nav"] {
        display: none;
        order: 3;
        width: 100%;
      }

      body.nav-open nav[data-od-id="main-nav"] {
        display: block;
      }

      .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
      }

      .nav-link {
        width: 100%;
        text-align: left;
        white-space: normal;
      }

      .footer-grid.pm3d-footer-grid {
        grid-template-columns: 1fr;
      }
    }

:root {
      /* Reconciled Bento & Industrial Precision Tokens */
      --bg: #fcf9f8;
      --surface: #ffffff;
      --surface-warm: #F9F7F2;
      --fg: #1b1b1b;
      --fg-2: #242424;
      --muted: #444748;
      --meta: #0035c6;
      --border: #E5E3DE;
      --border-soft: #f4f2ee;
      --accent: #0035c6;
      --accent-on: #ffffff;
      --accent-hover: #002bb0;
      --accent-active: #00208a;

      --accent-orange: #FF5C00;
      --accent-lime: #C1FF72;
      --danger: #ef4444;

      /* Typography */
      --font-display: "Hanken Grotesk", "Hanken Grotesk Fallback", Inter, system-ui, sans-serif;
      --font-body: Inter, "Inter Fallback", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace;

      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 24px;
      --text-2xl: 36px;
      --text-3xl: 48px;
      --text-4xl: 64px;

      --leading-body: 1.52;
      --leading-tight: 1.1;
      --tracking-display: -0.02em;

      /* Spacing & Radii */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;

      --radius-sm: 4px; /* Tight, precise corners */
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-pill: 9999px;

      /* Shadows & Borders */
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 12px 32px rgba(27, 27, 27, 0.04);
      --focus-ring: 0 0 0 4px rgba(0, 53, 198, 0.15);

      /* Motion */
      --motion-fast: 150ms;
      --motion-base: 240ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);

      /* Layout width */
      --container-max: 1180px;
      --container-gutter: 24px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      -webkit-font-smoothing: antialiased;
    }

    body {
      overflow-x: clip;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      /* Subtle grid pattern background representing precise manufacturing space */
      background-image:
        linear-gradient(to right, rgba(229, 227, 222, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 227, 222, 0.25) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* Layout Utilities */
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--container-gutter);
      padding-right: var(--container-gutter);
    }

    /* Topbar Navigation */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      min-height: 60px;
      background: rgba(252, 249, 248, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .topbar-inner {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      text-decoration: none;
    }

    .brand-logo {
      height: 32px;
      width: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      min-height: 40px;
      gap: 0;
      list-style: none;
      padding: 3px;
      background: #ffe45c;
      border: 1px solid #d8b900;
      border-radius: var(--radius-sm);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .nav-link {
      display: block;
      min-height: 34px;
      padding: 8px 11px;
      border: 1px solid transparent;
      border-radius: 3px;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
    }

    .nav-link:hover {
      color: var(--accent);
      border-color: color-mix(in oklab, var(--accent), transparent 68%);
      background: rgba(0, 53, 198, 0.06);
    }

    .nav-link.is-active,
    .nav-link[aria-current="page"] {
      color: var(--accent-on);
      background: var(--accent);
      border-color: var(--accent);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* Cart Action Button / Indicator */
    .btn-icon-only {
      width: 44px;
      height: 44px;
      border: 1px solid var(--accent);
      background: var(--accent);
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      cursor: pointer;
      position: relative;
      transition: all var(--motion-fast) var(--ease-standard);
      text-decoration: none;
    }

    .btn-icon-only:hover {
      border-color: var(--accent-hover);
      background: var(--accent-hover);
    }

    .btn-icon-only svg {
      width: 18px;
      height: 18px;
      color: var(--accent-on);
    }

    .cart-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background-color: var(--accent-orange);
      color: #ffffff;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: var(--radius-pill);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid var(--bg);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    /* Main Area */
    main {
      flex-grow: 1;
    }

    .page-header {
      padding-top: var(--space-8);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--border);
    }

    .page-title {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 800;
      letter-spacing: var(--tracking-display);
      color: var(--fg);
    }

    .page-subtitle {
      font-size: var(--text-sm);
      color: var(--muted);
      margin-top: var(--space-1);
    }

    /* Cart Layout Grid */
    .cart-layout {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: var(--space-8);
      align-items: start;
      margin-top: var(--space-6);
      margin-bottom: var(--space-12);
    }

    /* Cart List items */
    .cart-items-container {
      display: grid;
      gap: var(--space-4);
    }

    .cart-item-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      display: grid;
      grid-template-columns: 84px 1fr auto;
      gap: var(--space-4);
      align-items: center;
      transition: all var(--motion-base) var(--ease-standard);
      position: relative;
      overflow: hidden;
    }

    .cart-item-card.removing {
      opacity: 0;
      transform: scale(0.96) translateY(10px);
      height: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: -16px;
      border-color: transparent;
    }

    .cart-item-card:hover {
      border-color: var(--accent);
      box-shadow: var(--elev-raised);
    }

    .cart-item-media {
      width: 84px;
      height: 84px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      position: relative;
      background: var(--surface-warm);
    }

    .cart-item-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cart-item-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(0, 53, 198, 0.08), transparent 42%), var(--surface-warm);
      color: var(--fg-2);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-align: center;
      padding: var(--space-1);
    }

    .cart-item-details {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .cart-item-title {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--fg);
    }

    .cart-item-meta {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .cart-item-tag {
      background: var(--surface-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 2px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .cart-item-dispatch {
      font-size: var(--text-xs);
      color: var(--muted);
      font-family: var(--font-mono);
      font-weight: 500;
    }

    .cart-item-price {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--fg);
      margin-top: 2px;
    }

    /* Quantity and Action controls */
    .cart-item-actions {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .qty-control {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      overflow: hidden;
      height: 34px;
    }

    .qty-btn {
      width: 28px;
      height: 100%;
      background: transparent;
      border: none;
      color: var(--muted);
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background-color var(--motion-fast) var(--ease-standard);
      user-select: none;
    }

    .qty-btn:hover {
      background-color: var(--border-soft);
      color: var(--fg);
    }

    .qty-val {
      width: 34px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--fg);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-remove {
      width: 34px;
      height: 34px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .btn-remove:hover {
      border-color: var(--danger);
      background-color: rgba(239, 68, 68, 0.05);
      color: var(--danger);
    }

    .btn-remove svg {
      width: 15px;
      height: 15px;
    }

    /* Checkout & Order Summary Panel */
    .summary-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      display: grid;
      gap: var(--space-5);
      position: sticky;
      top: 80px;
      box-shadow: var(--elev-raised);
    }

    .summary-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 800;
      color: var(--fg);
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--space-3);
    }

    .summary-rows {
      display: grid;
      gap: var(--space-2);
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: var(--text-sm);
      color: var(--muted);
    }

    .summary-row b {
      font-family: var(--font-mono);
      color: var(--fg);
      font-weight: 700;
    }

    .summary-row.total {
      border-top: 1.5px solid var(--border);
      padding-top: var(--space-3);
      margin-top: var(--space-2);
      font-size: var(--text-base);
      color: var(--fg);
      font-weight: 800;
    }

    .summary-row.total b {
      font-size: var(--text-base);
      color: var(--accent);
      font-family: var(--font-body);
      font-weight: 800;
    }

    .shipping-section-title {
      font-family: var(--font-display);
      font-size: var(--text-sm);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--fg);
      border-top: 1px solid var(--border-soft);
      padding-top: var(--space-4);
      margin-top: var(--space-2);
    }

    /* Customer Form Styling */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .form-group.full-width {
      grid-column: span 2;
    }

    .form-label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }

    .form-input, .form-textarea {
      width: 100%;
      min-height: 40px;
      padding: 10px var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--fg);
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .form-textarea {
      min-height: 72px;
      resize: vertical;
    }

    .form-input::placeholder, .form-textarea::placeholder {
      color: #9da3a6;
    }

    .form-input:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--accent);
      background-color: var(--surface);
      box-shadow: var(--focus-ring);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-decoration: none;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
      border: 1px solid transparent;
      user-select: none;
      width: 100%;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background-color: var(--accent);
      color: var(--accent-on);
      border-color: var(--accent);
    }

    .btn-primary:hover {
      background-color: var(--accent-hover);
      border-color: var(--accent-hover);
    }

    .btn-secondary {
      background-color: transparent;
      border-color: var(--border);
      color: var(--fg);
    }

    .btn-secondary:hover {
      border-color: var(--fg);
      background-color: var(--surface-warm);
    }

    /* Empty State View */
    .empty-cart-state {
      display: none;
      text-align: center;
      padding: var(--space-12) var(--space-4);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      max-width: 640px;
      margin: var(--space-8) auto var(--space-12);
      box-shadow: var(--elev-raised);
    }

    .empty-cart-icon {
      width: 64px;
      height: 64px;
      background-color: var(--surface-warm);
      color: var(--accent);
      border-radius: var(--radius-md);
      display: grid;
      place-items: center;
      margin: 0 auto var(--space-5);
    }

    .empty-cart-icon svg {
      width: 28px;
      height: 28px;
    }

    .empty-cart-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 800;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .empty-cart-body {
      font-size: var(--text-sm);
      color: var(--muted);
      max-width: 360px;
      margin: 0 auto var(--space-6);
      line-height: var(--leading-body);
    }

    .empty-cart-actions {
      display: flex;
      justify-content: center;
      gap: var(--space-3);
      max-width: 420px;
      margin: 0 auto;
    }

    .empty-cart-actions .btn {
      width: auto;
      flex: 1;
    }

    /* Success Checkout Alert Overlay */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(27, 27, 27, 0.44);
      backdrop-filter: blur(4px);
      display: none;
      place-items: center;
      z-index: 1000;
      padding: var(--space-4);
    }

    .modal-content {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      max-width: 480px;
      width: 100%;
      box-shadow: var(--elev-raised);
      text-align: center;
      animation: modalEnter var(--motion-base) var(--ease-standard);
    }

    @keyframes modalEnter {
      from { opacity: 0; transform: scale(0.96) translateY(-10px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .modal-icon {
      width: 56px;
      height: 56px;
      background-color: rgba(22, 163, 74, 0.1);
      color: var(--success);
      border-radius: var(--radius-md);
      display: grid;
      place-items: center;
      margin: 0 auto var(--space-4);
    }

    .modal-icon svg {
      width: 24px;
      height: 24px;
    }

    .modal-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 800;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .modal-body {
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: var(--leading-body);
      margin-bottom: var(--space-6);
    }

    /* Footer */
    .footer {
      background: var(--surface-warm);
      border-top: 1px solid var(--border);
      padding-top: var(--space-8);
      padding-bottom: var(--space-8);
      margin-top: auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-8);
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-brand-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: var(--text-lg);
      letter-spacing: 0.05em;
      color: var(--fg);
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: var(--text-sm);
      color: var(--muted);
      max-width: 440px;
    }

    .footer-links-column {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .footer-links-title {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--fg);
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-link {
      font-size: var(--text-sm);
      color: var(--muted);
      text-decoration: none;
      transition: color var(--motion-fast) var(--ease-standard);
    }

    .footer-link:hover {
      color: var(--accent);
    }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: var(--space-6);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-4);
    }

    .footer-copy {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .footer-disclaimer {
      font-size: var(--text-xs);
      color: var(--muted);
      text-align: right;
      max-width: 580px;
    }

    /* Responsive adjustments */
    @media (max-width: 980px) {
      .cart-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
      .summary-panel {
        position: relative;
        top: 0;
      }
    }

    @media (max-width: 768px) {
      :root {
        --container-gutter: 16px;
      }
      body {
        background-size: 32px 32px;
      }
      .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
      .footer-disclaimer {
        text-align: left;
      }
    }

    @media (max-width: 640px) {
      :root {
        --text-4xl: 36px;
        --text-3xl: 28px;
        --text-2xl: 22px;
      }

      .topbar-inner {
        min-height: auto;
        padding: var(--space-2) 0 var(--space-1);
        flex-wrap: wrap;
        row-gap: var(--space-1);
      }

      .brand {
        order: 1;
      }

      .nav-actions {
        order: 2;
        margin-right: var(--space-2);
      }

      nav[data-od-id="main-nav"] {
        order: 3;
        width: 100%;
      }

      .nav-links {
        display: flex;
        width: 100%;
        min-height: 40px;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 3px;
        background: #ffe45c;
        border: 1px solid #d8b900;
        border-radius: var(--radius-sm);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-link {
        min-height: 33px;
        padding: 7px 9px;
        border: 1px solid transparent;
        border-radius: 3px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        line-height: 1.35;
        white-space: nowrap;
        flex-shrink: 0;
        background: transparent;
        color: var(--muted);
      }

      .nav-link:hover {
        color: var(--accent);
        border-color: color-mix(in oklab, var(--accent), transparent 68%);
        background: rgba(0, 53, 198, 0.06);
      }

      .nav-link.is-active,
      .nav-link[aria-current="page"] {
        color: var(--accent-on);
        background: var(--accent);
        border-color: var(--accent);
      }
    }

    @media (max-width: 560px) {
      .cart-item-card {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        align-items: stretch;
      }
      .cart-item-media {
        width: 100%;
        height: 120px;
      }
      .cart-item-actions {
        justify-content: space-between;
        margin-top: var(--space-2);
      }
      .empty-cart-actions {
        flex-direction: column;
        gap: var(--space-2);
      }
      .empty-cart-actions .btn {
        width: 100%;
      }
      .form-grid {
        grid-template-columns: 1fr;
      }
      .form-group.full-width {
        grid-column: span 1;
      }
      .summary-panel {
        padding: var(--space-4);
      }
    }

    /* PM3D final storefront navigation and support footer */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .btn-icon-only.is-active {
      outline: 2px solid rgba(0, 53, 198, 0.22);
      outline-offset: 2px;
    }

    .menu-toggle {
      display: none;
    }

    .footer-grid.pm3d-footer-grid {
      grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
    }

    @media (max-width: 760px) {
      .topbar-inner {
        position: relative;
      }

      .menu-toggle {
        display: grid;
      }

      nav[data-od-id="main-nav"] {
        display: none;
        order: 3;
        width: 100%;
      }

      body.nav-open nav[data-od-id="main-nav"] {
        display: block;
      }

      .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
      }

      .nav-link {
        width: 100%;
        text-align: left;
        white-space: normal;
      }

      .footer-grid.pm3d-footer-grid {
        grid-template-columns: 1fr;
      }
    }

:root {
      /* Reconciled Bento & Industrial Precision Tokens */
      --bg: #fcf9f8;
      --surface: #ffffff;
      --surface-warm: #F9F7F2;
      --fg: #1b1b1b;
      --fg-2: #242424;
      --muted: #444748;
      --meta: #0035c6;
      --border: #E5E3DE;
      --border-soft: #f4f2ee;
      --accent: #0035c6;
      --accent-on: #ffffff;
      --accent-hover: #002bb0;
      --accent-active: #00208a;

      --accent-orange: #FF5C00;
      --accent-lime: #C1FF72;
      --danger: #ef4444;

      /* Typography */
      --font-display: "Hanken Grotesk", "Hanken Grotesk Fallback", Inter, system-ui, sans-serif;
      --font-body: Inter, "Inter Fallback", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace;

      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 18px;
      --text-xl: 24px;
      --text-2xl: 36px;
      --text-3xl: 48px;
      --text-4xl: 64px;

      --leading-body: 1.52;
      --leading-tight: 1.1;
      --tracking-display: -0.02em;

      /* Spacing & Radii */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-pill: 9999px;

      /* Shadows & Borders */
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 12px 32px rgba(27, 27, 27, 0.04);
      --focus-ring: 0 0 0 4px rgba(0, 53, 198, 0.15);

      /* Motion */
      --motion-fast: 150ms;
      --motion-base: 240ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);

      /* Layout width */
      --container-max: 1180px;
      --container-gutter: 24px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      -webkit-font-smoothing: antialiased;
    }

    body {
      overflow-x: clip;
      /* Subtle grid pattern background representing precise manufacturing space */
      background-image:
        linear-gradient(to right, rgba(229, 227, 222, 0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 227, 222, 0.25) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* Layout Utilities */
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--container-gutter);
      padding-right: var(--container-gutter);
    }

    /* Topbar Navigation */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      min-height: 60px;
      background: rgba(252, 249, 248, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .topbar-inner {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      text-decoration: none;
    }

    .brand-logo {
      height: 32px;
      width: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      min-height: 40px;
      gap: 0;
      list-style: none;
      padding: 3px;
      background: #ffe45c;
      border: 1px solid #d8b900;
      border-radius: var(--radius-sm);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .nav-link {
      display: block;
      min-height: 34px;
      padding: 8px 11px;
      border: 1px solid transparent;
      border-radius: 3px;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
    }

    .nav-link:hover {
      color: var(--accent);
      border-color: color-mix(in oklab, var(--accent), transparent 68%);
      background: rgba(0, 53, 198, 0.06);
    }

    .nav-link.is-active,
    .nav-link[aria-current="page"] {
      color: var(--accent-on);
      background: var(--accent);
      border-color: var(--accent);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-decoration: none;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
      border: 1px solid transparent;
      user-select: none;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background-color: var(--accent);
      color: var(--accent-on);
    }

    .btn-primary:hover {
      background-color: var(--accent-hover);
    }

    .btn-secondary {
      background-color: transparent;
      border-color: var(--border);
      color: var(--fg);
    }

    .btn-secondary:hover {
      border-color: var(--fg);
      background-color: var(--surface-warm);
    }

    .btn-icon-only {
      width: 44px;
      height: 44px;
      border: 1px solid var(--accent);
      background: var(--accent);
      border-radius: var(--radius-sm);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
      text-decoration: none;
    }

    .btn-icon-only:hover {
      border-color: var(--accent-hover);
      background: var(--accent-hover);
    }

    .btn-icon-only svg {
      width: 18px;
      height: 18px;
      color: var(--accent-on);
    }

    /* Custom Quote Content Layout */
    .quote-page-section {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
    }

    .page-header {
      margin-bottom: var(--space-12);
      text-align: left;
    }

    .page-title {
      font-family: var(--font-display);
      font-size: var(--text-4xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .page-subtitle {
      font-size: var(--text-lg);
      color: var(--muted);
      max-width: 600px;
    }

    .quote-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: var(--space-8);
      align-items: start;
    }

    .quote-form-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      box-shadow: var(--elev-raised);
    }

    .form-group-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    .form-group {
      margin-bottom: var(--space-5);
    }

    .form-label {
      display: block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--fg);
      margin-bottom: var(--space-2);
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      min-height: 44px;
      padding: var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-warm);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--fg);
      transition: border-color var(--motion-fast) var(--ease-standard);
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      outline: none;
      border-color: var(--accent);
    }

    .form-textarea {
      min-height: 100px;
      resize: vertical;
    }

    .upload-zone {
      border: 2px dashed var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-8) var(--space-4);
      text-align: center;
      background: var(--surface-warm);
      cursor: pointer;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .upload-zone:hover, .upload-zone.dragover {
      border-color: var(--accent);
      background-color: rgba(0, 53, 198, 0.02);
    }

    .upload-icon {
      color: var(--muted);
      margin-bottom: var(--space-3);
    }

    .upload-icon svg {
      width: 32px;
      height: 32px;
    }

    .upload-text {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--fg);
      margin-bottom: var(--space-1);
    }

    .upload-subtext {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .file-input {
      display: none;
    }

    .file-list {
      margin-top: var(--space-3);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-3);
      background: var(--surface-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: var(--text-xs);
    }

    .file-item-name {
      font-weight: 600;
      color: var(--fg-2);
    }

    .file-item-remove {
      cursor: pointer;
      color: var(--danger);
      font-weight: 700;
      border: none;
      background: none;
      padding: 0 4px;
    }

    /* Guidance Panel Styles */
    .quote-info-panel {
      padding: var(--space-2);
    }

    .quote-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-orange);
      margin-bottom: var(--space-3);
    }

    .quote-headline {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 800;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      color: var(--fg);
      margin-bottom: var(--space-4);
    }

    .accepted-inputs-list {
      list-style: none;
      margin-bottom: var(--space-6);
    }

    .accepted-input-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--fg-2);
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--border-soft);
    }

    .accepted-input-item svg {
      width: 18px;
      height: 18px;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* Footer */
    .footer {
      background: var(--surface-warm);
      border-top: 1px solid var(--border);
      padding-top: var(--space-8);
      padding-bottom: var(--space-6);
      margin-top: var(--space-12);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-8);
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .footer-brand-title {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: var(--text-lg);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .footer-brand-desc {
      font-size: var(--text-xs);
      color: var(--muted);
      max-width: 320px;
    }

    .footer-links-column {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .footer-links-title {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--fg);
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-link {
      font-size: var(--text-xs);
      color: var(--muted);
      text-decoration: none;
      transition: color var(--motion-fast) var(--ease-standard);
    }

    .footer-link:hover {
      color: var(--accent);
    }

    .footer-bottom {
      padding-top: var(--space-4);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-4);
    }

    .footer-copy {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .footer-disclaimer {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--muted);
      max-width: 600px;
      text-align: right;
    }

    /* Responsive Queries */
    @media (max-width: 980px) {
      .quote-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      :root {
        --text-4xl: 36px;
        --text-3xl: 28px;
        --text-2xl: 22px;
      }

      .topbar-inner {
        min-height: auto;
        padding: var(--space-2) 0 var(--space-1);
        flex-wrap: wrap;
        row-gap: var(--space-1);
      }

      .brand {
        order: 1;
      }

      .nav-actions {
        order: 2;
        margin-right: var(--space-2);
      }

      nav[data-od-id="main-nav"] {
        order: 3;
        width: 100%;
      }

      .nav-links {
        display: flex;
        width: 100%;
        min-height: 40px;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 3px;
        background: #ffe45c;
        border: 1px solid #d8b900;
        border-radius: var(--radius-sm);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-link {
        min-height: 33px;
        padding: 7px 9px;
        border: 1px solid transparent;
        border-radius: 3px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        line-height: 1.35;
        white-space: nowrap;
        flex-shrink: 0;
        background: transparent;
        color: var(--muted);
      }

      .nav-link:hover {
        color: var(--accent);
        border-color: color-mix(in oklab, var(--accent), transparent 68%);
        background: rgba(0, 53, 198, 0.06);
      }

      .nav-link.is-active,
      .nav-link[aria-current="page"] {
        color: var(--accent-on);
        background: var(--accent);
        border-color: var(--accent);
      }

      .form-group-row {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-disclaimer {
        text-align: left;
      }
    }

    /* PM3D final storefront navigation and support footer */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .btn-icon-only.is-active {
      outline: 2px solid rgba(0, 53, 198, 0.22);
      outline-offset: 2px;
    }

    .menu-toggle {
      display: none;
    }

    .footer-grid.pm3d-footer-grid {
      grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
    }

    @media (max-width: 760px) {
      .topbar-inner {
        position: relative;
      }

      .menu-toggle {
        display: grid;
      }

      nav[data-od-id="main-nav"] {
        display: none;
        order: 3;
        width: 100%;
      }

      body.nav-open nav[data-od-id="main-nav"] {
        display: block;
      }

      .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
      }

      .nav-link {
        width: 100%;
        text-align: left;
        white-space: normal;
      }

      .footer-grid.pm3d-footer-grid {
        grid-template-columns: 1fr;
      }
    }

:root{--bg:#fcf9f8;--surface:#fff;--surface-warm:#F9F7F2;--fg:#1b1b1b;--muted:#444748;--border:#E5E3DE;--border-soft:#f4f2ee;--accent:#0035c6;--accent-on:#fff;--accent-hover:#002bb0;--accent-orange:#FF5C00;--yellow:#ffe45c;--font-display:"Hanken Grotesk",Inter,system-ui,sans-serif;--font-body:Inter,system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:24px;--text-2xl:36px;--text-3xl:52px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;--radius-sm:4px;--radius-md:8px;--motion-fast:150ms;--ease-standard:cubic-bezier(.2,0,0,1);--container-max:1180px;--container-gutter:24px}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);line-height:1.52;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}body{overflow-x:hidden;background-image:linear-gradient(to right,rgba(229,227,222,.25) 1px,transparent 1px),linear-gradient(to bottom,rgba(229,227,222,.25) 1px,transparent 1px);background-size:40px 40px}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-gutter)}.topbar{position:sticky;top:0;z-index:100;min-height:60px;background:rgba(252,249,248,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.topbar-inner{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}.brand-logo{height:32px;width:auto}.nav-links{display:flex;align-items:center;gap:0;list-style:none;padding:3px;background:var(--yellow);border:1px solid #d8b900;border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.78)}.nav-link{display:block;min-height:34px;padding:8px 11px;border:1px solid transparent;border-radius:3px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap}.nav-link:hover{background:rgba(255,255,255,.35)}.nav-link.is-active{background:var(--accent);color:var(--accent-on)}.nav-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.btn-icon-only{width:44px;height:44px;border:1px solid var(--accent);background:var(--accent);border-radius:var(--radius-sm);display:grid;place-items:center;cursor:pointer;transition:all var(--motion-fast) var(--ease-standard);color:#fff;text-decoration:none}.btn-icon-only:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-icon-only svg{width:18px;height:18px;color:var(--accent-on)}.btn-icon-only.is-active{outline:2px solid rgba(0,53,198,.22);outline-offset:2px}.menu-toggle{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:transparent;border-color:var(--border);color:var(--fg)}.btn-secondary:hover{border-color:var(--fg);background:var(--surface-warm)}.hero-section{padding:var(--space-12) 0;border-bottom:1px solid var(--border)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.78fr);gap:var(--space-8);align-items:center}.eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-4)}h1{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.03;letter-spacing:-.02em;margin-bottom:var(--space-4);max-width:820px}h2{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.12;margin-bottom:var(--space-3)}h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.18;margin-bottom:var(--space-2)}p,li{color:var(--muted)}.lead{font-size:var(--text-lg);color:var(--muted);max-width:760px}.actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5)}.artifact-frame{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:0 16px 44px rgba(27,27,27,.05)}.artifact-frame::before{content:"";position:absolute;inset:var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-sm);pointer-events:none}.artifact-screen{position:relative;min-height:320px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--surface-warm),#fff);overflow:hidden;display:grid;align-content:end;padding:var(--space-5);border:1px solid var(--border-soft)}.artifact-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.artifact-overlay{position:relative;background:rgba(255,255,255,.9);border:1px solid var(--border);border-left:4px solid var(--accent-orange);border-radius:var(--radius-sm);padding:var(--space-4);max-width:330px}.artifact-kicker{display:block;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-2)}.section-padding{padding:var(--space-12) 0}.section-head{display:flex;justify-content:space-between;gap:var(--space-6);align-items:end;margin-bottom:var(--space-6)}.section-title{font-size:var(--text-2xl);max-width:680px}.section-subtitle{max-width:560px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);min-height:180px}.info-card.warm{background:var(--surface-warm)}.step-number{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-family:var(--font-mono);font-weight:900;font-size:var(--text-xs);margin-bottom:var(--space-4)}.mini-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-6)}.mini-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-4)}.mini-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--space-1)}.notice{border-left:4px solid var(--accent-orange);background:var(--surface-warm);padding:var(--space-4);font-size:var(--text-sm)}.footer{background:var(--surface-warm);border-top:1px solid var(--border);padding:var(--space-8) 0 var(--space-6)}.footer-grid{display:grid;gap:var(--space-8);margin-bottom:var(--space-8)}.footer-grid.pm3d-footer-grid{grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(120px,1fr))}.footer-brand{display:flex;flex-direction:column;gap:var(--space-3)}.footer-brand-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);letter-spacing:.05em;text-transform:uppercase}.footer-brand-desc{font-size:var(--text-xs);color:var(--muted);max-width:320px}.footer-links-column{display:flex;flex-direction:column;gap:var(--space-3)}.footer-links-title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em}.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);padding-left:0}.footer-link{font-size:var(--text-xs);color:var(--muted);text-decoration:none}.footer-link:hover{color:var(--accent)}.footer-bottom{padding-top:var(--space-4);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs);color:var(--muted)}@media(max-width:980px){.hero-grid,.card-grid,.card-grid.two{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.artifact-screen{min-height:260px}.mini-rail{grid-template-columns:1fr}}@media(max-width:760px){:root{--text-3xl:36px;--text-2xl:28px}.topbar-inner{position:relative;min-height:auto;padding:var(--space-2) 0 var(--space-1);flex-wrap:wrap;row-gap:var(--space-1)}.brand{order:1}.nav-actions{order:2;margin-right:var(--space-2)}.menu-toggle{display:grid}nav[data-od-id="main-nav"]{display:none;order:3;width:100%}body.nav-open nav[data-od-id="main-nav"]{display:block}.nav-links{width:100%;min-height:40px;flex-direction:column;align-items:stretch;overflow:visible;padding:3px}.nav-link{width:100%;min-height:33px;padding:7px 9px;text-align:left;white-space:normal;font-size:11px;font-weight:600;letter-spacing:.07em;line-height:1.35}.footer-grid.pm3d-footer-grid{grid-template-columns:1fr}.btn{width:100%}.actions{flex-direction:column}.hero-section,.section-padding{padding:var(--space-8) 0}.artifact-screen{min-height:220px}}

.static-shell-note {
  margin-top: var(--space-3, 12px);
  color: var(--muted, #444748);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

button[disabled],
input[type="submit"][disabled] {
  cursor: not-allowed;
  opacity: 0.68;
}

/* PrintMe3D Helpbot */
.helpbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
}

.helpbot-panel {
  width: min(410px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 120px));
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e3de);
  border-radius: 12px;
  box-shadow: none;
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
}

.helpbot.is-open .helpbot-panel {
  display: flex;
  animation: helpbot-in 220ms var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

@keyframes helpbot-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.helpbot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--accent, #0035c6);
  color: var(--accent-on, #fff);
  border-bottom: 3px solid var(--accent-lime, #c1ff72);
}

.helpbot-header-avatar,
.helpbot-msg-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.helpbot-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
}

.helpbot-header-avatar img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.helpbot-header-copy { flex: 1; min-width: 0; }

.helpbot-header-title {
  font-family: var(--font-display, "Hanken Grotesk", Inter, system-ui, sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

.helpbot-header-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.86;
}

.helpbot-status-mark {
  width: 8px;
  height: 8px;
  background: var(--accent-lime, #c1ff72);
}

.helpbot-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--motion-fast, 150ms) var(--ease-standard, ease);
}

.helpbot-close:hover { background: rgba(255, 255, 255, 0.22); }

.helpbot-close:focus-visible,
.helpbot-option:focus-visible,
.helpbot-result-action:focus-visible,
.helpbot-restart:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 4px rgba(0, 53, 198, 0.15));
}

.helpbot-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg, #fcf9f8);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.helpbot-msg {
  display: flex;
  gap: 8px;
  max-width: 100%;
  animation: helpbot-msg-in 200ms var(--ease-standard, ease);
}

@keyframes helpbot-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.helpbot-msg--bot { align-self: flex-start; }
.helpbot-msg--user { align-self: flex-end; flex-direction: row-reverse; }

.helpbot-msg-avatar {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border: 1px solid var(--border, #e5e3de);
  border-radius: 8px;
  background: var(--surface-warm, #f9f7f2);
}

.helpbot-msg-avatar img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.helpbot-msg--user .helpbot-msg-avatar {
  background: var(--accent, #0035c6);
  border-color: var(--accent, #0035c6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display, "Hanken Grotesk", Inter, system-ui, sans-serif);
}

.helpbot-bubble {
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg, #1b1b1b);
}

.helpbot-msg--bot .helpbot-bubble {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e3de);
  border-bottom-left-radius: 4px;
  box-shadow: none;
}

.helpbot-msg--user .helpbot-bubble {
  background: var(--accent, #0035c6);
  color: var(--accent-on, #fff);
  border-bottom-right-radius: 4px;
}

.helpbot-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 2px;
}

.helpbot-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted, #444748);
  opacity: 0.45;
  animation: helpbot-dot 1.1s ease-in-out infinite;
}

.helpbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.helpbot-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes helpbot-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-3px); opacity: 0.9; }
}

.helpbot-adapter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 36px);
  margin-top: 4px;
  padding-left: 36px;
}

.helpbot-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--border, #e5e3de);
  background: var(--surface, #fff);
  color: var(--fg, #1b1b1b);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  box-shadow: none;
  transition:
    border-color var(--motion-fast, 150ms),
    background var(--motion-fast, 150ms),
    color var(--motion-fast, 150ms),
    transform var(--motion-fast, 150ms);
}

.helpbot-option:hover {
  border-color: var(--accent, #0035c6);
  background: #f4f7ff;
  transform: translateX(2px);
}

.helpbot-option-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.helpbot-option-copy strong {
  color: var(--fg, #1b1b1b);
  font-family: var(--font-display, "Hanken Grotesk", Inter, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.3;
}

.helpbot-option-copy span {
  color: var(--muted, #444748);
  font-size: 11px;
  line-height: 1.4;
}

.helpbot-option-arrow {
  color: var(--accent, #0035c6);
  font-size: 18px;
  line-height: 1;
}

.helpbot-result {
  width: calc(100% - 36px);
  padding-left: 36px;
}

.helpbot-result-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-sm, 4px);
  background: var(--accent, #0035c6);
  color: var(--accent-on, #fff);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--motion-fast, 150ms) var(--ease-standard, ease);
}

.helpbot-result-action:hover {
  background: var(--accent-hover, #002bb0);
}

.helpbot-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border, #e5e3de);
  background: var(--surface, #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.helpbot-footer-note {
  margin: 0;
  color: var(--muted, #444748);
  font-size: 10px;
  line-height: 1.35;
}

.helpbot-restart {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--accent, #0035c6);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}

.helpbot-restart:hover { background: #f0f4ff; }

.helpbot-launcher {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 104px;
}

.helpbot-launcher:focus-visible { outline: none; }

.helpbot-launcher:focus-visible .mascot-figure {
  box-shadow: 0 0 0 4px rgba(0, 53, 198, 0.2);
  border-radius: 16px;
}

.mascot-figure {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  transform-origin: 50% 100%;
  animation: mascot-float 3.4s ease-in-out infinite;
  transition: transform var(--motion-base, 240ms) var(--ease-standard, ease);
  filter: drop-shadow(0 6px 14px rgba(16, 16, 16, 0.12));
  user-select: none;
  -webkit-user-drag: none;
}

.helpbot-launcher:hover .mascot-figure { transform: rotate(-5deg) translateY(-6px); }
.helpbot-launcher:active .mascot-figure { transform: rotate(-2deg) translateY(-2px) scale(0.97); }

.mascot-shadow {
  width: 52px;
  height: 11px;
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.2);
  filter: blur(3px);
  margin-top: -2px;
  animation: mascot-shadow-pulse 3.4s ease-in-out infinite;
}

.helpbot-label {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #0035c6);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e3de);
  border-radius: 999px;
  padding: 3px 8px;
  box-shadow: 0 4px 10px rgba(16, 16, 16, 0.06);
}

@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes mascot-shadow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(0.78); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-figure,
  .mascot-shadow,
  .helpbot.is-open .helpbot-panel,
  .helpbot-msg,
  .helpbot-typing span {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .helpbot { right: 12px; bottom: 12px; }
  .helpbot-panel { width: min(100vw - 24px, 360px); height: min(70vh, 520px); }
  .helpbot-launcher { width: 84px; }
  .mascot-figure { width: 72px; height: 72px; }
  .mascot-shadow { width: 42px; height: 9px; }
  .helpbot-label { font-size: 9px; }
}

/* Homepage hero experiment: one storefront, two explicit customer paths. */
.home-hero-experiment {
  position: relative;
  overflow: clip;
  padding: clamp(64px, 8vw, 112px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.home-hero-experiment .container {
  padding-inline: clamp(16px, 4vw, var(--container-gutter));
}

.home-hero-experiment .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(440px, 1.12fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.home-hero-experiment .hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-hero-experiment .hero-headline {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 82px);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.home-hero-experiment .hero-subheadline {
  max-width: 58ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.58;
  text-wrap: pretty;
}

.home-hero-experiment .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: clamp(24px, 3vw, 36px);
}

.home-hero-experiment .hero-actions .btn {
  min-height: 48px;
  padding-inline: 24px;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.home-hero-experiment .hero-actions .btn:hover {
  transform: translateY(-2px);
}

.home-hero-experiment .hero-actions .btn:active {
  transform: translateY(0);
}

.home-hero-experiment .hero-actions .btn:focus-visible,
.home-hero-experiment .hero-artifact-link:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

.home-hero-experiment .hero-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 560px;
  margin: clamp(34px, 4vw, 48px) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.home-hero-experiment .hero-paths li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding-right: var(--space-4);
}

.home-hero-experiment .hero-paths li + li {
  padding-right: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border);
}

.home-hero-experiment .hero-paths span,
.home-hero-experiment .hero-artifact-caption small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home-hero-experiment .hero-paths strong {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
}

.home-hero-experiment .hero-visual {
  min-width: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.home-hero-experiment .hero-image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border);
}

.home-hero-experiment .hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--ease-standard);
}

.home-hero-experiment .hero-visual:hover .hero-image {
  transform: scale(1.018);
}

.home-hero-experiment .hero-artifact-caption {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 76px;
  padding: var(--space-4) var(--space-5);
}

.home-hero-experiment .hero-artifact-mark {
  width: 12px;
  height: 12px;
  background: var(--accent-orange);
}

.home-hero-experiment .hero-artifact-caption > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.home-hero-experiment .hero-artifact-caption strong {
  overflow: hidden;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero-experiment .hero-artifact-link {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.home-hero-experiment .hero-artifact-link::after {
  content: "  ↗";
}

.home-hero-experiment .hero-artifact-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero-experiment .hero-headline,
  .home-hero-experiment .hero-subheadline,
  .home-hero-experiment .hero-actions,
  .home-hero-experiment .hero-paths {
    animation: pm3d-hero-copy-settle 560ms var(--ease-standard) both;
  }

  .home-hero-experiment .hero-subheadline { animation-delay: 60ms; }
  .home-hero-experiment .hero-actions { animation-delay: 110ms; }
  .home-hero-experiment .hero-paths { animation-delay: 160ms; }
  .home-hero-experiment .hero-visual { animation: pm3d-hero-object-settle 720ms var(--ease-standard) both; }
}

@keyframes pm3d-hero-copy-settle {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}

@keyframes pm3d-hero-object-settle {
  from { transform: translateY(14px) scale(0.992); }
  to { transform: translateY(0) scale(1); }
}

@media (max-width: 980px) {
  .home-hero-experiment .hero-grid {
    grid-template-columns: 1fr;
  }

  .home-hero-experiment .hero-content {
    order: 0;
  }

  .home-hero-experiment .hero-headline {
    max-width: 13ch;
  }

  .home-hero-experiment .hero-visual {
    order: 1;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .home-hero-experiment {
    padding: 48px 0 56px;
  }

  .home-hero-experiment .hero-grid {
    gap: 40px;
  }

  .home-hero-experiment .hero-headline {
    max-width: 12ch;
    font-size: clamp(42px, 13.5vw, 58px);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .home-hero-experiment .hero-actions {
    width: 100%;
  }

  .home-hero-experiment .hero-actions .btn {
    width: 100%;
  }

  .home-hero-experiment .hero-paths {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .home-hero-experiment .hero-paths li,
  .home-hero-experiment .hero-paths li + li {
    padding: 0;
    border-left: 0;
  }

  .home-hero-experiment .hero-artifact-caption {
    grid-template-columns: 12px minmax(0, 1fr);
    padding: var(--space-4);
  }

  .home-hero-experiment .hero-artifact-link {
    grid-column: 2;
    justify-self: start;
  }
}

/* Storefront footer — a high-contrast closing navigation layer. */
.footer {
  position: relative;
  margin-top: var(--space-12);
  padding: 56px 0 32px;
  border-top: 4px solid var(--yellow);
  background: #111a2b;
  color: #ffffff;
}

.footer-grid.pm3d-footer-grid {
  grid-template-columns: minmax(300px, 1.5fr) repeat(3, minmax(130px, 0.75fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-bottom: 48px;
}

.footer-brand {
  gap: 18px;
}

.footer-brand-link {
  display: inline-flex;
  align-self: flex-start;
  border-radius: var(--radius-sm);
}

.footer-brand-logo {
  display: block;
  width: 160px;
  height: 40px;
  object-fit: contain;
}

.footer-brand-tagline {
  margin-block: -8px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.2;
}

.footer-brand-desc {
  max-width: 44ch;
  color: #d4dbea;
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

.footer-actions {
  display: flex;
  max-width: 450px;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.footer-action--primary {
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: #111a2b;
}

.footer-action--primary:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #111a2b;
  transform: translateY(-2px);
}

.footer-action--secondary {
  border: 1px solid #5f6e89;
  color: #ffffff;
}

.footer-action--secondary:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-2px);
}

.footer-links-column {
  gap: 18px;
}

.footer-links-title {
  color: var(--accent-lime, #c1ff72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.footer-links {
  gap: 4px;
}

.footer-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: #d4dbea;
  font-size: 14px;
  line-height: 1.4;
  transition:
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.footer-link:hover {
  color: var(--yellow);
  transform: translateX(3px);
}

.footer-brand-link:focus-visible,
.footer-action:focus-visible,
.footer-link:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

.footer-bottom {
  min-height: 52px;
  padding: 20px 190px 0 0;
  border-top-color: #34425d;
  color: #aeb9cc;
}

.footer-copy,
.footer-disclaimer {
  color: #aeb9cc;
  font-size: 12px;
}

.footer-disclaimer {
  max-width: 620px;
  font-family: var(--font-body);
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 900px) {
  .footer-grid.pm3d-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 32px;
    border-bottom: 1px solid #34425d;
  }

  .footer-bottom {
    padding-right: 170px;
  }
}

@media (max-width: 640px) {
  .footer {
    padding: 40px 0 28px;
  }

  .footer-grid.pm3d-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
    margin-bottom: 38px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 28px;
  }

  .footer-actions {
    flex-direction: column;
  }

  .footer-action {
    width: 100%;
  }

  .footer-links-column:last-of-type {
    grid-column: 1 / -1;
  }

  .footer-links-column:last-of-type .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 24px;
  }

  .footer-bottom {
    min-height: 0;
    align-items: flex-start;
    padding: 20px 0 96px;
  }
}

@media (max-width: 340px) {
  .footer-grid.pm3d-footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-links-column:last-of-type {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-action,
  .footer-link {
    transition: none;
  }

  .footer-action:hover,
  .footer-link:hover {
    transform: none;
  }
}

/* FAQ — decision-first customer guidance. */
.faq-page {
  background: var(--surface);
}

.faq-hero {
  padding: clamp(64px, 8vw, 96px) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.faq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

.faq-hero-copy h1 {
  max-width: 10ch;
  margin-bottom: var(--space-5);
  font-size: clamp(52px, 6.3vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.faq-hero-copy .lead {
  max-width: 62ch;
  color: var(--fg-2, #242424);
  font-size: 18px;
  line-height: 1.65;
  text-wrap: pretty;
}

.faq-hero-copy .actions {
  max-width: 560px;
}

.faq-hero-copy .btn {
  min-width: 210px;
}

.seo-landing-hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}

.faq-route-panel {
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #ffffff;
}

.faq-route-intro {
  margin-bottom: 10px;
}

.faq-route-intro > span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-lime, #c1ff72);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-route-intro h2 {
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.15;
}

.faq-route-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 86px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  text-decoration: none;
  transition:
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.faq-route-link > span:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.faq-route-link strong {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.35;
}

.faq-route-link small {
  color: #d8e0ff;
  font-size: 12px;
  line-height: 1.45;
}

.faq-route-link > span:last-child {
  color: var(--yellow);
  font-size: 22px;
}

.faq-route-link:hover {
  color: var(--yellow);
  transform: translateX(3px);
}

.faq-route-note {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.faq-section {
  padding: clamp(72px, 9vw, 112px) 0;
  background: var(--surface);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: start;
}

.faq-index {
  position: sticky;
  top: 100px;
  padding-right: 32px;
  border-right: 1px solid var(--border);
}

.faq-index h2 {
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1.15;
  text-wrap: balance;
}

.faq-index > p {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

.faq-index nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-index a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}

.faq-index a::before {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: var(--border);
  content: "";
}

.faq-index a:hover {
  color: var(--accent);
}

.faq-index a:hover::before {
  background: var(--accent-orange);
}

.faq-groups {
  min-width: 0;
  max-width: 760px;
}

.faq-group {
  scroll-margin-top: 96px;
}

.faq-group + .faq-group {
  margin-top: 72px;
}

.faq-group > h2 {
  margin-bottom: 20px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-item {
  border-top: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  padding: 18px 56px 18px 0;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  text-wrap: pretty;
  transition: color var(--motion-fast) var(--ease-standard);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  position: absolute;
  right: 0;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
}

.faq-item[open] summary {
  color: var(--accent);
}

.faq-item[open] summary::after {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  content: "−";
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary:focus-visible,
.faq-index a:focus-visible,
.faq-route-link:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

.faq-answer {
  padding: 0 56px 24px 0;
}

.faq-answer p {
  max-width: 70ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
  text-wrap: pretty;
}

.faq-next-step {
  border-top: 2px solid #ffe45c;
  box-shadow: inset 0 3px 0 #335eea;
  background: #181b21;
}

.faq-page + .footer,
.how-page + .footer,
.quote-page + .footer {
  margin-top: 0;
  border-top: 1px solid #9eabc0;
}

.faq-next-step-inner {
  display: flex;
  min-height: 280px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
}

.faq-next-step h2 {
  margin-bottom: 10px;
  color: #f5f2ed;
  font-size: clamp(28px, 3vw, 40px);
}

.faq-next-step p {
  max-width: 58ch;
  margin-inline: auto;
  color: #d4dbea;
  font-size: 16px;
  line-height: 1.6;
}

.faq-next-step-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.faq-next-step-actions .btn {
  width: auto;
}

.faq-next-step-actions .btn-secondary {
  border-color: transparent;
  border-bottom-color: #f5f2ed;
  border-radius: 0;
  color: #f5f2ed;
}

.faq-next-step-actions .btn-secondary:hover {
  border-bottom-color: #ffe45c;
  background: transparent;
  color: #ffe45c;
}

.faq-next-step-actions .btn:focus-visible {
  outline: 3px solid #ffe45c;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .faq-hero-grid {
    grid-template-columns: 1fr;
  }

  .faq-hero-copy h1 {
    max-width: 12ch;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .faq-index {
    position: static;
    padding: 0 0 30px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .faq-index nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
  }

  .faq-groups {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .faq-hero {
    padding: 48px 0 56px;
  }

  .faq-hero-grid {
    gap: 40px;
  }

  .faq-hero-copy h1 {
    max-width: 10ch;
    font-size: clamp(44px, 13vw, 58px);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .faq-hero-copy .lead {
    font-size: 16px;
  }

  .faq-route-panel {
    padding: 22px;
  }

  .faq-route-link,
  .faq-route-note {
    padding-right: 72px;
  }

  .faq-route-intro h2 {
    font-size: 25px;
  }

  .faq-section {
    padding: 64px 0;
  }

  .faq-index h2 {
    font-size: 26px;
  }

  .faq-group + .faq-group {
    margin-top: 58px;
  }

  .faq-item summary {
    min-height: 72px;
    padding-right: 48px;
    font-size: 18px;
  }

  .faq-answer {
    padding-right: 0;
  }

  .faq-next-step-inner {
    min-height: 0;
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .faq-next-step-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .faq-next-step-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-route-link,
  .faq-index a {
    transition: none;
  }

  .faq-route-link:hover {
    transform: none;
  }
}

/* How it works — the FAQ language expressed as an ordered process. */
.how-page {
  background: var(--surface);
}

.how-hero .faq-hero-copy h1 {
  max-width: 11ch;
}

.how-steps {
  min-width: 0;
  max-width: 780px;
  list-style: none;
}

.how-step {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 26px;
  min-height: 176px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}

.how-step:last-child {
  border-bottom: 1px solid var(--border);
}

.how-step-number {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.how-step h2 {
  margin-bottom: 10px;
  color: var(--fg);
  font-size: 27px;
  line-height: 1.2;
  text-wrap: balance;
}

.how-step p {
  max-width: 68ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
  text-wrap: pretty;
}

.how-review-section {
  padding: clamp(72px, 9vw, 104px) 0;
  background: #111a2b;
  color: #ffffff;
}

.how-review-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(48px, 8vw, 104px);
  align-items: start;
}

.how-review-intro h2 {
  max-width: 12ch;
  margin-bottom: 16px;
  color: #ffffff;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.how-review-intro p {
  max-width: 48ch;
  color: #d4dbea;
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.how-review-list {
  margin: 0;
}

.how-review-list > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1fr);
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid #34425d;
}

.how-review-list > div:last-child {
  border-bottom: 1px solid #34425d;
}

.how-review-list dt {
  color: var(--accent-lime, #c1ff72);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}

.how-review-list dd {
  color: #d4dbea;
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .how-review-grid {
    grid-template-columns: 1fr;
  }

  .how-review-intro h2 {
    max-width: 16ch;
  }
}

@media (max-width: 640px) {
  .how-hero .faq-hero-copy h1 {
    max-width: 10ch;
  }

  .how-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 26px 0;
  }

  .how-step-number {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .how-step h2 {
    font-size: 22px;
  }

  .how-review-section {
    padding: 64px 0;
  }

  .how-review-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Custom quote — the FAQ language applied to a structured requirement brief. */
.quote-page {
  background: var(--surface);
}

.quote-hero .faq-hero-copy h1 {
  max-width: 11ch;
}

.quote-input-panel {
  padding-bottom: 24px;
}

.quote-input-row {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.quote-input-row strong {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.35;
}

.quote-input-row small {
  color: #d8e0ff;
  font-size: 12px;
  line-height: 1.5;
}

.quote-brief-section {
  scroll-margin-top: 80px;
}

.quote-workspace {
  min-width: 0;
  max-width: 820px;
}

.quote-workspace-header {
  margin-bottom: 28px;
}

.quote-workspace-header h2 {
  margin-bottom: 10px;
  color: var(--fg);
  font-size: clamp(30px, 3.5vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.quote-workspace-header p {
  max-width: 66ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

.quote-preview-notice {
  display: grid;
  grid-template-columns: minmax(110px, 0.24fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid #cbd4e1;
  border-radius: var(--radius-sm);
  background: #eef2f7;
}

.quote-preview-notice strong {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}

.quote-preview-notice p {
  color: var(--fg-2, #242424);
  font-size: 13px;
  line-height: 1.58;
  text-wrap: pretty;
}

.quote-page .quote-form-panel {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.quote-form-section {
  scroll-margin-top: 96px;
}

.quote-form-section + .quote-form-section {
  margin-top: 38px;
  padding-top: 38px;
  border-top: 1px solid var(--border);
}

.quote-form-section-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 28px;
}

.quote-form-section-heading > span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.quote-form-section-heading h3 {
  margin-bottom: 7px;
  color: var(--fg);
  font-size: 23px;
  line-height: 1.2;
  text-wrap: balance;
}

.quote-form-section-heading p {
  max-width: 62ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
  text-wrap: pretty;
}

.quote-page .form-group {
  margin-bottom: 22px;
}

.quote-page .form-input,
.quote-page .form-select,
.quote-page .form-textarea {
  min-height: 48px;
  border-color: #b8bdc7;
  background: #fbfbfc;
  font-size: 15px;
}

.quote-page .form-input:focus,
.quote-page .form-select:focus,
.quote-page .form-textarea:focus {
  outline: 3px solid rgba(0, 53, 198, 0.14);
  outline-offset: 1px;
}

.quote-page .form-textarea {
  min-height: 156px;
  line-height: 1.55;
}

.quote-page .form-textarea::placeholder {
  color: #555b66;
  opacity: 1;
}

.form-helper {
  margin-top: 8px;
  color: #555b66;
  font-size: 12px;
  line-height: 1.5;
}

.form-helper--section {
  margin-top: -10px;
}

.form-select-wrap {
  position: relative;
}

.form-select-wrap .form-select {
  min-height: 48px;
  padding-right: 36px;
  appearance: none;
}

.form-select-wrap svg {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--fg);
  pointer-events: none;
  transform: translateY(-50%);
}

.quote-page .upload-zone {
  padding: 34px 20px;
  border-color: #9eabc0;
  background: #f6f8fb;
}

.quote-page .upload-zone.is-disabled {
  cursor: not-allowed;
}

.quote-page .upload-zone.is-disabled:hover {
  border-color: #9eabc0;
  background: #f6f8fb;
}

.quote-page .upload-icon {
  color: var(--accent);
}

.quote-page .upload-subtext {
  color: #555b66;
}

.quote-submit {
  width: 100%;
  margin-top: 4px;
}

.quote-review-section {
  border-top: 1px solid #34425d;
}

@media (min-width: 901px) and (max-width: 1200px) {
  .quote-workspace {
    margin-right: 94px;
  }
}

@media (max-width: 640px) {
  .quote-hero .faq-hero-copy h1 {
    max-width: 10ch;
  }

  .quote-input-row,
  .quote-input-panel .faq-route-note {
    padding-right: 72px;
  }

  .quote-preview-notice {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .quote-page .quote-form-panel {
    padding: 24px 18px;
  }

  .quote-form-section-heading {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
  }

  .quote-form-section-heading > span {
    width: 34px;
    height: 34px;
  }

  .quote-form-section-heading h3 {
    font-size: 21px;
  }

  .quote-page .form-group-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .quote-page ~ .helpbot {
    right: 6px;
    bottom: 8px;
  }

  .quote-page ~ .helpbot .helpbot-launcher {
    width: 48px;
  }

  .quote-page ~ .helpbot .mascot-figure {
    width: 46px;
    height: 46px;
  }

  .quote-page ~ .helpbot .mascot-shadow {
    width: 30px;
    height: 7px;
  }

  .quote-page ~ .helpbot .helpbot-label {
    display: grid;
    width: 30px;
    height: 24px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    color: transparent;
    font-size: 0;
  }

  .quote-page ~ .helpbot .helpbot-label::after {
    color: var(--accent);
    content: "?";
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 900;
  }
}

/* Collections — a catalog index with a distinct editorial rhythm. */
.collections-page {
  background: var(--surface);
}

.collections-page + .footer {
  margin-top: 0;
  border-top: 1px solid #9eabc0;
}

.collection-hero .faq-hero-copy h1 {
  max-width: 11ch;
}

.collection-hero-feature {
  overflow: hidden;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  transition: transform var(--motion-base) var(--ease-standard);
}

.collection-hero-feature:hover {
  transform: translateY(-4px);
}

.collection-hero-feature:focus-visible,
.collection-jumpbar a:focus-visible,
.collection-custom-cta:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

.collection-hero-media {
  aspect-ratio: 1.5;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  background: #111a2b;
}

.collection-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.collection-hero-feature:hover .collection-hero-media img {
  transform: scale(1.025);
}

.collection-hero-caption {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}

.collection-hero-caption span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-lime, #c1ff72);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.collection-hero-caption h2 {
  margin: 0;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.15;
}

.collection-hero-meta {
  flex: 0 0 auto;
  text-align: right;
}

.collection-hero-meta strong,
.collection-hero-meta small {
  display: block;
}

.collection-hero-meta strong {
  margin-bottom: 4px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 15px;
}

.collection-hero-meta small {
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.collection-jumpbar {
  border-bottom: 1px solid #34425d;
  background: #111a2b;
}

.collection-jumpbar-inner {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.collection-jumpbar-inner > span {
  color: var(--accent-lime, #c1ff72);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.collection-jumpbar-inner > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.collection-jumpbar a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}

.collection-jumpbar a::after {
  margin-left: 10px;
  color: var(--yellow);
  content: "↓";
  font-family: var(--font-mono);
}

.collection-jumpbar a:hover {
  color: var(--yellow);
}

.collection-catalog {
  padding: clamp(36px, 5vw, 56px) 0 clamp(76px, 9vw, 112px);
  background: var(--surface);
  scroll-margin-top: 80px;
}

.collection-catalog-header {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.collection-catalog-header h1 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--fg);
  font-size: clamp(36px, 4vw, 52px);
  font-style: normal;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.collection-catalog-intro-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.collection-catalog-header p {
  max-width: 64ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.collection-catalog-custom-link {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
}

.collection-catalog-custom-link:hover {
  color: var(--accent-hover);
}

.collection-catalog-custom-link:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

.collection-catalog-custom-link:active {
  transform: translateY(1px);
}

.collection-catalog-custom-prompt {
  margin-inline-end: var(--space-1);
}

.collection-catalog .catalog-discovery {
  margin-top: 24px;
}

.collection-category {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
  padding: 58px 0 68px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 90px;
}

.collection-category-header {
  align-self: start;
}

.collection-category-header h2 {
  margin-bottom: 12px;
  color: var(--fg);
  font-size: 28px;
  line-height: 1.12;
  text-wrap: balance;
}

.collection-category-header p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
  text-wrap: pretty;
}

.collection-product-grid {
  display: grid;
  gap: 18px;
}

.collection-product-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collection-product-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collections-page .product-card {
  min-width: 0;
  border-color: #cfd3db;
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: none;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.collections-page .product-card:hover {
  border-color: var(--accent);
  box-shadow: none;
}

.collections-page .product-card:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

.collections-page .product-media {
  border-bottom-color: #cfd3db;
  background: #eef2f7;
}

.collections-page .product-image-fallback {
  background: #eef2f7;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.55;
}

.collections-page .dispatch-badge {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: #111a2b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.product-category-label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.collections-page .product-description {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-wrap: pretty;
}

.collections-page .product-footer {
  border-top-color: #dfe2e8;
}

.collections-page .product-source-note {
  margin-top: 10px;
  color: #555b66;
  font-size: 8px;
  line-height: 1.45;
}

.collection-custom-section {
  padding: clamp(72px, 9vw, 104px) 0;
  background: #111a2b;
  color: #ffffff;
  scroll-margin-top: 80px;
}

.collection-custom-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(48px, 8vw, 104px);
  align-items: start;
}

.collection-custom-intro h2 {
  max-width: 13ch;
  margin-bottom: 16px;
  color: #ffffff;
  font-size: clamp(36px, 4.7vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.collection-custom-intro p {
  max-width: 54ch;
  color: #d4dbea;
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.collection-custom-cta {
  margin-top: 26px;
  border-color: var(--yellow);
  background: var(--yellow);
  color: #111a2b;
}

.collection-custom-cta:hover {
  border-color: #ffffff;
  background: #ffffff;
}

.collection-custom-list {
  margin: 0;
}

.collection-custom-list > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid #34425d;
}

.collection-custom-list > div:last-child {
  border-bottom: 1px solid #34425d;
}

.collection-custom-list dt {
  color: var(--accent-lime, #c1ff72);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}

.collection-custom-list dd {
  color: #d4dbea;
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (min-width: 901px) and (max-width: 1400px) {
  .collection-hero .container,
  .collection-catalog > .container,
  .collection-custom-grid {
    padding-right: 120px;
  }
}

@media (max-width: 1100px) {
  .collection-product-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .collection-custom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .collection-jumpbar-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .collection-jumpbar-inner > div {
    width: 100%;
    gap: 4px 20px;
  }

  .collection-catalog-header,
  .collection-category {
    grid-template-columns: 1fr;
  }

  .collection-catalog-header {
    align-items: start;
    gap: 16px;
  }

  .collection-category {
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .collection-hero-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .collection-hero-meta {
    text-align: left;
  }

  .collection-jumpbar-inner > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .collection-jumpbar a {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid #34425d;
  }

  .collection-catalog {
    padding-top: 28px;
  }

  .collection-catalog-header h1 {
    font-size: clamp(34px, 10vw, 40px);
  }

  .collection-catalog-custom-prompt {
    display: none;
  }

  .collection-product-grid--three,
  .collection-product-grid--two {
    grid-template-columns: 1fr;
  }

  .collection-custom-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .collections-page ~ .helpbot {
    right: 6px;
    bottom: 8px;
  }

  .collections-page ~ .helpbot .helpbot-launcher {
    width: 48px;
  }

  .collections-page ~ .helpbot .mascot-figure {
    width: 46px;
    height: 46px;
  }

  .collections-page ~ .helpbot .mascot-shadow {
    width: 30px;
    height: 7px;
  }

  .collections-page ~ .helpbot .helpbot-label {
    display: grid;
    width: 30px;
    height: 24px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    color: transparent;
    font-size: 0;
  }

  .collections-page ~ .helpbot .helpbot-label::after {
    color: var(--accent);
    content: "?";
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 900;
  }
}

@media (min-width: 360px) and (max-width: 640px) {
  .collections-page .collection-product-grid--three,
  .collections-page .collection-product-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .collections-page .product-card .product-body {
    gap: 8px;
    padding: 12px;
  }

  .collections-page .product-card .product-category-label {
    font-size: 12px;
  }

  .collections-page .product-card .product-title {
    font-size: 16px;
  }

  .collections-page .product-card__comparison {
    min-height: 0;
    gap: 8px;
  }

  .collections-page .product-card__specs {
    flex-basis: 100%;
    font-size: 11px;
  }

  .collections-page .product-card__swatches {
    gap: 5px;
  }

  .collections-page .product-card__swatches li {
    width: 18px;
    height: 18px;
  }

  .collections-page .product-card__commercial {
    min-height: 0;
    padding-top: 8px;
  }

  .collections-page .product-card__price-row {
    gap: 2px 8px;
  }

  .collections-page .product-card__price {
    font-size: 17px;
  }

  .collections-page .product-card__heart {
    width: 30px;
    height: 30px;
  }

  .collections-page .product-card__heart svg {
    width: 16px;
    height: 16px;
  }

  .collections-page .product-card__details-label {
    padding-inline: 6px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-hero-feature,
  .collection-hero-media img,
  .collections-page .product-card {
    transition: none;
  }

  .collection-hero-feature:hover,
  .collection-hero-feature:hover .collection-hero-media img {
    transform: none;
  }
}

/* Homepage — Hallmark Catalogue, restrained and product-first. */
:root {
  --home-color-paper: oklch(98% 0.008 70);
  --home-color-surface: oklch(99% 0.004 70);
  --home-color-surface-cool: oklch(96% 0.012 255);
  --home-color-ink: oklch(22% 0.008 255);
  --home-color-ink-soft: oklch(43% 0.018 255);
  --home-color-rule: oklch(86% 0.012 255);
  --home-color-rule-strong: oklch(72% 0.018 255);
  --home-color-accent: oklch(43% 0.23 264);
  --home-color-accent-hover: oklch(36% 0.22 264);
  --home-color-accent-ink: oklch(98% 0.006 255);
  --home-color-signal: oklch(69% 0.21 42);
  --home-color-lime: oklch(92% 0.18 128);
  --home-color-night: oklch(20% 0.035 260);
  --home-color-night-rule: oklch(35% 0.04 260);
  --home-color-night-muted: oklch(87% 0.025 260);
  --home-rule-hair: 1px;
  --home-space-16: 64px;
  --home-space-18: 72px;
  --home-space-24: 96px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}

html,
body {
  overflow-x: clip;
}

.home-page {
  background: var(--home-color-surface);
}

.home-page + .footer {
  margin-top: 0;
  border-top: var(--home-rule-hair) solid var(--home-color-rule-strong);
}

body:has(.home-page) .btn,
body:has(.home-page) .nav-link,
body:has(.home-page) .footer-link {
  white-space: nowrap;
}

body:has(.home-page) a:focus-visible {
  outline: 3px solid var(--home-color-signal);
  outline-offset: 3px;
}

body:has(.home-page) a:active {
  opacity: 0.92;
}

body:has(.home-page) .btn {
  transition:
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
}

body:has(.home-page) .btn:focus-visible,
body:has(.home-page) .btn-icon-only:focus-visible {
  outline: 3px solid var(--home-color-signal);
  outline-offset: 3px;
}

body:has(.home-page) .btn-primary:active,
body:has(.home-page) .btn-icon-only:active {
  border-color: var(--home-color-accent-hover);
  background: var(--home-color-accent-hover);
}

body:has(.home-page) .btn-icon-only:hover {
  border-color: var(--home-color-accent);
  background: var(--home-color-accent-hover);
}

body:has(.home-page) .btn-secondary {
  border-color: var(--home-color-rule-strong);
  color: var(--home-color-ink);
}

body:has(.home-page) .btn-secondary:hover {
  border-color: var(--home-color-rule-strong);
  background: var(--home-color-surface-cool);
  color: var(--home-color-ink);
}

body:has(.home-page) .btn-secondary:active {
  border-color: var(--home-color-accent);
  background: var(--home-color-surface-cool);
}

body:has(.home-page) .btn:disabled,
body:has(.home-page) .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

body:has(.home-page) .btn-icon-only {
  transition:
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
}

body:has(.home-page) .footer-action {
  transition: opacity var(--dur-micro) var(--ease-out);
}

body:has(.home-page) .footer-action--primary,
body:has(.home-page) .footer-action--primary:hover {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--home-color-night);
  transform: none;
}

body:has(.home-page) .footer-action--secondary,
body:has(.home-page) .footer-action--secondary:hover {
  border-color: var(--home-color-night-rule);
  color: var(--home-color-accent-ink);
  transform: none;
}

body:has(.home-page) .footer-action:hover {
  opacity: 0.82;
}

body:has(.home-page) .footer-link {
  transition: color var(--dur-micro) var(--ease-out);
}

body:has(.home-page) .footer-link:hover {
  transform: none;
}

.home-shop-hero {
  padding-block: var(--space-8) var(--home-space-16);
  border-bottom-color: var(--home-color-rule);
  background: var(--home-color-paper);
}

.home-hero-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: var(--home-color-accent);
  box-shadow: 0 28px 72px rgba(15, 29, 93, 0.18);
}

.home-hero-stage::before {
  position: absolute;
  z-index: -1;
  inset-block-start: -0.18em;
  inset-inline-end: -0.04em;
  color: color-mix(in oklab, var(--home-color-accent-ink), transparent 94%);
  content: "PM3D";
  font-family: var(--font-display);
  font-size: clamp(160px, 27vw, 360px);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.9;
  pointer-events: none;
}

.home-hero-stage::after {
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline: clamp(24px, 5vw, 64px);
  height: 6px;
  background: var(--yellow);
  content: "";
}

.home-hero-copy {
  min-width: 0;
}

.home-hero-copy h1 {
  max-width: 10ch;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--home-color-accent-ink);
  font-size: clamp(42px, 10.8vw, 72px);
  font-style: normal;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.home-hero-copy .lead {
  max-width: 58ch;
  margin-top: var(--space-5);
  color: color-mix(in oklab, var(--home-color-accent-ink), var(--home-color-accent) 18%);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.home-hero-copy .actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 560px;
  margin-top: var(--space-6);
}

.home-shop-hero .btn-primary,
.home-shop-hero .btn-primary:hover {
  border-color: var(--theme-action);
  background: var(--theme-action);
  color: var(--theme-action-text);
}

.home-shop-hero .btn-primary:hover {
  border-color: var(--theme-action-hover);
  background: var(--theme-action-hover);
}

body:has(.home-page) .home-shop-hero .btn-secondary,
body:has(.home-page) .home-shop-hero .btn-secondary:hover {
  border-color: color-mix(in oklab, var(--home-color-accent-ink), transparent 40%);
  background: transparent;
  color: var(--home-color-accent-ink);
}

body:has(.home-page) .home-shop-hero .btn-secondary:hover {
  background: color-mix(in oklab, var(--home-color-accent-ink), transparent 90%);
}

.home-hero-feature {
  display: block;
  min-width: 0;
  border-radius: var(--radius-md);
  background: var(--home-color-surface);
  color: var(--home-color-ink);
  box-shadow: 0 24px 56px rgba(6, 14, 59, 0.32);
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.home-hero-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 64px rgba(6, 14, 59, 0.38);
}

.home-hero-feature-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--home-color-surface-cool);
}

.home-hero-feature-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

.home-hero-feature:hover .home-hero-feature-media img,
.home-hero-feature:focus-visible .home-hero-feature-media img {
  transform: scale(1.02);
}

.home-hero-feature:focus-visible,
.home-order-link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.home-hero-feature-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  max-width: 13ch;
  margin: auto;
  place-items: center;
  color: var(--home-color-ink-soft);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

.home-hero-feature-media figcaption {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  max-width: 62%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--home-color-night);
  color: var(--home-color-accent-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.home-hero-feature-state {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  max-width: calc(38% - var(--space-4));
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--home-color-night);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: end;
  text-transform: uppercase;
}

.home-hero-feature-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  background: var(--home-color-surface);
}

.home-hero-feature-name {
  min-width: 0;
}

.home-hero-feature-name > span,
.home-hero-feature-action span {
  display: block;
  color: var(--home-color-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-hero-feature-meta h2 {
  min-width: 0;
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--home-color-ink);
  font-size: var(--text-lg);
  font-style: normal;
  line-height: 1.15;
  text-wrap: balance;
}

.home-hero-feature-action {
  text-align: end;
}

.home-hero-feature-action strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--home-color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  white-space: nowrap;
}

.home-hero-feature-action span {
  color: var(--home-color-ink-soft);
  white-space: nowrap;
}

.home-hero-stage {
  grid-template-areas:
    "copy"
    "gallery"
    "actions"
    "cues";
  align-items: stretch;
}

.home-hero-copy {
  grid-area: copy;
  align-self: center;
}

.home-hero-collection {
  display: inline-flex;
  margin-bottom: var(--space-4);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--home-color-accent-ink), transparent 88%);
  color: var(--home-color-accent-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.home-hero-copy h1 {
  max-width: 11ch;
  font-size: clamp(42px, 10vw, 72px);
}

.home-hero-copy .lead {
  max-width: 46ch;
}

.home-hero-offer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}

.home-hero-price {
  color: var(--home-color-accent-ink);
  font-size: clamp(25px, 4vw, 34px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.home-hero-availability {
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--home-color-night);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.home-hero-actions {
  grid-area: actions;
  display: flex;
  max-width: 520px;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-3);
}

.home-hero-actions .btn {
  width: 100%;
}

.home-hero-supporting-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.home-hero-secondary-link {
  color: var(--home-color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration-color: color-mix(in oklab, currentColor, transparent 55%);
  text-underline-offset: 4px;
}

.home-hero-secondary-link:hover {
  text-decoration-color: currentColor;
}

.home-hero-secondary-link:focus-visible,
.home-hero-gallery button:focus-visible,
.home-hero-gallery-viewport:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.home-hero-gallery {
  grid-area: gallery;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--home-color-surface);
  box-shadow: 0 24px 56px rgba(6, 14, 59, 0.32);
}

.home-hero-gallery-viewport {
  display: flex;
  min-width: 0;
  aspect-ratio: 6 / 5;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.home-hero-gallery-viewport::-webkit-scrollbar {
  display: none;
}

.home-hero-gallery-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--home-color-surface-cool);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.home-hero-gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-gallery-controls {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background: var(--home-color-surface);
}

.home-hero-gallery-arrows {
  display: flex;
  gap: var(--space-2);
}

.home-hero-gallery-arrows button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--home-color-rule);
  border-radius: 50%;
  place-items: center;
  background: var(--home-color-surface);
  color: var(--home-color-ink);
  cursor: pointer;
  font-size: 18px;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.home-hero-gallery-arrows button:hover:not(:disabled) {
  background: var(--home-color-night);
  color: var(--home-color-accent-ink);
}

.home-hero-gallery-arrows button:disabled {
  cursor: default;
  opacity: 0.32;
}

.home-hero-gallery-arrows svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.home-hero-gallery-toggle {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--home-color-rule);
  border-radius: 50%;
  place-items: center;
  background: var(--home-color-surface);
  color: var(--home-color-ink);
  cursor: pointer;
}

.home-hero-gallery-toggle[hidden] {
  display: none;
}

.home-hero-gallery-toggle:hover {
  background: var(--home-color-night);
  color: var(--home-color-accent-ink);
}

.home-hero-gallery-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.home-hero-gallery-toggle .home-hero-gallery-play-icon {
  display: none;
  fill: currentColor;
  stroke: none;
}

.home-hero-gallery-toggle[data-paused] .home-hero-gallery-pause-icon {
  display: none;
}

.home-hero-gallery-toggle[data-paused] .home-hero-gallery-play-icon {
  display: block;
}

.home-hero-gallery-dots {
  display: flex;
  gap: 0;
  justify-content: center;
}

.home-hero-gallery-dots button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.home-hero-gallery-dots button::after {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--home-color-ink), transparent 72%);
  content: "";
}

.home-hero-gallery-dots button[aria-pressed="true"]::after {
  background: var(--home-color-accent);
}

.home-hero-gallery-status {
  min-width: 6.5em;
  margin: 0;
  color: var(--home-color-ink-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: end;
}

.home-shop-section {
  padding-block: var(--home-space-16) var(--home-space-18);
  background: var(--home-color-surface);
  scroll-margin-top: var(--home-space-18);
}

.home-shop-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: var(--home-rule-hair) solid var(--home-color-rule);
}

.home-shop-header h2 {
  max-width: 13ch;
  min-width: 0;
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
  color: var(--home-color-ink);
  font-size: clamp(36px, 10vw, 48px);
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.home-shop-header p {
  max-width: 62ch;
  color: var(--home-color-ink-soft);
  font-size: var(--text-base);
  line-height: 1.6;
  text-wrap: pretty;
}

.home-shop-header .btn {
  flex: 0 0 auto;
  width: 100%;
  white-space: nowrap;
}

.home-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.home-page .product-card {
  min-width: 0;
  border: var(--home-rule-hair) solid var(--home-color-rule-strong);
  border-radius: var(--radius-md);
  background: var(--home-color-surface);
  box-shadow: none;
  transition: border-color var(--dur-short) var(--ease-out);
}

.home-page .product-card:hover {
  border-color: var(--home-color-rule-strong);
  box-shadow: none;
}

.home-page .product-card:active {
  border-color: var(--home-color-accent-hover);
}

.home-page .product-card:focus-visible {
  outline: 3px solid var(--home-color-signal);
  outline-offset: 3px;
}

.home-page .product-media {
  border-bottom-color: var(--home-color-rule-strong);
  background: var(--home-color-surface-cool);
}

.home-page .product-image-fallback {
  background: var(--home-color-surface-cool);
  color: var(--home-color-accent);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.home-page .dispatch-badge {
  border: var(--home-rule-hair) solid var(--home-color-night-rule);
  background: var(--home-color-night);
  color: var(--home-color-accent-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-page .product-description {
  margin-bottom: var(--space-5);
  color: var(--home-color-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

.home-page .product-footer {
  border-top-color: var(--home-color-rule);
}

.home-page .product-source-note {
  margin-top: var(--space-2);
  color: var(--home-color-ink-soft);
  font-size: 10px;
  line-height: 1.45;
}

.home-custom-band {
  border-block: var(--home-rule-hair) solid var(--home-color-rule-strong);
  background: var(--home-color-surface-cool);
}

.home-custom-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-12);
}

.home-custom-band h2 {
  max-width: 14ch;
  min-width: 0;
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
  color: var(--home-color-ink);
  font-size: clamp(30px, 8vw, 42px);
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.home-custom-band p {
  max-width: 54ch;
  color: var(--home-color-ink-soft);
  font-size: var(--text-base);
  line-height: 1.6;
  text-wrap: pretty;
}

.home-custom-band ul {
  padding: 0;
  list-style: none;
}

.home-custom-band li {
  position: relative;
  padding-block: var(--space-3);
  padding-inline-start: var(--space-6);
  border-top: var(--home-rule-hair) solid var(--home-color-rule-strong);
  color: var(--home-color-ink);
  font-size: 14px;
  line-height: 1.5;
}

.home-custom-band li:last-child {
  border-bottom: var(--home-rule-hair) solid var(--home-color-rule-strong);
}

.home-custom-band li::before {
  position: absolute;
  top: var(--space-4);
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  background: var(--home-color-signal);
  content: "";
}

.home-custom-band .btn {
  width: 100%;
  white-space: nowrap;
}

.home-order-section {
  padding-block: var(--home-space-16) var(--home-space-18);
  background: var(--home-color-night);
  color: var(--home-color-accent-ink);
}

.home-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.home-order-intro h2 {
  max-width: 13ch;
  min-width: 0;
  margin-bottom: var(--space-4);
  overflow-wrap: anywhere;
  color: var(--home-color-accent-ink);
  font-size: clamp(36px, 10vw, 54px);
  font-style: normal;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.home-order-intro p {
  max-width: 50ch;
  color: var(--home-color-night-muted);
  font-size: var(--text-base);
  line-height: 1.65;
  text-wrap: pretty;
}

.home-order-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: var(--space-4);
  color: var(--home-color-lime);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-order-link::after {
  margin-inline-start: var(--space-2);
  content: "→";
}

.home-order-link:hover,
.home-order-link:focus-visible {
  color: var(--home-color-accent-ink);
}

.home-order-link:active {
  color: var(--home-color-accent-ink);
}

.home-order-link:focus-visible {
  outline: 3px solid var(--home-color-lime);
  outline-offset: 3px;
}

.home-order-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-order-list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: var(--home-rule-hair) solid var(--home-color-night-rule);
}

.home-order-list li:last-child {
  border-bottom: var(--home-rule-hair) solid var(--home-color-night-rule);
}

.home-order-list > li > span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: var(--home-rule-hair) solid var(--home-color-lime);
  border-radius: var(--radius-sm);
  color: var(--home-color-lime);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.home-order-list h3 {
  min-width: 0;
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
  color: var(--home-color-accent-ink);
  font-size: 20px;
  font-style: normal;
  line-height: 1.25;
  text-wrap: balance;
}

.home-order-list p {
  max-width: 64ch;
  color: var(--home-color-night-muted);
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

.home-page ~ .helpbot {
  right: 16px;
  bottom: 16px;
}

.home-page ~ .helpbot .helpbot-launcher {
  width: 44px;
  height: 44px;
}

.home-page ~ .helpbot .mascot-figure {
  display: block;
  width: 44px;
  height: 44px;
}

.home-page ~ .helpbot .mascot-shadow,
.home-page ~ .helpbot .helpbot-label {
  display: none;
}

@media (min-width: 48rem) {
  .home-shop-header {
    align-items: flex-end;
    flex-direction: row;
  }

  .home-shop-header .btn {
    width: auto;
  }

  .home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-custom-band-inner {
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  }

  .home-custom-band .btn {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
  }
}

@media (min-width: 56.25rem) {
  .home-shop-hero {
    padding-block: var(--space-12) var(--home-space-18);
  }

  .home-hero-stage {
    grid-template-areas:
      "copy gallery"
      "actions gallery"
      "cues cues";
    grid-template-columns: minmax(0, 42fr) minmax(400px, 58fr);
    column-gap: clamp(var(--space-8), 4vw, var(--space-12));
    row-gap: var(--space-6);
  }

  .home-hero-stage--copy-only {
    grid-template-areas:
      "copy"
      "cues";
    grid-template-columns: minmax(0, 760px);
  }

  .home-hero-copy h1 {
    font-size: clamp(58px, 5vw, 72px);
  }

  .home-hero-actions .btn {
    width: auto;
    min-width: 0;
  }

  .home-hero-actions {
    align-self: start;
  }

  .home-product-grid--dedupe-desktop > .product-card:first-child {
    display: none;
  }

  .home-order-grid {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--space-12), 8vw, var(--home-space-24));
  }
}

@media (min-width: 68.75rem) {
  .home-shop-section {
    padding-block: var(--home-space-18) var(--home-space-24);
  }

  .home-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-custom-band-inner {
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr) auto;
    gap: clamp(var(--space-8), 5vw, var(--home-space-16));
  }

  .home-custom-band .btn {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .home-hero-actions .btn {
    width: calc(100% - 18px);
  }

  .home-hero-gallery-viewport {
    aspect-ratio: 16 / 9;
  }

  .home-hero-gallery-controls {
    grid-template-columns: auto 1fr auto;
  }

  .home-hero-gallery-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .home-hero-supporting-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-hero-feature-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero-feature-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: start;
  }

  .home-hero-feature-action strong {
    margin-bottom: 0;
  }

  .home-page ~ .helpbot {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-feature,
  .home-hero-feature-media img,
  .home-page .product-card,
  .home-page .product-image {
    transition: none;
  }

  .home-hero-feature:hover .home-hero-feature-media img,
  .home-hero-feature:focus-visible .home-hero-feature-media img,
  .home-page .product-card:hover .product-image,
  .home-page .product-card:focus-visible .product-image {
    transform: none;
  }
}

/* Homepage hero: editorial copy and two original catalogue images. */
.home-shop-hero {
  padding-block: clamp(24px, 3vw, 44px) clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--home-color-rule);
  background: var(--theme-canvas);
}

.home-shop-hero > .container { max-width: 1440px; }

.home-hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 28px;
  min-width: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-hero-stage::before,
.home-hero-stage::after { content: none; }

.home-hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}

.home-hero-copy { grid-area: auto; min-width: 0; padding: 0; }

.home-hero-eyebrow {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  color: var(--theme-text);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.home-hero-copy h1 {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 7.5vw, 108px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: initial;
}

.home-hero-copy h1 > span { display: block; }

.home-hero-copy .lead {
  max-width: 48ch;
  margin: 16px 0 0;
  color: var(--theme-text);
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.4;
}

.home-hero-actions {
  grid-area: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-self: end;
  gap: 16px 24px;
  align-items: center;
  margin: 0;
  padding: 0;
  max-width: none;
}

/* The hero changes button colour only; .btn owns its component styling. */
.home-hero-actions .home-hero-shop {
  background: var(--theme-yellow);
  color: var(--theme-yellow-text);
}

.home-hero-shop:hover { background: var(--theme-yellow-hover); }
.home-hero-shop:active { background: var(--theme-yellow-active); }
.home-hero-actions .home-hero-secondary-link { margin: 0; font-size: 16px; }

.home-hero-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: var(--theme-hero-media-surface);
}

.home-hero-products--single { grid-template-columns: minmax(0, 1fr); }
.home-hero-products--single .home-hero-product { width: 100%; max-width: 700px; justify-self: center; }
.home-hero-product { min-width: 0; margin: 0; }

.home-hero-product-image {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--theme-hero-media-surface);
}

.home-hero-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-hero-product-caption {
  padding: 12px 20px 20px;
  background: var(--theme-hero-media-surface);
  color: var(--theme-hero-media-text);
  text-align: center;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
}

.home-hero-product-caption a { color: inherit; text-decoration: none; }
.home-hero-product-caption a:hover { text-decoration: underline; }
.home-hero-product-caption small { display: block; margin-top: 4px; font-size: 12px; color: var(--theme-hero-media-muted); }
.home-hero-product-status { display: block; margin-top: 8px; font-size: 14px; }

.home-shop-hero a:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 4px; }
.home-hero-product-image:focus-visible { outline-offset: -4px; }

@media (min-width: 900px) {
  .home-hero-intro { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
  .home-hero-actions { justify-content: flex-end; padding-bottom: 48px; }
}

/* Keep the editorial pair visible on shorter laptop screens. */
@media (min-width: 900px) and (max-height: 850px) {
  .home-shop-hero { padding-block: 24px; }
  .home-shop-hero > .container { max-width: min(1440px, 130vh); }
  .home-hero-stage { gap: 20px; }
  .home-hero-copy h1 { font-size: clamp(44px, 10vh, 85px); }
  .home-hero-copy .lead { font-size: 20px; }
  .home-hero-actions { padding-bottom: 32px; }
  .home-hero-product-caption { padding: 10px 18px 16px; font-size: 16px; }
}

@media (max-width: 599px) {
  .home-shop-hero > .container { padding-inline: 20px; }
  .home-hero-copy h1 { font-size: clamp(40px, 11.5vw, 64px); }
  .home-hero-products { grid-template-columns: minmax(0, 1fr); }
  .home-hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .home-hero-actions .home-hero-shop { width: 100%; }
  .home-hero-actions .home-hero-secondary-link { align-self: flex-start; }
}

/* Hallmark · product detail: Split Studio / H2 Split Diptych · tone: technical
 * theme: existing PM3D Industrial Artisan tokens · enrichment: real product photography
 * pre-emit critique: P4 H4 E5 S5 R5 V4 · contrast: pass (light and dark)
 * responsive: pass (320, 375, 414, 768, 974, 1024, 1200, 1440px rendered)
 */
/* Product detail: catalog-first ordering language */
.product-page {
  background: var(--bg);
}

.product-page + .footer {
  margin-top: 0;
  border-top-color: var(--yellow);
}

.product-showcase {
  padding: 30px 0 76px;
  border-bottom: 1px solid var(--border);
  background: rgba(252, 249, 248, 0.94);
}

.product-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}

.product-breadcrumbs li {
  color: inherit;
}

.product-breadcrumbs li:not(:last-child)::after {
  margin-left: 8px;
  color: #9b9b98;
  content: "/";
}

.product-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.product-breadcrumbs a:hover,
.product-breadcrumbs a:focus-visible {
  color: var(--accent);
}

.product-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: clamp(36px, 6vw, 82px);
  align-items: start;
}

.product-showcase-media {
  min-width: 0;
}

.product-showcase-art {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: transparent;
}

.product-showcase-art.is-fallback {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
}

.product-showcase-art.is-fallback::before,
.product-showcase-art.is-fallback::after {
  position: absolute;
  z-index: 0;
  border: 1px solid #d9d6cf;
  content: "";
  pointer-events: none;
}

.product-showcase-art.is-fallback::before {
  inset: 11% 18%;
}

.product-showcase-art.is-fallback::after {
  inset: 18% 11%;
}

.product-showcase-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.product-showcase-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  max-width: 16ch;
  margin: auto;
  place-items: center;
  color: #2e3542;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}

.product-showcase-badge {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 8px 10px;
  border: 1px solid #d8b900;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: #17233a;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-gallery-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  translate: 0 -50%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform 100ms var(--ease-standard);
}

.product-gallery-arrow--previous {
  left: 10px;
}

.product-gallery-arrow--next {
  right: 10px;
}

.product-gallery-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

.product-gallery-arrow:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.product-gallery-arrow:active {
  transform: translateY(1px);
}

.product-gallery-arrow:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .product-gallery-arrow:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-on);
  }
}

.product-object-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px 0;
}

.product-object-caption span,
.product-object-caption strong {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.product-object-caption span {
  color: var(--muted);
}

.product-object-caption strong {
  color: var(--accent);
}

.product-purchase-panel {
  min-width: 0;
  padding-top: 18px;
}

.product-purchase-summary,
.product-purchase-workspace {
  min-width: 0;
}

.product-purchase-panel .eyebrow {
  margin-bottom: 14px;
  color: var(--accent-orange);
}

.product-purchase-panel h1 {
  max-width: 10ch;
  margin-bottom: 18px;
  font-size: clamp(44px, 5.4vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.product-showcase-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 20px;
}

.product-showcase-price strong {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.product-price-prefix {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.product-showcase-price span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.product-showcase-description {
  max-width: 52ch;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.product-listing-content {
  display: grid;
  gap: 38px;
  margin-top: 64px;
  padding: 48px 0 8px;
  border-top: 1px solid var(--border);
}

.product-listing-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: start;
}

.product-listing-intro h2 {
  max-width: 9ch;
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.product-listing-intro > p {
  max-width: 68ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}

.product-listing-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-listing-highlights article {
  padding: 26px clamp(18px, 3vw, 34px) 30px 0;
}

.product-listing-highlights article + article {
  padding-left: clamp(18px, 3vw, 34px);
  border-left: 1px solid var(--border);
}

.product-listing-highlights h3,
.product-listing-guidance h3 {
  margin-bottom: 10px;
  color: var(--fg);
  font-size: 18px;
  line-height: 1.25;
}

.product-listing-highlights p,
.product-listing-guidance p,
.product-listing-guidance li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.product-listing-guidance {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: start;
}

.product-listing-guidance ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-listing-guidance li::before {
  margin-right: 8px;
  color: var(--accent);
  content: "•";
}

.product-review-note {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 13px;
  margin-bottom: 30px;
  padding: 17px 18px;
  border: 1px solid #cfd9f2;
  border-radius: var(--radius-sm);
  background: #f1f5ff;
}

.product-review-note > span {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  outline: 1px solid var(--accent);
}

.product-review-note strong {
  display: block;
  margin-bottom: 5px;
  color: #17233a;
  font-size: 13px;
}

.product-review-note p {
  color: #44516a;
  font-size: 12px;
  line-height: 1.55;
}

.product-detail-list {
  margin: 0 0 28px;
}

.product-detail-list > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1fr);
  gap: 22px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
}

.product-detail-list > div:last-child {
  border-bottom: 1px solid var(--border);
}

.product-detail-list.is-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.product-detail-list.is-compact > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 12px 0;
}

.product-detail-list dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-detail-list dd {
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.product-purchase-actions {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
}

.product-purchase-status {
  margin: 13px 0 23px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.55;
  text-transform: uppercase;
}

.product-review-section {
  padding: 76px 0;
  background: #101b2e;
}

.product-review-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(50px, 8vw, 110px);
  align-items: start;
}

.product-review-intro .eyebrow {
  color: var(--accent-lime, #c1ff72);
}

.product-review-intro h2 {
  max-width: 10ch;
  margin-bottom: 16px;
  color: #ffffff;
  font-size: clamp(38px, 4.8vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.product-review-intro p {
  max-width: 50ch;
  color: #d4dbea;
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}

.product-review-link {
  display: inline-flex;
  margin-top: 24px;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}

.product-review-link::after {
  margin-left: 10px;
  content: "→";
}

.product-review-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-review-list li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid #34425d;
}

.product-review-list li:last-child {
  border-bottom: 1px solid #34425d;
}

.product-review-list > li > span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-lime, #c1ff72);
  border-radius: var(--radius-sm);
  color: var(--accent-lime, #c1ff72);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.product-review-list h3 {
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.25;
}

.product-review-list p {
  max-width: 62ch;
  color: #d4dbea;
  font-size: 13px;
  line-height: 1.65;
  text-wrap: pretty;
}

.product-related-section {
  padding: 78px 0 84px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}

.product-related-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 32px;
}

.product-related-header h2 {
  margin-bottom: 8px;
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: -0.035em;
}

.product-related-header p {
  max-width: 58ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.product-related-header .btn {
  width: auto;
  flex: 0 0 auto;
}

.product-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-page .product-card {
  min-width: 0;
  border-color: var(--border);
  box-shadow: none;
}

.product-page .product-card:hover {
  border-color: #aeb9d8;
  box-shadow: none;
}

.product-next-step {
  border-top: 0;
  background: #e9edf5;
}

@media (min-width: 901px) and (max-width: 1400px) {
  .product-showcase > .container,
  .product-review-grid,
  .product-related-section > .container,
  .product-next-step .container {
    padding-right: var(--container-gutter);
  }
}

@media (min-width: 48rem) and (max-width: 75rem) {
  .product-showcase-grid {
    grid-template-areas:
      "media summary"
      "workspace workspace";
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1fr);
    gap: clamp(24px, 3vw, 32px) var(--space-6);
  }

  .product-showcase-media {
    grid-area: media;
  }

  .product-purchase-panel {
    display: contents;
    padding-top: 0;
  }

  .product-purchase-summary {
    grid-area: summary;
  }

  .product-purchase-workspace {
    grid-area: workspace;
  }

  .product-purchase-workspace > .product-config-form:first-child {
    margin-top: 0;
  }

  .product-purchase-panel h1 {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(38px, 5vw, 48px);
    line-height: 1.02;
  }
}

@media (max-width: 980px) {
  .product-review-grid {
    grid-template-columns: 1fr;
  }

  .product-review-grid {
    gap: 40px;
  }

  .product-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .product-showcase-grid {
    grid-template-areas:
      "media"
      "summary"
      "workspace";
    grid-template-columns: minmax(0, 1fr);
  }

  .product-showcase-media {
    grid-area: media;
  }

  .product-purchase-panel {
    display: contents;
    padding-top: 0;
  }

  .product-purchase-summary {
    grid-area: summary;
  }

  .product-purchase-workspace {
    grid-area: workspace;
  }

  .product-purchase-workspace > .product-config-form:first-child {
    margin-top: 0;
  }

  .product-purchase-panel h1 {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(38px, 6vw, 46px);
    line-height: 1.02;
    text-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .product-showcase {
    padding: 22px 0 52px;
  }

  .product-breadcrumbs {
    overflow: hidden;
    margin-bottom: 20px;
    white-space: nowrap;
  }

  .product-breadcrumbs li:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-showcase-grid {
    gap: 28px;
  }

  .product-object-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .product-purchase-panel {
    padding-top: 0;
  }

  .product-purchase-panel h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(38px, 11vw, 50px);
    text-wrap: wrap;
  }

  .product-detail-list > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .product-detail-list.is-compact {
    grid-template-columns: 1fr;
  }

  .product-purchase-actions,
  .product-related-grid {
    grid-template-columns: 1fr;
  }

  .product-listing-content {
    gap: 30px;
    margin-top: 44px;
    padding-top: 38px;
  }

  .product-listing-intro,
  .product-listing-guidance,
  .product-listing-highlights {
    grid-template-columns: 1fr;
  }

  .product-listing-highlights article,
  .product-listing-highlights article + article {
    padding: 22px 0;
    border-left: 0;
  }

  .product-listing-highlights article + article {
    border-top: 1px solid var(--border);
  }

  .product-purchase-actions .btn {
    width: 100%;
  }

  .product-review-section,
  .product-related-section {
    padding: 58px 0;
  }

  .product-related-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-related-header .btn {
    width: 100%;
  }

  .product-review-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
  }

  .product-review-list > li > span {
    width: 34px;
    height: 34px;
  }

  .product-page ~ .helpbot {
    right: 6px;
    bottom: 8px;
  }

  .product-page ~ .helpbot .helpbot-launcher {
    width: 48px;
  }

  .product-page ~ .helpbot .mascot-figure {
    width: 46px;
    height: 46px;
  }

  .product-page ~ .helpbot .mascot-shadow {
    width: 30px;
    height: 7px;
  }

  .product-page ~ .helpbot .helpbot-label {
    display: grid;
    width: 30px;
    height: 24px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    color: transparent;
    font-size: 0;
  }

  .product-page ~ .helpbot .helpbot-label::after {
    color: var(--accent);
    content: "?";
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 900;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-gallery-arrow {
    transition: none;
  }
}