/* =========================================================
   The bold home (site2 proposal, 2026-10-27, second pass)
   Loaded by index.html only, after styles.css, so the shared stylesheet and every
   other page stay exactly as they were. Huge type with the tablet laid over it, full
   bleed color blocks, numbered moments, a moving strip of real pages, and one
   highlighted phrase per section that the app's highlighter draws on as it scrolls in
   (index.html's small data-draw script adds .is-drawn).
   Colors come from the tokens in styles.css. The display sizes are new and live here
   only: --fs-display for the hero lines and the price, and each moment's --lead, which
   sizes its number, its headline (about half) and Arc (2.35 times) together.
   ========================================================= */

:root {
  --fs-display: clamp(4.5rem, 10vw, 9rem);
  --hl-light: rgba(22, 143, 134, .24);
  --hl-dark: rgba(22, 143, 134, .7);
  --cta-on-dark: #B5C8AE;
  --cta-on-dark-hover: #DCE7D7;
}

/* The highlighter: a chisel nib pass under the lower half of the words. It is drawn on
   left to right when its section scrolls in, and simply there without JavaScript or
   when the system asks for less motion. */
mark.hl {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(var(--hl-light), var(--hl-light));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 46%;
  padding: 0 .08em;
  margin: 0 -.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .9s var(--ease) .35s;
}
.js [data-draw]:not(.is-drawn) mark.hl { background-size: 0% 46%; }
.bh mark.hl,
.bbook mark.hl { background-image: linear-gradient(var(--hl-dark), var(--hl-dark)); }

/* ---------- Hero: dark ground, three huge lines, the tablet laid over their ends ---------- */
.bh {
  position: relative;
  overflow: hidden;
  padding: 64px 0 112px;
  background: var(--dark);
  color: var(--paper);
}
.bh__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  grid-template-areas: "title stage" "copy stage";
  column-gap: 24px;
  row-gap: 44px;
  align-items: end;
}
.bh__title {
  grid-area: title;
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-display);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--paper);
}
.bh__kicker {
  display: block;
  margin-bottom: 30px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--label-on-dark);
}
.bh__line { display: block; }
.bh__line + .bh__line { padding-left: .55em; }
.bh__line + .bh__line + .bh__line { padding-left: 1.1em; }
.bh__copy { grid-area: copy; position: relative; z-index: 1; max-width: 520px; }
.bh__sub { max-width: 42ch; margin-bottom: 30px; color: rgba(250, 246, 238, .84); }
.bh .btn--primary { --bg: var(--cta-on-dark); --fg: #1F2A1D; }
.bh .btn--primary:hover { background: var(--cta-on-dark-hover); }
.bh__meta { margin-top: 16px; font-size: var(--fs-small); color: rgba(250, 246, 238, .66); }

/* The stage reaches back over the title column, so the tablet lies across the ends of
   the lines. A soft teal glow sits behind it. */
.bh__stage {
  grid-area: stage;
  position: relative;
  z-index: 2;
  align-self: center;
  margin-left: -88px;
  transform: translateX(-64px);
}
.bh__stage::before {
  content: "";
  position: absolute;
  inset: -12% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(22, 143, 134, .42), rgba(22, 143, 134, 0));
  pointer-events: none;
}

/* The tablet is drawn, not a picture of one: a raster bezel scaled up and turned went
   soft and stair stepped on a Surface screen. A painted body stays sharp at any size
   and any angle. A turned clip still has a ragged edge of its own, so a black display
   mask, like a real tablet's, is painted over it: the mask starts 2px inside the clip
   and runs 14px out over the bezel, and its inner edge is the only edge anyone sees. */
.device {
  position: relative;
  margin: 0;
  padding: 4.2%;
  border-radius: 8.4% / 5.8%;
  background: linear-gradient(155deg, #23272C 0%, #121518 28%, #0C0E11 66%, #171A1E 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 0 0 3px #0C0E11,
    inset 0 0 0 4px rgba(255, 255, 255, .05),
    0 50px 90px rgba(0, 0, 0, .55),
    0 14px 30px rgba(0, 0, 0, .35);
  transform: rotate(-4deg);
}
.device__display { position: relative; }
.device__screen {
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 2.2% / 1.5%;
  background: #0C0E11;
}
.device__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.device__mask {
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 2% / 1.35%;
  box-shadow: 0 0 0 14px #0D1013;
  pointer-events: none;
}
.device .fx-clip__toggle { z-index: 3; right: 8%; bottom: 5.5%; }

/* ---------- Pages made in Mementa: real pages drifting past, each a way into a guide ---------- */
.pages { padding: 36px 0 22px; background: var(--cream); overflow: hidden; }
.pages__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pages__title { margin: 0; font-size: var(--fs-h3); line-height: 1.1; color: var(--ink-title); }
/* The pause button matches the clips' own: a small dark round button with a white icon.
   It rests soft and comes up when the strip is pointed at, focused or paused. Touch has
   no hover, so it never hides completely. */
.pages__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(51, 33, 26, .62);
  color: #fff;
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s ease;
}
.pages__toggle svg { width: 15px; height: 15px; }
.pages:hover .pages__toggle,
.pages.is-paused .pages__toggle,
.pages__toggle:focus-visible { opacity: 1; }
.pages__toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pages__play,
.pages.is-paused .pages__pause { display: none; }
.pages.is-paused .pages__play { display: block; }
.pages__track { display: flex; width: max-content; animation: pages-run 60s linear infinite; }
.pages:hover .pages__track,
.pages:focus-within .pages__track,
.pages.is-paused .pages__track { animation-play-state: paused; }
.pages__list { display: flex; align-items: flex-start; gap: 24px; margin: 0; padding: 0 12px 16px; list-style: none; }
.pages__card { flex: none; width: 148px; }
/* Every other page sits lower, so the row reads like pages laid on a table. */
.pages__card:nth-child(even) { margin-top: 16px; }
.pages__card a { display: block; color: var(--link); text-decoration: none; }
.pages__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pages__card a:hover img,
.pages__card a:focus-visible img { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pages__card a:focus-visible { outline: none; }
.pages__card a:focus-visible .pages__name { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.pages__name {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--link);
}
.pages__name::after { content: " \2192"; }
.pages__card a:hover .pages__name { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
/* One footnote for every sticker shown on the page, at the foot of main. It uses the
   body's soft ink, not the faint one: faint reads 3.8:1 on paper, too light for small text. */
.site-footnote { padding-top: 8px; padding-bottom: 32px; font-size: var(--fs-small); color: var(--ink-soft); }
@keyframes pages-run { to { transform: translateX(-50%); } }

/* ---------- Numbered moments: a clip, a huge outlined number, one idea ---------- */
/* Apple scale: the clip stands nearly the height of the screen and owns its half, and
   the number, Arc and headline are sized together from one value, --lead, so the right
   half reads as big as the clip. The 17vh cap keeps the number, Arc and headline as
   tall as the clip beside them on a short laptop screen. */
.bm {
  --lead: min(12.5vw, 12rem, 17vh);
  --arc: 2.35;
  --media-w: min(calc(84vh * 2 / 3), 44vw, 660px);
  position: relative;
  padding: clamp(64px, 9vh, 120px) 0;
}
.bm--cream { background: var(--cream); }
.bm__inner {
  display: grid;
  grid-template-columns: var(--media-w) minmax(0, 1fr);
  gap: clamp(56px, 6vw, 112px);
  align-items: center;
  max-width: 1480px;
}
.bm--reverse .bm__inner { grid-template-columns: minmax(0, 1fr) var(--media-w); }
.bm--reverse .bm-media { order: 2; }
.bm-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.bm-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
/* Step numbers are teal's job: an outline, so the number is big without being loud. */
.bm__num {
  display: block;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: var(--lead, var(--fs-display));
  line-height: .8;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--teal);
  transition: transform .9s var(--ease), opacity .9s var(--ease);
}
.js .bm__num[data-draw]:not(.is-drawn) { opacity: 0; transform: translateX(-28px); }
/* 01 carries Arc itself beside its number, bottoms aligned, rising above it, sized from
   the number so the pair grows and shrinks together. It opens
   the way it does in the app: out from the pen tip, turning into place. */
.bm__lead { display: flex; align-items: flex-end; gap: calc(var(--lead) * .2); margin-bottom: 26px; }
.bm__lead .bm__num { margin-bottom: 0; }
.bm__arc {
  display: block;
  width: calc(var(--lead) * var(--arc));
  height: auto;
  transform-origin: 46% 62%;
  transition: transform .8s var(--ease) .25s, opacity .6s var(--ease) .25s;
}
.js .bm__arc[data-draw]:not(.is-drawn) { opacity: 0; transform: rotate(-28deg) scale(.6); }
/* The way into the Arc page sits in the open corner of Arc's C, where the user drew it.
   It is a link row like every other link to a page (a name, an arrow, one line under
   it), at heading size so it holds the corner. It is placed against Arc, so it grows
   and shrinks with it. */
.bm__arcwrap { position: relative; display: block; }
.bm__arclink {
  position: absolute;
  left: 57%;
  bottom: 3%;
  width: 64%;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  text-decoration: none;
}
.bm__arclink-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color .2s var(--ease);
}
.bm__arclink-name::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  transition: transform .2s var(--ease);
}
.bm__arclink-desc { display: block; margin-top: 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); }
.bm__arclink:hover .bm__arclink-name { color: var(--link-hover); }
.bm__arclink:hover .bm__arclink-name::after { transform: translateX(4px); }
.bm__arclink:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 4px; }
/* 02 carries the app's search box beside its number, the way 01 carries Arc. It is drawn
   in CSS from the app's own colors so it stays sharp at any size, it is sized from the
   number so the pair grows and shrinks together, and as it scrolls in it types the word
   the clip searches for, then shows the one page it found. */
.bm__search {
  display: flex;
  flex: 0 1 calc(var(--lead) * 3.3);
  align-items: center;
  gap: calc(var(--lead) * .08);
  min-width: 0;
  height: calc(var(--lead) * .5);
  padding: 0 calc(var(--lead) * .13) 0 calc(var(--lead) * .14);
  border: max(2px, calc(var(--lead) * .014)) solid var(--ink-title);
  border-radius: calc(var(--lead) * .13);
  background: #EAD5BB;
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  color: var(--ink-title);
  transition: transform .7s var(--ease) .2s, opacity .5s var(--ease) .2s;
}
.bm__search-icon { flex: none; width: calc(var(--lead) * .15); height: auto; fill: none; stroke: #7A6C5D; stroke-width: 2.4; stroke-linecap: round; }
.bm__search-q {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  margin-left: calc(var(--lead) * .03);
  font-size: calc(var(--lead) * .22);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
/* Each letter is typed by opening its width after a delay, so the caret follows the word. */
.bm__search-q > span:not(.bm__search-caret) { display: block; flex: none; max-width: 1em; overflow: hidden; transition: max-width 0s linear .8s; }
.bm__search-q > span:nth-child(2) { transition-delay: .92s; }
.bm__search-q > span:nth-child(3) { transition-delay: 1.04s; }
.bm__search-q > span:nth-child(4) { transition-delay: 1.16s; }
.bm__search-q > span:nth-child(5) { transition-delay: 1.28s; }
.bm__search-q > span:nth-child(6) { transition-delay: 1.4s; }
.bm__search-q > span:nth-child(7) { transition-delay: 1.52s; }
.bm__search-caret { flex: none; width: max(2px, .07em); height: 1.05em; margin-left: .06em; background: var(--teal); }
.bm__search.is-drawn .bm__search-caret { animation: search-caret 1s step-end 1.8s 3; }
.bm__search-count { flex: none; font-size: calc(var(--lead) * .12); color: var(--ink-soft); white-space: nowrap; transition: opacity .4s var(--ease) 1.8s; }
.bm__search-clear { flex: none; width: calc(var(--lead) * .1); height: auto; margin-left: calc(var(--lead) * .05); fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; transition: opacity .3s var(--ease) .8s; }
.js .bm__search[data-draw]:not(.is-drawn) { opacity: 0; transform: translateY(18px) scale(.94); }
.js .bm__search[data-draw]:not(.is-drawn) .bm__search-q > span:not(.bm__search-caret) { max-width: 0; }
.js .bm__search[data-draw]:not(.is-drawn) .bm__search-count,
.js .bm__search[data-draw]:not(.is-drawn) .bm__search-clear { opacity: 0; }
@keyframes search-caret { 50% { opacity: 0; } }
/* The headline grows with the number, about half its size. */
.bm__title {
  max-width: 18ch;
  margin: 22px 0 0;
  font-size: max(var(--fs-h1), calc(var(--lead) * .45));
  line-height: 1.02;
  text-wrap: balance;
}
.bm__text { max-width: 48ch; margin-top: 28px; color: var(--ink-soft); }
.bm .section__more { margin-top: 24px; }
.bm .credit-note { margin-top: 28px; }

/* ---------- 05, the book: the one full bleed dark moment, centered and wide ---------- */
.bbook {
  padding: 136px 0 128px;
  background: var(--dark);
  color: var(--paper);
  text-align: center;
}
.bbook__head { max-width: 900px; margin: 0 auto 64px; }
.bm__num--light { -webkit-text-stroke-color: var(--label-on-dark); }
.feature__tag--light { color: var(--label-on-dark); background: rgba(174, 234, 228, .12); }
.feature__tag--light::before { background: var(--label-on-dark); box-shadow: 0 0 0 4px rgba(174, 234, 228, .18); }
.bbook__title {
  margin-top: 22px;
  font-size: var(--fs-h1);
  line-height: 1.02;
  color: var(--paper);
  text-wrap: balance;
}
.bbook__media {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}
.bbook__media video { display: block; width: 100%; height: auto; aspect-ratio: 1424 / 1250; }
.bbook__foot { max-width: 600px; margin: 56px auto 0; }
.bbook__text { color: rgba(250, 246, 238, .84); }
.bbook .section__more { margin-top: 22px; color: var(--link-on-dark); }
.bbook .section__more:hover { color: var(--link-on-dark-hover); }

/* ---------- Yours to keep: three plain facts under heavy rules ---------- */
.bkeep { padding: 120px 0 128px; background: var(--paper-2); }
.bkeep__title { margin-bottom: 72px; font-size: var(--fs-h1); text-align: center; }
.bkeep__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.bkeep__list li { padding-top: 28px; border-top: 2px solid var(--ink-title); }
.bkeep__list strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink-title);
}
.bkeep__list span { display: block; margin-top: 14px; color: var(--ink-soft); }
.bkeep__list a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.bkeep__list a:hover { color: var(--link-hover); }

/* ---------- The price: the number at full size, what it buys right under it ---------- */
.bprice { padding: 128px 0 112px; }
.bprice__title { margin-top: 20px; font-size: var(--fs-h2); color: #FBF5E9; text-wrap: balance; }
.bprice__num {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-display);
  line-height: .9;
  letter-spacing: -.02em;
}
.bprice__lead { margin-top: 20px; }
.bprice__trial { margin-top: 18px; font-family: var(--font-display); color: #FBF5E9; }
.bprice .download__ctas { margin-top: 38px; }
.bprice .store-cta { margin-top: 0; }
/* Sending the link is a real action, so it stays a button, but a quiet one under the
   Store badge: the Store is the one thing on this band that should catch the eye. */
.bprice__phone {
  display: inline-block;
  min-height: 44px;
  margin-top: 18px;
  padding: 10px 8px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-p);
  font-weight: 600;
  color: var(--link-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bprice__phone:hover { color: var(--link-on-dark-hover); }
.bprice__phone:focus-visible { outline: 2px solid var(--link-on-dark); outline-offset: 2px; border-radius: 4px; }
.bprice__meta { margin-top: 30px; font-size: var(--fs-small); color: rgba(250, 246, 238, .6); }

#faq .faq__more { margin-top: 18px; }

/* ---------- Tablet held upright, and phones ---------- */
@media (max-width: 980px) {
  .bh { padding: 48px 0 80px; }
  .bh__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "copy" "stage";
    row-gap: 36px;
    max-width: 640px;
  }
  .bh__stage { width: min(76%, 400px); margin: 20px auto 0; transform: none; }

  /* Stacked, every moment fills its column: the clip, the headline and the words run
     the full width. The number takes its size from the width too, so with Arc beside
     it (the same 2.35 times the number as on a wide screen) the pair spans the column. */
  .bm { --lead: min(calc((min(100vw, 728px) - 48px) / 3.45), 9rem); padding: 88px 0; }
  .bm__inner,
  .bm--reverse .bm__inner { grid-template-columns: 1fr; gap: 0; max-width: 680px; }
  .bm__title,
  .bm__text { max-width: none; }
  .bm__arclink { padding-top: 8px; }
  .bm__arclink-name { font-size: var(--fs-p); font-family: var(--font-body); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .bm__arclink-desc { display: none; }
  /* Stacked, the number, name and headline come first, then the clip, then the words. */
  .bm__copy { display: contents; }
  .bm__copy > * { justify-self: start; }
  .bm__num,
  .bm__lead { order: -3; margin-bottom: 18px; }
  .bm__lead .bm__num { margin-bottom: 0; }
  .bm__copy > .feature__tag { order: -2; }
  .bm__title { order: -1; margin-bottom: 32px; }
  .bm-media,
  .bm--reverse .bm-media { order: 0; width: 100%; max-width: none; justify-self: stretch; }
  .bm__text { order: 1; margin-top: 30px; }
  .bm .section__more { order: 2; }
  .bm .credit-note { order: 3; }

  .bbook { padding: 96px 0 88px; }
  .bkeep__list { grid-template-columns: 1fr; gap: 36px; max-width: 560px; }
}

@media (max-width: 720px) {
  .bh { padding: 36px 0 64px; }
  .bh__kicker { margin-bottom: 22px; }
  .bh__stage { width: 84%; }
  .pages { padding: 28px 0 16px; }
  .pages__head { margin-bottom: 16px; }
  .pages__list { gap: 16px; }
  .pages__card { width: 124px; }
  .pages__name { margin-top: 8px; }
  .pages__card:nth-child(even) { margin-top: 12px; }
  .bm { padding: 64px 0; }
  .bbook { padding: 72px 0; }
  .bbook__head { margin-bottom: 40px; }
  .bbook__foot { margin-top: 36px; }
  .bkeep { padding: 80px 0 88px; }
  .bkeep__title { margin-bottom: 44px; }
  .bprice { padding: 88px 0 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .pages__track { animation: none; }
  .pages__viewport { overflow-x: auto; }
  .pages__list[aria-hidden="true"],
  .pages__toggle { display: none; }
  mark.hl,
  .bm__num,
  .bm__arc { transition: none; }
  .js .bm__arc[data-draw]:not(.is-drawn) { opacity: 1; transform: none; }
  .js [data-draw]:not(.is-drawn) mark.hl { background-size: 100% 46%; }
  .js .bm__num[data-draw]:not(.is-drawn) { opacity: 1; transform: none; }
  .bm__search,
  .bm__search-q > span:not(.bm__search-caret),
  .bm__search-count,
  .bm__search-clear { transition: none; }
  .bm__search.is-drawn .bm__search-caret { animation: none; }
  .js .bm__search[data-draw]:not(.is-drawn) { opacity: 1; transform: none; }
  .js .bm__search[data-draw]:not(.is-drawn) .bm__search-q > span:not(.bm__search-caret) { max-width: 1em; }
  .js .bm__search[data-draw]:not(.is-drawn) .bm__search-count,
  .js .bm__search[data-draw]:not(.is-drawn) .bm__search-clear { opacity: 1; }
}