/* 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:var(--space-28px);font-size:var(--fs-17)}
  .hero__card--chat,.hero__card--log{left:24px}
  .hero__stack{right:24px}
  .hero__note{right:24px}
  .h2{font-size:42px}
  .h2--lg{font-size:var(--fs-44)}
  .h2--md{font-size:var(--fs-38)}
  /* 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:var(--fs-19)}
  /* the floating glass UI is illustrative. Absolutely placed it would cover the cast, so below 1024px the two cards that
     carry the subtitle's claims (the user decides: chat; the roles discuss and the lead delegates: log) move into the
     sky between the CTA and the cast. Copy and cards are in flow here and the hero's height is that flow plus a band for
     the bottom-anchored cast, so a longer headline (EN, 320px) pushes the cards down instead of under the CTA.
     :not(.hero--short) keeps the about page on its fixed heights. Workspace stack and ticker stay hidden. */
  .hero__stack,.hero__ticker{display:none}
  /* band ≥ the tallest cast head above the hero bottom + 24px: the briefing cast scales with the width up to 1024px (head ≈ 37vw) */
  .hero:not(.hero--short){height:auto;padding-bottom:max(364px,calc(37vw + 24px))}
  .hero:not(.hero--short) .hero__copy{position:relative;top:auto;padding-top:118px}
  .hero__float{
    position:relative;z-index:var(--z-3);margin-top:var(--space-40px);padding:0 var(--gutter);
    display:flex;justify-content:center;align-items:flex-start;gap:var(--space-4);
  }
  .hero__float .hero__card{position:relative;left:auto;top:auto;bottom:auto}
  .hero__float .hero__card--log{margin-top:72px}
  .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:nth-child(odd){grid-column:1/-1} /* 3장 → 2+1: 마지막(강조) 카드 전폭, 카드 수가 홀수일 때만 */
  .cap-grid{grid-template-columns:1fr}
  .partners__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .consult__grid{grid-template-columns:1fr;gap:var(--space-36px)}
  /* the one-column rule above is (0,1,0) and loses to .consult--form .consult__grid in sections.css,
     so the columns have to be restated here or the card keeps a second, empty column on phones */
  .consult--form .consult__grid{grid-template-columns:1fr;grid-template-areas:"intro" "form" "aside";row-gap:var(--space-8)}
  .cform input[type=text],.cform input[type=email],.cform select,.cform textarea,.cselect__btn{font-size:var(--fs-16)}
  .faq{grid-template-columns:1fr;gap:var(--space-4)}
  .carousel{width:80%}
}

/* ---------------- ≤900: stage overlays reflow below the imagery ----------------
   Also below 600px of height (landscape phones, 320x568): there app.js does not pin the steppers, and this reflow shows
   every message in normal flow instead of a pinned window too short for the chat (measured: 0-60px). */
@media (max-width:900px),(max-height:599px){
  .stepper{--stepper-pad:18px;--stepper-stage-max:100vw}
  .stepper .h2{font-size:clamp(24px,5vw,30px);line-height:1.12}
  .stepper .lede{font-size:var(--fs-14);margin-top:var(--space-2)}
  .stepper .pillbar{gap:var(--space-6px);margin-top:var(--space-14px)}
  .stepper .pillbar button{padding:var(--pad-chip-compact);font-size:var(--fs-12_5)}
  /* one row that scrolls sideways instead of 2-4 wrapped rows; the auto margins keep a row that fits centred.
     app.js keeps the selected tab in view. Edge fades hint at the tabs past the screen edge. */
  html.js .stepper.is-stepper-ready .pillbar{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding:var(--space-1) var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent,var(--mask-opaque) var(--gutter),var(--mask-opaque) calc(100% - var(--gutter)),transparent);
    mask-image:linear-gradient(90deg,transparent,var(--mask-opaque) var(--gutter),var(--mask-opaque) calc(100% - var(--gutter)),transparent);
  }
  html.js .stepper.is-stepper-ready .pillbar::-webkit-scrollbar{display:none}
  html.js .stepper.is-stepper-ready .pillbar button{flex:none}
  html.js .stepper.is-stepper-ready .pillbar button:first-child{margin-left:auto}
  html.js .stepper.is-stepper-ready .pillbar button:last-child{margin-right:auto}
  html.js .stepper.is-stepper-ready .stepper__sticky{
    justify-content:flex-start;height:100svh;min-height:100svh;overflow:hidden;
    -webkit-overflow-scrolling:touch;
  }
  /* pinned: the stage takes what the header and caption leave of 100svh and only the message lists scroll inside it.
     The header and caption never shrink; the stage shrinks from its content height, so a short scene leaves no empty box. */
  html.js .stepper.is-stepper-ready .stepper__sticky > :not(.stage){flex-shrink:0}
  html.js .stepper.is-stepper-ready .stage{
    width:100%;max-width:none;display:flex;flex-direction:column;
    flex:0 1 auto;min-height:0;overflow:hidden;
  }
  .stage{aspect-ratio:auto}
  .stage__media{position:relative;aspect-ratio:2880/1480;flex:0 0 auto}
  /* band heights: the whole team (00, 04) is about 1.6 band heights wide, so min(...,45vw) keeps it on screen; 03's
     four members are about one band height wide, so their band may reach 63vw and is ~1.4x the 00 band; 02 a middle
     band beside its meeting list; 01 a short band beside its two cards, where the 408% zoom still makes the lead
     ~1.4x+ his size in 00. The height eases between scenes instead of jumping the cards below. */
  html.js .stepper.is-stepper-ready .seq1__stage .stage__media{aspect-ratio:auto;height:min(clamp(72px,13svh,130px),45vw)}
  html.js .stepper.is-stepper-ready .seq1__stage:is([data-scene="0"],[data-scene="4"]) .stage__media{height:min(clamp(120px,30svh,260px),45vw)}
  html.js .stepper.is-stepper-ready .seq1__stage[data-scene="1"] .stage__media{height:min(clamp(100px,16svh,160px),45vw)}
  html.js .stepper.is-stepper-ready .seq1__stage[data-scene="3"] .stage__media{height:min(clamp(168px,42svh,364px),63vw)}
  html.js .stepper.is-stepper-ready .seq1__stage[data-scene="2"] .stage__media{height:min(clamp(96px,15svh,180px),45vw)}
  /* SEQ2 imagery is a blurred backdrop (alt="") — it sits behind the rooms instead of taking its own band, pinned or not */
  .seq2__stage .stage__media{position:absolute;inset:0;aspect-ratio:auto;height:auto}
  /* SEQ1 picture band: framed on the five seated agents with their chairs, never cutting them (user decision
     2026-09-24). Boxes measured on the 2880px art: seq1-00 x 30-80% y 14-73%, seq1-02 x 22-46% y 38.5-74%. The picture
     is scaled so that the box plus 1% on each side fills the band height (seq1-00 164%, seq1-02 266.7%) and the box
     centre sits on the band centre; the rest of the office may crop. Where the picture is narrower than the band its own left/right edges fade
     into the stage. Scenes switch without the crossfade here (two differently framed pictures would double the office).
     Re-measure when the art changes: check-chat-visibility A6 holds these boxes. */
  .seq1__stage .stage__media{overflow:hidden;transition:height var(--dur-fast) var(--ease-out)}
  .seq1__stage .stage__layer{
    inset:auto;left:50%;top:-21.3%;height:164%;width:auto;max-width:none;transform:translateX(-55%);transition:none;
    --pic-mask:linear-gradient(90deg,transparent 0%,var(--mask-opaque) 8%,var(--mask-opaque) 92%,transparent 100%);
    -webkit-mask-image:var(--pic-mask);mask-image:var(--pic-mask);
  }
  .seq1__stage .stage__layer[data-scene="2"]{top:-100%;height:266.7%;transform:translateX(-34%)}
  /* per step (user decision 2026-09-24): 01 zooms on the team lead (x 30.5-38% y 14.5-37% of seq1-00 with his chair,
     408%) and fades out the desks to his right; 03 frames the four members (x 48-80% y 13.5-73%) on a band about
     1.4x the 00 band and fades out the lead to their left; 04 frames the whole team like 00 */
  .seq1__stage .stage__layer[data-scene="1"]{
    top:-55.1%;height:408%;transform:translateX(-34.25%);
    --pic-mask:linear-gradient(90deg,transparent 0%,var(--mask-opaque) 8%,var(--mask-opaque) 41%,transparent 46%);
  }
  .seq1__stage .stage__layer[data-scene="3"]{
    top:-20.4%;height:163.3%;transform:translateX(-64%);
    --pic-mask:linear-gradient(90deg,transparent 40%,var(--mask-opaque) 45%,var(--mask-opaque) 92%,transparent 100%);
  }
  /* narrow cards: a chip or an attachment wraps instead of running past the card edge */
  .stage :is(.chip,.att){white-space:normal;max-width:100%}
  .stage__overlay{position:relative;inset:auto;padding:var(--space-4);pointer-events:auto;min-height:0}
  html.js .stepper.is-stepper-ready .stage__overlay{overflow:hidden;flex:0 1 auto}
  .stage__labels,.stage__scrim,.stage__glow{display:none}

  .seq1__stage .stage__overlay{display:flex;flex-direction:column;gap:var(--space-3);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;
  }
  /* pinned: chat bar, stop buttons and the badge keep their size; the panels holding messages shrink and their list scrolls */
  html.js .stepper.is-stepper-ready .seq1__stage .stage__overlay > *{flex-shrink:0}
  html.js .stepper.is-stepper-ready .seq1__stage :is(.seq1-panel--roles,.seq1-panel--log,.seq1-panel--chat,.seq1-panel--report,.seq1-panel--meeting):not([hidden]){
    flex-shrink:1;min-height:0;display:flex;flex-direction:column;
  }
  /* scene 01 is about the roles card: it keeps every row, the chat beside it shrinks and scrolls */
  html.js .stepper.is-stepper-ready .seq1__stage .seq1-panel--roles:not([hidden]){flex-shrink:0}
  html.js .stepper.is-stepper-ready .seq1__stage .seq1-panel--log .timeline{min-height:0;overflow:auto}
  html.js .stepper.is-stepper-ready .seq1__stage .seq1-panel--log > :not(.timeline){flex-shrink:0}
  html.js .stepper.is-stepper-ready .seq1-panel__scroll{display:block;min-height:0;overflow:auto}
  html.js .stepper.is-stepper-ready .seq1-panel__msgs{max-height:none;min-height:0}
  .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:var(--space-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}
  /* pinned: the room pills and the foot keep their size, the centre room shrinks and its body scrolls */
  html.js .stepper.is-stepper-ready .seq2__stage .stage__overlay{display:flex;flex-direction:column}
  html.js .stepper.is-stepper-ready .seq2__stage .rooms{flex:0 1 auto;min-height:0;gap:var(--space-6px)}
  html.js .stepper.is-stepper-ready .seq2__stage .room--center{flex:0 1 auto;min-height:0}
  html.js .stepper.is-stepper-ready .seq2__stage .room--center .room__body{min-height:0}
  html.js .stepper.is-stepper-ready .seq2__stage .room--pill{font-size:var(--fs-11_5)}
  html.js .stepper.is-stepper-ready .seq2__stage .room__pill{padding:var(--pad-chip-sm)}
  html.js .stepper.is-stepper-ready .seq2__stage .stage__foot{flex-shrink:0}
  .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:var(--space-3)}
}

/* ---------------- ≤900 under 760px / 700px of height: tighter card gaps, then a smaller SEQ1 picture and padding ------- */
@media (max-width:900px) and (max-height:759px){
  html.js .stepper.is-stepper-ready .seq1__stage .stage__overlay{gap:var(--space-2)}
  /* scene 01 keeps the whole roles card and its chat: the card label repeats the selected tab and the empty input bar
     is only a placeholder there, so both give their height to the chat on short phones */
  html.js .stepper.is-stepper-ready .seq1__stage[data-scene="1"] :is(.seq1-panel--roles > .label,.chatbar){display:none}
}
/* unpinned (under 600px of height, any width): the SEQ1 picture is a band of its own, capped so it does not fill the screen */
@media (max-height:599px){
  .seq1__stage .stage__media{aspect-ratio:auto;height:min(clamp(120px,45vh,260px),45vw)}
  .seq1__stage[data-scene="3"] .stage__media{height:min(clamp(168px,63vh,364px),63vw)} /* members 1.4x as in 00 */
}
@media (max-width:900px) and (max-height:699px){
  .stepper{--stepper-pad:12px}
  html.js .stepper.is-stepper-ready .pillbar{margin-top:var(--space-2)}
  html.js .stepper.is-stepper-ready .stage__overlay{padding:var(--space-3)}
  html.js .stepper.is-stepper-ready .stepper__sticky > .stage__caption{margin-top:var(--space-2)}
  html.js .stepper.is-stepper-ready .seq1__stage .stage__media{height:min(clamp(56px,10svh,130px),45vw)}
  html.js .stepper.is-stepper-ready .stage{margin-top:var(--space-3)}
}

/* ---------------- ≤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:var(--space-4)}
  .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:var(--cp-white);border-radius:var(--radius-2px)}
  .nav__menu{
    display:none;grid-column:1/-1;flex-direction:column;gap:var(--space-14px);margin-top:var(--space-14px);
    background:var(--cp-navy-a55);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:var(--space-18px);
  }
  .nav.is-open .nav__menu{display:flex}
  .nav__links{flex-direction:column;gap:var(--space-14px);justify-content:flex-start;font-size:var(--fs-17)}
  .nav__actions{justify-content:flex-start;flex-wrap:wrap}
  .nav__wordmark{font-size:var(--fs-21)}

  /* 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:var(--fs-38);letter-spacing:-.02em}
  .hero__sub{font-size:var(--fs-15_5);margin-top:var(--space-14px)}
  .hero__copy .cta{font-size:var(--fs-15);padding:10px 12px 10px 22px;margin-top:var(--space-22px)}
  .hero__copy .cta__chip{width:32px;height:32px;font-size:var(--fs-14)}
  .hero__note{left:16px;right:auto;bottom:12px;font-size:var(--fs-9);letter-spacing:var(--type-label-track-tight)}
  /* one column, the log tucked over the chat's bottom padding so the pair still reads as layered glass. The cards drop
     their UI chrome (mark, input row) here to keep the cast close to the first screen; the messages all stay.
     The cast heads sit ~312px above the hero bottom at every phone width (fixed-size images), hence the 336px band. */
  .hero:not(.hero--short){padding-bottom:336px}
  .hero:not(.hero--short) .hero__copy{padding-top:104px}
  .hero__float{flex-direction:column;gap:0;max-width:calc(420px + 2 * var(--gutter));margin:var(--space-6) auto 0}
  .hero__float .hero__card-mark,.hero__float .hero__card-input{display:none}
  .hero__float .hero__card--chat{width:min(68%,260px);align-self:flex-start}
  .hero__float .hero__card--log{width:min(80%,300px);align-self:flex-end;margin-top:calc(-1 * var(--space-3))}

  /* reference strip */
  .adopt{padding:16px 0 24px}
  .adopt__name{padding:var(--pad-pill-sm);font-size:var(--fs-13)}
  .adopt__rows{gap:var(--space-10px);margin-top:var(--space-3)}
  .adopt__track{gap:var(--space-2);padding-right:var(--space-2)}

  /* type */
  .h2,.h2--md,.h2--lg{font-size:var(--fs-30);line-height:var(--lh-1_2)}
  .h2--sm{font-size:var(--fs-26)}
  .lede,.lede--sm{font-size:var(--fs-16)}
  .pillbar{gap:var(--space-6px);margin-top:var(--space-6)}
  .pillbar button{padding:var(--pad-pill-sm);font-size:var(--fs-13)}

  /* stages */
  .stage{margin-top:var(--space-28px)}
  html.js .stepper.is-stepper-ready .stage{margin-top:var(--space-4)}
  .stage__caption{margin-top:var(--space-18px);gap:var(--space-6px);flex-direction:column;align-items:center;text-align:center}
  .stage__caption strong{font-size:var(--fs-16)}
  .stage__caption span{font-size:var(--fs-14_5)}
  .seq1-panel--roles,.seq1-panel--log,.seq1-panel--meeting{padding:var(--space-14px)}
  .seq1-panel--paused{font-size:var(--fs-13_5);padding:var(--pad-pill);gap:var(--space-10px);white-space:normal}
  .seq1-panel__pause{width:32px;height:32px}
  .chatbar{gap:var(--space-2);padding:8px 10px 8px 12px}
  .chatbar__tag{font-size:var(--fs-12);padding:5px 11px}
  .chatbar__text{font-size:var(--fs-13)}
  .room--pill{font-size:var(--fs-12);white-space:normal}
  .room__pill{padding:var(--pad-pill-md);text-align:left}
  .stage__foot{font-size:var(--fs-12);padding:var(--pad-pill-md)}

  /* content grids */
  .team-grid,.boundary-grid,.cases-grid,.steps,.expand-grid,.cap-grid{grid-template-columns:1fr;gap:var(--space-3)}
  .price-basis{padding:var(--space-6)}
  .price-basis__grid{grid-template-columns:1fr;gap:var(--space-3)}
  .role-card--lead{padding:var(--space-22px)}
  .role-card__claim{font-size:var(--fs-20);margin-top:var(--space-4)}
  .card--outline{padding:var(--space-6)}
  .card__name{font-size:var(--fs-20)}
  .why-intro,.why-row{grid-template-columns:1fr;gap:var(--space-3)}
  .why-intro__claim{font-size:var(--fs-20)}
  .why-row__q{font-size:var(--fs-18)}
  .why-kicker{font-size:var(--fs-22);margin-top:var(--space-40px)}
  .rule-note{flex-direction:column;align-items:center;text-align:center;gap:var(--space-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:var(--cp-glass-80)}
  .tagcloud span{font-size:var(--fs-12);padding:6px 12px}
  .capability{padding:48px 0 72px}

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

  /* partners / consult / footer */
  .partner-row{grid-template-columns:1fr;gap:var(--space-2)}
  .about-history .why-row{grid-template-columns:72px 1fr;gap:var(--space-3);padding:12px 0}
  .about-history .why-row__q{font-size:var(--fs-14)}
  .about-history .why-row__a{font-size:var(--fs-14_5)}
  .cases-grid.cases-grid--3,.boundary-grid.boundary-grid--3{grid-template-columns:1fr}
  .consult{padding:var(--pad-section)}
  .consult__lede{font-size:var(--fs-16)}
  .cform{padding:20px 18px}
  .cform__grid{grid-template-columns:1fr;gap:var(--space-14px)}
  /* iOS Safari 는 16px 미만 입력칸에 포커스가 가면 화면을 확대한 뒤 되돌리지 않는다 */
  .site-footer__offices{grid-template-columns:1fr;gap:var(--space-28px)}
  .site-footer__legal{gap:var(--space-14px);font-size:var(--fs-12_5)}
  .site-footer__top{gap:var(--space-14px)}
}

/* ---------------- low viewport height: keep the pinned stories readable ----------------
   From 600px up only: below that the steppers are not pinned and the reflow block above lays them out. */
@media (min-width:901px) and (max-height:760px) and (min-height:600px){
  .stepper{--stepper-pad:20px;--stepper-stage-max:calc((100svh - 220px) * 1.9459)}
  .stepper .h2{font-size:clamp(30px,5svh,40px)}
  .stepper .pillbar{margin-top:var(--space-20px)}
  .stepper .stage{margin-top:var(--space-28px)}
  .stepper .stage__caption{margin-top:var(--space-4)}
  html.js .stepper.is-stepper-ready .seq1-panel__msgs{max-height:29svh}
  html.js .stepper.is-stepper-ready .room--center .room__body{max-height:46svh}
  /* SEQ2 header is taller than SEQ1 (lede + caption), so at this height its 16:8 stage ran 70-115px past the screen.
     Here the rooms stack in one column over the blurred backdrop like the phone layout, the stage takes the height the
     header leaves (sticky height instead of min-height) and the centre room body scrolls. No morph: rooms are in flow. */
  html.js .stepper.is-stepper-ready.seq2 .stepper__sticky{height:100svh}
  html.js .stepper.is-stepper-ready.seq2 .stage{margin-top:var(--space-3)}
  /* the seven SEQ2 tabs wrap to two rows here: one sideways-scrolling row as on phones */
  html.js .stepper.is-stepper-ready.seq2 .pillbar{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:var(--space-1) var(--gutter);
    -webkit-mask-image:linear-gradient(90deg,transparent,var(--mask-opaque) var(--gutter),var(--mask-opaque) calc(100% - var(--gutter)),transparent);
    mask-image:linear-gradient(90deg,transparent,var(--mask-opaque) var(--gutter),var(--mask-opaque) calc(100% - var(--gutter)),transparent);
  }
  html.js .stepper.is-stepper-ready.seq2 .pillbar::-webkit-scrollbar{display:none}
  html.js .stepper.is-stepper-ready.seq2 .pillbar button{flex:none}
  html.js .stepper.is-stepper-ready.seq2 .pillbar button:first-child{margin-left:auto}
  html.js .stepper.is-stepper-ready.seq2 .pillbar button:last-child{margin-right:auto}
  html.js .stepper.is-stepper-ready.seq2 .stepper__sticky > :not(.stage){flex-shrink:0}
  html.js .stepper.is-stepper-ready .seq2__stage{
    aspect-ratio:auto;width:min(100%,820px);flex:0 1 auto;min-height:0;
    display:flex;flex-direction:column;overflow:hidden;
  }
  html.js .stepper.is-stepper-ready .seq2__stage .stage__overlay{
    position:relative;inset:auto;padding:var(--space-4);pointer-events:auto;
    display:flex;flex-direction:column;flex:0 1 auto;min-height:0;overflow:hidden;
  }
  html.js .stepper.is-stepper-ready .seq2__stage .stage__glow{display:none}
  html.js .stepper.is-stepper-ready .seq2__stage .rooms{position:relative;inset:auto;padding:0;gap:var(--space-6px);flex:0 1 auto;min-height:0}
  html.js .stepper.is-stepper-ready .seq2__stage .room--center{width:100%;min-width:0;max-width:none;max-height:none;flex:0 1 auto;min-height:0}
  html.js .stepper.is-stepper-ready .seq2__stage .room--center .room__body{max-height:none;min-height:0}
  html.js .stepper.is-stepper-ready .seq2__stage .room--pill{font-size:var(--fs-11_5)}
  html.js .stepper.is-stepper-ready .seq2__stage .room__pill{padding:var(--pad-chip-sm)}
}

/* ---------------- pinned at ≤760px of height, any width: SEQ2 gives its lede and stage foot to the chat ----------------
   The foot carries the illustrative-content disclaimer, so the disclaimer moves under the caption (.stage__note). */
@media (max-height:760px){
  html.js .stepper.is-stepper-ready.seq2 .lede{display:none}
  html.js .stepper.is-stepper-ready .seq2__stage .stage__foot{display:none}
  html.js .stepper.is-stepper-ready .stage__caption--tight{flex-wrap:wrap}
  html.js .stepper.is-stepper-ready .stage__note{display:block;flex-basis:100%;font-size:var(--fs-12);color:var(--text-muted)}
}

/* ---------------- ≤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}
  .hero:not(.hero--short) .hero__copy{padding-top:96px}
  .h2,.h2--md,.h2--lg{font-size:var(--fs-27)}
  .expand-card{padding:var(--space-22px)}
  .section{padding:64px 0 56px}
}

/* =========================== 팀 상세 페이지 (salesforce-operations · security-operations) =========================== */
@media (max-width:760px){
  .hero.hero--team{height:auto;padding-bottom:110px}
  .hero--team .hero__copy{top:auto;padding-top:112px}
  .team-video{margin-top:-80px}
  .team-video__play{width:64px;height:64px}
  .team-video__cap{left:16px;right:16px;bottom:14px}
  .team-video__cap b{font-size:var(--fs-15)}
  .team-video__cap span{display:none}
}