/* Web and Studio: editorial layouts matching the homepage. */
.detail-actions { margin-top: 34px; }
.detail-actions .btn { border-radius: 3px; }
.web-hero, .studio-hero { padding: clamp(126px, 11vw, 166px) 0 76px; background: radial-gradient(ellipse at 75% 20%, rgba(42,59,255,.12), transparent 63%); }
.web-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 94px); align-items: center; }
.web-hero h1 { font-size: clamp(62px, 8vw, 116px); line-height: .91; max-width: 9ch; letter-spacing: -.055em; margin-top: 28px; }
.web-hero .lead { font-size: 18px; line-height: 1.65; max-width: 34ch; color: #a9a9b3; }
.web-showcase { min-width: 0; position: relative; padding: 40px 54px 75px 0; isolation: isolate; }
.web-showcase::before { content: ''; position: absolute; inset: 10% 0 0 8%; border-radius: 50%; background: #333dcc; filter: blur(65px); opacity: .2; z-index: -1; }
.browser-frame { border: 1px solid #41414e; overflow: hidden; border-radius: 9px; box-shadow: 0 35px 90px #0007; transform: perspective(1300px) rotateY(-7deg); }
.browser-frame__bar { height: 32px; display: flex; align-items: center; gap: 5px; background: #25252e; padding: 0 14px; }
.browser-frame__bar i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #7b7b90; }
.browser-frame__bar span { font-size: 8px; color: #b3b3c3; margin: auto; padding-right: 25px; letter-spacing: .1em; }
.browser-frame > img { display: block; width: 100%; height: auto; }
.phone-frame { position: absolute; bottom: 5px; right: 0; width: 27%; padding: 5px; border: 1px solid #55556b; background: #15151d; border-radius: 19px; overflow: hidden; box-shadow: -20px 24px 60px #0008; }
.phone-frame img { width: 100%; height: auto; border-radius: 14px; }
.phone-frame__speaker { position: absolute; z-index: 2; top: 11px; left: 33%; width: 34%; height: 7px; border-radius: 20px; background: #080810; }

.web-process { background: #eeede8; color: #141416; padding: 58px 0; }
.web-process .steps { gap: 44px; }
.web-process .step { padding: 4px 0; border: 0; }
.web-process .step + .step { border-left: 1px solid #c9c9c6; padding-left: 36px; }
.web-process .step__n { font-family: var(--sans); color: #4653d4; font-size: 14px; letter-spacing: .04em; }
.web-process .step h3 { font-size: clamp(26px, 3vw, 42px); text-transform: uppercase; font-family: var(--serif); font-weight: 800; margin: 22px 0 18px; }
.web-process .step p { color: #62626a; font-size: 15px; max-width: 32ch; }
.web-plans { padding: clamp(72px, 8vw, 116px) 0; }
.web-plans .section__head { grid-template-columns: 1fr 1fr; margin-bottom: 45px; }
.web-plans .section__head h2 { font-size: clamp(44px, 5vw, 76px); }
.web-plans .section__head .lead { font-size: 17px; }
.web-plans .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: none; border: 0; overflow: visible; border-radius: 0; }
.web-plans .plan { padding: clamp(26px, 2.8vw, 40px); border: 1px solid #34343d; border-radius: 5px; grid-template-rows: auto auto auto 1fr; gap: 24px; background: #141416; }
.web-plans .plan--feature { background: linear-gradient(150deg,#353fd6,#252963); border-color: #7178ee; }
.web-plans .plan--feature::after { display: none; }
.web-plans .plan--feature .plan__name { color: #d3d5ff; }
.web-plans .plan--feature .plan__desc, .web-plans .plan--feature .plan__list li { color: #d2d3ed; }
.web-plans .plan--feature .plan__list li::before { background: #d3d5ff; }
.web-plans .plan__price { font-size: clamp(34px, 3.4vw, 50px); padding-block: 13px 3px; }
.web-plans .plan__desc { min-height: 4.7em; color: #aaaab3; }
.web-plans .plan__list { border-top: 1px solid #ffffff20; padding-top: 24px; gap: 14px; }
.web-plans .section__foot { margin-top: 32px; }

.studio-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.studio-hero h1 { font-size: clamp(58px, 6.9vw, 103px); line-height: .91; letter-spacing: -.055em; max-width: 11ch; margin-top: 28px; }
.studio-statement { color: #b3b3be; font-size: clamp(18px, 1.75vw, 24px); line-height: 1.55; max-width: 38ch; margin-top: 34px; letter-spacing: -.015em; }
.studio-statement em { font-style: normal; color: #e0e1ff; }
.studio-hero__art { position: relative; overflow: hidden; height: clamp(410px, 37vw, 550px); border-radius: 5px; background: #1d1750; isolation: isolate; }
.studio-hero__art > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); }
.studio-hero__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#0a091fc9,transparent 70%); }
.studio-hero__stamp { position: absolute; z-index: 2; bottom: 35px; left: 30px; right: 30px; }
.studio-hero__stamp img { width: 68%; }
.studio-hero__line { position: absolute; z-index: 2; inset: 24px; border: 1px solid #e8e8fa44; border-radius: 50% 50% 3px 3px; }
.studio-capabilities { background: #eeede8; color: #141416; padding: clamp(70px, 8vw, 118px) 0; }
.studio-capabilities > .container { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 36px clamp(40px, 8vw, 124px); align-items: start; }
.studio-capabilities .section__head { display: block; margin: 0; grid-column: 1; grid-row: 1 / 3; }
.studio-capabilities .eyebrow { color: #66666f; }
.studio-capabilities .section__head h2 { font-size: clamp(40px, 4.7vw, 69px); line-height: .95; }
.studio-capabilities .display em { color: #3648e9; }
.studio-detail-art { position: relative; margin-top: 44px; aspect-ratio: 1.9; max-width: 400px; overflow: hidden; border-radius: 3px; }
.studio-detail-art img { width: 100%; height: 100%; object-fit: cover; }
.studio-capabilities .pillars { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: 2; gap: 0; border: 0; border-top: 1px solid #c4c4c6; border-radius: 0; background: none; overflow: visible; }
.studio-capabilities .pillar { padding: 28px 0 32px; border: 0; border-bottom: 1px solid #c4c4c6; min-height: 0; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; overflow: visible; }
.studio-capabilities .pillar::after { display: none; }
.studio-capabilities .pillar__num { grid-column: 1; grid-row: 1 / 3; color: #68687c; padding-top: 4px; }
.studio-capabilities .pillar__glyph { right: 0; top: 28px; height: 29px; width: 29px; color: #4856d8; }
.studio-capabilities .pillar__title { grid-column: 2; grid-row: 1; font-size: clamp(32px, 3.2vw, 45px); line-height: .95; padding-right: 35px; }
.studio-capabilities .pillar__title small { color: #6b6b74; font-size: 9px; line-height: 1.6; letter-spacing: .1em; margin-top: 15px; }
.studio-capabilities .pillar__desc { grid-column: 2; grid-row: 2; color: #62626a; max-width: 37ch; font-size: 15px; }
.studio-capabilities .pillar__desc b { color: #272732; }
.studio-capabilities .section__foot { grid-column: 2; margin-top: 0; }
.studio-capabilities .btn { --bg: transparent; --fg: #141416; border-color: #9898a4; }
.studio-capabilities .btn:hover { color: #eeede8; }
.studio-process { padding: clamp(75px, 8vw, 120px) 0; }
.studio-process .section__head { margin-bottom: 48px; }
.studio-process .section__head h2 { font-size: clamp(40px, 4.8vw, 70px); }
.studio-process .section__head .lead { font-size: 17px; }
.studio-process .steps { display: block; border-top: 1px solid #30303c; }
.studio-process .step { display: grid; grid-template-columns: 60px minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 35px; padding: 30px 0; border: 0; border-bottom: 1px solid #30303c; }
.studio-process .step__n { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; color: #8e96ff; }
.studio-process .step h3 { margin: 0; text-transform: uppercase; font-family: var(--serif); font-size: 36px; font-weight: 800; }
.studio-process .step p { color: #a7a7b2; font-size: 16px; max-width: 49ch; }

.detail-cta { border: 0; background: #323fea; padding: clamp(56px, 7vw, 100px) 0; }
.detail-cta .cta-band__inner { flex-wrap: nowrap; gap: 45px; }
.detail-cta h2 { font-size: clamp(46px, 6vw, 86px); line-height: .95; color: #f3f2ed; max-width: 15ch; }
.detail-cta .btn { flex-shrink: 0; background: #eeede8; border-radius: 3px; padding: 23px 26px; }
.detail-cta .btn::before { background: #141416; }
@media (max-width: 1050px) {
  .web-hero__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px; }
  .web-hero h1 { font-size: 8.5vw; }
  .web-showcase { padding-right: 40px; padding-bottom: 55px; }
  .web-plans .plans { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .web-plans .plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 14px 40px; }
  .web-plans .plan__name { grid-column: 1; }
  .web-plans .plan__price { grid-column: 1; padding-block: 8px; }
  .web-plans .plan__desc { grid-column: 1; min-height: 0; max-width: 35ch; }
  .web-plans .plan__list { grid-column: 2; grid-row: 1 / 4; align-self: center; border: 0; border-left: 1px solid #ffffff20; padding: 8px 0 8px 28px; }
  .studio-hero__grid { gap: 40px; }
  .studio-capabilities > .container { gap: 30px 45px; }
}
@media (max-width: 860px) {
  .web-hero, .studio-hero { padding: 124px 0 56px; }
  .web-hero__grid, .studio-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .web-hero h1 { font-size: clamp(60px, 11vw, 92px); max-width: 10ch; }
  .web-hero .lead { max-width: 47ch; font-size: 17px; }
  .web-showcase { max-width: 680px; width: 100%; padding: 12px 50px 62px 0; }
  .browser-frame { transform: none; }
  .web-process { padding: 42px 0; }
  .web-process .steps { grid-template-columns: 1fr; gap: 24px; }
  .web-process .step, .web-process .step + .step { display: grid; grid-template-columns: 38px 1fr; column-gap: 18px; border: 0; border-bottom: 1px solid #c9c9c6; padding: 0 0 26px; }
  .web-process .step:last-child { border: 0; padding-bottom: 0; }
  .web-process .step__n { grid-row: 1 / 3; padding-top: 6px; }
  .web-process .step h3 { margin: 0 0 12px; }
  .web-process .step p { grid-column: 2; max-width: 48ch; }
  .web-plans .section__head { grid-template-columns: 1fr; gap: 26px; }
  .studio-hero h1 { font-size: clamp(45px, 10vw, 86px); max-width: 12ch; }
  .studio-statement { max-width: 46ch; font-size: 19px; }
  .studio-hero__art { height: clamp(270px, 47vw, 380px); }
  .studio-hero__stamp img { width: 38%; }
  .studio-capabilities > .container { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .studio-capabilities .section__head { grid-column: 1; grid-row: auto; }
  .studio-capabilities .section__head h2 { font-size: clamp(40px, 7vw, 64px); }
  .studio-detail-art { margin-top: 28px; max-width: none; aspect-ratio: 3.3; }
  .studio-capabilities .pillars, .studio-capabilities .section__foot { grid-column: 1; }
  .studio-process .step { grid-template-columns: 30px 1fr; gap: 15px 20px; padding: 27px 0; }
  .studio-process .step__n { grid-row: 1 / 3; align-self: start; padding-top: 7px; }
  .studio-process .step p { grid-column: 2; }
  .studio-process .step h3 { font-size: 30px; }
  .detail-cta .cta-band__inner { flex-direction: column; align-items: start; gap: 32px; }
}
@media (max-width: 480px) {
  .web-hero h1 { font-size: clamp(56px, 17vw, 76px); }
  .web-hero .lead { font-size: 16px; }
  .web-showcase { padding-right: 35px; padding-bottom: 53px; }
  .browser-frame { border-radius: 5px; }
  .browser-frame__bar { height: 22px; padding-inline: 8px; gap: 3px; }
  .browser-frame__bar i { width: 4px; height: 4px; }
  .browser-frame__bar span { font-size: 6px; padding-right: 12px; }
  .phone-frame { width: 29%; padding: 3px; border-radius: 10px; }
  .phone-frame img { border-radius: 7px; }
  .phone-frame__speaker { top: 6px; height: 4px; }
  .web-plans .plan { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px; }
  .web-plans .plan__list { grid-column: 1; grid-row: auto; border: 0; border-top: 1px solid #ffffff20; padding: 22px 0 0; }
  .web-plans .plan__desc { max-width: none; }
  .studio-hero h1 { font-size: clamp(43px, 12.5vw, 59px); }
  .studio-statement { font-size: 18px; line-height: 1.6; margin-top: 28px; }
  .studio-hero__art { height: 275px; }
  .studio-hero__stamp { left: 24px; bottom: 27px; }
  .studio-hero__stamp img { width: 58%; }
  .studio-capabilities .section__head h2 { font-size: clamp(33px, 9.5vw, 43px); }
  .studio-capabilities .pillar { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
  .studio-capabilities .pillar__title { font-size: 32px; }
  .studio-capabilities .pillar__title small { font-size: 8px; letter-spacing: .06em; }
  .studio-capabilities .pillar__desc { font-size: 14px; }
  .studio-process .section__head h2 { font-size: clamp(33px, 9.7vw, 44px); }
  .studio-process .step p { font-size: 15px; }
  .detail-cta h2 { font-size: clamp(36px, 10vw, 48px); }
}