/* ==========================================================================
   "What changes with smartNsales" — outcomes section.

   Deliberately NOT a second card grid. The feature grid directly above is
   eight equal tiles; if this section repeated that shape the page would read
   as one long inventory instead of a progression from capability to value.
   So: four full-width editorial rows, alternating sides, each one product
   panel and one paragraph.

   White, where the grid above and the demo below are both #F7F9FB — the
   change of ground is what separates the three ideas without a divider.

   Motion is a settle, not an entrance: rows fade and lift once on scroll,
   and the elements inside a panel stagger behind their own row. Everything
   is legible in its final position with motion off or JavaScript absent.
   ========================================================================== */

.oc-section {
  position: relative;
  background: #FFFFFF;
  padding: 96px 2rem 104px;
}

/* ------------------------------------------------------------- header ----- */

.oc-header { text-align: center; max-width: 720px; margin: 0 auto 72px; }

.oc-eyebrow {
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 12px;
}
.oc-headline {
  font: 800 clamp(26px, 3.6vw, 40px)/1.16 Poppins, Inter, sans-serif;
  color: #111827;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.oc-sub {
  font: 400 16.5px/1.65 Inter, sans-serif;
  color: #475569;
  text-wrap: balance;
}

/* --------------------------------------------------------------- rows ----- */

.oc-rows {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 104px;
}

.oc-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 72px;
  align-items: center;
}

/* The copy is always first in the source, so reading and tab order stay
   copy-then-evidence; only the painted order alternates.

   Placed on the grid rather than reordered: `order` alone swaps which track
   each column lands in, which handed the copy the wider 1.08fr track and
   squeezed the product panel on every second row. Mirroring the track sizes
   too keeps the visual the wider of the pair on both sides. */
.oc-row--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.oc-row--flip .oc-copy   { grid-column: 2; grid-row: 1; }
.oc-row--flip .oc-visual { grid-column: 1; grid-row: 1; }

/* --------------------------------------------------------------- copy ----- */

.oc-num {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: #98A2B3;
  margin-bottom: 18px;
  transition: color 0.5s ease;
}
.oc-num::after {
  content: '';
  height: 1px;
  width: 44px;
  background: #D9E0E8;
  transition: width 0.6s cubic-bezier(.2,.65,.3,1), background 0.5s ease;
}
.oc-row.is-active .oc-num { color: #2563EB; }
.oc-row.is-active .oc-num::after { width: 72px; background: #BFD4F2; }

.oc-title {
  font: 800 clamp(23px, 2.7vw, 31px)/1.2 Poppins, Inter, sans-serif;
  color: #101828;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.oc-desc {
  font: 400 16px/1.68 Inter, sans-serif;
  color: #475569;
  max-width: 40ch;
  margin-bottom: 22px;
}

.oc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.oc-points li {
  position: relative;
  padding-left: 22px;
  font: 500 14px/1.5 Inter, sans-serif;
  color: #344054;
}
/* A short rule rather than a tick: these are characteristics, not a
   checklist of things the visitor has completed. */
.oc-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 1.5px;
  border-radius: 1px;
  background: #7C91AC;
}

/* ------------------------------------------------------------- visual ----- */

.oc-visual { min-width: 0; }

.oc-win {
  background: #FFFFFF;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 22px 48px -26px rgba(16, 24, 40, 0.28);
  transition: box-shadow 0.6s ease, transform 0.6s cubic-bezier(.2,.65,.3,1);
}
.oc-row.is-active .oc-win {
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 30px 60px -28px rgba(16, 24, 40, 0.34);
}

.oc-win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #EEF1F5;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
}
.oc-win-title {
  font: 700 12.5px/1 Inter, system-ui, sans-serif;
  color: #101828;
  letter-spacing: -0.005em;
}
.oc-win-right { display: inline-flex; align-items: center; gap: 8px; }
.oc-win-period { font: 500 11px/1 Inter, sans-serif; color: #98A2B3; }
.oc-win-right-mark { display: inline-flex; color: #2563EB; }

.oc-win-body { padding: 18px; }

.oc-spark { width: 12px; height: 12px; flex: none; }

.oc-byline {
  margin-top: 14px;
  font: 500 10.5px/1 Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A9B4C2;
}

/* ------------------------------------------------------- 1. efficiency ---- */

.oc-tasks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 1px; }
.oc-task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FAFBFC;
}
.oc-task-box {
  width: 13px; height: 13px;
  border: 1.5px solid #CBD5E1;
  border-radius: 4px;
}
.oc-task-text { font: 500 13px/1.4 Inter, sans-serif; color: #344054; }
.oc-task-meta { font: 500 11px/1 Inter, sans-serif; color: #98A2B3; white-space: nowrap; }

/* The AI card is the one inversion in the panel: it is the thing that was
   not there before. */
.oc-pri-card {
  border: 1px solid #DCE6F8;
  border-radius: 11px;
  background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
  padding: 14px 15px 13px;
}
.oc-pri-head { display: flex; align-items: center; gap: 8px; color: #2563EB; margin-bottom: 11px; }
.oc-pri-title { font: 700 12.5px/1 Inter, sans-serif; color: #1D4ED8; }

.oc-pri-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: none; }
.oc-pri {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font: 500 12.5px/1.4 Inter, sans-serif;
  color: #344054;
}
.oc-pri-rank {
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 5px;
  font: 700 10px/1 Inter, sans-serif;
  background: #EEF1F5;
  color: #667085;
}
.oc-pri--ok   .oc-pri-rank { background: #E7F3EE; color: #047857; }
.oc-pri--risk .oc-pri-rank { background: #FCE9EE; color: #BE123C; }

.oc-pri-note {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #E9EFF9;
  font: 400 11px/1.4 Inter, sans-serif;
  color: #8FA0B5;
}

/* -------------------------------------------------------- 2. decisions ---- */

.oc-ch-unit {
  font: 700 10px/1 Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A9B4C2;
  margin-bottom: 12px;
}
.oc-chs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.oc-ch {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 14px;
}
.oc-ch-name { font: 600 12.5px/1 Inter, sans-serif; color: #344054; }
.oc-ch-track { height: 7px; border-radius: 4px; background: #EEF1F5; overflow: hidden; }
.oc-ch-track > i {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: 4px;
  background: #2563EB;
  /* Grown from zero when the row arrives; see the reveal block below. */
  transform-origin: left center;
}
.oc-ch:nth-child(2) .oc-ch-track > i { background: #5B87E0; }
.oc-ch:nth-child(3) .oc-ch-track > i { background: #9DB3D4; }
.oc-ch-value { font: 700 13px/1 Inter, sans-serif; color: #101828; min-width: 40px; text-align: right; }

.oc-rec {
  border: 1px solid #DCE6F8;
  border-radius: 11px;
  background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
  padding: 14px 15px;
}
.oc-rec-head {
  display: flex; align-items: center; gap: 8px;
  font: 700 10.5px/1 Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1D4ED8;
  margin-bottom: 9px;
}
.oc-rec-text { font: 600 13.5px/1.5 Inter, sans-serif; color: #101828; }
.oc-rec-why {
  margin-top: 8px;
  font: 400 11.5px/1.45 Inter, sans-serif;
  color: #8FA0B5;
}

/* -------------------------------------------------------- 3. reporting ---- */

.oc-aud-label {
  font: 700 10px/1 Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A9B4C2;
  margin-bottom: 10px;
}
.oc-auds { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.oc-aud {
  appearance: none;
  border: 1px solid #E4E9EF;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 7px 13px;
  font: 600 12px/1 Inter, sans-serif;
  color: #667085;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.oc-aud:hover { border-color: #CBD5E1; color: #344054; }
.oc-aud.is-on {
  background: #101828;
  border-color: #101828;
  color: #FFFFFF;
}
.oc-aud:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* All three panels share one grid cell, so the stage is naturally as tall as
   the tallest of them and switching audience cannot move the page.

   Stacked rather than absolutely positioned on purpose: an absolute panel is
   out of flow, so the stage had to be told its own height by script, and a
   height measured before the webfont loaded — or in a background tab, where
   offsetHeight reads short — reserved too little and let the panel jump. The
   grid works it out with no measurement, in every locale. */
.oc-rp-stage { display: grid; }
.oc-rp-panel {
  grid-area: 1 / 1;
  border: 1px solid #E4E9EF;
  border-radius: 11px;
  padding: 15px 16px;
  background: #FAFBFC;
}
.oc-rp-panel:not(.is-on) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}
.oc-rp-panel.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.65,.3,1);
}

.oc-rp-name { font: 700 13.5px/1.35 Inter, sans-serif; color: #101828; }
.oc-rp-meta { margin-top: 3px; font: 500 11px/1 Inter, sans-serif; color: #98A2B3; }
.oc-rp-rows { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 8px; }
.oc-rp-rows li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  font: 500 12.5px/1.4 Inter, sans-serif;
  color: #344054;
}
.oc-rp-tick { display: inline-flex; color: #047857; }
.oc-rp-tick svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ 4. agent ---- */

/* The Agent card. Every state is in the markup; only .is-on moves between
   them, so the panel is complete with JavaScript off.

   The body height is fixed, sized by the tallest of the three states, because
   this panel sits in an editorial row — a beat landing must not move the copy
   beside it. */

/* Only row 04 carries one: the Agent is a named thing, and the row has to say
   what it is before it says what changes. */
.oc-row-eyebrow {
  margin: 0 0 6px;
  font: 700 10.5px/1 Inter, sans-serif;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: #475569;
}

/* -- the ghosted core -------------------------------------------------- */

/* The header mark says who is speaking; this says the intelligence is running
   underneath the interface. It is the same orb, enlarged and turned down: any
   other shape here would be decoration, and the point is that it is the mark.

   Everything in this layer is inert and unreadable by design — the card's own
   content sits above it and must stay perfectly crisp. */
.oc-win--agent { position: relative; }
.oc-ag-bg {
  position: absolute;
  /* Lower-left and cropped by the card, which keeps the warm centre away from
     the signal rows on the right, where the negative figures sit. */
  left: -58px; bottom: -64px;
  width: 300px; height: 300px;
  z-index: 0;
  pointer-events: none;
  /* Desaturated rather than redrawn, so there is still one orb in the repo. */
  filter: saturate(0.5);
  opacity: 0.11;
}
.oc-ag-bg .oc-ag-bg-orb {
  position: absolute;
  left: 50px; top: 50px;
  --agm-size: 200px;
}
/* The orb's own orbit is suppressed here: this layer has its own single
   satellite, and two orbit systems in one place reads as clutter. */
.oc-ag-bg .agm-orbit { display: none; }

.oc-ag-bg-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Broken rather than a closed ring — a full circle draws the eye and reads as
   a border. */
.oc-ag-bg-trace {
  stroke: #7C91AC;
  stroke-width: 1;
  stroke-dasharray: 168 96;
  stroke-dashoffset: 40;
  opacity: 0.55;
}
.oc-ag-bg-sat { fill: #2563EB; opacity: 0.8; }

@media (prefers-reduced-motion: no-preference) {
  /* 10-16s, and linear, so it never appears to start or stop. */
  .oc-ag-bg-spin {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: oc-ag-orbit 14s linear infinite;
  }
  /* Slower and shallower than the header mark's own breath: at this size the
     mark's 3.5% would be visible movement behind the text. */
  .oc-ag-bg .agm-core { animation: oc-ag-breathe 9s ease-in-out infinite; }
  /* The satellite acknowledges a new state rather than announcing it. */
  .oc-ag-bg-sat { transition: opacity 0.6s ease, r 0.6s ease; }
  .is-risk .oc-ag-bg-sat { opacity: 1; r: 4.2; }
}
@keyframes oc-ag-orbit { to { transform: rotate(360deg); } }
@keyframes oc-ag-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* Content sits above the core, always. */
.oc-win--agent .oc-win-bar,
.oc-win--agent .oc-win-body { position: relative; z-index: 2; }
/* The chrome bar keeps its own ground so the orb cannot wash into the title. */
.oc-win--agent .oc-win-bar { background: #FFFFFF; }

.oc-win--agent .oc-win-title { color: #101828; }
/* Both of these also carry .agm-wrap, which sets --agm-size at the same
   specificity from a stylesheet that loads later — hence the extra class. */
.oc-win--agent .oc-ag-mark { --agm-size: 22px; margin-right: 8px; }

.oc-ag-status {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 Inter, sans-serif;
  color: #667085;
  white-space: nowrap;
}
.oc-ag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #047857; flex: none;
}
/* Background activity, not a loading spinner: slow, and it never stops. */
@media (prefers-reduced-motion: no-preference) {
  .oc-ag-dot { animation: oc-ag-pulse 2.6s ease-in-out infinite; }
}
@keyframes oc-ag-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.78); }
}

.oc-ag-body { position: relative; height: 214px; }

.oc-ag-msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.oc-ag-msg--board { justify-content: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .oc-ag-msg { transition: opacity 0.42s ease, transform 0.42s ease; }
}
.oc-ag-msg.is-on { opacity: 1; transform: none; }

.oc-ag-kicker {
  margin: 0 0 7px;
  font: 700 9.5px/1 Inter, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #1D4ED8;
}
.oc-ag-kicker--risk { color: #B45309; }

.oc-ag-lead {
  margin: 0 0 4px;
  font: 700 14px/1.35 Inter, sans-serif;
  color: #101828;
}
.oc-ag-text {
  margin: 0;
  font: 400 12.5px/1.5 Inter, sans-serif;
  color: #475467;
}

/* Compact rows, not KPI tiles: the figures support the sentence above them,
   they are not the subject. */
.oc-ag-sigs {
  list-style: none; margin: 11px 0 0; padding: 0;
  display: grid; gap: 5px;
}
.oc-ag-sig {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 2px solid #CBD5E1;
  border-radius: 8px;
  background: #FAFBFC;
}
.oc-ag-sig--risk { border-left-color: rgba(190, 18, 60, 0.45); }
.oc-ag-sig--warn { border-left-color: rgba(180, 83, 9, 0.45); }
.oc-ag-sig-label { font: 500 12px/1.3 Inter, sans-serif; color: #374151; }
.oc-ag-sig-value {
  font: 700 13px/1.3 Inter, sans-serif; color: #101828;
  font-variant-numeric: tabular-nums;
}
.oc-ag-sig--risk .oc-ag-sig-value { color: #BE123C; }
.oc-ag-sig--warn .oc-ag-sig-value { color: #B45309; }
.oc-ag-sig-note { font: 400 11px/1.3 Inter, sans-serif; color: #98A2B3; }

.oc-ag-user {
  align-self: flex-end;
  max-width: 86%;
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 10px 10px 3px 10px;
  background: #EAF2FF;
  border: 1px solid rgba(37, 99, 235, 0.16);
  font: 400 12px/1.45 Inter, sans-serif;
  color: #1D4ED8;
}

.oc-ag-points {
  list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.oc-ag-points li {
  display: flex; align-items: flex-start; gap: 8px;
  font: 400 12px/1.45 Inter, sans-serif;
  color: #344054;
}
.oc-ag-rank {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: #EEF4FF; color: #2563EB;
  font: 700 9.5px/1 Inter, sans-serif;
  margin-top: 1px;
}

.oc-ag-act {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font: 600 12px/1 Inter, sans-serif;
  color: #2563EB;
}
.oc-ag-arrow { font-style: normal; }

/* -- the composer -------------------------------------------------------- */

/* Present throughout, because the Agent works whether or not anyone is
   typing. smartNsales Agent is the intelligence; Ask smartNsales is the way
   in, and it is never the headline. */
.oc-ag-composer {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.oc-ag-field {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; height: 20px;
}
.oc-ag-typed { font: 400 12.5px/1 Inter, sans-serif; color: #101828; white-space: nowrap; }
.oc-ag-ph    { font: 400 12.5px/1 Inter, sans-serif; color: #98A2B3; }

.oc-ag-caret {
  width: 1.5px; height: 14px; margin-left: 1px;
  background: #2563EB;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .is-typing .oc-ag-caret { opacity: 1; animation: oc-ag-blink 1s steps(1) infinite; }
}
@keyframes oc-ag-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.oc-ag-mic, .oc-ag-send { display: inline-grid; place-items: center; flex: none; }
.oc-ag-mic { color: #98A2B3; }
.oc-ag-mic svg, .oc-ag-send svg { width: 14px; height: 14px; }
.oc-ag-send {
  width: 26px; height: 26px; border-radius: 7px;
  background: #D9E0E8; color: #FFFFFF;
}
/* It only looks live once there is something to send. */
.is-typing .oc-ag-send { background: #2563EB; }
@media (prefers-reduced-motion: no-preference) {
  .oc-ag-send { transition: background-color 0.3s ease; }
}

/* ------------------------------------------------------------- reveal ----- */

/* Scoped to html.js-anim, which the head script sets before first paint, so
   with JavaScript off nothing is ever hidden. Matches reveal.css's curve and
   distance rather than inventing a second motion language. */
.js-anim .oc-row .oc-copy,
.js-anim .oc-row .oc-visual {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition:
    opacity   0.8s cubic-bezier(.2, .65, .3, 1),
    transform 0.8s cubic-bezier(.2, .65, .3, 1),
    filter    0.8s cubic-bezier(.2, .65, .3, 1);
}
.js-anim .oc-row .oc-visual { transition-delay: 0.12s; }

.js-anim .oc-row.is-in .oc-copy,
.js-anim .oc-row.is-in .oc-visual {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Contents of a panel settle behind their own row, one small step apart. */
.js-anim .oc-row .oc-pri,
.js-anim .oc-row .oc-ch,
.js-anim .oc-row .oc-rp-rows li,
.js-anim .oc-row .oc-ag-sig {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.65,.3,1);
  transition-delay: calc(0.34s + var(--n, 0) * 90ms);
}
.js-anim .oc-row.is-in .oc-pri,
.js-anim .oc-row.is-in .oc-ch,
.js-anim .oc-row.is-in .oc-rp-rows li,
.js-anim .oc-row.is-in .oc-ag-sig {
  opacity: 1;
  transform: none;
}

/* The bars draw rather than appear: the comparison between channels is the
   content, and drawing them is what makes the gap register. */
.js-anim .oc-row .oc-ch-track > i {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(.2,.65,.3,1);
  transition-delay: calc(0.44s + var(--n, 0) * 90ms);
}
.js-anim .oc-row.is-in .oc-ch-track > i { transform: scaleX(1); }

/* --------------------------------------------------------- responsive ----- */

@media (max-width: 980px) {
  .oc-section { padding: 72px 1.5rem 80px; }
  .oc-header { margin-bottom: 52px; }
  .oc-rows { gap: 64px; }

  /* Stacked, and always copy above its own visual — the alternation only
     means something when the two sit side by side. */
  .oc-row,
  .oc-row--flip { grid-template-columns: 1fr; gap: 26px; }
  .oc-row--flip .oc-copy   { grid-column: 1; grid-row: auto; }
  .oc-row--flip .oc-visual { grid-column: 1; grid-row: auto; }
  .oc-desc { max-width: none; }
}

@media (max-width: 560px) {
  .oc-section { padding: 60px 1.15rem 66px; }
  .oc-win-body { padding: 14px; }
  .oc-task { grid-template-columns: auto 1fr; padding: 9px 10px; }
  /* The deadline is the least of the three things a task row says, and it is
     what pushes the sentence to wrap on a phone. */
  .oc-task-meta { display: none; }
  .oc-ch { grid-template-columns: 78px 1fr auto; gap: 10px; }
  .oc-desc { font-size: 15.5px; }
  /* Smaller and fainter on a phone, where the card is narrow enough that a
     200px core would sit directly under the signal rows. */
  .oc-ag-bg { left: -70px; bottom: -76px; width: 220px; height: 220px; opacity: 0.08; }
  .oc-ag-bg .oc-ag-bg-orb { left: 36px; top: 36px; --agm-size: 148px; }

  /* Keep each signal on one line — wrapping the note onto its own row costs
     more height than the board state can spare at this width. */
  .oc-ag-body { height: 252px; }
  .oc-ag-sig { padding: 6px 8px; gap: 6px; }
  .oc-ag-sig-label { font-size: 11px; }
  .oc-ag-sig-value { font-size: 12px; }
  .oc-ag-sig-note { font-size: 10px; }
  .oc-ag-lead { font-size: 13.5px; }
  .oc-ag-text, .oc-ag-points li { font-size: 11.5px; }
}

/* ------------------------------------------------------ reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .js-anim .oc-row .oc-copy,
  .js-anim .oc-row .oc-visual,
  .js-anim .oc-row .oc-pri,
  .js-anim .oc-row .oc-ch,
  .js-anim .oc-row .oc-rp-rows li,
  .js-anim .oc-row .oc-ag-sig {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    transition-delay: 0s;
  }
  .js-anim .oc-row .oc-ch-track > i { transform: none; transition: none; }
  .oc-ag-caret { animation: none; }
  .oc-ag-dot { animation: none; }
  /* The core stays; only its movement goes. */
  .oc-ag-bg-spin, .oc-ag-bg .agm-core { animation: none; }
  .oc-rp-panel.is-on { transition: none; }
  .oc-win, .oc-num, .oc-num::after { transition: none; }
}

/* Stacked panels would print on top of each other. */
@media print {
  .oc-rp-panel:not(.is-on) { display: none; }
}