/* ClawPod — responsive.
   Desktop reference is the 1440px design canvas. Tiers:
   ≤1200 dense desktop · ≤1024 tablet · ≤900 stage overlays reflow · ≤760 mobile · ≤480 narrow phone */

/* ---------------- ≤1200: dense desktop ---------------- */
@media (max-width:1200px){
  :root{--gutter:24px}
  .nav{padding:20px 24px}
  .nav__links{gap:28px;font-size:17px}
  .hero__card--chat,.hero__card--log{left:24px}
  .hero__stack{right:24px}
  .hero__note{right:24px}
  .h2{font-size:42px}
  .h2--lg{font-size:44px}
  .h2--md{font-size:38px}
  /* short user bubbles keep one line only while the stage is wide enough for it */
  .bubble--nowrap{white-space:normal;max-width:85%}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .expand-grid{grid-template-columns:1fr 1fr}
}

/* ---------------- ≤1024: tablet ---------------- */
@media (max-width:1024px){
  .hero{height:820px}
  .hero__title{font-size:54px}
  .hero__sub{font-size:19px}
  /* the floating glass UI is illustrative — it stops earning its space once it overlaps the cast */
  .hero__card--chat,.hero__card--log,.hero__stack,.hero__ticker{display:none}
  .team-grid{grid-template-columns:1fr 1fr}
  .role-card--lead{grid-row:auto;grid-column:1/-1}
  .boundary-grid,.boundary-grid.boundary-grid--3{grid-template-columns:1fr 1fr}
  .boundary-grid--3 > :last-child{grid-column:1/-1} /* 3장 → 2+1: 마지막(강조) 카드 전폭 */
  .cap-grid{grid-template-columns:1fr}
  .partners__grid{grid-template-columns:1fr;gap:32px}
  .consult__grid{grid-template-columns:1fr;gap:36px}
  .faq{grid-template-columns:1fr;gap:16px}
  .carousel{width:80%}
}

/* ---------------- ≤900: stage overlays reflow below the imagery ---------------- */
@media (max-width:900px){
  .stepper{--stepper-pad:18px;--stepper-stage-max:100vw}
  .stepper .h2{font-size:clamp(24px,5vw,30px);line-height:1.12}
  .stepper .lede{font-size:14px;margin-top:8px}
  .stepper .pillbar{gap:6px;margin-top:14px}
  .stepper .pillbar button{padding:6px 11px;font-size:12.5px}
  html.js .stepper.is-stepper-ready .stepper__sticky{
    justify-content:flex-start;height:100svh;min-height:100svh;overflow:hidden;
    -webkit-overflow-scrolling:touch;
  }
  html.js .stepper.is-stepper-ready .stage{
    width:100%;max-width:none;display:flex;flex-direction:column;
    max-height:calc(100svh - 210px);min-height:0;overflow:hidden;
  }
  .stage{aspect-ratio:auto}
  .stage__media{position:relative;aspect-ratio:2880/1480;flex:0 0 auto}
  html.js .stepper.is-stepper-ready .stage__media{
    aspect-ratio:auto;height:clamp(120px,30svh,220px);
  }
  .stage__overlay{position:relative;inset:auto;padding:16px;pointer-events:auto;min-height:0}
  html.js .stepper.is-stepper-ready .stage__overlay{overflow-y:auto;flex:1}
  .stage__labels,.stage__scrim,.stage__glow{display:none}

  .seq1__stage .stage__overlay{display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .seq1-panel,.seq1-actions,.chatbar{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;
    width:auto;max-width:none;
  }
  .seq1-panel--paused{justify-content:center}
  .seq1-actions{justify-content:center}
  .chatbar{width:auto}
  .chatbar__text{white-space:normal;overflow:visible;text-overflow:clip}

  .rooms{position:relative;inset:auto;padding:0;gap:10px}
  .room--center{width:100%;min-width:0;max-width:none;max-height:none}
  html.js .stepper.is-stepper-ready .room--center .room__body{max-height:none}
  .stage__foot{
    position:relative;left:auto;bottom:auto;transform:none;display:block;
    margin:14px auto 0;white-space:normal;text-align:center;max-width:100%;
  }
  .stage__caption--tight{white-space:normal;flex-wrap:wrap}
  html.js .stepper.is-stepper-ready .stage__caption--tight{margin-top:12px}
}

/* ---------------- ≤760: mobile ---------------- */
@media (max-width:760px){
  :root{--gutter:16px;--section-gap:64px;--section-gap-lg:72px}
  .section{padding:var(--section-gap-lg) 0 64px}

  /* nav */
  .nav{grid-template-columns:auto auto;justify-content:space-between;padding:16px}
  .nav__toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:0 9px;border-radius:var(--radius-pill);
    background:var(--cp-glass-14);border:1px solid var(--cp-glass-35);
    backdrop-filter:blur(var(--blur-glass-soft));-webkit-backdrop-filter:blur(var(--blur-glass-soft));
    cursor:pointer;
  }
  .nav__toggle span{display:block;height:2px;background:#fff;border-radius:2px}
  .nav__menu{
    display:none;grid-column:1/-1;flex-direction:column;gap:14px;margin-top:14px;
    background:rgba(29,35,64,.55);border:1px solid var(--cp-glass-25);border-radius:var(--radius-card);
    backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));padding:18px;
  }
  .nav.is-open .nav__menu{display:flex}
  .nav__links{flex-direction:column;gap:14px;justify-content:flex-start;font-size:17px}
  .nav__actions{justify-content:flex-start;flex-wrap:wrap}
  .nav__wordmark{font-size:21px}

  /* hero */
  .hero{height:660px}
  .hero.hero--short{height:440px}
  .hero--short .hero__copy{top:112px}
  .hero--short .hero__fade{height:100px}
  /* briefing 크기는 --brief-c 하한(duo 230px 과 같은 비율)이 정한다. 좌우 에이전트는 인물 안쪽 가장자리를
     이전 배치(그룹 180% 확대)와 같은 화면 비율(좌 10.31% / 우 86.24%)에 두어 가장자리에 걸친 모습을 유지한다.
     .2795 = .78 × 860/2400(좌 인물 오른쪽 끝), .2987 = .78 × (2400-1481)/2400(우 인물 왼쪽 끝) */
  .cast--left{left:calc(10.31% - var(--brief-c) * .2795)}
  .cast--right{right:calc(13.76% - var(--brief-c) * .2987)}
  /* duo 는 고정 크기라 좌표만 좁은 화면에 맞춘다 */
  .cast--duo-human{left:4%}
  .cast--duo-agent{left:42%}
  .hero__fade{height:180px}
  .hero__copy{top:104px;padding:0 20px}
  .hero__title{font-size:38px;letter-spacing:-.02em}
  .hero__sub{font-size:15.5px;margin-top:14px}
  .hero__copy .cta{font-size:15px;padding:10px 12px 10px 22px;margin-top:22px}
  .hero__copy .cta__chip{width:32px;height:32px;font-size:14px}
  .hero__note{left:16px;right:auto;bottom:12px;font-size:9px;letter-spacing:.18em}

  /* reference strip */
  .adopt{padding:16px 0 24px}
  .adopt__name{padding:7px 14px;font-size:13px}
  .adopt__rows{gap:10px;margin-top:12px}
  .adopt__track{gap:8px;padding-right:8px}

  /* type */
  .h2,.h2--md,.h2--lg{font-size:30px;line-height:1.2}
  .h2--sm{font-size:26px}
  .lede,.lede--sm{font-size:16px}
  .pillbar{gap:6px;margin-top:24px}
  .pillbar button{padding:7px 14px;font-size:13px}

  /* stages */
  .stage{margin-top:28px}
  html.js .stepper.is-stepper-ready .stage{margin-top:16px;max-height:calc(100svh - 210px)}
  html.js .stepper.is-stepper-ready .stage__media{height:clamp(112px,26svh,190px)}
  .stage__caption{margin-top:18px;gap:6px;flex-direction:column;align-items:center;text-align:center}
  .stage__caption strong{font-size:16px}
  .stage__caption span{font-size:14.5px}
  .seq1-panel--roles,.seq1-panel--log,.seq1-panel--meeting{padding:14px}
  .seq1-panel--paused{font-size:13.5px;padding:10px 16px;gap:10px;white-space:normal}
  .seq1-panel__pause{width:32px;height:32px}
  .chatbar{gap:8px;padding:8px 10px 8px 12px}
  .chatbar__tag{font-size:12px;padding:5px 11px}
  .chatbar__text{font-size:13px}
  .room--pill{font-size:12px;white-space:normal}
  .room__pill{padding:8px 14px;text-align:left}
  .stage__foot{font-size:12px;padding:8px 14px}

  /* content grids */
  .team-grid,.boundary-grid,.cases-grid,.steps,.expand-grid,.cap-grid{grid-template-columns:1fr;gap:12px}
  .role-card--lead{padding:22px}
  .role-card__claim{font-size:20px;margin-top:16px}
  .card--outline{padding:24px}
  .card__name{font-size:20px}
  .why-intro,.why-row{grid-template-columns:1fr;gap:12px}
  .why-intro__claim{font-size:20px}
  .why-row__q{font-size:18px}
  .why-kicker{font-size:22px;margin-top:40px}
  .rule-note{flex-direction:column;align-items:center;text-align:center;gap:6px}

  /* workspace / carousel */
  .workspace{padding:36px 0 44px}
  .carousel{width:100%}
  .carousel__nav--prev{left:6px}
  .carousel__nav--next{right:6px}
  .carousel__nav{width:38px;height:38px;background:rgba(255,255,255,.8)}
  .tagcloud span{font-size:12px;padding:6px 12px}
  .capability{padding:48px 0 72px}

  /* pricing / faq */
  .pricing{margin-top:56px;padding:56px 0}
  .plans{grid-template-columns:1fr;gap:12px}
  .pricing__title{font-size:26px}
  .faq{margin-top:56px}
  .faq summary{font-size:15px}

  /* partners / consult / footer */
  .partner-row{grid-template-columns:1fr;gap:8px}
  .about-history .why-row{grid-template-columns:72px 1fr;gap:12px;padding:12px 0}
  .about-history .why-row__q{font-size:14px}
  .about-history .why-row__a{font-size:14.5px}
  .cases-grid.cases-grid--3,.boundary-grid.boundary-grid--3{grid-template-columns:1fr}
  .consult{padding:80px 0}
  .consult__lede{font-size:16px}
  .site-footer__offices{grid-template-columns:1fr;gap:28px}
  .site-footer__legal{gap:14px;font-size:12.5px}
  .site-footer__top{gap:14px}
}

/* ---------------- low viewport height: keep the pinned stories readable ---------------- */
@media (min-width:901px) and (max-height:760px){
  .stepper{--stepper-pad:20px;--stepper-stage-max:calc((100svh - 220px) * 1.9459)}
  .stepper .h2{font-size:clamp(30px,5svh,40px)}
  .stepper .pillbar{margin-top:20px}
  .stepper .stage{margin-top:28px}
  .stepper .stage__caption{margin-top:16px}
  html.js .stepper.is-stepper-ready .seq1-panel__msgs{max-height:26svh}
  html.js .stepper.is-stepper-ready .room--center .room__body{max-height:46svh}
}

/* ---------------- ≤480: narrow phone ---------------- */
@media (max-width:480px){
  .hero{height:600px}
  .hero.hero--short{height:400px}
  .hero--short .hero__copy{top:96px}
  .hero--short .hero__fade{height:56px}
  .hero__title{font-size:33px}
  .hero__copy{top:96px}
  .h2,.h2--md,.h2--lg{font-size:27px}
  .expand-card{padding:22px}
  .section{padding:64px 0 56px}
}