/* Gestión Smart — printed-annual direction.
   One axis at 42% of the width. Headings start on it, body hangs from it, the zone to its left holds side notes.
   Colour comes in whole pages (.g-*); nothing is drawn with rules, shadows or gradients. */

@font-face {
  font-family: "Inter";
  src: url(/assets/fuentes/inter-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fuentes/inter-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --graphite: #091d2d;
  --graphite-2: #0e2a42;
  --paper: #f7f9ff;
  --mid: #d8eaff;
  --accent: #493ee5;

  --m: clamp(16px, 2.3vw, 32px);   /* the one pair of outer margins */
  --g: clamp(12px, 1.6vw, 24px);   /* column gap */
  --pad: clamp(72px, 9vw, 144px);  /* vertical room of a page */

  --step-small: 0.875rem;
  --step-body: 1rem;
  --step-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

  --t-d: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  --t-xl: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);
  --t-l: clamp(1.75rem, 1.2rem + 1.7vw, 2.375rem);
  --t-m: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem);
  --t-s: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
  --t-xs: clamp(1.375rem, 1.1rem + 0.6vw, 1.625rem);

  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* ——— grounds: every section is one whole colour ——— */
.g-ink { --bg: var(--graphite); --fg: #f7f9ff; --soft: #a9c0d9; --tone: #0e2a42; }
.g-surface { --bg: var(--graphite-2); --fg: #f7f9ff; --soft: #a9c0d9; --tone: #143a58; }
.g-paper { --bg: var(--paper); --fg: #091d2d; --soft: #44566b; --tone: #e3efff; }
.g-tint { --bg: #edf4ff; --fg: #091d2d; --soft: #44566b; --tone: #dbe9ff; }
.g-mid { --bg: var(--mid); --fg: #091d2d; --soft: #2b4259; --tone: #c4dcff; }
.g-accent { --bg: var(--accent); --fg: #fff; --soft: #e6e4ff; --tone: #635bff; }
[class^="g-"], [class*=" g-"] { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--graphite);
  color: #f7f9ff;
  font-family: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.g-accent :focus-visible { outline-color: #fff; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.skip {
  position: absolute; left: var(--m); top: 8px; z-index: 100; padding: 10px 16px;
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ——— type ——— */
.display, .t-xl, .t-l, .t-m, .t-s, .t-xs, .h3, .h3-s, .h3-xs, .specimen, .price-fig {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.display { font-size: var(--t-d); line-height: 1.1; }
.t-xl { font-size: var(--t-xl); }
.t-l { font-size: var(--t-l); }
.t-m { font-size: var(--t-m); }
.t-s { font-size: var(--t-s); line-height: 1.18; }
.t-xs { font-size: var(--t-xs); line-height: 1.2; }
.h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; }
.h3-s { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.h3-xs { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
.lead { font-size: var(--step-lead); line-height: 1.5; letter-spacing: 0; font-weight: 400; text-wrap: pretty; }
.body { max-width: 40ch; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 600; }
.small { font-size: var(--step-small); line-height: 1.45; }
.soft { color: var(--soft); }
.lnk {
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px;
  text-decoration-color: currentColor; transition: text-decoration-color 0.2s, color 0.2s;
}
.lnk:hover { text-decoration-color: var(--accent); }
.g-accent .lnk:hover { text-decoration-color: #f7f9ff; }
.lnk::after { content: " →"; text-decoration: none; display: inline-block; transition: transform 0.25s var(--ease); }
.lnk:hover::after { transform: translateX(4px); }

/* ——— controls ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  background: var(--accent); color: #fff;
  font-weight: 600; font-size: var(--step-body); letter-spacing: -0.01em; line-height: 1.1;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s var(--ease);
}
.btn:hover { background: var(--fg, #f7f9ff); color: var(--bg, #091d2d); }
.btn:active { transform: translateY(2px); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 0.9375rem; }
.btn-ink { background: #091d2d; color: #f7f9ff; }
.btn-ink:hover { background: #f7f9ff; color: #091d2d; }

/* ——— frame ——— */
.topbar { height: 10px; background: var(--accent); }
.cols {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  padding-inline: var(--m);
}
.cols > .axis { grid-column: 6 / -1; min-width: 0; }
.cols > .zone { grid-column: 1 / 5; min-width: 0; }
@media (min-width: 861px) { .cols > .zone:empty + .axis { grid-column: 1 / 10; } }
.cols > .wide { grid-column: 1 / -1; min-width: 0; }
.cols > .half { grid-column: 1 / 6; min-width: 0; }
.pg { padding-block: var(--pad); position: relative; }
.pg > .cols + .cols { margin-top: clamp(40px, 5vw, 80px); }
.axis > * + * { margin-top: 1.1em; }
.axis > .t-xl + *, .axis > .t-l + *, .axis > .t-m + *, .axis > .t-s + *, .axis > .t-xs + * { margin-top: clamp(20px, 2.4vw, 36px); }
.side { font-size: var(--step-small); line-height: 1.45; color: var(--soft); max-width: 30ch; }
.zone .side + .side { margin-top: 1em; }
.zone.sticky > div { position: sticky; top: 32px; }
@media (max-width: 860px) {
  :root { --pad: clamp(56px, 14vw, 80px); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > .axis, .cols > .zone, .cols > .wide, .cols > .half { grid-column: 1 / -1; }
  .cols > .zone { order: -1; margin-bottom: 18px; }
  .zone.sticky > div { position: static; }
}

/* ——— header ——— */
.top {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center;
  padding: 18px var(--m); background: #f7f9ff; color: #091d2d; min-height: 76px;
}
.brand { grid-column: 1 / 4; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.03em; color: #091d2d; }
.brand .mark { color: var(--accent); }
.links { grid-column: 4 / 10; display: flex; gap: clamp(16px, 1.8vw, 28px); justify-content: center; }
.links a { text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 6px 0; position: relative; white-space: nowrap; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.links a:hover::after, .links a[aria-current]::after { transform: scaleX(1); }
.tools { grid-column: 10 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.login { font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.login:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 0.9375rem; padding: 8px 10px; min-width: 44px; text-align: center;
  background: #e3efff; transition: background 0.2s, color 0.2s;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: #091d2d; color: #f7f9ff; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px; background: #091d2d; color: #f7f9ff; padding: 6px 0; }
.lang ul a { display: block; padding: 10px 16px; text-decoration: none; font-weight: 500; }
.lang ul a:hover { background: var(--accent); color: #fff; }
.lang ul a[aria-current] { font-weight: 700; }
.menu-btn { display: none; min-height: 44px; padding: 8px 14px; background: #e3efff; border: 0; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: #091d2d; color: #f7f9ff; }
.sheet { background: #e3efff; color: #091d2d; padding: 20px var(--m) 32px; }
.sheet[hidden] { display: none; }
.sheet nav { display: grid; }
.sheet nav a { font-size: clamp(1.5rem, 6.5vw, 2.25rem); font-weight: 600; letter-spacing: -0.04em; text-decoration: none; padding: 10px 0; line-height: 1.05; }
.sheet-langs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; }
.sheet-langs a { font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding: 8px 0; }
.sheet-langs a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
@media (max-width: 1180px) {
  .links { display: none; }
  .login { display: none; }
  .brand { grid-column: 1 / 7; }
  .tools { grid-column: 7 / -1; }
  .menu-btn { display: inline-block; }
}
@media (max-width: 560px) {
  .tools { gap: 8px; }
  .tools .btn-sm { display: none; }
  .brand { font-size: 1.125rem; }
}
@media (min-width: 1181px) { .sheet { display: none; } }

/* ——— hero ——— */
.hero { padding-bottom: clamp(64px, 8vw, 120px); }
.mast {
  display: grid; height: clamp(300px, 46vh, 520px);
  grid-template-columns: 1.7fr 1fr 1.25fr 1.15fr 1.25fr 1fr;
}
.mast > * { position: relative; overflow: hidden; min-width: 0; }
.mast img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.tile { padding: clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.tile .fig { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.tile .desc { font-size: var(--step-small); line-height: 1.35; max-width: 24ch; }
.fade > img { opacity: 0; transition: opacity 1.6s ease; }
.fade > img.on, html:not(.js) .fade > img:first-child { opacity: 1; }
.hero-text { margin-top: clamp(40px, 5.5vw, 88px); }
.hero-text .display { max-width: 16ch; }
.hero-text .lead { max-width: 36ch; }
.hero-text .lead + .lead { margin-top: 0.5em; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(28px, 3vw, 44px); }
.hero .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--g); margin-top: clamp(32px, 4vw, 56px); max-width: 640px; }
.facts dt { font-weight: 600; letter-spacing: -0.01em; }
.facts dd { color: var(--soft); font-size: var(--step-small); margin-top: 4px; }
@media (max-width: 860px) {
  .mast { grid-template-columns: 1.3fr 1fr 1.3fr; grid-template-rows: 1fr 1fr; height: clamp(300px, 52vh, 420px); }
  .tile .desc { display: none; }
  .tile .fig { font-size: 2rem; }
  .hero .facts { grid-template-columns: 1fr; }
  .hero-text .display { max-width: none; }
}

/* ——— showcase: two giant words ——— */
.show .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; padding-inline: var(--m); }
.show .head h2 { grid-column: 1 / 6; }
.show .head p { grid-column: 6 / -1; max-width: 46ch; }
.specimens { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); margin-top: clamp(56px, 9vh, 110px); }
.specimens figure { overflow: hidden; height: calc(var(--spec) * 0.7); min-width: 0; }
.specimens figure:first-child { grid-column: 1 / 6; }
.specimens figure:last-child { grid-column: 6 / -1; }
.specimens figcaption { font-size: var(--step-body); max-width: 30ch; margin-bottom: 18px; font-weight: 500; }
.specimens .specimen { font-size: var(--spec); line-height: 0.86; letter-spacing: -0.05em; white-space: nowrap; display: block; }
.specimens figure { height: auto; }
.specimens .box { overflow: visible; height: auto; padding-bottom: 0.05em; }
.show { --spec: clamp(2.75rem, 6vw, 5.5rem); }
@media (max-width: 860px) {
  .show .head { grid-template-columns: 1fr; row-gap: 22px; }
  .show .head h2, .show .head p { grid-column: 1 / -1; }
  .specimens { grid-template-columns: 1fr; row-gap: 28px; }
  .specimens figure:first-child, .specimens figure:last-child { grid-column: 1 / -1; }
  .show { --spec: clamp(2.5rem, 14vw, 4rem); }
  .specimens figure:last-child .box { background: #091d2d; color: #f7f9ff; padding-inline: 12px; margin-inline: calc(var(--m) * -1); padding-left: var(--m); }
}

/* ——— capabilities: h3 groups ——— */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px) var(--g); }
.pairs article > * + * { margin-top: 0.7em; }
.pairs.one { grid-template-columns: 1fr; }
.pairs.three { grid-template-columns: repeat(3, 1fr); }
.pairs.three article { grid-column: auto; }
.pairs .wide-item { grid-column: 1 / -1; }
@media (max-width: 1100px) { .pairs.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .pairs, .pairs.three { grid-template-columns: 1fr; } }

.mark-list li { position: relative; padding-left: 1.4em; }
.mark-list li + li { margin-top: 0.7em; }
.mark-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.55em; height: 0.55em; background: var(--fg); }

/* ——— call transcript ——— */
.call-grid { display: grid; grid-template-rows: auto auto auto; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); margin-top: clamp(48px, 6vw, 96px); align-items: start; }
.call-side { grid-column: 1 / 4; grid-row: 1; align-self: stretch; }
.call-side > div { position: sticky; top: 32px; }
.call-grid > .turns { grid-row: 1; }
.call-grid > .call-actions { grid-row: 2; }
.call-grid > .log { grid-row: 3; }
.call-clock { font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.call-meta { margin-top: 18px; display: grid; gap: 4px; }
.call-meta .dot { display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 8px; }
.is-live .call-meta .dot { animation: beat 1.2s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(0.55); opacity: 0.5; } }
.lookups { margin-top: clamp(28px, 4vw, 56px); }
.lookups h3 { margin-bottom: 14px; }
.lookups li { padding: 8px 0 8px 18px; position: relative; color: var(--soft); transition: color 0.4s, transform 0.4s var(--ease); font-size: var(--step-small); }
.lookups li::before { content: ""; position: absolute; left: 0; top: 1em; width: 8px; height: 8px; background: currentColor; opacity: 0.45; transition: background 0.3s, opacity 0.3s; }
.lookups li.on { color: var(--fg); transform: translateX(6px); }
.lookups li.on::before { background: var(--accent); opacity: 1; }
.turns { grid-column: 5 / -1; display: grid; gap: 14px; max-width: 720px; }
.turn { display: grid; grid-template-columns: 1fr; gap: 4px; justify-items: start; }
.turn .who { font-size: var(--step-small); color: var(--soft); font-weight: 500; }
.turn .who b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; margin-right: 10px; }
.turn p { font-size: 1rem; line-height: 1.55; letter-spacing: 0; max-width: 56ch; padding: 12px 16px; border-radius: 4px 14px 14px 14px; background: rgba(255, 255, 255, 0.08); }
.turn.own { justify-items: end; }
.turn.own .who { text-align: right; }
.turn.own p { background: var(--accent); color: #fff; border-radius: 14px 4px 14px 14px; font-weight: 400; }
.turn:not(.own) p { font-weight: 400; }
.js .turns .turn { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .turns .turn.wait { opacity: 0; transform: translateY(14px); }
.typing { display: inline-flex; gap: 5px; height: 1em; align-items: center; }
.typing i { width: 7px; height: 7px; background: var(--soft); animation: type 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes type { 50% { transform: translateY(-5px); opacity: 0.4; } }
.log { grid-column: 1 / -1; margin: clamp(48px, 6vw, 96px) calc(var(--m) * -1) 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.log h3 { grid-column: 1 / -1; padding: 0 var(--m) 18px; }
.log .cell { padding: clamp(18px, 2vw, 32px) var(--m) clamp(28px, 3vw, 48px); min-height: 120px; display: flex; flex-direction: column; gap: 10px; justify-content: space-between; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.log .cell:nth-child(2) { background: #f7f9ff; color: #091d2d; }
.log .cell:nth-child(3) { background: var(--mid); color: #091d2d; }
.log .cell:nth-child(4) { background: var(--accent); color: #fff; }
.log .cell:nth-child(5) { background: #f7f9ff; color: #091d2d; }
.log .cell b { font-size: var(--step-small); font-weight: 600; }
.log .cell p { font-size: 1rem; line-height: 1.4; letter-spacing: 0; font-weight: 500; }
.js .log .cell.wait { opacity: 0; transform: translateY(16px); }
.call-actions { grid-column: 5 / -1; display: flex; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.call-actions button { background: none; border: 0; padding: 8px 0; cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.call-actions button:hover { text-decoration-color: var(--accent); }
.call-actions [hidden] { display: none; }
@media (max-width: 860px) {
  .call-grid { grid-template-columns: 1fr; }
  .call-side, .turns, .call-actions { grid-column: 1 / -1; }
  .call-side { margin-bottom: 36px; } .call-side > div { position: static; }
  .call-grid > .turns { grid-row: 2; } .call-grid > .call-actions { grid-row: 3; } .call-grid > .log { grid-row: 4; }
  .log { grid-template-columns: 1fr 1fr; }
  .turn.own { padding-left: 24px; }
}

/* ——— listen ——— */
.player { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-top: clamp(24px, 3vw, 40px); max-width: 640px; }
.player .play { width: 72px; height: 72px; background: var(--accent); border: 0; color: #fff; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: background 0.2s, color 0.2s, transform 0.15s var(--ease); }
.player .play:hover { background: #091d2d; color: #f7f9ff; }
.player .play:active { transform: scale(0.96); }
.player .play svg { width: 26px; height: 26px; }
.player .play .i-pause { display: none; }
.player.playing .i-play { display: none; }
.player.playing .i-pause { display: block; }
.player .bar { position: relative; height: 16px; background: #091d2d; cursor: pointer; }
.player .bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.player .time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5.5ch; text-align: right; }
html:not(.js) .player .play, html:not(.js) .player .bar, html:not(.js) .player .time { display: none; }
html:not(.js) .player { display: block; }
.player audio { width: 100%; }
.js .player audio { display: none; }

/* ——— pinned panel ——— */
.pin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.pin-stage { grid-column: 1 / 7; position: sticky; top: 12svh; height: 76svh; margin-left: var(--m); align-self: start; z-index: 2; overflow: hidden; }
.pin-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.pin-stage img.on { opacity: 1; }
.pin-text { grid-column: 8 / -1; padding-right: var(--m); padding-block: var(--pad) calc(var(--pad) * 0.6); min-width: 0; }
.pin-text > .t-l, .pin-text > .t-m, .pin-text > .t-s, .pin-text > .t-xs, .pin-text > .t-xl { margin-bottom: clamp(24px, 3vw, 40px); }
.pin-block { min-height: 56svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(24px, 6svh, 64px); }
.pin-block > * + * { margin-top: 1em; }
.pin-block img { display: none; }
html:not(.js) .pin-stage { display: none; }
html:not(.js) .pin-text { grid-column: 1 / -1; padding-left: var(--m); }
html:not(.js) .pin-block img { display: block; margin-top: 24px; }
.pin-block.on h3 { color: var(--fg); }
.js .pin-block { opacity: 0.38; transition: opacity 0.6s var(--ease); }
.js .pin-block.on { opacity: 1; }
@media (max-width: 860px) {
  .pin { grid-template-columns: 1fr; }
  .pin-stage { display: none; }
  .pin-block img { display: block; width: 100%; height: auto; margin-top: 16px; }
  .js .pin-block { opacity: 1; }
  .pin-text { grid-column: 1; padding-left: var(--m); padding-top: 40px; }
  .pin-block { min-height: 0; justify-content: flex-start; padding-block: 28px; }
}

/* ——— a text page with one large picture ——— */
.shot { overflow: clip; margin: clamp(48px, 6vw, 96px) 0 0; padding: clamp(24px, 3.5vw, 56px) var(--m) 0; }
.shot img { width: 100%; height: auto; margin-inline: auto; max-width: 1280px; }
.shot.tall img { max-width: 960px; }
.field { padding-bottom: 0; }
.cols + .shot { margin-top: clamp(48px, 6vw, 96px); }

/* ——— stages as one bar ——— */
.stagebar { display: flex; gap: 6px; padding-inline: var(--m); min-height: 22vh; margin-top: clamp(40px, 5vw, 64px); }
.stagebar > div { padding: clamp(16px, 1.6vw, 24px); min-height: clamp(220px, 28vh, 320px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.stagebar > div:nth-child(1) { flex: 1 1 0; min-width: 0; background: #091d2d; color: #f7f9ff; }
.stagebar > div:nth-child(2) { flex: 1; background: var(--mid); color: #091d2d; }
.stagebar > div:nth-child(3) { flex: 1; background: var(--accent); color: #fff; }
.stagebar h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.stagebar p { font-size: var(--step-small); line-height: 1.45; max-width: 44ch; font-size: 1rem; }
@media (max-width: 860px) { .stagebar { flex-direction: column; } .stagebar > div { min-height: 0; } }

/* ——— integrations ——— */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.logos li { background: #fff; padding: 22px 18px; height: 92px; display: grid; place-items: center; }
.logos li:nth-child(even) { background: #e3efff; }
.logos img { max-height: 36px; width: auto; max-width: 100%; object-fit: contain; }
.logos .txt { font-weight: 600; letter-spacing: -0.02em; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 18px; background: #091d2d; color: #f7f9ff; font-weight: 500; }

/* ——— sectors: rows of large type ——— */
.rows { display: grid; }
.rows a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: clamp(22px, 2.6vw, 36px) var(--m); text-decoration: none; transition: background 0.3s, color 0.3s; align-items: baseline; }
.rows a:hover { background: var(--fg); color: var(--bg); }
.rows .name { grid-column: 1 / 6; font-size: var(--t-xs); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
.rows .what { grid-column: 6 / -1; max-width: 44ch; }
@media (max-width: 860px) { .rows a { grid-template-columns: 1fr; row-gap: 8px; } .rows .name, .rows .what { grid-column: 1 / -1; } }

/* ——— soon ——— */
.soon-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); margin-top: clamp(40px, 5vw, 72px); row-gap: 56px; }
.soon-grid article { grid-column: span 4; background: var(--graphite); color: #f7f9ff; padding: clamp(22px, 2.4vw, 36px); min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.soon-grid .tag { display: inline-block; align-self: flex-start; background: var(--accent); color: #fff; font-weight: 600; font-size: var(--step-small); padding: 4px 10px; }
.soon-grid h3 { margin-top: 20px; }
.soon-grid p { margin-top: 12px; color: #f7f9ff; }
@media (max-width: 1100px) { .soon-grid article { grid-column: span 6; } }
@media (max-width: 860px) { .soon-grid { grid-template-columns: 1fr; } .soon-grid article { grid-column: 1 / -1; } }

/* ——— pricing ——— */
.price { display: grid; grid-template-columns: 5fr 7fr; min-height: 90svh; }
.price > div { padding: clamp(24px, 3.4vw, 56px) var(--m); display: flex; flex-direction: column; min-width: 0; }
.price > div:first-child { padding-left: var(--m); }
.price .name { font-size: clamp(2.25rem, 0.8rem + 4.4vw, 5.4rem); }
.price .who { margin-top: 24px; max-width: 28ch; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.015em; }
.price .foot-row { margin-top: auto; padding-top: 56px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.price-fig { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.price .per { font-size: 1.125rem; margin-left: 10px; font-weight: 500; letter-spacing: 0; }
.price .inc li { padding: 10px 0 10px 1.4em; font-size: var(--step-body); }
.price .inc { margin-top: 28px; max-width: 46ch; }
@media (max-width: 860px) { .price { grid-template-columns: 1fr; min-height: 0; } .price > div { min-height: 70svh; } .price-fig { font-size: 3.5rem; } }

/* ——— faq ——— */
.faq-head { padding-inline: var(--m); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.faq-head h2 { grid-column: 1 / 7; color: var(--soft); }
.faq { display: grid; row-gap: clamp(56px, 6vw, 88px); margin-top: clamp(56px, 6vw, 88px); padding-inline: var(--m); }
.faq .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; }
.faq dt { grid-column: 1 / 7; font-size: clamp(1.5rem, 0.9rem + 1.8vw, 2.5rem); font-weight: 550; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.faq dd { grid-column: 8 / -1; max-width: 42ch; font-size: var(--step-body); line-height: 1.55; }
.faq dd > * + * { margin-top: 0.8em; }
@media (max-width: 860px) {
  .faq .row { grid-template-columns: 1fr; row-gap: 16px; }
  .faq dt, .faq dd, .faq-head h2 { grid-column: 1 / -1; }
  .faq dt { font-size: 1.5rem; }
}

/* ——— closing strip ——— */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); height: 40svh; min-height: 240px; }
.strip > * { position: relative; overflow: hidden; }
.strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.band { padding: clamp(40px, 6svh, 64px) var(--m) clamp(72px, 9vw, 120px); min-height: 44svh; }
.band .cols { padding-inline: 0; align-items: start; }
.band .cta-text { grid-column: 1 / 10; }
.band .cta-text .statement { font-size: clamp(1.625rem, 1rem + 1.8vw, 2.625rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 600; max-width: 32ch; text-wrap: balance; }
.band .statement a { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; transition: color 0.2s, background 0.2s; }
.band .statement a:hover { background: #091d2d; color: #fff; text-decoration-color: transparent; }
.band .small-lines { margin-top: 32px; max-width: 46ch; display: grid; gap: 4px; }
.band .who { grid-column: 11 / -1; }
.band .who img { width: 100%; max-width: 150px; aspect-ratio: 4 / 5; object-fit: cover; margin-left: auto; }
@media (max-width: 860px) {
  .band .cta-text, .band .who { grid-column: 1 / -1; }
  .band .who { margin-top: 24px; }
  .band .who img { max-width: 96px; }
}

/* ——— footer ——— */
.foot { padding: clamp(40px, 5vw, 72px) var(--m) clamp(24px, 3vw, 40px); overflow: hidden; }
.foot-name { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.foot-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); margin-top: clamp(40px, 5vw, 72px); row-gap: 40px; }
.foot-places { grid-column: 1 / 6; display: grid; gap: 4px; align-content: start; }
.foot-line { font-size: var(--step-body); max-width: 30ch; margin-bottom: 14px; }
.place { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; text-decoration: none; width: fit-content; }
.place:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
.foot-cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); align-content: start; }
.foot-cols li + li { margin-top: 8px; }
.foot-cols a { font-size: 0.9375rem; text-decoration: none; display: inline-block; padding: 2px 0; }
.foot-cols a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.foot-cols .gap { height: 14px; }
.foot-legal { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: clamp(56px, 7vw, 104px); font-size: var(--step-small); }
.foot-legal p { max-width: 70ch; color: var(--soft); }
.foot-legal a { white-space: nowrap; font-weight: 600; }
@media (max-width: 1100px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 860px) {
  .foot-places, .foot-cols { grid-column: 1 / -1; }
  .foot-legal { flex-direction: column; align-items: flex-start; }
}

/* ——— inner pages ——— */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--step-small); color: var(--soft); }
.crumbs a { color: inherit; text-underline-offset: 4px; }
.crumbs span[aria-current] { color: var(--fg); font-weight: 500; }
.toc { display: grid; gap: 8px; margin-top: 18px; }
.toc a { font-size: var(--step-small); text-decoration: none; color: var(--soft); transition: color 0.2s; }
.toc a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.page-hero { padding-block: clamp(56px, 7vw, 112px) clamp(56px, 6vw, 96px); }
.page-hero .display { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); max-width: 22ch; }
.page-hero .lead { max-width: 38ch; }
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--step-body); }
caption { text-align: left; }
th, td { text-align: left; padding: 14px 16px; vertical-align: top; }
thead th { font-weight: 600; background: var(--fg); color: var(--bg); }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: var(--tone); }
tbody th { font-weight: 600; }
@media (max-width: 860px) {
  table, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { padding: 14px 0; }
  tr:nth-child(even) { background: var(--tone); }
  th, td { padding: 2px 12px; }
}
.imgs { display: grid; gap: 0; }
.imgs.two { grid-template-columns: 1fr 1fr; }
.imgs img { width: 100%; height: auto; }
@media (max-width: 860px) { .imgs.two { grid-template-columns: 1fr; } }
.card-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-links a { padding: clamp(22px, 2.6vw, 40px) var(--m); text-decoration: none; background: var(--tone); transition: background 0.25s, color 0.25s; display: block; }
.card-links a:hover { background: var(--fg); color: var(--bg); }
.card-links a > * + * { margin-top: 10px; }
@media (max-width: 860px) { .card-links { grid-template-columns: 1fr; } }
.prose p + p, .prose ul + p, .prose p + ul, .prose ol + p { margin-top: 1em; }
.prose h3 { margin-top: 2em; margin-bottom: 0.6em; }
.prose { max-width: 62ch; }
.prose ul, .prose ol { padding-left: 1.2em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose a { text-underline-offset: 4px; }

/* ——— form ——— */
.form { display: grid; gap: 22px; max-width: 640px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .form .two { grid-template-columns: 1fr; } }
.field-row label { display: block; font-weight: 600; margin-bottom: 8px; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; color: #091d2d; background: #f7f9ff;
  border: 2px solid #f7f9ff; border-radius: 0; transition: border-color 0.2s, background 0.2s;
}
.g-paper .form input, .g-paper .form select, .g-paper .form textarea, .g-mid .form input, .g-mid .form select, .g-mid .form textarea { background: #fff; border-color: #091d2d; }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); outline: none; background: #fff; }
.form [aria-invalid="true"] { border-color: #ff8a6b; }
.form .err { margin-top: 8px; color: #ffb3a0; font-weight: 500; }
.g-paper .form .err, .g-mid .form .err { color: #b3260b; }
.form .err[hidden] { display: none; }
.form .alert { padding: 18px 20px; background: #f7f9ff; color: #091d2d; }
.form .alert[hidden] { display: none; }
.form .alert b { display: block; margin-bottom: 4px; }
.form .alert.bad { background: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ——— cookies ——— */
.ck { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; background: #091d2d; color: #f7f9ff; padding: 18px var(--m); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; animation: ck-in 0.5s var(--ease) both; }
.ck p { max-width: 72ch; font-size: var(--step-small); font-size: 0.9375rem; }
.ck .acts { display: flex; gap: 10px; }
.ck button { min-height: 44px; padding: 8px 20px; font-weight: 600; border: 0; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ck button[data-cookies="no"] { background: #143a58; color: #f7f9ff; }
.ck button[data-cookies="si"] { background: #f7f9ff; color: #091d2d; }
.ck button:hover { background: var(--accent); color: #fff; }
@keyframes ck-in { from { transform: translateY(100%); } }

/* ——— entrance ——— */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-line { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .js .rv, .js .turns .turn.wait, .js .log .cell.wait { opacity: 1; transform: none; }
  .fade > img { opacity: 0; }
  .fade > img:first-child { opacity: 1; }
}

/* ——— root chooser ——— */
.choose { min-height: calc(100svh - 10px); padding: var(--m); display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 900px; }
.choose .brand-line { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; }
.choose ul { display: grid; gap: 4px; }
.choose a { font-size: clamp(2rem, 1rem + 4vw, 4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; text-decoration: none; display: inline-block; transition: transform 0.25s var(--ease), color 0.2s; }
.choose a:hover { color: var(--accent); transform: translateX(8px); }

.foot-name span { display: inline-block; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: clamp(40px, 5vw, 72px); }
.stats .stat { padding: clamp(18px, 2vw, 32px) var(--m) clamp(24px, 3vw, 44px); min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.stats .stat:nth-child(4n + 1) { background: #f7f9ff; color: #091d2d; }
.stats .stat:nth-child(4n + 2) { background: var(--mid); color: #091d2d; }
.stats .stat:nth-child(4n + 3) { background: var(--accent); color: #fff; }
.stats .stat:nth-child(4n + 4) { background: #0e2a42; color: #f7f9ff; }
.stats .fig { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.stats .what { font-size: var(--step-body); line-height: 1.35; max-width: 26ch; font-weight: 500; }
.page-hero .stats { margin-top: clamp(48px, 6vw, 88px); }
.notice { padding-block: clamp(28px, 4vw, 48px); }
.notice .axis > * + * { margin-top: 0.6em; }
.pairs.z { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pairs.z article { grid-column: 1 / 6; }
.pairs.z article:nth-child(even) { grid-column: 6 / -1; }
.pairs.z article.wide-item { grid-column: 1 / -1; }
.pairs.z article:nth-child(even) > p, .pairs.z article:nth-child(even) > ul { max-width: 44ch; }
.pairs.z article > p { max-width: 44ch; }
.pairs figure { margin-bottom: 1.1em; }
.pairs figure img, .zfig img, .afig img { width: 100%; height: auto; max-width: 640px; }
.afig { margin-top: 1.6em; }
@media (max-width: 860px) { .pairs.z article, .pairs.z article:nth-child(even) { grid-column: 1 / -1; } }
.lookups strong { display: block; color: var(--fg); font-weight: 600; }
.lookups li span { display: block; }
.log { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.log .cell:nth-child(4n + 2) { background: #f7f9ff; color: #091d2d; }
.log .cell:nth-child(4n + 3) { background: var(--mid); color: #091d2d; }
.log .cell:nth-child(4n + 4) { background: var(--accent); color: #fff; }
.log .cell:nth-child(4n + 5) { background: #0e2a42; color: #f7f9ff; }
.log h3 { padding-bottom: 20px; }
.has-faq .cols + .cols { margin-top: 0; }
.faq { padding-inline: 0; }
td[data-label]::before, th[data-label]::before { display: none; }
@media (max-width: 860px) { td[data-label]::before, th[data-label]::before { display: block; content: attr(data-label); font-size: var(--step-small); font-weight: 600; opacity: 0.7; } }
@media (min-width: 861px) { .tbl-wrap table { margin-top: 12px; } }
.page-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 32px; }
.page-hero .axis > p + p { margin-top: 0.9em; }
.page-hero .axis > .small { margin-top: 1.4em; max-width: 60ch; }
.hero-text .display, .hero .lead, .hero .actions, .hero .facts { animation: rise 0.9s var(--ease) both; }
.hero-text .lead { animation-delay: 0.12s; }
.hero .actions { animation-delay: 0.22s; }
.hero .facts { animation-delay: 0.32s; }
.mast > * { animation: rise 1s var(--ease) both; }
.mast > *:nth-child(2) { animation-delay: 0.06s; } .mast > *:nth-child(3) { animation-delay: 0.12s; }
.mast > *:nth-child(4) { animation-delay: 0.18s; } .mast > *:nth-child(5) { animation-delay: 0.24s; } .mast > *:nth-child(6) { animation-delay: 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.page-hero .display, .page-hero h1 { animation: rise 0.9s var(--ease) both; }

/* ——— hero (brand palette, layered product shots with parallax) ——— */
.hero { padding-bottom: 0; position: relative; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); align-items: center; min-height: calc(100svh - 86px); padding-block: clamp(40px, 6vw, 96px); }
.hero-copy { grid-column: 1 / 8; position: relative; z-index: 3; }
.hero-copy .display { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); line-height: 1.1; }
.hero-copy .lead { margin-top: 20px; max-width: 52ch; }
.hero-copy .body { margin-top: 0.7em; max-width: 44ch; color: var(--soft); }
.hero-copy .actions { margin-top: clamp(24px, 3vw, 40px); }
.hero-notes { margin-top: clamp(28px, 3.4vw, 48px); display: grid; gap: 10px; max-width: 46ch; }
.hero-notes .side { max-width: none; }
.hero-art { grid-column: 8 / -1; position: relative; height: clamp(420px, 46vw, 700px); min-width: 0; }
.hero-art > * { position: absolute; will-change: transform; }
.hero-art .plate { right: calc(var(--m) * -1); top: 4%; width: 62%; height: 84%; background: var(--accent); }
.hero-art figure { background: #fff; overflow: hidden; box-shadow: none; }
.hero-art figure img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 0 0); }
.hero-art .l1 { left: 4%; top: 0; width: 82%; aspect-ratio: 16 / 10; z-index: 1; }
.hero-art .l2 { left: 0; top: 40%; width: 58%; aspect-ratio: 16 / 10; z-index: 2; }
.hero-art .l3 { right: calc(var(--m) * -0.6); top: 56%; width: 48%; aspect-ratio: 16 / 10; z-index: 3; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles .tile { min-height: clamp(180px, 20vw, 300px); }
.tiles .tile .fig { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); }
.hero .facts.cols { padding-block: clamp(36px, 4vw, 64px); }
.facts-in { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--g); max-width: 640px; }
.side-list { font-size: var(--step-body); display: grid; gap: 14px; max-width: 34ch; }
@media (max-width: 860px) {
  .hero-grid { min-height: 0; padding-top: 36px; }
  .hero-copy, .hero-art { grid-column: 1 / -1; }
  .hero-art { height: clamp(320px, 84vw, 460px); margin-top: 40px; }
  .tiles { grid-template-columns: 1fr; }
  .tiles .tile { min-height: 150px; }
  .facts-in { grid-template-columns: 1fr; }
}
/* split headline: each word rises in */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); animation: word 0.95s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes word { to { transform: none; } }
.topbar { transform-origin: left; }
.hero-art .plate { animation: plate 1.1s var(--ease) 0.1s both; transform-origin: right; }
@keyframes plate { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.hero-art figure { animation: rise 1s var(--ease) both; }
.hero-art .l2 { animation-delay: 0.18s; } .hero-art .l3 { animation-delay: 0.36s; }
.shot img { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .split .w > span { transform: none; animation: none; }
  .hero-art .plate, .hero-art figure { animation: none; }
}

@media (max-width: 860px) {
  .tiles .tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; min-height: 0; padding-block: 22px; }
  .tiles .tile .fig { flex: 0 0 auto; min-width: 5.2ch; font-size: 2.25rem; }
  .tiles .tile .desc { display: block; max-width: none; }
  .hero .facts .zone { display: none; }
  .facts-in { max-width: none; }
}
.pg > .faq { padding-inline: var(--m); }

/* ——— live example panels (their own compiled styles live in panels.css, scoped under .ex) ——— */
.panels-wrap { padding: clamp(40px, 5vw, 72px) var(--m) 0; }
.panels-wrap.ex, .ex-box { color: #091d2d; }
.g-ink .panels-wrap { color: #091d2d; }
.vivo-box { padding-inline: var(--m); }
.vivo-box > .ex { max-width: 760px; }
.vivo-box { padding-block: clamp(32px, 4vw, 56px) 0; }
.vivo-box.ex { max-width: none; }
.vivo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: stretch; }
.vivo-row > article { min-width: 0; }
@media (max-width: 860px) { .cols > .zone.late { order: 3; margin: 28px 0 0; } }
@media (max-width: 600px) {
  .display, .t-xl { font-size: 1.875rem; } .t-l { font-size: 1.75rem; } .t-m { font-size: 1.625rem; } .t-s { font-size: 1.5rem; } .t-xs { font-size: 1.375rem; }
  .h3 { font-size: 1.25rem; } .h3-s { font-size: 1.125rem; } .h3-xs { font-size: 1.0625rem; }
}
@media (max-width: 600px) { .stats .stat { min-height: 0; gap: 8px; } }

/* ——— the app and KPI alerts ——— */
.app .tag { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: var(--step-small); padding: 4px 12px; border-radius: 999px; }
.app-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); margin-top: clamp(40px, 5vw, 72px); align-items: center; row-gap: 40px; }
.app-copy { grid-column: 1 / 6; display: grid; gap: 28px; }
.app-copy article { padding-left: 18px; border-left: 3px solid var(--accent); }
.app-copy p { margin-top: 8px; color: var(--soft); max-width: 46ch; }
.app-copy .actions { margin-top: 4px; color: inherit; }
.phones { grid-column: 6 / -1; margin: 0; }
.phones img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); mask-composite: intersect; }
@media (max-width: 860px) { .app-copy, .phones { grid-column: 1 / -1; } }

/* the ISO/IEC 27001 seal: states the status as the site does, with no certification-body mark */
.seal { display: grid; justify-items: center; gap: 6px; width: 188px; padding: 20px 16px 18px; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px #d9e1f2, 0 0 0 5px #fff, 0 0 0 6px #493ee5; }
.seal svg { width: 52px; height: 58px; }
.seal b { margin-top: 4px; font-size: 1.0625rem; letter-spacing: -0.01em; color: #091d2d; }
.seal span { font-size: var(--step-small); line-height: 1.3; color: #493ee5; font-weight: 600; }