/* Keel site. Night-at-sea, glass over an ambient aura: the app's own
   design language in CSS. No dependencies, no build step. */

:root {
  --navy: #0b1e3f;
  --navy-deep: #071429;
  --bg: #070d1d;
  --ink: #edf1f5;
  --muted: #93a0b4;
  --sea: #7fb8b0;
  --sea-bright: #8fc7bf;
  --coral: #e8735a;
  --glass: rgba(19, 27, 46, 0.55);
  --glass-strong: rgba(19, 27, 46, 0.85);
  --hairline: rgba(237, 241, 245, 0.09);
  --radius: 28px;
  --radius-sm: 16px;
  --wrap: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative; /* the aura sizes itself to the whole document */
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------- Aura -------------------------------- */
/* The ambient stage: light through water. The layer spans the whole
   document, glows scattered all the way down, so scrolling moves past
   them like features on the sea (no fixed layer, no parallax tricks).
   Each light wanders a long lopsided path, changes shape softly, and
   breathes on slow, unsynchronized periods. Scrolling stirs the water:
   script.js eases --sway from the scroll's velocity, and each glow takes
   it at its own factor (--f), some against the flow. The page-length
   gradient does the diving: lighter at the surface, darkest at the
   bottom, where the sea floor waits. */

.aura {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #0c1830 0%, var(--bg) 16%, #081226 55%, #050a16 100%);
  overflow: hidden;
}

.glow {
  position: absolute;
  will-change: transform;
  transform: translate3d(0, calc(var(--sway, 0px) * var(--f, 1)), 0);
}
.glow::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform, opacity;
}

/* The surface: a wide sheet of light at the very top of the page. */
.glow-surface { --f: 0.4; left: -20vw; top: -150px; width: 140vw; height: 300px; }
.glow-surface::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(127, 184, 176, 0.20), transparent 70%);
  filter: blur(55px);
  animation: sway-surface 21s ease-in-out infinite alternate, breathe-surface 8s ease-in-out infinite;
}

.g1 { --f: 1; width: 620px; height: 620px; left: 55%; top: 2%; }
.g1::before {
  background: radial-gradient(circle, rgba(127, 184, 176, 0.30), transparent 65%);
  animation: wander-a 38s ease-in-out infinite alternate, breathe-a 9s ease-in-out infinite;
}

.g2 { --f: -0.6; width: 460px; height: 460px; left: -160px; top: 14%; }
.g2::before {
  background: radial-gradient(circle, rgba(127, 184, 176, 0.18), transparent 65%);
  animation: wander-b 46s ease-in-out infinite alternate, breathe-b 13s ease-in-out infinite;
}

.g3 { --f: 1.3; width: 380px; height: 380px; right: -120px; top: 28%; }
.g3::before {
  background: radial-gradient(circle, rgba(232, 115, 90, 0.10), transparent 65%);
  animation: wander-c 52s ease-in-out infinite alternate, breathe-c 17s ease-in-out infinite;
}

.g4 { --f: -0.8; width: 520px; height: 520px; left: 58%; top: 42%; }
.g4::before {
  background: radial-gradient(circle, rgba(127, 184, 176, 0.22), transparent 65%);
  animation: wander-b 41s ease-in-out infinite alternate-reverse, breathe-c 11s ease-in-out -4s infinite;
}

.g5 { --f: 1.1; width: 440px; height: 440px; left: -150px; top: 57%; }
.g5::before {
  background: radial-gradient(circle, rgba(127, 184, 176, 0.16), transparent 65%);
  animation: wander-a 49s ease-in-out -20s infinite alternate, breathe-b 15s ease-in-out -7s infinite;
}

.g6 { --f: -0.5; width: 360px; height: 360px; right: -110px; top: 70%; }
.g6::before {
  background: radial-gradient(circle, rgba(232, 115, 90, 0.08), transparent 65%);
  animation: wander-c 44s ease-in-out -15s infinite alternate-reverse, breathe-a 12s ease-in-out -3s infinite;
}

.g7 { --f: 0.9; width: 540px; height: 540px; left: 30%; top: 84%; }
.g7::before {
  background: radial-gradient(circle, rgba(127, 184, 176, 0.20), transparent 65%);
  animation: wander-b 36s ease-in-out -9s infinite alternate, breathe-c 10s ease-in-out -5s infinite;
}

/* The sea floor, at the actual bottom of the page. */
.glow-floor { --f: 0.3; left: 8vw; bottom: -280px; width: 84vw; height: 460px; }
.glow-floor::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(84, 130, 158, 0.24), transparent 70%);
  animation: breathe-floor 15s ease-in-out infinite;
}

/* Long, slightly lopsided paths with a soft change of shape. */
@keyframes wander-a {
  0%   { transform: translate(0, 0) scale(1); border-radius: 50%; }
  40%  { transform: translate(-60px, 45px) scale(1.07); border-radius: 46% 54% 52% 48% / 56% 44% 54% 46%; }
  75%  { transform: translate(-90px, 85px) scale(0.97); border-radius: 55% 45% 47% 53% / 46% 54% 46% 54%; }
  100% { transform: translate(-45px, 120px) scale(1.1); border-radius: 50%; }
}
@keyframes wander-b {
  0%   { transform: translate(0, 0) scale(1); border-radius: 50%; }
  45%  { transform: translate(70px, -55px) scale(1.06); border-radius: 53% 47% 45% 55% / 48% 52% 48% 52%; }
  100% { transform: translate(35px, -100px) scale(1.09); border-radius: 47% 53% 55% 45% / 53% 47% 53% 47%; }
}
@keyframes wander-c {
  0%   { transform: translate(0, 0) scale(1); border-radius: 50%; }
  50%  { transform: translate(-55px, -45px) scale(1.1); border-radius: 45% 55% 50% 50% / 55% 45% 50% 50%; }
  100% { transform: translate(-80px, -85px) scale(1.02); border-radius: 50%; }
}
@keyframes sway-surface {
  0%   { transform: translateX(0) scaleY(1); }
  100% { transform: translateX(-70px) scaleY(1.12); }
}

/* Breathing: slow, small, out of phase. Water, not sirens. */
@keyframes breathe-a { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.62; } }
@keyframes breathe-b { 0%, 100% { opacity: 0.55; } 55% { opacity: 0.4; } }
@keyframes breathe-c { 0%, 100% { opacity: 0.48; } 45% { opacity: 0.6; } }
@keyframes breathe-surface { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.58; } }
@keyframes breathe-floor { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.68; } }

/* ------------------------------- Header ------------------------------- */

.top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: 0.2px;
}
.brand img { border-radius: 8px; }

.top-right { display: flex; align-items: center; gap: 14px; }

.langs { display: flex; gap: 1px; font-size: 12px; font-weight: 700; }
.langs a { color: var(--muted); padding: 6px 6px; border-radius: 8px; }
.langs a:hover { color: var(--ink); }
.langs a.active { color: var(--sea-bright); }

.top-cta {
  font-size: 15px; font-weight: 600;
  color: var(--sea-bright);
  border: 1px solid var(--hairline);
  background: var(--glass);
  padding: 8px 16px;
  border-radius: 999px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.top-cta:hover { border-color: rgba(127, 184, 176, 0.45); transform: translateY(-1px); }

/* -------------------------------- Hero -------------------------------- */

.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
}

.eyebrow {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--sea);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -1.5px;
  font-weight: 800;
  background: linear-gradient(115deg, #ffffff 30%, #9fd4cc 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

/* Longer words in FR/DE/PL/IT: the headline is sized against its own
   column (cqi), tuned per language to its longest intended line, so it
   physically fits in two lines at any width. The vw clamp is the
   fallback for browsers without container-query units. */
.hero-copy { container-type: inline-size; }
:lang(fr) .hero h1, :lang(de) .hero h1, :lang(pl) .hero h1, :lang(it) .hero h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  letter-spacing: -1px;
}
:lang(fr) .hero h1 { font-size: clamp(30px, 10cqi, 54px); }
:lang(de) .hero h1 { font-size: clamp(30px, 10.6cqi, 54px); }
:lang(it) .hero h1 { font-size: clamp(28px, 8.8cqi, 52px); }
:lang(pl) .hero h1 { font-size: clamp(26px, 7.6cqi, 48px); }

.lede {
  margin-top: 22px;
  font-size: 19px;
  color: var(--muted);
  max-width: 44ch;
}

.hero-actions {
  margin-top: 34px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

.hero-note { font-size: 14px; color: var(--muted); }

/* App Store badge (placeholder styling until the official asset lands). */
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 10px 18px 10px 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.store-badge:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.4); }
.store-badge-mark { font-size: 26px; line-height: 1; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: 17px; }
.store-badge-text small { font-size: 10.5px; font-weight: 500; color: #cfd6df; }

/* The device: CSS-drawn frame; the screen is a labelled placeholder. */
.hero-device { display: flex; justify-content: center; }

.device {
  width: min(300px, 72vw);
  aspect-ratio: 300 / 620;
  border-radius: 46px;
  background: #10182c;
  border: 1px solid rgba(237, 241, 245, 0.14);
  box-shadow:
    0 40px 90px rgba(2, 8, 20, 0.7),
    inset 0 0 0 10px #05080f;
  position: relative;
  transition: transform 0.25s ease;
  will-change: transform;
}

.device-notch {
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 26px;
  background: #05080f;
  border-radius: 999px;
  z-index: 2;
}

.device-screen {
  position: absolute; inset: 10px;
  border-radius: 38px;
  overflow: hidden;
}

/* ---------------------------- Placeholders ---------------------------- */

.ph {
  position: relative;
  background:
    linear-gradient(160deg, #12203c 0%, #0a1226 70%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(237, 241, 245, 0.03) 14px 28px);
  border: 1.5px dashed rgba(147, 160, 180, 0.35);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* A real image covers the placeholder; onerror removes it when missing. */
.ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}

.ph-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(147, 160, 180, 0.75);
  text-align: center; line-height: 1.7;
}

/* ------------------------------ Waterline ----------------------------- */

.waterline {
  height: 90px;
  overflow: hidden;
  margin-top: -40px;
}

.waterline svg { width: 200%; height: 100%; display: block; }

.wave { animation: wave-slide 16s linear infinite; }
.wave-back { fill: rgba(127, 184, 176, 0.07); }
.wave-front { fill: rgba(127, 184, 176, 0.13); animation-duration: 11s; }

@keyframes wave-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

/* ----------------------------- Trust strip ---------------------------- */

.trust {
  background: rgba(5, 9, 18, 0.72);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 48px 24px 52px;
}

.trust-kicker { text-align: center; margin-bottom: 28px; }

/* The content stays at the page's measure even on ultrawide screens. */
.trust-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 48px;
}

.vow {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; color: var(--muted); line-height: 1.6;
}
.vow-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--sea); }
.vow-icon svg { width: 100%; height: 100%; display: block; }
.vow strong { color: var(--ink); }

/* ------------------------------ Name note ------------------------------ */
/* A dictionary entry: the name explained before the sea imagery starts. */

.name-note {
  max-width: 620px;
  margin: 0 auto;
  padding: 88px 24px 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
}

.name-word { font-weight: 800; color: var(--sea-bright); letter-spacing: 0.3px; }
.name-pron { color: var(--muted); font-style: italic; margin: 0 4px; }
.name-def { color: var(--muted); }

/* ------------------------------- Story --------------------------------- */

.story {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 72px 24px 0;
}

.story .eyebrow { text-align: center; margin-bottom: 30px; }

.story-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  max-width: 940px;
  margin: 0 auto;
}

.story-cols h3 { font-size: 23px; letter-spacing: -0.4px; margin-bottom: 10px; }
.story-cols p { font-size: 16px; color: var(--muted); line-height: 1.65; }

/* ------------------------------- Tour ---------------------------------- */
/* The interactive walkthrough: one glass shell, four tabbed panels. */

.tour { max-width: var(--wrap); margin: 0 auto; padding: 110px 24px 0; }
.tour-title { margin-bottom: 10px; }
.tour-disclaimer { color: var(--muted); font-size: 14px; margin-bottom: 26px; }

.tour-shell {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 22px;
  overflow: hidden;
}

.tour-tabs {
  display: flex; gap: 4px;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
  overflow-x: auto;
}

.tour-tab {
  flex: 1;
  min-width: max-content;
  background: none; border: none;
  color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tour-tab.active { background: rgba(127, 184, 176, 0.18); color: var(--sea-bright); }
.tour-tab.locked { opacity: 0.35; cursor: not-allowed; }

/* The empty result column points at the button until the read happens. */
.tour-waiting {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed rgba(147, 160, 180, 0.35);
  border-radius: var(--radius-sm);
  padding: 26px 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.played .tour-waiting { display: none; }
.tw-arrow {
  font-size: 20px; color: var(--sea-bright); flex: none;
  animation: tw-nudge 1.6s ease-in-out infinite;
}
.tw-up { display: none; }
@keyframes tw-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

/* When the button gets clicked-at through a locked tab, it waves back. */
.tour-read.nudge { animation: read-nudge 0.5s ease; }
@keyframes read-nudge {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.07); }
}

.tour-panel { display: none; }
.tour-panel.active { display: block; animation: panel-in 0.35s ease; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.tour-label {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--muted);
  margin-bottom: 14px;
}

.tour-foot { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* The AI awareness note: documentation voice, one tap to expand. */
.ai-note {
  margin-top: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(7, 12, 24, 0.4);
  padding: 0 16px;
  font-size: 13.5px;
  color: var(--muted);
}
.ai-note summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  color: var(--muted);
}
.ai-note summary:hover, .ai-note[open] summary { color: var(--sea-bright); }
.ai-note p { margin: 0 0 12px; line-height: 1.65; }
.tour-count { color: var(--sea-bright); text-transform: none; letter-spacing: 0; }

/* Step 1: import */
.tour-import { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; }

.rough {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.7;
  color: #b7c1cf;
  background: rgba(7, 12, 24, 0.7);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.tour-read {
  margin-top: 14px;
  background: rgba(127, 184, 176, 0.18);
  color: var(--sea-bright);
  border: 1px solid rgba(127, 184, 176, 0.45);
  border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 700;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tour-read:hover { background: rgba(127, 184, 176, 0.28); transform: translateY(-1px); }
.tour-read.done { opacity: 0.5; cursor: default; transform: none; }

/* Nothing shows before the read: the results EXIST only once read. */
.parsed { display: none; flex-direction: column; gap: 10px; }
.played .parsed { display: flex; }
.tour-import-out .tour-foot { display: none; }
.played .tour-foot { display: block; }

.parsed-card {
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: parsed-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.parsed-card:nth-child(2) { animation-delay: 0.1s; }
.parsed-card:nth-child(3) { animation-delay: 0.2s; }
.parsed-card:nth-child(4) { animation-delay: 0.3s; }
.parsed-card:nth-child(5) { animation-delay: 0.4s; }
.parsed-card:nth-child(6) { animation-delay: 0.5s; }

@keyframes parsed-in { to { opacity: 1; transform: none; } }

/* The "this is a subset" card. */
.parsed-more {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border-style: dashed;
  border-color: rgba(147, 160, 180, 0.3);
  background: none;
}

.field-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.field-chips span {
  font-size: 11.5px; font-weight: 600;
  color: var(--sea-bright);
  background: rgba(127, 184, 176, 0.12);
  border: 1px solid rgba(127, 184, 176, 0.3);
  padding: 3px 9px;
  border-radius: 999px;
}
.field-chips .chip-change {
  color: #f0b35c;
  background: rgba(240, 179, 92, 0.1);
  border-color: rgba(240, 179, 92, 0.35);
}

/* Step 2: upcoming (interactive replica) */
.t-hero {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
  max-width: 640px;
}
.t-hero-label {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted);
}
.t-hero-amount { font-size: 30px; letter-spacing: -0.6px; }
.t-hero-sub { font-size: 13px; color: var(--muted); }

.acct-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.acct-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.acct-chip i { width: 9px; height: 9px; border-radius: 50%; }
.acct-chip.active {
  background: rgba(127, 184, 176, 0.16);
  border-color: rgba(127, 184, 176, 0.45);
  color: var(--sea-bright);
}

.fold-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 10px 4px;
  margin: 6px 0;
  cursor: pointer;
}
.fold-bar:hover { color: var(--ink); }
.fold-chevron { transition: transform 0.25s ease; }
.fold-bar.open .fold-chevron { transform: rotate(180deg); }
.fold-body { display: flex; flex-direction: column; gap: 8px; }
/* The hidden attribute must WIN over display:flex, or folds never close. */
.fold-body[hidden] { display: none; }

/* Extra air between the settled zone and what still needs attention, so a
   row marked paid visibly crosses a boundary when it moves up. */
.fold-bar[data-fold="paid"] { margin-bottom: 18px; }
.fold-body[data-fold-body="paid"] { margin-bottom: 22px; }
.fold-bar[data-fold="next"] { margin-top: 18px; }

.up-day-total { float: right; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.up-day { display: flex; justify-content: space-between; align-items: baseline; }
.up-overdue { color: #f2766b; }
.up-tag-over { color: #f2766b; border-color: rgba(242, 118, 107, 0.4); }
.up-row.overdue .mini-amount { color: #f2766b; font-weight: 600; }

.mark-btn {
  background: rgba(127, 184, 176, 0.16);
  border: 1px solid rgba(127, 184, 176, 0.4);
  border-radius: 999px;
  color: var(--sea-bright);
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  flex: none;
  transition: background 0.2s ease;
}
.mark-btn:hover { background: rgba(127, 184, 176, 0.28); }
.undo-btn { color: var(--muted); background: none; border-color: var(--hairline); }

/* Automatic payments have nothing to press: the button slot says why. */
.auto-note { flex: none; font-size: 12px; font-style: italic; color: rgba(147, 160, 180, 0.8); }

.up-row.settled { opacity: 0.55; }
.up-row.settled .mini-name { text-decoration: none; }
.up-row.just-paid { border-color: rgba(127, 184, 176, 0.45); }

.up-more { font-size: 13px; color: var(--muted); padding: 4px 2px 8px; }

.upcoming { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }

.up-day {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted);
  margin-top: 10px;
}
.up-day:first-child { margin-top: 0; }

.up-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14.5px;
}

.up-tag {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 2px 8px;
  border-radius: 999px;
}
.up-tag-last { color: #f0b35c; border-color: rgba(240, 179, 92, 0.4); }
.up-tag-anchor { color: var(--sea-bright); border-color: rgba(127, 184, 176, 0.4); }

/* Step 3: months */
.tour-chart { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 26px; align-items: start; }

.tbar-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.tbar-nav strong { font-size: 15px; letter-spacing: -0.2px; }
.tbar-nav button {
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 700;
  width: 34px; height: 34px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.tbar-nav button:hover { border-color: rgba(127, 184, 176, 0.45); }
.tbar-nav button:disabled { opacity: 0.3; cursor: default; }

.tbars {
  position: relative;
  display: flex; align-items: flex-end; gap: 8px;
  height: 240px;
  padding: 10px;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

/* The average, drawn as the app draws it: a dashed line over the bars. */
.tbar-mean {
  position: absolute; left: 10px; right: 10px;
  border-top: 2px dashed rgba(127, 184, 176, 0.75);
  pointer-events: none;
  z-index: 1;
}
.tbar-mean span {
  position: absolute; right: 0; top: -22px;
  font-size: 10.5px; font-weight: 700; color: var(--sea-bright);
  background: rgba(7, 12, 24, 0.9);
  border: 1px solid rgba(127, 184, 176, 0.35);
  padding: 2px 7px;
  border-radius: 999px;
}

.tbar.now span { color: var(--sea-bright); font-weight: 700; }

.tbar {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%;
  justify-content: flex-end;
  background: none; border: none; cursor: pointer; padding: 0;
}
.tbar i {
  display: block; width: 100%;
  border-radius: 5px;
  background: var(--sea);
  opacity: 0.85;
  transition: opacity 0.2s ease, background 0.2s ease;
}
/* A fixed label strip: every bar's foot sits on the same line, so the
   two-line "now" label can't lift its bar and skew the reading. */
.tbar span {
  font-size: 10.5px; color: var(--muted);
  height: 24px; line-height: 12px; text-align: center;
}
.tbar span em { display: block; font-style: normal; }
.tbar.spike i { background: var(--coral); }
.tbars.has-sel .tbar:not(.sel) i { opacity: 0.3; }
.tbar.sel span { color: var(--ink); font-weight: 700; }

.tbar-detail {
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 16px;
  min-height: 240px;
}
.tbar-detail h4 { font-size: 16px; margin-bottom: 12px; }
.tbar-detail .mini-row { padding: 6px 0; }
.tbar-detail .note { font-size: 12.5px; color: #f0b35c; margin-top: 10px; }

/* Payment status marks in the month detail. */
.st { flex: none; width: 16px; text-align: center; font-size: 12px; }
.st-paid { color: #4bc98a; }
.st-due { color: var(--muted); }
.st-over { color: #f2766b; }

.tour-hint-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.tour-hint-note em { color: #f0b35c; font-style: normal; }

/* Step 4 additions: the ring itself is clickable. */
.donut { cursor: pointer; }
.donut-legend .pct { color: var(--sea-bright); font-weight: 700; margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.donut-legend button { width: 100%; }

/* The 15 that became 10: quietly crossed out, not shouting. */
.price-was {
  font-size: 19px; font-weight: 500;
  color: rgba(147, 160, 180, 0.7);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-bottom: -8px;
}

/* Step 4: donut */
.tour-donut { display: grid; grid-template-columns: auto auto 1fr; gap: 40px; align-items: center; }

/* What's inside the selected slice. */
.donut-detail {
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 16px;
  min-height: 200px;
}
.donut-detail h4 {
  display: flex; align-items: center; gap: 9px;
  font-size: 15.5px; margin-bottom: 10px;
}
.donut-detail .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.donut-detail .mini-row { padding: 6px 0; }
.donut-detail .dd-sub { font-size: 12px; color: var(--muted); white-space: nowrap; }

.donut {
  width: 240px; height: 240px;
  border-radius: 50%;
  position: relative;
  flex: none;
  /* painted by script.js */
}
.donut::after {
  content: "";
  position: absolute; inset: 34px;
  border-radius: 50%;
  background: #0a1224;
}

.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 1; text-align: center;
}
.donut-center strong { font-size: 22px; letter-spacing: -0.4px; }
.donut-center span { font-size: 11.5px; color: var(--muted); max-width: 110px; }

.donut-legend { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.donut-legend button {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--ink);
  font: inherit; font-size: 14.5px;
  cursor: pointer; padding: 4px 6px;
  border-radius: 8px;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.donut-legend button:hover { background: rgba(237, 241, 245, 0.05); }
.donut-legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.donut-legend .amt { color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.donut-legend.has-sel button:not(.sel) { opacity: 0.35; }

/* ------------------------------ Features ------------------------------ */

.features {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 110px 24px 40px;
}

.section-title {
  font-size: clamp(30px, 4.4vw, 46px);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 44px;
  text-wrap: balance;
}
:lang(fr) .section-title, :lang(de) .section-title, :lang(pl) .section-title, :lang(it) .section-title {
  font-size: clamp(27px, 3.9vw, 41px);
}

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.card {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

.card:hover { transform: translateY(-4px); border-color: rgba(127, 184, 176, 0.3); }

.card h3 { font-size: 24px; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--muted); }

.card-wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}

.card-full { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }

/* Hand-built UI vignettes (no images needed, always crisp). */
.vignette {
  margin-top: 18px;
  background: rgba(7, 12, 24, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}

.card-wide .vignette, .card-full .ph { margin-top: 0; }

.mini-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.mini-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mini-name { font-weight: 600; }
.mini-amount { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-sub { font-size: 12.5px; color: var(--muted); }

.mini-progress {
  height: 6px; border-radius: 999px;
  background: rgba(237, 241, 245, 0.08);
  overflow: hidden;
}
.mini-progress i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--sea));
}

.ai-in {
  font-size: 13px; color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.5;
}
.ai-arrow { text-align: center; color: var(--sea); font-size: 15px; }

/* Analytics vignette: bars grow when revealed. */
.chart-vignette .bars {
  display: flex; align-items: flex-end; gap: 8px;
  height: 120px;
}
.chart-vignette .bars i {
  flex: 1;
  height: var(--h);
  border-radius: 6px;
  background: var(--sea);
  opacity: 0.9;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.chart-vignette .bars .bar-now { background: var(--coral); }
.chart-vignette .bars .bar-ghost { background: rgba(127, 184, 176, 0.35); }
.revealed .chart-vignette .bars i, .chart-vignette.grown .bars i { transform: scaleY(1); }
.chart-vignette .bars i:nth-child(2) { transition-delay: 0.06s; }
.chart-vignette .bars i:nth-child(3) { transition-delay: 0.12s; }
.chart-vignette .bars i:nth-child(4) { transition-delay: 0.18s; }
.chart-vignette .bars i:nth-child(5) { transition-delay: 0.24s; }
.chart-vignette .bars i:nth-child(6) { transition-delay: 0.3s; }
.chart-vignette .bars i:nth-child(7) { transition-delay: 0.36s; }
.chart-vignette .bars i:nth-child(8) { transition-delay: 0.42s; }

.harbor-card {
  background:
    linear-gradient(140deg, rgba(11, 30, 63, 0.85), rgba(7, 20, 41, 0.9));
}
.ph-harbor { min-height: 220px; border-radius: var(--radius-sm); }

/* ------------------------------- Promise ------------------------------ */

.promise {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 24px 90px;
  text-align: center;
}

.promise h2 {
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin-bottom: 22px;
  text-wrap: balance;
}
:lang(fr) .promise h2, :lang(de) .promise h2, :lang(pl) .promise h2, :lang(it) .promise h2 {
  font-size: clamp(28px, 4.4vw, 46px);
}

.promise-lead {
  color: var(--sea-bright);
  font-size: 17.5px; font-weight: 600;
  margin: -6px 0 16px;
}
.promise-copy { color: var(--muted); font-size: 17px; }
.promise-copy strong { color: var(--ink); font-weight: 700; }

.chips {
  list-style: none;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 36px;
}
.chips li {
  font-size: 14px; font-weight: 600;
  color: var(--sea-bright);
  border: 1px solid rgba(127, 184, 176, 0.35);
  background: rgba(127, 184, 176, 0.1);
  padding: 8px 14px;
  border-radius: 999px;
}

/* The Full Keel card, sheen included. */
.price-card {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 420px;
  background: var(--glass);
  border: 1px solid rgba(127, 184, 176, 0.4);
  border-radius: var(--radius);
  padding: 36px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.price-amount { font-size: 52px; font-weight: 800; letter-spacing: -1.5px; }
.price-tag {
  font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--sea);
  margin-bottom: 14px;
}

.price-sheen {
  position: absolute;
  top: -60px; bottom: -60px;
  width: 120px;
  transform: rotate(16deg) translateX(-260px);
  background: linear-gradient(90deg, transparent, rgba(127, 184, 176, 0.16), transparent);
  animation: sheen 4.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sheen {
  0%, 12% { transform: rotate(16deg) translateX(-260px); opacity: 0; }
  22% { opacity: 1; }
  68% { opacity: 1; }
  78%, 100% { transform: rotate(16deg) translateX(520px); opacity: 0; }
}

/* -------------------------------- Maker -------------------------------- */

.maker {
  max-width: 620px;
  margin: 0 auto;
  padding: 60px 24px 90px;
  text-align: center;
}

.maker-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  margin: 0 auto 22px;
  overflow: hidden;
}

.maker h2 { font-size: 30px; letter-spacing: -0.6px; margin-bottom: 14px; }
.maker-copy { color: var(--muted); font-size: 16.5px; }
.maker-copy + .maker-copy { margin-top: 14px; }

/* ---------------------------- Email capture --------------------------- */

.updates { max-width: var(--wrap); margin: 0 auto; padding: 0 24px 110px; }

.updates-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #0a1730, #060c1a);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 64px 32px;
  text-align: center;
}

.updates-glow {
  position: absolute;
  right: -140px; top: -140px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 115, 90, 0.22), transparent 65%);
  filter: blur(50px);
  pointer-events: none;
}

.updates-card h2 { font-size: 32px; letter-spacing: -0.7px; margin-bottom: 10px; }
.updates-card > p { color: var(--muted); margin-bottom: 26px; }

.updates-linkedin {
  display: inline-block;
  background: rgba(127, 184, 176, 0.18);
  color: var(--sea-bright);
  border: 1px solid rgba(127, 184, 176, 0.45);
  border-radius: 999px;
  font-size: 16px; font-weight: 700;
  padding: 13px 28px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.updates-linkedin:hover { background: rgba(127, 184, 176, 0.28); transform: translateY(-1px); }

.updates-note { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* ------------------------------- Closing ------------------------------- */

.closing {
  text-align: center;
  padding: 40px 24px 130px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}

.closing h2 {
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -1.2px;
  line-height: 1.08;
  background: linear-gradient(115deg, #ffffff 30%, #9fd4cc 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
  max-width: 22ch;
}
:lang(fr) .closing h2, :lang(de) .closing h2, :lang(pl) .closing h2, :lang(it) .closing h2 {
  font-size: clamp(30px, 4.2vw, 46px);
}

/* -------------------------------- Footer ------------------------------- */

.footer {
  border-top: 1px solid var(--hairline);
  background: rgba(4, 7, 14, 0.85);
  padding: 44px 24px 54px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}

.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.footer-brand img { border-radius: 7px; }

.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; font-size: 14.5px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

.footer-note { max-width: 560px; font-size: 12.5px; color: rgba(147, 160, 180, 0.7); line-height: 1.6; }
.footer-fine { font-size: 12.5px; color: rgba(147, 160, 180, 0.55); }

/* ----------------------------- Scroll reveal --------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ------------------------------ Legal pages ---------------------------- */

.legal {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 100px;
}
.legal h1 { font-size: 38px; letter-spacing: -0.8px; margin-bottom: 8px; }
.legal .legal-date { color: var(--muted); font-size: 14px; margin-bottom: 34px; }
.legal p { color: #c6cfda; font-size: 16px; margin-bottom: 18px; }
.legal .back { display: inline-block; margin-bottom: 34px; color: var(--sea-bright); font-weight: 600; }

/* ------------------------------ Responsive ----------------------------- */

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .trust-inner { grid-template-columns: 1fr; gap: 20px; }
  .story-cols { grid-template-columns: 1fr; gap: 34px; }
  .bento { grid-template-columns: 1fr; }
  .card-wide, .card-full { grid-column: span 1; grid-template-columns: 1fr; }
  .tour-import, .tour-chart { grid-template-columns: 1fr; }
  .tour-donut { grid-template-columns: 1fr; justify-items: center; }
  .donut-detail { width: 100%; min-height: 0; }
  /* Stacked layout: the button sits above, so the hint points up. */
  .tw-left { display: none; }
  .tw-up { display: inline; animation-name: tw-nudge-up; }
  @keyframes tw-nudge-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
}

/* Phones: the demo restructures instead of shrinking. */
@media (max-width: 640px) {
  /* The tour gets the full width it can; the shell keeps its own padding. */
  .tour { padding-left: 14px; padding-right: 14px; }
  .tour-shell { padding: 16px 14px; border-radius: 22px; }

  /* Four tabs become a 2 x 2 grid instead of an overflow scroller. */
  .tour-tabs {
    display: grid; grid-template-columns: 1fr 1fr;
    border-radius: 18px;
  }
  .tour-tab { min-width: 0; padding: 10px 6px; font-size: 13.5px; }

  /* Upcoming rows: two lines instead of one long one. Name and amount on
     top, tag and button below; the dot spans both. */
  .up-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dot name amount"
      "dot tag  btn";
    column-gap: 10px; row-gap: 8px;
    align-items: center;
    padding: 10px 12px;
    font-size: 14px;
  }
  .up-row .mini-dot { grid-area: dot; }
  .up-row .mini-name {
    grid-area: name;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .up-row .mini-amount { grid-area: amount; margin-left: 0; justify-self: end; }
  .up-row .up-tag { grid-area: tag; justify-self: start; }
  .up-row .mark-btn { grid-area: btn; justify-self: end; padding: 7px 14px; }
  .up-row .auto-note { grid-area: btn; justify-self: end; }
  .t-hero-amount { font-size: 26px; }

  /* Twelve bars on a phone: tighter gaps, smaller labels, same geometry
     (script.js positions bars and the average line in fixed pixels). */
  .tbars { gap: 4px; padding: 10px 8px; }
  .tbar-mean { left: 8px; right: 8px; }
  .tbar span { font-size: 9px; letter-spacing: -0.2px; }
  .tbar-detail { min-height: 0; }

  /* The donut detail rows may need two lines too. */
  .donut-detail .mini-row { flex-wrap: wrap; }
  .donut-detail .dd-sub { white-space: normal; }

  /* Header: brand, languages and CTA share one narrow row. */
  .top { padding: 16px 14px; }
  .top-right { gap: 8px; }
  .langs a { padding: 6px 4px; font-size: 11.5px; }
  .top-cta { padding: 7px 12px; font-size: 14px; }

  /* General air on small screens. */
  .card { padding: 24px 20px; }
  .card h3 { font-size: 21px; }
  .updates-card { padding: 48px 22px; }
  .promise { padding-top: 90px; }
}

/* --------------------------- Reduced motion ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .glow, .glow::before, .wave, .price-sheen { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .chart-vignette .bars i { transform: scaleY(1); transition: none; }
  html { scroll-behavior: auto; }
}