/* Skin "miami" (setting skin = miami): the 80s neon look of Miami Prediction Markets: hot pink and electric cyan on a
   near-black purple, a striped sun, palm and skyline silhouettes and a perspective grid. Loaded after site.css on
   every page of a site that names this skin. Tokens, fonts and site-wide pieces first; the home page
   (templates/partials/home/showcase-miami.php, classes .mi-*) below. Values were measured on the original site. */

/* Fonts of the original design, self-hosted (SIL Open Font License 1.1, licence texts in public/assets/fonts/):
   Audiowide (headings, labels), Monoton (the neon lettering), Inter (text). Latin ranges only. */
@font-face { font-family: "Audiowide"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/audiowide-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Monoton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/monoton-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tokens */
body.skin-miami {
  --wrap: 1280px; --gutter: 20px; --radius: 8px; --mi-r-btn: 8px; --mi-r-card: 16px; --mi-sec: 48px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Audiowide", "Inter", system-ui, sans-serif;
  --serif: var(--display); --serif-text: var(--sans); --serif-display: var(--display);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --mi-bg: #070212; --mi-card: #10051e; --mi-pink: #ff29b0; --mi-magenta: #ff1aff; --mi-cyan: #00e6ff; --mi-purple: #9933ff; --mi-blue: #3377ff;
  --mi-orange: #ff8229; --mi-yellow: #ffdd33; --mi-soft: #d9cbe6; --mi-line: rgba(71, 11, 101, .6); --mi-line-solid: #2c0a40;
  /* One glow scale, used sparingly so text stays crisp. Text: --mi-glow-* (the accent word of a section heading only).
     Boxes: ring (secondary controls and cards, on hover) < lift (primary buttons at rest) < flare (primary buttons on hover). */
  --pk: 255 41 176; --cy: 0 230 255; --or: 255 130 41;
  --mi-glow-pink: 0 0 6px rgb(var(--pk) / .55), 0 0 22px rgb(var(--pk) / .4);
  --mi-glow-cyan: 0 0 6px rgb(var(--cy) / .5), 0 0 22px rgb(var(--cy) / .35);
  --mi-glow-soft: 0 0 10px rgb(var(--cy) / .55);
  --mi-ring-pink: 0 0 12px rgb(var(--pk) / .4);
  --mi-ring-cyan: 0 0 12px rgb(var(--cy) / .4);
  --mi-lift-pink: 0 0 16px rgb(var(--pk) / .45), 0 6px 24px rgb(var(--pk) / .2);
  --mi-lift-cyan: 0 0 20px rgb(var(--cy) / .7), 0 0 40px rgb(var(--cy) / .35);
  --mi-flare-pink: 0 0 24px rgb(var(--pk) / .8), 0 0 56px rgb(var(--pk) / .35);
  --mi-flare-cyan: 0 0 24px rgb(var(--cy) / .8), 0 0 56px rgb(var(--cy) / .35);
  --mi-ease: .25s ease;
  font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.skin-miami.theme-dark {
  --paper: #070212; --paper-2: #10051e; --sc-card: #10051e; --ink: #fff; --ink-2: rgba(255, 255, 255, .9); --muted: #d9cbe6; --line: #2c0a40;
  --accent: #ff29b0; --accent-text: #ff29b0; --on-accent: #070212; --focus: #00e6ff;
  background: #070212;
}
body.skin-miami :focus-visible { outline: 2px solid var(--mi-cyan); outline-offset: 2px; border-radius: 6px; }
body.skin-miami ::selection { background: var(--mi-pink); color: #070212; }

/* Type: Audiowide for headings and labels, Inter for text */
body.skin-miami h1, body.skin-miami h2, body.skin-miami h3, body.skin-miami .article-title, body.skin-miami .card-title, body.skin-miami .section-title, body.skin-miami .brand-name { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
body.skin-miami h4 { font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
body.skin-miami .prose, body.skin-miami .standfirst, body.skin-miami .card-excerpt { font-family: var(--sans); }
body.skin-miami .article-title { font-size: clamp(1.5rem, 4.2vw, 2.75rem); line-height: 1.15; letter-spacing: .01em; color: #fff; }
body.skin-miami .prose { font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .9); }
body.skin-miami .prose h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.2; color: #fff; }
body.skin-miami .prose h3 { font-size: 1.1875rem; line-height: 1.35; color: #fff; }
body.skin-miami .prose a:not(.button) { color: var(--mi-cyan); text-decoration-color: rgba(0, 230, 255, .45); }
body.skin-miami .prose a:not(.button):hover { color: var(--mi-pink); text-decoration-color: currentColor; }
body.skin-miami .prose strong { color: #fff; }
body.skin-miami .standfirst { color: var(--mi-soft); }
body.skin-miami .kicker, body.skin-miami .prose .label { font-family: var(--sans); font-weight: 600; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mi-cyan); }
body.skin-miami .kicker { letter-spacing: .12em; font-size: .75rem; font-weight: 600; color: var(--mi-pink); }
body.skin-miami .meta, body.skin-miami .breadcrumbs, body.skin-miami .byline { color: var(--mi-soft); }
body.skin-miami .breadcrumbs a:hover, body.skin-miami .byline a:hover { color: var(--mi-cyan); }

/* Boxes, tables and code in text */
body.skin-miami .prose .box, body.skin-miami .side-box, body.skin-miami .prose .toc, body.skin-miami .prose .takeaways, body.skin-miami .prose .verdict, body.skin-miami .prose .pros, body.skin-miami .prose .cons, body.skin-miami .prose .note, body.skin-miami .prose .stat, body.skin-miami .prose .market-box {
  border: 1px solid var(--mi-line); border-radius: 16px; background: rgba(16, 5, 30, .6); }
body.skin-miami .prose .code-box { border-color: rgba(0, 230, 255, .35); box-shadow: 0 0 18px rgba(0, 230, 255, .12); }
body.skin-miami .prose blockquote { border-inline-start-color: var(--mi-pink); color: var(--mi-soft); }
body.skin-miami .prose table { border-color: var(--mi-line-solid); }
body.skin-miami .prose th { background: #10051e; color: var(--mi-cyan); font-weight: 600; }
body.skin-miami .prose th, body.skin-miami .prose td { border-color: var(--mi-line-solid); }
body.skin-miami .prose code.promo-code, body.skin-miami .code-chip { border: 1px dashed rgba(0, 230, 255, .6); border-radius: 8px; background: rgba(0, 230, 255, .05); color: var(--mi-cyan); font-family: var(--mono); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
body.skin-miami .copy-code { border-color: rgba(0, 230, 255, .6); color: var(--mi-cyan); border-radius: 8px; font-family: var(--sans); }
body.skin-miami .copy-code.is-copied { background: var(--mi-cyan); color: #070212; }
body.skin-miami .faq details { border-color: rgba(71, 11, 101, .6); }
body.skin-miami .faq summary:hover { color: var(--mi-pink); }
body.skin-miami .faq-answer { color: var(--mi-soft); }

/* Articles and pages: the neon line of the home page above each main heading, calmer tables, framed pictures */
body.skin-miami .prose:not(.sc-prose) > h2 { margin-top: 2.4em; padding-top: 1.2em; background: linear-gradient(90deg, rgb(var(--pk) / .6), rgb(var(--cy) / .5) 60%, transparent) 0 0 / 100% 1px no-repeat; }
body.skin-miami .prose:not(.sc-prose) > h2:first-child { margin-top: 0; padding-top: 0; background: none; }
body.skin-miami .article-title { text-wrap: balance; text-shadow: 0 0 28px rgb(var(--pk) / .35); }
body.skin-miami .prose .disclosure, body.skin-miami .disclosure { border-inline-start: 2px solid var(--mi-pink); border-radius: 0 10px 10px 0; background: rgba(16, 5, 30, .6); color: var(--mi-soft); }
body.skin-miami .prose tbody tr { transition: background-color .15s ease; }
body.skin-miami .prose tbody tr:hover { background: rgb(var(--cy) / .05); }
body.skin-miami .prose td a:not(.button) { white-space: nowrap; }
body.skin-miami .prose > p > img, body.skin-miami .prose > figure img, body.skin-miami .article-figure img { border: 1px solid var(--mi-line); border-radius: 16px; }
body.skin-miami .prose .box > .label:first-child, body.skin-miami .prose .box > p.label { text-shadow: 0 0 10px rgb(var(--cy) / .45); }
body.skin-miami .prose .box { transition: border-color var(--mi-ease); }
body.skin-miami .prose:not(.sc-prose) .box:hover { border-color: rgb(var(--cy) / .35); }
body.skin-miami .prose ul:not([class]) > li::marker { color: var(--mi-pink); }
body.skin-miami .prose ol:not([class]) > li::marker { color: var(--mi-cyan); font-family: var(--display); font-size: .85em; }

/* Buttons in text and site-wide: pink neon with dark text (at least 4.5:1) for tracked links, cyan outline for the rest.
   The home page's own buttons (.mi-btn) and the full system are described at "Home page" below. */
:where(body.skin-miami) .prose a.button, :where(body.skin-miami) .promo-button, :where(body.skin-miami) .lo-book, :where(body.skin-miami) .button-primary, :where(body.skin-miami) .newsletter-row button, :where(body.skin-miami) .search-big button, .mi-btn--primary {
  background: linear-gradient(90deg, var(--mi-pink), var(--mi-magenta)); color: #070212; border: 1px solid var(--mi-pink); border-radius: var(--mi-r-btn); font-family: var(--sans); font-weight: 700;
  box-shadow: var(--mi-lift-pink); transition: box-shadow .25s ease, transform .25s ease; }
:where(body.skin-miami) .prose a.button:hover, :where(body.skin-miami) .promo-button:hover, :where(body.skin-miami) .button-primary:hover, .mi-btn--primary:hover { color: #070212; filter: none; transform: translateY(-1px); box-shadow: var(--mi-flare-pink); }
:where(body.skin-miami) .prose a.button-alt, :where(body.skin-miami) .prose a.button:not([href*="/go/"]) { background: rgba(0, 230, 255, .05); color: var(--mi-cyan); border: 1px solid rgba(0, 230, 255, .7); box-shadow: none; font-weight: 600; }
:where(body.skin-miami) .prose a.button-alt:hover, :where(body.skin-miami) .prose a.button:not([href*="/go/"]):hover { background: rgba(0, 230, 255, .15); color: var(--mi-cyan); border-color: var(--mi-cyan); box-shadow: 0 0 14px rgba(0, 230, 255, .35); }

body.skin-miami .sc-prose a.button[href*="/go/"], body.skin-miami .sc-prose a.button[href*="/go/"]:hover { background: linear-gradient(90deg, var(--mi-pink), var(--mi-magenta)); color: #070212; border-radius: var(--mi-r-btn); }
body.skin-miami .prose a.button { letter-spacing: 0; line-height: 1.43; }

/* Header: translucent bar, gradient wordmark with the bolt, nav in the top row, language pill */
body.skin-miami.theme-dark .site-header { position: sticky; top: 0; z-index: 40; background: rgba(7, 2, 18, .7); border-bottom: 1px solid rgba(71, 11, 101, .4); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
html:has(body.skin-miami) { scroll-padding-top: 80px; scroll-behavior: smooth; }
body.skin-miami .header-top { min-height: 64px; }
body.skin-miami .brand--wordmark { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: .45em; row-gap: 0; font-family: var(--display); font-size: .875rem; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(90deg, var(--mi-pink), var(--mi-purple) 50%, var(--mi-cyan)) 0 50% / 200% 200%; -webkit-background-clip: text; background-clip: text; animation: mi-gradient 6s ease infinite; }
body.skin-miami .brand--wordmark::before { content: ""; grid-row: 1 / span 2; width: 20px; height: 20px; margin-inline-end: .1em; transition: filter var(--mi-ease); background: url("../../img/skins/miami/zap.svg") center / contain no-repeat; }
body.skin-miami .brand--wordmark .brand-top, body.skin-miami .brand--wordmark .brand-bottom { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: transparent; -webkit-text-fill-color: transparent; }
body.skin-miami .nav-list a { position: relative; padding: 8px 16px; font-size: .875rem; font-weight: 500; line-height: 1.43; color: rgba(255, 255, 255, .85); transition: color .15s ease; }
body.skin-miami .nav-list a:hover, body.skin-miami .nav-list a:focus-visible { color: var(--mi-cyan); }
body.skin-miami .search-form input { height: 36px; padding: 0 14px; border: 1px solid rgba(0, 230, 255, .3); background: rgba(7, 2, 18, .6); color: #fff; font-size: .8125rem; }
body.skin-miami .search-form input::placeholder { color: var(--mi-soft); opacity: .8; }
body.skin-miami .search-form button, body.skin-miami .menu-toggle { border: 1px solid rgba(71, 11, 101, .6); border-radius: 6px; color: #fff; min-height: 40px; min-width: 40px; padding: 0 10px; transition: border-color .15s ease, box-shadow .15s ease; }
body.skin-miami .search-form button { border-radius: 999px; min-height: 36px; min-width: 36px; padding: 0; color: var(--mi-cyan); border-color: rgba(0, 230, 255, .3); }
body.skin-miami .search-form button:hover, body.skin-miami .menu-toggle:hover { border-color: rgba(0, 230, 255, .6); box-shadow: 0 0 12px rgba(0, 230, 255, .5); }
body.skin-miami .header-langs a { gap: 6px; min-height: 31px; padding: 0 12px 0 32px; border: 1px solid rgba(0, 230, 255, .4); background: rgba(7, 2, 18, .6) url("../../img/skins/miami/globe.svg") 12px center / 14px 14px no-repeat; color: var(--mi-cyan); font-size: .6875rem; font-weight: 600; letter-spacing: .18em; transition: background-color .15s ease, border-color .15s ease; }
body.skin-miami .header-langs a:hover { border-color: var(--mi-cyan); background-color: rgba(0, 230, 255, .1); color: var(--mi-cyan); }
body.skin-miami a.brand--wordmark:hover::before { filter: hue-rotate(-130deg) drop-shadow(0 0 6px var(--mi-cyan)); }
body.skin-miami .brand-tagline { display: none; }
@media (min-width: 640px) { body.skin-miami .brand--wordmark { font-size: 1rem; } }
@media (min-width: 1024px) { body.skin-miami .brand-tagline { display: block; grid-column: 2 / -1; margin-top: 3px; font-family: var(--sans); font-size: .625rem; line-height: 1.2; font-weight: 400; letter-spacing: .18em; opacity: 1; color: var(--mi-soft); -webkit-text-fill-color: var(--mi-soft); } }
@media (min-width: 768px) {
  /* one row from tablet width on, as in the original */
  body.skin-miami.header-inline .site-header { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
  body.skin-miami.header-inline .header-top { display: contents; }
  body.skin-miami.header-inline .brand { order: 1; flex-shrink: 0; }
  body.skin-miami.header-inline .primary-nav { order: 2; flex: 1; min-width: 0; border-top: 0; }
  body.skin-miami.header-inline .nav-list { width: auto; max-width: none; padding: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }
  body.skin-miami.header-inline .header-actions { order: 3; }
  body.skin-miami .nav-list > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--mi-pink); box-shadow: 0 0 10px var(--mi-pink); opacity: 0; transition: opacity .15s ease; }
  body.skin-miami .nav-list > li > a:hover::after, body.skin-miami .nav-list > li > a:focus-visible::after { opacity: 1; }
  body.skin-miami .has-children > a { padding-inline-end: 30px; }
  body.skin-miami .has-children > a::before { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  body.skin-miami .has-children:hover > .sub-nav, body.skin-miami .has-children:focus-within > .sub-nav { left: auto; right: 0; min-width: 240px; padding: 4px; background: rgba(7, 2, 18, .97); border: 1px solid rgba(71, 11, 101, .6); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
  body.skin-miami .sub-nav a { padding: 8px 10px; border-radius: 4px; }
  body.skin-miami .sub-nav a:hover { color: var(--mi-pink); background: rgba(16, 5, 30, .9); }
  body.skin-miami .sub-nav a::after { display: none; }
  body.skin-miami .search-form input { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) { body.skin-miami .nav-list a { padding-inline: 10px; } body.skin-miami .has-children > a { padding-inline-end: 24px; } body.skin-miami .has-children > a::before { right: 9px; } body.skin-miami .brand--wordmark { font-size: .875rem; } }
@media (min-width: 768px) and (max-width: 899px) { body.skin-miami .search-form { display: none; } body.skin-miami .nav-list a { padding-inline: 8px; } body.skin-miami .has-children > a { padding-inline-end: 22px; } body.skin-miami .has-children > a::before { right: 7px; } body.skin-miami .brand--wordmark { font-size: .8125rem; } body.skin-miami.header-inline .nav-list { gap: 0; } }
@media (max-width: 767px) {
  body.skin-miami .search-form { display: none; }
  body.skin-miami .menu-toggle { min-height: 44px; min-width: 44px; padding: 0; }
  body.skin-miami .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js body.skin-miami .primary-nav { border-top-color: rgba(71, 11, 101, .4); max-height: calc(100vh - 64px); overflow-y: auto; }
  .js body.skin-miami .nav-list { padding-block: 8px 20px; gap: 0; }
  .js body.skin-miami .nav-list a { padding: 12px 16px; border-bottom: 0; border-radius: 6px; font-size: 1rem; color: rgba(255, 255, 255, .9); }
  .js body.skin-miami .nav-list a:hover { background: #170a2e; color: var(--mi-pink); }
  .js body.skin-miami .sub-nav { padding-left: 0; }
  .js body.skin-miami .sub-nav a { padding: 12px 16px 12px 32px; font-size: .9375rem; line-height: 1.4; font-weight: 500; color: rgba(255, 255, 255, .85); }
}
@media (max-width: 639px) {
  body.skin-miami .header-top { gap: 8px; }
  body.skin-miami .brand { min-height: 44px; }
  body.skin-miami .header-langs a { position: relative; justify-content: center; min-width: 44px; min-height: 31px; padding: 0 10px; background-image: none; }
  body.skin-miami .header-langs a::after { content: ""; position: absolute; inset: -7px -2px; }
}
@media (max-width: 430px) { body.skin-miami .brand--wordmark { font-size: .75rem; gap: .35em; } body.skin-miami .brand--wordmark::before { width: 18px; height: 18px; margin-inline-end: 0; } }
/* Longer wordmarks (Spanish) still fit next to the language pill and the menu button */
@media (max-width: 430px) { body.skin-miami .brand--wordmark:lang(es) { font-size: .6875rem; letter-spacing: 0; column-gap: .3em; } }
/* Under 400px, and on tablets where the menu shares the row, the header wordmark is a two-line lockup (the lettering
   over the smaller second line), so it is never cut off and never runs into the menu */
@media (max-width: 399px), (min-width: 768px) and (max-width: 1023px) {
  body.skin-miami .header-top .brand--wordmark { grid-template-columns: auto 1fr; column-gap: 8px; line-height: 1.2; }
  body.skin-miami .header-top .brand--wordmark .brand-top { grid-column: 2; font-size: .875rem; }
  body.skin-miami .header-top .brand--wordmark .brand-bottom { grid-column: 2; font-size: .625rem; letter-spacing: .08em; }
  body.skin-miami .header-top .brand--wordmark:lang(es) .brand-top { font-size: .875rem; }
}
@media (max-width: 359px) { body.skin-miami .brand--wordmark .brand-bottom { display: none; } body.skin-miami .brand--wordmark::before { grid-row: 1; } }

/* Lists of articles (home, category and search pages) */
body.skin-miami .card { padding: 0; border: 1px solid var(--mi-line); border-radius: 16px; background: rgba(16, 5, 30, .6); overflow: hidden; gap: 0; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
body.skin-miami .card:hover { border-color: rgba(0, 230, 255, .6); box-shadow: var(--mi-ring-cyan); transform: translateY(-2px); }
body.skin-miami .card-media { border-radius: 0; background: #10051e; }
body.skin-miami .card:hover .card-media img { transform: scale(1.03); }
body.skin-miami .card-media img { transition: transform .5s ease; }
body.skin-miami .card-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
body.skin-miami .card-title { margin: 8px 0 0; font-family: var(--sans); font-weight: 600; letter-spacing: 0; font-size: 1.0625rem; line-height: 1.35; color: #fff; }
body.skin-miami .card-title a { text-decoration: none; transition: color .2s ease; }
body.skin-miami .card { position: relative; }
body.skin-miami .card-title a::after { content: ""; position: absolute; inset: 0; }
body.skin-miami .card .kicker { position: relative; z-index: 1; }
body.skin-miami .card:hover .card-title a { color: var(--mi-cyan); }
body.skin-miami .card-excerpt { margin: 8px 0 0; font-size: .875rem; line-height: 1.45; color: var(--mi-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.skin-miami .card .kicker { margin: 0; align-self: flex-start; }
body.skin-miami .card .meta { margin: auto 0 0; padding-top: 12px; font-size: .8125rem; line-height: 1.4; color: var(--mi-soft); }
body.skin-miami .card--lead .card-title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.25; }
body.skin-miami.home-showcase .home-top:not(:has(.home-featured)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  body.skin-miami.home-showcase .home-top:not(:has(.home-featured)) .card--lead { flex-direction: row; }
  body.skin-miami.home-showcase .home-top:not(:has(.home-featured)) .card--lead .card-media { flex: 0 0 50%; }
  body.skin-miami.home-showcase .home-top:not(:has(.home-featured)) .card--lead .card-body { justify-content: center; padding: 32px; }
  body.skin-miami.home-showcase .home-top:not(:has(.home-featured)) .card--lead .meta { margin-top: 16px; }
}
body.skin-miami .card--lead .card-excerpt { font-size: 1rem; line-height: 1.5; }
body.skin-miami .section-title, body.skin-miami.home-showcase .section-title { border-top: 0; padding-top: 0; font-family: var(--sans); font-weight: 600; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mi-cyan); }
body.skin-miami .section-head .more, body.skin-miami a.more { color: var(--mi-pink); font-size: .875rem; text-decoration: none; }
body.skin-miami .section-head .more:hover, body.skin-miami a.more:hover { color: var(--mi-cyan); }
body.skin-miami.home-showcase .home-top, body.skin-miami.home-showcase main > .section { border-top: 0; padding-block: 32px; }
@media (min-width: 640px) { body.skin-miami { --mi-sec: 64px; } }
body.skin-miami .pagination a, body.skin-miami .pagination span { border-color: var(--mi-line); border-radius: 6px; }
body.skin-miami .search-big input, body.skin-miami .newsletter-row input { border: 2px solid rgba(0, 230, 255, .5); border-radius: 999px; background: rgba(7, 2, 18, .8); color: #fff; }

/* Footer */
body.skin-miami.theme-dark .site-footer { margin-top: 96px; background: rgba(7, 2, 18, .6); border-top: 1px solid rgba(71, 11, 101, .4); font-size: .875rem; }
body.skin-miami.home-showcase .site-footer { margin-top: 32px; }
body.skin-miami .footer-grid { gap: 32px 40px; padding-block: 56px 32px; }
body.skin-miami .footer-brand .muted { margin: 16px 0 0; max-width: 22rem; font-size: .875rem; line-height: 1.43; color: var(--mi-soft); }
body.skin-miami .footer-links { display: block; columns: 2; column-gap: 32px; }
body.skin-miami .footer-links li { break-inside: avoid; }
body.skin-miami .footer-links a, body.skin-miami .footer-social a { min-height: 32px; color: var(--mi-soft); text-decoration: none; transition: color .15s ease; }
body.skin-miami .footer-links a:hover, body.skin-miami .footer-social a:hover { color: var(--mi-pink); }
body.skin-miami .language-switcher ul { padding: 20px 0; border-top-color: rgba(71, 11, 101, .4); }
body.skin-miami .language-switcher a { min-height: 32px; border-color: rgba(0, 230, 255, .4); color: var(--mi-cyan); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
body.skin-miami .language-switcher a:hover { border-color: var(--mi-cyan); background: rgba(0, 230, 255, .1); }
body.skin-miami.theme-dark .language-switcher a[aria-current] { background: var(--mi-cyan); border-color: var(--mi-cyan); color: #070212; }
body.skin-miami .rg-notice, body.skin-miami .footer-bottom { font-size: .75rem; line-height: 1.5; color: var(--mi-soft); opacity: 1; }
body.skin-miami .footer-bottom { border-top-color: rgba(71, 11, 101, .4); }
body.skin-miami .footer-bottom a { color: var(--mi-cyan); }
/* Titled columns (setting footer_style = columns) */
body.skin-miami .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
body.skin-miami .footer-title, body.skin-miami .footer-title a { margin: 0; font-family: var(--display); font-size: .75rem; line-height: 1.34; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--mi-cyan); text-decoration: none; }
body.skin-miami .footer-title a:hover { color: var(--mi-pink); }
body.skin-miami .footer-cols ul { margin-top: 12px; display: grid; gap: 0; }
body.skin-miami .footer-cols li a { min-height: 32px; padding-block: 4px; color: var(--mi-soft); text-decoration: none; line-height: 1.43; transition: color .15s ease; }
body.skin-miami .footer-cols li a:hover { color: var(--mi-pink); }
body.skin-miami .footer-cols li a[href*="/promo"] { color: var(--mi-cyan); }
body.skin-miami .footer-cols li a[href*="/promo"]:hover { color: var(--mi-pink); }
@media (min-width: 640px) { body.skin-miami .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { body.skin-miami .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); } body.skin-miami .footer-links { columns: 4; } }
@media (min-width: 1024px) { body.skin-miami .footer-grid:has(.footer-cols) { grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr); gap: 40px; } body.skin-miami .footer-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 767px), (pointer: coarse) {
  body.skin-miami .footer-links a, body.skin-miami .footer-cols li a, body.skin-miami .footer-title a, body.skin-miami .language-switcher a { min-height: 44px; }
  body.skin-miami .footer-title a { display: inline-flex; align-items: center; }
  body.skin-miami .footer-bottom a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  body.skin-miami .card .kicker { position: relative; }
  body.skin-miami .card .kicker::after { content: ""; position: absolute; left: -4px; right: -24px; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* Sticky phone bar */
@media (max-width: 767px) {
  body.skin-miami.theme-dark .sticky-cta:not([hidden]) { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border: 1px solid rgba(255, 41, 176, .6); border-radius: 14px; background: rgba(7, 2, 18, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 0 20px rgba(255, 41, 176, .45), 0 12px 32px rgba(0, 0, 0, .6); font-size: .8125rem; }
  body.skin-miami.theme-dark .sticky-cta .button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--mi-r-btn); background: linear-gradient(90deg, var(--mi-pink), var(--mi-magenta)); color: #070212; font-weight: 700; text-decoration: none; }
  body.skin-miami.theme-dark .sticky-terms, body.skin-miami.theme-dark .sticky-close { color: var(--mi-soft); }
  body.skin-miami.theme-dark .sticky-cta strong { color: var(--mi-cyan); }
  body.skin-miami.theme-dark .sticky-cta:not([hidden]) { gap: 0 8px; padding: 8px 6px 4px 14px; }
  body.skin-miami .sticky-cta .sticky-close { min-width: 44px; min-height: 44px; }
  body.skin-miami .sticky-terms summary { display: inline-block; padding-block: 6px 20px; margin-bottom: -14px; }
  body.skin-miami .sticky-terms[open] summary { padding-bottom: 6px; margin-bottom: 0; }
  body.skin-miami .sticky-terms p { padding-bottom: 8px; padding-inline-end: 8px; }
  body.skin-miami .sticky-cta .sticky-text { font-size: .875rem; }
  /* the open menu has the screen to itself: no floating bar over its last links, a solid header behind it */
  body.skin-miami:has(.primary-nav.is-open) .sticky-cta { display: none; }
  body.skin-miami.theme-dark .site-header:has(.primary-nav.is-open) { background: #070212; }
  body.skin-miami .menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
  body.skin-miami .menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
  body.skin-miami .menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }
  body.skin-miami .menu-toggle[aria-expanded="true"] { border-color: rgb(var(--cy) / .6); color: var(--mi-cyan); }
  .js body.skin-miami .primary-nav { overscroll-behavior: contain; }
  .js body.skin-miami .primary-nav.is-open { height: calc(100vh - 64px); height: calc(100dvh - 64px); background: #070212; }
  /* room under the footer, so the floating bar never covers the last line of the page */
  body.skin-miami:has(.sticky-cta:not([hidden])) .site-footer { padding-bottom: 150px; }
}

/* ------------------------------------------------------------------------------------------------------------------
   Home page (templates/partials/home/showcase-miami.php)

   Type scale (px): 12 small print and eyebrows · 13 captions · 14 card text · 16 body · 18 lead · 20-24 card names and
   offers · 28 / 34 / 40 section headings (phone / tablet / desktop). Audiowide only for the lettering, section
   headings, names and numbers; everything that is read as a sentence is Inter.

   Buttons (one system, .mi-btn; the text's own a.button follows it, see "Buttons" above):
     primary    .mi-btn--primary    pink, dark text, glow: tracked sign-up actions only. Arrow after the label.
                .mi-btn--offer      the same button in orange, in the orange offer box only.
     secondary  .mi-btn--secondary  cyan outline, no glow at rest: moves inside the site ("See top apps", "All guides").
     tertiary   .mi-link            cyan text link with an icon or arrow: the quiet "read more" inside a card.
   All buttons: 48px high, 8px radius, sentence case, 16px/600; as wide as their label (200 to 320px) from 640px,
   full width on phones.
   ------------------------------------------------------------------------------------------------------------------ */
.mi-ico { flex-shrink: 0; }
.skin-miami.home-showcase main { min-height: 0; }
.mi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 10px 24px; border: 1px solid transparent; border-radius: var(--mi-r-btn); font-family: var(--sans); font-size: 1rem; line-height: 1.25; font-weight: 600; letter-spacing: 0; text-decoration: none; text-align: center; text-wrap: balance; cursor: pointer; }
.mi-btn .mi-ico { transition: transform .2s ease; }
.mi-btn:hover .mi-ico { transform: translateX(3px); }
.mi-btn--primary { font-weight: 700; }
.mi-btn--offer, .mi-btn--offer:hover { background: linear-gradient(90deg, var(--mi-orange), #ff5f6d); border-color: var(--mi-orange); box-shadow: 0 0 16px rgb(var(--or) / .45), 0 6px 24px rgb(var(--or) / .2); }
.mi-btn--offer:hover { box-shadow: 0 0 24px rgb(var(--or) / .8), 0 0 56px rgb(var(--or) / .35); }
.mi-btn--secondary { background: rgb(7 2 18 / .6); color: var(--mi-cyan); border-color: rgb(var(--cy) / .7); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mi-btn--secondary:hover { background: rgb(var(--cy) / .12); border-color: var(--mi-cyan); color: var(--mi-cyan); box-shadow: var(--mi-ring-cyan); }
.mi-link { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: .9375rem; line-height: 1.35; font-weight: 600; color: var(--mi-cyan); text-decoration: none; transition: color .15s ease; }
.mi-link:hover { color: var(--mi-pink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .mi-btn { width: auto; min-width: 200px; max-width: 320px; } }
@media (max-width: 639px) { .mi-btn { padding-inline: 16px; } }

/* Hero: a night sky with the striped sun hanging from the top edge, the lettering, what the page is and the two
   actions; then the horizon (skyline, palms) and, on the grid floor, search and topics. The sky glow and the floor are
   tied to the horizon, so the composition is the same at every width and in both languages. Drawn with CSS and three
   tiny SVG files; everything is positioned inside the hero box, so nothing moves while the page loads. */
.mi-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mi-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #090118 0, #16042a 320px, #1d0533 100%); }
.mi-scene > span { position: absolute; display: block; }
.mi-stars { inset: 0 0 auto 0; height: 420px; opacity: .85; background-image: radial-gradient(1px 1px at 20% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 70% 8%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 35% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 85% 18%, var(--mi-cyan), transparent 60%), radial-gradient(1px 1px at 50% 6%, #fff, transparent 60%), radial-gradient(1px 1px at 10% 28%, #fff, transparent 60%), radial-gradient(1px 1px at 92% 30%, #fff, transparent 60%), radial-gradient(1px 1px at 61% 36%, #fff, transparent 60%), radial-gradient(1px 1px at 28% 44%, var(--mi-pink), transparent 60%); }
/* The striped sun hangs from the top edge of the hero (as on the original: its lower, striped part shows). */
.mi-sun { left: 50%; top: calc(min(90vw, 380px) * -.58); width: min(90vw, 380px); aspect-ratio: 1; margin-left: calc(min(90vw, 380px) / -2); border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #ffdd33 0%, #ff9f1a 40%, #ff4000 75%, #ff00a2 100%); box-shadow: 0 0 60px rgb(var(--or) / .55), 0 0 140px rgb(var(--pk) / .3); }
.mi-sun::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 8px, rgba(7, 2, 18, .85) 8px, rgba(7, 2, 18, .85) 12px); -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 55%, #000 100%); mask-image: linear-gradient(to bottom, transparent 30%, #000 55%, #000 100%); }
.mi-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(7 2 18 / .14) 0 1px, transparent 1px 3px); }
/* The land: a zero-height anchor in the text column whose bottom edge is the horizon, drawn full width behind the text. */
.mi-land { position: relative; z-index: -1; align-self: stretch; height: 0; margin-top: 104px; }
.mi-land > span { position: absolute; display: block; left: 50%; width: 100vw; margin-left: -50vw; }
/* sunset glow above the horizon and the dark floor below it (both part of .mi-haze, so they meet exactly on the line) */
.mi-haze { bottom: 0; height: 300px; background: linear-gradient(to top, rgb(255 122 26 / .78) 0, rgb(255 41 140 / .5) 44px, rgb(140 20 120 / .3) 110px, rgb(87 5 60 / .12) 200px, transparent 300px); }
.mi-haze::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1400px; background: linear-gradient(to bottom, #2a0838 0, #1a0629 90px, #0d0319 240px, #070212 420px); }
.mi-skyline { bottom: 0; height: 52px; background: url("../../img/skins/miami/skyline.svg") center / 100% 100% no-repeat; filter: drop-shadow(0 0 6px rgb(var(--cy) / .8)); }
.mi-skyline--far { bottom: 4px; height: 74px; opacity: .28; transform: scaleX(-1); filter: hue-rotate(95deg) blur(.6px); }
.mi-land > .mi-palm { bottom: -8px; left: 2%; width: auto; margin-left: 0; height: 124px; aspect-ratio: 120 / 220; background: url("../../img/skins/miami/palm-cyan.svg") center / contain no-repeat; opacity: .65; filter: drop-shadow(0 0 5px var(--mi-cyan)); }
.mi-land > .mi-palm-1 { left: calc(50% - 50vw + 2vw); } .mi-land > .mi-palm-2 { left: auto; right: calc(50% - 50vw + 2vw); transform: scaleX(-1); }
.mi-land > .mi-palm-3, .mi-land > .mi-palm-4 { display: none; height: 150px; background-image: url("../../img/skins/miami/palm-purple.svg"); opacity: .55; filter: drop-shadow(0 0 5px var(--mi-purple)); }
.mi-land > .mi-palm-3 { left: calc(50% - 50vw + 12vw); transform: scaleX(-1); } .mi-land > .mi-palm-4 { left: auto; right: calc(50% - 50vw + 12vw); }
.mi-horizon { bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--mi-cyan) 20%, var(--mi-cyan) 80%, transparent); box-shadow: 0 0 10px rgb(var(--cy) / .9), 0 0 22px rgb(var(--cy) / .5); }
.mi-grid { top: 100%; height: 260px; overflow: hidden; }
.mi-land > .mi-grid { width: 200vw; margin-left: -100vw; }
.mi-grid > span { display: block; width: 100%; height: 100%; background-image: linear-gradient(rgb(var(--pk) / .5) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--pk) / .5) 1px, transparent 1px); background-size: 60px 60px; background-position: 50% 0; transform: perspective(420px) rotateX(62deg); transform-origin: top center; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); }
.mi-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(84px, 12vh, 104px); padding-bottom: 40px; }
.mi-hero-in > * { margin-bottom: 0; }
.mi-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 16px; border: 1px solid rgb(var(--cy) / .6); border-radius: 999px; background: rgba(7, 2, 18, .78); box-shadow: var(--mi-ring-cyan); color: var(--mi-cyan); font-size: .75rem; line-height: 1.34; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; animation: mi-flicker 5s infinite; }
.mi-wordmark { margin: 12px 0 0; font-family: "Monoton", "Audiowide", sans-serif; font-weight: 400; font-size: min(20vw, 6.25rem); line-height: .85; letter-spacing: .04em; text-transform: uppercase; color: var(--mi-pink); white-space: nowrap;
  text-shadow: -1px -1px 0 var(--mi-cyan), 1px -1px 0 var(--mi-cyan), -1px 1px 0 var(--mi-cyan), 1px 1px 0 var(--mi-cyan), 0 0 12px rgb(var(--pk) / .9), 0 0 28px rgb(var(--pk) / .6), 0 0 60px rgb(var(--cy) / .4); animation: mi-flicker 5s infinite; }
.mi-wordmark-sub { margin: 12px 0 0; padding: 4px 14px; border-radius: 999px; background: rgba(7, 2, 18, .7); font-family: var(--display); font-size: .75rem; line-height: 1.5; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: var(--mi-cyan); text-shadow: var(--mi-glow-cyan); }
.mi-desc { margin-top: 20px; max-width: 40rem; color: var(--mi-soft); font-size: 1rem; line-height: 1.5; }
.mi-desc p { margin: 6px auto 0; max-width: 34rem; text-wrap: pretty; }
body.skin-miami .mi-title { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 1.125rem; line-height: 1.35; letter-spacing: 0; color: #fff; text-wrap: balance; }
.mi-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 26rem; margin-top: 24px; }
.mi-promo { display: flex; flex-direction: column; align-items: center; margin-top: 16px; max-width: 100%; }
.mi-promo-line { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 0; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .88); text-wrap: balance; }
.mi-promo-line strong { color: #fff; font-weight: 600; }
/* The code chip: the code itself in white, a divider, then the quiet "copy" control. */
.mi-code { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 12px; border: 1px dashed rgb(var(--cy) / .6); border-radius: var(--mi-r-btn); background: rgb(7 2 18 / .55); color: #fff; font-family: var(--mono); font-size: .8125rem; line-height: 1.3; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; }
.mi-code:hover { border-color: var(--mi-cyan); background: rgb(var(--cy) / .1); }
body.skin-miami .mi-code code.promo-code { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
body.skin-miami .mi-copy { display: inline-flex; align-items: center; min-height: 30px; margin: 0; padding: 0 0 0 30px; border: 0; border-inline-start: 1px solid rgb(var(--cy) / .3); border-radius: 0; background: url("../../img/skins/miami/copy.svg") 10px center / 14px 14px no-repeat; color: var(--mi-cyan); font-family: var(--sans); font-size: .75rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
body.skin-miami .mi-copy:hover { text-decoration: underline; }
body.skin-miami .mi-copy.is-copied { background-color: transparent; color: #5dffb0; }
.mi-terms { margin: 4px 0 0; font-family: var(--sans); font-size: .75rem; line-height: 1.5; color: var(--mi-soft); text-align: center; }
.mi-terms summary { padding: 4px 0; text-decoration-color: rgba(217, 203, 230, .45); cursor: pointer; }
.mi-terms summary:hover { color: #fff; }
.mi-terms p { margin: 2px auto 4px; max-width: 46rem; color: var(--mi-soft); }
.mi-promo .mi-terms[open] p { padding: 8px 12px; border-radius: 10px; background: rgb(7 2 18 / .7); }
.mi-disclosure { max-width: 34rem; margin: 2px 0 0; font-size: .75rem; line-height: 1.5; color: var(--mi-soft); text-wrap: pretty; }
.mi-explore { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 36px; }
.mi-search { position: relative; width: 100%; max-width: 30rem; }
.mi-search input { width: 100%; height: 48px; padding: 0 52px 0 46px; border: 1px solid rgb(var(--cy) / .55); border-radius: 999px; background: rgba(7, 2, 18, .82); color: #fff; font-size: 1rem; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; }
.mi-search input::placeholder { color: var(--mi-soft); opacity: 1; }
.mi-search input:focus { border-color: var(--mi-cyan); outline: none; box-shadow: 0 0 0 2px rgb(var(--cy) / .6), var(--mi-ring-cyan); }
.mi-search-ico { position: absolute; left: 17px; top: 50%; margin-top: -9px; color: var(--mi-cyan); pointer-events: none; }
.mi-search button { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--mi-cyan); cursor: pointer; }
.mi-search button:hover { color: var(--mi-pink); }
.mi-topics, .mi-closing .box > p:last-child { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; }
.mi-topics a, body.skin-miami .mi-closing .box a.button { display: inline-flex; align-items: center; width: auto; min-width: 0; min-height: 32px; margin: 0; padding: 6px 14px; border: 1px solid rgb(120 60 160 / .7); border-radius: 999px; background: rgba(7, 2, 18, .78); box-shadow: none; color: rgba(255, 255, 255, .9); font-family: var(--sans); font-size: .8125rem; line-height: 1.3; letter-spacing: 0; font-weight: 500; text-decoration: none; transition: color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.mi-topics a:hover, body.skin-miami .mi-closing .box a.button:hover { color: var(--mi-cyan); border-color: rgb(var(--cy) / .7); background: rgba(7, 2, 18, .9); transform: none; box-shadow: var(--mi-ring-cyan); }
@media (min-width: 640px) {
  .mi-hero-in { padding-top: clamp(96px, 13vh, 132px); padding-bottom: 56px; }
  .mi-sun { top: calc(min(85vw, 420px) * -.62); width: min(85vw, 420px); margin-left: calc(min(85vw, 420px) / -2); }
  .mi-land { margin-top: 112px; }
  .mi-skyline { height: 60px; } .mi-skyline--far { bottom: 8px; height: 92px; }
  .mi-land > .mi-palm { bottom: -14px; height: 180px; }
  .mi-grid { height: 300px; }
  .mi-wordmark { font-size: 8rem; }
  .mi-wordmark-sub { font-size: 1.125rem; line-height: 1.5; }
  .mi-title { font-size: 1.25rem; }
  .mi-hero-cta { flex-direction: row; justify-content: center; max-width: none; }
  .mi-explore { padding-top: 44px; }
}
@media (min-width: 900px) { .mi-land > .mi-palm-3, .mi-land > .mi-palm-4 { display: block; } }
@media (min-width: 640px) and (max-width: 899px) { .mi-land > .mi-palm { height: 150px; bottom: -12px; } }
@media (min-width: 768px) { .mi-wordmark { font-size: 10rem; } .mi-wordmark-sub { font-size: 1.25rem; line-height: 1.4; } body.skin-miami .mi-title { font-size: 1.25rem; } }
/* Small phones (iPhone SE size and below): less sun, so the first button is on the first screen */
@media (max-width: 639px) and (max-height: 700px) {
  .mi-hero-in { padding-top: 64px; }
  .mi-sun { top: calc(min(90vw, 380px) * -.64); }
  .mi-desc { margin-top: 16px; }
  .mi-hero-cta { margin-top: 20px; }
}
/* Phones held sideways and other very low screens: a smaller sign so the offer still shows on the first screen */
@media (max-height: 480px) and (orientation: landscape) {
  .mi-hero-in { padding-top: 64px; }
  .mi-sun { top: calc(min(85vw, 420px) * -.72); }
  .mi-wordmark { font-size: 5.5rem; }
  .mi-wordmark-sub { font-size: .875rem; }
  .mi-land { margin-top: 88px; }
}

/* Short answer and the opening text */
.mi-top { padding-top: var(--mi-sec); }
.mi-answer, .mi-lead { max-width: 46rem; margin-inline: auto; }
body.skin-miami .mi-answer { padding: 20px; border: 1px solid rgb(var(--cy) / .3); border-radius: var(--mi-r-card); background: rgba(16, 5, 30, .6); font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .9); }
body.skin-miami .mi-answer p { margin: 0; }
body.skin-miami .mi-answer p + p { margin-top: 12px; }
body.skin-miami .mi-answer .label { margin: 0 0 10px; }
body.skin-miami .mi-answer .label + p { margin-top: 0; }
body.skin-miami .mi-answer > p:last-child:not(:first-child):has(> a:first-child) { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mi-line); font-size: .9375rem; line-height: 1.35; }
body.skin-miami .mi-answer > p:last-child:has(> a:first-child) a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; text-decoration: none; color: var(--mi-cyan); }
body.skin-miami .mi-answer > p:last-child:has(> a:first-child) a:hover { color: var(--mi-pink); text-decoration: underline; text-underline-offset: 3px; }
.mi-lead { margin-top: 20px; color: var(--mi-soft); font-size: 1rem; }
@media (min-width: 640px) { body.skin-miami .mi-answer { padding: 28px 32px; } }
@media (max-width: 767px), (pointer: coarse) { body.skin-miami .mi-answer > p:last-child:has(> a:first-child) a { min-height: 44px; } body.skin-miami .mi-answer > p:last-child:not(:first-child):has(> a:first-child) { row-gap: 0; } }

/* Section headings (the designed blocks and the sections of the text share them): eyebrow, heading, one lead line */
.mi-block { padding-block: var(--mi-sec); }
.mi-sections .sc-sec { padding-block: var(--mi-sec); border-top: 0; }
body.skin-miami .mi-head > :last-child, body.skin-miami .sc-prose .sc-sec > :last-child { margin-bottom: 0; }
body.skin-miami .sc-prose { font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
body.skin-miami .sc-prose .label, body.skin-miami .mi-answer .label, body.skin-miami .mi-closing .box .label, body.skin-miami .mi-faq .faq > h2::before, .mi-feature-eyebrow, .mi-app-eyebrow { font-family: var(--sans); font-size: .75rem; line-height: 1.34; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mi-cyan); text-shadow: none; }
body.skin-miami .sc-prose .label { margin: 0 0 12px; }
body.skin-miami .sc-prose h2 { max-width: 22em; margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.2; letter-spacing: .01em; color: #fff; text-wrap: balance; }
body.skin-miami .sc-prose h2 .mi-accent { color: var(--mi-pink); text-shadow: var(--mi-glow-pink); }
body.skin-miami .sc-prose h2 .mi-accent--cyan { color: var(--mi-cyan); text-shadow: var(--mi-glow-cyan); }
body.skin-miami .sc-prose .sc-sec > h2 + p:not(.label), body.skin-miami .mi-head > h2 + p { max-width: 38rem; margin: 12px 0 0; font-size: 1rem; line-height: 1.55; color: var(--mi-soft); }
body.skin-miami .sc-prose .sc-sec > p:not(.label), body.skin-miami .sc-prose .sc-col > p { color: var(--mi-soft); }
body.skin-miami .sc-prose h3 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; color: #fff; }
body.skin-miami .sc-prose a:not(.button) { color: var(--mi-cyan); }
body.skin-miami .sc-prose a:not(.button):hover { color: var(--mi-pink); }
@media (min-width: 640px) { body.skin-miami .sc-prose h2 { font-size: 2.125rem; line-height: 1.15; } body.skin-miami .sc-prose .sc-sec > h2 + p:not(.label), body.skin-miami .mi-head > h2 + p { font-size: 1.125rem; } }
@media (min-width: 1024px) { body.skin-miami .sc-prose h2 { font-size: 2.5rem; line-height: 1.1; } }

/* Trending markets: a price board. One row per market: what it is, the outcome that leads, then a compact tracked
   price button per exchange (Kalshi first), in the same two columns on every row. */
.mi-markets-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--mi-line); font-size: .8125rem; line-height: 1.4; color: var(--mi-soft); }
.mi-markets-meta > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; }
.mi-markets-meta > span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mi-cyan); box-shadow: 0 0 8px var(--mi-cyan); }
.mi-panel { margin-top: 28px; border: 1px solid var(--mi-line); border-radius: var(--mi-r-card); background: rgba(16, 5, 30, .5); overflow: hidden; }
.mi-market-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mi-market { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 16px; border-bottom: 1px solid var(--mi-line); transition: background-color .2s ease; }
.mi-market:hover, .mi-market:focus-within { background: rgb(var(--cy) / .04); }
.mi-market p { margin: 0; }
.mi-market-title { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; }
.mi-market-title a { display: block; color: #fff; text-decoration: none; transition: color var(--mi-ease); }
.mi-market-title a:hover { color: var(--mi-cyan); }
.mi-market-title span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.4; font-weight: 400; color: var(--mi-soft); }
.mi-market-venues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mi-venue { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "price change"; align-items: baseline; gap: 0 6px; min-height: 52px; padding: 7px 12px 6px; border: 1px solid rgb(var(--cy) / .32); border-radius: 10px; background: rgb(var(--cy) / .05); color: #fff; text-decoration: none; transition: border-color var(--mi-ease), box-shadow var(--mi-ease), background-color var(--mi-ease); }
.mi-venue:hover { border-color: var(--mi-cyan); background: rgb(var(--cy) / .12); box-shadow: var(--mi-ring-cyan); color: #fff; }
.mi-venue-name { grid-area: name; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .75rem; line-height: 1.4; font-weight: 600; color: rgba(255, 255, 255, .88); white-space: nowrap; }
.mi-venue-name::after { content: "↗"; font-size: .75rem; line-height: 1; color: rgb(var(--cy) / .8); transition: transform var(--mi-ease); }
.mi-venue:hover .mi-venue-name::after { transform: translate(2px, -2px); }
.mi-venue strong { grid-area: price; font-family: var(--display); font-weight: 400; font-size: 1.125rem; line-height: 1.3; letter-spacing: .01em; color: var(--mi-cyan); font-variant-numeric: tabular-nums; }
.mi-venue.is-none strong { color: var(--mi-soft); }
.mi-venue small { grid-area: change; font-size: .6875rem; line-height: 1.4; white-space: nowrap; }
.mi-venue small.is-up { color: #5dffb0; } .mi-venue small.is-down { color: #ff8fa3; }
.mi-markets-terms { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 6px 16px; }
.mi-markets-terms .mi-terms { text-align: start; margin: 0; }
.mi-markets-terms .mi-terms p { margin-inline: 0; }
@media (min-width: 640px) {
  .mi-market { flex-direction: row; align-items: center; gap: 16px; padding: 12px 20px; }
  .mi-market-venues { flex: 0 0 auto; grid-template-columns: repeat(2, 136px); }
  .mi-markets-terms { padding-inline: 20px; }
}
@media (min-width: 1200px) {
  .mi-market-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-market:nth-child(odd) { border-inline-end: 1px solid var(--mi-line); }
}

/* Trust row: four quiet proof points, no box */
.mi-trust-wrap { padding-block: 8px 0; }
.mi-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.mi-trust a { display: flex; align-items: flex-start; gap: 12px; height: 100%; min-height: 44px; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: #fff; transition: background-color .2s ease; }
.mi-trust a:hover { background: rgb(var(--cy) / .06); color: #fff; }
.mi-trust-ico { flex: 0 0 36px; height: 36px; border: 1px solid rgb(var(--cy) / .35); border-radius: 10px; background: rgb(var(--cy) / .06) url("../../img/skins/miami/trust-shield.svg") center / 20px 20px no-repeat; transition: border-color var(--mi-ease), box-shadow var(--mi-ease); }
.mi-trust li:nth-child(4n+2) .mi-trust-ico { background-image: url("../../img/skins/miami/trust-flask.svg"); }
.mi-trust li:nth-child(4n+3) .mi-trust-ico { background-image: url("../../img/skins/miami/trust-eye.svg"); }
.mi-trust li:nth-child(4n+4) .mi-trust-ico { background-image: url("../../img/skins/miami/trust-scale.svg"); }
.mi-trust a:hover .mi-trust-ico { border-color: var(--mi-cyan); box-shadow: var(--mi-ring-cyan); }
.mi-trust-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-trust strong { font-size: .875rem; line-height: 1.3; font-weight: 600; transition: color .2s ease; }
.mi-trust a:hover strong { color: var(--mi-cyan); }
.mi-trust small { font-size: .75rem; line-height: 1.35; color: var(--mi-soft); }
@media (max-width: 479px) { .mi-trust { grid-template-columns: minmax(0, 1fr); gap: 0; border-block: 1px solid var(--mi-line); } .mi-trust li + li { border-top: 1px solid var(--mi-line); } .mi-trust a { align-items: center; padding-inline: 4px; border-radius: 0; } }
@media (min-width: 480px) { .mi-trust { padding-block: 12px; border-block: 1px solid var(--mi-line); } .mi-trust a { align-items: center; } .mi-trust strong { font-size: .9375rem; } .mi-trust small { font-size: .8125rem; } }
@media (min-width: 900px) { .mi-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* Top apps: the offer box (with the optional picture) and the ranked cards */
.mi-apps-block { scroll-margin-top: 80px; }
.mi-feature { display: flex; flex-direction: column; margin-top: 28px; border: 1px solid rgb(var(--or) / .45); border-radius: var(--mi-r-card); background: linear-gradient(120deg, rgb(var(--or) / .14), #0b0316 45%, rgb(var(--pk) / .08)); overflow: hidden; }
.mi-feature p { margin: 0; }
.mi-feature-pic { display: block; margin: 0; background: #10051e; }
.mi-feature-pic img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
a.mi-feature-pic:hover img { filter: brightness(1.08); }
.mi-feature-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.mi-feature-text { flex: 1; min-width: 0; }
.mi-feature-eyebrow { color: var(--mi-orange); }
.mi-feature-title { margin-top: 8px !important; font-family: var(--display); font-size: 1.25rem; line-height: 1.3; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.mi-feature-title span { color: var(--mi-orange); }
.mi-feature-note { margin-top: 6px !important; font-size: .875rem; line-height: 1.4; color: var(--mi-soft); }
.mi-feature-act { display: flex; flex-direction: column; gap: 10px; }
/* code and terms under a sign-up button */
.mi-fine { display: flex; flex-direction: column; gap: 2px; }
.mi-usecode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--mi-soft); }
.mi-usecode .mi-code { flex: 1 1 200px; justify-content: space-between; }
.mi-fine .mi-terms { margin: 0; text-align: start; }
.mi-fine .mi-terms p { margin-inline: 0; }
.mi-apps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.mi-app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px 20px; border: 1px solid var(--mi-line); border-radius: var(--mi-r-card); background: rgba(16, 5, 30, .6); transition: border-color var(--mi-ease), box-shadow var(--mi-ease); }
.mi-app:hover, .mi-app:focus-within { border-color: rgb(var(--pk) / .55); }
/* The first card is the pick: a pink-to-cyan edge. */
.mi-app--first { border-color: transparent; background: linear-gradient(#12061f, #12061f) padding-box, linear-gradient(120deg, rgb(var(--pk) / .9), rgb(153 51 255 / .6) 45%, rgb(var(--cy) / .85)) border-box; }
.mi-app--first:hover, .mi-app--first:focus-within { border-color: transparent; box-shadow: 0 0 28px rgb(var(--pk) / .22); }
.mi-rank { position: absolute; top: -14px; left: -10px; z-index: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(to bottom right, var(--mi-pink), #b45cff); box-shadow: 0 0 0 4px var(--mi-bg); color: #070212; font-family: var(--display); font-size: 1.125rem; line-height: 1; }
.mi-app p { margin: 0; }
body.skin-miami .mi-app-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.375rem; line-height: 1.3; letter-spacing: .01em; color: #fff; }
.mi-app-rating { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; font-size: .9375rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.mi-app-rating strong { font-weight: 700; color: #fff; }
/* Five outlined stars with the filled ones on top, cut at the rating (4.8 = 96%). */
.mi-app-stars { display: inline-block; width: 90px; height: 18px; background: url("../../img/skins/miami/stars-off.svg") 0 50% / 90px 18px no-repeat; }
.mi-app-stars-on { display: block; height: 100%; background: url("../../img/skins/miami/stars-on.svg") 0 50% / 90px 18px no-repeat; }
.mi-app-tagline { margin-top: 10px !important; max-width: 30rem; font-size: 1rem; line-height: 1.45; color: var(--mi-soft); text-wrap: pretty; }
.mi-app-points { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 10px; }
.mi-app-points li { position: relative; padding-inline-start: 26px; font-size: .9375rem; line-height: 1.4; color: rgba(255, 255, 255, .9); text-wrap: pretty; }
.mi-app-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 16px; height: 16px; background: url("../../img/skins/miami/check.svg") center / contain no-repeat; }
/* The offer panel is the focal point of a card: where it is valid, the offer, the button, then code and terms. */
.mi-app-offer { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid rgb(var(--pk) / .22); border-radius: 12px; background: linear-gradient(160deg, rgb(var(--pk) / .09), rgb(var(--cy) / .04)); }
.mi-app-eyebrow { letter-spacing: .12em; }
.mi-app-bonus { margin-top: -6px !important; font-family: var(--display); font-size: 1.1875rem; line-height: 1.35; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.mi-app-offer .mi-btn { width: 100%; max-width: none; min-width: 0; }
.mi-app-more { display: flex; }
body.skin-miami .mi-tail { margin-top: 32px; }
body.skin-miami .mi-tail > p:has(> a.button:only-child) { margin: 0; text-align: center; }
body.skin-miami .mi-tail .sc-linklist { margin-bottom: 24px; }
@media (min-width: 640px) {
  .mi-feature-body { flex-direction: row; align-items: center; gap: 32px; padding: 24px 28px; }
  .mi-feature-act { flex: 0 0 304px; }
  .mi-feature-act .mi-btn { width: 100%; max-width: none; }
  .mi-feature-title { font-size: 1.5rem; }
  .mi-app { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "id offer" "points offer" "more offer"; grid-template-rows: auto auto 1fr; column-gap: 28px; padding: 28px; }
  .mi-app-id { grid-area: id; } .mi-app-points { grid-area: points; } .mi-app-offer { grid-area: offer; align-self: start; padding: 20px; } .mi-app-more { grid-area: more; align-self: end; }
  body.skin-miami .mi-app-name { font-size: 1.5rem; }
  .mi-app--first .mi-rank { width: 44px; height: 44px; font-size: 1.25rem; }
}
@media (min-width: 768px) {
  /* a 16:9 picture sits beside the offer; a wide one (3:1) stays on top */
  .mi-feature--pic:not(.mi-feature--wide) { flex-direction: row; align-items: stretch; }
  .mi-feature--pic:not(.mi-feature--wide) .mi-feature-pic { flex: 0 0 42%; max-width: 520px; }
  .mi-feature--pic:not(.mi-feature--wide) .mi-feature-pic img { height: 100%; object-fit: cover; }
  .mi-feature--pic:not(.mi-feature--wide) .mi-feature-body { flex: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 20px; }
  .mi-feature--pic:not(.mi-feature--wide) .mi-feature-act { flex: 0 0 auto; max-width: 320px; }
  .mi-feature--pic:not(.mi-feature--wide) .mi-feature-text { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .mi-app { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 344px; grid-template-areas: "id points offer" "more points offer"; grid-template-rows: auto 1fr; column-gap: 36px; padding: 32px; }
  .mi-app--plain { grid-template-columns: minmax(0, 1fr) 344px; grid-template-areas: "id offer" "more offer"; }
  .mi-app-points { padding-top: 6px; }
  .mi-app-bonus { font-size: 1.25rem; }
}

/* Sections of the home page text */
body.skin-miami .mi-sections .sc-sec--boxes { display: block; padding-block: 0 var(--mi-sec); }
body.skin-miami .sc-sec--boxes > .box { position: relative; overflow: hidden; margin: 0; padding: 24px 20px; border: 1px solid var(--mi-line); border-radius: var(--mi-r-card); background: rgba(16, 5, 30, .5); }
body.skin-miami .sc-sec--boxes > .box::before { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgb(var(--cy) / .16); filter: blur(64px); pointer-events: none; }
body.skin-miami .sc-sec--boxes > .box > * { position: relative; }
body.skin-miami .sc-sec--boxes > .box h2 { margin: 0; font-size: 1.75rem; line-height: 1.2; }
body.skin-miami .sc-sec--boxes > .box > p { max-width: 34rem; margin: 12px 0 0; font-family: var(--sans); font-size: 1rem; line-height: 1.55; color: var(--mi-soft); }
body.skin-miami .sc-sec--boxes > .box > .box { display: inline-flex; margin: 0 0 16px; padding: 6px 12px; border: 1px solid rgb(var(--cy) / .5); border-radius: 999px; background: rgb(var(--cy) / .1); color: var(--mi-cyan); font-size: .875rem; line-height: 1.43; }
body.skin-miami .sc-sec--boxes > .box > a.button { margin: 24px 0 0; }
body.skin-miami .sc-sec--boxes > .box > ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
body.skin-miami .sc-sec--boxes > .box > ul > li { margin: 0; padding: 12px 0 12px 30px; border-top: 1px solid var(--mi-line); background: url("../../img/skins/miami/check.svg") 0 15px / 18px 18px no-repeat; font-size: 1rem; line-height: 1.45; color: #fff; }
body.skin-miami .sc-sec--boxes > .box > ul > li:first-child { border-top: 0; }
@media (min-width: 768px) {
  body.skin-miami .sc-sec--boxes > .box { padding: 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 56px; align-content: center; }
  body.skin-miami .sc-sec--boxes > .box > * { grid-column: 1; justify-self: start; }
  body.skin-miami .sc-sec--boxes > .box > ul { grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: stretch; margin: 0; }
  body.skin-miami .sc-sec--boxes > .box h2 { font-size: 2.125rem; line-height: 1.15; }
}
/* The one button that ends a section ("View full comparison", "All articles", "All guides"): secondary, centred */
body.skin-miami .mi-sections .sc-sec > .cards + p, body.skin-miami .mi-sections .sc-sec > .sc-linklist + p, body.skin-miami .mi-sections .sc-sec > p:has(> a:only-child) { max-width: none; margin-top: 32px; text-align: center; }
body.skin-miami .mi-tail a.button, body.skin-miami .mi-sections .sc-sec > p > a:only-child, body.skin-miami .sc-sec--boxes > .box > a.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 24px; border: 1px solid rgb(var(--cy) / .7); border-radius: var(--mi-r-btn); background: rgb(7 2 18 / .6); box-shadow: none; color: var(--mi-cyan); font-family: var(--sans); font-size: 1rem; line-height: 1.25; font-weight: 600; letter-spacing: 0; text-decoration: none; transform: none; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
body.skin-miami .mi-tail a.button:hover, body.skin-miami .mi-sections .sc-sec > p > a:only-child:hover, body.skin-miami .sc-sec--boxes > .box > a.button:hover { background: rgb(var(--cy) / .12); border-color: var(--mi-cyan); color: var(--mi-cyan); box-shadow: var(--mi-ring-cyan); transform: none; }
@media (min-width: 640px) { body.skin-miami .mi-tail a.button, body.skin-miami .mi-sections .sc-sec > p > a:only-child, body.skin-miami .sc-sec--boxes > .box > a.button { width: auto; min-width: 200px; max-width: 320px; } }
/* Article cards written in the text: a picture, a small category line, the headline, a blurb and a date line */
body.skin-miami .sc-prose .sc-sec > .cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
body.skin-miami .sc-prose .cards > .box { display: flex; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--mi-line); border-radius: var(--mi-r-card); background: rgba(16, 5, 30, .6); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
body.skin-miami .sc-prose .cards > .box:hover { border-color: rgb(var(--cy) / .6); box-shadow: var(--mi-ring-cyan); transform: translateY(-2px); }
body.skin-miami .sc-prose .cards > .box > a { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0 20px 18px; color: #fff; text-decoration: none; }
body.skin-miami .sc-prose .cards > .box > a > picture > img, body.skin-miami .sc-prose .cards > .box > a > img { width: calc(100% + 40px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 -20px 18px; border-radius: 0; transition: transform .5s ease; }
body.skin-miami .sc-prose .cards > .box:hover > a img { transform: scale(1.03); }
body.skin-miami .sc-prose .cards > .box > a > p { margin: 8px 0 0; font-size: .875rem; line-height: 1.45; color: var(--mi-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.skin-miami .sc-prose .cards > .box > a > p:first-of-type { margin: 0; font-size: .75rem; line-height: 1.34; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mi-pink); display: block; }
body.skin-miami .sc-prose .cards > .box > a > p:last-child:not(:first-of-type) { margin-top: auto; padding-top: 14px; font-size: .8125rem; line-height: 1.4; display: flex; justify-content: space-between; -webkit-line-clamp: none; overflow: visible; }
body.skin-miami .sc-prose .cards > .box > a > p:last-child:not(:first-of-type)::after { content: "→"; color: var(--mi-cyan); transition: transform .2s ease; }
body.skin-miami .sc-prose .cards > .box:hover > a > p:last-child::after { transform: translateX(4px); }
body.skin-miami .sc-prose .cards > .box h3 { margin: 8px 0 0; font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; letter-spacing: 0; color: #fff; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease; }
body.skin-miami .sc-prose .cards > .box:hover h3 { color: var(--mi-cyan); }
@media (min-width: 640px) { body.skin-miami .sc-prose .sc-sec > .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body.skin-miami .sc-prose .sc-sec > .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Cards without a picture (guides): small cyan category, headline, blurb, arrow; three across */
body.skin-miami .sc-prose .cards > .box:has(> a:not(:has(img))):hover { border-color: rgb(var(--pk) / .6); box-shadow: var(--mi-ring-pink); }
body.skin-miami .sc-prose .cards > .box > a:not(:has(img)) { position: relative; padding: 24px 24px 52px; }
body.skin-miami .sc-prose .cards > .box > a:not(:has(img)) > p:first-of-type { color: var(--mi-cyan); }
body.skin-miami .sc-prose .cards > .box > a:not(:has(img)) > h3 { font-size: 1.1875rem; line-height: 1.3; -webkit-line-clamp: none; }
body.skin-miami .sc-prose .cards > .box:hover > a:not(:has(img)) > h3 { color: var(--mi-pink); }
body.skin-miami .sc-prose .cards > .box > a:not(:has(img)) > p:last-child:not(:first-of-type) { display: block; margin-top: 8px; padding-top: 0; font-size: .9375rem; line-height: 1.45; }
body.skin-miami .sc-prose .cards > .box > a:not(:has(img)) > p:last-child:not(:first-of-type)::after { position: absolute; right: 24px; bottom: 20px; color: var(--mi-pink); }
@media (min-width: 1024px) { body.skin-miami .sc-prose .sc-sec > .cards:not(:has(img)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Guide links: cards with the title and an arrow */
body.skin-miami .sc-prose ul.sc-linklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 32px 0 0; }
body.skin-miami .sc-prose .sc-linklist > li { display: flex; margin: 0; padding: 0; border: 0; }
body.skin-miami .sc-prose .sc-linklist > li > a { position: relative; flex: 1; display: block; padding: 24px 56px 24px 24px; border: 1px solid var(--mi-line); border-radius: var(--mi-r-card); background: rgba(16, 5, 30, .6); font-family: var(--sans); font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: #fff; text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, color .2s ease; }
body.skin-miami .sc-prose .sc-linklist > li > a::after { content: "→"; position: absolute; right: 24px; bottom: 22px; font-family: var(--sans); color: var(--mi-pink); transition: transform .2s ease; }
body.skin-miami .sc-prose .sc-linklist > li > a:hover { border-color: rgb(var(--pk) / .6); box-shadow: var(--mi-ring-pink); color: var(--mi-pink); }
body.skin-miami .sc-prose .sc-linklist > li > a:hover::after { transform: translateX(4px); }
@media (min-width: 640px) { body.skin-miami .sc-prose ul.sc-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body.skin-miami .sc-prose ul.sc-linklist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Questions and the closing box */
.mi-faq { padding-block: var(--mi-sec) 32px; }
body.skin-miami .mi-faq .faq { max-width: 46rem; margin: 0 auto; padding: 0; border: 0; }
body.skin-miami .mi-faq .faq > h2 { margin: 0 0 28px; font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.2; letter-spacing: .01em; color: #fff; text-align: center; text-wrap: balance; }
body.skin-miami .mi-faq .faq > h2::before { content: "FAQ"; display: block; margin-bottom: 12px; }
body.skin-miami .mi-faq .faq > h2 .mi-accent--cyan { color: var(--mi-cyan); text-shadow: var(--mi-glow-cyan); }
body.skin-miami .mi-faq .faq details { margin: 0; padding: 0 8px; border: 0; border-inline: 1px solid var(--mi-line); border-radius: 0; background: rgba(16, 5, 30, .5); }
body.skin-miami .mi-faq .faq details:first-of-type { padding-top: 6px; border-top: 1px solid var(--mi-line); border-radius: var(--mi-r-card) var(--mi-r-card) 0 0; }
body.skin-miami .mi-faq .faq details:last-of-type { padding-bottom: 6px; border-bottom: 1px solid var(--mi-line); border-radius: 0 0 var(--mi-r-card) var(--mi-r-card); }
body.skin-miami .mi-faq .faq details:only-of-type { border-radius: var(--mi-r-card); }
body.skin-miami .mi-faq .faq summary { position: relative; list-style: none; padding: 16px 44px 16px 12px; border-bottom: 1px solid rgba(71, 11, 101, .4); font-family: var(--sans); font-size: 1rem; line-height: 1.45; font-weight: 600; color: #fff; cursor: pointer; transition: color .15s ease; }
body.skin-miami .mi-faq .faq summary::-webkit-details-marker { display: none; }
body.skin-miami .mi-faq .faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border: solid var(--mi-cyan); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
body.skin-miami .mi-faq .faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
body.skin-miami .mi-faq .faq summary:hover { color: var(--mi-cyan); }
body.skin-miami .mi-faq .faq details[open] > summary { color: var(--mi-cyan); border-bottom-color: transparent; }
body.skin-miami .mi-faq .faq summary:focus-visible { outline-offset: -2px; }
body.skin-miami .mi-faq .faq details:last-of-type:not([open]) summary { border-bottom-color: transparent; }
body.skin-miami .mi-faq .faq-answer { padding: 0 12px 18px; border-bottom: 1px solid rgba(71, 11, 101, .4); font-size: 1rem; line-height: 1.6; color: var(--mi-soft); }
body.skin-miami .mi-faq .faq details:last-of-type .faq-answer { border-bottom: 0; }
body.skin-miami .mi-faq .faq-answer a { color: var(--mi-cyan); }
.mi-closing { padding-block: 0 40px; }
body.skin-miami .mi-closing .box { max-width: 46rem; margin: 0 auto; padding: 24px 20px; border: 1px solid var(--mi-line); border-radius: var(--mi-r-card); background: rgba(16, 5, 30, .5); text-align: center; }
body.skin-miami .mi-closing .box .label { margin: 0; }
body.skin-miami .mi-closing .box h3 { margin: 8px 0 0; font-size: 1.25rem; line-height: 1.35; }
body.skin-miami .mi-closing .box > p:last-child { margin-top: 16px; }
.mi-offer-terms { padding-bottom: 24px; }
body.skin-miami .offer-terms { max-width: 46rem; margin: 0 auto; padding: 16px 0 0; border-top: 1px solid rgba(71, 11, 101, .4); font-size: .75rem; line-height: 1.5; color: var(--mi-soft); }
@media (min-width: 640px) {
  .mi-faq { padding-bottom: 48px; }
  body.skin-miami .mi-faq .faq > h2 { font-size: 2.125rem; line-height: 1.15; }
  body.skin-miami .mi-faq .faq details { padding-inline: 16px; }
  .mi-closing { padding-bottom: var(--mi-sec); }
  body.skin-miami .mi-closing .box h3 { font-size: 1.5rem; line-height: 1.334; }
}
@media (min-width: 1024px) { body.skin-miami .mi-faq .faq > h2 { font-size: 2.5rem; line-height: 1.1; } }

/* Thin neon line between the big sections (pink to cyan, fading at both ends) */
.mi-markets-block, body.skin-miami .mi-sections .sc-sec:not(.sc-sec--boxes), .mi-faq { position: relative; }
.mi-markets-block::before, body.skin-miami .mi-sections .sc-sec:not(.sc-sec--boxes)::before, .mi-faq::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--pk) / .45) 22%, rgb(var(--cy) / .45) 78%, transparent); pointer-events: none; }
body.skin-miami .mi-sections .sc-sec:not(.sc-sec--boxes)::before { left: 0; right: 0; }
.mi-top + .mi-markets-block::before { display: none; }

/* Keyboard focus: the cyan ring everywhere, plus the hover glow of the control */
body.skin-miami .mi-btn:focus-visible, body.skin-miami .prose a.button:focus-visible, body.skin-miami .mi-venue:focus-visible, body.skin-miami .mi-topics a:focus-visible { outline: 2px solid var(--mi-cyan); outline-offset: 3px; }
.mi-btn--primary:focus-visible { box-shadow: var(--mi-flare-pink); }
.mi-btn--secondary:focus-visible, .mi-venue:focus-visible { box-shadow: var(--mi-ring-cyan); }
body.skin-miami .card:focus-within, body.skin-miami .sc-prose .cards > .box:focus-within { border-color: rgb(var(--cy) / .6); box-shadow: var(--mi-ring-cyan); }
body.skin-miami .sc-prose .sc-linklist > li > a:focus-visible { border-color: rgb(var(--pk) / .6); box-shadow: var(--mi-ring-pink); }
.mi-btn:active, body.skin-miami .prose a.button:active, .mi-venue:active { transform: translateY(1px); filter: brightness(1.08); }
.mi-search:focus-within .mi-search-ico { color: var(--mi-pink); }

/* Touch sizes: every control is at least 44 x 44 on phones and at least 8px from the next one (comes last so it
   wins over the sizes above) */
@media (pointer: coarse), (max-width: 767px) {
  .mi-code { padding-inline-end: 0; }
  body.skin-miami .mi-copy { min-height: 44px; padding-inline-end: 12px; }
  .mi-terms summary { display: inline-block; padding-block: 13px; }
  .mi-market-title a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  .mi-link { min-height: 44px; }
  .mi-topics, .mi-closing .box > p:last-child { gap: 8px; }
  .mi-topics a, body.skin-miami .mi-closing .box a.button { min-height: 44px; padding-inline: 16px; font-size: .875rem; }
  .mi-trust a { min-height: 56px; }
  body.skin-miami .footer-cols li a, body.skin-miami .footer-links a { min-width: 44px; }
  /* small standalone links of article pages (links inside running text keep their line) */
  body.skin-miami .breadcrumbs a, body.skin-miami .byline a, body.skin-miami .article-header .kicker, body.skin-miami .share a, body.skin-miami .share button, body.skin-miami .author-box a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
}

/* The narrowest phones (320px): the code chip gives up a little air so "copy" stays on its line in both languages */
@media (max-width: 379px) {
  .mi-code { gap: 6px; padding-inline-start: 8px; }
  body.skin-miami .mi-code code.promo-code { letter-spacing: .03em; }
  body.skin-miami .mi-copy { padding-inline: 24px 8px; background-position: 6px center; }
}
@media (max-width: 359px) {
  .mi-wordmark-sub { font-size: .6875rem; letter-spacing: .2em; text-indent: .2em; }
  .mi-pill { letter-spacing: .16em; }
  .mi-code { gap: 6px; padding-inline-start: 8px; font-size: .75rem; }
  body.skin-miami .mi-code code.promo-code { letter-spacing: .03em; }
  body.skin-miami .mi-copy { padding-inline: 24px 8px; background-position: 6px center; }
  .mi-app { padding-inline: 16px; } .mi-app-offer { padding: 14px 12px; }
}
/* Touch screens with the wide layout (a phone held sideways, a tablet): the header, the lists of links and the
   small links in tables get the same 44px tap height as on phones */
@media (pointer: coarse) and (min-width: 768px) {
  body.skin-miami .nav-list > li > a { padding-block: 12px; }
  body.skin-miami .header-langs a, body.skin-miami .brand { min-height: 44px; }
  body.skin-miami .search-form button { min-width: 44px; min-height: 44px; }
}
@media (pointer: coarse), (max-width: 767px) {
  /* the side lists, a lone link in a table cell, a link that is the only element of a bullet: a 44px tap area around
     the link that does not move the text (a list of nothing but links cannot be told from a sentence with a link here) */
  body.skin-miami .prose ul:not([class]) > li > a:only-child, body.skin-miami .prose ol:not([class]) > li > a:only-child, body.skin-miami .prose:not(.sc-prose) .box > a:not(.button), body.skin-miami .prose td > a:only-child, body.skin-miami .side-list a { position: relative; }
  body.skin-miami .prose ul:not([class]) > li > a:only-child::after, body.skin-miami .prose ol:not([class]) > li > a:only-child::after, body.skin-miami .prose:not(.sc-prose) .box > a:not(.button)::after, body.skin-miami .prose td > a:only-child::after, body.skin-miami .side-list a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
  body.skin-miami .side-list li { padding-block: 10px; margin-block: 0; }
  /* bullets a little further apart on touch screens, so a bullet that is one link is a full 44px row */
  body.skin-miami .prose:not(.sc-prose) ul:not([class]) > li, body.skin-miami .prose:not(.sc-prose) ol:not([class]) > li { margin-bottom: .9em; }
  body.skin-miami .prose td:has(> a:only-child) { padding-block: 14px; }
}
/* Breadcrumbs: the page's own title never pushes the page wider than the screen */
body.skin-miami .breadcrumbs ol { min-width: 0; }
body.skin-miami .breadcrumbs li { min-width: 0; max-width: 100%; }
body.skin-miami .breadcrumbs [aria-current] { max-width: min(40ch, 100%); }
body.skin-miami .breadcrumbs li:has(> [aria-current]) { display: flex; }
/* Phones: everything read as a sentence is 16px; small print 13px */
@media (max-width: 639px), (pointer: coarse) and (max-width: 1023px) {
  body.skin-miami .author-box, body.skin-miami .author-box p { font-size: 1rem; }
  body.skin-miami .sc-prose .cards > .box > a > p:not(:first-of-type):not(:last-child), body.skin-miami .sc-prose .cards > .box > a:not(:has(img)) > p:last-child:not(:first-of-type), body.skin-miami .card-excerpt, body.skin-miami .card--lead .card-excerpt, .mi-app-points li { font-size: 1rem; line-height: 1.45; }
  .mi-feature-note { font-size: .9375rem; } .mi-disclosure, .mi-terms { font-size: .8125rem; }
}

@keyframes mi-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
@keyframes mi-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  body.skin-miami *, body.skin-miami *::before, body.skin-miami *::after { animation: none !important; transition-duration: .001ms !important; }
  html:has(body.skin-miami) { scroll-behavior: auto; }
  body.skin-miami .card:hover, body.skin-miami .cards > .box:hover, body.skin-miami .mi-btn:hover, body.skin-miami .mi-btn:active, body.skin-miami a.button:hover, body.skin-miami a.button:active, body.skin-miami .mi-venue:active, body.skin-miami .card:hover img, body.skin-miami .cards > .box:hover img { transform: none !important; }
}