/* ============================================================
   Data Capture. Same chrome, type and rhythm as the other product
   pages; its own pieces are the conversations-to-record flow, the
   one-week diff, the reads-from / writes-to setup and the comparison
   with call recorders. The suite color comes from suite.css, and
   page-data-capture.js plays the three moments.
   ============================================================ */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared: the dot that carries an update along a line */
.flow-dot { fill: var(--lavender-600); opacity: 0; transition: opacity 0.2s ease; }
.flow-dot.is-on { opacity: 1; }

/* ---- The problem: three things said, one record they belong on ---- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1.05fr); align-items: center; }
.flow-sources { display: grid; gap: 16px; }
.flow-src { position: relative; padding: 18px 22px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-out); }
.flow-kind { font-size: 0.8125rem; font-weight: 600; color: var(--lavender-700); }
.flow-src p { margin-top: 6px; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-900); }
.flow-src.is-active { border-color: var(--lavender-300); box-shadow: 0 10px 28px rgba(44, 32, 44, 0.08); transform: translateX(4px); }
.flow-mid { position: relative; align-self: stretch; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-bed { fill: none; stroke: var(--ink-200); stroke-width: 1.5; }
.flow-ink { fill: none; stroke: var(--lavender-500); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.85s cubic-bezier(0.45, 0, 0.55, 1); }
.flow-ink.is-drawn { stroke-dashoffset: 0; }
.flow-port { fill: var(--white); stroke: var(--ink-300); stroke-width: 1.5; }
.flow-rec { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 18px 44px rgba(44, 32, 44, 0.08); overflow: hidden; }
.flow-rec-head { padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; color: var(--ink-900); }
.flow-rec dl { margin: 0; padding: 8px 22px 14px; }
.flow-rec dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; }
.flow-rec dl > div + div { border-top: 1px solid var(--ink-100); }
.flow-rec dt { font-size: 0.875rem; color: var(--ink-500); }
.flow-rec dd { margin: 0; display: grid; justify-items: start; font-size: 0.9375rem; color: var(--ink-800); }
.flow-rec dd > span { grid-area: 1 / 1; padding: 1px 8px; margin-left: -8px; border-radius: var(--r-sm); }
.flow-rec .new { background: var(--lavender-100); color: var(--lavender-800); font-weight: 600; }
.flow-rec .new--plain { background: none; color: var(--ink-800); font-weight: 400; }
.flow-rec .old { display: none; color: var(--ink-400); }
.flow-rec .old--nil { font-style: italic; }
/* with the script, the stale value shows first and the new one replaces it */
html.js .flow-rec .old { display: block; transition: opacity 0.35s ease, transform 0.35s ease; }
html.js .flow-rec .new { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease-out) 0.1s, transform 0.45s var(--ease-out) 0.1s; }
html.js .flow-rec .is-new .old { opacity: 0; transform: translateY(-8px); }
html.js .flow-rec .is-new .new { opacity: 1; transform: none; }
@media (max-width: 900px) {
    .flow { grid-template-columns: 1fr; gap: 20px; }
    .flow-mid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .flow-src, .flow-ink, html.js .flow-rec .old, html.js .flow-rec .new { transition: none; }
}

/* ---- In practice: the week's updates for one deal, in the Quill console ---- */
.plate--capture { background-image: url(art/hero-capture.jpg); background-position: center 70%; }
.app--capture { min-height: 0; }
.app--capture .app-side a { cursor: default; }
.app--capture .app-main { padding-bottom: 12px; }
/* in a mid-width window the sidebar would squeeze the table, so it goes, as on phones */
@media (min-width: 861px) and (max-width: 1120px) {
    .app--capture { grid-template-columns: minmax(0, 1fr); }
    .app--capture .app-side { display: none; }
}
/* fixed columns, so nothing moves as the fields fill in or the status changes */
.dc-table { width: 100%; table-layout: fixed; margin-top: 4px; border-collapse: collapse; text-align: left; font-size: 13px; }
.dc-table .c-field { width: 20%; } .dc-table .c-was { width: 16%; } .dc-table .c-now { width: 22%; } .dc-table .c-src { width: 16%; } .dc-table .c-stat { width: 26%; }
.dc-table thead th { padding: 16px 12px 8px 0; font-size: 11.5px; font-weight: 500; color: var(--ink-500); border-bottom: 1px solid var(--line); }
.dc-table tbody th, .dc-table tbody td { height: 58px; padding: 0 12px 0 0; vertical-align: middle; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-table tbody tr:last-child > * { border-bottom: 0; }
.dc-table tbody th { font-weight: 600; color: var(--ink-900); }
.dc-table .was { color: var(--ink-400); }
.dc-table .was s { text-decoration: none; background: linear-gradient(var(--ink-300), var(--ink-300)) no-repeat 0 56% / 100% 1px; }
.dc-table .was.nil { font-style: italic; }
.dc-table .now { color: var(--ink-900); font-weight: 600; }
.dc-table .src { color: var(--lavender-700); font-weight: 500; }
.dc-table .stat { color: var(--ink-600); }
.dc-table .stat svg { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.dc-table .stat path { fill: none; stroke: var(--lavender-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s ease 0.1s; }
/* room at both ends of each row, so the champion row's tint extends past its text;
   only where there's width to spare, so no column truncates */
@media (min-width: 1121px) {
    .dc-table thead th:first-child, .dc-table tbody tr > :first-child { padding-left: 14px; }
    .dc-table thead th:last-child, .dc-table tbody tr > :last-child { padding-right: 14px; }
}
/* both review states share one spot inside the cell, so the cell keeps its table borders;
   a narrow cell clips the label itself rather than drawing a stray ellipsis */
.dc-table .stat--review { text-overflow: clip; }
.stat-swap { display: inline-grid; max-width: 100%; align-items: center; justify-items: start; }
.stat-swap > span { grid-area: 1 / 1; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease; }
.stat-ok { opacity: 0; }
.dc-champ.is-done .stat-ask { opacity: 0; pointer-events: none; }
.dc-champ.is-done .stat-ok { opacity: 1; }
.stat-ask .mbtn { height: 26px; cursor: pointer; }
.stat-ask .mbtn:hover { background: var(--lavender-800); }
.dc-champ { transition: background-color 0.5s ease; }
.dc-champ:not(.is-done) { background: var(--lavender-50); }
.app--capture .reviewer span { background: var(--lavender-700); }
/* filling in: each row arrives, its old value is struck, the new value lands with a brief highlight */
html.js .app--capture.is-armed tbody tr { opacity: 0; transform: translateY(8px); }
html.js .app--capture tbody tr { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background-color 0.5s ease; }
html.js .app--capture.is-armed tbody tr .was s { background-size: 0% 1px; }
html.js .app--capture tbody tr .was s { transition: background-size 0.4s ease 0.25s; }
html.js .app--capture.is-armed tbody tr .stat { opacity: 0; }
html.js .app--capture tbody tr .stat { transition: opacity 0.35s ease 0.55s; }
html.js .app--capture.is-armed tbody tr .stat path { stroke-dashoffset: 1; }
html.js .app--capture.is-armed tbody tr.is-in { opacity: 1; transform: none; }
html.js .app--capture.is-armed tbody tr.is-in .was s { background-size: 100% 1px; }
html.js .app--capture.is-armed tbody tr.is-in .stat { opacity: 1; }
html.js .app--capture.is-armed tbody tr.is-in .stat path { stroke-dashoffset: 0; }
/* the new value lands with a brief highlight around the value itself. Its column has
   8px of room on the left for the highlight to extend into, so it isn't clipped, and
   the span stays inline so a long value can still end in an ellipsis. */
.dc-table .now > span { padding: 2px 8px; margin-left: -8px; border-radius: var(--r-sm); }
@media (min-width: 861px) { .dc-table .now, .dc-table thead th:nth-child(3) { padding-left: 8px; } }
html.js .app--capture tbody tr.is-in .now > span { animation: dc-land 1.4s ease-out 0.2s; }
@keyframes dc-land { 0% { background: transparent; } 20% { background: var(--lavender-100); } 100% { background: transparent; } }
@media (max-width: 860px) {
    .dc-table { table-layout: auto; }
    .dc-table colgroup { display: none; }
    .dc-table, .dc-table tbody, .dc-table tr, .dc-table tbody td, .dc-table tbody th { display: block; height: auto; }
    .dc-table thead { display: none; }
    .dc-table tbody tr { padding: 12px 10px; border-bottom: 1px solid var(--line); }
    .dc-table tbody th, .dc-table tbody td { padding: 2px 0; border: 0; }
    .dc-table .src, .dc-table .stat { margin-top: 4px; }
    .dc-table tbody td { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    html.js .app--capture tbody tr, html.js .app--capture tbody tr .was s, html.js .app--capture tbody tr .stat, .dc-table .stat path { transition: none; }
    html.js .app--capture tbody tr.is-in .now > span { animation: none; }
}

/* ---- Setup: an update relayed from a source, through Quill, into a CRM ---- */
.plate--relay { padding: 56px 56px 60px; background-image: url(art/hero-capture.jpg); background-position: center 58%; }
.relay { position: relative; display: grid; grid-template-columns: minmax(0, 280px) minmax(180px, 1fr) minmax(0, 280px); align-items: center; gap: 0 24px; }
.relay-col { position: relative; z-index: 1; display: grid; gap: 12px; }
.relay-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-800); }
.relay-card { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 16px 18px; background: var(--white); border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(44, 32, 44, 0.10); transition: box-shadow 0.4s ease, transform 0.4s var(--ease-out); }
.relay-card b { font-family: var(--serif); font-weight: 450; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); }
.relay-kind { font-size: 0.75rem; color: var(--ink-500); }
.relay-ev { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--ink-600); transition: opacity 0.3s ease, color 0.3s ease; }
.relay-card.is-hot { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(44, 32, 44, 0.16); }
.relay-card.is-hot .relay-ev { color: var(--lavender-700); font-weight: 600; }
.relay-ev.is-swap { opacity: 0; }
/* the feather sits on the middle of the cards: the step hangs below it outside the layout, and the hub drops by half the column label so it centers on the cards rather than label plus cards */
.relay-hub { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 32px; }
.relay-core { position: relative; display: grid; justify-items: center; }
.relay-node { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.35), 0 16px 40px rgba(44, 32, 44, 0.16); transition: transform 0.35s var(--ease-out); }
.relay-node img { width: 40px; height: auto; transform: translateX(-1px); }
.relay-step { position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%); min-width: 170px; white-space: nowrap; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--ink-800); transition: opacity 0.25s ease; }
.relay-step.is-swap { opacity: 0; }
.relay-core.is-hot .relay-node { transform: scale(1.06); }
.relay-wires { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.relay-wire { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; transition: stroke 0.4s ease; }
.relay-wire.is-hot { stroke: var(--lavender-600); }
.relay-wires .flow-dot { fill: var(--lavender-600); stroke: #fff; stroke-width: 2; }
.relay.has-wires .relay-wires { display: block; }
.callout--sources { margin-top: 24px; }
@media (max-width: 900px) {
    .plate--relay { padding: 28px 16px 32px; }
    .relay { grid-template-columns: 1fr; gap: 20px; }
    .relay-hub { justify-content: flex-start; padding-top: 0; }
    .relay-core { gap: 14px; }
    .relay-step { position: static; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .relay-card, .relay-core, .relay-ev, .relay-step { transition: none; }
}

/* ---- Compared to call recorders ---- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.compare th, .compare td { padding: 18px 24px 18px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.compare thead th { padding-top: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink-500); border-bottom-color: var(--ink-900); }
.compare tbody th { width: 22%; font-family: var(--serif); font-weight: 450; font-size: 1.375rem; letter-spacing: -0.01em; color: var(--ink-900); }
.compare td { width: 39%; color: var(--ink-600); }
/* Quill's column sits on a tinted band */
.compare .us { padding-left: 24px; background: var(--lavender-50); }
.compare thead th.us { padding-top: 18px; color: var(--lavender-700); border-radius: var(--r) var(--r) 0 0; }
.compare tbody tr:last-child .us { border-bottom-color: transparent; border-radius: 0 0 var(--r) var(--r); }
.compare td.us { color: var(--ink-900); font-weight: 500; }
.compare-note { margin-top: 28px; max-width: 72ch; color: var(--ink-600); }
html.js .compare[data-reveal] { opacity: 1; filter: none; transform: none; }
html.js .compare tbody tr { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
html.js .compare tbody tr:nth-child(2) { transition-delay: 90ms; } html.js .compare tbody tr:nth-child(3) { transition-delay: 180ms; }
html.js .compare tbody tr:nth-child(4) { transition-delay: 270ms; } html.js .compare tbody tr:nth-child(5) { transition-delay: 360ms; }
html.js .compare tbody tr:nth-child(6) { transition-delay: 450ms; }
html.js .compare.is-shown tbody tr { opacity: 1; transform: none; }
@media (max-width: 760px) {
    .compare thead { display: none; }
    .compare, .compare tbody, .compare tr, .compare tbody th, .compare td { display: block; width: auto; }
    .compare tbody tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
    .compare tbody th, .compare td { padding: 2px 0; border: 0; }
    .compare td.us, .compare tbody tr:last-child .us { margin-top: 10px; padding: 10px 14px; border-radius: var(--r); }
    .compare td::before { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-500); }
    .compare td:not(.us)::before { content: "Call recorders"; margin-top: 6px; }
    .compare td.us::before { content: "Quill Data Capture"; color: var(--lavender-700); }
}
@media (prefers-reduced-motion: reduce) {
    html.js .compare tbody tr { opacity: 1; transform: none; transition: none; }
}


/* ---- Your rules: four judgment calls, picked from a rail of tabs ---- */
.judge { display: grid; grid-template-columns: 320px minmax(0, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-modal); overflow: hidden; }
.judge-rail { padding: 22px 0 22px 16px; background: var(--parchment); border-right: 1px solid var(--line); }
.judge-hint { padding: 0 20px 12px 12px; font-size: 0.8125rem; color: var(--ink-500); }
.judge-tabs { display: grid; gap: 6px; }
.judge-tabs button { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 0 4px; padding: 16px 18px 16px 12px; text-align: left; background: transparent; border: 1px solid transparent; border-right: 0; border-radius: var(--r-card) 0 0 var(--r-card); font: inherit; color: var(--ink-600); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.judge-n { align-self: start; padding-top: 5px; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-400); }
.judge-t b { display: block; font-family: var(--serif); font-weight: 450; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.01em; }
.judge-t small { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--ink-500); }
.judge-arr { width: 16px; height: 16px; fill: none; stroke: var(--ink-300); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out), stroke 0.25s ease; }
.judge-tabs button:hover { background: rgba(255, 255, 255, 0.7); color: var(--lavender-700); }
.judge-tabs button:hover .judge-arr { stroke: var(--lavender-600); transform: translateX(3px); }
.judge-tabs button:focus-visible { outline: 2px solid var(--lavender-500); outline-offset: -2px; }
/* the chosen tab joins the panel: white, bordered, overlapping the rail's edge, with a rosewood bar */
.judge-tabs button[aria-selected="true"] { z-index: 1; margin-right: -1px; background: var(--white); border-color: var(--line); color: var(--ink-900); box-shadow: -6px 8px 20px rgba(44, 32, 44, 0.05); cursor: default; }
.judge-tabs button[aria-selected="true"] .judge-n { color: var(--lavender-700); }
.judge-tabs button[aria-selected="true"] .judge-t small { color: var(--ink-600); }
.judge-tabs button[aria-selected="true"] .judge-arr { opacity: 0; }
.judge-tabs i { position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lavender-500); transform: scaleY(0); transform-origin: top; }
.judge-tabs button[aria-selected="true"] i { transform: scaleY(1); }
/* while it advances on its own, the bar fills toward the next example */
.judge.is-auto .judge-tabs button[aria-selected="true"] i { animation: dc-progress var(--dwell, 7s) linear both; }
.judge.is-paused .judge-tabs button[aria-selected="true"] i { animation-play-state: paused; }
@keyframes dc-progress { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.judge-stage { position: relative; display: grid; padding: 48px 56px 52px; }
.judge-panel { grid-area: 1 / 1; }
.judge-said span, .judge-row span { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-500); }
.judge-said p { margin-top: 8px; max-width: 26ch; font-family: var(--serif); font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink-900); }
.judge-row { margin-top: 16px; padding: 16px 20px; border-radius: var(--r-card); }
.judge-said + .judge-row { margin-top: 36px; }
.judge-row p { margin-top: 4px; font-size: 1.0625rem; font-weight: 600; color: var(--ink-900); }
.judge-row small { display: block; margin-top: 6px; max-width: 60ch; font-size: 0.875rem; line-height: 1.5; color: var(--ink-600); }
.judge-row--rule { border: 1px dashed var(--ink-200); }
.judge-row--rule p { font-weight: 500; color: var(--ink-400); }
.judge-row--rule s { text-decoration: none; background: linear-gradient(var(--ink-300), var(--ink-300)) no-repeat 0 58% / 100% 1px; }
.judge-row--quill { background: var(--lavender-50); border: 1px solid var(--lavender-200); }
.judge-row--quill span { color: var(--lavender-700); }

/* without the script, every example reads in order */
html:not(.js) .judge { grid-template-columns: 1fr; }
html:not(.js) .judge-rail { display: none; }
html:not(.js) .judge-panel + .judge-panel { margin-top: 48px; }
html:not(.js) .judge-panel { grid-area: auto; }
/* with it, one at a time: the quote, then the rule's write crossed out, then Quill's */
html.js .judge-panel { visibility: hidden; opacity: 0; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
html.js .judge-panel.is-active { visibility: visible; opacity: 1; transition: opacity 0.35s ease 0.1s; }
html.js .judge-panel .judge-said, html.js .judge-panel .judge-row { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
html.js .judge-panel.is-active .judge-said { opacity: 1; transform: none; transition-delay: 0.15s; }
html.js .judge-panel.is-active .judge-row--rule { opacity: 1; transform: none; transition-delay: 0.7s; }
html.js .judge-panel .judge-row--rule s { background-size: 0% 1px; transition: background-size 0.45s ease; }
html.js .judge-panel.is-active .judge-row--rule s { background-size: 100% 1px; transition-delay: 1.35s; }
html.js .judge-panel.is-active .judge-row--quill { opacity: 1; transform: none; transition-delay: 1.9s; }

@media (max-width: 900px) {
    .judge { grid-template-columns: minmax(0, 1fr); }
    .judge > * { min-width: 0; }
    /* on phones all four tabs sit in a 2 by 2 grid, so none are off screen */
    .judge-rail { padding: 14px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .judge-hint { padding: 0 4px 10px; }
    .judge-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .judge-tabs button { grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255, 255, 255, 0.5); overflow: hidden; }
    .judge-tabs button[aria-selected="true"] { margin: 0; border-color: var(--lavender-300); box-shadow: none; }
    .judge-n { padding-top: 0; }
    .judge-t b { font-size: 1rem; }
    .judge-t small, .judge-arr { display: none; }
    .judge-tabs i { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; border-radius: 0; transform: scaleX(0); transform-origin: left; }
    .judge-tabs button[aria-selected="true"] i { transform: scaleX(1); }
    .judge-stage { padding: 28px 20px 32px; }
    .judge-said + .judge-row { margin-top: 24px; }
}
/* the narrowest phones: slightly smaller tab labels so each fits its tab */
@media (max-width: 400px) {
    .judge-tabs button { grid-template-columns: minmax(0, 1fr); padding: 11px 10px; }
    .judge-n { display: none; }
    .judge-t b { font-size: 0.875rem; }
}
@media (max-width: 900px) { @keyframes dc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } }
@media (prefers-reduced-motion: reduce) {
    html.js .judge-panel, html.js .judge-panel .judge-said, html.js .judge-panel .judge-row, html.js .judge-panel .judge-row--rule s { transition: none !important; }
}