:root {
  color-scheme: light;
  --ink: #18212a;
  --ink-2: #45525f;
  --muted: #4f6270;
  --line: #d8e1e8;
  --line-strong: #b7c5d1;
  --paper: #f5f8fa;
  --surface: #ffffff;
  --surface-2: #edf3f7;
  --surface-aluminium: #e0ebf3;
  --charcoal: #111923;
  --charcoal-2: #1a2531;
  --aluminium: #5d86a5;
  --aluminium-dark: #365f80;
  --aluminium-burnished: #20425d;
  --aluminium-light: #8db1cb;
  --aluminium-glint: #dcebf5;
  --gain: #176b58;
  --loss: #ae3f36;
  --info: #315f87;
  --shadow: 0 12px 30px rgb(111 45 24 / 10%);
  --radius: 12px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--aluminium-dark); text-underline-offset: 3px; }
a:hover { color: var(--aluminium); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgb(215 103 60 / 38%); outline-offset: 3px; }

.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 14px; border-radius: 6px; background: var(--charcoal); color: white; }
.skip-link:focus { transform: none; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.18; letter-spacing: -.025em; }
h1 { margin-bottom: 14px; font-size: clamp(1.85rem, 7vw, 3rem); }
h2 { margin-bottom: 10px; font-size: clamp(1.45rem, 5vw, 2.15rem); }
h3 { margin-bottom: 8px; font-size: 1.08rem; }
p { margin-bottom: 16px; color: var(--ink-2); }
ul { padding-left: 20px; }
li + li { margin-top: 7px; }

.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid #2c465b; background: rgb(32 29 28 / 97%); box-shadow: 0 4px 18px rgb(35 25 22 / 12%); backdrop-filter: blur(12px); }
.header-shell { display: flex; min-height: 0; align-items: center; justify-content: space-between; gap: 16px; padding-block: 4px; }
.brand { display: inline-flex; min-width: 0; align-items: center; color: #fffaf6; text-decoration: none; }
.brand-logo { width: auto; height: 70px; max-width: 240px; object-fit: contain; }
.page-hero > .brand { width: max-content; }
.desktop-nav { display: none; }
.menu-button { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid #3c5b73; border-radius: 8px; background: #1a2531; color: #fff; }
.menu-button svg { width: 23px; height: 23px; }
.mobile-nav { display: none; padding: 6px 16px 16px; border-top: 1px solid #2c465b; background: var(--charcoal); }
.mobile-nav.open { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mobile-nav a { display: flex; min-height: 44px; align-items: center; padding: 8px 12px; border-radius: 6px; color: #edf5fa; font-weight: 700; text-decoration: none; }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { background: #29475e; color: #fff; }

.breadcrumb { padding-block: 16px 8px; color: var(--muted); font-size: .78rem; }
.breadcrumb ol { display: flex; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-inline: 8px; color: #8193a2; }
.breadcrumb a { color: inherit; }

.home-intro, .page-hero { padding-block: 26px 20px; }
.home-intro { padding-bottom: 14px; }
.page-hero { max-width: var(--container); }
.eyebrow, .section-kicker { margin-bottom: 8px; color: var(--aluminium-dark); font-size: .72rem; font-weight: 850; letter-spacing: .105em; text-transform: uppercase; }
.lede { max-width: 760px; margin-bottom: 0; color: var(--ink-2); font-size: 1.03rem; line-height: 1.55; }
.intro-grid .lede { max-width: 660px; }

.section { padding-block: 42px; }
.section.compact { padding-block: 26px; }
.section.tint { border-block: 1px solid #f0ddd2; background: var(--surface-2); }
.section-heading { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.section-heading h2 { margin-bottom: 7px; }
.section-copy { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: .94rem; }
.section-heading > a { align-self: flex-start; font-weight: 750; text-decoration: none; }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.content-card, .feature-card, .calculator-card, .page-aside { padding: 20px; }
.content-card > :last-child, .feature-card > :last-child, .calculator-card > :last-child { margin-bottom: 0; }
.grid-2, .grid-3, .calculator-shell, .insight-grid { display: grid; gap: 16px; }

.price-stage { overflow: hidden; border: 1px solid #8f472c; border-top: 3px solid var(--aluminium-light); border-radius: 14px; background: linear-gradient(122deg, #1e1c1b 0%, #282321 66%, #5b2719 145%); box-shadow: 0 18px 42px rgb(104 39 20 / 20%); }
.price-panel { padding: 22px 20px; color: #fff; }
.live-line { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: #eadcd6; font-size: .76rem; font-weight: 750; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #54a58e; box-shadow: 0 0 0 5px rgb(84 165 142 / 13%); }
.status-dot.delayed { background: #e8a149; }
.price-label { color: #f4ac88; font-size: .76rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.headline-price { margin: 7px 0 12px; color: #fff; font-size: clamp(2.8rem, 14vw, 4.8rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.headline-price small { color: #ddcec8; font-size: .28em; font-weight: 700; letter-spacing: 0; }
.price-equivalent { margin: 0 0 14px; color: #ffd1b9; font-size: .96rem; font-weight: 700; }
.change-pill { display: inline-flex; min-height: 34px; align-items: center; padding: 5px 10px; border: 1px solid currentColor; border-radius: 6px; background: rgb(255 255 255 / 6%); color: #f2e4dc; font-weight: 800; font-variant-numeric: tabular-nums; }
.change-pill.positive, .change-pill.up, .positive { color: var(--gain); }
.change-pill.negative, .change-pill.down, .negative { color: var(--loss); }
.price-panel .change-pill.positive, .price-panel .change-pill.up { color: #83d6bd; }
.price-panel .change-pill.negative, .price-panel .change-pill.down { color: #ff9d94; }
.updated-line { margin: 18px 0 0; color: #d4c4be; font-size: .78rem; line-height: 1.65; }
.price-actions, .cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid #a83e20; border-radius: 7px; background: linear-gradient(180deg, #d96b40 0%, #c6532d 52%, #a73b1e 100%); color: #fff; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px rgb(255 226 209 / 55%); }
.button:hover { border-color: var(--aluminium-dark); background: var(--aluminium-dark); color: #fff; }
.button.secondary { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.price-panel .button.secondary, .cta-band .button.secondary { border-color: #7c574d; background: transparent; box-shadow: none; color: #fff; }
.snapshot-side { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #654034; background: #292523; }
.metric-card { min-width: 0; padding: 16px; border-right: 1px solid #503b34; border-bottom: 1px solid #503b34; }
.metric-label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.price-stage .metric-label { color: #c5aaa0; }
.metric-value { margin-top: 4px; color: var(--ink); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.price-stage .metric-value { color: #fff9f5; }
.metric-note { display: none; margin-top: 4px; color: #ad948b; font-size: .72rem; }

.data-notice { margin-top: 14px; padding: 12px 14px; border: 1px solid #b9ccdc; border-radius: 7px; background: #f1f6fa; color: #294f70; font-size: .85rem; }
.data-notice.error { border-color: #e2b9b5; background: #fff3f1; color: #87332e; }

.chart-card { overflow: hidden; }
.chart-toolbar { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-bottom: 1px solid var(--line); }
.chart-toolbar h2, .chart-toolbar h3 { margin-bottom: 5px; }
.chart-range-note { margin: 5px 0 0; color: var(--info); font-size: .8rem; }
.chart-date-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 12px; padding: 0 18px; color: var(--muted); font-size: .78rem; }
.chart-date-values { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: thin; }
.chart-date-values span { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-weight: 700; }
.range-buttons { display: flex; max-width: 100%; flex-wrap: wrap; gap: 6px; }
.range-buttons button, .quick-chips button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink-2); font-weight: 800; cursor: pointer; }
.range-buttons button:hover, .quick-chips button:hover { border-color: var(--aluminium); color: var(--aluminium-dark); }
.range-buttons button.active { border-color: var(--aluminium-dark); background: var(--aluminium-dark); color: #fff; }
.range-buttons button:disabled { cursor: wait; opacity: .65; }
.chart-wrap { position: relative; min-height: 300px; padding: 8px 0 0; background: #fff; }
.chart-wrap canvas { width: 100%; height: 300px; cursor: crosshair; touch-action: pan-y; }
.history-chart-wrap canvas { height: 360px; }
.chart-tooltip { position: absolute; z-index: 4; width: max-content; min-width: 220px; max-width: min(290px, calc(100% - 24px)); transform: translate(-50%, calc(-100% - 12px)); padding: 12px; border: 1px solid #9d4b30; border-radius: 8px; background: rgb(32 29 28 / 97%); color: white; font-size: .74rem; line-height: 1.4; pointer-events: none; box-shadow: 0 10px 28px rgb(0 0 0 / 28%); }
.tooltip-title { display: block; margin-bottom: 9px; color: var(--aluminium-glint); font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.tooltip-price { display: block; color: #fff; font-size: 1rem; font-weight: 850; }
.tooltip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.tooltip-stat { display: grid; gap: 1px; }
.tooltip-stat span { color: #cbb9b1; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tooltip-stat strong { color: #fff; font-size: .76rem; font-variant-numeric: tabular-nums; }
.tooltip-stat-wide { grid-column: 1 / -1; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--muted); text-align: center; }
.chart-caption { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fff8f3; color: var(--muted); font-size: .74rem; }
.accessible-chart { border-top: 1px solid var(--line); }
.accessible-chart summary { min-height: 44px; padding: 12px 18px; color: var(--aluminium-dark); font-weight: 800; cursor: pointer; }
.chart-trend-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: #fff8f3; }
.chart-trend-grid > div { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chart-trend-grid span { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.chart-trend-grid strong { display: block; overflow: hidden; margin-top: 3px; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.table-card { overflow: hidden; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { padding: 14px 16px; color: var(--ink); font-weight: 800; text-align: left; }
th, td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
th { background: #fbe8dc; color: #704d40; font-size: .7rem; letter-spacing: .045em; text-transform: uppercase; }
th:first-child, td:first-child { text-align: left; }
tbody tr:nth-child(even) { background: #fff8f3; }
.table-status { padding: 14px 16px; color: var(--muted); font-size: .85rem; }

.insight-grid { grid-template-columns: 1fr 1fr; }
.insight { padding: 18px; box-shadow: none; }
.insight strong { display: block; margin-bottom: 6px; }
.insight p { margin: 0; font-size: .88rem; }
.coverage-note { display: grid; gap: 3px; padding: 13px 15px; border-left: 4px solid var(--aluminium); background: var(--surface-aluminium); color: var(--ink-2); font-size: .86rem; }
.coverage-note strong { color: var(--ink); }

.calculator-card label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: .82rem; font-weight: 750; }
.field-grid { display: grid; gap: 12px; }
input, select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink); }
.calc-result { margin-top: 18px; padding: 16px; border-left: 4px solid var(--aluminium); background: var(--surface-aluminium); }
.calc-result span, .calc-result small { display: block; color: var(--muted); }
.calc-result strong { display: block; margin-block: 4px; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.quick-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.quick-chips button { padding-inline: 12px; }

.callout { padding: 18px; border-left: 4px solid var(--aluminium); border-radius: 0 8px 8px 0; background: var(--surface-aluminium); }
.callout p:last-child { margin-bottom: 0; }
.feature-icon { display: grid; width: 38px; height: 38px; margin-bottom: 14px; place-items: center; border-radius: 8px; background: var(--surface-aluminium); color: var(--aluminium-dark); font-weight: 850; }
.definition-list { display: grid; gap: 0; margin: 0; }
.definition-list > div { display: grid; gap: 4px; padding-block: 13px; border-bottom: 1px solid var(--line); }
.definition-list > div:last-child { border-bottom: 0; }
.definition-list dt { color: var(--ink); font-weight: 800; }
.definition-list dd { margin: 0; color: var(--ink-2); }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding-block: 12px; color: var(--ink); font-weight: 800; cursor: pointer; list-style: none; }
.faq summary::after { content: "+"; color: var(--aluminium); font-size: 1.35rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 16px; margin: 0; }

.history-actions, .history-view-actions, .analytics-actions { display: flex; flex-direction: column; gap: 12px; }
.history-actions { margin-bottom: 16px; }
.method-chip { display: inline-flex; margin: 3px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: .75rem; font-weight: 750; }
.page-shell { display: grid; gap: 20px; }
.prose { max-width: 820px; }
.prose section { padding-block: 22px; border-top: 1px solid var(--line); }
.prose section:first-child { padding-top: 0; border-top: 0; }
.page-aside { display: grid; align-content: start; gap: 4px; box-shadow: none; }
.page-aside strong { margin-bottom: 8px; }
.page-aside a { display: flex; min-height: 44px; align-items: center; border-top: 1px solid var(--line); text-decoration: none; }
.cta-band { padding: 22px; border-radius: var(--radius); background: var(--charcoal); color: white; }
.cta-band h2 { color: white; }
.cta-band p { color: #d9c8be; }
.disclaimer { max-width: 850px; margin: 0 auto; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; text-align: center; }

.site-footer { margin-top: 40px; border-top: 5px solid; border-image: linear-gradient(90deg, #8c2c17, #f4ab85 46%, #cf5730 70%, #20425d) 1; background: var(--charcoal); color: #d9cbc5; }
.footer-grid { display: grid; gap: 28px; padding-block: 34px; }
.footer-brand p { max-width: 320px; margin: 12px 0 0; color: #bdaaa3; font-size: .86rem; }
.footer-col { display: grid; align-content: start; gap: 5px; }
.footer-col strong { margin-bottom: 5px; color: #fff; font-size: .76rem; letter-spacing: .065em; text-transform: uppercase; }
.footer-col a { display: flex; min-height: 36px; align-items: center; color: #d9cbc5; text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-direction: column; gap: 5px; padding-block: 16px 24px; border-top: 1px solid #493936; color: #a9938c; font-size: .75rem; }

@media (min-width: 600px) {
  .container { width: min(calc(100% - 48px), var(--container)); }
  .home-intro, .page-hero { padding-block: 36px 24px; }
  .section { padding-block: 54px; }
  .section.compact { padding-block: 32px; }
  .grid-2, .calculator-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: 1.5fr 1fr; }
  .chart-toolbar, .section-heading { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .chart-wrap, .chart-wrap canvas { min-height: 390px; height: 390px; }
  .history-chart-wrap, .history-chart-wrap canvas { min-height: 440px; height: 440px; }
  .chart-trend-grid { grid-template-columns: repeat(4, 1fr); }
  .chart-trend-grid > div { border-bottom: 0; }
  .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 900px) {
  .header-shell { min-height: 0; }
  .brand-logo { height: 82px; max-width: 280px; }
  .desktop-nav { display: flex; align-items: center; gap: 3px; }
  .desktop-nav a { display: flex; min-height: 42px; align-items: center; padding: 8px 11px; border-radius: 6px; color: #e5d9d2; font-size: .84rem; font-weight: 750; text-decoration: none; }
  .desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: #29475e; color: #fff; }
  .desktop-nav .nav-cta { margin-left: 5px; background: var(--aluminium-dark); color: #fff; box-shadow: inset 0 1px rgb(255 225 207 / 35%); }
  .menu-button, .mobile-nav { display: none !important; }
  .home-intro { padding-top: 44px; }
  .intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .75fr); align-items: end; gap: 40px; }
  .intro-grid h1 { margin-bottom: 0; }
  .price-stage { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(380px, .72fr); }
  .price-panel { padding: 34px 38px; }
  .snapshot-side { border-top: 0; border-left: 1px solid #654034; }
  .metric-card { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
  .metric-note { display: block; }
  .headline-price { margin-block: 10px 14px; }
  .history-actions { flex-direction: row; align-items: center; justify-content: space-between; }
  .history-view-actions { flex-direction: row; align-items: center; }
  .page-shell { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .page-aside { position: sticky; top: 96px; }
}

@media (max-width: 359px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .brand-logo { height: 60px; max-width: 205px; }
  .headline-price { font-size: 2.55rem; }
  .snapshot-side { grid-template-columns: 1fr; }
  .metric-card { border-right: 0; }
  .insight-grid { grid-template-columns: 1fr; }
  .price-actions .button, .cta-actions .button { width: 100%; }
  .chart-wrap, .chart-wrap canvas { min-height: 280px; height: 280px; }
  .chart-trend-grid { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .chart-tooltip { right: 12px; left: 12px !important; top: 12px !important; width: auto; min-width: 0; max-width: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}