/* Clearline Protocol — local-business section (adds to clp.css) */
.live-flag{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 22px;padding:13px 16px;
  border:1px solid rgba(61,220,151,.38);border-left:3px solid #3ddc97;border-radius:11px;
  background:linear-gradient(120deg,rgba(61,220,151,.09),rgba(3,8,21,.35));max-width:620px}
.live-flag b{color:#3ddc97;font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.live-flag span{color:var(--ice);font-size:13px;line-height:1.55}

.app-card{display:flex;flex-direction:column}
.app-card small{color:var(--gold);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.app-card p{flex:1}
.app-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--sky);font-size:13px;font-weight:750}
.app-more svg{width:15px;height:15px}

.demo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.demo-card{display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);border-radius:14px;background:rgba(3,8,21,.5);
  transition:transform .2s ease,border-color .2s ease}
.demo-card:hover{transform:translateY(-3px);border-color:rgba(77,168,255,.5)}
.demo-card small{color:var(--gold);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.demo-card h3{margin:10px 0 4px;font:400 21px Georgia,serif}
.demo-card p{margin:0 0 16px;color:var(--muted);font-size:12.5px;flex:1}
.demo-card span{display:inline-flex;align-items:center;gap:7px;color:var(--sky);font-size:12.5px;font-weight:750}
.demo-card span svg{width:14px;height:14px}

.demo-links{display:flex;flex-wrap:wrap;gap:12px}
.demo-link{display:inline-flex;align-items:center;gap:12px;padding:16px 20px;border:1px solid rgba(77,168,255,.3);border-radius:12px;
  background:rgba(7,24,47,.6);color:var(--white);font-weight:700;font-size:14px;transition:transform .2s ease,border-color .2s ease}
.demo-link:hover{transform:translateY(-2px);border-color:rgba(77,168,255,.7)}
.demo-link svg{width:16px;height:16px;color:var(--sky)}

@media (max-width:1100px){ .demo-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:980px){ .app-grid{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .demo-grid,.app-grid{grid-template-columns:1fr} .demo-link{width:100%;justify-content:space-between} }

/* --- local: input cards -------------------------------------------------- */
.io{position:relative;padding-top:30px}
.io-n{position:absolute;top:22px;right:24px;color:var(--gold);font-size:11px;font-weight:850;letter-spacing:.14em}
.io h3{margin:0 0 10px;font:400 24px/1.12 Georgia,serif}
.io-list{list-style:none;margin:18px 0 0;padding:0}
.io-list li{position:relative;padding:8px 0 8px 20px;color:var(--ice);font-size:13px;line-height:1.5;
  border-top:1px solid var(--line)}
.io-list li::before{content:"›";position:absolute;left:0;top:7px;color:var(--sky);font-size:15px}

/* --- local: numbered flow ------------------------------------------------ */
.flow{list-style:none;margin:0 0 42px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:f}
.flow li{display:flex;gap:14px;padding:20px;border:1px solid var(--line);border-radius:14px;
  background:rgba(3,8,21,.5)}
.flow .fn{flex:none;color:var(--gold);font-size:11px;font-weight:850;letter-spacing:.1em;padding-top:3px}
.flow b{display:block;margin-bottom:6px;font-weight:750;font-size:15px}
.flow p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

/* --- local: pipeline ----------------------------------------------------- */
.pipe{border:1px solid var(--line);border-radius:18px;padding:26px;
  background:linear-gradient(145deg,rgba(8,28,58,.55),rgba(5,14,30,.7))}
.pipe-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}
.pipe-row.second{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.pipe-box{padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(3,8,21,.55)}
.pipe-box small{display:block;color:var(--sky);font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:8px}
.pipe-box b{display:block;font-size:15px;font-weight:750;margin-bottom:6px}
.pipe-box span{color:var(--muted);font-size:12.5px;line-height:1.5}
.pipe-box.gate{border-color:rgba(255,181,20,.42)}
.pipe-box.gate b{color:var(--gold)}
.pipe-box.spend b,.pipe-box.done b{color:#3ddc97}
.pipe-box.spend{border-color:rgba(61,220,151,.3)}
.pipe-box.done{border-color:rgba(61,220,151,.3)}
.pipe-arrow{align-self:center;color:var(--sky);font-size:20px}

/* --- local: templates ---------------------------------------------------- */
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.tier-grid.four{grid-template-columns:repeat(4,1fr)}
.tpl{padding:22px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(145deg,rgba(8,28,58,.7),rgba(5,14,30,.75))}
.tpl h3{margin:0 0 8px;font:400 21px Georgia,serif}
.tpl p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.tpl-shape{display:grid;place-items:center;margin-bottom:18px;border:1px solid rgba(77,168,255,.34);
  border-radius:8px;background:rgba(3,8,21,.6);color:var(--sky);font-size:11px;font-weight:800;letter-spacing:.1em}
.tpl-shape{height:124px;margin-left:auto;margin-right:auto}
.tpl-shape.wide{width:220px;max-width:100%}
.tpl-shape.tall{width:70px}
.tpl-meta{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--gold);font-size:11.5px;font-weight:750;letter-spacing:.04em}

/* --- local: the two video frames ---------------------------------------- */
.frames{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.frame-wrap{margin:0}
.frame-wrap figcaption{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.6}
.frame{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px;border-radius:14px;background:#000;border:1px solid var(--line);
  overflow:hidden}
.title-frame .ft-addr{font:400 clamp(22px,2.6vw,34px)/1.1 Georgia,serif;color:#fff;letter-spacing:-.02em}
.title-frame .ft-city{margin-top:6px;font-size:clamp(13px,1.3vw,17px);color:rgba(255,255,255,.8)}
.title-frame .ft-facts{margin-top:16px;font-size:clamp(11px,1.05vw,14px);color:#fff;letter-spacing:.08em}
.title-frame .ft-head{margin-top:12px;font-size:clamp(10px,1vw,13px);color:rgba(255,255,255,.7);font-style:italic}
.end-frame .fe-shot{width:clamp(38px,6vw,64px);height:clamp(38px,6vw,64px);border-radius:50%;
  overflow:hidden;background:#243447;color:#8fa6c0;margin-bottom:14px;
  border:2px solid rgba(255,255,255,.22)}
.end-frame .fe-shot svg{width:100%;height:100%;display:block}
.end-frame .fe-name{font-size:clamp(16px,1.7vw,23px);font-weight:600;color:#fff}
.end-frame .fe-lic{margin-top:3px;font-size:clamp(9px,.85vw,12px);color:rgba(255,255,255,.7)}
.end-frame .fe-brok{margin-top:11px;font-size:clamp(13px,1.3vw,18px);color:#fff}
.end-frame .fe-off{margin-top:2px;font-size:clamp(9px,.9vw,13px);color:rgba(255,255,255,.8)}
.end-frame .fe-ph{margin-top:8px;font-size:clamp(10px,.95vw,14px);color:#fff}
.end-frame .fe-fh{margin-top:16px;font-size:clamp(8px,.7vw,10.5px);color:rgba(255,255,255,.6);
  letter-spacing:.1em;text-transform:uppercase}

@media (max-width:1100px){
  .tpl-grid,.tier-grid.four{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .pipe-row{grid-template-columns:1fr}
  .pipe-arrow{transform:rotate(90deg);justify-self:center}
  /* stacked, the row break needs its own arrow or the chain looks broken */
  .pipe-row.second{position:relative;margin-top:34px;padding-top:22px}
  .pipe-row.second::before{content:"↓";position:absolute;top:-4px;left:50%;
    transform:translateX(-50%);color:var(--sky);font-size:20px}
  .frames{grid-template-columns:1fr}
}
@media (max-width:680px){
  .flow,.tpl-grid,.tier-grid.four{grid-template-columns:1fr}
}

/* Tourline: every screen, every choice. Real captures of the demo, so they are
   light-on-dark app shots sitting on the site's dark page - the white frame
   around each is what keeps them from disappearing into it. */
.screens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.screen figure{margin:0;display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:rgba(3,8,21,.5)}
.screen img{display:block;width:100%;height:auto;background:#fff;border-bottom:1px solid var(--line)}
.screen figcaption{padding:16px 18px 18px}
.screen .sn{display:inline-block;color:var(--gold);font-size:10.5px;font-weight:850;letter-spacing:.14em;margin-right:8px}
.screen figcaption b{font:400 19px Georgia,serif;color:var(--white)}
.screen figcaption p{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}
.choices{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.choices li{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ice);padding:5px 9px;border-radius:999px;
  border:1px solid rgba(135,190,255,.3);background:rgba(77,168,255,.08)}
.screens-more{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px}
/* The script capture gets a row of its own. It is the tallest screen in the
   set and the one with the most to read: squeezed into the 1fr column beside
   the editor, the lines were too small to make out, which defeats the point of
   showing the real thing. Not cropped either — the closing line is the half
   that people ask about. */
.screens-script{margin-top:18px}
.screens-script .screen img{max-height:none;width:100%;object-fit:contain}
.screen.wide img{max-height:620px;object-fit:cover;object-position:top}
.screen.phone img{max-height:620px;object-fit:contain;background:#0b1730;padding:12px 0}
.inthebox .card h3{margin-top:0}
.inthebox .io-list b{color:var(--white)}
@media (max-width:900px){ .screens{grid-template-columns:1fr 1fr} .screens-more{grid-template-columns:1fr} }
@media (max-width:560px){ .screens{grid-template-columns:1fr} }

/* ---- /login ------------------------------------------------------------- */
.login-hero{padding-top:54px}
.login-shell{max-width:1000px}
.login-heading{grid-template-columns:1fr 1fr}
.loginbox{margin-top:30px;padding:26px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(10,46,99,.4),rgba(3,8,21,.3))}
.loginbox fieldset{border:0;margin:0;padding:0}
.loginbox legend{padding:0;font-size:11px;font-weight:850;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.pickgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.pickapp{display:flex;flex-direction:column;gap:5px;text-align:left;padding:15px 14px;
  border:1px solid var(--line);border-radius:13px;background:rgba(3,8,21,.5);
  color:var(--ice);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.pickapp:hover{border-color:color-mix(in srgb,var(--tint) 55%,transparent)}
.pickapp[aria-pressed="true"]{border-color:var(--tint);
  background:color-mix(in srgb,var(--tint) 13%,rgba(3,8,21,.6))}
.pickapp-top{display:flex;align-items:center;gap:8px}
.pickapp-dot{width:9px;height:9px;border-radius:50%;background:var(--tint);flex:none}
.pickapp b{font-size:15px;font-weight:750;letter-spacing:-.01em}
.pickapp small{color:var(--muted);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.pickapp-line{color:#b8cee6;font-size:12.5px;line-height:1.45}
.loginrow{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.loginrow label{display:block;font-size:11px;font-weight:850;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.loginrow input{width:100%;max-width:440px;padding:13px 15px;border-radius:11px;
  border:1px solid var(--line);background:rgba(3,8,21,.65);color:var(--white);
  font:500 16px/1.2 Inter,system-ui,sans-serif}
.loginrow input:focus{outline:2px solid var(--sky);outline-offset:1px}
.loginrow .button{margin-top:13px}
.loginhint{color:var(--muted);font-size:12.5px;line-height:1.5;margin:11px 0 0;max-width:520px}
.loginnote{margin-top:18px;padding:15px 17px;border-radius:12px;font-size:14px;line-height:1.55;
  border:1px solid rgba(61,220,151,.38);border-left:3px solid #3ddc97;background:rgba(61,220,151,.07)}
.loginnote.bad{border-color:rgba(255,120,120,.4);border-left-color:#ff7878;
  background:rgba(255,120,120,.07)}
.loginnote b{color:var(--white)}
.loginextras{margin-top:26px}
.loginextras .card h3{margin-top:0}
@media (max-width:900px){
  .login-heading{grid-template-columns:1fr}
  .pickgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .pickgrid{grid-template-columns:1fr}
  .loginbox{padding:18px}
}