/* RecensLabs — foundation, shared chrome, footer.
   The palette and type are INSPINIA's landing page (vendor/inspinia, landing.html):
   Open Sans, #676a6c text, #1ab394 navy accent, #f4f4f4 gray sections, #e7eaec
   rules. public/css/landing.css carries the landing page's components. */
:root{
  --paper:#f4f4f4;
  --paper-dim:#e7eaec;
  --ink:#676a6c;
  --ink-soft:#2f4050;
  --indigo:#1ab394;
  --indigo-soft:#179d82;
  --coral:#23c6c8;
  --slate:#999c9e;
  --slate-light:#aeaeae;
  --white:#FFFFFF;
  --font-display:'Open Sans', helvetica, arial, sans-serif;
  --font-body:'Open Sans', helvetica, arial, sans-serif;
  --font-mono:'Open Sans', helvetica, arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--font-body); background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
::selection{background:var(--indigo); color:var(--white);}

/* HEADER / NAV */
header{position:sticky; top:0; z-index:50; background:rgba(247,247,251,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--paper-dim);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.nav-right{display:flex; align-items:center; gap:36px;}
.nav-links{display:flex; gap:30px;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--slate); transition:color 0.15s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}

/* LOGO LOCKUP */
.logo{display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--ink);}
.logo-mark{display:inline-flex; filter:drop-shadow(0 5px 12px rgba(26,179,148,0.3));}
.logo-mark svg{display:block; border-radius:10px;}
.logo-word{color:var(--ink);}

/* BUTTONS */
.btn{font-family:var(--font-body); font-weight:700; font-size:14px; padding:12px 22px; border-radius:100px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.btn-ink{background:var(--indigo); color:var(--white);}
.btn-ink:hover{background:var(--indigo-soft);}
.btn-indigo{background:var(--indigo); color:var(--white);}
.btn-indigo:hover{background:var(--indigo-soft);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink);}
/* The shared client views (auth, invoices, portal) name their buttons by role,
   not colour, so each brand paints them: the main action is indigo here,
   amber on recenshost. */
.btn-cta{background:var(--indigo); color:var(--white); box-shadow:0 10px 24px -12px rgba(26,179,148,0.7);}
.btn-cta:hover{background:var(--indigo-soft);}
.btn-primary{background:var(--indigo); color:var(--white);}
.btn-primary:hover{background:var(--indigo-soft);}
.btn-plain{background:transparent; color:var(--slate); padding:12px 6px;}
.btn-plain:hover{color:var(--ink);}
.btn-lg{padding:15px 28px; font-size:15px;}
.btn{transition:transform 0.14s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;}
.btn:active{transform:translateY(1px);}
:focus-visible{outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px;}

/* SHARED SECTION HEADS */
.section-head{margin-bottom:44px;}
h2{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.8vw,32px); letter-spacing:-0.01em; margin-bottom:12px;}
.section-head p{color:var(--slate); font-size:15.5px;}

/* FOOTER */
footer{border-top:1px solid var(--paper-dim); padding:56px 0 32px;}
footer .logo{margin-bottom:14px;}
.footer-about{color:var(--slate); font-size:13.5px; max-width:260px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px;}
.footer-col h4{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); margin-bottom:16px;}
.footer-col a{display:block; font-size:13.5px; color:var(--ink); margin-bottom:10px;}
.footer-col a:hover{color:var(--indigo);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--paper-dim); font-family:var(--font-mono); font-size:11.5px; color:var(--slate-light);}

@media(max-width:1000px){
  .nav-links{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}