/* ==========================================================================
   CHAX — shared site shell (header, footer, about) for every route.
   Light only: cream canvas, ink type, one green accent, liquid-glass menus.
   ========================================================================== */

/* Served from our own domain (SIL OFL 1.1, see /assets/fonts/OFL.txt), so pages make no third-party requests. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-800.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --site-cream: #F4EEE0;
  --site-cream-2: #EDE5D2;
  --site-ink: #16140F;
  --site-soft: #4A463C;
  --site-muted: #6F6A58;
  --site-line: rgba(22, 20, 15, .09);
  --site-green: #2FBE6A;
  --site-green-ink: #168B4C;
  --site-green-soft: #C9F1D9;
  --site-orange: #FF6B3D;
  --site-max: 1320px;
  --site-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Liquid glass: a bright, saturated blur with a specular rim on top. */
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .38) 100%);
  --glass-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .66) 100%);
  --glass-blur: blur(22px) saturate(190%);
  --glass-rim: rgba(255, 255, 255, .8);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 1px rgba(255, 255, 255, .4),
    inset 0 0 22px rgba(255, 255, 255, .28),
    0 14px 34px -12px rgba(22, 20, 15, .2),
    0 2px 6px rgba(22, 20, 15, .05);
  --glass-thumb:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(22, 20, 15, .08),
    0 6px 14px -6px rgba(22, 20, 15, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--site-ink);
  background:
    radial-gradient(60vw 48vw at -8% -6%, rgba(47, 190, 106, .17), transparent 62%),
    radial-gradient(46vw 40vw at 106% 12%, rgba(46, 155, 255, .12), transparent 62%),
    radial-gradient(56vw 46vw at 100% 104%, rgba(255, 107, 61, .11), transparent 62%),
    var(--site-cream);
  background-attachment: fixed;
  font-family: var(--site-font);
  -webkit-font-smoothing: antialiased;
}
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--site-green); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 20px 0;
  pointer-events: none;
}
.site-header__bar {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 10px;
  width: min(100%, var(--site-max)); min-height: 62px; margin: 0 auto;
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  pointer-events: auto;
}
/* The glass lives on pseudo layers so the dropdown can blur the page, not the bar. */
.site-header__bar::before,
.site-menu__panel::before,
.site-header__nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--glass-rim); border-radius: inherit;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header__bar::after {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 140% at 12% -40%, rgba(255, 255, 255, .7), transparent 46%),
    radial-gradient(80% 120% at 92% 140%, rgba(255, 255, 255, .35), transparent 50%);
  opacity: .8;
}
.site-header.is-scrolled .site-header__bar::before { background: var(--glass-fill-strong); }

.site-header__brand { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: auto; border-radius: 12px; }
.site-header__brand img { display: block; width: 84px; height: 45px; object-fit: contain; }

.site-header__nav { display: flex; align-items: center; gap: 2px; }
.site-header__nav::before { display: none; }
.site-header__nav > a,
.site-menu__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 999px;
  color: var(--site-soft); background: transparent;
  font: 600 14px/1 var(--site-font); text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.site-header__nav > a:hover,
.site-menu__trigger:hover,
.site-menu.is-open .site-menu__trigger { color: var(--site-ink); background: rgba(255, 255, 255, .5); }
.site-header__nav > a[aria-current=page],
.site-menu__trigger.is-current {
  color: var(--site-ink);
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .78));
  box-shadow: var(--glass-thumb);
}
.site-menu__trigger svg { transition: transform .25s ease; }
.site-menu.is-open .site-menu__trigger svg { transform: rotate(180deg); }

/* Legal dropdown */
.site-menu { position: relative; }
.site-menu__label { display: none; }
.site-menu__panel {
  position: absolute; top: calc(100% + 14px); right: -8px; z-index: 0;
  display: grid; gap: 2px;
  width: 310px; padding: 8px;
  border-radius: 24px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.96); transform-origin: 85% 0;
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .28s;
}
.site-menu__panel::before { background: var(--glass-fill-strong); }
.site-menu__panel::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.site-menu.is-open .site-menu__panel {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), visibility 0s;
}
@media (hover: hover) and (min-width: 821px) {
  .site-menu:hover .site-menu__panel {
    opacity: 1; visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), visibility 0s;
  }
}
.site-menu__panel a {
  display: grid; gap: 3px;
  padding: 12px 14px; border-radius: 16px;
  color: var(--site-ink); text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.site-menu__panel a strong { font-size: 14px; font-weight: 700; }
.site-menu__panel a span { color: var(--site-muted); font-size: 12px; font-weight: 500; }
.site-menu__panel a:hover { background: rgba(255, 255, 255, .7); box-shadow: var(--glass-thumb); }
.site-menu__panel a[aria-current=page] { background: rgba(201, 241, 217, .7); }
.site-menu__panel a[aria-current=page] strong { color: var(--site-green-ink); }

/* Language + mobile toggle */
.site-header__actions { display: flex; align-items: center; gap: 6px; }
.site-lang {
  display: flex; padding: 3px;
  border: 1px solid rgba(22, 20, 15, .06); border-radius: 999px;
  background: rgba(22, 20, 15, .045);
}
.site-lang a {
  display: grid; place-items: center; min-width: 38px; height: 34px; padding: 0 9px;
  border-radius: 999px; color: var(--site-muted);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.site-lang a:hover { color: var(--site-ink); }
.site-lang a[aria-current] { color: var(--site-ink); background: #fff; box-shadow: var(--glass-thumb); }

.site-header__cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 18px 0 15px; border-radius: 999px;
  background: var(--site-ink); color: #fff;
  font-size: 14px; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(22, 20, 15, .6);
  transition: background .2s ease, transform .15s ease;
}
.site-header__cta svg { width: 17px; height: 17px; }
.site-header__cta:hover { background: #2a2720; }
.site-header__cta:active { transform: scale(.97); }
.site-header__cta[aria-current=page] { background: var(--site-green); }

.site-header__toggle {
  display: none; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--site-ink); color: #fff; cursor: pointer;
}
.site-header__toggle span { grid-area: 1 / 1; display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease; }
.site-header__toggle span:first-child { transform: translateY(-3.5px); }
.site-header__toggle span:last-child { transform: translateY(3.5px); }
.site-header.is-open .site-header__toggle span:first-child { transform: rotate(45deg); }
.site-header.is-open .site-header__toggle span:last-child { transform: rotate(-45deg); }

@media (max-width: 820px) {
  .site-header { padding: 10px 12px 0; }
  .site-header__bar { min-height: 58px; padding: 6px 6px 6px 16px; }
  .site-header__brand img { width: 76px; height: 41px; }
  .site-header__toggle { display: grid; }
  .site-header__cta { height: 40px; padding: 0 13px 0 11px; font-size: 13px; }
  .site-lang a { height: 38px; }

  /* The nav becomes a glass sheet under the bar. */
  .site-header__nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px; border-radius: 28px;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px) scale(.97); transform-origin: 50% 0;
    transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .3s;
  }
  /* The sheet scrolls on short screens, so its glass sits on the sheet itself: a ::before layer would scroll away
     with the links (leaving the lower ones bare) and iOS Safari can paint its backdrop over the links above. */
  .site-header__nav {
    border: 1px solid var(--glass-rim);
    background: var(--glass-fill-strong);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  /* The page behind an open sheet does not scroll (site.js adds the class; see holdPage for older iOS). Only <html>:
     hiding overflow on <body> too would make it the sticky header's scroll box and push the header off screen. */
  html.site-menu-open { overflow: hidden; overscroll-behavior: none; }
  /* A closed sheet never takes taps, even during its fade-out (and wherever transitions are paused). */
  .site-header:not(.is-open) .site-header__nav { pointer-events: none; }
  .site-header.is-open .site-header__nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2), visibility 0s;
  }
  .site-header__nav > a { min-height: 42px; padding: 0 16px; border-radius: 16px; font-size: 16px; }
  .site-menu { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--site-line); }
  .site-menu__trigger { display: none; }
  .site-menu__label {
    display: block; padding: 8px 16px 4px;
    color: var(--site-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  }
  /* Inside the sheet the lists follow the sheet: "inherit", not "visible", or their links stay tappable
     (though invisible) over the page while the sheet is closed. */
  .site-menu__panel,
  .site-menu.is-open .site-menu__panel {
    position: static; width: auto; padding: 0;
    opacity: 1; visibility: inherit; transform: none; transition: none;
  }
  .site-menu__panel::before, .site-menu__panel::after { display: none; }
  .site-menu__panel a { border-radius: 16px; }
  /* With two groups the sheet is long: drop the one-line descriptions and let it scroll on short screens. */
  .site-menu__panel a span { display: none; }
  /* Tighter rows that stay finger-sized (40px). */
  .site-menu__panel { gap: 0; }
  .site-menu__panel a { min-height: 40px; align-content: center; padding: 6px 16px; }
  .site-header__nav { max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Footer ---------- */
.chax-footer { position: relative; z-index: 1; padding: 40px 20px 20px; color: var(--site-ink); font-family: var(--site-font); }
.chax-footer__inner {
  position: relative; z-index: 0;
  width: min(100%, var(--site-max)); margin: 0 auto;
  padding: 52px 52px 26px;
  border-radius: 34px;
}
.chax-footer__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--glass-rim); border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .42));
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.chax-footer__top {
  display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(120px, 1fr));
  gap: 32px; padding-bottom: 44px;
}
.chax-footer__brand { display: inline-flex; border-radius: 12px; }
.chax-footer__brand img { display: block; width: 112px; height: 60px; object-fit: contain; }
.chax-footer__intro { max-width: 320px; margin: 14px 0 0; color: var(--site-soft); font-size: 14px; line-height: 1.7; font-weight: 500; }
.chax-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chax-footer__column h2 { margin: 6px 0 10px; color: var(--site-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chax-footer__column a {
  margin-left: -10px; padding: 6px 10px; border-radius: 10px;
  color: var(--site-ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.chax-footer__column a:hover { background: rgba(255, 255, 255, .75); }
.chax-footer__column a[aria-current=page] { color: var(--site-green-ink); }
.chax-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-top: 22px; border-top: 1px solid var(--site-line);
  color: var(--site-muted); font-size: 12px; font-weight: 600;
}
.chax-footer__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.chax-footer__lang { display: flex; gap: 4px; }
.chax-footer__lang a { padding: 5px 10px; border-radius: 999px; color: var(--site-muted); font-weight: 700; text-decoration: none; }
.chax-footer__lang a:hover { color: var(--site-ink); }
.chax-footer__lang a[aria-current] { color: var(--site-ink); background: #fff; box-shadow: var(--glass-thumb); }

@media (max-width: 1100px) {
  .chax-footer__top { grid-template-columns: repeat(4, 1fr); }
  .chax-footer__identity { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .chax-footer { padding: 28px 12px 12px; }
  .chax-footer__inner { padding: 36px 24px 22px; border-radius: 28px; }
  .chax-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding-bottom: 32px; }
  /* Finger-sized targets: links stack tighter but each row is 40px tall. */
  .chax-footer__column { gap: 0; }
  .chax-footer__column a { display: flex; align-items: center; min-height: 40px; padding-block: 4px; }
  .chax-footer__lang a { display: inline-flex; align-items: center; min-height: 40px; }
  .chax-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Home ---------- */
.home { position: relative; z-index: 1; display: block; width: min(100% - 40px, var(--site-max)); margin: 0 auto; padding: 0 0 24px; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: center; gap: clamp(56px, 7vw, 96px); min-height: 600px; padding: 40px 0 56px; }
.about-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.about-section-heading > span { color: var(--site-green-ink); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.about-hero h1 { max-width: 680px; margin: 22px 0 18px; font-size: clamp(42px, 5.6vw, 78px); line-height: 1.04; letter-spacing: -.055em; }
.about-hero h1 .accent { color: var(--site-green); }
.about-hero p { max-width: 520px; margin: 0; color: var(--site-soft); font-size: 17px; line-height: 1.7; font-weight: 500; }
/* Social links sit centred under the pair of store badges. */
.about-hero .home-cta { display: flex; flex-direction: column; align-items: center; margin-top: 30px; }
.about-hero .store-row { margin-top: 0; }
.about-hero .social-row { margin-top: 22px; }
.about-hero .social-btn { border-width: 1px; border-color: var(--glass-rim); background: rgba(255, 255, 255, .6); box-shadow: var(--glass-thumb); }
.about-hero .social-btn:hover { border-color: var(--site-ink); background: var(--site-ink); color: #fff; }

.about-art {
  position: relative; height: 480px; overflow: hidden;
  border: 1px solid var(--glass-rim); border-radius: 32px;
  background:
    radial-gradient(circle at 22% 24%, rgba(47, 190, 106, .45), transparent 40%),
    radial-gradient(circle at 82% 30%, rgba(46, 155, 255, .32), transparent 36%),
    radial-gradient(circle at 70% 82%, rgba(255, 107, 61, .34), transparent 38%),
    radial-gradient(circle at 20% 86%, rgba(62, 214, 196, .35), transparent 36%),
    var(--site-cream-2);
  box-shadow: var(--glass-shadow);
}
.about-art__circle {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: min(70%, 300px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid var(--glass-rim); border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .3));
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* The startup wordmark lands on this logo, so its box must match the artwork's ratio. */
.about-art__circle .hero-logo { width: 80%; height: auto; aspect-ratio: 1710 / 920; filter: drop-shadow(0 12px 22px rgba(22, 20, 15, .16)); }
.about-art__card {
  position: absolute; z-index: 2; max-width: 230px; padding: 14px 18px;
  border: 1px solid var(--glass-rim); border-radius: 18px;
  background: var(--glass-fill-strong);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--site-ink); font-size: 13px; font-weight: 700;
}
.about-art__card--one { top: 36px; left: 24px; transform: rotate(-6deg); }
.about-art__card--one span { color: var(--site-orange); }
.about-art__card--two { right: 18px; bottom: 40px; transform: rotate(4deg); color: var(--site-green-ink); }

.about-steps { padding: 56px 0; border-top: 1px solid var(--site-line); scroll-margin-top: 90px; }
.about-section-heading h2 { max-width: 680px; margin: 14px 0 32px; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.045em; }
.about-section-heading h2:has(+ p) { margin-bottom: 12px; }
.about-section-heading p { max-width: 560px; margin: 0 0 32px; color: var(--site-soft); font-size: 16px; line-height: 1.7; font-weight: 500; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Shared card surface for steps and features. */
.step-card, .feature-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--glass-rim); border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .42));
  box-shadow: var(--glass-shadow);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease;
}
.step-card:hover, .feature-card:hover { transform: translateY(-3px); }
.step-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 28px; }
.step-card .guide-art { margin: 0 auto 0 -8px; }
.step-card__num { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--site-green-soft); color: var(--site-green-ink); font-size: 11px; font-weight: 800; }
.step-card h3, .feature-card h3 { margin: 14px 0 6px; font-size: 22px; line-height: 1.2; letter-spacing: -.03em; }
.step-card p, .feature-card p { margin: 0; color: var(--site-soft); font-size: 14px; line-height: 1.7; font-weight: 500; }

/* ---------- Features (bento) ---------- */
.features { padding: 56px 0; border-top: 1px solid var(--site-line); scroll-margin-top: 90px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { display: flex; flex-direction: column; padding: 22px 26px 28px; }
.feature-card .guide-art { margin: 0 0 6px -8px; }
.feature-card--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 28px; padding: 28px 36px; }
.feature-card--wide .guide-art { margin: 0; }
.feature-card--wide h3 { font-size: 28px; }
.feature-card--wide p { max-width: 420px; font-size: 15px; }
.feature-card__label { color: var(--site-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.feature-card__body { min-width: 0; }

/* ---------- Guide art: web port of the app's GuideArt illustration ---------- */
.guide-art { --size: 104px; position: relative; flex: 0 0 auto; width: calc(var(--size) * 1.35); height: var(--size); }
.guide-art--lg { --size: 150px; }
.guide-art > * { position: absolute; }
.guide-art__blob {
  left: calc(var(--size) * .2); top: calc(var(--size) * .03);
  width: calc(var(--size) * .95); height: calc(var(--size) * .95); border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 18%, transparent);
}
.guide-art__blob--2 {
  left: calc(var(--size) * .86); top: calc(var(--size) * .5);
  width: calc(var(--size) * .42); height: calc(var(--size) * .42);
  background: color-mix(in srgb, var(--tone-2) 18%, transparent);
}
.guide-art__dot { border-radius: 50%; }
.guide-art__dot--1 { left: calc(var(--size) * .12); top: calc(var(--size) * .2); width: 7px; height: 7px; background: rgba(245, 166, 35, .8); }
.guide-art__dot--2 { left: calc(var(--size) * 1.17); top: calc(var(--size) * .14); width: 5px; height: 5px; background: rgba(62, 214, 196, .8); }
.guide-art__dot--3 { left: calc(var(--size) * .32); top: calc(var(--size) * .86); width: 6px; height: 6px; background: rgba(255, 107, 61, .7); }
.guide-art__tile {
  left: calc(var(--size) * .375); top: calc(var(--size) * .2 - 2px);
  display: grid; place-items: center; overflow: hidden;
  width: calc(var(--size) * .6); height: calc(var(--size) * .6); border-radius: calc(var(--size) * .19);
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--tone) 12%, transparent), color-mix(in srgb, var(--tone) 12%, transparent)), #FFFDF7;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
  color: var(--tone);
  transform: rotate(-8deg);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.3);
}
.guide-art__tile svg { width: calc(var(--size) * .29); height: calc(var(--size) * .29); }
.guide-art__tile--image img { width: 66%; height: 66%; object-fit: contain; }
.guide-art__chip {
  display: grid; place-items: center;
  width: calc(var(--size) * .29); height: calc(var(--size) * .29); border-radius: 50%;
  border: 1px solid rgba(22, 20, 15, .12); background: #FFFDF7;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
  color: var(--chip);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.3);
}
.guide-art__chip svg { width: calc(var(--size) * .145); height: calc(var(--size) * .145); }
.guide-art__chip--left { left: calc(var(--size) * .16); top: calc(var(--size) * .56); transform: rotate(-6deg); }
.guide-art__chip--right { left: calc(var(--size) * .98); top: calc(var(--size) * .12); transform: rotate(8deg); }
:is(.step-card, .feature-card):hover .guide-art__tile { transform: rotate(-2deg) translateY(-4px) scale(1.05); }
:is(.step-card, .feature-card):hover .guide-art__chip--left { transform: rotate(-12deg) translate(-4px, 3px); }
:is(.step-card, .feature-card):hover .guide-art__chip--right { transform: rotate(14deg) translate(4px, -3px); }

/* Achievements: three of the app's medals fanned out. */
.guide-art__medal { top: calc(var(--size) * .14); width: calc(var(--size) * .58); height: auto; filter: drop-shadow(0 8px 14px rgba(22, 20, 15, .18)); transition: transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.guide-art__medal--1 { left: calc(var(--size) * .1); transform: rotate(-14deg) scale(.86); }
.guide-art__medal--2 { z-index: 1; left: calc(var(--size) * .385); top: calc(var(--size) * .06); }
.guide-art__medal--3 { left: calc(var(--size) * .67); transform: rotate(14deg) scale(.86); }
.feature-card:hover .guide-art__medal--1 { transform: rotate(-20deg) scale(.86) translateX(-6px); }
.feature-card:hover .guide-art__medal--2 { transform: translateY(-5px) scale(1.04); }
.feature-card:hover .guide-art__medal--3 { transform: rotate(20deg) scale(.86) translateX(6px); }

/* ---------- Categories (marquee) ---------- */
.categories { padding: 56px 0 64px; border-top: 1px solid var(--site-line); }
.category-row {
  display: flex; overflow: hidden;
  margin: 0 -20px; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.category-row + .category-row { margin-top: 12px; }
.category-row__track {
  display: flex; flex: 0 0 auto; gap: 12px; margin: 0; padding: 0 6px; list-style: none;
  animation: category-slide 48s linear infinite;
}
.category-row--reverse .category-row__track { animation-direction: reverse; }
.category-row:hover .category-row__track { animation-play-state: paused; }
@keyframes category-slide { to { transform: translateX(-100%); } }
.category-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px 8px 8px; border: 1px solid var(--glass-rim); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5));
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(22, 20, 15, .22);
  white-space: nowrap; font-size: 15px; font-weight: 700;
}
.category-chip img { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .9); object-fit: contain; padding: 4px; }

.about-seo {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px 56px;
  margin: 0 0 16px; padding: 44px 48px;
  border: 1px solid var(--glass-rim); border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .36));
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  scroll-margin-top: 90px;
}
.about-seo .about-section-heading h2 { margin-bottom: 0; }
.about-seo p { margin: 0; color: var(--site-soft); font-size: 16px; line-height: 1.8; font-weight: 500; }

.about-note { display: flex; gap: 24px; padding: 36px; border-radius: 28px; background: var(--site-ink); color: #fff; }
.about-note > span { color: var(--site-green); font-size: 34px; line-height: 1; }
.about-note h2 { margin: 0 0 10px; font-size: 26px; letter-spacing: -.035em; }
.about-note p { max-width: 680px; margin: 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.75; }
.about-note a { display: inline-block; margin-top: 18px; color: var(--site-green-soft); font-size: 14px; font-weight: 700; text-decoration: none; }
.about-note a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr 1fr; gap: 28px; }
  .about-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid .step-card:last-child { grid-column: span 2; }
  .feature-card--wide { grid-column: span 2; }
  .about-art { height: 380px; }
}
@media (max-width: 730px) {
  .home { width: calc(100% - 24px); }
  /* Art first on phones: the startup logo must land inside the first screen. */
  .about-hero { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 18px 0 40px; }
  .about-art { order: -1; height: 300px; border-radius: 28px; }
  .about-art__circle { width: min(62%, 230px); }
  .about-hero__copy { padding: 0 4px; }
  .about-hero h1 { margin-top: 18px; font-size: clamp(38px, 10.5vw, 56px); }
  .about-hero p { font-size: 16px; }
  .about-grid, .feature-grid { grid-template-columns: 1fr; }
  .about-grid .step-card:last-child, .feature-card--wide { grid-column: auto; }
  /* Phones: art beside the text keeps the twelve cards to a comfortable scroll. */
  .step-card, .feature-card, .feature-card--wide { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px 16px 10px; border-radius: 24px; }
  .step-card .guide-art, .feature-card .guide-art, .feature-card--wide .guide-art { --size: 72px; margin: 0; }
  .step-card__body { min-width: 0; }
  .step-card h3, .feature-card h3, .feature-card--wide h3 { margin: 6px 0 4px; font-size: 18px; }
  .step-card p, .feature-card p, .feature-card--wide p { font-size: 13px; line-height: 1.6; }
  .guide-art__dot--1, .guide-art__dot--2, .guide-art__dot--3 { width: 5px; height: 5px; }
  .about-steps, .features, .categories { padding: 40px 0; }
  .category-row { margin: 0 -12px; }
  .category-chip { font-size: 13px; }
  .category-chip img { width: 38px; height: 38px; }
  .about-seo { grid-template-columns: 1fr; padding: 30px 24px; border-radius: 26px; }
  .about-seo p { font-size: 15px; }
  .about-note { display: block; padding: 28px; }
  .about-note > span { display: block; margin-bottom: 12px; }
}
@media (max-width: 430px) {
  .about-art__card { padding: 10px 12px; font-size: 11px; }
  .about-art__card--one { top: 18px; left: 16px; }
  .about-art__card--two { bottom: 18px; right: 14px; }
}

/* Small phones (320-400px): the download button keeps only its icon so the bar fits; its aria-label still names it. */
@media (max-width: 400px) {
  .site-header__bar { gap: 6px; padding-left: 12px; }
  .site-header__brand img { width: 68px; height: 37px; }
  .site-header__cta { width: 40px; padding: 0; justify-content: center; }
  .site-header__cta span { display: none; }
  .site-lang a { min-width: 34px; padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .category-row { overflow-x: auto; }
  .category-row__track { animation: none; }
  .category-row__track[aria-hidden] { display: none; }
}