/* Billi website — shared stylesheet.
   #new, 2026-09-24.

   The site was a single page with its styles inline. Splitting it into Home,
   Features, Pricing and Demo meant those styles had to live in one place or
   drift apart within a week — four copies of a colour variable is four
   chances for one page to stop matching the others.

   Everything above the "page components" divider is lifted unchanged from
   the original index.html so that the home page renders exactly as it did.
   Everything below it is new, for the pages that did not exist before. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{--navy:#063B8F;--blue:#1677FF;--red:#F21F2F;--light:#E6F1FF;--dark:#021A4D;--ink:#10234E;--muted:#65738C;--soft:#F6F8FC;--line:#DDE8F7;--green:#13A673;--amber:#B26A00}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3{font-family:Poppins,Arial,sans-serif}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1160px,calc(100% - 36px));margin:auto}

/* --- Navigation ---------------------------------------------------------- */
.nav{height:74px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid #EDF2FA}
.nav .container{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand img{width:104px;height:58px;object-fit:contain}
.navlinks{display:flex;gap:28px;font-size:14px;font-weight:600}
/* The current page is marked rather than left to the visitor to work out.
   On a one-page site there was nowhere to be; on a four-page one there is. */
.navlinks a.here{color:var(--blue);position:relative}
.navlinks a.here:after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:3px;border-radius:3px 3px 0 0;background:var(--blue)}
.actions{display:flex;gap:10px}
.hamb{display:none;border:0;background:#EEF5FF;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:16px}
/* The hamburger opened nothing at all before this release — it was a button
   with no handler. Small, but a dead control on a phone is worse than none. */
.mobnav{display:none;border-bottom:1px solid #EDF2FA;background:#fff}
.mobnav.open{display:block}
.mobnav a{display:block;padding:14px 0;font-weight:600;font-size:15px;border-bottom:1px solid #F3F7FD}
.mobnav a:last-child{border-bottom:0}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;border:0}
.primary{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;box-shadow:0 12px 26px rgba(22,119,255,.20)}
.outline{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--navy);background:#fff}

/* --- Hero ---------------------------------------------------------------- */
.hero{padding:62px 0 52px;background:radial-gradient(circle at 77% 8%,#EAF4FF 0,transparent 32%),linear-gradient(180deg,#fff,#FBFDFF)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--blue)}
.hero h1{font-size:58px;line-height:1.03;letter-spacing:-2.3px;margin:14px 0 18px;color:var(--dark)}
.hero h1 span{color:var(--blue)}
.hero p{font-size:17px;line-height:1.75;color:#56647E}
.chat{display:flex;align-items:flex-start;gap:14px;margin:24px 0}
.chat img{width:68px;height:68px;object-fit:contain}
.bubble{background:#fff;border:1px solid var(--line);box-shadow:0 12px 28px rgba(4,43,103,.06);padding:14px 16px;border-radius:18px 18px 18px 4px;font-size:14px;line-height:1.55}
.bubble strong{color:var(--navy);font-family:Poppins}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;color:#5A6983;font-size:12px;font-weight:600}
.proof span:before{content:"✓";color:var(--green);font-weight:900;margin-right:6px}
.hero-art{min-height:510px;position:relative}
.dash{position:absolute;left:0;right:14px;top:58px;background:#fff;border:1px solid #DFEAF8;border-radius:28px;padding:24px;box-shadow:0 28px 70px rgba(4,43,103,.12)}
.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dash-head b{font-family:Poppins}
.dash-head span{background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:8px 10px;border-radius:9px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{border:1px solid #E7EEF8;border-radius:14px;padding:14px;background:#FBFDFF}
.stat small{font-size:9px;color:#7B879F}
.stat strong{display:block;font-size:17px;margin:6px 0}
.chart{margin-top:12px;border:1px solid #E7EEF8;border-radius:14px;padding:14px;height:180px}
.barrow{height:112px;display:flex;align-items:end;gap:10px;padding-top:16px}
.bar{flex:1;background:#D9E9FF;border-radius:7px 7px 2px 2px}
.bar:nth-child(2n){background:#1677FF}
.mascot-hero{position:absolute;width:210px;right:-26px;bottom:-26px;z-index:2;filter:drop-shadow(0 18px 18px rgba(4,43,103,.1))}
/* #fix, 2026-09-24. The dashboard card sliced the bottom off this line.
   Both are absolutely positioned inside .hero-art, neither had a z-index,
   and the card comes later in the DOM — so it painted over the text's
   descenders. Two changes, deliberately belt-and-braces: the card now starts
   BELOW the line (top:58px, was 26px) so they cannot overlap, and the line
   carries a z-index so that if either ever moves again the text stays
   readable rather than silently losing its lower half. */
.scribble{position:absolute;right:5%;top:8px;z-index:3;font-family:'Comic Sans MS',cursive;color:var(--navy);font-size:20px;transform:rotate(-4deg)}

.iconbar{border-top:1px solid #EDF3FA;border-bottom:1px solid #EDF3FA}
.iconrow{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;padding:24px 0}
.quick{text-align:center;font-size:11px;font-weight:700}
.quick img{width:44px;height:44px;object-fit:contain;margin:0 auto 8px}

/* --- Sections ------------------------------------------------------------ */
.section{padding:78px 0}
.soft{background:var(--soft)}
.section-head{text-align:center;max-width:740px;margin:0 auto 42px}
.section-head h2{font-size:36px;margin:8px 0 12px;line-height:1.18;color:var(--dark)}
.section-head p{color:var(--muted);line-height:1.7}
.story{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center}
.story-art{min-height:420px;border-radius:30px;background:linear-gradient(145deg,#EEF6FF,#fff);border:1px solid #E1ECF9;position:relative;overflow:hidden}
.story-art img{position:absolute;width:335px;left:50%;bottom:0;transform:translateX(-50%);filter:drop-shadow(0 18px 18px rgba(4,43,103,.10))}
.story-note{position:absolute;right:24px;top:28px;font-family:'Comic Sans MS',cursive;color:var(--navy);font-size:22px;transform:rotate(4deg)}
.story h2{font-size:40px;line-height:1.17;margin:8px 0 14px}
.story p{color:var(--muted);line-height:1.8}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:24px 0}
.checks span{font-size:13px;font-weight:600}
.checks span:before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--blue);color:#fff;font-size:10px;margin-right:7px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{display:flex;gap:14px;background:#fff;border:1px solid #E2EBF7;border-radius:17px;padding:18px;box-shadow:0 8px 24px rgba(4,43,103,.04)}
.feature-icon{width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#EEF5FF;display:grid;place-items:center}
.feature-icon img{width:34px;height:34px;object-fit:contain}
.feature-icon svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:14px;margin:0 0 5px}
.feature p{font-size:12px;line-height:1.55;color:#66758F;margin:0}

.convo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.speech{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #E1EBF8;border-radius:18px;padding:18px;box-shadow:0 10px 26px rgba(4,43,103,.05)}
.speech img{width:72px;height:72px;object-fit:contain}
.speech b{font-family:Poppins;color:var(--navy)}
.speech p{font-size:13px;line-height:1.6;color:#66758F;margin:5px 0 0}

/* --- Pricing ------------------------------------------------------------- */
.price-note{text-align:center;font-size:12px;color:#687795;margin:-14px 0 24px}
.pricing{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.switch{display:flex;justify-content:center;gap:6px;background:#EAF3FF;padding:5px;border-radius:14px;width:max-content;margin:0 auto 32px}
.switch button{border:0;background:transparent;padding:10px 15px;border-radius:10px;font-weight:700;color:#687795;cursor:pointer}
.switch button.active{background:var(--blue);color:#fff}
.plan{position:relative;background:#fff;border:1px solid #DFEAFB;border-radius:20px;padding:26px;box-shadow:0 12px 34px rgba(4,43,103,.06)}
.plan.pop{border:2px solid var(--blue);transform:translateY(-8px)}
.badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;border-radius:999px;padding:7px 13px;font-size:10px;font-weight:800;white-space:nowrap}
.plan h3{font-size:22px;margin:0}
.for{font-size:12px;color:var(--muted);min-height:34px}
.list{font-size:12px;color:#98A4B7;text-decoration:line-through;margin-top:18px}
.offer{font-family:Poppins;font-size:34px;font-weight:800;color:var(--dark)}
.suffix{font-size:12px;color:#687795}
.plan ul{list-style:none;padding:0}
.plan li{font-size:13px;color:#44536E;padding:7px 0}
.plan li:before{content:"✓";color:#fff;background:var(--blue);display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;font-size:9px;margin-right:7px}
.plan .btn{width:100%}

/* --- FAQ ----------------------------------------------------------------- */
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq{border:1px solid #E0EAF7;border-radius:14px;background:#fff;overflow:hidden}
.faq button{width:100%;border:0;background:#fff;text-align:left;padding:17px 18px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;cursor:pointer;font-size:14px;font-family:inherit;gap:12px}
.answer{display:none;padding:0 18px 18px;color:#66758E;font-size:13px;line-height:1.65}
.faq.open .answer{display:block}

/* --- CTA and footer ------------------------------------------------------ */
.cta-wrap{padding:32px 0 72px}
.cta{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:28px;padding:34px 38px;display:grid;grid-template-columns:170px 1fr auto;gap:28px;align-items:center}
.cta img{width:170px;max-height:150px;object-fit:contain}
.cta h2{font-size:31px;margin:0 0 6px}
.cta p{color:#DDEAFF;margin:0}
.cta .btn{background:#fff;color:var(--navy)}
footer{border-top:1px solid #E8EEF7;padding:46px 0 30px}
.foot{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}
footer img{width:120px}
footer h4{font-family:Poppins;font-size:13px;margin:0 0 10px}
footer a,footer p{font-size:12px;color:#6B7891;line-height:1.8;display:block}
.copy{border-top:1px solid #EDF2F8;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;font-size:11px;color:#7B879C}

/* ==========================================================================
   PAGE COMPONENTS — new with the four-page split, 2026-09-24.
   ========================================================================== */

/* A short banner at the top of an inner page, in place of the home hero. */
.pagehead{padding:54px 0 38px;background:linear-gradient(180deg,#F4F9FF,#fff);border-bottom:1px solid #EDF3FA;text-align:center}
.pagehead h1{font-size:44px;line-height:1.1;letter-spacing:-1.4px;margin:10px 0 14px;color:var(--dark)}
.pagehead p{max-width:680px;margin:0 auto;color:var(--muted);line-height:1.75;font-size:16px}

/* Features page: a named band per area of the product. */
.band{padding:56px 0;border-bottom:1px solid #F0F5FC}
.band:last-of-type{border-bottom:0}
.band-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.band-head h2{font-size:27px;margin:0;color:var(--dark)}
.band-head .kicker{margin-bottom:2px}
.band > .container > p.lede{color:var(--muted);line-height:1.75;max-width:760px;margin:0 0 26px}
.feature .plantag{display:inline-block;margin-top:7px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:#EEF5FF;border-radius:999px;padding:3px 8px}
.feature .plantag.all{color:var(--green);background:#E6F7F1}

/* Pricing page: the full comparison table. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(4,43,103,.05)}
table.compare{border-collapse:collapse;width:100%;min-width:720px;font-size:13px}
table.compare th,table.compare td{padding:13px 16px;text-align:left;border-bottom:1px solid #EEF3FA}
table.compare thead th{position:sticky;top:0;background:#F7FAFF;font-family:Poppins;font-size:13px;color:var(--dark);z-index:1;border-bottom:1px solid var(--line)}
table.compare thead th:not(:first-child),table.compare td:not(:first-child){text-align:center;width:128px}
table.compare tbody tr:hover{background:#FAFCFF}
table.compare tr.group td{background:#F2F7FF;font-family:Poppins;font-weight:700;color:var(--navy);font-size:12px;letter-spacing:.03em;text-transform:uppercase}
table.compare td:first-child{color:#42506B}
.yes{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:800}
.no{color:#C3CCDC;font-size:15px}
.val{font-weight:700;color:var(--dark)}
.compare-note{font-size:12px;color:#7A879E;margin-top:14px;line-height:1.7}

/* Demo page: the picker, the device frames and the slide viewer. */
.picker{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 12px 34px rgba(4,43,103,.06);margin-bottom:34px}
.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field select{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:11px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.field select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.seg{display:flex;gap:5px;background:#EAF3FF;padding:5px;border-radius:12px}
.seg button{border:0;background:transparent;padding:10px 16px;border-radius:9px;font-weight:700;font-size:13px;color:#687795;cursor:pointer;font-family:inherit}
.seg button.active{background:var(--blue);color:#fff}

.stage{background:linear-gradient(160deg,#EDF5FF,#FBFDFF);border:1px solid #E1ECF9;border-radius:28px;padding:36px;display:grid;place-items:center;min-height:520px}
/* The two frames are real chrome, not a border round a screenshot: a phone
   screenshot shown at desktop proportions reads as a stretched image and
   makes the product look worse than it is. */
.frame-desktop{width:100%;max-width:880px}
.frame-desktop .bezel{background:#0B1F45;border-radius:14px 14px 4px 4px;padding:9px 9px 0}
.frame-desktop .dots{display:flex;gap:6px;padding:0 3px 8px}
.frame-desktop .dots i{width:9px;height:9px;border-radius:50%;background:#3C5488}
.frame-desktop .screen{background:#fff;border-radius:6px 6px 0 0;overflow:hidden;aspect-ratio:16/10}
.frame-desktop .stand{height:13px;background:linear-gradient(180deg,#0B1F45,#081834);border-radius:0 0 12px 12px;margin:0 auto;width:34%}
.frame-phone{width:100%;max-width:308px}
.frame-phone .bezel{background:#0B1F45;border-radius:38px;padding:11px;box-shadow:0 26px 60px rgba(4,43,103,.22)}
.frame-phone .screen{background:#fff;border-radius:28px;overflow:hidden;aspect-ratio:9/19.5;position:relative}
.frame-phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36%;height:22px;background:#0B1F45;border-radius:0 0 13px 13px;z-index:2}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top center}

.slide-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.slide-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:17px;color:var(--navy);cursor:pointer;display:grid;place-items:center}
.slide-nav button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.slide-nav button:disabled{opacity:.36;cursor:default}
.dotrow{display:flex;gap:7px}
.dotrow i{width:8px;height:8px;border-radius:50%;background:#CBDBF2;cursor:pointer;transition:width .18s}
.dotrow i.on{background:var(--blue);width:22px;border-radius:5px}
.caption{text-align:center;margin-top:18px;min-height:52px}
.caption b{font-family:Poppins;color:var(--dark);font-size:17px;display:block;margin-bottom:5px}
.caption span{color:var(--muted);font-size:13.5px;line-height:1.65}
.demo-note{text-align:center;font-size:12px;color:#7A879E;margin-top:26px;line-height:1.7}

/* --- Responsive ---------------------------------------------------------- */
@media(max-width:1100px){.pricing{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .navlinks{display:none}.actions .outline{display:none}.hamb{display:block}
  .hero-grid,.story{grid-template-columns:1fr}.hero h1{font-size:46px}.hero-art{min-height:455px}
  .features{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}.plan.pop{transform:none}
  .faqgrid{grid-template-columns:1fr}
  .cta{grid-template-columns:120px 1fr}.cta img{width:120px}.cta .btn{grid-column:1/-1}
  .foot{grid-template-columns:1fr 1fr}
  .pagehead h1{font-size:34px}
  .picker{grid-template-columns:1fr}
  .stage{padding:22px;min-height:440px}
}
@media(max-width:600px){
  .container{width:min(100% - 22px,1160px)}
  .nav{height:68px}.brand img{width:90px;height:52px}.actions .primary{padding:10px 12px;font-size:12px}
  .hero{padding-top:40px}.hero h1{font-size:39px;letter-spacing:-1.4px}.hero p{font-size:15px}
  .chat img{width:54px;height:54px}.bubble{font-size:13px}
  .hero-art{min-height:390px}.dash{right:0;padding:15px;border-radius:20px}
  .stats{grid-template-columns:1fr 1fr}.stats .stat:nth-child(3){display:none}
  .mascot-hero{width:140px;right:-10px;bottom:-16px}.scribble{display:none}
  .iconrow{grid-template-columns:repeat(4,1fr)}.quick:nth-child(n+5){display:none}
  .section{padding:56px 0}.section-head h2,.story h2{font-size:30px}
  .checks{grid-template-columns:1fr}.features,.convo{grid-template-columns:1fr}
  .story-art{min-height:325px}.story-art img{width:270px}
  .switch{width:100%}.switch button{flex:1;padding:9px 6px;font-size:11px}
  .cta{grid-template-columns:1fr;text-align:center;padding:28px 22px}.cta img{margin:auto}
  .foot{grid-template-columns:1fr 1fr}.copy{display:block;line-height:2}
  .pagehead{padding:38px 0 30px}.pagehead h1{font-size:29px}.pagehead p{font-size:14.5px}
  .band{padding:40px 0}.band-head h2{font-size:22px}
  .stage{padding:16px;border-radius:20px}
}