/* ============================================================
 TOKENS (from silverrate.in design system)
 ============================================================ */

:root{
 
 --brand-ink:#0B1220;
 --brand-ink-2:#1A2236;
 --brand-silver:#C9CED6;
 --brand-silver-2:#E8EBF0;
 --brand-silver-3:#F6F7F9;
 --brand-accent:#0E5FD9;
 --brand-accent-2:#3D82F0;

 
 --n-0:#FFFFFF;
 --n-25:#FBFBFD;
 --n-50:#F6F7F9;
 --n-100:#EDEFF3;
 --n-200:#DFE3EA;
 --n-300:#C7CCD6;
 --n-400:#9AA1AE;
 --n-500:#6B7382;
 --n-600:#4A515E;
 --n-700:#2F3542;
 --n-800:#1A2236;
 --n-900:#0B1220;

 
 --bg:#FFFFFF;
 --bg-alt:#FBFBFD;
 --bg-muted:#F6F7F9;
 --bg-inverse:#0B1220;
 --fg:#0B1220;
 --fg-muted:#4A515E;
 --fg-subtle:#6B7382;
 --fg-faint:#9AA1AE;
 --fg-inverse:#FFFFFF;
 --border:#DFE3EA;
 --border-strong:#C7CCD6;
 --border-faint:#EDEFF3;

 
 --up:#047A4A;
 --up-bg:#E6F4EC;
 --down:#C1343B;
 --down-bg:#FBEAEB;

 
 --info:#0E5FD9;
 --info-bg:#E7F0FD;
 --warn:#B35C00;
 --warn-bg:#FBEFDB;
 --success:#047A4A;
 --success-bg:#E6F4EC;

 
 --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
 --font-serif:'Instrument Serif','Times New Roman',Georgia,serif;
 --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

 
 --fs-display:64px;
 --fs-h1:44px;
 --fs-h2:32px;
 --fs-h3:22px;
 --fs-h4:18px;
 --fs-body:15px;
 --fs-small:13px;
 --fs-micro:11px;

 
 --r-xs:4px;
 --r-sm:6px;
 --r-md:10px;
 --r-lg:14px;
 --r-xl:20px;
 --r-pill:999px;

 
 --shadow-xs:0 1px 2px rgba(11,18,32,0.04);
 --shadow-sm:0 1px 3px rgba(11,18,32,0.06),0 1px 2px rgba(11,18,32,0.04);
 --shadow-md:0 4px 12px rgba(11,18,32,0.06),0 2px 4px rgba(11,18,32,0.04);
 --shadow-lg:0 12px 32px rgba(11,18,32,0.08),0 4px 8px rgba(11,18,32,0.04);
 --shadow-focus:0 0 0 3px rgba(14,95,217,0.20);

 
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;
 --s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;
 --s-9:48px;--s-10:64px;--s-11:80px;--s-12:96px;

 
 --dur-fast:120ms;
 --dur-base:200ms;
 --dur-slow:360ms;
 --ease:cubic-bezier(0.2,0.8,0.2,1);
 --ease-out:cubic-bezier(0.16,1,0.3,1);

 
 --w-page:1200px;
 --w-wide:1360px;
}

/* ============================================================
 BASE
 ============================================================ */

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

html{scroll-behavior:smooth;}

html,body{
 margin:0;
 font-family:var(--font-sans);
 font-size:var(--fs-body);
 color:var(--fg);
 background:var(--bg);
 line-height:1.5;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}

.container{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px;
}

::selection{background:var(--info-bg);color:var(--brand-accent);}


.serif{font-family:var(--font-serif);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.micro{font-size:var(--fs-micro);color:var(--fg-muted);letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.small{font-size:var(--fs-small);color:var(--fg-muted);}
.chip-up{background:var(--up-bg);color:var(--up);border-radius:var(--r-sm);padding:2px 7px;font-size:var(--fs-small);font-weight:600;font-variant-numeric:tabular-nums;display:inline-block;}
.chip-down{background:var(--down-bg);color:var(--down);border-radius:var(--r-sm);padding:2px 7px;font-size:var(--fs-small);font-weight:600;font-variant-numeric:tabular-nums;display:inline-block;}
.up{color:var(--up);}
.down{color:var(--down);}

/* ============================================================
 HEADER
 ============================================================ */

.site-header{
 position:sticky;
 top:0;
 z-index:50;
 background:rgba(255,255,255,0.84);
 backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);
 border-bottom:1px solid var(--border);
}

.hdr-inner{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px;
 display:flex;
 align-items:center;
 gap:18px;
 height:56px;
}

.site-branding a{
 display:flex;
 align-items:center;
 text-decoration:none;
}

.brand-wordmark{
 font-family:var(--font-serif);
 font-size:20px;
 color:var(--fg);
 letter-spacing:-0.02em;
}

.brand-wordmark span{
 color:var(--fg-subtle);
}

.hdr-nav{
 display:flex;
 gap:2px;
 margin-left:10px;
}

.hdr-nav a{
 color:var(--fg-muted);
 font-size:14px;
 font-weight:500;
 padding:6px 10px;
 border-radius:var(--r-md);
 text-decoration:none;
 transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}

.hdr-nav a:hover{
 background:var(--n-50);
 color:var(--fg);
}

.hdr-nav a.active{
 color:var(--fg);
}


.hdr-menu-btn{
 display:none;
 flex-direction:column;
 justify-content:center;
 gap:5px;
 width:36px;
 height:36px;
 background:transparent;
 border:none;
 cursor:pointer;
 padding:4px;
 margin-left:auto;
}
.hdr-menu-btn span{
 display:block;
 height:1.5px;
 background:var(--fg);
 border-radius:2px;
 transition:transform 200ms ease,opacity 200ms ease;
}
.hdr-menu-btn.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hdr-menu-btn.is-open span:nth-child(2){opacity:0;}
.hdr-menu-btn.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}


.hdr-mobile-menu{
 display:none;
 position:fixed;
 top:var(--header-h,56px);
 left:0;right:0;
 background:var(--surface);
 border-bottom:1px solid var(--border);
 padding:12px 20px 20px;
 flex-direction:column;
 gap:2px;
 z-index:99;
 box-shadow:0 8px 24px rgba(11,18,32,0.08);
}
.hdr-mobile-menu.is-open{display:flex;}
.hdr-mobile-menu .nav{
 padding:12px 8px;
 font-size:15px;
 font-weight:500;
 color:var(--fg);
 text-decoration:none;
 border-bottom:1px solid var(--n-100);
}
.hdr-mobile-menu .nav:last-child{border-bottom:none;}

.hdr-right{
 display:flex;
 align-items:center;
 gap:8px;
 margin-left:auto;
}

.site-title{display:none;}

/* ============================================================
 TICKER STRIP
 ============================================================ */

.ticker-strip{
 background:var(--brand-ink);
 color:var(--brand-silver-2);
 padding:7px 0;
 font-size:12px;
 border-bottom:1px solid #1A2236;
 overflow:hidden;
}

.ticker-inner{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px;
 display:flex;
 align-items:center;
 gap:22px;
 white-space:nowrap;
}

.ticker-live{
 display:flex;
 align-items:center;
 gap:6px;
 font-weight:700;
 letter-spacing:.14em;
 font-size:10px;
 flex-shrink:0;
}

.ticker-dot{
 width:6px;
 height:6px;
 background:#47D17C;
 border-radius:50%;
 animation:ticker-pulse 1.6s ease-in-out infinite;
}

@keyframes ticker-pulse{
 0%,100%{opacity:1;}
 50%{opacity:0.45;}
}

.ticker-city{
 display:flex;
 align-items:baseline;
 gap:5px;
}

.ticker-city .t-name{
 color:var(--n-400);
 font-size:10px;
 letter-spacing:.10em;
 text-transform:uppercase;
 font-family:var(--font-mono);
}

.ticker-city .t-price{
 font-family:var(--font-mono);
 font-weight:600;
 color:var(--brand-silver-2);
 font-size:12px;
}

.ticker-city .t-change{
 font-size:11px;
}

.ticker-city .t-change.up{color:#47D17C;}
.ticker-city .t-change.down{color:#FF8290;}

.ticker-time{
 margin-left:auto;
 color:var(--n-400);
 font-size:11px;
 font-family:var(--font-mono);
 flex-shrink:0;
}

/* ============================================================
 MAIN / PAGE LAYOUT
 ============================================================ */

.site-main{
 min-height:calc(100vh - 200px);
 padding-bottom:var(--s-12);
}

/* ============================================================
 HERO
 ============================================================ */

.hero-section{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:40px 24px 32px;
}

.hero-grid{
 display:grid;
 grid-template-columns:1.15fr 1fr;
 gap:48px;
 align-items:end;
}

.hero-eyebrow{
 font-size:11px;
 font-weight:700;
 letter-spacing:.12em;
 text-transform:uppercase;
 color:var(--fg-muted);
 display:flex;
 align-items:center;
 gap:8px;
 margin-bottom:14px;
}

.hero-eyebrow-dot{
 width:6px;
 height:6px;
 background:var(--brand-accent);
 border-radius:50%;
 flex-shrink:0;
}

.hero-headline{
 font-family:var(--font-serif);
 font-size:clamp(36px,4vw,54px);
 line-height:1.05;
 letter-spacing:-0.02em;
 font-weight:400;
 margin:0 0 14px;
 color:var(--fg);
}

.hero-headline em{
 font-style:italic;
 color:var(--fg-muted);
}

.hero-lede{
 color:var(--fg-muted);
 font-size:16px;
 line-height:1.55;
 margin:0 0 22px;
 max-width:520px;
}

.hero-actions{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}


.hero-rate-card{
 background:var(--n-0);
 border:1px solid var(--border);
 border-radius:var(--r-xl);
 padding:22px 24px;
 position:relative;
 overflow:hidden;
}

.hero-rate-card .dot-pattern{
 position:absolute;
 inset:0;
 opacity:.5;
 background-image:radial-gradient(var(--n-200) 1px,transparent 1px);
 background-size:24px 24px;
 mask-image:linear-gradient(180deg,black 0%,transparent 80%);
 -webkit-mask-image:linear-gradient(180deg,black 0%,transparent 80%);
 pointer-events:none;
}

.hero-rate-inner{
 position:relative;
 z-index:1;
}

.hr-label{
 display:flex;
 align-items:center;
 justify-content:space-between;
 font-size:12px;
 color:var(--fg-muted);
}

.hr-label-right{
 font-family:var(--font-mono);
 font-size:11px;
 color:var(--fg-faint);
}

.hr-city-select{
 display:flex;
 align-items:center;
 gap:6px;
 margin-bottom:6px;
}

.hr-city-select label{
 font-size:12px;
 color:var(--fg-muted);
 font-weight:500;
}

.hr-city-dropdown{
 padding:4px 8px;
 border:1px solid var(--border);
 border-radius:var(--r-sm);
 font-size:12px;
 font-family:var(--font-sans);
 color:var(--fg);
 background:var(--bg);
 cursor:pointer;
 font-weight:600;
}

.hr-city-dropdown:focus{
 outline:none;
 border-color:var(--brand-accent);
 box-shadow:var(--shadow-focus);
}

.hr-price{
 display:flex;
 align-items:baseline;
 gap:10px;
 margin-top:8px;
}

.hr-price .big{
 font-family:var(--font-serif);
 font-size:clamp(48px,6vw,72px);
 line-height:1;
 letter-spacing:-0.025em;
 color:var(--fg);
}

.hr-price .unit{
 font-size:14px;
 color:var(--fg-muted);
}

.hr-deltas{
 display:flex;
 gap:8px;
 margin-top:12px;
 flex-wrap:wrap;
}

.hr-tabs{
 display:flex;
 gap:20px;
 margin-top:16px;
 border-top:1px solid var(--border);
 padding-top:14px;
 font-size:13px;
 color:var(--fg-muted);
}

.hr-tabs .t{
 font-variant-numeric:tabular-nums;
}

.hr-tabs .t b{
 color:var(--fg);
 font-weight:600;
}

.hr-updated{
 font-size:11px;
 color:var(--fg-faint);
 font-family:var(--font-mono);
 margin-top:10px;
}


.hr-price .big.is-placeholder{
 color:var(--n-200);
}

/* ============================================================
 CITY SELECTOR SECTION
 ============================================================ */

.city-selector-section{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px 28px;
}

.section-hdr{
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 margin-bottom:18px;
}

.section-hdr h2{
 font-family:var(--font-serif);
 font-size:28px;
 line-height:1.1;
 letter-spacing:-0.015em;
 font-weight:400;
 margin:0;
 color:var(--fg);
}

.section-hdr .sub{
 font-size:var(--fs-small);
 color:var(--fg-muted);
}

.city-pills{
 display:flex;
 gap:6px;
 flex-wrap:wrap;
}

.city-pill{
 padding:7px 14px;
 background:var(--n-50);
 border:1px solid var(--border);
 color:var(--fg-muted);
 border-radius:var(--r-pill);
 font-size:var(--fs-small);
 font-weight:500;
 cursor:pointer;
 transition:all var(--dur-fast) var(--ease);
 white-space:nowrap;
 font-family:var(--font-sans);
 line-height:1;
}

.city-pill:hover{
 background:var(--n-100);
 color:var(--fg);
 border-color:var(--border-strong);
 transform:translateY(-1px);
 box-shadow:var(--shadow-xs);
}

.city-pill--active{
 background:var(--brand-ink);
 color:var(--fg-inverse);
 border-color:var(--brand-ink);
 font-weight:600;
}

.city-pill--active:hover{
 background:var(--brand-ink-2);
 border-color:var(--brand-ink-2);
 transform:translateY(-1px);
 color:var(--fg-inverse);
}

/* ============================================================
 PRICE CHANGE TABLE SECTION
 ============================================================ */

.price-change-table-section{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px 28px;
}

.price-change-table-section h2{
 font-family:var(--font-serif);
 font-size:28px;
 letter-spacing:-0.015em;
 font-weight:400;
 margin:0 0 18px;
 color:var(--fg);
}

.table-responsive{
 overflow-x:auto;
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 box-shadow:var(--shadow-sm);
}

.price-change-table{
 width:100%;
 border-collapse:collapse;
 background:var(--bg);
 font-size:var(--fs-small);
}

.price-change-table thead{
 background:var(--n-25);
}

.price-change-table th{
 padding:11px 16px;
 text-align:left;
 font-size:11px;
 font-weight:700;
 letter-spacing:.10em;
 text-transform:uppercase;
 color:var(--fg-muted);
 border-bottom:1px solid var(--border);
}

.price-change-table th:not(:first-child){
 text-align:right;
}

.price-change-table td{
 padding:13px 16px;
 border-bottom:1px solid var(--border-faint);
 color:var(--fg-muted);
 font-weight:500;
 transition:background var(--dur-fast);
}

.price-change-table td:first-child{
 color:var(--fg);
 font-weight:600;
}

.price-change-table td:not(:first-child){
 text-align:right;
 font-family:var(--font-mono);
 font-variant-numeric:tabular-nums;
}

.price-change-table tbody tr:hover td{
 background:var(--n-25);
}

.price-change-table tbody tr:last-child td{
 border-bottom:none;
}

.positive-change{color:var(--up) !important;font-weight:600;}
.negative-change{color:var(--down) !important;font-weight:600;}

/* ============================================================
 CHART SECTION
 ============================================================ */

.price-chart-section{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px 28px;
}

.chart-card{
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:20px;
 background:var(--bg);
 box-shadow:var(--shadow-sm);
 transition:box-shadow var(--dur-base) var(--ease);
}

.chart-card:hover{
 box-shadow:var(--shadow-md);
}

.chart-card-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 margin-bottom:16px;
 flex-wrap:wrap;
 gap:12px;
}

.chart-card-title{
 font-size:10px;
 letter-spacing:.12em;
 text-transform:uppercase;
 color:var(--fg-faint);
 font-family:var(--font-mono);
 margin-bottom:4px;
}

.chart-price-display{
 font-family:var(--font-serif);
 font-size:36px;
 line-height:1;
 letter-spacing:-0.02em;
 color:var(--fg);
}

.chart-range-pills{
 display:flex;
 gap:2px;
 background:var(--n-50);
 border:1px solid var(--border);
 border-radius:var(--r-pill);
 padding:3px;
}

.chart-pill{
 padding:5px 11px;
 border-radius:var(--r-pill);
 border:none;
 cursor:pointer;
 background:transparent;
 color:var(--fg-muted);
 font-size:12px;
 font-weight:600;
 font-family:var(--font-sans);
 transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}

.chart-pill:hover{
 color:var(--fg);
 background:var(--n-100);
}

.chart-pill[data-active="true"]{
 background:var(--brand-ink);
 color:var(--fg-inverse);
}

.chart-pill--disabled,
.chart-pill[disabled]{
 opacity:0.28;
 cursor:not-allowed;
 pointer-events:none;
}

.chart-stats{
 display:flex;
 align-items:center;
 gap:0;
 padding:10px 2px;
 border-top:1px solid var(--n-100);
 border-bottom:1px solid var(--n-100);
 margin-bottom:8px;
}
.cs-stat{
 display:flex;
 flex-direction:column;
 gap:3px;
 padding:0 16px;
 flex:1;
}
.cs-stat:first-child{padding-left:2px;}
.cs-divider{
 width:1px;
 height:28px;
 background:var(--n-100);
 flex-shrink:0;
}
.cs-label{
 font:600 10px/1 var(--font-sans);
 letter-spacing:.10em;
 text-transform:uppercase;
 color:var(--fg-muted);
}
.cs-value{
 font:500 13px/1 var(--font-mono);
 color:var(--fg);
 font-variant-numeric:tabular-nums;
}
.cs-high{color:#047A4A;}
.cs-low{color:#C1343B;}
.cs-up{color:#047A4A;}
.cs-down{color:#C1343B;}

.chart-container{
 position:relative;
 height:240px;
 margin-top:4px;
}


.chart-custom-range{
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:10px;
 flex-basis:100%;
 margin-top:14px;
}

.range-popover-anchor{position:relative;}

.range-group{
 display:inline-flex;
 align-items:stretch;
 background:#fff;
 border:1px solid var(--n-200);
 border-radius:10px;
 overflow:hidden;
 transition:border-color 120ms ease,box-shadow 120ms ease;
}
.range-group:hover{border-color:var(--n-300);}
.range-group:focus-within{border-color:#0E5FD9;box-shadow:0 0 0 3px rgba(14,95,217,0.20);}
.range-group.is-invalid{border-color:#C1343B;box-shadow:0 0 0 3px rgba(193,52,59,0.15);}

.range-date-input{
 appearance:none;
 border:0;
 background:transparent;
 cursor:pointer;
 display:inline-flex;
 align-items:center;
 gap:10px;
 padding:0 14px;
 height:38px;
 font:500 13px/1 var(--font-sans);
 color:var(--fg);
 font-variant-numeric:tabular-nums;
}
.range-date-input:hover{background:var(--n-25,#FBFBFD);}
.range-date-input.is-active{background:var(--n-50);}

.rdi-label{
 font:600 10px/1 var(--font-sans);
 letter-spacing:.10em;
 text-transform:uppercase;
 color:var(--fg-muted);
 display:block;
}
.rdi-value{
 font-family:var(--font-mono);
 font-weight:500;
 font-size:13px;
 display:block;
}
.rdi-icon{color:var(--fg-muted);display:inline-flex;align-items:center;}
.range-date-input.is-active .rdi-icon{color:#0E5FD9;}

.range-arrow{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:24px;
 color:var(--fg-muted);
 background:var(--n-50);
 border-left:1px solid var(--n-200);
 border-right:1px solid var(--n-200);
 font-size:13px;
}
.range-group.is-invalid .range-arrow{color:#C1343B;}

.range-apply-btn{
 appearance:none;
 border:0;
 cursor:pointer;
 height:40px;
 padding:0 18px;
 border-radius:10px;
 background:var(--brand-ink);
 color:#fff;
 font:600 13px/1 var(--font-sans);
 letter-spacing:.01em;
 display:inline-flex;
 align-items:center;
 gap:6px;
 transition:background 120ms ease,transform 60ms;
 white-space:nowrap;
}
.range-apply-btn:hover{background:#1A2236;}
.range-apply-btn:active{transform:translateY(1px);}
.range-apply-btn:disabled{background:var(--n-100);color:var(--fg-muted);cursor:not-allowed;}
.range-apply-btn .arrow{transition:transform 160ms ease;}
.range-apply-btn:hover .arrow{transform:translateX(2px);}

.range-hint{
 margin-left:auto;
 font:400 12px/1.4 var(--font-sans);
 color:var(--fg-muted);
 display:inline-flex;
 align-items:center;
 gap:6px;
}
.range-hint.is-error{color:#C1343B;}
.rh-dates{
 font-family:var(--font-mono);
 font-variant-numeric:tabular-nums;
 color:var(--fg-secondary,#4A515E);
 font-weight:500;
}


.range-popover{
 position:absolute;
 top:calc(100% + 8px);
 left:0;
 background:#fff;
 border:1px solid var(--n-200);
 border-radius:14px;
 box-shadow:0 12px 32px rgba(11,18,32,0.10),0 4px 10px rgba(11,18,32,0.05);
 padding:14px;
 z-index:200;
 display:flex;
 gap:14px;
 font:500 13px/1.4 var(--font-sans);
 animation:rp-in 160ms cubic-bezier(.2,.8,.2,1);
}
@keyframes rp-in{
 from{opacity:0;transform:translateY(-4px);}
 to{opacity:1;transform:translateY(0);}
}

.rp-presets{
 width:130px;
 display:flex;
 flex-direction:column;
 gap:2px;
 border-right:1px solid var(--n-100);
 padding-right:14px;
 flex-shrink:0;
}
.rpp-label{
 font:600 10px/1 var(--font-sans);
 letter-spacing:.12em;
 text-transform:uppercase;
 color:var(--fg-muted);
 padding:6px 10px 8px;
}
.rp-presets button{
 appearance:none;
 border:0;
 background:transparent;
 cursor:pointer;
 text-align:left;
 padding:8px 10px;
 border-radius:7px;
 font:500 13px/1 var(--font-sans);
 color:var(--fg-secondary,#4A515E);
 white-space:nowrap;
}
.rp-presets button:hover{background:var(--n-50);color:var(--fg);}
.rp-presets button.active{background:rgba(14,95,217,0.08);color:#0E5FD9;font-weight:600;}

.rp-cal{display:flex;flex-direction:column;gap:10px;width:280px;}
.rp-cal-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:2px 4px;
}
.rp-cal-head .month{font:600 14px/1 var(--font-sans);}

.rp-nav{
 appearance:none;
 border:0;
 background:transparent;
 cursor:pointer;
 width:28px;
 height:28px;
 border-radius:7px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 color:var(--fg-muted);
}
.rp-nav:hover{background:var(--n-50);color:var(--fg);}

.rp-grid{
 display:grid;
 grid-template-columns:repeat(7,1fr);
 gap:2px;
 font-variant-numeric:tabular-nums;
}
.rp-dow{
 font:600 10px/1 var(--font-sans);
 letter-spacing:.06em;
 color:var(--fg-muted);
 text-align:center;
 padding:6px 0;
 text-transform:uppercase;
}
.rp-day{
 appearance:none;
 border:0;
 background:transparent;
 cursor:pointer;
 height:34px;
 border-radius:7px;
 font:500 12px/1 var(--font-mono);
 color:var(--fg);
 display:flex;
 align-items:center;
 justify-content:center;
 position:relative;
 transition:background 80ms;
}
.rp-day:hover{background:var(--n-50);}
.rp-day.muted{color:var(--n-300);}
.rp-day.today{font-weight:700;}
.rp-day.today::after{
 content:'';
 position:absolute;
 bottom:4px;
 left:50%;
 transform:translateX(-50%);
 width:3px;
 height:3px;
 border-radius:50%;
 background:#0E5FD9;
}
.rp-day.in-range{background:rgba(14,95,217,0.08);border-radius:0;color:var(--fg);}
.rp-day.range-start{background:var(--brand-ink);color:#fff;border-radius:7px 0 0 7px;}
.rp-day.range-end{background:var(--brand-ink);color:#fff;border-radius:0 7px 7px 0;}
.rp-day.range-start.range-end{border-radius:7px;}
.rp-day.range-start::after,.rp-day.range-end::after{background:#fff;}
.rp-day:disabled{color:var(--n-300);cursor:not-allowed;}
.rp-day:disabled:hover{background:transparent;}

.rp-foot{
 border-top:1px solid var(--n-100);
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding-top:10px;
 gap:8px;
}
.rp-summary{font:500 12px/1.3 var(--font-sans);color:var(--fg-muted);}
.rp-summary b{font-family:var(--font-mono);color:var(--fg);font-weight:600;}
.rp-actions{display:flex;gap:6px;flex-shrink:0;}
.rp-cancel{
 appearance:none;
 border:0;
 background:transparent;
 cursor:pointer;
 height:32px;
 padding:0 12px;
 border-radius:7px;
 font:600 12px/1 var(--font-sans);
 color:var(--fg-secondary,#4A515E);
}
.rp-cancel:hover{background:var(--n-50);color:var(--fg);}
.rp-apply{
 appearance:none;
 border:0;
 cursor:pointer;
 height:32px;
 padding:0 14px;
 border-radius:7px;
 background:var(--brand-ink);
 color:#fff;
 font:600 12px/1 var(--font-sans);
}
.rp-apply:hover{background:#1A2236;}
.rp-apply:disabled{background:var(--n-100);color:var(--fg-muted);cursor:not-allowed;}

@media (max-width:680px){
 .chart-custom-range{align-items:stretch;}
 .range-apply-btn{width:100%;justify-content:center;}
 .range-hint{margin-left:0;margin-top:6px;width:100%;}

 
 .range-group{
 flex:1;
 flex-direction:column;
 border-radius:10px;
}
 .range-date-input{
 width:100%;
 height:44px;
 border-bottom:1px solid var(--n-200);
 flex:none;
}
 .range-date-input:last-of-type{border-bottom:none;}
 .range-arrow{display:none;}

 
 .range-popover{
 position:fixed;
 left:12px;
 right:12px;
 top:50%;
 transform:translateY(-50%);
 max-height:80vh;
 overflow-y:auto;
 flex-direction:column;
 width:auto;
}
 .rp-presets{width:auto;border-right:0;border-bottom:1px solid var(--n-100);padding:0 0 10px;flex-direction:row;flex-wrap:wrap;}
 .rp-cal{width:auto;}
}

/* ============================================================
 SKELETON LOADING
 ============================================================ */

.skeleton-loading{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px 28px;
}

.skel{
 background:linear-gradient(90deg,var(--n-100) 25%,var(--n-50) 50%,var(--n-100) 75%);
 background-size:200% 100%;
 border-radius:var(--r-sm);
 animation:skel-wave 1.5s ease-in-out infinite;
}

@keyframes skel-wave{
 0%{background-position:200% 0;}
 100%{background-position:-200% 0;}
}

.skel-label{height:12px;width:50%;margin-bottom:10px;}
.skel-price{height:48px;width:72%;margin:0 auto;}
.skel-row{height:14px;width:100%;margin-bottom:10px;}
.skel-row:last-child{width:70%;margin-bottom:0;}

.skeleton-hero-card{
 border:1px solid var(--border);
 border-radius:var(--r-xl);
 padding:22px 24px;
 background:var(--bg);
}

.skeleton-table{
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:20px;
 background:var(--bg);
}

/* ============================================================
 REVEAL ANIMATION
 ============================================================ */

.reveal-section{
 opacity:0;
 transform:translateY(14px);
 transition:opacity 0.38s ease,transform 0.38s ease;
}

.reveal-section.is-visible{
 opacity:1;
 transform:translateY(0);
}

/* ============================================================
 ERROR
 ============================================================ */

.error-message{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px 28px;
}

.error-inner{
 background:var(--down-bg);
 border:1px solid #FECACA;
 border-radius:var(--r-lg);
 padding:16px;
 text-align:center;
}

.error-inner p{
 color:var(--down);
 font-weight:600;
 margin:0;
 font-size:var(--fs-small);
}

/* ============================================================
 CITY INFO SECTIONS
 ============================================================ */

.city-info-wrapper{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px 28px;
}

.city-info-section{
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:22px;
 background:var(--bg);
 box-shadow:var(--shadow-xs);
 margin-bottom:14px;
 transition:box-shadow var(--dur-base) var(--ease);
}

.city-info-section:hover{
 box-shadow:var(--shadow-sm);
}

.city-info-section .section-title{
 font-family:var(--font-serif);
 font-size:22px;
 letter-spacing:-0.01em;
 font-weight:400;
 margin:0 0 14px;
 padding-bottom:12px;
 border-bottom:1px solid var(--border);
 color:var(--fg);
}

.info-content{
 font-size:var(--fs-body);
 line-height:1.7;
 color:var(--fg-muted);
}

.info-content p{margin-bottom:1rem;}
.info-content ul,.info-content ol{margin-left:1.25rem;margin-bottom:1rem;}
.info-content li{margin-bottom:6px;}

.city-links-footer{
 margin-top:1.25rem !important;
 padding-top:1rem;
 border-top:1px solid var(--border-faint);
 font-size:var(--fs-small);
 color:var(--fg-muted);
}

.city-links-footer a{
 color:var(--brand-accent);
 text-decoration:none;
 font-weight:500;
}

.city-links-footer a:hover{
 text-decoration:underline;
 text-underline-offset:3px;
}

/* ============================================================
 CTA / ALERT BANNER
 ============================================================ */

.cta-wrapper{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:0 24px 28px;
}

.cta-card{
 background:var(--n-25);
 border:1px solid var(--border);
 border-left:3px solid var(--brand-ink);
 border-radius:var(--r-lg);
 padding:18px 22px;
 transition:box-shadow var(--dur-base) var(--ease);
}

.cta-card:hover{
 box-shadow:var(--shadow-sm);
}

.cta-card h3{
 font-family:var(--font-sans);
 font-size:var(--fs-h4);
 font-weight:600;
 color:var(--fg);
 margin:0 0 6px;
}

.cta-card p{
 font-size:var(--fs-small);
 line-height:1.6;
 color:var(--fg-muted);
 margin:0 0 6px;
}

.cta-note{
 font-size:12px;
 color:var(--fg-faint);
 margin:0 !important;
}

/* ============================================================
 BUTTONS
 ============================================================ */

.btn{
 font:600 14px/1 var(--font-sans);
 padding:10px 16px;
 border-radius:var(--r-md);
 cursor:pointer;
 transition:all var(--dur-fast) var(--ease);
 border:0;
 display:inline-flex;
 align-items:center;
 gap:6px;
 text-decoration:none;
}

.btn-primary{
 background:var(--brand-ink);
 color:var(--fg-inverse);
}

.btn-primary:hover{
 background:var(--brand-ink-2);
 transform:translateY(-1px);
 box-shadow:var(--shadow-sm);
}

.btn-secondary{
 background:var(--n-50);
 color:var(--fg);
 border:1px solid var(--border);
}

.btn-secondary:hover{
 background:var(--n-100);
 transform:translateY(-1px);
 box-shadow:var(--shadow-xs);
}

/* ============================================================
 PRICE FLASH ANIMATIONS
 ============================================================ */

.price-flash-up{animation:flash-up 0.8s ease forwards;}
.price-flash-down{animation:flash-down 0.8s ease forwards;}

@keyframes flash-up{
 0%{color:var(--up);}
 100%{color:var(--fg);}
}

@keyframes flash-down{
 0%{color:var(--down);}
 100%{color:var(--fg);}
}

/* ============================================================
 FOOTER
 ============================================================ */

.site-footer{
 border-top:1px solid var(--border);
 margin-top:var(--s-8);
 background:var(--n-25);
}

.foot-inner{
 max-width:var(--w-wide);
 margin:0 auto;
 padding:40px 24px;
 display:grid;
 grid-template-columns:1.2fr 1fr 1fr 1fr;
 gap:40px;
}

.foot-brand-name{
 font-family:var(--font-serif);
 font-size:20px;
 color:var(--fg);
 letter-spacing:-0.02em;
 margin-bottom:12px;
 display:block;
}

.foot-brand-name span{color:var(--fg-subtle);}

.foot-desc{
 font-size:var(--fs-small);
 color:var(--fg-muted);
 max-width:280px;
 margin:0 0 14px;
 line-height:1.55;
}

.foot-badge{
 background:var(--n-50);
 color:var(--fg-muted);
 padding:4px 10px;
 border-radius:var(--r-sm);
 font-size:11px;
 border:1px solid var(--border);
 display:inline-block;
}

.foot h5{
 font-size:11px;
 font-weight:700;
 letter-spacing:.12em;
 text-transform:uppercase;
 color:var(--fg-muted);
 margin:0 0 14px;
}

.foot a{
 display:block;
 color:var(--fg-muted);
 font-size:var(--fs-small);
 padding:4px 0;
 text-decoration:none;
 transition:color var(--dur-fast) var(--ease);
}

.foot a:hover{color:var(--fg);text-decoration:none;}

.foot-bottom{
 border-top:1px solid var(--border);
 padding:16px 24px;
 max-width:var(--w-wide);
 margin:0 auto;
 font-size:12px;
 color:var(--fg-faint);
 display:flex;
 justify-content:space-between;
 flex-wrap:wrap;
 gap:8px;
}

.foot-bottom a{
 color:var(--fg-faint);
 text-decoration:none;
 font-size:12px;
 transition:color var(--dur-fast) var(--ease);
}

.foot-bottom a:hover{color:var(--fg-muted);}

/* ============================================================
 DISCLAIMER / ABOUT / STANDARD PAGE
 ============================================================ */

.disclaimer-page,
.about-us-page{
 max-width:860px;
 margin:0 auto;
 padding:40px 24px;
}

.disclaimer,
.about-content,
.entry-content{
 background:var(--bg);
 padding:40px;
 border-radius:var(--r-xl);
 border:1px solid var(--border);
 box-shadow:var(--shadow-md);
}

.disclaimer h1,
.about-content h1{
 font-family:var(--font-serif);
 font-size:var(--fs-h1);
 font-weight:400;
 letter-spacing:-0.025em;
 color:var(--fg);
 margin:0 0 24px;
 padding-bottom:20px;
 border-bottom:1px solid var(--border);
}

.disclaimer h2,
.about-content h2,
.entry-content h2{
 font-family:var(--font-serif);
 font-size:var(--fs-h2);
 font-weight:400;
 letter-spacing:-0.015em;
 color:var(--fg);
 margin:32px 0 16px;
}

.disclaimer h3,
.about-content h3,
.entry-content h3{
 font-size:var(--fs-h3);
 font-weight:600;
 color:var(--fg);
 margin:24px 0 12px;
}

.disclaimer p,
.about-content p,
.entry-content p,
.about-content li,
.entry-content li{
 font-size:var(--fs-body);
 line-height:1.75;
 color:var(--fg-muted);
 margin-bottom:1.1rem;
}

.disclaimer strong,
.about-content strong,
.entry-content strong{
 color:var(--fg);
 font-weight:600;
}

.about-content ul,
.entry-content ul,
.entry-content ol{
 margin-left:1.5rem;
 margin-bottom:1.25rem;
}

/* ============================================================
 RESPONSIVE
 ============================================================ */

@media (max-width:960px){
 .hero-grid{
 grid-template-columns:1fr;
 gap:28px;
}

 .hero-rate-card{order:-1;}

 .foot-inner{
 grid-template-columns:1fr 1fr;
}
}

@media (max-width:768px){
 .hero-section{padding:24px 16px 20px;}

 .hero-headline{font-size:34px;}

 
 .chart-stats{flex-wrap:wrap;gap:8px 0;padding:10px 0;}
 .cs-stat{min-width:calc(33.333% - 1px);padding:6px 12px;}
 .cs-divider{display:none;}
 .cs-stat:first-child{padding-left:2px;}

 .hr-price .big{font-size:52px;}

 .city-selector-section,
 .price-change-table-section,
 .price-chart-section,
 .skeleton-loading,
 .error-message,
 .city-info-wrapper,
 .cta-wrapper{padding-left:16px;padding-right:16px;}

 .city-pills{
 flex-wrap:nowrap;
 overflow-x:auto;
 -webkit-overflow-scrolling:touch;
 padding-bottom:4px;
 padding-right:24px;
 scrollbar-width:none;
 gap:6px;
 -webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%);
 mask-image:linear-gradient(to right,black 85%,transparent 100%);
}
 .city-pills::-webkit-scrollbar{display:none;}
 .city-pill{flex-shrink:0;}

 .chart-range-pills{
 overflow-x:auto;
 flex-wrap:nowrap;
 scrollbar-width:none;
 padding-right:12px;
}
 .chart-range-pills::-webkit-scrollbar{display:none;}
 .chart-pill{flex-shrink:0;}

 .chart-container{height:200px;}

 .hdr-nav{display:none;}
 .hdr-menu-btn{display:flex;}

 .foot-inner{
 grid-template-columns:1fr;
 gap:28px;
}

 .disclaimer,
 .about-content,
 .entry-content{padding:24px 20px;}

 .ticker-inner{
 gap:16px;
 overflow-x:auto;
 scrollbar-width:none;
}
 .ticker-inner::-webkit-scrollbar{display:none;}
}

/* ============================================================
 DISCLAIMER NOTES
 ============================================================ */

.hr-disclaimer{
 font-size:11px;
 color:var(--fg-faint);
 margin:8px 0 0;
 line-height:1.5;
}

.hr-disclaimer a{
 color:var(--fg-faint);
 text-decoration:underline;
}

.section-disclaimer{
 font-size:var(--fs-micro);
 color:var(--fg-faint);
 margin:10px 0 0;
 padding:0 2px;
 line-height:1.5;
}

.disclaimer-lead{
 background:var(--bg-muted);
 border-left:3px solid var(--border-strong);
 padding:14px 18px;
 border-radius:0 var(--r-sm) var(--r-sm) 0;
 font-size:var(--fs-body);
 color:var(--fg-muted);
 margin-bottom:28px;
 line-height:1.65;
}

/* ============================================================
 EXPLAINER SECTION
 ============================================================ */

.city-rates-grid-section{
 max-width:900px;
 margin:0 auto 48px;
 padding:0 24px;
}

.city-rate-cards{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:16px;
 margin-top:20px;
}

.city-rate-card{
 background:var(--bg-muted);
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:20px;
 cursor:pointer;
 text-align:left;
 display:flex;
 flex-direction:column;
 gap:6px;
 transition:border-color 0.2s,box-shadow 0.2s;
}

.city-rate-card:hover{
 border-color:var(--primary,#c0c0c0);
 box-shadow:0 0 0 1px var(--primary,#c0c0c0);
}

.crc-city{
 font-size:12px;
 font-weight:600;
 color:var(--fg-muted);
 text-transform:uppercase;
 letter-spacing:0.05em;
}

.crc-price{
 font-size:22px;
 font-weight:700;
 color:var(--fg);
}

.crc-delta{
 font-size:12px;
}

.chip-up{color:#22c55e;}
.chip-dn{color:#ef4444;}

.city-rate-card--skel .crc-price{
 background:var(--border);
 border-radius:4px;
 height:22px;
 width:120px;
}

.policy-alert{
 background:rgba(239,68,68,0.08);
 border:1px solid rgba(239,68,68,0.25);
 border-radius:var(--r-lg);
 padding:14px 18px;
 margin-bottom:24px;
 font-size:var(--fs-small);
 color:var(--fg-muted);
 line-height:1.5;
}

.policy-alert-tag{
 background:#ef4444;
 color:#fff;
 font-size:11px;
 font-weight:700;
 border-radius:4px;
 padding:2px 6px;
 margin-right:8px;
 text-transform:uppercase;
 letter-spacing:0.05em;
 display:inline-block;
}

.explainer-section{
 max-width:900px;
 margin:0 auto 48px;
 padding:0 24px;
}

.explainer-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:16px;
 margin-top:20px;
}

.explainer-card{
 background:var(--bg-muted);
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 padding:22px 24px;
}

.explainer-card h3{
 font-size:var(--fs-body);
 font-weight:600;
 color:var(--fg);
 margin:0 0 10px;
}

.explainer-card p{
 font-size:var(--fs-small);
 color:var(--fg-muted);
 line-height:1.65;
 margin:0;
}

/* ============================================================
 FAQ SECTION
 ============================================================ */

.faq-section{
 max-width:900px;
 margin:0 auto 64px;
 padding:0 24px;
}

.faq-list{
 margin-top:20px;
 border:1px solid var(--border);
 border-radius:var(--r-lg);
 overflow:hidden;
}

.faq-item{
 padding:20px 24px;
 border-bottom:1px solid var(--border-faint);
}

.faq-item:last-child{border-bottom:none;}

.faq-item h3{
 font-size:var(--fs-body);
 font-weight:600;
 color:var(--fg);
 margin:0 0 8px;
}

.faq-item p{
 font-size:var(--fs-small);
 color:var(--fg-muted);
 line-height:1.65;
 margin:0;
}

/* ============================================================
 CITY LINKS SECTION
 ============================================================ */

.city-links-section{
 max-width:900px;
 margin:0 auto 64px;
 padding:0 24px;
}

.city-links-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:12px;
 margin-top:20px;
}

.city-link{
 display:inline-block;
 padding:10px 16px;
 background:var(--bg-muted);
 border:1px solid var(--border);
 border-radius:var(--r-md);
 color:var(--fg);
 text-decoration:none;
 font-size:var(--fs-small);
 font-weight:500;
 text-align:center;
 transition:border-color 0.2s,background-color 0.2s;
}

.city-link:hover{
 border-color:var(--primary,#c0c0c0);
 background:var(--border);
}

@media (max-width:768px){
 .city-links-grid{grid-template-columns:repeat(3,1fr);}
 .city-rate-cards{grid-template-columns:repeat(2,1fr);}
 .explainer-grid{grid-template-columns:1fr;}
 .explainer-section,
 .city-rates-grid-section,
 .city-links-section,
 .faq-section{padding:0 16px;}
}

@media (max-width:480px){
 .city-links-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
 .city-link{padding:8px 12px;font-size:12px;}
 .city-rate-cards{grid-template-columns:repeat(2,1fr);gap:10px;}
 .crc-price{font-size:18px;}
}