/* Vandilo — "Workshop" look. Yellow = an idea, cobalt = a product.
   Fonts are self-hosted in /fonts/ (SIL OFL), so pages make no third-party requests. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --fg: #121c27;
  --muted: #566270;
  --rule: #dbe1e8;

  --idea: #ffd23f;
  --idea-ink: #2b2300;
  --product: #2f55e4;
  --product-ink: #ffffff;

  --band: #121c27;
  --band-fg: #eef2f7;
  --band-muted: #a9b4c0;

  --shadow: rgba(10, 20, 40, 0.18);

  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --max: 60rem;
  --read: 40rem;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f151c;
    --surface: #17202a;
    --fg: #eaf0f6;
    --muted: #97a4b2;
    --rule: #26313d;

    --idea: #f5c934;
    --product: #7590ff;
    --product-ink: #0b1230;

    --band: #070b10;
    --band-muted: #95a3b1;

    --shadow: rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* Layout */

.in {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.in.read { max-width: var(--read); }

header.site {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand svg { color: var(--product); }

header.site nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
}

header.site nav a {
  color: var(--muted);
  text-decoration: none;
}

header.site nav a:hover { color: var(--fg); }

header.site .right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Language switch: the current language is plain text, the other is a link. */
header.site nav.lang {
  gap: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

nav.lang a,
nav.lang span {
  padding: 0.3rem 0.55rem;
  letter-spacing: 0.06em;
}

nav.lang span {
  background: var(--fg);
  color: var(--bg);
}

main { padding-bottom: 1rem; }

section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hero + section.in { padding-top: 0; }

/* Type */

h1, h2, h3 {
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: clamp(2.3rem, 6vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 1.25rem;
}

h1 mark {
  background: var(--idea);
  color: var(--idea-ink);
  padding: 0 0.12em;
  border-radius: 4px;
}

h1 em {
  font-style: normal;
  color: var(--product);
}

h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.lead {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 32rem;
  margin-bottom: 1.75rem;
}

ul { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin: 0.3rem 0; }

a {
  color: var(--product);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--product);
  outline-offset: 3px;
  border-radius: 4px;
}

strong { font-weight: 700; }

/* Buttons */

.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-block;
  padding: 0.8rem 1.25rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 120ms ease;
}

.btn:hover { transform: translateY(-1px); }

.btn.primary { background: var(--product); color: var(--product-ink); }
.btn.ghost { border: 1.5px solid var(--fg); color: var(--fg); }

/* Hero: an idea note turning into a product */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.hero > div { min-width: 0; }

.transform {
  position: relative;
  min-height: 21rem;
}

.note {
  position: absolute;
  left: 0;
  top: 1.75rem;
  width: 11.5rem;
  padding: 1rem 1rem 1.25rem;
  background: var(--idea);
  color: var(--idea-ink);
  transform: rotate(-5deg);
  box-shadow: 0 10px 24px var(--shadow);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.35;
  z-index: 1;
}

.note small {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.transform .phone {
  position: absolute;
  right: 0;
  top: 0;
  width: 14rem;
}

/* A phone on its own, without the idea note */
.transform.solo { min-height: 0; }
.transform.solo .phone { position: static; margin-left: auto; }

/* Phone mockup with a Last Time list */

.phone {
  border-radius: 28px;
  padding: 0.6rem;
  background: var(--band);
  box-shadow: 0 24px 48px var(--shadow);
}

@media (prefers-color-scheme: dark) {
  .phone { background: #000; box-shadow: 0 0 0 1px var(--rule), 0 24px 48px var(--shadow); }
}

.screen {
  border-radius: 22px;
  background: var(--surface);
  color: var(--fg);
  padding: 1rem 0.85rem 0.5rem;
}

.screen .title {
  font-weight: 800;
  font-size: 1rem;
  margin: 0.2rem 0 0.75rem;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  line-height: 1.35;
}

.row b { display: block; font-weight: 600; }
.row span { color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }

.row .done {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--product);
  color: var(--product-ink);
}

/* Dark band */

.band {
  background: var(--band);
  color: var(--band-fg);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps li {
  margin: 0;
  min-width: 0;
  border-top: 2px solid var(--idea);
  padding-top: 0.8rem;
  counter-increment: step;
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--idea);
  margin-bottom: 0.35rem;
}

.steps b { display: block; font-size: 1.05rem; margin-bottom: 0.25rem; }
.steps p { margin: 0; font-size: 0.92rem; color: var(--band-muted); }

.band a { color: var(--band-fg); }

/* Cards */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.card p, .card ul { margin: 0; color: var(--muted); }
.card.dashed { border-style: dashed; background: transparent; }
.card a { font-weight: 700; text-decoration: none; }
.card a:hover { text-decoration: underline; }

.tag {
  justify-self: start;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.tag.product { background: var(--product); color: var(--product-ink); }
.tag.idea { background: var(--idea); color: var(--idea-ink); }

/* Product mark (Last Time) */

.mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--product);
  color: var(--product-ink);
  display: inline-grid;
  place-items: center;
  margin-bottom: 1.25rem;
}

/* Reading pages (privacy policy) */

.doc { padding-top: 2rem; padding-bottom: 3rem; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.doc h2 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 2.25rem 0 0.6rem; }

.meta {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

/* Footer */

footer.site {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}

footer.site nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--fg); }

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .note { animation: drop 700ms 150ms ease-out both; }
  .transform .phone { animation: rise 700ms ease-out both; }
}

@keyframes drop {
  0% { transform: rotate(-12deg) translate(-8px, -14px); }
  100% { transform: rotate(-5deg); }
}

@keyframes rise {
  0% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

/* Narrow screens */

@media (max-width: 760px) {
  header.site nav.main { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 0.5rem; }
  .transform { max-width: 24rem; min-height: 20rem; }
  .transform.solo { min-height: 0; max-width: none; }
  .transform.solo .phone { margin: 0 auto; }
  .hero { padding-bottom: 2.75rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
}

@media (max-width: 420px) {
  nav.lang a, nav.lang span { padding: 0.3rem 0.4rem; }
  .in { padding-left: 1rem; padding-right: 1rem; }
  .note { width: 9.5rem; font-size: 0.85rem; }
  .transform .phone { width: 12.5rem; }
}