.site-shell{direction:rtl;min-height:100vh}
.site-header{position:sticky;top:0;z-index:10;background:#0b192b;color:#f5f7f3;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 24px rgba(7,17,31,.08)}
.site-header-inner{width:min(1240px,calc(100% - 48px));min-height:84px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-identity{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;white-space:nowrap}
.site-identity strong,.site-identity small{display:block}.site-identity strong{font-size:1rem;line-height:1.4}.site-identity small{color:#9eafbc;font-size:.75rem;margin-top:2px}
.site-monogram{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#77e7b4;color:#07111f;font-size:1.25rem;font-weight:800}
.site-nav{display:flex;align-items:center;gap:5px}.site-nav-link{display:flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;color:#bac8d1;border-radius:11px;padding:10px 15px;font-size:.875rem;font-weight:600;white-space:nowrap;transition:background .18s,color .18s}
.site-nav-link:hover,.site-nav-link:focus-visible{color:#fff;background:rgba(255,255,255,.1)}.site-nav-link.active{background:rgba(119,231,180,.14);color:#a4f3cb}.site-nav-link:focus-visible,.site-identity:focus-visible{outline:2px solid #77e7b4;outline-offset:3px}
.site-content{min-width:0}.site-content .topbar,.site-content main,.site-content footer{width:min(1240px,calc(100% - 48px))}
.site-content .topbar .brand strong{font-size:1rem}.site-content .topbar .brand small{font-size:.69rem}
.home-main{min-height:calc(100vh - 170px);display:flex;align-items:center}.home-main h1{font-size:clamp(2.5rem,6vw,5.5rem);line-height:1.2;letter-spacing:-.055em;margin:0;max-width:800px}.home-main h1 span{color:#27835e}
.empty-main{min-height:calc(100vh - 170px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:70px 0}.empty-main h1{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.2;letter-spacing:-.045em;margin:0 0 16px}.empty-main>p:last-child{font-size:1rem;color:#6b7683;margin:0}
.directory-main{padding:70px 0 90px;min-height:calc(100vh - 170px)}.directory-main h1{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.2;letter-spacing:-.045em;margin:0}.directory-intro{margin:12px 0 34px;color:#6b7683;font-size:.91rem}
.calculator-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.calculator-card{min-height:242px;display:flex;flex-direction:column;text-decoration:none;color:#07111f;background:#fff;border:1px solid #dce2df;border-radius:20px;padding:27px;box-shadow:0 15px 30px rgba(7,17,31,.04);transition:transform .2s,border-color .2s,box-shadow .2s}.calculator-card:hover{transform:translateY(-3px);border-color:#80d7ae;box-shadow:0 22px 42px rgba(7,17,31,.1)}.calculator-card .card-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#e7f8ef;color:#247e57;font-size:1.15rem;font-weight:700}.calculator-card h2{font-size:1.22rem;margin:25px 0 7px}.calculator-card p{color:#6b7683;font-size:.78rem;line-height:1.9;margin:0 0 20px}.calculator-card .card-arrow{margin-top:auto;color:#27835e;font-weight:700;font-size:.75rem}
.value-page .workspace{min-height:680px}.value-page .results{min-height:670px}.value-page .result-note{color:#9fabb7;font-size:.7rem;margin:8px 0 0}.value-page .chart-card{margin-top:34px}.value-page .value-summary{margin-top:30px;border-top:1px solid rgba(255,255,255,.1);padding-top:23px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.value-page .value-summary article{min-width:0}.value-page .value-summary span{display:block;color:#8897a6;font-size:.68rem}.value-page .value-summary strong{display:block;color:#fff;font-size:1.03rem;white-space:nowrap}.value-page .value-summary .accent strong{color:#f3c96b}.value-page .value-summary small{display:block;color:#8897a6;font-size:.64rem;margin-top:3px}.value-page .hero-number{margin-top:50px}.value-page .chart-wrap{height:266px}.value-page .formula-note{margin:26px 0 0;padding:13px 16px;border-radius:13px;background:rgba(119,231,180,.08);color:#c7d5cf;font-size:.73rem;line-height:1.9}.value-page .table-wrap{margin:22px 0 0}.value-page .breakdown{padding-top:70px}.value-page .breakdown-head{align-items:center}.value-page .breakdown-head p{color:#6b7683;font-size:.83rem;margin:8px 0 0}.value-page .riyal-symbol,.value-page .value-summary .riyal-symbol{display:inline-block;width:.75em;height:1em;vertical-align:-.12em;background:currentColor;-webkit-mask:url('./saudi-riyal-symbol.svg') center/contain no-repeat;mask:url('./saudi-riyal-symbol.svg') center/contain no-repeat}.value-page .money-input .riyal-symbol{font-size:1.1rem;vertical-align:middle}.value-page .hero-amount{display:flex;direction:ltr;justify-content:flex-end;align-items:baseline;gap:.18em;color:#77e7b4}.value-page .hero-amount .riyal-symbol{font-size:clamp(1.8rem,4vw,3rem)}.value-page td{white-space:nowrap}
@media(max-width:1100px){.site-content .workspace{grid-template-columns:1fr}.site-content .controls{border-left:0;border-bottom:1px solid #dce2df}.site-content .results{min-height:620px}.calculator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.site-header{position:relative}.site-header-inner{width:min(100% - 16px,1240px);display:block;min-height:0;padding:7px 0}.site-identity{display:none}.site-nav{display:flex;align-items:center;justify-content:space-between;gap:2px}.site-nav-link{flex:1;min-height:40px;padding:8px 2px;white-space:nowrap;text-align:center;font-size:clamp(.65rem,2.8vw,.78rem)}.site-content .topbar,.site-content main,.site-content footer{width:min(100% - 24px,1240px)}.home-main{min-height:calc(100vh - 170px);padding:60px 6px;align-items:flex-start}.empty-main{min-height:calc(100vh - 170px);padding:60px 0;justify-content:flex-start}.directory-main{padding:45px 0 70px}.calculator-grid{grid-template-columns:1fr}.calculator-card{min-height:190px}.value-page .value-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}.value-page .hero-number{margin-top:32px}.value-page .hero-amount .riyal-symbol{font-size:1.8rem}.value-page .breakdown-head{align-items:flex-start}.value-page .results{min-height:620px}}
footer .site-copyright{display:flex;direction:rtl;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:0 .35em;text-align:right}
footer .site-copyright bdi{direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* Square tool tiles leave room for more calculators as the directory grows. */
.calculator-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.calculator-card{position:relative;aspect-ratio:1;min-height:0;overflow:hidden;padding:24px;border-radius:24px;background:linear-gradient(155deg,#fff 35%,#f1f8f4 100%)}
.calculator-card::before{content:"";position:absolute;left:-58px;bottom:-64px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(119,231,180,.18),transparent 68%);pointer-events:none}
.calculator-card>*{position:relative;z-index:1}
.calculator-card:focus-visible{outline:3px solid #27835e;outline-offset:3px}
.calculator-card .card-icon{width:56px;height:56px;border-radius:17px;background:#e0f5e9;color:#187650}
.calculator-card .card-icon svg{display:block;width:34px;height:34px}
.calculator-card--future .card-icon{background:#e6f0f8;color:#2b698d}
.calculator-card--present .card-icon{background:#f7eedc;color:#9a7229}
.calculator-card h2{margin:22px 0 7px;font-size:clamp(1rem,1.5vw,1.25rem)}
.calculator-card p{line-height:1.75}
.calculator-card .card-arrow{display:inline-flex;align-items:center;min-height:28px}
@media(max-width:1100px){.calculator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .directory-main{padding-top:34px}
  .directory-intro{margin-bottom:24px}
  .calculator-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .calculator-card{aspect-ratio:auto;min-width:0;min-height:198px;padding:13px;border-radius:18px}
  .calculator-card .card-icon{width:40px;height:40px;border-radius:12px}
  .calculator-card .card-icon svg{width:26px;height:26px}
  .calculator-card h2{font-size:clamp(.88rem,3.7vw,1.05rem);line-height:1.4;margin:8px 0 0}
  .calculator-card p{display:block;color:#52636a;font-size:.69rem;line-height:1.55;margin:5px 0 8px}
  .calculator-card .card-arrow{font-size:.66rem;margin-top:auto;min-height:20px}
}