/* Logentic playground — scoped under .pg so it can live on the homepage, in the
   brochure and in the demo workspace without touching their styles. */
.pg{--pg-navy:#1F2F3A;--pg-steel:#5F88A8;--pg-sky:#E6F2F7;--pg-copper:#B07A44;--pg-copper-l:#F4E6D6;--pg-beige:#E7DED2;--pg-paper:#FFFDF9;--pg-line:#E2D8CC;--pg-line2:#D4C8BA;--pg-muted:#6B7784;--pg-text2:#5F6B76;--pg-green:#237a4b;--pg-green-l:#eaf5ed;
  --pg-h:560px;font-family:'DM Sans',system-ui,sans-serif;color:var(--pg-navy);text-align:left}
.pg *{box-sizing:border-box}
.pg-mono{font-family:'DM Mono',monospace}
.pg-deck{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-bottom:16px}
.pg-card{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--pg-line);background:var(--pg-paper);border-radius:14px;overflow:hidden;cursor:pointer;font:inherit;color:inherit;box-shadow:0 1px 0 rgba(31,47,58,.04),0 8px 22px rgba(31,47,58,.06);transition:transform .18s,box-shadow .18s,border-color .18s}
.pg-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(31,47,58,.13)}
.pg-card:focus-visible{outline:3px solid #7ba7c0;outline-offset:2px}
.pg-card.on{border-color:var(--pg-navy);box-shadow:0 0 0 2px var(--pg-navy),0 16px 34px rgba(31,47,58,.13)}
.pg-ill{display:flex;align-items:center;justify-content:center;height:74px;padding:27px 10px 5px;overflow:hidden;background:radial-gradient(18px 3.5px at 86% 20%,rgba(255,255,255,.75) 96%,transparent),linear-gradient(180deg,#cfdbe3,#f3e3cc)}
.pg-ill .pg-fig{display:block;width:100%;height:100%;overflow:visible}
.pg-tag{position:absolute;top:8px;left:8px;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,253,249,.92);border-radius:999px;padding:2px 7px}
.pg-tx{display:block;padding:9px 11px 11px}
.pg-tx b{display:block;font-family:'Space Grotesk',sans-serif;font-size:13.5px;letter-spacing:-.02em;line-height:1.2}
.pg-tx span{display:block;font-size:11.5px;color:var(--pg-text2);margin-top:3px;line-height:1.35}
.pg:not(.pg-started) .pg-card:first-child{animation:pg-hint 2.4s ease-in-out 1.2s 2}
@keyframes pg-hint{40%{transform:translateY(-4px);box-shadow:0 0 0 2px var(--pg-copper),0 16px 34px rgba(31,47,58,.13)}}

.pg:not(.pg-started) .pg-stage{--pg-h:170px}
.pg:not(.pg-started) .pg-steps{display:none}
.pg-stage{transition:height .45s ease;display:grid;grid-template-columns:minmax(0,1fr) 330px minmax(0,1.1fr);gap:14px;height:var(--pg-h)}
.pg-pane{background:var(--pg-paper);border:1px solid var(--pg-line);border-radius:16px;box-shadow:0 1px 0 rgba(31,47,58,.04),0 10px 30px rgba(31,47,58,.07);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pg-h{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--pg-line);font-size:13px;font-weight:600;min-height:44px}
.pg-h svg{width:17px;height:17px;fill:none;stroke:var(--pg-steel);stroke-width:1.8;flex:none}
.pg-h svg.pg-ol{stroke:#0a64ad}
.pg-h .pg-mono{margin-left:auto;font-size:11px;color:var(--pg-muted);font-weight:400;white-space:nowrap}
.pg-target{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-mail{padding:14px 16px;overflow:auto;font-size:13px;line-height:1.55;flex:1}
.pg-empty{color:var(--pg-muted);margin:24px 0;text-align:center}
.pg-from{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pg-from b{font-size:13px;display:block}.pg-from small{font-size:11.5px;color:var(--pg-muted)}
.pg-av{width:32px;height:32px;border-radius:50%;background:var(--pg-sky);color:var(--pg-steel);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.pg-subj{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin:2px 0 8px;line-height:1.3}
.pg-att{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.pg-att span{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--pg-line);border-radius:7px;padding:4px 8px;font-size:11.5px;background:#fff}
.pg-att em{font-style:normal;font-family:'DM Mono',monospace;font-size:9px;background:#c0392b;color:#fff;border-radius:3px;padding:1px 4px}
.pg-mail pre{font-family:inherit;white-space:pre-wrap;margin:0;color:#34434e}
.pg mark{background:transparent;color:inherit;border-radius:3px;transition:background .25s,box-shadow .25s}
.pg.pg-done mark{background:rgba(244,230,214,.55)}
.pg mark.lit{background:#fbd9ad!important;box-shadow:0 0 0 2px #fbd9ad}
.pg-next{padding:0 14px}
.pg-next:not(:empty){padding:12px 14px;border-top:1px solid var(--pg-line)}
.pg-btn{width:100%;border:0;background:var(--pg-navy);color:#fff;border-radius:10px;padding:11px 14px;font:600 13.5px 'DM Sans',sans-serif;cursor:pointer;animation:pg-pulse 1.8s ease-in-out infinite}
.pg-btn:hover{background:#314a56}
@keyframes pg-pulse{50%{box-shadow:0 0 0 5px rgba(176,122,68,.25)}}

.pg-alex{background:var(--pg-navy);border:0;color:#fff;padding:14px}
.pg-alex-h{display:flex;gap:11px;align-items:center}
.pg-alex-h img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #adc7d1}
.pg-alex-h b{font-family:'Space Grotesk',sans-serif;font-size:16px}
.pg-alex-h small{display:block;font-size:12px;color:#aebfcc}
.pg-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px;overflow:auto}
.pg-steps li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px;align-items:start;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.05);opacity:.38;transition:opacity .3s,background .3s}
.pg-steps li.on{opacity:1;background:rgba(255,255,255,.11)}
.pg-steps li.done{opacity:1}
.pg-steps li i{width:18px;height:18px;border-radius:50%;border:2px solid #7d93a3;display:grid;place-items:center;margin-top:1px}
.pg-steps li.done i{background:#2f8f5b;border-color:#2f8f5b}
.pg-steps li.done i:after{content:"";width:7px;height:3.5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.pg-steps li.warn i{background:var(--pg-copper);border-color:var(--pg-copper)}
.pg-steps li.warn i:after{content:"!";width:auto;height:auto;border:0;transform:none;font:700 11px 'DM Sans';color:#fff}
.pg-steps li.on i{border-color:#e0b27d;animation:pg-ping 1s infinite}
@keyframes pg-ping{50%{box-shadow:0 0 0 5px rgba(224,178,125,.25)}}
.pg-steps b{font-size:13px;font-weight:600;display:block}
.pg-steps small{font-size:11.5px;color:#aebfcc;display:block;margin-top:2px;line-height:1.4;overflow-wrap:anywhere}
.pg-t{font-family:'DM Mono',monospace;font-size:10.5px;color:#9fd3b3;white-space:nowrap}
.pg-real{margin:auto 0 0;padding-top:10px;font-family:'DM Mono',monospace;font-size:11px;color:#9fd3b3}

.pg-fields{padding:14px;overflow-y:auto;overflow-x:hidden;display:grid;gap:12px;align-content:start;flex:1}
.pg-grp h4{margin:0 0 7px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pg-muted);font-weight:500}
.pg-fg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
.pg-f{border:1px solid var(--pg-line);border-radius:9px;padding:6px 9px;background:#fff;min-height:44px;transition:background .5s,border-color .3s}
.pg-f label{display:block;font-size:10px;color:var(--pg-muted);font-family:'DM Mono',monospace;letter-spacing:.03em}
.pg-f div{font-size:13px;font-weight:500;min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-f.wide{grid-column:1/-1}
.pg-f.new{background:#fff5e6;border-color:#e8c9a0}
.pg-f.miss{border-style:dashed}
.pg-f.miss div{color:#8a5a2b;font-weight:400;font-style:italic;font-size:12px}
.pg.pg-done .pg-f:not(.miss){cursor:help}
.pg-f.hover{border-color:var(--pg-copper);box-shadow:0 0 0 2px rgba(176,122,68,.18)}
.pg-extra{display:grid;gap:10px;padding-bottom:4px;border-bottom:1px dashed var(--pg-line2)}
.pg-hint{margin:0;font-size:12px;color:var(--pg-muted)}
.pg-eyebrow{margin:0 0 8px;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-copper)}
.pg-ok{border-radius:10px;background:var(--pg-green-l);color:var(--pg-green);padding:10px 12px;font-size:13px;font-weight:600}
.pg-warn{border-radius:10px;background:var(--pg-copper-l);border:1px solid #ead3b8;color:#6a4b2c;padding:10px 12px;font-size:13px;line-height:1.5}
.pg-warn b{color:var(--pg-navy)}
.pg-miles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.pg-mile{border:1px solid var(--pg-line);border-radius:9px;padding:6px 7px;font-size:11px;display:flex;gap:6px;align-items:flex-start;background:#fff;line-height:1.25}
.pg-mile i{width:12px;height:12px;border-radius:50%;border:2px solid var(--pg-line2);flex:none;margin-top:1px}
.pg-mile small{display:block;font-size:10px;opacity:.8}
.pg-mile.done{background:var(--pg-green-l);border-color:#bfe0cb;color:var(--pg-green)}
.pg-mile.done i{background:var(--pg-green);border-color:var(--pg-green)}
.pg-mile.next{border-color:#e7c79f;color:#8a5a2b}
.pg-mile.next i{border-color:var(--pg-copper);border-style:dashed}
.pg-draft-b{background:#fff;border:1px dashed var(--pg-line2);border-radius:10px;padding:12px;font-size:12.5px;line-height:1.55;color:#34434e}
.pg-draft-to{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--pg-muted);margin-bottom:8px;overflow-wrap:anywhere}
.pg-cars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg-car{border:1px solid var(--pg-line);border-radius:11px;padding:10px;background:#fff;font:12px 'DM Sans',sans-serif;color:var(--pg-navy);text-align:left;cursor:pointer;display:grid;gap:2px}
.pg-car b{font-family:'Space Grotesk',sans-serif;font-size:14px}
.pg-car span{font-family:'DM Mono',monospace;font-size:13px;margin-top:4px}
.pg-car em{font-style:normal;font-size:10.5px;color:var(--pg-green);font-weight:600}
.pg-car.on{border-color:var(--pg-green);box-shadow:0 0 0 3px var(--pg-green-l)}
.pg-q{width:100%;border-collapse:collapse;font-size:12.5px}
.pg-q td{padding:7px 0;border-bottom:1px solid #efe6da}
.pg-q td:last-child{text-align:right;font-family:'DM Mono',monospace;white-space:nowrap}
.pg-q tr.tot td{border:0;font-weight:700;font-size:14px;padding-top:10px}
.pg-note{margin:10px 0 0;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--pg-muted);text-align:center}

@media (max-width:1180px){.pg-deck{grid-template-columns:repeat(4,minmax(0,1fr))}.pg-stage{grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr)}}
@media (max-width:900px){.pg-stage{grid-template-columns:1fr;height:auto}.pg-mail{max-height:280px}.pg-fields{max-height:none}.pg-alex{max-height:none}.pg-steps{max-height:none}}
@media (max-width:640px){.pg-deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pg-ill{height:64px;padding-top:25px}.pg-fg{grid-template-columns:minmax(0,1fr)}.pg-miles{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-cars{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pg *{transition:none!important;animation:none!important}}

/* Compact variant for the 1280×720 brochure slide: one row of small choices. */
.pg-slide-host{position:relative;flex:1;min-height:0}
.pg.pg-compact{--pg-h:468px;font-size:14px}
.pg.pg-compact .pg-deck{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:10px}
.pg.pg-compact .pg-card{flex-direction:row;align-items:center;min-height:54px;border-radius:12px}
.pg.pg-compact .pg-ill{width:46px;height:auto;align-self:stretch;flex:none;padding:4px 3px;background:linear-gradient(180deg,#cfdbe3,#f3e3cc)}
.pg.pg-compact .pg-tag,.pg.pg-compact .pg-tx span{display:none}
.pg.pg-compact .pg-tx{padding:6px 8px}
.pg.pg-compact .pg-tx b{font-size:11.5px;overflow-wrap:anywhere;hyphens:auto}
.pg.pg-compact .pg-stage{grid-template-columns:minmax(0,1fr) 290px minmax(0,1.15fr);gap:12px}
.pg.pg-compact:not(.pg-started) .pg-stage{--pg-h:468px}
.pg.pg-compact:not(.pg-started) .pg-steps{display:grid}
.pg.pg-compact .pg-note{margin-top:6px;font-size:9.5px}
.pg.pg-compact .pg-card:hover{transform:translateY(-2px)}
/* On a phone the brochure slide is full width: two columns of chips, panels stacked. */
@media (max-width:700px){.pg.pg-compact .pg-deck{grid-template-columns:repeat(2,minmax(0,1fr))}.pg.pg-compact .pg-stage,.pg.pg-compact:not(.pg-started) .pg-stage{grid-template-columns:1fr;height:auto}}
.pg-idle{margin:18px 2px 0;font-size:13px;line-height:1.5;color:#aebfcc}
.pg.pg-started .pg-idle{display:none}
.pg:not(.pg-started) .pg-card:first-child{border-color:var(--pg-copper)}