:root{--navy:#04111E;--navy2:#0a2036;--blue:#007DFF;--blue-d:#0063cc;--btn:#0069E6;--btn-d:#0058C2;--green:#12BF7E;--amber:#FBB235;--red:#EE4943;--ink:#04111E;--slate:#5C7389;--line:#E1E9F1;--bg:#F7FAFE;--card:#fff;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
img{max-width:100%;height:auto}
a{color:var(--blue-d)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
.admin-bar{background:var(--amber);color:var(--ink);font-size:14px;text-align:center;padding:6px 16px}
.site-header{background:var(--navy);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.brand img{display:block}
.nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;font-size:15px}
.nav a:hover{text-decoration:underline}
.nav .nav-signout{margin:0;display:inline-flex}
.nav-toggle{display:none;background:transparent;color:#fff;border:1px solid #3a5470;border-radius:10px;padding:8px 14px;font:inherit}
.btn{display:inline-block;background:var(--btn);color:#fff!important;text-decoration:none!important;font-weight:600;padding:10px 18px;border-radius:10px;border:1px solid var(--btn);font-size:15px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--btn-d);border-color:var(--btn-d)}
.btn-ghost{background:transparent;border-color:#3a5470}
.btn-ghost:hover{background:#0f2a45}
.btn-light{background:#fff;color:var(--blue-d)!important;border-color:var(--blue-d)}
.btn-light:hover{background:#eef6ff}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.hero{background:var(--navy);color:#fff;padding:48px 0}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.1;margin:0 0 16px}
.hero h1 em{font-style:normal;color:#3b9bff}
.hero p{color:#c7d6e6;font-size:18px;max-width:560px}
.hero ul{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;color:#e6eef7;font-size:15px}
.hero li:before{content:"\2713\00a0";color:var(--green);font-weight:700}
.hero .note{font-size:13px;color:#8aa3bb}
.hero picture img{display:block;width:100%;height:auto;border-radius:var(--r)}
.demo-tag{display:inline-block;background:var(--amber);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.05em;padding:3px 10px;border-radius:999px}
section.block{padding:48px 0}
section.block h2{font-size:30px;margin:0 0 8px}
section.block .lead{color:var(--slate);margin:0 0 24px;max-width:680px}
.grid{display:grid;gap:16px}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
.grid.cols4{grid-template-columns:repeat(4,1fr)}
.grid.cols2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:0 1px 2px rgba(4,17,30,.04)}
.card h3,.card .card-title{margin:12px 0 6px;font-size:19px}
.card p{margin:0 0 10px;color:var(--slate)}
.card img{border-radius:10px;display:block;width:100%}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.steps li:before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--btn);color:#fff;font-weight:700;margin-bottom:8px}
.steps strong{display:block}
.steps span{color:var(--slate);font-size:15px}
.price{font-size:38px;font-weight:800;margin:6px 0}
.price small{font-size:15px;color:var(--slate);font-weight:500}
.card.featured{border:2px solid var(--blue);position:relative}
.card.featured .pill{position:absolute;top:-13px;left:20px;background:var(--btn);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px}
.checks{list-style:none;padding:0;margin:14px 0;color:var(--ink)}
.checks li{padding:4px 0 4px 24px;position:relative;font-size:15px}
.checks li:before{content:"\2713";position:absolute;left:0;color:var(--blue-d);font-weight:700}
.ring-row{display:flex;gap:16px;flex-wrap:wrap}
.ring{margin:0;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 18px}
.ring figcaption{font-weight:600;font-size:14px}
.ring-track{fill:none;stroke:#e6eef6;stroke-width:9}
.ring-value{fill:none;stroke:var(--blue);stroke-width:9;stroke-linecap:round}
.ring-warn .ring-value{stroke:var(--amber)}
.ring-bad .ring-value{stroke:var(--red)}
.ring-num{font-size:30px;font-weight:800;fill:var(--ink)}
table{border-collapse:collapse;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
th{background:#eef4fa;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#4a5f73}
.sev{font-weight:700;font-size:13px;padding:2px 8px;border-radius:999px;display:inline-block}
.sev-critical{background:#fde8e7;color:#a3201b}.sev-high{background:#fff0e0;color:#8a4a00}.sev-medium{background:#fff7dc;color:#7a5a00}
.table-wrap{overflow-x:auto}
.banner{padding:12px 16px;border-radius:12px;margin:0 0 20px;font-size:15px}
.banner-draft{background:#fff7dc;border:1px solid #f3d27a}
.banner-demo{background:#e8f2ff;border:1px solid #b6d6ff}
.banner-err{background:#fde8e7;border:1px solid #f3b3af}
.banner-ok{background:#e4f7ee;border:1px solid #a6e0c4}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--slate);margin:8px 0 0}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}
.article{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;min-width:0;overflow-wrap:anywhere}
.article table{display:block;overflow-x:auto}
.article h2{margin-top:32px}
.article img{max-width:100%}
.article pre,.article code{background:#eef4fa;border-radius:6px}
.article pre{padding:12px;overflow-x:auto}
.article code{padding:1px 5px}
.toc{position:sticky;top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;font-size:14px}
.toc ol{margin:8px 0 0;padding-left:18px}
.toc a{text-decoration:none}
.crumbs{font-size:14px;color:var(--slate);margin:0 0 12px}
.crumbs a{color:var(--slate)}
.meta{color:var(--slate);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;font-size:14px;text-decoration:none;color:var(--ink)}
.chip[aria-current=true]{background:var(--btn);color:#fff;border-color:var(--btn)}
form.stack{display:grid;gap:14px;max-width:480px}
label{font-weight:600;font-size:15px}
input[type=text],input[type=url],input[type=password],input[type=email]{width:100%;padding:11px 12px;border:1px solid #b9c9d9;border-radius:10px;font:inherit;background:#fff}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.state{font-weight:800;font-size:22px}
.state-on{color:#8a4a00}.state-off{color:#0b7a50}
.page-title{padding:40px 0 8px}
.page-title h1{margin:0 0 6px;font-size:clamp(28px,4vw,40px)}
.page-title p{color:var(--slate);margin:0;max-width:700px}
.site-footer{background:var(--navy);color:#c7d6e6;margin-top:48px;padding:32px 0 0}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot p{max-width:440px;font-size:14px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.foot a{color:#fff}
.legal{padding:16px;font-size:13px;color:#8aa3bb;border-top:1px solid #16314b;margin-top:16px}
.app-shell{display:grid;grid-template-columns:200px 1fr;gap:20px}
.app-nav{display:flex;flex-direction:column;gap:4px}
.app-nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.app-nav a[aria-current=page]{background:#e8f2ff;color:var(--blue-d);font-weight:600}
.trend{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
@media (max-width:900px){
 .hero .wrap,.article-layout,.app-shell{grid-template-columns:1fr}
 .grid.cols3,.grid.cols4,.steps{grid-template-columns:1fr 1fr}
 .toc{position:static}
}
@media (max-width:640px){
 .nav-toggle{display:inline-block}
 .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:12px}
 .nav.open{display:flex}
 .nav .btn{text-align:center}
 .grid.cols2,.grid.cols3,.grid.cols4,.steps,.hero ul{grid-template-columns:1fr}
 .article{padding:18px}
}
@media (prefers-reduced-motion:no-preference){.btn{transition:background .15s}}

/* W12 */
/* Example / Demo labels and figures */
.pg-figure{margin:0}
.pg-figure img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.pg-figure figcaption{margin-top:8px;color:var(--slate);font-size:14px}
.pg-split{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.pg-split h2{margin:0 0 8px;font-size:30px}
.pg-split p{color:var(--slate);margin:0 0 12px}
.pg-split.rev{grid-template-columns:1.15fr 1fr}
.pg-split.rev .pg-text{order:2}
.pg-phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pg-phases>li{background:#fff;border:1px solid var(--line);border-top-width:4px;border-radius:var(--r);padding:16px}
.pg-phases h3{margin:0 0 2px;font-size:18px}
.pg-phases .meta{margin:0 0 8px}
.pg-phases ol{margin:0;padding-left:20px;font-size:15px}
.pg-phases li.ph-a{border-top-color:#0069E6}
.pg-phases li.ph-b{border-top-color:#0A9C8A}
.pg-phases li.ph-c{border-top-color:#C77700}
.pg-phases li.ph-d{border-top-color:#7357C9}
.pg-hero-art{margin-top:24px}
.pg-plan-head{display:flex;align-items:center;gap:12px}
.pg-plan-head h2{margin:0}
.pg-plan-head img{width:56px;height:56px;border-radius:0;flex:none}
.pg-price{display:flex;flex-direction:column;align-items:flex-start}
.pg-price .btn{margin-top:auto}
.pg-price .checks{margin-bottom:20px}
.pg-ol{margin:0 0 12px;padding-left:22px}
.pg-ol li{padding:4px 0}
.pg-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pg-404{display:block;width:100%;max-width:360px;height:auto;margin:24px 0 0}
.pg-cta-note{color:var(--slate);font-size:14px;margin:8px 0 0}
.banner strong{font-weight:700}
/* coming soon: text sits in the calm region of the art and never overlays the laptop or phone */
.cs{background:#04121f;color:#fff}
.cs-stage{display:flex;flex-direction:column}
.cs-copy{padding:40px 16px 12px;max-width:640px;width:100%;margin:0 auto}
.cs-copy h1{font-size:clamp(34px,9vw,56px);line-height:1.1;margin:0 0 12px}
.cs-copy p{color:#c7d6e6;font-size:17px;margin:0}
.cs-stage picture{display:block;position:relative;aspect-ratio:900/880;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%);mask-image:linear-gradient(to bottom,transparent,#000 14%)}
.cs-art{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block}
.cs-caption{margin:0;padding:12px 16px 20px;text-align:center;color:#a9bed3;font-size:14px;background:linear-gradient(90deg,#071b2f,#0c2543)}
.cs-caption .demo-tag{margin-right:8px}
main:has(>.cs)+.site-footer{margin-top:0}
@media (min-width:1000px){
 .cs-stage{position:relative;display:block;aspect-ratio:16/9}
 .cs-stage picture{position:absolute;inset:0;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
 .cs-art{inset:0;width:100%;height:100%;object-fit:cover}
 .cs-copy{position:absolute;z-index:1;left:5%;top:12%;width:31%;height:54%;margin:0;padding:0;max-width:none;display:flex;flex-direction:column;justify-content:center}
 .cs-copy h1{font-size:clamp(34px,4.2vw,80px)}
 .cs-copy p{font-size:clamp(15px,1.45vw,28px)}
}
@media (max-width:900px){
 .pg-split,.pg-split.rev{grid-template-columns:1fr}
 .pg-split.rev .pg-text{order:0}
 .pg-phases{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 .pg-phases{grid-template-columns:1fr}
}
/* end W12 */

/* admin */
.admin-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.admin-dl dt{color:var(--slate)}
.admin-dl dd{margin:0;word-break:break-all}
/* guides */
.guide-card h3,.guide-card .card-title{margin:4px 0 6px}
.guide-card h3 a,.guide-card .card-title a{color:var(--ink);text-decoration:none}
.guide-card h3 a:hover,.guide-card .card-title a:hover{text-decoration:underline}
.guide-card img{margin-bottom:10px}
.guide-hero{display:block;width:100%;height:auto;border-radius:var(--r);margin:0 0 20px}
.guide-cta{margin-top:32px;padding:14px 16px;background:#eef6ff;border:1px solid #b6d6ff;border-radius:12px}
.guide-cta p{margin:0;color:var(--ink)}
.toc ul{margin:8px 0 0;padding-left:18px}
.article h2[id]{scroll-margin-top:16px}
/* app */
.app-toggle{margin:0;display:flex;gap:8px}
.issue-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.issue-list .card{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:12px 16px}
.issue-list .meta{flex-basis:100%}
.legend{display:inline-flex;align-items:center;gap:6px;margin-right:16px}
.fix-steps{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:16px}
.fix-steps h2{font-size:17px;margin:0 0 4px}
.fix-steps p{margin:0}
.app-shell>div{min-width:0}
details summary{cursor:pointer;font-weight:600;margin:12px 0}
@media (max-width:900px){.app-nav{flex-direction:row;flex-wrap:wrap}}
.fix-steps li,.fix-steps pre{min-width:0}
.fix-steps pre{background:#eef4fa;border-radius:8px;padding:12px;margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.fix-steps .btn{margin:0 8px 8px 0;max-width:100%}
.table-wrap td,.table-wrap th{overflow-wrap:anywhere}

/* W02 */
.vf-note{margin-top:8px}
.vf-state{display:flex;gap:10px;align-items:flex-start}
.vf-state-todo{margin:0 0 20px}
.vf-icon{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:#04111E;font-weight:800;font-size:15px;line-height:1}
.vf-icon-bad{background:#a3201b;color:#fff}
.vf-icon-todo{background:transparent;color:var(--slate);border:2px solid var(--slate);font-size:11px}
.vf-methods{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vf-method{display:grid;gap:4px;height:100%;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);text-decoration:none;align-content:start}
.vf-method:hover{border-color:var(--blue)}
.vf-method[aria-current=true]{border:2px solid var(--blue);padding:9px;background:#f3f9ff}
.vf-method img{border-radius:8px;width:100%;height:auto}
.vf-method-title{font-weight:700}
.vf-method[aria-current=true] .vf-method-title::before{content:"Selected: ";font-weight:600;color:var(--blue-d)}
.vf-method-blurb{font-size:14px;color:var(--slate)}
.vf-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.vf-panel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:24px;align-items:start}
.vf-panel h2{margin-top:0}
.vf-steps{padding-left:22px;margin:12px 0}
.vf-steps li{margin-bottom:12px}
.vf-steps p{margin:0 0 6px}
.vf-steps code,.vf-table code{overflow-wrap:anywhere;word-break:break-all;background:#eef4fa;border-radius:6px;padding:1px 5px}
.vf-code{background:#eef4fa;border-radius:8px;padding:12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.vf-copy{padding:4px 12px;font-size:14px;margin-left:6px}
.vf-copy[hidden]{display:none}
.vf-table th[scope=row]{width:90px;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.vf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vf-check{margin:16px 0}
.vf-result{min-height:8px}
.vf-detail{overflow-wrap:anywhere}
.vf-figure{margin:0}
.vf-figure img{border-radius:var(--r);border:1px solid var(--line);width:100%;height:auto}
.vf-foot{margin-top:20px}
@media (max-width:900px){.vf-panel-grid{grid-template-columns:1fr}.vf-figure{order:-1;max-width:420px}}
@media (max-width:640px){.vf-methods{grid-template-columns:1fr}.vf-panel{padding:14px}}
/* end W02 */
/* W11 */
.jse-install{margin:16px 0}
.jse-install h3{margin:0 0 8px}
.jse-install h4{font-size:17px;margin:0 0 4px}
.jse-code{background:#eef4fa;border:1px solid var(--line);border-radius:8px;padding:12px;margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-all;user-select:all;cursor:text}
.jse-code:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.jse-status{margin-top:12px}
/* end W11 */
/* W08 */
.st-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.st-page .crumbs{padding-top:20px;margin-bottom:0}
.st-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.st-title>div{min-width:0}
.st-billing{display:inline-block;margin:0 0 16px;padding:4px 12px;border:1px dashed #9db3c8;border-radius:999px;font-size:13px;color:#4a5f73;background:#fff}
.st-page .banner code,.st-page .meta code,.st-page .card code,.st-page .st-step code{background:#eef4fa;border-radius:6px;padding:1px 5px;overflow-wrap:anywhere}
.st-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.st-badge-ok{background:#e4f7ee;color:#0a6a45;border-color:#a6e0c4}
.st-badge-warn{background:#fff7dc;color:#7a5a00;border-color:#f3d27a}
.st-badge-info{background:#e8f2ff;color:#004a99;border-color:#b6d6ff}
.st-badge-neutral{background:#eef4fa;color:#4a5f73;border-color:#d5e1ec}
.st-badge-bad{background:#fde8e7;color:#a3201b;border-color:#f3b3af}
.st-sites{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.st-site{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.st-site-name{margin:0 0 2px;font-size:20px}
.st-site-name a{color:var(--ink)}
.st-site .meta,.st-site p{margin:0 0 6px}
.st-site-status{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px!important}
.st-site-actions{min-width:200px}
.st-links{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 16px}
.st-links a{display:inline-block;padding:4px 0;font-weight:600}
.st-archive summary{font-weight:500;font-size:14px;color:#a3201b;margin:4px 0}
.st-archive form{margin-top:8px;padding:12px;border:1px solid #f3b3af;border-radius:12px;background:#fff8f7;max-width:360px}
.st-archive p{margin:0 0 10px;font-size:14px;color:var(--ink)}
.btn-danger{background:#fff;color:#a3201b!important;border-color:#a3201b}
.btn-danger:hover{background:#fde8e7}
.st-empty{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:center}
.st-empty img{max-width:320px;height:auto;border-radius:0}
.st-empty h2{margin:0 0 8px}
.st-empty p{color:var(--ink)}
.st-add-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.st-form{display:grid;gap:10px}
.st-form .meta,.st-preview .meta,.st-field .meta{margin:0}
.st-form input[type=text]{max-width:520px}
.st-field{display:grid;gap:6px}
.st-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 0}
.st-error-summary{border:2px solid var(--red);background:#fff8f7;border-radius:12px;padding:12px 16px;margin:0 0 20px}
.st-error-summary:focus{outline:3px solid var(--blue);outline-offset:2px}
.st-error-summary h2,.st-error-summary h3{margin:0 0 6px;font-size:17px;color:#a3201b}
.st-error-summary p,.st-error-summary ul{margin:0}
.st-error-summary ul{padding-left:20px}
.st-field-error{color:#a3201b;font-weight:600;margin:0;font-size:15px}
input[aria-invalid=true]{border-color:var(--red)!important;border-width:2px!important}
.st-preview h2{margin:0 0 8px;font-size:19px}
.st-preview p{margin:10px 0 0}
.st-understood{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.st-understood dt{color:var(--slate)}
.st-understood dd{margin:0;overflow-wrap:anywhere}
.st-notes{margin:10px 0 0;padding-left:20px;color:var(--ink);font-size:15px}
.st-switch{position:relative;font-size:15px}
.st-switch summary{cursor:pointer;font-weight:600;margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;list-style:none}
.st-switch summary::-webkit-details-marker{display:none}
.st-switch summary::after{content:"\00a0\25BE"}
.st-switch-current{font-weight:500;color:var(--slate)}
.st-switch-list{position:absolute;right:0;z-index:20;list-style:none;margin:4px 0 0;padding:6px;min-width:240px;max-width:min(92vw,360px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(4,17,30,.12)}
.st-switch-list li a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
.st-switch-list li a:hover{background:#eef6ff}
.st-switch-list li a[aria-current=true]{font-weight:700;background:#e8f2ff}
.st-switch-all{padding:8px 10px;border-top:1px solid var(--line);margin-top:4px;font-size:14px}
.st-wizard{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.st-step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:0 1px 2px rgba(4,17,30,.04)}
.st-step-current{border:2px solid var(--blue);padding:15px 17px}
.st-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.st-step-head h2{margin:0;font-size:19px;flex:1 1 200px}
.st-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;flex:none}
.st-step-current .st-num{background:var(--blue)}
.st-step-body{margin:10px 0 0 42px}
.st-step-body>p{margin:0 0 10px}
.st-step-body h3.st-sub{font-size:16px;margin:16px 0 6px}
.st-fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.st-fieldset legend{font-weight:700;font-size:16px;padding:0;margin-bottom:4px}
.st-radio{display:flex;align-items:center;gap:10px;min-height:32px}
.st-radio input{width:20px;height:20px;margin:0;accent-color:var(--blue)}
.st-radio label{font-weight:500}
.st-email-more{display:grid;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.st-email-more[hidden]{display:none}
.st-figure{margin:0 0 12px;max-width:520px}
.st-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.st-figure figcaption{margin-top:6px}
.st-progress-summary{font-weight:600;margin:0 0 8px}
.st-bar{width:100%;max-width:520px;height:12px;accent-color:var(--blue);display:block;margin:0 0 12px}
.st-bar[hidden]{display:none}
.st-stages{list-style:none;padding:0;margin:0;display:grid;gap:6px;max-width:640px}
.st-stage{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.st-stage-icon{font-weight:700;text-align:center}
.st-stage-name{font-weight:600;overflow-wrap:anywhere}
.st-stage-state{font-size:14px;font-weight:600;color:#4a5f73}
.st-stage-detail{grid-column:2 / -1}
.st-stage-running{border-color:var(--blue);background:#f2f8ff}
.st-stage-running .st-stage-state,.st-stage-running .st-stage-icon{color:#004a99}
.st-stage-done .st-stage-icon,.st-stage-done .st-stage-state{color:#004a99}
.st-stage-problem{border-color:#f3b3af;background:#fff8f7}
.st-stage-problem .st-stage-icon,.st-stage-problem .st-stage-state{color:#a3201b}
.st-stage-skipped,.st-stage-pending{background:var(--bg)}
.st-footer{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;justify-content:space-between}
.st-footer p{margin:4px 0}
@media (prefers-reduced-motion:no-preference){.st-stage-running .st-stage-icon{display:inline-block;animation:st-spin 1.4s linear infinite}}
@keyframes st-spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
 .st-add-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
 .st-site{grid-template-columns:1fr}
 .st-site-actions{min-width:0}
 .st-empty{grid-template-columns:1fr}
 .st-empty img{max-width:240px;margin:0 auto}
 .st-step-body{margin-left:0}
 .st-switch-list{left:0;right:auto}
 .st-actions .btn{text-align:center}
}
/* end W08 */
/* W09 */
.hl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hl-page{padding-bottom:32px}
.hl-page h2{font-size:22px;margin:0 0 8px}
.hl-page h3{font-size:18px;margin:0}
.hl-page h4{font-size:15px;margin:18px 0 6px}
.hl-head{padding:24px 0 0}
.hl-head h1{margin:0 0 4px;font-size:clamp(26px,4vw,36px);overflow-wrap:anywhere}
.hl-head .crumbs{margin:0 0 8px}
.hl-head-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.hl-head .meta{margin:0}
.hl-head .meta a{overflow-wrap:anywhere}
.hl-billing{background:#e8f2ff;border:1px solid #b6d6ff;border-radius:999px;padding:3px 12px!important;font-size:13px}
.hl-tabs{list-style:none;margin:16px 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line)}
.hl-tabs a{display:block;padding:10px 14px;text-decoration:none;color:var(--ink);border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:500}
.hl-tabs a:hover{background:#eef6ff}
.hl-tabs a[aria-current=page]{border-bottom-color:var(--blue);font-weight:700;color:var(--blue-d)}
.hl-live{background:#e8f2ff;border:1px solid #b6d6ff;border-radius:12px;padding:10px 14px;margin:0 0 16px}
.hl-live:empty{padding:0;border:0;margin:0}
.hl-live:focus{outline:3px solid var(--blue);outline-offset:2px}
.hl-big{font-size:clamp(20px,3vw,26px);font-weight:800;margin:0 0 6px!important;color:var(--ink)!important}
.hl-summary{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-bottom:24px}
.hl-summary-text p{margin:0 0 8px}
.hl-summary-side{display:grid;gap:8px;justify-items:end;text-align:right}
.hl-summary-side p{margin:0}
.hl-counts{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;padding:0;font-size:15px}
.hl-ring{display:block}
.hl-ring-track{fill:none;stroke:#e6eef6;stroke-width:12}
.hl-ring-value{fill:none;stroke:var(--green);stroke-width:12;stroke-linecap:round}
.hl-ring-num{font-size:28px;font-weight:800;fill:var(--ink)}
.hl-ring-sub{font-size:11px;fill:#4a5f73;letter-spacing:.04em}
.hl-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start}
.hl-main{min-width:0}
.hl-cats{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}
.hl-cats h2{font-size:16px}
.hl-cats ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hl-cats a{display:grid;grid-template-columns:1fr auto;gap:0 8px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.hl-cats a:hover{background:#eef6ff}
.hl-cats a[aria-current=true]{background:#e8f2ff;box-shadow:inset 3px 0 0 var(--blue)}
.hl-cat-name{font-weight:600;font-size:14px}
.hl-cat-count{font-size:14px;color:#3d5266;text-align:right}
.hl-cat-open{grid-column:1/-1;font-size:13px;color:#a3201b;font-weight:600;display:flex;align-items:center;gap:6px}
.hl-cat-clear{color:#0a6b46}
.hl-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red)}
.hl-filters{margin:12px 0 16px}
.hl-rows{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hl-row{padding:14px 16px;border-bottom:1px solid var(--line);min-width:0}
.hl-row:last-child{border-bottom:0}
.hl-row-main{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start}
.hl-row-icon{padding-top:2px}
.hl-icon{display:block}
.hl-row-text p{margin:0 0 4px}
.hl-row-title{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.hl-row-why{color:var(--slate);font-size:15px}
.hl-row-summary{font-size:15px}
.hl-row-reason{font-size:14px;color:#3d5266}
.hl-reason-label{font-weight:700}
.hl-busy{background:#f3f8ff}
.hl-busy .hl-row-title:after{content:"Checking...";font-size:13px;font-weight:700;color:var(--blue-d)}
.hl-chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;border:1px solid transparent;line-height:1.5}
.hl-chip-pass{background:#e4f7ee;color:#0a6b46;border-color:#a6e0c4}
.hl-chip-fail{background:#fde8e7;color:#a3201b;border-color:#f3b3af}
.hl-chip-notchecked,.hl-chip-notapplicable{background:#eef4fa;color:#3d5266;border-color:#c9d8e6}
.hl-chip-needsconfirmation,.hl-chip-confirmed{background:#fff7dc;color:#7a5a00;border-color:#f3d27a}
.hl-chip-confirmed{background:#fff;border-style:dashed}
.hl-chip-fixed{background:#e4f7ee;color:#0a6b46;border-color:#a6e0c4}
.hl-chip-next{background:var(--blue);color:#fff}
.hl-chip-log-pass{background:#e4f7ee;color:#0a6b46;border-color:#a6e0c4}
.hl-chip-log-fail{background:#fde8e7;color:#a3201b;border-color:#f3b3af}
.hl-chip-log-confirmed{background:#fff;color:#7a5a00;border:1px dashed #b27300}
.hl-chip-log-info{background:#eef4fa;color:#3d5266;border-color:#c9d8e6}
.hl-fix{white-space:nowrap}
.hl-row-plan{margin:10px 0 0 40px}
.hl-howto{background:#f7fafe;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 10px}
.hl-howto p{margin:0 0 4px}
.hl-row-forms{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start}
.hl-inline-form{margin:0}
.hl-confirm-form{display:grid;gap:6px;max-width:460px;margin:0}
.hl-confirm-form label{font-size:14px}
.hl-confirm-form input[type=text]{width:100%;padding:9px 11px;border:1px solid #b9c9d9;border-radius:10px;font:inherit}
.hl-evidence{margin:8px 0 0 40px}
.hl-evidence summary{margin:4px 0;font-size:14px;font-weight:600;color:var(--blue-d)}
.hl-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:8px 0;font-size:14px}
.hl-facts dt{color:var(--slate)}
.hl-facts dd{margin:0;overflow-wrap:anywhere}
.hl-ev{background:#eef4fa;border-radius:8px;padding:12px;margin:6px 0;overflow:auto;max-height:320px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
.hl-copy{display:none}
.hl-js .hl-copy{display:inline-block}
.hl-empty{text-align:left}
.hl-empty p{margin:0 0 8px}
.hl-na{margin:16px 0}
.hl-na-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.hl-na-list li{display:flex;gap:10px;align-items:flex-start}
.hl-na-list svg{flex:none}
.hl-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin:12px 0}
.hl-filter-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.hl-field{display:grid;gap:4px}
.hl-field-grow{flex:1 1 220px}
.hl-filter-form select,.hl-filter-form input[type=text]{padding:10px 12px;border:1px solid #b9c9d9;border-radius:10px;font:inherit;background:#fff;max-width:100%}
.hl-actions-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 12px}
/* plan */
.hl-plan-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:24px;align-items:center;margin-bottom:24px}
.hl-plan-intro-text p{margin:0 0 10px}
.hl-plan-hero{margin:0}
.hl-plan-hero img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.hl-plan-hero figcaption{margin-top:4px;text-align:center}
.hl-progress-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hl-progress{display:block;width:200px;max-width:100%;height:12px;border-radius:999px;background:#e6eef6;overflow:hidden}
.hl-progress span{display:block;height:100%;background:var(--green)}
.hl-complete{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin-bottom:24px;border-color:#a6e0c4;background:#f3fcf8}
.hl-complete img{width:100%;height:auto}
.hl-rail-nav{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.hl-rail-nav>details>summary{margin:0;font-size:16px}
.hl-rail,.hl-rail ol{list-style:none;margin:0;padding:0}
.hl-rail-phase{margin-top:14px}
.hl-phase-title{margin:0 0 4px;font-weight:700;font-size:14px;display:flex;flex-wrap:wrap;gap:2px 8px}
.hl-rail ol{display:grid;gap:1px}
.hl-rail a{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;padding:6px 6px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px}
.hl-rail a:hover{background:#eef6ff}
.hl-rail-next a{background:#e8f2ff;box-shadow:inset 3px 0 0 var(--blue)}
.hl-rail-muted{color:var(--slate)!important}
.hl-rail-text{display:block;min-width:0}
.hl-rail-state{display:block;font-size:12px;color:#3d5266}
.hl-rail-num{font-weight:700}
.hl-phase{margin:0 0 28px}
.hl-phase>.meta{margin:0 0 8px}
.hl-step{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin:12px 0;scroll-margin-top:12px}
.hl-step-next{border:2px solid var(--blue)}
.hl-step>summary{list-style:none;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:14px 16px;margin:0;cursor:pointer}
.hl-step>summary::-webkit-details-marker{display:none}
.hl-step-num{display:block;font-size:13px;color:#3d5266;font-weight:600}
.hl-step-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:4px}
.hl-step-body{padding:0 16px 16px 56px}
.hl-step-body .hl-rows{margin-top:6px}
.hl-step-body .hl-row-main{grid-template-columns:28px minmax(0,1fr)}
.hl-why{margin:0 0 8px;color:#3d5266}
.hl-instructions{margin:0 0 10px;padding-left:22px}
.hl-instructions li{margin:4px 0}
.hl-platforms{margin:6px 0 10px}
.hl-platforms dl{margin:4px 0;display:grid;gap:4px}
.hl-platforms dt{font-weight:700}
.hl-platforms dd{margin:0 0 4px;color:#3d5266}
.hl-step-links{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:8px 0}
.hl-step-check{margin:12px 0 0}
.hl-step-muted{padding:12px 16px;background:#f7fafe}
.hl-step-muted-head{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 4px}
.hl-step-muted .meta{margin:0}
/* log */
.hl-day{margin:22px 0 8px!important;font-size:16px!important;color:#3d5266}
.hl-timeline{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.hl-event{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.hl-event:last-child{border-bottom:0}
.hl-event-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 2px}
.hl-event-msg{margin:0;overflow-wrap:anywhere}
.hl-event-data summary{margin:6px 0;font-size:14px;color:var(--blue-d)}
.hl-event-data pre{background:#eef4fa;border-radius:8px;padding:10px;margin:0 0 6px;overflow:auto;max-height:240px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
/* links */
.hl-links{list-style:none;margin:12px 0;padding:0;display:grid;gap:12px}
.hl-link{padding:14px 16px;min-width:0}
.hl-link-head{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px}
.hl-link-url{margin:0 0 4px!important;font-weight:600;color:var(--ink)!important;overflow-wrap:anywhere}
.hl-link-status{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 6px!important}
.hl-link-fix{margin:6px 0 6px 40px!important;color:var(--ink)!important}
.hl-link-sources{margin:0 0 6px 40px}
.hl-link-sources ul{margin:4px 0;padding-left:20px}
.hl-link-sources li{overflow-wrap:anywhere;margin:4px 0}
.hl-link-sources summary{margin:4px 0}
.hl-link form{margin:6px 0 0 40px}
@media (max-width:900px){
 .hl-layout,.hl-plan-intro,.hl-summary{grid-template-columns:minmax(0,1fr)}
 .hl-summary-side{justify-items:start;text-align:left}
 .hl-rail-nav{position:static;max-height:none}
 .hl-complete{grid-template-columns:120px 1fr}
 .hl-plan-hero{max-width:440px}
}
@media (max-width:640px){
 .hl-row-main{grid-template-columns:28px minmax(0,1fr)}
 .hl-row-actions{grid-column:2}
 .hl-row-plan,.hl-evidence,.hl-link-fix,.hl-link-sources,.hl-link form{margin-left:0}
 .hl-step>summary{padding:12px}
 .hl-step-body{padding:0 12px 14px}
 .hl-complete{grid-template-columns:1fr}
 .hl-complete img{max-width:220px}
 .hl-tabs a{padding:10px}
 .hl-facts{grid-template-columns:1fr}
}
/* end W09 */

/* W17 */
.stat-list{list-style:none;margin:0;padding:0}
.stat-row{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;padding:10px 0;border-top:1px solid var(--line)}
.stat-row:first-child{border-top:0}
.stat-label{font-weight:600}
.stat-value{display:inline-flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;overflow-wrap:anywhere}
.stat-marker{font-weight:700}
.stat-ok{color:#004a99}
.stat-warn{color:#7a5a00}
.stat-bad{color:#a3201b}
.stat-info{color:#004a99}
.stat-detail{margin:0}
@media (min-width:700px){.stat-row{grid-template-columns:minmax(200px,1fr) minmax(0,2fr)}.stat-detail{grid-column:2}}
/* end W17 */
/* W16 */
.sm-page{padding-bottom:16px}
.sm-page .crumbs{padding-top:20px;margin-bottom:0}
.sm-steps{counter-reset:sm;list-style:none;padding:0;margin:8px 0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sm-steps li{counter-increment:sm;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.sm-steps li:before{content:counter(sm);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--btn);color:#fff;font-weight:700;margin-bottom:6px}
.sm-steps strong{display:block}
.sm-steps span{color:var(--slate);font-size:15px}
.sm-error-summary{border:2px solid var(--red);background:#fff8f7;border-radius:12px;padding:12px 16px;margin:0 0 20px}
.sm-error-summary:focus{outline:3px solid var(--blue);outline-offset:2px}
.sm-error-summary h2{margin:0 0 6px;font-size:17px;color:#a3201b}
.sm-error-summary p{margin:0}
.sm-field-error{color:#a3201b;font-weight:600;margin:8px 0 0;font-size:15px}
.sm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.sm-form-card h2,.sm-preview h2{margin-top:0;font-size:20px}
.sm-form-card input[type=text]{margin:6px 0 0}
.sm-form-card .meta{margin:4px 0 0}
.sm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sm-understood{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 10px}
.sm-understood dt{font-weight:600}
.sm-understood dd{margin:0;overflow-wrap:anywhere}
.sm-understood code,.sm-page .card code,.sm-page .meta code,.sm-rules code{background:#eef4fa;border-radius:6px;padding:1px 5px;overflow-wrap:anywhere}
.sm-notes{margin:0 0 10px;padding-left:20px;color:var(--slate);font-size:15px}
.sm-mine{margin-top:28px}
.sm-sitelist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.sm-sitelist li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sm-compare,.sm-rules{margin-top:32px}
.sm-compare h2,.sm-rules h2{font-size:24px}
.sm-lockedlist{list-style:none;padding:0;margin:14px 0}
.sm-lockedlist li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;color:var(--ink);font-size:15px}
.sm-lock{flex:none;margin-top:3px;color:var(--slate)}
.sm-rules ul{padding-left:20px;color:var(--ink)}
.sm-rules li{margin-bottom:8px}
.sm-remove{margin-top:24px}
.sm-remove summary{font-weight:500;font-size:14px;color:#a3201b;cursor:pointer}
.sm-remove form{margin-top:8px;padding:12px;border:1px solid #f3b3af;border-radius:12px;background:#fff8f7;max-width:380px}
.sm-remove p{margin:0 0 10px;font-size:14px}
.sm-wait .sm-stages{list-style:none;padding:0;margin:12px 0}
.sm-stages li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.sm-stage-state{color:var(--slate);font-weight:600;white-space:nowrap}
.sm-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin:16px 0 28px}
.sm-summary h2{margin:0 0 6px;font-size:24px}
.sm-summary p{margin:0 0 8px}
.sm-findings-wrap h2,.sm-locked-wrap h2{font-size:22px;margin:0 0 10px}
.sm-findings{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.sm-finding h3{margin:6px 0 8px}
.sm-finding p{color:var(--ink)}
.sm-finding-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 4px!important}
.sm-sev{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:13px;padding:2px 10px;border-radius:999px}
.sm-sev-high{background:#fde8e7;color:#a3201b}
.sm-sev-medium{background:#fff7dc;color:#7a5a00}
.sm-sev-low{background:#eef4fa;color:#4a5f73}
.sm-cat{color:var(--slate);font-size:14px}
.sm-fixlock{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0!important;padding:8px 12px;border:1px dashed #9db3c8;border-radius:10px;background:#f7fafd;color:var(--slate)!important;font-size:14px}
.sm-locked-wrap{margin-bottom:28px}
.sm-locked{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sm-locked li{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border:1px dashed #9db3c8;border-radius:12px;background:#fff}
.sm-upgrade{border:2px solid var(--blue)}
.sm-upgrade h2{margin-top:0}
@media (max-width:900px){.sm-grid{grid-template-columns:1fr}.sm-steps{grid-template-columns:1fr}}
@media (max-width:640px){.sm-summary{grid-template-columns:1fr;justify-items:start}.sm-actions .btn{width:100%;text-align:center}}
/* end W16 */
/* W21 */
.jse-copy[hidden]{display:none}
.jse-copy-row{margin:8px 0 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.jse-copied{font-size:15px}
/* end W21 */

/* W23 accessibility fixes from the first real axe-core run (docs/A11Y_AUDIT_REPORT.md, ACC-002) */
/* color-contrast: link blue on the amber admin bar was 3.15:1 */
.admin-bar a{color:var(--ink);font-weight:600}
/* color-contrast: inline code inherited the muted slate colour on the pale code background (4.44:1) */
.meta code,.card code,.vf-steps code,.vf-table code,.sm-understood code,.sm-page code,.st-page code{color:var(--ink)}
/* color-contrast: muted slate on the pale blue pill was 4.35:1 */
.hl-billing{color:#4A5F73}
/* color-contrast: white on #007DFF is 3.9:1; the button blue gives 5.04:1 */
.hl-chip-next,.st-step-current .st-num{background:var(--btn)}
/* target-size (WCAG 2.2, 2.5.8): contents links in guides were 17px high with 19.6px spacing */
.toc li a{display:inline-block;min-height:24px;padding:3px 0;line-height:18px}
/* scrollable-region-focusable: code blocks in guides scrolled sideways and could not be reached by keyboard; wrap instead */
.article pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* end W23 */
/* W27 */
.mn-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mn-page{padding-bottom:32px}
.mn-page h2{font-size:22px;margin:8px 0}
.mn-page h3{font-size:18px;margin:0 0 8px}
.mn-page h4{font-size:15px;margin:0 0 4px}
.mn-section{margin:24px 0}
.mn-nav ul,.mn-range ul{list-style:none;margin:12px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mn-nav a,.mn-range a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;color:var(--ink);min-height:24px}
.mn-nav a:hover,.mn-range a:hover{background:#eef6ff}
.mn-nav a[aria-current=page],.mn-range a[aria-current=true]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);font-weight:700;color:var(--blue-d)}
.mn-badge-open{border-color:#a3201b!important}
.mn-badge-mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#a3201b;color:#fff;font-size:12px;font-weight:800;margin-right:6px}
.mn-badge-count{font-weight:700}
.mn-flag{display:inline-block;border:1px solid #a3201b;color:#a3201b;background:#fff8f7;border-radius:999px;padding:1px 10px;font-size:13px;font-weight:700}
.mn-flag-quiet{border-color:var(--slate);color:#3f566b;background:#f2f6fa}
.mn-flag-info{border-color:var(--blue-d);color:var(--blue-d);background:#eef6ff}
.mn-alerts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mn-alert p{margin:0 0 8px}
.mn-alert-title{font-size:17px;color:var(--ink)!important}
.mn-alert-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mn-inline{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.mn-radio{display:flex;gap:8px;align-items:center;min-height:32px}
.mn-table-wrap{overflow-x:auto}
.mn-table{border-collapse:collapse;width:100%;font-size:14px}
.mn-table th,.mn-table td{border-bottom:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.mn-table thead th{background:#f2f6fa}
.mn-figure{margin:0}
.mn-chart{display:block;width:100%;height:auto;max-width:720px}
.mn-grid{stroke:#e1e9f1;stroke-width:1}
.mn-axis{stroke:#8aa0b4;stroke-width:1}
.mn-tick{fill:#4a5f73;font-size:11px}
.mn-line{fill:none;stroke:#0063cc;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mn-dot{fill:#0063cc;stroke:#fff;stroke-width:2}
.mn-dot-partial{fill:#fff;stroke:#0063cc;stroke-width:2}
.mn-caption{color:var(--slate);font-size:13px;margin:4px 0}
.mn-details{margin-top:8px}
.mn-details summary{cursor:pointer;color:var(--blue-d);font-weight:600}
.mn-grid-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.mn-card-gap{margin-bottom:16px}
/* end W27 */

/* W28 reports and share links (classes prefixed rp-) */
.rp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rp-owner [hidden],.rp-public [hidden]{display:none!important}
.rp-owner{padding-bottom:40px}
.rp-owner>.card,.rp-owner>.rp-section{margin-bottom:24px}
.rp-owner h2{font-size:22px;margin:0 0 8px}
.rp-owner h3{font-size:18px;margin:16px 0 6px}
.rp-tool-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.rp-new-link{border:2px solid var(--blue);margin-bottom:24px}
.rp-new-link:focus{outline:3px solid var(--blue);outline-offset:2px}
.rp-copy-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rp-copy-row input{flex:1 1 280px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
.rp-field{display:grid;gap:4px;margin:0 0 12px}
.rp-field input[type=number],.rp-field input[type=text],.rp-field select{padding:10px 12px;border:1px solid #b9c9d9;border-radius:10px;font:inherit;background:#fff;max-width:420px;width:100%}
.rp-share-form{display:grid;gap:4px;margin:16px 0 8px;max-width:480px}
.rp-share-facts{margin:4px 0 12px;padding-left:20px}
.rp-share-facts li{padding:2px 0}
.rp-cmp-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:8px 0 16px}
.rp-cmp-form .rp-field{margin:0;flex:1 1 260px}
.rp-compare .rp-table,.rp-shares .rp-table{margin:8px 0 16px}
/* words stay whole in table cells; the state columns never wrap mid-word ("Pass ed") */
.rp-table td,.rp-table th{overflow-wrap:normal;word-break:normal;hyphens:none}
.rp-compare .rp-table td:nth-last-child(-n+2),.rp-shares .rp-table td:nth-last-child(-n+2){min-width:7.5em}
/* visually hidden text inside a scrolling table must be clipped by it, or it widens the whole page */
.rp-owner .table-wrap,.rp-public .table-wrap{position:relative}
/* the report document */
.rp-doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:0 0 24px;box-shadow:0 1px 2px rgba(4,17,30,.04)}
.rp-doc h1,.rp-doc h2{margin:0 0 8px;overflow-wrap:anywhere}
.rp-doc h1{font-size:clamp(26px,4vw,34px)}
.rp-doc h2{font-size:clamp(22px,3.4vw,28px)}
.rp-doc .rp-section h2,.rp-doc .rp-section h3{font-size:20px;margin:0 0 8px}
.rp-doc-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.rp-kicker{margin:0 0 4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);font-weight:700}
.rp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 24px;margin:12px 0 0}
.rp-facts div{margin:0}
.rp-facts dt{font-size:13px;color:var(--slate)}
.rp-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.rp-snapshot-note{margin:14px 0 0;color:var(--slate);font-size:14px}
.rp-summary{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;margin:0 0 24px}
.rp-summary p{margin:0 0 8px}
.rp-big{font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--ink)}
.rp-counts{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;padding:0;font-size:15px}
.rp-section{margin:0 0 24px}
.rp-items{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rp-item{padding:14px 0;border-top:1px solid var(--line)}
.rp-item:first-child{border-top:0}
.rp-item h3,.rp-item h4{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 4px;font-size:17px}
.rp-item p{margin:0 0 6px}
.rp-item .rp-area{color:var(--slate);font-size:14px}
.rp-passlist{list-style:none;margin:0;padding:0;columns:2 280px;column-gap:32px}
.rp-passlist li{display:flex;gap:8px;align-items:center;padding:3px 0;break-inside:avoid}
.rp-passlist .hl-icon{flex:none;width:20px;height:20px}
.rp-evidence{margin:0;padding-left:20px}
.rp-evidence li{padding:2px 0}
.rp-doc-foot{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;color:var(--slate);font-size:14px}
.rp-doc-foot p{margin:0}
/* the public share page */
.rp-public{background:var(--bg)}
.rp-pub-head{background:var(--navy);color:#fff}
.rp-pub-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.rp-pub-bar img{display:block}
.rp-pub-bar p{margin:0;color:#c7d6e6;font-size:14px}
.rp-pub-main{padding-top:24px;padding-bottom:24px}
.rp-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.rp-throttle{max-width:560px;margin:32px auto}
.rp-pub-foot{background:var(--navy);color:#c7d6e6;padding:20px 0;font-size:14px}
.rp-pub-foot p{margin:0}
@media (max-width:640px){
 .rp-doc{padding:16px}
 .rp-summary{grid-template-columns:1fr;justify-items:start}
 .rp-passlist{columns:1}
}
/* Print or "Save as PDF": only the report itself, black on white, no site chrome, no forms, no clipping. */
@media print{
 @page{size:A4;margin:16mm 14mm 18mm}
 body:has(.rp-doc){background:#fff!important;color:#000;font-size:11pt;line-height:1.45}
 body:has(.rp-doc) .site-header,body:has(.rp-doc) .site-footer,body:has(.rp-doc) .admin-bar,body:has(.rp-doc) .skip,
 .rp-pub-head,.rp-pub-foot,.rp-noprint,.rp-owner .hl-head,.rp-owner .hl-live,.rp-owner .hl-empty{display:none!important}
 body:has(.rp-doc) .wrap{max-width:none;padding:0}
 .rp-doc{border:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 12mm;background:#fff}
 .rp-doc a{color:#000;text-decoration:none}
 .rp-doc h1,.rp-doc h2,.rp-doc h3,.rp-doc h4{color:#000;break-after:avoid;page-break-after:avoid}
 .rp-summary,.rp-item,.rp-table tr,.rp-doc-foot,.rp-facts{break-inside:avoid;page-break-inside:avoid}
 .rp-item,.rp-passlist li{border-color:#999}
 .rp-doc-head{border-color:#000}
 .rp-kicker,.rp-snapshot-note,.rp-area,.meta,.rp-facts dt,.rp-doc-foot{color:#333!important}
 .rp-section{margin-bottom:8mm}
 .rp-table{border:1px solid #666;border-radius:0;background:#fff;font-size:10pt}
 .rp-table th,.rp-table td{border-color:#999;background:#fff;color:#000}
 .rp-table thead{display:table-header-group}
 .table-wrap{overflow:visible}
 .rp-chip,.hl-chip{background:#fff!important;color:#000!important;border:1px solid #000!important}
 .hl-icon,.hl-ring{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .rp-compare form{display:none}
}
/* end W28 */

/* W30 recipe panel (RDY-004, RDY-008) */
.rc-panel{margin:10px 0 0}
.rc-details{border:1px solid var(--line);border-radius:12px;background:#fff}
.rc-details>summary{cursor:pointer;padding:10px 14px;font-weight:600;min-height:24px}
.rc-inner{padding:2px 14px 14px}
.rc-draft{margin:0 0 8px;padding:8px 12px;border:1px dashed #9db3c8;border-radius:10px;background:#f7fafd;color:var(--ink);font-size:14px}
.rc-platform,.rc-note{margin:0 0 8px;font-size:15px}
.rc-note{padding:8px 12px;border-left:4px solid var(--amber);background:#fff8e8}
.rc-reasons{margin:0 0 8px;padding-left:20px;font-size:14px;color:var(--ink)}
.rc-meta{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:0 0 10px;font-size:14px}
.rc-meta dt{font-weight:600}
.rc-meta dd{margin:0}
.rc-body{font-size:15px;overflow-wrap:anywhere}
.rc-body p,.rc-body ol,.rc-body ul{margin:0 0 10px}
.rc-body pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f5fa;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px}
.rc-body code{color:var(--ink)}
.rc-sub{margin:14px 0 6px}
.rc-sub2{margin:10px 0 4px}
.rc-extra{margin:12px 0 0;border-top:1px solid var(--line);padding-top:8px}
.rc-extra>summary{cursor:pointer;font-weight:600;min-height:24px}
.rc-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.rc-form label{font-size:14px}
.rc-form select{min-height:40px;max-width:100%}
@media (max-width:480px){.rc-meta{grid-template-columns:1fr}.rc-form .btn,.rc-form select{width:100%}}
/* end W30 */

/* W26 billing pages (bl- prefix) */
.bl-page .card{margin-top:16px}
.bl-plan-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px}
.bl-plan-name{font-size:22px}
.bl-status{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:999px;font-weight:600;font-size:14px}
.bl-status-ok{background:#e4f7ee;color:#0b5c3b;border:1px solid #a6e0c4}
.bl-status-bad{background:#fde8e7;color:#8a1c17;border:1px solid #f3b3af}
.bl-table{width:100%;border-collapse:collapse}
.bl-table th,.bl-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #dbe6f0}
.bl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bl-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bl-actions form,.bl-inline{margin:0;display:inline-block}
.bl-inline{margin-left:12px}
.bl-plan-current{border:2px solid var(--blue)}
.bl-price{font-size:24px;font-weight:700;margin:4px 0}
.bl-price small{font-size:14px;font-weight:400;color:var(--slate)}
.bl-error{color:#8a1c17;font-weight:600}
#bl-checkout{margin-top:16px;min-height:200px}
@media (max-width:640px){.bl-actions .btn{width:100%;text-align:center}.bl-inline{margin:8px 0 0;display:block}}
/* end W26 */

/* W25 */
.ac-page{padding-bottom:32px}
.ac-form{max-width:480px}
.ac-card{max-width:640px;margin:0 0 20px}
.ac-card h2{margin-top:0;font-size:20px}
.ac-error-summary{border:2px solid var(--red);background:#fff8f7;border-radius:12px;padding:12px 16px;margin:0 0 20px;max-width:640px}
.ac-error-summary:focus{outline:3px solid var(--blue);outline-offset:2px}
.ac-error-summary h2{margin:0 0 6px;font-size:17px;color:#a3201b}
.ac-error-summary ul{margin:0;padding-left:20px}
.ac-field-error{color:#a3201b;font-weight:600;margin:6px 0 0;font-size:15px}
.ac-links{margin:16px 0}
.ac-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 16px}
.ac-facts dt{font-weight:600}
.ac-facts dd{margin:0;overflow-wrap:anywhere}
.ac-key,.ac-uri{overflow-wrap:anywhere;word-break:break-all}
.ac-key{font-size:18px;letter-spacing:.04em}
.ac-codes{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:420px}
.ac-codes code{display:block;padding:8px 10px;background:#f1f6fb;border:1px solid var(--line);border-radius:8px;font-size:16px}
.ac-org-table{width:100%;border-collapse:collapse;margin:0 0 24px}
.ac-org-table th,.ac-org-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.ac-org-table th{font-size:14px;color:var(--slate)}
.ac-table-wrap{overflow-x:auto}
@media (max-width:420px){.ac-facts{grid-template-columns:1fr}.ac-codes{grid-template-columns:1fr}}
/* end W25 */
/* W33 browser and accessibility check of the fourth-wave screens. Each rule says what it fixes. */
/* Buttons made from <button> were 41px high (links 45px): tap targets are at least 44px. */
.btn,.nav-toggle{min-height:44px}
/* Scrollable regions and evidence blocks reached by keyboard (tabindex) need the same visible ring as links and buttons. */
[tabindex="0"]:focus-visible,textarea:focus-visible,details>summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
[tabindex="-1"]:focus{outline:3px solid var(--blue);outline-offset:2px}
/* Native selects were drawn about 20px high with no border: same look and size as the text fields. */
select{min-height:44px;padding:8px 10px;border:1px solid #b9c9d9;border-radius:10px;font:inherit;background:#fff;max-width:100%}
.rc-form select,.hl-filter-form select{min-height:44px}
.mn-radio{min-height:44px}
.mn-nav a,.mn-range a{display:inline-flex;align-items:center;min-height:44px}
.chip{display:inline-flex;align-items:center;min-height:44px}
/* The alert count sat on its own row under the Monitoring tab (the tab link style made it a block). Keep it beside the tab, as a pill. */
.hl-tabs li{display:flex;align-items:center;gap:4px}
.hl-tabs .mn-badge{display:inline-flex;align-items:center;min-height:44px;padding:4px 12px;margin:0;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:15px;white-space:nowrap}
.hl-tabs .mn-badge:hover{background:#eef6ff}
/* In a flex pill the space between "Alerts" and the count is dropped: restore it with a gap. */
.mn-badge{gap:4px}
.mn-badge-mark{margin-right:2px}
/* Recipe source links were 19px high with no spacing (WCAG 2.2 target size). */
.rc-body li a{display:inline-block;min-height:24px;padding:3px 0}
/* The billing usage table pushed the page 7px past a 320px screen: let cells wrap and tighten the padding on narrow screens. */
.bl-table th,.bl-table td{overflow-wrap:anywhere}
@media (max-width:420px){.bl-table th,.bl-table td{padding:8px 6px}.bl-table{font-size:15px}}
/* "Go to your websites" and the plan link ran together and wrapped under each other. */
.bl-return-next{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.bl-return-next[hidden]{display:none}
/* The breadcrumb touched the header on the checkout page. */
.bl-page .crumbs{padding-top:20px;margin-bottom:0}
/* The "Results by area" table was cut off at 320px (the Failing column was out of sight): less padding and smaller header type on small screens. */
@media (max-width:420px){.rp-doc{padding:16px}.rp-table th,.rp-table td{padding:8px 6px;font-size:13px;letter-spacing:0}}
/* The skip link was 41px high once focused. */
.skip{padding:12px 14px}
/* Open phone menu: the Menu button touched the top edge of the screen and the text links were 23px high. */
@media (max-width:640px){.bar{padding-top:12px;padding-bottom:12px}.nav{padding-bottom:0}.nav.open a:not(.btn){padding:11px 0}}
/* end W33 */

/* W36 */
.lg-page{padding-bottom:40px}
.lg-banner{margin-top:20px;font-size:16px}
.lg-nav ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:8px 0 20px}
.lg-nav a,.lg-nav [aria-current]{display:inline-block;padding:6px 0}
.lg-nav [aria-current]{font-weight:700;border-bottom:3px solid var(--blue)}
.lg-article{max-width:800px}
.lg-article section{margin:0 0 28px}
.lg-article h2{font-size:22px;margin:0 0 8px}
.lg-article h3{font-size:18px;margin:18px 0 6px}
.lg-article p,.lg-article li{overflow-wrap:anywhere}
.lg-ph{background:#fff7dc;border:1px dashed #8a6500;border-radius:6px;padding:1px 6px;font-weight:600;overflow-wrap:anywhere}
.lg-table-wrap{overflow-x:auto;margin:8px 0 16px}
.lg-table-wrap:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.lg-table caption{text-align:left;font-weight:700;padding:8px 12px}
.lg-table tbody th{background:#fff;color:var(--ink);font-size:15px;text-transform:none;letter-spacing:0}
.lg-table code{overflow-wrap:anywhere}
#cookie-table{min-width:880px}
.lg-consent{margin:16px 0 0}
/* end W36 */

/* W38 */
/* Placed pictures. Every picture has width and height attributes, so the space is reserved before it loads. Nothing animates. */
.pic{margin:0 0 16px}
.pic img{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.pic.pg-figure figcaption{margin-top:6px}
/* One small status or step picture, kept narrow so it never pushes the form far down. */
.pic-state{max-width:320px}
.pic-wide{max-width:960px;margin:12px 0 8px}
.pic-methods{max-width:640px}
.pic-hero{max-width:960px;margin:8px 0 20px}
.pic-a11y{max-width:560px;margin:8px 0 20px}
/* Home, How it works: four example pictures in the same columns as the step list. */
.pic-how{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 12px}
.pic-how .pg-figure{min-width:0}
@media (max-width:900px){.pic-how{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pic-how{grid-template-columns:1fr}}
/* Links and Log: a small picture beside the heading and intro. */
.pic-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.pic-head>:first-child{min-width:0;flex:1 1 auto}
.pic-head-art{flex:0 0 200px;width:200px;margin:0}
.pic-head-art figcaption{font-size:12px}
@media (max-width:480px){.pic-head-art{flex-basis:112px;width:112px}.pic-head-art figcaption .demo-tag{font-size:10px;padding:2px 6px}}
/* Security: the sessions picture sits beside the sign-out text. */
.pic-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pic-row>div:first-child{flex:1 1 260px;min-width:0}
.pic-row-art{flex:0 0 200px;width:200px;margin:0}
@media (max-width:480px){.pic-row-art{flex-basis:100%;width:100%;max-width:240px}}
.ac-card .pic-state{max-width:280px}
/* Sign in: artwork beside the form on wide screens only. Below 900px it is not displayed, and being lazy it is not downloaded. */
.pic-side{display:none}
@media (min-width:900px){
 .pic-side-layout{display:grid;grid-template-columns:minmax(0,480px) minmax(0,400px);gap:56px;align-items:start}
 .pic-side{display:block;margin:0}
 .pic-side img{border:0}
}
@media print{.pic{display:none!important}}
/* end W38 */