/* Interior pages — the homepage's visual language, adapted for reading and discovery. */

.interior-page {
  --page-ink: #edf3ef;
  --page-muted: #9caaa4;
  --page-dim: #71817a;
  --page-line: rgba(224, 240, 231, .12);
  --page-line-strong: rgba(224, 240, 231, .2);
  --page-panel: rgba(13, 26, 28, .72);
  position: relative;
  min-height: 100vh;
  overflow: clip;
  color: var(--page-ink);
  background: #081214;
}

.page-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 16, 18, .18), #081214 76%),
    radial-gradient(circle at 82% 7%, rgba(70, 119, 96, .19), transparent 31%),
    radial-gradient(circle at 4% 45%, rgba(45, 83, 75, .12), transparent 30%);
}

.page-glow {
  position: absolute;
  width: 32rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
}
.page-glow-a { top: -18rem; right: -9rem; background: #77a98d; }
.page-glow-b { top: 42rem; left: -22rem; background: #426e63; opacity: .12; }
.page-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(204, 229, 215, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 229, 215, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.interior-page .topbar {
  position: relative;
  z-index: 20;
  width: min(1320px, calc(100% - 2rem));
  margin: 0 auto;
  padding: .9rem 0;
  color: #f4f8f5;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.interior-page .brand { color: #f3f7f4; }
.interior-page .nav a { color: #a5b2ac; }
.interior-page .nav a:hover { color: #f1f6f2; }
.interior-page .topbar .btn-ghost {
  border-color: rgba(231, 243, 235, .18);
  color: #eaf2ed;
  background: rgba(229, 242, 233, .055);
}
.interior-page .topbar .btn-ghost:hover { background: rgba(229, 242, 233, .11); }

.page-main {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.page-frame {
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(6rem, 12vw, 10rem);
}

.breadcrumbs {
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
  color: var(--page-dim);
  font-size: .69rem;
  letter-spacing: .04em;
}
.breadcrumbs a { color: #a8b8b0; text-decoration: none; }
.breadcrumbs a:hover { color: #edf3ef; }

.content-hero {
  position: relative;
  max-width: 900px;
  margin: 0 0 clamp(5rem, 10vw, 9rem);
  padding: 0;
  background: none;
  border: 0;
}
.content-hero::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 1px;
  margin-bottom: 1.4rem;
  background: #78998a;
}
.content-hero .kicker,
.content-hero .eyebrow {
  margin: 0 0 .8rem;
  color: #89a598;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.content-hero h1 {
  max-width: 13ch;
  margin: 0;
  color: #f2f6f3;
  font: 500 clamp(4rem, 8.5vw, 7.7rem)/.84 "Zain", sans-serif;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.content-hero > p:last-child,
.content-hero > p:not(.kicker):not(.eyebrow) {
  max-width: 660px;
  margin: 1.5rem 0 0;
  color: #aebbb5;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.78;
}
.content-hero .btn { margin-top: 1.8rem; }

.content-section {
  margin: 0;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  color: #aebbb5;
  background: none;
  border: 0;
  border-top: 1px solid var(--page-line);
}
.content-section + .content-section { margin-top: 0; }
.content-section h2,
.section-title {
  max-width: 18ch;
  margin: 0 0 1.25rem;
  color: #edf3ef;
  font: 500 clamp(2.35rem, 4vw, 3.8rem)/.96 "Zain", sans-serif;
}
.content-section h3 {
  margin: 2.25rem 0 .7rem;
  color: #dce6e0;
  font-size: 1.05rem;
  font-weight: 500;
}
.content-section p {
  max-width: 720px;
  color: #acb9b3;
  font-size: 1rem;
  line-height: 1.82;
}
.content-section p + p { margin-top: 1.2rem; }
.content-section a { color: #cae1d4; text-underline-offset: .2em; }
.content-section a:hover { color: #fff; }

.content-section.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 7vw, 7rem);
}
.content-section.split article + article { border: 0; }

.list {
  display: grid;
  gap: .85rem;
  max-width: 760px;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.list li {
  position: relative;
  padding: 0 0 .85rem 1.15rem;
  color: #aebbb5;
  line-height: 1.65;
  border-bottom: 1px solid rgba(224, 240, 231, .075);
}
.list li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8bb09d;
  box-shadow: 0 0 9px rgba(139, 176, 157, .48);
}

blockquote {
  max-width: 780px;
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: 1.5rem 1.6rem 1.35rem;
  color: #dce7e1;
  background: linear-gradient(110deg, rgba(118, 158, 138, .1), rgba(118, 158, 138, .025));
  border: 1px solid var(--page-line);
  border-left: 2px solid #83a693;
  border-radius: 5px;
}
blockquote p { margin: 0 !important; color: inherit !important; }

.link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--page-line);
}
.link-card {
  position: relative;
  min-height: 190px;
  padding: 1.65rem 3rem 1.65rem 0;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--page-line);
  transition: background .2s ease, padding .2s ease;
}
.link-card:nth-child(even) {
  padding-left: 1.65rem;
  border-left: 1px solid var(--page-line);
}
.link-card::after {
  content: "↗";
  position: absolute;
  top: 1.7rem;
  right: 1.2rem;
  color: #708078;
  transition: color .2s ease, transform .2s ease;
}
.link-card:hover {
  padding-right: 2.6rem;
  background: linear-gradient(90deg, rgba(213, 234, 221, .035), transparent);
}
.link-card:hover::after { color: #dce9e2; transform: translate(2px, -2px); }
.link-card h3 {
  max-width: 17ch;
  margin: 0 0 .65rem;
  color: #e5ede8;
  font: 500 clamp(1.65rem, 2.6vw, 2.25rem)/1 "Zain", sans-serif;
}
.link-card p { max-width: 46ch; margin: 0; color: #8f9e97; font-size: .86rem; line-height: 1.65; }

.feature-sections { border-top: 1px solid var(--page-line); }
.feature-detail {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: start;
  padding: clamp(3rem, 7vw, 6rem) 0;
}
.feature-detail > div { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; }
.feature-detail .feature-number {
  grid-row: 1 / 5;
  margin: .35rem 0 0;
  color: #60716a;
  font-size: .66rem;
  letter-spacing: .14em;
}
.feature-detail h2 { grid-column: 2; }
.feature-detail > div > p:not(.feature-number) { grid-column: 2; }
.feature-detail .pill-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--page-line);
}
.feature-detail .pill-list li {
  padding: .72rem 0;
  color: #9caaa4;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--page-line);
  border-radius: 0;
  font-size: .76rem;
}
.related-links { margin-top: 1.4rem; color: var(--page-dim) !important; font-size: .76rem !important; }

.final-cta.panel {
  margin-top: clamp(5rem, 10vw, 9rem);
  padding: clamp(4rem, 9vw, 7rem) 1rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 120%, rgba(93, 143, 116, .2), transparent 52%),
    rgba(15, 29, 31, .48);
  border: 1px solid var(--page-line);
  border-radius: 7px;
}
.final-cta.panel h2 { font-size: clamp(3.5rem, 7vw, 6rem); }
.final-cta.panel p { color: #96a59e; }
.final-cta.panel .btn { margin-top: 1rem; }

/* Long-form reading keeps the atmosphere but quietens the layout. */
.interior-page[data-page-kind="guide"] .page-frame { width: min(1060px, calc(100% - 2rem)); }
.interior-page[data-page-kind="guide"] .content-hero { max-width: 860px; }
.interior-page[data-page-kind="guide"] .content-hero h1 { max-width: 15ch; }
.interior-page[data-page-kind="guide"] .content-section {
  width: min(100%, 790px);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.interior-page[data-page-kind="guide"] .content-section h2 { margin-top: 3.8rem; }
.interior-page[data-page-kind="guide"] .content-section > h2:first-child { margin-top: 0; }

/* Feature and search pages feel more like rooms. */
.interior-page[data-page-kind="feature"] .content-hero::after,
.interior-page[data-page-kind="landing"] .content-hero::after {
  content: "";
  position: absolute;
  top: -2.5rem;
  right: -15rem;
  width: min(38vw, 430px);
  aspect-ratio: 1.12;
  border: 1px solid rgba(227, 241, 233, .12);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 37%),
    radial-gradient(circle at 68% 32%, rgba(115, 168, 140, .22), transparent 35%),
    rgba(13, 27, 29, .68);
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 0 70px rgba(0,0,0,.16);
  transform: rotate(1.2deg);
  z-index: -1;
}

/* Footer now closes every page as a final room, including the homepage. */
.footer {
  position: relative;
  z-index: 2;
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 0 2rem;
  color: #9aaaa2;
  background: transparent;
  border: 0;
}
.footer-room {
  display: grid;
  grid-template-columns: 1.2fr .8fr auto;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(224, 240, 231, .12);
  border-bottom: 1px solid rgba(224, 240, 231, .12);
}
.footer-signoff p { max-width: 34ch; margin: .65rem 0 0; font-size: .8rem; line-height: 1.65; }
.footer-brand { color: #eff5f1; font: 500 2rem/1 "Zain", sans-serif; text-decoration: none; }
.footer-links { display: grid; gap: .55rem; }
.footer-links a { color: #98a79f; font-size: .75rem; text-decoration: none; }
.footer-links a:hover { color: #eef4f0; }
.footer-open {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  padding: .8rem 0;
  color: #e6eee9;
  font-size: .77rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 240, 231, .25);
}
.footer-note { margin: 1rem 0 0; color: #65756e; font-size: .65rem; }

@media (max-width: 900px) {
  .page-frame { padding-top: 4.5rem; }
  .content-hero h1 { font-size: clamp(3.8rem, 10vw, 6rem); }
  .interior-page[data-page-kind="feature"] .content-hero::after,
  .interior-page[data-page-kind="landing"] .content-hero::after { right: -8rem; opacity: .55; }
  .feature-detail { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-room { grid-template-columns: 1fr 1fr; }
  .footer-open { grid-column: 1 / -1; max-width: 240px; }
}

@media (max-width: 640px) {
  .interior-page .topbar-inner { flex-wrap: wrap; }
  .interior-page .topbar .nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    font-size: .76rem;
  }
  .page-frame { width: min(100% - 2rem, 1160px); padding-top: 3.5rem; }
  .breadcrumbs { margin-bottom: 2.5rem; }
  .content-hero { margin-bottom: 5rem; }
  .content-hero h1 { max-width: 12ch; font-size: 3.7rem; }
  .content-hero > p:last-child,
  .content-hero > p:not(.kicker):not(.eyebrow) { font-size: 1rem; }
  .content-section.split,
  .link-grid { grid-template-columns: 1fr; }
  .link-card,
  .link-card:nth-child(even) { min-height: 0; padding: 1.4rem 2.6rem 1.4rem 0; border-left: 0; }
  .feature-detail > div { grid-template-columns: 2rem 1fr; }
  .feature-detail { padding: 3.5rem 0; }
  .interior-page[data-page-kind="feature"] .content-hero::after,
  .interior-page[data-page-kind="landing"] .content-hero::after { display: none; }
  .footer-room { grid-template-columns: 1fr; }
  .footer-open { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .link-card, .link-card::after { transition: none; }
}