/* MiMic commerce layer. Themed per direction through the body class the site already sets. */
:root, body {
  --mc-bg: #000000; --mc-surface: #0d0e10; --mc-ink: #f4f5f6; --mc-acc: #eaff52; --mc-on-acc: #000000;
  --mc-line: rgba(244, 245, 246, .12); --mc-muted: rgba(244, 245, 246, .58);
  --mc-display: 'Geist', system-ui, sans-serif; --mc-body: 'Geist', system-ui, sans-serif; --mc-mono: 'Geist Mono', ui-monospace, monospace;
  --mc-wt: 600; --mc-track: -.045em; --mc-case: none; --mc-stretch: 100%; --mc-r: 14px; --mc-ease: cubic-bezier(.5, 0, .1, 1); --mc-dur: 700ms;
}
body.t-noct {
  --mc-bg: #0b0b0c; --mc-surface: #141416; --mc-ink: #efebe4; --mc-acc: #ff5b1f; --mc-on-acc: #0b0b0c;
  --mc-line: rgba(239, 235, 228, .12); --mc-muted: rgba(239, 235, 228, .58); --mc-track: -.055em; --mc-r: 10px;
}
body.t-ledg {
  --mc-bg: #f3f2ee; --mc-surface: #e9e7e0; --mc-ink: #111110; --mc-acc: #e5321b; --mc-on-acc: #ffffff;
  --mc-line: rgba(17, 17, 16, .9); --mc-muted: rgba(17, 17, 16, .62);
  --mc-display: 'Archivo', system-ui, sans-serif; --mc-mono: 'JetBrains Mono', ui-monospace, monospace;
  --mc-wt: 900; --mc-track: -.02em; --mc-case: uppercase; --mc-stretch: 72%; --mc-r: 0px; --mc-ease: cubic-bezier(.77, 0, .175, 1); --mc-dur: 522ms;
}
body.t-spec {
  --mc-bg: #16130f; --mc-surface: #1e1a15; --mc-ink: #efe8db; --mc-acc: #ff6a4d; --mc-on-acc: #16130f;
  --mc-line: rgba(239, 232, 219, .14); --mc-muted: rgba(239, 232, 219, .6);
  --mc-display: 'Fraunces', Georgia, serif; --mc-wt: 400; --mc-track: -.03em; --mc-r: 4px; --mc-ease: cubic-bezier(.165, .84, .44, 1); --mc-dur: 1000ms;
}
body.t-field {
  --mc-bg: #060f0c; --mc-surface: rgba(227, 242, 234, .05); --mc-ink: #e3f2ea; --mc-acc: #7dffc4; --mc-on-acc: #04110b;
  --mc-line: rgba(227, 242, 234, .12); --mc-muted: rgba(227, 242, 234, .6);
  --mc-display: 'Sora', system-ui, sans-serif; --mc-track: -.065em; --mc-r: 20px; --mc-ease: cubic-bezier(.34, 1.2, .64, 1); --mc-dur: 612ms;
}

/* ---------- section ---------- */
.mc-pricing { position: relative; padding: clamp(96px, 14vw, 180px) clamp(20px, 5vw, 64px); background: var(--mc-bg); color: var(--mc-ink); font-family: var(--mc-body); }
.mc-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.mc-kick, .mc-tag, .mc-price span, .mc-plan ul, .mc-costs th, .mc-small, .mc-sheet-top, .mc-fine { font-family: var(--mc-mono); }
.mc-kick { display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-acc); margin-bottom: 20px; }
.mc-head h2 { font-family: var(--mc-display); font-weight: var(--mc-wt); font-stretch: var(--mc-stretch); text-transform: var(--mc-case); letter-spacing: var(--mc-track); font-size: clamp(44px, 7vw, 104px); line-height: .92; margin: 0 0 24px; }
.mc-head h2 em { font-style: normal; color: var(--mc-acc); }
body.t-spec .mc-head h2 em { font-style: italic; }
.mc-head p { max-width: 520px; color: var(--mc-muted); font-size: 17px; line-height: 1.55; margin: 0; }

/* ---------- plans ---------- */
.mc-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mc-plan { display: flex; flex-direction: column; gap: 18px; padding: 26px 22px 22px; border: 1px solid var(--mc-line); border-radius: var(--mc-r); background: var(--mc-surface); transition: transform var(--mc-dur) var(--mc-ease), border-color .3s; }
body.t-field .mc-plan { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.t-ledg .mc-plan { background: transparent; border-width: 1px 0 0; padding: 22px 0 0; }
@media (hover: hover) { .mc-plan:hover { transform: translateY(-4px); border-color: var(--mc-acc); } }
.mc-plan.is-feature { border-color: var(--mc-acc); box-shadow: inset 0 0 0 1px var(--mc-acc); }
body.t-ledg .mc-plan.is-feature { box-shadow: none; border-top-width: 4px; border-top-color: var(--mc-acc); }
.mc-plan header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-plan h3 { margin: 0; font-family: var(--mc-display); font-weight: var(--mc-wt); font-stretch: var(--mc-stretch); text-transform: var(--mc-case); letter-spacing: -.01em; font-size: 20px; }
.mc-tag { font-size: 11px; padding: 4px 8px; border-radius: 99px; background: var(--mc-acc); color: var(--mc-on-acc); }
body.t-ledg .mc-tag { border-radius: 0; }
.mc-price b { display: block; font-family: var(--mc-display); font-weight: var(--mc-wt); font-stretch: var(--mc-stretch); letter-spacing: var(--mc-track); font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.mc-price span { display: block; margin-top: 10px; font-size: 12px; color: var(--mc-muted); }
.mc-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mc-muted); min-height: 3em; }
.mc-plan ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--mc-line); font-size: 12px; display: grid; gap: 9px; flex: 1; }
.mc-plan li { display: flex; gap: 10px; }
.mc-plan li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 5px; background: var(--mc-acc); border-radius: 50%; }
body.t-ledg .mc-plan li::before { border-radius: 0; }

/* ---------- buttons ---------- */
.mc-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; font: 500 14px/1 var(--mc-body); color: var(--mc-ink); background: transparent; border: 1px solid var(--mc-line); border-radius: calc(var(--mc-r) * .8); transition: background .25s, color .25s, border-color .25s, transform .4s var(--mc-ease); }
body.t-field .mc-btn { border-radius: 99px; }
.mc-btn:hover { border-color: var(--mc-acc); color: var(--mc-acc); }
.mc-btn.is-solid { background: var(--mc-acc); border-color: var(--mc-acc); color: var(--mc-on-acc); }
.mc-btn.is-solid:hover { color: var(--mc-on-acc); transform: translateY(-2px); }
.mc-btn:focus-visible, .mc-sheet input:focus-visible { outline: 2px solid var(--mc-acc); outline-offset: 3px; }
.mc-btn:disabled { opacity: .6; cursor: progress; }
.mc-secondary { opacity: .78; }
.mc-endtrial { margin-right: 12px; }

/* ---------- credit table ---------- */
.mc-costs { margin-top: clamp(56px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.mc-costs-head h3 { margin: 0 0 12px; font-family: var(--mc-display); font-weight: var(--mc-wt); font-stretch: var(--mc-stretch); text-transform: var(--mc-case); letter-spacing: -.02em; font-size: clamp(26px, 3vw, 36px); }
.mc-costs-head p { margin: 0; color: var(--mc-muted); font-size: 15px; line-height: 1.55; }
.mc-costs table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mc-costs thead th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--mc-muted); text-align: left; padding: 0 0 12px; }
.mc-costs tbody th, .mc-costs td { border-top: 1px solid var(--mc-line); padding: 15px 16px 15px 0; text-align: left; vertical-align: top; }
.mc-costs tbody th { font-family: var(--mc-body); font-weight: 600; white-space: nowrap; }
.mc-costs td { color: var(--mc-muted); }
.mc-costs td:last-child, .mc-costs thead th:last-child { text-align: right; padding-right: 0; font-family: var(--mc-mono); color: var(--mc-ink); }
.mc-costs tbody tr:first-child th, .mc-costs tbody tr:first-child td:last-child { color: var(--mc-acc); }

.mc-team { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border: 1px solid var(--mc-line); border-radius: var(--mc-r); }
body.t-ledg .mc-team { border-width: 1px 0; padding: 22px 0; }
.mc-team p { margin: 0; color: var(--mc-muted); font-size: 15px; }
.mc-team b { color: var(--mc-ink); font-weight: 600; }
.mc-small { margin: 24px 0 0; font-size: 12px; color: var(--mc-muted); }
.mc-small a, .mc-terms { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mc-terms { margin: 0 16px; }

/* ---------- reveal ---------- */
.mc-in { opacity: 0; transform: translateY(28px); transition: opacity var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.mc-in.is-in { opacity: 1; transform: none; }
.mc-plan.mc-in.is-in:hover { transform: translateY(-4px); }

/* ---------- checkout sheet ---------- */
.mc-sheet { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: end center; pointer-events: none; font-family: var(--mc-body); color: var(--mc-ink); }
.mc-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .4s; }
.mc-sheet-panel { position: relative; width: min(520px, 100%); max-height: 92vh; overflow: auto; background: var(--mc-bg); border: 1px solid var(--mc-line); border-bottom: 0; border-radius: var(--mc-r) var(--mc-r) 0 0; transform: translateY(104%); transition: transform .6s var(--mc-ease); }
@media (min-width: 700px) { .mc-sheet { place-items: center; } .mc-sheet-panel { border-bottom: 1px solid var(--mc-line); border-radius: var(--mc-r); transform: translateY(24px) scale(.98); opacity: 0; transition: transform .6s var(--mc-ease), opacity .3s; } }
.mc-sheet.is-open { pointer-events: auto; }
.mc-sheet.is-open .mc-sheet-bg { opacity: 1; }
.mc-sheet.is-open .mc-sheet-panel { transform: none; opacity: 1; }
.mc-sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--mc-line); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.mc-x { appearance: none; background: none; border: 0; color: var(--mc-ink); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.mc-form { display: grid; gap: 16px; padding: 24px 22px 26px; }
.mc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mc-plan-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--mc-line); }
.mc-plan-sum b { font-family: var(--mc-display); font-weight: var(--mc-wt); font-stretch: var(--mc-stretch); text-transform: var(--mc-case); font-size: 26px; letter-spacing: -.02em; }
.mc-plan-sum span { font-family: var(--mc-mono); font-size: 12px; color: var(--mc-acc); text-align: right; }
.mc-lede { margin: 0; color: var(--mc-muted); font-size: 14px; line-height: 1.5; }
.mc-fld { display: grid; gap: 8px; font-size: 13px; }
.mc-fld input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; font: 16px var(--mc-body); color: var(--mc-ink); background: var(--mc-surface); border: 1px solid var(--mc-line); border-radius: calc(var(--mc-r) * .6); }
.mc-fld em, .mc-check em { display: none; font-style: normal; font-size: 12px; color: var(--mc-acc); }
.mc-fld.is-bad input { border-color: var(--mc-acc); }
.mc-fld.is-bad em, .mc-check.is-bad em { display: block; }
.mc-check { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 14px; }
.mc-check input { width: 18px; height: 18px; accent-color: var(--mc-acc); }
.mc-check em { grid-column: 2; }
.mc-check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mc-err { margin: 0; padding: 12px 14px; font-size: 14px; border: 1px solid var(--mc-acc); border-radius: calc(var(--mc-r) * .6); }
.mc-go { width: 100%; min-height: 52px; }
.mc-spin { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mc-spin .7s linear infinite; }
.mc-go.is-busy .mc-spin { display: inline-block; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.mc-fine { margin: 0; font-size: 11px; color: var(--mc-muted); text-align: center; }

/* ---------- small screens ---------- */
@media (max-width: 1180px) { .mc-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mc-costs { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .mc-plans { grid-template-columns: 1fr; }
  .mc-note { min-height: 0; }
  .mc-costs td:nth-child(2), .mc-costs thead th:nth-child(2) { display: none; }
  .mc-endtrial { margin: 0 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .mc-in, .mc-plan, .mc-sheet-panel, .mc-sheet-bg { transition: none; } }