@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f9f8f6;
  --paper-2: #efe9e3;
  --paper-3: #d9cfc7;
  --ribbon: #A8483A;
  --ribbon-dark: #863126;
  --ink: #1a1a1a;
  --ink-soft: #4a4744;
  --muted: #8a8480;
  --radius: 18px;
  --maxw: 1080px;

  /* App surface tokens — mirror apps/mobile/src/constants/theme.ts */
  --app-accent: var(--ribbon);
  --app-radius: 5px;
  --app-border: #efe9e3;
  --app-text-light: #adadad;
  --app-text-muted: #75706a;
  --app-ground: #f9f8f6;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

:target,
[id] {
  scroll-margin-top: 56px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family:
    'Outfit',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--paper-3) 60%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ribbon);
}

.brand .logo {
  height: 26px;
  width: auto;
  display: block;
}

/* Hover: liquid ink rises inside the M and drains back out, like the app
   splash. The M path doubles as a clip; the liquid is a looping sine wave
   (period 20px) on top of a filled block, lifted by a transition. */
.logo-liquid-rise {
  transform: translateY(34px);
  transition: transform 0.9s cubic-bezier(0.33, 1, 0.5, 1);
}

.brand:hover .logo-liquid-rise {
  transform: translateY(-4px);
}

.logo-liquid-wave {
  animation: logo-wave 1.4s linear infinite;
}

@keyframes logo-wave {
  to {
    transform: translateX(-20px);
  }
}

.nav-cta {
  font-weight: 600;
  font-size: 15px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  background: #000;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 600;
}

.nav-links a {
  color: var(--muted);
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--paper-3);
  border-radius: 999px;
  padding: 3px;
  background: var(--paper);
}

.lang-switch a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--muted);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.lang-switch a:hover {
  color: var(--ink);
}

.lang-switch a[aria-current='true'] {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 36px 0 72px;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 50% at 50% 0%,
    color-mix(in srgb, var(--ribbon) 8%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

/* Two columns on desktop so the phone sits beside the copy, above the fold.
   Collapses to the original stacked, centred layout below 980px. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: start;
  gap: 32px;
  text-align: left;
}

/* Keep the copy near the top of the row instead of centring it against
   the tall phone column; the small offset roughly lines the first bubble
   up with the top of the device. */
@media (min-width: 981px) {
  .hero-grid .hero-copy {
    padding-top: 40px;
  }
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding-bottom: 40px;
}

.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ribbon);
  background: color-mix(in srgb, var(--ribbon) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--ribbon) 22%, transparent);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ribbon);
}

h1 {
  position: relative;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 18px;
  max-width: 15ch;
  text-wrap: balance;
}

h1 .accent {
  color: var(--ribbon);
  white-space: nowrap;
}

/* Hero: the questions everyone asks themselves, scattered like stray thoughts */
.hero-questions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
  max-width: none;
  margin: 0 0 24px;
}

.hq-bubble {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 16px;
  padding: 9px 16px;
  color: var(--ink-soft);
  box-shadow: 0 12px 26px -20px rgba(26, 26, 26, 0.4);
}

.hq-bubble .hqb-sender {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ribbon);
  margin-bottom: 1px;
}

.hq-bubble:nth-child(1) {
  transform: rotate(-1.2deg);
  border-bottom-left-radius: 5px;
}

.hq-bubble:nth-child(2) {
  transform: translateX(44px) rotate(0.9deg);
  border-bottom-right-radius: 5px;
}

.hq-bubble:nth-child(3) {
  transform: translateX(14px) rotate(-0.5deg);
  border-bottom-left-radius: 5px;
}

/* Carries the value proposition the headline alone doesn't state. */
.hero-claim {
  position: relative;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 14px;
  text-wrap: balance;
}

.lede {
  position: relative;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 30px;
}

.cta-row {
  position: relative;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-copy .cta-row {
  justify-content: flex-start;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: 14px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 30px -12px rgba(26, 26, 26, 0.55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: #000;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--paper-3);
}

.btn-ghost:hover {
  background: var(--paper-2);
  transform: translateY(-2px);
}

.btn svg {
  width: 20px;
  height: 20px;
}

/* ---------- Phone mockup ---------- */
.stage {
  position: relative;
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

/* Source apps drifting around the phone at different depths. (--x, --y) are
   offsets from the top-centre of the phone (effective half-width ~150px);
   --z interleaves with .phone (z-index: 2), so front icons overlap the device
   and back ones peek out from behind it, blurred and dimmed. */
.sources {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.source {
  position: absolute;
  top: -27px;
  left: -27px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  translate: var(--x) var(--y);
  scale: var(--s, 1);
  z-index: var(--z, 3);
  box-shadow:
    0 16px 30px -14px rgba(26, 26, 26, 0.4),
    0 0 0 1px var(--paper-2);
  animation: source-in 0.7s cubic-bezier(0.22, 1, 0.36, 1)
    calc(360ms + var(--i) * 100ms) backwards;
}

.source svg {
  width: 28px;
  height: 28px;
}

.source--yt {
  --x: -172px;
  --y: 85px;
  --s: 1.06;
  --z: 4;
  color: #ff0000;
}
.source--ig {
  --x: -208px;
  --y: 245px;
  --s: 0.8;
  --z: 1;
  filter: blur(1.5px);
  opacity: 0.8;
  color: #e1306c;
}
.source--tt {
  --x: -170px;
  --y: 400px;
  --s: 0.95;
  --z: 4;
  color: #1a1a1a;
}
.source--x {
  --x: -70px;
  --y: -28px;
  --s: 0.85;
  --z: 1;
  filter: blur(1px);
  opacity: 0.9;
  color: #1a1a1a;
}
.source--fb {
  --x: 198px;
  --y: 65px;
  --s: 0.78;
  --z: 1;
  filter: blur(1.6px);
  opacity: 0.78;
  color: #1877f2;
}
.source--sf {
  --x: 172px;
  --y: 220px;
  --s: 1.04;
  --z: 4;
  color: #1b88e0;
}
.source--wa {
  --x: 212px;
  --y: 375px;
  --s: 0.86;
  --z: 1;
  filter: blur(1.1px);
  opacity: 0.85;
  color: #25d366;
}

/* The phone renders at true iPhone width (390px) so the app's real pixel
   values stay literal, then scales down to fit the layout. */
.phone {
  position: relative;
  width: 390px;
  max-width: 100%;
  height: 780px;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 57px;
  border: 14px solid var(--ink);
  box-shadow:
    0 50px 90px -40px rgba(26, 26, 26, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  z-index: 2;
  transform: scale(0.68);
  transform-origin: top center;
  margin-bottom: -250px;
}

.phone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 156px;
  height: 34px;
  background: var(--ink);
  border-radius: 0 0 21px 21px;
  z-index: 5;
}

.screen {
  position: absolute;
  inset: 0;
  background: var(--paper);
  padding: 56px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

/* List detail screen: the theme colour washed onto the ground at 20%,
   under a header washed at 6% (listBackgroundColor / listHeaderColor). */
.screen--tinted {
  background: #dce2e6;
  padding: 0;
  gap: 0;
}

.screen-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 56px 20px 12px;
  background: #f1f2f2;
  border-bottom: 1px solid var(--app-border);
}

.screen-back {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--ink);
}

.screen-headings {
  flex: 1;
  min-width: 0;
}

.screen-title {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--app-text-light);
  white-space: nowrap;
  overflow: hidden;
}

.screen-sub svg {
  width: 16px;
  height: 16px;
}

.sub-sep {
  width: 1px;
  height: 12px;
  background: var(--app-text-light);
  margin: 0 4px;
  flex: 0 0 auto;
}

.screen-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.list-card {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-thumb {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.t-a {
  background: #e9cda2;
}
.t-b {
  background: linear-gradient(135deg, #7595ae, #e0897e);
  color: #fff;
}
.t-c {
  background: linear-gradient(135deg, #9b84a6, #d8a24e);
  color: #fff;
}
.t-d {
  background: #c7d1c3;
}

.list-meta {
  min-width: 0;
  flex: 1;
}
.list-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-count {
  font-size: 12px;
  color: var(--muted);
}

/* "Uncategorized" inbox row — ListHeaderComponent of the home list */
.inbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: #fff;
}

.inbox-label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--app-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  flex: 0 0 auto;
}

.inbox-chevron {
  width: 24px;
  height: 24px;
  color: var(--app-text-light);
  flex: 0 0 auto;
}

/* Link rows inside a phone screen — mirrors ItemMark.tsx */
.link-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 7px 10px;
}

.link-card--unread {
  border-left: 3px solid var(--app-accent);
  padding-left: 8px;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.08);
}

.link-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.link-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink-soft);
}

.link-thumb svg {
  width: 26px;
  height: 26px;
}

.link-thumb--yt {
  background: #eceae8;
  color: #ff0000;
}
.link-thumb--tt {
  background: #e2e0dd;
  color: #1a1a1a;
}
.link-thumb--x {
  background: #e6e3e0;
  color: #1a1a1a;
}
.link-thumb--wa {
  background: #ddd9d5;
  color: #25d366;
}
.link-thumb--ig {
  background: #e9e7e4;
  color: #c13584;
}

/* OG-image thumbs: cover image with the favicon pinned bottom-left (LinkThumbnail.tsx) */
.link-thumb--img-sunset {
  background: linear-gradient(160deg, #e8a87c, #c86b5a 55%, #8d5a68);
}
.link-thumb--img-ocean {
  background: linear-gradient(160deg, #29506b, #16324a 60%, #0c2233);
}
.link-thumb--img-clay {
  background: linear-gradient(160deg, #d8b29a, #b08268 60%, #7d5a48);
}

.thumb-favicon {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #fff;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
}

.link-thumb .thumb-favicon svg {
  width: 12px;
  height: 12px;
}

.fav--yt {
  color: #ff0000;
}
.fav--tt {
  color: #1a1a1a;
}
.fav--ig {
  color: #c13584;
}

.unread-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--app-accent);
  border: 2.5px solid #fff;
}

.link-card--unread .link-title {
  font-weight: 600;
}

.link-meta {
  flex: 1;
  min-width: 0;
}
.link-title {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-domain {
  font-size: 14px;
  line-height: 18px;
  color: var(--app-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer row: meta text, reaction cluster, action icons */
.link-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.link-footer-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.link-sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--app-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.reaction-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.reaction-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.reaction-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
  color: var(--app-text-muted);
}

.reaction-badge svg {
  width: 12px;
  height: 12px;
}

.reaction-badge + .reaction-badge {
  margin-left: -7px;
}

.reaction-total {
  font-size: 12px;
  color: var(--app-text-light);
}

.link-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.link-action {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  color: var(--app-text-light);
  font-size: 12px;
}

.link-action svg {
  width: 16px;
  height: 16px;
}

.link-action--reacted {
  color: var(--app-accent);
}

.comment-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-accent);
}

.phone-glow {
  position: absolute;
  width: min(460px, 100%);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--ribbon) 18%, transparent),
    transparent
  );
  filter: blur(10px);
  z-index: 1;
}

/* ---------- Sections ---------- */
section {
  position: relative;
  padding: 96px 0;
}

.section-head {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto 56px;
}

.section-head h2 {
  font-size: clamp(30px, 4.5vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 16px;
  font-weight: 800;
}

.section-head p {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Split sections (copy + visual) ---------- */
/* The first section sits directly under the hero, which is --paper: give it a
   surface of its own so the fold reads as a boundary. */
.first-sec {
  background: #fff;
  border-top: 1px solid color-mix(in srgb, var(--paper-3) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--paper-3) 50%, transparent);
}

.alt-sec {
  background: var(--paper-2);
  border-top: 1px solid
    color-mix(in srgb, var(--paper-3) 50%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--paper-3) 50%, transparent);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}

.split--reverse .split-copy {
  order: 2;
}
.split--reverse .split-visual {
  order: 1;
}

.split-copy h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 18px;
  font-weight: 800;
}

.split-copy h2 .accent {
  color: var(--ribbon);
}

.split-lede {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 46ch;
}

.split-lede strong {
  color: var(--ink);
  font-weight: 700;
}

.split-visual {
  display: flex;
  justify-content: center;
}

/* iOS-style share sheet mockup */
.share-sheet {
  width: 360px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 24px;
  padding: 14px 18px 20px;
  box-shadow: 0 40px 80px -40px rgba(26, 26, 26, 0.4);
}

.share-sheet-grab {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-3);
  margin: 0 auto 16px;
}

.share-sheet-head {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}

.share-apps {
  display: flex;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-2);
}

.share-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1;
}

.share-app-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--muted);
}

.share-app-ico svg {
  width: 28px;
  height: 28px;
}

.share-app--active .share-app-ico {
  background: color-mix(in srgb, var(--ribbon) 12%, #fff);
  color: var(--ribbon);
  box-shadow: 0 0 0 2px var(--ribbon);
}

.share-app-name {
  font-size: 12px;
  color: var(--ink-soft);
}
.share-app--active .share-app-name {
  color: var(--ink);
  font-weight: 600;
}

.share-done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border-radius: 12px;
  padding: 12px 14px;
}

.share-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ribbon);
  color: #fff;
  font-size: 13px;
  flex: 0 0 auto;
}

/* Shared list card */
.shared-card {
  width: 380px;
  max-width: 100%;
}

.shared-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* Lists now lead with a round 36px avatar (ListRow.tsx / ListAvatar) */
.shared-head .list-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 14px;
}

.avatar-stack {
  display: flex;
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-2);
}

.mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  border: 2px solid #fff;
  margin-left: -8px;
}

.mini-avatar:first-child {
  margin-left: 0;
}

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feature {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(26, 26, 26, 0.3);
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ribbon) 10%, var(--paper));
  color: var(--ribbon);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.feature-icon svg {
  width: 26px;
  height: 26px;
}

.feature h3 {
  font-size: 20px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* ---------- Trust (privacy facts) ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.trust {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: var(--radius);
  padding: 26px 22px;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.trust:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(26, 26, 26, 0.3);
}

.trust-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--ribbon) 10%, var(--paper));
  color: var(--ribbon);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.trust-ico svg {
  width: 22px;
  height: 22px;
}

.trust h3 {
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.trust p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

.trust-more {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ribbon);
}

.trust:hover .trust-more {
  text-decoration: underline;
}

/* ---------- Public lists feature ---------- */
.public-sec {
  background: #fff;
  border-top: 1px solid
    color-mix(in srgb, var(--paper-3) 50%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--paper-3) 50%, transparent);
}

.public-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.public-grid .public-copy {
  order: 2;
}

.public-grid .public-visual {
  order: 1;
}

.public-copy .eyebrow {
  background: color-mix(in srgb, var(--ribbon) 10%, #fff);
  margin-bottom: 22px;
}

.public-copy h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 18px;
  font-weight: 800;
}

.public-copy h2 .accent {
  color: var(--ribbon);
}

.public-copy > p {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 42ch;
}

.public-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.public-points li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.public-points .check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ribbon) 12%, var(--paper-2));
  color: var(--ribbon);
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.public-points .check svg {
  width: 14px;
  height: 14px;
}

.public-points strong {
  font-weight: 600;
}
.public-points span {
  color: var(--ink-soft);
}

/* Public visual: profile card */
.public-visual {
  display: flex;
  justify-content: center;
}

.profile-card {
  width: 360px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 24px;
  padding: 26px 24px 22px;
  box-shadow: 0 36px 70px -40px rgba(26, 26, 26, 0.4);
}

.profile-id {
  flex: 1;
  min-width: 0;
}
.profile-name {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.profile-handle {
  color: var(--muted);
  font-size: 14px;
}

.profile-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.profile-list-row + .profile-list-row {
  border-top: 1px solid var(--paper-2);
}

.profile-list-row .list-thumb,
.profile-list-row .link-thumb {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 14px;
}
.profile-list-row .link-thumb svg {
  width: 20px;
  height: 20px;
}
.profile-list-row .list-meta {
  flex: 1;
  min-width: 0;
}
.profile-list-row .list-name {
  font-weight: 600;
  font-size: 14.5px;
}
.profile-list-row .list-count {
  font-size: 12.5px;
  color: var(--muted);
}

/* Search & discover panel — mirrors the Search tab
   (features/search: Page.tsx, SectionTitle.tsx, CategoryCarousel.tsx, DiscoverCard.tsx) */
.discover-panel {
  width: 400px;
  max-width: 100%;
  background: var(--app-ground);
  border: 1px solid var(--paper-2);
  border-radius: 24px;
  padding: 20px 0;
  box-shadow: 0 36px 70px -40px rgba(26, 26, 26, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.search-field {
  margin: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  font-size: 16px;
  color: var(--app-text-light);
}

.discover-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 20px;
  padding-top: 10px;
}

.discover-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 16px;
  color: var(--app-text-light);
}

.discover-title svg {
  width: 16px;
  height: 16px;
}

.discover-seeall {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--app-text-light);
}

.discover-seeall svg {
  width: 12px;
  height: 12px;
}

.discover-row {
  display: flex;
  gap: 10px;
  padding: 0 20px;
  overflow: hidden;
}

.disc-card {
  position: relative;
  flex: 0 0 auto;
  width: 270px;
  height: 150px;
  border-radius: var(--app-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #000;
}

.disc-card > * {
  position: relative;
  z-index: 1;
}

.disc-card--neutral {
  background: #fff;
  border: 1px solid var(--app-border);
}

/* Tinted themes: the list colour washed onto #f9f8f6 (listCardColor) */
.disc-card--sage {
  background: #d8dfd0;
}

/* Cover photo: full-bleed image under two vertical scrims (DiscoverCard.tsx) */
.disc-card--photo {
  background-size: cover;
  background-position: center;
  background-color: #4f3626;
  color: #fff;
}

.disc-card--photo-food {
  background-image: url('discover-food.jpg');
}

.disc-card--photo-travel {
  background-image: url('discover-travel.jpg');
}

.disc-card--photo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  background: linear-gradient(to bottom, rgba(40, 27, 18, 0.8), rgba(40, 27, 18, 0));
  z-index: 0;
}

.disc-card--photo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(40, 27, 18, 0), rgba(40, 27, 18, 0.9) 80%);
  z-index: 0;
}

.disc-title {
  font-size: 16px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.disc-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.disc-owner {
  font-size: 12px;
  line-height: 16px;
  color: var(--app-text-muted);
}

.disc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.disc-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--app-text-muted);
}

.disc-stats span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.disc-stats svg {
  width: 16px;
  height: 16px;
}

.disc-stats .heart-stat svg {
  color: var(--app-accent);
}

.disc-date {
  font-size: 12px;
  line-height: 16px;
  color: var(--app-text-muted);
  opacity: 0.8;
}

/* Tinted cards use the darker meta ink (TINTED_CARD_TEXT_MUTED) */
.disc-card--sage .disc-owner,
.disc-card--sage .disc-stats,
.disc-card--sage .disc-date {
  color: #3d3833;
}

.disc-card--photo .disc-owner,
.disc-card--photo .disc-stats,
.disc-card--photo .disc-date {
  color: #fff;
}

.disc-card--photo .disc-owner {
  opacity: 0.95;
}

/* End-of-carousel "See all" card: fan of three list swatches */
.disc-card--seeall {
  background: #fff;
  border: 1px solid var(--app-border);
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.seeall-fan {
  display: flex;
  align-items: center;
}

.seeall-fan i {
  display: block;
  width: 38px;
  height: 52px;
  border-radius: 8px;
  border: 2px solid #fff;
}

.seeall-fan i:nth-child(1) {
  transform: rotate(-12deg);
  background: #c6d3dc;
}

.seeall-fan i:nth-child(2) {
  transform: translateY(-5px);
  margin-left: -14px;
  background: #ecd9b4;
  position: relative;
  z-index: 2;
}

.seeall-fan i:nth-child(3) {
  transform: rotate(12deg);
  margin-left: -14px;
  background: #d8dfd0;
}

.seeall-title {
  font-size: 16px;
  line-height: 21px;
  color: #000;
}

.seeall-count {
  font-size: 12px;
  line-height: 16px;
  color: var(--app-text-light);
}

.like-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ribbon);
  flex: 0 0 auto;
}

.like-pill svg {
  width: 13px;
  height: 13px;
}

/* Reactions + comments — a light touch on link rows */
.interactions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.react-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-2);
  padding: 3px 8px;
  border-radius: 999px;
}

.react-pill svg {
  width: 13px;
  height: 13px;
}

.inline-flame {
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  color: var(--ribbon);
}

.comment-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.comment-count svg {
  width: 13px;
  height: 13px;
}

/* ---------- Platforms ---------- */
.platforms-sec {
  background: var(--ink);
  color: var(--paper);
  border-radius: 36px;
  margin: 0 24px;
  padding: 88px 0;
}

.platforms-sec .wrap {
  max-width: 920px;
}

.platforms-sec .section-head h2 {
  color: var(--paper);
}
.platforms-sec .section-head p {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.platform {
  display: flex;
  align-items: center;
  gap: 16px;
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.platform[data-ready='true'] {
  cursor: pointer;
}

.platform[data-ready='true']:hover {
  border-color: color-mix(in srgb, var(--ribbon) 60%, transparent);
  background: color-mix(in srgb, var(--paper) 10%, transparent);
}

.platform-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  color: var(--paper);
}

.platform-ico svg {
  width: 24px;
  height: 24px;
}

.platform-meta {
  flex: 1;
  min-width: 0;
}
.platform-name {
  font-weight: 600;
  font-size: 17px;
}
.platform-state {
  font-size: 13px;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.platform[data-ready='true'] .platform-state {
  color: var(--ribbon);
}

.badge-soon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  padding: 4px 11px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.badge-ready {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ribbon);
  padding: 5px 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* ---------- CTA band ---------- */
.closing {
  text-align: center;
  padding: 110px 0 96px;
}

.closing h2 {
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  font-weight: 800;
}

.closing p {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 34px;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 4px 22px;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  font-size: 16.5px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 18px;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 60ch;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--paper-2);
  padding: 40px 0;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--muted);
  font-size: 14px;
}

.foot .brand .word {
  height: 18px;
}
.foot-links {
  display: flex;
  gap: 22px;
}
.foot-links a:hover {
  color: var(--ink);
}

/* ---------- Micro-demo ---------- */
/* One 12s loop tells the whole gesture: a TikTok plays, the iOS share sheet
   rises and Maark is picked, Maark's own share extension asks which list, then
   the app list shows the link already filed. Each layer owns one slice of the
   same timeline, kept in sync by --dur on .phone.
   The filed link stays visible until the very end of the loop — the point of
   the demo is that the link is kept, so it must not vanish while on screen. */
.phone {
  --dur: 12s;
}

.demo-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Phase 1 — the source app (0 -> 30%) */
.demo-tiktok {
  position: absolute;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  animation: demo-tiktok var(--dur) ease-in-out infinite;
}

/* TikTok stays up the whole time both sheets are open — in the real flow the
   share extension opens over the source app, and Maark is never brought to the
   front. It only gives way once the link is marked, which is the one moment
   the app itself is on screen. Snaps back on the last frame rather than fading
   in over the list, which would ghost the video on top of the filed link. */
/* Hand-off is the iOS app-switch gesture: TikTok slides out to the left while
   the Maark list comes in from the right, so the list arrives from somewhere
   instead of cutting in. Opacity is stepped (never cross-faded) — only the
   horizontal travel is eased, which is what sells it as one swipe. */
@keyframes demo-tiktok {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  56% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  62% {
    opacity: 1;
    transform: translateX(-100%);
    animation-timing-function: step-end;
  }
  62.1%,
  99.9% {
    opacity: 0;
    transform: translateX(-100%);
    animation-timing-function: step-end;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* The list rides in on the same swipe, then stays put for the rest of the loop. */
.screen--tinted {
  animation: demo-list var(--dur) linear infinite;
}

@keyframes demo-list {
  0%,
  56% {
    transform: translateX(100%);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  62%,
  100% {
    transform: translateX(0);
  }
}

/* iOS home indicator — the affordance the swipe starts from. */
.demo-home {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 134px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  z-index: 6;
  animation: demo-home var(--dur) ease-in-out infinite;
}

@keyframes demo-home {
  0%,
  53% {
    translate: -50%;
    background: rgba(255, 255, 255, 0.75);
  }
  56% {
    translate: -50%;
    background: rgba(255, 255, 255, 0.95);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  62% {
    translate: -160%;
    background: rgba(26, 26, 26, 0.28);
  }
  64%,
  100% {
    translate: -50%;
    background: rgba(26, 26, 26, 0.28);
  }
}

.tk-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 30% 25%, #3c2a4d, transparent 70%),
    radial-gradient(70% 50% at 75% 70%, #7a3b3b, transparent 70%),
    linear-gradient(160deg, #241d2b, #0d0d10);
}

.tk-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0.55;
}

.tk-orb--1 {
  width: 180px;
  height: 180px;
  left: -30px;
  top: 90px;
  background: #ff6b4a;
}

.tk-orb--2 {
  width: 220px;
  height: 220px;
  right: -50px;
  bottom: 120px;
  background: #2ec5c1;
}

.tk-play {
  position: absolute;
  left: 50%;
  top: 46%;
  translate: -50% -50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  backdrop-filter: blur(2px);
}

.tk-play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  opacity: 0.9;
}

.tk-rail {
  position: absolute;
  right: 12px;
  bottom: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.tk-rail-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
}

.tk-rail-btn svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.tk-rail-btn--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(140deg, #d8bfae, #9d7f6b);
}

/* The tap ripple lands on the share button just before the sheet rises. */
.tk-tap {
  position: absolute;
  right: 33px;
  bottom: 137px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: demo-tap var(--dur) ease-out infinite;
}

@keyframes demo-tap {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.4);
  }
  21% {
    opacity: 0.85;
    transform: scale(1);
  }
  27%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

.tk-caption {
  position: relative;
  padding: 0 74px 22px 16px;
}

.tk-handle {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}

.tk-text {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.92;
}

/* Phase 2 — the iOS share sheet (21% -> 36%) */
.demo-sheet {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: #fff;
  border-radius: 22px;
  padding: 12px 16px 18px;
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.45);
  animation: demo-sheet var(--dur) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes demo-sheet {
  0%,
  21% {
    transform: translateY(115%);
    opacity: 0;
  }
  26%,
  32% {
    transform: translateY(0);
    opacity: 1;
  }
  38%,
  100% {
    transform: translateY(115%);
    opacity: 0;
  }
}

.ds-grab {
  width: 38px;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-3);
  margin: 0 auto 14px;
}

.ds-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.ds-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ds-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.ds-ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid transparent;
}

.ds-ico svg {
  width: 24px;
  height: 24px;
}

.ds-app--maark .ds-ico {
  background: #fff;
  color: var(--ribbon);
  border-color: color-mix(in srgb, var(--ribbon) 35%, transparent);
  animation: demo-pick var(--dur) ease-in-out infinite;
}

/* Maark lights up right before the sheet leaves — that's the "pick". */
@keyframes demo-pick {
  0%,
  31% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ribbon) 45%, transparent);
    transform: none;
  }
  34% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--ribbon) 0%, transparent);
    transform: scale(0.93);
  }
  37%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ribbon) 0%, transparent);
    transform: none;
  }
}

.ds-name {
  font-size: 11px;
  color: var(--ink-soft);
}

/* Phase 3 — Maark's own share extension (36% -> 56%).
   Mirrors ShareSheetView.tsx: kicker, domain, list chips, Mark button. */
.demo-ext {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 470px;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.5);
  padding: 28px 24px 16px;
  display: flex;
  flex-direction: column;
  text-align: left;
  animation: demo-ext var(--dur) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Must be gone before the TikTok cuts to the app at 58%, otherwise the sheet
   would appear to slide down over the Maark list instead of over the video. */
@keyframes demo-ext {
  0%,
  34% {
    transform: translateY(105%);
    opacity: 0;
  }
  40%,
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  55%,
  100% {
    transform: translateY(105%);
    opacity: 0;
  }
}

.de-kicker {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-light);
}

.de-domain {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}

.de-path {
  font-size: 13px;
  color: var(--app-text-light);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.de-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 10px;
}

.de-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.de-chip {
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  color: var(--ink);
}

.de-chip--new {
  background: transparent;
  border-style: dashed;
  border-color: var(--ribbon);
  color: var(--ribbon);
  font-weight: 600;
}

/* The target list fills in — that's the choice being made. */
.de-chip--target {
  animation: demo-chip var(--dur) ease-in-out infinite;
}

/* The colour swap is a hard cut, not a fade: an interpolated mid-state leaves
   the label unreadable against a half-filled chip. */
@keyframes demo-chip {
  0%,
  46.9% {
    background: var(--paper-2);
    border-color: var(--paper-3);
    color: var(--ink);
    transform: none;
  }
  47% {
    background: var(--ribbon);
    border-color: var(--ribbon);
    color: #fff;
    transform: scale(0.94);
  }
  49%,
  100% {
    background: var(--ribbon);
    border-color: var(--ribbon);
    color: #fff;
    transform: none;
  }
}

.de-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.de-save {
  text-align: center;
  padding: 15px 0;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  opacity: 0.45;
  animation: demo-save var(--dur) ease-in-out infinite;
}

/* Disabled until a list is picked, then pressed — mirrors canSave. */
@keyframes demo-save {
  0%,
  46% {
    opacity: 0.45;
    transform: none;
  }
  48%,
  49% {
    opacity: 1;
    transform: none;
  }
  50.5% {
    opacity: 1;
    transform: scale(0.96);
  }
  52%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.de-cancel {
  text-align: center;
  padding: 11px 0;
  font-size: 14px;
  color: var(--app-text-light);
}

/* Phase 4 — the link has landed, and stays there (56% -> end) */
.link-card--demo {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding-block: 0;
  border-width: 0 0 0 3px;
  border-left-color: var(--app-accent);
  animation: demo-card var(--dur) ease-in-out infinite;
}

.link-card--demo .demo-inner {
  overflow: hidden;
  min-height: 0;
}

@keyframes demo-card {
  0%,
  63% {
    grid-template-rows: 0fr;
    opacity: 0;
    padding-block: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    margin-bottom: -10px;
    transform: translateY(-6px);
  }
  69%,
  100% {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-block: 7px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    margin-bottom: 0;
    transform: none;
  }
}

/* Flash of the card's own surface as it lands. */
.link-card--demo .link-main {
  animation: demo-flash var(--dur) ease-in-out infinite;
  border-radius: var(--app-radius);
}

@keyframes demo-flash {
  0%,
  66% {
    background: color-mix(in srgb, var(--ribbon) 16%, transparent);
  }
  76%,
  100% {
    background: transparent;
  }
}

/* ---------- Entrance ---------- */
/* --d staggers each hero element; the phone and bubbles follow the copy. */
.reveal {
  animation: reveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--d) * 90ms);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .phone {
  animation: phone-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 260ms backwards;
}

@keyframes phone-in {
  from {
    opacity: 0;
    transform: scale(0.68) translateY(48px);
  }
  to {
    opacity: 1;
    transform: scale(0.68) translateY(0);
  }
}

/* From-only keyframe: each icon fades toward its own natural opacity,
   so the dimmed back icons don't pop at the end of the entrance. */
@keyframes source-in {
  from {
    opacity: 0;
  }
}

/* ---------- Responsive ---------- */
/* Back to the stacked, centred hero before the phone column gets squeezed. */
@media (max-width: 980px) {
  .hero {
    padding-top: 56px;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    gap: 0;
  }
  .hero-copy {
    padding-bottom: 0;
  }
  h1,
  .hero-claim,
  .lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-questions {
    align-items: center;
  }
  .hq-bubble:nth-child(2) {
    transform: translateX(22px) rotate(0.9deg);
  }
  .hq-bubble:nth-child(3) {
    transform: translateX(-12px) rotate(-0.5deg);
  }
  .hero-copy .cta-row {
    justify-content: center;
  }
  .stage {
    margin-top: 64px;
  }
}

@media (max-width: 880px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
  }
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .platforms {
    grid-template-columns: minmax(0, 1fr);
  }
  .platforms-sec {
    border-radius: 28px;
    margin: 0 16px;
  }
  .public-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .public-grid .public-visual {
    order: -1;
  }
  .public-grid .public-copy {
    order: 0;
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .split--reverse .split-copy,
  .split--reverse .split-visual {
    order: 0;
  }
  .split-visual {
    order: -1;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 18px;
  }
  .trust-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    padding: 48px 0 48px;
  }
  section {
    padding: 72px 0;
  }
  .nav-cta {
    display: none;
  }
  .stage {
    margin-top: 56px;
  }
  .source {
    top: -22px;
    left: -22px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .source svg {
    width: 23px;
    height: 23px;
  }
  .source--yt {
    --x: -146px;
  }
  .source--ig {
    --x: -162px;
  }
  .source--tt {
    --x: -144px;
  }
  .source--x {
    --x: -52px;
  }
  .source--fb {
    --x: 150px;
  }
  .source--sf {
    --x: 146px;
  }
  .source--wa {
    --x: 158px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
    transition: none !important;
    animation: none !important;
  }
  .reveal,
  .hero .phone,
  .sources,
  .demo-stage {
    opacity: 1;
  }
  .demo-tiktok,
  .demo-sheet,
  .demo-ext,
  .demo-home {
    display: none;
  }
  .screen--tinted {
    transform: none;
  }
  .link-card--demo {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-block: 7px;
    border-width: 1px 1px 1px 3px;
  }
}