/* PROD-RUN-160 — shared frame for the public website and the sign-in pages.
   Loaded last by public/base.html and product/auth_base.html. Visual only.
   Goal: moving between public pages and sign-in never shifts the logo,
   header, typeface or scrollbar, and the page change is a short, quiet fade. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
  --site-header-h: 80px;
  --site-canvas: #f7f7f4;
  --site-bar: rgba(247, 247, 244, .92);
  --site-bar-line: rgba(217, 222, 227, .75);
  --site-ink: #111315;
  --site-muted: #5d666d;
  --site-teal: #3a9c98;
  --site-teal-soft: #e3f1f0;
  --site-line-soft: #e9ecee;
}

/* The space for the scrollbar is always reserved, so a short page (sign-in)
   and a long page (home) place their content on exactly the same columns. */
html {
  scrollbar-gutter: stable;
}

/* Same-origin page changes cross-fade instead of cutting. The header keeps
   its own layer so it stays still while the page below changes. */
@view-transition {
  navigation: auto;
}

.v3-header,
.auth-header {
  view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}

::view-transition-group(site-header) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* One header geometry for every public page and sign-in: the logo sits on the
   shared anchor from brand-alignment.css (25px from the left, 29px from the
   top, 158px wide), which the product shell also uses. */
.v3-header {
  height: var(--site-header-h);
  padding-inline: var(--brand-screen-gutter);
}

.v3-brand {
  align-self: start;
  padding-top: var(--brand-screen-top);
}

.v3-brand img {
  width: var(--brand-lockup-width);
}

/* Letter-spacing was tuned for the wider system fallback. With Inter loaded,
   large headings need less negative tracking to stay readable. */
.hero h1,
.page-hero h1,
.vision-hero h1,
.contact-page h1,
.long-read h1 {
  letter-spacing: -.025em;
}

.section h2,
.dark-section h2,
.soft-section h2,
.long-read h2,
.benchmark-proof h3,
.section blockquote,
.long-read blockquote {
  letter-spacing: -.02em;
}

.auth-card h1,
.auth-visual h2 {
  letter-spacing: -.022em;
}

/* Sign-in continues the public site: same canvas, same header bar, light
   surfaces only, so the change from a public page does not flash dark. */
.auth-body {
  margin: 0;
  background: var(--site-canvas);
  color: var(--site-ink);
}

.auth-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--site-header-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding-inline: var(--brand-screen-gutter);
  border-bottom: 1px solid var(--site-bar-line);
  background: var(--site-bar);
  backdrop-filter: blur(16px);
}

.auth-back {
  color: var(--site-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.auth-back:hover {
  text-decoration: underline;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 520px);
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  min-height: calc(100vh - var(--site-header-h));
  padding: clamp(32px, 6vh, 72px) var(--brand-screen-gutter);
}

.auth-card {
  width: 100%;
  margin: 0;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--site-line-soft);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px -36px rgba(17, 19, 21, .22);
}

.auth-card h1 {
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.auth-visual {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px);
  border-radius: 20px;
  background: var(--site-teal-soft);
  color: var(--site-ink);
}

.auth-visual:after {
  right: -160px;
  bottom: -240px;
  border-color: rgba(58, 156, 152, .22);
  box-shadow: 0 0 0 65px rgba(58, 156, 152, .05), 0 0 0 130px rgba(58, 156, 152, .035);
}

.auth-visual h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.auth-visual p:not(.eyebrow) {
  color: #3a4247;
}

.auth-visual .eyebrow {
  color: #216b72;
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: minmax(0, 460px);
  }

  .auth-visual {
    display: none;
  }
}

@media (max-width: 700px) {
  :root {
    --site-header-h: 68px;
    --brand-screen-top: 19px;
    --brand-screen-gutter: 16px;
  }

  .auth-shell {
    align-items: start;
    padding-block: 28px 48px;
  }

  .auth-card {
    padding: 24px 20px;
  }

  .auth-back {
    display: none;
  }
}

/* PROD-RUN-166 — long Danish compound words ("virksomhedskontekst") in large
   headings must never make the page wider than a phone. Grid and flex
   children may shrink below their longest word, and headings hyphenate or
   break inside a word instead of widening the layout. */
:where(.hero, .split, .three-grid, .four-grid, .process-grid, .surface-grid,
  .solution-grid, .trust-grid, .status-box, .compare-grid, .pricing-card,
  .office-cards, .footer-grid, .tab-panel, .benchmark-proof, .roadmap-stage,
  .roadmap-items, .auth-shell) > * {
  min-width: 0;
}

.v3-body :is(h1, h2, h3, h4, blockquote),
.auth-body :is(h1, h2) {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* On phones, section headings scale with the screen so the longest Danish
   words fit whole; the word-breaking above is only a safety net. */
@media (max-width: 700px) {
  .section h2,
  .dark-section h2,
  .soft-section h2 {
    font-size: clamp(1.6rem, 8.2vw, 2.3rem);
  }

  .solution-card h2 {
    font-size: clamp(1.4rem, 7vw, 1.75rem);
  }
}