/* InventTasks landing page — shared SOLID INVENT visual language,
   with first-class light and dark themes. */

:root {
  --bg: #f8f7f4;
  --bg-soft: #f2f1ed;
  --panel: #ffffff;
  --ink: #272622;
  --muted: rgba(30, 29, 26, 0.62);
  --brand: #d63027;
  --brand-dark: #9b1a15;
  --brand-soft: rgba(214, 48, 39, 0.09);
  --line: rgba(30, 29, 26, 0.11);
  --header: rgba(248, 247, 244, 0.82);
  --grid: rgba(30, 29, 26, 0.045);
  --glow-strong: rgba(214, 48, 39, 0.08);
  --glow-soft: rgba(214, 48, 39, 0.045);
  --ok: #1f9d55;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.25s ease;
  --shadow: 0 18px 50px rgba(30, 29, 26, 0.08);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  overflow-x: hidden;
  font:
    16px/1.65 Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 88% 8%, var(--glow-strong), transparent 34rem),
    radial-gradient(circle at 8% 82%, var(--glow-soft), transparent 30rem),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, 60px 60px, 60px 60px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--brand);
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark {
  width: auto;
  height: 34px;
  display: block;
  object-fit: contain;
}
.logo-img {
  width: auto;
  height: 52px;
  display: block;
  object-fit: contain;
}
.logo-word {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 21px;
  color: var(--ink);
}
.logo-word span {
  color: var(--brand);
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* Language switcher — compact flag + code, custom listbox opens on click.
   Deliberately not a native <select>: flags are inline SVG, because emoji
   flags (🇬🇧, 🇵🇱, …) have no glyphs on Windows and fall back to the bare
   letters "GB", "PL", "DE". SVG renders identically in every browser. */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
}
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 9px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s;
}
.lang-button:hover {
  border-color: var(--brand);
}
.lang-caret {
  width: 9px;
  height: 6px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: transform 0.15s;
}
.lang-button[aria-expanded="true"] .lang-caret {
  transform: rotate(180deg);
}
/* Fixed box so every flag occupies the same space, whatever its aspect. */
.lang-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}
.lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 178px;
  margin: 0;
  padding: 5px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.lang-menu[hidden] {
  display: none;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lang-option:hover,
.lang-option.is-active {
  background: var(--brand-soft);
}
.lang-option[aria-selected="true"] {
  color: var(--brand);
}
/* Checkmark column keeps every label on the same x-position. */
.lang-option::after {
  content: "";
  width: 13px;
  height: 13px;
  margin-left: auto;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0;
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
}
.lang-option[aria-selected="true"]::after {
  opacity: 1;
}
.site-header nav a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  opacity: 0.85;
}
.site-header nav a:not(.btn):hover {
  color: var(--brand);
  opacity: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(214, 48, 39, 0.28);
}
.btn:active {
  transform: translateY(1px);
}
/* Secondary buttons. They used to be transparent with a hairline --line border,
   which read as plain text until hovered — the brand outline + tint makes them
   legible as buttons at rest. Border stays 1px so they keep the exact height of
   the primary .btn next to them in a .cta-row. */
.btn.ghost {
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  color: var(--ink);
}
.btn.ghost:hover {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}
.btn.big {
  padding: 14px 26px;
  font-size: 17px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 108px 0 44px;
  text-align: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid rgba(214, 48, 39, 0.25);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero h1 {
  /* The floor used to be 46px, which below ~613px viewport stopped scaling and
     pushed long words (German "Aufgabenmanager,") past the screen edge. */
  font-size: clamp(40px, 7.5vw, 76px);
  font-weight: 900;
  line-height: 1.04;
  margin: 0.25em 0;
  letter-spacing: -0.045em;
  /* Language-aware word breaks (i18n keeps <html lang> current); break-word is
     the last resort for tokens hyphenation cannot split. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.hero h1 .accent { color: var(--brand); }
.hero p.lead {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  max-width: 720px;
  margin: 22px auto 34px;
  line-height: 1.85;
  font-weight: 300;
}
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
}
.note.center {
  text-align: center;
}

/* ---------- Section headings ---------- */
h2.section {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  margin: 96px 0 14px;
  text-align: center;
  letter-spacing: -0.035em;
}
h2.section::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand);
  margin: 10px auto 0;
}

/* ---------- Screenshots ---------- */
/* Slots show the image when assets/img/screen-*.png exists; a missing image
   flips the frame into a styled "coming soon" placeholder (see index.html). */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 26px 0 8px;
}
.shot {
  margin: 0;
}
.shot-frame {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.shot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shot-frame.empty {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--bg-soft),
      var(--bg-soft) 14px,
      #f1f1f1 14px,
      #f1f1f1 28px
    );
}
.shot-frame.empty::after {
  content: "Screenshot coming soon";
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
}
.shot figcaption {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 8px;
  text-align: center;
}
/* Clickable hint + pointer on thumbnails */
.shot {
  cursor: zoom-in;
}
.shot-frame {
  cursor: zoom-in;
  transition: box-shadow 0.15s, transform 0.15s;
}
.shot:hover .shot-frame {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(20, 20, 20, 0.08), 0 12px 32px rgba(20, 20, 20, 0.1);
}
/* Mobile slot: two narrow phone screenshots side by side */
.shot-frame-mobile {
  flex-direction: row;
  gap: 12px;
  padding: 14px;
  aspect-ratio: 16 / 11;
}
.shot-frame-mobile img {
  width: auto;
  height: 100%;
  max-width: 50%;
  object-fit: contain;
  border-radius: 6px;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, 0.94);
  backdrop-filter: blur(4px);
  padding: 24px;
}
.lightbox.open {
  display: flex;
}
.lightbox-content {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s;
}
.lightbox-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 56px;
  font-size: 34px;
  border-radius: 8px;
}
.lightbox-prev {
  left: 16px;
}
.lightbox-next {
  right: 16px;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- Feature cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.card:hover { transform: translateY(-3px); border-color: rgba(214, 48, 39, 0.28); }
.card h3 {
  margin: 0.1em 0 0.4em;
  font-size: 17px;
}
.card h3::before {
  content: "✓ ";
  color: var(--brand);
}
.card p {
  color: var(--muted);
  margin: 0;
  font-size: 15px;
}

/* ---------- Feature pills ---------- */
.pill-intro {
  margin-top: 26px;
  margin-bottom: 4px;
}
.pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 8px auto 4px;
  max-width: 880px;
}
.pills li {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Pricing ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 22px 0 6px;
  align-items: start;
}
.tier {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.tier:hover { transform: translateY(-3px); }
.tier.feat {
  border: 2px solid var(--brand);
}
.tier-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.price {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
}
.price small {
  display: block;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}
.tier ul {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
}
.tier li {
  padding: 4px 0 4px 22px;
  position: relative;
}
.tier li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 800;
}

/* Coffee tips */
.tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 2px;
}
.tip {
  flex: 1 1 62px;
  min-width: 62px;
  padding: 9px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.tip:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.tip:active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.tip-crazy {
  flex: 1 1 100%;
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, #1c1c1c, var(--brand));
}
.tip-crazy:hover {
  filter: brightness(1.12);
  color: #fff;
  background: linear-gradient(90deg, #1c1c1c, var(--brand));
}
.tip-crazy:active {
  filter: brightness(0.95);
  color: #fff;
}
.tip-thanks {
  color: var(--muted);
  font-size: 12.5px;
  margin: 6px 0 0;
  text-align: center;
}
.tier-desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 4px 0 12px;
  text-align: left;
}

/* ---------- Steps ---------- */
ol.steps {
  counter-reset: s;
  list-style: none;
  padding: 0;
  max-width: 720px;
  margin: 18px auto;
}
ol.steps li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 14px 54px;
  margin: 10px 0;
  position: relative;
  box-shadow: var(--shadow);
}
ol.steps li::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}
/* Body copy: never let a single long token (compound German words, slash-joined
   lists like "CSV-/Markdown-/JSON-/PDF-Export") widen its box past the screen.
   body has overflow-x:hidden, so an overflow here is silently CLIPPED text. */
p,
li,
figcaption {
  overflow-wrap: break-word;
}

code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
  /* Long unbreakable strings (vault paths, env var names) would otherwise push
     the page wider than a phone viewport and make the whole site scroll
     sideways. 'anywhere' also lets the box shrink below its longest token. */
  overflow-wrap: anywhere;
}

/* ---------- FAQ ---------- */
details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 10px auto;
  max-width: 720px;
  box-shadow: var(--shadow);
  transition: border-color var(--transition), background var(--transition);
}
details:hover { border-color: rgba(214, 48, 39, 0.24); }
summary {
  cursor: pointer;
  font-weight: 600;
}
details[open] summary {
  color: var(--brand);
}
details p {
  color: var(--muted);
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  margin-top: 96px;
  padding: 36px 0;
  color: var(--muted);
  font-size: 14px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-brand .logo-mark {
  width: auto;
  height: 30px;
}
.company-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.company-logo-img {
  height: 46px;
  width: auto;
  display: block;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.12s;
}
.company-logo:hover .company-logo-img {
  opacity: 1;
}
.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.footer-contact-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand);
  opacity: 0.9;
}
.footer-contact-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.35;
}
.footer-contact-label {
  font-size: 12px;
  color: var(--muted);
}
.footer-contact-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.footer-contact-link:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* ---------- Environment badge ---------- */
#env-badge {
  position: fixed;
  bottom: 10px;
  left: 12px;
  z-index: 9999;
  display: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #fb8c00;
  color: #1a1205;
}
/* 'preview' mode (checkout off) — deliberately louder than the sandbox amber. */
#env-badge.env-badge-preview {
  background: #b3261e;
  color: #fff;
}

/* ---------- Sync section highlight ---------- */
/* Loud on purpose. The web app is the most surprising thing the server does and
   the easiest to miss in a wall of prose, so it gets the brand colour and a
   left rule rather than another paragraph. Translucent tint, so it holds up in
   both themes without a second rule. */
.sync-highlight {
  margin: 22px 0 26px;
  padding: 18px 22px;
  border: 1px solid rgba(214, 48, 39, 0.4);
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  border-radius: var(--radius);
  font-size: 16.5px;
  line-height: 1.7;
}
.sync-highlight strong {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- Discount applied ---------- */
/* Same translucent-callout construction as .checkout-off-note below, in green
   rather than amber: this one is good news. Translucent so it reads correctly
   in both themes without a second rule. */
.discount-note {
  max-width: 620px;
  margin: 18px auto 0;
  padding: 12px 18px;
  border: 1px solid rgba(46, 160, 67, 0.45);
  background: rgba(46, 160, 67, 0.1);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14.5px;
  text-align: center;
}
.discount-note strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.5px;
}

/* ---------- Checkout off ('preview' mode) ---------- */
/* Amber callout: translucent over the page background, so it reads correctly
   in both the light and the dark theme without a second rule. */
.checkout-off-note {
  max-width: 620px;
  margin: 20px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(251, 140, 0, 0.45);
  background: rgba(251, 140, 0, 0.1);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
}
/* pointer-events, not just opacity: the click cannot land at all. */
body.checkout-off #buy-lifetime,
body.checkout-off .tip {
  opacity: 0.4;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .logo-img {
    height: 36px; /* smaller logo on phones keeps the bar compact */
  }
  .site-header nav {
    gap: 12px;
    font-size: 13.5px;
  }
  .landing-page .site-header nav a:not(.btn):nth-child(-n + 2) {
    display: none; /* keep the bar compact on phones */
  }
  .hero {
    padding-top: 40px;
  }
  h2.section {
    margin-top: 56px;
  }
  footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 18px;
  }
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .footer-contact-text {
    align-items: center;
  }
}

/* ===== Legal subpages (terms/privacy/cookies/refunds/legal) ===== */
.legal { max-width: 760px; padding-bottom: 60px; }
.legal h1 { margin: 28px 0 4px; }
.legal h2 { margin: 26px 0 8px; font-size: 19px; }
.legal p, .legal li { line-height: 1.6; color: var(--ink); }
.legal ul { padding-left: 22px; }
.legal-updated { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.legal-highlight {
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.legal-nav { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.legal-nav a { margin: 0 2px; }
/* Provider identification (imprint) under the legal links */
.legal-imprint { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* Footer legal links row */
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }
.footer-sep { color: var(--muted); opacity: 0.5; font-size: 12px; }
/* Same identification in the main-page footer — full width, own line */
.footer-company { flex-basis: 100%; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* ===== Cookie / storage notice ===== */
/* Dismissed via pure-CSS checkbox trick — no JS required at all.
   Works even when Brave Shields blocks all scripts and inline handlers.
   JS (if available) saves the preference to localStorage for persistence. */
.cookie-dismiss-chk { display: none; }
.cookie-dismiss-chk:checked + .cookie-notice { display: none !important; }
html.si-ck-acked .cookie-notice { display: none !important; }

.cookie-notice {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13.5px;
}
.cookie-notice a { white-space: nowrap; margin-left: 6px; }
.cookie-notice .btn { padding: 6px 18px; flex: none; }
@media (max-width: 600px) {
  .cookie-notice { flex-direction: column; align-items: stretch; text-align: center; }
}
.legal-binding { color: var(--muted); font-style: italic; font-size: 13.5px; }

/* ===== Theme control & dark theme ===== */
.theme-switch {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}
.theme-switch:hover {
  color: var(--ink);
  border-color: rgba(214, 48, 39, 0.28);
  transform: rotate(8deg);
}
.theme-switch svg {
  grid-area: 1 / 1;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--transition), transform var(--transition);
}
.theme-switch-sun { opacity: 0; transform: scale(0.65) rotate(20deg); }
.theme-switch-moon { opacity: 1; transform: scale(1) rotate(0); }

.theme-switch:focus-visible,
.lang-button:focus-visible,
.btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

html[data-theme="light"] .logo-img { content: url("../img/inventtasks-logo-light-transparent.png"); }
html[data-theme="light"] .footer-brand .logo-mark { content: url("../img/inventtasks-icon-light-transparent.png"); }
html[data-theme="light"] .company-logo-img { content: url("../img/solidinvent/logo-group.png"); }

html[data-theme="dark"] {
  --bg: #060606;
  --bg-soft: #0e0e0e;
  --panel: #141414;
  --ink: #f0f0f0;
  --muted: rgba(255, 255, 255, 0.48);
  --brand: #d63027;
  --brand-dark: #9b1a15;
  --brand-soft: rgba(214, 48, 39, 0.12);
  --line: rgba(255, 255, 255, 0.08);
  --header: rgba(6, 6, 6, 0.78);
  --grid: rgba(255, 255, 255, 0.025);
  --glow-strong: rgba(214, 48, 39, 0.10);
  --glow-soft: rgba(214, 48, 39, 0.06);
  --shadow: 0 20px 58px rgba(0, 0, 0, 0.34);
}
html[data-theme="dark"] .logo-img { content: url("../img/inventtasks-logo-dark-transparent.png"); }
html[data-theme="dark"] .footer-brand .logo-mark { content: url("../img/inventtasks-icon-dark-transparent.png"); }
html[data-theme="dark"] .company-logo-img { content: url("../img/solidinvent/logo-group-white.png"); }
html[data-theme="dark"] .theme-switch-sun { opacity: 1; transform: scale(1) rotate(0); }
html[data-theme="dark"] .theme-switch-moon { opacity: 0; transform: scale(0.65) rotate(-20deg); }
html[data-theme="dark"] .lang-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; }
html[data-theme="dark"] .shot:hover .shot-frame {
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.56);
}
html[data-theme="dark"] .shot-frame.empty {
  background: repeating-linear-gradient(-45deg, var(--bg-soft), var(--bg-soft) 14px, var(--panel) 14px, var(--panel) 28px);
}
html[data-theme="dark"] .tip-crazy,
html[data-theme="dark"] .tip-crazy:hover {
  background: linear-gradient(90deg, #202020, var(--brand));
}
html[data-theme="dark"] .cookie-notice {
  background: rgba(20, 20, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (max-width: 760px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .landing-page .site-header nav > a { display: none; }
  .landing-page .site-header nav { gap: 8px; }
  .theme-switch { width: 34px; height: 34px; }
  .hero { padding-top: 72px; }
}

@media (min-width: 361px) and (max-width: 760px) {
  body:not(.landing-page) .header-inner { flex-wrap: nowrap; gap: 8px; }
  body:not(.landing-page) .site-header nav { gap: 8px; }
  body:not(.landing-page) .site-header nav a { font-size: 13px; }
}

@media (max-width: 380px) {
  .logo-img { height: 32px; }
  .header-inner { gap: 8px; }
  .legal .site-header nav a { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Purchase consent + mandated Merchant-of-Record disclosure (Paddle) —
   kept clearly visible near the pricing CTAs, not faded like a footnote. */
.price-consent {
  max-width: 640px;
  margin: 10px auto 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 13px;
}
.price-consent a { color: var(--brand); text-decoration: underline; }

/* Link out of a landing-page section into its dedicated page (/features/, /sync).
   Right-aligned and quiet: it is a way onward for people who want depth, not a
   competing call to action. */
.section-more {
  margin: 8px 0 0;
  text-align: right;
  font-size: 0.95rem;
}
.section-more a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}
.section-more a:hover {
  text-decoration: underline;
}

/* BRAT is the route an Obsidian user recognises, so it gets the brand colour
   rather than blending into the note text around it. The link goes to the
   community store page, which both explains what BRAT is and installs it —
   in a new tab, because sending a visitor away to the store our own plugin is
   not in would be a poor trade. */
.brat-link {
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}
.brat-link:hover,
.brat-link:focus-visible {
  border-bottom-color: var(--brand);
}