/* =====================================================================
   FirstCustomer — light "paper + aura + glass" layer (2026-10-17, round 3)
   Loaded AFTER each page's inline <style>, so it re-skins the shared
   tokens/classes in one place: landing, legal pages, support, 404, blog.

   Restraint rules (founder: "tinh tế, không lòe loẹt"):
   - only the two brand colours from the logo: blue stroke + amber dot.
     Amber is rare on purpose — it always means "the customer".
   - aura = a fixed, very soft blue/amber haze; no animation.
   - one illustration motif everywhere: the thin-line radar (radar.svg):
     grey dots = posts read, blue = signals, one amber dot = the customer.
   - one bold moment per page: the dark "scoring" band on the landing.
   ===================================================================== */
:root{
  --bg:#f8f7f3; --bg-2:#ffffff; --bg-3:#efeee9; --bg-deep:#f1f0eb;
  --text:#16181f; --text-2:#4d5060; --text-3:#5f6372;
  --blue:#2b6cf6; --blue-hover:#2259d4; --blue-light:#1f5fe0;
  --amber:#f59e0b; --amber-ink:#8a5200;
  --ink:#121733;

  --aura-blue:rgba(96,165,250,.2);
  --aura-amber:rgba(251,191,36,.13);

  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.8);
  --glass-line:rgba(255,255,255,.9);
  --glass-blur:blur(18px) saturate(150%);
  --lift:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(22,24,31,.04),0 16px 36px -24px rgba(22,24,31,.25);
}

body{background:var(--bg)!important}
::selection{background:rgba(245,158,11,.28)}

/* ---------- the aura: fixed, soft, two colours ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 42% at 88% 4%,var(--aura-blue),transparent 72%),
    radial-gradient(40% 38% at 4% 96%,var(--aura-amber),transparent 72%),
    radial-gradient(30% 30% at 30% 18%,rgba(147,197,253,.12),transparent 72%);
}

/* ---------- chrome ---------- */
header{background:rgba(248,247,243,.6)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;border-bottom:1px solid rgba(22,24,31,.06)!important}
footer{background:rgba(255,255,255,.45)!important;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid rgba(22,24,31,.06)!important}
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -8px rgba(43,108,246,.6)}
.btn-ghost{background:var(--glass-strong);border-color:rgba(22,24,31,.1);box-shadow:var(--lift)}
.lang-current{background:var(--glass-strong)}
.back{white-space:nowrap}

/* =====================================================================
   LANDING
   ===================================================================== */
.hero-glow{display:none}
.hero h1 .dim{color:var(--text)}
.hero h1 .hit{color:var(--blue)}

/* radar illustration behind the hero phone */
.hero .stage{isolation:isolate}
.hero .stage::before{
  content:"";position:absolute;left:50%;top:50%;width:min(820px,170vw);aspect-ratio:1;max-width:none;z-index:-1;
  transform:translate(-50%,-48%);pointer-events:none;
  background:url(/radar.svg) center/contain no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent);
}
.hero .ph{text-align:left}

/* phone mockups stay dark like the real app */
.ph{box-shadow:0 0 0 1px rgba(255,255,255,.7),0 40px 70px -36px rgba(18,23,51,.55),0 20px 50px -30px rgba(43,108,246,.35)!important}

/* glass floats */
.float{background:var(--glass)!important;border:1px solid var(--glass-line)!important;box-shadow:var(--lift)!important}
.float-lbl{color:var(--blue)!important}
.idea-float .dot{background:var(--amber)!important;box-shadow:0 0 0 4px rgba(245,158,11,.18)}

/* source chips: only touch the phone bezel, never the content */
.src-chips{position:absolute;inset:0;pointer-events:none;z-index:6}
.src{position:absolute;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text);
  padding:6px 11px 6px 7px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--lift);white-space:nowrap}
.src i{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#8a8f9e}
.src b{font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.src.rd i,.src.fb i{background:#ff4500}
.src.hn i{background:#ff6600}
.src.th i{background:#16181f}
.src.rd{right:calc(50% + 150px);top:27%}
.src.fb{left:calc(50% + 150px);top:47%}
.src.hn{right:calc(50% + 150px);top:66%}
.src.th{left:calc(50% + 150px);top:82%}
@media (max-width:959px){
  .src-chips{display:none}
}

/* section rhythm: paper → soft blue wash → paper → INK band (the one bold moment) → soft amber wash → CTA */
section.divider{position:relative}
#tim{background:linear-gradient(180deg,transparent,rgba(219,234,254,.42) 22%,rgba(219,234,254,.42) 78%,transparent)!important}

#de .head-c{max-width:680px}
#de .lead{max-width:56ch}
.bigline b{color:var(--text)!important;background:linear-gradient(transparent 60%,rgba(43,108,246,.16) 60%,rgba(43,108,246,.16) 90%,transparent 90%);padding:0 2px}
.dm-hint{font-size:11.5px}

#diem{
  --bg:#1b2148; --bg-2:#1b2148; --bg-3:#222a58;
  --border:rgba(255,255,255,.12); --border-2:rgba(255,255,255,.2);
  --text:#eef0fb; --text-2:#b9bedb; --text-3:#9aa0c2; --blue-light:#9cc0ff;
  color:var(--text);
  margin:0 clamp(8px,1.6vw,20px);border-radius:clamp(22px,3vw,36px);overflow:hidden;
  background:
    url(/radar-ink.svg) right -120px bottom -330px/760px no-repeat,
    radial-gradient(45% 55% at 8% 0%,rgba(96,165,250,.22),transparent 70%),
    var(--ink)!important;
}
#diem .diagram{background-color:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px)}
#diem .dnode{background:#1b2148;border-color:rgba(255,255,255,.14)}
#diem .dnode.acc{background:linear-gradient(170deg,#24376e,#1b2148);border-color:rgba(156,192,255,.45)}
#diem .dloop{background:rgba(156,192,255,.05);border-color:rgba(255,255,255,.18)}
#diem .dloop-tag{background:#222a58}
#diem .dpill{border-color:var(--ink)}

#gia{background:linear-gradient(180deg,transparent,rgba(254,243,199,.45) 22%,rgba(254,243,199,.45) 78%,transparent)!important}
.plan{background:var(--glass)!important;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-color:rgba(22,24,31,.07)!important;box-shadow:var(--lift)!important}
.plan.up{background:#fff!important;border:2px solid var(--blue)!important;transform:translateY(-8px);box-shadow:0 26px 50px -30px rgba(43,108,246,.55)!important}
@media (max-width:879px){ .plan.up{transform:none} }
.step{background:var(--glass)!important;border-color:rgba(22,24,31,.07)!important}

.cta{background:var(--glass-strong)!important;border:1px solid var(--glass-line)!important;box-shadow:var(--lift)!important;isolation:isolate}
.cta::before{content:"";position:absolute;left:50%;top:50%;width:760px;aspect-ratio:1;transform:translate(-34%,-30%);z-index:-1;pointer-events:none;
  background:url(/radar.svg) center/contain no-repeat;opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}

/* =====================================================================
   READING PAGES (privacy / terms / support / delete-account) + BLOG
   ===================================================================== */
main > .wrap:has(.updated){
  background:var(--glass-strong) url(/radar-quiet.svg) right -150px top -230px/440px no-repeat;
  border:1px solid var(--glass-line);border-radius:24px;box-shadow:var(--lift);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  padding-block:clamp(28px,5vw,52px);padding-left:max(20px,min(5vw,52px));padding-right:max(20px,min(5vw,52px));
  width:calc(100% - 2 * max(12px, env(safe-area-inset-left, 0px)));
}
.updated{display:inline-block;font-size:12.5px;font-weight:600;color:var(--text-2);background:rgba(22,24,31,.05);border:1px solid rgba(22,24,31,.1);border-radius:999px;padding:3px 10px}
.cta-box{background:var(--glass-strong)!important;border:1px solid var(--glass-line)!important;box-shadow:var(--lift)}

/* blog */
.crumbs + h1,main > .wrap > h1:first-child{margin-bottom:16px}
.chip{background:var(--glass-strong)!important;border-color:rgba(22,24,31,.08)!important}
.chip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:99px;margin-right:7px;vertical-align:1px;background:var(--c,var(--blue))}
[href$="/research"],[data-cat="research"]{--c:#2b6cf6}
[href$="/product"],[data-cat="product"]{--c:#1e40af}
[href$="/growth"],[data-cat="growth"]{--c:#475569}
[href$="/founder-notes"],[data-cat="founder-notes"]{--c:#64748b}
.card{background:var(--glass)!important;border:1px solid rgba(22,24,31,.07)!important;box-shadow:var(--lift)!important;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 1px 0 #fff inset,0 22px 44px -26px rgba(22,24,31,.35)!important}
.card-body{flex:1;display:flex;flex-direction:column}
.card .meta{margin-top:auto;padding-top:12px}
.cover-gen{position:relative;display:flex;align-items:flex-end;padding:14px 16px;aspect-ratio:1200/630;border-bottom:1px solid rgba(22,24,31,.06);
  background:url(/radar-quiet.svg) right -40px center/300px no-repeat,linear-gradient(135deg,rgba(219,234,254,.55),rgba(255,255,255,.6))}
.cover-gen span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text);
  background:rgba(255,255,255,.85);border:1px solid rgba(22,24,31,.08);border-radius:999px;padding:4px 11px}
.cover-gen span::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--c,var(--blue))}
article.post{background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:24px;box-shadow:var(--lift);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:clamp(24px,5vw,52px) clamp(20px,5vw,56px)}
article.post blockquote{border-left:3px solid var(--blue);font-style:normal;color:var(--text);background:rgba(43,108,246,.06);border-radius:0;padding:12px 16px}
.search-form input{background:var(--glass-strong)}

@media (prefers-reduced-motion:reduce){ .card{transition:none} }

/* ---------- round-3 review fixes ---------- */
h1,h2,h3{text-wrap:balance}
@media (min-width:960px){ .hero-grid>div:first-child{padding-right:56px} }
@media (max-width:979px){
  .fan{padding-bottom:44px}
  .hero{padding-bottom:72px}
  .ph{box-shadow:0 0 0 1px rgba(255,255,255,.7),0 18px 32px -22px rgba(18,23,51,.5)!important}
}
@media (max-width:640px){
  #diem{background-size:480px,auto,auto;background-position:right -70px bottom -200px,0 0,0 0}
  main > .wrap:has(.updated){background-size:300px;background-position:right -170px top -170px}
}
/* the radar's customer is the person you're messaging: amber dot sits by "Send to u/mai_designs" */
.talk > :last-child{position:relative;isolation:isolate}
.talk > :last-child::before{content:"";position:absolute;width:560px;aspect-ratio:1;left:-293px;top:-115px;z-index:-1;pointer-events:none;
  background:url(/radar.svg) center/contain no-repeat;opacity:.35}

/* ---------- blog post detail ---------- */
/* the article sheet carries the same quiet radar corner as the legal sheet */
article.post{background:var(--glass-strong) url(/radar-quiet.svg) right -150px top -230px/440px no-repeat}
@media (max-width:640px){ article.post{background-size:300px;background-position:right -170px top -170px} }
/* generated covers: shorter, so a grid of them reads as a label strip, not eight posters */
.cover-gen{aspect-ratio:12/5}
/* in-article CTA = "see who's already asking": the only place on a post where the amber customer dot shows */
article.post .cta-box,.cta-box{position:relative;overflow:hidden;text-align:left;
  background:url(/radar.svg) right -20px top -60px/300px no-repeat,linear-gradient(135deg,rgba(219,234,254,.7),rgba(255,255,255,.85))!important;
  border:1px solid rgba(43,108,246,.18)!important;padding:24px 28px!important}
@media (max-width:640px){ .cta-box{background-size:220px,auto!important;background-position:right -20px top -30px,0 0!important;padding-right:96px!important} }

/* blog header on phones: keep "Sign up" on one line (it wrapped at 390px) */
header .btn{white-space:nowrap}
@media (max-width:400px){ header .nav-links a{padding:6px 7px} }