/* Guides (10 Nov 2026): the question and answer pages under /guides/, on the paper of the inner pages.
   Loaded after site.css by scripts/build-guides.js; uses its tokens only. */
.g-crumbs { font-size: 14px; color: var(--on-dark-soft); margin-bottom: 18px; }
.g-crumbs a { color: var(--on-dark); }
.inner-head h1.g-h1 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.06; }
.inner-head .updated a { color: var(--on-dark); }

.g-guide > * { max-width: 820px; }
.g-answer { background: #fff; border: 1px solid var(--rule-light); border-left: 4px solid var(--pink); border-radius: 14px; padding: 18px 22px; margin: 0 0 26px; }
.g-answer strong { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.g-answer p { margin: 0; color: var(--ink); font-size: 1.05em; }

.g-toc { background: var(--pale); border-radius: 14px; padding: 16px 22px; margin: 0 0 10px; }
.g-toc strong { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.g-toc ol { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.g-toc li { margin: 4px 0; break-inside: avoid; }

.g-guide h3 { font-size: 1.12em; margin: 26px 0 8px; color: var(--ink); }
.g-guide blockquote { margin: 18px 0; padding: 12px 18px; border-left: 3px solid var(--blue); background: #fff; border-radius: 0 12px 12px 0; }
.g-table { overflow-x: auto; margin: 18px 0; }
.g-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: .95em; }
.g-table th { text-align: left; background: var(--deep); color: #fff; font-weight: 600; padding: 10px 12px; }
.g-table td { padding: 10px 12px; border-top: 1px solid var(--rule-light); color: var(--on-light); vertical-align: top; }

.g-qa h3 { margin-top: 22px; }
.g-sources ol { padding-left: 22px; }
.g-sources li { margin: 8px 0; }
.g-small { font-size: 14px; }

.g-box { background: var(--deep); color: #fff; border-radius: 20px; padding: clamp(22px, 3vw, 34px); margin: 46px 0 10px; }
.g-box h2 { color: #fff; border: 0; margin: 0 0 10px; padding: 0; }
.g-box p { color: var(--on-dark); }
.g-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.g-box .g-cta a.btn { background: var(--light); color: var(--blue); border-color: var(--light); }
.g-box .g-cta a.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 16px 0 6px; max-width: 1100px; }
.g-guide > section:has(.g-cards) { max-width: 1100px; }
.g-cards a { display: block; background: #fff; border: 1px solid var(--rule-light); border-radius: 16px; padding: 16px 18px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.g-cards a:hover { border-color: var(--blue); transform: translateY(-1px); }
.g-cards strong { display: block; color: var(--ink); line-height: 1.3; }
.g-cards span { display: block; margin-top: 6px; color: var(--on-light); font-size: 14.5px; }

@media (max-width: 760px) {
  .g-toc ol { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .g-cards a { transition: none; }
  .g-cards a:hover { transform: none; }
}
/* About the author, at the foot of every guide (12 November 2026). */
.g-author { margin: 30px 0 0; padding: 18px 22px; background: #fff; border: 1px solid var(--rule-light); border-radius: 14px; }
.g-author h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 6px; }
.g-author p { margin: 0; color: var(--on-light); }

/* ---------- Comparison pages (12 November 2026): grid, charts, minutes sample, where the recording goes ----------
   Built by scripts/build-guides.js from content/compare/<slug>.json. Everything here shows at its final state; the
   .cmp-motion rules (added by site/compare.js, never for reduced motion) start each part hidden or empty and .in brings
   it in. Note Metric is pink, the other tool blue, "no" is grey. */
.cmp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-mark { display: inline-flex; flex: none; color: #1B5FA0; }
.cmp-gc.nm .cmp-mark, .cmp-needs .c.nm .cmp-mark, .cmp-week .r.nm .cmp-mark, .cmp-mark.nm { color: var(--pink-deep); }
.cmp-mark.s-no, .cmp-gc .cmp-mark.s-no, .cmp-needs .c .cmp-mark.s-no, .cmp-week .r .cmp-mark.s-no { color: rgba(15,42,68,.38); }
.cmp-mark svg { width: 22px; height: 22px; }
.cmp-mark circle { fill: none; stroke: currentColor; stroke-width: 1.8; }
.cmp-mark path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cmp-mark path.f { fill: currentColor; stroke: none; opacity: .55; }
.cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--on-light); margin: 10px 0 0; }
.cmp-legend .cmp-mark { color: var(--ink); margin-right: -8px; }
.cmp-legend .cmp-mark.s-no { color: rgba(15,42,68,.38); }
.cmp-legend > span:last-child { flex-basis: 100%; font-size: 13px; }

/* Side by side */
.cmp-grid { background: #fff; border: 1px solid var(--rule-light); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(3,18,42,.06); }
.cmp-gh, .cmp-gr { display: grid; grid-template-columns: minmax(150px, 1.1fr) 1fr 1fr; }
.cmp-gh > span { padding: 13px 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cmp-gh .nm { background: var(--deep); color: #fff; box-shadow: inset 0 -3px 0 var(--pink); }
.cmp-gh .them { background: #E9EEF4; color: var(--ink); box-shadow: inset 0 -3px 0 #1B5FA0; }
.cmp-gr > span { padding: 13px 16px; border-top: 1px solid var(--rule-light); }
.cmp-gl { font-weight: 600; color: var(--ink); line-height: 1.35; }
.cmp-gc { display: flex; gap: 10px; align-items: flex-start; }
.cmp-gc.nm { background: rgba(255,0,184,.04); }
.cmp-gc em, .cmp-needs em, .cmp-week em { font-style: normal; font-size: 14px; color: var(--on-light); line-height: 1.38; }

/* Where Note Metric performs better, and where the other tool is the better choice, as cards */
.cmp-fit > ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.cmp-fit > ul > li { position: relative; margin: 0; background: #fff; border: 1px solid var(--rule-light); border-radius: 14px; padding: 16px 16px 16px 52px; color: var(--on-light); }
.cmp-fit > ul > li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 24px; height: 24px; border-radius: 50%; background: #1B5FA0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.2 3.2 6.6-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.cmp-fit.nm > ul > li { border-left: 3px solid var(--pink-deep); }
.cmp-fit.nm > ul > li::before { background-color: var(--pink-deep); }
.cmp-fit > ul strong { color: var(--ink); }

/* Figures */
.cmp-fig { margin: 30px 0 0; }
.cmp-fig figcaption { font-weight: 600; color: var(--ink); margin: 0 0 12px; font-size: 16px; }
.cmp-fig figcaption small { font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-light); margin-left: 8px; }

/* What a walk-round report needs: two rings and the list */
.cmp-rings { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px clamp(24px, 7vw, 70px); margin: 0 0 16px; }
.cmp-ring { text-align: center; }
.cmp-ring-c { position: relative; width: 148px; height: 148px; margin: 0 auto; }
.cmp-ring-c svg { width: 100%; height: 100%; display: block; }
.cmp-ring-c circle { fill: none; stroke-width: 10; stroke-linecap: butt; }
.cmp-ring-c .track { stroke: rgba(15,42,68,.08); }
.cmp-ring-c .a.s-no { stroke: transparent; }
.cmp-ring.nm .a { stroke: var(--pink-deep); }
.cmp-ring.them .a.s-yes { stroke: #1B5FA0; }
.cmp-ring.them .a.s-partial { stroke: rgba(27,95,160,.38); }
.cmp-ring-c p { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cmp-ring-c b { font-size: 25px; color: var(--ink); line-height: 1.1; }
.cmp-ring-c p span { font-size: 12px; color: var(--on-light); }
.cmp-ring-l { margin: 8px 0 0; font-size: 14px; color: var(--on-light); line-height: 1.3; }
.cmp-ring-l strong { display: block; color: var(--ink); font-size: 15px; }
.cmp-needs { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--rule-light); border-radius: 14px; overflow: hidden; }
.cmp-needs li { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 12px; padding: 11px 14px; margin: 0; border-top: 1px solid var(--rule-light); }
.cmp-needs li:first-child { border-top: 0; }
.cmp-needs .n { font-weight: 600; color: var(--ink); }
.cmp-needs .c { display: flex; gap: 8px; align-items: flex-start; }

/* Bars: the longest meeting */
.cmp-bars ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cmp-bars li { display: grid; grid-template-columns: 150px 1fr 92px; gap: 12px; align-items: center; margin: 0; }
.cmp-bars .l { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.cmp-bars .v { color: var(--on-light); font-size: 14px; }
.cmp-bars .t { position: relative; height: 18px; background: rgba(15,42,68,.07); border-radius: 9px; }
.cmp-bars .t i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(90deg, #1B5FA0, #3A86C8); border-radius: 9px; transform-origin: left center; }
.cmp-bars .t u, .cmp-key u { border-left: 2px dashed var(--pink-deep); }
.cmp-bars .t u { position: absolute; top: -7px; bottom: -7px; left: var(--x); }
.cmp-key { font-size: 14px; color: var(--on-light); margin: 14px 0 0; }
.cmp-key u { display: inline-block; height: 14px; margin-right: 8px; vertical-align: -2px; }

/* A week on a project */
.cmp-week ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cmp-week li { margin: 0; background: #fff; border: 1px solid var(--rule-light); border-radius: 14px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.cmp-week b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-deep); }
.cmp-week .w { font-weight: 600; color: var(--ink); line-height: 1.3; min-height: 2.6em; }
.cmp-week .r { display: flex; gap: 8px; align-items: flex-start; }
.cmp-week .r em strong { display: block; color: var(--ink); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* The minutes sample */
.cmp-min-doc { background: #fff; border: 1px solid var(--rule-light); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(3,18,42,.06); }
.cmp-min-h { margin: 0 0 10px; background: #E9EEF4; color: var(--ink); font-weight: 600; padding: 9px 12px; border-radius: 8px; }
.cmp-min .g-table { margin: 0; }
.cmp-min .g-table th { background: #E9EEF4; color: var(--ink); font-size: 13px; }
.cmp-min .g-table td { font-size: 14px; }
.cmp-min td.i { white-space: nowrap; font-weight: 600; color: var(--ink); }
.cmp-min .p svg, .cmp-min-f svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.cmp-min .p circle, .cmp-min-f circle { fill: none; stroke: var(--pink-deep); stroke-width: 1.8; }
.cmp-min .p path, .cmp-min-f path { fill: var(--pink-deep); }
.cmp-min .p { display: inline-block; }
.rag { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; }
.rag-G { background: #1E7B4A; } .rag-A { background: #B86E00; } .rag-R { background: #B3261E; }
.cmp-min-f { margin: 12px 0 0; font-size: 14px; color: var(--on-light); }

/* Where the recording goes */
.cmp-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.cmp-route { background: #fff; border: 1px solid var(--rule-light); border-radius: 16px; padding: 16px 18px 18px; }
.cmp-route.nm { border-top: 4px solid var(--pink-deep); --c: #E6007E; }
.cmp-route.them { border-top: 4px solid #1B5FA0; --c: #1B5FA0; }
.cmp-route h3 { margin: 0 0 12px; font-size: 17px; }
.cmp-route ol { list-style: none; padding: 0; margin: 0; }
.cmp-route li { position: relative; margin: 0; padding: 0 0 20px 30px; }
.cmp-route li:last-child { padding-bottom: 0; }
.cmp-route li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(15,42,68,.07); }
.cmp-route li:not(:last-child)::after { content: ""; position: absolute; left: 8.5px; top: 22px; bottom: 2px; width: 2px; background: repeating-linear-gradient(to bottom, var(--c) 0 5px, transparent 5px 10px); opacity: .7; }
.cmp-route b { display: block; color: var(--ink); line-height: 1.3; }
.cmp-route li span { display: block; font-size: 14px; color: var(--on-light); line-height: 1.38; margin-top: 2px; }

@media (max-width: 760px) {
  .cmp-gh, .cmp-gr { grid-template-columns: 1fr 1fr; }
  .cmp-gh > span:first-child { display: none; }
  .cmp-gl { grid-column: 1 / -1; background: var(--paper); padding-bottom: 8px !important; }
  .cmp-gr > .cmp-gc { border-top: 0; }
  .cmp-needs li { grid-template-columns: 1fr 1fr; }
  .cmp-needs .n { grid-column: 1 / -1; }
  .cmp-bars li { grid-template-columns: 1fr auto; row-gap: 6px; }
  .cmp-bars .t { grid-column: 1 / -1; grid-row: 2; }
  .cmp-week ol { grid-template-columns: 1fr; }
  .cmp-week .w { min-height: 0; }
  .cmp-routes { grid-template-columns: 1fr; }
  /* the minutes sample as one card per line */
  .cmp-min .g-table { overflow: visible; }
  .cmp-min table, .cmp-min tbody { display: block; background: none; }
  .cmp-min thead { display: none; }
  .cmp-min tbody tr { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 10px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--rule-light); }
  .cmp-min tbody tr:first-child { border-top: 0; }
  .cmp-min td { display: block; border: 0; padding: 0; }
  .cmp-min td.i { grid-row: 1 / span 2; }
  .cmp-min td:nth-child(2) { grid-column: 2 / -1; color: var(--ink); }
  .cmp-min td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 13px; }
  .cmp-min td:nth-child(3)::before { content: "Action Lead: "; color: var(--on-light); }
  .cmp-min td:nth-child(4) { grid-column: 3; grid-row: 2; }
  .cmp-min .rag { width: 22px; height: 22px; font-size: 11px; }
  .cmp-min td:nth-child(5) { grid-column: 4; grid-row: 2; font-size: 13px; white-space: nowrap; }
}


/* Motion, only with .cmp-motion */
.cmp-motion .cmp-grid .cmp-gh, .cmp-motion .cmp-grid .cmp-gr, .cmp-motion .cmp-fit > ul > li, .cmp-motion .cmp-needs li,
.cmp-motion .cmp-week li, .cmp-motion .cmp-min tbody tr, .cmp-motion .cmp-route li, .cmp-motion .cmp-ring {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2,.75,.25,1);
  transition-delay: calc(var(--i, 0) * 90ms + 80ms);
}
.cmp-motion .cmp-grid .cmp-gh { transform: translateY(-10px); transition-delay: 0s; }
.cmp-motion .cmp-fit > ul > li:nth-child(2) { --i: 1; } .cmp-motion .cmp-fit > ul > li:nth-child(3) { --i: 2; }
.cmp-motion .cmp-fit > ul > li:nth-child(4) { --i: 3; } .cmp-motion .cmp-fit > ul > li:nth-child(5) { --i: 4; }
.cmp-motion .cmp-ring.them { --i: 2; }
.cmp-motion .cmp-week li { transform: perspective(700px) rotateX(55deg) translateY(10px); transform-origin: top center; }
.cmp-motion .cmp-min tbody tr { transform: translateX(-16px); }
.cmp-motion .in .cmp-gh, .cmp-motion .in .cmp-gr, .cmp-motion .cmp-fit.in > ul > li, .cmp-motion .in .cmp-needs li,
.cmp-motion .in .cmp-week li, .cmp-motion .in .cmp-min tbody tr, .cmp-motion .in .cmp-route li, .cmp-motion .in .cmp-ring { opacity: 1; transform: none; }
/* ticks draw in */
.cmp-motion .cmp-gr .cmp-mark path:not(.f), .cmp-motion .cmp-needs .cmp-mark path:not(.f), .cmp-motion .cmp-week .cmp-mark path:not(.f) {
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s ease calc(var(--i, 0) * 90ms + .45s);
}
.cmp-motion .in .cmp-mark path:not(.f) { stroke-dashoffset: 0; }
/* rings fill segment by segment */
.cmp-motion .cmp-ring-c .a { stroke-dasharray: 0 999; transition: stroke-dasharray .55s ease calc(var(--i) * 160ms + .35s); }
.cmp-motion .cmp-ring.them .cmp-ring-c .a { transition-delay: calc(var(--i) * 160ms + .55s); }
.cmp-motion .in .cmp-ring-c .a { stroke-dasharray: var(--len) 999; }
/* bars grow, then the progress meeting line drops in */
.cmp-motion .cmp-bars .t i { transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.75,.25,1) calc(var(--i) * 160ms + .15s); }
.cmp-motion .cmp-bars.in .t i { transform: scaleX(1); }
.cmp-motion .cmp-bars .t u { opacity: 0; transform: translateY(-8px); transition: opacity .4s ease 1.1s, transform .4s ease 1.1s; }
.cmp-motion .cmp-bars.in .t u { opacity: 1; transform: none; }
/* RAG chips pop, the play marks pulse once */
.cmp-motion .cmp-min .rag { transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 120ms + .55s); }
.cmp-motion .cmp-min.in .rag { transform: scale(1); }
.cmp-motion .cmp-min.in .p { animation: cmp-pulse 1.2s ease calc(var(--i, 0) * 120ms + .9s) 2; }
@keyframes cmp-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } }
/* the route's dashes flow from one step to the next */
.cmp-motion .cmp-routes.in .cmp-route li:not(:last-child)::after { animation: cmp-flow .9s linear calc(var(--i, 0) * 90ms + .6s) 8; }
@keyframes cmp-flow { from { background-position: 0 0; } to { background-position: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .cmp-route li::after, .cmp-min .p { animation: none !important; } }

/* The visual summary at the top of a comparison page (12 November 2026) */
.cmp-sum { margin: 0 0 22px; }
.cmp-sum-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.cmp-sum-side { border-radius: 18px; padding: 20px 20px 18px; }
.cmp-sum-side.nm { background: var(--deep); color: #fff; box-shadow: 0 14px 34px rgba(3,18,42,.18), inset 0 3px 0 var(--pink); }
.cmp-sum-side.them { background: #fff; border: 1px solid var(--rule-light); box-shadow: inset 0 3px 0 #1B5FA0; }
.cmp-sum-side .k { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cmp-sum-side.nm .k { color: var(--sky); }
.cmp-sum-side.them .k { color: var(--ink); }
.cmp-sum-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cmp-sum-side li { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; line-height: 1.3; }
.cmp-sum-side.nm li { color: #fff; }
.cmp-sum-side.them li { color: var(--ink); }
.cmp-sum .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.cmp-sum-side.nm .ic { background: rgba(255,0,184,.16); color: var(--pink); }
.cmp-sum-side.them .ic { background: rgba(27,95,160,.1); color: #1B5FA0; }
.cmp-sum .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmp-vs { align-self: center; z-index: 1; width: 46px; height: 46px; margin: 0 -14px; border-radius: 50%; background: #C80070; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--paper), 0 8px 18px rgba(230,0,126,.35); }
.cmp-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; }
.cmp-verdict > span { border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--on-light); background: #fff; border: 1px solid var(--rule-light); }
.cmp-verdict b { display: block; color: var(--ink); font-size: 15px; }
.cmp-verdict .nm { border-left: 3px solid var(--pink-deep); }
.cmp-verdict .them { border-left: 3px solid #1B5FA0; }
@media (max-width: 760px) {
  .cmp-sum-row { grid-template-columns: 1fr; }
  .cmp-vs { margin: -12px auto; }
  .cmp-verdict { grid-template-columns: 1fr; }
}
.cmp-motion .cmp-sum-side, .cmp-motion .cmp-vs, .cmp-motion .cmp-verdict > span, .cmp-motion .cmp-sum-side li {
  opacity: 0; transition: opacity .55s ease, transform .65s cubic-bezier(.2,.75,.25,1);
}
.cmp-motion .cmp-sum-side.nm { transform: translateX(-26px); }
.cmp-motion .cmp-sum-side.them { transform: translateX(26px); transition-delay: .12s; }
.cmp-motion .cmp-vs { transform: scale(.2) rotate(-90deg); transition: opacity .35s ease .45s, transform .55s cubic-bezier(.3,1.6,.5,1) .45s; }
.cmp-motion .cmp-sum-side li { transform: translateY(8px); transition-delay: calc(var(--i) * 110ms + .5s); }
.cmp-motion .cmp-sum-side.them li { transition-delay: calc(var(--i) * 110ms + .62s); }
.cmp-motion .cmp-verdict > span { transform: translateY(10px); transition-delay: 1.05s; }
.cmp-motion .cmp-verdict .them { transition-delay: 1.17s; }
.cmp-motion .cmp-sum.in .cmp-sum-side, .cmp-motion .cmp-sum.in .cmp-vs, .cmp-motion .cmp-sum.in .cmp-verdict > span, .cmp-motion .cmp-sum.in .cmp-sum-side li { opacity: 1; transform: none; }