/* Contractor OS | shared styles. Brand: Notion Providers amber, dark, and white. */
:root{
  --amber:#E29700;--amber-d:#C98700;--amber-t:#9A6600;--amber-line:#EBC06A;--amber-soft:#FFF6E3;
  --ink:#0B0B0C;--body:#3D3D42;--mu:#6E6E75;--line:#E7E7EA;--bg2:#F7F7F8;--tile:#F2F2F3;
  --dark:#0E0E0F;--dark2:#17171A;--dline:#2A2A2E;--dmu:#A1A1A8;--green:#1BA246;--green-t:#15803D;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.65 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:'Montserrat',system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 16px}}
.amber{color:var(--amber)}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes travel{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes travelY{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}.js .feed li{opacity:1}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border:0;border-radius:10px;background:var(--amber);color:var(--ink);font:600 16px 'Montserrat',sans-serif;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{background:#F0A410;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(226,151,0,.8)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-outline:hover{background:#fff;border-color:var(--amber);box-shadow:none}
.btn-lg{padding:19px 34px;font-size:17px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(14,14,15,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--dline)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.header img{height:38px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;color:#D4D4D8}
.nav a:not(.btn):hover{color:#fff}
.nav .btn{padding:11px 18px;font-size:14px}
@media (max-width:980px){.nav a:not(.btn){display:none}.header img{height:32px}}
@media (max-width:420px){.nav .btn{padding:10px 14px;font-size:13px}}

/* ---------- Eyebrow pill + section heads ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--amber-soft);color:var(--amber-t);font:600 12.5px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.dark .eyebrow{background:rgba(226,151,0,.12);color:#F5B73B}
.sec{padding:112px 0}
@media (max-width:720px){.sec{padding:80px 0}}
.sec-gray{background:var(--bg2)}
.dark{background:var(--dark);color:#fff}
.head{text-align:center;max-width:760px;margin:0 auto 60px}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12}
.head p{margin-top:18px;color:var(--body);font-size:18px}
.dark .head p{color:var(--dmu)}

/* ---------- Icon tile ---------- */
.ico{width:48px;height:48px;border-radius:12px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;color:var(--amber-d);flex:none}
.ico svg{width:24px;height:24px}

/* ---------- Footer ---------- */
footer{background:var(--dark);color:var(--dmu);border-top:1px solid var(--dline)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:48px;padding-bottom:48px;font-size:15px}
footer img{height:44px;width:auto;display:block}
footer .links{display:flex;gap:10px 28px;flex-wrap:wrap}
footer a:hover{color:#fff}