/* ============================================================
   AnkerSepp – Custom CSS
   Nautical Luxury · Navy · Teak · Signal Orange
   ============================================================ */

/* Fonts are loaded via <link> in base.html – no @import here, it would
   fetch the same stylesheet a second time and block rendering twice. */

:root {
  --navy:       #0a1f44;
  --navy-light: #122a5e;
  --navy-dark:  #060f22;
  --orange:     #f4631e;
  --orange-dim: #c04d16;
  --teal:       #0097a7;
  --white:      #f8f5f0;
  --cream:      #ede8df;
  --teak:       #b5813a;
  --teak-light: #d4a55a;
  --text-muted: #8a9ab5;
  --card-bg:    rgba(255,255,255,0.04);
  --border:     rgba(255,255,255,0.08);

  --font-display: 'Playfair Display', 'Noto Serif Display', Georgia, serif;
  --font-body:    'DM Sans', 'Manrope', sans-serif;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Keeps #faq and #waitlist from landing underneath the fixed topbar.
     --topbar-h is measured in main.js; the fallback covers the navbar alone. */
  scroll-padding-top: calc(var(--topbar-h, 5rem) + 1.5rem);
}

body {
  font-family: var(--font-body);
  background: var(--navy-dark);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- Icons ---- */
/* Sized in em and filled with currentColor, so an icon behaves exactly like
   the font glyph it replaces: it takes the font-size and the colour of
   whatever contains it, and no rule that used to style those had to change. */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex: none;
}

/* Holds the <symbol> definitions the icons reference. Not display:none --
   Safari has been known to drop <use> references into a container hidden that
   way; taking it out of flow at zero size is the reliable equivalent. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Utility ---- */
.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}

.section-title span:not([translate]) {
  color: var(--teak-light);
  font-style: italic;
}

.divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--teak-light));
  border-radius: 2px;
  margin: 1.5rem 0 2rem;
}

/* ---- Navbar ---- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1rem 2rem;
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

.navbar.scrolled {
  background: rgba(6, 15, 34, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border);
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--white) !important;
}

.navbar-brand .brand-dot {
  color: var(--orange);
}

/* The language menu: a <details> element, so it works without JavaScript.
   main.js only adds closing on an outside click and on Escape. */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:focus-visible { outline: 2px solid var(--teak-light); outline-offset: 2px; }
.lang-caret {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.lang-menu[open] .lang-caret { transform: translateY(1px) rotate(225deg); }

.lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 1100;
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--navy-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  color: rgba(248, 245, 240, 0.8);
  font-size: 0.9rem;
  text-decoration: none;
}
.lang-option:hover, .lang-option:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--white); outline: none; }
.lang-option.active { color: var(--orange); }
.lang-code {
  width: 1.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.lang-option.active .lang-code { color: var(--orange); }

.lang-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn:hover { color: var(--white); border-color: var(--border); }
.lang-btn.active { color: var(--orange); border-color: var(--orange); }

/* ---- Top bar: hint + navbar ---- */
/* Both live in one fixed stack. The navbar therefore sits below the hint at
   whatever height its text happens to wrap to -- no height constant to guess,
   and it holds for every language and every viewport. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
.topbar .navbar { position: static; }

.lang-hint {
  display: flex;
  align-items: center;
  background: rgba(6, 15, 34, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(212, 165, 90, 0.35);
}

.lang-hint-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: rgba(248, 245, 240, 0.85);
}

.lang-hint-icon { color: var(--teak-light); flex: none; font-size: 1rem; }
.lang-hint-text { flex: 1 1 auto; min-width: 0; }

.lang-hint-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--teak);
  border-radius: 50px;
  color: var(--teak-light);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.lang-hint-action:hover { background: var(--teak); color: var(--navy-dark); }
.lang-hint-action:focus-visible,
.lang-hint-close:focus-visible { outline: 2px solid var(--teak-light); outline-offset: 2px; }

.lang-hint-close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.lang-hint-close:hover { color: var(--white); background: rgba(255,255,255,0.08); }

@media (max-width: 575px) {
  .lang-hint-inner { flex-wrap: wrap; gap: 0.5rem 0.6rem; font-size: 0.82rem; }
  /* 44px: the minimum comfortable touch target. */
  .lang-hint-close { width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.5rem -0.5rem 0; }
  .lang-hint-text { flex: 1 1 100%; order: 1; }
  .lang-hint-icon { order: 0; }
  .lang-hint-close { order: 0; margin-left: auto; }
  .lang-hint-action { order: 2; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg picture,
.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-bg img,
.hero-video {
  object-fit: cover;
  object-position: center 30%;
}

.hero-bg img {
  transform: scale(1.05);
  animation: heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}

/* The clip lies over the still and fades in only once it is actually playing,
   so a slow connection shows the still rather than a black box. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero-video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg img { animation: none; transform: none; }
  /* The clip is not hidden here: reduced motion means nothing should move
     without being asked for, not that the film is unavailable. It simply does
     not start on its own -- the play button below offers it. */
}

.hero-play {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(248, 245, 240, 0.35);
  border-radius: 50px;
  background: rgba(6, 15, 34, 0.55);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.hero-play:hover { background: rgba(6, 15, 34, 0.8); border-color: var(--teak); }
.hero-play:focus-visible { outline: 2px solid var(--teak-light); outline-offset: 3px; }
.hero-play-icon { color: var(--teak-light); font-size: 0.75rem; line-height: 1; }

@media (max-width: 575px) {
  .hero-play { right: 1rem; bottom: 1rem; font-size: 0.8rem; padding: 0.55rem 1rem; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(6, 15, 34, 0.85) 0%,
    rgba(10, 31, 68, 0.65) 50%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 8rem 0 5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(244, 99, 30, 0.15);
  border: 1px solid rgba(244, 99, 30, 0.4);
  border-radius: 50px;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s ease both;
}

.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: pulse 1.5s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--white);
  animation: fadeInUp 0.8s 0.1s ease both;
}
.highlight {
  color: var(--teak-light);
  font-style: italic;
}

.hero-title .highlight {
  /* kept for specificity in case hero-title needs different behaviour */
  color: var(--teak-light);
  font-style: italic;
}

.hero-brand { display: block; }

.hero-h1-line {
  display: block;
  margin-top: 1rem;
  max-width: 19ch;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--teak-light);
}

.hero-tagline {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 300;
  color: rgba(248,245,240,0.82);
  margin-top: 1.25rem;
  max-width: 520px;
  animation: fadeInUp 0.8s 0.2s ease both;
}

.hero-cta {
  margin-top: 2.5rem;
  animation: fadeInUp 0.8s 0.3s ease both;
}

.btn-primary-custom {
  background: linear-gradient(135deg, var(--orange), var(--orange-dim));
  color: var(--white);
  border: none;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 8px 28px rgba(244, 99, 30, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(244, 99, 30, 0.5);
  color: var(--white);
}

.btn-outline-custom {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-outline-custom:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  color: var(--white);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: fadeIn 1s 1s ease both;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  animation: scrollDrop 1.8s ease infinite;
}

@keyframes scrollDrop {
  0%   { opacity: 1; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* ---- Product Section ---- */
.product-section {
  background: var(--navy-dark);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.product-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,151,167,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.product-image-wrapper {
  position: relative;
}

.product-image-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--border),
    0 40px 80px rgba(0,0,0,0.5),
    0 0 60px rgba(0,151,167,0.1);
}

.product-image-frame img {
  width: 100%;
  /* The img carries width/height attributes so the browser can reserve the
     right box before the file arrives. Without height:auto the height
     attribute wins as a presentational hint and squashes the picture. */
  height: auto;
  border-radius: 16px;
  transition: transform 0.6s ease;
}

.product-image-frame:hover img {
  transform: scale(1.03);
}

.product-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(0,151,167,0.15), transparent 70%);
  pointer-events: none;
  border-radius: 24px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.feature-item:hover {
  border-color: rgba(0,151,167,0.3);
  background: rgba(0,151,167,0.05);
  transform: translateX(4px);
}

.feature-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, rgba(0,151,167,0.2), rgba(0,151,167,0.05));
  border: 1px solid rgba(0,151,167,0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--teal);
}

.feature-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.feature-text span:not([translate]) {
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* ---- How It Works ---- */
.how-section {
  background: var(--navy);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.how-section::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(244,99,30,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.step-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  position: relative;
}

.step-number {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, rgba(190, 178, 159, 0.5), rgba(181,129,58,0.5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.step-icon-circle {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(244,99,30,0.15), rgba(244,99,30,0.03));
  border: 1px solid rgba(244,99,30,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 1.25rem;
  transition: all 0.3s ease;
}

.step-card:hover .step-icon-circle {
  background: linear-gradient(135deg, rgba(244,99,30,0.3), rgba(244,99,30,0.1));
  border-color: var(--orange);
  transform: scale(1.1);
}

.step-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.step-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.step-connector {
  position: absolute;
  top: 50%;
  right: -10%;
  width: 20%;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ---- Waitlist Section ---- */
.waitlist-section {
  background: var(--navy-dark);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.waitlist-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(10,31,68,0.8) 0%, rgba(244,99,30,0.04) 50%, transparent 70%);
  pointer-events: none;
}

.waitlist-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.waitlist-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--teak-light), var(--teal));
}

.waitlist-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.form-label-custom {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-control-custom {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  padding: 0.8rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  width: 100%;
  transition: all 0.2s ease;
  outline: none;
}

.form-control-custom::placeholder { color: rgba(138,154,181,0.5); }

.form-control-custom:focus {
  border-color: var(--teal);
  background: rgba(0,151,167,0.05);
  box-shadow: 0 0 0 3px rgba(0,151,167,0.12);
}

.form-control-custom:focus-visible { outline: none; }

.success-message {
  text-align: center;
  padding: 2rem;
  animation: fadeInUp 0.5s ease;
}

.success-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  animation: successPop 0.5s ease;
}

@keyframes successPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.alert-custom {
  background: rgba(244,99,30,0.1);
  border: 1px solid rgba(244,99,30,0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: #f4a88e;
  margin-bottom: 1rem;
}

/* ---- Footer ---- */
.footer {
  background: var(--navy-dark);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-link {
  color: var(--text-muted);
  font-size: 0.88rem;
  transition: color 0.2s;
}

.footer-link:hover { color: var(--white); }

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: rgba(138,154,181,0.5);
}

/* ---- Impressum ---- */
.impressum-page {
  padding: 8rem 0 5rem;
  min-height: 100vh;
}

.impressum-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3rem;
  max-width: 700px;
}

.impressum-card p, .impressum-card address {
  color: rgba(248,245,240,0.75);
  font-size: 0.95rem;
  line-height: 1.8;
  font-style: normal;
}

/* ---- Animations ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .step-connector { display: none; }
  .waitlist-card { padding: 2rem 1.5rem; }
  .hero-title { font-size: 3rem; }
}

/* ---- FAQ ---- */
.faq-section { background: var(--navy-dark); padding: 6rem 0; }

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0;
}
.faq-item:first-of-type { border-top: 1px solid var(--border); }

.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--white);
  transition: color 0.25s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--teak-light); }
.faq-question::after {
  content: '+';
  margin-left: auto;
  flex: none;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--teak);
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-question::after { content: '−'; }
.faq-question:focus-visible { outline: 2px solid var(--teak-light); outline-offset: 3px; }

.faq-answer {
  padding: 0 2.5rem 1.35rem 0;
  max-width: 68ch;
  color: rgba(248, 245, 240, 0.7);
  font-size: 0.97rem;
  line-height: 1.7;
}

/* ---- Consent checkbox ---- */
.consent-row { display: flex; align-items: flex-start; gap: 0.7rem; }

.consent-box {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--orange);
  cursor: pointer;
}
.consent-box:focus-visible { outline: 2px solid var(--teak-light); outline-offset: 2px; }

.consent-label {
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgba(248, 245, 240, 0.65);
  cursor: pointer;
}
.consent-label a { color: var(--teal); text-decoration: underline; }
.consent-label a:hover { color: var(--teak-light); }

/* ---- Legal and about pages ---- */
.legal-page { padding: 10rem 0 6rem; background: var(--navy-dark); }

.legal-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.25rem;
  margin-top: 2rem;
  color: rgba(248, 245, 240, 0.72);
  font-size: 0.96rem;
  line-height: 1.75;
}
.legal-card > * + * { margin-top: 1rem; }
.legal-card a { color: var(--teal); }
.legal-card a:hover { text-decoration: underline; }
.legal-card address { font-style: normal; color: rgba(248, 245, 240, 0.85); }
.legal-card strong { color: var(--white); }
.legal-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  color: var(--teak-light);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

.lead-paragraph {
  font-size: 1.08rem;
  color: rgba(248, 245, 240, 0.88);
  border-left: 2px solid var(--teak);
  padding-left: 1.15rem;
}

.legal-h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--teak-light);
  margin-top: 2.25rem !important;
  margin-bottom: 0.65rem;
}

.legal-dl { margin: 0; }
.legal-dl dt {
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.legal-dl dd { margin: 0.2rem 0 0; }

.legal-tablewrap { overflow-x: auto; }
.legal-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 0.89rem; }
.legal-table th, .legal-table td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-table thead th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-table tbody tr:last-child td { border-bottom: none; }

.text-muted-custom { color: var(--text-muted); font-size: 0.9rem; }

@media (max-width: 575px) {
  .legal-page { padding: 8rem 0 4rem; }
  .legal-card { padding: 1.5rem; }
  .faq-section { padding: 4rem 0; }
  .faq-answer { padding-right: 0; }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .footer-links { justify-content: flex-start; }
}

/* ── In real use: the prototype clips ──────────────────────────────────────
   Three columns: the one landscape clip spans the whole first row, the three
   upright ones share the second. Rather than crop either shape into the
   other's frame, each frame keeps the ratio of its footage.

   The grid is capped at the width where both rows come out the same height:
   a full-width 16:9 frame is W x 9/16 tall, a third-width 9:16 frame is
   (W - 2 gaps) / 3 x 16/9, and the two meet at W = 945px with 24px gaps
   (both about 530px tall). The rows then read as one block.

   The control is the hero's, smaller: the clips loop, so they need the same
   way to be stopped (WCAG 2.2.2). */
.clips-section { background: var(--navy); padding: 6rem 0; }

.clips-intro {
  color: rgba(248, 245, 240, 0.65);
  font-size: 0.95rem;
  margin-top: 1.25rem;
}

.clips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  max-width: 945px;
  margin: 0 auto;
}

.clip { margin: 0; min-width: 0; }
.clip--landscape { grid-column: 1 / -1; }

.clip-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--navy-dark);
}
.clip--landscape .clip-frame { aspect-ratio: 16 / 9; }
.clip--portrait .clip-frame { aspect-ratio: 9 / 16; }

.clip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clip-toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(248, 245, 240, 0.35);
  border-radius: 50%;
  background: rgba(6, 15, 34, 0.55);
  backdrop-filter: blur(8px);
  color: var(--teak-light);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.clip-toggle:hover { background: rgba(6, 15, 34, 0.85); border-color: var(--teak); }
.clip-toggle:focus-visible { outline: 2px solid var(--teak-light); outline-offset: 3px; }

.clip-caption {
  margin-top: 1rem;
  color: rgba(248, 245, 240, 0.65);
  font-size: 0.9rem;
  line-height: 1.6;
}

.clip-title {
  display: block;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* On a phone a third of the width is under 120px -- too narrow to see the
   display in the footage or to read a caption under it. The clips stack
   instead, and an upright one is capped so it does not fill the screen. */
@media (max-width: 767px) {
  .clips-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem 0; }
  .clip--portrait { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* ── Guides ────────────────────────────────────────────────────────────────
   Long-form text on the dark ground, so the measure and the leading do the
   work the cards do elsewhere: a column of about 70 characters, generous line
   height, headings in the display face. Tables scroll in their own box on a
   phone instead of pushing the page sideways. */
.guide-page { padding: 9rem 0 6rem; background: var(--navy-dark); }

.nav-text-link {
  color: rgba(248, 245, 240, 0.72);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-text-link:hover { color: var(--white); }

.guide-crumbs {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.guide-crumbs a { color: var(--text-muted); text-decoration: none; }
.guide-crumbs a:hover { color: var(--white); }

.guide-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin: 0.5rem 0 1rem;
}

.guide-lead {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(248, 245, 240, 0.8);
  margin-bottom: 1rem;
}

.guide-byline { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

.guide-toc {
  margin: 2.25rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
}
.guide-toc-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.6rem;
}
.guide-toc ol { margin: 0; padding-left: 1.2rem; columns: 2 16rem; column-gap: 2rem; }
.guide-toc ol.guide-toc-plain { list-style: none; padding-left: 0; }
.guide-toc li { margin: 0.2rem 0; break-inside: avoid; }
.guide-toc a { color: rgba(248, 245, 240, 0.8); text-decoration: none; font-size: 0.92rem; }
.guide-toc a:hover { color: var(--teak-light); }

.guide-body {
  margin-top: 1rem;
  color: rgba(248, 245, 240, 0.78);
  font-size: 1.04rem;
  line-height: 1.75;
}
.guide-body > * + * { margin-top: 1.1rem; }
.guide-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  margin-top: 3rem;
  margin-bottom: 0;
  scroll-margin-top: calc(var(--topbar-h, 90px) + 1rem);
}
.guide-body h3 { font-size: 1.15rem; color: var(--white); margin-top: 2rem; }
.guide-body p, .guide-body li { margin-bottom: 0; }
.guide-body strong { color: var(--white); }
.guide-body a { color: var(--teal); }
.guide-body ul, .guide-body ol { padding-left: 1.3rem; }
.guide-body li + li { margin-top: 0.5rem; }

.guide-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--orange);
  background: rgba(244, 99, 30, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 1.08rem;
  color: var(--white);
}
.guide-body blockquote p { margin: 0; }

.guide-body .table-wrap { overflow-x: auto; }
.guide-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}
.guide-body th, .guide-body td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.guide-body thead th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.guide-body tbody tr:last-child td { border-bottom: none; }
.guide-body tbody td:first-child { color: var(--white); }

.guide-hero { margin: 1.75rem 0 2.5rem; }
.guide-hero img { width: 100%; height: auto; border-radius: 12px; }
.guide-hero figcaption { margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-muted); text-align: right; }

.guide-body .guide-figure { margin: 2rem 0; }
.guide-figure img { width: 100%; height: auto; border-radius: 10px; }
.guide-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.guide-cta {
  margin-top: 3.5rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(244, 99, 30, 0.1), rgba(10, 31, 68, 0.6));
  color: rgba(248, 245, 240, 0.8);
}
.guide-cta > * + * { margin-top: 0.8rem; }
.guide-cta-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.guide-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem !important; }

.guide-list { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.guide-list-item + .guide-list-item { margin-top: 1rem; }
.guide-list-link {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.guide-list-link:hover { border-color: var(--teak); }
.guide-list-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
}
.guide-list-desc { display: block; margin-top: 0.4rem; color: rgba(248, 245, 240, 0.72); }
.guide-list-meta { display: block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-muted); }

/* The calculator: fields in a grid, the result as the one large number. */
.calc {
  margin: 1.75rem 0;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  font-size: 0.95rem;
  line-height: 1.5;
}
.calc-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1.25rem;
}
/* Two by two: four fields in one row leave no room for the hints, three
   leave the fourth alone on a line of its own. */
.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.75rem;
}
@media (max-width: 575px) {
  .calc-fields { grid-template-columns: minmax(0, 1fr); }
}
.calc-field { display: flex; flex-direction: column; gap: 0.35rem; }
.calc-label { font-weight: 600; color: var(--white); font-size: 0.9rem; }
.calc-input { display: flex; align-items: center; gap: 0.5rem; }
.calc-input input {
  width: 100%;
  max-width: 9rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(248, 245, 240, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--white);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.calc-input input:focus { outline: 2px solid var(--teak-light); outline-offset: 1px; border-color: transparent; }
.calc-unit { color: var(--text-muted); }
.calc-hint { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }

.calc-scopes { border: 0; padding: 0; margin: 1.5rem 0 0; }
.calc-scopes legend { margin-bottom: 0.5rem; }
.calc-scope {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(248, 245, 240, 0.8);
}
.calc-scope:hover { background: rgba(255, 255, 255, 0.04); }
.calc-scope input { margin-top: 0.3rem; accent-color: var(--orange); }
.calc-scope strong { color: var(--white); margin-right: 0.35rem; white-space: nowrap; }

.calc-result {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.calc-result p { margin: 0; }
.calc-result-main { font-size: 1.1rem; color: var(--white); }
.calc-length {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--teak-light);
  font-variant-numeric: tabular-nums;
}
.calc-result-explain, .calc-result-radius { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.3rem !important; }

.calc-noscript { font-size: 0.92rem; color: var(--text-muted); }

@media (max-width: 575px) {
  .guide-page { padding: 7.5rem 0 4rem; }
  .guide-cta, .calc { padding: 1.25rem; }
  .guide-body { font-size: 1rem; }
}

.faq-more {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.faq-more a { color: var(--teak-light); }
.faq-more a:hover { text-decoration: underline; }