/* ============================================================
   TRIPSORB — Canonical brand system  (v0.2 · marketplace light)
   Single source of truth for design tokens. Shared by the setup
   wizard, admin, update dashboard and the public marketplace.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* brand */
  --ts-coral:#FF5B41;  --ts-coral-600:#E8472F;  --ts-coral-50:#FFF1ED;
  --ts-amber:#FFB155;
  --ts-lagoon:#0FB5A6; --ts-lagoon-600:#0A9488; --ts-lagoon-50:#E6F7F5;
  --ts-ink:#14213D;    --ts-ink-700:#1F2D4E;
  --ts-slate:#5B6473;
  --ts-sand:#FBF7F0;   --ts-line:#ECE7DD;       --ts-white:#FFFFFF;
  --ts-bg:#F7F4EE;
  --ts-surface:#FFFFFF; --ts-sk-1:#EFEAE1; --ts-sk-2:#F8F5EF;   /* card surface + skeleton shimmer */

  /* ---- TACTILE ELEVATION (light) ----------------------------------------
     One depth language for every box, field and button. The top inset is the
     "lit from above" highlight that creates the 3D read. In dark it drops from
     .90 to ~.07 (app/theme_engine.php) — same technique, no white glow.
     Never pair these with !important; they are tokens and remap per theme. */
  --elev-1: inset 0 1px 0 rgba(255,255,255,.90), 0 1px 2px rgba(20,33,61,.05), 0 5px 12px -5px rgba(20,33,61,.13);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(20,33,61,.07), 0 12px 26px -10px rgba(20,33,61,.20);
  --elev-3: inset 0 1px 0 rgba(255,255,255,1),   0 4px 8px rgba(20,33,61,.09), 0 22px 44px -14px rgba(20,33,61,.28);
  --press:  inset 0 2px 7px rgba(20,33,61,.15),  inset 0 1px 0 rgba(255,255,255,.40);
  --well:   inset 0 2px 5px rgba(20,33,61,.09),  inset 0 1px 0 rgba(255,255,255,.55);
  --ts-ok:#0FB5A6; --ts-warn:#E8972F; --ts-err:#E04848;

  --ts-grad:linear-gradient(135deg,var(--ts-coral),var(--ts-amber));
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-disp:'Fraunces',Georgia,serif;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sh-sm:0 2px 8px rgba(20,33,61,.06);
  --sh-md:0 6px 22px rgba(20,33,61,.08);
  --sh-lg:0 18px 50px rgba(20,33,61,.14);
  /* elevation scale (promoted from recurring app shadows; values unchanged) */
  --sh-card:0 1px 2px rgba(20,33,61,.05),0 3px 8px rgba(20,33,61,.04),0 24px 46px -30px rgba(20,33,61,.5);
  --sh-raised:0 14px 30px -12px rgba(20,33,61,.4);
  --sh-float:0 22px 44px -20px rgba(20,33,61,.4);
  --sh-pop:0 1px 2px rgba(20,33,61,.05), 0 20px 44px -24px rgba(20,33,61,.5);
  --sh-hi:0 6px 14px rgba(20,33,61,.07), 0 34px 66px -26px rgba(20,33,61,.62);
  --sh-modal:0 30px 80px -20px rgba(0,0,0,.5);
  --sh-cta:0 12px 24px -12px rgba(255,91,65,.7);

  /* motion */
  --dur-fast:.15s; --dur-base:.2s; --dur-slow:.3s;

  /* ---- page width scale (item 21) ----
     Chosen to match widths the app ALREADY uses, so adopting a token is never a visual change:
       --w-narrow  760px  forms & reading (line length stays comfortable)
       --w-page   1040px  standard content pages (= the studio wizard, .wiz)
       --w-wide   1180px  dense/grid pages (the most common wide value in the codebase, 10 uses)
     NOTE: 468 hardcoded max-widths still exist. These tokens are additive; pages are migrated
     deliberately, not by a blind find/replace. */
  --w-narrow:760px; --w-page:1040px; --w-wide:1180px;

  /* type scale (steps chosen to match the app's actual common sizes) */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:16px;
  --fs-xl:18px; --fs-2xl:20px; --fs-3xl:22px; --fs-4xl:24px; --fs-5xl:30px; --fs-6xl:38px;

  /* spacing scale (px-named; used for single-value gap/padding/margin) */
  --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-14:14px; --sp-16:16px;
  --sp-18:18px; --sp-20:20px; --sp-24:24px; --sp-28:28px; --sp-32:32px; --sp-40:40px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--ts-ink);
  background:var(--ts-bg);
  font-size:var(--fs-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ts-lagoon-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:700;letter-spacing:-.01em;color:var(--ts-ink)}
.disp{font-family:var(--font-disp);font-weight:500;letter-spacing:-.01em}
.muted{color:var(--ts-slate)}
.small{font-size:var(--fs-sm)}

/* ---- logo ---- */
.ts-logo{display:inline-flex;align-items:flex-start;font-weight:800;font-size:var(--fs-4xl);letter-spacing:-.03em;color:var(--ts-ink)}
.ts-logo .pin{width:11px;height:11px;border-radius:50% 50% 50% 0;transform:rotate(45deg);background:var(--ts-grad);display:inline-block;margin:5px 0 0 2px}
.ts-logo.light{color:#fff}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-8);justify-content:center;white-space:nowrap;
  font-family:var(--font-sans);font-weight:700;font-size:var(--fs-base);cursor:pointer;
  border:none;border-radius:var(--r-md);padding:11px 20px;transition:.15s;line-height:1}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ts-coral);color:#fff}
.btn-primary:hover{background:var(--ts-coral-600)}
.btn-teal:hover{background:var(--ts-lagoon-600)}
.btn-teal{background:var(--ts-lagoon);color:#fff}
.btn-ink{background:var(--ts-ink);color:#fff}
.btn-ghost{background:#fff;color:var(--ts-ink);border:1px solid var(--ts-line)}
.btn-ghost:hover{background:var(--ts-sand)}
.btn-lg{padding:14px 26px;font-size:var(--fs-md);border-radius:var(--r-md)}
.btn-sm{padding:7px 15px;font-size:var(--fs-sm);border-radius:var(--r-md)}
.btn-xs{padding:5px 11px;font-size:var(--fs-xs);border-radius:var(--r-sm)}
.btn-icon{padding:var(--sp-8);border-radius:var(--r-sm);gap:0}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---- cards & surfaces ---- */
.card{background:#fff;border:1px solid var(--ts-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.card.pad{padding:24px 26px}
.surface{background:var(--ts-sand);border:1px solid var(--ts-line);border-radius:var(--r-md);padding:16px 18px}

/* ---- forms ---- */
.field{margin-bottom:var(--sp-16)}
.field label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--sp-6);color:var(--ts-ink)}
.field .hint{font-size:var(--fs-xs);color:var(--ts-slate);margin-top:5px}
.input,select,textarea{
  width:100%;font-family:var(--font-sans);font-size:var(--fs-base);color:var(--ts-ink);
  background:#fff;border:1px solid var(--ts-line);border-radius:var(--r-md);
  padding:11px 13px;transition:.15s;outline:none}
.input:focus,select:focus,textarea:focus{border-color:var(--ts-coral);box-shadow:0 0 0 3px var(--ts-coral-50)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14)}
@media(max-width:560px){.row{grid-template-columns:1fr}}

/* ---- badges & alerts ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;
  padding:4px 11px;border-radius:var(--r-pill)}
.badge-ok{background:var(--ts-lagoon-50);color:var(--ts-lagoon-600)}
.badge-warn{background:#FCF1DF;color:#9A6510}
.badge-err{background:#FCEAEA;color:#B5302F}
.badge-coral{background:var(--ts-coral-50);color:var(--ts-coral-600)}
.alert{border-radius:var(--r-md);padding:13px 16px;font-size:var(--fs-sm);margin-bottom:var(--sp-16);border:1px solid}
.alert-ok{background:var(--ts-lagoon-50);border-color:#bfe9e3;color:var(--ts-lagoon-600)}
.alert-warn{background:#FCF6EA;border-color:#f1dfb8;color:#8A5C10}
.alert-err{background:#FCEDED;border-color:#f3cccc;color:#B5302F}

/* ---- shell used by wizard / admin auth screens ---- */
.shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 18px;
  background:radial-gradient(120% 80% at 100% 0%,#FFF4EE,transparent 55%),
             radial-gradient(90% 70% at 0% 100%,#E9F8F5,transparent 60%),var(--ts-bg)}
.shell-card{width:100%;max-width:620px}

/* ---- wizard stepper ---- */
.steps{display:flex;align-items:center;gap:0;margin-bottom:26px}
.steps .s{display:flex;align-items:center;gap:9px;flex:1}
.steps .dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:700;background:#fff;border:1px solid var(--ts-line);color:var(--ts-slate);flex-shrink:0}
.steps .s.done .dot{background:var(--ts-lagoon);border-color:var(--ts-lagoon);color:#fff}
.steps .s.active .dot{background:var(--ts-coral);border-color:var(--ts-coral);color:#fff}
.steps .lab{font-size:var(--fs-xs);font-weight:700;color:var(--ts-slate)}
.steps .s.active .lab,.steps .s.done .lab{color:var(--ts-ink)}
.steps .bar{height:2px;background:var(--ts-line);flex:1;margin:0 10px;border-radius:2px}
.steps .s.done .bar{background:var(--ts-lagoon)}
@media(max-width:560px){.steps .lab{display:none}}

/* ---- requirement check list ---- */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:center;justify-content:space-between;
  padding:11px 2px;border-bottom:1px solid var(--ts-line);font-size:var(--fs-base)}
.checklist li:last-child{border-bottom:none}
.checklist .ic{font-size:var(--fs-xl)}
.ic-ok{color:var(--ts-lagoon)}
.ic-err{color:var(--ts-err)}

/* ---- admin layout ---- */
.adm{display:flex;min-height:100vh}
.adm-side{width:236px;background:var(--ts-ink);color:#fff;flex-shrink:0;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.adm-side .ts-logo{color:#fff;margin:0 6px 24px;flex-shrink:0}
.adm-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.adm-nav::-webkit-scrollbar{width:6px}
.adm-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.adm-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
.adm-nav>:last-child{margin-bottom:var(--sp-8)}
.adm-nav a{display:flex;align-items:center;gap:11px;color:#c7cedd;padding:10px 12px;border-radius:var(--r-md);
  font-size:var(--fs-base);font-weight:600;margin-bottom:2px}
.adm-nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.adm-nav a.active{background:var(--ts-coral);color:#fff}
.adm-nav a i{font-size:var(--fs-xl)}
.adm-nav .grp{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:#6b7691;margin:18px 12px 8px;font-weight:700}
.adm-main{flex:1;min-width:0}
.adm-top{background:#fff;border-bottom:1px solid var(--ts-line);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.adm-body{padding:var(--sp-28)}
.adm-title{font-size:var(--fs-3xl);font-weight:800}
/* admin mobile drawer (v0.5.0) */
.adm-burger{display:none;background:none;border:none;font-size:23px;color:var(--ts-ink);cursor:pointer;margin-right:var(--sp-8);line-height:1}
.adm-overlay{display:none;position:fixed;inset:0;background:rgba(10,15,30,.42);z-index:18}
@media(max-width:820px){
  .adm-side{position:fixed;left:0;top:0;height:100vh;z-index:20;transform:translateX(-100%);transition:transform .22s ease;display:block;overflow-y:auto}
  .adm.nav-open .adm-side{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,.4)}
  .adm.nav-open .adm-overlay{display:block}
  .adm-burger{display:inline-flex;align-items:center}
}

/* ---- table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.tbl th{text-align:left;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ts-slate);
  padding:10px 12px;border-bottom:1px solid var(--ts-line);font-weight:700}
.tbl td{padding:var(--sp-12);border-bottom:1px solid var(--ts-line)}
.tbl tr:last-child td{border-bottom:none}

/* ---- dropzone ---- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px dashed var(--ts-line);border-radius:var(--r-lg);padding:34px 20px;text-align:center;
  background:var(--ts-sand);transition:.15s;cursor:pointer}
.drop.hover{border-color:var(--ts-coral);background:var(--ts-coral-50)}
.drop i{font-size:34px;color:var(--ts-coral)}

/* ---- accessibility (v0.192.9) ---- */
:focus-visible{outline:2px solid var(--ts-coral);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.btn:focus-visible{outline:2px solid var(--ts-ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- certifications directory + related certs (v0.196.5) ---- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-12)}
.cert-card{background:#fff;border:1px solid var(--ts-line);border-radius:var(--r-lg);padding:var(--sp-16);box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:6px}
.cert-card .cc-name{font-family:var(--font-disp);font-weight:600;font-size:var(--fs-lg);color:var(--ts-ink);line-height:1.25}
.cert-card .cc-meta{font-size:var(--fs-sm);color:var(--ts-slate)}
.cert-card .cc-issuer{font-weight:600;color:var(--ts-ink)}
.cert-lvl{display:inline-block;background:var(--ts-coral-50);color:var(--ts-coral-600);font-size:var(--fs-2xs);font-weight:700;border-radius:var(--r-pill);padding:2px 9px;text-transform:uppercase;letter-spacing:.03em}
.cert-card .cc-cat{margin-top:auto;font-size:var(--fs-sm)}
.cert-card .cc-cat a{color:var(--ts-coral-600);text-decoration:none;font-weight:600}
.cert-chip{background:#fff;border:1px solid var(--ts-line);border-radius:var(--r-md);padding:10px var(--sp-12);display:flex;flex-direction:column;gap:2px}
.cert-chip .cn{font-weight:600;font-size:var(--fs-sm);color:var(--ts-ink)}
.cert-chip .ci{font-size:var(--fs-xs);color:var(--ts-slate)}
.cert-fbar{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin-bottom:var(--sp-20)}
.cert-fbar input,.cert-fbar select{border:1.5px solid var(--ts-line);border-radius:var(--r-md);padding:10px var(--sp-12);font:inherit;font-size:var(--fs-base);background:#fff;color:var(--ts-ink)}
.cert-fbar input{flex:1;min-width:200px}
.cert-fbar input:focus,.cert-fbar select:focus{border-color:var(--ts-coral);outline:none;box-shadow:0 0 0 3px var(--ts-coral-50)}
.cert-group-h{font-family:var(--font-disp);font-weight:600;font-size:var(--fs-2xl);color:var(--ts-ink);margin:var(--sp-24) 0 var(--sp-12)}

/* Profile action buttons (v0.208.4) — production-ready, external (OPcache-proof), high specificity.
   Identical height/radius/icon/font/alignment for Follow, Message, Block, Share. Forms neutralized.
   All inline padding removed from the markup; everything lives here. Tactile depth + hover-lift kept. */
body .pf-actions{display:flex !important;flex-wrap:wrap;align-items:center !important;gap:12px !important;margin-top:24px}
body .pf-actions form{margin:0 !important;display:flex !important;align-items:center}
body .pf-actions .btn,
body .pf-actions button,
body .pf-actions a.btn,
body .pf-actions .ts-share-btn{
  height:44px !important;min-height:44px !important;max-height:44px !important;box-sizing:border-box !important;
  padding:0 22px !important;-webkit-appearance:none !important;appearance:none !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:8px !important;border-radius:14px !important;font-weight:600 !important;font-size:14px !important;
  line-height:1 !important;white-space:nowrap !important;margin:0 !important;flex:0 0 auto !important;
  box-shadow:0 1px 2px rgba(20,33,61,.06),0 6px 16px -8px rgba(20,33,61,.30) !important;
  transition:transform .15s ease,box-shadow .2s ease !important}
body .pf-actions .btn i,
body .pf-actions button i,
body .pf-actions a i,
body .pf-actions .ts-share-btn i{display:inline-flex !important;align-items:center !important;justify-content:center !important;font-size:16px !important;line-height:1 !important}
body .pf-actions .btn:hover,
body .pf-actions button:hover,
body .pf-actions a.btn:hover,
body .pf-actions .ts-share-btn:hover{transform:translateY(-2px) !important;box-shadow:0 3px 6px rgba(20,33,61,.08),0 14px 28px -10px rgba(20,33,61,.42) !important}
body .pf-actions .btn:active,
body .pf-actions button:active{transform:translateY(0) !important}
@media(max-width:680px){body .pf-actions{justify-content:center !important}}

/* ============================================================
   SHARED COMPONENTS — v0.219.42
   Skeletons + rich empty states. Added to brand.css because it is
   already linked by 65 pages (incl. _auth_head.php), so these are
   available everywhere with no new request and no per-page CSS.
   All values are tokens so dark mode remaps automatically.
   ============================================================ */

/* ---- Skeleton loading ---- */
@keyframes ts-sk { 0% { background-position: -380px 0 } 100% { background-position: 380px 0 } }
.sk{
  background: var(--ts-sk-1, #EFEAE1);
  background-image: linear-gradient(90deg, var(--ts-sk-1,#EFEAE1) 0px, var(--ts-sk-2,#F8F5EF) 190px, var(--ts-sk-1,#EFEAE1) 380px);
  background-size: 760px 100%;
  animation: ts-sk 1.25s linear infinite;
  border-radius: var(--r-sm);
}
.sk-line{ height:10px; border-radius:5px }
.sk-line.sm{ height:8px }
.sk-circle{ border-radius:50%; flex:none }
.sk-card{ background:var(--ts-surface,#fff); border:1px solid var(--ts-line); border-radius:var(--r-lg); overflow:hidden }
.sk-card .sk-img{ height:104px; border-radius:0 }
.sk-card .sk-body{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:8px }
.sk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px }
@media (prefers-reduced-motion: reduce){ .sk{ animation:none } }

/* ---- Rich empty states ---- */
.empty{
  text-align:center; padding:30px 22px;
  background:var(--ts-surface,#fff);
  border:1.5px dashed var(--ts-line);
  border-radius:var(--r-lg);
}
.empty-ic{
  width:52px; height:52px; margin:0 auto 12px; border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(255,91,65,.14), rgba(255,177,85,.14));
  display:flex; align-items:center; justify-content:center;
  color:var(--ts-coral); font-size:25px;
}
.empty h5{
  font-family:var(--font-disp); font-weight:600; font-size:var(--fs-xl);
  margin:0 0 5px; color:var(--ts-ink);
}
.empty p{
  margin:0 0 14px; font-size:var(--fs-sm); color:var(--ts-slate);
  max-width:340px; margin-inline:auto; line-height:1.5;
}
.empty .btn{ margin-inline:auto }

/* ---- Locked passport stamps (turns a blank block into a goal) ---- */
.stamps{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:4px }
.stamp{
  aspect-ratio:1; border-radius:50%; border:1.5px dashed var(--ts-line);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--ts-slate); opacity:.42; position:relative;
}
.stamp.on{
  border:2px solid var(--ts-lagoon); border-style:solid; opacity:1;
  color:var(--ts-lagoon); background:rgba(15,181,166,.10);
}
.stamp small{
  position:absolute; bottom:-16px; font-size:9px; font-weight:700;
  color:var(--ts-slate); opacity:.8; white-space:nowrap;
}
@media(max-width:560px){ .stamps{ grid-template-columns:repeat(4,1fr) } }

/* ============================================================
   TACTILE DEPTH — every box, field and button.
   Uses --elev-* tokens so dark mode remaps automatically.
   Deliberately NO !important: tactile.css's 104 !important rules
   are what caused the white-card/white-glow dark-mode bugs, and
   what made these styles unoverridable per page. Tokens instead.
   ============================================================ */
.card{ box-shadow: var(--elev-1); transition: box-shadow .2s ease, transform .16s ease }
.card:hover{ box-shadow: var(--elev-2) }
.empty{ box-shadow: var(--well) }
.sk-card{ box-shadow: var(--elev-1) }

/* fields read as carved in, not stuck on */
.input, input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=tel], input[type=url], select, textarea{
  box-shadow: var(--well);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.input:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus, input[type=search]:focus, input[type=date]:focus, input[type=tel]:focus,
input[type=url]:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--ts-lagoon);
  box-shadow: var(--well), 0 0 0 3px rgba(15,181,166,.22);
}

/* buttons raise, then press IN on :active — the interactive 3D read */
.btn{ transition: box-shadow .18s ease, transform .12s ease }
.btn:active{ transform: translateY(1px) }
.btn-ghost{ box-shadow: var(--elev-1) }
.btn-ghost:hover{ box-shadow: var(--elev-2) }
.btn-ghost:active{ box-shadow: var(--press) }
.btn-primary{
  background: linear-gradient(180deg, #FF6A52, #F5482C);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 4px rgba(229,63,38,.30), 0 12px 24px -10px rgba(229,63,38,.62);
}
.btn-primary:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 3px 6px rgba(229,63,38,.34), 0 18px 34px -12px rgba(229,63,38,.74) }
.btn-primary:active{ box-shadow: var(--press) }

@media (prefers-reduced-motion: reduce){
  .card, .btn{ transition: none }
  .btn:active{ transform: none }
}