/* Selected direction: “한 권의 여백” (01-frontend).
   Original B1 orange, a generous headline and a single white book leaf.
   Product examples keep the app’s components; the homepage stays light. */
:root {
  --ap-bg: #FAFAF7;
  --ap-card: #FFFFFF;
  --ap-ink: #1A1A1A;
  --ap-muted: #5C5C5C;
  --ap-line: #E5E3DC;
  --ap-line-strong: #D4D4D4;
  --ap-orange: #FF8A3D;
  --ap-orange-hover: #FFB880;
  --ap-tint: #FFF0E3;
  --ap-tint-strong: #FFEAD4;
  --ap-accent-text: #7A340A;
  --ap-on-orange: #1A1A1A;
  --ap-shadow: rgba(58, 42, 21, .08);
  --ap-cover-orange: #FFB880;
  --ap-cover-cream: #FFEAD4;
  --ap-cover-ink: #E9E7DF;
  --ap-cover-paper: #1A1A1A;
  --ap-cover-type: #1A1A1A;
}
:root.landing-light { color-scheme: light; background: var(--ap-bg); }
body.app-landing {
  --bg: var(--ap-bg);
  --surface: var(--ap-card);
  --sunken: var(--ap-tint);
  --fg: var(--ap-ink);
  --fg-muted: var(--ap-muted);
  --fg-subtle: var(--ap-muted);
  --border: var(--ap-line);
  --border-strong: var(--ap-line-strong);
  --ink: var(--ap-card);
  --on-ink: var(--ap-ink);
  --ink-muted: var(--ap-muted);
  --ink-line: var(--ap-line);
  --primary: var(--ap-orange);
  --primary-press: var(--ap-orange-hover);
  --primary-text: var(--ap-accent-text);
  --on-primary: var(--ap-on-orange);
  --paper: var(--ap-bg);
  --mark: var(--ap-tint-strong);
  --shadow: var(--ap-shadow);
  color-scheme: light;
  letter-spacing: -.01em;
  background: var(--ap-bg);
  color: var(--ap-ink);
}
body.app-landing .wrap { max-width: 1360px; padding-inline: 56px; }
body.app-landing :is(h1, h2, h3, h4, h5) { font-weight: 600; text-wrap: balance; }
body.app-landing p { word-break: keep-all; overflow-wrap: anywhere; }
body.app-landing :is(.ed-story, .ap-tour, .ed-reread, .ap-keep, .ap-friends, .ap-price, .maker, .faq-section, .launch) h2 { font-size: clamp(34px, 3.7vw, 50px); line-height: 1.22; letter-spacing: -.035em; }
body.app-landing :is(a, button, summary, input):focus-visible { outline: 3px solid var(--ap-accent-text); outline-offset: 5px; }
body.app-landing .button { min-height: 54px; border-radius: 999px; padding: 14px 24px; gap: 28px; font-size: 15px; font-weight: 650; }
body.app-landing .button:hover { background: var(--ap-tint); border-color: var(--ap-orange); }
body.app-landing .nav { background: var(--ap-bg); border-color: transparent; }
body.app-landing .nav__row { min-height: 100px; }
body.app-landing .brand { min-height: 48px; }
body.app-landing .brand__mark { width: 36px; height: 36px; }
body.app-landing .brand__wordmark { background: var(--ap-ink); }
body.app-landing .nav__links { gap: 28px; }
body.app-landing .nav__links a { min-height: 48px; color: var(--ap-ink); font-weight: 550; }
body.app-landing .nav__links a:hover { color: var(--ap-ink); }
body.app-landing .nav__links .nav__cta { background: var(--ap-card); color: var(--ap-ink); padding: 10px 20px; border: 1px solid var(--ap-line); border-radius: 999px; }
body.app-landing .nav__links .nav__cta:hover { background: var(--ap-tint); }
body.app-landing .nav__toggle { min-height: 48px; }


/* The selected opening spread. Only the book leaf is tilted. */
body.app-landing .ed-hero { min-height: 668px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 7%; align-items: center; padding-block: 54px 88px; }
body.app-landing .ed-hero__copy { min-width: 0; }
body.app-landing .ed-hero h1 { font-size: clamp(48px, 6.3vw, 88px); line-height: 1.09; letter-spacing: -.04em; font-weight: 650; }
body.app-landing .ed-hero__intro { margin-top: 34px; font-size: 23px; line-height: 1.5; letter-spacing: -.02em; }
body.app-landing .ed-hero__description { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--ap-muted); }
body.app-landing .ed-hero .button { margin-top: 30px; gap: 32px; min-height: 52px; }
body.app-landing .ed-hero .button svg { flex-shrink: 0; }
body.app-landing .ed-hero__release { font-size: 12px; color: var(--ap-muted); margin-top: 14px; }
body.app-landing .ed-leaf { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); width: 100%; max-width: 478px; justify-self: end; align-self: center; transform: rotate(2deg); }
body.app-landing .ed-leaf__edge { background: var(--ap-orange); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 24px; }
body.app-landing .ed-leaf__edge span { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: 3px; }
body.app-landing .ed-leaf__paper { padding: 30px 34px 25px; min-height: 440px; background: var(--ap-card); box-shadow: 0 18px 45px var(--ap-shadow); display: flex; flex-direction: column; }
body.app-landing .ed-leaf__top { display: flex; justify-content: space-between; gap: 16px; color: var(--ap-muted); font-size: 11px; }
body.app-landing .ed-leaf__book { font-size: 15px; font-weight: 600; margin-top: 37px; }
body.app-landing .ed-leaf__page { font-size: 12px; color: var(--ap-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
body.app-landing .ed-leaf__quote { font-size: 70px; font-weight: 500; line-height: .8; color: var(--ap-accent-text); height: 48px; margin-top: 40px; }
body.app-landing .ed-leaf__text { white-space: pre-line; font-size: clamp(22px, 2.6vw, 34px); font-weight: 450; letter-spacing: -.025em; line-height: 1.48; min-height: 151px; }
body.app-landing .ed-leaf__bottom { margin-top: 35px; padding-top: 17px; border-top: 1px solid var(--ap-line); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ap-muted); }
body.app-landing .ed-bookmark { width: 13px; height: 19px; background: var(--ap-orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
body.app-landing .ed-note-switch { grid-column: 1 / -1; display: flex; justify-content: center; gap: 4px; margin-top: 25px; transform: rotate(-2deg); }
body.app-landing .ed-note-switch button { border: 1px solid transparent; background: transparent; border-radius: 999px; min-height: 44px; padding: 10px 18px; font-size: 13px; }
body.app-landing .ed-note-switch button[aria-pressed='true'] { background: var(--ap-card); border-color: var(--ap-accent-text); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
body.app-landing .ed-note-switch button:hover { background: var(--ap-tint); }

/* Two short stories lead from a saved book to a saved thought. */
body.app-landing .ed-story { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding-block: 116px; }
body.app-landing .ed-story__heading > p { margin-top: 24px; color: var(--ap-muted); line-height: 1.75; font-size: 16px; }
body.app-landing .ed-story__detail article + article { margin-top: 47px; }
body.app-landing .ed-story__detail h3 { font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
body.app-landing .ed-story__detail p { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--ap-muted); }
body.app-landing .ed-shelf { display: flex; gap: 10px; margin-top: 24px; font-size: 13px; }
body.app-landing .ed-shelf span { padding: 10px 15px; background: var(--ap-card); border-radius: 9px; }
body.app-landing .ed-shelf .ed-shelf__active { background: var(--ap-tint); color: var(--ap-accent-text); }
body.app-landing .ed-line { display: flex; align-items: center; gap: 18px; margin-top: 22px; border-bottom: 1px solid var(--ap-line); padding-bottom: 17px; }
body.app-landing .ed-line span { font-size: 12px; flex-shrink: 0; color: var(--ap-accent-text); }
body.app-landing .ed-line p { margin: 0; font-size: 13px; }

/* A warm field connects the first reading to the next. */
body.app-landing .ed-reread { padding-block: 116px; background: var(--ap-tint); }
body.app-landing .ed-reread__grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 8%; }
body.app-landing .ed-reread__copy > p { margin-top: 24px; font-size: 16px; line-height: 1.85; color: var(--ap-accent-text); }
body.app-landing .ed-reread__records { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 18px; align-items: center; }
body.app-landing .ed-reread__records article { background: var(--ap-card); padding: 24px 18px 40px; min-height: 204px; }
body.app-landing .ed-reread__records article:nth-of-type(2) { transform: translateY(32px); }
body.app-landing .ed-reread__records h3 { font-size: 12px; font-weight: 400; color: var(--ap-muted); }
body.app-landing .ed-reread__records article p { font-size: 19px; line-height: 1.65; margin-top: 36px; }
body.app-landing .ed-reread__arrow { max-width: 100%; color: var(--ap-accent-text); }
body.app-landing .ed-reread__records small { grid-column: 1 / -1; margin-top: 30px; text-align: center; color: var(--ap-accent-text); font-size: 11px; }

/* App-native examples, with enough space to read each detail. */
body.app-landing .ap-library { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 12px; padding: 28px; width: 100%; }
body.app-landing .ap-component-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.app-landing .ap-component-heading :is(h2, h4) { margin: 0; font-size: 24px; line-height: 1.35; letter-spacing: -.035em; }
body.app-landing .ap-example { color: var(--ap-muted); font-size: 12px; }
body.app-landing .ap-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 5px 11px; min-height: 30px; border: 1px solid var(--ap-line); border-radius: 999px; color: var(--ap-muted); background: var(--ap-card); font-size: 12px; line-height: 1.5; font-weight: 600; }
body.app-landing .ap-chip--active { background: var(--ap-tint-strong); color: var(--ap-accent-text); border-color: var(--ap-orange); }
body.app-landing .ap-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
body.app-landing .ap-book { min-width: 0; }
body.app-landing .ap-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 5 / 7; border-radius: 12px; padding: 19px 15px 15px 20px; overflow: hidden; color: var(--ap-cover-type); border: 1px solid var(--ap-line-strong); }
body.app-landing .ap-cover::before { content: ''; position: absolute; inset: 0 auto 0 7px; border-left: 1px solid currentColor; opacity: .16; }
body.app-landing .ap-cover--orange { background: var(--ap-cover-orange); }
body.app-landing .ap-cover--cream { background: var(--ap-cover-cream); }
body.app-landing .ap-cover--ink { color: var(--ap-cover-paper); background: var(--ap-cover-ink); }
body.app-landing .ap-cover strong { font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; line-height: 1.18; letter-spacing: -.035em; }
body.app-landing .ap-cover > span { font-size: 9px; }
body.app-landing .ap-cover small { font-size: 8px; margin-top: 12px; }
body.app-landing .ap-book__title { margin-top: 11px; font-size: 13px; font-weight: 600; line-height: 1.5; word-break: keep-all; }
body.app-landing .ap-book__meta { margin-top: 4px; font-size: 12px; color: var(--ap-muted); }
body.app-landing .ap-progress { height: 5px; border-radius: 999px; background: var(--ap-line); margin-top: 10px; overflow: hidden; }
body.app-landing .ap-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ap-orange); }
body.app-landing .ap-progress--64 > span { width: 64%; }
body.app-landing .ap-progress--28 > span { width: 28%; }
body.app-landing .ap-memo { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 16px; padding: 22px 24px; }
body.app-landing .ap-memo__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ap-muted); }
body.app-landing .ap-memo__text { font-size: 19px; font-weight: 500; line-height: 1.65; letter-spacing: -.035em; margin-top: 13px; word-break: keep-all; }
body.app-landing .ap-memo__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 12px; color: var(--ap-muted); }
body.app-landing .ap-promise { border-block: 1px solid var(--ap-line); background: var(--ap-card); }
body.app-landing .ap-promise__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 100px; padding-block: 24px; }
body.app-landing .ap-promise p { font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
body.app-landing .ap-promise ul { display: flex; flex-wrap: wrap; gap: 15px 38px; list-style: none; padding: 0; font-size: 14px; color: var(--ap-muted); }
body.app-landing .ap-promise li::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--ap-orange); border-radius: 50%; margin-right: 12px; vertical-align: middle; }

/* The five tabs reveal semantic examples. Without JS, all five stay visible. */
body.app-landing .ap-tour { padding-bottom: 116px; }
body.app-landing .ap-tour__heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; border-top: 1px solid var(--ap-line); padding-top: 62px; margin-bottom: 32px; }
body.app-landing .ap-tour__heading > p { color: var(--ap-muted); font-size: 16px; line-height: 1.8; }
body.app-landing .ap-tour__tabs { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
body.app-landing [data-app-preview].is-enhanced .ap-tour__tabs { display: flex; }
body.app-landing .ap-tour__tabs button { min-height: 48px; padding: 11px 23px; border-radius: 999px; background: transparent; color: var(--ap-muted); border: 1px solid transparent; font-size: 14px; font-weight: 600; transition: background .18s var(--ease), border-color .18s var(--ease); }
body.app-landing .ap-tour__tabs button:hover { background: var(--ap-tint); border-color: var(--ap-orange); }
body.app-landing .ap-tour__tabs button[aria-selected='true'] { background: var(--ap-card); color: var(--ap-accent-text); border-color: var(--ap-accent-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
body.app-landing .ap-tour__panel { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 8%; background: var(--ap-bg); border-block: 1px solid var(--ap-line); padding: 40px 0; }
body.app-landing .ap-tour__panel + .ap-tour__panel { margin-top: 28px; }
body.app-landing [data-app-preview].is-enhanced .ap-tour__panel { margin-top: 0; }
body.app-landing .ap-tour__panel:focus-visible { outline: 3px solid var(--ap-accent-text); outline-offset: 5px; }
body.app-landing .ap-tour__visual { display: flex; align-items: center; min-width: 0; min-height: 448px; }
body.app-landing .ap-tour__copy { padding-block: 15px; }
body.app-landing .ap-tour__kind { display: inline-block; font-size: 12px; color: var(--ap-accent-text); font-weight: 600; margin-bottom: 17px; }
body.app-landing .ap-tour__copy h3 { font-size: 31px; line-height: 1.4; letter-spacing: -.035em; }
body.app-landing .ap-tour__copy > p:not(.ap-tour__kind) { color: var(--ap-muted); font-size: 15px; line-height: 1.85; margin-top: 22px; word-break: keep-all; }
body.app-landing .ap-tour__details { margin-top: 28px; }
body.app-landing .ap-tour__details > div { border-top: 1px solid var(--ap-line-strong); padding-block: 16px; }
body.app-landing .ap-tour__details dt { font-size: 14px; font-weight: 600; }
body.app-landing .ap-tour__details dd { font-size: 13px; line-height: 1.75; color: var(--ap-muted); margin-top: 5px; word-break: keep-all; }
body.app-landing .ap-tour__disclaimer { font-size: 12px; color: var(--ap-muted); margin-top: 17px; line-height: 1.7; }
body.app-landing .ap-static-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 20px; }
body.app-landing .ap-library--tour { padding: 25px; }
body.app-landing .ap-library--tour .ap-books { gap: 13px; }
body.app-landing .ap-library--tour .ap-cover { padding: 16px 8px 12px 15px; }
body.app-landing .ap-library--tour .ap-cover strong { font-size: 24px; }
body.app-landing .ap-library--tour .ap-cover small { font-size: 7px; }
body.app-landing .ap-library--tour .ap-book__title { font-size: 12px; }
body.app-landing .ap-book-detail { border-top: 1px solid var(--ap-line); margin-top: 24px; padding-top: 19px; }
body.app-landing .ap-book-detail > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
body.app-landing .ap-book-detail strong { font-weight: 600; }
body.app-landing .ap-book-detail > div > span { color: var(--ap-muted); font-size: 11px; white-space: nowrap; }
body.app-landing .ap-book-detail > p { color: var(--ap-muted); font-size: 12px; margin-top: 10px; }
body.app-landing .ap-component { width: 100%; background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 12px; padding: 28px; }
body.app-landing .ap-search__query { display: flex; flex-direction: column; gap: 3px; margin-top: 25px; border: 1px solid var(--ap-line-strong); background: var(--ap-bg); padding: 13px 20px; border-radius: 999px; }
body.app-landing .ap-search__query span { font-size: 10px; color: var(--ap-muted); }
body.app-landing .ap-search__query strong { font-size: 15px; font-weight: 600; }
body.app-landing .ap-search__caption { margin-top: 10px; font-size: 11px; color: var(--ap-muted); }
body.app-landing .ap-search__results { list-style: none; padding: 0; margin-top: 22px; }
body.app-landing .ap-search__results li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 18px; border-top: 1px solid var(--ap-line); }
body.app-landing .ap-search__results .ap-cover { padding: 12px 8px 9px 14px; border-radius: 8px; }
body.app-landing .ap-search__results .ap-cover strong { font-size: 17px; }
body.app-landing :is(.ap-search__results, .ap-rereads__book) h5 { font-size: 16px; margin: 0; line-height: 1.5; }
body.app-landing :is(.ap-search__results, .ap-rereads__book) p { font-size: 12px; color: var(--ap-muted); margin-top: 5px; }
body.app-landing .ap-search__results li > div:last-child > span { display: inline-flex; font-size: 11px; color: var(--ap-muted); margin-top: 11px; }
body.app-landing .ap-search__results li > div:last-child > .ap-chip--active { color: var(--ap-accent-text); }
body.app-landing .ap-calendar table { width: 100%; margin-top: 22px; border-collapse: collapse; text-align: center; table-layout: fixed; font-size: 13px; }
body.app-landing .ap-calendar caption { text-align: left; font-size: 17px; font-weight: 600; margin-bottom: 18px; }
body.app-landing .ap-calendar th { color: var(--ap-muted); font-size: 11px; font-weight: 500; height: 32px; }
body.app-landing .ap-calendar td { height: 39px; }
body.app-landing .ap-calendar td.is-read > span:first-child { display: inline-grid; place-items: center; width: 31px; height: 31px; background: var(--ap-tint-strong); border: 1px solid var(--ap-orange); color: var(--ap-accent-text); border-radius: 9px; }
body.app-landing .ap-calendar td.is-current > span:first-child { background: var(--ap-orange); color: var(--ap-on-orange); font-weight: 700; }
body.app-landing .ap-calendar__entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--ap-line); padding-top: 19px; margin-top: 20px; }
body.app-landing .ap-calendar__entry > div { display: flex; flex-direction: column; gap: 5px; }
body.app-landing .ap-calendar__entry > div > span { font-size: 11px; color: var(--ap-muted); }
body.app-landing .ap-calendar__entry strong { font-size: 13px; font-weight: 600; }
body.app-landing .ap-calendar__legend { font-size: 11px; color: var(--ap-muted); margin-top: 15px; }
body.app-landing .ap-memos { width: 100%; }
body.app-landing .ap-memos > .ap-component-heading { margin-bottom: 24px; }
body.app-landing .ap-memos .ap-memo + .ap-memo { margin-top: 14px; }
body.app-landing .ap-memo__quote { margin: 16px 0 0; color: var(--ap-accent-text); font-size: 20px; line-height: 1.65; font-weight: 500; letter-spacing: -.035em; }
body.app-landing .ap-rereads__book { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 19px; align-items: center; margin-top: 24px; }
body.app-landing .ap-rereads__book .ap-cover { padding: 13px 8px 10px 15px; border-radius: 8px; }
body.app-landing .ap-rereads__book .ap-cover strong { font-size: 18px; }
body.app-landing .ap-rereads__book .ap-chip { margin-top: 11px; }
body.app-landing .ap-rereads__list { padding: 0; margin-top: 25px; list-style: none; }
body.app-landing .ap-rereads__list li { display: flex; align-items: start; gap: 15px; padding-block: 20px; border-top: 1px solid var(--ap-line); }
body.app-landing .ap-rereads__list strong { font-size: 14px; font-weight: 600; }
body.app-landing .ap-rereads__list p { font-size: 12px; color: var(--ap-muted); margin-top: 7px; }
body.app-landing .ap-rereads__list div > span { display: block; font-size: 11px; color: var(--ap-muted); margin-top: 5px; }

/* The same restrained surfaces continue through the service details. */
body.app-landing .ap-keep { padding-block: 116px 90px; }
body.app-landing .ap-keep__heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 40px; }
body.app-landing .ap-keep__heading > p { color: var(--ap-muted); font-size: 16px; line-height: 1.85; }
body.app-landing .ap-keep__main { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-block: 1px solid var(--ap-line); padding: 38px 0; background: transparent; }
body.app-landing .ap-keep__main article { padding-right: 48px; }
body.app-landing .ap-keep__main article + article { padding-left: 48px; padding-right: 0; border-left: 1px solid var(--ap-line); }
body.app-landing .ap-keep__main h3 { font-size: 27px; line-height: 1.4; letter-spacing: -.04em; }
body.app-landing .ap-keep__main p { margin-top: 19px; color: var(--ap-muted); font-size: 15px; line-height: 1.85; word-break: keep-all; }
body.app-landing .ap-keep__main .ap-keep__detail { font-size: 12px; margin-top: 22px; }
body.app-landing .ap-file-formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
body.app-landing .ap-file-formats > span { border: 1px solid var(--ap-line); border-radius: 8px; padding: 4px 11px; font-size: 12px; color: var(--ap-muted); }
body.app-landing .ap-keep__details { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 40px; margin-top: 35px; }
body.app-landing .ap-keep__details dt { font-size: 15px; font-weight: 600; }
body.app-landing .ap-keep__details dd { color: var(--ap-muted); font-size: 13px; line-height: 1.85; margin-top: 9px; word-break: keep-all; }
body.app-landing .ap-friends { padding-bottom: 88px; }
body.app-landing .ap-friends__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; padding-top: 58px; position: relative; }
body.app-landing .ap-friends__grid::before { content: ''; position: absolute; left: 56px; right: 56px; top: 0; border-top: 1px solid var(--ap-line); }
body.app-landing .ap-friends__grid > div > p { margin-top: 23px; font-size: 16px; line-height: 1.85; color: var(--ap-muted); }
body.app-landing .ap-friends__details dl > div { padding-block: 19px; border-bottom: 1px solid var(--ap-line); }
body.app-landing .ap-friends__details dl > div:first-child { padding-top: 3px; }
body.app-landing .ap-friends__details dt { font-size: 16px; font-weight: 600; }
body.app-landing .ap-friends__details dd { color: var(--ap-muted); font-size: 14px; line-height: 1.85; margin-top: 8px; word-break: keep-all; }
body.app-landing .ap-friends__details .text-link { margin-top: 18px; }
body.app-landing .ap-price { background: var(--ap-card); border-block: 1px solid var(--ap-line); padding-block: 100px; }
body.app-landing .ap-price__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; }
body.app-landing .ap-price__grid > div > p { font-size: 16px; color: var(--ap-muted); line-height: 1.85; margin-top: 23px; }
body.app-landing .ap-price__details { border-block: 1px solid var(--ap-line); padding: 30px 0; }
body.app-landing .ap-price__free { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
body.app-landing .ap-price__free h3 { font-size: 20px; font-weight: 600; }
body.app-landing .ap-price__free p { font-size: 34px; line-height: 1.4; font-weight: 700; }
body.app-landing .ap-price__free p > span { font-size: 18px; margin-left: 3px; }
body.app-landing .ap-price__details > .ap-price__included { font-size: 14px; margin-top: 16px; line-height: 1.85; }
body.app-landing .ap-price__support { border-top: 1px solid var(--ap-line); margin-top: 25px; padding-top: 23px; }
body.app-landing .ap-price__support > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
body.app-landing .ap-price__support h3 { font-size: 15px; font-weight: 600; }
body.app-landing .ap-price__support h3 > span { font-size: 11px; color: var(--ap-muted); margin-left: 6px; font-weight: 400; }
body.app-landing .ap-price__support > div > p { font-size: 16px; font-weight: 600; }
body.app-landing .ap-price__support > p { font-size: 12px; line-height: 1.85; color: var(--ap-muted); margin-top: 14px; }
body.app-landing .maker { background: var(--ap-bg); color: var(--ap-ink); padding-block: 90px; }
body.app-landing .maker__grid { grid-template-columns: 1.02fr 1fr; gap: 64px; }
body.app-landing .maker h2 { margin-top: 23px; }
body.app-landing .maker__story { margin-top: 23px; font-size: 15px; color: var(--ap-muted); }
body.app-landing .maker__sign { border-color: var(--ap-line); }
body.app-landing .maker__facts { margin-top: 4px; padding-top: 0; }
body.app-landing .maker__facts > div { grid-template-columns: 64px 1fr; gap: 20px; }
body.app-landing .maker__facts a:hover { color: var(--ap-accent-text); }
body.app-landing .faq-section { padding-block: 85px 90px; }
body.app-landing .faq-section__grid { grid-template-columns: 1.02fr 1fr; gap: 64px; }
body.app-landing .faq-section h2 { margin-top: 22px; }
body.app-landing .faq summary { min-height: 64px; padding-block: 21px; }
body.app-landing .launch { background: var(--ap-card); padding-block: 90px; border-top: 1px solid var(--ap-line); }
body.app-landing .launch__grid { grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; }
body.app-landing .launch h2 { margin-top: 25px; }
body.app-landing .launch__text { font-size: 16px; }
body.app-landing .store-badge--placeholder { border-radius: 12px; min-height: 52px; }
body.app-landing .notify { max-width: none; border: 1px solid var(--ap-line); border-radius: 8px; padding: 30px; background: var(--ap-bg); }
body.app-landing .notify input[type='email'] { border-radius: 8px; background: var(--ap-card); min-height: 52px; }
body.app-landing .notify .check { min-height: 48px; }
body.app-landing .notify .check input { accent-color: var(--ap-accent-text); }
body.app-landing .footer { background: var(--ap-bg); color: var(--ap-ink); border-color: var(--ap-line); padding-block: 42px 27px; }
body.app-landing .footer__links a { min-height: 48px; }
body.app-landing .footer a:hover { color: var(--ap-accent-text); }

@media (max-width: 1100px) {
  body.app-landing .ed-hero { gap: 5%; padding-top: 40px; }
  body.app-landing .ed-hero h1 { font-size: clamp(46px, 6.1vw, 65px); }
  body.app-landing .ed-leaf__paper { padding: 25px; min-height: 420px; }
  body.app-landing .ed-leaf__text { min-height: 145px; }
  body.app-landing .ed-story, body.app-landing .ed-reread { padding-block: 88px; }
  body.app-landing .ed-reread__grid { gap: 5%; }
  body.app-landing .ed-reread__records { gap: 12px; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); }
  body.app-landing .ed-reread__records article p { font-size: 17px; }
  body.app-landing .wrap { padding-inline: 32px; }
  body.app-landing .ap-tour__panel { gap: 36px; padding-block: 32px; }
  body.app-landing .ap-library--tour { padding: 20px; }
  body.app-landing .ap-library--tour .ap-cover strong { font-size: 20px; }
  body.app-landing .ap-library--tour .ap-books { gap: 10px; }
  body.app-landing .ap-tour__copy h3 { font-size: 28px; }
  body.app-landing :is(.ap-friends__grid, .ap-price__grid, .maker__grid, .faq-section__grid, .launch__grid) { gap: 48px; }
  body.app-landing .ap-keep__main { padding-block: 32px; }
  body.app-landing .ap-keep__main article { padding-right: 32px; }
  body.app-landing .ap-keep__main article + article { padding-left: 32px; }
  body.app-landing .ap-friends__grid::before { left: 32px; right: 32px; }
}
@media (max-width: 900px) {
  body.app-landing .ap-promise__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  body.app-landing .ap-tour__panel { grid-template-columns: 1fr; gap: 32px; }
  body.app-landing .ap-tour__visual { min-height: 0; max-width: 480px; width: 100%; margin-inline: auto; }
  body.app-landing .ap-tour__copy { padding-block: 0; }
  body.app-landing .ap-tour__copy > p:not(.ap-tour__kind) { max-width: 520px; }
  body.app-landing .ap-tour__details { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
  body.app-landing .ap-library--tour { padding: 28px; }
  body.app-landing .ap-library--tour .ap-cover strong { font-size: 28px; }
  body.app-landing .ap-library--tour .ap-books { gap: 18px; }
  body.app-landing .ap-tour__heading { align-items: start; }
  body.app-landing .ap-tour__heading > p { font-size: 14px; }
  body.app-landing :is(.ap-friends__grid, .ap-price__grid, .maker__grid, .faq-section__grid, .launch__grid) { grid-template-columns: 1fr; gap: 36px; }
  body.app-landing .ap-keep__heading { display: block; }
  body.app-landing .ap-keep__heading > p { margin-top: 20px; }
  body.app-landing .ap-keep__main h3 { font-size: 23px; }
  body.app-landing .ap-keep__details { gap: 24px; }
  body.app-landing .ap-price__details { max-width: 540px; width: 100%; }
  body.app-landing .notify { max-width: 540px; justify-self: start; }
}
@media (max-width: 760px) {
  body.app-landing .ed-hero { grid-template-columns: 1fr; min-height: 0; padding-block: 40px 60px; gap: 54px; }
  body.app-landing .ed-hero h1 { font-size: clamp(47px, 11.8vw, 70px); }
  body.app-landing .ed-hero__intro { margin-top: 26px; font-size: 20px; }
  body.app-landing .ed-hero__description { font-size: 15px; margin-top: 16px; }
  body.app-landing .ed-hero .button { margin-top: 24px; }
  body.app-landing .ed-leaf { width: calc(100% - 12px); max-width: 430px; justify-self: center; grid-template-columns: 22px minmax(0, 1fr); transform: rotate(1deg); }
  body.app-landing .ed-leaf__paper { min-height: 397px; padding: 25px 26px; }
  body.app-landing .ed-leaf__book { margin-top: 28px; }
  body.app-landing .ed-leaf__quote { margin-top: 30px; }
  body.app-landing .ed-leaf__text { font-size: 29px; min-height: 129px; }
  body.app-landing .ed-leaf__bottom { margin-top: 28px; }
  body.app-landing .ed-note-switch { transform: rotate(-1deg); margin-top: 19px; }
  body.app-landing .ed-story { grid-template-columns: 1fr; gap: 38px; padding-block: 66px; }
  body.app-landing .ed-story__detail h3 { font-size: 21px; }
  body.app-landing .ed-story__detail article + article { margin-top: 35px; }
  body.app-landing .ed-shelf { gap: 6px; }
  body.app-landing .ed-shelf span { padding: 10px 12px; }
  body.app-landing .ed-reread { padding-block: 66px; }
  body.app-landing .ed-reread__grid { grid-template-columns: 1fr; gap: 40px; }
  body.app-landing .ed-reread__records { gap: 12px; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  body.app-landing .ed-reread__records article { padding: 20px 15px 30px; min-height: 180px; }
  body.app-landing .ed-reread__records article p { font-size: 17px; margin-top: 28px; }
  body.app-landing .ed-reread__records article:nth-of-type(2) { transform: translateY(22px); }
  body.app-landing .ed-reread__records small { margin-top: 24px; }
  body.app-landing .wrap { padding-inline: 20px; }
  body.app-landing :is(.ap-keep, .maker, .faq-section, .launch) { padding-block: 66px; }
  body.app-landing .nav__row { min-height: 72px; gap: 0 20px; }
  body.app-landing .nav__links { gap: 4px 20px; padding-block: 5px 16px; }
  body.app-landing .nav__links .nav__cta { padding-inline: 18px; }
  body.app-landing .ap-promise__row { padding-block: 25px; }
  body.app-landing .ap-promise p { font-size: 17px; }
  body.app-landing .ap-promise ul { gap: 9px 14px; font-size: 12px; }
  body.app-landing .ap-promise li::before { width: 5px; height: 5px; margin-right: 7px; }
  body.app-landing :is(.ed-story, .ap-tour, .ed-reread, .ap-keep, .ap-friends, .ap-price, .maker, .faq-section, .launch) h2 { font-size: 36px; }
  body.app-landing .ap-tour { padding-bottom: 66px; }
  body.app-landing .ap-tour__heading { display: block; padding-top: 41px; margin-bottom: 25px; }
  body.app-landing .ap-tour__heading > p { margin-top: 20px; font-size: 15px; }
  body.app-landing .ap-tour__tabs { gap: 8px; margin-bottom: 22px; }
  body.app-landing .ap-tour__tabs button { padding: 10px 17px; font-size: 13px; }
  body.app-landing .ap-tour__panel { padding: 28px 0; gap: 30px; }
  body.app-landing .ap-library--tour { padding: 20px 17px; border-radius: 16px; }
  body.app-landing .ap-library--tour .ap-cover { padding: 14px 7px 11px 12px; border-radius: 8px; }
  body.app-landing .ap-library--tour .ap-cover::before { left: 5px; }
  body.app-landing .ap-library--tour .ap-cover strong { font-size: 23px; }
  body.app-landing .ap-library--tour .ap-cover small { display: none; }
  body.app-landing .ap-library--tour .ap-books { gap: 11px; }
  body.app-landing .ap-library--tour .ap-book__title { font-size: 11px; }
  body.app-landing .ap-library--tour .ap-book__meta { font-size: 11px; }
  body.app-landing .ap-component-heading :is(h2, h4) { font-size: 21px; }
  body.app-landing .ap-static-filters { gap: 5px; }
  body.app-landing .ap-static-filters .ap-chip { font-size: 11px; padding-inline: 8px; }
  body.app-landing .ap-book-detail > div:first-child { display: block; }
  body.app-landing .ap-book-detail > div:first-child > span { display: block; margin-top: 4px; }
  body.app-landing .ap-tour__copy h3 { font-size: 27px; }
  body.app-landing .ap-tour__kind { margin-bottom: 12px; }
  body.app-landing .ap-tour__copy > p:not(.ap-tour__kind) { margin-top: 18px; font-size: 14px; }
  body.app-landing .ap-tour__details { display: block; margin-top: 22px; }
  body.app-landing .ap-tour__details > div { padding-block: 15px; }
  body.app-landing .ap-tour__disclaimer { font-size: 11px; }
  body.app-landing .ap-component { padding: 22px 18px; border-radius: 16px; }
  body.app-landing .ap-search__results li { grid-template-columns: 62px minmax(0, 1fr); gap: 13px; }
  body.app-landing .ap-search__results .ap-cover { padding-left: 12px; }
  body.app-landing .ap-search__results .ap-cover strong { font-size: 15px; }
  body.app-landing :is(.ap-search__results, .ap-rereads__book) h5 { font-size: 14px; }
  body.app-landing .ap-search__query { padding-inline: 17px; }
  body.app-landing .ap-calendar caption { font-size: 16px; }
  body.app-landing .ap-calendar td { font-size: 12px; height: 35px; }
  body.app-landing .ap-calendar td.is-read > span:first-child { width: 28px; height: 28px; }
  body.app-landing .ap-calendar__entry { align-items: start; gap: 8px; }
  body.app-landing .ap-calendar__entry > .ap-chip { font-size: 10px; padding-inline: 7px; }
  body.app-landing .ap-calendar__entry strong { font-size: 12px; }
  body.app-landing .ap-memos .ap-memo { padding: 19px; }
  body.app-landing .ap-memo__quote, body.app-landing .ap-memos .ap-memo__text { font-size: 18px; }
  body.app-landing .ap-rereads__book { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  body.app-landing .ap-rereads__book .ap-cover strong { font-size: 16px; }
  body.app-landing .ap-rereads__book .ap-chip { font-size: 10px; padding-inline: 7px; }
  body.app-landing .ap-rereads__list li { gap: 11px; }
  body.app-landing .ap-rereads__list strong { font-size: 13px; }
  body.app-landing .ap-keep__heading { margin-bottom: 29px; }
  body.app-landing .ap-keep__heading > p { font-size: 15px; }
  body.app-landing .ap-keep__main { grid-template-columns: 1fr; padding: 26px 0; }
  body.app-landing .ap-keep__main article { padding-right: 0; }
  body.app-landing .ap-keep__main article + article { padding: 25px 0 0; margin-top: 25px; border-left: 0; border-top: 1px solid var(--ap-line); }
  body.app-landing .ap-keep__main h3 { font-size: 24px; }
  body.app-landing .ap-keep__main p { font-size: 14px; }
  body.app-landing .ap-keep__details { grid-template-columns: 1fr; gap: 23px; margin-top: 28px; }
  body.app-landing .ap-friends { padding-bottom: 64px; }
  body.app-landing .ap-friends__grid { padding-top: 43px; }
  body.app-landing .ap-friends__grid::before { left: 20px; right: 20px; }
  body.app-landing .ap-friends__grid > div > p { font-size: 15px; }
  body.app-landing .ap-friends__details dd { font-size: 13px; }
  body.app-landing .ap-price { padding-block: 64px; }
  body.app-landing .ap-price__grid > div > p { margin-top: 19px; font-size: 15px; }
  body.app-landing .ap-price__details { padding: 25px 0; }
  body.app-landing .ap-price__free h3 { font-size: 18px; }
  body.app-landing .ap-price__support > p br { display: none; }
  body.app-landing .maker__facts > div { grid-template-columns: 54px 1fr; gap: 15px; }
  body.app-landing .maker__facts dd { font-size: 13px; }
  body.app-landing .launch__text { font-size: 15px; }
  body.app-landing .notify { padding: 24px 22px; border-radius: 12px; }
  body.app-landing .notify h3 { font-size: 19px; }
  body.app-landing .footer { padding-block: 33px 23px; }
}
@media (max-width: 380px) {
  body.app-landing .ed-hero h1 { font-size: 43px; }
  body.app-landing .ed-leaf__text { font-size: 25px; }
  body.app-landing .ed-leaf__paper { padding: 23px 20px; }
  body.app-landing .ed-leaf__top { font-size: 10px; gap: 8px; }
  body.app-landing .ed-note-switch button { padding-inline: 14px; }
  body.app-landing .ed-reread__records { gap: 8px; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
  body.app-landing .ed-reread__records article { padding: 18px 11px 26px; }
  body.app-landing .ed-reread__records article p { font-size: 15px; }
  body.app-landing .wrap { padding-inline: 16px; }
  body.app-landing .button { padding-inline: 19px; gap: 19px; font-size: 14px; }
  body.app-landing .ap-book__title { font-size: 12px; }
  body.app-landing .ap-promise ul { gap: 7px 9px; font-size: 11px; }
  body.app-landing :is(.ed-story, .ap-tour, .ed-reread, .ap-keep, .ap-friends, .ap-price, .maker, .faq-section, .launch) h2 { font-size: 32px; }
  body.app-landing .ap-tour__panel { padding-inline: 0; }
  body.app-landing .ap-library--tour { padding-inline: 13px; }
  body.app-landing .ap-library--tour .ap-books { gap: 8px; }
  body.app-landing .ap-library--tour .ap-cover { padding: 12px 5px 10px 10px; }
  body.app-landing .ap-library--tour .ap-cover strong { font-size: 17px; }
  body.app-landing .ap-static-filters .ap-chip { padding-inline: 6px; font-size: 10px; }
  body.app-landing .ap-component { padding-inline: 14px; }
  body.app-landing .ap-calendar td.is-read > span:first-child { width: 25px; height: 27px; }
  body.app-landing .ap-calendar__entry { flex-wrap: wrap; }
  body.app-landing .ap-memos .ap-memo { padding: 16px; }
  body.app-landing .ap-memo__quote, body.app-landing .ap-memos .ap-memo__text { font-size: 16px; }
  body.app-landing .ap-tour__copy h3 { font-size: 25px; }
  body.app-landing .ap-friends__grid::before { left: 16px; right: 16px; }
  body.app-landing .ap-price__details { padding-block: 22px; }
  body.app-landing .notify { padding-inline: 19px; }
}
@media (forced-colors: active) {
  body.app-landing .ed-leaf__paper, body.app-landing .ed-reread__records article { border: 1px solid CanvasText; }
  body.app-landing .ed-leaf__edge, body.app-landing .ed-bookmark { background: Highlight; forced-color-adjust: none; }
  body.app-landing .ed-note-switch button[aria-pressed='true'], body.app-landing .ed-shelf__active { border: 1px solid ButtonText; }
  body.app-landing .ed-reread__arrow { color: CanvasText; }
  body.app-landing .brand__wordmark { background: CanvasText; }
  body.app-landing .ap-progress { border: 1px solid CanvasText; }
  body.app-landing .ap-progress > span { forced-color-adjust: none; background: Highlight; }
  body.app-landing .ap-tour__tabs button[aria-selected='true'],
  body.app-landing .ap-chip--active,
  body.app-landing .ap-calendar td.is-read > span:first-child { outline: 2px solid Highlight; outline-offset: -3px; }
  body.app-landing :is(.ap-cover, .ap-library, .ap-memo, .ap-component) { border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-landing *, body.app-landing *::before, body.app-landing *::after { animation: none !important; transition: none !important; }
}
@media print {
  body.app-landing .ed-leaf { transform: none; }
  body.app-landing .ed-leaf__paper { box-shadow: none; }
  body.app-landing .ed-note-switch { display: none; }
  body.app-landing .ap-tour__tabs { display: none; }
  body.app-landing .ap-tour__panel[hidden] { display: grid !important; }
  body.app-landing [data-app-preview].is-enhanced .ap-tour__panel + .ap-tour__panel { margin-top: 28px; }
}