@font-face{font-family:"Anton";src:url("/fonts/Anton-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
:root{--bone:#cfcece;--char:#0a0a09;--meat:#a62b1b;--line:#cdc8c0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--char);font-family:"IBM Plex Mono",monospace;overflow-x:hidden}
img{display:block;width:100%}a{text-decoration:none;color:inherit}button,input{font:inherit}
.site-header{position:sticky;top:0;z-index:10;min-height:86px;padding:12px 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--bone)}
.brand-lockup{display:block;width:215px;max-width:58vw}.brand-lockup img{width:100%;height:62px;object-fit:contain;object-position:left center}
.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 18px;border:1px solid var(--char);font-size:11px;letter-spacing:.08em;cursor:pointer}.btn-dark,.header-cta{background:var(--char);color:var(--bone)}
.hero{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);min-height:760px;border-bottom:1px solid var(--line)}
.hero-copy{min-width:0;padding:72px 4vw;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:10px;letter-spacing:.22em;margin-bottom:20px}
h1,h2,h3{font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;margin:0;letter-spacing:-.025em}
h1{font-size:clamp(74px,7vw,132px);line-height:.98;max-width:100%}
h2{font-size:clamp(52px,6vw,104px);line-height:.99}
h3{font-size:clamp(34px,3.7vw,58px);line-height:1}
.hero-copy p,.split-copy p,.signup-copy,.offer-grid p,.success-box p,.sauce-copy p,.how-grid p{font-size:14px;line-height:1.68}
.hero-copy p{max-width:620px;margin:30px 0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-visual{min-width:0;overflow:hidden}.hero-visual img{height:100%;object-fit:cover}
.ticker{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);padding:12px 0;background:var(--bone)}.ticker div{display:inline-block;font-family:"Anton";font-size:24px;letter-spacing:.07em;animation:scroll 18s linear infinite}@keyframes scroll{to{transform:translateX(-42%)}}

.how{padding:92px 4vw;border-bottom:1px solid var(--line);background:var(--bone)}.how-head{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:end;margin-bottom:40px}.how-head .eyebrow{align-self:start}.how-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--char);border-left:1px solid var(--char)}.how-grid article{padding:24px;min-height:280px;border-right:1px solid var(--char);border-bottom:1px solid var(--char)}.how-grid span{font-size:10px;letter-spacing:.16em}.how-grid h3{font-size:34px;margin:74px 0 12px}

.meat-range{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--char);border-bottom:1px solid var(--char)}.meat-range article{position:relative;min-height:420px;overflow:hidden;background:var(--bone)}.meat-range img{height:100%;object-fit:cover}.meat-range article>div{position:absolute;left:18px;bottom:18px;background:var(--bone);padding:14px 16px}.meat-range span{font-size:9px;letter-spacing:.16em}.meat-range h3{font-size:30px;margin-top:6px}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);border-left:1px solid var(--char);border-top:1px solid var(--char);margin:92px 4vw;background:var(--bone)}.offer-grid article{min-height:260px;padding:24px;border-right:1px solid var(--char);border-bottom:1px solid var(--char)}.offer-grid span{font-size:10px;letter-spacing:.16em}.offer-grid h2{font-size:42px;line-height:1.02;margin:54px 0 12px}
.split-block{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bone)}.split-image img{height:100%;object-fit:cover}.split-copy{padding:74px 4vw;display:flex;flex-direction:column;justify-content:center}.split-copy p{max-width:580px;margin-top:26px}
.sauce-strip{display:grid;grid-template-columns:34% 66%;align-items:stretch;border-bottom:1px solid var(--line);background:var(--bone)}.sauce-image{min-height:330px;overflow:hidden}.sauce-image img{height:100%;object-fit:cover}.sauce-copy{padding:44px 4vw;display:flex;flex-direction:column;justify-content:center;background:var(--bone)}.sauce-copy h3{font-size:46px}.sauce-copy p{max-width:620px;margin:18px 0 0}
.signup-section{padding:92px 4vw;background:var(--bone)}.signup-card{display:grid;grid-template-columns:46% 54%;background:var(--bone);border:1px solid var(--char)}.signup-image{position:relative;min-height:720px;overflow:hidden}.signup-image img{height:100%;object-fit:cover}.image-badge{position:absolute;left:22px;bottom:22px;background:var(--meat);color:#fff;font-family:"Anton";font-size:34px;line-height:.94;padding:16px 18px;transform:rotate(-3deg)}
.signup-form-wrap{padding:54px 4vw;display:flex;flex-direction:column;justify-content:center;background:var(--bone)}.lead-form{margin-top:24px}.lead-form label{display:block;margin-bottom:16px}.lead-form span{display:block;margin-bottom:7px;font-size:10px;letter-spacing:.16em}.lead-form input{width:100%;height:54px;border:1px solid var(--char);background:var(--bone);padding:0 14px;outline:none}.lead-form input:focus{box-shadow:0 0 0 3px rgba(166,43,27,.12)}.full{width:100%}.form-note{font-size:10px;margin-top:12px}.success-box{margin-top:26px;border:1px solid var(--char);padding:24px;background:var(--bone)}
footer{padding:30px 4vw;border-top:1px solid var(--char);display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.14em;background:var(--bone)}footer img{width:180px;height:58px;object-fit:contain;object-position:left center}

@media(max-width:1180px){
  .hero{grid-template-columns:1fr}
  .hero-copy{padding-bottom:52px}
  h1{font-size:clamp(72px,11vw,124px)}
  .hero-visual{min-height:560px}
  .how-head{grid-template-columns:1fr}
  .how-grid{grid-template-columns:repeat(2,1fr)}
  .meat-range{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:820px){
  .site-header{min-height:74px;padding:10px 18px}.brand-lockup{width:165px}.brand-lockup img{height:50px}
  .hero-copy,.split-copy,.signup-form-wrap,.signup-section,.sauce-copy,.how{padding-left:18px;padding-right:18px}
  .hero-visual{min-height:480px}
  .meat-range,.offer-grid,.split-block,.signup-card,.sauce-strip{grid-template-columns:1fr}
  .offer-grid{margin:56px 18px}
  .how-grid{grid-template-columns:1fr}
  .how-grid article{min-height:210px}.how-grid h3{margin-top:42px}
  .signup-image{min-height:520px}.sauce-image{min-height:380px}
}
@media(max-width:520px){
  .header-cta,.btn{font-size:9px;padding:11px 12px}
  h1{font-size:clamp(58px,18vw,84px)}
  h2{font-size:clamp(48px,15vw,76px)}
  .hero-copy{padding-top:48px}
  footer{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 18px}
}

/* v4 responsive image correction: preserve full campaign/product compositions */
@media(max-width:1180px){
  .hero-visual,
  .meat-range article,
  .split-image,
  .sauce-image,
  .signup-image{
    background:var(--bone);
  }

  .hero-visual img,
  .meat-range img,
  .split-image img,
  .sauce-image img,
  .signup-image img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center center;
  }

  .hero-visual,
  .split-image,
  .sauce-image,
  .signup-image{
    min-height:0;
  }

  .meat-range article{
    min-height:0;
  }
}

@media(max-width:820px){
  .hero-visual,
  .signup-image,
  .sauce-image{
    min-height:0;
  }
}


/* =========================================================
   STOER v5 — final responsive/readability polish
   ========================================================= */

/* More readable global small text */
.eyebrow{
  font-size:12px;
  line-height:1.4;
  letter-spacing:.18em;
}
.hero-copy p,
.split-copy p,
.signup-copy,
.offer-grid p,
.success-box p,
.sauce-copy p,
.how-grid p{
  font-size:16px;
  line-height:1.65;
}
.header-cta,.btn{
  font-size:12px;
}
.form-note{
  font-size:12px;
  line-height:1.5;
}
.lead-form span{
  font-size:12px;
}
.lead-form input{
  font-size:15px;
}

/* HOW IT WORKS: integrated instead of floating title */
.how{
  padding:88px 4vw 96px;
}
.how-head{
  display:block;
  margin-bottom:42px;
  max-width:980px;
}
.how-head .eyebrow{
  margin-bottom:18px;
}
.how-head h2{
  font-size:clamp(58px,7vw,108px);
  line-height:.95;
  max-width:850px;
}
.how-grid article{
  min-height:270px;
}
.how-grid h3{
  font-size:clamp(30px,2.8vw,44px);
  line-height:1;
  margin:62px 0 15px;
}
.how-grid p{
  max-width:31ch;
}

/* Signup: no box/frame around the form section */
.signup-card{
  border:0 !important;
  grid-template-columns:minmax(0,48%) minmax(0,52%);
  align-items:center;
}

/* Dog campaign image: always show the complete composition, never crop it */
.signup-image{
  min-height:0 !important;
  height:auto;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bone);
  padding:0;
}
.signup-image img{
  display:block;
  width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.image-badge{
  left:24px;
  bottom:24px;
}

/* Keep all section backgrounds absolutely identical */
body,
.site-header,
.ticker,
.how,
.offer-grid,
.split-block,
.sauce-strip,
.sauce-copy,
.signup-section,
.signup-card,
.signup-form-wrap,
.signup-image,
footer{
  background:var(--bone) !important;
}

/* Better readable form */
.signup-form-wrap{
  padding:64px 5vw;
}
.signup-copy{
  max-width:520px;
}
.lead-form{
  max-width:620px;
}
.lead-form input{
  height:58px;
}

/* Desktop safety: never allow display text to escape its column */
.hero-copy,
.hero-copy h1,
.split-copy,
.split-copy h2,
.sauce-copy,
.sauce-copy h3,
.signup-form-wrap,
.signup-form-wrap h2{
  min-width:0;
  max-width:100%;
  overflow-wrap:normal;
}
.hero-copy h1{
  font-size:clamp(72px,7vw,128px);
}

/* Tablet */
@media(max-width:1180px){
  .how{
    padding-top:72px;
  }
  .how-head h2{
    font-size:clamp(58px,9vw,96px);
  }

  /* Full campaign image remains intact */
  .signup-card{
    grid-template-columns:1fr;
  }
  .signup-image{
    width:100%;
  }
  .signup-image img{
    width:100%;
    height:auto !important;
  }
  .signup-form-wrap{
    padding:58px 7vw 72px;
  }
}

/* Mobile / small tablet */
@media(max-width:820px){
  .eyebrow{
    font-size:11px;
  }
  .hero-copy p,
  .split-copy p,
  .signup-copy,
  .offer-grid p,
  .success-box p,
  .sauce-copy p,
  .how-grid p{
    font-size:15px;
  }
  .how{
    padding-top:60px;
    padding-bottom:68px;
  }
  .how-head{
    margin-bottom:28px;
  }
  .how-head h2{
    font-size:clamp(54px,15vw,84px);
  }
  .how-grid article{
    min-height:0;
    padding:22px;
  }
  .how-grid h3{
    margin-top:34px;
    font-size:34px;
  }
  .signup-form-wrap{
    padding:46px 18px 64px;
  }
  .signup-image{
    padding:0;
  }
  .image-badge{
    left:16px;
    bottom:16px;
    font-size:28px;
  }
}

/* Narrow phones */
@media(max-width:520px){
  .brand-lockup{
    width:150px;
  }
  .hero-copy h1{
    font-size:clamp(56px,18vw,80px);
  }
  .how-head h2{
    font-size:clamp(50px,16vw,72px);
  }
  .header-cta,.btn{
    font-size:10px;
  }
  .lead-form input{
    height:56px;
  }
}


/* v7: seamless ticker, language switch and hero campaign image */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.lang-toggle{
  display:inline-flex;
  border:1px solid var(--char);
  border-radius:999px;
  overflow:hidden;
  background:var(--bone);
}
.lang-btn{
  border:0;
  background:transparent;
  color:var(--char);
  padding:10px 12px;
  min-width:44px;
  font-size:11px;
  line-height:1;
  cursor:pointer;
}
.lang-btn.active{
  background:var(--char);
  color:var(--bone);
}

.ticker{
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  padding:12px 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:ticker-loop 24s linear infinite;
}
.ticker-track span{
  flex:none;
  padding-right:4rem;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:24px;
  letter-spacing:.07em;
}
@keyframes ticker-loop{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.hero-visual{
  background:var(--bone);
}
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* On stacked layouts, preserve the complete editorial subject instead of clipping it. */
@media(max-width:1180px){
  .hero-visual img{
    height:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
  }
  .hero-visual{
    min-height:0 !important;
  }
}

@media(max-width:640px){
  .header-actions{gap:7px}
  .lang-btn{padding:9px 8px;min-width:36px;font-size:10px}
  .ticker-track span{font-size:20px;padding-right:2.5rem}
}


/* v8 — final hero image fix: never crop the campaign image at any viewport */
.hero-visual{
  min-height:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--bone);
}

.hero-visual img{
  display:block;
  width:100%;
  height:auto !important;
  max-width:100%;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Keep the full image visible when hero columns sit side by side */
@media(min-width:1181px){
  .hero{
    align-items:stretch;
  }
  .hero-visual{
    padding:0;
  }
  .hero-visual img{
    align-self:center;
  }
}

/* Keep the full image visible on tablet and phone too */
@media(max-width:1180px){
  .hero-visual{
    min-height:0 !important;
  }
  .hero-visual img{
    width:100%;
    height:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}


/* =========================================================
   STOER v9 FINAL
   Goal: no text or image cropping on small screens
   ========================================================= */

/* Safe hero layout */
.hero{
  align-items:center;
}
.hero-copy{
  min-width:0;
}
.hero-copy h1{
  max-width:100%;
  word-break:normal;
}
.hero-visual{
  min-width:0;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  background:var(--bone);
  padding:0;
}
.hero-visual img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100%;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* General text safety */
h1,h2,h3,p,.eyebrow,.form-note,.lead-form span{
  max-width:100%;
}
.offer-grid article,
.how-grid article,
.sauce-copy,
.split-copy,
.signup-form-wrap{
  min-width:0;
}

/* Stronger responsive protection */
@media (max-width: 1280px){
  .hero{
    grid-template-columns:minmax(0, 44%) minmax(0, 56%);
  }
  .hero-copy h1{
    font-size:clamp(68px, 8vw, 116px);
  }
}

@media (max-width: 1180px){
  .hero{
    grid-template-columns:1fr !important;
  }
  .hero-copy{
    padding-bottom:34px;
  }
  .hero-copy h1{
    font-size:clamp(62px, 11vw, 102px);
    line-height:.97;
  }
  .hero-visual{
    width:100%;
    padding:0 18px 10px;
  }
  .hero-visual img{
    width:100% !important;
    height:auto !important;
  }
}

@media (max-width: 820px){
  body{
    overflow-x:hidden;
  }
  .hero-copy,
  .split-copy,
  .signup-form-wrap,
  .signup-section,
  .sauce-copy,
  .how{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .hero-copy h1{
    font-size:clamp(54px, 15vw, 82px) !important;
    line-height:.98 !important;
  }
  .hero-copy p,
  .split-copy p,
  .signup-copy,
  .offer-grid p,
  .success-box p,
  .sauce-copy p,
  .how-grid p{
    font-size:15px !important;
    line-height:1.62 !important;
  }

  /* Stacked image sections: show full images, never crop */
  .meat-range,
  .offer-grid,
  .split-block,
  .signup-card,
  .sauce-strip{
    grid-template-columns:1fr !important;
  }

  .meat-range article,
  .split-image,
  .sauce-image,
  .signup-image{
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    background:var(--bone) !important;
  }

  .meat-range img,
  .split-image img,
  .sauce-image img,
  .signup-image img{
    display:block;
    width:100% !important;
    height:auto !important;
    max-width:100%;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .meat-range article > div{
    position:static !important;
    margin:0;
    background:var(--bone);
    padding:14px 18px 18px;
  }
}

@media (max-width: 520px){
  .brand-lockup{
    width:152px !important;
  }
  .hero-copy{
    padding-top:40px !important;
  }
  .hero-copy h1{
    font-size:clamp(48px, 16vw, 72px) !important;
  }
  .how-head h2{
    font-size:clamp(42px, 14vw, 66px) !important;
    line-height:.98 !important;
  }
  .offer-grid h2{
    font-size:40px !important;
    line-height:1.02 !important;
  }
  .how-grid h3,
  .sauce-copy h3{
    font-size:32px !important;
  }
  .header-actions{
    gap:6px;
  }
  .header-cta,.btn{
    font-size:10px !important;
    padding:11px 12px !important;
  }
}


/* v10 background normalization */
html, body,
main, section, article, header, footer, div,
.hero, .hero-copy, .hero-visual,
.ticker, .ticker-track,
.how, .how-head, .how-grid, .how-grid article,
.meat-range, .meat-range article, .meat-range article > div,
.offer-grid, .offer-grid article,
.split-block, .split-image, .split-copy,
.sauce-strip, .sauce-image, .sauce-copy,
.signup-section, .signup-card, .signup-image, .signup-form-wrap,
.success-box, .lang-toggle {
  background-color: var(--bone) !important;
}

/* keep only intended accent areas */
.image-badge,
.lang-btn.active,
.header-cta,
.btn-dark {
  background: var(--char);
}


/* v12 final: restore EARLY ACCESS badge to STOER red */
.image-badge{
  background:var(--meat) !important;
  color:#fff !important;
}


/* v13 final cleanup: pure white background everywhere */
:root{
  --bone:#ffffff !important;
}

html, body,
main, section, article, header, footer, div,
.hero, .hero-copy, .hero-visual,
.ticker, .ticker-track,
.how, .how-head, .how-grid, .how-grid article,
.meat-range, .meat-range article, .meat-range article > div,
.offer-grid, .offer-grid article,
.split-block, .split-image, .split-copy,
.sauce-strip, .sauce-image, .sauce-copy,
.signup-section, .signup-card, .signup-image, .signup-form-wrap,
.success-box, .lang-toggle {
  background:#ffffff !important;
}

/* Keep STOER accent actions in meat red */
.image-badge,
.hero-actions .btn-dark {
  background:var(--meat) !important;
  color:#ffffff !important;
  border-color:var(--meat) !important;
}

/* Keep the header JOIN THE LIST button black */
.header-cta{
  background:var(--char) !important;
  color:#ffffff !important;
  border-color:var(--char) !important;
}


/* v14 final polish: exact hero background + unified red buttons */
:root {
  --bone:#f4f5f6 !important;
}

html, body,
main, section, article, header, footer, div,
.hero, .hero-copy, .hero-visual,
.ticker, .ticker-track,
.how, .how-head, .how-grid, .how-grid article,
.meat-range, .meat-range article, .meat-range article > div,
.offer-grid, .offer-grid article,
.split-block, .split-image, .split-copy,
.sauce-strip, .sauce-image, .sauce-copy,
.signup-section, .signup-card, .signup-image, .signup-form-wrap,
.success-box, .lang-toggle {
  background:#f4f5f6 !important;
}

/* all website buttons in the same STOER red */
.header-cta,
.btn,
.lang-btn,
.lang-btn.active,
.hero-actions .btn-dark,
.lead-form .btn-dark {
  background:var(--meat) !important;
  color:#ffffff !important;
  border-color:var(--meat) !important;
}

.lang-toggle {
  border-color:var(--meat) !important;
}

/* slight visual distinction for active language without changing the color family */
.lang-btn.active {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45);
}


/* v15: language switch only */
.lang-btn,
.lang-btn.active{
  background:var(--char) !important;
  color:#ffffff !important;
  border-color:var(--char) !important;
  box-shadow:none !important;
}
.lang-toggle{
  border-color:var(--char) !important;
}


/* v16 final language switch: active = black, inactive = white */
.lang-toggle{
  background:#ffffff !important;
  border:1px solid var(--char) !important;
}
.lang-btn{
  background:#ffffff !important;
  color:var(--char) !important;
  border:0 !important;
  box-shadow:none !important;
}
.lang-btn.active{
  background:var(--char) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}


/* v17 launch: picture wrappers, form states, legal, footer links */
picture{display:contents}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-legal{font-size:11px;line-height:1.5;margin-top:10px;color:#4a4a48;max-width:620px}
.form-legal a{text-decoration:underline}
.form-error{font-size:12px;margin-top:10px;color:var(--meat)}
.lead-form button[disabled]{opacity:.6;cursor:wait}
.footer-links{display:flex;flex-wrap:wrap;gap:18px 28px}
.footer-links a{text-decoration:none;border-bottom:1px solid transparent}
.footer-links a:hover{border-bottom-color:var(--char)}
@media(max-width:820px){footer{flex-direction:column;align-items:flex-start;gap:16px}}
.legal{padding:72px 4vw 96px;max-width:900px}
.legal h1{font-size:clamp(48px,8vw,96px);line-height:.98;margin-bottom:36px}
.legal h2{font-size:clamp(32px,4vw,48px);margin:56px 0 16px}
.legal p,.legal li{font-size:15px;line-height:1.7;max-width:70ch}
.legal a{text-decoration:underline}
.legal .eyebrow{margin-bottom:16px}