/* Homepage geometry copied from the approved Spectrum v2 direction. */
body { --hair: var(--nclear-v2-border-subtle); --shadow: 0 2px 6px rgb(0 0 0 / .3), 0 18px 44px rgb(0 0 0 / .4); font-size: 16px; line-height: normal; overflow-x: hidden; }
[data-theme="light"] body { --shadow: 0 2px 6px rgba(12, 20, 24, .1), 0 18px 44px rgba(12, 20, 24, .16); }
button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.nav .brand { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.nav .links { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; }
.nav .links a, .support-link { color: var(--muted); transition: color 150ms ease; }
.nav .links a:hover, .support-link:hover { color: var(--text); }
.nav .links .acc { color: var(--text); padding: 9px 18px; border: 1px solid var(--hair); border-radius: 999px; transition: border-color 150ms ease; }
.nav .links .acc:hover { border-color: var(--text); }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; font-size: 15px; color: var(--muted); transition: color 150ms ease, border-color 150ms ease, transform 300ms ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--text); transform: rotate(20deg); }

.showcase { position: relative; display: grid; height: 520px; min-height: 520px; align-items: stretch; border-radius: 22px; overflow: hidden; isolation: isolate; background: transparent; }
.sc-slide { grid-area: 1 / 1; position: relative; z-index: 0; display: grid; visibility: hidden; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); gap: 32px; align-items: stretch; padding: 24px; overflow: hidden; border-radius: inherit; opacity: 0; pointer-events: none; }
.sc-slide.on, .sc-slide.active { z-index: 1; visibility: visible; opacity: 1; pointer-events: auto; }
.showcase:not([data-single]) .sc-slide { padding-bottom: 0; }
.showcase::after, .sc-slide::after { display: none; }
.sc-background { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; background: var(--surface-2); pointer-events: none; }
.sc-background img, .sc-background video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sc-background img { z-index: 0; }
.sc-background video { z-index: 1; }
.sc-background img[hidden], .sc-background video[hidden] { display: none !important; }
.sc-copy { position: relative; z-index: 2; display: flex; grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; width: 100%; padding: 32px 0 0 32px; color: #fff; }
.sc-copy-inner { max-width: 500px; }
.sc-pills { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pill { padding: 6px 13px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.pill.new { display: inline-flex; align-items: center; gap: 6px; padding: 8px 8px; border-radius: 999px; background: var(--nclear-v2-accent-yellow-default); color: var(--nclear-v2-neutral-950); box-shadow: 0 7px 22px color-mix(in srgb, var(--nclear-v2-accent-yellow-default) 28%, transparent); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .16em; }
.pill.new svg { flex: 0 0 auto; }
.pill.dark { background: rgb(0 0 0 / .75); color: var(--nclear-v2-accent-cyan-default); border: 1px solid rgb(255 255 255 / .14); }
[data-theme="light"] .pill.dark { color: var(--nclear-v2-accent-cyan-default); }
.pill.light { background: rgba(255, 255, 255, .92); color: #0c0c0c; }
.sc-copy h1 { margin: 0 0 12px; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 3.5vw, 52px); line-height: 1; }
.sc-copy h1 .w-accent { color: var(--nclear-v2-accent-cyan-strong); }
[data-theme="light"] .sc-copy h1 .w-accent { color: var(--nclear-v2-accent-cyan-strong); }
.sc-copy h1 .w-dim { color: rgba(255, 255, 255, .55); }
.sc-copy .sub { max-width: 470px; margin: 0 0 26px; color: rgba(255, 255, 255, .82); font-size: 16.5px; line-height: 1.5; }
.sc-cta { display: flex; align-items: center; gap: 16px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; background: var(--nclear-v2-action-primary-bg-default); color: var(--nclear-v2-action-primary-content); font-weight: 600; font-size: 14.5px; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.btn:hover { transform: translateY(-1px); background: var(--nclear-v2-action-primary-bg-hover); box-shadow: 0 10px 28px color-mix(in srgb, var(--nclear-v2-cyan-500) 35%, transparent); }
.btn:active { background: var(--nclear-v2-action-primary-bg-pressed); }
.btn:focus-visible { outline: 2px solid var(--nclear-v2-accent-cyan-strong); outline-offset: 3px; }
.btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(6px); }
.btn.ghost:hover { background: rgba(255, 255, 255, .18); box-shadow: none; }

.cards-head { display: flex; align-items: baseline; justify-content: space-between; padding: 52px 0 22px; }
.cards-head h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 26px; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding-bottom: 40px; }
.card { flex: 1 1 320px; min-width: 300px; border: 1px solid var(--hair-soft); border-radius: 16px; background: var(--surface); overflow: hidden; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow); }
.card .thumb { position: relative; aspect-ratio: 16 / 8.4; background: var(--surface-2); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card .body { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 24px 20px; }
.card h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 22px; }
.card .sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.card .price { flex: 0 0 auto; color: var(--accent); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--text-soft); font-size: 13.5px; font-weight: 600; }
.card .go::after { content: "→"; color: var(--accent); transition: transform 180ms ease; }
.card:hover .go::after { transform: translateX(4px); }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0 30px; border-top: 1px solid var(--hair-soft); }
.footer a:hover { color: var(--text); }
.standards-preview { margin: 48px 0 72px; padding: 46px 0 0; border-top: 1px solid var(--hair-soft); }
.standards-preview-head { display: grid; grid-template-columns: minmax(0, 690px) auto; align-items: end; justify-content: space-between; gap: 32px; }
.standards-preview-head h2 { margin: 10px 0 14px; font-family: var(--display); font-size: clamp(31px, 3.6vw, 48px); font-weight: 600; line-height: 1.04; }
.standards-preview-head p:not(.label) { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.standards-preview-cta { justify-self: end; margin-bottom: 2px; white-space: nowrap; }
.standards-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-soft); }
.standards-preview-grid li { min-width: 0; padding: 24px 24px 26px 0; border-bottom: 1px solid var(--hair-soft); }
.standards-preview-grid li:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--hair-soft); }
.standards-preview-grid span { color: var(--accent); font: 500 10px/1 var(--mono); letter-spacing: .13em; }
.standards-preview-grid h3 { margin: 14px 0 8px; font-family: var(--display); font-size: 18px; font-weight: 600; text-transform: uppercase; }
.standards-preview-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.52; }

@media (max-width: 1080px) {
  .showcase { height: 480px; min-height: 480px; }
  .sc-slide { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px; padding: 24px; }
  .sc-copy { padding: 0 0 0 12px; }
  .sc-copy-inner { max-width: 560px; }
  .sc-copy h1 { font-size: clamp(32px, 4.2vw, 46px); }
}
@media (max-width: 900px) {
  .nav .links { gap: 12px; }.nav .links a:not(.acc):not(.standards-link) { display: none; }.nav .links .standards-link { white-space: nowrap; }
  .support-link { display: none; }
}
@media (max-width: 760px) {
  .showcase { height: 500px; min-height: 500px; }
  .sc-slide, .showcase:not([data-single]) .sc-slide { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .sc-background img, .sc-background video { object-position: 18% center; }
  .sc-copy { grid-column: 1; grid-row: 1; padding: 32px 24px 0; }
  .sc-copy-inner { max-width: none; }
  .sc-copy h1 { font-size: clamp(32px, 8.5vw, 46px); }
  .cards-head .label { display: none; }
  .standards-preview { margin-top: 34px; }.standards-preview-head { grid-template-columns: 1fr; gap: 20px; }.standards-preview-cta { justify-self: start; margin-bottom: 0; white-space: normal; }.standards-preview-grid { grid-template-columns: 1fr; margin-top: 30px; }.standards-preview-grid li, .standards-preview-grid li:not(:nth-child(3n + 1)) { padding: 20px 0; border-left: 0; }.standards-preview-grid h3 { font-size: 17px; }
}
@media (max-width: 480px) {
  .nav { flex-wrap: wrap; }.nav .links { width: 100%; justify-content: flex-end; }
  .sc-copy { padding: 28px 20px 0; }
  .sc-copy .sub { font-size: 15px; }
}