/* ============================================================
   DesiInVidesi — the site theme.

   Lifted out of desiinvidesi.html on 2026-08-11 so that signup.html can use
   the *same* stylesheet rather than a copy. The first attempt at moving the
   signup wizard extracted "the rules the markup mentions" — 78 of them — and
   the result did not look like the rest of the site: the Continue button was
   present but unstyled, and the wizard looked unfinished.

   Selecting rules by hand was the mistake. One stylesheet, linked by both
   pages, cannot drift and cannot miss anything.
   ============================================================ */

  :root {
    --saffron: #F75B06;
    --green: #F75B06;
    --navy: #2F2F2F;
    --cream: #FFF4EC;
    --gold: #FFB37A;
    --ink: #1a1a2e;
    --muted: #6b7280;
    --card: #ffffff;
    --shadow: 0 8px 30px rgba(47, 47, 47, 0.08);
    --shadow-hover: 0 14px 40px rgba(47, 47, 47, 0.15);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.55;
  }

  /* Top promo bar */
  .promo-bar {
    background: linear-gradient(90deg, var(--saffron), var(--gold), var(--green));
    color: white;
    text-align: center;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
  }
  .promo-bar a { color: #fff; text-decoration: underline; }

  /* Header */
  header {
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .nav-wrap {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    gap: 20px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    text-decoration: none;
  }
  .logo-mark {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--saffron), var(--green));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 18px;
  }
  .logo span { color: var(--saffron); }

  nav ul {
    display: flex;
    gap: 2px;
    list-style: none;
  }
  /* the | between items — same treatment as header.js (2026-09-24 ask) */
  nav ul > li + li::before { content: "|"; color: #dccfc0; margin: 0 3px 0 1px; font-weight: 400; }
  /* only between top-level menu links — never inside a dropdown list (2026-10-16) */
  nav ul ul > li::before { content: none; }
  /* the pipe is the STRIP's separator; inside the More dropdown it printed on
     a line of its own between entries (2026-10-03, reported as a line break) */
  .more-menu li + li::before { content: none; }
  nav a {
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s;
  }
  nav a { padding: 4px 7px; border-radius: 999px; display: inline-block; line-height: 1.2; transition: background .15s, color .15s; }
  nav a:hover { color: var(--saffron); background: #FFF1E6; }
  /* the current page, and the item just clicked (2026-09-26): a saffron pill */
  nav a.active, nav a.pressed { background: var(--saffron); color: #fff; font-weight: 700; }
  nav a.nav-deals {
    color: #fff;
    background: linear-gradient(135deg, var(--saffron), #c2430a);
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(247,91,6,.28);
    white-space: nowrap;
  }
  nav ul { align-items: center; }
  /* ribbon scroll arrows (2026-09-24) — match header.js's .dvh-scr */
  header nav { position: relative; display: flex; align-items: center; }
  header nav > ul { flex: 1 1 auto; min-width: 0; }
  .nav-scr {
    flex: 0 0 auto; margin: 0 2px;
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e5d9cb;
    background: #fff; color: #8a5a2a; font-size: 16px; line-height: 21px;
    text-align: center; padding: 0; cursor: pointer; display: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
  }
  .nav-scr:hover { color: var(--saffron); border-color: var(--saffron); }
  header nav.can-l .nav-scrL { display: block; }
  header nav.can-r .nav-scrR { display: block; }
  nav a.nav-deals:hover { color: #fff; filter: brightness(1.05); }

  /* THE STRIP AT EVERY WIDTH (2026-08-30, asked for): row one is the logo
     and the header controls; row two is the whole menu in one horizontally
     scrolling line. "More \25be" is retired — same shape as header.js. */
  .nav-wrap { flex-wrap: wrap; }
  /* the RIBBON: a light band behind the whole menu row, admin-tinted via
     --menu-bg (Pages & Banners -> Home page). The BAND is full-bleed — the
     same width as the hero — while the items stay in the 1280 container;
     overflow-x:clip on the header absorbs the 100vw scrollbar sliver. */
  header { overflow-x: clip; }
  /* the band is a pseudo-element, not negative margins (2026-10-03, reported
     from a 1920px Windows screen: "the menu overlaps the logo and the
     location"): flex wrapping measures an item with its margins, and the
     negative ones shrank the strip until it fitted beside the logo. Same fix
     as header.js. */
  header nav {
    flex: 1 1 100%; order: 10; min-width: 0;
    position: relative; background: transparent;
  }
  header nav::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: calc(50% - 50vw); right: calc(50% - 50vw);
    background: var(--menu-bg, #FFF7F0); z-index: -1;
  }
  header nav > ul {
    /* a plain box on a desktop (2026-10-03, reported: "More gives a
       scrollbar"): the dropdown opens inside this list and a scrolling list
       traps it; the priority nav keeps the row within its width. Phones
       scroll — see the 900px block. */
    flex-wrap: nowrap; overflow: visible; gap: 2px;      /* minimal spacing (2026-09-26 ask) */
    -webkit-overflow-scrolling: touch;
    max-width: 1280px; margin: 0 auto;
    padding: 8px 12px;
    /* a VISIBLE thin scrollbar so items past the edge read as scrollable */
    scrollbar-width: thin;
    scrollbar-color: #dcc3a8 transparent;
  }
  header nav > ul::-webkit-scrollbar { height: 6px; }
  header nav > ul::-webkit-scrollbar-thumb { background: #dcc3a8; border-radius: 3px; }
  header nav > ul::-webkit-scrollbar-track { background: transparent; }
  header nav > ul li { flex: 0 0 auto; }
  li.nav-more { display: none; }
  header nav li { white-space: nowrap; }
  header nav a { white-space: nowrap; }
  li.nav-more { position: relative; }
  .more-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
  .more-menu {
    display: none; position: absolute; top: calc(100% + 12px); right: 0;
    background: #fff; border: 1px solid #e8e4de; border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.16); padding: 8px; min-width: 200px;
    list-style: none; z-index: 200;
  }
  li.nav-more.open .more-menu { display: block; }
  .more-menu li { display: block; }
  .more-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
  .more-menu a:hover { background: var(--cream); color: var(--saffron); }
  .more-menu a.nav-deals { color: #fff; }

  .header-cta {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 0 0 auto;
  }
  .hdr-link {
    background: none; border: none; color: var(--navy);
    font-weight: 600; font-size: 14px; cursor: pointer; padding: 8px 2px;
  }
  .hdr-link:hover { color: var(--saffron); }
  .btn {
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
  }
  .btn-outline {
    background: white;
    color: var(--navy);
    border: 1.5px solid var(--navy);
  }
  .btn-outline:hover { background: var(--navy); color: white; }
  .btn-primary {
    background: var(--saffron);
    color: white;
  }
  .btn-primary:hover { background: #c2430a; transform: translateY(-1px); }
  .btn-large { padding: 14px 28px; font-size: 16px; }

  /* Hero */
  .hero {
    background:
      /* the two colours are admin-set (Admin → Pages & Banners → Home page → Hero background colour, 2026-10-20);
         unset = the original orange */
      linear-gradient(135deg, var(--home-hero-from, rgba(247,91,6,0.94)), var(--home-hero-to, rgba(194,67,10,0.94))),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
    color: white;
    /* the site's ONE hero stature, ~333px like the Immigration hero
       (2026-09-22, asked for) — the spacing below is compressed to fit */
    padding: 20px 24px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(247,91,6,0.32), transparent 70%);
    border-radius: 50%;
  }
  /* an uploaded hero photo shows its own colours: no orange glow over it */
  .hero.has-photo::before { display: none; }
  .hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
  }
  .hero h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
  }
  .hero h1 .accent { color: #FFD9B8; }
  .hero p.tagline {
    font-size: 17px;
    opacity: 0.95;
    margin-bottom: 14px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .btn-hero-primary {
    background: var(--saffron);
    color: white;
  }
  .btn-hero-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
  }
  .btn-hero-outline:hover { background: white; color: var(--navy); }

  /* Search bar */
  .search-bar {
    max-width: 940px;
    margin: 0 auto;
    background: white;
    border-radius: 50px;
    padding: 6px;
    display: flex;
    align-items: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  }
  .search-bar select, .search-bar input {
    border: none;
    padding: 14px 18px;
    font-size: 15px;
    outline: none;
    background: transparent;
  }
  .search-bar select {
    border-right: 1px solid #eee;
    color: var(--navy);
    font-weight: 600;
    /* the category picker stays compact so the extra bar width goes to
       the search TEXT, not to "All Categories" */
    flex: 0 0 auto;
    max-width: 185px;
    text-overflow: ellipsis;
  }
  .search-bar input { flex: 1; }
  /* the city field: a narrower second box with its own left rule */
  .search-bar #heroSearchCity { flex: 0 1 170px; border-left: 1px solid #e8e4de; }
  .search-bar button {
    background: var(--green);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 700;
    cursor: pointer;
  }
  .search-bar button:hover { background: #b84200; }

  .hero-stats {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .stat { text-align: center; }
  .stat .num {
    font-size: 32px;
    font-weight: 800;
    color: var(--saffron);
  }
  .stat .label { font-size: 14px; opacity: 0.9; }

  /* Sections */
  section { padding: 70px 24px; }
  .container {
    max-width: 1280px;
    margin: 0 auto;
  }
  .section-title {
    text-align: center;
    margin-bottom: 50px;
  }
  .section-title h2 {
    font-size: 36px;
    color: var(--navy);
    margin-bottom: 10px;
    font-weight: 800;
  }
  .section-title p {
    color: var(--muted);
    font-size: 17px;
  }

  /* Features grid */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
  }
  .feature-card {
    background: var(--card);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: var(--shadow);
    transition: transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    border-top: 4px solid transparent;
  }
  .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-top-color: var(--saffron);
  }
  .feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--saffron), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
    color: white;
  }
  .feature-card.green .feature-icon { background: linear-gradient(135deg, var(--saffron), var(--gold)); }
  .feature-card.navy .feature-icon { background: linear-gradient(135deg, var(--saffron), var(--gold)); }
  .feature-card.gold .feature-icon { background: linear-gradient(135deg, var(--saffron), var(--gold)); }
  .feature-card h3 {
    font-size: 19px;
    margin-bottom: 8px;
    color: var(--navy);
    font-weight: 700;
  }
  .feature-card p {
    color: var(--muted);
    font-size: 14.5px;
  }

  /* Banner ad */
  .banner-ad {
    max-width: 1280px;
    margin: 30px auto;
    padding: 0 24px;
  }
  .ad-box {
    background: linear-gradient(90deg, #fff3e0, #fff8e7);
    border: 2px dashed var(--saffron);
    padding: 18px 24px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .ad-box .ad-label {
    background: var(--saffron);
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .ad-box strong { color: var(--navy); }
  .ad-box .ad-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 260px;
    /* The text fragments inside are flex ITEMS in a row: without wrapping,
       a long sentence lays out at its full one-line width — 418px on the
       partner banner — and pans the whole phone page sideways. */
    flex-wrap: wrap;
  }

  /* Membership */
  /* Connected businesses on the final sign-up step — compact chips, so the
     step stays short. The full filterable list lives on premium-partners.html. */
  .conn-count { font-weight: 600; color: var(--muted); font-size: 12px; }
  .conn-count b { color: var(--saffron); font-weight: 800; }
  .conn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
  .conn-chip {
    display: flex; flex-direction: column; gap: 1px;
    border: 1.5px solid #e6e1db; border-radius: 10px; background: #fff;
    padding: 8px 12px; text-decoration: none; min-width: 128px;
    transition: border-color .15s, transform .15s;
  }
  .conn-chip:hover { border-color: var(--saffron); transform: translateY(-1px); }
  .conn-chip.has-perk { border-color: #f0d9a0; background: #fffdf6; }
  .conn-chip .cc-name { font-size: 13px; font-weight: 700; color: var(--navy); }
  .conn-chip .cc-cat { font-size: 11px; color: var(--muted); }
  .conn-chip .cc-perk {
    font-size: 10px; font-weight: 800; color: #b45309; text-transform: uppercase;
    letter-spacing: .3px; margin-top: 3px;
  }
  .conn-chip.conn-browse { flex-direction: row; align-items: center; font-size: 13px;
    font-weight: 700; color: var(--saffron); }
  .offer-seeall {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff8ee; border: 1.5px solid #f3d9ad; border-radius: 10px;
    padding: 11px 14px; margin: 2px 0 14px;
  }
  .offer-seeall a {
    font-weight: 800; color: #fff; text-decoration: none; font-size: 13px;
    background: var(--saffron); border-radius: 8px; padding: 8px 14px;
    white-space: nowrap;
  }
  .offer-seeall a:hover { background: #d94e04; }
  .offer-seeall span { color: var(--muted); font-size: 12px; }

  .membership {
    background: linear-gradient(135deg, var(--navy), #4a4a4a);
    color: white;
  }
  .membership .section-title h2 { color: white; }
  .membership .section-title p { color: rgba(255,255,255,0.8); }
  .plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
  }
  .plan {
    background: white;
    color: var(--ink);
    padding: 36px 28px;
    border-radius: 14px;
    position: relative;
  }
  .plan.featured {
    transform: scale(1.04);
    border: 3px solid var(--saffron);
  }
  .plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--saffron);
    color: white;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
  }
  .plan h3 {
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .plan .price {
    font-size: 42px;
    font-weight: 800;
    color: var(--saffron);
    margin: 16px 0;
  }
  .plan .price small {
    font-size: 16px;
    color: var(--muted);
    font-weight: 500;
  }
  .plan ul {
    list-style: none;
    margin: 20px 0;
    text-align: left;
  }
  .plan ul li {
    padding: 8px 0;
    color: var(--ink);
    font-size: 14.5px;
    border-bottom: 1px solid #f0f0f0;
  }
  .plan ul li::before {
    content: '✓';
    color: var(--green);
    font-weight: 700;
    margin-right: 8px;
  }
  .plan button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
  }
  .plan .btn-plan-free { background: #f0f0f0; color: var(--navy); }
  .plan .btn-plan-paid { background: var(--saffron); color: white; }

  /* Listings preview */
  .listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
  }
  .listing-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
  }
  .listing-card:hover { transform: translateY(-4px); }
  .listing-image {
    height: 160px;
    background: linear-gradient(135deg, #ffe8cc, #ffd2ab);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
  }
  .listing-body { padding: 18px; }
  .listing-tag {
    display: inline-block;
    background: var(--cream);
    color: var(--saffron);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .listing-card h4 {
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .listing-card .meta {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
  }
  .listing-card .price-tag {
    font-weight: 700;
    color: var(--green);
    font-size: 17px;
  }

  /* CTA strip */
  .cta-strip {
    background: linear-gradient(90deg, var(--saffron), var(--gold));
    color: white;
    padding: 50px 24px;
    text-align: center;
  }
  .cta-strip h2 {
    font-size: 32px;
    margin-bottom: 14px;
  }
  .cta-strip p {
    font-size: 17px;
    margin-bottom: 24px;
    opacity: 0.95;
  }
  .cta-strip .btn {
    background: white;
    color: var(--saffron);
    font-weight: 700;
  }

  /* Footer */
  footer {
    background: var(--navy);
    color: rgba(255,255,255,0.8);
    padding: 60px 24px 24px;
  }
  .footer-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
  }
  .footer-col h4 {
    color: white;
    margin-bottom: 18px;
    font-size: 16px;
  }
  .footer-col ul { list-style: none; }
  .footer-col ul li {
    padding: 5px 0;
    font-size: 14px;
  }
  .footer-col ul li a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
  }
  .footer-col ul li a:hover { color: var(--saffron); }
  .footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    margin: 12px 0;
  }
  .social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }
  .social a {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: background 0.2s;
  }
  .social a:hover { background: var(--saffron); }
  .footer-bottom {
    max-width: 1280px;
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
  }

  /* Modal */
  .modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(47,47,47,0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal.active { display: flex; }
  .modal-content {
    background: white;
    padding: 36px;
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    position: relative;
  }
  .modal-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--muted);
  }
  .modal h3 {
    color: var(--navy);
    margin-bottom: 20px;
    font-size: 24px;
  }
  .modal form { display: flex; flex-direction: column; gap: 12px; }
  .modal input, .modal select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
  }
  .modal input:focus { border-color: var(--saffron); }
  .modal .btn-primary { padding: 13px; font-size: 15px; margin-top: 8px; }
  .modal-footer {
    text-align: center;
    margin-top: 16px;
    color: var(--muted);
    font-size: 14px;
  }
  .modal-footer a { color: var(--saffron); text-decoration: none; font-weight: 600; }

  /* Wizard styles */
  .modal-content.wizard {
    max-width: 560px;
    padding: 28px 30px;
    max-height: 92vh;
    overflow-y: auto;
  }
  .steps {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    gap: 6px;
  }
  .step-dot {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    transition: background 0.3s;
  }
  .step-dot.active { background: var(--saffron); }
  .step-dot.done { background: var(--green); }
  .step-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 480px) { .row-2 { grid-template-columns: 1fr; } }
  .wizard-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }
  .wizard-actions .btn { flex: 1; }
  .btn-secondary {
    background: #f3f4f6;
    color: var(--navy);
  }
  .btn-secondary:hover { background: #e5e7eb; }
  .field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    display: block;
  }
  .form-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--saffron);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 8px;
  }
  .field-error {
    display: none;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    margin-top: 5px;
  }
  .field-error.show { display: block; }
  .modal input.input-invalid, .modal select.input-invalid { border-color: #dc2626; }
  .basic-info-title { font-weight: 700; font-size: 15px; color: #111827; }
  .basic-info-sub { font-size: 13px; color: #6b7280; margin-top: 2px; }
  .bday-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 8px; }
  /* Without this a grid item refuses to shrink below the intrinsic width of
     an <input>, so on a narrow screen the Year field is pushed off the edge.
     Only visible once the wizard moved to a full-width page. */
  .bday-grid > * { min-width: 0; }
  .bday-grid select { height: 43px; padding-top: 0; padding-bottom: 0; }
  .why-ask { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--saffron); text-decoration: none; font-weight: 600; }
  .why-ask:hover { text-decoration: underline; }
  .why-ask-text { display: none; margin-top: 8px; font-size: 12.5px; color: #6b7280; line-height: 1.5; }
  .why-ask-text.show { display: block; }
  .phone-group { display: flex; gap: 8px; }
  .phone-group select { flex: 0 0 132px; }
  .phone-group input { flex: 1; }
  .social-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin: 16px 0 12px;
  }
  .social-divider::before, .social-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
  }
  .social-divider::before { margin-right: 12px; }
  .social-divider::after { margin-left: 12px; }
  .btn-social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
  }
  .btn-social:hover { background: #f9fafb; }
  .btn-social .g  { color: #4285F4; font-weight: 800; font-family: Arial, sans-serif; }
  .btn-social .fb { color: #1877F2; font-weight: 800; font-family: Georgia, serif; }
  .gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0 18px;
  }
  .gift-option {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
  }
  .gift-option:hover { border-color: var(--saffron); }
  .gift-option.selected {
    border-color: var(--saffron);
    background: #fff7ec;
    box-shadow: 0 4px 14px rgba(247,91,6,0.2);
  }
  .gift-option .gift-emoji { font-size: 28px; display: block; margin-bottom: 4px; }
  .gift-option .gift-name { font-size: 13px; font-weight: 600; color: var(--navy); }
  .gift-empty { grid-column: 1/-1; font-size: 12.5px; color: var(--muted); padding: 10px 2px; }
  .partner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 16px;
  }
  .partner-chip {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: var(--green);
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .partner-chip::before {
    content: '';
    width: 7px; height: 7px;
    background: var(--green);
    border-radius: 50%;
  }
  /* "Become an Annual Premier Member" card — a solid double-tone border and a
     corner ribbon read as a real offer; the old dashed box read as a
     placeholder that had not been designed yet. */
  .premier-cta {
    position: relative;
    background: linear-gradient(160deg, #fffaf2 0%, #fff 55%);
    border: 1px solid #f3d9ad;
    border-radius: 14px;
    padding: 20px 18px 18px;
    margin: 14px 0;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 8px 20px -12px rgba(180,83,9,.35);
  }
  .premier-cta::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(120deg, var(--saffron), #ffd08a, var(--saffron));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .premier-ribbon {
    position: absolute; top: 12px; right: -30px;
    transform: rotate(40deg);
    background: var(--saffron);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 34px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }
  .premier-cta-head { display: flex; align-items: flex-start; gap: 12px; }
  .premier-cta-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--saffron), #ffb347);
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    box-shadow: 0 4px 10px rgba(247,91,6,.28);
  }
  .premier-cta h4 {
    color: var(--navy);
    margin-bottom: 4px;
    font-size: 16px;
  }
  .premier-cta p {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 0;
    line-height: 1.5;
  }
  .premier-cta .pct { color: var(--saffron); font-weight: 800; }
  .gift-summary {
    background: #f9fafb;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .gift-summary .gs-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .gift-summary .gs-emoji { font-size: 28px; }
  .gift-summary .gs-name { font-weight: 600; color: var(--navy); font-size: 14px; }
  .gift-summary .gs-sub { color: var(--muted); font-size: 12px; }
  .gift-summary button {
    background: none;
    border: none;
    color: var(--saffron);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
  }
  .demo-note {
    background: #fef3c7;
    color: #92400e;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin: 8px 0 4px;
    text-align: center;
  }
  .wiz-step { display: none; }
  .wiz-step.active { display: block; animation: fadeIn 0.25s; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  /* Website Builder section */
  .builder-section {
    background: linear-gradient(180deg, #fff8e7, #ffffff);
  }
  .builder-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 50px;
  }
  .builder-intro h2 {
    font-size: 38px;
    color: var(--navy);
    margin-bottom: 14px;
    font-weight: 800;
    line-height: 1.15;
  }
  .builder-intro h2 .accent { color: var(--saffron); }
  .builder-intro p {
    color: var(--muted);
    font-size: 17px;
    margin-bottom: 20px;
  }
  .builder-features {
    list-style: none;
    margin: 18px 0 24px;
  }
  .builder-features li {
    padding: 6px 0;
    color: var(--ink);
    font-size: 15px;
  }
  .builder-features li::before {
    content: '✓';
    color: var(--green);
    font-weight: 800;
    margin-right: 10px;
  }
  .url-mock {
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 15px;
    color: var(--navy);
    box-shadow: var(--shadow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .url-mock .protocol { color: var(--muted); }
  .url-mock .slug { color: var(--saffron); font-weight: 700; }
  .url-mock .cursor {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: var(--saffron);
    animation: blink 1s steps(2) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .builder-preview {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(47,47,47,0.15);
    overflow: hidden;
    transform: rotate(-1deg);
    transition: transform 0.3s;
  }
  .builder-preview:hover { transform: rotate(0deg) scale(1.02); }
  .browser-bar {
    background: #f3f4f6;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;
  }
  .browser-dot { width: 11px; height: 11px; border-radius: 50%; background: #ccc; }
  .browser-dot.r { background: #ff5f57; }
  .browser-dot.y { background: #ffbd2e; }
  .browser-dot.g { background: #28c941; }
  .browser-url {
    background: white;
    flex: 1;
    margin-left: 8px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--muted);
    font-family: monospace;
  }
  .preview-content {
    padding: 30px 24px;
    text-align: center;
    background: linear-gradient(135deg, #fff7ec, #fff);
  }
  .preview-content .logo-circle {
    width: 70px; height: 70px;
    background: linear-gradient(135deg, var(--saffron), var(--gold));
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: white;
  }
  .preview-content h4 {
    color: var(--navy);
    margin-bottom: 4px;
    font-size: 20px;
  }
  .preview-content .tag {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 14px;
  }
  .preview-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0;
    font-size: 12px;
    color: var(--navy);
    font-weight: 600;
  }
  .preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 0 6px;
  }
  .preview-tile {
    background: #f9fafb;
    height: 50px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }

  /* Templates grid */
  .templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 14px;
  }
  .template-card {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.25s;
    border: 2px solid transparent;
  }
  .template-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
  .template-card.selected {
    border-color: var(--saffron);
    box-shadow: 0 0 0 4px rgba(247,91,6,0.2), var(--shadow-hover);
  }
  .template-thumb {
    height: 186px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: white;
    position: relative;
  }
  .template-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.15));
  }
  /* A template that has a real builder behind it shows its real home page,
     shrunk, instead of an emoji on a gradient — so you can tell the designs
     apart before opening anything. The gradient stays as the placeholder
     while it loads, and for the designs that are still concepts. */
  .template-thumb.live { overflow: hidden; font-size: 0; }
  .template-thumb.live::after { background: linear-gradient(180deg, transparent 62%, rgba(255,255,255,0.9)); }
  .template-thumb.live iframe {
    position: absolute; top: 0; left: 0; width: 1280px; border: 0; background: #fff;
    transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  }
  .template-thumb.live iframe.in { opacity: 1; }
  .template-thumb .emoji { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 50px; }
  .template-info {
    padding: 16px 18px;
  }
  .template-info h4 {
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 4px;
  }
  .template-info p {
    font-size: 13px;
    color: var(--muted);
  }
  .template-tag {
    display: inline-block;
    background: var(--cream);
    color: var(--saffron);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-top: 8px;
    letter-spacing: 0.5px;
  }

  /* Builder modal */
  .modal-content.builder {
    max-width: 720px;
    padding: 28px 30px;
    max-height: 92vh;
    overflow-y: auto;
  }
  .url-builder {
    background: linear-gradient(135deg, #fff7ec, #fff);
    border: 2px solid var(--saffron);
    border-radius: 12px;
    padding: 20px;
    margin: 14px 0 20px;
  }
  .url-builder-label {
    font-size: 12px;
    color: var(--saffron);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .url-builder-display {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 18px;
    color: var(--navy);
    margin-bottom: 14px;
    word-break: break-all;
  }
  .url-builder-display .domain { color: var(--muted); }
  .url-builder-display .your-slug {
    background: linear-gradient(transparent 65%, rgba(247,91,6,0.35) 65%);
    color: var(--navy);
    font-weight: 700;
    padding: 0 2px;
  }
  .slug-status {
    font-size: 12px;
    margin-top: 6px;
    font-weight: 600;
  }
  .slug-status.ok { color: var(--green); }
  .slug-status.bad { color: #c53030; }
  .preview-frame {
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    margin: 14px 0;
    border: 1px solid #e5e7eb;
  }
  .preview-frame .browser-url { background: #fff; }
  .preview-hero {
    padding: 32px 20px;
    color: white;
    text-align: center;
  }
  .preview-hero h3 { font-size: 22px; margin-bottom: 4px; }
  .preview-hero p { opacity: 0.9; font-size: 14px; }
  .preview-sections {
    background: white;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .preview-sec {
    background: #f9fafb;
    border-radius: 8px;
    padding: 14px 8px;
    text-align: center;
    font-size: 22px;
    border: 1px solid #f0f0f0;
  }
  .preview-sec span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  @media (max-width: 768px) {
    /* minmax(0,1fr), not 1fr: a bare 1fr track refuses to shrink below its
       content, and the url-mock's one-line monospace address is wider than a
       phone — the track grew past the screen and the WHOLE PAGE panned
       sideways, blank space on the right. minmax(0,…) lets the track shrink;
       the address scrolls inside its own card instead of dragging the page. */
    .builder-intro { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .builder-intro h2 { font-size: 30px; }
    .builder-intro > * { min-width: 0; }
    .url-mock { max-width: 100%; overflow-x: auto; }
    .ad-box .ad-content { min-width: 0; }
    .preview-sections { grid-template-columns: repeat(2, 1fr); }
  }

  /* The menu button. Hidden on a wide screen, where the nav itself is on show. */
  .nav-burger { display: none; }
  header .nav-wrap { position: relative; }

  /* Responsive */
  @media (max-width: 900px) {
    /* THE STRIP AND THE BURGER, TOGETHER. `display:none` hid the menu behind
       one button; the ask was the Buy & Sell pattern — the same links as a
       horizontally scrolling row, thumb-swipeable, with the burger kept for
       whoever prefers the full stacked list. The header wraps so the strip
       takes its own second row under logo/controls. */
    .nav-wrap { flex-wrap: wrap; }
    nav { flex: 1 1 100%; order: 10; min-width: 0; }
    header nav > ul { overflow-x: auto; }
    nav ul {
      display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 2px;
      padding: 2px 2px 10px; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    nav ul::-webkit-scrollbar { display: none; }
    nav ul li { white-space: nowrap; flex: 0 0 auto; }

    /* NO PHONE BURGER (2026-08-27, asked for): the strip above IS the menu —
       every link, one thumb-swipeable row — and the ☰ opened the same links
       again as a stacked drawer. Navigation twice. The drawer styles below
       stay for any page still carrying the button, but the button is gone. */
    /* ...and BACK (2026-10-03, asked for: "add a hamburger menu in the
       mobile view"): the strip stays, and the ☰ opens the same list stacked
       for whoever prefers it. */
    .nav-burger {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 36px; border: 1.5px solid #E3D9D0; border-radius: 10px;
      background: #fff; color: var(--navy); font-size: 18px; cursor: pointer; flex: 0 0 auto;
      /* after Login / Sign Up, at the row's end — the same place header.js
         puts it; before the strip (order 10) */
      order: 6;
    }
    /* one row on a phone: tighter gaps, and the bare "Post" word goes — the
       strip and the ☰ both reach the post page, as in header.js */
    .nav-wrap { gap: 10px; padding: 12px 16px; }
    .header-cta { gap: 8px; }
    .header-cta > a.hdr-link[href="post.html"] { display: none; }

    nav ul#nav-list.open {
      display: block; position: absolute; left: 0; right: 0; top: 100%;
      background: #fff; border-top: 1px solid #F0E7DE;
      box-shadow: 0 14px 28px rgba(80, 40, 10, .16);
      padding: 6px 0 calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 72vh; max-height: 72dvh; overflow-y: auto; z-index: 900;
      -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    nav ul#nav-list.open li { display: block; float: none; margin: 0; }
    /* stacked drawer: the pipes are a horizontal idea */
    nav ul#nav-list.open li + li::before { content: none; }
    nav ul#nav-list.open li a {
      display: block; padding: 13px 18px; font-size: 15.5px; border-radius: 0;
    }
    nav ul#nav-list.open li a:hover { background: #FBF7F3; }

    /* "More ▾" collects whatever did not fit on a wide screen. In a vertical
       list there is no overflow, so its contents belong in the list rather
       than behind a second tap. */
    nav ul#nav-list.open .nav-more { display: block !important; }
    nav ul#nav-list.open .nav-more > .more-btn { display: none; }
    nav ul#nav-list.open .more-menu {
      display: block; position: static; box-shadow: none; border: 0;
      padding: 0; margin: 0; min-width: 0; background: transparent;
    }
    .hero h1 { font-size: 36px; }
    .hero p.tagline { font-size: 17px; }
    .search-bar { flex-direction: column; border-radius: 14px; }
    /* in column direction the desktop flex-basis becomes HEIGHT — the City
       box was 170px tall with a lake of white above it (2026-09-22) */
    .search-bar select, .search-bar input { border: none; width: 100%; padding: 12px; flex: 0 0 auto; max-width: none; }
    .search-bar #heroSearchCity { flex: 0 0 auto; border-left: none; border-top: 1px solid #eee; }
    .search-bar select { border-bottom: 1px solid #eee; border-right: none; }
    .search-bar button { width: 100%; border-radius: 10px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .plan.featured { transform: scale(1); }
    .section-title h2 { font-size: 28px; }
  }
  @media (max-width: 500px) {
    .footer-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 24px; }
  }

  /* The Annual Premium badge, wherever a member's name appears — group member
     lists, post authors, business owners. One spelling, in DIVShop.crown(),
     so the header and the lists cannot drift apart. */
  .div-prem {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD24D, #F5A623);
    color: #4A2E00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
  }