/* Shared responsive layer: common mobile sizing and overflow guards. */
@media(max-width:360px) {
  .eyebrow,
.label,
.sec-label,
.suite-k,
.type-system-role,
.subgroup-title,
.field label{
    letter-spacing:.11em
  }
  .choice-desc,
.usage-list li,
.menu-row .mdesc,
.section-sub,
.lead,
.guard-text{
    font-size:11.2px;
    line-height:1.46
  }
}
@media(max-width:420px) {
  .brand-masthead-logo {
    width:52px;
  }

  .pat-grid,
.guard-grid{
    gap:6px
  }
  .choice-grid,
.check-list,
.fields.two,
.logo-grid,
.suite-grid,
.marks{
    gap:8px
  }
  .guard-top {
    gap:6px
  }
  .lang-switch a,.lang-switch span {
    min-width:26px;
    height:21px;
    padding:0 4px;
    font-size:8.2px
  }
  .logo-meta,
.suite-meta{
    padding:10px
  }
  .menu-row {
    grid-template-columns:112px minmax(0,1fr);
    gap:10px
  }

  .card,
.usage-card,
.choice,
.guard-card,
.subgroup{
    padding:13px
  }
  .site-menu {
    min-width:198px
  }
  .tiu-row {
    grid-template-columns:84px minmax(0,1fr);
    gap:10px
  }
  .topbar-inner {
    padding-left:18px;
    padding-right:18px
  }
  
  .type-system-aa,.type-system-aa.body {
    font-size:clamp(38px,11vw,54px)
  }
  .type-system-top {
    grid-template-columns:56px minmax(0,1fr);
    gap:12px
  }
  :root {
    --grid-gap:8px
  }
}
@media(max-width:760px) {
  .usage-title,
.choice-name,
.section-title{
    font-size:clamp(18px,4.4vw,24px);
    line-height:1.16
  }
  .choice-axis,
.suite-k,
.type-system-role,
.type-system-dev,
.field label{
    font-size:clamp(8.2px,2.2vw,10px)
  }
  .eyebrow,.label,.sec-label {
    font-size:10px;
    line-height:1.5
  }
  .forms {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .pat-grid,
.guard-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }
  .choice-grid,
.check-list,
.fields.two,
.logo-grid,
.suite-grid,
.marks{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .hero-motion .hm-line:first-child {
    white-space:nowrap
  }
  
  .logo-meta,
.suite-meta{
    padding:clamp(10px,2.8vw,16px)
  }
  .logo-sample {
    height:clamp(96px,25vw,118px);
    padding:10px
  }
  
  .menu-row {
    grid-template-columns:132px minmax(0,1fr);
    gap:14px;
    align-items:baseline;
    padding:15px 0
  }
  .mock {
    height:clamp(92px,23vw,112px)
  }

  .pv{
    height:clamp(76px,20vw,100px)
  }

  .card,
.usage-card,
.choice,
.guard-card,
.subgroup{
    padding:clamp(14px,3.4vw,22px)
  }

  .site-trigger,
.eyebrow,
.label,
.sec-label,
.suite-k,
.type-system-role,
.choice-axis,
.subgroup-title,
.field label,
.menu-row .mdesc strong{
    letter-spacing:.16em
  }
  .choice-desc,
.usage-list li,
.menu-row .mdesc,
.section-sub,
.lead,
.guard-text{
    font-size:clamp(11.6px,3.15vw,14px);
    line-height:1.52
  }
  .logo-title,
.guard-title,
.menu-row .mname{
    font-size:clamp(16px,3.8vw,20px)
  }
  .suite-stage {
    min-height:clamp(118px,31vw,158px);
    padding:clamp(14px,3.2vw,24px)
  }
  .thumb {
    flex-basis:64px;
    height:82px
  }

  .tiu-row {
    grid-template-columns:104px minmax(0,1fr);
    gap:14px;
    align-items:center
  }
  .topbar-inner {
    gap:12px
  }
  
  .type-system-dev {
    position:static;
    display:inline-block;
    margin-top:7px
  }
  .type-system-name {
    padding-right:0
  }
  .type-system-top {
    grid-template-columns:72px minmax(0,1fr);
    gap:16px;
    align-items:center
  }
  
  .wrap {
    padding-left:clamp(18px,5vw,24px);
    padding-right:clamp(18px,5vw,24px)
  }
  :root {
    --grid-gap:10px;
    --box-pad:clamp(14px,3.4vw,20px);
    --box-pad-sm:clamp(12px,3vw,18px);
    --box-pad-lg:clamp(18px,4vw,28px);
    --inner-x:clamp(10px,2.8vw,16px)
  }
  h1,.hero h1 {
    font-size:clamp(31px,8.4vw,44px);
    line-height:1.06
  }
}
@media(min-width:640px) {
  .thumb {
    flex-basis:88px;
    height:110px
  }
}
@media(min-width:680px) {
  .check-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .choice-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .fields.two {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
@media(prefers-reduced-motion:no-preference) {
  .hero-axis-draw {
    width:0
  }
  .hero-motion .hm-line {
    opacity:0
  }
  .hero-motion .hm-line>i {
    display:inline-block;
    font-style:inherit;
    transform:translateY(108%);
    opacity:0
  }
  .hero-motion.run .hm-line {
    opacity:1
  }
  .hero-motion.run .hm-line>i {
    animation:hmRise .85s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay:var(--hm-d,0s)
  }
  .hero-motion.run ~ .hero-axis-draw {
    animation:hmDraw 1s cubic-bezier(.65,0,.35,1) forwards;
    animation-delay:.1s
  }
  .reveal {
    opacity:0;
    transform:translateY(14px);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)
  }
  .reveal.in {
    opacity:1;
    transform:none
  }
  .transition-screen.run .transition-line {
    animation:transitionLine .58s cubic-bezier(.65,0,.35,1) forwards
  }
}
@supports (text-wrap:balance) {
  h1,
.hero h1,
.section-title,
.sec-label,
.usage-title,
.menu-row .mname,
.choice-name,
.logo-title,
.guard-title{
    text-wrap:balance
  }
}
@media(max-width:520px) {
  :root {
    --page-x:22px
  }
}