/* svc-app2.css — /services/app-2 앱 개발 상세 2안(2026-10-16). home-a.css(메인·허브 판) 뒤에 붙는다(pageCss2).
   구간마다 판 색: 첫 화면 흰 바탕 + 앱 화면 띠 / 개발 분야 남색 + 가로 펼침 / 주요 기능 파랑 + 세로 탭 / 개발 방식 흰 바탕 비교 / 진행 과정 노랑 가로 넘김 / 결과물 연한 바탕 문서 묶음 / 질문 / 문의. */
.v-app2 .s{min-height:0;display:block;padding:clamp(88px,13vh,140px) 0}
.v-app2 h2{font-size:clamp(34px,3.4vw,54px);line-height:1.3;letter-spacing:-.03em}
.ti{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ti) center/contain no-repeat;mask:var(--ti) center/contain no-repeat}
.btn.a2-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}.btn.a2-line:hover{background:var(--navy);color:#fff}

/* 1 첫 화면 — 노랑 바탕, 왼쪽 제목, 오른쪽 가득 기울어진 앱 화면 일곱 줄(10-17 시안 6-2 확정).
   휴대폰 틀 .ph 는 --pw(폭) 하나로 크기가 정해짐(home-a 의 --w 와 겹치지 않게). 줄 .a2-lane 은 자동 흐름(transform) + 스크롤 밀림(translate, --sy × --k) */
.a2-hero{padding:0!important;overflow:hidden;position:relative;background:var(--yellow)}
.a2-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,3vw,56px);min-height:calc(100svh - 67px);padding-top:clamp(32px,5vh,56px);padding-bottom:clamp(32px,5vh,56px)}
.a2-hero-txt{position:relative}
.a2-hero h1{font-size:clamp(40px,4.3vw,70px);line-height:1.22;letter-spacing:-.04em}
.a2-hero h1 .kw{background:var(--navy);color:#fff;padding:.02em .26em}
.a2-hero[data-var] .kw,.a2-hero h1[data-var="sweep"] .kw{background:linear-gradient(var(--navy),var(--navy)) no-repeat;background-size:100% 100%}
.a2-sub{display:block;margin-top:.18em;white-space:nowrap}
.a2-os{width:.8em;height:.8em;margin:0 .14em -.05em 0}
.a2-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,5vh,52px)}
.a2-hero .btn{background:var(--navy)}.a2-hero .btn:hover{background:var(--blue)}
.a2-hero .btn.a2-line{background:transparent;color:var(--navy)}.a2-hero .btn.a2-line:hover{background:var(--navy);color:#fff}
.a2-band{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 46%,rgba(0,0,0,.5) 56%,#000 68%);mask-image:linear-gradient(90deg,transparent 0,transparent 46%,rgba(0,0,0,.5) 56%,#000 68%)}
.a2-plane{--p:clamp(120px,9.5vw,150px);--g:20px;position:absolute;left:68%;top:50%;display:flex;flex-direction:column;gap:var(--g);translate:-50% -50%;transform:rotateZ(-28deg)}
.a2-lane{display:flex;gap:var(--g);width:max-content;animation:a2-lane var(--d,70s) linear infinite;translate:calc(var(--sy,0px)*var(--k,0)) 0}
.a2-lane:nth-child(even){margin-left:-85px}
.a2-lane.rev{animation-direction:reverse}
@keyframes a2-lane{to{transform:translateX(-20%)}}
.ph{--pw:var(--p);position:relative;flex:none;width:var(--pw);aspect-ratio:600/1240;padding:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.17);background:#0d1020;box-shadow:0 30px 56px -18px rgba(8,16,60,.5),inset 0 0 0 1.5px #3a3f58}
.ph::after{content:"";position:absolute;left:50%;top:calc(var(--pw)*.07);width:30%;height:calc(var(--pw)*.085);translate:-50% 0;border-radius:99px;background:#000;z-index:2}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--pw)*.14);filter:saturate(.8) brightness(.97)}

/* 2 개발 분야 — 남색 판, 가로 펼침 */
.a2-field{background:var(--navy);color:#fff}
.a2-field h2{color:#fff;text-align:center}.a2-field .kw{background:#fff;color:var(--navy)}
.a2-field [data-var="load"] .kw{background:linear-gradient(#fff,#fff) no-repeat}
.a2-acc{display:flex;gap:12px;height:clamp(420px,56vh,500px);margin-top:clamp(36px,6vh,64px)}
.a2-col{position:relative;flex:0 0 88px;min-width:0;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);overflow:hidden;transition:flex .6s cubic-bezier(.65,0,.35,1),background .3s}
.a2-col.on{flex:1 1 0;background:#fff;color:var(--ink);border-color:#fff}
.a2-col:not(.on):hover{background:rgba(255,255,255,.12)}
.a2-col-h{all:unset;box-sizing:border-box;position:absolute;inset:0 auto 0 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 0;cursor:pointer;color:inherit;z-index:2}
.a2-col-h em{font-style:normal;font:800 14px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--yellow)}
.a2-col-h b{writing-mode:vertical-rl;font-size:clamp(20px,1.6vw,25px);font-weight:800;letter-spacing:.02em;white-space:nowrap}
.a2-col-h small{margin-top:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:14px;font-weight:800}
.a2-col.on .a2-col-h{width:auto;inset:28px auto auto 32px;flex-direction:row;padding:0;gap:14px;align-items:baseline;cursor:default}
.a2-col.on .a2-col-h b{writing-mode:horizontal-tb;font-size:clamp(24px,2vw,32px);color:var(--navy)}
.a2-col.on .a2-col-h em{color:var(--blue)}
.a2-col.on .a2-col-h small{display:none}
.a2-col-b{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,2.4vw,40px);align-items:center;padding:84px 32px 32px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;min-width:640px}
.a2-col.on .a2-col-b{opacity:1;visibility:visible;transition:opacity .45s .25s,visibility 0s}
.a2-pic{border-radius:18px;overflow:hidden;background:var(--soft);aspect-ratio:3/2}
.a2-pic img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.a2-col-b ul{list-style:none;border-top:1px solid var(--line);align-self:center}
.a2-col-b li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 2px;border-bottom:1px solid var(--line);font-size:clamp(16px,1.25vw,19px);font-weight:700;letter-spacing:-.02em;color:var(--ink);transition:color .2s,padding .25s}
.a2-col-b li a::after{content:"→";color:var(--blue);opacity:.0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.a2-col-b li a:hover,.a2-col-b li a.cur{color:var(--blue);padding-left:8px}
.a2-col-b li a:hover::after,.a2-col-b li a.cur::after{opacity:1;transform:none}

/* 3 주요 기능 — 파랑 판, 세로 탭 */
.a2-feat{background:var(--blue);color:#fff}
.a2-feat h2{color:#fff}.a2-feat .kw{background:var(--yellow);color:var(--navy)}
.a2-feat [data-var="sweep"] .kw{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat}
.a2-tabs{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(36px,6vh,60px);align-items:start}
.a2-tab-list{display:flex;flex-direction:column;gap:8px}
.a2-tab-list button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;font-size:clamp(17px,1.35vw,20px);font-weight:800;letter-spacing:-.02em;cursor:pointer;color:rgba(255,255,255,.72);transition:background .25s,color .25s}
.a2-tab-list button img{width:40px;height:40px;object-fit:contain;filter:grayscale(.4);opacity:.75;transition:filter .25s,opacity .25s,transform .25s}
.a2-tab-list button:hover{color:#fff;background:rgba(255,255,255,.1)}
.a2-tab-list button.on{background:#fff;color:var(--navy)}
.a2-tab-list button.on img{filter:none;opacity:1;transform:scale(1.08)}
.a2-tab-list button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.a2-panes{background:#fff;color:var(--ink);border-radius:28px;padding:clamp(28px,3.2vw,48px);min-height:clamp(440px,56vh,540px);position:relative;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(10,20,80,.28)}
.a2-pane{display:flex;flex-direction:column;gap:24px;flex:1}
.a2-pane[hidden]{display:none}
.a2-ic9{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.a2-ic9 li,.a2-ic3 li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--soft);font-size:clamp(15px,1.15vw,17px)}
.a2-ic9 li img,.a2-ic3 li img{width:52px;height:52px;object-fit:contain;flex:none}
.a2-ic3 li img.lg{width:40px;height:40px;margin:6px}
.a2-ic9 b,.a2-ic3 b{font-weight:800;letter-spacing:-.02em}
.a2-ic3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.a2-rows{display:flex;flex-direction:column}
.a2-rows>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.a2-rows>div:first-child{padding-top:4px}
.a2-rows dt{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.a2-rows dd{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.a2-logos span{display:inline-flex;flex-direction:column;align-items:center;gap:6px;width:68px;font-size:13px;font-weight:700;color:var(--ink2)}
.a2-logos img{width:40px;height:40px}
.a2-telco{gap:28px!important}
.a2-telco img{height:30px;width:auto}
.a2-chips i{font-style:normal;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--soft);font-size:15px;font-weight:700;color:var(--ink)}
.a2-chips i img{width:20px;height:20px}
.a2-pane-pic{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.a2-pane-pic img{max-height:200px;width:auto;object-fit:contain}
.a2-ev{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:#eef3fd;font-size:15px;font-weight:700;color:var(--ink);transition:background .2s}
.a2-ev em{font-style:normal;font-size:12.5px;font-weight:800;color:#fff;background:var(--blue);border-radius:999px;padding:4px 10px}
.a2-ev::after{content:"→";color:var(--blue)}
.a2-ev:hover{background:var(--blue2)}

/* 4 개발 방식 — 두 방식 비교 */
.a2-way{background:#fff}
.a2-way h2{text-align:center}.a2-way .kw{background:var(--navy);color:#fff}
.a2-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin-top:clamp(40px,6vh,64px)}
.a2-way-c{border-radius:28px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;align-items:flex-start;min-height:100%}
.a2-way-c.nt{background:var(--navy);color:#fff}
.a2-way-c.hb{background:var(--blue);color:#fff}
.a2-way-ic{width:84px;height:84px;object-fit:contain;margin-bottom:18px}
.a2-way-c>b{font-size:clamp(26px,2.2vw,34px);font-weight:800;letter-spacing:-.03em}
.a2-way-c>p{margin-top:6px;font-size:clamp(15px,1.2vw,18px);font-weight:600;opacity:.82}
.a2-way-c ul{list-style:none;margin-top:28px;width:100%;border-top:1px solid rgba(255,255,255,.22)}
.a2-way-c li{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.22);font-size:17px;font-weight:800}
.a2-way-c li .ti{width:20px;height:20px}
.a2-way-c li img{width:22px;height:22px;filter:brightness(0) invert(1)}
.a2-way-c li span{margin-left:auto;font-weight:600;opacity:.75;font-size:15px}
.a2-bridge{position:relative;z-index:2;margin:0 -28px;width:200px;aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;box-shadow:0 0 0 10px #fff,0 20px 50px rgba(20,24,39,.18)}
.a2-bridge b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.a2-bridge span{margin-top:6px;font-size:13.5px;font-weight:700;line-height:1.45}
.a2-crit{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4vh,40px);padding:22px clamp(22px,3vw,40px);border-radius:24px;background:var(--soft)}
.a2-crit-t{flex:none;font-size:16px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.a2-crit ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1}
.a2-crit li{display:flex;align-items:center;gap:12px;font-size:clamp(16px,1.3vw,19px);font-weight:800;letter-spacing:-.02em}
.a2-crit li img{width:48px;height:48px;object-fit:contain}

/* 5 진행 과정 — 노랑 판, 넓은 화면은 고정 후 가로 넘김 */
.a2-flow{background:var(--yellow);padding:0!important;overflow:hidden}
.a2-flow-pin{padding:clamp(72px,11vh,112px) 0 clamp(64px,10vh,104px)}
.a2-flow .kw{background:var(--navy);color:#fff}
.a2-flow [data-var="rise"] .kw{background:linear-gradient(var(--navy),var(--navy)) no-repeat}
.a2-flow-view{margin-top:clamp(32px,5vh,56px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.a2-flow-view::-webkit-scrollbar{display:none}
.a2-flow-track{list-style:none;display:flex;gap:clamp(16px,1.6vw,24px);width:max-content;padding:0 max(24px,(100vw - var(--w)) / 2);position:relative}
.a2-flow-track::before{content:"";position:absolute;left:max(24px,(100vw - var(--w)) / 2);right:max(24px,(100vw - var(--w)) / 2);top:31px;border-top:3px dashed var(--navy);opacity:.5;z-index:0}
.a2-flow-track li{position:relative;z-index:1;width:clamp(260px,21vw,400px);flex:none;display:flex;flex-direction:column;gap:14px}
.a2-flow-track .no{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:800 18px/1 ui-monospace,Menlo,monospace;letter-spacing:.02em;box-shadow:0 0 0 6px var(--yellow)}
.a2-flow-track li.app .no{background:#fff;color:var(--navy)}
.a2-flow-track img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff;border-radius:22px;padding:6px;box-shadow:0 18px 40px rgba(90,60,0,.18)}
.a2-flow-track b{font-size:clamp(18px,1.45vw,21px);font-weight:800;letter-spacing:-.025em;color:var(--navy)}
.a2-flow-track li.app b::after{content:"앱";margin-left:8px;display:inline-block;vertical-align:2px;font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;background:#fff;color:var(--blue)}
.a2-flow.is-h .a2-flow-view{overflow:visible}
.a2-flow.is-h .a2-flow-pin{min-height:calc(100vh - var(--a2-head,66px));display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,7vh,80px) 0}

/* 6 결과물 — 문서 묶음 셋 */
.a2-doc{background:#eef3fd}
.a2-doc h2{text-align:center}.a2-doc .kw{background:var(--blue);color:#fff}
.a2-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(40px,6vh,64px)}
.a2-dg{background:#fff;border-radius:28px;padding:clamp(28px,2.6vw,40px) clamp(22px,2.2vw,32px) clamp(24px,2.4vw,32px);display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 50px rgba(30,60,140,.08)}
.a2-stack{position:relative;width:100%;height:280px}
.a2-stack .sh{position:absolute;left:50%;top:50%;width:150px;height:200px;border-radius:14px;background:#fff;border:1.5px solid var(--line);box-shadow:0 14px 30px rgba(20,24,39,.12);padding:18px 16px;display:flex;flex-direction:column;gap:9px;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.a2-stack .sh:nth-child(1){transform:translate(-50%,-50%) translate(-70px,22px) rotate(-10deg)}
.a2-stack .sh:nth-child(2){transform:translate(-50%,-50%) translate(70px,22px) rotate(9deg)}
.a2-stack .sh:nth-child(3){transform:translate(-50%,-50%) translateY(-22px);z-index:2}
.a2-dg:hover .sh:nth-child(1){transform:translate(-50%,-50%) translate(-86px,18px) rotate(-14deg)}
.a2-dg:hover .sh:nth-child(2){transform:translate(-50%,-50%) translate(86px,18px) rotate(13deg)}
.a2-dg:hover .sh:nth-child(3){transform:translate(-50%,-50%) translateY(-32px)}
.a2-stack .sh i{display:block;height:7px;border-radius:4px;background:#e4e8f1}
.a2-stack .sh i.d-t{height:12px;width:60%;background:var(--navy)}
.a2-stack .sh i.d-s{width:70%}.a2-stack .sh i.d-m{width:55%;margin-left:14px}
.a2-stack .sh b{margin-top:auto;font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.a2-stack .sh:nth-child(1) b{max-width:64px;line-height:1.3}
.a2-stack .sh:nth-child(2) b{align-self:flex-end;text-align:right;max-width:64px;line-height:1.3}
.a2-stack .sh .wf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:4px}
.a2-stack .sh .wf i{height:46px;border-radius:6px;background:#dfe6ff}
.a2-stack .sh .ck{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.a2-stack .sh .ck i{height:12px;background:none;position:relative;padding-left:20px}
.a2-stack .sh .ck i::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:3px;background:#2fb36d}
.a2-stack .sh .ck i::after{content:"";position:absolute;left:18px;right:0;top:3px;height:6px;border-radius:3px;background:#e4e8f1}
.a2-stack .sh.code{background:var(--navy);border-color:var(--navy)}
.a2-stack .sh.code i{background:rgba(255,255,255,.22)}.a2-stack .sh.code i:nth-child(2){background:var(--yellow);opacity:.8}.a2-stack .sh.code i:nth-child(3){background:#7ea2ff}
.a2-stack .sh.code b{color:#fff}
.a2-stack.ds .sh{padding:0;width:128px;height:265px;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.a2-stack.ds .ph{--p:128px;box-shadow:0 18px 34px -10px rgba(8,16,60,.4),inset 0 0 0 1.5px #3a3f58}
.a2-stack.ds .ph img{filter:none}
.a2-stack.ds .sh:nth-child(1){transform:translate(-50%,-50%) translate(-74px,10px) rotate(-8deg)}
.a2-stack.ds .sh:nth-child(2){transform:translate(-50%,-50%) translate(74px,10px) rotate(8deg)}
.a2-dg:hover .a2-stack.ds .sh:nth-child(1){transform:translate(-50%,-50%) translate(-92px,6px) rotate(-11deg)}
.a2-dg:hover .a2-stack.ds .sh:nth-child(2){transform:translate(-50%,-50%) translate(92px,6px) rotate(11deg)}
.a2-dg h3{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:clamp(18px,1.5vw,22px);font-weight:800;letter-spacing:-.025em;text-align:center}
.a2-dg h3 em{font-style:normal;font-size:13px;font-weight:800;color:var(--blue);background:#eef3fd;border-radius:999px;padding:5px 12px}

/* 질문 · 문의 — 허브와 같은 값 */
.v-app2 .s-faq{background:#fff;padding:clamp(80px,12vh,128px) 0}
.v-app2 .s-faq h2{background:transparent}
.v-app2 .s-cta{min-height:0}

/* 넓은 화면이지만 높이가 낮을 때 */
@media (max-height:780px) and (min-width:1024px){
  .a2-acc{height:440px}
  .a2-panes{min-height:420px}
  .a2-pane-pic img{max-height:190px}
  .a2-stack{height:230px}
  .a2-flow-track li{width:clamp(240px,19vw,290px)}
}

/* 태블릿 */
@media (max-width:1100px){
  .a2-col{flex-basis:72px}
  .a2-col-b{min-width:560px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:88px 26px 26px}
  .a2-ic9{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a2-ic3{grid-template-columns:1fr}
  .a2-bridge{width:170px}
  .a2-crit ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 휴대폰·좁은 태블릿 — 펼침은 세로로, 탭은 가로 알약 줄, 비교는 세로 */
@media (max-width:860px){
  .v-app2 .s{padding:72px 0}
  .a2-hero-in{grid-template-columns:minmax(0,1fr);min-height:0;text-align:center;padding-top:48px;padding-bottom:440px;gap:32px}
  .a2-acts{justify-content:center}
  .a2-hero h1{font-size:clamp(32px,8.6vw,44px)}
  .a2-band{inset:auto 0 0 0;height:420px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%);mask-image:linear-gradient(180deg,transparent 0,#000 20%)}
  .a2-plane{left:50%;--p:120px}
  .a2-acc{flex-direction:column;height:auto;gap:10px}
  .a2-col,.a2-col.on{flex:none;border-radius:20px}
  .a2-col-h,.a2-col.on .a2-col-h{position:relative;inset:auto;width:100%;flex-direction:row;align-items:center;padding:20px 22px;gap:14px;cursor:pointer}
  .a2-col-h b,.a2-col.on .a2-col-h b{writing-mode:horizontal-tb;font-size:19px}
  .a2-col.on .a2-col-h b{color:var(--navy)}
  .a2-col-h small{margin-top:0;margin-left:auto}
  .a2-col.on .a2-col-h small{display:grid;background:#eef3fd;color:var(--blue)}
  .a2-col-b{position:relative;inset:auto;min-width:0;grid-template-columns:1fr;padding:0 18px 18px;display:none}
  .a2-col.on .a2-col-b{display:grid}
  .a2-col-b li a{padding:15px 2px;font-size:16px}
  .a2-tabs{grid-template-columns:1fr}
  .a2-tab-list{flex-direction:row;overflow-x:auto;gap:8px;margin:0 -24px;padding:0 24px 4px;scrollbar-width:none}
  .a2-tab-list::-webkit-scrollbar{display:none}
  .a2-tab-list button{flex:none;padding:10px 16px 10px 10px;font-size:15px;border-radius:999px;background:rgba(255,255,255,.12);gap:8px}
  .a2-tab-list button img{width:28px;height:28px}
  .a2-panes{min-height:0;border-radius:22px;padding:22px 18px}
  .a2-ic9,.a2-ic3{grid-template-columns:1fr 1fr;gap:8px}
  .a2-ic9 li,.a2-ic3 li{flex-direction:column;align-items:flex-start;gap:8px;padding:14px;font-size:14.5px}
  .a2-ic9 li img,.a2-ic3 li img{width:44px;height:44px}
  .a2-rows>div{grid-template-columns:1fr;gap:10px;padding:16px 0}
  .a2-logos span{width:54px;font-size:12px}
  .a2-logos img{width:36px;height:36px}
  .a2-telco{gap:20px!important}.a2-telco img{height:24px}
  .a2-chips i{height:36px;padding:0 13px;font-size:14px}
  .a2-pane-pic img{max-height:180px}
  .a2-ev{font-size:13.5px}
  .a2-vs{grid-template-columns:1fr;gap:0}
  .a2-bridge{margin:-22px auto;width:150px;padding:16px}
  .a2-bridge b{font-size:17px}.a2-bridge span{font-size:12px}
  .a2-way-c{border-radius:22px;padding:26px 22px}
  .a2-way-c.hb{padding-top:44px}
  .a2-way-c.nt{padding-bottom:44px}
  .a2-way-c li{font-size:15.5px}.a2-way-c li span{font-size:13.5px}
  .a2-crit{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .a2-crit ul{grid-template-columns:1fr 1fr;width:100%}
  .a2-crit li{font-size:15.5px}.a2-crit li img{width:40px;height:40px}
  .a2-flow-pin{padding:72px 0}
  .a2-flow-view{overflow:visible}
  .a2-flow-track{flex-direction:column;width:auto;padding:0 24px;gap:18px}
  .a2-flow-track::before{left:54px;right:auto;top:30px;bottom:30px;border-top:0;border-left:3px dashed var(--navy)}
  .a2-flow-track li{width:auto;display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:10px;align-items:center}
  .a2-flow-track .no{grid-row:1;grid-column:1}
  .a2-flow-track b{grid-row:1;grid-column:2}
  .a2-flow-track img{grid-row:2;grid-column:2;border-radius:16px}
  .a2-docs{grid-template-columns:1fr;gap:16px}
  .v-app2 .s-faq{padding:72px 0}
}
@media (prefers-reduced-motion:reduce){.a2-lane{animation:none}.a2-col,.a2-stack .sh{transition:none}}