/* Unhurried — getunhurried.app. The app's own palette and type: warm off-white, soft charcoal,
   muted terracotta, and New York (ui-serif) for display. No web fonts, no third-party requests. */

/* Comfortaa for headings and Nunito for text (both SIL Open Font License, see /assets/fonts/OFL-*.txt),
   self-hosted so no third party sees visitors. */
@font-face {
  font-family: "Comfortaa";
  src: url("/assets/fonts/comfortaa-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  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: "Nunito";
  src: url("/assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  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: "Nunito";
  src: url("/assets/fonts/nunito-italic-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
  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 {
  --canvas: #F8F5F0;
  --surface: #FFFDFA;
  --ink: #2D2926;
  --ink-2: #736A63;
  --hairline: #E6DFD6;
  --accent: #AD5C41;
  --accent-soft: #F1E2D9;
  --moss: #6F7C5B;
  --prompter: #171513;
  --prompter-text: #F6F1EA;
  --navy: #1F2C44;
  --cta: #B8432F;
  --shadow: 0 1px 2px rgba(45, 41, 38, .06), 0 12px 32px rgba(45, 41, 38, .10);
  --rounded: "Comfortaa", ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;  /* the app's own UI font, for the prompter mock and keys */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #1E1C1A;
    --surface: #282522;
    --ink: #EDE8E1;
    --ink-2: #A79E96;
    --hairline: #3A3531;
    --accent: #D07A58;
    --accent-soft: #3A2A23;
    --moss: #9AA585;
    --prompter: #121110;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 24px; }
.narrow { max-width: 720px; }

/* Header and footer */
.site-header { position: relative; z-index: 5; padding-block: 20px; }
.header-row { display: flex; align-items: center; gap: 16px 40px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand .wordmark { width: auto; height: 50px; }
.nav { display: flex; gap: 30px; font-size: 16px; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.cta-soon {
  display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; border-radius: 12px;
  background: var(--cta); color: #FFF8F1; font: 600 16px/1.2 var(--sans); white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px rgba(150, 50, 30, .22);
}
.cta-lg { padding: clamp(14px, 2.1vh, 20px) clamp(26px, 2.6vw, 40px); font-size: clamp(16px, min(1.35vw, 2.3vh), 20px); border-radius: 14px; }
.site-footer { border-top: 1px solid var(--hairline); margin-top: 96px; padding-block: 32px 48px; color: var(--ink-2); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--ink-2); }

/* Type */
h1, h2, h3 { font-family: var(--rounded); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(44px, 7.4vw, 76px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.25; }
p { margin: 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.muted { color: var(--ink-2); }
kbd {
  font: 600 14px/1 var(--system); padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: 0 1px 0 var(--hairline); color: var(--ink);
}

/* Hero: a layered scene. Landscape behind, the page's words and the prompter in the middle,
   moss and mushrooms in front, and Gaston on the moss. The same in light and dark mode. */
/* One screen tall: the moss and Gaston sit on the bottom edge of the window, and the words above scale
   with the window's height as well as its width so they fit on short laptop screens. */
.hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--navy);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  /* The words and prompter sit just above Gaston's beret; any spare height goes under the header. */
  --gaston-w: min(25vw, 380px, 35vh);
  padding-bottom: calc(var(--gaston-w) * 0.93 + 2.5vh - 10px);
}
/* Depth: parallax offsets come from a small script (--bg-*, --fg-*, --g-*, --pm-y); all zero without it. */
.hero { --fg-drop: 3vw; }
.hero-bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  transform: translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0) scale(1.08); will-change: transform;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(252, 246, 236, .92) 0%, rgba(252, 246, 236, .55) 18%, rgba(252, 246, 236, 0) 42%),
    linear-gradient(90deg, rgba(252, 246, 236, .94) 0%, rgba(252, 246, 236, .82) 34%, rgba(252, 246, 236, .25) 60%, rgba(252, 246, 236, 0) 78%);
}
.hero .site-header .nav a { color: #3A4459; }
.hero .site-header .nav a:hover { color: var(--navy); }
.hero .wrap { max-width: 1280px; }
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; padding-top: clamp(20px, 5vh, 64px); margin-top: auto; }
.hero-copy { display: grid; gap: clamp(16px, 2.8vh, 26px); text-align: center; justify-items: center; }
.hero h1 { font-size: clamp(40px, min(7vw, 10vh), 96px); line-height: 1.04; letter-spacing: -.03em; color: var(--navy); }
.hero h1 em { display: block; font-style: normal; color: var(--cta); }
.hero-lede { font-size: clamp(18px, min(1.75vw, 2.9vh), 27px); line-height: 1.45; color: #2B3446; }
.availability { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; justify-self: center; }
.requirements { font-size: 15px; color: #3A4459; text-shadow: 0 0 6px rgba(252, 246, 236, .95), 0 0 2px rgba(252, 246, 236, .95); }
.hero-fg {
  position: absolute; left: 0; right: 0; bottom: calc(var(--fg-drop) * -1); z-index: 2; width: 100%; height: auto; pointer-events: none;
  transform: translate3d(var(--fg-x, 0px), var(--fg-y, 0px), 0) scale(1.04); transform-origin: 50% 100%; will-change: transform;
}
.hero-gaston {
  position: absolute; z-index: 4; bottom: 2.5vh; left: calc(37% - 50px); width: var(--gaston-w); height: auto;
  filter: drop-shadow(0 18px 22px rgba(60, 35, 10, .28));
  transform: translate3d(var(--g-x, 0px), var(--g-y, 0px), 0); will-change: transform;
}

/* The prompter mock: the app's own control bar, a reading line, and a Visual Cue beside the words. */
.pm { position: relative; margin-top: clamp(8px, 1.6vh, 18px); transform: translate3d(0, var(--pm-y, 0px), 0); will-change: transform; background: #171513; color: var(--prompter-text); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(30, 20, 10, .35); }
.pm-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: rgba(246, 241, 234, .75); }
.pm-bar svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.pm-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .14); }
.pm-slider { position: relative; flex: 0 1 96px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.pm-slider::before { content: ""; position: absolute; inset: 0 55% 0 0; border-radius: 3px; background: rgba(246, 241, 234, .75); }
.pm-slider::after { content: ""; position: absolute; top: 50%; left: 45%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #F6F1EA; }
.pm-wpm { font: 600 13px/1 var(--system); font-variant-numeric: tabular-nums; color: #F6F1EA; white-space: nowrap; }
.pm-spacer { flex: 1; }
.pm-body { position: relative; height: clamp(190px, 33vh, 290px); padding: 0 32px 0 42px; }
.pm-window { position: relative; overflow: hidden; height: 100%; }
.pm-window::before, .pm-window::after { content: ""; position: absolute; left: 0; right: 0; height: 70px; z-index: 1; pointer-events: none; }
.pm-window::before { top: 0; background: linear-gradient(rgba(23, 21, 19, 1), rgba(23, 21, 19, 0)); }
.pm-window::after { bottom: 0; background: linear-gradient(rgba(23, 21, 19, 0), rgba(23, 21, 19, 1)); }
.pm-text { font: 500 27px/1.42 var(--system); animation: scroll 40s linear infinite; }
.pm-text p { margin: 0 0 16px; }
.pm .reading-line {
  position: absolute; left: 20px; top: 40%; z-index: 2; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--cta);
}
@keyframes scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Feature rows */
.section { padding-top: 112px; }
.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.feature.flip { grid-template-columns: 1.15fr 1fr; }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: grid; gap: 16px; }
.feature-copy p { color: var(--ink-2); max-width: 46ch; }
.shot { border-radius: 16px; box-shadow: var(--shadow); }
.shot-window { filter: drop-shadow(0 18px 30px rgba(45, 41, 38, .16)); }

.keys { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; align-items: center; margin-top: 6px; font-size: 16px; }
.keys dt { display: flex; gap: 6px; }
.keys dd { margin: 0; color: var(--ink-2); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 28px; display: grid; gap: 12px; align-content: start; }
.card p { color: var(--ink-2); }
.card img { border-radius: 12px; margin-top: 6px; }

/* Gaston and the trail */
.gaston-intro { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
.gaston-intro img { width: 220px; }
.gaston-intro .quote { font: italic 500 22px/1.45 var(--serif); color: var(--ink); max-width: 36ch; }
.trail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; list-style: none; padding: 0; }
.trail li { display: grid; gap: 8px; }
.trail img { border-radius: 12px; aspect-ratio: 5 / 2; object-fit: cover; width: 100%; }
.trail .stage-name { font: 700 15px/1.3 var(--rounded); }
.trail .stage-words { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trail li:last-child .stage-name { color: var(--accent); }

/* Privacy trio */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.promise { display: grid; gap: 8px; border-top: 2px solid var(--ink); padding-top: 16px; }
.promise p { color: var(--ink-2); font-size: 16px; }

.closing { text-align: center; display: grid; justify-items: center; gap: 18px; }
.closing img { width: 112px; }

/* Documents: privacy, support */
.doc { padding-top: 32px; display: grid; gap: 18px; }
.doc h1 { font-size: clamp(38px, 6vw, 52px); }
.doc h2 { font-size: 26px; margin-top: 22px; }
.doc p, .doc li { color: var(--ink); max-width: 66ch; }
.doc ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.doc .updated { color: var(--ink-2); font-size: 15px; }
.doc .summary { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 22px 24px; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin-top: 10px; color: var(--ink-2); }
.contact { font-size: 20px; }

.notfound { text-align: center; padding-top: 72px; display: grid; justify-items: center; gap: 18px; }
.notfound img { width: 200px; }

@media (max-width: 860px) {
  .hero-grid, .feature, .feature.flip, .gaston-intro { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { text-align: left; justify-items: start; }
  .availability { justify-self: start; }
  .hero { min-height: 0; padding-bottom: 42vw; }
  .hero h1 { font-size: clamp(44px, 9vw, 72px); }
  .pm-body { height: 260px; }
  .hero::before { background: linear-gradient(180deg, rgba(252, 246, 236, .95) 0%, rgba(252, 246, 236, .8) 45%, rgba(252, 246, 236, .2) 75%); }
  .pm { margin-top: 0; }
  .hero-gaston { left: auto; right: 4%; width: 40vw; bottom: 8px; }
  .nav { order: 3; width: 100%; gap: 22px; }
  .site-header .cta-soon { display: none; }
  .feature.flip .feature-copy { order: 0; }
  .pair, .promises { grid-template-columns: 1fr; }
  .trail { grid-template-columns: repeat(2, 1fr); }
  .section { padding-top: 80px; }
  .gaston-intro img { width: 180px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .nav { gap: 14px; }
  .brand .wordmark { height: 38px; }
  .pm-body { height: 230px; padding: 0 18px 0 34px; }
    .pm-text { font-size: 22px; }
  .pm .reading-line { left: 14px; }
  .pm-bar { gap: 10px; }
  .cta-lg { padding: 15px 22px; font-size: 16px; }
  .hero { padding-bottom: 56vw; }
  .hero-gaston { width: 52vw; }
  .lede { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-text { animation: none; }
}