/* The story (onboarding), rule banners and the "hide what I do not use" switches. UI 2 only. */

/* ---------- sections the person chose not to see ---------- */
html[data-hide~="hub-performance"] :is(.u2-nav-item[data-hub="performance"], .u2-tab[data-hub="performance"], .u2-sheet [data-go="performance"]),
html[data-hide~="hub-growth"] :is(.u2-nav-item[data-hub="growth"], .u2-tab[data-hub="growth"], .u2-sheet [data-go="growth"]),
html[data-hide~="hub-spot"] :is(.u2-nav-item[data-hub="spot"], .u2-tab[data-hub="spot"], .u2-sheet [data-go="spot"]) { display: none !important; }
html[data-hide~="sec-hero"] #u2Hero, html[data-hide~="sec-risk"] #riskPanel, html[data-hide~="sec-path"] #trailPanel,
html[data-hide~="sec-toolkit"] .kit-grid, html[data-hide~="sec-riskhist"] #riskHistoryPanel { display: none !important; }

/* ---------- banners ---------- */
html.ui2 .eb {
  --a: var(--ion); position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; margin: 0 0 14px;
  padding: 24px 26px; border-radius: var(--radius-lg); isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--a) 30%, var(--border));
  background: linear-gradient(115deg, color-mix(in srgb, var(--a) 15%, var(--surface)) 0%, var(--surface) 64%);
  box-shadow: var(--u2-hi);
}
html.ui2 .eb[data-cat="entry"], html.ui2 .eb[data-cat="exit"] { --a: var(--teal); }
html.ui2 .eb[data-cat="stop"] { --a: var(--rose); }
html.ui2 .eb[data-cat="sizing"] { --a: var(--blue); }
html.ui2 .eb[data-cat="filter"] { --a: var(--amber); }
html.ui2 .eb[data-cat="discipline"] { --a: var(--violet); }
html.ui2 .eb[data-cat="live"] { --a: var(--text-dim); }
html.ui2 .eb-glow { position: absolute; z-index: -1; right: -60px; top: -90px; width: 460px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 34%, transparent), transparent); opacity: .7; animation: ebDrift 16s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ebDrift { to { transform: translate3d(-70px, 36px, 0) scale(1.15); } }
html.ui2 .eb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
html.ui2 .eb-chip { font: 700 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--a); background: color-mix(in srgb, var(--a) 14%, transparent); }
html.ui2 .eb-text { margin: 0; font: 600 clamp(19px, 2.3vw, 27px)/1.3 var(--font-display); letter-spacing: -.015em; max-width: 46ch; color: var(--text); text-wrap: balance; }
html.ui2 .eb-by { font-size: 13px; color: var(--text-dim); margin-top: -4px; }
html.ui2 .eb-by:empty { display: none; }
html.ui2 .eb-meter { width: min(320px, 100%); height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
html.ui2 .eb-meter i { display: block; height: 100%; border-radius: 99px; background: var(--ion); transition: width 600ms var(--ease-out); }
html.ui2 .eb-meter[data-over="1"] i { background: var(--rose); }
html.ui2 .eb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
html.ui2 .eb-dots { display: flex; gap: 6px; max-width: 220px; flex-wrap: wrap; justify-content: flex-end; }
html.ui2 .eb-dot { width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; position: relative; }
html.ui2 .eb-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: color-mix(in srgb, var(--text) 28%, transparent); transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
html.ui2 .eb-dot.on::after { background: var(--a); transform: scale(1.5); }
html.ui2 .eb-btns { display: flex; gap: 6px; }
html.ui2 .eb-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-dim); font: 400 20px/1 var(--font-ui); cursor: pointer; transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out); }
html.ui2 .eb-btn:focus-visible, html.ui2 .eb-dot:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { html.ui2 .eb-btn:hover { color: var(--text); border-color: var(--a); } }
html.ui2 .eb.is-single .eb-dots, html.ui2 .eb.is-single [data-eb="prev"], html.ui2 .eb.is-single [data-eb="next"] { display: none; }
html.ui2 .eb-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--a); opacity: .65; transform-origin: left; transform: scaleX(0); animation: ebTimer 9s linear forwards; }
html.ui2 .eb.is-paused .eb-timer { animation-play-state: paused; }
@keyframes ebTimer { to { transform: scaleX(1); } }
html.ui2 .eb-body { transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out), filter 170ms var(--ease-out); }
html.ui2 .eb.eb-swap .eb-body { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
html.ui2 .eb.eb-swap[data-dir="prev"] .eb-body { transform: translateY(8px); }
html.ui2 .eb.eb-enter .eb-body { animation: ebIn 480ms var(--ease-out) both; }
@keyframes ebIn { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } }
html.ui2 .eb.is-empty .eb-text { color: var(--text-dim); font-size: 17px; }

html.ui2 .eb-slim { padding: 8px 8px 8px 14px; margin: 0 0 12px; gap: 12px; border-radius: var(--radius); }
html.ui2 .eb-slim .eb-glow { width: 260px; height: 160px; top: -70px; }
html.ui2 .eb-slim .eb-body { flex-direction: row; align-items: center; gap: 12px; }
html.ui2 .eb-slim .eb-text { font: 600 14px/1.35 var(--font-ui); letter-spacing: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
html.ui2 .eb-slim .eb-by, html.ui2 .eb-slim .eb-meter { display: none; }
html.ui2 .eb-slim .eb-chip { flex: none; padding: 3px 9px; font-size: 10px; }
html.ui2 .eb-slim .eb-side { flex-direction: row; align-items: center; gap: 8px; }
html.ui2 .eb-slim .eb-dots { display: none; }
html.ui2 .eb-slim .eb-btn { width: 30px; height: 30px; font-size: 18px; }

/* the manage sheet */
html.ui2 .eb-tabs { display: flex; gap: 8px; padding: 12px 20px 0; flex-wrap: wrap; }
html.ui2 .eb-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
html.ui2 .eb-list li { display: grid; grid-template-columns: auto 128px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
html.ui2 .eb-list li.is-off input[type="text"] { opacity: .5; }
html.ui2 .eb-list li:has(.eb-author) { grid-template-columns: auto minmax(0, 1fr) 130px auto; }
html.ui2 .eb-add { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 8px; margin: 4px 0 14px; }
html.ui2 .eb-add:has(#ebNewNote) { grid-template-columns: minmax(0, 1fr) 130px auto; }
html.ui2 .eb-sheet :is(input[type="text"], select) { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 500 13.5px var(--font-ui); min-width: 0; width: 100%; }
html.ui2 .eb-sheet :is(input[type="text"], select):focus-visible { outline: 2px solid var(--ion); outline-offset: 1px; }
html.ui2 .eb-h { font: 700 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 18px 0 8px; }
html.ui2 .eb-on, html.ui2 .eb-switch { cursor: pointer; }
html.ui2 .eb-on input, html.ui2 .eb-switch input, html.ui2 .ob-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
html.ui2 .eb-on span { display: block; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--text-faint); position: relative; }
html.ui2 .eb-on input:checked + span { background: var(--teal-dim); border-color: var(--teal); }
html.ui2 .eb-on input:checked + span::after { content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--teal); font: 700 13px var(--font-ui); }
html.ui2 .eb-on input:focus-visible + span, html.ui2 .eb-switch input:focus-visible + .eb-sw { outline: 2px solid var(--ion); outline-offset: 2px; }
html.ui2 .eb-switch { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); position: relative; }
html.ui2 .eb-switch b { display: block; font-size: 14px; } html.ui2 .eb-switch small { display: block; color: var(--text-faint); font-size: 12px; line-height: 1.4; margin-top: 2px; }
html.ui2 .eb-sw { flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--surface-hover); border: 1px solid var(--border); position: relative; transition: background-color 160ms var(--ease-out); }
html.ui2 .eb-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: transform 180ms var(--ease-out), background-color 160ms; }
html.ui2 .eb-switch input:checked + .eb-sw { background: var(--ion-dim); border-color: var(--ion-line); }
html.ui2 .eb-switch input:checked + .eb-sw::after { transform: translateX(16px); background: var(--ion); }

@media (max-width: 700px) {
  html.ui2 .eb-big { flex-direction: column; align-items: stretch; padding: 20px 18px 22px; gap: 14px; }
  html.ui2 .eb-big .eb-side { flex-direction: row; justify-content: space-between; align-items: center; }
  html.ui2 .eb-big .eb-dots { justify-content: flex-start; }
  html.ui2 .eb-slim .eb-chip { display: none; }
  html.ui2 .eb-slim .eb-text { font-size: 13px; }
  html.ui2 .eb-list li, html.ui2 .eb-list li:has(.eb-author) { grid-template-columns: auto minmax(0, 1fr) auto; }
  html.ui2 .eb-list li > select { grid-column: 2 / 4; grid-row: 2; }
  html.ui2 .eb-add, html.ui2 .eb-add:has(#ebNewNote) { grid-template-columns: minmax(0, 1fr) auto; }
  html.ui2 .eb-add > select, html.ui2 .eb-add > .eb-author { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { html.ui2 .eb-glow, html.ui2 .eb-timer { animation: none; } html.ui2 .eb-timer { display: none; } }
html[data-motion="off"] .eb *, html[data-motion="off"] .eb { animation: none !important; transition: none !important; }
html[data-motion="off"] .eb-timer { display: none; }

/* ---------- the story ---------- */
html.ob-open, html.ob-open body { overflow: hidden; }
.ob {
  --bg: #05070b; --surface: #0d1118; --surface-2: #131925; --text: #e8edf6; --text-dim: #a4aec2; --text-faint: #8391ac; --ion: #4cc9f0; --ion-dim: rgba(76,201,240,.14); --ion-line: rgba(76,201,240,.5); --teal: #34d9a8; --rose: #e2617e; --amber: #f0b429; --border: rgba(148,170,210,.16);
  position: fixed; inset: 0; z-index: 9000; color: var(--text); background: var(--bg); font-family: var(--font-ui, Inter, system-ui, sans-serif); overflow: hidden;
  opacity: 0; transition: opacity 600ms ease; display: flex; flex-direction: column;
}
.ob.ob-in { opacity: 1; } .ob.ob-leave { opacity: 0; transition-duration: 500ms; }
.ob-bg { position: absolute; inset: 0; pointer-events: none; }
.ob-aurora { position: absolute; inset: -20%; background: radial-gradient(40% 36% at 78% 12%, rgba(76,201,240,.2), transparent 70%), radial-gradient(34% 30% at 12% 86%, rgba(167,139,250,.16), transparent 70%), radial-gradient(30% 26% at 55% 60%, rgba(52,217,168,.08), transparent 70%); animation: obAurora 22s ease-in-out infinite alternate; }
@keyframes obAurora { to { transform: translate3d(3%, -2%, 0) rotate(3deg) scale(1.06); } }
.ob-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-net line { stroke: rgba(76,201,240,.34); stroke-width: .16; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1); }
.ob-net line.on { stroke-dashoffset: 0; }
.ob-net circle { fill: rgba(190,235,250,.85); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity 900ms ease, transform 900ms cubic-bezier(.22,1,.36,1); }
.ob-net circle.on { opacity: .5; transform: scale(1); }
.ob-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.06); z-index: 2; }
.ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--ion), var(--teal)); transform-origin: left; transform: scaleX(0); transition: transform 900ms cubic-bezier(.22,1,.36,1); }
.ob-skip { position: absolute; top: 14px; right: 18px; z-index: 5; background: none; border: none; color: var(--text-faint); font: 600 13px var(--font-ui, sans-serif); cursor: pointer; padding: 10px 12px; min-height: 44px; }
.ob-skip:hover { color: var(--text); }
.ob-main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; padding: 56px 56px 0; max-width: 1360px; width: 100%; margin: 0 auto; }
.ob-stage { align-self: center; min-width: 0; max-height: 100%; overflow-y: auto; padding: 8px 6px 120px; scrollbar-width: none; opacity: 0; transform: translateX(34px); transition: opacity 600ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1); }
.ob-stage::-webkit-scrollbar { display: none; }
.ob-stage.ob-from-left { transform: translateX(-34px); }
.ob-stage.ob-show { opacity: 1; transform: none; }
.ob-kick { margin: 0 0 14px; font: 700 12px var(--font-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ion); }
.ob-title { margin: 0 0 14px; font: 700 clamp(30px, 4.2vw, 54px)/1.06 var(--font-display, 'Space Grotesk', sans-serif); letter-spacing: -.03em; text-wrap: balance; max-width: 18ch; }
.ob-w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(6px); animation: obWord 700ms cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes obWord { to { opacity: 1; transform: none; filter: none; } }
.ob-sub { margin: 0 0 28px; max-width: 54ch; color: var(--text-dim); font-size: 16.5px; line-height: 1.6; }
.ob-q { margin: 26px 0 10px; font: 600 13.5px var(--font-ui, sans-serif); color: var(--text-dim); }
.ob-note { margin: 12px 0 0; max-width: 56ch; color: var(--text-faint); font-size: 13px; line-height: 1.55; }
.ob-field { display: grid; gap: 8px; margin: 0 0 6px; max-width: 420px; }
.ob-field > span:first-child { font: 600 13.5px var(--font-ui, sans-serif); color: var(--text-dim); }
.ob .ob-field input, .ob input[type="text"] { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); font: 500 16px var(--font-ui, sans-serif); }
.ob input[type="text"]:focus-visible, .ob textarea:focus-visible, .ob select:focus-visible { outline: 2px solid var(--ion); outline-offset: 2px; }
.ob-inline { display: flex; gap: 8px; }
.ob-add { flex: none; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--ion-line); background: var(--ion-dim); color: var(--ion); font: 700 14px var(--font-ui, sans-serif); cursor: pointer; }

.ob-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
.ob-chips.ob-row, .ob-chips.ob-wrap { display: flex; flex-wrap: wrap; }
.ob-chip { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 15px 17px; min-height: 52px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--text); font-family: var(--font-ui, sans-serif); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.ob-chip b { font-size: 15px; font-weight: 600; } .ob-chip small { color: var(--text-faint); font-size: 12.5px; line-height: 1.4; }
.ob-chip.on { border-color: var(--ion-line); background: var(--ion-dim); box-shadow: 0 0 0 1px var(--ion-line), 0 10px 30px -14px rgba(76,201,240,.5); }
.ob-chip.on b { color: #fff; }
.ob-chip:active { transform: scale(.98); }
.ob-chip:focus-visible, .ob-begin:focus-visible, .ob-next:focus-visible, .ob-back:focus-visible { outline: 2px solid var(--ion); outline-offset: 3px; }
.ob-chip.ob-small { padding: 10px 14px; min-height: 44px; } .ob-chip.ob-small b { font-weight: 500; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .ob-chip:hover:not(.on) { border-color: rgba(255,255,255,.3); transform: translateY(-2px); } }
.ob-target.hidden { display: none; }

.ob-sliders { display: grid; gap: 22px; max-width: 600px; }
.ob-srow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ob-srow label { font: 600 14px var(--font-ui, sans-serif); color: var(--text-dim); }
.ob-srow output { font: 700 24px var(--font-display, sans-serif); color: var(--text); font-variant-numeric: tabular-nums; }
.ob input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; cursor: pointer; margin: 0; }
.ob input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--ion) var(--p, 50%), rgba(255,255,255,.12) var(--p, 50%)); }
.ob input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); }
.ob input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ion); }
.ob input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--ion); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ob input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--ion); }
.ob input[type="range"]:focus-visible { outline: 2px solid var(--ion); outline-offset: 4px; border-radius: 8px; }
.ob-hint { margin: 4px 0 0; min-height: 20px; color: var(--text-faint); font-size: 13px; line-height: 1.5; }

.ob-rules ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-width: 680px; }
.ob-rules li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 4px 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.04); }
.ob-rules li.ob-write { animation: obWrite 700ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes obWrite { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(8px); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.ob-cat { grid-column: 1 / -1; font: 700 10.5px var(--font-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--ion); }
.ob-rules textarea { width: 100%; background: transparent; border: none; resize: none; color: var(--text); font: 500 15.5px/1.5 var(--font-ui, sans-serif); padding: 2px 0; overflow: hidden; }
.ob-rules li > button, .ob-notes button { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--text-faint); font-size: 20px; cursor: pointer; align-self: start; }
.ob-rules li > button:hover, .ob-notes button:hover { color: var(--rose); }
.ob-addrule { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; max-width: 680px; }
.ob select { min-height: 48px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); background: #0d1118; color: var(--text); font: 500 14px var(--font-ui, sans-serif); }
.ob-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 640px; }
.ob-tg { display: flex; align-items: center; gap: 12px; padding: 11px 0; cursor: pointer; position: relative; border-bottom: 1px solid rgba(255,255,255,.06); }
.ob-tg b { font-weight: 600; font-size: 14.5px; } .ob-tg small { display: block; color: var(--text-faint); font-size: 12.5px; line-height: 1.45; margin-top: 3px; font-weight: 400; }
.ob-sw { flex: none; width: 42px; height: 26px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid var(--border); position: relative; transition: background-color 160ms; }
.ob-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: transform 200ms cubic-bezier(.22,1,.36,1), background-color 160ms; }
.ob-tg input:checked + .ob-sw { background: var(--ion-dim); border-color: var(--ion-line); } .ob-tg input:checked + .ob-sw::after { transform: translateX(16px); background: var(--ion); }
.ob-tg input:focus-visible + .ob-sw { outline: 2px solid var(--ion); outline-offset: 3px; }
.ob-big-tg { max-width: 600px; align-items: flex-start; border: 1px solid var(--border); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.04); margin-top: 18px; }
.ob-notes { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; max-width: 600px; }
.ob-notes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.045); font-size: 15px; }
.ob-sum { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--text-dim); } .ob-sum b { color: var(--text); font-size: 18px; }

/* the plan that builds itself */
.ob-plan { align-self: center; max-height: calc(100% - 96px); display: flex; flex-direction: column; padding: 20px 20px 14px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); backdrop-filter: blur(16px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.ob-plan h4 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; font: 700 12px var(--font-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.ob-plan h4 em { font-style: normal; letter-spacing: 0; text-transform: none; color: var(--text-faint); font-weight: 600; }
.ob-nodes { list-style: none; margin: 0; padding: 0 2px 0 0; overflow-y: auto; scrollbar-width: none; display: grid; gap: 0; }
.ob-nodes:empty::before { content: 'Your answers will be built here, one piece at a time.'; color: var(--text-faint); font-size: 13.5px; line-height: 1.5; padding: 8px 0 18px; }
.ob-node { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.ob-node::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: -2px; width: 2px; background: linear-gradient(var(--ion-line), rgba(76,201,240,.12)); transform-origin: top; }
.ob-node:last-child::before { display: none; }
.ob-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ion); background: #05070b; margin-top: 2px; }
.ob-dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--ion); }
.ob-node span { display: block; font: 700 11px var(--font-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ion); }
.ob-node p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ob-node.is-new { animation: obNode 700ms cubic-bezier(.22,1,.36,1) both; }
.ob-node.is-new::before { animation: obLine 700ms 200ms cubic-bezier(.22,1,.36,1) both; }
.ob-node.is-new .ob-dot { animation: obPing 1100ms ease-out; }
@keyframes obNode { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes obLine { from { transform: scaleY(0); } }
@keyframes obPing { 0% { box-shadow: 0 0 0 0 rgba(76,201,240,.7); } 100% { box-shadow: 0 0 0 16px rgba(76,201,240,0); } }
.ob-node.is-done .ob-dot { border-color: var(--teal); } .ob-node.is-done .ob-dot::after { background: var(--teal); }
.ob-node.is-done { animation: obDone 600ms calc(var(--i, 0) * 90ms) both; }
@keyframes obDone { 40% { transform: translateX(6px); } }

/* controls */
.ob-nav { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 16px 56px calc(20px + env(safe-area-inset-bottom)); max-width: 1360px; width: 100%; margin: 0 auto; background: linear-gradient(0deg, var(--bg) 40%, transparent); }
.ob-back { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-dim); font: 600 14px var(--font-ui, sans-serif); cursor: pointer; }
.ob-next, .ob-begin { min-height: 52px; padding: 0 30px; border-radius: 999px; border: none; background: linear-gradient(135deg, #5fd4f6, #2fb4dd); color: #03121a; font: 700 15.5px var(--font-ui, sans-serif); cursor: pointer; box-shadow: 0 12px 34px -10px rgba(76,201,240,.65); transition: transform 160ms ease, opacity 200ms ease, box-shadow 200ms ease; }
.ob-next:disabled { opacity: .35; box-shadow: none; cursor: default; }
.ob-next:not(:disabled):active, .ob-begin:active { transform: scale(.97); }
.ob-next.ob-hide { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .ob-next:not(:disabled):hover, .ob-begin:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(76,201,240,.8); } }

/* intro: the opening */
.ob-intro .ob-plan, .ob-intro .ob-nav, .ob-intro .ob-progress { opacity: 0; pointer-events: none; }
.ob-intro .ob-main { grid-template-columns: minmax(0, 1fr); text-align: center; }
.ob-intro .ob-stage { overflow: visible; padding-bottom: 20px; }
.ob-lines { min-height: 210px; display: grid; gap: 10px; justify-items: center; }
.ob-lines p { margin: 0; font: 500 clamp(18px, 2.4vw, 26px)/1.35 var(--font-display, sans-serif); color: var(--text-dim); opacity: 0; transform: translateY(10px); filter: blur(5px); animation: obLineIn 1100ms cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d); }
.ob-lines p.ob-big { font-size: clamp(34px, 5.6vw, 72px); font-weight: 700; letter-spacing: -.035em; background: linear-gradient(100deg, #fff 10%, var(--ion) 60%, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: 10px; }
@keyframes obLineIn { to { opacity: 1; transform: none; filter: none; } }
.ob-mark { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; opacity: 0; animation: obLineIn 900ms ease forwards; animation-delay: var(--d); }
.ob-mark svg { width: 44px; height: 44px; fill: none; stroke: var(--ion); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 12px rgba(76,201,240,.7)); }
.ob-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: obDraw 1500ms ease forwards; animation-delay: var(--d); }
.ob-mark span { font: 700 34px var(--font-display, sans-serif); letter-spacing: -.02em; }
@keyframes obDraw { to { stroke-dashoffset: 0; } }
.ob-intro .ob-begin { display: block; margin: 30px auto 0; opacity: 0; animation: obLineIn 800ms ease forwards; animation-delay: var(--d); }
.ob-fine { margin: 14px 0 0; color: var(--text-faint); font-size: 13px; opacity: 0; animation: obLineIn 800ms ease forwards; animation-delay: var(--d); }
.ob-ff .ob-lines p, .ob-ff .ob-mark, .ob-ff .ob-mark path, .ob-ff .ob-begin, .ob-ff .ob-fine { animation-delay: 0s !important; animation-duration: 300ms !important; }
.ob-ffbtn { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); background: none; border: none; color: var(--text-faint); font: 600 13px var(--font-ui, sans-serif); cursor: pointer; padding: 12px; z-index: 4; }
.ob:not(.ob-intro) .ob-ffbtn, .ob.ob-intro-end .ob-ffbtn { display: none; }

/* finale */
.ob-done .ob-nav, .ob-done .ob-back { visibility: hidden; }
.ob-finale { max-width: 640px; }
.ob-check svg { width: 84px; height: 84px; fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 16px rgba(52,217,168,.6)); margin-bottom: 18px; }
.ob-check circle, .ob-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: obDraw 900ms ease forwards; } .ob-check path { animation-delay: 600ms; }
.ob-cta { margin-top: 28px; } .ob-cta .ob-begin { opacity: 0; animation: obLineIn 700ms ease forwards; animation-delay: 1.4s; }

@media (max-width: 900px) {
  .ob-main { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 78px 20px 0; align-content: start; }
  .ob-plan { position: absolute; top: 14px; left: 14px; right: 74px; z-index: 4; max-height: none; padding: 8px 10px; border-radius: 14px; flex-direction: row; align-items: center; gap: 10px; }
  .ob-plan h4 { margin: 0; flex: none; font-size: 10.5px; } .ob-plan h4 span { display: none; }
  .ob-nodes { display: flex; gap: 6px; overflow-x: auto; } .ob-nodes:empty::before { content: 'Building your plan\2026'; font-size: 12px; padding: 0; }
  .ob-node { grid-template-columns: auto; padding: 0; flex: none; } .ob-node::before, .ob-node .ob-dot { display: none; }
  .ob-node span { padding: 5px 10px; border-radius: 999px; background: var(--ion-dim); white-space: nowrap; letter-spacing: .04em; } .ob-node p { display: none; }
  .ob-intro .ob-plan { display: none; }
  .ob-stage { align-self: start; padding: 0 0 120px; } .ob-title { max-width: none; }
  .ob-chips { grid-template-columns: minmax(0, 1fr); } .ob-chips.ob-row, .ob-chips.ob-wrap { display: flex; }
  .ob-two { grid-template-columns: minmax(0, 1fr); gap: 4px; } .ob-addrule { grid-template-columns: minmax(0, 1fr) auto; } .ob-addrule select { grid-column: 1 / -1; }
  .ob-nav { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
  .ob-sub { font-size: 15.5px; } .ob-lines { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
  .ob, .ob * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .ob-lines p, .ob-w, .ob-mark, .ob-begin, .ob-fine { opacity: 1 !important; transform: none !important; filter: none !important; }
}
html[data-motion="off"] .ob, html[data-motion="off"] .ob * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
html[data-motion="off"] .ob-lines p, html[data-motion="off"] .ob-w, html[data-motion="off"] .ob-mark, html[data-motion="off"] .ob-begin, html[data-motion="off"] .ob-fine { opacity: 1 !important; transform: none !important; filter: none !important; }

/* the story has its own atmosphere; pause the app's behind it (saves a lot of paint work) */
html.ob-open .u2-fx, html.ob-open .u2-ambient { display: none !important; }

/* Home is an ordered flex column: the banner sits straight after the key numbers */
html.ui2 #homePage > #ebHome { order: 1; }

/* the slim ribbon stays out of the way until there is something to say; Home keeps its invitation */
html.ui2 .eb-slim.is-empty { display: none; }

/* ---------- the welcome side of the sign-in screen ---------- */
html.ui2 #authModal.has-aw:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 480px); align-items: center; justify-content: stretch; gap: 0; padding: 0; overflow-y: auto; }
html.ui2 #authModal.has-aw .modal-content { margin: 0 clamp(18px, 5vw, 72px) 0 0; justify-self: end; width: min(100%, 440px); position: relative; z-index: 2; }
html.ui2 #authModal.has-aw:has(#setupForm:not(.hidden)) { display: flex; }
html.ui2 #authModal.has-aw:has(#setupForm:not(.hidden)) .aw { display: none; }
.aw { position: static; align-self: stretch; display: flex; align-items: center; padding: clamp(28px, 6vw, 88px); color: #e8edf6; }
.aw-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.aw-bg .ob-net line { stroke-dashoffset: 0; stroke: rgba(76, 201, 240, .3); } .aw-bg .ob-net circle { opacity: .55; transform: none; }
.aw-in { position: relative; z-index: 1; max-width: 560px; animation: awIn 900ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes awIn { from { opacity: 0; transform: translateY(16px); } }
.aw-kick { margin: 0 0 18px; font: 700 12px var(--font-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #4cc9f0; }
.aw h2 { margin: 0 0 16px; font: 700 clamp(32px, 4.4vw, 58px)/1.05 var(--font-display, sans-serif); letter-spacing: -.03em; background: linear-gradient(100deg, #fff 20%, #7fdcf7 70%, #34d9a8); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.aw-lead { margin: 0 0 30px; font-size: 17px; line-height: 1.6; color: #a4aec2; max-width: 46ch; }
.aw-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.aw-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.aw-list li > svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(76, 201, 240, .12); color: #4cc9f0; border: 1px solid rgba(76, 201, 240, .3); }
.aw-list b { display: block; font-size: 15.5px; margin-bottom: 2px; } .aw-list span { display: block; color: #98a2b7; font-size: 14px; line-height: 1.5; }
.aw-foot { margin: 0; font-size: 13px; color: #8391ac; }
html.ui2.theme-light .aw { color: #e8edf6; }
html.ui2 #authModal.has-aw { background: #05070b; }
@media (max-width: 900px) {
  html.ui2 #authModal.has-aw:not(.hidden) { display: block; }
  .aw { padding: 30px 22px 6px; align-items: flex-start; } .aw-list, .aw-foot { display: none; } .aw h2 { font-size: 30px; margin-bottom: 10px; } .aw-lead { font-size: 15px; margin-bottom: 8px; }
  html.ui2 #authModal.has-aw .modal-content { margin: 0 auto; justify-self: center; width: min(100% - 28px, 440px); }
}
@media (prefers-reduced-motion: reduce) { .aw-in { animation: none; } }