/* Mandet homepage — page-level styles (from the design's <helmet> block) */
:root{--surface-page:#FFFFFF;--paper-1:#FFFFFF;--focus-ring:#131110;--accent:#131110;--accent-strong:#131110;--text-link:#131110;--block-500:#131110;--block-600:#131110}
.mono{filter:grayscale(1)}
html{scroll-behavior:smooth}
html{overflow-x:clip}
/* Archivo's word space is very narrow (2–3px at UI sizes); open it slightly so words never visually merge */
body{margin:0;background:#FFFFFF;color:#292522;font-family:'Archivo',system-ui,sans-serif;word-spacing:.05em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#131110;text-decoration:none}a:hover{color:#57504A}
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(19,17,16,.35)}100%{box-shadow:0 0 0 10px rgba(19,17,16,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-carrier:hover{opacity:1!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 */
  #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 */
  /* 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-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 24px!important}
  /* contact */
}

@media (max-width:380px){
}


/* 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}
}

/* ---------- Hero mark ---------- */
.m-hero{--mark:clamp(150px,16vw,230px)}
.hero-mark{position:absolute;right:24px;top:150px;width:var(--mark);pointer-events:none;transform-origin:50% 60%;transition:transform .25s cubic-bezier(.2,0,0,1);will-change:transform}
.hero-mark svg{display:block;width:100%;height:auto;overflow:visible}
.hero-mark path{fill:#131110;transform-box:fill-box;transform-origin:50% 100%;animation:mdMark .9s cubic-bezier(.2,0,0,1) both}
.hero-mark path:nth-child(1){animation-delay:.35s}
.hero-mark path:nth-child(2){animation-delay:.5s}
.hero-mark path:nth-child(3){animation-delay:.65s}
.hero-mark path:nth-child(4){animation-delay:.8s}
@keyframes mdMark{from{opacity:0;transform:translateY(55%) scale(.9)}to{opacity:1;transform:none}}
@media (min-width:761px){
  /* keep the headline clear of the mark */
  .m-h1{max-width:min(1120px,calc(100% - var(--mark) - 56px))!important}
}
@media (max-width:760px){
  .hero-mark{top:42px;right:20px;width:56px}
}
@media (max-width:380px){
  .hero-mark{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-mark,.hero-mark path{animation:none;transition:none}
}