/*
  The look of the Lost Writer sales page, following Lost Island Press: a dark navy page of dot-grid paper, one blue accent,
  notepad pieces (ruled cards, a spiral-bound price pad, taped notes) in place of glows,
  Grenze for headings, buttons and links, EB Garamond for reading text, Grenze Gotisch for the L of the wordmark and the line from the press.
*/

:root {
  --base: #14181c;
  --base-2: #20252b;
  --base-3: #2e3747;
  --base-4: #1c2024;
  --text: #e8eaed;
  --text-2: #c6d0dc;
  --text-3: #9aa4b2;
  --accent: #5686ce;
  --accent-hi: #7ba4e3;
  --accent-deep: #405b93;
  --line: rgba(198, 208, 220, 0.12);
  --line-strong: rgba(198, 208, 220, 0.22);
  --dot: rgba(198, 208, 220, 0.1);
  --rule: rgba(198, 208, 220, 0.075);

  --display: Grenze, Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
  --gotisch: "Grenze Gotisch", Grenze, Georgia, serif;

  --wrap: 1140px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(96px, 13vw, 176px);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* dot-grid paper: a quiet dot every 22px */
  background: radial-gradient(circle at 1px 1px, var(--dot) 1.1px, transparent 1.6px) 0 0 / 22px 22px, var(--base);
  color: var(--text-2);
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-hi); font-family: var(--display); font-weight: 500; text-decoration: none; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-deep); color: #fff; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; color: var(--text); line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 7.4vw, 92px); letter-spacing: -0.012em; line-height: 1.02; }
h1 em { font-style: italic; color: var(--accent-hi); }
h2 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.006em; }
h3 { font-size: clamp(24px, 2.4vw, 30px); }
h4 { font-size: 22px; }
p { margin: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 18px; }
.sub { font-size: clamp(20px, 1.9vw, 23px); max-width: 44em; margin-top: 18px; text-wrap: pretty; }
.note { font-style: italic; color: var(--text-3); margin-top: 18px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1;
  color: #fff; background: var(--accent);
  padding: 16px 26px 15px; border-radius: 10px; border: 1px solid transparent;
  box-shadow: 0 3px 0 var(--accent-deep);
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.btn:hover { background: #6795dc; color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { background: rgba(198, 208, 220, 0.07); border-color: var(--text-3); color: var(--text); }
.btn-small { font-size: 17px; padding: 11px 18px 10px; border-radius: 8px; box-shadow: none; }
.btn-wide { width: 100%; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 50; background: var(--base); border-bottom: 1px dashed transparent; transition: border-color 0.2s; }
.top.stuck { border-bottom-color: var(--line-strong); }
.top-in { display: flex; align-items: center; gap: 28px; height: 68px; }
/* The logo (brand/lost-writer-logo-secondary.svg): two pictures used as stencils, the name in the text colour
   and the compass that is its O in the accent blue */
.mark { display: inline-flex; align-items: center; }
.logo { position: relative; display: block; width: 186px; height: 34px; flex: none; }
.logo i { position: absolute; inset: 0; background: var(--text); -webkit-mask: url(img/lost-writer-secondary-words.png) center / contain no-repeat; mask: url(img/lost-writer-secondary-words.png) center / contain no-repeat; }
.logo i.logo-mark { background: var(--accent); -webkit-mask-image: url(img/lost-writer-secondary-mark.png); mask-image: url(img/lost-writer-secondary-mark.png); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { color: var(--text-2); font-size: 18px; }
.nav a:hover { color: var(--text); }

/* Headline */
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 0; text-align: center; overflow: hidden; }
.hero .wrap { position: relative; }
.lede { font-size: clamp(21px, 2.1vw, 25px); max-width: 33em; margin: 26px auto 0; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.fine { font-family: var(--display); font-size: 17px; color: var(--text-3); margin-top: 18px; letter-spacing: 0.01em; }

/* A picture of the app, framed as a window */
.window {
  margin: 0; background: var(--base-2); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 8px 8px 0 -1px var(--base-4), 8px 8px 0 0 var(--line-strong), 0 24px 40px -28px rgba(0, 0, 0, 0.9);
}
.window-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--base-2); border-bottom: 1px solid var(--line); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--base-3); }
.window-bar span { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--display); font-size: 14px; color: var(--text-3); pointer-events: none; }
.window img { width: 100%; }
.window figcaption { font-size: 16px; font-style: italic; color: var(--text-3); padding: 10px 16px 11px; border-top: 1px solid var(--line); text-align: center; }
.hero-shot { margin-top: clamp(44px, 6vw, 72px); }

/* The light/dark slider on a laptop (img/laptop.png, from the Free Laptop Mockup): the laptop is drawn over the
   screenshots, with its screen cut out, so the bezel and notch frame them. The screen's place is measured from the
   picture (a hair larger, so no gap shows at its rounded edges) */
.laptop-shot { margin-left: auto; margin-right: auto; max-width: 1080px; }
.laptop { position: relative; }
.laptop-frame { position: relative; z-index: 2; display: block; width: 100%; pointer-events: none; filter: drop-shadow(0 28px 26px rgba(0, 0, 0, 0.32)); }
.laptop-screen { position: absolute; z-index: 1; left: 7.1%; top: 1.75%; width: 85.9%; height: 75.8%; overflow: hidden; background: #000; }
.laptop-screen .compare { position: absolute; inset: 0; }
/* (the whole screenshot shows: the screen is a little taller than it, so a strip stays at the top, under the notch,
   in the colour of the app's own top edge, like a Mac's menu bar: dark under the dark screenshot, light under the light) */
.laptop-screen .compare img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.laptop-screen .compare { background: #14171c; }
.laptop-screen .compare-top { background: #f7f8fa; }
.laptop-shot figcaption { font-size: 16px; font-style: italic; color: var(--text-3); padding-top: 14px; text-align: center; }

/* Light/dark slider */
.compare { position: relative; --cut: 0%; }
.compare-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.compare-top img { width: 100%; height: 100%; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.compare-handle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 13px; letter-spacing: 2px; white-space: nowrap;
  box-shadow: 0 0 0 3px var(--base);
}
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(.compare-range:focus-visible) .compare-handle span { outline: 2px solid #fff; outline-offset: 3px; }

/* The pointer that shows where to click (the guided look, the slider, the tour's tabs) */
.ghost { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; z-index: 5; pointer-events: none; opacity: 0; transition: left 0.9s cubic-bezier(0.5, 0, 0.2, 1), top 0.9s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.35s; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55)); }
.ghost.show { opacity: 1; }
.ghost svg { display: block; width: 100%; margin: -2px 0 0 -4px; }
.ghost-ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--accent-hi); background: rgba(123, 164, 227, 0.25); opacity: 0; }
.ghost.click .ghost-ring { animation: ghost-click 0.5s ease-out; }
@keyframes ghost-click { from { opacity: 0.95; transform: scale(0.25); } to { opacity: 0; transform: scale(1.5); } }
.compare .ghost { left: var(--cut); top: 56%; transition: opacity 0.35s; }
.tabs { position: relative; }

/* A guided look */
.demo { padding: var(--section) 0 0; }
.demo-window { margin-top: 44px; }
.demo-stage { position: relative; aspect-ratio: 2400 / 1500; overflow: hidden; background: var(--base); }
/* the new picture fades in over the one before it, which stays solid underneath */
.demo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.demo-stage img.was { opacity: 1; }
.demo-stage img.on { opacity: 1; z-index: 1; transition: opacity 0.45s; }
.window .demo-bar { display: flex; align-items: center; gap: 14px; text-align: left; font-style: normal; font-size: 19px; color: var(--text-2); padding: 14px 18px; min-height: 4.2em; }
.demo-play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--base-3); color: var(--text); font-size: 12px; cursor: pointer; }
.demo-play:hover { background: var(--accent-deep); }
.demo-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.demo-steps button { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1; color: var(--text-2); background: var(--base-2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px 8px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.demo-steps button:hover { color: var(--text); border-color: var(--line-strong); }
.demo-steps button[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.demo-video { margin-top: 26px; font-style: italic; color: var(--text-3); }
.demo-video-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--line-strong); font-style: normal; font-size: 10px; color: var(--accent-hi); vertical-align: 2px; }

/* Three promises */
.promises { padding: clamp(56px, 7vw, 88px) 0 0; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.promise { padding: 6px 32px; border-left: 1px solid var(--line); }
.promise:first-child { border-left: 0; padding-left: 0; }
.promise h3 { margin-bottom: 10px; }

/* Sections */
.tour, .connect, .switch, .yours, .price, .faq, .familiar, .desk { padding: var(--section) 0 0; }

/* Sound familiar?: each complaint on an index card like the Story section's Limiting Belief and Theme (.st-note): the
   heading over a blue line, and what it means written on the rules under it */
.fam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 24px; margin-top: 48px; }
.fam {
  /* (the rules are as far apart, for the size of the writing, as on those cards: 28px for 15px there, 37px for 20px
     here; and the first line is taller, --lead more, so the writing doesn't crowd the heading's blue line) */
  --row: 37px; --lead: 12px;
  display: flex; flex-direction: column; border-radius: 4px; background: var(--base-2);
  box-shadow: 5px 6px 0 -1px var(--base-4), 5px 6px 0 0 var(--line-strong), 0 0 0 1px var(--line);
}
.fam h3 { margin: 0; padding: 20px 20px 16px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); font-size: 22px; line-height: 1.2; }
.fam p {
  flex: 1; margin: 0; box-sizing: border-box; padding: var(--lead) 20px 14px; min-height: calc(var(--row) * 2 + var(--lead) + 14px);
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), var(--rule) calc(var(--row) - 1px) var(--row)) content-box repeat-x;
  background-clip: border-box;
  font-size: 20px; line-height: var(--row); color: var(--text-2);
}
.fam:nth-child(3n + 2) { transition-delay: 0.08s; }
.fam:nth-child(3n) { transition-delay: 0.16s; }
@media (max-width: 980px) { .fam-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .fam-grid { grid-template-columns: minmax(0, 1fr); } }
/* The answer, under the cards: Mel's picture, round, and a speech bubble pointing back at her that opens with the
   line that answers them ("That's why we built Lost Writer.") and goes on to how it began */
/* (it fills the page's width from the left edge, less --hang on the right: how far the snapshot hangs off the bubble) */
.mel-says { --hang: 84px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: start; margin: 56px var(--hang) 0 0; }
.mel-face { width: 172px; height: 172px; border-radius: 50%; object-fit: cover; object-position: center 28%; border: 2px solid var(--line-strong); box-shadow: 5px 6px 0 -1px var(--base-4), 5px 6px 0 0 var(--line); }
.mel-bubble { position: relative; margin: 0; padding: 26px 32px 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--base-2); font-size: 21px; line-height: 1.55; color: var(--text-2); }
.mel-bubble::before { content: ""; position: absolute; left: -10px; top: 76px; width: 18px; height: 18px; background: var(--base-2); border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg); }
.mel-bubble p + p { margin-top: 14px; }
.mel-bubble .mel-why { margin-top: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(27px, 3vw, 36px); line-height: 1.2; color: var(--text); }
.mel-story { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; align-items: end; margin-top: 16px; }
.mel-bubble footer { margin-top: 18px; font-family: var(--display); font-size: 17px; line-height: 1.4; letter-spacing: 0.02em; color: var(--text-3); text-wrap: balance; }
.mel-bubble footer::before { content: "— "; }
/* (the two of them at work: a snapshot with a white border, taped on a little crooked, hanging off the bubble's
   bottom right corner) */
.mel-photo { position: relative; margin: 0 calc(-32px - var(--hang)) -64px 0; padding: 8px 8px 0; background: #e8eaed; border-radius: 2px; box-shadow: 5px 6px 0 -1px var(--base-4), 5px 6px 0 0 var(--line), 0 18px 30px -18px rgba(0, 0, 0, 0.8); transform: rotate(3deg); }
.mel-photo::before { content: ""; position: absolute; top: -11px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: rgba(198, 208, 220, 0.34); border-left: 1px dashed rgba(198, 208, 220, 0.5); border-right: 1px dashed rgba(198, 208, 220, 0.5); transform: rotate(-4deg); }
.mel-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mel-photo figcaption { padding: 6px 0 8px; font-family: var(--display); font-size: 14.5px; line-height: 1.35; text-align: center; color: #2e3747; }
@media (max-width: 1180px) { .mel-says { --hang: 0px; } .mel-face { width: 132px; height: 132px; } .mel-bubble::before { top: 56px; } .mel-photo { margin-right: -14px; } }
@media (max-width: 640px) {
  .mel-says { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start; }
  .mel-face { width: 104px; height: 104px; }
  .mel-bubble { padding: 22px 22px 20px; font-size: 19px; }
  .mel-bubble::before { left: 42px; top: -10px; transform: rotate(135deg); }
}
@media (max-width: 860px) { .mel-story { grid-template-columns: minmax(0, 1fr); } .mel-photo { width: min(260px, 100%); margin: 10px -14px -52px auto; } }
/* Where it runs: desktop only, centred like the video */
.desk { text-align: center; }
.desk .sub { margin-inline: auto; }

/* Tour */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 40px 0 0; padding: 6px; background: var(--base-2); border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; }
.tabs button {
  font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1;
  color: var(--text-2); background: transparent; border: 0; border-radius: 8px;
  padding: 12px 18px 11px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.tabs button:hover { color: var(--text); background: rgba(198, 208, 220, 0.07); }
.tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.panel { display: grid; gap: 36px; margin-top: 40px; }
.panel[hidden] { display: none; }
.panel-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 72px); align-items: start; }
.panel-text h3, .panel-text p { grid-column: 1; }
.panel-text p { margin-top: 14px; }
.panel-text ul { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.panel-text ul li:first-child { border-top: 0; }
.panel-text ul, .checks { list-style: none; padding: 0; }
.checks { margin: 22px 0 0; }
.panel-text li, .checks li { position: relative; padding: 9px 0 9px 30px; border-top: 1px solid var(--line); }
.panel-text li::before, .checks li::before {
  content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 12px;
  background: var(--accent);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.checks b { color: var(--text); font-weight: 600; }

/* Everything connects */
.q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.q { background: var(--base-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; }
.q-ask { font-family: var(--display); font-weight: 500; font-size: 25px; line-height: 1.2; color: var(--text); margin-bottom: 12px; }

/* From Scrivener */
.table-scroll { overflow-x: auto; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--base-4); }
.vs { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 19px; }
.vs th, .vs td { padding: 14px 20px; text-align: left; border-top: 1px solid var(--line); }
.vs thead th { border-top: 0; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--text); }
.vs tbody th { font-weight: 400; color: var(--text); width: 46%; }
.vs td { color: var(--text-3); }
.vs .us { background: rgba(86, 134, 206, 0.13); color: var(--text); font-family: var(--display); font-weight: 500; }
.vs thead .us { color: var(--accent-hi); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--text); font-family: var(--display); font-size: 20px; font-weight: 500; }
.step h4 { margin: 8px 0 6px; }

/* Your books */
.yours-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

/* From the press */
.press { margin-top: var(--section); background: var(--base-2); border-block: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0; text-align: center; }
.gotisch { font-family: var(--gotisch); font-weight: 500; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; color: var(--text); }
.press-copy { max-width: 32em; margin: 20px auto 18px; font-size: 22px; }
.price-credit { margin-top: 16px; font-size: 16px; font-style: italic; color: var(--text-3); text-align: center; }
.press-quote { max-width: 34em; margin: 0 auto 22px; font-size: 20px; font-style: italic; color: var(--text-2); }
.press-quote em { font-style: normal; }
.press-quote footer { margin-top: 12px; font-family: var(--display); font-style: normal; font-size: 16px; letter-spacing: 0.04em; color: var(--text-3); }

/* Price */
.price { text-align: center; }
.price-card {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  max-width: 880px; margin: 44px auto 0; padding: clamp(28px, 4vw, 48px); text-align: left;
  background: var(--base-2);
  border: 1px solid var(--line-strong); border-radius: 6px 6px 16px 16px;
  box-shadow: 8px 8px 0 -1px var(--base-4), 8px 8px 0 0 var(--line-strong);
}
.price-main { text-align: center; display: grid; gap: 12px; }
.price-num { font-family: var(--display); font-weight: 500; font-size: clamp(88px, 11vw, 128px); line-height: 0.9; color: var(--text); }
.price-num span { font-size: 0.42em; vertical-align: 0.9em; color: var(--text-3); margin-right: 4px; }
.price-once { font-family: var(--display); font-size: 19px; color: var(--text-3); margin-bottom: 10px; }
.price-list { margin: 0; }
.price-list li:first-child { border-top: 0; }
.price-try { font-family: var(--display); font-size: 17px; color: var(--text-3); margin-top: 8px; }
.price-os { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-os .btn { padding-inline: 10px; font-size: 17px; }
.soon { font-style: italic; font-size: 17px; color: var(--accent-hi); }

/* Questions */
.faq-in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-list { border-bottom: 1px solid var(--line); }
details { border-top: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0 18px; font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--text); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-size: 28px; line-height: 1; color: var(--accent-hi); transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--accent-hi); }
details p { padding: 0 44px 22px 0; max-width: 40em; }

/* Last word */
.last { padding: var(--section) 0; text-align: center; position: relative; }
.last .wrap { position: relative; }
.last-mark { display: block; width: 84px; margin: 0 auto 28px; color: var(--accent); }
.last-mark svg { display: block; width: 100%; }
.last h2 { max-width: 16em; margin: 0 auto; font-style: italic; }

/* Footer */
.foot { border-top: 1px solid var(--line); font-size: 17px; color: var(--text-3); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; padding-top: 26px; padding-bottom: 28px; }
.foot-left, .foot-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--text); }

/* ---- Paper: the notepad pieces ---- */
/* headline: the italic word is underlined by hand */
h1 em { text-decoration: underline wavy color-mix(in srgb, var(--accent) 70%, transparent); text-decoration-thickness: 0.045em; text-underline-offset: 0.16em; }
/* small labels sit on a strip of tape */
.eyebrow { display: inline-block; padding: 5px 12px 4px; background: rgba(86, 134, 206, 0.16); border-left: 2px dashed rgba(123, 164, 227, 0.5); border-right: 2px dashed rgba(123, 164, 227, 0.5); transform: rotate(-1deg); }
.hero .eyebrow { transform: rotate(-1.2deg); }
/* the three promises: torn from the same pad, a perforated line between */
.promise { border-left: 1px dashed var(--line-strong); }
/* the questions: ruled index cards, a margin line down the left, pinned a little crooked */
.q {
  position: relative; border-radius: 4px; padding: 31px 24px 26px 40px;
  /* the rules are one line of text apart (31px), set so each line of writing sits on its rule, a little above it */
  background:
    linear-gradient(90deg, transparent 27px, rgba(86, 134, 206, 0.45) 27px, rgba(86, 134, 206, 0.45) 28px, transparent 28px),
    repeating-linear-gradient(180deg, transparent 0 30px, var(--rule) 30px 31px) 0 1px,
    var(--base-2);
  box-shadow: 5px 6px 0 -1px var(--base-4), 5px 6px 0 0 var(--line);
}
.q .q-ask { line-height: 31px; margin-bottom: 0; }
.q p { line-height: 31px; }
.q::before { content: ""; position: absolute; top: -9px; left: 50%; width: 74px; height: 20px; margin-left: -37px; background: rgba(198, 208, 220, 0.14); border-left: 1px dashed rgba(198, 208, 220, 0.3); border-right: 1px dashed rgba(198, 208, 220, 0.3); transform: rotate(-2deg); }
.q:nth-child(3n + 1) { transform: rotate(-0.7deg); }
.q:nth-child(3n + 2) { transform: rotate(0.5deg); }
.q:nth-child(3n) { transform: rotate(-0.3deg); }
.q:nth-child(even)::before { transform: rotate(2.5deg); }
.can-reveal .q.reveal { transform: translateY(18px); }
.can-reveal .q.reveal.in:nth-child(3n + 1) { transform: rotate(-0.7deg); }
.can-reveal .q.reveal.in:nth-child(3n + 2) { transform: rotate(0.5deg); }
.can-reveal .q.reveal.in:nth-child(3n) { transform: rotate(-0.3deg); }
/* the comparison: a ruled sheet */
.table-scroll { border-radius: 4px; box-shadow: 6px 6px 0 -1px var(--base-4), 6px 6px 0 0 var(--line); }
.vs th, .vs td { border-top: 1px solid var(--rule); }
/* the three steps: numbers circled in pen */
.step-num { background: transparent; border: 2px solid var(--accent); color: var(--accent-hi); border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; transform: rotate(-4deg); }
/* tabs and pills: paper tabs with a dashed edge */
.tabs { border-style: dashed; border-color: var(--line-strong); border-radius: 8px; }
.demo-steps button { border-style: dashed; border-color: var(--line-strong); }
/* from the press: a page torn out, perforated top and bottom */
.press { border-block: 2px dashed var(--line-strong); background: repeating-linear-gradient(180deg, transparent 0 34px, var(--rule) 34px 35px), var(--base-2); }
/* the price: a spiral-bound pad (the holes along the top, ruled lines down the page) */
.price-card {
  position: relative; padding-top: calc(clamp(28px, 4vw, 48px) + 22px);
  background: repeating-linear-gradient(180deg, transparent 0 33px, var(--rule) 33px 34px), var(--base-2);
}
.price-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; border-bottom: 1px dashed var(--line-strong); border-radius: 6px 6px 0 0;
  background: radial-gradient(circle at 50% 50%, var(--base) 0 6px, var(--line-strong) 6px 7px, transparent 7.5px) 0 0 / 34px 34px space no-repeat, var(--base-3);
}
/* questions: ruled between, like a list on a pad */
details { border-top: 1px dashed var(--line-strong); }
.faq-list { border-bottom: 1px dashed var(--line-strong); }
.foot { border-top: 1px dashed var(--line-strong); }

/* the L of "Lost" in the headline, as in the wordmark */
.goth-l { font-family: var(--gotisch); font-size: 1.08em; }

/* The makers: two snapshots taped to the page, each with a few lines beside it */
.makers { padding: var(--section) 0 0; }
.maker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: 48px; }
.maker { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 26px; align-items: start; }
.maker-photo { position: relative; margin: 0; padding: 8px 8px 30px; background: #e8eaed; border-radius: 2px; box-shadow: 5px 6px 0 -1px var(--base-4), 5px 6px 0 0 var(--line); transform: rotate(-2deg); }
.maker:nth-child(even) .maker-photo { transform: rotate(1.6deg); }
.maker-photo::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(198, 208, 220, 0.2); border-left: 1px dashed rgba(198, 208, 220, 0.35); border-right: 1px dashed rgba(198, 208, 220, 0.35); transform: rotate(3deg); }
.maker-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.maker-initials span { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--base-3); color: var(--text-2); font-family: var(--display); font-size: 44px; font-weight: 500; }
.maker-initials img { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); object-position: 68% 50%; }
.maker h3 { margin-top: 4px; }
.maker-role { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-hi); margin: 6px 0 12px; }
.maker a { display: inline-block; margin-top: 12px; }
@media (max-width: 980px) { .maker-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .maker { grid-template-columns: minmax(0, 1fr); } .maker-photo { width: 172px; } }

/* Terms, Privacy and Refunds pages: one narrow column of reading text */
.legal { padding: clamp(48px, 7vw, 88px) 0 var(--section); }
.legal-in { max-width: calc(760px + var(--gutter) * 2); }
.legal h1 { font-size: clamp(40px, 5.6vw, 64px); }
.legal h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 44px 0 12px; }
.legal p + p, .legal ul + p { margin-top: 14px; }
.legal ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal li { margin-top: 6px; }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--text); font-weight: 600; }
.legal-date { font-family: var(--display); font-size: 17px; color: var(--text-3); margin-top: 14px; }
.legal-draft { margin-top: 18px; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: 10px; font-family: var(--display); font-size: 18px; color: var(--text); }
.legal mark { background: rgba(86, 134, 206, 0.22); color: var(--text); padding: 0 4px; border-radius: 4px; }

/* Fade in on scroll (only once script.js has said it can) */
.can-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.can-reveal .reveal.in { opacity: 1; transform: none; }
.promise:nth-child(2), .q:nth-child(3n + 2), .step:nth-child(2) { transition-delay: 0.08s; }
.promise:nth-child(3), .q:nth-child(3n), .step:nth-child(3) { transition-delay: 0.16s; }

/* Narrower windows */
@media (max-width: 980px) {
  .nav { display: none; }
  .top-in .btn { margin-left: auto; }
  .yours-grid, .faq-in { grid-template-columns: minmax(0, 1fr); }
  .q-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 720px) {
  .window .demo-bar { font-size: 17px; }
  .ghost { width: 18px; height: 18px; }
  body { font-size: 19px; }
  .promise-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .promise { border-left: 0; padding: 0; }
  .q-grid, .price-card, .panel-text { grid-template-columns: minmax(0, 1fr); }
  .panel-text ul { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .panel-text ul li:first-child { border-top: 1px solid var(--line); }
  /* A whole window is too small to read at this width: show it larger and let it slide sideways. */
  .panel .window, .yours .window { overflow-x: auto; }
  .panel .window img, .yours .window img { width: 680px; max-width: none; }
  .panel .window .window-bar, .yours .window .window-bar { position: sticky; left: 0; }
  /* Three columns fit; the word processor column goes. */
  .vs { min-width: 0; font-size: 17px; }
  .vs th, .vs td { padding: 12px 12px; }
  .vs thead th { font-size: 17px; }
  .vs tbody th { width: 50%; }
  .vs tr > :last-child { display: none; }
  .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; font-size: 18px; padding: 11px 14px 10px; }
  .cta .btn { width: 100%; }
  .compare-handle span { width: 38px; height: 38px; font-size: 11px; }
  .window-bar { height: 26px; }
  .window-bar i { width: 8px; height: 8px; }
  .window-bar span { display: none; }
  summary { font-size: 21px; }
  details p { padding-right: 0; }
  .foot-in { flex-direction: column; text-align: center; }
  .foot-left, .foot-right { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost { display: none; }
  html { scroll-behavior: auto; }
  .can-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .btn, summary::after { transition: none; }
}

/* ---- Ruled paper: the writing sits on the lines ----
   Wherever a section is ruled, everything in it is set on one grid: --row is the gap between two rules, every line of
   text is one row tall (a big heading, two or more), and every space between things is a whole number of rows. The
   rules are then slid by --rule-at so the text's baseline rests a little above its line. Keep to whole rows when
   changing anything in here, or the text walks off the lines further down. */
.press, .price-card { --row: 34px; --rule-at: -2px; }
.press {
  --pad: calc(var(--row) * 2);
  padding: var(--pad) 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), var(--rule) calc(var(--row) - 1px) var(--row)) 0 var(--rule-at, 0px), var(--base-2);
}
/* (a smaller heading sits higher in its two rows: it's let down again by the difference) */
.press .gotisch { position: relative; top: calc((72px - clamp(40px, 6vw, 72px)) * 0.36); line-height: calc(var(--row) * 2); height: calc(var(--row) * 2); white-space: nowrap; }
.press .press-copy { margin: var(--row) auto; line-height: var(--row); }
.press .press-quote { margin: 0 auto var(--row); }
.press .press-quote p, .press .press-quote footer, .press-in > a { line-height: var(--row); }
.press .press-quote footer { margin-top: 0; }
.press-in > a { display: block; }

.price-card {
  --pad: calc(clamp(28px, 4vw, 48px) + 22px);
  align-items: start; row-gap: var(--row);
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), var(--rule) calc(var(--row) - 1px) var(--row)) 0 calc(var(--pad) + var(--rule-at, 0px)), var(--base-2);
}
.price-main { gap: 0; }
/* (the price is set by eye too: its figures hang below their baseline, like a y, so it's the feet of the 7 and the 9
   that are put on the rule; the size changes with the window, and the sum keeps them there as it does) */
.price-num { --fs: clamp(88px, 11vw, 128px); position: relative; top: calc(40.9px - var(--fs) * 0.625); line-height: calc(var(--row) * 3); height: calc(var(--row) * 3); }
.price-once, .price-try, .price-credit, .price-card .soon { margin: 0; line-height: var(--row); }
/* the smaller lettering sits a touch high in its row */
.price-try, .price-credit, .press .press-quote footer { position: relative; top: 1px; }
/* a button takes two rows, with a little air above and below it */
/* (an outlined button is papered over, so no rule runs through its words) */
.price-card .btn-ghost { background: var(--base-2); }
.price-card .btn { box-sizing: border-box; height: calc(var(--row) * 2 - 16px); margin: 8px 0; padding-block: 0; }
.price-list { margin-top: calc(var(--row) * 2); }
.price-list li { padding-block: 0; border-top: 0; line-height: var(--row); }
.price-list li::before { top: calc(var(--row) / 2 - 6px); }
@media (max-width: 900px) {
  .press .gotisch { white-space: normal; height: auto; }
  .price-list { margin-top: 0; }
}

/* read aloud, not shown (the words behind a ✓ or a ✕) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the comparison's marks */
.vs .mk { font-family: var(--display); font-weight: 700; margin-right: 0.35em; }
.vs .mk-y { color: var(--accent-hi); }
.vs .mk-n { color: var(--text-3); opacity: 0.6; }
/* the press: its logo, and Mel's words on a card laid over the ruled page (all in whole rows, so what follows stays on its lines) */
.press-logo { display: block; width: auto; height: calc(var(--row) * 2); margin: 0 auto var(--row); opacity: 0.9; }
.press .press-quote {
  position: relative; max-width: 36em; margin: 0 auto var(--row); padding: var(--row) clamp(22px, 4vw, 48px);
  background: var(--base-3); border-radius: 4px; text-align: left;
  box-shadow: 0 0 0 1px var(--line-strong), 6px 6px 0 -1px var(--base-4), 6px 6px 0 0 var(--line);
}
.press .press-quote::before { content: "“"; position: absolute; left: clamp(8px, 2vw, 18px); top: -6px; font-family: var(--gotisch); font-style: normal; font-size: 84px; line-height: 1; color: var(--accent-hi); opacity: 0.55; }
.press .press-quote p + p { text-indent: 1.4em; }
.press .press-quote footer { margin-top: var(--row); text-align: right; }
/* the guarantee, under the Buy button */
.price-guarantee { margin: 0; line-height: var(--row); font-family: var(--display); font-size: 17px; color: var(--accent-hi); position: relative; top: 1px; }
.last .fine { margin-top: 18px; }

/* The display face sits low in its line, so lettering on buttons, tabs, and labels looked dropped: each gives a little
   of its top padding to its bottom, which puts the letters in the middle. */
.btn { padding-top: 14px; padding-bottom: 17px; }
.btn-small { padding-top: 9px; padding-bottom: 12px; }
.tabs button { padding-top: 10px; padding-bottom: 13px; }
.demo-steps button { padding-top: 7px; padding-bottom: 10px; }
.eyebrow { padding-top: 3px; padding-bottom: 6px; }
.price-card .btn { padding-top: 0; padding-bottom: 4px; }
@media (max-width: 600px) { .tabs button { padding-top: 9px; padding-bottom: 12px; } }

/* The guided look plays by itself; the names under it show which page it's on (they aren't buttons). */
.demo-steps span { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1; color: var(--text-3); background: var(--base-2); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 7px 15px 10px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.demo-steps span[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Story, Dates, and Goals: a section with a heading and a graphic of the app under it */
.dates { padding: var(--section) 0 0; }
.demo-steps[hidden] { display: none; }

/* the three things it does, under the headline and again above the tour */
.pillars { margin-top: 22px; font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.6vw, 19px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hi); }
.pillars span { margin: 0 0.5em; opacity: 0.6; }
.pillar-grid { margin-top: 36px; }
.pillar-grid .promise b { color: var(--text); font-weight: 600; }
@media (max-width: 600px) { .pillars span { display: block; height: 0; overflow: hidden; margin: 0; } .pillars { line-height: 1.7; } }

/* The tour video: a window-sized frame under the headline, empty until Mel's video is in it */
.video { padding: var(--section) 0 0; text-align: center; }
.video .sub { margin-inline: auto; }
.video-frame { max-width: 980px; margin: 44px auto 0; }
.video-soon { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--base-4); font-style: italic; color: var(--text-3); }
.video-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-play { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 2px dashed var(--line-strong); }
.video-play::after { content: ""; width: 26px; height: 30px; margin-left: 7px; background: var(--accent-hi); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Reviews of the template: the index cards, each signed at the bottom */
.reviews { padding: var(--section) 0 0; }
.review { margin: 0; }
.review footer { margin-top: 31px; line-height: 31px; font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; color: var(--text-3); }
.review footer::before { content: "— "; }
.reviews-more { margin-top: 36px; }
.price-try a, .sub a { font-family: inherit; }

/* Ambience: the app's own Ambience block, working, on its own (no window round it). It wears the app's dark theme
   and type, sized as in the app (src/styles.css, .mu-amb), on a darker card so it sits on the page. */
.ambience { padding: var(--section) 0 0; }
.amb-app, .story-app, .dates-app, .goals-app {
  --bg: #14181c; --card: #191d22; --bg-hover: rgba(198, 208, 220, 0.07); --bg-hover-strong: rgba(198, 208, 220, 0.12);
  --text: #e8eaed; --text-2: #c6d0dc; --text-3: #9aa4b2; --border: rgba(198, 208, 220, 0.11);
  --accent: #5686ce; --accent-soft: #22324a;
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.5; text-align: left;
}
.amb-app .mu-amb {
  display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card);
  box-shadow: 8px 8px 0 -1px var(--base-4), 8px 8px 0 0 var(--line-strong), 0 24px 40px -28px rgba(0, 0, 0, 0.9);
}
.amb-app .mu-amb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.amb-app h3.h3 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text); }
.amb-app .mu-amb-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px 10px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-hover); }
.amb-app .mu-amb-go { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 0 0 0 2px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.amb-app .mu-amb-go:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.amb-app .mu-amb-go:disabled { background: var(--bg-hover-strong); color: var(--text-3); box-shadow: none; cursor: default; }
.amb-app .mu-amb-go svg { display: block; }
.amb-app .amb-pause, .amb-app .live .amb-play { display: none; }
.amb-app .live .amb-pause { display: block; }
.amb-app .mu-amb-bar.live .mu-amb-go { padding: 0; }
.amb-app .mu-amb-now { flex: 1 1 120px; display: grid; min-width: 0; line-height: 1.35; }
.amb-app .mu-amb-now b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.amb-app .mu-amb-now span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-3); }
.amb-app .mu-amb-all { flex: 0 1 190px; display: flex; align-items: center; gap: 8px; min-width: 150px; color: var(--text-3); }
.amb-app .mu-amb-all input { flex: 1; min-width: 0; }
.amb-app .mu-amb-all small { width: 3.2em; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.amb-app .mu-amb-list { display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(36px, 1fr); margin-top: 4px; }
.amb-app .mu-amb-row { display: flex; align-items: center; gap: 10px; }
.amb-app .mu-amb-btn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 132px; box-sizing: border-box; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; text-align: left; white-space: nowrap; }
.amb-app .mu-amb-btn svg { flex: none; }
.amb-app .mu-amb-btn:hover { background: var(--bg-hover); color: var(--text); }
.amb-app .mu-amb-row.on .mu-amb-btn { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); color: var(--accent); }
.amb-app .mu-amb-row input[type="range"] { flex: 1; min-width: 0; }
.amb-app .mu-amb-row:not(.on) input[type="range"] { opacity: .45; }
.amb-app input[type="range"] { accent-color: var(--accent); height: 4px; margin: 0; cursor: pointer; }
.amb-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
/* "Try it", with an arrow down to the play button (drawn like the arrows on the screenshots), and a ring that swells
   from the play button until the block is first used */
.amb-stage { position: relative; padding-top: 64px; }
.amb-try { position: absolute; top: 0; left: 4px; right: 0; font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.25; color: var(--text); }
.amb-arrow { position: absolute; left: -30px; top: 0; width: 130px; height: 170px; overflow: visible; pointer-events: none; }
.amb-arrow path { fill: none; stroke: var(--accent-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.amb-app .mu-amb-go { position: relative; }
.amb-app .mu-amb-go.nudge::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: amb-nudge 1.8s ease-out infinite; pointer-events: none; }
@keyframes amb-nudge { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .amb-app .mu-amb-go.nudge::after { animation: none; opacity: 0; } }

/* Story: the app's Story page drawn in code, in the app's look (the same card as Ambience). A Limiting Belief → Theme
   pair, as in src/styles.css .plot-arc (the plotline's blue), then Act 1's beats (.plot-beat, in Act 1's red). */
.story-app { --act: #df5452; --border-strong: rgba(198, 208, 220, 0.19); margin-top: 56px; }
.st-card {
  padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card);
  box-shadow: 8px 8px 0 -1px var(--base-4), 8px 8px 0 0 var(--line-strong), 0 24px 40px -28px rgba(0, 0, 0, 0.9);
}
/* whose story it is: the plotline's heading, as in the app (.plot-head), with the character's round initial (in the
   colour the app gives "Clara") and the story's logline under it */
.st-head { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 30px; }
.st-avatar { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #6e5846; color: #fff; font-size: 19px; font-weight: 600; }
.story-app .st-head h3 { margin: 2px 0 4px; font-family: inherit; font-size: 23px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--text); }
.st-head p { margin: 0; max-width: 60em; font-size: 15px; line-height: 1.55; color: var(--text-2); }
/* Limiting Belief → Theme: the app's ruled index cards (src/styles.css, .plot-arc-field): a second card behind, the
   plotline's blue under the heading, and the writing on the rules, in the app's sans serif. They sit on the page, above the card. */
.st-arc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; margin: 0 6px 44px 0; }
.st-arrow { align-self: center; color: var(--accent); }
.st-note {
  --row: 28px; --rule: color-mix(in srgb, var(--text) 8%, transparent);
  display: flex; flex-direction: column; padding: 0 18px 12px; border-radius: 4px; background: #20252b;
  box-shadow: 5px 6px 0 -1px var(--base-4), 5px 6px 0 0 var(--line-strong), 0 0 0 1px var(--border);
}
.st-label { margin: 0 -18px; padding: 11px 18px 9px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.st-prompt { margin: 10px 0 0; font-size: 14.5px; font-weight: 500; color: var(--text); }
.st-input {
  flex: 1; margin: 8px -18px 0; min-height: calc(var(--row) * 2); padding: 0 18px;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), var(--rule) calc(var(--row) - 1px) var(--row));
  font-size: 15px; line-height: var(--row); color: var(--text);
}
.st-act { display: flex; align-items: baseline; gap: 10px; padding: 6px 0 6px 12px; border-left: 3px solid var(--act); }
.story-app .st-act h3 { margin: 0; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; color: var(--act); }
.st-act span { font-size: 12px; font-weight: 600; color: var(--act); opacity: .8; }
.st-beats { list-style: none; margin: 0; padding: 12px 0 0 26px; }
.st-beat { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.st-beat:last-child { padding-bottom: 0; }
.st-beat::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--border-strong); }
.st-beat:last-child::before { display: none; }
.st-dot { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--act); background: var(--card); color: var(--act); font-size: 12.5px; font-weight: 700; line-height: 1; }
.st-body { flex: 1; min-width: 0; padding-top: 3px; }
.story-app .st-body h4 { margin: 0; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text); }
.st-guide { margin: 3px 0 0; font-size: 13px; line-height: 1.5; font-style: italic; color: var(--text-2); }
.st-plan { margin: 12px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--bg-hover); font-size: 14.5px; line-height: 1.55; color: var(--text); }
@media (max-width: 640px) {
  .st-arc { grid-template-columns: minmax(0, 1fr); }
  .st-arrow { transform: rotate(90deg); justify-self: center; }
}
/* under each beat, the scenes that deliver it (as in the app's .beat-scenes), and the button to link more */
.st-scenes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.st-scene { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 7px 2px 8px; border-radius: 10px; background: var(--bg-hover-strong); font-size: 12.5px; color: var(--text); }
.st-scene svg { flex-shrink: 0; color: var(--text-3); }
.st-where { color: var(--text-3); }
.st-link { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 13px; color: var(--text-2); }
.st-link svg { color: var(--text-3); }
.st-more { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--text-3); }
/* Story's heading: a glowing red heart drawn round the word "heart". Scrolled to, it gives one bigger beat, then three
   soft ones (twice, then a rest, like a heartbeat), and rests, so it's still by the time you read. The word stays still. */
.heart { position: relative; display: inline-block; isolation: isolate; }
.heart-shape {
  position: absolute; left: 50%; top: 47%; z-index: -1; width: 2.6em; height: 1.85em; pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 4px rgba(239, 106, 102, 0.75)) drop-shadow(0 0 14px rgba(223, 84, 82, 0.45)); /* it glows on the dark page */
}
/* (the glow is on this box, not the drawing: Safari cuts a glow on a drawing off at the drawing's edges) */
.heart-shape svg { display: block; width: 100%; height: 100%; overflow: visible; fill: rgba(223, 84, 82, 0.1); stroke: #ef6a66; stroke-width: 2px; stroke-linejoin: round; opacity: .43; }
.heart.in .heart-shape { animation: heart-arrive 1.1s ease-out, heartbeat 3s ease-in-out 1.1s 3; }
@keyframes heart-arrive {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-50%, -50%) scale(1.16); filter: drop-shadow(0 0 6px rgba(239, 106, 102, 0.9)) drop-shadow(0 0 26px rgba(223, 84, 82, 0.7)); }
  50% { transform: translate(-50%, -50%) scale(0.97); }
  70% { transform: translate(-50%, -50%) scale(1.07); filter: drop-shadow(0 0 5px rgba(239, 106, 102, 0.8)) drop-shadow(0 0 18px rgba(223, 84, 82, 0.55)); }
}
@keyframes heartbeat {
  0%, 40%, 100% { transform: translate(-50%, -50%); }
  10% { transform: translate(-50%, -50%) scale(1.06); filter: drop-shadow(0 0 5px rgba(239, 106, 102, 0.85)) drop-shadow(0 0 20px rgba(223, 84, 82, 0.6)); }
  20% { transform: translate(-50%, -50%); }
  30% { transform: translate(-50%, -50%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .heart.in .heart-shape { animation: none; } }
.heart-shape svg path { vector-effect: non-scaling-stroke; }
/* a beat that's written: its circle filled in the act's colour with a tick, and the line down from it tinted (as in
   the app); one not written yet shows the app's grey invitation to write it */
.st-beat.written .st-dot { background: var(--act); color: #fff; }
.st-beat.written::before { background: color-mix(in srgb, var(--act) 45%, transparent); }
.st-plan.empty { min-height: 60px; color: var(--text-3); }
.st-beats + .st-act { margin-top: 22px; } /* the next act, a little apart (as in the app) */
/* the structure it uses, picked from the app's choices (as on the app's Story page, .struct-chip), and making your own */
.st-structs { margin: 0 0 34px; }
.st-setup-label { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.st-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.st-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: #20252b; color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.4; }
.st-chip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.st-chip > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.st-meta { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.st-chip.create { border-style: dashed; background: none; color: var(--text-2); }
/* Dates: the Manuscript's story order drawn in code (src/styles.css .ol-day, .ol-scene, .ol-gap, .ol-where): a heading
   for each day, the time between days, and where each scene is read, in purple when it's told out of order */
.dates-app { margin-top: 56px; }
.dt-card {
  padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card);
  box-shadow: 8px 8px 0 -1px var(--base-4), 8px 8px 0 0 var(--line-strong), 0 24px 40px -28px rgba(0, 0, 0, 0.9);
}
.dt-day + .dt-gap { margin-top: 22px; }
.dates-app .dt-day h3 { margin: 0 0 10px; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--text); }
.dt-day ol { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.dt-scene { padding: 11px 14px 12px; border: 1px solid var(--border); border-radius: 10px; background: #20252b; }
.dt-head { display: flex; align-items: center; gap: 8px; }
.dt-where { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 6px; background: var(--bg-hover-strong); color: var(--text-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-where.back { background: #2a2430; color: #9d68d3; }
.dt-title { font-size: 15px; font-weight: 600; color: var(--text); }
.dt-syn { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.dt-gap { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12.5px; font-style: italic; color: var(--text-3); }
.dt-gap::before, .dt-gap::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Goals: the book's Home drawn in code: three word targets side by side (src/styles.css .mu-goals), then the
   progress graph (.pg): a bar a day for the book's words, and the dashed line that finishes on time */
.goals-app { display: grid; gap: 32px; margin-top: 56px; }
.gl-tiles, .gl-graph {
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card);
  box-shadow: 8px 8px 0 -1px var(--base-4), 8px 8px 0 0 var(--line-strong), 0 24px 40px -28px rgba(0, 0, 0, 0.9);
}
.gl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gl-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px 16px; }
.gl-tile + .gl-tile { border-left: 1px solid var(--border); }
.gl-label { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.gl-num { height: 36px; line-height: 36px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.gl-num b { font-family: var(--body); font-size: 34px; font-weight: 600; color: var(--text); font-variant-numeric: lining-nums; }
.gl-meter { display: block; height: 5px; border-radius: 3px; background: var(--border-strong, rgba(198, 208, 220, 0.19)); overflow: hidden; }
.gl-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
/* scrolled to, the bars fill from empty and the graph's bars rise from the floor, left to right (as in the app, when
   Home is opened); script.js gives each graph bar its turn */
.gl-meter > span { transition: width .9s cubic-bezier(.22, .8, .3, 1) .25s; }
.can-reveal .goals-app:not(.in) .gl-meter > span { width: 0 !important; }
.gl-bar { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.22, .8, .3, 1); }
.gl-line { transition: opacity .5s ease .9s; }
.can-reveal .goals-app:not(.in) .gl-bar { transform: scaleY(0); }
.can-reveal .goals-app:not(.in) .gl-line { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gl-meter > span, .gl-bar, .gl-line { transition: none; } }
.gl-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; min-height: 32px; font-size: 13px; color: var(--text-2); }
.gl-auto { color: var(--text-3); }
.gl-field { padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums; }
.gl-note { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12.5px; color: var(--text-3); }
.gl-note svg { color: #c77d48; }
.gl-graph { padding: 16px 20px 14px; }
.gl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.goals-app .gl-head h3 { margin: 0; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .09em; line-height: 1; text-transform: uppercase; color: var(--text-3); }
.gl-seg { display: inline-flex; margin-left: auto; padding: 2px; border-radius: 8px; background: var(--bg-hover); font-size: 12.5px; color: var(--text-3); }
.gl-seg span { padding: 3px 10px; border-radius: 6px; }
.gl-seg .on { background: var(--bg-hover-strong); color: var(--text); }
.gl-chart { display: flex; gap: 8px; margin: 10px 0 34px; }
.gl-y { position: relative; width: 30px; flex-shrink: 0; }
.gl-y span, .gl-x span { position: absolute; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-y span { right: 0; transform: translateY(-50%); }
.gl-area { position: relative; flex: 1; min-width: 0; }
.gl-plot { display: block; width: 100%; height: 152px; overflow: visible; }
.gl-x span { top: calc(100% + 7px); transform: translateX(-50%); }
.gl-x span:first-child { transform: none; } /* (the first and last dates stay inside the graph) */
.gl-x span:last-child { transform: translateX(-100%); }
.gl-grid, .gl-line { vector-effect: non-scaling-stroke; }
.gl-grid { stroke: var(--border); stroke-width: 1; }
.gl-bar { fill: color-mix(in srgb, var(--accent) 62%, transparent); }
.gl-bar.today { fill: var(--accent); }
.gl-line { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round; }
.gl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 8px; font-size: 12.5px; color: var(--text-3); }
.gl-key, .gl-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.gl-key span { display: inline-flex; align-items: center; gap: 7px; }
.gl-swatch { width: 10px; height: 10px; border-radius: 3px 3px 0 0; background: var(--accent); }
.gl-dash { width: 18px; border-top: 1.5px dashed var(--text-2); }
.gl-stats { font-size: 13px; color: var(--text-2); }
.gl-stats b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.gl-stats .ahead b { color: #529e72; }
@media (max-width: 760px) {
  .gl-tile + .gl-tile { border-left: 0; border-top: 1px solid var(--border); }
  .gl-graph { padding: 18px 18px 16px; }
  .gl-head { flex-wrap: wrap; row-gap: 10px; margin-bottom: 18px; }
  .gl-foot { gap: 10px 24px; }
}
.gl-name { font-size: 14px; font-weight: 600; line-height: 1; color: var(--text); } /* the goal's name, as typed on Home */
.gl-note b { font-weight: 600; color: var(--text); }
/* "keep going" in another language every few seconds, as on the app's Home while there's a streak */
.gl-cheer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .4s ease; }
.gl-cheer.out { opacity: 0; }
.gl-cheer [lang] { font-family: "Baybayin", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
@media (prefers-reduced-motion: reduce) { .gl-cheer { transition: none; } }