/* Compare Sheds: all styles scoped under #cs */
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}

#cs{
  --ink:#1b2026; --ink-2:#232a32; --ink-3:#2d3540;
  --steel:#5d6b78; --steel-2:#8a97a3; --steel-3:#c3cbd2;
  --line:#dde1e5; --line-2:#eceef0;
  --paper:#f4f3f0; --white:#fff;
  --text:#1b2026; --muted:#56616c;
  --accent:#c65a1e; --accent-2:#a94a15; --accent-tint:#f7e9df;
  --ok:#2f6a4c;
  --r:3px;
  --wrap:1180px;
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-family:var(--f);color:var(--text);background:var(--white);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html,body{margin:0;padding:0;background:#fff}
html{scroll-behavior:smooth;scroll-padding-top:84px}
#cs *,#cs *::before,#cs *::after{box-sizing:border-box}
#cs img{max-width:100%;height:auto;display:block}
#cs a{color:inherit}
#cs h1,#cs h2,#cs h3,#cs h4{margin:0;line-height:1.15;letter-spacing:-.012em;font-weight:700}
#cs p{margin:0 0 1em}
#cs ul,#cs ol{margin:0;padding:0}
#cs .i{flex:none;vertical-align:-.18em}
#cs .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
#cs .narrow{max-width:820px}
#cs .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#cs .skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:99}
#cs .skip:focus{left:8px}
#cs :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* type helpers */
#cs .eyebrow{font-size:12.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin:0 0 12px}
#cs .eyebrow-lt{color:#e7a37a}
#cs .sub{color:var(--muted);max-width:68ch}
#cs .h-sm{font-size:20px;margin-bottom:16px}

/* buttons */
#cs .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:650;font-size:15.5px;line-height:1.2;
  padding:12px 18px;border-radius:var(--r);border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
#cs .btn-lg{padding:15px 22px;font-size:16.5px}
#cs .btn-accent{background:var(--accent);color:#fff}
#cs .btn-accent:hover{background:var(--accent-2)}
#cs .btn-dark{background:var(--ink);color:#fff}
#cs .btn-dark:hover{background:var(--ink-3)}
#cs .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
#cs .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
#cs .btn-line{border-color:var(--steel-3);color:var(--ink);background:#fff}
#cs .btn-line:hover{border-color:var(--ink)}
#cs .btn[disabled]{opacity:.6;cursor:wait}
#cs .more-link{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--accent-2);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}

/* header */
#cs .hdr{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.07)}
#cs .hdr-in{display:flex;align-items:center;gap:28px;height:68px}
#cs .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
#cs .brand .mark{color:#fff}
#cs .brand-word{font-size:20px;letter-spacing:-.01em;line-height:1}
#cs .brand-word span{font-weight:450}
#cs .brand-word b{font-weight:800}
#cs .nav{display:flex;align-items:center;gap:4px;margin-left:8px}
#cs .nav>a,#cs .dd>summary{color:#d9dee3;text-decoration:none;font-size:15px;font-weight:550;padding:8px 12px;border-radius:var(--r);cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px}
#cs .nav>a:hover,#cs .dd>summary:hover,#cs .dd[open]>summary{color:#fff;background:rgba(255,255,255,.06)}
#cs .dd>summary::-webkit-details-marker,#cs .mnav>summary::-webkit-details-marker,#cs .faq summary::-webkit-details-marker,#cs .more>summary::-webkit-details-marker{display:none}
#cs .dd{position:relative}
#cs .dd-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:240px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(20,25,30,.45);padding:12px}
#cs .dd-panel ul{list-style:none}
#cs .dd-panel a,#cs .dd-panel .soon{display:block;padding:8px 10px;border-radius:var(--r);text-decoration:none;font-weight:550;font-size:15px}
#cs .dd-panel a:hover{background:var(--paper)}
#cs .soon{color:var(--steel-2)}
#cs .soon em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-left:4px}
#cs .dd-h{font-size:11.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:4px 10px 6px}
#cs .hdr-cta{margin-left:auto;padding:10px 16px;font-size:15px}
#cs .mnav{display:none}

/* hero */
#cs .hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
#cs .hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:750;letter-spacing:-.025em;line-height:1.04;max-width:18ch}
#cs .hero .lede{font-size:clamp(17px,1.5vw,19px);color:#c5ccd3;max-width:58ch;margin:20px 0 28px}
#cs .hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
#cs .hero-home{padding:76px 0 0}
#cs .hero-home-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:56px;align-items:start;position:relative;z-index:2;padding-bottom:330px}
#cs .hero-art-wrap{position:absolute;left:0;right:0;bottom:0;height:420px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,var(--ink) 0,rgba(27,32,38,0) 30%)}
#cs .hero-art{position:absolute;left:max(24px,calc(50% - 590px));bottom:84px;width:min(760px,90%);height:auto;color:var(--steel-2)}
#cs .hero-home::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.08)}
#cs .hero.has-photo .hero-home-grid{padding-bottom:88px}
#cs .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}

#cs .picker{background:var(--ink-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:20px;margin-top:6px}
#cs .picker-h{font-size:12.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);margin:0 0 10px}
#cs .picker ul{list-style:none}
#cs .picker li+li{border-top:1px solid rgba(255,255,255,.08)}
#cs .picker a,#cs .pk-soon{display:flex;align-items:center;gap:10px;padding:11px 4px;text-decoration:none}
#cs .picker b{font-weight:650;font-size:16px}
#cs .picker span{font-size:13.5px;color:var(--steel-2);margin-left:auto}
#cs .picker a .i{color:var(--accent)}
#cs .picker a:hover b{color:#f0b48f}
#cs .pk-soon b{color:#8995a1;font-weight:550}
#cs .pk-soon span{color:#66727e}

#cs .hero-loc{padding:34px 0 52px}
#cs .hero-loc-grid{display:grid;grid-template-columns:1fr 330px;gap:56px;align-items:end}
#cs .hero-cat h1,#cs .hero-page h1{max-width:22ch}
#cs .hero-page{padding-bottom:44px}

#cs .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:#9aa5af;margin-bottom:26px}
#cs .crumbs li+li::before{content:"/";margin-right:6px;color:#5d6873}
#cs .crumbs a{color:#c5ccd3;text-decoration:none}
#cs .crumbs a:hover{color:#fff;text-decoration:underline}

#cs .snap{background:var(--ink-2);border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--accent);border-radius:var(--r);padding:20px 22px}
#cs .snap-h{font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);margin:0 0 14px}
#cs .snap dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
#cs .snap dt{font-size:38px;font-weight:750;line-height:1;letter-spacing:-.02em}
#cs .snap dd{margin:4px 0 0;color:#aeb8c1;font-size:14px}
#cs .snap ul{list-style:none;display:grid;gap:8px;font-size:14.5px;color:#d0d6dc}
#cs .snap li{display:flex;gap:8px;align-items:flex-start}
#cs .snap .i{color:var(--accent);margin-top:3px}

/* sections */
#cs .sect{padding:72px 0}
#cs .sect-tight{padding:0}
#cs .sect-alt{background:var(--paper)}
#cs .sect-head{margin-bottom:32px}
#cs .sect-head h2,#cs .sect h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
#cs .sect-head .sub{margin:12px 0 0}
#cs .two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
#cs .two-col-wide{grid-template-columns:1.1fr 1fr}
#cs .two-col h2{margin-bottom:12px}

/* category rows */
#cs .catrow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r);background:#fff}
#cs .catrow li+li{border-left:1px solid var(--line)}
#cs .catrow a{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:20px 20px;text-decoration:none;height:100%;transition:background .15s}
#cs .catrow b{font-size:16px;font-weight:700}
#cs .catrow span{grid-column:1/-1;grid-row:2;font-size:14px;color:var(--muted);line-height:1.45}
#cs .catrow .i{grid-column:2;grid-row:1;color:var(--accent);transition:transform .15s}
#cs .catrow a:hover{background:var(--paper)}
#cs .catrow a:hover .i{transform:translateX(3px)}
#cs .catrow-home{transform:translateY(-50%);box-shadow:0 16px 36px -22px rgba(20,25,30,.35);margin-bottom:-24px;position:relative;z-index:3}
#cs .catrow-sm{grid-template-columns:repeat(2,1fr);margin-top:36px}
#cs .catrow-sm li:nth-child(odd){border-left:0}
#cs .catrow-sm li:nth-child(n+3){border-top:1px solid var(--line)}
#cs .catrow-sm a{padding:14px 18px}

/* location grid (home) */
#cs .locgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r)}
#cs .loc-card{display:flex;flex-direction:column;padding:22px;text-decoration:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:210px;background:#fff;transition:background .15s}
#cs .loc-card:nth-child(4n){border-right:0}
#cs .loc-card:nth-last-child(-n+4){border-bottom:0}
#cs a.loc-card:hover{background:var(--paper)}
#cs .lc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#cs .lc-top h3{font-size:21px}
#cs .lc-live,#cs .lc-soon{font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
#cs .lc-live{color:var(--ok)}
#cs .lc-soon{color:var(--steel-2)}
#cs .lc-area{font-size:14px;color:var(--muted);margin:6px 0 14px}
#cs .lc-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:22px;margin:0 0 12px}
#cs .lc-stats dt{font-size:24px;font-weight:750;line-height:1}
#cs .lc-stats dd{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
#cs .lc-names{font-size:13.5px;color:var(--muted);margin:0 0 14px}
#cs .lc-go{margin-top:auto;display:flex;align-items:center;gap:6px;font-weight:650;font-size:14.5px;color:var(--accent-2)}
#cs .is-soon{background:var(--paper)}
#cs .is-soon h3{color:var(--steel)}

/* listing header + filters */
#cs .sect-list{padding-top:56px;background:var(--paper)}
#cs .list-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
#cs .list-head .sub{margin:8px 0 0;font-size:15px}
#cs .list-head .sub a{color:var(--accent-2);font-weight:600}
#cs .filters{display:flex;flex-wrap:wrap;gap:8px}
#cs .list-head>*{min-width:0;max-width:100%}
#cs .chip{font:inherit;font-size:14px;font-weight:600;padding:8px 13px;border:1.5px solid var(--steel-3);background:#fff;color:var(--ink);border-radius:var(--r);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
#cs .chip span{font-size:12.5px;color:var(--muted);font-weight:600}
#cs .chip:hover{border-color:var(--ink)}
#cs .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
#cs .chip.on span{color:#c3cbd2}

/* listing card */
#cs .cards{display:grid;gap:14px}
#cs .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);scroll-margin-top:90px}
#cs .card[hidden]{display:none}
#cs .card.is-sponsored{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
#cs .spon-strip{background:var(--accent-tint);color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 22px;border-bottom:1px solid #edd3c1;display:flex;gap:12px}
#cs .spon-strip a{font-weight:500;letter-spacing:0;text-transform:none;margin-left:auto}
#cs .card-grid{display:grid;grid-template-columns:250px 1fr 270px;gap:0}
#cs .card-grid>div{padding:24px 24px 20px}
#cs .card-main{border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
#cs .logo-box{width:120px;height:56px;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:#fff;margin-bottom:16px;position:relative;overflow:hidden}
#cs .logo-box img{max-width:102px;max-height:38px;width:auto;height:auto;object-fit:contain}
#cs .logo-box.dark{background:var(--ink);border-color:var(--ink)}
#cs .logo-box .initials{display:none;font-weight:800;font-size:18px;letter-spacing:.04em;color:var(--steel)}
#cs .logo-box.noimg{background:var(--paper)}
#cs .logo-box.noimg .initials{display:block}
#cs .card-name h3{font-size:20px;letter-spacing:-.015em}
#cs .net{font-size:13.5px;color:var(--accent-2);font-weight:600;margin:5px 0 8px}
#cs .loc{font-size:14px;color:var(--muted);display:flex;gap:5px;align-items:flex-start;margin:0 0 8px}
#cs .loc .i{margin-top:3px}
#cs .rating{display:flex;align-items:center;gap:6px;font-size:14px;margin:0}
#cs .rating span:last-child{color:var(--muted);font-size:13px}
#cs .stars{display:inline-flex;color:var(--steel-3)}
#cs .stars .on{color:#d4882b}
#cs .best{font-size:16.5px;font-weight:550;line-height:1.45;margin-bottom:16px}
#cs .best span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:4px}
#cs .why-h{font-size:12.5px;font-weight:650;color:var(--steel);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
#cs .why{list-style:none;display:grid;gap:7px;margin-bottom:16px}
#cs .why li{position:relative;padding-left:20px;font-size:15px;line-height:1.5}
#cs .why li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:2px;background:var(--accent)}
#cs .tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
#cs .tags li{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:2px;background:var(--line-2);color:var(--ink-3)}
#cs .tags .t-type{background:#e6eaee;color:var(--ink)}
#cs .facts{margin:0 0 18px;display:grid;gap:0}
#cs .facts>div{padding:9px 0;border-bottom:1px solid var(--line-2)}
#cs .facts>div:first-child{padding-top:0}
#cs .facts dt{font-size:11.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
#cs .facts dd{margin:2px 0 0;font-size:14.5px;font-weight:600;line-height:1.4}
#cs .facts small{display:block;font-weight:400;color:var(--muted);font-size:13px}
#cs .actions{display:grid;gap:8px}
#cs .actions .btn{width:100%}
#cs .cta-m{display:none}
#cs .more{border-top:1px solid var(--line-2)}
#cs .more>summary{list-style:none;cursor:pointer;padding:12px 24px;font-size:14.5px;font-weight:600;color:var(--ink-3);display:flex;align-items:center;gap:6px}
#cs .more>summary:hover{color:var(--accent-2)}
#cs .more[open]>summary .i{transform:rotate(180deg)}
#cs .more-in{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:4px 24px 24px}
#cs .more-text p{font-size:15px;color:var(--ink-3)}
#cs .more-facts{margin:0;display:grid;gap:10px}
#cs .more-facts dt{font-size:11.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
#cs .more-facts dd{margin:2px 0 0;font-size:14px}
#cs .srcs a{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
#cs .srcs a:hover{color:var(--accent-2)}
#cs .mid-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:var(--ink);color:#fff;border-radius:var(--r)}
#cs .mid-cta[hidden]{display:none}
#cs .mid-cta p{margin:0;color:#c5ccd3;max-width:62ch}
#cs .mid-cta b{color:#fff}
#cs .list-note{display:flex;gap:8px;font-size:13.5px;color:var(--muted);margin:20px 0 0;max-width:90ch}
#cs .list-note .i{margin-top:3px}
#cs .list-note a{color:var(--accent-2)}
#cs .no-match{padding:24px;background:#fff;border:1px dashed var(--steel-3);text-align:center;color:var(--muted)}
#cs .featured{margin-bottom:20px}

/* lead form */
#cs .sect-form{background:var(--paper);padding-top:24px}
#cs .sect-list+.sect-form{padding-top:0}
#cs .lead{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--ink);color:#fff;border-radius:var(--r);overflow:hidden}
#cs .lead-intro{padding:44px 40px;border-right:1px solid rgba(255,255,255,.08)}
#cs .lead-intro .eyebrow{color:#e7a37a}
#cs .lead-intro h2{font-size:clamp(28px,2.8vw,36px);letter-spacing:-.02em;margin-bottom:14px}
#cs .lead-intro>p{color:#c5ccd3}
#cs .ticks{list-style:none;display:grid;gap:10px;margin-top:22px}
#cs .ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#dfe4e8}
#cs .ticks .i{color:var(--accent);margin-top:3px}
#cs .lead-form{background:#fff;color:var(--ink);padding:36px 40px}
#cs .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:16px}
#cs .f{display:grid;gap:6px}
#cs .f-wide{grid-column:1/-1}
#cs .f>span{font-size:14px;font-weight:650}
#cs .f em{font-style:normal;font-weight:400;color:var(--muted)}
#cs .f input,#cs .f select,#cs .f textarea{font:inherit;font-size:16px;width:100%;padding:11px 12px;border:1.5px solid var(--steel-3);border-radius:var(--r);background:#fff;color:var(--ink)}
#cs .f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d6b78' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
#cs .f input:focus,#cs .f select:focus,#cs .f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(198,90,30,.18)}
#cs .f.err input,#cs .f.err select{border-color:#b3261e}
#cs .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#cs .consent{font-size:13px;color:var(--muted);line-height:1.5;margin:4px 0 16px;padding:12px 14px;background:var(--paper);border-left:3px solid var(--steel-3)}
#cs .consent a{color:var(--ink)}
#cs .lead-form .btn{width:100%}
#cs .form-msg{margin:10px 0 0;font-size:14px;min-height:1.4em}
#cs .form-msg.is-err{color:#b3261e;font-weight:600}
#cs .form-done h3{font-size:24px;margin-bottom:10px}
#cs .cf-turnstile{margin-bottom:12px}

/* models, tables, tiles, steps */
#cs .models{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r)}
#cs .model{padding:24px}
#cs .model+.model{border-left:1px solid var(--line)}
#cs .model h3{font-size:18px;margin-bottom:10px}
#cs .model p{font-size:15px;color:var(--ink-3)}
#cs .model-you{margin:0;padding-top:12px;border-top:1px solid var(--line-2)}
#cs .tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid var(--line);margin-top:20px}
#cs .tbl th{text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding:12px 14px;border-bottom:1.5px solid var(--ink)}
#cs .tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
#cs .tbl td:last-child{font-weight:650;white-space:nowrap}
#cs .tbl sup.ref{font-size:10.5px;color:var(--accent-2);margin-left:3px;font-weight:600}
#cs .srclist{font-size:13px;color:var(--muted);padding-left:18px;margin:14px 0 20px;display:grid;gap:4px}
#cs .srclist a{color:var(--ink-3)}
#cs .tiles{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:#fff}
#cs .tile{padding:18px 20px}
#cs .tile+.tile{border-top:1px solid var(--line)}
#cs .tile h3{font-size:16.5px;margin-bottom:6px}
#cs .tile p{font-size:15px;color:var(--ink-3);margin:0}
#cs .steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
#cs .steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
#cs .steps li::before{content:"0" counter(s);display:block;font-size:13px;font-weight:700;color:var(--accent-2);letter-spacing:.1em;margin-bottom:10px}
#cs .steps h3{font-size:17px;margin-bottom:8px}
#cs .steps p{font-size:15px;color:var(--ink-3)}
#cs .method4{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:28px}
#cs .method4 li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
#cs .method4 li::before{content:"0" counter(s);display:block;font-size:13px;font-weight:700;color:var(--accent-2);letter-spacing:.1em;margin-bottom:10px}
#cs .method4 h3{font-size:18px;margin-bottom:8px}
#cs .method4 p{font-size:15px;color:var(--ink-3)}
#cs .guides{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#cs .guides a{display:block;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;text-decoration:none;transition:border-color .15s}
#cs .guides a:hover{border-color:var(--ink)}
#cs .guides h3{font-size:19px;margin-bottom:8px}
#cs .guides p{color:var(--muted);font-size:15px}

/* category rows of builders */
#cs .rows{border:1px solid var(--line);border-radius:var(--r);background:#fff}
#cs .row{display:grid;grid-template-columns:260px 1fr 220px;gap:24px;align-items:center;padding:18px 22px;text-decoration:none;transition:background .15s}
#cs .row+.row{border-top:1px solid var(--line)}
#cs .row:hover{background:var(--paper)}
#cs .row-name b{display:block;font-size:16.5px}
#cs .row-name span{font-size:13.5px;color:var(--muted)}
#cs .row-best{margin:0;font-size:15px;color:var(--ink-3)}
#cs .row-meta{display:flex;justify-content:flex-end;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--steel)}
#cs .row-meta .i{color:var(--accent)}
#cs .other-locs{font-size:14.5px;color:var(--muted);margin-top:22px}
#cs .other-locs a{color:var(--accent-2);font-weight:600}

/* faq */
#cs .faq{border-top:1.5px solid var(--ink)}
#cs .faq details{border-bottom:1px solid var(--line)}
#cs .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 2px;font-weight:650;font-size:17px}
#cs .faq summary .i{color:var(--steel);transition:transform .15s;margin-top:3px}
#cs .faq details[open] summary .i{transform:rotate(180deg)}
#cs .faq-a{padding:0 2px 18px;color:var(--ink-3);max-width:72ch}
#cs .faq-a p{margin:0}

/* prose */
#cs .prose{font-size:17px}
#cs .prose h2{font-size:24px;margin:36px 0 12px}
#cs .prose h1{font-size:36px;margin-bottom:16px}
#cs .prose ul{padding-left:20px;margin:0 0 1em}
#cs .prose li{margin-bottom:6px}
#cs .prose a{color:var(--accent-2)}
#cs .callout{display:flex;gap:10px;padding:14px 16px;background:var(--paper);border-left:3px solid var(--accent);font-size:15.5px}
#cs .callout .i{margin-top:4px;color:var(--accent-2)}

/* bottom band */
#cs .band{background:var(--accent);color:#fff;padding:44px 0}
#cs .band-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
#cs .band h2{font-size:28px;margin-bottom:6px}
#cs .band p{margin:0;color:#fbe4d5}
#cs .band .btn-accent{background:var(--ink)}
#cs .band .btn-accent:hover{background:var(--ink-3)}

/* footer */
#cs .ftr{background:var(--ink);color:#aeb8c1;padding:56px 0 30px;font-size:14.5px}
#cs .ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
#cs .ftr-brand p{margin-top:16px;max-width:36ch}
#cs .ftr-h{color:#fff;font-weight:650;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
#cs .ftr ul{list-style:none;display:grid;gap:8px}
#cs .ftr a{text-decoration:none}
#cs .ftr a:hover{color:#fff}
#cs .ftr-soon{color:#6c7884;font-size:13.5px}
#cs .ftr-base p{margin:22px 0 0;font-size:13px;color:#7f8b96;max-width:110ch}

/* sticky mobile CTA */
#cs .sticky-cta{display:none}

/* ---------------------------------------------------------- responsive */
@media (max-width:1080px){
  #cs .nav{display:none}
  #cs .mnav{display:block;margin-left:4px}
  #cs .mnav>summary{list-style:none;cursor:pointer;color:#fff;padding:8px;display:flex}
  #cs .mnav-panel{position:absolute;left:0;right:0;top:68px;background:var(--ink-2);border-top:1px solid rgba(255,255,255,.08);padding:16px 24px 24px;max-height:calc(100vh - 68px);overflow:auto}
  #cs .mnav-panel ul{list-style:none;margin-bottom:14px}
  #cs .mnav-panel a,#cs .mnav-panel .soon{display:block;padding:9px 0;color:#e7ebee;text-decoration:none;font-weight:550;border-bottom:1px solid rgba(255,255,255,.06)}
  #cs .mnav-panel .dd-h{margin:8px 0 4px;color:var(--steel-2)}
  #cs .mnav-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  #cs .card-grid{grid-template-columns:220px 1fr}
  #cs .card-side{grid-column:1/-1;border-top:1px solid var(--line-2);display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:start}
  #cs .card-main{border-right:0}
  #cs .facts{grid-template-columns:repeat(2,1fr);column-gap:20px}
  #cs .facts>div:nth-child(2){padding-top:0}
  #cs .catrow{grid-template-columns:repeat(3,1fr)}
  #cs .catrow li:nth-child(4){border-left:0}
  #cs .catrow li:nth-child(n+4){border-top:1px solid var(--line)}
  #cs .catrow-sm{grid-template-columns:repeat(2,1fr)}
  #cs .locgrid{grid-template-columns:repeat(2,1fr)}
  #cs .loc-card:nth-child(4n){border-right:1px solid var(--line)}
  #cs .loc-card:nth-child(2n){border-right:0}
  #cs .loc-card:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  #cs .loc-card:nth-last-child(-n+2){border-bottom:0}
  #cs .steps,#cs .method4{grid-template-columns:repeat(2,1fr)}
  #cs .row{grid-template-columns:220px 1fr;}
  #cs .row-meta{display:none}
}
@media (max-width:860px){
  #cs .hero-home-grid,#cs .hero-loc-grid,#cs .two-col,#cs .two-col-wide,#cs .lead{grid-template-columns:1fr}
  #cs .hero-home-grid{gap:32px;padding-bottom:230px}
  #cs .hero-art-wrap{height:300px}
  #cs .hero-art{bottom:30px}
  #cs .lead-intro{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  #cs .models{grid-template-columns:1fr}
  #cs .model+.model{border-left:0;border-top:1px solid var(--line)}
  #cs .guides{grid-template-columns:1fr}
  #cs .ftr-top{grid-template-columns:1fr 1fr}
  #cs .ftr-brand{grid-column:1/-1}
  #cs .more-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  #cs{font-size:16px}
  #cs .wrap{padding:0 16px}
  html{scroll-padding-top:72px}
  #cs .hdr-in{height:60px;gap:12px}
  #cs .mnav-panel{top:60px}
  #cs .brand-word{font-size:18px}
  #cs .hdr-cta{display:none}
  #cs .mnav{margin-left:auto}
  #cs .hero-home{padding-top:44px}
  #cs .hero-loc{padding:22px 0 36px}
  #cs .hero .lede{margin:16px 0 22px}
  #cs .hero-ctas .btn{width:100%}
  #cs .crumbs ol{margin-bottom:16px}
  #cs .sect{padding:52px 0}
  #cs .sect-tight{padding:0}
  #cs .catrow{grid-template-columns:1fr}
  #cs .catrow li+li{border-left:0;border-top:1px solid var(--line)}
  #cs .catrow a{padding:14px 16px}
  #cs .catrow-home{transform:none;margin:24px 0 0}
  #cs .locgrid{grid-template-columns:1fr}
  #cs .loc-card{border-right:0!important;border-bottom:1px solid var(--line)!important;min-height:0}
  #cs .loc-card:last-child{border-bottom:0!important}
  #cs .card-grid{grid-template-columns:1fr}
  #cs .card-grid>div{padding:18px 18px 14px}
  #cs .card-id{display:flex;gap:14px;align-items:flex-start}
  #cs .logo-box{width:96px;height:48px;margin:0}
  #cs .logo-box img{max-width:82px;max-height:30px}
  #cs .card-name h3{font-size:18.5px}
  #cs .card-main{border-left:0;border-top:1px solid var(--line-2);padding-top:16px!important}
  #cs .card-side{grid-template-columns:1fr;gap:0}
  #cs .facts{grid-template-columns:1fr 1fr}
  #cs .cta-m{display:flex;width:100%;margin:-4px 0 18px}
  #cs .cta-d{display:none}
  #cs .more>summary{padding:12px 18px}
  #cs .more-in{padding:4px 18px 18px}
  #cs .list-head{flex-direction:column;align-items:stretch}
  #cs .filters{overflow-x:auto;flex-wrap:nowrap;padding:0 16px 4px;margin:0 -16px;max-width:none;width:calc(100% + 32px);scrollbar-width:none}
  #cs .chip{white-space:nowrap}
  #cs .mid-cta{flex-direction:column;align-items:stretch}
  #cs .lead-intro,#cs .lead-form{padding:28px 20px}
  #cs .fgrid{grid-template-columns:1fr}
  #cs .steps,#cs .method4{grid-template-columns:1fr}
  #cs .tbl td:last-child{white-space:normal}
  #cs .row{grid-template-columns:1fr;gap:6px}
  #cs .ftr-top{grid-template-columns:1fr}
  #cs .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;justify-content:center;align-items:center;gap:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:14px;border-radius:var(--r);box-shadow:0 12px 28px -10px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .2s}
  #cs .sticky-cta.show{transform:none}
  #cs .sticky-cta.hide{transform:translateY(140%)}
  #cs .ftr{padding-bottom:90px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#cs *{transition:none!important}}
#cs .fd-note{font-weight:500;font-size:13.5px;color:var(--ink-3)}
#cs .pv-bar{background:var(--accent);color:#fff;font-size:13.5px;font-weight:600;display:flex;justify-content:center;gap:16px;padding:7px 16px}
#cs .pv-bar a{color:#fff}
#cs .facts small.ok{color:var(--ok);font-weight:600;display:flex;gap:4px;align-items:center;margin-top:2px}

/* photo heroes (location, category and prose pages) */
#cs .hero-loc.has-photo{background:#111418}
#cs .hero-loc .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
#cs .hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,20,24,calc(var(--ov) + .12)) 0%,rgba(17,20,24,var(--ov)) 55%,rgba(17,20,24,calc(var(--ov) - .08)) 100%)}
#cs .hero-loc>.wrap{position:relative;z-index:2}
#cs .hero-loc.has-photo .lede{color:#dfe4e8}
#cs .hero-loc.has-photo .snap{background:rgba(27,32,38,.88);backdrop-filter:none}
@media (max-width:640px){#cs .hero-shade{background:rgba(17,20,24,calc(var(--ov) + .1))}}
@media (max-width:640px){
  #cs .snap{padding:14px 16px}
  #cs .snap-h,#cs .snap ul{display:none}
  #cs .snap dl{margin:0;padding:0;border:0}
  #cs .snap dt{font-size:28px}
}