/* vbreader marketing site. Static, dependency-free, self-hosted fonts. */

:root {
  --ember: #FFB77C;
  --ember-deep: #E8833A;
  --ink: #0E0B0A;
  --ink-2: #16110F;
  --ink-3: #1E1815;
  --line: #2C2422;
  --text: #F2E7E0;
  --muted: #A99C94;
  --muted-2: #7A6E68;
  --ok: #C7CB96;
  --warn: #FFDCC2;
  --font-d: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-b: "Inter", "Segoe UI", system-ui, sans-serif;
  --max: 1140px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 30px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(70% 42rem at 50% -12rem, rgb(255 183 124 / 16%), transparent 72%),
    var(--ink);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgb(255 183 124 / 4%) 1px, transparent 1px),
    linear-gradient(rgb(255 183 124 / 4%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black, transparent 70%);
}

img,
picture,
iframe {
  display: block;
  max-width: 100%;
}

a { color: var(--ember); }

a:focus-visible,
button:focus-visible,
iframe:focus-visible,
[role="img"]:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 4px;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em;
  background: var(--ink-3);
  color: var(--ember);
  padding: 2px 7px;
  border-radius: 5px;
}

.wrap {
  width: min(100% - 48px, var(--max));
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  transform: translateY(-150%);
  padding: 10px 16px;
  border-radius: 999px;
  color: #2B1A06;
  background: var(--ember);
  font-weight: 700;
}

.skip-link:focus { transform: translateY(0); }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(14 11 10 / 82%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__in {
  width: min(100% - 48px, var(--max));
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 28px;
}

.mark {
  font-family: var(--font-d);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.03em;
  text-decoration: none;
  color: var(--text);
}

.mark b {
  color: var(--ember);
  font-weight: 650;
}

.nav__links {
  margin-left: auto;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav__links a,
.foot a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
}

.nav__links a:hover,
.foot a:hover { color: var(--text); }

.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 76px;
}

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.eyebrow,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ember);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eyebrow {
  background: rgb(255 183 124 / 10%);
  border: 1px solid rgb(255 183 124 / 24%);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}

h1,
h2,
h3 {
  font-family: var(--font-d);
  letter-spacing: -.035em;
  line-height: 1.08;
}

h1 {
  font-size: clamp(44px, 8vw, 78px);
  font-weight: 650;
  max-width: 13ch;
  margin: 0 0 22px;
}

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

h2 {
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 650;
  margin: 0 0 16px;
}

h3 {
  font-size: clamp(21px, 2.8vw, 28px);
  font-weight: 650;
  margin: 0 0 12px;
}

.lede {
  max-width: 58ch;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
}

.cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s, filter .15s, background .15s;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--ember); color: #2B1A06; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { border-color: var(--line); color: var(--text); background: rgb(255 255 255 / 2%); }
.btn--ghost:hover { background: var(--ink-3); }
.btn--disabled { border-color: var(--line); color: var(--muted); background: var(--ink-2); }

.cta__note {
  color: var(--muted-2);
  font-size: 14px;
  max-width: 64ch;
}

.hero__proof,
.planned-list,
.demo-card,
.screenshot-card,
.media-card {
  background: rgb(22 17 15 / 86%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 34px 90px rgb(0 0 0 / 38%);
}

.hero__proof {
  padding: clamp(24px, 4vw, 36px);
}

.hero__proof h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  max-width: 13ch;
}

.hero__proof p,
.hero__proof dd,
.sec-head p,
.split__copy p,
.card p,
.planned-list li,
.final p,
.demo-card__header p {
  color: var(--muted);
}

.hero__proof dl {
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}

.hero__proof dt {
  color: var(--text);
  font-weight: 800;
}

.hero__proof dd { margin: 4px 0 0; }

.quote,
section,
footer {
  position: relative;
  border-top: 1px solid var(--line);
}

.quote { padding: 76px 0; }

.quote p {
  max-width: 24ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-d);
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.28;
  letter-spacing: -.025em;
}

.quote span { color: var(--ember); }

.quote cite {
  display: block;
  text-align: center;
  margin-top: 22px;
  color: var(--muted-2);
  font-style: normal;
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

section { padding: 82px 0; }

.sec-head {
  max-width: 68ch;
  margin-bottom: 46px;
}

.sec-head .tag,
.split__copy .tag { margin-bottom: 14px; }

/* Exactly four cards live here, so the column count must divide four evenly.
   auto-fit with a 260px minimum settles on THREE columns around 1024px and
   strands a single card alone on the last row. Step 1 -> 2 -> 4 instead. */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  padding: 26px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.card--now { border-color: rgb(199 203 150 / 22%); }
.card--later { border-color: rgb(255 183 124 / 22%); }

.card .ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgb(255 183 124 / 12%);
  color: var(--ember);
  font-size: 20px;
}

.band {
  background: var(--ink-2);
}

.band .card,
.band .planned-list,
.band .media-card,
.band .concept-card { background: var(--ink); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  gap: clamp(34px, 6vw, 68px);
  align-items: center;
}

.split--copy-only {
  grid-template-columns: minmax(0, 68ch);
  justify-content: center;
}

.split + .split,
.vision + .vision { margin-top: 86px; }
.split--flip .split__copy { order: 2; }
.split--flip .media-card,
.split--flip .concept-card,
.split--flip .app-shot { order: 1; }

.bullets {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.bullets li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--muted);
}

.bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ember);
  font-weight: 900;
}

.bullets b,
.split__copy strong { color: var(--text); }

.media-card {
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background:
    linear-gradient(160deg, rgb(255 183 124 / 10%), transparent 52%),
    var(--ink-2);
}

.media-card span {
  max-width: 14ch;
  font-family: var(--font-d);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.08;
}

.app-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
  margin-bottom: clamp(48px, 8vw, 90px);
}

.app-shot,
.concept-card {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--ink-2);
  box-shadow: 0 30px 80px rgb(0 0 0 / 36%);
}

.app-shot--single {
  max-width: 360px;
  justify-self: center;
}

/* The deliberate 42px stagger on the middle card fought the grid: with align-items:start
   and images of differing rendered height it read as a misaligned row rather than a
   designed offset. Cards now share a baseline and equal height. */
.app-shot--lift { margin-top: 0; }

.app-shot img,
.concept-card img {
  /* The phone renders are 1080x2340. Left at width:100% they grow as tall as the
     column allows and push the surrounding copy off the screen, so cap the height
     and let the width follow. object-fit is deliberately NOT used: these are whole
     screens and cropping one would misrepresent the app. */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  margin: 0 auto;
  border-radius: 22px;
}

.app-shot picture,
.concept-card picture {
  width: 100%;
}

.concept-card--wide img {
  width: 100%;
  aspect-ratio: 1520 / 920;
  max-height: 420px;
  object-fit: cover;
}

.concept-label {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(14 11 10 / 78%);
  color: var(--ember);
  border: 1px solid rgb(255 183 124 / 34%);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.install-grid {
  margin-bottom: clamp(48px, 8vw, 90px);
}

figcaption {
  padding: 14px 6px 6px;
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.demo-section { padding-top: 0; }

.demo-card { overflow: hidden; }

.demo-card__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: clamp(24px, 4vw, 36px);
  border-bottom: 1px solid var(--line);
}

.demo-card__header h2 { margin-top: 8px; }

.demo-frame {
  height: min(78vh, 820px);
  min-height: 620px;
  background: #12100f;
}

.demo-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.final { text-align: center; }
.final h2 { max-width: 16ch; margin: 0 auto 16px; }
.final p { max-width: 58ch; margin: 0 auto 30px; }
.final .cta { justify-content: center; }

footer {
  padding: 44px 0 60px;
  color: var(--muted-2);
}

.foot {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.foot .spacer { flex: 1; }

@media (max-width: 900px) {
  .hero__in,
  .split,
  .app-shot-grid {
    grid-template-columns: 1fr;
  }

  .split--flip .split__copy,
  .split--flip .media-card,
  .split--flip .concept-card,
  .split--flip .app-shot { order: initial; }

  .media-card { min-height: 360px; }
  .app-shot--lift { margin-top: 0; }
}

@media (max-width: 720px) {
  html { scroll-behavior: auto; }
  .nav { position: static; }
  .nav__in { align-items: flex-start; flex-direction: column; }
  .nav__links { margin-left: 0; justify-content: flex-start; gap: 10px 18px; }
  .hero { padding-top: 48px; }
  .wrap,
  .nav__in { width: min(100% - 32px, var(--max)); }
  .btn { width: 100%; }
  .demo-card__header { flex-direction: column; }
  .demo-frame { height: 680px; min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Screenshot grid alignment ------------------------------------------------
   Each card is a column: a fixed-height image box with the caption pinned beneath,
   so every card in the row starts and ends on the same line whatever the render's
   aspect. object-fit: contain letterboxes rather than crops, because these are whole
   screens and cropping one would misrepresent the app. */
.app-shot {
  display: flex;
  flex-direction: column;
}
.app-shot img {
  width: 100%;
  height: clamp(280px, 34vw, 460px);
  max-height: none;
  object-fit: contain;
  object-position: top center;
}
.app-shot figcaption {
  margin-top: auto;
  padding-top: 12px;
}
/* The chip must state AVAILABILITY first: "Design concept" describes the picture, not
   whether you can have it. Users read the chip, not the caption, so it leads with
   "Coming soon" and keeps the provenance as a quieter second line, so we still never
   imply a mockup is a screenshot. */
.concept-label {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}
.concept-label__sub {
  font-size: 0.72em;
  opacity: 0.72;
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* --- Voice command examples --------------------------------------------------- */
.voice-examples {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--ink-2);
}
.voice-examples h3 {
  margin: 0 0 16px;
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.voice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.voice-list li {
  display: grid;
  grid-template-columns: minmax(160px, 15em) 1fr;
  gap: 6px 20px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.voice-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.voice-list q {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ember);
  quotes: '"' '"';
}
.voice-list span { color: var(--muted); }
.voice-note { margin: 18px 0 0; color: var(--muted); }
.voice-note q { color: var(--ember); quotes: '"' '"'; }

@media (max-width: 720px) {
  .voice-list li { grid-template-columns: 1fr; }
}
/* The eyebrow/tag pill wraps to two lines on narrow viewports. inline-flex left-aligns
   the wrapped lines, which reads as broken rather than intentional, so centre the text
   and let the pill shrink with the column instead of forcing a wide box. */
.eyebrow,
.tag {
  text-align: center;
  justify-content: center;
  max-width: 100%;
  text-wrap: balance;
}
/* The grid holds FOUR screenshots but declared three columns, so the fourth orphaned
   onto a second row and read as a misaligned block. Column counts now divide 4 exactly
   at every breakpoint: 1 / 2 / 4. */
.app-shot-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 960px) {
  .app-shot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .app-shot-grid { grid-template-columns: 1fr; }
}
/* Letterbox fix. All four renders are 1080x2340. Fixing the element height and using
   object-fit: contain made the element box WIDER than the drawn image, so:
     - the visible screenshot sat with ~13px of empty box each side, on top of the
       10px card padding, which read as "not centred, more space at the sides";
     - border-radius applied to the element box, not the drawn image, so the rounded
       corners floated in empty space while the screenshot kept square corners.
   Giving the element the source aspect ratio makes box and image identical: no
   letterbox, no crop, and the radius hugs the screenshot. Equal heights across the row
   follow automatically because all four share the ratio. */
.app-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 2340;
  max-height: none;
  object-fit: cover;
  object-position: center;
}