/* Ojafi's one call to action. Every "Answer 6 questions" on Home uses .oj-cta; secondary
   next steps use .oj-link. Loaded last so it wins over the borrowed template button styles. */
.oj-cta {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  height: 48px !important; min-height: 0 !important; padding: 0 24px !important; margin: 0;
  border: 1px solid transparent !important; border-radius: 999px !important; color: #fff !important;
  /* glossy: a lighter gradient rim (border-box) around a gradient face (padding-box), as on the reference */
  background: linear-gradient(#FF8A3D, #F06A14) padding-box, linear-gradient(#FFB27A, #F2741F) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 2px rgba(120, 40, 0, .22), 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .18) !important;
  font: 600 16px/1 "Inter", system-ui, sans-serif !important; letter-spacing: -0.16px !important; text-transform: none !important;
  text-decoration: none !important; white-space: nowrap; width: auto; max-width: 100%; cursor: pointer; transform: none;
  transition: filter .2s ease, transform .2s ease !important;
}
.oj-cta::before, .oj-cta::after { display: none !important; content: none !important; }
.oj-cta > svg, .oj-cta .btn-icon, .oj-cta i, .oj-cta > span:not(:first-child) { display: none !important; }
.oj-cta > span { all: unset; }
.oj-cta:hover { filter: brightness(1.06); }
.oj-cta:active { filter: brightness(.96); }
.oj-cta:focus-visible { outline: 3px solid #2A2320 !important; outline-offset: 3px; }
.oj-cta--sm { height: 40px !important; padding: 0 18px !important; font-size: 14px !important; }
.oj-cta--block { display: flex !important; width: 100% !important; }

/* secondary next steps: the dark glossy pill */
.oj-link {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 48px !important; padding: 0 24px !important; border: 1px solid transparent !important; border-radius: 999px !important;
  background: linear-gradient(#2C2C2F, #222225) padding-box, linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)) border-box, #222225 border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 2px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .2) !important;
  color: #fff !important; font: 600 16px/1 "Inter", system-ui, sans-serif !important; letter-spacing: -0.16px !important;
  text-decoration: none !important; white-space: nowrap; width: auto !important; cursor: pointer; transition: filter .2s ease;
}
.oj-link::before, .oj-link::after { display: none !important; }
.oj-link > svg, .oj-link i { display: none !important; }
.oj-link:hover { filter: brightness(1.15); }

.oj-cta-note { display: block; margin-top: 12px; font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: inherit; opacity: .72; }


/* ===== Gloss, second take: a soft sheen over the top half (a background layer, so no pseudo-element), a crisp inner
   top highlight, a hairline ring a shade darker than the face, and a tight shadow plus a soft tinted one below.
   No hover change; pressing settles the button 1px and tucks the shadow in. ===== */
:root {
  --gl-orange: linear-gradient(180deg, #FF8C42 0%, #F46E1C 100%);
  --gl-orange-sh: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(150, 52, 0, .18), 0 0 0 1px #D9600F, 0 1px 2px rgba(150, 52, 0, .25);
  --gl-orange-sh-on: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(150, 52, 0, .18), 0 0 0 1px #D9600F, 0 1px 1px rgba(150, 52, 0, .25);
  --gl-ink: linear-gradient(180deg, #343437 0%, #1E1E20 100%);
  --gl-ink-sh: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px #0F0F10, 0 1px 2px rgba(0, 0, 0, .3);
  --gl-ink-sh-on: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px #0F0F10, 0 1px 1px rgba(0, 0, 0, .3);
  --gl-white: linear-gradient(180deg, #FFFFFF 0%, #FBF9F6 100%);
  --gl-white-sh: inset 0 1px 0 #fff, 0 0 0 1px rgba(28, 28, 28, .1), 0 1px 2px rgba(28, 28, 28, .06);
  --gl-white-sh-on: inset 0 1px 0 #fff, 0 0 0 1px rgba(28, 28, 28, .12), 0 1px 1px rgba(28, 28, 28, .06);
}
.oj-cta { border: 0 !important; background: var(--gl-orange) !important; box-shadow: var(--gl-orange-sh) !important; filter: none !important;
  transition: transform .12s ease, box-shadow .12s ease !important; }
.oj-cta:hover { filter: none !important; }
.oj-cta:active { transform: translateY(1px) !important; box-shadow: var(--gl-orange-sh-on) !important; filter: none !important; }
.oj-link { border: 0 !important; background: var(--gl-ink) !important; box-shadow: var(--gl-ink-sh) !important; filter: none !important;
  transition: transform .12s ease, box-shadow .12s ease !important; }
.oj-link:hover { filter: none !important; }
.oj-link:active { transform: translateY(1px) !important; box-shadow: var(--gl-ink-sh-on) !important; }

/* The sheen is its own rounded shape, so its lower edge curves in at the corners instead of cutting straight across.
   The doubled class outranks the "no pseudo-elements" rules above; the button clips the sheen's top to its own curve. */
.oj-cta.oj-cta, .oj-link.oj-link, .au .au-social.au-apple { position: relative; isolation: isolate; overflow: hidden; }
.oj-cta.oj-cta::after, .oj-link.oj-link::after, .au .au-social.au-apple::after {
  content: "" !important; display: block !important; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 3px 42% 3px; border-radius: 0 0 16px 16px / 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); }
.oj-link.oj-link::after, .au .au-social.au-apple::after { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); }