.inflation-page{background:#f5f8f5}
.inflation-page [hidden]{display:none!important}
.inflation-main{padding:30px 0 72px}
.inflation-heading{margin:0 0 24px}
.inflation-heading .eyebrow{margin-bottom:9px}
.inflation-heading h1{max-width:900px;margin:0 0 10px;font-size:clamp(2.15rem,5vw,4.2rem);line-height:1.27;letter-spacing:-.045em}
.inflation-heading h1 span{color:#23825d}
.inflation-heading>p:last-child{max-width:830px;margin:0;color:#60717a;font-size:.9rem;line-height:1.85}
.inflation-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:stretch}
.inflation-controls,.inflation-results,.inflation-chart-card{min-width:0;border-radius:25px}
.inflation-controls{padding:27px;background:#fff;border:1px solid #dce7df;box-shadow:0 15px 35px rgba(7,17,31,.04)}
.section-kicker{display:flex;align-items:center;gap:9px;color:#25805b;font-size:.73rem;font-weight:700}
.section-index{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:#e7f6ec;direction:ltr;font-size:.68rem}
.inflation-controls h2,.inflation-results h2{margin:12px 0 25px;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.4}
.inflation-field{margin-bottom:20px}
.inflation-field label,.years-top label{display:block;margin:0 0 8px;color:#253742;font-size:.81rem;font-weight:700}
.inflation-input-wrap{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #b9cec4;border-radius:15px;background:#fafffb;padding:0 16px;transition:border-color .2s,box-shadow .2s}
.inflation-input-wrap:focus-within{background:#fff;border-color:#23885f;box-shadow:0 0 0 4px rgba(35,136,95,.11)}
.inflation-input-wrap input{width:100%;min-width:0;background:transparent;border:0;outline:0;text-align:right;direction:ltr;color:#07111f;font:700 1.5rem Alexandria,system-ui,sans-serif}
.inflation-input-wrap input::placeholder{font-weight:400;color:#a1aca7}
.inflation-input-wrap .riyal-symbol{flex:none;display:block;width:1.25rem;height:1.5rem;background:#27815d;-webkit-mask:url('./saudi-riyal-symbol.svg') center/contain no-repeat;mask:url('./saudi-riyal-symbol.svg') center/contain no-repeat}
.input-suffix{flex:none;color:#27815d;font-size:1.3rem;font-weight:800}
.field-help,.field-error{margin:8px 0 0;font-size:.69rem;line-height:1.7;color:#718078}
.field-error{color:#b63b35}
.rate-reference{margin:-3px 0 24px;border:1px solid #d7e7dc;background:#f2faf4;border-radius:15px;padding:12px 14px;color:#4b665a}
.rate-reference summary{cursor:pointer;color:#267d57;font-size:.75rem;font-weight:700;list-style:none}
.rate-reference summary::-webkit-details-marker{display:none}
.rate-reference summary::before{content:'+';display:inline-grid;place-items:center;width:18px;height:18px;margin-left:7px;border-radius:50%;background:#dcefe3;color:#197650;font-size:.85rem}
.rate-reference[open] summary::before{content:'−'}
.rate-reference p{margin:10px 0;font-size:.71rem;line-height:1.9}
.reference-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.reference-actions button{border:0;border-radius:9px;background:#1d7652;color:#fff;font:700 .68rem Alexandria,system-ui,sans-serif;cursor:pointer;padding:9px 11px}
.reference-actions button:hover,.reference-actions button:focus-visible{background:#115b3e}
.reference-actions a{color:#276d55;font-size:.67rem;text-underline-offset:3px}
.years-control{border-top:1px solid #edf1ec;padding-top:20px}
.years-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.years-top output{padding:7px 11px;border-radius:11px;background:#e0f4e8;color:#206b4d;font-size:.73rem;font-weight:800;white-space:nowrap}
.years-control input[type=range]{width:100%;accent-color:#278a60;cursor:pointer;margin:12px 0 2px}
.range-ends{display:flex;justify-content:space-between;color:#7e8d85;font-size:.62rem}
.inflation-results{padding:27px;background:#0b192b;color:#f8fbf8;display:flex;flex-direction:column}
.inflation-results .section-kicker{color:#9becc4}
.inflation-results .section-index{background:rgba(119,231,180,.14);color:#abf0cd}
.inflation-results h2{margin-bottom:23px}
.results-empty,.chart-empty{display:grid;place-items:center;min-height:185px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;color:#a9bab8;text-align:center;padding:24px;font-size:.79rem;line-height:1.9}
.future-hero{padding:23px 21px;background:linear-gradient(135deg,rgba(119,231,180,.14),rgba(119,231,180,.04));border:1px solid rgba(119,231,180,.19);border-radius:19px}
.future-hero>span,.future-hero>small{display:block;color:#bdcec9;font-size:.75rem;line-height:1.6}
.future-hero strong{display:block;margin:7px 0;color:#91edba;font-size:clamp(1.7rem,3.5vw,3.05rem);line-height:1.35;text-align:right;overflow-wrap:anywhere}
.future-hero b{font-weight:700;color:#fff}
.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.result-grid article{min-width:0;padding:17px 15px;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:rgba(255,255,255,.05)}
.result-grid span{display:block;color:#a8bbc2;font-size:.69rem;line-height:1.6}
.result-grid strong{display:block;margin-top:9px;color:#fff;font-size:clamp(.95rem,1.8vw,1.3rem);line-height:1.5;text-align:right;overflow-wrap:anywhere}
.result-grid article:last-child strong{color:#f3d48d}
.result-explanation{margin:16px 0 0;color:#a9bac0;font-size:.67rem;line-height:1.85}
.inflation-chart-card{margin-top:17px;padding:26px;background:#fff;border:1px solid #dce7df;box-shadow:0 15px 35px rgba(7,17,31,.035)}
.chart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px}
.chart-head .eyebrow{margin:0 0 5px}
.chart-head h2{font-size:clamp(1.25rem,2.5vw,1.85rem);margin:0}
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;color:#65747b;font-size:.67rem}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:18px;height:0;border-top:3px solid #2eab73;border-radius:4px}
.chart-legend .legend-base{border-color:#9aaab2;border-top-style:dashed}
.inflation-chart-card .chart-empty{min-height:215px;margin-top:21px;color:#6e7c7e;border-color:#d4e2db;background:#fafcf9}
.chart-surface{height:255px;margin-top:21px;direction:ltr}
.chart-surface svg{display:block;width:100%;height:100%;overflow:visible}
.chart-area{fill:rgba(83,199,139,.14)}
.chart-baseline{fill:none;stroke:#a6b7b6;stroke-width:2;stroke-dasharray:6 7}
.chart-curve{fill:none;stroke:#299c68;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chart-endpoint{fill:#299c68;stroke:#fff;stroke-width:3}
.chart-startpoint{fill:#a6b7b6;stroke:#fff;stroke-width:2}
.chart-point-label{font-family:Alexandria,system-ui,sans-serif;font-size:13px;font-weight:700;direction:ltr;unicode-bidi:plaintext;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.chart-point-label--start{fill:#647b78;text-anchor:start}
.chart-point-label--end{fill:#1b845a;text-anchor:end}
#chart-grid line{stroke:#e6eee9;stroke-width:1}
.milestone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:23px}
.milestone{min-width:0;border:1px solid #e1ebe4;border-radius:13px;padding:12px 10px;background:#f8fbf8}
.milestone--future{border-color:#92d4af;background:#edfaf1}
.milestone--difference{border-color:#ead9a9;background:#fffbef}
.milestone span{display:block;color:#70837a;font-size:.62rem}
.milestone strong{display:block;margin-top:5px;color:#10283a;font-size:.76rem;line-height:1.6;overflow-wrap:anywhere}
.inflation-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;color:#667775}
.inflation-note span{color:#27815d;font-size:1.1rem}
.inflation-note p{margin:0;font-size:.69rem;line-height:1.9}
@media(max-width:950px){.inflation-workspace{grid-template-columns:1fr}.inflation-results{min-height:0}}
@media(max-width:760px){
  .inflation-main{padding:20px 0 53px}
  .inflation-heading{margin-bottom:18px}
  .inflation-heading h1{font-size:clamp(1.85rem,7vw,2.6rem);line-height:1.3}
  .inflation-heading>p:last-child{font-size:.76rem;line-height:1.8}
  .inflation-workspace{gap:12px}
  .inflation-controls,.inflation-results,.inflation-chart-card{border-radius:20px}
  .inflation-controls,.inflation-results{padding:19px}
  .inflation-controls h2,.inflation-results h2{font-size:1.14rem;margin:10px 0 17px}
  .inflation-field{margin-bottom:16px}
  .inflation-input-wrap{min-height:54px}
  .inflation-input-wrap input{font-size:1.2rem}
  .rate-reference{margin-bottom:18px}
  .years-control{padding-top:15px}
  .future-hero{padding:17px}
  .future-hero strong{font-size:clamp(1.55rem,6vw,2.2rem)}
  .result-grid{gap:7px}
  .result-grid article{padding:12px 10px}
  .result-grid strong{font-size:.9rem}
  .inflation-chart-card{padding:18px;margin-top:12px}
  .chart-head{display:block}
  .chart-legend{margin-top:10px}
  .chart-surface{height:190px;margin-top:16px}
  .chart-point-label{font-size:23px}
  .milestone-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:17px}
  .milestone{padding:8px 6px}
  .milestone span{font-size:.57rem;line-height:1.5}
  .milestone strong{font-size:.65rem;line-height:1.5}
}