/* Commercial pages have a compact layout independent of course/animation styles. */
.commercial-page {
    --font-display: "Onest", sans-serif;
    --section-space: clamp(2.25rem, 4vw, 3.75rem);
    --muted: #d0cac2;
    --page-pad: clamp(1.25rem, 5vw, 5rem);
    background: #0a0908;
    font-size: 17px;
    line-height: 1.65;
}
.commercial-page::after { display: none; }
.commercial-page h1, .commercial-page h2, .commercial-page h3 {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: -.025em;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: normal;
    font-weight: 600;
    max-width: none;
}
.commercial-page h1 { font-size: clamp(2.1rem, 4.3vw, 3.75rem); }
.commercial-page h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); }
.commercial-page h3 { font-size: 1.2rem; }
.commercial-page p { text-wrap: pretty; }
.commercial-page .site-header, .commercial-page .site-header.is-scrolled {
    min-height: 4.5rem;
    background: #0a0908;
    border-bottom: 1px solid var(--line);
}
.commercial-page .logo { font-family: "Unbounded", sans-serif; }
.commercial-page .site-nav a { font-size: .85rem; text-transform: none; letter-spacing: 0; }
.commercial-page .eyebrow { font-size: .75rem; letter-spacing: .07em; margin-bottom: .75rem; }
.commercial-page .btn {
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none;
    min-height: 2.9rem;
    padding: .65rem 1rem;
    transform: none;
    box-shadow: none;
}
.commercial-page .btn:hover { transform: none; box-shadow: none; background: #ff79ab; }
.commercial-page .btn-ghost { color: var(--text); background: transparent; }
.commercial-page .btn-ghost:hover { color: var(--ink); background: var(--paper); }
.commercial-page .text-link, .commercial-page .card-link {
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mint);
}
.commercial-page .section { padding: var(--section-space) var(--page-pad); min-height: 0; }
.commercial-page .business-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 8rem var(--page-pad) 5rem;
    min-height: clamp(34rem, 76svh, 42rem);
    background: #0a0c0e;
}
.commercial-page .business-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(6,8,10,.93) 0%, rgba(6,8,10,.8) 34%, rgba(6,8,10,.26) 66%, rgba(6,8,10,.08) 100%);
}
.commercial-page .business-hero-content { position: relative; z-index: 1; width: min(100%, 37rem); }
.commercial-page .business-hero h1 { max-width: 18ch; }
.commercial-page .business-hero h1 span { color: var(--mint); }
.commercial-page .business-hero p:not(.eyebrow) { max-width: 48ch; color: var(--muted); margin: 1.2rem 0; }
.commercial-page .hero-scene { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.commercial-page .hero-scene > img {
    width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%;
    animation: hero-camera-drift 24s ease-in-out infinite alternate;
    animation-play-state: paused;
}
.commercial-page .hero-light { position: absolute; width: 35%; height: 65%; border-radius: 50%; opacity: .18; animation: hero-light-drift 13s ease-in-out infinite alternate; animation-play-state: paused; }
.commercial-page .hero-light-mint { right: 4%; top: 15%; background: radial-gradient(ellipse, rgba(120,245,203,.55), transparent 65%); }
.commercial-page .hero-light-pink { right: 18%; top: 4%; background: radial-gradient(ellipse, rgba(255,79,145,.5), transparent 65%); animation-delay: -6s; animation-duration: 17s; }
.commercial-page .hero-prism { position: absolute; width: 3rem; height: 3rem; animation: hero-prism-float 12s ease-in-out infinite alternate; animation-play-state: paused; opacity: .65; }
.commercial-page .hero-prism-1 { right: 18%; top: 22%; }
.commercial-page .hero-prism-2 { right: 6%; top: 61%; width: 2rem; height: 2rem; animation-delay: -5s; animation-duration: 16s; }
.commercial-page .hero-prism-3 { right: 35%; top: 67%; width: 1.4rem; height: 1.4rem; animation-delay: -9s; animation-duration: 19s; }
.commercial-page .hero-prism i { position: absolute; inset: 0; border: 1px solid rgba(120,245,203,.7); background: linear-gradient(135deg, rgba(120,245,203,.12), rgba(10,15,17,.15)); transform: skewY(-16deg); box-shadow: 0 0 14px rgba(120,245,203,.12); }
.commercial-page .hero-prism i:nth-child(2) { width: 45%; left: 100%; transform-origin: left; transform: skewY(30deg); background: rgba(120,245,203,.07); }
.commercial-page .hero-prism i:nth-child(3) { height: 28%; top: -28%; transform-origin: bottom; transform: skewX(-57deg); background: rgba(120,245,203,.1); }
.commercial-page .hero-prism-2 i { border-color: rgba(255,79,145,.65); box-shadow: 0 0 12px rgba(255,79,145,.14); }
.commercial-page .hero-motion-control {
    position: absolute; right: var(--page-pad); bottom: 1.2rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: 2.75rem; padding: .5rem .8rem; color: var(--text);
    background: rgba(6,8,10,.85); border: 1px solid rgba(255,250,243,.35);
    font-size: .8rem; cursor: pointer;
}
.commercial-page .hero-motion-control b { font-weight: 500; }
.commercial-page .hero-motion-control[hidden] { display: none; }
.commercial-page .is-motion-playing .hero-scene > img,
.commercial-page .is-motion-playing .hero-light,
.commercial-page .is-motion-playing .hero-prism { animation-play-state: running; }
.commercial-page .business-hero.is-offscreen .hero-scene *,
.commercial-page .business-hero.is-hidden-tab .hero-scene * { animation-play-state: paused; }
@keyframes hero-camera-drift { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.075) translate(-.65%,.4%); } }
@keyframes hero-light-drift { from { transform: translate(-4%, -3%) scale(.9); opacity: .13; } to { transform: translate(4%, 5%) scale(1.1); opacity: .3; } }
@keyframes hero-prism-float { from { transform: translate3d(0,-10px,0) rotate(-8deg); } to { transform: translate3d(8px,14px,0) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
    .commercial-page:not(.motion-force) .hero-scene * { animation: none; }
}
.commercial-page .hero-actions { gap: .75rem; margin-top: 1.5rem; }
.commercial-page .section-heading { max-width: 55rem; margin-bottom: 1.5rem; }
.commercial-page .process-section .section-heading h2,
.commercial-page .news-preview .section-heading h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); line-height: 1.2; max-width: none; }
.commercial-page .page-hero { min-height: 0; padding: 7rem var(--page-pad) 2rem; }
.commercial-page .page-hero::after { display: none; }
.commercial-page .page-hero h1 { max-width: 24ch; font-size: clamp(2rem, 3.7vw, 3.2rem); line-height: 1.2; }
.commercial-page .page-hero > p:not(.eyebrow) { max-width: 65ch; color: var(--muted); font-size: 1.05rem; margin: 1rem 0 0; }
.commercial-page .services-preview { display: block; background: #151311; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.commercial-page .rail-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.commercial-page .rail-heading h2 { max-width: 35ch; }
.commercial-page .rail-controls { display: flex; gap: .5rem; flex-shrink: 0; }
.commercial-page .rail-controls[hidden] { display: none; }
.commercial-page .rail-controls button {
    width: 2.75rem; height: 2.75rem; border: 1px solid #6e665e; color: var(--text);
    background: transparent; font-size: 1.4rem; cursor: pointer;
}
.commercial-page .rail-controls button:hover { background: var(--mint); color: var(--ink); }
.commercial-page .rail-controls button:disabled { opacity: .35; cursor: default; }
.commercial-page .service-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(18rem, 28vw, 22rem);
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--mint) #292522;
    padding: 0 0 1rem;
}
.commercial-page .service-rail::-webkit-scrollbar { height: 8px; }
.commercial-page .service-rail::-webkit-scrollbar-track { background: #292522; }
.commercial-page .service-rail::-webkit-scrollbar-thumb { background: var(--mint); }
.commercial-page .rail-card {
    display: flex; flex-direction: column; min-width: 0;
    scroll-snap-align: start; padding: 1.4rem; border: 1px solid var(--line);
    background: #0a0908;
}
.commercial-page .rail-card > span { color: var(--mint); font-size: .8rem; margin-bottom: 1rem; }
.commercial-page .rail-card h3 { font-size: 1.35rem; line-height: 1.25; }
.commercial-page .rail-card h3 a { text-decoration: none; }
.commercial-page .rail-card p { color: var(--muted); margin: .8rem 0; font-size: 1rem; }
.commercial-page .rail-card ul { color: var(--muted); padding-left: 1.1rem; margin: .25rem 0 1rem; font-size: .92rem; }
.commercial-page .rail-card li + li { margin-top: .25rem; }
.commercial-page .rail-card .rail-price { color: var(--text); font-weight: 600; margin-top: auto; padding-top: .5rem; }
.commercial-page .rail-card .card-link { margin: 0 0 .5rem; }
.commercial-page .rail-card .btn { align-self: start; }
.commercial-page .rail-hint { font-size: .85rem; color: var(--muted); margin: .5rem 0 0; }
.commercial-page .service-catalog { padding-top: .5rem; }
.commercial-page .pricing-note { margin: 0 0 1.25rem; font-size: .9rem; }
.commercial-page .proof-section { align-items: center; gap: 2.5rem; }
.commercial-page .proof-section h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); }
.commercial-page .proof-section p { max-width: 55ch; color: var(--muted); }
.commercial-page .site-preview { margin: 0; min-width: 0; border: 1px solid #504a43; background: #151311; }
.commercial-page .preview-bar { display: flex; align-items: center; gap: .4rem; padding: .65rem .85rem; border-bottom: 1px solid var(--line); }
.commercial-page .preview-bar i { width: .45rem; height: .45rem; border-radius: 50%; background: #7a736b; }
.commercial-page .preview-bar span { margin-left: .5rem; font-size: .75rem; color: var(--muted); }
.commercial-page .site-preview img { width: 100%; height: auto; object-fit: contain; border: 0; transform: none; }
.commercial-page .site-preview > a { display: block; }
.commercial-page .site-preview figcaption { font-size: .8rem; color: var(--muted); padding: .65rem .85rem; }
.commercial-page .process-section { min-height: 0; }
.commercial-page .process-grid { gap: 1.5rem; }
.commercial-page .process-step { min-height: 0; padding: 1rem 0; border: 0; }
.commercial-page .process-step::before, .commercial-page .process-step::after { display: none; }
.commercial-page .process-step h3 { margin-top: .75rem; }
.commercial-page .process-step p { font-size: .95rem; margin-top: .65rem; }
.commercial-page .news-preview { background: #151311; color: var(--text); padding-top: 2.5rem; padding-bottom: 2.5rem; }
.commercial-page .news-preview .eyebrow { color: var(--mint); }
.commercial-page .insight-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.commercial-page .home-page .insight-list, .commercial-page.home-page .insight-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
.commercial-page .guide-card { display: grid; grid-template-columns: 9rem 1fr; align-items: center; background: #0a0908; }
.commercial-page .guide-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.commercial-page .guide-card > div { padding: 1.1rem; min-width: 0; }
.commercial-page .guide-card h2 { font-size: 1.2rem; line-height: 1.35; letter-spacing: -.015em; margin: .35rem 0 .65rem; }
.commercial-page .guide-card p { font-size: .9rem; line-height: 1.6; margin: 0; }
.commercial-page .guide-card .eyebrow { font-size: .65rem; }
.commercial-page.home-page .guide-card { grid-template-columns: 6.5rem 1fr; }
.commercial-page.home-page .guide-card img { height: auto; aspect-ratio: 1; object-fit: contain; }
.commercial-page .cta-section { padding: 2.75rem var(--page-pad); min-height: 0; }
.commercial-page .cta-section::after { display: none; }
.commercial-page .cta-section h2 { max-width: none; font-size: clamp(1.65rem, 2.8vw, 2.5rem); }
.commercial-page .cta-section > p { font-size: 1rem; margin: .8rem 0 1.2rem; max-width: 65ch; }
.commercial-page .cta-section .btn { margin: 0; background: var(--ink); color: var(--text); border-color: var(--ink); }
.commercial-page .service-detail { gap: 2.5rem; padding-top: 1rem; }
.commercial-page .service-detail h2 { font-size: 1.55rem; margin: 1.5rem 0 .75rem; }
.commercial-page .service-detail h2:first-child { margin-top: 0; }
.commercial-page .content-card { min-height: 0; padding: 1.5rem; }
.commercial-page .service-reading h2 { font-size: 1.55rem; }
.commercial-page .price { font-family: var(--font-body); font-size: 1.25rem; }
.commercial-page .article-page { padding: 7rem var(--page-pad) 3rem; }
.commercial-page .article-hero, .commercial-page .article-body { max-width: 46rem; }
.commercial-page .article-hero { padding-bottom: 1.25rem; }
.commercial-page .article-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); line-height: 1.25; }
.commercial-page .article-hero > p { color: var(--muted); }
.commercial-page .article-body { padding-top: 1.5rem; font-size: 1.05rem; }
.commercial-page .article-body h2 { font-size: 1.6rem; margin-top: 2rem; line-height: 1.3; }
.commercial-page .article-body h3 { font-size: 1.2rem; }
.commercial-page .article-body p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.commercial-page .article-toc { padding: 1rem 1.25rem; }
.commercial-page .article-toc ol { margin-bottom: 0; }
.commercial-page .article-body .article-cover { margin: 1.5rem 0; width: 100%; max-height: none; box-shadow: none; border: 0; }
.commercial-page .article-cover::before, .commercial-page .article-cover::after { display: none; }
.commercial-page .article-body .article-cover img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; transform: none; background: #080a0c; }
.commercial-page .article-cta { padding: 1.5rem; margin-top: 2rem; }
.commercial-page .article-cta h2 { margin: 0; font-size: 1.55rem; }
.commercial-page .contact-aside h2 { font-size: 1.55rem; }
.commercial-page .contact-layout { gap: 2.5rem; padding-top: 1rem; }
.commercial-page .contact-form label { font-size: .95rem; }
.commercial-page .footer { padding: 1.5rem var(--page-pad) 4rem; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.commercial-page .motion-toggle { display: none; }
.commercial-page .pointer-aura { display: none; }
@media (max-width: 1050px) {
    .commercial-page .insight-list { grid-template-columns: 1fr; }
    .commercial-page.home-page .insight-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .commercial-page .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .commercial-page { font-size: 16px; --page-pad: 1.25rem; }
    .commercial-page .business-hero { padding: 6.5rem var(--page-pad) 5rem; min-height: 36rem; }
    .commercial-page .business-hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); max-width: 20ch; }
    .commercial-page .business-hero::after { background: linear-gradient(90deg, rgba(6,8,10,.95), rgba(6,8,10,.68)), linear-gradient(0deg, rgba(6,8,10,.5), transparent); }
    .commercial-page .hero-scene > img { object-position: 72% 50%; }
    .commercial-page .hero-prism { opacity: .35; }
    .commercial-page .hero-actions { margin-top: 1.25rem; }
    .commercial-page .page-hero { padding-top: 6.5rem; }
    .commercial-page .page-hero h1 { font-size: 2rem; }
    .commercial-page .rail-heading { display: block; position: relative; }
    .commercial-page .rail-heading .eyebrow { margin-bottom: 1.5rem; }
    .commercial-page .rail-heading h2 { font-size: 1.6rem; }
    .commercial-page .rail-controls { gap: .35rem; position: absolute; right: 0; top: -.25rem; }
    .commercial-page .rail-controls button { width: 2.5rem; height: 2.5rem; }
    .commercial-page .service-rail { grid-auto-columns: min(19rem, 88%); }
    .commercial-page .rail-card { padding: 1.1rem; }
    .commercial-page .proof-section, .commercial-page .service-detail { grid-template-columns: 1fr; gap: 1.5rem; }
    .commercial-page .proof-section h2 { font-size: 1.65rem; }
    .commercial-page.home-page .insight-list { grid-template-columns: 1fr; }
    .commercial-page.home-page .guide-card { grid-template-columns: 5.5rem 1fr; }
    .commercial-page.home-page .guide-card img { height: auto; aspect-ratio: 1; }
    .commercial-page .guide-card { grid-template-columns: 5.5rem 1fr; }
    .commercial-page .guide-card > div { padding: .85rem; }
    .commercial-page .guide-card h2 { font-size: 1.1rem; }
    .commercial-page .guide-card p { display: none; }
    .commercial-page .guide-card .eyebrow { display: none; }
    .commercial-page .process-grid { gap: 1rem; }
    .commercial-page .process-step { padding: .8rem 0; }
    .commercial-page .process-step h3 { font-size: 1.05rem; }
    .commercial-page .article-page { padding-top: 6.5rem; }
    .commercial-page .article-hero h1 { font-size: 1.9rem; hyphens: auto; }
    .commercial-page .article-body h2 { font-size: 1.4rem; }
    .commercial-page .contact-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .commercial-page .footer { display: grid; }
}