/* A product's landing page in the pcdev world (Persuade). Loaded after pcd-world.css.
   Everything is scoped under .lp because CashFlow's landing shares one document with its
   dashboard, and the dashboard has its own .hero, .row and .stats.
   The hero is the product's live map: every server running the bot is a dot, wired into
   the bot, wired down to the hardware it runs on (pcd-product.js draws it). */

.lp .hero{position:relative;padding:clamp(40px,7vh,84px) 0 0}
.lp .hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.lp .claim{font-size:clamp(2.75rem,5.6vw,5rem);line-height:.94;letter-spacing:-.045em;font-weight:700;text-wrap:balance;color:var(--ink)}
.lp .claim span{display:block}
.lp .claim .dim{color:var(--ink-3)}
.lp .pitch{margin-top:26px;max-width:46ch;font-size:clamp(1rem,1.25vw,1.125rem);color:var(--ink-2);line-height:1.6}
.lp .pitch strong{color:var(--ink);font-weight:600}
.lp .doors{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.lp .quiet{display:inline-block;margin-top:18px;color:var(--ink-2);font-size:0.90625rem}
.lp a.quiet:hover{color:var(--ink)}

/* the map: a measured instrument, not an illustration */
.lp .map{position:relative;aspect-ratio:7/6;width:100%;border:1px solid var(--rule);margin:0;background:
  linear-gradient(var(--rule-3) 1px,transparent 1px) 0 0/calc(100%/14) calc(100%/12),
  linear-gradient(90deg,var(--rule-3) 1px,transparent 1px) 0 0/calc(100%/14) calc(100%/12)}
.lp .map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lp .map .rd{position:absolute;font:500 0.75rem/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase;pointer-events:none;font-variant-numeric:tabular-nums}
.lp .map .rd b{color:var(--ink);font-weight:500}
.lp .rd.tl{top:10px;left:12px}.lp .rd.tr{top:10px;right:12px;text-align:right}
.lp .rd.bl{bottom:10px;left:12px}.lp .rd.br{bottom:10px;right:12px;text-align:right}
.lp .map-focus{position:absolute;left:12px;right:12px;top:30px;font:500 0.75rem/1.3 var(--mono);color:var(--ink);letter-spacing:.04em;
  min-height:1.3em;opacity:0;transition:opacity .25s var(--w-ease);pointer-events:none}
.lp .map.is-focus .map-focus{opacity:1}
.lp .beam{fill:none;stroke:rgba(237,237,239,.13);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s var(--w-ease),opacity .3s var(--w-ease)}
.lp .trunk{fill:none;stroke:rgba(237,237,239,.32);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s var(--w-ease),opacity .3s var(--w-ease)}
.lp .trunk.other{stroke:rgba(237,237,239,.16);stroke-dasharray:3 5}
.lp .srv{fill:var(--ink);opacity:.6;transition:opacity .3s var(--w-ease)}
.lp .node rect{fill:var(--bg);stroke:rgba(237,237,239,.55);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s var(--w-ease)}
.lp .node text{fill:var(--ink);font:600 16px var(--sans);letter-spacing:-.015em}
.lp .node text.sub{fill:var(--ink-3);font:500 11px var(--mono);letter-spacing:.04em}
.lp .node{cursor:pointer;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lp .node:focus-visible rect,.lp .node:hover rect,.lp .node:active rect{stroke:var(--ink)}
.lp .hw rect{fill:var(--ink);stroke:none}
.lp .hw text{fill:var(--bg);font:600 13px var(--mono);letter-spacing:.08em}
.lp .other-lbl{fill:var(--ink-3);font:500 11px var(--mono);letter-spacing:.04em}
.lp .pulse{fill:#fff}
.lp .map.is-focus .beam,.lp .map.is-focus .trunk,.lp .map.is-focus .srv{opacity:.14}
.lp .map.is-focus .lit{opacity:1}
.lp .map.is-focus .beam.lit{stroke:rgba(237,237,239,.6)}
.lp .map.is-focus .trunk.lit{stroke:var(--ink)}
.lp .map .drawn{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:lp-draw 1.6s var(--w-ease) forwards;animation-delay:var(--d,0s)}
@keyframes lp-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.lp .map .drawn{animation:none;stroke-dashoffset:0}}

/* readout strip: this bot's share of everyone PCD bots reach, then the figures */
.lp .readout{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;padding:18px 0}
.lp .share-total{font:500 0.75rem/1.4 var(--mono);color:var(--ink-3);margin-bottom:10px;letter-spacing:.02em}
.lp .share-total b{color:var(--ink);font-weight:500}
.lp .share{display:flex;height:10px;gap:2px}
.lp .share i{display:block;height:100%;background:var(--ink);opacity:var(--o,.85);transition:flex-grow .8s var(--w-ease)}
.lp .share-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font:0.75rem/1.4 var(--mono);color:var(--ink-3)}
.lp .share-key span{display:inline-flex;align-items:center;gap:7px}
.lp .share-key span::before{content:"";width:9px;height:9px;background:var(--ink);opacity:var(--o,.85)}
.lp .share-key b{color:var(--ink);font-weight:500}
.lp .figs{display:flex;gap:clamp(18px,3vw,40px)}
.lp .fig{display:grid;gap:2px}
.lp .fig b{font:500 clamp(1.375rem,2.2vw,1.75rem)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.lp .fig span{font:0.75rem/1.3 var(--sans);letter-spacing:.01em;color:var(--ink-3)}

/* ---------------------------------------------------------------- sections */
.lp section{padding:clamp(72px,10vw,128px) 0 0;margin:0}
.lp .sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.lp h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;color:var(--ink);margin:0}
.lp .lede{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.6;max-width:62ch}
.lp code{font:500 .9em var(--mono);color:var(--ink)}

/* features as rows on one rule */
.lp .rows{border-top:1px solid var(--rule)}
.lp .row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(16px,3vw,40px);
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--rule);align-items:start;transition:background-color .3s var(--w-ease)}
.lp .row:hover{background:rgba(255,255,255,.018)}
.lp .row h3{font-size:clamp(1.375rem,2.1vw,1.75rem);letter-spacing:-.02em;line-height:1.1;font-weight:700;color:var(--ink)}
.lp .row h3 small{display:block;margin-top:8px;font:500 0.8125rem/1.3 var(--sans);letter-spacing:.01em;color:var(--ink-3)}
.lp .row p{color:var(--ink-2);max-width:56ch}
.lp .row ul{list-style:none;margin-top:12px;display:grid;gap:6px}
.lp .row li{color:var(--ink-2);font-size:0.90625rem;padding-left:16px;position:relative}
.lp .row li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--ink-3)}

/* what the bot actually posts, as a readout: one line per event, ruled */
.lp .feed{border-top:1px solid var(--rule-2);font:0.8125rem/1.4 var(--mono);font-variant-numeric:tabular-nums}
.lp .feed>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.lp .feed b{color:var(--ink);font-weight:500}
.lp .feed span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp .feed time,.lp .feed em{color:var(--ink-3);font-style:normal}
.lp .feed .sw{width:26px;height:14px;border:1px solid var(--ink-3);border-radius:2px;position:relative;align-self:center}
.lp .feed .sw::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;background:var(--ink-3)}
.lp .feed .sw.on{border-color:var(--ink)}
.lp .feed .sw.on::after{left:auto;right:2px;background:var(--ink)}

/* proof: a real screen beside the words */
.lp .proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.lp .proof figure{border:1px solid var(--rule);background:var(--bg-2);margin:0}
.lp .proof figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--rule);font:0.75rem/1.4 var(--mono);color:var(--ink-3)}
.lp .proof .lede+.lede{margin-top:16px}
.lp .proof h3{font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.15;font-weight:700;margin-top:28px;color:var(--ink)}
.lp .proof h3+p{margin-top:10px;color:var(--ink-2);max-width:52ch}

/* setup and command references: two ruled columns */
.lp .sheet{border-top:1px solid var(--rule)}
.lp .sheet>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,40px);padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.lp .sheet dt,.lp .sheet .k{font:500 0.875rem/1.5 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.lp .sheet .k small{display:block;font:0.8125rem/1.4 var(--sans);letter-spacing:.01em;color:var(--ink-3);margin-top:2px}
.lp .sheet p{color:var(--ink-2);max-width:60ch}
.lp .sheet .cmds{font:0.875rem/1.9 var(--mono);color:var(--ink-2);word-spacing:.35em}
.lp .sheet h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lp .sheet h3 small{font:500 0.8125rem var(--sans);color:var(--ink-3);margin-left:8px;letter-spacing:.01em}

/* the close */
.lp .close{margin-top:clamp(72px,10vw,128px);border-top:1px solid var(--rule);padding:clamp(48px,7vw,88px) 0}
.lp .close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end}
.lp .close h2{font-size:clamp(2.5rem,6vw,5rem);line-height:.96;letter-spacing:-.045em}
.lp .close .lede{margin-top:18px}
.lp .close-side{display:grid;gap:18px}
.lp .close-count{font:500 0.8125rem/1.5 var(--mono);color:var(--ink-3)}
.lp .close-count b{color:var(--ink);font-weight:500}

/* ---------------------------------------------------------------- narrow */
@media (max-width:980px){
  .lp .hero-grid,.lp .sec-head,.lp .proof,.lp .close-grid{grid-template-columns:1fr}
  .lp .row{grid-template-columns:1fr 1fr}
  .lp .row>div:first-of-type{grid-column:auto}
  .lp .row .feed{grid-column:1/-1}
}
@media (max-width:640px){
  .lp .readout{grid-template-columns:1fr}
  .lp .figs{justify-content:space-between}
  .lp .row{grid-template-columns:1fr}
  .lp .sheet>div{grid-template-columns:1fr;gap:6px}
  .lp .rd.tr,.lp .rd.br{display:none}
  .lp .doors .w-btn{flex:1 1 100%}
}

/* a mock of a real post, set as data rather than a screenshot */
.lp .case{padding:clamp(18px,2.4vw,26px);display:grid;gap:16px;font-size:0.90625rem}
.lp .case-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lp .case-head b{font-weight:600;font-size:1rem;letter-spacing:-.01em}
.lp .case-av{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--rule);font:500 0.875rem var(--mono);color:var(--ink-2)}
.lp .case-who{display:grid;gap:2px;color:var(--ink-2)}
.lp .case-who b{color:var(--ink);font-weight:600}
.lp .case-who span{font:0.8125rem/1.5 var(--mono);color:var(--ink-3)}
.lp .case-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule-2)}
.lp .case-grid>div{padding:12px 0;border-bottom:1px solid var(--rule-2)}
.lp .case-grid .wide{grid-column:1/-1}
.lp .case-grid dt{font-size:0.8125rem;letter-spacing:.01em;color:var(--ink-3)}
.lp .case-grid dd{margin-top:2px;color:var(--ink)}