/* Fluye web, light only. Built like a big-brand app site: white page, soft grey rounded
   panels, centred statements with lots of air, real app screens with the app's own chips
   floating over them, and outlined flat illustrations. Type: Bricolage Grotesque (the app's
   display face) at a friendly 600 for headings, Figtree for reading. */
:root {
  --white: #FFFFFF;
  --paper: #F2F3F7;
  --paper-2: #E8E9EF;
  --ink: #121216;
  --ink-2: #3D3F4A;
  --muted: #62646F;
  --violet: #6A3DF0;
  --violet-ink: #4F25C9;
  --lilac: #E9E2FF;
  --lime: #C9F37D;
  --lime-soft: #EAFBC9;
  --yellow: #FFE58A;
  --sky: #D6EDFF;
  --pink: #FFE0E8;
  --free: #22A861;
  --slow: #F2C230;
  --jam: #E23D3D;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wrap: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 18px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(44px, 4.6vw + 24px, 112px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(34px, 2vw + 22px, 52px); line-height: 1.12; }
h3 { font-size: clamp(26px, 1vw + 20px, 36px); line-height: 1.15; }
h4 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 80; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 64px); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.narrow { max-width: 860px; margin-inline: auto; }
.center { text-align: center; }
.center .row { justify-content: center; }
.eyebrow { font: 700 12.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display: block; }
.sub { font: 500 clamp(20px, .6vw + 17px, 26px)/1.4 var(--display); letter-spacing: -0.01em; color: var(--ink-2); max-width: 30em; }
.center .sub { margin-inline: auto; }
.body { color: var(--muted); max-width: 34em; }
.statement { font: 600 clamp(32px, 2.4vw + 20px, 56px)/1.16 var(--display); letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; margin-inline: auto; }
.statement em { font-style: normal; color: var(--violet); }
.small { font-size: 15px; }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ header + mega menus */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); transition: background-color .3s; }
.top.on-white { background: var(--white); }
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 800 30px/1 var(--display); letter-spacing: -0.045em; color: var(--ink); justify-self: center; }
.brand svg { width: 28px; height: 33px; }
.nav, .nav-right { display: flex; gap: 4px; align-items: center; height: 100%; }
.nav-item { height: 100%; display: flex; align-items: center; }
.nav-right { justify-self: end; }
.nav-item { position: relative; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border-radius: 999px; border: 0; background: none; font: 600 16px/1 var(--text); color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color .2s; white-space: nowrap; }
.pill:hover, .pill[aria-expanded="true"], .pill[aria-current="page"] { background: var(--white); }
.top.on-white .pill:hover, .top.on-white .pill[aria-expanded="true"], .top.on-white .pill[aria-current="page"] { background: var(--paper); }
.pill.cta { background: var(--white); padding: 0 22px; }
.top.on-white .pill.cta { background: var(--ink); color: #fff; }
.pill .chev { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.pill[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% - 4px); left: -16px; width: min(620px, calc(100vw - 32px)); background: var(--white); border-radius: 30px; padding: 16px; display: grid; grid-template-columns: 250px 1fr; gap: 26px;  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s .16s; }
.nav-item.open .mega { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.mega-card { display: grid; gap: 4px; background: var(--paper); border-radius: 14px; padding: 0 0 18px; overflow: hidden; text-decoration: none; }
.mega-card .art-box { height: 160px; display: grid; place-items: center; padding: 16px; }
.mega-card .art-box.lilac { background: var(--lilac); } .mega-card .art-box.lime { background: var(--lime-soft); } .mega-card .art-box.sky { background: var(--sky); }
.mega-card .art-box .pix { max-height: 128px; width: auto; max-width: 100%; }
.mega-card b { font: 600 18px/1.2 var(--display); padding: 14px 18px 0; }
.mega-card span { font-size: 14px; color: var(--muted); padding: 0 18px; line-height: 1.4; }
.mega-links { display: grid; align-content: start; gap: 2px; padding-top: 14px; }
.mega-links .head { font: 600 21px/1.2 var(--display); margin-bottom: 10px; letter-spacing: -0.01em; }
.mega-links a { text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--ink-2); padding: 9px 0; }
.mega-links a:hover { color: var(--violet); }
.menu-btn { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.sheet { display: none; }
@media (max-width: 1040px) {
  .top-in { grid-template-columns: auto 1fr auto; gap: 8px; }
  .brand { justify-self: start; order: -1; }
  .nav { display: none; }
  .nav-right { gap: 8px; }
  .nav-right .pill:not(.cta) { display: none; }
  .menu-btn { display: inline-flex; }
  .sheet[data-open="true"] { display: block; position: fixed; inset: calc(72px + env(safe-area-inset-top, 0px)) 0 0; z-index: 49; background: var(--paper); overflow-y: auto; padding: 8px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
  .sheet .group { padding-block: 16px; }
  .sheet .group + .group { box-shadow: inset 0 1px 0 var(--paper-2); }
  .sheet .group b { display: block; font: 700 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .sheet a { display: block; text-decoration: none; font: 600 26px/1.2 var(--display); letter-spacing: -0.02em; padding: 8px 0; }
}
@media (max-width: 460px) { .pill.cta { padding: 0 16px; } }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 16.5px/1 var(--text); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; }
.btn.white { background: var(--white); color: var(--ink); }
.btn.grey { background: var(--paper); color: var(--ink); }
.btn.violet { background: var(--violet); }
.btn.sm { height: 44px; padding: 0 20px; font-size: 15px; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { font-weight: 700; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.link svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.store { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 16px; border-radius: 16px; background: var(--ink); color: #fff; text-decoration: none; transition: transform .2s var(--ease); }
.store:hover { transform: translateY(-2px); }
.store svg { width: 26px; height: 26px; }
.store span { display: grid; line-height: 1.15; font-size: 11.5px; font-weight: 600; text-align: left; }
.store b { font: 700 18px/1.1 var(--text); }
.store.soon { background: var(--paper-2); color: var(--ink); pointer-events: none; }

/* ------------------------------------------------------------------ sections */
.hero { background: var(--paper); padding-block: clamp(40px, 6vw, 96px) 0; }
.hero h1 { max-width: 13ch; margin-inline: auto; }
.hero .sub { margin-top: 28px; }
.hero .row { margin-top: 40px; }
.hero.solo { padding-bottom: clamp(72px, 9vw, 128px); }
.band { padding-block: clamp(88px, 11vw, 168px); }
.band.tight { padding-block: clamp(64px, 8vw, 112px); }
.paper { background: var(--paper); }
.panel-band { background: var(--paper); border-radius: clamp(32px, 4vw, 56px); margin-inline: clamp(0px, 1vw, 16px); padding-block: clamp(72px, 9vw, 140px); }
.head-gap { margin-bottom: clamp(48px, 6vw, 88px); }

/* hero video, grows to full width as you scroll */
.reel { margin-top: clamp(56px, 6vw, 88px); position: relative; }
.reel-frame { border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0; overflow: hidden; background: #F7F7F7; aspect-ratio: 16 / 9; width: min(100% - 40px, 1240px); margin-inline: auto; }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel-ctl { position: absolute; right: max(40px, calc((100% - 1240px) / 2 + 28px)); bottom: 28px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.reel-ctl svg { width: 20px; height: 20px; }

/* split feature rows */
.split { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.flip > :first-child { order: 2; } }
.split .copy { display: grid; gap: 22px; align-content: center; max-width: 520px; }
.split .copy .eyebrow { margin-bottom: -4px; }
.split .copy .row { margin-top: 8px; }
.rows { display: grid; gap: clamp(96px, 12vw, 176px); }

/* media tile: colored rounded tile, a real app screen and the app's chips floating over it */
.tile { position: relative; border-radius: clamp(28px, 4vw, 48px); aspect-ratio: 1 / 1.04; overflow: hidden; }
.tile.lilac { background: var(--lilac); } .tile.lime { background: var(--lime-soft); } .tile.sky { background: var(--sky); } .tile.yellow { background: var(--yellow); } .tile.pink { background: var(--pink); } .tile.grey { background: var(--paper); } .tile.white { background: var(--white); }
.tile .screen { position: absolute; left: 50%; top: 12%; width: 54%; translate: -50% 0; border-radius: 36px; overflow: hidden; background: #fff; outline: 9px solid var(--ink); }
.tile .screen img { width: 100%; }
.tile .art-in { position: absolute; inset: 12% 10%; display: grid; place-items: center; }
.chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 18px; background: var(--white); color: var(--ink); font: 700 16px/1.25 var(--text);  white-space: nowrap; letter-spacing: -0.005em; }
.chip svg { width: 20px; height: 20px; flex: none; }
.chip.lime { background: var(--lime); }
.chip.ink { background: var(--ink); color: #fff; }
.chip.violet { background: var(--violet); color: #fff; }
.chip.note { border-radius: 22px; white-space: normal; width: min(300px, 74%); align-items: flex-start; padding: 16px 18px; gap: 12px; }
.chip.note .txt { display: grid; gap: 3px; min-width: 0; }
.chip.note .txt b { font: 700 16.5px/1.25 var(--text); }
.chip.note .txt span { color: var(--ink-2); font-weight: 500; font-size: 14.5px; line-height: 1.4; }
.chip .app { width: 38px; height: 38px; border-radius: 12px; background: var(--lilac); display: grid; place-items: center; flex: none; }
.chip .app svg { width: 22px; height: 26px; }
.chip.cut { border-radius: 0; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);  padding: 16px 24px; display: grid; gap: 3px; }
.chip.cut b { font: 700 19px/1.1 var(--display); }
.chip.cut span { font-size: 14px; font-weight: 600; }
@media (max-width: 560px) { .chip { font-size: 14px; padding: 11px 15px; } .chip.note { width: 80%; } .chip.note .txt b { font-size: 15px; } .chip.note .txt span { font-size: 13.5px; } }

/* home: the day, step by step, with the phone kept in the middle of the screen */
.story { position: relative; }
.story-grid { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 96px); } }
.story-texts { display: grid; gap: 72px; }
.story-text { display: grid; gap: 18px; max-width: 470px; }
.story-text .when { font: 700 clamp(56px, 5vw, 84px)/.9 var(--display); letter-spacing: -0.05em; color: var(--violet); font-variant-numeric: tabular-nums; }
.story-visual { width: 100%; }
@media (min-width: 900px) {
  .story.js .story-texts { gap: 0; order: 2; }
  .story.js .story-text { min-height: 100vh; align-content: center; transition: opacity .5s var(--ease); }
  .story.js .story-text:not(.on) { opacity: .22; }
  .story.js .story-visuals { position: sticky; top: calc((100vh - min(74vh, 620px)) / 2 + 36px); height: min(74vh, 620px); align-self: start; }
  .story.js .story-visual { position: absolute; inset: 0; }
  .story.js .story-visual .tile { height: 100%; aspect-ratio: auto; }
  .story-dots { position: absolute; left: -36px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; }
  .story-dots i { width: 10px; height: 10px; border-radius: 3px; background: var(--paper-2); transition: background-color .3s, transform .3s; }
  .story-dots i.on { background: var(--violet); transform: scale(1.3); }
}
@media (max-width: 899px) { .story-visuals { display: none; } }
@media (min-width: 900px) { .story-text .mobile-tile { display: none; } }

/* cards carousel */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 80vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px max(20px, calc((100vw - var(--wrap)) / 2)) 24px; scroll-padding-inline: max(20px, calc((100vw - var(--wrap)) / 2)); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; border-radius: 32px; padding: 12px 12px 26px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--ink); transition: transform .4s var(--ease); }
.rail .card:nth-child(even) { margin-top: 28px; }
.card:hover { transform: translateY(-6px); }
.card .art-box { border-radius: 20px; height: 220px; display: grid; place-items: center; padding: 22px; background: rgba(255,255,255,.6); }
.card .art-box .art { max-height: 100%; width: auto; max-width: 100%; }
.card .kind { font: 700 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 14px 0; }
.card h4 { padding: 0 14px; }
.card p { padding: 0 14px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.card .btn { justify-self: start; margin: 8px 14px 0; }
.card.lilac { background: var(--lilac); } .card.lime { background: var(--lime-soft); } .card.sky { background: var(--sky); } .card.yellow { background: var(--yellow); } .card.pink { background: var(--pink); } .card.grey { background: var(--paper); } .card.white { background: var(--white); }
.rail-ctl { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.rail-ctl button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: opacity .2s; }
.rail-ctl button:disabled { opacity: .35; cursor: default; }
.band:not(.paper):not(.panel-band) .rail-ctl button { background: var(--paper); }
.rail-ctl svg { width: 20px; height: 20px; }

/* mosaic */
.mosaic { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; } }
.mosaic > * { border-radius: 30px; overflow: hidden; position: relative; min-width: 0; }
.mosaic .w2 { grid-column: span 2; } .mosaic .h2 { grid-row: span 2; }
.mosaic > img, .mosaic picture img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .fill { display: grid; place-items: center; padding: 22px; text-align: center; align-content: center; gap: 6px; }
.mosaic .big { font: 700 clamp(48px, 5vw, 80px)/1 var(--display); letter-spacing: -0.045em; }
.mosaic .fill .art, .mosaic .fill > svg { max-height: 100%; width: auto; height: 100%; }
.mosaic .shot { background: var(--paper); display: grid; place-items: start center; padding-top: 26px; }
.mosaic .shot img { width: 62%; height: auto; border-radius: 26px; outline: 8px solid var(--ink); }
.mosaic .lilac { background: var(--lilac); } .mosaic .lime { background: var(--lime); } .mosaic .sky { background: var(--sky); } .mosaic .yellow { background: var(--yellow); } .mosaic .violet { background: var(--violet); color: #fff; } .mosaic .ink { background: var(--ink); color: #fff; } .mosaic .pink { background: var(--pink); }

/* list with a moving line (accordion) */
.lines { display: grid; }
.lines button { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; padding: 16px 0 16px 30px; position: relative; font: 600 21px/1.3 var(--display); letter-spacing: -0.01em; color: var(--muted); }
.lines button::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--paper-2); transition: background-color .3s; }
.lines button[aria-expanded="true"] { color: var(--ink); }
.lines button[aria-expanded="true"]::before { background: var(--violet); }
.lines .more { padding: 0 0 14px 30px; color: var(--muted); font-size: 17px; max-width: 34em; }
.lines button:focus-visible { outline: 3px solid var(--violet); border-radius: 10px; }

/* steps with the app's own art */
.steps { display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { background: var(--paper); border-radius: 32px; padding: 12px 12px 30px; display: grid; gap: 12px; align-content: start; }
.white-steps .step { background: var(--white); }
.step .art-box { background: var(--white); border-radius: 20px; height: 240px; display: grid; place-items: center; padding: 22px; overflow: hidden; }
.white-steps .step .art-box { background: var(--paper); }
.step .art-box img, .step .art-box .art { max-height: 100%; width: auto; max-width: 100%; }
.step h4 { padding: 8px 14px 0; display: flex; gap: 12px; align-items: center; }
.step h4::before { counter-increment: s; content: counter(s); font: 700 15px/1 var(--text); width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-grid; place-items: center; flex: none; }
.step p { padding: 0 14px; color: var(--muted); font-size: 16.5px; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--paper); border-radius: 24px; }
.faq summary { list-style: none; cursor: pointer; padding: 24px 70px 24px 28px; font: 600 20px/1.35 var(--display); letter-spacing: -0.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { position: absolute; right: 26px; top: 50%; width: 22px; height: 22px; margin-top: -11px; transition: transform .3s var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .answer { padding: 0 28px 26px; color: var(--muted); max-width: 64ch; }
.faq .answer p + p { margin-top: .8em; }
.faq-group + .faq-group { margin-top: 64px; }
.faq-group > h3 { margin-bottom: 22px; }
.search-box { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; border-radius: 999px; background: var(--white); max-width: 560px; margin: 40px auto 0; }
.search-box svg { width: 22px; height: 22px; flex: none; }
.search-box input { border: 0; outline: 0; background: none; font: 500 18px/1 var(--text); color: var(--ink); width: 100%; min-width: 0; }
.search-box:focus-within { outline: 3px solid var(--violet); }

/* legal */
.legal { max-width: 760px; margin-inline: auto; }
.legal section + section { margin-top: 48px; }
.legal h3 { margin-bottom: 12px; font-size: 26px; }
.legal p { color: var(--ink-2); }

/* grids of cards (contact, community, versions) */
.cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards .card { padding-bottom: 30px; }
.cards .card .art-box { height: 250px; }
.version-card .v { font: 700 68px/1 var(--display); letter-spacing: -0.045em; padding: 4px 14px 0; }
.version-card ul { margin: 0; padding: 0 14px 0 34px; display: grid; gap: 8px; color: var(--ink-2); font-size: 16px; }

/* swatches */
.swatches { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.swatch { border: 0; border-radius: 26px; min-height: 170px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; text-align: left; font: inherit; cursor: pointer; }
.swatch b { font: 600 19px/1.2 var(--display); }
.swatch code { font: 600 14px/1.2 ui-monospace, Menlo, monospace; opacity: .75; }

/* planner: a full map with a floating panel */
.live { position: relative; height: calc(100vh - 72px - env(safe-area-inset-top, 0px)); min-height: 640px; background: var(--paper); }
#map { position: absolute; inset: 0; }
.live-panel { position: absolute; z-index: 3; left: max(16px, env(safe-area-inset-left, 0px)); top: 16px; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; background: var(--white); border-radius: 30px; padding: 24px; display: grid; gap: 14px;  }
.live-panel h1 { font-size: 32px; letter-spacing: -0.025em; }
@media (max-width: 700px) { .live { height: auto; min-height: 0; display: flex; flex-direction: column; } #map { position: relative; height: 440px; order: 2; } .live-panel { position: relative; left: auto; top: auto; width: auto; max-height: none; margin: 12px 16px;  background: var(--white); } }
.field { display: grid; gap: 6px; position: relative; }
.field label { font-weight: 700; font-size: 14px; color: var(--muted); }
.input { width: 100%; height: 54px; border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); padding: 0 16px; font: 600 16.5px/1 var(--text); }
.input:focus-visible { outline: 3px solid var(--violet); outline-offset: 0; }
.suggest { list-style: none; margin: 4px 0 0; padding: 6px; background: var(--paper); border-radius: 18px; display: grid; gap: 2px;  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; }
.suggest button { width: 100%; text-align: left; border: 0; background: none; color: var(--ink); padding: 10px 12px; border-radius: 12px; font: 600 15.5px/1.3 var(--text); cursor: pointer; }
.suggest button span { display: block; font-weight: 500; font-size: 13.5px; color: var(--muted); }
.suggest button:hover, .suggest button:focus-visible { background: var(--white); }
.seg { display: flex; gap: 4px; background: var(--paper); border-radius: 999px; padding: 4px; }
.seg button { flex: 1; border: 0; background: none; color: var(--muted); border-radius: 999px; height: 42px; font: 700 15px/1 var(--text); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.result-big { font: 700 60px/.95 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 110px; }
.bar { border: 0; padding: 0; background: none; cursor: pointer; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font: 700 12px/1 var(--text); color: var(--muted); }
.bar i { display: block; border-radius: 10px 10px 5px 5px; background: var(--paper-2); height: var(--h); }
.bar.best i { background: var(--free); }
.bar[aria-pressed="true"] i { background: var(--ink); }
.bar[aria-pressed="true"] { color: var(--ink); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--paper); font-weight: 700; font-size: 14px; }
.tag svg { width: 16px; height: 16px; }
.maplibregl-map { position: relative; overflow: hidden; font: inherit; -webkit-tap-highlight-color: transparent; }
.maplibregl-canvas { position: absolute; left: 0; top: 0; }
.map-credit { position: absolute; right: 12px; bottom: 10px; z-index: 2; font-size: 12px; font-weight: 600; background: var(--white); color: var(--muted); padding: 4px 10px; border-radius: 999px; }
.map-credit a { text-decoration: none; }
.map-zoom { position: absolute; right: 16px; top: 16px; z-index: 2; display: grid; gap: 8px; }
.map-zoom button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); font: 600 24px/1 var(--text); cursor: pointer;  }
.map-msg { position: absolute; z-index: 4; right: 16px; bottom: 44px; max-width: 360px; background: var(--white); border-radius: 22px; padding: 16px 18px; font-weight: 600;  }

/* ------------------------------------------------------------------ footer */
.foot-cta { text-align: center; padding-block: clamp(96px, 11vw, 168px) clamp(40px, 5vw, 64px); }
.foot-cta .statement { max-width: 17ch; }
.foot-cta .row { justify-content: center; margin-top: 40px; }
.foot-art { max-width: 940px; margin: 0 auto; padding-inline: 20px; position: relative; z-index: 1; margin-bottom: -4px; }
.foot-panel { background: var(--paper); border-radius: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 56px) 0 0; padding-block: clamp(56px, 6vw, 88px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot-grid { display: grid; gap: 44px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 18px; align-content: start; max-width: 330px; }
@media (min-width: 960px) { .foot-brand { grid-column: auto; } }
.foot-brand .brand { justify-self: start; }
.foot-brand p { color: var(--muted); font-size: 16px; }
.foot-col h3 { font: 600 17px/1.3 var(--display); letter-spacing: 0; margin-bottom: 18px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-col a { text-decoration: none; color: var(--ink-2); font-size: 15.5px; font-weight: 500; }
.foot-col a:hover { color: var(--violet); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; margin-top: 64px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--paper-2); font-size: 14px; color: var(--muted); }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-bottom a { text-decoration: none; color: var(--muted); }
.foot-bottom a:hover { color: var(--ink); }

.art { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------------ pixels */
.pix { max-width: 100%; height: auto; }
.art-wide .pix, .art-box .pix, .tile .art-in .pix, .fill .pix { width: 100%; height: auto; }
.card .art-box .pix, .step .art-box .pix { width: auto; max-width: 100%; max-height: 100%; }
.px-paint { position: relative; }
.px-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.px-paint > :not(.px-trail) { position: relative; z-index: 1; }
.px-cluster { position: absolute; display: grid; gap: 4px; pointer-events: none; z-index: 0; }
.px-cluster i { width: var(--s, 14px); height: var(--s, 14px); display: block; }
@media (prefers-reduced-motion: no-preference) { .px-cluster i.tw { animation: tw 3.6s ease-in-out infinite; } }
@keyframes tw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.px-board { position: relative; height: clamp(250px, 26vw, 370px); border-radius: clamp(24px, 3vw, 36px); background: #121216; overflow: hidden; margin-bottom: clamp(48px, 6vw, 72px); }
.px-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* store button and QR */
.store.sm { height: 48px; border-radius: 14px; padding: 0 16px 0 12px; }
.store.sm b { font-size: 15px; }
.qr { width: 132px; height: 132px; border-radius: 18px; background: #fff; padding: 10px; }
.foot-cta-in { display: grid; gap: 36px; align-items: end; text-align: left; }
@media (min-width: 900px) { .foot-cta-in { grid-template-columns: 1fr auto; } }
.foot-cta .statement { margin-inline: 0; max-width: 16ch; }
.foot-cta-side { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foot-cta { text-align: left; }
.foot-brand .store { justify-self: start; }

/* home hero: headline on the left, words and buttons on the right, the trailer below */
.hero-split { display: grid; gap: 32px; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 960px) { .hero-split { grid-template-columns: 1.25fr .75fr; } }
.hero-split h1 { margin: 0; max-width: 11ch; font-size: clamp(52px, 5.6vw + 20px, 128px); line-height: .98; }
.hero-split h1 em { font-style: normal; color: var(--violet); }
.hero-split .side { display: grid; gap: 26px; padding-bottom: 12px; }
.hero-split .side .sub { margin: 0; }
.hero-split .row { margin: 0; }
.hero.left { text-align: left; }
.hero .reel-frame { border-radius: clamp(28px, 4vw, 48px); }
.reel.inset { margin-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 88px); }
.reel.inset .reel-ctl { bottom: calc(clamp(48px, 6vw, 88px) + 24px); }

/* facts row with pixel art */
.facts3 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .facts3 { grid-template-columns: 1.3fr 1fr 1fr; } }
.fact-tile { border-radius: 32px; padding: 28px; display: grid; gap: 18px; align-content: space-between; min-height: 300px; }
.fact-tile .pix { width: auto; max-width: 100%; height: 140px; }
.fact-tile h3 { font-size: clamp(24px, 1.4vw + 14px, 32px); }
.fact-tile.lilac { background: var(--lilac); } .fact-tile.lime { background: var(--lime-soft); } .fact-tile.sky { background: var(--sky); } .fact-tile.yellow { background: var(--yellow); } .fact-tile.ink { background: var(--ink); color: #fff; } .fact-tile.ink h3 { color: #fff; }

/* pixel map: your way vs the busy way */
.px-map-wrap { position: relative; border-radius: clamp(28px, 4vw, 48px); overflow: hidden; background: #F7F8FB; }
.px-map { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; }
.px-legend { position: absolute; left: 24px; bottom: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.px-legend span { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 9px 14px; font: 700 14.5px/1 var(--text);  }
.px-legend i { width: 12px; height: 12px; border-radius: 3px; }

/* bento of trips */
.trips { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .trips { grid-template-columns: repeat(6, minmax(0, 1fr)); } .trips .t4 { grid-column: span 4; } .trips .t3 { grid-column: span 3; } .trips .t2 { grid-column: span 2; } }
.trips .card { margin: 0 !important; }
.trips .card .art-box { height: 200px; }
.trips .t4 .art-box { height: 240px; }

.hero, .panel-band, .band.deco { position: relative; overflow: hidden; }
.px-auto { position: absolute; z-index: 0; }
@media (max-width: 700px) { .px-auto.hide-sm { display: none; } }
/* clusters always float over their section, sized to their own squares */
.px-paint > .px-cluster, .px-cluster { position: absolute !important; width: max-content; z-index: 0; }

/* ================================================================== one layout per page */
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }
.mask .w { overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
em.v { font-style: normal; color: var(--violet); }

/* como-funciona: a pixel road runs down the page and stops at each feature */
.cf-hero h1 { max-width: 12ch; }
.route-band { padding-top: 0; }
.route { position: relative; display: grid; gap: clamp(64px, 9vw, 140px); }
.route-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.route-stop { position: relative; z-index: 1; display: grid; align-items: center; grid-template-columns: 56px 1fr; gap: 24px; }
.route-stop > .route-pin { grid-column: 1; grid-row: 1; align-self: start; }
.route-stop .route-media, .route-stop .copy { grid-column: 2; }
.route-stop .copy { display: grid; gap: 20px; max-width: 520px; }
.route-stop .copy .eyebrow { margin-bottom: -4px; }
.route-stop.start, .route-stop.end { min-height: 56px; }
.route-pin { width: 56px; height: 56px; border-radius: 18px; background: var(--white); color: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--white); transition: background-color .35s var(--ease), color .35s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.route-pin svg { width: 24px; height: 24px; }
.route-pin .pix { width: auto; height: 34px; }
.route-stop.on > .route-pin { background: var(--violet); color: #fff; transform: scale(1.12); }
.route-stop.start > .route-pin, .route-stop.end > .route-pin { background: var(--paper); }
.route-stop .tile .chip { transition: opacity .5s var(--ease), transform .6s cubic-bezier(.3,1.5,.5,1); }
.route.js .route-stop:not(.on) .tile .chip { opacity: 0; transform: translateY(16px) scale(.92); }
.route.js .route-stop .copy { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.route.js .route-stop:not(.on) .copy { opacity: .25; transform: translateY(18px); }
@media (min-width: 900px) {
  .route-stop { grid-template-columns: 1fr 200px 1fr; gap: 0; }
  .route-stop > .route-pin { grid-column: 2; justify-self: center; align-self: center; }
  .route-stop .route-media { grid-column: 1; grid-row: 1; }
  .route-stop .copy { grid-column: 3; grid-row: 1; padding-left: 8px; }
  .route-stop.flip .route-media { grid-column: 3; }
  .route-stop.flip .copy { grid-column: 1; justify-self: end; padding: 0 8px 0 0; }
}

/* en-el-coche */
.car-frame { background: var(--sky); display: grid; place-items: center; padding: 6% 12%; position: relative; }
.car-art { width: 100%; }
.drive { position: relative; background: var(--white); overflow: hidden; }
.drive-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); padding-block: clamp(72px, 8vw, 112px) 0; }
.drive-track { display: flex; gap: 20px; padding-inline: max(20px, calc((100vw - var(--wrap)) / 2)); width: max-content; will-change: transform; }
.drive-card { flex: none; width: min(380px, 78vw); min-height: 400px; border-radius: 36px; padding: 32px; display: grid; align-content: space-between; gap: 28px; margin: 0; }
.drive-card .num { font: 700 clamp(72px, 6vw, 112px)/.85 var(--display); letter-spacing: -0.06em; color: rgba(18,18,22,.12); }
.drive-card h3 { margin-bottom: 12px; }
.drive-card p { color: var(--ink-2); font-size: 17px; }
.drive-card.shot { width: min(640px, 88vw); padding: 14px; background: var(--ink); display: block; }
.drive-card.shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.drive-card.lilac { background: var(--lilac); } .drive-card.lime { background: var(--lime-soft); } .drive-card.sky { background: var(--sky); } .drive-card.yellow { background: var(--yellow); } .drive-card.pink { background: var(--pink); }
.drive-road { position: relative; height: 72px; background: #2A2C36; margin-top: 40px; }
.drive-road .lane { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: repeating-linear-gradient(90deg, var(--lime) 0 36px, transparent 36px 72px); background-size: 72px 6px; }
.drive-car { position: absolute; left: max(24px, calc((100vw - var(--wrap)) / 2)); bottom: 22px; z-index: 1; }
.drive-car .pix { width: auto; height: 60px; }
@media (max-width: 899px) {
  .drive-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
  .drive-track::-webkit-scrollbar { display: none; }
  .drive-card { scroll-snap-align: center; min-height: 340px; }
}
.connect { position: relative; }
.connect ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; position: relative; z-index: 1; }
@media (min-width: 900px) { .connect ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.connect li { display: grid; gap: 14px; justify-items: center; text-align: center; }
.connect .dot { width: 64px; height: 64px; border-radius: 22px; background: var(--white); display: grid; place-items: center; font: 700 26px/1 var(--display); transition: background-color .4s, color .4s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.connect li.on .dot { background: var(--violet); color: #fff; transform: scale(1.1); }
.connect .art-box { height: 150px; display: grid; place-items: center; }
.connect .art-box .pix { max-height: 140px; width: auto; }
.connect p { color: var(--muted); max-width: 28ch; }
.connect-line { display: none; }
@media (min-width: 900px) { .connect-line { display: block; position: absolute; left: 16.6%; right: 16.6%; top: 30px; height: 4px; border-radius: 4px; background: var(--paper-2); } .connect-line i { display: block; height: 100%; border-radius: 4px; background: var(--violet); transform-origin: left; transform: scaleX(0); } }

/* descargar: the phones open like a hand of cards; the permissions switch on */
.dl-hero { padding-bottom: 0; }
.dl-hero h1 { max-width: none; }
.dl-hero .qr { width: 96px; height: 96px; padding: 8px; border-radius: 14px; }
.fan { --pw: clamp(170px, 21vw, 290px); position: relative; height: clamp(360px, 44vw, 620px); margin-top: clamp(48px, 6vw, 80px); overflow: hidden; }
.fan img { position: absolute; left: 50%; bottom: -26%; width: var(--pw); margin-left: calc(var(--pw) / -2); border-radius: 34px; outline: 9px solid var(--ink); transform-origin: 50% 175%; will-change: transform; }
.fan img:nth-child(1) { transform: rotate(-17deg); }
.fan img:nth-child(2) { z-index: 2; }
/* hidden until the opening animation starts; shown anyway after 3 s if it never loads */
.mo .fan img { opacity: 0; animation: fan-show .4s 3s forwards; }
@keyframes fan-show { to { opacity: 1; } }
.fan img:nth-child(3) { transform: rotate(17deg); }
.perms { display: grid; gap: 16px; }
.perm { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; background: var(--paper); border-radius: 32px; padding: 24px 28px; transition: background-color .5s var(--ease); }
.perm .art-box { grid-column: 1 / -1; height: 150px; border-radius: 22px; background: var(--white); display: grid; place-items: center; }
.perm .art-box .pix { max-height: 120px; width: auto; }
.perm-txt { display: grid; gap: 10px; }
.perm-txt .eyebrow { margin: 0; }
.perm-txt h3 { font-size: clamp(24px, 1vw + 18px, 30px); }
@media (min-width: 760px) { .perm { grid-template-columns: 200px 1fr auto; } .perm .art-box { grid-column: auto; height: 170px; } }
.switch { width: 64px; height: 38px; border-radius: 999px; background: var(--paper-2); position: relative; transition: background-color .4s var(--ease); flex: none; }
.switch i { position: absolute; left: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff;  transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.perm.on { background: var(--lilac); }
.perm.on .switch { background: var(--violet); }
.perm.on .switch i { transform: translateX(26px); }

/* datos-abiertos: a pixel city whose streets fill with traffic */
.city-frame { background: #F7F8FB; aspect-ratio: 16 / 7; position: relative; }
.px-city { display: block; width: 100%; height: 100%; }
.checks { display: grid; gap: 12px; }
.check { display: grid; grid-template-columns: 48px 1fr; gap: 22px; align-items: center; background: var(--white); border-radius: 30px; padding: 24px 28px; }
.check h3 { font-size: clamp(22px, 1vw + 16px, 28px); margin-bottom: 6px; }
.check .art-box { display: none; }
@media (min-width: 760px) { .check { grid-template-columns: 48px 1fr 160px; } .check .art-box { display: grid; place-items: center; height: 96px; } .check .art-box .pix { max-height: 96px; width: auto; } }
.tick { width: 48px; height: 48px; }
.tick circle { fill: var(--paper); transition: fill .4s var(--ease); }
.tick path { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .6s .15s var(--ease); }
.check.on .tick circle { fill: var(--lime); }
.check.on .tick path { stroke-dashoffset: 0; }

/* novedades: a pixel version number and a timeline */
.nov-hero { align-items: center; }
.digits-tile { border-radius: clamp(28px, 4vw, 48px); background: var(--white); aspect-ratio: 16 / 10; overflow: hidden; }
.px-digits { display: block; width: 100%; height: 100%; }
.tl { position: relative; overflow-x: clip; display: grid; gap: clamp(56px, 7vw, 96px); padding-left: 44px; }
.tl-line { position: absolute; left: 11px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--paper-2); }
.tl-line i { display: block; width: 100%; height: 100%; border-radius: 4px; background: var(--violet); transform-origin: top; transform: scaleY(0); }
.tl-item { position: relative; display: grid; gap: 20px; }
.tl-node { position: absolute; left: -44px; top: 18px; width: 26px; height: 26px; border-radius: 9px; background: var(--white); box-shadow: inset 0 0 0 4px var(--paper-2); transition: background-color .4s, box-shadow .4s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.tl-item.on .tl-node { background: var(--violet); box-shadow: inset 0 0 0 4px var(--violet); transform: scale(1.15); }
.tl-v { display: flex; align-items: baseline; gap: 14px; }
.tl-v .kind { font: 700 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tl-v b { font: 700 clamp(72px, 7vw, 120px)/.85 var(--display); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.tl-card { border-radius: 36px; padding: 14px; display: grid; gap: 22px; }
.tl-card .art-box { border-radius: 26px; background: rgba(255,255,255,.6); height: 200px; display: grid; place-items: center; }
.tl-card .art-box .pix { max-height: 160px; width: auto; }
.tl-card > div { padding: 0 14px 18px; display: grid; gap: 14px; }
.tl-card ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.tl-card.lilac { background: var(--lilac); } .tl-card.lime { background: var(--lime-soft); } .tl-card.yellow { background: var(--yellow); } .tl-card.sky { background: var(--sky); } .tl-card.pink { background: var(--pink); }
@media (min-width: 900px) {
  .tl { padding-left: 0; }
  .tl-line { left: calc(28% - 2px); }
  .tl-item { grid-template-columns: 28% 1fr; gap: 0; }
  .tl-node { left: calc(28% - 13px); }
  .tl-v { flex-direction: column; align-items: flex-end; gap: 8px; padding-right: 48px; }
  .tl-card { margin-left: 48px; grid-template-columns: 260px 1fr; align-items: center; }
  .tl-card > div { padding: 18px 22px 18px 6px; }
}

/* sobre-fluye: words light up, values stack like cards */
.about-scene { margin-top: clamp(40px, 5vw, 72px); }
.about-words .w { transition: none; }
.stack { display: grid; gap: 24px; }
.stack-card { position: sticky; top: calc(96px + var(--i, 0) * 26px); border-radius: clamp(32px, 4vw, 52px); padding: clamp(24px, 4vw, 56px); display: grid; gap: 28px; align-items: center; min-height: min(560px, 74vh); transform-origin: 50% 0; }
.stack-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: var(--dim, 0); pointer-events: none; }
.stack-card .art-in { display: grid; place-items: center; }
.stack-card .art-in .pix { width: min(100%, 380px); height: auto; }
.stack-card .copy { display: grid; gap: 18px; max-width: 480px; }
.stack-card .copy .eyebrow { margin: 0; }
.stack-card.lime { background: var(--lime-soft); } .stack-card.lilac { background: var(--lilac); } .stack-card.sky { background: var(--sky); }
@media (min-width: 900px) { .stack-card { grid-template-columns: 1fr 1fr; } }

/* ayuda: topics on the side with a sliding marker */
.help-grid { display: grid; gap: 32px; }
.help-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; position: relative; }
.help-nav::-webkit-scrollbar { display: none; }
.help-nav a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 18px; background: var(--paper); text-decoration: none; font: 600 17px/1.2 var(--display); white-space: nowrap; position: relative; z-index: 1; transition: color .3s; }
.help-nav a .pix { height: 28px; width: auto; }
.help-nav .ind { display: none; }
@media (min-width: 900px) {
  .help-grid { grid-template-columns: 250px 1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  .help-nav { position: sticky; top: 112px; flex-direction: column; gap: 4px; overflow: visible; }
  .help-nav a { background: none; padding: 12px 16px 12px 12px; }
  .help-nav .ind { display: block; position: absolute; left: 0; right: 0; top: 0; height: 52px; border-radius: 18px; background: var(--lilac); z-index: 0; }
  .help-nav a.on { color: var(--violet-ink); }
}
.faq .answer { overflow: hidden; }
#faq-none { margin-bottom: 32px; }

/* contacto: a short conversation */
.hero h1.mask { max-width: none; }
.chat { max-width: 820px; display: grid; gap: 56px; }
.pair { display: grid; gap: 14px; }
.msg { border-radius: 28px; padding: 18px 24px; max-width: min(560px, 88%); font-size: 18px; line-height: 1.5; }
.msg.me { justify-self: end; background: var(--violet); color: #fff; font: 600 clamp(20px, 1vw + 15px, 26px)/1.3 var(--display); border-bottom-right-radius: 8px; transform-origin: 100% 100%; }
.msg.bot { justify-self: start; background: var(--paper); display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; border-bottom-left-radius: 8px; transform-origin: 0 100%; padding: 16px 24px 20px 16px; }
.msg.bot > div { display: grid; gap: 14px; justify-items: start; padding-top: 10px; }
.msg.bot p { color: var(--ink-2); }
.msg .ava { width: 48px; height: 48px; border-radius: 16px; background: var(--lilac); display: grid; place-items: center; }
.msg .ava svg { width: 26px; height: 30px; }
.typing { justify-self: start; display: inline-flex; gap: 6px; padding: 18px 22px; border-radius: 24px 24px 24px 8px; background: var(--paper); }
.typing i { width: 9px; height: 9px; border-radius: 3px; background: var(--muted); }

/* privacidad: pixels gather into the phone; a contents list that follows you */
.priv-hero { align-items: center; }
.gather-tile { border-radius: clamp(28px, 4vw, 48px); background: var(--white); aspect-ratio: 1 / 1; max-height: 560px; overflow: hidden; }
.px-gather { display: block; width: 100%; height: 100%; }
.legal-grid { display: grid; gap: 40px; }
.toc { display: none; }
@media (min-width: 1000px) {
  .legal-grid { grid-template-columns: 260px 1fr; gap: 72px; align-items: start; }
  .legal-grid .legal { margin: 0; }
  .toc { display: grid; gap: 2px; position: sticky; top: 112px; padding-left: 22px; }
  .toc a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15.5px; padding: 8px 0; transition: color .3s; }
  .toc a.on { color: var(--ink); }
  .toc-bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--paper-2); }
  .toc-bar i { display: block; width: 100%; height: 100%; border-radius: 4px; background: var(--violet); transform-origin: top; transform: scaleY(0); }
}

/* condiciones: a road with kilometre signs */
.road-page { display: grid; grid-template-columns: 64px 1fr; gap: clamp(28px, 5vw, 72px); max-width: 980px; }
.road { position: relative; border-radius: 22px; background: #2A2C36; min-height: 100%; }
.road .lane { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: repeating-linear-gradient(180deg, var(--lime) 0 34px, transparent 34px 68px); background-size: 6px 68px; }
.road-car { position: sticky; top: 50vh; display: grid; place-items: center; z-index: 1; padding-top: 12px; }
.road-car .pix { width: 58px; height: auto; rotate: 90deg; }
.kms { display: grid; gap: clamp(56px, 7vw, 96px); padding-block: 24px; }
.km { display: grid; gap: 14px; max-width: 640px; }
.km p { color: var(--ink-2); }
.km-sign { justify-self: start; font: 700 15px/1 var(--text); letter-spacing: .04em; background: var(--free); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--free); }
@media (min-width: 760px) { .road-page { grid-template-columns: 96px 1fr; } }

/* licencias: sources grouped by topic, each with what it is used for and its licence */
.lic { max-width: 1040px; }
.lic-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(40px, 5vw, 64px); }
.lic-filter button { border: 0; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 700 15px/1 var(--text); cursor: pointer; transition: background-color .25s var(--ease), color .25s; }
.lic-filter button:hover { background: var(--paper-2); }
.lic-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.lic-group { display: grid; gap: 8px; }
.lic-group + .lic-group { margin-top: clamp(48px, 6vw, 72px); }
.lic-group h2 { font-size: clamp(26px, 1vw + 20px, 34px); display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.lic-group h2 .n { font: 700 14px/1 var(--text); color: var(--violet); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lic-row { display: grid; grid-template-columns: 1fr; gap: 6px 24px; align-items: center; background: var(--paper); border-radius: 22px; padding: 20px 24px; transition: background-color .25s var(--ease); }
.lic-row:hover { background: var(--paper-2); }
.lic-row b { font: 600 19px/1.3 var(--display); letter-spacing: -0.01em; }
.lic-row p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.lic-tag { justify-self: start; display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 10px; font: 700 13px/1.2 var(--text); white-space: normal; }
.lic-tag.cc { background: var(--lime); color: #2F4A08; }
.lic-tag.apache { background: var(--lilac); color: var(--violet-ink); }
.lic-tag.bsd { background: var(--sky); color: #0B4A6E; }
.lic-tag.other { background: var(--white); color: var(--ink-2); }
@media (min-width: 860px) { .lic-row { grid-template-columns: minmax(200px, 270px) 1fr minmax(120px, 210px); } .lic-tag { justify-self: end; text-align: right; } }
.lic-row[hidden], .lic-group[hidden] { display: none !important; }
.lic-date { margin-top: 48px; }

/* 404 */
.maze-wrap { max-width: 760px; margin: clamp(48px, 6vw, 80px) auto 0; border-radius: clamp(28px, 4vw, 44px); background: var(--white); overflow: hidden; }
.px-maze { display: block; width: 100%; aspect-ratio: 16 / 9; }

/* language: a globe in the header (both languages) and the same choice in the footer */
.lang-pill { padding: 0 14px; gap: 7px; }
.lang-pill .globe { width: 20px; height: 20px; }
.lang-pill span { font: 700 13.5px/1 var(--text); letter-spacing: .04em; }
.mega.lang-menu { left: auto; right: -8px; width: 210px; grid-template-columns: 1fr; gap: 2px; padding: 8px; border-radius: 22px; }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; font: 600 16px/1 var(--text); color: var(--ink-2); padding: 14px 14px; border-radius: 14px; transition: background-color .2s var(--ease), color .2s; }
.lang-menu a:hover { background: var(--paper); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--violet-ink); background: var(--lilac); }
.lang-menu a[aria-current="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--violet); }
.top.on-white .lang-menu a:hover { background: var(--paper); }
.foot-lang { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.foot-lang svg { width: 18px; height: 18px; color: var(--muted); }
.foot-lang a[aria-current="true"] { color: var(--ink); font-weight: 700; }

/* ================================================================== polish */
/* one rhythm for small interface motion */
:root { --t-fast: .15s; --t: .25s; }
::selection { background: var(--lilac); color: var(--ink); }
html { -webkit-tap-highlight-color: transparent; }
a, button, input, label, summary, select { touch-action: manipulation; }
p, li, .body, .sub { text-wrap: pretty; }
.chip, .tag, .bars, .when, .tl-v b, .result-big, .drive-card .num, .px-legend, .km-sign { font-variant-numeric: tabular-nums; }
.sheet { overscroll-behavior: contain; }
.suggest { overscroll-behavior: contain; }
/* pressed states read clearly on touch (hover only where there is a pointer that hovers) */
.pill:active, .btn:active, .store:active, .lic-filter button:active, .seg button:active { transform: scale(.97); }
@media (hover: none) {
  .btn:hover, .store:hover, .card:hover { transform: none; }
}
/* at least 44 px to tap on touch screens */
@media (pointer: coarse) {
  .foot-col a, .foot-bottom a, .mega-links a, .lang-menu a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-col ul { gap: 2px; }
  .link { min-height: 44px; }
}
/* phones held sideways and very small phones */
@media (max-width: 360px) {
  h1 { font-size: 40px; }
  .hero-split h1 { font-size: 46px; }
  .btn { padding: 0 22px; }
  .store { padding: 0 16px 0 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .story.js .story-text { min-height: 120vh; }
  .live { min-height: 520px; }
}
img { height: auto; }

/* very narrow phones: the cluster beside the headline would sit on the text */
@media (max-width: 420px) { .hero .wrap > [data-px] { display: none; } }