/* =============================================================================
   Orbex — design system "Orbit" · v1.0.0
   Deep-space violet on near-black, lavender light surfaces, pill controls with
   a white "orbit" arrow disc. Plus Jakarta Sans (display) + Inter (text).
   Class prefix: ob-. Built from assets/css/src/*.css into orbex-1.0.0.css.
   ============================================================================= */

/* Self-hosted variable fonts (SIL OFL 1.1, licences in assets/fonts). */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* dark surfaces */
  --ob-void: #07030F;
  --ob-night: #0C0618;
  --ob-panel: #140C25;
  --ob-panel-2: #1C1331;
  --ob-line-d: rgba(255, 255, 255, .09);
  --ob-line-d2: rgba(255, 255, 255, .16);
  --ob-fog: #A79FBD;
  --ob-fog-2: #CFC8E2;

  /* brand */
  --ob-violet: #7034F5;
  --ob-violet-600: #5B21DF;
  --ob-violet-700: #4A17BD;
  --ob-violet-400: #8C5BFF;
  --ob-lilac: #B79CFF;
  --ob-amber: #F4A340;

  /* light surfaces */
  --ob-white: #FFFFFF;
  --ob-mist: #F7F3FF;
  --ob-mist-2: #EFE7FF;
  --ob-mist-3: #E4D8FF;
  --ob-line: #ECE6F8;
  --ob-line-2: #DED5F2;
  --ob-ink: #0D0718;
  --ob-text: #2B2640;
  --ob-muted: #655F7A;
  --ob-subtle: #8B85A0;

  /* states */
  --ob-ok: #12A867;
  --ob-ok-bg: #E7F8EF;
  --ob-warn: #B86E00;
  --ob-warn-bg: #FFF4E2;
  --ob-err: #DC3D43;
  --ob-err-bg: #FDECEC;

  /* type */
  --ob-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ob-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* shape + motion */
  --ob-r-sm: 12px;
  --ob-r: 18px;
  --ob-r-lg: 24px;
  --ob-r-xl: 32px;
  --ob-ease: cubic-bezier(.2, .7, .2, 1);
  --ob-shadow: 0 1px 2px rgba(13, 7, 24, .04), 0 18px 48px -28px rgba(76, 36, 170, .28);
  --ob-shadow-lg: 0 2px 4px rgba(13, 7, 24, .04), 0 40px 80px -40px rgba(76, 36, 170, .38);
  --ob-glow: 0 18px 50px -12px rgba(112, 52, 245, .65);
  --ob-header-h: 72px;
  --ob-wrap: 1320px;
  --ob-gutter: clamp(16px, 4vw, 40px);

  --ob-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='6' cy='6' r='1.1' fill-opacity='.10'/%3E%3Ccircle cx='45' cy='6' r='1.1' fill-opacity='.07'/%3E%3Cpath d='M25.5 22l3 3-3 3-3-3z' fill-opacity='.08'/%3E%3Ccircle cx='6' cy='45' r='1.1' fill-opacity='.06'/%3E%3Cpath d='M64.5 41l3.5 3.5-3.5 3.5-3.5-3.5z' fill-opacity='.06'/%3E%3Ccircle cx='45' cy='45' r='1.1' fill-opacity='.10'/%3E%3Cpath d='M25.5 61l2.5 2.5-2.5 2.5-2.5-2.5z' fill-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
  --ob-dots-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78'%3E%3Cg fill='%23362a5c'%3E%3Ccircle cx='6' cy='6' r='1.1' fill-opacity='.10'/%3E%3Ccircle cx='45' cy='6' r='1.1' fill-opacity='.07'/%3E%3Cpath d='M25.5 22l3 3-3 3-3-3z' fill-opacity='.07'/%3E%3Ccircle cx='6' cy='45' r='1.1' fill-opacity='.06'/%3E%3Cpath d='M64.5 41l3.5 3.5-3.5 3.5-3.5-3.5z' fill-opacity='.06'/%3E%3Ccircle cx='45' cy='45' r='1.1' fill-opacity='.09'/%3E%3Cpath d='M25.5 61l2.5 2.5-2.5 2.5-2.5-2.5z' fill-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0; background: var(--ob-white); color: var(--ob-text);
  font: 400 16px/1.65 var(--ob-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--ob-line); margin: 0; }
::selection { background: var(--ob-violet); color: #fff; }
[hidden], .hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ob-lilac); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
html.ob-no-scroll { overflow: hidden; }

.ob-skip {
  position: fixed; left: 16px; top: -80px; z-index: 200; background: var(--ob-violet); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; transition: top .2s;
}
.ob-skip:focus { top: 16px; }

/* --------------------------------------------------------------- layout */
.ob-wrap { width: 100%; max-width: var(--ob-wrap); margin-inline: auto; padding-inline: var(--ob-gutter); }
.ob-wrap--narrow { max-width: 920px; }
.ob-wrap--mid { max-width: 1120px; }
.ob-section { padding-block: clamp(72px, 9vw, 120px); position: relative; }
.ob-section--sm { padding-block: clamp(48px, 6vw, 80px); }
.ob-section--flush-top { padding-top: 0; }
.ob-dark { background: var(--ob-void); color: var(--ob-fog-2); position: relative; isolation: isolate; }
.ob-dark h1, .ob-dark h2, .ob-dark h3, .ob-dark h4, .ob-dark .ob-strong { color: #fff; }
.ob-mist { background: var(--ob-mist); }
.ob-dotted::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--ob-dots); background-size: 78px 78px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.ob-dotted--light { position: relative; isolation: isolate; }
.ob-dotted--light::before { background-image: var(--ob-dots-light); }
.ob-glow {
  position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(112, 52, 245, .55), rgba(112, 52, 245, 0));
  filter: blur(10px);
}
.ob-beam {
  position: absolute; z-index: -1; pointer-events: none; inset: 0; overflow: hidden;
}
.ob-beam::before {
  content: ""; position: absolute; width: 70%; height: 140%; left: -8%; top: -60%;
  background: linear-gradient(118deg, rgba(126, 64, 255, 0) 30%, rgba(126, 64, 255, .38) 50%, rgba(126, 64, 255, 0) 70%);
  transform: rotate(-12deg); filter: blur(40px);
}

.ob-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.ob-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ob-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ob-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ob-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .ob-grid--4, .ob-grid--3, .ob-grid--2 { grid-template-columns: 1fr; } }

.ob-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.ob-split--center { align-items: center; }
.ob-split--start { align-items: start; }
@media (max-width: 900px) { .ob-split { grid-template-columns: 1fr; align-items: start; } }

.ob-stack > * + * { margin-top: var(--ob-gap, 16px); }
.ob-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ob-row--between { justify-content: space-between; }
.ob-row--nowrap { flex-wrap: nowrap; }
.ob-center { text-align: center; }
.ob-center-x { margin-inline: auto; }
.ob-minw0 { min-width: 0; }
.ob-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-clamp-2, .ob-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ob-clamp-2 { -webkit-line-clamp: 2; }
.ob-clamp-3 { -webkit-line-clamp: 3; }
.ob-sticky { position: sticky; top: calc(var(--ob-header-h) + 36px); }

.ob-mt-1 { margin-top: 4px; } .ob-mt-2 { margin-top: 8px; } .ob-mt-3 { margin-top: 12px; } .ob-mt-4 { margin-top: 16px; }
.ob-mt-5 { margin-top: 20px; } .ob-mt-6 { margin-top: 24px; } .ob-mt-8 { margin-top: 32px; } .ob-mt-10 { margin-top: 40px; }
.ob-mt-12 { margin-top: 48px; } .ob-mt-16 { margin-top: 64px; }

/* ------------------------------------------------------------ typography */
.ob-display, .ob-h1, .ob-h2, .ob-h3, .ob-h4, .ob-h5 {
  font-family: var(--ob-display); color: var(--ob-ink); font-weight: 700; letter-spacing: -.032em; line-height: 1.08;
}
.ob-display, .ob-h1, .ob-h2, .ob-h3, .ob-h4, .ob-h5, .ob-btn, .ob-brand, .ob-price, .ob-acc__btn, .ob-tab, .ob-mega__name,
.ob-svc__title, .ob-feature__title, .ob-footer h3, .ob-userpill, .ob-mnav__main, .ob-prose h3, .ob-prose h4, [class^="oh-"], [class*=" oh-"] { word-spacing: .06em; }
.ob-display { font-size: clamp(2.5rem, 1.55rem + 3.6vw, 4.5rem); line-height: 1.04; }
.ob-h1 { font-size: clamp(2.2rem, 1.5rem + 2.7vw, 3.75rem); }
.ob-h2 { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 3rem); line-height: 1.1; }
.ob-h3 { font-size: clamp(1.3rem, 1.12rem + .6vw, 1.625rem); letter-spacing: -.022em; line-height: 1.2; font-weight: 700; }
.ob-h4 { font-size: 1.125rem; letter-spacing: -.012em; line-height: 1.3; font-weight: 650; }
.ob-h5 { font-size: 1rem; letter-spacing: -.01em; line-height: 1.35; font-weight: 650; }
.ob-dark .ob-display, .ob-dark .ob-h1, .ob-dark .ob-h2, .ob-dark .ob-h3, .ob-dark .ob-h4, .ob-dark .ob-h5 { color: #fff; }
.ob-hl { color: var(--ob-violet); }
.ob-dark .ob-hl { color: var(--ob-lilac); }
.ob-mark { background: var(--ob-violet); color: #fff; padding: 0 .16em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.ob-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7; color: var(--ob-muted); }
.ob-dark .ob-lead { color: var(--ob-fog); }
.ob-body { color: var(--ob-muted); }
.ob-dark .ob-body { color: var(--ob-fog); }
.ob-small { font-size: .9rem; line-height: 1.6; }
.ob-xs { font-size: .8125rem; line-height: 1.55; }
.ob-muted { color: var(--ob-muted); }
.ob-dark .ob-muted { color: var(--ob-fog); }
.ob-subtle { color: var(--ob-subtle); }
.ob-ink { color: var(--ob-ink); }
.ob-strong { font-weight: 600; color: var(--ob-ink); }
.ob-meta { font-size: .8125rem; font-weight: 500; color: var(--ob-subtle); letter-spacing: .01em; }
.ob-dark .ob-meta { color: var(--ob-fog); }
.ob-price { font-family: var(--ob-display); font-weight: 700; letter-spacing: -.03em; color: var(--ob-ink); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ob-dark .ob-price { color: #fff; }
.ob-price small { font-size: .55em; font-weight: 500; color: var(--ob-subtle); letter-spacing: 0; margin-left: 6px; }

.ob-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ob-violet); transition: gap .25s var(--ob-ease); }
.ob-link:hover { gap: 12px; }
.ob-link .ob-i { width: 18px; height: 18px; }
.ob-dark .ob-link { color: var(--ob-lilac); }
.ob-ul { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.ob-ul:hover { text-decoration-color: currentColor; }

.ob-prose { color: var(--ob-text); font-size: 1rem; line-height: 1.75; }
.ob-prose > * + * { margin-top: 1em; }
.ob-prose h3 { font: 700 1.2rem/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.015em; margin-top: 1.8em; }
.ob-prose h4 { font: 650 1.05rem/1.35 var(--ob-display); color: var(--ob-ink); margin-top: 1.5em; }
.ob-prose a { color: var(--ob-violet); text-decoration: underline; text-underline-offset: 3px; }
.ob-prose ul { padding-left: 0; }
.ob-prose ul li { position: relative; padding-left: 26px; }
.ob-prose ul li + li { margin-top: .5em; }
.ob-prose ul li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--ob-violet); }
.ob-prose ol { list-style: decimal; padding-left: 1.4em; }
.ob-prose ol li + li { margin-top: .5em; }
.ob-prose strong, .ob-prose b { color: var(--ob-ink); font-weight: 600; }
.ob-prose table { font-size: .95rem; border: 1px solid var(--ob-line); border-radius: var(--ob-r); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.ob-prose th, .ob-prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ob-line); }
.ob-prose th { background: var(--ob-mist); color: var(--ob-ink); font-weight: 600; }
.ob-prose tr:last-child td { border-bottom: 0; }
.ob-prose .ob-table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------------ icons */
.ob-i { width: 22px; height: 22px; flex: none; }
.ob-i--xs { width: 14px; height: 14px; }
.ob-i--sm { width: 18px; height: 18px; }
.ob-i--lg { width: 28px; height: 28px; }
.ob-i--xl { width: 36px; height: 36px; }

.ob-tile {
  width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center;
  background: var(--ob-mist-2); color: var(--ob-violet); border: 1px solid var(--ob-mist-3);
}
.ob-tile--sm { width: 44px; height: 44px; border-radius: 13px; }
.ob-tile--sm .ob-i { width: 20px; height: 20px; }
.ob-tile--solid { background: linear-gradient(160deg, var(--ob-violet-400), var(--ob-violet-600)); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -10px rgba(112, 52, 245, .8); }
.ob-dark .ob-tile, .ob-tile--dark { background: #1A1030; border-color: rgba(255, 255, 255, .08); color: #fff; }

/* App-icon style brand tile (centre pieces) */
.ob-appicon {
  width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; margin-inline: auto;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--ob-mist-3);
  box-shadow: 0 0 0 10px rgba(183, 156, 255, .14), var(--ob-shadow);
}
.ob-appicon > span {
  width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(160deg, #8B5BFF, #5B21DF); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -10px rgba(112, 52, 245, .9);
}
.ob-appicon svg { width: 44px; height: 44px; }
.ob-dark .ob-appicon { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); box-shadow: 0 0 0 10px rgba(255, 255, 255, .03); }

/* ------------------------------------------------------------------ badge */
.ob-badge {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 20px; border-radius: 999px;
  font: 500 .9375rem/1.2 var(--ob-sans); letter-spacing: -.005em;
  background: var(--ob-mist-2); color: var(--ob-violet); border: 1px solid var(--ob-mist-3);
}
.ob-dark .ob-badge, .ob-badge--dark { background: rgba(255, 255, 255, .03); color: #fff; border-color: rgba(255, 255, 255, .14); }
.ob-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ob-violet); box-shadow: 0 0 0 4px rgba(112, 52, 245, .18); }
.ob-dark .ob-badge__dot { background: var(--ob-lilac); box-shadow: 0 0 0 4px rgba(183, 156, 255, .16); }

.ob-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px;
  font: 600 .75rem/1 var(--ob-sans); letter-spacing: .01em; white-space: nowrap;
  background: var(--ob-mist-2); color: var(--ob-violet-600);
}
.ob-tag--amber { background: #FFF1DE; color: #9A5A00; }
.ob-tag--solid { background: var(--ob-violet); color: #fff; }
.ob-tag--dark { background: rgba(255, 255, 255, .08); color: #fff; }
.ob-tag--ok { background: var(--ob-ok-bg); color: #0B7A4A; }
.ob-tag .ob-i { width: 14px; height: 14px; }

.ob-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ob-line-2); background: #fff; color: var(--ob-text); font-size: .875rem; font-weight: 500;
  transition: border-color .2s, background .2s, color .2s;
}
.ob-chip:hover { border-color: var(--ob-violet); color: var(--ob-violet); }
.ob-chip.is-active, .ob-chip[aria-pressed="true"] { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; }
.ob-chip small { font-size: .75rem; opacity: .7; }
.ob-dark .ob-chip { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .14); color: var(--ob-fog-2); }
.ob-dark .ob-chip:hover { color: #fff; border-color: var(--ob-lilac); }

/* ---------------------------------------------------------------- buttons */
.ob-btn {
  --b-bg: var(--ob-violet); --b-fg: #fff; --b-bd: transparent; --d-bg: #fff; --d-fg: var(--ob-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; position: relative;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg); white-space: nowrap;
  font: 600 .96875rem/1 var(--ob-display); letter-spacing: -.01em;
  transition: background .25s var(--ob-ease), color .25s, border-color .25s, box-shadow .3s var(--ob-ease), transform .2s var(--ob-ease);
}
.ob-btn:has(.ob-btn__disc) { padding-right: 6px; }
.ob-btn__disc {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--d-bg); color: var(--d-fg); transition: transform .35s var(--ob-ease);
}
.ob-btn__disc .ob-i { width: 18px; height: 18px; }
.ob-btn:hover .ob-btn__disc { transform: rotate(-45deg); }
.ob-btn:active { transform: translateY(1px); }
.ob-btn--primary:hover { --b-bg: var(--ob-violet-600); box-shadow: var(--ob-glow); }
.ob-btn--light { --b-bg: #fff; --b-fg: var(--ob-ink); --d-bg: var(--ob-violet); --d-fg: #fff; }
.ob-btn--light:hover { --b-bg: var(--ob-mist); }
.ob-btn--dark { --b-bg: var(--ob-ink); --b-fg: #fff; --d-bg: #fff; --d-fg: var(--ob-ink); }
.ob-btn--dark:hover { --b-bg: #22183a; }
.ob-btn--outline { --b-bg: transparent; --b-fg: var(--ob-ink); --b-bd: var(--ob-line-2); --d-bg: var(--ob-ink); --d-fg: #fff; }
.ob-btn--outline:hover { --b-bd: var(--ob-violet); --d-bg: var(--ob-violet); }
.ob-btn--outline-dark { --b-bg: rgba(255, 255, 255, .02); --b-fg: #fff; --b-bd: rgba(255, 255, 255, .16); --d-bg: #fff; --d-fg: var(--ob-ink); }
.ob-btn--outline-dark:hover { --b-bd: rgba(255, 255, 255, .4); --b-bg: rgba(255, 255, 255, .06); }
.ob-btn--soft { --b-bg: var(--ob-mist-2); --b-fg: var(--ob-violet-600); --d-bg: var(--ob-violet); --d-fg: #fff; }
.ob-btn--soft:hover { --b-bg: var(--ob-mist-3); }
.ob-btn--danger { --b-bg: transparent; --b-fg: var(--ob-err); --b-bd: #F5C9CB; }
.ob-btn--danger:hover { --b-bg: var(--ob-err-bg); }
.ob-btn--sm { min-height: 42px; padding: 0 18px; font-size: .875rem; gap: 10px; }
.ob-btn--sm:has(.ob-btn__disc) { padding-right: 5px; }
.ob-btn--sm .ob-btn__disc { width: 32px; height: 32px; }
.ob-btn--sm .ob-btn__disc .ob-i { width: 15px; height: 15px; }
.ob-btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.03125rem; }
.ob-btn--lg .ob-btn__disc { width: 46px; height: 46px; }
.ob-btn--block { width: 100%; }
.ob-btn--block:has(.ob-btn__disc) { justify-content: space-between; padding-left: 24px; }
.ob-btn[disabled], .ob-btn.is-disabled { opacity: .5; pointer-events: none; }
.ob-btn.is-added { --b-bg: var(--ob-ok); --b-fg: #fff; --b-bd: transparent; }
.ob-btn.is-loading { pointer-events: none; opacity: .8; }

.ob-iconbtn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; position: relative; flex: none;
  color: #fff; transition: background .2s, color .2s;
}
.ob-iconbtn:hover { background: rgba(255, 255, 255, .08); }
.ob-iconbtn--light { color: var(--ob-ink); border: 1px solid var(--ob-line); }
.ob-iconbtn--light:hover { background: var(--ob-mist); }
.ob-iconbtn .ob-i { width: 22px; height: 22px; }
.ob-count {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--ob-violet-400); color: #fff; font: 700 .6875rem/18px var(--ob-sans); text-align: center;
  box-shadow: 0 0 0 2px var(--ob-void);
}
.ob-textbtn { font-weight: 600; font-size: .875rem; color: var(--ob-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: color .2s, text-decoration-color .2s; }
.ob-textbtn:hover { color: var(--ob-violet); text-decoration-color: currentColor; }
.ob-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------------------ cards */
.ob-card {
  background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--ob-shadow); position: relative;
}
.ob-card--mist { background: var(--ob-mist); border-color: #ECE3FF; box-shadow: none; }
.ob-card--flat { box-shadow: none; }
.ob-card--tight { padding: 20px; }
.ob-card--dark, .ob-dark .ob-card { background: var(--ob-panel); border-color: var(--ob-line-d); box-shadow: none; color: var(--ob-fog); }
.ob-card--hover { transition: transform .35s var(--ob-ease), box-shadow .35s var(--ob-ease), border-color .35s; }
.ob-card--hover:hover { transform: translateY(-4px); box-shadow: var(--ob-shadow-lg); border-color: var(--ob-mist-3); }
.ob-dark .ob-card--hover:hover { border-color: rgba(183, 156, 255, .35); box-shadow: 0 30px 60px -36px rgba(112, 52, 245, .7); }

.ob-feature { display: flex; flex-direction: column; gap: 14px; }
.ob-feature__icon { color: var(--ob-violet); }
.ob-feature__icon .ob-i { width: 40px; height: 40px; stroke-width: 1.5; }
.ob-feature__title { font: 700 1.1875rem/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.015em; }
.ob-feature__text { color: var(--ob-muted); font-size: .97rem; }
.ob-dark .ob-feature__title { color: #fff; }
.ob-dark .ob-feature__text { color: var(--ob-fog); }

/* ------------------------------------------------------------ section head */
.ob-head { max-width: 760px; }
.ob-head--center { margin-inline: auto; text-align: center; }
.ob-head--center .ob-badge { margin-inline: auto; }
.ob-head .ob-h2, .ob-head .ob-h1 { margin-top: 20px; }
.ob-head .ob-lead { margin-top: 18px; }

/* ----------------------------------------------------------------- header */
.ob-announce {
  background: var(--ob-void); color: var(--ob-fog); font-size: .8125rem; position: relative; z-index: 61;
}
.ob-announce__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.ob-announce__msg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob-announce__msg span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-announce__links { display: flex; gap: 20px; flex: none; }
.ob-announce__links a:hover { color: #fff; }
@media (max-width: 760px) { .ob-announce__links { display: none; } .ob-announce__in { justify-content: center; } }

.ob-header { position: sticky; top: 0; z-index: 60; padding: 10px 0 0; transition: transform .35s var(--ob-ease); pointer-events: none; }
.ob-header.is-hidden { transform: translateY(-120%); }
.ob-header__bar {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 20px;
  height: var(--ob-header-h); padding: 0 12px 0 24px; border-radius: 22px;
  background: radial-gradient(ellipse 46% 120% at 50% 110%, rgba(126, 64, 255, .62), rgba(126, 64, 255, 0) 70%), var(--ob-void);
  border: 1px solid rgba(255, 255, 255, .06); color: #fff;
  box-shadow: 0 18px 40px -24px rgba(13, 7, 24, .55);
}
.ob-header.is-stuck .ob-header__bar { box-shadow: 0 22px 50px -22px rgba(13, 7, 24, .7); }
.ob-brand { display: inline-flex; align-items: center; gap: 11px; font: 700 1.5rem/1 var(--ob-display); letter-spacing: -.035em; color: inherit; flex: none; }
.ob-brand__mark { width: 36px; height: 36px; flex: none; }
.ob-brand img { height: 32px; width: auto; }
.ob-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.ob-nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: 999px;
  font-size: .96875rem; font-weight: 500; color: rgba(255, 255, 255, .86); transition: color .2s, background .2s;
}
.ob-nav__link:hover, .ob-nav__link[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .07); }
.ob-nav__link.is-active { color: #fff; }
.ob-nav__link.is-active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ob-lilac); margin-left: 2px; }
.ob-nav__link .ob-i { width: 16px; height: 16px; transition: transform .25s; }
.ob-nav__link[aria-expanded="true"] .ob-i { transform: rotate(180deg); }
.ob-header__actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.ob-nav + .ob-header__actions { margin-left: 0; }
.ob-header__signin .ob-btn__disc { width: 34px; height: 34px; }
.ob-userpill {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 5px; border-radius: 999px;
  background: var(--ob-violet); color: #fff; font: 600 .9375rem/1 var(--ob-display);
}
.ob-userpill:hover { background: var(--ob-violet-600); }
.ob-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ob-violet);
  font: 700 .9375rem/1 var(--ob-display);
}
.ob-menu-btn { display: none; }
@media (max-width: 1080px) {
  .ob-nav { display: none; }
  .ob-menu-btn { display: inline-grid; }
}
@media (max-width: 560px) {
  .ob-header { padding-top: 8px; }
  .ob-header__bar { padding: 0 6px 0 16px; border-radius: 18px; height: 64px; gap: 8px; }
  .ob-brand { font-size: 1.3rem; }
  .ob-brand__mark { width: 30px; height: 30px; }
  .ob-header__signin, .ob-userpill { display: none; }
  .ob-header__search { display: none; }
}

/* mega panel */
.ob-flyout { position: static; }
.ob-mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ob-ease), transform .3s var(--ob-ease), visibility .25s;
}
.ob-mega.is-open { opacity: 1; visibility: visible; transform: none; }
.ob-mega__in {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; padding: 10px; border-radius: 24px;
  background: #fff; color: var(--ob-text); border: 1px solid var(--ob-line); box-shadow: 0 40px 90px -30px rgba(13, 7, 24, .45);
}
.ob-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px; }
.ob-mega__item { display: flex; gap: 14px; padding: 14px; border-radius: 16px; transition: background .2s; }
.ob-mega__item:hover, .ob-mega__item:focus-visible { background: var(--ob-mist); }
.ob-mega__name { font: 650 .96875rem/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.01em; }
.ob-mega__blurb { font-size: .8125rem; color: var(--ob-muted); margin-top: 3px; line-height: 1.5; }
.ob-mega__side {
  border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(126, 64, 255, .55), transparent 70%), var(--ob-void); color: var(--ob-fog);
}
.ob-mega__side .ob-h4 { color: #fff; }
.ob-mega__side .ob-btn { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------- drawers */
.ob-drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; }
.ob-drawer.is-open { visibility: visible; pointer-events: auto; }
.ob-drawer__scrim { position: absolute; inset: 0; background: rgba(7, 3, 15, .55); opacity: 0; transition: opacity .3s; backdrop-filter: blur(3px); }
.ob-drawer.is-open .ob-drawer__scrim { opacity: 1; }
.ob-drawer__panel {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100vw - 20px));
  background: #fff; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(110%); transition: transform .42s var(--ob-ease); box-shadow: 0 30px 80px -20px rgba(7, 3, 15, .5);
}
.ob-drawer.is-open .ob-drawer__panel { transform: none; }
.ob-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--ob-line); }
.ob-drawer__body { flex: 1; overflow-y: auto; padding: 8px 22px; overscroll-behavior: contain; }
.ob-drawer__foot { padding: 20px 22px 22px; border-top: 1px solid var(--ob-line); background: var(--ob-mist); }
.ob-drawer--dark .ob-drawer__panel {
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(126, 64, 255, .35), transparent 70%), var(--ob-void); color: var(--ob-fog-2);
}
.ob-drawer--dark .ob-drawer__head { border-color: var(--ob-line-d); color: #fff; }
.ob-drawer--dark .ob-drawer__foot { border-color: var(--ob-line-d); background: transparent; }

.ob-mnav { padding-top: 14px; }
.ob-mnav__main {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--ob-line-d);
  font: 600 1.25rem/1.2 var(--ob-display); color: #fff; letter-spacing: -.02em;
}
.ob-mnav__label { margin-top: 28px; font-size: .8125rem; color: var(--ob-fog); font-weight: 500; }
.ob-mnav__cats { display: grid; gap: 4px; margin-top: 10px; }
.ob-mnav__cats a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--ob-fog-2); font-size: .9375rem; }
.ob-mnav__cats a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.ob-mnav__cats small { margin-left: auto; color: var(--ob-fog); font-size: .75rem; }
.ob-mnav__cats .ob-i { color: var(--ob-lilac); }
.ob-mnav__search { margin-bottom: 8px; }

/* basket lines */
.ob-bline { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--ob-line); align-items: flex-start; }
.ob-bline:last-child { border-bottom: 0; }
.ob-mono {
  width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ob-mist-2), var(--ob-mist-3)); color: var(--ob-violet-600);
  font: 700 .9375rem/1 var(--ob-display); letter-spacing: -.02em; border: 1px solid var(--ob-mist-3);
}
.ob-mono--lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.2rem; }
.ob-qty { display: inline-flex; align-items: center; border: 1px solid var(--ob-line-2); border-radius: 999px; height: 34px; overflow: hidden; }
.ob-qty button, .ob-qty input { width: 34px; height: 100%; display: grid; place-items: center; font-weight: 600; color: var(--ob-ink); }
.ob-qty button:hover { background: var(--ob-mist); }
.ob-qty span, .ob-qty input { min-width: 30px; text-align: center; font-size: .875rem; font-weight: 600; border: 0; background: transparent; -moz-appearance: textfield; }
.ob-qty input::-webkit-outer-spin-button, .ob-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-qty--lg { height: 48px; }
.ob-qty--lg button, .ob-qty--lg input { width: 46px; }

/* ------------------------------------------------------------------- forms */
.ob-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ob-field + .ob-field { margin-top: 18px; }
.ob-label { font: 600 .875rem/1.3 var(--ob-sans); color: var(--ob-ink); }
.ob-label small, .ob-label .ob-opt { font-weight: 400; color: var(--ob-subtle); }
.ob-input, .ob-select, .ob-textarea {
  width: 100%; min-height: 52px; padding: 13px 18px; border-radius: 14px; border: 1px solid var(--ob-line-2);
  background: #fff; color: var(--ob-ink); font-size: 1rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none;
}
.ob-textarea { min-height: 140px; resize: vertical; }
.ob-select {
  padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%237034F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.ob-input::placeholder, .ob-textarea::placeholder { color: #A39DB5; }
.ob-input:hover, .ob-select:hover, .ob-textarea:hover { border-color: #CFC3EC; }
.ob-input:focus, .ob-select:focus, .ob-textarea:focus { outline: none; border-color: var(--ob-violet); box-shadow: 0 0 0 4px rgba(112, 52, 245, .14); }
.ob-input[aria-invalid="true"], .ob-input.is-invalid, .ob-select.is-invalid, .ob-textarea.is-invalid { border-color: var(--ob-err); box-shadow: 0 0 0 4px rgba(220, 61, 67, .1); }
.ob-input[readonly], .ob-input:disabled { background: var(--ob-mist); color: var(--ob-muted); }
.ob-help { font-size: .8125rem; color: var(--ob-subtle); }
.ob-error { font-size: .8125rem; color: var(--ob-err); font-weight: 500; }
.ob-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ob-form-grid .ob-field + .ob-field { margin-top: 0; }
.ob-form-grid .ob-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .ob-form-grid { grid-template-columns: 1fr; } }
.ob-pwd { position: relative; }
.ob-pwd .ob-input { padding-right: 76px; }
.ob-pwd button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border-radius: 10px; font-size: .8125rem; font-weight: 600; color: var(--ob-violet); }
.ob-pwd button:hover { background: var(--ob-mist); }

.ob-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--ob-text); cursor: pointer; line-height: 1.5; }
.ob-check input { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; border: 1.5px solid #C9BEE6; background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.ob-check input[type="radio"] { border-radius: 50%; }
.ob-check input:checked { background: var(--ob-violet); border-color: var(--ob-violet); }
.ob-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.ob-check input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.ob-check input:focus-visible { outline: 3px solid var(--ob-lilac); outline-offset: 2px; }

/* pill input with inline button (hero search, CTA) */
.ob-pillform {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 26px; border-radius: 999px; max-width: 640px;
  background: #fff; border: 1px solid var(--ob-line-2); box-shadow: var(--ob-shadow);
}
.ob-pillform input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font-size: 1rem; color: var(--ob-ink); }
.ob-pillform input::placeholder { color: #9C95B0; }
.ob-pillform input:focus { outline: none; }
.ob-pillform:focus-within { border-color: var(--ob-violet); box-shadow: 0 0 0 4px rgba(112, 52, 245, .14); }
.ob-pillform .ob-btn { flex: none; }
.ob-dark .ob-pillform, .ob-pillform--dark { background: #120A22; border-color: rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -30px rgba(112, 52, 245, .65); }
.ob-dark .ob-pillform input, .ob-pillform--dark input { color: #fff; }
.ob-dark .ob-pillform input::placeholder, .ob-pillform--dark input::placeholder { color: #857D9C; }
.ob-dark .ob-pillform:focus-within { border-color: var(--ob-violet-400); box-shadow: 0 0 0 4px rgba(140, 91, 255, .2), 0 30px 70px -30px rgba(112, 52, 245, .65); }
@media (max-width: 560px) {
  .ob-pillform { flex-direction: column; align-items: stretch; border-radius: 26px; padding: 8px; }
  .ob-pillform input { padding: 0 14px; }
  .ob-pillform .ob-btn { width: 100%; justify-content: space-between; padding-left: 22px; }
}

/* alerts */
.ob-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; font-size: .9375rem; line-height: 1.55; border: 1px solid transparent; }
.ob-alert .ob-i { width: 20px; height: 20px; margin-top: 1px; }
.ob-alert--ok { background: var(--ob-ok-bg); color: #0B6B42; border-color: #C5EED9; }
.ob-alert--err { background: var(--ob-err-bg); color: #A6272C; border-color: #F7CFD1; }
.ob-alert--info { background: var(--ob-mist); color: var(--ob-violet-700); border-color: var(--ob-mist-3); }
.ob-alert--warn { background: var(--ob-warn-bg); color: #8A5200; border-color: #FBE1B7; }

/* status pills */
.ob-status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.ob-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ob-status--paid { background: var(--ob-mist-2); color: var(--ob-violet-600); }
.ob-status--live { background: #E8F0FF; color: #2459D6; }
.ob-status--done { background: var(--ob-ok-bg); color: #0B7A4A; }
.ob-status--pending { background: var(--ob-warn-bg); color: #965B00; }
.ob-status--failed { background: var(--ob-err-bg); color: #B4292F; }

/* tables */
.ob-table-wrap { overflow-x: auto; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: #fff; }
.ob-table { font-size: .9375rem; min-width: 560px; }
.ob-table th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--ob-subtle); padding: 14px 18px; background: var(--ob-mist); border-bottom: 1px solid var(--ob-line); white-space: nowrap; }
.ob-table td { padding: 16px 18px; border-bottom: 1px solid var(--ob-line); vertical-align: middle; }
.ob-table tr:last-child td { border-bottom: 0; }
.ob-table tbody tr:hover td { background: #FCFAFF; }

/* summary rows (cart, checkout, orders) */
.ob-sumrow { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .9375rem; color: var(--ob-muted); }
.ob-sumrow b, .ob-sumrow strong { color: var(--ob-ink); font-weight: 600; }
.ob-sumrow--total { border-top: 1px solid var(--ob-line); margin-top: 8px; padding-top: 16px; color: var(--ob-ink); font-weight: 600; align-items: baseline; }
.ob-sumrow--total .ob-price { font-size: 1.75rem; }
.ob-sumrow--disc { color: var(--ob-ok); }

/* key/value list */
.ob-kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; font-size: .9375rem; }
.ob-kv dt { color: var(--ob-subtle); }
.ob-kv dd { color: var(--ob-ink); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- breadcrumbs */
.ob-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; color: var(--ob-fog); }
.ob-crumbs a:hover { color: #fff; }
.ob-crumbs__sep { opacity: .5; }
.ob-crumbs [aria-current] { color: #fff; }
.ob-crumbs--light { color: var(--ob-subtle); }
.ob-crumbs--light a:hover { color: var(--ob-violet); }
.ob-crumbs--light [aria-current] { color: var(--ob-ink); }

/* ------------------------------------------------------------ page hero */
.ob-pagehero {
  position: relative; isolation: isolate; overflow: hidden; background: var(--ob-void); color: var(--ob-fog);
  margin-top: calc(-1 * (var(--ob-header-h) + 10px)); padding: calc(var(--ob-header-h) + 70px) 0 clamp(56px, 7vw, 92px);
}
.ob-pagehero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(183, 156, 255, .35), transparent);
}
.ob-pagehero__glow { position: absolute; z-index: -1; width: 900px; height: 520px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(126, 64, 255, .55), transparent); filter: blur(20px); pointer-events: none; }
.ob-pagehero .ob-h1 { color: #fff; margin-top: 20px; max-width: 20ch; }
.ob-pagehero .ob-lead { margin-top: 18px; max-width: 62ch; }
.ob-pagehero--center { text-align: center; }
.ob-pagehero--center .ob-h1, .ob-pagehero--center .ob-lead { margin-inline: auto; }
.ob-pagehero--center .ob-crumbs { justify-content: center; }
.ob-pagehero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
@media (max-width: 900px) { .ob-pagehero__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- accordion / FAQ */
.ob-acc { border-top: 1px solid var(--ob-line); }
.ob-acc__item { border-bottom: 1px solid var(--ob-line); }
.ob-acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left;
  padding: 22px 2px; font: 650 1.0625rem/1.4 var(--ob-display); color: var(--ob-ink); letter-spacing: -.012em;
}
.ob-acc__btn:hover { color: var(--ob-violet); }
.ob-acc__sign { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ob-mist-2); color: var(--ob-violet); transition: transform .3s var(--ob-ease), background .3s, color .3s; }
.ob-acc__sign .ob-i { width: 16px; height: 16px; }
.ob-acc__item.is-open .ob-acc__sign { transform: rotate(45deg); background: var(--ob-violet); color: #fff; }
.ob-acc__body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ob-ease); }
.ob-acc__body > div { padding: 0 52px 24px 2px; color: var(--ob-muted); line-height: 1.75; }
.ob-acc--cards { border: 0; display: grid; gap: 12px; }
.ob-acc--cards .ob-acc__item { border: 1px solid var(--ob-line); border-radius: 20px; background: #fff; padding: 0 22px; transition: border-color .25s, box-shadow .25s; }
.ob-acc--cards .ob-acc__item.is-open { border-color: var(--ob-mist-3); box-shadow: var(--ob-shadow); }
.ob-dark .ob-acc__btn { color: #fff; }
.ob-dark .ob-acc, .ob-dark .ob-acc__item { border-color: var(--ob-line-d); }
.ob-dark .ob-acc__body > div { color: var(--ob-fog); }

/* ------------------------------------------------------------------ tabs */
.ob-tabs { display: inline-flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--ob-mist); border: 1px solid var(--ob-line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ob-tabs::-webkit-scrollbar { display: none; }
.ob-tab { height: 44px; padding: 0 22px; border-radius: 999px; font: 600 .9375rem/1 var(--ob-display); color: var(--ob-muted); white-space: nowrap; transition: background .25s, color .25s; }
.ob-tab:hover { color: var(--ob-ink); }
.ob-tab.is-active { background: var(--ob-violet); color: #fff; box-shadow: 0 8px 20px -10px rgba(112, 52, 245, .8); }
.ob-dark .ob-tabs { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); }
.ob-dark .ob-tab { color: var(--ob-fog); }
.ob-dark .ob-tab:hover { color: #fff; }
.ob-dark .ob-tab.is-active { color: #fff; }

/* ------------------------------------------------------------- toasts */
.ob-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 150; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.ob-toast {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--ob-void); color: #fff;
  font-size: .9375rem; box-shadow: 0 20px 50px -20px rgba(7, 3, 15, .6); border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .35s var(--ob-ease);
}
.ob-toast .ob-i { color: var(--ob-lilac); width: 20px; height: 20px; }
.ob-toast.is-in { opacity: 1; transform: none; }
.ob-toast--err .ob-i { color: #FF8A8E; }

/* load ribbon */
.ob-ribbon { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: linear-gradient(90deg, var(--ob-lilac), var(--ob-violet)); transform-origin: left; transform: scaleX(0); opacity: 0; transition: transform 1.6s var(--ob-ease), opacity .3s; pointer-events: none; }

/* ------------------------------------------------------------ reveal */
.ob-js .ob-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ob-ease), transform .8s var(--ob-ease); }
.ob-js .ob-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ob-js .ob-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- service card */
.ob-svc {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg);
  padding: 24px; position: relative; min-width: 0; height: 100%;
  transition: transform .35s var(--ob-ease), box-shadow .35s var(--ob-ease), border-color .35s;
}
.ob-svc:hover { transform: translateY(-4px); border-color: var(--ob-mist-3); box-shadow: var(--ob-shadow-lg); }
.ob-svc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ob-svc__cat { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 500; color: var(--ob-muted); min-width: 0; }
.ob-svc__cat span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-svc__title { margin-top: 20px; font: 700 1.1875rem/1.3 var(--ob-display); letter-spacing: -.018em; color: var(--ob-ink); }
.ob-svc__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.ob-svc__title a:hover { color: var(--ob-violet); }
.ob-svc__desc { margin-top: 10px; font-size: .9375rem; color: var(--ob-muted); line-height: 1.6; }
.ob-svc__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: .8125rem; color: var(--ob-subtle); }
.ob-svc__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ob-svc__meta .ob-i { width: 15px; height: 15px; color: var(--ob-violet); }
.ob-svc__foot { margin-top: auto; padding-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ob-svc__foot { position: relative; }
.ob-svc__foot .ob-meta { font-size: .75rem; }
.ob-svc__add {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--ob-violet); color: #fff; transition: background .25s, transform .3s var(--ob-ease), box-shadow .3s;
}
.ob-svc__add:hover { background: var(--ob-violet-600); transform: rotate(90deg); box-shadow: var(--ob-glow); }
.ob-svc__add.is-added { background: var(--ob-ok); transform: none; }
.ob-svc__add .ob-i { width: 20px; height: 20px; }
.ob-svc__sep { margin-top: 18px; border-top: 1px dashed var(--ob-line-2); }
.ob-svc .ob-tag { position: relative; z-index: 1; }

.ob-svc--row { flex-direction: row; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; height: auto; }
.ob-svc--row:hover { transform: none; box-shadow: var(--ob-shadow); }

.ob-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ob-violet); color: #fff; box-shadow: var(--ob-glow);
}
.ob-wa .ob-i { width: 26px; height: 26px; }

/* ----------------------------------------------------------- empty state */
.ob-empty { text-align: center; padding: clamp(40px, 6vw, 72px) 24px; border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-lg); background: var(--ob-mist); }
.ob-empty .ob-tile { margin-inline: auto; }

/* ------------------------------------------------------------- pagination */
.ob-pager { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ob-pager a, .ob-pager span { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; font-weight: 600; font-size: .9375rem; border: 1px solid var(--ob-line); color: var(--ob-text); }
.ob-pager a:hover { border-color: var(--ob-violet); color: var(--ob-violet); }
.ob-pager .is-current { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; }

/* ---------------------------------------------------------- search overlay */
.ob-search { position: fixed; inset: 0; z-index: 130; visibility: hidden; pointer-events: none; }
.ob-search.is-open { visibility: visible; pointer-events: auto; }
.ob-search__scrim { position: absolute; inset: 0; background: rgba(7, 3, 15, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.ob-search.is-open .ob-search__scrim { opacity: 1; }
.ob-search__panel {
  position: relative; width: min(760px, calc(100vw - 32px)); margin: clamp(80px, 14vh, 140px) auto 0; padding: 28px; border-radius: 28px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(126, 64, 255, .4), transparent 70%), var(--ob-night);
  border: 1px solid rgba(255, 255, 255, .08); opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .4s var(--ob-ease);
}
.ob-search.is-open .ob-search__panel { opacity: 1; transform: none; }
.ob-search .ob-pillform { max-width: none; padding-left: 18px; }
.ob-search__icon { color: var(--ob-fog); }
.ob-search__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.ob-search__chips .ob-meta { color: var(--ob-fog); margin-right: 6px; }
.ob-search__chips .ob-chip { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); color: var(--ob-fog-2); }
.ob-search__chips .ob-chip:hover { color: #fff; border-color: var(--ob-lilac); }
.ob-search__close { position: absolute; top: -56px; right: 0; background: rgba(255, 255, 255, .08); }
@media (max-width: 560px) { .ob-search__panel { padding: 18px; margin-top: 80px; } }

/* -------------------------------------------------------------- end CTA */
.ob-endcta { overflow: hidden; padding-block: clamp(80px, 10vw, 140px); }
.ob-endcta .ob-pillform { margin-inline: auto; }

/* ----------------------------------------------------------------- footer */
.ob-footer { background: #fff; padding: clamp(48px, 6vw, 80px) 0 28px; color: var(--ob-muted); }
.ob-footer h3 { font: 650 1.0625rem/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.01em; }
.ob-footer__top { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; }
.ob-footer__brand, .ob-footer__links, .ob-footer__card {
  border-radius: var(--ob-r-lg); border: 1px solid #EEE7FC; background: linear-gradient(180deg, var(--ob-mist), #fff 120%); padding: clamp(24px, 3vw, 40px);
}
.ob-footer__brand { position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; }
.ob-footer__brand .ob-brand { font-size: 1.75rem; color: var(--ob-ink); }
.ob-footer__links a.ob-hl { color: var(--ob-violet); font-weight: 600; }
.ob-footer__brand .ob-brand__mark { width: 42px; height: 42px; }
.ob-footer__blurb { margin-top: 18px; max-width: 44ch; font-size: .97rem; line-height: 1.7; position: relative; z-index: 1; }
.ob-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; z-index: 1; }
.ob-footer__word {
  margin-top: auto; padding-top: 28px; font: 800 clamp(4.5rem, 3rem + 6vw, 8.5rem)/.8 var(--ob-display); letter-spacing: -.06em;
  background: linear-gradient(180deg, rgba(112, 52, 245, .17), rgba(112, 52, 245, 0) 88%); -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none; margin-bottom: -18px;
}
.ob-footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ob-footer__links ul { margin-top: 22px; display: grid; gap: 12px; }
.ob-footer__links a, .ob-footer__legal-links a { color: var(--ob-muted); font-size: .97rem; transition: color .2s; }
.ob-footer__links a:hover, .ob-footer__legal-links a:hover, .ob-footer__reach a:hover { color: var(--ob-violet); }
.ob-footer__mid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; margin-top: 20px; }
.ob-footer__card { background: #fff; }
.ob-footer__reach { margin-top: 16px; display: grid; gap: 10px; font-size: .95rem; }
.ob-footer__reach li { display: flex; align-items: center; gap: 10px; }
.ob-footer__reach .ob-i { color: var(--ob-violet); }
.ob-footer__card > p { margin-top: 16px; }
.ob-footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.ob-footer__legal { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--ob-line-2); font-size: .8125rem; line-height: 1.7; display: grid; gap: 4px; }
.ob-footer__legal b { color: var(--ob-ink); font-weight: 600; }
.ob-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ob-line); font-size: .8125rem; color: var(--ob-subtle); }
.ob-footer__bottom a:hover { color: var(--ob-violet); }
@media (max-width: 960px) { .ob-footer__top, .ob-footer__mid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ob-footer__links { grid-template-columns: 1fr 1fr; } .ob-footer__links nav:first-child { grid-column: 1 / -1; } }

/* -------------------------------------------------------- document pages */
.ob-docgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ob-docgrid__main { max-width: 800px; }
.ob-toc { display: grid; gap: 2px; }
.ob-toc a { display: block; padding: 8px 12px; border-radius: 10px; font-size: .875rem; color: var(--ob-muted); border-left: 2px solid transparent; transition: background .2s, color .2s; }
.ob-toc a:hover { color: var(--ob-ink); background: #fff; }
.ob-toc a.is-active { color: var(--ob-violet); background: #fff; font-weight: 600; }
.ob-docsec { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--ob-line); scroll-margin-top: 110px; }
.ob-docsec:last-child { border-bottom: 0; margin-bottom: 0; }
@media (max-width: 960px) {
  .ob-docgrid { grid-template-columns: 1fr; }
  .ob-docgrid__side { position: static; }
  .ob-docgrid__side .ob-card + .ob-card { display: none; }
  .ob-toc { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
/* =============================================================================
   Orbex — homepage (oh-*)
   ============================================================================= */

/* hero ---------------------------------------------------------------- */
.oh-hero {
  overflow: hidden; margin-top: calc(-1 * (var(--ob-header-h) + 10px));
  padding: calc(var(--ob-header-h) + clamp(56px, 7vw, 96px)) 0 clamp(72px, 8vw, 110px);
}
.oh-hero__title { margin-top: 26px; max-width: 16ch; }
.oh-hero__orbit { position: absolute; z-index: -1; right: -180px; top: 60px; width: 640px; height: 640px; pointer-events: none; opacity: .9; }
.oh-hero__orbit span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(183, 156, 255, .14); }
.oh-hero__orbit span:nth-child(2) { inset: 90px; border-color: rgba(183, 156, 255, .1); }
.oh-hero__orbit i {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--ob-lilac);
  box-shadow: 0 0 18px 4px rgba(183, 156, 255, .6); animation: ob-orbit 22s linear infinite;
}
@keyframes ob-orbit { from { transform: rotate(0deg) translateX(320px); } to { transform: rotate(360deg) translateX(320px); } }
.oh-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(48px, 6vw, 80px); align-items: stretch; }
.oh-hero__card {
  border-radius: var(--ob-r-lg); padding: clamp(24px, 2.6vw, 34px); background: rgba(20, 12, 37, .72); border: 1px solid var(--ob-line-d);
  display: flex; flex-direction: column; min-height: 230px; backdrop-filter: blur(4px);
}
.oh-hero__num { font: 700 clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem)/1.05 var(--ob-display); color: #fff; letter-spacing: -.035em; }
.oh-hero__cap { margin-top: 10px; color: var(--ob-fog); font-size: .97rem; }
.oh-hero__tiles { display: flex; margin-top: auto; padding-top: 24px; }
.oh-hero__tiles span {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-right: -9px;
  background: linear-gradient(160deg, #8B5BFF, #4A17BD); color: #fff; border: 3px solid #140C25;
}
.oh-hero__tiles span:nth-child(2n) { background: linear-gradient(160deg, #B79CFF, #7034F5); }
.oh-hero__tiles .ob-i { width: 18px; height: 18px; }
.oh-hero__more { background: #2A1F45 !important; font: 700 .8125rem/1 var(--ob-display); }
.oh-hero__prices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.oh-hero__prices span { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-grid; place-items: center; font: 650 .875rem/1 var(--ob-display); color: #fff; border: 1px solid rgba(183, 156, 255, .3); background: rgba(112, 52, 245, .14); }
.oh-hero__side { align-self: center; padding-left: clamp(0px, 1.5vw, 20px); }
.oh-hero__side .ob-lead { color: var(--ob-fog-2); }
.oh-hero__side .ob-pillform { max-width: none; }
.oh-hero__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 1100px) {
  .oh-hero__grid { grid-template-columns: 1fr 1fr; }
  .oh-hero__side { grid-column: 1 / -1; order: -1; padding-left: 0; }
}
@media (max-width: 600px) {
  .oh-hero__grid { grid-template-columns: 1fr; }
  .oh-hero__card { min-height: 0; }
  .oh-hero__orbit { width: 420px; height: 420px; right: -220px; top: 30px; }
  .oh-hero__orbit i { animation-name: ob-orbit-s; }
}
@keyframes ob-orbit-s { from { transform: rotate(0deg) translateX(210px); } to { transform: rotate(360deg) translateX(210px); } }

/* statement ------------------------------------------------------------- */
.oh-statement { text-align: center; }
.oh-statement__text {
  margin: 44px auto 0; max-width: 24ch; font: 700 clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem)/1.18 var(--ob-display);
  letter-spacing: -.035em; color: var(--ob-ink);
}
.oh-statement .ob-feature { text-align: left; }

/* practices strip -------------------------------------------------------- */
.oh-practices { border-block: 1px solid var(--ob-line); padding: clamp(56px, 7vw, 96px) 0; }
.oh-practices__title { text-align: center; font: 500 1.0625rem/1.4 var(--ob-sans); color: var(--ob-ink); letter-spacing: -.005em; }
.oh-practices__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.oh-pill {
  flex: 0 1 calc(25% - 12px); min-width: 230px; height: 92px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 22px; border: 1px solid var(--ob-line-2); background: rgba(255, 255, 255, .75); backdrop-filter: blur(2px);
  font: 650 1.0625rem/1.25 var(--ob-display); color: #4C4662; letter-spacing: -.015em; text-align: center;
  transition: border-color .3s, color .3s, background .3s, transform .3s var(--ob-ease);
}
.oh-pill .ob-i { color: var(--ob-violet); width: 24px; height: 24px; }
.oh-pill:hover { border-color: var(--ob-violet); color: var(--ob-ink); background: #fff; transform: translateY(-2px); }
@media (max-width: 680px) { .oh-pill { flex-basis: 100%; height: 68px; } }

/* bento ---------------------------------------------------------------- */
.oh-bento { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 24px; }
.oh-bento .ob-card { padding: clamp(26px, 3.2vw, 44px); }
.oh-flow { position: relative; margin-top: 40px; text-align: center; }
.oh-flow__root {
  display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 12px; background: #fff; border: 1px solid var(--ob-line);
  font: 650 1rem/1 var(--ob-display); color: var(--ob-ink); box-shadow: var(--ob-shadow); position: relative; z-index: 1;
}
.oh-flow__steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 56px; padding-top: 0; }
.oh-flow__steps::before { content: ""; position: absolute; left: 50%; top: -56px; height: 56px; border-left: 1px solid var(--ob-line-2); }
.oh-flow__steps::after { content: ""; position: absolute; left: 0; right: 0; top: 52px; border-top: 1px solid var(--ob-line-2); z-index: 0; }
.oh-flow__steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.oh-flow__disc {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ob-violet);
  box-shadow: 0 14px 34px -18px rgba(76, 36, 170, .45); border: 1px solid #F0EAFD; transition: transform .35s var(--ob-ease), background .3s, color .3s;
}
.oh-flow__disc .ob-i { width: 38px; height: 38px; stroke-width: 1.5; }
.oh-flow__steps li:hover .oh-flow__disc { transform: translateY(-4px); background: var(--ob-violet); color: #fff; }
.oh-flow__steps b { margin-top: 10px; font: 650 1rem/1.3 var(--ob-display); color: var(--ob-ink); }
.oh-flow__steps span:last-child { font-size: .8125rem; color: var(--ob-muted); line-height: 1.5; max-width: 16ch; }
@media (max-width: 760px) {
  .oh-flow { text-align: left; }
  .oh-flow__root { display: none; }
  .oh-flow__steps { grid-template-columns: 1fr; margin-top: 0; gap: 0; }
  .oh-flow__steps::before { display: none; }
  .oh-flow__steps::after { left: 31px; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 1px solid var(--ob-line-2); }
  .oh-flow__steps li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 16px; text-align: left; padding: 10px 0; }
  .oh-flow__disc { width: 64px; height: 64px; grid-row: span 2; }
  .oh-flow__disc .ob-i { width: 26px; height: 26px; }
  .oh-flow__steps b { margin-top: 0; align-self: end; }
  .oh-flow__steps span:last-child { max-width: none; align-self: start; }
}
.oh-bento__ask { display: flex; flex-direction: column; }
.oh-ask { margin-top: auto; padding-top: 28px; position: relative; }
.oh-ask textarea {
  width: 100%; min-height: 128px; resize: none; border-radius: 18px; border: 1px solid var(--ob-line); background: #fff; padding: 18px 20px 64px;
  font-size: .97rem; color: var(--ob-ink); box-shadow: var(--ob-shadow);
}
.oh-ask textarea:focus { outline: none; border-color: var(--ob-violet); box-shadow: 0 0 0 4px rgba(112, 52, 245, .14); }
.oh-ask__bar { position: absolute; left: 16px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.oh-ask__bar .ob-svc__add { width: 42px; height: 42px; }
.oh-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }
.oh-ask__chips .ob-chip { height: 32px; font-size: .8125rem; background: #fff; }
@media (max-width: 960px) { .oh-bento { grid-template-columns: 1fr; } }

/* orbs ---------------------------------------------------------------- */
.oh-orbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 5vw, 64px); align-items: center; }
.oh-orb {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--ob-line); position: relative; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #fff 55%, #FBF9FF);
}
.oh-orb + .oh-orb { margin-left: -1px; }
.oh-orb--icons { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 16%; gap: 0; }
.oh-orb--icons::before, .oh-orb--icons::after { content: ""; position: absolute; background: var(--ob-line); }
.oh-orb--icons::before { left: 50%; top: 15%; bottom: 15%; width: 1px; }
.oh-orb--icons::after { top: 50%; left: 13%; right: 13%; height: 1px; }
.oh-orb__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 18% !important; gap: 10px; text-align: center; padding: 8px; position: relative; z-index: 1; }
.oh-orb__disc {
  width: clamp(58px, 6vw, 84px); height: clamp(58px, 6vw, 84px); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, #8B5BFF, #5B21DF); color: #fff; border: 5px solid #fff;
  box-shadow: 0 12px 28px -12px rgba(76, 36, 170, .55); transition: transform .35s var(--ob-ease);
}
.oh-orb__item:nth-child(2) .oh-orb__disc, .oh-orb__item:nth-child(3) .oh-orb__disc { background: linear-gradient(160deg, #B79CFF, #7034F5); }
.oh-orb__disc .ob-i { width: 30px; height: 30px; }
.oh-orb__item:hover .oh-orb__disc { transform: scale(1.06); }
.oh-orb__name { font: 600 .8125rem/1.3 var(--ob-display); color: var(--ob-text); max-width: 14ch; }
.oh-orb__item:hover .oh-orb__name { color: var(--ob-violet); }
.oh-orb--center { padding: 14%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.oh-orb__lead { font: 700 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.03em; }
.oh-orb--center hr { width: 80%; margin: clamp(18px, 2.4vw, 30px) auto; border-color: var(--ob-line-2); }
.oh-orb__price { font: 700 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--ob-display); color: var(--ob-ink); letter-spacing: -.03em; }
.oh-orb__price span { display: block; margin-top: 8px; font: 500 .875rem/1.3 var(--ob-sans); color: var(--ob-subtle); letter-spacing: 0; }
@media (max-width: 960px) {
  .oh-orbs { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .oh-orb + .oh-orb { margin-left: 0; margin-top: -1px; }
  .oh-orb--center { order: -1; }
}

/* why ---------------------------------------------------------------- */
.oh-why__card { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 290px; }
.oh-why__card .ob-tile { width: 60px; height: 60px; }
.oh-why__grid > :nth-child(2) { margin-top: 40px; margin-bottom: -40px; }
.oh-why { padding-bottom: clamp(100px, 11vw, 150px); }
@media (max-width: 1100px) { .oh-why__grid > :nth-child(2) { margin: 0; } .oh-why__card { min-height: 0; gap: 32px; } }

/* pricing ---------------------------------------------------------------- */
.oh-pricing { padding-top: 0; }
.oh-pricing::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(183, 156, 255, .25), transparent); }
.oh-pricing .ob-head { padding-top: clamp(72px, 9vw, 120px); }
.oh-seg { display: flex; width: max-content; max-width: 100%; margin: 40px auto 0; padding: 7px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.oh-seg button { height: 50px; padding: 0 26px; border-radius: 999px; font: 600 1rem/1 var(--ob-display); color: var(--ob-fog); white-space: nowrap; transition: background .25s, color .25s; }
.oh-seg button:hover { color: #fff; }
.oh-seg button.is-active { background: var(--ob-violet); color: #fff; box-shadow: 0 10px 24px -10px rgba(112, 52, 245, .9); }
.oh-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-radius: var(--ob-r-lg); background: var(--ob-panel); border: 1px solid var(--ob-line-d); }
.oh-tier { position: relative; padding: clamp(28px, 3vw, 44px) clamp(22px, 2.6vw, 40px); display: flex; flex-direction: column; text-align: center; border-radius: var(--ob-r-lg); }
.oh-tier.is-hot { background: #0A0516; border: 1px solid var(--ob-violet); margin: -1px 0; box-shadow: 0 30px 80px -40px rgba(112, 52, 245, .9); }
.oh-tier__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); }
.oh-tier__name { font: 700 1.375rem/1.25 var(--ob-display); color: #fff; letter-spacing: -.02em; }
.oh-tier__name a:hover { color: var(--ob-lilac); }
.oh-tier__lead { margin-top: 12px; font-size: .95rem; color: var(--ob-fog); min-height: 4.8em; }
.oh-tier__price { padding: 28px 0; margin: 24px 0; border-block: 1px solid var(--ob-line-d); }
.oh-tier__price p { font: 700 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--ob-display); color: #fff; letter-spacing: -.04em; }
.oh-tier__price span { display: block; margin-top: 10px; color: var(--ob-fog); font-size: .95rem; }
.oh-tier__list { display: grid; gap: 10px; text-align: left; font-size: .9375rem; color: var(--ob-fog-2); margin-bottom: 28px; }
.oh-tier__list li { display: flex; gap: 10px; align-items: flex-start; }
.oh-tier__list .ob-i { color: var(--ob-lilac); margin-top: 3px; }
.oh-tier .ob-btn { margin-top: auto; align-self: center; }
.oh-tier__foot { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: .875rem; color: var(--ob-fog); }
@media (max-width: 960px) {
  .oh-tiers { grid-template-columns: 1fr; background: transparent; border: 0; gap: 16px; }
  .oh-tier { background: var(--ob-panel); border: 1px solid var(--ob-line-d); }
  .oh-tier.is-hot { margin: 8px 0; }
  .oh-tier__lead { min-height: 0; }
}
.oh-deeper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.oh-deeper__item {
  display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 22px 24px; border-radius: 20px;
  background: var(--ob-panel); border: 1px solid var(--ob-line-d); transition: border-color .3s, background .3s;
}
.oh-deeper__item:hover { border-color: rgba(183, 156, 255, .45); background: #1A1030; }
.oh-deeper__item b { display: block; font: 650 1.0625rem/1.3 var(--ob-display); color: #fff; }
.oh-deeper__item .ob-clamp-2 { margin-top: 6px; font-size: .875rem; color: var(--ob-fog); }
.oh-deeper__price { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 700 1.25rem/1 var(--ob-display); color: #fff; }
.oh-deeper__price .ob-i { color: var(--ob-lilac); }
@media (max-width: 760px) { .oh-deeper { grid-template-columns: 1fr; } }

/* secure ---------------------------------------------------------------- */
.oh-secure__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 640px) { .oh-secure__points { grid-template-columns: 1fr; } }
.oh-vault { position: relative; padding-top: 110px; max-width: 560px; margin-left: auto; width: 100%; }
.oh-vault__arc { position: absolute; left: 50%; top: 0; width: 66%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 1px solid var(--ob-line); background: radial-gradient(circle, #fff 60%, #FAF7FF); }
.oh-vault__card { position: relative; z-index: 2; background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); padding: 0 28px 34px; box-shadow: var(--ob-shadow-lg); }
.oh-vault__core {
  width: 200px; height: 200px; margin: -100px auto 0; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #9E73FF, #6A2BF2 60%, #5517D8); box-shadow: 0 0 0 18px rgba(140, 91, 255, .12), 0 30px 70px -20px rgba(112, 52, 245, .8);
}
.oh-vault__core .ob-i { width: 76px; height: 76px; stroke-width: 1.7; }
.oh-vault__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.oh-vault__chips span {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; font: 600 .97rem/1 var(--ob-display);
  background: #fff; border: 1px solid var(--ob-line); color: var(--ob-ink); box-shadow: 0 6px 16px -10px rgba(76, 36, 170, .35);
}
.oh-vault__chips span .ob-i { color: var(--ob-violet); }
.oh-vault__chips span.is-on { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; }
.oh-vault__chips span.is-on .ob-i { color: #fff; }
.oh-vault__stack { position: relative; z-index: 1; height: 16px; margin: 0 22px; border: 1px solid var(--ob-line); border-top: 0; border-radius: 0 0 20px 20px; background: #fff; }
.oh-vault__stack--2 { z-index: 0; margin: 0 44px; }
@media (max-width: 900px) { .oh-vault { margin-inline: auto; } }
@media (max-width: 480px) { .oh-vault__core { width: 150px; height: 150px; margin-top: -75px; } .oh-vault__core .ob-i { width: 56px; height: 56px; } .oh-vault { padding-top: 80px; } }
@media (max-width: 400px) { .oh-seg { width: 100%; } .oh-seg button { flex: 1; padding: 0 12px; font-size: .875rem; } }
/* =============================================================================
   Orbex — catalogue, practice, service detail and 404 pages (oc-*)
   ============================================================================= */

/* shared hero bits ----------------------------------------------------- */
.oc-hero__ring { position: absolute; z-index: -1; pointer-events: none; width: 760px; height: 760px; left: 50%; top: 40px; transform: translateX(-50%); }
.oc-hero__ring span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(183, 156, 255, .12); }
.oc-hero__ring span:nth-child(2) { inset: 110px; border-color: rgba(183, 156, 255, .08); }
.oc-hero__ring i {
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--ob-lilac);
  box-shadow: 0 0 16px 4px rgba(183, 156, 255, .55); animation: oc-orbit 26s linear infinite;
}
@keyframes oc-orbit { from { transform: rotate(0deg) translateX(380px); } to { transform: rotate(360deg) translateX(380px); } }
.oc-hero__ring--right { left: auto; right: -260px; top: -40px; transform: none; width: 680px; height: 680px; }
.oc-hero__ring--center { top: 10px; }
@media (max-width: 760px) {
  .oc-hero__ring { width: 460px; height: 460px; }
  .oc-hero__ring span:nth-child(2) { inset: 70px; }
  .oc-hero__ring i { animation-name: oc-orbit-s; }
  .oc-hero__ring--right { right: -240px; }
}
@keyframes oc-orbit-s { from { transform: rotate(0deg) translateX(230px); } to { transform: rotate(360deg) translateX(230px); } }

/* ======================================================= services.php */
.oc-hero { padding-bottom: clamp(48px, 6vw, 72px); }
.oc-hero .ob-h1 { max-width: 18ch; }
.oc-hero__search { margin: 40px auto 0; max-width: 760px; padding-left: 20px; text-align: left; }
.oc-hero__glass { color: var(--ob-fog); display: grid; place-items: center; flex: none; }
.oc-hero__search input { height: 58px; font-size: 1.0625rem; }
.oc-hero__hints { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; }
.oc-hero__hints .ob-meta { margin-right: 4px; }
.oc-hero__hints .ob-chip { height: 32px; font-size: .8125rem; }
.oc-hero__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin: 48px auto 0;
  border: 1px solid var(--ob-line-d); border-radius: 22px; background: rgba(20, 12, 37, .6); backdrop-filter: blur(4px);
}
.oc-hero__facts > div { padding: 18px 16px; }
.oc-hero__facts > div + div { border-left: 1px solid var(--ob-line-d); }
.oc-hero__facts dt { font-size: .8125rem; color: var(--ob-fog); }
.oc-hero__facts dd { margin-top: 6px; font: 700 1.375rem/1.1 var(--ob-display); color: #fff; letter-spacing: -.02em; }
@media (max-width: 560px) {
  .oc-hero__search { padding-left: 8px; }
  .oc-hero__glass { display: none; }
  .oc-hero__search input { height: 50px; font-size: 1rem; }
  .oc-hero__hints .ob-meta { width: 100%; text-align: center; margin: 0 0 2px; }
  .oc-hero__facts { grid-template-columns: 1fr 1fr; }
  .oc-hero__facts > div:nth-child(3) { border-left: 0; }
  .oc-hero__facts > div:nth-child(n+3) { border-top: 1px solid var(--ob-line-d); }
}

/* sticky filter bar */
.oc-bar {
  position: sticky; z-index: 40; top: var(--ob-header-offset, 82px); transition: top .35s var(--ob-ease), box-shadow .3s, background .3s;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ob-line);
}
.oc-bar.is-stuck { box-shadow: 0 16px 34px -26px rgba(76, 36, 170, .45); }
.oc-bar__in { display: flex; align-items: center; gap: 16px; padding-block: 14px; }
.oc-bar__chips {
  position: relative; display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 40px 2px 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.oc-bar__chips::-webkit-scrollbar { display: none; }
.oc-bar__chips .ob-chip { flex: none; white-space: nowrap; }
.oc-bar__chips .ob-chip .ob-i { color: var(--ob-violet); }
.oc-bar__chips .ob-chip.is-active .ob-i { color: #fff; }
.oc-bar__selects { display: flex; gap: 8px; flex: none; }
.oc-select { position: relative; }
.oc-select label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ob-violet); display: grid; pointer-events: none; }
.oc-select .ob-select { min-height: 40px; height: 40px; padding: 0 40px 0 36px; border-radius: 999px; font-size: .875rem; font-weight: 500; background-position: right 12px center; background-size: 16px; width: auto; max-width: 220px; }
@media (max-width: 900px) {
  .oc-bar__in { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 10px; }
  .oc-bar__selects .oc-select { flex: 1; min-width: 0; }
  .oc-bar__selects .ob-select { width: 100%; max-width: none; }
}

/* results */
.oc-results { padding-top: clamp(40px, 5vw, 64px); }
.oc-results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.oc-results__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oc-filtertag {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 14px; border-radius: 999px;
  background: var(--ob-mist-2); color: var(--ob-violet-600); font-size: .8125rem; font-weight: 600; border: 1px solid var(--ob-mist-3);
}
.oc-filtertag:hover { background: var(--ob-mist-3); }
.oc-reset { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.oc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.oc-grid__cell { display: grid; min-width: 0; }
@media (max-width: 1100px) { .oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .oc-grid { grid-template-columns: 1fr; } }
.oc-empty__text { max-width: 52ch; margin-inline: auto; }
.oc-empty__actions { justify-content: center; }

/* quick answers promo band */
.oc-quick {
  grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--ob-r-xl);
  background: var(--ob-void); color: var(--ob-fog); margin-block: 12px;
}
.oc-quick .ob-badge { background: rgba(255, 255, 255, .03); color: #fff; border-color: rgba(255, 255, 255, .14); }
.oc-quick .ob-h3 { color: #fff; }
.oc-quick .ob-link { color: var(--ob-lilac); }
.oc-quick__glow { position: absolute; z-index: -1; width: 620px; height: 420px; left: -160px; top: -200px; background: radial-gradient(closest-side, rgba(126, 64, 255, .55), transparent); filter: blur(10px); pointer-events: none; }
.oc-quick__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.oc-quick__tier {
  position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 20px; min-width: 0;
  background: rgba(20, 12, 37, .8); border: 1px solid var(--ob-line-d); transition: border-color .3s, transform .3s var(--ob-ease);
}
.oc-quick__tier:hover { border-color: rgba(183, 156, 255, .45); transform: translateY(-3px); }
.oc-quick__tier:nth-child(2) { border-color: var(--ob-violet); box-shadow: 0 24px 60px -34px rgba(112, 52, 245, .9); }
.oc-quick__price { font: 700 2.25rem/1 var(--ob-display); color: #fff; letter-spacing: -.04em; }
.oc-quick__name { margin-top: 14px; font: 650 1.0625rem/1.3 var(--ob-display); color: #fff; letter-spacing: -.012em; }
.oc-quick__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.oc-quick__name a:hover { color: var(--ob-lilac); }
.oc-quick__time { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .8125rem; color: var(--ob-fog); }
.oc-quick__time .ob-i { color: var(--ob-lilac); }
.oc-quick__add {
  position: relative; z-index: 1; margin-top: 18px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--ob-violet); color: #fff; font: 600 .875rem/1 var(--ob-display);
  transition: background .25s, box-shadow .3s;
}
.oc-quick__add .ob-i { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: #fff; color: var(--ob-violet); }
.oc-quick__add:hover { background: var(--ob-violet-600); box-shadow: var(--ob-glow); }
.oc-quick__add.is-added { background: var(--ob-ok); }
@media (max-width: 1100px) { .oc-quick { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .oc-quick__tiers { grid-template-columns: 1fr; } .oc-quick { border-radius: var(--ob-r-lg); padding: 24px 18px; } }

/* help strip */
.oc-help {
  display: flex; align-items: center; gap: 22px; padding: clamp(22px, 3vw, 32px); border-radius: var(--ob-r-lg);
  background: var(--ob-mist); border: 1px solid #ECE3FF;
}
.oc-help > .ob-minw0 { flex: 1; }
.oc-help__actions { flex: none; }
@media (max-width: 800px) { .oc-help { flex-direction: column; align-items: flex-start; } }

/* ======================================================= category.php */
.oc-phero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.oc-phero .ob-h1 { margin-top: 20px; }
.oc-phero__card {
  position: relative; border-radius: var(--ob-r-lg); padding: 64px clamp(22px, 2.6vw, 32px) 10px; margin-top: 52px;
  background: rgba(20, 12, 37, .72); border: 1px solid var(--ob-line-d); backdrop-filter: blur(4px);
}
.oc-phero__icon {
  position: absolute; left: 50%; top: -52px; transform: translateX(-50%); width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 10px rgba(255, 255, 255, .03); backdrop-filter: blur(6px);
}
.oc-phero__icon > span {
  width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #8B5BFF, #5B21DF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -10px rgba(112, 52, 245, .9);
}
.oc-phero__icon .ob-i { width: 36px; height: 36px; }
.oc-phero__facts { display: grid; grid-template-columns: 1fr 1fr; }
.oc-phero__facts > div { padding: 16px 4px; border-top: 1px solid var(--ob-line-d); }
.oc-phero__facts > div:nth-child(-n+2) { border-top: 0; }
.oc-phero__facts > div:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--ob-line-d); }
.oc-phero__facts dt { font-size: .8125rem; color: var(--ob-fog); }
.oc-phero__facts dd { margin-top: 6px; font: 700 1.375rem/1.15 var(--ob-display); color: #fff; letter-spacing: -.02em; }
.oc-phero__facts dd small { font: 500 .8125rem/1 var(--ob-sans); color: var(--ob-fog); letter-spacing: 0; }
@media (max-width: 900px) { .oc-phero__grid { grid-template-columns: 1fr; } .oc-phero__card { margin-top: 72px; } }

/* numbered index of the practice's services */
.oc-index { border-top: 1px solid var(--ob-line); }
.oc-index li { border-bottom: 1px solid var(--ob-line); }
.oc-index__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 44px; align-items: center; gap: 20px; padding: 20px 8px;
  border-radius: 16px; transition: background .25s, padding .3s var(--ob-ease);
}
.oc-index__item:hover { background: var(--ob-mist); padding-inline: 20px; }
.oc-index__n { font: 600 .875rem/1 var(--ob-display); color: var(--ob-violet); }
.oc-index__name { font: 650 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.015em; }
.oc-index__meta { font-size: .875rem; color: var(--ob-subtle); white-space: nowrap; }
.oc-index__price { font: 700 1.0625rem/1 var(--ob-display); color: var(--ob-ink); white-space: nowrap; min-width: 92px; text-align: right; }
.oc-index__go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ob-mist-2); color: var(--ob-violet); transition: background .25s, color .25s, transform .3s var(--ob-ease); }
.oc-index__item:hover .oc-index__go { background: var(--ob-violet); color: #fff; transform: rotate(45deg); }
@media (max-width: 760px) {
  .oc-index__item { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 12px; padding: 16px 4px; }
  .oc-index__n { grid-row: span 2; }
  .oc-index__meta { grid-column: 2; grid-row: 2; }
  .oc-index__price { grid-column: 3; grid-row: 1; min-width: 0; }
  .oc-index__go { display: none; }
  .oc-index__item:hover { padding-inline: 4px; }
}

.oc-sortform { display: flex; align-items: center; gap: 10px; }
.oc-sortform .ob-select { min-height: 44px; height: 44px; padding: 0 42px 0 18px; border-radius: 999px; font-size: .9rem; width: auto; background-color: #fff; }

/* other practices pills */
.oc-others { border-top: 1px solid var(--ob-line); }
.oc-others__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.oc-pill {
  display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 22px 0 10px; border-radius: 999px;
  border: 1px solid var(--ob-line-2); background: rgba(255, 255, 255, .85); font: 650 1rem/1.25 var(--ob-display); color: #4C4662;
  transition: border-color .3s, color .3s, transform .3s var(--ob-ease), box-shadow .3s;
}
.oc-pill__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #8B5BFF, #5B21DF); color: #fff; flex: none; }
.oc-pill small { font: 600 .75rem/1 var(--ob-sans); color: var(--ob-violet); background: var(--ob-mist-2); border-radius: 999px; padding: 5px 8px; }
.oc-pill:hover { border-color: var(--ob-violet); color: var(--ob-ink); transform: translateY(-2px); box-shadow: var(--ob-shadow); }
@media (max-width: 560px) { .oc-pill { width: 100%; } .oc-pill small { margin-left: auto; } }

/* ======================================================= service.php */
.oc-sgrid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.oc-shero__col { max-width: calc(100% - 390px - clamp(32px, 5vw, 72px)); }
.oc-shero { padding-bottom: clamp(56px, 6vw, 80px); }
.oc-shero .ob-h1 { margin-top: 20px; max-width: 18ch; font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.4rem); }
.oc-shero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.oc-shero__prac { padding-left: 6px; transition: border-color .25s; }
.oc-shero__prac:hover { border-color: var(--ob-lilac); }
.oc-shero__pi { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #8B5BFF, #5B21DF); color: #fff; }
.oc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.oc-facts > div {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 16px; border-radius: 18px; background: rgba(20, 12, 37, .72); border: 1px solid var(--ob-line-d);
}
.oc-facts__icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #1A1030; color: var(--ob-lilac); border: 1px solid rgba(255, 255, 255, .08); }
.oc-facts dt { font-size: .78rem; color: var(--ob-fog); align-self: end; }
.oc-facts dd { font: 650 1rem/1.3 var(--ob-display); color: #fff; letter-spacing: -.01em; align-self: start; min-width: 0; overflow-wrap: anywhere; }

.oc-sbody { position: relative; z-index: 2; padding-bottom: clamp(72px, 9vw, 120px); }
.oc-buy { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--ob-header-offset, 82px) + 24px); margin-top: -340px; transition: top .35s var(--ob-ease); }
.oc-smain { grid-column: 1; grid-row: 1; padding-top: clamp(56px, 6vw, 80px); }
.oc-buy__card { background: #fff; border: 1px solid var(--ob-line); border-radius: 28px; padding: 26px; box-shadow: 0 2px 4px rgba(13, 7, 24, .04), 0 40px 90px -40px rgba(76, 36, 170, .5); }
.oc-buy__head { padding: 22px; margin: -10px -10px 0; border-radius: 20px; background: var(--ob-mist); border: 1px solid #ECE3FF; }
.oc-buy__price { margin-top: 8px; font: 700 clamp(2.4rem, 2rem + 1.2vw, 3rem)/1 var(--ob-display); color: var(--ob-ink); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.oc-buy__was { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .9rem; color: var(--ob-subtle); }
.oc-buy__lines { margin-top: 18px; display: grid; gap: 2px; }
.oc-buy__lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .9rem; border-bottom: 1px dashed var(--ob-line-2); }
.oc-buy__lines dt { display: inline-flex; align-items: center; gap: 8px; color: var(--ob-subtle); white-space: nowrap; }
.oc-buy__lines dt .ob-i { color: var(--ob-violet); }
.oc-buy__lines dd { color: var(--ob-ink); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.oc-buy__qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.oc-buy__qty label { display: grid; gap: 2px; }
.oc-buy__ctas { display: grid; gap: 10px; margin-top: 20px; }
.oc-buy__assure { display: grid; gap: 8px; margin-top: 20px; font-size: .8125rem; color: var(--ob-muted); }
.oc-buy__assure li { display: flex; align-items: center; gap: 10px; }
.oc-buy__assure .ob-i { color: var(--ob-ok); }
.oc-buy__ask {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px; border-radius: 18px; border: 1px solid var(--ob-line);
  transition: border-color .25s, background .25s;
}
.oc-buy__ask b { display: block; font: 650 .9375rem/1.3 var(--ob-display); color: var(--ob-ink); }
.oc-buy__ask span span { display: block; font-size: .8125rem; color: var(--ob-muted); margin-top: 2px; }
.oc-buy__ask > .ob-minw0 { flex: 1; }
.oc-buy__ask > .ob-i { color: var(--ob-violet); transition: transform .25s var(--ob-ease); }
.oc-buy__ask:hover { border-color: var(--ob-mist-3); background: var(--ob-mist); }
.oc-buy__ask:hover > .ob-i { transform: translateX(3px); }

.oc-block + .oc-block { margin-top: clamp(56px, 6vw, 80px); }
.oc-block .ob-h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); text-wrap: balance; }
.oc-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oc-overview { font-size: 1.0625rem; max-width: 68ch; }
.oc-overview p:first-child { font-size: 1.15rem; color: var(--ob-ink); }

.oc-deliv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: d; }
.oc-deliv li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: var(--ob-mist); border: 1px solid #ECE3FF;
  color: var(--ob-text); font-size: .97rem; line-height: 1.55; transition: border-color .25s, background .25s;
}
.oc-deliv li:hover { border-color: var(--ob-mist-3); background: #F3EDFF; }
.oc-deliv__tick { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ob-violet); color: #fff; box-shadow: 0 8px 18px -8px rgba(112, 52, 245, .8); }
.oc-deliv__tick .ob-i { width: 15px; height: 15px; }
.oc-deliv li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) { .oc-deliv { grid-template-columns: 1fr; } }

/* process: connected row of icon discs */
.oc-flow { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px 16px; }
.oc-flow::before { content: ""; position: absolute; left: 12%; right: 12%; top: 44px; border-top: 1px dashed var(--ob-line-2); z-index: 0; }
.oc-flow li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.oc-flow__disc {
  position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ob-violet);
  border: 1px solid #F0EAFD; box-shadow: 0 14px 34px -18px rgba(76, 36, 170, .45); transition: transform .35s var(--ob-ease), background .3s, color .3s;
}
.oc-flow__disc .ob-i { width: 32px; height: 32px; stroke-width: 1.5; }
.oc-flow__disc i {
  position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ob-violet); color: #fff; font: 700 .75rem/1 var(--ob-display); font-style: normal; border: 2px solid #fff;
}
.oc-flow li:hover .oc-flow__disc { transform: translateY(-4px); background: var(--ob-violet); color: #fff; }
.oc-flow__title { font: 650 1rem/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.01em; }
.oc-flow__text p { margin-top: 6px; font-size: .875rem; line-height: 1.55; color: var(--ob-muted); }
@media (max-width: 760px), (min-width: 1025px) and (max-width: 1240px) {
  .oc-flow { grid-template-columns: 1fr; gap: 0; }
  .oc-flow::before { left: 32px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 1px dashed var(--ob-line-2); }
  .oc-flow li { flex-direction: row; align-items: center; text-align: left; padding: 10px 0; }
  .oc-flow__disc { width: 64px; height: 64px; flex: none; }
  .oc-flow__disc .ob-i { width: 24px; height: 24px; }
}

/* ideal for / what we need */
.oc-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.oc-fit__card { display: flex; flex-direction: column; }
.oc-fit__head { display: flex; align-items: center; gap: 14px; }
.oc-list { display: grid; gap: 12px; margin-top: 20px; }
.oc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; line-height: 1.55; color: var(--ob-text); }
.oc-list .ob-i { color: var(--ob-violet); margin-top: 2px; }
.oc-fit__note { margin-top: auto; padding-top: 18px; }
.oc-fit__note::before { content: ""; display: block; border-top: 1px dashed var(--ob-line-2); margin-bottom: 14px; }
@media (max-width: 760px) { .oc-fit { grid-template-columns: 1fr; } }

/* benefits */
.oc-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.oc-benefits li { padding: 24px; }
.oc-benefits__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ob-mist-2); color: var(--ob-violet); font: 700 .875rem/1 var(--ob-display); }
.oc-benefits p { margin-top: 16px; color: var(--ob-text); font-size: 1rem; line-height: 1.6; }

.oc-related__grid .ob-svc__desc { -webkit-line-clamp: 2; }
.oc-related__grid .ob-svc__meta { gap: 6px 12px; font-size: .75rem; }

/* service.php — tablet / mobile */
@media (max-width: 1024px) {
  .oc-sgrid { grid-template-columns: 1fr; }
  .oc-shero__col { max-width: none; }
  .oc-buy { grid-column: 1; grid-row: auto; position: static; margin-top: -32px; max-width: 560px; width: 100%; }
  .oc-smain { grid-column: 1; grid-row: auto; padding-top: 56px; }
}
@media (max-width: 760px) { .oc-facts { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .oc-buy__card { padding: 18px; border-radius: 24px; } .oc-buy__head { margin: -4px -4px 0; } }

/* mobile buy bar */
.oc-mobilebar {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 95; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 22px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border: 1px solid var(--ob-line); box-shadow: 0 20px 50px -18px rgba(13, 7, 24, .45);
  transform: translateY(140%); transition: transform .4s var(--ob-ease);
}
.oc-mobilebar.is-shown { transform: none; }
.oc-mobilebar .ob-price { font-size: 1.3rem; margin-top: 2px; }
.oc-mobilebar__btns { display: flex; gap: 8px; flex: none; }
.oc-mobilebar-spacer { display: none; }
@media (max-width: 1024px) {
  .oc-mobilebar { display: flex; }
  .oc-mobilebar-spacer { display: block; height: 86px; }
  body:has(.oc-mobilebar.is-shown) .ob-wa { bottom: 100px; }
}
@media (max-width: 380px) { .oc-mobilebar__btns .ob-btn { padding: 0 14px; } }

/* ======================================================= 404.php */
.oc-nf { padding-bottom: clamp(72px, 9vw, 120px); }
.oc-nf .ob-appicon { margin-top: 12px; }
.oc-nf__code {
  margin-top: 28px; font: 800 clamp(5.5rem, 4rem + 8vw, 10rem)/.9 var(--ob-display); letter-spacing: -.06em;
  background: linear-gradient(180deg, #fff 20%, rgba(183, 156, 255, .55) 70%, rgba(112, 52, 245, .1)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oc-nf .ob-h1 { margin-top: 18px; max-width: 18ch; }
.oc-nf__path { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; }
.oc-nf__path code { font: 500 .875rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ob-fog-2); padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ob-line-d); max-width: 100%; overflow-wrap: anywhere; }
.oc-nf__search { margin: 36px auto 0; text-align: left; }
.oc-nf__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.oc-nf__pills .ob-i { color: var(--ob-lilac); }
.oc-nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ob-line-d); }
.oc-nf__links a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9375rem; color: var(--ob-fog-2); transition: color .2s; }
.oc-nf__links a .ob-i { color: var(--ob-lilac); }
.oc-nf__links a:hover { color: #fff; }
@media (max-width: 680px) {
  .oc-quick__tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 16px 18px; }
  .oc-quick__price { font-size: 1.6rem; grid-column: 1; }
  .oc-quick__name { grid-column: 1; margin-top: 8px; }
  .oc-quick__time { grid-column: 1; }
  .oc-quick__add { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}
@media (max-width: 680px) { .oc-nf-pop > :nth-child(n+3) { display: none; } }
/* =============================================================================
   Orbex — purchase flow (ok-*): cart, checkout, order review, payment,
   order confirmation.
   ============================================================================= */

/* slim dark hero --------------------------------------------------------- */
.ok-hero { padding: calc(var(--ob-header-h) + 44px) 0 clamp(40px, 5vw, 64px); }
.ok-hero .ob-h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 22ch; margin-top: 0; }
.ok-hero .ob-lead { margin-top: 0; max-width: 52ch; }
.ok-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.ok-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(24px, 5vw, 72px); align-items: end; margin-top: clamp(32px, 4vw, 48px); }
.ok-hero__grid > :first-child > * + * { margin-top: 18px; }
.ok-hero__grid > :last-child > * + * { margin-top: 20px; }
@media (max-width: 900px) { .ok-hero__grid { grid-template-columns: 1fr; } }

/* step indicator pill ---------------------------------------------------- */
.ok-steps {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; max-width: 100%;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
}
.ok-steps li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 999px; font: 600 .875rem/1 var(--ob-display); color: var(--ob-fog); white-space: nowrap; }
.ok-steps__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: rgba(255, 255, 255, .07); color: var(--ob-fog-2); flex: none; }
.ok-steps__n .ob-i { width: 14px; height: 14px; stroke-width: 2.4; }
.ok-steps li.is-done { color: var(--ob-fog-2); }
.ok-steps li.is-done .ok-steps__n { background: rgba(183, 156, 255, .18); color: var(--ob-lilac); }
.ok-steps li.is-now { background: var(--ob-violet); color: #fff; box-shadow: 0 10px 24px -10px rgba(112, 52, 245, .9); }
.ok-steps li.is-now .ok-steps__n { background: #fff; color: var(--ob-violet); }
.ok-steps li.ok-steps__sep { width: 14px; height: 1px; padding: 0; border-radius: 0; background: rgba(255, 255, 255, .18); flex: none; }
@media (max-width: 640px) {
  .ok-steps { width: 100%; justify-content: space-between; }
  .ok-steps li { padding: 0 4px; }
  .ok-steps li:not(.is-now) .ok-steps__t { display: none; }
  .ok-steps li.is-now { padding-right: 14px; }
  .ok-steps li.ok-steps__sep { flex: 1; min-width: 6px; }
}
/* light variant (payment page header strip) */
.ok-steps--light { background: #fff; border-color: var(--ob-line); }
.ok-steps--light li { color: var(--ob-subtle); }
.ok-steps--light .ok-steps__n { background: var(--ob-mist); color: var(--ob-muted); }
.ok-steps--light li.is-done { color: var(--ob-text); }
.ok-steps--light li.is-done .ok-steps__n { background: var(--ob-mist-2); color: var(--ob-violet); }
.ok-steps--light li.ok-steps__sep { background: var(--ob-line-2); }

/* order reference chip ---------------------------------------------------- */
.ok-ref { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.ok-ref__k { font-size: .8125rem; color: var(--ob-fog); }
.ok-ref__v { font: 700 1rem/1 var(--ob-display); letter-spacing: .04em; color: #fff; overflow-wrap: anywhere; min-width: 0; }
.ok-copy { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 600 .8125rem/1 var(--ob-display); flex: none; transition: background .2s; }
.ok-copy:hover { background: var(--ob-violet); }
.ok-copy .ob-i { width: 15px; height: 15px; }
.ok-ref--light { background: var(--ob-mist); border-color: var(--ob-mist-3); }
.ok-ref--light .ok-ref__k { color: var(--ob-muted); }
.ok-ref--light .ok-ref__v { color: var(--ob-ink); }
.ok-ref--light .ok-copy { background: #fff; color: var(--ob-violet); border: 1px solid var(--ob-mist-3); }
.ok-ref--light .ok-copy:hover { background: var(--ob-violet); color: #fff; }

/* two column layout ---------------------------------------------------------- */
.ok-body { padding-block: clamp(36px, 5vw, 64px) clamp(64px, 8vw, 104px); }
.ok-layout { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.ok-main > * + * { margin-top: 20px; }
@media (max-width: 1020px) {
  .ok-layout { grid-template-columns: 1fr; }
  .ok-layout .ob-sticky { position: static; }
}

/* content blocks ------------------------------------------------------------ */
.ok-block { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); padding: clamp(20px, 2.6vw, 32px); box-shadow: var(--ob-shadow); min-width: 0; }
.ok-block--mist { background: var(--ob-mist); border-color: #ECE3FF; box-shadow: none; }
fieldset.ok-block { margin: 0; }
.ok-block + .ok-block { margin-top: 20px; }
.ok-block__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.ok-block__head > div { flex: 1; min-width: 0; }
.ok-block__head .ob-small { margin-top: 4px; }
.ok-num {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--ob-violet-400), var(--ob-violet-600)); color: #fff;
  font: 700 .875rem/1 var(--ob-display); box-shadow: 0 10px 22px -10px rgba(112, 52, 245, .8);
}
.ok-num .ob-i { width: 18px; height: 18px; }
.ok-block__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ob-line); }
.ok-req { color: var(--ob-violet); }

/* line items ---------------------------------------------------------------- */
.ok-lines > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ob-line); }
.ok-lines > li:last-child { border-bottom: 0; padding-bottom: 4px; }
.ok-lines .ob-mono { width: 56px; height: 56px; border-radius: 16px; font-size: 1.05rem; }
.ok-line__name { display: block; margin-top: 3px; font: 650 1.0625rem/1.35 var(--ob-display); color: var(--ob-ink); letter-spacing: -.012em; overflow-wrap: anywhere; }
a.ok-line__name:hover { color: var(--ob-violet); }
.ok-line__sub { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.ok-line__sub .ob-i { width: 15px; height: 15px; color: var(--ob-violet); }
.ok-line__amt { text-align: right; }
.ok-line__amt b { display: block; font: 700 1.1875rem/1.1 var(--ob-display); color: var(--ob-ink); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ok-line__amt .ob-meta { display: block; margin-top: 4px; white-space: nowrap; }
.ok-line__ctrl { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ok-line__ctrl .ob-qty { height: 40px; }
.ok-line__ctrl .ob-qty button { width: 40px; }
.ok-line__ctrl .ob-qty button[disabled] { opacity: .35; cursor: not-allowed; }
.ok-line__ctrl .ob-qty button[disabled]:hover { background: none; }
.ok-rm { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--ob-muted); transition: background .2s, color .2s; }
.ok-rm:hover { background: var(--ob-err-bg); color: var(--ob-err); }
.ok-rm .ob-i { width: 16px; height: 16px; }
@media (max-width: 520px) {
  .ok-lines > li { grid-template-columns: auto minmax(0, 1fr); }
  .ok-lines .ob-mono { width: 46px; height: 46px; border-radius: 13px; font-size: .9rem; }
  .ok-line__amt { grid-column: 2; text-align: left; }
  .ok-line__amt b, .ok-line__amt .ob-meta { display: inline; }
  .ok-line__amt .ob-meta { margin-left: 8px; }
  .ok-line__ctrl { grid-column: 1 / -1; }
}

/* summary card ---------------------------------------------------------------- */
.ok-sum { background: var(--ob-mist); border: 1px solid #E7DCFF; border-radius: var(--ob-r-lg); padding: clamp(22px, 2.4vw, 30px); position: relative; overflow: hidden; isolation: isolate; }
.ok-sum::before { content: ""; position: absolute; z-index: -1; width: 320px; height: 220px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 91, 255, .22), transparent); }
.ok-sum__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ok-sum__head .ob-link { font-size: .875rem; }
.ok-sum__sec { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ob-mist-3); }
.ok-mini > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ok-mini .ob-mono { position: relative; width: 44px; height: 44px; border-radius: 13px; font-size: .8125rem; background: #fff; }
.ok-mini__q { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ob-violet); color: #fff; font: 700 .6875rem/20px var(--ob-sans); text-align: center; }
.ok-mini__name { display: block; font: 650 .9375rem/1.35 var(--ob-display); color: var(--ob-ink); overflow-wrap: anywhere; }
.ok-mini__amt { margin-left: auto; font: 650 .9375rem/1 var(--ob-display); color: var(--ob-ink); white-space: nowrap; padding-left: 8px; }
.ok-sum .ob-sumrow--total { border-top-color: var(--ob-mist-3); }
.ok-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--ob-mist-3); }
.ok-total__k { font: 650 1rem/1.3 var(--ob-display); color: var(--ob-ink); }
.ok-total__k small { display: block; font: 500 .8125rem/1.4 var(--ob-sans); color: var(--ob-subtle); margin-top: 2px; }
.ok-total .ob-price { font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); line-height: 1; overflow-wrap: anywhere; text-align: right; }
.ok-sum .ob-btn--block { margin-top: 22px; }
.ok-note { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; line-height: 1.55; color: var(--ob-muted); }
.ok-note .ob-i { width: 17px; height: 17px; color: var(--ob-violet); margin-top: 1px; }
.ok-note a { color: var(--ob-violet); text-decoration: underline; text-underline-offset: 2px; }
.ok-notes { display: grid; gap: 10px; }
.ok-secure { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ob-mist-3); font-size: .8125rem; line-height: 1.5; color: var(--ob-muted); }
.ok-secure .ob-tile { width: 36px; height: 36px; border-radius: 11px; }
.ok-secure .ob-tile .ob-i { width: 17px; height: 17px; }
.ok-secure b { display: block; color: var(--ob-ink); font-weight: 600; font-size: .875rem; }
.ok-after { margin-top: 14px; text-align: center; }

/* coupon ------------------------------------------------------------------ */
.ok-coupon { padding: 5px 5px 5px 18px; max-width: none; box-shadow: none; }
.ok-coupon input { height: 42px; font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em; }
.ok-coupon input::placeholder { text-transform: none; letter-spacing: 0; }
.ok-coupon .ob-btn { min-height: 42px; padding: 0 20px; font-size: .875rem; }
@media (max-width: 560px) {
  .ok-coupon { flex-direction: row; align-items: center; border-radius: 999px; padding: 5px 5px 5px 14px; }
  .ok-coupon input { padding: 0; }
  .ok-coupon .ob-btn { width: auto; }
}
.ok-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 999px; background: var(--ob-ok-bg); border: 1px solid #C5EED9; color: #0B6B42; font-size: .875rem; }
.ok-applied > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ok-applied .ob-i { width: 17px; height: 17px; }
.ok-applied b { letter-spacing: .08em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-applied button { font-weight: 600; font-size: .8125rem; padding: 6px 10px; border-radius: 999px; color: #0B6B42; }
.ok-applied button:hover { background: #fff; }
.ok-msg { margin-top: 8px; font-size: .8125rem; color: var(--ob-subtle); min-height: 0; }
.ok-msg:empty { display: none; }
.ok-msg.is-err { color: var(--ob-err); font-weight: 500; }
.ok-msg.is-ok { color: #0B7A4A; font-weight: 500; }

/* form bits ------------------------------------------------------------------ */
.ok-form .ob-textarea--sm { min-height: 96px; }
.ok-form .ob-input.is-invalid { border-color: var(--ob-err); }
.ok-help--ok { color: #0B7A4A; font-weight: 500; }
.ok-pay {
  display: flex; align-items: flex-start; gap: 16px; padding: 18px; border-radius: 18px; cursor: pointer;
  border: 1.5px solid var(--ob-violet); background: var(--ob-mist); box-shadow: 0 0 0 4px rgba(112, 52, 245, .08);
}
.ok-pay > span:nth-child(3) { flex: 1; min-width: 0; }
.ok-pay__check { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ob-violet); color: #fff; }
.ok-pay__check .ob-i { width: 15px; height: 15px; stroke-width: 2.4; }
.ok-pay:has(input:focus-visible) { outline: 3px solid var(--ob-lilac); outline-offset: 3px; }
.ok-terms { padding: 20px 22px; }
.ok-terms a { color: var(--ob-violet); text-decoration: underline; text-underline-offset: 2px; }
.ok-guest { margin-bottom: 20px; }
.ok-guest a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* empty states ------------------------------------------------------------------ */
.ok-empty { padding-block: clamp(48px, 7vw, 88px); }
.ok-empty .ob-tile { width: 64px; height: 64px; border-radius: 20px; }
.ok-empty .ob-body { max-width: 46ch; margin-inline: auto; }
.ok-empty .ob-actions { justify-content: center; }
.ok-sugg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ok-sugg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1020px) { .ok-sugg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ok-sugg, .ok-sugg--2 { grid-template-columns: 1fr; } }
.ok-sugghead { display: flex; align-items: flex-start; gap: 14px; }

/* facts grid (review / confirmation) ------------------------------------------------ */
.ok-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ok-facts > div { min-width: 0; }
.ok-facts dt { font-size: .8125rem; color: var(--ob-subtle); }
.ok-facts dd { margin-top: 4px; color: var(--ob-ink); font-weight: 500; overflow-wrap: anywhere; }
.ok-facts .ok-span-2 { grid-column: 1 / -1; }
.ok-facts--1 { grid-template-columns: 1fr; }
@media (max-width: 560px) { .ok-facts { grid-template-columns: 1fr; } }
.ok-brief { white-space: pre-line; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.7; color: var(--ob-text); padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--ob-mist-3); }
.ok-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ob-line); }
.ok-foot a { color: var(--ob-violet); text-decoration: underline; text-underline-offset: 2px; }

/* next steps: vertical timeline ------------------------------------------------------ */
.ok-tl { counter-reset: okt; }
.ok-tl > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.ok-tl > li:last-child { padding-bottom: 0; }
.ok-tl > li::before {
  counter-increment: okt; content: counter(okt, decimal-leading-zero); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ob-mist-2); color: var(--ob-violet); font: 700 .8125rem/1 var(--ob-display); border: 1px solid var(--ob-mist-3);
}
.ok-tl > li:not(:last-child)::after { content: ""; position: absolute; left: 19.5px; top: 46px; bottom: 6px; border-left: 1px dashed var(--ob-line-2); }
.ok-tl b { display: block; font: 650 1rem/1.35 var(--ob-display); color: var(--ob-ink); padding-top: 9px; }
.ok-tl p { margin-top: 4px; font-size: .9rem; color: var(--ob-muted); overflow-wrap: anywhere; }

/* next steps: 3-step row (confirmation) ------------------------------------------------ */
.ok-next { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; position: relative; }
.ok-next__item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--ob-line); min-width: 0; }
.ok-next__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ok-next__top .ob-tile { width: 48px; height: 48px; border-radius: 15px; }
.ok-next__step { font: 600 .75rem/1 var(--ob-sans); color: var(--ob-subtle); letter-spacing: .04em; }
.ok-next__item b { font: 700 1.0625rem/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.012em; margin-top: 6px; }
.ok-next__item p { font-size: .9rem; color: var(--ob-muted); line-height: 1.6; overflow-wrap: anywhere; }
.ok-next__item .ob-link { margin-top: auto; padding-top: 6px; font-size: .875rem; }
.ok-next__item:first-child { border-color: var(--ob-mist-3); box-shadow: var(--ob-shadow); }
@media (max-width: 860px) { .ok-next { grid-template-columns: 1fr; } }

/* confirmation hero ----------------------------------------------------------------------- */
.ok-done { text-align: center; padding-bottom: clamp(48px, 6vw, 80px); }
.ok-done .ob-h1 { margin-inline: auto; max-width: 20ch; margin-top: 26px; }
.ok-done .ob-lead { margin: 16px auto 0; max-width: 56ch; }
.ok-done__steps { margin-bottom: clamp(36px, 4vw, 52px); }
.ok-done .ob-actions { justify-content: center; }
.ok-done__mark { position: relative; display: inline-block; }
.ok-done__mark .ob-appicon { box-shadow: 0 0 0 10px rgba(183, 156, 255, .07), 0 0 0 22px rgba(183, 156, 255, .035); }
.ok-done__badge { position: absolute; right: -8px; bottom: -8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ob-ok); color: #fff; border: 4px solid var(--ob-void); }
.ok-done__badge--wait { background: var(--ob-amber); }
.ok-done__badge .ob-i { width: 16px; height: 16px; stroke-width: 2.4; }
.ok-done__status { margin-top: 26px; }
.ok-done .ob-status { height: 32px; padding: 0 14px; }
.ok-done__ref { margin-top: 26px; }
.ok-email { color: #fff; font-weight: 600; overflow-wrap: anywhere; }

.ok-sumbtns { display: grid; gap: 10px; margin-top: 22px; }
.ok-sumbtns .ob-btn { width: 100%; }

/* ======================================================================= payment page */
.ok-paypage { min-height: 100vh; display: flex; flex-direction: column; background: var(--ob-mist); }
.ok-paybar { background: var(--ob-void); color: #fff; position: relative; isolation: isolate; overflow: hidden; padding: 12px 0 108px; }
.ok-paybar__glow { position: absolute; z-index: -1; width: 760px; height: 420px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(126, 64, 255, .55), transparent); filter: blur(20px); pointer-events: none; }
.ok-paybar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.ok-paybar .ob-brand { min-width: 0; font-size: 1.35rem; }
.ok-paybar .ob-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-paybar .ob-tag { flex: none; }
.ok-paybar .ok-steps { margin-top: 28px; }
.ok-paybar__center { text-align: center; }
.ok-paymain { flex: 1; width: 100%; max-width: 640px; margin: -84px auto 0; padding-inline: var(--ob-gutter); position: relative; z-index: 1; }
.ok-paycard { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xl); box-shadow: var(--ob-shadow-lg); overflow: hidden; }
.ok-paycard__amt { text-align: center; padding: clamp(26px, 4vw, 40px) clamp(20px, 4vw, 40px) 26px; border-bottom: 1px dashed var(--ob-line-2); }
.ok-paycard__amt h1 { font: 500 .875rem/1.3 var(--ob-sans); color: var(--ob-subtle); letter-spacing: .01em; }
.ok-paycard__amt .ob-price { font-size: clamp(2.6rem, 2rem + 2vw, 3.5rem); line-height: 1; margin-top: 10px; overflow-wrap: anywhere; }
.ok-paycard__amt .ok-ref { margin-top: 18px; }
.ok-paycard__sec { padding: clamp(24px, 4vw, 36px) clamp(18px, 4vw, 40px); }
.ok-paycard__status { padding: 22px clamp(18px, 4vw, 40px) 30px; text-align: center; background: var(--ob-mist); border-top: 1px solid var(--ob-line); }
.ok-paycard__status .ob-h4 { margin-top: 14px; }
.ok-paycard__status .ob-btn { margin-top: 18px; }
.ok-paycard__status a:not(.ob-btn) { color: var(--ob-violet); text-decoration: underline; text-underline-offset: 2px; }

.ok-qr { width: 276px; max-width: 100%; margin: 22px auto 0; padding: 16px; border-radius: 24px; background: #fff; border: 1px solid var(--ob-mist-3); box-shadow: 0 0 0 8px var(--ob-mist), var(--ob-shadow); position: relative; }
.ok-qr::before, .ok-qr::after { content: ""; position: absolute; width: 26px; height: 26px; border: 3px solid var(--ob-violet); }
.ok-qr::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.ok-qr::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
#qrCodeContainer { display: grid; place-items: center; min-height: 240px; }
#qrCodeContainer img, #qrCodeContainer canvas { width: 240px; max-width: 100%; height: auto; }
.ok-approw { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }

.ok-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.ok-app { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--ob-line-2); background: #fff; font: 650 .9375rem/1.2 var(--ob-display); color: var(--ob-ink); min-width: 0; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ok-app:hover { border-color: var(--ob-violet); box-shadow: var(--ob-shadow); transform: translateY(-1px); }
.ok-app i { width: 32px; height: 32px; border-radius: 10px; flex: none; background: var(--app-hue, var(--ob-violet)); position: relative; }
.ok-app i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); }
.ok-app span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) { .ok-apps { grid-template-columns: 1fr; } }

.ok-live { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--ob-mist-3); font-size: .9rem; font-weight: 500; color: var(--ob-text); }
.ok-live__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ob-amber); position: relative; flex: none; }
.ok-live__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ob-amber); opacity: .5; animation: ok-pulse 1.6s ease-out infinite; }
@keyframes ok-pulse { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.ok-statemark { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; color: #fff; }
.ok-statemark .ob-i { width: 28px; height: 28px; stroke-width: 2.2; }
.ok-statemark--ok { background: var(--ob-ok); box-shadow: 0 0 0 10px var(--ob-ok-bg); }
.ok-statemark--err { background: var(--ob-err); box-shadow: 0 0 0 10px var(--ob-err-bg); }

.ok-payhelp { display: grid; gap: 12px; margin-top: 24px; padding: 0 6px; }
.ok-payfoot { text-align: center; padding: 32px var(--ob-gutter); font-size: .8125rem; color: var(--ob-subtle); }
.ok-payfoot a { text-decoration: underline; text-underline-offset: 2px; }
.ok-payfoot a:hover { color: var(--ob-violet); }

/* print ---------------------------------------------------------------------------- */
@media print {
  .ob-header, .ob-announce, .ob-footer, .ob-wa, .ok-noprint, .ok-steps { display: none !important; }
  .ob-pagehero { margin-top: 0; padding: 24px 0; background: #fff; color: var(--ob-text); }
  .ob-pagehero .ob-h1, .ok-email, .ok-ref__v { color: var(--ob-ink) !important; }
  .ok-layout { grid-template-columns: 1fr; }
  .ob-sticky { position: static; }
}

/* small phones ------------------------------------------------------------------ */
.ok-ref__k { white-space: nowrap; }
@media (max-width: 420px) {
  .ok-ref { gap: 8px; padding-left: 14px; }
  .ok-ref__v { font-size: .875rem; letter-spacing: .02em; white-space: nowrap; }
  .ok-copy { padding: 0 10px; }
  .ok-app { padding: 0 12px; gap: 10px; font-size: .875rem; }
  .ok-app i { width: 28px; height: 28px; }
  .ok-app i::after { inset: 8px; }
}
.ok-sum .ok-sumbtns .ob-btn--block { margin-top: 0; }
/* =============================================================================
   Orbex — accounts: sign in / register / password reset, customer account area,
   and the standalone admin reset tool. Prefix: oa-.
   ============================================================================= */

/* ------------------------------------------------------------ shared bits */
.oa-alert { margin-bottom: 22px; }
.oa-alert--sm { padding: 11px 15px; font-size: .84375rem; }
.oa-wrapany { overflow-wrap: anywhere; }
.oa-req { color: var(--ob-violet); }
.oa-center { justify-content: center; }
.oa-minilink { color: var(--ob-violet); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(112, 52, 245, .3); text-underline-offset: 3px; transition: text-decoration-color .2s, color .2s; }
.oa-minilink:hover { color: var(--ob-violet-600); text-decoration-color: currentColor; }
.oa-minilink--light { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); }
.oa-minilink--light:hover { color: #fff; }
.oa-form { display: grid; gap: 18px; }
.oa-form .ob-field + .ob-field { margin-top: 0; }
.oa-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.oa-labelrow .oa-minilink { font-size: .8125rem; }
.oa-rules { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8125rem; color: var(--ob-muted); }
.oa-rules li { display: flex; align-items: flex-start; gap: 7px; }
.oa-rules .ob-i { color: var(--ob-violet); margin-top: 2px; flex: none; }
.oa-rules--body { display: grid; gap: 8px; margin-top: 16px; font-size: .875rem; color: var(--ob-text); }
.oa-ta-sm { min-height: 96px; }
.oa-alt { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--ob-line); font-size: .875rem; color: var(--ob-muted); }
.oa-alt--center { text-align: center; }
.oa-body > .oa-alt { margin-top: 18px; }
.oa-terms { padding: 14px 16px; border-radius: 14px; background: var(--ob-mist); border: 1px solid #ECE3FF; font-size: .875rem; }

/* =================================================================== AUTH */
.oa-auth { padding: 28px 0 clamp(56px, 7vw, 96px); }
.oa-auth__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}
.oa-auth__form { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px) clamp(0px, 2vw, 32px); }
.oa-auth__inner { width: 100%; max-width: 520px; }
.oa-auth__title { margin-top: 22px; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem); }
.oa-auth__intro { margin-top: 14px; max-width: 46ch; }
.oa-auth__body { margin-top: 32px; }

.oa-auth__art {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ob-r-xl);
  display: flex; flex-direction: column; gap: 28px; padding: clamp(28px, 3.4vw, 48px);
  min-height: 640px; color: var(--ob-fog-2);
  background: radial-gradient(ellipse 80% 60% at 100% 100%, rgba(112, 52, 245, .35), transparent 70%), var(--ob-void);
}
.oa-auth__glow {
  position: absolute; z-index: -1; width: 560px; height: 560px; right: -220px; top: -240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126, 64, 255, .6), transparent); filter: blur(10px); pointer-events: none;
}
.oa-auth__icon { width: 72px; height: 72px; border-radius: 22px; margin-inline: 0; }
.oa-auth__icon > span { width: 52px; height: 52px; border-radius: 16px; }
.oa-auth__icon svg { width: 30px; height: 30px; }
.oa-auth__headline { margin-top: 26px; font-size: clamp(1.5rem, 1.15rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -.03em; max-width: 17ch; }

.oa-checks { display: grid; gap: 14px; }
.oa-checks li { display: flex; align-items: flex-start; gap: 14px; font-size: .9375rem; line-height: 1.5; color: var(--ob-fog-2); }
.oa-checks__ic {
  width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--ob-lilac);
}
.oa-checks__ic .ob-i { width: 18px; height: 18px; }
.oa-checks li > span:last-child { padding-top: 7px; }

.oa-mock {
  margin-top: auto; max-width: 440px; padding: 18px; border-radius: 20px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 60px -30px rgba(112, 52, 245, .6); backdrop-filter: blur(6px);
}
.oa-mock__head { display: flex; align-items: center; gap: 12px; }
.oa-mock__tile { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--ob-violet-400), var(--ob-violet-600)); }
.oa-mock__tile .ob-i { width: 19px; height: 19px; }
.oa-mock__t { display: block; font: 650 .9375rem/1.3 var(--ob-display); color: #fff; }
.oa-mock__s { display: block; font-size: .75rem; color: var(--ob-fog); }
.oa-mock__pill { margin-left: auto; flex: none; font-size: .72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(183, 156, 255, .16); color: var(--ob-lilac); }
.oa-mock__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.oa-mock__rail span { display: grid; gap: 8px; font-size: .6875rem; color: rgba(255, 255, 255, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-mock__rail i { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.oa-mock__rail .is-on { color: var(--ob-fog-2); }
.oa-mock__rail .is-on i { background: linear-gradient(90deg, var(--ob-violet), var(--ob-lilac)); }
.oa-mock__rail .is-now i { box-shadow: 0 0 14px rgba(183, 156, 255, .7); }

.oa-auth__note { font-size: .8125rem; color: var(--ob-fog); padding-top: 18px; border-top: 1px solid var(--ob-line-d); }

.oa-steps { display: grid; gap: 14px; margin-top: 14px; }
.oa-steps li { display: flex; gap: 14px; align-items: center; color: var(--ob-text); }
.oa-steps .ob-tile--sm { width: 40px; height: 40px; border-radius: 12px; background: #fff; }
.oa-steps .ob-tile--sm .ob-i { width: 18px; height: 18px; }

@media (max-width: 960px) {
  .oa-auth { padding-top: 16px; }
  .oa-auth__grid { grid-template-columns: 1fr; gap: 8px; }
  .oa-auth__art { order: -1; min-height: 0; padding: 20px 22px; border-radius: 22px; gap: 0; }
  .oa-auth__top { display: flex; align-items: center; gap: 16px; }
  .oa-auth__icon { width: 52px; height: 52px; border-radius: 16px; box-shadow: none; flex: none; }
  .oa-auth__icon > span { width: 38px; height: 38px; border-radius: 12px; }
  .oa-auth__icon svg { width: 22px; height: 22px; }
  .oa-auth__headline { margin-top: 0; font-size: 1.125rem; max-width: none; }
  .oa-checks, .oa-mock, .oa-auth__note { display: none; }
  .oa-auth__form { padding: 24px 0 0; }
  .oa-auth__inner { max-width: 600px; }
}

/* =========================================================== ACCOUNT AREA */
.oa-hero { padding-bottom: clamp(44px, 5vw, 64px); }
.oa-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.oa-hero .oa-hero__title { margin-top: 18px; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); max-width: 22ch; overflow-wrap: anywhere; }
.oa-hero .oa-hero__lead { margin-top: 14px; max-width: 60ch; color: var(--ob-fog); }
.oa-hero__cta { flex: none; }

.oa-dashsec { padding: clamp(28px, 4vw, 48px) 0 clamp(64px, 8vw, 110px); }
.oa-dash { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.oa-main > * + * { margin-top: 24px; }
.oa-main > .oa-alert + * { margin-top: 0; }

/* sidebar */
.oa-side { min-width: 0; position: sticky; top: calc(var(--ob-header-h) + 28px); }
.oa-side__card { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow); padding: 14px; }
.oa-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 18px; border-bottom: 1px solid var(--ob-line); margin-bottom: 10px; }
.oa-who__avatar {
  width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.125rem/1 var(--ob-display); color: #fff;
  background: linear-gradient(160deg, var(--ob-violet-400), var(--ob-violet-600)); box-shadow: 0 0 0 4px var(--ob-mist-2);
}
.oa-who__name { display: block; font: 650 1rem/1.3 var(--ob-display); color: var(--ob-ink); letter-spacing: -.01em; }
.oa-who__mail { display: block; font-size: .8125rem; color: var(--ob-subtle); margin-top: 2px; }
.oa-nav { display: grid; gap: 2px; }
.oa-nav__link {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px 0 6px; border-radius: 14px;
  font: 600 .9375rem/1.2 var(--ob-display); color: var(--ob-text); transition: background .2s, color .2s;
}
.oa-nav__ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--ob-muted); transition: background .2s, color .2s; }
.oa-nav__ic .ob-i { width: 19px; height: 19px; }
.oa-nav__link:hover { background: var(--ob-mist); color: var(--ob-ink); }
.oa-nav__link:hover .oa-nav__ic { color: var(--ob-violet); }
.oa-nav__link.is-active { background: var(--ob-mist-2); color: var(--ob-violet-700); }
.oa-nav__link.is-active .oa-nav__ic { background: var(--ob-violet); color: #fff; box-shadow: 0 8px 18px -8px rgba(112, 52, 245, .8); }
.oa-nav__link:focus-visible { outline: 3px solid var(--ob-lilac); outline-offset: 1px; }
.oa-nav__link--out { margin-top: 8px; border-top: 1px solid var(--ob-line); border-radius: 0 0 14px 14px; padding-top: 6px; min-height: 54px; color: var(--ob-muted); }
.oa-nav__link--out:hover { color: var(--ob-err); background: var(--ob-err-bg); border-radius: 14px; }
.oa-nav__link--out:hover .oa-nav__ic { color: var(--ob-err); }

/* stat tiles */
.oa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.oa-stat {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 20px; border-radius: 22px;
  background: var(--ob-mist); border: 1px solid #ECE3FF;
}
.oa-stat__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ob-violet); border: 1px solid var(--ob-mist-3); margin-bottom: 14px; }
.oa-stat__ic .ob-i { width: 19px; height: 19px; }
.oa-stat__val { font: 700 clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1.1 var(--ob-display); letter-spacing: -.03em; color: var(--ob-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oa-stat__label { font-size: .875rem; font-weight: 600; color: var(--ob-text); margin-top: 2px; }
.oa-stat__hint { font-size: .75rem; color: var(--ob-subtle); }

/* panels */
.oa-panel { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); box-shadow: var(--ob-shadow); overflow: hidden; }
.oa-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--ob-line); }
.oa-panel__head--intro { padding-block: 22px; }
.oa-panel__title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.oa-panel__title .ob-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.oa-panel__title .ob-tile--sm .ob-i { width: 19px; height: 19px; }
.oa-panel__body { padding: 22px; }
.oa-panel__empty { padding: 36px 24px 40px; text-align: center; }
.oa-panel__empty .ob-tile { margin-inline: auto; }
.oa-panel__empty .ob-small { max-width: 38ch; margin-inline: auto; }
.oa-num { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font: 700 .9375rem/1 var(--ob-display); color: var(--ob-violet); background: var(--ob-mist-2); border: 1px solid var(--ob-mist-3); }

/* to-do list */
.oa-todo__item { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 18px 22px; border-top: 1px solid var(--ob-line); }
.oa-todo__item:first-child { border-top: 0; }
.oa-todo__btn { flex: none; }

/* two columns */
.oa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }

/* order rows */
.oa-list { display: grid; gap: 10px; }
.oa-list--flush { gap: 0; }
.oa-orow {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px; background: #fff;
  border: 1px solid var(--ob-line); color: inherit; transition: border-color .25s, box-shadow .25s, transform .25s var(--ob-ease);
}
.oa-orow:hover { border-color: var(--ob-mist-3); box-shadow: var(--ob-shadow); transform: translateY(-1px); }
.oa-orow:focus-visible { outline: 3px solid var(--ob-lilac); outline-offset: 2px; }
.oa-list--flush .oa-orow { border-radius: 0; border-width: 1px 0 0; padding: 16px 22px; }
.oa-list--flush .oa-orow:first-child { border-top: 0; }
.oa-list--flush .oa-orow:hover { transform: none; box-shadow: none; background: #FCFAFF; }
.oa-orow__ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--ob-mist); color: var(--ob-violet); border: 1px solid var(--ob-mist-3); }
.oa-orow__ic .ob-i { width: 20px; height: 20px; }
.oa-orow__main { flex: 1; display: grid; gap: 6px; }
.oa-orow__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.oa-orow__num { font: 650 .9375rem/1.2 var(--ob-display); color: var(--ob-ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.oa-orow__names { display: block; font-size: .875rem; color: var(--ob-muted); }
.oa-orow__end { display: grid; gap: 4px; text-align: right; flex: none; }
.oa-orow__amt { font: 700 1rem/1.2 var(--ob-display); color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.oa-orow__date { font-size: .78rem; color: var(--ob-subtle); }
.oa-orow__go { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ob-ink); color: #fff; transition: background .25s, transform .35s var(--ob-ease); }
.oa-orow__go .ob-i { width: 16px; height: 16px; }
.oa-orow:hover .oa-orow__go { background: var(--ob-violet); transform: rotate(-45deg); }
.oa-cols .oa-orow__ic { display: none; }
.oa-cols .oa-orow .ob-status { height: 24px; font-size: .72rem; padding: 0 10px; }

.oa-tabs { margin-bottom: 4px; }
.oa-tabs .ob-tab { display: inline-flex; align-items: center; gap: 8px; }
.oa-tabs__n { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font: 700 .72rem/1 var(--ob-sans); background: #fff; color: var(--ob-violet); }
.ob-tab.is-active .oa-tabs__n { background: rgba(255, 255, 255, .2); color: #fff; }
.oa-listhead { display: flex; justify-content: space-between; padding: 0 74px 10px 78px; font-size: .75rem; font-weight: 600; color: var(--ob-subtle); letter-spacing: .02em; }
.oa-listfoot { margin-top: 14px; text-align: right; }
.oa-footnote { text-align: center; }
.oa-empty__text { max-width: 46ch; margin-inline: auto; }

/* progress rail (dashboard + services) */
.oa-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.oa-rail__seg { display: grid; gap: 7px; min-width: 0; }
.oa-rail__seg i { height: 6px; border-radius: 999px; background: var(--ob-mist-2); }
.oa-rail__seg em { font-style: normal; font-size: .72rem; color: var(--ob-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-rail__seg.is-on i { background: linear-gradient(90deg, var(--ob-violet), var(--ob-violet-400)); }
.oa-rail__seg.is-on em { color: var(--ob-text); }
.oa-rail__seg.is-now em { color: var(--ob-violet); font-weight: 600; }
.oa-rail__seg.is-now i { box-shadow: 0 0 0 3px rgba(112, 52, 245, .14); }

/* dashboard services */
.oa-svclist li + li { border-top: 1px solid var(--ob-line); }
.oa-svcmini { display: grid; gap: 14px; padding: 18px 22px; color: inherit; transition: background .2s; }
.oa-svcmini:hover { background: #FCFAFF; }
.oa-svcmini__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.oa-svcmini .ob-mono { width: 42px; height: 42px; border-radius: 12px; font-size: .8125rem; }
.oa-svcmini__name { display: block; font: 650 .9375rem/1.3 var(--ob-display); color: var(--ob-ink); }
.oa-svcmini__cat { display: block; font-size: .78rem; color: var(--ob-subtle); }
.oa-svcmini__stage { font-size: .78rem; color: var(--ob-muted); margin-top: -4px; }

/* help cards */
.oa-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.oa-helpcard { display: flex; flex-direction: column; align-items: flex-start; }
.oa-helpcard .ob-tile--sm { background: #fff; width: 40px; height: 40px; border-radius: 12px; }
.oa-helpcard .ob-tile--sm .ob-i { width: 19px; height: 19px; }
.oa-helpcard .ob-link { margin-top: auto; padding-top: 16px; }

/* services page */
.oa-group + .oa-group { margin-top: 40px; }
.oa-group__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ob-line); }
.oa-group__head .ob-h4 { flex: 1; min-width: 0; }
.oa-group__head .ob-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.oa-group__head .ob-tile--sm .ob-i { width: 19px; height: 19px; }
.oa-svcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.oa-svc {
  display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: var(--ob-r-lg); background: #fff;
  border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow); transition: border-color .3s, box-shadow .3s;
}
.oa-svc:hover { border-color: var(--ob-mist-3); box-shadow: var(--ob-shadow-lg); }
.oa-svc__top { display: flex; align-items: flex-start; gap: 14px; }
.oa-svc__name { flex: 1; }
.oa-svc__name a:hover { color: var(--ob-violet); }
.oa-svc__pill { flex: none; }
.oa-svc__stage { display: grid; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--ob-mist); }
.oa-svc__more { padding-left: 21px; }
.oa-svc__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }
.oa-svc .oa-rules--body { margin-top: 18px; }
.oa-svc .ob-btn .ob-i--sm { width: 16px; height: 16px; }

/* order detail */
.oa-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.oa-back { display: inline-flex; align-items: center; gap: 10px; font: 600 .9375rem/1 var(--ob-display); color: var(--ob-ink); }
.oa-back__ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ob-line-2); transform: rotate(180deg); transition: background .2s, color .2s, border-color .2s; }
.oa-back__ic .ob-i { width: 16px; height: 16px; }
.oa-back:hover .oa-back__ic { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; }
.oa-bar .ob-btn--outline .ob-i--sm { width: 16px; height: 16px; }
.oa-bar .ob-btn--outline { gap: 8px; }

.oa-steps-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.oa-step { position: relative; display: grid; gap: 14px; align-content: start; padding-right: 18px; }
.oa-step::before { content: ""; position: absolute; left: 44px; right: 0; top: 21px; height: 2px; background: var(--ob-line); border-radius: 2px; }
.oa-step:last-child::before { display: none; }
.oa-step.is-past::before { background: linear-gradient(90deg, var(--ob-violet), var(--ob-violet-400)); }
.oa-step__dot {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .8125rem/1 var(--ob-display); color: var(--ob-subtle); background: #fff; border: 1.5px solid var(--ob-line-2);
}
.oa-step__dot .ob-i { width: 18px; height: 18px; }
.oa-step.is-done .oa-step__dot { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; }
.oa-step.is-now .oa-step__dot { box-shadow: 0 0 0 6px rgba(112, 52, 245, .16), 0 10px 24px -8px rgba(112, 52, 245, .8); }
.oa-step__t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 650 .9375rem/1.3 var(--ob-display); color: var(--ob-ink); }
.oa-step:not(.is-done) .oa-step__t { color: var(--ob-muted); }
.oa-step__t .ob-tag { height: auto; padding: 3px 9px; font-size: .6875rem; }
.oa-step__b { margin-top: 5px; font-size: .8125rem; line-height: 1.5; color: var(--ob-muted); }

.oa-odetail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.oa-odetail > :first-child > * + * { margin-top: 24px; }
.oa-oside { display: grid; gap: 16px; position: sticky; top: calc(var(--ob-header-h) + 28px); }

.oa-items { width: 100%; font-size: .9375rem; border-collapse: collapse; }
.oa-items th { text-align: left; font-size: .75rem; font-weight: 600; color: var(--ob-subtle); padding: 12px 22px; background: var(--ob-mist); border-bottom: 1px solid var(--ob-line); white-space: nowrap; }
.oa-items td { padding: 18px 16px; border-bottom: 1px solid var(--ob-line); vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oa-items tr:last-child td { border-bottom: 0; }
.oa-items td.oa-items__svc { white-space: normal; width: 100%; }
.oa-items .oa-r { text-align: right; }
.oa-strong { font-weight: 650; color: var(--ob-ink); }
.oa-items__row { display: flex; gap: 14px; align-items: flex-start; }
.oa-items .ob-mono { width: 44px; height: 44px; border-radius: 13px; font-size: .8125rem; }
.oa-items__name { display: inline-block; margin-top: 3px; font: 650 1rem/1.35 var(--ob-display); color: var(--ob-ink); letter-spacing: -.01em; }
a.oa-items__name:hover { color: var(--ob-violet); }
.oa-items__time { display: flex; align-items: center; gap: 5px; }
.oa-items__time .ob-i { flex: none; }
.oa-details { margin-top: 10px; }
.oa-details summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--ob-violet); list-style: none; padding: 5px 12px; border-radius: 999px; background: var(--ob-mist-2); }
.oa-details summary::-webkit-details-marker { display: none; }
.oa-details summary .ob-i { transition: transform .25s; }
.oa-details[open] summary .ob-i { transform: rotate(180deg); }
.oa-details .oa-rules--body { margin-top: 12px; }

.oa-notes {
  margin-top: 10px; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px 18px;
  border-radius: 16px; background: var(--ob-mist); border: 1px solid #ECE3FF; font-size: .875rem; line-height: 1.6; color: var(--ob-text);
}
.oa-notes:focus-visible { outline: 3px solid var(--ob-lilac); outline-offset: 2px; }

.oa-sum { border-radius: var(--ob-r-lg); overflow: hidden; background: #fff; border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow); }
.oa-sum__head { position: relative; isolation: isolate; padding: 20px 22px; color: #fff;
  background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(126, 64, 255, .6), transparent 70%), var(--ob-void); }
.oa-sum__head .ob-meta { color: var(--ob-fog); }
.oa-sum__head .ob-h4 { color: #fff; }
.oa-sum__body { padding: 14px 22px 22px; }
.oa-sum .ob-sumrow--total .ob-price { font-size: 1.5rem; }
.oa-kv { font-size: .875rem; }
.oa-sepnote { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ob-mist-3); }
.oa-links { margin-top: 10px; }
.oa-links a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: .9rem; font-weight: 500; color: var(--ob-text); border-top: 1px solid var(--ob-line); }
.oa-links li:first-child a { border-top: 0; }
.oa-links a:hover { color: var(--ob-violet); }
.oa-links__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ob-mist); color: var(--ob-violet); }
.oa-links__ic .ob-i { width: 17px; height: 17px; }
.oa-links .ob-minw0 { flex: 1; }
.oa-links__go { width: 16px; height: 16px; color: var(--ob-subtle); transition: transform .25s; }
.oa-links a:hover .oa-links__go { transform: translateX(3px); color: var(--ob-violet); }

/* profile */
.oa-fieldset { border: 0; margin: 6px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ob-line); min-width: 0; }
.oa-fieldset legend { float: left; width: 100%; margin-bottom: 16px; padding: 0; }
.oa-fieldset .ob-form-grid { clear: both; }
.oa-half { max-width: calc(50% - 9px); }
.oa-data { overflow: hidden; isolation: isolate; }
.oa-data__glow { position: absolute; z-index: -1; width: 420px; height: 420px; right: -160px; bottom: -220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 64, 255, .5), transparent); pointer-events: none; }
.oa-data__in { display: flex; gap: 18px; align-items: flex-start; }
.oa-data .ob-h4 { color: #fff; }
.oa-data__text { margin-top: 8px; max-width: 64ch; color: var(--ob-fog); }
.oa-data .ob-tile--sm .ob-i { width: 20px; height: 20px; }
.oa-data .ob-tile--dark { color: var(--ob-lilac); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .oa-odetail { grid-template-columns: 1fr; }
  .oa-oside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .oa-oside > .oa-sum { grid-row: span 2; }
  .oa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .oa-cols, .oa-svcgrid { grid-template-columns: 1fr; }
  .oa-help { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .oa-dash { grid-template-columns: 1fr; }
  .oa-side { position: static; }
  .oa-side__card { padding: 10px; display: flex; flex-direction: column; }
  .oa-who { padding: 6px 6px 12px; margin-bottom: 8px; }
  .oa-who__avatar { width: 40px; height: 40px; font-size: 1rem; }
  .oa-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px 2px; }
  .oa-nav::-webkit-scrollbar { display: none; }
  .oa-nav__link { flex: none; min-height: 42px; padding: 0 14px 0 4px; gap: 6px; border-radius: 999px; background: var(--ob-mist); font-size: .875rem; }
  .oa-nav__ic { width: 32px; height: 32px; border-radius: 50%; background: transparent; }
  .oa-nav__ic .ob-i { width: 17px; height: 17px; }
  .oa-nav__link.is-active .oa-nav__ic { box-shadow: none; }
  .oa-nav__link--out { margin: 0; border-top: 0; padding-top: 0; min-height: 42px; border-radius: 999px; }
  .oa-nav__link--out:hover { border-radius: 999px; }
  .oa-listhead { display: none; }
}
@media (max-width: 720px) {
  .oa-steps-rail { grid-template-columns: 1fr; gap: 0; }
  .oa-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 0 0 22px; }
  .oa-step:last-child { padding-bottom: 0; }
  .oa-step::before { left: 21px; right: auto; top: 44px; bottom: 0; width: 2px; height: auto; }
  .oa-step.is-past::before { background: linear-gradient(180deg, var(--ob-violet), var(--ob-violet-400)); }
  .oa-step__txt { padding-top: 10px; }
  .oa-oside { grid-template-columns: 1fr; }
  .oa-oside > .oa-sum { grid-row: auto; }
  .oa-half { max-width: none; }
  .oa-todo__item { flex-direction: column; align-items: stretch; }
  .oa-todo__btn { align-self: flex-start; }
  /* stacked items table */
  .oa-items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .oa-items, .oa-items tbody, .oa-items tr, .oa-items td { display: block; width: 100%; }
  .oa-items tr { padding: 16px 18px; border-bottom: 1px solid var(--ob-line); }
  .oa-items tr:last-child { border-bottom: 0; }
  .oa-items td { padding: 0; border: 0; }
  .oa-items td.oa-r { display: flex; justify-content: space-between; padding: 6px 0 0 58px; font-size: .875rem; }
  .oa-items td.oa-r::before { content: attr(data-label); color: var(--ob-subtle); font-weight: 500; }
  .oa-items td.oa-items__svc { padding-bottom: 8px; }
}
@media (max-width: 560px) {
  .oa-hero__cta { width: 100%; justify-content: space-between; padding-left: 24px; }
  .oa-stats { gap: 10px; }
  .oa-stat { padding: 16px; border-radius: 18px; }
  .oa-stat__ic { margin-bottom: 10px; width: 36px; height: 36px; }
  .oa-panel__head, .oa-panel__body, .oa-todo__item, .oa-svcmini { padding-inline: 18px; }
  .oa-list--flush .oa-orow { padding-inline: 18px; }
  .oa-orow { flex-wrap: wrap; gap: 12px 14px; padding: 16px; }
  .oa-orow__ic { display: none; }
  .oa-orow__main { flex-basis: 100%; }
  .oa-orow__end { flex: 1; display: flex; align-items: baseline; gap: 10px; text-align: left; }
  .oa-svc { padding: 18px; }
  .oa-svc__top { flex-wrap: wrap; }
  .oa-svc__pill { order: 3; }
  .oa-svc__top .oa-svc__name { flex-basis: calc(100% - 62px); }
  .oa-data__in { flex-direction: column; }
  .oa-bar .ob-actions { width: 100%; }
  .oa-tabs { display: flex; }
}

/* ===================================================== ADMIN RESET TOOL */
.oa-rpbody { background: var(--ob-void); }
.oa-rp { min-height: 100vh; overflow: hidden; padding: 28px 0 72px; }
.oa-rp__glow { position: absolute; z-index: -1; width: 900px; height: 560px; left: 50%; top: -260px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 64, 255, .55), transparent); filter: blur(20px); pointer-events: none; }
.oa-rp__wrap { max-width: 820px; }
.oa-rp__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 14px 14px 22px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); color: #fff; }
.oa-rp__head { margin-top: clamp(48px, 7vw, 88px); }
.oa-rp__title { margin-top: 24px; }
.oa-rp__head .ob-lead { margin-top: 14px; max-width: 58ch; }
.oa-rp__gap { margin-top: 24px; }
.oa-rp__steps { margin-top: 16px; }
.oa-rp__steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--ob-line-d); font-size: .9375rem; color: var(--ob-fog-2); }
.oa-rp__steps li:first-child { border-top: 0; padding-top: 0; }
.oa-rp__tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; background: rgba(18, 168, 103, .16); color: #4FD6A0; }
.oa-rp__tick .ob-i { width: 14px; height: 14px; }
.oa-rp__steps li.is-bad .oa-rp__tick { background: rgba(220, 61, 67, .18); color: #FF8C91; }
.oa-rp__creds-card { margin-top: 16px; border-color: rgba(183, 156, 255, .3) !important; box-shadow: 0 30px 70px -36px rgba(112, 52, 245, .8) !important; }
.oa-rp__creds { margin-top: 16px; }
.oa-rp__creds > div { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--ob-line-d); }
.oa-rp__creds > div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 560px) { .oa-rp__creds > div { grid-template-columns: 120px minmax(0, 1fr); align-items: center; } }
.oa-rp__creds dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-fog); }
.oa-rp__creds dd { min-width: 0; }
.oa-rp__creds code, .oa-rp code { display: inline-block; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; padding: 4px 10px; border-radius: 8px; background: rgba(183, 156, 255, .1); border: 1px solid rgba(183, 156, 255, .25); color: #E4D8FF; overflow-wrap: anywhere; }
.oa-rp .ob-alert code { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .1); color: inherit; padding: 1px 6px; }
.oa-rp__foot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--ob-line-d); color: var(--ob-fog); }
.oa-rp .ob-tile--solid { background: linear-gradient(160deg, var(--ob-violet-400), var(--ob-violet-600)); color: #fff; border-color: transparent; }
/* =============================================================================
   Orbex — company & policy pages (op-*)
   about · contact · faq · track-order · terms · privacy · refund · delivery · grievance
   ============================================================================= */

.op-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.op-req { color: var(--ob-err); }

/* ------------------------------------------------------------------- about */
.op-ahero { padding-bottom: clamp(64px, 7vw, 96px); }
.op-ahero .ob-h1 { max-width: 18ch; }
.op-ahero__actions { justify-content: center; }
.op-ahero__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px);
  max-width: 1040px; margin: clamp(48px, 6vw, 72px) auto 0; text-align: left;
}
.op-fact {
  border-radius: var(--ob-r-lg); padding: clamp(22px, 2.6vw, 32px); background: rgba(20, 12, 37, .72);
  border: 1px solid var(--ob-line-d); backdrop-filter: blur(4px);
}
.op-fact__num { font: 700 clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem)/1.05 var(--ob-display); color: #fff; letter-spacing: -.035em; word-spacing: .06em; }
.op-fact__cap { margin-top: 10px; color: var(--ob-fog); font-size: .97rem; }
@media (max-width: 760px) { .op-ahero__facts { grid-template-columns: 1fr; } }

.op-statement { text-align: center; }
.op-statement__text {
  margin: 44px auto 0; max-width: 25ch; font: 700 clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem)/1.18 var(--ob-display);
  letter-spacing: -.035em; word-spacing: .06em; color: var(--ob-ink);
}

.op-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.op-bento .ob-card { padding: clamp(26px, 3vw, 40px); }
.op-bento__wide { grid-column: span 2; }
.op-bento__tall { display: flex; flex-direction: column; }
.op-bento__tall .op-pricecard { margin-top: auto; }
.op-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.op-kinds li {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--ob-line); color: var(--ob-ink); font: 600 .875rem/1 var(--ob-display);
  box-shadow: 0 6px 16px -12px rgba(76, 36, 170, .35);
}
.op-kinds li .ob-i { color: var(--ob-violet); }
.op-kinds li:nth-child(3n+1) { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; }
.op-kinds li:nth-child(3n+1) .ob-i { color: #fff; }
.op-pricecard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: 18px;
  background: #fff; border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow);
}
.op-pricecard__num { font: 700 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1 var(--ob-display); color: var(--ob-ink); letter-spacing: -.04em; }
.op-split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.op-owner { display: grid; gap: 10px; }
.op-owner__row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1px solid var(--ob-line); font: 600 .9375rem/1.3 var(--ob-display); color: var(--ob-ink); min-width: 0;
  box-shadow: 0 6px 16px -12px rgba(76, 36, 170, .35);
}
.op-owner__row > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--ob-mist-2); color: var(--ob-violet); }
.op-owner__row em { margin-left: auto; font: 600 .75rem/1 var(--ob-sans); font-style: normal; color: #0B7A4A; background: var(--ob-ok-bg); padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 960px) {
  .op-bento { grid-template-columns: 1fr 1fr; }
  .op-bento__wide { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .op-bento { grid-template-columns: 1fr; }
  .op-split2 { grid-template-columns: 1fr; }
}

.op-how__card { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 280px; }
.op-how__card .ob-tile { width: 60px; height: 60px; }
@media (max-width: 1100px) { .op-how__card { min-height: 0; gap: 32px; } }
.op-steps { border-radius: var(--ob-r-lg); padding: clamp(24px, 3vw, 40px); background: rgba(20, 12, 37, .6); border: 1px solid var(--ob-line-d); }
.op-steps__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; }
.op-steps__list::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; border-top: 1px dashed rgba(183, 156, 255, .3); }
.op-steps__list li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-steps__n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px;
  background: linear-gradient(160deg, var(--ob-violet-400), var(--ob-violet-600)); color: #fff;
  font: 700 .875rem/1 var(--ob-display); box-shadow: 0 0 0 6px var(--ob-void), 0 10px 24px -10px rgba(112, 52, 245, .9);
}
.op-steps__list b { font: 650 1.0625rem/1.3 var(--ob-display); color: #fff; }
.op-steps__list li > span:last-child { font-size: .875rem; color: var(--ob-fog); line-height: 1.55; }
@media (max-width: 900px) {
  .op-steps__list { grid-template-columns: 1fr; gap: 0; }
  .op-steps__list::before { left: 22px; right: auto; top: 22px; bottom: 22px; border-top: 0; border-left: 1px dashed rgba(183, 156, 255, .3); }
  .op-steps__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 8px 0; }
  .op-steps__n { grid-row: span 2; margin: 0; }
  .op-steps__list b { align-self: end; }
}

.op-practices { border-bottom: 1px solid var(--ob-line); }
.op-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.op-pill {
  display: flex; align-items: center; gap: 16px; height: 96px; padding: 0 22px 0 14px; border-radius: 999px;
  border: 1px solid var(--ob-line-2); background: rgba(255, 255, 255, .8); backdrop-filter: blur(2px);
  transition: border-color .3s, background .3s, transform .3s var(--ob-ease), box-shadow .3s;
}
.op-pill__icon {
  width: 66px; height: 66px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #8B5BFF, #5B21DF); border: 4px solid #fff; box-shadow: 0 10px 24px -12px rgba(76, 36, 170, .6);
}
.op-pills li:nth-child(2n) .op-pill__icon { background: linear-gradient(160deg, #B79CFF, #7034F5); }
.op-pill__icon .ob-i { width: 26px; height: 26px; }
.op-pill__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.op-pill__name { font: 650 1.0625rem/1.25 var(--ob-display); color: var(--ob-ink); letter-spacing: -.015em; word-spacing: .06em; }
.op-pill__count { font-size: .8125rem; color: var(--ob-muted); }
.op-pill__go { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ob-mist-2); color: var(--ob-violet); transition: background .3s, color .3s, transform .3s var(--ob-ease); }
.op-pill:hover { border-color: var(--ob-violet); background: #fff; transform: translateY(-3px); box-shadow: var(--ob-shadow); }
.op-pill:hover .op-pill__go { background: var(--ob-violet); color: #fff; transform: rotate(45deg); }
@media (max-width: 1100px) { .op-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .op-pills { grid-template-columns: 1fr; } .op-pill { height: 80px; } .op-pill__icon { width: 54px; height: 54px; } }

.op-prin { display: grid; gap: 12px; }
.op-prin li { display: flex; gap: 20px; align-items: flex-start; padding: 24px 26px; }
.op-prin__n {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ob-mist-2); color: var(--ob-violet); border: 1px solid var(--ob-mist-3); font: 700 .9375rem/1 var(--ob-display);
}
@media (max-width: 900px) { .op-prin__head { position: static; } }

.op-cta { position: relative; overflow: hidden; border-radius: var(--ob-r-xl); padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px); }

/* ----------------------------------------------------------------- contact */
.op-ct { padding-bottom: clamp(64px, 8vw, 110px); }
.op-ct::after { display: none; }
.op-ct__grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr;
  grid-template-areas: "intro form" "details form"; column-gap: clamp(32px, 5vw, 80px); align-items: start;
}
.op-ct__intro { grid-area: intro; }
.op-ct__form { grid-area: form; }
.op-ct__details { grid-area: details; margin-top: 40px; }
.op-ct__intro { padding-top: 8px; }
.op-ct__intro .ob-h1 { margin-top: 20px; max-width: 14ch; color: #fff; }
.op-ct__intro .ob-lead { margin-top: 18px; max-width: 48ch; }
.op-ct__channels { display: grid; gap: 12px; max-width: 460px; }
.op-ct__channels li {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  background: rgba(20, 12, 37, .72); border: 1px solid var(--ob-line-d);
}
.op-ct__channels .ob-meta { color: var(--ob-fog); }
.op-ct__val { display: block; margin-top: 2px; color: #fff; font: 600 1rem/1.4 var(--ob-display); overflow-wrap: anywhere; }
a.op-ct__val:hover { color: var(--ob-lilac); }
.op-ct__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.op-ct__chips .ob-chip { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .14); color: var(--ob-fog-2); }
.op-ct__chips .ob-chip:hover { color: #fff; border-color: var(--ob-lilac); }
.op-ct__chips .ob-i { color: var(--ob-lilac); }
.op-ct .ob-meta { color: var(--ob-fog); }

.op-formcard {
  background: #fff; color: var(--ob-text); border-radius: var(--ob-r-xl); padding: clamp(22px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 40px 90px -40px rgba(112, 52, 245, .75), 0 0 0 8px rgba(255, 255, 255, .04);
}
.op-formcard .ob-meta { color: var(--ob-subtle); }
.op-formcard h2 { color: var(--ob-ink); }
.op-formcard__head { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px dashed var(--ob-line-2); }
.op-formcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; }
.op-formcard .ob-check { font-size: .875rem; }
.op-formcard .ob-check input.is-invalid { border-color: var(--ob-err); box-shadow: 0 0 0 4px rgba(220, 61, 67, .1); }
.op-formcard .ob-label small { font-weight: 400; color: var(--ob-subtle); }
.op-ct__fallback { display: inline-block; margin-top: 6px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.op-ct__fallback.hidden { display: none; }
@media (max-width: 960px) {
  .op-ct__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "intro" "form" "details"; }
  .op-ct__form { margin-top: 32px; }
  .op-ct__channels { max-width: none; }
}
@media (max-width: 560px) {
  .op-formcard { border-radius: var(--ob-r-lg); }
  .op-formcard__foot .ob-btn { width: 100%; justify-content: space-between; padding-left: 24px; }
}

.op-next { counter-reset: none; }
.op-next__n { font: 700 2.25rem/1 var(--ob-display); color: var(--ob-mist-3); letter-spacing: -.04em; }
.op-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.op-quick__item {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff;
  border: 1px solid var(--ob-line); transition: border-color .25s, box-shadow .25s, transform .25s var(--ob-ease);
}
.op-quick__item b { display: block; font: 650 1rem/1.3 var(--ob-display); color: var(--ob-ink); }
.op-quick__item span > span { display: block; font-size: .8125rem; color: var(--ob-muted); margin-top: 2px; }
.op-quick__go { margin-left: auto; color: var(--ob-violet); transition: transform .25s var(--ob-ease); }
.op-quick__item:hover { border-color: var(--ob-mist-3); box-shadow: var(--ob-shadow); transform: translateY(-2px); }
.op-quick__item:hover .op-quick__go { transform: translateX(3px); }
@media (max-width: 900px) { .op-quick { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- faq */
.op-fhero .ob-h1 { max-width: 16ch; }
.op-filter {
  display: flex; align-items: center; gap: 10px; max-width: 640px; margin-inline: auto; padding: 6px 8px 6px 22px; border-radius: 999px;
  background: #120A22; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px -30px rgba(112, 52, 245, .65);
  transition: border-color .2s, box-shadow .2s;
}
.op-filter:focus-within { border-color: var(--ob-violet-400); box-shadow: 0 0 0 4px rgba(140, 91, 255, .2), 0 30px 70px -30px rgba(112, 52, 245, .65); }
.op-filter__icon { color: var(--ob-lilac); display: grid; }
.op-filter input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: #fff; font-size: 1rem; }
.op-filter input::placeholder { color: #857D9C; }
.op-filter input:focus { outline: none; }
.op-filter input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.op-filter__clear { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ob-fog-2); background: rgba(255, 255, 255, .06); }
.op-filter__clear:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.op-fhero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; margin-inline: auto; }
.op-fhero__chips .ob-i { color: var(--ob-lilac); }

.op-faq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.op-faq__main { max-width: 860px; }
.op-faq__group { scroll-margin-top: 110px; }
.op-faq__group + .op-faq__group { margin-top: clamp(40px, 5vw, 64px); }
.op-faq__ghead { display: flex; align-items: center; gap: 14px; }
.op-faq__answer a { color: var(--ob-violet); text-decoration: underline; text-underline-offset: 3px; }
.op-faq .ob-acc__btn { padding-block: 20px; }
.op-faq__topics .ob-toc a { display: flex; justify-content: space-between; gap: 8px; }
.op-faq__topics .ob-toc small { color: var(--ob-subtle); font-weight: 500; }
.op-askcard { position: relative; overflow: hidden; border-radius: var(--ob-r-lg); padding: 26px; }
.op-askcard__glow { position: absolute; z-index: -1; width: 320px; height: 240px; right: -120px; top: -120px; background: radial-gradient(closest-side, rgba(126, 64, 255, .6), transparent); pointer-events: none; }
.op-askcard .ob-small { color: var(--ob-fog); }
.op-askcard a.ob-ul { color: #fff; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .op-faq { grid-template-columns: 1fr; }
  .op-faq__side .ob-sticky { position: static; }
  .op-faq__topics { display: none; }
}

/* ------------------------------------------------------------- track order */
.op-thero { padding-bottom: clamp(120px, 12vw, 150px); }
.op-track { position: relative; z-index: 2; margin-top: clamp(-96px, -8vw, -72px); }
.op-trackform {
  max-width: 760px; margin-inline: auto; background: #fff; border-radius: var(--ob-r-xl); padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow-lg);
}
.op-trackform__fields { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.op-trackform__fields .ob-field + .ob-field { margin-top: 0; }
.op-trackform__fields .op-mono { text-transform: uppercase; }
.op-trackform__fields .op-mono::placeholder { text-transform: none; }
.op-trackform__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--ob-line-2); }
.op-trackform__foot p { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .op-trackform__fields { grid-template-columns: 1fr; }
  .op-trackform__foot .ob-btn { width: 100%; justify-content: space-between; padding-left: 24px; }
}
.op-tresult { padding-top: clamp(40px, 5vw, 64px); }

.op-tcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.op-tbar { height: 6px; border-radius: 999px; background: var(--ob-mist-2); margin: 24px 0 8px; overflow: hidden; }
.op-tbar i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--ob-lilac), var(--ob-violet)); }
.op-tl { position: relative; margin-top: 16px; }
.op-tl__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.op-tl__step:last-child { padding-bottom: 0; }
.op-tl__step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 2px dashed var(--ob-line-2); }
.op-tl__step.is-done:not(:last-child)::before { border-left-style: solid; border-color: var(--ob-violet); }
.op-tl__dot {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--ob-line-2); color: var(--ob-subtle);
}
.op-tl__step.is-done .op-tl__dot { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; }
.op-tl__step.is-now .op-tl__dot { background: var(--ob-mist-2); border-color: var(--ob-violet); color: var(--ob-violet); box-shadow: 0 0 0 6px rgba(112, 52, 245, .12); }
.op-tl__body { padding-top: 9px; }
.op-tl__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.op-tl__step:not(.is-done):not(.is-now) .ob-h5 { color: var(--ob-muted); }
.op-tl__later { font-size: .78rem; font-weight: 600; color: var(--ob-subtle); padding: 0 10px; height: 26px; display: inline-grid; place-items: center; border: 1px dashed var(--ob-line-2); border-radius: 999px; }
.op-tcard__pay { flex-wrap: wrap; align-items: center; }
.op-tcard__pay > span { flex: 1; min-width: 200px; }

.op-tlines__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ob-line); }
.op-tlines__row:last-child { border-bottom: 0; }
.op-tlines__amt { font: 700 1.0625rem/1 var(--ob-display); color: var(--ob-ink); white-space: nowrap; }
.op-tlines .ob-sumrow--total { margin-top: 0; }

/* --------------------------------------------------------- policy pages */
.op-glance {
  margin-bottom: 40px; padding: clamp(22px, 3vw, 32px); border-radius: var(--ob-r-lg);
  background: linear-gradient(180deg, var(--ob-mist), #fff 140%); border: 1px solid #ECE3FF;
}
.op-glance__head { display: flex; align-items: center; gap: 14px; }
.op-glance__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.op-glance__list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: #fff;
  border: 1px solid var(--ob-line); font-size: .9375rem; line-height: 1.6; color: var(--ob-text);
}
.op-glance__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ob-violet); color: #fff; margin-top: 1px; }
.op-glance__foot { margin-top: 16px; font-size: .8125rem; color: var(--ob-subtle); }
@media (max-width: 680px) { .op-glance__list { grid-template-columns: 1fr; } }

/* the base .ob-table-wrap already draws the frame; drop the prose table frame inside it */
.ob-prose .ob-table-wrap { margin-top: 1.2em; }
.ob-prose .ob-table-wrap + * { margin-top: 1.2em; }
.ob-prose .op-table { border: 0; border-radius: 0; min-width: 480px; }
.ob-prose .op-table th { font-size: .8125rem; white-space: normal; }
.ob-prose .op-table td { vertical-align: top; }

.op-related { margin-top: 0; }
.op-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.op-related__card {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 20px; background: var(--ob-mist);
  border: 1px solid #ECE3FF; transition: border-color .25s, background .25s, transform .25s var(--ob-ease), box-shadow .25s;
}
.op-related__card .ob-tile { margin-bottom: 14px; background: #fff; }
.op-related__card b { font: 650 1rem/1.3 var(--ob-display); color: var(--ob-ink); padding-right: 28px; }
.op-related__card > span:not(.ob-tile):not(.op-related__go) { font-size: .8125rem; color: var(--ob-muted); line-height: 1.5; }
.op-related__go { position: absolute; top: 20px; right: 20px; color: var(--ob-violet); transition: transform .25s var(--ob-ease); }
.op-related__card:hover { background: #fff; border-color: var(--ob-mist-3); box-shadow: var(--ob-shadow); transform: translateY(-2px); }
.op-related__card:hover .op-related__go { transform: rotate(45deg); }
@media (max-width: 760px) { .op-related__grid { grid-template-columns: 1fr; } }

/* grievance officer card */
.op-officer {
  position: relative; overflow: hidden; margin-bottom: 40px; border-radius: var(--ob-r-lg); padding: clamp(22px, 3vw, 32px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end;
}
.op-officer__glow { position: absolute; z-index: -1; width: 520px; height: 320px; right: -160px; top: -180px; background: radial-gradient(closest-side, rgba(126, 64, 255, .55), transparent); pointer-events: none; }
.op-officer__main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.op-officer .ob-small { color: var(--ob-fog); }
.op-officer__btn { max-width: 100%; }
.op-officer__btn { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.op-officer__sla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 260px; }
.op-officer__sla div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ob-line-d); }
.op-officer__sla dt { font-size: .75rem; color: var(--ob-fog); }
.op-officer__sla dd { margin-top: 4px; font: 700 1.25rem/1.1 var(--ob-display); color: #fff; letter-spacing: -.02em; }
@media (max-width: 760px) {
  .op-officer { grid-template-columns: 1fr; }
  .op-officer__sla { min-width: 0; }
}
.op-kv { display: grid; gap: 0; padding: 6px 20px; border-radius: 18px; background: var(--ob-mist); border: 1px solid #ECE3FF; }
.op-kv div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ob-line); }
.op-kv div:last-child { border-bottom: 0; }
.op-kv dt { color: var(--ob-subtle); font-size: .875rem; }
.op-kv dd { color: var(--ob-ink); font-weight: 500; overflow-wrap: anywhere; }

/* contact hero is not .ob-dark (the white form card lives inside it), so dark variants are set here */
.op-ct .ob-badge { background: rgba(255, 255, 255, .03); color: #fff; border-color: rgba(255, 255, 255, .14); }
.op-ct .ob-badge__dot { background: var(--ob-lilac); box-shadow: 0 0 0 4px rgba(183, 156, 255, .16); }
.op-ct__intro .ob-lead { color: var(--ob-fog); }
.op-ct__intro .ob-tile--dark { background: #1A1030; border-color: rgba(255, 255, 255, .08); color: #fff; }
.op-formcard .ob-meta { color: var(--ob-subtle); }
.ob-prose .op-table:not(:has(th:nth-child(3))) { min-width: 0; }
@media (max-width: 560px) {
  .ob-prose .op-table th, .ob-prose .op-table td { padding: 12px 14px; }
}