/* Loina Quiz Engine – compiled (v1.0) */

/* =========================================================
   Loina Styles – treuetest.loina.de (FINAL)
   ========================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@600;700&family=Open+Sans:wght@400;600;700&display=swap');

/* ===== Reset & Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
img { max-width:100%; height:auto; display:block; }
html { -webkit-text-size-adjust: 100%; }
a { text-decoration:none; }

:root{
  --loina-bg:#111111;
  --loina-text:#E6E6E6;
  --loina-muted:#1A1A1A;
  --loina-gold:#D4AF37;
  --loina-rose:#C70039;
  --loina-border:#222;
  --paper-bg:#ffffff;
  --paper-text:#111111;
  --paper-muted:#fafafa;
  --paper-border:#e9e9e9;
  --shadow-dark:0 18px 50px rgba(0,0,0,.45);
  --shadow-paper:0 6px 30px rgba(0,0,0,.12);
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
}

/* Default (helle Seiten ohne .loina) */
body {
  font-family: 'Open Sans', Arial, sans-serif;
  background:#f6f9fb;
  color:#333;
  line-height:1.6;
}

/* ===== Loina Dark Theme NUR für Landing =====
   -> setze die Klasse .loina.landing auf der Startseite */
body.loina.landing{
  background:var(--loina-bg);
  color:var(--loina-text);
  font-family: Montserrat, 'Open Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark; /* nur Landing */
}

/* ===== Layout ===== */
.container{
  width:min(1180px,92vw);
  margin:0 auto;
  padding:24px;
}

.card{
  background: linear-gradient(180deg,#161616,#101010);
  border:1px solid var(--loina-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-dark);
  padding:24px;
  text-align:center;
}

/* ===== Typography ===== */
h1,h2,h3{
  font-family:"Playfair Display", Georgia, serif;
  color:var(--loina-gold);
  letter-spacing:.3px;
  margin:0 0 .6em;
}
h1{ font-size:clamp(28px,4.2vw,48px); line-height:1.1; }
h2{ font-size:clamp(22px,3vw,30px); }
h3{ font-size:clamp(18px,2.2vw,24px); }
p{ margin:.75em 0 1em; }

a{ color:var(--loina-rose); }
a:hover{ color:var(--loina-gold); }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; border:1px solid var(--loina-gold);
  background:linear-gradient(135deg,#1b1b1b,#121212);
  color:var(--loina-text); font-weight:600;
  padding:14px 20px; cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.btn:hover{ transform:translateY(-2px); border-color:var(--loina-rose); }
.btn:active{ transform:translateY(0); }
.btn[disabled], .pair-disabled{ opacity:.55; pointer-events:none; }
.btn.secondary{ border-color:#2b2b2b; background:#171717; box-shadow:none; }

/* Tastatur-Fokus */
.btn:focus-visible, a:focus-visible, .test-option:focus-visible, .answer:focus-visible{
  outline:2px solid var(--loina-rose);
  outline-offset:3px;
  border-radius:12px;
}

/* ===== Hero / Landing Highlights (Dark only) ===== */
body.loina.landing .hero{
  position:relative; border-radius:28px; padding:56px 28px; overflow:hidden;
  box-shadow:var(--shadow-dark);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(215,175,55,.25), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(199,0,57,.18), transparent 60%),
    linear-gradient(180deg, #151515, #0e0e0e);
}
body.loina.landing .hero p{ opacity:.95; }

/* ===== Test-Auswahl (Index) – Dark only ===== */
body.loina.landing .test-options{
  display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; justify-content:center;
}
body.loina.landing .test-option{
  flex:1 1 260px; min-width:260px;
  background: linear-gradient(180deg,#151515,#0f0f0f);
  border:1px solid var(--loina-border);
  border-radius:var(--radius-md);
  padding:18px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: var(--shadow-dark);
}
body.loina.landing .test-option:hover{ transform:translateY(-4px); border-color:var(--loina-gold); }
body.loina.landing .test-option h3{ margin-bottom:8px; }

/* ===== Ergebnis-Seite (Dark defaults – für Landing-Fälle) ===== */
.risk-wrap{
  margin:22px 0 10px; padding:18px; border-radius:16px;
  background:#0f0f0f; border:1px solid #232323;
}
.riskbar{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-top:10px; }
.riskbar .cell{
  height:16px; border-radius:6px; background:#252525; border:1px solid #2f2f2f;
}
.riskbar .cell.active{
  background:linear-gradient(180deg,#c63,#a22);
  border-color:#cc5544;
  box-shadow:0 0 0 1px rgba(198,99,51,.4) inset;
}
.riskbar .cell.fill{
  background:linear-gradient(180deg,#ffcc99,#ff9966);
  border-color:#ff9966;
}
.risk-note{ margin-top:10px; font-weight:600; }
.eg-card{
  margin:18px 0; padding:18px; border-radius:14px;
  background:#101010; border:1px solid #242424;
}
.eg-meta{ display:flex; gap:14px; flex-wrap:wrap; margin:10px 0; }
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid rgba(212,175,55,.35); border-radius:999px; background:rgba(212,175,55,.08);
  color:#f0e6c8; font-size:.9rem;
}

/* ===== Listen & Kleinkram ===== */
ul{
  text-align:left; margin:1.2em auto 1.6em; padding-left:1.2em;
  max-width:640px; font-size:1rem;
}
ul li{ margin:.45em 0; }

.privacy-note{ margin-top:1.6em; font-size:.9em; color:#bcbcbc; text-align:center; }

/* =========================================================
   PAPER MODE (helle Test-/Ergebnis-Seiten: Fragen & Auswertung)
   ========================================================= */

/* WICHTIG: Hell erzwingen – verhindert dunkle native Form-Controls */
.paper{
  background:var(--paper-bg) !important;
  color:var(--paper-text) !important;
  border:1px solid var(--paper-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-paper);
  padding:22px;
  color-scheme: light; /* <- fix für Radios/Checkboxen auf Desktop */
}

/* Headlines auf Paper dunkler */
.paper h1, .paper h2, .paper h3{
  color:#1A1A1A;
}

/* Buttons auf Paper (hellere Variante) */
.paper .btn{
  background:#fff; color:#1A1A1A; border-color:#1A1A1A;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.paper .btn:hover{ border-color:#000; transform:translateY(-2px); }
.paper .btn:focus-visible, .paper a:focus-visible{ outline-color:#111; }

/* Fragen-Blöcke in Papier-Optik */
.paper .competence-block{
  background:#ffffff !important; color:#111111 !important;
  border:1px solid var(--paper-border); border-radius:var(--radius-md);
  padding:18px; margin:18px 0;
}
.paper .question{
  background:var(--paper-muted) !important; color:#111111 !important;
  border:1px solid var(--paper-border); border-radius:12px;
  padding:14px 16px; margin:12px 0;
}
.paper .question > label,
.paper .answers label,
.paper .answers label span{ color:#111111 !important; }

/* Antworten-Grids */
.paper .answers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:8px;
}
.paper .answers label{
  background:#ffffff !important; border:1px solid #dddddd;
  border-radius:10px; padding:8px 10px; display:flex; gap:8px; align-items:flex-start;
  transition:box-shadow .15s ease,border-color .15s ease; cursor:pointer;
}
.paper .answers label:hover{ border-color:#111111; box-shadow:0 2px 10px rgba(0,0,0,.06); }

/* Form Controls auf Papier – nativ, aber hell und klar */
.paper input[type="radio"],
.paper input[type="checkbox"]{
  accent-color:#111111; width:18px; height:18px;
}
.paper input[type="radio"],
.paper input[type="checkbox"],
.paper input,
.paper select,
.paper textarea{
  color-scheme: light; /* doppelte Absicherung */
}

/* Auswertung im Papier-Look (weiße Karten) */
.evaluation-paper{ background:#ffffff !important; color:#111 !important; }
.evaluation-paper .risk-wrap,
.evaluation-paper .eg-card{
  background:#ffffff !important; color:#111111 !important; border:1px solid var(--paper-border);
}
.evaluation-paper .pill{
  background:#f5f5f5; color:#222; border:1px solid #dddddd;
}

/* Links auf Papier */
.paper a, .evaluation-paper a{ color:#0b57d0; }
.paper a:hover, .evaluation-paper a:hover{ color:#000; }

/* Hover in Dark (falls Antworten dort gezeigt würden) */
body.loina.landing .answers label:hover{ border-color:#444; }

/* =========================================================
   Footer
   ========================================================= */
footer{ opacity:.7; text-align:center; padding:24px 0; font-size:13px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .container{ padding:20px; }
  h1{ font-size:clamp(26px,6vw,36px); }
}
@media (max-width: 600px){
  .btn{ padding:12px 16px; }
  .card{ padding:18px; }
  body.loina.landing .test-options{ gap:14px; }
}

/* =========================================================
   Print (schwarz auf weiß, ohne Schatten)
   ========================================================= */
@media print{
  html, body{ background:#fff !important; color:#000 !important; }
  .container, .card, .paper, .evaluation-paper{
    box-shadow:none !important; background:#fff !important; color:#000 !important; border-color:#000 !important;
  }
  a{ color:#000 !important; text-decoration:underline; }
}
/* =========================================================
   HARD-FIX: Custom Radios/Checkboxes nur im PAPER-Bereich
   -> Unabhängig von System-Darkmode & Browser-UI
   ========================================================= */

.paper input[type="radio"],
.paper input[type="checkbox"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border-radius: 4px;                 /* Checkbox: eckig; Radio überschreiben wir gleich auf rund */
  border: 2px solid #1A1A1A !important;
  background: #fff !important;        /* immer weiß (unchecked) */
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  box-shadow: none !important;
  filter: none !important;
}

/* Radios rund machen */
.paper input[type="radio"]{
  border-radius: 50% !important;
}

/* Der „Punkt“ (Radio) bzw. das „Häkchen“ (Checkbox) als Pseudo-Element */
.paper input[type="radio"]::after,
.paper input[type="checkbox"]::after{
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease-in-out;
}

/* Radio: schwarzer Punkt */
.paper input[type="radio"]::after{
  border-radius: 50%;
  background: #000;
}

/* Checkbox: kleines gefülltes Quadrat (neutral & klar) */
.paper input[type="checkbox"]::after{
  border-radius: 2px;
  background: #000;
}

/* Checked-Zustand sichtbar machen */
.paper input[type="radio"]:checked::after,
.paper input[type="checkbox"]:checked::after{
  transform: scale(1);
}

/* Fokus sichtbar (Loina-Primär als Ring) */
.paper input[type="radio"]:focus,
.paper input[type="checkbox"]:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(199, 0, 57, .25) !important; /* #C70039 */
  border-color: #C70039 !important;
}

/* Disabled-Zustand */
.paper input[type="radio"]:disabled,
.paper input[type="checkbox"]:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Sicherheitsnetz gegen globale Dark-/Filter-Regeln */
.paper input[type="radio"],
.paper input[type="checkbox"],
.paper .answers label {
  background-color: #fff !important;
  color-scheme: light !important;
  filter: none !important;
}

/* Abstand zwischen Control und Text (falls nötig) */
.paper .answers label{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Optional: schöner Hover-Rand auf den Antwort-Karten */
.paper .answers label:hover{
  border-color: #111111;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}


/* =========================================================
   Loina Quiz Engine – Design Tokens (v1.0)
   Single-Master Referenzprojekt
   ========================================================= */
:root{
  --bg-0:#0b0b0d;
  --bg-1:#111113;
  --bg-2:#151518;
  --paper:#f7f7f7;
  --text:#e9e9ea;
  --muted:#b8b8bd;
  --ink:#1b1b1f;

  --gold:#D4AF37;
  --gold-2:#f2d680;
  --gold-d:#a67c00;

  --red:#C70039;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(0,0,0,.08);

  --r-xs:10px;
  --r-sm:14px;
  --r-md:18px;
  --r-lg:24px;

  --shadow-1: 0 10px 30px rgba(0,0,0,.45);
  --shadow-2: 0 18px 60px rgba(0,0,0,.55);

  --glow-gold: 0 0 0 1px rgba(212,175,55,.22), 0 10px 40px rgba(212,175,55,.10);
  --glow-cta:  0 0 0 1px rgba(212,175,55,.25), 0 18px 60px rgba(212,175,55,.16);

  --ease: cubic-bezier(.2,.9,.2,1);
  --t-1: 140ms;
  --t-2: 220ms;

  --maxw: 980px;
}



/* =========================================================
   Components – Buttons, Cards, Answers, Progress
   ========================================================= */

.wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 18px;}
.container{width:100%;max-width:var(--maxw);}

.hero{padding:28px 22px;}
.hero .lead{color:var(--muted);line-height:1.55;margin-top:10px}

.card{
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}

.paper .card{
  background:#fff;
  border:1px solid var(--line-2);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(212,175,55,.25);
  background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.06));
  box-shadow:var(--glow-gold);
  color:var(--text);
  font-weight:600;
}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}

.btn{
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:16px;
  font-weight:700;letter-spacing:.2px;
  transform:translateZ(0);
  transition:transform var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease), filter var(--t-2) var(--ease);
  user-select:none;
}

.btn:active{transform:translateY(1px) scale(.995)}
.btn:focus{outline:none}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(212,175,55,.25), var(--glow-cta);}

.btn.primary{
  color:#111;
  background:linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow:var(--glow-cta);
  position:relative;
  overflow:hidden;
}

.btn.primary::after{
  content:"";
  position:absolute;inset:-40%;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform:translateX(-55%) rotate(10deg);
  transition:transform 900ms var(--ease);
  pointer-events:none;
}

.btn.primary:hover::after{transform:translateX(55%) rotate(10deg)}
.btn.primary:hover{filter:saturate(1.05)}
.btn.secondary{
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}

.btn.secondary:hover{box-shadow:var(--shadow-1)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:saturate(.9);}

.answers{display:grid;gap:12px;margin-top:16px}
.answer{
  position:relative;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:14px 14px;
  transition:transform var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.paper .answer{background:#fff;border:1px solid rgba(0,0,0,.10)}
.answer:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.paper .answer:hover{box-shadow:0 10px 24px rgba(0,0,0,.10)}
.answer input{position:absolute;opacity:0;pointer-events:none}
.answer .radio{
  width:18px;height:18px;border-radius:999px;
  border:2px solid rgba(212,175,55,.40);
  display:inline-block;flex:0 0 auto;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
}
.answer label{display:flex;align-items:flex-start;gap:12px;color:var(--text);cursor:pointer;line-height:1.35}
.paper .answer label{color:#222}
.answer .qtxt{color:var(--muted);font-weight:600}
.paper .answer .qtxt{color:#333}
.answer input:checked + label{color:var(--text)}
.answer input:checked + label .radio{
  border-color:rgba(212,175,55,.95);
  box-shadow:inset 0 0 0 5px rgba(212,175,55,.95), 0 10px 30px rgba(212,175,55,.16);
}
.paper .answer input:checked + label .radio{box-shadow:inset 0 0 0 5px rgba(212,175,55,.95)}

.steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.step{height:6px;flex:1;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);overflow:hidden}
.step .n{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.paper .step{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.08)}
.paper .step .n{box-shadow:none}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.disclaimer{color:rgba(255,255,255,.70);font-size:12px;line-height:1.5;margin-top:18px}
.paper .disclaimer{color:rgba(0,0,0,.60)}



/* =========================================================
   Pages – Backgrounds, Typography, Layout polish
   ========================================================= */

body.loina{
  background:
    radial-gradient(1200px 700px at 18% 10%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(900px 600px at 82% 20%, rgba(199,0,57,.10), transparent 55%),
    radial-gradient(900px 700px at 55% 88%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color:var(--text);
}

body.loina::before{
  content:"";
  position:fixed;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.04) 0 1px, transparent 2px);
  background-size: 140px 140px, 180px 180px;
  opacity:.18;
  pointer-events:none;
}

h1,h2,h3{font-family:'Playfair Display', serif;letter-spacing:.2px}
body, p, li, input, button{font-family:'Montserrat', 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}

h1{font-size:42px;line-height:1.06}
@media (max-width:640px){h1{font-size:34px}}

.lead{font-size:16px}
.hero{display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:54px;height:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.brand .bname{font-weight:800;letter-spacing:.4px;text-transform:none}
.brand .bname span{color:var(--gold)}

.paper{background:linear-gradient(180deg,#f6f6f7,#f1f1f2);color:#111}
.paper body{color:#111}

.evaluation-paper{padding:22px}
.eg-card{border-radius:18px;border:1px solid rgba(0,0,0,.10);background:#fff;box-shadow:0 12px 28px rgba(0,0,0,.10);padding:18px;margin-top:16px}
.eg-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.eg-footer{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;align-items:center;justify-content:space-between}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .btn.primary::after{display:none}
}



/* ===== Quiz Progress (sticky top) ===== */
.quiz-progress{
  position: sticky;
  top: 0;
  z-index: 60;
  margin: -10px 0 14px 0;
  padding: 10px 0 0 0;
  background: linear-gradient(to bottom, rgba(245,245,245,.98), rgba(245,245,245,.80), rgba(245,245,245,0));
  backdrop-filter: blur(6px);
}
.quiz-progress__meta{
  font-size: .9rem;
  color: #333;
  margin: 6px 2px 0;
}
.quiz-progress__bar{
  height: 8px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,175,55,.65), rgba(212,175,55,.95));
  box-shadow: 0 0 18px rgba(212,175,55,.22);
}
.quiz-progress::before{
  content:"";
  display:block;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.quiz-progress__bar{
  margin-top:-8px;
}

/* ===== Answer Mark (checkbox look for radio) ===== */
.paper .answer{
  position: relative;
}
.paper .answer-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.paper .answer-mark{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.28);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
  flex: 0 0 18px;
  margin-top: 2px;
}
.paper .answer:hover .answer-mark{
  border-color: rgba(0,0,0,.42);
}
.paper .answer input[type="radio"]:checked + .answer-mark{
  background: rgba(212,175,55,.14);
  border-color: rgba(212,175,55,.85);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.paper .answer input[type="radio"]:checked + .answer-mark::after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border-radius: 3px;
  background: rgba(212,175,55,.95);
  margin: 3px auto 0 auto;
  box-shadow: 0 0 10px rgba(212,175,55,.35);
}

/* =========================================================
   CTA BOOST – Digistore Conversion Emphasis (v1.2)
   ========================================================= */

.btn.primary,
button[type="submit"].btn,
.paper .btn.primary{
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #d4af37 0%, #f5d676 48%, #c89b2f 100%);
  color: #111 !important;
  border: 1px solid rgba(166,124,0,.55);
  font-weight: 800;
  letter-spacing: .2px;
  padding: 15px 30px;
  border-radius: 16px;
  box-shadow:
    0 10px 24px rgba(212,175,55,.35),
    inset 0 0 10px rgba(255,255,255,.35);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn.primary:hover,
button[type="submit"].btn:hover,
.paper .btn.primary:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 16px 30px rgba(212,175,55,.45),
    inset 0 0 14px rgba(255,255,255,.45);
  filter: saturate(1.04);
}

.btn.primary:active,
button[type="submit"].btn:active{
  transform: translateY(0) scale(0.995);
}

.btn.primary::before,
button[type="submit"].btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset;
  z-index: 1;
}

.btn.primary::after,
button[type="submit"].btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  animation: ctaShimmer 7s infinite;
  pointer-events:none;
  z-index: 0;
}

@keyframes ctaShimmer {
  0% { left:-120%; }
  55% { left:120%; }
  100% { left:120%; }
}

.btn.primary:focus-visible,
button[type="submit"].btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(212,175,55,.35),
    0 16px 30px rgba(212,175,55,.45),
    inset 0 0 14px rgba(255,255,255,.45);
}