/* SEO landing pages (scripts/seo-atlas): look-alikes of Google Search, Search Console,
   PageSpeed Insights, Maps, Keyword Planner... drawn in CSS/SVG. Screens are always light,
   whatever the site theme, exactly like the real products. Sample data only. */

.sa{
container-type:inline-size;
--ink:#202124;--mut:#5f6368;--line:#dadce0;--soft:#f1f3f4;--blue:#1a73e8;--link:#1a0dab;
--good:#0d9f55;--warn:#f9ab00;--bad:#d93025;--org:#e8710a;--purple:#7248b9;--teal:#00796b;
display:block;background:#fff;color:var(--ink);font:13px/1.45 Arial,"Helvetica Neue",Helvetica,sans-serif;letter-spacing:0;text-align:left;
:is(*,::before,::after){box-sizing:border-box}
:is(b,strong){font-weight:600}
:is(i,em,s){font-style:normal;text-decoration:none}
:is(ul,ol){margin:0;padding:0;list-style:none}
:is(p,dl,dd){margin:0}
:where(h3,h4){margin:0;font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.ico{width:16px;height:16px;flex:none}
}
.sa-w .mk-page{padding:0}
.sa-ph .mk-scr{padding:0;gap:0}
.sa-ph .mk-status{padding:9px 16px 0}

/* ---------- small parts ---------- */
.sa{
.sa-fav{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid #dadce0;border-radius:50%;background:#f1f3f4;font-size:12px;font-weight:700;color:#5f6368;
&.is-ours{border-color:#d9c3a4;background:#f6e9d6;color:#7a4b24}
&.is-b{border-color:#c6d4ea;background:#e7eef8;color:#424f84}
&.is-g{border-color:#c3dfcb;background:#e5f3e9;color:#2f6a43}
&.is-r{border-color:#ecc7c3;background:#fbe9e7;color:#9a3a32}
}
.sa-stars{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#5f6368;
.sa-st{position:relative;letter-spacing:1px;font-size:12px;color:#f9ab00}
.sa-st s{color:#dadce0}
.sa-rv{color:#202124}
}
.sa-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:11.5px;line-height:1.5;color:#3c4043;white-space:nowrap;
&.is-g{border-color:#b7e1c6;background:#e6f4ea;color:#137333}
&.is-y{border-color:#fde293;background:#fef7e0;color:#8a5b00}
&.is-r{border-color:#f5b8b3;background:#fce8e6;color:#b3261e}
&.is-b{border-color:#c2d7f8;background:#e8f0fe;color:#185abc}
}
.sa-logo{display:inline-block;font:700 24px/1 "Trebuchet MS",Arial,sans-serif;letter-spacing:-1px;
& i:nth-child(1),& i:nth-child(4){color:#4285f4}
& i:nth-child(2),& i:nth-child(6){color:#ea4335}
& i:nth-child(3){color:#fbbc05}
& i:nth-child(5){color:#34a853}
}
.sa-dot{flex:none;display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;border-radius:50%;background:#e8710a;font-size:10px;font-weight:700;line-height:1;color:#fff;vertical-align:2px;box-shadow:0 0 0 2px #fff}
.sa-legend{display:grid;gap:7px;margin:0;padding:0;list-style:none;
& li{display:flex;align-items:flex-start;gap:8px;font-size:inherit}
.sa-dot{margin:2px 0 0;box-shadow:none}
}
.sa-note{margin:0;padding:8px 12px;background:#fef7e0;border-top:1px solid #fde293;font-size:11.5px;color:#7a5200}
}

/* ---------- charts ---------- */
.sa{
.sa-chart{position:relative}
.sa-chart svg{display:block;width:100%;overflow:visible}
.sa-grid path{fill:none;stroke:#e8eaed;stroke-width:1;vector-effect:non-scaling-stroke}
.sa-ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sa-fill{opacity:.1}
.sa-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:#80868b}
.sa-cols{display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid #dadce0}
.sa-col{flex:1;display:flex;flex-direction:column;min-width:0;border-radius:2px 2px 0 0;overflow:hidden}
.sa-col i{display:block}
.sa-gauge{position:relative;display:inline-grid;place-items:center;width:var(--s,64px);height:var(--s,64px);
& svg{position:absolute;inset:0;width:100%;height:100%}
.bg{fill:none;stroke:#e8eaed;stroke-width:5}
.fg{fill:none;stroke-width:5;stroke-linecap:round}
& b{font-size:calc(var(--s,64px) * .34);font-weight:400;line-height:1}
& em{position:absolute;top:100%;left:50%;translate:-50% 4px;font-size:11px;color:#202124;white-space:nowrap}
&.is-g{color:#0cce6b}
&.is-y{color:#ffa400}
&.is-r{color:#ff4e42}
&.is-g .fg{stroke:#0cce6b}
&.is-y .fg{stroke:#ffa400}
&.is-r .fg{stroke:#ff4e42}
&.is-g b{color:#0a8f4a}
&.is-y b{color:#c26e00}
&.is-r b{color:#d93025}
}
.sa-dist{display:flex;height:8px;gap:2px;overflow:hidden;border-radius:4px;
& i{display:block;min-width:2px}
.g{background:#0cce6b}
.y{background:#ffa400}
.r{background:#ff4e42}
}
.sa-map{position:relative;display:block;overflow:hidden;background:#e5e3df;
& svg{position:absolute;inset:0;width:100%;height:100%}
.land{fill:#f2efe9}
.water{fill:#aadaff}
.park{fill:#c8e6b9}
.road{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.road.main{stroke:#fbd68a;stroke-width:3.4}
.sa-pin{position:absolute;display:grid;place-items:center;width:16px;height:16px;margin:-16px 0 0 -8px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#ea4335;font-size:0;box-shadow:0 1px 2px #0004;
&::after{content:"";width:6px;height:6px;border-radius:50%;background:#a52714}
&.is-ours{width:20px;height:20px;margin:-20px 0 0 -10px;background:#1a73e8;&::after{background:#fff;width:7px;height:7px}}
}
}
}


/* ---------- Google search page ---------- */
.sa{
.sa-top{display:flex;align-items:center;gap:20px;padding:16px 20px 12px}
.sa-bar{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid #dfe1e5;border-radius:24px;box-shadow:0 1px 6px #20212424;font-size:14px;color:#202124;
> span:first-of-type{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ico{color:#9aa0a6}
}
.sa-bar-x{display:flex;gap:10px;color:#4285f4}
.sa-tabs{display:flex;gap:22px;padding:0 20px;overflow:hidden;border-bottom:1px solid #dadce0;font-size:13px;color:#5f6368;white-space:nowrap;
> *{padding:6px 0 10px}
& b{font-weight:400;color:#1a73e8;box-shadow:inset 0 -3px #1a73e8}
}
.sa-serp{display:grid;gap:26px;padding:0 20px 20px;&.has-aside{grid-template-columns:minmax(0,1fr) 250px}}
.sa-serp-main{display:grid;gap:20px;min-width:0;align-content:start}
.sa-count{margin:2px 0 -6px;padding-top:12px;font-size:12.5px;color:#70757a}
.sa-r{display:grid;gap:4px;min-width:0}
.sa-r-top{display:flex;align-items:center;gap:10px;min-width:0;
> span{display:grid;min-width:0;line-height:1.3}
& b{font-size:14px;font-weight:400;color:#202124}
& em{overflow:hidden;font-size:12px;color:#4d5156;white-space:nowrap;text-overflow:ellipsis}
}
.sa-r-main{display:flex;gap:14px;align-items:flex-start}
.sa-r-body{flex:1;min-width:0;display:grid;gap:3px}
.sa-r-thumb{flex:none;width:84px;height:84px;border-radius:8px}
.sa-r-t{margin:0;font-size:20px;font-weight:400;line-height:1.3;color:#1a0dab}
.sa-r-d{margin:0;font-size:14px;line-height:1.58;color:#4d5156;
& b{font-weight:700;color:#3c4043}
& time{color:#70757a}
}
.sa-r-x{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;font-size:13px;color:#4d5156}
.sa-r.is-ours{padding:10px 12px;margin:-10px -12px;border-radius:10px;background:#f8fbff;box-shadow:inset 3px 0 #1a73e8}
.sa-r-sl{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;margin-top:6px;padding-left:2px;
& div{display:grid;gap:1px;min-width:0}
& b{font-size:15.5px;font-weight:400;color:#1a0dab}
& p{margin:0;overflow:hidden;font-size:12.5px;color:#4d5156;white-space:nowrap;text-overflow:ellipsis}
}
.sa-r-faq{display:grid;margin-top:4px;border-top:1px solid #ebedf0;
> li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid #ebedf0;font-size:13.5px;color:#202124}
.ico{color:#70757a;rotate:90deg}
}
.sa-img{display:block;position:relative;overflow:hidden;background:#efe6da;
.shot{display:block;width:100%;height:100%;object-fit:cover}
}
.sa-box{display:grid;gap:8px;padding:12px 14px;border:1px solid #dadce0;border-radius:12px;min-width:0}
.sa-box-t{margin:0;font-size:16px;font-weight:400;color:#202124}
.sa-fs-a{margin:0;font-size:14.5px;line-height:1.55}
.sa-fs-steps{display:grid;gap:3px;margin:0 0 4px;padding-left:22px;list-style:decimal;font-size:14.5px;line-height:1.5;
& li::marker{color:#5f6368}
}
.sa-ask{gap:0;padding:12px 14px 4px;
.sa-box-t{padding-bottom:8px}
}
.sa-ask-r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #ebedf0;font-size:14px;
.ico{color:#70757a;rotate:90deg}
}
.sa-prods-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sa-pc{display:grid;gap:2px;align-content:start;min-width:0;padding:8px;border:1px solid #ebedf0;border-radius:10px;font-size:12.5px;
.sa-img{aspect-ratio:1/1;margin-bottom:6px;border-radius:6px}
& b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;font-weight:400;line-height:1.3;color:#1a0dab}
& strong{font-size:14px;font-weight:700}
& em{overflow:hidden;color:#70757a;white-space:nowrap;text-overflow:ellipsis}
}
.sa-pack-in{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;
.sa-map{min-height:190px;border-radius:8px}
}
.sa-pack-l{display:grid;gap:10px;min-width:0}
.sa-pk{display:grid;gap:1px;padding-bottom:10px;border-bottom:1px solid #ebedf0;font-size:12.5px;
&:last-child{padding-bottom:0;border-bottom:0}
& b{font-size:15px;font-weight:400;color:#1a0dab}
& em{color:#4d5156}
.is-cl{color:#b3261e}
.is-op{color:#137333}
&.is-ours b{font-weight:700}
}
.sa-pk-b{display:flex;gap:6px;margin-top:4px;
& i{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid #dadce0;border-radius:14px;font-size:11.5px;color:#1a73e8}
.ico{width:12px;height:12px}
}
.sa-kp{display:grid;gap:6px;align-content:start;padding:0 0 12px;border:1px solid #dadce0;border-radius:12px;overflow:hidden;font-size:13px;
.sa-kp-ph{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:60px 60px;gap:2px}
.sa-kp-ph .sa-img:first-child{grid-row:1/3}
& h3{margin:6px 14px 0;font-size:20px;font-weight:400}
& p{margin:0 14px;color:#5f6368}
.sa-r-x{margin:0 14px}
& dl{display:grid;gap:7px;margin:6px 14px 0}
& dl div{display:flex;gap:8px;align-items:baseline}
& dt{flex:none;width:76px;font-weight:700;font-size:12.5px}
& dd{margin:0;min-width:0}
}
.sa-kp-b{display:flex;gap:6px;margin:4px 14px;
& i{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid #dadce0;border-radius:16px;font-size:12px;color:#1a73e8}
.ico{width:13px;height:13px}
}
}

/* the phone page */
.sa-ph .sa{display:grid;align-content:start;min-height:100%;gap:0;font-size:12.5px;
.sa-top{padding:6px 12px 8px;gap:0}
.sa-bar{padding:8px 12px;font-size:13px}
.sa-tabs{gap:16px;padding:0 12px;font-size:12px}
.sa-serp-main{gap:16px;padding:10px 12px 0}
.sa-r{gap:3px}
.sa-r-t{font-size:16px;line-height:1.28}
.sa-r-d{font-size:12.5px;line-height:1.5}
.sa-r-top{gap:8px;& b{font-size:12.5px}& em{font-size:11px}}
.sa-fav{width:22px;height:22px;font-size:11px}
.sa-r-thumb{width:64px;height:64px}
.sa-r-sl{grid-template-columns:1fr;& b{font-size:14px}}
.sa-r.is-ours{margin:-8px -8px;padding:8px}
.sa-box{padding:10px 12px}
.sa-prods-row{grid-template-columns:repeat(3,96px);overflow:hidden}
.sa-pack-in{grid-template-columns:1fr;& .sa-map{min-height:90px}}
}

@container (max-width:560px){
.sa .sa-serp.has-aside{grid-template-columns:minmax(0,1fr)}
.sa .sa-kp{display:none}
.sa .sa-r-t{font-size:17px}
.sa .sa-r-sl{grid-template-columns:1fr}
.sa .sa-prods-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .sa-prods-row .sa-pc:nth-child(3){display:none}
.sa .sa-pack-in{grid-template-columns:1fr;.sa-map{min-height:110px}}
}


/* ---------- Search Console ---------- */
.sa{
.sa-gtop{display:flex;align-items:center;gap:14px;padding:9px 14px;border-bottom:1px solid #dadce0;background:#fff}
.sa-gbrand{display:flex;align-items:center;gap:8px;font-size:16px;color:#5f6368;white-space:nowrap;
& i{width:20px;height:20px;border-radius:5px;background:linear-gradient(135deg,#4285f4 0 50%,#34a853 50%);box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 20px #4285f4}
& b{font-weight:400}
}
.sa-gprop{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #dadce0;border-radius:8px;font-size:12.5px;white-space:nowrap;
.ico{width:11px;height:11px;rotate:90deg}
}
.sa-gsearch{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:8px;background:#f1f3f4;color:#5f6368;font-size:12.5px;
& em{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
.sa-gav{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#34a853;font-size:12px;font-weight:700;color:#fff}
.sa-gbody{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:340px;background:#f8f9fa}
.sa-gnav{display:grid;align-content:start;gap:1px;padding:8px 8px 8px 0;background:#fff;border-right:1px solid #ebedf0}
.sa-gn{display:flex;align-items:center;gap:12px;min-width:0;padding:8px 14px;border-radius:0 18px 18px 0;font-size:12.5px;color:#3c4043;
& em{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
&.is-sub{padding-left:46px}
&.is-head{color:#5f6368}
&.is-on{background:#e8f0fe;color:#1967d2;font-weight:600}
.ico{color:#5f6368}
&.is-on .ico{color:#1967d2}
}
.sa-gmain{display:grid;gap:12px;align-content:start;min-width:0;padding:14px 16px 18px}
.sa-ghead{display:flex;justify-content:space-between;align-items:center;gap:12px;
& h3{font-size:19px;font-weight:400}
& span{font-size:12px;color:#1a73e8}
}
.sa-gc{min-width:0;border:1px solid #dadce0;border-radius:8px;background:#fff;overflow:hidden}
.sa-gf{display:flex;flex-wrap:wrap;gap:8px;
& span{padding:4px 12px;border:1px solid #dadce0;border-radius:16px;background:#fff;font-size:12px;color:#3c4043}
}
.sa-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sa-kpi{display:grid;gap:2px;padding:10px 12px 8px;background:#f8f9fa;color:#5f6368;
& em{font-size:11.5px;line-height:1.25}
& b{font-size:23px;font-weight:400;line-height:1.2;color:#80868b}
&.is-on{color:#fff}
&.is-on b{color:#fff}
&.is-on.is-b{background:#4285f4}
&.is-on.is-p{background:#7248b9}
&.is-on.is-t{background:#00897b}
&.is-on.is-o{background:#e8710a}
}
.sa-gchart{padding:12px 14px 10px}
.sa-gtabs{display:flex;gap:18px;padding:0 14px;border-bottom:1px solid #ebedf0;font-size:12.5px;color:#5f6368;white-space:nowrap;overflow:hidden;
> *{padding:10px 0 9px}
& b{font-weight:400;color:#1a73e8;box-shadow:inset 0 -3px #1a73e8}
}
.sa-gt{width:100%;border-collapse:collapse;font-size:12.5px;
& th{padding:9px 10px 9px 12px;border-bottom:1px solid #ebedf0;font-size:11.5px;font-weight:600;color:#5f6368;text-align:right;white-space:nowrap}
& td{padding:9px 10px 9px 12px;border-bottom:1px solid #f1f3f4;text-align:right;white-space:nowrap}
& :is(th,td):first-child{width:100%;max-width:1px;overflow:hidden;text-align:left;text-overflow:ellipsis}
& tr:last-child td{border-bottom:0}
}
.sa-gt-s td{padding:7px 14px}
.sa-gh{margin:0;padding:11px 14px 4px;font-size:13px;font-weight:600}
.sa-gsum{display:flex;gap:28px;padding:12px 14px 4px;
& span{display:grid;gap:0;font-size:12px;color:#5f6368}
& b{font-size:26px;font-weight:400;line-height:1.15}
& i{font-size:11.5px}
.is-bad b{color:#5f6368}
.is-good b{color:#188038}
& span{border-left:4px solid #9aa0a6;padding-left:10px}
& .is-good{border-color:#34a853}
}
.sa-gc > .sa-cols,.sa-gc > .sa-axis{margin:8px 14px 0}
.sa-gc > .sa-axis{margin-bottom:10px}
.sa-st-r{color:#d93025}
.sa-st-y{color:#b06000}
.sa-st-g{color:#188038}
.sa-legendline{display:flex;align-items:center;gap:6px;padding:10px 14px 0;font-size:11.5px;color:#5f6368;
& i{width:10px;height:10px;border-radius:2px}
& .r{background:#ff4e42}
& .y{background:#ffa400;margin-left:8px}
& .g{background:#0cce6b;margin-left:8px}
}
.sa-iurl{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid #dadce0;border-radius:8px;background:#fff;font-size:12.5px;
& span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ico{color:#5f6368}
}
.sa-iv{display:flex;gap:12px;padding:14px;border-bottom:1px solid #ebedf0;
& b{font-size:15px;font-weight:600}
& p{margin:2px 0 0;font-size:12.5px;color:#5f6368}
.ico{width:26px;height:26px}
&.is-ok .ico{color:#188038}
&.is-no .ico{color:#e37400}
}
.sa-ibody{display:grid}
.sa-ir{display:flex;justify-content:space-between;gap:14px;padding:8px 14px;border-bottom:1px solid #f1f3f4;font-size:12.5px;
& span{color:#5f6368;min-width:0}
& b{font-weight:400;text-align:right;min-width:0;overflow-wrap:anywhere}
& .is-g{color:#188038}
& .is-y{color:#b06000}
&:last-child{border-bottom:0}
}
.sa-iact{display:flex;gap:10px;
& span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid #dadce0;border-radius:16px;background:#fff;font-size:12px;color:#1a73e8}
.ico{width:13px;height:13px}
}
.sa-gtwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sa-sm-add{display:flex;align-items:center;gap:12px;padding:6px 14px 14px;
& span{flex:1;min-width:0;padding:8px 12px;border:1px solid #dadce0;border-radius:6px;font-size:12.5px;color:#5f6368}
& span b{font-weight:400;color:#202124}
& i{padding:7px 18px;border-radius:16px;background:#1a73e8;font-size:12px;font-weight:600;color:#fff}
}
}
@container (max-width:620px){
.sa .sa-gbody{grid-template-columns:44px minmax(0,1fr)}
.sa .sa-gn{justify-content:center;padding:9px 0;border-radius:0 16px 16px 0}
.sa .sa-gn em{display:none}
.sa .sa-gn.is-sub{display:none}
.sa .sa-gsearch em{display:none}
.sa .sa-gtwo{grid-template-columns:1fr}
.sa .sa-kpi b{font-size:19px}
.sa .sa-gt :is(th,td){padding-inline:9px}
.sa .sa-gt :is(th,td):nth-child(3){display:none}
.sa .sa-gc:has(> .sa-gt.keep){overflow-x:auto}
.sa .sa-gc{overflow-x:auto}
.sa .sa-axis span{white-space:nowrap}
.sa .sa-axis span:nth-child(even){display:none}
.sa .sa-gt.keep{min-width:460px}
.sa .sa-gt.keep :is(th,td):first-child{min-width:170px}
.sa .sa-gt :is(th,td):first-child{min-width:96px}
}

/* ---------- PageSpeed Insights ---------- */
.sa{
.sa-ps-url{display:flex;gap:10px;padding:14px 14px 8px;
& span{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #dadce0;border-radius:24px;font-size:12.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
& i{padding:9px 18px;border-radius:20px;background:#1a73e8;font-size:12.5px;font-weight:600;color:#fff}
.ico{color:#5f6368}
}
.sa-ps-tabs{padding:0 14px}
.sa-ps-in{display:grid;gap:10px;padding:12px 14px 16px;background:#f8f9fa;
& section{padding:12px 14px;border:1px solid #dadce0;border-radius:8px;background:#fff;min-width:0}
& h4{margin:0 0 8px;font-size:13px;font-weight:600}
}
.sa-ps-v{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:600;
&.is-g{color:#137333}
&.is-r{color:#c5221f}
.ico{width:20px;height:20px}
}
.sa-pfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sa-pf{display:grid;gap:4px;align-content:start;
& b{font-size:12px;font-weight:600;color:#3c4043}
& strong{font-size:22px;font-weight:400;line-height:1.15}
.is-g{color:#0a8f4a}
.is-y{color:#c26e00}
.is-r{color:#d93025}
}
.sa-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;padding:4px 0 32px;
.sa-gauge em{width:max-content;max-width:96px;white-space:normal;text-align:center;line-height:1.2}
}
.sa-ps-m ul,.sa-ps-o ul{display:grid;gap:0}
.sa-ps-m li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #f1f3f4;font-size:12.5px;
& span{flex:1;min-width:0}
& b{font-weight:400}
& i{flex:none;width:9px;height:9px}
& i.is-g{border-radius:50%;background:#0cce6b}
& i.is-y{background:#ffa400}
& i.is-r{background:#ff4e42;clip-path:polygon(50% 0,100% 100%,0 100%)}
& b.is-g{color:#0a8f4a}
& b.is-y{color:#c26e00}
& b.is-r{color:#d93025}
}
.sa-ps-o li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #f1f3f4;font-size:12.5px;
& span{min-width:0}
& em{flex:none;padding:1px 8px;border-radius:10px;background:#fce8e6;font-size:11px;color:#b3261e;align-self:flex-start;white-space:nowrap}
}
}

/* ---------- Google Trends ---------- */
.sa{
.sa-tr{display:grid;gap:10px;padding-bottom:14px;background:#f8f9fa;
& > .sa-gc{margin:0 14px}
}
.sa-tr-h{display:flex;align-items:baseline;gap:14px;padding:10px 14px;background:#fff;border-bottom:1px solid #dadce0;
& b{font-size:16px;font-weight:400;color:#5f6368}
& span{font-size:12.5px;color:#1a73e8}
}
.sa-tr-terms{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:2px 14px 0;
& span{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid #dadce0;border-radius:16px;background:#fff;font-size:12.5px}
& i{width:10px;height:10px;border-radius:50%}
& i.a{background:#4285f4}
& i.b{background:#ea4335}
& em{margin-left:auto;font-size:11.5px;color:#70757a}
}
.sa-tr-rel ol{display:grid;padding-bottom:4px}
.sa-tr-rel li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:6px;padding:7px 14px;border-top:1px solid #f1f3f4;font-size:12.5px;
& b{font-weight:400;color:#80868b}
& em{font-size:11.5px;color:#188038}
}
}

/* ---------- Analytics 4 ---------- */
.sa{
.sa-ga-top{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #dadce0;font-size:12.5px;color:#5f6368;
& i{flex:none;width:18px;height:20px;background:linear-gradient(#e37400 0 0) 100% 100%/30% 100% no-repeat,linear-gradient(#f9ab00 0 0) 50% 100%/30% 64% no-repeat,linear-gradient(#f9ab00 0 0) 0 100%/30% 34% no-repeat;border-radius:2px}
& b{font-size:15px;font-weight:400;color:#3c4043}
& span{margin-left:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
.sa-ga-body{display:grid;grid-template-columns:44px minmax(0,1fr);background:#f8f9fa}
.sa-ga-body nav{display:grid;gap:4px;align-content:start;padding:10px 6px;background:#fff;border-right:1px solid #ebedf0;
& span{display:grid;place-items:center;height:34px;border-radius:17px;color:#5f6368}
& .is-on{background:#e8f0fe;color:#1967d2}
}
.sa-ga-main{display:grid;gap:10px;align-content:start;min-width:0;padding:12px 14px 16px;
& h3{font-size:17px;font-weight:400}
}
.sa-ga-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #ebedf0;
& span{display:grid;gap:1px;padding:10px 14px}
& em{font-size:11.5px;color:#5f6368}
& b{font-size:21px;font-weight:400;line-height:1.2}
}
.sa-gt tr.is-hi td{background:#f3f7fe;font-weight:600}
.sa-gt.keep :is(th,td):nth-child(3){display:table-cell}
}

/* ---------- Keyword Planner ---------- */
.sa{
.sa-kp2{display:grid;gap:10px;padding-bottom:14px;background:#f8f9fa;
& > .sa-gf,& > .sa-gc{margin:0 14px}
}
.sa-kp2-top{display:flex;align-items:baseline;gap:16px;padding:11px 14px;background:#fff;border-bottom:1px solid #dadce0;
& b{font-size:15px;font-weight:400}
& span{font-size:12.5px;color:#1a73e8;box-shadow:inset 0 -2px #1a73e8;padding-bottom:3px}
}
}

/* ---------- Spreadsheet ---------- */
.sa{
.sa-sh-top{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #dadce0;
& i{flex:none;width:17px;height:23px;border-radius:3px;background:#188038;box-shadow:inset 0 -9px 0 #fff2,inset 0 0 0 4px #188038,inset 0 0 0 5px #fff9}
& b{font-size:14px;font-weight:400;white-space:nowrap}
& span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;color:#5f6368}
}
.sa-sh-grid{overflow:hidden;background:#fff;
& table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px}
& th,& td{padding:4px 9px;border:1px solid #e2e3e3;white-space:nowrap;text-align:left;max-width:230px;overflow:hidden;text-overflow:ellipsis}
& thead tr:first-child th{background:#f8f9fa;font-size:11px;font-weight:400;color:#5f6368;text-align:center}
& tbody th{width:30px;background:#f8f9fa;font-size:11px;font-weight:400;color:#5f6368;text-align:center}
& .sa-sh-h th{background:#f1f3f4;font-weight:700;color:#202124;text-align:left}
& .sa-sh-h th:first-child{text-align:center;background:#f8f9fa;color:#5f6368;font-weight:400}
& td.r{text-align:right}
& td .sa-chip{padding:0 8px;font-size:11px}
}
.sa-sh-tabs{display:flex;padding:0 8px;border-top:1px solid #dadce0;background:#f1f3f4;font-size:12px;color:#5f6368;
& > *{padding:8px 14px 9px}
& b{background:#fff;color:#137333;font-weight:600;box-shadow:inset 0 -2px #188038}
}
}

/* ---------- Intent board ---------- */
.sa{
.sa-ib{background:#f8f9fa}
.sa-ib-top{padding:11px 14px;background:#fff;border-bottom:1px solid #dadce0;
& b{font-size:14px;font-weight:600}
}
.sa-ib-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 14px 14px}
.sa-ib-c{display:grid;gap:5px;align-content:start;padding:9px 8px 10px;border:1px solid #dadce0;border-top:4px solid #9aa0a6;border-radius:8px;background:#fff;
& h4{margin:0 0 3px;font-size:12.5px;font-weight:600}
& p{padding:5px 7px;border-radius:5px;background:#f1f3f4;font-size:11.5px;line-height:1.35}
& em{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;color:#5f6368}
& em .ico{width:12px;height:12px}
&.is-b{border-top-color:#4285f4}
&.is-y{border-top-color:#fbbc05}
&.is-g{border-top-color:#34a853}
&.is-r{border-top-color:#ea4335}
}
}

/* ---------- Site crawl ---------- */
.sa{
.sa-cr{padding-bottom:14px;background:#f8f9fa;
& > .sa-gc{margin:8px 14px 0}
.sa-gsum{background:#fff;padding-bottom:12px;border-bottom:1px solid #dadce0}
.is-bad{border-color:#e37400}
.sa-gt :is(th,td):nth-child(n+3){text-align:left}
}
}

/* ---------- Code window ---------- */
.sa{
.sa-code{background:#1e1e1e;color:#d4d4d4;
.sa-note{background:#2a2a2a;border-color:#3c3c3c;color:#e8c36a}
}
.sa-code-tab{display:flex;background:#252526;
& span{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-top:2px solid #4285f4;background:#1e1e1e;font-size:12px;color:#fff}
.ico{width:13px;height:13px;color:#9cdcfe}
}
.sa-code pre{margin:0;padding:10px 0 12px;font:12px/1.7 Consolas,"SFMono-Regular","Courier New",monospace;overflow:hidden}
.sa-ln-r{display:flex;gap:14px;padding-right:14px;
& u{flex:none;width:36px;text-align:right;text-decoration:none;color:#6e7681}
& code{min-width:0;font:inherit;white-space:pre;overflow:hidden;text-overflow:ellipsis}
&.is-mark{background:#2f3a6d;box-shadow:inset 3px 0 #f9ab00}
}
.sa-code .t{color:#569cd6}
.sa-code .a{color:#9cdcfe}
.sa-code .s{color:#ce9178}
.sa-code .c{color:#6a9955}
.sa-code .n{color:#b5cea8}
}

/* ---------- Rich results test ---------- */
.sa{
.sa-rt-in{display:grid;gap:10px;padding:12px 14px 14px;background:#f8f9fa}
.sa-rt .sa-gtop{padding:10px 14px}
}

/* ---------- Internal link map ---------- */
.sa{
.sa-lm-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #dadce0;
& b{font-size:14px;font-weight:600}
}
.sa-lm-map{position:relative;height:270px;margin:12px 14px;border:1px solid #dadce0;border-radius:8px;background:radial-gradient(#dfe3e8 1px,transparent 1.2px) 0 0/16px 16px,#f8f9fa;
& svg{position:absolute;inset:0;width:100%;height:100%}
& path{fill:none;stroke:#9aa5b5;stroke-width:1.4;vector-effect:non-scaling-stroke}
}
.sa-lm-n{position:absolute;translate:-50% -50%;max-width:100px;padding:4px 10px;border:1px solid #c6cbd2;border-radius:14px;background:#fff;font-size:11px;line-height:1.25;text-align:center;
&.is-hub{border-color:#1a73e8;background:#1a73e8;color:#fff;font-weight:600}
&.is-cat{border-color:#c2d7f8;background:#e8f0fe;color:#185abc;font-weight:600}
&.is-post{border-color:#b7e1c6;background:#e6f4ea;color:#137333}
&.is-orphan{border:1px dashed #d93025;background:#fce8e6;color:#b3261e}
}
}

/* ---------- misc, narrow ---------- */
@container (max-width:620px){
.sa .sa-ib-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .sa-cr .sa-gt :is(th,td):nth-child(4){display:none}
.sa .sa-ps-in{padding-inline:10px}
.sa .sa-pfs{gap:8px}
.sa .sa-pf strong{font-size:19px}
.sa .sa-tr-terms em{display:none}
}
@container (max-width:470px){
.sa .sa-lm-n{max-width:62px;padding:3px 6px;font-size:10px}
.sa .sa-lm-map{height:250px}
.sa .sa-gauges .sa-gauge{--s:50px !important}
.sa .sa-ga-k b{font-size:17px}
.sa .sa-sh-top span{display:none}
}

/* ---------- Business Profile / reviews / Maps ---------- */
.sa{
.sa-bp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #dadce0}
.sa-bp-name{display:flex;align-items:center;gap:10px;min-width:0;
& b{font-size:15px;font-weight:600;white-space:nowrap}
& em{min-width:0;overflow:hidden;font-size:12px;color:#5f6368;white-space:nowrap;text-overflow:ellipsis}
}
.sa-bp-pill{flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;background:#e6f4ea;font-size:11.5px;color:#137333;
.ico{width:13px;height:13px}
}
.sa-bp-body{display:grid;gap:10px;align-content:start;padding:12px 14px 14px;background:#f8f9fa}
.sa-bp-bar{margin:6px 14px 0;height:8px;border-radius:4px;background:#e8eaed;overflow:hidden;
& i{display:block;height:100%;border-radius:4px;background:#34a853}
}
.sa-bp-hint{padding:8px 14px 12px;font-size:12px;color:#5f6368;
& b{color:#202124;font-size:13px}
}
.sa-bp-list li{display:flex;align-items:center;gap:12px;padding:9px 14px;border-top:1px solid #f1f3f4;
.ico{flex:none;color:#5f6368}
& span{flex:1;min-width:0;display:grid}
& em{font-size:11px;color:#70757a}
& b{overflow:hidden;font-size:12.5px;font-weight:400;white-space:nowrap;text-overflow:ellipsis}
& i{flex:none;font-size:12px}
& i.is-ok{color:#188038}
& i.is-todo{padding:3px 12px;border:1px solid #dadce0;border-radius:14px;color:#1a73e8}
}
.sa-bp-how{display:grid;gap:9px;padding:6px 14px 14px;
& li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 34px;align-items:center;gap:10px;font-size:12.5px}
& i{display:block;height:8px;border-radius:4px;background:#e8eaed;overflow:hidden}
& i b{display:block;height:100%;background:#4285f4}
& em{text-align:right;color:#5f6368}
}
.sa-rev{padding:12px 14px;
& p{margin:8px 0 0;font-size:12.5px;line-height:1.5}
}
.sa-rev-h{display:flex;align-items:center;gap:10px;
& > span{display:grid;gap:1px}
& > span b{font-size:13px}
& > em{margin-left:auto;font-size:11.5px;color:#70757a}
}
.sa-rev-rep{margin-top:10px;padding-left:10px;border-left:3px solid #dadce0;
& b{font-size:11.5px;color:#5f6368}
& p{margin:2px 0 0}
}
.sa-rev-act{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:#1a73e8;
.ico{width:14px;height:14px}
}
}

.sa-mp{display:grid;grid-template-rows:auto auto 150px auto;gap:0;min-height:100%;background:#fff;
.sa-mp-bar{display:flex;align-items:center;gap:10px;margin:8px 10px 6px;padding:9px 14px;border-radius:24px;background:#fff;box-shadow:0 1px 6px #20212430;font-size:13px;
.ico{color:#5f6368}
& span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
.sa-mp-chips{display:flex;gap:6px;padding:0 10px 8px;overflow:hidden;
& span{flex:none;padding:4px 11px;border:1px solid #dadce0;border-radius:14px;font-size:11.5px;color:#3c4043}
& .is-on{border-color:#c2d7f8;background:#e8f0fe;color:#185abc}
}
.sa-mp-map{position:relative;min-height:0}
.sa-mp-map .sa-map{position:absolute;inset:0}
.sa-mp-list{display:grid;background:#fff;box-shadow:0 -2px 8px #0002;position:relative;
& li{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:8px 12px;border-bottom:1px solid #ebedf0}
& li > span{display:grid;gap:1px;min-width:0}
& b{font-size:13.5px;font-weight:600;color:#1a0dab}
& em{overflow:hidden;font-size:11.5px;color:#5f6368;white-space:nowrap;text-overflow:ellipsis}
& em.is-g{color:#137333}
& em.is-r{color:#b3261e}
& li > i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e8f0fe;font-size:11px;color:#185abc}
& li.is-ours{background:#f8fbff}
& .sa-stars{font-size:11px}
}
}

.sa{
.sa-rg{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:center;padding:12px 14px;background:#f8f9fa}
.sa-rg-map{position:relative;display:block;aspect-ratio:1.25/1;border:1px solid #dadce0;border-radius:8px;overflow:hidden}
.sa-rg-art{position:absolute;inset:0;opacity:.55}
.sa-rg-g{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);padding:8px;place-items:center;
& i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:700;color:#fff;box-shadow:0 1px 2px #0003}
& i.is-ours{outline:3px solid #1a73e8;outline-offset:2px}
& i.is-g{background:#188038}
& i.is-y{background:#e8a200;color:#3a2800}
& i.is-r{background:#d93025}
}
.sa-rg-key{display:grid;gap:8px;font-size:12px;
& li{display:flex;align-items:center;gap:8px;line-height:1.3}
& i{flex:none;width:12px;height:12px;border-radius:50%}
& i.is-g{background:#188038}
& i.is-y{background:#e8a200}
& i.is-r{background:#d93025}
}
}
@container (max-width:470px){
.sa .sa-rg{grid-template-columns:1fr}
.sa .sa-bp-name em{display:none}
.sa .sa-bp-how li{grid-template-columns:minmax(0,100px) minmax(0,1fr) 34px}
}

/* ---------- CMS page editor ---------- */
.sa{
.sa-cm-top{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #dadce0;background:#fff;
& b{font-size:14px;font-weight:600;white-space:nowrap}
& span{min-width:0;overflow:hidden;font-size:12.5px;color:#5f6368;white-space:nowrap;text-overflow:ellipsis}
& i{margin-left:auto;flex:none;padding:5px 14px;border:1px solid #dadce0;border-radius:16px;font-size:12px;color:#1a73e8}
}
.sa-cm-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:#f8f9fa}
.sa-cm-doc{display:grid;gap:8px;align-content:start;padding:12px 14px;border-right:1px solid #ebedf0}
.sa-cm-lbl{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5f6368}
.sa-cm-blk{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:start;padding:9px 10px;border:1px solid #dadce0;border-radius:8px;background:#fff;
& em{display:inline-grid;place-items:center;height:20px;border-radius:4px;background:#f1f3f4;font-size:10.5px;font-weight:700;color:#5f6368}
& b{font-size:13px;font-weight:600}
& p{font-size:12.5px;line-height:1.5}
&.is-img{align-items:center;grid-template-columns:34px 44px minmax(0,1fr)}
&.is-img > span:last-child{display:grid;gap:3px;min-width:0}
&.is-img b{overflow:hidden;font-size:12px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
}
.sa-cm-ph{display:block;width:44px;height:44px;border-radius:6px;background:linear-gradient(135deg,#f0dfc8,#d9b98c)}
.sa-cm-seo{display:grid;gap:8px;align-content:start;padding:12px 14px;background:#fff}
.sa-cm-f{display:grid;gap:2px;padding:8px 10px;border:1px solid #dadce0;border-radius:8px;
& span{font-size:11px;color:#5f6368}
& b{overflow:hidden;font-size:12.5px;font-weight:400;white-space:nowrap;text-overflow:ellipsis}
& em{font-size:11px}
& em.is-g{color:#188038}
& em.is-y{color:#b06000}
& em.is-r{color:#d93025}
}
}

/* ---------- Content brief ---------- */
.sa{
.sa-bf-top{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #dadce0;
& i{flex:none;width:16px;height:22px;border-radius:3px;background:#4285f4;box-shadow:inset 0 0 0 4px #4285f4,inset 0 8px 0 4px #fff7}
& b{font-size:14px;font-weight:400;white-space:nowrap}
& span{min-width:0;overflow:hidden;font-size:11.5px;color:#5f6368;white-space:nowrap;text-overflow:ellipsis}
}
.sa-bf-page{padding:14px;background:#f1f3f4;
& article{padding:20px 26px 22px;border-radius:2px;background:#fff;box-shadow:0 1px 3px #0002}
& h3{margin:0 0 12px;font-size:17px;font-weight:700}
& h4{margin:14px 0 4px;font-size:13px;font-weight:700}
& dl{display:grid;gap:6px}
& dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;font-size:12.5px}
& dt{color:#5f6368}
& dd{margin:0}
& ol{display:grid;gap:3px;padding-left:20px;list-style:decimal;font-size:12.5px}
}
}

/* ---------- Snippet lab ---------- */
.sa-lab{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}
.sa-lab-form{display:grid;gap:12px;min-width:0}
.sa-lab-f{display:grid;gap:5px;
& label{font-size:13px;font-weight:600}
& :is(input,textarea){width:100%;padding:10px 12px;border:1px solid var(--card-line);border-radius:10px;background:#0c113c;font:inherit;font-size:14px;line-height:1.5;color:var(--text);resize:vertical}
& :is(input,textarea):focus-visible{border-color:var(--accent);outline:2px solid var(--accent-line)}
& p{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:12px}
& em{font-style:normal;font-weight:700}
& span{opacity:.7}
&[data-state=ok] em{color:#7bd88f}
&[data-state=long] em,&[data-state=short] em{color:#ffc15a}
}
.sa-lab-pre{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;
& span{opacity:.75}
& button{padding:6px 12px;border:1px solid var(--card-line);border-radius:16px;background:var(--card);font:inherit;font-size:12.5px;color:var(--text-2);cursor:pointer}
& button:hover,& button:focus-visible{border-color:var(--accent);color:var(--text);outline:none}
}
.sa-lab-out{display:grid;gap:12px;min-width:0}
.sa-lab-pv{display:grid;gap:3px;padding:14px 16px;border-radius:12px;box-shadow:0 8px 24px #0004;
.sa-lab-cap{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#80868b}
.sa-lab-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:19px}
.sa-lab-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
&.is-desk{max-width:640px}
&.is-mob{max-width:340px}
&.is-mob .sa-lab-t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:17px}
&.is-mob .sa-lab-d{-webkit-line-clamp:3;font-size:13px}
}
@media (max-width:860px){.sa-lab{grid-template-columns:1fr}}

/* ---------- Before / after pair ---------- */
.sa-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.sa-pair-c{display:grid;gap:8px;min-width:0}
.sa-pair-h{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.sa-pair-h .sa-dot{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;border-radius:50%;background:#e8710a;font-size:10px;font-weight:700;line-height:1;letter-spacing:0;color:#fff;vertical-align:2px;font-style:normal}
.sa-pair .sa-r{padding:16px 18px}
@media (max-width:760px){.sa-pair{grid-template-columns:1fr}}
@container (max-width:470px){
.sa .sa-cm-body{grid-template-columns:1fr}
.sa .sa-cm-doc{border-right:0;border-bottom:1px solid #ebedf0}
.sa .sa-bf-page dl div{grid-template-columns:1fr;gap:0}
.sa .sa-bf-page article{padding:14px 16px}
}

/* ================================================================== *
   Landing-page frame (engine.mjs / pages.mjs): thumbnails, hero cards, reading guide, board,
   roadmap, and small overrides of the Google Ads kit for the SEO pages.
 * ================================================================== */

/* ---------- Thumbnails: a screen drawn at natural width, scaled by dist/seo-atlas.js ---------- */
.sa-th{position:relative;display:block;width:100%;overflow:hidden;aspect-ratio:7/5;background:#fff;--s:.45;border-radius:8px}
.sa-th-in{position:absolute;left:0;top:0;display:block;transform-origin:0 0;transform:scale(var(--s));pointer-events:none}
.sa-th.is-pick{width:100%;flex:none;border-radius:10px 10px 0 0;box-shadow:0 14px 36px #0007,0 0 0 1px #ffffff1f}
.sa-lp .pick-art{align-items:flex-start;padding:22px 22px 0}

/* ---------- Hero: four real screens floating in depth ---------- */
.sa-lp .hero-stage.sa-stage .card3d{padding:7px;border-radius:12px}
.sa-lp .hero-stage.sa-stage .card3d .sa-th{max-height:250px;border-radius:7px}
.card3d.sa-c1{left:0;top:3%;width:60%;transform:translateZ(60px)}
.card3d.sa-c2{right:0;top:0;width:50%;transform:translateZ(120px);animation-delay:-1.6s}
.card3d.sa-c3{left:7%;bottom:2%;width:50%;transform:translateZ(95px);animation-delay:-4.6s}
.card3d.sa-c4{right:0;bottom:6%;width:42%;transform:translateZ(40px);animation-delay:-3.2s}
@media (max-width:900px){
.ga-lp .card3d.sa-c1,.ga-lp .card3d.sa-c2,.ga-lp .card3d.sa-c3,.ga-lp .card3d.sa-c4{position:relative;inset:auto;width:auto;transform:none}
.ga-lp .card3d.sa-c1,.ga-lp .card3d.sa-c4{grid-column:1/-1}
.ga-lp .card3d.sa-c2,.ga-lp .card3d.sa-c3{align-self:start}
.sa-lp .hero-stage.sa-stage .card3d .sa-th{max-height:200px}
}
@media (max-width:560px){
.sa-lp .pick-art{padding:18px 16px 0}
}

/* ---------- Workbench: body on top, the real-size screen below ---------- */
.sa-wb .wb-pane{grid-template-columns:minmax(0,1fr)}
.sa-wb .wb-body{padding:30px 34px 6px}
.sa-wb .stage{padding:40px 30px 22px}
.sa-lp .device{transform:none;max-width:100%;min-width:0}
.sa-wb .device,.sa-board-scr{max-width:880px;width:100%;margin-inline:auto}
.ga-lp .wb-list button > span.wb-val{flex:none;margin-left:auto;font-size:12px;opacity:.8}
.sa-tip{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--text-2)}
.sa-tip .ico{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent)}
@media (max-width:900px){
.sa-wb .wb-body{padding:24px 22px 4px}
.ga-lp .workbench.sa-wb{grid-template-columns:minmax(0,1fr)}
.ga-lp .sa-wb .wb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:14px;border-right:0;border-bottom:1px solid var(--edge)}
.ga-lp .sa-wb .wb-list .wb-group{grid-column:1/-1;margin:6px 4px 0}
.sa-wb .stage{padding:38px 14px 18px}
}

/* ---------- Reading guide under a screen ---------- */
.sa-key{display:grid;gap:10px;width:100%;margin:18px auto 0;padding:16px 18px;border:1px solid #d7e0e8;border-radius:12px;background:#fff;list-style:none;counter-reset:none}
.sa-key li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:13.5px;line-height:1.6;color:#2e396b}
.sa-key-n{display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#e8710a;color:#fff;font:700 11px/1 Arial,Helvetica,sans-serif;font-style:normal}
.sa-key .ico{width:18px;height:18px;margin-top:2px;color:#4f6479}

/* ---------- A screen on its own light stage ---------- */
.sa-board{min-width:0;max-width:100%;position:relative;display:block;padding:44px 34px 22px;border:1px solid var(--card-line);border-radius:16px;background:var(--stage);color:#192151;box-shadow:var(--card-shadow)}
.sa-board .stage-cap{margin:14px 0 0;text-align:center}
.sa-board .sa-key{max-width:880px}
.sa-board.is-bare{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.sa-board.is-bare .sa-key{margin-top:14px}
@media (max-width:700px){.sa-board{padding:40px 12px 16px}}

/* ---------- Note card "how to read" ---------- */
.note-card.is-read .note-alert{border-color:color-mix(in srgb,var(--accent) 45%,#0000);color:var(--accent)}

/* ---------- Rule tiles ---------- */
.sp-ico{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:#fff;box-shadow:0 8px 22px #19215122,0 0 0 1px #19215114;color:color-mix(in srgb,var(--accent) 40%,#192252)}
.sp-ico .ico{width:28px;height:28px}

/* ---------- Direction cards ---------- */
.sa-steps{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none;counter-reset:st}
.sa-steps li{counter-increment:st;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;line-height:1.55;color:var(--text)}
.sa-steps li::before{content:counter(st);display:grid;place-items:center;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--accent) 55%,#0000);border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,#0000);font-size:11px;font-weight:600;color:var(--accent)}

/* ---------- Narrow sheets scroll sideways instead of cutting the last column ---------- */
@container (max-width:560px){
.sa .sa-sh-grid{overflow-x:auto}
}

/* ---------- Roadmap (Gantt drawn like a project sheet) ---------- */
.sa{
.sa-pg{--lw:250px;background:#fff;font-size:12px;color:#202124}
.sa-pg-top{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #dadce0;
& i{flex:none;width:17px;height:23px;border-radius:3px;background:#188038;box-shadow:inset 0 -9px 0 #fff2,inset 0 0 0 4px #188038,inset 0 0 0 5px #fff9}
& b{font-size:14px;font-weight:400;white-space:nowrap}
& span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;color:#5f6368}
}
.sa-pg-grid{position:relative}
.sa-pg-h,.sa-pg-r{display:grid;grid-template-columns:var(--lw) minmax(0,1fr);align-items:stretch}
.sa-pg-h{border-bottom:1px solid #dadce0;background:#f1f3f4;font-size:11.5px;font-weight:700}
.sa-pg-l{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 12px;border-right:1px solid #e2e3e3;
& b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
& em{margin-left:auto;flex:none;font-size:11px;color:#5f6368}
}
.sa-pg-wk{display:grid;grid-template-columns:repeat(var(--w),minmax(0,1fr));
& span{padding:7px 0;border-left:1px solid #e2e3e3;text-align:center;font-weight:400;color:#5f6368}
& span:first-child{border-left:0}
}
.sa-pg-body{position:relative}
.sa-pg-g{padding:5px 12px;border-bottom:1px solid #ebedf0;border-left:4px solid #bdc1c6;background:#f8f9fa;font-size:11.5px;
& b{font-weight:700}
&.is-ok{border-left-color:#188038}
&.is-warn{border-left-color:#f9ab00}
}
.sa-pg-r{border-bottom:1px solid #ebedf0;min-height:36px}
.sa-pg-t{position:relative;min-width:0;background-image:linear-gradient(90deg,#ebedf0 1px,#0000 1px);background-size:calc(100% / var(--w)) 100%}
.sa-pg-bar{position:absolute;top:50%;left:calc(var(--s) / var(--w) * 100%);width:calc(var(--n) / var(--w) * 100%);height:16px;transform:translateY(-50%);border-radius:4px;background:#bdc1c6;
&.is-ok{background:#188038}
&.is-warn{background:#f9ab00}
}
.sa-pg-today{position:absolute;top:0;bottom:0;left:calc(var(--lw) + (100% - var(--lw)) * var(--t) / var(--w));width:2px;margin-left:-1px;background:#e8710a;pointer-events:none;
& em{position:absolute;top:3px;left:6px;display:flex;align-items:center;gap:6px;padding:1px 7px 1px 6px;border:1px solid #e8710a;border-radius:4px;background:#fff;font-size:10.5px;font-weight:700;color:#c25e08;white-space:nowrap}
}
.sa-pg-key{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 12px;border-top:1px solid #dadce0;font-size:11.5px;color:#5f6368;
& span{display:inline-flex;align-items:center;gap:6px}
& i{width:10px;height:10px;border-radius:2px;background:#bdc1c6}
& i.is-ok{background:#188038}
& i.is-warn{background:#f9ab00}
}
}
@container (max-width:620px){
.sa .sa-pg{--lw:132px}
.sa .sa-pg-l b{white-space:normal;line-height:1.3}
.sa .sa-pg-l em{display:none}
.sa .sa-pg-top span{display:none}
.sa .sa-pg-wk span{font-size:10px}
.sa .sa-pg-wk span:nth-child(even){visibility:hidden}
}

/* "Cập nhật theo …" under the hero lead of the one-page SEO services */
.op-upd{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--accent,#9fd8ff);
& .ico{width:15px;height:15px;flex:none}
}

/* Customer-facing pages of the sample website (store page, article, about, category, product) */
.sa-st{display:grid;gap:12px;padding:14px 16px 16px;background:#fffdf9;color:#2b2622;
& .sa-st-hd{position:static;inset:auto;z-index:auto;height:auto;background:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 10px;border-bottom:1px solid #eee4d6}
& .sa-st-brand{font:700 17px/1 Cambria,"Times New Roman",serif;color:#5b3a1e;letter-spacing:.2px;
& small{font:400 11px/1 Arial,sans-serif;color:#8a7761}}
& .sa-st-nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:#6b5d4d;
& .is-on{color:#8a4b12;font-weight:700;box-shadow:0 2px 0 #d9a35b}}
& .sa-st-crumb{margin:0;font-size:11px;color:#8a7761}
& .sa-st-h{margin:0;font:700 19px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& .sa-st-k{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a4b12}
& .sa-st-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:12px}
& .sa-st-info{padding:12px 14px;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
& li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;
& .ico{flex:none;margin-top:2px;color:#b0722a}
& span{display:grid;min-width:0}
& em{font-size:11px;font-style:normal;color:#8a7761}
& b{font-weight:400;line-height:1.45}}}
& .sa-st-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
& span{padding:7px 14px;border:1px solid #d9a35b;border-radius:18px;font-size:12px;font-weight:600;color:#8a4b12}
& .is-p{background:#8a4b12;border-color:#8a4b12;color:#fff}}
& .sa-st-map{position:relative;min-height:190px;border:1px solid #eee4d6;border-radius:10px;overflow:hidden}
& .sa-st-art{position:absolute;inset:0;min-height:0;border-radius:0}
& .sa-st-cap{position:absolute;inset:auto 8px 8px;display:grid;gap:2px;padding:8px 10px;border-radius:8px;background:#fffdf9ee;font-size:11.5px;line-height:1.4;box-shadow:0 1px 4px #0003;
& b{display:flex;align-items:center;gap:6px;font-size:12px;color:#3d2a17}}
& .sa-st-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
& .sa-st-tile{display:grid;grid-template-rows:76px auto;margin:0;border:1px solid #eee4d6;border-radius:10px;overflow:hidden;background:#fff;
& .ico{place-self:center;width:30px;height:30px;color:#fff;opacity:.9}
& figcaption{padding:7px 10px;font-size:12px;color:#5b3a1e}
&.is-a .ico{background:none}
&.is-a{background-image:linear-gradient(180deg,#d9a35b 0 76px,#fff 76px)}
&.is-b{background-image:linear-gradient(180deg,#b97d5a 0 76px,#fff 76px)}
&.is-c{background-image:linear-gradient(180deg,#9a7b4f 0 76px,#fff 76px)}}
}
@container (max-width:560px){
.sa .sa-st-grid{grid-template-columns:1fr}
.sa .sa-st-map{min-height:170px}
.sa .sa-st-hd{flex-direction:column;align-items:flex-start}
}

/* About page of the sample website */
.sa-st{
& .sa-st-about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}
& .sa-st-p{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:#4a3d30}
& .sa-st-links{display:flex;flex-wrap:wrap;gap:8px;
& span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #eee4d6;border-radius:18px;background:#fff;font-size:12px;color:#5b3a1e;
& .ico{width:14px;height:14px;color:#b0722a}}}
}
@container (max-width:560px){
.sa .sa-st-about{grid-template-columns:1fr}
}

/* Article and category pages of the sample website */
.sa-st{
& .sa-ar-by{margin:-4px 0 0;font-size:11.5px;color:#8a7761}
& .sa-ar-quick{padding:10px 14px;border:1px solid #f0d9b5;border-left:4px solid #d9a35b;border-radius:8px;background:#fff8ec;
& .sa-st-p{margin:0}}
& .sa-ar-h{margin:2px 0 0;display:flex;align-items:center;gap:6px;font:700 15px/1.3 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& .sa-ar-list{display:grid;gap:5px;margin:0;padding:0 0 0 18px;font-size:12.5px;line-height:1.55;color:#4a3d30;
& b{color:#5b3a1e}}
& .sa-ar-photo{display:grid;grid-template-rows:84px auto;margin:0;border:1px solid #eee4d6;border-radius:10px;overflow:hidden;background:#fff;
& span{display:grid;place-items:center;background:linear-gradient(135deg,#d9a35b,#9a7b4f);color:#fff;
& .ico{width:32px;height:32px;opacity:.9}}
& figcaption{padding:7px 10px;font-size:11.5px;color:#6b5d4d}}
& .sa-st-tile figcaption b{font-weight:700;color:#8a4b12}
}

/* Third-party news article and outreach email */
.sa-nw{display:grid;gap:10px;padding:12px 16px 16px;background:#fff;color:#222;font-family:Arial,sans-serif;
& .sa-nw-top{display:flex;align-items:center;gap:16px;padding-bottom:8px;border-bottom:2px solid #c62828;font-size:12px;color:#555;
& b{margin-right:auto;font:700 19px/1 Cambria,"Times New Roman",serif;color:#c62828;letter-spacing:0}
& .is-on{color:#c62828;font-weight:700}}
& .sa-nw-crumb{margin:0;font-size:11px;color:#777}
& .sa-nw-h{margin:0;font:700 21px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#111}
& .sa-nw-by{margin:0;font-size:11.5px;color:#777}
& .sa-nw-ph{display:grid;place-items:center;height:96px;border-radius:4px;background:linear-gradient(135deg,#c9b79c,#8d7b62);color:#fff;
& .ico{width:30px;height:30px;opacity:.9}}
& .sa-nw-cap{margin:-4px 0 0;font-size:11px;font-style:italic;color:#666}
& .sa-nw-p{display:block;margin:0;font-size:13px;line-height:1.6;color:#333}
& .sa-nw-src{margin:0;font-size:12.5px;color:#444}
& .sa-nw-lk{color:#1a56c4;text-decoration:underline;text-underline-offset:2px}
& .sa-dot{vertical-align:middle;margin-left:4px}
}
.sa-ml{position:relative;display:grid;place-items:center;padding:14px;background:#f6f8fc;font-family:Arial,sans-serif;
& .sa-ml-bg{position:absolute;inset:0;display:grid;align-content:start;gap:14px;padding:16px 20px;opacity:.55;
& i{display:block;height:10px;border-radius:5px;background:#e1e5ec}
& i:nth-child(2){width:78%}& i:nth-child(3){width:90%}& i:nth-child(4){width:64%}}
& .sa-ml-box{position:relative;width:100%;max-width:560px;border-radius:10px 10px 0 0;background:#fff;box-shadow:0 8px 28px #0003,0 0 0 1px #0001;overflow:hidden;color:#202124}
& .sa-ml-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#404040;color:#fff;font-size:13px;
& b{font-weight:600}& span{letter-spacing:6px;opacity:.85}}
& .sa-ml-f{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #e8eaed;font-size:13px;
& em{flex:none;width:26px;font-style:normal;color:#5f6368}
& span{display:flex;align-items:center;gap:6px;min-width:0}}
& .sa-ml-body{display:grid;gap:9px;padding:12px 14px;font-size:13px;line-height:1.55;
& p{margin:0}}
& .sa-ml-att{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:6px 10px;border:1px solid #dadce0;border-radius:8px;font-size:12px;
& .ico{width:16px;height:16px;color:#5f6368}
& small{color:#5f6368}}
& .sa-ml-foot{display:flex;align-items:center;gap:14px;padding:10px 14px;
& .sa-ml-send{padding:8px 22px;border-radius:18px;background:#0b57d0;color:#fff;font-size:13px;font-weight:600}
& .ico{width:17px;height:17px;color:#5f6368}}
& .sa-dot{margin-left:4px}
}
@container (max-width:560px){
.sa .sa-nw-top{gap:10px;flex-wrap:wrap}
.sa .sa-nw-h{font-size:18px}
}

/* Inbox mock and manual-action note */
.sa-mi{display:grid;grid-template-columns:150px 1fr;min-height:250px;background:#f6f8fc;font-family:Arial,sans-serif;color:#202124;
& .sa-mi-side{display:grid;align-content:start;gap:2px;padding:12px 8px;font-size:12.5px;color:#444;
& span,& b{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-radius:0 16px 16px 0;font-weight:400}
& .sa-mi-cmp{margin-bottom:10px;padding:10px 14px;border-radius:14px;background:#c2e7ff;color:#0f1544;font-weight:600}
& .is-on{background:#d3e3fd;color:#0f1544;font-weight:700}
& em{font-style:normal;font-size:11px}}
& .sa-mi-main{background:#fff;border-radius:12px 0 0 0;overflow:hidden}
& .sa-mi-tabs{display:flex;border-bottom:1px solid #e0e0e0;font-size:12.5px;color:#5f6368;
& span{padding:9px 16px;border-bottom:3px solid transparent}
& .is-on{color:#0b57d0;font-weight:700;border-bottom-color:#0b57d0}}
& .sa-mi-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #f0f0f0;background:#f6f8fc;font-size:12.5px;color:#444;
& .sa-mi-ck,& .sa-mi-star{flex:none;width:13px;height:13px;border:1.5px solid #bbb;border-radius:3px}
& .sa-mi-star{border:0;width:14px;height:14px;background:radial-gradient(circle,#ccc 0 38%,#0000 40%)}
& .sa-mi-from{flex:none;width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& .sa-mi-sub{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5f6368}
& .sa-mi-sub b{font-weight:400;color:#202124}
& .sa-mi-t{flex:none;font-style:normal;font-size:11.5px;color:#5f6368}
&.is-unread{background:#fff;font-weight:700;color:#202124}
&.is-unread .sa-mi-sub b{font-weight:700}
&.is-unread .sa-mi-t{font-weight:700;color:#202124}
& .sa-dot{flex:none}}
}
.sa .sa-gm-p{margin:0;padding:0 14px 13px;font-size:12.5px;line-height:1.55;color:#5f6368}
.sa .sa-gt.sa-gt-m :is(th,td){text-align:left;white-space:normal}
.sa .sa-gt.sa-gt-m :is(th,td):first-child{width:92px;max-width:none}
.sa .sa-gt.sa-gt-m :is(th,td):last-child{width:90px}
@container (max-width:560px){
.sa .sa-mi{grid-template-columns:1fr}
.sa .sa-mi-side{display:none}
.sa .sa-mi-from{width:92px}
}

/* Service, contact and phone service pages of the sample website */
.sa-st{
& .sa-sv-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;counter-reset:sv}
& .sa-sv-steps li{counter-increment:sv;display:grid;gap:3px;align-content:start;padding:9px 10px;border:1px solid #eee4d6;border-radius:10px;background:#fff;font-size:11.5px;line-height:1.4;color:#6b5d4d}
& .sa-sv-steps li::before{content:counter(sv);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#8a4b12;font-size:11px;font-weight:700;color:#fff}
& .sa-sv-steps b{font-size:12.5px;color:#3d2a17}
& .sa-sv-faq{display:grid;gap:6px}
& .sa-sv-q{display:grid;gap:2px;padding:8px 12px;border:1px solid #eee4d6;border-radius:8px;background:#fff;font-size:12px;line-height:1.45;color:#4a3d30}
& .sa-sv-q b{color:#5b3a1e}
& .sa-sv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
& .sa-sv-cta span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid #d9a35b;border-radius:18px;font-size:12px;font-weight:600;color:#8a4b12}
& .sa-sv-cta .is-p{background:#8a4b12;border-color:#8a4b12;color:#fff}
& .sa-sv-cta em{font-size:11px;font-style:normal;color:#8a7761}
& .sa-ct-f{display:grid;gap:2px;margin:0 0 8px}
& .sa-ct-f em{font-size:11px;font-style:normal;color:#8a7761}
& .sa-ct-f span{padding:7px 10px;border:1px solid #dccdb7;border-radius:8px;background:#fffdf9;font-size:12.5px;color:#3d2a17;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& .sa-ct-btn{display:inline-block;padding:8px 18px;border-radius:18px;background:#8a4b12;font-size:12.5px;font-weight:600;color:#fff}
& .sa-ct-ok{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border:1px solid #cfe5d2;border-radius:10px;background:#f1faf2;font-size:12px;line-height:1.5;color:#2f5a35}
& .sa-ct-ok .ico{flex:none;margin-top:2px;color:#188038}
& .sa-ct-ok span{display:grid}
& .sa-ct-ok b{font-size:12.5px}
}
.sa-ph .sa.sa-pvw{align-content:stretch;grid-template-rows:1fr}
.sa-pv{display:flex;flex-direction:column;gap:9px;min-height:100%;padding:10px 12px 0;background:#fffdf9;color:#2b2622;
& .sa-pv-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid #eee4d6}
& .sa-pv-top b{font:700 15px/1 Cambria,"Times New Roman",serif;color:#5b3a1e}
& .sa-pv-top small{font:400 10px/1 Arial,sans-serif;color:#8a7761}
& .sa-pv-top .ico{color:#6b5d4d}
& .sa-pv-crumb{margin:0;font-size:10.5px;color:#8a7761}
& .sa-pv-h{margin:0;font:700 17px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& .sa-pv-p{margin:0;font-size:12px;line-height:1.55;color:#4a3d30}
& .sa-pv-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
& .sa-pv-chips li{padding:4px 10px;border:1px solid #eee4d6;border-radius:14px;background:#fff;font-size:11px;color:#5b3a1e}
& .sa-pv-k{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a4b12}
& .sa-pv-steps{display:grid;gap:6px;margin:0;padding:0;list-style:none}
& .sa-pv-steps li{display:flex;align-items:center;gap:10px;padding:5px 10px;border:1px solid #eee4d6;border-radius:8px;background:#fff;font-size:12px;color:#3d2a17}
& .sa-pv-steps i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#8a4b12;font-size:11px;font-style:normal;font-weight:700;color:#fff}
& .sa-pv-bar{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:auto -12px 0;padding:8px 10px;background:#fff;box-shadow:0 -2px 8px #0002}
& .sa-pv-bar span{display:flex;justify-content:center;align-items:center;gap:5px;padding:8px 4px;white-space:nowrap;border:1px solid #d9a35b;border-radius:20px;font-size:12px;font-weight:700;color:#8a4b12}
& .sa-pv-bar .is-p{background:#8a4b12;border-color:#8a4b12;color:#fff}
}
@container (max-width:560px){
.sa .sa-sv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Product, sold-out and filtered category pages of the sample website */
.sa-st{
& .sa-pd{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;align-items:start}
& .sa-pd-ph{display:grid;gap:8px;margin:0;
& > span{display:grid;place-items:center;min-height:150px;border-radius:10px;background:linear-gradient(135deg,#d9a35b,#9a7b4f);color:#fff;
& .ico{width:44px;height:44px;opacity:.92}}
& div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
& i{display:block;height:30px;border-radius:6px;background:linear-gradient(135deg,#e6c089,#b99a68)}
&.is-off > span{filter:grayscale(.85);opacity:.7}}
& .sa-pd-info{display:grid;gap:8px;align-content:start;min-width:0;
& .sa-st-p{margin:0}}
& .sa-pd-price{display:flex;align-items:center;gap:10px;margin:0;
& b{font:700 18px/1 Cambria,"Times New Roman",serif;color:#8a4b12;letter-spacing:0}}
& .sa-pd-ok,& .sa-pd-no{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;font-size:11.5px;font-weight:600}
& .sa-pd-ok{background:#e7f4e4;color:#2f6b2a}
& .sa-pd-no{background:#fdeede;color:#9a4a0b}
& .sa-pd-opts{display:flex;flex-wrap:wrap;gap:6px;
& span{padding:5px 11px;border:1px solid #eee4d6;border-radius:16px;background:#fff;font-size:12px;color:#5b3a1e}
& .is-on{border-color:#b0722a;background:#fff3df;font-weight:600}}
& .sa-pd-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0;padding:10px 14px;list-style:none;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& li{display:grid;font-size:12.5px}
& em{font-size:11px;font-style:normal;color:#8a7761}
& b{font-weight:400;line-height:1.45}}
& .sa-pd-rv{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 14px;border:1px solid #eee4d6;border-radius:10px;background:#fff;font-size:12px;color:#6b5d4d;
& b{font:700 18px/1 Cambria,"Times New Roman",serif;color:#3d2a17;letter-spacing:0}
& p{flex-basis:100%;margin:0;line-height:1.5;color:#4a3d30}}
& .sa-pd-star{color:#d9a35b;letter-spacing:1px}
& .sa-pd-notify{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
& > span:first-child{flex:1 1 150px;padding:7px 12px;border:1px solid #d8c9b4;border-radius:8px;background:#fff;font-size:12px;color:#8a7761}
& .sa-ct-btn{margin:0}}
& .sa-fc{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);gap:14px;align-items:start}
& .sa-fc-side{padding:10px 12px;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& .sa-st-k{margin-bottom:4px}
& ul{display:grid;gap:4px;margin:2px 0 8px;padding:0;list-style:none}
& li{display:flex;align-items:center;gap:6px;font-size:12px;color:#4a3d30;
& em{margin-left:auto;font-size:11px;font-style:normal;color:#8a7761}
&.is-on{font-weight:700;color:#5b3a1e}
&.is-on .sa-fc-cb{background:#8a4b12;border-color:#8a4b12;box-shadow:inset 0 0 0 2px #fff}}}
& .sa-fc-g{display:block;margin-top:6px;font-size:11.5px;color:#8a7761}
& .sa-fc-cb{display:inline-block;flex:none;width:12px;height:12px;border:1.5px solid #c9b79d;border-radius:3px;background:#fff}
& .sa-fc-main{display:grid;gap:10px;min-width:0}
& .sa-fc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;font-size:12px;
& .sa-fc-now{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:14px;background:#fff3df;color:#8a4b12;font-weight:600}
& .sa-fc-sort{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #eee4d6;border-radius:8px;background:#fff;color:#5b3a1e}}
}
@container (max-width:560px){
.sa .sa-pd{grid-template-columns:1fr}
.sa .sa-pd-spec{grid-template-columns:1fr}
.sa .sa-fc{grid-template-columns:1fr}
.sa .sa-fc-main .sa-st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/*@@next*/