/* ==========================================================================
   SPRYQ — responsive.css
   Breakpoints: 1280 (laptop), 1024 (tablet landscape), 760 (tablet / large
   phone), 480 (phone). Mobile-specific capsule and layout behaviour.
   ========================================================================== */

@media (max-width: 1280px) {
  .main-nav { gap: 22px; }
  .header-status { display: none; }
  .work-row a { grid-template-columns: 40px minmax(0, 2.4fr) minmax(0, 1fr) 70px 32px; }
  .work-row__type { display: none; }
}

@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .main-nav, .header-actions .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .capsule__item { padding: 0 13px; font-size: 0.9rem; }
  .industry-card { flex-basis: clamp(280px, 42vw, 440px); }
}

@media (max-width: 760px) {
  :root { --header-h: 68px; }
  .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .work-card__overlay { display: none; }
  .work-card__visit { opacity: 1; transform: none; height: 34px; font-size: 0.8rem; }

  /* compact capsule: logo + current section + menu */
  .capsule { gap: 4px; padding: 5px; border-radius: 16px; }
  .capsule__group, .capsule__indicator { display: none; }
  .capsule__logo { width: 46px; }
  .capsule__label { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; min-width: 112px; font-size: 0.92rem; color: #F2F2F0; }
  .capsule__label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .capsule__menu { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.12); color: #E6E6E3; font-size: 0.9rem; }
  .capsule__menu .icon { width: 18px; height: 18px; }
  .capsule__cta { height: 46px; padding: 0 14px; font-size: 0.9rem; }
  .capsule__cta .cta-long { display: none; }

  .stage-shell { padding: 8px 8px 0; border-radius: 20px; }
  .stage { aspect-ratio: 4 / 5; min-height: 0; max-height: 78vh; border-radius: 14px 14px 0 0; }
  .stage__tr, .stage__br { display: none; }
  .filter-pill { height: 40px; padding: 0 16px; font-size: 0.86rem; }
  .filter-pill:has(sup) { padding: 0 5px 0 14px; }
  .filter-pill sup { min-width: 26px; height: 26px; font-size: 0.72rem; }
  /* scroll row: snap respects the gutter (scroll-padding), fades at the edges to hint more */
  .filters--scroll {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 44px), transparent);
  }
  .filters--sticky.filters--scroll { margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter); border-radius: 0; }
  .work-toolbar { margin-bottom: 24px; }
  .filters--scroll::-webkit-scrollbar { display: none; }
  .filters--scroll .filter-pill { flex: none; scroll-snap-align: start; }
  .view-toggle { display: none; }
  .work-row a { grid-template-columns: 32px minmax(0, 1fr) 28px; }
  .work-row__cat, .work-row__year { display: none; }
  .industries-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
  .industries-track::-webkit-scrollbar { display: none; }
  .industry-card { flex-basis: 82vw; scroll-snap-align: center; }
  .industries-progress { display: none; }
  .industry-section__apps { grid-template-columns: 1fr; }
  .industry-section__media { position: relative; top: 0; }
  .service-row__body p, .service-row__body ul { padding-left: 0; }
  .service-row__head { grid-template-columns: 36px minmax(0, 1fr) 32px; }
  .faq__q button { grid-template-columns: 32px minmax(0, 1fr) 28px; }
  .faq__inner { padding: 0 0 22px 44px; }
  .project-hero__stage { padding: 10px 10px 0; }
  .browser__bar { height: 38px; }
  .browser__url { font-size: 0.75rem; height: 26px; }
  .browser__dots { display: none; }
  .details-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lightbox__img { max-height: 70vh; }
  .footer-bottom { padding-bottom: 96px; }
  .project-next__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 0.6em; }
  .hero__meta { gap: 8px 12px; }
  .hero__meta .tag { height: 30px; font-size: 0.8rem; }
  .btn--lg { min-height: 56px; padding: 0 1.5em; }
  .capsule__label { min-width: 0; padding: 0 10px; }
  .price-card__name { font-size: 1.9rem; }
  .tag-pill { padding: 10px 18px; }
}

@media (max-width: 999px) {
  .services__frame { position: relative; top: 0; aspect-ratio: 16 / 10; }
  .services__visual { order: -1; }
}

/* ==========================================================================
   MOBILE & TABLET LAYER
   Everything below refines the layout for touch screens. Desktop (>1024px)
   is untouched.
   ========================================================================== */

/* ---- touch basics (all sizes) ---- */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label { touch-action: manipulation; }
.about-figure { padding: 0; aspect-ratio: 21 / 9; overflow: hidden; }
.footer-col address > * { display: inline-flex; align-items: center; gap: 8px; }
.footer-col address .icon { opacity: 0.6; }
.capsule { bottom: max(clamp(12px, 2.2vh, 24px), env(safe-area-inset-bottom)); }
.services__frame.is-docked { position: relative; top: 0; aspect-ratio: 16 / 10; margin: 2px 0 18px; border-radius: 14px; }
.services__frame.is-docked .services__caption { display: none; }
@media (min-width: 761px) { .services__frame.is-docked { margin-left: 64px; } }

/* ---- tablet: ≤999 (desktop grids start at 1000) ---- */
@media (max-width: 999px) {
  .section-head--split { gap: 18px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .footer-brand { grid-column: 1 / -1; }


  /* comparison table: sticky first column while swiping */
  .compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: #FAFAF8; box-shadow: 1px 0 0 var(--line); }
}

@media (min-width: 761px) and (max-width: 999px) {
  .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .work-grid { gap: 56px 20px; }
}

/* ---- phones: ≤760 ---- */
@media (max-width: 760px) {
  :root { --gutter: 20px; --section: 56px; --gap: 14px; }
  body { font-size: 16px; }

  /* typography: tighter, nothing oversized */
  .display-xl { font-size: clamp(2.7rem, 13.4vw, 4.4rem); line-height: 0.92; letter-spacing: -0.05em; }
  .section-head .eyebrow { margin-bottom: 4px; }
  .section-head--split .lead { max-width: 34ch; color: #4a4a4a; }
  .display-xxl { font-size: clamp(2.5rem, 12.2vw, 4rem); line-height: 0.92; }
  .display-l { font-size: clamp(2rem, 9.4vw, 3rem); line-height: 0.98; }
  .display-m { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
  .statement { font-size: clamp(1.4rem, 6.4vw, 1.9rem); line-height: 1.2; }
  .lead { font-size: 1.08rem; }
  .section-head { margin-bottom: 32px; gap: 14px; }

  /* header */
  .site-header__inner { gap: 12px; }
  .wordmark { font-size: 1.4rem; padding-block: 8px; }
  .wordmark__mark { width: 28px; height: 28px; }
  .menu-toggle { width: 44px; height: 44px; border-radius: 12px; }

  /* hero */
  .hero { padding-top: 12px; }
  .hero__meta { font-size: 0.82rem; margin-bottom: 18px; }
  .hero__foot { gap: 22px; margin-top: 22px; }
  .hero__foot .lead { font-size: 1.02rem; }
  .hero__ctas { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__ctas .btn { width: 100%; }
  .stage-wrap { margin-top: 36px; }
  .stage__ui { font-size: 0.68rem; }
  .stage__tl strong { font-size: 1rem; }

  /* page heroes */
  .breadcrumbs { padding-top: 4px; }
  .page-hero { padding-top: 28px; padding-bottom: 40px; }
  .page-hero__meta { font-size: 0.85rem; gap: 8px 12px; margin-bottom: 16px; }
  .page-hero__foot { gap: 22px; margin-top: 22px; }
  .page-hero__foot .btn { width: 100%; }

  /* buttons and CTA bands */
  .btn--lg { min-height: 56px; font-size: 1rem; }
  .cta-band { padding-block: 72px; gap: 22px; }
  .cta-band > .btn, .cta-band .hero__ctas { width: 100%; }
  .work-more .btn { width: 100%; }
  .custom-quote .hero__ctas { justify-content: stretch; }

  /* services accordion */
  .service-row__head { grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 10px; padding: 18px 0; }
  .service-row__title { font-size: 1.28rem; }
  .service-row__icon { width: 34px; height: 34px; }
  .service-row__body ul { padding: 12px 0 22px; }
  .services__visual:empty { display: none; }
  .services { gap: 0; }

  /* industries carousel */
  .industry-card__body { padding: 18px; gap: 10px; }
  .industry-card__body p { font-size: 0.95rem; }

  /* industries page */
  .industry-section { padding-block: 56px; }
  .industry-section__media { aspect-ratio: 4 / 3; border-radius: 16px; }
  .industry-section__body { gap: 18px; }
  .industry-section__body h2 { font-size: clamp(1.8rem, 8.4vw, 2.5rem); }
  .industry-related__list { grid-template-columns: 1fr; }

  /* approach / process */
  .approach-statement { max-width: none; }
  .pillars { margin-top: 40px; gap: 28px; }
  .pillar { padding-top: 18px; gap: 8px; }
  .timeline { margin-top: 56px; }
  .step { padding-left: 36px; padding-bottom: 36px; }
  .step::before { width: 13px; height: 13px; }
  .timeline__line { left: 6px; }
  .step__title { font-size: 1.6rem; }

  /* why: compact numbered list instead of tall empty tiles */
  .why-item { min-height: 0; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; padding: 22px 0; }
  .why-item__n { grid-row: 1 / span 2; padding-top: 0.35em; }
  .why-item h3 { margin-top: 0; font-size: 1.3rem; line-height: 1.1; }
  .why-item p { font-size: 0.95rem; }

  /* pricing */
  .price-card { padding: 22px; gap: 14px; border-radius: 22px; }
  .price-card__price { padding-block: 14px; }
  .price-card__price span { font-size: 2.3rem; }
  .price-card__list li { padding: 10px 0; font-size: 0.92rem; }
  .custom-quote { padding: 22px; border-radius: 22px; }
  .compare th, .compare td { padding: 14px; }
  .compare { min-width: 640px; font-size: 0.9rem; }

  /* quotes & FAQ */
  .quote { padding: 22px; gap: 20px; border-radius: 22px; }
  .quote blockquote { font-size: 1.25rem; }
  .faq__q button { padding: 18px 0; }
  .faq__text { font-size: 1.08rem; }
  .faq__inner { padding: 0 0 20px 44px; font-size: 0.97rem; }

  /* contact + form */
  .contact__bg i:nth-child(1) { width: 90vw; height: 90vw; left: 20%; top: 2%; }
  .contact__bg i:nth-child(2) { width: 80vw; height: 80vw; left: -20%; top: 45%; }
  .contact__bg i:nth-child(3) { width: 70vw; height: 70vw; left: 40%; top: 70%; }
  .contact__aside { gap: 20px; margin-top: 20px; }
  .contact__details a, .contact__details span { font-size: 1rem; min-height: 32px; }
  .form { padding: 18px; border-radius: 22px; gap: 16px; }
  .form__grid { gap: 14px; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 52px; border-radius: 12px; }
  .form__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .form__foot .btn, .form__submit { width: 100%; }
  .form__legal { max-width: none; }

  /* work cards */
  .work-card__title { font-size: 1.35rem; }
  .work-empty { padding: 36px 22px; }
  .work-empty .btn { width: 100%; }
  .thumb-ph__title { font-size: clamp(1.8rem, 10vw, 2.8rem); }

  /* project page */
  .project-head { padding-top: 36px; padding-bottom: 32px; }
  .project-intro, .project-tech { padding-block: 64px; }
  .project-elements { padding-top: 64px; }
  .details-grid > div { padding: 16px 0; }
  .tags { gap: 8px; }
  .tag-pill { padding: 10px 16px; font-size: 0.95rem; }
  .project-visit__link { padding-block: 72px; }
  .project-next { padding-bottom: 96px; }
  .browser__visit { padding: 0 10px; }
  .lightbox__bar { bottom: max(16px, env(safe-area-inset-bottom)); }

  /* about */
  .about-figure { aspect-ratio: 4 / 3; border-radius: 20px; }

  /* mobile menu */
  .mobile-menu__nav { margin-block: 24px; }
  .mobile-menu__nav a { font-size: clamp(2.2rem, 11.5vw, 3.4rem); padding-block: 4px; }

  /* footer: two-column link grid, centred legal row */
  .site-footer { padding-top: 64px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; padding-bottom: 48px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta { flex-direction: column; align-items: stretch; }
  .footer-cta .btn { width: 100%; }
  .footer-col h2 { margin-bottom: 14px; }
  .footer-col ul { gap: 4px; }
  .footer-col a { padding-block: 8px; font-size: 0.95rem; line-height: 1.3; }
  .footer-col ul { gap: 0; }
  .footer-col address { gap: 8px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom nav { gap: 4px 20px; }
  .footer-bottom nav a { padding-block: 8px; display: inline-block; }
  .footer-signature { margin-top: 8px; }

  /* 404 */
  .notfound { min-height: 60vh; padding-block: 48px; }
  .notfound .hero__ctas { justify-content: stretch !important; }
}

/* ---- small phones: ≤380 ---- */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .hero__meta .tag { font-size: 0.75rem; padding: 0 10px; }
  .capsule__cta { padding: 0 12px; }
  .capsule__label { font-size: 0.85rem; }
  .capsule__menu { padding: 0 10px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 14px; }
}

/* ---- landscape phones: short viewports ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .stage { aspect-ratio: 16 / 9; max-height: 80vh; }
  .mobile-menu__nav a { font-size: 2rem; }
  .mobile-menu { overflow-y: auto; }
}

/* ==========================================================================
   PRICING PLAN SWITCH (≤999px) — js/mobile-ui.js
   ========================================================================== */
.plan-switch { display: none; }
@media (max-width: 999px) {
  .plan-switch {
    position: relative; display: flex; gap: 2px; width: 100%; max-width: 560px; margin: 0 auto 18px; padding: 5px;
    border-radius: 999px; background: #ECEBE7; border: 1px solid var(--line);
    box-shadow: inset 0 1px 2px rgba(17, 17, 17, 0.06);
  }
  .plan-switch__thumb {
    position: absolute; top: 5px; left: 0; bottom: 5px; width: 0; border-radius: 999px; background: var(--paper);
    box-shadow: 0 6px 18px -8px rgba(17, 17, 17, 0.35), 0 1px 2px rgba(17, 17, 17, 0.08);
    transition: transform 0.55s var(--ease), width 0.55s var(--ease), background-color 0.4s;
  }
  .plan-switch__thumb.is-dark { background: var(--dark); }
  .plan-switch__btn {
    position: relative; z-index: 1; flex: 1; min-height: 46px; padding: 0 10px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 0.95rem; font-weight: 600; letter-spacing: -0.015em; color: var(--muted); transition: color 0.35s;
  }
  .plan-switch__btn[aria-selected="true"] { color: var(--ink); }
  .plan-switch__thumb.is-dark ~ .plan-switch__btn[aria-selected="true"] { color: #fff; }
  .plan-switch__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(253, 77, 18, 0.18); }

  .pricing-grid.is-switch { display: block; max-width: 560px; margin-inline: auto; perspective: 1400px; touch-action: pan-y; }
  .pricing-grid.is-switch .price-card { display: none; }
  .pricing-grid.is-switch .price-card.is-current { display: flex; transform-origin: 50% 0; }
  .pricing-grid.is-switch .price-card.enter-right { animation: planInRight 0.7s var(--ease) both; }
  .pricing-grid.is-switch .price-card.enter-left { animation: planInLeft 0.7s var(--ease) both; }
}
/* individual transform props + filter so the reveal's !important transform/opacity can't cancel it */
@keyframes planInRight { from { filter: opacity(0); translate: 40px 0; rotate: y -14deg; scale: 0.97; } to { filter: none; translate: 0 0; rotate: y 0deg; scale: 1; } }
@keyframes planInLeft { from { filter: opacity(0); translate: -40px 0; rotate: y 14deg; scale: 0.97; } to { filter: none; translate: 0 0; rotate: y 0deg; scale: 1; } }

/* ==========================================================================
   INDUSTRIES 3D DECK + DIAL (≤760px) — js/mobile-ui.js
   ========================================================================== */
.ind-nav { display: none; }
@media (max-width: 760px) {
  .industries-pin.is-deck { overflow: hidden; padding-bottom: 6px; }
  .industries-pin.is-deck .industries-progress { display: none; }
  .industries-pin.is-deck .industries-track {
    display: grid; overflow: visible; scroll-snap-type: none; gap: 0;
    padding: 18px calc(var(--gutter) + 26px) 10px var(--gutter);
    perspective: 1100px; perspective-origin: 30% 40%; touch-action: pan-y;
  }
  .industries-pin.is-deck .industry-card { grid-area: 1 / 1; flex: none; width: 100%; min-width: 0; position: relative; }
  .industries-pin.is-deck .industry-card__link {
    height: 100%; transform-origin: 0% 50%; will-change: transform, opacity;
    transition: transform 0.9s var(--ease), opacity 0.7s var(--ease), box-shadow 0.9s var(--ease), filter 0.9s var(--ease);
    box-shadow: 0 30px 60px -36px rgba(17, 17, 17, 0.45);
  }
  .industries-pin.is-deck .industry-card[data-pos="current"] { z-index: 5; }
  .industries-pin.is-deck .industry-card[data-pos="next"] { z-index: 4; }
  .industries-pin.is-deck .industry-card[data-pos="next2"] { z-index: 3; }
  .industries-pin.is-deck .industry-card[data-pos="prev"] { z-index: 6; }
  .industries-pin.is-deck .industry-card[data-pos="rest"] { z-index: 1; }
  .industries-pin.is-deck .industry-card[data-pos="current"] .industry-card__link { transform: none; opacity: 1; }
  .industries-pin.is-deck .industry-card[data-pos="next"] .industry-card__link { transform: translate3d(14px, -8px, -70px) rotateY(-9deg); opacity: 0.85; filter: brightness(0.97); }
  .industries-pin.is-deck .industry-card[data-pos="next2"] .industry-card__link { transform: translate3d(28px, -16px, -140px) rotateY(-16deg); opacity: 0.5; filter: brightness(0.94); }
  .industries-pin.is-deck .industry-card[data-pos="rest"] .industry-card__link { transform: translate3d(36px, -20px, -200px) rotateY(-20deg); opacity: 0; }
  .industries-pin.is-deck .industry-card[data-pos="prev"] .industry-card__link { transform: translate3d(-118%, 0, -60px) rotateY(48deg); opacity: 0; pointer-events: none; }
  .industries-pin.is-deck .industry-card:not([data-pos="current"]) .industry-card__link { pointer-events: none; box-shadow: none; }
  .industries-pin.is-deck .industry-card[data-pos="current"] .industry-card__media img { animation: deckZoom 6s ease-out both; }

  /* navigator */
  .industries-pin.is-deck .ind-nav { display: grid; gap: 14px; padding: 18px var(--gutter) 0; }
  .ind-nav__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
  .ind-nav__btn {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper);
    border: 1px solid var(--line); color: var(--ink); box-shadow: 0 8px 20px -12px rgba(17, 17, 17, 0.3);
    transition: transform 0.3s var(--ease), background 0.3s, color 0.3s;
  }
  .ind-nav__btn svg { width: 20px; height: 20px; }
  .ind-nav__btn:active { transform: scale(0.92); background: var(--ink); color: #fff; }
  .ind-nav__dial {
    position: relative; height: 58px; perspective: 520px; perspective-origin: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  }
  .ind-nav__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
  .ind-nav__tick {
    position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #8a8a86;
    background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line);
    transition: opacity 0.6s var(--ease), background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
  }
  .ind-nav__tick.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 24px -8px rgba(253, 77, 18, 0.6); }
  .ind-nav__tick span { display: block; transition: transform 0.4s var(--ease); }
  .ind-nav__tick.is-active span { transform: scale(1.12); }
  .ind-nav__lens { position: absolute; left: 50%; bottom: -6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ink); }

  .ind-nav__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ind-nav__name { font-size: 1.05rem; font-weight: 640; letter-spacing: -0.025em; }
  .ind-nav__count { margin-left: auto; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
  .ind-nav__play { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; }
  .ind-nav__play i { width: 10px; height: 12px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
  .ind-nav.is-paused .ind-nav__play i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }
  .ind-nav__timer { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .ind-nav__timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--ink), var(--accent)); transform-origin: left; transform: scaleX(0); }
  .ind-nav.is-paused .ind-nav__timer i { background: #BDBDB9; }
}
@keyframes deckZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Large screens */
@media (min-width: 1800px) {
  body { font-size: 19px; }
}

/* Coarse pointers: no hover-only affordances */
@media (hover: none) {
  .cursor-preview { display: none; }
}

/* Print */
@media print {
  .capsule, .site-header, .mobile-menu, .page-curtain, .stage canvas { display: none !important; }
  body { background: #fff; }
}