/* The front page on the web, from design/landing. Scoped to .landing because
   every stylesheet loads on every page. Colours come from the design system,
   except the placeholder gradients that stand in for photos. */
html:has(.landing) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.landing) { scroll-behavior: auto; } }

.landing { --wrap: 1120px; --ease: cubic-bezier(.16, 1, .3, 1); font-size: calc(16rem / 17); line-height: 1.55; padding-inline: 20px; }
/* Base resets inside :where(), so they never outrank a design system component
   (a plain .landing a would turn .af-btn-primary's text to ink) */
:where(.landing) *, :where(.landing) *::before, :where(.landing) *::after { box-sizing: border-box; }
:where(.landing) :is(h1, h2, h3, p) { margin: 0; }
:where(.landing) :is(h1, h2, h3) { font-family: var(--font-serif); font-weight: 400; text-wrap: balance; letter-spacing: -.01em; }
:where(.landing) p { text-wrap: pretty; }
:where(.landing) a { color: inherit; }
:where(.landing) a.af-btn { text-decoration: none; }
:where(.landing) :focus-visible { outline: 2px solid var(--ballpoint); outline-offset: 3px; border-radius: 6px; }
.landing-wrap { max-width: var(--wrap); margin: 0 auto; }
.landing .muted { color: var(--pencil); }
.landing .hand { font-family: var(--font-hand); color: var(--ballpoint); line-height: 1; }
.landing .stamp { font-family: var(--font-mono); font-size: calc(12rem / 17); letter-spacing: .08em; text-transform: uppercase; }
.landing .fine { font-size: calc(13.5rem / 17); color: var(--pencil); }

/* Header */
.landing-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--page); margin-inline: -20px; padding: 14px 20px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.landing-top.scrolled { border-bottom-color: var(--line); }
.landing-top .landing-wrap { display: flex; align-items: center; gap: 24px; }
.landing-logo { display: inline-flex; line-height: 1; }
.landing-logo img { height: 30px; width: auto; display: block; }
.landing-nav { display: flex; gap: 22px; margin-left: auto; font-size: calc(15rem / 17); }
.landing-nav a { position: relative; display: inline-flex; align-items: center; min-height: 38px; text-decoration: none; color: var(--pencil); }
/* Taps land on an invisible 44px box around each link (the design system's touch targets) */
.landing-nav a::before { content: ""; position: absolute; inset: min(0px, (100% - 44px) / 2); }
.landing-nav a:hover { color: var(--ink); }
.landing-top .landing-sign-in { display: inline-flex; align-items: center; min-height: 38px; font-size: calc(15rem / 17); }
.landing .skip-link { position: absolute; left: 20px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); font-weight: 600; text-decoration: none; }
.landing .skip-link:focus { top: 12px; }
@media (max-width: 760px) {
  .landing-nav { display: none; }
  .landing-top .landing-sign-in { margin-left: auto; }
  .landing-top .landing-wrap { gap: 16px; }
}

/* Hero */
.landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-block: 56px 72px; }
.landing-hero h1 { font-size: clamp(44px, 6.2vw, 80px); line-height: .98; }
.landing .lede { margin-top: 22px; font-size: calc(19rem / 17); line-height: 1.5; color: var(--pencil); max-width: 34ch; }
.landing .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.landing .cta-row .af-btn { min-height: 54px; padding: 0 26px; font-size: calc(17rem / 17); }
@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; padding-block: 32px 48px; gap: 36px; }
  .landing .lede { max-width: none; }
}

/* The eight prints: one moment, every angle */
.landing .table { position: relative; aspect-ratio: .94; width: 100%; max-width: 600px; justify-self: center; margin-bottom: 120px; }
.landing .print { position: absolute; width: 31%; background: #FFFFFF; padding: 6px 6px 27px; border-radius: 3px; box-shadow: var(--shadow-print); transform: rotate(var(--r)) translate(0, 0); }
.landing .print .ph { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1px; background: var(--tray); }
.landing .print-wide .ph { aspect-ratio: 300 / 167; }
.landing .print .who { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: space-between; gap: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: #35525D; }
/* A print still developing: the hatch and the count, never the photo */
.landing .print .ph.af-dev { display: grid; place-content: center; text-align: center; gap: 2px; aspect-ratio: 1; border-radius: 1px; border: 1px dashed var(--line-strong); background: repeating-linear-gradient(-45deg, var(--tray) 0 6px, var(--tray-stripe) 6px 12px); }
.landing .print .ph.af-dev b { font-size: clamp(20px, 3vw, 30px); }
@media (prefers-reduced-motion: no-preference) {
  .landing .print { animation: landing-settle .9s var(--ease) both; animation-delay: var(--d); }
  @keyframes landing-settle { from { transform: rotate(calc(var(--r) * -1.6)) translate(var(--fx), var(--fy)); } }
}
/* Under the boat print it is about */
.landing .table .note { position: absolute; left: 26%; top: 104%; font-size: calc(30rem / 17); transform: rotate(-3deg); max-width: 60%; }
.landing .table .sticker { position: absolute; z-index: 4; width: clamp(44px, 12%, 74px); height: auto; left: 57%; top: 67%; transform: rotate(12deg); pointer-events: none; }
.landing .table .caption { position: absolute; left: 0; top: -4px; }
.landing .ph { display: block; }

/* Sections */
.landing .block { padding-block: 88px; border-top: 1px solid var(--line); }
/* Section labels: the design system's label, scaled up for a page read from further away, with a ballpoint rule in front */
.landing .kicker { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-mono); font-size: calc(14rem / 17); line-height: calc(20rem / 17); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ballpoint); }
.landing .kicker::before { content: ""; flex: none; width: 28px; height: 2px; margin-top: 9px; border-radius: 1px; background: currentColor; }
.landing .block h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.04; margin-top: 18px; max-width: 20ch; }
.landing .block .intro { margin-top: 18px; font-size: calc(18rem / 17); color: var(--pencil); max-width: 56ch; }
@media (max-width: 700px) { .landing .block { padding-block: 60px; } }

/* The group chat */
.landing .problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .landing .problem { grid-template-columns: 1fr; gap: 32px; } }
.landing .chat { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: grid; gap: 10px; max-width: 420px; justify-self: center; width: 100%; }
.landing .chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 600; }
.landing .chat-avatar { width: 32px; height: 32px; border-radius: 50%; display: block; }
.landing .dump { display: grid; gap: 6px; }
.landing .dump .from { font-size: calc(12rem / 17); font-weight: 600; color: var(--pencil); }
.landing .dump .strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
/* Chat thumbnails: washed out like a compressed forward */
.landing .dump .strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 3px; background: var(--tray); filter: saturate(.55) brightness(.92); }
.landing .dump .more { font-size: calc(12rem / 17); color: var(--pencil); text-align: right; }
.landing .chat .lost { font-family: var(--font-hand); color: var(--ballpoint); font-size: calc(26rem / 17); line-height: 1.05; text-align: center; padding-top: 4px; }

/* How it works: one weekend on a line, Friday to the reveal */
/* Room for its two sentences on two lines */
.landing #how h2 { max-width: 26ch; }
.landing .timeline { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; position: relative; }
.landing .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-strong); }
.landing .moment { position: relative; display: grid; gap: 14px; align-content: start; padding-top: 30px; }
.landing .moment::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--page); border: 2px solid var(--ballpoint); }
.landing .moment:last-child::before { background: var(--highlighter); border-color: var(--highlighter); }
.landing .when { font-family: var(--font-mono); font-size: calc(12rem / 17); letter-spacing: .1em; text-transform: uppercase; color: var(--ballpoint); }
.landing .moment-art { min-height: 200px; display: grid; align-items: center; justify-items: start; }
.landing .moment h3 { font-size: calc(26rem / 17); }
.landing .moment p { color: var(--pencil); max-width: 36ch; }
@media (max-width: 900px) {
  .landing .timeline { grid-template-columns: 1fr; gap: 36px; padding-left: 28px; }
  .landing .timeline::before { left: 5px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .landing .moment { padding-top: 0; }
  .landing .moment::before { left: -28px; top: 2px; }
  .landing .moment-art { min-height: 0; }
}
.landing .art-live { display: grid; grid-template-columns: repeat(3, 60px); gap: 6px; }
.landing .art-live .af-dev { width: 60px; }
.landing .art-live .af-dev b { font-size: calc(21rem / 17); }
.landing .add-sheet { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; width: 100%; max-width: 320px; padding: 14px; border-radius: var(--radius-story); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.landing .add-sheet img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-print); }
.landing .add-sheet-text { display: grid; gap: 4px; justify-items: start; }
.landing .add-sheet-text b { font-size: calc(15rem / 17); line-height: 1.25; }
.landing .add-sheet-text span:not(.af-btn) { font-size: calc(13rem / 17); color: var(--pencil); }
.landing .add-sheet-text .mock-action { margin-top: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--tray); color: var(--ballpoint); font-size: calc(13rem / 17); font-weight: 600; }
.landing .notif { width: 100%; max-width: 290px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 12px; border-radius: 18px; background: var(--page); border: 1px solid var(--line); }
.landing .notif .ico { width: 36px; height: 36px; border-radius: 9px; }
.landing .notif-body { display: grid; gap: 2px; }
.landing .notif-head { display: flex; justify-content: space-between; }
.landing .notif b { font-size: calc(14rem / 17); }
.landing .notif span { font-size: calc(13.5rem / 17); line-height: 1.35; color: var(--ink); }
.landing .notif small { color: var(--pencil); font-size: calc(12rem / 17); }

/* The reveal: the story as the app shows it once revealed, notes beside it */
/* The reveal: the page's peak, full width, the card centred and large */
.landing .reveal { display: grid; gap: 40px; justify-items: center; }
.landing .reveal-head { justify-self: stretch; }
.landing .reveal-notes { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; justify-self: stretch; }
@media (max-width: 760px) { .landing .reveal-notes { grid-template-columns: 1fr; gap: 22px; } }
.landing .reveal-notes div { display: grid; gap: 4px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.landing .reveal-notes dt { font-family: var(--font-serif); font-size: calc(21rem / 17); line-height: 1.2; }
.landing .reveal-notes dd { margin: 0; color: var(--pencil); max-width: 52ch; }
.landing .story { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-story); box-shadow: var(--shadow-card); padding: 28px; display: grid; gap: 10px; max-width: 760px; width: 100%; justify-self: center; }
.landing .story-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.landing .story-name { font-family: var(--font-serif); font-size: clamp(28px, 3.2vw, 36px); line-height: 1.1; }
.landing .story-meta { color: var(--pencil); font-size: calc(14rem / 17); }
.landing .story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px) { .landing .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.landing .story-photo { margin: 0; display: grid; gap: 6px; align-content: start; }
.landing .story-moment { margin-top: 8px; font-family: var(--font-mono); font-size: calc(11rem / 17); letter-spacing: .08em; text-transform: uppercase; color: var(--ballpoint); text-wrap: balance; transition: opacity .6s var(--ease); }
/* The tile, the photo, its stamp and the sticker share one cell, on explicit layers:
   the developing tile's shimmer (a filter) would otherwise paint over the photo */
.landing .story-frame { position: relative; display: grid; }
.landing .story-frame > * { grid-area: 1 / 1; }
.landing .story-frame .af-dev { border-radius: var(--radius-print); }
.landing .story-frame img:not(.story-sticker) { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-print); transition: opacity .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i) * .25s); }
.landing .story-stamp { position: relative; z-index: 2; align-self: end; display: flex; justify-content: space-between; padding: 28px 8px 6px; font-family: var(--font-mono); font-size: calc(11rem / 17); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); background: linear-gradient(transparent, var(--photo-scrim) 45%), linear-gradient(transparent 40%, var(--photo-scrim)); border-radius: 0 0 var(--radius-print) var(--radius-print); transition: opacity .6s var(--ease); transition-delay: calc(var(--i) * .25s + .4s); }
.landing .story-sticker { position: relative; z-index: 3; width: 46px; height: 46px; justify-self: end; align-self: start; margin: -14px -12px 0 0; transform: rotate(10deg); pointer-events: none; transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: 1.4s; }
.landing .story-note { font-size: calc(26rem / 17); transform: rotate(-2deg); margin-top: 2px; transition: opacity .6s var(--ease) 1.6s; }
/* Developing: who and when show, the photos wait (set by the reveal controller, so no script means revealed) */
.landing .story.developing .story-frame img:not(.story-sticker) { opacity: 0; filter: blur(10px); }
.landing .story.developing .story-stamp { opacity: 0; }
.landing .story.developing .story-sticker { opacity: 0; transform: rotate(10deg) scale(.6); }
.landing .story.developing .story-note { opacity: 0; }
.landing .story.developing .story-moment { opacity: 0; }
.landing .story.developing .story-by { opacity: 0; }
.landing .story.developing .af-swash { background-size: 0% 100%; }
.landing .story-by { color: var(--pencil); font-size: calc(14rem / 17); transition: opacity .6s var(--ease) 1.2s; }
.landing .story .af-dev b { font-size: calc(22rem / 17); font-variant-numeric: tabular-nums; }

/* For family */
.landing .family { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .landing .family { grid-template-columns: 1fr; gap: 36px; } }
.landing .family h2 .n { color: var(--ballpoint); }
.landing .ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.landing .ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.landing .ticks li::before { content: "✓"; color: var(--ballpoint); font-weight: 700; }
/* The bezel: space grey by day, silver at night, so the device always stands apart from the page */
.landing .ipad { --bezel: #0B2530; border: 12px solid var(--bezel); box-shadow: 0 0 0 1px var(--line); border-radius: 26px; background: var(--page); padding: 18px; display: grid; gap: 14px; max-width: 520px; width: 100%; justify-self: center; }
.landing .ipad .hello { display: flex; justify-content: space-between; align-items: baseline; }
.landing .ipad .hello-name { font-family: var(--font-serif); font-weight: 400; font-size: calc(28rem / 17); line-height: 1.1; }
.landing .ipad .hello .muted { font-size: calc(14rem / 17); }
.landing .ipad-caption { color: var(--pencil); font-size: calc(14rem / 17); margin-top: -6px; }
.landing .ipad .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.landing .ipad .grid img { display: block; width: 100%; height: auto; aspect-ratio: 240 / 179; border-radius: 6px; }
.landing .ipad .grid img.wide { grid-column: 1 / -1; aspect-ratio: 480 / 268; }
.landing .ipad .stks { display: flex; gap: 8px; }
.landing .ipad .stk { flex: 0 1 112px; display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: calc(12.5rem / 17); color: var(--pencil); }
.landing .ipad .stk img { width: 38px; height: 38px; }
.landing .ipad .af-voice { padding-top: 12px; border-top: 1px solid var(--line); }
.landing .ipad .stk.sent { border-color: var(--ballpoint); background: var(--tray); color: var(--ballpoint); font-weight: 600; }

/* Fair questions */
.landing .questions { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .landing .questions { grid-template-columns: 1fr; gap: 32px; } }
/* Pinned beside the answers on wide screens only: on a phone it would slide over them */
@media (min-width: 901px) { .landing .questions-head { position: sticky; top: 96px; } }
.landing .questions .promise { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: calc(17rem / 17); max-width: 40ch; }
.landing .faq { display: grid; border-top: 1px solid var(--line); }
.landing .faq details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.landing .faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 44px; padding-block: 10px; justify-content: space-between; gap: 16px; font-family: var(--font-serif); font-size: calc(22rem / 17); line-height: 1.25; }
.landing .faq summary::-webkit-details-marker { display: none; }
.landing .faq summary::after { content: "+"; flex: none; width: 1ch; text-align: center; font-family: var(--font-sans); color: var(--ballpoint); font-size: calc(24rem / 17); line-height: 1; }
.landing .faq details[open] summary::after { content: "\2212"; }
.landing .faq p { margin: 0 0 12px; color: var(--pencil); max-width: 62ch; }

/* Final call */
.landing .final { text-align: center; display: grid; justify-items: center; gap: 18px; padding-block: 96px 104px; }
@media (max-width: 700px) { .landing .final { padding-block: 56px 72px; } }
.landing .final h2 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.02; max-width: 16ch; margin: 0; }
.landing .final .sub { font-size: calc(18rem / 17); color: var(--pencil); max-width: 48ch; }
.landing .final .start-cta { min-height: 54px; padding: 0 30px; font-size: calc(17rem / 17); }
.landing .final .fine .af-link { font-size: inherit; }

.landing-footer { border-top: 1px solid var(--line); padding-block: 28px 40px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; font-size: calc(14rem / 17); color: var(--pencil); }
.landing-footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.landing-footer-links a { display: inline-flex; align-items: center; min-height: 38px; }
.landing-footer-links a:hover { color: var(--ink); }

/* Night: a silver iPad */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .landing .ipad { --bezel: var(--pencil); } }
:root[data-theme="dark"] .landing .ipad { --bezel: var(--pencil); }

/* The beta app for iPhone visitors, and fine print kept to a readable measure */
.landing .get-app-line { margin-top: 10px; }
/* Tall enough to tap without loosening the line */
.landing .get-app-line { line-height: 2.2; }
.landing .final .fine { max-width: 60ch; }
/* Night: prints are soft white paper, as the design system's Prints */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .landing .print { background: #F0F7F9; } }
:root[data-theme="dark"] .landing .print { background: #F0F7F9; }

/* The close: a small stack of prints from the weekend above the last line */
.landing .final-prints { width: 100%; max-width: 360px; justify-content: center; }
/* Square, like the photos, so nothing is cropped */
.landing .final-prints .af-print-img { aspect-ratio: 1; }