/* Glimt landing, "Isbre". Polar night, a calm living aurora, and one warm ember for the bål.
   Everything scoped to .glimt-page so the rest of dynni.no is untouched. */
body.glimt-page {
  --ice: #8ccbff;
  --ice-soft: rgba(140, 203, 255, 0.14);
  --ice-glow: rgba(140, 203, 255, 0.35);
  --polar: #0b1117;
  --frost: #eaf2fa;
  --fog: #aeb8c4; /* lightened for legibility over the brighter aurora */
  --ember: rgba(232, 185, 138, 0.22);
  /* One panel fill for every frosted card. 0.76 (was 0.5) is an accessibility floor, not taste: the
     aurora peaks near the top of the viewport, exactly where the hero panel sits, and at 0.5 the grey
     body copy computed to 2.38:1 behind a peak teal curtain, against a 4.5:1 requirement. At 0.76 the
     same worst case is 5.13:1 (body), 9.12:1 (headings) and 5.94:1 (--ice), and the aurora still
     reads through at 24%. */
  --panel: rgba(13, 19, 26, 0.76);
  /* Two voices: JetBrains Mono stays the structural/brand voice (badges, kickers, H1, buttons),
     a humanist sans carries prose so the emotional copy reads warm, not like a terminal log. */
  --font-prose: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Fluid vertical rhythm so sections breathe the same on every width. */
  --section: clamp(4rem, 9vw, 7rem);
  background: var(--polar);
  color: var(--frost);
  /* Form a stacking context so the z-index:-3/-2/-1 background layers paint ABOVE the body's
     own opaque background. Without this, the opaque body background covers the aurora entirely. */
  position: relative;
  z-index: 0;
}
.glimt-page .ice { color: var(--ice); }
/* Prose voice: humanist sans for readable, warm body copy (structure stays mono). A soft dark
   text-shadow keeps grey copy legible where it sits over the brighter aurora. */
.glimt-page .lede,
.glimt-page .section-lede,
.feature-text p,
.steps p,
.safe-grid p,
.priv-card p,
.ritual-card p,
.faq-item p,
.maker-text p,
.glimt-price p,
.pull-quote p,
.glimt-cta > p,
.note,
.waitlist-note { font-family: var(--font-prose); text-shadow: 0 1px 14px rgba(8, 13, 18, 0.55); }

/* Fixed full-bleed background layers (behind everything, never over interactive UI). */
.aurora-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; }
.grain-layer {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--grain); background-size: 128px 128px;
  opacity: 0.045; mix-blend-mode: screen;
}
.vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 28%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

.glimt-page main { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
/* Keep content clear of the 100px fixed sidebar on narrow/medium desktop, where the centered
   1120px box would otherwise slide under it. Above ~1320px it clears naturally, so stay centered. */
@media (min-width: 769px) and (max-width: 1320px) {
  .glimt-page main { padding-left: calc(100px + 1.5rem); }
}

/* ---------- SKIP LINK + FOCUS ---------- */
/* The whole page had exactly two focus rules before, both on the waitlist. Keyboard users could tab
   through the nav, the language switch, the look pills and the film slider with no visible ring at all. */
.glimt-page .skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ice); color: #00203a; font-weight: 700; text-decoration: none;
  padding: 0.7rem 1.1rem; border-radius: var(--radius);
}
.glimt-page .skip-link:focus { top: 1rem; }
.glimt-page a:focus-visible,
.glimt-page button:focus-visible,
.glimt-page input:focus-visible {
  outline: 2px solid var(--ice); outline-offset: 3px;
}
/* The mobile menu is a <label> driving a display:none checkbox, so on a phone the whole nav was
   unreachable by keyboard: a display:none input takes no focus. Scoped to this page, hide the
   checkbox visually instead of removing it from the tab order, and draw the ring on the button it
   controls. The sibling selectors in header.css are untouched, so the menu opens exactly as before. */
.glimt-page .menu-toggle {
  display: block; position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; padding: 0; pointer-events: none;
}
.glimt-page .menu-toggle:focus-visible + .hamburger-btn { outline: 2px solid var(--ice); outline-offset: 3px; }
/* Screen-reader-only label (the waitlist input has a placeholder, which is not a label). */
.glimt-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- SHARED PANEL ---------- */
.glimt-hero-copy,
.glimt-steps,
.glimt-safety,
.feature-text,
.ritual-card,
.glimt-privacy,
.glimt-maker,
.glimt-price,
.glimt-faq,
.glimt-cta {
  background: var(--panel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

/* ---------- HERO ---------- */
.glimt-hero { padding: 5.5rem 0 4rem; }
.glimt-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; perspective: 1100px; }
.glimt-hero-copy { border-radius: 24px; padding: 2rem 2.2rem; }

/* Dawn reveal: children start hidden, .lit (added on load) settles them in, staggered. */
.hero-dawn > * { opacity: 0; transform: translateY(16px); }
.hero-dawn.lit > * { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-dawn.lit > *:nth-child(1) { transition-delay: 0.05s; }
.hero-dawn.lit > *:nth-child(2) { transition-delay: 0.18s; }
.hero-dawn.lit > *:nth-child(3) { transition-delay: 0.31s; }
.hero-dawn.lit > *:nth-child(4) { transition-delay: 0.44s; }
.hero-dawn.lit > *:nth-child(5) { transition-delay: 0.57s; }
.hero-dawn.lit > *:nth-child(6) { transition-delay: 0.7s; }

.invite-banner {
  display: inline-block; margin-bottom: 0.9rem; padding: 0.5rem 0.95rem; border-radius: 999px;
  background: var(--ice-soft); border: 1px solid var(--glass-border); font-size: 0.9rem; color: var(--fog);
}
/* Only appears for invite links (JS drops [hidden] when ?ref=<username> is present); a normal visitor
   never sees it. Needed because the base .invite-banner display would otherwise override [hidden]. */
.invite-banner[hidden] { display: none; }
.invite-banner strong { color: var(--ice); }
.glimt-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 0.35rem 0.7rem 0.35rem 0.4rem; border: 1px solid var(--glass-border);
  border-radius: 999px; background: var(--ice-soft);
}
.glimt-badge img { width: 22px; height: 22px; border-radius: 6px; }

.glimt-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 1.4rem 0 1.2rem; letter-spacing: -0.025em; }
.glimt-hero h1 .h1-line { display: block; text-wrap: balance; }
.hero-dawn.lit h1 .ice { animation: bloom 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
@keyframes bloom {
  0% { text-shadow: 0 0 0 rgba(140, 203, 255, 0); }
  45% { text-shadow: 0 0 26px rgba(140, 203, 255, 0.45); }
  100% { text-shadow: 0 0 0 rgba(140, 203, 255, 0); } /* bloom, then fully settle (no permanent halo) */
}
.glimt-hero .lede { font-size: 1.15rem; line-height: 1.6; color: var(--fog); max-width: 32rem; }

/* One primary action (the beta is genuinely open), one quiet secondary for Android and everyone else. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; margin-top: 1.8rem; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--ice); color: #00203a; border: none; border-radius: var(--radius);
  padding: 0.9rem 1.35rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--ice-glow); filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  color: var(--ice); font-size: 0.9rem; text-decoration: none;
  border-bottom: 1px solid var(--ice-soft); padding-bottom: 2px;
}
.btn-ghost:hover { border-bottom-color: var(--ice); }
.hero-note { color: var(--fog); font-size: 0.85rem; margin-top: 1.2rem; font-family: var(--font-prose); }
.hero-note a { color: var(--ice); }

/* Waitlist */
.waitlist { display: flex; gap: 0.6rem; max-width: 30rem; flex-wrap: wrap; margin-top: 1.6rem; }
.waitlist input {
  flex: 1 1 14rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius);
  color: var(--frost); padding: 0.9rem 1rem; font-family: var(--font-body); font-size: 1rem;
}
.waitlist input:focus-visible { border-color: var(--ice); }
.waitlist button {
  background: var(--ice); color: #00203a; border: none; border-radius: var(--radius); padding: 0.9rem 1.4rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.waitlist button:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--ice-glow); filter: brightness(1.05); }
.waitlist button:active { transform: translateY(1px); }
.waitlist.busy button { opacity: 0.6; pointer-events: none; }
.waitlist.done input, .waitlist.done button { opacity: 0.5; }
.waitlist-note { color: var(--fog); font-size: 0.85rem; margin-top: 0.9rem; min-height: 1.2em; }

.store-badges { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; justify-content: center; }
.store-badge {
  font-size: 0.8rem; color: var(--fog); border: 1px solid var(--glass-border); border-radius: 8px;
  padding: 0.5rem 0.8rem; display: inline-flex; gap: 0.5rem; align-items: center;
}

/* ---------- PHONE MOCK ---------- */
.glimt-hero-phone { display: flex; justify-content: center; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.phone {
  position: relative; width: 250px; aspect-ratio: 9 / 19.5; border-radius: 38px;
  background: linear-gradient(160deg, #1a1f26, #0c0f13); border: 1px solid var(--glass-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px var(--ice-soft); padding: 10px;
}
/* One-shot entrance only, then the phone comes to rest (an endless float reads restless, not calm). */
.hero-dawn.lit .phone, .glimt-hero-phone .glimt-shot { animation: floatup 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
@keyframes floatup { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.phone--sm { width: 210px; }
.phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; border-radius: 999px; background: #000; z-index: 2; }
/* A real app screenshot shown whole (no crop). Matches the .phone frame EXACTLY (10px bezel, same body
   + radius), so a real-screenshot mockup has the identical edge thickness as every drawn mockup: they
   read as the same device. The shot already has the status bar + Dynamic Island + UI baked in. */
.glimt-shot { width: 210px; aspect-ratio: 9 / 19.5; border-radius: 38px; overflow: hidden; padding: 10px; background: linear-gradient(160deg, #1a1f26, #0c0f13); border: 1px solid var(--glass-border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px var(--ice-soft); }
.glimt-shot--lg { width: 260px; }
.glimt-shot > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.phone-screen {
  position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(140, 203, 255, 0.18), transparent 60%), linear-gradient(180deg, #0e141b, #060a0e);
}
.phone-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(140, 203, 255, 0.035) 14px 28px);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

/* Bål campfire (primary signature), lives inside a .phone-screen. The one warm thing against
   the cold polar palette: a little fire with crossed logs, flickering flames and a soft glow,
   ringed by glacier-blue friend dots leaning in. */
.campfire { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); opacity: 0; }
.show .campfire { opacity: 1; transition: opacity 0.7s ease 0.3s; }
.fire-glow { position: absolute; left: 50%; bottom: 6px; width: 150px; height: 150px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 178, 102, 0.5), rgba(232, 150, 90, 0.16) 42%, transparent 70%); filter: blur(8px); }
.show .fire-glow { animation: fireglow 4s ease-in-out 0.7s infinite; }
@keyframes fireglow { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } }
.logs { position: absolute; bottom: 12px; left: 50%; width: 64px; height: 12px; transform: translateX(-50%); }
.logs::before, .logs::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 60px; height: 9px; border-radius: 5px; background: linear-gradient(#5a3d2b, #34221597); box-shadow: inset 0 1px 0 rgba(255, 180, 120, 0.25); }
.logs::before { transform: translateX(-50%) rotate(17deg); }
.logs::after { transform: translateX(-50%) rotate(-17deg); }
.flame { position: absolute; bottom: 16px; left: 50%; border-radius: 0 50% 50% 50%; }
.flame.outer { width: 46px; height: 46px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, #ff7a2d, #ffb74d); box-shadow: 0 0 20px rgba(255, 150, 80, 0.6); }
.flame.inner { width: 26px; height: 26px; bottom: 26px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, #ffd27a, #fff2c0); }
.show .flame.outer { animation: flicker 1.7s ease-in-out 0.7s infinite; }
.show .flame.inner { animation: flicker 1.2s ease-in-out 0.8s infinite; }
@keyframes flicker {
  0%, 100% { transform: translateX(-50%) rotate(45deg) scale(1); }
  25% { transform: translateX(-53%) rotate(45deg) scale(1.06, 0.95); }
  50% { transform: translateX(-50%) rotate(45deg) scale(0.96, 1.05); }
  75% { transform: translateX(-47%) rotate(45deg) scale(1.04, 0.97); }
}
.ember-ring { position: absolute; inset: 0; }
.ember-ring span {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ice); box-shadow: 0 0 8px var(--ice-glow); opacity: 0; transform: translate(-50%, -50%) scale(0.4);
}
.show .ember-ring span { opacity: 0.85; transform: translate(var(--x), var(--y)) scale(1); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); animation: dotbreathe 3.6s ease-in-out 1.4s infinite; }
/* breathe keeps each dot's place (--x/--y) and just gently pulses, so they read as living
   presences leaning toward the fire. Different durations desync them naturally. */
@keyframes dotbreathe { 0%, 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0.8; } 50% { transform: translate(var(--x), var(--y)) scale(1.22); opacity: 1; } }
.ember-ring span:nth-child(1) { --x: -64px; --y: -34px; transition-delay: 0.2s; animation-duration: 3.4s; }
.ember-ring span:nth-child(2) { --x: 60px; --y: -38px; transition-delay: 0.29s; animation-duration: 4.1s; }
.ember-ring span:nth-child(3) { --x: 72px; --y: 32px; transition-delay: 0.38s; animation-duration: 3.7s; }
.ember-ring span:nth-child(4) { --x: -70px; --y: 40px; transition-delay: 0.47s; animation-duration: 4.4s; }
.ember-ring span:nth-child(5) { --x: 2px; --y: 70px; transition-delay: 0.56s; animation-duration: 3.9s; }

/* ---------- SECTION FURNITURE ---------- */
.glimt-page section > h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); margin: 0 0 0.9rem; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.feature-kicker { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); margin-bottom: 0.6rem; }
.section-lede { color: var(--fog); font-size: 1.1rem; line-height: 1.6; max-width: 44rem; }
.note { color: var(--fog); font-size: 0.88rem; line-height: 1.6; margin-top: 1.6rem; padding-left: 0.9rem; border-left: 2px solid var(--ice-soft); }
.note a { color: var(--ice); }

/* ---------- SLIK FUNGERER DET ---------- */
.glimt-steps { margin: var(--section) 0 0; padding: 2.4rem 2.2rem; border-radius: 22px; }
.steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.steps h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.steps p { color: var(--fog); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.step-n {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 0.8rem;
  border-radius: 50%; border: 1px solid var(--ice-soft); background: var(--ice-soft);
  color: var(--ice); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700;
}

/* ---------- TRYGT FOR BORN OG UNGE ---------- */
.glimt-safety { margin: var(--section) 0 0; padding: 2.4rem 2.2rem; border-radius: 22px; }
.pull-quote { margin: 1.8rem 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--ice); background: var(--ice-soft); border-radius: 0 14px 14px 0; }
.pull-quote p { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.5; }
.pull-quote cite { display: block; margin-top: 0.7rem; font-style: normal; font-size: 0.8rem; color: var(--fog); }
.pull-quote cite a { color: var(--ice); }
.safe-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1.8rem; }
.safe-grid h3 { font-size: 1rem; margin: 0 0 0.35rem; color: var(--frost); }
.safe-grid p { color: var(--fog); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* ---------- FEATURES ---------- */
.glimt-features { padding: var(--section) 0 0; display: flex; flex-direction: column; gap: 3rem; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.feature-text { border-radius: 20px; padding: 1.8rem 1.9rem; }
.feature-text h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 0.8rem; letter-spacing: -0.02em; line-height: 1.15; }
.feature-text p { color: var(--fog); font-size: 1.05rem; line-height: 1.6; max-width: 32rem; }
.feature-text p + p { margin-top: 0.9rem; }
.feature-phone { display: flex; justify-content: center; }
/* reveal */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-up.show { opacity: 1; transform: none; }

/* The ritual, spelled out: the five ways to answer, the no-streak promise, presence, transcription. */
.ritual-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ritual-card { border-radius: 18px; padding: 1.5rem 1.6rem; }
.ritual-card--wide { grid-column: 1 / -1; }
.ritual-card h3 { font-size: 1.05rem; margin: 0 0 0.7rem; }
.ritual-card p { color: var(--fog); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.ritual-card p + p { margin-top: 0.8rem; }
.modes { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
/* A scoping line sits above the mode list ("once a week you pick the shape"), so the list needs the same
   breathing room after a paragraph that a paragraph gets after a paragraph. */
.ritual-card p + .modes { margin-top: 0.8rem; }
.modes li { color: var(--fog); font-family: var(--font-prose); font-size: 0.95rem; }
.modes b { color: var(--frost); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.03em; margin-right: 0.5rem; }

/* Film-look showcase: full width (text centered on top, the before/after slider below) so the looks
   are large and the flat-vs-look contrast is obvious. */
.feature--film { display: block; text-align: center; }
.feature--film .feature-text { max-width: 640px; margin: 0 auto 2.75rem; }
.feature--film .feature-text p { max-width: none; }
/* Interactive before/after slider: drag to reveal RAW vs the real look on the SAME image, pills to switch
   look. Images are pre-rendered offline through the ACTUAL derived LUTs (fjord/glor/kol) + grain + vignette,
   so this is the genuine app look, not a CSS fake. Signature Fjord loads first. */
.film-slider { max-width: 440px; margin: 0 auto; }
/* pan-y, not none: this is a tall block on a phone, and touch-action:none swallowed every vertical
   swipe that started inside it, trapping the page. pan-y lets scrolling through, horizontal drags
   still reach the range. */
.film-stage { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); touch-action: pan-y; }
.film-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-before { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 48% 0 0); }
.film-line { position: absolute; top: 0; bottom: 0; left: 52%; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.85); z-index: 2; pointer-events: none; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
.film-knob { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.film-knob::before, .film-knob::after { content: ""; position: absolute; top: 50%; margin-top: -5px; border: 5px solid transparent; }
.film-knob::before { left: 6px; border-right-color: #1a2430; }
.film-knob::after { right: 6px; border-left-color: #1a2430; }
/* A real <input type=range> covers the whole stage so the comparison is keyboard- and AT-operable.
   It used to be opacity:0, which also hid its focus ring: a keyboard user landed on an invisible
   control with no indication at all. Now it is transparent instead of invisible, so the focus ring
   below actually paints. It is drawn INSET because the stage clips (overflow:hidden). */
.film-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 3; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent; border: none;
}
/* Explicit pixel size on the thumb: a percentage height collapses to zero in some WebKit builds,
   which would leave nothing to drag. */
.film-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; background: transparent; border: none; }
.film-range::-moz-range-thumb { width: 34px; height: 34px; background: transparent; border: none; border-radius: 0; }
.film-range::-moz-range-track { background: transparent; border: none; }
/* Deliberately more specific than the page-wide `.glimt-page input:focus-visible` outline, which the
   stage's overflow:hidden would clip away to nothing. An inset shadow cannot be clipped. */
.glimt-page .film-range:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ice), inset 0 0 0 6px rgba(11, 17, 23, 0.85); }
.film-tag { position: absolute; bottom: 12px; z-index: 2; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(11, 17, 23, 0.68); padding: 4px 8px; border-radius: 6px; pointer-events: none; }
.film-tag--l { left: 12px; }
.film-tag--r { right: 12px; }
.film-pills { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.film-pill { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.film-pill.is-active { background: var(--ice); color: #0b1117; border-color: var(--ice); }

/* ---------- DITT, IKKJE VÅRT ---------- */
.glimt-privacy { margin: var(--section) 0 0; padding: 2.4rem 2.2rem; border-radius: 22px; }
.priv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2rem; margin-top: 1.8rem; }
.priv-card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.priv-card p { color: var(--fog); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* ---------- KVEN STÅR BAK ---------- */
.glimt-maker { margin: var(--section) 0 0; padding: 2rem 2.2rem; border-radius: 22px; display: grid; grid-template-columns: 180px 1fr; gap: 2rem; align-items: center; }
.maker-photo img {
  width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  /* The portrait is a tall 1200x2130 with the face high in the frame; pull the crop up to it. */
  object-position: 50% 17%;
  border: 1px solid var(--glass-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.maker-text h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.8rem; letter-spacing: -0.02em; }
.maker-text p { color: var(--fog); font-size: 1rem; line-height: 1.65; }
.maker-text p + p { margin-top: 0.8rem; }
.maker-text a { color: var(--ice); }

/* ---------- KVA DET KOSTAR ---------- */
.glimt-price { margin: var(--section) 0 0; padding: 2.4rem 2.2rem; border-radius: 22px; }
.glimt-price p { color: var(--fog); font-size: 1.05rem; line-height: 1.65; max-width: 46rem; }
.glimt-price p + p { margin-top: 0.9rem; }
.glimt-price strong { font-weight: 700; }

/* ---------- OFTE SPURT ---------- */
.glimt-faq { margin: var(--section) 0 0; padding: 2.4rem 2.2rem; border-radius: 22px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2rem; margin-top: 1.6rem; }
.faq-item h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.faq-item p { color: var(--fog); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* ---------- FINAL CTA ---------- */
.glimt-cta { text-align: center; max-width: 40rem; margin: var(--section) auto 0; padding: 2.6rem 2.2rem; border-radius: 24px; }
.glimt-cta > p { color: var(--fog); margin-bottom: 1.6rem; }
.cta-actions { margin: 0 0 0.4rem; }
.glimt-cta .waitlist { margin: 1.4rem auto 0; justify-content: center; }
.glimt-cta .waitlist-note { text-align: center; max-width: 30rem; margin-left: auto; margin-right: auto; }

.glimt-footer-links { margin-top: 0.5rem; font-size: 0.85rem; }
.glimt-footer-links a { color: var(--fog); }
.glimt-footer-links a:hover { color: var(--ice); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .steps, .safe-grid, .ritual-notes { grid-template-columns: repeat(2, 1fr); }
  .ritual-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .glimt-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .glimt-hero-phone { order: -1; }
  .feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-phone { order: -1; }
  .priv-grid, .faq-grid { grid-template-columns: 1fr; }
  .glimt-maker { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .maker-text h2 { margin-top: 0.4rem; }
}
@media (max-width: 620px) {
  .steps, .safe-grid, .ritual-notes { grid-template-columns: 1fr; }
  .glimt-steps, .glimt-safety, .glimt-privacy, .glimt-price, .glimt-faq, .glimt-cta, .glimt-hero-copy { padding: 1.8rem 1.4rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
}

/* ---------- NO JAVASCRIPT: show everything at rest ---------- */
/* The hero copy and every [data-reveal] block start hidden and are lit by JS. With JS off nothing
   ever adds .lit or .show, so the page would render almost blank. The inline <head> script sets
   .js on <html>, so its absence means "no JS": settle everything into its final state. */
html:not(.js) .hero-dawn > *,
html:not(.js) .reveal-up { opacity: 1; transform: none; }
html:not(.js) .campfire { opacity: 1; }
html:not(.js) .ember-ring span { opacity: 0.85; transform: translate(var(--x), var(--y)); }
html:not(.js) .glimt-hero-phone .glimt-shot { animation: none; opacity: 1; }

/* ---------- REDUCED MOTION: everything static, every meaning preserved ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-dawn > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-dawn.lit h1 .ice, .hero-dawn.lit .phone, .glimt-hero-phone .glimt-shot { animation: none !important; opacity: 1 !important; }
  .campfire { opacity: 1; }
  .show .fire-glow, .show .flame.outer, .show .flame.inner { animation: none !important; }
  .show .ember-ring span { animation: none !important; transition: none; opacity: 0.85; transform: translate(var(--x), var(--y)); }
  .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .waitlist button, .btn-primary { transition: none !important; }
}