/*
  Quib — the public site's brand (quib.video), shared by the static pages in landing/.
  D207 brand (Peter's mockup 90): navy headings, blue buttons, product logos, system font.
  Light and dark follow the visitor's system through prefers-color-scheme; there is no toggle.
  Each page keeps only its own layout CSS inline. First used by /closer-look/ (D208); the D207
  early-access page moves onto it when it is rebuilt. Served at /brand/* by Caddy's @landing matcher.
*/
:root{
  --background:oklch(0.9940 0 0); --foreground:oklch(0 0 0); --card:oklch(0.9940 0 0);
  --navy:#0A2A57; --primary:#1E5BFF; --primary-hover:#1A4FE0; --primary-foreground:#fff; --ring:#1E5BFF;
  --muted:oklch(0.9702 0 0); --muted-foreground:#5b6b83;
  --accent:rgb(30 91 255/.10); --accent-foreground:#1E5BFF;
  --destructive:oklch(0.6290 0.1902 23.07); --border:#e6ebf3; --sidebar:#f6f8fc; --ok:oklch(0.55 0.15 155);
  --radius:.5rem; --maxw:1120px;
  --heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 8px 24px -8px rgb(10 42 87/.14),0 2px 6px -2px rgb(10 42 87/.06);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --background:oklch(0.2223 0.0060 271.1393); --foreground:oklch(0.9551 0 0); --card:oklch(0.2568 0.0076 274.6528);
    --navy:#e8eefb; --primary:oklch(0.6250 0.2200 264.4); --ring:oklch(0.6250 0.2200 264.4);
    --muted:oklch(0.2940 0.0130 272.9312); --muted-foreground:oklch(0.7058 0 0);
    --accent:rgb(94 140 255/.16); --accent-foreground:#8fb0ff;
    --destructive:oklch(0.7106 0.1661 22.2162); --border:oklch(0.3289 0.0092 268.3843);
    --sidebar:oklch(0.2011 0.0039 286.0396); --ok:oklch(0.75 0.15 155);
    --shadow:0 8px 24px -8px rgb(0 0 0/.5);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--heading);letter-spacing:-.02em;margin:0;line-height:1.15;color:var(--navy)}
h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;margin-top:8px}
a{color:inherit}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.s{width:16px;height:16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}

/* logos: the Quib mark and the product logos are navy on light; white on dark */
.logo-img{display:block;width:auto}
.tool-logo{height:24px;width:auto;display:block}
@media (prefers-color-scheme:dark){.logo-img,.tool-logo{filter:brightness(0) invert(1)}}

/* buttons: blue primary + outline, one name for one action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;font:600 15px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-p{background:var(--primary);color:var(--primary-foreground);box-shadow:0 6px 18px rgb(30 91 255/.28)}
.btn-p:hover{background:var(--primary-hover)}
.btn-o{background:var(--card);border-color:var(--border);color:var(--navy)}
.btn-o:hover{background:var(--muted)}
.btn-sm{min-height:40px;padding:0 14px;font-size:14px}
.btn-lg{min-height:52px;padding:0 26px;font-size:16px}
@media (prefers-color-scheme:dark){.btn-p:hover{background:var(--primary);filter:brightness(1.08)}}

/* links: Sign in in the top bar, and an inline link in text */
.signin{font-size:15px;font-weight:600;color:var(--foreground);text-decoration:none;padding:10px 12px;border-radius:var(--radius)}
.signin:hover{background:var(--muted);text-decoration:underline}
a.inl{color:var(--accent-foreground);font-weight:600}

/* top bar */
header.nav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--background) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:8px;height:64px}
.nav .sp{flex:1}

/* hero */
.hero{background:radial-gradient(1200px 500px at 50% -120px,rgb(30 91 255/.10),transparent 70%);text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:#1E5BFF;background:rgb(30 91 255/.10);border:1px solid rgb(30 91 255/.20);padding:6px 14px;border-radius:999px}
@media (prefers-color-scheme:dark){.pill{color:#8fb0ff;background:rgb(94 140 255/.14);border-color:rgb(94 140 255/.3)}}
.hero h1{margin-top:20px;font-weight:800;letter-spacing:-.03em;line-height:1.04;font-size:clamp(38px,6vw,62px)}
.lede{max-width:720px;margin:18px auto 0;font-size:19px;color:var(--muted-foreground);text-wrap:balance}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* sections */
section.block{padding:72px 0}
.soft{background:var(--sidebar);border-block:1px solid var(--border)}
.sub{color:var(--muted-foreground);font-size:17px;margin:12px 0 0;max-width:640px}
.center{text-align:center}.center .sub{margin-inline:auto}
.ic{width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--accent-foreground);display:grid;place-items:center}
.after{text-align:center;margin:18px 0 0;font-size:15px}

/* the AI promise band: quib.video's navy gradient, the same in light and dark */
.aiband{background:linear-gradient(135deg,#0A2A57,#143a73);border:0}
.aiband h2{color:#fff}
.aiband .sub{color:#c9d6ef}

/* footer */
footer{border-top:1px solid var(--border);padding:40px 0;color:var(--muted-foreground);font-size:14px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--foreground);text-decoration:underline}
.legal{margin-top:20px;display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:13px}
.tagline{margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--navy)}
.tagline span{display:block;font-weight:500;letter-spacing:0;font-size:14px;color:var(--muted-foreground);margin-top:2px}

@media(max-width:560px){
  .wrap{padding:0 16px}
  .lede{font-size:17px}
  .nav .btn-sm{padding:0 12px}
  .signin{padding:10px 8px}
  .br{display:none}
}