/* ============================================================================
   studio.css - assembled from phcode.dev/pro-design-service (see ai_context/design.md 13.2)
   Order: base tokens -> pro-design.css -> forms -> account -> brief -> theme layer (overrides)
   Edit the source files' equivalents here; do not re-copy blindly, the palette fixes below matter.
   ============================================================================ */

/* --- base tokens the theme layer expects from phcode.dev css/styles.css --- */
:root {
  --accent-color: #FE9615;
  --text-color-light: #ffffffef;
  --cta-text: #ffffff;
  --font-montserrat: 'Montserrat', sans-serif;
  --font-montserrat-light: 'Montserrat', sans-serif;
  --font-montserrat-medium: 'Montserrat', sans-serif;
  --font-montserrat-semi-bold: 'Montserrat', sans-serif;
  --font-montserrat-bold: 'Montserrat', sans-serif;
  --font-montserrat-extra-bold: 'Montserrat', sans-serif;
  --font-size-xxs: 0.625rem; --font-size-xs: 0.75rem; --font-size-s: 0.875rem; --font-size-md: 1rem;
  --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-xxl: 2.25rem; --font-size-xxxl: 3rem; --font-size-xxxxl: 4.5rem;
  --space-unit: 16px;
  --space-xxxs: calc(0.125 * var(--space-unit)); --space-xxs: calc(0.25 * var(--space-unit));
  --space-xsx: calc(0.375 * var(--space-unit)); --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit)); --space-md: calc(1 * var(--space-unit));
  --space-lg: calc(1.25 * var(--space-unit)); --space-xl: calc(2 * var(--space-unit));
  --space-xxl: calc(3.25 * var(--space-unit)); --space-xxxl: calc(5.25 * var(--space-unit));
  --nav-height: 62px;
}


/* ===================== pro-design.css ===================== */
:root {
  --bg: #25282A;
  --bg-alt: #212A2E;
  --bg-ticker: #1D1F23;
  --card: #2A3337;
  --card-dark: #1D2427;
  --border: #3A4448;
  --orange: #FE9615;
  --orange-alt: #FE9617;
  --orange-text: #EF7A03;
  --orange-border: #6B3600;
  --step-num: #AA5E00;
  --heading: #F7F8F8;
  --body-text: #B0B8BC;
  --muted: #83848D;
  --muted-2: #686972;
  --muted-3: #7A8488;
  --indigo: #828FFF;
  --indigo-link: #637CF1;
  --green: #219829;
  --white: #FFFFFF;
  --cta-text: var(--white);
  --btn-dark-bg: #00061C;
  --btn-dark-text: #3B9CF6;
  --chip-border: #303135;
  --separator: #ADAFB3;
  --divider: #4C4D52;
  --compare-before-bg: #02071B;
  --compare-card-before: #FFE9D5;
  --compare-card-after: #FAC99C;
  --note-kicker: #A8A8A8;
  --btn-ghost-bg: #191F21;
  --avatar-bg: #AAAAAA;
  --quote-role: #C3C3C3;
  --input-bg: #1E2629;
  --choice-bg: #23292F;
  --orange-select: #F08F16;
  --placeholder: #AFAFAF;
  --tile-border: #9F5A15;
  --white-10: rgba(255, 255, 255, 0.1);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-08: rgba(255, 255, 255, 0.08);
  --orange-text-50: rgba(239, 122, 3, 0.5);
  --indigo-40: rgba(70, 83, 196, 0.4);
  --indigo-50: rgba(130, 143, 255, 0.5);
  --orange-50: rgba(254, 150, 21, 0.5);
  --choice-dark: #121820;
  --muted-4: #81878E;
  --silver: #CBCBCB;
  --green-bright: #22C55E;
  --green-08: rgba(20, 122, 27, 0.08);
  --amber: #FCBF48;
  --amber-08: rgba(252, 191, 72, 0.08);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-50: rgba(0, 0, 0, 0.5);
  --slider-fill: #F6831E;
  --slider-track: #262D34;
  --slider-ring: #F49541;
  --switch-off: #343B42;
  --switch-knob-ring: #CFD0D2;
  --muted-5: #B9B9B9;
  --google-text: #3B3B3E;
  --link-blue: #4170CD;
  --bg-banner: rgba(24, 25, 31, 0.6);
  --grad-cta: linear-gradient(270deg, #FA1B02 0%, #FAA847 100%);
  --grad-warm: linear-gradient(-45deg, #34282A 0%, #3D3629 100%);
  --grad-indigo-card: linear-gradient(136deg, #31333E 0%, #252636 100%);
  --grad-indigo-icon: linear-gradient(-45deg, #292A36 0%, #2A2C40 100%);
  --grad-hero-glow: radial-gradient(circle at 50% 50%, rgba(0, 6, 28, 1) 0%, rgba(0, 6, 28, 0) 70%);
  --grad-warm-reverse: linear-gradient(135deg, #3D3629 0%, #34282A 100%);
  --shadow-md: 0px 6px 16px 0px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0px 0px 8px 8px rgba(176, 184, 188, 0.18);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--body-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.section-pad {
  padding: clamp(56px, 7vw, 100px) clamp(20px, 5vw, 100px);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.section-head-tight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.eyebrow {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.1667em;
  text-align: center;
  color: var(--orange-alt);
  text-transform: uppercase;
}

.section-title {
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.25;
  text-align: center;
  color: var(--heading);
}

.section-sub {
  max-width: 729px;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4;
  text-align: center;
  color: var(--body-text);
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 48px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--grad-cta);
  color: var(--cta-text);
  min-width: 240px;
}

.btn-secondary {
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  min-width: 240px;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

.btn-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px clamp(20px, 5vw, 100px);
  background: var(--white-10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.brand span {
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  color: var(--white);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 60px);
}

.site-nav a {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-text);
}

.site-nav a:hover {
  color: var(--heading);
}

.site-nav a.btn-primary,
.site-nav a.btn-primary:hover {
  color: var(--cta-text);
}

.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-lang::after {
  content: '▾';
  font-size: 11px;
}

.nav-pro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-pro a {
  font-weight: 600;
  color: var(--orange);
}

.badge-new {
  background: var(--grad-cta);
  box-shadow: var(--shadow-md);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  color: var(--white);
}

.header-cta {
  min-width: 182px;
}

@media (max-width: 1100px) {
  .site-nav .nav-hide {
    display: none;
  }
}

@media (max-width: 640px) {
  .brand span {
    font-size: 20px;
  }

  .header-cta {
    min-width: 0;
  }
}

.hero {
  position: relative;
  padding: calc(88px + clamp(24px, 4vw, 76px)) clamp(20px, 5vw, 100px) clamp(80px, 8vw, 150px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.hero-art {
  position: relative;
  width: min(1135px, 92vw);
  margin: 0 auto;
  aspect-ratio: 1135 / 419;
}

.hero-art::before {
  content: '';
  position: absolute;
  inset: -25% -15%;
  background: var(--grad-hero-glow);
  z-index: 0;
}

.hero-art > * {
  position: absolute;
  z-index: 1;
}

.hero-window-left {
  left: 0;
  top: 11.5%;
  width: 50%;
}

.hero-window-right {
  right: 0;
  top: 11.5%;
  width: 50%;
}

.hero-icon-left {
  left: 4.3%;
  top: 35.8%;
  width: 13.8%;
}

.hero-icon-right {
  left: 82.4%;
  top: 36.4%;
  width: 14.4%;
}

.hero-logo-card {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 10%;
  min-width: 72px;
  aspect-ratio: 1;
  background: var(--bg);
  border: 0.5px solid var(--body-text);
  box-shadow: var(--shadow-glow);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-card img {
  width: 60%;
  transform: translateX(-9%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(24px, 3vw, 48px);
}

.hero-copy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.hero-title {
  font-weight: 600;
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 1.25;
  text-align: center;
  color: var(--heading);
}

.hero-title .dim {
  font-weight: 400;
  color: var(--body-text);
}

.hero-sub {
  max-width: 755px;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4;
  text-align: center;
  color: var(--body-text);
}

/* Compact hero: the arc illustration is branding, not the proposition, so it is
   capped at ~200px tall and the copy/price/CTAs carry the first screen. */
.hero-art-compact {
  width: min(560px, 80vw);
}

.hero-compact .hero-copy {
  margin-top: clamp(16px, 2vw, 32px);
  gap: clamp(20px, 2.5vw, 32px);
}

.hero-price {
  font-weight: 600;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.5;
  text-align: center;
  color: var(--orange-text);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.hero-trust li {
  display: flex;
  align-items: center;
}

.hero-trust li + li::before {
  content: '·';
  margin: 0 12px;
  color: var(--muted-2);
}

.service-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4vw, 60px);
}

.service-head {
  max-width: 1200px;
}

.service-head .section-sub {
  max-width: 1028px;
}

.split-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: min(1145px, 100%);
}

.split-card {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-md);
}

.split-ai {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 32px 0 0 32px;
}

.split-expert {
  width: 44%;
  background: var(--grad-warm);
  border: 1px solid var(--orange-border);
  border-radius: 0 32px 32px 0;
}

.split-head {
  display: flex;
  align-items: center;
  gap: 32px;
}

.split-head img {
  width: 64px;
  height: 64px;
}

.split-pct {
  font-weight: 600;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.25;
  color: var(--white);
}

.split-pct-label {
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.33;
  color: var(--body-text);
}

.split-expert .split-pct,
.split-expert .split-pct-label {
  color: var(--orange-text);
}

.split-divider {
  border: none;
  border-top: 1px solid var(--white);
  width: 100%;
}

.split-expert .split-divider {
  border-top-color: var(--orange-text-50);
}

.split-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.split-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.split-item img {
  width: 32px;
  height: 32px;
  flex: none;
}

.split-item span {
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.33;
  color: var(--muted);
}

.split-expert .split-item span {
  color: var(--orange-text);
}

.bridge-arrow {
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  z-index: 2;
}

.delivery-banner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 113px);
  padding: 24px;
  background: var(--bg-banner);
  border: 1px solid var(--border);
  border-radius: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.delivery-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.icon-tile {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-warm);
  border: 1px solid var(--orange-border);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}

.icon-tile img {
  width: 24px;
  height: auto;
}

.icon-tile-indigo {
  background: var(--grad-indigo-icon);
  border-color: var(--indigo);
}

.delivery-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--white);
}

.delivery-sub {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--body-text);
}

.delivery-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delivery-chip {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chip-border);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}

.fixes-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4vw, 64px);
  padding-top: 0;
}

.fixes-head {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: var(--body-text);
}

.fixes-head strong {
  font-weight: 600;
  color: var(--orange-text);
}

.fixes-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  width: min(1442px, 100%);
  justify-content: center;
}

.fix-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  max-width: 422px;
}

.fix-item img {
  width: 48px;
  height: 48px;
  flex: none;
}

.fix-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--heading);
}

.fix-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-2);
  margin-top: 4px;
}

.fix-sep {
  width: 1px;
  height: 72px;
  background: var(--separator);
  opacity: 0.5;
  flex: none;
}

.ticker {
  background: var(--bg-ticker);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.ticker-item img {
  width: 16px;
  height: 16px;
}

.ticker-item span {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-3);
  white-space: nowrap;
}

.cases-section {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--muted);
  border-radius: 1000px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.badge-pill:hover {
  border-color: var(--white);
  color: var(--white);
  background-color: var(--white-10);
  transform: translateY(-1px);
}

.badge-pill:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.badge-pill.active {
  border-color: var(--orange);
  color: var(--orange);
}

.badge-pill.active:hover {
  border-color: var(--orange);
  color: var(--orange);
  background-color: transparent;
  transform: none;
}

.badge-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.compare-stage {
  position: relative;
  width: min(1070px, 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.case-arrow {
  position: absolute;
  width: 16.8%;
  pointer-events: none;
}

.arrow-before {
  left: -8.8%;
  bottom: 25%;
}

.arrow-after {
  right: -5%;
  bottom: 21.8%;
}

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 1070 / 680;
  border-radius: 26.5px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.compare-layer {
  position: absolute;
  inset: 0;
}

.compare-before {
  background: var(--compare-before-bg);
}

.compare-after {
  background: var(--card);
  clip-path: inset(0 0 0 50%);
}

.compare-card {
  position: absolute;
  inset: 12% 9%;
  border-radius: 21px;
  overflow: hidden;
}

.compare-before .compare-card {
  background: var(--compare-card-before);
}

.compare-after .compare-card {
  background: var(--compare-card-after);
}

.compare-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.compare-label {
  position: absolute;
  top: 3.6%;
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 15.5px);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.compare-before .compare-label {
  left: 3.5%;
  color: var(--white);
}

.compare-after .compare-label {
  right: 3.5%;
  color: var(--orange);
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50px;
  margin-left: -25px;
  cursor: ew-resize;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-handle img {
  height: 100%;
  width: auto;
}

.case-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
}

.case-note .kicker {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--note-kicker);
}

.case-note.after-note .kicker {
  color: var(--step-num);
}

.case-note .title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--white);
}

.case-note.after-note .title {
  color: var(--indigo);
}

.case-note .desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.pricing-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.pricing-cards {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.price-card {
  width: min(639px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.price-card-polish {
  background: var(--grad-warm);
  border: 1px solid var(--orange-border);
}

/* Highlighted plan: same recipe as .pro-card on pricing.html (warm gradient,
   orange hairline, orange glow) so the two pricing surfaces read as one. */
.price-card-pro {
  background: linear-gradient(135deg, #2d2620 0%, #241f1a 100%);
  border: 2px solid rgba(250, 170, 71, 0.5);
  box-shadow: 0 8px 40px rgba(250, 170, 71, 0.2);
}

/* --- Services: 3 one-off outcomes + 2 recurring plans ------------------- */

.anchor-alias {
  display: block;
  position: relative;
  top: -80px;
  height: 0;
  visibility: hidden;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.price-card-oneoff {
  background: var(--card);
  border: 1px solid var(--border);
}

/* Your Studio: the purple treatment of .lifetime-card on pricing.html —
   card surface, border and glow only; the price, notes and checks keep the
   same colours as the other cards, exactly as on pricing.html. */
.price-card-studio {
  /* Exact computed surface of .lifetime-card on pricing.html. The gradient
     is shallow enough to read as flat; name and CTA stay solid purple. */
  background: linear-gradient(135deg, #2a2035 0%, #1f1a2a 100%);
  border: 2px solid rgba(147, 51, 234, 0.5);
  box-shadow: 0 8px 40px rgba(147, 51, 234, 0.2);
}

.services-grid .price-card-pro {
  position: relative;
  z-index: 1;
}

/* Card heads are centred like .pricing-card-header on pricing.html; the
   feature lists stay left-aligned like .features-list there. */
.services-grid .plan-head {
  justify-content: center;
  text-align: center;
}

.services-grid .plan-price {
  justify-content: center;
}

.services-grid .plan-alt {
  text-align: center;
}

.services-grid .plan-meta {
  justify-content: center;
  gap: 12px 24px;
}

/* Segmented control — used for the service slider and the billing toggle. */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.seg-btn {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.seg-btn:hover {
  color: var(--white);
}

.seg-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.seg-btn.active {
  background: var(--white);
  color: #1f1f1f;
}

.svc-switch {
  display: flex;
  width: 100%;
}

.svc-switch .seg-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 6px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* Panes are stacked in one grid cell: the wrapper takes the height of the
   tallest pane, so switching services never changes the card height. Inactive
   panes stay laid out but invisible and inert. */
.svc-panes {
  flex: 1;
  display: grid;
}

.svc-pane {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* !important because Bootstrap's reboot sets `[hidden] { display: none
   !important }`; the pane must keep its box so the stack keeps its height. */
.svc-pane[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

/* "When to pick this" line under the slider. */
.svc-fit {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--orange-text);
}

.svc-pane .plan-desc strong {
  font-weight: 600;
  color: var(--white);
}

/* Info icon + tooltip for plan features. Opens on hover/focus; JS toggles
   .open for touch. */
.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: -1px;
  margin-left: 6px;
}

.info-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.info-btn:hover,
.info-btn:focus-visible,
.info-tip.open .info-btn {
  color: var(--orange-text);
}

.info-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 50%;
}

.tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: 250px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid var(--chip-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--white);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 5;
}

.tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a1a;
}

.info-tip:hover .tip,
.info-tip:focus-within .tip,
.info-tip.open .tip {
  opacity: 1;
  visibility: visible;
}

/* Last card sits against the right edge: anchor its tips to the right. */
.services-grid > .price-card:last-child .tip {
  left: auto;
  right: -8px;
  transform: none;
}

.services-grid > .price-card:last-child .tip::after {
  left: auto;
  right: 12px;
  transform: none;
}

/* --- "What we design" tiles --------------------------------------------- */

/* Sits on the base canvas: the why-section above it is already a --bg-alt
   band, so tinting this one too would merge the two into one slab. */
.offers-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.offer-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* Scrim so the label stays readable once real photography goes in. */
.offer-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
}

/* Styles a placeholder <div> and a real <img> identically. */
.offer-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  font-size: 36px;
  color: rgba(255, 255, 255, 0.4);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, var(--offer-tint, rgba(255, 255, 255, 0.1)), transparent 70%),
    var(--card-dark);
}

img.offer-media {
  display: block;
}

/* Rotating accent tints keep the placeholder grid from reading as one slab. */
.offer-card:nth-child(3n + 1) {
  --offer-tint: rgba(250, 170, 71, 0.18);
}

.offer-card:nth-child(3n + 2) {
  --offer-tint: rgba(130, 143, 255, 0.18);
}

.offer-card:nth-child(3n + 3) {
  --offer-tint: rgba(168, 85, 247, 0.18);
}

.offer-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 1;
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--white);
}

.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.plan-alt {
  margin: -0.75rem 0 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.services-note {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--green);
}

.btn-link {
  align-self: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover {
  color: var(--white);
}

/* --- "Skip the freelancer hunt" comparison table ------------------------ */

.compare-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.compare-table th,
.compare-table td {
  padding: 16px 24px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table th {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card-dark);
}

.compare-table td {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--body-text);
}

/* First column: what each row compares. */
.compare-table .col-topic {
  width: 22%;
  background: var(--card-dark);
}

/* Vertical dividers between every column. Kept at lower specificity than
   .compare-table .col-us so the Phoenix column's orange edge still wins. */
.compare-table th + th,
.compare-table th + td,
.compare-table td + td {
  border-left: 1px solid var(--border);
}

.compare-table th[scope="row"] {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.compare-table .col-us {
  background: var(--grad-warm);
  border-left: 1px solid var(--orange-border);
}

.compare-table th.col-us {
  color: var(--orange);
}

.compare-table td.col-us {
  font-weight: 600;
  color: var(--white);
}

.compare-table td.col-us::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -3px;
  background: url('../img/icon-check.svg') center / contain no-repeat;
}

.why-tagline {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: var(--white);
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid var(--orange);
  border-radius: 1000px;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--orange);
}

.price-card-pro .plan-badge {
  border-color: var(--indigo);
  color: var(--indigo);
}

.plan-badge img {
  width: 12px;
  height: 12px;
}

.plan-head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.plan-name {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--white);
}

.plan-tag {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--muted);
}

.plan-divider {
  border: none;
  border-top: 1px solid var(--white-20);
  width: 100%;
}

.plan-price {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.plan-price .amount {
  font-weight: 600;
  font-size: clamp(44px, 4vw, 60px);
  line-height: 1.2;
  color: var(--orange-text);
}

.plan-price .per {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--muted-2);
  padding-bottom: 12px;
}

.plan-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plan-meta-item img {
  width: 14px;
  height: 14px;
}

.plan-meta-item span {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.plan-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--muted);
  max-width: 494px;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan-feature-row {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.plan-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 255px;
}

.plan-feature img {
  width: 20px;
  height: 20px;
  flex: none;
}

.plan-feature span {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.plan-discounts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-discounts .disc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--green);
}

.plan-discounts .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
}

.plan-note {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--orange-text);
}

.price-card .btn {
  width: 100%;
  margin-top: auto;
}

/* Note directly under the plan CTA, like "One-time payment · No recurring
   fees" under the lifetime button on pricing.html. */
.plan-note-cta {
  margin: -0.5rem 0 0;
  text-align: center;
  color: var(--body-text);
}

.btn-ghost-indigo {
  background: var(--btn-ghost-bg);
  color: var(--indigo);
}

.how-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.steps-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(972px, 100%);
}

/* --- How it works: 3 step cards + 1 wide outcome card -------------------- */

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.how-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
}

.how-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px 16px;
}

.how-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.how-head .step-num {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--orange-border);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

.how-head .step-num-done {
  background: var(--orange-text);
  border-color: var(--orange-text);
  color: #1f1f1f;
  font-size: 13px;
}

.how-head .step-title,
.how-card .step-desc {
  margin: 0;
}

/* The graphic panel: one glyph in a glowing disc, one fact chip. */
.how-mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 220px;
  padding: 28px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(250, 170, 71, 0.16), transparent 70%),
    var(--card-dark);
  border-radius: 18px;
}

.how-glyph {
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--tile-border);
  color: var(--orange-text);
  font-size: 36px;
  box-shadow: 0 0 36px rgba(250, 170, 71, 0.22);
}

.how-chip {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--chip-border);
  color: var(--white);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

/* Wide outcome card: copy left, the delivered files right. */
.how-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
}

.how-card-wide .how-card-body {
  padding: 24px 32px;
}

.how-mock-files {
  min-height: 200px;
}

.how-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(260px, 100%);
}

.how-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--white);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
}

.how-file i {
  width: 20px;
  text-align: center;
  font-size: 18px;
}

.how-file-figma { color: #a259ff; }
.how-file-html { color: #e34f26; }
.how-file-css { color: #2965f1; }

.step-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--card);
  border-radius: 24px;
  align-self: stretch;
}

.step-num {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--step-num);
}

.step-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--orange);
}

.step-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.step-arrow {
  width: 48px;
  height: 48px;
  flex: none;
}

.async-callout {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(972px, 100%);
  padding: 24px;
  background: var(--white-10);
  border-radius: 24px;
}

.async-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--white);
}

.async-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
  margin-top: 4px;
}

.quotes-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.quotes-row {
  display: flex;
  gap: 40px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.quotes-row::-webkit-scrollbar {
  display: none;
}

.quote-card {
  position: relative;
  flex: 0 0 calc((100% - 80px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 24px;
  background: var(--card);
  border-radius: 24px;
}

.quote-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 125px;
  flex: none;
}

.quote-person .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--avatar-bg);
}

.quote-person .name {
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--white);
  text-align: center;
}

.quote-person .role {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--quote-role);
  text-align: center;
}

.quote-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quote-stars img {
  width: 16px;
  height: 16px;
}

.quote-text {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--body-text);
}

.quote-mark {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.quote-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.quote-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--divider);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.quote-dot.active {
  width: 32px;
  border-radius: 8px;
  background: var(--orange);
}

.why-section {
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.why-section .section-title {
  max-width: 890px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: min(1720px, 100%);
}

.why-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--card);
  border-radius: 24px;
}

.why-num {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--step-num);
}

.why-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--orange);
}

.why-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.contact-section {
  background: var(--grad-warm-reverse);
  border-top: 1px solid var(--orange-border);
  border-bottom: 1px solid var(--orange-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.contact-section .section-sub {
  max-width: 668px;
}

.faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.faq-sub {
  max-width: 575px;
}

.faq-sub strong {
  font-weight: 700;
  color: var(--indigo-link);
}

.faq-sub a {
  color: var(--indigo-link);
}

.faq-list {
  width: min(922px, 100%);
}

.faq-item {
  border-bottom: 1px solid var(--divider);
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--white);
}

.faq-q img {
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform 0.25s ease;
}

.faq-item.open .faq-q img {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--body-text);
}

.faq-item.open .faq-a {
  max-height: 300px;
}

.faq-a p {
  padding: 0 40px 32px 0;
}

.ready-section {
  border-top: 1px solid var(--muted-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.ready-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.25;
  text-align: center;
  color: var(--heading);
}

.ready-title .dim {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: var(--body-text);
  letter-spacing: -0.0167em;
}

.ready-section .section-sub {
  max-width: 552px;
}

.site-footer {
  display: flex;
  border-top: 1px solid var(--muted-2);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px clamp(20px, 10vw, 200px);
  flex-wrap: wrap;
}

.site-footer,
.site-footer a {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted-3);
}

.site-footer a:hover {
  color: var(--heading);
}

/* Scoped to .site-footer on purpose: css/styles.css owns a different
   .footer-links (the stacked link column inside the shared .footer-new
   footer). Pages that have migrated to the shared footer must not have that
   column flattened into a wrapping horizontal row by this rule. */
.site-footer .footer-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}

@media (min-width: 1440px) {
  .compare-stage {
    width: min(1070px, 100% - 500px);
  }

  .case-note {
    position: absolute;
    width: max-content;
  }

  .case-note.before-note {
    right: calc(100% + 16px);
    bottom: 11%;
  }

  .case-note.after-note {
    left: calc(100% + 40px);
    bottom: 8%;
  }
}

@media (max-width: 1439px) {
  .case-arrow {
    display: none;
  }
}

@media (max-width: 900px) {
  .split-wrap {
    flex-direction: column;
  }

  .split-ai {
    border-radius: 32px 32px 0 0;
  }

  .split-expert {
    width: 100%;
    border-radius: 0 0 32px 32px;
  }

  .bridge-arrow {
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .fixes-row {
    flex-direction: column;
    align-items: stretch;
  }

  .fix-item {
    max-width: none;
  }

  .fix-sep {
    width: 100%;
    height: 1px;
  }

  .steps-row {
    flex-direction: column;
    align-items: stretch;
  }

  .step-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .offers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-grid,
  .how-card-wide {
    grid-template-columns: 1fr;
  }

  .how-card-wide .how-card-body {
    padding: 20px 16px 16px;
  }

  .how-mock {
    min-height: 180px;
  }

  .compare-stage {
    justify-content: center;
    text-align: center;
  }

  .quote-card {
    flex: 0 0 100%;
    flex-direction: column;
    text-align: center;
  }

  .async-callout {
    flex-direction: column;
    text-align: center;
  }

  .site-footer {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Comparison table → stacked cards on phones: each row becomes a block and
   every cell prints its column name from data-label. */
@media (max-width: 640px) {
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td,
  .compare-table th[scope="row"] {
    display: block;
    width: 100%;
  }

  /* The row header becomes the heading of each stacked block. */
  .compare-table th[scope="row"] {
    padding: 14px 20px 6px;
    background: var(--card-dark);
    border-right: none;
    border-bottom: none;
    color: var(--orange-text);
  }

  .compare-table tr {
    border-bottom: 1px solid var(--border);
  }

  .compare-table tbody tr:last-child {
    border-bottom: none;
  }

  .compare-table td {
    padding: 10px 20px;
    border-bottom: none;
  }

  .compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
  }

  /* Stacked on phones: no vertical dividers. */
  .compare-table th + th,
  .compare-table th + td,
  .compare-table td + td,
  .compare-table .col-us {
    border-left: none;
  }

  .compare-table td.col-us::before {
    content: attr(data-label);
    display: block;
    width: auto;
    height: auto;
    margin-right: 0;
    margin-bottom: 2px;
    background: none;
    color: var(--orange);
  }

  /* Two per line, no separators — a wrapped "·" otherwise lands at the start
     of the second line. */
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px 20px;
    justify-content: center;
  }

  .hero-trust li + li::before {
    content: none;
  }

  /* At two-up the tiles are ~165px wide, so a wrapping label would sit on
     top of the icon. Square them off and tighten the label. */
  .offer-media {
    aspect-ratio: 1 / 1;
    font-size: 28px;
  }

  .offer-label {
    left: 14px;
    right: 14px;
    bottom: 12px;
    font-size: 14px;
  }
}


/* ===================== pro-design-forms.css ===================== */
.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 88px clamp(20px, 5vw, 100px) 36px;
}

.contact-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: clamp(200px, 20vw, 300px);
  padding: 50px 0;
}

.contact-form {
  display: contents;
}

.form-card {
  width: min(1162px, 100%);
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: clamp(24px, 5vw, 80px);
  background: var(--card-dark);
  border-radius: 24px;
}

.form-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.form-card-title {
  font-weight: 600;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.22;
  text-align: center;
  color: var(--heading);
}

.form-card-sub {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-text);
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.question {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--white-10);
  border-radius: 16px;
}

.q-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.q-head-inline {
  align-items: center;
}

.q-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--orange);
}

.q-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.q-title {
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  color: var(--white);
}

.q-hint {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-text);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.choice-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--choice-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.choice-card:hover {
  border-color: var(--body-text);
}

.choice-card:has(input:checked) {
  background: var(--input-bg);
  border-color: var(--orange-select);
}

.choice-card:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.choice-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.choice-icon {
  flex: none;
  width: 24px;
  height: 24px;
  background: url('../img/radio-off.svg') center / contain no-repeat;
}

.choice-card:has(input:checked) .choice-icon {
  background-image: url('../img/radio-on.svg');
}

.choice-label {
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 24px;
  color: var(--white);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 920px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-radius: 16px;
  cursor: pointer;
}

.check-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.check-item:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.check-icon {
  flex: none;
  width: 24px;
  height: 24px;
  background: url('../img/checkbox-off.svg') center / contain no-repeat;
}

.check-item:has(input:checked) .check-icon {
  background-image: url('../img/checkbox-on.svg');
}

.check-label {
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 32px;
  color: var(--white);
}

.check-item:hover .check-label {
  color: var(--heading);
}

.check-label small {
  font-size: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: var(--white);
}

.field-optional {
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--white);
  transition: border-color 0.2s ease;
}

.input::placeholder {
  color: var(--placeholder);
  opacity: 0.6;
}

.input:hover {
  border-color: var(--body-text);
}

.input:focus {
  outline: none;
  border-color: var(--orange-select);
}

.input-textarea {
  min-height: 144px;
  resize: vertical;
  font-weight: 300;
  line-height: 20px;
}

.input-wrap {
  position: relative;
}

.input-wrap .input {
  padding-left: 48px;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.form-submit {
  width: min(365px, 100%);
}

.submitted-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 100px);
  background: var(--bg-alt);
}

.submitted-card {
  width: min(810px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--card);
  border-radius: 24px;
}

.submitted-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.submitted-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.submitted-title {
  font-weight: 600;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.22;
  color: var(--heading);
}

.submitted-sub {
  max-width: 419px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-text);
}

.next-steps {
  width: min(550px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--card-dark);
  border-radius: 24px;
}

.next-steps-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--white-08);
}

.icon-tile-sm {
  width: 30px;
  height: 30px;
  border-color: var(--tile-border);
  border-radius: 4px;
}

.icon-tile-sm img {
  width: 17px;
}

.next-steps-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: var(--white);
}

.next-steps-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

.next-steps-list::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 9px;
  bottom: 9px;
  border-left: 1px dashed var(--white);
}

.next-steps-list li {
  position: relative;
  padding-left: 32px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--white);
}

.next-steps-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.next-steps-list strong {
  font-weight: 600;
}

.submitted-foot {
  width: min(372px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.submitted-eta {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: var(--body-text);
}

.submitted-foot .btn {
  width: 100%;
}

@media (max-width: 700px) {
  .check-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .check-item {
    padding: 0;
  }

  .q-head {
    gap: 16px;
  }

  .choice-card {
    width: 100%;
  }
}


/* ===================== pro-design-account.css ===================== */
:root {
  --nav-text: rgba(255,255,255,0.6);
  --nav-border: rgba(145, 158, 171, 0.12);
  --white-16: rgba(255, 255, 255, 0.16);
  --cyan: #06B6D5;
  --cyan-10: rgba(6, 182, 213, 0.1);
  --gray-600: rgba(255,255,255,0.45);
  --grad-cancel: linear-gradient(-45deg, #34282A 0%, #2F2E2C 100%);
  --grad-cancel-icon: linear-gradient(-45deg, #34282A 0%, #3D382F 100%);
  --cancel-border: #3D3E3F;
  --cancel-icon-border: #4B4C51;
  --search-border: rgba(145, 158, 171, 0.2);
  --search-placeholder: #919EAB;
  --filter-border: rgba(145, 158, 171, 0.32);
  --orange-10: rgba(254, 150, 21, 0.1);
  --green-10: rgba(34, 197, 94, 0.1);
  --indigo-10: rgba(130, 143, 255, 0.1);
  --amber-10: rgba(252, 191, 72, 0.1);
  --red: #CD2A1F;
  --red-10: rgba(205, 42, 31, 0.1);
  --tile-bg: #2a2a2a;
  --chat-bubble-me: #707070;
  --chat-time-me: rgba(255,255,255,0.55);
  --avatar-me: #FAA847;
}

.acct-body {
  background: var(--bg-alt);
}

.acct-layout {
  display: flex;
  min-height: 100vh;
}

.acct-sidebar {
  position: sticky;
  top: 0;
  flex: none;
  width: 300px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 40px;
  background: var(--card-dark);
  border-right: 1px solid var(--nav-border);
}

.acct-brand {
  display: flex;
  align-items: center;
}

.acct-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.acct-brand span {
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: var(--white);
}

.acct-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
}

.acct-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acct-nav-item {
  display: flex;
  align-items: center;
  padding: 4px 8px 4px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--nav-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.acct-nav-item img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.acct-nav-item:hover {
  color: var(--white);
  background: var(--white-08);
}

.acct-nav-item.active {
  font-weight: 600;
  color: var(--orange);
  background: var(--card);
}

.acct-user {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--white-16);
}

.acct-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
}

.acct-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.acct-user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.acct-user-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}

.acct-user-email {
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-logout {
  flex: none;
  width: 24px;
  height: 24px;
}

.acct-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 60px clamp(20px, 5.7vw, 110px) 60px 40px;
}

.acct-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--orange);
}

.acct-back img {
  width: 24px;
  height: 24px;
}

.acct-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(1470px, 100%);
}

.acct-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  background: var(--card-dark);
  border-radius: 24px;
}

.acct-card hr {
  border: none;
  border-top: 1px solid var(--white-16);
}

.acct-card-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: var(--white);
}

.acct-order {
  background: var(--card);
  border-radius: 16px;
}

.acct-order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.acct-order-id {
  display: flex;
  align-items: center;
  gap: 20px;
}

.acct-order-id img {
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.acct-badge {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
}

.acct-badge-cyan {
  background: var(--cyan-10);
  color: var(--cyan);
}

.acct-order-meta {
  display: flex;
  gap: 24px;
  padding-bottom: 16px;
}

.acct-meta {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-meta-label {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--silver);
}

.acct-meta-value {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--white);
}

.acct-meta-value small {
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}

.acct-meta-value img {
  width: 24px;
  height: 24px;
}

.acct-meta-figma {
  gap: 6px;
}

.acct-row {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.acct-progress {
  flex: none;
  width: 891px;
}

.acct-progress-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.acct-progress-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.acct-progress-main {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.acct-progress-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--white);
  border-radius: 200px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--white);
}

.acct-progress-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 602px;
}

.acct-progress-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}

.acct-progress-sub {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-progress-when {
  flex: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
}

.acct-progress-when.now {
  color: var(--green-bright);
}

.acct-progress-when.soon {
  color: var(--orange);
}

.acct-designer {
  flex: 1 1 0;
  min-width: 0;
}

.acct-designer-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.acct-designer-row > img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.acct-designer-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-designer-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  color: var(--body-text);
}

.acct-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.acct-edit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--orange);
}

.acct-edit img {
  width: 16px;
  height: 16px;
}

.acct-brief-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.acct-brief-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 622px;
}

.acct-brief-label {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-brief-value {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--white);
}

.acct-brief-value a {
  color: var(--indigo);
}

.acct-brief-value a:hover {
  text-decoration: underline;
}

.acct-cancel {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--grad-cancel);
  border: 1px solid var(--cancel-border);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}

.acct-cancel .icon-tile {
  background: var(--grad-cancel-icon);
  border-color: var(--cancel-icon-border);
}

.acct-cancel .icon-tile img {
  width: 28px;
}

.acct-cancel-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.acct-cancel-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acct-cancel-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: var(--white);
}

.acct-cancel-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-cancel-link {
  flex: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--orange);
}

@media (max-width: 1500px) {
  .acct-progress {
    flex: 1 1 60%;
    width: auto;
  }

  .acct-designer {
    flex: 1 1 40%;
  }
}

@media (max-width: 1100px) {
  .acct-row {
    flex-direction: column;
  }

  .acct-order-meta {
    flex-wrap: wrap;
  }

  .acct-meta {
    flex: 1 1 40%;
  }
}

@media (max-width: 900px) {
  .acct-layout {
    flex-direction: column;
  }

  .acct-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--nav-border);
  }

  .acct-nav {
    padding-top: 16px;
  }

  .acct-main {
    padding: 32px 20px 60px;
  }
}

@media (max-width: 700px) {
  .acct-card {
    padding: 24px;
  }

  .acct-order-head,
  .acct-progress-item,
  .acct-card-head,
  .acct-cancel-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .acct-progress-when {
    padding-left: 60px;
  }

  .acct-cancel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.acct-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: min(1480px, 100%);
}

.acct-page-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-page-title {
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  color: var(--white);
}

.acct-page-sub {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-page-head .btn {
  width: 240px;
  min-width: 0;
  flex: none;
}

.acct-content-wide {
  width: min(1480px, 100%);
  gap: 24px;
}

.acct-stats {
  display: flex;
  gap: 40px;
}

.acct-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: var(--white-08);
  border-radius: 16px;
  text-align: center;
}

.acct-stat-num {
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
  color: var(--white);
}

.acct-stat-num.indigo {
  color: var(--indigo);
}

.acct-stat-num.orange {
  color: var(--orange);
}

.acct-stat-num.green {
  color: var(--green-bright);
}

.acct-stat-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--body-text);
}

.acct-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.acct-search {
  flex: 1;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 14px;
  border: 1px solid var(--search-border);
  border-radius: 8px;
}

.acct-search img {
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.acct-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--white);
}

.acct-search input::placeholder {
  color: var(--search-placeholder);
}

.acct-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  background: none;
  border: 1px solid var(--filter-border);
  border-radius: 8px;
  font-family: inherit;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: var(--white);
  cursor: pointer;
}

.acct-filter strong {
  font-weight: 700;
}

.acct-filter img {
  width: 24px;
  height: 24px;
}

.acct-table {
  display: flex;
  flex-direction: column;
}

.acct-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 262px 245px 224px 231px 60px;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid var(--white-08);
  transition: background-color 0.2s ease;
}

a.acct-table-row:hover {
  background: var(--white-08);
}

.acct-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 16px 24px;
}

.acct-cell-name {
  gap: 12px;
}

.acct-cell-name div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acct-cell-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-cell-id {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-600);
}

.acct-cell-muted {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-600);
}

.acct-cell-muted img {
  flex: none;
  width: auto;
  height: 20px;
}

.acct-cell-muted img.sm {
  width: 16px;
  height: 16px;
}

.acct-cell-date {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}

.acct-cell-date.orange {
  color: var(--orange);
}

.acct-cell-date.green {
  color: var(--green-bright);
}

.acct-cell-chevron {
  padding: 16px;
}

.acct-cell-chevron img {
  width: 24px;
  height: 24px;
}

.acct-badge-sm {
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.acct-badge-orange {
  background: var(--orange-10);
  color: var(--orange);
}

.acct-badge-green {
  background: var(--green-10);
  color: var(--green-bright);
}

.acct-badge-indigo {
  background: var(--indigo-10);
  color: var(--indigo);
}

.acct-badge-amber {
  background: var(--amber-10);
  color: var(--amber);
}

.acct-badge-red {
  background: var(--red-10);
  color: var(--red);
}

.acct-card-lite {
  background: var(--card);
  border-radius: 16px;
}

.acct-card-lite hr,
.acct-order hr {
  border-top-color: var(--white-16);
}

.acct-tile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.acct-tile-main {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.acct-tile-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.acct-tile-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: var(--white);
}

.acct-tile-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-tile-desc b {
  font-weight: 400;
  margin: 0 12px;
}

.acct-link {
  flex: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--orange);
}

.acct-link.underline {
  text-decoration: underline;
}

.acct-banner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 40px;
  background: var(--grad-warm);
  border-radius: 16px;
}

.acct-invoices {
  display: grid;
  grid-template-columns: 201px minmax(0, 1fr) 188px 212px 223px;
  background: var(--bg-alt);
  border-radius: 12px;
  overflow: hidden;
}

.acct-invoices > * {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--white-08);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}

.acct-invoices .th {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
}

.acct-invoices .acct-cell-name {
  padding: 16px 24px;
}

.acct-invoices img {
  width: 24px;
  height: 24px;
}

.acct-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.acct-plan-main {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 600px;
}

.acct-plan-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acct-plan-desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-plan-icon-lg {
  width: 64px;
  height: 64px;
  background: var(--grad-indigo-icon);
  border-color: var(--indigo);
}

.acct-plan-icon-lg img {
  width: 40px;
}

.acct-card .btn-md {
  width: 240px;
  min-width: 0;
  font-size: 14px;
}

.acct-included {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1040px;
}

.acct-included-cols {
  display: flex;
  gap: 12px;
}

.acct-included-cols ul {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.acct-included-cols li {
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--white);
}

.acct-included-cols li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.acct-info-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--tile-bg);
  border-radius: 16px;
}

.acct-sub-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.btn-grey {
  min-width: 0;
  background: var(--muted-3);
  color: var(--cta-text);
  font-size: 14px;
}

.btn-grey img {
  width: 16px;
  height: 16px;
}

.acct-refund-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-refund-note img {
  width: 20px;
  height: 20px;
}

.acct-faq {
  display: flex;
  gap: 24px;
  padding: 24px;
  background: var(--tile-bg);
  border-radius: 16px;
}

.acct-faq::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.acct-faq-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acct-faq-q {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--white);
}

.acct-faq-a {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: var(--body-text);
}

.acct-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--black-50);
}

.acct-modal-card {
  width: min(504px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: var(--card);
  border-radius: 16px;
}

.acct-modal-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 357px;
  text-align: center;
}

.acct-modal-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: var(--white);
}

.acct-modal-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--body-text);
}

.acct-modal-desc strong {
  font-weight: 600;
}

.acct-modal-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.acct-modal-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
}

.acct-login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 100px);
  background: var(--bg-alt);
}

.acct-login-card {
  width: min(535px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: var(--card);
  border-radius: 24px;
}

.acct-login-brand {
  display: flex;
  align-items: center;
  gap: 27px;
}

.acct-login-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.acct-login-brand span {
  font-weight: 600;
  font-size: clamp(28px, 4vw, 37.6px);
  color: var(--white);
}

.acct-login-sub {
  max-width: 419px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--body-text);
}

.acct-login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.acct-login-form .login-form {
  gap: 40px;
}

.acct-login-card hr {
  width: 100%;
  border: none;
  border-top: 1px solid var(--white-08);
}

.acct-login-card .login-terms {
  max-width: 367px;
  font-size: 16px;
  color: var(--muted-5);
}

.acct-login-card .login-terms a {
  color: var(--orange);
}

@media (max-width: 1500px) {
  .acct-table-row {
    grid-template-columns: minmax(0, 1fr) 200px 200px 180px 180px 48px;
  }

  .acct-invoices {
    grid-template-columns: 160px minmax(0, 1fr) 140px 170px 180px;
  }
}

@media (max-width: 1100px) {
  .acct-stats {
    flex-wrap: wrap;
    gap: 24px;
  }

  .acct-stat {
    flex: 1 1 40%;
  }

  .acct-table,
  .acct-invoices-wrap {
    overflow-x: auto;
  }

  .acct-table-row {
    min-width: 960px;
  }

  .acct-invoices {
    min-width: 900px;
  }

  .acct-included-cols {
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .acct-page-head,
  .acct-toolbar,
  .acct-tile-row,
  .acct-plan-row,
  .acct-sub-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .acct-search {
    width: 100%;
  }

  .acct-page-head .btn,
  .acct-card .btn-md {
    width: 100%;
  }

  .acct-banner {
    padding: 24px;
  }

  .acct-tile-main {
    gap: 16px;
  }
}

[data-states],
[data-modes],
[data-briefs] {
  display: none;
}

body[data-state='submitted'] .acct-slot[data-states~='submitted'],
body[data-state='assigned'] .acct-slot[data-states~='assigned'],
body[data-state='progress'] .acct-slot[data-states~='progress'],
body[data-state='delivered'] .acct-slot[data-states~='delivered'],
body[data-state='refunded'] .acct-slot[data-states~='refunded'],
body[data-mode='view'] .acct-slot[data-modes~='view'],
body[data-mode='edit'] .acct-slot[data-modes~='edit'],
body[data-mode='saved'] .acct-slot[data-modes~='saved'],
body[data-mode='reply'] .acct-slot[data-modes~='reply'],
body[data-mode='cancel'] .acct-slot[data-modes~='view'],
body[data-brief='brand'] .acct-slot[data-briefs~='brand'],
body[data-brief='references'] .acct-slot[data-briefs~='references'],
body[data-brief='scratch'] .acct-slot[data-briefs~='scratch'] {
  display: contents;
}

body[data-brief='brand'] .acct-brief-form[data-briefs~='brand'],
body[data-brief='references'] .acct-brief-form[data-briefs~='references'],
body[data-brief='scratch'] .acct-brief-form[data-briefs~='scratch'] {
  display: flex;
}

body[data-mode='cancel'] .acct-modal-cancel-order {
  display: flex;
}

body[data-mode='cancel'] {
  overflow: hidden;
}

.acct-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--amber-08);
  border: 1px solid var(--amber);
  border-radius: 16px;
}

.acct-notice img {
  flex: none;
  width: 24px;
  height: 24px;
}

.acct-notice-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--amber);
}

.acct-notice-desc {
  font-weight: 400;
  font-size: 13px;
  line-height: 19.5px;
  color: var(--amber);
}

body[data-state='submitted'] [data-active~='submitted'] .acct-progress-num,
body[data-state='assigned'] [data-active~='assigned'] .acct-progress-num,
body[data-state='progress'] [data-active~='progress'] .acct-progress-num,
body[data-state='delivered'] [data-active~='delivered'] .acct-progress-num {
  background: var(--orange);
  border-color: var(--orange);
}

body[data-state='assigned'] [data-done~='assigned'] .acct-progress-num,
body[data-state='progress'] [data-done~='progress'] .acct-progress-num,
body[data-state='delivered'] [data-done~='delivered'] .acct-progress-num {
  background: var(--green-bright);
  border-color: var(--green-bright);
}

.acct-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cyan);
  font-weight: 600;
  color: var(--white);
}

.acct-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.acct-avatar-md {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.acct-avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.acct-avatar-me {
  background: var(--avatar-me);
}

.acct-designer-text-tight {
  gap: 8px;
}

.acct-designer-mail {
  flex: none;
  margin-left: auto;
}

.acct-designer-mail img {
  width: 32px;
  height: 32px;
}

.acct-designer-facts {
  display: flex;
  gap: 24px;
}

.acct-designer-facts .acct-brief-item {
  flex: 1 1 0;
}

.acct-locked-main {
  display: flex;
  align-items: center;
  gap: 32px;
}

.acct-locked-main .icon-tile {
  border-color: var(--tile-border);
}

.acct-locked-main .icon-tile img {
  width: 28px;
}

.acct-locked-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-locked-sub {
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
}

.acct-locked-chevron {
  flex: none;
  width: 48px;
  height: 48px;
}

.acct-saved {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--green-bright);
}

.acct-saved img {
  width: 16px;
  height: 16px;
}

.acct-brief-ref {
  max-width: 820px;
  padding: 24px;
  background: var(--tile-bg);
  border-radius: 16px;
}

.acct-brief-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acct-brief-moods .badge-pill {
  cursor: default;
}

.acct-brief-form {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.acct-brief-form .field {
  align-self: stretch;
}

.acct-brief-form .input {
  font-weight: 500;
  line-height: 20px;
}

.acct-brief-form .brief-textarea {
  min-height: 96px;
}

.acct-input-link {
  color: var(--indigo);
}

.acct-field-hint {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: var(--body-text);
}

.acct-file-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.acct-upload-link {
  position: relative;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--orange);
  cursor: pointer;
}

.acct-upload-link input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.acct-file-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  padding: 16px 24px;
  background: var(--card);
  border-radius: 8px;
}

.acct-file-icon {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.acct-file-text {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 277px;
  max-width: 100%;
}

.acct-file-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--white);
}

.acct-file-size {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--body-text);
}

.acct-file-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.acct-file-remove img {
  display: block;
  width: 24px;
  height: 24px;
}

.btn-save {
  width: 240px;
  min-width: 0;
}

.acct-brief-refs {
  display: flex;
  width: min(1015px, 100%);
}

.acct-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.acct-form-actions .btn {
  width: 126px;
  min-width: 0;
  font-size: 14px;
}

.acct-deliverables {
  display: flex;
  gap: 40px;
}

.acct-deliverable {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--grad-warm);
  border-radius: 16px;
}

.acct-deliverable-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.acct-deliverable .icon-tile {
  border-color: var(--tile-border);
}

.acct-deliverable .icon-tile img {
  width: 28px;
}

.acct-figma-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 10px;
  border: 1px solid var(--chip-border);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}

.acct-deliverable .acct-figma-badge img {
  width: 16px;
  height: 24px;
}

.acct-file-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--body-text);
}

.acct-file-meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--separator);
}

.acct-download {
  flex: none;
}

.acct-download img {
  width: 32px;
  height: 32px;
}

.acct-revision {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--grad-warm);
  border-radius: 16px;
}

.acct-revision-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.acct-revision-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 564px;
}

.acct-revision-title {
  font-weight: 600;
  font-size: 24px;
  color: var(--orange);
}

.acct-revision-desc {
  font-weight: 500;
  font-size: 18px;
  color: var(--body-text);
}

.acct-revision-time {
  flex: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: var(--body-text);
}

.acct-revision-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--green-bright);
}

.acct-revision-status img {
  width: 16px;
  height: 16px;
}

.acct-chat {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 40px;
  background: var(--card);
  border-radius: 16px;
}

.acct-chat-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 12px;
  border-bottom: 1px solid var(--white-08);
}

.acct-chat-name {
  font-weight: 600;
  font-size: 24px;
  color: var(--white);
}

.acct-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.acct-msg {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  max-width: 830px;
}

.acct-msg-me {
  align-self: flex-end;
  max-width: 455px;
}

.acct-bubble {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--input-bg);
  border-radius: 12px 12px 12px 0;
}

.acct-msg-me .acct-bubble {
  background: var(--chat-bubble-me);
  border-radius: 12px 12px 0 12px;
}

.acct-bubble p {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--white);
}

.acct-msg-time {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  color: var(--muted-3);
}

.acct-msg-time i {
  font-style: normal;
}

.acct-msg-me .acct-msg-time {
  justify-content: flex-start;
  color: var(--chat-time-me);
}

.acct-reply {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.acct-reply .brief-textarea {
  width: 100%;
  min-height: 96px;
}

@media (max-width: 1100px) {
  .acct-deliverables {
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .acct-designer-facts,
  .acct-locked-main,
  .acct-revision-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .acct-msg,
  .acct-msg-me {
    max-width: 100%;
  }

  .acct-chat {
    padding: 0 16px 24px;
  }
}

.acct-content-billing {
  gap: 24px;
}

.acct-plan-icon img {
  width: 32px;
}

.acct-plan-icon,
.acct-banner .icon-tile,
.acct-card-lite .icon-tile {
  border-color: var(--tile-border);
}

.acct-banner .icon-tile img,
.acct-card-lite .icon-tile img {
  width: 28px;
}

.acct-modal-text-wide {
  max-width: 342px;
}

body[data-mode='cancel'] .acct-modal-cancel,
body[data-mode='cancel-pro'] .acct-modal-cancel-pro {
  display: flex;
}

body[data-mode='cancel-pro'] {
  overflow: hidden;
}

.acct-invoices .acct-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}


/* ===================== pro-design-brief.css ===================== */
:root {
  --help-text: #7A7A7A;
  --border-2: #4A5458;
  --card-50: rgba(42, 51, 55, 0.5);
  --grad-outline: linear-gradient(90deg, #FAA847 0%, #FA1B02 100%);
}

.brief-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(140px, 11vw, 209px) clamp(20px, 5vw, 100px) 100px;
}

.brief-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.brief-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 100px;
}

.brief-progress-track {
  display: flex;
  align-items: center;
  gap: 40px;
}

.brief-progress-track img {
  width: 40px;
  height: 40px;
}

.brief-connector {
  width: 160px;
  height: 6px;
  border-radius: 8px;
  background: var(--divider);
}

.brief-connector.done {
  background: var(--green-bright);
}

.brief-connector.active {
  background: linear-gradient(90deg, var(--orange) 50%, var(--divider) 50%);
}

.brief-progress-labels {
  display: grid;
  grid-template-columns: 280px 280px 150px;
}

.brief-progress-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 150px;
}

.brief-progress-step {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--muted-4);
}

.brief-progress-name {
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  white-space: nowrap;
  color: var(--white);
}

.brief-progress-status {
  margin-top: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.brief-progress-status.done {
  color: var(--green-bright);
}

.brief-progress-status.active {
  color: var(--orange);
}

.brief-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 729px;
  margin-bottom: 70px;
  text-align: center;
}

.brief-title {
  font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.22;
  color: var(--heading);
}

.brief-sub {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-text);
}

.brief-form {
  width: min(1175px, 100%);
  display: flex;
  flex-direction: column;
}

.brief-tabs {
  display: flex;
  align-items: flex-end;
  gap: 54px;
  min-height: 150px;
  padding: 40px;
  background: var(--card-dark);
  border-radius: 24px 24px 0 0;
}

.brief-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brief-tab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.brief-tab-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--white);
  transition: color 0.2s ease;
}

.brief-tab-sub {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--body-text);
}

.brief-tab-bar {
  height: 4px;
  border-radius: 10px;
  background: var(--divider);
  transition: background-color 0.2s ease;
}

.brief-tab:hover .brief-tab-title {
  color: var(--orange);
}

.brief-page:not(:has(.brief-anchor:target)) [data-tab='details'] .brief-tab-title,
.brief-page:has(#details:target) [data-tab='details'] .brief-tab-title,
.brief-page:has(#goals:target) [data-tab='goals'] .brief-tab-title,
.brief-page:has(#final:target) [data-tab='final'] .brief-tab-title {
  color: var(--orange);
}

.brief-page:not(:has(.brief-anchor:target)) [data-tab='details'] .brief-tab-bar,
.brief-page:has(#details:target) [data-tab='details'] .brief-tab-bar,
.brief-page:has(#goals:target) [data-tab='goals'] .brief-tab-bar,
.brief-page:has(#final:target) [data-tab='final'] .brief-tab-bar {
  background: var(--orange);
}

.brief-step {
  display: none;
  flex-direction: column;
  gap: 48px;
}

.brief-page:not(:has(.brief-anchor:target)) [data-step='details'],
.brief-page:has(#details:target) [data-step='details'],
.brief-page:has(#goals:target) [data-step='goals'],
.brief-page:has(#final:target) [data-step='final'] {
  display: flex;
}

.brief-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.brief-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  padding: 40px;
  background: var(--card-dark);
  border-radius: 24px;
}

.brief-card-attached {
  border-radius: 0 0 24px 24px;
}

.brief-card .pkg-step-head {
  width: 100%;
}

.brief-fields {
  width: min(1015px, calc(100% - 80px));
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brief-textarea {
  min-height: 97px;
  font-weight: 400;
  line-height: 22px;
}

.brief-help {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--help-text);
}

.brief-links-notice {
  padding: 16px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--white);
}

.brief-links-notice span {
  color: var(--orange);
}

.brief-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.brief-actions-end {
  justify-content: flex-end;
}

.btn-brief {
  width: 180px;
  min-width: 0;
}

.btn-brief-submit {
  min-width: 0;
}

.btn-outline {
  color: var(--white);
  border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad-outline) border-box;
}

.brief-brand {
  width: min(1015px, calc(100% - 80px));
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.brief-approach {
  display: flex;
  gap: 40px;
}

.brief-approach-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--choice-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.brief-approach-card input,
.brief-font-option input,
.brief-dropzone input,
.brief-moods input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.brief-approach-card:hover {
  border-color: var(--body-text);
}

.brief-approach-card:has(input:checked),
.brief-approach-card:has(input:checked):hover {
  background: var(--grad-warm);
  border-color: var(--tile-border);
  box-shadow: var(--shadow-md);
}

.brief-approach-card:has(input:focus-visible),
.brief-font-option:has(input:focus-visible),
.brief-dropzone:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.brief-approach-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid transparent;
  box-shadow: var(--shadow-md);
  border-radius: 8px;
}

.brief-approach-icon img {
  width: 40px;
  height: 40px;
}

.brief-approach-icon .brief-approach-ai {
  width: auto;
}

.brief-approach-card:has(input:checked) .brief-approach-icon {
  background: var(--grad-warm);
  border-color: var(--tile-border);
}

.brief-approach-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brief-approach-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}

.brief-approach-sub {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.brief-panel {
  display: none;
  flex-direction: column;
  gap: 36px;
  padding: 40px;
  background: var(--card-50);
  border-radius: 24px;
}

.brief-panel-scratch {
  gap: 40px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.brief-brand:has([value='brand']:checked) .brief-panel-brand,
.brief-brand:has([value='references']:checked) .brief-panel-references,
.brief-brand:has([value='scratch']:checked) .brief-panel-scratch {
  display: flex;
}

.brief-fonts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brief-fonts-pick {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brief-font-options {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.brief-font-option {
  width: 242px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.brief-font-option:hover {
  border-color: var(--body-text);
}

.brief-font-option:has(input:checked),
.brief-font-option:has(input:checked):hover {
  background: var(--grad-warm);
  border-color: var(--tile-border);
}

.brief-font-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--white);
}

.brief-font-sub {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-3);
}

.brief-font-link {
  display: none;
}

.brief-fonts:has([value='google']:checked) .brief-font-upload {
  display: none;
}

.brief-fonts:has([value='google']:checked) .brief-font-link {
  display: flex;
}

.brief-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background: var(--input-bg);
  border: 2px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.brief-dropzone:hover {
  border-color: var(--body-text);
}

.brief-dropzone-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--body-text);
}

.brief-dropzone-sub {
  font-weight: 400;
  font-size: 12px;
  line-height: 19.2px;
  color: var(--muted-3);
}

.brief-upload-row {
  display: flex;
  gap: 36px;
}

.brief-upload-row .field {
  flex: 1 1 0;
  min-width: 0;
}

.brief-refs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brief-refs-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brief-ref {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--card);
  border-radius: 24px;
}

.brief-ref .brief-textarea {
  min-height: 96px;
}

.btn-add-ref {
  width: 280px;
  min-width: 0;
  background: none;
  border: 1px solid var(--border-2);
  color: var(--white);
  font-family: inherit;
}

.brief-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.brief-moods .badge-pill:has(input:checked),
.brief-moods .badge-pill:has(input:checked):hover {
  border-color: var(--orange);
  color: var(--orange);
  background: none;
  transform: none;
}

.brief-moods .badge-pill:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.brief-delivery {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px;
  background: var(--grad-warm);
  border: 1px solid var(--orange-border);
  box-shadow: var(--shadow-md);
  border-radius: 16px;
}

.brief-delivery-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brief-delivery-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--white);
}

.brief-delivery-sub {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--silver);
}

.brief-after {
  align-items: stretch;
  gap: 40px;
}

.brief-after-head {
  display: flex;
  align-items: center;
  gap: 40px;
}

.brief-after-head img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}

.brief-after hr {
  border: none;
  border-top: 1px solid var(--white-08);
}

.brief-after-list {
  width: min(955px, 100%);
  margin-left: auto;
}

.brief-after-list::before {
  top: 14px;
  bottom: 14px;
}

.brief-after-list li {
  font-size: 16px;
  line-height: 28px;
}

.brief-after-list li::before {
  top: 10px;
}

@media (max-width: 1100px) {
  .brief-approach {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .brief-progress {
    width: 100%;
  }

  .brief-progress-track {
    gap: 12px;
  }

  .brief-connector {
    flex: 1;
    width: auto;
  }

  .brief-progress-labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .brief-progress-item {
    width: auto;
    min-width: 0;
  }

  .brief-progress-name {
    font-size: 16px;
    line-height: 22px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .brief-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px;
  }

  .brief-card {
    padding: 24px;
  }

  .brief-fields,
  .brief-brand {
    width: 100%;
  }

  .brief-panel {
    padding: 24px;
  }

  .brief-panel-scratch {
    padding: 0;
  }

  .brief-upload-row {
    flex-direction: column;
    gap: 24px;
  }

  .brief-font-option {
    width: 100%;
  }

  .brief-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .btn-brief,
  .btn-add-ref {
    width: 100%;
  }

  .brief-after-head {
    gap: 24px;
  }

  .brief-after-head img {
    width: 64px;
    height: 64px;
  }
}


/* ===================== pro-design-theme.css ===================== */
/* ============================================================================
   PRO DESIGN SERVICE — MAIN-SITE ALIGNMENT LAYER
   ============================================================================
   The Pro Design pages were built from a standalone Figma export with their own
   palette, their own Google-Fonts Montserrat and a type scale roughly 25-40%
   larger than the rest of phcode.dev. This sheet re-seats them on the main
   site's design system (css/styles.css) so they read as the same product as
   pricing.html / downloads.html / tools/.

   Load order on a Pro Design page MUST be:
     1. thirdparty/bootstrap/bootstrap.min.css   (grid used by the shared footer)
     2. css/styles.css                           (tokens + navbar + footer)
     3. pro-design-service/css/pro-design*.css   (page components)
     4. this file                                (overrides 1-3 where they clash)

   Three things happen here:
     a. Local Montserrat is registered under the plain family name "Montserrat",
        so the existing `font-weight: 500/600/700` declarations in the
        pro-design sheets resolve to the *same woff2 files* the main site uses
        instead of a Google-Fonts copy. No per-rule family rewrite needed.
     b. The pro-design colour tokens are re-pointed at the main site's palette
        (neutral warm greys, not the blue-grey cast of the Figma export).
     c. The type scale is mapped onto styles.css's --font-size-* ramp.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   a. Local Montserrat under the plain family name.

   styles.css exposes Montserrat as one family *per weight*
   ("Montserrat SemiBold", ...) because that is how the site was originally
   built. The pro-design sheets instead say `font-family: Montserrat` +
   `font-weight: 600`. Registering the same files as weighted faces of a single
   "Montserrat" family makes both spellings render identical glyphs, and drops
   the Google Fonts request (and its slightly different metrics) entirely.

   Absolute /assets/ URLs on purpose: byte-identical to the requests styles.css
   already makes, so these are warm cache hits rather than new downloads.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Montserrat-Light.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
       url('../fonts/Montserrat-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
       url('../fonts/Montserrat-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
       url('../fonts/Montserrat-SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
       url('../fonts/Montserrat-Bold.woff') format('woff');
}

/* ---------------------------------------------------------------------------
   b. Re-point the pro-design palette at the main site's.

   Only pro-design's own tokens are redefined — none of styles.css's tokens are
   touched, so the shared navbar and footer keep rendering exactly as they do on
   every other page.
   --------------------------------------------------------------------------- */

:root {
  /* Surfaces: main site is a neutral warm grey (#282727), the Figma export was
     a blue-tinted slate (#25282A / #2A3337). Match the site. */
  /* Near-black canvas, matching .pricing-body on pricing.html (#050505).
     Cards (--card #2a2a2a) then lift off the page exactly as they do there,
     which is what gives the orange and purple plan cards their contrast.
     The alt bands are a subtle lift rather than the old #1f1f1f, which would
     read as a hard stripe against black. */
  --bg: #050505;
  --bg-alt: #0d0d0d;
  --bg-ticker: #0d0d0d;
  --card: #2a2a2a;
  --card-dark: #232222;
  --choice-dark: #232222;
  --input-bg: #1f1f1f;
  --choice-bg: #2a2a2a;
  --border: rgba(255, 255, 255, 0.1);
  --chip-border: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.12);
  --separator: rgba(255, 255, 255, 0.2);

  /* Accent: styles.css --accent-color is already #FE9615, so the orange family
     only needs its warm-tint surfaces neutralised. */
  --orange: var(--accent-color);
  --orange-alt: var(--accent-color);
  --orange-text: #FAAA47;
  --orange-border: rgba(254, 150, 21, 0.35);
  --tile-border: rgba(254, 150, 21, 0.3);
  --step-num: #FAAA47;

  /* Text: the site's light-on-dark ramp. */
  --heading: var(--text-color-light);
  --white: var(--text-color-light);
  --body-text: rgba(255, 255, 255, 0.7);
  --muted: rgba(255, 255, 255, 0.6);
  --muted-2: rgba(255, 255, 255, 0.35);
  --muted-3: rgba(255, 255, 255, 0.6);
  --muted-4: rgba(255, 255, 255, 0.6);
  --muted-5: rgba(255, 255, 255, 0.6);
  --silver: rgba(255, 255, 255, 0.9);
  --placeholder: rgba(255, 255, 255, 0.4);

  /* CTA gradient is the site's, not the export's near-identical variant. */
  --grad-cta: linear-gradient(90deg, #FAAA47 0%, #FA1801 100%);
  --grad-warm: linear-gradient(135deg, #332b22 0%, #2b2422 100%);
  --grad-warm-reverse: linear-gradient(135deg, #2b2422 0%, #332b22 100%);

  --slider-track: #1f1f1f;
  --slider-fill: #FAAA47;
  --slider-ring: #FE9615;
  --switch-off: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */

body.pro-design-body {
  font-family: var(--font-montserrat);
  background-color: var(--bg);
  color: var(--body-text);
}

/* The shared .footer-new in css/styles.css is a warm-grey gradient
   (#1a1a1a → #282727) built for the light-ish pages. pricing.html overrides it
   with a darker one to sit on its #050505 canvas; ours needs the same, and the
   values are copied from .pricing-body .footer-new in css/pricing.css so the
   two footers are identical. Applies to every pro-design-service page, since
   they all load this sheet. */
.pro-design-body .footer-new {
  background: linear-gradient(180deg, #111 0%, #050505 100%);
}

/* The shared navbar is `position: relative` (nav-static), so it occupies real
   layout space. The pro-design pages were written against their own fixed
   header and reserved 88px for it — that reservation is now a gap. */
.pro-design-body .pkg-page {
  padding-top: 0;
}

/* Same reason: the sticky summary no longer has to clear a fixed header. */
.pro-design-body .pkg-summary {
  top: 1.5rem;
}

/* ---------------------------------------------------------------------------
   In-section "Pro Design Service" entry (navbar + footer)

   Carried over from this section's original header: accent-coloured link plus
   the gradient New badge. .badge-new itself is already defined in
   pro-design.css — only the placement inside the *shared* navbar/footer chrome
   needs describing here, since that chrome did not exist when it was written.
   --------------------------------------------------------------------------- */

.pro-design-body .nav-link-pro,
.pro-design-body .footer-link-pro {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.pro-design-body .nav-link-pro {
  font-family: var(--font-montserrat-semi-bold);
  color: var(--accent-color);
}

.pro-design-body .nav-link-pro:hover {
  color: #FAAA47;
}

.pro-design-body .footer-link-pro,
.pro-design-body .footer-links .footer-link-pro {
  font-family: var(--font-montserrat-semi-bold);
  color: var(--accent-color);
}

.pro-design-body .footer-links .footer-link-pro:hover {
  color: #FAAA47;
}

/* The badge is a static chip, not a sibling link — keep it from inheriting the
   hover colour transition or stretching the nav row's height. */
.pro-design-body .badge-new {
  flex: none;
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-xxs);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-color-light);
}

/* ---------------------------------------------------------------------------
   c. Type scale — map onto styles.css's --font-size-* ramp
   --------------------------------------------------------------------------- */

/* Hero, matching .pricing-hero / .downloads-hero / .tools-hero exactly. */
.pro-design-body .eyebrow {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.4;
  letter-spacing: 0.18em;
  color: var(--accent-color);
}

/* Section headings. Mirrors .landing-sections .section-headline on the main
   site — clamp(28px, 4vw, 40px), semibold, -0.01em. The export ran these to
   48px, a full step above anything the main site uses for an h2. */
.pro-design-body .section-title,
.pro-design-body .ready-title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-color-light);
}

/* On the package builders .section-title is the page's h1 rather than a section
   h2, so it takes the hero size the main site uses on pricing/downloads/tools. */
.pro-design-body .pkg-hero .section-title {
  font-size: var(--font-size-xxxl);
  font-family: var(--font-montserrat-bold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Section body copy: 16px/1.6, same as .landing-sections paragraphs. */
.pro-design-body .section-sub {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* The measure matters as much as the size. Every other deck already caps at
   729px or tighter; only the service head opted up to 1028px, which at the new
   type size is ~150 characters a line. Scoped to that one deck so the narrower
   caps the contact and ready sections set for themselves survive. */
.pro-design-body .service-head .section-sub {
  max-width: 760px;
}

/* A page hero's deck is allowed the larger .pricing-hero-subtitle size. */
.pro-design-body .pkg-hero .section-sub,
.pro-design-body .hero-sub {
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* Buttons: the site's CTA chrome (10px radius, semibold 1rem, warm glow on
   hover) rather than the export's 5px / 48px-min-height pill. */
.pro-design-body .btn {
  min-height: 0;
  padding: 0.9rem 1.75rem;
  border-radius: 10px;
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.25;
  transition: box-shadow 0.3s ease, filter 0.3s ease, background-color 0.3s ease;
}

.pro-design-body .btn:hover {
  opacity: 1;
  transform: none;
  filter: brightness(1.05);
}

.pro-design-body .btn-primary,
.pro-design-body .btn-primary:hover,
.pro-design-body .btn-primary:focus {
  background: var(--grad-cta);
  border: none;
  color: var(--text-color-light);
}

.pro-design-body .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(250, 170, 71, 0.4);
}

.pro-design-body .btn-secondary,
.pro-design-body .btn-secondary:hover,
.pro-design-body .btn-secondary:focus {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--text-color-light);
}

.pro-design-body .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pro-design-body .btn-sm {
  padding: 0.65rem 1.25rem;
  font-size: var(--font-size-s);
}

.pro-design-body .btn-google,
.pro-design-body .btn-google:hover,
.pro-design-body .btn-google:focus {
  background: var(--text-color-light);
  color: #3B3B3E;
}

/* ===========================================================================
   Landing page (pro-design-service/index.html)
   ======================================================================== */

/* Sections were full-bleed to a clamp() gutter. Constrain them to 1320px —
   the same tier pricing.html gives its card section at >=1200px — so the two
   639px price cards still fit side by side. */
.pro-design-body .section-pad {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(48px, 6vw, 80px) 15px;
}

.pro-design-body .section-head {
  gap: 1rem;
}

.pro-design-body .section-head-tight {
  gap: 0.75rem;
}

/* Hero. The 88px in the export's top padding reserved space for its own fixed
   header; the shared navbar is in normal flow, so that reservation is a gap. */
.pro-design-body .hero {
  padding: clamp(24px, 4vw, 64px) clamp(20px, 5vw, 60px) clamp(56px, 6vw, 100px);
}

/* Matches .banner-section .brand-text h1 on the main landing page. The export
   ran to 72px — 16px past anything the site uses. */
.pro-design-body .hero-title {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-color-light);
}

.pro-design-body .hero-copy-inner {
  gap: 1rem;
}

/* --- "AI gets you 70% there" split ------------------------------------- */

.pro-design-body .split-pct {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: var(--font-size-xxl);
  line-height: 1.1;
}

.pro-design-body .split-pct-label {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.pro-design-body .split-item span {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
}

/* 32px tick glyphs were sized against 24px labels; against the site's 14px
   body they dwarf the text they mark. */
.pro-design-body .split-item img {
  width: 20px;
  height: 20px;
}

.pro-design-body .split-list {
  gap: 1rem;
}

.pro-design-body .split-card {
  padding: clamp(20px, 2.5vw, 32px);
  gap: 1.25rem;
}

.pro-design-body .delivery-title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-lg);
  line-height: 1.3;
  color: var(--text-color-light);
}

.pro-design-body .delivery-sub {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* --- "What the 30% actually fixes" ------------------------------------- */

.pro-design-body .fixes-head {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  color: var(--text-color-light);
}

.pro-design-body .fix-title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--text-color-light);
}

.pro-design-body .fix-desc,
.pro-design-body .step-desc,
.pro-design-body .why-desc,
.pro-design-body .async-desc,
.pro-design-body .case-note .desc,
.pro-design-body .plan-desc {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Ticker + filter pills --------------------------------------------- */

.pro-design-body .ticker-item span,
.pro-design-body .badge-pill {
  font-family: var(--font-montserrat-medium);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.4;
}

/* --- Case-study before/after ------------------------------------------- */

.pro-design-body .compare-label {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}

.pro-design-body .case-note .kicker {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pro-design-body .case-note .title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.35;
  color: var(--text-color-light);
}

/* --- Pricing cards ------------------------------------------------------ */

/* Card geometry copied from .pricing-card on pricing.html: 440px max, 2.5rem
   padding, 20px radius, 2px hairline border, same drop shadow. The export used
   639px-wide cards with a two-up feature grid inside — nearly half again the
   width of the site's own pricing card, which is what made this section read as
   a different product. */
.pro-design-body .pricing-cards {
  gap: 1.875rem;
  align-items: stretch;
  justify-content: center;
}

.pro-design-body .price-card {
  flex: 0 1 440px;
  width: auto;
  min-width: 0;
  max-width: 440px;
  gap: 1.25rem;
  padding: 2.5rem;
  border-width: 2px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Services grids sit on the same 1140px measure as pricing.html's cards. Inside
   them the per-card 440px cap is lifted so three cards share the row; the
   grid's column sizing keeps them equal. */
.pro-design-body .services-grid,
.pro-design-body .compare-table-wrap {
  max-width: 1140px;
  margin-inline: auto;
}

.pro-design-body .how-grid {
  max-width: 1140px;
  margin-inline: auto;
}

.pro-design-body .how-chip,
.pro-design-body .how-file {
  font-family: var(--font-montserrat-medium);
  font-weight: normal;
}

.pro-design-body .services-grid .price-card {
  flex: none;
  max-width: none;
  width: 100%;
  padding: 2rem;
}

/* Your Studio's CTA is the purple .lifetime-cta gradient from pricing.html.
   Here (not in pro-design.css) because this layer's .btn-primary rule would
   otherwise win on load order. */
.pro-design-body .price-card-studio .btn-studio {
  background: #7c3aed;
  color: #fff;
}

.pro-design-body .price-card-studio .btn-studio:hover {
  background: #6d28d9;
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.5);
}

/* Prices and plan names are white on every card; the card surface, border
   and CTA carry the accent. */
.pro-design-body .services-grid .plan-price .amount,
.pro-design-body .services-grid .plan-name {
  color: var(--text-color-light);
}

.pro-design-body .offers-grid {
  max-width: 1140px;
  margin-inline: auto;
}

.pro-design-body .offer-label {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.3;
}

.pro-design-body .seg-btn,
.pro-design-body .plan-alt {
  font-family: var(--font-montserrat-medium);
  font-weight: normal;
}

.pro-design-body .seg-btn.active {
  font-family: var(--font-montserrat-semi-bold);
}

.pro-design-body .hero-price {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.5;
}

.pro-design-body .hero-trust,
.pro-design-body .services-note,
.pro-design-body .btn-link {
  font-family: var(--font-montserrat-medium);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
}

.pro-design-body .compare-table th {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-xs);
}

.pro-design-body .compare-table td {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
}

.pro-design-body .compare-table td.col-us {
  font-family: var(--font-montserrat-semi-bold);
}

.pro-design-body .why-tagline {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.pro-design-body .plan-head {
  gap: 1rem;
}

/* At 440px the card has ~360px of content; the export's two-up feature grid
   (255px minimums) cannot fit, and pricing.html's own .features-list is a
   single column anyway. */
/* Rows and the items inside them need the same gap, or the single column reads
   as ragged groups of two rather than one even list. */
.pro-design-body .plan-features,
.pro-design-body .plan-feature-row {
  gap: 0.75rem;
}

.pro-design-body .plan-feature {
  flex: 1 1 100%;
  min-width: 0;
}

.pro-design-body .plan-feature img,
.pro-design-body .plan-meta-item img {
  width: 16px;
  height: 16px;
}

/* Three meta chips across 360px need to wrap rather than be squeezed. */
.pro-design-body .plan-meta {
  justify-content: flex-start;
  gap: 0.5rem 1.25rem;
}

/* On the landing page's cards the head is centred (as on pricing.html), so
   the meta row under the price centres with it. */
.pro-design-body .services-grid .plan-meta {
  justify-content: center;
}

.pro-design-body .services-grid .plan-meta-item {
  flex: 0 0 auto;
}

.pro-design-body .plan-price .per {
  padding-bottom: 0.35rem;
}

/* .plan-name / .plan-tag / .amount are deliberately set to the exact values
   pricing.html uses for .plan-name / .plan-tagline / .price-amount, so the two
   pricing surfaces on the site read as one component. */
.pro-design-body .plan-name {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  color: var(--text-color-light);
}

.pro-design-body .plan-tag {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
}

/* 3.5rem is exactly .price-amount on pricing.html. The per-card orange/indigo
   colouring is left alone on purpose — it keys the amount to its card's border
   and distinguishes the two tracks, and orange is the site accent anyway. */
.pro-design-body .plan-price .amount {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: 3.5rem;
  line-height: 1;
}

.pro-design-body .plan-price .per {
  font-family: var(--font-montserrat-medium);
  font-weight: normal;
  font-size: var(--font-size-lg);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.6);
}

.pro-design-body .plan-badge,
.pro-design-body .plan-discounts .disc,
.pro-design-body .plan-note {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.pro-design-body .plan-meta-item span,
.pro-design-body .plan-feature span {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
}

/* --- How it works + async callout -------------------------------------- */

.pro-design-body .step-num,
.pro-design-body .why-num {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.2;
}

.pro-design-body .step-title,
.pro-design-body .why-title,
.pro-design-body .async-title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--text-color-light);
}

.pro-design-body .step-arrow {
  width: 28px;
  height: 28px;
  opacity: 0.6;
}

/* Title/description pairs sit in plain <div> wrappers with no gap — the export
   relied on its larger type's line-height to separate them. At the site's
   14-16px that separation disappears, so put it back explicitly. */
.pro-design-body .fix-title,
.pro-design-body .step-title,
.pro-design-body .why-title,
.pro-design-body .async-title,
.pro-design-body .delivery-title,
.pro-design-body .case-note .title {
  margin-bottom: 0.35rem;
}

/* --- Testimonials ------------------------------------------------------- */

/* The export's card was two columns — a 125px portrait rail beside the quote.
   Inside a 403px card that leaves ~190px for the text, which at the site's 14px
   wraps every three or four words. Restack it the conventional way: quote on
   top, a compact attribution row beneath. */
.pro-design-body .quote-card {
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: flex-end;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 16px;
}

.pro-design-body .quote-person {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.1rem;
  width: auto;
}

.pro-design-body .quote-person .avatar {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 44px;
  height: 44px;
}

.pro-design-body .quote-person .name,
.pro-design-body .quote-person .role,
.pro-design-body .quote-stars {
  grid-column: 2;
  text-align: left;
}

.pro-design-body .quote-stars img {
  width: 13px;
  height: 13px;
}

/* Sits behind the quote now that the quote owns the full card width. */
.pro-design-body .quote-mark {
  top: 1.25rem;
  right: 1.25rem;
  width: 28px;
  opacity: 0.25;
}

.pro-design-body .quote-person .name {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--text-color-light);
}

.pro-design-body .quote-person .role {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.pro-design-body .quote-text {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

/* --- FAQ ---------------------------------------------------------------- */

.pro-design-body .faq-q {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--text-color-light);
}

.pro-design-body .faq-a {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

/* "Email us" was indigo, the export's secondary accent. Inline links on the
   main site are the orange accent. */
.pro-design-body .faq-sub strong,
.pro-design-body .faq-sub a {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  color: var(--accent-color);
}

/* ---------------------------------------------------------------------------
   Package builder — sizing + rhythm
   --------------------------------------------------------------------------- */

/* Centre the builder on the same measure as the rest of the site instead of
   running full-bleed to a clamp() gutter. Bootstrap's .container tops out at
   1140px content + 15px gutters, which is what pricing.html's hero,
   downloads.html and every tools/ page are laid out on — so 1170px total. */
.pro-design-body .pkg-hero,
.pro-design-body .pkg-layout {
  max-width: 1170px;
  margin-inline: auto;
}

.pro-design-body .pkg-hero {
  gap: 0.75rem;
  padding: 3rem 15px 1rem;
}

.pro-design-body .pkg-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  padding: 2.5rem 15px 4rem;
}

.pro-design-body .pkg-steps {
  gap: 2.5rem;
}

/* The export laid a step out as a flex column with `align-items: flex-end`, so
   the step number sat in a left gutter that the step's *content* ignored — the
   heading started ~56px to the right of the cards underneath it. Re-lay it as a
   two-column grid so the number keeps its gutter and the heading, hint and
   content all share one left edge. */
.pro-design-body .pkg-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  column-gap: 1rem;
  row-gap: 1.5rem;
}

.pro-design-body .pkg-step-tight {
  row-gap: 1.25rem;
}

/* Dissolve the head wrapper so its two children become direct grid items: the
   number lands in the gutter column, the text block in the content column. */
.pro-design-body .pkg-step-head {
  display: contents;
}

.pro-design-body .pkg-step > *,
.pro-design-body .pkg-step-text {
  grid-column: 2;
}

.pro-design-body .pkg-step-num {
  grid-column: 1;
  grid-row: 1;
  margin-top: 1px;
}

.pro-design-body .pkg-step-num {
  width: 36px;
  height: 36px;
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1;
  color: var(--accent-color);
  border-color: rgba(254, 150, 21, 0.5);
}

.pro-design-body .pkg-step-text {
  gap: 0.35rem;
}

.pro-design-body .pkg-step-title {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: var(--font-size-xl);
  line-height: 1.25;
  color: var(--text-color-light);
}

.pro-design-body .pkg-step-hint {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* Service choice cards — the export's 24px title inside a 40px-padded card is
   what forced "AI Output Polish" and "Pro Design Expert" to wrap mid-phrase. */
.pro-design-body .pkg-choices {
  gap: 1.25rem;
}

.pro-design-body .pkg-choice {
  gap: 0.85rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pro-design-body .pkg-choice:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.pro-design-body .pkg-choice.selected,
.pro-design-body .pkg-choice.selected:hover {
  border-color: var(--accent-color);
  box-shadow: 0 4px 20px rgba(254, 150, 21, 0.15);
}

.pro-design-body .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.pro-design-body .icon-tile img {
  width: 22px;
}

.pro-design-body .icon-tile-lg {
  width: 44px;
  height: 44px;
}

.pro-design-body .icon-tile-lg img {
  height: 24px;
}

.pro-design-body .pkg-choice-title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.35;
  color: var(--text-color-light);
}

.pro-design-body .pkg-choice-sub {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* Page slider */
.pro-design-body .pkg-pages {
  gap: 1.5rem;
}

.pro-design-body .pkg-count strong {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: var(--font-size-xl);
  line-height: 1;
  color: var(--accent-color);
}

.pro-design-body .pkg-count span {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

.pro-design-body .pkg-range {
  height: 28px;
}

.pro-design-body .pkg-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
}

.pro-design-body .pkg-range::-moz-range-track,
.pro-design-body .pkg-range::-moz-range-progress {
  height: 8px;
  border-radius: 4px;
}

.pro-design-body .pkg-range::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  background: radial-gradient(circle, var(--text-color-light) 0 6px, var(--slider-ring) 6px 7px, var(--slider-fill) 7px);
}

.pro-design-body .pkg-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, var(--text-color-light) 0 6px, var(--slider-ring) 6px 7px, var(--slider-fill) 7px);
}

.pro-design-body .pkg-ticks {
  width: calc(100% - 29px);
  font-family: var(--font-montserrat-medium);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

.pro-design-body .pkg-ticks span.on {
  color: var(--text-color-light);
}

/* Inline notices */
.pro-design-body .pkg-notice {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.4;
}

.pro-design-body .pkg-notice-green {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

/* Upsell / async / guarantee cards */
.pro-design-body .pkg-upsell,
.pro-design-body .pkg-async,
.pro-design-body .pkg-guarantee,
.pro-design-body .pkg-note,
.pro-design-body .pkg-heads-up {
  padding: 1.25rem;
  border-radius: 12px;
}

/* These cards centre their icon against the whole text block, which reads as
   misaligned the moment the copy wraps to more than one line. Pin the icon to
   the first line instead. */
.pro-design-body .pkg-upsell,
.pro-design-body .pkg-async,
.pro-design-body .pkg-guarantee,
.pro-design-body .pkg-note,
.pro-design-body .pkg-heads-up {
  align-items: flex-start;
}

.pro-design-body .pkg-upsell,
.pro-design-body .pkg-async,
.pro-design-body .pkg-guarantee {
  gap: 1rem;
}

.pro-design-body .pkg-upsell-body {
  gap: 0.85rem;
}

.pro-design-body .pkg-upsell-title,
.pro-design-body .pkg-async-title,
.pro-design-body .pkg-guarantee-title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.pro-design-body .pkg-upsell-title,
.pro-design-body .pkg-async-title {
  color: var(--text-color-light);
}

.pro-design-body .pkg-guarantee-title {
  color: var(--accent-color);
}

/* In the 340px summary rail an icon + text row leaves ~190px for the heading,
   which "Satisfaction guaranteed" only just fits in English and no translation
   will. Stack it instead of relying on that margin. */
.pro-design-body .pkg-summary .pkg-guarantee {
  flex-direction: column;
  gap: 0.75rem;
}

.pro-design-body .pkg-upsell-desc,
.pro-design-body .pkg-async-desc,
.pro-design-body .pkg-after-desc,
.pro-design-body .pkg-guarantee-desc,
.pro-design-body .pkg-note {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.pro-design-body .pkg-async {
  background: rgba(255, 255, 255, 0.06);
}

.pro-design-body .pkg-note,
.pro-design-body .pkg-guarantee {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pro-design-body .pkg-note img,
.pro-design-body .pkg-heads-up img,
.pro-design-body .pkg-upsell .icon-tile img,
.pro-design-body .pkg-async .icon-tile img,
.pro-design-body .pkg-guarantee .icon-tile img {
  width: 20px;
  height: auto;
}

/* Optically centre the bare icons on the first text line (they are flex-start
   aligned above, and a 20px glyph sits high against a 22px line box). */
.pro-design-body .pkg-note img,
.pro-design-body .pkg-heads-up img {
  margin-top: 1px;
}

.pro-design-body .pkg-heads-up {
  background: rgba(252, 191, 72, 0.08);
  border-color: rgba(252, 191, 72, 0.4);
}

.pro-design-body .pkg-heads-up div {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.6;
}

.pro-design-body .pkg-heads-up strong {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.4;
}

/* Code add-on row */
.pro-design-body .pkg-addon {
  gap: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.pro-design-body .pkg-addon-main {
  gap: 1rem;
}

.pro-design-body .pkg-addon-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

.pro-design-body .pkg-addon-icon img {
  width: 26px;
  height: 26px;
}

.pro-design-body .pkg-addon-text {
  gap: 0.35rem;
}

.pro-design-body .pkg-addon-price {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.3;
  color: var(--accent-color);
}

.pro-design-body .switch {
  width: 52px;
  height: 30px;
}

.pro-design-body .switch-track::after {
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-width: 1.5px;
}

.pro-design-body .switch input:checked + .switch-track::after {
  transform: translateX(22px);
}

/* "What happens after you pay" */
.pro-design-body .pkg-after {
  gap: 1.75rem;
  padding: 2rem;
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

/* `align-items: center` left the three cards at three different heights
   (their copy is not the same length). Stretch them to a common height and
   centre only the arrows between them. */
.pro-design-body .pkg-after-steps {
  align-items: stretch;
  gap: 1rem;
}

.pro-design-body .pkg-after .step-arrow {
  align-self: center;
}

.pro-design-body .pkg-after-card {
  gap: 0.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.pro-design-body .pkg-after-body {
  gap: 0.35rem;
}

.pro-design-body .pkg-after-num {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.2;
  color: #FAAA47;
}

.pro-design-body .pkg-after-title {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  line-height: 1.35;
  color: var(--accent-color);
}

.pro-design-body .pkg-after .step-arrow {
  width: 28px;
  height: 28px;
  opacity: 0.6;
}

/* Price summary rail */
.pro-design-body .pkg-summary {
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pro-design-body .pkg-summary-title {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: var(--font-size-xl);
  line-height: 1.25;
  color: var(--text-color-light);
}

.pro-design-body .pkg-summary-rows {
  gap: 0.85rem;
  padding-bottom: 0;
}

.pro-design-body .pkg-summary-label {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.pro-design-body .pkg-summary-value {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.5;
  color: var(--text-color-light);
}

.pro-design-body .pkg-summary-value.discount,
.pro-design-body .pkg-summary-value.included {
  color: #4ade80;
}

.pro-design-body .pkg-summary hr {
  margin: 0.4rem 0;
  border-top-color: rgba(255, 255, 255, 0.1);
}

.pro-design-body .pkg-summary-total {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-lg);
  line-height: 1.3;
  color: var(--text-color-light);
}

.pro-design-body .pkg-summary-amount {
  gap: 0.5rem;
}

/* Mirrors .price-amount on pricing.html — the one place a big number is
   allowed to shout. */
.pro-design-body .pkg-summary-amount strong {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--text-color-light);
}

.pro-design-body .pkg-summary-amount span {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-xs);
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

.pro-design-body .pkg-summary-item-name {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-color-light);
}

.pro-design-body .pkg-note {
  gap: 0.75rem;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.pro-design-body .pkg-guarantee-desc {
  font-size: var(--font-size-xs);
}

/* ---------------------------------------------------------------------------
   Sign-in drawer
   --------------------------------------------------------------------------- */

.pro-design-body .login-panel {
  gap: 2rem;
  padding: 2rem;
  background: #1f1f1f;
}

.pro-design-body .login-top,
.pro-design-body .login-form {
  gap: 2rem;
}

.pro-design-body .login-title {
  font-family: var(--font-montserrat-bold);
  font-weight: normal;
  font-size: var(--font-size-xl);
  line-height: 1.25;
  color: var(--text-color-light);
}

.pro-design-body .login-sub,
.pro-design-body .login-hint,
.pro-design-body .login-or,
.pro-design-body .login-note,
.pro-design-body .login-terms {
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.pro-design-body .login-terms a {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  color: var(--accent-color);
}

.pro-design-body .login-note img {
  width: 20px;
  height: 20px;
}

.pro-design-body .field {
  gap: 0.5rem;
}

.pro-design-body .field-label {
  font-family: var(--font-montserrat-semi-bold);
  font-weight: 600;
  font-size: var(--font-size-s);
  line-height: 1.4;
  color: var(--text-color-light);
}

.pro-design-body .input {
  min-height: 44px;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-family: var(--font-montserrat);
  font-weight: normal;
  font-size: var(--font-size-s);
  line-height: 1.5;
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-color-light);
}

.pro-design-body .input-wrap .input {
  padding-left: 2.75rem;
}

.pro-design-body .input-icon {
  width: 18px;
  height: 18px;
}

.pro-design-body .input:focus {
  border-color: var(--accent-color);
}

/* ---------------------------------------------------------------------------
   Responsive — mirror the main site's ≤768px step-down
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .pro-design-body .pkg-layout {
    grid-template-columns: 1fr;
  }

  .pro-design-body .pkg-summary {
    position: static;
  }
}

@media (max-width: 768px) {
  .pro-design-body .section-title {
    font-size: var(--font-size-xxl);
  }

  .pro-design-body .section-sub {
    font-size: var(--font-size-md);
  }

  .pro-design-body .pkg-hero {
    padding-top: 2.5rem;
  }

  .pro-design-body .pkg-step-title {
    font-size: var(--font-size-lg);
  }

  .pro-design-body .pkg-choice-title {
    font-size: var(--font-size-md);
  }

  .pro-design-body .pkg-summary-amount strong {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  /* Tiles are ~165px wide two-up; the md label would wrap over the icon.
     Lives here, not in pro-design.css, because this layer's
     .pro-design-body .offer-label rule would otherwise win. */
  .pro-design-body .offer-label {
    font-size: var(--font-size-s);
  }

  /* Narrow the step-number gutter — 52px of the 390px viewport is too much to
     spend on it once the cards inside are also padded. */
  .pro-design-body .pkg-step {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  .pro-design-body .pkg-step-num {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-xs);
  }

  .pro-design-body .pkg-after {
    padding: 1.25rem;
  }
}