/* Extracted from Header.html block 1. */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  font-family:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background:#000;
  color:#fff;
  min-height:100vh;
}
body.earn-menu-open {
  overflow:hidden;
}
/* -- TOP BAR -- */
.earn-top-bar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:90px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  z-index:999999;
  transition:background 0.15s ease;
  pointer-events:none;
}
body.earn-menu-open .earn-top-bar {
}
.earn-top-bar-logo,
.earn-top-bar-right {
  pointer-events:auto;
}
.earn-top-bar-logo {
  flex-shrink:0;
  text-decoration:none;
}
/* Logo tile - iOS squircle shape drawn in SVG (not border-radius), so the
   corner is a continuous superellipse. Hover glow uses filter:drop-shadow
   so the green bloom follows the squircle, not a rectangle. */
.earn-logo-tile {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:65px;
  height:65px;
  transform-style:preserve-3d;
  perspective:800px;
  will-change:transform;
}
.earn-tile-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:filter 0.2s ease;
}
.earn-tile-border {
  stroke:rgba(255, 255, 255, 0.08);
  transition:stroke 0.2s ease;
}
.earn-tile-logo {
  position:relative;
  z-index:1;
  width:66%;
  height:auto;
  display:block;
  transform:translateX(-2px);
  transition:filter 0.2s ease;
}
.earn-logo-tile:hover .earn-tile-border {
  stroke:rgba(89, 204, 128, 0.25);
}
.earn-top-bar-right {
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  height:100%;
}
/* -- LOGGED-IN vs LOGGED-OUT -- */
.earn-points-container {
  display:none;
}
body.logged-in .earn-points-container {
  display:flex;
  align-items:center;
}
.earn-auth-buttons {
  display:flex;
  align-items:center;
  gap:8px;
}
body.logged-in .earn-auth-buttons {
  display:none;
}
/* -- POINTS DISPLAY -- */
.points-display {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  background:linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border:1px solid #1a1a1a;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  color:#fff;
  text-decoration:none;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.points-display:hover {
  background:linear-gradient(180deg, #252525 0%, #111 100%);
  border-color:rgba(255, 255, 255, 0.18);
}
.points-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#59CC80;
  box-shadow:0 0 8px rgba(90, 222, 134, 0.6);
}
/* -- AUTH BUTTONS -- */
/* Sign Up = primary green pill (.earn-btn style). Login = secondary
   Graphite pill (.earn-btn-secondary style). Matches primitives. */
.earn-auth-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 24px;
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  text-decoration:none;
  border-radius:100px;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
}
.earn-auth-btn-primary {
  background:#59CC80;
  color:#000;
  border:none;
}
.earn-auth-btn-primary:hover {
  background:#6BE898;
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(107, 232, 152, 0.45);
}
.earn-auth-btn-primary:active {
  background:#7DF0A8;
  transform:translateY(0);
  box-shadow:0 0 12px rgba(107, 232, 152, 0.3);
}
.earn-auth-btn-secondary {
  background:#1c1c1c;
  color:#fff;
  border:1px solid rgba(255, 255, 255, 0.08);
}
.earn-auth-btn-secondary:hover {
  border-color:rgba(255, 255, 255, 0.15);
  transform:translateY(-1px);
}
.earn-auth-btn-secondary:active {
  transform:translateY(0);
}
/* -- TOGGLE -- */
/* Secondary Graphite style to match auth buttons; keeps circle shape
   and the 3-line <-> X animation inside. Height matches pill buttons. */
.earn-menu-toggle {
  width:44px;
  height:44px;
  border-radius:50%;
  background:#1c1c1c;
  border:1px solid rgba(255, 255, 255, 0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.earn-menu-toggle:hover {
  border-color:rgba(255, 255, 255, 0.15);
  transform:translateY(-1px);
}
.earn-menu-toggle-inner {
  position:relative;
  width:20px;
  height:14px;
}
.earn-menu-toggle-line {
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:all 0.25s ease;
}
.earn-menu-toggle-line:nth-child(1) {
  top:0;
}
.earn-menu-toggle-line:nth-child(2) {
  top:6px;
}
.earn-menu-toggle-line:nth-child(3) {
  top:12px;
}
.earn-menu-toggle.open .earn-menu-toggle-line:nth-child(1) {
  top:6px;
  transform:rotate(45deg);
}
.earn-menu-toggle.open .earn-menu-toggle-line:nth-child(2) {
  opacity:0;
}
.earn-menu-toggle.open .earn-menu-toggle-line:nth-child(3) {
  top:6px;
  transform:rotate(-45deg);
}
/* -- MENU OVERLAY -- */
/* One transition on opacity/visibility. No stagger, no keyframes,
   no .closing class. Cards fade in sync via a descendant rule below. */
.earn-menu-overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:999998;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}
.earn-menu-overlay.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
body.earn-menu-open {
  background:#000;
}
.earn-menu-container {
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  /* Equal top/bottom padding so align-items:center hits true viewport
     center. Top needs >=90px to clear the top bar. */
  padding:90px 70px;
}
/* -- CARDS GRID -- */
.earn-menu-cards {
  display:grid;
  grid-template-columns:repeat(3, 275px);
  grid-template-rows:repeat(2, 275px);
  gap:16px;
}
/* -- CARD - Active Graphite -- */
.earn-menu-card,
button.earn-menu-card {
  font-family:inherit;
  text-align:center;
  border-radius:20px;
  padding:40px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  background:#1c1c1c;
  border:1px solid rgba(255, 255, 255, 0.08);
  /* Hidden by default; fade in when the overlay has .open. Only
     opacity transitions - transform is owned by the JS tilt and must
     stay instant. */
  opacity:0;
  transition:opacity 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  outline:none;
  pointer-events:auto;
  transform-style:preserve-3d;
  /* will-change:transform was always-on here - forced 6 permanent GPU
     compositor layers eating VRAM and slowing every paint. Only
     promote on actual hover via the rule below. */
}
.earn-menu-card:hover {
  will-change:transform;
}
.earn-menu-overlay.open .earn-menu-card {
  opacity:1;
}
/* Pause the cursor-glow + marquee + tilt animations while the menu
   overlay is open. The full-screen overlay covers them, but the
   browser still composites them - that's the main contributor to the
   10s presentation delay reported on menu-toggle clicks. */
body.earn-menu-open #earn-cursor-glow {
  display:none !important;
}
body.earn-menu-open .fold2-offers-track {
  animation-play-state:paused !important;
}
.earn-menu-card:hover {
  border-color:rgba(89, 204, 128, 0.15);
  box-shadow:0 0 30px rgba(89, 204, 128, 0.08), 0 20px 50px rgba(0, 0, 0, 0.5);
}
.earn-menu-card:focus,
.earn-menu-card:focus-visible {
  outline:none;
  border-color:rgba(89, 204, 128, 0.15);
  box-shadow:0 0 30px rgba(89, 204, 128, 0.08), 0 20px 50px rgba(0, 0, 0, 0.5);
}
@keyframes cardClickGlow {
  0% {
    box-shadow:0 0 28px 4px rgba(89, 204, 128, 0.18), 0 0 8px 1px rgba(89, 204, 128, 0.12);
  }
  50% {
    box-shadow:0 0 52px 12px rgba(89, 204, 128, 0.32), 0 0 18px 4px rgba(89, 204, 128, 0.24);
  }
  100% {
    box-shadow:0 0 28px 4px rgba(89, 204, 128, 0.18), 0 0 8px 1px rgba(89, 204, 128, 0.12);
  }
}
.earn-menu-card:active {
  border-color:rgba(89, 204, 128, 0.6);
  animation:cardClickGlow 1.8s ease-in-out infinite;
}
.earn-menu-card-icon {
  width:72px;
  height:72px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  background:rgba(255, 255, 255, 0.05);
  border:1px solid rgba(255, 255, 255, 0.06);
  color:#59CC80;
  transition:background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.earn-menu-card-icon svg {
  width:32px;
  height:32px;
  fill:currentColor;
}
/* Parent-hover lights the icon tile - same pattern as .oc:hover .oc-earn
   on offer cards in primitives. */
.earn-menu-card:hover .earn-menu-card-icon {
  background:rgba(89, 204, 128, 0.12);
  border-color:rgba(89, 204, 128, 0.25);
  box-shadow:0 0 24px rgba(107, 232, 152, 0.25);
  color:#6BE898;
}
.earn-menu-card-title {
  font-size:16px;
  font-weight:600;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:4px;
}
.earn-menu-card-title-arrow {
  display:inline-flex;
  align-items:center;
  transition:transform 0.2s ease;
}
.earn-menu-card-title-arrow svg {
  height:10px;
  width:auto;
  fill:currentColor;
  display:block;
}
.earn-menu-card:hover .earn-menu-card-title-arrow {
  transform:translateX(3px);
}
.earn-menu-card-desc {
  font-size:13px;
  font-weight:400;
  color:#9ca3af;
  text-align:center;
  line-height:1.5;
  max-width:220px;
}
button.earn-menu-card {
  font-family:inherit;
  font-size:inherit;
  text-align:center;
  width:100%;
}
/* -- RESPONSIVE -- */
@media (max-width:900px) {
  .earn-menu-cards {
    grid-template-columns:repeat(2, 275px);
  }
}
@media (max-width:600px) {
  .earn-top-bar {
    height:72px;
    padding:0 16px;
  }
  .earn-top-bar-logo .earn-logo-tile {
    width:56px;
    height:56px;
  }
  .earn-menu-toggle {
    width:44px;
    height:44px;
  }
  .earn-auth-buttons {
    gap:8px;
  }
  .points-display {
    padding:10px 14px;
    font-size:13px;
    gap:6px;
  }
  .earn-menu-overlay {
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  .earn-menu-container {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 88px 16px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    box-sizing: border-box;
  }
  /* Original 180px square-ish card shape. To keep that shape while
     also fitting longer descriptions (Help has the longest copy),
     we tighten every internal margin and run the description
     slightly smaller. The card stays a fixed 180px so every tile
     in the grid is identical - the SHAPE the design called for. */
  .earn-menu-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 180px);
    gap: 12px;
    width: 100%;
  }
  .earn-menu-card {
    border-radius: 16px;
    padding: 14px 8px 18px;
    /* extra bottom so descenders ("y" in "you") never touch edge */
    width: 100%;
    height: 180px;
    /* original fixed size - same shape as the design */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* No overflow:hidden - the description has its own line-clamp
       overflow:hidden, but if we clip the whole card, descenders
       on the last line ("y" in "you", "g", "p", etc.) get sliced
       off by the card edge. Letting the card show overflow keeps
       descenders rendering fully. line-clamp on the description
       still prevents text from spilling past the bottom. */
  }
  /* Aggressive trim: the longest description ("Have a question? Send
     us a message and we'll get back to you." - 60 chars) needs about
     3 lines at 9.5px in the 193px-wide cards, plus icon + title.
     Tightened every margin to give that 3rd line room to render. */
  .earn-menu-card-icon {
    width:40px;
    height:40px;
    border-radius:10px;
    margin-bottom:6px;
    flex-shrink:0;
  }
  .earn-menu-card-icon img {
    width:18px;
    height:18px;
  }
  .earn-menu-card-icon svg {
    width:18px;
    height:18px;
  }
  .earn-menu-card-title {
    font-size:12.5px;
    margin-bottom:3px;
    line-height:1.2;
  }
  .earn-menu-card-desc {
    font-size:9.5px;
    /* line-height 1.45 (was 1.3) - extra vertical room inside each
       line-box so the descender of "y" / "g" / "p" / "q" on the
       last line never gets sliced by the parent overflow.
       Combined with the card's padding-bottom:18px, descenders
       have ~21px of breathing space below them. */
    line-height:1.45;
    max-width:98%;
    text-align:center;
    /* Add 2px bottom padding so the LAST line's descender has its
       own vertical buffer before any overflow clipping kicks in. */
    padding-bottom:2px;
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}
@media (max-width:380px) {
  .earn-menu-container {
    padding: 88px 10px 40px;
  }
  .earn-menu-cards {
    grid-template-rows: repeat(3, 168px);
    gap:8px;
  }
  .earn-menu-card {
    height:168px;
    padding:10px 6px;
  }
  .earn-menu-card-icon {
    width:36px;
    height:36px;
    margin-bottom:5px;
  }
  .earn-menu-card-icon img {
    width:16px;
    height:16px;
  }
  .earn-menu-card-icon svg {
    width:16px;
    height:16px;
  }
  .earn-menu-card-title {
    font-size:11.5px;
    margin-bottom:2px;
    line-height:1.2;
  }
  .earn-menu-card-desc {
    font-size:9px;
    line-height:1.28;
    -webkit-line-clamp:5;
  }
}
/* -- Cursor Glow -- inline copy of global.css so the effect always loads
   even when earn_global_css WP option is stale or empty */
#earn-cursor-glow {
  position:fixed;
  width:400px;
  height:400px;
  border-radius:50%;
  pointer-events:none;
  z-index:1000000;
  background:radial-gradient(circle, rgba(89, 204, 128, 0.08) 0%, rgba(89, 204, 128, 0.03) 30%, transparent 65%);
  transform:translate(-50%, -50%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity 0.35s ease-out;
}
#earn-cursor-glow.active {
  opacity:1;
}
/* -- CONTACT POPUP -- */
#earn-contact-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, 0.8);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:1000000;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
#earn-contact-overlay.open {
  display:flex;
}
#earn-contact-popup {
  background:#111;
  border:1px solid #222;
  border-radius:20px;
  padding:2.5rem 2rem;
  width:100%;
  max-width:480px;
  position:relative;
  box-shadow:0 0 60px rgba(57, 214, 140, 0.1), 0 24px 48px rgba(0, 0, 0, 0.7);
  animation:popupIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popupIn {
  from {
    opacity:0;
    transform:scale(0.92) translateY(14px);
  }
  to {
    opacity:1;
    transform:scale(1) translateY(0);
  }
}
#earn-contact-close {
  position:absolute;
  top:1rem;
  right:1rem;
  background:#1e1e1e;
  border:none;
  color:#666;
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s, color 0.15s;
}
#earn-contact-close:hover {
  background:#2a2a2a;
  color:#fff;
}
.ep-eyebrow {
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:#39d68c;
  margin-bottom:0.35rem;
}
.ep-title {
  font-size:1.8rem;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin-bottom:0.35rem;
}
.ep-title span {
  color:#39d68c;
}
.ep-sub {
  font-size:0.85rem;
  color:#666;
  margin-bottom:1.5rem;
  line-height:1.5;
}
.ep-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.65rem;
}
.ep-group {
  margin-bottom:0.65rem;
}
.ep-group label {
  display:block;
  font-size:0.72rem;
  font-weight:600;
  color:#888;
  margin-bottom:0.3rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.ep-group input,
.ep-group textarea,
.ep-group select {
  width:100%;
  padding:0.65rem 0.85rem;
  background:#181818;
  border:1.5px solid #252525;
  border-radius:10px;
  color:#fff;
  font-size:0.88rem;
  font-family:inherit;
  outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
}
.ep-group input::placeholder,
.ep-group textarea::placeholder {
  color:#3a3a3a;
}
.ep-group input:focus,
.ep-group textarea:focus,
.ep-group select:focus {
  border-color:#39d68c;
  box-shadow:0 0 0 3px rgba(57, 214, 140, 0.1);
}
.ep-group select option {
  background:#181818;
}
.ep-group textarea {
  resize:vertical;
  min-height:85px;
}
.ep-conditional {
  display:none;
}
.ep-conditional.show {
  display:block;
}
#ep-submit {
  width:100%;
  padding:0.85rem;
  background:#39d68c;
  color:#000;
  font-weight:800;
  font-size:0.92rem;
  border:none;
  border-radius:50px;
  cursor:pointer;
  margin-top:0.4rem;
  transition:background 0.15s, transform 0.1s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
}
#ep-submit:hover {
  background:#4ae89d;
}
#ep-submit:active {
  transform:scale(0.98);
}
#ep-submit:disabled {
  opacity:0.45;
  cursor:not-allowed;
}
.ep-spinner {
  width:14px;
  height:14px;
  border:2px solid rgba(0, 0, 0, 0.25);
  border-top-color:#000;
  border-radius:50%;
  animation:ep-spin 0.65s linear infinite;
  display:none;
}
#ep-submit.loading .ep-spinner {
  display:block;
}
#ep-submit.loading .ep-btn-text {
  display:none;
}
@keyframes ep-spin {
  to {
    transform:rotate(360deg);
  }
}
.ep-alert {
  padding:0.7rem 0.9rem;
  border-radius:10px;
  font-size:0.82rem;
  font-weight:600;
  margin-top:0.65rem;
  display:none;
}
.ep-alert.show {
  display:block;
}
.ep-success {
  background:rgba(57, 214, 140, 0.1);
  color:#39d68c;
  border:1px solid rgba(57, 214, 140, 0.2);
}
.ep-error {
  background:rgba(239, 68, 68, 0.08);
  color:#f87171;
  border:1px solid rgba(239, 68, 68, 0.18);
}
@media (max-width:480px) {
  #earn-contact-popup {
    padding:1.75rem 1.25rem;
  }
  .ep-row {
    grid-template-columns:1fr;
  }
  .ep-title {
    font-size:1.45rem;
  }
}
#credential_picker_container {
  z-index: 9000000 !important;
}

/* Extracted from Header.html block 2. */
#eph-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000001;
  /* Solid scrim instead of backdrop-filter - the blur was forcing a
     full-viewport rasterization on every paint frame while the entrance
     animation was running, which delayed the input becoming responsive
     on lower-end devices. The darker rgba reads the same visually. */
  background: rgba(0, 0, 0, 0.86);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#eph-overlay.open {
  display: flex;
}
#eph-card {
  width: 100%;
  max-width: 420px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  padding: 36px 28px 32px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  color: #fff;
  text-align: center;
  /* Entrance shortened from 350ms to 180ms and easing simplified to ease-out so
     the modal settles into its rest position faster - the user can now
     focus + type before the animation ends rather than waiting through it. */
  animation: ephIn 0.18s ease-out;
}
@keyframes ephIn {
  from {
    opacity:0;
    transform:scale(0.94) translateY(10px);
  }
  to {
    opacity:1;
    transform:scale(1) translateY(0);
  }
}
/* Logo */
.eph-logo {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  overflow: hidden;
  position: relative;
}
.eph-logo svg.eph-logo-mark {
  width: 58%;
  height: auto;
  display: block;
}
/* Headings */
.eph-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
  color: #fff;
}
.eph-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin: 0 0 26px;
}
/* Input */
.eph-field {
  margin-bottom: 14px;
  text-align: left;
}
.eph-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.eph-phone-group {
  display: flex;
  align-items: center;
  height: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.eph-phone-group:focus-within {
  border-color: #59CC80;
}
.eph-phone-prefix {
  padding: 0 14px 0 18px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  border-right: 1.5px solid rgba(255, 255, 255, 0.12);
  height: 100%;
  display: flex;
  align-items: center;
  user-select: none;
}
.eph-field input[type="tel"] {
  flex: 1;
  height: 100%;
  padding: 0 18px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.eph-field input[type="tel"]::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
/* OTP boxes */
.eph-otp-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}
.eph-otp-box {
  width: 52px;
  height: 62px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.eph-otp-box.eph-active {
  border-color: #59CC80;
  box-shadow: 0 0 0 3px rgba(89, 204, 128, 0.18);
}
.eph-otp-real {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Buttons */
.eph-btn {
  width: 100%;
  height: 50px;
  background: #59CC80;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-top: 6px;
}
.eph-btn:hover:not(:disabled) {
  background: #6BE898;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(107, 232, 152, 0.4);
}
.eph-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.eph-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.eph-link-btn {
  display: block;
  margin-top: 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s;
}
.eph-link-btn:hover {
  color: rgba(255, 255, 255, 0.6);
}
/* Error */
.eph-error {
  display: none;
  color: #EF4444;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}
.signout-btn {
  margin-top: 20px;
  width: 100%;
}