/* =========================================================================
   libertas-brand.css   (v2 — mapped to login.css selectors)

   Load AFTER login.css. Everything is scoped to body.tenant-libertas, which
   your template already sets, so the Synalytix landing is untouched.

   What this fixes:
     1. Loads a real display face. login.css named "Coluna" but nothing ever
        loaded it, so the stack resolved to Bebas Neue at a faked 700 —
        the mushy headline. Anton is self-hosted here under the OFL.
     2. Loosens tracking and leading back toward the real Coluna setting.
     3. Restores rounding on the hero art card.
     4. Leaves the .hero background stack in login.css alone — the radial
        gradients + starfield are what give it depth.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Display face — Anton

   Anton, SIL Open Font License 1.1. Free for commercial use, including
   webfont embedding; no purchase, no attribution required in the UI. Keep
   OFL.txt alongside the font file to satisfy the license.

   The shipped file is subset to Latin-1 plus the punctuation this site
   uses, and self-hosted so font-src stays 'self' in the CSP.

   The weight range is declared 400 700 even though Anton has one weight.
   login.css asks for 700 in several places; declaring the range means those
   requests resolve to this face instead of the browser reaching for a
   heavier family or faking one.

   Coluna is the real brand face — see the commented block below. Drop the
   licensed woff2 in place, uncomment, and put "Coluna" at the front of
   --font-display to switch over. Nothing else needs to change.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Anton";
  src: url("/fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Requires a Business License from jesuismonreve.org — see notes.
@font-face {
  font-family: "Coluna";
  src: url("/fonts/coluna-condensed-bold.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
*/


/* -------------------------------------------------------------------------
   2. Tokens

   Overrides the --font-display declared in login.css. Tracking and leading
   are variables because they're the two values to retune if you later swap
   Anton for licensed Coluna — the faces need different settings.
   ------------------------------------------------------------------------- */

body.tenant-libertas {
  --font-display: "Anton", "Bebas Neue", Impact, sans-serif;

  --display-tracking: 0.03em;   /* Anton is drawn tight; this opens it toward Coluna */
  --display-leading: 1.02;      /* was 0.95 — the real setting has air between lines */
  --rule-weight: 0.09em;        /* the underline rule from the wordmark */
  --rule-gap: 0.16em;
  --brand-accent: #1f6feb;
}


/* -------------------------------------------------------------------------
   3. Hero headline

   Single string. max-width controls where it breaks — 15ch puts the break
   after "CAPITALIZE" at this size. Widen it to let more onto line one,
   narrow it to break earlier.
   ------------------------------------------------------------------------- */

body.tenant-libertas .hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;            /* no faux bold — that was the mushy headline */
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  font-size: clamp(56px, 8.6vw, 104px);
  max-width: 15ch;
  margin: 0 auto 18px;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}

/* The headline is a single string now, so no rule under it — the wordmark
   in the nav is the only place the device appears. If you want it back on
   the headline, uncomment this and it will span the h1's box:

   body.tenant-libertas .hero h1 {
     border-bottom: var(--rule-weight) solid currentColor;
     padding-bottom: var(--rule-gap);
   }
*/

body.tenant-libertas .hero p {
  max-width: 56ch;
  margin: 0 auto 2rem;
}


/* -------------------------------------------------------------------------
   4. Logo wordmark

   Set in the display face with the rule underneath, so the nav reads as the
   Libertas lockup rather than as bold Inter.
   ------------------------------------------------------------------------- */

body.tenant-libertas .logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
  border-bottom: var(--rule-weight) solid currentColor;
  padding-bottom: var(--rule-gap);
}


/* -------------------------------------------------------------------------
   5. Section headings

   .hero h1 was the only heading using the display face, which is why the
   page loses the brand voice below the fold. These are the class names
   landing.hbs actually emits.
   ------------------------------------------------------------------------- */

body.tenant-libertas .section-title,
body.tenant-libertas .cta-band h2,
body.tenant-libertas .login-description h2,
body.tenant-libertas .footer-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.05;
}

body.tenant-libertas .section-title {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
}

body.tenant-libertas .footer-section h3 {
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}

/* The 01/02/03/04 badges. Display face at this size needs a nudge down and
   a hair of extra tracking to sit centered in the circle. */
body.tenant-libertas .how-step-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

body.tenant-libertas .how-step-body h3,
body.tenant-libertas .security-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.2rem;
}


/* -------------------------------------------------------------------------
   6. Hero art card

   Rounder and lifted further off the field. 24px reads square next to type
   this heavy; 32px gives the card its own shape.
   ------------------------------------------------------------------------- */

body.tenant-libertas .hero-art-card {
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    0 2px 0 rgba(255, 255, 255, 0.10) inset;
}

body.tenant-libertas .hero-art-img {
  border-radius: 31px;   /* stops the image corner peeking past the card radius */
}

body.tenant-libertas .hero-art {
  margin-top: 2.75rem;
}


/* -------------------------------------------------------------------------
   7. Mobile

   Tracking that reads correctly at 84px is too open at 44px. Tighten it and
   let the headline break at ~12ch.
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  body.tenant-libertas {
    --display-tracking: 0.015em;
  }

  body.tenant-libertas .hero h1 {
    max-width: 12ch;
    font-size: clamp(40px, 12vw, 64px);
  }

  body.tenant-libertas .hero-art-card {
    border-radius: 24px;
  }

  body.tenant-libertas .hero-art-img {
    border-radius: 23px;
  }
}