/* ridgeseek.com page layout. Tokens, buttons and marks come from ridgeseek.css.
   The hero rules are the approved mock's, unchanged. */

html { scroll-padding-block-start: 88px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.page { --gutter: 20px; }

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  border-block-end: 1px solid var(--rule);
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; }
.brand__name { font-size: 19px; letter-spacing: -0.01em; }
.nav__links { display: none; }
.nav__links { gap: 28px; }
.nav__links a { text-decoration: none; }
.nav .btn { min-block-size: 40px; font-size: 14px; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav .chip { min-block-size: 32px; padding-inline: 12px; font: 400 12px/1 var(--font-mono); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--fg-muted); text-decoration: underline; }
}

.hero { padding: 40px var(--gutter) 28px; display: grid; gap: 24px; }
.hero h1 { font-size: 52px; line-height: 0.92; letter-spacing: -0.045em; max-inline-size: 11ch; text-wrap: balance; }
.hero__eyebrow { margin-block-end: 20px; }
.hero__lede { font-size: 17px; line-height: 1.4; max-inline-size: 34em; text-wrap: pretty; }
.hero__side { display: grid; gap: 24px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }

.survey { position: relative; margin: 0; overflow: clip; border-block: 1px solid var(--rule-strong); }
.survey canvas { margin-inline: auto; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.summit {
  position: absolute;
  translate: -50% -100%;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: var(--bg);
  font: 400 11px/1.1 var(--font-mono);
  letter-spacing: 0.06em;
}
.summit b { color: var(--fg); }
.summit span { color: var(--fg-muted); }
.summit--in b, .summit--in span { color: var(--accent); }
.tick {
  position: absolute;
  inset-inline-end: var(--gutter);
  translate: 0 -50%;
  padding: 1px 4px;
  background: var(--bg);
  font: 400 10px/1 var(--font-mono);
  color: var(--fg-muted);
}
.tick--top3 { color: var(--accent); }
.tick:not(.tick--top3) { display: none; }
.sweep {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  background: linear-gradient(var(--accent) 50%, transparent 0) 0 0 / 1px 4px;
}
.readout {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 8px;
  padding: 4px 6px;
  border: 1px solid var(--accent);
  background: var(--bg);
  font: 400 11px/1.3 var(--font-mono);
  white-space: nowrap;
}
.readout span { color: var(--fg-muted); }
.query {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: var(--gutter);
  padding: 3px 6px;
  background: var(--bg);
}
.query b { margin-inline-start: 6px; color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 12px; }
.sweep--flip .readout { inset-inline-start: auto; inset-inline-end: 8px; }
.caption { padding: 10px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }

.facts { display: grid; border-block-end: 1px solid var(--rule-strong); }
.facts li { padding: 18px var(--gutter); border-block-start: 1px solid var(--rule); display: grid; gap: 6px; }
.facts li:first-child { border-block-start: 0; }
.facts b { font-size: 22px; letter-spacing: -0.02em; }
.facts p { color: var(--fg-muted); font-size: 14px; }

.section {
  display: grid;
  gap: 28px;
  padding: 56px var(--gutter);
  border-block-end: 1px solid var(--rule-strong);
}
.section__head { display: grid; gap: 16px; align-content: start; }
.section h2 { font-size: 40px; line-height: 0.95; letter-spacing: -0.03em; max-inline-size: 16ch; text-wrap: balance; }
.section__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-inline-size: 0; }
.prose { font-size: 17px; line-height: 1.4; max-inline-size: 36em; text-wrap: pretty; }
.prose + .prose { margin-block-start: -12px; }
.note { color: var(--fg-muted); font-size: 14px; max-inline-size: 40em; }

.rows > li { display: grid; gap: 8px; padding-block: 18px; border-block-start: 1px solid var(--rule); }
.rows > li:last-child { border-block-end: 1px solid var(--rule); }
.rows h3 { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.rows p { max-inline-size: 38em; text-wrap: pretty; }
.rows .muted { font-size: 14px; }

.reports > li { grid-template-columns: minmax(0, 1fr); }
.reports .report { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.reports a { color: var(--fg-muted); font: 400 12px/1.3 var(--font-mono); }
@media (hover: hover) and (pointer: fine) {
  .reports a:hover { color: var(--accent); }
}

.steps > li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; }
.steps .mark { margin-block-start: 6px; }
.steps > li > :not(.mark) { grid-column: 2; }
.log__label { margin-block-end: 10px; }
.log {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-inset);
  font: 400 12px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.log li { display: grid; grid-template-columns: 5ch minmax(0, 1fr); column-gap: 2ch; }
.log time { color: var(--fg-muted); }
.log b { white-space: nowrap; }
.log i { font-style: normal; }
.log span { grid-column: 2; color: var(--fg-muted); }
.log .is-proposed b { color: var(--accent); }
.log .is-shipped b { color: var(--status-good); }
@media (width > 520px) {
  .log li { grid-template-columns: 5ch 13ch minmax(0, 1fr); }
  .log span { grid-column: auto; color: var(--fg); }
}

.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); border-block-start: 1px solid var(--rule); }
.areas > li { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 10px; padding: 20px 0; border-block-end: 1px solid var(--rule); }
.areas h3 { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.areas p { text-wrap: pretty; }
.areas .owner { align-self: end; color: var(--fg-muted); font: 400 12px/1.4 var(--font-mono); }
.areas .owner b { color: var(--fg); }

.timeline > li { grid-template-columns: minmax(0, 1fr); }
.timeline .day { color: var(--accent); font: 400 12px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.prices { display: grid; gap: 0; margin: 4px 0 0; border-block-start: 1px solid var(--rule); }
.prices div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 12px; border-block-end: 1px solid var(--rule); }
.prices dt { color: var(--fg-muted); }
.prices dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.needs { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--rule-strong); background: var(--bg-inset); }
.needs ul { display: grid; gap: 6px; }
.needs li { padding-inline-start: 16px; position: relative; }
.needs li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.45em; inline-size: 7px; block-size: 7px; background: var(--fg-muted); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cta { display: grid; gap: 14px; justify-items: start; padding-block-start: 8px; }
.cta .btn { min-block-size: 52px; padding-inline: 24px; font-size: 17px; }
.cta .address { font: 400 15px/1.3 var(--font-mono); }

.fit { display: grid; gap: 28px; }
.fit h3 { display: flex; align-items: center; gap: 10px; margin-block-end: 4px; }
.fit ul { display: grid; }
.fit li { padding-block: 12px; border-block-start: 1px solid var(--rule); text-wrap: pretty; }
.fit li:last-child { border-block-end: 1px solid var(--rule); }
.fit .is-out li:first-child { color: var(--fg); }

.faq { border-block-start: 1px solid var(--rule); }
.faq details { border-block-end: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 18px;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--fg-muted); font: 400 17px/1 var(--font-mono); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:active { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--fg-muted); }
}
.faq .answer { padding-block-end: 20px; max-inline-size: 38em; text-wrap: pretty; }
.faq .answer p + p { margin-block-start: 10px; }

:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; }
.faq details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { transition: block-size 0.3s ease-out, content-visibility 0.3s allow-discrete; }
}

.foot { display: grid; gap: 24px; padding: 40px var(--gutter) 56px; }
.foot__brand { display: grid; gap: 8px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.foot__links a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .foot__links a:not(.btn):hover { text-decoration: underline; }
}

@media (width > 760px) {
  .page { --gutter: 40px; }
  .nav__links { display: flex; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 26em); align-items: end; column-gap: 64px; padding-block: 72px 48px; }
  .hero h1 { font-size: 112px; line-height: 0.9; letter-spacing: -0.05em; max-inline-size: 9.5ch; }
  .hero__side { display: grid; gap: 28px; }
  .tick:not(.tick--top3) { display: block; }
  .summit { font-size: 12px; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts li { border-block-start: 0; border-inline-start: 1px solid var(--rule); padding-block: 28px; }
  .facts li:first-child { border-inline-start: 0; }

  .section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; padding-block: 96px; }
  .section h2 { font-size: 56px; line-height: 0.9; }
  .section__head { position: sticky; inset-block-start: 96px; }
  .areas { column-gap: 32px; }
  .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

@media (width > 1100px) {
  .section--wide { grid-template-columns: minmax(0, 1fr); }
  .section--wide .section__head { position: static; }
  .section--wide .section__head h2 { max-inline-size: 20ch; }
}

.symptoms { display: grid; gap: 10px; }
.symptoms li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.symptoms .mark { --s: 10px; color: var(--status-critical); }

.serp { display: grid; gap: 10px; margin: 0; }
.serp__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 12px; }
.serp__card { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--rule-strong); background: var(--bg-inset); }
.serp__state { display: flex; align-items: center; gap: 8px; }
.serp__card--before .mark { color: var(--status-critical); }
.serp__where { font: 400 12px/1.3 var(--font-mono); color: var(--fg-muted); }
.serp__result { display: grid; gap: 2px; padding: 12px; background: var(--bg); border: 1px solid var(--rule); }
.serp__site { font-size: 14px; }
.serp__url { font: 400 12px/1.3 var(--font-mono); color: var(--fg-muted); overflow-wrap: anywhere; }
.serp__title { color: var(--accent); font-size: 18px; line-height: 1.25; }
.serp__meta { font-size: 14px; color: var(--fg-muted); }
.serp__meta b { color: var(--fg); font-family: var(--font-mono); }
.serp__card--before .serp__meta b { color: var(--status-critical); }
.serp__card--after .serp__meta b { color: var(--status-good); }
.serp__note { font-size: 14px; }

.term { color: var(--fg-muted); font: 400 12px/1.4 var(--font-mono); }
.fixes h3 { font-size: 20px; line-height: 1.15; text-wrap: balance; }

.samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0 32px; border-block-start: 1px solid var(--rule); }
.samples > li { display: grid; gap: 8px; align-content: start; padding-block: 20px; border-block-end: 1px solid var(--rule); }
.samples h3 { font-size: 22px; letter-spacing: -0.02em; }
.samples ol { display: grid; gap: 10px; padding-inline-start: 1.4em; list-style: decimal; }
.samples ol li { text-wrap: pretty; }
.samples ol li::marker { color: var(--fg-muted); font-family: var(--font-mono); font-size: 12px; }

.founder { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 20px; border: 1px solid var(--rule-strong); }
.founder__photo { --dot: 2px; display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--rule-strong); text-align: center; }
.founder__photo .label { padding: 2px 4px; background: var(--bg); font-size: 10px; }
.founder__text { display: grid; gap: 6px; }
.founder h3 { font-size: 22px; letter-spacing: -0.02em; }
.placeholder { color: var(--fg-muted); font-style: italic; }

.reporting { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 16px; align-items: start; }
.report-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--rule-strong); background: var(--bg-inset); min-inline-size: 0; }
.report-card .log { padding: 0; border: 0; background: none; }
.report-card h3 { font-size: 19px; }
.example { color: var(--accent); }
.report-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--rule); border: 1px solid var(--rule); }
.report-stats div { display: grid; gap: 4px; padding: 10px 12px; background: var(--bg-inset); }
.report-stats dt { color: var(--fg-muted); font-size: 13px; }
.report-stats dd { margin: 0; font: 400 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }
.changelog { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
.changelog th { text-align: start; font: 400 11px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); padding: 0 8px 8px 0; border-block-end: 1px solid var(--rule-strong); }
.changelog td { padding: 8px 8px 8px 0; border-block-end: 1px solid var(--rule); vertical-align: top; }
.changelog td:first-child, .changelog td:nth-child(2) { font-family: var(--font-mono); white-space: nowrap; }
.changelog .mark { --s: 8px; margin-inline-end: 4px; }
.fixes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }