/* Sept 30 dated view. Type, spacing and panels come from narrative.css; only this page's own pieces live here. */
.ratesview { --cost:#ff98ae }
.narrative .rt-hero { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:600px; padding:0; border:0; margin:0 0 40px; overflow:hidden; background:#05070d }
.rt-hero > img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:70% center }
.rt-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,7,13,.92),rgba(5,7,13,.6) 40%,transparent 66%) }
.rt-hero-copy { width:58%; max-width:620px; padding:54px 44px 40px }
.rt-hero h1 { font-size:clamp(34px,4.2vw,54px); line-height:1.16; letter-spacing:-.04em; margin:10px 0 22px }
/* Japanese breaks by phrase where the browser can (auto-phrase), at the comma otherwise. */
.rt-hero h1:lang(ja) { word-break:keep-all; word-break:auto-phrase; overflow-wrap:anywhere; font-size:clamp(28px,3.5vw,44px) }
.rt-hero .nv-lead { font-size:17px; line-height:1.8; color:#c0c9d6 }
.rt-read { display:inline-flex; gap:22px; margin-top:26px; padding-bottom:9px; border-bottom:1px solid var(--accent); font-size:14px; text-decoration:none }
.ratesview h2 { max-width:none }
/* Label, figure and note share rows across tiles, so a label that wraps does not push its figure down. */
.ratesview .nv-tiles > div { display:grid; grid-template-rows:subgrid; grid-row:span 3 }
.rt-cost strong { color:var(--cost) }
.rt-legend i { display:inline-block; width:9px; height:9px; margin:0 8px 0 0; background:var(--accent) }
.rt-legend i.rt-cost { background:var(--cost) } .rt-legend i + i { margin-left:18px }
.rt-bars { display:grid; gap:20px; padding:10px 0 }
.rt-bar { display:grid; grid-template-columns:132px minmax(0,1fr) 72px; align-items:center; gap:14px; font:15px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace }
.rt-bar > div { position:relative; height:28px; background:var(--panel) }
.rt-bar > div::before { content:""; position:absolute; left:var(--z); top:-6px; bottom:-6px; width:1px; background:var(--muted) }
.rt-bar i { position:absolute; top:0; bottom:0; background:var(--accent) }
.rt-bar i.rt-neg { background:var(--cost) }
.rt-bar b { font-weight:500; text-align:right; color:var(--accent) } .rt-bar b.rt-neg { color:var(--cost) }
.rt-shift { display:flex; align-items:baseline; gap:16px; margin:0; font-size:clamp(42px,5vw,64px); line-height:1.1; letter-spacing:-.04em }
.rt-shift span { color:var(--muted); font-weight:300 } .rt-shift b:last-child { color:var(--cost) }
.rt-shift + .nv-fine { margin:8px 0 0 }
.rt-eq { display:grid; grid-template-columns:1fr auto 1fr auto 1.15fr; align-items:center; gap:28px; margin:44px 0 48px }
.rt-eq p { margin:0 0 8px; font-size:15px; color:var(--muted) }
.rt-eq strong { display:block; font-size:clamp(40px,5.6vw,76px); line-height:1.05; letter-spacing:-.045em; font-weight:600 }
.rt-eq span { display:block; margin-top:14px; font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted) }
.rt-eq > b { font:300 44px/1 sans-serif; color:var(--muted) }
.rt-eq .rt-neg strong { color:var(--cost) }
.rt-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; padding:26px 0 0; margin:0; border-top:1px solid var(--line); font-size:14px; color:var(--muted) }
.rt-facts b { display:block; font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.02em }
.rt-stack { display:flex; gap:2px; height:104px }
.rt-stack > div { min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:14px; background:var(--panel); font:13px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted) }
.rt-stack b { font:600 25px/1 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif; color:var(--ink); letter-spacing:-.03em }
.rt-stack > div:first-child, .rt-stack > div:first-child b { background:var(--accent); color:#06331f }
.rt-stack > div:last-child { box-shadow:inset 0 3px var(--cost) }
.rt-pay { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:18px; margin-top:40px }
.rt-pay span { display:block; font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted) }
.rt-pay strong { font-size:clamp(30px,3.6vw,44px); line-height:1.25; letter-spacing:-.035em; font-weight:600 }
.rt-pay > b { font:300 32px/1.5 sans-serif; color:var(--muted) }
.rt-pay p { grid-column:1/-1; margin:4px 0 0; font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted) }
.rt-pay p b { display:block; font-size:16px; font-weight:500; color:var(--cost) }
.ratesview .rt-view blockquote { margin:0 0 44px; padding-left:24px; border-left:2px solid var(--accent); font-size:clamp(21px,2.3vw,28px); line-height:1.65 }
@media(max-width:980px) { .rt-flip > .nv-panel { order:-1 } }
@media(max-width:640px) { .ratesview .rt-view blockquote { padding-left:16px; margin-bottom:30px } }
@media(max-width:800px) {
  .narrative .rt-hero { display:block; min-height:0; background:none }
  .rt-hero > img { position:static; height:auto; aspect-ratio:3/2; object-position:88% center }
  .rt-hero::after { display:none }
  .rt-hero-copy { width:100%; max-width:none; padding:26px 0 8px }
  .rt-eq { gap:16px }
}
@media(max-width:640px) {
  .rt-hero h1 { font-size:34px }
  .rt-bar { grid-template-columns:86px minmax(0,1fr) 58px; gap:8px; font-size:12px } .rt-bar > div { height:24px }
  .rt-eq { grid-template-columns:auto 1fr; gap:14px 16px; margin:30px 0 } .rt-eq > div:first-child { grid-column:2 }
  .rt-eq > b { font-size:30px; width:22px } .rt-eq strong { font-size:44px } .rt-eq span { margin-top:6px }
  .rt-facts { grid-template-columns:1fr; gap:16px }
  .rt-stack { height:96px } .rt-stack > div { padding:10px 8px; font-size:11px } .rt-stack b { font-size:19px }
  .rt-pay { gap:10px }
}