/* ==========================================================================
   NOCTURNE · V2 theme · dark editorial showcase
   Namespace: nc-*  ·  Custom properties: --nc-*
   Photos always render at width:100% / height:auto from their real
   width/height attributes — never cropped, never stretched.
   ========================================================================== */

:root {
  --nc-night: #0E1012;
  --nc-raise: #15181B;
  --nc-raise-2: #1D2125;
  --nc-edge: rgba(237, 233, 226, .12);
  --nc-text: #EDE9E2;
  --nc-dim: #A8A299;
  --nc-paper: #F4EFE6;
  --nc-paper-2: #EAE3D6;
  --nc-paper-ink: #1B1A17;
  --nc-paper-dim: #5C574F;
  --nc-paper-edge: #DDD4C4;
  --nc-lime: #C8F25C;
  --nc-lime-hover: #B9E745;
  --nc-lime-ink: #111700;
  --nc-coral: #FF7A59;
  --nc-coral-deep: #C2412A;
  --nc-coral-soft: rgba(255, 122, 89, .14);
  --nc-star: #F4B740;
  --nc-good: #7DDB8A;
  --nc-bad: #FF8A73;
  --nc-mid: #F2C46B;
  --nc-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --nc-sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --nc-max: 1200px;
  --nc-pad: 28px;
  --nc-round: 22px;
  --nc-round-s: 14px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nc-night); color: var(--nc-dim); font: 400 17px/1.7 var(--nc-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nc-lime); }
h1, h2, h3 { margin: 0; color: var(--nc-text); font-family: var(--nc-serif); font-weight: 600; letter-spacing: -.015em; overflow-wrap: break-word; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { margin: 0; }
strong, b { color: var(--nc-text); font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--nc-lime); outline-offset: 3px; border-radius: 6px; }
.nc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nc-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--nc-lime); color: var(--nc-lime-ink); font-weight: 700; }
.nc-skip:focus { top: 12px; }
.nc-frame { width: 100%; max-width: var(--nc-max); margin: 0 auto; padding: 0 var(--nc-pad); }
.nc-frame--narrow { max-width: 920px; }
.ico { flex: none; }
.nc-pic { width: 100%; height: auto; }
.nc-media { border-radius: var(--nc-round); overflow: hidden; border: 1px solid var(--nc-edge); background: var(--nc-raise); }
.nc-media figcaption { padding: 12px 18px; font-size: .88rem; border-top: 1px solid var(--nc-edge); }
.nc-media--wide { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.nc-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 800 1rem/1.2 var(--nc-sans); text-decoration: none; text-align: center; cursor: pointer; border: 0; transition: transform .18s, background .18s, box-shadow .18s; }
.nc-cta:hover { transform: translateY(-2px); }
.nc-cta--lime { background: var(--nc-lime); color: var(--nc-lime-ink); box-shadow: 0 0 0 1px rgba(200, 242, 92, .4), 0 14px 34px -14px rgba(200, 242, 92, .7); }
.nc-cta--lime:hover { background: var(--nc-lime-hover); }
.nc-cta--ink { background: var(--nc-paper-ink); color: var(--nc-paper); }
.nc-cta--sm { min-height: 40px; padding: 8px 18px; font-size: .9rem; }
.nc-cta--lg { min-height: 58px; padding: 15px 30px; font-size: 1.06rem; }

/* ---------- Floating pill header ---------- */
.nc-top { position: sticky; top: 12px; z-index: 50; padding: 0 16px; margin-top: 12px; }
.nc-pill { display: flex; align-items: center; gap: 26px; max-width: 1120px; margin: 0 auto; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(21, 24, 27, .82); border: 1px solid var(--nc-edge); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }
.nc-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--nc-text); text-decoration: none; font: 600 1.2rem/1 var(--nc-serif); white-space: nowrap; }
.nc-mark { flex: none; }
.nc-links { display: flex; gap: 26px; margin-left: auto; }
.nc-links a { color: var(--nc-dim); text-decoration: none; font-weight: 600; font-size: .93rem; }
.nc-links a:hover, .nc-links a.is-here { color: var(--nc-text); }
.nc-menu { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--nc-edge); background: var(--nc-raise-2); cursor: pointer; place-items: center; }
.nc-menu-lines, .nc-menu-lines::before, .nc-menu-lines::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--nc-text); transition: transform .2s, opacity .2s; }
.nc-menu-lines { position: relative; }
.nc-menu-lines::before, .nc-menu-lines::after { content: ""; position: absolute; left: 0; }
.nc-menu-lines::before { top: -6px; }
.nc-menu-lines::after { top: 6px; }
.nc-menu[aria-expanded="true"] .nc-menu-lines { background: transparent; }
.nc-menu[aria-expanded="true"] .nc-menu-lines::before { transform: translateY(6px) rotate(45deg); }
.nc-menu[aria-expanded="true"] .nc-menu-lines::after { transform: translateY(-6px) rotate(-45deg); }
.nc-drawer { max-width: 1120px; margin: 10px auto 0; border-radius: var(--nc-round); background: var(--nc-raise); border: 1px solid var(--nc-edge); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .9); }
.nc-drawer-in { display: grid; padding: 8px 20px 20px; }
.nc-drawer-in a:not(.nc-cta) { padding: 14px 2px; color: var(--nc-text); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--nc-edge); }
.nc-drawer-in .nc-cta { margin-top: 16px; }

/* ---------- Hero ---------- */
.nc-hero { padding: 56px 0 72px; background: radial-gradient(900px 480px at 50% 30%, rgba(200, 242, 92, .08), transparent 70%), radial-gradient(700px 400px at 85% 75%, rgba(255, 122, 89, .08), transparent 70%); }
.nc-hero-head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.nc-tagline { text-wrap: balance; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255, 122, 89, .4); background: var(--nc-coral-soft); color: #FFC2B2; font-size: .88rem; font-weight: 700; letter-spacing: .02em; }
.nc-tagline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nc-coral); flex: none; }
.nc-hero h1 { max-width: 15ch; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; }
.nc-lead { max-width: 40rem; font-size: 1.14rem; color: #CFC9BF; }
.nc-hero-act { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nc-from { font-size: .92rem; }
.nc-from b { font: 600 1.25rem/1 var(--nc-serif); color: var(--nc-text); }
.nc-from span { margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(200, 242, 92, .14); color: var(--nc-lime); font-weight: 700; font-size: .82rem; }

.nc-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 44px; }
.nc-hero-media { padding: 10px; border-radius: 30px; background: linear-gradient(180deg, var(--nc-raise-2), var(--nc-raise)); border: 1px solid var(--nc-edge); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.nc-hero-media .nc-pic { border-radius: 22px; }
.nc-flank { display: grid; gap: 28px; }
.nc-flank--l { text-align: right; }
.nc-flank li { display: grid; gap: 2px; }
.nc-flank b { font: 600 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--nc-serif); color: var(--nc-text); }
.nc-flank span { font-size: .9rem; line-height: 1.45; }
.nc-hero-foot { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 36px; }
.nc-rating { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: .92rem; }
.nc-rating b { font-size: 1rem; }
.nc-hero-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.nc-hero-ticks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--nc-raise); border: 1px solid var(--nc-edge); color: var(--nc-text); font-size: .92rem; font-weight: 600; }
.nc-hero-ticks .ico { color: var(--nc-lime); }

.stars { display: inline-flex; gap: 2px; color: var(--nc-star); }
.star { display: inline-flex; }
.star--off { color: #4A4E54; }

/* ---------- Bands ---------- */
.nc-band { padding: 104px 0; }
.nc-band--tight { padding-top: 0; }
.nc-band--raise { background: var(--nc-raise); }
.nc-band--paper { background: var(--nc-paper); color: var(--nc-paper-dim); }
.nc-band--paper h2, .nc-band--paper h3, .nc-band--paper strong, .nc-band--paper b { color: var(--nc-paper-ink); }
.nc-band--paper a { color: var(--nc-coral-deep); }
.nc-band--deal { background: radial-gradient(800px 460px at 20% 0%, rgba(200, 242, 92, .07), transparent 70%), var(--nc-night); }
.nc-title { display: grid; gap: 14px; max-width: 44rem; margin-bottom: 52px; }
.nc-title--c { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.nc-title h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.1; letter-spacing: -.025em; }
.nc-title-sub { font-size: 1.08rem; }
.nc-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--nc-coral); }
.nc-title--paper .nc-kicker { color: var(--nc-coral-deep); }
.nc-fine { max-width: 54rem; margin: 26px auto 0; text-align: center; font-size: .9rem; }

/* ---------- At a glance ---------- */
.nc-standfirst { max-width: 58rem; margin-bottom: 52px; font: 500 clamp(1.35rem, 2.4vw, 1.85rem)/1.45 var(--nc-serif); color: var(--nc-text); letter-spacing: -.01em; }
.nc-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.nc-copy { display: grid; gap: 18px; }
.nc-checks { display: grid; gap: 12px; margin-top: 8px; }
.nc-checks li { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--nc-edge); color: var(--nc-text); }
.nc-checks .ico { margin-top: 5px; color: var(--nc-lime); }

/* ---------- How it works ---------- */
.nc-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-top: 48px; counter-reset: none; }
.nc-part { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: var(--nc-round); background: var(--nc-night); border: 1px solid var(--nc-edge); }
.nc-part-n { font: 600 2.6rem/1 var(--nc-serif); color: var(--nc-lime); }
.nc-part p { font-size: .98rem; }

/* ---------- Chapters ---------- */
.nc-chapters { display: grid; gap: 96px; }
.nc-chapter { display: grid; gap: 30px; }
.nc-chap-head { display: grid; gap: 8px; justify-items: center; text-align: center; max-width: 46rem; margin: 0 auto; }
.nc-chap-n { font: italic 500 1rem/1 var(--nc-serif); color: var(--nc-coral); }
.nc-chap-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nc-chap-head h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
.nc-chap-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; max-width: 900px; margin: 0 auto; }
.nc-chap-cols > div { display: grid; gap: 18px; align-content: start; }
.nc-aside { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--nc-round-s); background: var(--nc-coral-soft); color: var(--nc-text); font-size: .95rem; }
.nc-aside .ico { margin-top: 4px; color: var(--nc-coral); }

/* ---------- Steps timeline ---------- */
.nc-steps { position: relative; display: grid; gap: 28px; }
.nc-steps::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--nc-lime), var(--nc-edge)); }
.nc-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: center; }
.nc-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nc-lime); color: var(--nc-lime-ink); font: 600 1.15rem/1 var(--nc-serif); box-shadow: 0 0 0 6px var(--nc-raise); align-self: start; }
.nc-step-text { display: grid; gap: 8px; }
.nc-step-pic { border-radius: var(--nc-round-s); }

/* ---------- Spec ledger ---------- */
.nc-ledger-wrap { display: grid; gap: 40px; }
.nc-ledger-wrap--media { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
.nc-ledger { margin: 0; display: grid; }
.nc-row { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--nc-paper-edge); }
.nc-row dt { flex: none; max-width: 48%; font-weight: 700; color: var(--nc-paper-ink); }
.nc-row::after { content: none; }
.nc-row dt::after { content: ""; }
.nc-row dd { margin: 0 0 0 auto; text-align: right; color: var(--nc-paper-dim); }
.nc-row { background-image: radial-gradient(circle, var(--nc-paper-edge) 1px, transparent 1.4px); background-size: 7px 7px; background-repeat: repeat-x; background-position: 0 calc(100% - 22px); }
.nc-row dt, .nc-row dd { background: var(--nc-paper); }
.nc-row dt { padding-right: 10px; }
.nc-row dd { padding-left: 10px; }

/* ---------- In the box ---------- */
.nc-box { display: grid; gap: 32px; }
.nc-box--media { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.nc-box-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.nc-box-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 22px; border-radius: var(--nc-round-s); background: #FFFDF8; border: 1px solid var(--nc-paper-edge); }
.nc-box-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nc-paper-ink); color: var(--nc-paper); font: 600 1rem/1 var(--nc-serif); }
.nc-box-tag { margin: 2px 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nc-coral-deep); }
.nc-box-item p:last-child { font-size: .94rem; }

/* ---------- Comparison ---------- */
.nc-vs { overflow-x: auto; border-radius: var(--nc-round); border: 1px solid var(--nc-edge); -webkit-overflow-scrolling: touch; }
.nc-vs-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.nc-vs-table th, .nc-vs-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--nc-edge); }
.nc-vs-table thead th { background: var(--nc-raise-2); color: var(--nc-text); font: 600 1rem/1.3 var(--nc-serif); }
.nc-vs-table tbody th { color: var(--nc-text); font-weight: 700; width: 26%; }
.nc-vs-table tbody tr:last-child > * { border-bottom: 0; }
.nc-vs-table .nc-mine { background: rgba(200, 242, 92, .07); }
.nc-vs-table thead .nc-mine { background: var(--nc-lime); color: var(--nc-lime-ink); }
.nc-vs-table small { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.4; }
.nc-v { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--nc-text); }
.nc-v--yes { color: var(--nc-good); }
.nc-v--no { color: var(--nc-bad); }
.nc-v--mid { color: var(--nc-mid); }

/* ---------- Fit ---------- */
.nc-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--nc-round); overflow: hidden; border: 1px solid var(--nc-edge); }
.nc-fit-half { padding: 36px; }
.nc-fit-half--yes { background: rgba(200, 242, 92, .06); }
.nc-fit-half--no { background: rgba(255, 122, 89, .06); border-left: 1px solid var(--nc-edge); }
.nc-fit-half h3 { margin-bottom: 20px; font-size: 1.35rem; }
.nc-fit-half ul { display: grid; gap: 14px; }
.nc-fit-half li { display: flex; gap: 12px; align-items: flex-start; }
.nc-fit-half li .ico { margin-top: 5px; color: var(--nc-lime); }
.nc-fit-half--no li .ico { color: var(--nc-coral); }

/* ---------- Reviews carousel (paper) ---------- */
.nc-owners-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.nc-owners-head .nc-title { margin-bottom: 0; }
.nc-arrows { display: flex; gap: 10px; }
.nc-arrows[hidden] { display: none; }
.nc-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--nc-paper-edge); background: #FFFDF8; color: var(--nc-paper-ink); cursor: pointer; }
.nc-arrow:hover { background: var(--nc-paper-ink); color: var(--nc-paper); }
.nc-owners { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.nc-tally { display: grid; align-content: center; justify-items: start; gap: 10px; padding: 26px 22px; border-radius: var(--nc-round); background: var(--nc-paper-ink); color: #CFC9BF; }
.nc-tally-n { font: 600 4rem/1 var(--nc-serif); color: var(--nc-paper); }
.nc-tally p:not(.nc-tally-n) { font-size: .9rem; }
.nc-tally .nc-cta { margin-top: 8px; width: 100%; white-space: nowrap; background: var(--nc-lime); color: var(--nc-lime-ink); }
.nc-reel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 380px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding-bottom: 14px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--nc-paper-edge) transparent; }
.nc-quote { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--nc-round); background: #FFFDF8; border: 1px solid var(--nc-paper-edge); }
.nc-quote h3 { font-size: 1.16rem; }
.nc-quote p { font-size: .96rem; }
.nc-quote footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nc-paper-edge); }
.nc-quote footer b { display: block; font-size: .94rem; }
.nc-quote footer small { display: block; font-size: .82rem; }
.nc-initials { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nc-paper-2); color: var(--nc-paper-ink); font: 600 .95rem/1 var(--nc-serif); }
.nc-checked { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .78rem; font-weight: 800; color: #2E6B1F; }

/* ---------- Bundles: checkout layout ---------- */
.nc-checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: start; max-width: 1080px; margin: 0 auto; }
.nc-step-label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--nc-text); font-weight: 800; font-size: .95rem; }
.nc-step-label span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nc-raise-2); border: 1px solid var(--nc-edge); font-size: .8rem; }
.nc-opts { display: grid; gap: 14px; }
.nc-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 22px 24px; border-radius: var(--nc-round); background: var(--nc-raise); border: 2px solid var(--nc-edge); cursor: pointer; transition: border-color .18s, background .18s; }
.nc-opt:hover { border-color: rgba(237, 233, 226, .3); }
.nc-opt.is-on { border-color: var(--nc-lime); background: linear-gradient(180deg, rgba(200, 242, 92, .07), var(--nc-raise)); }
.nc-opt-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--nc-dim); display: grid; place-items: center; }
.nc-opt.is-on .nc-opt-radio { border-color: var(--nc-lime); }
.nc-opt.is-on .nc-opt-radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--nc-lime); }
.nc-opt-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--nc-text); font: 600 1.2rem/1.3 var(--nc-serif); }
.nc-opt-qty { padding: 1px 8px; border-radius: 6px; background: var(--nc-raise-2); font: 800 .82rem/1.5 var(--nc-sans); color: var(--nc-dim); }
.nc-opt-badge { padding: 2px 10px; border-radius: 999px; background: var(--nc-coral); color: #1B0B05; font: 800 .74rem/1.6 var(--nc-sans); letter-spacing: .03em; }
.nc-opt-tag { font-size: .9rem; }
.nc-opt-price { display: grid; justify-items: end; gap: 2px; text-align: right; }
.nc-opt-price b { font: 600 1.7rem/1 var(--nc-serif); }
.nc-opt-price small { font: 600 .82rem var(--nc-sans); color: var(--nc-dim); }
.nc-opt-price span { font-size: .86rem; }
.nc-opt-price em { font-style: normal; font-weight: 800; color: var(--nc-lime); }
.nc-opt-go { display: none; grid-column: 2 / -1; font-size: .9rem; font-weight: 700; text-decoration: none; }
.nc-nojs .nc-opt-go { display: inline-flex; align-items: center; gap: 6px; }
.nc-notes { display: grid; gap: 8px; margin-top: 18px; font-size: .9rem; }
.nc-notes li { display: flex; gap: 8px; align-items: center; }
.nc-notes .ico { color: var(--nc-lime); }
.nc-summary { position: sticky; top: 100px; display: grid; gap: 18px; padding: 24px; border-radius: var(--nc-round); background: var(--nc-paper); color: var(--nc-paper-dim); }
.nc-summary .nc-step-label { margin-bottom: 0; color: var(--nc-paper-ink); }
.nc-summary .nc-step-label span { background: var(--nc-paper-2); border-color: var(--nc-paper-edge); }
.nc-summary b { color: var(--nc-paper-ink); }
.nc-sum-item { display: grid; gap: 12px; }
.nc-sum-pic { border-color: var(--nc-paper-edge); border-radius: var(--nc-round-s); }
.nc-sum-name { font: 600 1.2rem/1.3 var(--nc-serif); color: var(--nc-paper-ink); }
.nc-sum-name > span { font: 800 .9rem var(--nc-sans); color: var(--nc-paper-dim); }
.nc-sum-perks { display: grid; gap: 6px; font-size: .92rem; }
.nc-sum-perks li { display: flex; gap: 8px; align-items: flex-start; }
.nc-sum-perks .ico { margin-top: 4px; color: #2E6B1F; }
.nc-sum-total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding-top: 16px; border-top: 1px dashed var(--nc-paper-edge); }
.nc-sum-total > span { font-weight: 700; color: var(--nc-paper-ink); }
.nc-sum-total p { text-align: right; }
.nc-sum-total p b { font: 600 1.8rem/1 var(--nc-serif); }
.nc-sum-total em { grid-column: 1 / -1; justify-self: end; font-style: normal; font-weight: 800; font-size: .88rem; color: #2E6B1F; }
.nc-sum-go { width: 100%; padding-left: 16px; padding-right: 16px; font-size: .98rem; }
.nc-sum-small { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: .82rem; }

/* ---------- FAQ ---------- */
.nc-qs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; }
.nc-qs > div { display: grid; align-content: start; }
.nc-q { border-bottom: 1px solid var(--nc-paper-edge); }
.nc-q summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; list-style: none; }
.nc-q summary::-webkit-details-marker { display: none; }
.nc-q summary h3 { font-size: 1.12rem; }
.nc-q-sign { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--nc-paper-edge); }
.nc-q-sign::before, .nc-q-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--nc-paper-ink); transition: transform .2s; }
.nc-q-sign::after { transform: rotate(90deg); }
.nc-q[open] .nc-q-sign { background: var(--nc-paper-ink); }
.nc-q[open] .nc-q-sign::before { background: var(--nc-paper); }
.nc-q[open] .nc-q-sign::after { transform: rotate(0); background: var(--nc-paper); }
.nc-q > p { padding: 0 44px 24px 0; font-size: .97rem; }

/* ---------- Finale ---------- */
.nc-finale { padding: 110px 0; text-align: center; background: radial-gradient(700px 360px at 50% 100%, rgba(200, 242, 92, .14), transparent 70%), var(--nc-night); border-top: 1px solid var(--nc-edge); }
.nc-finale-in > div { display: grid; gap: 18px; justify-items: center; max-width: 46rem; margin: 0 auto; }
.nc-finale-in--media { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; text-align: left; }
.nc-finale-in--media > div { justify-items: start; margin: 0; }
.nc-finale h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; }
.nc-finale .nc-cta { margin-top: 10px; }

/* ---------- Footer ---------- */
.nc-foot { padding: 64px 0 130px; background: #08090A; border-top: 1px solid var(--nc-edge); font-size: .92rem; }
.nc-foot-top { display: grid; gap: 14px; max-width: 40rem; }
.nc-stamp { display: inline-flex; align-items: center; gap: 6px; color: var(--nc-text); font-size: .86rem; }
.nc-foot-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 32px 0; padding: 22px 0; border-top: 1px solid var(--nc-edge); border-bottom: 1px solid var(--nc-edge); }
.nc-foot-nav a { color: var(--nc-text); text-decoration: none; font-weight: 600; }
.nc-foot-nav a:hover { color: var(--nc-lime); }
.nc-legal { display: grid; gap: 12px; font-size: .84rem; line-height: 1.6; }

/* ---------- Floating offer pill ---------- */
.nc-float { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 24px); padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(29, 33, 37, .94); border: 1px solid var(--nc-edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .9); transform: translate(-50%, 160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.nc-float.is-on { transform: translate(-50%, 0); }
.nc-float-pct { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--nc-coral); color: #1B0B05; font: 800 .95rem/1 var(--nc-sans); }
.nc-float-txt { display: grid; min-width: 0; line-height: 1.3; }
.nc-float-txt b { font-size: .95rem; white-space: nowrap; }
.nc-float-txt small { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Shared pages from _core: hand-off + policy documents
   ========================================================================== */
.v2-hand { min-height: 100vh; background: radial-gradient(800px 460px at 50% 0%, rgba(200, 242, 92, .1), transparent 70%), var(--nc-night); }
.v2-hand-main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 32px 20px 56px; display: grid; gap: 28px; justify-items: center; }
.v2-hand-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--nc-text); text-decoration: none; font: 600 1.25rem/1 var(--nc-serif); }
.v2-hand-card { width: 100%; max-width: 620px; border-radius: 28px; overflow: hidden; background: var(--nc-raise); border: 1px solid var(--nc-edge); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95); }
.v2-hand-card--media { max-width: 1000px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.v2-hand-body { display: grid; gap: 20px; padding: 40px; align-content: center; }
.v2-hand-media { order: -1; display: flex; align-items: center; padding: 16px; background: var(--nc-raise-2); }
.v2-hand-media img { width: 100%; height: auto; border-radius: 18px; }
.v2-hand-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.12; }
.v2-hand-lead { color: #CFC9BF; }
.v2-track { display: grid; gap: 0; }
.v2-track li { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: .96rem; }
.v2-track li + li::before { content: ""; position: absolute; left: 13px; top: -9px; height: 18px; width: 2px; background: var(--nc-edge); }
.v2-track li span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--nc-edge); font-size: .8rem; font-weight: 800; }
.v2-track li b { font-weight: 600; color: inherit; }
.v2-track li.is-done, .v2-track li.is-now { color: var(--nc-text); }
.v2-track li.is-done span { background: var(--nc-lime); border-color: var(--nc-lime); color: var(--nc-lime-ink); }
.v2-track li.is-now span { border-color: var(--nc-coral); color: var(--nc-coral); animation: nc-blink 1.2s ease-in-out infinite; }
@keyframes nc-blink { 50% { box-shadow: 0 0 0 6px var(--nc-coral-soft); } }
.v2-count { position: relative; width: 60px; height: 60px; }
.v2-count svg { width: 60px; height: 60px; transform: rotate(-90deg); }
.v2-count circle { fill: none; stroke: var(--nc-lime); stroke-width: 4; stroke-dasharray: 120; animation: nc-ring 3s linear forwards; }
.v2-count b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.4rem/1 var(--nc-serif); }
@keyframes nc-ring { to { stroke-dashoffset: 120; } }
.v2-hand-go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 14px 24px; border-radius: 999px; background: var(--nc-lime); color: var(--nc-lime-ink); font-weight: 800; text-decoration: none; text-align: center; }
.v2-hand-go:hover { background: var(--nc-lime-hover); }
.v2-regions { display: grid; gap: 12px; }
.v2-region { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 18px; border-radius: var(--nc-round-s); border: 2px solid var(--nc-edge); text-decoration: none; color: var(--nc-text); }
.v2-region:hover { border-color: var(--nc-lime); }
.v2-region-code { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--nc-lime); color: var(--nc-lime-ink); font-weight: 800; }
.v2-region-name { font: 600 1.1rem/1.2 var(--nc-serif); }
.v2-region-go { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: var(--nc-lime); }
.v2-hand-small { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; }
.v2-hand-small .ico { margin-top: 3px; }
.v2-hand-back { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--nc-dim); text-decoration: none; }
.v2-hand-back:hover { color: var(--nc-text); }

.v2-doc { background: var(--nc-paper); color: var(--nc-paper-dim); }
.v2-doc h1, .v2-doc h2, .v2-doc strong { color: var(--nc-paper-ink); }
.v2-doc a { color: var(--nc-coral-deep); }
.v2-doc .v2-hand-logo { color: var(--nc-paper-ink); }
.v2-doc .v2-hand-back { color: var(--nc-paper-dim); }
.v2-doc-head { padding: 18px 24px; border-bottom: 1px solid var(--nc-paper-edge); }
.v2-doc-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 44px 24px 64px; display: grid; gap: 16px; }
.v2-doc-main h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); }
.v2-doc-main h2 { font-size: 1.35rem; margin-top: 16px; }
.v2-doc-date { font-size: .92rem; }
.v2-doc-contact { display: grid; gap: 10px; padding: 20px; border-radius: var(--nc-round-s); background: #FFFDF8; border: 1px solid var(--nc-paper-edge); }
.v2-doc-contact li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.v2-doc-contact .ico { margin-top: 4px; color: var(--nc-coral-deep); }
.v2-doc-foot { padding: 24px; text-align: center; font-size: .88rem; border-top: 1px solid var(--nc-paper-edge); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nc-links { gap: 18px; }
  .nc-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  .nc-hero-media { grid-column: 1 / -1; grid-row: 1; max-width: 680px; width: 100%; margin: 0 auto; }
  .nc-flank { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .nc-flank--l { text-align: left; }
  .nc-flank li { padding: 14px 16px; border-radius: var(--nc-round-s); background: var(--nc-raise); border: 1px solid var(--nc-edge); }
  .nc-checkout { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .nc-summary { position: static; }
  .nc-sum-item { grid-template-columns: 140px minmax(0, 1fr); align-items: center; }
}

@media (max-width: 900px) {
  .nc-links, .nc-pill .btn-nav-cta { display: none; }
  .nc-menu { display: grid; }
  .nc-band { padding: 76px 0; }
  .nc-duo, .nc-chap-cols, .nc-ledger-wrap--media, .nc-box--media, .nc-finale-in--media, .nc-fit, .v2-hand-card--media { grid-template-columns: minmax(0, 1fr); }
  .nc-fit-half--no { border-left: 0; border-top: 1px solid var(--nc-edge); }
  .nc-finale-in--media { text-align: center; }
  .nc-finale-in--media > div { justify-items: center; margin: 0 auto; }
  .nc-step { grid-template-columns: 44px minmax(0, 1fr); }
  .nc-step-pic { grid-column: 2; max-width: 420px; }
  .nc-owners { grid-template-columns: minmax(0, 1fr); }
  .nc-tally { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; }
  .nc-tally-n { grid-row: span 2; }
  .nc-tally p:not(.nc-tally-n) { grid-column: 2; }
  .nc-tally .nc-cta { grid-column: 1 / -1; width: 100%; }
  .nc-qs { grid-template-columns: minmax(0, 1fr); }
  .v2-hand-media { order: 0; padding: 12px; }
  .v2-hand-media img { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 700px) {
  /* Comparison: each row becomes its own card — no sideways scrolling */
  .nc-vs { overflow: visible; border: 0; border-radius: 0; }
  .nc-vs-table, .nc-vs-table tbody, .nc-vs-table tr, .nc-vs-table th, .nc-vs-table td { display: block; width: 100%; }
  .nc-vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nc-vs-table tr { margin-bottom: 14px; border-radius: var(--nc-round-s); border: 1px solid var(--nc-edge); overflow: hidden; background: var(--nc-raise); }
  .nc-vs-table tbody th { width: 100%; padding: 14px 16px; background: var(--nc-raise-2); font-family: var(--nc-serif); font-size: 1.05rem; font-weight: 600; }
  .nc-vs-table td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 2px 12px; padding: 12px 16px; }
  .nc-vs-table td::before { content: attr(data-col); grid-row: span 2; font-size: .86rem; font-weight: 700; color: var(--nc-text); }
  .nc-vs-table td small { margin-top: 0; }
  .nc-vs-table tbody tr:last-child > * { border-bottom: 1px solid var(--nc-edge); }
  .nc-vs-table tbody tr > *:last-child { border-bottom: 0; }
  .nc-vs-table td.nc-mine { background: rgba(200, 242, 92, .08); }
}

@media (max-width: 640px) {
  :root { --nc-pad: 20px; }
  body { font-size: 16px; }
  html { scroll-padding-top: 84px; }
  .nc-top { top: 8px; margin-top: 8px; padding: 0 10px; }
  /* Hero on phones: tagline → name → photo (above the fold, R5.4) → lead → CTA → stats */
  .nc-hero { display: flex; flex-direction: column; gap: 16px; padding: 22px var(--nc-pad) 52px; }
  .nc-hero > .nc-frame { padding: 0; }
  .nc-hero-head, .nc-showcase { display: contents; }
  .nc-tagline { order: 1; align-self: center; text-align: center; font-size: .76rem; padding: 5px 12px; letter-spacing: 0; }
  .nc-hero h1 { order: 2; align-self: center; text-align: center; }
  .nc-hero-media { order: 3; padding: 6px; border-radius: 22px; }
  .nc-lead { order: 4; text-align: center; font-size: 1.03rem; }
  .nc-hero-act { order: 5; width: 100%; }
  .nc-hero-act .nc-cta { width: 100%; }
  .nc-hero-foot { order: 6; margin-top: 4px; }
  .nc-flank { order: 7; }
  .nc-flank b { font-size: 1.4rem; }
  .nc-hero-media .nc-pic { border-radius: 17px; }
  .nc-hero-ticks { display: grid; width: 100%; }
  .nc-title { margin-bottom: 36px; }
  .nc-standfirst { margin-bottom: 36px; }
  .nc-part { padding: 22px; }
  .nc-chapters { gap: 64px; }
  .nc-row { flex-wrap: wrap; background-image: none; gap: 2px; }
  .nc-row dt { max-width: none; }
  .nc-row dd { margin: 0; text-align: left; padding-left: 0; width: 100%; }
  .nc-owners-head { display: block; }
  .nc-reel { grid-auto-columns: 86%; }
  .nc-opt { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .nc-opt-price { grid-column: 2; justify-items: start; text-align: left; }
  .nc-sum-item { grid-template-columns: 96px minmax(0, 1fr); }
  .nc-fit-half { padding: 24px; }
  .nc-q > p { padding-right: 0; }
  .nc-float { left: 12px; right: 12px; width: auto; max-width: none; transform: translateY(160%); }
  .nc-float.is-on { transform: none; }
  .nc-float-txt small { display: none; }
  .nc-float-txt b { white-space: normal; font-size: .88rem; }
  .nc-float .nc-cta { margin-left: auto; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
  .nc-tail { display: none; }
  .v2-hand-body { padding: 26px 22px; }
}

@media (max-width: 380px) {
  .nc-hero h1 { font-size: 2.3rem; }
  .nc-float-txt { display: none; }
  .nc-float { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
