/* Software Development service page */
:root { --pk: #FF0A7A; }

/* hero: "The Orbit" */
.sd-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: #050405; isolation: isolate; }
.sd-hero > .wrap { width: 100%; }
.sd-hero-bg { position: absolute; inset: -4%; z-index: -3; transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0) scale(1.02); transition: transform .6s var(--ease); }
.sd-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; }
.sd-plate { opacity: 0; transition: opacity 1.6s var(--ease); object-position: 50% 62% !important; }
.gl-on .sd-plate { opacity: .75; }
.gl-on .sd-still { opacity: 0; transition: opacity 1.2s var(--ease); }
.sd-gl { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.sd-gl canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s var(--ease); }
.sd-gl.is-live canvas { opacity: 1; }
.sd-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(5 4 5 / .96) 0%, rgb(5 4 5 / .7) 28%, rgb(5 4 5 / .05) 55%, transparent 80%), linear-gradient(0deg, var(--ink-0) 0%, transparent 26%); }
.sd-hero-in { position: relative; padding-top: calc(var(--hd, 72px) + 40px); padding-bottom: 120px; }
.sd-hero-in > * { max-width: 640px; }
.sd-h1 { font: 900 clamp(3rem, 7.4vw, 7.4rem)/.9 var(--f-display); letter-spacing: -0.04em; }
.sd-h1 em { font-style: normal; color: var(--pk); }
.sd-ln { display: block; overflow: hidden; padding-bottom: .06em; }
.sd-ln > span { display: inline-block; }
.motion .sd-ln > span { animation: sd-up 1.2s var(--ease) both; }
.motion .sd-ln:nth-child(2) > span { animation-delay: .12s; } .motion .sd-ln:nth-child(3) > span { animation-delay: .24s; }
@keyframes sd-up { from { transform: translateY(105%); } }
.sd-lede { margin-top: 26px; font-size: var(--t-m); line-height: 1.4; color: var(--fg-2); max-width: 430px; }
.motion .sd-lede, .motion .sd-hero .actions { animation: sd-in 1s var(--ease) .5s both; }
.sd-hero .actions { margin-top: 34px; }
.sd-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 400 10px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); opacity: 0; transition: opacity 1s 1.5s; }
.gl-on .sd-hint { opacity: 1; }
@media (pointer: coarse), (max-width: 900px) { .sd-hint { display: none; } }

.sd-live { position: absolute; right: var(--pad); bottom: clamp(28px, 6vh, 64px); width: min(340px, 40vw); padding: 16px 18px; border: 1px solid rgb(255 255 255 / .14); border-radius: 14px; background: rgb(13 11 12 / .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sd-live-h { display: flex; align-items: center; gap: 10px; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 12px; }
.sd-live-h i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgb(61 220 132 / .6); animation: sd-ping 1.8s infinite; }
.sd-live-h span { margin-left: auto; color: var(--fg-3); border: 1px solid var(--rule); padding: 4px 6px; border-radius: 4px; }
@keyframes sd-ping { 70% { box-shadow: 0 0 0 8px rgb(61 220 132 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 220 132 / 0); } }
.sd-live ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 132px; }
.sd-live li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline; font-size: 13px; color: var(--fg); animation: sd-in .6s var(--ease) both; }
.sd-live li b { color: var(--pk); font: 400 11px/1 var(--f-mono); }
.sd-live li time { font: 400 10px/1 var(--f-mono); color: var(--fg-3); }
.sd-live li:nth-child(n+2) { opacity: .62; } .sd-live li:nth-child(n+3) { opacity: .38; } .sd-live li:nth-child(n+4) { opacity: .18; }
@keyframes sd-in { from { opacity: 0; transform: translateY(-8px); } }

/* full-bleed bands: open from an inset frame to the full width as they enter */
.sd-band { position: relative; min-height: 92vh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.sd-band > .wrap { width: 100%; }
.sd-band-img { position: absolute; inset: 0; z-index: -1; clip-path: inset(calc((1 - var(--open, 1)) * 9%) calc((1 - var(--open, 1)) * 7%) round calc((1 - var(--open, 1)) * 28px)); }
.sd-band-img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, calc(var(--drift, 0) * -9%), 0) scale(calc(1.12 - var(--open, 1) * .1)); will-change: transform; }
.sd-band-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(5 4 5 / .92) 0%, rgb(5 4 5 / .35) 38%, transparent 62%), linear-gradient(180deg, var(--ink-0) 0%, transparent 14%); }
.sd-band-in { padding-block: 0 clamp(56px, 10vh, 120px); }
.sd-big { font: 900 clamp(2.6rem, 7vw, 7rem)/.92 var(--f-display); letter-spacing: -0.04em; max-width: 13ch; text-wrap: balance; }
.sd-band-sub { margin-top: 22px; font-size: var(--t-m); color: var(--fg-2); max-width: 34ch; line-height: 1.4; }
.sd-band--c { align-items: center; text-align: center; }
.sd-band--c .sd-big { margin-inline: auto; }
.sd-band--c .sd-band-sub { margin-inline: auto; }
.sd-band--c .sd-band-in { padding-block: 0; }
.sd-band--c .sd-band-img::after { background: radial-gradient(60% 70% at 50% 50%, rgb(5 4 5 / .62), rgb(5 4 5 / .2) 70%), linear-gradient(180deg, var(--ink-0) 0%, transparent 16%, transparent 84%, var(--ink-0) 100%); }
.sd-band--low { min-height: 78vh; }

/* what we build: an image bento */
.sd-build { padding-block: clamp(40px, 6vh, 80px) clamp(80px, 12vh, 140px); }
.sd-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 23vw, 360px); gap: clamp(10px, 1.2vw, 18px); }
.sd-tile { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--rule-soft); background: var(--ink-1); }
.t-a { grid-column: span 5; grid-row: span 2; } .t-b { grid-column: span 4; } .t-c { grid-column: span 3; }
.t-d { grid-column: span 4; } .t-e { grid-column: span 3; } .t-f { grid-column: span 12; grid-row: span 1; }
.sd-tile:nth-child(2) { --d: 80ms; } .sd-tile:nth-child(3) { --d: 160ms; } .sd-tile:nth-child(4) { --d: 120ms; } .sd-tile:nth-child(5) { --d: 200ms; } .sd-tile:nth-child(6) { --d: 120ms; }
.sd-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.95) brightness(.85); }
.sd-tile:hover img { transform: scale(1.07); filter: saturate(1.1) brightness(1); }
.sd-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgb(255 10 122 / .22), transparent 60%); opacity: 0; transition: opacity .5s; }
.sd-tile:hover::before { opacity: 1; }
.sd-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .86), rgb(0 0 0 / .1) 52%, transparent 70%); }
.sd-tile > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2vw, 30px); }
.sd-tile span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--pk); }
.sd-tile h3 { font: 700 clamp(1.3rem, 1.9vw, 2rem)/1.05 var(--f-display); letter-spacing: -0.02em; margin: 10px 0 8px; }
.t-a h3 { font-size: clamp(1.8rem, 3vw, 3rem); }
.sd-tile p { color: var(--fg-2); line-height: 1.45; max-width: 34ch; font-size: 15px; }
.t-f img { object-position: 50% 50%; }
.sd-band + section { border-top: 0; }

/* the example: a pinned story */
.sd-case { position: relative; border-top: 1px solid var(--rule-soft); background: radial-gradient(60% 60% at 75% 50%, oklch(0.2 0.06 330 / .5), transparent 70%), var(--ink-0); }
.motion .sd-case { height: 320vh; }
.sd-case-stage { padding-block: clamp(80px, 12vh, 140px); }
.motion .sd-case-stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-block: calc(var(--hd, 72px) + 20px) 40px; }
.sd-case-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sd-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 6px; }
.sd-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0 16px 18px; border-left: 2px solid rgb(255 255 255 / .12); opacity: .4; transition: opacity .5s, border-color .5s; }
.sd-steps li.on { opacity: 1; border-color: var(--pk); }
.sd-steps span { font: 400 var(--t-xs)/1.6 var(--f-mono); color: var(--pk); }
.sd-steps h3 { font: 700 var(--t-m)/1.2 var(--f-display); margin-bottom: 6px; }
.sd-steps p { color: var(--fg-2); line-height: 1.5; max-width: 40ch; }
.sd-case-vis { position: relative; aspect-ratio: 4 / 3.6; border-radius: 18px; overflow: hidden; border: 1px solid var(--rule-soft); background: var(--ink-1); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .8); }
.sd-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
.sd-shot.on { opacity: 1; transform: none; }
.sd-shot img { width: 100%; height: 100%; object-fit: cover; }
.still .sd-shot { position: relative; opacity: 1; transform: none; }
.still .sd-case-vis { aspect-ratio: auto; display: grid; gap: 12px; background: none; border: 0; }
.sd-ext { position: absolute; right: 5%; bottom: 6%; width: min(330px, 62%); padding: 16px; border-radius: 14px; background: rgb(13 11 12 / .78); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(12px); }
.sd-ext-h { display: flex; justify-content: space-between; font: 400 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--fg-2); margin-bottom: 12px; text-transform: uppercase; }
.sd-ext-h span { color: var(--fg-3); }
.sd-ext dl { margin: 0; display: grid; gap: 9px; }
.sd-ext dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; align-items: baseline; }
.sd-ext dt { font: 400 10px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.sd-ext dd { margin: 0; font-size: 13px; font-weight: 600; color: #fff; min-height: 1.2em; }
.sd-ext i { grid-column: 2; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .1); position: relative; overflow: hidden; }
.sd-ext i::after { content: ""; position: absolute; inset: 0; width: calc(var(--c) * 100%); background: var(--pk); transform: scaleX(var(--k, 0)); transform-origin: left; transition: transform .7s var(--ease); }

.sd-prog { margin-top: 28px; height: 2px; background: rgb(255 255 255 / .1); border-radius: 2px; overflow: hidden; max-width: 380px; }
.sd-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--pk), #a78bfa); transform: scaleX(0); transform-origin: left; }
.still .sd-prog { display: none; }
.sd-chat, .sd-dash { position: absolute; right: 5%; bottom: 6%; width: min(360px, 66%); padding: 16px; border-radius: 14px; background: rgb(13 11 12 / .8); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sd-bub { margin: 0 0 10px; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; max-width: 88%; }
.sd-bub.me { margin-left: auto; background: rgb(255 255 255 / .1); border-bottom-right-radius: 4px; }
.sd-bub.ai { background: linear-gradient(135deg, rgb(255 10 122 / .85), rgb(139 92 246 / .85)); color: #fff; font-weight: 600; border-bottom-left-radius: 4px; min-height: 2.9em; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sd-bub.ai.in { opacity: 1; transform: none; }
.still .sd-bub.ai { opacity: 1; transform: none; }
.sd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sd-kpis div { padding: 10px; border-radius: 10px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); }
.sd-kpis b { display: block; font: 900 clamp(1.4rem, 2.2vw, 2rem)/1 var(--f-display); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.sd-kpis div:nth-child(3) b { color: var(--pk); }
.sd-kpis small { display: block; margin-top: 6px; font: 400 9.5px/1.25 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.sd-spark { display: block; width: 100%; height: 64px; margin-top: 12px; }
.sd-spark .a { fill: url(#sdg); opacity: 0; transition: opacity 1s .6s; }
.sd-spark .l { fill: none; stroke: var(--pk); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.sd-dash.in .sd-spark .a, .still .sd-spark .a { opacity: 1; }
.sd-dash.in .sd-spark .l, .still .sd-spark .l { stroke-dashoffset: 0; }

/* try it */
.sd-ask { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.sd-ask-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.sd-note { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.sd-console { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; }
.sd-chips { display: grid; gap: 10px; align-content: start; }
.sd-chip { text-align: left; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--rule); background: var(--ink-1); color: var(--fg-2); font: 600 var(--t-s)/1.35 var(--f-body); cursor: pointer; transition: border-color .3s, color .3s, background-color .3s, transform .3s var(--ease); }
.sd-chip:hover { color: var(--fg); transform: translateX(4px); }
.sd-chip[aria-pressed="true"] { border-color: var(--pk); color: #fff; background: oklch(0.2 0.06 358); }
.sd-chip:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }
.sd-answer { min-height: 360px; padding: clamp(22px, 2.4vw, 34px); border-radius: 16px; border: 1px solid var(--rule-soft); background: linear-gradient(160deg, var(--ink-1), var(--ink-0)); }
.sd-q { font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .06em; color: var(--fg-3); text-transform: uppercase; }
.sd-a { margin-top: 14px; font: 700 var(--t-l)/1.25 var(--f-display); letter-spacing: -0.015em; min-height: 2.5em; }
.sd-a::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 4px; background: var(--pk); vertical-align: -.12em; animation: sd-blink 1s steps(2) infinite; }
.sd-a.done::after { display: none; }
@keyframes sd-blink { 50% { opacity: 0; } }
.sd-chart { margin-top: 26px; display: grid; gap: 12px; }
.sd-bar { display: grid; grid-template-columns: 120px 1fr 56px; gap: 12px; align-items: center; font-size: 13px; color: var(--fg-2); }
.sd-bar i { height: 10px; border-radius: 6px; background: rgb(255 255 255 / .08); position: relative; overflow: hidden; }
.sd-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, oklch(0.5 0.2 320), var(--pk)); transform: scaleX(0); transform-origin: left; animation: sd-grow .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
.sd-bar b { font: 400 12px/1 var(--f-mono); color: #fff; text-align: right; }
@keyframes sd-grow { to { transform: scaleX(1); } }
.sd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sd-facts div { padding: 14px; border-radius: 10px; border: 1px solid var(--rule-soft); background: rgb(255 255 255 / .02); animation: sd-in .6s var(--ease) both; animation-delay: var(--d, 0s); }
.sd-facts dt { font: 400 10px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.sd-facts dd { margin: 6px 0 0; font-weight: 700; color: #fff; }
.sd-src { margin-top: 20px; font: 400 10px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--fg-3); text-transform: uppercase; }

/* three promises */
.sd-promise { padding-block: clamp(40px, 8vh, 100px); border-top: 1px solid var(--rule-soft); }
.sd-promise ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.sd-promise li:nth-child(2) { --d: 100ms; } .sd-promise li:nth-child(3) { --d: 200ms; }
.sd-promise b { display: block; font: 900 clamp(2.4rem, 5vw, 4.6rem)/1 var(--f-display); letter-spacing: -0.04em; background: linear-gradient(100deg, #fff 20%, var(--pk) 70%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.sd-promise p { margin-top: 12px; color: var(--fg-2); font-size: var(--t-s); line-height: 1.4; }

/* how we build: carousel */
.sd-how { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); overflow: hidden; }
.sd-how-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vh, 56px); }
.sd-nav { display: flex; gap: 10px; }
.sd-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--fg); font-size: 20px; cursor: pointer; transition: background-color .3s, border-color .3s; }
.sd-btn:hover { background: var(--pk); border-color: var(--pk); }
.sd-track { display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad) 8px; scroll-padding-inline: var(--pad); cursor: grab; }
.sd-track::-webkit-scrollbar { display: none; }
.sd-track.drag { cursor: grabbing; scroll-snap-type: none; }
.sd-track.drag .sd-card { pointer-events: none; }
.sd-card { position: relative; flex: 0 0 clamp(280px, 36vw, 580px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--rule-soft); }
.sd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; user-select: none; }
.sd-card:hover img { transform: scale(1.06); }
.sd-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .88), rgb(0 0 0 / .15) 50%, transparent 70%); }
.sd-card > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2vw, 30px); }
.sd-card span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--pk); }
.sd-card h3 { font: 700 var(--t-l)/1.08 var(--f-display); margin: 12px 0 10px; }
.sd-card p { color: var(--fg-2); line-height: 1.45; max-width: 30ch; }
.sd-card h3 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
.sd-rail { margin-top: 26px; height: 2px; background: rgb(255 255 255 / .1); border-radius: 2px; overflow: hidden; }
.sd-rail i { display: block; height: 100%; width: 30%; background: var(--pk); transition: transform .15s linear; }

/* faq */
.sv-faq { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.sv-faq .faq { margin-top: 32px; }
.sv-faq details { border-top: 1px solid var(--rule-soft); padding: 18px 0; }
.sv-faq summary { cursor: pointer; font: 700 var(--t-m)/1.3 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; color: var(--pk); font-size: 1.4em; line-height: 1; transition: transform .3s; }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq details p { margin-top: 12px; max-width: 70ch; color: var(--fg-2); line-height: 1.65; }
.close-alt { display: flex; flex-wrap: wrap; gap: 0 32px; }

@media (max-width: 900px) {
  .sd-hero { align-items: end; }
  .sd-hero-bg { inset: 0 -4% 40% -4%; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .sd-hero-bg img { object-position: 46% 50%; }
  .sd-plate { object-position: 50% 60% !important; }
  .sd-hero::after { background: linear-gradient(0deg, var(--ink-0) 0%, var(--ink-0) 34%, rgb(13 11 12 / .6) 50%, transparent 66%); }
  .sd-hero-in { padding-top: 46svh; padding-bottom: 36px; }
  .sd-live { position: relative; right: auto; bottom: auto; width: auto; margin: 0 var(--pad) 48px; }
  .sd-band { min-height: 72svh; }
  .sd-band-img img { inset: -6% 0; height: 112%; object-position: 50% 50%; }
  .sd-bento { grid-template-columns: 100%; grid-auto-rows: auto; }
  .sd-tile { grid-column: 1 / -1 !important; grid-row: auto !important; aspect-ratio: 4 / 3.6; }
  .t-a { aspect-ratio: 4 / 5; }
  .motion .sd-case { height: auto; }
  .motion .sd-case-stage { position: relative; height: auto; padding-block: 80px; }
  .sd-case-grid, .sd-console { grid-template-columns: 100%; }
  .sd-case-vis { aspect-ratio: 4 / 4.6; }
  .sd-ext, .sd-chat, .sd-dash { width: auto; left: 4%; right: 4%; bottom: 4%; }
  .sd-prog { display: none; }
  .sd-promise ul { grid-template-columns: 100%; gap: 28px; }
  .sd-bar { grid-template-columns: 90px 1fr 48px; }
  .sd-card { flex-basis: 80vw; }
}
@media (min-width: 901px) and (max-width: 1200px) { .sd-h1 { font-size: clamp(3rem, 7vw, 5.6rem); } }

/* ---------- polish 24 Oct: no numbering, no gradient text, tap targets, contrast ---------- */
/* story steps: a square magenta pixel marks each step (was a number) */
.sd-steps li { grid-template-columns: 14px 1fr; }
.sd-px { width: 6px; height: 6px; margin-top: .55em; background: var(--fg-3); transition: background-color .5s, transform .5s var(--ease); }
.sd-steps li.on .sd-px { background: var(--pk); transform: scale(1.4); }
.sd-steps li:focus-visible { outline: 2px solid var(--pk); outline-offset: 4px; border-radius: 4px; }
.sd-steps li:not(.on):hover { opacity: .7; }
/* bento and carousel: a pixel kicker above each title in place of the number */
.sd-tile h3::before, .sd-card h3::before { content: ""; display: block; width: 6px; height: 6px; margin-bottom: 14px; background: var(--pk); }
.sd-tile h3 { margin-top: 0; }
.sd-card h3 { margin-top: 0; }
/* promises: solid type, the full stop is the magenta square pixel */
.sd-promise b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.sd-promise b::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .06em; background: var(--pk); vertical-align: baseline; }
.sd-promise p { max-width: 30ch; }
/* bands: keep copy legible over bright imagery */
.sd-band-in { text-shadow: 0 2px 30px rgb(0 0 0 / .55); }
.sd-band-sub { color: #e9e6ea; }
/* tap targets and focus */
.sd-hero .crumb a { display: inline-block; padding-block: 14px; margin-block: -14px; }
.sv-faq details { padding: 6px 0; }
.sv-faq summary { padding-block: 12px; min-height: 48px; align-items: center; }
.sv-faq summary:focus-visible { outline: 2px solid var(--pk); outline-offset: 4px; border-radius: 4px; }
.sv-faq details p { margin: 2px 0 14px; }
.sd-btn:focus-visible, .sd-track:focus-visible { outline: 2px solid var(--pk); outline-offset: 3px; }
.sd-chip { min-height: 48px; }
@media (max-width: 900px) {
  .sd-band--c .sd-band-in { padding-inline: calc(var(--pad) + 12px); }
  .sd-band--c .sd-band-sub { font-size: 17px; max-width: 28ch; }
  .sd-band--c .sd-band-img::after { background: radial-gradient(80% 60% at 50% 50%, rgb(5 4 5 / .72), rgb(5 4 5 / .3) 75%), linear-gradient(180deg, var(--ink-0) 0%, transparent 16%, transparent 84%, var(--ink-0) 100%); }
  .sd-band-img::after { background: linear-gradient(0deg, rgb(5 4 5 / .95) 0%, rgb(5 4 5 / .5) 40%, transparent 66%), linear-gradient(180deg, var(--ink-0) 0%, transparent 14%); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-tile img, .sd-card img, .sd-chip, .sd-chip:hover { transition: none; transform: none; }
}
.sd-promise p { text-wrap: balance; }

/* design fix 25 Oct: no gradient text, solid magenta */
.sd-promise b { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; -webkit-text-fill-color: currentColor !important; }