/* BN650 - Public pages redesign: the app's palette and typeface (design-taste-frontend: no Fraunces/cream "AI tell", one accent,
   varied section layouts), emil-design-eng motion kept from BN645. Loaded last so it overrides the page styles. */
:root{--ink:#0f172a;--ink-soft:#475569;--forest:#14532d;--forest-2:#15803d;--manila:#f1f5f9;--manila-line:#e2e8f0;--parchment:#ffffff;--paper:#f8fafc;--brass:#b45309;--stamp:#b91c1c;--peg:#f8fafc;--peg-dot:#e2e8f0}
body{background:#fff;color:var(--ink)}
h1,h2,h3{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
h1{line-height:1.08}
.lede{color:var(--ink-soft)}
header.site{background:rgba(255,255,255,.92);border-bottom-color:var(--manila-line)}
.btn-primary{background:var(--forest-2)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--forest)}.closer .btn-primary:hover{background:#ecfdf3}}
.section{padding:64px 0}
.section.alt{background:var(--paper);border-color:var(--manila-line)}
/* the price tag keeps its tag shape, in the app's colours */
.tag{background:#fff;box-shadow:0 0 0 1px #cbd5e1}
.notebook{background:#fff;border-color:var(--manila-line);box-shadow:0 14px 30px rgba(15,23,42,.08)}
.fvis{box-shadow:none}
/* features: two alternating rows, then a stacked third row (no three-in-a-row zigzag) */
.features .frow:last-of-type{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto;gap:24px}
.features .frow:last-of-type .fvis{order:-1}
/* "why" tiles become a compact two-column list */
body .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 48px}
body .why-item{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start}
.why-item svg{grid-row:span 2;margin:2px 0 0;color:var(--forest-2)}
.why-item h3{margin:0 0 2px}
.why-item p{margin:0;color:var(--ink-soft)}
/* trial: a tight numbered timeline instead of three equal boxes */
.trial-notes{display:grid!important;grid-template-columns:1fr!important;gap:0!important;max-width:760px;counter-reset:bn650}
.trial-notes>div{counter-increment:bn650;display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:14px 0;border-top:1px solid var(--manila-line);background:none!important;box-shadow:none!important;border-radius:0!important}
.trial-notes>div::before{content:counter(bn650);grid-row:span 3;width:34px;height:34px;border-radius:50%;background:#ecfdf3;color:var(--forest-2);font-weight:800;display:flex;align-items:center;justify-content:center}
.trial-notes>div>*{grid-column:2}
.plan.feature{box-shadow:inset 0 4px 0 var(--forest-2)}
footer.site{border-top-color:var(--manila-line)}
@media (max-width:700px){
  .section{padding:40px 0}.hero{padding:24px 0 36px}
  body .why-grid{grid-template-columns:1fr;gap:16px}
  .frow{margin-top:36px}.fvis{padding:22px 12px}
  .scene{max-width:340px}
  .fvis>*{zoom:.82}
  .cal{display:none}
  .plan{padding:18px 16px;gap:6px}
  .section{padding:36px 0}
}
body .day.last{background:#334155;border-color:#334155}
/* compact logo (no tagline) on small screens */
.brand .bn650-compact{display:none}
@media (max-width:600px){.brand .bn650-full{display:none}.brand .bn650-compact{display:block}}
/* malls page: feature cards become a compact two-column list */
body .bm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
body .bm-card{background:none;border:0;border-top:1px solid var(--manila-line);border-radius:0;padding:16px 0}
@media (max-width:700px){body .bm-grid{grid-template-columns:1fr}}
/* plan sizes in the app typeface */
.plan .limit,.plan .price strong{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;letter-spacing:-.02em}
/* BN656 - real app screenshots (demo booth, sample data) replace the hand-built mock-ups */
.fvis:has(.bn656-shot)>:not(.bn656-shot){display:none!important}
.fvis:has(.bn656-shot){padding:36px 20px}
.bn656-shot{margin:0;width:min(290px,82%);display:flex;flex-direction:column;align-items:center;gap:10px}
.bn656-shot .frame{width:100%;padding:9px;border-radius:38px;background:#0f172a;box-shadow:0 22px 44px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.12)}
.bn656-shot img{display:block;width:100%;height:auto;border-radius:30px;background:#f1f5f9}
.bn656-shot figcaption{font-size:13px;color:#475569}
@media (max-width:700px){.bn656-shot{width:min(260px,78%)}}
/* BN658 - malls page: real register and floor map screenshots (demo mall, sample data) */
.bn658-shots{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start;margin:8px 0 44px}
.bn658-shots figure{margin:0;display:grid;gap:8px}
.bn658-shots .frame{border-radius:14px;overflow:hidden;border:1px solid var(--manila-line);background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.10)}
.bn658-shots .bar{height:22px;background:#f1f5f9;border-bottom:1px solid var(--manila-line);display:flex;gap:6px;align-items:center;padding:0 10px}
.bn658-shots .bar i{width:8px;height:8px;border-radius:50%;background:#cbd5e1;display:block}
.bn658-shots img{display:block;width:100%;height:auto}
.bn658-shots figcaption{font-size:14px;color:var(--ink-soft)}
.bn658-shots figcaption strong{color:var(--ink);font-weight:700}
@media (max-width:800px){.bn658-shots{grid-template-columns:1fr}}

/* BN664 - product hero */
.bn664-hero{position:relative;min-height:540px;display:flex;align-items:center;justify-content:center}
.bn664-hero::before{content:'';position:absolute;inset:6% 2% 4% 6%;border-radius:28px;background:radial-gradient(120% 90% at 70% 20%,#dcfce7 0%,#f0fdf4 45%,#f8fafc 100%);border:1px solid #e2e8f0}
.bn664-ph{position:absolute;width:236px;border-radius:38px;padding:8px;background:#0f172a;box-shadow:0 30px 60px -18px rgba(15,23,42,.35),0 12px 24px -12px rgba(15,23,42,.25)}
.bn664-ph img{display:block;width:100%;height:auto;border-radius:31px}
.bn664-ph.a{left:4%;top:7%;transform:rotate(-4deg);z-index:2}
.bn664-ph.b{right:3%;top:3%;transform:rotate(3deg);z-index:1}
.bn664-chip{position:absolute;z-index:3;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px 14px;box-shadow:0 12px 28px -12px rgba(15,23,42,.25);font:600 14px Inter,system-ui,sans-serif;color:#0f172a;display:flex;gap:10px;align-items:center}
.bn664-chip b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.bn664-chip i{width:28px;height:28px;border-radius:50%;background:#ecfdf3;display:grid;place-items:center;color:#15803d;font-style:normal;font-weight:800}
.bn664-chip.c1{left:0;bottom:10%}
.bn664-chip.c2{right:0;bottom:16%}
.hero-grid:has(.bn664-hero) .scene{display:none!important}
@media (max-width:900px){.bn664-hero{min-height:460px}.bn664-ph{width:172px}.bn664-ph.a{left:2%}.bn664-ph.b{right:2%}.bn664-chip{font-size:13px}.bn664-chip b{font-size:16px}}

/* BN664 - bento features (styling only; same content) */
@media (min-width:901px){
  .features>.wrap{display:grid;grid-template-columns:1.08fr 1fr;gap:20px;align-items:stretch}
  .features>.wrap>h2,.features>.wrap>p.lede{grid-column:1/-1;margin-bottom:0}
  .features .frow{margin:0!important;max-width:none!important;display:flex!important;flex-direction:column;gap:0!important;background:#fff;border:1px solid #e2e8f0;border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .features>.wrap>.frow:nth-of-type(1){grid-row:span 2}
  .features .frow .fcopy{order:1;padding:26px 28px 6px}
  .features .frow .fcopy h3{font-size:22px;margin:0 0 6px}
  .features .frow .fcopy>p{margin:0 0 10px;color:#475569}
  .features .frow .fcopy ul{margin:0}
  .features .frow .fcopy li{padding-top:7px!important;padding-bottom:7px!important}
  .features .frow .fcopy li span{display:none}
  .features .frow .fvis{order:2!important;flex:1;border:0!important;border-radius:0!important;background:#f8fafc!important;background-image:none!important;box-shadow:none!important;padding:22px 24px 0!important;display:flex;align-items:flex-start!important;justify-content:center;overflow:hidden;min-height:0}
  .features .frow .fvis{align-self:stretch!important;width:auto!important;max-width:none!important;margin:0!important}
  .features .frow .fvis::before,.features .frow .fvis::after{display:none!important}
  .features .frow .fvis>*:not(.bn656-shot){display:none!important}
  .features .frow .bn656-shot{align-self:flex-start;background:transparent}
  .features .frow .bn656-shot{width:250px}
  .features>.wrap>.frow:nth-of-type(2) .fvis,.features>.wrap>.frow:nth-of-type(3) .fvis{max-height:260px}
  .features>.wrap>.frow:nth-of-type(2) .bn656-shot,.features>.wrap>.frow:nth-of-type(3) .bn656-shot{width:230px}
  .features .frow .bn656-shot figcaption{display:none}
  .features .frow .bn656-shot .frame{border-radius:34px 34px 0 0;padding-bottom:0}
  .features .frow .bn656-shot img{border-radius:27px 27px 0 0}
}

/* BN665 - hero background: a soft green band with a pegboard dot grid behind the product, fading toward the edges */
.hero{position:relative;isolation:isolate;background:linear-gradient(180deg,#e8f5ec 0%,#f1f9f3 60%,#fbfdfc 100%);border-bottom:1px solid #dfe9e2}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#9fbfab 1.6px,transparent 1.9px);background-size:24px 24px;-webkit-mask-image:radial-gradient(62% 85% at 74% 46%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%);mask-image:radial-gradient(62% 85% at 74% 46%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%)}
.hero::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:560px;height:560px;right:6%;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.20) 0%,rgba(34,197,94,0) 68%)}
.bn664-hero::before{display:none!important}
@media (max-width:900px){.hero::before{-webkit-mask-image:radial-gradient(95% 55% at 50% 72%,#000 0%,rgba(0,0,0,.5) 45%,transparent 82%);mask-image:radial-gradient(95% 55% at 50% 72%,#000 0%,rgba(0,0,0,.5) 45%,transparent 82%)}.hero::after{width:380px;height:380px;right:50%;top:auto;bottom:4%;transform:translateX(50%)}}
