/* AniMates website. The page is the scene's sky: the hero's colour carries on from the picture's own top edge, and
   the rest of the page sits in the deep indigo of the bench at night. One warm accent, the art's rim light (the app's
   --warm). The big type is the app's clock face: Segoe UI Variable Display at a light weight. Place names are set in
   an italic serif, like the captions in the app's Journal. No web fonts: every face is on Windows already, with
   system fallbacks elsewhere. */

:root {
  --night: #14173a;          /* the page */
  --dusk: #1d1f4a;           /* raised bands */
  --dusk-2: #272858;
  --ink: #f4effc;
  --muted: #c3bce0;
  --faint: #8f88b5;
  --line: rgba(255, 255, 255, .13);
  --peach: #ffb38a;          /* the app's warm accent */
  --peach-ink: #2a1530;
  --lamp: #ffd9a8;
  --paper: #fbf6ee;          /* legal pages, like the Journal's paper */
  --paper-ink: #2b2440;
  --paper-muted: #645c7c;
  --paper-line: #e6dccd;

  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --serif: Cambria, "Iowan Old Style", Georgia, serif;

  --gutter: clamp(16px, 4.5vw, 64px);
  --wide: 1240px;
  --read: 68ch;
  --radius: 14px;

  /* the hero's sky, by the visitor's part of the day (site.js sets data-tod); colours from tools/render-shots.js */
  --sky: #2f2c5a;
  --hero: url("/img/hero-golden.webp");
  color-scheme: dark;
}
:root[data-tod="dawn"] { --sky: #393664; --hero: url("/img/hero-dawn.webp"); }
:root[data-tod="day"] { --sky: #4a6aa6; /* a shade under the picture's #5a7bb9, for white text; the fade hides it */ --hero: url("/img/hero-day.webp"); }
:root[data-tod="night"] { --sky: #161a3c; --hero: url("/img/hero-night.webp"); }
@media (max-width: 700px) and (orientation: portrait) {
  :root { --sky: #101747; --hero: url("/img/hero-golden-tall.webp"); }
  :root[data-tod="dawn"] { --sky: #1c1e4e; --hero: url("/img/hero-dawn-tall.webp"); }
  :root[data-tod="day"] { --sky: #395a97; --hero: url("/img/hero-day-tall.webp"); }
  :root[data-tod="night"] { --sky: #0c0e29; --hero: url("/img/hero-night-tall.webp"); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--lamp); }
:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 300; font-family: var(--display); }
h1 { font-size: clamp(2.3rem, 4.3vw, 4.2rem); line-height: 1.04; letter-spacing: -.022em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.016em; }
h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.3; font-family: var(--text); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--peach); color: var(--peach-ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header and footer ---------- */
.site-head { position: relative; z-index: 2; }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 1.2rem/1 var(--display); text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); margin-left: auto; font-size: .98rem; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.nav .btn, .nav .btn[aria-current="page"] { color: var(--peach-ink); text-decoration: none; }
@media (max-width: 560px) { .nav .hide-small { display: none; } }

.site-foot { border-top: 1px solid var(--line); padding: 48px 0 56px; color: var(--muted); font-size: .95rem; }
.site-foot .wrap { display: grid; gap: 28px; grid-template-columns: 1.4fr repeat(2, 1fr); }
.site-foot nav { display: grid; gap: 8px; align-content: start; }
.site-foot nav a { text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot h2 { font: 600 .95rem/1.4 var(--text); color: var(--ink); margin-bottom: 4px; }
.site-foot .small { color: var(--faint); font-size: .88rem; margin-top: 10px; }
@media (max-width: 720px) { .site-foot .wrap { grid-template-columns: 1fr 1fr; } .site-foot .about { grid-column: 1 / -1; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; font: 600 1rem/1 var(--text); text-decoration: none; border: 1px solid transparent; cursor: pointer;
  background: var(--peach); color: var(--peach-ink); transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: #ffc7a6; color: var(--peach-ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.small { min-height: 40px; padding: 0 18px; font-size: .95rem; }
.btn.quiet { background: rgba(255, 255, 255, .08); color: var(--ink); border-color: rgba(255, 255, 255, .22); }
.btn.quiet:hover { background: rgba(255, 255, 255, .16); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-note { color: var(--muted); font-size: .92rem; }

/* ---------- hero: the wallpaper, with its sky carried up behind the words ---------- */
.hero { background: var(--sky); }
.hero .site-head { background: transparent; }
.hero .nav a:not(.btn) { color: rgba(255, 255, 255, .9); }
.hero-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding: clamp(12px, 3vw, 40px) 0 clamp(20px, 3vw, 36px); }
.hero h1 { max-width: 19ch; text-shadow: 0 1px 18px rgba(10, 8, 40, .28); }
.hero .lede { max-width: 54ch; color: #fff; margin-top: 18px; text-shadow: 0 1px 12px rgba(10, 8, 40, .3); }
.hero .btn-row { margin-top: 26px; }
.hero .btn-note { color: #fff; }
.hero-scene {
  position: relative; height: max(320px, min(50vw, 100svh - 330px));
  background: var(--hero) 72% 100% / cover no-repeat;
}
.hero-scene::before { content: ""; position: absolute; inset: -1px 0 auto; height: 34%; background: linear-gradient(var(--sky) 12%, transparent); }
@media (max-width: 700px) and (orientation: portrait) {
  .hero-scene { height: min(120vw, 70svh); background-position: 50% 100%; }
}

/* the clock, as the app's widget draws it: thin numerals, the date in small capitals' place, the place pill */
.clock { display: none; text-align: right; color: #fff; text-shadow: 0 2px 18px rgba(10, 8, 40, .35); }
.js .clock { display: block; }
.clock-time { font: 200 clamp(4rem, 8vw, 7.2rem)/.9 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.clock-time small { font-size: .26em; font-weight: 400; letter-spacing: .02em; margin-left: .25em; vertical-align: .32em; }
.clock-date { margin-top: 10px; font-size: .95rem; font-weight: 600; letter-spacing: .02em; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(18, 14, 38, .42); text-align: left; font-size: .85rem; line-height: 1.25; text-shadow: none; }
.pill i { width: 28px; height: 28px; border-radius: 50%; background: var(--peach); flex: none; }
.pill span { color: rgba(255, 255, 255, .72); display: block; font-size: .78rem; }
@media (max-width: 900px) { .hero-band { grid-template-columns: 1fr; } .clock { display: none !important; } }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section + .section { padding-top: 0; }
.section.band { background: var(--dusk); padding-top: clamp(64px, 9vw, 120px); }
.section.band + .section.band { padding-top: 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--muted); max-width: 52ch; margin: 0; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }
.shot { border-radius: var(--radius); background: var(--dusk-2); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6); }

/* places: the picker's grid, captions in the Journal's italic */
.places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; margin: 0; padding: 0; list-style: none; }
.places img { aspect-ratio: 720 / 420; width: 100%; object-fit: cover; border-radius: 12px; background: var(--dusk-2); }
.places figcaption { margin-top: 10px; font: italic 1.05rem/1.3 var(--serif); }
.places figcaption span { display: block; font: .85rem/1.4 var(--text); color: var(--faint); margin-top: 2px; }
.places figure { margin: 0; }
@media (max-width: 980px) { .places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
.places-more { margin-top: 28px; color: var(--muted); }

/* a day at one lake: the same scene at four real times, read left to right */
.day { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: var(--radius); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.day li { position: relative; }
.day img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.day time { position: absolute; left: 14px; bottom: 12px; font: 300 clamp(1.3rem, 2.4vw, 2rem)/1 var(--display); color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .day { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.weather { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.weather figure { margin: 0; }
.weather img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 12px; }
.weather figcaption { margin-top: 8px; color: var(--muted); font-size: .95rem; }
@media (max-width: 640px) { .weather { grid-template-columns: 1fr 1fr; } .weather li:last-child { display: none; } }

/* feature rows: a picture and its words, alternating */
.feature { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 8vw, 104px); }
.feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.feature.flip > figure { order: 2; }
.feature figure { margin: 0; }
.feature h2 { margin-bottom: 16px; }
.feature p { color: var(--muted); max-width: 46ch; }
.feature ul { margin: 0; padding: 0; list-style: none; color: var(--muted); }
.feature li { padding: 9px 0; border-top: 1px solid var(--line); }
.feature li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .feature, .feature.flip { grid-template-columns: 1fr; } .feature.flip > figure { order: 0; } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.trio figure { margin: 0; }
.trio img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 12px; }
.trio figcaption { margin-top: 12px; color: var(--muted); font-size: .98rem; }
.trio figcaption strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; } }

/* friends: words only, a note and a photo as the app's widgets draw them */
.friends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.friends h2 { margin-bottom: 18px; }
.friends p { color: var(--muted); max-width: 48ch; }
.tag { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(255, 179, 138, .5); color: var(--peach); font-size: .85rem; margin-bottom: 18px; }
.keepsakes { position: relative; min-height: 340px; }
.note { position: absolute; left: 0; top: 8%; width: min(300px, 70%); padding: 22px 24px; border-radius: 16px; background: rgba(18, 14, 38, .55); border: 1px solid var(--line); transform: rotate(-3deg); }
.note p { font: italic 1.35rem/1.35 var(--serif); color: var(--ink); margin: 0 0 10px; max-width: none; }
.note span { color: var(--faint); font-size: .88rem; }
.polaroid { position: absolute; right: 2%; top: 0; width: min(250px, 58%); padding: 12px 12px 16px; background: #f7f3ea; color: #3b3442; border-radius: 4px; transform: rotate(4deg); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }
.polaroid img { aspect-ratio: 1; object-fit: cover; object-position: 78% 50%; }
.polaroid span { display: block; margin-top: 10px; font: italic 1rem/1.2 var(--serif); }
@media (max-width: 860px) { .friends { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .keepsakes { min-height: 420px; } .note { top: 0; width: 76%; } .polaroid { top: auto; bottom: 0; width: 56%; } }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { padding: 22px 24px 0 0; color: var(--muted); }
.facts strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .facts li { padding: 16px 0; border-bottom: 1px solid var(--line); } }

/* the last call: the bench at night, its sky carried up behind the words like the hero's */
.closing { background: #0e122f; }
.closing .wrap { padding: clamp(56px, 8vw, 104px) 0 8px; }
.closing h2, .closing h1 { max-width: 18ch; }
.closing p { color: rgba(255, 255, 255, .86); max-width: 44ch; margin: 16px 0 26px; }
.closing-scene { position: relative; height: max(260px, min(40vw, 560px)); background: url("/img/closing.webp") 72% 100% / cover no-repeat; }
.closing-scene::before { content: ""; position: absolute; inset: -1px 0 auto; height: 40%; background: linear-gradient(#0e122f 10%, transparent); }
@media (max-width: 700px) and (orientation: portrait) { .closing-scene { height: min(120vw, 70svh); background-image: url("/img/closing-tall.webp"); background-position: 50% 100%; } .closing-scene::before { background: linear-gradient(#080b23, transparent); } .closing { background: #080b23; } }

/* ---------- inner pages ---------- */
.page-head { padding: clamp(40px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); }
.page-head .lede { margin-top: 16px; }

.download-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 22px; background: var(--dusk); border: 1px solid var(--line); }
.download-card .meta { color: var(--muted); margin: 12px 0 24px; }
.download-card .btn-note { margin-top: 14px; }
@media (max-width: 860px) { .download-card { grid-template-columns: 1fr; } }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
.cols h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 16px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.specs { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0; }
.specs dt, .specs dd { padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.specs dt { color: var(--ink); font-weight: 600; padding-right: 24px; }
.specs dd { color: var(--muted); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 12px 0 12px 46px; border-top: 1px solid var(--line); color: var(--muted); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 179, 138, .14); color: var(--peach); font-weight: 600; font-size: .9rem; }
.steps strong { color: var(--ink); font-weight: 600; }
.aside { margin-top: 28px; padding: 18px 22px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--muted); }
.aside strong { color: var(--ink); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 28px; border-radius: 20px; background: var(--dusk); border: 1px solid var(--line); }
.plan.plus { background: linear-gradient(180deg, #33305f, var(--dusk) 60%); border-color: rgba(255, 179, 138, .45); }
.plan h2 { font: 600 1.15rem/1.3 var(--text); color: var(--muted); }
.plan.plus h2 { color: var(--peach); }
.plan .price { margin: 14px 0 4px; font: 300 2.6rem/1 var(--display); letter-spacing: -.02em; }
.plan .price small { font: 400 .95rem var(--text); color: var(--muted); letter-spacing: 0; }
.plan .sum { color: var(--muted); min-height: 3.2em; }
.plan ul { margin: 18px 0 24px; padding: 0; list-style: none; flex: 1; }
.plan li { position: relative; padding: 8px 0 8px 28px; border-top: 1px solid var(--line); color: var(--muted); }
.plan li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--peach); border-bottom: 2px solid var(--peach); transform: rotate(-45deg); }
.plan li.no::before { border: 0; height: 2px; width: 12px; top: 19px; background: var(--faint); transform: none; }
.plan li.no { color: var(--faint); }
.plan .btn { width: 100%; }
@media (max-width: 920px) { .plans { grid-template-columns: 1fr; } .plan .sum { min-height: 0; } }
.faq { max-width: var(--read); margin-top: 24px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--peach); font-size: 1.3rem; line-height: 1; transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 18px; color: var(--muted); }
.faq details > div p:last-child { margin: 0; }

/* legal pages: paper, for reading at length */
.paper { background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.paper a:hover { color: #9a4a26; }
.paper .wrap { max-width: var(--read); }
.legal { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); font-size: 1.05rem; line-height: 1.7; }
.legal h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.legal h2 { font-size: 1.6rem; font-weight: 400; margin: 2.2em 0 .6em; }
.legal h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: .35em 0; }
.legal .updated { color: var(--paper-muted); font: italic 1rem var(--serif); margin: 10px 0 28px; }
.legal .draft { padding: 16px 20px; border-radius: 12px; background: #fff0d9; border: 1px solid #f0c98f; color: #5a3a12; margin-bottom: 28px; }
.legal .draft strong { color: #3d2408; }
.legal .tbd { background: #fde7c4; padding: 0 .25em; border-radius: 3px; }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .97rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--paper-line); }
.legal th { font-weight: 600; }
@media (max-width: 640px) { .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; } .legal thead { display: none; } .legal td { border: 0; padding: 2px 0; } .legal tr { border-top: 1px solid var(--paper-line); padding: 10px 0; } .legal td:first-child { font-weight: 600; } .legal td + td::before { content: attr(data-label) ": "; color: var(--paper-muted); } }
.paper .site-head { border-bottom: 1px solid var(--paper-line); }
.paper .nav a { color: var(--paper-muted); }
.paper .nav a:hover, .paper .nav a[aria-current="page"] { color: var(--paper-ink); }
.paper .nav .btn, .paper .nav .btn[aria-current="page"] { color: var(--peach-ink); }
.paper .site-foot { border-color: var(--paper-line); color: var(--paper-muted); }
.paper .site-foot h2 { color: var(--paper-ink); }
.paper .site-foot .small { color: var(--paper-muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .site-head, .site-foot, .skip { display: none; } body, .paper { background: #fff; color: #000; } }