.app-development-page{--app-cyan:#2cd1ee}.app-hero{background:radial-gradient(circle at 78% 30%,#dff8ff 0,transparent 32%),linear-gradient(135deg,#fff 68%,#f2f8ff)}.app-hero-map{position:relative;min-height:500px;padding:34px 48px;border:1px solid #c9dbea;background:rgba(255,255,255,.86);clip-path:polygon(0 0,94% 0,100% 8%,100% 100%,6% 100%,0 92%);display:flex;flex-direction:column;align-items:center;justify-content:center}.app-hero-map:before{content:"MOBILE PRODUCT ARCHITECTURE / 01";position:absolute;left:30px;top:24px;color:#71859e;font:700 .55rem Manrope;letter-spacing:.15em}.app-user,.app-data{width:58%;padding:14px;border:1px solid #bfd2e4;background:#fff;text-align:center;color:#536984;font:800 .62rem Manrope;letter-spacing:.09em}.app-product{position:relative;width:78%;padding:24px;border:1px solid #68ace8;background:#eef8ff;text-align:center}.app-product small,.app-product b{display:block}.app-product small{color:#5488ad;font:700 .54rem Manrope;letter-spacing:.12em}.app-product b{margin-top:7px;font-size:.84rem}.app-product>em{position:absolute;right:12px;top:11px;color:var(--dev-blue);font-style:normal}.app-hero-map>i{width:1px;height:23px;background:var(--dev-blue)}.app-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.app-branches button{padding:17px 6px;border:1px solid #c3d5e6;background:#fff;color:var(--dev-navy);font:800 .57rem Manrope;cursor:pointer;transition:.25s}.app-branches button:hover,.app-branches button:focus-visible{border-color:var(--dev-blue);background:#eef7ff;transform:translateY(-3px);outline:0}.flow-line{position:relative}.flow-line em{position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--app-cyan)}.app-state,.app-notify{position:absolute;padding:9px 12px;border:1px solid #bfd4e7;background:#fff;color:#526984;font:800 .52rem Manrope;letter-spacing:.08em}.app-state{left:18px;top:52%}.app-notify{right:18px;top:52%}.app-notify b{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;border-radius:50%;background:var(--dev-blue);color:#fff;font-size:.5rem}
.task-route{padding:35px;border:1px solid #c5d8e8;background:#fff}.task-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center}.task-steps button,.task-end strong{padding:18px 8px;border:1px solid #cad9e8;background:#fff;color:var(--dev-navy);text-align:center;font:800 .6rem Manrope;letter-spacing:.07em;transition:.25s}.task-steps button{cursor:pointer}.task-steps>i{color:#7ca6ca;font-style:normal}.task-end{display:flex;flex-direction:column;align-items:center}.task-end>i{height:35px;width:1px;background:#8ebbe1}.task-end strong{width:64%;border-color:#75b5ea;background:#edf7ff;color:var(--dev-blue)}.task-steps button:hover,.task-steps button:focus-visible,.task-steps button.is-active{border-color:var(--dev-blue);background:#edf7ff;transform:translateY(-3px);outline:0}.task-route:has(button:hover) .task-end strong,.task-route:has(button:focus-visible) .task-end strong{box-shadow:inset 3px 0 var(--dev-blue)}
.journey-section-app .section-head{max-width:760px}.app-journey{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:44px 0 0;margin:0;list-style:none}.app-journey:before{content:"";position:absolute;left:8%;right:8%;top:67px;height:2px;background:#28476e}.app-journey li{position:relative;padding:0 20px;text-align:center}.app-journey small{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin:0 auto 24px;border:1px solid #3e648d;border-radius:50%;background:#0a1941;color:#5bd4ef;font:800 .57rem Manrope;transition:.25s}.app-journey b{display:block;font-size:.72rem;letter-spacing:.07em}.app-journey span{display:block;margin-top:8px;color:#9fb2cb;font-size:.68rem;line-height:1.5}.app-journey li:hover small,.app-journey li:focus-visible small,.app-journey li.is-active small{border-color:var(--app-cyan);background:#123064;color:#fff;transform:translateY(-3px);box-shadow:0 0 0 6px rgba(44,209,238,.1)}.app-journey li:focus-visible{outline:0}
.backend-map{display:grid;grid-template-columns:210px 1fr;gap:34px;align-items:center}.mobile-core{aspect-ratio:.72;padding:24px;border:1px solid var(--dev-blue);background:#fff;color:var(--dev-navy);clip-path:polygon(12% 0,100% 0,100% 92%,88% 100%,0 100%,0 8%);cursor:pointer;transition:.25s}.mobile-core small,.mobile-core b{display:block}.mobile-core small{color:var(--dev-blue);font:800 .54rem Manrope;letter-spacing:.1em}.mobile-core b{margin-top:8px}.backend-stack{display:grid;gap:10px}.backend-stack button{position:relative;padding:17px;border:1px solid #c8d8e7;background:#fff;color:var(--dev-navy);font:800 .61rem Manrope;text-align:left;cursor:pointer;transition:.25s}.backend-stack button:before{content:"";position:absolute;right:100%;top:50%;width:35px;height:1px;background:#9dbbd5}.backend-stack button:hover,.backend-stack button:focus-visible,.mobile-core:hover,.mobile-core:focus-visible{border-color:var(--dev-blue);background:#eaf6ff;transform:translateY(-3px);outline:0}.backend-map:has(.api-node:hover) .mobile-core,.backend-map:has(.api-node:focus-visible) .backend-stack button:nth-child(3),.backend-map:has(.api-node:hover) .backend-stack button:nth-child(4){border-color:#65ade8;background:#f0f8ff}
.feature-map{display:flex;flex-direction:column;align-items:center}.feature-core,.ecosystem-core{padding:25px;border:1px solid #2ebfe8;background:#102653;color:#fff;cursor:pointer;transition:.25s}.feature-core{width:58%}.feature-core small,.feature-core b,.ecosystem-core small,.ecosystem-core b{display:block}.feature-core small,.ecosystem-core small{color:#5cd6ef;font:700 .54rem Manrope;letter-spacing:.12em;margin-bottom:7px}.feature-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;margin-top:40px}.feature-grid:before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:40px;background:#3377a5}.feature-grid button{padding:15px 8px;border:1px solid #30496e;background:#091940;color:#aebfd4;font:800 .56rem Manrope;cursor:pointer;transition:.25s}.feature-grid button:hover,.feature-grid button:focus-visible,.feature-core:hover,.feature-core:focus-visible{border-color:var(--app-cyan);background:#102b5d;color:#fff;transform:translateY(-3px);outline:0}.feature-map:has(.feature-grid button:hover) .feature-core,.feature-map:has(.feature-grid button:focus-visible) .feature-core{border-color:var(--app-cyan)}
.state-section{background:#fff}.state-flow{padding:34px;border:1px solid #c9d9e7;background:#f6faff}.state-main{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center}.state-main button{min-height:82px;padding:12px;border:1px solid #c3d5e6;background:#fff;color:var(--dev-navy);font:800 .58rem Manrope;cursor:pointer;transition:.25s}.state-main i{padding:0 7px;color:var(--dev-blue);font-style:normal}.state-main button:hover,.state-main button:focus-visible{border-color:var(--dev-blue);background:#eaf6ff;transform:translateY(-3px);outline:0}.state-chips{display:flex;justify-content:center;gap:8px;margin-top:26px}.state-chips span{padding:8px 12px;border:1px solid #c9d9e8;background:#fff;color:#66788f;font:700 .51rem Manrope}.state-flow:has(.state-main button:hover) .state-chips span:nth-child(2){border-color:#65ade8;color:var(--dev-blue)}.app-quality-grid{grid-template-columns:repeat(3,1fr)}
.evolution-app .section-head>p:last-child{max-width:620px}.product-evolution{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:15px;padding:0;margin:0;list-style:none}.product-evolution:before{content:"";position:absolute;top:50%;left:5%;right:5%;height:1px;background:#a7bed4}.product-evolution li{position:relative;z-index:1;min-height:145px;padding:25px 18px;border:1px solid #c4d6e7;background:#fff;display:flex;flex-direction:column;justify-content:center;transition:.25s}.product-evolution small{color:var(--dev-blue);font:800 .55rem Manrope;margin-bottom:12px}.product-evolution b{font-size:.68rem}.product-evolution li:hover,.product-evolution li:focus-visible,.product-evolution li.is-active{border-color:var(--dev-blue);background:#edf7ff;transform:translateY(-3px);outline:0}.app-process{grid-template-columns:repeat(8,1fr)}
.ecosystem-links{display:flex;flex-wrap:wrap;gap:0 28px}.ecosystem-map{padding:32px;border:1px solid #c5d8e8;background:#f5faff}.ecosystem-core{display:block;width:68%;margin:0 auto 35px;background:#fff;color:var(--dev-navy);border-color:#75b6e8;text-align:center}.ecosystem-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ecosystem-grid button{padding:18px;border:1px solid #c8d9e8;background:#fff;color:var(--dev-navy);font:800 .6rem Manrope;cursor:pointer;transition:.25s}.ecosystem-grid button:last-child{grid-column:1/-1;width:50%;justify-self:center}.ecosystem-grid button:hover,.ecosystem-grid button:focus-visible,.ecosystem-core:hover,.ecosystem-core:focus-visible{border-color:var(--dev-blue);background:#eaf6ff;transform:translateY(-3px);outline:0}.ecosystem-map:has(.ecosystem-core:hover) .ecosystem-grid button{border-color:#76b6e8;background:#f4faff}
.js-app [data-app-reveal]{opacity:0;transform:translateY(22px)}.js-app [data-app-reveal].is-visible{opacity:1;transform:none;transition:opacity .7s,transform .7s cubic-bezier(.22,1,.36,1)}.js-app .app-hero .hero-copy h1 i{transform:translateY(110%)}.js-app .app-hero.is-visible .hero-copy h1 i{transform:none;transition:transform .75s cubic-bezier(.22,1,.36,1) .16s}.js-app .app-hero.is-visible .hero-copy h1 span+span i{transition-delay:.26s}.js-app .app-hero-map{opacity:0;transform:translateY(18px)}.js-app .app-hero.is-visible .app-hero-map{opacity:1;transform:none;transition:.7s .35s}.js-app .app-hero.is-visible .flow-line em{animation:appFlow 1.3s .9s ease-in-out 1 both}.js-app .app-hero.is-visible .app-notify b{animation:notifyOnce .7s 1.6s ease 1 both}@keyframes appFlow{0%{opacity:0;transform:translateY(0)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(23px)}}@keyframes notifyOnce{50%{box-shadow:0 0 0 6px rgba(8,126,245,.18)}}
@media(max-width:1100px){.app-quality-grid{grid-template-columns:repeat(2,1fr)}.app-process{grid-template-columns:repeat(4,1fr)}.task-route{padding:25px 18px}}
@media(max-width:820px){.app-hero-map{width:min(620px,100%);margin:auto}.app-journey{grid-template-columns:1fr;padding:0 0 0 25px}.app-journey:before{top:0;bottom:0;left:48px;right:auto;width:1px;height:auto}.app-journey li{display:grid;grid-template-columns:48px 1fr;text-align:left;gap:0 23px;padding:0 0 28px}.app-journey small{grid-row:1/3;margin:0}.app-journey span{margin-top:5px}.backend-map{grid-template-columns:1fr}.mobile-core{width:180px;aspect-ratio:1;margin:auto}.backend-stack button{text-align:center}.backend-stack button:before{display:none}.state-main{grid-template-columns:1fr}.state-main i{padding:7px;text-align:center}.product-evolution{grid-template-columns:1fr;padding-left:18px}.product-evolution:before{top:4%;bottom:4%;left:0;right:auto;width:1px;height:auto}.product-evolution li{min-height:85px}.app-process{grid-template-columns:1fr}}
@media(max-width:600px){.app-hero-map{min-height:0;padding:60px 16px 25px;clip-path:none}.app-user,.app-data,.app-product{width:90%}.app-branches{grid-template-columns:1fr}.app-state{position:static;order:7;margin-top:12px}.app-notify{right:10px;top:118px}.task-route{padding:25px 16px}.task-steps{grid-template-columns:1fr}.task-steps>i{height:23px;text-align:center;transform:rotate(90deg)}.task-end>i{height:24px}.task-end strong{width:100%}.app-quality-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr 1fr}.state-flow{padding:25px 16px}.state-chips{display:grid;grid-template-columns:1fr 1fr}.state-chips span{text-align:center}.ecosystem-core{width:100%}.ecosystem-grid button:last-child{width:100%}.ecosystem-links{display:block}}
@media(max-width:370px){.feature-grid,.ecosystem-grid{grid-template-columns:1fr}.ecosystem-grid button:last-child{grid-column:auto}.app-hero-map:before{left:14px;font-size:.48rem}.app-notify{right:5px}}
@media(prefers-reduced-motion:reduce){.js-app [data-app-reveal],.js-app .app-hero .hero-copy h1 i,.js-app .app-hero-map{opacity:1!important;transform:none!important;transition:none!important}.js-app .flow-line em,.js-app .app-notify b{animation:none!important}.app-development-page *{scroll-behavior:auto!important}}


/* Principles icon picker: map the approved 34x34 icon-box styling onto the
   shared icon partial wrapper (.app-principle-icon) so Font Awesome icons
   render in the same box the legacy glyph <i> used. Mirrors the Web/Dev
   principles treatment. Dimensions/colors match the original article>i rules. */
.principles-section .principle-grid article>.app-principle-icon{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid #3b587d;color:#51caec;font-style:normal;transition:.25s;
}
.principles-section .principle-grid article>.app-principle-icon>i{font-size:15px;line-height:1}
.principles-section .principle-grid article:hover>.app-principle-icon{
  border-color:var(--dev-cyan);background:#153263;
}