@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Permanent+Marker&display=swap');

:root{
  --ink:#0b0d09;
  --green:#10a62c;
  --green2:#32d747;
  --lime:#78f04c;
  --paper:#e7b760;
  --paper2:#f2d38a;
  --wood:#7d451d;
  --dark:#071a0c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#071a0c;color:#0b0d09;
  font-family:"Luckiest Guy",Impact,sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.site-header{
  position:sticky;top:0;z-index:100;height:82px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:7px 2vw;
  background:
    linear-gradient(#744118,#4e2b10),
    repeating-linear-gradient(90deg,transparent 0 85px,#0002 85px 88px);
  border-bottom:5px solid #111;
  box-shadow:0 4px 0 #2b180b;
}
.brand-plank,.main-nav,.cta,.wood-title{
  border:4px solid #111;box-shadow:5px 5px #111;
}
.brand-plank{
  height:62px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(#f0cd7c,#c88138);
  padding:4px 17px 4px 5px;transform:rotate(-1deg);
}
.brand-plank img{width:54px;height:54px;border-radius:50%;border:3px solid #111;object-fit:cover}
.brand-plank span{font-size:30px}
.main-nav{
  justify-self:center;display:flex;background:linear-gradient(#df9d4b,#bd6d30);transform:rotate(.2deg)
}
.main-nav a{padding:11px 19px;border-right:2px solid #724017;font-size:16px}
.main-nav a:last-child{border-right:0}
.main-nav a:hover{background:#f0c77d}
.header-actions,.footer-actions{display:flex;align-items:center;gap:12px}
.circle{
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  background:#050505;color:#fff;border:3px solid #111;box-shadow:3px 3px #2b170a;font-size:24px
}
.circle.large{width:64px;height:64px;font-size:31px}
.cta{
  background:linear-gradient(#27c442,#078d27);color:#fff;
  padding:13px 21px;font-size:19px;text-shadow:2px 2px #064a18;
}
.cta:hover{filter:brightness(1.12);transform:translateY(-2px)}

.hero{
  position:relative;background:#1da8ee;border-bottom:6px solid #111;overflow:hidden
}
.hero picture,.hero picture img{display:block;width:100%}
.hero picture img{
  aspect-ratio:3/2;object-fit:cover;object-position:center
}
.hero-buybox{
  position:absolute;left:50%;bottom:2.4%;transform:translateX(-50%);
  width:min(570px,45vw);
  background:linear-gradient(#c67d39,#8c4d20);
  border:5px solid #111;box-shadow:7px 7px #111;padding:12px 17px 15px
}
.hero-buybox>span{display:block;font-family:"Permanent Marker";font-size:14px;margin:9px 0 3px}
.hero-cta{display:block;text-align:center;font-size:clamp(18px,2vw,27px)}
.ca-row{
  display:grid;grid-template-columns:1fr auto;background:#0e1410;border:4px solid #111;min-width:0
}
.ca-row code{padding:12px;color:#fff;font:18px monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-row button{
  border:0;border-left:3px solid #111;background:linear-gradient(#20c13d,#078a28);color:#fff;
  padding:0 18px;font-size:18px;cursor:pointer
}

.story{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#031108;border-bottom:6px solid #111
}
.panel{
  position:relative;overflow:hidden;background:#050505;border-right:4px solid #f0f0e8
}
.panel:last-child{border-right:0}
.panel img{display:block;width:100%;aspect-ratio:1/1.14;object-fit:cover;object-position:center}
.panel-head{
  position:absolute;left:0;right:0;top:0;z-index:2;
  padding:9px 10px;background:linear-gradient(#d68d40,#ae642b);
  border-bottom:4px solid #111;font-size:clamp(14px,1.25vw,20px)
}
.panel-head b{display:inline-block;padding:3px 7px;margin-right:6px;background:#e7b65e;border:3px solid #111}
.panel-caption{
  position:absolute;left:10px;bottom:10px;color:#fff;z-index:2;
  font-family:"Permanent Marker";font-size:clamp(14px,1.4vw,22px);text-shadow:2px 2px #000
}
.panel-caption.green{color:#55ef55}.panel-caption.top{top:58px;bottom:auto}

.lower-world{
  display:grid;grid-template-columns:280px 1fr 270px;gap:18px;
  padding:26px 2vw 50px;
  background:
    linear-gradient(#0a3019aa,#0a3019aa),
    url("assets/propaganda-hero.png") center bottom/cover no-repeat;
  border-bottom:6px solid #111;
}
.parchment,.outlaws,.buy-path{
  border:5px solid #111;box-shadow:8px 8px #111
}
.parchment{
  background:linear-gradient(#f0cf87,#d99a50);
  padding:23px 18px;transform:rotate(-1.3deg);font-family:"Permanent Marker"
}
.parchment h2{font-family:"Luckiest Guy";font-size:32px;text-align:center;margin:0 0 17px}
.parchment p{font-size:17px;line-height:1.2;margin:14px 0}
.buy-path{
  background:#174b25aa;padding:19px 20px 25px;align-self:start
}
.wood-title{
  width:max-content;max-width:95%;margin:0 auto 22px;padding:10px 25px;
  background:linear-gradient(#df9948,#b96a2e);font-size:clamp(28px,3.2vw,48px);
  text-align:center;transform:rotate(-1deg)
}
.wood-title.small{font-size:22px;padding:9px 17px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.step{
  min-height:165px;padding:16px 10px;text-align:center;background:linear-gradient(#f1d492,#dca45a);
  border:4px solid #111;box-shadow:4px 4px #111
}
.step span{display:block;font-size:40px;color:#0a8e29;text-shadow:2px 2px #fff}
.step b{display:block;font-size:17px}.step small{display:block;font-family:"Permanent Marker";font-size:13px;margin-top:8px}
.buy-ca{margin-top:20px}.ca-row.wide{max-width:740px;margin:0 auto 13px}
.big-buy{display:block;max-width:740px;margin:auto;text-align:center;font-size:24px}
.big-scroll{
  max-width:760px;margin:24px auto 0;padding:20px;text-align:center;
  background:linear-gradient(#f1d58f,#d69a50);border:5px solid #111;box-shadow:6px 6px #111;
  transform:rotate(-1deg);font-size:clamp(23px,3vw,38px)
}
.big-scroll strong{font-size:1.2em}

.outlaws{
  background:linear-gradient(#d59a50,#a65e2a);padding:18px 16px;text-align:center;transform:rotate(1deg)
}
.outlaw-socials{display:flex;justify-content:center;gap:16px;margin:25px 0}
.stump{
  margin:20px auto 0;width:180px;min-height:190px;padding:38px 10px 20px;
  display:grid;place-items:center;
  background:radial-gradient(ellipse at top,#b97b3e 0 25%,#6f3d1e 27% 100%);
  color:#eee0c3;border:5px solid #111;border-radius:45% 45% 22% 22%;
  box-shadow:7px 7px #111;font-family:"Permanent Marker";font-size:28px
}

.propaganda{padding:60px 2vw 70px;background:#082213}
.propaganda-title{margin-bottom:34px}
.prop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1450px;margin:auto}
.prop-grid img{display:block;width:100%;border:5px solid #111;box-shadow:6px 6px #111}

.site-footer{
  min-height:155px;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:22px;
  padding:22px 3vw;color:#fff;
  background:
    linear-gradient(#04130ae8,#04130ae8),
    url("assets/propaganda-hero.png") center 75%/cover no-repeat;
  border-top:5px solid #111
}
.footer-brand{display:flex;flex-direction:column}.footer-brand b{color:#4ae64b;font-size:36px}.footer-brand small{font-family:"Permanent Marker";font-size:15px}
.site-footer p{text-align:center;font-family:"Permanent Marker";font-size:18px}.site-footer p b{color:#77f14d}

.mobile-bottom{display:none}
#toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 20px;opacity:0;pointer-events:none;z-index:999;
  background:#f1d58b;border:4px solid #111;box-shadow:6px 6px #111;padding:13px 22px;font-size:18px;transition:.2s
}
#toast.show{opacity:1;translate:-50% 0}

@media(max-width:1100px){
  .main-nav a{padding:10px 10px;font-size:13px}
  .lower-world{grid-template-columns:220px 1fr}
  .outlaws{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center}
  .outlaw-socials{margin:0}.stump{width:160px;min-height:120px;padding:20px}
  .steps{grid-template-columns:1fr 1fr}
}

@media(max-width:700px){
  body{padding-bottom:64px}
  .site-header{
    height:69px;grid-template-columns:auto 1fr auto;padding:6px 8px
  }
  .brand-plank{height:55px;padding-right:10px}.brand-plank img{width:47px;height:47px}.brand-plank span{font-size:24px}
  .main-nav{display:none}
  .header-actions .circle{display:none}
  .header-actions .cta{font-size:14px;padding:10px 11px}
  .hero picture img{
    aspect-ratio:auto;height:auto;object-fit:contain
  }
  .hero-buybox{
    position:relative;left:auto;bottom:auto;transform:none;
    width:calc(100% - 18px);margin:9px auto 14px;padding:10px 11px 12px
  }
  .hero-cta{font-size:18px}
  .story{grid-template-columns:1fr}
  .panel{border-right:0;border-bottom:4px solid #f0f0e8}
  .panel img{aspect-ratio:auto;height:auto;object-fit:contain}
  .panel-head{font-size:17px}
  .panel-caption{font-size:17px}
  .lower-world{display:flex;flex-direction:column;padding:22px 12px 40px;gap:22px}
  .parchment,.buy-path,.outlaws{width:100%;transform:none}
  .parchment{order:1}
  .buy-path{order:2;padding:17px 12px 22px}
  .outlaws{order:3;display:block}
  .steps{grid-template-columns:1fr 1fr;gap:8px}
  .step{min-height:145px}
  .ca-row.wide{grid-template-columns:1fr}
  .ca-row.wide button{border-left:0;border-top:3px solid #111;padding:12px}
  .propaganda{padding:45px 12px 55px}
  .prop-grid{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr;text-align:center;padding:28px 16px 33px}
  .footer-actions{justify-content:center}
  .mobile-bottom{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:linear-gradient(#d88e40,#995522);border-top:4px solid #111
  }
  .mobile-bottom a{padding:13px 5px;text-align:center;border-right:2px solid #5f3519;font-size:13px}
  .mobile-bottom a:last-child{background:#0d9b2d;color:white;border-right:0}
}

@media(max-width:430px){
  .brand-plank span{font-size:22px}
  .header-actions .cta{font-size:13px}
  .steps{grid-template-columns:1fr}
  .wood-title{font-size:30px}
  .big-scroll{font-size:24px}
  .circle.large{width:58px;height:58px}
}


/* ===== MOBILE FIX + NEW TROLLI HERO TITLE ===== */

/* Desktop title replacement: parchment patch covers the old Propaganda title. */
.desktop-title-replacement{
  position:absolute;
  z-index:5;
  left:12.2%;
  top:8.5%;
  width:51%;
  min-height:31%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.2vw 2vw;
  background:
    radial-gradient(circle at 15% 20%,#f6dfa1 0 2px,transparent 3px),
    linear-gradient(#f1d18b,#e1ad5f);
  border:5px solid #19130c;
  box-shadow:7px 7px #111;
  transform:rotate(-1deg);
}
.desktop-title-replacement:before{
  content:"";
  position:absolute;inset:7px;
  border:2px dashed #9b652e;
  pointer-events:none;
}
.desktop-title-replacement strong{
  position:relative;
  font-size:clamp(70px,10vw,170px);
  line-height:.8;
  letter-spacing:-.04em;
  color:#080b08;
  text-shadow:3px 3px #c7974b;
}
.desktop-title-replacement strong span{color:#13982d}
.desktop-title-replacement small{
  position:relative;
  margin-top:1.4vw;
  font-family:"Permanent Marker";
  font-size:clamp(18px,2.1vw,35px);
  line-height:1.05;
  color:#08712a;
}

/* Mobile is a dedicated composition, not a cropped desktop banner. */
@media(max-width:700px){
  .desktop-title-replacement{display:none!important}

  .site-header{
    position:sticky;
    top:0;
    z-index:300;
    width:100%;
    height:68px;
    grid-template-columns:1fr auto auto;
    gap:8px;
    padding:6px 8px;
  }
  .brand-plank{
    min-width:0;
    width:max-content;
    max-width:100%;
    box-shadow:3px 3px #111;
  }
  .brand-plank img{flex:0 0 auto}
  .brand-plank span{white-space:nowrap}

  /* Compact buy button in top bar so it never overflows. */
  .header-actions{
    justify-self:end;
    min-width:0;
  }
  .header-actions .cta{
    display:block;
    white-space:nowrap;
    padding:9px 10px;
    font-size:12px;
    box-shadow:3px 3px #111;
  }

  /* Hero image is shown exactly once and at its natural mobile aspect ratio. */
  .hero{
    width:100%;
    overflow:hidden;
    background:#071a0c;
  }
  .hero picture{
    display:block;
    width:100%;
    line-height:0;
  }
  .hero picture img{
    display:block;
    width:100%;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
  }

  /* The generated mobile artwork already includes the visual buy/CA card.
     Keep the real interactive card directly below it, compact and usable. */
  .hero-buybox{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    transform:none;
    width:calc(100% - 16px);
    margin:8px auto 14px;
    padding:10px;
    border-width:4px;
    box-shadow:4px 4px #111;
  }
  .hero-buybox>span{
    font-size:12px;
    margin:8px 0 3px;
  }
  .hero-cta{
    font-size:17px;
    padding:12px 8px;
  }
  .ca-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .ca-row code{
    min-width:0;
    font-size:13px;
    padding:11px 9px;
  }
  .ca-row button{
    padding:0 13px;
    font-size:14px;
  }

  /* Fixed bottom navigation without covering content. */
  .mobile-bottom{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:310;
    height:58px;
    border-top:4px solid #111;
    box-shadow:0 -4px 12px #0008;
  }
  .mobile-bottom a{
    display:grid;
    place-items:center;
    min-width:0;
    padding:7px 2px;
    font-size:12px;
    line-height:1;
  }
  body{padding-bottom:58px}

  /* Content cards always fit the viewport. */
  .story,.lower-world,.propaganda,.site-footer{
    width:100%;
    max-width:100vw;
    overflow:hidden;
  }
  .panel img,.prop-grid img{
    max-width:100%;
    height:auto;
  }
  .lower-world{
    padding-left:9px;
    padding-right:9px;
  }
  .buy-path,.parchment,.outlaws{
    max-width:100%;
  }
}

@media(max-width:390px){
  .site-header{grid-template-columns:1fr auto}
  .brand-plank span{font-size:19px}
  .brand-plank img{width:43px;height:43px}
  .brand-plank{height:51px;padding-right:7px}
  .header-actions .cta{font-size:11px;padding:8px 7px}
}


/* =========================================================
   REAL RESPONSIVE HERO
   Uses one visual scene as artwork only.
   All title, BUY and CA controls are actual HTML and clickable.
   ========================================================= */

.hero{
  position:relative;
  width:100%;
  min-height:760px;
  overflow:hidden;
  background:#159ee7;
  border-bottom:6px solid #111;
}

.hero-scene{
  position:absolute;
  inset:0;
  background-image:url("assets/propaganda-hero.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  z-index:0;
}

/* cover the original Propaganda title with a correctly sized parchment */
.hero-title{
  position:absolute;
  z-index:4;
  left:10.8%;
  top:7%;
  width:53%;
  min-height:31%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:24px 28px;
  color:#080b08;
  background:
    radial-gradient(circle at 12% 18%,#f7dfa0 0 2px,transparent 3px),
    radial-gradient(circle at 80% 30%,#d7a354 0 1px,transparent 2px),
    linear-gradient(#f4d992,#dfad61);
  border:5px solid #17110b;
  box-shadow:8px 8px #111;
  transform:rotate(-1deg);
}
.hero-title:after{
  content:"";
  position:absolute;
  inset:8px;
  border:2px dashed #a26a30;
  pointer-events:none;
}
.hero-wordmark{
  position:relative;
  z-index:1;
  font-size:clamp(86px,10.5vw,180px);
  line-height:.77;
  letter-spacing:-.055em;
  color:#050805;
  text-shadow:4px 4px #bb873e;
}
.hero-wordmark span{
  color:#0aa034;
}
.hero-subtitle{
  position:relative;
  z-index:1;
  margin-top:26px;
  font-family:"Permanent Marker";
  font-size:clamp(22px,2.1vw,38px);
  line-height:1.02;
  color:#08732a;
}

.hero-buybox{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:2.8%;
  transform:translateX(-50%);
  width:min(590px,46vw);
  background:linear-gradient(#c67d39,#8c4d20);
  border:5px solid #111;
  box-shadow:7px 7px #111;
  padding:12px 17px 15px;
}

/* Remove obsolete desktop/mobile screenshot overlays entirely */
.hero picture,
.desktop-title-replacement{
  display:none!important;
}

/* Tablet */
@media(max-width:1000px){
  .hero{min-height:700px}
  .hero-title{
    left:7%;
    top:5%;
    width:60%;
    min-height:28%;
  }
  .hero-wordmark{font-size:clamp(72px,12vw,130px)}
  .hero-subtitle{font-size:clamp(18px,2.7vw,30px);margin-top:20px}
  .hero-buybox{width:min(610px,63vw)}
}

/* Real mobile composition — not an image mockup */
@media(max-width:700px){
  .site-header{
    position:sticky;
    top:0;
    z-index:300;
    height:66px;
    grid-template-columns:auto 1fr auto;
    padding:6px 7px;
    gap:6px;
  }
  .brand-plank{
    height:52px;
    padding:3px 8px 3px 4px;
    box-shadow:3px 3px #111;
  }
  .brand-plank img{width:44px;height:44px}
  .brand-plank span{font-size:21px}
  .main-nav{display:none}
  .header-actions .circle{display:none}
  .header-actions .cta{
    font-size:12px;
    padding:9px 9px;
    white-space:nowrap;
    box-shadow:3px 3px #111;
  }

  .hero{
    min-height:790px;
    height:calc(100svh - 66px);
    max-height:900px;
    overflow:hidden;
  }
  .hero-scene{
    /* Keep Trolli, castle and coins visible while the HTML title covers original title text */
    background-size:auto 100%;
    background-position:57% center;
  }

  .hero-title{
    left:5%;
    right:5%;
    top:2.3%;
    width:auto;
    min-height:0;
    padding:17px 14px 16px;
    border-width:4px;
    box-shadow:5px 5px #111;
    transform:rotate(-.5deg);
  }
  .hero-title:after{inset:6px}
  .hero-wordmark{
    font-size:clamp(72px,22vw,118px);
    line-height:.78;
  }
  .hero-subtitle{
    margin-top:15px;
    font-size:clamp(18px,5vw,27px);
    line-height:1.02;
  }

  .hero-buybox{
    left:4%;
    right:4%;
    bottom:2.5%;
    transform:none;
    width:auto;
    padding:10px;
    border-width:4px;
    box-shadow:4px 4px #111;
  }
  .hero-buybox>span{
    margin:8px 0 3px;
    font-size:12px;
  }
  .hero-cta{
    padding:12px 7px;
    font-size:17px;
  }
  .ca-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .ca-row code{
    min-width:0;
    padding:11px 9px;
    font-size:13px;
  }
  .ca-row button{
    padding:0 13px;
    font-size:14px;
  }

  /* keep the real website content below the hero */
  .story{
    display:grid;
    grid-template-columns:1fr;
  }
  .panel{
    height:auto!important;
  }
  .panel img{
    width:100%;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }

  .mobile-bottom{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:58px;
    z-index:310;
    border-top:4px solid #111;
    box-shadow:0 -4px 12px #0008;
  }
  body{padding-bottom:58px}
}

@media(max-width:430px){
  .site-header{grid-template-columns:auto 1fr auto}
  .brand-plank span{font-size:18px}
  .brand-plank img{width:42px;height:42px}
  .header-actions .cta{font-size:10px;padding:8px 6px}

  .hero{min-height:740px}
  .hero-scene{
    background-size:auto 100%;
    background-position:59% center;
  }
  .hero-title{top:2%;left:4%;right:4%;padding:15px 10px}
  .hero-wordmark{font-size:clamp(66px,22vw,98px)}
  .hero-subtitle{font-size:16px;margin-top:12px}
  .hero-buybox{left:3%;right:3%;bottom:2%}
}


/* =========================================================
   FINAL HERO FIX
   Title is integrated into the artwork.
   Only real HTML controls sit above/below it.
   ========================================================= */

.hero{
  position:relative;
  min-height:0!important;
  height:auto!important;
  overflow:hidden;
  background:#0b2815;
  border-bottom:6px solid #111;
}

.hero-art{
  display:block;
  width:100%;
  line-height:0;
}
.hero-art img{
  display:block;
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
}

/* kill all old title/background overlays from previous builds */
.hero-scene,
.hero-title,
.desktop-title-replacement{
  display:none!important;
}

/* real clickable BUY / CA panel over the lower hero on desktop */
.hero-buybox{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:3.2%;
  transform:translateX(-50%);
  width:min(590px,46vw);
  margin:0;
  background:linear-gradient(#c67d39,#8c4d20);
  border:5px solid #111;
  box-shadow:7px 7px #111;
  padding:12px 17px 15px;
}

@media(max-width:700px){
  .site-header{
    position:sticky;
    top:0;
    z-index:300;
    height:66px;
  }

  .hero{
    overflow:visible;
  }

  .hero-art,
  .hero-art img{
    width:100%;
    height:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
  }

  /* On mobile the interactive controls are real HTML below the art. */
  .hero-buybox{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    transform:none;
    width:calc(100% - 16px);
    margin:8px auto 15px;
    padding:10px;
    border-width:4px;
    box-shadow:4px 4px #111;
  }

  .hero-cta{
    font-size:17px;
    padding:12px 8px;
  }

  .ca-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .ca-row code{
    min-width:0;
    font-size:13px;
    padding:11px 9px;
  }
  .ca-row button{
    font-size:14px;
    padding:0 13px;
  }

  body{
    padding-bottom:58px;
  }
}

@media(max-width:410px){
  .hero-buybox{
    width:calc(100% - 12px);
  }
  .ca-row{
    grid-template-columns:1fr;
  }
  .ca-row button{
    border-left:0;
    border-top:3px solid #111;
    padding:11px;
  }
}


/* ===== CRITICAL HERO VISIBILITY FIX ===== */
.hero .hero-art{
  display:block !important;
  width:100%;
  line-height:0;
}
.hero .hero-art img{
  display:block !important;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
}
@media(max-width:700px){
  .hero .hero-art{
    display:block !important;
  }
  .hero .hero-art img{
    display:block !important;
    width:100%;
    height:auto !important;
    object-fit:contain !important;
  }
}