/* gasperapp.com — paper edition.
   Light and airy in Gasper's own materials: cream paper, plum ink, Playfair
   for what speaks (never italic), red spent on the score, violet on the
   button chrome. Real screenshots floating on soft shadows carry the page.
   Buttons are the app's own: a plum face with the violet pill peeking from
   the top-left corner and the red pill from the bottom-right. */

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/PlayfairDisplay-VF.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --paper: #131017;
  --paper-2: #1B1520;
  --ink: #F4EBDD;
  --plum: #2A1830;
  --body: #B9AFC4;
  --dim: #857B92;
  --line: rgba(244, 235, 221, 0.13);
  --red: #E0463A;
  --violet: #9B6BFF;
  --violet-deep: #6E45D9;

  --serif: "Playfair Display", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--red); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 800; font-style: normal; letter-spacing: 0.002em; line-height: 1.12; }
h1 em, h2 em, .quote em { font-style: normal; color: var(--red); }
em, i { font-style: normal; }
strong { color: var(--ink); font-weight: 700; }

.wrap { width: min(100%, 1060px); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.narrow { max-width: 720px; }

.sk { width: 1em; height: 1em; fill: var(--red); flex: none; }

.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ================================== nav ================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.top.stuck { border-bottom-color: var(--line); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 66px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand img { height: 36px; }
.brand span { font-family: var(--serif); font-weight: 800; font-size: 26px; color: var(--ink); letter-spacing: 0.01em; }

.navlinks { display: flex; gap: 26px; margin-left: auto; margin-right: 10px; }
.navlinks a {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
  transition: color 0.2s;
}
.navlinks a:hover { color: var(--ink); }

/* the app's own button: plum face, violet and red pills peeking at the corners */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--plum);
  color: #FBF1D7;
  font-weight: 750;
  font-size: 15.5px;
  padding: 14px 30px;
  border-radius: 999px;
  box-shadow:
    -3px -3px 0 0 var(--violet),
     3px  3px 0 0 var(--red);
  transition: transform 0.15s var(--ease), filter 0.2s;
}
.cta:hover { filter: brightness(1.25); }
.cta:active { transform: scale(0.98); }
.cta svg { width: 16px; height: 16px; fill: currentColor; }
.cta.small { padding: 10px 20px; font-size: 14px; }

.ghost {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  padding: 13px 4px;
  border-bottom: 2px solid var(--line);
  transition: border-color 0.2s;
}
.ghost:hover { border-color: var(--red); }

/* ================================== hero ================================= */

.hero { padding: clamp(52px, 8vh, 100px) 0 clamp(40px, 6vw, 80px); }

.hero-in {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}

.hero h1 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 20px; max-width: 12ch; }
.lede { font-size: clamp(16px, 1.8vw, 19px); max-width: 46ch; margin-bottom: 30px; }

.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fineprint { margin-top: 18px; font-size: 13px; color: var(--dim); }

/* screenshots float with a soft real shadow, like the reference */
.hero-shot { position: relative; }

/* the hero's fanned trio: the duel front and centre, the shelf and a film
   page tucked behind its shoulders */
.fan { position: relative; display: grid; place-items: center; padding: 0 8%; }
.fan .front { position: relative; z-index: 3; }
.fan .side {
  position: absolute;
  top: 7%;
  width: min(72%, 268px);
  z-index: 1;
  filter: brightness(0.55);
}
.fan .side.l { left: -6%; transform: rotate(-7deg); }
.fan .side.r { right: -6%; transform: rotate(7deg); }

.device {
  position: relative;
  width: min(100%, 372px);
  margin: 0 auto;
  border-radius: 46px;
  padding: 11px;
  background: #060409;
  border: 1px solid rgba(244, 235, 221, 0.14);
  box-shadow:
    0 2px 0 rgba(244, 235, 221, 0.07) inset,
    0 46px 80px -30px rgba(0, 0, 0, 0.9);
}
.device img { border-radius: 36px; width: 100%; }

.shot-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--dim);
}

@media (max-width: 880px) {
  .hero-in { grid-template-columns: 1fr; text-align: center; }
  .hero h1, .lede { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-shot { order: 2; margin-top: 10px; }
  .device, .fshot .device { width: min(72vw, 290px); }
  .fan .side { display: none; }
  .fan { padding: 0; }
}

/* =============================== how it works ============================ */

.how { padding: clamp(48px, 7vw, 100px) 0 clamp(30px, 4vw, 60px); }

.sechead { font-size: clamp(27px, 3.4vw, 40px); margin-bottom: clamp(30px, 4vw, 50px); }

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 4vw, 48px);
}

.stepnum {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--plum);
  color: #FBF1D7;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
  box-shadow: -2px -2px 0 0 var(--violet), 2px 2px 0 0 var(--red);
}

.steps h3 { font-size: 20px; margin-bottom: 8px; }
.steps p { font-size: 15px; color: var(--body); }

@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* =============================== features ================================ */

.rule { border: 0; border-top: 1px solid var(--line); margin: clamp(20px, 3vw, 40px) auto; }

.feature { padding: clamp(36px, 5vw, 76px) 0; }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.split > * { min-width: 0; }
.split.flip .fcopy { order: 2; }
.split.flip .fshot { order: 1; }

.fcopy h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 16px; max-width: 17ch; }
.fcopy > p { max-width: 48ch; }

.marks { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.marks li { display: flex; gap: 11px; align-items: baseline; font-size: 15px; color: var(--body); }
.marks .sk { width: 13px; height: 13px; transform: translateY(1px); }

.fshot .device { width: min(100%, 348px); }

/* the tolerance spectrum, quiet and typographic */
.spectrum { margin-top: 26px; max-width: 460px; }
.spectrum-bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.spectrum-bar .notch {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(224, 70, 58, 0.25);
}
.spectrum-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.spectrum-labels .on { color: var(--ink); }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; text-align: center; }
  .split.flip .fcopy, .split.flip .fshot { order: initial; }
  .fshot { order: 2; }
  .fcopy h2, .fcopy > p { margin-left: auto; margin-right: auto; }
  .marks { max-width: 420px; margin-left: auto; margin-right: auto; text-align: left; }
  .spectrum { margin-left: auto; margin-right: auto; }
  .spectrum-labels { flex-wrap: wrap; justify-content: center; column-gap: 14px; row-gap: 4px; }
}

/* =============================== statement =============================== */

.statement {
  text-align: center;
  padding: clamp(60px, 8vw, 120px) 0;
  background: var(--paper-2);
}

.statement .big { width: 30px; height: 30px; margin: 0 auto 22px; }

.quote {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 800;
  font-style: normal;
  color: var(--ink);
  line-height: 1.28;
}

/* ================================== faq ================================== */

.faq { padding: clamp(40px, 6vw, 90px) 0; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 2px;
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 750;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-family: var(--sans); font-weight: 400; font-size: 22px; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 2px 20px; font-size: 15px; max-width: 60ch; }

/* ================================ closing ================================ */

.closing { text-align: center; padding: clamp(48px, 7vw, 110px) 0 clamp(70px, 9vw, 130px); }
.closing h2 { font-size: clamp(30px, 4vw, 52px); margin-bottom: 14px; }
.closing p { margin-bottom: 30px; color: var(--dim); }

/* ================================= footer ================================ */

footer { border-top: 1px solid var(--line); background: var(--paper-2); }

.foot { display: grid; justify-items: center; gap: 18px; padding: 44px 0 52px; text-align: center; }
.footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.footlinks a { font-size: 13px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); }
.footlinks a:hover { color: var(--ink); }
.legal { font-size: 12px; color: var(--dim); max-width: 60ch; line-height: 1.7; }

/* ============================ secondary pages ============================ */

.doc { max-width: 760px; margin: 0 auto; padding: 56px clamp(20px, 5vw, 40px) 90px; }
.doc h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 6px; }
.doc .updated { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 30px; }
.doc section { border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin-bottom: 14px; background: var(--paper-2); }
.doc h2 { font-size: 20px; margin-bottom: 10px; }
.doc p { font-size: 15px; margin-bottom: 10px; line-height: 1.72; }
.doc p:last-child { margin-bottom: 0; }
.doc a { color: var(--violet-deep); }
.doc details { border-bottom: 1px solid var(--line); padding: 15px 2px; }
.doc details:last-of-type { border-bottom: none; }
.doc summary { font-family: var(--serif); font-weight: 750; font-size: 17.5px; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: "+"; color: var(--red); }
.doc details[open] summary::after { content: "\2212"; }
.doc details p { margin-top: 10px; }

.notice { min-height: 72svh; display: grid; place-items: center; text-align: center; padding: 24px; }
.notice h1 { font-size: clamp(34px, 6vw, 60px); margin-bottom: 14px; }
.notice p { max-width: 430px; margin: 0 auto 26px; }
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--plum); color: #FBF1D7;
  font-weight: 750; font-size: 15px;
  padding: 13px 26px; border-radius: 999px;
  box-shadow: -3px -3px 0 0 var(--violet), 3px 3px 0 0 var(--red);
}
.btn.sm { padding: 9px 18px; font-size: 14px; }

/* ================================= motion ================================ */

@media (max-width: 620px) {
  .navlinks { display: none; }
  .nav { height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
}