/* WARNO public front page (sales page) and setup wizard. Loads after design.css. New here vs design.css: --stage (a darker hero ground), .pub layout, hero, demo frame, why-pay, proof, pricing, wizard.
   Law: STRATEGY.md section 7 with ONE exception approved by Koley (relayed by the Lead, 9 Oct 2026): a single motion layer in the hero of this public page. No gradients, no video, no parallax. Gold: primary button, focus ring, nothing else. */
:root { --stage: #090c10; }
html[data-theme="light"] { --stage: #f4f6f8; }
body.pub { display: block; min-height: 100vh; }
.pub a { color: inherit; } .pub a:hover { text-decoration: none; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.pub h1, .pub h2, .pub h3 { font-family: var(--font); }

/* ---------- top bar (over the hero) ---------- */
.ptop { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 72px; display: flex; align-items: center; }
.ptop .wrap { display: flex; align-items: center; gap: 32px; }
.ptop .brand { height: 40px; padding: 0; margin: 0; }
.ptop nav { display: flex; gap: 28px; margin-left: auto; color: var(--text2); font-size: var(--fs-3); }
.ptop nav a:hover { color: var(--text); }
.ptop .login { color: var(--text); font-size: var(--fs-3); font-weight: 500; }
.ptop .menu { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; background: var(--stage); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; }
.hero canvas, .hero .still { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hero .hin { position: relative; padding-top: 72px; padding-bottom: 150px; }
.hero h1 { margin: 0; font: 600 clamp(46px, 9.2vw, 148px)/.96 var(--font); letter-spacing: -.04em; text-wrap: balance; }
.hero .lead { margin: 28px 0 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; color: var(--text2); }
.hero .cta { margin: 40px 0 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero .cta .btn.primary { height: 56px; padding: 0 30px; font-size: 17px; border-radius: 8px; }
.hero .cta small { color: var(--mute); font-size: var(--fs-2); max-width: 30ch; line-height: 1.4; }
.hero .base { position: absolute; left: 0; right: 0; bottom: 0; }
.hero .base .wrap { display: flex; justify-content: space-between; align-items: end; padding-bottom: 28px; color: var(--mute); font-size: var(--fs-2); gap: 24px; }
.hero .base .peek { width: 100%; height: 56px; border: 1px solid var(--line2); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--panel); display: flex; align-items: center; padding: 0 20px; gap: 12px; color: var(--text2); }
.hero .base .peek .smp { flex: none; }

/* direction A: centred, huge */
.dirA .hero .hin { text-align: center; }
.dirA .hero h1 { margin-inline: auto; max-width: 11ch; }
.dirA .hero .lead { margin-inline: auto; }
.dirA .hero .cta { justify-content: center; flex-direction: column; gap: 14px; }
.dirA .hero .cta small { max-width: none; }

/* direction B: inset frame, statement left, live demo right */
.dirB .hero { padding: 16px; background: var(--bg); }
.dirB .hero .frame { position: relative; flex: 1; border: 1px solid var(--line2); border-radius: 6px; background: var(--stage); overflow: hidden; display: flex; align-items: center; isolation: isolate; }
.dirB .hero .frame canvas, .dirB .hero .frame .still { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.dirB .hero .hin { padding: 72px 0 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; width: 100%; }
.dirB .hero h1 { font-size: clamp(44px, 5.6vw, 104px); }
.dirB .ptop { top: 16px; } .dirB .ptop .wrap { padding: 0 48px; }
.dirB .hero .base { display: none; }

/* direction C: light, typographic, no motion */
.dirC .hero { min-height: 0; padding: 150px 0 72px; }
.dirC .hero .hin { padding-top: 0; padding-bottom: 0; }
.dirC .hero h1 { font-weight: 600; max-width: 12ch; font-size: clamp(46px, 8vw, 120px); }

/* ---------- sections ---------- */
.sec { padding: 112px 0; border-top: 1px solid var(--line); }
.sec h2 { margin: 0 0 12px; font: 600 clamp(28px, 3.4vw, 48px)/1.08 var(--font); letter-spacing: -.025em; max-width: 22ch; text-wrap: balance; }
.sec .lede { margin: 0 0 48px; color: var(--text2); font-size: 18px; max-width: 56ch; line-height: 1.5; }

/* demo */
.demo { border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); overflow: visible; }
.demo .dh { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.demo .dh .sp { flex: 1; } .demo .dh span.t { color: var(--mute); font-size: var(--fs-2); }
.demo .db { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 560px; }
.dlist { border-right: 1px solid var(--line); }
.ditem { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 14px 16px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.ditem:hover { background: var(--raised); } .ditem[aria-selected="true"] { background: var(--raised); box-shadow: inset 2px 0 0 var(--text2); }
.ditem .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; line-height: 1.35; } .ditem small { display: block; color: var(--mute); font-size: var(--fs-2); margin-top: 4px; }
.seal { width: 28px; height: 28px; border-radius: 6px; background: #f4f6f8; border: 1px solid var(--line2); object-fit: contain; padding: 2px; display: block; }
.dpane { padding: 24px 28px; min-width: 0; }
.dpane h3 { margin: 0; font: 600 22px/1.25 var(--font); letter-spacing: -.01em; }
.dpane .by { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; color: var(--text2); } .dpane .by .seal { width: 32px; height: 32px; }
.dtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 20px 0 16px; overflow-x: auto; scrollbar-width: none; }
.dtabs button { padding: 10px 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text2); font: 500 var(--fs-3) var(--font); cursor: pointer; white-space: nowrap; }
.dtabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.dtp { display: none; } .dtp.on { display: block; }
.dfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin: 0; } .dfacts dt { color: var(--mute); font-size: var(--fs-2); margin-bottom: 2px; } .dfacts dd { margin: 0; }
.dslot { border: 1px dashed var(--line2); border-radius: 8px; padding: 20px; color: var(--text2); } .dslot b { color: var(--text); display: block; margin-bottom: 4px; }
.dslot .ln { height: 10px; border-radius: 3px; background: var(--raised); margin: 12px 0 0; } .dslot .ln:nth-child(3) { width: 70%; } .dslot .ln:nth-child(4) { width: 85%; }
.ddoc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .ddoc .nm { overflow-wrap: anywhere; }
.dzip { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.demo .match { height: 32px; } .dnote { color: var(--mute); font-size: var(--fs-2); margin-top: 16px; }

/* why pay */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; }
.why h3 { margin: 0 0 8px; font: 600 22px/1.25 var(--font); letter-spacing: -.01em; } .why p { margin: 0 0 16px; color: var(--text2); font-size: 17px; line-height: 1.5; max-width: 44ch; }
.why .frag { padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--text2); font-size: var(--fs-3); }

/* proof */
.proof { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.founder { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; }
.founder img { width: 168px; height: 168px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid var(--line2); }
.founder p { margin: 0 0 12px; color: var(--text2); font-size: 17px; line-height: 1.55; } .founder b { color: var(--text); font-weight: 600; }
.founder .nm { color: var(--mute); font-size: var(--fs-2); margin-top: 16px; }
.cov { width: 100%; border-collapse: collapse; } .cov td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; } .cov td:first-child { color: var(--text2); } .cov td.r { text-align: right; font-variant-numeric: var(--num); font-weight: 600; white-space: nowrap; padding-left: 16px; }
.cov caption { text-align: left; color: var(--mute); font-size: var(--fs-2); padding-bottom: 8px; }
.covnote { color: var(--mute); font-size: var(--fs-2); margin: 12px 0 0; }

/* pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; }
.plan { border: 1px solid var(--line2); border-radius: 12px; padding: 32px; background: var(--panel); display: flex; flex-direction: column; }
.plan h3 { margin: 0; font: 600 22px/1.2 var(--font); } .plan .price { margin: 12px 0 4px; font: 600 44px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: var(--num); } .plan .price small { font-size: 16px; color: var(--mute); font-weight: 400; letter-spacing: 0; }
.plan .for { color: var(--text2); margin: 0 0 20px; min-height: 3em; } .plan ul { margin: 0 0 28px; padding: 0 0 0 18px; color: var(--text2); display: grid; gap: 8px; flex: 1; }
.plan .btn { justify-content: center; height: 48px; font-size: 16px; }
.plan .fine { color: var(--mute); font-size: var(--fs-2); margin: 12px 0 0; text-align: center; }
.partner { margin-top: 24px; color: var(--text2); max-width: 70ch; }

.final { text-align: center; padding: 128px 0; border-top: 1px solid var(--line); }
.final h2 { margin: 0 auto 28px; font: 600 clamp(36px, 5vw, 72px)/1 var(--font); letter-spacing: -.035em; max-width: 14ch; } .final .btn { height: 56px; padding: 0 30px; font-size: 17px; }
.pfoot { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--mute); font-size: var(--fs-2); } .pfoot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; } .pfoot a { color: var(--text2); }

/* sticky phone CTA (appears after the hero) */
.stick { display: none; }

@media (max-width: 1100px) { .demo .db { grid-template-columns: 280px minmax(0, 1fr); } .proof { grid-template-columns: 1fr; gap: 48px; } .dirB .hero .hin { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .wrap { padding: 0 16px; } .ptop nav { display: none; } .ptop .menu { display: inline; margin-left: auto; }
  .hero .hin { padding-bottom: 130px; } .hero .cta .btn.primary { width: 100%; justify-content: center; } .hero .base .wrap { display: none; }
  .dirA .hero .hin { text-align: left; } .dirA .hero h1, .dirA .hero .lead { margin-inline: 0; } .dirA .hero .cta { align-items: stretch; }
  .sec { padding: 64px 0; } .sec .lede { margin-bottom: 32px; font-size: 16px; }
  .demo .db { grid-template-columns: 1fr; } .dlist { border-right: 0; border-bottom: 1px solid var(--line); max-height: 280px; overflow: auto; } .dpane { padding: 16px; } .dfacts { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; gap: 40px; } .founder { grid-template-columns: 96px 1fr; gap: 16px; } .founder img { width: 96px; height: 96px; }
  .plans { grid-template-columns: 1fr; } .plan { padding: 24px; } .final { padding: 80px 0; }
  .dirB .hero { padding: 8px; } .dirB .ptop { top: 8px; } .dirB .ptop .wrap { padding: 0 16px; } .dirB .hero .hin { padding: 72px 16px 24px; gap: 32px; }
  .dirC .hero { padding: 104px 0 48px; }
  .stick { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line2); display: none; } .stick.on { display: block; } .stick .btn { width: 100%; justify-content: center; height: 48px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero canvas { display: none; } }

/* ---------- setup wizard (mobile first): one question per screen, progress, back / skip ---------- */
body.wz { display: block; background: var(--bg); min-height: 100vh; }
.wzt { position: sticky; top: 0; z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line); }
.wzt .row { max-width: 640px; margin: 0 auto; padding: 0 16px; height: 64px; display: flex; align-items: center; gap: 16px; }
.wzt .brand { height: 40px; padding: 0; margin: 0; } .wzt .sp { flex: 1; }
.prog { height: 4px; background: var(--line); } .prog i { display: block; height: 100%; background: var(--text); width: 0; }
.wzm { max-width: 640px; margin: 0 auto; padding: 32px 16px 160px; }
.wzm .step { color: var(--mute); font-size: var(--fs-2); margin: 0 0 12px; }
.wzm h1 { margin: 0 0 12px; font: 600 clamp(28px, 6vw, 40px)/1.12 var(--font); letter-spacing: -.025em; text-wrap: balance; }
.wzm .hint { margin: 0 0 28px; color: var(--text2); font-size: 17px; line-height: 1.5; max-width: 52ch; }
.opts { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 12px 16px; text-align: left; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; color: var(--text); font: 500 16px/1.3 var(--font); cursor: pointer; }
.opt:hover { border-color: var(--text2); } .opt small { display: block; color: var(--mute); font-weight: 400; font-size: var(--fs-2); margin-top: 2px; }
.opt .ck { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--text2); border-radius: 50%; display: grid; place-items: center; } .opt.multi .ck { border-radius: 5px; }
.opt[aria-pressed="true"], .opt[aria-checked="true"] { border-color: var(--text); background: var(--raised); } .opt[aria-pressed="true"] .ck, .opt[aria-checked="true"] .ck { background: var(--text); border-color: var(--text); } .opt[aria-pressed="true"] .ck::after, .opt[aria-checked="true"] .ck::after { content: ""; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .chipset .fchip { height: 40px; padding: 0 14px; font-size: var(--fs-3); cursor: pointer; background: transparent; font-family: var(--font); }
.fchip[aria-pressed="true"] { border-color: var(--text); background: var(--raised); color: var(--text); }
.wzm .in { height: 48px; font-size: 16px; margin-bottom: 12px; }
.wzact { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.wzact .row { max-width: 640px; margin: 0 auto; display: flex; gap: 12px; align-items: center; } .wzact .sp { flex: 1; }
.wzact .btn { height: 48px; font-size: 16px; padding: 0 22px; } .wzact .btn.primary { min-width: 140px; justify-content: center; }
.link { background: none; border: 0; padding: 0; color: var(--info); font: inherit; text-decoration: underline; cursor: pointer; }
.mcard { border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); padding: 16px; margin: 0 0 12px; }
.mcard .mtop { display: flex; align-items: center; gap: 10px; color: var(--text2); font-size: var(--fs-2); } .mcard .mtop .sp { flex: 1; }
.mcard h3 { margin: 10px 0 6px; font: 600 17px/1.3 var(--font); } .mcard .meta { color: var(--mute); font-size: var(--fs-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mcard ul { margin: 12px 0 0; padding: 12px 0 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 4px; color: var(--text2); font-size: var(--fs-3); } .mcard li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--mute); margin: 0 10px 2px 0; }
.mnote { padding: 16px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--text2); margin: 0 0 16px; } .mnote b { color: var(--text); display: block; margin-bottom: 4px; }
.skel { height: 120px; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 12px; background: var(--panel); position: relative; } .skel::before, .skel::after { content: ""; position: absolute; left: 16px; height: 10px; border-radius: 3px; background: var(--raised); } .skel::before { top: 22px; width: 60%; } .skel::after { top: 46px; width: 85%; }
.sumbox { border: 1px solid var(--line2); border-radius: 10px; padding: 20px; background: var(--panel); margin: 0 0 24px; } .sumbox ul { margin: 12px 0 0; padding: 0 0 0 18px; color: var(--text2); display: grid; gap: 6px; } .sumbox .pr { font: 600 28px/1.1 var(--font); font-variant-numeric: var(--num); } .sumbox .pr small { font-size: 15px; font-weight: 400; color: var(--mute); }
.grid2c { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid2c .in { margin-bottom: 0; }
.fld { display: grid; gap: 6px; margin: 0 0 16px; } .fld label { font-weight: 500; }
@media (min-width: 801px) { .wzm { padding-top: 56px; } .wzact .row { justify-content: flex-start; } }
.wzm details.more { border: 1px solid var(--line2); border-radius: 8px; padding: 0 16px; margin: 0 0 20px; } .wzm details.more summary { cursor: pointer; padding: 14px 0; font-weight: 500; } .wzm details.more .morein { padding: 0 0 8px; }
.wzm .ablk { margin-top: 28px; } .wzm .ablk h2 { margin: 0 0 6px; font: 600 24px/1.2 var(--font); }
.wzt .btn { white-space: nowrap; }

/* Shared "Where you want to win" component (places.js) and the profile additions (profile.js). design.css tokens only, so it reads the same on the dark wizard, the light terminal and the real profile page. */
.places { display: block; } .places .pl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .places .pl-h .h4 { margin: 0 0 8px; } .places .pl-sum { color: var(--text2); font-size: var(--fs-2); }
.places .pl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; } .places .pl-tools .in { flex: 1 1 200px; height: 40px; margin: 0; font-size: var(--fs-3); } .places .pl-tools b { font-size: var(--fs-3); margin-right: auto; }
.places .chipset { gap: 6px; margin: 0 0 12px; } .places .fchip { height: 36px; padding: 0 12px; font-size: var(--fs-2); cursor: pointer; background: transparent; font-family: var(--font); display: inline-flex; align-items: center; gap: 6px; }
.places .fchip b { font-weight: 600; } .places .fchip small { font-size: 11.5px; color: var(--mute); font-weight: 400; } .places .fchip[aria-pressed="true"] small, .places .fchip[aria-checked="true"] small { color: inherit; opacity: .8; }
.places .pl-grp .fchip { border-style: dashed; } .places .pl-grp .fchip[aria-pressed="true"] { border-style: solid; }
.places .pl-st.dim .fchip { opacity: .75; } .places .fchip:hover { border-color: var(--text2); }
.places .pl-abroad { margin: 0 0 12px; } .places .pl-abroad small { display: block; color: var(--mute); font-weight: 400; font-size: var(--fs-2); margin-top: 3px; line-height: 1.4; }
.places .pl-rgw { display: inline-flex; align-items: stretch; } .places .pl-rgw .fchip { border-top-right-radius: 0; border-bottom-right-radius: 0; } .places .pl-x { width: 36px; height: 36px; border: 1px solid var(--line2); border-left: 0; border-radius: 0 999px 999px 0; background: transparent; color: var(--text2); font: 500 16px/1 var(--font); cursor: pointer; } .places .pl-x:hover { color: var(--text); border-color: var(--text2); }
.places .pl-co { border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 2px; margin: 0 0 12px; background: var(--raised); } .places .pl-sum2 { margin: 0 0 8px; }
.places [hidden] { display: none !important; }
.chipset.avoid .fchip.red { border-color: var(--bad); color: var(--bad); flex-direction: column; align-items: flex-start; gap: 0; height: auto; min-height: 36px; padding: 6px 12px; line-height: 1.2; } .chipset.avoid .fchip.red small { color: var(--bad); opacity: .8; } .chipset.avoid .fchip.red[aria-pressed="true"] { background: var(--bad); color: #fff; border-color: var(--bad); } .chipset.avoid .fchip.red[aria-pressed="true"] small { color: #fff; }
.fchip[role="radio"][aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (max-width: 760px) { .places .fchip, .places .pl-x, .chipset.avoid .fchip.red { min-height: 44px; } .places .pl-tools .in { height: 44px; } }
/* NAICS picker (naics.js) */
.npick { position: relative; } .npick .nchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .npick .nchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 12px; border: 1px solid var(--text); border-radius: 999px; font-size: var(--fs-2); background: var(--raised); } .npick .nchip b { font-weight: 600; } .npick .nchip button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--text2); font-size: 16px; cursor: pointer; } .npick .nchip button:hover { background: var(--line); color: var(--text); }
.npick .nbox { display: flex; gap: 8px; } .npick .nbox .in { flex: 1; height: 44px; margin: 0; font-size: 16px; } .npick .nbox .btn { height: 44px; }
.npick .nlist { margin-top: 6px; max-height: 320px; overflow: auto; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); padding: 6px; } .npick .nhd { padding: 6px 8px; color: var(--mute); font-size: var(--fs-1); } .npick .nghd { padding: 8px 8px 2px; color: var(--text2); font-size: var(--fs-1); font-weight: 500; border-top: 1px solid var(--line); margin-top: 4px; } .npick .ngrp:first-child .nghd { border-top: 0; margin-top: 0; }
.npick .nopt { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: 400 var(--fs-3)/1.3 var(--font); cursor: pointer; min-height: 40px; } .npick .nopt b { font-weight: 600; margin-right: 4px; } .npick .nopt:hover, .npick .nopt.hi { background: var(--raised); } .npick .nopt.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); } .npick mark { background: var(--accent-soft); color: inherit; }
.npick .nsec { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; } .npick .nsect { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text2); font: 500 var(--fs-2)/1.3 var(--font); cursor: pointer; min-height: 36px; } .npick .nsect span { color: var(--text); font-weight: 400; } .npick .nsect:hover { background: var(--raised); }
.npick .nhint { margin: 6px 0 0; font-size: var(--fs-1); }
/* UEI lookup card (wizard step 1) */
.ueirow { display: flex; gap: 8px; } .ueirow .in { flex: 1; text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono, ui-monospace, monospace); } .ueirow .btn { height: 48px; }
.ueicard { border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); padding: 16px; margin: 14px 0; } .ueicard h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font); } .ueicard .ueist { color: var(--text2); font-size: var(--fs-2); margin: 0 0 10px; } .ueicard dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .ueicard dt { color: var(--mute); font-size: var(--fs-1); } .ueicard dd { margin: 2px 0 0; font-size: var(--fs-3); } .ueicard .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .ueicard .acts .btn { height: 44px; }
.ueicard.bad { border-color: var(--bad); } .ueicard .skel { height: 14px; border-radius: 6px; background: var(--raised); margin: 8px 0; }
@media (max-width: 760px) { .ueicard dl { grid-template-columns: 1fr; } }
/* seat stepper (seats.js), pricing card and wizard */
.seats .seatrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .seats .seatlbl { font-weight: 500; } .seats .stepper { display: inline-flex; align-items: center; gap: 4px; } .seats .stepper .btn { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 20px; } .seats .seatn { width: 64px; height: 44px; margin: 0; text-align: center; font-size: 16px; -moz-appearance: textfield; } .seats .seatn::-webkit-inner-spin-button, .seats .seatn::-webkit-outer-spin-button { -webkit-appearance: none; }
.seats .seattot { margin-left: auto; color: var(--text2); } .seats .seattot b { color: var(--text); font-size: var(--fs-5); font-variant-numeric: var(--num); }
.seats .seatlines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; color: var(--text2); font-size: var(--fs-2); } .seats .seatlines li { display: flex; justify-content: space-between; gap: 12px; } .seats .seatlines li span:last-child { font-variant-numeric: var(--num); color: var(--text); }
.seats .seattiers { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: var(--fs-1); } .seats .seattiers th { text-align: left; color: var(--mute); font-weight: 500; padding: 0 8px 2px 0; } .seats .seattiers td { padding: 0 8px 0 0; color: var(--text); font-variant-numeric: var(--num); }
.seats .seatnote { margin: 10px 0 0; color: var(--mute); font-size: var(--fs-2); }
/* the real mark in brand links and the footer */
.brand svg.mk, .wzt .brand svg.mk { width: 32px; height: 32px; display: block; background: none; box-shadow: none; border-radius: 8px; } .pfoot .fmark { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; } .pfoot .fmark svg { width: 20px; height: 20px; border-radius: 5px; } .pfoot .fmark .us { color: var(--accent); }

/* Describe box (describe.js), phone nav sheet, desktop toggle, phone pipeline list, wizard phone fixes (Koley via the Lead, 10 Oct 2026). Loaded by home-A2.html and setup.html after home3.css / places.css. */
.dsc { text-align: left; }
.dbox { position: relative; }
.dbox .dta { width: 100%; min-height: 96px; padding: 14px 56px 14px 16px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); color: var(--text); font: 400 17px/1.45 var(--font); resize: vertical; box-sizing: border-box; display: block; margin: 0; }
.dbox .dta::placeholder { color: var(--mute); } .dbox .dta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dbox .mic { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--raised); color: var(--text); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.dbox .mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dbox .mic:hover { border-color: var(--text2); } .dbox .mic[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); animation: dpulse 1.2s ease-in-out infinite; }
@keyframes dpulse { 50% { box-shadow: 0 0 0 8px var(--accent-soft); } } @media (prefers-reduced-motion: reduce) { .dbox .mic[aria-pressed="true"] { animation: none; } }
.dbox .dlive { position: absolute; right: 58px; top: 20px; font-size: 12.5px; color: var(--accent); }
.dchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; align-items: center; }
.dchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px 6px 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); color: var(--text); font: 400 14px/1.25 var(--font); cursor: pointer; text-align: left; max-width: 100%; }
.dchip b { font-weight: 600; flex: none; } .dchip span { color: var(--text2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .dchip i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 13px; background: var(--raised); color: var(--text2); }
.dchip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); } .dchip[aria-pressed="true"] i { background: var(--accent); color: var(--accent-ink); }
.dhint { color: var(--mute); font-size: 13px; margin: 8px 0 0; } .dchips .dhint { margin: 0; flex-basis: 100%; }
.dmore { margin: 10px 0 0; font-size: 14px; } .dmore .link { color: var(--text2); text-decoration: underline; } .dpick { margin-top: 8px; }
.dnote { color: var(--warn, #c98a12); font-size: 13px; margin: 6px 0 0; }
.hero .dgo { max-width: 640px; margin-left: auto; margin-right: auto; } .hero .dsc { max-width: 640px; margin: 0; } .hero .dsc .dta { min-height: 108px; font-size: 18px; }
.hero .dgo { margin-top: 28px; } .hero .dgo .btn.primary { width: 100%; height: 52px; justify-content: center; font-size: 17px; }
.hero .trial { margin-top: 12px; }
.final .dsc { max-width: 640px; margin: 0 auto; } .final .dgo { margin: 12px auto 0; max-width: 640px; } .final .dgo .btn.primary { width: 100%; height: 52px; justify-content: center; }
.final .alt { margin: 14px 0 0; color: var(--text2); font-size: 14px; }
/* plain links that replaced buttons (CTA audit) */
.lnkcta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* phone nav sheet */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(6, 8, 12, .55); display: none; } .sheet.on { display: block; }
.sheet .pane { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; background: var(--panel); border-radius: 16px 16px 0 0; border-top: 1px solid var(--line2); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.4); }
.sheet .shh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .sheet .shh b { font-size: 15px; }
.sheet .x { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line2); background: var(--raised); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.sheet a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; color: var(--text); font-size: 17px; text-decoration: none; border-bottom: 1px solid var(--line); }
.sheet a:last-of-type { border-bottom: 0; } .sheet a .pill { font-size: 10.5px; } .sheet a.go { margin-top: 10px; justify-content: center; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 600; border: 0; }
.sheet a.lg { justify-content: center; border-radius: 10px; border: 1px solid var(--line2); margin-top: 8px; }
body.sheet-open { overflow: hidden; }
/* desktop toggle under the phone demo, and the bar back to the phone view */
.dtog { margin: 18px 0 0; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 12px; display: grid; gap: 6px; } .dtog b { font-size: 15px; } .dtog span { color: var(--text2); font-size: 14px; } .dtog .btn { height: 44px; justify-content: center; margin-top: 6px; }
.deskbar { display: none; } html.forcedesk .deskbar { display: flex; position: fixed; z-index: 60; right: 24px; bottom: 24px; gap: 12px; align-items: center; padding: 14px 20px; background: var(--panel); border: 2px solid var(--line2); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 28px; } html.forcedesk .deskbar .btn { height: 64px; font-size: 26px; padding: 0 28px; }
html.forcedesk .stick, html.forcedesk .sheet { display: none !important; }
/* phone pipeline demo: vertical list of compact cards (replaces the clipped horizontal stack) */
#mstack.mstack { display: block; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
.mlist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mpc { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.mpc .mt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mpc .mt .md { margin-left: auto; color: var(--text2); font-size: 13px; white-space: nowrap; }
.mpc { min-width: 0; overflow-wrap: anywhere; } .mpc h3 { margin: 0; font: 600 16px/1.3 var(--font); } .mpc h3 .smp { display: inline-flex; vertical-align: middle; height: 18px; } .mpc > small { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .mpc > small .vchip { white-space: normal; } .mpc .mag { display: flex; gap: 8px; align-items: center; color: var(--text2); font-size: 13px; } .mpc .mag .seal { width: 20px; height: 20px; } .mpc small { color: var(--mute); font-size: 13px; }
.mpc .mact { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .mpc .mact .btn { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13.5px; } .mpc .mact .btn.primary { margin-left: auto; }
.mpc .stage { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--raised); border: 1px solid var(--line2); color: var(--text2); } .mpc .stage.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.mpc .mkf { margin: 6px 0 0; display: grid; gap: 8px; } .mpc .mkf dt { color: var(--mute); font-size: 13px; } .mpc .mkf dd { margin: 0; } .mpc .mkf q { display: block; margin: 4px 0 0; padding: 8px 10px; border-left: 2px solid var(--line2); color: var(--text2); font-size: 13px; quotes: "\201C" "\201D"; } .mpc .mkf em { display: block; color: var(--mute); font-size: 12px; font-style: normal; margin-top: 2px; }
.mpc .why { margin: 0; color: var(--text2); font-size: 14px; line-height: 1.4; }
.mstages { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; margin: 0 0 10px; } .mstages .stage { flex: none; }
.mnote { color: var(--mute); font-size: 13px; margin: 10px 0 0; }
/* the hero's Pause motion control stays on phones (video plays there now) */
@media (max-width: 800px) { .mtoggle { display: inline-flex !important; left: 16px; right: auto; width: auto; height: 32px; padding: 0 12px; font-size: 12.5px; bottom: calc(84px + env(safe-area-inset-bottom)); } html.forcedesk .mtoggle { bottom: 110px; } }
/* 16 px gutters everywhere under 760 px, nothing bleeds */
@media (max-width: 760px) { .wrap, .wzt .row, .wzm, .wzact { padding-left: 16px !important; padding-right: 16px !important; } .wzm { padding-bottom: 140px; } .mstack { margin: 0; padding-inline: 0; } .sec .lede, .sec h2 { max-width: none; } .hero .trial { max-width: none; } }
/* wizard, phone: chip wraps, search then Browse stacked, Continue full width, keyboard hints hidden on touch */
.npick .nchip { height: auto; min-height: 36px; padding: 6px 4px 6px 12px; white-space: normal; line-height: 1.25; max-width: 100%; } .npick .nchip span, .npick .nchip > :not(b):not(button) { overflow-wrap: anywhere; }
@media (max-width: 640px) { .wzt #mockchip { display: none; } .wzt .row { gap: 10px; } .npick .nbox { flex-direction: column; } .npick .nbox .in, .npick .nbox .btn { width: 100%; } .npick .nbox .in::placeholder { font-size: 15px; } .wzact .row { flex-wrap: wrap; } .wzact .btn.primary { flex: 1 1 100%; width: 100%; order: 1; } .wzact #back, .wzact #skip { flex: 1; } .wzact .sp { display: none; } }
@media (hover: none) { .npick .nhint .kbd, .wzm .kbdhint { display: none; } }

/* the Menu control is a button now */
.ptop .menu { background: none; border: 0; padding: 0; min-height: 44px; color: var(--text); font: 500 14px var(--font); cursor: pointer; }

/* the prominent "Open the interactive dashboard" button under the describe box, phones only (the terminal is hidden under 760 px) */
.dtopw { display: none; margin: 10px 0 0; } @media (max-width: 760px) { .dtopw { display: block; max-width: 640px; } .dtop { width: 100%; height: 48px; justify-content: center; font-size: 15px; border-color: var(--text2); } html.forcedesk .dtopw { display: none; } }

/* polish 10 Oct late: tap targets, one primary per screen, phone pricing order, the sticky bar never hides the last line */
@media (max-width: 760px) {
  .mstages { gap: 8px; } .mstages .stage, .mpc .stage { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .mpc .mact .btn { min-height: 44px; } .mpc .mact { gap: 8px; }
  .ptop .login { padding: 12px 10px; margin: -12px 0; } .ptop .brand { min-height: 44px; }
  .pfoot a { display: inline-block; padding: 12px 0; }
  .phone2 .hind::after, .phone2 .hind2::after { content: ""; position: absolute; inset: -20px -12px; }
  #mtoggle, .mtoggle { height: 40px !important; }
  .seal.fb { white-space: nowrap; font-size: 10px; }
  .final h2 { max-width: 11ch; }
  #pricing > .wrap > h2, #pricing > .wrap > .lede { text-align: left !important; }
  .plans3 { display: flex; flex-direction: column; } .plan3.hi { order: -1; }
  .plan3 .pb .btn { width: 100%; }
  html:has(.stick.on) body { padding-bottom: 84px; }
  .hero .trial { margin: 12px 0 0; padding: 0; }
}

.prevrib{position:relative;z-index:300;background:#e8b84a;color:#111;font:600 13px/1.35 system-ui,sans-serif;padding:7px 14px;text-align:center}
.pendnote{margin:14px 0;padding:10px 14px;border:1px dashed #e8b84a;border-radius:8px;color:#e8b84a;font-size:14px}
.wzm h1:focus{outline:none} /* the heading takes focus on each step for screen readers; no ring */


/* ---------- the "Pause motion" control: fixed bottom left on desktop; on phones mobile.js puts it in the hero under the lead paragraph, 44 px, in the flow, so it is never over text ---------- */
@media (min-width: 801px) { .mtoggle { position: fixed; left: 16px; bottom: 16px; } }
.mtoggle.inline { position: static; display: inline-flex !important; align-items: center; min-height: 44px; height: 44px; margin: 0 0 14px; padding: 0 16px; font-size: 14px; width: auto; }

/* ---------- the site's other gold token families (site-design.css --sd-*, --gold, --w-accent) follow the same palette: primary buttons are the ink / off-white button, the signal is the teal ---------- */
:root, :root[data-theme="light"], :root[data-theme="dark"] { --sd-gold: var(--accent); --sd-gold-ink: var(--accent); --sd-gold-soft: var(--accent-soft); --sd-primary-bg: var(--btn); --sd-primary-ink: var(--btn-ink); --gold: var(--accent); --gold-ink: var(--accent); --w-accent: var(--accent); --w-gold-hover: var(--raised); }