/*
 * platform-bundle - hand-concatenated CSS bundle (no build step).
 * Source order preserved; edit the source files, then regenerate.
 * Files: fonts.css, brand.css, tokens.css, base.css, layout.css, navigation.css, footer.css, components.css, commerce.css, plan-pricing.css, platform.css, activation.css
 */

/* ===== fonts.css ===== */
/**
 * Self-hosted Inter + Space Grotesk (latin). No Google Fonts CDN.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-3.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-3.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-3.woff2") format("woff2");
}

/* ===== brand.css ===== */
/**
 * Pufaan Brand foundation — single source of truth.
 * Sourced from the Brand Kit (Swiss · Minimal · Luxury · Natural).
 *
 * All product surfaces map semantic tokens in tokens.css to these values.
 * Brand Kit --bk-* aliases also resolve here so both stacks stay in sync.
 */

:root {
  /* Brand core */
  --brand-bg: #f6f4ef;
  --brand-bg-elevated: #fffcf7;
  --brand-bg-muted: #ebe7df;
  --brand-primary: #1e3a2f;
  --brand-primary-hover: #163029;
  --brand-primary-active: #0f241c;
  --brand-on-primary: #ffffff;
  --brand-secondary: #a17f5a;
  --brand-secondary-soft: rgba(161, 127, 90, 0.14);
  --brand-text: #1a1a1a;
  --brand-text-muted: #5c5a55;
  --brand-text-faint: #8a8680;
  --brand-border: rgba(26, 26, 26, 0.08);
  --brand-border-strong: rgba(26, 26, 26, 0.16);
  --brand-radius: 20px;
  --brand-radius-sm: 12px;
  --brand-shadow: 0 1px 2px rgba(26, 26, 26, 0.04),
    0 12px 32px rgba(30, 58, 47, 0.06);
  --brand-shadow-hover: 0 2px 4px rgba(26, 26, 26, 0.05),
    0 18px 40px rgba(30, 58, 47, 0.1);
  --brand-focus: 0 0 0 2px var(--brand-bg), 0 0 0 4px var(--brand-primary);
  --brand-max: 1200px;

  /* Brand Kit aliases (do not redesign Brand Kit — map to the same foundation) */
  --bk-bg: var(--brand-bg);
  --bk-bg-elevated: var(--brand-bg-elevated);
  --bk-bg-muted: var(--brand-bg-muted);
  --bk-primary: var(--brand-primary);
  --bk-primary-hover: var(--brand-primary-hover);
  --bk-secondary: var(--brand-secondary);
  --bk-secondary-soft: var(--brand-secondary-soft);
  --bk-text: var(--brand-text);
  --bk-text-muted: var(--brand-text-muted);
  --bk-text-faint: var(--brand-text-faint);
  --bk-border: var(--brand-border);
  --bk-border-strong: var(--brand-border-strong);
  --bk-radius: var(--brand-radius);
  --bk-radius-sm: var(--brand-radius-sm);
  --bk-shadow: var(--brand-shadow);
  --bk-shadow-hover: var(--brand-shadow-hover);
  --bk-focus: var(--brand-focus);
  --bk-max: var(--brand-max);
  --bk-font-display: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  --bk-font-body: var(--font-body, Inter, system-ui, sans-serif);
  --bk-gutter: var(--gutter, clamp(1.25rem, 4vw, 2.5rem));
}

/* ===== tokens.css ===== */
/**
 * Pufaan design tokens — semantic layer mapped to Brand Kit foundation.
 * Prefer semantic tokens (--color-*, --space-*) in components.
 * Do not redefine brand hex values here — edit brand.css.
 */

:root {
  color-scheme: light;

  /* Primary — Brand Kit forest */
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-hover);
  --color-primary-active: var(--brand-primary-active);
  --color-on-primary: var(--brand-on-primary);

  /* Surfaces — warm paper canvas */
  --color-white: #ffffff;
  --color-secondary: var(--brand-bg);
  --color-secondary-muted: var(--brand-bg-muted);
  --color-bg-canvas: var(--brand-bg);
  --color-bg-elevated: var(--brand-bg-elevated);
  --color-bg-subtle: var(--brand-bg-muted);
  --color-accent: var(--brand-secondary);
  --color-accent-soft: var(--brand-secondary-soft);
  --color-on-secondary: var(--brand-text);
  --color-on-white: var(--brand-text);

  /* Neutrals */
  --color-gray-50: #fafaf9;
  --color-gray-100: #f4f4f3;
  --color-gray-200: #e8e8e6;
  --color-gray-300: #d4d4d1;
  --color-gray-400: #a3a3a0;
  --color-gray-500: #737370;
  --color-gray-600: var(--brand-text-muted);
  --color-gray-700: #3d3d3a;
  --color-gray-800: #262624;
  --color-gray-900: #141413;
  --color-gray-950: #0a0a09;

  /* Text */
  --color-text-primary: var(--brand-text);
  --color-text-secondary: var(--brand-text-muted);
  /* Caption / meta — distinct from secondary for hierarchy; still AA on warm paper */
  --color-text-tertiary: var(--brand-text-faint);
  --color-text-disabled: #a3a3a0;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border-subtle: var(--brand-border);
  --color-border-default: var(--brand-border-strong);
  --color-border-strong: rgba(26, 26, 26, 0.28);
  --color-border-focus: var(--brand-primary);
  --color-border-error: #b42318;
  --color-border-success: #1a7a4c;

  /* Links — same forest family as primary */
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-primary-hover);
  --color-link-visited: #3d5a4f;
  --color-link-underline: rgba(30, 58, 47, 0.35);
  --color-text-link: var(--color-link);
  --color-text-link-hover: var(--color-link-hover);

  /* Status */
  --color-success: #1a7a4c;
  --color-success-bg: #e8f5ee;
  --color-success-border: #a8d5bc;
  --color-warning: #9a6700;
  --color-warning-bg: #fbf3e0;
  --color-warning-border: #e8c97a;
  --color-error: #b42318;
  --color-error-bg: #fdecea;
  --color-error-border: #f0b4ae;

  /* Hover / focus */
  --color-hover-surface: rgba(30, 58, 47, 0.05);
  --color-hover-surface-strong: rgba(30, 58, 47, 0.09);
  --color-hover-overlay: rgba(30, 58, 47, 0.04);
  --color-secondary-btn-hover: var(--brand-bg-muted);
  --color-focus-ring: var(--brand-primary);

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-display: 2.5rem;
  --text-h1: 2rem;
  --text-h2: 1.75rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-h5: 1rem;
  --text-body-lg: 1rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-button: 0.875rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;

  /* Section rhythm — one system across marketing pages */
  --section-pad-sm: var(--space-6);
  --section-pad-md: var(--space-8);
  --section-pad-lg: var(--space-10);
  --section-pad-xl: var(--space-12);
  --hero-pad-block: var(--space-6) var(--space-8);
  --layout-measure: 48rem;
  --layout-measure-wide: 56rem;

  /* Radius — aligned to design system (buttons 8px, inputs/cards 12px, media 20px) */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: var(--brand-radius);
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(30, 58, 47, 0.04);
  --shadow-sm: var(--brand-shadow);
  --shadow-md: var(--brand-shadow-hover);
  --shadow-focus: var(--brand-focus);

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: var(--brand-max);
  --container-2xl: 1440px;
  --gutter: 16px;
  --header-height: 64px;
  --announcement-height: 40px;
  --grid-columns: 4;
  --grid-gutter: 16px;
  --z-header: 100;
  --z-announcement: 110;
  --z-mobile-menu: 200;
  --z-skip-link: 300;
}

@media (min-width: 768px) {
  :root {
    --text-display: 3rem;
    --text-h1: 2.5rem;
    --text-h2: 2rem;
    --text-h3: 1.5rem;
    --text-h4: 1.25rem;
    --text-h5: 1.0625rem;
    --text-body-lg: 1.0625rem;
    --gutter: 24px;
    --grid-columns: 8;
    --grid-gutter: 24px;
    --hero-pad-block: var(--space-8) var(--space-10);
    --section-pad-sm: var(--space-8);
    --section-pad-md: var(--space-10);
    --section-pad-lg: var(--space-12);
    --section-pad-xl: var(--space-16);
  }
}

@media (min-width: 1024px) {
  :root {
    --text-display: 4rem;
    --text-h1: 3rem;
    --text-h2: 2.25rem;
    --text-h3: 1.75rem;
    --text-h4: 1.375rem;
    --text-h5: 1.125rem;
    --text-body-lg: 1.125rem;
    --gutter: 32px;
    --grid-columns: 12;
    --hero-pad-block: var(--space-8) var(--space-10);
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter: 40px;
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0f1412;
  --color-bg-elevated: #161c19;
  --color-bg-subtle: #1c2420;
  --color-text-primary: #f4f1ea;
  --color-text-secondary: #a3a3a0;
  --color-text-tertiary: #737370;
  --color-border-subtle: rgba(244, 241, 234, 0.08);
  --color-border-default: rgba(244, 241, 234, 0.14);
  --color-primary: #c5d4cb;
  --color-on-primary: #0f1412;
  --color-primary-hover: #d7e3dc;
  --color-primary-active: #ffffff;
  --color-link: #8fd4b4;
  --color-link-hover: #b3e4cb;
  --color-focus-ring: #c5d4cb;
  --color-success: #3dcf8e;
  --color-warning: #e8b84a;
  --color-error: #f07068;
  --color-hover-surface: #1c2420;
  --color-secondary: #1c2420;
  --color-secondary-btn-hover: #262e2a;
}

/* ===== base.css ===== */
/**
 * Base reset, typography, accessibility, performance helpers.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The `hidden` attribute must always win, including over author `display`
   rules (e.g. `.platform-field { display: grid }`). Without this, elements
   toggled with the `hidden` attribute (activation OTP gate, cart panels,
   checkout elements, manage recent list) stay visible and overlap content. */
[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip (not hidden): prevents horizontal scroll WITHOUT creating a scroll
     container. `overflow-x: hidden` on html/body turns them into scroll
     containers for descendants, which breaks `position: sticky` (the sticky
     header scrolls away instead of pinning). `clip` behaves identically for
     clipping overflow but does NOT establish a scroll container, so sticky
     keeps working. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-radius: var(--radius-xl);
}

img[loading="lazy"] {
  content-visibility: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: var(--color-link);
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-link-hover);
}

a:visited {
  color: var(--color-link-visited);
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

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

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  color: var(--color-text-primary);
}

h1,
.text-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-h1);
}

.text-display {
  font-size: var(--text-display);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-h5);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.35;
}

p {
  margin: 0 0 1em;
  max-width: 65ch;
}

p:last-child {
  margin-bottom: 0;
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
}

.text-small {
  font-size: var(--text-small);
  line-height: 1.5;
}

.text-caption {
  font-size: var(--text-caption);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-tertiary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== layout.css ===== */
/**
 * Global layout: containers, sections, grid, page templates.
 */

.container {
  width: min(100% - (2 * var(--gutter)), var(--container-xl));
  margin-inline: auto;
}

.container--sm {
  width: min(100% - (2 * var(--gutter)), var(--container-sm));
}

.container--md {
  width: min(100% - (2 * var(--gutter)), var(--container-md));
}

.container--lg {
  width: min(100% - (2 * var(--gutter)), var(--container-lg));
}

.container--xl {
  width: min(100% - (2 * var(--gutter)), var(--container-xl));
}

.container--2xl {
  width: min(100% - (2 * var(--gutter)), var(--container-2xl));
}

.container--full {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* Shared content compositions — use instead of ad-hoc max-widths */
.layout-split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  width: 100%;
}

@media (min-width: 960px) {
  .layout-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-8) var(--space-10);
  }

  .layout-split--editorial {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .layout-split--equal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-split--form {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.layout-stack {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.layout-measure {
  width: 100%;
  max-width: var(--layout-measure, 48rem);
  margin-inline: auto;
}

.layout-measure--wide {
  max-width: var(--layout-measure-wide, 56rem);
}

/* CTA → footer visual continuity */
.section--cta-lead {
  padding-block-end: var(--space-10);
}

@media (min-width: 1024px) {
  .section--cta-lead {
    padding-block-end: var(--space-12);
  }
}

.section {
  padding-block: var(--section-pad-md);
}

.section--sm {
  padding-block: var(--section-pad-sm);
}

.section--lg {
  padding-block: var(--section-pad-lg);
}

.section--xl {
  padding-block: var(--section-pad-xl);
}

.section--subtle {
  background-color: var(--color-bg-subtle);
}

.section--flush {
  padding-block: 0;
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-pad-md);
  }

  .section--sm {
    padding-block: var(--section-pad-sm);
  }

  .section--lg {
    padding-block: var(--section-pad-lg);
  }

  .section--xl {
    padding-block: var(--section-pad-xl);
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

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

.grid--features,
.grid--blog {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--features,
  .grid--blog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid--features,
  .grid--blog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Page templates */
.template-standard .template-standard__header {
  padding-block: var(--space-10) var(--space-6);
}

.template-standard .template-standard__body {
  padding-bottom: var(--space-16);
}

.template-landing .template-landing__hero {
  /* QA fix 20260718b: empty heroes must not reserve full viewport */
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-block: 0;
}

.template-landing .template-landing__hero > * {
  width: 100%;
  align-self: stretch;
}

.template-landing .template-landing__hero:not(:empty) {
  padding-block: var(--hero-pad-block);
}

@media (min-width: 1024px) {
  .template-landing .template-landing__hero:not(:empty) {
    padding-block: var(--hero-pad-block);
  }
}

.template-landing .template-landing__content {
  padding-block: 0;
}

.media-figure {
  margin: 0;
}

.media-figure img,
.media-figure picture {
  display: block;
  width: 100%;
  height: auto;
}

.media-caption {
  margin-top: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.template-blog-article {
  padding-block: var(--space-10) var(--space-16);
}

.template-blog-article__meta {
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
}

.template-blog-article__content {
  margin-top: var(--space-8);
  max-width: 72ch;
}

.template-blog-article__content > * + * {
  margin-top: var(--space-4);
}

.template-product {
  padding-block: var(--space-10) var(--space-16);
}

.template-product__layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .template-product__layout {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.template-product__media img {
  width: 100%;
  border-radius: var(--radius-xl);
}

.template-404 {
  padding-block: var(--space-14) var(--space-20);
  text-align: center;
}

/* Platform 404 (tap.pufaan.com) — no marketing nav, keep it tight and
   vertically centered so the header doesn't feel like it "comes down" with a
   huge gap of empty space above the message. */
.site-shell--platform .template-404 {
  padding-block: clamp(var(--space-14), 12vh, var(--space-24)) var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
}

.template-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

.page-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.page-title__eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.page-title__heading {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin: 0;
}

.page-title__description {
  max-width: 60ch;
  margin: 0;
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
}

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

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__separator {
  color: var(--color-gray-400);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-text-primary);
}

.breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.divider {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-8) 0;
}

.divider--strong {
  border-top-color: var(--color-border-default);
}

.divider--tight {
  margin: var(--space-4) 0;
}

.divider--loose {
  margin: var(--space-12) 0;
}

/* Locale bar removed — Country/Region lives in the header utility cluster */

/* Mobile chrome — sticky stack; desktop chrome unchanged */
@media (max-width: 1023px) {
  .site-chrome {
    position: sticky;
    top: 0;
    z-index: var(--z-header, 100);
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(246, 244, 239, 0.97);
    /* NOTE: no backdrop-filter here. backdrop-filter on an ancestor creates a
       containing block for `position: fixed` descendants — the mobile nav
       drawer (.mobile-menu) is a fixed child of .site-chrome, so a blur here
       clipped the drawer to the chrome's height (~161px) instead of the full
       viewport. The header itself already has its own blur (navigation.css),
       so removing this one loses no visual effect. */
  }

  .site-chrome .announcement,
  .site-chrome .site-header {
    position: relative;
    /* top:auto !important overrides the inline `top: <announcement-height>px`
       that mobile-menu.js sets for the DESKTOP sticky offset. On mobile the
       header sits inside the sticky .site-chrome right after the announcement
       in normal flow; an inline top offset double-shifts it (announcement 96px
       + top 97px → header pushed to ~193px). */
    top: auto !important;
  }
}

@media (min-width: 1024px) {
  .site-chrome {
    display: contents;
  }
}

/* ===== navigation.css ===== */
/**
 * Sticky header, desktop nav, mega-menu ready, mobile drawer.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  overflow: visible;
  background-color: var(--color-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.site-header.is-scrolled {
  background-color: var(--color-white);
  border-bottom-color: var(--color-border-subtle);
  box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .site-header {
  background-color: var(--color-white);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-height);
  min-width: 0;
}

.site-header__mobile-tools {
  display: none;
  align-items: center;
  justify-self: end;
  gap: 0.15rem;
}

.mobile-header-actions {
  display: none;
  align-items: center;
  gap: 0.1rem;
}

.mobile-header-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
}

.mobile-header-actions__btn:hover,
.mobile-header-actions__btn:focus-visible {
  background: var(--color-hover-surface);
  color: var(--color-text-primary);
  text-decoration: none;
}

.mobile-header-actions__btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.mobile-menu__section-label {
  margin: var(--space-5) 0 var(--space-2);
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mobile-menu__section-label:first-child {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-6);
  }
}

.site-logo {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.nav-primary,
.nav-utility-wrap,
.nav-desktop-wrap {
  display: none !important;
}

.nav-primary {
  justify-self: center;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}

.nav-utility-wrap {
  justify-self: end;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Platform header still uses a clustered wrap */
.nav-desktop-wrap {
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
  white-space: nowrap;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.nav-utility {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

/* Brand logo (R2 /media) */
.brand-logo,
.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.brand-logo:hover,
.brand-logo:visited,
.site-logo:hover,
.site-logo:visited {
  text-decoration: none;
}

.brand-logo__img {
  display: block;
  width: auto;
  height: 38px;
  max-height: 38px;
  max-width: min(185px, 52vw);
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
}

.brand-logo__text {
  display: inline-flex;
  align-items: center;
  height: 38px;
  max-width: min(185px, 52vw);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-logo--sm .brand-logo__img {
  height: 32px;
  max-height: 32px;
  max-width: 155px;
}

.brand-logo--md .brand-logo__img,
.site-logo .brand-logo__img {
  height: 38px;
  max-height: 38px;
  max-width: min(185px, 52vw);
}

.brand-logo--lg .brand-logo__img {
  height: 42px;
  max-height: 42px;
  max-width: min(200px, 55vw);
}

@media (min-width: 768px) {
  .brand-logo__img {
    height: 42px;
    max-height: 42px;
    max-width: min(250px, 58vw);
  }

  /* Keep header logo at 38px until desktop nav appears — avoids cramped 64px bar */
  .brand-logo--md .brand-logo__img,
  .site-logo .brand-logo__img {
    height: 42px;
    max-height: 42px;
    max-width: 240px;
  }

  .brand-logo--lg .brand-logo__img {
    height: 48px;
    max-height: 48px;
    max-width: 280px;
  }

  .brand-logo__text {
    height: 42px;
    max-width: 240px;
    font-size: 1.3125rem;
  }
}

@media (min-width: 1024px) {
  .brand-logo--md .brand-logo__img,
  .site-logo .brand-logo__img {
    height: 40px;
    max-height: 40px;
    max-width: 220px;
  }

  .brand-logo__text {
    height: 40px;
    max-width: 220px;
    font-size: 1.3125rem;
  }
}

.nav-desktop {
  gap: var(--space-6);
}

.nav-utility {
  gap: var(--space-4);
  padding: 0 0 0 var(--space-4);
  border-left: 1px solid var(--color-border-subtle);
}

.nav-desktop-wrap .nav-utility {
  padding-left: var(--space-6);
}

.nav-desktop__link,
.nav-utility__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.nav-utility__link {
  color: var(--color-text-secondary);
}

.nav-desktop__link:hover,
.nav-desktop__link:visited,
.nav-utility__link:hover,
.nav-utility__link:visited {
  color: var(--color-text-primary);
  opacity: 0.7;
  text-decoration: none;
}

.nav-desktop__link[aria-current="page"],
.nav-utility__link[aria-current="page"] {
  opacity: 1;
  color: var(--color-text-primary);
  box-shadow: inset 0 -1px 0 var(--color-text-primary);
}

.nav-desktop__item--has-mega {
  position: relative;
}

.nav-desktop__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* Mega menu shell — panel content wired later */
.mega-menu {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  z-index: var(--z-header);
  display: none;
  width: min(100vw - (2 * var(--gutter)), var(--container-xl));
  padding: var(--space-8) 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard);
}

.mega-menu.is-open,
.nav-desktop__item--has-mega:focus-within .mega-menu,
.nav-desktop__item--has-mega[data-mega-open="true"] .mega-menu {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  width: min(100% - (2 * var(--gutter)), var(--container-xl));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--color-hover-surface);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="false"] .icon-close,
.nav-toggle:not([aria-expanded="true"]) .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.mobile-menu {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-mobile-menu);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  background: var(--color-bg-canvas);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  pointer-events: none;
  /* Keep closed drawer out of scrollable overflow calculations */
  overflow: hidden;
  transition:
    transform var(--duration-normal) var(--ease-emphasized),
    visibility var(--duration-normal) var(--ease-emphasized);
}

.mobile-menu:not(.is-open) {
  /* Clip transformed panel so it cannot widen the document */
  clip-path: inset(0 0 0 100%);
}

.mobile-menu.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  clip-path: none;
}

.mobile-menu__panel {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--gutter) var(--space-10);
}

.mobile-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu__link {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
}

.mobile-menu__link:hover,
.mobile-menu__link:visited {
  color: var(--color-text-primary);
  text-decoration: none;
}

.mobile-menu__link[aria-current="page"] {
  color: var(--color-text-primary);
  box-shadow: inset 3px 0 0 var(--color-text-primary);
  padding-left: var(--space-3);
}

.mobile-menu__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 1023px) {
  .site-header {
    height: auto;
    min-height: var(--header-height);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header__inner {
    min-height: var(--header-height);
    padding-block: 0.2rem;
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header__mobile-tools {
    display: inline-flex;
  }

  .mobile-header-actions {
    display: inline-flex;
  }

  .site-logo {
    max-width: min(140px, 46vw);
  }

  .site-logo .brand-logo__img,
  .site-logo img,
  .brand-logo img {
    max-height: 34px;
    width: auto;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-inline-end: -0.2rem;
  }

  .mobile-menu {
    top: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-height) + 3.25rem);
    z-index: calc(var(--z-mobile-menu) + 5);
    background: var(--color-bg-canvas);
  }

  body.mobile-menu-open .site-chrome {
    z-index: calc(var(--z-mobile-menu) + 6);
  }

  .mobile-menu__panel {
    padding: var(--space-4) var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  }

  .mobile-menu__link {
    padding: 0.9rem 0;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }

  .mobile-menu__link--utility {
    font-size: 1rem;
    font-weight: var(--font-weight-regular, 400);
    color: var(--color-text-secondary);
  }

  .mobile-menu__link[aria-current="page"] {
    padding-left: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
  }

  .nav-primary,
  .nav-utility-wrap,
  .nav-desktop-wrap {
    display: flex !important;
  }

  .site-header__mobile-tools,
  .mobile-header-actions,
  .nav-toggle,
  .mobile-menu {
    display: none !important;
  }
}

/* Header Country/Region selector */
.nav-utility__region {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;
  margin-right: var(--space-1);
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border-subtle);
}

.mobile-header-actions__region {
  display: flex;
  align-items: center;
}

.country-selector {
  position: relative;
}

.country-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 40px;
  margin: 0;
  padding: 0.25rem 0.4rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.country-selector__trigger:hover,
.country-selector__trigger:focus-visible {
  background: var(--color-hover-surface);
  color: var(--color-text-primary);
}

.country-selector__trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.country-selector__trigger-flag {
  font-size: 1.05rem;
  line-height: 1;
}

.country-selector__trigger-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.country-selector__trigger-chevron .icon {
  width: 0.8rem;
  height: 0.8rem;
}

.country-selector__trigger[aria-expanded="true"] .country-selector__trigger-chevron {
  transform: rotate(180deg);
}

.country-selector__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  width: min(18.5rem, calc(100vw - 1.5rem));
  padding: 0.75rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.country-selector__heading {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.country-selector__list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 14rem;
  overflow: auto;
}

.country-selector__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.country-selector__option:hover,
.country-selector__option:focus-visible {
  background: var(--color-hover-surface);
}

.country-selector__option.is-selected {
  background: var(--color-hover-surface);
  font-weight: 600;
}

.country-selector__flag {
  width: 1.25rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
}

.country-selector__option-text {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.country-selector__option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-selector__option-meta {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.country-selector__lang {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border-subtle);
}

.country-selector__lang-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.country-selector__lang select {
  min-height: 2.25rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  font: inherit;
}

.country-selector__reset {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.country-selector__reset[hidden] {
  display: none;
}

.mobile-header-actions .country-selector__panel {
  /* Mobile: anchor to the viewport so the dropdown never runs past the
     right edge on small screens. Safe because the mobile header has no
     backdrop-filter (removed at <=1023px), so `fixed` is viewport-relative
     and not clipped by a containing block. */
  position: fixed;
  top: calc(var(--header-height) + 0.35rem);
  right: 0.75rem;
  left: auto;
  width: auto;
  min-width: min(18.5rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
}

/* ===== footer.css ===== */
/**
 * Footer production polish v3 — typography, rhythm, hierarchy only.
 * Architecture remains: Brand | Shop | Company | Support | Newsletter.
 */

.site-footer {
  flex-shrink: 0;
  background-color: var(--color-bg-subtle);
  padding: var(--space-10) 0 var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 0;
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
  .site-footer {
    padding: var(--space-12) 0 var(--space-6);
  }
}

/* ——— Primary grid ——— */
.site-footer__grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .site-footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.9fr)) minmax(16rem, 1.7fr);
    gap: var(--space-6) var(--space-6);
    align-items: start;
  }

  .site-footer__col--brand {
    grid-column: auto;
  }
}

@media (min-width: 1100px) {
  .site-footer__grid {
    gap: var(--space-8);
  }
}

.site-footer__col {
  min-width: 0;
}

/* Brand block — logo → mission → meta → social */
.site-footer__logo {
  display: inline-flex;
  margin: 0 0 var(--space-4);
  line-height: 0;
}

.site-footer__logo .brand-logo__img {
  height: 32px;
  max-height: 32px;
}

.site-footer__mission {
  margin: 0 0 var(--space-4);
  max-width: 28ch;
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Company meta — two-line supporting legal metadata */
.site-footer__company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0 0 var(--space-5);
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  color: var(--color-text-secondary);
  letter-spacing: normal;
  text-transform: none;
}

.site-footer__company-name,
.site-footer__company-place {
  display: block;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Nav headings + links — one system across columns */
.site-footer__heading {
  margin: 0 0 var(--space-3);
  min-height: 1.25rem;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--color-text-primary);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li + li {
  margin-top: var(--space-2);
}

.site-footer__link {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__link:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.site-footer__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.site-footer__link:visited {
  color: var(--color-text-secondary);
}

/* Newsletter — heading + one helper; label visually hidden */
.site-footer__col--newsletter {
  min-width: 0;
}

.site-footer__newsletter-text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

.site-footer__newsletter-wrap.newsletter {
  margin: 0;
}

.site-footer__newsletter-wrap .newsletter-form,
.site-footer__newsletter.newsletter-form {
  --footer-control-h: 2.5rem;
  max-width: none;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.site-footer__newsletter-wrap .field,
.site-footer__newsletter .field {
  position: relative;
  margin: 0;
  gap: 0;
  min-width: 0;
}

.site-footer__newsletter-wrap .input,
.site-footer__newsletter .input {
  box-sizing: border-box;
  min-height: var(--footer-control-h);
  height: var(--footer-control-h);
  max-height: var(--footer-control-h);
  width: 100%;
  padding: 0 var(--space-3);
  font-size: var(--text-small);
  line-height: 1;
  border-radius: var(--radius-md);
}

.site-footer__newsletter-wrap .btn,
.site-footer__newsletter .btn {
  box-sizing: border-box;
  min-height: var(--footer-control-h);
  height: var(--footer-control-h);
  max-height: var(--footer-control-h);
  padding: 0 var(--space-4);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.site-footer__newsletter-wrap .newsletter__status,
.site-footer__newsletter-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-caption);
}

.site-footer__newsletter-wrap .newsletter__note,
.site-footer__newsletter-note,
.site-footer__newsletter-wrap .newsletter__title {
  display: none !important;
}

/* Mobile accordion */
.site-footer__accordion {
  margin: 0;
  border: 0;
}

.site-footer__accordion > summary {
  list-style: none;
}

.site-footer__accordion > summary::-webkit-details-marker {
  display: none;
}

.site-footer__accordion-icon {
  display: none;
  color: var(--color-text-tertiary);
  line-height: 0;
}

.site-footer__accordion-icon .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 639px) {
  .site-footer__nav-col {
    border-top: 1px solid var(--color-border-subtle);
  }

  .site-footer__accordion > summary.site-footer__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    min-height: 0;
    padding: var(--space-3) 0;
    cursor: pointer;
  }

  .site-footer__accordion-icon {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .site-footer__accordion[open] > summary .site-footer__accordion-icon {
    transform: rotate(180deg);
  }

  .site-footer__accordion .site-footer__list {
    padding-bottom: var(--space-3);
  }

  .site-footer__col--newsletter {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-subtle);
  }

  .site-footer__newsletter-wrap .newsletter-form,
  .site-footer__newsletter.newsletter-form {
    grid-template-columns: 1fr;
  }

  .site-footer__newsletter-wrap .btn,
  .site-footer__newsletter .btn {
    width: 100%;
  }
}

@media (min-width: 640px) {
  .site-footer__accordion > summary.site-footer__heading {
    pointer-events: none;
    cursor: default;
  }

  .site-footer__accordion-icon {
    display: none !important;
  }

  .site-footer__accordion:not([open]) > .site-footer__list {
    display: block;
  }
}

/* Social — subtle idle; darken on hover only */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__social-link .icon {
  width: 1rem;
  height: 1rem;
}

.site-footer__social-link:hover {
  color: var(--color-text-secondary);
  background: transparent;
}

.site-footer__social-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Legal bar — tertiary, light visual weight */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-text-tertiary);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal-links a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__legal-links a:hover {
  color: var(--color-text-primary);
}

.site-footer__legal-links a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===== components.css ===== */
/**
 * Shared UI components: button, card, spinner.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}

.btn:visited {
  text-decoration: none;
}

.btn--sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.btn--md {
  height: 44px;
  padding: 0 24px;
  font-size: var(--text-button);
}

.btn--lg {
  height: 52px;
  padding: 0 28px;
  font-size: 15px;
}

/* Include :visited so base `a:visited` (link-visited green) cannot
   wash primary CTA label into near-invisible text on forest fills. */
.btn--primary,
.btn--primary:visited {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
}

.btn--primary:hover,
.btn--primary:visited:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
  border-color: var(--color-primary-hover);
  box-shadow: none;
  transform: none;
}

.btn--primary:active,
.btn--primary:visited:active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-on-primary);
  transform: scale(0.98);
  box-shadow: none;
}

.btn--primary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn--primary.is-success {
  background: var(--color-primary);
}

.btn--secondary,
.btn--secondary:visited {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  font-weight: var(--font-weight-semibold);
  box-shadow: none;
}

.btn--secondary:hover,
.btn--secondary:visited:hover {
  background: var(--color-secondary-btn-hover);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.btn--secondary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.btn--ghost,
.btn--ghost:visited {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.btn--ghost:hover,
.btn--ghost:visited:hover {
  background: var(--color-hover-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn--text,
.btn--text:visited {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--color-link);
  border: 0;
}

.btn--text:hover,
.btn--text:visited:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.btn--outline,
.btn--outline:visited {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  font-weight: var(--font-weight-semibold);
}

.btn--outline:hover,
.btn--outline:visited:hover {
  background: var(--color-hover-surface);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.btn--outline:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn--danger,
.btn--danger:visited {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

.btn--danger:hover,
.btn--danger:visited:hover {
  background: color-mix(in srgb, var(--color-error) 88%, #000);
  color: var(--color-text-inverse);
  border-color: color-mix(in srgb, var(--color-error) 88%, #000);
}

.btn--danger:active,
.btn--danger:visited:active {
  transform: scale(0.98);
}

.btn--danger:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

.commerce-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-text-primary);
  color: var(--color-bg-canvas);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, 120%);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
}

.commerce-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.commerce-toast.is-error {
  background: #8b1e1e;
  color: #fff;
}

.btn__spinner {
  width: 1.125rem;
  height: 1.125rem;
  animation: pufaan-spin 0.8s linear infinite;
}

.app-nav-busy-spinner {
  display: inline-flex;
  margin-left: 0.4em;
  vertical-align: middle;
}

a.btn.is-loading,
a.app-nav__link.is-loading,
button.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

@keyframes pufaan-spin {
  to {
    transform: rotate(360deg);
  }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

@media (min-width: 768px) {
  .card {
    padding: var(--space-6);
  }
}

.card--interactive {
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.card--interactive:hover {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card--interactive:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

a.card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

a.card:hover,
a.card:visited {
  color: inherit;
  text-decoration: none;
}

.card__media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-bg-subtle);
  position: relative;
}

@media (min-width: 768px) {
  .card__media {
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
  }
}

.card__media img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: var(--color-bg-subtle);
}

.card--product .card__media,
.product-card .card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.card--product .card__media img,
.product-card .card__media img {
  aspect-ratio: auto;
  object-position: center center;
  max-height: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
}

.card--blog .card__media {
  aspect-ratio: 16 / 9;
}

.card--blog .card__media img {
  aspect-ratio: 16 / 9;
  object-position: center;
}

.card--feature .card__media,
.collection-card .card__media {
  aspect-ratio: 16 / 10;
}

.card--feature .card__media img,
.collection-card .card__media img {
  aspect-ratio: 16 / 10;
  object-position: center;
}

.media-fallback {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: inherit;
  background: var(--color-bg-elevated);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.media-fallback.product-media-placeholder {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

.commerce-account-guest__benefits {
  margin: var(--space-4) 0;
  padding-left: 1.2rem;
}

.card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: var(--font-weight-medium);
}

.card--blog .card__title {
  font-size: var(--text-h4);
}

.card__meta,
.card__excerpt {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__price {
  margin-top: var(--space-3);
  font-weight: var(--font-weight-semibold);
}

.card__actions {
  margin-top: var(--space-4);
}

/* Product card: tighter body + price/badge as one pricing block */
.product-card {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .product-card {
    padding: var(--space-5);
  }
}

.product-card .card__media {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
}

@media (min-width: 768px) {
  .product-card .card__media {
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  }
}

.product-card .card__title {
  margin: 0 0 var(--space-1);
}

.product-card .card__excerpt {
  margin: 0;
}

.product-card__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  width: 100%;
}

.product-card__pricing .card__price {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.product-card__badge {
  margin: 0;
  display: inline-flex;
}

.product-card .card__actions {
  margin-top: 0;
}

.product-card .card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

/* Collection cards: same density as product cards (keep 16/10 media) */
.collection-card {
  padding: var(--space-4);
  height: 100%;
}

@media (min-width: 768px) {
  .collection-card {
    padding: var(--space-5);
  }
}

.collection-card .card__media {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
}

@media (min-width: 768px) {
  .collection-card .card__media {
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  }
}

.collection-card .card__title {
  margin: 0 0 var(--space-1);
}

.collection-card .card__excerpt {
  margin: 0;
}

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

.card--feature .card__icon {
  color: var(--color-text-primary);
}

.card--info {
  background: var(--color-bg-subtle);
}

.card--info-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.card--info-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.card--info-error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

/* -------------------------------------------------------------------------- */
/* Badge                                                                       */
/* -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  border: 1px solid transparent;
}

.badge--neutral {
  background: var(--color-hover-surface);
  color: var(--color-text-secondary);
}

.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

.badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                       */
/* -------------------------------------------------------------------------- */

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

.field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.field__hint {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.field__error {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-error);
}

.input,
.textarea,
.select {
  width: 100%;
  appearance: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-body);
  padding: 0.85rem 1rem;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.input,
.select {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding-block: 0;
  line-height: 1.25;
  flex: none;
}

.textarea {
  min-height: 8rem;
  max-height: none;
  height: auto;
  resize: vertical;
  line-height: var(--leading-relaxed);
  padding: 0.85rem 1rem;
}

.select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235c5a55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-tertiary);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--color-border-strong);
}

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select {
  border-color: var(--color-border-error);
}

.field__password {
  position: relative;
  display: flex;
  align-items: stretch;
}

.field__password-input {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 2.75rem;
}

.field__password-toggle {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  padding: 0;
  border-radius: 0.375rem;
}

.field__password-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.field__password-toggle-icon[hidden] {
  display: none;
}

.field__password-toggle:hover {
  color: var(--color-text, #0f172a);
  background: rgba(15, 23, 42, 0.06);
}

.field__password-toggle:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

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

/* Newsletter — shared across footer and any page using newsletterForm() */
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 32rem;
  align-items: end;
}

.newsletter-form > .field {
  flex: 1 1 12rem;
  min-width: 0;
}

.newsletter-form .input,
.newsletter-form .btn {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  flex: none;
}

.newsletter-form .input {
  width: 100%;
  padding: 0 var(--space-3);
  line-height: 1.25;
}

.newsletter-form .btn {
  padding-inline: var(--space-4);
  white-space: nowrap;
}

.newsletter-form .btn[aria-busy="true"] {
  opacity: 0.75;
  cursor: wait;
}

.newsletter__status.is-loading {
  color: var(--color-text-secondary);
}

.newsletter__status.is-success {
  color: var(--color-success);
}

.newsletter__status.is-error {
  color: var(--color-error);
}

/* Contact form layout helpers (fields use shared .field / .input) */
.contact-field--full {
  grid-column: 1 / -1;
}

/* -------------------------------------------------------------------------- */
/* CTA band                                                                    */
/* -------------------------------------------------------------------------- */

.cta-band {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 80% 80% at 100% 0%, rgba(161, 127, 90, 0.16), transparent 55%),
    var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
  width: 100%;
}

.cta-band__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.cta-band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-on-primary);
}

.cta-band__text {
  margin: var(--space-3) 0 0;
  max-width: 48rem;
  color: rgba(255, 255, 255, 0.82);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cta-band .btn--primary,
.cta-band .btn--primary:visited {
  background: var(--color-bg-elevated);
  color: var(--color-primary);
}

.cta-band .btn--primary:hover,
.cta-band .btn--primary:visited:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

.cta-band .btn--secondary,
.cta-band .btn--ghost,
.cta-band .btn--secondary:visited,
.cta-band .btn--ghost:visited {
  background: transparent;
  color: var(--color-on-primary);
  border-color: rgba(255, 255, 255, 0.35);
}

.cta-band .btn--secondary:hover,
.cta-band .btn--ghost:hover,
.cta-band .btn--secondary:visited:hover,
.cta-band .btn--ghost:visited:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-on-primary);
}

@media (min-width: 768px) {
  .cta-band {
    padding: var(--space-12) var(--space-10);
  }
}

/* -------------------------------------------------------------------------- */
/* Announcement bar                                                            */
/* -------------------------------------------------------------------------- */

.announcement {
  position: sticky;
  top: 0;
  z-index: var(--z-announcement);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-small);
}

.announcement[hidden] {
  display: none !important;
}

.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--announcement-height);
  padding: var(--space-2) 0;
}

.announcement__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.announcement__text {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: clamp(0.75rem, 1.6vw, 0.875rem);
  line-height: 1.3;
}

.announcement__link {
  flex-shrink: 0;
  color: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

.announcement__link:hover,
.announcement__link:visited {
  color: inherit;
}

.announcement__dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  opacity: 0.85;
  flex-shrink: 0;
  margin-left: auto;
}

.announcement__dismiss:hover,
.announcement__dismiss:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body.has-announcement .site-header,
body:has(.announcement:not([hidden])) .site-header {
  top: var(--announcement-offset, var(--announcement-height));
}

@media (max-width: 1023px) {
  body.has-announcement .site-header,
  body:has(.announcement:not([hidden])) .site-header {
    top: auto;
  }

  .announcement {
    position: relative;
    top: auto;
    font-size: 0.75rem;
  }

  .announcement__inner {
    gap: var(--space-2);
    min-height: 2.5rem;
    padding-block: 0.45rem;
    align-items: center;
  }

  .announcement__copy {
    /* Single-row on mobile: text truncates with ellipsis, link stays inline.
       No wrapping → keeps the bar one line (~40px) instead of 2–3 lines
       (~96px) that pushed the header down and made the sticky chrome huge. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: left;
    gap: 0.65rem;
    min-width: 0;
  }

  .announcement__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .announcement__link {
    font-size: 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .announcement__dismiss {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    flex-shrink: 0;
  }
}

@media (max-width: 639px) {
  .announcement__inner {
    gap: var(--space-2);
    padding-block: 0.45rem;
  }

  .announcement__copy {
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: left;
    gap: 0.5rem;
  }

  .announcement__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .announcement__link {
    font-size: var(--text-caption);
  }
}

@media (max-width: 379px) {
  .announcement__link {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Shared section helpers                                                      */
/* -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.media-frame {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-bg-subtle);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 5;
  max-height: min(55vh, 480px);
  width: 100%;
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(55vh, 480px);
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

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

@media (min-width: 768px) {
  .grid-responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .grid-responsive--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------- */
/* Section header (shared)                                                     */
/* -------------------------------------------------------------------------- */

.section-header {
  margin-bottom: var(--space-6);
  max-width: none;
}

.section-header h2 {
  margin: 0 0 var(--space-2);
}

.section-header p {
  margin: 0;
  max-width: 60ch;
  color: var(--color-text-secondary);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
  max-width: var(--layout-measure-wide, 56rem);
}

.section-header--center p {
  margin-inline: auto;
}

.page-home #featured-products .section-header {
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* FAQ accordion (shared list variant)                                         */
/* -------------------------------------------------------------------------- */

.faq-accordion {
  border-top: 1px solid var(--color-border-subtle);
}

.faq-accordion__item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.faq-accordion__question::-webkit-details-marker {
  display: none;
}

.faq-accordion__question::after {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.faq-accordion__item[open] .faq-accordion__question::after {
  transform: rotate(225deg);
  margin-top: 0.25rem;
}

.faq-accordion__answer {
  padding-bottom: var(--space-5);
}

.faq-accordion__answer p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.faq-list {
  display: grid;
  gap: var(--space-3);
  max-width: 48rem;
}

.faq-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-4) var(--space-5);
}

.faq-item summary {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}

.faq-item p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
}

/* ===== commerce.css ===== */
/* Commerce surfaces — cart, checkout, account, consent, drawer */

.commerce-cart__layout,
.commerce-checkout__grid {
  display: grid;
  gap: var(--space-8);
}

/* BUG-017: never paint empty + ready (or loading) at once */
.commerce-cart__loading[hidden],
.commerce-cart__empty[hidden],
.commerce-cart__layout[hidden],
.commerce-cart__saved[hidden],
.commerce-skeleton[hidden],
.commerce-totals[hidden],
.commerce-payment-element[hidden],
.commerce-payment-deferred[hidden],
.commerce-payment-unavailable[hidden],
.commerce-payment-methods-wrap[hidden] {
  display: none !important;
}

@media (min-width: 960px) {
  .commerce-cart__layout,
  .commerce-checkout__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: start;
    gap: var(--space-10);
  }
}

.commerce-skeleton {
  display: grid;
  gap: var(--space-4);
}

.commerce-skeleton__row,
.commerce-skeleton__aside {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
}

.commerce-skeleton__aside {
  border-bottom: 0;
  margin-top: var(--space-2);
}

.commerce-skeleton__block {
  display: block;
  height: 0.875rem;
  max-width: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-subtle) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-subtle) 100%
  );
  background-size: 200% 100%;
  animation: commerce-skeleton-pulse 1.2s ease-in-out infinite;
}

.commerce-skeleton__block--title {
  width: min(16rem, 70%);
  height: 1rem;
}

.commerce-skeleton__block--meta {
  width: min(8rem, 40%);
}

.commerce-skeleton__block--wide {
  width: min(12rem, 55%);
}

.commerce-skeleton__block--cta {
  width: min(10rem, 48%);
  height: 2.75rem;
  margin-top: var(--space-2);
}

.commerce-skeleton--summary {
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.commerce-skeleton--summary .commerce-skeleton__block {
  height: 0.75rem;
}

@keyframes commerce-skeleton-pulse {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-skeleton__block {
    animation: none;
  }
}

.commerce-empty {
  display: grid;
  gap: var(--space-4);
  max-width: 28rem;
  padding: var(--space-6) 0 var(--space-4);
}

.commerce-empty__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
}

.commerce-empty__copy {
  margin: 0;
}

.commerce-cart__summary {
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.commerce-cart__subtotal {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body-lg);
}

.commerce-cart__checkout {
  margin-top: var(--space-4);
  width: 100%;
}

.commerce-line,
.commerce-order {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
}

.commerce-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  margin: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.commerce-method + .commerce-method {
  margin-top: var(--space-2);
}

.commerce-method:hover {
  border-color: var(--color-border-default);
}

.commerce-method.is-selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-elevated));
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.commerce-method input {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.commerce-method__body {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: baseline;
}

.commerce-method__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.commerce-method__price {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.commerce-line {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: start;
}

.commerce-line__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  grid-column: 2 / -1;
}

.commerce-qty {
  width: 4rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
}

.commerce-totals {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.commerce-totals div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.commerce-totals__total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-display);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.commerce-totals__total dd {
  font-variant-numeric: tabular-nums;
}

.commerce-form {
  display: grid;
  gap: var(--space-4);
}

.commerce-account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.commerce-account-nav a {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 1px solid transparent;
}

.commerce-account-nav a:hover,
.commerce-account-nav a[aria-current="page"] {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}

.commerce-account-guest {
  display: grid;
  gap: var(--space-4);
  max-width: 28rem;
  padding: var(--space-2) 0;
}

.commerce-account-guest__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.cart-drawer[hidden] {
  display: none !important;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 26, 0.45);
}

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(24rem, 100%);
  background: var(--color-bg-elevated, #f6f4ef);
  padding: var(--space-6);
  overflow: auto;
  border-left: 1px solid var(--color-border-subtle);
}

.cart-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.cart-drawer__empty {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.cart-drawer__content {
  display: grid;
  gap: var(--space-3);
}

.cart-drawer__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-small);
}

.cart-drawer__subtotal {
  margin: var(--space-2) 0 0;
}

.cart-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cart-drawer__trust {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-bg-elevated, #f6f4ef);
  border-top: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.16));
  padding: var(--space-3) 0;
  box-shadow: none;
}

.consent-banner[hidden] {
  display: none !important;
}

/* Reserve space so fixed banner does not obscure CTAs / section headers */
body:has(.consent-banner:not([hidden])) {
  padding-bottom: 4.5rem;
}

.consent-banner__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  justify-content: space-between;
  align-items: center;
}

.consent-banner__inner > p {
  margin: 0;
  max-width: 42rem;
  font-size: var(--text-caption);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.consent-banner__actions .btn--sm {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 12px;
}

.nav-cart-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.25rem;
  font-size: 0.75rem;
}

.commerce-success {
  display: grid;
  gap: var(--space-8);
  max-width: 42rem;
  margin-inline: auto;
}

.commerce-success__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.commerce-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Customer portal */
.portal-header {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.portal-header__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.portal-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.portal-search input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.16));
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-elevated, #fff);
}

.portal-nav {
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* "More" dropdown for secondary nav destinations (Orders, Plan & billing, …) */
.portal-nav__more {
  position: relative;
  display: inline-block;
}

.portal-nav__more-toggle {
  cursor: pointer;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  list-style: none;
  padding: var(--space-2) 0;
}

.portal-nav__more-toggle::-webkit-details-marker {
  display: none;
}

.portal-nav__more-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 30;
  display: grid;
  gap: 0.25rem;
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.16));
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-elevated, #fff);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
}

.portal-nav__more-list a {
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm, 4px);
  border-bottom: 0;
}

.portal-nav__more-list a:hover {
  background: var(--color-bg-subtle, rgba(30, 58, 47, 0.06));
}

.portal-nav__lock {
  display: inline-block;
  margin-left: 0.2rem;
  font-size: 0.7rem;
  vertical-align: middle;
  opacity: 0.75;
}

.portal-badge {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  margin-left: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 999px;
  background: var(--color-text, #1e3a2f);
  color: var(--color-bg, #fff);
}

.portal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-3);
}

.portal-stat {
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
  border-radius: var(--radius-sm, 4px);
}

.portal-stat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
}

.portal-stat__label {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.portal-bar {
  position: relative;
  background: var(--color-border-subtle, rgba(30, 58, 47, 0.12));
  border-radius: 2px;
  height: 1.25rem;
  min-width: 4rem;
}

.portal-bar__fill {
  display: block;
  height: 100%;
  background: var(--color-primary, #1e3a2f);
  border-radius: 2px;
  opacity: 0.75;
}

.portal-bar__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.portal-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .portal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.commerce-panel {
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-elevated, transparent);
}

.commerce-panel--unread {
  border-color: var(--color-text, #1e3a2f);
}

.commerce-stack {
  display: grid;
  gap: var(--space-3);
}

.commerce-list {
  margin: 0;
  padding-left: 1.25rem;
}

.commerce-alert {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-subtle, rgba(30, 58, 47, 0.06));
}

.commerce-alert--error {
  background: rgba(140, 40, 40, 0.08);
}

.commerce-empty__copy {
  color: var(--color-text-secondary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0;
}

.portal-cap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.portal-cap-chip {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border-subtle, #ddd);
  border-radius: 4px;
  font-size: 0.85rem;
}

/* ── Phase 5.5 customer Home ───────────────────────────────────────────── */
.pf-home__greeting {
  margin: 0 0 1.25rem;
  font-size: 1.6rem;
}

.pf-home__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.pf-home__quickstats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pf-home__quickstat {
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
  border-radius: var(--radius-sm, 4px);
  min-width: 7rem;
}

.pf-home__quickstat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
}

.pf-home__quickstat-label {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.pf-product {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .pf-product {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.pf-product__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Settings groups ───────────────────────────────────────────────────── */
.pf-settings__group {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pf-settings__group-head {
  display: grid;
  gap: 0.15rem;
}

.pf-settings__group-head .h4 {
  margin: 0;
}

.pf-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.pf-settings__row .h5 {
  margin: 0;
}

.pf-settings__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.pf-settings__badge.is-on {
  color: var(--color-success, #1a7a4c);
  background: color-mix(in srgb, var(--color-success, #1a7a4c) 10%, transparent);
}

.pf-settings__badge.is-off {
  color: var(--color-text-tertiary);
  background: var(--color-bg-subtle, rgba(30, 58, 47, 0.06));
}

.h5 {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
}

/* Product code + status pills (product cards + detail) */
.pf-product__code {
  margin: 0.15rem 0 0;
  font-size: var(--text-caption);
}

.pf-product__code code {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.pf-product__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.pf-product__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
}

.pf-product__status.is-active {
  color: var(--color-success, #067647);
  background: color-mix(in srgb, #067647 10%, transparent);
}

.pf-product__status.is-pending {
  color: var(--color-warning, #b54708);
  background: color-mix(in srgb, #b54708 10%, transparent);
}

/* ── Product hero (Home + product detail) ──────────────────────────────── */
.pf-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  margin: 0 0 var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--color-bg-elevated, #fff), var(--color-secondary));
}

@media (min-width: 640px) {
  .pf-hero {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
  }
}

.pf-hero--empty {
  display: block;
}

.pf-hero__body {
  display: grid;
  gap: var(--space-2);
}

.pf-hero__eyebrow {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pf-hero__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
}

.pf-hero__code {
  margin: 0;
}

.pf-hero__code code {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.pf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.pf-hero__status,
.pf-hero__plan {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.pf-hero__status.is-active {
  color: var(--color-success, #067647);
  background: color-mix(in srgb, #067647 10%, transparent);
}

.pf-hero__status.is-pending {
  color: var(--color-warning, #b54708);
  background: color-mix(in srgb, #b54708 10%, transparent);
}

.pf-hero__plan {
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle, rgba(30, 58, 47, 0.06));
}

.pf-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
}

.pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

/* Decorative card visual — a clean NFC card silhouette. */
.pf-hero__card {
  display: grid;
  gap: var(--space-4);
  align-content: space-between;
  min-height: 10.5rem;
  padding: var(--space-5);
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #000));
  color: var(--color-on-primary);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
}

.pf-hero__card-chip {
  width: 2.4rem;
  height: 1.7rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, #fff 28%, transparent);
}

.pf-hero__card-code {
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

.pf-hero__card-brand {
  font-size: var(--text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .pf-hero {
    padding: var(--space-5);
  }
  .pf-hero__card {
    min-height: 8.5rem;
  }
}

/* Locked AI upsell grid (Basic) */
.pf-home__locked-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.pf-home__locked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
  border-radius: var(--radius-sm, 4px);
  text-decoration: none;
  color: inherit;
}

.pf-home__locked-icon {
  font-size: 1.1rem;
}

.pf-home__locked-label {
  font-weight: 600;
}

.pf-home__locked-badge {
  margin-left: auto;
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(30, 58, 47, 0.08);
  color: var(--color-text-secondary);
}

/* Plus upsell card (Basic) */
.pf-plus-upsell {
  border-color: rgba(30, 58, 47, 0.28);
  background: var(--color-bg-elevated, #fff);
}

/* Plus assistant section */
.pf-home__assistant-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.pf-home__ask {
  margin: 0.5rem 0 0.25rem;
}

.pf-home__quick-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .portal-stats {
    grid-template-columns: 1fr 1fr;
  }

  .commerce-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .commerce-form .btn,
  .commerce-panel .btn {
    min-height: 2.75rem;
  }
}

/* Embedded checkout — editable lines + payment element */
.commerce-checkout-line {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(30, 58, 47, 0.12));
  align-items: start;
}

.commerce-checkout-line:last-child {
  border-bottom: 0;
}

.commerce-checkout-line__thumb,
.commerce-line__thumb {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-md, 12px);
  object-fit: cover;
  background: var(--color-bg-subtle);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.commerce-checkout-line__qty {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.commerce-checkout-line__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.commerce-checkout-line__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.commerce-checkout-line__price {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.commerce-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.commerce-qty-stepper__btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.commerce-qty-stepper__btn:hover {
  background: var(--color-hover-surface);
}

.commerce-qty-stepper__btn:focus-visible {
  outline: none;
  background: var(--color-hover-surface-strong);
}

.commerce-qty-stepper__input {
  width: 2.5rem;
  border: 0;
  border-inline: 1px solid var(--color-border-subtle);
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--color-text-primary);
  -moz-appearance: textfield;
}

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

.commerce-checkout-line__remove {
  border: 0;
  background: transparent;
  padding: 0.25rem 0;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.commerce-checkout-line__remove:hover {
  color: var(--color-error);
}

.commerce-payment-deferred {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(
    160deg,
    var(--color-bg-subtle) 0%,
    color-mix(in srgb, var(--color-accent-soft) 40%, var(--color-bg-elevated)) 100%
  );
}

.commerce-payment-deferred__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
}

.commerce-payment-deferred__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.commerce-payment-unavailable {
  margin: var(--space-3) 0;
}

.commerce-payment-unavailable__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.commerce-address-country__select option[hidden] {
  display: none;
}

.commerce-address-region .select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.commerce-payment-element {
  margin: var(--space-2) 0 var(--space-3);
  min-height: 2rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
  transition: opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-standard);
}

.commerce-payment-element:not([hidden]) {
  animation: commerce-fade-up 0.4s var(--ease-standard);
}

.commerce-payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.commerce-payment-methods li {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

.checkout-assurances {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.checkout-assurances__trust {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.checkout-assurances__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.checkout-assurances__links a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.checkout-assurances__links a:hover {
  border-bottom-color: var(--color-primary);
}

.commerce-success__receipt {
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--brand-shadow);
}

.commerce-success__addresses {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (min-width: 720px) {
  .commerce-success__addresses {
    grid-template-columns: repeat(3, 1fr);
  }
}

.commerce-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
}

.commerce-table th,
.commerce-table td {
  text-align: left;
  padding: 0.5rem 0.35rem;
  border-bottom: 1px solid var(--color-border-subtle, #e5e2dc);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .commerce-checkout-line {
    grid-template-columns: 3.75rem minmax(0, 1fr);
  }

  .commerce-checkout-line__thumb,
  .commerce-line__thumb {
    width: 3.75rem;
    height: 3.75rem;
  }

  .commerce-checkout-line__qty {
    width: 100%;
  }
}

/* ——— Premium checkout shell ——— */
.page-checkout .template-landing__hero,
.page-checkout-success .template-landing__hero {
  min-height: 0 !important;
  padding-block: 0 !important;
}

.page-checkout .section--lg > .container,
.page-checkout-success .section--lg > .container {
  width: min(100% - (2 * var(--gutter)), var(--container-2xl));
}

.page-checkout .site-footer,
.page-checkout-success .site-footer {
  opacity: 0.9;
}

/* Soften checkout footer only — keep legal/nav links on success receipt */
.page-checkout .site-footer__grid > *:not(.site-footer__col--brand):not(.site-footer__nav-col),
.page-checkout .site-footer__col--newsletter {
  display: none !important;
}

.page-checkout .site-footer__grid {
  grid-template-columns: 1fr auto;
  max-width: none;
}

.commerce-checkout__pay-panel {
  margin: var(--space-5) 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.commerce-checkout__pay-panel .commerce-checkout__heading {
  margin-bottom: var(--space-2);
}

.commerce-checkout__panel--payment {
  display: none;
}

.commerce-checkout__intro {
  max-width: 40rem;
  margin-bottom: var(--space-2);
}

.commerce-checkout__account-opt {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.45;
  cursor: pointer;
}

.commerce-checkout__account-opt input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.commerce-checkout__eyebrow,
.commerce-success__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

.commerce-checkout__title,
.commerce-success__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text-primary);
}

.commerce-checkout__lede,
.commerce-success__lede {
  margin: 0;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.commerce-checkout__main {
  display: grid;
  gap: var(--space-5);
}

.commerce-checkout__panel {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.commerce-checkout__panel:first-child {
  padding-top: 0;
}

.commerce-checkout__panel--payment {
  border-bottom: 0;
  padding: var(--space-6);
  margin-top: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--brand-shadow);
}

.commerce-checkout__panel--promo {
  padding-block: var(--space-4);
}

.commerce-checkout__heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.commerce-checkout__heading--summary {
  font-size: 1.15rem;
}

.commerce-checkout__payment-lede {
  margin: -0.5rem 0 var(--space-4);
  font-size: 0.9rem;
  line-height: 1.45;
}

.commerce-checkout__fields {
  display: grid;
  gap: var(--space-4);
}

.commerce-checkout__fields-row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .commerce-checkout__fields-row {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.commerce-checkout__methods {
  display: grid;
  gap: 0;
}

.commerce-checkout__summary {
  position: relative;
}

.commerce-checkout__summary-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--brand-shadow);
}

@media (min-width: 960px) {
  .commerce-checkout__summary-card {
    position: sticky;
    top: var(--space-6);
  }
}

.commerce-checkout__pay {
  width: 100%;
  margin-top: var(--space-2);
  box-shadow: 0 8px 24px rgba(30, 58, 47, 0.18) !important;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard) !important;
}

.commerce-checkout__pay:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(30, 58, 47, 0.22) !important;
}

.commerce-checkout__pay:disabled {
  box-shadow: none !important;
  transform: none !important;
}

.commerce-checkout__status {
  margin: var(--space-3) 0 0;
  min-height: 1.25em;
}

/* Form polish on checkout only */
.page-checkout .field {
  gap: var(--space-2);
}

.page-checkout .field__label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.page-checkout .field__required {
  margin-left: 0.35rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.page-checkout .field__hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.page-checkout .input,
.page-checkout .select,
.page-checkout .textarea {
  min-height: 2.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  border-color: var(--color-border-default);
  background: var(--color-bg-elevated);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.page-checkout .input:focus,
.page-checkout .select:focus,
.page-checkout .textarea:focus,
.page-checkout .input:focus-visible,
.page-checkout .select:focus-visible,
.page-checkout .textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--brand-focus);
}

.page-checkout .input:-webkit-autofill,
.page-checkout .input:-webkit-autofill:hover,
.page-checkout .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary);
  box-shadow: 0 0 0 1000px var(--color-bg-elevated) inset;
  transition: background-color 9999s ease-out;
}

/* Success experience */
.commerce-success__hero {
  text-align: left;
}

.commerce-success--confirmed .commerce-success__hero {
  padding-bottom: var(--space-2);
}

.commerce-success__recovery {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.commerce-success__pulse {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-primary);
  animation: commerce-spin 0.8s linear infinite;
}

.commerce-success__recovery-copy {
  margin: 0;
  color: var(--color-text-secondary);
}

.commerce-success__receipt-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-4);
}

.commerce-success__receipt-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
}

.commerce-success__order-ref {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.commerce-success__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.commerce-success__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.95rem;
}

.commerce-success__line-qty {
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.commerce-success__line-amt {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

.commerce-success__addr-label {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.commerce-success__steps li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.commerce-success__step-num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.commerce-success__actions--ranked {
  display: grid;
  gap: var(--space-4);
}

.commerce-success__cta-primary {
  width: 100%;
  max-width: 20rem;
  box-shadow: 0 8px 24px rgba(30, 58, 47, 0.18);
}

.commerce-success__actions-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@keyframes commerce-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes commerce-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-payment-element:not([hidden]),
  .commerce-success__pulse,
  .commerce-checkout__pay {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== plan-pricing.css ===== */
/**
 * Plan pricing — shared package cards + comparison + concepts.
 *
 * Used by the homepage pricing section, the NFC Business Card product page,
 * and the Digital ID landing page. Rendered from components/planComparison.js
 * + lib/billing/catalogue.js — the marketing table can never drift from the
 * catalogue. Design tokens only.
 */

/* ── Package cards ─────────────────────────────────────────────────────── */
.plan-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
  position: relative;
}

.plan-card--hosted_basic {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

.plan-card__head {
  display: grid;
  gap: var(--space-2);
}

.plan-card__name {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.plan-card__desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}

.plan-card__price {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.plan-card__term {
  margin: -0.5rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.plan-card__features {
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.plan-card__features li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.45;
}

.plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.plan-card__cta {
  margin-top: auto;
  text-align: center;
}

.plan-card__cta--muted {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  text-align: center;
}

/* ── Concepts (Physical card / Digital ID / Plan) ─────────────────────── */
.plan-concepts {
  margin: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 768px) {
  .plan-concepts {
    grid-template-columns: 1fr;
  }
}

.plan-concept {
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.plan-concept__label {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.plan-concept__body {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* ── Comparison table ─────────────────────────────────────────────────── */
.plan-compare__heading {
  margin-top: var(--space-10);
}

.plan-compare {
  margin-top: var(--space-5);
  overflow-x: auto;
}

.plan-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}

.plan-compare__table th,
.plan-compare__table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}

.plan-compare__table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-bg-elevated) 70%, var(--color-bg-canvas));
}

.plan-compare__cell {
  text-align: center !important;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
}

.plan-compare__desc {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
  margin-top: 0.15rem;
}

.plan-compare__category {
  background: color-mix(in srgb, var(--color-secondary) 60%, var(--color-bg-canvas));
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

/* ── Journey ───────────────────────────────────────────────────────────── */
.plan-journey {
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  display: grid;
  gap: var(--space-4);
}

.plan-journey__eyebrow {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.plan-journey__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: journey;
  display: grid;
  gap: var(--space-2);
}

.plan-journey__list li {
  position: relative;
  padding-left: 2rem;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.5;
}

.plan-journey__list li::before {
  counter-increment: journey;
  content: counter(journey);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.plan-journey__list li strong {
  color: var(--color-text-primary);
}

/* ── Global header contract ─────────────────────────────────────────────
   This stylesheet is loaded after navigation.css by both marketing and
   platform layouts. Keep the customer-facing header opaque and in its own
   visual layer so page content can never show through it. */
.site-header {
  background-color: var(--color-bg-canvas, #f6f4ef) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
}

.site-header.is-scrolled {
  background-color: var(--color-bg-canvas, #f6f4ef) !important;
  border-bottom-color: var(--color-border-subtle) !important;
  box-shadow: var(--shadow-xs) !important;
}

@media (max-width: 1023px) {
  .site-header {
    background-color: var(--color-bg-canvas, #f6f4ef) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    box-shadow: var(--shadow-xs) !important;
  }
}

/* ===== platform.css ===== */
/**
 * NFC platform UI — forms, dashboard, progress, redirect interstitial.
 * Uses design-system tokens only. No marketing redesign.
 */

.site-shell--platform .site-header {
  border-bottom: 1px solid var(--color-border-subtle);
}

.site-shell--platform .site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.platform-page {
  padding-block: var(--space-10) var(--space-16);
}

.platform-page__inner {
  max-width: 36rem;
  margin-inline: auto;
}

/* Wide pages (Manage Card dashboard + TE editor) use a generous canvas so the
   two-column editor can show the form AND a large live preview side-by-side. */
.platform-page__inner--wide {
  max-width: 80rem;
}

/* Premium activation — step indicators */
.platform-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.platform-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.platform-steps__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.platform-steps__item.is-active {
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.platform-steps__item.is-active span {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Completed step — the step before the current one (e.g. "Verify email" after
   the OTP succeeds). Distinct from the active step so the customer sees the
   progression: ✓ 1 Verify email → ● 2 Create a PIN → ○ 3 You're live. */
.platform-steps__item.is-done {
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}

.platform-steps__item.is-done span {
  background: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 0.85;
}

/* Compact side-by-side fields */
.platform-grid {
  display: grid;
  gap: var(--space-4);
}

.platform-grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .platform-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Email/OTP gate (activation, step 1). Dedicated grid layout — the OTP input
   and "Send code" sit in one row, and the "Verify" action sits on its own row
   below so nothing overlaps. After verification the step collapses to a
   compact read-only "Verified email" summary. */
.platform-otp-gate {
  display: grid;
  gap: var(--space-4);
}

.platform-otp-gate__step {
  display: grid;
  gap: var(--space-4);
}

.platform-otp-gate__field {
  display: grid;
  gap: var(--space-2);
}

.platform-otp-gate__field label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* The OTP gate fields carry raw <input> elements (not .platform-field), so
   they must opt into the same field styling the password step gets: 44px
   target, radius, border, padding, focus ring. Without this the email/OTP
   inputs render as unstyled browser widgets. */
.platform-otp-gate__field input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-primary);
  font: inherit;
  box-sizing: border-box;
}

.platform-otp-gate__field input:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Primary "Send verification code →" action — full-width, prominent. */
.platform-otp-gate__send {
  display: grid;
  gap: var(--space-2);
}

.platform-otp-gate__send .btn {
  justify-content: center;
  width: 100%;
}

.platform-otp-gate__send .btn.is-loading {
  opacity: 0.75;
  cursor: progress;
}

.platform-otp-gate__send .btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* OTP entry — revealed after the code is sent. */
.platform-otp-gate__otp {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle, rgba(30, 58, 47, 0.04));
}

.platform-otp-gate__otp input {
  letter-spacing: 0.35em;
  font-size: 1.05rem;
  text-align: center;
}

.platform-otp-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Verify / Resend actions; match the 44px input/button height. */
.platform-otp-gate__actions .btn {
  height: 44px;
}

.platform-otp-gate__done {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
}

.platform-otp-gate__done-check {
  color: var(--color-success, #2f7d4f);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.platform-otp-gate__done-email {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.platform-otp-gate__done-label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.platform-otp-gate__done-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Fieldset grouping for the activation flow */
.platform-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-4);
}

.platform-fieldset__legend {
  margin: 0 0 var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Compact card banner at the top of the activation form */
.platform-inline-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
}

/* Activation form — compact, balanced single card. Scoped to the activation
   page so the shared .platform-* classes keep their standard rhythm on the
   Manage Card dashboard, recovery, and own-link pages. */
.page-activate-form .platform-page {
  padding-block: var(--space-8) var(--space-12);
}

.page-activate-form .platform-page h1 {
  margin: 0 0 var(--space-2);
}

.page-activate-form .platform-lede {
  margin: 0 0 var(--space-5);
}

.page-activate-form .platform-steps {
  margin: 0 0 var(--space-5);
}

.page-activate-form .platform-form {
  gap: var(--space-4);
}

.page-activate-form .platform-card {
  padding: var(--space-5);
}

.page-activate-form .platform-fieldset {
  gap: var(--space-3);
}

/* Activation success ("You're live") — centered CTA with breathing room. */
.page-activate-success .platform-success {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}

.page-activate-success .platform-success .platform-form__actions {
  justify-content: center;
  margin-top: var(--space-2);
}

.page-activate-form .platform-otp-gate,
.page-activate-form .platform-otp-gate__step,
.page-activate-form .platform-otp-gate__row {
  gap: var(--space-3);
}

.page-activate-form .platform-inline-banner {
  margin-bottom: var(--space-3);
}

/* Keep the OTP gate rows equal-width and buttons aligned to input height. */
@media (min-width: 480px) {
  .page-activate-form .platform-otp-gate__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}

.platform-inline-banner__label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.platform-inline-banner__value {
  font-weight: var(--font-weight-semibold);
}

/* Two-flow activation choice cards */
.platform-activate-choice__grid {
  margin-bottom: var(--space-4);
}

.platform-choice-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.platform-choice-card:hover {
  border-color: var(--color-border-default);
}

.platform-choice-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.platform-choice-card input {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.platform-choice-card__body {
  display: grid;
  gap: var(--space-1);
}

.platform-choice-card__hint {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  line-height: 1.4;
}

/* Flow panels — only the active one is visible */
.platform-activate-panel {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.platform-activate-panel.is-hidden {
  display: none;
}

/* Greyed-out public link (custom name locked behind upgrade) */
input[data-greyed-out] {
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
}

.platform-tooltip {
  border-bottom: 1px dashed currentColor;
  cursor: help;
}

/* Trust / reassurance row */
.platform-trust {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

/* Feature landing card */
.platform-card--feature {
  padding: var(--space-7);
}

.platform-howto--numbered {
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.platform-howto--numbered li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.platform-howto__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-caption);
}

.platform-howto__detail {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.platform-eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.platform-page h1 {
  margin: 0 0 var(--space-3);
}

.platform-lede {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
}

/* Manage Card home — tighter, denser header so the page reads as a control
   center rather than a long scroll (polish, not a redesign). */
.page-manage-te-home .platform-page h1 {
  margin-bottom: var(--space-1);
}

.page-manage-te-home .platform-lede {
  margin-bottom: var(--space-5);
}

.page-manage-te-home .manage-destination-choice {
  margin-top: var(--space-5);
}

.page-manage-te-home .platform-dashboard {
  margin-top: var(--space-5);
}

.page-manage-te-home .manage-te-hero {
  padding: var(--space-5);
}

.platform-alert {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-secondary);
  color: var(--color-text-primary);
}

.platform-alert--error {
  border-color: color-mix(in srgb, #b42318 35%, var(--color-border-default));
  background: color-mix(in srgb, #b42318 8%, var(--color-secondary));
}

.platform-alert--success {
  border-color: color-mix(in srgb, #067647 35%, var(--color-border-default));
  background: color-mix(in srgb, #067647 8%, var(--color-secondary));
}

.platform-alert__title {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.platform-alert p {
  margin: 0;
  color: var(--color-text-secondary);
}

.platform-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  counter-reset: platform-step;
}

.platform-progress__step {
  position: relative;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-white, #fff);
  color: var(--color-text-tertiary);
  text-align: center;
  font-size: var(--text-caption);
  counter-increment: platform-step;
}

.platform-progress__step::before {
  content: counter(platform-step);
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-semibold);
  color: inherit;
}

.platform-progress__step.is-active,
.platform-progress__step.is-complete {
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
  background: var(--color-secondary);
}

.platform-progress__label {
  display: block;
}

.platform-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-white, #fff);
}

.platform-card + .platform-card {
  margin-top: var(--space-5);
}

.platform-card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
}

.platform-form {
  display: grid;
  gap: var(--space-5);
}

.platform-field {
  display: grid;
  gap: var(--space-2);
}

.platform-field label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.platform-field input,
.platform-field select,
.platform-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-primary);
  font: inherit;
  box-sizing: border-box;
}

.platform-field input:focus,
.platform-field select:focus,
.platform-field textarea:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.platform-field input[readonly] {
  background: var(--color-secondary);
  color: var(--color-text-secondary);
}

.platform-field__hint {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.platform-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.platform-form__actions--center {
  justify-content: center;
  text-align: center;
}

.platform-form__actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .platform-form__actions .btn {
    width: auto;
  }
}

.platform-meta {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.platform-meta__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

@media (min-width: 640px) {
  .platform-meta__row {
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }
}

.platform-meta__label {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
}

.platform-meta__value {
  margin: 0;
  word-break: break-word;
  font-weight: var(--font-weight-medium);
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.platform-badge--success {
  background: color-mix(in srgb, #067647 12%, var(--color-secondary));
  color: #067647;
}

.platform-dashboard {
  display: grid;
  gap: var(--space-5);
}

/* ============================================================
   Manage Card — premium card-management experience
   Hierarchy: identity → Tap Experience → Forwarding → Activity →
   Security (rows) → Account (separated). Uses grouping, spacing and
   typography instead of equal-weight dashboard widgets.
   ============================================================ */

.manage-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

/* Manage home sits on the wide canvas but reads as a focused product column —
   a premium card-management experience (~960px), not a stretched admin
   dashboard and not a cramped single column. */
.manage-home {
  max-width: 60rem;
  margin-inline: auto;
}

/* --- 1. Card identity header — the customer's card, first. --- */
.manage-identity {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) 0 var(--space-10);
  border-bottom: 1px solid var(--color-border-subtle);
}

.manage-identity__visual {
  flex: none;
}

/* The beautiful Pufaan card visual — the customer's photo when set, else the
   default Pufaan card. Framed like a premium product, never a raw placeholder. */
.manage-card-visual {
  width: 13.5rem;
  max-width: 40vw;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 30px rgba(30, 24, 16, 0.14);
  background: var(--color-secondary);
}

.manage-card-visual__img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.manage-identity__copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.manage-identity__title {
  margin: 0;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  /* Start at the strong display size; shrink automatically so a long name
     still fits on ONE line (never wraps, never looks awkward). clamp keeps a
     readable minimum. */
  font-size: clamp(1.125rem, 2.4vw, var(--text-h1));
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  /* Always one line — the clamp above shrinks the type; this is the fallback
     for extremely long names. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-identity__role {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  /* Keep role metadata on one line too. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-identity__meta {
  margin: var(--space-2) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.manage-identity__code {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
}

.manage-identity__edit {
  display: inline-flex;
  align-items: center;
}

.manage-identity__action {
  margin-left: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.manage-identity__action-aux {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.manage-identity__action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

.manage-identity__signout {
  margin: 0;
}

.manage-identity__signout-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.manage-identity__signout-btn:hover,
.manage-identity__signout-btn:focus-visible {
  color: var(--color-error);
}

@media (max-width: 640px) {
  .manage-identity {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-6) 0 var(--space-8);
  }
  .manage-card-visual {
    width: 10rem;
  }
  .manage-identity__action {
    margin-left: 0;
    width: 100%;
    align-items: flex-start;
  }
  .manage-identity__action-buttons {
    justify-content: flex-start;
  }
  .manage-identity__action-buttons .btn {
    flex: 1 1 auto;
  }
}

/* --- Status pill — a polished product indicator, not a developer badge --- */
.manage-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.manage-status__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-text-tertiary);
}

.manage-status--live {
  background: color-mix(in srgb, #067647 10%, var(--color-secondary));
  color: #067647;
}
.manage-status--live .manage-status__dot {
  background: #067647;
}

.manage-status--idle .manage-status__dot {
  background: var(--color-text-tertiary);
}

.manage-status--muted {
  background: var(--color-secondary);
}

/* --- Layout: preview/security grid + full-width plan/upgrade --- */
/* The top grid shows the Tap Experience preview beside the compact Security
   controls. Your Plan and Next Step sit FULL-WIDTH below — the commercial
   hierarchy is the most prominent content and never competes with controls. */
.manage-layout {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

@media (min-width: 980px) {
  .manage-layout {
    /* Preview column is wider than the Security column (controls stay compact). */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-12);
  }
}

.manage-layout__main {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.manage-layout__side {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
}

/* Full-width commercial panels sit below the grid, spaced from it. */
.manage-home > .manage-panel--plan,
.manage-home > .manage-panel--upgrade,
.manage-home > .manage-panel--plus,
.manage-home > .manage-panel--shop,
.manage-home > .manage-activity {
  margin-top: var(--space-8);
}

/* Vertical rhythm: every product section after the header sits at a
   consistent, generous spacing. */
.manage-home > .manage-panel {
  margin-top: var(--space-8);
}
.manage-home > .manage-identity {
  margin-bottom: 0;
}

/* --- Panel base (subtle, not heavy boxes) --- */
.manage-panel {
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated, #ffffff);
}

.manage-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.manage-panel--primary {
  padding: var(--space-7);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.manage-panel--aside {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 70%, var(--color-secondary));
}

/* --- 2. Tap Experience (actions live in the card identity header; only the
   empty-state lead line is used on the home) --- */
.manage-te__lead {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 42rem;
}

/* --- 2b. Current experience (ONE card — describes what the card does now) --- */
.manage-panel--experience {
  padding: var(--space-7);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.manage-experience {
  display: grid;
  gap: var(--space-5);
}

.manage-experience--forwarding {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.manage-experience__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primary, #1e3a2f) 8%, var(--color-bg-elevated, #fff));
  color: var(--color-primary, #1e3a2f);
}

.manage-experience__svg {
  width: 1.4rem;
  height: 1.4rem;
}

.manage-experience__copy {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.manage-experience__label {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-experience__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.5;
}

/* The actual destination — clean, readable, never a raw URL dump. */
.manage-experience__dest {
  margin: var(--space-1) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-small);
  word-break: break-all;
  width: fit-content;
  max-width: 100%;
}

.manage-experience__secondary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-experience__preview {
  max-width: 24rem;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

.manage-experience__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.manage-experience__action {
  display: flex;
  align-items: center;
}

/* --- Inline Universal Forwarding URL input (owner Manage Card) --- */
.manage-inline-forwarding {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-url-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-elevated, #fff);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.manage-url-input:focus-within {
  border-color: var(--color-primary, #1e3a2f);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #1e3a2f) 18%, transparent);
}

.manage-url-input__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  background: color-mix(in srgb, var(--color-secondary) 60%, #fff);
  border-right: 1px solid var(--color-border-subtle);
  white-space: nowrap;
  user-select: none;
}

.manage-url-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: transparent;
  outline: none;
}

.manage-url-input input::placeholder {
  color: var(--color-text-tertiary);
}

@media (max-width: 480px) {
  .manage-url-input__prefix {
    padding: 0 var(--space-2);
  }
  .manage-url-input input {
    padding: var(--space-3);
  }
}

/* --- 2c. Upgrade block (Basic / Plus ladder) — restrained, not a promo wall --- */
.manage-panel--upgrade {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #1e3a2f) 3%, #fff) 0%, #fff 55%);
  padding: var(--space-7);
}

.manage-eyebrow__spark {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent, #a17f5a);
  margin-right: var(--space-2);
}

.manage-eyebrow__svg {
  width: 0.95rem;
  height: 0.95rem;
}

.manage-upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  max-width: 46rem;
}

.manage-upgrade__preview {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated, #fff);
}

.manage-upgrade__copy {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.manage-upgrade__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-upgrade__lede {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 34rem;
}

.manage-upgrade__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.manage-upgrade__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.5;
}

.manage-check {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-primary, #1e3a2f);
}

.manage-check svg {
  width: 1rem;
  height: 1rem;
}

.manage-upgrade__price {
  margin: var(--space-1) 0 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-upgrade__price-term {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.manage-upgrade__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.manage-upgrade__see {
  margin: 0;
  color: var(--color-link);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.manage-upgrade__see:hover,
.manage-upgrade__see:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Side-by-side upgrade ladder (Digital ID + Plus, with previews) --- */
.manage-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

.manage-upgrade-card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated, #fff);
}

.manage-upgrade-card--plus {
  border-color: color-mix(in srgb, var(--color-accent, #a17f5a) 40%, var(--color-border-default));
}

.manage-upgrade-card__head {
  display: grid;
  gap: var(--space-1);
}

.manage-upgrade-card__name {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-upgrade-card__price {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body);
}

.manage-upgrade-card__term {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-small);
}

.manage-upgrade-card__preview {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated, #fff);
}

/* --- Premium device-frame preview (mirrors the NFC product page) --- */
.manage-preview-device {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated, #fff);
}

.manage-preview-device__demo-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border-subtle);
  background: linear-gradient(180deg, var(--color-bg-accent-soft, #f3efe7), var(--color-bg-elevated));
}

.manage-preview-device__demo-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.manage-preview-device__demo-title {
  font-weight: var(--font-weight-semibold);
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.manage-preview-device__demo-note {
  margin-left: auto;
  color: var(--color-text-tertiary);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.manage-preview-device__phone {
  position: relative;
  margin: 0.9rem auto;
  width: calc(100% - 1.4rem);
  /* Match the NFC product page's iPhone proportions (372px, not a narrow
     squeezed frame) so the preview looks like a real phone. */
  max-width: 372px;
  border-radius: 36px;
  padding: 12px;
  background: #11141a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 44px -18px rgba(0, 0, 0, 0.5);
}

.manage-preview-device__speaker {
  width: 92px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 auto 8px;
}

.manage-preview-device__screen {
  height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 20px;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.manage-preview-device__screen::-webkit-scrollbar {
  width: 6px;
}

.manage-preview-device__screen::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

.manage-preview-device__screen .profile-card {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Mobile-first preview (Block 6): collapse the phone-bezel frame on narrow
   viewports so the Digital ID preview uses the full available content width —
   no dark frame, padding or speaker consuming usable viewport. The rendered
   profile is the SAME canonical experience; only the frame adapts. */
@media (max-width: 480px) {
  .manage-preview-device__phone {
    width: 100%;
    max-width: none;
    margin: 0.9rem 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .manage-preview-device__speaker {
    display: none;
  }
  .manage-preview-device__screen {
    height: 520px;
    border-radius: 0;
  }
}

.manage-upgrade-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.manage-upgrade-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.45;
}

.manage-upgrade-card__action {
  margin-top: var(--space-2);
}

.manage-upgrade-card__owned {
  display: inline-flex;
  align-items: center;
}

/* Plus-value lines — makes the upgrade tangible (who's tapping, export,
   branding, support, capacity). */
.manage-upgrade-card__value {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.manage-upgrade-card__value li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.45;
}

.manage-upgrade-card__value-check {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-accent, #a17f5a);
}

.manage-upgrade-card__value-check svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* --- Card-scoped purchase page (/manage/:code/plans) --- */
.manage-plans {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8);
  align-items: start;
}

.manage-plans__main {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.manage-plans__form .platform-form__actions {
  margin-top: var(--space-4);
}

/* On-platform Stripe Payment Element — the card form mounts in-page below the
   button so the customer stays on pufaan.com (no checkout.stripe.com redirect).
   The Pay button appears under the form once it's ready. */
.manage-plans__embedded {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-plans__embedded > div {
  min-height: 200px;
}

.manage-plans__embedded .manage-plans__pay-row {
  margin-top: var(--space-4);
}

.manage-plans__embedded [data-plan-pay] {
  width: 100%;
  margin-top: var(--space-4);
}

.manage-plan__price-lg {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.manage-plans__preview {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

/* Basic vs Plus comparison table (value is explicit, never implied). */
.manage-panel--compare {
  margin-top: var(--space-8);
}

.manage-compare {
  width: 100%;
  border-collapse: collapse;
}

.manage-compare th,
.manage-compare td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-body);
}

.manage-compare thead th {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.manage-compare thead th.manage-compare__focus {
  color: var(--color-accent, #a17f5a);
}

.manage-compare tbody th {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.manage-compare__cell {
  width: 6rem;
}

.manage-compare__cell--focus {
  background: color-mix(in srgb, var(--color-accent, #a17f5a) 6%, transparent);
}

.manage-compare__check {
  display: inline-flex;
  align-items: center;
  color: var(--color-success, #1a7a4c);
}

.manage-compare__check svg {
  width: 1.05rem;
  height: 1.05rem;
}

.manage-compare__dash {
  color: var(--color-text-tertiary);
}

/* --- Manage Card · Plus demo page — visual tour of Pufaan Digital ID Plus. */
.manage-demo__upsell {
  margin-bottom: var(--space-6);
}

.manage-demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.manage-demo__phone {
  position: sticky;
  top: var(--space-6);
}

.manage-demo__panels {
  display: grid;
  gap: var(--space-5);
}

.manage-demo__panel {
  margin: 0;
}

.manage-demo__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.manage-demo__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-bg-elevated, #fff);
}

.manage-demo__stat-value {
  font-size: var(--text-title, 1.5rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary, #1e3a2f);
  line-height: 1.1;
}

.manage-demo__stat-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.manage-demo__insights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.manage-demo__insights li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.manage-demo__leads {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.manage-demo__leads li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-bg-elevated, #fff);
}

.manage-demo__lead-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #a17f5a) 14%, transparent);
  color: var(--color-accent, #a17f5a);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.manage-demo__lead-main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.manage-demo__lead-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-demo__lead-meta {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-demo__export {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: 0;
}

.manage-demo__brand {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.manage-demo__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.manage-demo__checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.manage-demo__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-demo__owned {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.manage-upgrade-card__demo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent, #a17f5a);
  text-decoration: none;
}

.manage-upgrade-card__demo:hover {
  text-decoration: underline;
}

.manage-upgrade-card__demo-svg {
  width: 0.9rem;
  height: 0.9rem;
}

@media (max-width: 900px) {
  .manage-demo__grid {
    grid-template-columns: 1fr;
  }
  .manage-demo__phone {
    position: static;
  }
}

@media (max-width: 560px) {
  .manage-demo__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .manage-upgrade-grid {
    grid-template-columns: 1fr;
  }
  .manage-plans {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .manage-compare th,
  .manage-compare td {
    padding: var(--space-2) var(--space-3);
  }
}

/* --- Your Plan — the most prominent commercial panel. Full-width, calm,
   premium. Distinguishable from the upgrade by its solid elevated surface. */
.manage-panel--plan {
  padding: var(--space-7) var(--space-8);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 15, 15, 0.06));
  border-color: var(--color-border-default);
}

.manage-plan {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.manage-plan__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.manage-plan__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primary, #1e3a2f) 8%, var(--color-bg-elevated, #fff));
  color: var(--color-primary, #1e3a2f);
}

.manage-plan__icon-svg {
  width: 1.4rem;
  height: 1.4rem;
}

.manage-plan__copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.manage-plan__name {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.manage-plan__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

.manage-plan__body {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  border-left: 1px solid var(--color-border-subtle);
  padding-left: var(--space-8);
}

.manage-plan__lede {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 40rem;
}

.manage-plan__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}

.manage-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.45;
}

.manage-plan__features .manage-check {
  margin-top: 0.15rem;
}

/* Purchase page (/manage/:code/plans): the plan panel sits in a ~528px column
   next to the preview, so the two-column identity|body split squeezes the
   feature list into a ~188px body. Stack it instead: identity + price on one
   row, then the feature list full-width in a comfortable 2-column grid — the
   write-ups stay inside the card, never overflow it. */
.page-manage-plans .manage-plan {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.page-manage-plans .manage-plan__body {
  border-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-5);
}

.page-manage-plans .manage-plan__features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .page-manage-plans .manage-plan__features {
    grid-template-columns: 1fr;
  }
}

/* --- Combined "Your plan + Current experience" section (INLINE) --- */
.manage-panel--plan-exp {
  padding: var(--space-7) var(--space-8);
}

.manage-plan-exp {
  display: grid;
  gap: var(--space-6);
}

.manage-plan-exp__plan {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.manage-plan-exp__plan .manage-plan__features {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2) var(--space-5);
}

/* Inline current-experience row — compact, reads as part of the plan. */
.manage-plan-exp__inline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 0.75rem);
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 88%, transparent);
  min-width: 0;
}

.manage-plan-exp__inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--color-primary, #1e3a2f) 8%, var(--color-bg-elevated, #fff));
  color: var(--color-primary, #1e3a2f);
}

.manage-plan-exp__inline-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.manage-plan-exp__inline-copy strong {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-plan-exp__inline-copy a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  font-size: var(--text-small);
  word-break: break-all;
}

.manage-plan-exp__inline-copy a:hover,
.manage-plan-exp__inline-copy a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-plan-exp__inline-dest {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-small);
  word-break: break-all;
}

.manage-plan-exp__inline-note {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.manage-plan-exp__inline-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

@media (max-width: 760px) {
  .manage-plan-exp {
    gap: var(--space-5);
  }
  .manage-plan-exp__inline {
    flex-wrap: wrap;
  }
  .manage-plan-exp__inline-action {
    width: 100%;
    padding-left: calc(2.5rem + var(--space-4));
  }
}

/* --- Digital ID (Basic/Plus customers — a compact summary, not a full
   public-profile copy). The preview frame stays capped so a long profile
   scrolls inside it instead of dominating the page. --- */
.manage-panel--digital {
  padding: var(--space-7);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.manage-digital {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.manage-digital__preview {
  min-width: 0;
}

/* The preview is a CONTAINED product preview, never a full inline render of a
   long profile. Cap the frame height so a profile with many sections scrolls
   inside the frame instead of stretching the whole Manage Card page. */
.manage-preview__frame {
  max-width: 24rem;
  max-height: 28rem;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden auto;
  border: 1px solid var(--color-border-subtle);
  position: relative;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

.manage-preview__frame .profile-card {
  /* Keep the card's own padding so the inner content isn't clipped by the frame. */
  padding-bottom: var(--space-6);
}

.manage-digital__info {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.manage-digital__name {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-digital__url {
  margin: 0;
}

.manage-digital__url a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  word-break: break-all;
}

.manage-digital__url a:hover,
.manage-digital__url a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-digital__desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.5;
}

.manage-digital__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.manage-preview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.manage-preview__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.manage-preview__view:hover,
.manage-preview__view:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-preview__view-svg {
  width: 1rem;
  height: 1rem;
}

/* --- Plus capabilities (Plus customers only — no irrelevant upgrade CTA) --- */
.manage-panel--plus {
  padding: var(--space-7);
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 70%, var(--color-secondary));
}

.manage-plus__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}

.manage-plus__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.manage-plus__check {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-success, #1a7a4c);
}

.manage-plus__check svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-plus__copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.manage-plus__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-plus__desc {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

.manage-plus__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 760px) {
  .manage-plan {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .manage-plan__body {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-5);
  }
  .manage-plan__features,
  .manage-plus__list {
    grid-template-columns: 1fr;
  }
}

/* --- 2d. Shop cross-sell (Plus only) --- */
.manage-panel--shop {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 60%, var(--color-secondary));
}

.manage-shop {
  display: grid;
  gap: var(--space-4);
}

.manage-shop__lede {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}

.manage-shop__grid {
  display: grid;
  gap: var(--space-3);
}

.manage-shop__item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-elevated, #fff);
  border: 1px solid var(--color-border-subtle);
}

.manage-shop__img {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  object-fit: cover;
  border-radius: 0.75rem;
}

.manage-shop__body {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
  align-items: start;
}

.manage-shop__name {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-shop__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Editor next-tier note (premium conversion, not an ugly lock) --- */
.te-next-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  background: color-mix(in srgb, var(--color-accent, #a17f5a) 6%, var(--color-bg-elevated, #fff));
  border: 1px solid color-mix(in srgb, var(--color-accent, #a17f5a) 22%, transparent);
}

.te-next-tier__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent, #a17f5a);
}

.te-next-tier__svg {
  width: 0.9rem;
  height: 0.9rem;
}

.te-next-tier__copy {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .manage-experience--forwarding {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .manage-upgrade {
    grid-template-columns: 1fr;
  }
  .manage-upgrade__preview {
    max-width: 100%;
  }
  .manage-experience__preview {
    max-width: 100%;
  }
  .manage-layout {
    gap: var(--space-6);
  }
  .manage-preview__frame {
    max-width: 100%;
  }
  .manage-panel--plan {
    padding: var(--space-6);
  }
  .manage-digital {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .manage-digital__preview .manage-preview__frame {
    max-width: 100%;
  }
  .manage-experience__secondary {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}

/* --- 3. Forwarding (explicit state, clearly secondary) --- */
.manage-panel--forwarding {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 60%, var(--color-secondary));
  padding: var(--space-5) var(--space-6);
}

.manage-forwarding {
  display: grid;
  gap: var(--space-4);
}

.manage-forwarding__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.manage-forwarding__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--color-secondary);
  color: var(--color-text-tertiary);
}

.manage-forwarding__svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-forwarding__copy {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.manage-forwarding__label {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  word-break: break-word;
}

.manage-forwarding__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

/* --- 4. Activity — compact, clearly secondary. One row of four stats on
   desktop; answers taps / last activity / status / destination without
   competing with the card. --- */
.manage-panel--activity {
  padding: var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 55%, var(--color-secondary));
}

.manage-activity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
}

.manage-activity__item {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.manage-activity__icon {
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1);
}

.manage-activity__svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-activity__value {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.manage-activity__value--date {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  word-break: break-word;
}

.manage-activity__label {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile: the compact activity row wraps to 2 columns so the numbers stay
   readable and never squeeze. Kept after the base rule so it wins. */
@media (max-width: 760px) {
  .manage-activity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

/* --- 5. Security (compact settings rows) --- */
.manage-panel--security {
  padding: var(--space-5) var(--space-6);
}

.manage-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.manage-row + .manage-row {
  border-top: 1px solid var(--color-border-subtle);
}

.manage-row__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  text-decoration: none;
  color: var(--color-text-primary);
}

.manage-row__link:hover,
.manage-row__link:focus-visible {
  color: var(--color-text-primary);
}

.manage-row__link:hover .manage-row__label,
.manage-row__link:focus-visible .manage-row__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--color-secondary);
  color: var(--color-link);
}

.manage-row__svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-row__copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 0.1rem;
}

.manage-row__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.manage-row__desc {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
}

.manage-row__chevron {
  flex: none;
  color: var(--color-text-tertiary);
}

.manage-row__chevron-svg {
  width: 1rem;
  height: 1rem;
}

/* --- 6. (Account / Sign out lives in the card identity header.) --- */

/* --- Finish-setup banner --- */
.manage-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.manage-banner__body p {
  margin: 0 0 var(--space-1);
}

.manage-banner__body .platform-field__hint,
.manage-banner__body p + p {
  margin: 0;
}

/* CTA icon sizing inside buttons */
.btn__icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.15rem;
}
.btn__icon svg,
.btn__icon .icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* --- Public card state pages (disabled / lost / not set up) --- */
.page-card-state .platform-page__inner {
  max-width: 34rem;
}

.page-card-state h1 {
  margin-bottom: var(--space-3);
}

/* Premium public "This card isn't set up yet" state — calm, private, nothing
   that leaks owner or setup internals. */
.platform-card-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl, 24px);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.platform-card-state .platform-eyebrow {
  margin-bottom: var(--space-4);
}

.platform-card-state h1 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.platform-card-state .platform-lede {
  max-width: 26rem;
  margin-inline: auto;
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  line-height: 1.6;
}

.platform-card-state__meta {
  margin: var(--space-4) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.platform-card-state .platform-form__actions {
  justify-content: center;
  margin-top: var(--space-8);
}

/* --- Old dashboard helpers retained for other pages --- */
.platform-dashboard__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .platform-dashboard__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
  }
}

/* Secondary cards (Security / Recovery / Advanced) stay muted */
.platform-card--muted {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 60%, var(--color-secondary));
}

.platform-card--muted .platform-card__title {
  font-size: var(--text-body);
}

.platform-card--recovery .platform-form__actions--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* Forwarding editor — compact single-card flow with a confirm step */
.manage-forwarding {
  max-width: 42rem;
}

.manage-forwarding .platform-alert {
  margin-bottom: var(--space-4);
}

.manage-forwarding__divider {
  margin: var(--space-6) 0 var(--space-4);
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.manage-forwarding__switch {
  display: grid;
  gap: var(--space-2);
}

.manage-forwarding__te summary {
  cursor: pointer;
}

.manage-forwarding__te-body {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
}

.platform-card--recovery .platform-form__actions--stacked .btn {
  width: 100%;
  justify-content: flex-start;
}

@media (min-width: 480px) {
  .platform-card--recovery .platform-form__actions--stacked .btn {
    width: auto;
  }
}

.platform-stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .platform-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform-stat {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.platform-stat__label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.platform-stat__value {
  margin: 0;
  font-size: var(--text-body-lg, 1.125rem);
  font-weight: var(--font-weight-semibold);
}

.platform-placeholder {
  padding: var(--space-5);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-tertiary);
}

.platform-placeholder h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.platform-page #edit-destination {
  scroll-margin-top: var(--space-16);
}

.platform-howto {
  margin: 0 0 var(--space-5);
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.platform-success {
  text-align: center;
}

.platform-success__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-5);
  border-radius: 999px;
  background: color-mix(in srgb, #067647 12%, var(--color-secondary));
  color: #067647;
  font-size: 1.5rem;
  line-height: 1;
}

/* Activation success (code download) — refined hierarchy:
   ✓ mark → eyebrow → h1 → lede → card-code panel → primary CTA → ghost Done. */
.page-code-download .platform-success--done {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  padding-block: var(--space-6) var(--space-8);
}

.page-code-download .platform-success--done .platform-lede {
  max-width: 34rem;
  margin-inline: auto;
}

.platform-success__code {
  width: 100%;
  max-width: 30rem;
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  text-align: center;
}

.platform-success__code-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.platform-success__code-value {
  margin: 0 0 var(--space-4);
}

.platform-success__code-value code {
  font-size: var(--text-lg, 1.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
}

.platform-success__code-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.platform-success__cta {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  width: 100%;
  max-width: 26rem;
}

/* ============================================================
   Hosted Tap Experience preview / upgrade (forwarding-only cards)
   ============================================================ */
.page-hosted-preview .platform-page {
  padding-block: var(--space-8) var(--space-12);
}

.page-hosted-preview h1 {
  margin: 0 0 var(--space-2);
}

.page-hosted-preview .platform-lede {
  margin: 0 auto var(--space-6);
  max-width: 40rem;
}

.platform-tap-preview__intro {
  margin: var(--space-6) 0 var(--space-4);
  text-align: center;
}

.platform-tap-preview__intro h2 {
  margin: 0 0 var(--space-1);
}

.platform-tap-preview__intro p {
  margin: 0 auto;
  max-width: 36rem;
  color: var(--color-text-secondary);
}

.platform-tap-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}

@media (min-width: 640px) {
  .platform-tap-preview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .platform-tap-preview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform-tap-preview__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.platform-tap-preview__card:hover {
  border-color: var(--color-border-default);
  transform: translateY(-2px);
}

.platform-tap-preview__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.platform-tap-preview__card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.platform-tap-preview__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.platform-tap-preview__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #067647 12%, var(--color-secondary));
  color: #067647;
  font-size: 1rem;
}

.platform-tap-preview__card h3 {
  margin: 0;
  font-size: var(--text-md);
}

.platform-tap-preview__card-desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.platform-tap-preview__card-caps {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.platform-tap-preview__card-caps li {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-white, #fff);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

/* Live read-only demo preview inside each hosted-preview card. Uses the same
   profile renderer as the public page so the customer sees exactly what their
   card could become. Non-editable; clearly labelled as demo content. */
.platform-tap-preview__card-live {
  margin-top: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #f8f6f1;
  max-height: 26rem;
  overflow-y: auto;
}

.platform-tap-preview__card-live .te-preview-card {
  margin: 0;
}

.platform-tap-preview__card-live .te-preview-card__tag,
.platform-tap-preview__card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: var(--space-2);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #067647 10%, var(--color-secondary));
  color: #067647;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.platform-tap-preview__card-tag {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.platform-tap-preview__offer {
  display: grid;
  gap: var(--space-5);
  text-align: left;
}

@media (min-width: 720px) {
  .platform-tap-preview__offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: start;
  }
}

.platform-tap-preview__offer-main h2 {
  margin: 0 0 var(--space-2);
}

.platform-tap-preview__offer-main .platform-lede {
  margin: 0 0 var(--space-4);
}

.platform-tap-preview__offer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.platform-tap-preview__offer-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
}

.platform-tap-preview__offer-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #067647;
  font-weight: var(--font-weight-semibold);
}

.platform-tap-preview__offer-side {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white, #fff);
}

.platform-tap-preview__price {
  margin: 0;
  font-size: var(--text-2xl, 2rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.platform-tap-preview__price-per {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
}

/* Post-activation Plus upgrade (hosted Tap Experience live). */
.platform-success__plus {
  display: grid;
  gap: var(--space-5);
  text-align: left;
  margin-top: var(--space-6);
}

@media (min-width: 720px) {
  .platform-success__plus {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: start;
  }
}

.platform-success__plus-main h2 {
  margin: 0 0 var(--space-2);
}

.platform-success__plus-main .platform-lede {
  margin: 0 0 var(--space-4);
  max-width: none;
}

/* ============================================================
   Tap Experience editor (canonical — onboarding, manage, portal)
   ============================================================ */
/* Split form | preview by the EDITOR's own width, not the viewport.
   Viewport media queries forced a 2-col grid inside the narrow 36rem
   activation shell on desktop — crushing the live profile card into a
   tiny overlapping “dying” preview. */
.te-editor {
  container-type: inline-size;
  container-name: te-editor;
}

.te-editor__layout {
  display: grid;
  gap: var(--space-8);
}

@container te-editor (min-width: 880px) {
  .te-editor__layout {
    /* Form scrolls; phone-sized preview sticks on the right at real card size. */
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
    align-items: start;
    gap: var(--space-8);
  }

  .te-editor__preview {
    position: sticky;
    top: var(--space-6);
    align-self: start;
    width: 100%;
    max-width: 28rem;
    justify-self: end;
  }

  .te-editor__preview-frame.is-mobile {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
  }
}

.te-editor__form .platform-form {
  display: grid;
  gap: var(--space-4);
}

.te-editor__section-head {
  margin: var(--space-2) 0 var(--space-3);
}

.te-editor__section-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
}

.te-editor__links,
.te-editor__sections {
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.te-editor__links .platform-fieldset,
.te-editor__sections .platform-fieldset {
  margin-bottom: var(--space-4);
}

/* Live preview — sticky only when the editor is wide enough for a real
   side column (see @container above). Sticky in a single narrow column is
   what made the card float over the form on desktop activation. */
.te-editor__preview {
  position: static;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-height: none;
}

.te-editor__preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  flex: none;
}

.te-editor__preview-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.te-editor__preview-tools [data-te-import-demo] {
  flex-shrink: 0;
}

.te-editor__device-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.te-editor__device-toggle .btn--ghost {
  min-height: 2rem;
  padding: 0 0.6rem;
  font-size: 0.78rem;
}

.te-editor__device-toggle .btn--ghost.is-active {
  background: var(--color-hover-surface-strong);
  border-color: var(--color-border-strong);
}

.te-editor__demo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #067647 10%, var(--color-secondary));
  color: #067647;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  max-width: 100%;
}

.te-editor__public-link {
  flex: 0 0 auto;
}

.te-editor__preview-frame {
  flex: none;
  min-height: 0;
  height: auto;
  overflow: visible;
  overscroll-behavior: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px rgba(30, 24, 16, 0.1);
  transition: max-width var(--duration-normal) var(--ease-standard);
  background: var(--color-secondary);
  padding: var(--space-4);
}

/* Live preview: wheel-scroll inside the phone frame, no visible scrollbar. */
.te-editor__preview-frame[data-demo-scroll-viewport] {
  max-height: min(36rem, 72vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.te-editor__preview-frame[data-demo-scroll-viewport]::-webkit-scrollbar {
  display: none;
}

/* During a programmatic scroll (editor→preview sync) disable CSS smooth so the
   JS animation drives it; user manual scrolling keeps native smooth behavior. */
.te-editor__preview-frame.is-syncing {
  scroll-behavior: auto;
}

.te-editor__preview-frame.is-mobile {
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}

.te-editor__preview-frame.is-desktop {
  max-width: 100%;
}

.te-editor__preview-frame .profile-page {
  min-height: 0;
  padding: var(--space-6) var(--space-4);
  border-radius: calc(var(--radius-xl) - var(--space-2));
  background: #f8f6f1;
}

@media (max-width: 899px) {
  /* Mobile: hide live preview by default — form first. Optional Show preview. */
  .te-editor__preview {
    position: static;
    order: 2;
    top: auto;
    max-height: none;
    align-self: stretch;
    min-width: 0;
    width: 100%;
  }

  .te-editor:not(.te-editor--preview-open) .te-editor__preview {
    display: none !important;
  }

  .te-editor__layout {
    display: flex;
    flex-direction: column;
  }

  .te-editor__preview-head {
    flex-direction: column;
    align-items: stretch;
  }

  .te-editor__preview-tools,
  .te-editor__demo-tag,
  .te-editor__public-link {
    width: 100%;
  }

  .te-editor__public-link {
    text-align: center;
  }

  .te-editor__preview-frame.is-mobile,
  .te-editor__preview-frame.is-desktop {
    max-width: 100%;
  }
}

/* ---------- Grouped cards ---------- */
.te-editor__form .platform-form {
  display: grid;
  gap: var(--space-6);
}

.te-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  scroll-margin-top: var(--space-8);
}

.te-card__title {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-secondary) 55%, transparent);
}

.te-card__body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.te-card__field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* Inputs inside the editor's grouped cards must fill their column and never
   shrink/clip inside the 2-col grid (text fields were being cut off). */
.te-card__field input,
.te-card__field select,
.te-card__field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-primary);
  font: inherit;
  line-height: 1.25;
  vertical-align: middle;
}

.te-card__field select {
  appearance: auto;
  -webkit-appearance: menulist;
  background-image: none;
  cursor: pointer;
}

.te-card__field textarea {
  height: auto;
  padding-block: var(--space-3);
  min-height: 6rem;
}

.te-link-row .platform-grid--2,
.te-section-row .platform-grid--2,
.te-contact-row .platform-grid--2 {
  align-items: start;
}

.te-link-row .te-card__field {
  align-content: start;
}

.te-card__field input:focus,
.te-card__field select:focus,
.te-card__field textarea:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.te-card__field label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Profile group — the card's identity. The large avatar sits above the name
   so operators see the photo they're uploading at full prominence. */
.te-card[data-te-card="profile"] .te-card__body {
  gap: var(--space-5);
}

.te-card[data-te-card="profile"] .profile-image-uploader__drop--avatar {
  min-height: 16rem;
}

.te-card__avatar .profile-image-uploader {
  gap: 0.9rem;
}

.te-card__field label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.te-link-row,
.te-section-row,
.te-contact-row {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.te-contact-row .platform-grid {
  margin-bottom: var(--space-2);
}

.te-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.te-row__title {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.te-row__order {
  display: inline-flex;
  gap: 0.25rem;
}

.te-row__order .btn--ghost {
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
}

.te-row__order .btn--ghost:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Link/section rows container + add/remove/toggle controls */
.te-rows {
  display: grid;
  gap: var(--space-4);
}

.te-row__add {
  justify-self: start;
}

/* Divider between links and optional sections inside the merged card. */
.te-card__divider {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-1) 0 var(--space-1);
}

.te-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.5rem;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.te-row__toggle input {
  width: auto;
  min-height: auto;
  margin: 0;
  accent-color: var(--color-primary);
}

.te-row__remove {
  color: var(--color-text-tertiary);
}

.te-row__remove:hover {
  color: var(--color-danger, #b42318);
  border-color: color-mix(in srgb, var(--color-danger, #b42318) 35%, transparent);
}

/* Empty states */
.te-empty {
  margin: var(--space-1) 0 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-tertiary);
  text-align: center;
}

/* Theme selector — compact chips under the profile card */
.te-theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.te-theme-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-elevated);
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.te-theme-option input {
  width: auto;
  margin: 0;
  accent-color: var(--color-primary);
}

.te-theme-option:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-elevated));
  color: var(--color-primary);
}

/* Sticky actions + saving feedback */
.te-editor__sticky-actions {
  position: sticky;
  top: max(var(--space-3), env(safe-area-inset-top, 0px));
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-primary, #1a1a1a);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated, #fff);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
}

.te-editor__sticky-actions > .btn,
.te-editor__sticky-actions > a.btn,
.te-editor__sticky-actions > button {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  line-height: 1.2;
}

.te-editor__sticky-actions [data-te-status]:empty {
  display: none;
}

.te-editor__sticky-actions [data-te-status]:not(:empty) {
  flex: 1 1 100%;
  margin: 0;
}

@media (max-width: 899px) {
  .te-editor__sticky-actions {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: calc(100% + 2 * clamp(var(--space-4), 2vw, var(--space-6)));
    max-width: none;
    box-sizing: border-box;
    margin: calc(-1 * clamp(var(--space-4), 2vw, var(--space-6)))
      calc(-1 * clamp(var(--space-4), 2vw, var(--space-6)))
      var(--space-3);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
    flex-wrap: wrap;
  }

  .te-editor__sticky-actions [data-te-submit],
  .te-editor__sticky-actions [data-te-submit-preview],
  .te-editor__sticky-actions [data-te-preview-only] {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
  }

  .te-preview-toggle--mobile {
    display: inline-flex;
  }
}

.te-editor__sticky-actions [data-te-submit-preview],
.te-editor__sticky-actions [data-te-preview-only] {
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .te-preview-toggle--mobile,
  [data-te-hide-preview] {
    display: none !important;
  }
}

.te-editor__sticky-actions [data-te-status] {
  font-weight: var(--font-weight-medium, 600);
  color: var(--color-text, #111);
}

.te-editor__form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.te-status--success {
  color: var(--color-success, #1a7a4c);
  font-weight: var(--font-weight-medium);
}

.te-social-help {
  margin: var(--space-2) 0 var(--space-4);
  padding-left: 1.2em;
  list-style: disc;
}

.te-social-help li {
  margin: 0.2em 0;
}

.te-plan-quota {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, #eee);
  color: var(--color-text-secondary);
}

.te-plan-quota strong {
  color: var(--color-text-primary);
}

.te-link-find-wrap {
  margin: var(--space-1) 0 0;
}

.te-link-find {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.te-editor__sticky-actions [data-te-status].platform-alert--error,
.te-editor__form-actions [data-te-status].platform-alert--error {
  flex: 1 1 12rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #b42318 10%, #fff);
  color: #9b1c1c;
}

.te-import-demos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary, #111) 4%, var(--color-bg-elevated, #fff));
}

.te-import-demos__label {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 600);
  color: var(--color-text, #111);
}

.te-import-demos__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.te-import-demos__btn {
  flex: 1 1 9rem;
  justify-content: center;
  border-width: 2px;
  font-weight: var(--font-weight-medium, 600);
}

@media (max-width: 899px) {
  .te-editor--preview-collapsed .te-editor__preview-frame,
  .te-editor--preview-collapsed .te-editor__device-toggle {
    display: none !important;
  }

  .te-editor--preview-collapsed .te-editor__preview {
    padding-bottom: 0;
  }

  /* Entire preview column stays hidden unless customer opens it. */
  .te-editor:not(.te-editor--preview-open) .te-editor__preview {
    display: none !important;
  }
}

/* Save buttons disabled during submit */
[data-te-submit]:disabled,
[data-te-submit][aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

/* Unsaved changes indicator */
.te-editor.is-dirty .te-editor__sticky-actions {
  border-color: var(--color-border-focus);
}

/* ============================================================
   Premium avatar editor modal (crop / zoom / rotate)
   ============================================================ */
.profile-image-editor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.profile-image-editor.is-open {
  display: flex;
}

.profile-image-editor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 11, 0.55);
  backdrop-filter: blur(3px);
}

.profile-image-editor__panel {
  position: relative;
  width: min(560px, 100%);
  background: var(--color-bg-elevated, #fff);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.profile-image-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-image-editor__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
}

.profile-image-editor__canvas-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.profile-image-editor__canvas {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: #f3eee6;
  touch-action: none;
  cursor: grab;
  border: 1px solid var(--color-border-subtle);
}

.profile-image-editor__canvas:active {
  cursor: grabbing;
}

.profile-image-editor__zoom {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 90%, transparent);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.profile-image-editor__zoom .btn--ghost {
  min-height: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
}

.profile-image-editor__actions {
  display: flex;
  justify-content: flex-end;
}

body.has-image-editor {
  overflow: hidden;
}

/* Premium avatar drop (large placeholder) */
.profile-image-uploader__drop--avatar {
  min-height: 13rem;
  border-radius: var(--radius-xl);
}

.profile-image-uploader__drop--avatar .profile-image-uploader__drop-icon {
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
}

.profile-image-uploader__preview-thumb img {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.platform-success__list {
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: var(--space-4);
}

.platform-success__list li {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.platform-success__list strong {
  display: block;
  margin-bottom: var(--space-1);
}

.platform-success__list p {
  margin: 0;
  color: var(--color-text-secondary);
}

.platform-success__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  text-align: left;
  align-items: flex-start;
}

.platform-success__item strong {
  display: block;
  margin-bottom: var(--space-1);
}

.platform-success__item p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
}

.platform-success__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-caption);
  margin: 0 !important;
}

.platform-redirect {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-4);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.platform-redirect.is-visible {
  opacity: 1;
}

/* HQ staff TE complete — vertically + horizontally center the success card */
.page-staff-onboard-complete .site-main {
  display: flex;
  flex-direction: column;
}

.page-staff-onboard-complete .platform-page {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: var(--space-8) var(--space-12);
  box-sizing: border-box;
}

.page-staff-onboard-complete .platform-page__inner {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.page-staff-onboard-complete .platform-success--done {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
  width: 100%;
}

.page-staff-onboard-complete .platform-success--done .platform-lede {
  max-width: 26rem;
  margin-inline: auto;
}

.page-staff-onboard-complete .platform-success__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}

.page-staff-onboard-complete .platform-success__cta .btn {
  width: 100%;
  justify-content: center;
}

.platform-redirect__brand {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-body-lg, 1.125rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

.platform-redirect__spinner {
  width: 2rem;
  height: 2rem;
  margin: var(--space-5) auto 0;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-text-primary);
  border-radius: 999px;
  animation: platform-spin 0.8s linear infinite;
}

@keyframes platform-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-redirect__spinner {
    animation: none;
    border-top-color: var(--color-border-default);
    opacity: 0.7;
  }

  .platform-redirect {
    transition: none;
  }
}

/* ============================================================
   Premium gates (EPIC-006) — graceful degradation.
   Shown instead of a broken/locked control until a capability
   is granted. Never blocks existing Free functionality.
   ============================================================ */
.premium-gate {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-secondary) 60%, transparent);
}

.premium-gate__label {
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.premium-gate__message {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.premium-gate__cta {
  justify-self: start;
}

.premium-gate__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.7rem;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.premium-gate__badge:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* Staff offline onboard TE — laptop + mobile HQ workspace.
   Match Manage / portal: profile.css styles the live renderProfileCard preview.
   No centered success-card stretch; form | sticky phone preview side-by-side. */
.page-tap-experience-setup--staff .container.container--xl {
  width: min(100% - (2 * var(--gutter, 1.25rem)), 92rem);
  max-width: none;
}

.page-tap-experience-setup--staff .platform-page {
  padding-block: var(--space-6) var(--space-12);
}

.page-tap-experience-setup--staff .platform-page__inner--wide {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.staff-te {
  display: grid;
  gap: var(--space-6);
  width: 100%;
  text-align: left;
}

.staff-te__header {
  display: grid;
  gap: var(--space-5);
}

.staff-te__intro h1 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  letter-spacing: -0.02em;
}

.staff-te__intro .platform-lede {
  max-width: 44rem;
  margin: 0;
}

.staff-te__meta {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated, #fff);
}

.staff-te__meta-item {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.staff-te__meta-item dt {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.staff-te__meta-item dd {
  margin: 0;
  min-width: 0;
}

.staff-te__meta-item code {
  word-break: break-all;
}

.staff-te .te-editor {
  margin-top: 0;
  width: 100%;
}

.te-username-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.te-username-prefix {
  font-size: 0.875rem;
  color: var(--platform-muted, #5b6570);
  white-space: nowrap;
}

.te-username-row input {
  flex: 1 1 10rem;
  min-width: 0;
}

/* Laptop / desktop: real two-column editor + sticky phone preview */
@media (min-width: 900px) {
  .staff-te__meta {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }

  .page-tap-experience-setup--staff .te-editor__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 26rem);
    align-items: start;
    gap: var(--space-8);
  }

  .page-tap-experience-setup--staff .te-editor__preview {
    display: flex !important;
    position: sticky;
    top: var(--space-5);
    align-self: start;
    width: 100%;
    max-width: 26rem;
    justify-self: end;
    z-index: 1;
  }

  .page-tap-experience-setup--staff .te-editor__form {
    min-width: 0;
  }

  .page-tap-experience-setup--staff .te-editor__preview-frame {
    max-width: 100%;
    width: 100%;
    box-shadow: 0 22px 60px rgba(30, 24, 16, 0.14);
  }

  .page-tap-experience-setup--staff .te-editor__preview-frame.is-mobile {
    max-width: 100%;
    margin-inline: 0;
  }

  /* Contain public profile-page chrome inside the phone frame (same as Manage). */
  .page-tap-experience-setup--staff .te-editor__preview-frame .profile-page {
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-4);
    background: #f8f6f1;
  }

  .page-tap-experience-setup--staff .te-editor__preview-frame .profile-page::before {
    display: none;
  }

  .page-tap-experience-setup--staff .te-editor__preview-frame .profile-card {
    width: 100%;
    max-width: none;
  }
}

/* Mobile / narrow laptop: full-width form first; optional preview below */
@media (max-width: 899px) {
  .page-tap-experience-setup--staff .platform-page {
    padding-block: var(--space-4) var(--space-10);
  }

  .staff-te__meta {
    grid-template-columns: 1fr;
  }

  .page-tap-experience-setup--staff .te-editor__layout {
    grid-template-columns: 1fr;
  }

  .page-tap-experience-setup--staff .te-editor__preview {
    position: static;
    max-width: none;
    width: 100%;
    display: flex !important; /* HQ needs the real card visible on phone too */
    order: 2;
  }

  .page-tap-experience-setup--staff .te-editor__preview-frame .profile-page {
    min-height: 0;
    padding: var(--space-4);
  }

  .page-tap-experience-setup--staff .te-editor__preview-frame .profile-page::before {
    display: none;
  }
}

/* ===== activation.css ===== */
/*
 * Pufaan activation — focused first-time setup surface.
 * Loaded only by activation pages so the shared platform stylesheet (which
 * already provides .platform-field, .platform-otp-gate__*, .platform-fieldset,
 * .platform-form__actions, .btn) stays untouched for dashboard/manage pages.
 *
 * This file contains ONLY the activation-specific delta:
 *   1. Logo-only activation header.
 *   2. State-machine display locks (OTP / password visibility layers).
 *   3. Password UX (show/hide, strength meter, requirements, match feedback).
 *   4. Small activation-page overrides (steps, card, layout rhythm).
 */

.page-activate-form {
  --activation-max: 38rem;
}

/* Keep trust mark visible without the full platform nav. */
.page-activate-form .site-header {
  position: sticky;
  top: 0;
  height: 3.5rem;
  min-height: 3.5rem;
  background: var(--color-white, #fff);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-activate-form .site-header__inner {
  grid-template-columns: auto;
  justify-content: start;
  height: 3.5rem;
  min-height: 3.5rem;
  padding-block: 0;
}

.page-activate-form .nav-desktop-wrap,
.page-activate-form .site-header__mobile-tools,
.page-activate-form .site-footer {
  display: none !important;
}

.page-activate-form .brand-logo__img {
  width: auto;
  height: 1.75rem;
}

.page-activate-form .platform-page__inner {
  max-width: var(--activation-max);
}

.page-activate-form .platform-page {
  padding-block: clamp(1.5rem, 4vw, 2.75rem) 3.5rem;
}

.page-activate-form .platform-page h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.page-activate-form .platform-lede {
  max-width: 34rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* Compact progress rail. */
.page-activate-form .platform-steps {
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.page-activate-form .platform-steps__item {
  min-height: 2.75rem;
  padding: 0.5rem 0.625rem;
  background: transparent;
  font-size: 0.78rem;
  line-height: 1.2;
}

.page-activate-form .platform-steps__item.is-active {
  background: var(--color-white, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--color-text-primary);
}

.page-activate-form .platform-steps__item.is-active span {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.page-activate-form .platform-steps__item.is-done span {
  background: var(--color-success, #1a7a4c);
  color: #fff;
}

/* ── State-machine display locks ────────────────────────────────────────
   The [hidden] attribute (base.css) always wins, so these rules are purely
   author-display defaults; the JS/HTML hidden attribute flips them. */
.page-activate-form [data-account-fieldset] {
  display: none;
}

.page-activate-form [data-account-fieldset]:not([hidden]) {
  display: grid;
  gap: var(--space-4);
}

.page-activate-form[data-activation-state="verified"] [data-account-fieldset] {
  display: grid;
}

.page-activate-form [data-otp-entry] {
  display: none;
}

.page-activate-form [data-otp-entry]:not([hidden]) {
  display: grid;
  gap: var(--space-3);
}

.page-activate-form[data-activation-state="otp-sent"] [data-otp-entry] {
  display: grid;
  gap: var(--space-3);
}

.page-activate-form[data-activation-state="verified"] [data-otp-entry] {
  display: none;
}

.page-activate-form [data-otp-verified] {
  display: none;
}

.page-activate-form [data-otp-verified]:not([hidden]) {
  display: flex;
}

.page-activate-form [data-otp-unverified] {
  display: grid;
  gap: var(--space-3);
}

/* ── Activation form overrides ────────────────────────────────────────── */
.page-activate-form .platform-card {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border-subtle);
}

.page-activate-form .platform-inline-banner {
  margin-bottom: 1.25rem;
  padding: 0.625rem 0.875rem;
  border: 0;
  background: transparent;
  color: var(--color-text-tertiary);
}

.page-activate-form .platform-inline-banner__label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.page-activate-form .platform-inline-banner__value {
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.page-activate-form .platform-inline-banner__value code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.page-activate-form .platform-fieldset + .platform-fieldset {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-subtle);
}

.page-activate-form .platform-fieldset__legend {
  margin-bottom: 0.125rem;
  font-size: 0.78rem;
}

.page-activate-form .platform-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.page-activate-form .platform-form__actions {
  margin-top: 1.25rem;
}

.page-activate-form #activate-submit {
  width: 100%;
  min-height: 50px;
}

/* Calm, actionable error inside the form (not a wall of red). */
.page-activate-form .platform-field__hint.platform-alert--error {
  color: var(--color-error, #b42318);
  font-weight: var(--font-weight-medium);
}

/* ── OTP mini-panel polish ────────────────────────────────────────────── */
.page-activate-form .platform-otp-gate__send .btn {
  min-height: 48px;
}

.page-activate-form .platform-otp-gate__otp {
  padding: 1rem;
  gap: 0.875rem;
  background: var(--color-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.page-activate-form .platform-otp-gate__otp .platform-otp-gate__field input {
  min-height: 50px;
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.4em;
  text-align: center;
}

.page-activate-form .platform-otp-gate__actions .btn {
  min-height: 44px;
}

.page-activate-form .platform-otp-gate__done {
  padding: 0.875rem 1rem;
}

/* ── Password UX ──────────────────────────────────────────────────────── */
.platform-password-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-link);
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 32px;
}

.platform-password-toggle:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.platform-password-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.platform-password-toggle[aria-pressed="true"] {
  color: var(--color-text-secondary);
}

.platform-password-strength {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
}

.platform-password-strength__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.platform-password-strength__label {
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.platform-password-strength__meter {
  flex: 0 0 6.5rem;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border-subtle);
  overflow: hidden;
}

.platform-password-strength__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-border-default);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.platform-password-strength__fill.is-weak {
  background: var(--color-error, #b42318);
}

.platform-password-strength__fill.is-fair {
  background: var(--color-warning, #9a6700);
}

.platform-password-strength__fill.is-good {
  background: #3b8f5f;
}

.platform-password-strength__fill.is-strong {
  background: var(--color-success, #1a7a4c);
}

.platform-password-reqs {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

.platform-password-reqs li.is-met {
  color: var(--color-success, #1a7a4c);
  font-weight: var(--font-weight-medium);
}

.platform-field__error {
  color: var(--color-error, #b42318);
}

.platform-field__ok {
  color: var(--color-success, #1a7a4c);
}

@media (max-width: 560px) {
  .page-activate-form .platform-steps {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .page-activate-form .platform-steps__item {
    min-height: 2.5rem;
  }

  .page-activate-form .platform-otp-gate__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .page-activate-form .platform-otp-gate__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-activate-form * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}