/* SALI - Satoshi Annual Labor Index
   Light theme with Bitcoin orange highlights
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f8f8;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #fef9f4;
  --color-border: #e5e5e5;
  --color-border-light: #eeeeee;
  --color-text: #111111;
  --color-text-secondary: #555555;
  --color-text-muted: #999999;
  --color-accent: #F7931A;
  --color-accent-hover: #d97a0f;
  --color-accent-dim: rgba(247, 147, 26, 0.1);
  --color-accent-dim-hover: rgba(247, 147, 26, 0.18);
  --color-green: #16a34a;
  --color-red-loss: #dc2626;
  --font-mono: 'Roboto Mono', 'SF Mono', 'Monaco', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 1200px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-xxxl: 4rem;
  --radius: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --glow-orange: 0 0 16px rgba(247, 147, 26, 0.35);
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; margin-bottom: var(--spacing-md); color: var(--color-text); }
h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; font-weight: 600; margin-top: var(--spacing-xxl); color: var(--color-text-secondary); }
h3 { font-size: 1.125rem; font-weight: 500; margin-top: var(--spacing-lg); color: var(--color-text-secondary); }
p { margin-bottom: var(--spacing-md); color: var(--color-text-secondary); }
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-accent-hover); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-lg); }
.section { padding: var(--spacing-xxxl) 0; }
#calculator.section { padding-top: var(--spacing-xl); }

.nav {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  z-index: 100;
}
.nav__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); }
.nav__logo { font-family: var(--font-mono); font-weight: 700; font-size: 1.25rem; color: var(--color-text); text-decoration: none; letter-spacing: -0.02em; display: flex; flex-direction: column; line-height: 1.2; }
.nav__logo:hover { color: var(--color-accent); }
.nav__links { display: flex; gap: var(--spacing-lg); list-style: none; }
.nav__link { color: var(--color-text-muted); font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; }
.nav__link:hover { color: var(--color-text); }
.nav__link--active { color: var(--color-accent); }

.footer { border-top: 1px solid var(--color-border-light); padding: var(--spacing-xl) 0; margin-top: var(--spacing-xxxl); color: var(--color-text-muted); font-size: 0.875rem; }
.footer__content { text-align: center; }
.footer__disclaimer { margin-bottom: var(--spacing-sm); font-style: italic; }
.footer__privacy { margin-bottom: var(--spacing-sm); font-size: 0.8125rem; color: var(--color-text-muted); max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.5; }
.footer__support { margin-bottom: var(--spacing-sm); font-size: 0.8125rem; color: var(--color-text-muted); max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.5; }
.footer__support a { color: var(--color-accent); text-decoration: none; font-family: var(--font-mono); }
.footer__support a:hover { text-decoration: underline; }
.footer__contact { margin-bottom: 0; color: var(--color-text-muted); }

.support-section { margin-top: var(--spacing-xl); padding: var(--spacing-lg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.support-section h3 { margin-top: 0; display: flex; align-items: center; gap: 0.4em; }
.support-section__address { font-family: var(--font-mono); font-size: 1rem; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; display: inline-block; margin: 0.25rem 0 1rem; word-break: break-all; }
.support-section__qr { display: block; width: 220px; height: auto; margin: 0.5rem 0 1rem; background: #ffffff; padding: 0.5rem; border-radius: var(--radius-sm); }
.support-section__note { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; }

.hero { padding: var(--spacing-xxxl) 0; text-align: center; }
.hero__product-name { font-family: var(--font-mono); font-size: 3.5rem; font-weight: 700; color: var(--color-accent); line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
.hero__product-subtitle { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); }
.hero__logo-wrap { margin-bottom: var(--spacing-md); display: flex; justify-content: center; }
.hero__logo { max-width: 460px; width: 85%; height: auto; }
.hero__logo--dark { display: none; }
body.dark .hero__logo--light { display: none; }
body.dark .hero__logo--dark { display: block; }
.hero__headline { font-size: 2.5rem; font-weight: 700; margin-bottom: var(--spacing-lg); color: var(--color-text); line-height: 1.2; }
.hero__highlight { color: var(--color-accent); }
.hero__subheadline { font-size: 1.125rem; color: var(--color-text-secondary); max-width: 600px; margin: 0 auto var(--spacing-xl); line-height: 1.7; }
.hero__actions { display: flex; justify-content: center; gap: var(--spacing-md); flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-xl); font-size: 0.9375rem; font-weight: 600; font-family: inherit; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
.btn--primary { background: var(--color-accent); color: #ffffff; border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #ffffff; box-shadow: var(--glow-orange); }
.btn--secondary { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hero__actions .btn--secondary { font-size: 0.875rem; padding: var(--spacing-xs) var(--spacing-lg); color: var(--color-text-muted); }

.calculator { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-xl); margin: var(--spacing-xl) 0; box-shadow: var(--shadow); }
.calculator__title { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-lg); text-align: center; }
.calculator__context { font-size: 0.875rem; color: var(--color-text-muted); text-align: center; margin-top: calc(-1 * var(--spacing-md)); margin-bottom: var(--spacing-lg); max-width: 560px; margin-left: auto; margin-right: auto; }
.input-note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--spacing-xs); line-height: 1.5; }
.calculator__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); }
@media (max-width: 768px) { .calculator__grid { grid-template-columns: 1fr; } }
.calculator__inputs, .calculator__outputs { display: flex; flex-direction: column; gap: var(--spacing-md); }
.calculator__outputs { background: var(--color-bg-secondary); padding: var(--spacing-lg); border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); }

.form-group { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.form-group label { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.form-group input, .form-group select { padding: var(--spacing-sm) var(--spacing-md); font-size: 1rem; font-family: var(--font-mono); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-dim); }
.form-group input::placeholder { color: var(--color-text-muted); }
.form-group select { cursor: pointer; }
.form-group select option { background: var(--color-bg-card); color: var(--color-text); }
.form-group--hidden { display: none; }

.unit-toggle { display: flex; gap: 0; margin-bottom: var(--spacing-lg); background: var(--color-bg); border-radius: var(--radius-sm); padding: 4px; border: 1px solid var(--color-border); }
.unit-toggle__btn { flex: 1; padding: var(--spacing-sm) var(--spacing-md); font-size: 0.8125rem; font-weight: 600; font-family: var(--font-mono); border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: all 0.2s ease; border-radius: 6px; }
.unit-toggle__btn:hover { color: var(--color-text); }
.unit-toggle__btn--active { background: var(--color-accent); color: #ffffff; }

.output-group { margin-bottom: var(--spacing-md); }
.output-group__label { font-size: 0.6875rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--spacing-xs); }
.output-group__value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.output-group__value--primary { font-size: 2rem; font-weight: 700; color: var(--color-accent); }
.output-group__value--secondary { font-size: 1rem; color: var(--color-text-secondary); }
.output-group__desc { font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--spacing-xs); }

.score--gaining { color: var(--color-green); }
.score--losing { color: var(--color-red-loss); }
.score--neutral { color: var(--color-text-muted); }

.status { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); font-size: 0.8125rem; font-family: var(--font-mono); margin-top: var(--spacing-md); }
.status--info { background: var(--color-accent-dim); color: var(--color-accent); border: 1px solid rgba(247, 147, 26, 0.3); }
.status--error { background: rgba(255, 107, 107, 0.08); color: var(--color-red-loss); border: 1px solid rgba(255, 107, 107, 0.25); }
.status--success { background: rgba(34, 197, 94, 0.08); color: var(--color-green); border: 1px solid rgba(34, 197, 94, 0.25); }
body.dark .status--info { background: rgba(247, 147, 26, 0.12); border-color: rgba(247, 147, 26, 0.4); }
body.dark .status--error { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.35); }
body.dark .status--success { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); }
.status:empty { display: none; }

.btc-price-display { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text-secondary); padding: var(--spacing-sm); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }

.fx-warning { font-size: 0.8125rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: var(--spacing-sm) var(--spacing-md); line-height: 1.5; }
.fx-warning--hidden { display: none; }

.chart-section { margin-top: var(--spacing-xl); }
.chart-section__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--spacing-md); gap: var(--spacing-md); }
.chart-section h3 { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0; }
.chart-legend { display: flex; gap: var(--spacing-md); flex-shrink: 0; }
.chart-legend__item { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-muted); }
.chart-legend__item--historical { color: var(--color-accent); }
.chart-legend__item--projected { color: var(--color-text-muted); }
.chart-container { position: relative; height: 300px; margin-bottom: var(--spacing-xl); background: var(--color-bg-secondary); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: var(--spacing-md); }
.chart-container--norm { height: 380px; }
.norm-chart__desc { color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); font-size: 0.9rem; }
.norm-chart__note { color: var(--color-text-muted); font-size: 0.8rem; margin-top: var(--spacing-sm); }

.table-container { overflow-x: auto; margin-top: var(--spacing-lg); }
.projection-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.projection-table th, .projection-table td { padding: var(--spacing-sm) var(--spacing-md); text-align: right; border-bottom: 1px solid var(--color-border-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.projection-table th { font-family: var(--font-mono); font-weight: 500; color: var(--color-text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; background: var(--color-bg-secondary); }
.projection-table th:first-child, .projection-table td:first-child { text-align: left; }
.projection-table tbody tr { transition: background 0.15s ease; }
.projection-table tbody tr:hover { background: var(--color-bg-card-hover); }
.projection-table td { font-family: var(--font-mono); color: var(--color-text-secondary); }
.projection-table .current-year-row { background: var(--color-accent-dim); }
.projection-table .current-year-row td { color: var(--color-accent); font-weight: 600; }
.projection-table .current-year-row:hover { background: var(--color-accent-dim-hover); }
.projection-table .projected-row td { color: var(--color-text-muted); }
.projection-table .first-projected-row td { border-top: 2px solid var(--color-border); padding-top: calc(var(--spacing-sm) + 2px); }
.table-note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--spacing-sm); font-style: italic; }

.content-section { max-width: 700px; margin: 0 auto; }
.content-section h2 { margin-top: var(--spacing-xxl); color: var(--color-text); }
.content-section h2:first-child { margin-top: 0; }
.content-section ul, .content-section ol { margin-bottom: var(--spacing-md); padding-left: var(--spacing-xl); color: var(--color-text-secondary); }
.content-section li { margin-bottom: var(--spacing-sm); }

.formula { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); padding: var(--spacing-lg); margin: var(--spacing-lg) 0; font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-text); overflow-x: auto; border-radius: var(--radius-sm); }

.example-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--shadow); }
.example-card__title { font-size: 1rem; color: var(--color-text); margin-bottom: var(--spacing-md); }
.example-card__row { display: flex; justify-content: space-between; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border-light); }
.example-card__row:last-child { border-bottom: none; }
.example-card__label { color: var(--color-text-muted); }
.example-card__value { font-family: var(--font-mono); font-weight: 500; color: var(--color-text); font-variant-numeric: tabular-nums; }
.example-card__result { background: var(--color-bg-secondary); padding: var(--spacing-md); border-radius: var(--radius-sm); margin-top: var(--spacing-md); }
.example-card__result-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; }

.persona-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); box-shadow: var(--shadow); }
.persona-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-md); }
.persona-card__identity { display: flex; flex-direction: column; gap: 0.25rem; }
.persona-card__name { font-size: 1.375rem; font-weight: 700; color: var(--color-text); margin: 0; }
.persona-card__job { font-size: 0.875rem; color: var(--color-accent); font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.persona-card__years { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-muted); background: var(--color-bg-secondary); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; white-space: nowrap; }
.persona-card__narrative { color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.65; margin-bottom: var(--spacing-lg); }
.persona-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding: var(--spacing-md); background: var(--color-bg-secondary); border-radius: var(--radius-sm); }
.persona-stat__label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.persona-stat__value { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--color-text); }
.persona-stat__value--gain { color: #16a34a; }
.persona-card__sali { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: var(--spacing-md); align-items: center; background: var(--color-bg-secondary); border: 1px solid var(--color-border-light); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.persona-sali__year { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.persona-sali__value { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.persona-sali__unit { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.persona-sali__note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.25rem; }
.persona-sali__arrow { color: var(--color-text-muted); font-size: 1.25rem; text-align: center; }
.persona-sali__change { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; text-align: right; }
.persona-sali__change--loss { color: #dc2626; }
.persona-sali__change--gain { color: #16a34a; }
.persona-card__footer { display: flex; justify-content: flex-end; }
.persona-card__cta { font-size: 0.875rem; }
.examples-closing { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-xl); margin-top: var(--spacing-xl); }
.examples-closing h2 { font-size: 1.25rem; margin-bottom: var(--spacing-md); }
@media (max-width: 640px) {
  .persona-card__stats { grid-template-columns: 1fr 1fr; }
  .persona-card__sali { grid-template-columns: 1fr; gap: var(--spacing-sm); }
  .persona-sali__arrow { transform: rotate(90deg); }
  .persona-sali__change { text-align: left; font-size: 1.25rem; }
  .persona-card__header { flex-direction: column; gap: var(--spacing-sm); }
}
@media (max-width: 380px) {
  .persona-card__stats { grid-template-columns: 1fr; }
}

.sali-callout { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--spacing-lg); margin: var(--spacing-lg) 0; }
.sali-callout__row { display: flex; align-items: baseline; gap: var(--spacing-md); margin-bottom: var(--spacing-xs); }
.sali-callout__year { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); min-width: 2.5rem; }
.sali-callout__value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.sali-callout__unit { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
.sali-callout__arrow { font-size: 1.25rem; color: var(--color-text-muted); padding: var(--spacing-xs) 0; margin-left: 2.5rem; }
.sali-callout__note { margin-top: var(--spacing-md); font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.6; border-top: 1px solid var(--color-border-light); padding-top: var(--spacing-md); }

.contact-email-link { font-size: 1.125rem; font-weight: 600; color: var(--color-accent); }

.about-section { background: var(--color-bg-secondary); padding: var(--spacing-xl); border-radius: var(--radius); margin-top: var(--spacing-xl); border: 1px solid var(--color-border); }
.about-section p { margin-bottom: 0; font-size: 1.05rem; color: var(--color-text); }

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

.podcast-section { margin-top: var(--spacing-lg); }
.podcast-placeholder { background: var(--color-bg-card); border: 1px dashed var(--color-border); border-radius: var(--radius); padding: var(--spacing-xl); text-align: center; color: var(--color-text-muted); margin-bottom: var(--spacing-lg); }
.podcast-video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--spacing-md); background: var(--color-bg-card); }
.podcast-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.podcast-video-label { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: var(--spacing-xl); }
.podcast-stats { display: flex; gap: var(--spacing-xl); margin: var(--spacing-xl) 0; padding: var(--spacing-lg) 0; border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); }
.podcast-stat { text-align: center; flex: 1; }
.podcast-stat__value { font-size: 1.75rem; font-weight: 700; color: var(--color-accent); line-height: 1.1; }
.podcast-stat__label { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.podcast-cta-row { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-xl); flex-wrap: wrap; }

.page-header { padding: var(--spacing-xl) 0; border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--spacing-xl); }
.page-header h1 { margin-bottom: var(--spacing-sm); }
.page-header__subtitle { color: var(--color-text-muted); font-size: 1.1rem; }

@media (max-width: 768px) {
  html { font-size: 15px; }
  .hero__headline { font-size: 2rem; }
  .nav__links { gap: var(--spacing-md); flex-wrap: wrap; }
  .calculator { padding: var(--spacing-lg); }
  .output-group__value--primary { font-size: 1.5rem; }
  .projection-table { font-size: 0.8rem; }
  .projection-table th, .projection-table td { padding: var(--spacing-xs) var(--spacing-sm); }
  .nav__controls { position: fixed; top: 10px; right: 12px; z-index: 1001; }
}

@media (max-width: 480px) {
  .hero__headline { font-size: 1.75rem; }
  .hero__subheadline { font-size: 1rem; }
}

.equivalents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xs); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-light); }
.equiv-item { text-align: center; padding: var(--spacing-sm); background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); }
.equiv-value { display: block; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.equiv-label { display: block; font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.salary-mode-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.mode-btn { flex: 1; padding: 0.5rem var(--spacing-md); background: transparent; border: none; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.mode-btn + .mode-btn { border-left: 1px solid var(--color-border); }
.mode-btn--active { background: var(--color-accent); color: #ffffff; }
.mode-btn:hover:not(.mode-btn--active) { background: var(--color-bg-secondary); color: var(--color-text); }
.real-growth-note { font-size: 0.8125rem; color: var(--color-text-secondary); padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg-secondary); border-radius: var(--radius-sm); border-left: 2px solid var(--color-accent); font-family: var(--font-mono); line-height: 1.5; }

.history-section { margin-top: var(--spacing-xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border-light); }
.history-section__header h3 { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-xs); }
.history-section__desc { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); max-width: 560px; }
.history-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); max-width: 560px; }
.history-summary { padding: var(--spacing-md) var(--spacing-lg); background: var(--color-bg-secondary); border: 1px solid var(--color-border-light); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--spacing-md); }
.history-summary strong { color: var(--color-text); }

.breakeven-intro { font-size: 0.875rem; color: var(--color-text-secondary); text-align: center; margin-bottom: var(--spacing-xl); max-width: 480px; margin-left: auto; margin-right: auto; }
.breakeven-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: start; }
.breakeven-main { background: var(--color-bg-secondary); padding: var(--spacing-xl); border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); text-align: center; }
.breakeven-detail { display: flex; flex-direction: column; gap: var(--spacing-md); }
.breakeven-gap { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); font-size: 0.8125rem; font-family: var(--font-mono); line-height: 1.5; }
.breakeven-gap--behind { background: rgba(220, 38, 38, 0.06); border-left: 2px solid #dc2626; color: #dc2626; }
.breakeven-gap--ahead { background: rgba(22, 163, 74, 0.06); border-left: 2px solid #16a34a; color: #16a34a; }
@media (max-width: 768px) { .history-inputs { grid-template-columns: 1fr; } .breakeven-grid { grid-template-columns: 1fr; } }

.benchmark-toggle { display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.benchmark-toggle__label { font-size: 0.75rem; color: var(--color-text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; margin-right: var(--spacing-xs); }
.benchmark-btn { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; padding: 4px 12px; border: 1px solid var(--color-border); border-radius: 4px; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.benchmark-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.benchmark-btn--active { background: var(--color-accent); border-color: var(--color-accent); color: #ffffff; }
.benchmark-panel { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-md); max-width: 320px; }

.decomp-summary { background: var(--color-bg-secondary); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--spacing-sm) var(--spacing-md); font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.6; margin-top: var(--spacing-sm); }
.decomp-summary strong { color: var(--color-text); }

.btn--share { flex: 1; min-width: 130px; text-align: center; padding: 10px var(--spacing-md); background: transparent; border: 2px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-accent); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; }
.btn--share:hover { background: var(--color-accent); color: #ffffff; }

.btn--tweet { flex: 1; min-width: 130px; text-align: center; padding: 10px var(--spacing-md); background: #000000; border: 2px solid #000000; border-radius: var(--radius-md); color: #ffffff; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn--tweet:hover { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; text-decoration: none; }
body.dark .btn--tweet { background: #ffffff; border-color: #ffffff; color: #000000; }
body.dark .btn--tweet:hover { background: #e0e0e0; border-color: #e0e0e0; }

.btn--tweet-hero { flex: 1 1 100%; min-width: 100%; padding: 16px var(--spacing-lg); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease; }
.btn--tweet-hero:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24); }

.breakdown-toggle-row { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-xs); }
.breakdown-toggle { background: none; border: none; color: var(--color-accent); font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.breakdown-toggle:hover { color: var(--color-accent-hover); }

.info-tip { display: inline-flex; align-items: center; position: relative; vertical-align: middle; margin-left: 0.25rem; }
.info-tip__btn { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: transparent; border: 1.5px solid var(--color-accent); color: var(--color-accent); font-size: 0.6rem; font-weight: 700; font-family: var(--font-mono); cursor: pointer; line-height: 1; padding: 0; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.info-tip__btn:hover, .info-tip__btn:focus { background: var(--color-accent); color: #fff; outline: none; }
.info-tip__content { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 240px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(0,0,0,0.12); padding: 0.625rem 0.75rem; font-size: 0.75rem; line-height: 1.5; color: var(--color-text-secondary); z-index: 200; text-align: left; pointer-events: none; }
.info-tip__content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--color-border); }
.info-tip:hover .info-tip__content, .info-tip__btn:focus + .info-tip__content { display: block; }
@media (max-width: 480px) {
  .info-tip__content { width: 200px; bottom: auto; top: calc(100% + 6px); left: 0; transform: none; }
  .info-tip__content::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--color-border); }
}

.sali-tier { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--spacing-sm); padding: 0.3rem 0.65rem; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-bg-secondary); font-size: 0.75rem; font-weight: 600; font-family: var(--font-mono); color: var(--color-text); }
.sali-tier__label { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 400; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.2rem; }

.pp-narrative { background: var(--color-bg-secondary); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-md); font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.55; }
.pp-narrative__headline { font-weight: 600; color: var(--color-text); margin-bottom: 0.2rem; font-size: 0.8125rem; }

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }

body.dark {
  --color-bg: #0d0d0d;
  --color-bg-secondary: #1a1a1a;
  --color-bg-card: #1a1a1a;
  --color-bg-card-hover: #242424;
  --color-border: #333333;
  --color-border-light: #2a2a2a;
  --color-text: #f0f0f0;
  --color-text-secondary: #cccccc;
  --color-text-muted: #999999;
}
body.dark .nav { background: rgba(13, 13, 13, 0.95); }
body.dark .fx-warning { background: #1a1200; border-color: #4a3600; color: #d4a017; }
body.dark .info-tip__content { box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
body.dark .chart-container { background: var(--color-bg-secondary); border-color: var(--color-border); }

.theme-toggle { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); transition: border-color 0.2s ease, color 0.2s ease; flex-shrink: 0; }
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-text); }
.nav__controls { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
.lang-toggle { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--color-text-muted); text-decoration: none; flex-shrink: 0; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color 0.2s ease, color 0.2s ease; }
.lang-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-toggle:focus-visible, .lang-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.sali-score-wrap { margin: var(--spacing-md) 0; }
.sali-score { display: flex; align-items: center; gap: var(--spacing-lg); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-md) var(--spacing-lg); }
.sali-score__left { text-align: center; min-width: 70px; flex-shrink: 0; }
.sali-score__label { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 2px; }
.sali-score__grade { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; line-height: 1; }
.sali-score__grade--S { color: #F7931A; }
.sali-score__grade--A { color: #16a34a; }
.sali-score__grade--B { color: #65a30d; }
.sali-score__grade--C { color: #ca8a04; }
.sali-score__grade--D { color: #ea580c; }
.sali-score__grade--F { color: #dc2626; }
.sali-score__right { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sali-score__stat { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-text-secondary); font-weight: 500; }
.sali-score__tagline { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
body.dark .sali-score { background: var(--color-bg-secondary); border-color: var(--color-border); }

.strc-form-group { border-top: 1px solid var(--color-border); padding-top: var(--spacing-md); margin-top: var(--spacing-xs); }
.strc-enable-row { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-xs); }
.strc-checkbox { width: 15px; height: 15px; accent-color: var(--color-accent); cursor: pointer; flex-shrink: 0; }
.strc-enable-label { font-size: 0.875rem; color: var(--color-text); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.strc-yield-display { font-size: 0.72rem; font-family: var(--font-mono); color: var(--color-text-muted); margin-top: var(--spacing-xs); padding: 4px 6px; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.strc-yield-display--live::before { content: '\25CF '; color: #16a34a; }
.strc-yield-display--fallback::before { content: '\25CB '; color: var(--color-text-muted); }
.strc-output-wrap { margin: var(--spacing-md) 0; padding: var(--spacing-md); background: var(--color-bg-card); border-radius: var(--radius-sm); border: 1px solid rgba(74, 222, 128, 0.25); }
.strc-output__title { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #4ade80; margin-bottom: var(--spacing-sm); }
.strc-output__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm) var(--spacing-md); }
.strc-output__grid .output-group { margin-bottom: 0; }
.strc-output__grid .output-group:nth-child(2) { grid-column: 1 / -1; }
.strc-value--dividend { color: #4ade80 !important; }
.strc-yield-note { font-size: 0.68rem; font-family: var(--font-mono); color: var(--color-text-muted); margin-top: var(--spacing-sm); padding-top: var(--spacing-xs); border-top: 1px solid var(--color-border); }
body.dark .strc-output-wrap { border-color: rgba(74, 222, 128, 0.15); }
@media (max-width: 480px) { .strc-output__grid { grid-template-columns: 1fr; } .strc-output__grid .output-group:nth-child(2) { grid-column: auto; } }

.privacy-service-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin: var(--spacing-md) 0 var(--spacing-lg); }
.privacy-service { padding: var(--spacing-md); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); }
.privacy-service__name { font-weight: 700; font-size: 0.875rem; margin-bottom: 4px; }
.privacy-service__purpose { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 6px; line-height: 1.5; }
.privacy-service__url { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); }

/* Social share buttons */
.share-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}
.share-row .btn--social--x { grid-column: 1 / -1; }
.btn--social {
  display: block;
  text-align: center;
  padding: 0.55rem var(--spacing-md);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: filter 0.12s ease, transform 0.1s ease;
}
.btn--social:hover { filter: brightness(1.12); transform: translateY(-1px); text-decoration: none; }
.btn--social--x      { background: #000000; color: #ffffff; }
.btn--social--fb     { background: #1877F2; color: #ffffff; }
.btn--social--li     { background: #0A66C2; color: #ffffff; }
.btn--social--reddit { background: #FF4500; color: #ffffff; }
body.dark .btn--social--x { background: #ffffff; color: #000000; }
@media (max-width: 500px) {
  .share-row { grid-template-columns: 1fr; }
  .share-row .btn--social--x { grid-column: auto; }
  .btn--social { font-size: 0.78rem; }
}

.persona-card--strc { border-color: rgba(74, 222, 128, 0.4); border-left-color: #4ade80; }
.persona-strc-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #4ade80; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 4px; padding: 2px 8px; margin-top: var(--spacing-xs); }
.persona-strc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm) var(--spacing-md); margin: var(--spacing-md) 0; padding: var(--spacing-md); background: rgba(74, 222, 128, 0.04); border: 1px solid rgba(74, 222, 128, 0.2); border-radius: var(--radius-sm); }
.persona-strc-item__label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 2px; }
.persona-strc-item__value { font-size: 0.875rem; font-weight: 700; font-family: var(--font-mono); color: #4ade80; }
.persona-strc-note { font-size: 0.72rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--spacing-sm); margin-top: var(--spacing-sm); line-height: 1.5; }
@media (max-width: 640px) { .persona-strc-grid { grid-template-columns: 1fr 1fr; } }