/* =====================================================================
   TempTag marketing — shared brand layer (CHG-S440)
   Design tokens + the site chrome (nav, footer, skip link, focus ring).

   Loaded by EVERY marketing page, alongside exactly one page-level sheet:
     landing page  -> landing.css   (the Claude Design landing sections)
     every other   -> saas.css      (the existing page content vocabulary)

   Those two sheets both define .btn / .h2 / .eyebrow / .wrap for their own
   pages, so nothing here may claim those names — the chrome styles its own
   controls under .tt-nav / .tt-foot instead.
   ===================================================================== */
:root{
  --red:#C8102E; --red-dk:#A50E26; --red-dkr:#85091E; --red-tint:#FCE7EB; --pink:#EC8A95;
  --ink:#1c1a19; --ink-2:#26221f; --ink-3:#2e2a27; --ink-4:#3a3733;
  --body:#5b5650; --muted:#8a857d; --faint:#c9c5be;
  --canvas:#faf8f6; --canvas-2:#f6f3ef; --white:#fff;
  --line:#eae6e1; --line-2:#f0ece7;
  --green:#107C41;
  --sans:'Barlow',system-ui,-apple-system,sans-serif;
  --display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --wrap-w:1120px; --gutter:clamp(20px,5vw,48px);
}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--red);padding:12px 18px;font-weight:700;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ============================== NAV ================================= */
.tt-nav{display:flex;align-items:center;gap:36px;padding:0 48px;height:104px;background:var(--red);position:sticky;top:0;z-index:50}
.tt-nav .brand img{height:90px;width:auto;display:block}
.tt-nav .links{display:flex;gap:26px;margin-left:auto;font:600 15px var(--sans)}
.tt-nav .links a{color:rgba(255,255,255,.85);text-decoration:none}
.tt-nav .links a:hover,.tt-nav .links a.active{color:#fff}
.tt-nav .actions{display:flex;gap:12px;align-items:center}
.tt-nav .signin{font:600 15px var(--sans);color:#fff;text-decoration:none}
.tt-nav .signin:hover{text-decoration:underline}
.tt-nav .navbtn{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--red);font:700 15px var(--sans);padding:10px 20px;border-radius:6px;text-decoration:none;transition:background .15s,transform .12s}
.tt-nav .navbtn:hover{background:var(--red-tint);transform:translateY(-1px)}
.tt-nav .burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.tt-nav .burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0}

/* ============================== FOOTER ============================== */
.tt-foot{background:var(--ink);color:rgba(255,255,255,.65);padding:64px var(--gutter) 40px}
.tt-foot .inner{max-width:var(--wrap-w);margin:0 auto}
.tt-foot .cols{display:flex;gap:64px;flex-wrap:wrap}
.tt-foot .about{flex:1.4;min-width:260px}
.tt-foot .about img{height:26px;width:auto;display:block;margin-bottom:14px}
.tt-foot .about p{font:400 14.5px/1.6 var(--sans);margin:0;max-width:320px}
.tt-foot .fcol{display:flex;flex-direction:column;gap:9px;font:500 14.5px var(--sans)}
.tt-foot .fcol h4{font:700 13px var(--sans);letter-spacing:2px;text-transform:uppercase;color:#fff;margin:0 0 4px}
.tt-foot .fcol a{color:rgba(255,255,255,.65);text-decoration:none}
.tt-foot .fcol a:hover{color:#fff}
.tt-foot .legal{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:26px}
.tt-foot .legal .a{font:500 14px var(--sans)}
.tt-foot .legal .a a{color:var(--pink);font-weight:700;text-decoration:none}
.tt-foot .legal .a a:hover{color:#fff}
.tt-foot .legal .c{font:400 13.5px var(--sans);color:rgba(255,255,255,.45)}

@media (max-width:900px){
  .tt-nav{padding:0 var(--gutter);height:76px;gap:16px}
  .tt-nav .brand img{height:60px}
  .tt-nav .links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--red-dk);flex-direction:column;gap:0;padding:8px 0;margin:0}
  .tt-nav .links a{padding:13px var(--gutter);color:#fff}
  .tt-nav .links.open{display:flex}
  .tt-nav .navbtn{display:none}
  .tt-nav .burger{display:block;order:3}
  .tt-nav .actions{margin-left:auto}
  .tt-foot .cols{gap:32px}
}