/* Orde landing v1. Tokens from .claude/skills/orde-marca/SKILL.md (v0.3). */

:root {
  --papel: #F2F3F1;
  --superficie: #E6E8E5;
  --tinta: #15181A;
  --tinta-2: #4F565B;
  --linea: #CDD1CE;
  --control: #7A8186;
  --acento: #17704F;
  --sobre-acento: #FAFAF8;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --t-hero: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  --t-h2: clamp(1.875rem, 1.4rem + 1.6vw, 3rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem);
  --t-lead: clamp(1.1875rem, 1.15rem + 0.15vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-data: 0.8125rem;

  --gutter: clamp(16px, 4.4vw, 64px);
  --section: clamp(80px, 6rem + 4vw, 160px);
  --max: 1280px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #111315;
    --superficie: #1A1D20;
    --tinta: #ECEEEB;
    --tinta-2: #A3AAAE;
    --linea: #2F3438;
    --control: #7D858A;
    --acento: #4CC38A;
    --sobre-acento: #111315;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papel: #111315;
  --superficie: #1A1D20;
  --tinta: #ECEEEB;
  --tinta-2: #A3AAAE;
  --linea: #2F3438;
  --control: #7D858A;
  --acento: #4CC38A;
  --sobre-acento: #111315;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--acento); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 30;
  background: var(--tinta); color: var(--papel); padding: 8px 14px; border-radius: 4px;
}
.skip:focus { top: 12px; }

.display {
  font-weight: 600;
  font-variation-settings: "wdth" 115;
  letter-spacing: -0.02em;
}
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.1; font-variation-settings: "wdth" 115; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); line-height: 1.2; font-variation-settings: "wdth" 108; letter-spacing: -0.01em; }
.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--tinta-2); max-width: 52ch; }
.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* Prototype banner */
.proto {
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: var(--t-small);
  text-align: center;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--linea);
}

/* Logo */
.logo {
  display: inline-flex; align-items: baseline; gap: 0.14em;
  font-weight: 700; font-variation-settings: "wdth" 125; letter-spacing: -0.03em;
  font-size: 1.625rem; line-height: 1; color: var(--tinta); text-decoration: none;
}
.logo i { display: inline-block; width: 0.34em; height: 0.34em; background: var(--acento); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 4px; border: 0;
  background: var(--acento); color: var(--sobre-acento);
  font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 150ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: color-mix(in srgb, var(--acento) 86%, var(--tinta)); }
  .link:hover { text-decoration-thickness: 2px; }
  .nav__menu:hover, .theme-toggle:hover { border-color: var(--tinta); }
  .nav__links a:hover { color: var(--tinta); }
}

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.nav__bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.nav__links { display: flex; gap: 28px; list-style: none; padding: 0; }
.nav__links a { white-space: nowrap; color: var(--tinta-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 150ms ease; }
.nav__right { display: flex; align-items: center; gap: 28px; }
.nav__menu {
  display: none; background: none; border: 1.5px solid var(--control); border-radius: 4px;
  min-height: 40px; padding: 0 14px; font-weight: 500; cursor: pointer;
  transition: transform 140ms var(--ease-out), border-color 150ms ease;
}
.nav__menu:active { transform: scale(0.97); }
.nav__panel { display: none; }

@media (max-width: 1199px) {
  .nav__links, .nav__right .btn { display: none; }
  .nav__menu { display: inline-flex; align-items: center; }
  .nav__panel[data-open="true"] { display: block; border-top: 1px solid var(--linea); padding: 16px 0 24px; }
  .nav__panel ul { list-style: none; padding: 0; display: grid; gap: 4px; margin-bottom: 16px; }
  .nav__panel a:not(.btn) { display: block; padding: 10px 0; color: var(--tinta); text-decoration: none; font-weight: 500; }
  .nav__panel .btn { width: 100%; white-space: normal; text-align: center; }
}

/* Sections */
section { padding: var(--section) 0; }
.section-head { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }

/* Hero */
.hero { padding-top: clamp(40px, 4.5vw, 72px); padding-bottom: clamp(64px, 7vw, 112px); }
.hero h1 { font-size: var(--t-hero); line-height: 1.05; }
.hero h1 span { display: block; }
.hero__sub { margin-top: 24px; }
.hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero__fig { margin-top: clamp(40px, 4.5vw, 64px); border-top: 1px solid var(--linea); padding-top: 28px; }

.fig figcaption { margin-top: 20px; }
.fig__mobile { display: none; }
@media (max-width: 767px) {
  .fig__desk { display: none; }
  .fig__mobile { display: block; width: 100%; max-width: 420px; }
}

/* SVG diagram styling */
.dg-node rect { fill: var(--papel); stroke: var(--control); stroke-width: 1.5; }
.dg-node text, .dg-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; fill: var(--tinta);
}
.dg-tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; fill: var(--tinta-2); }
.dg-mess { fill: none; stroke: var(--tinta-2); stroke-width: 1.5; }
.dg-mess--dash { stroke-dasharray: 5 5; }
.dg-arrow { fill: var(--tinta-2); }
.dg-line { fill: none; stroke: var(--tinta); stroke-width: 2; }
.dg-stop { fill: var(--tinta); }
.dg-stop--key { fill: var(--acento); }
.dg-sep { stroke: var(--linea); stroke-width: 1; }
.dg-grid { stroke: var(--linea); stroke-width: 1; }
.dg-path { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dg-open { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pains__fig svg { width: 100%; max-width: 480px; }
.dg-week .dg-label { paint-order: stroke; stroke: var(--papel); stroke-width: 6px; stroke-linejoin: round; }

.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Pains */
.pains__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; }
.pains__media { grid-column: 1 / span 5; }
.pains__body { grid-column: 7 / span 6; }
.pains__list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin: 48px 0; }
.pains__list li { border-top: 1px solid var(--linea); padding-top: 16px; }
.pains__close { font-size: var(--t-h3); line-height: 1.25; font-weight: 600; font-variation-settings: "wdth" 108; max-width: 30ch; }
.pains__close em { font-style: normal; color: var(--acento); }

@media (max-width: 1023px) {
  .pains__media, .pains__body { grid-column: 1 / -1; }
  .pains__body { margin-top: 48px; }
}
@media (max-width: 599px) { .pains__list { grid-template-columns: 1fr; } }

/* Services staircase */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; list-style: none; padding: 0; }
.step {
  background: var(--superficie);
  border-top: 2px solid var(--tinta);
  padding: 28px 24px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
/* Staircase: tops rise left to right, bottoms stay aligned. */
.step:nth-child(1) { margin-top: 168px; }
.step:nth-child(2) { margin-top: 112px; }
.step:nth-child(3) { margin-top: 56px; }
.step__name { display: flex; align-items: center; gap: 10px; }
.step__entry { display: inline-flex; align-items: center; gap: 8px; color: var(--acento); }
.step__entry::before { content: ""; width: 8px; height: 8px; background: var(--acento); }
.step p { color: var(--tinta-2); font-size: 1rem; }
.services__note { margin-top: 32px; color: var(--tinta-2); max-width: 70ch; }
.smart {
  margin-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linea); padding-top: 32px;
  display: grid; gap: 12px; max-width: 70ch;
}
.smart p { color: var(--tinta-2); }

@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .step:nth-child(n) { margin-top: 0; }
}
@media (max-width: 599px) { .steps { grid-template-columns: 1fr; } }

/* Method */
.method .section-head { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.track { position: relative; }
.track__line {
  height: 2px; transform-origin: left center;
  background:
    linear-gradient(90deg, var(--tinta) 0 80%, transparent 80%),
    repeating-linear-gradient(90deg, var(--tinta) 0 6px, transparent 6px 12px);
}
.track__stops { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.track__stop { position: relative; padding-top: 32px; }
.track__stop::before {
  content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--tinta);
}
.track__stop:first-child::before { background: var(--acento); width: 14px; height: 14px; top: -8px; }
.track__stop h3 { margin-bottom: 10px; }
.track__stop p { color: var(--tinta-2); max-width: 32ch; }
.track__stop--opt::before { background: var(--papel); border: 2px solid var(--tinta); }
.track__opt { margin: -4px 0 10px; }
.ai-rules { margin-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--linea); padding-top: 24px; display: grid; gap: 12px; }
.ai-rules__title { font-weight: 600; }
.ai-rules ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 40px; color: var(--tinta-2); }
.ai-rules li { display: flex; align-items: baseline; gap: 10px; }
.ai-rules li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--tinta); transform: translateY(-2px); }
.method .fig figcaption { margin-top: 48px; }

@media (min-width: 768px) and (max-width: 1100px) {
  .track__stops { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .track__line { display: none; }
  .track__stop { border-top: 2px solid var(--tinta); }
  .track__stop--opt { border-top-style: dashed; }
  .track__stop::before { top: -8px; }
}
@media (max-width: 767px) {
  .method .section-head { text-align: left; justify-items: start; margin-left: 0; }
  .track { padding-left: 28px; }
  .track__line { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: center top;
    background: linear-gradient(180deg, var(--tinta) 0 78%, transparent 78%), repeating-linear-gradient(180deg, var(--tinta) 0 6px, transparent 6px 12px); }
  .track__stops { grid-template-columns: 1fr; gap: 40px; }
  .track__stop { padding-top: 0; }
  .track__stop::before { left: -28px; top: 8px; }
  .track__stop:first-child::before { left: -29px; top: 7px; }
}

/* Applications by industry (tabs) */
.tabs__label { font-size: var(--t-h3); line-height: 1.2; font-weight: 600; font-variation-settings: "wdth" 108; margin-bottom: 20px; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 0 32px; border-bottom: 1px solid var(--linea); }
.tabs__tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 14px 0; font-weight: 500; color: var(--tinta-2); cursor: pointer; text-align: left;
  transition: color 150ms ease, border-color 150ms ease;
}
.tabs__tab[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }
.tabs__tab:focus-visible { outline-offset: 4px; }
.tabs__note { margin: 20px 0 8px; font-size: var(--t-small); color: var(--tinta-2); }
html:not(.js) .tabs__panel[hidden] { display: block; }
.tabs__panel:focus-visible { outline-offset: 8px; }

.flows { list-style: none; padding: 0; }
.flow {
  display: grid; grid-template-columns: 3fr 4fr 4fr; column-gap: clamp(24px, 3vw, 48px); row-gap: 12px;
  border-top: 1px solid var(--linea); padding: 28px 0;
}
.flow:first-child { border-top: 0; }
.flow__name { grid-column: 1; grid-row: 1; font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.flow__before { grid-column: 2; grid-row: 1 / span 2; color: var(--tinta-2); }
.flow__after { grid-column: 3; grid-row: 1 / span 2; }
.flow__measure { grid-column: 1; grid-row: 2; font-size: var(--t-small); color: var(--tinta-2); }
.flow p .mono { display: block; margin-bottom: 4px; }
.flow__after .mono { color: var(--acento); }

.ai-layer { background: var(--superficie); padding: clamp(24px, 3vw, 36px); }
.ai-layer__title { font-weight: 600; margin-bottom: 16px; }
.ai-layer__levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; }
.ai-layer__levels div { border-top: 2px solid var(--tinta); padding-top: 12px; }
.ai-layer__levels div:last-child { border-top-style: dashed; }
.ai-layer__levels dt { margin-bottom: 6px; }
.ai-layer__levels dd { margin: 0; font-size: 1rem; }

.apps__more { margin-top: 40px; color: var(--tinta-2); max-width: 70ch; }

@media (prefers-reduced-motion: no-preference) {
  .js .tabs__panel:not([hidden]) { animation: fade 180ms ease; }
}

@media (max-width: 767px) {
  .tabs__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 0; }
  .tabs__tab { border: 1.5px solid var(--control); border-radius: 4px; margin: 0; padding: 12px; font-size: 0.9375rem; line-height: 1.3; }
  .tabs__tab[aria-selected="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
  .flow { grid-template-columns: 1fr; }
  .flow__name, .flow__measure, .flow__before, .flow__after { grid-row: auto; grid-column: auto; }
  .flow__measure { order: 3; }
  .ai-layer__levels { grid-template-columns: 1fr; }
}

/* Security */
.security { background: var(--superficie); }
.security__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.security__head { grid-column: 1 / span 5; display: grid; gap: 20px; align-content: start; }
.security__list { grid-column: 7 / span 6; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.security__list li { border-top: 2px solid var(--tinta); padding-top: 16px; }
@media (max-width: 1023px) {
  .security__head, .security__list { grid-column: 1 / -1; }
  .security__list { margin-top: 32px; }
}
@media (max-width: 599px) { .security__list { grid-template-columns: 1fr; gap: 24px; } }

/* Contact + form */
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.contact__head { grid-column: 1 / span 5; display: grid; gap: 20px; align-content: start; }
.contact__head .lead { max-width: 40ch; }
.contact__mail { margin-top: 12px; color: var(--tinta-2); }
.form { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 500; }
.field .opt { color: var(--tinta-2); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--papel); border: 1.5px solid var(--control); border-radius: 4px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--tinta); border-width: 2px; }
.err { font-size: var(--t-small); color: var(--tinta); font-weight: 500; display: none; }
.err::before { content: "! "; font-weight: 700; }
.field[data-invalid="true"] .err { display: block; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; accent-color: var(--acento); }
.form__submit { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; }
.form__note { font-size: var(--t-small); color: var(--tinta-2); }
.form__status {
  grid-column: 1 / -1; border-top: 2px solid var(--acento); padding-top: 16px; display: none;
}
.form__status[data-show="true"] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .form__status[data-show="true"] { animation: rise 240ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .form__status[data-show="true"] { animation: fade 150ms ease; }
}
.form__status p + p { margin-top: 6px; color: var(--tinta-2); font-size: var(--t-small); }

@media (max-width: 1023px) {
  .contact__head, .form { grid-column: 1 / -1; }
  .form { margin-top: 32px; }
}
@media (max-width: 599px) { .form { grid-template-columns: 1fr; } }

/* Footer */
.footer { border-top: 1px solid var(--linea); padding: 56px 0 64px; font-size: var(--t-small); color: var(--tinta-2); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; align-items: start; }
.footer__grid p { max-width: 42ch; margin-top: 16px; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--tinta); }
.theme-toggle { background: none; border: 1.5px solid var(--control); border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: var(--t-small); transition: transform 140ms var(--ease-out), border-color 150ms ease; }
.theme-toggle:active { transform: scale(0.97); }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr; } }

/* Legal page */
.legal { max-width: 72ch; padding: clamp(48px, 6vw, 88px) 0 var(--section); }
.legal h1 { font-size: var(--t-h2); line-height: 1.1; margin-bottom: 24px; }
.legal h2 { font-size: var(--t-h3); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--tinta); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; }
.todo { background: var(--superficie); border-left: 3px solid var(--acento); padding: 2px 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.9em; }

/* Motion: scroll reveal (enabled only when JS adds .js and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }

  .js .track__line { transform: scaleX(0); transition: transform 900ms var(--ease-in-out); }
  .js .track.is-in .track__line { transform: scaleX(1); }
  .js .track__stop { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 60ms); }
  .js .track.is-in .track__stop { opacity: 1; transform: none; }

  .js .draw { stroke-dashoffset: 1; animation: draw 900ms var(--ease-in-out) 250ms forwards; }
  .js .dg-stop--late { opacity: 0; animation: fade 300ms var(--ease-out) 1000ms forwards; }
  .js .pains__media .dg-path { stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-in-out) 200ms; }
  .js .pains__media.is-in .dg-path { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .js .track__line { transform: scaleY(0); }
  .js .track.is-in .track__line { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 0; transition: opacity 150ms ease; }
  .js .reveal.is-in { opacity: 1; }
  html { scroll-behavior: auto; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Figma capture mode (set in index.html when the URL has #figmacapture) */
html.capture .reveal, html.capture .track__stop { opacity: 1; transform: none; transition: none; }
html.capture .track__line { transform: none; transition: none; }
html.capture .draw { animation: none; stroke-dashoffset: 0; }
html.capture .dg-stop--late { animation: none; opacity: 1; }
html.capture .pains__media .dg-path { transition: none; stroke-dashoffset: 0; }