/*
 * The sales site. The page is the app's workspace: the canvas colour behind everything,
 * floating bars for navigation, and each section an artboard with its name on top, as in a PSD.
 */

:root {
  /* The app's own night skin: the page is the canvas the windows float over. */
  --canvas: #12151b;
  --canvas-deep: #0b0d12;
  --chrome: #1f242d;
  --paper: #272d38;
  --ink: #e6e9f0;
  --ink-2: #a3abba;
  --ink-3: #7b8496;
  --line: #343b49;
  --indigo: #7c7ceb;
  --indigo-deep: #9494f2;
  --indigo-soft: #2f305e;
  --indigo-line: #5c5cc4;
  --graphite: #07080c;
  --ok: #46c98a;
  --ember: #ffb04a;

  --r-control: 10px;
  --r-container: 22px;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 40px 80px rgba(0, 0, 0, 0.55);

  --display: 'Schibsted Grotesk', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
}
::selection { background: var(--indigo); color: #fff; }

* { box-sizing: border-box; }
html.brand-pending body { visibility: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ------------------------------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -0.025em; }
h1 { font-size: clamp(40px, 4.7vw, 68px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; font-weight: 700; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.small { font-size: 14px; color: var(--ink-3); }

/* ------------------------------------------------------------------------------- buttons */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--text); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 8px 24px rgba(124, 124, 235, 0.35); }
.btn-big { --h: 60px; padding: 0 32px; font-size: 17px; }
.btn-primary:hover { background: var(--indigo-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-quiet:hover { background: var(--chrome); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.btn-small { --h: 42px; padding: 0 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ------------------------------------------------------------------------------- the bar */
.bar {
  position: sticky; top: 14px; z-index: 30;
  width: min(var(--max), 100% - 2 * var(--gutter)); margin: 14px auto 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px;
  background: color-mix(in srgb, var(--chrome) 80%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--line); border-radius: var(--r-container); box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -0.02em; margin-right: auto; }
.mark { width: 32px; height: 32px; flex: none; }
.bar nav { display: flex; gap: 2px; }
.bar nav a { padding: 10px 14px; border-radius: var(--r-control); font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.bar nav a:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 760px) { .bar nav { display: none; } }

/* ------------------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: clamp(44px, 7vw, 88px) 0 clamp(40px, 6vw, 80px); }
.hero .glow { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; background: radial-gradient(60% 55% at 72% 40%, rgba(124, 124, 235, 0.22), transparent 70%), radial-gradient(40% 40% at 30% 10%, rgba(255, 176, 74, 0.10), transparent 70%); }
.hero .wrap { position: relative; }
.launch { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--chrome); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.launch span { padding: 4px 10px; border-radius: 999px; background: var(--ember); color: #1a1206; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 26px; }
.hero .lede { margin-bottom: 34px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.assure { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.assure li { display: flex; gap: 8px; align-items: center; }
.assure svg { width: 18px; height: 18px; color: var(--indigo); flex: none; }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } }

/* The two devices, set down on the canvas like documents. */
.stage { margin: 0; }
.stage .tablet { width: 100%; }
.stage figcaption { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }
.stage figcaption i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.25); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }
.doc-tab {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0 0 10px 6px; font-size: 13px; color: var(--ink-3);
}
.doc-tab b { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------------------- devices */
.device { position: relative; background: var(--graphite); box-shadow: var(--shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.device img { width: 100%; height: 100%; object-fit: cover; background: var(--canvas-deep); }
.device.tablet { aspect-ratio: 1280 / 800; padding: 1.4%; border-radius: clamp(18px, 2.6vw, 34px); }
.device.tablet img { border-radius: clamp(10px, 1.6vw, 22px); }
.device.phone { aspect-ratio: 412 / 915; padding: 1.5%; border-radius: clamp(20px, 3.8vw, 42px); }
.device.phone img { border-radius: clamp(17px, 3.4vw, 38px); }
.device.phone::before { /* camera, punched into the screen */
  content: ''; position: absolute; top: 2.2%; left: 50%; width: 3%; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: #0c0f14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); z-index: 1;
}

/* ------------------------------------------------------------------------------- facts strip */
.facts { border-block: 1px solid var(--line); background: var(--canvas-deep); }
.facts ul { list-style: none; margin: 0 auto; padding: 22px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.facts li { font-size: 15px; color: var(--ink-2); line-height: 1.35; }
.facts li b { display: block; font: 600 17px/1.2 var(--display); color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; }
@media (max-width: 900px) { .facts ul { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------------------- artboards */
.board { padding: clamp(64px, 9vw, 120px) 0; }
.board-name {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 13.5px; color: var(--ink-3);
}
.board-name::before { content: ''; width: 10px; height: 10px; border: 1.5px solid var(--ember); border-radius: 2px; }
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); }
.split.flip > :first-child { order: 2; }
@media (max-width: 900px) { .split, .split.flip { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.board h2 { margin-bottom: 20px; }
.board .lede + .points { margin-top: 28px; }

/* Lists in the vocabulary pros use: the term, then what it means here. */
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.points li::before {
  content: ''; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; background: var(--indigo-soft);
  box-shadow: inset 0 0 0 1px var(--indigo-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdcdff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.points b { color: var(--ink); font-weight: 600; }


/* A panel shown at size: cut from a tablet screenshot, floating like the window it is. */
.detail { margin: 0; justify-self: center; max-width: 420px; }
.detail img { border-radius: 24px; box-shadow: var(--shadow-lift); }
.detail figcaption { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); text-align: center; }

/* Three phones, each with what it shows underneath. */
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin: 56px auto 0; max-width: 980px; }
.phones figure { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.phones .device.phone { width: 100%; max-width: 250px; }
.phones figcaption { margin-top: 22px; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; max-width: 19em; }
.phones figcaption b { display: block; color: var(--ink); font: 600 18px/1.3 var(--display); margin-bottom: 4px; letter-spacing: -0.01em; }
@media (max-width: 760px) { .phones { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }

.board-head { max-width: 760px; }

/* ------------------------------------------------------------------------------- comparison */
.compare { background: var(--canvas-deep); border-block: 1px solid var(--line); }
.table-wrap { margin-top: 44px; overflow-x: auto; border-radius: var(--r-container); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15.5px; }
th, td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 600 15px/1.3 var(--display); color: var(--ink-2); background: var(--chrome); }
tbody th { font-weight: 500; color: var(--ink); width: 24%; }
td { color: var(--ink-2); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.col-us { background: color-mix(in srgb, var(--indigo-soft) 55%, transparent); color: var(--ink); font-weight: 600; }
thead .col-us { color: var(--indigo-deep); background: var(--indigo-soft); }
.yes { color: var(--ok); font-weight: 600; }

/* ------------------------------------------------------------------------------- price */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.offer {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-container); box-shadow: var(--shadow-lift);
  padding: clamp(26px, 3.6vw, 40px);
}
.offer h3 { font-size: 20px; }
.amount { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 4px; }
.amount s { font: 500 clamp(20px, 2.2vw, 26px)/1 var(--display); color: var(--ink-3); text-decoration-thickness: 2px; }
.amount strong { font: 700 clamp(52px, 6vw, 68px)/1 var(--display); letter-spacing: -0.04em; }
.amount span { color: var(--ink-3); font-size: 15px; }
.offer .small { margin-bottom: 26px; }
.offer .points { margin-bottom: 30px; }
.anchor { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); text-align: center; }
.anchor-line { margin-top: 22px; }
.offer .launch { margin-bottom: 18px; }

/* ------------------------------------------------------------------------------- steps */
.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.steps li { counter-increment: s; padding: 24px 22px 26px; border-radius: var(--r-container); background: var(--chrome); border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 50%; background: var(--indigo); color: #fff; font: 600 15px/1 var(--display); }
.steps b { display: block; color: var(--ink); font: 600 17px/1.3 var(--display); margin-bottom: 6px; letter-spacing: -0.01em; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------- faq */
.faq { max-width: 820px; margin: 40px 0 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font: 600 19px/1.35 var(--display); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; translate: 0 -70%; rotate: 45deg;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transition: rotate .2s ease, translate .2s ease;
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.faq details p { padding: 0 0 26px; color: var(--ink-2); max-width: 44em; }

/* ------------------------------------------------------------------------------- closing + footer */
.closing { text-align: center; padding: clamp(80px, 10vw, 140px) 0; }
.closing h2 { max-width: 15em; margin: 0 auto 22px; }
.closing .lede { margin: 0 auto 34px; }
.closing .cta-row { justify-content: center; }

footer { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 14px; color: var(--ink-3); }
footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer nav a { text-decoration: none; color: var(--ink-2); }
footer nav a:hover { color: var(--ink); }
.legal { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.6; max-width: 70em; }
@media (max-width: 700px) { footer .wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------- sticky buy (phones) */
.buy-dock {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 25; display: none;
  align-items: center; gap: 12px; padding: 10px 10px 10px 18px;
  background: color-mix(in srgb, var(--chrome) 94%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--r-container); box-shadow: var(--shadow-lift);
}
.buy-dock div { margin-right: auto; font-size: 13.5px; color: var(--ink-3); line-height: 1.3; }
.buy-dock strong { display: block; color: var(--ink); font: 700 18px/1.2 var(--display); }
@media (max-width: 760px) { .buy-dock.on { display: flex; } }

/* ============================================================================== checkout */
.pay {
  border: 0; padding: 0; margin: auto; width: min(480px, 100% - 24px); max-height: calc(100dvh - 24px);
  background: var(--chrome); color: var(--ink); border-radius: 26px; box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.pay::backdrop { background: rgba(20, 26, 36, 0.48); backdrop-filter: blur(3px); }
.pay[open] { animation: pay-in .22s ease-out; }
@keyframes pay-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.pay-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0 22px; }
.pay-head .brand { font-size: 17px; }
.pay-head .mark { width: 28px; height: 28px; }
.x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.x:hover { background: var(--canvas); }
.x svg { width: 20px; height: 20px; }

.track { list-style: none; display: flex; gap: 6px; padding: 18px 22px 0; margin: 0; }
.track li { flex: 1; font-size: 12.5px; color: var(--ink-3); }
.track li::before { content: ''; display: block; height: 4px; border-radius: 4px; background: var(--line); margin-bottom: 8px; transition: background .25s ease; }
.track li.on { color: var(--ink); font-weight: 600; }
.track li.on::before, .track li.past::before { background: var(--indigo); }

.pay-body { padding: 22px 22px 24px; overflow-y: auto; max-height: calc(100dvh - 140px); }
.pay-body h2 { font-size: 26px; line-height: 1.15; margin-bottom: 8px; letter-spacing: -0.02em; }
.pay-body > p.sub { color: var(--ink-2); font-size: 15.5px; margin-bottom: 22px; }
.step[hidden] { display: none; }

.google {
  width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper);
  display: flex; align-items: center; justify-content: center; gap: 12px; font: 600 15.5px/1 var(--text); cursor: pointer; color: var(--ink);
}
.google:hover { background: var(--chrome); }
.google svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 13px; color: var(--ink-3); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field input {
  height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  font: 400 16px/1 var(--text); color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.field .err { font-size: 13px; color: #b23b3b; }
.pay .err[data-error] { margin: 10px 0 0; font-size: 13.5px; color: #ff8a8a; }
.pay [aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Help: a floating button and a small panel, in the page's own chrome. */
.help-fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--chrome); color: var(--ink); font: 600 14px var(--text); box-shadow: var(--shadow); cursor: pointer; }
.help-fab svg { width: 20px; height: 20px; }
.help-fab i { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ember); border: 2px solid var(--canvas); }
.help-panel { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 46; width: min(380px, calc(100vw - 32px)); background: var(--chrome); border: 1px solid var(--line); border-radius: var(--r-container); box-shadow: var(--shadow-lift); display: grid; grid-template-rows: auto 1fr; max-height: min(560px, calc(100vh - 110px)); overflow: hidden; }
.help-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.help-panel .x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); font-size: 22px; cursor: pointer; }
.help-gate { padding: 18px; display: grid; gap: 14px; color: var(--ink-2); font-size: 14.5px; }
.help-gate p { margin: 0; }
.help-chat { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.help-msgs { overflow-y: auto; padding: 14px 14px 6px; display: grid; gap: 8px; align-content: start; min-height: 180px; }
.help-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; }
.help-msg.user { justify-self: end; background: var(--indigo-soft); border-color: var(--indigo-line); }
.help-msg p { margin: 0; white-space: pre-wrap; }
.help-msg time { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 3px; }
.help-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.help-form select { grid-column: 1 / -1; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 500 13.5px var(--text); padding: 0 10px; }
.help-form textarea { padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 400 14.5px var(--text); resize: none; }
.help-form .btn { --h: 42px; padding: 0 16px; align-self: end; }
.fine.err { color: #ff8a8a; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fine { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.5; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--indigo-deep); font-weight: 600; cursor: pointer; }

.summary { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 18px; }
.summary .mark { width: 42px; height: 42px; }
.summary div { flex: 1; font-size: 14px; color: var(--ink-3); line-height: 1.35; }
.summary strong { display: block; color: var(--ink); font-size: 15.5px; }
.summary .total { flex: none; font: 700 19px/1 var(--display); color: var(--ink); }
@media (max-width: 480px) { .summary div { font-size: 0; } .summary strong { font-size: 15px; } }

.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.method {
  position: relative; text-align: left; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--paper);
  cursor: pointer; font: inherit; color: var(--ink);
}
.method strong { display: block; font-size: 15.5px; }
.method span { font-size: 14px; color: var(--ink-3); }
.method[aria-pressed="true"] { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.method .save { position: absolute; top: -9px; right: 10px; padding: 3px 8px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 11.5px; font-weight: 600; }

.pix { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pix > * { max-width: 100%; }
.pix svg.qr { width: 196px; height: 196px; }
.copy { width: 100%; display: flex; gap: 8px; }
.copy code { flex: 1; min-width: 0; padding: 12px; border-radius: 12px; background: var(--chrome); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--indigo-line); border-top-color: var(--indigo); animation: spin 0.9s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.demo { margin-top: 10px; font-size: 13px; }

.done { text-align: center; padding-top: 8px; }
.done .badge { width: 72px; height: 72px; margin: 4px auto 18px; border-radius: 22px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo-deep); }
.done .badge svg { width: 36px; height: 36px; }
.done ol { text-align: left; margin: 22px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; display: grid; gap: 8px; }

/* ------------------------------------------------------------------------------- phones */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 28px 0 36px; }
  .hero h1 { margin-bottom: 18px; }
  .hero .lede { margin-bottom: 24px; font-size: 17.5px; }
  .cta-row .btn { width: 100%; }
  .btn-quiet { --h: 46px; }
  .assure { gap: 6px; margin-top: 20px; font-size: 14px; }
  .stage { padding: 10px 0 40px 12%; }
  .doc-tab span { display: none; }
  .board { padding: 56px 0; }
  .facts ul { padding: 18px 0; }
}

/* ------------------------------------------------------------------ legal pages */
.doc { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.doc h1 { font: 700 clamp(34px, 4vw, 48px)/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 8px; }
.doc .updated { color: var(--ink-3); font-size: 14px; margin: 0 0 40px; }
.doc .draft { background: var(--indigo-soft); color: var(--ink); border-radius: var(--r-control); padding: 12px 16px; font-size: 14px; margin: 0 0 40px; }
.doc h2 { font: 600 21px/1.3 var(--display); margin: 40px 0 10px; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.doc ul { padding-left: 20px; }
.doc a { color: var(--indigo); }


/* ------------------------------------------------------------------------------- tool wall */
/* The app's own tool bubbles, opened out: every group, every tool, with the icon the app uses. */
.tools { background-image: radial-gradient(var(--line) 1.1px, transparent 1.2px); background-size: 22px 22px; }
.tool-wall { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.bubble-group { background: var(--chrome); border-radius: var(--r-container); box-shadow: var(--shadow); padding: 18px 16px 12px; }
.bubble-group:nth-child(1) { grid-column: span 4; }
.bubble-group:nth-child(2) { grid-column: span 8; }
.bubble-group:nth-child(3) { grid-column: span 7; }
.bubble-group:nth-child(4) { grid-column: span 5; }
.bubble-group h3 { font: 600 14px/1.2 var(--text); color: var(--ink-3); margin: 0 0 12px 4px; }
.bubble-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 4px; }
.bubble-group li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 2px 10px; font-size: 12.5px; line-height: 1.25; color: var(--ink-2); text-align: center; border-radius: 14px; }
.ico { position: relative; display: inline-block; flex: none; }
.ico i { position: absolute; inset: 0; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.bubble-group .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: background .18s, box-shadow .18s, color .18s, transform .18s; }
.bubble-group .ico i { inset: 12px; }
.bubble-group li:hover .ico { background: var(--indigo-soft); box-shadow: inset 0 0 0 1px var(--indigo-line); color: var(--indigo-deep); transform: translateY(-2px); }
/* One reveal: the tools pop in, group by group, the first time the wall comes into view. */
html.js .tool-wall:not(.in) li { opacity: 0; transform: translateY(10px) scale(.94); }
.tool-wall.in li { animation: tool-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 16ms); }
@keyframes tool-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.menus-title { font: 600 18px/1.3 var(--display); margin: 44px 0 16px; }
.menu-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.menu-pills li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; background: var(--chrome); box-shadow: var(--shadow); font-size: 15px; color: var(--ink); }
.menu-pills .ico { width: 18px; height: 18px; color: var(--indigo); }
@media (max-width: 900px) { .bubble-group:nth-child(n) { grid-column: span 12; } }
@media (max-width: 480px) { .bubble-group ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bubble-group li { font-size: 11.5px; } .bubble-group .ico { width: 44px; height: 44px; } .bubble-group .ico i { inset: 11px; } }

/* ------------------------------------------------------------------------------- carousel */
/* The windows one at a time, each at the size it really is, with what it does beside it. */
.carousel { margin-top: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chips button { font: 500 15px/1 var(--text); color: var(--ink-2); background: transparent; border: 1.5px solid transparent; border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.chips button:hover { background: var(--chrome); }
.chips button[aria-selected="true"] { background: var(--indigo-soft); border-color: var(--indigo-line); color: var(--indigo-deep); }
.viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 30px; background: var(--chrome); box-shadow: var(--shadow-lift); }
.viewport::-webkit-scrollbar { display: none; }
.reel { display: flex; list-style: none; margin: 0; padding: 0; }
.slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(16px, 2.4vw, 28px); }
.slide-art { height: clamp(340px, 40vw, 520px); display: flex; align-items: center; justify-content: center; min-width: 0; padding: clamp(18px, 3vw, 36px); border-radius: 22px; background-color: var(--canvas-deep); background-image: radial-gradient(var(--line) 1.1px, transparent 1.2px); background-size: 20px 20px; overflow: hidden; }
.slide-art img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; min-height: 0; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transform: translateY(14px) scale(.97); opacity: .4; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.slide.on .slide-art img { transform: none; opacity: 1; }
.slide-copy { padding-right: clamp(0px, 2vw, 24px); }
.slide-copy h3 { font: 600 clamp(26px, 3vw, 38px)/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 14px; }
.slide-copy p { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; }
.slide-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.slide-copy li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.slide-copy li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); flex: none; }
.controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.controls .nav { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--chrome); box-shadow: var(--shadow); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .15s; }
.controls .nav:hover { background: var(--paper); transform: translateY(-1px); }
.controls .nav .ico { width: 22px; height: 22px; }
.controls .count { font-size: 14px; color: var(--ink-3); min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.controls .count b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .slide { grid-template-columns: 1fr; }
  .slide-art { height: 360px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .chips button { flex: none; }
}

/* ------------------------------------------------------------------------------- floating window */
/* A window as it really sits in the app: floating over the drawing, with its own shadow. */
.float-scene { position: relative; margin: 0; padding-bottom: 14%; }
.scene-art { display: block; width: 88%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 26px; box-shadow: var(--shadow); }
.scene-win { position: absolute; right: 0; top: 9%; width: 46%; height: auto; filter: drop-shadow(0 26px 40px rgba(27, 36, 48, 0.28)) drop-shadow(0 2px 6px rgba(27, 36, 48, 0.1)); }
.float-scene figcaption { margin-top: 18px; max-width: 46%; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 640px) { .scene-art { width: 100%; } .scene-win { width: 56%; right: -2%; top: 16%; } .float-scene { padding-bottom: 22%; } }


/* ------------------------------------------------------------------------------- proof (PSD) */
.proof-shot { margin: 0; }
.proof-shot figcaption { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.proof-shot figcaption b { display: block; font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); margin-bottom: 2px; }
.proof .note { margin-top: 26px; max-width: 36em; line-height: 1.55; }

/* ------------------------------------------------------------------------------- touch loops */
.loops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: 48px; }
.loop { margin: 0; background: var(--chrome); border: 1px solid var(--line); border-radius: var(--r-container); overflow: hidden; box-shadow: var(--shadow); }
.loop-media { aspect-ratio: 58 / 72; background: var(--canvas-deep); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.loop-media img { width: 100%; height: 100%; object-fit: cover; }
.loop-media.phone-media img { object-fit: contain; width: 72%; height: auto; max-height: 92%; border-radius: 22px; box-shadow: 0 0 0 5px var(--graphite), var(--shadow-lift); }
.loop figcaption { padding: 18px 20px 22px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.loop figcaption b { display: block; color: var(--ink); font: 600 18px/1.3 var(--display); margin-bottom: 4px; letter-spacing: -0.01em; }
@media (max-width: 900px) { .loops { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* The bar's buy button carries the price on wide screens only. */
@media (max-width: 760px) { .bar [data-buy] { font-size: 0; padding: 0 14px; } .bar [data-buy]::after { content: 'Comprar'; font-size: 15px; } }

/* Nothing may widen the page: the hero's glow and the chips' bleed are decoration, not content. */
html, body { overflow-x: clip; }
.launch .short { display: none; }
@media (max-width: 640px) {
  .launch .long { display: none; }
  .launch .short { display: inline; }
  .amount { flex-wrap: wrap; row-gap: 2px; }
  .hero .glow { inset: -10% -30% auto; }
}

.launch em { font-style: normal; }