/* app.css — additive layer on top of design-system.css (kept vendored/unmodified). */

/* Section links are <a> tags, not <button> — design-system.css only styled buttons here. */
.mobile-bar a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: 9px;
  font-weight: 800;
}
.mobile-bar a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.mobile-bar a span {
  font-size: 15px;
}

@media (max-width: 720px) {
  .mobile-bar {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  .mobile-bar button {
    flex-direction: column;
    gap: 3px;
    font-size: 8px;
  }
  .mobile-bar button span {
    font-size: 17px;
  }
}

.nav-drawer-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.nav-drawer-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-drawer {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 17px;
  right: 17px;
  z-index: 90;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
}
.nav-drawer.open {
  display: flex;
}
.nav-drawer a,
.nav-drawer button {
  padding: 12px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}
.nav-drawer a:hover,
.nav-drawer button:hover {
  background: var(--paper);
}
@media (max-width: 1020px) and (min-width: 721px) {
  .nav-drawer-toggle {
    display: inline-flex;
  }
}
@media (max-width: 720px) {
  .nav-drawer-toggle,
  .nav-drawer {
    display: none !important;
  }
}

.filters-toggle {
  display: none;
}
.filters-drawer[open] > summary .filters-toggle-icon {
  transform: rotate(45deg);
}
@media (max-width: 1020px) {
  .filters-toggle {
    display: inline-flex;
  }
  .filters-drawer {
    margin-bottom: 18px;
  }
  .filters-drawer summary {
    list-style: none;
    cursor: pointer;
  }
  .filters-drawer summary::-webkit-details-marker {
    display: none;
  }
  .filters-drawer[open] {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    background: rgba(16, 17, 13, 0.62);
    padding: 16px;
  }
  /* The dimmer stays fixed and never scrolls; .filters-panel below is its own,
     separately-scrolling element capped at 60vh — native <select> popups can
     mis-position when their scrolling ancestor is itself `position: fixed`, so
     `fixed` and `overflow-y: auto` are kept on two different elements. */
  .filters-drawer[open] > summary.filters-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
    background: var(--white);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    border-bottom: none;
  }
  .filters-drawer[open] .filters-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    padding: 20px;
    margin-top: 0;
    max-height: 60vh;
    overflow-y: auto;
  }
  .filters-drawer:not([open]) .filters-panel {
    display: none;
  }
}

/* design-system.css hides every .outline-button below 720px (written for the
   homepage catalog-section link, which the mobile bar replaces). That class
   is reused for unrelated controls that must stay visible on mobile: the
   login modal's "Log in with Google" link, the billing-portal link on the
   profile page, and the listing-grid pagination buttons. Restore them. */
@media (max-width: 720px) {
  .login-modal .outline-button,
  .listing-modal .outline-button,
  #listing-grid .outline-button {
    display: inline-flex;
  }
}

@media (min-width: 1021px) {
  .filters-drawer summary {
    display: none;
  }
  .filters-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow);
    padding: 16px 20px;
    margin-bottom: 24px;
  }
}
.filters-panel .field-content input,
.filters-panel .field-content select {
  min-width: 160px;
}

/* .search-button's size normally comes from stretching against a sibling
   .search-field (min-height:66px) inside .search-row (design-system.css) —
   here it sits alone in .filters-panel, so give it that sizing explicitly
   plus full width so it reads as the panel's primary action. */
.filters-panel .search-button {
  flex: 0 0 auto;
  min-height: 66px;
  padding: 12px 16px;
  margin-left: auto;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.htmx-indicator {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: flex;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* design-system.css's .dark-button is styled `width: 100%` for the sidebar
   subscribe CTA — override that so the header "Увійти" button doesn't stretch
   to fill the whole header-actions grid column. */
.header-actions .dark-button {
  width: auto;
  padding: 11px 18px;
}

/* .site-header's 1fr/auto/1fr grid gives .main-nav's "auto" track whatever
   leftover space the two 1fr columns don't need — since .header-actions'
   own content (lang/country switches, create-ad, favorites, profile) is
   wide enough to already exceed its 1fr share, ALL of that leftover ends up
   on the brand side (a plain margin on .header-actions just steals 1:1 from
   that same leftover, so at in-between widths it collapses the brand/nav
   gap instead of fixing anything). A grid column-gap is the one thing that
   inserts a hard floor between every pair of columns regardless of which
   track is "frozen" at its content minimum — use it to guarantee nav and
   header-actions never sit flush. */
.site-header {
  column-gap: 24px;
}


/* Same .dark-button shell as "Увійти", with a leading icon and a bumped-up
   font-size (base .dark-button is 11px, sized for a compact sidebar CTA —
   too small for the header's primary action). Own class so "Увійти" isn't affected. */
.header-actions .create-ad-button {
  gap: 8px;
  padding: 9px 16px;
  font-size: 12px;
  white-space: nowrap;
}
.header-actions .create-ad-button svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

/* Below 720px .main-nav is replaced by .mobile-bar (see design-system.css),
   so .header-actions alone has to fit the lang switch + this button +
   favorites/profile/logout in half the header width — the full label
   overflows. Collapse it to an icon-only square, same footprint as the
   other .icon-button controls next to it. */
@media (max-width: 720px) {
  .header-actions .create-ad-button {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
  }
  .header-actions .create-ad-button .create-ad-label {
    display: none;
  }
}

/* design-system.css's .modal-primary reuses .dark-button's compact 11px/15px
   sizing meant for a sidebar CTA next to other text — sitting alone under the
   login form it reads too small. Bump it up. */
.login-modal .modal-primary {
  padding: 17px 18px;
  font-size: 14px;
  margin-top: 4px;
}
.login-modal .modal-primary svg {
  width: 19px;
  height: 19px;
}

.country-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.country-switch-icon {
  position: absolute;
  left: 10px;
  display: flex;
  color: var(--muted, #686b61);
  pointer-events: none;
}
.country-switch-icon svg {
  width: 14px;
  height: 14px;
}
.country-switch select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  max-width: 112px;
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 26px 9px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23686b61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 8px center / 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  text-overflow: ellipsis;
}
.country-switch select:hover {
  border-color: #c9cbc1;
}
/* Below 720px .nav-drawer-toggle drops out (see below) but .header-actions
   still has to fit the lang switch and (when logged in) the create-ad/
   favorites/profile icons in one row on phone-width screens — same pressure
   that collapses .create-ad-button to icon-only there. Shrinking to an
   icon+arrow-only pill (rather than hiding the whole control, as an earlier
   pass here did) keeps the country switcher reachable on mobile instead of
   disappearing, while still leaving room for the rest of the row down to a
   320px viewport. */
@media (max-width: 720px) {
  /* Same pill shell as the desktop select, just narrower: an icon on the
     left and the select's own chevron on the right so it still reads as a
     dropdown, but no room (and no need) for the selected country's text —
     there's only ever one option to show. */
  .country-switch {
    width: 44px;
    height: 30px;
  }
  .country-switch-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }
  .country-switch-icon svg {
    width: 14px;
    height: 14px;
  }
  .country-switch select {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--white)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23686b61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 6px center / 10px;
    color: transparent;
    font-size: 0;
  }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
}
.lang-switch select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 9px 26px 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23686b61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 8px center / 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
}
.lang-switch select:hover {
  border-color: #c9cbc1;
}
.lang-switch noscript {
  margin-left: 4px;
}

.page-error {
  max-width: 480px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

/* The detail page reuses .listing-modal's internal markup as a real page body,
   not a dialog, so the modal-only sizing constraints (max-height/overflow/
   animation) need to be lifted here. */
.detail-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.detail-page .listing-modal {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
  animation: none;
  padding: 34px;
}
.detail-page .modal-close {
  display: none;
}
.detail-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 720px) {
  .detail-page {
    padding: 24px 14px 60px;
  }
  .detail-page .listing-modal {
    padding: 22px 16px;
    border-radius: var(--radius-2xl);
  }
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 30px 0 10px;
}
.section-grid a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  transition: box-shadow var(--ease-fast, 0.16s) ease;
}
.section-grid a:hover {
  box-shadow: var(--shadow);
}
.section-grid strong {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.section-grid span {
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 720px) {
  .section-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.city-jobs-card {
  margin: 30px 0 10px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
}
.city-jobs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.city-jobs-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: var(--radius-md);
  transition: background var(--ease-fast, 0.16s) ease;
}
.city-jobs-grid a:hover,
.city-jobs-grid a:focus-visible {
  background: var(--line);
}
.city-jobs-name {
  font-size: 13px;
  font-weight: 700;
}
.city-jobs-count {
  font-size: 13px;
  font-weight: 900;
  color: var(--blue);
}
@media (max-width: 960px) {
  .city-jobs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .city-jobs-card {
    padding: 16px;
  }
  .city-jobs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.city-picker {
  position: relative;
}
.city-results-list:empty {
  display: none;
}
/* position: fixed (JS sets top/left/width to match #city-picker-query's rect on every
   open/reflow) instead of position: absolute anchored to .city-picker: the picker is used
   both in the hero search card (.hero has overflow: hidden for its decorative orbits) and
   in the mobile filters drawer (position: fixed; overflow-y: auto) — an absolutely
   positioned dropdown gets clipped by either ancestor once the result list is taller than
   the remaining space inside it. Fixed positioning escapes both. */
.city-results-list {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 6px;
}
.city-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}
.city-result:hover,
.city-result:focus-visible {
  background: var(--paper);
}
.city-result-count {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.city-results-hint {
  padding: 9px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.filters-panel .city-picker {
  min-width: 160px;
}
.city-picker-clear {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}
.city-picker-clear svg {
  width: 12px;
  height: 12px;
}
.city-picker-clear:hover,
.city-picker-clear:focus-visible {
  background: var(--line);
  color: var(--ink);
}
.city-picker-clear[hidden] {
  display: none;
}
.search-field[hidden] {
  display: none;
}

/* design-system.css's `.contact-unlocked > div` rule matches any direct <div> child,
   including .lock-mark itself — stretching the 39px checkmark circle to fill the row.
   Restore its intended fixed circle size here since design-system.css is vendored. */
.contact-unlocked > .lock-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  gap: 0;
  color: var(--ink);
}

.contact-unlocked--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 22px;
}
.contact-unlocked--expanded .contact-unlocked__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-unlocked--expanded .contact-unlocked__top strong {
  font-size: 15px;
}
.contact-unlocked--expanded .lock-mark {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  font-size: 24px;
}
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-block--primary {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.contact-block--primary .contact-name {
  font-size: 18px;
  font-weight: 800;
}
.contact-block--primary .contact-phone {
  font-size: 20px;
  font-weight: 900;
  color: var(--lime);
  letter-spacing: 0.02em;
}
.contact-block--social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.contact-social-item {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.contact-social-item:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 720px) {
  .contact-unlocked--expanded {
    padding: 18px;
  }
  .contact-block--primary .contact-phone {
    font-size: 17px;
  }
}

/* design-system.css is component-based, not prose-based, and ships no default
   h1-h6/p/ul typography, so long-form legal copy needs its own rules here. */
.legal-page h1 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 0 0 8px;
}
.legal-page .legal-updated {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 32px;
}
.legal-page section {
  margin-bottom: 32px;
}
.legal-page h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.legal-page h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 20px 0 8px;
}
.legal-page p {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.legal-page p.legal-muted {
  color: var(--muted);
}
.legal-page ul,
.legal-page ol {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
}
.legal-page li {
  margin-bottom: 6px;
}
.legal-page a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.legal-page a:hover {
  text-decoration: underline;
}
.legal-page hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}
.legal-page .legal-card {
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (max-width: 720px) {
  .legal-page h1 {
    font-size: 26px;
  }
  .legal-page h2 {
    font-size: 17px;
  }
}

/* about.html is narrative/brand copy rather than legal prose, so it widens
   the shared .legal-page container a bit and layers a hero heading + two
   callout-box treatments on top of .legal-page's base typography. */
.about-page {
  max-width: 820px;
}
.about-hero {
  margin-bottom: 8px;
}
.about-page h1 {
  font-size: clamp(32px, 5vw, 46px);
  letter-spacing: -0.045em;
  line-height: 1.04;
}
.about-page h1 span {
  color: var(--blue);
}
.about-lead {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  margin-top: 18px !important;
}
.about-callout {
  margin: 28px 0 36px;
  padding: 22px 26px;
  background: rgba(49, 87, 255, 0.07);
  border-radius: var(--radius-lg);
  text-align: center;
}
.about-callout p {
  margin: 0 !important;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.about-callout--quote {
  text-align: left;
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.about-callout--quote p {
  font-size: 19px;
}
@media (max-width: 720px) {
  .about-page h1 {
    font-size: 28px;
  }
  .about-callout {
    padding: 18px 20px;
  }
  .about-callout p {
    font-size: 15px;
  }
  .about-callout--quote p {
    font-size: 16px;
  }
}

/* Not `.main-nav` reused: design-system.css hides `.main-nav` outright below
   1020px (replaced by .mobile-bar/.nav-drawer there), which would make this
   in-page tab nav disappear on mobile — so it's its own small component
   instead, with its own always-visible underline-tab styling. */
.account-menu {
  display: flex;
  gap: 10px;
  margin: 0 0 28px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  overflow-x: auto;
  overflow-y: hidden;
}
.account-menu a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.account-menu a.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.account-menu a.active .count-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.count-badge {
  display: inline-block;
  padding: 1px 8px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.type-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 4px;
  overflow-x: auto;
}
.type-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.type-tabs a.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.type-tabs a.active .count-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* 5th column for legal-page links, added without touching the vendored
   4-column grid in design-system.css. Gated on a plain class instead of
   :has() for broad browser support. */
footer.has-legal {
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr auto;
  align-items: start;
  background: var(--paper);
  padding: 46px 26px 30px;
}
@media (max-width: 1020px) {
  footer.has-legal {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  footer.has-legal {
    grid-template-columns: 1fr;
  }
}
/* Qualified as "footer div.footer-col" (not just ".footer-col") to match the
   specificity of the vendored "footer div:not(.brand)" rule — .footer-col
   alone loses to it and silently keeps the vendored row layout + 20px gap. */
footer div.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  color: var(--muted);
}
.footer-col .eyebrow {
  margin: 0 0 4px;
}
.footer-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-tagline {
  max-width: 22ch;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.footer-contact-hours {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

/* Reuses .hero's decorative orbits/glow but drops its search-shell/trust-row
   children, so it needs its own min-height (the vendored 595px assumes the
   search form is present). */
.not-found-hero {
  min-height: 460px;
  display: flex;
  align-items: center;
}
.not-found-code {
  margin: 18px 0 0;
  font-size: clamp(90px, 16vw, 220px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--ink);
  opacity: 0.08;
}
.not-found-title {
  margin: -0.6em 0 0;
  max-width: 780px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.not-found-title span {
  color: var(--blue);
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 720px) {
  .not-found-hero {
    min-height: 0;
  }
  .not-found-code {
    font-size: clamp(70px, 26vw, 120px);
  }
}

.similar-listings {
  margin: 27px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.similar-listings h3 {
  margin: 0 0 14px;
  font-size: 15px;
}

@media (max-width: 720px) {
  .demo-note,
  .subscribe-card > small {
    font-size: 11px;
  }
  .field-content small,
  .company-meta small {
    font-size: 12px;
  }
  .pay-block span,
  .contact-unlocked small {
    font-size: 11px;
  }
  .trust-row span {
    font-size: 13px;
  }
}

.location-line {
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}
.tag-row span {
  font-size: 12px;
}
.details-button {
  font-size: 13px;
}

.category-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-top: 3px;
  border-radius: var(--radius-full);
  background: rgba(49, 87, 255, 0.1);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.modal-facts > span {
  font-size: 13px;
}
.contact-locked strong,
.contact-unlocked strong {
  font-size: 15px;
}
.contact-locked span,
.contact-unlocked small {
  font-size: 12px;
}
.contact-locked button,
.contact-unlocked button {
  font-size: 12px;
}
.safety-note {
  font-size: 11px;
}

/* Dwelling only, via `main_image` on ListingPresentationMixin — Job/Track/
   Poster have no thumb, so the card template omits this block for them.
   Bleeds to the card's edges past design-system.css's 23px .listing-card padding. */
.card-thumb {
  overflow: hidden;
  margin: -23px -23px 15px;
  aspect-ratio: 16 / 9;
  background: var(--paper);
}
.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Promoted (ads.services top/highlight purchase) — border on top of
   design-system.css's .listing-card.featured::after corner blob. */
.listing-card.featured {
  border-width: 2px;
  border-color: var(--lime);
  box-shadow: 0 8px 24px rgba(223, 255, 84, 0.35);
}
.listing-card.featured:hover {
  border-color: var(--lime-dark);
  box-shadow: 0 15px 36px rgba(223, 255, 84, 0.45);
}

/* .listing-grid stretches every card to the tallest one in its row (grid's
   default align-items: stretch), but design-system.css lays out card content
   as plain block flow — so with optional blocks (featured-label, tag-row)
   present on some cards and not others, .card-footer ends up at a different
   height instead of pinned to the bottom. Flex column + margin-top: auto pins
   it regardless of how much optional content precedes it. */
.listing-card {
  display: flex;
  flex-direction: column;
}
.listing-card .card-footer {
  margin-top: auto;
}

/* Create-ad form is a standalone page, not a modal (the field list is too long
   for .listing-modal/.action-modal) — modeled on bazar.club's create-listing
   forms: a sequence of separate floating white cards (one per concern —
   description, details, photos, contacts) rather than one long undifferentiated
   card, built from the same atomic .search-field/.field-content/.form-row/
   .primary-button/.outline-button pieces used elsewhere in this app. */
.ad-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
}
.ad-form-page .section-heading {
  display: block;
  max-width: 640px;
  margin: 0 auto 28px;
}
.ad-form-page > .form-error {
  max-width: 640px;
  margin: 0 auto 18px;
}
.ad-form-page-subtitle {
  margin: 6px 0 0;
  max-width: 480px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.ad-form-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
}
/* bazar.club's own section headings ("Описание", "Заголовок", "Фото",
   "Контактная информация") are plain bold near-black text, not this app's
   usual tiny muted uppercase kicker style — matched literally here since
   this is the one page directly modeled on that reference. */
.ad-form-card h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ad-form-card-hint {
  margin: -6px 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.ad-form-card-divider {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* .ad-form-card/.ad-form-card-divider set display:flex, which otherwise beats
   the [hidden] attribute's UA-stylesheet display:none when both a class and
   [hidden] apply to the same element — this restores the hide. */
.ad-form-card[data-section-fields][hidden],
.ad-form-card-divider[data-section-fields][hidden] {
  display: none;
}

/* bazar.club drops the floating-card chrome entirely below tablet width —
   sections there are flat, edge-to-edge, separated by heading + whitespace
   alone, not by a bordered/shadowed box. Match that rather than keeping the
   desktop card shrunk down (which just reads as a boxed layout with less
   room to work in). */
@media (max-width: 720px) {
  .ad-form {
    gap: 32px;
  }
  .ad-form-card {
    gap: 16px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.required-mark {
  margin-left: 2px;
  color: #c0271f;
}
.field-hint-inline {
  margin-left: 4px;
  color: #b3b6a9;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.ad-form-submit-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ad-form-submit-row .ad-form-card-hint {
  margin: 0;
  flex: 1;
}
/* bazar.club's own submit button is its saturated brand green, standing out
   from the plain black/outline buttons elsewhere on its page — closest
   equivalent here is --lime, this app's own dedicated "CTAs, paywall,
   highlights" accent (design-system.css), rather than the neutral --ink
   .primary-button uses everywhere else. */
.ad-form-submit-row .primary-button {
  flex: 0 0 auto;
  background: var(--lime);
  color: var(--ink);
}
.ad-form-submit-row .primary-button:hover {
  background: var(--lime-dark);
}
@media (max-width: 560px) {
  .ad-form-submit-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ad-form-submit-row .primary-button {
    text-align: center;
  }
}

/* bazar.club presents every field as a plain label sitting above a single
   bordered white input — no icon badge, no filled --paper wrapper around
   label+input — unlike this app's hero-style icon+pill molecule. Overridden
   here, scoped to the ad form only: every other use of .search-field
   (hero, filters) keeps the original molecule untouched. */
.ad-form .search-field {
  display: block;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
}
/* The city-picker packs an input + a clear button into one .search-field —
   that one needs to stay a flex row (the flattened rule above would stack
   them), just without the icon column. */
.ad-form .search-field.city-picker {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.ad-form .field-icon {
  display: none;
}
.ad-form .field-content {
  gap: 6px;
}
.ad-form .field-content small {
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-size: 12.5px;
  font-weight: 700;
}
.ad-form .field-content input,
.ad-form .field-content select,
.ad-form .field-content textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 14px;
  transition: border-color var(--ease-fast) ease, box-shadow var(--ease-fast) ease;
}
.ad-form .field-content input:focus,
.ad-form .field-content select:focus,
.ad-form .field-content textarea:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 87, 255, 0.1);
}
.ad-form .search-field--textarea {
  padding: 0;
  min-height: 0;
}
.ad-form .search-field--textarea textarea {
  margin-top: 0;
  border-radius: var(--radius-md);
}

/* Category + country on one row, city on its own full-width row below — city
   keeps the full card width rather than splitting into a 3rd column since its
   placeholder/typed value needs more room than a third-width column gives it. */
.ad-form-location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ad-form-location-grid .city-picker {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .ad-form-location-grid {
    grid-template-columns: 1fr;
  }
  .ad-form-location-grid .city-picker {
    grid-column: auto;
  }
}

/* Repeating formset entries (resume_ai/form.html's experience/education/languages
   rows) nest inside an .ad-form-card — each row gets its own subtle sub-card so a
   card with several entries still reads as distinct items, not one long field list. */
.formset-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.formset-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.formset-row .outline-button {
  align-self: flex-start;
}

/* Same segmented-control look as .mode-switch, without that class's negative
   margin (it's meant to float over the hero search card, not a plain page flow). */
.type-switch {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
}
.type-switch button {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.type-switch button.active {
  background: var(--ink);
  color: #fff;
}

.search-field--textarea {
  align-items: flex-start;
  min-height: 140px;
  padding: 16px 21px;
}
.search-field--textarea textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  margin-top: 3px;
  resize: vertical;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  font: inherit;
  color: inherit;
  transition: border-color var(--ease-fast) ease, box-shadow var(--ease-fast) ease;
}
.search-field--textarea textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(49, 87, 255, 0.1);
}

.char-counter {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
.char-counter--warn {
  color: var(--orange);
}

.photo-dropzone {
  padding: 24px;
  text-align: center;
  background: var(--paper);
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--ease-base) ease, background var(--ease-base) ease;
}
.photo-dropzone--active {
  background: #fff;
  border-color: var(--blue);
}
.photo-dropzone-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.photo-dropzone-prompt svg {
  width: 28px;
  height: 28px;
}
.photo-dropzone-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.photo-dropzone-previews:empty {
  margin-top: 0;
}
.photo-dropzone-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.form-error {
  margin-bottom: 4px;
  padding: 12px 16px;
  background: rgba(255, 122, 61, 0.12);
  color: #a4441c;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
}
.form-error ul {
  margin: 0;
  padding-left: 18px;
}

/* A plain .safety-note (tiny muted fine print, shared with the contact-gate
   disclaimer) read as too easy to miss for an actual submit-blocking
   requirement — this needs to catch the eye. */
.contact-required-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 14px;
  background: rgba(224, 41, 30, 0.08);
  border: 1px solid rgba(224, 41, 30, 0.25);
  border-radius: var(--radius-md);
  color: #c0271f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.contact-required-note svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill--active {
  background: rgba(66, 184, 131, 0.15);
  color: #1f7a52;
}
.status-pill--moderation {
  background: rgba(49, 87, 255, 0.12);
  color: var(--blue);
}
.status-pill--draft {
  background: var(--paper);
  color: var(--muted);
}
.status-pill--rejected,
.status-pill--blocked {
  background: rgba(255, 122, 61, 0.15);
  color: #a4441c;
}
.status-pill--deleted,
.status-pill--expired {
  background: rgba(20, 21, 17, 0.08);
  color: var(--muted);
}
.status-pill--promoted {
  background: var(--lime);
  color: #14150f;
}

.countdown-badge {
  font-size: 12px;
  color: var(--muted);
}

.my-ads-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.my-ads-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.my-ads-row-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.my-ads-row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-ads-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.my-ads-row-main h4 {
  margin: 0;
  font-size: 15px;
}
.my-ads-row-main h4 a {
  color: inherit;
}
.my-ads-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.my-ads-row-date {
  color: var(--muted);
}
.my-ads-row-description {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.my-ads-row-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 2px;
}
.my-ads-row-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.my-ads-row-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}
.my-ads-row-contact span:not(:last-child)::after {
  content: "\2022";
  margin-left: 12px;
  color: var(--line);
}
.my-ads-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.my-ads-row-actions .outline-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.my-ads-row-actions .outline-button svg {
  width: 14px;
  height: 14px;
}
.my-ads-row-actions .outline-button span {
  margin-left: 0;
}
.my-ads-row-actions .outline-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .my-ads-row {
    flex-direction: column;
    align-items: stretch;
  }
  .my-ads-row-thumb {
    width: 100%;
    height: 160px;
    flex-basis: auto;
  }
  .my-ads-row-actions {
    justify-content: flex-end;
  }
}

.trust-row strong {
  font-size: 19px;
}
.trust-row span {
  font-size: 13px;
}
footer p,
footer small,
footer div:not(.brand) {
  font-size: 13px;
}
.steps-grid article > span {
  font-size: 14px;
}
.steps-grid h3 {
  font-size: 26px;
}
.steps-grid p {
  font-size: 15px;
}

/* Pricing page (templates/core/pages/pricing.html) — plan comparison cards,
   paid-listing/promotion price cards and an FAQ accordion, built from the
   same card/token vocabulary as .legal-card/.about-callout/.steps-grid
   rather than introducing a new visual language. */
.pricing-lead {
  max-width: 620px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.pricing-section {
  margin: 48px 0 0;
}
.pricing-subheading {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pricing-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.pricing-callout {
  margin: 20px 0 0;
  padding: 16px 20px;
  background: var(--paper);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.pricing-callout a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.pricing-callout a:hover {
  text-decoration: underline;
}

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
}
.plan-card--featured {
  border-color: var(--blue);
  background: rgba(49, 87, 255, 0.03);
  box-shadow: 0 18px 40px rgba(49, 87, 255, 0.1);
}
.plan-badge {
  position: absolute;
  top: -13px;
  right: 24px;
  margin: 0;
  padding: 6px 14px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-tag {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.plan-price {
  margin: 10px 0 0;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.plan-price-note {
  margin: 6px 0 3px;
  color: var(--muted);
  font-size: 12px;
}
.plan-features {
  flex: 1;
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 13px;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plan-features li::before {
  content: "\2713";
  flex: 0 0 auto;
  color: var(--blue);
  font-weight: 900;
}
.plan-cta {
  width: 100%;
  text-align: center;
}
.plan-footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.listing-price-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0 0;
}
.listing-price-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.listing-price-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
}
.listing-price {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.listing-price span {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.listing-price-card p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.promo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 0;
}
.promo-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.promo-card--accent {
  background: rgba(49, 87, 255, 0.05);
  border-color: rgba(49, 87, 255, 0.22);
}
.promo-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}
.promo-price {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.promo-price span {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.promo-card p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.pricing-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0 0;
}
.pricing-feature-grid article {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pricing-feature-grid h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
}
.pricing-feature-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.pricing-steps {
  margin-top: 14px;
}

.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0 0;
}
.pricing-faq-item {
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pricing-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 800;
}
.pricing-faq-item summary::-webkit-details-marker {
  display: none;
}
.pricing-faq-item[open] summary {
  color: var(--blue);
}
.pricing-faq-item p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .pricing-plans,
  .listing-price-cards,
  .promo-cards,
  .pricing-feature-grid,
  .pricing-faq-grid {
    grid-template-columns: 1fr;
  }
  .plan-price {
    font-size: 36px;
  }
}

/* templates/billing/_checkout_modal.html reuses the .pricing-plans/.plan-card cards from
   /pricing/ — widened past the vendored .action-modal's 520px so both tariff cards sit
   side by side within the modal (no horizontal scroll), with the cards themselves shrunk a
   little to fit comfortably. Falls back to the existing 720px stacking rule below on narrow
   viewports, same as /pricing/ itself. */
.checkout-modal {
  width: min(100%, 720px);
}
.checkout-modal .plan-card {
  padding: 22px;
}
.checkout-modal .plan-price {
  font-size: 34px;
}
.checkout-modal .plan-features {
  margin: 16px 0;
  padding-top: 14px;
}

.plan-carousel {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}
.plan-carousel-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.plan-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform 0.3s ease;
  will-change: transform;
}
.plan-carousel-slide {
  flex: 0 0 300px;
  width: 300px;
  min-height: 320px;
  opacity: 0.4;
  transform: scale(0.92);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.plan-carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.plan-carousel-slide .plan-title {
  min-height: 30px;
}
.plan-carousel-slide form {
  margin-top: auto;
}
/* .plan-badge normally straddles the card's top edge (top:-13px) — .plan-carousel-viewport's
   overflow:hidden (needed to hide the off-screen peek slides horizontally) would clip that.
   Pull it fully inside the card here instead of adjusting the viewport's overflow. */
.plan-carousel-slide .plan-badge {
  top: 10px;
}
.plan-carousel-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}
.plan-carousel-arrow:hover {
  background: var(--paper);
}
.plan-carousel-arrow svg {
  width: 18px;
  height: 18px;
}
.plan-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.plan-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.plan-carousel-dot.active {
  background: var(--blue);
  transform: scale(1.25);
}

@media (max-width: 560px) {
  .plan-carousel {
    max-width: 100%;
    gap: 8px;
  }
  .plan-carousel-slide {
    flex-basis: 240px;
    width: 240px;
    min-height: 300px;
  }
  .plan-carousel-arrow {
    width: 34px;
    height: 34px;
  }
}

.section-heading h2.top-cities-heading {
  letter-spacing: 0.025em;
}

/* .subscribe-card's CTA embeds an inline arrow svg; unlike every other
   icon-bearing button in design-system.css, .primary-button has no
   `svg { width/height }` rule, so the unsized svg falls back to the
   browser's 300x150 replaced-element default and blows the button up. */
.subscribe-card .primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.subscribe-card .primary-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Compact "already subscribed" status shown in place of the trial-price
   pitch when the viewer already has an active subscription. */
.subscribe-card .subscribe-status {
  margin: 24px 0 0;
}
.subscribe-card .subscribe-status strong {
  font-size: 13px;
}
.subscribe-card .manage-subscription-link {
  display: block;
  margin-top: 14px;
  text-align: center;
}