/* The signed-out view of a gated feature page (public/signed-out.js). Self-contained: every rule is under .so, so it looks the same on Pro look, Headshots, Career change and My website.
   Phone first. Under 900px the gold button is pinned at the bottom of the Pro look and Headshots views (thumb reach); from 900px it sits in the hero. */
.so { --so-navy: #12233B; --so-navy2: #0C1A2D; --so-amber: #F4B73F; --so-teal: #58B9B1; --so-cream: #FBF8F2; --so-ink: #0F1E2E; --so-ink2: #435468; --so-line: #D9D0BC;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; color: var(--so-ink); background: var(--so-cream); min-height: 100vh; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.so *, .so *::before, .so *::after { box-sizing: border-box; }
.so h1, .so h2, .so h3, .so p, .so figure { margin: 0; }
.so a { color: inherit; }
.so :focus-visible { outline: 3px solid #2D8C87; outline-offset: 3px; }
.so-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; max-width: 1180px; margin: 0 auto; padding: 8px 16px; }
.so-logo { display: inline-flex; align-items: center; min-height: 44px; }
.so-logo img { height: 30px; width: auto; display: block; }
.so-hsign { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 700; font-size: 15px; color: var(--so-navy); text-decoration: none; }
.so-hsign:hover { text-decoration: underline; text-underline-offset: 3px; }
.so-main { max-width: 1180px; margin: 0 auto; padding: 4px 12px 24px; }
.so-hero { border-radius: 28px; background: radial-gradient(500px 300px at 90% 0, #1F3F63 0, transparent 60%), linear-gradient(160deg, var(--so-navy), var(--so-navy2)); color: #fff; padding: 28px 20px 22px; }
.so-eyebrow { font-weight: 700; letter-spacing: .14em; font-size: 12px; color: var(--so-amber); text-transform: uppercase; }
.so-hero h1 { font-size: 36px; line-height: 1.04; letter-spacing: -.04em; font-weight: 800; margin: 12px 0; text-wrap: balance; }
.so-hero h1 em { font-style: normal; color: var(--so-teal); }
.so-lead { color: #C9D3E4; font-size: 17px; }
.so-fine { color: #C9D3E4; font-size: 15px; }
.so-code { color: #C9D3E4; font-size: 15px; }
.so-code summary { cursor: pointer; text-decoration: underline; width: fit-content; }
.so-code p { margin: 6px 0 0; }
.so-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; }
.so-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--so-amber); color: var(--so-navy); font-weight: 800; font-size: 17px; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(226,162,31,.9); }
.so-btn:hover { background: #FFC85A; }
.so-btn { line-height: 1.2; }
.so-btn::after { content: ""; width: 1.2em; height: 1.2em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.so-signin { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; font-size: 15px; color: #fff; text-underline-offset: 3px; }
.so-stage { margin-top: 22px; }
.so-stage .ba { aspect-ratio: 4/5; width: 100%; border-radius: 20px; }
.so-stage .who { display: flex; gap: 10px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.so-stage .who button { min-height: 44px; border: 1.5px solid rgba(255,255,255,.28); background: transparent; color: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 15px; cursor: pointer; }
.so-stage .who button[aria-pressed="true"] { background: #fff; color: var(--so-navy); border-color: #fff; }
.so h1:focus { outline: none; }
.so-stage .cs-toggle { display: flex; gap: 10px; margin-top: 12px; justify-content: center; }
.so-stage .cs-toggle button { min-height: 44px; border: 1.5px solid rgba(255,255,255,.28); background: transparent; color: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 15px; cursor: pointer; }
.so-stage .cs-toggle button[aria-pressed="true"] { background: #fff; color: var(--so-navy); border-color: #fff; }
.so-cap { margin-top: 10px; text-align: center; font-size: 14px; color: #C9D3E4; }
.so-looks { margin-top: 32px; }
.so-kick { font-weight: 700; letter-spacing: .14em; font-size: 12px; text-transform: uppercase; color: #8A6410; }
.so-looks h2 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 6px 0 0; text-wrap: balance; }
.so-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.so-tile { position: relative; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 20px 40px -26px rgba(18,35,59,.5); }
.so-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.so-tile figcaption { padding: 10px 14px 12px; font-weight: 700; font-size: 15px; color: var(--so-navy); }
.so-chip { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(10,20,34,.7); color: #fff; font-weight: 700; font-size: 12.5px; }
.so-free { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; padding: 20px; border-radius: 26px; background: #fff; border: 1.5px solid var(--so-line); }
.so-free h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 4px; }
.so-free p { color: var(--so-ink2); font-size: 16px; }
.so-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--so-line); color: var(--so-navy); font-weight: 700; font-size: 16px; text-decoration: none; }
.so-ghost:hover { background: var(--so-cream); }
.so-foot { margin-top: 28px; text-align: center; color: var(--so-ink2); font-size: 14px; }

/* phone: the gold button is pinned (Pro look and Headshots) */
@media (max-width: 899.98px) {
  .so-rich .so-main { padding-bottom: 110px; }
  .so-rich .so-pin { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--so-cream); border-top: 1px solid #E7DFD0; display: flex; justify-content: center; }
  .so-rich .so-pin .so-btn { width: 100%; max-width: 420px; padding: 0 16px; white-space: nowrap; }
  .so-cta { gap: 0; }
  .so-cta .so-fine { order: 1; } .so-cta .so-code { order: 1; } .so-cta .so-pin { order: 2; } .so-cta .so-signin { order: 3; justify-content: flex-start; }
  .so-plain .so-main { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
  .so-plain .so-cta .so-btn { width: 100%; } .so-plain .so-pin { margin: 8px 0; }
}
/* computer: copy and button on the left, the before and after on the right; four tiles in a row */
@media (min-width: 900px) {
  .so-head { padding: 12px 40px; } .so-main { padding: 8px 40px 72px; }
  .so-hero { padding: 48px; }
  .so-rich .so-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: center; }
  .so-hero h1 { font-size: 48px; }
  .so-cta { align-items: flex-start; margin-top: 28px; }
  .so-cta .so-fine { margin-bottom: 4px; }
  .so-btn { min-width: 280px; }
  .so-stage { margin-top: 0; }
  .so-plain .so-hero { max-width: 760px; margin: 32px auto 0; }
  .so-plain .so-main { padding-bottom: 96px; }
  .so-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .so-free { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 24px 28px; }
  .so-ghost { white-space: nowrap; min-height: 48px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) { .so-rich .so-hero { padding: 36px; gap: 32px; } .so-hero h1 { font-size: 42px; } }

.so-compare { max-width: 640px; margin: 32px auto 0; padding: 8px 16px 24px; }
.so-compare h2 { margin: 4px 0 18px; }
.so-compare .suite h3.suite-h { font-size: 20px; letter-spacing: -.01em; font-weight: 800; color: var(--navy); margin: 2px 0; }
.so-compare .suite-more { margin: 10px 0 0; }
.so-compare-note { color: var(--ink-2); font-size: 15px; margin: 14px 0 0; }


.so-compare .suite-act th, .so-compare .suite-act td { padding-top: 14px; padding-bottom: 6px; border-bottom: 0; text-align: center; }
.so-cbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: 15px; line-height: 1.2; text-decoration: none; border: 2px solid #12233B; }
.so-compare .so-cdark { background: #12233B; color: #fff !important; } .so-compare .so-cghost { background: transparent; color: #12233B !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .so-compare .suite .so-cghost { color: #12233B !important; } }

/* the gold button keeps navy text in every theme (a dark-mode link color elsewhere on the page made it white on gold) */
.so a.so-btn, .so a.so-btn:hover, .so a.so-btn:visited { color: #12233B !important; }