/* Mandet homepage — page-level styles (from the design's <helmet> block) */
:root{--surface-page:#FFFFFF;--paper-1:#FFFFFF}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{margin:0;background:#FFFFFF;color:#292522;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#131110;text-decoration:none}a:hover{color:#B96A0A}
button{font:inherit}
.am-btn{font-weight:600;text-decoration:none}
/* Buttons rendered as links keep their own text colour on hover */
a.am-btn--primary,a.am-btn--primary:hover{color:var(--action-primary-fg)}
a.am-btn--secondary,a.am-btn--secondary:hover{color:var(--text-body)}

@keyframes mdWord{from{opacity:0;transform:translateY(0.45em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes mdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes mdUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mdPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes mdRing{0%{box-shadow:0 0 0 0 rgba(224,138,12,.55)}100%{box-shadow:0 0 0 10px rgba(224,138,12,0)}}
@keyframes mdTravel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes mdMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mdFill{from{width:0}}
@keyframes mdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mdScan{0%{top:0}100%{top:100%}}

/* Hover states (the design's style-hover attributes) */
.hv-nav:hover{background:#F5F3EF!important;color:#131110!important}
.hv-pause:hover{animation-play-state:paused!important}
.hv-row:hover{background:#1C1917!important;padding-left:18px!important}
.hv-carrier:hover{filter:none!important;opacity:1!important}
.hv-card:hover{transform:translateY(-4px)!important;box-shadow:0 30px 50px -30px rgba(19,17,16,.35)!important}
.hv-lift:hover{transform:translateY(-4px)!important}

/* ---------- Mobile ---------- */
.m-menu-only{display:none!important}
.m-nav-toggle{display:none;appearance:none;border:1px solid #E8E2DA;background:#FFFFFF;border-radius:6px;width:40px;height:36px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.m-nav-toggle span{display:block;width:16px;height:1.5px;background:#131110;border-radius:2px;transition:transform .2s cubic-bezier(.2,0,0,1),opacity .2s}
.m-nav-toggle:focus-visible{outline:none;box-shadow:var(--focus-shadow)}
.m-nav.is-open .m-nav-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.m-nav.is-open .m-nav-toggle span:nth-child(2){opacity:0}
.m-nav.is-open .m-nav-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:760px){
  .m-nav-toggle{display:inline-flex}
  .m-nav-links{display:none!important}
  .m-nav.is-open .m-nav-links{display:flex!important;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch!important;gap:2px;padding:8px 16px 16px;background:#FFFFFF;border-bottom:1px solid #EEEBE6;box-shadow:0 24px 40px -24px rgba(19,17,16,.25);animation:mdIn .2s cubic-bezier(.2,0,0,1)}
  .m-nav.is-open .m-nav-links a{font-size:16px;padding:14px 12px!important}
  .m-hero{padding-top:48px!important;padding-bottom:48px!important}
  .m-hero-cta{justify-self:start!important}
  .m-section{padding-top:80px!important}
  .m-nav{background:#FFFFFF!important}
  /* services become an accordion: the card opens under the selected row */
  .m-svc-card{position:static!important;margin:6px 0 14px;box-shadow:none!important}
  .m-svc-card>div:first-child{height:150px!important}
  #markets{margin-top:80px!important}
  .m-markets{padding-top:72px!important;padding-bottom:72px!important}
  .m-contact-section{margin-top:80px!important}
  .m-footer{margin-top:80px!important}
}

@media (max-width:560px){
  .m-gutter,.m-hero,.m-section,.m-markets,.m-contact-section,.m-footer>div{padding-left:20px!important;padding-right:20px!important}
  /* routing console */
  .m-diagram{padding:24px 16px!important}
  .m-checkout{padding:10px!important}
  .m-router{padding:12px!important}
  .m-router-label{display:none}
  .m-psp{min-width:0!important;padding:8px 10px!important;gap:8px!important}
  .m-feed{padding:16px 12px 20px!important}
  .m-method{display:none}
  .m-diagram [style*="font:600 26px/1"]{font-size:20px!important}
  .m-diagram [style*="background:#1C1917;padding:16px"]{padding:12px!important}
  /* product cards */
  .m-product{padding:20px!important;gap:44px!important;border-radius:14px!important}
  .m-product div:has(>.m-stat){padding:12px!important}
  .m-stat{font-size:19px!important}
  .m-pill{white-space:nowrap}
  /* Printify diagram */
  .m-okta{flex:none;transform:scale(.72)}
  .m-section article [style*="26px/1.1"]{font-size:21px!important}
  .m-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 24px!important}
  /* contact */
  .m-contact{padding:40px 20px!important;gap:32px!important;border-radius:16px!important}
  .m-contact-card{padding:20px!important}
}

@media (max-width:380px){
  .m-diagram{padding:20px 12px!important}
  .m-diagram>div:first-child{grid-template-columns:auto minmax(18px,1fr) auto minmax(18px,1fr) auto!important}
  .m-okta{transform:scale(.6)}
}


/* Very small phones (iPhone SE and narrower) */
@media (max-width:380px){
  .m-h1{font-size:34px!important}
  .m-brand{flex-wrap:wrap;row-gap:8px}
  .m-brand>span:nth-child(2){font-size:26px!important}
  .m-attempt-head{flex-wrap:wrap;row-gap:8px}
  .m-product{padding:16px!important}
}
@media (max-width:340px){
  .m-gutter,.m-hero,.m-section,.m-markets,.m-contact-section,.m-footer>div{padding-left:16px!important;padding-right:16px!important}
  .m-nav-cta{display:none!important}
  .m-nav.is-open .m-menu-only{display:block!important}
  .m-h1{font-size:30px!important}
  .m-psp>span:last-child{display:none}
  #feed>div,.m-feed>div:first-child{grid-template-columns:42px minmax(0,1fr) 72px!important}
  #feed>div>span:nth-child(3),.m-feed>div:first-child>span:nth-child(3){display:none}
  .m-diagram{padding:20px 10px!important}
  .m-okta{transform:scale(.52)}
  .m-contact{padding:32px 16px!important}
  .m-contact-card{padding:16px!important}
}