/* Styles for tools/pages/index.py only (2026-11-11 redesign: dark stage on top, light trust below).
   The shell links this file on that page alone, so the dark header below touches no other page. */

::selection { background: #f5f5f7; color: #0b0b0e; }

/* The header sits on the dark stage on this page */
.site-header { background: #0b0b0e; border-bottom-color: rgba(255, 255, 255, 0.1); --wm-bg: #0b0b0e; }
.site-header .wordmark { color: #fff; }
.site-nav a { color: #9b9ba1; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }

/* Dark stage */
.stage { background: #0b0b0e; color: #f5f5f7; padding: var(--section) 0; }
.stage .muted { color: #a1a1a6; }
.stage .button { background: #fff; color: #0b0b0e; }
.stage .button:hover { background: #e8e8ed; }
.stage .text-link { color: #f5f5f7; }

/* Hero */
.hero { padding-top: calc(var(--section) + 8px); padding-bottom: 0; overflow: hidden; }
.hero-display { font-size: clamp(42px, 9.6vw, 108px); letter-spacing: -0.042em; line-height: 1.01; }
.hero-lead { margin-top: 22px; max-width: 33em; color: #c7c7cc; }
/* The full stop after "nähtav" is the logo's green active dot. */
.hero-dot { color: #30d158; font-weight: 800; }
.hero .actions { margin-top: 32px; }
.hero-price { margin-top: 14px; font-weight: 600; color: #a1a1a6; }

/* The feed: a slow drifting row of sample graphics. Pauses on hover; prefers-reduced-motion kills it (site.css). */
.marquee { display: flex; margin-top: 64px; padding-bottom: 76px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.m-row { display: flex; align-items: flex-start; gap: 26px; padding-right: 26px; flex: none;
  animation: m-drift 110s linear infinite; }
.marquee:hover .m-row { animation-play-state: paused; }
/* With assets/js/marquee.js the row is driven by script: it can be flung with the mouse or a finger. */
.marquee.is-live { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.marquee.is-live .m-row { animation: none; will-change: transform; }
.marquee.is-live.is-dragging { cursor: grabbing; }
.marquee.is-live img { pointer-events: none; }
@keyframes m-drift { to { transform: translateX(-100%); } }
.m-item { position: relative; flex: none; width: 240px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); }
.chip { position: absolute; top: 10px; right: 10px; z-index: 1;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(10, 10, 12, 0.62); color: #fff;
  font: 600 10px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.m-item:nth-child(odd) { margin-top: 26px; }
.m-reel { width: 196px; }
/* A reel frame presents itself as video, so its footage moves even in the marquee. */
.m-reel .lux-photo { animation: m-reel-zoom 13s ease-in-out infinite alternate; }
@keyframes m-reel-zoom { from { transform: scale(1.02); } to { transform: scale(1.17) translate(2%, -1.5%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; }
  .m-row[aria-hidden="true"] { display: none; }
}

/* Showcase wall */
.wall-band { padding-top: 8px; }
.wall-head { font-size: clamp(32px, 6vw, 56px); letter-spacing: -0.03em; margin-bottom: 0; }
.wall-sub { margin-top: 16px; max-width: 42em; color: #a1a1a6; }
.wall { margin-top: 52px; display: grid; gap: 44px; }
@media (min-width: 900px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; } }
.wall-item { margin: 0; }
.wall-item .fbp, .wall-item .igp, .wall-item .reel-card {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35); }
.wall-note { margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8e8e93; }
@supports (animation-timeline: view()) {
  .wall-item { animation: wall-rise both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes wall-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

/* Problem and solution side by side */
.h-side { font-size: clamp(24px, 3.2vw, 30px); }
.h-side + p { margin-top: 12px; }

/* Price */
.price-figure { margin-top: 20px; font-size: clamp(56px, 10vw, 88px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.price-figure span { font-size: 0.32em; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
.price .lead { margin-top: 16px; }
.included > * { padding: 14px 0; text-wrap: balance; }
@media (min-width: 768px) {
  .price { align-items: start; }
  .included { margin-top: 8px; }
}

/* Steps */
.steps { list-style: none; padding: 0; display: grid; gap: 0; }
.steps li { padding: 20px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n { display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.steps h3 + p { margin-top: 6px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .steps li, .steps li:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* FAQ */
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--ink-2);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus { outline: none; }
.faq summary:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
.faq details p { padding: 0 32px 20px 0; color: var(--ink-2); }

/* Contact: a business card. Dark card on the light band, photo left, contacts as the card's content. */
.vcard { position: relative; max-width: 780px; margin: 0 auto; overflow: hidden;
  background: #0b0b0e; color: #f5f5f7; border-radius: 18px;
  padding: 32px 28px; display: grid; gap: 28px;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.28), 0 3px 12px rgba(0, 0, 0, 0.14); }
.vcard-photo { width: 128px; height: 156px; border-radius: 12px; object-fit: cover; object-position: 50% 18%; }
.vcard-name { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.vcard-role { margin-top: 10px; color: #a1a1a6; max-width: 30em; }
.vcard-links { margin-top: 22px; display: flex; flex-direction: column; }
.vcard-links a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content;
  color: #fff; font-family: var(--font-display); font-size: clamp(19px, 2.6vw, 25px); font-weight: 700;
  letter-spacing: -0.01em; text-decoration: none; }
.vcard-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.vcard-mark { position: absolute; top: 26px; right: 30px;
  font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.04em; color: #6e6e73; }
@media (min-width: 640px) {
  .vcard { grid-template-columns: auto 1fr; align-items: center; padding: 44px 48px; gap: 36px; }
  .vcard-photo { width: 148px; height: 184px; }
}