/* Codex button system. Load last so it wins.
   Variants: primary/gold · secondary/outline · arc · ghost · danger. */

/* shared shape + motion */
.btn-primary, .btn-gold, .btn-enter, .btn-start, .btn-enroll, .btn-action,
.btn-seal-go, .btn-complete, .btn-send, .cta-btn, .cta:not(.secondary):not(.cta-soon),
.btn-secondary, .btn-outline, .btn-arc, .btn-codex {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .32s, filter .3s, border-color .3s, background .3s;
}

/* sheen sweep element (movement on hover) */
.btn-primary::after, .btn-gold::after, .btn-enter::after, .btn-start::after,
.btn-enroll::after, .btn-action::after, .btn-seal-go::after, .btn-complete::after,
.btn-send::after, .cta-btn::after, .cta:not(.secondary):not(.cta-soon)::after,
.btn-secondary::after, .btn-outline::after, .btn-arc::after, .btn-codex::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,250,225,.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.btn-primary:hover::after, .btn-gold:hover::after, .btn-enter:hover::after, .btn-start:hover::after,
.btn-enroll:hover::after, .btn-action:hover::after, .btn-seal-go:hover::after, .btn-complete:hover::after,
.btn-send:hover::after, .cta-btn:hover::after, .cta:not(.secondary):not(.cta-soon):hover::after,
.btn-arc:hover::after, .btn-codex:hover::after {
  opacity: 1;
  animation: btnSheen .85s ease;
}
@keyframes btnSheen { from { left: -70%; } to { left: 140%; } }

/* ── PRIMARY / GOLD · ceremonial (the ENTER THE MIRROR button) ── */
.btn-primary, .btn-gold, .btn-enter, .btn-start, .btn-enroll, .btn-action,
.btn-seal-go, .btn-complete, .btn-send, .cta-btn, .cta:not(.secondary):not(.cta-soon),
.btn-codex {
  color: #1c1408 !important;
  background: linear-gradient(135deg, #E8D29A 0%, #C8A76A 42%, #CDA455 66%, #9d762f 100%) !important;
  border: 1px solid rgba(246,210,141,.55) !important;
  padding: 14px 30px;
  box-shadow:
    0 2px 22px rgba(167,124,50,.30),
    inset 0 1px 0 rgba(255,242,195,.5),
    inset 0 -2px 5px rgba(86,56,10,.4) !important;
}
.btn-primary:hover, .btn-gold:hover, .btn-enter:hover, .btn-start:hover, .btn-enroll:hover,
.btn-action:hover, .btn-seal-go:hover, .btn-complete:hover, .btn-send:hover, .cta-btn:hover,
.cta:not(.secondary):not(.cta-soon):hover, .btn-codex:hover {
  transform: translateY(-2px);
  filter: brightness(1.07) saturate(1.05);
  box-shadow:
    0 8px 36px rgba(228,201,138,.5),
    0 0 0 1px rgba(246,210,141,.4),
    inset 0 1px 0 rgba(255,248,215,.6),
    inset 0 -2px 5px rgba(86,56,10,.4) !important;
}
.btn-primary:active, .btn-gold:active, .btn-enter:active, .btn-start:active, .btn-enroll:active,
.btn-action:active, .btn-seal-go:active, .btn-complete:active, .btn-send:active, .cta-btn:active,
.cta:not(.secondary):not(.cta-soon):active, .btn-codex:active {
  transform: translateY(0) scale(.99);
}

/* ── SECONDARY / OUTLINE · glowy gold hairline ── */
.btn-secondary, .btn-outline, .cta.secondary {
  color: #E4C98A !important;
  background: rgba(200,167,106,.05) !important;
  border: 1px solid rgba(200,167,106,.42) !important;
  padding: 13px 28px;
  box-shadow: 0 0 16px rgba(200,167,106,.12), inset 0 0 12px rgba(200,167,106,.04), inset 0 1px 0 rgba(255,240,200,.06);
}
.btn-secondary:hover, .btn-outline:hover, .cta.secondary:hover {
  transform: translateY(-2px);
  color: #F6D28D !important;
  background: rgba(200,167,106,.1) !important;
  border-color: rgba(200,167,106,.7) !important;
  box-shadow: 0 6px 26px rgba(200,167,106,.2), 0 0 18px rgba(200,167,106,.14);
}
.btn-secondary:active, .btn-outline:active, .cta.secondary:active { transform: translateY(0) scale(.99); }

/* ── ARC · stage-coloured (opt-in: add class="btn-arc", set --user-arc) ── */
.btn-arc {
  color: var(--user-arc, #A18BD8) !important;
  background: rgba(var(--user-arc-rgb,161,139,216), .08) !important;
  border: 1px solid rgba(var(--user-arc-rgb,161,139,216), .5) !important;
  padding: 13px 28px;
}
.btn-arc:hover {
  transform: translateY(-2px);
  background: rgba(var(--user-arc-rgb,161,139,216), .15) !important;
  box-shadow: 0 6px 26px rgba(var(--user-arc-rgb,161,139,216), .28);
}
.btn-arc:active { transform: translateY(0) scale(.99); }

/* ── GHOST · low-emphasis text ── */
.btn-ghost, .btn-send-ghost {
  color: rgba(200,167,106,.78) !important;
  background: none !important;
  border: none !important;
  letter-spacing: .16em;
  transition: color .25s, transform .2s;
  cursor: pointer;
}
.btn-ghost:hover, .btn-send-ghost:hover { color: #F6D28D !important; }

/* ── DANGER · refined wine (keeps the depth language) ── */
.btn-danger {
  color: #F3EEE6 !important;
  background: linear-gradient(135deg, #5B0F1A 0%, #3a0a12 100%) !important;
  border: 1px solid rgba(169,140,134,.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,200,190,.08), 0 2px 16px rgba(91,15,26,.3);
  transition: transform .2s, box-shadow .3s, filter .3s;
}
.btn-danger:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 5px 22px rgba(91,15,26,.45); }

/* small size modifier keeps the system, smaller */
.btn-sm { padding: 9px 18px !important; letter-spacing: .14em; font-size: .72rem; }

/* full-width modifier: keeps the ceremonial style + sheen but stretches
   (for stacked pricing / booking CTAs that need to fill their column) */
.btn-block { display: flex !important; width: 100% !important; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-gold, .btn-secondary, .btn-outline, .btn-arc, .cta, .btn-codex { transition: none; }
  .btn-primary:hover, .btn-gold:hover, .btn-secondary:hover, .btn-outline:hover, .cta:hover, .btn-arc:hover { transform: none; }
  .btn-primary:hover::after, .cta:hover::after { animation: none; }
}

/* ============================================================
   GLOBAL KEYBOARD FOCUS · loads last so it restores a visible
   focus ring even where page CSS set outline:none. :focus-visible
   means mouse/touch users never see it; only keyboard users do.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid #C8A76A !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
/* On the warm gold ceremonial buttons, a gold outline on gold is invisible:
   use an obsidian ring with a soft gold halo instead. */
.btn-primary:focus-visible, .btn-gold:focus-visible, .btn-enter:focus-visible,
.btn-start:focus-visible, .btn-enroll:focus-visible, .btn-action:focus-visible,
.btn-seal-go:focus-visible, .btn-complete:focus-visible, .btn-send:focus-visible,
.cta-btn:focus-visible, .btn-codex:focus-visible {
  outline: 2px solid #080808 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(200,167,106,.55) !important;
}

/* ── Global mobile safety · lock side-to-side scroll + kill the white overscroll gutter (loads last, applies everywhere) ── */
html{background:#080808;overscroll-behavior:none;overflow-x:clip;}
body{max-width:100%;overscroll-behavior-x:none;}

/* ── Tier-aware buy-up card (rendered by macros/tier_cta.html; never shows for VIP) ── */
.tier-cta{margin:18px auto;max-width:430px;text-align:center;padding:18px 22px;border-radius:14px;
  background:linear-gradient(160deg,rgba(139,121,201,.09),rgba(20,14,26,.55));
  border:1px solid rgba(200,167,106,.20);box-shadow:0 0 26px rgba(139,121,201,.10),inset 0 1px 0 rgba(200,167,106,.06);}
.tier-cta__eye{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(200,167,106,.85);margin:0 0 6px;}
.tier-cta__line{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.03rem;color:rgba(243,238,230,.72);line-height:1.5;margin:0 0 14px;}
.tier-cta--premium{border-color:rgba(200,167,106,.30);}

/* ── GLOWY OUTLINE · luminous gold hairline (more glow than .btn-secondary) ── */
.btn-glow{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Cinzel',serif;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border-radius:11px;cursor:pointer;padding:13px 28px;color:#F6D28D;background:rgba(200,167,106,.06);
  border:1px solid rgba(200,167,106,.55);
  box-shadow:0 0 18px rgba(200,167,106,.16),inset 0 0 14px rgba(200,167,106,.05),inset 0 1px 0 rgba(255,240,200,.08);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .32s,border-color .3s,background .3s;
}
.btn-glow:hover{transform:translateY(-2px);border-color:rgba(246,210,141,.85);background:rgba(200,167,106,.12);
  box-shadow:0 0 30px rgba(200,167,106,.34),0 6px 26px rgba(0,0,0,.35),inset 0 0 18px rgba(200,167,106,.08);}
.btn-glow:active{transform:translateY(0) scale(.99);}

/* ── AMETHYST · violet glowy outline (two-temperature variety) ── */
.btn-violet,.btn-amethyst{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Cinzel',serif;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border-radius:11px;cursor:pointer;padding:13px 28px;color:#C9BBF0;background:rgba(139,121,201,.08);
  border:1px solid rgba(139,121,201,.55);
  box-shadow:0 0 18px rgba(139,121,201,.18),inset 0 0 14px rgba(139,121,201,.06);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .32s,border-color .3s,background .3s;
}
.btn-violet:hover,.btn-amethyst:hover{transform:translateY(-2px);color:#E7DEFF;border-color:rgba(161,139,216,.9);
  background:rgba(139,121,201,.16);box-shadow:0 0 30px rgba(139,121,201,.4),0 6px 26px rgba(0,0,0,.35);}
.btn-violet:active,.btn-amethyst:active{transform:translateY(0) scale(.99);}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTON SYSTEM · arc-rainbow glow (loads last). Candlelit depth, not corporate.
   PRIMARY  = molten gold + rainbow underglow (everyday "yes").
   EMBER    = the lightest pepper · rare emotional accent (also upgrades oxblood).
   OBSIDIAN = secondary / "learn more · go deeper into your pattern".
   GEM      = amethyst depth, available. Arc colors from codex-violet.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* PRIMARY · auto-upgrades every existing gold button site-wide.
   Luminous molten gold, dark embossed letters (matches the reference),
   sitting in a soft halo of the arc colors (gold·lavender·teal). */
.gold-btn,.btn-primary,.btn-gold,.gold-button,.codex-gold-button,.btn-enter,
.btn-start,.btn-enroll,.btn-action,.btn-complete{
  background:
    radial-gradient(ellipse 80% 140% at 50% -20%, rgba(255,248,210,.9), transparent 55%),
    linear-gradient(178deg,#f4d88c,#e7c878 16%,#caa157 48%,#b0863f 74%,#8a6326)!important;
  background-color:#caa157!important;
  color:#2a1a04!important;
  border:none!important;
  text-shadow:0 1px 0 rgba(255,247,210,.55);
  box-shadow:
    inset 0 1.5px 0 rgba(255,250,225,.9),inset 0 -2px 3px rgba(90,55,10,.5),
    0 8px 22px rgba(180,130,40,.4),
    0 0 26px rgba(216,184,122,.5),0 0 48px rgba(161,139,216,.24),0 0 70px rgba(62,124,140,.15)!important;
}
.gold-btn:hover,.btn-primary:hover,.btn-gold:hover,.gold-button:hover,
.codex-gold-button:hover,.btn-enter:hover,.btn-start:hover,.btn-enroll:hover,
.btn-action:hover,.btn-complete:hover{
  filter:brightness(1.07) saturate(1.07);transform:translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,250,225,1),
    0 14px 34px rgba(190,140,45,.5),
    0 0 40px rgba(216,184,122,.8),0 0 72px rgba(161,139,216,.38),0 0 104px rgba(62,124,140,.26)!important;
}
.gold-btn:disabled,.gold-btn.is-disabled,.btn-primary:disabled,.btn-gold:disabled{
  filter:grayscale(.4);box-shadow:none!important;}

/* EMBER · the lightest pepper · rare emotional accent. Coal-glow pulse.
   Also auto-upgrades existing .btn-oxblood usages. */
@keyframes cxEmberGlow{
  0%,100%{box-shadow:inset 0 1.5px 0 rgba(255,210,180,.4),inset 0 -2px 4px rgba(40,5,10,.7),0 8px 24px rgba(120,30,35,.5),0 0 30px rgba(200,90,50,.42);}
  50%{box-shadow:inset 0 1.5px 0 rgba(255,210,180,.45),inset 0 -2px 4px rgba(40,5,10,.7),0 10px 30px rgba(140,40,40,.6),0 0 50px rgba(235,120,60,.66);}}
.btn-ember,.btn-oxblood{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  box-sizing:border-box;max-width:100%;
  font-family:'Cinzel',serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border-radius:13px;cursor:pointer;padding:15px 30px;color:#fff;border:none;
  text-shadow:0 0 12px rgba(255,170,120,.6);
  background:
    radial-gradient(ellipse 90% 160% at 50% 130%, rgba(255,200,110,.9), transparent 60%),
    linear-gradient(178deg,#9c2b2f,#7a1f2a 45%,#531320);
  background-color:#7a1f2a;
  animation:cxEmberGlow 4s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.16,1,.3,1),filter .35s;
}
.btn-ember:hover,.btn-oxblood:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.1);animation:none;
  box-shadow:inset 0 1.5px 0 rgba(255,210,180,.45),0 14px 38px rgba(140,40,40,.62),0 0 56px rgba(240,140,70,.8);}
.btn-ember:active,.btn-oxblood:active{transform:translateY(0) scale(.99);}

/* OBSIDIAN EDGE-GLOW · secondary · "learn more / go deeper into your pattern".
   Retires the corporate navy: any .btn-trust now renders as this. */
@keyframes cxEdgeGlow{
  0%,100%{box-shadow:inset 0 0 20px rgba(200,167,106,.16),0 0 4px rgba(200,167,106,.4),0 0 24px rgba(200,167,106,.32),0 8px 22px rgba(0,0,0,.55);}
  50%{box-shadow:inset 0 0 26px rgba(200,167,106,.28),0 0 6px rgba(200,167,106,.65),0 0 42px rgba(220,185,95,.55),0 8px 22px rgba(0,0,0,.55);}}
.btn-obsidian,.pcw-deep-link,.deep-link,.btn-trust{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;overflow:hidden;
  box-sizing:border-box;max-width:100%;
  font-family:'Cinzel',serif;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border-radius:12px;cursor:pointer;padding:13px 26px;color:#F4E3A8;
  background:linear-gradient(178deg,#1c1814,#0c0a08)!important;
  border:1.5px solid rgba(231,214,160,.62)!important;
  text-shadow:0 0 12px rgba(230,200,120,.55);
  animation:cxEdgeGlow 4.5s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .3s,filter .35s;
}
.btn-obsidian:hover,.pcw-deep-link:hover,.deep-link:hover,.btn-trust:hover{
  transform:translateY(-2px);border-color:rgba(244,227,168,.95)!important;color:#F4E3A8;animation:none;
  box-shadow:inset 0 0 28px rgba(200,167,106,.3),0 0 8px rgba(220,185,95,.75),0 0 48px rgba(230,190,100,.6),0 12px 30px rgba(0,0,0,.55);}

/* GEM · amethyst depth (available variant) */
.btn-gem{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  box-sizing:border-box;max-width:100%;
  font-family:'Cinzel',serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border-radius:13px;cursor:pointer;padding:15px 30px;color:#fff;border:none;text-shadow:0 0 12px rgba(190,160,255,.7);
  background:
    radial-gradient(ellipse 80% 140% at 50% -20%, rgba(220,200,255,.7), transparent 55%),
    linear-gradient(178deg,#a98be8,#8a6bd0 40%,#5e3fa0 78%,#3d2670);
  background-color:#7a57c2;
  box-shadow:inset 0 1.5px 0 rgba(235,225,255,.5),inset 0 -2px 4px rgba(30,12,60,.6),
    0 8px 24px rgba(90,55,170,.5),0 0 34px rgba(150,110,230,.5);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .35s,filter .35s;
}
.btn-gem:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.08);
  box-shadow:inset 0 1.5px 0 rgba(235,225,255,.6),0 14px 40px rgba(100,60,185,.62),0 0 60px rgba(180,140,255,.8);}
.btn-gem:active{transform:translateY(0) scale(.99);}

/* ── ROUTE EXISTING CTAs into the new variants (no template edits needed) ──
   Uses the app's own semantic classes. !important beats page-level styles. */

/* EMBER · the lightest pepper · erotic / Forbidden entry + the 18+ gate */
.btn-ec-begin,.gate .btn-enter{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  box-sizing:border-box!important;max-width:100%;border:none!important;border-radius:13px!important;
  padding:15px 30px!important;color:#fff!important;text-shadow:0 0 12px rgba(255,170,120,.6)!important;
  background:
    radial-gradient(ellipse 90% 160% at 50% 130%, rgba(255,200,110,.9), transparent 60%),
    linear-gradient(178deg,#9c2b2f,#7a1f2a 45%,#531320)!important;
  animation:cxEmberGlow 4s ease-in-out infinite!important;}
.btn-ec-begin:hover,.gate .btn-enter:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.1);animation:none!important;
  box-shadow:inset 0 1.5px 0 rgba(255,210,180,.45),0 14px 38px rgba(140,40,40,.62),0 0 56px rgba(240,140,70,.8)!important;}

/* OBSIDIAN · every "go deeper into your pattern" / secondary learn-more variant */
.pc-deeper,.wheel-deep-link,.rel-card-deeper,.btn-ec-map{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;overflow:hidden;
  box-sizing:border-box!important;max-width:100%;border-radius:12px!important;
  padding:12px 22px!important;color:#F4E3A8!important;text-decoration:none!important;
  font-family:'Cinzel',serif!important;font-weight:500!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  background:linear-gradient(178deg,#1c1814,#0c0a08)!important;
  border:1.5px solid rgba(231,214,160,.62)!important;text-shadow:0 0 12px rgba(230,200,120,.55)!important;
  animation:cxEdgeGlow 4.5s ease-in-out infinite!important;}
.pc-deeper:hover,.wheel-deep-link:hover,.rel-card-deeper:hover,.btn-ec-map:hover{
  transform:translateY(-2px);border-color:rgba(244,227,168,.95)!important;color:#F4E3A8!important;animation:none!important;
  box-shadow:inset 0 0 28px rgba(200,167,106,.3),0 0 8px rgba(220,185,95,.75),0 0 48px rgba(230,190,100,.6),0 12px 30px rgba(0,0,0,.55)!important;}

/* ── EMBER ACCENT · boundaries + the depth penalty wear the ember color ──
   "Some of that color" anywhere we name a limit: the depth penalty, and the
   rabbit-hole lock (a boundary, framed as care, not punishment). */
.penalty-block{
  border-color:rgba(200,90,50,.28)!important;
  border-left:3px solid rgba(235,120,60,.55)!important;
  background:linear-gradient(160deg,rgba(122,31,42,.12),rgba(20,8,10,.30))!important;
  box-shadow:inset 0 0 34px rgba(200,90,50,.07),0 0 26px rgba(150,40,40,.10)!important;}
.penalty-block::before{background:linear-gradient(90deg,transparent,rgba(235,120,60,.45),transparent)!important;}
.penalty-eyebrow{color:rgba(235,140,90,.80)!important;text-shadow:0 0 12px rgba(200,90,50,.30);}

/* Rabbit-hole lock = a boundary · ember accent on the bar + the unlock fill */
.panel-locked-bar{
  border-color:rgba(200,90,50,.55)!important;color:rgba(240,160,120,.92)!important;
  box-shadow:0 0 20px rgba(150,40,40,.18),inset 0 0 18px rgba(200,90,50,.05)!important;}
.panel-locked-bar:hover{border-color:rgba(235,120,60,.9)!important;color:rgba(255,190,150,.98)!important;
  box-shadow:0 0 30px rgba(200,90,50,.32)!important;}
.lock-fill{background:linear-gradient(90deg,rgba(122,31,42,.85),rgba(235,120,60,.95))!important;
  box-shadow:0 0 12px rgba(235,120,60,.5)!important;}

/* ── GLOBAL OVERSPILL GUARD (loads last · applies everywhere) ──────────────
   Root cause of buttons bleeding past card/screen edges: the site has no
   box-sizing reset, so any button with width:100% PLUS padding computed as
   width + padding (content-box) and overflowed its container. Forcing
   border-box makes padding live inside the width; max-width:100% is a hard
   backstop so a button can never exceed its parent no matter the template or
   inline padding. Width/auto behaviour itself is untouched. */
.btn,.btn-primary,.btn-gold,.btn-enter,.btn-start,.btn-enroll,.btn-action,
.btn-seal-go,.btn-complete,.btn-send,.btn-send-ghost,.btn-secondary,.btn-outline,
.btn-arc,.btn-codex,.btn-ghost,.btn-glow,.btn-violet,.btn-amethyst,.btn-danger,
.btn-success,.btn-post,.btn-save,.btn-icon,.btn-lg,.btn-sm,.btn-block,.btn-text,
.btn-ritual--gold,.btn-ritual--ghost,
.gold-btn,.gold-btn--auto,.gold-btn--ghost,.gold-button,.codex-gold-button,
.mirror-btn-ghost,.mirror-hero-btn,.mirror-topbar__btn,
.cta,.cta-btn,.cta-soon,.hero-cta,.hero-cta-secondary,.pricing-cta,.session-cta,
.pattern-spotlight__cta,.seal-popup__cta,.menu-drawer__featured-cta,
.menu-drawer__logout-btn,.login-btn,.share-btn,.time-slot-btn,.pcw-deep-link,
.relfield-cta,.deep-link,.pill,.notif-filter-pill,
button{
  box-sizing:border-box;
  max-width:100%;
}