/* Samojako — staging marketing site. Built from cd-handoffs/website.dc.html (D4 → I113; B59).
 *
 * ⚠ ONE STYLESHEET, NO JAVASCRIPT, NO COOKIES, NO THIRD-PARTY REQUEST OF ANY KIND.
 * The @font-face rules are INLINED here rather than @import-ed from a second file, because
 * "one CSS file" was the ruling and an @import is both a second file and a second round trip.
 * The faces are the vendored ones from B56 — never Google's CDN, which hands every visitor's
 * IP to Google before first paint (LG München I, 3 O 17493/20).
 */

@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/DMMono-latin-ext-c33164c0.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/DMMono-latin-e1ed461a.woff2') format('woff2');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;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/DMMono-latin-ext-b438d339.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/DMMono-latin-c4598219.woff2') format('woff2');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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Inter-latin-ext-1ad231aa.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Inter-latin-260c81a4.woff2') format('woff2');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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Inter-latin-ext-1ad231aa.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Inter-latin-260c81a4.woff2') format('woff2');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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Inter-latin-ext-1ad231aa.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Inter-latin-260c81a4.woff2') format('woff2');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;}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Syne-latin-ext-2f261df7.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Syne-latin-559e8363.woff2') format('woff2');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;}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/Syne-latin-ext-2f261df7.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/Syne-latin-559e8363.woff2') format('woff2');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 {
  --ground: #0F1013;   /* page */
  --card:   #181A20;   /* raised panel */
  --rule:   #2C313A;   /* hairline */
  --edge:   #454C59;   /* button border, dashed placeholder */
  --ink:    #EDEFF2;   /* primary text */
  --muted:  #9AA1AA;   /* body text */
  --dim:    #6B727C;   /* fine print */
  --gold:   #C9A227;   /* the one accent */
  --gold-h: #D8B23A;   /* its hover */
  --shot-w: 312px;     /* every phone figure is this wide — the crop maths depends on it */
}

*{ box-sizing: border-box }
html, body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; min-height: 100vh }
a { color: var(--ink); text-decoration: none }
a:hover { color: var(--gold-h) }
img { max-width: 100% }

.wrap { max-width: 1120px; margin: 0 auto; padding: 88px 24px }
.eyebrow {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; color: var(--muted);
}
h1, h2 { margin: 0; font-family: 'Syne', 'Inter', sans-serif; text-wrap: balance }
h1 { font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -.01em }
h2 { font-weight: 700; font-size: clamp(30px, 4vw, 40px); line-height: 1.1 }
p  { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty }
.lede { font-size: 19px; line-height: 1.55; max-width: 520px }
.say  { color: var(--ink) }              /* the one line that is not muted */

/* ── header / footer ─────────────────────────────────────────────────────── */
/* ── THE PRIVATE-TESTING BANNER (B62) ─────────────────────────────────────────
   ⚠ PLAIN, NOT GOLD, AND THAT IS THE RULING. Gold is this site's one accent and it
   means "do this" — the hero CTA, the closing CTA. A banner that says "you cannot
   have this yet" must not wear the colour that invites a tap. So: the card ground,
   muted text, a hairline under it, and the one live word is the invite link.
   It sits ABOVE the header, so it is the first thing on every page including the
   legal ones, and it is in the flow rather than fixed — nothing here should follow
   a reader down a page they are only reading once. */
.testing-banner {
  background: var(--card); border-bottom: 1px solid var(--rule);
}
.testing-banner .bar {
  max-width: 1120px; margin: 0 auto; padding: 11px 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 14px; line-height: 1.5; color: var(--muted);
}
.testing-banner strong { color: var(--ink); font-weight: 600 }
.testing-banner a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px }
.testing-banner a:hover { color: var(--ink) }

.site-head { border-bottom: 1px solid var(--rule) }
.site-head .bar, .site-foot .bar {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.site-head .mark { display: flex; align-items: center }
.site-head .mark img { height: 44px; width: auto; margin: -8px -9px }
nav { display: flex; align-items: center; gap: 20px }
.nav-quiet { font-size: 15px; color: var(--muted) }
.nav-quiet:hover { color: var(--ink) }
.btn-ghost {
  font-size: 15px; font-weight: 500; padding: 10px 18px;
  border: 1px solid var(--edge); border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.btn-ghost:hover { border-color: var(--muted); color: var(--ink) }
.btn-gold {
  background: var(--gold); color: var(--ground); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: 14px;
}
.btn-gold:hover { background: var(--gold-h); color: var(--ground) }
.site-foot { border-top: 1px solid var(--rule) }
.site-foot .bar { padding: 32px 24px 40px; gap: 20px 40px }
.site-foot nav { flex-wrap: wrap; gap: 12px 28px; font-size: 14px }
.fine {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .04em;
  color: var(--dim); line-height: 1.6; max-width: 460px;
}

/* ── the phone figures ───────────────────────────────────────────────────────
 * ⚠ THE CROP IS IN THE FILE NOW, NOT HERE. Each WebP is exactly the window the drawing showed,
 * cut from the capture with Pillow (scripts kept in the scratchpad): 1,260 KB of PNG became
 * 233 KB of WebP for seven figures. So there is no `position:relative` and no negative `top` —
 * the image simply fills its frame, and the browser downloads the window rather than the whole
 * 780x5642 screenshot to show a slice of it.
 * Width stays NATIVE 780px rather than a 624px 2x: at 312 CSS px a 3x phone wants 936 device
 * px, so 780 is already the ceiling of what the captures hold. The 624 variant saved 45 KB and
 * cost real sharpness on 3x screens — measured, then discarded.
 * Everything below the hero keeps loading="lazy", and every <img> now carries its true width
 * and height so a lazy image reserves its box instead of shifting the page when it lands. */
.shot {
  margin: 0; flex: 0 0 auto; width: var(--shot-w); border-radius: 28px;
  border: 1px solid var(--rule); overflow: hidden; background: var(--ground);
}
.shot img { display: block; width: var(--shot-w); height: auto }
.h624 { height: 624px } .h600 { height: 600px } .h416 { height: 416px }

/* ── sections ────────────────────────────────────────────────────────────── */
.band { border-top: 1px solid var(--rule) }
.split {
  display: flex; flex-wrap: wrap; gap: 56px;
  align-items: center; justify-content: space-between;
}
.split.rev { flex-wrap: wrap-reverse }
.col { flex: 1 1 420px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 20px }
.col.hero { flex-basis: 440px; max-width: 600px; gap: 24px }
.stack { display: flex; flex-direction: column; gap: 32px }

.plain { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--rule) }
.plain li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--ink) }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
              background: var(--rule); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden }
.grid-cards > div { background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 8px }
.grid-cards .t { font-weight: 600; font-size: 17px; color: var(--ink) }
.grid-cards .d { font-size: 15px; line-height: 1.55; color: var(--muted) }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px }
.plan { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 28px;
        display: flex; flex-direction: column; gap: 12px }
.price { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 44px; line-height: 1 }
.per   { font-family: 'DM Mono', ui-monospace, monospace; font-size: 14px; color: var(--muted) }
.plan .note { font-size: 16px; line-height: 1.55; color: var(--muted) }
.plan .note.say { color: var(--ink) }

/* ⚠ THE PLACEHOLDER. It is DRAWN, not hidden: counsel has not written the Impressum or the
 * privacy text, and a page that quietly omits them reads as finished. Dashed on purpose. */
.counsel {
  border: 1px dashed var(--edge); border-radius: 16px; padding: 40px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.counsel .what { font-size: 16px; line-height: 1.6; color: var(--muted) }
.legal { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; display: flex; flex-direction: column; gap: 28px }
.legal h1 { font-size: 44px; line-height: 1.05 }

/* ── THE LEGAL PAGES (B61) ────────────────────────────────────────────────────
   ⚠ EVERYTHING HERE IS DRAFT FURNITURE AND MOST OF IT COMES OFF BEFORE THE SITE
   OPENS. Two things must be impossible to miss while it is up: an unfilled
   [BRACKET], and the block of notes addressed to counsel. Both are therefore
   loud rather than tasteful — that is the point, not an oversight. */
.legal-notes {
  border: 1px solid var(--gold); border-left-width: 4px; border-radius: 12px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
  background: rgba(201, 162, 39, 0.07);
}
.legal-notes h2 {
  margin: 0; font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; font-weight: 500; color: var(--gold);
}
.legal-notes ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px }
.legal-notes li { font-size: 14px; line-height: 1.55; color: var(--muted) }
.legal-notes .off {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .06em; color: var(--gold); line-height: 1.5;
}

/* ⚠ AN UNFILLED FIELD. Never invented, never quietly omitted — shown. */
.gap {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: .92em;
  background: rgba(201, 162, 39, 0.16); color: var(--gold);
  border-bottom: 1px dashed var(--gold); padding: 1px 4px; border-radius: 3px;
}

.lang-note {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--dim); text-transform: uppercase;
}
.legal-doc { display: flex; flex-direction: column; gap: 22px }
.legal-doc h2 {
  margin: 26px 0 0; font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 24px; line-height: 1.2; color: var(--ink);
}
.legal-doc h3 {
  margin: 18px 0 0; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 17px; line-height: 1.3; color: var(--ink);
}
.legal-doc p  { font-size: 17px; line-height: 1.6; color: var(--muted) }
.legal-doc ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px }
.legal-doc li { font-size: 17px; line-height: 1.55; color: var(--muted) }
.legal-doc .addr { font-size: 17px; line-height: 1.7; color: var(--ink) }
.legal-doc strong { color: var(--ink); font-weight: 600 }
.legal-doc em { color: var(--dim); font-style: italic }
.legal-rule { border: 0; border-top: 1px solid var(--rule); margin: 34px 0 0; width: 100% }
.variant {
  border-left: 2px solid var(--rule); padding-left: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.variant .which {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--gold); text-transform: uppercase;
}
.min320 { min-height: 320px } .min480 { min-height: 480px }

@media (max-width: 720px) {
  .wrap { padding: 56px 20px }
  .split { gap: 36px }
}