/* Skin "venice" (setting skin = venice): the "Pacific Cool" look of Venice Prediction Markets: a deep ocean dusk with
   sky blue, coral and sand, a setting sun behind the lettering, the sea and two palm silhouettes. 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-venice.php, classes .vn-*) below. Colours and fonts are those of the original site;
   the button, card and type system is the one of the "miami" skin. */

/* Fonts of the original design, self-hosted (SIL Open Font License 1.1, licence texts in public/assets/fonts/):
   Space Grotesk (lettering, headings, names, prices), DM Sans (text). Latin ranges only. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/space-grotesk-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: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/dm-sans-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-venice {
  --wrap: 1280px; --gutter: 20px; --radius: 8px; --vn-r-btn: 8px; --vn-r-card: 16px; --vn-sec: 48px;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", "DM Sans", 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;
  --vn-bg: #08111c; --vn-card: #0e1b2b; --vn-coral: #f26e5a; --vn-sky: #2bbdee; --vn-purple: #345cb2; --vn-blue: #2291c3;
  --vn-sand: #f7c96e; --vn-cream: #f3efe6; --vn-soft: #b4c2d0; --vn-line: rgba(43, 67, 99, .6); --vn-line-solid: #1d2e44;
  /* One glow scale, used sparingly so text stays crisp. Text: --vn-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: 242 110 90; --cy: 43 189 238; --or: 247 201 110;
  --vn-glow-coral: 0 0 18px rgb(var(--pk) / .35);
  --vn-glow-sky: 0 0 18px rgb(var(--cy) / .35);
  --vn-glow-soft: 0 0 10px rgb(var(--cy) / .55);
  --vn-ring-coral: 0 0 12px rgb(var(--pk) / .4);
  --vn-ring-sky: 0 0 12px rgb(var(--cy) / .4);
  --vn-lift: 0 6px 20px -6px rgb(var(--cy) / .6);
  --vn-lift-sky: 0 0 20px rgb(var(--cy) / .7), 0 0 40px rgb(var(--cy) / .35);
  --vn-flare: 0 8px 26px -6px rgb(var(--cy) / .85), 0 0 22px rgb(var(--cy) / .35);
  --vn-flare-sky: 0 0 24px rgb(var(--cy) / .8), 0 0 56px rgb(var(--cy) / .35);
  --vn-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-venice.theme-dark {
  --paper: #08111c; --paper-2: #0e1b2b; --sc-card: #0e1b2b; --ink: #fff; --ink-2: rgba(255, 255, 255, .9); --muted: #b4c2d0; --line: #1d2e44;
  --accent: #f26e5a; --accent-text: #f26e5a; --on-accent: #08111c; --focus: #2bbdee;
  background: #08111c;
}
body.skin-venice :focus-visible { outline: 2px solid var(--vn-sky); outline-offset: 2px; border-radius: 6px; }
body.skin-venice ::selection { background: var(--vn-coral); color: #08111c; }

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

/* Boxes, tables and code in text */
body.skin-venice .prose .box, body.skin-venice .side-box, body.skin-venice .prose .toc, body.skin-venice .prose .takeaways, body.skin-venice .prose .verdict, body.skin-venice .prose .pros, body.skin-venice .prose .cons, body.skin-venice .prose .note, body.skin-venice .prose .stat, body.skin-venice .prose .market-box {
  border: 1px solid var(--vn-line); border-radius: 16px; background: rgba(14, 27, 43, .6); }
body.skin-venice .prose .code-box { border-color: rgba(43, 189, 238, .35); box-shadow: 0 0 18px rgba(43, 189, 238, .12); }
body.skin-venice .prose blockquote { border-inline-start-color: var(--vn-coral); color: var(--vn-soft); }
body.skin-venice .prose table { border-color: var(--vn-line-solid); }
body.skin-venice .prose th { background: #0e1b2b; color: var(--vn-sky); font-weight: 600; }
body.skin-venice .prose th, body.skin-venice .prose td { border-color: var(--vn-line-solid); }
body.skin-venice .prose code.promo-code, body.skin-venice .code-chip { border: 1px dashed rgba(43, 189, 238, .6); border-radius: 8px; background: rgba(43, 189, 238, .05); color: var(--vn-sky); font-family: var(--mono); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
body.skin-venice .copy-code { border-color: rgba(43, 189, 238, .6); color: var(--vn-sky); border-radius: 8px; font-family: var(--sans); }
body.skin-venice .copy-code.is-copied { background: var(--vn-sky); color: #08111c; }
body.skin-venice .faq details { border-color: rgba(43, 67, 99, .6); }
body.skin-venice .faq summary:hover { color: var(--vn-coral); }
body.skin-venice .faq-answer { color: var(--vn-soft); }

/* Articles and pages: the thin line of the home page above each main heading, calmer tables, framed pictures */
body.skin-venice .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-venice .prose:not(.sc-prose) > h2:first-child { margin-top: 0; padding-top: 0; background: none; }
body.skin-venice .article-title { text-wrap: balance; }
body.skin-venice .prose .disclosure, body.skin-venice .disclosure { border-inline-start: 2px solid var(--vn-coral); border-radius: 0 10px 10px 0; background: rgba(14, 27, 43, .6); color: var(--vn-soft); }
body.skin-venice .prose tbody tr { transition: background-color .15s ease; }
body.skin-venice .prose tbody tr:hover { background: rgb(var(--cy) / .05); }
body.skin-venice .prose td a:not(.button) { white-space: nowrap; }
body.skin-venice .prose > p > img, body.skin-venice .prose > figure img, body.skin-venice .article-figure img { border: 1px solid var(--vn-line); border-radius: 16px; }
body.skin-venice .prose .box { transition: border-color var(--vn-ease); }
body.skin-venice .prose:not(.sc-prose) .box:hover { border-color: rgb(var(--cy) / .35); }
body.skin-venice .prose ul:not([class]) > li::marker { color: var(--vn-coral); }
body.skin-venice .prose ol:not([class]) > li::marker { color: var(--vn-sky); font-family: var(--display); font-size: .85em; }

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

body.skin-venice .sc-prose a.button[href*="/go/"], body.skin-venice .sc-prose a.button[href*="/go/"]:hover { background: linear-gradient(90deg, #2bbdee, #2aa5dc); color: #08111c; border-radius: var(--vn-r-btn); }
body.skin-venice .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-venice.theme-dark .site-header { position: sticky; top: 0; z-index: 40; background: rgba(8, 17, 28, .7); border-bottom: 1px solid rgba(43, 67, 99, .4); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
html:has(body.skin-venice) { scroll-padding-top: 80px; scroll-behavior: smooth; }
body.skin-venice .header-top { min-height: 64px; }
body.skin-venice .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;
  font-weight: 700; letter-spacing: .08em; background: linear-gradient(90deg, #2bbdee, #62b5dc 50%, #f26e5a) 0 50% / 200% 200%; -webkit-background-clip: text; background-clip: text; animation: vn-gradient 8s ease infinite; }
body.skin-venice .brand--wordmark::before { content: ""; grid-row: 1 / span 2; width: 20px; height: 20px; margin-inline-end: .1em; transition: filter var(--vn-ease); background: url("../../img/skins/venice/waves.svg") center / contain no-repeat; }
body.skin-venice .brand--wordmark .brand-top, body.skin-venice .brand--wordmark .brand-bottom { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: transparent; -webkit-text-fill-color: transparent; }
body.skin-venice .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-venice .nav-list a:hover, body.skin-venice .nav-list a:focus-visible { color: var(--vn-sky); }
body.skin-venice .search-form input { height: 36px; padding: 0 14px; border: 1px solid rgba(43, 189, 238, .3); background: rgba(8, 17, 28, .6); color: #fff; font-size: .8125rem; }
body.skin-venice .search-form input::placeholder { color: var(--vn-soft); opacity: .8; }
body.skin-venice .search-form button, body.skin-venice .menu-toggle { border: 1px solid rgba(43, 67, 99, .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-venice .search-form button { border-radius: 999px; min-height: 36px; min-width: 36px; padding: 0; color: var(--vn-sky); border-color: rgba(43, 189, 238, .3); }
body.skin-venice .search-form button:hover, body.skin-venice .menu-toggle:hover { border-color: rgba(43, 189, 238, .6); box-shadow: 0 0 12px rgba(43, 189, 238, .5); }
body.skin-venice .header-langs a { gap: 6px; min-height: 31px; padding: 0 12px 0 32px; border: 1px solid rgba(43, 189, 238, .4); background: rgba(8, 17, 28, .6) url("../../img/skins/venice/globe.svg") 12px center / 14px 14px no-repeat; color: var(--vn-sky); font-size: .75rem; font-weight: 600; letter-spacing: .14em; transition: background-color .15s ease, border-color .15s ease; }
body.skin-venice .header-langs a:hover { border-color: var(--vn-sky); background-color: rgba(43, 189, 238, .1); color: var(--vn-sky); }
body.skin-venice a.brand--wordmark:hover::before { filter: drop-shadow(0 0 6px var(--vn-sky)); }
body.skin-venice .brand-tagline { display: none; }
@media (min-width: 640px) { body.skin-venice .brand--wordmark { font-size: 1rem; } }
@media (min-width: 1024px) { body.skin-venice .brand-tagline { display: block; grid-column: 2 / -1; margin-top: 3px; font-family: var(--sans); font-size: .75rem; line-height: 1.2; font-weight: 400; letter-spacing: .12em; opacity: 1; color: var(--vn-soft); -webkit-text-fill-color: var(--vn-soft); } }
@media (min-width: 768px) {
  /* one row from tablet width on, as in the original */
  body.skin-venice.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-venice.header-inline .header-top { display: contents; }
  body.skin-venice.header-inline .brand { order: 1; flex-shrink: 0; }
  body.skin-venice.header-inline .primary-nav { order: 2; flex: 1; min-width: 0; border-top: 0; }
  body.skin-venice.header-inline .nav-list { width: auto; max-width: none; padding: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }
  body.skin-venice.header-inline .header-actions { order: 3; }
  body.skin-venice .nav-list > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--vn-coral); box-shadow: 0 0 10px var(--vn-coral); opacity: 0; transition: opacity .15s ease; }
  body.skin-venice .nav-list > li > a:hover::after, body.skin-venice .nav-list > li > a:focus-visible::after { opacity: 1; }
  body.skin-venice .has-children > a { padding-inline-end: 30px; }
  body.skin-venice .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-venice .has-children:hover > .sub-nav, body.skin-venice .has-children:focus-within > .sub-nav { left: auto; right: 0; min-width: 240px; padding: 4px; background: rgba(8, 17, 28, .97); border: 1px solid rgba(43, 67, 99, .6); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
  body.skin-venice .sub-nav a { padding: 8px 10px; border-radius: 4px; }
  body.skin-venice .sub-nav a:hover { color: var(--vn-coral); background: rgba(14, 27, 43, .9); }
  body.skin-venice .sub-nav a::after { display: none; }
  body.skin-venice .search-form input { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) { body.skin-venice .nav-list a { padding-inline: 10px; } body.skin-venice .has-children > a { padding-inline-end: 24px; } body.skin-venice .has-children > a::before { right: 9px; } body.skin-venice .brand--wordmark { font-size: .875rem; } }
@media (min-width: 768px) and (max-width: 899px) { body.skin-venice .search-form { display: none; } body.skin-venice .nav-list a { padding-inline: 8px; } body.skin-venice .has-children > a { padding-inline-end: 22px; } body.skin-venice .has-children > a::before { right: 7px; } body.skin-venice .brand--wordmark { font-size: .8125rem; } body.skin-venice.header-inline .nav-list { gap: 0; } }
@media (max-width: 767px) {
  body.skin-venice .search-form { display: none; }
  body.skin-venice .menu-toggle { min-height: 44px; min-width: 44px; padding: 0; }
  body.skin-venice .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js body.skin-venice .primary-nav { border-top-color: rgba(43, 67, 99, .4); max-height: calc(100vh - 64px); overflow-y: auto; }
  .js body.skin-venice .nav-list { padding-block: 8px 20px; gap: 0; }
  .js body.skin-venice .nav-list a { padding: 12px 16px; border-bottom: 0; border-radius: 6px; font-size: 1rem; color: rgba(255, 255, 255, .9); }
  .js body.skin-venice .nav-list a:hover { background: #12233a; color: var(--vn-coral); }
  .js body.skin-venice .sub-nav { padding-left: 0; }
  .js body.skin-venice .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-venice .header-top { gap: 8px; }
  body.skin-venice .brand { min-height: 44px; }
  body.skin-venice .header-langs a { position: relative; justify-content: center; min-width: 44px; min-height: 31px; padding: 0 10px; background-image: none; }
  body.skin-venice .header-langs a::after { content: ""; position: absolute; inset: -7px -2px; }
}
@media (max-width: 430px) { body.skin-venice .brand--wordmark { font-size: .75rem; gap: .35em; } body.skin-venice .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-venice .brand--wordmark:lang(es) { font-size: .75rem; 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-venice .header-top .brand--wordmark, body.skin-venice .header-top .brand--wordmark:lang(es) { grid-template-columns: auto 1fr; column-gap: 8px; line-height: 1.2; }
  body.skin-venice .header-top .brand--wordmark .brand-top { grid-column: 2; font-size: .875rem; }
  body.skin-venice .header-top .brand--wordmark .brand-bottom { grid-column: 2; font-size: .75rem; letter-spacing: .04em; }
  body.skin-venice .header-top .brand--wordmark:lang(es) .brand-top { font-size: .875rem; }
}
@media (max-width: 359px) { body.skin-venice .brand--wordmark .brand-bottom { display: none; } body.skin-venice .brand--wordmark::before { grid-row: 1; } }

/* Lists of articles (home, category and search pages) */
body.skin-venice .card { padding: 0; border: 1px solid var(--vn-line); border-radius: 16px; background: rgba(14, 27, 43, .6); overflow: hidden; gap: 0; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
body.skin-venice .card:hover { border-color: rgba(43, 189, 238, .6); box-shadow: var(--vn-ring-sky); transform: translateY(-2px); }
body.skin-venice .card-media { border-radius: 0; background: #0e1b2b; }
body.skin-venice .card:hover .card-media img { transform: scale(1.03); }
body.skin-venice .card-media img { transition: transform .5s ease; }
body.skin-venice .card-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
body.skin-venice .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-venice .card-title a { text-decoration: none; transition: color .2s ease; }
body.skin-venice .card { position: relative; }
body.skin-venice .card-title a::after { content: ""; position: absolute; inset: 0; }
body.skin-venice .card .kicker { position: relative; z-index: 1; }
body.skin-venice .card:hover .card-title a { color: var(--vn-sky); }
body.skin-venice .card-excerpt { margin: 8px 0 0; font-size: .875rem; line-height: 1.45; color: var(--vn-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.skin-venice .card .kicker { margin: 0; align-self: flex-start; }
body.skin-venice .card .meta { margin: auto 0 0; padding-top: 12px; font-size: .8125rem; line-height: 1.4; color: var(--vn-soft); }
body.skin-venice .card--lead .card-title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.25; }
body.skin-venice.home-showcase .home-top:not(:has(.home-featured)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  body.skin-venice.home-showcase .home-top:not(:has(.home-featured)) .card--lead { flex-direction: row; }
  body.skin-venice.home-showcase .home-top:not(:has(.home-featured)) .card--lead .card-media { flex: 0 0 50%; }
  body.skin-venice.home-showcase .home-top:not(:has(.home-featured)) .card--lead .card-body { justify-content: center; padding: 32px; }
  body.skin-venice.home-showcase .home-top:not(:has(.home-featured)) .card--lead .meta { margin-top: 16px; }
}
body.skin-venice .card--lead .card-excerpt { font-size: 1rem; line-height: 1.5; }
body.skin-venice .section-title, body.skin-venice.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(--vn-sky); }
body.skin-venice .section-head .more, body.skin-venice a.more { color: var(--vn-coral); font-size: .875rem; text-decoration: none; }
body.skin-venice .section-head .more:hover, body.skin-venice a.more:hover { color: var(--vn-sky); }
body.skin-venice.home-showcase .home-top, body.skin-venice.home-showcase main > .section { border-top: 0; padding-block: 32px; }
@media (min-width: 640px) { body.skin-venice { --vn-sec: 64px; } }
body.skin-venice .pagination a, body.skin-venice .pagination span { border-color: var(--vn-line); border-radius: 6px; }
body.skin-venice .search-big input, body.skin-venice .newsletter-row input { border: 2px solid rgba(43, 189, 238, .5); border-radius: 999px; background: rgba(8, 17, 28, .8); color: #fff; }

/* Footer */
body.skin-venice.theme-dark .site-footer { margin-top: 96px; background: rgba(8, 17, 28, .6); border-top: 1px solid rgba(43, 67, 99, .4); font-size: .875rem; }
body.skin-venice.home-showcase .site-footer { margin-top: 32px; }
body.skin-venice .footer-grid { gap: 32px 40px; padding-block: 56px 32px; }
body.skin-venice .footer-brand .muted { margin: 16px 0 0; max-width: 22rem; font-size: .875rem; line-height: 1.43; color: var(--vn-soft); }
body.skin-venice .footer-links { display: block; columns: 2; column-gap: 32px; }
body.skin-venice .footer-links li { break-inside: avoid; }
body.skin-venice .footer-links a, body.skin-venice .footer-social a { min-height: 32px; color: var(--vn-soft); text-decoration: none; transition: color .15s ease; }
body.skin-venice .footer-links a:hover, body.skin-venice .footer-social a:hover { color: var(--vn-coral); }
body.skin-venice .language-switcher ul { padding: 20px 0; border-top-color: rgba(43, 67, 99, .4); }
body.skin-venice .language-switcher a { min-height: 32px; border-color: rgba(43, 189, 238, .4); color: var(--vn-sky); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
body.skin-venice .language-switcher a:hover { border-color: var(--vn-sky); background: rgba(43, 189, 238, .1); }
body.skin-venice.theme-dark .language-switcher a[aria-current] { background: var(--vn-sky); border-color: var(--vn-sky); color: #08111c; }
body.skin-venice .rg-notice, body.skin-venice .footer-bottom { font-size: .75rem; line-height: 1.5; color: var(--vn-soft); opacity: 1; }
body.skin-venice .footer-bottom { border-top-color: rgba(43, 67, 99, .4); }
body.skin-venice .footer-bottom a { color: var(--vn-sky); }
/* Titled columns (setting footer_style = columns) */
body.skin-venice .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
body.skin-venice .footer-title, body.skin-venice .footer-title a { margin: 0; font-family: var(--display); font-size: .75rem; line-height: 1.34; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vn-sky); text-decoration: none; }
body.skin-venice .footer-title a:hover { color: var(--vn-coral); }
body.skin-venice .footer-cols ul { margin-top: 12px; display: grid; gap: 0; }
body.skin-venice .footer-cols li a { min-height: 32px; padding-block: 4px; color: var(--vn-soft); text-decoration: none; line-height: 1.43; transition: color .15s ease; }
body.skin-venice .footer-cols li a:hover { color: var(--vn-coral); }
body.skin-venice .footer-cols li a[href*="/promo"] { color: var(--vn-sky); }
body.skin-venice .footer-cols li a[href*="/promo"]:hover { color: var(--vn-coral); }
@media (min-width: 640px) { body.skin-venice .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { body.skin-venice .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); } body.skin-venice .footer-links { columns: 4; } }
@media (min-width: 1024px) { body.skin-venice .footer-grid:has(.footer-cols) { grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr); gap: 40px; } body.skin-venice .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-venice .footer-links a, body.skin-venice .footer-cols li a, body.skin-venice .footer-title a, body.skin-venice .language-switcher a { min-height: 44px; }
  body.skin-venice .footer-title a { display: inline-flex; align-items: center; }
  body.skin-venice .footer-bottom a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  body.skin-venice .card .kicker { position: relative; }
  body.skin-venice .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-venice.theme-dark .sticky-cta:not([hidden]) { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border: 1px solid rgba(242, 110, 90, .6); border-radius: 14px; background: rgba(8, 17, 28, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 0 20px rgba(242, 110, 90, .45), 0 12px 32px rgba(0, 0, 0, .6); font-size: .8125rem; }
  body.skin-venice.theme-dark .sticky-cta .button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--vn-r-btn); background: linear-gradient(90deg, #2bbdee, #2aa5dc); color: #08111c; font-weight: 700; text-decoration: none; }
  body.skin-venice.theme-dark .sticky-terms, body.skin-venice.theme-dark .sticky-close { color: var(--vn-soft); }
  body.skin-venice.theme-dark .sticky-cta strong { color: var(--vn-sky); }
  body.skin-venice.theme-dark .sticky-cta:not([hidden]) { gap: 0 8px; padding: 8px 6px 4px 14px; }
  body.skin-venice .sticky-cta .sticky-close { min-width: 44px; min-height: 44px; }
  body.skin-venice .sticky-terms summary { display: inline-block; padding-block: 6px 20px; margin-bottom: -14px; }
  body.skin-venice .sticky-terms[open] summary { padding-bottom: 6px; margin-bottom: 0; }
  body.skin-venice .sticky-terms p { padding-bottom: 8px; padding-inline-end: 8px; }
  body.skin-venice .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-venice:has(.primary-nav.is-open) .sticky-cta { display: none; }
  body.skin-venice.theme-dark .site-header:has(.primary-nav.is-open) { background: #08111c; }
  body.skin-venice .menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
  body.skin-venice .menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
  body.skin-venice .menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }
  body.skin-venice .menu-toggle[aria-expanded="true"] { border-color: rgb(var(--cy) / .6); color: var(--vn-sky); }
  .js body.skin-venice .primary-nav { overscroll-behavior: contain; }
  .js body.skin-venice .primary-nav.is-open { height: calc(100vh - 64px); height: calc(100dvh - 64px); background: #08111c; }
  /* room under the footer, so the floating bar never covers the last line of the page */
  body.skin-venice:has(.sticky-cta:not([hidden])) .site-footer { padding-bottom: 150px; }
}

/* ------------------------------------------------------------------------------------------------------------------
   Home page (templates/partials/home/showcase-venice.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). Space Grotesk only for the lettering, section
   headings, names and numbers; everything that is read as a sentence is DM Sans.

   Buttons (one system, .vn-btn; the text's own a.button follows it, see "Buttons" above):
     primary    .vn-btn--primary    sky-blue fill, dark text, soft lift: tracked sign-up actions only. Arrow after the label.
     secondary  .vn-btn--secondary  sky outline, no glow at rest: moves inside the site ("See top apps", "All guides").
     tertiary   .vn-link            sky 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.
   ------------------------------------------------------------------------------------------------------------------ */
.vn-ico { flex-shrink: 0; }
.skin-venice.home-showcase main { min-height: 0; }
.vn-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(--vn-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; }
.vn-btn .vn-ico { transition: transform .2s ease; }
.vn-btn:hover .vn-ico { transform: translateX(3px); }
.vn-btn--primary { font-weight: 700; }
.vn-btn--secondary { background: rgb(8 17 28 / .6); color: var(--vn-sky); border-color: rgb(var(--cy) / .7); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.vn-btn--secondary:hover { background: rgb(var(--cy) / .12); border-color: var(--vn-sky); color: var(--vn-sky); box-shadow: var(--vn-ring-sky); }
.vn-link { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: .9375rem; line-height: 1.35; font-weight: 600; color: var(--vn-sky); text-decoration: none; transition: color .15s ease; }
.vn-link:hover { color: var(--vn-coral); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .vn-btn { width: auto; min-width: 200px; max-width: 320px; } }
@media (max-width: 639px) { .vn-btn { padding-inline: 16px; } }

/* Hero: the Pacific at dusk. A setting sun behind the lettering, what the page is and the two actions on the dark sky;
   then the waterline with the sunset glow above it and the sea below it, two palm silhouettes, and search and topics on
   the water. Sky glow, sea and palms are tied to the waterline, so the composition is the same at every width and in
   both languages. Drawn with CSS and two tiny SVG files; everything is positioned inside the hero box, so nothing
   moves while the page loads. */
.vn-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.vn-scene { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #08111c 0, #0a1a2c 240px, #0d2238 520px, #0d2238 100%); }
.vn-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent, #08111c); }
/* The land: a zero-height anchor in the text column whose bottom edge is the waterline, drawn full width behind the text. */
.vn-land { position: relative; z-index: -1; align-self: stretch; height: 0; margin-top: 72px; }
.vn-land > span { position: absolute; display: block; left: 50%; width: 100vw; margin-left: -50vw; }
.vn-haze { bottom: 0; height: 280px; background: linear-gradient(to top, rgb(242 110 90 / .62) 0, rgb(242 110 90 / .3) 46px, rgb(60 120 160 / .16) 130px, transparent 280px); }
.vn-sea { top: 100%; height: 1400px; background: repeating-linear-gradient(180deg, transparent 0, transparent 6px, rgb(var(--cy) / .13) 6px, rgb(var(--cy) / .13) 7px), linear-gradient(180deg, #1a5b7e 0, #124263 70px, #0d2c46 190px, #0a1c2e 340px, #08111c 520px); }
.vn-land > .vn-glint { top: 100%; left: 50%; width: min(46vw, 300px); margin-left: calc(min(46vw, 300px) / -2); height: 300px; opacity: .7; filter: blur(10px); background: linear-gradient(to bottom, rgb(250 222 160 / .85), rgb(242 110 90 / .5) 45%, transparent); }
.vn-land > .vn-wave { top: 100%; width: 200vw; margin-left: -100vw; height: 26px; margin-top: -10px; background: url("../../img/skins/venice/wave.svg") 0 0 / 50% 100% repeat-x; animation: vn-drift 18s linear infinite; } /* motion audit 20 Oct: one screen width per 18s, as the original */
@keyframes vn-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Motion audit 20 Oct: hero text fades up once (not the whole page: that would delay the largest paint) */
.vn-hero-in > .vn-pill, .vn-hero-in > .vn-wordmark, .vn-hero-in > .vn-wordmark-sub, .vn-hero-in > .vn-desc { animation: vn-fade-up .5s ease-out both; }
@keyframes vn-fade-up { from { opacity: .01; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Palms: rooted below the hero's lower edge, their crowns cross the waterline. */
.vn-land > .vn-palm { --h: clamp(380px, 46vw, 660px); top: auto; bottom: calc(var(--h) * -.62); left: calc(50% - 50vw + 3vw); width: auto; margin-left: 0; height: var(--h); aspect-ratio: 120 / 320; background: url("../../img/skins/venice/palm.svg") center / 100% 100% no-repeat; opacity: .94; }
.vn-land > .vn-palm-2 { --h: clamp(330px, 40vw, 580px); left: auto; right: calc(50% - 50vw + 4vw); transform: scaleX(-1); opacity: .88; }
.vn-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 44px; padding-bottom: 72px; }
.vn-hero-in > * { margin-bottom: 0; }
.vn-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 16px; border: 1px solid rgb(var(--cy) / .5); border-radius: 999px; background: rgb(8 17 28 / .9); color: var(--vn-sky); font-size: .75rem; line-height: 1.34; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
/* The lettering: coral to sand to sky, as on the original, with the sun behind it. A dark edge keeps the letters
   readable where they cross the sun. */
.vn-wordmark { position: relative; margin: 14px 0 0; font-family: var(--display); font-weight: 700; font-size: min(21vw, 5.75rem); line-height: .9; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.vn-wordmark::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 1.95em; aspect-ratio: 1; transform: translate(-50%, -47%); border-radius: 50%; background: linear-gradient(180deg, #f7c96e 0%, #f08a52 55%, #ee5f52 100%); box-shadow: 0 0 60px rgb(var(--pk) / .5), 0 0 140px rgb(var(--or) / .28); }
.vn-wordmark > span { display: inline-block; padding: .04em .02em; background: linear-gradient(180deg, #f26e5a 4%, #f7c96e 52%, #2bbdee 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 0 rgb(8 17 28 / .7)) drop-shadow(0 0 10px rgb(8 17 28 / .55)); }
.vn-wordmark-sub { position: relative; margin: 10px 0 0; padding: 4px 14px; border-radius: 999px; background: rgb(8 17 28 / .72); font-family: var(--display); font-weight: 600; font-size: .75rem; line-height: 1.5; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: var(--vn-cream); }
.vn-desc { margin-top: 28px; max-width: 46rem; color: var(--vn-soft); font-size: 1rem; line-height: 1.55; }
.vn-desc p { margin: 12px auto 0; max-width: 36rem; color: #d3dde6; text-wrap: pretty; }
body.skin-venice .vn-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.12; letter-spacing: -.015em; color: var(--vn-cream); text-wrap: balance; }
.vn-title-rest { display: block; margin-top: 8px; font-size: .62em; line-height: 1.25; letter-spacing: -.005em; background: linear-gradient(90deg, #2bbdee, #62b5dc 45%, #f4806c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #62b5dc; }
.vn-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 26rem; margin-top: 24px; }
.vn-promo { display: flex; flex-direction: column; align-items: center; margin-top: 16px; max-width: 100%; }
.vn-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, .9); text-wrap: balance; }
.vn-promo-line strong { color: #fff; font-weight: 600; }
/* The code chip: the code itself in white, a divider, then the quiet "copy" control. */
.vn-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(--vn-r-btn); background: rgb(8 17 28 / .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; }
.vn-code:hover { border-color: var(--vn-sky); background: rgb(var(--cy) / .1); }
body.skin-venice .vn-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-venice .vn-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/venice/copy.svg") 10px center / 14px 14px no-repeat; color: var(--vn-sky); font-family: var(--sans); font-size: .75rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
body.skin-venice .vn-copy:hover { text-decoration: underline; }
body.skin-venice .vn-copy.is-copied { background-color: transparent; color: #7be3b0; }
.vn-terms { margin: 4px 0 0; font-family: var(--sans); font-size: .75rem; line-height: 1.5; color: var(--vn-soft); text-align: center; }
.vn-terms summary { padding: 4px 0; text-decoration-color: rgba(180, 194, 208, .45); cursor: pointer; }
.vn-terms summary:hover { color: #fff; }
.vn-terms p { margin: 2px auto 4px; max-width: 46rem; color: var(--vn-soft); }
.vn-promo .vn-terms[open] p { padding: 8px 12px; border-radius: 10px; background: rgb(8 17 28 / .82); }
.vn-disclosure { max-width: 34rem; margin: 2px 0 0; font-size: .75rem; line-height: 1.5; color: #c3cfda; text-wrap: pretty; }
.vn-explore { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 44px; }
.vn-search { position: relative; width: 100%; max-width: 30rem; }
.vn-search input { width: 100%; height: 48px; padding: 0 52px 0 46px; border: 1px solid rgb(var(--cy) / .55); border-radius: 999px; background: rgb(8 17 28 / .88); color: #fff; font-size: 1rem; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; }
.vn-search input::placeholder { color: var(--vn-soft); opacity: 1; }
.vn-search input:focus { border-color: var(--vn-sky); outline: none; box-shadow: 0 0 0 2px rgb(var(--cy) / .6), var(--vn-ring-sky); }
.vn-search-ico { position: absolute; left: 17px; top: 50%; margin-top: -9px; color: var(--vn-sky); pointer-events: none; }
.vn-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(--vn-sky); cursor: pointer; }
.vn-search button:hover { color: var(--vn-coral); }
.vn-topics, .vn-closing .box > p:last-child { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; }
.vn-topics a, body.skin-venice .vn-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(74 104 140 / .8); border-radius: 999px; background: rgb(8 17 28 / .82); box-shadow: none; color: rgba(255, 255, 255, .92); 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; }
.vn-topics a:hover, body.skin-venice .vn-closing .box a.button:hover { color: var(--vn-sky); border-color: rgb(var(--cy) / .7); background: rgb(8 17 28 / .92); transform: none; box-shadow: var(--vn-ring-sky); }
@media (min-width: 640px) {
  .vn-hero-in { padding-top: clamp(56px, 9vh, 96px); padding-bottom: 88px; }
  .vn-land { margin-top: 84px; }
  .vn-wordmark { font-size: 7.5rem; }
  .vn-wordmark-sub { font-size: 1rem; }
  body.skin-venice .vn-title { font-size: 2.25rem; }
  .vn-desc p { font-size: 1.0625rem; }
  .vn-hero-cta { flex-direction: row; justify-content: center; max-width: none; }
  .vn-explore { padding-top: 52px; }
}
@media (min-width: 768px) { .vn-wordmark { font-size: 9.5rem; } .vn-wordmark-sub { font-size: 1.125rem; line-height: 1.4; } }
@media (min-width: 1024px) { body.skin-venice .vn-title { font-size: 2.75rem; } }
/* Phones: the palms stand closer to the edges and lower, clear of the text */
@media (max-width: 639px) { .vn-land > .vn-palm { left: calc(50% - 50vw - 34px); bottom: calc(var(--h) * -.7); } .vn-land > .vn-palm-2 { left: auto; right: calc(50% - 50vw - 30px); } }
@media (max-width: 359px) { body.skin-venice .vn-title { font-size: 1.5rem; } .vn-wordmark { font-size: 19vw; } }
/* Small phones (iPhone SE size and below): tighter, so the first button is on the first screen */
@media (max-width: 639px) and (max-height: 700px) {
  .vn-hero-in { padding-top: 20px; }
  .vn-wordmark { margin-top: 10px; }
  .vn-desc { margin-top: 16px; }
  .vn-desc p { margin-top: 8px; }
  .vn-hero-cta { margin-top: 16px; }
}
/* Phones held sideways and other very low screens: a smaller sign so the buttons show sooner */
@media (max-height: 480px) and (orientation: landscape) {
  .vn-hero-in { padding-top: 28px; }
  .vn-wordmark { font-size: 5rem; }
  .vn-wordmark-sub { font-size: .875rem; }
  body.skin-venice .vn-title { font-size: 1.75rem; }
  .vn-land { margin-top: 64px; }
}
/* Short answer and the opening text */
.vn-answer, .vn-lead { max-width: 46rem; margin-inline: auto; }
body.skin-venice .vn-answer { padding: 20px; border: 1px solid rgb(var(--cy) / .3); border-radius: var(--vn-r-card); background: rgba(14, 27, 43, .6); font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .9); }
body.skin-venice .vn-answer p { margin: 0; }
body.skin-venice .vn-answer p + p { margin-top: 12px; }
body.skin-venice .vn-answer .label { margin: 0 0 10px; }
body.skin-venice .vn-answer .label + p { margin-top: 0; }
body.skin-venice .vn-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(--vn-line); font-size: .9375rem; line-height: 1.35; }
body.skin-venice .vn-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(--vn-sky); }
body.skin-venice .vn-answer > p:last-child:has(> a:first-child) a:hover { color: var(--vn-coral); text-decoration: underline; text-underline-offset: 3px; }
.vn-lead { margin-top: 20px; color: var(--vn-soft); font-size: 1rem; }
@media (min-width: 640px) { body.skin-venice .vn-answer { padding: 28px 32px; } }
@media (max-width: 767px), (pointer: coarse) { body.skin-venice .vn-answer > p:last-child:has(> a:first-child) a { min-height: 44px; } body.skin-venice .vn-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 */
.vn-sections .sc-sec { border-top: 0; }
body.skin-venice .vn-head > :last-child, body.skin-venice .sc-prose .sc-sec > :last-child { margin-bottom: 0; }
body.skin-venice .sc-prose { font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
body.skin-venice .sc-prose .label, body.skin-venice .vn-answer .label, body.skin-venice .vn-closing .box .label, body.skin-venice .vn-faq .faq > h2::before { font-family: var(--sans); font-size: .75rem; line-height: 1.34; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--vn-sky); text-shadow: none; }
body.skin-venice .sc-prose .label { margin: 0 0 12px; }
body.skin-venice .sc-prose h2 { max-width: 22em; margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
body.skin-venice .sc-prose h2 .vn-accent { color: var(--vn-coral); text-shadow: var(--vn-glow-coral); }
body.skin-venice .sc-prose h2 .vn-accent--sky { color: var(--vn-sky); text-shadow: var(--vn-glow-sky); }
body.skin-venice .sc-prose .sc-sec > h2 + p:not(.label), body.skin-venice .vn-head > h2 + p { max-width: 38rem; margin: 12px 0 0; font-size: 1rem; line-height: 1.55; color: var(--vn-soft); }
body.skin-venice .sc-prose .sc-sec > p:not(.label), body.skin-venice .sc-prose .sc-col > p { color: var(--vn-soft); }
body.skin-venice .sc-prose h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; color: #fff; }
body.skin-venice .sc-prose a:not(.button) { color: var(--vn-sky); }
body.skin-venice .sc-prose a:not(.button):hover { color: var(--vn-coral); }
@media (min-width: 640px) { body.skin-venice .sc-prose h2 { font-size: 2.125rem; line-height: 1.15; } body.skin-venice .sc-prose .sc-sec > h2 + p:not(.label), body.skin-venice .vn-head > h2 + p { font-size: 1.125rem; } }
@media (min-width: 1024px) { body.skin-venice .sc-prose h2 { font-size: 2.5rem; line-height: 1.1; } }

/* Price board: one designed card per market. The first market is the featured one (full width, large prices); the
   others stand three across. Each card: the market (a tracked link), the outcome that leads with a bar at its price,
   and one tracked price chip per exchange ("Trade on …" and the price), in the order of the listed partners. */
.vn-head-row { display: flex; flex-direction: column; gap: 20px; }
.vn-markets-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--vn-soft); }
.vn-markets-meta > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border: 1px solid rgb(var(--cy) / .35); border-radius: 999px; background: rgb(8 17 28 / .6); color: #fff; font-weight: 500; }
.vn-markets-meta > span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vn-sky); box-shadow: 0 0 8px var(--vn-sky); }
.vn-market-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vn-market { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--vn-line); border-radius: var(--vn-r-card); background: rgb(11 22 36 / .82); transition: border-color var(--vn-ease), transform var(--vn-ease), box-shadow var(--vn-ease); }
.vn-market:hover, .vn-market:focus-within { border-color: rgb(var(--cy) / .5); box-shadow: 0 14px 34px -18px rgb(0 0 0 / .8); }
.vn-market p { margin: 0; }
.vn-market-title { font-family: var(--display); font-size: 1.125rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.vn-market-title a { display: block; color: #fff; text-decoration: none; transition: color var(--vn-ease); }
.vn-market-title a:hover { color: var(--vn-sky); }
.vn-market-lead { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vn-market-outcome { display: flex; align-items: center; gap: 8px; font-size: .9375rem; line-height: 1.4; color: var(--vn-soft); }
.vn-market-outcome::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--vn-sand); }
.vn-market-bar { display: block; height: 6px; border-radius: 999px; background: rgb(var(--cy) / .12); overflow: hidden; }
.vn-market-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vn-coral), var(--vn-sand) 55%, var(--vn-sky)); }
.vn-market-venues { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.vn-venue { display: flex; align-items: center; gap: 4px 10px; min-height: 48px; padding: 6px 14px; border: 1px solid rgb(var(--cy) / .3); border-radius: 12px; background: rgb(var(--cy) / .06); color: #fff; text-decoration: none; transition: border-color var(--vn-ease), box-shadow var(--vn-ease), background-color var(--vn-ease); }
.vn-venue:first-child { border-color: rgb(var(--cy) / .5); background: rgb(var(--cy) / .1); }
.vn-venue:hover { border-color: var(--vn-sky); background: rgb(var(--cy) / .16); box-shadow: var(--vn-ring-sky); color: #fff; }
.vn-venue-name { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.3; font-weight: 600; color: rgba(255, 255, 255, .92); }
.vn-venue strong { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; color: var(--vn-sky); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-venue strong::after { content: "↗"; font-family: var(--sans); font-size: .875rem; font-weight: 600; color: rgb(var(--cy) / .8); transition: transform var(--vn-ease); }
.vn-venue:hover strong::after { transform: translate(2px, -2px); }
.vn-venue.is-none strong { color: var(--vn-soft); }
.vn-venue small { order: 3; font-size: .75rem; line-height: 1.4; white-space: nowrap; }
.vn-venue small.is-up { color: #5dffb0; } .vn-venue small.is-down { color: #ff9d8c; }
.vn-markets-terms { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 12px; }
.vn-markets-terms .vn-terms { text-align: start; margin: 0; }
.vn-markets-terms .vn-terms p { margin-inline: 0; }
/* The featured market: a sunset edge and a glow in its corner, larger type. */
.vn-market--lead { position: relative; overflow: hidden; border-color: transparent; background: radial-gradient(70% 130% at 100% 0, rgb(var(--or) / .16), transparent 60%) padding-box, linear-gradient(#0c1a2b, #0c1a2b) padding-box, linear-gradient(120deg, rgb(var(--pk) / .85), rgb(var(--or) / .7) 40%, rgb(var(--cy) / .8)) border-box; }
.vn-market--lead:hover, .vn-market--lead:focus-within { border-color: transparent; }
.vn-market--lead .vn-market-title { font-size: 1.375rem; line-height: 1.2; }
@media (min-width: 640px) {
  .vn-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .vn-markets-meta { flex: 0 0 auto; justify-content: flex-end; padding-bottom: 6px; }
  .vn-market-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .vn-market { padding: 24px; }
  .vn-market--lead { grid-column: 1 / -1; }
  .vn-market--lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title venues" "lead venues"; gap: 14px 40px; align-items: center; padding: 32px; }
  .vn-market--lead .vn-market-title { grid-area: title; align-self: end; font-size: 1.75rem; }
  .vn-market--lead .vn-market-lead { grid-area: lead; align-self: start; }
  .vn-market--lead .vn-market-outcome { font-size: 1.0625rem; }
  .vn-market--lead .vn-market-venues { grid-area: venues; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vn-market--lead .vn-venue { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 96px; padding: 14px 18px; }
  .vn-market--lead .vn-venue-name { flex: 0 0 auto; }
  .vn-market--lead .vn-venue strong { font-size: 2rem; }
}
@media (min-width: 640px) and (max-width: 1023px) { .vn-market:last-child:nth-child(even) { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .vn-market-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vn-market { grid-column: span 2; }
  .vn-market.vn-market--wide { grid-column: span 3; }
  .vn-market.vn-market--lead { grid-column: 1 / -1; padding: 36px 40px; }
  .vn-market--lead .vn-market-title { font-size: 2rem; }
  .vn-market--lead .vn-venue strong { font-size: 2.25rem; }
}

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

/* "Two ways to trade": the two exchanges side by side, each an offer panel (where it is valid, the name, the offer in
   large sand type, one line about the app, the button, code and terms). The first panel is the sunset one (a sun in
   its corner), the second the ocean one. The optional picture lies across the top. */
.vn-eyebrow { margin: 0; font-family: var(--sans); font-size: .75rem; line-height: 1.34; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vn-sky); }
.vn-duo-pic { display: block; margin-top: 28px; border: 1px solid var(--vn-line); border-radius: var(--vn-r-card); overflow: hidden; background: #0e1b2b; }
.vn-duo-pic img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; transition: filter var(--vn-ease); }
a.vn-duo-pic:hover img { filter: brightness(1.08); }
.vn-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.vn-duo-pic + .vn-duo { margin-top: 16px; }
.vn-way { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px 20px; border: 1px solid transparent; border-radius: 20px; background: linear-gradient(#0c1a2b, #0c1a2b) padding-box, linear-gradient(140deg, rgb(var(--or) / .85), rgb(var(--pk) / .7) 45%, rgb(52 92 178 / .5)) border-box; transition: box-shadow var(--vn-ease), transform var(--vn-ease); }
.vn-way--2 { background: linear-gradient(#0b1a2c, #0b1a2c) padding-box, linear-gradient(140deg, rgb(var(--cy) / .85), rgb(52 92 178 / .55) 55%, rgb(var(--cy) / .35)) border-box; }
.vn-way:hover, .vn-way:focus-within { box-shadow: 0 18px 44px -22px rgb(var(--pk) / .55); }
.vn-way--2:hover, .vn-way--2:focus-within { box-shadow: 0 18px 44px -22px rgb(var(--cy) / .55); }
.vn-way > :not(.vn-way-art) { position: relative; }
/* the corner art: a low sun for the first panel, a swell for the second (drawn inside a clipped corner box) */
.vn-way-art { position: absolute; right: 0; top: 0; width: 170px; height: 140px; overflow: hidden; border-radius: 0 20px 0 0; pointer-events: none; }
.vn-way-art::before { content: ""; position: absolute; right: -40px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(180deg, #f7c96e, #f08a52 60%, #ee5f52); opacity: .9; -webkit-mask: linear-gradient(#000 0 56%, transparent 56% 59%, #000 59% 68%, transparent 68% 72%, #000 72% 80%, transparent 80% 85%, #000 85% 91%, transparent 91% 97%, #000 97%); mask: linear-gradient(#000 0 56%, transparent 56% 59%, #000 59% 68%, transparent 68% 72%, #000 72% 80%, transparent 80% 85%, #000 85% 91%, transparent 91% 97%, #000 97%); }
.vn-way--2 .vn-way-art { left: 0; top: auto; bottom: 0; width: auto; height: 64px; border-radius: 0 0 20px 20px; opacity: .4; background: url("../../img/skins/venice/wave.svg") 0 100% / 520px 26px repeat-x, url("../../img/skins/venice/wave.svg") -180px 70% / 720px 30px repeat-x, linear-gradient(to top, rgb(var(--cy) / .22), transparent); }
.vn-way--2 .vn-way-art::before { content: none; }
.vn-way p { margin: 0; }
.vn-way-text { flex: 1; min-width: 0; }
.vn-way--1 .vn-eyebrow, .vn-way--1 .vn-way-name { display: block; padding-inline-end: 84px; }
.vn-way-name { font-weight: 700; }
.vn-way-title { margin-top: 10px !important; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; color: #fff; }
.vn-way-title span { display: block; margin-top: 6px; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.015em; color: var(--vn-sand); text-wrap: balance; }
.vn-way--2 .vn-way-title span { color: #8fdcf7; }
.vn-way-note { margin-top: 10px !important; font-size: 1rem; line-height: 1.45; color: var(--vn-soft); }
.vn-way-act { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
  .vn-way { padding: 32px; }
  .vn-way-title span { font-size: 2rem; }
  .vn-way--1 .vn-way-text { padding-inline-end: 120px; }
  .vn-way--1 .vn-eyebrow, .vn-way--1 .vn-way-name { padding-inline-end: 0; }
  .vn-way-act { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
  .vn-way-act .vn-btn { flex: 0 0 auto; }
  .vn-way-act .vn-fine { flex: 1 1 220px; align-items: flex-start; }
  .vn-way-act .vn-usecode { min-height: 48px; }
  .vn-way-act .vn-usecode .vn-code { flex: 0 1 auto; }
  .vn-way-act .vn-terms { text-align: start; } .vn-way-act .vn-terms p { margin-inline: 0; }
}
@media (min-width: 900px) { .vn-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 900px) and (max-width: 1199px) { .vn-way-title span { font-size: 1.75rem; } }

/* Top apps: the ranked cards */
.vn-apps-block { scroll-margin-top: 80px; }
/* code and terms under a sign-up button */
.vn-fine { display: flex; flex-direction: column; gap: 2px; }
.vn-usecode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--vn-soft); }
.vn-usecode .vn-code { flex: 1 1 200px; justify-content: space-between; }
.vn-fine .vn-terms { margin: 0; text-align: start; }
.vn-fine .vn-terms p { margin-inline: 0; }
.vn-apps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.vn-app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px 20px; border: 1px solid var(--vn-line); border-radius: var(--vn-r-card); background: rgba(14, 27, 43, .6); transition: border-color var(--vn-ease), box-shadow var(--vn-ease); }
.vn-app:hover, .vn-app:focus-within { border-color: rgb(var(--pk) / .55); }
/* The first card is the pick: a coral-to-sky edge. */
.vn-app--first { border-color: transparent; background: linear-gradient(#0b1624, #0b1624) padding-box, linear-gradient(120deg, rgb(var(--pk) / .9), rgb(52 92 178 / .6) 45%, rgb(var(--cy) / .85)) border-box; }
.vn-app--first:hover, .vn-app--first:focus-within { border-color: transparent; box-shadow: 0 0 28px rgb(var(--pk) / .22); }
.vn-rank { font-weight: 700; 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(--vn-coral), #7fa3e6); box-shadow: 0 0 0 4px var(--vn-bg); color: #08111c; font-family: var(--display); font-size: 1.125rem; line-height: 1; }
.vn-app p { margin: 0; }
body.skin-venice .vn-app-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.vn-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); }
.vn-app-rating strong { font-weight: 700; color: #fff; }
/* Five outlined stars with the filled ones on top, cut at the rating (4.8 = 96%). */
.vn-app-stars { display: inline-block; width: 90px; height: 18px; background: url("../../img/skins/venice/stars-off.svg") 0 50% / 90px 18px no-repeat; }
.vn-app-stars-on { display: block; height: 100%; background: url("../../img/skins/venice/stars-on.svg") 0 50% / 90px 18px no-repeat; }
.vn-app-tagline { margin-top: 10px !important; max-width: 30rem; font-size: 1rem; line-height: 1.45; color: var(--vn-soft); text-wrap: pretty; }
.vn-app-points { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 10px; }
.vn-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; }
.vn-app-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 16px; height: 16px; background: url("../../img/skins/venice/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. */
.vn-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)); }
.vn-app-bonus { margin-top: -6px !important; font-family: var(--display); font-weight: 700; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.vn-app-offer .vn-btn { width: 100%; max-width: none; min-width: 0; padding-inline: 12px; }
.vn-app-more { display: flex; }
body.skin-venice .vn-tail { margin-top: 32px; }
body.skin-venice .vn-tail > p:has(> a.button:only-child) { margin: 0; text-align: center; }
body.skin-venice .vn-tail .sc-linklist { margin-bottom: 24px; }
@media (min-width: 640px) {
  .vn-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; }
  .vn-app-id { grid-area: id; } .vn-app-points { grid-area: points; } .vn-app-offer { grid-area: offer; align-self: start; padding: 20px; } .vn-app-more { grid-area: more; align-self: end; }
  body.skin-venice .vn-app-name { font-size: 1.5rem; }
  .vn-app--first .vn-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 */
}
@media (min-width: 1024px) {
  .vn-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; }
  .vn-app--plain { grid-template-columns: minmax(0, 1fr) 344px; grid-template-areas: "id offer" "more offer"; }
  .vn-app-points { padding-top: 6px; }
  .vn-app-bonus { font-size: 1.25rem; }
}

/* Sections of the home page text */
body.skin-venice .vn-sections .sc-sec--boxes { display: block; }
body.skin-venice .sc-sec--boxes > .box { position: relative; overflow: hidden; margin: 0; padding: 24px 20px; border: 1px solid var(--vn-line); border-radius: var(--vn-r-card); background: rgba(14, 27, 43, .5); }
body.skin-venice .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-venice .sc-sec--boxes > .box > * { position: relative; }
body.skin-venice .sc-sec--boxes > .box h2 { margin: 0; font-size: 1.75rem; line-height: 1.2; }
body.skin-venice .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(--vn-soft); }
body.skin-venice .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(--vn-sky); font-size: .875rem; line-height: 1.43; }
body.skin-venice .sc-sec--boxes > .box > a.button { margin: 24px 0 0; }
body.skin-venice .sc-sec--boxes > .box > ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
body.skin-venice .sc-sec--boxes > .box > ul > li { margin: 0; padding: 12px 0 12px 30px; border-top: 1px solid var(--vn-line); background: url("../../img/skins/venice/check.svg") 0 15px / 18px 18px no-repeat; font-size: 1rem; line-height: 1.45; color: #fff; }
body.skin-venice .sc-sec--boxes > .box > ul > li:first-child { border-top: 0; }
@media (min-width: 768px) {
  body.skin-venice .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-venice .sc-sec--boxes > .box > * { grid-column: 1; justify-self: start; }
  body.skin-venice .sc-sec--boxes > .box > ul { grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: stretch; margin: 0; }
  body.skin-venice .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-venice .vn-sections .sc-sec > .cards + p, body.skin-venice .vn-sections .sc-sec > .sc-linklist + p, body.skin-venice .vn-sections .sc-sec > p:has(> a:only-child) { max-width: none; margin-top: 32px; text-align: center; }
body.skin-venice .vn-tail a.button, body.skin-venice .vn-sections .sc-sec > p > a:only-child, body.skin-venice .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(--vn-r-btn); background: rgb(8 17 28 / .6); box-shadow: none; color: var(--vn-sky); 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-venice .vn-tail a.button:hover, body.skin-venice .vn-sections .sc-sec > p > a:only-child:hover, body.skin-venice .sc-sec--boxes > .box > a.button:hover { background: rgb(var(--cy) / .12); border-color: var(--vn-sky); color: var(--vn-sky); box-shadow: var(--vn-ring-sky); transform: none; }
@media (min-width: 640px) { body.skin-venice .vn-tail a.button, body.skin-venice .vn-sections .sc-sec > p > a:only-child, body.skin-venice .sc-sec--boxes > .box > a.button { width: auto; min-width: 200px; max-width: 320px; } }
/* Article cards written in the text (guides): the picture of the page they link to (or a drawn dusk where the page
   has none), a small category line, the headline, a blurb, an arrow. Rows without any picture are text cards. */
body.skin-venice .sc-prose .sc-sec > .cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
body.skin-venice .sc-prose .cards > .box { display: flex; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--vn-line); border-radius: var(--vn-r-card); background: rgb(11 22 36 / .9); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
body.skin-venice .sc-prose .cards > .box:hover { border-color: rgb(var(--cy) / .6); box-shadow: 0 16px 36px -20px rgb(0 0 0 / .85), var(--vn-ring-sky); transform: translateY(-3px); }
body.skin-venice .sc-prose .cards > .box > a { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0 0 20px; color: #fff; text-decoration: none; }
body.skin-venice .sc-prose .cards > .box > a:not(:has(img, .vn-card-art)) { padding-top: 24px; }
body.skin-venice .sc-prose .cards > .box > a > :is(p, h3) { margin-inline: 22px; }
body.skin-venice .sc-prose .cards > .box > a > picture > img, body.skin-venice .sc-prose .cards > .box > a > img, .vn-card-art { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 20px; border: 0; border-radius: 0; transition: transform .5s ease; }
/* drawn stand-in for a page without a picture: dusk sky, low sun, sea lines */
.vn-card-art { background: repeating-linear-gradient(180deg, transparent 0 5px, rgb(var(--cy) / .22) 5px 6px) 0 100% / 100% 24% no-repeat, linear-gradient(180deg, #1a5b7e, #0d2c46) 0 100% / 100% 24% no-repeat, radial-gradient(circle at 50% 76%, #f7c96e 0, #f08a52 12%, #ee5f52 15%, rgb(238 95 82 / .35) 15.5%, transparent 36%), linear-gradient(180deg, #0b1b2e, #17365a 50%, #a7584f 76%); }
body.skin-venice .sc-prose .cards > .box:hover > a img { transform: scale(1.04); }
body.skin-venice .sc-prose .cards > .box > a > p { margin-block: 10px 0; font-size: .9375rem; line-height: 1.5; color: var(--vn-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
body.skin-venice .sc-prose .cards > .box > a > p:first-of-type { display: block; margin-block: 0; font-size: .75rem; line-height: 1.34; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vn-coral); }
body.skin-venice .sc-prose .cards > .box > a::after { content: "→"; align-self: flex-end; margin: auto 22px 0; padding-top: 12px; font-size: 1.125rem; line-height: 1; color: var(--vn-sky); transition: transform .2s ease; }
body.skin-venice .sc-prose .cards > .box:hover > a::after { transform: translateX(4px); }
body.skin-venice .sc-prose .cards > .box h3 { margin-block: 8px 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; color: #fff; text-wrap: pretty; transition: color .2s ease; }
body.skin-venice .sc-prose .cards > .box:hover h3 { color: var(--vn-sky); }
@media (min-width: 640px) { body.skin-venice .sc-prose .sc-sec > .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { body.skin-venice .sc-prose .sc-sec > .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.skin-venice .sc-prose .sc-sec > .cards:has(> .box:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* three cards on a tablet: the third lies across, picture beside the text */
@media (min-width: 640px) and (max-width: 1023px) {
  body.skin-venice .sc-prose .cards > .box:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.skin-venice .sc-prose .cards > .box:last-child:nth-child(odd) > a:has(img, .vn-card-art) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; align-content: center; padding: 0; }
  body.skin-venice .sc-prose .cards > .box:last-child:nth-child(odd) > a:has(img, .vn-card-art) > :is(img, picture, .vn-card-art) { grid-row: 1 / span 5; height: 100%; margin: 0; }
  body.skin-venice .sc-prose .cards > .box:last-child:nth-child(odd) > a:has(img, .vn-card-art) > p:first-of-type { margin-top: 24px; }
  body.skin-venice .sc-prose .cards > .box:last-child:nth-child(odd) > a:has(img, .vn-card-art)::after { grid-column: 2; justify-self: end; margin-bottom: 20px; }
}
/* Guide links: cards with the title and an arrow */
body.skin-venice .sc-prose ul.sc-linklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 32px 0 0; }
body.skin-venice .sc-prose .sc-linklist > li { display: flex; margin: 0; padding: 0; border: 0; }
body.skin-venice .sc-prose .sc-linklist > li > a { position: relative; flex: 1; display: block; padding: 24px 56px 24px 24px; border: 1px solid var(--vn-line); border-radius: var(--vn-r-card); background: rgba(14, 27, 43, .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-venice .sc-prose .sc-linklist > li > a::after { content: "→"; position: absolute; right: 24px; bottom: 22px; font-family: var(--sans); color: var(--vn-coral); transition: transform .2s ease; }
body.skin-venice .sc-prose .sc-linklist > li > a:hover { border-color: rgb(var(--pk) / .6); box-shadow: var(--vn-ring-coral); color: var(--vn-coral); }
body.skin-venice .sc-prose .sc-linklist > li > a:hover::after { transform: translateX(4px); }
@media (min-width: 640px) { body.skin-venice .sc-prose ul.sc-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body.skin-venice .sc-prose ul.sc-linklist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Questions: the heading on the left with the horizon mark, one card per question on the right */
.vn-faq { padding-block: var(--vn-sec); }
body.skin-venice .vn-faq .faq { max-width: 52rem; margin: 0 auto; padding: 0; border: 0; }
body.skin-venice .vn-faq .faq > h2 { position: relative; margin: 0 0 32px; padding-top: 52px; font-family: var(--display); font-weight: 700; font-size: var(--vn-h2); line-height: 1.08; letter-spacing: -.02em; color: #fff; text-align: center; text-wrap: balance; }
body.skin-venice .vn-faq .faq > h2 .vn-accent { color: var(--vn-coral); }
body.skin-venice .vn-faq .faq details { margin: 0 0 12px; padding: 0; border: 1px solid var(--vn-line); border-radius: 14px; background: rgb(11 22 36 / .85); transition: border-color var(--vn-ease), background-color var(--vn-ease); }
body.skin-venice .vn-faq .faq details:last-of-type { margin-bottom: 0; }
body.skin-venice .vn-faq .faq details:hover { border-color: rgb(var(--cy) / .45); }
body.skin-venice .vn-faq .faq details[open] { border-color: rgb(var(--cy) / .55); background: linear-gradient(180deg, rgb(var(--cy) / .08), rgb(11 22 36 / .85) 70%); }
body.skin-venice .vn-faq .faq summary { position: relative; list-style: none; display: flex; align-items: center; min-height: 64px; padding: 14px 64px 14px 20px; border: 0; font-family: var(--display); font-size: 1.0625rem; line-height: 1.35; font-weight: 700; letter-spacing: -.005em; color: #fff; cursor: pointer; transition: color .15s ease; }
body.skin-venice .vn-faq .faq summary::-webkit-details-marker { display: none; }
/* plus in a ring; it turns into a minus when the answer is open */
body.skin-venice .vn-faq .faq summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 1px solid rgb(var(--cy) / .5); border-radius: 50%; background: linear-gradient(var(--vn-sky), var(--vn-sky)) center / 12px 2px no-repeat, linear-gradient(var(--vn-sky), var(--vn-sky)) center / 2px 12px no-repeat, rgb(var(--cy) / .08); transition: transform .25s ease, background-size .25s ease, border-color .2s ease; }
body.skin-venice .vn-faq .faq details[open] > summary::after { transform: rotate(180deg); background-size: 12px 2px, 2px 0, auto; border-color: var(--vn-sky); }
body.skin-venice .vn-faq .faq summary:hover, body.skin-venice .vn-faq .faq details[open] > summary { color: var(--vn-sky); }
body.skin-venice .vn-faq .faq summary:focus-visible { outline-offset: -2px; border-radius: 14px; }
body.skin-venice .vn-faq .faq-answer { padding: 0 20px 20px; border: 0; font-size: 1rem; line-height: 1.65; color: #c9d5e0; }
body.skin-venice .vn-faq .faq-answer > :first-child { margin-top: 0; } body.skin-venice .vn-faq .faq-answer > :last-child { margin-bottom: 0; }
body.skin-venice .vn-faq .faq-answer a { color: var(--vn-sky); }
@media (min-width: 640px) { body.skin-venice .vn-faq .faq summary { padding-inline-start: 24px; font-size: 1.125rem; } body.skin-venice .vn-faq .faq-answer { padding: 0 64px 24px 24px; } }
@media (min-width: 1024px) {
  body.skin-venice .vn-faq .faq { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: 72px; align-items: start; }
  body.skin-venice .vn-faq .faq > h2 { grid-column: 1; grid-row: 1 / span 30; margin: 0; text-align: start; }
  body.skin-venice .vn-faq .faq > h2::before { left: 0; transform: none; }
  body.skin-venice .vn-faq .faq > h2::after { left: 0; right: auto; width: 220px; background: linear-gradient(90deg, rgb(var(--or) / .8), rgb(var(--cy) / .5) 60%, transparent); }
  body.skin-venice .vn-faq .faq details { grid-column: 2; }
}

/* Closing panel: the beach at dusk once more. The page's last links as pills, then the first partner's offer with
   the one filled button, the sun going down behind the water under it. */
.vn-end { position: relative; overflow: hidden; isolation: isolate; margin-top: 0; text-align: center; }
.vn-end-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #08111c 0, #0b1a2c 30%, #132a45 62%, #3b3550 84%, #a7584f 100%); }
.vn-end-scene > span { position: absolute; display: block; left: 0; right: 0; }
.vn-end-sea { bottom: 0; height: 84px; background: url("../../img/skins/venice/wave.svg") 0 -8px / 720px 22px repeat-x, repeating-linear-gradient(180deg, transparent 0 6px, rgb(var(--cy) / .14) 6px 7px), linear-gradient(180deg, #1a5b7e 0, #124263 40%, #0b2338 100%); }
.vn-end-scene > .vn-end-sun { left: 50%; right: auto; bottom: 84px; width: min(72vw, 340px); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: linear-gradient(180deg, #f7c96e 0, #f08a52 60%, #ee5f52 100%); box-shadow: 0 0 80px rgb(var(--pk) / .55), 0 0 160px rgb(var(--or) / .3); -webkit-mask: linear-gradient(#000 0 46%, transparent 46% 50%, #000 50% 62%, transparent 62% 67%, #000 67% 77%, transparent 77% 84%, #000 84% 91%, transparent 91%); mask: linear-gradient(#000 0 46%, transparent 46% 50%, #000 50% 62%, transparent 62% 67%, #000 67% 77%, transparent 77% 84%, #000 84% 91%, transparent 91%); }
.vn-end-scene::before, .vn-end-scene::after { content: ""; position: absolute; bottom: 30px; left: max(2vw, calc(50% - 600px)); height: clamp(220px, 30vw, 330px); aspect-ratio: 120 / 320; background: url("../../img/skins/venice/palm.svg") center / 100% 100% no-repeat; opacity: .95; }
.vn-end-scene::after { left: auto; right: max(3vw, calc(50% - 590px)); height: clamp(190px, 26vw, 290px); transform: scaleX(-1); }
.vn-end-in { display: flex; flex-direction: column; align-items: center; padding-block: var(--vn-sec) 290px; }
body.skin-venice .vn-closing { width: 100%; }
body.skin-venice .vn-closing .box { max-width: 46rem; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
body.skin-venice .vn-closing .box .label { margin: 0; justify-content: center; }
body.skin-venice .vn-closing .box .label::after { content: ""; flex: 0 0 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--vn-sand), var(--vn-coral)); }
body.skin-venice .vn-closing .box h3 { margin: 12px 0 0; font-size: var(--vn-h2); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
body.skin-venice .vn-closing .box h3 .vn-accent { color: var(--vn-sand); }
body.skin-venice .vn-closing .box > p:last-child { margin-top: 24px; }
.vn-end-offer { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 44rem; margin-top: 32px; padding: 24px 20px 14px; border: 1px solid rgb(var(--or) / .45); border-radius: 20px; background: rgb(8 17 28 / .86); }
.vn-end-line { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.vn-end-line strong { color: #fff; }
body.skin-venice .vn-end-line code.promo-code { padding: 2px 8px; font-size: .875rem; }
.vn-end-offer .vn-terms { margin: 0; }
.vn-offer-terms { padding-block: 24px; }
body.skin-venice .offer-terms { max-width: 46rem; margin: 0 auto; padding: 0; border: 0; font-size: .75rem; line-height: 1.5; color: var(--vn-soft); }
body.skin-venice.home-showcase .site-footer { margin-top: 0; }
@media (min-width: 640px) { .vn-end-in { padding-bottom: 300px; } .vn-end-offer { padding: 28px 32px 16px; } }
@media (max-width: 639px) { .vn-end-scene::before { left: -34px; } .vn-end-scene::after { right: -30px; } .vn-end-in { padding-bottom: 250px; } }

/* ------------------------------------------------------------------------------------------------------------------
   Bands and rhythm. Every block of the home page is a full-width band with the page column inside. Plain bands are
   the night sky; "sea" bands are a shade bluer with a horizon line on top and fine sea lines at the foot; the "dusk"
   band glows coral from above. Section headings are large, with an eyebrow that starts with a short sunset line; the
   centred ones carry the horizon mark (a half sun on a line).
   ------------------------------------------------------------------------------------------------------------------ */
body.skin-venice { --vn-h2: 2rem; }
@media (min-width: 640px) { body.skin-venice { --vn-h2: 2.5rem; --vn-sec: 80px; } }
@media (min-width: 1024px) { body.skin-venice { --vn-h2: 3rem; --vn-sec: 96px; } }
.vn-band { position: relative; }
.vn-band > .wrap.vn-sections > .sc-sec, .vn-band > .wrap.vn-block { padding-block: var(--vn-sec); }
.vn-markets-block > .wrap, .vn-duo-wrap > .wrap, .vn-apps-block > .wrap { padding-block: var(--vn-sec); }
.vn-duo-wrap > .wrap { padding-bottom: calc(var(--vn-sec) * .45); }
.vn-band--sea { background: linear-gradient(180deg, #0b1b2e 0, #0c2135 50%, #0a1a2b 100%); }
.vn-band--sea::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(var(--cy) / .55) 18%, rgb(var(--or) / .85) 50%, rgb(var(--cy) / .55) 82%, transparent) 0 0 / 100% 1px no-repeat, radial-gradient(50% 100% at 50% 0, rgb(var(--or) / .11), transparent 70%); }
.vn-band--sea::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 7px, rgb(var(--cy) / .1) 7px 8px); -webkit-mask: linear-gradient(to top, #000, transparent); mask: linear-gradient(to top, #000, transparent); }
.vn-band--sea > .wrap { position: relative; z-index: 1; }
.vn-band--dusk { background: radial-gradient(90% 70% at 50% 0, rgb(var(--pk) / .17), transparent 62%), radial-gradient(50% 40% at 50% 0, rgb(var(--or) / .12), transparent 70%), linear-gradient(180deg, #0c1727, #08111c); }
.vn-band--boxed > .wrap.vn-sections > .sc-sec { padding-block: 0 var(--vn-sec); }
.vn-apps-block + .vn-band--boxed { margin-top: -24px; }
/* headings */
body.skin-venice .sc-prose h2, .vn-h2 { max-width: 18em; margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--vn-h2); line-height: 1.08; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
body.skin-venice .sc-prose h2 .vn-accent, .vn-h2 .vn-accent { color: var(--vn-coral); text-shadow: none; }
body.skin-venice .sc-prose h2 .vn-accent--sky, .vn-h2 .vn-accent--sky { color: var(--vn-sky); text-shadow: none; }
body.skin-venice .sc-prose .label { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
body.skin-venice .sc-prose .label::before { content: ""; flex: 0 0 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--vn-coral), var(--vn-sand)); }
body.skin-venice .sc-prose .sc-sec > h2 + p:not(.label), body.skin-venice .vn-head > h2 + p { max-width: 36rem; margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.55; color: #c3cfda; }
@media (min-width: 640px) { body.skin-venice .sc-prose .sc-sec > h2 + p:not(.label), body.skin-venice .vn-head > h2 + p { font-size: 1.1875rem; } }
/* the horizon mark: a half sun on a line, above a centred heading */
.vn-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vn-head--center > .vn-h2, body.skin-venice .vn-faq .faq > h2 { position: relative; padding-top: 52px; }
.vn-head--center > .vn-h2::before, body.skin-venice .vn-faq .faq > h2::before { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 28px; transform: translateX(-50%); border-radius: 56px 56px 0 0; background: linear-gradient(180deg, #f7c96e, #f08a52 70%, #ee5f52); box-shadow: 0 0 24px rgb(var(--pk) / .5); }
.vn-head--center > .vn-h2::after, body.skin-venice .vn-faq .faq > h2::after { content: ""; position: absolute; top: 28px; left: 50%; width: min(320px, 80vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgb(var(--or) / .8) 30%, rgb(var(--or) / .8) 70%, transparent); }
@media (min-width: 1024px) { body.skin-venice .vn-faq .faq > h2::after { transform: none; } }

/* Hero, second round: the waterline comes right under the two buttons (the land anchor is moved up with "order"; it
   is decoration, hidden from screen readers, so reading order is unchanged), and the offer with its code, terms and
   the disclosure is a glass card on the water. The sun has the cut lines of a setting sun; low hills on the horizon. */
.vn-hero-in > .vn-pill, .vn-hero-in > .vn-wordmark, .vn-hero-in > .vn-wordmark-sub, .vn-hero-in > .vn-desc, .vn-hero-in > .vn-hero-cta { order: 1; }
.vn-hero-in > .vn-land { order: 2; margin-top: 64px; }
.vn-hero-in > .vn-promo { order: 3; margin-top: 36px; }
.vn-hero-in > .vn-disclosure { order: 4; }
.vn-hero-in > .vn-explore { order: 5; padding-top: 24px; }
.vn-hero-in:not(:has(> .vn-promo, > .vn-disclosure)) > .vn-explore { padding-top: 44px; }
.vn-promo { align-self: center; width: 100%; max-width: 38rem; padding: 14px 16px 2px; border: 1px solid rgb(var(--cy) / .32); border-bottom: 0; border-radius: 16px 16px 0 0; background: rgb(6 14 24 / .88); }
.vn-promo-line { font-size: .9375rem; }
.vn-promo .vn-terms[open] p { padding: 0 0 8px; background: none; }
.vn-disclosure { align-self: center; width: 100%; max-width: 38rem; margin: 0; padding: 4px 16px 14px; border: 1px solid rgb(var(--cy) / .32); border-top: 0; border-radius: 0 0 16px 16px; background: rgb(6 14 24 / .88); color: #c3cfda; }
.vn-hero-in:not(:has(> .vn-promo)) > .vn-disclosure { margin-top: 36px; padding-top: 14px; border-top: 1px solid rgb(var(--cy) / .32); border-radius: 16px; }
.vn-wordmark::before { -webkit-mask: linear-gradient(#000 0 58%, transparent 58% 60%, #000 60% 68%, transparent 68% 71%, #000 71% 79%, transparent 79% 83%, #000 83% 89%, transparent 89%); mask: linear-gradient(#000 0 58%, transparent 58% 60%, #000 60% 68%, transparent 68% 71%, #000 71% 79%, transparent 79% 83%, #000 83% 89%, transparent 89%); }
.vn-haze { height: 320px; background: linear-gradient(to top, rgb(242 110 90 / .7) 0, rgb(244 140 96 / .36) 50px, rgb(60 120 160 / .18) 150px, transparent 320px); }
.vn-land > .vn-hills { bottom: 0; height: 44px; background: #0a2036; opacity: .92; clip-path: polygon(0 100%, 0 62%, 6% 48%, 11% 58%, 17% 30%, 23% 52%, 28% 40%, 34% 66%, 41% 78%, 50% 86%, 59% 80%, 66% 62%, 72% 44%, 77% 56%, 83% 26%, 89% 50%, 94% 38%, 100% 58%, 100% 100%); }
.vn-desc p { color: #dbe4ec; }
@media (max-width: 639px) {
  .vn-hero-in { padding-top: 28px; }
  .vn-desc { margin-top: 22px; }
  .vn-hero-cta { margin-top: 20px; gap: 10px; }
  .vn-hero-in > .vn-land { margin-top: 56px; }
  .vn-hero-in > .vn-promo { margin-top: 32px; }
  .vn-land > .vn-hills { height: 30px; }
  .vn-way-art { width: 104px; height: 78px; }
  .vn-way-art::before { right: -36px; top: -62px; width: 140px; height: 140px; }
}
@media (min-width: 640px) { .vn-hero-in > .vn-land { margin-top: 84px; } .vn-hero-in > .vn-promo { margin-top: 44px; } .vn-promo { padding: 16px 24px 2px; } .vn-disclosure { padding: 4px 24px 16px; } }
@media (max-width: 639px) and (max-height: 700px) { .vn-hero-in { padding-top: 16px; } .vn-hero-in > .vn-land { margin-top: 44px; } }
@media (max-height: 480px) and (orientation: landscape) { .vn-hero-in > .vn-land { margin-top: 56px; } }

/* Short answer: a card with a sunset edge on its left */
.vn-band--answer { background: linear-gradient(180deg, #08111c, #0a1626); }
.vn-top { padding-block: 8px calc(var(--vn-sec) * .6); }
.vn-answer, .vn-lead { max-width: 52rem; }
body.skin-venice .vn-answer { position: relative; overflow: hidden; border-color: var(--vn-line); background: rgb(12 24 39 / .9); box-shadow: 0 24px 60px -36px rgb(0 0 0 / .9); }
body.skin-venice .vn-answer::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--vn-sand), var(--vn-coral) 55%, var(--vn-sky)); }
body.skin-venice .vn-answer .label { display: flex; align-items: center; gap: 12px; }
body.skin-venice .vn-answer .label::before { content: ""; flex: 0 0 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--vn-coral), var(--vn-sand)); }
@media (min-width: 640px) { body.skin-venice .vn-answer { padding: 32px 40px; font-size: 1.0625rem; } }

/* Trust row inside the dusk band */
.vn-duo + .vn-trust-wrap, .vn-duo-wrap .vn-trust-wrap { padding: 40px 0 0; }
.vn-trust-wrap.wrap .vn-trust, .vn-duo-wrap .vn-trust-wrap { max-width: none; }
.vn-duo-wrap .wrap.vn-trust-wrap { padding-inline: 0; }
.vn-trust-ico { border-color: rgb(var(--or) / .4); background-color: rgb(var(--or) / .07); }

/* Ranked cards, second round: the first card is the winner (a badge, a sunset edge and glow, larger name and stars);
   stars and the score are easy to read on every card. */
.vn-apps { gap: 20px; margin-top: 40px; }
.vn-app { background: rgb(11 22 36 / .85); }
.vn-app-stars { width: 100px; height: 20px; background-size: 100px 20px; }
.vn-app-stars-on { background-size: 100px 20px; }
.vn-app-rating { gap: 10px; margin-top: 8px !important; }
.vn-app-score { font-size: .9375rem; color: var(--vn-soft); }
.vn-app-score strong { font-family: var(--display); font-size: 1.125rem; color: var(--vn-sand); }
.vn-app-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px !important; padding: 5px 12px 5px 10px; border-radius: 999px; background: linear-gradient(90deg, var(--vn-sand), #f6a36a); color: #1a1206; font-size: .75rem; line-height: 1.34; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vn-app-badge::before { content: ""; width: 14px; height: 14px; background: #1a1206; clip-path: polygon(50% 4%, 63% 36%, 97% 38%, 70% 60%, 80% 94%, 50% 74%, 20% 94%, 30% 60%, 3% 38%, 37% 36%); }
.vn-app--first { border: 2px solid transparent; background: radial-gradient(60% 120% at 0 0, rgb(var(--pk) / .16), transparent 60%) padding-box, radial-gradient(50% 120% at 100% 100%, rgb(var(--cy) / .1), transparent 60%) padding-box, linear-gradient(#0c1a2b, #0c1a2b) padding-box, linear-gradient(120deg, var(--vn-sand), var(--vn-coral) 38%, rgb(52 92 178 / .8) 62%, var(--vn-sky)) border-box; box-shadow: 0 28px 70px -40px rgb(var(--pk) / .65); }
.vn-app--first:hover, .vn-app--first:focus-within { border-color: transparent; box-shadow: 0 28px 70px -34px rgb(var(--pk) / .8); }
.vn-app--first .vn-rank { background: linear-gradient(to bottom right, var(--vn-sand), var(--vn-coral)); }
body.skin-venice .vn-app--first .vn-app-name { font-size: 1.75rem; line-height: 1.15; }
.vn-app--first .vn-app-stars { width: 120px; height: 24px; background-size: 120px 24px; }
.vn-app--first .vn-app-stars-on { background-size: 120px 24px; }
.vn-app--first .vn-app-score strong { font-size: 1.375rem; }
.vn-app--first .vn-app-offer { border-color: rgb(var(--or) / .45); background: linear-gradient(160deg, rgb(var(--or) / .14), rgb(var(--pk) / .07)); }
.vn-app--first .vn-app-bonus { color: var(--vn-sand); font-size: 1.375rem; }
@media (min-width: 640px) { .vn-app--first { padding: 36px 32px 32px; } body.skin-venice .vn-app--first .vn-app-name { font-size: 2.125rem; } .vn-app--first .vn-rank { width: 52px; height: 52px; font-size: 1.5rem; top: -18px; left: -14px; } }
@media (min-width: 1024px) { .vn-app--first { padding: 44px 40px 40px; } .vn-app--first .vn-app-bonus { font-size: 1.5rem; } }

/* "Can you trade in …": the boxed section, with the sky on one side and the dusk on the other */
body.skin-venice .sc-sec--boxes > .box { border-color: rgb(var(--cy) / .28); background: linear-gradient(120deg, rgb(var(--cy) / .1), rgb(12 24 39 / .9) 42%, rgb(12 24 39 / .9) 62%, rgb(var(--pk) / .12)); }
body.skin-venice .sc-sec--boxes > .box::before { right: -60px; top: auto; bottom: -120px; width: 260px; height: 260px; background: rgb(var(--pk) / .22); }
body.skin-venice .sc-sec--boxes > .box h2 { font-size: calc(var(--vn-h2) * .8); line-height: 1.1; }
@media (min-width: 768px) { body.skin-venice .sc-sec--boxes > .box { padding: 48px; } body.skin-venice .sc-sec--boxes > .box h2 { font-size: calc(var(--vn-h2) * .8); line-height: 1.1; } }

/* The article lists under the page text get a real heading; the list styles are the site-wide cards above */
.vn-news-head > .wrap { padding-block: var(--vn-sec) 8px; max-width: var(--wrap); }
.vn-news-head:not(:has(+ .home-top)) { display: none; }
body.skin-venice.home-showcase .empty-state { display: none; }
body.skin-venice.home-showcase .home-top { padding-block: 24px 16px; }
body.skin-venice.home-showcase main > .section { padding-block: 24px; }
body.skin-venice.home-showcase main > .section:last-of-type { padding-bottom: var(--vn-sec); }
body.skin-venice.home-showcase .section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: .8125rem; }
body.skin-venice.home-showcase .section-title::before { content: ""; flex: 0 0 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--vn-coral), var(--vn-sand)); }
body.skin-venice.home-showcase .card--lead { border-color: rgb(var(--cy) / .3); }
body.skin-venice.home-showcase .card--lead .card-title { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; }

/* Section-ending buttons sit a little lower now that sections are taller */
body.skin-venice .vn-sections .sc-sec > .cards + p, body.skin-venice .vn-sections .sc-sec > p:has(> a:only-child), body.skin-venice .vn-tail { margin-top: 40px; }

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

/* 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) {
  .vn-code { padding-inline-end: 0; }
  body.skin-venice .vn-copy { min-height: 44px; padding-inline-end: 12px; }
  .vn-terms summary { display: inline-block; padding-block: 13px; }
  .vn-market-title a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  .vn-link { min-height: 44px; }
  body.skin-venice .prose :is(h2, h3, h4) > a:only-child { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .vn-topics, .vn-closing .box > p:last-child { gap: 8px; }
  .vn-topics a, body.skin-venice .vn-closing .box a.button { min-height: 44px; padding-inline: 16px; font-size: .875rem; }
  .vn-trust a { min-height: 56px; }
  body.skin-venice .footer-cols li a, body.skin-venice .footer-links a { min-width: 44px; }
  /* small standalone links of article pages (links inside running text keep their line) */
  body.skin-venice .breadcrumbs a, body.skin-venice .byline a, body.skin-venice .article-header .kicker, body.skin-venice .share a, body.skin-venice .share button, body.skin-venice .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) {
  .vn-code { gap: 6px; padding-inline-start: 8px; }
  body.skin-venice .vn-code code.promo-code { letter-spacing: .03em; }
  body.skin-venice .vn-copy { padding-inline: 24px 8px; background-position: 6px center; }
}
@media (max-width: 359px) {
  .vn-wordmark-sub { font-size: .75rem; letter-spacing: .14em; text-indent: .14em; }
  .vn-pill { letter-spacing: .16em; }
  .vn-code { gap: 6px; padding-inline-start: 8px; font-size: .75rem; }
  body.skin-venice .vn-code code.promo-code { letter-spacing: .03em; }
  body.skin-venice .vn-copy { padding-inline: 24px 8px; background-position: 6px center; }
  .vn-app { padding-inline: 16px; } .vn-app-offer { padding: 14px 12px; }
  body.skin-venice .sticky-cta .sticky-text { font-size: .8125rem; line-height: 1.35; }
}
/* 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-venice .nav-list > li > a { padding-block: 12px; }
  body.skin-venice .header-langs a, body.skin-venice .brand { min-height: 44px; }
  body.skin-venice .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-venice .prose ul:not([class]) > li > a:only-child, body.skin-venice .prose ol:not([class]) > li > a:only-child, body.skin-venice .prose:not(.sc-prose) .box > a:not(.button), body.skin-venice .prose td > a:only-child, body.skin-venice .side-list a { position: relative; }
  body.skin-venice .prose ul:not([class]) > li > a:only-child::after, body.skin-venice .prose ol:not([class]) > li > a:only-child::after, body.skin-venice .prose:not(.sc-prose) .box > a:not(.button)::after, body.skin-venice .prose td > a:only-child::after, body.skin-venice .side-list a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
  body.skin-venice .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-venice .prose:not(.sc-prose) ul:not([class]) > li, body.skin-venice .prose:not(.sc-prose) ol:not([class]) > li { margin-bottom: .9em; }
  body.skin-venice .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-venice .breadcrumbs ol { min-width: 0; }
body.skin-venice .breadcrumbs li { min-width: 0; max-width: 100%; }
body.skin-venice .breadcrumbs [aria-current] { max-width: min(40ch, 100%); }
body.skin-venice .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-venice .author-box, body.skin-venice .author-box p { font-size: 1rem; }
  .vn-way-note { font-size: 1rem; }
  body.skin-venice .sc-prose .cards > .box > a > p:not(:first-of-type):not(:last-child), body.skin-venice .sc-prose .cards > .box > a:not(:has(img)) > p:last-child:not(:first-of-type), body.skin-venice .card-excerpt, body.skin-venice .card--lead .card-excerpt, .vn-app-points li, body.skin-venice .sc-prose .cards > .box > a > p:not(:first-of-type) { font-size: 1rem; line-height: 1.45; }
}

@keyframes vn-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  body.skin-venice *, body.skin-venice *::before, body.skin-venice *::after { animation: none !important; transition-duration: .001ms !important; }
  html:has(body.skin-venice) { scroll-behavior: auto; }
  body.skin-venice .card:hover, body.skin-venice .cards > .box:hover, body.skin-venice .vn-btn:hover, body.skin-venice .vn-btn:active, body.skin-venice a.button:hover, body.skin-venice a.button:active, body.skin-venice .vn-venue:active, body.skin-venice .card:hover img, body.skin-venice .cards > .box:hover img { transform: none !important; }
}

/* Text sections keep the page column (the shared ".page-full .prose" rule lifts the cap), and the footer notice lines
   up with the footer columns. */
body.skin-venice .wrap.vn-sections { max-width: var(--wrap); }
body.skin-venice .rg-notice.wrap { margin-inline: auto; }
/* The shared design stylesheet puts a short gold tick on every text section; the bands draw their own horizon line. */
body.skin-venice .vn-sections > .sc-sec::before { content: none; }
body.skin-venice .rg-notice { padding-bottom: 12px; }
/* Footer: the wordmark is a two-line lockup (it never runs into the columns), and the last line sits in the page
   column with its two ends on one baseline. */
body.skin-venice .site-footer .brand--wordmark { grid-template-columns: auto 1fr; column-gap: 10px; line-height: 1.25; white-space: normal; }
body.skin-venice .site-footer .brand--wordmark::before { grid-row: 1 / span 2; width: 24px; height: 24px; }
body.skin-venice .site-footer .brand--wordmark .brand-top { grid-column: 2; font-size: 1.125rem; }
body.skin-venice .site-footer .brand--wordmark .brand-bottom { grid-column: 2; font-size: .75rem; letter-spacing: .14em; }
body.skin-venice .footer-bottom { position: relative; align-items: center; border-top: 0; }
body.skin-venice .footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(43, 67, 99, .4); }
/* Questions on wide screens: the horizon mark starts at the left edge of the heading */
@media (min-width: 1024px) { body.skin-venice .vn-faq .faq > h2::before { left: 0; transform: none; } body.skin-venice .vn-faq .faq > h2::after { left: 0; width: 240px; transform: none; background: linear-gradient(90deg, rgb(var(--or) / .8) 40%, transparent); } }
/* Palms: the trunk runs on down to the lower edge of the hero at every width (the crown stays on the waterline) */
.vn-land > .vn-palm { aspect-ratio: auto; height: calc(var(--h) * 1.9); width: calc(var(--h) * .375); bottom: calc(var(--h) * -1.52); background: url("../../img/skins/venice/palm.svg") center top / 100% auto no-repeat, linear-gradient(#04121b, #04121b) 49.1% 100% / 5% 55% no-repeat; }
@media (max-width: 639px) { .vn-land > .vn-palm { bottom: calc(var(--h) * -1.6); } }
/* The hero's first button keeps its label on one line */
@media (min-width: 640px) { .vn-hero-cta .vn-btn { max-width: 400px; white-space: nowrap; } }

/* C19 (Brand 24 Oct): on phones the see-through header keeps its blur at 90% opacity at least */
@media (max-width: 767px) {
  body.skin-venice.theme-dark .site-header { background: rgb(8 17 28 / .9); }
}