/* Mobile-only editorial pass. Desktop inherits the original landing unchanged. */
@media (max-width: 640px) {
  html { scroll-behavior: auto; }
  /* No viewport units here: mobile browser chrome must not resize the hero while scrolling. */
  .hero { height: 780px; min-height: 780px; max-height: 780px; }
  .hero-stage { height: 780px; }
  /* Give the character more air above the copy instead of letting it sit in the text area. */
  .stagefig { bottom: 72px; height: 625px; transition: none; will-change: auto; }
  .stagefig.pos-center { left: 66%; --s: .9; }
  .hero-watermark { top: 17%; padding-left: 0; align-items: flex-start; justify-content: flex-start; flex-direction: column; font-size: 32vw; line-height: .86; }
  .hero-watermark span + span { margin: .14em 0 0 .04em; font-size: .78em; }
  .hero-creator { display: none; }
  .hero-overlay { background: linear-gradient(90deg, rgba(245,243,238,.94) 0%, rgba(245,243,238,.66) 52%, rgba(245,243,238,0) 76%); }
  .hero-content { left: 18px; right: 18px; bottom: 148px; max-width: 322px; padding: 0; background: transparent; }
  .hero-badge { display: none; }
  .hero-headline { font-size: 29px; line-height: 1.05; margin-bottom: 11px; text-shadow: 0 0 2px rgba(245,243,238,.98), 0 0 12px rgba(245,243,238,.94), 0 0 24px rgba(245,243,238,.72); }
  .hero-desc { max-width: 250px; margin-bottom: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 12.5px; line-height: 1.42; text-shadow: 0 0 8px rgba(245,243,238,.98), 0 0 17px rgba(245,243,238,.88); }
  /* Header registration is intentionally removed; the two role CTAs stay in the hero. */
  .hero-ctas { display: flex; gap: 8px; margin-bottom: 10px; max-width: 250px; }
  .btn-hero-primary, .btn-hero-secondary { padding: 11px 14px; border-radius: 11px; font-size: 11px; }
  .btn-hero-primary .hint, .btn-hero-secondary .hint { display: none; }
  .btn-hero-primary,.btn-hero-secondary { min-height: 44px; padding: 10px 15px; border-radius: 10px; font-size: 11px; }
  .hero-fine { display: none; }
  /* Header: logo, entry, then the menu at the far right. */
  nav { align-items: center; }
  .nav-actions { margin-left: auto; gap: 14px; }
  .btn-ghost-nav { order: 1; padding: 0; border: 0; background: transparent; color: var(--s800); font-size: 12px; }
  .btn-dark-nav { display: none; }
  .nav-burger { order: 2; margin: 0; }
  /* Manual character controls sit under the active character, not over the copy. */
  .hero-creator { display: block; right: 20px; bottom: 25px; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-creator-top,.hero-creator-desc,.hero-dots { display: none; }
  .hero-creator-nav { gap: 10px; }
  .hero-arrow { width: 42px; height: 42px; border: 1px solid rgba(15,23,42,.16); background: rgba(255,255,255,.92); color: var(--s800); box-shadow: none; }
  .hero-arrow:hover { background: #fff; color: var(--indigo); transform: none; }

  .mkt-section,.hw-section,.esc-section,.cr-section,.pr-section,.faq-section,.cta-section { padding: 58px 18px; min-height: 0; }
  .section-header { margin-bottom: 28px; }
  .section-label { font-size: 10px; letter-spacing: .08em; }
  .section-title,.esc-title,.cr-title,.pr-title,.cta-title { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.025em; }
  .mkt-sub { margin-top: 13px; font-size: 14px; line-height: 1.5; }

  .mkt-orb1,.mkt-orb2,.mkt-orb3,.hw-orb1,.hw-orb2,.esc-orb1,.esc-orb2,.cr-orb1,.cr-orb2,.pr-orb1,.pr-orb2,.faq-orb1,.faq-orb2,.cta-glow,.cta-orb { display: none; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .svc-card { min-height: 166px; padding: 16px 14px; border-radius: 16px; box-shadow: none; background: #fff; }
  .svc-card.svc-feat { background: var(--indigo); }
  .svc-card::before,.svc-card::after,.hw-card::before,.hw-card::after { display: none; }
  .svc-card:hover,.hw-card:hover { transform: none; box-shadow: none; }
  .svc-top { margin-bottom: 14px; }
  .svc-ico { width: 38px; height: 38px; border-radius: 11px; }
  .svc-ico svg { width: 21px; height: 21px; }
  .svc-name { font-size: 16px; line-height: 1.2; margin-bottom: 13px; }
  .svc-list { display: none; }
  .svc-more { font-size: 9px; line-height: 1.35; letter-spacing: .02em; }
  .svc-badge { font-size: 8px; padding: 4px 5px; }

  .hw-tabs { margin-bottom: 20px; }
  .hw-grid { gap: 10px; }
  .hw-card { padding: 18px; min-height: 0; border-radius: 15px; box-shadow: none; background: #fff; opacity: 1 !important; transform: none !important; transition: none !important; }
  .hw-top { margin-bottom: 10px; }
  .hw-ico { width: 38px; height: 38px; border-radius: 10px; }
  .hw-ico svg { width: 20px; height: 20px; }
  .hw-num { font-size: 26px; }
  .hw-name { font-size: 18px; margin-bottom: 8px; }
  .hw-desc { font-size: 14px; line-height: 1.48; margin-bottom: 0; }
  .hw-hl { display: none; }

  .esc-wrap { grid-template-columns: 1fr; gap: 0; }
  .esc-section .esc-card { display: none; }
  .esc-sub { font-size: 16px; line-height: 1.5; }
  .esc-chips { gap: 0; margin: 22px 0; }
  .esc-chip { padding: 12px 0; border: 0; border-bottom: 1px solid rgba(15,23,42,.12); border-radius: 0; background: transparent; font-size: 14px; }
  .fmt-band { margin-top: 42px; }
  .fmt-band-head { margin-bottom: 18px; }
  .fmt-grid { gap: 10px; }
  .fmt-card { padding: 20px; border-radius: 16px; box-shadow: none; }
  .fmt-list { display: none; }
  .fmt-name { margin-top: 10px; font-size: 18px; }
  .fmt-desc,.fmt-foot { font-size: 14px; line-height: 1.45; }

  .why-section,.lgl-section,.aud-section,.ai-section,.ait-section,.pm-section { display: none; }
  .cr-section .esc-card { display: none; }
  .cr-wrap { grid-template-columns: 1fr; }
  .cr-sub { font-size: 16px; line-height: 1.5; }
  .cr-section [style*="font-size:36px"] { font-size: 29px !important; }

  .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pr-card { padding: 19px 7px; min-height: 146px; border-radius: 15px; box-shadow: none; }
  .pr-num { font-size: 30px; }
  .pr-label { font-size: 12px; line-height: 1.2; }
  .pr-desc { font-size: 11px; line-height: 1.35; }
  .pr-note { margin-top: 14px; padding: 16px; box-shadow: none; }
  .pr-note-text { font-size: 13px; line-height: 1.45; }

  .faq-section { padding-bottom: 48px; }
  .faq-item { border-radius: 0; }
  .faq-item summary { padding: 17px 0; font-size: 16px; line-height: 1.4; }
  .faq-item:nth-child(n+6) { display: none; }
  .faq-a { padding: 0 0 17px; font-size: 14px; line-height: 1.5; }
  .cta-section { padding: 54px 18px; }
  .cta-desc { font-size: 15px; line-height: 1.5; }
  .cta-buttons { gap: 10px; }
  .footer { padding: 40px 18px 24px; }
}

/* The generated hero watermark is split into words so mobile can stack it. */
@media (min-width: 641px) { .hero-watermark span + span { margin-left: .2em; } }
@media (max-width: 360px) {
  .hero { height: 740px; min-height: 740px; max-height: 740px; }
  .hero-stage { height: 740px; }
  .stagefig { height: 590px; }
  .hero-headline { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

/* A single practical section for both sides of the marketplace. */
.audience-section { background: #eef7f1; }
.audience-wrap { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; position: relative; }
.audience-head .cr-title { margin-top: 14px; }
.audience-tabs { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid #dce7e1; border-radius: 12px; background: #fff; }
.audience-tab { border: 0; border-radius: 8px; padding: 11px 15px; color: var(--s600); background: transparent; font: 700 12px 'Manrope',sans-serif; cursor: pointer; }
.audience-tab.active { background: var(--indigo); color: #fff; }
.audience-pane { padding: 30px; border: 1px solid #dce7e1; border-radius: 20px; background: #fff; }
.audience-pane h3 { margin: 0 0 10px; color: var(--s900); font: 800 23px/1.16 'Bricolage Grotesque',sans-serif; }
.audience-pane p { margin: 0 0 20px; color: var(--s600); font-size: 14px; line-height: 1.6; }
.audience-list { display: grid; gap: 12px; padding: 0; margin: 0 0 24px; list-style: none; }
.audience-list li { display: flex; gap: 10px; color: var(--s700); font-size: 14px; font-weight: 600; line-height: 1.45; }
.audience-list li::before { content: '✓'; color: #10b981; font-weight: 800; }
.audience-action { font-family: 'Manrope',sans-serif; border: 0; cursor: pointer; }
@media (max-width:640px) {
  .audience-section { display: block; padding: 54px 18px; }
  .audience-wrap { display: block; }
  .audience-head .cr-title { font-size: 28px !important; }
  .audience-tabs { display: flex; width: 100%; margin: 4px 0 18px; }
  .audience-tab { flex: 1; padding: 11px 8px; }
  .audience-pane { padding: 22px 18px; border-radius: 16px; }
  .audience-pane h3 { font-size: 20px; }
  .audience-pane p,.audience-list li { font-size: 14px; }
}

/* Brandbook typography pass. The hero deliberately keeps its approved type treatment. */
@font-face { font-family: 'Shot Cut Inter'; src: url('/v1-assets/inter-regular.ttf') format('truetype'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Shot Cut Inter'; src: url('/v1-assets/inter-bold.ttf') format('truetype'); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Shot Cut Accent'; src: url('/v1-assets/cormorant-garamond-italic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }

.mkt-section,.hw-section,.esc-section,.audience-section,.pr-section,.faq-section,.ai-section,.ait-section,.pm-section,.cta-section,footer {
  font-family: 'Shot Cut Inter', Inter, sans-serif;
}
.mkt-section .section-title,.hw-section .section-title,.esc-title,.audience-section .cr-title,.pr-section .section-title,.faq-section .section-title,.ai-title,.ait-section .section-title,.pm-title,.cta-title,
.svc-name,.hw-name,.esc-card-title,.esc-node-title,.fmt-band-t,.fmt-name,.audience-pane h3,.pr-label,.ait-name,.faq-item summary,.pm-step-title {
  font-family: 'Shot Cut Inter', Inter, sans-serif !important;
  font-weight: 800;
}
.mkt-sub,.mkt-pill,.svc-list li,.hw-desc,.esc-sub,.esc-chip,.audience-pane p,.audience-list li,.pr-desc,.pr-note-text,.faq-a,.ai-card-desc,.ait-desc,.pm-sub,.pm-step-desc,.cta-desc,
.section-label,.esc-badge,.cr-badge,.ai-badge,.pm-badge,.cta-label,.audience-tab,.btn-mkt,.ai-btn,.audience-action,.btn-cta-primary,.btn-cta-secondary {
  font-family: 'Shot Cut Inter', Inter, sans-serif;
}
/* Cormorant Garamond is a freely available editorial analogue for the brandbook's handwritten accent. */
.mkt-section .section-title span,.hw-section .section-title span,.esc-section .esc-accent,.audience-section .cr-accent,.ai-title .accent,.ait-section .section-title span,.pm-accent,.cta-title .accent {
  font-family: 'Shot Cut Accent', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  text-transform: none;
  letter-spacing: -.045em;
}

/* Pricing explanation: a clear editorial band rather than another soft card. */
.pr-note {
  background: #3E4E52;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 22px 26px;
  gap: 18px;
}
.pr-note-ico { width: 44px; height: 44px; border-radius: 0; background: #64E69F; color: #3E4E52; }
.pr-note-text { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.55; }
@media (max-width:640px) {
  .pr-note { padding: 18px; gap: 14px; }
  .pr-note-ico { width: 38px; height: 38px; }
  .pr-note-text { font-size: 13px; line-height: 1.5; }
}

/* The commission note is treated as an editorial fact, not a notification. */
.pr-note {
  display: grid;
  grid-template-columns: minmax(230px,.92fr) 1.5fr;
  align-items: stretch;
  gap: 0;
  max-width: 980px;
  padding: 0;
  background: #fff;
  color: #3E4E52;
  border: 1px solid rgba(8,124,175,.24);
  border-radius: 18px;
  overflow: hidden;
}
.pr-note-lead {
  display: flex;
  align-items: center;
  padding: 28px 30px;
  background: #087caf;
  color: #fff;
  font-family: 'Shot Cut Inter', Inter, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.pr-note-tail {
  display: flex;
  align-items: center;
  padding: 28px 30px;
  background: #eaf8f7;
  color: #3E4E52;
  font-family: 'Shot Cut Inter', Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}
@media (max-width:640px) {
  .pr-note { display: block; margin-top: 22px; }
  .pr-note-lead { padding: 20px 20px 18px; border: 0; font-size: 18px; }
  .pr-note-tail { padding: 17px 20px 20px; font-size: 13px; }
}

/* FAQ becomes an editorial index: questions lead, answers simply unfold. */
.faq-section { background: #eaf8f7; }
.faq-wrap { max-width: 1080px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 44px; row-gap: 0; counter-reset: faq; }
.faq-item {
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(62,78,82,.35);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  counter-increment: faq;
}
.faq-item:last-child { border-bottom: 1px solid rgba(62,78,82,.35); }
.faq-item::before {
  content: '0' counter(faq);
  position: absolute;
  top: 20px;
  left: 0;
  color: #087caf;
  font: 800 12px/1 'Shot Cut Inter', Inter, sans-serif;
  letter-spacing: .04em;
}
.faq-item summary {
  min-height: 76px;
  padding: 18px 36px 18px 38px;
  color: #3E4E52;
  font-family: 'Shot Cut Inter', Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
}
.faq-item summary:hover { color: #087caf; }
.faq-chevron { color: #087caf; }
.faq-item[open] { background: #fff; border-color: #0d8c9a; box-shadow: none; }
.faq-item[open]::before { color: #3E4E52; }
.faq-a { padding: 0 38px 22px; color: #3E4E52; font-family: 'Shot Cut Inter', Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; }
@media (max-width:640px) {
  .faq-section { background: #fff; border-top: 6px solid #0d8c9a; }
  .faq-wrap { display: block; }
  .faq-item:nth-child(n+6) { display: block; }
  .faq-item::before { top: 18px; }
  .faq-item summary { min-height: 68px; padding: 16px 34px 16px 34px; font-size: 15px; }
  .faq-a { padding: 0 34px 18px; font-size: 13px; }
}

/* Marketplace as an editorial collection of working scenes. */
.mkt-section { background: #fff; }
.mkt-orb1,.mkt-orb2,.mkt-orb3 { display: none; }
.mkt-section .section-header { max-width: 780px; margin-left: auto; margin-right: auto; }
.mkt-stats { margin-top: 18px; }
.svc-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-width: 1152px; }
.svc-card {
  --photo: url('/v1-assets/market-ugc-v1.png');
  --veil: #3E4E52;
  position: relative;
  min-height: 316px;
  padding: 25px 24px;
  overflow: hidden;
  isolation: isolate;
  background: #3E4E52;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: #fff;
}
.svc-card::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--veil);
  opacity: .74;
}
.svc-card::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: var(--photo) center / cover no-repeat;
  filter: none;
  animation: none;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.svc-card > * { position: relative; z-index: 2; }
.svc-card:hover { transform: none; box-shadow: none; }
.svc-card:hover::before { opacity: .63; }
.svc-card:hover::after { transform: scale(1.055); }
.svc-card.market-revealed { animation: market-card-reveal .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes market-card-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.svc-card.svc-feat { background: #3E4E52; border: 0; box-shadow: none; }
.svc-card:nth-child(1) { --photo: url('/v1-assets/market-ugc-v1.png'); --veil: #0D8C9A; grid-column: span 2; min-height: 360px; }
.svc-card:nth-child(2) { --photo: url('/v1-assets/market-reels-v1.png'); --veil: #3E4E52; }
.svc-card:nth-child(3) { --photo: url('/v1-assets/market-ai-v1.png'); --veil: #0D8C9A; }
.svc-card:nth-child(4) { --photo: url('/v1-assets/market-edit-v1.png'); --veil: #3E4E52; }
.svc-card:nth-child(5) { --photo: url('/v1-assets/market-design-v1.png'); --veil: #0D8C9A; }
.svc-card:nth-child(6) { --photo: url('/v1-assets/market-audio-v1.png'); --veil: #3E4E52; grid-column: 1 / -1; min-height: 272px; }
.svc-top { justify-content: flex-end; margin-bottom: 16px; }
.svc-ico { display: none; }
.svc-badge { background: transparent; border: 1px solid rgba(255,255,255,.62); border-radius: 0; color: #fff; padding: 5px 8px; }
.svc-name { max-width: 300px; margin-top: auto; margin-bottom: 14px; color: #fff; font-family: 'Shot Cut Inter', Inter, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.045em; line-height: 1.03; }
.svc-list { gap: 6px; margin: 0 0 15px; max-width: 410px; }
.svc-list li { color: rgba(255,255,255,.92); font-size: 13px; line-height: 1.35; }
.svc-list li::before { width: 4px; height: 4px; top: 7px; background: #64E69F; opacity: 1; }
.svc-more { color: #fff; font-size: 10px; letter-spacing: .09em; }
.svc-card:hover .svc-more { gap: 6px; }
.mkt-cta { margin-top: 28px; }
.mkt-cta .btn-mkt { padding: 0 0 4px; border-radius: 0; background: transparent; color: #3E4E52; box-shadow: none; border-bottom: 1px solid #3E4E52; }
.mkt-cta .btn-mkt:hover { background: transparent; color: #0d8c9a; border-color: #0d8c9a; transform: none; box-shadow: none; }
@media (max-width:640px) {
  .mkt-section { padding-left: 0; padding-right: 0; overflow: hidden; }
  .mkt-section .section-header,.mkt-stats { margin-left: 18px; margin-right: 18px; }
  .svc-grid {
    display: flex;
    grid-template-columns: none;
    width: auto;
    margin: 0;
    padding: 0 18px 2px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .svc-grid::-webkit-scrollbar { display: none; }
  .svc-card,.svc-card:nth-child(n) {
    flex: 0 0 82vw;
    min-height: 320px;
    padding: 22px 20px;
    grid-column: auto;
    scroll-snap-align: start;
    border-radius: 7px;
  }
  .svc-card::before { opacity: .72; }
  .svc-card:hover::before { opacity: .72; }
  .svc-name { max-width: 260px; font-size: 23px; }
  .svc-list { display: flex; }
  .svc-list li { font-size: 12px; }
  .mkt-cta { margin: 22px 18px 0; text-align: left; }
}

/* Logo palette experiment.  The approved hero remains intentionally untouched. */
:root {
  --sc-deep: #063f67;
  --sc-blue: #087caf;
  --sc-turquoise: #0d8c9a;
  --sc-mint: #64e69f;
  --sc-mist: #eaf8f7;
  --sc-line: #b9e2df;
}
.mkt-section,.hw-section,.esc-section,.audience-section,.pr-section,.faq-section,.ai-section,.ait-section,.pm-section,.cta-section,footer {
  --indigo: var(--sc-blue);
  --indigo-lt: var(--sc-mist);
  --indigo-bd: var(--sc-line);
}

/* Existing blocks retain their layout; only their former violet accent changes. */
.stats-strip,.cta-section { background: var(--sc-mist); border-color: var(--sc-line); }
.cta-label { color: var(--sc-blue); }
.cta-title .accent,.esc-accent,.cr-accent {
  background: none;
  -webkit-text-fill-color: var(--sc-turquoise);
  color: var(--sc-turquoise);
}
.btn-cta-primary,.ai-btn { background: var(--sc-blue); box-shadow: 0 8px 22px rgba(8,124,175,.22); }
.btn-cta-secondary { color: var(--sc-blue); border-color: var(--sc-line); box-shadow: none; }
.esc-node-ico.i1,.cr-card-ico { background: var(--sc-blue); box-shadow: 0 8px 20px rgba(8,124,175,.20); }
.esc-accent { background: none; }

.pr-num {
  background: none;
  -webkit-text-fill-color: var(--sc-blue);
  color: var(--sc-blue);
}
.pr-feat { background: var(--sc-deep); box-shadow: none; }
.pr-note { border-color: var(--sc-line); }
.pr-note-lead { background: var(--sc-blue); }
.pr-note-tail { background: var(--sc-mist); }

.faq-section { background: var(--sc-mist); }
.faq-item::before,.faq-item summary:hover,.faq-chevron { color: var(--sc-blue); }
.faq-item[open] { border-color: var(--sc-turquoise); }
@media (max-width:640px) { .faq-section { background: #fff; border-top-color: var(--sc-turquoise); } }

.ait-section { background: linear-gradient(180deg,#f8fcfc,var(--sc-mist) 60%,#f8fcfc); }
.ait-card:hover { box-shadow: 0 22px 44px rgba(8,124,175,.12); border-color: var(--sc-line); }
.ait-ico { background: var(--sc-mist); color: var(--sc-blue); }
.ait-price { color: var(--sc-blue); background: var(--sc-mist); border-color: var(--sc-line); }
.ait-gift { background: var(--sc-deep); box-shadow: none; }
.ait-gift .btn-mkt { color: var(--sc-blue); }

.mkt-cta .btn-mkt:hover { color: var(--sc-turquoise); border-color: var(--sc-turquoise); }
.audience-tab.active { background: var(--sc-blue); }

/* How it works: a calm numbered route, not a row of illustrative cards. */
.hw-section { background: #f8fcfc; }
.hw-section .section-header { max-width: 1080px; margin: 0 auto 34px; text-align: left; }
.hw-section .mkt-sub { max-width: 520px; }
.hw-tabs { justify-content: flex-start; margin: 0 auto 30px; max-width: 1080px; }
.hw-tabs .tab-group { border-radius: 999px; border-color: var(--sc-line); background: #fff; padding: 3px; }
.hw-tabs .tab-btn { border-radius: 999px; padding: 10px 19px; }
.hw-tabs .tab-btn.active { color: #fff; background: var(--sc-deep); box-shadow: none; }
.hw-grid { max-width: 1080px; gap: 0; }
.hw-conn { display: block !important; top: 27px !important; left: 16.5% !important; right: 16.5% !important; border: 0 !important; height: 1px !important; background: var(--sc-line); }
.hw-card {
  min-height: 270px;
  padding: 0 28px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.hw-card::before,.hw-card::after { display: none; }
.hw-card:hover { transform: none; box-shadow: none; }
.hw-top { height: 55px; margin: 0 0 23px; align-items: flex-start; }
.hw-ico { display: none; }
.hw-num {
  display: block;
  color: var(--sc-blue);
  background: #f8fcfc;
  padding-right: 12px;
  font-family: 'Shot Cut Inter', Inter, sans-serif;
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1;
}
.hw-name { margin-bottom: 11px; font-size: 21px; letter-spacing: -.035em; }
.hw-desc { max-width: 275px; margin-bottom: 20px; color: #53676d; font-size: 14px; line-height: 1.55; }
.hw-hl { display: flex; padding-top: 13px; border-top: 1px solid var(--sc-line); color: var(--sc-deep); font-size: 12px; }
.hw-hl::before { content: none; }
.hw-hl .mk { border: 0; color: var(--sc-blue); }

/* The small word is the editorial accent in the marketplace heading. */
.mkt-section .mkt-from {
  display: inline-block;
  margin: 0 .08em 0 .03em;
  font-family: 'Shot Cut Accent', Georgia, serif;
  font-size: 1.28em;
  font-weight: 500;
  font-style: italic;
  line-height: .72;
  text-transform: none;
  letter-spacing: -.07em;
  background: linear-gradient(105deg,var(--sc-blue),var(--sc-turquoise));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Registration inherits the same palette even where its links are inline styles. */
.auth-overlay a[style*="color"],.auth-overlay .auth-note a { color: var(--sc-blue) !important; }

/* A compact mobile footer: the same links, arranged as an index instead of a long stack. */
@media (max-width:640px) {
  footer { padding: 28px 18px 20px; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 18px; margin-bottom: 26px; }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: start; }
  .footer-brand img { width: 48px; height: auto; margin: 0; grid-row: span 2; }
  .footer-brand-desc { font-size: 11px; line-height: 1.45; max-width: none; }
  .footer-contact { margin-top: 6px; font-size: 12px; }
  .footer-col-title { margin-bottom: 9px; font-size: 8px; }
  .footer-links { gap: 6px; }
  .footer-link { font-size: 11px; line-height: 1.32; }
  .footer-req { margin-bottom: 16px; padding-top: 16px; gap: 4px 7px; font-size: 10px; line-height: 1.35; }
  .footer-bottom { display: block; padding-top: 0; }
  .footer-copy { font-size: 10px; }
  .footer-legal { margin-top: 9px; gap: 12px; flex-wrap: wrap; }
  .footer-legal-link { font-size: 10px; }
  .hw-section .section-header { margin-bottom: 25px; }
  .hw-tabs { margin-bottom: 20px; }
  .hw-tabs .tab-group { display: flex; width: 100%; }
  .hw-tabs .tab-btn { flex: 1; padding: 10px 8px; font-size: 10px; }
  .hw-grid { display: block; }
  .hw-conn { display: none !important; }
  .hw-card { min-height: 0; padding: 18px 0 20px 42px; border-top: 1px solid var(--sc-line); }
  .hw-card:last-child { border-bottom: 1px solid var(--sc-line); }
  .hw-top { position: absolute; top: 20px; left: 0; height: auto; margin: 0; }
  .hw-num { padding: 0; background: transparent; font-size: 12px; }
  .hw-name { margin-bottom: 7px; font-size: 18px; }
  .hw-desc { max-width: none; margin-bottom: 11px; font-size: 13px; line-height: 1.48; }
  .hw-hl { padding-top: 0; border: 0; font-size: 11px; }
  .mkt-section .mkt-from { font-size: 1.24em; }
}