/* Homepage only. Use each site's existing type and color tokens. */
.mc-home {
  --paper: var(--psp-paper, var(--shto-paper));
  --card: var(--psp-card, var(--shto-card));
  --ink: var(--psp-ink, var(--shto-ink));
  --quiet: var(--psp-ink2, var(--shto-ink2));
  --line: var(--psp-line, var(--shto-line));
  --accent: var(--psp-otext, var(--shto-act));
  --tone: var(--psp-teal, var(--shto-slate));
  --wash: var(--psp-tint, var(--shto-slate-bg));
  --radius: var(--psp-r, var(--shto-r));
}
.mc-home section { scroll-margin-top: 1rem }
.mc-home h1, .mc-home h2, .mc-home h3 { text-wrap: balance }
.mc-home p { color: var(--quiet) }
.mc-frame { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px) }
.mc-hero { padding-block: clamp(24px, 3vw, 40px); background: var(--card); border-bottom: 1px solid var(--line) }
.mc-hero-grid, .mc-help-grid, .mc-feature-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center; gap: clamp(22px, 5vw, 72px)
}
.mc-hero h1 { font-size: clamp(2.05rem, 3.65vw, 3.35rem); margin-bottom: .23em; letter-spacing: -.035em }
.mc-hero .mc-lede { max-width: 56ch; font-size: clamp(.98rem, 1.3vw, 1.13rem); margin: 0 0 1.1rem }
.mc-kicker { display: block; color: var(--tone); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7em }
.mc-hero form { margin: 0; min-width: 0 }
.mc-hero form label:has(input), .mc-hero input { min-width: 0 }
.mc-hero .shto-search label { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden }
.mc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin-top: .65rem }
.mc-actions a, .mc-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 700; font-size: .95rem }
.mc-visual { padding: clamp(18px, 3vw, 34px); color: var(--tone); background: var(--wash); border-radius: var(--radius); border: 1px solid var(--line) }
.mc-visual p { color: inherit; margin: 0 }
.mc-visual h2 { font-size: clamp(1.45rem, 2.5vw, 2.2rem) }
.mc-split { display: grid; grid-template-columns: 1fr 1fr; margin: 1.05rem 0 .7rem; overflow: hidden; border-radius: 8px; font-size: .88rem; font-weight: 700; }
.mc-split span { padding: .6rem .8rem; color: #171512; background: #ff8d53 }
.mc-split span + span { background: #214d55; color: #fff }
.mc-ship .mc-visual { border-left: 5px solid var(--shto-orange); border-radius: 0 var(--radius) var(--radius) 0 }
.mc-address { margin: .45rem 0 0 }
.mc-address div { display: grid; grid-template-columns: 5.4em 1fr; gap: .6rem; padding-block: .48rem; border-top: 1px dashed currentColor }
.mc-address dt { font: 700 .75rem/1.8 var(--shto-mono); letter-spacing: .06em; text-transform: uppercase }
.mc-address dd { margin: 0; font-size: .93rem }
.mc-section { padding-block: clamp(28px, 5vw, 61px); border-bottom: 1px solid var(--line) }
.mc-categories { padding-top: clamp(26px, 3vw, 38px) }
.mc-section h2 { font-size: clamp(1.66rem, 3.1vw, 2.55rem); margin-bottom: .26em }
.mc-intro { max-width: 66ch; margin-bottom: 1rem }
.mc-cards { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .72rem }
.mc-cards li, .mc-reasons li, .mc-guide li { margin: 0 }
.mc-cards a {
  display: grid; grid-template-columns: 72px 1fr; align-items: center; min-height: 72px; height: 100%;
  overflow: hidden; background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); font-weight: 700
}
.mc-cards a:hover { border-color: var(--accent); text-decoration: underline }
.mc-cards img { width: 72px; height: 72px; object-fit: cover; display: block }
.mc-cards span { padding: .36rem .55rem; font-size: clamp(.85rem, 1.35vw, 1rem); line-height: 1.23; overflow-wrap: anywhere }
.mc-catalog-link { display: flex; justify-content: center; margin-top: .75rem }
.mc-reasons { list-style: none; padding: 0; margin: 1rem 0 .4rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem }
.mc-reasons li { border-left: 3px solid var(--tone); background: var(--card); padding: 1rem 1.15rem; border-radius: 0 var(--radius) var(--radius) 0 }
.mc-reasons h3, .mc-guide h3 { margin: 0 0 .3rem }
.mc-reasons p, .mc-guide p { margin: 0 }
.mc-guide { list-style: none; padding: 0; margin: 1.3rem 0 .6rem; counter-reset: mc-step; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem }
.mc-guide li { counter-increment: mc-step; border-top: 2px solid var(--tone); padding: .8rem .3rem 0 0 }
.mc-guide li::before { content: "0" counter(mc-step); display: block; color: var(--tone); font-weight: 700; margin-bottom: .32rem; font-variant-numeric: tabular-nums }
.mc-ship .mc-guide { grid-template-columns: repeat(2,minmax(0,1fr)) }
.mc-ship .mc-guide li { border-top: 0; border-left: 2px solid var(--tone); padding: .2rem .4rem .5rem .8rem }
.mc-help { background: var(--card) }
.mc-help-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: clamp(20px, 4vw, 52px) }
.mc-help h3 { margin-bottom: .25rem }
.mc-help p { margin-bottom: .5rem }
.mc-help ul { margin-bottom: .25rem }
.mc-qc { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: .75rem 0 }
.mc-home figure { margin: 0 }
.mc-home figure img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) * .6) }
.mc-qc img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper) }
.mc-home figcaption { font-size: .84rem; color: var(--quiet); line-height: 1.35; padding-top: .35rem }
.mc-feature-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); align-items: start }
.mc-look { max-width: 320px; justify-self: end }
.mc-look img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 44% }
.mc-feature .mc-actions { margin-top: .1rem }
@media (max-width: 860px) {
  .mc-cards { grid-template-columns: repeat(3,minmax(0,1fr)) }
  .mc-guide { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media (max-width: 620px) {
  .mc-hero-grid, .mc-reasons, .mc-help-grid { grid-template-columns: minmax(0,1fr) }
  .mc-hero .mc-visual { display: none }
  .mc-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem }
  .mc-cards a { grid-template-columns: 45px 1fr; min-height: 51px }
  .mc-cards img { width: 45px; height: 49px }
  .mc-guide { gap: .75rem }
  .mc-guide p { font-size: .93rem }
  .mc-feature-grid { grid-template-columns: 1fr }
  .mc-look { max-width: min(100%, 270px); justify-self: start }
}


@media (max-width: 450px) {
  body:has(.mc-ship) .shto-top__in { padding-inline: 14px; gap: 9px }
  body:has(.mc-ship) .shto-brand__name { max-width: 108px; font-size: .72rem }
  body:has(.mc-ship) .shto-menu { padding-inline: 10px }
  .mc-hero form { padding: 5px }
  .mc-hero form button { min-height: 44px; padding-inline: 13px }
  .mc-hero form input { min-height: 44px; padding-inline: 8px; font-size: 16px }
  .mc-hero .mc-actions { column-gap: .78rem }
  .mc-hero .mc-actions a { font-size: .875rem }
}
@media (max-width: 360px) {
  body:has(.mc-ship) .shto-top .brandmark img { width: 96px }
  .mc-hero h1 { font-size: 1.75rem }
}