/* onboarding.css - the shiftranks.com onboarding steps (mockup 2 onwards):
   glass cards over the turning Earth, a serif display title, the gradient
   pill. The starfield behind comes from base.html; the Earth from earth3d.js. */

:root {
  --ob-ink: #F2F4FB;
  --ob-muted: #A9B3CF;
  --ob-dim: #7F8AA8;
  --ob-seo: #1E7BFF;
  --ob-seo-rgb: 30, 123, 255;
  --ob-social: #7A4DFF;
  --ob-social-rgb: 122, 77, 255;
  --ob-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ob-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── The Earth, fixed behind the page ──────────────────────────────────
   earth3d.js composes for a canvas the height of the viewport: the crest of
   the horizon lands about 76% of the way down its box. That suits the
   dashboard; here the horizon is the page's main light and crosses the
   middle of the screen, as in mockup 2. So without touching the shared
   composition, this page makes the box taller than the viewport and lifts
   it: its bottom stays on the viewport's bottom (so the globe fills to the
   edge) and the crest lands at top + 0.762 x height.
     desktop: top -100vh, height 200vh -> crest at about 52vh
     phone:   top  -60vh, height 160vh -> crest at about 62vh, under the
              first card's top so the heading stays on dark sky
   The still frame sits in the same box, height-fitted and centred like the
   camera, so it lines up with the live render. The moon falls above the
   viewport at this scale, on purpose. */
.ob-earth { --ob-earth-top: -100vh; --ob-earth-h: 200vh;
  position: fixed; left: 0; right: 0; top: var(--ob-earth-top); height: var(--ob-earth-h); z-index: -1; pointer-events: none;
  /* The box's upper half is above the viewport; fade in from the viewport's
     top so the still frame's sky gives way to the starfield behind. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 62%, #000 70%);
          mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 62%, #000 70%); }
.ob-earth > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-still { background: url('/static/img/space/earth-still.jpg') center bottom / auto 100% no-repeat;
  transition: opacity 1.2s ease; }
.ob-earth.is-live .ob-still { opacity: 0; }
#rv-earth { display: block; }
@media (max-width: 700px) {
  .ob-earth { --ob-earth-top: -60vh; --ob-earth-h: 160vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 37.5%, rgba(0, 0, 0, .5) 55%, #000 66%);
            mask-image: linear-gradient(to bottom, transparent 37.5%, rgba(0, 0, 0, .5) 55%, #000 66%); }
  .ob-still { background-image: url('/static/img/space/earth-still-phone.jpg'); }
}

/* ── Page frame ──────────────────────────────────────────────────────── */
.ob { position: relative; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
  padding: clamp(24px, 3.6vh, 48px) 24px clamp(48px, 7vh, 80px);
  text-align: center; color: var(--ob-ink); font-family: var(--ob-sans); }
.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }

.ob-progress { position: absolute; top: clamp(24px, 3.6vh, 48px); right: 24px;
  display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ob-muted); letter-spacing: .01em; }
.ob-progress span { margin-right: 14px; }
.ob-progress i { display: block; width: 30px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.ob-progress i.on { width: 36px; background: linear-gradient(90deg, #8B6BFF, #6F7BFF);
  box-shadow: 0 0 10px rgba(var(--ob-social-rgb), .75); }

.ob-eyebrow { margin: 0 0 12px; font-size: .75rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ob-muted); padding-left: .34em; }
.ob-title { margin: 0; font-family: var(--ob-serif); font-weight: 500; font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1; letter-spacing: -.005em; color: var(--ob-ink);
  text-shadow: 0 2px 30px rgba(120, 140, 255, .18); }
.ob-lead { margin: 12px 0 0; font-family: var(--ob-serif); font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  color: var(--ob-ink); }
.ob-sub { margin: 6px auto 0; max-width: 38em; font-size: .975rem; line-height: 1.55; color: var(--ob-muted); }

/* ── The two paths ───────────────────────────────────────────────────── */
.ob-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 396px)); justify-content: center;
  gap: clamp(18px, 2vw, 24px); margin-top: clamp(22px, 3.2vh, 36px); }

.ob-path { --a: var(--ob-seo); --a-rgb: var(--ob-seo-rgb);
  position: relative; display: flex; flex-direction: column; text-align: left; text-decoration: none; color: var(--ob-ink);
  background: rgba(10, 18, 36, .62); background-clip: padding-box; border: 1px solid transparent; border-radius: 22px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 0 rgba(var(--a-rgb), 0);
  transition: box-shadow .35s ease, transform .35s ease, background-color .35s ease; cursor: pointer; outline: none; }
.ob-path--social { --a: var(--ob-social); --a-rgb: var(--ob-social-rgb); }

/* 1px gradient border, drawn by a masked layer so the glass stays clear. */
.ob-path::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(165deg, rgba(var(--a-rgb), .95), rgba(var(--a-rgb), .25) 40%, rgba(255, 255, 255, .06) 62%, rgba(var(--a-rgb), .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .68; transition: opacity .35s ease; }

.ob-path:hover, .ob-path:focus-visible { transform: translateY(-2px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 26px -4px rgba(var(--a-rgb), .55); }
.ob-path:hover::before, .ob-path:focus-visible::before { opacity: .85; }
.ob-path:focus-visible { box-shadow: 0 0 0 3px #0A0E14, 0 0 0 5px rgba(var(--a-rgb), .9), 0 0 30px -2px rgba(var(--a-rgb), .6); }

.ob-path[aria-checked="true"] { background-color: rgba(12, 20, 42, .7);
  box-shadow: 0 0 0 1px rgba(var(--a-rgb), .9), 0 0 40px -2px rgba(var(--a-rgb), .85), 0 0 110px -20px rgba(var(--a-rgb), .75),
              inset 0 0 48px -14px rgba(var(--a-rgb), .6); }
.ob-path[aria-checked="true"]::before { opacity: 1;
  background: linear-gradient(165deg, rgba(255, 255, 255, .7), rgba(var(--a-rgb), 1) 30%, rgba(var(--a-rgb), .8)); }
.ob-path[aria-checked="true"]:focus-visible { box-shadow: 0 0 0 3px #0A0E14, 0 0 0 5px rgba(var(--a-rgb), .9),
  0 0 34px -2px rgba(var(--a-rgb), .75), 0 0 90px -20px rgba(var(--a-rgb), .7), inset 0 0 44px -14px rgba(var(--a-rgb), .55); }

/* Round badge, top right: an empty ring, filled with a check when chosen. */
.ob-check { position: absolute; top: 18px; right: 18px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(var(--a-rgb), .75); background: rgba(6, 10, 22, .45); transition: all .3s ease; }
.ob-check::after { content: ''; position: absolute; left: 9px; top: 6px; width: 7px; height: 12px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: all .3s ease; }
.ob-path[aria-checked="true"] .ob-check { background: var(--a); border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 0 16px rgba(var(--a-rgb), .9); }
.ob-path[aria-checked="true"] .ob-check::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* Logo art: the mark over a lit planet limb, like the mockup's top half. */
.ob-art { position: relative; display: flex; align-items: center; justify-content: center; height: 182px; overflow: hidden;
  border-radius: 21px 21px 0 0; isolation: isolate; }
.ob-art::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 58%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0, rgba(var(--a-rgb), .36), rgba(12, 22, 48, .6) 38px, rgba(10, 18, 40, 0) 84px);
  box-shadow: 0 -1px 0 rgba(var(--a-rgb), .55), 0 -10px 40px -6px rgba(var(--a-rgb), .55); }
.ob-art::after { content: ''; position: absolute; z-index: -2; inset: 0;
  background: radial-gradient(60% 55% at 50% 48%, rgba(var(--a-rgb), .22), transparent 70%); }
.ob-art img { display: block; width: auto; height: auto; max-width: 70%; max-height: 140px;
  filter: drop-shadow(0 8px 24px rgba(var(--a-rgb), .45)); transition: transform .5s ease; }
.ob-path--social .ob-art img { max-height: 158px; }
.ob-path:hover .ob-art img, .ob-path[aria-checked="true"] .ob-art img { transform: scale(1.03); }

.ob-body { padding: 0 30px 26px; }
.ob-body h2 { margin: 0; font-family: var(--ob-serif); font-weight: 600; font-size: 2.3rem; line-height: 1; color: var(--ob-ink); }
.ob-tag { margin: 6px 0 0; font-family: var(--ob-serif); font-weight: 500; font-size: 1.3rem; color: #DCE2F2; }
.ob-tag b { font-weight: 700; color: #fff; }
.ob-body p:not(.ob-tag) { margin: 10px 0 0; font-size: .9rem; line-height: 1.55; color: var(--ob-muted); }
.ob-body ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ob-body li { position: relative; padding-left: 32px; font-size: .9rem; line-height: 20px; color: #CFD6EA; }
.ob-body li::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--a); }
.ob-body li::after { content: ''; position: absolute; left: 7.5px; top: 4.5px; width: 5px; height: 9px;
  border: solid var(--a); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }

/* ── The pill ────────────────────────────────────────────────────────── */
.ob-cta { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: min(388px, 100%); min-height: 54px; margin-top: clamp(22px, 3.2vh, 36px); padding: 0 56px;
  border-radius: 999px; background: linear-gradient(90deg, #3B5BFF, #7A4DFF); color: #fff; text-decoration: none;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(150, 140, 255, .35), 0 14px 40px -12px rgba(var(--ob-social-rgb), .85);
  transition: opacity .3s ease, box-shadow .3s ease, transform .2s ease; }
.ob-cta::after { content: ''; position: absolute; right: 26px; top: 50%; width: 18px; height: 2px; background: currentColor;
  transform: translateY(-50%); border-radius: 2px; }
.ob-cta::before { content: ''; position: absolute; right: 26px; top: 50%; width: 8px; height: 8px;
  border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); border-radius: 1px; }
.ob-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(170, 160, 255, .5),
  0 18px 50px -12px rgba(var(--ob-social-rgb), 1); }
.ob-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ob-cta[aria-disabled="true"] { opacity: .55; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }

.ob-foot { margin: 18px 0 0; font-size: .875rem; color: var(--ob-muted); text-shadow: 0 1px 10px rgba(4, 8, 20, .95), 0 0 2px rgba(4, 8, 20, .9); }
.ob-foot a { color: #B9C6FF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185, 198, 255, .35); }
.ob-foot a:hover { color: #fff; }

/* ── Narrower screens ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ob-progress { position: static; justify-content: center; margin: 0 0 28px; }
}
/* Laptop heights: keep the pill above the fold beside the two cards. */
@media (min-width: 769px) and (max-height: 860px) {
  .ob { padding-top: 22px; }
  .ob-progress { top: 22px; }
  .ob-title { font-size: clamp(2.6rem, 4.4vw, 3.5rem); }
  .ob-lead { margin-top: 8px; font-size: 1.25rem; }
  .ob-sub { margin-top: 4px; }
  .ob-paths { margin-top: 22px; }
  .ob-art { height: 150px; }
  .ob-art img { max-height: 118px; }
  .ob-path--social .ob-art img { max-height: 134px; }
  .ob-body { padding-bottom: 22px; }
  .ob-body h2 { font-size: 2.1rem; }
  .ob-cta { margin-top: 22px; }
}
@media (max-width: 768px) {
  .ob { padding: 28px 16px 64px; }
  .ob-paths { grid-template-columns: minmax(0, 460px); }
  .ob-art { height: 200px; }
}
@media (max-width: 480px) {
  .ob-title { font-size: 2.4rem; }
  .ob-lead { font-size: 1.2rem; }
  .ob-sub { font-size: .9rem; }
  .ob-progress span { margin-right: 10px; }
  .ob-progress i { width: 22px; }
  .ob-progress i.on { width: 28px; }
  .ob-art { height: 176px; }
  .ob-art img, .ob-path--social .ob-art img { max-height: 140px; }
  .ob-body { padding: 2px 22px 24px; }
  .ob-body h2 { font-size: 2.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-path, .ob-path::before, .ob-check, .ob-check::after, .ob-art img, .ob-cta, .ob-still { transition: none; }
  .ob-path:hover, .ob-path:focus-visible, .ob-cta:hover { transform: none; }
  .ob-path:hover .ob-art img, .ob-path[aria-checked="true"] .ob-art img { transform: none; }
}