/* RecensLabs — foundation, shared chrome, footer.
   The palette, type, radius, spacing and shadow scales are the tokens at the top
   of public/css/landing.css, the skin both brands share. The names below are
   this brand's older aliases for them. */
:root{
  --paper:var(--lp-gray);
  --paper-dim:var(--lp-border);
  --ink:var(--lp-text);
  --ink-soft:var(--lp-dark);
  --indigo:var(--navy);
  --indigo-soft:var(--navy-dark);
  --coral:var(--info);
  --slate:var(--lp-muted);
  --slate-light:var(--lp-faint);
  --white:#fff;
  --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:32px;}
.nav-links{display:flex; gap:32px;}
.nav-links a{font-size:var(--fs-base); 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:12px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); 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:var(--r-md);}
.logo-word{color:var(--ink);}

/* BUTTONS */
.btn{font-family:var(--font-body); font-weight:700; font-size:var(--fs-sm); padding:12px 24px; border-radius:var(--r-pill); 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:var(--shadow-md);}
.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:16px 28px; font-size:var(--fs-base);}
.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:var(--r-sm);}

/* SHARED SECTION HEADS */
.section-head{margin-bottom:48px;}
h2{font-family:var(--font-display); font-weight:700; font-size:var(--fs-3xl); letter-spacing:-0.01em; margin-bottom:12px;}
.section-head p{color:var(--slate); font-size:var(--fs-base);}

/* 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:var(--fs-sm); 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:var(--fs-xs); text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); margin-bottom:16px;}
.footer-col a{display:block; font-size:var(--fs-sm); 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:var(--fs-xs); color:var(--slate-light);}

@media(max-width:1000px){
  .nav-links{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
/* A phone holds the logo and one button, not two: with "My account" beside it,
   "Start a project" wrapped to three lines and ran off the right edge (the page
   scrolled sideways). The footer and every page body still carry that link. */
@media(max-width:480px){
  .wrap{padding:0 16px;}
  .nav-right{gap:12px;}
  .nav-right .btn-ink{display:none;}
}