/* Quantum Cinema: flow sections (Code -> Quantum, AI Tutor). Prefix: fl-. Scoped under .landing-pro. */

/* =====================================================================
   CODE -> QUANTUM
   ===================================================================== */
.landing-pro .fl-card {
  --fl-code-h: calc(min(var(--fl-lines, 24), 20) * 22px + 28px);
  display: grid; gap: 0; overflow: hidden; padding: 0;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas: "tabs run" "code viz";
  border-radius: 20px;
}
.landing-pro .fl-toolbar { grid-area: tabs; display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 0; }
.landing-pro .fl-run { grid-area: run; justify-self: end; align-self: center; margin: 8px 14px; min-width: 176px; border-bottom: 0; }
.landing-pro .fl-run.is-running { opacity: 0.85; }
.landing-pro .fl-run svg { flex: none; }
.landing-pro .fl-card::before { content: ''; grid-area: run; border-bottom: 1px solid var(--line); z-index: 0; pointer-events: none; }

.landing-pro .fl-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--cin-veil); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.landing-pro .fl-tabs::-webkit-scrollbar { display: none; }
.landing-pro .fl-tab {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 550 14px/1 Inter, system-ui, sans-serif; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap;
  transition: background var(--cin-t-micro) var(--cin-ease), color var(--cin-t-micro) var(--cin-ease);
}
.landing-pro .fl-tab:hover { color: var(--ink); background: var(--cin-veil-2); }
.landing-pro .fl-tab[aria-selected="true"] { color: #fff; background: var(--brand); box-shadow: 0 1px 2px var(--cin-glow); }
.landing-pro .fl-tab:focus-visible, .landing-pro .fl-code:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- code pane ------------------------------------------------------- */
.landing-pro .fl-pane { min-width: 0; }
.landing-pro .fl-codepane {
  /* the code pane is a dark editor surface on the light page; its own variables, all >= 4.5:1 on --ed-bg */
  --ed-bg: #0F1424; --ed-ink: #E4E9F7; --ed-dim: #9AA6C4; --ed-no: #8592B4; --ed-line: rgba(255, 255, 255, 0.10);
  --ed-str: #F3D9A4; --ed-kw: #C9B4FF; --ed-num: #F7ACD0; --ed-fn: #9EBCFF; --ed-cls: #7FE0BC; --ed-ok: #4ADE9F; --ed-hot: rgba(111, 125, 232, 0.22); --ed-run: #9EBCFF;
  grid-area: code; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--ed-bg); color: var(--ed-ink);
}
.landing-pro .fl-panehead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 6px; }
.landing-pro .fl-file { font-size: 13px; color: var(--ed-ink); }
.landing-pro .fl-tag { font-size: 12px; color: var(--ed-dim); }
.landing-pro .fl-code {
  flex: 1 1 0; min-height: 320px; overflow: auto; padding: 8px 0 12px; border-radius: 0;
  font: 400 13.5px/22px "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; color: var(--ed-ink); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.landing-pro .fl-ln { position: relative; display: flex; align-items: flex-start; height: 22px; min-width: max-content; width: 100%; padding: 0 12px 0 0; white-space: pre; }
.landing-pro .fl-lno { flex: none; width: 40px; padding-right: 12px; text-align: right; color: var(--ed-no); font-style: normal; user-select: none; }
.landing-pro .fl-lt { flex: 1 0 auto; }
.landing-pro .fl-ck { flex: none; width: 16px; height: 16px; margin: 3px 0 0 12px; opacity: 0; border-radius: 50%; }
.landing-pro .fl-ln::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
.landing-pro .fl-ln.k-gate { cursor: pointer; }
.landing-pro .fl-ln.k-gate:hover, .landing-pro .fl-ln.is-hot { background: var(--ed-hot); }
.landing-pro .fl-ln.is-hot::before { background: var(--ed-run); }
.landing-pro .fl-ln.is-run { background: linear-gradient(90deg, rgba(111, 125, 232, 0.42), rgba(109, 75, 216, 0.14) 70%, transparent); animation: fl-linepulse 520ms var(--cin-ease); }
.landing-pro .fl-ln.is-run::before { background: var(--ed-run); box-shadow: 0 0 10px var(--ed-run); }
.landing-pro .fl-ln.is-done .fl-ck { opacity: 1; background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 5 8.9 9.6 3.6' fill='none' stroke='%233DDC97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: opacity var(--cin-t-comp) var(--cin-ease); }
.landing-pro .fl-ln.is-run .fl-ck { opacity: 0; }
@keyframes fl-linepulse { from { background-color: rgba(158, 188, 255, 0.45); } to { background-color: transparent; } }

.landing-pro .fl-t-com { color: var(--ed-dim); font-style: italic; }
.landing-pro .fl-t-str { color: var(--ed-str); }
.landing-pro .fl-t-kw { color: var(--ed-kw); }
.landing-pro .fl-t-num { color: var(--ed-num); }
.landing-pro .fl-t-fn { color: var(--ed-fn); }
.landing-pro .fl-t-cls { color: var(--ed-cls); }
.landing-pro .fl-t-id { color: var(--ed-ink); }
.landing-pro .fl-ln.k-comment .fl-t-p { color: var(--ed-dim); }

.landing-pro .fl-out { display: flex; gap: 12px; align-items: baseline; padding: 10px 16px 14px; border-top: 1px solid var(--ed-line); min-height: 46px; opacity: 0.75; transition: opacity var(--cin-t-comp) var(--cin-ease); }
.landing-pro .fl-out.is-on { opacity: 1; }
.landing-pro .fl-out .cin-label { color: var(--ed-dim); }
.landing-pro .fl-out-t { font: 500 13.5px/1.4 "JetBrains Mono", ui-monospace, Menlo, monospace; color: var(--ed-ok); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.landing-pro .fl-out.is-on .fl-out-t { animation: fl-in 420ms var(--cin-ease); }
@keyframes fl-in { from { opacity: 0; transform: translate3d(0, 4px, 0); } to { opacity: 1; transform: none; } }

/* ---- visualization pane ---------------------------------------------- */
.landing-pro .fl-viz { grid-area: viz; display: flex; flex-direction: column; gap: 0; padding: 14px 16px 12px; position: relative; }
.landing-pro .fl-rail { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; position: relative; }
.landing-pro .fl-rail::before { content: ''; position: absolute; left: 6px; right: 6px; top: 5px; height: 1px; background: var(--line-2); }
.landing-pro .fl-rstep { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); transition: color var(--cin-t-comp) var(--cin-ease); }
.landing-pro .fl-rdot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--cin-stroke); background: var(--cin-panel); transition: background var(--cin-t-comp) var(--cin-ease), border-color var(--cin-t-comp) var(--cin-ease), box-shadow var(--cin-t-comp) var(--cin-ease); }
.landing-pro .fl-rstep.is-lit { color: var(--ink); }
.landing-pro .fl-rstep.is-lit .fl-rdot { background: var(--brand); border-color: var(--cin-blue-soft); box-shadow: 0 0 0 3px var(--cin-glow); }

.landing-pro .fl-sect { padding: 10px 0 12px; border-top: 1px solid var(--line); }
.landing-pro .fl-sect:first-of-type { border-top: 0; }
.landing-pro .fl-phead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.landing-pro .fl-hint { font-size: 12px; color: var(--muted); text-align: right; }
.landing-pro .fl-dual .fl-phead { flex-direction: column; gap: 3px; }
.landing-pro .fl-dual .fl-hint { text-align: left; }
.landing-pro .fl-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--line); }
.landing-pro .fl-dual > .fl-sect { border-top: 0; min-width: 0; }
.landing-pro .fl-cap { min-height: 32px; margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }

.landing-pro .fl-circbox { height: 158px; display: flex; align-items: center; justify-content: center; }
.landing-pro .fl-circ { width: 100%; height: 100%; max-height: 158px; overflow: visible; }
.landing-pro .fl-wire { stroke: var(--cin-stroke); stroke-width: 1.4; }
.landing-pro .fl-wlab { fill: var(--muted); font: 500 11px "JetBrains Mono", ui-monospace, monospace; }
.landing-pro .fl-op { transition: opacity var(--cin-t-comp) var(--cin-ease), transform var(--cin-t-comp) var(--cin-ease); transform-box: fill-box; transform-origin: center; }
.landing-pro .fl-op.is-ghost { opacity: 0.3; }
.landing-pro .fl-op.is-on { opacity: 1; }
.landing-pro .fl-op.is-new { animation: fl-drop 480ms var(--cin-ease); }
@keyframes fl-drop { from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.85); } to { opacity: 1; transform: none; } }
.landing-pro .fl-box { fill: var(--cin-panel); stroke: var(--cin-blue); stroke-width: 1.5; }
.landing-pro .fl-boxt { fill: var(--cin-blue); font: 600 12.5px "JetBrains Mono", ui-monospace, monospace; }
.landing-pro .fl-boxsub { fill: var(--cin-gold); font: 500 10.5px "JetBrains Mono", ui-monospace, monospace; }
.landing-pro .fl-ctrl { fill: var(--cin-blue); }
.landing-pro .fl-xt { fill: var(--cin-panel); stroke: var(--cin-blue); stroke-width: 1.6; }
.landing-pro .fl-xtp, .landing-pro .fl-swapx { stroke: var(--cin-blue); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.landing-pro .fl-link { stroke: var(--cin-blue); stroke-width: 1.6; }
.landing-pro .fl-halo { fill: transparent; stroke: transparent; stroke-width: 1.4; transition: fill var(--cin-t-micro) var(--cin-ease), stroke var(--cin-t-micro) var(--cin-ease); }
.landing-pro .fl-op.is-hot .fl-halo { fill: var(--cin-glow); stroke: var(--cin-blue); }
.landing-pro .fl-op.is-hot .fl-box { fill: var(--brand-50); stroke: var(--brand); }
.landing-pro .fl-op { cursor: pointer; }

/* bars */
.landing-pro .fl-bars { display: grid; grid-template-columns: repeat(var(--fl-n, 2), minmax(0, 1fr)); gap: 6px; align-items: end; }
.landing-pro .fl-bars[data-dense="true"] { gap: 3px; }
.landing-pro .fl-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.landing-pro .fl-plot { position: relative; width: 100%; max-width: 44px; height: 84px; border-bottom: 1px solid var(--line-2); }
.landing-pro .fl-plot-amp { border-bottom: 0; }
.landing-pro .fl-plot i { position: absolute; left: 22%; right: 22%; border-radius: 3px; will-change: transform; transition: transform 320ms var(--cin-ease); }
.landing-pro .fl-plot-prob i, .landing-pro .fl-plot-res i { bottom: 0; top: 0; transform-origin: 50% 100%; transform: scaleY(0); background: linear-gradient(180deg, var(--cin-blue-soft), var(--cin-blue)); }
.landing-pro .fl-plot-res i { background: var(--cin-violet); transition-duration: 0ms; }
.landing-pro .fl-plot-amp .fl-up { top: 0; height: 50%; transform-origin: 50% 100%; transform: scaleY(0); background: linear-gradient(180deg, var(--cin-blue-soft), var(--cin-blue)); }
.landing-pro .fl-plot-amp .fl-dn { top: 50%; height: 50%; transform-origin: 50% 0; transform: scaleY(0); background: var(--cin-magenta); }
.landing-pro .fl-plot-amp .fl-up.is-phase { background: var(--cin-violet); }
.landing-pro .fl-zero { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.landing-pro .fl-tick { position: absolute; left: 6%; right: 6%; bottom: 0; height: 0; border-top: 1.5px dashed var(--cin-gold); opacity: 0; pointer-events: none; }
.landing-pro .fl-val { margin-top: 5px; font-size: 11.5px; line-height: 1.2; color: var(--ink); text-align: center; min-height: 14px; }
.landing-pro .fl-val.is-zero { color: var(--muted); }
.landing-pro .fl-lab { margin-top: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.landing-pro .fl-bars[data-dense="true"] .fl-val { font-size: 10.5px; }
.landing-pro .fl-bars[data-dense="true"] .fl-lab { font-size: 10px; letter-spacing: -0.02em; }
.landing-pro .fl-probsect.is-flash .fl-bars { animation: fl-flash 700ms var(--cin-ease); }
@keyframes fl-flash { 0% { filter: saturate(1.8) brightness(0.9); } 100% { filter: none; } }

.landing-pro .fl-resplot { position: relative; min-height: 130px; }
.landing-pro .fl-resplot .fl-plot { height: 92px; }
.landing-pro .fl-pending { position: absolute; inset: 0 0 34px; display: grid; place-items: center; text-align: center; font-size: 13px; color: var(--muted); pointer-events: none; }
.landing-pro .fl-pending[hidden] { display: none; }
.landing-pro .fl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 30px; opacity: 0; transform: translate3d(0, 4px, 0); transition: opacity var(--cin-t-comp) var(--cin-ease), transform var(--cin-t-comp) var(--cin-ease); }
.landing-pro .fl-chips.is-on { opacity: 1; transform: none; }
.landing-pro .fl-chip { font-size: 12px; min-height: 28px; }
.landing-pro .fl-chip-time { color: color-mix(in srgb, var(--cin-good) 78%, var(--ink)); border-color: var(--cin-good); }
.landing-pro .fl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.landing-pro .fl-note { max-width: 78ch; margin: 16px 2px 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ---- mobile: code above, visualisation below, sticky Run ------------- */
@media (max-width: 960px) {
  .landing-pro .fl-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "code" "viz" "run"; overflow: visible; }
  .landing-pro .fl-card::before { display: none; }
  .landing-pro .fl-toolbar { border-right: 0; padding: 10px; overflow: hidden; border-radius: 20px 20px 0 0; }
  .landing-pro .fl-codepane { border-right: 0; border-bottom: 1px solid var(--line); }
  .landing-pro .fl-code { flex: none; height: min(var(--fl-code-h), 320px); min-height: 0; }
  .landing-pro .fl-run { position: sticky; bottom: 12px; z-index: 5; justify-self: center; width: calc(100% - 28px); margin: 0 14px 14px; box-shadow: 0 10px 28px var(--cin-veil-2), 0 6px 18px var(--cin-glow); }
}
@media (max-width: 520px) {
  .landing-pro .fl-viz { padding: 12px 12px 8px; }
  .landing-pro .fl-rstep { font-size: 9px; letter-spacing: 0.02em; }
  .landing-pro .fl-dual { grid-template-columns: 1fr; }
  .landing-pro .fl-dual > .fl-sect + .fl-sect { border-top: 1px solid var(--line); }
  .landing-pro .fl-circbox { height: 140px; }
  .landing-pro .fl-plot { height: 64px; }
  .landing-pro .fl-resplot .fl-plot { height: 76px; }
  .landing-pro .fl-tab { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-pro .fl-ln.is-run, .landing-pro .fl-op.is-new, .landing-pro .fl-probsect.is-flash .fl-bars, .landing-pro .fl-out.is-on .fl-out-t { animation: none !important; }
  .landing-pro .fl-plot i { transition: none !important; }
}

/* =====================================================================
   AI TUTOR ("reads your experiment")
   ===================================================================== */
.landing-pro .tu-panel { padding: clamp(16px, 2.4vw, 28px); border-radius: 20px; }
.landing-pro .tu-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 18px; }
.landing-pro .tu-tag { color: var(--cin-gold); border-color: var(--line-2); background: var(--cin-veil); font-size: 12px; letter-spacing: 0.02em; }
.landing-pro .tu-asks { display: flex; flex-wrap: wrap; gap: 8px; }
.landing-pro .tu-ask {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--cin-panel);
  color: var(--ink-2); font: 550 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer; text-align: left;
  transition: border-color var(--cin-t-micro) var(--cin-ease), background var(--cin-t-micro) var(--cin-ease), color var(--cin-t-micro) var(--cin-ease);
}
.landing-pro .tu-ask:hover { color: var(--ink); background: var(--cin-veil); border-color: var(--cin-stroke); }
.landing-pro .tu-ask[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); background: var(--brand-50); }
.landing-pro .tu-ask:focus-visible, .landing-pro .tu-replay:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.landing-pro .tu-bubble {
  display: inline-flex; flex-direction: column; gap: 6px; max-width: min(100%, 460px); margin: 0 0 18px; padding: 12px 16px 14px;
  border: 1px solid var(--cin-blue-soft); border-radius: 16px 16px 16px 4px; background: var(--brand-50);
}
.landing-pro .tu-bubble-t { font-size: 17px; line-height: 1.4; color: var(--ink); font-weight: 550; letter-spacing: -0.01em; }

.landing-pro .tu-tutorrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 4px; }
.landing-pro .tu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--cin-glow); }
.landing-pro .tu-flow { min-height: 306px; display: grid; grid-template-columns: minmax(0, 1.12fr) 64px minmax(0, 0.95fr) 64px minmax(0, 1.3fr); align-items: stretch; }
.landing-pro .tu-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--cin-panel-2); opacity: 0.5; transition: opacity var(--cin-t-sect) var(--cin-ease), border-color var(--cin-t-sect) var(--cin-ease), box-shadow var(--cin-t-sect) var(--cin-ease);
}
.landing-pro .tu-card.is-on { opacity: 1; background: var(--cin-panel); border-color: var(--cin-blue-soft); box-shadow: 0 1px 2px var(--cin-veil), 0 10px 26px var(--cin-veil); }
.landing-pro .tu-cardhead { display: flex; align-items: center; gap: 8px; }
.landing-pro .tu-num { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; font-style: normal; color: var(--ink-2); transition: background var(--cin-t-comp) var(--cin-ease), color var(--cin-t-comp) var(--cin-ease), border-color var(--cin-t-comp) var(--cin-ease); }
.landing-pro .tu-card.is-on .tu-num { background: var(--brand); border-color: transparent; color: #fff; }
.landing-pro .tu-cardsub { margin-left: auto; font-size: 12.5px; color: var(--muted); text-align: right; }

.landing-pro .tu-circbox { height: 92px; display: flex; align-items: center; justify-content: center; }
.landing-pro .tu-circbox .fl-circ { width: 100%; height: 100%; max-height: 92px; }
.landing-pro .tu-step-t { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.landing-pro .tu-c1 .fl-op { cursor: default; }
.landing-pro .fl-op.is-focus .fl-halo { fill: var(--cin-veil); stroke: var(--cin-magenta); animation: tu-pulse 1300ms var(--cin-ease) 2; }
.landing-pro .fl-op.is-focus .fl-box { stroke: var(--cin-magenta); fill: var(--cin-panel-2); }
.landing-pro .fl-op.is-focus .fl-boxt { fill: var(--cin-magenta); }
@keyframes tu-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.25; fill-opacity: 0.4; } }

.landing-pro .tu-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.landing-pro .tu-metric { font-size: 14px; color: var(--ink-2); }
.landing-pro .tu-big { font-size: clamp(30px, 3.4vw, 40px); line-height: 1; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.landing-pro .tu-track { position: relative; height: 12px; border-radius: 999px; background: var(--cin-veil-2); }
.landing-pro .tu-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cin-blue), var(--cin-violet)); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.landing-pro .tu-ghost { position: absolute; top: -4px; bottom: -4px; width: 0; margin-left: -1px; border-left: 2px dashed var(--cin-gold); opacity: 0; transition: opacity var(--cin-t-comp) var(--cin-ease); }
.landing-pro .tu-ghost.is-on { opacity: 1; }
.landing-pro .tu-caps { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.3; color: var(--muted); flex-wrap: wrap; }
.landing-pro .tu-capfrom { color: var(--cin-gold); }
.landing-pro .tu-extras { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; opacity: 0; transition: opacity var(--cin-t-sect) var(--cin-ease); }
.landing-pro .tu-extras.is-on { opacity: 1; }
.landing-pro .tu-extras dt { color: var(--muted); }
.landing-pro .tu-extras dd { margin: 0; color: var(--ink); text-align: right; white-space: nowrap; }

.landing-pro .tu-sentences { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.landing-pro .tu-sent { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); opacity: 0.35; transform: translate3d(0, 4px, 0); transition: opacity var(--cin-t-sect) var(--cin-ease), transform var(--cin-t-sect) var(--cin-ease); }
.landing-pro .tu-sent::before { content: ''; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 2px; border-radius: 2px; background: var(--line-2); transition: background var(--cin-t-sect) var(--cin-ease); }
.landing-pro .tu-sent.is-on { opacity: 1; transform: none; color: var(--ink); }
.landing-pro .tu-sent.is-on::before { background: linear-gradient(180deg, var(--cin-blue), var(--cin-violet)); }

/* the connector: a thin line that draws itself from one card to the next */
.landing-pro .tu-link { position: relative; align-self: center; height: 40px; color: var(--muted); }
.landing-pro .tu-link::before { content: ''; position: absolute; left: 4px; right: 12px; top: 50%; height: 1px; background: var(--line-2); }
.landing-pro .tu-linkfill { position: absolute; left: 4px; right: 12px; top: 50%; height: 2px; margin-top: -0.5px; border-radius: 2px; background: linear-gradient(90deg, var(--cin-blue), var(--cin-violet)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--cin-ease); }
.landing-pro .tu-arrow { position: absolute; right: 2px; top: 50%; margin-top: -5px; opacity: 0.4; transition: opacity var(--cin-t-comp) var(--cin-ease) 500ms, color var(--cin-t-comp) var(--cin-ease) 500ms; }
.landing-pro .tu-linklab { position: absolute; left: 0; right: 0; top: -2px; text-align: center; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.landing-pro .tu-link.is-on .tu-linkfill { transform: scaleX(1); }
.landing-pro .tu-link.is-on .tu-arrow { opacity: 1; color: var(--cin-violet); }
.landing-pro .tu-link.is-on .tu-linklab { color: var(--ink-2); }

.landing-pro .tu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.landing-pro .tu-note { margin: 0; max-width: 68ch; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.landing-pro .tu-note strong { color: var(--ink-2); font-weight: 600; }
.landing-pro .tu-replay { min-height: 40px; padding: 0 18px; font-size: 14px; }
.landing-pro .tu-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .landing-pro .tu-flow { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .landing-pro .tu-link { height: 48px; width: 100%; }
  .landing-pro .tu-link::before { left: 50%; right: auto; top: 4px; bottom: 12px; width: 1px; height: auto; }
  .landing-pro .tu-linkfill { left: 50%; right: auto; top: 4px; bottom: 12px; width: 2px; height: auto; margin: 0 0 0 -0.5px; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, var(--cin-blue), var(--cin-violet)); }
  .landing-pro .tu-link.is-on .tu-linkfill { transform: scaleY(1); }
  .landing-pro .tu-arrow { right: auto; left: 50%; top: auto; bottom: 2px; margin: 0 0 0 -5px; transform: rotate(90deg); }
  .landing-pro .tu-linklab { left: calc(50% + 12px); right: auto; top: 50%; margin-top: -6px; text-align: left; }
  .landing-pro .tu-asks { flex-direction: column; align-items: stretch; width: 100%; }
  .landing-pro .tu-ask { width: 100%; }
  .landing-pro .tu-bubble-t { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-pro .fl-op.is-focus .fl-halo { animation: none !important; }
  .landing-pro .tu-linkfill, .landing-pro .tu-sent, .landing-pro .tu-card { transition: none !important; }
}