/* taldro.com, "Floor plan" in the app's tidewater palette. One stylesheet for every page, no
   scripts, nothing from elsewhere: the Content-Security-Policy in nginx.conf allows this origin's
   stylesheet, font and images only, so no inline style and no style attribute anywhere.
   The home drawn as a plan: a deep tidewater field, off-white plan lines, one kraft highlight.
   Bricolage Grotesque sets the headings and the wordmark; everything else uses the app's own
   system sans stack (ui/web/src/theme.ts), so the body needs no font file. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/bricolage-grotesque-c7e16028.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* the field: header, hero and closing band */
  --field: #0A4F57;
  --on-field: #F1F5F2;
  --field-muted: #B9D3D0;
  --field-line: #8FC9C9;
  --room: #0C6871;          /* the found room on the plan */
  --marker: #DDB97F;        /* kraft: the one highlight, never yellow */
  --on-marker: #1A1714;
  --pill: #F2E2C4;
  --on-pill: #2B1D07;
  --mark-box: #DDB97F;
  --mark-arm: #4FC1CC;

  /* the page */
  --bg: #F6F3EE;
  --surface: #FFFFFF;
  --ink: #1A1714;
  --muted: #554D44;
  --line: #D4CCC0;
  --line-strong: #7A7268;
  --teal: #0C6871;
  --on-teal: #FFFFFF;
  --foot-box: #B8905A;
  --foot-arm: #0C6871;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", var(--font);
  --max: 72rem;
  --gutter: 16px;
  --pad: max(var(--gutter), calc((100% - var(--max)) / 2));
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --field: #053A40;
    --bg: #13110E;
    --surface: #1D1A16;
    --ink: #F2EDE5;
    --muted: #B8AFA3;
    --line: #4A443B;
    --line-strong: #847B70;
    --teal: #4FC1CC;
    --on-teal: #13110E;
    --foot-box: #DDB97F;
    --foot-arm: #4FC1CC;
  }
}

@media (min-width: 600px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
p, ul, ol, dl, dd, figure, address { margin: 0; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
.nowrap { white-space: nowrap; }

a { color: var(--teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; border-radius: 4px; }
.page :focus-visible, .foot :focus-visible, main.section :focus-visible { outline-color: var(--teal); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 14px; background: var(--marker); color: var(--on-marker); border-radius: 6px;
}
.skip:focus { top: 12px; }

/* ---------- the field ---------- */

.field { background: var(--field); color: var(--on-field); }
.field a:not(.button) { color: var(--on-field); }

.bar {
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--pad);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { display: block; }
.mark-box { fill: none; stroke: var(--mark-box); stroke-width: 12; }
.mark-arm { fill: none; stroke: var(--mark-arm); stroke-width: 12; }
.wordmark {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 750; letter-spacing: -0.01em;
  color: var(--on-field);
}
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a, .signin { text-decoration: none; font-weight: 500; }
.nav a:hover, .signin:hover { text-decoration: underline; }
.signin { padding: 8px 14px; border: 1.5px solid var(--field-line); border-radius: 8px; }
@media (max-width: 760px) { .nav { display: none; } .signin { margin-left: auto; } }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
  padding: 40px var(--pad) 72px;
}
.hero h1 {
  font-size: clamp(3.4rem, 7.2vw, 6.4rem);
  font-stretch: 78%;
  font-weight: 750;
  line-height: 0.94;
  letter-spacing: -0.015em;
  max-width: 9ch;
}
.hero h1 .line { display: block; }
.lede { margin-top: 28px; max-width: 34em; font-size: 1.1875rem; line-height: 1.55; color: var(--on-field); }
.aside { margin-top: 18px; font-size: 0.9375rem; color: var(--field-muted); max-width: 38em; }
.aside + .aside { margin-top: 6px; }
.field .aside a { color: var(--on-field); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border-radius: 8px; font-weight: 650; text-decoration: none; font-size: 1.0625rem;
}
.button-marker { background: var(--marker); color: var(--on-marker); }
.button-marker:hover { background: var(--on-field); }
.button-line { border: 1.5px solid var(--field-line); color: var(--on-field); }
.button-line:hover { background: rgb(255 255 255 / 0.08); }
.button-solid { background: var(--teal); color: var(--on-teal); }
.button-solid:hover { background: var(--ink); color: var(--bg); }

/* the plan: a 640 × 520 drawing with the phone laid over its right side */
.floorplan { position: relative; aspect-ratio: 640 / 548; }
.plan-drawing { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; overflow: visible; }
.walls path { fill: none; stroke: var(--on-field); stroke-width: 5; stroke-linecap: square; }
.doors path { fill: none; stroke: var(--field-line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.stairs path { fill: none; stroke: var(--field-line); stroke-width: 1.5; }
.furniture rect, .shelves rect { fill: none; stroke: var(--field-line); stroke-width: 1.5; }
.room-hit { fill: var(--room); }
.shelves .shelf-found { fill: var(--marker); stroke: var(--marker); }
.labels text { fill: var(--field-muted); font-family: var(--font); font-size: 17px; font-weight: 500; }
.labels .small { font-size: 14px; }
.labels .found { fill: var(--on-field); font-weight: 700; }
.pin { fill: var(--room); stroke: var(--on-field); stroke-width: 4; }
.leader { fill: none; stroke: var(--marker); stroke-width: 2.5; }
.leader-end { fill: var(--marker); }

.phone {
  position: absolute; left: 66%; top: 7.6%; width: 33%;
  border-radius: 22px; overflow: hidden;
  outline: 6px solid #0A0F0F; outline-offset: 0;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
}
.phone img { width: 100%; }
.floorplan figcaption {
  position: absolute; left: 0; bottom: 0; width: 58%;
  font-size: 0.9375rem; color: var(--field-muted);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
  .hero h1 { max-width: none; }
}

/* A phone: the headline, then the plan at full width, then the top of the box's screen, then the
   words. The copy's children join the hero grid so the picture can sit right under the headline. */
@media (max-width: 600px) {
  .hero { gap: 0; padding-top: 28px; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; font-size: 2.875rem; font-stretch: 76%; }
  .hero h1 .line { white-space: nowrap; }
  .floorplan { order: 2; }
  .hero-copy > :not(h1) { order: 3; }
  .lede { margin-top: 28px; }

  .floorplan { aspect-ratio: auto; margin-top: 24px; overflow: hidden; }
  /* the drawing ends at x 404 of 640: show that part across the full width */
  .plan-drawing { position: static; width: calc(100% * 640 / 404); max-width: none; overflow: hidden; }
  .leader, .leader-end { display: none; }
  .phone {
    position: static; display: block; width: 100%; margin-top: 20px;
    aspect-ratio: 540 / 345;
    border-radius: 18px 18px 0 0; outline: 0; box-shadow: none;
    border: 4px solid #0A0F0F; border-bottom: 0;
  }
  .phone img { height: 100%; object-fit: cover; object-position: top; }
  .floorplan figcaption { position: static; width: auto; margin-top: 14px; }
}

/* ---------- the page ---------- */

.section { padding: 96px var(--pad) 0; }
.section h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-stretch: 82%;
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.section h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; }
.section-lede { margin-top: 18px; max-width: 40em; font-size: 1.125rem; color: var(--muted); }
.note { margin-top: 32px; max-width: 46em; color: var(--muted); font-size: 0.9375rem; }

/* how it works: a route with three stops */
.route {
  list-style: none; padding: 0; margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  counter-reset: stop;
  position: relative;
}
.route::before {
  content: ""; position: absolute; left: 23px; right: calc((100% - 80px) / 3 - 23px); top: 22px;
  border-top: 2px dashed var(--line-strong);
}
.route li { counter-increment: stop; position: relative; }
.route li::before {
  content: counter(stop);
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--ink);
  font-weight: 700; font-size: 1.125rem;
  margin-bottom: 22px; position: relative;
}
.route li:last-child::before { background: var(--marker); border-color: var(--ink); color: var(--on-marker); }
.route p { margin-top: 10px; color: var(--muted); max-width: 30em; }
@media (max-width: 760px) {
  .route { grid-template-columns: 1fr; gap: 32px; }
  .route::before { content: none; }
  .route li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 46px; bottom: -32px; border-left: 2px dashed var(--line-strong); }
  .route li { padding-left: 70px; }
  .route li::before { position: absolute; left: 0; top: 0; margin: 0; }
}

/* everything has a place: rooms inside rooms */
.place { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.nest { font-size: 0.9375rem; }
.nest-level {
  border: 2px solid var(--line-strong); padding: 10px 12px 14px; margin-top: 8px;
}
.nest > .nest-level { margin-top: 0; border-width: 4px; border-color: var(--ink); padding: 14px 16px 18px; }
.nest-level > span { display: block; color: var(--muted); font-weight: 500; }
.nest-found { background: var(--marker); border-color: var(--ink); padding: 14px; }
.nest-found > span { color: var(--on-marker); font-weight: 700; font-size: 1.0625rem; }
@media (max-width: 760px) { .place { grid-template-columns: 1fr; gap: 32px; } }

.facts {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 36px 40px;
}
.fact { border-top: 2px solid var(--ink); padding-top: 14px; }
.facts .fact h3 { font-size: 1.125rem; }
.fact p { margin-top: 8px; color: var(--muted); }

/* AI */
.ai {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px;
}
.ai-shot { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ai-shot p, .ai-text p { margin-top: 10px; color: var(--muted); }
.shot img { border-radius: 10px; border: 1px solid var(--line); }
.ai-text { border-left: 3px solid var(--teal); padding-left: 20px; }
@media (max-width: 900px) { .ai { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ai-shot { grid-template-columns: 1fr; } }

/* prices: a schedule, columns ruled like a drawing's table */
.flag { margin-top: 20px; }
.pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--pill); color: var(--on-pill); font-weight: 650; font-size: 0.9375rem;
}
.plans {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ink); background: var(--surface);
}
.plan { padding: 24px 22px 28px; border-left: 1px solid var(--line); }
.plan:first-child { border-left: 0; }
.section .plan h3 { font-size: 1.5rem; font-stretch: 85%; }
.status {
  display: inline-block; margin-top: 8px; padding: 2px 8px;
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 5px;
}
.status-now { color: var(--teal); border-color: var(--teal); }
.price { margin-top: 18px; }
.amount { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.amount-words { font-size: 1.75rem; }
.per { display: block; margin-top: 6px; font-size: 0.875rem; color: var(--muted); }
.plan-for { margin-top: 16px; font-weight: 650; }
.plan ul { margin-top: 10px; padding-left: 1.1em; color: var(--muted); font-size: 0.9375rem; }
.plan li + li { margin-top: 6px; }
.plan-now { box-shadow: inset 0 6px 0 var(--marker); }
@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
  .plan { border-left: 0; }
  .plan + .plan { border-top: 1px solid var(--line); }
}

.rules {
  margin-top: 40px; padding: 0; list-style: none;
  columns: 2 22rem; column-gap: 48px;
}
.rules li { break-inside: avoid; padding: 0 0 14px 18px; position: relative; color: var(--muted); }
.rules li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border: 2px solid var(--teal); }
.rules strong { color: var(--ink); font-weight: 650; }

/* planned */
.planned {
  margin-top: 40px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0 40px;
}
.planned li { border-top: 1px dashed var(--line-strong); padding: 18px 0 22px; }
.section .planned h3 { font-size: 1.125rem; }
.planned p { margin-top: 6px; color: var(--muted); }
.planned .status { margin-top: 12px; }

/* closing */
.closing { margin-top: 112px; padding: 80px var(--pad); }
.closing h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-stretch: 80%; line-height: 1; max-width: 20ch; }

/* ---------- the footer: the header's lockup on the page ---------- */

.foot {
  display: grid; gap: 8px; padding: 40px var(--pad) 48px;
  color: var(--muted); font-size: 0.9375rem;
}
.foot .brand { justify-self: start; margin-bottom: 8px; }
.foot .wordmark { color: var(--ink); }
.foot .mark-box { stroke: var(--foot-box); }
.foot .mark-arm { stroke: var(--foot-arm); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }

/* ---------- the 404 and the legal pages (Impressum, privacy, account deletion) ---------- */

main.section { padding-bottom: 72px; }
main.section h1 {
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); font-stretch: 80%; font-weight: 750;
  line-height: 1.02; letter-spacing: -0.01em;
}
.legal { max-width: calc(46rem + 2 * var(--pad)); }
.legal h1 { font-size: clamp(2.2rem, 1.7rem + 1.8vw, 3rem); }
.section.legal h2 { margin-top: 2.5rem; font-size: 1.3rem; font-stretch: 90%; max-width: none; line-height: 1.3; }
.legal p, .legal address { margin-top: 0.75rem; }
.legal ol, .legal ul { margin-top: 0.75rem; padding-left: 1.4em; }
.legal li + li { margin-top: 0.4rem; }
.legal section { margin-top: 3.5rem; }
.place-sub { margin-top: 28px; }
.place-sub + .section-lede { margin-top: 8px; }

/* the privacy notice: numbered sections, lists and two tables */
.section.legal h2.legal-lang { margin-top: 3.5rem; padding-top: 1rem; border-top: 2px solid var(--ink); font-size: 1.6rem; }
.legal h3 { margin-top: 2.25rem; font-size: 1.2rem; line-height: 1.3; }
.legal h4 { margin: 1.5rem 0 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
.legal ul { margin-top: 0.75rem; padding-left: 1.2em; }
.legal li + li { margin-top: 0.5rem; }
.legal code { font-size: 0.9em; overflow-wrap: anywhere; }
.legal a { overflow-wrap: anywhere; }
.legal-table { margin-top: 1rem; overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--surface); }
.legal th, .legal td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal th { font-weight: 650; border-bottom: 2px solid var(--line-strong); }