/* ═══════════════════════════════════════════════════════════════════════
   ecomit v4: page sections (home chapters, service templates, content pages)
   ═══════════════════════════════════════════════════════════════════════ */

.theme-btn .when-light, [data-sheet] .when-light { display: none; }
[data-theme="light"] .theme-btn .when-light, [data-theme="light"] [data-sheet] .when-light { display: block; }
[data-theme="light"] .theme-btn .when-dark, [data-theme="light"] [data-sheet] .when-dark { display: none; }

/* ═══ Chapter 0: Hero "Brick to Click" (S1) ═══════════════════════════ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 5.6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero__title { margin-top: 1.4rem; display: grid; font-size: clamp(2.4rem, 4.1vw, 4rem); }
.hero__line { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 900px) { .hero__line { white-space: normal; } }
.hero__line { display: block; transition: opacity .6s var(--ease), color .6s; }
.hero__line + .hero__line { margin-top: .04em; }
.js-motion .hero__line { opacity: .17; }
.js-motion .hero__line.is-on { opacity: 1; }
.hero__line:nth-child(3) { background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--purple-ink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { margin-top: 1.6rem; }
.hero__ctas { margin-top: 2rem; }
.hero__trust { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; font-size: .82rem; color: var(--muted); }
.hero__trust img { height: 18px; width: auto; opacity: .8; }
.hero__trust .flags { letter-spacing: .15em; font-size: 1rem; }
.hero__trust .sep { width: 1px; height: 18px; background: var(--line-2); }

.hero__stage { position: relative; aspect-ratio: 600 / 560; max-height: min(74vh, 640px); width: 100%; margin-inline: auto; border-radius: 30px; padding: 0; background: radial-gradient(120% 90% at 70% 0%, rgba(91,63,217,0.16), transparent 60%), var(--tile-bg); }
.hero__stage .scene { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--text); }
.hero__steps { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel-bg); border: 1px solid var(--line); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.hero__steps span { padding: .35rem .75rem; border-radius: 999px; color: var(--muted); transition: background .4s, color .4s; display: inline-flex; align-items: center; gap: .35rem; }
.hero__steps span.is-on { background: var(--text); color: var(--bg); }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.hero__scroll i { width: 1px; height: 36px; background: linear-gradient(var(--faint), transparent); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--text); animation: scroll-cue 2.2s var(--ease) infinite; }
@keyframes scroll-cue { to { top: 110%; } }

/* scene palette */
.scene { --sf: var(--bg-2); --sf2: color-mix(in srgb, var(--text) 3.5%, var(--bg-2)); --well: color-mix(in srgb, var(--text) 6%, var(--bg-2)); --hair: color-mix(in srgb, var(--text) 22%, transparent); font-family: inherit; }
[data-theme="light"] .scene { --sf: #FFFFFF; --sf2: #FFFFFF; --well: #F1F1F0; }
.scene text { font-family: 'Inter', sans-serif; stroke: none; fill: currentColor; }
.scene .t-muted { fill: color-mix(in srgb, var(--text) 55%, transparent); }
.scene .hair { stroke: var(--hair); }
.js-motion .scene .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: scene-draw 1.8s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1s + .15s); }
.js-motion .scene .fade { opacity: 0; animation: scene-fade .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1s + .2s); }
@keyframes scene-draw { 0% { stroke-dashoffset: 1; fill-opacity: 0; } 70% { fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes scene-fade { to { opacity: 1; } }
.sc-awning, .sc-door, .sc-btn, .sc-sms, .sc-badge, .sc-sales { transform-box: fill-box; }

@media (max-width: 899px) {
  .hero { align-items: flex-start; padding-top: calc(var(--nav-h) + 28px); padding-bottom: 20px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero__title { margin-top: 1rem; font-size: clamp(2.2rem, 10.4vw, 3.4rem); }
  .hero__lede { margin-top: .9rem; font-size: 1rem; }
  .hero__lede .more { display: none; }
  .hero__ctas { margin-top: 1.2rem; gap: .5rem; }
  .hero__ctas .btn { --h: 48px; padding: 0 1.05rem; font-size: .92rem; }
  .hero__trust, .hero__scroll { display: none; }
  .hero__stage { max-height: 38svh; aspect-ratio: auto; height: 38svh; border-radius: 22px; }
  .hero__steps { top: 8px; font-size: .68rem; }
}
@media (max-width: 380px) { .hero__stage { height: 33svh; } .hero .pill { display: none; } }

/* ═══ Chapter 1: Proof strip ═══════════════════════════════════════════ */
.proof { padding-block: clamp(40px, 6vw, 72px) clamp(70px, 9vw, 120px); }
.proof .tile { min-height: 196px; display: flex; flex-direction: column; justify-content: space-between; }
.proof .chip { margin-bottom: 1.6rem; }

/* ═══ Chapter 2: Build · Run · Grow (S2) ═══════════════════════════════ */
.pillars__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.pillar { display: grid; gap: 22px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--tile-bg); }
.pillar + .pillar { margin-top: var(--gap); }
.pillar__num { font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--muted); display: inline-flex; align-items: center; gap: .6rem; }
.pillar__num::after { content: ""; width: 40px; height: 1px; background: var(--line-2); }
.pillar h3 { margin-top: .8rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pillar h3 em { font-style: normal; font-size: .42em; letter-spacing: -.01em; color: var(--purple-ink); font-weight: 500; }
.pillar .lede { margin-top: 1rem; }
.pillar__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem 1rem; margin: 1.5rem 0 1.6rem; }
.pillar__list li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--text-2); }
.pillar__list .ico { width: 19px; height: 19px; color: var(--text); }
.pillar__visual { position: relative; height: 340px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(90% 80% at 80% 10%, rgba(91,63,217,0.18), transparent 60%), var(--bg-2); }

.pillars.is-split .pillars__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); }
.pillars.is-split .pillar { min-height: 78vh; display: flex; align-items: center; padding: 0; border: 0; background: none; box-shadow: none; margin: 0; }
.pillars.is-split .pillar > div { opacity: .28; transition: opacity .5s var(--ease); }
.pillars.is-split .pillar.is-active > div { opacity: 1; }
.pillars__stage { display: none; }
.pillars.is-split .pillars__stage { display: block; position: sticky; top: calc(50vh - 270px); height: 540px; }
.pillars.is-split .pillars__stage .pillar__visual { position: absolute; inset: 0; height: auto; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s var(--ease), transform .8s var(--ease); border-radius: 28px; }
.pillars.is-split .pillars__stage .pillar__visual.is-active { opacity: 1; transform: none; }

/* BUILD visual: a store assembling */
.v-build .v-browser { position: absolute; left: 4%; top: 12%; width: 68%; height: auto; border-radius: 16px; background: #fff; border: 1px solid var(--line-2); overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.v-build .v-bar { height: 30px; flex: none; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--bg-2); }
.v-build .v-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.v-build .v-bar i:first-child { background: var(--dot); }
.v-build .v-bar b { margin-left: 10px; padding: 2px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font: 600 .62rem/1.4 var(--font-body, inherit); color: var(--text-2, #475569); }
.v-build .v-nav { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px; font-size: .62rem; color: var(--text-2, #475569); border-bottom: 1px solid var(--line); }
.v-build .v-nav strong { margin-right: auto; color: var(--text); font-size: .78rem; letter-spacing: -.01em; }
.v-build .v-nav em { position: relative; display: grid; place-items: center; font-style: normal; color: var(--text); }
.v-build .v-nav em .ico { width: 16px; height: 16px; }
.v-build .v-nav u { position: absolute; top: -6px; right: -8px; min-width: 14px; height: 14px; border-radius: 99px; background: var(--brand); color: #fff; font: 700 .55rem/14px var(--font-body, inherit); text-align: center; text-decoration: none; }
.v-build .v-hero { flex: none; margin: 10px 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(120deg, #EDE8FF, #DDE9FF); display: grid; gap: 2px; justify-items: start; }
.v-build .v-hero small { font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.v-build .v-hero b { font-size: .95rem; letter-spacing: -.02em; color: var(--text); }
.v-build .v-hero span { margin-top: 4px; padding: 3px 10px; border-radius: 99px; background: var(--text); color: #fff; font-size: .55rem; font-weight: 600; }
.v-build .v-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 12px 12px; }
.v-build .v-card { position: relative; display: grid; gap: 1px; font-size: .58rem; min-width: 0; }
.v-build .v-card b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-build .v-card span { color: var(--text-2, #475569); white-space: nowrap; }
.v-build .v-card i { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; font: 700 .8rem/1 var(--font-body, inherit); font-style: normal; color: var(--brand); }
.v-build .v-img { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; margin-bottom: 3px; }
.v-build .v-img svg { width: 56%; height: 56%; }
.v-build .p1 { background: #FFE9D6; color: #B45309; } .v-build .p2 { background: #D9F3EE; color: #0B7A70; }
.v-build .p3 { background: #E5E0FF; color: #5B3FD9; } .v-build .p4 { background: #FFE0E6; color: #BE185D; }
.v-build .v-phone { position: absolute; right: 4%; bottom: 9%; width: 25%; aspect-ratio: 9 / 17; border-radius: 22px; background: #fff; border: 1px solid var(--line-2); padding: 20px 9px 9px; display: grid; gap: 3px; align-content: start; box-shadow: var(--shadow-lg); font-size: .62rem; }
.v-build .v-phone b { color: var(--text); margin-top: 4px; }
.v-build .v-phone span { color: var(--text-2, #475569); }
.v-build .v-pimg { aspect-ratio: 1; border-radius: 10px; background: #FFE9D6; color: #B45309; display: grid; place-items: center; }
.v-build .v-pimg svg { width: 55%; height: 55%; }
.v-build .v-phone em { margin-top: 4px; padding: 5px 0; border-radius: 99px; background: var(--brand); color: #fff; text-align: center; font-style: normal; font-weight: 600; font-size: .58rem; }
.v-build .v-tag { position: absolute; left: 4%; bottom: 4%; }
.js-motion .v-build .v-hero, .js-motion .v-build .v-card, .js-motion .v-build .v-phone, .js-motion .v-build .v-tag { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js-motion .v-build.is-active .v-hero, .js-motion .v-build.is-active .v-card, .js-motion .v-build.is-active .v-phone, .js-motion .v-build.is-active .v-tag { opacity: 1; transform: none; }
.v-build.is-active .v-card:nth-child(1) { transition-delay: .15s; } .v-build.is-active .v-card:nth-child(2) { transition-delay: .25s; }
.v-build.is-active .v-card:nth-child(3) { transition-delay: .35s; } .v-build.is-active .v-card:nth-child(4) { transition-delay: .45s; }
.v-build.is-active .v-phone { transition-delay: .55s; } .v-build.is-active .v-tag { transition-delay: .8s; }

/* RUN visual: mini dashboard */
.v-run { padding: 26px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.v-run .v-head { display: flex; align-items: center; justify-content: space-between; }
.v-run .v-kpis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.v-run .v-kpi { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-1); }
.v-run .v-kpi b { display: block; font-size: 1.7rem; letter-spacing: -.04em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.v-run .v-kpi span { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.v-run .v-kpi span .ico { width: 15px; height: 15px; }
.v-run .v-feed { display: grid; gap: 6px; }
.v-run .v-feed li { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--text-2); padding: 8px 10px; border-radius: 10px; background: var(--glass-1); }
.v-run .v-feed li .ico { width: 16px; height: 16px; color: var(--text); }
.js-motion .v-run .v-feed li { opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .6s var(--ease); }
.js-motion .v-run.is-active .v-feed li { opacity: 1; transform: none; }
.v-run.is-active .v-feed li:nth-child(2) { transition-delay: .5s; } .v-run.is-active .v-feed li:nth-child(3) { transition-delay: 1s; }

/* GROW visual: chart + orbiting icon chips */
.v-grow svg.v-chart { position: absolute; inset: 14% 8% 16% 8%; width: 84%; height: 70%; overflow: visible; }
.v-grow .v-line { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-motion .v-grow .v-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.js-motion .v-grow.is-active .v-line { stroke-dashoffset: 0; }
.v-grow .v-area { fill: url(#growFill); opacity: .9; }
.v-grow .v-orbit { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 1px dashed var(--line-2); animation: orbit 28s linear infinite; }
.v-grow .v-orbit .chip { position: absolute; width: 46px; height: 46px; background: var(--panel-bg); animation: orbit 28s linear infinite reverse; }
.v-grow .v-orbit .chip:nth-child(1) { left: calc(50% - 23px); top: -23px; }
.v-grow .v-orbit .chip:nth-child(2) { right: -23px; top: calc(50% - 23px); }
.v-grow .v-orbit .chip:nth-child(3) { left: calc(50% - 23px); bottom: -23px; }
.v-grow .v-orbit .chip:nth-child(4) { left: -23px; top: calc(50% - 23px); }
@keyframes orbit { to { transform: rotate(360deg); } }
.v-grow .v-stat { position: absolute; right: 8%; top: 9%; padding: 10px 14px; border-radius: 14px; background: var(--panel-bg); border: 1px solid var(--line-2); font-size: .78rem; color: var(--muted); }
.v-grow .v-stat b { display: block; font-size: 1.3rem; color: var(--text); letter-spacing: -.03em; }

@media (max-width: 899px) {
  .pillar__visual { height: 300px; }
  .pillar__list { grid-template-columns: minmax(0, 1fr); }
  .v-grow .v-orbit { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
}

/* ═══ Horizontal galleries (S3) ═════════════════════════════════════════ */
.hscroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll__track { display: flex; gap: var(--gap); width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.hscroll__track > * { scroll-snap-align: start; scroll-margin-left: var(--gutter); }
.hscroll__bar { height: 2px; border-radius: 2px; background: var(--line); margin-top: 28px; overflow: hidden; max-width: 320px; }
.hscroll__bar span { display: block; height: 100%; background: var(--dot); transform-origin: left; transform: scaleX(0); }
[data-scroll="s3"].is-pinned { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 90px 50px; }
[data-scroll="s3"].is-pinned .hscroll { overflow: visible; scroll-snap-type: none; }
[data-scroll="s3"].is-pinned .section-head { margin-bottom: 30px; }
[data-scroll="s3"].is-pinned .build-card { min-height: 0; }
[data-scroll="s3"].is-pinned .build-card__art { height: clamp(120px, 18vh, 200px); }
[data-scroll="s3"].is-pinned .case-card { min-height: 0; }
@media (min-width: 768px) { .drag-hint.only-mobile { display: none; } }
.drag-hint { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); }

.build-card { width: min(84vw, 420px); min-height: 520px; display: flex; flex-direction: column; padding: 0; }
.build-card__art { position: relative; height: 200px; margin: 10px 10px 0; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; background-color: var(--bg-2);
  background-image: radial-gradient(color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.build-card__art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 40%, rgba(91,63,217,0.22), transparent 70%); }
.build-card__art .ico { position: relative; z-index: 1; width: 76px; height: 76px; stroke-width: 1; }
.build-card__art img { position: absolute; z-index: 1; left: 16px; top: 16px; height: 22px; width: auto; }
.build-card__body { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.build-card__body .h3 { margin-bottom: .5rem; }
.build-card__who { font-size: .93rem; color: var(--text-2); }
.build-card .feature-list { margin: 1.1rem 0 1.4rem; gap: .5rem; }
.build-card .feature-list li { font-size: .88rem; }
.build-card .tile__foot { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: auto; }
.build-card--compare { width: min(88vw, 560px); padding: 26px; }
.compare { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 1rem; }
.compare th, .compare td { text-align: left; padding: .68rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-weight: 600; font-size: .78rem; color: var(--muted); }
.compare td:first-child { color: var(--muted); font-size: .78rem; width: 26%; }
.compare tr:last-child td { border-bottom: 0; }

/* ═══ Chapter 4: statement (S6) ════════════════════════════════════════ */
.statement { padding-block: clamp(110px, 16vw, 220px); }
.statement p { font-size: clamp(2rem, 5.2vw, 4.4rem); line-height: 1.06; letter-spacing: -0.042em; font-weight: 600; max-width: 20ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.statement p .text-purple { color: var(--purple-ink); }
.statement .w { transition: none; }

/* ═══ Chapter 5: Run: live dashboard (S10) + plans ════════════════════ */
.dash { padding: 0; }
.dash__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dash__top .cluster { --cluster: .5rem; }
.dash__body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) ; gap: 1px; background: var(--line); }
.dash__kpi { background: var(--bg-2); padding: 22px; }
[data-theme="light"] .dash__kpi { background: #fff; }
.dash__kpi .meta { display: flex; align-items: center; gap: .45rem; }
.dash__kpi .meta .ico { width: 17px; height: 17px; color: var(--text); }
.dash__kpi b { display: block; margin-top: .8rem; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.dash__kpi small { display: block; margin-top: .45rem; color: var(--muted); font-size: .78rem; }
.dash__lower { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.dash__lower > div { background: var(--bg-2); padding: 22px; }
[data-theme="light"] .dash__lower > div { background: #fff; }
.dash__bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 18px; }
.dash__bars span { flex: 1; height: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--text) 30%, transparent), color-mix(in srgb, var(--text) 8%, transparent)); transform-origin: bottom; transform: scaleY(.08); }
.dash__bars span:nth-child(9) { background: linear-gradient(180deg, var(--dot), rgba(91,63,217,0.25)); }
.dash__axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: .7rem; color: var(--faint); }
.dash__feed { display: grid; gap: 8px; margin-top: 14px; }
.dash__feed li { display: flex; align-items: center; gap: .7rem; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: .86rem; color: var(--text-2); opacity: .25; transition: opacity .4s, border-color .4s, background .4s; }
.dash__feed li.is-on { opacity: 1; }
.dash__feed li .ico { width: 18px; height: 18px; color: var(--text); }
.dash__feed li.is-final.is-on { border-color: var(--purple-line); background: var(--glass-purple); color: var(--text); }
.dash__feed li time { margin-left: auto; font-size: .72rem; color: var(--faint); }
@media (max-width: 900px) {
  .dash__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash__lower { grid-template-columns: minmax(0, 1fr); }
}

.plans__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: clamp(36px, 5vw, 56px) 0 18px; }
.plan { display: flex; flex-direction: column; }
.plan__name { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.plan__name b { font-size: 1.2rem; letter-spacing: -.02em; }
.plan__desc { font-size: .88rem; color: var(--muted); margin-top: .5rem; min-height: 2.9em; }
.plan__price { margin-top: 1.4rem; display: flex; align-items: baseline; gap: .1rem; font-variant-numeric: tabular-nums; }
.plan__price .cur { font-size: .95rem; color: var(--muted); font-weight: 600; margin-right: .3rem; }
.plan__price .amt { font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.plan__price .per { font-size: .9rem; color: var(--muted); margin-left: .25rem; }
.plan__billed { font-size: .78rem; color: var(--muted); margin-top: .5rem; min-height: 1.2em; }
.plan .feature-list { margin: 1.4rem 0 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.plan .btn { margin-top: auto; }
.plan--pop { border-color: var(--purple-line); border-width: 1.5px; background: linear-gradient(180deg, rgba(91,63,217,0.15), transparent 45%), var(--tile-bg); }

/* ═══ Chapter 6: Grow bento ═════════════════════════════════════════════ */
.grow-bento .tile { min-height: 250px; display: flex; flex-direction: column; }
.grow-bento .tile .tile__foot { padding-top: 1rem; }
.serp { margin-top: 1.4rem; display: grid; gap: 8px; position: relative; }
.serp__row { display: flex; align-items: center; gap: .8rem; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass-1); font-size: .84rem; color: var(--muted); }
.serp__row i { font-style: normal; font-weight: 600; font-size: .75rem; width: 22px; color: var(--faint); font-variant-numeric: tabular-nums; }
.serp__row span { flex: 1; height: 8px; border-radius: 4px; background: var(--glass-3); }
.serp__row span + span { flex: .5; }
.serp__row.is-you { color: var(--text); border-color: var(--purple-line); background: var(--glass-purple); }
.serp__row.is-you span { background: color-mix(in srgb, var(--text) 30%, transparent); }
.serp__row.is-you b { font-weight: 600; font-size: .82rem; }
.serp__climb { transition: transform 1.4s var(--ease); }
.bubbles { display: grid; gap: 8px; margin-top: 1.2rem; }
.bubble { max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 5px; background: var(--glass-2); border: 1px solid var(--line); font-size: .82rem; line-height: 1.4; }
.bubble small { display: block; color: var(--muted); font-size: .7rem; margin-top: 3px; }
.bubble--me { justify-self: end; border-radius: 16px 16px 5px 16px; background: var(--glass-purple); border-color: var(--purple-line); }
.viewfinder { position: relative; margin-top: 1.2rem; height: 128px; border-radius: 14px; display: grid; place-items: center; background: var(--glass-1); }
.viewfinder::before, .viewfinder::after { content: ""; position: absolute; inset: 12px; border: 1.5px solid var(--text); opacity: .7;
  mask: conic-gradient(at 22px 22px, transparent 75%, #000 0) 0 0 / calc(100% - 22px) calc(100% - 22px); -webkit-mask: conic-gradient(at 22px 22px, transparent 75%, #000 0) 0 0 / calc(100% - 22px) calc(100% - 22px); border-radius: 6px; }
.viewfinder::after { display: none; }
.viewfinder .ico { width: 54px; height: 54px; stroke-width: 1.1; }
.viewfinder em { position: absolute; right: 18px; top: 16px; font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.viewfinder em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.pl-mini { margin-top: 1.1rem; display: grid; gap: 6px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.pl-mini div { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px dashed var(--line-2); color: var(--muted); }
.pl-mini div:last-child { border: 0; color: var(--text); font-weight: 600; }
.funnel-bars { display: grid; gap: 6px; margin-top: 1.2rem; }
.funnel-bars span { height: 22px; border-radius: 7px; background: var(--glass-2); display: flex; align-items: center; padding-left: 10px; font-size: .7rem; color: var(--muted); }
.funnel-bars span:last-child { background: var(--glass-purple); border: 1px solid var(--purple-line); color: var(--text); }

/* ═══ Chapter 7: Process path (S5) ═════════════════════════════════════ */
.path { position: relative; }
.path__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.path__svg .path-base { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.path__svg .path-line { fill: none; stroke: url(#pathGrad); stroke-width: 2.5; stroke-linecap: round; }
.path__steps { position: relative; display: grid; gap: clamp(28px, 5vw, 64px); }
.path__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 96px; }
.path__step .tile { grid-column: 1; max-width: 460px; justify-self: end; width: 100%; }
.path__step:nth-child(even) .tile { grid-column: 2; justify-self: start; }
.path__node { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: border-color .4s, background .4s, transform .4s var(--ease); z-index: 1; }
.path__step:nth-child(odd) .path__node { left: calc(50% - 44px); }
.path__step:nth-child(even) .path__node { left: calc(50% + 26px); }
.path__node.is-hit { border-color: var(--dot); background: var(--dot); transform: scale(1.15); box-shadow: 0 0 0 6px var(--glass-purple); }
.path__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.path__head .num { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .1em; }
.path__traveller { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 14px; display: grid; place-items: center; background: var(--text); color: var(--bg); z-index: 2; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6); will-change: transform; }
.path__traveller .ico { width: 24px; height: 24px; stroke-width: 1.7; --dot: var(--purple-600); }
.path__traveller.is-moving .ico { animation: cart-bob .5s ease-in-out infinite alternate; }
@keyframes cart-bob { to { transform: translateY(-2px) rotate(-3deg); } }
@media (max-width: 899px) {
  .path__step { grid-template-columns: minmax(0, 1fr); padding-left: 44px; gap: 0; }
  .path__step .tile, .path__step:nth-child(even) .tile { grid-column: 1; justify-self: stretch; max-width: none; }
  .path__step:nth-child(odd) .path__node, .path__step:nth-child(even) .path__node { left: 6px; }
  .path__traveller { display: none; }
}

/* ═══ Chapter 8: Results gallery ═══════════════════════════════════════ */
.case-card { width: min(84vw, 400px); min-height: 470px; display: flex; flex-direction: column; }
.case-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.case-card__logo { height: 44px; width: 110px; border-radius: 10px; display: grid; place-items: center; background: #fff; }
.case-card__logo img { max-height: 32px; width: auto; max-width: 92px; object-fit: contain; }
.case-card__metric { margin-top: 1.8rem; font-size: clamp(3.4rem, 6vw, 4.8rem); font-weight: 600; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.case-card__metric-label { margin-top: .6rem; font-size: .95rem; color: var(--text-2); max-width: 28ch; }
.case-card__ba { margin-top: 1.4rem; display: grid; gap: .6rem; font-size: .85rem; color: var(--text-2); }
.case-card__ba div { padding: 10px 12px; border-radius: 12px; background: var(--glass-1); border: 1px solid var(--line); }
.case-card__ba b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .2rem; }
.case-card .tile__foot { margin-top: auto; padding-top: 1.2rem; }

/* ═══ Chapter 9: Mini estimator ════════════════════════════════════════ */
.mini { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.mini__q + .mini__q { margin-top: 1.6rem; }
.mini__q legend { font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .7rem; display: flex; align-items: center; gap: .55rem; }
.mini__q legend span { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; background: var(--glass-2); color: var(--text); font-size: .72rem; }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.opt span { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: 0 1rem; border-radius: 13px; border: 1px solid var(--line-2); background: var(--glass-1); font-size: .9rem; font-weight: 500; color: var(--text-2); transition: border-color .2s, background .2s, color .2s; }
.opt span .ico { width: 19px; height: 19px; }
.opt input:hover + span { border-color: var(--border-hover); color: var(--text); }
.opt input:checked + span { border-color: var(--purple-line); background: var(--glass-purple); color: var(--text); }
.opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }
.minicart { display: flex; flex-direction: column; }
.minicart__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.minicart__head b { display: flex; align-items: center; gap: .55rem; font-size: 1rem; }
.minicart__lines { display: grid; gap: .55rem; padding: 1rem 0; font-size: .86rem; color: var(--text-2); min-height: 110px; align-content: start; }
.minicart__lines li { display: flex; align-items: center; gap: .55rem; animation: fade-up .4s var(--ease); }
.minicart__lines .ico { width: 17px; height: 17px; color: var(--text); }
.minicart__total { border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: 1.2rem; }
.minicart__range { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.minicart__note { font-size: .76rem; color: var(--muted); margin-top: .4rem; }
@media (max-width: 900px) { .mini { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Chapter 10: Where we operate (S12) ═══════════════════════════════ */
.globe { position: relative; padding: 0; overflow: hidden; }
.globe svg { display: block; width: 100%; height: auto; }
.globe .grid-dot { fill: color-mix(in srgb, var(--text) 22%, transparent); }
.globe .arc { fill: none; stroke: var(--dot); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; transition: stroke-dashoffset 1.4s var(--ease); }
.globe .pin circle.halo { fill: var(--dot); opacity: 0; transform-box: fill-box; transform-origin: center; }
.globe .pin circle.core { fill: var(--faint); transition: fill .4s; }
.globe .pin text { font-size: 13px; font-weight: 600; fill: var(--muted); transition: fill .4s; }
.globe .pin text.time { font-size: 11px; font-weight: 500; fill: var(--faint); }
.globe .pin.is-lit circle.core { fill: var(--text); }
.globe .pin.is-lit circle.halo { animation: halo 2.6s var(--ease) infinite; }
.globe .pin.is-lit text { fill: var(--text); }
.globe .pin.is-lit .arc { stroke-dashoffset: 0; }
.globe .pin.hq circle.core { fill: var(--dot); }
@keyframes halo { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }
.globe__legend { position: absolute; left: clamp(18px, 3vw, 32px); bottom: clamp(18px, 3vw, 28px); display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 36px); }
@media (prefers-reduced-motion: reduce) { .globe .arc { stroke-dashoffset: 0; } }

/* ═══ Chapter 11: Reviews ══════════════════════════════════════════════ */
.review { display: flex; flex-direction: column; gap: 1rem; }
.marquee .review { width: 380px; flex: none; }
.review__stars { display: flex; gap: 2px; color: var(--text); }
.review__stars .ico { width: 15px; height: 15px; }
.review blockquote { font-size: .95rem; line-height: 1.6; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review__who { margin-top: auto; display: flex; align-items: center; gap: .8rem; }
.review__avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--line-2); font-weight: 600; font-size: .85rem; }
.review__who b { display: block; font-size: .9rem; }
.review__who span { font-size: .8rem; color: var(--muted); }
@media (max-width: 600px) { .marquee .review { width: 300px; } }

/* ═══ Insights tiles ════════════════════════════════════════════════════ */
.post-tile { display: flex; flex-direction: column; min-height: 300px; }
.post-tile__art { height: 150px; margin: -6px -6px 1.3rem; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--line);
  background: radial-gradient(70% 90% at 30% 0%, rgba(91,63,217,0.25), transparent 70%), var(--bg-2); }
.post-tile__art .ico { width: 56px; height: 56px; stroke-width: 1.1; }
.post-tile .meta { margin-bottom: .6rem; }
.post-tile .tile__foot { margin-top: auto; }

/* ═══ Checkout CTA band ═════════════════════════════════════════════════ */
.cta-band { padding-block: clamp(70px, 9vw, 120px); }

/* ═══ Service page template ═════════════════════════════════════════════ */
.svc-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.svc-hero h1 { margin-top: 1.1rem; }
.svc-hero .lede { margin-top: 1.4rem; }
.svc-hero .cluster { margin-top: 2rem; }
.svc-hero__meta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-scene { position: relative; border-radius: 28px; min-height: 440px; padding: 0; background: radial-gradient(110% 80% at 80% 0%, rgba(91,63,217,0.18), transparent 60%), var(--tile-bg); }
@media (max-width: 960px) { .svc-hero__inner { grid-template-columns: minmax(0, 1fr); } .svc-scene { min-height: 380px; } }

.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.split__sticky { position: sticky; top: 140px; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } .split__sticky { position: static; } }

/* S4 stacking process cards */
.stack-cards { display: grid; gap: 16px; }
.stack-card > .tile { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 3vw, 36px); align-items: center; min-height: 168px; }
.stack-card .big-num { font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; letter-spacing: -.06em; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--line-2); font-variant-numeric: tabular-nums; }
.is-stacking .stack-card { position: sticky; top: calc(130px + var(--i) * 14px); }
.is-stacking .stack-cards { gap: 40vh; padding-bottom: 10vh; }
.is-stacking .stack-card > .tile { background: var(--bg-2); }
[data-theme="light"] .is-stacking .stack-card > .tile { background: #fff; }
@media (max-width: 640px) { .stack-card > .tile { grid-template-columns: minmax(0, 1fr); } .stack-card .big-num { font-size: 2.6rem; } }

/* Track switcher (web development hero) */
.tracks { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tracks__tabs { margin: 16px auto 0; position: relative; z-index: 2; }
.tracks__panel { position: absolute; inset: 64px 18px 18px; display: none; }
.tracks__panel.is-active { display: block; animation: fade-up .5s var(--ease); }

/* Shopify vs WooCommerce interactive comparison */
.versus { padding: 0; }
.versus__head { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.versus__head > div { padding: 22px; display: flex; align-items: center; gap: .7rem; }
.versus__head img { height: 24px; width: auto; }
.versus__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-bottom: 1px solid var(--line); font-size: .92rem; }
.versus__row:last-child { border-bottom: 0; }
.versus__row > div { padding: 16px 22px; color: var(--text-2); transition: background .3s, color .3s; }
.versus__row > div:first-child { color: var(--muted); font-size: .84rem; font-weight: 550; }
.versus[data-pick="shopify"] .versus__row [data-win="shopify"], .versus[data-pick="woo"] .versus__row [data-win="woo"] { background: var(--glass-purple); color: var(--text); }
.versus[data-pick="shopify"] .versus__row [data-win="shopify"]::after, .versus[data-pick="woo"] .versus__row [data-win="woo"]::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); margin-left: .5rem; vertical-align: middle; }
@media (max-width: 700px) {
  .versus__head, .versus__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .versus__head > div:first-child { display: none; }
  .versus__row > div:first-child { grid-column: 1 / -1; padding-bottom: 0; }
}

/* Before / after wipe (S11) */
.wipe { position: relative; padding: 0; aspect-ratio: 16 / 9; }
.wipe__layer { position: absolute; inset: 0; }
.wipe__layer[data-after] { clip-path: inset(0 0 0 50%); }
.wipe__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--text); pointer-events: none; z-index: 3; }
.wipe__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 14px; background: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.wipe input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.wipe__label { position: absolute; top: 16px; z-index: 2; }
.wipe__label--l { left: 16px; } .wipe__label--r { right: 16px; }
.wipe.is-static { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wipe.is-static .wipe__layer { position: relative; aspect-ratio: 8 / 9; clip-path: none !important; }
.wipe.is-static .wipe__handle, .wipe.is-static input { display: none; }
.mock-old { background: #e9e6df; color: #333; font-family: 'Times New Roman', serif; padding: 6%; display: grid; grid-template-rows: auto auto 1fr; gap: 4%; }
.mock-old .o-nav { display: flex; gap: 10px; background: #2b4c7e; padding: 8px; }
.mock-old .o-nav span { height: 10px; flex: 1; background: #c9d4e8; }
.mock-old .o-banner { height: 70px; background: repeating-linear-gradient(45deg, #b8b2a4, #b8b2a4 6px, #c9c3b6 6px, #c9c3b6 12px); display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #555; letter-spacing: 2px; }
.mock-old .o-cols { display: grid; grid-template-columns: 1fr 2fr; gap: 4%; }
.mock-old .o-cols div { background: #d5d0c5; border: 2px outset #f5f2ec; }
.mock-new { background: var(--bg-2); padding: 5%; display: grid; grid-template-rows: auto 1fr auto; gap: 4%; }
[data-theme="light"] .mock-new { background: #fff; }
.mock-new .n-nav { display: flex; align-items: center; justify-content: space-between; }
.mock-new .n-nav b { width: 70px; height: 12px; border-radius: 6px; background: var(--text); opacity: .85; }
.mock-new .n-nav span { width: 80px; height: 24px; border-radius: 8px; background: var(--purple-btn); }
.mock-new .n-hero { border-radius: 16px; background: radial-gradient(80% 100% at 80% 0%, rgba(91,63,217,0.5), transparent 70%), var(--glass-2); display: flex; flex-direction: column; justify-content: center; padding: 6%; gap: 10px; }
.mock-new .n-hero i { display: block; height: 14px; border-radius: 7px; background: var(--text); width: 60%; }
.mock-new .n-hero i + i { width: 42%; opacity: .5; height: 10px; }
.mock-new .n-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock-new .n-grid span { aspect-ratio: 1; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--line); }

/* Generic scene widgets used on service heroes */
.phone { position: absolute; left: 50%; top: 50%; width: 250px; height: 420px; margin: -210px 0 0 -125px; border-radius: 40px; border: 1px solid var(--line-2); background: var(--bg); padding: 46px 14px 14px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); overflow: hidden; }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; width: 80px; height: 22px; margin-left: -40px; border-radius: 12px; background: var(--bg-3); }
.phone .msgs { display: grid; gap: 10px; }
.phone .msg { padding: 10px 12px; border-radius: 16px 16px 16px 5px; background: var(--glass-2); border: 1px solid var(--line); font-size: .78rem; line-height: 1.4; }
.phone .msg small { display: block; font-size: .64rem; color: var(--muted); margin-bottom: 3px; letter-spacing: .04em; }
.phone .msg--wa { border-color: var(--purple-line); background: var(--glass-purple); }
.phone .msg--me { justify-self: end; border-radius: 16px 16px 5px 16px; background: var(--text); color: var(--bg); border: 0; }
.js-motion .phone .msg { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s, transform .6s var(--ease); }
.js-motion .phone .msg.is-in { opacity: 1; transform: none; }

.serp-big { position: absolute; inset: 22px; display: grid; gap: 10px; align-content: center; }
.serp-big .bar { display: flex; align-items: center; gap: .6rem; height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass-1); font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.serp-big .res { position: relative; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-1); display: grid; gap: 6px; transition: transform .9s var(--ease); }
.serp-big .res i { font-style: normal; position: absolute; right: 14px; top: 12px; font-size: .72rem; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.serp-big .res b { display: block; height: 9px; width: 55%; border-radius: 5px; background: color-mix(in srgb, var(--text) 30%, transparent); }
.serp-big .res span { display: block; height: 7px; width: 80%; border-radius: 4px; background: var(--glass-3); }
.serp-big .res.you { border-color: var(--purple-line); background: var(--glass-purple); z-index: 2; }
.serp-big .res.you b { background: var(--text); width: auto; height: auto; font-size: .86rem; font-weight: 600; letter-spacing: -.01em; }
.serp-big .res.you i { color: var(--text); }

.frames { position: absolute; inset: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 10px; }
.frame { position: relative; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; background: var(--glass-1); }
.frame em { position: absolute; left: 10px; top: 10px; font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.frame .ico { width: 64px; height: 64px; stroke-width: 1; }
.frame--raw { background: repeating-linear-gradient(135deg, var(--glass-1), var(--glass-1) 10px, var(--glass-2) 10px, var(--glass-2) 20px); }
.frame--raw .ico { opacity: .45; transform: rotate(-8deg); }
.frame--edit .ico { filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
.frame--cut { background: #fff; color: #0D0D0D; }
.frame--cut em { color: #777; }
.frame--pdp { align-content: center; gap: 6px; padding: 12px; }
.frame--pdp .pdp-img { width: 100%; height: 56%; border-radius: 10px; background: #fff; display: grid; place-items: center; color: #0D0D0D; }
.frame--pdp .pdp-img .ico { width: 40px; height: 40px; }
.frame--pdp i { display: block; height: 7px; border-radius: 4px; background: var(--glass-3); width: 80%; }
.frame--pdp b { display: block; height: 22px; border-radius: 7px; background: var(--purple-btn); width: 100%; }
.js-motion .frames .frame { opacity: 0; transform: scale(.94); transition: opacity .6s, transform .8s var(--ease); }
.js-motion .frames .frame.is-in { opacity: 1; transform: none; }

.pl-build { position: absolute; inset: 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pl-build .row { display: flex; justify-content: space-between; padding: 11px 14px; border-radius: 12px; color: var(--text-2); }
.pl-build .row.minus span:last-child { color: var(--muted); }
.pl-build .row.total { margin-top: 8px; border: 1px solid var(--purple-line); background: var(--glass-purple); color: var(--text); font-weight: 600; font-size: 1.05rem; }
.pl-build .row.sub { border-top: 1px solid var(--line); border-radius: 0; color: var(--text); font-weight: 550; }
.js-motion .pl-build .row { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .5s var(--ease); }
.js-motion .pl-build .row.is-in { opacity: 1; transform: none; }

/* Month timeline (platform management S5 variant uses .path) */
.month-week { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-ink); }

/* ═══ Content pages ═════════════════════════════════════════════════════ */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-pills button { height: 40px; padding: 0 1rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--glass-1); font-size: .86rem; font-weight: 550; color: var(--text-2); display: inline-flex; align-items: center; gap: .45rem; transition: all .2s; }
.filter-pills button .ico { width: 17px; height: 17px; }
.filter-pills button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.work-grid > .is-wide { grid-column: span 2; }
.work-grid > [hidden] { display: none; }
@media (max-width: 980px) { .work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: minmax(0, 1fr); } .work-grid > .is-wide { grid-column: auto; } }

.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 760px) { .metric-strip { grid-template-columns: minmax(0, 1fr); } }

.timeline-rail { position: relative; display: grid; gap: 18px; }

.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 120px; display: grid; gap: 2px; }
.toc a { padding: .45rem .7rem; border-radius: 10px; font-size: .86rem; color: var(--muted); transition: color .2s, background .2s; }
.toc a:hover { color: var(--text); background: var(--glass-1); }
@media (max-width: 900px) { .legal-layout { grid-template-columns: minmax(0, 1fr); } .toc { position: static; display: none; } }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.faq-search { position: relative; max-width: 560px; }
.faq-search .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.faq-search .input { padding-left: 3rem; min-height: 56px; border-radius: 16px; font-size: 1.02rem; }
.faq-group + .faq-group { margin-top: 44px; }
.faq-group h2 { display: flex; align-items: center; gap: .7rem; margin-bottom: 16px; }

.oos { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px 0 80px; }
.oos__cart { width: 160px; height: 160px; margin: 0 auto 1.6rem; border-radius: 40px; display: grid; place-items: center; background: var(--tile-bg); border: 1px solid var(--line); }
.oos__cart .ico { width: 92px; height: 92px; stroke-width: .9; }
.js-motion .oos__cart { animation: wobble 3.4s var(--ease) infinite; }
@keyframes wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-6deg); } 82% { transform: rotate(5deg); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(1deg); } }

.reading-col { max-width: 720px; margin-inline: auto; }
.post-hero__art { height: clamp(180px, 26vw, 320px); border-radius: 26px; border: 1px solid var(--line); display: grid; place-items: center; margin: 2.4rem 0 3rem;
  background: radial-gradient(60% 90% at 30% 0%, rgba(91,63,217,0.3), transparent 70%), var(--tile-bg);
  background-image: radial-gradient(60% 90% at 30% 0%, rgba(91,63,217,0.3), transparent 70%), radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1px); background-size: auto, 18px 18px; }
.post-hero__art .ico { width: 96px; height: 96px; stroke-width: .9; }

/* ═══ Web development hero tracks ═══════════════════════════════════════ */
.tracks__panel { display: grid; place-items: center; }
/* ecommerce: a product card assembles */
.pc { position: relative; width: min(280px, 72%); padding: 12px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.8); }
[data-theme="light"] .pc { background: #fff; }
.pc__img { height: 190px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 30%, rgba(91,63,217,0.28), transparent 70%), var(--glass-2); }
.pc__img .ico { width: 84px; height: 84px; stroke-width: .9; }
.pc__title { height: 12px; width: 70%; border-radius: 6px; background: var(--text); opacity: .85; margin: 16px 4px 0; }
.pc__sub { height: 9px; width: 46%; border-radius: 5px; background: var(--glass-3); margin: 9px 4px 0; }
.pc__row { display: flex; align-items: center; justify-content: space-between; margin: 16px 4px 4px; }
.pc__price { font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc__btn { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .9rem; border-radius: 11px; background: var(--purple-btn); color: #fff; font-size: .8rem; font-weight: 600; transition: transform .2s; }
.pc__btn .ico { width: 16px; height: 16px; --dot: #fff; }
.pc-cart { position: absolute; right: 18%; top: 18%; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--panel-bg); border: 1px solid var(--line-2); }
.pc-cart .count-badge { position: absolute; top: -6px; right: -6px; transform: scale(0); transition: transform .4s var(--ease); }
.js-motion .tracks__panel[data-track-panel="ecommerce"] .pc__img,
.js-motion .tracks__panel[data-track-panel="ecommerce"] .pc__title,
.js-motion .tracks__panel[data-track-panel="ecommerce"] .pc__sub,
.js-motion .tracks__panel[data-track-panel="ecommerce"] .pc__price,
.js-motion .tracks__panel[data-track-panel="ecommerce"] .pc__btn { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.tracks__panel.s1 .pc__img { opacity: 1 !important; transform: none !important; }
.tracks__panel.s2 .pc__title, .tracks__panel.s2 .pc__sub { opacity: 1 !important; transform: none !important; }
.tracks__panel.s3 .pc__price { opacity: 1 !important; transform: none !important; }
.tracks__panel.s4 .pc__btn { opacity: 1 !important; transform: none !important; }
.tracks__panel.s5 .pc__btn { transform: scale(.95) !important; }
.tracks__panel.s5 .pc-cart .count-badge, :root:not(.js-motion) .pc-cart .count-badge { transform: scale(1); }
/* static: a wireframe fills in */
.wf { width: min(340px, 82%); display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.8); }
[data-theme="light"] .wf { background: #fff; }
.wf > span { display: block; border-radius: 10px; border: 1.5px dashed var(--line-2); transition: background .6s, border-color .6s; }
.wf .wf-nav { height: 22px; } .wf .wf-hero { height: 96px; } .wf .wf-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; border: 0; }
.wf .wf-row i { height: 62px; border-radius: 10px; border: 1.5px dashed var(--line-2); transition: background .6s, border-color .6s; }
.wf .wf-cta { height: 30px; width: 46%; }
.tracks__panel.s1 .wf-nav, :root:not(.js-motion) .wf-nav { background: var(--glass-3); border-style: solid; border-color: transparent; }
.tracks__panel.s2 .wf-hero, :root:not(.js-motion) .wf-hero { background: linear-gradient(120deg, rgba(91,63,217,0.5), rgba(91,63,217,0.3)); border-color: transparent; }
.tracks__panel.s3 .wf-row i, :root:not(.js-motion) .wf-row i { background: var(--glass-2); border-style: solid; border-color: var(--line); }
.tracks__panel.s4 .wf-cta, :root:not(.js-motion) .wf-cta { background: var(--purple-btn); border-color: transparent; }
/* migrate: WooCommerce → Shopify */
.mig { width: min(380px, 90%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mig__box { aspect-ratio: 1; border-radius: 20px; display: grid; place-items: center; align-content: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line-2); padding: 14px; text-align: center; }
[data-theme="light"] .mig__box { background: #fff; }
.mig__box img { height: 22px; width: auto; }
.mig__box small { font-size: .72rem; color: var(--muted); }
.mig__flow { position: relative; width: 70px; height: 2px; background: var(--line-2); }
.mig__flow i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); opacity: 0; }
.tracks__panel.s1 .mig__flow i { animation: flow 1.6s linear infinite; }
.mig__flow i:nth-child(2) { animation-delay: .4s !important; } .mig__flow i:nth-child(3) { animation-delay: .8s !important; } .mig__flow i:nth-child(4) { animation-delay: 1.2s !important; }
@keyframes flow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.mig__meter { grid-column: 1 / -1; margin-top: 10px; }
.mig__meter span { display: block; height: 6px; border-radius: 6px; background: var(--glass-3); overflow: hidden; }
.mig__meter span::after { content: ""; display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--purple-700), var(--dot)); transform: scaleX(0); transform-origin: left; transition: transform 2.4s var(--ease); }
.tracks__panel.s2 .mig__meter span::after, :root:not(.js-motion) .mig__meter span::after { transform: scaleX(1); }
.mig__meter p { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: 8px; }
.mig__done { opacity: 0; transition: opacity .4s; color: var(--text); }
.tracks__panel.s4 .mig__done, :root:not(.js-motion) .mig__done { opacity: 1; }
.svc-scene--tracks { min-height: 480px; }
.svc-scene .scene-caption { position: absolute; left: 18px; bottom: 16px; right: 18px; display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; color: var(--muted); }

/* SERP climb (seo) */
.serp-big .res { transition: transform .5s var(--ease), background .4s, border-color .4s; }
.serp-big .res.you.is-top { box-shadow: 0 0 0 6px var(--glass-purple); }

/* frames + phone reveal states */
.js-motion [data-scene] [data-at] { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .55s, transform .7s var(--ease); }
.js-motion [data-scene] [data-at].is-in { opacity: 1; transform: none; }
.frames .frame .ico.cut { color: #0D0D0D; }

/* Included grid (platform management) */
.inc-tile .cluster { --cluster: .3rem; margin-top: 1rem; }
.plan-table .feature-list li { font-size: .88rem; }
.included-note { display: flex; gap: .7rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; font-size: .9rem; color: var(--muted); }

/* Case study challenge → solution → result visuals (S2) */
.pillar h2 { margin-top: .8rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pillar h2 em { font-style: normal; font-size: .42em; letter-spacing: -.01em; color: var(--purple-ink); font-weight: 500; }
.cs-visual { display: grid; place-items: center; text-align: center; }
.cs-visual > div { display: grid; justify-items: center; gap: .35rem; padding: 24px; }
.cs-visual b { margin-top: 1.1rem; font-size: clamp(2.6rem, 4.6vw, 3.8rem); letter-spacing: -.055em; font-weight: 600; line-height: 1; }
.cs-visual span { color: var(--muted); font-size: .95rem; }

/* ═══ Payment pages (flow unchanged, visual re-skin only) ════════════════ */
.pay-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.pay-side { display: grid; gap: var(--gap); position: sticky; top: 100px; }
@media (max-width: 900px) { .pay-layout { grid-template-columns: minmax(0, 1fr); } .pay-side { position: static; } }
.phone-wrap, .amount-wrap { display: flex; gap: 8px; }
.phone-prefix { flex: none; display: inline-flex; align-items: center; padding: 0 .9rem; border-radius: 13px; border: 1px solid var(--line-2); background: var(--glass-2); font-size: .9rem; font-weight: 550; }
.amount-wrap .currency-select { width: 110px; flex: none; }
.method-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: .55rem; }
.method-btn { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass-1); font-size: .86rem; font-weight: 550; color: var(--text-2); transition: all .2s; }
.method-btn .ico { width: 22px; height: 22px; color: var(--text); }
.method-btn:hover:not(.disabled) { border-color: var(--border-hover); color: var(--text); }
.method-btn.selected { border-color: var(--purple-line); background: var(--glass-purple); color: var(--text); }
.method-btn.disabled { opacity: .4; cursor: not-allowed; }
.method-note { display: none; margin-top: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass-1); font-size: .88rem; color: var(--text-2); }
.method-note.active { display: block; animation: fade-up .35s var(--ease); }
.method-note strong { color: var(--text); display: block; margin-bottom: .3rem; }
.method-note a { color: var(--text); text-decoration: underline; text-decoration-color: var(--purple-line); }
.bank-detail { margin-top: .8rem; display: grid; gap: 4px; }
.bank-row { display: flex; justify-content: space-between; gap: 1rem; padding: 7px 10px; border-radius: 9px; background: var(--glass-2); font-size: .85rem; }
.bank-row span { color: var(--muted); }
.bank-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fee-box { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass-1); font-size: .86rem; font-variant-numeric: tabular-nums; }
.fee-box div { display: flex; justify-content: space-between; color: var(--muted); padding: 3px 0; }
.fee-box .total { color: var(--text); font-weight: 600; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.pay-error { display: none; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3); background: var(--glass-2); font-size: .88rem; }
.pay-error.visible { display: block; }
.confirm-state { display: none; text-align: center; padding: 30px 10px; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.status-main { min-height: 100vh; display: grid; place-items: center; padding: calc(var(--nav-h) + 60px) var(--gutter) 80px; }
.status-card { width: min(560px, 100%); text-align: center; }
.state-success, .state-error, .state-failed { display: none; }
.detail-grid { margin: 1.6rem 0 1rem; display: grid; gap: 4px; text-align: left; }
.detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: 10px 14px; border-radius: 11px; background: var(--glass-1); font-size: .9rem; }
.detail-label { color: var(--muted); }
.detail-value { font-weight: 600; }
.detail-value.green { color: var(--purple-ink); }
.notice-box { margin: 1.4rem 0 1rem; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass-1); font-size: .88rem; color: var(--text-2); text-align: left; }
.notice-box strong { color: var(--text); }
.cart-loader { display: grid; place-items: center; }
.cart-loader .w { transform-box: fill-box; transform-origin: center; animation: spin 1s linear infinite; }
.cart-loader svg { width: 64px; height: 64px; }

.calc > *, .split > *, .contact-grid > *, .pay-layout > *, .mini > *, .svc-hero__inner > *, .hero__inner > *, .legal-layout > *, .pillars__grid > * { min-width: 0; }

/* ═══ v5 light refinements for page sections ═══════════════════════════ */
.hero__stage { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.hero__line:nth-child(3) { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--brand); }
.js-motion .hero__line { opacity: .22; }
.hero__steps { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.hero__steps span.is-on { background: var(--brand); color: #fff; }
.scene { --sf: #FFFFFF; --sf2: #FBFBFD; --well: #F2F4F7; --hair: #D5DAE1; color: #0B1220; }
.pillar { background: #fff; }
.pillar__visual { background: linear-gradient(180deg, var(--brand-50), #fff); border-color: var(--line); }
.pillar:nth-child(2) .pillar__num, .pillar:nth-child(2) h3 em { color: var(--teal-ink); }
.pillar:nth-child(3) .pillar__num, .pillar:nth-child(3) h3 em { color: var(--amber-ink); }
.pillar:nth-child(2) .pillar__list .ico, .v-run .ico { color: var(--teal-ink); }
.pillar:nth-child(3) .pillar__list .ico { color: var(--amber-ink); }
.pillar h3 em { color: var(--brand); }
.v-run { background: linear-gradient(180deg, var(--teal-50), #fff); }
.v-grow { background: linear-gradient(180deg, var(--amber-50), #fff); }
.v-build .v-browser, .v-build .v-phone, .v-run .v-kpi, .v-grow .v-stat, .v-grow .v-orbit .chip { background: #fff; box-shadow: var(--shadow-md); border-color: var(--line); }
.v-grow .v-orbit .chip { color: var(--amber-ink); }
.v-grow .v-line { stroke: var(--amber-ink); }
.dash__kpi, .dash__lower > div { background: #fff; }
.dash__kpi .meta .ico { color: var(--teal-ink); }
.dash__bars span { background: linear-gradient(180deg, #C9D0DA, #E6E9EE); }
.dash__bars span:nth-child(9) { background: linear-gradient(180deg, var(--teal), #BFE9E4); }
.dash__feed li.is-final.is-on { background: var(--teal-50); border-color: #CBEDE8; color: var(--text); }
.plan--pop { border: 2px solid var(--brand); background: #fff; box-shadow: var(--shadow-md); }
.build-card__art, .post-tile__art { background-color: var(--bg-2); }
.build-card__art::after { background: radial-gradient(60% 70% at 50% 40%, rgba(91,63,217,0.10), transparent 70%); }
.build-card__art .ico, .post-tile__art .ico { color: var(--brand); }
.case-card__logo { border: 1px solid var(--line); }
.case-card__metric { color: var(--brand); }
.case-card__ba div { background: var(--bg-2); border-color: var(--line); }
.serp__row.is-you, .bubble--me { background: var(--brand-50); border-color: var(--brand-100); }
.funnel-bars span:last-child { background: var(--teal-50); border-color: #CBEDE8; color: var(--teal-ink); }
.statement p .text-purple { color: var(--brand); }
.path__svg .path-line { stroke: var(--brand); }
.path__node.is-hit { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 6px var(--brand-50); }
.path__traveller { background: var(--brand); color: #fff; }
.path__traveller .ico { --dot: #fff; }
.month-week { color: var(--teal-ink); }
.globe { background: #fff; }
.globe .arc { stroke: var(--brand); }
.globe .pin.hq circle.core, .globe .pin circle.halo { fill: var(--brand); }
.globe .pin.is-lit circle.core { fill: var(--text); }
.stack-card .big-num { -webkit-text-stroke: 1.5px var(--brand-200); }
.is-stacking .stack-card > .tile { background: #fff; }
.minicart { box-shadow: var(--shadow-md); }
.opt span { background: #fff; }
.opt input:checked + span { background: var(--brand-50); border-color: var(--brand); color: var(--brand-600); }
.mega__feature .big { color: var(--text); }
.filter-pills button { background: #fff; }
.filter-pills button[aria-pressed="true"] { background: var(--text); color: #fff; }
.oos__cart { box-shadow: var(--shadow-md); }
.oos__cart .ico { color: var(--brand); }
.mock-new { background: #fff; }
.versus[data-pick] .versus__row [data-win] { transition: background .3s; }
.svc-scene { background: linear-gradient(180deg, var(--brand-50), #fff 70%); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.phone { background: #fff; box-shadow: var(--shadow-lg); }
.phone .msg--me { background: var(--brand); color: #fff; }
.frame--cut, .frame--pdp .pdp-img { border: 1px solid var(--line); }
.pl-build .row.total { background: var(--teal-50); border-color: #CBEDE8; }

/* Compact process steps */
.steps-compact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.steps-compact .step { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-lg, 18px); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.steps-compact .step:last-child { background: var(--brand); border-color: var(--brand); }
.steps-compact .step:last-child * { color: #fff; }
.steps-compact .step:last-child .step__n { background: rgba(255,255,255,.2); }
.step__n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-purple, #EDE8FF); color: var(--brand); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.step__t { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 4px; }
.step__p { margin: 0; font-size: .88rem; color: var(--text-2); line-height: 1.5; }
@media (max-width: 960px) { .steps-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps-compact { grid-template-columns: minmax(0, 1fr); } }

/* Shopify pricing table */
.shopify-pricing { margin-top: 18px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; }
.shopify-pricing__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.shopify-pricing__head .h3 { margin: 0 0 4px; }
.sp-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; border-bottom: 1px solid var(--line); font-size: .92rem; }
.sp-row:last-child { border-bottom: 0; }
.sp-row > div { padding: 13px 16px; color: var(--text-2); }
.sp-row b { color: var(--text); } .sp-row small { display: block; color: var(--muted); font-size: .76rem; }
.sp-row--head { background: var(--bg-2); } .sp-row--head > div { font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@media (max-width: 720px) { .sp-table { overflow-x: auto; } .sp-row { min-width: 560px; } }