/*
  Nameshot landing page.

  Design read: a premium-consumer landing for design-minded Mac people, in the playful-bold
  indie-Mac language of Playdate, Hand Mirror and Paste. The hero is a faithful Mac desktop whose
  menu bar is the site's navigation, with Nameshot's face living in it for the whole page.
  Dials: variance 8, motion 7, density 3.

  Rules this file keeps:
  - One accent, California poppy (the app's AccentColor / AccentTextColor), everywhere.
  - Shapes: anything you press is a full pill; panels are 28px; the app icon is a 23% squircle;
    screenshot thumbnails are 3px, like Finder's.
  - Type is the Mac's own: SF Pro Rounded for display (ui-rounded; other browsers fall back to
    the system font), SF Pro for text. Nothing is downloaded, so there are no third-party requests.
  - Light and dark from prefers-color-scheme. Everything that moves has a reduced-motion path.
*/

:root {
  --bg: #f4f4f3;
  --surface: #fcfcfb;
  --surface-2: #ececea;
  --ink: #161616;
  --ink-2: #464644;
  --ink-3: #696967;
  --line: rgb(22 22 22 / 0.1);
  --poppy: #f28a14;
  --poppy-ink: #b25600;
  --poppy-soft: rgb(242 138 20 / 0.13);
  --on-poppy: #2a1400;
  --shadow: 0 1px 2px rgb(60 30 0 / 0.06), 0 12px 40px rgb(60 30 0 / 0.1);

  --font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --menubar-h: 32px;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* The hero's wallpaper: a mesh gradient of our own. Violet, lilac and pink up where most files sit
     (so the poppy name tape stands out), gold and poppy glowing through the middle, deep plum under the
     headline for the white words. The hero softens it further and adds grain (.wallpaper). */
  --wall:
    radial-gradient(64% 74% at 0% 100%, #4b1340 0 24%, rgb(75 19 64 / 0.62) 46%, transparent 76%),
    radial-gradient(44% 56% at 90% 4%, rgb(118 92 255 / 0.95), transparent 68%),
    radial-gradient(34% 40% at 66% 16%, rgb(190 166 255 / 0.85), transparent 70%),
    radial-gradient(46% 44% at 16% 8%, rgb(255 213 142 / 0.95), transparent 70%),
    radial-gradient(38% 40% at 44% 30%, rgb(255 174 122 / 0.9), transparent 70%),
    radial-gradient(42% 38% at 36% 62%, rgb(255 122 42 / 0.92), transparent 72%),
    radial-gradient(40% 46% at 70% 52%, rgb(255 94 98 / 0.85), transparent 70%),
    radial-gradient(46% 52% at 92% 80%, rgb(240 79 143 / 0.9), transparent 70%),
    radial-gradient(40% 40% at 62% 98%, rgb(193 63 158 / 0.85), transparent 70%),
    linear-gradient(150deg, #ffbf86 0%, #ff8a6a 50%, #d8457f 100%);
  --sky: #a796f4;
  /* Desktop labels: dark on the light afternoon sky, with a light halo for the hills. */
  --label-ink: #241005;
  --label-halo: 0 0 2px rgb(255 240 225 / 0.95), 0 0 6px rgb(255 240 225 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111112;
    --surface: #19191b;
    --surface-2: #222224;
    --ink: #f2f2f0;
    --ink-2: #bdbdba;
    --ink-3: #8f8f8c;
    --line: rgb(255 255 255 / 0.1);
    --poppy: #ffa03a;
    --poppy-ink: #ffa03a;
    --poppy-soft: rgb(255 160 58 / 0.14);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 48px rgb(0 0 0 / 0.4);

    --menubar-ink: rgb(255 255 255 / 0.92);
    --label-ink: #fff;
    --label-halo: 0 1px 2px rgb(0 0 0 / 0.7), 0 0 1px rgb(0 0 0 / 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--menubar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--poppy); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard shortcuts as little grey keys, the way macOS draws them (the app's KeyCaps), in Apple's
   modifier order: ⌃ ⌥ ⇧ ⌘, then the key. Screen readers get the words instead (.sr-only next to it). */
.keys { display: inline-flex; gap: 3px; vertical-align: 0.12em; }
.keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.3em;
  border-radius: 0.36em;
  background: color-mix(in srgb, currentColor 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent), 0 1px 0 color-mix(in srgb, currentColor 12%, transparent);
  font: 600 0.8em/1 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}

/* Launch state: the badge once Nameshot is on the Mac App Store, a note until then. */
html:not([data-launch="soon"]) .soon-only,
html:not([data-launch="beta"]) .beta-only,
html:not([data-launch="live"]) .live-only { display: none !important; }

/* ---------------------------------------------------------------------------------------------
   The menu bar, which is also the site's navigation
   ------------------------------------------------------------------------------------------- */

.menubar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--menubar-h);
  color: var(--menubar-ink);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
/* Over the hero's light wallpaper the menu bar stays dark-on-light, in dark mode too. */
@media (prefers-color-scheme: dark) {
  .menubar:not([data-solid]) { --menubar-ink: rgb(30 14 4 / 0.9); }
  .desk, .drop-demo { --menubar-ink: rgb(30 14 4 / 0.9); --label-ink: #241005; --label-halo: 0 0 2px rgb(255 240 225 / 0.95), 0 0 6px rgb(255 240 225 / 0.6); }
}
.menubar[data-solid] {
  --menubar-ink: var(--ink);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: 0 1px 0 var(--line);
}
.menubar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 14px;
  /* The Mac's own menu bar: SF Pro at 14 points, medium. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
}
.mb-app, .mb-item {
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.mb-app { font-weight: 700; margin-right: 2px; }
.mb-app:hover, .mb-item:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.mb-spacer { flex: 1; }
.mb-cta {
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--menubar-ink);
  color: var(--bg);
  margin-right: 6px;
  white-space: nowrap;
}
.menubar:not([data-solid]) .mb-cta { color: #1d0e04; background: rgb(255 255 255 / 0.85); }
@media (prefers-color-scheme: light) {
  .menubar:not([data-solid]) .mb-cta { color: #fff; background: rgb(40 16 4 / 0.82); }
}
.mb-cta:active { transform: translateY(1px); }
.mb-face {
  display: grid;
  place-items: center;
  width: 34px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.mb-face:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.mb-face svg { width: 21px; height: 21px; overflow: visible; }
.mb-clock {
  padding: 5px 6px 5px 8px;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .mb-item { display: none; }
}
@media (max-width: 420px) {
  .mb-clock { display: none; }
}

/* The face: brackets and two eyes, drawn by landing.js. */
.face { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.face .brackets { stroke-width: 1.9; }

/* ---------------------------------------------------------------------------------------------
   The hero: a Mac desktop full of screenshots
   ------------------------------------------------------------------------------------------- */

.desk {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 1100px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
.wallpaper { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.wallpaper::before { content: ""; position: absolute; inset: -6%; background: var(--wall); filter: blur(28px) saturate(1.08); }
/* Fine grain, like printed mesh gradients: one static noise tile, never animated. */
.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.files { position: absolute; inset: var(--menubar-h) 0 0; }
.file {
  position: absolute;
  width: 112px;
  margin-left: -56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 2px 6px;
  border-radius: 8px;
  touch-action: manipulation;
  cursor: default;
  transform: rotate(var(--r, 0deg));
  will-change: transform;
}
.file[hidden] { display: none; }
.file.dragging { z-index: 20; cursor: grabbing; }
.file.dragging .thumb { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.95), 0 14px 30px rgb(40 10 0 / 0.45); }
.thumb {
  position: relative;
  max-width: 84px;
  max-height: 64px;
  width: auto;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.92), 0 2px 7px rgb(40 10 0 / 0.38);
  background: #fff;
  pointer-events: none;
}
.thumb-box { position: relative; height: 64px; display: grid; place-items: end center; }
.thumb-box::after {
  /* The scan: a poppy line passes over the screenshot as it's read. */
  content: "";
  position: absolute;
  left: 50%;
  width: var(--tw, 84px);
  margin-left: calc(var(--tw, 84px) / -2);
  bottom: calc(var(--th, 64px) - 2px);
  height: 2px;
  border-radius: 2px;
  background: var(--poppy);
  box-shadow: 0 0 8px var(--poppy);
  opacity: 0;
}
.file.scanning .thumb-box::after { animation: scan 0.32s var(--ease-out) forwards; }
@keyframes scan {
  0% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--th, 64px)); }
}
.label {
  display: grid;
  width: 108px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.label > span { grid-area: 1 / 1; }
.label .old {
  color: var(--label-ink);
  text-shadow: var(--label-halo);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.label .new { visibility: hidden; padding-top: 1px; }
.label .new span, .tape {
  background: var(--poppy);
  color: var(--on-poppy);
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.file.named .old { visibility: hidden; }
.file.named .new { visibility: visible; }

/* The card that springs up over a file: its new name, and what it was before. */
.hover-card {
  position: absolute;
  z-index: 25;
  max-width: 280px;
  padding: 10px 13px 11px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), var(--shadow);
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
}
.hover-card b {
  display: block;
  font: 750 16px/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.hover-card span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.hover-card span::before { content: "was "; }

.hero-copy {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(32px, 8vh, 88px);
  z-index: 10;
  max-width: min(940px, 66vw);
}
.hero-copy h1 {
  font-size: clamp(38px, 5.9vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 11em;
  text-shadow: 0 1px 2px rgb(75 19 64 / 0.22), 0 4px 40px rgb(75 19 64 / 0.45);
}
.hero-sub {
  margin-top: 20px;
  max-width: 27em;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 1px 2px rgb(75 19 64 / 0.3), 0 4px 24px rgb(75 19 64 / 0.4);
}
.cta-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.soon-pill {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.94);
  color: #1d1d1b;
  font-weight: 650;
  font-size: 15.5px;
  white-space: nowrap;
}
a.soon-pill { text-decoration: none; transition: transform 0.2s var(--ease-out), box-shadow 0.2s; }
a.soon-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgb(40 10 0 / 0.18); }
a.soon-pill:active { transform: translateY(1px) scale(0.99); }
.mas-badge img { height: 50px; width: auto; }
.mas-badge { display: inline-block; border-radius: 10px; transition: transform 0.2s var(--ease-out); }
.mas-badge:hover { transform: translateY(-1px); }
.mas-badge:active { transform: translateY(1px) scale(0.99); }

.replay {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(28px, 6vh, 64px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgb(20 6 0 / 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.3s, background-color 0.2s;
}
.replay:hover { background: rgb(20 6 0 / 0.4); }
.replay:active { transform: translateY(1px); }
.replay[hidden] { display: inline-flex; opacity: 0; pointer-events: none; }

/* Narrow screens: the files sit in a grid above the words. */
.files.grid {
  inset: calc(var(--menubar-h) + 18px) 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  row-gap: 10px;
  padding: 0 12px;
}
.files.grid .file { position: relative; margin: 0; left: auto !important; top: auto !important; }
@media (max-width: 759px) {
  .desk { min-height: 0; max-height: none; height: auto; padding-top: calc(var(--menubar-h) + 380px); padding-bottom: 36px; }
  .hero-copy { position: relative; left: auto; bottom: auto; padding: 0 20px; }
  .replay { top: calc(var(--menubar-h) + 336px); bottom: auto; right: 20px; height: 30px; }
}

/* The rename pill, under the face in the menu bar. A web approximation of the app's Liquid Glass
   (backdrop blur, a bright top edge and a soft shadow), not Apple's material itself. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 44px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 0 7px 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 0 0 0.5px rgb(255 255 255 / 0.3),
    0 10px 30px rgb(40 14 0 / 0.22);
  color: var(--ink);
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  .pill { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 0.5px rgb(255 255 255 / 0.12), 0 12px 34px rgb(0 0 0 / 0.5); }
}
@media (prefers-reduced-transparency: reduce) {
  .pill, .hover-card, .menubar[data-solid] { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.pill-thumb {
  width: 40px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 10px;
  flex: none;
  background: #fff;
}
.pill-spark { color: var(--poppy); font-size: 12px; margin-right: 6px; flex: none; }
.pill-name {
  position: relative;
  font: 650 14px/1.2 var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  margin-right: 10px;
}
/* The hero pill's name rolls: the line in flow sets the width, the one leaving floats over it. */
#hero-pill .pill-name { height: 1.3em; }
#hero-pill .roll-line { display: block; overflow: hidden; text-overflow: ellipsis; }
#hero-pill .roll-line.leaving { position: absolute; inset: 0 0 auto; }
/* While the names roll, the pill holds one width so it doesn't twitch, and Undo waits. */
#hero-pill.rolling .pill-name { flex: none; width: 236px; }
#hero-pill.rolling .pill-btn { opacity: 0.55; pointer-events: none; }
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--poppy);
  color: var(--on-poppy);
  font-size: 12.5px;
  font-weight: 650;
  flex: none;
  cursor: pointer;
}
.pill-btn:active { transform: translateY(1px) scale(0.98); }
.pill-btn-icon { display: inline-block; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pill[data-undone] .pill-btn-icon { transform: scaleX(-1); }

#hero-pill {
  position: fixed;
  top: calc(var(--menubar-h) + 6px);
  left: 0;
  z-index: 29;
  opacity: 0;
  pointer-events: none;
  transform-origin: 70% 0;
}
#hero-pill.shown { pointer-events: auto; }

/* ---------------------------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------------------------- */

.section { max-width: var(--max); margin: 0 auto; padding: clamp(96px, 13vw, 168px) var(--gutter); }
.section h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -0.035em; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
}

/* The app icon, alive: the face on a poppy squircle. */
.icon-face {
  position: relative;
  width: var(--size, 200px);
  aspect-ratio: 1;
  border-radius: 23%;
  background:
    radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.22), transparent 60%),
    linear-gradient(165deg, #f5a64d 0%, #ec8526 52%, #dc6c1c 100%);
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / 0.35),
    inset 0 -2px 0 rgb(120 40 0 / 0.18),
    0 calc(var(--size, 200px) * 0.1) calc(var(--size, 200px) * 0.25) rgb(200 90 10 / 0.3);
  color: #fffaf5;
  display: grid;
  place-items: center;
}
.icon-face svg { width: 74%; height: 74%; overflow: visible; filter: drop-shadow(0 2px 3px rgb(120 40 0 / 0.25)); }
@media (prefers-color-scheme: dark) {
  .icon-face { box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 0.3), 0 calc(var(--size, 200px) * 0.1) calc(var(--size, 200px) * 0.3) rgb(0 0 0 / 0.5); }
}

/* How it works: the face stays put while three steps go by. */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 120px); }
.how-stage { position: relative; }
.how-sticky {
  position: sticky;
  top: calc(50vh - 250px);
  height: 500px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 44px;
}
.how-file { display: grid; justify-items: center; gap: 12px; }
.how-thumb {
  position: relative;
  width: 260px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  background: #fff;
}
.how-thumb img { width: 100%; height: auto; }
.how-thumb::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--poppy);
  box-shadow: 0 0 14px 2px var(--poppy);
  opacity: 0;
}
.how-file[data-step="1"] .how-thumb::after { opacity: 1; animation: how-scan 1.15s ease-in-out infinite alternate; }
@keyframes how-scan { from { transform: translateY(0); } to { transform: translateY(110px); } }
.how-label {
  display: grid;
  justify-items: center;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  max-width: 260px;
}
.how-label > span { grid-area: 1 / 1; transition: opacity 0.35s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.how-label .old { color: var(--ink-2); }
.how-label .new { opacity: 0; transform: scale(0.8); }
.how-file[data-step="2"] .how-label .old { opacity: 0; transform: translateY(-6px); }
.how-file[data-step="2"] .how-label .new { opacity: 1; transform: none; }
.how-file[data-step="0"] .how-thumb { animation: drop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes drop-in { from { transform: translateY(-16px) scale(0.94); opacity: 0.4; } }

.how-steps h2 { margin-bottom: 8px; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; }
.step h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
.step p { margin-top: 14px; max-width: 26em; font-size: 19px; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .step { transition: opacity 0.5s var(--ease-out); }
  .how.enhanced .step:not(.active) { opacity: 0.32; }
}
@media (max-width: 899px) {
  .how { grid-template-columns: 1fr; }
  .how-sticky { position: relative; top: auto; height: auto; padding: 8px 0 24px; gap: 32px; }
  .step { min-height: 0; padding: 28px 0; }
  .how.enhanced .step:not(.active) { opacity: 1; }
}

/* Privacy: the promise, big. */
.private .manifesto {
  font-size: clamp(50px, 8.6vw, 136px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  max-width: 11em;
}
.private .manifesto span { display: block; color: var(--poppy-ink); }
.facts {
  margin: clamp(56px, 7vw, 88px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 48px);
}
.facts dt { font: 800 21px/1.2 var(--font-display); letter-spacing: -0.015em; }
.facts dd { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; max-width: 18em; }
.text-link {
  display: inline-flex;
  margin-top: 44px;
  font-weight: 650;
  color: var(--poppy-ink);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.text-link:hover { border-bottom-width: 3px; }
@media (max-width: 899px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .facts { grid-template-columns: 1fr; } }

/* Features: a bento of small, working demos. */
.features h2 { max-width: 13em; }
.bento {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 16px;
}
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 26px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.cell h3 { font-size: 23px; line-height: 1.12; letter-spacing: -0.02em; }
.cell p { margin-top: 7px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; max-width: 30em; }
.cell-demo { flex: 1; display: grid; place-items: center; min-height: 120px; }

.cell-tidy { grid-column: span 8; grid-row: span 2; background: var(--surface-2); }
.cell-undo { grid-column: span 4; background: var(--wall); color: #fff; }
.cell-undo p { color: rgb(255 255 255 / 0.88); }
.cell-edit { grid-column: span 4; background: var(--poppy-soft); }
.cell-drop { grid-column: span 5; }
.cell-learn { grid-column: span 4; }
.cell-quiet { grid-column: span 3; background: #1a1a1b; color: #f2f2f0; }
.cell-quiet p { color: #b9b9b6; }
@media (prefers-color-scheme: dark) { .cell-quiet { background: #262628; } }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell-tidy { grid-column: span 2; grid-row: auto; }
  .cell-undo, .cell-edit, .cell-drop, .cell-learn, .cell-quiet { grid-column: span 1; }
  .cell-drop { grid-column: span 2; }
}
@media (max-width: 639px) {
  .bento { grid-template-columns: 1fr; }
  .cell-tidy, .cell-undo, .cell-edit, .cell-drop, .cell-learn, .cell-quiet { grid-column: auto; }
}

/* Tidy Up: a pile of screenshots that all get their names. */
.tidy-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 10px;
  align-content: center;
  padding: 8px 0;
}
.tidy-grid .file { position: relative; margin: 0; width: auto; transform: none; }
.tidy-grid .label { width: 100%; max-width: 132px; }
.tidy-grid .label .old { color: var(--ink-2); text-shadow: none; }
.tidy-grid .thumb { box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgb(40 10 0 / 0.14); }
@media (max-width: 639px) { .tidy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tidy-grid .file:nth-child(n + 10) { display: none; } }
.cell-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.again {
  flex: none;
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}
.again:active { transform: translateY(1px); }

.pill-demo { position: relative; width: min(100%, 340px); }
.pill-demo .pill-thumb { background: #fff; }
.pill-edit input {
  flex: 1;
  min-width: 0;
  height: 30px;
  margin-right: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--poppy);
  color: var(--ink);
  font: 650 14px/1 var(--font-display);
}
.pill-edit input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--poppy), 0 0 0 4px var(--poppy-soft); }
.edit-note { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ink-3); min-height: 1.4em; }

/* Drop on the face: a small menu bar and a file to drag up to it. */
.drop-demo {
  position: relative;
  width: 100%;
  height: 190px;
  border-radius: 18px;
  background: var(--wall);
  overflow: hidden;
  color: #fff;
}
.mini-menubar {
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px;
  color: var(--menubar-ink);
  font-size: 12.5px;
}
.mini-menubar svg { width: 21px; height: 21px; overflow: visible; }
.mini-clock { font-variant-numeric: tabular-nums; }

/* The loupe over the little face: a web approximation of Liquid Glass (a clear lens magnifying what's
   under it, a bright rim, a highlight up top, a darker refracted lower edge). Not Apple's material. */
.loupe {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  filter: drop-shadow(0 12px 22px rgb(70 20 0 / 0.32)) drop-shadow(0 1px 2px rgb(70 20 0 / 0.2));
  pointer-events: none;
  color: var(--menubar-ink);
}
.loupe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.loupe-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(42% 22% at 34% 12%, rgb(255 255 255 / 0.5), transparent 72%);
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / 0.85),
    inset 0 3px 7px rgb(255 255 255 / 0.65),
    inset 0 -9px 16px rgb(110 40 0 / 0.22),
    inset 0 0 0 5px rgb(255 245 235 / 0.2);
}
@media (prefers-color-scheme: dark) {
  .loupe-glass { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5), inset 0 3px 7px rgb(255 255 255 / 0.3), inset 0 -9px 16px rgb(0 0 0 / 0.35), inset 0 0 0 5px rgb(255 255 255 / 0.08); }
}
.drop-demo .file { left: 32%; top: 78px; }

/* "Drag me" and an arrow to the face, until the file's first picked up (the script draws the curve).
   The arrow's dots run toward the face and the whole hint breathes, so it reads as something to do. */
.drop-guide { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.3s; }
.drop-guide.gone { opacity: 0; }
.drop-guide span {
  position: absolute;
  color: var(--label-ink);
  text-shadow: var(--label-halo);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 16px;
  white-space: nowrap;
}
.drop-guide svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px rgb(255 240 225 / 0.85)); }
.drop-guide path { fill: none; stroke: var(--label-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guide-line { stroke-dasharray: 0.01 6; }
@media (prefers-reduced-motion: no-preference) {
  .drop-guide:not(.gone) { animation: guide-breathe 1.8s ease-in-out infinite; }
  .guide-line { animation: guide-flow 0.9s linear infinite; }
}
@keyframes guide-breathe { 50% { opacity: 0.55; } }
@keyframes guide-flow { to { stroke-dashoffset: -6.01; } }
@media (hover: none) { .drop-guide { display: none; } }
.drop-demo .file:not(.dragging) { cursor: grab; }

.drop-hint {
  position: absolute;
  right: 12px;
  bottom: 10px;
  border: 0;
  border-radius: 999px;
  height: 30px;
  padding: 0 12px;
  background: rgb(20 6 0 / 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* Learning: two screenshots, two stories. Nameshot names the Rome booking and you rename it (the same
   thumbnail, close together); then, after a gap and with nothing joining them, the Lisbon email arrives
   named your way. The little guy ends each row, plain, reacting: side-eyeing the booking, squeezed when
   you fix it, happy when it learned (as App Store frame 5). */
.learn-demo { width: 100%; display: grid; gap: 12px; font-size: 14px; }
.learn-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.learn-row.later { margin-top: 18px; }
.learn-shot img { display: block; width: 72px; height: auto; border-radius: 5px; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgb(60 30 0 / 0.1); }
/* In the row's top-right corner, beside the short lines above the name, so the name gets the full width. */
.learn-face { position: absolute; right: 0; top: 0; width: 22px; height: 22px; color: var(--ink); }
.learn-text > small:not(.learn-was) { padding-right: 30px; }
.learn-text { display: grid; gap: 3px; min-width: 0; }
.learn-row small { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.learn-row .learn-old {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent);
}
.learn-text .learn-name { margin-top: 2px; }
.learn-name {
  justify-self: start;
  padding: 7px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  font: 650 14.5px/1.3 var(--font-display);
}
.learn-name.yours { background: var(--poppy-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--poppy) 40%, transparent); }
.learn-was { margin-top: 2px; }
.learn-was s { text-decoration-thickness: 1.5px; white-space: nowrap; }
.learn-name .caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -0.12em; background: var(--poppy); }
@media (prefers-reduced-motion: no-preference) { .learn-name .caret { animation: blink 1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }
.pro-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--poppy);
  color: var(--on-poppy);
  font: 750 11px/1.4 var(--font-text);
  vertical-align: 0.25em;
}

.quiet-demo svg { width: 96px; height: 96px; color: #f2f2f0; overflow: visible; }

/* Meet the face. */
.meet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.meet p { margin-top: 18px; font-size: 19px; color: var(--ink-2); max-width: 27em; }
.chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 34em; }
.chips button {
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.chips button:hover { background: var(--surface-2); }
.chips button[aria-pressed="true"] { background: var(--poppy-soft); color: var(--poppy-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--poppy) 45%, transparent); }
.chips button:active { transform: translateY(1px); }
.meet-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 460px;
}
.meet-stage::before {
  content: "";
  position: absolute;
  inset: 4% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--poppy-soft), transparent);
  z-index: -1;
}
.meet-stage .icon-face { --size: min(340px, 62vw); }
@media (max-width: 899px) {
  .meet { grid-template-columns: 1fr; }
  .meet-stage { min-height: 360px; order: -1; }
}

/* Pricing. */
.price {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.price h2 { font-size: clamp(38px, 4.7vw, 68px); }
.price h2 span { display: block; color: var(--ink-3); }
.price-main p { margin-top: 22px; font-size: 19px; color: var(--ink-2); max-width: 28em; }
.price-main .cta-row { margin-top: 32px; }
.price .soon-pill { background: var(--ink); color: var(--bg); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: center; }
.tier { padding: 24px 22px 26px; border-radius: 28px; }
.tier h3 { font-size: 20px; letter-spacing: -0.01em; }
.tier ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.tier-free { box-shadow: inset 0 0 0 1px var(--line); }
.tier-pro { background: var(--poppy-soft); }
.tier-pro h3 { color: var(--poppy-ink); }
.tier-pro ul { color: var(--ink); }
.reqs { grid-column: 1 / -1; margin-top: 8px; font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 899px) {
  .price { grid-template-columns: 1fr; }
}
@media (max-width: 479px) { .tiers { grid-template-columns: 1fr; } }

/* Footer. */
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px var(--gutter) 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 36px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.foot-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.foot-brand img { width: 40px; height: 40px; }
.foot-brand b { display: block; font: 800 16px/1.2 var(--font-display); }
.foot-brand span { color: var(--ink-3); font-size: 13.5px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer nav a { text-decoration: none; color: var(--ink-2); }
.site-footer nav a:hover { color: var(--poppy-ink); }
.site-footer small { color: var(--ink-3); font-size: 13px; width: 100%; }