/* Feature pages: light and dark themes, shell colour overrides, and the fp- page components.
   Loaded after styles.css and site.css on /features/ only. The homepage never loads it and stays dark. */
html.fp {
  color-scheme: dark;
  --bg: #0b0b0c; --panel: #111113; --panel-2: #161618; --ink: #f3f3f3; --muted: #a3a3aa;
  --line: #ffffff14; --line-strong: #ffffff2e; --accent: #43bd85;
  --btn-bg: #ededee; --btn-ink: #18181a; --nav-bg: #0b0b0cf2; --menu-bg: #151517;
  --shot-border: #ffffff1f; --shot-shadow: none; --selection: #454549;
}
@media (prefers-color-scheme: light) {
  html.fp:not([data-theme=dark]) {
    color-scheme: light;
    --bg: #f6f5f2; --panel: #ffffff; --panel-2: #edebe6; --ink: #141416; --muted: #5a5a62;
    --line: #00000016; --line-strong: #00000030; --accent: #1e7a52;
    --btn-bg: #141416; --btn-ink: #f6f5f2; --nav-bg: #f6f5f2f0; --menu-bg: #ffffff;
    --shot-border: #00000024; --shot-shadow: 0 1px 2px #0000000f, 0 28px 60px -30px #00000055; --selection: #c9e4d6;
  }
}
html.fp[data-theme=light] {
  color-scheme: light;
  --bg: #f6f5f2; --panel: #ffffff; --panel-2: #edebe6; --ink: #141416; --muted: #5a5a62;
  --line: #00000016; --line-strong: #00000030; --accent: #1e7a52;
  --btn-bg: #141416; --btn-ink: #f6f5f2; --nav-bg: #f6f5f2f0; --menu-bg: #ffffff;
  --shot-border: #00000024; --shot-shadow: 0 1px 2px #0000000f, 0 28px 60px -30px #00000055; --selection: #c9e4d6;
}

/* Shell colours, re-pointed to the theme tokens. */
.fp body { background: var(--bg); color: var(--ink); }
.fp ::selection { background: var(--selection); color: var(--ink); }
.fp .site-nav { background: var(--nav-bg); color: var(--ink); border-bottom-color: var(--line); }
.fp .site-nav__links > a, .fp .site-menu__btn { color: var(--muted); }
.fp .site-nav__links > a:hover, .fp .site-nav__links > a[aria-current=page], .fp .site-menu__btn:hover, .fp .site-menu__btn[aria-expanded=true] { color: var(--ink); }
.fp .site-menu__panel { background: var(--menu-bg); border-color: var(--line-strong); }
.fp .site-menu__panel a { color: var(--ink); }
.fp .site-menu__panel a:hover { background: var(--panel-2); }
.fp .site-signin { border-color: var(--line-strong); color: var(--ink); }
.fp .site-signin:hover { background: var(--panel-2); border-color: var(--muted); }
.fp .site-button, .fp .btn { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.fp .site-button:hover, .fp .btn:hover { background: var(--btn-bg); opacity: .88; }
.fp .btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.fp .btn--outline:hover { background: var(--panel-2); opacity: 1; }
.fp .text-link { color: var(--ink); border-bottom-color: var(--line-strong); }
.fp .site-menu-toggle { border-color: var(--line-strong); }
.fp .site-menu-toggle span { background: var(--ink); }
.fp .theme-toggle { border-color: var(--line-strong); color: var(--ink); }
.fp .site-footer { color: var(--muted); }
.fp .site-footer a:hover, .fp .site-footer button:hover { color: var(--ink); }
.fp a:focus-visible, .fp button:focus-visible, .fp summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 900px) { .fp .site-nav__links { background: var(--menu-bg); border-color: var(--line); } }
@media (max-width: 600px) { html.fp { --site-page-gutter: 32px; } }

/* Shared pieces */
.fp main { overflow-x: clip; }
.fp-shot { margin: 0; border: 1px solid var(--shot-border); border-radius: 10px; overflow: hidden; background: #0b0b0c; box-shadow: var(--shot-shadow); min-width: 0; }
.fp-shot img { border-radius: 9px; }
.fp-shot a { display: block; }
.fp h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -1.2px; line-height: 1.12; }
.fp h3 { font-size: 19px; font-weight: 500; letter-spacing: -.3px; line-height: 1.35; }
.fp .eyebrow { color: var(--muted); }
.fp-plan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fp-plan__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.fp-list { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.fp-list li { position: relative; padding-left: 22px; color: var(--muted); line-height: 1.55; }
.fp-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 1px; background: var(--ink); }
.fp-list strong, .fp-copy p strong { color: var(--ink); font-weight: 500; }
.fp-section { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }

/* Breadcrumb and hero */
.fp-crumbs { padding-top: 28px; font-size: 13px; color: var(--muted); }
.fp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fp-crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .6; }
.fp-crumbs a:hover { color: var(--ink); }
.fp-hero { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 72px); }
.fp-hero__copy { max-width: 760px; }
.fp-hero h1 { font-size: clamp(36px, 4.8vw, 60px); font-weight: 450; letter-spacing: -1.8px; line-height: 1.08; text-wrap: balance; }
.fp-hero__sub { margin-top: 20px; max-width: 620px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.5; color: var(--muted); }
.fp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.fp-hero .fp-plan { margin-top: 18px; }
.fp-hero__stage { margin-top: 44px; padding: clamp(10px, 3vw, 32px); border-radius: 14px; background: linear-gradient(var(--panel-2), transparent 85%); }

/* Key facts */
.fp-facts { padding-block: 0 clamp(40px, 6vw, 72px); }
.fp-facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fp-facts__list > div { padding: 24px 24px 0 0; display: flex; flex-direction: column; gap: 6px; }
.fp-facts__list > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.fp-facts__list dd { font-size: clamp(22px, 2.4vw, 30px); font-weight: 450; letter-spacing: -.8px; line-height: 1.2; }
.fp-facts__list dt { font-size: 14px; color: var(--muted); line-height: 1.5; }
.fp-facts--band { padding-top: 0; }

/* Split sections */
.fp-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fp-split--flip .fp-copy { order: 2; }
.fp-split--text { align-items: start; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.fp-copy { max-width: 560px; min-width: 0; }
.fp-copy h2 { text-wrap: balance; }
.fp-copy p { color: var(--muted); font-size: 17px; line-height: 1.6; margin-top: 16px; }
.fp-split--text .fp-copy p:first-child { margin-top: 0; }
.fp-copy .text-link { margin-top: 22px; }
.fp-split__media { min-width: 0; }

/* Steps */
.fp-steps__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 36px; counter-reset: none; }
.fp-steps__list.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fp-steps__list li { padding-top: 20px; border-top: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 10px; }
.fp-steps__n { font-size: 13px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.fp-steps__list p { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Card grids */
.fp-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 36px; }
.fp-cards.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-cards > li { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 8px; }
.fp-cards p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.fp-cards--links > li { padding: 0; border-top: 0; }
.fp-cards--links a { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.fp-cards--links a:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fp-cards--links a:hover .fp-card__thumb { border-color: var(--muted); }
.fp-cards--links .fp-plan { margin-top: auto; padding-top: 8px; }
.fp-card__thumb { margin-bottom: 12px; border: 1px solid var(--shot-border); border-radius: 8px; overflow: hidden; background: #0b0b0c; aspect-ratio: 16 / 10; transition: border-color .15s; }
.fp-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Specs */
.fp-specs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin-top: 32px; }
.fp-specs__list > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.fp-specs__list dt { color: var(--muted); }
.fp-specs__list dd { overflow-wrap: anywhere; }

/* FAQ */
.fp-faq__list { max-width: 800px; margin-top: 28px; border-bottom: 1px solid var(--line); }
.fp-faq__item { border-top: 1px solid var(--line); }
.fp-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; }
.fp-faq__item summary::-webkit-details-marker { display: none; }
.fp-faq__item summary::after { content: '+'; color: var(--accent); font-size: 22px; line-height: 1; font-weight: 400; }
.fp-faq__item[open] summary::after { content: '−'; }
.fp-faq__body { padding: 0 0 20px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 680px; }

/* Final call to action */
.fp-cta__panel { padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.fp-cta__panel p { color: var(--muted); margin-top: 10px; max-width: 520px; }
.fp-cta__panel .fp-hero__actions { margin-top: 0; }

@media (max-width: 1100px) {
  .fp-cards, .fp-cards.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-steps__list, .fp-steps__list.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fp-split, .fp-split--text { grid-template-columns: minmax(0, 1fr); }
  .fp-split--flip .fp-copy { order: 0; }
  .fp-specs__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fp-cards, .fp-cards.n4, .fp-steps__list, .fp-steps__list.n5 { grid-template-columns: minmax(0, 1fr); }
  .fp-facts__list { grid-template-columns: minmax(0, 1fr); }
  .fp-facts__list > div, .fp-facts__list > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .fp-specs__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fp-hero__stage { margin-top: 32px; }
}
.fp-shot--tall { width: min(340px, 100%); margin-inline: auto; border-radius: 22px; }
.fp-shot--tall img { border-radius: 21px; }