/* Program 100 article pages. Only layout glue: every surface uses the site's own tokens and components. */
.p1-hero .ct{max-width:1000px}
.p1-hero .lk.big{display:inline-flex;margin-bottom:18px}
.p1-hero .lead{max-width:30em;margin-inline:auto}
.p1-ans .abody{margin-top:0}
.p1-ans .ap{max-width:38em}
.p1-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:4px auto 0;font-size:15px;line-height:1.4;color:var(--soft)}
.p1-meta img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.p1-meta a{color:var(--chalk);text-decoration:underline;text-underline-offset:3px}
/* table of contents: a glass bar that stays under the nav on desktop */
.p1-toc{position:sticky;top:66px;z-index:20;margin:0 0 clamp(36px,4vw,56px)}
.p1-tocin{display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--glass,rgba(24,28,24,.56));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--edge,rgba(243,245,240,.1))}
.p1-tocl{flex:none;font-size:15px;font-weight:600;color:var(--chalk);white-space:nowrap}
.p1-tocl em{font-style:normal;font-weight:500;color:var(--soft);margin-left:6px}
.p1-tocs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.p1-tocs::-webkit-scrollbar{display:none}
.p1-tocs a{flex:none;padding:9px 14px;border-radius:999px;font-size:15px;line-height:1.2;color:#E2E6DD;white-space:nowrap;transition:background .2s,color .2s}
.p1-tocs a:hover,.p1-tocs a[aria-current=true]{background:rgba(243,245,240,.1);color:#fff}
.p1-p .p1-tocs a[aria-current=true]{background:var(--chalk);color:var(--ink)}
.p1-v .p1-tocs a[aria-current=true]{box-shadow:inset 0 0 0 1px rgba(130,255,31,.55)}
@media(max-width:900px){.p1-toc{top:58px;margin-inline:0}.p1-tocin{padding:6px 6px 6px 14px;gap:10px}.p1-tocl em{display:none}.p1-tocs a{padding:8px 12px;font-size:14px}}
.p1-s{scroll-margin-top:140px}#tool,#portal-tool,#faq,#next{scroll-margin-top:140px}
/* prose for how-to text */
.p1-prose{max-width:40em;margin-inline:auto;display:grid;gap:1em;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:#E2E6DD;text-align:left}
.p1-prose p{margin:0}
.p1-prose b{color:#fff;font-weight:600}
.p1-note{max-width:44em;margin:0 auto;text-align:center;font-size:15px;line-height:1.45;color:var(--soft)}
.p1-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* visuals keep their real ratio, never cropped */
.p1-fig{margin:0;padding:10px;border-radius:var(--r3);overflow:hidden}
.p1-fig img,.p1-fig video{display:block;width:100%;height:auto;border-radius:calc(var(--r3) - 8px);background:#0f110f}
.p1-fig figcaption{padding:14px 10px 6px;font-size:15px;line-height:1.45;color:var(--soft);text-align:center}
.p1-fig.p1-narrow{max-width:520px;margin-inline:auto;width:100%}
.p1-figs{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.p1-figs.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p1-figs.n1{grid-template-columns:1fr}
@media(max-width:760px){.p1-figs,.p1-figs.n3{grid-template-columns:1fr}}
/* interactive checklist: ticks are saved on this device */
.p1-check .aticks li{padding:0}
.p1-check label{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;cursor:pointer}
.p1-check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--line2);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background .15s,box-shadow .15s}
.p1-check input:checked{background:var(--chalk);box-shadow:none}
.p1-check input:checked::after{content:"";width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.p1-v .p1-check input:checked{background:#82FF1F}
.p1-check li:has(input:checked) span{color:var(--soft);text-decoration:line-through;text-decoration-color:rgba(243,245,240,.35)}
.p1-prog{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 0;font-size:16px;color:var(--soft)}
.p1-prog b{color:#fff;font-weight:600}
/* copy-paste templates */
.p1-copy{max-width:860px;width:100%;margin:0 auto;padding:clamp(16px,2vw,24px);border-radius:var(--r3)}
.p1-copyh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.p1-copyh b{font-size:17px;font-weight:600;color:#fff}
.p1-copy pre{margin:0;padding:18px 20px;border-radius:var(--r2);background:rgba(11,12,11,.55);box-shadow:inset 0 0 0 1px var(--edge,rgba(243,245,240,.1));font-family:inherit;font-size:16px;line-height:1.55;color:#E2E6DD;white-space:pre-wrap;overflow-wrap:anywhere;max-height:520px;overflow:auto}
/* tool blocks */
.p1-tool .atool,.p1-ptool .atool{margin-top:clamp(20px,2.6vw,32px);transition:height .25s}
.p1-under{text-align:center;margin:14px 0 0;font-size:16px}
.p1-under a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.p1-pcard{padding:clamp(24px,4vw,56px) clamp(10px,2vw,28px) clamp(14px,2vw,24px)}
.p1-pcard .center .lead{max-width:30em}
.p1-pcard .lk.big{color:#fff}
.p1-pcard .kick{margin-top:6px}
.p1-pcard .h2{margin-top:6px}
/* try more Brand OS Portal tools */
.p1-mcard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(24px,4vw,56px);color:var(--chalk);text-decoration:none}
.p1-mtx .lead{margin:12px 0 22px;max-width:26em}
.p1-mtx .h2{margin-top:4px}
.p1-mth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p1-mth img{display:block;width:100%;height:auto;aspect-ratio:1440/900;border-radius:14px;box-shadow:0 18px 40px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(243,245,240,.12);transition:transform .35s}
.p1-mcard:hover .p1-mth img{transform:translateY(-3px)}
@media(max-width:900px){.p1-mcard{grid-template-columns:1fr}.p1-mtx{text-align:center}.p1-mtx .lead{margin-inline:auto}}
/* one line that leads into a new page from an older one */
.p1-in{font-size:17px!important}