/* Karibu website. Plain CSS, no build step.
 * The playbook's website design system (playbook skill `website` → Design system), with Karibu's
 * tokens. The phone replica keeps the app's own colours and system font.
 *
 * | CSS token     | App token                          | Light     | Dark      |
 * |---------------|------------------------------------|-----------|-----------|
 * | --brand       | karibuSepia (app icon, accent)     | #704214   | #704214   |
 * | --accent      | accent                             | --brand   | #ffffff   |
 * | --accent-fill | accentFill                         | --brand   | #636363   |
 * | --app-page    | Color.page (systemGroupedBg)       | #f2f2f7   | #000000   |
 * | --card        | Color.card (secondarySystemGrouped)| #ffffff   | #1c1c1e   |
 * | --label       | label                              | #000000   | #ffffff   |
 * | --label-2     | secondaryLabel                     | #636366   | 70% white |
 * Site only: --page (white / black), --surface and --panel (light grey cards / elevated grey).
 */

/* MARK: - Fonts (self-hosted, OFL: see fonts/LICENSE-*.txt; nothing is requested from Google) */
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/merriweather-700.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/merriweather-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-variable.woff2") format("woff2"); }

/* MARK: - Tokens */
:root {
  --brand: #704214;              /* the app icon's colour: written by design/apply-brand.mjs */
  --accent: var(--brand);
  --accent-fill: var(--brand);
  --on-accent: #ffffff;
  --eyebrow: var(--brand);           /* small labels and card icons */
  --page: #ffffff;
  --panel: #f5f5f7;
  --surface: #f5f5f7;            /* site cards: steps, features, FAQ */
  --app-page: #f2f2f7;           /* inside app replicas only */
  --card: #ffffff;
  --label: #000000;
  --label-2: #636366;            /* secondary text, at least 5.3:1 on every surface */
  --label-3: rgba(60, 60, 67, 0.3);  /* decoration only, never text */
  --text-body: #3a3a3c;          /* paragraphs, at least 10:1 */
  --separator: rgba(60, 60, 67, 0.12);
  --font-display: "Merriweather", Georgia, "Times New Roman", serif;   /* h1, h2, wordmark, pull line */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #ffffff;
    --accent-fill: #636363;
    --on-accent: #000000;
    --eyebrow: #ffffff;
    --page: #000000;
    --panel: #111113;
    --surface: #1c1c1e;
    --app-page: #000000;
    --card: #1c1c1e;
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.7);
    --label-3: rgba(235, 235, 245, 0.3);
    --text-body: rgba(235, 235, 245, 0.86);
    --separator: rgba(84, 84, 88, 0.6);
    --shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.06);
    color-scheme: dark;
  }
}

/* MARK: - Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--label); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
.container { max-width: 60rem; margin: 0 auto; padding: 4rem 1rem; }
h1, h2, .brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.phone, .phone *, .app-card, .app-card * { font-family: var(--font-app); }

/* The house mark (the app icon) */
.mark { display: block; }
.mark rect { fill: var(--brand); }

/* MARK: - Site header */
.site-header-wrap { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--page) 86%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); }
.site-header { max-width: 60rem; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; color: var(--label); text-decoration: none; }
.brand .mark { width: 1.75rem; height: 1.75rem; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9375rem; }
.site-nav a { color: var(--text-body); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--label); }
.site-nav a[aria-current="page"] { font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 999px; background: var(--label); color: var(--page); font-weight: 600; font-size: 1rem; text-decoration: none; }

/* MARK: - Hero */
.hero { display: grid; gap: 3rem; align-items: center; padding-top: 1.5rem; margin-bottom: 5rem; }
.hero .mark { width: 4rem; height: 4rem; margin-bottom: 1.75rem; }
.hero h1 { margin: 0 0 1.25rem; font-size: 2.75rem; line-height: 1.12; }
.hero-sub { margin: 0 0 2rem; max-width: 30rem; font-size: 1.1875rem; line-height: 1.55; color: var(--text-body); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.hero-note { font-size: 0.9375rem; font-weight: 500; color: var(--label-2); }

/* MARK: - Pull line (the problem, in the buyer's words) */
.pull { max-width: 44rem; margin: 0 auto 6rem; padding: 0 0.5rem; text-align: center; }
.pull p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.75rem; line-height: 1.4; }

/* MARK: - Sections */
.section { margin-bottom: 6rem; }
.section-head { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }
.section-head h2 { margin: 0 0 1rem; font-size: 2.125rem; line-height: 1.18; }
.section-head p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--text-body); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--eyebrow); }
.eyebrow svg { width: 1rem; height: 1rem; }
.split { display: grid; gap: 2rem; align-items: center; }

/* Steps: how buying with Karibu works */
.steps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 1.5rem; background: var(--surface); border-radius: 1.25rem; counter-increment: step; }
.step::before { content: counter(step); position: absolute; top: 1.25rem; right: 1.5rem; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: color-mix(in srgb, var(--eyebrow) 22%, var(--surface)); }
.step-when { display: inline-block; margin-bottom: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: color-mix(in srgb, var(--eyebrow) 14%, var(--surface)); color: var(--eyebrow); font-size: 0.8125rem; font-weight: 600; }
.step h3 { margin: 0 0 0.5rem; font-size: 1.1875rem; }
.step p { margin: 0; line-height: 1.55; color: var(--text-body); }

/* Feature cards */
.features { display: grid; gap: 0.5rem; }
.card { background: var(--surface); border-radius: 1.25rem; padding: 1.5rem; }
.card h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; margin: 0 0 0.5rem; font-size: 1.125rem; }
.card h3 svg { box-sizing: content-box; width: 1.375rem; height: 1.375rem; padding: 0.625rem; border-radius: 12px; background: color-mix(in srgb, var(--eyebrow) 14%, var(--surface)); color: var(--eyebrow); }
.card p { margin: 0; line-height: 1.55; color: var(--text-body); }

/* App cards beside a split section: the app's own card, on its own page colour */
.app-panel { padding: 1.25rem; background: var(--app-page); border-radius: 2rem; box-shadow: var(--shadow-float); }
.app-card { background: var(--card); border-radius: 22px; padding: 1rem 1.125rem; color: var(--label); }
.app-card + .app-card { margin-top: 0.5rem; }
.app-label { display: flex; align-items: center; gap: 0.375rem; margin: 0 0.25rem 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.app-label + .app-card { margin-top: 0; }
.app-card + .app-label { margin-top: 1rem; }
.verdict-title { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.app-sub { margin: 0; font-size: 0.875rem; color: var(--label-2); }
.range { position: relative; height: 22px; margin: 1rem 0 0.5rem; }
.range .track { position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--label-2) 20%, transparent); }
.range .band { position: absolute; top: 7px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.range .dot { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card); }
.range .ask { position: absolute; top: 0; width: 3px; height: 22px; margin-left: -1.5px; border-radius: 1.5px; background: var(--label); }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.8125rem; color: var(--label-2); }
.legend i { display: inline-block; vertical-align: middle; margin-right: 0.3rem; }
.legend .l-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.legend .l-ask { width: 3px; height: 10px; border-radius: 1px; background: var(--label); }
.fact { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9375rem; border-bottom: 1px solid var(--separator); }
.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact:first-child { padding-top: 0; }
.fact span:last-child { color: var(--label-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.big-number { font-size: 1.5rem; font-weight: 700; }

/* MARK: - FAQ */
.faq { display: grid; gap: 0.5rem; max-width: 40rem; margin: 0 auto; }
details { padding: 1.25rem 1.5rem; background: var(--surface); border-radius: 1.25rem; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.25rem; border-right: 2px solid var(--label-3); border-bottom: 2px solid var(--label-3); transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease-out); }
details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
details p { margin: 0.625rem 0 0; line-height: 1.6; color: var(--text-body); }

/* MARK: - Closing panel */
.cta { padding: 3.5rem 1.5rem; text-align: center; background: var(--panel); border-radius: 2rem; }
.cta .mark { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; }
.cta h2 { margin: 0 0 0.5rem; font-size: 2rem; letter-spacing: -0.02em; }
.cta p { margin: 0; color: var(--text-body); }

/* MARK: - Footer */
.site-footer { max-width: 60rem; margin: 0 auto; padding: 2rem 1rem 3rem; font-size: 0.875rem; color: var(--label-2); }
.site-footer .inner { padding-top: 2rem; border-top: 1px solid var(--separator); display: grid; gap: 1rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer a { color: var(--text-body); text-decoration: none; }
.site-footer a:hover { color: var(--label); }

/* MARK: - Document pages (Support, Privacy) */
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
.doc { padding: 2.5rem 0 1rem; }
.doc h1 { margin: 0 0 0.75rem; font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.02em; }
.doc h2 { margin: 2.75rem 0 0.75rem; font-size: 1.375rem; }
.doc .lead { margin: 0 0 1.5rem; font-size: 1.125rem; color: var(--text-body); }
.doc p, .doc li { color: var(--text-body); line-height: 1.65; }
.doc ul { padding-left: 1.25rem; }
.doc li + li { margin-top: 0.5rem; }
.doc details + details { margin-top: 0.5rem; }
.muted { color: var(--label-2); }
table.sources { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 1.25rem; overflow: hidden; font-size: 0.9375rem; }
table.sources th, table.sources td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--separator); vertical-align: top; }
table.sources tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
@media (max-width: 600px) {
  table.sources thead { display: none; }
  table.sources, table.sources tbody, table.sources tr, table.sources td { display: block; width: 100%; }
  table.sources tr { border-bottom: 1px solid var(--separator); padding: 0.5rem 0; }
  table.sources tr:last-child { border-bottom: 0; }
  table.sources td { border: 0; padding: 0.25rem 1rem; }
  table.sources td:first-child { font-weight: 600; }
  table.sources td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--label-2); }
}

/* The phone: an iPhone screen rebuilt from the app's real layout (made-up homes, #137) */
.phone { width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 393 / 852; background: #0b0b0c; border-radius: 56px; padding: 11px; box-shadow: 0 0 0 1.5px #3a3a3c, 0 30px 60px -30px rgba(0,0,0,.35); }
.phone .screen { position: relative; height: 100%; overflow: hidden; background: var(--app-page); border-radius: 46px; padding: 0 12px; display: flex; flex-direction: column; font-size: 14px; }
.phone .status { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 18px 0 22px; color: var(--label); flex: none; }
.phone .time { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.phone .island { position: absolute; left: 50%; top: 10px; width: 96px; height: 28px; margin-left: -48px; background: #000; border-radius: 20px; }
.phone .sys { display: flex; gap: 5px; align-items: center; }
.phone .sys svg { height: 11px; width: auto; fill: currentColor; color: var(--label); }
.phone .navbar { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 0; flex: none; }
.phone .pill, .phone .circle { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); color: var(--label); font-size: 14px; font-weight: 500; }
.phone .pill { padding: 7px 13px; border-radius: 18px; }
.phone .circle { width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; }
.phone .circle svg { width: 18px; height: 18px; }
.phone .title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; margin: 6px 4px 10px; flex: none; }
.row { background: var(--card); border-radius: 22px; padding: 12px 15px; margin-bottom: 7px; }
.row .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.row .addr { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.row .price { font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .facts { color: var(--label-2); font-size: 12.5px; margin-top: 3px; line-height: 1.35; }
.row .verdict { color: var(--accent); font-size: 12.5px; font-weight: 500; margin-top: 3px; }
.phone .list { flex: 1; min-height: 0; overflow: hidden; }
.phone .bottom { padding: 8px 0 22px; }
.composer { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 22px; padding: 11px 14px; color: var(--label-2); font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.composer svg { width: 19px; height: 19px; flex: none; color: var(--accent); }
.composer span { flex: 1; }
.phone .tabbar { display: flex; justify-content: space-around; margin-top: 8px; background: var(--card); border-radius: 30px; padding: 6px 4px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.phone .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 500; color: var(--label-2); padding: 3px 8px; border-radius: 20px; }
.phone .tab svg { width: 19px; height: 19px; }
.phone .tab.on { color: var(--accent); background: var(--app-page); }
.phone .home-indicator { position: absolute; bottom: 7px; left: 50%; width: 120px; margin-left: -60px; height: 4px; border-radius: 2px; background: var(--label); opacity: .85; }

/* MARK: - Breakpoints */
@media (min-width: 720px) {
  .container { padding: 6rem 2rem; }
  .hero { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; margin-bottom: 7rem; }
  .hero h1 { font-size: 3.75rem; line-height: 1.08; }
  .hero-sub { font-size: 1.25rem; }
  .pull { margin-bottom: 8rem; }
  .pull p { font-size: 2.25rem; }
  .section { margin-bottom: 8rem; }
  .section-head h2 { font-size: 2.75rem; }
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split .section-head { margin: 0; text-align: left; }
  .steps, .features { grid-template-columns: repeat(3, 1fr); }
  .cta { padding: 4.5rem 2rem; }
  .doc { padding-top: 3.5rem; }
}

/* MARK: - Motion: a short fade-up as the page opens; none with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.7s var(--ease-out) both; }
  .rise.d1 { animation-delay: 0.12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}