/* Okul Çizelgem — landing page stylesheet (V3). Plain CSS, no build step.
   Loaded only by marketing/landing.html, after landing-tokens.css. Every class is
   prefixed oc-; the only unprefixed rules target this page's own <html>.
   Final states are the base styles. Motion only adds a starting point: CSS keyframes
   inside prefers-reduced-motion: no-preference, and html.oc-motion, which landing.js
   sets only when motion is allowed. Without JS or with reduced motion the page is static. */

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--topbar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.oc, .oc *, .oc *::before, .oc *::after { box-sizing: border-box; }
.oc {
  --g: clamp(16px, 5vw, 64px);
  /* Motion system: one easing family, a few named speeds. */
  --m-fast: 160ms;    /* UI response: hover, press, focus */
  --m-base: 280ms;    /* small state change: dot, pill, disclosure */
  --m-reveal: 760ms;  /* element or section reveal */
  --m-scene: 680ms;   /* sticky tour: scene change */
  --m-stagger: 70ms;  /* step between items in a sequence */
  --m-scroll: 140ms;  /* smoothing for scroll-linked values (wheel steps) */
  --m-follow: 700ms;  /* pointer tilt follow */
  --e-out: var(--ease-out);     /* arrivals */
  --e-move: var(--ease-in-out); /* morphs between states */
  margin: 0;
  background: var(--navy-950);
  color: var(--text-on-dark);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:where(.oc) :where(h1, h2, h3, p, ol, ul) { margin: 0; }
.oc svg { display: block; }
.oc-container {
  width: 100%;
  max-width: calc(1200px + 2 * var(--g));
  margin-inline: auto;
  padding-inline: var(--g);
}

.oc-skip {
  position: absolute; left: 16px; top: -120px; z-index: 50;
  padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--white); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.oc-skip:focus { top: 16px; }

/* Focus: blue on light grounds (default), gold on navy. Light rule last so nested light wins. */
.oc :focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
.oc [data-ground="dark"] :focus-visible { outline-color: var(--focus-on-dark); }
.oc [data-ground="light"] :focus-visible { outline-color: var(--focus-on-light); }

/* ---------- Type: editorial display face for statements, sans for UI ---------- */
.oc-kicker {
  margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue-600);
}
[data-ground="dark"] .oc-kicker { color: var(--blue-300); }
.oc-h2 {
  max-width: 20em;
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance;
}
[data-ground="dark"] .oc-h2 { color: var(--text-on-dark); }
.oc-display {
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.045em;
  color: var(--ink); text-wrap: balance;
}
[data-ground="dark"] .oc-display { color: var(--text-on-dark); }
.oc-lead { max-width: 40em; margin-top: 18px; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
[data-ground="dark"] .oc-lead { color: var(--text-muted-on-dark); }
.oc-lead a {
  color: var(--blue-600); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.oc-lead a:hover { text-decoration-thickness: 2px; }
.oc-head { max-width: 780px; }
.oc-head--wide { max-width: 920px; }

/* ---------- Mark ---------- */
.oc-mark { width: 32px; height: 32px; flex: none; }
.oc-mark__tile { fill: var(--blue-600); }
.oc-mark__bar { fill: var(--white); }
.oc-mark__bar--gold { fill: var(--gold-400); }

/* ---------- Buttons ---------- */
.oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 20px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--m-fast) var(--e-out), border-color var(--m-fast) var(--e-out), color var(--m-fast) var(--e-out);
}
.oc-btn--sm { min-height: 40px; padding: 0 16px; }
.oc-btn--lg { min-height: var(--control-h); padding: 0 26px; font-size: 16px; }
.oc-btn--block { width: 100%; }
.oc-btn--primary {
  background: var(--blue-600); color: var(--white);
  box-shadow: 0 1px 2px rgba(2, 6, 16, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.oc-btn--primary:hover { background: var(--blue-700); }
.oc-btn--primary:active { background: var(--blue-700); box-shadow: inset 0 2px 4px rgba(2, 6, 16, 0.35); }
.oc-btn--ghost { background: transparent; color: var(--text-on-dark); border-color: var(--control-line-dark); }
.oc-btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); }
.oc-btn--ghost:active { background: rgba(255, 255, 255, 0.12); }

/* ---------- Top bar ---------- */
.oc-topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--navy-950); border-bottom: 1px solid var(--line-dark);
}
.oc-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--topbar-h); }
.oc-brandlink { display: inline-flex; align-items: center; gap: 12px; color: var(--text-on-dark); text-decoration: none; border-radius: 8px; }
.oc-brandlink__name { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.oc-topbar__nav { display: flex; align-items: center; gap: 4px; }
.oc-navlink {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md);
  color: var(--text-muted-on-dark); font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none;
  text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: var(--blue-300);
  transition: color var(--m-fast) var(--e-out), background-color var(--m-fast) var(--e-out);
}
.oc-navlink:hover { color: var(--text-on-dark); background: rgba(255, 255, 255, 0.06); }
.oc-navlink[aria-current="true"] { color: var(--text-on-dark); text-decoration-line: underline; }
.oc-topbar__nav .oc-btn { margin-left: 4px; }

/* ---------- Hero ---------- */
.oc-hero {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-block: clamp(56px, 7vw, 104px) clamp(72px, 8vw, 120px);
}
/* Two decorative layers: a soft glow and the schedule-paper grid. JS moves them with scroll (--sy). */
.oc-hero__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.oc-hero__glow {
  position: absolute; top: -22%; right: -14%; width: min(1000px, 85vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(29, 78, 216, 0.42), rgba(29, 78, 216, 0.12) 55%, transparent 72%);
}
.oc-hero__lines {
  position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 70% at 72% 38%, #000, rgba(0, 0, 0, 0.45) 45%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 72% 38%, #000, rgba(0, 0, 0, 0.45) 45%, transparent 75%);
}
.oc-hero__inner {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.oc-hero__copy { container-type: inline-size; max-width: 600px; }
.oc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 6px 14px 6px 12px;
  border-radius: 999px; background: rgba(143, 176, 255, 0.08); box-shadow: inset 0 0 0 1px var(--line-dark);
  font-size: 13.5px; font-weight: 600; line-height: 20px; color: var(--text-muted-on-dark);
}
.oc-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-400); box-shadow: 0 0 0 4px rgba(232, 184, 74, 0.16);
}
.oc-hero__title {
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.08; letter-spacing: -0.04em; color: var(--text-on-dark);
  max-width: 18ch; text-wrap: balance;
}
/* Each line is a mask; the inner span rises into it. Padding keeps descenders inside the clip. */
.oc-line { display: block; overflow: clip; padding-block: 0.04em 0.14em; margin-block: -0.04em -0.14em; }
.oc-line__in { display: block; }
.oc-hero__accent { position: relative; display: inline-block; }
.oc-hero__accent::after {
  content: ""; position: absolute; left: 0.02em; right: 0.16em; bottom: 0.01em; height: 0.075em;
  border-radius: 99px; background: var(--gold-400); transform-origin: left center;
}
.oc-hero__lead { max-width: 34em; margin-top: 26px; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.6; color: var(--text-muted-on-dark); }
.oc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 36px; }
.oc-hero__signin { margin-top: 12px; }
/* Returning users: a quiet line beside the primary call to action, not a second button. */
.oc-signin { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: 15px; line-height: 20px; color: var(--text-muted-on-dark); }
.oc-signin__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 2px; border-radius: 6px;
  font-weight: 600; color: var(--text-on-dark);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(143, 176, 255, 0.5);
  transition: color var(--m-fast) var(--e-out), text-decoration-color var(--m-fast) var(--e-out);
}
.oc-signin__link:hover { text-decoration-color: var(--blue-300); }
.oc-signin__link:active { color: var(--blue-100); }
.oc-signin__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .oc-signin__arrow { transition: translate var(--m-fast) var(--e-out); }
  .oc-signin__link:hover .oc-signin__arrow { translate: 2px 0; }
}
.oc-hero__facts { margin-top: 28px; }
/* Short fact lines (hero, early access): dots between items, no badges. */
.oc-facts {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; padding: 0; list-style: none;
  font-size: 14px; line-height: 20px; color: var(--text-muted-on-dark);
}
.oc-facts li + li::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%;
  background: var(--text-subtle-on-dark); vertical-align: middle;
}

/* ---------- Schedule grid (hero week and tour scene share it) ---------- */
.oc-grid {
  --cell-h: 40px;
  --gap: 6px;
  --rows-n: 5;
  position: relative;
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--rows-n), var(--cell-h));
  transform-style: preserve-3d;
}
.oc-grid__row { display: contents; }
.oc-grid__corner, .oc-grid__day {
  align-self: end; padding: 0 2px 2px;
  font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted-on-dark);
}
.oc-grid__day { text-align: center; }
.oc-grid__place {
  align-self: center; padding-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--text-muted-on-dark);
}
/* Empty slot (dashed) under a fill. The fill is the teacher's name. */
.oc-grid__cell { position: relative; border: 1px dashed rgba(143, 176, 255, 0.3); border-radius: 9px; transform-style: preserve-3d; }
.oc-grid__cell > b {
  position: absolute; inset: -1px; display: grid; place-items: center; padding: 0 6px; overflow: hidden;
  border-radius: inherit; white-space: nowrap;
  background: color-mix(in srgb, var(--blue-600) 24%, var(--navy-900));
  box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--white);
}
/* One of the day's duty teachers covers an absent teacher's lesson: a gold ring; the duty itself stays. */
.oc-week .oc-grid__cell--pick > b {
  box-shadow: 0 0 0 2px var(--gold-400), 0 12px 26px -12px rgba(232, 184, 74, 0.7);
  transform: translateZ(18px);
}
/* The day of the absence: its duty teachers are the candidates. */
.oc-grid__focus {
  position: absolute; grid-column: 5; grid-row: 1 / -1; inset: -6px -3px;
  border-radius: 12px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(143, 176, 255, 0.18), rgba(143, 176, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.32);
}
/* Two-state pill: first label during the build, second label at rest. */
.oc-state { display: grid; margin-left: auto; }
.oc-state > span {
  grid-area: 1 / 1; padding: 3px 10px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 600; line-height: 18px;
}
.oc-state__a { opacity: 0; background: rgba(143, 176, 255, 0.12); color: var(--text-muted-on-dark); }
.oc-state__b { background: rgba(143, 176, 255, 0.16); color: var(--white); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.36); }

/* ---------- Hero visual: the week, then a lesson covered from that day's duty teachers ---------- */
.oc-hero__visual { perspective: 1600px; }
.oc-week {
  --rx: 7deg;
  --ry: -12deg;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.oc-week__plane {
  position: relative; transform-style: preserve-3d;
  padding: 18px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(26, 45, 82, 0.74), rgba(14, 29, 56, 0.95) 42%);
  box-shadow: 0 48px 90px -40px rgba(2, 6, 16, 0.95), 0 0 0 1px rgba(143, 176, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.oc-week__bar { display: flex; align-items: center; gap: 12px; padding: 2px 4px 16px; }
.oc-week__title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text-on-dark); }
.oc-week__range { font-size: 13px; font-weight: 500; line-height: 20px; color: var(--text-muted-on-dark); font-variant-numeric: tabular-nums; }
.oc-week__grid { --rows-n: 5; }
/* Görevlendirme tray: the grid's columns, so the slot sits under the chosen duty teacher's day. */
.oc-assign {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 8px 6px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(143, 176, 255, 0.16);
  transform-style: preserve-3d;
}
.oc-assign__head { grid-column: 1 / 5; grid-row: 1; align-self: center; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--text-muted-on-dark); }
/* Connector from the grid's last row (the chosen teacher) down to the slot. */
.oc-assign__link { position: relative; grid-column: 5; grid-row: 1; }
.oc-assign__link::before {
  content: ""; position: absolute; left: 50%; top: -27px; bottom: -8px; width: 2px; translate: -50% 0;
  border-radius: 2px; background: var(--gold-400); transform-origin: top center;
}
.oc-assign__doc {
  grid-column: 6; grid-row: 1; justify-self: center; align-self: center; padding: 0 8px; border-radius: 5px;
  background: var(--white); font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: 0.04em; color: var(--danger);
}
.oc-assign__lesson { grid-column: 1; grid-row: 2; align-self: center; padding-left: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text-on-dark); }
.oc-assign__absent {
  grid-column: 2 / 5; grid-row: 2; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 9px;
  background: repeating-linear-gradient(135deg, rgba(180, 35, 24, 0.34) 0 5px, rgba(180, 35, 24, 0.14) 5px 10px);
  box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.45);
}
.oc-assign__absent b {
  font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--text-on-dark); white-space: nowrap;
  text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.6);
}
.oc-assign__absent span { padding: 1px 7px; border-radius: 99px; background: rgba(10, 22, 40, 0.7); font-size: 11px; font-weight: 600; line-height: 16px; color: var(--text-muted-on-dark); }
.oc-assign__slot { position: relative; grid-column: 5; grid-row: 2; height: 40px; border: 1px dashed rgba(232, 184, 74, 0.55); border-radius: 9px; }
.oc-assign__slot > b {
  position: absolute; inset: -1px; display: grid; place-items: center; padding: 0 6px; overflow: hidden; border-radius: inherit;
  background: var(--gold-400); box-shadow: 0 10px 24px -10px rgba(232, 184, 74, 0.6);
  font-size: 12.5px; font-weight: 650; line-height: 1; color: var(--on-gold); white-space: nowrap;
}
/* Process rail: the four beats of the story. */
.oc-week__rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; }
.oc-week__rail::before, .oc-week__rail::after {
  content: ""; position: absolute; top: 5px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px;
  background: rgba(143, 176, 255, 0.18);
}
.oc-week__rail::after {
  background: linear-gradient(90deg, var(--blue-300), var(--blue-300) 45%, var(--gold-400) 66%, var(--blue-300) 88%);
  transform-origin: left center;
}
.oc-week__stage {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; padding-inline: 4px;
  font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--text-muted-on-dark);
}
.oc-week__stage::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue-300); box-shadow: 0 0 0 4px rgba(143, 176, 255, 0.18);
}
.oc-week__stage--gold::before { background: var(--gold-400); box-shadow: 0 0 0 4px rgba(232, 184, 74, 0.2); }

/* Hero entrance: copy and visual arrive once. The week's story then loops in phases set by landing.js. */
@media (prefers-reduced-motion: no-preference) {
  .oc-enter { animation: oc-enter var(--m-reveal) var(--e-out) both; animation-delay: calc(120ms + var(--e, 0) * 90ms); }
  .oc-line__in { animation: oc-line-in 900ms var(--e-out) both; animation-delay: calc(120ms + var(--e, 0) * 90ms); }
  .oc-hero__accent::after { animation: oc-draw 900ms var(--e-out) 900ms both; }
  .oc-hero__lines { animation: oc-lines-in 1800ms var(--e-out) both; }
  .oc-hero__visual { animation: oc-visual-in 1000ms var(--e-out) 80ms both; }
}
@keyframes oc-enter { from { opacity: 0; translate: 0 14px; } }
@keyframes oc-line-in { from { translate: 0 110%; } }
@keyframes oc-draw { from { transform: scaleX(0); } }
@keyframes oc-lines-in { from { opacity: 0; translate: 0 -16px; } }
@keyframes oc-visual-in { from { opacity: 0; translate: 0 32px; } }

/* ---------- Problem and solution ---------- */
.oc-compare { padding-block: clamp(72px, 8vw, 120px); }
.oc-compare__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin-top: clamp(32px, 4vw, 56px);
}
.oc-compare__panel {
  padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  background: var(--paper);
}
.oc-compare__panel--new { border-color: var(--blue-100); background: var(--white); box-shadow: 0 20px 48px -40px rgba(10, 22, 40, 0.38); }
.oc-compare__panel h3 { font-family: var(--font-display); font-size: 23px; line-height: 1.2; color: var(--ink); }
.oc-compare__panel--new h3 { color: var(--blue-700); }
.oc-compare__panel ol { display: grid; gap: 14px; margin: 24px 0 0; padding-left: 1.5em; color: var(--ink-muted); }
.oc-compare__panel li { padding-left: 6px; line-height: 1.5; }
.oc-compare__panel li::marker { font-weight: 700; color: var(--blue-600); }

/* Preserved flow styles are inert while the older flow illustration is not rendered. */
.oc-flow { position: relative; padding-block: clamp(64px, 8vw, 120px) clamp(96px, 10vw, 152px); }
/* Seven steps on two lanes. Labels sit above (app) or below (you) one shared SVG band. */
.oc-flow__map {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 80px);
}
.oc-flow__legend {
  grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 36px;
  font-size: 12.5px; font-weight: 700; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted-on-dark);
}
.oc-flow__lane { display: inline-flex; align-items: center; gap: 10px; }
.oc-flow__lane::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-300); }
.oc-flow__lane--you::before { background: var(--gold-400); }
.oc-flow__svg { grid-column: 1 / -1; grid-row: 3; width: 100%; height: auto; overflow: visible; }
.oc-flow__track { fill: none; stroke: rgba(143, 176, 255, 0.16); stroke-width: 2; }
.oc-flow__line {
  fill: none; stroke: var(--blue-300); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
.oc-flow__glint { fill: none; stroke: var(--gold-400); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.04 1; stroke-dashoffset: -1; }
.oc-flow__pin { fill: var(--blue-300); stroke: var(--navy-950); stroke-width: 4; }
.oc-flow__pin--you { fill: var(--gold-400); }
.oc-flow__nodes {
  grid-column: 1 / -1; grid-row: 2 / span 3;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  margin: 0; padding: 0; list-style: none;
}
.oc-flow__node { grid-row: 1; align-self: end; padding: 0 6px 20px; text-align: center; }
.oc-flow__node--you { grid-row: 3; align-self: start; padding: 20px 6px 0; }
.oc-flow__node:nth-child(1) { grid-column: 1; }
.oc-flow__node:nth-child(2) { grid-column: 2; }
.oc-flow__node:nth-child(3) { grid-column: 3; }
.oc-flow__node:nth-child(4) { grid-column: 4; }
.oc-flow__node:nth-child(5) { grid-column: 5; }
.oc-flow__node:nth-child(6) { grid-column: 6; }
.oc-flow__node:nth-child(7) { grid-column: 7; }
/* The lane is shown by position and colour on wide screens; the text stays for screen readers. */
.oc-flow__who {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.oc-flow__what {
  display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text-on-dark); text-wrap: balance;
  transition: color var(--m-base) var(--e-out);
}

/* ---------- Light sheets: they widen as they arrive (--k from JS) ---------- */
.oc-sheet { position: relative; isolation: isolate; color: var(--ink); }
.oc-sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: clamp(20px, 3vw, 36px); background: var(--paper);
}
.oc-sheet--white::before { background: var(--white); }

/* ---------- Capabilities ---------- */
.oc-caps { padding-block: clamp(80px, 9vw, 136px); }
.oc-caps__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none;
}
.oc-cap {
  display: flex; flex-direction: column;
  padding: 12px 12px 28px; border-radius: 22px; background: var(--white);
  box-shadow: 0 0 0 1px var(--line-light), 0 28px 48px -40px rgba(10, 22, 40, 0.45);
}
.oc-cap__title, .oc-cap__text { padding-inline: 14px; }
.oc-cap__title { font-family: var(--font-display); font-size: 20px; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.oc-cap__text { max-width: 48ch; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); }
/* Each tile opens with a small piece of the product, drawn in CSS on a navy panel. */
.oc-cap__art {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 22px;
  height: 200px; margin-bottom: 24px; padding: 20px; overflow: hidden; border-radius: 14px;
  background: radial-gradient(120% 100% at 0% 0%, var(--navy-800), var(--navy-950) 72%);
  color: var(--text-on-dark);
}

/* Shared product pieces (capabilities and tour scene). */
.oc-b { height: 14px; border-radius: 4px; background: rgba(143, 176, 255, 0.12); }
.oc-b.is-on { background: var(--blue-600); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.oc-doc {
  position: relative; display: grid; align-content: start; gap: 9px; flex: none;
  width: 104px; height: 140px; padding: 20px 14px; overflow: hidden;
  border-radius: 8px; background: var(--white); rotate: -4deg;
  box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.7);
}
.oc-doc__line { height: 6px; border-radius: 3px; background: #dfe5f0; }
.oc-doc__line:nth-child(3n + 2) { width: 72%; }
.oc-doc__line:nth-child(3n) { width: 88%; }
.oc-doc__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 36px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(29, 78, 216, 0.22) 70%, rgba(29, 78, 216, 0.55));
  border-bottom: 2px solid var(--blue-600);
}
.oc-plan {
  display: grid; gap: 7px; flex: none; padding: 14px; border-radius: 10px;
  background: rgba(14, 29, 56, 0.92); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.18);
}
.oc-plan__label { font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-300); }
.oc-plan__row { display: grid; grid-template-columns: 44px repeat(6, 18px); gap: 5px; align-items: center; }
.oc-plan__row:nth-child(2) { --r: 1; }
.oc-plan__row:nth-child(3) { --r: 2; }
.oc-plan__row:nth-child(4) { --r: 3; }
.oc-plan__row:nth-child(5) { --r: 4; }
.oc-plan__row:nth-child(6) { --r: 5; }
.oc-plan__who { height: 7px; border-radius: 4px; background: rgba(169, 184, 209, 0.45); }
/* Lesson cover: the lesson without its teacher, then the list that starts with that day's duty teachers. */
.oc-pick {
  display: grid; gap: 5px; width: min(100%, 320px); padding: 12px; border-radius: 12px;
  background: rgba(14, 29, 56, 0.92); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.16);
}
.oc-pick__lesson { display: grid; gap: 2px; padding: 0 2px 8px; border-bottom: 1px solid rgba(143, 176, 255, 0.14); }
.oc-pick__when { font-size: 12.5px; font-weight: 650; line-height: 1.3; color: var(--text-on-dark); }
.oc-pick__absent { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text-muted-on-dark); }
.oc-pick__group { margin-top: 4px; padding-inline: 2px; font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-300); }
.oc-pick__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 0 10px;
  border-radius: 8px; background: rgba(143, 176, 255, 0.06);
}
.oc-pick__name { overflow: hidden; white-space: nowrap; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--text-on-dark); }
.oc-pick__note { flex: none; font-size: 11px; font-weight: 500; line-height: 1; color: var(--text-muted-on-dark); }
.oc-pick__row--on { background: rgba(232, 184, 74, 0.14); box-shadow: inset 0 0 0 1.5px var(--gold-400); }
.oc-pick__row--on .oc-pick__name { color: var(--gold-400); }
/* Cover sheet (nöbetçi öğretmen görevlendirme): lesson, class, absent teacher, assigned duty teacher. */
.oc-coverdoc {
  display: grid; gap: 6px; padding: 14px 14px 16px; border-radius: 8px; background: var(--white); color: var(--ink);
  box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.75);
}
.oc-coverdoc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.oc-coverdoc__title { font-size: 11.5px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.oc-coverdoc__tag { padding: 1px 7px; border-radius: 5px; background: #fde8e6; font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.03em; color: var(--danger); }
.oc-coverdoc__row {
  display: grid; grid-template-columns: 0.9fr 0.7fr 1.1fr 1.1fr; gap: 6px; padding: 5px 6px; border-radius: 4px;
  background: #f1f4f9; font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--ink);
}
.oc-coverdoc__row--head { padding-block: 0; background: none; font-weight: 700; color: var(--ink-muted); }
.oc-paper {
  display: grid; gap: 10px; width: min(100%, 420px); padding: 16px 16px 18px;
  border-radius: 8px; background: var(--white); color: var(--ink);
  box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.75);
}
.oc-paper__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-paper__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 650; line-height: 1.2; color: var(--ink); }
.oc-paper__tags { display: flex; flex: none; gap: 6px; }
.oc-paper__tags span { padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.03em; }
.oc-paper__tags span:first-child { background: #fde8e6; color: var(--danger); }
.oc-paper__tags span:last-child { background: #e3f4e8; color: color-mix(in srgb, var(--success) 80%, #000); }
.oc-paper__table { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.oc-paper__col { display: grid; grid-auto-rows: 14px; gap: 4px; }
.oc-paper__col > span:empty { border-radius: 3px; background: #e6ebf4; }
.oc-paper__day { font-size: 11px; font-weight: 700; line-height: 14px; text-align: center; color: var(--ink-muted); }
.oc-paper__col--off .oc-paper__note {
  grid-row: span 3; display: grid; place-items: center; padding: 2px; border-radius: 4px;
  background: repeating-linear-gradient(135deg, #f3e3b8 0 5px, #fbf3dc 5px 10px);
  font-size: 11px; font-weight: 650; line-height: 1.15; text-align: center; color: #6b4e0a;
}
.oc-paper__sign { display: flex; justify-content: space-between; margin-top: 8px; }
.oc-paper__sign span { width: 32%; height: 1px; background: #c5cedd; }

/* Rotation: names move one place down, the locked teacher stays. */
.oc-rot {
  --rh: 34px;
  display: grid; grid-template-columns: 70px 128px; grid-auto-rows: var(--rh); gap: 6px 12px; align-items: center;
}
.oc-rot__place { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted-on-dark); }
.oc-rot__name {
  position: relative; display: grid; place-items: center; height: 100%; border-radius: 8px;
  background: color-mix(in srgb, var(--blue-600) 26%, var(--navy-900));
  box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.22);
  font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--white);
}
.oc-rot__name:nth-child(6), .oc-rot__name:nth-child(8) { --from-y: calc(-1 * (var(--rh) + 6px)); }
.oc-rot__name--wrap { --from-y: calc(-0.6 * var(--rh)); }
.oc-rot__name--lock { background: var(--navy-800); color: var(--text-muted-on-dark); }
/* Padlock: shackle + body. */
.oc-rot__name--lock::before, .oc-rot__name--lock::after { content: ""; position: absolute; right: 12px; }
.oc-rot__name--lock::before { top: 9px; width: 8px; height: 8px; border: 2px solid var(--gold-400); border-bottom: 0; border-radius: 5px 5px 0 0; right: 13px; }
.oc-rot__name--lock::after { top: 15px; width: 12px; height: 9px; border-radius: 2px; background: var(--gold-400); }
/* Paper output with a public holiday column. */
.oc-art--paper .oc-paper { rotate: -1.5deg; }
/* Schools: switch between the account's schools. */
.oc-art--schools { flex-direction: column; gap: 16px; }
.oc-schools { display: grid; gap: 8px; width: min(100%, 260px); }
.oc-school {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(14, 29, 56, 0.92); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.14);
}
.oc-school--on { box-shadow: inset 0 0 0 1.5px var(--blue-300); }
.oc-school__glyph { width: 22px; height: 20px; flex: none; background: var(--blue-600); clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0 38%); }
.oc-school__bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(169, 184, 209, 0.4); }

/* ---------- Tour: steps with a scene beside them ---------- */
.oc-tour { position: relative; padding-block: clamp(48px, 5vw, 72px); }
.oc-tour__body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(24px, 2.5vw, 36px);
}
.oc-tour__steps { position: relative; display: grid; gap: 28px; margin: 0; padding: 0 0 0 56px; list-style: none; }
.oc-tour__steps::before, .oc-tour__steps::after {
  content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: rgba(143, 176, 255, 0.16);
}
.oc-tour__steps::after {
  background: linear-gradient(180deg, var(--blue-300), var(--gold-400));
  transform-origin: top center;
}
.oc-tour__step { position: relative; }
.oc-tour__num {
  position: absolute; left: -56px; top: -2px; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-950); box-shadow: inset 0 0 0 1.5px var(--blue-300);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 650; line-height: 1; color: var(--blue-300);
  font-variant-numeric: tabular-nums;
  transition: color var(--m-base) var(--e-out), box-shadow var(--m-base) var(--e-out);
}
.oc-tour__title {
  font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 650; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--text-on-dark);
  transition: color var(--m-base) var(--e-out);
}
.oc-tour__text {
  max-width: 34em; margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--text-muted-on-dark);
  transition: color var(--m-base) var(--e-out);
}
/* At rest the scene is the finished week: grid, substitute and published state. */
.oc-scene__doc, .oc-scene__plan, .oc-scene__panel, .oc-scene__paper, .oc-scene__cover { display: none; }
.oc-scene__duty {
  padding: 18px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(26, 45, 82, 0.74), rgba(14, 29, 56, 0.95) 42%);
  box-shadow: 0 48px 90px -40px rgba(2, 6, 16, 0.95), 0 0 0 1px rgba(143, 176, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.oc-scene__bar { display: flex; align-items: center; gap: 12px; padding: 2px 4px 16px; }
.oc-scene__title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text-on-dark); }
.oc-scene__grid { --rows-n: 4; }

/* ---------- Benefits and daily assignment ---------- */
.oc-benefits { padding-block: clamp(72px, 8vw, 120px); }
.oc-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(32px, 4vw, 56px); }
.oc-benefit { padding: 28px; border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: var(--white); }
.oc-benefit h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--ink); }
.oc-benefit p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.oc-daily { padding-block: clamp(80px, 9vw, 136px); }
.oc-daily__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.oc-daily__decision { max-width: 42ch; margin-top: 28px; padding-left: 18px; border-left: 3px solid var(--gold-400); font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--white); }
.oc-daily__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: daily; }
.oc-daily__steps li { position: relative; display: grid; padding: 18px 0 18px 58px; border-bottom: 1px solid var(--line-dark); counter-increment: daily; }
.oc-daily__steps li:first-child { border-top: 1px solid var(--line-dark); }
.oc-daily__steps li::before { content: counter(daily, decimal-leading-zero); position: absolute; left: 0; top: 19px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--gold-400); }
.oc-daily__steps strong { font-size: 17px; line-height: 1.3; color: var(--white); }

/* ---------- FAQ ---------- */
.oc-faq { padding-block: clamp(80px, 9vw, 136px); }
.oc-faq__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.oc-faq__list { border: 1px solid var(--line-light); border-radius: 18px; background: var(--white); overflow: hidden; }
.oc-faq__item + .oc-faq__item { border-top: 1px solid var(--line-light); }
.oc-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 16px 20px;
  cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--ink);
  transition: background-color var(--m-fast) var(--e-out);
}
.oc-faq__item summary::-webkit-details-marker { display: none; }
/* Disclosure chevron: down when closed, up when open. inline-block keeps it visible if flex is ignored. */
.oc-faq__item summary::after {
  content: ""; display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 6px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-2px) rotate(45deg);
}
.oc-faq__item[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.oc-faq__item summary:hover { background: var(--paper); }
.oc-faq__item summary:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: -3px; }
.oc-faq__item[open] { background: color-mix(in srgb, var(--paper) 55%, var(--white)); }
.oc-faq__item p { max-width: 62ch; padding: 0 20px 18px; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.oc-faq__item a { color: var(--blue-600); }

/* ---------- Early access ---------- */
.oc-contact { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(88px, 10vw, 152px); }
.oc-contact__backdrop {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(29, 78, 216, 0.32), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(232, 184, 74, 0.08), transparent 70%);
}
.oc-contact__inner {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.oc-contact .oc-display { font-size: clamp(36px, 4.4vw, 64px); }
.oc-next { display: grid; gap: 14px; margin-top: 32px; padding: 0; list-style: none; counter-reset: next; }
.oc-next li { display: flex; align-items: center; gap: 14px; counter-increment: next; font-size: 16px; line-height: 1.45; color: var(--text-on-dark); }
.oc-next li::before {
  content: counter(next); display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line-dark);
  font-family: var(--font-display); font-size: 14px; font-weight: 650; color: var(--gold-400);
}
.oc-contact__direct {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  font-size: 16px; line-height: 1.45; color: var(--text-muted-on-dark);
}
.oc-contact__direct a {
  color: var(--text-on-dark); font-weight: 600; word-break: break-all;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.oc-contact__direct a:hover { color: var(--gold-400); text-decoration-thickness: 2px; }
.oc-contact__facts { margin-top: 16px; font-size: 13.5px; }

/* ---------- Form ---------- */
.oc-form {
  display: grid; gap: 20px;
  padding: clamp(24px, 3vw, 40px); border-radius: 20px;
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-panel);
}
.oc-form__head { display: grid; gap: 4px; }
.oc-form__title { font-family: var(--font-display); font-size: 22px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.oc-form__hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.oc-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.oc-field { display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
.oc-field__label { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); }
.oc-field__opt { font-weight: 400; color: var(--ink-muted); }
.oc-input {
  width: 100%; height: var(--control-h); margin: 0; padding: 0 14px;
  border: 1px solid var(--control-line); border-radius: var(--radius-md);
  background: var(--white); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 24px;
  transition: border-color var(--m-fast) var(--e-out);
}
.oc-input::placeholder { color: var(--ink-muted); opacity: 1; }
.oc-input:hover { border-color: var(--ink-muted); }
.oc-input:focus-visible { border-color: var(--blue-600); outline-offset: 1px; }
textarea.oc-input { height: auto; min-height: 116px; padding: 12px 14px; resize: vertical; }
select.oc-input {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a5872' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.oc-field__hint { margin: 0; font-size: 13px; font-weight: 400; line-height: 20px; color: var(--ink-muted); }
.oc-field__error { display: none; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--danger); }
.oc-field.is-invalid .oc-input { border-color: var(--danger); }
.oc-field.is-invalid .oc-field__error { display: block; }
/* Server-side form error: shown above the fields (UI-STANDARDS §5). */
.oc-form__fail {
  padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, var(--white));
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--danger);
}
.oc-form__fail:focus { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.oc-form__fail[hidden] { display: none; }
.oc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.oc-check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--blue-600); }
.oc-check.is-invalid span { color: var(--danger); }
.oc-form__submit { margin-top: 4px; }
.oc-form__note { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.oc-form__note a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.oc-form__note a:hover { text-decoration-thickness: 2px; }
.oc-form__sent { display: none; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 22px; }
.oc-form__sent svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oc-form__sent strong { color: var(--success); }
.oc-form.is-sent { gap: var(--space-4); }
.oc-form.is-sent > :not(.oc-form__sent):not(input[type="hidden"]) { display: none !important; }
.oc-form.is-sent .oc-form__sent {
  display: flex; padding: 20px 18px; font-size: 16px; line-height: 1.45;
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  background: color-mix(in srgb, var(--success) 10%, var(--white));
}
.oc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.oc-footer { background: var(--navy-1000); color: var(--text-muted-on-dark); padding-block: 56px 32px; }
.oc-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px 48px; }
.oc-footer .oc-brandlink__name { font-size: 17px; }
.oc-footer__tag { margin-top: 12px; font-size: 15px; line-height: 22px; }
.oc-footer__nav { display: flex; flex-wrap: wrap; gap: 4px; margin-right: -12px; }
.oc-footer__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: var(--text-muted-on-dark); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: color var(--m-fast) var(--e-out), background-color var(--m-fast) var(--e-out);
}
.oc-footer__nav a:hover { color: var(--text-on-dark); background: var(--navy-800); }

/* ==========================================================================
   Enhanced motion: only with html.oc-motion (JS on, motion allowed).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .oc-faq__item summary::after { transition: transform var(--m-base) var(--e-out); }

  /* Scroll reveals, in sequence (--i). */
  .oc-motion [data-reveal] {
    transition: opacity var(--m-reveal) var(--e-out), translate var(--m-reveal) var(--e-out), clip-path var(--m-reveal) var(--e-out);
    transition-delay: calc(var(--i, 0) * var(--m-stagger));
  }
  .oc-motion [data-reveal]:not(.is-in) { opacity: 0; translate: 0 28px; }
  /* Capability tiles wipe up from their bottom edge; the open state still shows the shadow. */
  .oc-motion .oc-cap[data-reveal] { clip-path: inset(-40px -40px -64px -40px round 22px); }
  .oc-motion .oc-cap[data-reveal]:not(.is-in) { clip-path: inset(14% 0 0 0 round 22px); }

  /* Hero backdrop drifts slower than the page (--sy). */
  .oc-motion .oc-hero__glow { transform: translate3d(0, calc(var(--sy, 0) * 90px), 0); }
  .oc-motion .oc-hero__lines { transform: translate3d(0, calc(var(--sy, 0) * 40px), 0); }

  /* Flow: the path draws with scroll (--p), steps light up as it reaches them. */
  .oc-motion .oc-flow__line { stroke-dashoffset: calc(1 - var(--p, 1)); transition: stroke-dashoffset var(--m-scroll) linear; }
  .oc-motion .oc-flow__nodes::after { transform: scaleY(var(--p, 1)); transition: transform var(--m-scroll) linear; }

  /* Tour rail fills to the active step (--fill). */
  .oc-motion .oc-tour__steps::after { transform: scaleY(var(--fill, 1)); transition: transform var(--m-scene) var(--e-move); }
  .oc-motion .oc-flow__pin { transition: fill var(--m-base) var(--e-out); }
  .oc-motion .oc-flow__pin:not(.is-on) { fill: var(--navy-800); }
  .oc-motion .oc-flow__node:not(.is-on) .oc-flow__what { color: var(--text-subtle-on-dark); }
  .oc-motion .oc-flow__map.is-done .oc-flow__glint { animation: oc-glint 1600ms var(--e-move) both; }

  /* Sheets widen from 94% to full width as they arrive (--k). */
  .oc-motion .oc-sheet::before { transform: scaleX(calc(0.94 + 0.06 * var(--k, 1))); transition: transform var(--m-scroll) linear; }

  /* Card pieces play once when their card is revealed. */
  .oc-motion .oc-plan .oc-b.is-on { transition: background-color var(--m-base) var(--e-out) calc(650ms + var(--r, 0) * 140ms); }
  .oc-motion .oc-cap.is-in .oc-rot__name:not(.oc-rot__name--lock) { animation: oc-shift 700ms var(--e-move) 600ms both; }
  .oc-motion .oc-cap.is-in .oc-rot__name--wrap { animation-name: oc-wrap; }
  .oc-motion .oc-art--paper .oc-paper { transition: rotate 900ms var(--e-out) 300ms, translate 900ms var(--e-out) 300ms; }
  .oc-motion .oc-cap:not(.is-in) .oc-art--paper .oc-paper { rotate: 3deg; translate: 0 26px; }
  .oc-motion .oc-school { transition: opacity var(--m-reveal) var(--e-out), translate var(--m-reveal) var(--e-out); }
  .oc-motion .oc-school + .oc-school { transition-delay: 120ms; }
  .oc-motion .oc-cap:not(.is-in) .oc-school { opacity: 0; translate: 0 10px; }
}
@keyframes oc-glint { from { stroke-dashoffset: 0.04; } to { stroke-dashoffset: -1; } }

/* Hero story, looped by landing.js through data-phase on .oc-week:
   reset → build (the week fills) → absent (a lesson needs cover) → duty (that day's duty teachers)
   → pick (one of them takes the lesson) → done (cover sheet ready). Without JS it rests on "done". */
@media (prefers-reduced-motion: no-preference) {
  .oc-motion .oc-week .oc-grid__cell > b {
    transition:
      opacity 600ms var(--e-out) calc(var(--d, 0) * 100ms),
      translate 600ms var(--e-out) calc(var(--d, 0) * 100ms),
      box-shadow var(--m-base) var(--e-out) calc(var(--d, 0) * 16ms);
  }
  .oc-motion .oc-week[data-phase="reset"] .oc-grid__cell > b { opacity: 0; translate: 0 -8px; transition-delay: 0ms; }
  .oc-motion .oc-week:is([data-phase="reset"], [data-phase="build"], [data-phase="absent"]) .oc-grid__cell--pick > b {
    box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .oc-motion .oc-week[data-phase="duty"] .oc-grid__cell--duty > b { box-shadow: 0 0 0 2px var(--blue-300), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  .oc-motion .oc-week .oc-grid__focus { transition: opacity var(--m-reveal) var(--e-move); }
  .oc-motion .oc-week:is([data-phase="duty"], [data-phase="pick"]) .oc-grid__focus { opacity: 1; }

  .oc-motion .oc-assign { transition: opacity var(--m-reveal) var(--e-out), translate var(--m-reveal) var(--e-out); }
  .oc-motion .oc-week:is([data-phase="reset"], [data-phase="build"]) .oc-assign { opacity: 0; translate: 0 10px; }
  .oc-motion .oc-assign__link::before { transition: transform 600ms var(--e-out); }
  .oc-motion .oc-week:is([data-phase="reset"], [data-phase="build"], [data-phase="absent"], [data-phase="duty"]) .oc-assign__link::before { transform: scaleY(0); }
  .oc-motion .oc-assign__slot > b { transition: opacity 500ms var(--e-out) 450ms, scale 500ms var(--e-out) 450ms; }
  .oc-motion .oc-week:is([data-phase="reset"], [data-phase="build"], [data-phase="absent"], [data-phase="duty"]) .oc-assign__slot > b {
    opacity: 0; scale: 0.9; transition-delay: 0ms;
  }
  .oc-motion .oc-assign__doc { transition: background-color var(--m-base) var(--e-out), color var(--m-base) var(--e-out); }
  .oc-motion .oc-week:not([data-phase="done"]) .oc-assign__doc { background: rgba(255, 255, 255, 0.1); color: var(--text-muted-on-dark); }

  /* Rail: past beats stay lit, the current one is white, the rest wait. */
  .oc-motion .oc-week__stage { transition: color var(--m-base) var(--e-out); }
  .oc-motion .oc-week__stage::before { transition: background-color var(--m-base) var(--e-out), box-shadow var(--m-base) var(--e-out), scale var(--m-base) var(--e-out); }
  .oc-motion .oc-week__rail::after { transition: transform var(--m-reveal) var(--e-move); }
  .oc-motion .oc-week:is([data-phase="reset"], [data-phase="build"]) .oc-week__rail::after { transform: scaleX(0); }
  .oc-motion .oc-week[data-phase="absent"] .oc-week__rail::after { transform: scaleX(0.333); }
  .oc-motion .oc-week:is([data-phase="duty"], [data-phase="pick"]) .oc-week__rail::after { transform: scaleX(0.667); }
  .oc-motion .oc-week[data-phase="reset"] .oc-week__stage,
  .oc-motion .oc-week[data-phase="build"] .oc-week__stage:nth-child(n + 2),
  .oc-motion .oc-week[data-phase="absent"] .oc-week__stage:nth-child(n + 3),
  .oc-motion .oc-week:is([data-phase="duty"], [data-phase="pick"]) .oc-week__stage:nth-child(4) { color: var(--text-subtle-on-dark); }
  .oc-motion .oc-week[data-phase="reset"] .oc-week__stage::before,
  .oc-motion .oc-week[data-phase="build"] .oc-week__stage:nth-child(n + 2)::before,
  .oc-motion .oc-week[data-phase="absent"] .oc-week__stage:nth-child(n + 3)::before,
  .oc-motion .oc-week:is([data-phase="duty"], [data-phase="pick"]) .oc-week__stage:nth-child(4)::before {
    background: rgba(143, 176, 255, 0.25); box-shadow: 0 0 0 4px rgba(143, 176, 255, 0);
  }
  .oc-motion .oc-week[data-phase="build"] .oc-week__stage:nth-child(1),
  .oc-motion .oc-week[data-phase="absent"] .oc-week__stage:nth-child(2),
  .oc-motion .oc-week:is([data-phase="duty"], [data-phase="pick"]) .oc-week__stage:nth-child(3),
  .oc-motion .oc-week[data-phase="done"] .oc-week__stage:nth-child(4) { color: var(--white); }
  .oc-motion .oc-week[data-phase="build"] .oc-week__stage:nth-child(1)::before,
  .oc-motion .oc-week[data-phase="absent"] .oc-week__stage:nth-child(2)::before,
  .oc-motion .oc-week:is([data-phase="duty"], [data-phase="pick"]) .oc-week__stage:nth-child(3)::before,
  .oc-motion .oc-week[data-phase="done"] .oc-week__stage:nth-child(4)::before { scale: 1.3; }
}
@keyframes oc-scan {
  0% { opacity: 1; top: -40px; }
  85% { opacity: 1; top: 100%; }
  100% { opacity: 0; top: 100%; }
}
@keyframes oc-shift { from { translate: 0 var(--from-y, 0); } }
@keyframes oc-wrap {
  0% { opacity: 0; translate: 0 var(--from-y, 0); }
  100% { opacity: 1; translate: 0 0; }
}

/* Hero tilt follows a fine pointer (--tx, --ty) on wide screens. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .oc-motion .oc-week {
    transform: rotateX(calc(var(--rx) - var(--ty, 0) * 3deg)) rotateY(calc(var(--ry) + var(--tx, 0) * 4deg));
    transition: transform var(--m-follow) var(--e-out);
  }
}

/* ---------- Tour as sticky storytelling (wide screens, motion allowed) ----------
   Scroll picks the scene (data-state); inside it a short scenario loops (data-phase, landing.js). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .oc-motion .oc-tour { --stage-h: min(480px, 68vh); }
  .oc-motion .oc-tour__steps { gap: 0; }
  .oc-motion .oc-tour__step { --pad: clamp(8px, 0.9vh, 12px); padding-block: var(--pad); }
  .oc-motion .oc-tour__num { top: calc(var(--pad) - 2px); }
  .oc-motion .oc-tour__step:not(.is-active) .oc-tour__num { color: var(--text-muted-on-dark); }
  .oc-motion .oc-tour__step.is-active .oc-tour__num { color: var(--gold-400); box-shadow: inset 0 0 0 1.5px var(--gold-400); }

  .oc-motion .oc-tour__stage {
    position: sticky; align-self: start;
    top: calc(var(--topbar-h) + (100vh - var(--topbar-h) - var(--stage-h)) / 2);
    top: calc(var(--topbar-h) + (100svh - var(--topbar-h) - var(--stage-h)) / 2);
  }
  .oc-motion .oc-scene { position: relative; height: var(--stage-h); }
  .oc-motion .oc-scene > * {
    position: absolute;
    transition: opacity var(--m-scene) var(--e-move), translate var(--m-scene) var(--e-move), scale var(--m-scene) var(--e-move), rotate var(--m-scene) var(--e-move);
  }
  .oc-motion .oc-scene__doc, .oc-motion .oc-scene__plan, .oc-motion .oc-scene__panel,
  .oc-motion .oc-scene__paper, .oc-motion .oc-scene__cover { display: grid; }
  .oc-motion .oc-scene__duty { left: 0; right: 32px; top: 24px; }
  /* Page behind, preview overlapping its right edge: fits stages from about 500px up. */
  .oc-motion .oc-scene__doc { left: 4%; top: 56px; width: 200px; height: 270px; padding: 28px 22px; gap: 12px; }
  .oc-motion .oc-scene__plan { left: calc(4% + 172px); top: 112px; }
  .oc-motion .oc-scene__plan .oc-plan__row { grid-template-columns: 64px repeat(6, 26px); }
  .oc-motion .oc-scene__panel { right: 0; bottom: 8px; width: 300px; box-shadow: 0 32px 60px -30px rgba(2, 6, 16, 0.95), 0 0 0 1px rgba(143, 176, 255, 0.24); }
  .oc-motion .oc-scene__paper { left: 4%; bottom: 0; width: 300px; rotate: -1.5deg; }
  .oc-motion .oc-scene__cover { right: 0; bottom: 28px; width: 270px; rotate: 1.5deg; }

  /* 1 · Import (a: the page is read, b: the preview fills, c: hold). */
  .oc-motion .oc-scene:not([data-state="1"]) .oc-scene__doc { opacity: 0; translate: -24px 16px; }
  .oc-motion .oc-scene:not([data-state="1"]) .oc-scene__plan { opacity: 0; translate: 24px 16px; }
  .oc-motion .oc-scene[data-state="1"] .oc-scene__duty { opacity: 0; translate: 0 36px; scale: 0.97; }
  .oc-motion .oc-scene[data-state="1"][data-phase="a"] .oc-doc__scan { animation: oc-scan 2000ms var(--e-move) 150ms both; }
  .oc-motion .oc-scene:is(:not([data-state="1"]), [data-phase="a"]) .oc-plan .oc-b.is-on { background-color: rgba(143, 176, 255, 0.12); }

  /* 2 · Placement (z: empty, a: names settle, b: one cell is typed in, c: hold). */
  .oc-motion .oc-scene .oc-grid__cell > b {
    transition: opacity 500ms var(--e-out), translate 500ms var(--e-out), box-shadow var(--m-base) var(--e-out);
    transition-delay: calc(var(--d, 0) * 70ms);
  }
  .oc-motion .oc-scene:is([data-state="1"], [data-state="2"][data-phase="z"]) .oc-grid__cell > b { opacity: 0; translate: 0 -8px; transition-delay: 0ms; }
  .oc-motion .oc-scene[data-state="2"]:is([data-phase="z"], [data-phase="a"]) .oc-grid__cell--edit > b { opacity: 0; translate: 0 -8px; }
  .oc-motion .oc-scene[data-state="2"][data-phase="b"] .oc-grid__cell--edit > b {
    display: flex; justify-content: center; align-items: center; transition-delay: 0ms;
    box-shadow: 0 0 0 2px var(--blue-300), inset 0 0 0 1px rgba(143, 176, 255, 0.2);
  }
  .oc-motion .oc-scene[data-state="2"][data-phase="b"] .oc-grid__cell--edit > b::after { content: ""; width: 1.5px; height: 14px; margin-left: 3px; background: var(--white); }
  .oc-motion .oc-scene .oc-state > span, .oc-motion .oc-scene .oc-grid__focus { transition: opacity var(--m-base) var(--e-out); }
  .oc-motion .oc-scene:is([data-state="2"], [data-state="3"]) .oc-state__a { opacity: 1; }
  .oc-motion .oc-scene:is([data-state="2"], [data-state="3"]) .oc-state__b { opacity: 0; }

  /* 3 · Lesson cover (a: the lesson without its teacher, b: that day's duty teachers listed, c: one assigned). */
  .oc-motion .oc-scene:not([data-state="3"]) .oc-scene__panel { opacity: 0; translate: 0 28px; }
  .oc-motion .oc-scene__panel :is(.oc-pick__group, .oc-pick__row) {
    transition: opacity var(--m-reveal) var(--e-out), translate var(--m-reveal) var(--e-out), box-shadow var(--m-base) var(--e-out), background-color var(--m-base) var(--e-out);
  }
  .oc-motion .oc-scene__panel > :nth-child(3) { transition-delay: 150ms; }
  .oc-motion .oc-scene__panel > :nth-child(4) { transition-delay: 300ms; }
  .oc-motion .oc-scene__panel > :nth-child(5) { transition-delay: 450ms; }
  .oc-motion .oc-scene__panel > :nth-child(6) { transition-delay: 600ms; }
  .oc-motion .oc-scene[data-state="3"][data-phase="a"] .oc-scene__panel :is(.oc-pick__group, .oc-pick__row) { opacity: 0; translate: 0 8px; transition-delay: 0ms; }
  .oc-motion .oc-scene:not([data-phase="c"]) .oc-scene__panel .oc-pick__row--on { background-color: rgba(143, 176, 255, 0.06); box-shadow: none; }
  .oc-motion .oc-scene:not([data-phase="c"]) .oc-scene__panel .oc-pick__row--on .oc-pick__name { color: var(--text-on-dark); }
  .oc-motion .oc-scene__panel .oc-pick__row--on .oc-pick__name { transition: color var(--m-base) var(--e-out); }
  .oc-motion .oc-scene[data-state="3"]:is([data-phase="b"], [data-phase="c"]) .oc-grid__focus { opacity: 1; }
  .oc-motion .oc-scene[data-state="3"][data-phase="b"] .oc-grid__cell--duty > b { box-shadow: 0 0 0 2px var(--blue-300); }
  .oc-motion .oc-scene[data-state="3"][data-phase="c"] .oc-grid__cell--pick > b { box-shadow: 0 0 0 2px var(--gold-400), 0 12px 26px -12px rgba(232, 184, 74, 0.7); }

  /* 4 · Output (a: the printed schedule, b: the cover sheet joins it, c: hold). */
  .oc-motion .oc-scene:not([data-state="4"]) .oc-scene__paper { opacity: 0; translate: 0 48px; rotate: 0deg; }
  .oc-motion .oc-scene:is(:not([data-state="4"]), [data-phase="a"]) .oc-scene__cover { opacity: 0; translate: 0 40px; rotate: 0deg; }
}

/* ---------- Laptop (≤ 1100px) ---------- */
@media (max-width: 1100px) {
  .oc-navlink--wide { display: none; }
  .oc-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .oc-grid { --cell-h: 36px; --gap: 5px; }
  .oc-grid__cell > b, .oc-grid__place { font-size: 12px; }
  .oc-assign { column-gap: 5px; }
  .oc-assign__absent, .oc-assign__slot { height: 36px; }
}

/* ---------- Tablet (≤ 1023px): tour stacks, the scene follows the steps ---------- */
@media (max-width: 1023px) {
  .oc-tour__body { grid-template-columns: minmax(0, 1fr); }
  .oc-tour__stage { max-width: 640px; }
}

/* ---------- Tablet portrait (≤ 900px): one column; the flow becomes a vertical line ---------- */
@media (max-width: 900px) {
  .oc-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .oc-hero__copy { max-width: 640px; }
  .oc-hero__visual { max-width: 640px; perspective: none; }
  .oc-week { transform: none; }
  .oc-compare__grid, .oc-daily__inner { grid-template-columns: minmax(0, 1fr); }
  .oc-benefits__grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

  .oc-flow__map { display: block; }
  .oc-flow__legend, .oc-flow__svg { display: none; }
  .oc-flow__nodes { position: relative; display: grid; gap: 26px; padding-left: 40px; }
  .oc-flow__nodes::before, .oc-flow__nodes::after {
    content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
    background: rgba(143, 176, 255, 0.16);
  }
  .oc-flow__nodes::after { background: var(--blue-300); transform-origin: top center; }
  .oc-flow__node, .oc-flow__node--you { position: relative; grid-row: auto; grid-column: auto; padding: 0; text-align: left; }
  .oc-flow__node:nth-child(n) { grid-column: auto; }
  .oc-flow__node::before {
    content: ""; position: absolute; left: -40px; top: 2px; z-index: 1; width: 16px; height: 16px; border-radius: 50%;
    background: var(--blue-300); box-shadow: 0 0 0 4px var(--navy-950);
  }
  .oc-flow__node--you::before { background: var(--gold-400); }
  .oc-flow__who {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: block; margin-bottom: 2px;
    font-size: 11.5px; font-weight: 700; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-300);
  }
  .oc-flow__node--you .oc-flow__who { color: var(--gold-400); }
  .oc-flow__what { font-size: 16px; text-wrap: pretty; }
  .oc-motion .oc-flow__node:not(.is-on)::before { background: var(--navy-800); }

  .oc-caps__grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .oc-faq__inner, .oc-contact__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .oc-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .oc-footer__nav { margin: 0 0 0 -12px; }
}

/* ---------- Mobile (≤ 640px): simpler visual, CTA first ---------- */
@media (max-width: 640px) {
  html { scroll-padding-top: calc(var(--topbar-h-sm) + 12px); }
  .oc-tour { padding-block: 56px; }
  .oc-topbar__inner { height: var(--topbar-h-sm); gap: 12px; }
  .oc-mark { width: 28px; height: 28px; }
  .oc-brandlink { gap: 10px; }
  .oc-brandlink__name { font-size: 17px; }
  .oc-navlink--mid { display: none; }
  .oc-topbar__nav { gap: 6px; }
  .oc-topbar__nav .oc-btn { margin-left: 0; padding: 0 12px; }
  .oc-topbar__nav .oc-btn--sm { font-size: 13px; }

  .oc-hero { padding-block: 36px 64px; }
  .oc-hero__inner { gap: 44px; }
  .oc-eyebrow { margin-bottom: 20px; }
  .oc-hero__lead { margin-top: 20px; }
  .oc-hero__actions { margin-top: 28px; }
  .oc-hero__actions .oc-btn { flex: 1 1 100%; }
  .oc-hero__title { font-size: clamp(34px, 9vw, 44px); }
  .oc-facts { flex-direction: column; align-items: flex-start; gap: 6px; }
  .oc-facts li + li::before { display: none; }
  /* The week shows Wednesday to Friday; Thursday's duty teachers and the cover stay in view. */
  .oc-week__plane { padding: 14px; border-radius: 18px; }
  .oc-week__range { display: none; }
  .oc-grid { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); }
  .oc-grid__row > :nth-child(2), .oc-grid__row > :nth-child(3) { display: none; }
  .oc-grid__focus { grid-column: 3; }
  .oc-assign { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); }
  .oc-assign__head { grid-column: 1 / 3; }
  .oc-assign__link, .oc-assign__slot { grid-column: 3; }
  .oc-assign__doc { grid-column: 4; }
  .oc-assign__absent { grid-column: 2; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 0 6px; }
  .oc-week__stage { font-size: 11px; }

  .oc-caps__grid { gap: 16px; }
  .oc-compare__grid { gap: 14px; }
  .oc-compare__panel { padding: 24px; }
  .oc-benefits__grid { gap: 12px; }
  .oc-benefit { padding: 24px; }
  .oc-daily__steps li { padding-left: 48px; }
  .oc-cap__art { height: 184px; padding: 16px; }
  .oc-tour__stage { display: none; }
  .oc-tour__steps { gap: 22px; }
}
@media (max-width: 480px) {
  .oc-topbar .oc-brandlink__name { font-size: 15px; }
}
@media (max-width: 360px) {
  .oc-topbar .oc-brandlink__name { display: none; }
}
@media (max-width: 400px) {
  .oc-form__row { grid-template-columns: minmax(0, 1fr); }
}