@layer feature-pages {
  :root {
    --feature-ink: #070b12;
    --feature-panel: #122131;
    --feature-raised: #182b3d;
    --feature-line: #3c5268;
    --feature-paper: #f4f7fb;
    --feature-muted: #a9b7c5;
    --feature-green: #a7f3c1;
    --feature-cyan: #76ddf7;
    --feature-violet: #a89cff;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body.feature-page { margin: 0; background: var(--feature-ink); color: var(--feature-paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .feature-wrap { inline-size: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
  .feature-skip { position: fixed; z-index: 20; inset-block-start: .75rem; inset-inline-start: .75rem; translate: 0 -200%; padding: .7rem 1rem; border-radius: .5rem; background: var(--feature-paper); color: var(--feature-ink); }
  .feature-skip:focus { translate: 0; }

  .feature-header { position: relative; z-index: 10; border-block-end: 1px solid rgb(118 221 247 / .14); background: rgb(7 11 18 / .92); }
  .feature-header-inner { display: flex; min-block-size: 4.75rem; align-items: center; gap: 1.25rem; }
  .feature-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--feature-paper); font-size: 1.05rem; font-weight: 800; text-decoration: none; }
  .feature-brand svg { inline-size: 2rem; block-size: 2rem; fill: none; stroke: var(--feature-green); stroke-width: 1.5; }
  .feature-brand span span { color: var(--feature-green); }
  .feature-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: 1.4rem; }
  .feature-nav a, .feature-menu a { color: var(--feature-muted); font-size: .9rem; font-weight: 650; text-decoration: none; }
  .feature-nav a:hover, .feature-nav a:focus-visible, .feature-menu a:hover, .feature-menu a:focus-visible { color: var(--feature-paper); }
  .feature-actions { display: flex; align-items: center; gap: .55rem; }
  .feature-button { display: inline-flex; min-block-size: 2.75rem; align-items: center; justify-content: center; padding-inline: 1rem; border: 1px solid var(--feature-line); border-radius: .58rem; color: var(--feature-paper); font-weight: 750; text-decoration: none; }
  .feature-button.primary { border-color: rgb(167 243 193 / .4); background: var(--feature-green); color: #07110c; }
  .feature-button:hover { translate: 0 -.08rem; }
  .feature-menu { display: none; position: relative; }
  .feature-menu summary { min-block-size: 2.75rem; padding: .7rem .8rem; border: 1px solid var(--feature-line); border-radius: .55rem; color: var(--feature-paper); cursor: pointer; list-style: none; }
  .feature-menu summary::-webkit-details-marker { display: none; }
  .feature-menu summary::after { margin-inline-start: .45rem; content: "↓"; }
  .feature-menu[open] summary::after { content: "↑"; }
  .feature-menu nav { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; display: grid; min-inline-size: 12rem; gap: .2rem; padding: .55rem; border: 1px solid var(--feature-line); border-radius: .65rem; background: var(--feature-raised); box-shadow: 0 1rem 3rem rgb(0 0 0 / .45); }
  .feature-menu a { padding: .65rem; border-radius: .4rem; }

  .feature-hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 7.5rem); border-block-end: 1px solid rgb(118 221 247 / .12); background: radial-gradient(circle at 78% 20%, rgb(118 221 247 / .12), transparent 28rem), radial-gradient(circle at 18% 80%, rgb(168 156 255 / .1), transparent 24rem); }
  .feature-hero::before { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 3rem 3rem; content: ""; mask-image: linear-gradient(to bottom, black, transparent 90%); }
  .feature-hero-inner { position: relative; }
  .feature-breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-end: 1.5rem; color: var(--feature-muted); font-size: .82rem; }
  .feature-breadcrumb a { color: var(--feature-cyan); }
  .feature-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--feature-green); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .feature-eyebrow::before { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 .75rem currentColor; content: ""; }
  .feature-hero h1 { max-inline-size: 18ch; margin: .85rem 0 0; font-size: clamp(2.45rem, 6.5vw, 5rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
  .feature-lede { max-inline-size: 64ch; margin-block: 1.35rem 0; color: #cad5df; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.65; }
  .feature-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1.8rem; }
  .feature-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-inline-size: 55rem; gap: .65rem; margin: 2rem 0 0; }
  .feature-facts div { padding: .9rem 1rem; border: 1px solid rgb(118 221 247 / .16); border-radius: .65rem; background: rgb(18 33 49 / .72); }
  .feature-facts dt { color: var(--feature-muted); font-size: .78rem; }
  .feature-facts dd { margin: .3rem 0 0; font-weight: 800; }

  .feature-main-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
  .feature-main-section + .feature-main-section { border-block-start: 1px solid rgb(118 221 247 / .1); }
  .feature-section-heading { max-inline-size: 68ch; }
  .feature-section-heading h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.035em; text-wrap: balance; }
  .feature-section-heading p { margin: .8rem 0 0; color: var(--feature-muted); line-height: 1.7; }
  .feature-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-block-start: 2rem; }
  .feature-card { min-inline-size: 0; padding: 1.35rem; border: 1px solid var(--feature-line); border-radius: .8rem; background: linear-gradient(145deg, rgb(24 43 61 / .95), rgb(18 33 49 / .78)); }
  .feature-card > span { color: var(--feature-cyan); font: 800 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; }
  .feature-card h3 { margin: .65rem 0 0; font-size: 1.18rem; }
  .feature-card p { margin: .65rem 0 0; color: var(--feature-muted); line-height: 1.65; }
  .feature-steps { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; counter-reset: feature-step; list-style: none; }
  .feature-steps li { display: grid; grid-template-columns: 2.8rem 1fr; gap: .9rem; padding: 1.1rem; border: 1px solid var(--feature-line); border-radius: .7rem; background: rgb(18 33 49 / .7); counter-increment: feature-step; }
  .feature-steps li::before { display: grid; inline-size: 2.5rem; block-size: 2.5rem; place-items: center; border: 1px solid rgb(167 243 193 / .3); border-radius: 50%; color: var(--feature-green); font: 800 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; content: counter(feature-step, decimal-leading-zero); }
  .feature-steps h3 { margin: .08rem 0 0; font-size: 1.05rem; }
  .feature-steps p { margin: .35rem 0 0; color: var(--feature-muted); line-height: 1.65; }
  .feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-block-start: 2rem; }
  .feature-callout { padding: 1.45rem; border: 1px solid var(--feature-line); border-radius: .8rem; background: var(--feature-panel); }
  .feature-callout.good { border-color: rgb(167 243 193 / .3); background: linear-gradient(145deg, rgb(167 243 193 / .07), var(--feature-panel)); }
  .feature-callout h3 { margin: 0; font-size: 1.15rem; }
  .feature-callout ul { display: grid; gap: .62rem; margin: .9rem 0 0; padding-inline-start: 1.15rem; color: var(--feature-muted); line-height: 1.55; }
  .feature-callout li::marker { color: var(--feature-green); }
  .feature-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-block-start: 1.5rem; }
  .feature-related a { display: grid; min-block-size: 7.5rem; align-content: space-between; gap: .8rem; padding: 1.05rem; border: 1px solid var(--feature-line); border-radius: .68rem; background: var(--feature-panel); color: var(--feature-paper); font-weight: 750; text-decoration: none; }
  .feature-related a span { color: var(--feature-cyan); font-size: .85rem; font-weight: 600; }
  .feature-related a:hover, .feature-related a:focus-visible { border-color: var(--feature-cyan); background: var(--feature-raised); }
  .feature-final { padding-block: clamp(3.2rem, 7vw, 5.5rem); text-align: center; }
  .feature-final h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.045em; }
  .feature-final p { max-inline-size: 55ch; margin: .8rem auto 1.4rem; color: var(--feature-muted); line-height: 1.65; }
  .feature-footer { padding-block: 2rem; border-block-start: 1px solid rgb(118 221 247 / .14); }
  .feature-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .feature-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem; }
  .feature-footer a, .feature-footer small { color: var(--feature-muted); font-size: .82rem; }

  @media (max-width: 760px) {
    .feature-nav, .feature-actions .feature-login { display: none; }
    .feature-actions { margin-inline-start: auto; }
    .feature-menu { display: block; }
    .feature-facts, .feature-card-grid, .feature-related { grid-template-columns: 1fr; }
    .feature-split { grid-template-columns: 1fr; }
    .feature-footer-inner { align-items: flex-start; flex-direction: column; }
    .feature-footer nav { justify-content: flex-start; }
  }

  @media (max-width: 440px) {
    .feature-wrap { inline-size: min(100% - 1.1rem, 1120px); }
    .feature-header-inner { min-block-size: 4.25rem; gap: .55rem; }
    .feature-brand { font-size: .95rem; }
    .feature-actions > .primary { display: none; }
    .feature-hero h1 { font-size: clamp(2.25rem, 13vw, 3.4rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .feature-button { transition: none; }
  }
}