/* The persona pages: /for and /for/<slug> (persona-build.mjs).
   Built on the brochure's own tokens and components (--bg, --bg-2, --surface,
   --line, --text, --muted, --violet-*, .btn, .wrap), which every page carries.
   Every rule is scoped to the pe- prefix or .pe. The CTA panel's rules are
   appended at build time from blog-assets/blog.css. */

/* The brochure's --faint is under 4.5:1 on these surfaces (as the blog notes). */
.pe-page{--faint:#8e8d9b}
.pe{padding-bottom:88px}
.pe section{padding:0}
.pe a{color:inherit}
.pe :focus-visible{outline:2px solid var(--violet-hi);outline-offset:2px}
.pe-wrap{padding-top:30px}

/* ── breadcrumbs ── */
.pe-crumbs ol{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14px;color:var(--faint)}
.pe-crumbs li{min-width:0}
.pe-crumbs li:last-child{flex:1 1 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pe-crumbs li+li::before{content:"›";margin:0 9px;color:var(--faint)}
.pe-crumbs a{color:var(--muted);text-decoration:none}
.pe-crumbs a:hover{color:var(--text);text-decoration:underline}
.pe-crumbs [aria-current]{color:var(--text)}

/* ── a persona page: the header, with the video beside the words ── */
.pe-article{max-width:980px}
.pe-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:24px 56px;align-items:start;margin:0 0 56px}
.pe-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:5px 12px;border-radius:999px;background:var(--violet-wash);color:var(--violet-ink);font-size:13.5px;font-weight:600}
.pe-eyebrow .i{width:15px;height:15px}
.pe-head h1{font-size:clamp(36px,4.6vw,58px);line-height:1.03;letter-spacing:-.03em;margin:0 0 18px}
.pe-promise{font:600 clamp(21px,2vw,26px)/1.25 var(--f-display);letter-spacing:-.015em;color:var(--violet-ink);margin:0 0 16px}
.pe-lede{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--muted);margin:0;max-width:60ch}
.pe-jump{display:flex;flex-wrap:wrap;gap:8px 10px;margin:24px 0 0}
.pe-jump a{padding:8px 15px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:14.5px}
.pe-jump a:hover{border-color:var(--violet-hi)}

.pe-video{margin:0;position:sticky;top:calc(84px + env(safe-area-inset-top,0px))}
.pe-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:18px;border:1px solid var(--line);background:#0d0e11;box-shadow:var(--shadow)}
.pe-video figcaption{margin:10px 2px 0;font-size:13px;line-height:1.5;color:var(--faint)}
.pe-video figcaption a{color:var(--muted)}

/* ── sections ── */
.pe-sec{margin:0 0 48px;max-width:720px}
.pe-sec h2{font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin:0 0 16px}
.pe-sec p{font-size:17px;line-height:1.65;color:var(--text);margin:0 0 14px}
.pe-sec p a,.pe-steps a{color:var(--violet-ink);text-underline-offset:3px}
.pe-said{color:var(--muted)!important;font-style:italic}
.pe-note{font-size:14px!important;color:var(--faint)!important}
.pe-steps{list-style:none;counter-reset:pe;margin:22px 0 0;padding:0;display:grid;gap:14px}
.pe-steps li{counter-increment:pe;position:relative;padding:18px 20px 6px 64px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.pe-steps li::before{content:counter(pe);position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--violet-wash);color:var(--violet-ink);font-weight:600;font-size:15px}
.pe-steps h3{font-size:19px;margin:3px 0 8px}
.pe-steps p{font-size:16px;margin:0 0 12px}
.pe-demo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:4px 0 20px!important}
.pe-demo span{color:var(--muted);font-size:15px;flex:1 1 260px}
.pe-transcript p:first-of-type{color:var(--muted)}

.pe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 0;padding:0;list-style:none}
.pe-grid>li{display:flex;min-width:0}
.pe-card{display:flex;flex-direction:column;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);text-decoration:none;transition:border-color .16s,background .16s}
.pe-card:hover{border-color:var(--violet-hi);background:var(--surface)}
.pe-card .tag,.pe-tile .tag{align-self:flex-start;margin:0 0 10px;padding:3px 10px;border-radius:999px;background:var(--violet-wash);color:var(--violet-ink);font-size:12.5px;font-weight:600;line-height:1.4}
.pe-card h3{font-size:17px;line-height:1.25;margin:0 0 6px;color:var(--text)}
.pe-card p{color:var(--muted);line-height:1.5;margin:0;font-size:14.5px}

.pe-more{margin:12px 0 0;padding-top:26px;border-top:1px solid var(--line-soft);max-width:980px}
.pe-more h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.pe-more p,.pe-chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0}
.pe-more a,.pe-chips a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--text)!important;font-size:14.5px}
.pe-more a:hover,.pe-chips a:hover{border-color:var(--violet-hi)}

/* ── the index ── */
.pe-hero{max-width:780px;margin:6px 0 34px}
.pe-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.03;margin:0 0 18px;letter-spacing:-.03em}
.pe-counts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.pe-counts span{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:14px}
.pe-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 56px;padding:0;list-style:none}
.pe-index>li{display:flex;min-width:0}
.pe-tile{display:flex;flex-direction:column;width:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-2);text-decoration:none;transition:border-color .16s}
.pe-tile:hover{border-color:var(--violet-hi)}
.pe-tile img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top;max-height:340px;background:#0d0e11}
.pe-tile-text{display:flex;flex-direction:column;padding:14px 16px 16px;flex:1}
.pe-tile strong{font:600 16.5px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--text)}
.pe-tile-meta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;color:var(--faint);font-size:13.5px}
.pe-tile-meta .i{width:13px;height:13px}
.pe-empty{max-width:62ch;padding:22px 24px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);font-size:17px;line-height:1.6}
.pe-empty a{color:var(--violet-ink)}

@media (max-width:1100px){.pe-index{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
  .pe-head{grid-template-columns:1fr;gap:28px}
  .pe-video{position:static;max-width:340px;width:100%;justify-self:center}
  .pe-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pe-tile img{max-height:260px}
}
@media (max-width:560px){
  .pe-grid{grid-template-columns:1fr}
  .pe-steps li{padding:16px 16px 4px 56px}
  .pe-steps li::before{left:14px;top:16px}
  .pe-tile-text{padding:12px}
  .pe-tile strong{font-size:15px}
}

/* The call-to-action panel, copied at build time from blog-assets/blog.css. */
.bl-cta{margin:40px 0;padding:22px 24px 20px;border-radius:18px;border:1px solid color-mix(in srgb,var(--violet-hi) 42%,var(--line));
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--violet) 16%,transparent),transparent 60%),var(--surface);
  box-shadow:0 18px 50px -30px rgba(124,102,232,.55)}
.bl-cta .bl-cta-h{font:600 clamp(24px,2.3vw,30px)/1.12 var(--f-display);letter-spacing:-.025em;color:var(--text);margin:0 0 18px}
.bl-cta .bl-cta-grid{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"k ." "dl trial" "v note";gap:10px 22px;align-items:center}
.bl-cta .bl-cta-k{grid-area:k;margin:0;font:600 17px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--text)}
.bl-cta .bl-dl{grid-area:dl;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bl-cta .btn{text-decoration:none;color:var(--text);min-width:0;padding:0 18px}
.bl-cta .btn.pri{color:#fff}
.bl-cta .bl-trial{grid-area:trial;justify-self:start}
.bl-cta .bl-cta-v{grid-area:v;margin:0;font-size:12.5px;line-height:1.4;color:var(--faint)}
.bl-cta .bl-cta-note{grid-area:note;margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.bl-cta-inline .bl-cta-grid{grid-template-areas:"k ." "dl trial" ". note"}
.bl-cta-inline .bl-cta-v{display:none}
.bl-cta-end{margin-top:56px;padding:28px 28px 24px}
.bl-cta-end .bl-cta-k{font-size:15px}
.bl-cta-wide{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:24px 48px;align-items:center;padding:34px 36px 30px;margin-top:72px}
.bl-cta-wide .bl-cta-h{margin:0;max-width:15ch;font-size:clamp(28px,3vw,40px);line-height:1.05}
@media (max-width:960px){.bl-cta-wide{grid-template-columns:minmax(0,1fr)}.bl-cta-wide .bl-cta-h{max-width:none}}
@media (max-width:760px){.bl-cta,.bl-cta-end,.bl-cta-wide{padding:20px 18px 18px}.bl-cta .bl-cta-grid,.bl-cta-inline .bl-cta-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "dl" "v" "trial" "note";gap:8px}.bl-cta-inline .bl-cta-grid{grid-template-areas:"k" "dl" "trial" "note"}.bl-cta .bl-trial{justify-self:stretch;margin-top:10px}.bl-cta .bl-cta-h{margin-bottom:14px}}