/*
  Oppward marketing site layout. Composes tokens.css + components.css primitives
  into the landing page / niche page sections. Section class prefixes match the
  component filenames (hero, problem, hiw, proof, niches, pricing, faq,
  site-footer) plus shared bits (nav, opp-card, ticker, signup, skel).
*/

/* ============================= nav ============================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-block: var(--space-4);
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--border-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav__brand {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 560;
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  color: var(--text);
}

.nav__brand-dot {
  color: var(--accent);
}

.nav__links {
  display: none;
  gap: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.nav__links a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__links a:hover {
  color: var(--text);
}

@media (min-width: 860px) {
  .nav__links {
    display: flex;
  }
}

.nav__cta {
  padding: 0.6em 1.2em;
  font-size: var(--fs-xs);
}

/* ============================= hero ============================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-11);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, color-mix(in srgb, var(--green-500) 30%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -10%;
  width: 40vw;
  height: 40vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rust-500) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-9);
  align-items: start;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
  }
}

.hero__copy,
.hero__feed {
  /* Grid items default to min-width:auto, so an intrinsically wide descendant
     (the ticker's width:max-content marquee track) can force this track --
     and the whole page -- wider than the viewport. min-width:0 lets it shrink
     to the grid track and rely on internal overflow:hidden/wrapping instead. */
  min-width: 0;
}

.hero__copy {
  animation: rise var(--dur-slow) var(--ease-out) both;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__eyebrow-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.hero__eyebrow-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.hero__headline {
  margin-top: var(--space-4);
  max-width: 16ch;
}

.hero__subhead {
  margin-top: var(--space-5);
  max-width: 42ch;
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.hero__copy .signup {
  margin-top: var(--space-7);
}

.hero__feed {
  animation: rise var(--dur-slow) var(--ease-out) 120ms both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- opportunity card ---- */
.opp-card {
  /* No explicit color: inherits (a{color:inherit} in base.css), so it picks
     up --ink-on-paper correctly when nested in a .band--alt .card context. */
  display: block;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

a.opp-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.band--alt .opp-card {
  background: #fff;
  border-color: var(--paper-300);
  color: var(--ink-on-paper);
}

.band--alt .opp-card .text-muted,
.band--alt .opp-card__meta,
.band--alt .opp-card__deadline {
  color: var(--ink-on-paper-muted);
}

/* --accent-strong is deliberately pale in dark theme (for contrast against a
   dark surface), but this card's background is hardcoded white regardless of
   theme -- so on dark theme the pale accent reads as low-contrast mint-on-white.
   Force the dark-green value here, since the surface never actually goes dark. */
.band--alt .opp-card__amount {
  color: var(--green-700);
}

.opp-card__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.opp-card__amount {
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--accent-strong);
}

.opp-card--feed .opp-card__amount {
  font-size: var(--fs-lg);
}

.opp-card__amount--unlisted {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 500;
  /* .opp-card__amount--unlisted nests inside .opp-card__amount.dollar, whose
     letter-spacing: var(--ls-tight) (-0.03em) is declared at THAT element's own
     font-size (--fs-2xl, up to ~64px for the hero card). letter-spacing inherits
     as the resolved absolute length, not the em value, so a child at a much
     smaller font-size (--fs-sm, 15px) inherited roughly -1.9px per character --
     about -0.13em relative to its own 15px text, applied between every
     character including the spaces. That is enough compounding negative
     spacing to visually erase every gap in "Amount not listed", rendering it
     as "Amountnotlisted" even though the DOM text node has the spaces (verified
     via computed-style inspection: this span's letter-spacing showed -1.9104px
     before this fix, identical to .dollar's computed value at hero size, not
     this span's own -0.03em-of-15px). This text is a muted fallback label, not
     part of the tabular dollar-figure treatment .dollar exists for, so it
     should never have inherited that spacing in the first place. */
  letter-spacing: normal;
}

.opp-card__title {
  margin-top: var(--space-3);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.opp-card--feed .opp-card__title {
  font-size: var(--fs-base);
}

.opp-card__meta {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.opp-card__deadline {
  margin-top: var(--space-2);
  font-size: var(--fs-2xs);
}

.opp-card--hero {
  padding: var(--space-7);
}

.opp-card--empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: dashed;
}

.hero-feed__empty-title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
}

.hero-feed__empty-body {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  max-width: 34ch;
}

/* ---- skeleton loading state ---- */
.opp-card--skeleton {
  overflow: hidden;
}

.skel {
  background: linear-gradient(
    90deg,
    var(--border) 0%,
    color-mix(in srgb, var(--border) 40%, var(--surface)) 50%,
    var(--border) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skel--badge {
  width: 90px;
  height: 22px;
  margin-bottom: var(--space-5);
}

.skel--amount {
  width: 55%;
  height: 40px;
  margin-bottom: var(--space-4);
}

.skel--title {
  width: 85%;
  height: 20px;
  margin-bottom: var(--space-3);
}

.skel--meta {
  width: 50%;
  height: 14px;
}

/* ---- ticker ---- */
.ticker {
  width: 100%;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.band--alt .ticker {
  background: #fff;
  border-color: var(--paper-300);
  color: var(--ink-on-paper);
}

.band--alt .ticker .text-muted {
  color: var(--ink-on-paper-muted);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 32s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
  .ticker {
    overflow-x: auto;
  }
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ticker__item {
  /* No explicit color: inherits, same reasoning as .opp-card above. */
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-right: var(--border-w) solid var(--border-soft);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--fs-xs);
}

.ticker__amount {
  font-size: var(--fs-sm);
  color: var(--accent-strong);
}

.ticker__title {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================= signup form ============================= */
.signup__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .signup__row {
    flex-direction: row;
  }
}

.signup__email-input {
  flex: 1;
}

.signup__submit {
  flex-shrink: 0;
}

.signup__fineprint {
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  max-width: 46ch;
}

.signup--profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.band--alt .signup--profile {
  background: #fff;
  border-color: var(--paper-300);
  color: var(--ink-on-paper);
}

.band--alt .signup--profile .text-muted,
.band--alt .signup--profile .field__label,
.band--alt .signup--profile .field__hint {
  color: var(--ink-on-paper-muted);
}

.signup__profile-lede {
  font-size: var(--fs-sm);
}

.signup__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .signup__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.signup__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.signup--done {
  background: var(--accent-tint);
  border: var(--border-w) solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.signup__done-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--accent-strong);
  margin-bottom: var(--space-2);
}

/* ============================= problem ============================= */
.problem {
  padding-block: var(--space-10);
}

.problem__inner {
  display: grid;
  gap: var(--space-6);
  grid-template-areas: "figure" "lead" "body";
}

.problem__figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  grid-area: figure;
}

.problem__stat {
  font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem);
}

.problem__stat-label {
  max-width: 14ch;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

@media (min-width: 860px) {
  .problem__inner {
    grid-template-columns: 0.9fr 1.5fr;
    grid-template-areas: "figure lead" "figure body";
    gap: var(--space-3) var(--space-9);
    align-items: start;
  }

  .problem__figure {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-top: var(--space-2);
  }

  .problem__stat {
    font-size: clamp(4rem, 2rem + 6vw, 6.5rem);
  }
}

.problem__lead {
  grid-area: lead;
}

.problem__lead h2 {
  margin-top: var(--space-4);
  max-width: 16ch;
}

.problem__body {
  grid-area: body;
}

.problem__body p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.problem__body p + p {
  margin-top: var(--space-5);
}

/* ============================= how it works ============================= */
.hiw {
  padding-block: var(--space-10);
}

.hiw__title {
  margin-top: var(--space-4);
  max-width: 20ch;
}

.hiw__list {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  position: relative;
}

.hiw__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-top: var(--border-w) solid var(--border);
  transition: padding-left var(--dur-base) var(--ease-out);
}

.hiw__step:last-child {
  border-bottom: var(--border-w) solid var(--border);
}

@media (min-width: 640px) {
  .hiw__step:nth-child(2) {
    padding-left: var(--space-9);
  }
  .hiw__step:nth-child(3) {
    padding-left: var(--space-11);
  }
  .hiw__step:hover {
    padding-left: calc(var(--space-3) + var(--step-indent, 0px));
  }
  .hiw__step:nth-child(1) {
    --step-indent: 0px;
  }
  .hiw__step:nth-child(2) {
    --step-indent: var(--space-9);
  }
  .hiw__step:nth-child(3) {
    --step-indent: var(--space-11);
  }
}

.hiw__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 420;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 1.6ch;
  transition: color var(--dur-base) var(--ease-out);
}

.hiw__step:hover .hiw__num {
  color: var(--accent-strong);
}

.hiw__step-copy {
  padding-top: var(--space-1);
}

.hiw__step-title {
  max-width: 32ch;
}

.hiw__step-copy p {
  margin-top: var(--space-2);
  max-width: 48ch;
}

/* ============================= proof feed ============================= */
.proof {
  padding-block: var(--space-10);
}

.proof__header h2 {
  margin-top: var(--space-4);
  max-width: 20ch;
}

.proof__sub {
  margin-top: var(--space-3);
  max-width: 44ch;
}

.proof__grid {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.proof__empty {
  margin-top: var(--space-8);
  padding: var(--space-8);
  border: var(--border-w) dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.proof__empty-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.proof__cta {
  margin-top: var(--space-8);
}

/* ============================= niches ============================= */
.niches {
  padding-block: var(--space-10);
}

.niches__sub {
  margin-top: var(--space-3);
  max-width: 44ch;
}

.niches__grid {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.niches__card {
  position: relative;
  display: block;
  padding: var(--space-6);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.niches__card:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateY(-3px);
}

.niches__card--active {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.niches__card-icon {
  margin-bottom: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out);
}

.niches__card:hover .niches__card-icon {
  transform: scale(1.08);
}

.niches__card-title {
  font-size: var(--fs-base);
  font-weight: 600;
  font-family: var(--font-body);
  padding-right: var(--space-6);
}

.niches__card-body {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.niches__card-arrow {
  position: absolute;
  top: var(--space-6);
  right: var(--space-5);
  color: var(--accent);
  font-size: var(--fs-md);
  transition: transform var(--dur-base) var(--ease-out);
}

.niches__card:hover .niches__card-arrow {
  transform: translateX(3px);
}

/* ============================= pricing ============================= */
.pricing {
  padding-block: var(--space-10);
}

.pricing__header {
  max-width: 46ch;
}

.pricing__sub {
  margin-top: var(--space-3);
  max-width: 44ch;
}

.pricing__grid {
  margin-top: var(--space-9);
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .pricing__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* The paid card reads as the considered choice, not just a taller box:
     nudged up on desktop so its top edge (and ribbon) breaks the shared
     baseline the free card sits on, per BRAND.md's asymmetry direction. */
  .pricing__card--paid {
    margin-top: calc(-1 * var(--space-5));
  }
}

.pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing__card--paid {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
}

.pricing__card--paid::after {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--green-500) 16%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.pricing__card--paid > * {
  position: relative;
  z-index: 1;
}

.pricing__plan-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
}

.pricing__for {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
}

.pricing__price {
  margin-top: var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.pricing__price-amount {
  /* No explicit color on the free tier: inherits --ink-on-paper from the
     nested .band--alt .card. The paid tier below overrides to the accent
     color intentionally. */
  font-size: var(--fs-2xl);
}

.pricing__card--paid .pricing__price-amount {
  /* Fixed dark green, not the theme-flipping --accent-strong: this card's
     background is hardcoded white in both themes (see .band--alt .card). */
  color: var(--green-700);
}

.pricing__price-note {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
}

.pricing__features {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.pricing__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.pricing__features-icon {
  /* Fixed dark green, not the theme-flipping --accent: .pricing__card is a
     .band--alt .card, hardcoded white in both themes (see the tokens.css
     note on --ink-on-paper), so the icon needs the same fixed on-white
     green .band--alt .opp-card__amount uses, not a value tuned for
     whichever theme happens to be active. */
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.2em;
  color: var(--green-700);
}

.pricing__card .btn {
  margin-top: var(--space-7);
}

/* ============================= faq ============================= */
.faq {
  padding-block: var(--space-10);
}

.faq__inner {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 860px) {
  .faq__inner {
    /* Same 0.9fr/1.5fr ratio as .problem__inner -- one shared asymmetric
       pattern reused across the page reads as a deliberate system, not two
       one-off layouts. */
    grid-template-columns: 0.9fr 1.5fr;
    gap: var(--space-9);
    align-items: start;
  }

  .faq__lead {
    position: sticky;
    top: calc(var(--space-9) + 60px);
  }
}

.faq__lead h2 {
  margin-top: var(--space-4);
  max-width: 14ch;
}

.faq__lead-body {
  margin-top: var(--space-4);
  max-width: 32ch;
  line-height: var(--lh-relaxed);
}

.faq__lead-cta {
  margin-top: var(--space-5);
  padding-inline: 0;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: var(--border-w) solid var(--border);
  padding-block: var(--space-5);
}

.faq__item:last-child {
  border-bottom: var(--border-w) solid var(--border);
}

.faq__question {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  transition: color var(--dur-base) var(--ease-out);
}

.faq__question:hover {
  color: var(--accent);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.faq__question-text {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
}

.faq__toggle {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  align-self: center;
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__toggle::before {
  inset: 6px 0;
  height: 2px;
}

.faq__toggle::after {
  inset: 0 6px;
  width: 2px;
}

.faq__item[open] .faq__toggle::after {
  transform: rotate(90deg);
}

.faq__answer {
  margin-top: var(--space-4);
  margin-left: calc(2.4ch + var(--space-4));
  font-size: var(--fs-sm);
  max-width: 58ch;
  line-height: var(--lh-relaxed);
}

/* ============================= footer ============================= */
.site-footer {
  padding-block: var(--space-9) var(--space-7);
}

.site-footer__top {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 720px) {
  .site-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.site-footer__brand-mark {
  font-size: var(--fs-md);
}

.site-footer__tag {
  margin-top: var(--space-3);
  max-width: 32ch;
  font-size: var(--fs-sm);
}

.site-footer__col-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-on-alt-muted);
  margin-bottom: var(--space-3);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__col a {
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--text-on-alt);
  opacity: 0.85;
}

.site-footer__col a:hover {
  opacity: 1;
  color: var(--accent-strong);
}

.site-footer__rule {
  margin-block: var(--space-7);
  border-color: var(--border);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__disclaimer {
  font-size: var(--fs-2xs);
  max-width: 68ch;
  line-height: var(--lh-relaxed);
  color: var(--text-on-alt-muted);
}

.site-footer__copyright {
  font-size: var(--fs-2xs);
}

/* ============================= 404 ============================= */
.notfound {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.notfound::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto auto;
  width: 55vw;
  height: 55vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, color-mix(in srgb, var(--green-500) 22%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.notfound__inner {
  position: relative;
  padding-block: var(--space-9);
}

.notfound__brand {
  display: inline-block;
}

.notfound__digits {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 440;
  font-size: clamp(5rem, 3rem + 9vw, 10rem);
  line-height: 0.85;
  letter-spacing: var(--ls-tight);
  color: var(--accent);
  opacity: 0.5;
}

.notfound__digit-off {
  display: inline-block;
  /* One digit visibly knocked off its baseline -- an editorial "broken"
     accent rather than a stock icon-and-message 404 pattern. */
  transform: translateY(-0.1em) rotate(-6deg);
  color: var(--alert);
}

.notfound__title {
  margin-top: var(--space-5);
  max-width: 20ch;
}

.notfound__body {
  margin-top: var(--space-4);
  max-width: 42ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.notfound__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.notfound__quicklinks {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--border);
}

.notfound__quicklinks-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.notfound__quicklinks-list {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.notfound__quicklinks-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5em var(--space-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.notfound__quicklinks-list a:hover {
  border-color: var(--accent);
  color: var(--accent);
}