/* TouchMenu website. No build step, no external fonts or scripts.
   One warm, light theme: the site never follows the system's dark mode, so a
   screenshot of the app is always shown on the paper-coloured ground it was
   designed for. */
:root {
  --bg: #fffaf4;
  --bg-warm: #fff1e4;
  --surface: #ffffff;
  --surface-2: #fdf3ea;
  --text: #1d1512;
  --muted: #6f625b;
  --line: #f2e4d7;
  --line-strong: #e8d5c4;
  --primary: #b23a1e;
  --primary-hover: #98301a;
  --primary-ink: #ffffff;
  --primary-soft: #fde9e0;
  --saffron: #f0a12c;
  --herb: #2f9e6b;
  --good: #2e7d32;
  --radius: 24px;
  --radius-sm: 14px;
  --max: 1160px;
  --shadow-sm: 0 2px 10px rgba(61, 35, 20, .06);
  --shadow: 0 20px 44px -20px rgba(61, 35, 20, .4);
  --sticker: 0 4px 0 var(--line-strong);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 750; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 20px; }
section { position: relative; padding-block: clamp(60px, 8vw, 104px); }
.section-head { max-width: 700px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 6px 14px;
  border-radius: 999px; background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* A hand-drawn looking highlight behind the words that matter. */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .04em; z-index: -1;
  height: .38em; border-radius: 999px;
  background: linear-gradient(90deg, var(--saffron), #ffd08a);
  transform: rotate(-.6deg) scaleX(0); transform-origin: left center;
  animation: mark-in .7s .35s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes mark-in { to { transform: rotate(-.6deg) scaleX(1); } }

/* Soft colour that drifts behind the big sections. */
.blobs { position: absolute; inset: -140px 0 auto; height: 620px; z-index: -2; overflow: hidden; pointer-events: none; }
.blob { position: absolute; width: 460px; height: 460px; border-radius: 50%; filter: blur(70px); opacity: .55; }
.blob.a { left: -120px; top: -60px; background: #ffd9b8; animation: drift 19s ease-in-out infinite alternate; }
.blob.b { right: -140px; top: 40px; background: #ffc9b6; animation: drift 23s 1s ease-in-out infinite alternate-reverse; }
.blob.c { left: 44%; top: 180px; width: 340px; height: 340px; background: #d8f0e2; animation: drift 27s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, 30px, 0) scale(1.12); }
}

/* A glow that follows the pointer across a section. */
.spot { isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 161, 44, .2), transparent 68%);
  opacity: 0; transition: opacity .45s ease;
}
.spot.lit::before { opacity: 1; }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  border: 2px solid transparent; font-weight: 750; font-size: 1.02rem;
  text-decoration: none; cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s cubic-bezier(.22, 1, .36, 1);
}
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 10px 24px -12px rgba(178, 58, 30, .9); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 16px 30px -12px rgba(178, 58, 30, .85); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: var(--sticker); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn svg { width: 20px; height: 20px; }
/* Buttons lean towards the pointer (site.js sets the offset). */
.magnetic { transform: translate(var(--tx, 0px), var(--ty, 0px)); }

/* Header */
.header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.18rem; }
.logo-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 12px; background: var(--primary); color: var(--primary-ink);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.logo-mark svg { width: 16px; height: 25px; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a {
  position: relative; padding: 8px 12px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-weight: 650; white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.header .btn { min-height: 44px; padding: 0 20px; font-size: .96rem; white-space: nowrap; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); }
/* Longer languages (German, Russian…) need the room, so the menu folds up early. */
@media (max-width: 1180px) {
  .menu-toggle { display: grid; place-items: center; }
  .lang-menu { margin-left: auto; }
  .lang-menu ~ .menu-toggle { margin-left: 0; }
  .nav { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 10px 20px 18px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav a { padding: 12px; }
  body.menu-open .nav { display: flex; }
  .header .btn-primary { display: none; }
}

/* Hero */
.hero { padding-block: clamp(52px, 7vw, 92px) clamp(44px, 6vw, 80px); }
.hero .wrap { display: grid; grid-template-columns: 1.04fr 1.06fr; gap: 52px; align-items: center; }
.hero p.lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 24px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; color: var(--muted); font-size: .96rem; }
.checks li { display: inline-flex; align-items: center; gap: 7px; }
.checks svg { width: 19px; height: 19px; color: var(--herb); flex: none; }
.hero-art { position: relative; }

/* An app window: the chrome around a real screenshot. */
.win {
  border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: var(--shadow); overflow: hidden;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.win-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.win-bar i:first-child { background: #f0a12c; }
.win-bar span { margin-left: 8px; color: var(--muted); font-size: .8rem; font-weight: 650; }
.win img, .win video { display: block; width: 100%; height: auto; }
.screen { border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }

/* Loops of the real app, rendered from video/web with HyperFrames. Each
   poster is the loop's first frame, so a paused, still-loading or
   reduced-motion video looks exactly like the one playing. */
.clipframe {
  position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--line-strong); background: #fbf8f6;
  box-shadow: var(--shadow);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.clipframe video { display: block; width: 100%; height: auto; }
.phoneframe {
  width: min(290px, 78vw); margin-inline: auto; padding: 10px;
  border-radius: 38px; background: #231c1a; box-shadow: var(--shadow);
}
.phoneframe video { display: block; width: 100%; height: auto; border-radius: 28px; background: #fffaf5; }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Facts that scroll past, twice over so the loop never shows a gap. */
.ticker { overflow: hidden; padding: 0; border-block: 2px dashed var(--line-strong); background: var(--surface); }
.ticker ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; animation: roll 34s linear infinite; }
.ticker li { display: inline-flex; align-items: baseline; gap: 10px; padding: 16px 30px; font-size: .98rem; }
.ticker b { font-weight: 800; }
.ticker span { color: var(--muted); }
.ticker li::after { content: ""; width: 7px; height: 7px; margin-left: 22px; border-radius: 50%; background: var(--saffron); align-self: center; }
@keyframes roll { to { transform: translateX(-50%); } }
.ticker:hover ul { animation-play-state: paused; }

/* How it works: text beside a scene that plays itself */
.steps { display: grid; gap: clamp(40px, 6vw, 72px); }
.step { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.step:nth-child(even) .step-text { order: 2; }
.step-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .45em; }
.step-text p { color: var(--muted); margin: 0; font-size: 1.04rem; }
.step-n {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 16px; background: var(--primary); color: var(--primary-ink);
  font-weight: 800; font-size: 1.15rem; box-shadow: 0 8px 18px -10px rgba(178, 58, 30, .9);
  transform: rotate(-4deg);
}
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-text { order: 0; }
}

/* The loop beside each step. */
.scene { position: relative; }

/* Features, one at a time: the feature's text beside the app's own screen
   for it. The track is a row of full-width slides that scrolls sideways and
   snaps, so a swipe works and so does a page without JS; the arrows and the
   dots move it one slide at a time. */
.feature-tour {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 8px 18px; max-width: 1280px; margin-inline: auto;
}
.tour-track {
  position: relative; display: flex; margin: 0; padding: 20px 0 52px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.tour-track::-webkit-scrollbar { display: none; }
.tour-track:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 18px; }
.tour-slide {
  flex: 0 0 100%; scroll-snap-align: center; padding-inline: 14px;
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); align-items: center;
}
.tour-text .icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px;
  border-radius: 18px; background: var(--primary-soft); color: var(--primary);
  transform: rotate(-4deg);
}
.tour-slide:nth-child(3n+2) .icon { background: #fdf0d8; color: #9a6413; }
.tour-slide:nth-child(3n) .icon { background: #e2f4ea; color: #1f7a52; }
.tour-text .icon svg { width: 27px; height: 27px; }
.tour-count { display: block; margin-bottom: 8px; color: var(--muted); font-size: .85rem; font-weight: 750; letter-spacing: .08em; }
.tour-plan { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .8rem; font-weight: 800; }
.tour-text h3 { margin: 0 0 .5em; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.tour-text p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.tour-arrow {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1px solid var(--glass-rim); border-radius: 50%; background: var(--glass-strong); color: var(--text);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm); cursor: pointer; visibility: hidden;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), background .2s, color .2s;
}
.js .tour-arrow { visibility: visible; }
.tour-arrow:hover { transform: scale(1.08); background: var(--primary); color: var(--primary-ink); }
.tour-arrow svg { width: 22px; height: 22px; }
.tour-dots { grid-column: 1 / -1; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.tour-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px;
  background: var(--line-strong); cursor: pointer; transition: width .3s, background .3s;
}
.tour-dots button[aria-current="true"] { width: 28px; background: var(--primary); }
@media (max-width: 860px) {
  .feature-tour { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tour-track { grid-column: 1 / -1; grid-row: 1; padding-bottom: 20px; }
  .tour-slide { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tour-arrow { grid-row: 2; width: 44px; height: 44px; }
  .tour-arrow.prev { grid-column: 1; }
  .tour-arrow.next { grid-column: 3; }
  .tour-dots { grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-track { scroll-behavior: auto; }
  .tour-arrow, .tour-dots button { transition: none; }
}

/* The page for an address the site doesn't have. */
.not-found { display: grid; place-items: center; min-height: calc(100vh - 260px); }
.not-found-card { display: grid; justify-items: center; gap: 10px; max-width: 34em; text-align: center; }
.not-found-plate { width: 180px; height: auto; margin-bottom: 6px; }
.not-found-card h1 { margin: 0; }
.not-found-card p { margin: 0 0 12px; }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Pricing */
.pricing { background: var(--bg-warm); border-block: 1px solid var(--line); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.plan:hover { --lift: -4px; box-shadow: var(--shadow); }
.plan.featured { border: 2px solid var(--primary); box-shadow: var(--shadow); position: relative; }
.plan .badge { position: absolute; top: -14px; left: 28px; padding: 4px 14px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: .8rem; font-weight: 800; }
.plan .price { margin: 12px 0 4px; font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; }
.plan .price .period { font-size: 1rem; color: var(--muted); font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.plan .price .soon { font-size: 1.3rem; color: var(--muted); }
/* Both prices at once: the monthly one large, the yearly one under it. */
.plan .yearly { min-height: 1.6em; margin: 0; color: var(--muted); font-size: .95rem; font-weight: 600; }
.plan .save {
  display: inline-block; padding: 2px 9px; border-radius: 999px; background: #e2f4ea; color: #1f7a52;
  font-size: .78rem; font-weight: 800; white-space: nowrap; vertical-align: 1px;
}
.plan ul { list-style: none; padding: 0; margin: 18px 0 28px; display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; line-height: 1.35; }
.plan li b { font-weight: 750; }
.plan li span { grid-column: 2; color: var(--muted); font-size: .9rem; }
.plan li::before {
  content: ""; grid-row: span 2; width: 20px; height: 20px; margin-top: 1px;
  background: var(--herb);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Standard and Pro list only what they add, each marked with a plus. */
.plan .includes {
  margin: 18px 0 0; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted); font-size: .9rem; font-weight: 700;
}
.plan .adds { margin-top: 14px; }
.plan .adds li::before {
  background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zM10.7 6.5h2.6v4.2h4.2v2.6h-4.2v4.2h-2.6v-4.2H6.5v-2.6h4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zM10.7 6.5h2.6v4.2h4.2v2.6h-4.2v4.2h-2.6v-4.2H6.5v-2.6h4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan .buy { margin-top: auto; display: grid; gap: 10px; justify-items: center; }
.plan .buy .btn { width: 100%; }
.buy-yearly { color: var(--primary); font-weight: 750; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.buy-yearly:hover { color: var(--primary-hover); }
.plans-note { margin-top: 22px; text-align: center; color: var(--muted); font-size: .93rem; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.compare { max-width: 920px; margin: 30px auto 0; }
.compare summary { display: block; width: fit-content; margin: 0 auto; padding: 11px 22px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--surface); font-weight: 750; cursor: pointer; list-style: none; }
.compare summary::-webkit-details-marker { display: none; }
.compare[open] summary { margin-bottom: 20px; }
.compare-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.compare table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare th[scope="row"] { text-align: left; font-weight: 600; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.compare thead th { background: var(--surface-2); font-weight: 800; }
.compare thead th:first-child { position: sticky; left: 0; z-index: 2; }
.compare td.y, .compare td.n { font-size: 0; }
.compare td.y::before { content: "✓"; font-size: 1.1rem; font-weight: 800; color: var(--herb); }
.compare td.n::before { content: "–"; font-size: 1.1rem; color: var(--muted); }
.compare tr.group th {
  padding: 16px 16px 8px; text-align: left; background: var(--surface-2); color: var(--primary);
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 600px) {
  .compare table { min-width: 460px; font-size: .88rem; }
  .compare th, .compare td { padding: 10px; }
  .compare th[scope="row"] { width: 44%; box-shadow: 1px 0 0 var(--line); }
}

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 10px; transition: border-color .2s; }
.faq details[open] { border-color: var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 46px 18px 20px; font-weight: 750; font-size: 1.04rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 11px; height: 11px;
  margin-top: -7px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { color: var(--muted); margin: 0; padding: 0 20px 18px; }

/* CTA + footer */
.cta { text-align: center; }
.cta .box {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 72px) 24px; border-radius: 32px;
  background: var(--bg-warm); border: 2px solid var(--line-strong);
}
.cta .hero-actions { justify-content: center; margin-bottom: 0; }
.footer { border-top: 1px solid var(--line); padding-block: 40px; color: var(--muted); font-size: .93rem; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer-note { flex-basis: 100%; margin: 0; font-size: .85rem; }
.footer-note:empty { display: none; }

/* Plain pages (download, legal, help) */
.page { padding-block: 52px 76px; }
.page .wrap { max-width: 820px; }
.page h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.page h2 { font-size: 1.4rem; margin-top: 1.8em; }
.page li { margin-bottom: .4em; }
.card { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin: 22px 0; }
.draft { padding: 14px 18px; border-radius: var(--radius-sm); background: #fff3e0; color: #7a3d00; margin-bottom: 28px; font-size: .95rem; }
ol.install { padding-left: 1.3em; }
ol.install li { margin-bottom: .8em; }

/* Language menu and hint */
.lang-menu { position: relative; }
.lang-menu summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-weight: 650; font-size: .92rem;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary svg { width: 18px; height: 18px; color: var(--muted); }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; min-width: 180px; padding: 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
}
.lang-list a { padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.lang-list a:hover { background: var(--surface-2); }
.lang-list a[aria-current] { color: var(--primary); font-weight: 700; }
.lang-hint { background: var(--primary-soft); border-bottom: 1px solid var(--line); }
.lang-hint .wrap { display: flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 600; }
.lang-hint span { flex: 1; }
.lang-hint .btn { min-height: 38px; padding: 0 16px; }
.lang-hint button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
@media (max-width: 820px) {
  .lang-menu summary span { display: none; }
  .lang-menu { margin-left: auto; }
  .lang-menu ~ .menu-toggle { margin-left: 0; }
}

/* Help centre */
.help-toc { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 26px 0 12px; }
.help-toc a { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 650; font-size: .92rem; }
.help-toc a:hover { border-color: var(--primary); color: var(--primary); }
.help section { padding-top: 8px; scroll-margin-top: 88px; }
.help ol, .help ul { padding-left: 1.3em; }
.help li { margin-bottom: .6em; }

/* Sections appear as they come into view */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.features .reveal:nth-child(3n+2), .plans .reveal:nth-child(2) { transition-delay: .08s; }
.features .reveal:nth-child(3n), .plans .reveal:nth-child(3) { transition-delay: .16s; }

/* Everything above is decoration: with reduced motion the page just sits still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .ticker ul { animation: none; }
  .mark::after { animation: none; transform: rotate(-.6deg); }
  .win, .clipframe, .feature, .plan, .host-nav button { transition: none; }
}

/* Pointer effects (site.js adds them only for a mouse, and never with
   reduced motion). */
.glow { position: relative; }
.glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--px, 50%) var(--py, 50%), rgba(240, 161, 44, .16), transparent 62%);
  opacity: 0; transition: opacity .3s ease;
}
.glow.lit::after { opacity: 1; }
.step.glow::after { inset: -18px; border-radius: 28px; }
.step:hover .step-n { transform: rotate(4deg) scale(1.08); }
.step-n { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.faq details.glow, .card.glow { overflow: hidden; }
.blobs { transform: translate(var(--bx, 0px), var(--by, 0px)); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.scene .clipframe { will-change: transform; }

.pointer-ring {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 1.5px solid rgba(178, 58, 30, .45); background: rgba(240, 161, 44, 0);
  opacity: 0; transition: opacity .25s ease, width .25s ease, height .25s ease, margin .25s ease, background .25s ease;
}
.pointer-ring.on { opacity: 1; }
.pointer-ring.grow { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(240, 161, 44, .12); border-color: rgba(178, 58, 30, .3); }
@media (prefers-reduced-motion: reduce) {
  .pointer-ring { display: none; }
  .blobs, .step-n { transition: none; }
}

/* The fade-in rule sets transform: none once a section is in view, and it is
   more specific than a card's own transform, so revealed cards get their
   lean and lift back here. */
.js .feature.reveal.in, .js .plan.reveal.in {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, border-color .25s;
}

/* Glass. Panels are translucent over a soft colour field fixed behind the
   whole page, so every frosted surface has colour to blur. App screenshots
   and loops stay solid: the app is never shown washed out. */
:root {
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 251, 246, .68);
  --glass-rim: rgba(255, 255, 255, .72);
  --glass-line: rgba(214, 190, 170, .38);
  --glass-blur: blur(18px) saturate(165%);
  --glass-shadow: 0 10px 34px -12px rgba(61, 35, 20, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 32vmax at 8% 12%, rgba(255, 196, 150, .5), transparent 70%),
    radial-gradient(34vmax 30vmax at 92% 22%, rgba(255, 170, 150, .38), transparent 70%),
    radial-gradient(40vmax 34vmax at 78% 88%, rgba(186, 228, 205, .42), transparent 72%),
    radial-gradient(30vmax 28vmax at 18% 82%, rgba(255, 214, 140, .36), transparent 70%);
}
.pricing { background: rgba(253, 243, 234, .35); }
.strip, .ticker { background: var(--glass); }

.header {
  background: rgba(255, 250, 244, .52);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-rim);
  box-shadow: 0 6px 24px -18px rgba(61, 35, 20, .35);
}
@media (max-width: 1180px) {
  .nav { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
.feature, .plan, .faq details, .card, .compare-scroll, .cta .box, .host-nav, .switch,
.lang-list, .ticker, .btn-ghost, .lang-menu summary, .menu-toggle, .compare summary, .help-toc a, .lang-hint {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--glass-rim);
  box-shadow: var(--glass-shadow);
}
.lang-list, .cta .box, .compare-scroll { background: var(--glass-strong); }
.plan.featured { border-color: var(--primary); box-shadow: var(--glass-shadow), 0 20px 44px -20px rgba(178, 58, 30, .45); }
.feature:hover, .plan:hover { background: rgba(255, 255, 255, .66); border-color: var(--glass-rim); }
.btn-ghost { box-shadow: var(--glass-shadow), var(--sticker); }
.btn-ghost:hover { background: rgba(255, 255, 255, .7); }
.compare th[scope="row"], .compare thead th { background: rgba(255, 251, 246, .85); }
.lang-list a:hover { background: rgba(255, 255, 255, .6); }

/* Without blur, or when the visitor asks for less transparency, panels are
   solid again. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .nav, .feature, .plan, .faq details, .card, .compare-scroll, .cta .box, .host-nav, .switch,
  .lang-list, .ticker, .btn-ghost, .lang-menu summary, .menu-toggle, .compare summary, .help-toc a, .lang-hint { background: rgba(255, 251, 246, .94); }
}
@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  .header, .nav, .feature, .plan, .faq details, .card, .compare-scroll, .cta .box, .host-nav, .switch,
  .lang-list, .ticker, .btn-ghost, .lang-menu summary, .menu-toggle, .compare summary, .help-toc a, .lang-hint {
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* The highlighted half of the headline used a pseudo-element that cannot
   wrap, so on mid-width screens it held the text column wide and squeezed
   the hero loop to a thumbnail. It is now a background that wraps with the
   words, each line getting its own stroke, and both hero columns may shrink. */
.hero .wrap { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.06fr); }
.mark {
  white-space: normal;
  background: linear-gradient(90deg, var(--saffron), #ffd08a) no-repeat 0 88% / 0% .36em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: mark-draw .7s .35s cubic-bezier(.22, 1, .36, 1) forwards;
}
.mark::after { display: none; }
@keyframes mark-draw { to { background-size: 100% .36em; } }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mark { animation: none; background-size: 100% .36em; } }

/* How it works: the three steps in a row. A line runs through their round
   numbers (each step draws the half on its own side of its number), then the
   title, one line of text and the step's loop. Each column is as wide as its
   loop's shape needs (a tall card fan, a phone, the wide Orders board), so
   the loops come out about the same height. On a phone the steps stack and
   the line is gone. */
#how .wrap { max-width: 1440px; }
.steps.flow {
  --gap: 32px;
  grid-template-columns: minmax(0, .8fr) minmax(217px, .46fr) minmax(0, 1.6fr);
  gap: var(--gap); align-items: stretch;
}
.steps.flow .step { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.steps.flow .step-text { position: relative; order: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.steps.flow .step-n {
  position: relative; z-index: 1; width: 56px; height: 56px; margin-bottom: 20px;
  border-radius: 50%; font-size: 1.25rem; transform: none;
  box-shadow: 0 10px 22px -10px rgba(178, 58, 30, .9);
}
.steps.flow .step-text::before, .steps.flow .step-text::after {
  content: ""; position: absolute; top: 27px; height: 2px; background: var(--line-strong);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.steps.flow .step-text::before { left: calc(var(--gap) / -2); right: 50%; transform-origin: left; }
.steps.flow .step-text::after { left: 50%; right: calc(var(--gap) / -2); transform-origin: left; }
.steps.flow .step:first-child .step-text::before, .steps.flow .step:last-child .step-text::after { display: none; }
/* The line draws itself from step 1 to step 3 as the row comes into view. */
.js .steps.flow:not(.in) .step-text::before, .js .steps.flow:not(.in) .step-text::after { transform: scaleX(0); }
.steps.flow .step:nth-child(2) .step-text::before { transition-delay: .35s; }
.steps.flow .step:nth-child(2) .step-text::after { transition-delay: .7s; }
.steps.flow .step:nth-child(3) .step-text::before { transition-delay: 1.05s; }
.steps.flow .step-text h3 { margin: 0 0 .4em; font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.steps.flow .step-text p { max-width: 36ch; font-size: .96rem; }
.steps.flow .scene { margin-top: auto; width: 100%; display: flex; justify-content: center; }
.steps.flow .clipframe { width: 100%; }
.steps.flow .phoneframe { width: min(217px, 100%); }
@media (max-width: 980px) {
  .steps.flow { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .steps.flow .step-text::before, .steps.flow .step-text::after { display: none; }
  .steps.flow .phoneframe { width: min(290px, 78vw); }
}
@media (prefers-reduced-motion: reduce) {
  .steps.flow .step-text::before, .steps.flow .step-text::after { transition: none; }
}

/* A loop opens large when clicked, to read the app up close. */
.scene .clipframe, .scene .phoneframe, .tour-slide .win { cursor: zoom-in; }
.loop-box {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 4vmin;
  background: rgba(29, 21, 18, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.loop-box[hidden] { display: none; }
.loop-box-frame {
  position: relative; width: min(1300px, 92vw); overflow: hidden; cursor: default;
  border-radius: 18px; background: #fbf8f6; box-shadow: 0 40px 90px rgba(0, 0, 0, .4);
}
.loop-box-frame video { display: block; width: 100%; height: auto; }
.loop-box-frame.tall { width: auto; }
.loop-box-frame.tall video { width: auto; height: min(86vh, 1100px); }
.loop-box-frame.phone { width: auto; padding: 12px; border-radius: 42px; background: #231c1a; }
.loop-box-frame.phone video { width: auto; height: min(84vh, 900px); border-radius: 30px; background: #fffaf5; }
.loop-box-close {
  position: fixed; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--glass-rim); background: var(--glass-strong); color: var(--text);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
body.box-open { overflow: hidden; }