/* rekallme. — marketing site.
   Tokens are the app's own (lib/design/app_theme.dart, light palette), so the
   page and the product read as one thing. Mobile first. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-logo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* The full Latin set of the logo's font (Archivo, normal width), for text
   that should look like the wordmark. The logo file above has only its own
   letters. */
@font-face {
  font-family: "Archivo Text";
  src: url("fonts/archivo-text.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --brand: #3b4ce0;
  --brand-deep: #2b37b8;
  --ink: #1b1f3b;
  --body: #4a4f6b;
  --muted: #5c6180;
  --border: #dcdfeb;
  --ground: #f4f5f9;
  --surface: #ffffff;
  --tint: #ecedfb;

  --lavender: #eceefc;
  --mint: #e5f3ec;
  --peach: #fbece3;
  --sky: #e4effb;
  --sand: #f5f0e6;

  --radius: 28px;
  --shadow-card: 0 1px 2px rgba(27, 31, 59, .06), 0 12px 32px -8px rgba(27, 31, 59, .14);
  --shadow-pop: 0 2px 4px rgba(27, 31, 59, .06), 0 24px 48px -12px rgba(27, 31, 59, .28);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Type scale. Every piece of page text uses one of these; nothing else. */
  --t-hero: clamp(36px, 5.6vw, 68px);
  --t-h2: clamp(32px, 4.5vw, 52px);
  --t-h3: clamp(26px, 3vw, 38px);
  --t-card: 22px;
  --t-small-title: 17px;
  --t-lead: 18px;
  --t-body: 16px;
  --t-list: 15px;
  --t-ui: 15px;
  --t-meta: 14px;
  --t-label: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--body);
  font-feature-settings: "ss01", "cv11";
  background: #e6ebfb;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
/* The app's own canvas, fixed behind every section below the hero: blue
   lavender at the top of the screen, through lilac, to a soft teal and green
   floor — the same four stops the app paints (app_theme.dart). A fixed layer
   rather than background-attachment: fixed, which iOS ignores. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #dfe6ff 0%, #e8e4fc 38%, #e2ecf2 70%, #e3efe8 100%);
}
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; color: var(--ink); margin: 0; font-weight: 600; }
h1 { font-size: var(--t-hero); letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: var(--t-h2); letter-spacing: -.025em; line-height: 1.06; }
h3 { font-size: var(--t-card); letter-spacing: -.02em; line-height: 1.25; }
p { margin: 0; }
b { color: var(--ink); font-weight: 600; }
.brand { font-weight: 700; color: var(--ink); white-space: nowrap; }
/* Two-colour headings: the second half of a title in brand blue. */
.hl { color: var(--brand); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

.eyebrow { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--body); }
/* Short lines read better: a heading's paragraph never runs past ~65 characters. */
.head .lead { max-width: 36em; }
.head--center .lead { margin-inline: auto; }
.kinds .head .lead { max-width: none; }
.link { color: var(--brand); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.head h2 + .lead { margin-top: 18px; }
.head--center { margin-inline: auto; text-align: center; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; text-decoration: none; font-weight: 600; font-size: var(--t-ui);
  border-radius: 999px; padding: 14px 24px; transition: background .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--brand-deep); }
.btn--small { padding: 9px 18px; font-size: var(--t-meta); }

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 50;
  /* Part of the canvas: no ground and no line of its own. Once the page
     moves it frosts in the canvas colour, so text passing under it stays
     out of the way — still no white band, still no hairline. */
  background: transparent;
  transition: background .3s, backdrop-filter .3s;
}
.nav.is-scrolled { background: rgba(226, 231, 252, .72); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); }
.nav__row { display: flex; align-items: center; gap: 24px; height: 78px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { border-radius: 8px; }
.word { font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--ink); }
.nav .logo img { width: 42px; height: 42px; }
.nav .logo__copy { display: flex; align-items: center; gap: 18px; }
.nav .word { font-size: 2.1rem; font-weight: 900; line-height: 1; letter-spacing: -.045em; }
.word .dot { color: var(--brand); }
.nav__links { display: none; align-items: center; gap: 30px; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--body); font-weight: 500; font-size: var(--t-ui); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: none; }
.menu { margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; }
.menu summary::-webkit-details-marker { display: none; }
.menu__lines, .menu__lines::before, .menu__lines::after { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.menu__lines { position: relative; }
.menu__lines::before, .menu__lines::after { content: ""; position: absolute; left: 0; }
.menu__lines::before { top: -6px; }
.menu__lines::after { top: 6px; }
.menu[open] .menu__lines { background: transparent; }
.menu[open] .menu__lines::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu__lines::after { transform: translateY(-6px) rotate(-45deg); }
.menu__panel {
  position: absolute; right: 0; top: 54px; width: min(280px, calc(100vw - 32px));
  background: #fff; border-radius: 18px; box-shadow: var(--shadow-pop); padding: 10px;
  display: grid;
}
.menu__panel a { padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--t-ui); }
.menu__panel a:hover { background: var(--ground); }
.menu__panel hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .menu { display: none; }
}

/* ------------------------------------------------------ device frame
   iPhone 18 Pro, in points: screen 402 x 874, black bezel 13, titanium
   rim 3, so the body is 434 x 906 with a 74 pt corner. Everything below is
   a fraction of --w, the body's width, so one number sizes a phone. */

.device {
  --w: 260px;
  --u: calc(var(--w) / 434);
  position: relative;
  width: var(--w);
  aspect-ratio: 434 / 906;
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 74);
  /* Black edge, with a faint highlight where the light catches it. */
  background: linear-gradient(150deg, #3a3b40 0%, #111114 24%, #050506 50%, #111114 76%, #34353a 100%);
  box-shadow:
    0 calc(var(--u) * 34) calc(var(--u) * 64) calc(var(--u) * -20) rgba(27, 31, 59, .42),
    0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(27, 31, 59, .12);
  flex: none;
}
/* Side buttons, measured from Apple's iPhone frame (in body units, the
   body being 434 wide and 906 tall): Action 185-226 and volume 257-324 and
   344-410 on the left, the side button 281-387 on the right. They stand out
   about 3.6 units, just enough to read, and have a metallic shine.
   Behind the body, so only that sliver shows. */
.device::before, .device::after {
  content: "";
  position: absolute;
  width: calc(var(--u) * 6);
  z-index: -1;
}
.device::before {
  left: calc(var(--u) * -3.6);
  top: calc(var(--u) * 185);
  height: calc(var(--u) * 225);
  background:
    linear-gradient(90deg, #8e8d96, #55545b 40%, #2c2c31) 0 0 / 100% calc(var(--u) * 41) no-repeat,
    linear-gradient(90deg, #8e8d96, #55545b 40%, #2c2c31) 0 calc(var(--u) * 72) / 100% calc(var(--u) * 67) no-repeat,
    linear-gradient(90deg, #8e8d96, #55545b 40%, #2c2c31) 0 calc(var(--u) * 159) / 100% calc(var(--u) * 66) no-repeat;
  border-radius: calc(var(--u) * 2.2) 0 0 calc(var(--u) * 2.2);
}
.device::after {
  right: calc(var(--u) * -3.6);
  top: calc(var(--u) * 281);
  height: calc(var(--u) * 106);
  background: linear-gradient(270deg, #8e8d96, #55545b 40%, #2c2c31);
  border-radius: 0 calc(var(--u) * 2.2) calc(var(--u) * 2.2) 0;
}
/* The black bezel is the screen's own border, so the picture can never
   paint over it. */
.device__screen {
  position: relative;
  width: 100%; height: 100%;
  border: calc(var(--u) * 13) solid #0a0a0c;
  border-radius: calc(var(--u) * 71);
  overflow: hidden;
  background: #0a0a0c;
  transform: translateZ(0);
}
.device__screen > img, .device__screen > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Dynamic Island and the status icons, as one layer over the screen. */
.device__screen::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: calc(var(--u) * 54);
  z-index: 3;
  background-repeat: no-repeat;
  background-image: var(--icons), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 37'%3E%3Crect width='125' height='37' rx='18.5' fill='%23000'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 70) calc(var(--u) * 13), calc(var(--u) * 125) calc(var(--u) * 37);
  background-position: calc(var(--u) * 300) calc(var(--u) * 23), center calc(var(--u) * 11);
}
.device__screen::after {
  content: "9:41";
  position: absolute; left: 0; top: 0; z-index: 3;
  width: calc(var(--u) * 140);
  height: calc(var(--u) * 59);
  display: grid; place-items: center;
  font: 600 calc(var(--u) * 17.5) / 1 -apple-system, "SF Pro Text", Inter, sans-serif;
  letter-spacing: -.01em;
  color: var(--bar-ink);
}
.device[data-bar="light"] {
  --bar-ink: #fff;
  --icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='8' width='3' height='5' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='7.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='10' rx='1'/%3E%3Crect x='15' y='0' width='3' height='13' rx='1'/%3E%3Cpath d='M31.5 12.6 29 10a3.6 3.6 0 0 1 5 0zM31.5 7.3c-1.5 0-2.9.6-4 1.6L26 7.4a7.7 7.7 0 0 1 11 0l-1.5 1.5a5.6 5.6 0 0 0-4-1.6zM31.5 2.5c-2.8 0-5.3 1.1-7.2 2.9L22.8 3.9a12.3 12.3 0 0 1 17.4 0l-1.5 1.5a10 10 0 0 0-7.2-2.9z'/%3E%3Crect x='45.5' y='.5' width='21' height='12' rx='3.6' fill='none' stroke='%23fff' stroke-opacity='.5'/%3E%3Crect x='47' y='2' width='18' height='9' rx='2.2'/%3E%3Cpath d='M68 4.4v4.2a2.1 2.1 0 0 0 0-4.2z' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
.device[data-bar="dark"] {
  --bar-ink: #1b1f3b;
  --icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 13'%3E%3Cg fill='%231b1f3b'%3E%3Crect x='0' y='8' width='3' height='5' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='7.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='10' rx='1'/%3E%3Crect x='15' y='0' width='3' height='13' rx='1'/%3E%3Cpath d='M31.5 12.6 29 10a3.6 3.6 0 0 1 5 0zM31.5 7.3c-1.5 0-2.9.6-4 1.6L26 7.4a7.7 7.7 0 0 1 11 0l-1.5 1.5a5.6 5.6 0 0 0-4-1.6zM31.5 2.5c-2.8 0-5.3 1.1-7.2 2.9L22.8 3.9a12.3 12.3 0 0 1 17.4 0l-1.5 1.5a10 10 0 0 0-7.2-2.9z'/%3E%3Crect x='45.5' y='.5' width='21' height='12' rx='3.6' fill='none' stroke='%231b1f3b' stroke-opacity='.4'/%3E%3Crect x='47' y='2' width='18' height='9' rx='2.2'/%3E%3Cpath d='M68 4.4v4.2a2.1 2.1 0 0 0 0-4.2z' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------- hero */
 .word .dot { color: var(--brand); }
.brand--blue { color: var(--brand); }
@media (min-width: 900px) {
  }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; border-radius: 12px; padding: 10px 20px 10px 16px;
  min-width: 178px; text-decoration: none;
  border: 1px solid #a6a6a6;
}
.badge:hover { background: #1a1a1a; }
.badge svg { width: 28px; height: 28px; flex: none; }
.badge span { display: grid; line-height: 1.15; text-align: left; }
.badge small { font-size: .7rem; opacity: .85; }
.badge strong { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.play { display: inline-flex; align-items: center; gap: 12px; color: var(--brand); font-weight: 600; text-decoration: none; font-size: var(--t-ui); }
.soon { font-size: var(--t-meta); color: var(--muted); margin-top: -4px; }

/* The fan: five labelled phones over a soft circle, as in the approved
   mock-up. Static. The side phones turn outwards a little, so their metal
   edge shows and they read as real objects rather than flat pictures.
   Sized by the viewport's height too, so the whole row and its labels fit
   on the first screen. */
/* Even gaps: a turned phone looks narrower than its box, so each is pulled
   in by the width it lost. Tuned by measuring the rendered row. */

/* The phone's body: 22 slices of the phone's own outline stacked behind the
   screen, 2 points apart — 44 points deep, the real 8.25 mm of an iPhone
   against its 71.5 mm width. A turned phone shows them as one continuous
   titanium edge that follows the rounded corners: bright chamfers at the
   front and back, satin graphite between, lit from above. */
/* Polished chamfers where the frame meets the glass, front and back. */
/* Buttons: pills that stand 2.6 points proud of the frame, through the middle
   of its depth, a shade brighter than the frame. */

/* ------------------------------------------------------------ promises */
/* Coloured icons: the symbol in its colour on a soft tint of the same. Flat. */
.icon {
  --c: #3b4ce0; --bg: #eceefc;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--c); background: var(--bg);
  margin-bottom: 8px;
}
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--blue   { --c: #3b4ce0; --bg: #eceefc; }
.icon--violet { --c: #7a4fe6; --bg: #f1ebfd; }
.icon--green  { --c: #17a364; --bg: #e6f6ee; }
.icon--orange { --c: #e8731c; --bg: #fdf0e4; }
.icon--pink   { --c: #d63d72; --bg: #fce9f0; }
.icon--teal   { --c: #1590ab; --bg: #e4f4f8; }

/* --------------------------------------------------------------- steps */

.story { padding-block: clamp(56px, 7vw, 96px) clamp(72px, 10vw, 128px); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.step { display: grid; justify-items: center; text-align: center; gap: 12px; }
.step .device { --w: min(76vw, 310px); margin-bottom: 22px; }
.step h3 { font-size: var(--t-card); }
.step p { max-width: 310px; color: var(--muted); font-size: var(--t-body); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ------------------------------------------------------------ features */

.features { padding-block: clamp(72px, 11vw, 140px); }
.row { display: grid; gap: 36px; align-items: center; }
.row + .row { margin-top: clamp(72px, 10vw, 128px); }
.row__media { position: relative; }
.media {
  position: relative; overflow: hidden;
  /* Own layer, so the phone's side buttons (drawn just behind the phone)
     sit above this panel's background instead of under it. */
  isolation: isolate;
  border-radius: var(--radius);
  aspect-ratio: 1 / .92;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 9%;
  container-type: inline-size;
}
.media .device { --w: min(70cqw, 360px); }
.media--low { align-items: flex-end; padding-top: 0; padding-bottom: 7%; }
.media--lavender { background: linear-gradient(160deg, #eef0ff, #e3e6fb); }
.media--mint { background: linear-gradient(160deg, #eef8f3, #dcefe5); }
.media--peach { background: linear-gradient(160deg, #fff3ec, #f8e3d6); }
.media--sky { background: linear-gradient(160deg, #eef5ff, #dce9f9); }
.media--sand { background: linear-gradient(160deg, #faf6ee, #efe7d7); }
.row__copy { display: grid; gap: 16px; max-width: 520px; }
.row__copy h3 { font-size: var(--t-h3); letter-spacing: -.025em; line-height: 1.1; }
.row__copy p:not(.eyebrow) { font-size: var(--t-body); }
.row__copy .eyebrow { margin-bottom: 0; }

@media (min-width: 900px) {
  .row { grid-template-columns: 1.05fr 1fr; gap: clamp(48px, 7vw, 96px); }
  .row--flip .row__media { order: 2; }
}

/* --------------------------------------------------------------- bento */

.bento { padding-block: clamp(72px, 11vw, 140px); }
.bento__grid { display: grid; gap: 16px; }
.tile {
  background: #fff; border-radius: 22px; padding: 26px;
  border: 1px solid rgba(27, 31, 59, .05);
  box-shadow: 0 1px 2px rgba(27, 31, 59, .04), 0 10px 28px -14px rgba(27, 31, 59, .16);
  display: grid; gap: 8px; align-content: start;
}
.tile p { color: var(--muted); font-size: var(--t-body); }
@media (min-width: 640px) { .bento__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .bento__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* ---------------------------------------------------------------- data */

.data { padding-block: clamp(72px, 10vw, 120px); }
.data .lead { margin: 18px 0 20px; }

/* ------------------------------------------------------------- pricing */

.pricing { padding-block: clamp(72px, 10vw, 120px); text-align: center; }
.pricing .lead { margin-top: 18px; }

/* ----------------------------------------------------------------- faq */

.faq { padding-block: clamp(56px, 8vw, 100px) clamp(72px, 10vw, 120px); }
.faq header p:last-child { margin-top: 14px; color: var(--muted); }
.faq__list details { border-bottom: 1px solid var(--border); }
.faq__list summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-weight: 600; color: var(--ink); font-size: var(--t-small-title);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq__list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__list details p { padding: 0 40px 22px 0; }
.faq__list { width: 100%; max-width: 760px; margin-inline: auto; background: #fff; border-radius: 22px; padding: 4px 26px; border: 1px solid rgba(27, 31, 59, .05); box-shadow: 0 10px 28px -14px rgba(27, 31, 59, .14); }
.faq__list details:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- cta */
.cta__box {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: linear-gradient(120deg, #3b4ce0, #5a4fe6);
  border-radius: 32px; padding: clamp(32px, 6vw, 64px);
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
}
.cta__box h2 { color: #fff; font-size: var(--t-h3); }
.cta__box p { color: #d8dcff; margin-top: 10px; font-size: var(--t-lead); }
.cta__box .stores { justify-content: flex-start; margin-top: 22px; }
.cta__box .badge { border-color: rgba(255,255,255,.3); }
.cta__mark { width: clamp(64px, 10vw, 110px); height: auto; opacity: .9; flex: none; }

/* ------------------------------------------------------------- footer */

/* Footer, as on Tiimo's site: the logo with the one-line pitch, then
   columns of links (Product, Company, Help, Legal, Get rekallme.), then a
   thin bar with the copyright. */
.foot { margin-top: clamp(32px, 5vw, 64px); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(214, 219, 250, .55) 100%); }
.foot > .wrap { padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 56px); }
.foot__top .logo .word { font-size: 1.7rem; }
.foot__title { margin: 22px 0 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.foot__text { margin: 10px 0 0; max-width: 36em; color: var(--body); font-size: var(--t-body); line-height: 1.6; }
.foot__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; margin-top: clamp(36px, 5vw, 56px); }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot__head { margin: 0 0 4px; font-weight: 700; color: var(--ink); font-size: var(--t-body); }
.foot__col a:not(.btn) { text-decoration: none; color: var(--body); font-size: 15px; }
.foot__col a:not(.btn):hover { color: var(--ink); }
.foot__bar { border-top: 1px solid rgba(27, 31, 59, .08); background: rgba(214, 219, 250, .45); }
.foot__barrow { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding-block: 16px; }
.foot__barrow a { color: var(--muted); font-size: 13px; text-decoration: none; }
.foot__barrow a:hover { color: var(--ink); }
.foot__legal { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 899px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__get { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ the lift
   One card in the phone lifts straight up out of its own row: a little
   larger, with a soft shadow, the rest of the screen dimmed. Static. The
   card is real markup in the app's own measurements (--u is one point),
   placed by the row's position in the 1206 x 2622 capture. */

.lift {
  position: absolute;
  inset: calc(var(--u) * 16);
  z-index: 4;
  pointer-events: none;
}
.lift::before {
  content: ""; position: absolute; inset: 0;
  border-radius: calc(var(--u) * 58);
  background: rgba(20, 24, 60, .12);
}
.lift__card {
  position: absolute;
  left: calc(var(--x) / 1206 * 100%);
  top: calc(var(--y) / 2622 * 100%);
  width: calc(var(--cw) / 1206 * 100%);
  transform: translateY(calc(var(--u) * -6)) scale(1.06);
  transform-origin: 50% 50%;
  font-family: Inter, system-ui, sans-serif;
  font-size: calc(var(--u) * 13);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: left;
}
.lift__card p { margin: 0; }
.ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ac {
  background: #fff;
  border-radius: calc(var(--u) * 14);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(27, 31, 59, .08), 0 calc(var(--u) * 24) calc(var(--u) * 42) calc(var(--u) * -14) rgba(27, 31, 59, .42);
}
.ac { display: flex; overflow: hidden; }
.ac-main { flex: 1; min-width: 0; display: grid; gap: calc(var(--u) * 2); padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 10); }
.ac-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6); }
.ac-title { font-size: calc(var(--u) * 15); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-dots { font-size: calc(var(--u) * 16); color: var(--muted); stroke-width: 3; }

/* All: a record card */

/* Events: an event card */
.ac-date { width: calc(var(--u) * 60); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fbece3; line-height: 1.1; }
.ac-date small { font-size: calc(var(--u) * 9.5); font-weight: 600; color: var(--muted); }
.ac-date b { font-size: calc(var(--u) * 26); font-weight: 800; color: var(--ink); }
.ac-line { display: flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 12); color: var(--body); font-weight: 500; }
.ac-line .ic { font-size: calc(var(--u) * 13); }
.ic-orange { color: #e8793b; }
.ic-muted { color: var(--muted); }
.ac-fromline { font-size: calc(var(--u) * 10); color: var(--muted); margin-top: calc(var(--u) * 3); }
.ac-fromline b { color: var(--brand); font-weight: 600; }

/* Folders: a folder card */

/* Ask AI: the answer and its source */

/* Save: where to save, and the four ways in */

/* Record: the details block */

/* Type: the composer */

/* ------------------------------------------------------------- kinds
   What you can save: six soft circles, each with its icon, names beneath. */
.kinds { padding-block: clamp(64px, 9vw, 112px) 0; }
.kinds .head { margin-bottom: clamp(36px, 5vw, 56px); }
.kinds .head .lead { margin-top: 20px; }
@media (min-width: 900px) { .kinds .head { max-width: 1100px; } .kinds .head .lead { white-space: nowrap; } }
.kinds__pre { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0 0 16px; }
.kinds__row {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1040px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 2vw, 28px);
}
.kind { display: grid; justify-items: center; gap: 14px; }
.kind__dot {
  width: min(100%, 132px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1;
  background: var(--kc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.kind__svg { width: 1.25em; height: 1.25em; overflow: visible; }
.kind__files-art, .kind__receipts-art, .kind__notes-art, .kind__events-art, .kind__screenshots-art, .kind__captures-art {
  display: block; width: 86%; height: auto; max-height: 86%; object-fit: contain;
  align-self: center; justify-self: center;
}
.kind__name { font-weight: 500; color: var(--ink); font-size: var(--t-list); }
.kind--sky   { --kc: #e3edff; }
.kind--mint  { --kc: #e1f5e6; }
.kind--sand  { --kc: #fcf1dc; }
.kind--pink  { --kc: #fbe6f4; }
.kind--lav   { --kc: #ece6fd; }
.kind--peach { --kc: #fde8dc; }
@media (max-width: 760px) {
  .kinds__row { grid-template-columns: repeat(3, 1fr); row-gap: 28px; max-width: 360px; }
  .kinds__row .kind:nth-child(1) { order: 1; }
  .kinds__row .kind:nth-child(2) { order: 3; }
  .kinds__row .kind:nth-child(3) { order: 2; }
  .kinds__row .kind:nth-child(4) { order: 4; }
  .kinds__row .kind:nth-child(5) { order: 5; }
  .kinds__row .kind:nth-child(6) { order: 6; }
  .kind__dot { width: 96px; height: 96px; font-size: 2.4rem; }
}

/* -------------------------------------------------------------- flow
   Everything flows into rekallme. AI and comes out organised. The only
   moving section on the page, and it holds still with Reduce Motion. */
.flow { padding-block: 0 clamp(24px, 3vw, 40px); }
.flow__wrap { display: grid; justify-items: center; max-width: 1440px; }
.flow__in, .flow__out { display: block; width: 100%; max-width: 1040px; overflow: visible; }
.flow__in { height: clamp(120px, 14vw, 190px); }
/* Phones: three lines, one from each column of circles, meeting at the orb. */
.flow__in--narrow { display: none; height: 90px; width: 100%; max-width: 300px; }
.flow__out { height: clamp(50px, 6vw, 80px); }
.flow__in path, .flow__out path {
  fill: none; stroke: #8f99ea; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 2 12; vector-effect: non-scaling-stroke;
}

.orb { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-block: -6px; }
.orb__core {
  position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  background: radial-gradient(circle at 35% 30%, #6b7bff, #3b4ce0 60%, #2f3cc6);
  box-shadow: 0 24px 50px -16px rgba(59, 76, 224, .7), inset 0 2px 0 rgba(255,255,255,.25);
  color: #fff;
}
.orb__core svg { width: 40px; height: 40px; fill: #fff; stroke: none; }
.orb__core b { color: #fff !important; font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; }
.orb__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(59, 76, 224, .35); background: rgba(59, 76, 224, .06);
}
.orb__ring:nth-child(1) { transform: scale(1.25); }
.orb__ring:nth-child(2) { transform: scale(1.55); opacity: .7; }
.orb__ring:nth-child(3) { transform: scale(1.9); opacity: .45; }

.flow__stage { width: 100%; max-width: 1300px; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
.flow__phone { display: grid; justify-items: center; gap: 18px; }
.flow__phone .device { --w: clamp(240px, 22vw, 300px); }
.flow__track { position: absolute; inset: 0; display: flex; width: 600%; height: 100%; }
.flow__track img { width: calc(100% / 6); height: 100%; object-fit: cover; object-position: top; flex: none; }
.flow__tabs { display: flex; gap: 6px; background: rgba(255,255,255,.6); padding: 5px; border-radius: 999px; }
.flow__tabs span { padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); background: #fff; }
.flow__tabs span:nth-child(3) { background: var(--brand); color: #fff; }

.flow__col { position: relative; display: grid; gap: 22px; align-content: center; min-height: 330px; }
.flow__col > * { display: none; }
.flow__col > .is-on { display: flex; }
.flow__col > * { width: min(100%, 410px); }
.flow__col--l { justify-items: end; }
.flow__col--r { justify-items: start; }

@media (max-width: 900px) {

  .flow__out { display: none; }
  .flow__stage { grid-template-columns: 1fr; justify-items: center; margin-top: 28px; }
  .flow__phone { order: -1; }
  .flow__col { min-height: 0; width: min(100%, 360px); }
  .flow__col--l, .flow__col--r { justify-items: center; }
  .flow__col > * { width: 100%; }
  .flow__col > .is-on ~ .is-on ~ .is-on { display: none; }
  .flow__stage { gap: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .flow__in path, .flow__out path { animation: flow-dash 1.1s linear infinite; }
  .orb__ring { animation: orb-pulse 3.6s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; transform: scale(1); }
  .orb__ring:nth-child(2) { animation-delay: 1.2s; }
  .orb__ring:nth-child(3) { animation-delay: 2.4s; }
  .orb__core { animation: orb-breathe 3.6s ease-in-out infinite; }
  .flow__track { animation: flow-tabs 13.5s cubic-bezier(.65,0,.35,1) infinite; }
  .flow__tabs span:nth-child(3) { background: #fff; color: var(--muted); }
  .flow__col > .is-in { animation: fc-in .6s cubic-bezier(.2,.9,.3,1.25) both; }
}
@keyframes flow-dash { to { stroke-dashoffset: -14; } }
@keyframes orb-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes fc-in { from { opacity: 0; translate: 0 12px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes flow-tabs {
  0.00% { transform: translateX(-0.0000%); }
  16.30% { transform: translateX(-0.0000%); }
  20.00% { transform: translateX(-16.6667%); }
  36.30% { transform: translateX(-16.6667%); }
  40.00% { transform: translateX(-33.3333%); }
  56.30% { transform: translateX(-33.3333%); }
  60.00% { transform: translateX(-50.0000%); }
  76.30% { transform: translateX(-50.0000%); }
  80.00% { transform: translateX(-66.6667%); }
  96.30% { transform: translateX(-66.6667%); }
  100% { transform: translateX(-83.3333%); }
}
@media (prefers-reduced-motion: no-preference) {
.flow__tabs span:nth-child(1) { animation: tab0 13.5s linear infinite; }
@keyframes tab0 { 0%, 0.00% { background: #fff; color: var(--muted); } 0.00%, 18.15% { background: var(--brand); color: #fff; } 18.16%, 100% { background: #fff; color: var(--muted); } }
.flow__tabs span:nth-child(2) { animation: tab1 13.5s linear infinite; }
@keyframes tab1 { 0%, 19.99% { background: #fff; color: var(--muted); } 20.00%, 38.15% { background: var(--brand); color: #fff; } 38.16%, 100% { background: #fff; color: var(--muted); } }
.flow__tabs span:nth-child(3) { animation: tab2 13.5s linear infinite; }
@keyframes tab2 { 0%, 39.99% { background: #fff; color: var(--muted); } 40.00%, 58.15% { background: var(--brand); color: #fff; } 58.16%, 100% { background: #fff; color: var(--muted); } }
.flow__tabs span:nth-child(4) { animation: tab3 13.5s linear infinite; }
@keyframes tab3 { 0%, 59.99% { background: #fff; color: var(--muted); } 60.00%, 78.15% { background: var(--brand); color: #fff; } 78.16%, 100% { background: #fff; color: var(--muted); } }
.flow__tabs span:nth-child(5) { animation: tab4 13.5s linear infinite; }
@keyframes tab4 { 0%, 79.99% { background: #fff; color: var(--muted); } 80.00%, 98.15% { background: var(--brand); color: #fff; } 98.16%, 100% { background: #fff; color: var(--muted); } }
}

/* The app's own cards, at the app's proportions (375 pt wide there). Each
   slot sits at its own small angle and offset (--r, --dx from site.js) so
   the column reads as cards popping out, not a list. */
.ar, .ae {
  position: relative; overflow: hidden; box-sizing: border-box;
  background: #fff; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(27,31,59,.05), 0 18px 36px -16px rgba(27,31,59,.28);
  transform: translateX(var(--dx, 0px)) rotate(var(--r, 0deg));
  font-family: Inter, system-ui, sans-serif; color: var(--ink); text-align: left;
}
.ar svg, .ae svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ar__side, .ae__date { width: 78px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--tint); }
.ar__side { gap: 8px; padding: 10px 0; }
.ar__date { font-size: 9px; line-height: 1; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ar__icon { flex: 1; width: 100%; min-height: 40px; display: grid; place-items: center; }
.ar__format { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ar__format--image { width: 32px; height: 32px; color: var(--muted); }
.ar__side small { font-size: 10.5px; line-height: 1.2; color: var(--muted); text-align: center; }
.ar__side small b { display: block; font-weight: 700; color: var(--tone); }
.ar__main, .ae__main { flex: 1; min-width: 0; padding: 13px 14px 12px 16px; display: grid; gap: 2px; }
.ar__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar__top b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar__more { width: 18px; height: 18px; color: var(--muted); stroke-width: 3; }
.ar__co { font-size: 14px; font-weight: 600; color: var(--body); }
.ar__main p { margin: 1px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar__chips { display: flex; align-items: center; gap: 6px; margin-top: 8px; overflow: hidden; }
.ar__chips span { flex: none; font-size: 12px; font-weight: 500; color: var(--body); border: 1px solid #d9dce8; border-radius: 99px; padding: 4px 11px; }
.ar__chips i { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eef0f7; display: grid; place-items: center; color: var(--muted); }
.ar__chips i svg { width: 14px; height: 14px; }
.ae__date { line-height: 1.1; gap: 2px; }
.ae__date small { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.ae__date b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.ae__line { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-top: 3px; }
.ae__cal { width: 15px; height: 15px; color: #e0701c; }
.ae__bell { width: 15px; height: 15px; color: var(--muted); }
.ae__from { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.ae__from b { font-weight: 600; color: var(--tone); }
.ar--green  { --tint: #eaf5ee; --tone: #2f8f5b; }
.ar--violet { --tint: #efecfb; --tone: #6a5bd6; }
.ar--teal   { --tint: #e6f2f3; --tone: #2a7f8f; }
.ar--red    { --tint: #fbecec; --tone: #c8453f; }
.ar--blue   { --tint: #eaeefb; --tone: #3b4ce0; }
.ae--lav    { --tint: #efedfb; --tone: #6a5bd6; }
.ae--peach  { --tint: #f9ece4; --tone: #c65a1e; }
.ae--pink   { --tint: #f9e9f1; --tone: #b83d77; }
.ae--mint   { --tint: #e8f5ec; --tone: #2f8f5b; }
.ae--sky    { --tint: #e8effb; --tone: #3b4ce0; }
.flow__col { min-height: 0; gap: 34px; }
.flow__col > * { zoom: .74; }
@media (max-width: 1100px) {
  .flow__stage { grid-template-columns: 1fr; justify-items: center; margin-top: 28px; gap: 20px; }
  .flow__phone { order: -1; }
  .flow__col { min-height: 0; width: min(100%, 420px); justify-items: center; }
  .flow__col > * { width: 100%; }
  .flow__col > .is-on ~ .is-on ~ .is-on { display: none; }
  .flow__out { display: none; }
}
@media (max-width: 1100px) {
  .flow__col > * { width: 92%; --dx: 0px !important; }
}

/* Status pills popping beside the output line. */
.flow__mid { position: relative; width: 100%; max-width: 760px; height: 150px; display: flex; justify-content: center; }
.flow__mid .flow__out { display: block !important; width: 20px; height: 100%; }
.flow__stage { margin-top: 0; }
.pills { position: absolute; inset: 0; pointer-events: none; }
.pill-note {
  position: absolute; left: 50%; top: 0;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px 7px 7px; border-radius: 999px;
  background: #fff; font-size: .88rem; font-weight: 650; color: var(--ink);
  box-shadow: 0 1px 2px rgba(27,31,59,.06), 0 12px 24px -12px rgba(27,31,59,.35);
  opacity: 0; transform: translate(var(--px, -50%), var(--py, 20px)) scale(.6);
}
.pill-note i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); }
.pill-note svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pill-note--green  { --pc: #1f9a62; }
.pill-note--orange { --pc: #e0701c; }
.pill-note--blue   { --pc: #3b4ce0; }
.pill-note--violet { --pc: #7a4fe6; }
.pill-note--pink   { --pc: #d63d72; }
.pill-note--teal   { --pc: #1590ab; }
.pill-note.is-pop { animation: pill-pop 2.6s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes pill-pop {
  0%   { opacity: 0; transform: translate(var(--px), calc(var(--py) + 12px)) scale(.6); }
  14%  { opacity: 1; transform: translate(var(--px), var(--py)) scale(1.06); }
  22%  { transform: translate(var(--px), var(--py)) scale(1); }
  78%  { opacity: 1; transform: translate(var(--px), calc(var(--py) - 6px)) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 18px)) scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .pill-note:nth-child(1) { opacity: 1; transform: translate(24px, 50px); }
}

/* The hero phones fade out over their lower quarter (the image carries ~5%
   of shadow room below the phones), and the next section starts where they
   melt away, so the first screen is not all phone. */
.kinds { position: relative; padding-top: clamp(40px, 7vh, 80px); }

@media (min-width: 1101px) { .flow__col--l { gap: 52px; } }

/* Phones: the cards come first, above the phone, alternating record and
   event (order set in site.js), two of each. */
@media (max-width: 1100px) {
  .flow__stage { display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .flow__col { display: contents; }
  .flow__col > .is-on { width: min(118vw, 560px); }
  .flow__phone { order: 20; margin-top: 12px; }
}

/* Features heading on one line on desktop. */
@media (min-width: 900px) {
  .features .head { max-width: 980px; }
}

/* The lower half of the screen, rising from the bottom of its card: the
   phone's side and bottom bezel, the top faded into the card. */
.media--half { align-items: flex-end; aspect-ratio: auto; padding: 40px 0 32px; }

/* The middle of a phone: its two side bezels and the screen between, both
   ends fading into the card (the recording has no top or bottom bar). */
.media--mid { align-items: center; padding: 0; }

/* The wordmark and tagline share a text block beside the logo mark. */
.nav__tag {
  display: inline-block; padding-left: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  border-left: 1px solid rgba(27, 31, 59, .18);
  font-size: .95rem; font-weight: 500; color: var(--muted); white-space: nowrap; line-height: 1.3;
}
@media (min-width: 900px) {
  .nav__row { gap: 16px; }
  .nav__links { margin-left: auto; }
}

.nav .logo { flex: none; }
@media (max-width: 899px) {
  .nav__row { gap: 10px; }
  .nav .logo { gap: 10px; }
  .nav .logo img { width: 44px; height: 44px; }
  .nav .logo__copy { flex-direction: column; align-items: flex-start; gap: 1px; }
  .nav .word { font-size: 1.7rem; }
  .nav__tag {
    display: block; padding: 0; border: 0; overflow: visible;
    font-size: .74rem; line-height: 1.2;
  }
  .menu { margin-left: auto; }
}
@media (max-width: 374px) { .nav .word { font-size: 1.55rem; } }

.kinds__title { font-size: var(--t-hero); }
.kinds__title .nowrap-d { display: block; white-space: nowrap; }
@media (max-width: 760px) {
  /* Bigger on phones and still two lines: the heading spans the width
     minus a 14px margin each side, sized so "Stop searching everywhere."
     just fits it. */
  .kinds__title { font-size: min(calc((100vw - 28px) / 13.2), 2.4rem); letter-spacing: -.03em;
    margin-inline: calc(14px - (100vw - 100%) / 2); line-height: 1.06; }
}

@media (max-width: 760px) {
  .kinds__row { max-width: 300px; row-gap: 20px; }
  .kind { gap: 8px; }
  .kind__dot { width: 76px; height: 76px; font-size: 1.9rem; }
  .kind__name { font-size: var(--t-meta); }
  .orb, .orb__core { width: 116px; height: 116px; }
  .orb__core svg { width: 30px; height: 30px; }
  .orb__core b { font-size: .88rem; }
}

/* Search section: two phones side by side. */
.story .head .lead { margin-top: 12px; }
@media (min-width: 900px) {
  .steps--two { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 96px; }
}

/* ------------------------------------------------------------ detail */
.detail { padding-block: clamp(40px, 6vw, 96px) clamp(72px, 10vw, 128px); }
.detail__grid { display: grid; gap: 40px; align-items: center; }
.detail__media { display: grid; justify-items: center; }
.detail__media .device { --w: min(76vw, 320px); }
.detail__copy { display: grid; gap: 18px; max-width: 520px; }
.detail__copy .lead { margin: 0; }
.detail__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; }
.detail__list li { display: flex; gap: 16px; align-items: flex-start; }
.detail__list .icon { width: 44px; height: 44px; border-radius: 12px; margin: 0; flex: none; }
.detail__list .icon svg { width: 22px; height: 22px; }
.detail__list li > span:last-child { display: grid; gap: 2px; color: var(--muted); font-size: var(--t-list); line-height: 1.5; padding-top: 1px; }
.detail__list b { color: var(--ink); font-size: var(--t-small-title); font-weight: 600; }
@media (min-width: 900px) {
  .detail__grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 96px); }
  .detail__media { justify-items: end; }
}
@media (max-width: 899px) {
  .detail__copy { order: -1; text-align: center; justify-items: center; }
  .detail__list { text-align: left; max-width: 420px; }
}

/* Phones: the output line carries on behind the cards down to the phone. */
@media (max-width: 1100px) {
  .flow__stage { --pw: 240px; position: relative; margin-top: 0 !important; padding-top: 18px; }
  .flow__phone .device { --w: var(--pw); }
  .flow__stage::before {
    content: ""; position: absolute; left: 50%; top: -2px; width: 2.5px; margin-left: -1.25px;
    bottom: calc(var(--pw) * 906 / 434 + 4px);
    background: repeating-linear-gradient(180deg, #8f99ea 0 2.5px, transparent 2.5px 14px);
    border-radius: 2px; z-index: 0;
  }
  .flow__stage > * { position: relative; z-index: 1; }
  .flow__col > .is-on { position: relative; z-index: 1; }
  .flow__mid { margin-bottom: 0; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .flow__stage::before { animation: flow-line 1.1s linear infinite; }
}
@keyframes flow-line { to { background-position: 0 14px; } }

.features--one { padding-block: clamp(48px, 7vw, 104px); }

/* ------------------------------------------------------------- theme
   One phone that switches between the two themes, and the app's own two
   Appearance tiles beside it. Starts on Dark. */
.media--night { background: linear-gradient(160deg, #e9ebf8, #d6daf0); aspect-ratio: 1 / 1.02; }
.theme__shot { transition: opacity .4s ease; }
.theme__shot--dark { opacity: 0; }
.theme.is-dark .theme__shot--dark { opacity: 1; }
/* The light picture hides once the dark one has faded in, so none of its
   edge shows round the dark one; going back it is there again at once. */
.theme__shot:not(.theme__shot--dark) { transition: none; }
.theme.is-dark .theme__shot:not(.theme__shot--dark) { opacity: 0; transition: opacity 0s .4s; }
.tt__group { display: flex; gap: 14px; margin-top: 10px; }
.tt {
  appearance: none; cursor: pointer; font: inherit;
  display: grid; gap: 10px; justify-items: center;
  width: 128px; padding: 12px 12px 10px; border-radius: 18px;
  background: #fff; border: 1.5px solid rgba(27, 31, 59, .08);
  box-shadow: 0 1px 2px rgba(27,31,59,.05), 0 10px 24px -14px rgba(27,31,59,.25);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.tt.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 76, 224, .15), 0 10px 24px -14px rgba(27,31,59,.25); }
.tt:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tt__mini { width: 100%; aspect-ratio: 1.35; border-radius: 10px; padding: 7px; box-sizing: border-box; display: grid; align-content: start; gap: 5px; }
.tt__mini i { display: block; height: 7px; border-radius: 4px; }
.tt__mini .tt__bar { height: 12px; margin: -7px -7px 2px; border-radius: 10px 10px 0 0; }
.tt__mini .tt__row--s { width: 60%; }
.tt--light .tt__mini { background: #f4f5f9; }
.tt--light .tt__bar { background: #3b4ce0; }
.tt--light .tt__row { background: #fff; box-shadow: 0 0 0 1px #e3e6f0; }
.tt--dark .tt__mini { background: #1a1b24; }
.tt--dark .tt__bar { background: #21232e; }
.tt--dark .tt__row { background: #2a2c3a; }
.tt__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); font-size: var(--t-meta); }
.tt__tick { width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.tt.is-on .tt__tick { opacity: 1; }
@media (max-width: 899px) { .tt__group { justify-content: flex-start; } }

.theme__head { display: flex; align-items: center; gap: 14px; }
.theme__head .eyebrow { margin: 0; }
.tsw {
  position: relative; flex: none; width: 64px; height: 34px; border-radius: 99px; cursor: pointer;
  border: 0; padding: 0; background: #dfe3f4; transition: background .45s ease;
  box-shadow: inset 0 1px 3px rgba(27,31,59,.15);
}
.tsw svg { position: absolute; top: 9px; width: 16px; height: 16px; fill: none; stroke: #8a90ad; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s; }
.tsw__sun { left: 9px; }
.tsw__moon { right: 9px; }
.tsw__knob {
  position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(27,31,59,.3);
  transition: transform .45s cubic-bezier(.3,1.4,.5,1), background .45s;
}
.theme.is-dark .tsw { background: #2b2e45; }
.theme.is-dark .tsw__knob { transform: translateX(30px); background: #3b4ce0; }
.theme.is-dark .tsw__moon { stroke: #fff; opacity: 0; }
.theme:not(.is-dark) .tsw__sun { opacity: 0; }
.tsw:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

@media (max-width: 899px) { .media--night { aspect-ratio: 1 / 1.02; } .media--night .device { --w: 64cqw; } }

/* ------------------------------------------------------------ export
   The app's own export sheet, running: both bars fill with their
   percentages, then it turns into "Exported successfully". Loops while
   on screen (site.js); with Reduce Motion it rests on the finished state. */
.exp { padding-block: clamp(48px, 7vw, 104px); }
.exp__grid { align-items: center; }
.exp .eyebrow, .share .eyebrow { margin-bottom: 0; }
.exp__stage {
  position: relative; display: grid; place-items: center;
  min-height: 420px; border-radius: var(--radius);
  background: linear-gradient(160deg, #eef6f1, #dfeee6);
  padding: 32px 20px;
}
.exp__card {
  position: relative; width: min(100%, 380px); min-height: 318px;
  background: #fff; border-radius: 24px; padding: 24px 22px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(27,31,59,.05), 0 30px 60px -24px rgba(27,31,59,.35);
}
.exp__run, .exp__done { transition: opacity .45s ease, transform .5s cubic-bezier(.2,.9,.3,1); }
.exp__done { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 22px; text-align: center; opacity: 0; transform: scale(.94); pointer-events: none; }
.exp__stage.is-done .exp__run { opacity: 0; transform: scale(.96); }
.exp__stage.is-done .exp__done { opacity: 1; transform: none; }
.exp__title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: 18px; }
.exp__spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #dfe3f4; border-top-color: var(--brand); }
.exp__row { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.exp__row + .exp__row { border-top: 1px solid #eef0f5; }
.exp__ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.exp__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.exp__ic--green { background: #e6f6ee; color: #1f9a62; }
.exp__ic--blue { background: #eceefc; color: #3b4ce0; }
.exp__meta { flex: 1; min-width: 0; display: grid; gap: 6px; }
.exp__meta b { font-size: .98rem; color: var(--ink); }
.exp__meta small { font-size: .8rem; color: var(--muted); }
.exp__bar { display: block; height: 6px; border-radius: 99px; background: #eef0f7; overflow: hidden; }
.exp__bar i { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #5b6bff, #3b4ce0); }
.exp__row:nth-child(2) .exp__bar i { background: linear-gradient(90deg, #3fcf8e, #1f9a62); }
.exp__pct { font-style: normal; font-weight: 700; font-size: .95rem; color: var(--ink); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.exp__tick { width: 58px; height: 58px; border-radius: 50%; background: #1f9a62; display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 0 0 8px rgba(31,154,98,.14); }
.exp__tick svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.exp__done > b { font-size: 1.15rem; color: var(--ink); }
.exp__done > small { font-size: .88rem; color: var(--muted); }
.exp__files { display: grid; gap: 8px; margin-top: 14px; width: 100%; }
.exp__file { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #f5f6fb; font-size: .88rem; font-weight: 600; color: var(--ink); text-align: left; }
.exp__file .exp__ic { width: 32px; height: 32px; border-radius: 9px; }
.exp__file .exp__ic svg { width: 17px; height: 17px; }
.exp__file em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--muted); font-size: .8rem; }
@media (prefers-reduced-motion: no-preference) {
  .exp__spin { animation: exp-spin .9s linear infinite; }
  .exp__stage.is-done .exp__tick { animation: exp-pop .6s cubic-bezier(.2,.9,.3,1.4) both; }
}
@keyframes exp-spin { to { transform: rotate(360deg); } }
@keyframes exp-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { .exp .detail__copy { order: 0; } }
@media (max-width: 899px) { .exp__stage { min-height: 360px; } }


/* ------------------------------------------------------------- share
   A saved item in the middle, the places it can go around it. Lines flow
   out, and each app in turn pops and ticks. */
.share { padding-block: clamp(48px, 7vw, 104px); }
@media (max-width: 899px) { .share .detail__copy { order: -1; } }

/* Share, v2: one share button, one line branching to where it can go. */
.sh2 { position: relative; width: 100%; max-width: 500px; aspect-ratio: 500 / 420; justify-self: center;
  border-radius: var(--radius); background: linear-gradient(160deg, #eef0ff, #e1e5fb); container-type: inline-size; }
.sh2__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sh2__lines path { fill: none; stroke: #8f99ea; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 12; vector-effect: non-scaling-stroke; }
.sh2__share { position: absolute; left: 22%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 10px; z-index: 2; }
.sh2__share i { width: 23cqw; height: 23cqw; max-width: 116px; max-height: 116px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #6b7bff, #3b4ce0 60%, #2f3cc6); color: #fff;
  box-shadow: 0 22px 44px -16px rgba(59,76,224,.7), inset 0 2px 0 rgba(255,255,255,.25); position: relative; }
.sh2__share i::before, .sh2__share i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(59,76,224,.35); }
.sh2__share svg, .sh2__app svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh2__share svg { width: 42%; height: 42%; }
.sh2__share small { font-weight: 700; font-size: .95rem; color: var(--ink); }
.sh2__app { position: absolute; left: 59%; translate: 0 -50%; display: flex; align-items: center; gap: 12px; z-index: 2; }
.sh2__app i { width: 12.5cqw; height: 12.5cqw; max-width: 58px; max-height: 58px; min-width: 40px; min-height: 40px; border-radius: 28%;
  display: grid; place-items: center; color: #fff; background: var(--ac); box-shadow: 0 10px 20px -10px var(--ac), inset 0 1px 0 rgba(255,255,255,.3); }
.sh2__app svg { width: 52%; height: 52%; }
.sh2__app small { font-size: clamp(.8rem, 3.4cqw, .98rem); font-weight: 650; color: var(--ink); white-space: nowrap; }
.sh2__app:last-child small { color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .sh2__lines path { animation: flow-dash 1.1s linear infinite; }
  .sh2__share i::before { animation: sh2-ring 3.2s cubic-bezier(.2,.6,.3,1) infinite; }
  .sh2__share i::after { animation: sh2-ring 3.2s cubic-bezier(.2,.6,.3,1) 1.6s infinite; }
  .sh2__app i { animation: sh2-pop 4.8s ease-in-out infinite; animation-delay: calc(var(--k) * .6s); }
}
@keyframes sh2-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes sh2-pop { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.1); } 16% { transform: scale(1); } }
@media (min-width: 900px) { .share .sh2 { justify-self: start; } }

.sh2__share i::before, .sh2__share i::after { opacity: 0; }

/* Real app marks (Simple Icons, CC0 paths), on tiles like the app icons. Fixed. */
.sh2__app i { animation: none !important; }
.sh2__app .sh2__logo { fill: currentColor; stroke: none; width: 56%; height: 56%; }
.sh2__app--wa i { background: #25d366; color: #fff; box-shadow: 0 10px 20px -10px #25d366; }
.sh2__app--im i { background: #fff; box-shadow: 0 10px 20px -10px #0cbd2a; overflow: hidden; }
.sh2__app--im .sh2__logo--full { width: 100%; height: 100%; }
.sh2__app--gm i { background: #fff; color: #ea4335; box-shadow: 0 10px 20px -12px rgba(27,31,59,.35), 0 0 0 1px rgba(27,31,59,.06); }
.sh2__app--more i { background: #8a90ad; color: #fff; }
.sh2__app--more svg { fill: currentColor; stroke: none; width: 52%; height: 52%; }

/* Desktop: the lower sections keep each supporting line to one line. */
@media (min-width: 900px) {
  #theme .row__copy p:not(.eyebrow), .exp .lead, .share .lead,
  .exp .detail__list li > span:last-child, .share .detail__list li > span:last-child { white-space: nowrap; }
}

/* Phones: titles sit above their screens; the detail points are centred. */
@media (max-width: 899px) {

  .features--one .row { gap: 12px; }
  .features--one .row__copy { display: contents; }
  .features--one .row__copy > .eyebrow,
  .features--one .row__copy > h3,
  .features--one .row__copy > .theme__head { order: 1; }
  .features--one .row__copy > .theme__head .eyebrow { margin: 0; }
  .features--one .row__media { order: 2; margin: 12px 0 8px; }
  .features--one .row__copy > p:not(.eyebrow) { order: 3; }
  .features--one .row__copy > .eyebrow { margin-bottom: 0; }

  .detail .detail__list { justify-self: center; width: fit-content; max-width: 100%; margin-inline: auto; }
}

/* Search steps: the title above its phone, on every screen. */
.steps .step h3 { order: 1; }
.steps .step .device { order: 2; margin: 8px 0 16px; }
.steps .step p { order: 3; }

.steps .step { align-content: start; }

/* Phones: the reminders and theme sections centred like the others. */
@media (max-width: 899px) {
  .features--one .row { justify-items: center; text-align: center; }
  .features--one .theme__head { justify-content: center; }
  .features--one .row__media { width: 100%; }
}


/* And more: six small cards. Desktop: icon above, one line each.
   Phones: icon beside the words, one column, compact. */
.bento .head { margin-bottom: clamp(32px, 4vw, 52px); }
.bento__grid { max-width: 1080px; margin-inline: auto; }
.tile { padding: 26px 26px 24px; gap: 16px; border-radius: 20px; }
.tile .icon { width: 48px; height: 48px; border-radius: 14px; margin: 0; }
.tile .icon svg { width: 24px; height: 24px; stroke-width: 1.9; }
.tile__txt { display: grid; gap: 4px; min-width: 0; }
.tile h3 { font-size: var(--t-small-title); letter-spacing: -.01em; }
.tile p { color: var(--muted); font-size: var(--t-list); line-height: 1.5; }
.tile p .brand { font-weight: 700; }
.tile p { white-space: normal; overflow-wrap: break-word; }
@media (max-width: 639px) {
  .bento__grid { gap: 12px; }
  .tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
  .tile .icon { width: 44px; height: 44px; flex: none; }
}

/* Phones: the rekallme. line sits a little lower and never wider than the
   headline's first line ("Stop searching everywhere." ≈ 13.1em of it). */
@media (max-width: 760px) {
  .kinds .head { display: grid; justify-items: center; }
  .kinds__pre { margin-bottom: 12px; }
  .kinds .head .lead {
    margin-top: 22px;
    max-width: calc(min(6.5vw, 2rem) * 12.9);
    text-wrap: balance;
  }
}

/* ----------------------------------------------------------- your data
   Five plain promises, each a card with one brand-blue icon. */
/* Compact information cards use the same type and palette as the features. */
.data { padding-block: clamp(48px, 6vw, 76px); }
.data .head { margin-bottom: clamp(32px, 4vw, 52px); }
.data .head .lead, .faq .head .lead { margin-top: 16px; }
.facts2 { list-style: none; margin: 0 auto; padding: 0; max-width: 940px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.fact { grid-column: span 2; display: grid; grid-template-columns: 32px minmax(0, 1fr);
  align-content: start; align-items: center; row-gap: 14px; column-gap: 12px; padding: 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(27,31,59,.035); }
.fact:nth-child(4) { grid-column: 2 / span 2; }
.fact__ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--lavender); color: var(--brand); }
.fact__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.fact > div { display: contents; }
.fact h3 { font-size: var(--t-small-title); letter-spacing: -.01em; margin: 0; }
.fact__points { list-style-type: disc; grid-column: 1 / -1; margin: 0; padding-left: 28px; color: var(--body); font-size: var(--t-meta); line-height: 1.5; display: grid; gap: 8px; }
.fact__points li { padding-left: 2px; }
.fact__points li::marker { color: var(--muted); font-size: .7em; }
.data__more { text-align: center; margin-top: 22px; font-size: var(--t-meta); }
@media (max-width: 850px) {
  .facts2 { max-width: 660px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fact, .fact:nth-child(4) { grid-column: span 2; }
  .fact:last-child { grid-column: 2 / span 2; }
}
@media (max-width: 540px) {
  .facts2 { grid-template-columns: 1fr; gap: 10px; }
  .fact, .fact:nth-child(4), .fact:last-child { grid-column: 1; padding: 16px; }
}

/* ----------------------------------------------------------------- faq */
.faq .head { margin-bottom: clamp(28px, 4vw, 44px); }
.faq__list { max-width: 820px; padding: 6px 28px; }
.faq__list summary { font-size: var(--t-small-title); padding: 20px 44px 20px 0; }
.faq__list summary::after {
  content: ""; border: 0; transform: none; width: 26px; height: 26px; right: 0; top: 50%; margin-top: -13px;
  border-radius: 50%; background: #eceefc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4ce0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .3s ease;
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { padding: 0 44px 22px 0; color: var(--muted); line-height: 1.6; margin: -4px 0 0; }
@media (max-width: 639px) {
  .faq__list { padding: 2px 18px; }
  .faq__list summary { font-size: var(--t-body); padding: 17px 38px 17px 0; }
  .faq__list details p { padding: 0 8px 18px 0; font-size: var(--t-list); }
}

/* Pricing: the title, then the download card under it. */
.pricing .cta__box { margin: clamp(28px, 4vw, 44px) auto 0; width: 100%; max-width: 980px; text-align: left; }
.cta__box h2 { color: #fff; }
.cta__box .badge { min-width: 0; }
@media (max-width: 639px) {
  .pricing .cta__box { flex-direction: column; text-align: center; gap: 18px; padding: 32px 22px 30px; border-radius: 26px; }
  .pricing .cta__box > div { display: grid; justify-items: center; }
  .cta__mark { order: -1; width: 56px; }
  .cta__box h2 { font-size: var(--t-card); }
  .cta__box p { font-size: var(--t-body); margin-top: 6px; }
  .cta__box .stores { justify-content: center; flex-wrap: nowrap; gap: 10px; margin-top: 20px; width: 100%; }
  .cta__box .badge { flex: 1 1 0; justify-content: center; padding: 9px 10px; gap: 8px; }
  .cta__box .badge svg { width: 22px; height: 22px; }
  .cta__box .badge strong { font-size: 1rem; }
  .cta__box .badge small { font-size: .62rem; }
}
@media (max-width: 639px) {
  .cta__box .badge { padding: 9px 8px; gap: 7px; }
  .cta__box .badge strong { font-size: .9rem; white-space: nowrap; }
  .cta__box .badge small { white-space: nowrap; }
  .cta__box .badge svg { width: 20px; height: 20px; }
}

/* Scroll reveal (site.js adds .rise only when motion is allowed): fade up
   24px and settle, no overshoot. */
.rise { opacity: 0; transform: translateY(24px); }
.rise.is-risen {
  opacity: 1; transform: none;
  transition: opacity .7s ease-out var(--d, 0ms), transform .7s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.step__title { display: inline-flex; align-items: center; gap: 10px; }
.step__icon { width: 1.05em; height: 1.05em; flex: none; color: var(--brand); overflow: visible; }
.step__icon--ai { width: 1.4em; height: 1.4em; margin-top: -.12em; }

/* Phones: every section title matches the top heading's size, so the page
   reads as one voice. They wrap freely; the top heading keeps its two lines. */
@media (max-width: 760px) {
  section[class] h2 { font-size: min(calc((100vw - 28px) / 13.2), 2.4rem); }
}

/* Who it's for: the one line on the home page, and its own page. */
.who-line { padding-block: clamp(8px, 2vw, 24px) 0; text-align: center; }
.who-line p { max-width: 640px; margin: 0 auto 10px; font-size: var(--t-lead); color: var(--muted); line-height: 1.6; text-wrap: balance; }
.who-line b { color: var(--ink); font-weight: 600; }
.who { padding-block: clamp(48px, 8vw, 104px) clamp(24px, 4vw, 48px); }
.who__head h1 { font-size: var(--t-hero); }
.who__head .lead { margin-top: 16px; }
.who__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.who__card {
  flex: 1 1 300px; max-width: 350px;
  background: #fff; border-radius: 20px; padding: 26px 26px 24px;
  border: 1px solid rgba(27, 31, 59, .05);
  box-shadow: 0 1px 2px rgba(27, 31, 59, .04), 0 10px 28px -14px rgba(27, 31, 59, .16);
  display: grid; gap: 8px; align-content: start;
}
.who__card .icon { width: 48px; height: 48px; border-radius: 14px; margin: 0 0 8px; }
.who__card .icon svg { width: 24px; height: 24px; stroke-width: 1.9; }
.who__card h2 { font-size: var(--t-small-title); letter-spacing: -.01em; line-height: 1.3; }
.who__card p { color: var(--muted); font-size: var(--t-list); line-height: 1.5; }
.who__eg { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(27, 31, 59, .07); display: grid; gap: 8px; }
.who__eg li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-meta); color: var(--ink); }
.who__eg svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.who__more { text-align: center; color: var(--muted); margin-top: clamp(28px, 4vw, 40px); }
.who__cta { padding-top: 0; }
@media (max-width: 760px) {
  .who__card { max-width: none; padding: 18px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; }
  .who__card .icon { width: 36px; height: 36px; margin: 0; border-radius: 10px; }
  .who__card .icon svg { width: 20px; height: 20px; }
  section[class] .who__card h2 { font-size: var(--t-small-title); letter-spacing: -.01em; align-self: center; }
  .who__card > p, .who__card > .who__eg { grid-column: 1 / -1; }
}
.who__card--all { background: linear-gradient(160deg, #eef0fe, #fff 70%); border-color: rgba(59, 76, 224, .14); }
.nav__links a[aria-current="page"] { color: var(--brand); }
.nav__links a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1099px) { .nav__links { gap: 20px; } .nav .nav__tag { display: none; } }
/* A real Home Screen keeps its own status bar: the frame adds only the island. */
.device[data-bar="none"] { --icons: none; }
.device[data-bar="none"] .device__screen::after { content: none; }
.device[data-bar="none"] .device__screen::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 37'%3E%3Crect width='125' height='37' rx='18.5' fill='%23000'/%3E%3C/svg%3E"); background-size: calc(var(--u) * 125) calc(var(--u) * 37); background-position: center calc(var(--u) * 11); }

/* rekallme. connector: the AI apps in a column, the rekallme. name on the
   other side, and two shared arrows between them: what you ask or save flows in,
   the answer flows back. */
.mcp { width: 100%; max-width: 560px; margin-inline: auto; display: grid;
  background: linear-gradient(160deg, #eef0ff, #e3e6fb); border-radius: var(--radius); padding: 26px 24px 24px; }
.mcp__link { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.mcp__ais { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.mcp__ai { display: flex; align-items: center; gap: 10px; }
.mcp__ai small { display: none; }
.mcp__logo { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(27,31,59,.06), 0 10px 22px -12px rgba(27,31,59,.3);
  font: 600 1.3rem/1 Inter, sans-serif; color: var(--muted);
  transition: transform .45s cubic-bezier(.34,1.35,.64,1), box-shadow .3s, opacity .3s; }
.mcp__logo svg { width: 26px; height: 26px; }
.mcp__logo--chatgpt, .mcp__logo--grok { color: #0d0d0d; }
.mcp__flow { display: grid; gap: 22px; padding-inline: clamp(14px, 3vw, 28px); }
.mcp__arrow { display: flex; align-items: center; color: var(--brand); }
.mcp__arrow--out { color: #17a364; }
.mcp__arrow i { flex: 1; height: 2.5px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 14px); opacity: .85; }
.mcp__arrow svg { flex: none; width: 12px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mcp__arrow--in svg { margin-left: -6px; }
.mcp__arrow--out svg { margin-right: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .mcp__arrow--in i { animation: mcp-in .9s linear infinite; }
  .mcp__arrow--out i { animation: mcp-out .9s linear infinite; }
}
@keyframes mcp-in { to { background-position: 14px 0; } }
@keyframes mcp-out { to { background-position: -14px 0; } }
.mcp { overflow: hidden; }
.mcp__link { min-height: 330px; }
.mcp__orb { margin: 0 clamp(18px, 4vw, 40px) 0 6px; }
.mcp__orb, .mcp__orb .orb__core { width: 132px; height: 132px; }
.mcp__orb .orb__core { gap: 6px; }
.mcp__orb .orb__core > svg { width: 36px; height: 36px; }
.mcp__orb .orb__core .orb__name { font-size: 1rem; }
.mcp-cta { margin-top: 6px; }
.eyebrow .brand { color: var(--brand); text-transform: none; letter-spacing: 0; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
    }
@media (max-width: 899px) {
  .features--one .row__copy > .mcp-cta { order: 4; justify-self: center; margin-top: 4px; }
  .mcp-cta .btn { padding: 9px 18px; font-size: var(--t-meta); gap: 6px; }
}
@media (max-width: 480px) {
  .mcp { padding: 20px 14px 18px; }
  .mcp__ais { gap: 10px; }
  .mcp__logo { width: 44px; height: 44px; }
  .mcp__logo svg { width: 22px; height: 22px; }
  .mcp__link { min-height: 290px; }
  .mcp__orb, .mcp__orb .orb__core { width: 104px; height: 104px; }
  .mcp__orb { margin-right: 22px; }
  .mcp__orb .orb__core > svg { width: 28px; height: 28px; }
  .mcp__orb .orb__core .orb__name { font-size: .8rem; }
}

/* The connector page. */
.mcp-page { padding-block: clamp(48px, 8vw, 104px) clamp(24px, 4vw, 40px); }
.mcp-page__head h1 { font-size: var(--t-hero); }
.mcp__subtitle, .row__copy .mcp__subtitle { font-size: var(--t-lead); font-weight: 600; line-height: 1.4; color: var(--ink); margin-top: 16px; }
.mcp-page__head .mcp__subtitle + .lead { font-size: var(--t-body); margin-top: 10px; }
.mcp-page__head .lead { margin-top: 16px; }
.mcp-page__viz .mcp { max-width: 600px; }
.mcp-page__can { padding-block: clamp(56px, 8vw, 96px) 0; }
.mcp-page__grid { max-width: 1000px; }
@media (min-width: 760px) { .mcp-page__grid { grid-template-columns: repeat(3, 1fr); } }
.mcp-page__how { padding-block: clamp(56px, 8vw, 96px) clamp(24px, 4vw, 40px); }
.mcp-soon { max-width: 720px; margin-inline: auto; text-align: center; background: #fff; border-radius: 22px;
  padding: clamp(28px, 4vw, 44px); border: 1px dashed rgba(59,76,224,.35); }
.mcp-soon h2 { font-size: var(--t-h3); }
.mcp-soon p:not(.eyebrow) { color: var(--muted); margin-top: 12px; }
.mcp-page__grid .tile p { grid-column: 1 / -1; margin: 0; white-space: normal; overflow-wrap: normal; }
/* The top orb's name: the rekallme. bars beside the word, at the word's size. */
.orb__name { display: inline-flex; align-items: center; gap: .3em; }
.orb__name img { width: 1.25em; height: 1.25em; flex: none; }
.orb__core .orb__name { font-size: 1.05rem; }
@media (max-width: 760px) { .orb__core .orb__name { font-size: .88rem; } }
.orb__name b { font-size: 1em; }


@media (max-width: 600px) {
  .kinds__pre { white-space: nowrap; }
}

/* Feature cards follow the same compact, three-point layout as data cards. */
.bento__grid { max-width: 940px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.bento .tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: start; align-items: center; row-gap: 14px; column-gap: 12px; padding: 20px; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(27,31,59,.035); }
.bento .tile .icon { width: 32px; height: 32px; border-radius: 9px; }
.bento .tile .icon svg { width: 18px; height: 18px; }
.bento .tile__txt { display: contents; }
.bento .tile h3 { margin: 0; font-size: var(--t-small-title); letter-spacing: -.01em; }
.tile__points { list-style-type: disc; grid-column: 1 / -1; margin: 0; padding-left: 28px; color: var(--body); font-size: var(--t-meta); line-height: 1.5; display: grid; gap: 8px; }
.tile__points li { padding-left: 2px; }
.tile__points li::marker { color: var(--muted); font-size: .7em; }
@media (max-width: 850px) { .bento__grid { max-width: 660px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .bento__grid { grid-template-columns: 1fr; gap: 10px; } .bento .tile { padding: 16px; } }

/* Phone layout: readable card copy and content contained within the gutters. */
@media (max-width: 760px) {
  .nav__row { height: 68px; }
  .nav .logo img { width: 38px; height: 38px; }
  .menu__panel { max-height: calc(100dvh - 90px); overflow-y: auto; }
  :root { --t-lead: 16px; --t-card: 20px; }
  .flow__stage { gap: 22px; }
  .flow__col > .is-on { zoom: 1; width: calc(100% - 12px); max-width: 440px; }
  .ar__side, .ae__date { width: 60px; }
  .ar__date { font-size: 10px; }
  .ar__side small { font-size: 10.5px; }
  .ar__main, .ae__main { padding: 12px; gap: 4px; }
  .ar__top { align-items: flex-start; }
  .ar__top b { font-size: 15px; line-height: 1.25; white-space: normal; overflow-wrap: break-word; }
  .ar__co { font-size: 13px; }
  .ar__main p { font-size: 13px; line-height: 1.45; }
  .ar__chips { flex-wrap: wrap; gap: 4px; overflow: visible; margin-top: 5px; }
  .ar__chips span { font-size: 11.5px; padding: 3px 8px; }
  .ae__line { font-size: 12px; line-height: 1.4; align-items: flex-start; }
  .ae__line svg { margin-top: 2px; }
  .ae__from { font-size: 11.5px; line-height: 1.4; }
  .detail__copy, .row__copy, .tile, .fact { min-width: 0; }
  .detail__list li > span:last-child { min-width: 0; overflow-wrap: break-word; }
  .faq__list summary { min-height: 44px; }
  .foot__legal { overflow-wrap: anywhere; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .pill-note:nth-child(1) { transform: translate(-50%, 50px); }
}
@media (max-width: 359px) {
  .ar__main, .ae__main { padding: 10px; }
  .ar__top b { font-size: 14px; }
  .ar__chips span { padding-inline: 6px; }
  .ae__line { flex-wrap: wrap; column-gap: 5px; }
  .ae__line svg { flex: none; }
  .cta__box .stores { flex-wrap: wrap; }
  .cta__box .badge { flex: 1 1 150px; max-width: 190px; min-height: 44px; }
}

@media (max-width: 760px) {
  .flow .orb, .flow .orb__core { width: 92px; height: 92px; }
  .flow .orb__core > svg { width: 24px; height: 24px; }
  .flow .orb__core .orb__name { font-size: .75rem; }
}

/* Keep the app card anatomy on phones: one tag row and inline event details. */
@media (max-width: 760px) {
  .ar__chips { flex-wrap: nowrap; position: relative; padding-right: 34px; overflow: hidden; min-height: 28px; }
  .ar__chips i { position: absolute; right: 0; top: 0; margin: 0; box-shadow: -8px 0 0 #fff; }
  .ae__line { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 7px; }
}

@media (max-width: 760px) {
  .flow__col > .is-on { border-radius: 18px; }
  .ar__side { padding-block: 8px; gap: 5px; }
  .ar__main, .ae__main { padding: 9px 11px; gap: 2px; }
  .ar__top b { font-size: 14px; line-height: 1.2; }
  .ar__co { font-size: 12px; line-height: 1.35; }
  .ar__main p { font-size: 12px; line-height: 1.35; margin-top: 0; }
  .ar__chips { min-height: 24px; margin-top: 4px; padding-right: 28px; }
  .ar__chips span { font-size: 11px; padding: 2px 7px; }
  .ar__chips i { width: 24px; height: 24px; }
  .ar__chips i svg { width: 13px; height: 13px; }
  .ae__line { margin-top: 2px; line-height: 1.35; }
  .ae__from { margin-top: 4px; font-size: 11px; }
  .ae__date b { font-size: 27px; }
  .ae__date small { font-size: 10px; }
}

/* --------------------------------------------------------------- web app
   Under the first phone: the web app in a plain dark browser window, shown
   large and sharp (full HD recording). */
.webapp { padding-block: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 48px); }
.webapp__window {
  max-width: 1120px; margin: clamp(28px, 4vw, 44px) auto 0;
  border: 10px solid #111216; border-radius: 24px; overflow: hidden; background: #111216;
  box-shadow: 0 2px 4px rgba(27, 31, 59, .08), 0 40px 80px -32px rgba(27, 31, 59, .45);
}
.webapp__window .browser__bar { display: flex; gap: 7px; align-items: center; height: 30px; padding: 0 14px; background: #1c1d22; border-bottom: 1px solid #2a2b31; }
.webapp__window .browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3b42; }
.webapp__window video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0 0 14px 14px; }
@media (max-width: 899px) {
  .webapp__window { border-width: 6px; border-radius: 16px; margin-inline: -6px; }
  .webapp__window video { border-radius: 0 0 10px 10px; }
  .webapp__window .browser__bar { height: 20px; gap: 5px; padding: 0 9px; }
  .webapp__window .browser__bar i { width: 7px; height: 7px; }
}

/* ------------------------------------------------------- feature cards
   Reminders to Share: one section each, built the same way, in the style of
   Tiimo's site. The text sits straight on the page (label, title, three
   points); only the picture has a soft tinted rounded panel. Sides
   alternate on desktop; on phones the picture comes first. */
.feat { padding-block: clamp(36px, 6vw, 80px); }
#detail { padding-top: clamp(56px, 8vw, 120px); }
#share { padding-bottom: clamp(64px, 9vw, 128px); }
.fcard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.fcard__copy { display: grid; gap: 20px; align-content: center; max-width: 30rem; }
.fcard--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.fcard--flip .fcard__copy { order: 2; }
.fcard__copy .eyebrow, .fcard__copy .theme__head { margin: 0; }
.fcard__copy h3 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.fcard__copy .mcp-cta { margin-top: 8px; }

/* Three points, each with a blue tick in a soft circle. */
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 34px; font-size: var(--t-lead); line-height: 1.5; color: var(--body); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lavender) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4ce0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ticks b { font-weight: 600; color: var(--ink); }

/* The picture panel: the only coloured block. Same height everywhere;
   whatever it holds fills it. */
.fcard__media { position: relative; height: clamp(420px, 44vw, 580px); border-radius: 28px; overflow: hidden; }
.fcard__media > .media, .fcard__media > .mcp, .fcard__media > .exp__stage, .fcard__media > .sh2 {
  position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; min-height: 0;
  aspect-ratio: auto; border-radius: 0; margin: 0;
}
.fcard__media > .media { padding-top: 40px; }
.fcard__media > .media .device { --w: min(58cqw, 300px); }
.fcard__media > .mcp { align-content: center; }
/* Open any record: the whole phone shows, top to bottom, so the full
   details screen can be read. Its width follows the panel height. */
#detail .fcard__media > .media { align-items: center; padding: 0; }
#detail .fcard__media > .media .device { --w: calc((clamp(420px, 44vw, 580px) - 64px) / 2.088); }
/* Light and dark: the whole phone shows too. */
#theme .fcard__media > .media { align-items: center; padding: 0; }
#theme .fcard__media > .media .device { --w: calc((clamp(420px, 44vw, 580px) - 64px) / 2.088); }
/* Web app window: macOS-style coloured window dots. */
.webapp__window .browser__bar i:nth-child(1) { background: #ff5f57; }
.webapp__window .browser__bar i:nth-child(2) { background: #febc2e; }
.webapp__window .browser__bar i:nth-child(3) { background: #28c840; }

.fcard__media > .mcp .mcp__link { min-height: 0; }

@media (max-width: 899px) {
  .fcard, .fcard--flip { grid-template-columns: 1fr; gap: 28px; }
  .fcard__media { order: -1; height: 420px; border-radius: 24px; }
  .fcard__copy, .fcard--flip .fcard__copy { order: 0; gap: 14px; max-width: none; padding-inline: 4px; }
  .fcard__copy h3 { font-size: clamp(26px, 7.4vw, 32px); }
  .ticks li { font-size: var(--t-body); }
  .fcard__copy .theme__head { justify-content: flex-start; }
  .fcard__copy .mcp-cta { justify-self: start; }
  .fcard__media > .media { padding-top: 28px; }
  .fcard__media > .media .device { --w: min(64cqw, 250px); }
  #detail .fcard__media, #theme .fcard__media { height: 520px; }
  #detail .fcard__media > .media .device, #theme .fcard__media > .media .device { --w: calc((520px - 56px) / 2.088); }
}

/* ------------------------------------------------------------- buttons
   Two kinds only: the blue main button and a white one with a thin edge
   for "learn more". At most one blue button in view at a time. */
.btn--lg { min-height: 52px; padding: 0 28px; justify-content: center; font-size: var(--t-body); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(27, 31, 59, .14); }
.btn--ghost:hover { background: #f5f6fb; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero__where { margin-top: 14px; font-size: var(--t-meta); color: var(--muted); }
.nav__signin { display: none; margin-left: 4px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--t-ui); }
.nav__signin:not([hidden]) { display: none; }
@media (min-width: 900px) { .nav__signin:not([hidden]) { display: inline; } }
.menu__panel .menu__cta { justify-content: center; color: #fff; margin: 4px 4px 6px; }
.menu__panel .menu__cta:hover { background: var(--brand-deep); }
.menu__panel a[hidden] { display: none; }
.cta__web {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border-radius: 12px; background: #fff; color: var(--brand); font-weight: 600; font-size: var(--t-ui); text-decoration: none;
}
.cta__web:hover { background: #eef0ff; }
@media (max-width: 639px) {
  .hero__ctas { flex-wrap: nowrap; gap: 10px; width: 100%; max-width: 380px; margin-inline: auto; }
  .hero__ctas .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: nowrap; font-size: var(--t-ui); }
  .btn--lg { min-height: 48px; }
  .cta__box .stores { flex-wrap: wrap; }
  .cta__web { flex: 1 1 100%; min-height: 46px; }
}

/* Web and mobile card: the web app in a plain browser window, the phone
   standing in front of its lower right corner. */
.devices { position: absolute; inset: 0; background: linear-gradient(160deg, #eef0ff, #e1e5fb); container-type: inline-size; }
.browser {
  position: absolute; left: 7%; top: 12%; width: 86%;
  border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 4px rgba(27, 31, 59, .06), 0 30px 60px -24px rgba(27, 31, 59, .35);
}
.browser__bar { display: flex; gap: 6px; align-items: center; height: 22px; padding: 0 10px; background: #f1f2f8; border-bottom: 1px solid #e4e6f0; }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d3d6e4; }
.browser img { display: block; width: 100%; height: auto; }
.devices .device { --w: 26cqw; position: absolute; right: 5%; bottom: -14%; }
@media (max-width: 899px) {
  .fcard__media:has(.devices) { height: 320px; }
  .browser { left: 4%; top: 9%; width: 92%; border-radius: 9px; }
  .browser__bar { height: 16px; gap: 4px; padding: 0 7px; }
  .browser__bar i { width: 6px; height: 6px; }
  .devices .device { --w: 34cqw; right: 4%; bottom: -26%; }
}
/* A screen recording that already shows its own status bar and island:
   the frame adds nothing over it. */
.device[data-bar="video"] .device__screen::before, .device[data-bar="video"] .device__screen::after { content: none; }

/* -------------------------------------------------------- hero word pill
   "[• Save] it all in one place." The word changes; each has its own soft
   pill and dot in the app's colours. The word on show stays in the text
   line, so the pill always sits on the same baseline as "it all". */
.swap {
  --pill: rgba(59, 76, 224, .13); --dot: #3b4ce0;
  display: inline-block; white-space: nowrap;
  padding: .02em .34em .06em .28em; border-radius: 999px;
  background: var(--pill); transition: background-color .45s ease;
}
.swap[data-on="remember"] { --pill: rgba(122, 79, 230, .14); --dot: #7a4fe6; }
.swap[data-on="search"] { --pill: rgba(21, 144, 171, .15); --dot: #1590ab; }
.swap__dot {
  display: inline-block; width: .24em; height: .24em; margin-right: .2em; vertical-align: .18em;
  border-radius: 50%; background: var(--dot); transition: background-color .45s ease;
}
.swap { clip-path: inset(0 round 999px); }
/* Each word takes its own dot colour, so the leaving word keeps its colour. */
.swap__w[data-c="save"] { color: #3b4ce0; }
.swap__w[data-c="remember"] { color: #7a4fe6; }
.swap__w[data-c="search"] { color: #1590ab; }
.swap__words { position: relative; display: inline-block; vertical-align: baseline; }
.swap__w { display: none; }
.swap__w.is-on { display: inline; }
/* With the script running the words roll up inside the pill: the next one
   comes in from below as the current one leaves through the top. */
.swap.is-live .swap__words { transition: width .55s cubic-bezier(.65, 0, .35, 1); }
.swap.is-live .swap__w {
  display: inline-block; position: absolute; left: 0; top: 0;
  transform: translateY(115%);
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.swap.is-live .swap__w.is-on { position: relative; transform: none; }
.swap.is-live .swap__w.is-out { transform: translateY(-115%); }
.swap.is-live .swap__w.is-reset { transition: none; }
.hero__br { display: none; }
/* Room above and below the pill so it never touches the next line. */
.kinds__title { line-height: 1.12; }
.kinds__title .nowrap-d + .nowrap-d { margin-top: .16em; }
@media (max-width: 760px) {
  .hero__br { display: block; }
  .kinds__title .nowrap-d + .nowrap-d { margin-top: .2em; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .swap, .swap__dot, .swap.is-live .swap__words, .swap.is-live .swap__w { transition: none; }
}

/* ----------------------------------------------------------- logo lockup
   The mark is sized from the wordmark (--wm): its bars stand about 1.35x
   the height of the letters and are centred on them, with an even gap.
   The bars fill 36/48 of the SVG, so the image is 1.3em for that height. */
.logo { --wm: 1.6rem; gap: calc(var(--wm) * .26); align-items: center; }
.logo .word { font-size: var(--wm); line-height: 1; }
.logo img { width: calc(var(--wm) * 1.3); height: calc(var(--wm) * 1.3); flex: none; border-radius: 0;
  transform: translateY(calc(var(--wm) * -.035)); }
.nav .logo { --wm: 2.1rem; gap: calc(var(--wm) * .26); }
.nav .logo img { width: calc(var(--wm) * 1.3); height: calc(var(--wm) * 1.3); }
.nav .logo .word { font-size: var(--wm); }
@media (max-width: 899px) { .nav .logo { --wm: 1.7rem; } }
@media (max-width: 374px) { .nav .logo { --wm: 1.55rem; } }

/* The six desktop lines down to 761px; below that the circles sit in three
   columns, so three lines. */
@media (max-width: 760px) {
  .flow__in--wide { display: none; }
  .flow__in--narrow { display: block; }
}

/* Hero title: a step heavier and larger than the other titles. */
.kinds .kinds__title { font-size: clamp(38px, 6vw, 76px); font-weight: 700; letter-spacing: -.032em; }
@media (min-width: 900px) { .kinds .head { max-width: 1180px; } }
@media (max-width: 760px) {
  .kinds .kinds__title { font-size: min(calc((100vw - 24px) / 13.05), 2.6rem); margin-inline: calc(12px - (100vw - 100%) / 2); }
}
/* Desktop: the label above the hero title sits closer to the paragraph's
   size, so the three lines read as one block. */
@media (min-width: 900px) { .kinds .kinds__pre { font-size: 16px; letter-spacing: .07em; margin-bottom: 20px; } }
.kinds .kinds__pre { font-weight: 700; color: var(--body); }
/* The label above the hero title is set in the logo's font. */
.kinds .kinds__pre {
  font-family: "Archivo Text", Inter, sans-serif; font-weight: 800;
  text-transform: none; letter-spacing: -.01em; font-size: min(15px, calc((100vw - 40px) / 21));
}
@media (min-width: 900px) { .kinds .kinds__pre { font-size: 21px; } }
/* Phones: the hero paragraph is smaller and runs on two lines. */
@media (max-width: 760px) {
  .kinds .head .lead { max-width: none; font-size: min(14px, calc((100vw - 32px) / 22.5)); line-height: 1.55; }
}

/* ------------------------------------------------------- features menu
   "Features" in the top bar opens a wide panel, as on Tiimo's site: a
   tinted card on the left that leads to the Features page, and eight
   features, each a title and one or two plain lines. */
.mega__btn {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin: -8px -12px; border-radius: 12px; line-height: inherit;
  color: var(--body); font-weight: 500; font-size: var(--t-ui);
}
.mega__btn:hover, .mega__btn[aria-expanded="true"] { color: var(--ink); background: rgba(255, 255, 255, .7); }
.mega__btn[aria-current="page"] { color: var(--brand); }
.mega__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.mega__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega__panel {
  position: absolute; left: 50%; top: 72px; transform: translateX(-50%);
  width: min(1120px, calc(100vw - 48px));
  display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 18px;
  background: #fff; border-radius: 24px; border: 1px solid rgba(27, 31, 59, .06); white-space: normal; text-align: left;
  box-shadow: 0 30px 70px -30px rgba(27, 31, 59, .35);
}
.mega__panel[hidden] { display: none; }
.mega__lead {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 24px;
  background: linear-gradient(160deg, #e6e9ff, #d9ddfb); border-radius: 16px;
}
.mega__lead p { margin: 0; color: var(--body); font-size: var(--t-body); line-height: 1.55; }
.mega__lead .mega__title { color: var(--ink); font-weight: 600; font-size: 19px; line-height: 1.3; }
.mega__lead a { white-space: normal; margin-top: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.mega__lead a:hover { color: var(--brand); }
.mega__grid { list-style: none; margin: 0; padding: 8px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
.mega__grid a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 14px; border-radius: 14px; text-decoration: none; white-space: normal; }
.mega__grid a:hover { background: var(--ground); }
.mega__grid b { color: var(--ink); font-weight: 600; font-size: 16px; }
.mega__grid span { color: var(--body); font-size: 14.5px; line-height: 1.5; }

/* ------------------------------------------------------- features page */
.fpage { padding-block: clamp(40px, 7vw, 96px) clamp(8px, 2vw, 24px); }
.fpage__title { font-size: clamp(34px, 5vw, 60px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 0; }
.fpage .lead { margin-top: 18px; }
.fcard__text { font-size: var(--t-lead); line-height: 1.6; color: var(--body); margin: 0; }
.prof { display: grid; place-items: center; padding: 28px; }
.prof__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(100%, 440px); }
.prof__grid li {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 16px;
  font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(27, 31, 59, .05), 0 12px 26px -18px rgba(27, 31, 59, .3);
}
.prof__ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--lavender); }
.prof__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.webmedia { display: grid; place-items: center; padding: 0 6%; }
.webmedia .webapp__window { width: 100%; margin: 0; }
@media (max-width: 899px) {
  .fcard__text { font-size: var(--t-body); }
  .prof__grid li { padding: 12px; gap: 10px; font-size: 14.5px; }
  .prof__ic { width: 32px; height: 32px; }
}

/* ------------------------------------------------------------- plans
   Free and Pro side by side, Pro lifted in brand blue, with a Monthly /
   Yearly switch that only changes Pro's price. */
.bill { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(27, 31, 59, .08); }
.bill__opt { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--t-ui); color: var(--body); background: none; padding: 9px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.bill__opt.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(27, 31, 59, .08), 0 6px 14px -8px rgba(27, 31, 59, .25); }
.bill__save { font-size: 12px; font-weight: 700; color: #1b7f4b; background: #e3f5ea; padding: 2px 8px; border-radius: 999px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 880px; margin: 28px auto 0; text-align: left; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: 26px; background: #fff; border: 1px solid rgba(27, 31, 59, .07); box-shadow: 0 1px 2px rgba(27, 31, 59, .03), 0 22px 44px -32px rgba(27, 31, 59, .3); }
.plan--pro { background: linear-gradient(165deg, #3b4ce0, #2b37b8); border-color: transparent; color: #fff; box-shadow: 0 30px 60px -30px rgba(43, 55, 184, .6); }
.plan__tag { position: absolute; top: 22px; right: 22px; margin: 0; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; }
.plan__name { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); }
.plan__for { margin: 6px 0 0; color: var(--body); font-size: var(--t-body); line-height: 1.5; min-height: 3em; }
.plan__price { margin: 18px 0 0; display: flex; align-items: baseline; gap: 8px; }
.plan__price[hidden], .plan__note[hidden] { display: none; }
.plan__price b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.plan__price span { color: var(--body); font-size: var(--t-body); }
.plan__note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.plan__cta { margin-top: 20px; justify-content: center; min-height: 48px; }
.plan__list { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(27, 31, 59, .08); display: grid; gap: 12px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-body); line-height: 1.45; color: var(--body); }
.plan__list b { color: var(--ink); font-weight: 600; }
.plan__list > li > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plan--pro .plan__name, .plan--pro .plan__price b, .plan--pro .plan__list b { color: #fff; }
.plan--pro .plan__for, .plan--pro .plan__price span, .plan--pro .plan__list li { color: #dfe3ff; }
.plan--pro .plan__note { color: #c3c9ff; }
.plan--pro .plan__list { border-top-color: rgba(255, 255, 255, .18); }
.plan--pro .plan__list > li > svg { stroke: #fff; }
.plan--pro .plan__cta { background: #fff; color: var(--brand); }
.plan--pro .plan__cta:hover { background: #eef0ff; }
.plans__foot { margin: 18px auto 0; max-width: 880px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 26px 22px; }
  .plan__for { min-height: 0; }
}

/* ------------------------------------------------------- pricing page
   As on Notion's pricing page: one large white card with the value line
   on top, then Free and Pro side by side, each with its price, who it is
   for, a soft button and what it includes. */
.ppage { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 96px); text-align: center; }
.ppage .lead { margin-top: 18px; }
.pcard {
  max-width: 1040px; margin: 28px auto 0; padding: clamp(28px, 5vw, 60px); text-align: left;
  background: #fff; border-radius: 28px; border: 1px solid rgba(27, 31, 59, .07);
  box-shadow: 0 1px 2px rgba(27, 31, 59, .03), 0 30px 60px -40px rgba(27, 31, 59, .35);
}
.pcard__title { margin: 0; max-width: 14em; font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; color: var(--ink); }
.pcard__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
.pplan { display: flex; flex-direction: column; }
.pplan__name { margin: 0; font-size: 26px; font-weight: 700; color: var(--ink); }
.pplan__price { margin: 16px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pplan__price[hidden] { display: none; }
.pplan__price b { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.pplan__price span { color: var(--body); font-size: var(--t-body); }
.pplan__for { margin: 14px 0 0; color: var(--body); font-size: var(--t-lead); line-height: 1.55; min-height: 3.1em; }
.pplan__cta {
  margin-top: 24px; display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px;
  background: #e9ecff; color: var(--brand); font-weight: 600; font-size: var(--t-lead); text-decoration: none;
}
.pplan__cta:hover { background: #dde2ff; }
.pplan__cta--pro { background: var(--brand); color: #fff; }
.pplan__cta--pro:hover { background: var(--brand-deep); }
.pplan__head { margin: 30px 0 0; font-weight: 700; color: var(--ink); font-size: var(--t-body); }
.pplan .plan__list { margin-top: 14px; padding-top: 0; border-top: 0; gap: 14px; }
.pnotes { list-style: none; max-width: 1040px; margin: 22px auto 0; padding: 0 8px; display: grid; gap: 8px; text-align: left; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pnotes li { padding-left: 16px; position: relative; }
.pnotes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: .6; }
@media (max-width: 760px) {
  .pcard__cols { grid-template-columns: 1fr; gap: 40px; }
  .pplan__for { min-height: 0; font-size: var(--t-body); }
}
/* Pricing heading: two lines of the same size, each kept on one row; it
   shrinks with the screen so neither line wraps on a phone. */
.ppage .head { max-width: none; }
.ppage__title { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); font-size: min(52px, calc((100vw - 48px) / 24.6)); }
.ppage__title > span { display: block; white-space: nowrap; }
@media (max-width: 640px) {
  /* Each sentence stays on one row on phones too; the size follows the
     screen width so the longer line just fits. */
  .ppage__title { font-size: calc((100vw - 32px) / 23.4); }
  /* The blue line is bigger on phones, one sentence per row. */
  .ppage__title .ppage__sub { font-size: 1.55em; line-height: 1.1; margin-top: .15em; white-space: nowrap; }
}
/* Free and Pro as two separate cards, side by side. */
.pcard { max-width: 920px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.pcard__cols { gap: 22px; }
.pplan {
  padding: clamp(26px, 3.4vw, 40px); background: #fff; border-radius: 26px; border: 1px solid rgba(27, 31, 59, .07);
  box-shadow: 0 1px 2px rgba(27, 31, 59, .03), 0 26px 50px -36px rgba(27, 31, 59, .35);
}
.pplan:last-child { border: 2px solid var(--brand); }
@media (max-width: 760px) { .pcard__cols { gap: 18px; } }
/* Small app logos under a plan line, as on Notion's pricing page. */
.plan__list li > span { min-width: 0; }
.ai-ics { display: flex; gap: 8px; margin-top: 8px; }
.ai-ic { width: 22px; height: 22px; display: grid; place-items: center; }
.ai-ic svg { width: 18px; height: 18px; }
.ai-ic--chatgpt, .ai-ic--grok { color: #0d0d0d; }
/* MCP page, desktop: each heading on a single row. */
@media (min-width: 900px) {
  main:has(.mcp-page) .head { max-width: none; }
  main:has(.mcp-page) .head h1, main:has(.mcp-page) .head h2, .mcp-soon h2 { white-space: nowrap; }
  .mcp-soon { max-width: none; }
  main:has(.mcp-page) .head h1 { font-size: min(64px, 4.6vw); }
}
.pplan__price { flex-wrap: nowrap; }
.pplan__sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.pplan__sub[hidden] { display: none; }
.pplan__sub b { font-size: 17px; font-weight: 700; color: var(--brand); }
.pplan { position: relative; }
.pplan__tag { position: absolute; top: clamp(26px, 3.4vw, 40px); right: clamp(26px, 3.4vw, 40px); margin: 0; padding: 5px 12px; border-radius: 999px; background: #e9ecff; color: var(--brand); font-size: 13px; font-weight: 700; }

/* Pricing page, bottom: the web app window with the phone standing in front
   of its lower left corner, both playing. On phones they stack instead,
   phone first, each with a short caption. */
.pshow { padding-block: clamp(24px, 4vw, 48px) clamp(72px, 10vw, 128px); overflow: hidden; }
.pshow .head h2 { white-space: normal; }
.pshow__stage { position: relative; max-width: 1040px; margin: clamp(32px, 5vw, 56px) auto 0; padding-left: clamp(40px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 80px); }
.pshow__item { margin: 0; }
.pshow__item--phone { position: absolute; left: 0; bottom: 0; z-index: 1; }
.pshow__web { margin: 0 !important; max-width: none; width: 100%; }
.pshow__phone { --w: clamp(120px, 22vw, 250px); }
.pshow__cap { display: none; }
@media (max-width: 760px) {
  .pshow__stage { padding: 0; display: grid; gap: 48px; }
  .pshow__item--phone { position: static; display: grid; justify-items: center; }
  .pshow__phone { --w: min(62vw, 250px); }
  .pshow__cap { display: block; margin-top: 22px; text-align: center; color: var(--body); font-size: var(--t-body); line-height: 1.55; max-width: 22em; margin-inline: auto; }
  .pshow__cap b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
}
/* Monthly / Yearly switch inside the Pro card, under its name. */
.pplan .bill { margin-top: 14px; align-self: flex-start; background: #f1f3fb; box-shadow: none; }
.pplan .bill__opt { padding: 7px 14px; font-size: 14px; }
/* Pricing page: three values under the heading, as on TickTick's page. */
.pvals { list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(24px, 4vw, 52px); }
.pvals li { display: inline-flex; align-items: center; gap: 10px; color: var(--body); font-size: var(--t-lead); font-weight: 500; }
.pvals svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .pvals { flex-direction: column; align-items: center; gap: 12px; }
  .pvals li { font-size: var(--t-body); }
}