/* Avisame — product landing page. Design tokens + primitives live in tokens.css,
   linked first. This file is marketing layout only. Theme-aware (light + dark). */
:root { --radius: 16px; }
body {
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* --- header --- */
.lp-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.lp-header .container {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px;
}
.lp-brand {
  font-weight: 800; font-size: 1.25rem; text-decoration: none; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.lp-header nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 20px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-ghost { background: transparent; }
.btn-lg { min-height: 54px; padding: 15px 28px; font-size: 1.05rem; }

/* --- sections --- */
section { padding: 72px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: 0; }
.section-head { max-width: 640px; margin-bottom: 40px; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 .4em; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; margin: 0 0 .35em; }
.lead { font-size: 1.2rem; color: var(--muted); margin: 0 0 1.6em; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--accent); margin: 0 0 12px; }

/* --- hero --- */
.hero { padding-top: 64px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.hero-art { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }

/* --- icon row / icon list (replaces prose bullet lists) --- */
.icon-row { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; padding: 0; margin: 0; }
.icon-row li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .95rem; }
.icon-row .icon { color: var(--accent); }
.icon-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.icon-list li { display: flex; align-items: center; gap: 12px; }
.icon-list .icon { color: var(--accent); flex: none; }

/* --- benefit / accessibility cards (icon + caption + <details>) --- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px;
}

/* --- how-it-works flow --- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.flow-step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; display: grid; gap: 8px; align-content: start; position: relative;
}
.flow-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 14px; right: 16px;
  color: var(--muted); font-weight: 800; font-size: .9rem;
}
.flow-step h3 { margin: 0; }
.flow-step .cap { color: var(--muted); margin: 0; font-size: .96rem; }

/* --- placement scenes --- */
.scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.scene { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.scene > svg { display: block; width: 100%; height: auto; background: var(--surface-2); }
.scene .cap { padding: 14px 16px; }
.scene .cap strong { display: flex; align-items: center; gap: 8px; }
.scene .cap strong .icon { flex: none; color: var(--accent); }
.scene .cap span { color: var(--muted); font-size: .92rem; }

/* --- detects chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 16px; font-weight: 600;
}
.chip.crit { border-color: var(--danger); color: var(--danger); }

/* "Qué detecta": one tile per sound, the icon big enough to read at a glance. */
.detect-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.detect-tile {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 12px;
  padding: 24px 12px 20px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.detect-icon {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.detect-icon .icon { width: 40px; height: 40px; stroke-width: 1.8; }
.detect-name { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.detect-tile.crit { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.detect-tile.crit .detect-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.detect-badge {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--danger); margin-top: -4px;
}
.detect-note { font-size: .8rem; color: var(--muted); margin-top: -6px; }
@media (max-width: 480px) {
  .detect-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .detect-icon { width: 64px; height: 64px; }
  .detect-icon .icon { width: 34px; height: 34px; }
}

/* --- hardware --- */
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.callout {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent-2);
  border-radius: 12px; padding: 14px 18px; color: var(--muted); font-size: .96rem;
}
.callout > summary {
  cursor: pointer; font-weight: 700; color: var(--text); list-style: none;
  display: flex; align-items: center; gap: 8px; min-height: 32px;
}
.callout > summary::-webkit-details-marker { display: none; }
.callout[open] > summary { margin-bottom: 8px; }
.callout p { margin: 0; }
.hw-diagram { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }

/* --- final cta --- */
.cta-final { text-align: center; }
.cta-final .btn-lg { margin: 8px; }

/* --- footer --- */
.lp-footer { padding: 32px 0; color: var(--muted); font-size: .92rem; }
.lp-footer .container { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

/* --- SVG palette classes --- */
.svg-bg { fill: var(--surface-2); }
.svg-panel { fill: var(--surface); }
.svg-ink { stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-ink-fill { fill: var(--text); }
.svg-muted { stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.svg-accent { stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.svg-accent-fill { fill: var(--accent); }
.svg-ok-fill { fill: var(--accent-2); }
.svg-danger-fill { fill: var(--danger); }
.svg-label { fill: var(--muted); font: 600 11px system-ui, sans-serif; }
.svg-wire { stroke: var(--accent); stroke-width: 2; fill: none; }
/* Hero (_svg_hero.svg): the timbre → Avisame → phone story, readable at a glance. */
.hero-stroke { stroke: var(--text); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-stroke-ink { stroke: var(--accent-ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-wave { stroke-width: 3.5; }
.hero-card { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.hero-title { fill: var(--text); font: 800 24px system-ui, sans-serif; }
.hero-sub { fill: var(--muted); font: 600 14px system-ui, sans-serif; }
.hero-cap { fill: var(--text); font: 700 18px system-ui, sans-serif; }
.hero-num { fill: var(--accent-ink); font: 800 14px system-ui, sans-serif; }

@media (max-width: 900px) {
  .hero-grid, .hw-grid { grid-template-columns: 1fr; gap: 28px; }
  .grid-3, .flow, .scenes { grid-template-columns: repeat(2, 1fr); }
  section { padding: 52px 0; }
}
/* One label per button, chosen by width — "Iniciar sesión" and "Crear cuenta"
   side by side do not fit a 360px row, "Ingresar" and "Crear cuenta" do. */
.lbl-short { display: none; }

@media (max-width: 560px) {
  .grid-3, .flow, .scenes { grid-template-columns: 1fr; }
  /* One row, not two: the header is the first thing on the page and it should
     not cost a third of the screen before the headline starts. "Planes" leaves
     it — the page has a whole #planes section and the footer links it — so the
     only things up here are who we are and the two ways in. */
  .lp-header .container { flex-wrap: nowrap; min-height: 0; padding: 8px 14px; gap: 8px; }
  .lp-brand { font-size: 1.02rem; min-width: 0; }
  .lp-brand .brand-word { overflow: hidden; text-overflow: ellipsis; }
  .lp-header nav { gap: 6px; flex-wrap: nowrap; flex: none; }
  /* "Planes" and "Comunidad" both live further down the page and in the
     footer; up here they only push the way in off the edge. */
  .lp-header .lp-link, .lp-header .lp-secondary { display: none; }
  .lp-header nav .btn {
    min-height: 42px; padding: 8px 12px; font-size: .95rem; white-space: nowrap;
  }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
}

/* --- nav text link (next to the buttons, lighter than both) --- */
.lp-link {
  color: var(--muted); text-decoration: none; font-weight: 700;
  min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center;
}
.lp-link:hover, .lp-link[aria-current="page"] { color: var(--text); }
.lp-footer a { color: var(--muted); }
.lp-footer a:hover { color: var(--text); }

/* --- /planes/ --- */
.plans-hero { padding: 56px 0 8px; border-bottom: 0; }
.plans-hero h1 { max-width: 22ch; }
.plans-hero .lead { max-width: 640px; }
.plan-current {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 18px; font-weight: 600;
}
.plan-current span { color: var(--muted); font-weight: 500; }
.plans-section { padding-top: 36px; }

.plan-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch;
  max-width: 820px; margin-inline: auto;
}
.plan { display: flex; flex-direction: column; gap: 12px; position: relative; padding: 26px 24px; }
.plan-featured {
  border: 2px solid var(--accent);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 18%, transparent);
}
.plan-ribbon {
  position: absolute; top: -13px; left: 22px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.plan-name { font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.plan-featured .plan-name { color: var(--accent); }
.plan-price {
  font-size: 2.3rem; font-weight: 800; line-height: 1.1; margin: 0;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.plan-price small { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
/* The header is sticky, so an in-page jump (#como-pagar) would otherwise land
   with the section's title underneath it. */
section[id] { scroll-margin-top: 80px; }
.plan-alt { margin: 0; color: var(--muted); font-size: .96rem; }
.plan-save { color: var(--ok); font-weight: 700; }
.plan-feats { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 10px; align-content: start; flex: 1; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; }
.plan-feats .icon { color: var(--accent); flex: none; margin-top: .15em; }
.plan-feats .icon-ok { color: var(--ok); }
.plan-feats .is-off, .plan-feats .is-off .icon { color: var(--muted); }
.plan > .btn { width: 100%; }

.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.pay-option { display: grid; gap: 12px; align-content: start; }
.pay-option h3 { margin: 0; }
.pay-option .cap { color: var(--muted); margin: 0; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bank-data { margin: 0; display: grid; gap: 8px; }
.bank-data div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 6px; }
.bank-data dt { color: var(--muted); }
.bank-data dd { margin: 0; font-weight: 700; word-break: break-all; text-align: right; }
.bank-data code, .err-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em;
  background: var(--surface-2); border-radius: 6px; padding: 2px 8px; word-break: break-all;
}
.pay-note { color: var(--muted); margin: 18px 0 0; }
.faq { display: grid; gap: 12px; max-width: 760px; }

/* MercadoPago (instant) next to transfer (by hand): the badge says which is
   which before anyone reads the steps. */
.pay-featured { border: 2px solid var(--accent); }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pay-badge {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted);
}
.pay-badge.is-fast { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.pay-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.pay-steps li::marker { color: var(--accent); font-weight: 800; }
.pay-notice {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px;
}
.pay-notice.is-ok { border-left-color: var(--ok); }
.pay-notice.is-wait { border-left-color: var(--warn); }
.pay-notice.is-bad { border-left-color: var(--danger); }
.plans-more { text-align: center; margin: 28px 0 0; }

/* Step 1 (the device, bought once) above step 2 (the plan). */
.device-offer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center;
  padding: 28px; margin: 0 auto 48px; max-width: 980px;
}
.device-art { background: var(--surface-2); border-radius: 12px; padding: 16px; }
.device-info { display: grid; gap: 10px; align-content: start; }
.device-info .eyebrow { margin: 0; }
.device-title { margin: 0; font-size: 1.6rem; }
.device-info .plan-feats { flex: none; }
.device-info .btn { justify-self: start; }
.plans-subhead { text-align: center; margin: 0 0 28px; }
.plans-subhead .eyebrow { margin-bottom: 6px; }
.plans-subhead h2, .plans-subhead h3 { margin: 0; }

.device-svg { display: block; width: 100%; height: auto; }
.dev-shadow { fill: var(--border); opacity: .5; }
.dev-body { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
.dev-face { fill: var(--surface-2); }
.dev-glow { fill: var(--accent); opacity: .18; }
.dev-led { fill: var(--accent); }
.dev-grille { fill: var(--muted); }
.dev-word { font: 800 14px system-ui, sans-serif; fill: var(--muted); letter-spacing: .06em; }
.dev-wave { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; animation: dev-wave 2.4s ease-in-out infinite; }
.dev-wave-2 { animation-delay: .3s; }
.dev-cable { fill: none; stroke: var(--muted); stroke-width: 4; stroke-linecap: round; }
.dev-link { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 4 6; stroke-linecap: round; }
.dev-note { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.dev-bell { fill: var(--accent); }
.dev-note-text { font: 700 11px system-ui, sans-serif; fill: var(--text); }
.dev-vibe { fill: none; stroke: var(--warn); stroke-width: 3; stroke-linecap: round; }
.dev-pulse { transform-box: fill-box; transform-origin: center; animation: dev-pulse 2.4s ease-out infinite; }
@keyframes dev-pulse { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes dev-wave { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .dev-wave, .dev-pulse { animation: none; } }

/* --- 404 / 500 --- */
.err { padding: 40px 0 72px; text-align: center; border-bottom: 0; }
.err .lead { max-width: 560px; margin-inline: auto; }
.err h1 { max-width: 20ch; margin-inline: auto; }
.err-art { max-width: 380px; margin: 0 auto 8px; }
.err-svg { display: block; width: 100%; height: auto; overflow: visible; }
.err-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --border rather than --surface-2: on the light ground surface-2 is within a
   shade of the page and the number vanished. */
.err-bigcode { font: 800 150px/1 system-ui, sans-serif; fill: var(--border); opacity: .55; letter-spacing: -.04em; }
.err-shadow { fill: var(--border); opacity: .6; }
.err-body { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
.err-lens { fill: var(--surface-2); fill-opacity: .7; stroke: var(--text); stroke-width: 4; }
.err-handle { stroke: var(--warn); stroke-width: 10; stroke-linecap: round; }
.err-glint-line { fill: none; stroke: var(--surface); stroke-width: 3; stroke-linecap: round; opacity: .8; }
.err-lens-q { font: 800 30px system-ui, sans-serif; fill: var(--accent); }
.err-cable { fill: none; stroke: var(--muted); stroke-width: 5; stroke-linecap: round; }
.err-glass { transform-box: view-box; transform-origin: 150px 222px; animation: err-sweep 2.8s ease-in-out infinite; }
@keyframes err-sweep { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.err-thick { stroke-width: 4; }
.err-glint { fill: var(--surface); }
.err-grille { fill: var(--muted); }
.err-drop { fill: var(--accent); opacity: .85; }
.err-dash { stroke-dasharray: 4 6; }
.err-q { font: 800 34px system-ui, sans-serif; fill: var(--accent); }
.err-spark { fill: none; stroke: var(--warn); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.err-smoke circle { fill: var(--muted); opacity: .35; }

.err-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: err-bob 3.2s ease-in-out infinite; }
.err-q, .err-smoke circle { transform-box: fill-box; animation: err-float 2.4s ease-in-out infinite; }
.err-q2, .err-smoke circle:nth-child(2) { animation-delay: .4s; }
.err-q3, .err-smoke circle:nth-child(3) { animation-delay: .8s; }
.err-led { animation: err-blink 1.6s steps(1) infinite; }
@keyframes err-bob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-4px); } }
@keyframes err-float { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-8px); opacity: .45; } }
@keyframes err-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .err-bob, .err-q, .err-smoke circle, .err-led, .err-glass { animation: none; }
}

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .device-offer { grid-template-columns: 1fr; max-width: 520px; padding: 20px; }
  .pay-grid { grid-template-columns: 1fr; }
}

/* --- Accounts: login, sign-up, password reset (avisame/accounts.py) --- */
.auth-wrap { padding: 48px 0 72px; }
.auth-card { max-width: 440px; margin: 0 auto; display: grid; gap: 14px; }
.auth-card h1 { margin: 0; font-size: 1.8rem; line-height: 1.2; }
.auth-lead { color: var(--muted); margin: 0; }
.auth-form { display: grid; gap: 12px; }
.auth-card .field { display: grid; gap: 6px; font-weight: 600; }
.auth-card .field input {
  font: inherit; font-weight: 400; min-height: 48px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.auth-card .field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.auth-card .btn { width: 100%; }
.auth-card .errorlist { color: var(--danger); margin: 0; padding-left: 1.1em; }
.auth-errors { color: var(--danger); }
.auth-alt { color: var(--muted); margin: 0; text-align: center; }
.auth-hint { color: var(--muted); font-size: .9rem; margin: 0; }
/* "Continuar con Google": white button + the multicolour G, per Google's brand guidelines. */
.btn-google { background: #fff; color: #1f1f1f; border-color: #747775; }
.btn-google:hover { background: #f6f8fa; }
.btn-google .google-g { width: 20px; height: 20px; flex: none; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); margin: 0; font-size: .9rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Privacy policy, terms and help (views.legal_page): long reading, so a
   narrow measure and generous line height. */
.legal { max-width: 760px; padding-top: 32px; padding-bottom: 64px; line-height: 1.65; }
.legal h1 { margin-bottom: .2em; }
.legal h2 { margin-top: 1.8em; }
.legal h3 { margin: 1.2em 0 .3em; font-size: 1.05rem; }
.legal-updated { color: var(--muted); margin-top: 0; }
.legal li { margin-bottom: .35em; }

/* --- Blog (blog.py): the list with its archive, a post (a .legal article), an author --- */
.blog { max-width: 1040px; padding-top: 32px; padding-bottom: 64px; }
.blog-head { max-width: 760px; }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: start; }
.blog-month { scroll-margin-top: 84px; margin-bottom: 28px; padding: 0; }
.blog-year { scroll-margin-top: 84px; }
.blog-month-title { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.blog-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.blog-card {
  padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.blog-card:hover { border-color: var(--accent); }
.blog-card time { color: var(--muted); font-size: .9rem; }
.blog-card h3 { margin: .25em 0 .35em; font-size: 1.3rem; line-height: 1.3; }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: var(--accent); }
.blog-card p { margin: 0 0 .8em; color: var(--muted); }
.blog-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.blog-more { color: var(--accent); font-weight: 600; text-decoration: none; }
.blog-byline { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-weight: 600; text-decoration: none; }
.blog-byline:hover span { text-decoration: underline; }
.blog-byline img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.blog-post-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); margin: .4em 0 1.2em; }
.blog-archive { position: sticky; top: 84px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.blog-archive h2 { font-size: 1rem; margin: 0 0 8px; }
.blog-archive ul { list-style: none; padding: 0; margin: 0; }
.blog-archive ul ul { margin: 4px 0 10px 12px; }
.blog-archive a { display: block; padding: 4px 0; color: inherit; text-decoration: none; }
.blog-archive a:hover { color: var(--accent); }
.blog-archive-year { font-weight: 700; }
html:has(.blog-archive) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.blog-archive) { scroll-behavior: auto; } }
@media (max-width: 820px) {
  .blog-layout { grid-template-columns: 1fr; gap: 20px; }
  .blog-archive { position: static; order: -1; }
  .blog-archive > ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .blog-archive ul ul { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0 0 4px 0; }
}
.blog-author-card { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; }
.blog-author-card img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.blog-author-card > div { flex: 1 1 280px; }
.blog-author-card h1 { margin: 0 0 .2em; }
.blog-author-card .lead { margin-bottom: .6em; }
.blog-author-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.blog-author .blog-list { max-width: 760px; }
.blog-back { margin: 0 0 1em; }
.blog-draft {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  color: var(--warn); border: 1px solid var(--warn);
}
.blog-post .lead { margin-bottom: 1.2em; }
.blog-post table { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: .98rem; }
.blog-post th, .blog-post td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.blog-post th { color: var(--muted); font-weight: 600; }
.blog-post td.num, .blog-post th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.blog-post td.up { color: var(--ok); font-weight: 700; }
.blog-post td.down { color: var(--warn); font-weight: 700; }
.blog-post .table-wrap { overflow-x: auto; }
/* Likes and comments under a post (blog.like / blog.comment). */
.blog-post .muted { color: var(--muted); }
.blog-like { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2em 0 1em;
  padding-top: 1.2em; border-top: 1px solid var(--border); }
.blog-like form { margin: 0; }
.blog-comments { margin-top: 1.5em; }
.blog-comment { padding: 14px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 84px; }
.blog-comment-meta { margin: 0 0 .3em; color: var(--muted); font-size: .92rem; }
.blog-comment-meta strong { color: var(--text); }
.blog-comment-body { margin: 0; overflow-wrap: anywhere; }
.blog-comment-delete { margin-top: .4em; font-size: .9rem; }
.blog-comment-delete summary { cursor: pointer; color: var(--muted); display: inline; }
.blog-comment-delete form { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: .5em 0 0; }
.blog-post .btn-sm { min-height: 36px; padding: 6px 12px; font-size: .92rem; }
.blog-post .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.blog-comment-form { display: grid; gap: 10px; margin-top: 1.2em; scroll-margin-top: 84px; }
.blog-comment-form label { font-weight: 600; }
.blog-comment-form textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); resize: vertical; }
.blog-comment-form .btn { justify-self: start; }
.blog-comment-error { margin: 0; color: var(--danger); font-weight: 600; }
.blog-post .blog-note {
  padding: 14px 16px; border-radius: 12px; margin: 1.2em 0;
  background: var(--surface); border: 1px solid var(--border);
}

/* --- the install video, when there is one (16:9, never wider than the text) --- */
.how-video {
  margin: 36px 0 0; max-width: 760px; aspect-ratio: 16 / 9;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.how-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* A note under a section: smaller, quieter, and still readable. */
.note { color: var(--muted); font-size: .95rem; max-width: 760px; margin: 28px 0 0; }

/* --- comparison table ---
   Wide by nature, so it scrolls inside its own box instead of pushing the page
   sideways. On a phone each row becomes a card: a 5-column table at 360px is
   unreadable however small you make the type. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  border-collapse: collapse; width: 100%; min-width: 860px;
  font-size: .95rem; text-align: left;
}
.compare th, .compare td {
  border: 1px solid var(--border); padding: 12px 14px; vertical-align: top;
}
.compare thead th { background: var(--surface-2); font-weight: 800; }
.compare tbody th { background: var(--surface); font-weight: 700; width: 168px; }
.compare td { color: var(--muted); }
/* The Avisame column, marked by a class and not only by colour. */
.compare td.yes { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare td.yes::before {
  content: "✓ "; color: var(--accent); font-weight: 800;
}

@media (max-width: 720px) {
  .compare { min-width: 0; display: block; }
  .compare thead { display: none; }
  .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 14px; overflow: hidden;
  }
  .compare th, .compare td { border: 0; border-top: 1px solid var(--border); }
  .compare tbody th { border-top: 0; font-size: 1.05rem; }
  /* Without the header row, each cell has to say which column it came from. */
  .compare td::after {
    content: attr(data-col); display: block; margin-top: 4px;
    font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  }
}

/* --- testimonials (hidden until there are real ones) --- */
.quote { margin: 0; display: grid; gap: 12px; }
.quote blockquote { margin: 0; font-size: 1.05rem; }
.quote blockquote p { margin: 0; }
.quote figcaption { color: var(--muted); font-weight: 700; }

/* --- motion graphic: the doorbell, a baby, a dog, a delivery bike (_motion_sounds.html) ---
   Each scene is 1600×900. The SVG draws in those units; --u is one scene unit
   at zoom 1 (from the stage's height, so the square stage on a phone crops the
   sides instead of shrinking everything) and --w one unit at the camera's zoom.
   --fx is the scene x at the stage's centre in a wide shot.
   Each .mg-clip is its own timeline, run while it has .is-playing (its times,
   in seconds from its start, come from --t-flash and --t-phone on the clip).
   The base styles are each clip's still, shown with reduced motion. */
.mg-section .section-head { margin-bottom: 28px; }
.mg { position: relative; max-width: 1000px; margin: 0 auto; }
.mg-stage {
  --u: calc(100cqh / 900);
  --fx: 800; --s2: 1.8; --bz: 2; --dz: 1.9; --pz: 1.7;
  --mg-wall: #1b2634; --mg-floor: #101820; --mg-floorline: #1a2530; --mg-skirt: #0d141c;
  --mg-door: #7b4f33; --mg-door-2: #6b432a; --mg-doorframe: #2c3b4f; --mg-shelf: #3b4d63;
  --mg-pic: #2c3b4f; --mg-pic-bg: #2a4a6e; --mg-pic-hill: #3f7f6a;
  --mg-nwall: #1c1d38; --mg-nfloor: #13132a; --mg-nfloorline: #1d1d3a; --mg-nskirt: #101024;
  --mg-nframe: #2e2f55; --mg-dresser: #3b3354; --mg-drawer: #463d63;
  --mg-dwall: #2a2420; --mg-dfloor: #1d1814; --mg-dfloorline: #2a221c; --mg-dskirt: #17120f;
  --mg-dframe: #3a332c; --mg-sofa: #3e5a7a; --mg-sofa-2: #4a6a8e; --mg-table: #5a4636;
  --mg-end: #0b0f14;
  container-type: size;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--mg-end);
  isolation: isolate;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mg-stage {
    --mg-wall: #e6edf5; --mg-floor: #c6d1de; --mg-floorline: #b7c4d3; --mg-skirt: #b1bfcf;
    --mg-door: #b97d50; --mg-door-2: #a86d43; --mg-doorframe: #fbfcfe; --mg-shelf: #93a4b8;
    --mg-pic: #fbfcfe; --mg-pic-bg: #bcd9f5; --mg-pic-hill: #6fb59a;
    --mg-nwall: #dcdaf0; --mg-nfloor: #c4c0de; --mg-nfloorline: #b5b0d4; --mg-nskirt: #b0abd0;
    --mg-nframe: #fbfcfe; --mg-dresser: #c9b8e0; --mg-drawer: #d8cbea;
    --mg-dwall: #f4ece2; --mg-dfloor: #d9c4a8; --mg-dfloorline: #c9b292; --mg-dskirt: #c4ad8e;
    --mg-dframe: #fffdfa; --mg-sofa: #7fa3c9; --mg-sofa-2: #93b4d6; --mg-table: #a07a58;
    --mg-end: #f3f6fa;
  }
}
:root[data-theme="light"] .mg-stage {
  --mg-wall: #e6edf5; --mg-floor: #c6d1de; --mg-floorline: #b7c4d3; --mg-skirt: #b1bfcf;
  --mg-door: #b97d50; --mg-door-2: #a86d43; --mg-doorframe: #fbfcfe; --mg-shelf: #93a4b8;
  --mg-pic: #fbfcfe; --mg-pic-bg: #bcd9f5; --mg-pic-hill: #6fb59a;
  --mg-nwall: #dcdaf0; --mg-nfloor: #c4c0de; --mg-nfloorline: #b5b0d4; --mg-nskirt: #b0abd0;
  --mg-nframe: #fbfcfe; --mg-dresser: #c9b8e0; --mg-drawer: #d8cbea;
  --mg-dwall: #f4ece2; --mg-dfloor: #d9c4a8; --mg-dfloorline: #c9b292; --mg-dskirt: #c4ad8e;
  --mg-dframe: #fffdfa; --mg-sofa: #7fa3c9; --mg-sofa-2: #93b4d6; --mg-table: #a07a58;
  --mg-end: #f3f6fa;
}
@media (max-width: 640px) {
  .mg-stage { aspect-ratio: 1 / 1; --fx: 850; --s2: 1.45; --bz: 1.7; --dz: 1.6; --pz: 1.45; }
  .mg-clip--baby { --fx: 900; }
  .mg-stage .mg-clip--pizza { --fx: 900; --pz-end: 1; --pz-y: 450; }
}

/* The pizza's wide shot stays a little closer, so the bike stays big. */
.mg-clip--pizza { --fx: 900; --pz-end: 1.15; --pz-y: 505; }

/* One clip shows at a time; the next fades in over the last. */
.mg-clip {
  --flash: #7cc0ff;
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.mg-clip.is-current { opacity: 1; visibility: visible; transition: opacity .6s ease; z-index: 1; }

.mg-world {
  --cam-s: 1; --cam-x: var(--fx); --cam-y: 450;
  --w: calc(var(--u) * var(--cam-s));
  position: absolute;
  width: calc(1600 * var(--w)); height: calc(900 * var(--w));
  left: calc(50% - var(--cam-x) * var(--w)); top: calc(50% - var(--cam-y) * var(--w));
}
.mg-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }

/* scene 1: the hall with the door */
.mg-wall { fill: var(--mg-wall); }
.mg-floor { fill: var(--mg-floor); }
.mg-floorline { stroke: var(--mg-floorline); stroke-width: 3; fill: none; }
.mg-skirt { fill: var(--mg-skirt); }
.mg-pic { fill: var(--mg-pic); }
.mg-pic-bg { fill: var(--mg-pic-bg); }
.mg-pic-hill { fill: var(--mg-pic-hill); }
.mg-pic-sun { fill: #ffd34e; }
.mg-doorframe { fill: var(--mg-doorframe); }
.mg-door { fill: var(--mg-door); }
.mg-door-panel { fill: var(--mg-door-2); }
.mg-knob { fill: #f2c14e; }
.mg-mat { fill: #5b6b7d; }
.mg-bell-plate { fill: #f7f9fc; stroke: #8193a8; stroke-width: 2; }
.mg-bell-btn { fill: #ffd34e; stroke: #b98a12; stroke-width: 2; }
.mg-shelf { fill: var(--mg-shelf); }
.mg-leaf { fill: #3fae7a; }
.mg-pot { fill: #d9774b; }
.mg-skin { fill: #e8b58f; }
.mg-hair { fill: #3b2a20; }
.mg-eye { fill: #1c2530; }
.mg-jacket { fill: #ff7a59; }
.mg-sleeve { fill: #ec6645; }
.mg-pants { fill: #3a5068; }
.mg-pants-b { fill: #2d4054; }
.mg-shoe { fill: #1c2530; }
.mg-arm { transform: rotate(-102.6deg); }

/* scene 2: the nursery at night */
.mg-nwall { fill: var(--mg-nwall); }
.mg-nfloor { fill: var(--mg-nfloor); }
.mg-nfloorline { stroke: var(--mg-nfloorline); stroke-width: 3; fill: none; }
.mg-nskirt { fill: var(--mg-nskirt); }
.mg-rug { fill: #7b6fd6; opacity: .35; }
.mg-nrod { fill: #8a7fb8; }
.mg-nframe { fill: var(--mg-nframe); }
.mg-nsky { fill: #10183a; }
.mg-moon { fill: #fff3c4; }
.mg-stars circle { fill: #fff; }
.mg-curtain { fill: #9b8fe8; opacity: .55; }
.mg-crib, .mg-crib-arm-fill { fill: #efeaf8; }
.mg-crib-arm { fill: none; stroke: #efeaf8; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mg-crib-bars { fill: none; stroke: #e2dcf2; stroke-width: 8; stroke-linecap: round; }
.mg-sheet { fill: #f6f4fb; }
.mg-pillow { fill: #fff; }
.mg-blanket { fill: #8fd9c0; }
.mg-toy-string { fill: none; stroke: #b8b2d8; stroke-width: 2; }
.mg-toy-star { fill: #ffd34e; }
.mg-toy-moon { fill: #ffb3c7; }
.mg-toy-cloud { fill: #9fd0ff; }
.mg-baby-skin { fill: #f2c6a0; }
.mg-baby-hair { fill: #7a4a2a; }
.mg-baby-sleeve { fill: #8fd9c0; }
.mg-cheek { fill: #ff9fa8; opacity: .6; }
.mg-baby-line { fill: none; stroke: #5a3a2a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mg-baby-mouth { fill: #7a2a32; }
.mg-tear { fill: #7cc0ff; }
.mg-baby-sleep { opacity: 0; }
.mg-baby-armup { transform: none; }
.mg-zzz text { fill: #b9b6ff; font: 800 30px system-ui, sans-serif; opacity: 0; }
.mg-zzz text:nth-child(2) { font-size: 36px; }
.mg-zzz text:nth-child(3) { font-size: 44px; }
.mg-dresser { fill: var(--mg-dresser); }
.mg-dresser-top { fill: var(--mg-drawer); }
.mg-drawer { fill: var(--mg-drawer); }
.mg-lamp-stem { fill: #b8b2d8; }
.mg-lamp-shade { fill: #ffd98a; }

/* scene 3: the living room by day */
.mg-dwall { fill: var(--mg-dwall); }
.mg-dfloor { fill: var(--mg-dfloor); }
.mg-dfloorline { stroke: var(--mg-dfloorline); stroke-width: 3; fill: none; }
.mg-dskirt { fill: var(--mg-dskirt); }
.mg-dframe { fill: var(--mg-dframe); }
.mg-fence { fill: #fdfaf3; }
.mg-cat-body { fill: #3a3a46; }
.mg-cat-tail { fill: none; stroke: #3a3a46; stroke-width: 7; stroke-linecap: round; }
.mg-sofa { fill: var(--mg-sofa); }
.mg-sofa-seat { fill: var(--mg-sofa-2); }
.mg-table { fill: var(--mg-table); }
.mg-dog { fill: #c98d50; }
.mg-dog-dark { fill: #9a6534; }
.mg-dog-tail-line { fill: none; stroke: #c98d50; stroke-width: 14; stroke-linecap: round; }
.mg-dog-nose { fill: #2a1d14; }
.mg-dog-mouth { fill: #5a1e22; }
.mg-collar { fill: #e04848; }
.mg-dog-jaw { transform: rotate(-20deg); }
.mg-woof text, .mg-beep text {
  font: 900 44px system-ui, sans-serif; fill: #ffd34e;
  stroke: #2a1d14; stroke-width: 6; paint-order: stroke; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center; opacity: 0;
}
.mg-woof text + text, .mg-beep text + text { font-size: 38px; }

/* scene 4: the street at dusk, and the house cut open */
.mg-skyline { fill: #262a55; opacity: .85; }
.mg-skyline-win rect { fill: #ffd98a; opacity: .8; }
.mg-pole { fill: #3a3f55; }
.mg-sidewalk { fill: #9aa3ad; }
.mg-road { fill: #2b2f36; }
.mg-lane { fill: none; stroke: #e8e8e8; stroke-width: 4; stroke-dasharray: 40 30; }
.mg-roof { fill: #6b3f3f; }
.mg-cutwall { fill: #b07d5c; }
.mg-cutwall-hatch { fill: none; stroke: #8a5a3c; stroke-width: 3; }
.mg-lampcord { fill: none; stroke: #8a8fa0; stroke-width: 3; }
.mg-lampshade { fill: #ffd98a; }
.mg-beam { fill: url(#mg-beam-g); }
.mg-box { fill: #d23c3c; }
.mg-box-slice { fill: #ffd34e; }
.mg-box-pep { fill: #a8281e; }
.mg-scooter { fill: #3ab0a0; }
.mg-seat { fill: #1c2530; }
.mg-bar { fill: none; stroke: #1c2530; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.mg-headlight { fill: #fff3c4; }
.mg-rider { fill: #e04848; }
.mg-rider-leg { fill: #2d4054; }
.mg-rider-arm { fill: none; stroke: #e04848; stroke-width: 18; stroke-linecap: round; }
.mg-helmet { fill: #ffd34e; }
.mg-visor { fill: #1c2530; }
.mg-tire { fill: #1c2530; }
.mg-rim { fill: #9aa7b6; }
.mg-spoke { fill: none; stroke: #1c2530; stroke-width: 4; }

/* sound and the device's answer, shared by the scenes */
.mg-waves circle, .mg-devrings circle {
  fill: none; stroke: var(--flash); stroke-width: 3; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; opacity: 0;
}
.mg-waves--bell circle { stroke: #ffb020; }
.mg-waves--cry circle { stroke: #ff8fd8; }
.mg-waves--bark circle { stroke: #ffd34e; }
.mg-waves--horn circle { stroke: #ffd34e; }
.mg-halo { opacity: .75; }
.mg-devshadow { fill: #000; opacity: .25; }

/* The device: twelve layers make the body's depth, the face sits on top. */
.mg-dev {
  position: absolute; left: calc(1160 * var(--w)); top: calc(446 * var(--w));
  width: calc(110 * var(--w)); height: calc(110 * var(--w));
  perspective: calc(700 * var(--w));
}
.mg-clip--baby .mg-dev { left: calc(1180 * var(--w)); top: calc(482 * var(--w)); }
.mg-clip--dog .mg-dev { left: calc(1025 * var(--w)); top: calc(530 * var(--w)); }
.mg-clip--pizza .mg-dev { left: calc(1225 * var(--w)); top: calc(490 * var(--w)); }
.mg-dev-3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.mg-dev-3d > i {
  position: absolute; inset: 0; border-radius: 26%;
  background: linear-gradient(160deg, #2f7cd6, #184c90);
  transform: translateZ(calc(var(--i) * 3 * var(--w)));
}
.mg-dev-front {
  position: absolute; inset: 0; border-radius: 26%; overflow: hidden;
  transform: translateZ(calc(36 * var(--w)));
  background: linear-gradient(150deg, #7cc0ff, #3d8fea 50%, #2a74d2);
  box-shadow: inset 0 calc(3 * var(--w)) calc(4 * var(--w)) rgba(255, 255, 255, .4),
              inset 0 calc(-4 * var(--w)) calc(6 * var(--w)) rgba(0, 30, 80, .35);
  display: grid; place-items: center;
}
.mg-dev-front::before, .mg-dev-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* the glint that crosses the face as it turns */
.mg-dev-front::before {
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
}
/* the whole face lighting up when it hears the sound */
.mg-dev-front::after {
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .9), color-mix(in srgb, var(--flash) 30%, transparent) 70%);
  opacity: 0;
}
.mg-dev-plate {
  position: relative; z-index: 1;
  width: 70%; height: 70%; border-radius: 24%;
  background: linear-gradient(#123763, #0a2141);
  display: grid; justify-items: center; align-content: space-evenly;
}
.mg-dev-led {
  width: calc(17 * var(--w)); height: calc(17 * var(--w)); border-radius: 50%;
  background: #fff; box-shadow: 0 0 calc(24 * var(--w)) calc(10 * var(--w)) var(--flash);
}
.mg-dev-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5 * var(--w)); }
.mg-dev-grille b { width: calc(6 * var(--w)); height: calc(6 * var(--w)); border-radius: 50%; background: #4b82c4; }

/* The phone, over a dimmed room. */
.mg-dim { position: absolute; inset: 0; background: #05080c; opacity: .55; }
.mg-phone {
  position: absolute; top: 8cqmin; left: calc(50% - 20cqmin);
  width: 40cqmin; height: 82cqmin;
}
.mg-phone-body {
  position: absolute; inset: 0; border-radius: 6cqmin; padding: 1.4cqmin;
  background: #0d1117;
  box-shadow: 0 2cqmin 6cqmin rgba(0, 0, 0, .5), inset 0 0 0 .5cqmin #2f3b4a;
}
.mg-phone-screen {
  height: 100%; border-radius: 4.8cqmin; overflow: hidden; position: relative;
  background: linear-gradient(165deg, #3d7de0, #6b4fc8 60%, #2a1f5c);
  color: #fff; padding: 2.2cqmin;
}
.mg-phone-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 2.4cqmin; font-weight: 700; padding: 0 1.4cqmin;
}
.mg-phone-dots { display: flex; gap: .6cqmin; }
.mg-phone-dots b { width: 1.2cqmin; height: 1.2cqmin; border-radius: 50%; background: #fff; }
.mg-phone-clock {
  text-align: center; font-size: 11cqmin; font-weight: 300; line-height: 1;
  margin: 5cqmin 0 6cqmin; letter-spacing: -.02em;
}
.mg-note {
  display: flex; gap: 2cqmin; align-items: flex-start;
  background: rgba(255, 255, 255, .94); color: #0d1620;
  border-radius: 3.2cqmin; padding: 2.2cqmin;
  box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .25);
}
.mg-note-icon { width: 7cqmin; height: 7cqmin; flex: none; }
.mg-note-text { display: grid; gap: .3cqmin; line-height: 1.2; min-width: 0; }
.mg-note-app { font-size: 2.2cqmin; font-weight: 700; color: #4a5b6b; letter-spacing: .04em; }
.mg-note-text strong { font-size: 4cqmin; }
.mg-note-text span:last-child { font-size: 3.2cqmin; }
.mg-vibe {
  position: absolute; top: 34%; width: 3cqmin; height: 14cqmin; opacity: 0;
  border: 0 solid #ffb020; border-width: 0 .7cqmin; border-radius: 1cqmin;
}
.mg-vibe-l { left: -7.5cqmin; }
.mg-vibe-r { right: -7.5cqmin; }
@media (max-width: 640px) {
  .mg-phone { top: 4cqmin; left: calc(50% - 26cqmin); width: 52cqmin; height: 86cqmin; }
  .mg-note-icon { width: 9cqmin; height: 9cqmin; }
  .mg-note-app { font-size: 3cqmin; }
  .mg-note-text strong { font-size: 5.6cqmin; }
  .mg-note-text span:last-child { font-size: 4.6cqmin; }
}

/* The closing card. */
.mg-end {
  position: absolute; inset: 0;
  background: var(--mg-end);
  display: grid; place-content: center; justify-items: center; gap: 1cqmin; text-align: center;
}
.mg-end-logo {
  display: flex; align-items: center; gap: .3em; color: var(--text);
  font-size: clamp(30px, 11cqmin, 76px);
}
.mg-end-tag { margin: 0; color: var(--muted); font-size: clamp(15px, 4cqmin, 26px); font-weight: 600; }

/* Subtitles: the whole story is told in text as well. */
.mg-subs {
  position: absolute; inset: auto 0 5cqmin; padding: 0 16px;
  display: grid; justify-items: center; pointer-events: none;
}
.mg-sub {
  grid-area: 1 / 1; opacity: 0; text-align: center;
  background: rgba(5, 8, 12, .78); color: #fff; font-weight: 700;
  font-size: clamp(14px, 4cqmin, 24px); line-height: 1.3;
  padding: .3em .8em; border-radius: 8px;
}

/* Under the stage: a button per sound, and replay. */
.mg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.mg-chapters { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-chapter, .mg-replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
}
.mg-chapter:hover, .mg-replay:hover { border-color: var(--accent); }
.mg-chapter[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.mg-chapter .icon { color: var(--accent); }
.mg-replay { margin-left: auto; transition: background .4s, color .4s, border-color .4s; }
.mg.is-done .mg-replay { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* --- the timelines --- */
.mg.is-waiting *, .mg.is-waiting .mg-dev-front::before, .mg.is-waiting .mg-dev-front::after {
  animation-play-state: paused !important;
}
/* how long the clip runs: its animationend is what moves on to the next one */
.mg-clip.is-playing { animation: mg-life var(--len) linear; }

/* every scene: the device blinks, the phone comes up, the subtitles */
.mg-clip.is-playing .mg-dev-front::after, .mg-clip.is-playing .mg-halo { animation: mg-flash 1.8s linear var(--t-flash) both; }
.mg-clip.is-playing .mg-dev-led { animation: mg-led 1.8s linear var(--t-flash) both; }
.mg-clip.is-playing .mg-devrings circle { animation: mg-ring 1.2s ease-out calc(var(--t-flash) + .1s) 2; }
.mg-clip.is-playing .mg-devrings circle + circle { animation-delay: calc(var(--t-flash) + .5s); }
.mg-clip.is-playing .mg-dim { animation: mg-fade-dim .6s ease-out var(--t-phone) both; }
.mg-clip.is-playing .mg-phone { animation: mg-phone-in .8s cubic-bezier(.2, .9, .3, 1.08) var(--t-phone) both; }
.mg-clip.is-playing .mg-note { animation: mg-note-in .5s cubic-bezier(.2, .9, .3, 1.1) calc(var(--t-phone) + .7s) both; }
.mg-clip.is-playing .mg-phone-body { animation: mg-shake .07s linear calc(var(--t-phone) + 1.25s) 8 alternate; }
.mg-clip.is-playing .mg-vibe { animation: mg-vibe .56s linear calc(var(--t-phone) + 1.25s) both; }
.mg-clip.is-playing .mg-sub { animation: mg-sub var(--d) ease-in-out var(--t) both; }

/* 1. the doorbell */
.mg-clip--door.is-playing .mg-world { animation: mg-cam-door 6.6s linear both; }
.mg-clip--door.is-playing .mg-dev-3d { animation: mg-dev-turn 2.6s cubic-bezier(.2, .7, .2, 1) both; }
.mg-clip--door.is-playing .mg-dev-front::before { animation: mg-glint 1.1s ease-in-out .9s both; }
.mg-clip--door.is-playing .mg-walker { animation: mg-walk 2.1s cubic-bezier(.35, .4, .35, 1) 5.6s both; }
.mg-clip--door.is-playing .mg-leg-f { animation: mg-step .52s ease-in-out 5.6s 4 alternate; }
.mg-clip--door.is-playing .mg-leg-b { animation: mg-step .52s ease-in-out 5.6s 4 alternate-reverse; }
.mg-clip--door.is-playing .mg-arm { animation: mg-arm 2.8s ease-out 7.7s both; }
.mg-clip--door.is-playing .mg-bell-btn { animation: mg-press 1s ease-out 8.1s both; }
.mg-clip--door.is-playing .mg-waves circle { animation: mg-ring 1.3s ease-out 8.15s; }
.mg-clip--door.is-playing .mg-waves circle:nth-child(2) { animation-delay: 8.45s; }
.mg-clip--door.is-playing .mg-waves circle:nth-child(3) { animation-delay: 8.75s; }

/* 2. the baby: asleep, wakes at 2.8s and cries */
.mg-clip--baby.is-playing .mg-world { animation: mg-cam-baby 5s linear both; }
.mg-clip--baby.is-playing .mg-toy { animation: mg-sway 2.4s ease-in-out 0s 5 alternate; }
.mg-clip--baby.is-playing .mg-stars circle { animation: mg-twinkle 1.6s ease-in-out 0s 7 alternate; }
.mg-clip--baby.is-playing .mg-stars circle:nth-child(odd) { animation-delay: .8s; }
.mg-clip--baby.is-playing .mg-zzz text { animation: mg-zzz 1.3s ease-out .2s 2; }
.mg-clip--baby.is-playing .mg-zzz text:nth-child(2) { animation-delay: .6s; }
.mg-clip--baby.is-playing .mg-zzz text:nth-child(3) { animation-delay: 1s; }
.mg-clip--baby.is-playing .mg-baby-sleep { animation: mg-gone .2s step-end 2.8s both; }
.mg-clip--baby.is-playing .mg-baby-cry { animation: mg-hide .2s step-end 2.8s both; }
.mg-clip--baby.is-playing .mg-baby-head { animation: mg-wail .32s ease-in-out 2.8s 10 alternate; }
.mg-clip--baby.is-playing .mg-baby-armup { animation: mg-arm-up .3s ease-out 2.8s both; }
.mg-clip--baby.is-playing .mg-baby-arm { animation: mg-wave-arm .28s ease-in-out 3.1s 12 alternate; }
.mg-clip--baby.is-playing .mg-baby-arm-2 { animation-direction: alternate-reverse; }
.mg-clip--baby.is-playing .mg-tear { animation: mg-tear .7s ease-in 3s 5; }
.mg-clip--baby.is-playing .mg-tear-2 { animation-delay: 3.35s; }
.mg-clip--baby.is-playing .mg-waves circle { animation: mg-ring 1.4s ease-out 3s; }
.mg-clip--baby.is-playing .mg-waves circle:nth-child(2) { animation-delay: 3.5s; }
.mg-clip--baby.is-playing .mg-waves circle:nth-child(3) { animation-delay: 4s; }
.mg-clip--baby.is-playing .mg-waves circle:nth-child(4) { animation-delay: 4.5s; }

/* 3. the dog: a cat on the fence at .8s, barks from 2.8s */
.mg-clip--dog.is-playing .mg-world { animation: mg-cam-dog 4.8s linear both; }
.mg-clip--dog.is-playing .mg-cat { animation: mg-cat-in 1.2s ease-out .8s both; }
.mg-clip--dog.is-playing .mg-dog-tail { animation: mg-wag .3s ease-in-out 0s 34 alternate; }
.mg-clip--dog.is-playing .mg-dog-ear { animation: mg-ear-up .3s ease-out 2s both; }
.mg-clip--dog.is-playing .mg-dog-head { animation: mg-bark-head .5s ease-out 2.8s 6; }
.mg-clip--dog.is-playing .mg-dog-jaw { animation: mg-bark-jaw .5s ease-out 2.8s 6 both; }
.mg-clip--dog.is-playing .mg-woof text { animation: mg-woof 1s ease-out 2.85s 3; }
.mg-clip--dog.is-playing .mg-woof text + text { animation-delay: 3.35s; }
.mg-clip--dog.is-playing .mg-waves circle { animation: mg-ring 1.4s ease-out 3s; }
.mg-clip--dog.is-playing .mg-waves circle:nth-child(2) { animation-delay: 3.5s; }
.mg-clip--dog.is-playing .mg-waves circle:nth-child(3) { animation-delay: 4s; }
.mg-clip--dog.is-playing .mg-waves circle:nth-child(4) { animation-delay: 4.5s; }

/* 4. the pizza: the bike pulls up by 2.8s, honks twice from 3s */
.mg-clip--pizza.is-playing .mg-world { animation: mg-cam-pizza 5s linear both; }
.mg-clip--pizza.is-playing .mg-bike { animation: mg-ride 2.6s cubic-bezier(.2, .6, .3, 1) .2s both; }
.mg-clip--pizza.is-playing .mg-spokes { animation: mg-spin .3s linear .2s 8; }
.mg-clip--pizza.is-playing .mg-headlight, .mg-clip--pizza.is-playing .mg-beam { animation: mg-honk-light .6s ease-out 3s 2; }
.mg-clip--pizza.is-playing .mg-beep text { animation: mg-woof 1s ease-out 3s; }
.mg-clip--pizza.is-playing .mg-beep text + text { animation-delay: 3.6s; }
.mg-clip--pizza.is-playing .mg-waves circle { animation: mg-ring 1.5s ease-out 3s; }
.mg-clip--pizza.is-playing .mg-waves circle:nth-child(2) { animation-delay: 3.3s; }
.mg-clip--pizza.is-playing .mg-waves circle:nth-child(3) { animation-delay: 3.6s; }
.mg-clip--pizza.is-playing .mg-waves circle:nth-child(4) { animation-delay: 3.9s; }

/* the logo */
.mg-clip--end.is-playing .mg-end-logo { animation: mg-pop .8s cubic-bezier(.2, .9, .3, 1.2) .2s both; }
.mg-clip--end.is-playing .mg-end-tag { animation: mg-rise .6s ease-out .7s both; }

/* camera: the scene point (--cam-x, --cam-y) at the stage's centre, at zoom
   --cam-s. The world is resized rather than transformed, so the SVG and the
   device are drawn at the zoom they are seen at and stay sharp. Each shot
   holds still and the camera makes one move, the pull back: a slow drift or a
   bob makes the parts snap pixel by pixel, which trembles (and makes some
   people dizzy). */
@property --cam-s { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --cam-x { syntax: "<number>"; inherits: true; initial-value: 800; }
@property --cam-y { syntax: "<number>"; inherits: true; initial-value: 450; }
@keyframes mg-cam-door {
  0% { --cam-s: 4.4; --cam-x: 1215; --cam-y: 501; }
  36% { --cam-s: 4.4; --cam-x: 1215; --cam-y: 501; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  60% { --cam-s: var(--s2); --cam-x: 980; --cam-y: 500; }
  76% { --cam-s: var(--s2); --cam-x: 980; --cam-y: 500; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { --cam-s: 1; --cam-x: var(--fx); --cam-y: 450; }
}
@keyframes mg-cam-baby {
  0% { --cam-s: var(--bz); --cam-x: 760; --cam-y: 590; }
  72% { --cam-s: var(--bz); --cam-x: 760; --cam-y: 590; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { --cam-s: 1; --cam-x: var(--fx); --cam-y: 450; }
}
@keyframes mg-cam-dog {
  0% { --cam-s: var(--dz); --cam-x: 565; --cam-y: 560; }
  71% { --cam-s: var(--dz); --cam-x: 565; --cam-y: 560; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { --cam-s: 1; --cam-x: var(--fx); --cam-y: 450; }
}
@keyframes mg-cam-pizza {
  0% { --cam-s: var(--pz); --cam-x: 510; --cam-y: 640; }
  70% { --cam-s: var(--pz); --cam-x: 510; --cam-y: 640; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { --cam-s: var(--pz-end); --cam-x: var(--fx); --cam-y: var(--pz-y); }
}
@keyframes mg-life { from, to { outline-color: transparent; } }
@keyframes mg-dev-turn {
  from { transform: rotateX(16deg) rotateY(-62deg) rotateZ(-4deg); }
  to { transform: none; }
}
@keyframes mg-glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes mg-flash {
  0% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: .15; } 36% { opacity: 1; }
  50% { opacity: .15; } 64% { opacity: 1; } 78% { opacity: .15; } 90%, 100% { opacity: .75; }
}
@keyframes mg-led {
  0% { background: #3d7fc9; box-shadow: 0 0 calc(4 * var(--w)) #1f5fae; }
  8%, 36%, 64%, 90%, 100% { background: #fff; box-shadow: 0 0 calc(24 * var(--w)) calc(10 * var(--w)) var(--flash); }
  22%, 50%, 78% { background: var(--flash); box-shadow: 0 0 calc(8 * var(--w)) var(--flash); }
}
@keyframes mg-ring { from { transform: scale(.04); opacity: .95; } to { transform: scale(1); opacity: 0; } }
@keyframes mg-walk { from { transform: translateX(-760px); } to { transform: none; } }
@keyframes mg-step { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes mg-arm {
  0% { transform: none; }
  14% { transform: rotate(-102.6deg); }
  18% { transform: rotate(-106deg); }
  24%, 78% { transform: rotate(-102.6deg); }
  100% { transform: none; }
}
@keyframes mg-press { 0%, 100% { fill: #ffd34e; } 10% { fill: #fff6c2; } }
@keyframes mg-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes mg-twinkle { from { opacity: 1; } to { opacity: .25; } }
@keyframes mg-zzz {
  0% { opacity: 0; transform: translate(0, 10px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -26px); }
}
@keyframes mg-hide { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-gone { from { opacity: 1; } to { opacity: 0; } }
@keyframes mg-wail { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-3px); } }
@keyframes mg-arm-up { from { transform: rotate(80deg); } to { transform: none; } }
@keyframes mg-wave-arm { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }
@keyframes mg-tear { from { transform: none; opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes mg-cat-in { from { transform: translateX(150px); } to { transform: none; } }
@keyframes mg-wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes mg-ear-up { from { transform: rotate(20deg); } to { transform: none; } }
@keyframes mg-bark-head { 0%, 70%, 100% { transform: none; } 25% { transform: rotate(6deg) translateY(-6px); } }
@keyframes mg-bark-jaw { 0%, 70%, 100% { transform: none; } 25% { transform: rotate(-24deg); } }
@keyframes mg-woof {
  0% { opacity: 0; transform: scale(.4); }
  25% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes mg-ride { from { transform: translateX(-760px); } to { transform: none; } }
@keyframes mg-spin { to { transform: rotate(360deg); } }
@keyframes mg-honk-light { 0%, 100% { opacity: 1; } 20% { opacity: .35; } 45% { opacity: 1; } }
@keyframes mg-fade-dim { from { opacity: 0; } to { opacity: .55; } }
@keyframes mg-phone-in { from { transform: translateY(120cqmin); } to { transform: none; } }
@keyframes mg-note-in { from { transform: translateY(-60%) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mg-shake { from { transform: translateX(-.8cqmin) rotate(-1deg); } to { transform: translateX(.8cqmin) rotate(1deg); } }
@keyframes mg-vibe { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } }
@keyframes mg-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mg-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mg-sub {
  0% { opacity: 0; transform: translateY(6px); }
  12%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-clip, .mg-clip.is-current { transition: none; }
  .mg *, .mg .mg-dev-front::before, .mg .mg-dev-front::after { animation: none !important; }
}

/* --- Buying the device (/comprar/, orders.py) --- */
.order { max-width: 1040px; padding-top: 32px; padding-bottom: 64px; }
.order-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.order-summary { position: sticky; top: 84px; display: grid; gap: 10px; }
.order-summary h2 { margin: 0; font-size: 1.2rem; }
.order-form { display: grid; gap: 14px; }
.order-form h2 { margin: 8px 0 0; font-size: 1.15rem; }
.order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.order-fields .field, .order-form .field { display: grid; gap: 4px; }
.order-fields input, .order-fields select, .order-form textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.order-wide { grid-column: 1 / -1; }
.order-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ship-options { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.ship-option {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.ship-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ship-option input { width: 18px; height: 18px; accent-color: var(--accent); }
.ship-text { display: grid; gap: 2px; }
.ship-text small { color: var(--muted); }
.ship-badge { justify-self: start; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ok); }
.ship-price { font-weight: 700; white-space: nowrap; }
.order-total { margin: 6px 0 0; display: grid; gap: 6px; }
.order-total div { display: flex; justify-content: space-between; gap: 12px; }
.order-total dt { color: var(--muted); }
.order-total dd { margin: 0; font-weight: 600; }
.order-total-sum { border-top: 1px solid var(--border); padding-top: 8px; font-size: 1.15rem; }
.order-total-sum dt { color: var(--text); font-weight: 700; }
.order-done { max-width: 640px; }
@media (max-width: 820px) {
  .order-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .order-fields { grid-template-columns: 1fr; }
}
.wizard-error { color: var(--danger); margin: 0; }
.blog-translate { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); }
.blog-translate a { font-weight: 600; }

/* reCAPTCHA checkbox (_recaptcha.html): Google draws it 304px wide. */
.recaptcha { min-height: 78px; }
@media (max-width: 360px) { .recaptcha { transform: scale(.9); transform-origin: 0 0; } }