@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --forest: #2f5d50;
  --forest-dark: #23483e;
  --paper: #f8f7f4;
  --paper-card: #fbf8f1;
  --white: #ffffff;
  --charcoal: #2e2e2e;
  --muted: #686864;
  --gold: #c8a96a;
  --line: #e7e4de;
  --display: "Newsreader", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --page: min(1200px, calc(100vw - 48px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--paper); }

body {
  margin: 0;
  overflow-x: clip;
  color: var(--charcoal);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.home-page { background: linear-gradient(to bottom, var(--forest) 0 120px, var(--paper) 120px); }

a { color: inherit; }

a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--white);
  background: var(--forest-dark);
  transform: translateY(-160%);
}

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

.site-header {
  width: 100%;
  min-height: 78px;
  margin: 0 auto;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: var(--white);
  background: rgba(47, 93, 80, .96);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  box-shadow: none;
  transition: min-height .24s ease, width .24s ease, top .24s ease, background-color .24s ease, box-shadow .24s ease, border-radius .24s ease;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}

.site-header.is-scrolled {
  width: min(1080px, calc(100vw - 24px));
  min-height: 64px;
  top: 10px;
  background: rgba(35, 72, 62, .72);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  box-shadow: 0 14px 42px rgba(24, 47, 41, .2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 1.62rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.brand img { border-radius: 13px; transition: width .24s ease, height .24s ease; }
.site-header.is-scrolled .brand img { width: 38px; height: 38px; }

.nav-links { display: flex; gap: 30px; align-items: center; font-size: 0.92rem; font-weight: 500; }
.nav-links a { text-decoration: none; text-underline-offset: 6px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { text-decoration: underline; }

.hero {
  width: 100%;
  min-height: calc(100vh - 218px);
  min-height: calc(100dvh - 218px);
  margin: 0 auto;
  padding: clamp(20px, 3.8dvh, 36px) max(24px, calc((100vw - 1200px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(490px, 1.1fr);
  align-items: center;
  gap: clamp(54px, 7vw, 96px);
  color: var(--white);
  background: var(--forest);
}

.hero-copy-block { position: relative; z-index: 2; }

.eyebrow {
  margin: 0 0 18px;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, h3 { font-family: var(--display); font-weight: 450; letter-spacing: -0.035em; }

h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(3.5rem, min(6.3vw, 9.5dvh), 6.3rem);
  line-height: 0.94;
}

.hero-copy {
  max-width: 620px;
  margin: 26px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.hero .eyebrow { color: #e4c782; }
.hero .play-cta span { color: rgba(255,255,255,.68); }

.play-cta { margin-top: 34px; display: grid; justify-items: start; gap: 4px; }
.play-cta a { display: inline-flex; }
.play-cta img { display: block; width: 220px; height: auto; }
.play-cta span { color: var(--muted); font-size: 0.78rem; }

.hero-devices {
  position: relative;
  min-height: clamp(430px, calc(100dvh - 300px), 650px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.device {
  margin: 0;
  overflow: hidden;
  padding: 8px;
  border-radius: 42px;
  background: #242424;
  box-shadow: 0 32px 80px rgba(34, 48, 43, 0.22);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 35px;
  background: var(--paper);
}

.hero-devices .device { position: absolute; width: clamp(190px, 29dvh, 300px); }
.device-home { z-index: 2; right: 170px; transform: rotate(-4deg); }
.device-rediscover { z-index: 1; right: -2px; transform: translateY(30px) rotate(5deg); }

.principles {
  padding: 0 max(24px, calc((100vw - 1200px) / 2)) 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: var(--white);
  background: var(--forest);
}

.principles div {
  min-height: 108px;
  padding: 18px 34px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.principles strong, .principles span { display: block; }
.principles strong { font-family: var(--display); font-size: 1.52rem; font-weight: 500; line-height: 1.08; letter-spacing: -.015em; }
.principles strong::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--gold);
}
.principles span { max-width: 32ch; margin-top: 10px; color: rgba(255,255,255,.68); font-size: .9rem; line-height: 1.45; }

@media (min-width: 981px) and (max-height: 760px) {
  .eyebrow { margin-bottom: 10px; }
  .hero-copy { margin-top: 16px; line-height: 1.45; }
  .play-cta { margin-top: 18px; }
  .hero h1 { font-size: clamp(3rem, min(6.3vw, 9.5dvh), 5rem); }
  .principles div { min-height: 96px; padding-top: 12px; padding-bottom: 18px; }
  .principles span { margin-top: 5px; }
}

.app-section { width: var(--page); margin: 0 auto; padding: 128px 0 140px; }

.section-heading { max-width: 840px; margin: 0 auto 84px; text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(3rem, 5.8vw, 5.7rem); line-height: .95; }
.section-heading > p:last-child { max-width: 650px; margin: 26px auto 0; color: var(--muted); font-size: 1.08rem; }

.screen-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
.screen-story-offset { padding-top: 94px; }
.screen-story .device { width: 100%; max-width: 293px; margin: 0 auto; }
.screen-story > div { max-width: 340px; margin: 28px auto 0; }
.screen-story > div > span { color: var(--forest); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.screen-story h3 { margin: 7px 0 8px; font-size: 2rem; line-height: 1.05; }
.screen-story p { margin: 0; color: var(--muted); }
.privacy-panel {
  width: var(--page);
  margin: 0 auto 124px;
  padding: clamp(42px, 7vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 74px;
  color: var(--white);
  background: var(--forest);
  border-radius: 32px;
}

.privacy-panel .eyebrow { color: #e4c782; }
.privacy-panel h2 { margin: 0 0 20px; font-size: clamp(3rem, 5vw, 5rem); line-height: .96; }
.privacy-panel p { color: rgba(255,255,255,.74); }
.privacy-panel a { font-weight: 600; text-underline-offset: 5px; }
.privacy-panel ul { margin: 0; padding: 0; align-self: center; list-style: none; }
.privacy-promises {
  border-top: 1px solid rgba(255,255,255,.2);
}
.privacy-panel .privacy-promises li {
  padding: 19px 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.privacy-panel .privacy-promises li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #e4c782;
}

.site-footer { border-top: 1px solid var(--line); }
.footer-inner { width: var(--page); margin: 0 auto; padding: 48px 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 34px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { border-radius: 11px; }
.footer-brand div { display: grid; }
.footer-brand strong { font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.footer-brand span, .trademark { color: var(--muted); font-size: .8rem; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { text-underline-offset: 4px; }
.trademark { width: var(--page); margin: 0 auto; padding: 0 0 42px; }

.page-main { width: min(880px, calc(100vw - 40px)); margin: 0 auto; padding-bottom: 110px; }
.page-intro { padding: 90px 0 58px; border-bottom: 1px solid var(--line); }
.page-intro h1 { margin: 0; font-size: clamp(3rem, 6vw, 5.2rem); line-height: .98; }
.page-intro > p:not(.eyebrow) { max-width: 700px; margin: 24px 0 0; color: var(--muted); font-size: 1.08rem; }
.page-intro .hero-actions { margin-top: 30px; }
.button { display: inline-flex; min-height: 50px; padding: 0 22px; align-items: center; justify-content: center; border-radius: 999px; color: var(--white); background: var(--forest); font-weight: 600; text-decoration: none; }
.prose { width: min(100%, 760px); margin: 0 auto; padding-top: 52px; }
.prose section { margin-bottom: 48px; }
.prose h2 { margin: 0 0 14px; font-size: 1.9rem; line-height: 1.15; }
.prose h3 { margin: 24px 0 8px; font-family: var(--sans); font-size: 1.05rem; letter-spacing: 0; }
.prose p, .prose li { color: #51524f; }
.prose ul { padding-left: 1.2rem; }
.prose .callout { margin: 42px 0; padding: 26px 28px; border-left: 3px solid var(--gold); background: var(--white); }
.policy-contents { margin: 0 0 52px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.48); }
.policy-contents > strong { display: block; margin-bottom: 14px; font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.policy-contents ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 30px; list-style: none; }
.policy-contents li { color: var(--muted); }
.policy-contents a { text-underline-offset: 4px; }
.prose section[id] { scroll-margin-top: 100px; }
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.support-card { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.support-card h2 { margin: 0 0 12px; font-size: 1.7rem; }
.support-card p { margin: 0; color: var(--muted); }
.support-checklist { width: min(100%, 900px); margin: 64px auto 36px; }
.support-checklist > .eyebrow { margin-bottom: 10px; color: var(--forest); }
.support-checklist h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.support-checklist ol { margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: support-steps; list-style: none; }
.support-checklist li { min-height: 84px; padding: 20px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.55); color: #51524f; }
.support-checklist li::before { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--forest); color: var(--white); font-size: .82rem; font-weight: 700; counter-increment: support-steps; content: counter(support-steps); }
.support-warning { width: min(100%, 900px); margin: 36px auto 0; padding: 30px 32px; border: 1px solid rgba(47,93,80,.18); border-left: 5px solid var(--gold); border-radius: 20px; background: var(--white); box-shadow: 0 18px 50px rgba(33,52,45,.07); }
.support-warning .eyebrow { margin-bottom: 8px; color: var(--forest); }
.support-warning h2 { margin: 0 0 12px; font-size: 2rem; line-height: 1.1; }
.support-warning p:last-child { margin: 0; color: #51524f; }
.support-contact { padding-top: 48px; }

@media (max-width: 980px) {
  :root { --page: min(100% - 34px, 760px); }
  .site-header {
    width: 100%;
    padding: 0 max(17px, calc((100vw - 760px) / 2));
  }
  .brand img { box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
  .hero {
    width: 100%;
    min-height: auto;
    padding: 70px max(17px, calc((100vw - 760px) / 2)) 88px;
    grid-template-columns: 1fr;
    color: var(--white);
    background: linear-gradient(to bottom, var(--forest) 0 48%, var(--paper) 48% 100%);
    text-align: center;
  }
  .hero-copy-block { width: min(100%, 760px); margin: 0 auto; }
  .hero .eyebrow { color: #e4c782; }
  .hero-copy { color: rgba(255,255,255,.76); }
  .hero .play-cta span { color: rgba(255,255,255,.68); }
  .hero-copy, .hero-copy-block h1 { margin-left: auto; margin-right: auto; }
  .play-cta { justify-items: center; }
  .hero-devices { min-height: 680px; justify-content: center; }
  .hero-devices .device { width: 295px; }
  .device-home { right: 50%; transform: translateX(6%) rotate(-4deg); }
  .device-rediscover { right: 50%; transform: translate(92%, 45px) rotate(5deg); }
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2.5vw, 28px);
    padding: 28px max(16px, calc((100vw - 760px) / 2)) 32px;
  }
  .principles div {
    min-width: 0;
    min-height: auto;
    padding: 18px clamp(4px, 1.5vw, 12px);
    justify-content: flex-start;
  }
  .principles strong { font-size: clamp(1rem, 3.2vw, 1.35rem); }
  .principles span {
    font-size: clamp(.74rem, 2.1vw, .88rem);
    line-height: 1.38;
  }
  .screen-gallery { grid-template-columns: 1fr; gap: 88px; }
  .screen-story, .screen-story-offset { padding-top: 0; display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 42px; align-items: center; }
  .screen-story:nth-child(even) .device { order: 2; }
  .screen-story > div { margin: 0; }
  .privacy-panel { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --page: min(100% - 28px, 520px); }
  .site-header {
    width: 100%;
    min-height: 70px;
    top: 0;
    margin-top: 0;
    padding: 0 14px;
    gap: 14px;
    border-radius: 0;
  }
  .site-header.is-scrolled { width: calc(100% - 16px); min-height: 58px; top: 8px; border-radius: 15px; }
  .brand { gap: 8px; font-size: 1.25rem; }
  .brand img { width: 40px; height: 40px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
  .nav-links { gap: 9px; font-size: .78rem; }
  .hero {
    width: 100%;
    padding: 54px 14px 72px;
    color: var(--white);
    background: linear-gradient(to bottom, var(--forest) 0 48%, var(--paper) 48% 100%);
  }
  .hero-copy-block { width: min(100%, 520px); margin: 0 auto; }
  .hero .eyebrow { color: #e4c782; }
  .hero-copy { color: rgba(255,255,255,.76); }
  .hero .play-cta span { color: rgba(255,255,255,.68); }
  .hero h1 { font-size: clamp(3.25rem, 15vw, 5rem); }
  .hero-devices { min-height: 500px; }
  .hero-devices .device { width: 215px; padding: 6px; border-radius: 31px; }
  .hero-devices .device img { border-radius: 26px; }
  .device-home { transform: translateX(1%) rotate(-4deg); }
  .device-rediscover { transform: translate(86%, 35px) rotate(5deg); }
  .principles { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .principles strong::after { width: 22px; margin-top: 8px; }
  .app-section { padding: 94px 0 105px; }
  .section-heading { margin-bottom: 62px; }
  .screen-gallery { gap: 76px; }
  .screen-story, .screen-story-offset { display: block; }
  .screen-story:nth-child(even) .device { order: initial; }
  .screen-story .device { max-width: 238px; }
  .screen-story > div { margin: 26px auto 0; text-align: center; }
  .privacy-panel { width: 100%; margin-bottom: 84px; padding: 54px 24px; border-radius: 0; gap: 44px; }
  .privacy-panel .privacy-promises li { padding: 18px 4px; gap: 12px; }
  .policy-contents ul { grid-template-columns: 1fr; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .support-grid { grid-template-columns: 1fr; }
  .support-checklist { margin-top: 48px; }
  .support-checklist ol { grid-template-columns: 1fr; }
  .support-warning { padding: 25px 24px; }
}

@media (max-width: 380px) {
  .site-header { gap: 14px; }
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .brand img { transition: none; }
}

/* Locked screen pixels in a single smooth vector phone frame. Raster proof
   canvas and raster bezel are never displayed. Existing phone slots retained. */
.device.device-artwork {
  --legacy-frame: 8px;
  --legacy-ratio: 2.2235434007;
  padding: 0;
  background: transparent;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
.screen-story .device.device-artwork { position: relative; }
.device.device-artwork[data-phone="chapters"] { --legacy-ratio: 2.1666666667; }
.device.device-artwork::before {
  content: "";
  display: block;
  padding-top: calc((100% - 2 * var(--legacy-frame)) * var(--legacy-ratio) + 2 * var(--legacy-frame));
}
.device-artwork .phone-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 32px 40px rgba(34, 48, 43, 0.22));
}
@media (max-width: 640px) {
  .hero-devices .device.device-artwork { --legacy-frame: 6px; padding: 0; }
}