/* The page at gethikomi.com, and the frame the other site pages (contact,
   the legal pages, 404, sign-in, the creator) share. brand.css has the
   colours, type and the shared pieces (the bubble, a window); this is the
   page itself: a document that scrolls and reflows on a phone. */
:root {
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The film's glow reaches past the page's edge on a phone: it's cut
     there, never a sideways scroll. */
  overflow-x: clip;
}

a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }

main, footer { position: relative; z-index: 1; }

/* ---- header ----
   The logo on the left, the page's sections in the middle, and on the right
   the one thing most people came for (Open the app) and who is signed in.
   It stays at the top as you scroll, frosted once the page has moved
   (landing.js adds .scrolled), and the section you are reading is marked
   (aria-current, landing.js sectionSpy). */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, padding .2s ease;
}
header.scrolled {
  padding-top: 10px; padding-bottom: 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
.brand { display: inline-flex; flex: none; border-radius: 8px; }
.brand img { display: block; height: 30px; width: auto; }
header nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
}
.nav-side { display: flex; align-items: center; gap: 2px; }

/* Wide screens: three columns - the logo, the sections, the actions - with
   Create in the exact middle of the page (its two sides are made equal, so
   the longer words on the right don't push it off centre). */
@media (min-width: 1101px) {
  header { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 18px; }
  .brand { justify-self: start; }
  header nav { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; align-items: center; }
  .nav-links { display: grid; grid-template-columns: 1fr auto 1fr; margin: 0; }
  /* each side hugs Create (by position, not :first-child - motion.js adds the underline as a child) */
  .nav-links > .nav-side:has(+ .nav-create) { justify-content: flex-end; }
  .nav-links > .nav-create + .nav-side { justify-content: flex-start; }
  .nav-actions { justify-self: end; }
}

.nav-links a {
  position: relative;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--ink-2);
  font-weight: 500;
  font-size: .97rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--paper); }
/* Create: the one thing in the middle, set apart as a pink bubble - the
   place you make a character of your own. */
.nav-links a.nav-create {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 8px; padding: 8px 16px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--on-pink);
  font-weight: 650;
  transition: transform var(--spring-dur) var(--spring), background .15s ease;
}
.nav-links a.nav-create:hover { background: #ff8fb6; transform: translateY(-1px); }
.nav-links a.nav-create:active { transform: scale(.97); transition-duration: 120ms; }
.nav-create .spark { width: 14px; height: 14px; flex: none; }
.nav-links a.nav-create::after { display: none; }       /* no reading-place underline on it */
@media (prefers-reduced-motion: reduce) {
  .nav-links a.nav-create, .nav-links a.nav-create:hover { transition: none; transform: none; }
}
/* The section you're reading: one liquid underline sliding between the
   links, its leading end ahead of the trailing one (motion.js liquid). */
.nav-links .liquid { height: 2px; border-radius: 2px; background: var(--ink); }
@media (min-width: 1101px) { .nav-links:has(.liquid) a[aria-current="true"]::after { display: none; } }
@media (max-width: 1100px) { .nav-links .liquid { display: none; } }
.nav-links a[aria-current="true"] { color: var(--ink); }
.nav-links a[aria-current="true"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--ink);
}
.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-cta {
  padding: 10px 18px;
  border-radius: var(--r-control);
  background: var(--solid);
  color: var(--on-solid);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-lift);
  transition: transform var(--spring-dur) var(--spring), background .15s ease;
}
.nav-cta:hover { background: var(--solid-hover); transform: translateY(-1px); }
.nav-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 #000; transition-duration: 120ms; }

/* A window too narrow for all of it: the sections go before the actions do. */
@media (max-width: 1280px) and (min-width: 1101px) {
  .nav-links a { padding: 8px 9px; font-size: .92rem; }
  .account-area .me .name { display: none; }
}

/* Phones and tablets: the links fold behind a menu button (landing.js siteMenu). */
.menu-toggle { display: none; }
@media (max-width: 1100px) {
  header { flex-wrap: wrap; justify-content: space-between; }
  .brand img { height: 26px; }
  .menu-toggle {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r-control);
    background: var(--paper); color: var(--ink); cursor: pointer;
  }
  header.open { background: var(--ground); border-bottom-color: var(--line); }
  header.open .menu-toggle { border-color: var(--ink); }
  header nav { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 8px; }
  header.open nav {
    display: flex;
    transition: opacity 180ms var(--spring-soft), transform var(--spring-dur) var(--spring), filter 220ms var(--spring-soft);
  }
  @starting-style { header.open nav { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-side { display: contents; }
  .nav-links a.nav-create { justify-content: center; margin: 12px 0 4px; padding: 12px 18px; font-size: 1.05rem; order: -1; }
  .nav-links a { padding: 14px 6px; border-radius: 0; font-size: 1.05rem; color: var(--ink);
                 border-bottom: 1px solid var(--line); }
  .nav-links a:hover { background: none; }
  .nav-links a[aria-current="true"]::after { left: 6px; right: auto; width: 24px; bottom: 6px; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
  .nav-actions .theme-toggle { align-self: center; width: 44px; height: 44px; }
  .nav-cta { text-align: center; padding: 13px 18px; }
  .nav-actions .account-area { justify-content: center; }
}

/* who is signed in (pricing.js): one button - the picture and first name -
   that opens a small menu: the email, credits, plans, signing out. */
.account-area { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.account-area .me {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 500;
  cursor: pointer;
}
.account-area .me:hover, .account-area .me[aria-expanded="true"] { border-color: var(--ink); }
.account-area .me:not(:has(.avatar)) { padding-left: 12px; }
.account-area .avatar { width: 28px; height: 28px; border-radius: 50%; }
.account-area .caret { width: 12px; height: 12px; color: var(--ink-3); transition: transform .15s ease; }
.account-area .me[aria-expanded="true"] .caret { transform: rotate(180deg); }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 250px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-window);
  background: var(--paper); box-shadow: var(--shadow-window);
  transform-origin: top right;
  transition: opacity 180ms var(--spring-soft), transform var(--spring-dur) var(--spring),
              filter 220ms var(--spring-soft);
}
.account-menu[hidden] { display: none; }
@starting-style {
  .account-menu:not([hidden]) { opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(4px); }
}
.account-menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-menu .who strong { display: block; font-size: .95rem; }
.account-menu .who span { display: block; color: var(--ink-2); font-size: .85rem; overflow-wrap: anywhere; }
.account-menu .who .credits { margin-top: 6px; color: var(--pink-ink); font-weight: 600; }
.account-menu a, .account-menu button {
  display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font: inherit; font-size: .92rem; text-align: left;
  text-decoration: none; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--paper-2); }
@media (max-width: 1100px) {
  .account-menu { position: static; margin-top: 10px; width: 100%; box-shadow: none; }
  .nav-actions .account-area { flex-direction: column; }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 24px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
  font: 600 1rem/1.25 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--spring-dur) var(--spring), background .15s ease;
}
.btn:hover { background: var(--paper); }
.btn:active { transform: translateY(1px); transition-duration: 120ms; }
.btn.primary { background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-lift); }
.btn.primary:hover { background: var(--solid-hover); }
.btn.primary:active { box-shadow: 0 1px 0 #000; }
.btn.wide { display: flex; width: 100%; }
.btn .sub { font-size: .78rem; font-weight: 500; color: var(--ink-3); }
.btn .sub:empty { display: none; }
.btn.primary .sub { color: var(--on-solid); opacity: .7; }
/* No build to hand out yet: still readable, clearly not a button to press. */
.btn[aria-disabled="true"] {
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--ink-3);
  background: transparent;
  pointer-events: none;
}
.btn.primary[aria-disabled="true"] { background: var(--line); color: var(--ink-3); box-shadow: none; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
button.btn { font-family: var(--font-body); }

.fineprint {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: .86rem;
  color: var(--ink-3);
}
.fineprint a { color: inherit; }

/* ---- hero ---- */
main { padding: 0 var(--gutter) 40px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: var(--measure);
  margin: clamp(24px, 6vh, 64px) auto clamp(72px, 12vh, 128px);
}
.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
/* "while you work / study / game ...": each word drops in from above and
   falls away below as the next one comes (landing.js). The box is as wide
   as the widest word, so the headline never re-wraps. */
.rotator {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  height: 1.08em;
  overflow: hidden;
  padding-bottom: .08em;           /* room for descenders (g, y) */
}
/* The pink highlighter stroke belongs to the box, not the word: one stroke
   that stays put while the words come and go, morphing its width to fit the
   word showing (landing.js sets --bar-w) - with the same spring as the rest. */
.rotator::after {
  content: ""; position: absolute; left: 0; top: .66em; height: .26em;
  width: var(--bar-w, 100%);
  background: var(--pink); z-index: -1;
  transition: width var(--spring-dur) var(--spring);
}
.rotator.bar-still::after { transition: none; }
@media (prefers-reduced-motion: reduce) { .rotator::after { transition: none; } }
.rotator .word {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(-.7em);
  transition: opacity 320ms var(--spring-soft), filter 380ms var(--spring-soft),
              transform 620ms var(--spring);
}
.rotator .word.on { opacity: 1; filter: none; transform: none; }
.rotator .word.out { opacity: 0; filter: blur(6px); transform: translateY(.7em); }
.rotator:not([style]) .word.on { position: static; }   /* no script: the first word, in the line */
.hero h1 > span[aria-hidden] { position: relative; z-index: 0; display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .rotator, .rotator .word { transition: opacity .6s ease; }
  .rotator .word, .rotator .word.out { transform: none; filter: none; }
}

.lede {
  margin: 0 0 30px;
  max-width: 40ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-2);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The film: a window on the desktop playing the one-minute tour, its title
   strip carrying Pause and Sound so nothing covers the picture (landing.js,
   film). Level with the top of the headline, not centred against the taller
   text beside it. */
.film { position: relative; margin: 0; align-self: start; padding-top: clamp(4px, 1vw, 12px); }
/* Set apart from the page: a soft glow of the character's pink and the
   wallpaper's lilac behind it, a deep shadow under it, and a hairline ring
   so its edge reads on the light page and the dark one. */
.film::before {
  content: ""; position: absolute; z-index: 0; inset: 6% -4% -8%;
  background:
    radial-gradient(60% 70% at 30% 45%, color-mix(in srgb, var(--pink) 55%, transparent), transparent 70%),
    radial-gradient(60% 70% at 75% 60%, color-mix(in srgb, var(--wall-b) 75%, transparent), transparent 70%);
  filter: blur(40px);
  --glow: .85;                          /* how bright, per theme */
  opacity: var(--glow);
  pointer-events: none;
  /* It breathes and drifts - the pink and the lilac turning slowly round
     each other - but only while the film plays (landing.js adds .playing). */
  animation: film-glow 11s ease-in-out infinite alternate paused;
}
.film.playing::before { animation-play-state: running; }
@keyframes film-glow {
  0%   { transform: rotate(0deg) scale(1); opacity: calc(var(--glow) * .8); }
  35%  { transform: rotate(7deg) scale(1.06) translate(2%, -1%); opacity: var(--glow); }
  70%  { transform: rotate(-5deg) scale(.97) translate(-2%, 2%); opacity: calc(var(--glow) * .85); }
  100% { transform: rotate(3deg) scale(1.04) translate(1%, 1%); opacity: calc(var(--glow) * .95); }
}
@media (prefers-reduced-motion: reduce) { .film::before { animation: none; } }
:root[data-theme="dark"] .film::before { --glow: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .film::before { --glow: 1; } }
.film-window {
  position: relative; z-index: 1;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent),
    0 2px 0 color-mix(in srgb, var(--ink) 6%, transparent),
    0 34px 70px -24px rgba(14, 10, 30, .6),
    0 0 0 1.5px color-mix(in srgb, var(--pink) 35%, transparent),
    0 0 60px -6px color-mix(in srgb, var(--pink) 60%, transparent);
}
.film-window > .titlebar { gap: 6px; padding: 0 8px 0 16px; min-height: 44px; }
.film-title { margin-right: auto; font: 700 .9rem var(--font-body); color: var(--ink);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px 0 9px;
  border: 0; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font: 600 .8rem var(--font-body); cursor: pointer;
}
.film-btn:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.film-btn svg { width: 15px; height: 15px; fill: currentColor; }
/* Sound on: the button turns pink - the character is talking to you. */
#film-sound[aria-pressed="true"] { background: var(--pink); color: var(--on-pink); box-shadow: none; }
.film-btn .i-play, .film-btn .i-on { display: none; }
#film-play[aria-pressed="false"] .i-pause { display: none; }
#film-play[aria-pressed="false"] .i-play { display: block; }
#film-sound[aria-pressed="true"] .i-off { display: none; }
#film-sound[aria-pressed="true"] .i-on { display: block; }
/* Volume: a slim slider in the title strip, filled pink up to the level
   (--level, set by landing.js), dimmed while the film is muted. */
.film-volume {
  -webkit-appearance: none; appearance: none;
  width: clamp(64px, 9vw, 110px); height: 32px; margin: 0 4px 0 0;
  background: transparent; cursor: pointer;
  --level: 80%;
}
.film-volume::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--pink) var(--level), var(--line) var(--level));
}
.film-volume::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.film-volume::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--pink); }
.film-volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink), 0 2px 4px rgba(0, 0, 0, .2);
}
.film-volume::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink), 0 2px 4px rgba(0, 0, 0, .2);
}
.film-volume.muted::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--line-strong) var(--level), var(--line) var(--level)); }
.film-volume.muted::-moz-range-progress { background: var(--line-strong); }
.film-volume:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

.film-screen { position: relative; aspect-ratio: 16 / 9; background: #e9e6f3; }
.film-screen video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* The browser started the film muted (none lets a page start sound before
   the visitor's first click or tap): a clear way to the sound, its waves
   pulsing, in the corner where the film keeps only a small mark
   (landing.js, film). */
.film-unmute {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px;
  background: rgba(14, 10, 30, .74); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
  font: 600 .9rem var(--font-body); white-space: nowrap; cursor: pointer;
  animation: film-unmute-in .45s .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.film-unmute[hidden] { display: none; }
.film-unmute:hover { background: rgba(14, 10, 30, .88); }
.film-unmute:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.film-unmute svg { width: 20px; height: 20px; fill: #fff; flex: none; }
.film-unmute .wave { fill: none; stroke: var(--pink); stroke-width: 2.2; stroke-linecap: round; animation: film-wave 1.4s ease-in-out infinite; }
.film-unmute .wave + .wave { animation-delay: .22s; }
@media (max-width: 560px) {             /* a phone's film is small: a smaller pill, closer in */
  .film-unmute { left: 8px; bottom: 8px; min-height: 32px; padding: 0 12px 0 9px; gap: 6px; font-size: .8rem; }
  .film-unmute svg { width: 17px; height: 17px; }
}
@keyframes film-unmute-in { from { opacity: 0; transform: translateY(8px) scale(.92); } }
@keyframes film-wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .film-unmute, .film-unmute .wave { animation: none; } }
/* A click on the picture: a pause or play sign in the middle, gone in a
   moment (landing.js, film). */
.film-flash {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(14, 10, 30, .55); color: #fff;
  opacity: 0; pointer-events: none;
}
.film-flash svg { width: 32px; height: 32px; fill: currentColor; display: none; }
.film-flash[data-show="pause"] .i-pause, .film-flash[data-show="play"] .i-play,
.film-flash[data-show="sound"] .i-sound { display: block; }
.film-flash[data-show="play"] svg { margin-left: 4px; }
.film-flash.go { animation: film-flash .6s ease-out; }
@keyframes film-flash { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .film-flash.go { animation-name: film-flash-calm; } @keyframes film-flash-calm { from { opacity: 1; } to { opacity: 0; } } }
/* The big start button, when it doesn't play by itself, and Play again at
   the end (both landing.js, film). */
.film-start, .film-again {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 10px; border: 0; border-radius: 999px;
  background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-lift);
  font: 600 1rem var(--font-body); white-space: nowrap; cursor: pointer;
}
.film-start { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); }
.film-start[hidden], .film-end[hidden] { display: none; }
.film-start .disc, .film-again .disc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); }
.film-start svg { width: 18px; height: 18px; fill: var(--on-pink); margin-left: 2px; }
.film-start:hover, .film-again:hover { background: var(--solid-hover); }
/* The end: the film's last frame stays under a light veil, with Play again
   in the middle of it. */
.film-end {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(14, 10, 30, .26); cursor: pointer;
  animation: film-end-in .4s ease-out both;
}
@keyframes film-end-in { from { opacity: 0; } }
.film-again { font-size: 1.05rem; transition: transform .18s ease-out; animation: film-again-in .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes film-again-in { from { transform: scale(.8); } }
.film-again:hover { transform: scale(1.04); }
.film-again:active { transform: scale(.97); }
.film-again svg { width: 20px; height: 20px; fill: none; stroke: var(--on-pink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .film-end, .film-again { animation: none; } }

/* ---- sections ---- */
section { max-width: var(--measure); margin: 0 auto clamp(80px, 13vh, 136px); scroll-margin-top: 80px; }
section h2 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.section-lede {
  margin: 0 0 clamp(32px, 5vh, 56px);
  max-width: 52ch;
  font-size: 1.1rem;
  color: var(--ink-2);
}

/* ---- what sets it apart: share screen, comments, pin ----
   Each one a small drawn scene next to its words, alternating sides. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin: 0 0 clamp(56px, 9vh, 96px);
  scroll-margin-top: 90px;
}
.showcase.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }   /* the scene keeps the wider column */
.showcase.flip .scene { order: 2; }
.showcase h3 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.showcase p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.showcase .more { margin-top: 14px; font-weight: 600; }      /* its own page, for more */

/* The three scenes: each a small desktop, the way the one-minute film shows
   them - wallpaper, a taskbar, the act's windows, Hikomi on top of it all
   (somewhere different in each), and the character's bubble. scenes.js acts each
   one out in a loop (the film's own easings and springs) while it is on
   screen. Everything is sized from the scene's width (cqw), so each scene is
   one picture at any size; the words keep a readable minimum. What CSS alone
   shows - no script, or reduced motion before the script runs - is each
   act's last beat, with everything in place. */
.screen {
  position: relative;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  border-radius: var(--r-window);
  background: linear-gradient(160deg, var(--wall-a), var(--wall-b));
  box-shadow: var(--shadow-window);
}
.screen > * { position: absolute; margin: 0; }
.screen .window { z-index: 1; transform-origin: 50% 50%; }
.screen .window > .titlebar {
  min-height: 6.4cqw; padding: 0 2.4cqw; gap: 1cqw;
  font-size: max(8px, 1.8cqw);
  white-space: nowrap; overflow: hidden;
}
.screen .window.dark { background: #2a2344; }
.screen .window.dark > .titlebar { background: #342c52; border-color: #41385f; color: #b9b2d8; }

/* the taskbar, over the windows and under her */
.screen .tb {
  left: 0; right: 0; bottom: 0; z-index: 5;
  height: 8.2cqw;
  display: flex; justify-content: center; align-items: center; gap: 1.6cqw;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.screen .ti { position: relative; width: 4.6cqw; height: 4.6cqw; }
.screen .ti svg { display: block; width: 100%; height: 100%; }
.screen .ti b {           /* a window of it is open */
  position: absolute; left: 50%; bottom: -1.2cqw; width: .8cqw; height: .8cqw; margin-left: -.4cqw;
  border-radius: 50%; background: var(--ink-3); opacity: 0;
}

/* Hikomi, on top of it all (behind the taskbar in the first act, coming up
   from below it): her own model, moving and talking (scenes-hikomi.js),
   drawn over the whole scene and faded in once it is in; until then, and for
   good where it can't be drawn, a picture of her at the act's still moment,
   drawn by that model (tools/brand/scene_stills.py). */
.screen .hk {
  inset: 0; z-index: 6;
  width: 100%; height: 100%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 1.6cqw 2cqw rgba(26, 23, 38, .3));
  pointer-events: none;
  transition: opacity .45s ease;
}
.screen[data-loop="share"] .hk { z-index: 4; }
.screen .hk3d {
  inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 1.6cqw 2cqw rgba(26, 23, 38, .3));
  pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
}
.screen.live3d .hk3d { opacity: 1; }
.screen.live3d .hk { opacity: 0; }

/* chips: what the app is doing */
.screen .chip {
  z-index: 7;
  display: inline-flex; align-items: center; gap: 1.2cqw;
  height: max(18px, 5.2cqw); padding: 0 2.4cqw 0 1.9cqw;
  border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: 600 max(8.5px, 1.9cqw)/1 var(--font-body);
  white-space: nowrap;
  box-shadow: 0 .8cqw 1.8cqw -1cqw rgba(26, 23, 38, .5);
}
.screen .chip .dot { width: max(6px, 1.4cqw); height: max(6px, 1.4cqw); border-radius: 50%; background: var(--ok); flex: none; }
.screen .chip.ink { background: var(--solid); color: var(--on-solid); }
.screen .chip.ink .dot { background: var(--pink); }
.screen .chip.share, .screen .chip.com, .screen .chip.thru { left: 4%; top: 3%; }

/* the character's bubble, beside her face, its tail pointing at her
   (scenes-hikomi.js puts her somewhere different in each act): above and to
   the left of her, pointing down; level with her face, pointing across.
   Typing into it (.said / .unsaid) keeps its size. */
.screen .bubble {
  z-index: 8;
  right: 22%; bottom: 79%;
  max-width: 48%;
  padding: 1.8cqw 2.5cqw;
  font-size: clamp(10px, 2.5cqw, 16px);
  color: var(--on-bubble);
  transform-origin: 88% 100%;
}
.screen .bubble.tail-se::after { right: 12%; transform: scaleX(-1); background: color-mix(in oklab, var(--bubble) 40%, var(--bubble-b)); }
.screen .bubble.tail-east { transform-origin: 100% 55%; }
.screen[data-loop="comments"] .bubble { right: 25%; bottom: auto; top: 6%; max-width: 42%; }
.screen[data-loop="pin"] .bubble { right: 34%; bottom: auto; top: 43%; max-width: 44%; }
.screen .unsaid { visibility: hidden; }
.screen .vo {           /* speaking: the logo's bars, bouncing */
  position: absolute; right: -1.2cqw; top: -2.4cqw;
  display: flex; align-items: center; gap: .45cqw;
  height: 3.6cqw; padding: 0 1.2cqw; border-radius: 999px;
  background: var(--solid); opacity: 0;
}
.screen .vo i { width: .5cqw; height: 1.6cqw; border-radius: .25cqw; background: var(--bubble); transform-origin: 50% 50%; }

/* cursors: hers (the app's dart, with her name) and the user's */
.screen .ptr { left: 0; top: 0; z-index: 9; width: 0; height: 0; opacity: 0; pointer-events: none; }
.screen .ptr svg { position: absolute; left: -.5cqw; top: -.34cqw; width: 4.4cqw; height: 4.7cqw; filter: drop-shadow(0 .5cqw .6cqw rgba(0, 0, 0, .28)); }
.screen .ptr .nm {
  position: absolute; left: 2.6cqw; top: 3.4cqw;
  display: inline-flex; align-items: center; height: max(14px, 3.2cqw); padding: 0 1.3cqw;
  border-radius: 999px; background: var(--pink); color: var(--on-pink);
  font: 700 max(7.5px, 1.7cqw)/1 var(--font-body); white-space: nowrap;
}

/* clicks: a ring, and sparkles where she points */
.screen .rip {
  left: 0; top: 0; z-index: 9;
  width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw;
  border-radius: 50%; border: .6cqw solid var(--pink); opacity: 0; pointer-events: none;
}
.screen .rip.ink { border-color: var(--ink); }
.screen .rip.ring { border-width: .12cqw; }      /* grown twelve times, over the whole screen */
.screen .spark { left: 0; top: 0; z-index: 9; width: 3.2cqw; height: 3.2cqw; margin: -1.6cqw 0 0 -1.6cqw; opacity: 0; }
.screen .spark svg { display: block; width: 100%; height: 100%; fill: var(--pink); }
.screen .flash { inset: 0; z-index: 10; background: #fff; opacity: 0; pointer-events: none; }

/* ---- act 1: sees your screen ---- */
.screen .win-code { left: 4%; top: 13%; width: 58%; }
.screen .code {
  margin: 0; padding: 1.4cqw 0;
  font: 500 max(7px, 2.05cqw)/1.72 var(--font-code);
  color: var(--ink-2); white-space: pre;
}
.screen .code span { display: block; padding: 0 2.4cqw; }
.screen .code i { display: inline-block; width: 4cqw; color: var(--ink-3); font-style: normal; }
.screen .code b { font-weight: 500; }
.screen .code .k { color: var(--code-k); }
.screen .code .s { color: var(--teal); }
.screen .code .l12 { position: relative; isolation: isolate; }
.screen .hl {             /* the line she points at, lighting up from the left */
  position: absolute; inset: 0; z-index: -1;
  background: var(--pink-soft); box-shadow: inset .5cqw 0 0 var(--pink);
  transform-origin: 0 50%;
}
.screen .scan {           /* the app looking: a light down the window */
  position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: 2;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pink) 10%, transparent) 62%,
              color-mix(in srgb, var(--pink) 32%, transparent) 94%, var(--pink) 97.5%, transparent);
  opacity: 0; pointer-events: none;
}
.screen .brk { inset: 2.5%; z-index: 7; opacity: 0; pointer-events: none; }
.screen .brk i { position: absolute; width: 7cqw; height: 7cqw; border: 0 solid #fff; }
.screen .brk i:nth-child(1) { left: 0; top: 0; border-width: .8cqw 0 0 .8cqw; border-radius: 1.6cqw 0 0 0; }
.screen .brk i:nth-child(2) { right: 0; top: 0; border-width: .8cqw .8cqw 0 0; border-radius: 0 1.6cqw 0 0; }
.screen .brk i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 .8cqw .8cqw; border-radius: 0 0 0 1.6cqw; }
.screen .brk i:nth-child(4) { right: 0; bottom: 0; border-width: 0 .8cqw .8cqw 0; border-radius: 0 0 1.6cqw 0; }
.screen .chip.ask {       /* the user, asking out loud */
  left: 4%; bottom: 14.5%;
  background: var(--solid); color: var(--on-solid); font-weight: 500;
}
.screen .mic { display: flex; align-items: center; gap: .45cqw; height: 2.6cqw; }
.screen .mic i { width: .5cqw; height: 2.4cqw; border-radius: .25cqw; background: currentColor; transform: scaleY(.35); }

/* ---- act 2: speaks up ---- */
.screen .win-game { left: 4%; top: 13%; width: 60%; }
.screen .world { position: relative; }
.screen .world svg { display: block; width: 100%; aspect-ratio: 800 / 464; }
.screen .banner {
  position: absolute; left: 50%; top: 34%;
  padding: .8cqw 2.6cqw 1cqw; border-radius: 1cqw;
  background: rgba(20, 16, 36, .74); color: #ffe3b0;
  font: 800 max(10px, 2.9cqw)/1 var(--font-display); letter-spacing: .01em; white-space: nowrap;
  transform: translateX(-50%);
}
.screen .confetti { inset: 0; z-index: 8; pointer-events: none; }
.screen .confetti i { position: absolute; left: 0; top: 0; width: 1cqw; height: 1.7cqw; border-radius: .25cqw; opacity: 0; }

/* ---- act 3: stays on top ---- */
.screen .win-doc { left: 30%; top: 9%; width: 49%; height: 52%; z-index: 4; }
.screen .page { padding: 2.2cqw 2.8cqw; font: 500 max(7px, 1.75cqw)/1.65 var(--font-body); color: var(--ink-2); }
.screen .page p { margin: 0 0 .9cqw; }
.screen .page .h { font: 800 max(8.5px, 2.35cqw)/1.2 var(--font-display); color: var(--ink); letter-spacing: -.02em; margin-bottom: 1.4cqw; }
.screen .page s { color: var(--ink-3); text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.screen .page .struck { position: relative; isolation: isolate; }
.screen .page .gh { height: 1.1cqw; border-radius: .6cqw; background: var(--paper-2); }
.screen .page .gh.short { width: 60%; }
.screen .caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: var(--ink); opacity: 0; }
.screen .win-music { left: 5%; top: 11%; width: 27%; z-index: 2; }
.screen .win-music .art { width: 44%; aspect-ratio: 1; margin: 2.6cqw auto 1.6cqw; border-radius: 1.4cqw; background: linear-gradient(135deg, var(--pink), #9c7cf0); }
.screen .win-music .ttl { text-align: center; font: 600 max(7px, 1.6cqw)/1 var(--font-body); color: #cfc8ea; }
.screen .win-music .eq { display: flex; justify-content: center; align-items: flex-end; gap: .7cqw; height: 4.6cqw; margin: 1.4cqw 0 2.4cqw; }
.screen .win-music .eq i { width: .9cqw; height: 100%; border-radius: .45cqw; background: #b9b2d8; transform-origin: 50% 100%; transform: scaleY(.5); }
.screen .win-web { left: 12%; top: 22%; width: 46%; z-index: 3; }
.screen .win-web .chart { position: relative; height: 12cqw; margin: 1.8cqw 2.4cqw 1.4cqw; border-radius: 1.2cqw; overflow: hidden;
                          background: linear-gradient(120deg, #9adfc3, #7fb6e8 60%, #b9a6ee); }
.screen .win-web .chart i { position: absolute; bottom: 0; width: 3.4cqw; border-radius: 1.7cqw 1.7cqw 0 0; background: rgba(255, 255, 255, .5); }
.screen .win-web .wh { margin: 0 2.4cqw 1.2cqw; font: 800 max(8.5px, 2.4cqw)/1.15 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.screen .win-web .ln2 { display: block; height: 1.1cqw; margin: 0 2.4cqw 1cqw; border-radius: .6cqw; background: var(--paper-2); }

@media (max-width: 800px) {
  .showcase, .showcase.flip { grid-template-columns: 1fr; }
  .showcase.flip .scene { order: 0; }
}

/* ---- talks, remembers ---- */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  padding-top: clamp(40px, 6vh, 64px);
  border-top: 1.5px solid var(--line);
}
.features h2 { margin: 18px 0 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.025em; }
.features p { margin: 0; color: var(--ink-2); max-width: 44ch; }
/* a voice, drawn with the logo's own capsule bars */
.voice { display: flex; align-items: center; gap: 6px; height: 56px; }
.voice i { width: 10px; border-radius: 5px; background: var(--ink); }
.voice i:nth-child(1) { height: 30%; } .voice i:nth-child(2) { height: 62%; } .voice i:nth-child(3) { height: 100%; }
.voice i:nth-child(4) { height: 48%; } .voice i:nth-child(5) { height: 78%; background: var(--pink); }
.voice i:nth-child(6) { height: 36%; } .voice i:nth-child(7) { height: 88%; } .voice i:nth-child(8) { height: 52%; }
.voice i:nth-child(9) { height: 24%; }
/* memory: three days of the same conversation, stacked */
.memory { position: relative; height: 56px; }
.memory span {
  position: absolute; padding: 5px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--paper); box-shadow: 0 6px 16px -10px rgba(26, 23, 38, .5);
  font-size: .8rem; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
.memory span:nth-child(1) { left: 0; top: 0; }
.memory span:nth-child(2) { left: 88px; top: 20px; opacity: .75; }
.memory span:nth-child(3) { left: 200px; top: 4px; background: var(--pink); color: var(--on-pink); }
@media (max-width: 700px) { .features { grid-template-columns: 1fr; } }

/* ---- characters ----
   Each one standing on a patch of wallpaper, like a character select. The
   picture comes from landing.js for the characters that have one; the rest
   get the mark. */
.cast {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.cast li {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--r-window);
  background: var(--paper);
  box-shadow: var(--shadow-window);
}
.cast .look {
  position: relative; height: 240px; overflow: hidden;
  background: linear-gradient(160deg, var(--wall-a), var(--wall-b));
}
.cast li:nth-child(3n+2) .look { background: linear-gradient(160deg, var(--wall-pink-a), var(--wall-pink-b)); }
.cast li:nth-child(3n+3) .look { background: linear-gradient(160deg, var(--wall-sky-a), var(--wall-sky-b)); }
.cast .look img { position: absolute; left: 50%; bottom: -46%; height: 150%; transform: translateX(-50%); }
.cast .look img.mark { bottom: auto; top: 50%; height: 40%; transform: translate(-50%, -50%); opacity: .9; }
.cast .text { padding: 16px 20px 20px; }
.cast .who { font: 800 1.35rem/1.1 var(--font-display); letter-spacing: -.02em; }
.cast .what { color: var(--ink-2); font-size: .95rem; margin-top: 6px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
/* one you made: its picture is the mark, and a tag says it's yours */
.cast .yours {
  position: absolute; left: 14px; top: 14px;
  padding: 3px 11px; border-radius: 999px;
  background: var(--solid); color: var(--on-solid);
  font-size: .8rem; font-weight: 600;
}
/* The last card, making your own: an empty slot on the desktop, waiting -
   a dashed outline and the character's pink plus, and the whole card a link. */
.cast li.make { position: relative; background: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); }
.cast li.make .look {
  display: grid; place-items: center;
  background: none; border-bottom: 2px dashed var(--line-strong);
}
.cast li.make .plus {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: var(--pink);
  transition: transform var(--spring-dur) var(--spring);
}
.cast li.make .plus::before, .cast li.make .plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 4px; border-radius: 2px; background: var(--on-pink);
  transform: translate(-50%, -50%);
}
.cast li.make .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.cast li.make a.who { display: block; color: var(--ink); text-decoration: none; }
.cast li.make a.who::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* the whole card */
.cast li.make:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.cast li.make:hover .plus { transform: scale(1.08) rotate(90deg); }
.cast li.make:has(a.who:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.cast li.make a.who:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .cast li.make .plus { transition: none; } }

/* ---- plans & credits (pricing.js) ---- */
.pricing-account {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-bottom: 24px; padding: 16px 20px;
  border-radius: var(--r-window); background: var(--paper); box-shadow: var(--shadow-window);
}
.pricing-account p { margin: 0; color: var(--ink-2); }
.pricing-account .who strong, .pricing-account .plan-line strong { color: var(--ink); }
.pricing-account .btn { min-height: 40px; padding: 6px 18px; font-size: .92rem; }
.early {
  margin: 0 0 20px; padding: 12px 18px; border-radius: var(--r-control);
  background: var(--pink); color: var(--on-pink); font-weight: 600;
}
.pay-notice {
  margin: 0 0 20px; padding: 12px 18px; border-radius: var(--r-control);
  background: var(--paper); box-shadow: var(--shadow-window);
}
.plans {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.plan {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 24px 24px; border-radius: var(--r-window);
  background: var(--paper); box-shadow: var(--shadow-window);
}
.plan.best { box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-window); }
.plan h3 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.plan .badge {
  position: absolute; top: -14px; right: 18px; padding: 5px 14px; border-radius: 14px 14px 14px 4px;
  background: var(--pink); color: var(--on-pink); font-size: .82rem; font-weight: 700;
}
.plan .price { margin: 6px 0 0; font-size: 1rem; color: var(--ink-2); }
.plan .price strong { font: 800 2.3rem/1 var(--font-display); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan .price s, .plan .credits s { opacity: .6; font-weight: 400; }
.plan .credits { margin: 0; font-weight: 600; }
.plan .value { margin: 0; color: var(--pink-ink); font-size: .9rem; font-weight: 600; }
.plan .btn, .pack .btn { margin-top: auto; min-height: 46px; font-size: .95rem; }
.plan .btn { margin-top: 14px; }
.packs-title { margin: 44px 0 14px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.packs {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pack {
  display: flex; flex-direction: column; gap: 2px; padding: 18px 20px;
  border-radius: var(--r-window); background: var(--paper); box-shadow: var(--shadow-window);
}
.pack p { margin: 0; }
.pack .credits { font: 800 1.15rem var(--font-display); letter-spacing: -.01em; }
.pack .price { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pack .btn { margin-top: 12px; }
.costs { max-width: none; margin-top: 24px; }

/* ---- browser or desktop ---- */
.compare-wrap { margin: 0 0 40px; overflow-x: auto; }
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
}
.compare th, .compare td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.compare thead th { font: 800 1.05rem var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.compare tbody th { font-weight: 500; color: var(--ink); width: 44%; }
.compare td { color: var(--ink-2); width: 28%; }
.compare td:last-child, .compare th.desk { background: var(--desk-wash); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .yes, .compare .no { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.compare .yes { position: relative; border-radius: 50%; background: var(--solid); }
.compare .yes::after {
  content: ""; position: absolute; inset: 0; background: var(--on-solid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.compare td:last-child .yes { background: var(--pink); }
.compare td:last-child .yes::after { background: var(--on-pink); }
.compare .no { height: 2px; width: 14px; border-radius: 1px; background: var(--line-strong); }
.desktop-get {
  display: grid;
  gap: clamp(20px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}
.desktop-get h3 { margin: 0 0 12px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.desktop-get .fineprint { margin-left: 0; }
@media (max-width: 560px) {
  .compare { font-size: .86rem; }
  .compare th, .compare td { padding: 10px 9px; }
  .compare tbody th { width: 40%; }
}

.split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.split h3 { margin: 0 0 12px; font-size: 1.1rem; }
.ticks { margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .38em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5.2' fill='none' stroke='%231a1726' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px;
}
.ticks.plain li::before { background-color: var(--line); }

/* ---- questions people ask ----
   One window of short answers, every answer showing - no accordions, so a
   visitor, or a search engine, reads them without a click. Two columns on a
   wide screen, hairlines between the rows, no cards. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 56px);
  padding: 4px clamp(20px, 3vw, 36px) 8px;
}
.qa { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.qa:nth-child(-n+2) { border-top: 0; }
.qa h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.qa p { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 760px) {
  .faq-list { grid-template-columns: 1fr; }
  .qa:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ---- footer ----
   An ink band, the one dark place on the page, closing on the logo. */
footer {
  padding: 56px var(--gutter) 56px;
  background: var(--band);
  color: #c9c4dc;
  text-align: center;
  font-size: .95rem;
}
footer .reveal {
  display: block; width: min(100%, 420px); height: auto; margin: 0 auto 18px;
  cursor: pointer; user-select: none; -webkit-user-drag: none;
}
footer p { margin: 0 0 10px; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .footer-links, footer .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
footer .footer-links a { font-weight: 600; }
footer .legal-links a { color: #c9c4dc; }
footer .fineprint { margin: 14px auto 0; color: #a39dba; max-width: 60ch; }
footer :focus-visible { outline-color: var(--pink); }

/* ---- the character in the corner (landing.js pinnedBuddy) ----
   Pinned like the desktop app pins it, and it comments on the section
   you're reading. It stays out of the way: small, at the edge, never over
   the first screen, gone on phones, and one click hides it for good. */
.buddy-pin {
  position: fixed; right: 18px; bottom: 0; z-index: 15;
  display: flex; align-items: flex-end;
  pointer-events: none;
  opacity: 0; translate: 0 24px;
  transition: opacity .35s var(--spring-soft), translate var(--spring-dur) var(--spring);
}
.buddy-pin.on { opacity: 1; translate: 0 0; }
.buddy-pin[hidden] { display: none; }
.buddy-pin img { width: 118px; height: auto; display: block; filter: drop-shadow(0 8px 12px rgba(26, 23, 38, .3)); }
.buddy-pin .say {
  max-width: 240px; margin: 0 -10px 82px 0; padding: 11px 15px;
  border-radius: 18px 18px 4px 18px;
  background: var(--solid); color: var(--on-solid);
  font-size: .9rem; font-weight: 500; line-height: 1.4;
  transition: opacity .22s ease, transform .35s var(--spring);
}
.buddy-pin .say.swap { opacity: 0; transform: translateY(6px); }
.buddy-close {
  position: absolute; right: 4px; top: 4px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink-2); box-shadow: 0 4px 10px -4px rgba(26, 23, 38, .5);
  cursor: pointer; pointer-events: auto;
  opacity: 0; transition: opacity .15s ease;
}
.buddy-pin:hover .buddy-close, .buddy-close:focus-visible { opacity: 1; }
.buddy-pin:hover { pointer-events: auto; }
.buddy-pin img, .buddy-pin .say { pointer-events: auto; }
@media (max-width: 900px), (max-height: 560px) { .buddy-pin { display: none; } }
@media (prefers-reduced-motion: reduce) { .buddy-pin, .buddy-pin .say { transition: none; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; margin-top: 16px; }
  .film-title { font-size: .82rem; }
  .film-btn .label { display: none; }                /* the icons alone on a narrow screen */
  .film-volume { width: 64px; }
  .film-btn { padding: 0; width: 40px; min-height: 40px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav-cta { transition: none; }
}

/* Off screen until Tab reaches it - the first stop on the page. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 8px 14px;
  border-radius: var(--r-control);
  background: var(--solid);
  color: var(--on-solid);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }