/* =========================================================
   CALCULAXY — BASE STYLESHEET
   Shared on every page: variables, reset, typography, layout helpers
   Theme: #38b6ff + white | Font: Open Sans
   ========================================================= */

:root{
  --primary:#38b6ff;
  --primary-dark:#1c98e6;
  --primary-tint:#eaf7ff;
  --ink:#16232f;
  --slate:#56697c;
  --white:#ffffff;
  --surface:#f4f9fd;
  --border:#e0ecf5;
  --radius:10px;
  --container:1180px;
  --shadow-sm:0 1px 2px rgba(22,35,47,0.06);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Open Sans', Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Open Sans', Arial, sans-serif;
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
  margin:0 0 14px;
}
p{color:var(--slate);margin:0 0 16px;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
img,svg{display:block;max-width:100%;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:200;
}
.skip-link:focus{left:0;}

/* Reusable section heading, used on the homepage and on future category/tool pages */
.section-head{text-align:left;max-width:580px;margin-bottom:36px;}
.section-head h2{font-size:30px;}
.section-head p{font-size:15.5px;margin:0;}

/* Reusable breadcrumb trail, used on every inner page (About, Contact, and later
   every category/tool page) so visitors and Google both know where they are */
.breadcrumb{padding:16px 0;border-bottom:1px solid var(--border);background:var(--surface);}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--slate);list-style:none;margin:0;padding:0;}
.breadcrumb li{display:flex;align-items:center;gap:6px;list-style:none;}
.breadcrumb li:not(:last-child)::after{content:"/";color:#b7c6d1;}
.breadcrumb a{color:var(--slate);font-weight:600;}
.breadcrumb a:hover{color:var(--primary-dark);}
.breadcrumb li[aria-current="page"]{color:var(--ink);font-weight:600;}

/* Reusable page header band, used on About/Contact/Privacy/Terms and future pages */
.page-header{padding:48px 0 40px;text-align:left;}
.page-header h1{font-size:34px;margin-bottom:10px;}
.page-header p{font-size:16px;max-width:640px;margin:0;}

/* Reusable CTA button, matches the homepage buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:9px;font-weight:700;font-size:15px;cursor:pointer;
  border:none;font-family:inherit;transition:background .15s ease, color .15s ease, transform .15s ease;
}
.btn-primary{background:var(--primary);color:var(--white);}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);}
.btn-outline{background:var(--white);color:var(--ink);border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary-dark);}
.browse-all-link{color:var(--primary-dark) !important;font-weight:800 !important;}
.browse-all-link::after{content:" \2192";}