/* ==========================================================================
   Finite — shared design system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cream: #F5F1E7;
  --cream-2: #FBF9F4;
  --navy: #1B2A41;
  --navy-2: #223250;
  --terracotta: #D9603E;
  --terracotta-dark: #C4502F;
  --peach-bg: #F6DED2;
  --mint-bg: #DCEAE1;
  --sand-bg: #F3E2BC;
  --text-muted: #7C8592;
  --line: #E4DECE;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}
a{ color: inherit; }

.shell{
  display: flex;
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  width: 260px;
  flex-shrink: 0;
  padding: 32px 22px;
  border-right: 1px solid var(--line);
}
.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.logo-mark{
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-text .wordmark{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
}
.logo-text .tagline{
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-top: 2px;
}

.nav-home{
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--navy);
  color: #fff;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 26px;
}
.nav-home svg{ flex-shrink: 0; }

.nav-section{ margin-bottom: 22px; }
.nav-label{
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 10px;
  padding-left: 4px;
}
.nav-list{ list-style: none; margin: 0; padding: 0; }
.nav-list li{ margin-bottom: 3px; }
.nav-list a{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border-radius: 6px;
  color: #3E4A5E;
  text-decoration: none;
  font-size: 14px;
}
.nav-list a:hover{ background: rgba(27,42,65,0.05); }
.nav-list a.current{ color: var(--terracotta); font-weight: 600; }
.nav-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #C7C1AF;
  flex-shrink: 0;
}
.nav-list a.current .nav-dot{ background: var(--terracotta); }

/* ---------------- Main ---------------- */
.main{
  flex: 1;
  padding: 32px 40px 80px;
  min-width: 0;
}

.eyebrow{
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--terracotta);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Hero card */
.hero-card{
  position: relative;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 48px 44px;
  overflow: hidden;
  margin-bottom: 24px;
}
.hero-card::before{
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,96,62,0.14), transparent 70%);
}
.hero-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(27,42,65,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,42,65,0.03) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 20%, black 30%, transparent 85%);
  pointer-events: none;
}
.hero-card h1{
  position: relative;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.12;
  margin: 0 0 20px;
  max-width: 620px;
}
.hero-card h1 em{
  color: var(--terracotta);
  font-style: italic;
}
.hero-card p{
  position: relative;
  color: var(--text-muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 0 26px;
  line-height: 1.6;
}
.hero-actions{ position: relative; display: flex; gap: 12px; flex-wrap: wrap; }

.btn-dark{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  padding: 13px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-dark:hover{ background: var(--navy-2); }

.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--navy);
  padding: 13px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* Most explored card */
.explore-card{
  position: relative;
  background: var(--navy);
  color: #fff;
  border-radius: 22px;
  padding: 40px 44px;
  overflow: hidden;
  margin-bottom: 24px;
}
.explore-card::after{
  content: "";
  position: absolute;
  top: -60px; right: -10px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 40px solid rgba(217,96,62,0.35);
}
.explore-badge{
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
  position: relative;
}
.explore-card h2{
  position: relative;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  margin: 0 0 10px;
}
.explore-card p{
  position: relative;
  color: #B9C2D0;
  font-size: 15px;
  max-width: 420px;
  margin: 0 0 18px;
  line-height: 1.55;
}
.explore-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--terracotta);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}
.explore-icon{
  position: absolute;
  top: 36px; right: 44px;
  color: var(--terracotta);
}

/* Find a calculator */
.find-card{
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px 44px;
}
.find-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 16px;
}
.find-header h2{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  margin: 0;
}
.search-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 18px;
  margin-bottom: 26px;
}
.search-bar input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14.5px;
  font-family: var(--sans);
  color: var(--navy);
}
.search-bar input::placeholder{ color: #A9A296; }

.calc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 28px;
}
.calc-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 6px;
  text-decoration: none;
  color: var(--navy);
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
}
.calc-item:hover{ background: rgba(27,42,65,0.04); }
.icon-circle{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-circle.peach{ background: var(--peach-bg); color: var(--terracotta-dark); }
.icon-circle.mint{ background: var(--mint-bg); color: #2F6B4F; }
.icon-circle.sand{ background: var(--sand-bg); color: #A5730F; }
.icon-circle.featured{ background: var(--terracotta); color: #fff; }
.calc-item .featured-tag{
  font-size: 10.5px;
  color: var(--terracotta);
  font-weight: 700;
  margin-left: 6px;
}

/* Stats row */
.stats-row{
  display: flex;
  gap: 60px;
  margin: 30px 6px 0;
  flex-wrap: wrap;
}
.stat .num{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
}
.stat .num.accent{ color: var(--terracotta); }
.stat .label{ color: var(--text-muted); font-size: 13.5px; margin-top: 2px; }

/* Footer note */
.footer-note{
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 36px;
}
.footer-note h3{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  margin: 8px 0 0;
  line-height: 1.25;
}
.footer-note .body p{
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 14px;
}

@media (max-width: 900px){
  .shell{ flex-direction: column; }
  .sidebar{ width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .calc-grid{ grid-template-columns: 1fr; }
  .footer-note{ grid-template-columns: 1fr; }
  .hero-card h1{ font-size: 34px; }
}