/* ===== Reset / base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== THEME COLORS — the edit-mode color picker rewrites this block ===== */
:root {
  --ink: #17181c;
  --paper: #faf8f4;

  --speedway-bg: #141416;
  --speedway-bg2: #1e1f22;
  --speedway-red: #e0212b;
  --speedway-yellow: #f4c723;
  --speedway-text: #f2f2f0;

  --candy-bg: #fde8f1;
  --candy-bg2: #ffd6e8;
  --candy-pink: #ec4899;
  --candy-purple: #8b5cf6;
  --candy-green: #22c55e;
  --candy-text: #4a1942;
  --candy-label: #3b0764;

  --road-bg: #fbf0dc;
  --road-bg2: #f4dfb5;
  --road-gold: #c98a2b;
  --road-teal: #2f8f8a;
  --road-text: #402c14;
  --road-label: #0f2a1c;
}
/* ===== END THEME COLORS ===== */

/* ===== THEME FONTS - the edit-mode font picker rewrites this block ===== */
:root {
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-candy: 'Baloo 2', sans-serif;
  --font-road: 'Kalam', cursive;

  /* Size multipliers, one per type role. 1 is the design's own sizing; the
     Fonts panel adjusts these. Every font-size in this file is multiplied by
     the scale for its role, so a whole role grows or shrinks together and the
     hierarchy between headings and body text is preserved. */
  --scale-display: 1;
  --scale-body: 1;
  --scale-candy: 1;
  --scale-road: 1;
}
/* ===== END THEME FONTS ===== */

/* ===== PARAGRAPH SPACING - the edit-mode spacing panel rewrites this block =====
   Gap below each paragraph, per section, so one wordy section can breathe
   without loosening the whole page. Shift+Enter makes a line break instead of
   a paragraph and is not affected by these. */
:root {
  --space-hero: 14px;
  --space-speedway: 16px;
  --space-candyrush: 16px;
  --space-roadtrip: 16px;
  --space-signup: 26px;
}
/* ===== END PARAGRAPH SPACING ===== */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: calc(1rem * var(--scale-body));
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; border-radius: 10px; min-width: 0; }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.1; }

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 800;
  font-size: calc(1rem * var(--scale-body));
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background-color: var(--speedway-yellow);
  color: var(--speedway-bg);
  box-shadow: 0 6px 0 #b9920e;
}

/* ----- Button feedback: .btn-primary (Sign-up) and .nav-cta (Get Notified) --
 * ALWAYS: a bright shine sweeps across every few seconds. It runs on its own,
 *   not on hover, so phones (which have no hover) show it too.
 * HOVER (mouse only): the shine speeds up into a continuous sweep, the yellow
 *   turns clearly lighter, and the button lifts with a deeper shadow.
 * PRESS (mouse and touch): pushes down into its edge - the feedback a tap gets.
 *
 * The shine is a gradient in background-image, moved by animating
 * background-position, rather than a ::after - a pseudo-element would need the
 * button positioned, and phone.css resets every [data-edit] element to
 * position: static. Over the yellow, white at 90% reads as a real glint;
 * the first version used 60% and nobody could see it.
 *
 * (hover: hover) keeps the hover look off touch screens, where a tapped button
 * would otherwise stay "hovered" until the next tap somewhere else. */
/* 2.25s cycle: a 1.44s sweep (64%), then a 0.81s rest. To change the rest
   without changing the sweep speed, keep cycle x percentage = 1.44s. */
@keyframes trax-shine {
  0%   { background-position: 140% 0; }
  64%  { background-position: -40% 0; }   /* sweep... */
  100% { background-position: -40% 0; }   /* ...then rest before the next one */
}
@keyframes trax-shine-fast {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}
.btn-primary,
.nav-cta {
  background-image: linear-gradient(110deg,
    transparent 30%, rgba(255, 255, 255, .25) 40%, rgba(255, 255, 255, .9) 50%,
    rgba(255, 255, 255, .25) 60%, transparent 70%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 140% 0;
  animation: trax-shine 2.25s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Get Notified sweeps half a beat after the Sign-up buttons, not in lockstep. */
.nav-cta { animation-delay: 1.1s; }
@media (hover: hover) {
  .btn-primary:hover,
  .nav-cta:hover {
    background-color: #ffe680;
    animation: trax-shine-fast .9s linear infinite;
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #b9920e, 0 16px 30px rgba(0, 0, 0, .4); }
  .nav-cta:hover     { transform: translateY(-2px); box-shadow: 0 5px 0 #b9920e, 0 10px 20px rgba(0, 0, 0, .4); }
}
.btn-primary:active,
.nav-cta:active { background-color: #ffe680; transition-duration: .06s; }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #b9920e; }
.nav-cta:active     { transform: translateY(2px); box-shadow: 0 1px 0 #b9920e; }
.btn-primary:focus-visible,
.nav-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Asked for less motion: no shine, no movement - the colour change still shows. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .nav-cta,
  .btn-primary:hover, .nav-cta:hover { animation: none; }
  .btn-primary:hover, .nav-cta:hover,
  .btn-primary:active, .nav-cta:active { transform: none; }
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20,20,22,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 28px;
  align-items: center;
  height: 68px;
}
.cormel-mark {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
}
.cormel-mark img { height: 40px; width: auto; border-radius: 0; }
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(1.6rem * var(--scale-display));
  color: #fff;
  letter-spacing: .04em;
  text-align: center;
  justify-self: center;
  /* TRAX is one word and must stay on one line. A Layout-mode resize left
     `width: 11%` on it in the overrides below - a sliver - and in edit mode the
     text is contenteditable, which lets the browser break a word between any
     two letters, so it stacked T/R/A/X vertically. min-width beats width, so
     no resize can make it narrower than the word itself. */
  white-space: nowrap;
  min-width: max-content;
}
/* That same 11% also sized TRAX's grid COLUMN to a sliver, so the word spilled
   out of it over the links and no gap could separate them. In the header the
   column is simply as wide as the word. (0,3,0) + !important outranks the
   override's `html:not(.view-phone) [data-edit]`, which is (0,2,1). */
.site-header .header-inner .brand { width: auto !important; left: auto !important; }
.brand span { color: var(--speedway-red); }
/* The links start right after TRAX rather than being pushed to the far edge,
   and in desktop view the Desktop/Phone switch joins the end of this row (see
   js/script.js). nowrap keeps "Get Notified" on one line: without it the row
   fits a narrow header by wrapping the button onto two lines. */
.site-header nav {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-self: start;
}
/* At the narrowest desktop widths the row is ~20px too long; tighten it. */
@media (max-width: 1100px) {
  .site-header nav { gap: 16px; }
}
.site-header nav a {
  white-space: nowrap;
  color: #e6e6e6;
  font-weight: 600;
  font-size: calc(.95rem * var(--scale-body));
  opacity: .85;
}
.site-header nav a:hover { opacity: 1; }
.nav-cta {
  background-color: var(--speedway-yellow);
  color: var(--speedway-bg) !important;
  padding: 8px 18px;
  border-radius: 999px;
  opacity: 1 !important;
  /* a shallower version of the Sign-up button's edge, so it can press down */
  box-shadow: 0 3px 0 #b9920e;
}

/* ===== Hero ===== */
.hero {
  background: radial-gradient(ellipse at top, #26262b 0%, var(--speedway-bg) 60%);
  color: #fff;
  padding: 110px 0 90px;
  text-align: center;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: calc(.8rem * var(--scale-body));
  font-weight: 700;
  color: var(--speedway-yellow);
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: calc(clamp(2.2rem, 5vw, 3.6rem) * var(--scale-display));
  font-weight: 700;
  margin-bottom: 22px;
}
.hero-sub {
  max-width: 640px;
  margin: 0 auto 34px;
  color: #cfcfd2;
  font-size: calc(1.08rem * var(--scale-body));
}
.hero-sub p { margin: 0 0 var(--space-hero); }
.hero-sub p:last-child { margin-bottom: 0; }

/* ===== Game sections (shared layout) ===== */
.game-section { padding: 90px 0; }
.game-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: start;
}
.game-grid.reverse { direction: rtl; }
.game-grid.reverse > * { direction: ltr; }
.game-grid > * { min-width: 0; }

.game-logo {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  margin-bottom: 22px;
}
.game-logo strong { font-weight: 800; }

.stat-row { display: flex; gap: 28px; margin-bottom: 24px; }
.stat { display: flex; flex-direction: column; }
/* nowrap: a range like "30-45" must never break at its hyphen. The row is
   sized to its content (ELEMENT OVERRIDES) and slides left instead. */
.stat-num { font-size: calc(1.5rem * var(--scale-body)); font-weight: 800; white-space: nowrap; }
.stat-label {
  font-size: calc(.72rem * var(--scale-body));
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .7;
}

.game-tagline { font-size: calc(1.2rem * var(--scale-body)); font-weight: 700; margin-bottom: 16px; }
.game-body p { margin-bottom: 16px; max-width: 54ch; }
.game-body p:last-child { margin-bottom: 0; }
.theme-speedway .game-body p { margin-bottom: var(--space-speedway); }
.theme-candyrush .game-body p { margin-bottom: var(--space-candyrush); }
.theme-roadtrip .game-body p { margin-bottom: var(--space-roadtrip); }
.theme-speedway .game-body p:last-child,
.theme-candyrush .game-body p:last-child,
.theme-roadtrip .game-body p:last-child { margin-bottom: 0; }
/* <b> is accepted alongside <strong>: the browser's own editor emits <b>, and
   the save normaliser only rewrites paragraphs that were actually edited. */
.game-body strong, .game-body b { font-weight: 800; }

.video-slot { margin-top: 28px; }
.video-placeholder {
  border: 2px dashed currentColor;
  opacity: .55;
  border-radius: 14px;
  padding: 26px;
  text-align: center;
  font-weight: 700;
  font-size: calc(.95rem * var(--scale-body));
}

.game-visual { position: relative; }
.box-art-frame { position: relative; }

/* A game logo at the head of a copy column. No plate, no background: the
   pictures carry their own styling. Sized per picture in the ELEMENT
   OVERRIDES block (width), and never wider than the column. */
.logo-slot { margin-bottom: 22px; }
.logo-slot img { border-radius: 0; height: auto; max-width: 100%; margin-bottom: 0; }

/* The Speedway wheel, hanging off the bottom-left corner of the box art.
   Anchored to the frame (which is position: relative) so it rides with the
   picture at every width. The frame's padding-bottom override makes room for
   the overhang so the card strip below never collides with it. */
.wheel-slot {
  position: absolute;
  left: 8px;
  bottom: 29px;     /* frame padding-bottom 79px minus a 50px overhang */
  width: 154px;
}
.wheel-slot img { border-radius: 0; box-shadow: none; width: 100%; }

/* "All artwork is subject to change" - one line at the foot of each game
   section, in normal flow after that section's last block. */
.artwork-note { text-align: center; margin-top: 40px; }
.artwork-note p { margin: 0; }
.box-art {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
}
.wheel-badge {
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 92px;
  height: 92px;
  object-fit: cover;
  object-position: 30% 50%;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.6);
}
.card-strip {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.card-strip img {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.4);
}
.card-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
  margin-top: 18px;
}
.card-collage img {
  aspect-ratio: 3/4;
  object-fit: cover;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.45);
}

/* ===== Speedway theme ===== */
.theme-speedway {
  background: linear-gradient(180deg, var(--speedway-bg) 0%, var(--speedway-bg2) 100%);
  color: var(--speedway-text);
}
.game-logo-img {
  height: auto;
  width: auto;
  max-width: 320px;
  border-radius: 0;
  margin-bottom: 22px;
}
.logo-plate {
  display: inline-block;
  background: #fff;
  padding: 16px 24px;
  border-radius: 10px;
  margin-bottom: 22px;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
}
.speedway-logo-img { max-width: 280px; margin-bottom: 0; display: block; }
/* Desktop: every game logo is centred in its copy column, with the stats and
   text starting below it. This replaces the old -46px left nudge on the
   Speedway logo and outranks the Layout-mode drags (top: 44px / 34px) that
   pushed the Speedway and Candy Rush logos down over their stats boxes.
   (0,3,1) + !important beats the editor's (0,2,1) overrides, so a logo's
   sideways margins and vertical offset can no longer be set in Layout mode;
   its width still can. Phone view is untouched (phone.css). */
html:not(.view-phone) .game-copy > .logo-slot,
html:not(.view-phone) .game-copy > .logo-plate {
  display: block;
  text-align: center;
  top: 0 !important;
  left: 0 !important;
}
html:not(.view-phone) .game-copy > .logo-slot img,
html:not(.view-phone) .game-copy > .logo-plate img {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}
.theme-speedway .stat-num { color: var(--speedway-yellow); }
.theme-speedway .video-placeholder { color: var(--speedway-yellow); border-color: rgba(244,199,35,.4); }

.testimonials {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.testimonials blockquote {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 22px 24px;
  font-size: calc(.95rem * var(--scale-body));
  color: #dcdce0;
}
.testimonials cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--speedway-yellow);
  font-size: calc(.85rem * var(--scale-body));
}

/* ===== Candy Rush theme ===== */
.theme-candyrush {
  background: linear-gradient(180deg, var(--candy-bg) 0%, var(--candy-bg2) 100%);
  color: var(--candy-text);
}
.candyrush-logo {
  font-family: var(--font-candy);
  font-size: calc(2rem * var(--scale-candy));
  color: var(--candy-purple);
}
.candyrush-logo span { color: var(--candy-pink); }
.candyrush-logo strong {
  color: #fff;
  background: linear-gradient(135deg, var(--candy-pink), var(--candy-purple));
  padding: 4px 14px 6px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.theme-candyrush .stat-num { color: var(--candy-pink); }
.theme-candyrush .video-placeholder { border-color: rgba(139,92,246,.4); }
.theme-candyrush .btn-primary {
  background: var(--candy-pink);
  color: #fff;
  box-shadow: 0 6px 0 #b6316f;
}

/* ===== Road Trip theme ===== */
.theme-roadtrip {
  background: linear-gradient(180deg, var(--road-bg) 0%, var(--road-bg2) 100%);
  color: var(--road-text);
}
.roadtrip-logo {
  font-family: var(--font-road);
  font-size: calc(2.1rem * var(--scale-road));
  color: var(--road-gold);
  text-shadow: 2px 2px 0 rgba(0,0,0,.08);
}
.roadtrip-logo span { color: var(--road-teal); }
.roadtrip-logo strong { color: var(--road-teal); }
.theme-roadtrip .stat-num { color: var(--road-teal); }
.theme-roadtrip .video-placeholder { border-color: rgba(47,143,138,.4); }
.theme-roadtrip .btn-primary {
  background: var(--road-teal);
  color: #fff;
  box-shadow: 0 6px 0 #1f6763;
}

.postcards-intro {
  text-align: center;
  font-weight: 700;
  margin: 70px 0 22px;
  font-family: var(--font-road);
  font-size: calc(1.3rem * var(--scale-road));
}
.postcard-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  min-width: 0;
}
.postcard-grid > * { min-width: 0; }
.postcard-grid img {
  aspect-ratio: 3/2;
  object-fit: cover;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35);
  transform: rotate(var(--r, 0deg));
}
.postcard-grid img:nth-child(odd) { --r: -2deg; }
.postcard-grid img:nth-child(even) { --r: 2deg; }

/* ===== Signup ===== */
.signup-section {
  background: var(--speedway-bg);
  color: #fff;
  padding: 90px 0;
  text-align: center;
}
.signup-inner { max-width: 560px; margin: 0 auto; }
.signup-section h2 {
  font-family: var(--font-display);
  font-size: calc(2.2rem * var(--scale-display));
  margin-bottom: 16px;
}
.signup-section p { color: #cfcfd2; margin-bottom: 26px; }
/* Two classes deep so it outranks the rule above regardless of order. */
.signup-section [data-edit="signup-body"] p { margin-bottom: var(--space-signup); }
.signup-section [data-edit="signup-body"] p:last-child { margin-bottom: 0; }
.signup-form {
  display: flex;
  flex-wrap: wrap;          /* name + email + button is three items now; let it
                               wrap rather than crush the fields on a narrow band */
  justify-content: center;  /* the button wraps onto its own row at this width -
                               without this it sits hard left under a centred
                               section and reads as a mistake */
  gap: 10px;
  margin-bottom: 16px;
}
.signup-form input {
  flex: 1 1 190px;          /* share the row, but drop to the next line under 190px */
  min-width: 0;             /* inputs refuse to shrink past their size attribute
                               without this, which forces a horizontal overflow */
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: calc(1rem * var(--scale-body));
}
.signup-form input::placeholder { color: #9a9aa0; }
.signup-form button { flex: 0 0 auto; }

.signup-form.is-sending { opacity: .6; pointer-events: none; }

.signup-fine { font-size: calc(.8rem * var(--scale-body)); color: #8c8c92; }
.signup-thanks { font-weight: 700; color: var(--speedway-yellow); margin-top: 10px; }
.signup-error { font-weight: 600; color: #ff8b7a; margin-top: 10px; }

/* ===== Footer ===== */
.site-footer {
  background: #0d0d0f;
  color: #77777d;
  padding: 26px 0;
  text-align: center;
  font-size: calc(.82rem * var(--scale-body));
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .site-header nav a:not(.nav-cta) { display: none; }
  .game-grid, .game-grid.reverse { grid-template-columns: 1fr; direction: ltr; }
  .testimonials { grid-template-columns: 1fr; }
  .postcard-grid { grid-template-columns: repeat(2, 1fr); }
  .card-collage { grid-template-columns: repeat(2, 1fr); }
  .signup-form { flex-direction: column; }
  /* Stacked, the `flex: 1 1 190px` above resolves against the HEIGHT axis and
     gives 190px-tall fields. Reset it so each control keeps its own height and
     simply spans the width. */
  .signup-form input,
  .signup-form button { flex: 0 0 auto; width: 100%; }
}

/* ===== Lightbox =====
   Published-page feature, driven by js/script.js. Only images carrying
   data-lightbox="<group>" take part; everything else is untouched. */
.lightbox-thumb { cursor: zoom-in; }

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(10, 10, 12, .92);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  /* Roughly half the room it used to take. The old caps were 1400px wide and
     nearly the full viewport height, which filled the screen. */
  max-width: min(700px, 92vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-img {
  max-width: 100%;
  /* Half the previous ceiling, leaving room for caption and padding. */
  max-height: calc((100vh - 140px) / 2);
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.lightbox-caption {
  color: #d8d8dc;
  font-size: .95rem;
  text-align: center;
  max-width: 60ch;
}

.lightbox button {
  border: none;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s ease;
}
.lightbox button:hover { background: rgba(255, 255, 255, .22); }

.lightbox-prev,
.lightbox-next {
  flex: none;
  width: 54px;
  height: 54px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
}
.lightbox-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #9a9aa2;
  font-size: .85rem;
  letter-spacing: .08em;
}

@media (max-width: 880px) {
  .lightbox { padding: 12px; gap: 2px; }
  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; font-size: 1.5rem; }
  .lightbox-img { max-height: calc((100vh - 170px) / 2); }
}

/* ===== ELEMENT OVERRIDES - written by the edit-mode Layout panel =====
   This block is owned by the editor and rewritten whole on every save, so
   hand edits here will be lost. Adjust things in Layout mode instead.
   Kept last in the file so it outranks the rules above it. */
[data-edit="brand"] {
  font-size: 53px !important;
  line-height: 1.20 !important;
  text-align: center !important;
}
[data-edit="candyrush-tagline"] {
  font-size: 20px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
[data-edit="hero-eyebrow"] {
  font-size: 19px !important;
}
[data-edit="roadtrip-stat1-num"] {
  text-align: center !important;
}
[data-edit="roadtrip-tagline"] {
  text-align: center !important;
}
[data-edit="speedway-stat2-num"] {
  text-align: center !important;
}
[data-edit="speedway-stat3-num"] {
  text-align: center !important;
}
[data-edit="speedway-tagline"] {
  text-align: center !important;
}
[data-edit="text-1"] {
  text-align: center !important;
}
[data-edit="text-2"] {
  color: #1e1010 !important;
  text-align: center !important;
}
[data-edit="text-3"] {
  color: #1e1010 !important;
  text-align: center !important;
}
[data-el="candyrush-stats"] {
  text-align: center !important;
}
[data-el="roadtrip-band"] {
  padding: 0px !important;
  padding-top: 115px !important;
  padding-bottom: 48px !important;
}
[data-el="speedway-art-frame"] {
  padding-bottom: 79px !important;
}
[data-el="speedway-copy"] {
  background: none !important;
  padding: 0px !important;
  box-shadow: none !important;
}
[data-el="speedway-logo-plate"] {
  background: none !important;
  padding: 0px !important;
  box-shadow: none !important;
}

/* Size and position apply on desktop only, so the single-column
   phone layout below 881px - and Phone view on any
   screen - is left as designed. */
@media (min-width: 881px) {
  html:not(.view-phone) [data-edit-img="added-1"] {
    width: 384px !important;
    max-width: 100% !important;
    margin-left: 17px !important;
    margin-top: 15px !important;
  }
  html:not(.view-phone) [data-edit-img="added-2"] {
    width: 419px !important;
    max-width: 100% !important;
  }
  html:not(.view-phone) [data-edit-img="logo-cormel"] {
    width: 240px !important;
    max-width: none !important;
    height: 66px !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  html:not(.view-phone) [data-edit-img="speedway-box"] {
    width: 505px !important;
    max-width: none !important;
  }
  html:not(.view-phone) [data-edit-img="speedway-logo"] {
    width: 485px !important;
    max-width: none !important;
  }
  html:not(.view-phone) [data-edit="brand"] {
    width: 11% !important;
    max-width: none !important;
    height: 55px !important;
    max-height: none !important;
    left: -61px !important;
    top: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
  }
  html:not(.view-phone) [data-edit="candyrush-tagline"] {
    width: 97.7% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html:not(.view-phone) [data-edit="hero-cta"] {
    width: 24.1% !important;
    max-width: none !important;
    height: 48px !important;
    max-height: none !important;
  }
  html:not(.view-phone) [data-edit="roadtrip-body"] {
    margin-top: 18px !important;
  }
  html:not(.view-phone) [data-edit="roadtrip-tagline"] {
    margin-top: 10px !important;
  }
  html:not(.view-phone) [data-edit="speedway-video"] {
    width: 97.7% !important;
    max-width: none !important;
  }
  html:not(.view-phone) [data-el="candyrush-collage"] {
    width: 99.5% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  html:not(.view-phone) [data-el="candyrush-logo-slot"] {
    left: 0px !important;
    top: 34px !important;
    position: relative !important;
  }
  html:not(.view-phone) [data-el="candyrush-stats"] {
    width: 47.9% !important;
    max-width: none !important;
    left: 0px !important;
    top: 25px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
  }
  html:not(.view-phone) [data-el="candyrush-video-slot"] {
    margin-top: 83px !important;
  }
  html:not(.view-phone) [data-el="candyrush-visual"] {
    width: 91.4% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  html:not(.view-phone) [data-el="cormel-logo-box"] {
    width: 41.3% !important;
    max-width: none !important;
    height: 77px !important;
    max-height: none !important;
  }
  html:not(.view-phone) [data-el="header-inner"] {
    width: 61.4% !important;
    max-width: none !important;
    height: 144px !important;
    max-height: none !important;
    left: -2px !important;
    top: 2px !important;
    position: relative !important;
  }
  html:not(.view-phone) [data-el="hero-band"] {
    height: 481px !important;
    max-height: none !important;
  }
  html:not(.view-phone) [data-el="roadtrip-stats"] {
    width: 47.9% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  html:not(.view-phone) [data-el="roadtrip-video-slot"] {
    margin-top: 49px !important;
  }
  html:not(.view-phone) [data-el="roadtrip-visual"] {
    width: 99.8% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  html:not(.view-phone) [data-el="speedway-band"] {
    height: 1417px !important;
    max-height: none !important;
  }
  html:not(.view-phone) [data-el="speedway-logo-plate"] {
    width: 100% !important;
    max-width: none !important;
    left: 0px !important;
    top: 44px !important;
    position: relative !important;
  }
  html:not(.view-phone) [data-el="speedway-stats"] {
    width: 44.4% !important;
    max-width: none !important;
    left: 0px !important;
    top: 26px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
  }
}
/* ===== END ELEMENT OVERRIDES ===== */