/* App development page: "Inside the Full App" showcase (Nov 2026).
   v5 (Max's full-screen reference): one open full-width band that fills about a screen, wide side margins.
   Head row: eyebrow + three-line light/bold headline (left half) | short lead (top right).
   Main row, vertically centred: checklist (≈¼) · large fanned phones (three Padel AI screens) · one tall panel with two cards.
   Full-width rounded bar with a round "+" at the bottom. */

.sc-section{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:100svh;
  padding:84px 0 36px;color:#f3eefb;background:linear-gradient(115deg,#170b2e 0%,#25104f 45%,#3f1a80 100%);border-top:1px solid rgba(196,181,253,.14)}
.sc-section::before{content:"";position:absolute;z-index:-1;left:22%;right:22%;top:30%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(167,139,250,.24),transparent);pointer-events:none}
.sc-wrap{width:calc(100% - 2*clamp(24px,6.6vw,104px));max-width:1440px;margin:0 auto}

/* head */
.sc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(40px,8vw,120px);align-items:start}
.sc-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 20px;font:600 12px/1 Inter,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#c4b5fd}
.sc-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:#c4b5fd}
.ap-inner-page main .sc-h2{margin:0;max-width:10.6em;font:300 clamp(34px,3.3vw,50px)/1.1 Fustat,Inter,sans-serif;letter-spacing:-.04em;color:#f6f2fd}
.ap-inner-page main .sc-h2 b{font-weight:750;color:#fff}
.sc-lead{margin:30px 0 0;max-width:34em;font:400 clamp(15.5px,1.15vw,17px)/1.7 Inter,sans-serif;color:#d6ccea}

/* main row */
.sc-main{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,2.05fr) minmax(0,.9fr);gap:clamp(24px,2.6vw,44px);align-items:center;margin-top:clamp(24px,3.6vh,52px)}

/* checklist */
.sc-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vh,32px)}
.sc-list li{position:relative;padding-left:40px}
.sc-list li::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14)}
.sc-list li::after{content:"";position:absolute;left:8.5px;top:5px;width:6px;height:10px;border:solid #fff;border-width:0 2.3px 2.3px 0;transform:rotate(45deg)}
.sc-list b{display:block;font:650 17px/1.35 Inter,sans-serif;letter-spacing:-.015em;color:#fff}
.sc-list span{display:block;margin-top:6px;font:400 15.5px/1.55 Inter,sans-serif;color:#c4b5fd}

/* phones */
.sc-stage{position:relative;height:clamp(340px,47vh,520px)}
.sc-phones{position:absolute;inset:0;transform:rotate(-8deg);transform-origin:50% 55%}
.sc-phone{position:absolute;height:84%;width:auto;filter:drop-shadow(0 34px 40px rgba(6,2,16,.6));transition:transform 1.1s cubic-bezier(.2,.75,.2,1),opacity .9s ease}
.sc-phone--1{left:12%;top:15%;z-index:1}
.sc-phone--2{left:33%;top:7.5%;z-index:2}
.sc-phone--3{left:54%;top:0;z-index:3}
.sc-phone--1,.sc-phone--2{filter:drop-shadow(0 34px 40px rgba(6,2,16,.6)) brightness(.86)}

/* fan-in on scroll (only when the script has run) */
.sc-js .sc-phone--1{transform:translate(52%,-4%);opacity:0}
.sc-js .sc-phone--2{transform:translate(18%,0);opacity:0}
.sc-js .sc-phone--3{transform:translate(-14%,4%);opacity:0}
.sc-js.is-in .sc-phone{transform:none;opacity:1}
.sc-js.is-in .sc-phone--2{transition-delay:.08s}
.sc-js.is-in .sc-phone--3{transition-delay:.16s}

/* tall panel with two cards */
.sc-side{display:grid;gap:clamp(18px,2.6vh,30px);padding:24px 22px;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ap-inner-page main .sc-card h3{margin:0;font:650 17px/1.3 Inter,sans-serif;letter-spacing:-.015em;color:#fff}
.sc-card p{margin:5px 0 12px;font:400 14px/1.5 Inter,sans-serif;color:#d6ccea}
.sc-tile{display:block;aspect-ratio:2.25/1;border-radius:14px;background:#0d0719;border:2px solid #a78bfa;box-shadow:0 0 0 4px rgba(167,139,250,.12),inset 0 0 26px rgba(124,58,237,.25);overflow:hidden}
.sc-tile svg{display:block;width:100%;height:100%}
.sc-bar-grow{transform-box:fill-box;transform-origin:50% 100%}
.sc-js.is-in .sc-bar-grow{animation:sc-grow .9s cubic-bezier(.2,.75,.2,1) both}
.sc-js.is-in .sc-bar-grow:nth-of-type(2){animation-delay:.08s}
.sc-js.is-in .sc-bar-grow:nth-of-type(3){animation-delay:.16s}
.sc-js.is-in .sc-bar-grow:nth-of-type(4){animation-delay:.24s}
.sc-js.is-in .sc-bar-grow:nth-of-type(5){animation-delay:.32s}
@keyframes sc-grow{from{transform:scaleY(.15)}to{transform:none}}
.sc-pulse{stroke-dasharray:240;stroke-dashoffset:0}
.sc-js.is-in .sc-pulse{animation:sc-trace 3.2s ease-in-out infinite}
@keyframes sc-trace{0%{stroke-dashoffset:240}55%,100%{stroke-dashoffset:0}}

/* bottom bar */
.sc-foot{display:flex;align-items:center;gap:20px;margin-top:clamp(24px,3.6vh,52px);padding:10px 12px 10px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.sc-plus{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#c4b5fd,#a78bfa 50%,#e879f9);box-shadow:0 10px 30px -8px rgba(167,139,250,.6)}
.sc-plus svg{width:24px;height:24px}
.sc-foot-copy{flex:1;min-width:0}
.sc-foot-copy b{display:block;font:650 16.5px/1.3 Inter,sans-serif;letter-spacing:-.015em;color:#fff}
.sc-foot-copy span{display:block;margin-top:3px;font:400 14.5px/1.5 Inter,sans-serif;color:#d6ccea}
.sc-foot-link{flex:none;display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font:600 14px/1 Inter,sans-serif;color:#1b1235;background:#fff;text-decoration:none;transition:transform .2s ease}
.sc-foot-link:hover{transform:translateY(-2px)}

/* short laptop screens (e.g. 1280×720): tighten so the band still reads as one screen */
@media (min-width:1181px) and (max-height:820px){
  .sc-section{padding:72px 0 26px}
  .ap-inner-page main .sc-h2{max-width:16em;font-size:clamp(32px,3vw,44px)}
  .sc-lead{margin-top:22px}
  .sc-main{margin-top:20px}
  .sc-list{gap:16px}
  .sc-list span{margin-top:4px;font-size:14.5px}
  .sc-side{gap:14px;padding:18px 20px}
  .sc-card p{margin:4px 0 10px}
  .sc-tile{aspect-ratio:2.8/1}
  .sc-foot{margin-top:20px}
}

@media (max-width:1180px){
  .sc-section{min-height:0}
  .sc-main{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-areas:"list stage" "side side";row-gap:32px}
  .sc-list{grid-area:list}.sc-stage{grid-area:stage;height:420px}.sc-side{grid-area:side;grid-template-columns:1fr 1fr}
  .sc-tile{max-width:320px}
}
@media (max-width:860px){
  .sc-section{padding:60px 0 44px}
  .sc-wrap{width:calc(100% - 40px)}
  .sc-head{grid-template-columns:1fr;gap:0}
  .sc-lead{margin-top:18px;font-size:15.5px}
  .sc-main{grid-template-columns:1fr;grid-template-areas:"stage" "list" "side";gap:32px;margin-top:22px}
  .sc-stage{height:min(96vw,390px);margin:0 -8px}
  .sc-phone{height:80%}
  .sc-phone--1{left:2%}.sc-phone--2{left:27%}.sc-phone--3{left:52%}
  .sc-list{gap:22px}
  .sc-side{grid-template-columns:1fr;padding:22px 20px;border-radius:22px}
  .sc-tile{max-width:none;aspect-ratio:2/1}
  .sc-foot{flex-wrap:wrap;margin-top:28px;padding:18px;border-radius:22px;gap:14px}
  .sc-plus{width:46px;height:46px}
  .sc-foot-copy{flex-basis:calc(100% - 64px)}
  .sc-foot-link{width:100%;justify-content:center}
}
@media (min-width:600px) and (max-width:860px){.sc-side{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  .sc-js.is-in .sc-pulse,.sc-js.is-in .sc-bar-grow{animation:none}
  .sc-phone{transition:none}
}