/* ============================================================
   AIPick — shared design system
   Calm, friendly, trustworthy. One warm amber accent.
   Display: Bricolage Grotesque · Body: Plus Jakarta Sans
   ============================================================ */

:root{
  /* surfaces — warm paper neutrals */
  --bg:        #FBF8F3;
  --bg-2:      #F4EFE6;
  --surface:   #FFFFFF;
  --surface-2: #FCFAF6;

  /* ink */
  --ink:       #2A251E;
  --ink-2:     #5C554B;
  --ink-3:     #8C8479;
  --ink-4:     #B6ADA0;

  /* hairlines */
  --line:      #ECE5D9;
  --line-2:    #E2DACB;

  /* amber accent */
  --amber:        #E0853B;   /* brand highlight, bars, rings */
  --amber-strong: #C2691B;   /* button fill (white text ok) */
  --amber-ink:    #9C5210;   /* links / text on light */
  --amber-soft:   #FBEEDD;   /* tint surface */
  --amber-soft-2: #F6E2C9;

  /* semantic dots (tiny, associative only) */
  --good:  #4F9E68;
  --good-soft:#E6F0E5;
  --warn:  #E0853B;
  --none:  #C3BBAD;
  --them:  #6A6258;          /* competitor bars / neutral */

  /* engine colors */
  --gpt:    #10A37F;
  --ppx:    #20808D;
  --gem:    #4285F4;
  --cop:    #8E5BE0;
  --grok:   #15161A;

  /* radii */
  --r-pill: 999px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 13px;

  /* shadows — soft warm */
  --sh-1: 0 1px 2px rgba(42,37,30,.05), 0 1px 1px rgba(42,37,30,.03);
  --sh-2: 0 2px 6px rgba(42,37,30,.05), 0 14px 30px -16px rgba(42,37,30,.16);
  --sh-3: 0 4px 12px rgba(42,37,30,.07), 0 30px 60px -28px rgba(42,37,30,.28);
  --sh-amber: 0 10px 26px -10px rgba(194,105,27,.45);

  --maxw: 1120px;
  --font-d: "Bricolage Grotesque", system-ui, sans-serif;
  --font-b: "Plus Jakarta Sans", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid rgba(224,133,59,.5); outline-offset:2px; border-radius:6px; }

h1,h2,h3,h4{ font-family:var(--font-d); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0; color:var(--ink); }
.num{ font-family:var(--font-d); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:720px; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.muted{ color:var(--ink-2); }
.tiny{ font-size:13px; }
.eyebrow{
  font-family:var(--font-b); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--amber-ink);
}
.center{ text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid transparent; border-radius:var(--r-sm);
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:13px 20px; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-amber{ background:var(--amber-strong); color:#fff; box-shadow:var(--sh-amber); }
.btn-amber:hover{ background:#AE5C14; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#1c1813; }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1); }
.btn-ghost:hover{ border-color:var(--ink-4); background:var(--surface-2); }
.btn-quiet{ background:transparent; color:var(--ink-2); padding:10px 12px; }
.btn-quiet:hover{ color:var(--ink); background:var(--bg-2); }
.btn-lg{ font-size:17px; padding:17px 28px; border-radius:15px; }
.btn-block{ width:100%; }
.btn-icon{ width:18px; height:18px; flex:none; }

/* ---------- chips / pills ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--ink-2);
  box-shadow:var(--sh-1);
}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  border-radius:var(--r-pill); padding:5px 11px; font-size:12.5px; font-weight:700;
}
.pill-amber{ background:var(--amber-soft); color:var(--amber-ink); }
.pill-good{ background:var(--good-soft); color:#3a7a4e; }
.pill-up{ background:var(--good-soft); color:#3a7a4e; }
.pill-soft{ background:var(--bg-2); color:var(--ink-2); }

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
}
.card-pad{ padding:28px; }
.card-flat{ box-shadow:var(--sh-1); }

/* ---------- dots ---------- */
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot-good{ background:var(--good); } .dot-warn{ background:var(--warn); } .dot-none{ background:var(--none); }

/* ---------- engine badge (img slot for official logos) ---------- */
.eng{
  width:34px; height:34px; border-radius:11px; flex:none;
  display:grid; place-items:center; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-1); overflow:hidden;
}
.eng img{ width:20px; height:20px; object-fit:contain; display:block; }
.eng svg{ width:15px; height:15px; }
.eng-gpt, .eng-ppx, .eng-gem, .eng-cop, .eng-grok{ background:#fff; }
.eng-sm{ width:28px; height:28px; border-radius:9px; } .eng-sm img{ width:16px; height:16px; } .eng-sm svg{ width:12px; height:12px; }

/* ---------- brand mark ---------- */
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; }
.brand .mk{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
}
.brand .mk svg{ width:32px; height:32px; color:var(--amber-strong); }
.brand .wm{ font-family:var(--font-d); font-size:20px; letter-spacing:-.03em; color:var(--ink); }
.brand .wm b{ color:var(--amber-ink); font-weight:700; }

/* ---------- marketing top nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,243,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ padding:9px 13px; border-radius:10px; font-weight:600; font-size:14.5px; color:var(--ink-2); }
.nav-links a:hover{ color:var(--ink); background:var(--bg-2); }

/* ---------- frequency bar ---------- */
.freqbar{ height:14px; border-radius:var(--r-pill); background:var(--bg-2); overflow:hidden; }
.freqbar > i{ display:block; height:100%; border-radius:var(--r-pill); }
.fill-amber{ background:linear-gradient(90deg,#EDA460,var(--amber)); }
.fill-them{ background:var(--them); opacity:.5; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); margin-top:80px; padding:48px 0 60px; color:var(--ink-3); }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; }
.foot a{ color:var(--ink-2); font-size:14px; }
.foot a:hover{ color:var(--ink); }

/* ---------- app shell ---------- */
.app{ display:flex; min-height:100vh; }
.side{
  width:248px; flex:none; background:var(--surface); border-right:1px solid var(--line);
  padding:20px 16px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px;
}
.side .brand{ padding:8px 8px 18px; }
.side nav{ display:flex; flex-direction:column; gap:3px; }
.side nav a{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  font-weight:600; font-size:14.5px; color:var(--ink-2);
}
.side nav a svg{ width:18px; height:18px; flex:none; color:var(--ink-3); }
.side nav a:hover{ background:var(--bg-2); color:var(--ink); }
.side nav a.on{ background:var(--amber-soft); color:var(--amber-ink); }
.side nav a.on svg{ color:var(--amber-ink); }
.app-main{ flex:1; min-width:0; }
.app-top{
  height:68px; border-bottom:1px solid var(--line); background:rgba(251,248,243,.82);
  backdrop-filter:blur(12px); position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; padding:0 28px;
}
.app-body{ padding:28px; max-width:1000px; margin:0 auto; }

/* avatar */
.av{ width:34px; height:34px; border-radius:50%; background:var(--bg-2); display:grid; place-items:center;
  font-weight:700; font-size:13px; color:var(--ink-2); border:1px solid var(--line-2); }

/* copybox */
.copybox{
  background:var(--surface-2); border:1px dashed var(--line-2); border-radius:14px;
  padding:18px 18px; font-size:15px; line-height:1.6; color:var(--ink); position:relative;
}

/* reveal animation */
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
.rise{ animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce){ .rise{ animation:none; } }

/* ---------- interactive feedback (hover everywhere) ---------- */
a{ transition:color .15s ease; }
.btn{ will-change:transform; }
.btn-amber:hover, .btn-ink:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }

.brand{ transition:opacity .15s ease; }
.brand:hover{ opacity:.82; }

.nav-links a{ transition:color .15s, background .15s; }

.wf{ transition:transform .15s ease, box-shadow .2s ease, border-color .2s; cursor:pointer; }
.wf:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--amber-soft-2); }
.wf:hover i{ background:var(--amber-strong); color:#fff; }

.step{ transition:transform .18s ease, box-shadow .25s ease, border-color .2s; display:block; }
a.step{ cursor:pointer; }
a.step:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); border-color:var(--amber-soft-2); }
a.step:hover .n{ background:var(--amber-strong); color:#fff; }

.tcard{ transition:transform .18s ease, box-shadow .25s ease; }
.tcard:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }

.chip{ transition:border-color .2s, box-shadow .2s, transform .14s; }
.chip.clickable{ cursor:pointer; }
.chip.clickable:hover{ border-color:var(--amber-soft-2); transform:translateY(-1px); box-shadow:var(--sh-2); }

.logos .lg{ transition:color .2s ease, transform .15s ease; }
.logos .lg:hover{ color:var(--ink-2); transform:translateY(-1px); }

.eng{ transition:transform .15s ease, box-shadow .2s ease; }
.ebk{ transition:border-color .2s, background .2s, transform .12s; }
.ebk:hover{ border-color:var(--amber-soft-2); background:var(--surface); }
.ebk:hover .eng{ transform:scale(1.06); }

.side nav a{ transition:background .15s, color .15s; }
.av{ transition:transform .15s ease, box-shadow .2s ease; }
.app-top .av{ cursor:pointer; }
.app-top .av:hover{ transform:scale(1.05); box-shadow:var(--sh-2); }

.foot a{ transition:color .15s, padding-left .15s; }
.foot a:hover{ padding-left:3px; }

/* ---------- widget-level hover: every card & row reacts ---------- */
.card{ transition:transform .18s ease, box-shadow .25s ease, border-color .2s; }
.card:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }

.opp{ transition:transform .18s ease, box-shadow .25s ease, border-color .2s; }
.opp:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }

.cmp-row{ border-radius:9px; padding-block:5px; transition:background .15s ease; }
.cmp-row:hover{ background:var(--surface-2); }
.cmp-row:hover .freqbar > i{ filter:saturate(1.15); }

.qrow{ border-radius:10px; transition:background .15s ease, padding-left .15s ease; }
.qrow:hover{ background:var(--surface-2); padding-left:8px; }

.comp{ transition:border-color .2s, box-shadow .2s, transform .12s; }
.comp:hover{ border-color:var(--amber-soft-2); box-shadow:var(--sh-1); transform:translateY(-1px); }

.q{ transition:border-color .15s, background .15s, box-shadow .2s, transform .12s; }
.q:hover{ transform:translateY(-1px); }

.sec-card{ transition:transform .18s ease, box-shadow .25s ease, border-color .2s; }
.sec-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }

.rowline{ border-radius:10px; padding-inline:10px; margin-inline:-10px; transition:background .15s ease; }
.rowline:hover{ background:var(--surface-2); }

.qtag{ transition:border-color .2s, transform .12s, box-shadow .2s; }
.qtag:hover{ border-color:var(--amber-soft-2); transform:translateY(-1px); box-shadow:var(--sh-1); }

.qa{ transition:transform .15s ease, box-shadow .25s ease, border-color .2s; }
.qa:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--amber-soft-2); }

.dfy{ transition:border-color .2s ease, background .2s ease; }
.dfy:hover{ border-color:var(--amber); }

.share-card{ transition:transform .18s ease, box-shadow .25s ease; }
.share-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }

.subject, .mailpreview, .billbox{ transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.subject:hover, .mailpreview:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); }
.billbox:hover{ border-color:var(--line-2); }

.copybox{ transition:border-color .18s ease; }
.copybox:hover{ border-color:var(--amber-soft-2); }

.field .inp{ transition:border-color .18s ease, background .18s ease; }
.field .inp:hover{ border-color:var(--ink-4); }
.field .inp:focus-within{ border-color:var(--amber); background:var(--surface); }
.fld{ transition:border-color .18s ease, background .18s ease; }
.fld:focus-within{ border-color:var(--amber); background:var(--surface); }

.scanform{ transition:box-shadow .2s ease; }
.scanform:focus-within{ box-shadow:var(--sh-3), 0 0 0 3px rgba(224,133,59,.16); }

.gchip{ transition:border-color .2s, transform .12s; cursor:pointer; }
.gchip:hover{ border-color:var(--ink-4); transform:translateY(-1px); }

.chip{ }
.chip:hover{ border-color:var(--line-2); }
.tog{ transition:background .2s ease, box-shadow .2s ease; }
.tog:hover{ box-shadow:0 0 0 3px rgba(224,133,59,.12); }

/* ---------- simple content / legal pages ---------- */
.doc{ max-width:760px; margin:0 auto; padding:56px 24px 24px; }
.doc .eyebrow{ display:block; margin-bottom:14px; }
.doc h1{ font-size:clamp(32px,5vw,50px); }
.doc .updated{ color:var(--ink-3); font-size:14px; margin-top:14px; }
.doc .lede{ font-size:19px; color:var(--ink-2); line-height:1.6; margin-top:18px; }
.doc h2{ font-size:22px; margin:38px 0 10px; }
.doc p, .doc li{ color:var(--ink-2); font-size:16px; line-height:1.7; }
.doc ul{ padding-left:22px; margin:10px 0; } .doc li{ margin:7px 0; }
.doc a.inline{ color:var(--amber-ink); font-weight:600; }
.doc a.inline:hover{ text-decoration:underline; }

/* ---------- mobile app bottom nav ---------- */
.mobnav{ display:none; }

/* responsive */
@media (max-width:860px){
  .mobnav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content:space-around;
  }
  .mobnav a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 8px; border-radius:11px; color:var(--ink-3); font-size:10.5px; font-weight:700; min-width:56px; }
  .mobnav a svg{ width:22px; height:22px; }
  .mobnav a.on{ color:var(--amber-ink); }
  .mobnav a.on svg{ color:var(--amber-ink); }
  .app .app-body{ padding-bottom:92px; }
  .app-top .hide-mobile{ display:none; }
  .nav-links a.hide-sm{ display:none; }
  .side{ display:none; }
  .app-body{ padding:18px; }
  .app-top{ padding:0 16px; }
  .wrap{ padding:0 18px; }
}


/* ============ DARK + AUTO THEME ============ */
html[data-theme="dark"]{
  --bg:#1B1813; --bg-2:#262019; --surface:#221E17; --surface-2:#2A241C;
  --ink:#F2ECE1; --ink-2:#C9C0B2; --ink-3:#998F81; --ink-4:#6E665B;
  --line:#342E25; --line-2:#403930;
  --amber:#E89A53; --amber-strong:#E0853B; --amber-ink:#F0AB60; --amber-soft:#33271A; --amber-soft-2:#41301C;
  --good:#5FB079; --good-soft:#22301F; --warn:#E89A53; --none:#5A5247; --them:#8A8276;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 14px 30px -16px rgba(0,0,0,.7);
  --sh-3:0 4px 12px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.85);
  --sh-amber:0 10px 26px -10px rgba(224,133,59,.5);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
  --bg:#1B1813; --bg-2:#262019; --surface:#221E17; --surface-2:#2A241C;
  --ink:#F2ECE1; --ink-2:#C9C0B2; --ink-3:#998F81; --ink-4:#6E665B;
  --line:#342E25; --line-2:#403930;
  --amber:#E89A53; --amber-strong:#E0853B; --amber-ink:#F0AB60; --amber-soft:#33271A; --amber-soft-2:#41301C;
  --good:#5FB079; --good-soft:#22301F; --warn:#E89A53; --none:#5A5247; --them:#8A8276;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 14px 30px -16px rgba(0,0,0,.7);
  --sh-3:0 4px 12px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.85);
  --sh-amber:0 10px 26px -10px rgba(224,133,59,.5);
  }
}
html[data-theme="dark"] body, html[data-theme="auto"] body{ } /* vars cascade */

/* theme-aware chrome (elements with hardcoded light backgrounds) */
html[data-theme="dark"] .btn-ink, html[data-theme="auto"] .btn-ink{ color:var(--bg); }
html[data-theme="dark"] .btn-ink:hover{ background:#FFFFFF; }
@media (prefers-color-scheme: dark){ html[data-theme="auto"] .btn-ink:hover{ background:#FFFFFF; } html[data-theme="auto"] .btn-ink{ color:var(--bg); } }
html[data-theme="dark"] .app-top, html[data-theme="dark"] .nav{ background:rgba(27,24,19,.85); }
html[data-theme="dark"] .mobnav{ background:rgba(34,30,23,.96); }
html[data-theme="dark"] .opp{ background:linear-gradient(160deg,#2C2218,#221E17 62%) !important; border-color:var(--amber-soft-2) !important; }
html[data-theme="dark"] .brand .mk svg, html[data-theme="auto"] .brand .mk svg{ color:var(--amber); }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .app-top, html[data-theme="auto"] .nav{ background:rgba(27,24,19,.85); }
  html[data-theme="auto"] .mobnav{ background:rgba(34,30,23,.96); }
  html[data-theme="auto"] .opp{ background:linear-gradient(160deg,#2C2218,#221E17 62%) !important; border-color:var(--amber-soft-2) !important; }
}

/* the email mockup follows the active theme — the e-head gradient stays dark,
   the body uses --surface so dark mode renders a dark card (no white block). */

/* ---- branded scrollbar (theme-aware, replaces the default OS bar) ---- */
:root{ --sbar: var(--line-2); --sbar-hover: var(--amber); --sbar-track: transparent; }
html{ scrollbar-width: thin; scrollbar-color: var(--sbar) var(--sbar-track); }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:var(--sbar-track); }
*::-webkit-scrollbar-thumb{
  background:var(--sbar); border-radius:var(--r-pill);
  border:3px solid var(--bg); background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--sbar-hover); background-clip:padding-box; }
*::-webkit-scrollbar-corner{ background:var(--sbar-track); }