/*
  Edit PDF Offline · home.css
  Landing page only (index.html). Loaded after site.css and built from its tokens.

  Contents
    1. Hero (copy, stage)          5. Tools grid (merge, split, organize)
    2. Feature rows                6. Mac coming soon
    3. Steps, notes, points        7. Privacy
    4. Screen switcher chips       8. Details, FAQ footer, download band, scroll reveal
*/

/* 1. Hero ----------------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(1.75rem, 0.6rem + 4.5vw, 4.5rem) var(--section-y-sm);
}

.hero__inner {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}

.hero__copy {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}

.hero__app {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  text-align: left;
}

.hero__app-icon { width: 3.5rem; height: 3.5rem; }
.hero__app-text { display: grid; gap: 0.125rem; line-height: 1.2; }
.hero__app-name { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; }
.hero__app-sub { color: var(--ink-secondary); font-size: var(--fs-small); }

.hero__title { max-width: 10.5em; }
.hero__lede { max-width: 31em; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.text-link svg { flex: none; width: 1.125em; height: 1.125em; }

@media (hover: hover) {
  .text-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__facts .pill-tag { min-height: 2rem; padding-inline: 0.75rem 0.875rem; }
.hero__facts svg { color: var(--brand-ink); }

@media (max-width: 29.99em) {
  .hero__facts {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    justify-content: center;
    gap: 0.25rem 1.25rem;
  }

  .hero__facts .pill-tag {
    min-height: 1.75rem;
    padding: 0;
    background: none;
    white-space: normal;
    text-align: left;
  }
}

/* The stage: the library on the right, the reader with Edit Text beside it on the left. */
.hero-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 56fr);
  column-gap: 5%;
  align-items: end;
  width: min(100%, 34rem);
  margin-inline: auto;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 8% 0 4%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent) 55%, transparent);
}

.hero-stage__back { --phone-w: 100%; margin-bottom: 6%; }
.hero-stage__main { --phone-w: 100%; }

@media (min-width: 68em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, -2rem + 6vw, 5rem);
  }

  .hero__copy { justify-items: start; text-align: left; }
  .hero__actions, .hero__facts { justify-content: flex-start; }
  .hero__app-icon { width: 4rem; height: 4rem; }
  .hero__title { max-width: none; }
  .hero-stage { margin-inline: auto 0; }
}

/* 2. Feature rows ----------------------------------------------------------------------------
   Phones: head, then the screenshot, then the details. From 896px: the screenshot fills one
   column and the head + details sit centered beside it.                                       */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
}

.feature__head { display: grid; gap: var(--space-3); max-width: 34rem; }
.feature__media { display: grid; justify-items: center; gap: var(--space-5); }
.feature__body { display: grid; gap: var(--space-6); max-width: 34rem; }
.feature__phone { --phone-w: min(100%, clamp(15rem, 62vw, 19.5rem)); }

@media (min-width: 40em) and (max-width: 55.99em) {
  .feature__head, .feature__body { justify-self: center; width: 100%; }
  .feature__head { justify-items: center; text-align: center; }
}

@media (min-width: 56em) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". media" "head media" "body media" ". media";
    column-gap: clamp(3rem, -1rem + 7vw, 7rem);
    row-gap: var(--space-6);
  }

  .feature--media-start { grid-template-areas: "media ." "media head" "media body" "media ."; }
  .feature > .feature__head { grid-area: head; }
  .feature > .feature__media { grid-area: media; align-self: center; }
  .feature > .feature__body { grid-area: body; }
}

/* 3. Steps, notes, points ---------------------------------------------------------------------- */

.steps { display: grid; margin: 0; padding: 0; list-style: none; }

.step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.125rem;
  border-top: 1px solid var(--hairline);
}

.step:first-child { padding-top: 0; border-top: 0; }
.step:last-child { padding-bottom: 0; }

.step__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.step__num--brand { background: var(--brand); color: var(--on-brand); }
.step__body { padding-top: 0.25rem; }
.step__title { font-size: var(--fs-h3); }
.step__text { margin-top: 0.25rem; color: var(--ink-secondary); }

.notes {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius-inner);
  background: var(--surface-muted);
  list-style: none;
}

.note { display: flex; align-items: flex-start; gap: 0.875rem; }
.note .icon-badge { background: var(--surface); }

.note__text {
  padding-top: 0.25rem;
  color: var(--ink-secondary);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.note__text strong { color: var(--ink); font-weight: 600; }

.points { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.point { display: flex; align-items: flex-start; gap: 1rem; }
.point__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.point__text { margin-top: 0.25rem; color: var(--ink-secondary); font-size: 1rem; line-height: 1.55; }

/* 4. Screen switcher chips (home.js swaps the screenshot) -------------------------------------- */

.switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
}

.switcher__static[hidden],
.switcher__chips[hidden] { display: none; }

.switcher__static { min-height: 2rem; padding-inline: 0.875rem; }
.switcher .chip { min-width: 4rem; }

.switch-phone .switch-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.switch-phone .switch-layer.is-front { z-index: 2; }
.switch-phone .switch-layer.is-shown { opacity: 1; }

/* 5. Tools grid: merge, split, organize --------------------------------------------------------- */

.tools {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
}

.tool__phone { --phone-w: min(100%, 15rem); justify-self: center; }
.tool__body { display: grid; gap: var(--space-3); }
.tool__title { font-size: var(--fs-h3); }
.tool__text { color: var(--ink-secondary); font-size: var(--fs-small); line-height: 1.5; }

.tool__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-secondary);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.tool__list li { display: flex; align-items: flex-start; gap: 0.5rem; }
.tool__list svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--brand-ink); }
.tool__list strong { color: var(--ink); font-weight: 600; }

@media (min-width: 40em) {
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .tool { padding: 1.25rem; }
  .tool__phone { --phone-w: min(100%, 12rem); }
}

/* 6. Mac coming soon ---------------------------------------------------------------------------- */

.mac {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.5vw, 3rem);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.mac__copy { display: grid; gap: var(--space-4); justify-items: start; }
.mac__title { font-size: var(--fs-h2); }
.mac__text { color: var(--ink-secondary); }

.mac__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mac__list li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--ink-secondary); font-size: var(--fs-small); line-height: 1.5; }
.mac__list svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; color: var(--brand-ink); }
.mac__list strong { color: var(--ink); font-weight: 600; }

/* A generic laptop drawn as an inline SVG (not a product likeness) with a sketch of the app's
   window; the Mac app has no screenshots yet, so nothing here pretends to be one. */
.mac__art { display: grid; justify-items: center; }
.mac__svg { width: min(100%, 34rem); height: auto; }

.feature__tablet { --tablet-w: min(100%, clamp(16rem, 70vw, 24rem)); }

.mac__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mac__badge svg { width: 1rem; height: 1rem; }

@media (min-width: 56em) {
  .mac {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: clamp(2rem, -1rem + 5vw, 4rem);
  }
}

/* 7. Privacy ----------------------------------------------------------------------------------- */

.privacy { display: grid; gap: clamp(2.5rem, 1.8rem + 3vw, 3.5rem); }
.privacy__intro { display: grid; gap: clamp(2.5rem, 1.8rem + 3vw, 3.5rem); }
.privacy__phone { --phone-w: min(100%, clamp(14rem, 58vw, 18rem)); justify-self: center; }
.privacy__body { position: relative; display: grid; gap: var(--space-5); }

.privacy__points {
  display: grid;
  gap: var(--grid-gap, clamp(1rem, 0.7rem + 1.2vw, 1.5rem));
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy-point { display: flex; align-items: flex-start; gap: 1rem; }
.privacy-point__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.privacy-point__text { margin-top: 0.25rem; color: var(--ink-secondary); font-size: var(--fs-small); line-height: 1.55; }

@media (min-width: 40em) {
  .privacy__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-point { flex-direction: column; gap: var(--space-4); }
  .privacy-point--lead { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.25rem; }
  .privacy-point--lead .icon-badge { --badge-size: 3.25rem; }
  .privacy-point--lead .privacy-point__title { font-size: var(--fs-h3); }
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .privacy .feature__head { justify-self: center; justify-items: center; width: 100%; text-align: center; }
}

@media (min-width: 64em) {
  .privacy {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: clamp(3rem, -1rem + 6vw, 6rem);
  }

  .privacy__phone { justify-self: start; }
}

/* 8. Details, FAQ footer, download band, scroll reveal --------------------------------------- */

.details { --grid-min: 15rem; margin: 0; padding: 0; list-style: none; }
.detail { display: flex; align-items: flex-start; gap: 1rem; }
.detail__body { display: grid; gap: 0.375rem; padding-top: 0.125rem; }
.detail__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.detail__text { color: var(--ink-secondary); font-size: var(--fs-small); line-height: 1.5; }

@media (min-width: 40em) {
  .detail { flex-direction: column; gap: var(--space-5); }
  .detail__body { padding-top: 0; }
}

.principle {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.principle__title { max-width: 14em; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.03em; }
.principle__text { max-width: 34em; }

.faq-more { display: flex; justify-content: center; margin-top: var(--space-6); }

.download__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.download__icon {
  width: 5rem;
  height: 5rem;
  margin-bottom: var(--space-2);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6);
}

.download__title { max-width: 13em; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.03em; }
.download__text { max-width: 30em; }

.download__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.download__facts { color: var(--ink-secondary); font-size: var(--fs-small); font-weight: 600; }

@media (min-width: 48em) {
  .download__icon { width: 6rem; height: 6rem; }
}

@media (max-width: 29.99em) {
  .download__actions { align-self: stretch; flex-direction: column; }
  .hero__actions .btn--brand { width: 100%; }
}

@media (max-width: 22.49em) {
  .hero__actions .btn, .download__actions .btn { padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .has-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }

  .has-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
}

@media print {
  .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}