/* ============================================================
   Kapturre — dark theme (night). Loads after styles.css.
   Product UI mocks (the Northwind app, share page) stay light,
   like screenshots of a light-mode app on a dark site.
   ============================================================ */
:root {
  --bg: #08090B;
  --tint: #101114;
  --card: #0F1013;
  --ink: #F2F2EE;
  --text: #C7C9C3;
  --muted: #8A8D88;
  --dim: #6E716C;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);
  --leaf: #7DB4FF;
  --leaf-soft: rgba(125,180,255,.12);
  --sky: #7DB1F0;
  color-scheme: dark;
}
::selection { background: rgba(125,180,255,.3); }

/* buttons: the primary becomes a light pill on dark */
.btn-dark { background: linear-gradient(180deg, #FFFFFF 0%, #DCDCD6 100%); color: #0B0C0B; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.2), 0 10px 24px -10px rgba(0,0,0,.8); }
.btn-dark:hover { background: linear-gradient(180deg, #FFFFFF 0%, #ECECE7 100%); }
.btn-outline { background: rgba(255,255,255,.03); border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { border-color: rgba(255,255,255,.28); }
.btn-glass { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--ink); }
.btn-glass:hover { background: rgba(255,255,255,.1); }

/* nav */
.nav.scrolled, .nav.open { background: rgba(8,9,11,.78); border-color: var(--line); }
.nav-links a { color: var(--ink); opacity: .7; }
.nav-links a:hover { background: rgba(255,255,255,.06); opacity: 1; }
.nav-burger { background: rgba(255,255,255,.08); }
.nav-burger span { background: var(--ink); }
.mobile-menu a { color: var(--ink); }

/* hero (night) */
.announce { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--ink); }
.announce:hover { background: rgba(255,255,255,.1); }
.hero h1 { color: #F4F4F0; text-shadow: none; }
.hero h1 .dim { color: rgba(244,244,240,.42); }
.lede, .hero-aside p { color: rgba(236,238,234,.72); text-shadow: none; }
.mq-track span { color: rgba(240,240,236,.86); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.grain { opacity: .14; mix-blend-mode: overlay; }
.stars circle { fill: #fff; }
.stars .tw { animation: twinkle 4s ease-in-out infinite; }
.stars .tw:nth-child(3n) { animation-delay: -1.3s; }
.stars .tw:nth-child(4n) { animation-delay: -2.6s; }
@keyframes twinkle { 50% { opacity: .25; } }

/* the demo sits on a night desktop */
.demo { background: #0E1626; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -30px rgba(0,0,0,.9), 0 0 120px -40px rgba(125,177,240,.25); }
.d-desktop {
  background:
    radial-gradient(28% 22% at 74% 30%, rgba(214,226,255,.22), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(40,58,92,.55), transparent 70%),
    linear-gradient(180deg, #0B1324 0%, #16264A 48%, #263A5E 70%, #1B2840 88%, #121C30 100%);
}
.d-menubar { background: rgba(20,24,34,.55); color: #EDEDEA; }
.mb-leaf, .mb-batt { color: #EDEDEA; }
.mb-batt { border-color: #EDEDEA; }
.mb-batt::after, .mb-batt i { background: #EDEDEA; }
.d-steps button { background: rgba(255,255,255,.04); border-color: var(--line); }
.d-steps button:hover { border-color: var(--line-2); }
.d-steps button:hover i { background: rgba(255,255,255,.12); }
.d-steps i { background: rgba(255,255,255,.08); }
.d-steps button.on { background: rgba(255,255,255,.1); border-color: var(--line-2); box-shadow: none; }
.d-steps button.on i { background: #F2F2EE; color: #0B0C0B; }

/* section headers */
.rh-text b { color: var(--ink); }
.pill-link { background: rgba(255,255,255,.04); border-color: var(--line-2); box-shadow: none; }

/* platforms */
.plat { color: var(--ink); }

/* feature tabs + visuals */
.tabs { background: rgba(255,255,255,.04); border-color: var(--line); }
.tab:hover { color: var(--ink); }
.tab.on { background: #F2F2EE; color: #0B0C0B; }
.tp-visual { background: radial-gradient(70% 60% at 50% 0%, rgba(125,177,240,.18), transparent 70%), linear-gradient(180deg, #121B2E, #0C111B); border-color: var(--line); }
.layout-pick button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--ink); }
.layout-pick button.on { background: #F2F2EE; color: #0B0C0B; border-color: #F2F2EE; }
.transcript { background: #14161B; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -24px rgba(0,0,0,.8); }
.tr-body { color: #E8E9E4; }
.tr-body .ts { color: #6E726C; }
.tr-body s.f { background: rgba(239,76,63,.15); color: #FF9A90; }
.tr-foot { border-color: var(--line); }
.switch { color: var(--ink); }
.switch span { background: #33363B; }
.shot, .cam-stage { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -24px rgba(0,0,0,.85); }

/* modes */
.mc-visual.instant, .mc-visual.studio, .hv-1, .hv-2, .hv-3 { background: #0B0C0F radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 16px 16px; }
.mc-ic { background: rgba(255,255,255,.05); border-color: var(--line-2); color: var(--ink); }
.upload-card, .spec { background: #16181D; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 20px 40px -24px rgba(0,0,0,.9); }
.uc-bar { background: rgba(255,255,255,.08); }
.uc-link { background: rgba(255,255,255,.05); }
.spec span { color: var(--ink); }

/* why / before-after */
.log { color: #4C504B; }
.log i { color: #D9837A; }
.b-ba { background: var(--card); }
.ba-col { background: #14161A; border-color: var(--line); }
.ba-col:last-child { border-color: rgba(125,180,255,.3); box-shadow: 0 16px 40px -24px rgba(125,180,255,.35); }
.ba-strip i, .ba-strip s { background: #2A2D33; }
.ba-strip s { background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(239,76,63,.25) 4px 8px); border-color: rgba(239,76,63,.4); }
.ba-strip.clean i { background: #7DB4FF; opacity: .8; }
.ba-arrow { background: rgba(255,255,255,.06); }
kbd { background: #16181D; border-color: var(--line-2); color: var(--ink); }
.t-keep { background: #1A1C21; border-color: var(--line-2); }
.t-cut { background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255,255,255,.06) 5px 10px); border-color: rgba(255,255,255,.18); color: var(--muted); }
.link-pill { background: #16181D; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.link-pill b { background: #F2F2EE; color: #0B0C0B; }

/* share: the share page mock stays a light screenshot */
.share-list li { border-color: var(--line); }
.share-list code { color: var(--leaf); }
.viewer { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px rgba(0,0,0,.9); }
.viewer, .viewer h4 { color: #121412; }

/* compare */
.compare { background: var(--card); }
.compare th { background: rgba(255,255,255,.03); }
.compare .us { background: rgba(125,180,255,.06); }
.compare td.n::before { color: #4A4D49; }

/* pricing */
.billing { background: rgba(255,255,255,.04); border-color: var(--line); }
.bill.on { background: #F2F2EE; color: #0B0C0B; }
.bill.on .save { background: rgba(59,123,234,.14); color: #2A63C7; }
.plan.featured { border-color: rgba(255,255,255,.35); box-shadow: 0 30px 80px -40px rgba(125,180,255,.25); }
.ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237DB4FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* waitlist */
.wl-card { background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0,0,0,.9); border-color: var(--line); }
.wl-row input { background: rgba(255,255,255,.04); border-color: var(--line-2); color: var(--ink); }
.wl-row input::placeholder { color: #5D605B; }
.wl-error { color: #FF8F84; }
.wl-os span { background: rgba(255,255,255,.04); border-color: var(--line-2); color: var(--ink); }
.wl-os span::before { border-color: #5D605B; }
.wl-os input:checked + span { background: #F2F2EE; border-color: #F2F2EE; color: #0B0C0B; }
.wl-os input:checked + span::before { border-color: #0B0C0B; background-color: #0B0C0B; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F2EE' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* faq */
.faq-list details, .faq-list details:last-child { border-color: var(--line); }

/* final call to action + footer */
.cta-copy h2 .dim { color: rgba(244,244,240,.42); }
.cta-copy .sub { color: rgba(236,238,234,.7); }
.footer { background: #060708; border-color: var(--line); }
.toast { background: #F2F2EE; color: #0B0C0B; }
.brand-mark rect { stroke: rgba(255,255,255,.22); stroke-width: 1.2; }
.brand { color: var(--ink); }
.viewer .cm p { color: #3D423C; }
.viewer .v-meta p { color: #6C6F6A; }
kbd.down { background: rgba(125,180,255,.16); border-color: rgba(125,180,255,.55); color: #fff; }
.link-pill b { background: rgba(255,255,255,.12); color: var(--ink); }
.link-pill b.done { background: #7DB4FF; color: #08090B; }
.log .caret { background: #7DB4FF; }

/* ---------- waitlist on a clipped sheet of paper ---------- */
.wl-card.paper { position: relative; isolation: isolate; background: none; border: 0; box-shadow: none; border-radius: 3px; padding: 44px 40px 36px; color: #1C1E1B; transform: rotate(-1.2deg); }
.wl-card.paper.reveal.in { transform: rotate(-1.2deg); }
.paper::before, .paper::after { content: ""; position: absolute; inset: 0; border-radius: 3px; }
/* the sheet: warm off-white with a little grain and a soft lift */
.paper::before {
  z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #FBF9F3 0%, #F3EFE4 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(0,0,0,.25), 0 30px 60px -20px rgba(0,0,0,.85), 0 60px 120px -40px rgba(0,0,0,.6);
}
/* a second sheet peeking out underneath */
.paper::after { z-index: -3; background: #DCD7CB; transform: rotate(2.6deg) translate(6px, 6px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }

.clip { position: absolute; top: -44px; left: calc(50% - 17px); width: 34px; height: 102px; overflow: visible; filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.35)); }
.clip-back { z-index: -2; }
.clip-front { z-index: 2; }

.paper-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px dashed #CFC8B8; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #8A8474; }
.paper .wl-label { color: #1C1E1B; }
.paper .wl-row input { background: #FFFDF8; border-color: #D8D1C1; color: #1C1E1B; box-shadow: inset 0 1px 2px rgba(60,50,30,.08); }
.paper .wl-row input::placeholder { color: #ABA593; }
.paper .wl-row input:focus { border-color: #3B7BEA; box-shadow: 0 0 0 4px rgba(59,123,234,.15); }
.paper .wl-row .btn-dark { background: linear-gradient(180deg, #34372F 0%, #121412 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #121412, 0 6px 14px -6px rgba(0,0,0,.5); }
.paper .wl-error { color: #B3392D; }
.paper .wl-os legend { color: #6F6A5C; }
.paper .wl-os span { background: #FFFDF8; border-color: #D8D1C1; color: #1C1E1B; }
.paper .wl-os span::before { border-color: #B9B2A1; }
.paper .wl-os input:checked + span { background: #1C1E1B; border-color: #1C1E1B; color: #FBF9F3; }
.paper .wl-os input:checked + span::before { border-color: #FBF9F3; background-color: #FBF9F3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1E1B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.paper .wl-fine { color: #7D7868; }
.paper .wl-done h3 { color: #1C1E1B; }
.paper .wl-done p { color: #6F6A5C; }
.paper .wl-done b { color: #1C1E1B; }
.paper .stamp { width: auto; height: auto; padding: 8px 14px; border-radius: 6px; background: none; border: 2px solid #3B7BEA; color: #3B7BEA; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-6deg); margin-bottom: 18px; opacity: .9; }

@media (max-width: 760px) {
  .wl-card.paper, .wl-card.paper.reveal.in { transform: rotate(-.6deg); padding: 36px 20px 26px; }
  .clip { left: auto; right: 30px; top: -38px; width: 28px; height: 84px; }
  .paper-head span:last-child { display: none; }
  .paper::after { transform: rotate(1.6deg) translate(4px, 5px); }
}

/* ---------- night sky: clouds pre-rendered to an image (cheap in every browser) ---------- */
.scenery { background: #08090B url("img/hero-sky.jpg") center bottom / cover no-repeat; }
.scenery .land { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-scene { overflow: hidden; background: #08090B url("img/cta-sky.jpg") center bottom / cover no-repeat; }
.cta-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(rgba(8,9,11,0), #08090B); }

/* ---------- MacBook-style frame around the hero demo ---------- */
.laptop { position: relative; }
.lid {
  position: relative; padding: 1.5%; border-radius: clamp(12px, 2.2vw, 28px);
  background: #08090B;
  box-shadow: 0 0 0 1.5px #3A3E46, 0 0 0 3px #121418, inset 0 0 0 1px rgba(255,255,255,.04),
              0 60px 120px -30px rgba(0,0,0,.95), 0 0 140px -30px rgba(125,177,240,.28);
}
.lid .demo { border-radius: clamp(3px, .6vw, 8px); box-shadow: none; }
.notch { position: absolute; z-index: 3; left: 50%; top: 0; width: 12.5%; aspect-ratio: 4.4 / 1; transform: translateX(-50%); background: #08090B; border-radius: 0 0 clamp(5px, .9vw, 12px) clamp(5px, .9vw, 12px); }
.notch::after { content: ""; position: absolute; left: 50%; top: 42%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 35%, #2B3A55, #0B0E14 70%); }
.base {
  position: relative; left: -6%; width: 112%; height: clamp(9px, 1.45vw, 20px);
  background: linear-gradient(180deg, #5A5F69 0%, #33363D 22%, #1E2025 60%, #121316 100%);
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 40px -14px rgba(0,0,0,.95);
}
.hinge { position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); background: linear-gradient(180deg, #17191D, #2A2D33); border-radius: 0 0 10px 10px; }
.product { max-width: 1120px; }
.d-steps { margin-top: 28px; }
@media (max-width: 760px) {
  .base { left: -3%; width: 106%; }
  .lid { padding: 2%; }
  .notch { width: 16%; }
}