/*
 * Topner refine layer.
 * Loaded after the Astro page styles. Flattens decorative gradients, pills,
 * glows and stripe textures into a calmer, editorial system, and fixes a few
 * touch/UX issues. Remove the <link> to this file to restore the original look.
 */

:root {
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --accent: #800000;
  --accent-hover: #660000;
  --r-control: 3px;
  --r-card: 4px;
  --line: #e4e2de;
  --line-strong: #cfccc6;
  --surface-alt: #f4f3f0;
  --ink: #0a0f0f;
  --ink-dark-surface: #0d1111;
  --section-y: clamp(4rem, 8vw, 6.5rem);
  --stack-lg: clamp(2rem, 4vw, 2.75rem);
  --gap-grid: clamp(1rem, 2vw, 1.5rem);
  --measure: 62ch;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ---------- Base surfaces: no tinted washes, no stripe textures ---------- */

body {
  background: var(--surface-base);
}

.hero,
.section[data-tone-shift],
.section--muted,
.why-topner {
  background: var(--surface-base);
}

.section--tone-proof,
.section--tone-standards,
.section--tone-faq,
.why-topner,
.section--muted {
  background: var(--surface-alt);
}

.hero::before,
.hero::after,
.hero-results::before,
.why-topner::before,
.section[data-tone-shift]::before {
  content: none;
  display: none;
}

.section[data-tone-shift] {
  border-top: 1px solid var(--line);
}

.hero__video-bg::after {
  background: color-mix(in srgb, var(--surface-base) 84%, transparent);
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.header__link::after {
  height: 1px;
  border-radius: 0;
  background: currentColor;
}

.language-switcher {
  border-radius: var(--r-control);
  border-color: var(--line-strong);
  background: transparent;
}

.language-switcher__link.is-active,
.language-switcher__link:hover {
  background: var(--ink);
  color: #fff;
}

.menu-toggle {
  border-radius: var(--r-control);
  background: transparent;
}

.mobile-panel {
  background: var(--surface-base);
  box-shadow: 0 12px 24px -20px rgba(0, 0, 0, 0.35);
}

.vibe-nav-pill {
  border-radius: var(--r-control);
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

#vibe-progress {
  height: 2px;
  background: var(--accent);
}

/* ---------- Buttons: solid, square-ish, no glow ---------- */

.button,
.hero__cta,
.header__cta,
.footer__cta,
.skip-link {
  border-radius: var(--r-control);
  box-shadow: none;
  letter-spacing: 0.005em;
}

.button--primary,
.hero__cta--primary,
.header__cta,
.footer__cta--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: none;
}

.button--primary:hover,
.hero__cta--primary:hover,
.header__cta:hover,
.footer__cta--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: none;
}

.button--secondary,
.hero__cta--secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-primary);
}

.button--secondary:hover,
.hero__cta--secondary:hover {
  background: transparent;
  border-color: var(--ink);
}

.button--white {
  box-shadow: none;
  border-color: var(--line-strong);
}

.footer__cta--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
}

.footer__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Headings: drop the gradient underline bars ---------- */

.section[data-tone-shift] .section__title::after,
.section--tone-final .section__title::after,
.why-topner__title::after {
  content: none;
  display: none;
}

/* ---------- Hero ---------- */

.hero__eyebrow {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Cards ---------- */

.copy-card,
.why-topner__card,
.portfolio-card,
.brief-form,
.brief-summary,
.legal-page__content,
.operations,
.proof-form,
.proof-side,
.payment-checkout__panel,
.payment-checkout__quote,
.payment-checkout__summary {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: none;
}

.copy-card::before,
.why-topner__card::before,
.portfolio-card::before,
.brief-form::before,
.copy-card--package[data-tier]::after,
.signature-note[data-tier="signature"]::after,
.packages > .package-card::after,
.vibe-spotlight {
  content: none;
  display: none;
}

.copy-card:hover,
.why-topner__card:hover,
.portfolio-card:hover,
.portfolio-card:focus-within {
  border-color: var(--line-strong);
}

.process-step__media,
.portfolio-card__media {
  border-radius: var(--r-card);
}

.process-step__media {
  border-color: var(--line);
  background: var(--surface-alt);
}

.process-step__media-index,
.portfolio-card__meta span,
.case-hero__meta span,
.portfolio-card__fallback span {
  border-radius: var(--r-control);
}

.process-step__media-index {
  border: 0;
  background: var(--ink);
  letter-spacing: 0.06em;
}

.portfolio-card__meta span,
.case-hero__meta span {
  border-color: var(--line);
  background: var(--surface-alt);
}

.portfolio-card__fallback {
  background: var(--ink-dark-surface);
}

/* ---------- Package tiers: Launch red, Studio silver, Growth gold, Signature platinum-black ---------- */

:root {
  --tier-launch: #800000;
  --tier-silver-ink: #4f5862;
  --tier-silver-line: #c3c8ce;
  --tier-silver-surface: linear-gradient(165deg, #f4f5f7 0%, #dfe2e6 100%);
  --tier-gold: #c9a14a;
  --tier-gold-ink: #8a6a1f;
  --tier-gold-surface: linear-gradient(165deg, #2a2114 0%, #19140c 100%);
  --tier-platinum: #e5e4e2;
  --tier-platinum-surface: linear-gradient(165deg, #1b1c1d 0%, #0b0b0c 100%);
}

/* Shared reset: no metallic shine overlays, no gradient text. */
.tier-name,
[data-tier] .package__name,
[data-tier] .package-card__title,
.package-option .package-option__name,
.brief-context__title,
.copy-card--package[data-tier] *,
.signature-note[data-tier="signature"] *,
.package-card#launch *,
.package-card#studio *,
.package-card#growth *,
.package-card#signature * {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  text-shadow: none !important;
}

.tier-name,
[data-tier] .package__name,
[data-tier] .package-card__title,
.package-option .package-option__name,
.brief-context__title {
  background: none !important;
}

.package-card__title {
  text-align: left;
}

.copy-card--package[data-tier],
.signature-note[data-tier="signature"],
.package-card#launch,
.package-card#studio,
.package-card#growth,
.package-card#signature {
  box-shadow: none;
}

.copy-card--package[data-tier] .package__name,
.signature-note[data-tier="signature"] .package__name {
  text-align: left;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.copy-card--package[data-tier] .button,
.signature-note[data-tier="signature"] .button,
.package-card .button {
  box-shadow: none;
}

.package-card#signature .button,
.signature-note[data-tier="signature"] .button {
  margin-inline: 0;
}

/* Launch: white card, brand red. */
.copy-card--package[data-tier="launch"],
.package-card#launch {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-primary);
}

.copy-card--package[data-tier="launch"] .package__name,
.package-card#launch .package-card__title,
.package-card#launch .package-card__price {
  color: var(--tier-launch);
}

.copy-card--package[data-tier="launch"] .package__price,
.package-card#launch .package-card__heading {
  color: var(--text-primary);
}

.copy-card--package[data-tier="launch"] .copy-card__text,
.copy-card--package[data-tier="launch"] .package__list,
.copy-card--package[data-tier="launch"] .package__list li,
.package-card#launch .package-card__intro,
.package-card#launch .package-card__list,
.package-card#launch .package-card__list li {
  color: var(--text-secondary);
}

.copy-card--package[data-tier="launch"] .button,
.package-card#launch .button {
  background: var(--tier-launch);
  border-color: var(--tier-launch);
  color: #fff;
}

/* Studio: brushed silver. */
.copy-card--package[data-tier="studio"],
.package-card#studio {
  background: var(--tier-silver-surface);
  border: 1px solid var(--tier-silver-line);
  color: var(--ink);
}

.copy-card--package[data-tier="studio"] .package__name,
.package-card#studio .package-card__title,
.package-card#studio .package-card__price {
  color: var(--tier-silver-ink);
}

.copy-card--package[data-tier="studio"] .package__price,
.package-card#studio .package-card__heading {
  color: var(--ink);
}

.copy-card--package[data-tier="studio"] .copy-card__text,
.copy-card--package[data-tier="studio"] .package__list,
.copy-card--package[data-tier="studio"] .package__list li,
.package-card#studio .package-card__intro,
.package-card#studio .package-card__list,
.package-card#studio .package-card__list li {
  color: #343b42;
}

.copy-card--package[data-tier="studio"] .button,
.package-card#studio .button {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.copy-card--package[data-tier="studio"] .button:hover,
.package-card#studio .button:hover {
  background: #2a3033;
  border-color: #2a3033;
}

/* Growth: gold on deep bronze. */
.copy-card--package[data-tier="growth"],
.package-card#growth {
  background: var(--tier-gold-surface);
  border: 1px solid #4a3a1c;
  color: #f3ead8;
}

.copy-card--package[data-tier="growth"] .package__name,
.package-card#growth .package-card__title,
.package-card#growth .package-card__price {
  color: var(--tier-gold);
}

.copy-card--package[data-tier="growth"] .package__price,
.package-card#growth .package-card__heading {
  color: #fbf6ea;
}

.copy-card--package[data-tier="growth"] .copy-card__text,
.copy-card--package[data-tier="growth"] .package__list,
.copy-card--package[data-tier="growth"] .package__list li,
.package-card#growth .package-card__intro,
.package-card#growth .package-card__list,
.package-card#growth .package-card__list li {
  color: rgba(243, 234, 216, 0.78);
}

.copy-card--package[data-tier="growth"] .button,
.package-card#growth .button {
  background: var(--tier-gold);
  border-color: var(--tier-gold);
  color: #19140c;
}

.copy-card--package[data-tier="growth"] .button:hover,
.package-card#growth .button:hover {
  background: #d8b463;
  border-color: #d8b463;
}

/* Signature: black with platinum. */
.copy-card--package[data-tier="signature"],
.signature-note[data-tier="signature"],
.package-card#signature {
  background: var(--tier-platinum-surface);
  border: 1px solid #34363a;
  color: var(--tier-platinum);
}

.copy-card--package[data-tier="signature"] .package__name,
.signature-note[data-tier="signature"] .package__name,
.package-card#signature .package-card__title,
.package-card#signature .package-card__price {
  color: var(--tier-platinum);
}

.package-card#signature .package-card__heading {
  color: #fff;
}

.copy-card--package[data-tier="signature"] .copy-card__text,
.signature-note[data-tier="signature"] .copy-card__text,
.package-card#signature .package-card__intro,
.package-card#signature .package-card__list,
.package-card#signature .package-card__list li {
  color: rgba(229, 228, 226, 0.74);
}

.copy-card--package[data-tier="signature"] .button,
.signature-note[data-tier="signature"] .button,
.package-card#signature .button {
  background: var(--tier-platinum);
  border-color: var(--tier-platinum);
  color: #0b0b0c;
}

.copy-card--package[data-tier="signature"] .button:hover,
.signature-note[data-tier="signature"] .button:hover,
.package-card#signature .button:hover {
  background: #fff;
  border-color: #fff;
}

/* Tier names used inline (picker, checkout, brief context). */
.tier-name--launch,
.package-option[data-package-card="launch"] .package-option__name,
[data-active-tier="launch"] .brief-context__title {
  color: var(--tier-launch);
}

.tier-name--studio,
.package-option[data-package-card="studio"] .package-option__name,
[data-active-tier="studio"] .brief-context__title {
  color: var(--tier-silver-ink);
}

.tier-name--growth,
.package-option[data-package-card="growth"] .package-option__name,
[data-active-tier="growth"] .brief-context__title {
  color: var(--tier-gold-ink);
}

.tier-name--signature,
.package-option[data-package-card="signature"] .package-option__name,
[data-active-tier="signature"] .brief-context__title {
  color: #1b1c1d;
}

.package-option[data-package-card="launch"] { --option-accent: var(--tier-launch); }
.package-option[data-package-card="studio"] { --option-accent: #7d858e; }
.package-option[data-package-card="growth"] { --option-accent: var(--tier-gold-ink); }
.package-option[data-package-card="signature"] { --option-accent: #1b1c1d; }

.payment-checkout__package[data-payment-package="launch"] { --package-accent: var(--tier-launch); }
.payment-checkout__package[data-payment-package="studio"] { --package-accent: #7d858e; }
.payment-checkout__package[data-payment-package="growth"] { --package-accent: var(--tier-gold-ink); }

/* ---------- Metrics band ---------- */

.hero-results {
  background: var(--ink-dark-surface);
}

.metric-gauge {
  border-radius: var(--r-card);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.metric-gauge__fill {
  stroke-linecap: butt;
  filter: none;
}

.metric-gauge__lcp {
  background: transparent;
}

.hero-results__promise {
  border-radius: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: none;
  box-shadow: none;
  padding: 1.25rem 0 0;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

.hero-results__promise-mark {
  display: none;
}

/* ---------- Standards: static cards instead of hover-to-reveal flips ---------- */

.standards-flip__hint {
  display: none;
}

.standards-flip {
  perspective: none;
}

.flip-card {
  cursor: default;
  min-height: 0;
}

.flip-card__inner,
.flip-card:hover .flip-card__inner,
.flip-card:focus-visible .flip-card__inner,
.flip-card.is-flipped .flip-card__inner {
  display: grid;
  min-height: 0;
  height: 100%;
  transform: none;
  transition: none;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
}

.flip-card__face {
  position: static;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.flip-card__face--front {
  justify-items: start;
  text-align: left;
  padding-bottom: 0;
}

.flip-card__face--front .flip-card__title {
  display: none;
}

.flip-card__face--back {
  transform: none;
  padding-top: 0.85rem;
  background: none;
}

.flip-card__title--back {
  color: var(--text-primary);
  font-size: clamp(1.05rem, 2.4vw, 1.18rem);
  letter-spacing: 0;
  text-transform: none;
}

.flip-card__icon {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
}

.flip-card:focus-visible .flip-card__face {
  outline: none;
}

.flip-card:focus-visible .flip-card__inner {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Proof videos ---------- */

.proof-video {
  border-radius: var(--r-card);
  border-color: var(--line);
}

.proof-video:hover,
.proof-video:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: var(--ink);
}

.proof-video__asset {
  object-fit: cover;
}

.proof-video__overlay {
  place-items: end start;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 5, 5, 0.78));
  text-align: left;
}

.proof-video__label {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

/* Clickable demo previews (home proof tiles + portfolio cards). */
.proof-video,
.portfolio-card__media--link {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.proof-video__overlay {
  align-content: end;
  gap: 0.35rem;
}

.proof-video__cue,
.portfolio-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}

.portfolio-card__cue {
  position: absolute;
  left: 0.9rem;
  bottom: 0.8rem;
  z-index: 2;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-control);
  background: rgba(10, 15, 15, 0.72);
  pointer-events: none;
}

.proof-video:hover .proof-video__cue,
.proof-video:focus-visible .proof-video__cue,
.portfolio-card__media--link:hover .portfolio-card__cue {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.proof-video:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .portfolio-card__cue {
    opacity: 0;
  }

  .portfolio-card__media--link:hover .portfolio-card__cue {
    opacity: 1;
  }
}

/* ---------- Spacing rhythm ---------- */

.section,
.why-topner,
.hero-results {
  padding-block: var(--section-y);
}

.why-topner__container,
.hero-results__inner {
  width: min(100% - 2.5rem, 1120px);
  margin-inline: auto;
}

.why-topner,
.hero-results {
  padding-inline: 0;
}

/* Headings, intros and the content below them breathe consistently. */
.section__intro,
.why-topner__intro,
.hero-results__intro {
  max-width: var(--measure);
  margin-top: 1.1rem;
}

.final-cta .section__intro,
.why-topner__intro,
.hero-results__intro {
  margin-inline: auto;
}

.grid,
.faq-list,
.faq-grid,
.packages,
.portfolio-grid,
.why-topner__grid {
  gap: var(--gap-grid);
  margin-top: var(--stack-lg);
}

.hero-results__board {
  margin-top: var(--stack-lg);
}

.section__note {
  max-width: var(--measure);
  margin-top: 1.75rem;
}

.final-cta .section__note {
  margin-inline: auto;
}

.cta-row {
  margin-top: 1.75rem;
}

.signature-note {
  margin-top: var(--gap-grid);
  min-height: 0;
}

.why-topner__closing {
  margin-top: var(--stack-lg);
}

/* Cards: a little more inner room, consistent title-to-text spacing. */
.copy-card,
.why-topner__card,
.flip-card__face--front,
.flip-card__face--back {
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
}

.flip-card__face--front {
  padding-bottom: 0;
}

.flip-card__face--back {
  padding-top: 0.75rem;
}

.copy-card__text,
.why-topner__card-text {
  margin-top: 0.6rem;
}

.package__list {
  margin: 1rem 0 1.4rem;
}

.process-step__media {
  margin-bottom: 1.1rem;
}

/* Hero: tighter vertical rhythm between eyebrow, title, copy and actions. */
.hero h1 {
  margin-top: 1rem;
}

.hero__subheadline {
  max-width: 40rem;
  margin-inline: auto;
}

.hero__actions {
  margin-top: 2rem;
}

.hero__support {
  margin-top: 1rem;
  font-size: 0.92rem;
}

/* Footer sits directly under the last section; no empty band in between. */
.site-footer {
  margin-top: 0;
}

.footer__bottom {
  padding-block: 1.25rem;
}

/* ---------- Final CTA + footer ---------- */

/* One clear primary action, one secondary, quote as a quiet text link. */
.final-cta .button--white {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.final-cta .button--white:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.final-cta .button[href*="package=signature"] {
  min-height: auto;
  padding-inline: 0.4rem;
  border-color: transparent;
  background: none;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.final-cta .button[href*="package=signature"]:hover {
  color: var(--text-primary);
  border-color: transparent;
}

.section--tone-final {
  background: var(--ink-dark-surface);
}

.site-footer {
  border-top: 0;
  background: var(--ink-dark-surface);
}

/* ---------- Forms, pickers, checkout ---------- */

.field input,
.field select,
.field textarea,
.check-field,
.package-option__body,
.package-picker__indicator,
.payment-checkout__package,
.payment-checkout__method,
.payment-checkout__paypal-box,
.payment-checkout__qr-card,
.summary-block--payment,
.brief-context,
.payment-note,
.proof-file__box,
.proof-missing,
.payment-actions {
  border-radius: var(--r-control);
  box-shadow: none;
}

.field input,
.field select,
.field textarea,
.check-field {
  background: #fff;
  border-color: var(--line-strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 0;
}

.package-option__body,
.package-option[data-package-card] .package-option__body,
.package-option[data-package-card] input:checked + .package-option__body {
  background: #fff;
  border-color: var(--line);
  box-shadow: none;
}

.package-option[data-package-card] input:checked + .package-option__body,
.package-option[data-package-card].is-active .package-option__body,
.package-option[data-package-card] input:focus-visible + .package-option__body {
  border-color: var(--option-accent, var(--ink));
  box-shadow: none;
}

.package-picker__indicator {
  background: transparent;
  border-color: var(--indicator-accent, var(--ink));
  box-shadow: none;
}

.package-option input,
.package-option input::after {
  border-radius: 50%;
  box-shadow: none;
}

.brief-context,
.payment-note,
.summary-block--payment {
  background: var(--surface-alt);
  border-left-width: 2px;
}

.payment-checkout__package,
.payment-checkout__method {
  background: #fff;
  border-color: var(--line);
}

.payment-checkout__package:hover,
.payment-checkout__method:hover,
.payment-checkout__package.is-active,
.payment-checkout__method.is-active {
  background: #fff;
  border-color: var(--ink);
}

.payment-checkout__panel,
.payment-checkout__quote {
  background: #fff;
}

.legal-page__content th {
  background: var(--surface-alt);
}

.legal-page__content blockquote {
  background: var(--surface-alt);
}

.payment-checkout__package:hover,
.payment-checkout__package.is-active {
  border-color: var(--package-accent, var(--ink));
}

/* ---------- Loader on repeat navigations ---------- */

html[data-topner-quick-load] .topner-loader {
  opacity: 0;
}

html[data-topner-quick-load] .topner-loader-overlay {
  transition:
    opacity 0.24s ease-out,
    visibility 0s linear 0.24s;
}

/* ---------- Consistency fixes ---------- */

/* Astro's `.cta-row--centered .button { color: black }` outranked the primary style. */
.cta-row .button--primary,
.cta-row--centered .button--primary {
  color: #fff;
}

.cta-row--centered .button--secondary {
  color: var(--text-primary);
}

/* Alternating section surfaces (needs to beat `.section[data-tone-shift]`). */
.section[data-tone-shift].section--tone-proof,
.section[data-tone-shift].section--tone-standards,
.section.section--muted {
  background: var(--surface-alt);
}

/* FAQ cards read as distinct panels against the page. */
.faq-list .copy-card,
.faq-grid .copy-card {
  background: #f1eee8;
  border-color: #e2ddd3;
}

.faq-list .copy-card:hover,
.faq-grid .copy-card:hover {
  border-color: #cfc8ba;
}

/* ---------- Studio: the recommended plan ---------- */

.copy-card--package[data-tier="studio"],
.package-card#studio {
  --studio-glow: 1;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(125, 133, 142, calc(var(--studio-glow) * 0.45)),
    0 24px 48px -32px rgba(28, 38, 52, calc(var(--studio-glow) * 0.6));
}

.copy-card--package[data-tier="studio"] > :not(.studio-sheen),
.package-card#studio > :not(.studio-sheen) {
  position: relative;
  z-index: 1;
}

.studio-sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 42%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: skewX(-14deg);
  opacity: 0;
}

@media (min-width: 64rem) {
  /* Studio sits a step above its neighbours in the three-column grid. */
  .grid--packages > .copy-card--package[data-tier="studio"] {
    top: -0.75rem;
  }
}