/* Fennig marketing site — Corner Shop, traced from the app's src/index.css so the page
   someone lands on and the app they then open are recognisably the same product.
   Warm paper, mustard, ink outlines with hard offset shadows. Square corners everywhere.
   Self-hosted fonts (LG München I, 3 O 17493/20 — no Google Fonts CDN). */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #faf3e3;
  --surface: #fffdf6;
  --surface-2: #fbeacb;
  --border: #e7e5e4;
  --muted: #57534e;
  --faint: #78716c;
  --text: #1c1917;
  --ink: #1c1917;
  /* Mustard is a fill only — 2.2:1 on paper. The signal red-orange carries text. */
  --accent: #e4572e;
  --accent-on-dark: #e8a317;
  --brand: #e8a317;
  /* Panel outline and lift, mirroring the app's --panel-* so a card reads the same
     on the landing page and inside the product. */
  --panel-w: 2px;
  --panel-shadow: 4px 4px 0 var(--ink);
  --font-sans: 'Schibsted Grotesk', system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* No tabular-nums here, deliberately — the same trap the app hit (see the note in
   src/index.css). Both faces map comma and full stop to tabular forms under `tnum`,
   and those carry a digit's advance width, so every sentence on the page rendered as
   "nothing is booked until you approve it ." Nothing here is a column of figures that
   has to hold its width, so the feature buys nothing back. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 28px;
  height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.site-nav { display: flex; gap: 22px; }
.site-nav a {
  text-decoration: none; font-size: 0.875rem; color: var(--muted);
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--text); }

.lang-switch {
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; color: var(--muted); font-size: 0.8rem; font-weight: 600;
  font-family: var(--font-display); letter-spacing: 0.02em;
  border: 1px solid var(--border); padding: 0.4rem 0.6rem;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.lang-switch:hover { color: var(--text); border-color: var(--ink); background: var(--surface-2); }
.lang-switch svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a:hover { color: var(--text); }
.lang-switch .lang-current { color: var(--text); }
.lang-switch .lang-sep { color: var(--border); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.7rem 1.3rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--ink);
  transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
}
.btn-primary { background: var(--brand); color: var(--ink); border: var(--panel-w) solid var(--ink); box-shadow: var(--panel-shadow); }
.btn-primary:hover { background: var(--accent); color: #faf3e3; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #faf3e3; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.btn:active { transform: scale(0.97); }
.btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- section scaffolding ---------- */
section { border-bottom: 1px solid var(--border); }
.section-pad { padding: 88px 0; }
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
}
.kicker::after { content: ''; height: 1px; flex: 0 0 48px; background: var(--accent); }
.section-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; max-width: 22ch; }
.section-lead { color: var(--muted); max-width: 58ch; margin-top: 14px; font-size: 1.02rem; }

/* ---------- hero ---------- */
.hero { border-bottom: 1px solid var(--border); overflow: hidden; }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px;
}
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); font-weight: 700; }
.hero h1 .accent { color: var(--accent); }
.hero .sub { color: var(--muted); font-size: 1.08rem; max-width: 46ch; margin-top: 20px; }
.hero .cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero .fine { margin-top: 14px; font-size: 0.82rem; color: var(--faint); }
/* Bottom-aligned rather than centred, and with the hero cat's overhang reserved above
   it. The reserve has to be explicit: leaning on whatever slack the copy column happened
   to leave cut the cat's ears off in English, where the same paragraph runs two lines
   shorter than in German. A percentage margin resolves against the column width, and
   the art's height is a fixed ratio of that width, so 32% is the overhang at every
   viewport size. It also makes the art the tallest thing in the row, which is why the
   hero now measures the same in all four languages instead of following the copy. */
.hero-art { position: relative; align-self: end; margin-top: 24%; }

/* trust strip */
.trust { background: var(--ink); color: #faf3e3; border-bottom: 1px solid var(--ink); }
.trust .wrap {
  display: flex; flex-wrap: wrap; gap: 10px 36px; align-items: center;
  padding-top: 16px; padding-bottom: 16px;
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.trust span { display: flex; align-items: center; gap: 9px; color: #d6d3d1; }
.trust b { color: var(--accent-on-dark); font-weight: 700; }

/* ---------- feature grid ---------- */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-right: 0; border-bottom: 0;
  margin-top: 48px; background: var(--border); gap: 1px;
}
.feature {
  background: var(--surface); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.25s;
}
.feature:hover { background: var(--surface-2); }
.feature .num { font-family: var(--font-display); font-size: 0.75rem; color: var(--faint); letter-spacing: 0.12em; }
.feature h3 { font-size: 1.08rem; font-weight: 700; }
.feature p { color: var(--muted); font-size: 0.9rem; }
.feature .icon { width: 34px; height: 34px; color: var(--accent); }

/* ---------- split showcase rows ---------- */
.show-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center; margin-top: 120px;
}
/* The wide gap is the cats' headroom: each one stands on the top edge of the panel
   below it, and 72px left its raised paws in the previous row's last bullet. */
.show-row:first-of-type { margin-top: 64px; }
.show-row.flip > .show-art { order: -1; }
.show-copy h3 { font-size: 1.5rem; font-weight: 700; }
.show-copy p { color: var(--muted); margin-top: 12px; max-width: 50ch; }
.show-copy ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.show-copy li { display: flex; gap: 10px; font-size: 0.92rem; align-items: baseline; }
.show-copy li::before { content: '■'; color: var(--accent); font-size: 0.6rem; flex: 0 0 auto; position: relative; top: -1px; }
.show-art { border: var(--panel-w) solid var(--ink); box-shadow: var(--panel-shadow); background: var(--surface); padding: 20px; }

/* ---------- dark germany section ---------- */
.de-band { background: var(--ink); color: #faf3e3; }
.de-band .kicker { color: var(--accent-on-dark); }
.de-band .kicker::after { background: var(--accent-on-dark); }
.de-band .section-lead { color: #a8a29e; }
.de-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #44403c; border: 1px solid #44403c; margin-top: 44px; }
.de-card { background: var(--ink); padding: 26px; }
.de-card h3 { font-size: 1.02rem; color: #faf3e3; margin-bottom: 10px; }
.de-card p { color: #a8a29e; font-size: 0.9rem; }
.de-card .badge {
  display: inline-block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on-dark);
  border: 1px solid #44403c; padding: 4px 8px; margin-bottom: 16px;
}

/* ---------- pricing ---------- */
/* margin-top leaves the free plan's cat room to stand on the card's top edge. */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 110px; max-width: 860px; }
.plan { border: var(--panel-w) solid var(--ink); box-shadow: var(--panel-shadow); background: var(--surface); padding: 30px; display: flex; flex-direction: column; }
.plan.pro { box-shadow: 6px 6px 0 var(--ink); position: relative; }
.plan .tag {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: #faf3e3;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px;
}
.plan h3 { font-size: 1.2rem; }
.plan .price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; margin-top: 16px; }
.plan .price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.plan .per { font-size: 0.82rem; color: var(--faint); margin-top: 2px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 0.9rem; align-items: baseline; }
.plan li::before { content: '■'; color: var(--accent); font-size: 0.6rem; position: relative; top: -1px; }
.plan li.off { color: var(--faint); }
.plan li.off::before { content: '□'; color: var(--faint); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-top: 40px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 2px; font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  transition: color 0.2s;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.3rem; color: var(--accent); transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 2px 20px; color: var(--muted); font-size: 0.93rem; max-width: 62ch; }

/* ---------- final CTA + footer ---------- */
.final-cta { text-align: center; }
.final-cta .section-title { margin: 0 auto; }
.final-cta .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.site-footer { padding: 40px 0 56px; color: var(--faint); font-size: 0.84rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.site-footer .brand { margin-right: auto; }
.site-footer a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--text); }

/* ---------- legal pages ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 64px 20px 96px; }
.legal h1 { font-size: 2rem; margin-bottom: 8px; }
.legal h2 { font-size: 1.15rem; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 0.95rem; }
.legal .todo { background: #fdf0ec; border: 1px solid var(--accent); color: var(--text); padding: 12px 14px; font-size: 0.9rem; margin: 20px 0; }
.legal .updated { color: var(--faint); font-size: 0.82rem; }

/* ---------- brand cat ---------- */
/* The app's section cat, on the page that sells it. Same drawings as src/doodles.tsx,
   one pose per placement and never the same pose twice — each viewBox is cropped to its
   own ink, with the feet exactly on the bottom edge, so a cat is placed by standing it
   on a line the page already draws: bottom:100% of the panel or grid below it. */
.cat {
  position: absolute;
  color: var(--ink);
  pointer-events: none;
}
/* The lines the cats stand on. An absolutely positioned child of a grid or flex
   container is not a grid or flex item, so the cat perches without joining the layout. */
.feature-grid, .de-grid, .show-art, .plan { position: relative; }
/* Standing on the top edge of the invoice sheet, which starts 6.5% down the artwork.
   The art hangs from the bottom of its column (see .hero-art) purely to free the
   headroom this cat needs; centred, there is nowhere for its ears to go. */
.cat-hero { left: 44%; bottom: 93.5%; height: 39%; transform: translateX(-50%); }
/* Every perch is `calc(100% + 3px)`, not `100%`. Percentage offsets resolve against the
   padding box, so a plain 100% lands the feet on the *inner* edge of the frame and draws
   the leg strokes through the border line; the widest frame here is 2px, and 3px clears
   it with a hair to spare. The cats stand on the line, they do not cross it. */
/* On the top rule of a card grid, in the empty run to the right of the section lead. */
.cat-features { right: 6px; bottom: calc(100% + 3px); height: 138px; }
.cat-de { right: 6px; bottom: calc(100% + 3px); height: 132px; color: var(--bg); }
/* On the top edge of a showcase panel. */
.cat-scan { right: 26px; bottom: calc(100% + 3px); height: 118px; }
.cat-tax { right: 26px; bottom: calc(100% + 3px); height: 112px; }
.cat-clients { left: 40px; bottom: calc(100% + 3px); height: 116px; }
.cat-price { left: 30px; bottom: calc(100% + 3px); height: 104px; }
/* The only one in the flow: centred above the closing line, so it has room to be big. */
.cat-cta { position: static; height: 124px; margin: 0 auto 4px; }

/* ---------- reveal animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal.in { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal-stagger.in > * { opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 70ms; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 140ms; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 210ms; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 280ms; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 350ms; }

  /* hero entrance */
  .hero-copy > * { animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .hero-copy > *:nth-child(2) { animation-delay: 80ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 240ms; }
  .hero-copy > *:nth-child(5) { animation-delay: 320ms; }
  .hero-art { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }

  /* floating cards in hero art */
  .float-a { animation: floaty 5.5s ease-in-out infinite; }
  .float-b { animation: floaty 6.5s ease-in-out 0.8s infinite; }
  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

  /* bar chart grows when revealed */
  .chart-svg .bar { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .in .chart-svg .bar { transform: scaleY(1); }
  .in .chart-svg .bar:nth-child(2) { transition-delay: 70ms; }
  .in .chart-svg .bar:nth-child(3) { transition-delay: 140ms; }
  .in .chart-svg .bar:nth-child(4) { transition-delay: 210ms; }
  .in .chart-svg .bar:nth-child(5) { transition-delay: 280ms; }
  .in .chart-svg .bar:nth-child(6) { transition-delay: 350ms; }

  /* scan line sweep */
  .scanline { animation: sweep 2.6s ease-in-out infinite; }
  @keyframes sweep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(84px); } }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; padding-bottom: 56px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .de-grid { grid-template-columns: 1fr; }
  .show-row { grid-template-columns: 1fr; gap: 92px; margin-top: 88px; }
  .show-row.flip > .show-art { order: 0; }
  .section-pad { padding: 60px 0; }

  /* Stacked, every panel has body copy directly above it instead of a column of white
     space, so the gaps above the perches carry the cats and the cats get smaller.
     The hero's cat is the one that loses: its art lands right under the CTA row. */
  .feature-grid, .de-grid, .price-grid { margin-top: 96px; }
  .cat { height: 84px; }
  /* No cat above the art here, so nothing to reserve room for. */
  .cat-hero { display: none; }
  .hero-art { margin-top: 0; }
  .cat-cta { height: 96px; }

  /* The header row is brand + nav + language switch + button, none of which shrinks
     to anything readable; past here it pushed the whole page sideways. The button is
     the one to drop — it is the same call to action the hero repeats one screen down,
     while the language switch is the only one on the page above the footer. */
  .site-header .btn { display: none; }
}
@media (max-width: 700px) {
  .site-nav { display: none; }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
}