/* Generated by scripts/generate-design-tokens.py. Do not edit by hand. */
:root {
  color-scheme: light;
  --token-canvas: #f5f5f7;
  --token-surface: #fafafc;
  --token-surface-muted: #e8e8ed;
  --token-text-primary: #171714;
  --token-text-body: #45443f;
  --token-text-muted: #64625c;
  --token-border: #d1d1d6;
  --token-action: #007aff;
  --token-on-action: #ffffff;
  --token-action-hover: #0064d1;
  --token-action-container: #e5f1ff;
  --token-success: #218a55;
  --token-success-container: #e3f4ea;
  --token-warning: #8a5200;
  --token-warning-container: #fff0d5;
  --token-error: #ba3a1e;
  --token-error-container: #ffe8e1;
}

[data-theme="dark"] {
  color-scheme: dark;
  --token-canvas: #0d1014;
  --token-surface: #181b20;
  --token-surface-muted: #24282e;
  --token-text-primary: #f5f5f7;
  --token-text-body: #d6d7db;
  --token-text-muted: #b6b7bc;
  --token-border: #30343b;
  --token-action: #0a84ff;
  --token-on-action: #ffffff;
  --token-action-hover: #409cff;
  --token-action-container: #082c54;
  --token-success: #5ed69a;
  --token-success-container: #153a29;
  --token-warning: #ffb95c;
  --token-warning-container: #3d2b12;
  --token-error: #ff8a70;
  --token-error-container: #47221b;
}


/**
 * SEYFR website design tokens
 *
 * This file is the public maintenance point for the site's visual constants.
 * Values intentionally match the established production website. Component
 * layout and styling remain in global.css; new components must use these
 * variables instead of introducing new brand color literals.
 */

:root {
  color-scheme: light;

  /* Website brand blue stays exact in both themes; native token resources remain separate. */
  --token-action: #007AFF;
  --token-action-hover: #007AFF;
  --token-on-action: #ffffff;

  /* Core color roles */
  --seyfr-blue: var(--token-action);
  --seyfr-blue-hover: var(--token-action-hover);
  --seyfr-canvas: var(--token-canvas);
  --seyfr-panel: var(--token-surface);
  --seyfr-surface-muted: var(--token-surface-muted);
  --seyfr-night: var(--token-text-primary);
  --seyfr-rule: var(--token-border);
  --ink: var(--token-text-primary);
  --ink-2: var(--token-text-body);
  --ink-3: var(--token-text-muted);
  --body: var(--token-text-body);
  --surface: var(--seyfr-canvas);
  --card: var(--seyfr-panel);
  --border: var(--seyfr-rule);
  --accent: var(--seyfr-blue);
  --accent-light: var(--token-action-container);
  --signal: var(--token-error);

  /* Semantic aliases for new work */
  --color-canvas: var(--surface);
  --color-surface: var(--card);
  --color-text-primary: var(--ink);
  --color-text-body: var(--body);
  --color-text-muted: var(--ink-3);
  --color-border: var(--border);
  --color-action: var(--accent);
  --color-action-hover: var(--seyfr-blue-hover);
  --color-focus: var(--accent);

  /* One UI font stack for every page and shared header/footer component. */
  --font-family-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --font-section-size: 20px;
  --font-section-weight: 600;
  --font-section-tracking: -0.02em;
  --font-body-size: 15px;
  --font-body-leading: 1.5;

  /* Spatial foundation */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-control: 12px;
  /* Shared action geometry: normal actions and explicitly compact toolbars. */
  --control-height: 44px;
  --control-padding: 10px 18px;
  --control-padding-inline: 18px;
  --control-font-size: 14px;
  --control-font-weight: 650;
  --control-line-height: 1.25;
  --control-gap: 8px;
  --control-compact-height: 36px;
  --control-compact-padding: 8px 12px;
  --control-compact-font-size: 12px;
  --r: var(--radius-md);
  --seyfr-border-width: 1px;

  /* Motion */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --ease: var(--motion-ease);
  --shadow-soft: none;
  --shadow-lift: 0 18px 46px rgb(23 23 20 / 10%);

  /* Homepage fields */
  --seyfr-field-warm: #f0f0f2;
  --seyfr-field-ink: #171714;
  --seyfr-field-ink-muted: #c7c7cc;
  --seyfr-field-rule-dark: #383832;
  --seyfr-field-rule-soft: #d2d2d7;

  /* Action hierarchy */
  --seyfr-action-primary: #171714;
  --seyfr-action-primary-hover: #343430;
  --seyfr-action-on-primary: #ffffff;
  --seyfr-action-secondary: var(--token-surface);
  --seyfr-action-secondary-hover: #f0f0f2;
  --seyfr-action-on-secondary: #171714;
  --seyfr-action-border: #b8b8b2;
  --seyfr-section-divider: rgb(23 23 20 / 7%);
}

[data-theme="dark"] {
  --token-action: #007AFF;
  --token-action-hover: #007AFF;
  --token-on-action: #ffffff;
  --seyfr-blue: var(--token-action);
  --seyfr-blue-hover: var(--token-action-hover);
  --seyfr-canvas: var(--token-canvas);
  --seyfr-panel: var(--token-surface);
  --seyfr-surface-muted: var(--token-surface-muted);
  --seyfr-night: #080a0d;
  --seyfr-rule: var(--token-border);
  --ink: var(--token-text-primary);
  --ink-2: var(--token-text-body);
  --ink-3: var(--token-text-muted);
  --body: var(--token-text-body);
  --surface: var(--seyfr-canvas);
  --card: var(--seyfr-panel);
  --border: var(--seyfr-rule);
  --accent: var(--token-action);
  --accent-light: var(--token-action-container);
  --signal: var(--token-error);
  --seyfr-field-warm: #14171b;
  --seyfr-field-ink: #080a0d;
  --seyfr-field-ink-muted: #b7bac2;
  --seyfr-field-rule-dark: #30343b;
  --seyfr-field-rule-soft: #30343b;
  --seyfr-action-primary: var(--token-text-primary);
  --seyfr-action-primary-hover: #ffffff;
  --seyfr-action-on-primary: #080a0d;
  --seyfr-action-secondary: var(--token-surface);
  --seyfr-action-secondary-hover: #24282e;
  --seyfr-action-on-secondary: var(--token-text-primary);
  --seyfr-action-border: #555960;
  --seyfr-section-divider: rgb(255 255 255 / 8%);
}

/* Small editorial accents complement SEYFR blue; surfaces follow the active theme. */
:root {
  --seyfr-accent-sun: #ffd34e;
  --seyfr-accent-coral: #ff826b;
  --seyfr-accent-sky: #66cfff;
}

/* Text links keep the same brand blue after visiting. Component classes still
   control navigation text and white labels on filled actions. */
:where(a:any-link) { color:var(--token-action); }



/* Shared resource foundations. Colors, action hierarchy and geometry come
   directly from brand.css, the same source used by the public website. */
:where(body) { font-family: var(--font-family-ui); color: var(--token-text-primary); background: var(--token-canvas); }
:where(button, input, textarea, select) { font: inherit; }
/* Opt-in form component, shared by resource surfaces. */
.seyfr-form :is(input:where(:not([type="checkbox"]):not([type="file"])), textarea, select, .seyfr-select-trigger) {
  box-sizing: border-box;
  width: 100%; min-width: 0; min-height: var(--control-height);
  padding: var(--control-padding);
  border: var(--seyfr-border-width) solid var(--token-border);
  border-radius: var(--radius-control);
  background: var(--token-surface); color: var(--token-text-primary);
  font-family: var(--font-family-ui); font-size: var(--control-font-size);
  font-weight: 400; line-height: var(--control-line-height);
}
.seyfr-form label { font-size: var(--control-font-size); font-weight: var(--control-font-weight); line-height: var(--font-body-leading); }
.seyfr-form input[type="checkbox"] { width: var(--space-4); height: var(--space-4); min-height: 0; accent-color: var(--token-action); }
.seyfr-form label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: var(--space-2); }
.seyfr-form :is(input,textarea,.seyfr-select-trigger):disabled { opacity: .65; cursor: not-allowed; }
.seyfr-select { position: relative; min-width: 0; }
.seyfr-form .panel:has(.seyfr-select) { overflow: visible; }
.seyfr-form :is(.fields label, .variant-row label) { font-size: var(--control-font-size); font-weight: var(--control-font-weight); }
.seyfr-form .search input { border: 0; border-radius: 0; background: transparent; padding: var(--space-2) 0; }
/* The search container owns the focus ring, including its icon. */
.seyfr-form .search input:focus-visible { outline: none; }
.seyfr-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--control-gap); text-align: left; cursor: pointer; }
.seyfr-select-trigger::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); flex-shrink: 0; }
.seyfr-select-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 30; max-height: 240px; overflow: auto; padding: var(--space-1); background: var(--token-surface); color: var(--token-text-primary); border: 1px solid var(--token-border); border-radius: var(--radius-control); }
.seyfr-select-menu[hidden] { display: none; }
.seyfr-select-option { display: block; width: 100%; min-height: var(--control-height); padding: var(--control-padding); border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; text-align: left; font: 400 var(--control-font-size)/var(--control-line-height) var(--font-family-ui); }
.seyfr-select-option:is(:hover,:focus-visible), .seyfr-select-option[aria-selected="true"] { background: var(--token-action-container); color: var(--token-action); }
html[data-theme="dark"] { color-scheme: dark; }
:where(dialog) { color: var(--token-text-primary); background: var(--token-surface); }
:where(button) { color: inherit; }
:where(input, textarea)::placeholder { color: var(--token-text-muted); opacity: 1; }
:where(button, input, textarea, select, a, summary):focus-visible { outline: 2px solid var(--token-action); outline-offset: var(--space-1); }
:where(button):disabled { cursor: not-allowed; opacity: .65; }
:where(button, a) { -webkit-tap-highlight-color: transparent; }
[data-design-theme-toggle] { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--token-text-primary); cursor: pointer; }
[data-design-theme-toggle] svg { width: 18px; height: 18px; }
[data-design-theme-toggle]:hover { background: var(--token-surface-muted); }
:where(.team-brand, .brand) img { filter: brightness(0); }
[data-theme="dark"] :where(.team-brand, .brand) img { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Shared dropdown focus: a sharp blue edge, without an outer halo. */
.seyfr-form select[hidden] { display:none; }
.seyfr-form .seyfr-select .seyfr-select-trigger:focus,
html body select:not([multiple]):focus {
  border-color:var(--token-action);
  outline:1px solid var(--token-action);
  outline-offset:-1px;
  box-shadow:none;
}
.seyfr-form .seyfr-select .seyfr-select-option:focus-visible { outline:1px solid var(--token-action); outline-offset:-1px; }

/* Guide typography retained from global.css. Shared theme tokens, navigation,
   footer and dialogs remain in their canonical styles. Preserve theme and
   interaction variants when updating this page. */
html { text-rendering: optimizelegibility; scroll-behavior: smooth; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
body { background-image: radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 25rem),
    radial-gradient(circle at 92% 28%, rgba(0, 122, 255, 0.045), transparent 28rem); background-attachment: fixed; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:where(a, button, summary, input, select):focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; }
html[data-theme="dark"] body { background-image: radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 28%, rgba(0, 122, 255, 0.07), transparent 30rem) !important; background-attachment: fixed !important; color: var(--ink) !important; }
:where(html[data-theme="dark"]) :where(h1, h2, h3, h4, h5, h6) { color: var(--ink); }
:where(html[data-theme="dark"]) :where(p, li) { color: var(--body); }
:where(html[data-theme="dark"]) :where(strong) { color: inherit; }
html[data-theme="dark"] #sfh-root .mega-feat { border-left-color: var(--border) !important; }
h2 { font-size: clamp(20px, 3vw, 26px); margin-top: 56px; margin-bottom: 14px; letter-spacing: -0.03em; line-height: 1.2; }
h3 { font-size: clamp(16px, 2.2vw, 19px); margin-top: 32px; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {*, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }}
.content-provenance { margin: -8px 0px 28px; color: var(--ink-3, #6e6e73); font-size: 13px; line-height: 1.5; }
.content-provenance a { color: var(--accent, #007AFF); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
html { background: var(--surface); }
body, html[data-theme="dark"] body { font-family: var(--font-family-ui); background: var(--surface) !important; background-image: none !important; color: var(--body) !important; }
body::before { content: ""; position: fixed; inset: 0px auto 0px max(10px, -570px + 50vw); width: 1px; background: color-mix(in srgb, var(--border) 58%, transparent); pointer-events: none; z-index: 0; }
.page-badge, .eyebrow, .section-label, .content-provenance { font-size: 11px !important; font-weight: 750 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; }
.content-provenance { margin: 0px 0px 34px; color: var(--ink-3); letter-spacing: 0.04em !important; text-transform: none !important; font-weight: 500 !important; }
h2 { position: relative; margin-top: 86px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--ink); font-weight: 680; letter-spacing: -0.045em; line-height: 1.06; font-size: clamp(28px, 3.8vw, 44px) !important; }
h2::before { content: ""; position: absolute; top: -2px; left: 0px; width: 68px; height: 3px; background: var(--accent); }
h3 { color: var(--ink); font-weight: 680; letter-spacing: -0.025em; }
p, li { line-height: 1.68; }
@media (max-width: 920px) {body::before { display: none; }}
@media (max-width: 560px) {h2 { margin-top: 64px; font-size: 32px !important; }}
.breadcrumb, .content-provenance, .platforms, .lp-fact-desc, .home-guide-card__copy, .home-guides__intro, .frustration-title, .limit-val { color: var(--token-text-muted,#64625c) !important; }
body { background-color: var(--seyfr-canvas); background-image: none; background-attachment: scroll; color: var(--body); }
h2 { color: var(--ink); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; }
h3 { color: var(--ink); font-weight: 650; letter-spacing: -0.025em; }
a { transition: color var(--motion-fast) var(--motion-ease); }
html[data-theme="dark"] body { background-image: none !important; background-attachment: scroll !important; }
@media (prefers-reduced-motion: reduce) {*, ::before, ::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}
html[data-theme="dark"] :is(.breadcrumb, .content-provenance, .platforms, .lp-fact-desc, .home-guide-card__copy, .home-guides__intro, .frustration-title, .limit-val) { color: var(--token-text-muted, #b6b7bc) !important; }

/* Generated by scripts/generate-design-tokens.py. Do not edit by hand. */
:root {
  color-scheme: light;
  --token-canvas: #f5f5f7;
  --token-surface: #fafafc;
  --token-surface-muted: #e8e8ed;
  --token-text-primary: #171714;
  --token-text-body: #45443f;
  --token-text-muted: #64625c;
  --token-border: #d1d1d6;
  --token-action: #007aff;
  --token-on-action: #ffffff;
  --token-action-hover: #0064d1;
  --token-action-container: #e5f1ff;
  --token-success: #218a55;
  --token-success-container: #e3f4ea;
  --token-warning: #8a5200;
  --token-warning-container: #fff0d5;
  --token-error: #ba3a1e;
  --token-error-container: #ffe8e1;
}

[data-theme="dark"] {
  color-scheme: dark;
  --token-canvas: #0d1014;
  --token-surface: #181b20;
  --token-surface-muted: #24282e;
  --token-text-primary: #f5f5f7;
  --token-text-body: #d6d7db;
  --token-text-muted: #b6b7bc;
  --token-border: #30343b;
  --token-action: #0a84ff;
  --token-on-action: #ffffff;
  --token-action-hover: #409cff;
  --token-action-container: #082c54;
  --token-success: #5ed69a;
  --token-success-container: #153a29;
  --token-warning: #ffb95c;
  --token-warning-container: #3d2b12;
  --token-error: #ff8a70;
  --token-error-container: #47221b;
}


/**
 * SEYFR website design tokens
 *
 * This file is the public maintenance point for the site's visual constants.
 * Values intentionally match the established production website. Component
 * layout and styling remain in global.css; new components must use these
 * variables instead of introducing new brand color literals.
 */

:root {
  color-scheme: light;

  /* Website brand blue stays exact in both themes; native token resources remain separate. */
  --token-action: #007AFF;
  --token-action-hover: #007AFF;
  --token-on-action: #ffffff;

  /* Core color roles */
  --seyfr-blue: var(--token-action);
  --seyfr-blue-hover: var(--token-action-hover);
  --seyfr-canvas: var(--token-canvas);
  --seyfr-panel: var(--token-surface);
  --seyfr-surface-muted: var(--token-surface-muted);
  --seyfr-night: var(--token-text-primary);
  --seyfr-rule: var(--token-border);
  --ink: var(--token-text-primary);
  --ink-2: var(--token-text-body);
  --ink-3: var(--token-text-muted);
  --body: var(--token-text-body);
  --surface: var(--seyfr-canvas);
  --card: var(--seyfr-panel);
  --border: var(--seyfr-rule);
  --accent: var(--seyfr-blue);
  --accent-light: var(--token-action-container);
  --signal: var(--token-error);

  /* Semantic aliases for new work */
  --color-canvas: var(--surface);
  --color-surface: var(--card);
  --color-text-primary: var(--ink);
  --color-text-body: var(--body);
  --color-text-muted: var(--ink-3);
  --color-border: var(--border);
  --color-action: var(--accent);
  --color-action-hover: var(--seyfr-blue-hover);
  --color-focus: var(--accent);

  /* One UI font stack for every page and shared header/footer component. */
  --font-family-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --font-section-size: 20px;
  --font-section-weight: 600;
  --font-section-tracking: -0.02em;
  --font-body-size: 15px;
  --font-body-leading: 1.5;

  /* Spatial foundation */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-control: 12px;
  /* Shared action geometry: normal actions and explicitly compact toolbars. */
  --control-height: 44px;
  --control-padding: 10px 18px;
  --control-padding-inline: 18px;
  --control-font-size: 14px;
  --control-font-weight: 650;
  --control-line-height: 1.25;
  --control-gap: 8px;
  --control-compact-height: 36px;
  --control-compact-padding: 8px 12px;
  --control-compact-font-size: 12px;
  --r: var(--radius-md);
  --seyfr-border-width: 1px;

  /* Motion */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --ease: var(--motion-ease);
  --shadow-soft: none;
  --shadow-lift: 0 18px 46px rgb(23 23 20 / 10%);

  /* Homepage fields */
  --seyfr-field-warm: #f0f0f2;
  --seyfr-field-ink: #171714;
  --seyfr-field-ink-muted: #c7c7cc;
  --seyfr-field-rule-dark: #383832;
  --seyfr-field-rule-soft: #d2d2d7;

  /* Action hierarchy */
  --seyfr-action-primary: #171714;
  --seyfr-action-primary-hover: #343430;
  --seyfr-action-on-primary: #ffffff;
  --seyfr-action-secondary: var(--token-surface);
  --seyfr-action-secondary-hover: #f0f0f2;
  --seyfr-action-on-secondary: #171714;
  --seyfr-action-border: #b8b8b2;
  --seyfr-section-divider: rgb(23 23 20 / 7%);
}

[data-theme="dark"] {
  --token-action: #007AFF;
  --token-action-hover: #007AFF;
  --token-on-action: #ffffff;
  --seyfr-blue: var(--token-action);
  --seyfr-blue-hover: var(--token-action-hover);
  --seyfr-canvas: var(--token-canvas);
  --seyfr-panel: var(--token-surface);
  --seyfr-surface-muted: var(--token-surface-muted);
  --seyfr-night: #080a0d;
  --seyfr-rule: var(--token-border);
  --ink: var(--token-text-primary);
  --ink-2: var(--token-text-body);
  --ink-3: var(--token-text-muted);
  --body: var(--token-text-body);
  --surface: var(--seyfr-canvas);
  --card: var(--seyfr-panel);
  --border: var(--seyfr-rule);
  --accent: var(--token-action);
  --accent-light: var(--token-action-container);
  --signal: var(--token-error);
  --seyfr-field-warm: #14171b;
  --seyfr-field-ink: #080a0d;
  --seyfr-field-ink-muted: #b7bac2;
  --seyfr-field-rule-dark: #30343b;
  --seyfr-field-rule-soft: #30343b;
  --seyfr-action-primary: var(--token-text-primary);
  --seyfr-action-primary-hover: #ffffff;
  --seyfr-action-on-primary: #080a0d;
  --seyfr-action-secondary: var(--token-surface);
  --seyfr-action-secondary-hover: #24282e;
  --seyfr-action-on-secondary: var(--token-text-primary);
  --seyfr-action-border: #555960;
  --seyfr-section-divider: rgb(255 255 255 / 8%);
}

/* Small editorial accents complement SEYFR blue; surfaces follow the active theme. */
:root {
  --seyfr-accent-sun: #ffd34e;
  --seyfr-accent-coral: #ff826b;
  --seyfr-accent-sky: #66cfff;
}

/* Text links keep the same brand blue after visiting. Component classes still
   control navigation text and white labels on filled actions. */
:where(a:any-link) { color:var(--token-action); }

/* Context accents are optional metadata, not the master brand color. */
[data-platform="android"] { --color-context: #14733a; }
[data-platform="apple"] { --color-context: #007AFF; }
[data-platform="alt"] { --color-context: #c33f20; }
[data-platform="general"] { --color-context: #6547b8; }

/* Canonical identity across all pages and themes:
   Light mode: 100% solid black.
   Dark mode: 100% solid white. */
#sfh-root .logo-mark img,
.sf-bar-brand-mark img,
.brand img,
.site-header .brand img,
header .brand img,
header > a:first-child img,
.site-brand-mark {
  filter: brightness(0) !important;
}

html[data-theme="dark"] #sfh-root .logo-mark img,
html[data-theme="dark"] .sf-bar-brand-mark img,
html[data-theme="dark"] .brand img,
html[data-theme="dark"] .site-header .brand img,
html[data-theme="dark"] header .brand img,
html[data-theme="dark"] header > a:first-child img,
html[data-theme="dark"] .site-brand-mark {
  filter: brightness(0) invert(1) !important;
}

#sfh-root .mega-story img,
.mega-story img {
  filter: none !important;
}

body:has(.hero) .wrap > main#main-content > section.home-proof {
  padding-block: 48px !important;
}

body:has(.hero) .home-proof .home-section-eyebrow {
  margin-bottom: 14px;
}

body:has(.hero) .home-proof .home-proof__title {
  max-width: 900px;
  padding-top: 0 !important;
  border-top: 0 !important;
}

body:has(.hero) .home-proof .home-proof__title::before {
  display: none !important;
}

body:has(.hero) .home-proof .home-proof__intro {
  margin-bottom: 28px !important;
}

body:has(.hero) .home-proof .home-proof__link {
  border-radius: var(--radius-lg);
}

/* Prevent article rules from being repeated inside the homepage review block. */
body:has(.hero) .store-reviews h2#store-reviews-title {
  padding-top: 0 !important;
  border-top: 0 !important;
}

body:has(.hero) .store-reviews h2::before {
  display: none !important;
}

/* Section changes should be perceived through spacing and surface, not rules. */
body:has(.hero) :is(
  .home-proof,
  .features,
  .compare-section,
  .download,
  .store-reviews
)::before {
  border-block-color: var(--seyfr-section-divider) !important;
}

body:has(.hero) .home-file-strip {
  border-color: var(--seyfr-section-divider) !important;
}

body:has(.hero) .store-reviews {
  border: 0 !important;
}

/* Shared section-divider policy for every content page. */
:where(main, .wrap) > section {
  border-color: var(--seyfr-section-divider) !important;
}

:where(main, .wrap) h2 {
  border-top-color: var(--seyfr-section-divider) !important;
}

:where(main, .wrap) h2::before {
  height: 2px !important;
  background: var(--token-action) !important;
}

html[data-theme="dark"] :where(main, .wrap) h2 {
  border-top-color: var(--token-border) !important;
}

html[data-theme="dark"] :where(main, .wrap) h2::before {
  height: 2px !important;
  background: var(--token-action) !important;
}

:where(main, .wrap) hr {
  border-color: var(--seyfr-section-divider) !important;
}

:where(.home-guides, .home-guides__grid, .platform-groups, .store-reviews-grid, .faq-container) {
  border-color: var(--seyfr-section-divider) !important;
}

/* One physical border weight across layout and interactive components. */
:where(
  button,
  input,
  select,
  textarea,
  summary,
  table,
  th,
  td,
  dialog,
  [class*="card"],
  [class*="panel"],
  [class*="modal"],
  [class*="menu"],
  [class*="frame"],
  [class*="grid"],
  [class*="banner"],
  [class*="button"],
  [class*="btn"],
  [class*="badge"],
  [class*="chip"],
  [class*="callout"],
  [class*="box"],
  [class*="mockup"],
  [class*="shot"]
) {
  border-width: var(--seyfr-border-width) !important;
}

hr {
  border-width: var(--seyfr-border-width) 0 0 !important;
}

#sfh-root .sfh-skip-link {
  border-width: var(--seyfr-border-width) !important;
}

.site-brand-mark {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.legacy-ui-disclosure {
  max-width: 68ch;
  margin: 14px 0 22px;
  padding-left: 12px;
  color: var(--ink-3);
  border-left: var(--seyfr-border-width) solid var(--seyfr-section-divider);
  font-size: 12px;
  line-height: 1.5;
}

/* Retained SEYFR 1.x product media identifies itself at the asset level. */
.legacy-ui-media {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
}

.legacy-ui-media--full {
  width: 100%;
}

.legacy-ui-media-badge {
  position: absolute;
  z-index: 4;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: var(--seyfr-border-width) solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 4px 16px rgb(23 23 20 / 8%);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .legacy-ui-media-badge {
    top: var(--space-2);
    left: var(--space-2);
    min-height: 24px;
    padding: 3px 8px;
    font-size: 10px;
  }
}


.home-proof__version-note {
  max-width: 54ch;
  margin: 14px auto 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 899px) {
  body:has(.hero) .wrap > main#main-content > section.home-proof {
    padding-block: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary):focus-visible {
    outline-color: Highlight !important;
  }
}

/* Text and native form controls share the header typography. */
:where(html, body) { font-family: var(--font-family-ui); }
:where(button, input, select, textarea) { font-family: inherit; }

.intent-page{--intent-blue:var(--token-action);--intent-ink:var(--token-text-primary);--intent-muted:var(--token-text-muted);--intent-rule:var(--token-border);--intent-paper:var(--token-canvas);--intent-card:var(--token-surface);max-width:1120px;margin:auto;padding:54px 28px 100px;color:var(--intent-ink)}
.intent-crumb{font-size:13px;color:var(--intent-muted)}.intent-crumb a{text-decoration:underline;text-underline-offset:3px}.intent-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:64px;align-items:center;padding:70px 0;border-bottom:1px solid var(--intent-rule)}
.intent-kicker{margin:0 0 14px;color:var(--intent-blue);font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.intent-hero h1{margin:0;font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.055em}.intent-lede{max-width:720px;margin:24px 0 0;color:var(--intent-muted);font-size:20px;line-height:1.55}.intent-trust{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}.intent-trust li{padding:7px 10px;background:var(--token-surface-muted);font-size:12px;font-weight:700}
.intent-hero-card{padding:30px;background:var(--token-text-primary);color:var(--token-canvas)}.intent-hero-card h2{margin:0 0 12px;color:var(--token-canvas);font-size:25px;line-height:1.1}.intent-hero-card p{margin:0 0 24px;color:var(--token-canvas);line-height:1.6}.intent-primary{display:inline-flex;min-height:52px;align-items:center;justify-content:center;padding:0 22px;background:var(--token-canvas);color:var(--token-text-primary)!important;font-weight:800;text-decoration:none}.intent-secondary{display:block;margin-top:16px;color:var(--token-canvas)!important;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.intent-section{padding:72px 0;border-bottom:1px solid var(--intent-rule)}.intent-section h2{max-width:760px;margin:0 0 22px;font-size:clamp(31px,4vw,48px);line-height:1.04;letter-spacing:-.045em}.intent-section>p,.intent-section__intro{max-width:760px;color:var(--intent-muted);font-size:17px;line-height:1.7}.intent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:32px;border-top:1px solid var(--intent-rule);border-left:1px solid var(--intent-rule)}.intent-card{padding:26px;border-right:1px solid var(--intent-rule);border-bottom:1px solid var(--intent-rule);background:color-mix(in srgb,var(--intent-card) 72%,transparent)}.intent-card h3{margin:0 0 10px;font-size:18px}.intent-card p{margin:0;color:var(--intent-muted);font-size:14px;line-height:1.6}
.intent-steps{counter-reset:intent-step;display:grid;gap:0;margin-top:30px;border-top:1px solid var(--intent-rule)}.intent-step{counter-increment:intent-step;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--intent-rule)}.intent-step:before{content:counter(intent-step);display:grid;width:36px;height:36px;place-items:center;background:var(--seyfr-action-primary);color:var(--seyfr-action-on-primary);font-weight:800}.intent-step h3{margin:0 0 6px}.intent-step p{margin:0;color:var(--intent-muted);line-height:1.6}
.intent-warning{margin-top:30px;padding:24px;border-left:4px solid var(--intent-blue);background:var(--token-surface-muted)}.intent-warning strong{display:block;margin-bottom:6px}.intent-faq details{border-top:1px solid var(--intent-rule)}.intent-faq details:last-child{border-bottom:1px solid var(--intent-rule)}.intent-faq summary{padding:20px 0;font-weight:750;cursor:pointer}.intent-faq details p{max-width:760px;margin:0;padding:0 0 22px;color:var(--intent-muted);line-height:1.65}.intent-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.intent-related a{padding:18px;border:1px solid var(--intent-rule);font-weight:750;text-decoration:none}.intent-related a:hover{color:var(--intent-blue);border-color:var(--intent-blue)}
.intent-page a:focus-visible{outline:3px solid var(--token-action);outline-offset:4px}@media(max-width:760px){.intent-page{padding-inline:20px}.intent-hero{grid-template-columns:1fr;gap:36px;padding:48px 0}.intent-grid,.intent-related{grid-template-columns:1fr}.intent-section{padding:56px 0}.intent-hero h1{font-size:clamp(39px,12vw,58px)}}

.network-guide .intent-wrap { max-width:1100px; }
.network-guide__video { max-width:860px; aspect-ratio:16/9; min-height:200px; background:#15171b; border-radius:16px; overflow:hidden; margin:24px 0 16px; }
.network-guide__video :is(iframe, video) { width:100%; height:100%; border:0; display:block; object-fit:contain; }
.network-guide__source { display:flex; flex-wrap:wrap; gap:10px; font-size:14px; }
.network-guide .network-guide__note { color:var(--token-text-muted); font-size:13px; line-height:1.6; max-width:860px; }
.network-guide__steps { padding-left:24px; max-width:800px; }
.network-guide__steps li { padding:8px 0; line-height:1.7; }

body:has(#sfh-root) .network-guide__nav { display:none; }
.network-guide .intent-hero-card { background:var(--token-surface); color:var(--token-text-primary); border:1px solid var(--token-border); border-radius:16px; padding:28px; }
.network-guide .intent-hero-card h2 { color:var(--token-text-primary); }
.network-guide .intent-hero-card p { color:var(--token-text-body); }
.network-guide .intent-hero-card .intent-primary { background:var(--token-text-primary); color:var(--token-canvas)!important; border-radius:10px; }
.network-guide .intent-hero-card .intent-secondary { color:var(--token-action)!important; }
.network-guide .intent-hero h1 { font-size:clamp(40px,5vw,60px); line-height:1.08; }

.network-guide .content-provenance { overflow-wrap:anywhere; }
.network-guide .content-provenance a { text-decoration:underline; text-underline-offset:3px; }
.network-guide .intent-kicker,
.network-guide .content-provenance a,
.network-guide .intent-hero-card .intent-secondary { color:var(--token-text-primary)!important; }
.network-guide .sf-nav a { min-height:28px; display:flex; align-items:center; }
.network-guide .intent-related a:any-link,
.network-guide .intent-section > a:any-link { color:var(--token-action); }
@media (max-width:600px) {
 .network-guide__video { min-height:0; border-radius:10px; }
 .network-guide .intent-hero-card { padding:20px; }
 .network-guide .intent-related a { overflow-wrap:anywhere; }
}

/* One editorial system: hierarchy, repetition, readable spacing and restrained
   variety. The shared header and brand tokens remain the visual foundation. */
body.site-page { background:var(--token-canvas); color:var(--token-text-primary); }
.site-architecture .diagram-container { min-width:0; max-width:100%; justify-content:flex-start; overflow-x:auto; }
.site-architecture .diagram-container svg { max-width:100%; height:auto; flex-shrink:0; }
.site-architecture .architecture-talk { min-width:0; box-sizing:border-box; max-width:100%; }
.site-architecture .architecture-talk__preview { min-width:0; width:100%; max-width:100%; }
.site-architecture .architecture-talk__play { box-sizing:border-box; min-width:0; width:100%; }
.site-page :is(main,[role="main"]) { min-width:0; }
.site-page :is(main,[role="main"]) :is(p,li) { overflow-wrap:break-word; }
.site-page :is(main,[role="main"]) :is(a,button,summary,input,select,textarea):focus-visible {
  outline:2px solid var(--token-action); outline-offset:4px;
}

/* The same three accents mark a sequence everywhere, with dark, legible text. */
.site-page :is(.step-card,.intent-step,.transfer-steps li,.shop-order-guide li) { --editorial-accent:var(--seyfr-accent-sky); }
.site-page :is(.step-card,.intent-step,.transfer-steps li,.shop-order-guide li):nth-child(3n + 2) { --editorial-accent:var(--seyfr-accent-sun); }
.site-page :is(.step-card,.intent-step,.transfer-steps li,.shop-order-guide li):nth-child(3n) { --editorial-accent:var(--seyfr-accent-coral); }
.site-guide .step-num,
.site-guide .intent-step::before,
.site-architecture .step-number,
.site-shop .shop-order-guide li > span {
  display:grid; place-items:center; flex:none; width:38px; height:38px;
  padding:0; background:var(--editorial-accent); color:#171714;
  border-radius:var(--radius-sm); font-size:13px; font-weight:750;
}
.site-home #how-it-works .step-icon {
  display:grid!important; place-items:center; width:46px; height:46px;
  background:var(--editorial-accent)!important; color:#171714!important;
  border-radius:var(--radius-sm)!important; margin-bottom:18px;
}
.site-home #how-it-works .step-icon svg { width:24px; height:24px; }
html body.site-guide .step-num {
  width:38px!important; height:38px!important;
  background:var(--editorial-accent)!important; color:#171714!important;
  border-radius:var(--radius-sm)!important; font-size:13px!important; letter-spacing:0;
}
html body.site-guide .step-num::before { content:none; }
.site-home #how-it-works :is(.step-title,.step-desc) { color:var(--token-text-primary); }
.site-home #how-it-works .step-desc { color:var(--token-text-body); line-height:1.65; }
.site-home .home-guides-list { gap:12px; }
.site-home .home-guides-list > a { border-color:var(--token-border); border-radius:var(--radius-control); }

/* Guides and comparisons: clear reading width, calm panels, visible next steps. */
.site-guide [role="main"].wrap { max-width:860px; padding-inline:28px; }
.site-guide [role="main"] h1 { max-width:24ch; font-size:clamp(34px,5vw,54px); line-height:1.08; letter-spacing:-.045em; }
.site-guide [role="main"] :is(.intro,.lead) { max-width:65ch; line-height:1.65; }
.site-guide [role="main"] h2 { margin-top:48px; line-height:1.2; }
.site-guide [role="main"] h3 { line-height:1.35; }
.site-guide [role="main"] :is(p,li) { line-height:1.75; }
.site-guide .steps-visual { gap:16px; margin-block:32px; }
.site-guide .step-card { padding:24px; gap:20px; background:var(--token-surface); border:1px solid var(--token-border); border-radius:var(--radius-lg); box-shadow:none; }
.site-guide .step-content h3 { margin-top:0; color:var(--token-text-primary); }
.site-guide .step-content p { color:var(--token-text-body); }
.site-guide :is(.callout,.cta,.intent-warning) { background:var(--token-surface); border-color:var(--token-border); border-radius:var(--radius-lg); box-shadow:none; }
.site-guide .callout { border-left:3px solid var(--token-action); }
.site-guide .cta { text-align:left; padding:32px; }
.site-guide .cta-btns { justify-content:flex-start; }
.site-guide :is(.btn,.btn-outline,.intent-primary) { min-height:44px; border-radius:var(--radius-control); }
.site-guide .intent-hero-card { background:var(--token-surface); color:var(--token-text-primary); border:1px solid var(--token-border); border-radius:var(--radius-lg); padding:28px; }
.site-guide .intent-hero-card :is(h2,p) { color:var(--token-text-primary); }
.site-guide .intent-hero-card p { color:var(--token-text-body); }
.site-guide .intent-hero-card .intent-primary { background:var(--token-action); color:var(--token-on-action)!important; }
.site-guide .intent-hero-card .intent-secondary { color:var(--token-text-primary)!important; }
.site-guide .intent-related a { border-radius:var(--radius-control); background:var(--token-surface); line-height:1.5; }
.site-guide .intent-card { background:var(--token-surface); }
.site-guide [role="main"] table { display:block; width:100%; max-width:100%; overflow-x:auto; }
.site-guide [role="main"] :is(th,td) { min-width:140px; white-space:normal; vertical-align:top; }

/* Product explanation and privacy use the same surfaces and hierarchy. */
.site-architecture :is(.transfer-overview,.control-card,.full-width-card,.technical-grid .card) { background:var(--token-surface); border-color:var(--token-border); border-radius:var(--radius-lg); }
.site-architecture .transfer-overview { border-top:3px solid var(--token-action); }
.site-architecture .benefit-card { border-top-color:var(--token-border); }
.site-policy .wrap { max-width:860px; }
.site-policy :is(.meta,nav,footer) { color:var(--token-text-muted); border-color:var(--token-border); }
.site-policy .button { background:var(--token-surface-muted); color:var(--token-text-primary); border-radius:var(--radius-control); min-height:44px; }
.site-policy main { border-top:3px solid var(--token-action); padding-top:28px; }
.site-policy main :is(p,li) { color:var(--token-text-body); line-height:1.75; }
.site-policy main h2 { font-size:24px; line-height:1.25; margin-block:40px 16px; }
.site-policy main a { text-decoration:underline; text-underline-offset:4px; }

/* Shop: the product photographs lead; accent markers explain ordering. */
.site-shop { --gift-photo:var(--token-surface-muted); }
.site-shop .shop-editorial h1 { font-weight:700; letter-spacing:-.05em; }
.site-shop .shop-editorial h1 em { font-style:normal; font-weight:inherit; }
.site-shop :is(.shop-browse,.shop-video-play,.choose-options-btn,.shop-search input) { border-radius:var(--radius-control); }
.site-shop :is(.shop-browse,.shop-video-play) { background:var(--token-action); color:var(--token-on-action); }
.site-shop :is(.shop-editorial-image,.product-art-wrap,.shop-support-strip) { border-radius:var(--radius-lg); }
.site-shop .shop-editorial-image figcaption { background:var(--token-surface); color:var(--token-text-primary); border:1px solid var(--token-border); }
.site-shop .shop-order-guide { gap:48px; }
.site-shop .shop-order-guide li { gap:20px; }
.site-shop .shop-order-guide h3 { line-height:1.4; margin-top:2px; }
.site-shop .shop-support-strip { border-left:3px solid var(--token-action); }
.site-tool :is(button,input,select,textarea) { font-family:var(--font-family-ui); }

@media(max-width:760px) {
  .site-guide [role="main"].wrap,.site-policy .wrap { padding-inline:20px; }
  .site-guide .step-card { padding:20px; gap:14px; }
  .site-guide .cta,.site-guide .intent-hero-card { padding:24px; }
  .site-guide .intent-related { grid-template-columns:1fr; }
  .site-shop .shop-order-guide { gap:24px; }
  .site-shop .shop-editorial h1 { font-size:clamp(38px,10vw,52px); }
}