/* Gapline brand system, v2 ("the model sheet").
   The page reads like a reviewed financial model: cool paper, dark ink, a serif for headlines, and color that means something.
   Teal is for actions. Blue is for numbers you can change (the modeling convention for inputs). Red is only ever the gap.
   The logo uses deep teal and ink on light surfaces; the footer uses the light-on-dark version. */
:root {
  --paper: #F7F9FA; --white: #FFFFFF; --sunken: #EEF2F4;
  --ink: #0F1B24; --ink-2: #34434E; --slate: #5E6D77; --line: #DCE3E7; --line-2: #C3CDD3;
  --night: #0F1B24; --night-2: #16252F; --night-line: #253641;
  --teal: #00D8DB; --teal-deep: #0A7C82; --teal-ink: #08666B; --teal-wash: #E4F3F3;
  --input: #1F4BD1; --input-wash: #EEF2FD;
  --gap: #C8372D; --gap-wash: #FBECEA; --gap-deep: #A92B22;
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px; --pad: clamp(16px, 4vw, 40px); --r: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 3px; }
.container { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; margin: 0; letter-spacing: -0.012em; text-wrap: balance; color: var(--ink); }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

/* Nav: white, with the light logo */
.gl-nav { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.gl-nav .container { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand svg { width: 26px; height: auto; }
.brand span { font: 600 20px/1 "Sora", var(--f-body); letter-spacing: -0.03em; }
.gl-links { display: flex; align-items: center; gap: 28px; }
.gl-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.gl-links a:hover { color: var(--ink); }
.gl-menu { display: none; background: none; border: 0; color: var(--ink); padding: 8px; cursor: pointer; }
@media (max-width: 860px) {
  .gl-links { position: fixed; inset: 60px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); padding: 8px var(--pad) 20px; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .25s ease; }
  .gl-links.open { transform: none; }
  .gl-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .gl-links .btn { margin-top: 14px; justify-content: center; }
  .gl-menu { display: inline-flex; }
}

/* Buttons: squared, quiet, one primary color */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--f-body); text-decoration: none; border-radius: var(--r); padding: 14px 20px; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--teal-deep); color: #fff; }
.btn-primary:hover { background: var(--teal-ink); }
.btn-outline { color: var(--ink); border-color: var(--line-2); background: var(--white); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: 10px 14px; font-size: 14.5px; }
.gl-nav .btn.btn-primary { background: var(--teal-deep); color: #fff; border: 0; border-radius: var(--r); }
.gl-nav .btn.btn-primary:hover { background: var(--teal-ink); }

/* Footer */
.gl-foot { background: var(--night); color: #93A3AD; padding: 56px 0 40px; font-size: 14.5px; }
.gl-foot .container { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.gl-foot h4 { color: #fff; font: 600 14px var(--f-body); margin: 0 0 12px; }
.gl-foot a { color: #93A3AD; text-decoration: none; display: block; padding: 4px 0; }
.gl-foot a:hover { color: #fff; }
.gl-foot .brand span { color: #fff; }
.gl-foot .fine { grid-column: 1 / -1; border-top: 1px solid var(--night-line); padding-top: 22px; margin-top: 8px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .gl-foot .container { grid-template-columns: 1fr 1fr; } .gl-foot .container > div:first-child { grid-column: 1 / -1; } }

/* No scroll-reveal: content is simply there. The class stays harmless for older markup. */
.reveal { opacity: 1; transform: none; }