/* 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; }

/* A2: full-page motion background, large terminal demo, company box, phone brief. Loads after design.css and home.css. */
.bgfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
html { background: var(--stage); } body.dirA2 { background: transparent; }
.dirA2 .hero .hin { text-align: center; } .dirA2 .hero h1 { margin-inline: auto; max-width: 11ch; } .dirA2 .hero .lead { margin-inline: auto; }
.dirA2 .hero { background: transparent; min-height: 92svh; }
.dirA2 .hero .hin { padding-bottom: 96px; }
/* Koley, 9 Oct: the terminal is the first thing a visitor sees. Compact hero: one headline, one sentence, one CTA line; the terminal follows in the first screen at 1920 and 1280 (only its bottom edge below the fold). */
.dirA2 .hero.compact { min-height: 0; } .dirA2 .hero.compact .hin { padding: 96px 0 28px; } .dirA2 .hero.compact h1 { font-size: clamp(40px, 4.6vw, 72px); max-width: 14ch; letter-spacing: -.035em; }
.dirA2 .hero.compact .lead { margin-top: 16px; font-size: clamp(16px, 1.15vw, 19px); max-width: 60ch; } .dirA2 .hero.compact .cta { margin-top: 22px; justify-content: center; } .dirA2 .hero.compact .cta .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.dirA2 .hero.compact .cta .btn.primary { height: 50px; padding: 0 26px; font-size: 16px; } .dirA2 .hero.compact .trial { color: var(--mute); font-size: var(--fs-2); max-width: 44ch; text-align: left; line-height: 1.4; }
.dirA2 .sec.first { padding-top: 0; } .dirA2 .sec.first .chips2 { margin-top: 18px; }
@media (max-width: 800px) { .dirA2 .hero.compact .hin { padding: 84px 0 20px; text-align: left; } .dirA2 .hero.compact h1 { font-size: clamp(34px, 10vw, 44px); } .dirA2 .hero.compact .cta .row { justify-content: flex-start; } .dirA2 .hero.compact .cta .btn.primary { width: 100%; justify-content: center; } }
.dirA2 .sec { border-top: 0; }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 28px 0 0; } .chips2 .chip { height: 30px; color: var(--text2); background: rgba(9,12,16,.55); }
.dirA2 .hero .cta { flex-direction: column; gap: 16px; }
.dirA2 .hero .cta .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; } .dirA2 .hero .cta .btn:not(.primary) { height: 56px; padding: 0 24px; font-size: 16px; background: rgba(9,12,16,.4); }
.dirA2 .hero .trial { color: var(--text2); font-size: var(--fs-3); max-width: 60ch; margin: 0 auto; line-height: 1.5; }

.term { border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); overflow: visible; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.term .tbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.term .tbar .sp { flex: 1; } .term .tbar .t { color: var(--mute); font-size: var(--fs-2); }
.term .tprof { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .term .tprof .fchip { height: 28px; font-family: var(--font); cursor: pointer; }
.tgrid { display: grid; grid-template-columns: 168px minmax(0, 1fr) 380px; min-height: 640px; }
.tside { border-right: 1px solid var(--line); padding: 12px 8px; display: grid; align-content: start; gap: 2px; background: var(--bg); border-radius: 0 0 0 12px; }
.tside h6 { margin: 10px 8px 4px; font: 500 var(--fs-1)/1.2 var(--font); color: var(--mute); }
.tside button { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text2); font: 400 var(--fs-3) var(--font); cursor: pointer; text-align: left; }
.tside button:hover { background: var(--raised); color: var(--text); } .tside button[aria-current="page"] { background: var(--accent-soft); color: var(--text); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.tmain { min-width: 0; padding: 16px 0 0; display: flex; flex-direction: column; }
.tview { display: none; flex: 1; } .tview.on { display: block; }
.tfilters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.tfilters .src { margin: 0; border: 0; } .tfilters .sp { flex: 1; } .tfilters select { height: 30px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); color: var(--text); padding: 0 10px; font: 400 var(--fs-2) var(--font); }
.trows { border-top: 1px solid var(--line); }
.trow { display: grid; grid-template-columns: 116px minmax(0, 1fr) 64px 128px; gap: 14px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.trow:hover { background: var(--raised); } .trow[aria-selected="true"] { background: var(--raised); box-shadow: inset 2px 0 0 var(--text2); }
.trow .tt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; } .trow .t { display: block; font-weight: 500; line-height: 1.35; } .trow small { display: block; color: var(--mute); font-size: var(--fs-2); margin-top: 2px; }
.trow .td { color: var(--text2); font-size: var(--fs-3); padding-top: 4px; font-variant-numeric: var(--num); } .trow .tact { text-align: right; } .trow .tact .btn { height: 32px; padding: 0 12px; font-size: var(--fs-2); }
.trow .match { height: 30px; padding: 0 10px; font-size: var(--fs-2); }
.tpane { border-left: 1px solid var(--line); padding: 20px 22px; min-width: 0; }
.tpane h3 { margin: 0; font: 600 20px/1.25 var(--font); } .tpane .by { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; color: var(--text2); font-size: var(--fs-3); } .tpane .seal { width: 28px; height: 28px; }
.tempty { padding: 40px 24px; color: var(--text2); } .tempty b { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }
.plist { padding: 0 16px; } .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .prow small { display: block; color: var(--mute); font-size: var(--fs-2); }
.pstage { color: var(--text2); font-size: var(--fs-2); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; }
.pfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding: 4px 16px 16px; margin: 0; } .pfacts dt { color: var(--mute); font-size: var(--fs-2); } .pfacts dd { margin: 0; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--raised); border: 1px solid var(--line2); border-radius: 8px; padding: 10px 16px; color: var(--text); font-size: var(--fs-3); display: none; max-width: 90vw; } .toast.on { display: block; }

.cbox { max-width: 760px; margin: 0 auto; text-align: center; }
.cbox h2 { margin-inline: auto; } .cbox .lede { margin-inline: auto; }
.cbox form { display: grid; gap: 12px; margin: 8px 0 0; text-align: left; }
.cbox textarea { width: 100%; min-height: 96px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); color: var(--text); font: 400 17px/1.45 var(--font); resize: vertical; }
.cbox textarea::placeholder { color: var(--mute); } .cbox textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cbox .btn.primary { height: 54px; justify-content: center; font-size: 17px; }
.cbox .chips2 { margin-top: 20px; } .cbox .fchip { height: 36px; cursor: pointer; background: transparent; font-family: var(--font); font-size: var(--fs-3); } .cbox .fchip:hover { border-color: var(--text2); color: var(--text); }
.cbox .alt { margin: 16px 0 0; color: var(--text2); font-size: var(--fs-3); }

.briefsec { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: center; }
.phone { width: 330px; border: 10px solid #1a2029; border-radius: 44px; background: var(--bg); box-shadow: 0 0 0 1px var(--line2), 0 30px 70px rgba(0,0,0,.5); padding: 22px 14px 16px; margin: 0 auto; }
.phone .st { display: flex; justify-content: space-between; color: var(--mute); font-size: 12.5px; padding: 0 10px 12px; font-variant-numeric: var(--num); }
.phone h4 { margin: 0 10px 2px; font: 600 20px/1.2 var(--font); } .phone .sm { margin: 0 10px 12px; color: var(--mute); font-size: var(--fs-2); }
.phone .pi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .phone .pi b { font-weight: 500; font-size: 14px; display: block; line-height: 1.3; } .phone .pi small { color: var(--mute); font-size: 12.5px; }
.phone .pi .badge { min-width: 48px; height: 24px; padding: 0 8px; font-size: 12.5px; }

@media (max-width: 1280px) { .tgrid { grid-template-columns: 180px minmax(0, 1fr); } .tpane { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } .briefsec { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 800px) {
  .tgrid { grid-template-columns: 1fr; min-height: 0; } .tside { display: none; } .trow { grid-template-columns: 1fr auto; } .trow .match { grid-column: 1; width: max-content; } .trow .td { grid-column: 2; grid-row: 1; text-align: right; } .trow .tt { grid-column: 1 / -1; } .trow .tact { grid-column: 1 / -1; text-align: left; }
  .term .tbar .t { display: none; } .tpane { padding: 16px; } .pfacts { grid-template-columns: 1fr; }
  .dirA2 .hero { min-height: 88svh; } .dirA2 .hero .cta .row .btn { width: 100%; justify-content: center; } .chips2 { justify-content: flex-start; }
}
.bgvid { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; background: var(--stage); }
.bgdim { position: fixed; inset: 0; z-index: -2; background: rgba(9, 12, 16, .66); pointer-events: none; }
@media (max-width: 800px) {  .dirA2 .hero .hin { text-align: left; } .dirA2 .hero h1, .dirA2 .hero .lead { margin-inline: 0; } .chips2 { justify-content: flex-start; } }


.mtoggle { position: fixed; z-index: 25; left: 16px; bottom: 16px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(9,12,16,.7); color: var(--text2); font: 500 var(--fs-2) var(--font); cursor: pointer; } .mtoggle:hover { color: var(--text); }
@media (max-width: 800px), (prefers-reduced-motion: reduce) { .mtoggle { display: none; } }

/* ---------- terminal v2: 17 screens ---------- */
.tgrid.nopane { grid-template-columns: 188px minmax(0, 1fr); }
.tgrid { grid-template-columns: 188px minmax(0, 1fr) 380px; align-items: stretch; }
.tmain { padding: 20px 20px 24px; max-height: 760px; overflow: auto; display: block; }
.tsel { display: none; }
.vh h2 { margin: 0; font: 600 22px/1.2 var(--font); letter-spacing: -.01em; max-width: none; } .vh p { margin: 4px 0 16px; color: var(--text2); font-size: var(--fs-3); max-width: 70ch; }
.h3 { margin: 18px 0 8px; font: 600 var(--fs-4)/1.3 var(--font); }
.vbox { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; background: var(--bg); } .vbox small, .vrow small { display: block; color: var(--mute); font-size: var(--fs-2); }
.vrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 12px; align-items: end; } .frow .fld { margin: 0; }
.pager2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; color: var(--mute); font-size: var(--fs-2); } .pager2 .btn { height: 30px; padding: 0 10px; } .pager2 [aria-current="true"] { background: var(--raised); color: var(--text); border-color: var(--line2); }
.mrow { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; } .mrow small { display: block; color: var(--mute); font-size: var(--fs-2); } .mrow[aria-selected="true"] { background: var(--raised); }
.tact { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tact .btn { height: 32px; padding: 0 10px; font-size: var(--fs-2); } .btn[aria-pressed="true"] { background: var(--raised); border-color: var(--text2); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0; text-align: center; } .cal > span { color: var(--mute); font-size: var(--fs-1); } .cd { position: relative; height: 38px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text2); font: 400 var(--fs-2) var(--font); } .cd.e { visibility: hidden; }
.cd.hit { border-color: var(--line2); color: var(--text); cursor: pointer; } .cd.hit i { position: absolute; right: 4px; top: 2px; font-style: normal; font-size: 11px; color: var(--warn); } .cd.on { background: var(--raised); border-color: var(--text2); }
.kan { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; } .kcol { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); min-height: 200px; } .kcol h3 { margin: 0 0 8px; font: 600 var(--fs-3) var(--font); display: flex; justify-content: space-between; } .kcol small { color: var(--mute); font-weight: 400; }
.kcard { border: 1px solid var(--line2); border-radius: 8px; padding: 10px; margin: 0 0 8px; background: var(--panel); } .kcard b { display: block; font-weight: 500; line-height: 1.3; } .kcard small { display: block; color: var(--mute); font-size: var(--fs-2); margin-top: 2px; } .kcard .btn { height: 28px; padding: 0 8px; font-size: var(--fs-2); }
.bars { display: grid; gap: 8px; margin: 8px 0; } .bar { display: grid; grid-template-columns: 230px minmax(0, 1fr) 100px; gap: 12px; align-items: center; } .bar span small { display: block; color: var(--mute); font-size: var(--fs-1); } .bar i { display: block; height: 10px; border-radius: 3px; background: var(--text2); opacity: .55; } .bar b { font-weight: 500; text-align: right; font-variant-numeric: var(--num); }
.out { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: var(--fs-3); line-height: 1.5; }
.outl { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; } .outl small { display: block; color: var(--mute); font-size: var(--fs-2); }
.tscroll { overflow-x: auto; } .tg td { vertical-align: top; }
.seal.fb { display: inline-grid; place-items: center; font: 600 11px var(--font); color: var(--text2); background: var(--raised); }
.tsel .sel2 { width: 100%; }
@media (max-width: 1280px) { .tgrid, .tgrid.nopane { grid-template-columns: 170px minmax(0, 1fr); } .tgrid .tpane { grid-column: 1 / -1; } .tgrid .tpane[hidden] { display: none; } }
@media (max-width: 800px) { .tsel { display: block; padding: 12px 16px 0; } .tgrid, .tgrid.nopane { grid-template-columns: 1fr; } .tmain { padding: 14px 16px 20px; max-height: none; } .cols { grid-template-columns: 1fr; } .bar { grid-template-columns: 1fr; gap: 4px; } .bar b { text-align: left; } .kan { grid-template-columns: repeat(5, 70%); } .mrow { grid-template-columns: 1fr; } }
.mrow { grid-template-columns: 116px minmax(0, 1fr); align-items: start; } .mrow .tact { grid-column: 2; justify-content: flex-start; }
.cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }

/* Terminal v3: the real product's light app inside the dark page. Tokens are re-declared on .term3 so everything inside is the light theme (design.css values). Loads after design.css, home.css, home2.css. */
.term3 { --bg: #f4f6f8; --panel: #ffffff; --raised: #f7f9fb; --line: #e3e8ee; --line2: #d3dae3; --text: #111821; --text2: #4a5666; --mute: #5d6a7b; --accent: #b87a12; --accent-ink: #14100a; --accent-soft: rgba(184,122,18,.12); --ok: #1c7d56; --warn: #96620f; --bad: #b0382e; --info: #2c63a8; --viol: #5a4ab0; color-scheme: light;
  color: var(--text); background: var(--panel); border: 1px solid #2e3a4a; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; font-size: var(--fs-3); }
.term3 .smp { color: var(--text2); border-color: var(--line2); }
/* chrome */
.term3 .tbar { background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 14px; display: flex; align-items: center; gap: 12px; }
.term3 .tbar .t { color: var(--text2); }
.term3 .tgrid { display: grid; grid-template-columns: 196px minmax(0, 1fr) 360px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'side top top' 'side crumb crumb' 'side main pane'; min-height: 720px; height: 820px; position: relative; }
.term3 .tgrid.nopane { grid-template-columns: 196px minmax(0, 1fr); grid-template-areas: 'side top' 'side crumb' 'side main'; }
.term3 .tside { grid-area: side; } .term3 .ttop { grid-area: top; } .term3 .tcrumb { grid-area: crumb; } .term3 .tmain { grid-area: main; min-height: 0; } .term3 .tpane { grid-area: pane; min-height: 0; }
.term3 .tside { background: var(--panel); border-right: 1px solid var(--line); padding: 10px 8px 12px; overflow: auto; display: block; border-radius: 0; }
.term3 .tside .brand { height: 40px; padding: 0 6px; margin: 0 0 8px; }
.term3 .tside .trial { display: flex; align-items: center; justify-content: center; height: 34px; margin: 0 6px 10px; border-radius: 8px; background: var(--btn); color: var(--btn-ink); font: 600 var(--fs-2)/1 var(--font); letter-spacing: .02em; }
.term3 .tside h6 { margin: 10px 8px 2px; font: 500 11.5px/1.2 var(--font); color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.term3 .tside button { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px; white-space: nowrap; overflow: hidden; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: 400 var(--fs-3) var(--font); cursor: pointer; text-align: left; }
.term3 .tside button:hover { background: var(--raised); } .term3 .tside button[aria-current="page"] { background: var(--accent-soft); font-weight: 500; }
.term3 .tside button .pill { margin-left: auto; flex: none; font-size: 10.5px; padding: 2px 5px; border-color: var(--accent); color: var(--accent); }
.term3 .tside button .chev { width: 6px; height: 6px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); margin: 0 4px 2px auto; } .term3 .tside button .pill + .chev { margin-left: 6px; }
.term3 .tside .subs button { height: 26px; padding-left: 26px; color: var(--text2); font-size: var(--fs-2); } .term3 .tside .subs button.soon { color: var(--mute); } .term3 .tside .subs button[aria-current="page"] { color: var(--text); }
.term3 .tside .sfoot { margin: 14px 8px 0; color: var(--mute); font-size: 11.5px; }
.term3 .ttop { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.term3 .ttop .search { flex: 1; max-width: 520px; height: 32px; }
.term3 .ttop .btn { height: 32px; } .term3 .ttop .btn.primary { background: var(--accent); }
.term3 .tcrumb { padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--text2); font-size: var(--fs-2); }
.term3 .tcrumb b { color: var(--text); font-weight: 500; }
.term3 .tmain { background: var(--bg); padding: 18px 20px 28px; overflow: auto; }
.term3 .tpane { background: var(--panel); border-left: 1px solid var(--line); padding: 18px 20px; overflow: auto; }
/* page head */
.term3 .ph2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.term3 .kick { color: var(--accent); font-size: var(--fs-2); font-weight: 500; margin-bottom: 2px; }
.term3 .ph2 h2 { margin: 0; font: 600 26px/1.15 var(--font); letter-spacing: -.02em; }
.term3 .ph2 p { margin: 6px 0 0; color: var(--text2); max-width: 78ch; line-height: 1.45; }
.term3 .ph2 .tools { display: flex; gap: 8px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.term3 .h2b { margin: 26px 0 4px; font: 600 22px/1.2 var(--font); letter-spacing: -.015em; } .term3 .lead2 { margin: 0 0 12px; color: var(--text2); }
.term3 .h3 { margin: 16px 0 8px; font: 600 var(--fs-4)/1.3 var(--font); } .term3 .h4 { margin: 12px 0 6px; font: 600 var(--fs-3)/1.3 var(--font); color: var(--text2); }
.term3 .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; }
.term3 .card .ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; } .term3 .card .ch h3 { margin: 0; font: 600 var(--fs-4)/1.3 var(--font); } .term3 .card .ch .fld { margin: 0; min-width: 260px; }
.term3 .muted { color: var(--text2); font-size: var(--fs-2); } .term3 .empty { padding: 18px 8px; color: var(--text2); text-align: center; }
.term3 .link { background: none; border: 0; padding: 0; color: var(--info); font: inherit; cursor: pointer; text-decoration: none; } .term3 .link:hover { text-decoration: underline; }
.term3 a { color: var(--info); }
/* Pipeline v2 (term3d.js): KPI strip, seven lanes, rich cards, drag and drop, list, timeline, forecast, drawer */
.term3 .strip4.six { grid-template-columns: repeat(6, 1fr); } .term3 .pfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: center; } .term3 .pfilters .in { flex: 1 1 200px; margin: 0; height: 36px; } .term3 .pfilters .sel2 { height: 36px; width: auto; flex: 0 1 auto; min-width: 120px; margin: 0; }
.term3 .pbulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
.term3 .kan.kan7 { grid-template-columns: repeat(7, minmax(230px, 1fr)); } .term3 .kcol h3 .stagehelp { display: block; font-weight: 400; font-size: 11px; margin-top: 2px; } .term3 .kcol.over { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); } .term3 .kempty { border: 1px dashed var(--line2); border-radius: 8px; padding: 18px 10px; text-align: center; color: var(--mute); font-size: var(--fs-2); }
.term3 .kcard.pc { cursor: grab; } .term3 .kcard.pc.dragging { opacity: .5; } .term3 .pch { display: flex; gap: 8px; align-items: flex-start; } .term3 .pch b { flex: 1; } .term3 .psel input { width: 16px; height: 16px; margin: 2px 0 0; }
.term3 .pcm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; } .term3 .pwin { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid; } .term3 .pwin.hi { color: var(--ok); border-color: var(--ok); background: rgba(28,125,86,.08); } .term3 .pwin.mid { color: var(--warn); border-color: var(--warn); background: rgba(150,98,15,.08); } .term3 .pwin.lo { color: var(--bad); border-color: var(--bad); background: rgba(176,56,46,.08); } .term3 .pval { font-weight: 600; margin-left: auto; font-variant-numeric: var(--num); }
.term3 .tag.due.soon { color: var(--bad); border-color: var(--bad); } .term3 .tag.due.near { color: var(--warn); border-color: var(--warn); } .term3 .tag.due.past { color: var(--mute); text-decoration: line-through; }
.term3 .pcnext { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin: 6px 0; } .term3 .pbar { position: relative; height: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text2); margin: 0 0 8px; } .term3 .pbar i { position: absolute; left: 0; bottom: -4px; height: 3px; background: var(--ok); border-radius: 2px; } .term3 .pbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--line); border-radius: 2px; z-index: -1; }
.term3 .pacts { gap: 4px; } .term3 .pacts .sel2.narrow { flex: 1; height: 30px; font-size: 12px; } .term3 .pacts .btn { height: 30px; padding: 0 8px; }
.term3 .ptabs { display: flex; gap: 4px; overflow: auto; margin: 0 0 10px; } .term3 .ptabs [role="tab"] { flex: none; height: 36px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); color: var(--text2); font: 500 var(--fs-2) var(--font); cursor: pointer; } .term3 .ptabs [role="tab"][aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.term3 .pcols { display: flex; justify-content: flex-end; margin: 0 0 8px; position: relative; } .term3 .pcolmenu { position: absolute; right: 0; top: 40px; z-index: 5; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px; display: grid; gap: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.15); } .term3 .thsort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.term3 .tl .tlhead, .term3 .tlrow { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .term3 .tl .tlhead { border-top: 0; color: var(--mute); font-size: var(--fs-1); } .term3 .tlname small { display: block; color: var(--mute); font-size: 11.5px; } .term3 .tlbar { position: relative; height: 28px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); } .term3 .tlhead .tlbar { background: none; } .term3 .tlhead .tlbar span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; } .term3 .tlin { position: absolute; top: 9px; height: 10px; border-radius: 5px; background: var(--line2); } .term3 .tlin.l0 { background: var(--mute); } .term3 .tlin.l1 { background: var(--text2); } .term3 .tlin.l2 { background: var(--accent); } .term3 .tlin.l3 { background: var(--info); } .term3 .tlin.l4 { background: var(--ok); } .term3 .tldue { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line2); white-space: nowrap; } .term3 .tldue.soon { color: var(--bad); border-color: var(--bad); } .term3 .tldue.near { color: var(--warn); border-color: var(--warn); } .term3 .tltoday { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--bad); }
.term3 .fcast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; } .term3 .fq { text-align: center; } .term3 .fbars { height: 140px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-bottom: 8px; } .term3 .fbars i { width: 28px; border-radius: 4px 4px 0 0; display: block; } .term3 .ftot { background: var(--line2); } .term3 .fwt { background: var(--accent); } .term3 .fq b { display: block; font-size: var(--fs-5); } .term3 .fq small, .term3 .fq span { display: block; font-size: var(--fs-1); color: var(--mute); } .term3 .fq span:not(.muted) { color: var(--text); font-weight: 500; margin-top: 4px; } .term3 .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 8px; }
.term3 .pdrawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--panel); border-left: 1px solid var(--line2); box-shadow: -20px 0 40px rgba(0,0,0,.12); padding: 16px 18px; overflow: auto; z-index: 6; } .term3 .pdh { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin: 0 0 10px; } .term3 .pdh small { display: block; color: var(--mute); font-size: 12px; } .term3 .pdm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; } .term3 .pdsec { padding: 10px 0; border-top: 1px solid var(--line); } .term3 .pdsec .h4 { margin: 0 0 6px; } .term3 .pdsec .in { margin: 0 0 6px; } .term3 .pdsec input[type="range"] { width: 100%; } .term3 .phist { margin: 0; padding: 0; list-style: none; } .term3 .phist li { padding: 3px 0; font-size: var(--fs-2); } .term3 .phist small { color: var(--mute); margin-right: 8px; }
.term3 .empty2 { text-align: center; padding: 32px 20px; } .term3 .empty2 p { color: var(--text2); } .term3 .dnote2 { margin-top: 12px; font-size: var(--fs-1); }
/* Shaping Ops */
.term3 .shtabs { margin: 0 0 12px; flex-wrap: wrap; } .term3 .shrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; } .term3 .shrow:first-of-type { border-top: 0; } .term3 .shm b { display: block; } .term3 .shm small { display: block; color: var(--mute); font-size: 12px; margin: 2px 0 6px; } .term3 .shr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .term3 .shr .krow { justify-content: flex-end; }
.term3 .ko { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-2); } .term3 .ko a { color: var(--info); } .term3 .ko .btn.cp { height: 26px; padding: 0 8px; font-size: 11.5px; }
.term3 .shsole { padding: 12px 0; border-top: 1px solid var(--line); } .term3 .shsh { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 8px; } .term3 .shev { font-size: var(--fs-2); } .term3 .shoff { display: flex; gap: 8px; align-items: center; } .term3 .shoff small { display: block; color: var(--mute); font-size: 11.5px; }
.term3 .pend { padding: 8px 12px; border: 1px dashed var(--line2); border-radius: 8px; margin: 12px 0 0; } .term3 .plays { margin: 0; padding-left: 20px; display: grid; gap: 12px; } .term3 .plays .muted { display: block; font-size: var(--fs-1); } .term3 .shguide .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 12px; } .term3 .shguide .grid3 > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); font-size: var(--fs-2); } .term3 .shguide .grid3 b { display: block; margin-bottom: 4px; } .term3 .shguide ul { margin: 0 0 10px; padding-left: 20px; }
@media (max-width: 760px) { .term3 .strip4.six { grid-template-columns: 1fr 1fr; } .term3 .kan.kan7 { grid-template-columns: 1fr; } .term3 .tl .tlhead, .term3 .tlrow { grid-template-columns: 1fr; } .term3 .fcast { grid-template-columns: 1fr 1fr; } .term3 .shrow, .term3 .shsh { grid-template-columns: 32px minmax(0, 1fr); } .term3 .shr { grid-column: 2; align-items: flex-start; } .term3 .shr .krow { justify-content: flex-start; } .term3 .shguide .grid3 { grid-template-columns: 1fr; } .term3 .pdrawer { position: fixed; inset: 0; width: 100%; } }
/* Daily Sweep rows: logo tile, call tag, text, match chip */
.term3 .swc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; } .term3 .swc .org-logo { width: 40px; height: 40px; border-radius: 8px; margin: 0; } .term3 .swc .org-logo img { padding: 3px; } .term3 .swc > div > a { font-weight: 600; } .term3 .swc .swr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; } .term3 .swc .call { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; width: auto; min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: .02em; border-radius: 999px; }
@media (max-width: 760px) { .term3 .swc { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; padding: 12px; } .term3 .swc .swr { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } }
/* Integrations row and guided setup panel (integ.js) */
.term3 .integ .irow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .term3 .igbtn { display: inline-flex; align-items: center; gap: 8px; width: auto; flex: none; height: 38px; padding: 0 14px; white-space: nowrap; font-size: var(--fs-3); } /* .ibtn is the row icon button; this is the integration button */ .term3 .igbtn .ilogo { width: 20px; height: 20px; border-radius: 5px; display: block; } .term3 .igbtn.soon { color: var(--text2); } .term3 .igbtn.soon .ilogo { opacity: .55; filter: grayscale(1); } .term3 .igbtn .pill { margin-left: 2px; }
.term3 .ipanel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .term3 .itabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 12px; } .term3 .itabs .sp { flex: 1; } .term3 .itabs [role="tab"] { height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--text2); font: 500 var(--fs-3) var(--font); cursor: pointer; } .term3 .itabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.term3 .iurl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--raised); margin: 0 0 14px; } .term3 .iurl code { display: block; font: 500 15px/1.3 var(--font); color: var(--text); word-break: break-all; } .term3 .iurl .muted { font-size: var(--fs-1); display: block; margin-bottom: 2px; }
.term3 .isteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .term3 .isteps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 240px; gap: 12px; align-items: start; } .term3 .isn { width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: var(--bg); font: 600 13px/26px var(--font); text-align: center; } .term3 .ist h4 { margin: 2px 0 4px; font: 600 var(--fs-3)/1.3 var(--font); } .term3 .ist p { margin: 0; color: var(--text2); font-size: var(--fs-2); line-height: 1.45; }
.term3 .itest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .term3 .itest code { padding: 6px 10px; border: 1px dashed var(--line2); border-radius: 6px; font: 500 var(--fs-2) var(--font); background: var(--panel); }
.term3 .iui { border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); overflow: hidden; font-size: 11.5px; color: var(--text2); } .term3 .iub { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: var(--raised); border-bottom: 1px solid var(--line); } .term3 .iub i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); } .term3 .iub span { margin-left: 6px; color: var(--mute); font-size: 11px; }
.term3 .iuy { padding: 8px 10px; display: grid; gap: 6px; } .term3 .iun { display: flex; gap: 8px; } .term3 .iun em { font-style: normal; } .term3 .iun b { color: var(--text); border-bottom: 2px solid var(--accent); } .term3 .iul { display: grid; gap: 4px; } .term3 .iur { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; } .term3 .iur i { width: 12px; height: 12px; border-radius: 3px; background: var(--line2); } .term3 .iur i.w { background: var(--text); } .term3 .iur span { margin-left: auto; font-size: 10px; } .term3 .iur.on { border-color: var(--accent); } .term3 .iur b { color: var(--text); }
.term3 .iui .tg { width: 22px; height: 12px; border-radius: 6px; background: var(--line2); position: relative; } .term3 .iui .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--input); } .term3 .iui .tg.on { background: var(--ok); } .term3 .iui .tg.on::after { left: 12px; }
.term3 .iup { width: 22px; height: 22px; border: 1px solid var(--accent); border-radius: 50%; text-align: center; line-height: 20px; color: var(--accent); font-weight: 600; } .term3 .iuy label { font-size: 10px; color: var(--mute); margin-bottom: -4px; } .term3 .iui-in { border: 1px solid var(--line2); border-radius: 5px; padding: 4px 6px; background: var(--bg); color: var(--text); word-break: break-all; } .term3 .iui-in.hl { border-color: var(--accent); }
.term3 .iub2 { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; } .term3 .iub2 span, .term3 .iub2 b { padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line2); } .term3 .iub2 b { background: var(--btn); color: var(--btn-ink); border-color: #0e1218; } .term3 .iuw { font: 600 14px var(--font); color: var(--text); } .term3 .iuw span { color: var(--accent); } .term3 .iuc { color: var(--mute); } .term3 .ium { padding: 5px 8px; border-radius: 8px 8px 2px 8px; background: var(--raised); color: var(--text); justify-self: end; } .term3 .iut { padding: 5px 8px; border-radius: 8px 8px 8px 2px; border: 1px solid var(--line); }
.term3 .iafter { margin: 16px 0 10px; } .term3 .iafter p { margin: 0; color: var(--text2); font-size: var(--fs-2); } .term3 .itr { width: 100%; border-collapse: collapse; font-size: var(--fs-2); margin: 0 0 10px; } .term3 .itr th, .term3 .itr td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .term3 .itr th { color: var(--mute); font-weight: 500; }
.term3 .isoon .inote { padding: 8px 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--raised); color: var(--text); } .term3 .iplan { margin: 0 0 12px; padding-left: 20px; color: var(--text2); } .term3 .iplan li { margin: 0 0 4px; }
.term3 .isoon { padding: 4px 0 8px; } .term3 .isoon .h4 { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; } .term3 .isoon p { margin: 0 0 8px; color: var(--text2); max-width: 64ch; }
@media (max-width: 900px) { .term3 .isteps li { grid-template-columns: 28px minmax(0, 1fr); } .term3 .isteps .iui { grid-column: 2; } .term3 .igbtn { min-height: 44px; } }
/* Learn guides: real page text, compact typography; gated pages fade and blur after the first part (Koley's instruction of 9 Oct 2026; the fade is a mask, the one gradient allowed here) */
.term3 .lcard { padding: 18px 22px 22px; } .term3 .lrn { position: relative; font-size: var(--fs-3); line-height: 1.5; color: var(--text); }
.term3 .lrn h2, .term3 .lrn h3 { margin: 22px 0 8px; font: 600 17px/1.3 var(--font); } .term3 .lrn h2 em { font-style: normal; color: var(--mute); margin-right: 8px; } .term3 .lrn h4 { margin: 14px 0 6px; font: 600 var(--fs-3)/1.3 var(--font); }
.term3 .lrn p { margin: 0 0 10px; } .term3 .lrn .lede, .term3 .lrn .blede { font-size: var(--fs-4); color: var(--text2); } .term3 .lrn ul, .term3 .lrn ol { margin: 0 0 12px; padding-left: 20px; } .term3 .lrn li { margin: 0 0 6px; }
.term3 .lrn table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: var(--fs-2); } .term3 .lrn th, .term3 .lrn td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); } .term3 .lrn th { color: var(--mute); font-weight: 500; }
.term3 .lrn .steps, .term3 .lrn .grid3, .term3 .lrn .path { display: grid; gap: 10px; margin: 0 0 16px; } .term3 .lrn .steps { grid-template-columns: repeat(4, 1fr); } .term3 .lrn .grid3 { grid-template-columns: repeat(3, 1fr); } .term3 .lrn .path { grid-template-columns: repeat(7, 1fr); }
.term3 .lrn .steps > div, .term3 .lrn .grid3 > div, .term3 .lrn .path > span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); font-size: var(--fs-2); } .term3 .lrn .steps b, .term3 .lrn .grid3 b, .term3 .lrn .path b { display: block; margin-bottom: 4px; } .term3 .lrn .steps p { margin: 0; color: var(--text2); }
.term3 .lrn .lockbar, .term3 .lrn .bq { padding: 8px 12px; border-left: 2px solid var(--line2); background: var(--raised); margin: 0 0 12px; font-size: var(--fs-2); } .term3 .lrn code { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; background: var(--raised); padding: 1px 4px; border-radius: 4px; } .term3 .lrn .lnk { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 2px; }
.term3 .lrn.gated { max-height: 880px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 52%, rgba(0,0,0,.35) 80%, transparent 98%); mask-image: linear-gradient(#000 52%, rgba(0,0,0,.35) 80%, transparent 98%); }
.term3 .lrn.gated::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.term3 .lcta { margin: -40px 0 0; position: relative; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; justify-items: start; } .term3 .lcta b { font-size: var(--fs-4); } .term3 .lcta p { margin: 0; color: var(--text2); max-width: 60ch; } .term3 .lcta .btn { margin-top: 4px; }
@media (max-width: 900px) { .term3 .lrn .steps, .term3 .lrn .grid3 { grid-template-columns: 1fr 1fr; } .term3 .lrn .path { grid-template-columns: repeat(4, 1fr); } .term3 .lrn.gated { max-height: 760px; } }
/* the wordmark is never a link colour: black text, gold underscore, in every state (Koley, 9 Oct) */
.term3 .brand, .term3 .brand:link, .term3 .brand:visited, .term3 .brand:hover, .term3 .brand:focus, .term3 .brand:active { color: var(--text); text-decoration: none; } .term3 .brand .wm span { color: var(--accent); } .term3 .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* toolbar and filter rows (search family) */
.term3 .tbtns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px dashed var(--line2); margin-bottom: 10px; } .term3 .tbtns .btn { height: 32px; } .term3 .tbtns .sp { flex: 1; }
.term3 .frows { display: grid; gap: 8px; } .term3 .frow2 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; }
.term3 .frow2 .fl { display: flex; align-items: center; gap: 8px; font-weight: 500; } .term3 .frow2 .fl .x { color: var(--mute); font-weight: 400; cursor: default; }
.term3 .frow2 .fv { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .term3 .frow2 .fv .in { flex: 1; min-width: 200px; height: 34px; } .term3 .sel2.narrow { width: auto; min-width: 120px; }
.term3 .frow2 .muted { font-size: var(--fs-3); }
.term3 .tabrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; } .term3 .tabrow .sp { flex: 1; } .term3 .sortl { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font-size: var(--fs-2); } .term3 .sortl .sel2 { height: 32px; }
.term3 .srctabs { display: flex; gap: 2px; flex-wrap: wrap; } .term3 .srctabs button { height: 34px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text2); font: 500 var(--fs-3) var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.term3 .srctabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); } .term3 .srctabs button.soon { color: var(--mute); background: var(--raised); border-radius: 8px 8px 0 0; } .term3 .srctabs button small { color: var(--mute); font-weight: 400; } .term3 .srctabs button em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--bg); background: var(--text); border-radius: 999px; padding: 2px 7px; }
/* tables */
.term3 .tscroll { overflow-x: auto; } .term3 .rt { width: 100%; border-collapse: collapse; }
.term3 .rt th { text-align: left; font: 500 var(--fs-2)/1.2 var(--font); color: var(--text2); padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--raised); white-space: nowrap; }
.term3 .rt td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .term3 .rt tr:last-child td { border-bottom: 0; } .term3 .rt tr.on td { background: var(--accent-soft); } .term3 .rt tr[data-row] { cursor: pointer; }
.term3 .rt td.tt a { font-weight: 500; color: var(--info); } .term3 .rt td small { display: block; color: var(--mute); font-size: 12px; } .term3 .rt td.ag { display: flex; align-items: center; gap: 8px; } .term3 .rt td.ag .seal { width: 22px; height: 22px; }
.term3 .rt .nowrap { white-space: nowrap; } .term3 .rt .mono { font-variant-numeric: tabular-nums; } .term3 .rt .num { text-align: right; font-variant-numeric: tabular-nums; }
.term3 .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); vertical-align: middle; } .term3 .dot.warn { background: var(--warn); }
.term3 .match { height: 26px; padding: 0 8px; font-size: var(--fs-2); white-space: nowrap; }
.term3 .acts { display: inline-flex; gap: 4px; } .term3 .ibtn { width: 28px; height: 28px; border: 1px solid var(--line2); border-radius: 6px; background: var(--card); color: var(--text2); display: inline-grid; place-items: center; cursor: pointer; padding: 0; } .term3 .ibtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .term3 .ibtn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .term3 .ibtn:hover { border-color: var(--text2); }
.term3 .pager2 { padding: 10px 0 0; margin: 0; }
/* strip and columns */
.term3 .strip4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 14px; } .term3 .strip4 > div { padding: 10px 14px 10px 0; border-right: 1px solid var(--line); margin-right: 14px; } .term3 .strip4 > div:last-child { border-right: 0; } .term3 .strip4 b { display: block; font: 600 24px/1.1 var(--font); font-variant-numeric: tabular-nums; } .term3 .strip4 span { color: var(--mute); font-size: var(--fs-2); }
.term3 .cols2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.term3 .lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; } .term3 .lrow:first-of-type { border-top: 0; } .term3 .lrow a { font-weight: 500; } .term3 .lrow small { grid-column: 1; color: var(--mute); font-size: 12px; } .term3 .lrow .match { grid-row: 1 / span 2; grid-column: 1; width: max-content; margin-bottom: 4px; } .term3 .lrow .match ~ a, .term3 .lrow .match ~ small { grid-column: 1; } .term3 .lrow .acts, .term3 .lrow .due { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .term3 .lrow.on { background: var(--accent-soft); margin: 0 -8px; padding: 8px; border-radius: 6px; }
.term3 .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; margin: 4px 0 8px; } .term3 .cal > span { color: var(--mute); font-size: 11.5px; } .term3 .cd { position: relative; height: 32px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text2); font: 400 var(--fs-2) var(--font); } .term3 .cd.e { visibility: hidden; } .term3 .cd.today { border-color: var(--line2); } .term3 .cd.hit { background: var(--accent-soft); color: var(--text); cursor: pointer; font-weight: 500; } .term3 .cd.hit i { position: absolute; right: 3px; top: 1px; font-style: normal; font-size: 10px; color: var(--accent); } .term3 .cd.on { outline: 2px solid var(--accent); }
.term3 .alerts { display: grid; gap: 8px; } .term3 .alerts label { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .term3 .alerts .sel2 { height: 30px; }
/* pipeline */
.term3 .filt { width: 180px; height: 32px; } .term3 .ph2 .seg button { height: 30px; }
.term3 .kan { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; } .term3 .kcol { min-height: 240px; padding: 8px; background: transparent; border: 0; } .term3 .kcol h3 { font: 600 var(--fs-3) var(--font); display: flex; align-items: center; gap: 6px; margin: 0 0 8px; } .term3 .kcol h3 small { margin-left: auto; color: var(--mute); font-weight: 400; }
.term3 .ldot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .term3 .l0 { background: var(--info); } .term3 .l1 { background: var(--viol); } .term3 .l2 { background: var(--text2); } .term3 .l3 { background: var(--warn); } .term3 .l4 { background: var(--info); } .term3 .l5 { background: var(--ok); } .term3 .l6 { background: var(--mute); }
.term3 .kcard { background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 10px; margin: 0 0 8px; } .term3 .kcard b { display: block; font-weight: 500; line-height: 1.3; } .term3 .kcard small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; } .term3 .krow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .term3 .kcard .btn { height: 26px; padding: 0 8px; font-size: 12px; }
.term3 .modal { position: absolute; inset: 0; background: rgba(14,18,24,.35); display: grid; place-items: center; z-index: 5; } .term3 .mbox { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 18px; width: min(520px, 92%); } .term3 .mbox h3 { margin: 0 0 10px; font: 600 var(--fs-4) var(--font); }
/* favorites */
.term3 .fcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; cursor: pointer; } .term3 .fcard.on { border-color: var(--accent); } .term3 .fh { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .term3 .fh a { font: 600 var(--fs-4) var(--font); } .term3 .fm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; color: var(--text2); font-size: var(--fs-2); } .term3 .fm .up { text-transform: uppercase; letter-spacing: .02em; font-size: 12px; }
.term3 .tcard { padding: 10px 0; border-top: 1px solid var(--line); } .term3 .tcard a { font-weight: 500; } .term3 .tcard small { display: block; color: var(--mute); margin: 2px 0 6px; } .term3 .am { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; font-size: var(--fs-2); } .term3 .pill.new { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.term3 .srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .term3 .srow small { display: block; color: var(--mute); }
/* sweep */
.term3 .swc { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin: 0 0 8px; cursor: pointer; } .term3 .swc.on { border-color: var(--accent); } .term3 .swc a { font-weight: 600; } .term3 .swc small { display: block; color: var(--mute); margin: 2px 0 4px; } .term3 .swc p { margin: 0; color: var(--text2); font-size: var(--fs-2); }
/* map */
.term3 .mapwrap { --bg: #0e1218; --panel: #141a22; --raised: #1a222c; --line: #232d3a; --line2: #2e3a4a; --text: #e8ecf1; --text2: #aab4c2; --mute: #7d8998; --card: #1a222c; background: #0e1218; border-radius: 12px; padding: 10px; margin: 0 0 12px; color: var(--text); }
.term3 .mapseg { display: flex; gap: 4px; flex-wrap: wrap; border: 0; margin: 0 0 8px; } .term3 .mapseg button { height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid #2e3a4a; background: #141a22; color: #aab4c2; font: 500 var(--fs-2) var(--font); cursor: pointer; } .term3 .mapseg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.term3 .wmap { background: #0e1218; border-radius: 8px; overflow: hidden; aspect-ratio: 1000 / 520; } .term3 .wmap svg { width: 100%; height: 100%; display: block; }
.term3 .wmap .grat { fill: none; stroke: #232d3a; stroke-width: .5; } .term3 .wmap .land { fill: #1a222c; stroke: #0e1218; stroke-width: .4; } .term3 .wmap .land.has { fill: #1f4a48; } .term3 .wmap .land.usbase { fill: #163534; } .term3 .wmap .st { fill: #163534; stroke: #0e1218; stroke-width: .5; } .term3 .wmap .st.has { fill: #2a6462; }
.term3 .wmap .pin { cursor: pointer; } .term3 .wmap .pin .dot { fill: #0e1218; stroke: #e8b24a; stroke-width: 1.5; } .term3 .wmap .pin .ring { fill: #e8b24a; opacity: .18; } .term3 .wmap .pin .lbl { fill: #fff; font: 600 12px var(--font); pointer-events: none; } .term3 .wmap .pin:hover .dot, .term3 .wmap .pin.on .dot { stroke-width: 2.5; fill: #1a222c; } .term3 .wmap .pin:focus { outline: none; } .term3 .wmap .pin:focus .ring { opacity: .5; }
.term3 .mapcap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px 2px; min-height: 40px; font-size: var(--fs-3); } .term3 .mapcap .muted { color: #7d8998; } .term3 .mapcap .btn { height: 30px; color: var(--text); border-color: #2e3a4a; }
/* company, office */
.term3 .srch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .term3 .srch .in { flex: 1; min-width: 240px; height: 40px; }
.term3 .coh { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .term3 .coh h3 { margin: 0; font: 600 20px/1.2 var(--font); } .term3 .coh small { display: block; color: var(--mute); margin: 2px 0 6px; }
.term3 .ctabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 10px 0 0; scrollbar-width: none; } .term3 .ctabs button { height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--text2); font: 500 var(--fs-3) var(--font); white-space: nowrap; cursor: pointer; } .term3 .ctabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.term3 .cbody { padding-top: 4px; } .term3 .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .term3 .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .term3 .kv h4 { margin: 0 0 4px; font: 600 var(--fs-2) var(--font); color: var(--mute); } .term3 .kv div { padding: 3px 0; }
.term3 .stat > div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .term3 .stat small { display: block; color: var(--mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } .term3 .stat b { font: 600 20px/1.2 var(--font); }
.term3 .bars { display: grid; gap: 8px; margin: 8px 0; } .term3 .bar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px; gap: 10px; align-items: center; } .term3 .bar i { display: block; height: 10px; border-radius: 3px; background: var(--accent); opacity: .7; } .term3 .bar b { text-align: right; font-weight: 500; }
.term3 .ol { margin: 4px 0; padding-left: 20px; } .term3 .ol li { padding: 2px 0; }
.term3 .out { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); font-size: var(--fs-3); line-height: 1.5; }
.term3 .frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; margin: 0 0 12px; } .term3 .frow .fld { margin: 0; } .term3 .fld label { font-size: var(--fs-2); color: var(--text2); } .term3 .in, .term3 .sel2, .term3 .ta { background: var(--input); }
.term3 .seg { border-color: var(--line2); } .term3 .seg button { color: var(--text2); height: 32px; } .term3 .seg button.on, .term3 .seg button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.term3 .chkbox { display: flex; gap: 8px; align-items: flex-start; min-height: 28px; font-size: var(--fs-3); }
.term3 .dlbox { border-left: 3px solid var(--accent); }
/* learn */
.term3 .steps7 { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 0 0 14px; background: var(--panel); } .term3 .steps7 > div { padding: 10px; border-right: 1px solid var(--line); font-weight: 500; font-size: var(--fs-2); } .term3 .steps7 > div:last-child { border-right: 0; } .term3 .steps7 small { display: block; color: var(--accent); font-size: 11px; margin-bottom: 2px; }
.term3 .learn { grid-template-columns: 240px minmax(0, 1fr); } .term3 .toc { border-left: 2px solid var(--line); padding-left: 12px; display: grid; gap: 2px; } .term3 .toc h6 { margin: 0 0 6px; font: 500 11.5px var(--font); color: var(--mute); letter-spacing: .06em; text-transform: uppercase; } .term3 .toc button { text-align: left; background: none; border: 0; padding: 5px 6px; border-radius: 4px; color: var(--info); font: 400 var(--fs-3) var(--font); cursor: pointer; } .term3 .toc button[aria-current="true"] { background: var(--accent-soft); color: var(--text); font-weight: 500; }
.term3 .founder img { border-color: var(--line2); } .term3 .founder p { color: var(--text2); }
.term3 .pnh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .term3 .pnh h3 { margin: 0; font: 600 18px/1.3 var(--font); } .term3 .pmeta { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--text2); font-size: var(--fs-2); margin: 0 0 10px; }
.term3 .tpane .by { margin: 8px 0; } .term3 .tpane .seal { width: 26px; height: 26px; }
.term3 .chipset { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; } .term3 .chip { background: var(--card); }
.term3 .tsel { display: none; padding: 10px 14px 0; background: var(--bg); }
@media (max-width: 1280px) { .term3 .tgrid, .term3 .tgrid.nopane { grid-template-columns: 176px minmax(0, 1fr); grid-template-areas: 'side top' 'side crumb' 'side main' 'side pane'; grid-template-rows: auto auto minmax(0, 1fr) auto; height: auto; max-height: none; } .term3 .tpane { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } .term3 .tpane[hidden] { display: none; } .term3 .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .term3 .learn { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .term3 .tgrid, .term3 .tgrid.nopane { grid-template-columns: 1fr; grid-template-areas: 'top' 'crumb' 'main' 'pane'; grid-template-rows: auto auto auto auto; height: auto; max-height: none; } .term3 .tside { display: none; } .term3 .tbtns { flex-wrap: nowrap; overflow-x: auto; } .term3 .tsel { display: block; } .term3 .ttop, .term3 .tcrumb { grid-column: 1; } .term3 .ttop .search { display: none; }
  .term3 .tmain { padding: 14px 14px 20px; } .term3 .ph2 { flex-direction: column; } .term3 .ph2 h2 { font-size: 22px; } .term3 .cols2 { grid-template-columns: 1fr; } .term3 .strip4 { grid-template-columns: 1fr 1fr; } .term3 .strip4 > div { border-right: 0; } .term3 .frow2 { grid-template-columns: 1fr; } .term3 .grid4, .term3 .grid3 { grid-template-columns: 1fr; } .term3 .steps7 { grid-template-columns: repeat(4, 1fr); } .term3 .steps7 > div:nth-child(n+5) { border-top: 1px solid var(--line); }
  .term3 .kan { grid-template-columns: repeat(7, 78%); } .term3 .bar { grid-template-columns: 1fr; gap: 3px; } .term3 .bar b { text-align: left; } .term3 .mapcap { flex-direction: column; align-items: flex-start; } .term3 .rt td.ag { display: table-cell; } .term3 .rt td.ag .seal { display: none; }
}

/* wider stage for the terminal section and tidier filter rows */
.termwrap { max-width: 1760px; }
.term3 .frow2 .fv .sel2 { height: 34px; }
.term3 .wmap .pin .lbl.sm { font-size: 9px; }

.term3 .rt td.ag { display: table-cell; white-space: nowrap; } .term3 .rt td.ag .seal { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-right: 6px; } .term3 .rt td.ag span { vertical-align: middle; }
.term3 .rt td small.trunc { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term3 .rt td.tt { min-width: 240px; } .term3 .rt td.tt a { display: block; line-height: 1.3; }
.term3 .rt td { padding: 8px 8px; } .term3 .rt th { padding: 8px 8px; }
.term3 .lrow3 { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .term3 .lrow3 .match { grid-row: auto; grid-column: 1; margin: 0; } .term3 .lrow3 > div { grid-column: 2; min-width: 0; } .term3 .lrow3 > div a { font-weight: 500; } .term3 .lrow3 > div small { display: block; color: var(--mute); font-size: 12px; } .term3 .lrow3 .acts { grid-column: 3; grid-row: auto; }
.term3 .pnx { display: inline-flex; gap: 4px; align-items: center; } .term3 .pnx .ibtn[data-panex] { font-size: 16px; line-height: 1; }
.term3 .wmap .st { fill: #143231; } .term3 .wmap .st.has { fill: #245957; } .term3 .wmap .land.usbase { fill: #143231; }

.term3 .winners li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 6px 0; border-top: 1px solid var(--line); } .term3 .winners li small { grid-column: 1; display: block; color: var(--mute); font-size: 12px; } .term3 .winners li .num { grid-row: 1 / span 2; align-self: center; font-weight: 600; }
.term3 .tbtns .btn { white-space: nowrap; }

/* part 3: live-depth views */
.term3 .notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--line2); border-radius: 10px; background: var(--raised); margin: 0 0 12px; } .term3 .notice .btn { height: 32px; }
.term3 .strip4.wide > div small { display: block; color: var(--text2); font-size: var(--fs-2); margin-bottom: 2px; } .term3 .strip4.wide b { font-size: 26px; }
.term3 .kcol h3 em { font-style: normal; color: var(--mute); font-weight: 400; } .term3 .kcol h3 small { margin-left: auto; font-weight: 600; color: var(--text); }
.term3 .kcard .tags .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); font-size: 12px; color: var(--text2); } .term3 .kcard .tags .tag.soon { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); } .term3 .kcard .tags .tag.dark { background: var(--text); color: var(--bg); border-color: var(--text); } .term3 .kcard .star { color: var(--accent); margin-left: auto; }
.term3 .kcard { cursor: pointer; } .term3 .kcard:focus-visible { outline: 2px solid var(--accent); }
.term3 .rank { margin: 0; padding: 0; list-style: none; counter-reset: r; } .term3 .rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); } .term3 .rank li .n::before { counter-increment: r; content: counter(r); color: var(--mute); font-size: 12px; } .term3 .rank li small { display: block; color: var(--mute); font-size: 12px; } .term3 .rank li b { white-space: nowrap; }
.term3 .pro { border: 1px solid var(--line2); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; background: var(--panel); } .term3 .pro b { font-size: var(--fs-4); } .term3 .pro p { margin: 4px 0 10px; color: var(--text2); }
.term3 .frow.two { grid-template-columns: 1fr 1fr; } .term3 .frow.four { grid-template-columns: repeat(4, 1fr); } .term3 .asks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 4px 0 12px; } .term3 .asks .chkbox { font-size: var(--fs-4); }
.term3 .info > div { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--panel); } .term3 .info b { display: block; font-size: var(--fs-4); margin-bottom: 4px; } .term3 .info p { margin: 0 0 6px; color: var(--text2); } .term3 .grid3.info { margin: 12px 0; }
.term3 .srch .fld { flex: 1; margin: 0; } .term3 .srch.center { max-width: 560px; margin: 0 auto 10px; }
.term3 .gp { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px 28px 20px; margin: 0 0 12px; } .term3 .gp h2 { text-align: center; margin: 10px 0 6px; font: 600 26px/1.2 var(--font); } .term3 .gp > p { text-align: center; color: var(--text2); max-width: 60ch; margin: 0 auto 14px; }
.term3 .gpi { display: flex; justify-content: center; gap: 12px; } .term3 .xl, .term3 .wd { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; color: var(--bg); font: 600 20px var(--font); } .term3 .xl { background: #1d6f42; } .term3 .wd { background: #2b579a; } .term3 .di { width: 32px; height: 32px; font-size: 16px; }
.term3 .dels { list-style: none; margin: 16px auto; padding: 0; max-width: 640px; } .term3 .dels li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); } .term3 .dels li small { display: block; color: var(--mute); font-size: 12.5px; }
.term3 .dis { border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; margin: 12px 0; background: var(--panel); } .term3 .dis summary { cursor: pointer; font-weight: 500; color: var(--text2); } .term3 .dis[open] summary { margin-bottom: 10px; }
.term3 .steps > div { border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .term3 .steps b { display: block; margin-bottom: 4px; } .term3 .steps p { margin: 0; color: var(--text2); font-size: var(--fs-2); }
.term3 .chatcard { border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); padding: 0 0 16px; margin: 0 0 8px; max-width: 760px; } .term3 .cbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--raised); border-radius: 12px 12px 0 0; } .term3 .cbar .dots { width: 36px; height: 10px; background: radial-gradient(circle, var(--line2) 4px, transparent 4.5px) 0 0/12px 10px repeat-x; } .term3 .cbar small { color: var(--mute); }
.term3 .bubble { margin: 14px 14px 10px 160px; background: var(--raised); border-radius: 10px; padding: 12px 14px; } .term3 .chatcard > p { margin: 0 14px 8px; } .term3 .chatcard code { display: block; margin: 0 14px 10px; padding: 12px 14px; background: var(--raised); color: var(--text); border-radius: 8px; font: 500 13px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; } .term3 .chatcard .krow { margin: 0 14px; }
.term3 .about { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; } .term3 .about figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .term3 .about img { width: 100%; height: auto; display: block; border-radius: 6px; } .term3 .about figcaption { padding: 10px 0 2px; text-align: center; color: var(--mute); font-size: 12px; letter-spacing: .08em; } .term3 .about p { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: var(--text2); } .term3 .about p b { color: var(--text); }
.term3 .afoot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; background: var(--panel); } .term3 .afoot h6 { margin: 0 0 8px; font: 500 11.5px var(--font); color: var(--mute); text-transform: uppercase; letter-spacing: .08em; } .term3 .afoot .link { display: block; padding: 4px 0; color: var(--text); } .term3 .afoot p { margin: 0; color: var(--text2); } .term3 .afoot .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 800px) { .term3 .frow.two, .term3 .frow.four, .term3 .asks, .term3 .about, .term3 .afoot { grid-template-columns: 1fr; } .term3 .bubble { margin-left: 14px; } .term3 .dels li { grid-template-columns: 32px minmax(0, 1fr); } .term3 .dels li .btn { grid-column: 2; justify-self: start; } }

.term3 .gp > h2 { text-align: center; display: block; width: 100%; }

.term3 .gp > h2, .term3 .h2b, .term3 .ph2 h2 { max-width: none; } .term3 .gp > h2 { margin-inline: auto; }

/* Sales page, part 3: three-tier pricing, the realistic phone with the mail app, the phone-native demo, and the mobile audit fixes. Loads after home2.css and term3.css. */

/* ---------- pricing: three equal cards, centred ---------- */
.plans3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
.plan3 { display: grid; grid-template-rows: auto auto 1fr auto; border: 1px solid var(--line2); border-radius: 12px; padding: 28px; background: var(--panel); min-width: 0; }
.plan3.hi { border-color: var(--text2); box-shadow: 0 0 0 1px var(--text2); }
.plan3 .pt { min-height: 132px; } .plan3 .tag { display: inline-block; font-size: var(--fs-2); color: var(--text2); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; margin: 0 0 10px; }
.plan3 h3 { margin: 0; font: 600 22px/1.2 var(--font); } .plan3 .who { margin: 8px 0 0; color: var(--text2); line-height: 1.45; }
.plan3 .pp { height: 76px; display: flex; flex-direction: column; justify-content: flex-end; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.plan3 .pp b { font: 600 40px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .plan3 .pp small { color: var(--mute); margin-top: 4px; font-size: var(--fs-2); }
.plan3 ul { margin: 16px 0 0; padding: 0 0 0 18px; color: var(--text2); display: grid; gap: 8px; align-content: start; line-height: 1.4; }
.plan3 .pb { margin-top: 24px; } .plan3 .pb .btn { width: 100%; justify-content: center; height: 48px; font-size: 16px; } .plan3 .pb small { display: block; text-align: center; color: var(--mute); font-size: var(--fs-2); margin-top: 8px; }
.pnote { text-align: center; color: var(--mute); font-size: var(--fs-2); margin: 20px auto 0; max-width: 70ch; }
.partner { display: none; }

/* ---------- the phone (bezel, island, status bar, glare, home indicator) ---------- */
.muted2 { color: var(--mute); font-size: var(--fs-2); margin: 0 0 16px; line-height: 1.5; }
.phone2 { width: 340px; margin: 0 auto; padding: 11px; border-radius: 54px; background: #15181d; box-shadow: 0 0 0 1.5px #3b414a, inset 0 0 0 1.5px #0a0c0f, 0 40px 80px rgba(0,0,0,.6), 0 12px 24px rgba(0,0,0,.45); position: relative; }
.phone2::before { content: ""; position: absolute; left: -3px; top: 150px; width: 3px; height: 34px; background: #2a2f36; border-radius: 2px 0 0 2px; box-shadow: 0 54px 0 #2a2f36, 0 110px 0 #2a2f36; } .phone2::after { content: ""; position: absolute; right: -3px; top: 200px; width: 3px; height: 60px; background: #2a2f36; border-radius: 0 2px 2px 0; }
.phone2 .screen { position: relative; height: 700px; border-radius: 44px; overflow: hidden; background: #fff; color: #111; font: 400 14px/1.4 var(--font); display: flex; flex-direction: column; }
/* exception, approved by the Lead's brief for the phone only: a soft glass glare over the screen */
.phone2 .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 28%, rgba(255,255,255,0) 42%); border-radius: inherit; }
.phone2 .island { position: absolute; top: 11px; left: 50%; width: 112px; height: 34px; border-radius: 20px; background: #000; transform: translateX(-50%); z-index: 3; }
.phone2 .sbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px 6px; font: 600 15px/1 var(--font); color: #000; } .phone2 .sico { display: inline-flex; gap: 6px; align-items: center; }
.phone2 .batt { width: 26px; height: 12px; border: 1.5px solid #000; border-radius: 4px; position: relative; display: inline-block; } .phone2 .batt i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 18px; background: #000; border-radius: 2px; } .phone2 .batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 5px; background: #000; border-radius: 0 2px 2px 0; }
.phone2 .mailhd { display: flex; align-items: center; gap: 14px; padding: 8px 16px 10px; font: 500 16px var(--font); color: #0a66c2; border-bottom: 1px solid #ececec; } .phone2 .mailhd .sp { flex: 1; } .phone2 .mailhd .ico { color: #0a66c2; font-size: 18px; }
.phone2 .mailmeta { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; } .phone2 .av { width: 38px; height: 38px; border-radius: 50%; background: #0e1218; color: #e8b24a; display: grid; place-items: center; font: 800 18px var(--font); } .phone2 .mailmeta b { display: block; font-size: 15px; } .phone2 .mailmeta small { color: #5a5a5a; font-size: 12.5px; } .phone2 .when { margin-left: auto; color: #5a5a5a; font-size: 13px; }
.phone2 .subj { padding: 4px 16px 10px; font: 600 17px/1.3 var(--font); border-bottom: 1px solid #ececec; }
.phone2 .mailbody { flex: 1; overflow: hidden; padding: 12px 16px 0; position: relative; } .phone2 .mailbody::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.phone2 .mailbody p { margin: 0 0 12px; color: #333; }
.phone2 .mi { padding: 10px 0; border-top: 1px solid #ececec; } .phone2 .mi .mt { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .phone2 .mi .md { color: #b0382e; font-weight: 600; font-size: 13px; }
.phone2 .mi b { display: block; font-size: 14.5px; line-height: 1.3; } .phone2 .mi small { display: block; color: #666; font-size: 12.5px; margin: 2px 0 4px; } .phone2 .mi p { margin: 0; color: #444; font-size: 13px; }
.phone2 .match { height: 26px; padding: 0 9px; font-size: 12.5px; background: #f4f6f8; border-color: #d3dae3; color: #111; } .phone2 .match span { color: #4a5666; }
.phone2 .mbtn { display: inline-block; background: #0e1218; color: #fff; border-radius: 8px; padding: 10px 16px; font-weight: 600; text-decoration: none; } .phone2 .fine { color: #888; font-size: 11.5px; }
.phone2 .mailtb { display: flex; justify-content: space-around; padding: 10px 10px 26px; border-top: 1px solid #ececec; color: #0a66c2; font-size: 20px; background: #fafafa; }
.phone2 .hind { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; border-radius: 3px; background: #000; transform: translateX(-50%); }
.phone { display: none; }

/* ---------- phone-native demo (under 760 px only) ---------- */
#mdemo { display: none; }
.mbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; } .mbar b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--text); color: var(--bg); margin-left: 6px; font-size: 13px; }
.mstack { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 12px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mcard { flex: 0 0 86%; scroll-snap-align: center; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.mcard .mt { display: flex; justify-content: space-between; align-items: center; } .mcard .md { color: var(--text2); font-weight: 500; }
.mcard h3 { margin: 4px 0 0; font: 600 18px/1.3 var(--font); } .mcard .mag { display: flex; gap: 8px; align-items: center; color: var(--text2); font-size: var(--fs-2); } .mcard .mag .seal { width: 22px; height: 22px; } .mcard small { color: var(--mute); font-size: var(--fs-2); }
.mcard .why { margin: 0; color: var(--text2); line-height: 1.45; } .mcard .btn { height: 44px; justify-content: center; }
.mkf { margin: 4px 0; display: grid; gap: 8px; } .mkf dt { color: var(--mute); font-size: var(--fs-2); } .mkf dd { margin: 0; } .mkf q { display: block; margin: 4px 0 0; padding: 8px 10px; border-left: 2px solid var(--line2); color: var(--text2); font-size: var(--fs-2); quotes: "\201C" "\201D"; } .mkf em { display: block; color: var(--mute); font-size: var(--fs-1); font-style: normal; margin-top: 2px; }
.mcard .mn { position: absolute; top: 14px; right: 14px; color: var(--mute); font-size: var(--fs-1); }
.mcard .mt .md { margin-right: 44px; }
.mcta { margin-top: 12px; display: grid; gap: 8px; } .mcta .btn { height: 48px; justify-content: center; font-size: 16px; } .mcta small { color: var(--mute); text-align: center; }

/* ---------- mobile audit (360 and 390) ---------- */
@media (max-width: 1100px) { .plans3 { grid-template-columns: 1fr; max-width: 560px; } .plan3 .pt { min-height: 0; } .plan3 .pp { height: auto; } }
@media (max-width: 760px) {
  #terminal { display: none; } #mdemo { display: block; }
  .dirA2 .hero { min-height: 0; padding: 96px 0 56px; } .dirA2 .hero h1 { font-size: clamp(40px, 12vw, 56px); } .dirA2 .hero .lead { font-size: 17px; } .dirA2 .hero .cta .row { gap: 10px; } .dirA2 .hero .cta .btn, .dirA2 .hero .cta .btn.primary { height: 48px; width: 100%; justify-content: center; }
  .dirA2 .hero .chips2 { margin-top: 20px; gap: 6px; } .dirA2 .hero .chips2 .chip { height: 28px; font-size: 12.5px; }
  .sec { padding: 48px 0; } .sec h2 { font-size: 28px; } .sec .lede { font-size: 16px; margin-bottom: 20px; }
  .cbox textarea { min-height: 84px; font-size: 16px; } .cbox .chips2 .fchip { height: 40px; }
  .briefsec { grid-template-columns: 1fr; gap: 28px; } .phone2 { width: min(340px, 100%); } .phone2 .screen { height: 640px; }
  .proof { gap: 32px; } .founder { grid-template-columns: 80px 1fr; } .founder img { width: 80px; height: 80px; } .founder p { font-size: 16px; }
  .cov td { font-size: 13px; padding: 8px 0; }
  .plan3 { padding: 22px; } .plan3 .pp b { font-size: 34px; }
  .final { padding: 56px 0; } .final h2 { font-size: 34px; }
  .pfoot { padding-bottom: 96px; } .pfoot .wrap { gap: 8px 18px; }
  .btn, .fchip, .ibtn { min-height: 44px; } .mtoggle { display: none; }
  .stick .btn { height: 48px; }
}
@media (max-width: 380px) { .dirA2 .hero h1 { font-size: 38px; } .mcard { flex-basis: 90%; } .phone2 .screen { height: 600px; } .plan3 { padding: 18px; } }

/* Glossy pricing cards (Koley, 9 Oct 2026: a recorded exception to the no-gradient rule for the three plan cards only). CSS only: frosted surface with a solid fallback, inner top highlight, luminous border, soft depth, faint glow behind Core, a slow specular sweep (off under reduced motion) that also follows the pointer, glossy primary button with a pressed state. Contrast: text stays on the solid panel colour. */
.plan3 { position: relative; background: rgba(17, 22, 30, .78); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -24px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.35); overflow: hidden; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .plan3 { background: rgba(17, 22, 30, .62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } }
.plan3::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 40%, rgba(255,255,255,.08)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan3.hi::before { background: linear-gradient(180deg, rgba(232,178,74,.75), rgba(232,178,74,.18) 45%, rgba(232,178,74,.35)); } .plan3.hi { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(232,178,74,.25), 0 30px 60px -28px rgba(232,178,74,.35), 0 24px 48px -24px rgba(0,0,0,.7); }
.plan3::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px 260px at var(--mx, 50%) var(--my, -20%), rgba(255,255,255,.10), transparent 60%); pointer-events: none; transition: opacity .3s; opacity: .9; }
.plan3 .sheen { contain: paint; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%); transform: translateX(-60%); pointer-events: none; animation: sheen 9s linear infinite; }
@keyframes sheen { to { transform: translateX(60%); } }
.plan3 > * { position: relative; z-index: 1; } .plan3 .sheen, .plan3::before, .plan3::after { z-index: 0; }
.plan3 .pb .btn.primary { background: linear-gradient(180deg, #f0c25f, #d99a2b 55%, #c88b1e); border-color: #b8781a; color: #14100a; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 8px 18px -8px rgba(232,178,74,.7); text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.plan3 .pb .btn.primary:hover { background: linear-gradient(180deg, #f5cb6e, #e0a233 55%, #cf9224); } .plan3 .pb .btn.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 3px 8px -4px rgba(232,178,74,.6); background: linear-gradient(180deg, #d99a2b, #c88b1e); }
.plan3 .pb .btn:not(.primary) { background: rgba(255,255,255,.04); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; } .plan3 .pb .btn:not(.primary):hover { background: rgba(255,255,255,.08); border-color: var(--text2); } .plan3 .pb .btn:active { transform: translateY(1px); }
html[data-theme="light"] .plan3 { background: rgba(255,255,255,.72); border-color: rgba(10,14,20,.08); box-shadow: 0 1px 0 #fff inset, 0 24px 48px -28px rgba(20,24,32,.35), 0 2px 8px rgba(20,24,32,.08); } html[data-theme="light"] .plan3::before { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(10,14,20,.06) 45%, rgba(10,14,20,.1)); } html[data-theme="light"] .plan3.hi::before { background: linear-gradient(180deg, rgba(184,122,18,.7), rgba(184,122,18,.15) 45%, rgba(184,122,18,.3)); } html[data-theme="light"] .plan3 .sheen { background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%); }
@media (prefers-reduced-motion: reduce) { .plan3 .sheen { animation: none; transform: none; opacity: .5; } .plan3::after { transition: none; } }
/* the real mark as avatar (phone) and in the app bar; seat stepper on the Core card */
.phone2 .av.mkav { padding: 0; background: none; border-radius: 9px; width: 38px; height: 38px; display: block; } .phone2 .mailhd .ttl .mkapp { width: 22px; height: 22px; border-radius: 5px; vertical-align: -5px; margin-right: 8px; } .phone2 .mailhd .ttl .us { color: #e8b24a; }
.plan3 .seats { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
/* ---------- interactive phone screens ---------- */
.phone2 .pscr { position: absolute; inset: 0; overflow: hidden; } .phone2 .pv { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.phone2 .pv.in-r { transform: translateX(100%); } .phone2 .pv.in-l { transform: translateX(-30%); } .phone2 .pv.out-l { transform: translateX(-30%); } .phone2 .pv.out-r { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .phone2 .pv { transition: none; } }
.phone2 .hind { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; border-radius: 3px; background: #000; transform: translateX(-50%); border: 0; padding: 0; cursor: pointer; z-index: 4; } .phone2 .hind::before { content: ""; position: absolute; inset: -20px -10px; } /* 45 px tall hit area */ .phone2 .hind:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.phone2 .sbar svg { fill: #000; } .phone2 .sbar.dk { color: #fff; } .phone2 .sbar.dk svg { fill: #fff; } .phone2 .sbar.dk .batt { border-color: #fff; } .phone2 .sbar.dk .batt i, .phone2 .sbar.dk .batt::after { background: #fff; }
.phone2 .plock { flex: 1; background: #0e1218; color: #fff; display: flex; flex-direction: column; position: relative; }
.phone2 .plock::before { content: ""; position: absolute; inset: 0; background: url(media/hero-montage-poster-640.webp) center/cover; opacity: .55; } .phone2 .plock > * { position: relative; }
.phone2 .ltime { text-align: center; margin: 36px 0 28px; } .phone2 .ltime small { display: block; font: 500 17px var(--font); color: #e8ecf1; margin-bottom: 2px; } .phone2 .ltime b { font: 300 76px/1 var(--font); letter-spacing: -.02em; }
.phone2 .notif, .phone2 .irow { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; text-align: left; width: calc(100% - 24px); margin: 0 12px; padding: 12px; border: 0; border-radius: 18px; background: rgba(255,255,255,.92); color: #111; font: inherit; cursor: pointer; }
.phone2 .notif .nh, .phone2 .irow .nh { display: flex; justify-content: space-between; align-items: baseline; } .phone2 .notif small, .phone2 .irow small { color: #5a5a5a; font-size: 12.5px; } .phone2 .ns { display: block; font-weight: 600; margin: 2px 0; } .phone2 .notif span:last-child, .phone2 .irow span:last-child { color: #444; font-size: 13px; line-height: 1.35; }
.phone2 .lhint { margin: auto 0 44px; text-align: center; color: #aab4c2; font-size: 13px; } .phone2 .hind2 { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; border-radius: 3px; background: #fff; transform: translateX(-50%); border: 0; padding: 0; z-index: 2; pointer-events: none; } /* pointer taps land on .hind above it, which unlocks; Enter on this button still works */
.phone2 .mailhd .ttl { font: 700 22px var(--font); color: #111; } .phone2 .mailhd .back { background: none; border: 0; padding: 0; color: #0a66c2; font: 500 16px var(--font); cursor: pointer; } .phone2 .mailhd.app { background: #0e1218; color: #fff; border-bottom: 0; padding: 10px 16px 12px; } .phone2 .mailhd.app .ttl { color: #fff; font-size: 17px; } .phone2 .mailhd.app .back { color: #e8b24a; } .phone2 .pc { min-width: 22px; height: 22px; border-radius: 999px; background: #e8b24a; color: #14100a; font: 700 12px/22px var(--font); text-align: center; padding: 0 6px; }
.phone2 .ilist { flex: 1; overflow: hidden; } .phone2 .irow { width: 100%; margin: 0; border-radius: 0; border-bottom: 1px solid #ececec; background: #fff; } .phone2 .irow.unread .ns::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0a66c2; margin-right: 6px; } .phone2 .av.g { background: #d3dae3; color: #4a5666; }
.phone2 .mi { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid #ececec; padding: 10px 0; font: inherit; color: #111; cursor: pointer; } .phone2 .mi em { display: block; color: #0a66c2; font-style: normal; font-weight: 600; font-size: 13px; margin-top: 4px; } .phone2 .mi:focus-visible { outline: 2px solid #0a66c2; outline-offset: -2px; border-radius: 6px; }
.phone2 .mbtn { border: 0; font: 600 14px var(--font); cursor: pointer; }
.phone2 .nbody { flex: 1; overflow: auto; padding: 12px 16px 72px; scrollbar-width: none; } .phone2 .nby { display: flex; align-items: center; gap: 8px; color: #4a5666; font-size: 12.5px; } .phone2 .nby .seal { width: 26px; height: 26px; } .phone2 .nbody h3 { margin: 8px 0 6px; font: 600 18px/1.25 var(--font); }
.phone2 .nmeta { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; color: #4a5666; font-size: 12.5px; } .phone2 .muted3 { color: #666; font-size: 12px; margin: 6px 0 10px; line-height: 1.4; } .phone2 .muted3 .smp { height: 18px; font-size: 11px; color: #4a5666; }
.phone2 .ntabs { display: flex; border-bottom: 1px solid #ececec; margin: 0 0 10px; } .phone2 .ntabs button { flex: 1; height: 36px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 500 13px var(--font); color: #4a5666; cursor: pointer; } .phone2 .ntabs button[aria-selected="true"] { color: #111; border-bottom-color: #111; }
.phone2 .nfacts { margin: 0; display: grid; gap: 8px; } .phone2 .nf dt { color: #5a5a5a; font-size: 12px; } .phone2 .nf dd { margin: 0; font-size: 14px; } .phone2 .ev2 { background: none; border: 0; padding: 0; font: inherit; color: #111; text-align: left; text-decoration: underline dotted #999; text-underline-offset: 3px; cursor: pointer; } .phone2 .nf q { display: block; margin: 6px 0 0; padding: 8px 10px; border-left: 2px solid #d3dae3; background: #f4f6f8; color: #333; font-size: 12.5px; quotes: "\201C" "\201D"; } .phone2 .nf em { display: block; color: #888; font-style: normal; font-size: 11px; margin-top: 2px; }
.phone2 .nchecks { display: grid; gap: 0; } .phone2 .nc { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #ececec; font-size: 13px; } .phone2 .nc .st { font-size: 12px; color: #666; }
.phone2 .dzip2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: #333; } .phone2 .dzip2 .btn { height: 32px; padding: 0 10px; font-size: 12.5px; color: #111; border-color: #d3dae3; } .phone2 .nd { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #ececec; font-size: 12.5px; overflow-wrap: anywhere; } .phone2 .nd .ftag { height: 20px; min-width: 40px; font-size: 11px; color: #333; border-color: #d3dae3; }
.phone2 .btn.wide { width: 100%; justify-content: center; margin-top: 12px; height: 44px; color: #111; border-color: #d3dae3; } .phone2 .btn.wide.primary { background: #e8b24a; border-color: #e8b24a; color: #14100a; }
.phone2 .mailbody { overflow: auto; scrollbar-width: none; } .phone2 .mailbody::after { display: none; }

.pdet > summary { display: none; } .plan3 .pdet { margin: 0; }
@media (max-width: 760px) {
  .pdet > summary { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text2); font-weight: 500; cursor: pointer; list-style: none; min-height: 44px; } .pdet > summary::after { content: "+"; font-size: 20px; color: var(--mute); } .pdet[open] > summary::after { content: "3"; } .pdet > summary::-webkit-details-marker { display: none; }
  .plan3 .pdet ul { margin-top: 8px; }
  .sec { padding: 40px 0; } .dirA2 .hero { padding: 88px 0 44px; } .dirA2 .hero .lead { margin-top: 20px; } .dirA2 .hero .cta { margin-top: 28px; }
  .phone2 .screen { height: 600px; } #brief .lede { margin-bottom: 14px; }
  .why { gap: 28px; } .plan3 .pb { margin-top: 16px; } .plan3 .who { font-size: var(--fs-3); }
  .final { padding: 48px 0 40px; } .final h2 { font-size: 30px; margin-bottom: 20px; }
}

/* 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); }

/* Vehicle chip (vehicle.js): three states, placed beside the set-aside tag. design.css tokens; works on the dark page and the light terminal. */
.vchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid; font: 500 11.5px/1 var(--font); white-space: nowrap; vertical-align: middle; }
.vchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.vchip.held { color: var(--ok); border-color: var(--ok); background: rgba(28,125,86,.08); }
.vchip.need { color: var(--warn); border-color: var(--warn); background: rgba(150,98,15,.08); }
.vchip.text { color: var(--mute); border-style: dashed; border-color: var(--line2); background: transparent; } .vchip.text::before { background: transparent; border: 1px solid currentColor; width: 5px; height: 5px; }
.vchip small { font-weight: 400; color: inherit; opacity: .85; }
.vseg .vlbl { padding: 0 8px; color: var(--mute); font-size: var(--fs-1); align-self: center; }
.rt td .vchip, .kcard .vchip, .mcard .vchip, .phone2 .vchip, .swc .vchip, .shrow .vchip, .lrow .vchip { height: 20px; font-size: 11px; }
@media (max-width: 760px) { .vchip { white-space: normal; height: auto; min-height: 22px; padding: 2px 8px; } }

/* 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; }
}


/* home-v2 build additions (skip link, lazy map placeholder) */
.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}
body.pub{--ribh:34px}@media (max-width:700px){body.pub{--ribh:54px}}
body.pub .ptop{top:var(--ribh)}
.pendnote{max-width:760px;margin:0 auto 18px;padding:10px 14px;border:1px dashed #e8b84a;border-radius:8px;color:#e8b84a;text-align:center;font-size:14px}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--gold,#e8b84a);color:#111;padding:10px 14px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:8px;outline:2px solid #fff;outline-offset:2px}
main#main{display:block}


@media (max-width:800px){.dirA2 .hero.compact .hin{padding-left:16px;padding-right:16px}}   /* the hero's heading, paragraph and button had no side gutter on phones */
.tmapload{padding:24px;color:var(--mut,#9aa3b2)}


/* ---------- 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); }