/* oskett.com. One reading column with small, careful details; the product shown as it is,
   standing in real landscapes. IBM Plex Sans to read, Lora italic for display, IBM Plex Mono
   for small labels. Blue is kept for focus and links.
   Light only: the page has no dark scheme. */
:root {
  --bg: #F4F6F5; --card: #FFFFFF; --line: #E2E6E4; --line-strong: #CFD5D2;
  --text: #1C2021; --text-2: #4E5658; --muted: #6C7577;
  --blue: #1F6FEB;
  --sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --serif: 'Lora', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --column: 680px;
  --wide: 1120px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.column { width: 100%; max-width: calc(var(--column) + 48px); margin: 0 auto; padding: 0 24px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- nav ---------- */
/* Fixed so it stays through the scroll. Over the sky it is clear with white type (the .hero rules
   below); once the page moves past the sky, site.js adds .solid and it becomes a frosted light bar. */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease; }
.nav-wrap.solid { background: rgba(244, 246, 245, .78); border-bottom-color: rgba(28, 32, 33, .08); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); }
.nav { max-width: calc(var(--wide) + 48px); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; }
.mark { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; text-decoration: none; }
.mark.sm { font-size: 18px; }
.nav-links { display: flex; gap: 24px; }
.nav-links a, .nav-signin { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.nav-links a:hover, .nav-signin:hover { color: var(--text); }
.nav-signin { margin-left: auto; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); background: var(--card); box-shadow: 0 1px 1px rgba(0,0,0,.04); }

/* ---------- hero ---------- */
.hero { text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 5px 12px 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--text-2); box-shadow: 0 1px 1px rgba(0,0,0,.03); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 0 rgba(46,158,91,.5); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 6px rgba(46,158,91,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); } }
h1 { margin: 0 auto; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(38px, 5.6vw, 60px); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.lede { margin: 22px auto 0; max-width: 46ch; color: var(--text-2); font-size: 17px; text-wrap: pretty; }

/* ---------- sign-up ---------- */
.join { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; margin: 32px auto 0; padding: 5px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -20px rgba(0,0,0,.25); }
.join input { flex: 1 1 200px; min-width: 0; height: 42px; padding: 0 12px; border: none; background: transparent; color: var(--text); font: inherit; font-size: 15.5px; outline: none; }
.join input::placeholder { color: var(--muted); }
.join:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,111,235,.14); }
.join input[aria-invalid="true"] { color: #B4350A; }
.join button {
  height: 42px; padding: 0 18px; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap;
  color: #fff; border: 1px solid #16191B;
  background: linear-gradient(180deg, #474C50 0%, #26292C 60%, #1B1D1F 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.18);
  transition: filter .12s ease, transform .12s ease;
}
.join button:hover { filter: brightness(1.14); }
.join button:active { transform: scale(.97); transition-duration: .08s; }
.join-note { flex-basis: 100%; margin: 4px 8px 6px; font-size: 13.5px; color: var(--text-2); text-align: left; }
.join-note a { color: var(--text); }

/* ---------- the stage ---------- */
/* The sky is a gradient from deep blue to a pale horizon, so the type is white. The land is a
   cutout of scene-valley with the sky removed, drawn twice: a blurred copy behind for a soft
   glow where land meets sky, and the sharp one on top. It closes the hero and fades into
   the page. */
.hero {
  /* z-index lifts the hero's own layer, and the fixed nav inside it, above everything that follows. */
  position: relative; z-index: 10; overflow: hidden; isolation: isolate;
  --on-sky: #FFFFFF; --on-sky-2: rgba(255,255,255,.86); --on-sky-3: rgba(255,255,255,.66);
  color: var(--on-sky);
  background: linear-gradient(180deg, #1238C9 0%, #1D5FE3 22%, #3A8EF2 56%, #7DBDF7 76%, #BFE0FA 90%, #DCEEF9 100%);
}
.hero { padding-top: 64px; }
.hero .column { padding-top: 88px; }
.hero .mark { color: var(--on-sky); }
.hero .nav-links a { color: var(--on-sky-2); }
.hero .nav-links a:hover { color: var(--on-sky); }
.hero .mark, .hero .nav-links a { transition: color .25s ease; }
.nav-wrap.solid .mark { color: var(--text); }
.nav-wrap.solid .nav-links a { color: var(--text-2); }
.nav-wrap.solid .nav-links a:hover { color: var(--text); }
.nav-wrap.solid .nav-signin { border-color: var(--line-strong); box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.hero .nav-signin { color: #12202C; background: #fff; border-color: #fff; box-shadow: 0 1px 2px rgba(10,30,90,.2); }
.hero .nav-signin:hover { background: rgba(255,255,255,.88); }
.nav-signin { transition: background-color .15s ease, transform .1s ease-out; }
.nav-signin:active { transform: scale(.96); }
.hero .pill { color: var(--on-sky); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero .pulse { background: #5BE08F; }
.hero h1 { text-shadow: 0 1px 24px rgba(10,30,120,.18); }
.hero .lede { color: var(--on-sky-2); }
.hero .join { background: #fff; border-color: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(10,30,90,.14), 0 20px 44px -18px rgba(10,30,110,.55); }
.hero .join input { color: #1C2021; }
.hero .join input::placeholder { color: #6C7577; }
.hero .join-note { color: #4E5658; }
/* Only the ridges and the meadow below them show; the rocky foreground is cropped away. */
.land { position: relative; z-index: 2; margin-top: 40px; height: clamp(200px, 20vw, 380px); pointer-events: none; }
.land img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.land-glow { filter: blur(36px) saturate(1.15); opacity: .55; }
.land::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 62%; background: linear-gradient(180deg, transparent 0%, var(--bg) 92%); }

/* ---------- body sections ---------- */
main h2 { margin: 0; font-family: var(--serif); font-style: normal; font-weight: 500; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; }
main h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.005em; }
.eyebrow, .num { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.number, .prose { padding-top: 112px; }
.eyebrow.live { display: flex; align-items: center; gap: 10px; }
:where(.number, .prose, .step-text) > p { color: var(--text-2); font-size: 17px; text-wrap: pretty; }
.number h2 + p, .prose h2 + p { margin-top: 20px; }
.number b { color: var(--text); font-weight: 500; }
.figures { display: grid; grid-template-columns: repeat(3, 1fr); margin: 32px 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.figures div { padding: 16px 18px 18px; }
.figures div + div { border-left: 1px solid var(--line); }
.figures dt { font-size: 13px; color: var(--muted); }
.figures dd { margin: 6px 0 0; font-size: 28px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.source { margin-top: 14px; font-size: 13.5px; color: var(--muted); }

.how { padding-top: 112px; }
.step { margin-top: 72px; }
.step-text h3 { margin-bottom: 6px; }
.step-text .num { margin-bottom: 10px; color: var(--blue); }
.how > .source { margin-top: 28px; }
/* Each step shows the one detail that proves it, at a size you can read. */
.shot { max-width: calc(var(--wide) + 48px); margin: 28px auto 0; padding: 0 24px; }
.shot-frame { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(20,30,40,.04), 0 24px 48px -32px rgba(20,30,40,.28); }
.shot-frame img { width: 100%; }
.shot figcaption { max-width: var(--column); margin: 14px auto 0; font-size: 13.5px; color: var(--muted); text-wrap: pretty; }


/* ---------- who it is for ---------- */
/* A tab list on the left, one panel per audience on the right. The example column is a real
   figure from the latest filing day, never a claim about Oskett. */
.audiences { padding-top: 112px; }
.aud { display: grid; grid-template-columns: 250px 1fr; gap: 20px; max-width: calc(var(--wide) + 48px); margin: 36px auto 0; padding: 0 24px; align-items: stretch; }
.aud-tabs { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px; }
/* Added by site.js. Without it, the selected tab keeps its own dark fill. */
.aud-ind { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 10px; background: var(--text); pointer-events: none; }
.aud-ind.live { transition: transform .38s cubic-bezier(.22, 1, .36, 1), width .38s cubic-bezier(.22, 1, .36, 1), height .38s cubic-bezier(.22, 1, .36, 1); }
.aud-tabs button {
  flex: 1 1 0; min-height: 48px; padding: 0 18px; text-align: left; font: inherit; font-size: 15.5px; color: var(--text-2); cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease-out;
}
.aud-tabs button:hover { border-color: var(--line-strong); color: var(--text); }
.aud-tabs button:active { transform: scale(.98); }
.aud-tabs button { position: relative; z-index: 1; }
.has-ind button[aria-selected="true"] { background: transparent; border-color: transparent; }
.aud-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; font-weight: 500; }
.aud-panel { display: grid; grid-template-columns: 1fr 280px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; animation: aud-in .2s ease-out; }
.aud-panel:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.aud-tabs { grid-column: 1; grid-row: 1; }
.aud-panel { grid-column: 2; grid-row: 1; }
.aud-panel[hidden] { display: grid; visibility: hidden; }
@keyframes aud-in { from { opacity: 0; } to { opacity: 1; } }
.aud-copy { padding: 26px 32px; align-self: center; }
.aud-copy h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.aud-copy p { margin: 8px 0 0; color: var(--text-2); font-size: 16.5px; text-wrap: pretty; }
.aud-example { padding: 22px 28px; border-left: 1px solid var(--line); background: linear-gradient(180deg, #F7F9FB 0%, #EEF3F9 100%); display: flex; flex-direction: column; justify-content: center; }
.aud-label { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aud-figure { margin: 8px 0 0; font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.aud-note { margin: 8px 0 0; font-size: 13.5px; color: var(--text-2); text-wrap: pretty; }

/* The closing card echoes the hero: the same sky, white type, and the Alps cut out along its
   lower edge. It is a card so its edges are deliberate. */
.close { padding: 120px 24px 112px; }
.close-card {
  position: relative; isolation: isolate; overflow: hidden; max-width: var(--wide); margin: 0 auto; padding-top: 60px;
  border-radius: 20px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #1238C9 0%, #1D5FE3 28%, #3A8EF2 55%, #7DBDF7 80%, #BFE0FA 100%);
}
.close h2 { font-style: italic; font-size: clamp(30px, 3.4vw, 42px); text-wrap: pretty; text-shadow: 0 1px 24px rgba(10,30,120,.18); }
.close .lede { margin-top: 12px; color: rgba(255,255,255,.86); }
.close .join { margin-top: 24px; }
.close .join { background: #fff; border-color: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(10,30,90,.14), 0 20px 44px -18px rgba(10,30,110,.55); }
.close .join input { color: #1C2021; }
.close .join input::placeholder { color: #6C7577; }
.close .join-note { color: #4E5658; }
.close-land { position: relative; margin-top: 32px; height: clamp(110px, 11vw, 140px); pointer-events: none; }
.close-land img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---------- footer ---------- */
.foot { margin-top: 0; border-top: 1px solid var(--line); }
.foot-row { max-width: calc(var(--wide) + 48px); margin: 0 auto; padding: 24px 24px 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.foot .m { color: var(--muted); }
.foot-links { margin-left: auto; display: flex; gap: 20px; }
.foot-links a { color: var(--text-2); text-decoration: none; }
.foot-links a:hover { color: var(--text); }

/* ---------- legal pages ---------- */
.doc-top { border-bottom: 1px solid var(--line); }
.doc-top .nav { justify-content: space-between; }
.doc-top .nav-link { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.doc { max-width: calc(var(--column) + 48px); margin: 0 auto; padding: 72px 24px 48px; }
.doc h1 { text-align: left; font-size: clamp(38px, 5vw, 50px); }
.doc .updated { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.doc h2 { margin: 36px 0 8px; font-size: 18px; font-weight: 600; }
.doc p, .doc li { color: var(--text-2); font-size: 16px; }
.doc ul { padding-left: 20px; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero .column { padding-top: 48px; }
  .join button { flex: 1 1 100%; }
  .land { margin-top: 28px; height: 200px; }
  .number, .prose, .how { padding-top: 80px; }
  .step { margin-top: 56px; }
  .figures { grid-template-columns: 1fr; }
  .figures div + div { border-left: none; border-top: 1px solid var(--line); }
  .audiences { padding-top: 80px; }
  .aud { grid-template-columns: 1fr; padding: 0 16px; gap: 14px; }
  .aud-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .aud-tabs::-webkit-scrollbar { display: none; }
  .aud-tabs button { flex: none; min-height: 0; height: 40px; padding: 0 14px; font-size: 14.5px; border-radius: 999px; }
  .aud-ind { border-radius: 999px; }
  .nav-signin { padding: 10px 16px; }
  .aud-tabs { grid-column: 1; grid-row: 1; }
  .aud-panel { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
  .aud-copy { padding: 28px 24px 24px; }
  .aud-example { padding: 22px 24px 26px; border-left: none; border-top: 1px solid var(--line); }
  .aud-figure { font-size: 36px; }
  .shot { padding: 0 16px; }
  .shot-frame { overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
  .shot-frame.at-end { -webkit-mask-image: none; mask-image: none; }
  .shot-frame img { width: 760px; max-width: none; }
  .close { padding: 80px 12px 80px; }
  .foot-row { gap: 6px 14px; padding: 28px 24px calc(36px + env(safe-area-inset-bottom, 0px)); }
  .foot-links { margin-left: 0; flex-basis: 100%; gap: 22px; margin-top: 10px; }
  .close-card { padding-top: 48px; border-radius: 16px; }
  .close-land { margin-top: 28px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) { .pulse, .aud-panel { animation: none; } .aud-tabs button, .aud-ind.live, .nav-wrap, .hero .mark, .hero .nav-links a { transition: none; } html { scroll-behavior: auto; } }
@media (prefers-reduced-transparency: reduce) { .hero .pill { background: #2F6FE0; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-wrap.solid { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) {
  .hero .lede, .close .lede, .hero .nav-links a { color: #fff; }
  .hero .pill { background: #1238C9; border-color: #fff; }
  .aud-tabs button, .shot-frame, .aud-panel, .figures { border-color: var(--muted); }
}