/* Leap landing — shared styles. Foundations v2.1: felt is the table, paper rests on it.
   Same tokens, felt and type as the app (src/app/foundations.css); the landing is static, so they are restated here. */
/* Schibsted Grotesk for work and every figure; Newsreader for moments. Self-hosted, variable, Latin. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --work: "Schibsted Grotesk", system-ui, sans-serif; --moment: "Newsreader", Georgia, serif;
  --ivy: #234a1f; --ivy-hi: #2f5f29; --ivy-lo: #1a3a17; --lime: #b9d147; --lime-edge: #7d9229; --red: #b3341d;
  --cream: #f3efe2; --cream-muted: rgb(243 239 226 / .78); --cream-faint: rgb(243 239 226 / .55); --cream-line: rgb(255 255 255 / .16);
  --ink: #16130f; --muted: rgb(22 19 15 / .64); --faint: rgb(22 19 15 / .42); --line: rgb(22 19 15 / .1);
  --sheet: #f8f4e8; --paper: #f6f2e7; --em: var(--lime);
  --sheet-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 1px rgb(0 0 0 / .22), 0 3px 6px -2px rgb(0 0 0 / .25), 0 28px 56px -18px rgb(2 12 2 / .6);
  --felt-clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--paper); font-family: var(--work); color: var(--cream); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
em { font-style: italic; }
.num { font-variant-numeric: tabular-nums; }
::selection { background: var(--lime); color: var(--ink); }

/* The page is ivory paper; the felt is a layer laid onto it where it belongs: the whole page while the home's
   camera dives into the card (revealed by a mask, ambient.js), and the top of the explanatory pages.
   Felt = colour + one lamp + side shade, then the fibre (overlay) and the clouds (soft-light). Values from the felt study. */
.frame { position: fixed; inset: 0; isolation: isolate; background: var(--paper); }
.felt { isolation: isolate; background-color: var(--ivy);
  background-image: radial-gradient(ellipse 62% 48% at 50% 10%, rgb(232 244 196 / .12), transparent 72%),
    linear-gradient(90deg, rgb(4 14 4 / .32), transparent 24%, transparent 76%, rgb(4 14 4 / .32));
  background-repeat: no-repeat; }
.felt::before, .felt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.felt::before { background: url("/textures/felt-ivy.webp") 0 0 / 666px 666px repeat; mix-blend-mode: overlay; opacity: .3; }
.felt::after { background: var(--felt-clouds) 0 0 / 1170px 1170px repeat; mix-blend-mode: soft-light; opacity: .32; }
/* Text tokens. On the felt "cream" is cream; on paper the same names resolve to ink, so every rule written for the
   felt reads on ivory too. The headline's emphasis is lime on felt, ivy on paper (lime on ivory is unreadable). */
.paper { --cream: var(--ink); --cream-muted: var(--muted); --cream-faint: rgb(22 19 15 / .55); --cream-line: rgb(22 19 15 / .14); --em: var(--ivy); }
.on-felt, .page.is-dark, .mock { --cream: #f3efe2; --cream-muted: rgb(243 239 226 / .78); --cream-faint: rgb(243 239 226 / .55); --cream-line: rgb(255 255 255 / .16); --em: var(--lime); }
.paper .sheet-paper { background: #fffdf8; box-shadow: 0 1px 2px rgb(22 19 15 / .08), 0 12px 32px -16px rgb(22 19 15 / .22); }
.page { position: relative; height: 100%; overflow: hidden; color: var(--cream); }
.page.scroll { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- the header: the app's grammar, straight on the felt. Mark (black, never recoloured) + "Leap" in cream,
   navigation with the active item underlined in lime, the language, sign-in, and the one lime action. */
.band { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 4px;
  width: min(1160px, calc(100% - 80px)); height: 72px; white-space: nowrap; }
.page.scroll .band { position: relative; transform: none; left: auto; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 0; margin-right: auto; text-decoration: none; }
.brand .mark { width: 24px; height: 24px; overflow: visible; }
.brand .word { font: 760 18px/1 var(--work); letter-spacing: -.02em; color: var(--cream); }
.brand .chev { transition: transform .9s cubic-bezier(.22, 1, .36, 1); transform-box: fill-box; }
.brand:hover .chev { transform: translateX(28%); }
.band .sep { width: 1px; height: 20px; background: var(--cream-line); margin: 0 8px; }
.band a.nav { position: relative; padding: 10px 2px; margin: 0 12px; line-height: 1.1; font-size: 14px; font-weight: 500; color: var(--cream-muted); text-decoration: none; transition: color .2s; }
.band a.nav:hover { color: var(--cream); }
.band a.nav[aria-current="page"] { color: var(--cream); box-shadow: inset 0 -2px 0 var(--lime); }
.lang { display: inline-flex; gap: 5px; padding: 10px; color: var(--cream-faint); cursor: pointer; background: none; border: 0; font: 500 13px var(--work); }
.lang b { font-weight: 600; color: var(--cream); }
.signin { padding: 10px 12px; margin-right: 8px; font-size: 14px; font-weight: 500; line-height: 1.1; color: var(--cream); text-decoration: none; }
.signin:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* The one primary action: the lit lime pill with ink text (src/app/foundations.css .leap-btn--primary). */
.btn-cta, .btn-ink { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; cursor: pointer;
  height: 48px; padding: 0 24px; font: 600 16px/1 var(--work); color: var(--ink);
  background: linear-gradient(180deg, #c6dc5a 0%, #b2ca3f 100%);
  border: 1px solid rgb(125 146 41 / .4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45);
  text-decoration: none; white-space: nowrap; transition: background .15s, filter .15s, transform .1s; }
.btn-cta:hover, .btn-ink:hover { background: linear-gradient(180deg, #cfe265 0%, #b9d147 100%); }
.btn-cta:active, .btn-ink:active { transform: translateY(1px); filter: brightness(.96); }
.band .btn-cta { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-ink:disabled { opacity: .6; cursor: not-allowed; }
/* Focus: lime on the felt, ivy on a sheet. */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sheet-card :focus-visible, .on-sheet :focus-visible { outline-color: var(--ivy); }

/* phones: the lockup, FR / EN, the menu */
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--cream-line); cursor: pointer; place-items: center; background: transparent; }
.menu-btn i { display: block; width: 15px; height: 1.5px; background: var(--cream); border-radius: 2px; box-shadow: 0 -5px 0 var(--cream), 0 5px 0 var(--cream); }
.menu { position: absolute; top: 68px; right: 16px; left: 16px; z-index: 21; display: none; flex-direction: column; padding: 8px; border-radius: 16px;
  background: var(--sheet); color: var(--ink); box-shadow: var(--sheet-shadow); }
.page.scroll .menu { position: fixed; }
.menu.open { display: flex; }
.menu a { padding: 14px; font-size: 16px; font-weight: 500; text-decoration: none; border-radius: 8px; }
.menu a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--lime); }
.menu :focus-visible { outline-color: var(--ivy); }
.menu .btn-cta { margin-top: 8px; width: 100%; }

/* ---------- fill dots: a 10px circle next to its word, as in the app */
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.dot.ring { border: 1.5px solid currentColor; }
.dot.half { border: 1.5px solid currentColor; background: conic-gradient(currentColor 0 50%, transparent 50% 100%); }
.dot.lime { background: var(--lime); box-shadow: inset 0 0 0 1px rgb(125 146 41 / .55); }
.dot.red { background: var(--red); }
.state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ---------- sheets: ivory paper resting on the felt, no texture */
.sheet-paper { background: var(--sheet); color: var(--ink); border-radius: 16px; box-shadow: var(--sheet-shadow); }

/* ---------- request-access form: one ivory sheet over dimmed felt */
.sheet { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
.sheet::backdrop { background: rgb(10 22 9 / .55); }
.sheet[open] { display: grid; place-items: center; }
.sheet-card { position: relative; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 32px 24px 24px; border-radius: 16px;
  background: var(--sheet); color: var(--ink); box-shadow: var(--sheet-shadow); }
.sheet[open] .sheet-card { animation: sheet-in .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } }
.sheet h2 { font: 500 32px/1.15 var(--moment); letter-spacing: -.015em; }
.sheet .lead { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.sheet form { margin-top: 24px; display: grid; gap: 16px; }
.sheet label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.sheet input, .sheet select { width: 100%; height: 48px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(22 19 15 / .18); background: #fffdf7; font: 400 16px var(--work); color: var(--ink); }
.sheet select { appearance: none; padding-right: 36px;
  background: #fffdf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2316130f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat; }
.sheet input:focus, .sheet select:focus { outline: 2px solid var(--ivy); outline-offset: 1px; border-color: transparent; }
.sheet .invalid { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.sheet .field-error { margin-top: -2px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--red); }
.sheet .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.sheet .btn-ink { margin-top: 8px; width: 100%; }
.sheet .close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgb(22 19 15 / .14); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.sheet .close svg { width: 12px; height: 12px; }
.sheet .thanks { padding: 32px 0 12px; font: 500 32px/1.15 var(--moment); letter-spacing: -.015em; }
.sheet .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sheet .form-error { font-size: 14px; line-height: 1.45; color: var(--red); }

/* ---------- footer (inner pages) */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: min(1160px, calc(100% - 80px)); margin: 0 auto; padding: 24px 0; font-size: 12px; color: var(--cream-faint); border-top: 1px solid var(--cream-line); }
.foot nav { display: flex; gap: 16px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cream); }

@media (max-width: 900px) {
  .band { width: auto; left: 16px; right: 16px; transform: none; height: 64px; justify-content: space-between; }
  .page.scroll .band { left: auto; right: auto; width: auto; margin: 0 16px; }
  .band .nav, .band .sep, .band .signin, .band .btn-cta { display: none; }
  .menu-btn { display: grid; }
  .foot { width: calc(100% - 48px); flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Text settles in on arrival (the app's quiet entrance). Home and the inner pages both use it. */
@keyframes hero-drop { from { opacity: 0; transform: translateY(10px); } }