:root {
    --bg: #0a0a0c;
    --panel: #131317;
    --border: #26262d;
    --silver: #c9cdd6;
    --brass: #b98d3e;
    --blue: #3b6bd6;
    --text: #e7e7ea;
    --muted: #9a9aa4;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.55;
  }
  a { color: var(--blue); }
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 6vw;
    border-bottom: 1px solid var(--border);
    background: rgba(10,10,12,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    color: var(--silver);
    text-decoration: none;
  }
  .wordmark span { color: var(--brass); }
  .wholesale-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    color: #171208;
    background: var(--brass);
    border-radius: 4px;
    padding: 5px 11px;
    margin-left: 10px;
    text-transform: uppercase;
    vertical-align: middle;
  }
  nav a {
    color: var(--muted);
    text-decoration: none;
    margin-left: 28px;
    font-size: 0.92rem;
  }
  nav a:hover { color: var(--text); }
  @media (max-width: 760px) {
    header { flex-wrap: wrap; row-gap: 10px; }
    nav { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
    nav a { margin: 0 10px; }
  }
  .hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }
  .hero-banner-frame {
    position: relative;
    width: 100%;
  }
  .hero-banner {
    width: 100%;
    height: auto;
    display: block;
  }
  /* The starburst "logo light": a soft breathing glow positioned at the
     star's actual location in bs-banner-opt.jpg (~49.6% across, ~78.3%
     down, measured from the source image so it lines up at any rendered
     width). mix-blend-mode:screen keeps pure-black overlay pixels a total
     no-op against the art beneath (screen(x,0)=x). */
  /* Shape-matched flare pulse: a soft ambient halo plus a small round core
     and thin horizontal/vertical/diagonal spikes laid directly over the
     artwork's own asterisk rays (measured from the source image). Kept
     dim enough (peak opacity well under 1, screen-blended) that the
     original rays remain visible through the glow rather than being
     washed out to solid white. */
  .bs-star-glow {
    position: absolute;
    left: 49.6%;
    top: 78.3%;
    width: 46%;
    height: 46%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .bs-star-halo {
    position: absolute;
    left: 50%; top: 50%;
    width: 70%; height: 70%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150,205,255,0.32) 0%, rgba(150,205,255,0.14) 35%, rgba(150,205,255,0) 68%);
    animation: bs-flare-pulse 4s infinite;
  }
  .bs-star-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 15%; height: 15%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,248,255,0.65) 0%, rgba(150,205,255,0.35) 40%, rgba(150,205,255,0) 78%);
    animation: bs-flare-pulse 4s infinite;
  }
  .bs-star-spike {
    position: absolute;
    left: 50%; top: 50%;
    pointer-events: none;
    transform-origin: center;
  }
  .bs-star-spike.h {
    width: 100%; height: 3%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent 0%, rgba(150,205,255,.45) 32%, rgba(220,240,255,.68) 50%, rgba(150,205,255,.45) 68%, transparent 100%);
    animation: bs-flare-pulse-h 4s infinite;
  }
  .bs-star-spike.v {
    width: 3%; height: 100%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, transparent 0%, rgba(150,205,255,.45) 32%, rgba(220,240,255,.68) 50%, rgba(150,205,255,.45) 68%, transparent 100%);
    animation: bs-flare-pulse-v 4s infinite;
  }
  .bs-star-spike.d1 {
    width: 58%; height: 1.4%;
    background: linear-gradient(90deg, transparent 0%, rgba(150,205,255,.3) 34%, rgba(220,240,255,.5) 50%, rgba(150,205,255,.3) 66%, transparent 100%);
    animation: bs-flare-pulse-d1 4s infinite;
  }
  .bs-star-spike.d2 {
    width: 58%; height: 1.4%;
    background: linear-gradient(90deg, transparent 0%, rgba(150,205,255,.3) 34%, rgba(220,240,255,.5) 50%, rgba(150,205,255,.3) 66%, transparent 100%);
    animation: bs-flare-pulse-d2 4s infinite;
  }
  /* Shared pulse envelope: a quick brightening flash, then a SLOW decay
     back down to a near-invisible floor (opacity 0.1) - at that floor
     almost none of this overlay shows, leaving just the artwork's own
     original starlight and its base glow, exactly as it looks with no
     overlay at all. Every layer below (halo/core/spikes) uses this same
     timing envelope, only differing in which transform axis it scales, so
     they all flash and fade together. */
  @keyframes bs-flare-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-h {
    0%   { transform: translate(-50%, -50%) scaleX(0.82); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) scaleX(1.2);  opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) scaleX(0.82); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-v {
    0%   { transform: translate(-50%, -50%) scaleY(0.82); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) scaleY(1.2);  opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) scaleY(0.82); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-d1 {
    0%   { transform: translate(-50%, -50%) rotate(45deg) scaleX(0.85); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.18); opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) rotate(45deg) scaleX(0.85); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-d2 {
    0%   { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.85); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.18); opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.85); opacity: 0.1; }
  }
  /* Lights that light up the actual "1"s and "0"s in the artwork's binary
     text, one digit after the next, giving the illusion of light traveling
     without any element actually moving. Character positions were measured
     directly from the source image (column-peak detection on the digit
     glyphs), so each light sits exactly on one digit and is smaller than
     it. Uses only the starburst's own pale blue-white color. Each digit is
     a separate, fixed dot that blinks briefly; staggering the delay by one
     row's step size means the previous digit is already dark by the time
     the next one lights, so exactly one is lit at a time per row. */
  .bs-digit-led {
    position: absolute;
    width: 0.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    background: #9fd0ff;
    box-shadow: 0 0 1.5px #cfe9ff, 0 0 3px rgba(120,190,255,.85);
    opacity: 0;
    animation-name: bs-digit-blink;
    animation-timing-function: steps(1, jump-end);
    animation-iteration-count: infinite;
  }
  @keyframes bs-digit-blink {
    0%    { opacity: 1; }
    1.0%  { opacity: 0; }
    100%  { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bs-star-halo, .bs-star-core, .bs-star-spike { animation: none !important; }
    .bs-digit-led { animation: none !important; }
    .hero-beam-fade { animation: none !important; }
  }
  .hero-beam-fade {
    width: 340px;
    height: 60px;
    margin: 0 auto;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(148,205,255,.55), rgba(148,205,255,.22) 40%, rgba(10,10,12,0) 85%);
    pointer-events: none;
    position: relative;
    z-index: 1;
    animation: bs-flare-pulse-opacity 4s infinite;
  }
  @keyframes bs-flare-pulse-opacity {
    0%   { opacity: 0.75; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { opacity: 1;    animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { opacity: 0.75; }
  }
  /* base rules carried over from the previous homepage stylesheet */
  .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.78rem;
    color: var(--brass);
    margin-bottom: 20px;
  }
  .btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .btn-primary { background: var(--brass); color: #171208; }
  .btn-ghost { border: 1px solid var(--border); color: var(--text); }
  .cat-list { display: flex; flex-direction: column; }
  .cat-row {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
  }
  .cat-list .cat-row:first-child { padding-top: 0; }
  .cat-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .cat-row h3 {
    margin: 0;
    font-size: 1.02rem;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-weight: 600;
  }
  .cat-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 7px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cat-badge.direct { background: rgba(185,141,62,0.18); color: var(--brass); border: 1px solid var(--brass); }
  .cat-badge.wholesale { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--border); }
  .cat-row p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
  }
  .cat-row a.cat-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--blue);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
  }
  .cat-row a.cat-link:hover { text-decoration: underline; }
  .cat-row a.cat-link + a.cat-link { margin-left: 14px; }

  /* ───────────── Dual-gateway homepage: equal Wholesale/B2B (light) and Retail/B2C (dark) columns beneath the original animated header ───────────── */
  html { scroll-padding-top: 110px; }
  h1, h2, h3, h4 { margin-top: 0; }
  .skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 10px 14px; z-index: 300; border-radius: 0 0 6px 0; }
  .skip:focus { left: 0; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .ico { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ico.sm { width: 18px; height: 18px; }
  .ico.lg { width: 38px; height: 38px; }
  header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  header nav a:focus-visible, .btn:focus-visible, .tiles a:focus-visible, .cat-link:focus-visible, .browse:focus-visible, .to-retail:focus-visible, footer a:focus-visible { outline: 3px solid #f0b34a; outline-offset: 3px; }

  /* The columns start just below the light pool, leaving only a small gap, so the Crowned-B's reflective base (the light pool under the banner) shows in full on the dark page background. */
  .channels { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-top: clamp(12px, 1.5vw, 24px); }
  .channel { min-width: 0; padding: clamp(36px, 4vw, 64px) clamp(20px, 3.5vw, 56px) clamp(44px, 5vw, 72px); }
  .channel.wholesale { background: #fff; color: #1a1c22; background-image: linear-gradient(180deg, #fff 0%, #fbf8f2 100%); }
  .channel.retail { background: #050506; color: var(--text); background-image: radial-gradient(ellipse at 85% 18%, rgba(190,120,30,0.16), rgba(5,5,6,0) 55%); }
  .display { font-family: 'Playfair Display', 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.08; margin-bottom: 14px; color: #0b0c0f; }
  .retail .display { color: #fff; }
  .gold { display: block; color: #b46f12; }
  .retail .gold { color: #e6a63e; }
  .sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.4; margin: 0 0 26px; max-width: 34em; color: #1a1c22; }
  .retail .sub { color: #f2f2f4; }
  .channel .eyebrow { color: #5b4a22; font-size: 0.72rem; letter-spacing: 0.18em; margin-bottom: 16px; }
  .to-retail { display: none; margin-bottom: 22px; padding: 8px 16px; border: 1px solid #8f5407; border-radius: 999px; background: #fbf4e6; color: #6f4204; font-size: 0.85rem; font-weight: 600; text-decoration: none; }

  .features { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; max-width: 36em; }
  .features li, .why li, .trust-band li { display: flex; gap: 14px; align-items: flex-start; }
  .features .ico { color: #c47d17; margin-top: 2px; }
  .features b, .why b, .trust-band b { display: block; font-size: 1.02rem; }
  .features span, .why span, .trust-band span { display: block; font-size: 0.9rem; color: #4a4d57; }
  .channel .cta-row { justify-content: flex-start; margin-bottom: 20px; }
  .btn { display: inline-flex; align-items: center; gap: 10px; }
  .btn-pill { background: #0b0c0f; color: #fff; border-radius: 999px; padding: 14px 28px; font-size: 1rem; }
  .btn-pill:hover { background: #22252d; }
  .btn-line { border: 1px solid #b9bcc6; color: #1a1c22; background: #fff; }
  .btn-line:hover { border-color: #1a1c22; }
  .btn-gold { background: linear-gradient(180deg, #f4c667, #dd9a2e); color: #1b1304; border-radius: 999px; padding: 12px 24px; }
  .program-note { font-size: 0.82rem; color: #4a4d57; max-width: 44em; margin: 0 0 34px; }

  .block { margin-top: 42px; }
  .block-title { font-family: 'Playfair Display', 'Cinzel', Georgia, serif; font-size: clamp(1.45rem, 2.2vw, 2rem); margin-bottom: 6px; color: #0b0c0f; }
  .retail .block-title { color: #fff; }
  .block-lede { margin: 0 0 20px; color: #3b3e47; max-width: 36em; }
  .retail .block-lede { color: #d6d6dc; }
  .fine { font-size: 0.82rem; color: #4a4d57; margin: 14px 0 0; }

  .steps4, .serve, .why { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .steps4 { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .steps4 li { position: relative; border: 1px solid #e6e0d3; border-radius: 10px; padding: 22px 12px 14px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .steps4 .num { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: #8f5407; color: #fff; font-weight: 700; font-size: 0.8rem; display: grid; place-items: center; }
  .steps4 .ico { color: #c47d17; }
  .steps4 b { font-size: 1rem; }
  .steps4 span:not(.num) { font-size: 0.82rem; color: #4a4d57; }
  .serve { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .serve li { border: 1px solid #e6e0d3; border-radius: 10px; padding: 18px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
  .serve .ico { color: #c47d17; }
  .serve span { font-size: 0.86rem; color: #4a4d57; }
  .why { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .why li { flex-direction: column; gap: 6px; align-items: flex-start; }
  .why .ico { color: #c47d17; }

  .fact-list { list-style: none; margin: 0 0 16px; padding: 0; }
  .fact-list li { padding: 12px 0; border-bottom: 1px solid #e6e0d3; color: #2b2e36; font-size: 0.95rem; }
  .fact-list b { color: #0b0c0f; }
  .reseller-steps { margin: 0 0 22px; padding-left: 1.2em; color: #2b2e36; font-size: 0.92rem; }
  .reseller-steps li { margin-bottom: 8px; }
  .apply-box { background: #f6f2e9; border: 1px solid #e6e0d3; border-radius: 10px; padding: 24px; }
  .apply-box h4 { font-family: 'Playfair Display', 'Cinzel', Georgia, serif; font-size: 1.25rem; margin-bottom: 8px; }
  .apply-box p { color: #3b3e47; }

  .wholesale .cat-row { border-bottom: 1px solid #e6e0d3; }
  .wholesale .cat-row h4 { color: #0b0c0f; font-size: 1.02rem; margin: 0; font-family: 'Playfair Display', 'Cinzel', Georgia, serif; }
  .wholesale .cat-row p { color: #4a4d57; font-size: 0.88rem; }
  .wholesale .cat-row a.cat-link { margin: 10px 8px 0 0; padding: 6px 14px; border: 1px solid #8f5407; border-radius: 999px; background: #fbf4e6; color: #6f4204; font-size: 0.82rem; }
  .wholesale .cat-row a.cat-link + a.cat-link { margin-left: 0; }
  .wholesale .cat-row a.cat-link:hover { background: #f4e3bf; text-decoration: none; }
  .wholesale .cat-badge.direct { background: #fbf0da; color: #7a4a05; border: 1px solid #c47d17; }
  .wholesale .cat-badge.wholesale { background: #f1f2f5; color: #3b3e47; border: 1px solid #c9ccd5; }
  .cat-list { display: flex; flex-direction: column; }

  .search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 6px 6px 6px 18px; max-width: 40em; }
  .search .ico { width: 22px; height: 22px; color: #4a4d57; }
  .search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 0.98rem; color: #15171c; padding: 10px 0; }
  .search input:focus { outline: none; }
  .search:focus-within { outline: 3px solid #f0b34a; }
  .search button { border: 0; border-radius: 999px; padding: 11px 24px; font: inherit; font-weight: 600; background: linear-gradient(180deg, #f4c667, #dd9a2e); color: #1b1304; cursor: pointer; }
  .browse { display: inline-block; margin: 14px 0 26px; padding: 7px 16px; border: 1px solid #6b4a14; border-radius: 999px; color: #f2f2f4; font-size: 0.88rem; text-decoration: none; }
  .browse:hover { color: #e6a63e; border-color: #e6a63e; }
  .promo { border: 1px solid #3a2a0c; border-radius: 14px; padding: clamp(22px, 3vw, 40px); background: linear-gradient(120deg, #1a1208 0%, #0a0a0c 70%); max-width: 40em; }
  .promo h3 { font-family: 'Playfair Display', 'Cinzel', Georgia, serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; color: #fff; margin-bottom: 12px; }
  .promo p { color: #d6d6dc; max-width: 26em; margin: 0 0 20px; }

  .tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .tiles .wide { grid-column: 1 / -1; }
  .tiles a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 14px; border: 1px solid #6b4a14; border-radius: 10px; background: #0b0b0d; color: #fff; text-decoration: none; }
  .tiles a:hover { border-color: #e6a63e; background: #121014; }
  .tiles .ico { color: #e6a63e; }
  .tiles div { flex: 1; min-width: 0; }
  .tiles b { display: block; font-size: 0.98rem; }
  .tiles span { display: block; font-size: 0.8rem; color: #b4b4bd; margin-top: 3px; }
  .tiles .chev { width: 18px; height: 18px; flex: none; fill: none; stroke: #e6a63e; stroke-width: 2; }

  .trust-band { background: #08090b; border-top: 1px solid #3a2a0c; padding: 26px 6vw; color: var(--text); }
  .trust-band ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
  .trust-band .ico { color: #e6a63e; }
  .trust-band span { color: #b4b4bd; }
  footer .tagline { margin-left: 8px; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; }
  footer .footer-note { flex-basis: 100%; margin: 0; font-size: 0.8rem; }
  footer a { display: inline-block; padding: 4px 0; }

  @media (max-width: 980px) {
    .channels { grid-template-columns: 1fr; }
    .to-retail { display: inline-block; }
    .tiles { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .tiles { grid-template-columns: 1fr; }
    .tiles .wide { grid-column: auto; }
    .search { padding-left: 12px; }
    .search button { padding: 10px 16px; }
    .channel .cta-row .btn { width: 100%; justify-content: center; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* footer: the previous homepage footer's rules, carried over (a full-width section beneath both columns) */
  footer { padding: 30px 6vw 40px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: var(--bg); }
  footer a { color: var(--muted); margin-right: 18px; text-decoration: none; }
  footer a:hover { color: var(--text); }
  /* the wholesale categories sit two to a row where the column is wide enough, so the long reseller content stays compact */
  .wholesale .cat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); column-gap: 28px; }
  .wholesale .cat-list .cat-row:first-child { padding-top: 15px; }

  /* the starlight beam's wrapper is 340px wide in the original rule; on a 320px screen it must not widen the page */
  .hero-beam-fade { max-width: 100%; }