/* Utah Made Websites's public storefront. Demo documents never load this stylesheet. */
.marketplace-surface {
  --paper: #fafbfdfc;
  --ink: #182238;
  --muted: #606b80;
  --line: #e2e7f0;
  --accent: #3459df;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .8, .2, 1.15);
  color: var(--ink);
  background: #fafbfd;
  overflow-x: clip;
  min-height: 100svh;
}
.marketplace-surface ::selection { background: #d9e2ff; color: #182d70; }
.marketplace-surface main { scroll-margin-top: 110px; }
.marketplace-surface .container { width: min(1240px, calc(100% - 96px)); }
.marketplace-surface h2 { font-size: clamp(36px, 3.4vw, 52px); letter-spacing: -.055em; }
.marketplace-surface .tag { color: #4b6199; font-size: 10px; letter-spacing: .14em; }
.marketplace-surface .section { padding-block: 100px; }
.marketplace-surface .section-heading { margin-bottom: 40px; }
.marketplace-surface .section-heading h2 { margin-top: 16px; }
.marketplace-surface .section-heading > p { max-width: 340px; font-size: 14px; line-height: 1.8; }

/* Navigation stays in place, while the content moves naturally underneath. */
.marketplace-surface .site-header {
  position: sticky; top: 0; height: 84px; z-index: 30;
  background: rgb(250 251 253 / 84%);
  border-bottom: 1px solid rgb(218 225 238 / 60%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  transition: box-shadow .35s, background .35s;
}
.marketplace-surface .site-header.is-scrolled { background: rgb(255 255 255 / 94%); box-shadow: 0 4px 26px #152c5908; }
.marketplace-surface .nav-inner { width: min(1360px, calc(100% - 72px)); }
.marketplace-surface .brand { font-size: 22px; letter-spacing: -1.1px; }
.marketplace-surface .desktop-nav { gap: 5px; }
.marketplace-surface .desktop-nav a { position: relative; padding: 8px 13px; border-radius: 8px; color: #5b6577; transition: color .2s, background .2s; }
.marketplace-surface .desktop-nav a:hover { background: #edf1fa; color: #2847b6; }
.marketplace-surface .desktop-nav a.active { color: #2948bb; background: #edf1ff; }
.marketplace-surface .login-link { color: #48546b; transition: color .2s; }
.marketplace-surface .login-link:hover { color: var(--accent); }
.marketplace-surface .scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; background: #3a61ed; pointer-events: none; }
.marketplace-surface .menu-toggle { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 6px; cursor: pointer; }
.marketplace-surface .menu-line { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .32s var(--ease-out); }
.marketplace-surface .menu-toggle[aria-expanded=true] .menu-line:first-child { transform: translateY(3.75px) rotate(45deg); }
.marketplace-surface .menu-toggle[aria-expanded=true] .menu-line:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.marketplace-surface .mobile-nav { padding: 14px 24px 24px; border-bottom: 1px solid var(--line); background: #fcfdff; box-shadow: 0 24px 35px #16295012; }
.marketplace-surface .mobile-nav a { padding: 12px 15px; border-radius: 9px; color: #334461; transition: background .2s; }
.marketplace-surface .mobile-nav a:hover { background: #edf2ff; }

/* Buttons feel tactile, without shifting surrounding content. */
.marketplace-surface .button {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 14px 22px; border-radius: 11px; background: #243e9b; border-color: #243e9b;
  box-shadow: inset 0 1px 0 #ffffff20, 0 3px 5px #1a327012;
  transition: transform .28s var(--ease-spring), box-shadow .3s, background .25s, border-color .25s;
}
.marketplace-surface .button::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(180px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ffffff26, transparent 80%); transition: opacity .3s; }
.marketplace-surface .button:hover { transform: translateY(-3px); background: #2e4fc1; border-color: #2e4fc1; box-shadow: 0 8px 20px #2947a328; }
.marketplace-surface .button:hover::before { opacity: 1; }
.marketplace-surface .button:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 4px #14275018; }
.marketplace-surface .button.secondary { color: #35425c; background: #ffffffa6; border-color: #d9e0ef; box-shadow: 0 2px 4px #152c5904; }
.marketplace-surface .button.secondary:hover { background: white; border-color: #a6b7e7; box-shadow: 0 8px 18px #152c5910; }
.marketplace-surface .button-arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.marketplace-surface .button:hover .button-arrow { transform: translate(3px, -2px); }
.marketplace-surface .text-link { color: #3152bd; border: 0; position: relative; padding-bottom: 7px; }
.marketplace-surface .text-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #3152bd; transform-origin: left; transform: scaleX(.28); transition: transform .4s var(--ease-out); }
.marketplace-surface .text-link:hover::after { transform: scaleX(1); }

/* An editorial hero and a small, dimensional gallery of real website previews. */
.marketplace-surface .home-hero {
  position: relative; isolation: isolate; padding-top: 66px;
  background: radial-gradient(ellipse at 50% 88%, #d7e2ff 0%, #edf2fd 38%, #fafbfd 76%);
}
.marketplace-surface .home-hero::before { content: ''; position: absolute; width: 740px; height: 740px; left: calc(50% - 370px); top: 210px; border: 1px solid #a9bdec30; border-radius: 50%; z-index: -1; box-shadow: 0 0 0 100px #b7c6ec09, 0 0 0 200px #b7c6ec06; pointer-events: none; }
.marketplace-surface .hero-badge { gap: 10px; font-size: 10px; letter-spacing: .11em; padding: 7px 14px; color: #425379; background: #ffffffb3; border-color: #dce4f5; box-shadow: 0 3px 14px #152c5905; }
.marketplace-surface .live-dot { width: 6px; height: 6px; background: #476bed; box-shadow: 0 0 0 4px #4267ef0d; }
.marketplace-surface .home-hero h1 { margin: 27px auto 25px; padding-inline: 20px; font-size: clamp(52px, 6.2vw, 89px); letter-spacing: -.068em; font-weight: 500; line-height: 1.07; }
.marketplace-surface .home-hero h1 { white-space: normal; }
.marketplace-surface .hero-title-line, .marketplace-surface .hero-title-accent { display: block; }
.marketplace-surface .hero-title-accent { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-style: italic; color: #385bcb; letter-spacing: -.05em; line-height: 1.12; }
.marketplace-surface .hero-description { color: #65718a; font-size: 16px; line-height: 1.85; }
.marketplace-surface .hero-actions { margin: 28px 0 23px; gap: 12px; }
.marketplace-surface .hero-actions .button { padding: 16px 25px; }
.marketplace-surface .hero-reassurance { gap: 25px; font-size: 11px; color: #62718c; }
.marketplace-surface .showcase { height: 448px; margin-top: 54px; transform: perspective(1600px) rotateX(var(--scene-x, 0deg)) rotateY(var(--scene-y, 0deg)); transition: transform .75s var(--ease-out); }
.marketplace-surface .showcase-window { border-color: #fff; box-shadow: 0 30px 60px -20px #253c7347, 0 2px 10px #253c7310; transition: transform .55s var(--ease-out), box-shadow .55s; }
.marketplace-surface .showcase-window:hover { box-shadow: 0 35px 70px -15px #253c7355; }
.marketplace-surface .showcase-center { width: 700px; left: calc(50% - 350px); border-radius: 13px; }
.marketplace-surface .showcase-right { right: -30px; top: 70px; transform: rotate(8deg); }
.marketplace-surface .showcase-tablet { left: 22px; top: 37px; transform: rotate(-8deg); }
.marketplace-surface .browser-chrome { height: 29px; color: #42506a; }
.marketplace-surface .showcase-phone { border-color: #22304a; right: calc(50% - 430px); bottom: -5px; box-shadow: 0 26px 40px #172c5633; }
.marketplace-surface .showcase-phone::before { background: #22304a; }
.marketplace-surface .showcase-note { left: max(35px, calc(50% - 575px)); bottom: 20px; padding: 13px 18px; border: 1px solid #ffffffc9; border-radius: 14px; background: #ffffffdc; box-shadow: 0 12px 30px #243d6812; backdrop-filter: blur(10px); color: #526584; font-size: 11px; z-index: 5; }
.marketplace-surface .showcase-note span { color: #4568d2; }
.marketplace-surface .audience-strip { background: #fff; padding: 30px 20px 33px; border-color: #e7ebf4; }
.marketplace-surface .audience-strip > .eyebrow { color: #5f6e85; font-size: 9px; }
.marketplace-surface .audience-list { color: #596982; margin-top: 17px; gap: 100px; font-size: 24px; }

/* Search and cards: a consistent set of surfaces, with clear interaction states. */
.marketplace-surface .industry-search { height: 70px; padding: 8px 10px 8px 15px; border-color: #dfe6f1; border-radius: 15px; background: #fff; box-shadow: 0 5px 20px #1a355e05; transition: border-color .25s, box-shadow .25s; }
.marketplace-surface .industry-search:focus-within { outline: none; border-color: #8199eb; box-shadow: 0 0 0 4px #4167e911, 0 12px 28px #21366608; }
.marketplace-surface .industry-search .search-icon { color: #6d80a5; }
.marketplace-surface .popular-searches { gap: 8px; margin: 18px 0 35px; }
.marketplace-surface .popular-searches > p { margin-right: 5px; }
.marketplace-surface .popular-searches a { border: 1px solid #e2e8f2; border-radius: 30px; background: #fff; color: #53627e; padding: 4px 11px; transition: background .2s, border-color .2s, transform .2s; }
.marketplace-surface .popular-searches a:hover { background: #edf2ff; border-color: #bfcef6; transform: translateY(-2px); }
.marketplace-surface .industry-grid { gap: 25px; }
.marketplace-surface .industry-card { border-color: #e4e9f1; border-radius: 17px; box-shadow: 0 3px 10px #14274c03; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.marketplace-surface .industry-card:hover { transform: translateY(-7px); box-shadow: 0 17px 35px -12px #24427030; border-color: #c6d3ee; }
.marketplace-surface .industry-image { height: 210px; }
.marketplace-surface .industry-image img { transition: transform .8s var(--ease-out); }
.marketplace-surface .industry-card:hover img { transform: scale(1.055); }
.marketplace-surface .industry-arrow { width: 35px; height: 35px; color: #23408c; box-shadow: 0 3px 15px #16274312; transition: background .3s, color .3s, rotate .3s; }
.marketplace-surface .industry-card:hover .industry-arrow { background: #3459df; color: white; rotate: 4deg; }
.marketplace-surface .industry-info { padding: 23px; }
.marketplace-surface .industry-info h3 { font-size: 20px; }
.marketplace-surface .industry-price { right: 23px; bottom: 24px; color: #425b8e; font-weight: 500; }
.marketplace-surface .featured-section { padding-top: 20px; }
.marketplace-surface .template-grid { gap: 28px; }
.marketplace-surface .template-card { background: #fff; border: 1px solid #e2e7f0; border-radius: 19px; overflow: hidden; box-shadow: 0 3px 10px #172c5003; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.marketplace-surface .template-card:hover { transform: translateY(-7px); border-color: #bcccfa; box-shadow: 0 22px 42px -16px #20396b30; }
.marketplace-surface .card-preview { height: 250px; border-radius: 0; padding: 30px 26px 0; background: linear-gradient(145deg, #eaf0f9, #dfe7f4); }
.marketplace-surface .card-preview.overlay { background: linear-gradient(145deg, #e9edf5, #dfe7f1); }
.marketplace-surface .card-preview.editorial { background: linear-gradient(145deg, #f3eeeb, #eae2de); }
.marketplace-surface .card-desktop { border-radius: 5px; transition: transform .65s var(--ease-out), box-shadow .65s; }
.marketplace-surface .template-card:hover .card-desktop { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 20px 25px #24355920; }
.marketplace-surface .card-mobile { right: 18px; bottom: 13px; transition: transform .6s var(--ease-out); }
.marketplace-surface .template-card:hover .card-mobile { transform: translateY(-9px) rotate(3deg); }
.marketplace-surface .card-content { padding: 23px; }
.marketplace-surface .card-title h3 { font-size: 23px; }
.marketplace-surface .card-price { color: #354f90; }
.marketplace-surface .card-category { color: #63748e; font-size: 11px; margin-top: 6px; }
.marketplace-surface .card-description { color: #66738a; font-size: 12px; line-height: 1.8; min-height: 65px; }
.marketplace-surface .card-features { margin-block: 16px; gap: 6px; }
.marketplace-surface .card-features .tag { color: #526685; background: #f5f7fb; border: 1px solid #e9edf4; padding: 4px 8px; border-radius: 6px; font-size: 9px; letter-spacing: 0; }
.marketplace-surface .card-actions { border-color: #e8edf5; font-size: 12px; padding-top: 16px; }
.marketplace-surface .card-actions a { transition: color .2s; }
.marketplace-surface .card-actions a:hover { color: #3459df; }
.marketplace-surface .card-actions a:last-child { color: #3657b7; }
.marketplace-surface .card-monthly { margin-top: 10px; font-size: 10px; }
.marketplace-surface .template-card:focus-within { border-color: #6683e3; box-shadow: 0 0 0 3px #4167e922; }
.marketplace-surface .card-image-link:focus-visible { outline-offset: -4px; }
.marketplace-surface .section-bottom { margin-top: 40px; }

/* Contrasting sections give the longer pages a deliberate rhythm. */
.marketplace-surface .how-section { position: relative; isolation: isolate; color: #f6f8ff; background: radial-gradient(ellipse at 85% 0%, #2b4173, transparent 65%), #17253f; padding-block: 95px; }
.marketplace-surface .how-section .tag { color: #acbdf1; }
.marketplace-surface .how-section .center-heading p { color: #b9c6df; font-size: 14px; }
.marketplace-surface .how-section .center-heading h2 { max-width: 650px; margin: 18px auto; }
.marketplace-surface .steps-grid { gap: 24px; }
.marketplace-surface .how-section .step-card { padding: 32px; border-radius: 18px; background: #ffffff06; border: 1px solid #9bb1df29; transition: background .35s, border-color .35s, transform .35s var(--ease-out); }
.marketplace-surface .how-section .step-card:hover { background: #ffffff0d; border-color: #9bb1df66; transform: translateY(-4px); }
.marketplace-surface .how-section .step-number { width: 46px; height: 46px; background: #94b3ff12; border-color: #9bb1df47; color: #cad8ff; margin-bottom: 38px; font-size: 13px; }
.marketplace-surface .how-section .step-card h3 { font-size: 25px; }
.marketplace-surface .how-section .step-card p { color: #bfcae1; line-height: 1.85; }
.marketplace-surface .benefits-section { gap: 95px; padding-block: 115px; }
.marketplace-surface .benefit-row { padding: 28px 0; border-color: #e0e7f3; transition: transform .3s var(--ease-out); }
.marketplace-surface .benefit-row:hover { transform: translateX(5px); }
.marketplace-surface .benefit-icon { background: #edf2ff; color: #4b68bc; border-color: #dae3f8; width: 47px; min-width: 47px; height: 47px; border-radius: 14px; }
.marketplace-surface .benefit-row h3 { font-size: 20px; }
.marketplace-surface .closing-cta { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #496ce4; border-radius: 25px; padding: 78px 30px; margin-bottom: 100px; color: #fff; background: radial-gradient(ellipse at 50% 0%, #597be5, transparent 70%), #3154bd; box-shadow: 0 24px 50px -24px #274cb65c; }
.marketplace-surface .closing-cta::before, .marketplace-surface .closing-cta::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 540px; height: 540px; border: 1px solid #ffffff16; border-radius: 50%; top: -230px; left: -240px; box-shadow: 0 0 0 70px #ffffff03, 0 0 0 140px #ffffff02; }
.marketplace-surface .closing-cta::after { left: auto; right: -240px; top: 110px; }
.marketplace-surface .closing-cta .eyebrow { color: #dee7ff; font-size: 10px; }
.marketplace-surface .closing-cta h2 { font-size: clamp(36px, 4.3vw, 62px); margin: 22px 0; }
.marketplace-surface .closing-cta p { color: #e0e8ff; font-size: 15px; }
.marketplace-surface .closing-cta .button { background: #fff; color: #2e4dad; border-color: white; padding: 15px 24px; box-shadow: 0 7px 18px #16327f25; }
.marketplace-surface .closing-cta .button:hover { background: #f0f4ff; box-shadow: 0 12px 25px #16327f40; }
.marketplace-surface .site-footer { padding-top: 48px; background: #f3f6fb; border-color: #e2e8f1; }
.marketplace-surface .footer-links a { transition: color .2s; }
.marketplace-surface .footer-links a:hover { color: #3459df; }
.marketplace-surface .footer-bottom { border-color: #dfe6f2; color: #5f6e85; padding-block: 24px; margin-top: 40px; }

/* Catalog, pricing and previews share the same visual language. */
.marketplace-surface .page-hero { padding-top: 75px; padding-bottom: 45px; }
.marketplace-surface .page-hero h1 { font-size: clamp(45px, 5vw, 72px); letter-spacing: -.06em; line-height: 1.08; margin: 23px 0; }
.marketplace-surface .page-hero p { line-height: 1.85; color: #63718a; }
.marketplace-surface .page-hero + .section.container { padding-top: 28px; }
.marketplace-surface .industry-hero { gap: 65px; }
.marketplace-surface .industry-hero img { border-radius: 22px; box-shadow: 0 15px 30px #18356412; }
.marketplace-surface .filter-bar { padding: 19px; border: 1px solid #e0e6f0; border-radius: 16px; background: #fff; box-shadow: 0 6px 25px #1c386009; gap: 10px; }
.marketplace-surface .filter-bar label { color: #62718a; font-size: 10px; }
.marketplace-surface .filter-bar input, .marketplace-surface .filter-bar select { background: #f7f9fd; border-color: #e2e8f2; border-radius: 8px; min-height: 44px; }
.marketplace-surface .filter-bar input:focus, .marketplace-surface .filter-bar select:focus { outline: 2px solid #6683e3; outline-offset: 2px; }
.marketplace-surface .filter-bar .button { min-height: 44px; padding: 12px 16px; }
.marketplace-surface .results-bar { padding: 28px 3px; }
.marketplace-surface .result-count { font-weight: 500; color: #50617f; }
.marketplace-surface .filter-chip { color: #3758aa; border: 1px solid #dfe6fa; background: #eef3ff; transition: background .2s, transform .2s; }
.marketplace-surface .filter-chip:hover { background: #e0e9ff; transform: translateY(-2px); }
.marketplace-surface .empty-state { background: #edf2fb; border: 1px dashed #bfceea; border-radius: 20px; }
.marketplace-surface .industry-service { border-radius: 16px; background: #fff; border-color: #e3e8f1; }
.marketplace-surface .pricing-grid { gap: 24px; align-items: stretch; }
.marketplace-surface .plan-card { display: flex; flex-direction: column; padding: 35px; border-radius: 20px; background: #fff; border: 1px solid #dfe6f1; box-shadow: 0 8px 24px #152d5205; transition: transform .4s var(--ease-out), box-shadow .4s; }
.marketplace-surface .plan-card:hover { transform: translateY(-6px); box-shadow: 0 22px 38px -15px #213c6929; }
.marketplace-surface .plan-card h2 { font-size: 30px; }
.marketplace-surface .plan-card > p { color: #5e6d86; }
.marketplace-surface .plan-card .plan-price { color: var(--ink); }
.marketplace-surface .plan-card .button { margin-top: auto; }
.marketplace-surface .plan-card ul { color: #4f617e; margin-bottom: 32px; }
.marketplace-surface .plan-card.recommended { border-color: #304c94; background: linear-gradient(155deg, #2d4375, #1a2a4b); color: #fff; box-shadow: 0 22px 35px -16px #203c7f55; }
.marketplace-surface .recommended > p, .marketplace-surface .recommended ul { color: #c4d1ef; }
.marketplace-surface .recommended .plan-price { color: #fff; }
.marketplace-surface .recommended .plan-price strong { color: #fff; }
.marketplace-surface .recommended .button { background: #eef3ff; color: #29467f; border-color: #eef3ff; }
.marketplace-surface .plan-badge { color: #304e96; background: #e8efff; border: 1px solid #cddaf7; border-radius: 20px; font-size: 9px; padding: 6px 13px; }
.marketplace-surface .pricing-disclaimer { color: #5f6e85; }
.marketplace-surface .faq-section { max-width: 850px; }
.marketplace-surface .faq-section h2 { margin-bottom: 35px; }
.marketplace-surface .faq-section details { border-color: #dde5f3; padding: 22px 0; }
.marketplace-surface .faq-section summary { display: flex; justify-content: space-between; gap: 20px; font-size: 17px; list-style: none; cursor: pointer; }
.marketplace-surface .faq-section summary::-webkit-details-marker { display: none; }
.marketplace-surface .faq-section summary::after { content: '+'; color: #5574c5; font-size: 22px; line-height: 1; font-weight: 400; transition: rotate .3s var(--ease-out); }
.marketplace-surface .faq-section details[open] summary::after { rotate: 45deg; }
.marketplace-surface .faq-section details p { color: #60718c; padding-right: 35px; line-height: 1.85; }
.marketplace-surface .preview-section { padding-top: 35px; }
.marketplace-surface .preview-heading { margin-block: 35px; }
.marketplace-surface .preview-heading h1 { font-size: 60px; }
.marketplace-surface .preview-canvas { background: #e6ecf6; border-color: #dbe3f0; border-radius: 0 0 18px 18px; box-shadow: 0 18px 45px -25px #223d7040; }
.marketplace-surface [data-experience=preview] { border-color: #dbe3f0; border-radius: 18px 18px 0 0; }
.marketplace-surface .preview-details { padding: 32px; background: #fff; border: 1px solid #e4e9f2; border-radius: 18px; }
.marketplace-surface .preview-details p, .marketplace-surface .preview-details li { color: #60718b; }

@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .marketplace-surface .showcase-window, .marketplace-surface .showcase-phone { animation: wm-float 4.8s ease-in-out 1; animation-play-state: paused; }
  .marketplace-surface .showcase.is-in-view .showcase-window, .marketplace-surface .showcase.is-in-view .showcase-phone { animation-play-state: running; }
  .marketplace-surface .showcase-center { animation-delay: -2s; }
  .marketplace-surface .showcase-right { animation-delay: -4s; }
  .marketplace-surface .showcase-phone { animation-delay: -3s; }
  @keyframes wm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .marketplace-surface .site-header { view-transition-name: marketplace-header; }
  ::view-transition-old(root) { animation: wm-page-out .13s ease-out both; }
  ::view-transition-new(root) { animation: wm-page-in .28s ease-out both; }
  @keyframes wm-page-out { to { opacity: 0; } }
  @keyframes wm-page-in { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 1100px) {
  .marketplace-surface .desktop-nav a { padding-inline: 9px; font-size: 12px; }
  .marketplace-surface .nav-inner { gap: 16px; width: calc(100% - 48px); }
  .marketplace-surface .nav-actions { gap: 14px; }
  .marketplace-surface .showcase-center { width: 610px; left: calc(50% - 305px); }
  .marketplace-surface .showcase-tablet { left: -85px; }
  .marketplace-surface .showcase-right { right: -120px; }
  .marketplace-surface .showcase-phone { right: 35px; }
  .marketplace-surface .showcase-note { display: none; }
  .marketplace-surface .plan-card { padding: 28px; }
  .marketplace-surface .industry-price { position: static; display: block; margin-top: 8px; }
}
@media (max-width: 1000px) {
  .marketplace-surface .desktop-nav, .marketplace-surface .nav-actions { display: none; }
  .marketplace-surface .menu-toggle { display: flex; }
  .marketplace-surface .container { width: calc(100% - 56px); }
  .marketplace-surface .section { padding-block: 75px; }
  .marketplace-surface .home-hero { padding-top: 55px; }
  .marketplace-surface .home-hero h1 { font-size: 68px; }
  .marketplace-surface .showcase { height: 395px; }
  .marketplace-surface .industry-grid, .marketplace-surface .template-grid { gap: 18px; }
  .marketplace-surface .industry-image { height: 190px; }
  .marketplace-surface .industry-info { padding: 18px; }
  .marketplace-surface .card-content { padding: 20px; }
  .marketplace-surface .how-section { padding-inline: 28px; }
  .marketplace-surface .how-section .step-card { padding: 24px; }
  .marketplace-surface .steps-grid { gap: 16px; }
  .marketplace-surface .benefits-section { gap: 45px; }
  .marketplace-surface .audience-list { gap: 35px; font-size: 21px; }
  .marketplace-surface .closing-cta { margin-bottom: 75px; }
  .marketplace-surface .industry-hero { gap: 30px; }
}
@media (max-width: 699px) {
  .marketplace-surface .container { width: calc(100% - 40px); }
  .marketplace-surface .site-header { height: 74px; }
  .marketplace-surface .nav-inner { width: calc(100% - 36px); }
  .marketplace-surface .brand { font-size: 21px; }
  .marketplace-surface .home-hero { padding-top: 43px; }
  .marketplace-surface .hero-badge { font-size: 8px; padding: 6px 11px; }
  .marketplace-surface .home-hero h1 { font-size: clamp(43px, 11.2vw, 69px); margin: 23px auto 22px; padding-inline: 22px; letter-spacing: -.06em; }
  .marketplace-surface .hero-title-line { max-width: 490px; margin: auto; }
  .marketplace-surface .hero-title-accent { font-size: 1.15em; margin-top: 4px; }
  .marketplace-surface .hero-description { font-size: 13px; padding: 0 27px; line-height: 1.8; }
  .marketplace-surface .hero-actions { gap: 9px; margin-top: 24px; }
  .marketplace-surface .hero-actions .button { font-size: 11px; padding: 14px 16px; gap: 8px; }
  .marketplace-surface .hero-reassurance { gap: 6px 13px; font-size: 9px; padding-inline: 22px; }
  .marketplace-surface .showcase { height: 278px; margin-top: 35px; }
  .marketplace-surface .showcase-center { width: 345px; left: calc(50% - 193px); top: 15px; }
  .marketplace-surface .showcase-right { width: 230px; right: -178px; top: 70px; }
  .marketplace-surface .showcase-tablet { width: 190px; left: -151px; top: 50px; }
  .marketplace-surface .showcase-phone { width: 91px; height: 185px; right: 12px; bottom: 8px; border-width: 4px; border-radius: 16px; }
  .marketplace-surface .browser-chrome { height: 23px; }
  .marketplace-surface .audience-strip { padding: 23px 16px; }
  .marketplace-surface .audience-strip > .eyebrow { font-size: 8px; }
  .marketplace-surface .audience-list { font-size: 14px; gap: 16px; margin-top: 13px; line-height: 1.35; }
  .marketplace-surface .section { padding-block: 58px; }
  .marketplace-surface .section-heading { margin-bottom: 27px; gap: 18px; }
  .marketplace-surface .section-heading h2 { margin-top: 12px; font-size: 36px; }
  .marketplace-surface .section-heading > p { font-size: 12px; }
  .marketplace-surface .tag { font-size: 8px; }
  .marketplace-surface .industry-search { height: 60px; border-radius: 12px; padding: 6px; }
  .marketplace-surface .industry-search .button { padding: 11px 12px; font-size: 10px; gap: 7px; }
  .marketplace-surface .industry-grid { gap: 13px; }
  .marketplace-surface .industry-card { border-radius: 13px; }
  .marketplace-surface .industry-image { height: 135px; }
  .marketplace-surface .industry-info { padding: 15px 12px; }
  .marketplace-surface .industry-info h3 { font-size: 16px; }
  .marketplace-surface .industry-info p { font-size: 10px; }
  .marketplace-surface .industry-price { font-size: 10px; }
  .marketplace-surface .industry-arrow { width: 29px; height: 29px; }
  .marketplace-surface .template-grid { gap: 24px; }
  .marketplace-surface .card-preview { height: 240px; padding-top: 28px; }
  .marketplace-surface .card-content { padding: 22px; }
  .marketplace-surface .card-description { min-height: 0; }
  .marketplace-surface .featured-section { padding-top: 12px; }
  .marketplace-surface .how-section { padding-inline: 20px; }
  .marketplace-surface .how-section .center-heading h2 { font-size: 35px; }
  .marketplace-surface .how-section .step-card { padding: 25px; }
  .marketplace-surface .how-section .step-number { margin-bottom: 23px; }
  .marketplace-surface .how-section .step-card p { font-size: 13px; }
  .marketplace-surface .benefits-section { gap: 24px; }
  .marketplace-surface .benefits-section h2 { font-size: 38px; }
  .marketplace-surface .closing-cta { border-radius: 20px; padding: 49px 23px; margin-bottom: 58px; }
  .marketplace-surface .closing-cta h2 { font-size: 38px; }
  .marketplace-surface .closing-cta p { font-size: 13px; }
  .marketplace-surface .closing-cta .eyebrow { font-size: 8px; }
  .marketplace-surface .site-footer { padding-top: 33px; }
  .marketplace-surface .footer-bottom { margin-top: 27px; font-size: 10px; }
  .marketplace-surface .page-hero { padding-top: 47px; padding-bottom: 27px; }
  .marketplace-surface .page-hero h1 { font-size: 45px; }
  .marketplace-surface .page-hero p { font-size: 14px; }
  .marketplace-surface .filter-bar { padding: 15px; border-radius: 13px; }
  .marketplace-surface .filter-search { flex-basis: 100%; }
  .marketplace-surface .filter-bar label { min-width: calc(50% - 5px); }
  .marketplace-surface .plan-card { padding: 30px; }
  .marketplace-surface .preview-section { width: calc(100% - 28px); }
  .marketplace-surface .preview-heading { align-items: stretch; }
  .marketplace-surface .preview-heading h1 { font-size: 44px; }
  .marketplace-surface .preview-details { padding: 24px; gap: 28px; }
  .marketplace-surface .faq-section summary { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .marketplace-surface *, .marketplace-surface *::before, .marketplace-surface *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .marketplace-surface .showcase { transform: none; }
  .marketplace-surface .button:hover, .marketplace-surface .industry-card:hover, .marketplace-surface .template-card:hover, .marketplace-surface .plan-card:hover { transform: none; }
}

/* One decision per filter: industry, plan/budget, and visual style. */
.marketplace-surface #designs { scroll-margin-top: 104px; }
.marketplace-surface .filter-bar { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.8fr) auto; align-items: end; gap: 16px 12px; padding: 24px; }
.marketplace-surface .filter-bar-scoped { grid-template-columns: minmax(0,1.25fr) minmax(0,1.5fr) minmax(0,.8fr) auto; }
.marketplace-surface .filter-bar label { display: grid; min-width: 0; gap: 9px; color: #3e506f; font-size: 12px; font-weight: 600; }
.marketplace-surface .filter-search { width: auto; }
.marketplace-surface .filter-bar input, .marketplace-surface .filter-bar select { width: 100%; min-width: 0; height: 50px; padding: 12px 10px; color: #253955; font-size: 14px; font-weight: 400; }
.marketplace-surface .filter-bar input::placeholder { color: #66738a; opacity: 1; }
.marketplace-surface .filter-bar .button { min-height: 50px; white-space: nowrap; }
.marketplace-surface .filter-help { grid-column: 1 / -1; margin: 0; color: #5c6d85; font-size: 12px; line-height: 1.7; }
.marketplace-surface .filter-scope { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 18px; color: #3e506f; font-size: 14px; }
.marketplace-surface .filter-scope p { margin: 0; font-weight: 600; }
.marketplace-surface .filter-scope a, .marketplace-surface .results-bar a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; }
.marketplace-surface .results-bar { padding: 20px 2px 12px; gap: 16px; }
.marketplace-surface .result-count { font-size: 15px; }
.marketplace-surface .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.marketplace-surface .filter-chip { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; max-width: 100%; padding: 9px 14px; font-size: 13px; overflow-wrap: anywhere; }
.marketplace-surface .filter-chip span { font-size: 19px; line-height: 1; }
@media (max-width: 1199px) {
  .marketplace-surface .filter-bar, .marketplace-surface .filter-bar-scoped { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .marketplace-surface .filter-bar > .button { grid-column: 1 / -1; }
  .marketplace-surface .filter-bar-scoped .filter-search { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .marketplace-surface #designs { scroll-margin-top: 88px; }
  .marketplace-surface .filter-bar { padding: 18px; gap: 18px 12px; }
  .marketplace-surface .filter-bar input, .marketplace-surface .filter-bar select { font-size: 16px; }
  .marketplace-surface .filter-search, .marketplace-surface .filter-industry, .marketplace-surface .filter-budget { grid-column: 1 / -1; }
  .marketplace-surface .filter-bar > .button { grid-column: auto; font-size: 12px; padding-inline: 12px; }
  .marketplace-surface .filter-help { font-size: 12px; }
  .marketplace-surface .filter-scope { align-items: flex-start; flex-direction: column; gap: 0; padding-bottom: 12px; }
  .marketplace-surface .results-bar { align-items: flex-start; }
  .marketplace-surface .results-bar .result-count { padding-top: 10px; }
}

/* Design discovery is independent of tier pricing. */
.marketplace-surface .filter-bar { grid-template-columns: minmax(210px,1.5fr) minmax(200px,1fr) minmax(140px,.8fr) auto; }
.marketplace-surface .filter-bar-scoped { grid-template-columns: minmax(240px,2fr) minmax(160px,1fr) auto; }
.card-availability { color: #47648d; background: #f0f4fa; border: 1px solid #e0e7f1; border-radius: 30px; font-size: 11px; font-weight: 500; padding: 5px 9px; white-space: nowrap; }
.preview-plan-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; margin-top: 8px; color: #3553a1; text-decoration: underline; text-underline-offset: 4px; }
.marketplace-surface .industry-price { font-size: 11px; }
@media (max-width: 900px) {
 .marketplace-surface .filter-bar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 .marketplace-surface .filter-search { grid-column: 1/-1; }
 .marketplace-surface .filter-bar > .button { grid-column: 1/-1; }
 .marketplace-surface .filter-bar-scoped .filter-style { grid-column: 1/-1; }
}
@media (max-width: 480px) { .marketplace-surface .filter-bar { grid-template-columns: 1fr; } }

.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; }
.preview-toolbar label { display:flex; align-items:center; gap:12px; }
.preview-toolbar select { padding:8px 12px; border:1px solid #dbe3f1; border-radius:8px; background:white; color:inherit; }
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }
.contact-card { padding:36px; border:1px solid #dbe3f1; border-radius:20px; background:white; }
.contact-card h2 { font-size:30px; margin-bottom:20px; }
.contact-card p { margin-bottom:20px; }
.contact-card .button { margin:8px 12px 12px 0; }
.contact-details { overflow-wrap:anywhere; }
.contact-list { padding-left:20px; line-height:2; }
@media(max-width:700px) { .contact-grid { grid-template-columns:1fr; gap:24px; } .contact-card { padding:24px; } .preview-toolbar { gap:12px; font-size:12px; } }