/* Verenity LLC company site styles. Loaded after brand.css (shared). */

/* ---- Heading font: Sora, self-hosted, SIL OFL 1.1 (fonts/OFL-sora.txt) ------------ */

@font-face {
  font-family: "Sora";
  src: url("fonts/Sora.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

/* ---- Palette: see shared/brand.css (royal blue, navy, orange, light gray; one source of truth). */
:root { --font-head: "Sora", var(--font); }

h1, h2, h3, .brand b { font-family: var(--font-head); }

/* Buttons are royal blue with white text in both themes (shared); orange on hover here. */
.btn.primary:hover { background: var(--orange); color: var(--on-orange); }
.btn.primary:focus-visible { outline-color: var(--orange); }

a:hover { text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.nav a:hover, .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--orange); }
.card:hover { border-color: var(--orange); }
.section-head h2::after {
  content: ""; display: block; width: 48px; height: 4px; border-radius: 2px;
  background: var(--orange); margin-top: 12px;
}

/* Header logo: the primary lockup only; light and dark images are swapped in shared/brand.css. */

.hero-simple {
  padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 5vw, 64px);
  background:
    radial-gradient(900px 420px at 85% -10%, var(--hero-glow), transparent 70%),
    radial-gradient(700px 360px at 0% 0%, var(--hero-glow), transparent 65%);
}
.hero-simple.compact { padding-bottom: clamp(8px, 2vw, 24px); }

.product { display: flex; flex-direction: column; }
.product .actions { margin-top: auto; padding-top: 8px; }
.product .live, .product .soon, .product .tbd { align-self: flex-start; }
.card.quiet { border-style: dashed; }

.live, .tbd {
  font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  display: inline-block; margin-bottom: 12px;
}
.live { background: var(--ok-bg); color: var(--ok-text); }
.tbd { background: var(--mid-bg); color: var(--mid-text); }

/* Text that still has to be written. Visibly different so it cannot ship unnoticed. */
.placeholder {
  border: 2px dashed var(--orange); background: var(--mid-bg); color: var(--mid-text);
  border-radius: var(--radius); padding: 18px 20px; max-width: 46em;
}
.placeholder p:last-child { margin-bottom: 0; }
.card p.placeholder-inline {
  color: var(--mid-text); background: var(--mid-bg); border-radius: 8px; padding: 8px 12px;
}

/* Value points, overview links, quote, contact details. */
.grid.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
ul.values { list-style: none; margin: 0; padding: 0; }
.value h3 { margin-bottom: 0.4em; }
.value h3::before {
  content: ""; display: block; width: 28px; height: 4px; border-radius: 2px;
  background: var(--orange); margin-bottom: 14px;
}
.strip .card { background: var(--bg); }
a.plain { color: var(--text); text-decoration: none; }
a.plain:hover { color: var(--accent); text-decoration: underline; }
.more { margin: 24px 0 0; font-weight: 700; }
.quote { margin: 0 auto 1.4em; max-width: 34em; }
.quote p { font-family: var(--font-head); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--text); margin: 0; }
.h3 { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.6em; line-height: 1.15; }
.details { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.details dt { font-weight: 700; }
.details dd { margin: 0; color: var(--muted); }
.details dd a { font-weight: 600; }
.section[id] { scroll-margin-top: 72px; }
@media (max-width: 520px) { .details { grid-template-columns: 1fr; gap: 2px; } .details dd { margin-bottom: 10px; } }
.product .fine { margin: 14px 0 0; }