/* My Exchange: polished chrome on black, chamfered corners echoing the angular ME mark. */
:root[data-brand="my-exchange"] {
  --bg: #050505;
  --bg-alt: #080808;
  --card: #0f0f10;
  --fg: #f2f2f3;
  --muted: #8e8e94;
  --line: #262628;
  --soft: #18181a;
  --accent: #d8d8de;
  --accent-hover: #ffffff;
  --accent-ink: #050505;
  --danger: #ff5f57;
  --success: #e9e9ee;
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9d9de 38%, #8f8f96 52%, #e6e6ea 70%, #b9b9bf 100%);
  --chrome-btn: linear-gradient(180deg, #fbfbfc 0%, #d4d4d9 48%, #a9a9b0 52%, #e9e9ed 100%);
  --edge: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .35));
  --cut: 18px;
  --shadow: none;
  --shadow-lg: 0 40px 120px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chrome-dim { color: var(--muted); }
.me-label { font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

/* Chamfered surfaces with a thin metallic edge. */
.card, .btn, .field-box, .sheet, .summary {
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.card {
  border: 1px solid transparent;
  background: linear-gradient(180deg, #131315, #0b0b0c) padding-box, var(--edge) border-box;
}
.btn { --cut: 12px; }
.field-box { --cut: 12px; background: var(--soft); }
.btn-primary { background: var(--chrome-btn); color: var(--accent-ink); font-weight: 650; letter-spacing: .01em; }
.btn-primary:hover { background: var(--chrome-btn); filter: brightness(1.08); }
.btn-link { clip-path: none; color: var(--fg); }

/* Nav */
.nav { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.brand img { height: 22px; width: auto; }
.brand span { font-weight: 600; letter-spacing: .02em; font-size: 16px; }

/* Hero */
.me-hero { text-align: center; padding-top: clamp(48px, 9vw, 104px); padding-bottom: 32px; }
.me-logo { position: relative; width: min(300px, 62vw); margin: 0 auto 36px; }
.me-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 60px rgba(255, 255, 255, .10)); }
/* A light sweep that only paints over the logo itself. */
.me-shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/brands/my-exchange/mark.png) center / 100% 100% no-repeat; mask: url(/brands/my-exchange/mark.png) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat;
  mix-blend-mode: overlay; animation: me-sweep 5.5s 1s var(--ease) infinite;
}
@keyframes me-sweep { 0% { background-position: -200% 0; } 35%, 100% { background-position: 200% 0; } }
.me-hero h1 { font-size: clamp(40px, 7.4vw, 84px); letter-spacing: -.045em; }
.me-hero .lead { max-width: 600px; }

/* Calculator: horizontal on desktop */
.calc-section .calc { max-width: 1000px; padding: clamp(20px, 3vw, 32px); }
.me-calc-row { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 859px) { .me-calc-row .field-box:last-child .field-hint { display: none; } }
@media (min-width: 860px) {
  .me-calc-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .me-calc-row .swap { margin: 0; transform: rotate(90deg); }
  .me-calc-row .swap.spin { transform: rotate(270deg); }
  .me-calc-foot { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: center; margin-top: 18px; }
  .me-calc-foot .calc-meta { margin: 0 4px; }
}
.swap { border-radius: 0; border: 0; width: 44px; height: 44px; background: var(--chrome-btn); color: #111; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.swap:hover { background: var(--chrome-btn); filter: brightness(1.1); }
.select-pill select { border-radius: 0; background: #232326; box-shadow: none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.calc-note { text-align: left; margin-left: 4px; }
.calc-error { margin-top: 12px; }
.me-calc-foot .btn-block { margin-top: 12px; }
@media (min-width: 860px) { .me-calc-foot .btn-block { margin-top: 0; } }

/* Bento */
.me-bento { display: grid; gap: 16px; }
@media (min-width: 820px) { .me-bento { grid-template-columns: 1.15fr 1fr; } .me-tile-big { grid-row: span 3; } }
.me-tile { padding: 30px 28px; transition: transform .4s var(--spring); }
.me-tile:hover { transform: translateY(-4px); }
.me-tile h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 8px; }
.me-tile p { color: var(--muted); font-size: 16px; }
.me-tile-big { display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .10), transparent 60%), linear-gradient(180deg, #151517, #0b0b0c) padding-box, var(--edge) border-box; }
.me-big-num { font-size: clamp(88px, 13vw, 150px); font-weight: 700; letter-spacing: -.06em; line-height: .9; margin-bottom: 18px; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Steps */
.me-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.me-steps li { padding: 28px 26px 30px; }
.me-step-num { display: block; font-size: 15px; font-weight: 700; letter-spacing: .2em; margin-bottom: 40px; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.me-steps h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 6px; }
.me-steps p { color: var(--muted); font-size: 16px; }

.faq { padding: 6px 28px; }
a.contact .contact-value { color: var(--fg); }
.contact:hover { transform: translateY(-3px); }
.footer { background: #030303; }

/* Order sheet */
.sheet { --cut: 22px; border: 1px solid transparent; background: linear-gradient(180deg, #141416, #0c0c0d) padding-box, var(--edge) border-box; }
@media (max-width: 600px) { .sheet { clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut)); } }
.summary { --cut: 10px; background: var(--soft); }
.form-field input:not([type="radio"]), .form-field textarea { border-radius: 0; background: #0a0a0b; border-color: #2a2a2d; }
.segmented, .segmented span { border-radius: 0; }
.segmented input:checked + span { background: #2b2b2f; }
.sheet-head .icon-btn { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 36px; height: 36px; }
.check input { accent-color: #d8d8de; }
.success-check { stroke: #e9e9ee; }