/* 000345 — Square Corner Toolkit
   Palette: concrete, graphite ink, tape-measure yellow, chalk-line blue, marker red */
:root{
  --concrete:#EDEFF0;
  --slab:#FFFFFF;
  --ink:#1D2329;
  --ink-2:#4A535C;
  --line:#C9CED3;
  --tape:#F5B800;
  --tape-deep:#C99500;
  --chalk:#2357C6;
  --chalk-soft:#E3EBFA;
  --marker:#C8322B;
  --ok:#1E7A46;
  --radius-s:4px;
  --radius-m:10px;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --max:1180px;
  --measure:68ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --concrete:#171B1F;--slab:#20262C;--ink:#ECEFF2;--ink-2:#A9B2BB;--line:#36404A;
    --chalk:#7FA6FF;--chalk-soft:#1E2A44;--marker:#FF7A6E;--ok:#5BD08E;--tape-deep:#F5B800;
  }
}
:root[data-theme="dark"]{
  --concrete:#171B1F;--slab:#20262C;--ink:#ECEFF2;--ink-2:#A9B2BB;--line:#36404A;
  --chalk:#7FA6FF;--chalk-soft:#1E2A44;--marker:#FF7A6E;--ok:#5BD08E;--tape-deep:#F5B800;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 1.0625rem/1.6 var(--body);}
img,svg,iframe{max-width:100%}
a{color:var(--chalk);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--tape);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.4rem,5.5vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:1.45rem;font-weight:600}
h4{font-size:1.15rem;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.prose{max-width:var(--measure)}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose li{margin-bottom:.35em}
.muted{color:var(--ink-2)}
.skip{position:absolute;left:-999px;top:0;background:var(--tape);color:#1D2329;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* Top notice strip */
.notice{background:var(--ink);color:var(--concrete);font-size:.92rem}
:root[data-theme="dark"] .notice{background:#0E1114}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .notice{background:#0E1114;color:#ECEFF2}}
.notice .wrap{display:flex;gap:10px;align-items:center;justify-content:center;padding-top:8px;padding-bottom:8px;text-align:center;flex-wrap:wrap}
.notice a{color:var(--tape);font-weight:600}

/* Tape-measure rule: a structural device marking the top of the site */
.tape{height:14px;background:
  repeating-linear-gradient(90deg,#1D2329 0 1px,transparent 1px 12px),
  repeating-linear-gradient(90deg,#1D2329 0 2px,transparent 2px 96px),
  var(--tape);
  background-size:auto 6px,auto 12px,auto;background-repeat:repeat-x;background-position:0 0,0 0,0 0}

/* Header */
.site-head{background:var(--slab);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:36px;height:36px;flex:none}
.brand b{font:700 1.6rem/1 var(--display);letter-spacing:.02em}
.brand small{display:block;font:500 .78rem/1.1 var(--body);color:var(--ink-2)}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:var(--radius-s);font-weight:600;font-size:.98rem}
.nav a:hover,.nav a[aria-current="page"]{background:var(--chalk-soft);color:var(--chalk)}
.nav .btn{margin-left:6px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-s);padding:8px 12px;font:600 1rem var(--body)}
.theme-btn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-s);width:38px;height:38px;cursor:pointer;margin-left:6px}
@media (max-width:960px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--slab);flex-direction:column;align-items:stretch;padding:10px 20px 18px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav .btn{margin:8px 0 0}
  .theme-btn{margin-left:0}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;border-radius:var(--radius-s);padding:12px 20px;font:700 1.02rem/1 var(--body);text-decoration:none;cursor:pointer;transition:background .15s}
.btn-tape{background:var(--tape);color:#1D2329;border-color:var(--tape)}
.btn-tape:hover{background:#FFC92E}
.btn-ink{background:var(--ink);color:var(--concrete)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--slab)}
.btn-sm{padding:8px 14px;font-size:.92rem}

/* Hero */
.hero{padding:44px 0 36px;border-bottom:1px solid var(--line);background:var(--slab)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:start}
.hero h1 .num{display:block;font-size:.55em;color:var(--ink-2);font-weight:600;letter-spacing:.04em}
.hero p.lede{font-size:1.2rem;max-width:44ch;color:var(--ink-2)}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;font-size:.95rem;color:var(--ink-2)}
.trust strong{display:block;font:700 1.6rem/1 var(--display);color:var(--ink)}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}}

/* The 3-4-5 squaring tool */
.squarer{background:var(--concrete);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px}
.squarer svg{display:block;width:100%;height:auto;background:var(--slab);border-radius:var(--radius-s);border:1px solid var(--line)}
.squarer .fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.squarer .verdict{margin-top:12px;font-weight:600;padding:10px 12px;border-radius:var(--radius-s);background:var(--slab);border-left:5px solid var(--line)}
.verdict.ok{border-left-color:var(--ok)}
.verdict.off{border-left-color:var(--marker)}

/* Forms */
label{display:block;font-weight:600;font-size:.94rem;margin-bottom:4px}
input,select,textarea{width:100%;font:400 1rem/1.3 var(--body);color:var(--ink);background:var(--slab);border:1.5px solid var(--line);border-radius:var(--radius-s);padding:10px 11px}
input:focus,select:focus,textarea:focus{border-color:var(--chalk);outline:none;box-shadow:0 0 0 3px var(--chalk-soft)}
textarea{min-height:110px;resize:vertical}
.field{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:400}
.check input{width:auto;margin-top:4px}
.form-msg{margin-top:12px;padding:10px 12px;border-radius:var(--radius-s);display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#E3F4EA;color:#145232}
.form-msg.err{background:#FBE5E3;color:#8A1F19}

/* Sections */
section.band{padding:52px 0}
section.band.alt{background:var(--slab);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.section-head p{margin:0;color:var(--ink-2);max-width:56ch}

/* Calculator index — a measured list, not a card wall */
.calc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;border-top:2px solid var(--ink)}
.calc-list a{display:block;padding:16px 14px 16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.calc-list a:hover h3{color:var(--chalk)}
.calc-list h3{font-size:1.3rem;margin:0 0 4px}
.calc-list p{margin:0;font-size:.95rem;color:var(--ink-2)}
.calc-list .tag{font-size:.8rem;color:var(--tape-deep);font-weight:700}

/* Calculator page */
.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
@media (max-width:960px){.calc-layout{grid-template-columns:1fr}}
.calc-box{background:var(--slab);border:1px solid var(--line);border-top:6px solid var(--tape);border-radius:var(--radius-s);padding:22px;margin-bottom:28px}
.calc-box .inputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.calc-box .unit-switch{display:flex;gap:6px;margin-bottom:14px}
.unit-switch button{border:1.5px solid var(--line);background:var(--concrete);color:var(--ink);border-radius:var(--radius-s);padding:6px 12px;font:600 .9rem var(--body);cursor:pointer}
.unit-switch button[aria-pressed="true"]{background:var(--ink);color:var(--concrete);border-color:var(--ink)}
.results{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.results dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:0}
.results div.r{background:var(--concrete);border-radius:var(--radius-s);padding:10px 12px}
.results dt{font-size:.85rem;color:var(--ink-2)}
.results dd{margin:0;font:700 1.55rem/1.15 var(--display)}
.results .note{margin-top:10px;font-size:.95rem}
.results .warn{color:var(--marker);font-weight:600}
.aside-box{background:var(--slab);border:1px solid var(--line);border-radius:var(--radius-s);padding:18px;margin-bottom:20px}
.aside-box h3{font-size:1.25rem}
.aside-box ul{padding-left:18px;margin:0}
.sticky-aside{position:sticky;top:84px}

/* Lead-gen */
.lead{background:var(--ink);color:var(--concrete);border-radius:var(--radius-m);padding:30px;display:grid;grid-template-columns:1fr 1.1fr;gap:30px}
.lead h2{color:var(--concrete)}
.lead p,.lead li{color:#C9D0D6}
.lead ul{padding-left:18px}
.lead .formcard{background:var(--slab);color:var(--ink);border-radius:var(--radius-s);padding:22px}
.lead .formcard p{color:var(--ink-2)}
@media (max-width:860px){.lead{grid-template-columns:1fr;padding:22px}}
.steps-bar{display:flex;gap:6px;margin-bottom:16px}
.steps-bar span{flex:1;height:6px;border-radius:3px;background:var(--line)}
.steps-bar span.on{background:var(--tape)}
.step{display:none}
.step.active{display:block}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.choice-grid label{border:1.5px solid var(--line);border-radius:var(--radius-s);padding:10px;cursor:pointer;font-weight:600;display:flex;gap:8px;align-items:center;margin:0}
.choice-grid input{width:auto}
.choice-grid label:has(input:checked){border-color:var(--chalk);background:var(--chalk-soft)}
.step-nav{display:flex;justify-content:space-between;gap:10px;margin-top:6px}

/* Tiers / plans */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.tier{background:var(--slab);border:1px solid var(--line);border-radius:var(--radius-s);padding:22px;display:flex;flex-direction:column}
.tier.feature{border:2px solid var(--ink)}
.tier .price{font:700 2.2rem/1 var(--display);margin:6px 0 10px}
.tier ul{padding-left:18px;flex:1}

/* Videos */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.video{background:var(--slab);border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.video .frame{position:relative;aspect-ratio:16/9;background:#000}
.video .frame iframe,.video .frame button{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .frame button{cursor:pointer;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.video .frame button span{background:var(--tape);color:#1D2329;font:700 1rem var(--body);padding:10px 16px;border-radius:var(--radius-s)}
.video .meta{padding:12px 14px}
.video h3{font-size:1.2rem;margin:0 0 4px}

/* Tables */
table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:.97rem;background:var(--slab)}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left}
th{background:var(--concrete);font-weight:700}
.table-scroll{overflow-x:auto}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:700;font-size:1.05rem}
details p{margin:.6em 0 0}

/* Breadcrumbs */
.crumbs{font-size:.9rem;color:var(--ink-2);padding:14px 0 0}
.crumbs a{color:var(--ink-2)}

/* Page header */
.page-head{background:var(--slab);border-bottom:1px solid var(--line);padding:26px 0 24px}
.page-head p{max-width:62ch;color:var(--ink-2);font-size:1.12rem;margin:0}

/* Ad slot wrapper */
.ad-wrap{margin:26px 0;min-height:100px;text-align:center}
.ad-wrap .ad-label{font-size:.75rem;color:var(--ink-2);display:block;margin-bottom:4px}

/* Footer */
.site-foot{background:var(--ink);color:#C9D0D6;padding:44px 0 26px;margin-top:40px;font-size:.95rem}
.site-foot a{color:#ECEFF2;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px}
.foot-grid h4{color:#fff;font-size:1.15rem}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:6px}
.foot-legal{border-top:1px solid #3A434C;margin-top:26px;padding-top:16px;font-size:.85rem;color:#9AA4AE}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

/* Cookie bar */
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:640px;margin:0 auto;background:var(--slab);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px;box-shadow:0 8px 28px rgba(15,20,25,.22);z-index:90;display:none}
.cookie.show{display:block}
.cookie .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Misc */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.pill{display:inline-block;background:var(--chalk-soft);color:var(--chalk);border-radius:20px;padding:2px 10px;font-size:.82rem;font-weight:700}
.callout{border-left:5px solid var(--tape);background:var(--slab);padding:14px 16px;margin:0 0 1.2em}
.guide-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.guide-list li{border-bottom:1px solid var(--line);padding:16px 0}
.guide-list a{font:700 1.45rem/1.1 var(--display);text-decoration:none;color:var(--ink)}
.guide-list a:hover{color:var(--chalk)}
.guide-list p{margin:4px 0 0;color:var(--ink-2)}
.progress-meter{height:12px;background:var(--line);border-radius:6px;overflow:hidden;margin:8px 0}
.progress-meter span{display:block;height:100%;background:var(--tape)}
.byline{font-size:.92rem;color:var(--ink-2);margin-bottom:18px}
.mt0{margin-top:0}