/* Rise&Go website. Builds on tokens.css (colours from the app). */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --rg-maxw: 70rem;               /* ~1120 px */
  --rg-gutter: clamp(1rem, 4vw, 2rem);
  --rg-section: clamp(5rem, 11vw, 10rem);
  --rg-hairline: rgba(60, 60, 67, 0.18);
  --rg-text-tertiary: rgba(60, 60, 67, 0.45);
  --rg-link: var(--rg-accent-strong);
  --rg-chip-bg: rgba(88, 86, 214, 0.1);
  --rg-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rg-hairline: rgba(84, 84, 88, 0.6);
    --rg-text-tertiary: rgba(235, 235, 245, 0.35);
    --rg-link: var(--rg-accent);
    --rg-chip-bg: rgba(125, 122, 255, 0.16);
    --rg-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  }
}

/* Night sections: always dark, whatever the system setting (before sunrise). */
.night {
  --rg-accent: #7D7AFF;
  --rg-accent-strong: #A5A3FF;
  --rg-travel: #0A84FF;
  --rg-breakfast: #C4A684;
  --rg-buffer: #48484A;
  --rg-card: #1C1C1E;
  --rg-bg: #000000;
  --rg-text: #FFFFFF;
  --rg-text-secondary: rgba(235, 235, 245, 0.6);
  --rg-text-tertiary: rgba(235, 235, 245, 0.35);
  --rg-hairline: rgba(84, 84, 88, 0.6);
  --rg-link: #A5A3FF;
  --rg-chip-bg: rgba(125, 122, 255, 0.16);
  color: var(--rg-text);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--rg-bg);
  color: var(--rg-text);
  font-family: var(--rg-font);
  font-size: 1.0625rem;           /* 17 px */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (min-width: 48rem) { body { font-size: 1.125rem; } }

img, picture, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--rg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rg-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.02em; line-height: 1.08; font-weight: 700; }
p { margin: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--rg-accent); color: #fff; padding: 0.5rem 1rem; border-radius: 999px;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap { width: 100%; max-width: calc(var(--rg-maxw) + 2 * var(--rg-gutter)); margin: 0 auto; padding: 0 var(--rg-gutter); }

.secondary { color: var(--rg-text-secondary); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(84, 84, 88, 0.45);
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; height: 3.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 1.75rem; height: 1.75rem; border-radius: 22.37%; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.9rem, 2.5vw, 1.75rem); }
.site-nav a:not(.badge-link) { color: rgba(235, 235, 245, 0.75); font-size: 0.875rem; }
.site-nav a:not(.badge-link):hover { color: #fff; text-decoration: none; }
.site-nav .badge-link img { height: 2rem; width: auto; }
@media (max-width: 40rem) {
  .site-nav .nav-text { display: none; }
}

/* ---------- App Store badge ---------- */
.badge-link { display: inline-block; line-height: 0; border-radius: 0.6rem; }
.badge-link img { height: 3rem; width: auto; }
.badge-note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--rg-text-secondary); }

/* ---------- Morning bar ---------- */
.morning-bar { display: flex; gap: var(--rg-bar-gap); height: var(--rg-bar-height); width: 100%; }
.morning-bar > span { display: block; min-width: 0; }
.morning-bar > span:first-child { border-radius: 999px 0 0 999px; }
.morning-bar > span:last-child { border-radius: 0 999px 999px 0; }
.morning-bar .seg-ready { background: var(--rg-accent); }
.morning-bar .seg-breakfast { background: var(--rg-breakfast); }
.morning-bar .seg-travel { background: var(--rg-travel); }
.morning-bar .seg-buffer { background: var(--rg-buffer); }
.morning-bar.is-small { --rg-bar-height: 6px; max-width: 7.5rem; }
.morning-bar.is-large { --rg-bar-height: 1.25rem; }

.bar-legend {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem;
  margin-top: 0.9rem; font-size: 0.8125rem; color: var(--rg-text-secondary);
}
.bar-legend b { display: block; color: var(--rg-text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.bar-legend > div:last-child { text-align: right; }

.bar-keys { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1rem; font-size: 0.875rem; color: var(--rg-text-secondary); list-style: none; padding: 0; }
.bar-keys li { display: inline-flex; align-items: center; gap: 0.45rem; }
.bar-keys i { width: 0.625rem; height: 0.625rem; border-radius: 50%; display: inline-block; }

.divider { display: flex; justify-content: center; padding: 0 0 var(--rg-section); }
.divider .morning-bar { width: 7.5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #000000 0%, #0B0B1F 45%, #1B1A4A 100%);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 0;
  overflow: hidden;
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
}
.hero h1 { font-size: clamp(2.5rem, 7vw, 5.25rem); text-wrap: balance; }
.hero .lede { margin-top: 1.5rem; font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--rg-text-secondary); max-width: 34rem; }
.hero .cta { margin-top: 2.25rem; }

.hero-time {
  margin-top: 3rem; max-width: 30rem;
}
.big-time {
  font-weight: var(--rg-time-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.hero-time .big-time { font-size: clamp(4.5rem, 12vw, 7.5rem); font-weight: 200; }
.hero-time .because { margin: 0.25rem 0 1.25rem; color: var(--rg-text-secondary); font-size: 1rem; }

.hero-phone { justify-self: center; width: min(22rem, 78vw); position: relative; padding-bottom: 2rem; }
.hero-phone picture { position: relative; z-index: 1; }
.horizon {
  height: 7rem; margin-top: -3.5rem;
  background: radial-gradient(60% 100% at 50% 100%, rgba(196, 166, 132, 0.15) 0%, rgba(196, 166, 132, 0) 70%);
}

/* hero animation: bar fills left to right, time fades in. 1.5 s, once. */
@keyframes rg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rg-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-time .morning-bar > span { transform-origin: left center; animation: rg-fill 0.375s var(--rg-spring) backwards; }
.hero-time .morning-bar > span:nth-child(1) { animation-delay: 0.2s; }
.hero-time .morning-bar > span:nth-child(2) { animation-delay: 0.575s; }
.hero-time .morning-bar > span:nth-child(3) { animation-delay: 0.95s; }
.hero-time .morning-bar > span:nth-child(4) { animation-delay: 1.325s; }
.hero-time .big-time, .hero-time .because { animation: rg-fade 1.1s var(--rg-spring) 0.2s backwards; }

/* ---------- Problem band ---------- */
.problem { background: #1B1A4A; padding: var(--rg-section) 0; text-align: center; }
.problem h2 { font-size: clamp(2.25rem, 6vw, 4rem); }
.problem p { margin: 1.5rem auto 0; max-width: 38rem; font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--rg-text-secondary); }
.problem .sum {
  margin: 3rem auto 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.4rem 0.9rem;
  font-variant-numeric: tabular-nums; color: var(--rg-text-secondary); font-size: 1rem;
}
.problem .sum b { color: var(--rg-text); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); }
.problem .sum .eq b { color: var(--rg-accent); font-weight: 400; }

/* Dawn: the page lightens as you scroll. */
.dawn {
  height: clamp(8rem, 18vw, 14rem);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(196, 166, 132, 0.18) 0%, rgba(196, 166, 132, 0) 70%),
    linear-gradient(180deg, #1B1A4A 0%, var(--rg-bg) 100%);
}

/* ---------- Generic section ---------- */
.section { padding: var(--rg-section) 0; }
.section-head { text-align: center; max-width: 42rem; margin: 0 auto 3.5rem; }
.eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--rg-link); margin-bottom: 0.75rem; }
.section-head h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.section-head p { margin-top: 1rem; color: var(--rg-text-secondary); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }

/* How it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.card { background: var(--rg-card); border-radius: var(--rg-radius-card); padding: 2rem; }
.steps .card { position: relative; }
.steps h3 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; }
.steps p { color: var(--rg-text-secondary); }
.steps .num { position: absolute; top: 1.75rem; right: 2rem; font-weight: 200; font-size: 2.5rem; line-height: 1; color: var(--rg-text-tertiary); font-variant-numeric: tabular-nums; }

.icon {
  width: 3rem; height: 3rem; border-radius: 0.875rem; display: grid; place-items: center;
  background: var(--rg-chip-bg); color: var(--rg-accent);
}
.icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Feature rows */
.features { display: grid; gap: var(--rg-section); }
.feature { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .feature.flip .feature-media { order: -1; }
}
.feature h3 { font-size: clamp(1.875rem, 4vw, 3rem); }
.feature > div:not(.feature-media) > p { margin-top: 1.25rem; color: var(--rg-text-secondary); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 30rem; }
.feature .morning-bar.is-small { margin-bottom: 1.5rem; }
.feature-media { display: flex; justify-content: center; align-items: center; position: relative; }
.phone { width: min(20rem, 76vw); }
.phone img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18)); }
.phone-pair { position: relative; display: flex; justify-content: center; }
.phone-pair .phone { width: min(17rem, 62vw); }
.phone-pair .phone + .phone { margin-left: -5rem; margin-top: 4rem; }

.bar-panel { width: 100%; max-width: 30rem; }
.bar-panel .card { padding: 1.75rem; }
.bar-panel .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; font-weight: 600; }
.bar-panel .head span { font-weight: 400; color: var(--rg-text-secondary); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.feature-media .stack { display: grid; gap: 1.5rem; justify-items: center; width: 100%; }

/* Alarm close-up (feature d) */
.alarm-alert {
  width: 100%; max-width: 24rem; border-radius: 2rem; padding: 2rem 1.75rem 1.75rem; text-align: center;
  background: linear-gradient(180deg, #0B0B1F 0%, #1B1A4A 100%); color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.alarm-alert .label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; color: rgba(235, 235, 245, 0.6); }
.alarm-alert .label svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.alarm-alert .big-time { font-size: clamp(4.5rem, 14vw, 6.5rem); font-weight: 200; margin: 0.5rem 0 0.25rem; }
.alarm-alert .sub { color: rgba(235, 235, 245, 0.6); font-size: 0.9375rem; }
.alarm-alert .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.75rem; }
.alarm-alert .actions span { border-radius: 999px; padding: 0.8rem 0; font-weight: 600; font-size: 1rem; }
.alarm-alert .snooze { background: rgba(125, 122, 255, 0.22); color: #A5A3FF; }
.alarm-alert .stop { background: rgba(118, 118, 128, 0.28); color: #fff; }

/* Privacy (feature f) */
.privacy-card { width: 100%; max-width: 24rem; text-align: center; padding: 2.75rem 2rem; }
.privacy-card .icon { width: 5rem; height: 5rem; border-radius: 1.4rem; margin: 0 auto 1.5rem; }
.privacy-card .icon svg { width: 2.5rem; height: 2.5rem; }
.privacy-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; text-align: left; }
.privacy-card li { display: flex; gap: 0.75rem; align-items: center; }
.privacy-card li svg { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: var(--rg-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Premium ---------- */
.premium-badge {
  display: inline-block; background: var(--rg-accent); color: #fff; font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; vertical-align: middle;
}
.premium-intro { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .premium-intro { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.tiles { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .tiles { grid-template-columns: 1fr 1fr; } .tiles .tile:last-child { grid-column: 1 / -1; } }
.tile { padding: 1.5rem; }
.tile h3 { font-size: 1.125rem; margin: 1rem 0 0.4rem; letter-spacing: -0.01em; }
.tile p { color: var(--rg-text-secondary); font-size: 1rem; }
.tile .icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
.tile .icon svg { width: 1.35rem; height: 1.35rem; }

.widget-wall {
  margin-top: var(--rg-section);
  border-radius: calc(var(--rg-radius-card) * 1.5);
  padding: clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(125, 122, 255, 0.45) 0%, rgba(125, 122, 255, 0) 70%),
    radial-gradient(50% 50% at 90% 90%, rgba(196, 166, 132, 0.28) 0%, rgba(196, 166, 132, 0) 70%),
    linear-gradient(160deg, #0B0B1F 0%, #1B1A4A 60%, #2A2870 100%);
  color: #fff;
  overflow: hidden;
}
.widget-wall .lock-time { text-align: center; }
.widget-wall .lock-time .date { font-size: 1.0625rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.widget-wall .lock-time .big-time { font-size: clamp(4.5rem, 14vw, 8rem); font-weight: 600; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.92); }
.widget-grid { display: grid; gap: clamp(1rem, 3vw, 1.75rem); margin-top: 2.5rem; align-items: start; }
@media (min-width: 52rem) {
  .widget-grid { grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.widget-grid .col { display: grid; gap: clamp(1rem, 3vw, 1.5rem); justify-items: center; }
.widget-grid img { border-radius: 1.4rem; }
.widget-grid .w-medium { width: min(100%, 26rem); }
.widget-grid .w-small { width: min(46%, 12rem); }
.widget-grid .w-live { width: min(100%, 26rem); }
.widget-grid .w-island { width: min(100%, 22rem); }
.widget-grid .w-rect { width: min(55%, 13rem); }
.widget-grid .row { display: flex; gap: clamp(1rem, 3vw, 1.5rem); justify-content: center; align-items: center; width: 100%; }
.widget-wall figcaption { text-align: center; margin-top: 2rem; color: rgba(235, 235, 245, 0.6); font-size: 0.9375rem; }

/* Pricing */
.pricing { margin-top: var(--rg-section); }
.plans { display: grid; gap: 1rem; max-width: 46rem; margin: 0 auto; }
@media (min-width: 40rem) { .plans { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.plan { position: relative; padding: 2rem; display: flex; flex-direction: column; gap: 0.25rem; border: 2px solid transparent; }
.plan.featured { border-color: var(--rg-accent); box-shadow: var(--rg-shadow); }
.plan .name { font-weight: 600; font-size: 1.125rem; }
.plan .price { font-size: clamp(2.5rem, 6vw, 3.25rem); font-weight: 300; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 0.5rem; line-height: 1.1; }
.plan .price small { font-size: 1rem; font-weight: 400; color: var(--rg-text-secondary); letter-spacing: 0; }
.plan .note { color: var(--rg-text-secondary); font-size: 0.9375rem; }
.plan .trial { position: absolute; top: -0.85rem; left: 2rem; }
.plan .morning-bar { margin-top: 1.5rem; }
.fineprint { max-width: 46rem; margin: 2rem auto 0; font-size: 0.8125rem; color: var(--rg-text-secondary); text-align: center; line-height: 1.55; }

/* Compare table */
.compare-wrap { max-width: 52rem; margin: 0 auto; overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; background: var(--rg-card); border-radius: var(--rg-radius-card); overflow: hidden; font-size: 0.9375rem; }
.compare th, .compare td { padding: 0.95rem 1.25rem; text-align: left; vertical-align: top; }
.compare thead th { font-size: 0.8125rem; font-weight: 600; color: var(--rg-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.compare thead th:last-child { color: var(--rg-link); }
.compare tbody th { font-weight: 500; }
.compare tbody tr { border-top: 1px solid var(--rg-hairline); }
.compare td { color: var(--rg-text-secondary); width: 30%; }
.compare .yes { color: var(--rg-accent); font-weight: 700; }
.compare .no { color: var(--rg-text-tertiary); }
@media (max-width: 34rem) { .compare th, .compare td { padding: 0.8rem 0.75rem; } }

/* FAQ */
.faq { max-width: 46rem; margin: 0 auto; }
.faq details { background: var(--rg-card); border-radius: var(--rg-radius-card); margin-bottom: 0.75rem; }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 3.25rem 1.25rem 1.5rem; font-weight: 600; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.5rem; top: 50%; width: 0.6rem; height: 0.6rem; margin-top: -0.4rem;
  border-right: 2px solid var(--rg-text-tertiary); border-bottom: 2px solid var(--rg-text-tertiary); transform: rotate(45deg);
  transition: transform var(--rg-duration) var(--rg-spring);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -0.1rem; }
.faq details > div { padding: 0 1.5rem 1.4rem; color: var(--rg-text-secondary); }
.faq .more { text-align: center; margin-top: 2rem; font-weight: 600; }

/* Final CTA */
.final { text-align: center; }
.final img.logo { width: 6rem; height: 6rem; margin: 0 auto 2rem; border-radius: 22.37%; }
.final h2 { font-size: clamp(2.25rem, 6vw, 4rem); }
.final .cta { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; }
.final .morning-bar { max-width: 22rem; margin: 3rem auto 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rg-hairline); padding: 3rem 0 3.5rem; font-size: 0.875rem; color: var(--rg-text-secondary); }
.site-footer .top { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer nav a { color: var(--rg-text-secondary); }
.site-footer nav a:hover { color: var(--rg-text); }
.site-footer .legal { margin-top: 1.5rem; font-size: 0.75rem; color: var(--rg-text-tertiary); line-height: 1.6; }
.site-footer .legal p + p { margin-top: 0.5rem; }

/* ---------- Scroll reveal (fade and rise 16 px). Only when JS and motion are allowed. ---------- */
.js-motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--rg-spring), transform 0.8s var(--rg-spring); }
.js-motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Long text pages (privacy, terms, support) ---------- */
.doc-hero { background: linear-gradient(180deg, #000000 0%, #0B0B1F 55%, #1B1A4A 100%); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.doc-hero h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.doc-hero p { margin-top: 1rem; color: var(--rg-text-secondary); max-width: 38rem; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }
.doc-hero .morning-bar { margin-top: 2rem; }
.doc-layout { display: grid; gap: 2.5rem; padding: clamp(2.5rem, 6vw, 4.5rem) 0 var(--rg-section); }
@media (min-width: 60rem) { .doc-layout { grid-template-columns: 15rem 1fr; gap: 4rem; align-items: start; } }
.toc { font-size: 0.9375rem; }
@media (min-width: 60rem) { .toc { position: sticky; top: 5rem; } }
.toc .card { padding: 1.25rem 1.5rem; }
.toc h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rg-text-secondary); margin-bottom: 0.75rem; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.toc a { color: var(--rg-text); }
.toc a:hover { color: var(--rg-link); }
.prose { max-width: 44rem; min-width: 0; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-top: 3rem; scroll-margin-top: 5rem; }
.prose h3 { font-size: 1.1875rem; margin-top: 2rem; letter-spacing: -0.01em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.4rem; }
.prose a { overflow-wrap: anywhere; }
.prose hr { border: 0; border-top: 1px solid var(--rg-hairline); margin: 2.5rem 0; }
.prose .meta { color: var(--rg-text-secondary); font-size: 0.9375rem; }
.prose .table-wrap { overflow-x: auto; background: var(--rg-card); border-radius: var(--rg-radius-card); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 36rem; }
.prose th, .prose td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; }
.prose thead th { font-size: 0.8125rem; color: var(--rg-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.prose tbody tr { border-top: 1px solid var(--rg-hairline); }
.prose .qa { background: var(--rg-card); border-radius: var(--rg-radius-card); padding: 1.5rem; }
.prose .qa h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.prose .qa p, .prose .qa li { color: var(--rg-text-secondary); }
.prose .qa ol { margin: 0; }
.prose .contact { padding: 1.75rem; }
.prose .contact p + p { margin-top: 0.75rem; }
.prose .contact .email { font-size: 1.25rem; font-weight: 600; }
mark.placeholder { background: rgba(172, 142, 104, 0.25); color: inherit; padding: 0 0.2em; border-radius: 4px; }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 4rem 0; background: linear-gradient(180deg, #000000 0%, #0B0B1F 50%, #1B1A4A 100%); }
.notfound .big-time { font-size: clamp(5rem, 18vw, 10rem); font-weight: 200; }
.notfound p { color: var(--rg-text-secondary); margin: 1rem 0 2rem; }

/* Grid children must be allowed to shrink below their content width. */
.hero-grid > *, .feature > *, .premium-intro > *, .widget-grid > * { min-width: 0; }
@media (max-width: 40rem) {
  .phone-pair .phone { width: 52vw; }
  .phone-pair .phone + .phone { margin-left: -14vw; margin-top: 3rem; }
}