/* Illustrations inherit the public site's palette and remain readable without motion. */
.pa-preview { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; min-width:0; min-height:172px; padding:16px; border-radius:14px; background:var(--bg-color); color:var(--ink); font:500 12px/1.4 Inter,sans-serif; overflow:hidden; }
.pa-preview b { font-weight:750; }
.pa-preview i { color:var(--brand-deep-purple); }
.pa-account,.pa-property,.pa-invite,.pa-mini,.pa-calendar,.pa-document { border:1px solid var(--border-color); background:var(--card-bg); border-radius:12px; box-shadow:0 10px 25px -18px color-mix(in srgb,var(--ink) 35%,transparent); }
.pa-account,.pa-property { width:100%; max-width:285px; display:flex; align-items:center; gap:12px; padding:18px 14px; }
.pa-avatar { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--surface-brand-tint); font-size:20px; }
.pa-lines { flex:1; min-width:0; }
.pa-lines span,.pa-doc-line { display:block; height:5px; border-radius:3px; background:var(--border-color); margin-top:10px; }
.pa-lines span:last-child { width:65%; }
.pa-check { color:var(--brand-deep-teal) !important; font-size:19px; }
.pa-property > i { font-size:44px; }
.pa-property > div { flex:1; }
.pa-property div span { display:block; margin-top:6px; font-size:10px; color:var(--text-muted); }
.pa-invite { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 22px; }
.pa-invite > i { font-size:29px; }
.pa-pill { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:5px 8px; border-radius:7px; color:var(--brand-deep-teal); background:color-mix(in srgb,var(--sl-brand-teal) 12%,var(--card-bg)); font-size:11px; font-weight:650; }
.pa-pill i { color:inherit; }
.pa-calendar { width:148px; padding:10px; flex:none; }
.pa-calendar > b { display:flex; justify-content:space-between; margin-bottom:8px; }
.pa-calendar > b > span { font-size:9px; font-weight:500; color:var(--text-muted); }
.pa-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.pa-days span { display:grid; place-items:center; height:17px; font-size:9px; border-radius:3px; }
.pa-days .pa-selected { color:var(--card-bg); background:var(--brand-deep-purple); }
.pa-result { display:flex; flex-direction:column; gap:4px; max-width:75px; }
.pa-result b { font-size:18px; color:var(--brand-deep-purple); }
.pa-result > span { font-size:10px; color:var(--text-muted); }
.pa-mini { width:100%; max-width:265px; padding:14px; }
.pa-overline { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px; }
.pa-pair { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:7px 0; font-size:11px; }
.pa-meter,.pa-slider { height:8px; border-radius:5px; background:var(--border-color); overflow:hidden; }
.pa-meter > span { display:block; height:100%; width:33.333%; background:var(--brand-deep-teal); }
.pa-footnote { display:block; margin-top:6px; font-size:10px; color:var(--text-muted); }
.pa-slider { position:relative; height:5px; margin:8px 0 12px; overflow:visible; }
.pa-slider span { position:absolute; width:12px; height:12px; top:-4px; left:60%; background:var(--brand-deep-purple); border:2px solid var(--card-bg); border-radius:50%; }
.pa-slider-short span { left:30%; }
.pa-rule-row { display:flex; align-items:center; gap:12px; margin-top:14px; }
.pa-timeline { width:100%; max-width:210px; }
.pa-timeline > div { display:flex; gap:12px; align-items:center; }
.pa-timeline > div i { display:grid; place-items:center; width:24px; height:24px; background:var(--card-bg); border:1px solid var(--border-color); border-radius:7px; }
.pa-connector { display:block; width:1px; height:10px; background:var(--border-color); margin-left:12px; }
.pa-document { width:100%; max-width:220px; padding:13px 16px; transform:rotate(-2deg); }
.pa-doc-line { height:4px; margin-top:7px; }
.pa-short { width:65%; }
.pa-clause { display:flex; align-items:center; gap:8px; padding:7px; margin-top:8px; color:var(--brand-deep-purple); background:var(--surface-brand-tint); border-left:3px solid var(--brand-deep-purple); font-size:11px; }
.gs-steps .pa-preview { margin:0 0 18px; }
.gs-steps li { position:relative; }
.gs-steps li:not(:last-child)::after { content:'\2192'; position:absolute; top:105px; right:-20px; color:var(--brand-deep-teal); z-index:1; font-size:22px; }
.pa-tools .pd-card { padding:18px; }
.pa-tools .pa-preview { width:100%; margin-bottom:4px; }
.pa-access { margin-top:28px; }
.pa-access-intro { max-width:740px; }
.pa-access-hub { width:fit-content; display:flex; align-items:center; gap:12px; margin:24px auto 0; padding:14px 20px; border:1px solid var(--border-color); border-radius:12px; background:var(--card-bg); }
.pa-access-hub i { font-size:24px; color:var(--brand-deep-teal); }
.pa-access-hub b,.pa-access-hub span { display:block; }
.pa-access-hub span { font-size:12px; color:var(--text-muted); margin-top:3px; }
.pa-access-roles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:30px 0 0; padding:0; list-style:none; position:relative; }
.pa-access-roles::before { content:''; position:absolute; left:12.5%; right:12.5%; top:-16px; height:1px; background:var(--border-color); }
.pa-access-hub::after { content:''; position:absolute; height:15px; width:1px; background:var(--border-color); left:50%; bottom:-15px; }
.pa-access-hub { position:relative; }
.pa-access-roles li { position:relative; padding:20px; border:1px solid var(--border-color); border-radius:14px; background:var(--card-bg); }
.pa-access-roles li::before { content:''; position:absolute; height:15px; width:1px; background:var(--border-color); left:50%; top:-16px; }
.pa-access-roles i { font-size:23px; color:var(--brand-deep-purple); margin-bottom:12px; }
.pub-guide .pa-access-roles h3 { font-size:17px; margin:0 0 8px; }
.pub-guide .pa-access-roles p { font-size:14px; margin:0; line-height:1.6; }
.pa-access-note { font-size:13px; color:var(--text-muted); margin:14px 0 0; }
@media(max-width:900px) { .pa-access-roles { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; } .pa-access-hub::after,.pa-access-roles::before,.pa-access-roles li::before { display:none; } }
@media(max-width:700px) { .gs-steps li:not(:last-child)::after { display:none; } .gs-steps .pa-preview { min-height:145px; } }
@media(max-width:480px) { .pa-access-roles { grid-template-columns:1fr; gap:12px; } .pa-access-roles li { display:grid; grid-template-columns:32px 1fr; column-gap:12px; } .pa-access-roles i { grid-row:1/3; margin:0; padding-top:3px; } }
@media(prefers-reduced-motion:reduce) { .pa-document { transform:none; } }