/* Auric ARC design system.
   Five brand colours only: Porcelain, Charcoal Brown, Vivid Tangerine, Azure Blue, Neon Pink.
   Everything else here is a neutral derived from them. Type is the system sans; if a
   geometric face is ever licensed, swap --font once and the whole site follows. */
  :root {
    /* brand */
    --porcelain: #FDFFFC;
    --char: #3D3B30;
    --tang: #FF7F11;
    --azure: #007FFF;
    --pink: #F40076;
    /* derived surfaces */
    --bg: #EFF3F8;
    --panel: #FDFFFC;
    --sunk: #F5F7F9;
    --line: #E3E7EC;
    --ink: #3D3B30;
    --muted: #7B7869;
    --faint: #A5A296;
    --tang-soft: #FFF2E4;
    --azure-soft: #E8F2FF;
    --pink-soft: #FFE7F1;
    /* shape */
    --r-xl: 22px;
    --r-lg: 16px;
    --r-md: 11px;
    --r-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(61,59,48,.05), 0 2px 8px rgba(61,59,48,.05);
    --shadow-md: 0 2px 6px rgba(61,59,48,.06), 0 12px 28px rgba(61,59,48,.08);
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* legacy aliases, kept so older rules and inline styles keep working */
    --accent: #FF7F11;
    --accent-soft: #FFF2E4;
    --green: #007FFF;
    --green-soft: #E8F2FF;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { font-family: var(--font); background: var(--bg); color: var(--ink);
    line-height: 1.55; -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 26px 20px 96px; position: relative; z-index: 1; }
  a { color: var(--azure); }

  /* ---------- brand lockup ----------
     The mark is drawn in CSS so every page gets it from the existing <h1> markup,
     with no per-page edit. Same artwork as /mark.svg. */
  header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex-wrap: wrap; padding: 4px 0 18px; }
  h1 { font-size: 27px; font-weight: 500; letter-spacing: -0.025em; line-height: 1; }
  /* gap stays 0: the word, the "ARC" span and the full stop are each flex items,
     so any gap here would prise the wordmark apart. The mark spaces itself. */
  /* The mark is the word Auric on a tangerine tile, set in the site's own face, so there is
     no image to ship and the brand reads in full rather than as an initial. */
  .lockup { display: inline-flex; align-items: baseline; gap: 9px; color: var(--ink); text-decoration: none; }
  .lockup .mark { background: var(--tang); color: var(--porcelain); border-radius: 10px;
    padding: 2px 12px 4px; font-weight: 700; letter-spacing: -0.025em; }
  .lockup .word { font-weight: 500; letter-spacing: -0.02em; }
  .tag { font-size: 13px; color: var(--muted); }

  h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800;
    color: var(--muted); margin-bottom: 14px; }
  h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; background: var(--char); color: var(--porcelain);
    border-radius: var(--r-xl); padding: 40px 36px 38px; margin-bottom: 22px; }
  .hero::before, .hero::after { content: ""; position: absolute; }
  .hero::before { width: 330px; height: 330px; right: -86px; top: -108px; border-radius: 50%; background: var(--azure); }
  /* the mark again, oversized and tilted: decoration that is still the brand */
  .hero::after { right: 34px; top: 120px; transform: rotate(-7deg);
    background: var(--tang); border-radius: 26px; padding: 10px 34px 18px;
    content: "Auric"; display: flex; align-items: center; justify-content: center;
    color: var(--porcelain); font-size: 62px; font-weight: 700; letter-spacing: -0.04em; }
  /* on a phone the disc stays fully saturated and tucks into the corner: dropping its
     opacity over the charcoal turned it muddy and put text on an unreadable ground */
  @media (max-width: 860px) { .hero::after { display: none; }
    .hero::before { width: 190px; height: 190px; right: -74px; top: -74px; }
    .hero .stats { gap: 16px 26px; } }
  .hero > * { position: relative; z-index: 1; }
  .hero h2 { color: var(--tang); margin-bottom: 12px; }
  .hero p.lead { font-size: 30px; font-weight: 550; letter-spacing: -0.03em; line-height: 1.2;
    max-width: 17ch; margin-bottom: 12px; }
  .hero p.sub { font-size: 15px; color: rgba(253,255,252,.72); max-width: 46ch; }
  /* Base (light-background) trust-marker stats, used as-is on the property page; the hero
     overrides below restore its dark-background treatment. Same markup, two contexts. */
  .stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 26px; }
  .stat b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
  .stat span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 600; }
  .hero .stat b { color: inherit; }
  .hero .stat span { color: rgba(253,255,252,.6); }
  @media (max-width: 620px) { .hero { padding: 30px 22px; } .hero p.lead { font-size: 24px; } }

  /* ---------- surfaces ---------- */
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
  .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }

  /* ---------- forms ---------- */
  label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 700; margin-bottom: 5px; }
  input, select, textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line);
    border-radius: var(--r-md); font-size: 14.5px; font-family: var(--font);
    background: var(--sunk); color: var(--ink); transition: border-color .15s, background .15s, box-shadow .15s; }
  input:hover, select:hover, textarea:hover { border-color: #cfd6de; }
  input:focus, select:focus, textarea:focus { outline: none; background: var(--panel);
    border-color: var(--azure); box-shadow: 0 0 0 3px rgba(0,127,255,.15); }
  textarea { resize: vertical; }
  .field-full { grid-column: 1 / -1; }
  .hint { font-size: 12.5px; color: var(--muted); margin-top: 9px; }

  /* ---------- buttons ---------- */
  button { font-family: var(--font); font-size: 13.5px; font-weight: 650; padding: 10px 20px;
    border-radius: 999px; border: 1px solid var(--char); background: var(--char);
    color: var(--porcelain); cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s; }
  button:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
  button:active { transform: none; box-shadow: none; }
  button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  button.ghost:hover { border-color: var(--char); }
  button.warm { background: var(--tang); border-color: var(--tang); color: #fff; }
  button.blue { background: var(--azure); border-color: var(--azure); color: #fff; }
  button.small { padding: 6px 14px; font-size: 12.5px; }
  button[disabled] { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
  .btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
  .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--azure);
    text-decoration: underline; cursor: pointer; border-radius: 0; }
  .linklike:hover { box-shadow: none; transform: none; }

  /* ---------- property cards ---------- */
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
  .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .card-headtext { flex: 1 1 260px; min-width: 0; }

  /* Property video poster. Only some listings have one, so it sits inside the head row
     and simply is not there for the rest, rather than reserving an empty band. */
  .vthumb { position: relative; display: block; flex: none; width: 168px; aspect-ratio: 16 / 10;
    border-radius: var(--r-md); overflow: hidden; background: var(--sunk);
    border: 1px solid var(--line); text-decoration: none; }
  .vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vplay { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px;
    border-radius: 50%; background: rgba(61,59,48,.72); }
  /* the triangle, drawn with borders so there is no second asset to ship */
  .vplay::after { content: ""; position: absolute; top: 50%; left: 52%; transform: translate(-50%,-50%);
    border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--porcelain); }
  .vthumb:hover .vplay { background: var(--tang); }
  @media (max-width: 560px) { .vthumb { width: 100%; aspect-ratio: 16 / 9; } }
  .card h3 { font-size: 20px; }
  .card .loc { color: var(--muted); font-size: 14px; }
  /* The address, when the notice gave one: a size step up from the plain .loc lines around
     it, since it is the one piece of "from the notice" detail worth its own emphasis now
     that it no longer gets a separate boxed section. */
  .card .loc-addr { color: var(--ink); font-size: 15px; margin: 4px 0; line-height: 1.45; }
  .price { font-size: 25px; font-weight: 750; letter-spacing: -0.03em; color: var(--tang); white-space: nowrap; }
  .price small { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.07em; }
  .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px 20px;
    margin: 0; padding: 16px 18px; background: var(--azure-soft); border-radius: var(--r-md); }
  .fact b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: #5c7d9e; font-weight: 700; margin-bottom: 2px; }
  .fact span { font-size: 14.5px; font-weight: 550; }
  .fact.field-full { grid-column: 1 / -1; }

  /* ---------- section label above each of the card's three fact boxes ---------- */
  .factshead { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 800; color: var(--muted); margin: 18px 0 8px; }
  .links { font-size: 13.5px; margin-bottom: 8px; }
  .links a { color: var(--azure); margin-right: 16px; font-weight: 600; }
  /* The card holds two links (the listing and the WhatsApp share), so the card itself is a
     div and the big clickable area is the anchor inside it. Nesting them would be invalid.
     The anchor then stretches over the whole card with an overlay, which is what makes the
     footer area clickable too; the share button and the video thumb sit above it. */
  .cardlink { position: relative; transition: box-shadow .18s, border-color .18s, transform .18s; }
  .cardlink:hover { border-color: #cfd6de; box-shadow: var(--shadow-md); transform: translateY(-2px); }
  a.cardbody { display: block; text-decoration: none; color: inherit; }
  a.cardbody::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
  a.cardbody:focus-visible { outline: 2px solid var(--azure); outline-offset: 4px; border-radius: var(--r-md); }
  .cardlink .vthumb, .cardlink .wa-share, .cardlink .cardfoot .links a { position: relative; z-index: 2; }
  .cardfoot { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 14px; }
  .viewmore { font-size: 13px; color: var(--azure); font-weight: 700; text-decoration: none; }
  .viewmore:hover { text-decoration: underline; }
  .cardfoot .links { margin-bottom: 0; }

  /* WhatsApp share. Its own green is deliberate: people recognise the badge, and a
     tangerine or azure button here would read as another Auric ARC action. */
  .wa-share { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    font-size: 12.5px; font-weight: 700; color: #128C4A; background: #E7F6EC;
    border: 1px solid #C4E7D1; border-radius: 999px; padding: 7px 14px;
    transition: background .15s, border-color .15s; }
  .wa-share:hover { background: #D8F0E1; border-color: #A9DCBC; }
  .wa-share svg { flex: none; }
  .msgbox { background: var(--azure-soft); border: 1px solid #cfe3fb; border-radius: var(--r-md);
    padding: 14px 16px; font-size: 13.5px; white-space: pre-wrap; margin-top: 12px; }

  /* ---------- tables ---------- */
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 14px; }
  th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); padding: 8px 10px; }
  td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
  tbody tr:hover td { background: var(--sunk); }
  td a { color: var(--azure); }
  th.sortable { cursor: pointer; user-select: none; }
  th.sortable:hover { color: var(--ink); }
  tr.worked td { opacity: 0.55; }
  td select, td input { padding: 6px 10px; font-size: 12.5px; }
  .stars { color: var(--tang); white-space: nowrap; }

  /* ---------- status ---------- */
  .status { font-size: 13.5px; color: var(--azure); font-weight: 600; margin-top: 10px; }
  .status.err { color: var(--pink); }
  .empty { text-align: center; color: var(--muted); padding: 44px 0; }
  .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--char);
    color: var(--porcelain); padding: 12px 24px; border-radius: 999px; font-size: 13.5px;
    box-shadow: var(--shadow-md); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 200; }
  .toast.show { opacity: 1; }

  /* ---------- pills ---------- */
  .pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
    background: var(--azure-soft); color: var(--azure); border-radius: 999px;
    padding: 3px 11px; margin-left: 8px; vertical-align: 2px; }
  .pill.green { background: #E4F5EA; color: #157A45; }
  .pill.amber { background: var(--tang-soft); color: #b8560a; }
  .pill.grey  { background: #EDEFF2; color: var(--muted); }
  .pill.red   { background: var(--pink-soft); color: var(--pink); }
  /* Urgency-scaled deadline pill, stepped by urgencyPercent() through the same red-to-green
     spectrum a progress bar would (green calm, tangerine soon, red hot) -- there is no bar
     any more, but the colour logic that would have driven one still drives this. */
  .pill.urgcalm { background: #E4F5EA; color: #157A45; }
  .pill.urgwarm { background: var(--tang-soft); color: var(--tang); }
  .pill.urghot  { background: #FCE8E8; color: #DC2626; }

  /* ---------- fact sub-value ---------- */
  .fact .sub { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }

  /* ---------- copy link ---------- */
  .copylink { display: inline-flex; align-items: center; gap: 6px; }

  /* ---------- loading skeletons ----------
     Shape of the thing that is about to appear, not a spinner: a property card and its
     facts grid, so the layout does not jump once the real data lands. */
  @keyframes skel-shine { 0% { background-position: -180px 0; } 100% { background-position: 180px 0; } }
  .skel { background-color: var(--sunk); border-radius: var(--r-sm);
    background-image: linear-gradient(90deg, var(--sunk) 0px, var(--line) 45px, var(--sunk) 90px);
    background-size: 180px 100%; background-repeat: no-repeat; animation: skel-shine 1.2s ease-in-out infinite; }
  .skel-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px; margin-bottom: 18px; }
  .skel-line { height: 14px; margin-bottom: 12px; }
  .skel-line.w30 { width: 30%; } .skel-line.w40 { width: 40%; }
  .skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
  .skel-block { height: 130px; margin-bottom: 16px; }

  /* ---------- nav ---------- */
  nav { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 24px; }
  nav .tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--panel);
    border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow-sm); }
  nav .tabs a { font-size: 13px; font-weight: 650; text-decoration: none; color: var(--muted);
    padding: 8px 16px; border-radius: 999px; transition: color .15s, background .15s; }
  nav .tabs a:hover { color: var(--ink); background: var(--sunk); }
  nav .tabs a[aria-current="page"] { color: var(--porcelain); background: var(--char); }
  nav .count { font-size: 11px; opacity: .7; font-weight: 500; }
  .whoami { font-size: 12.5px; color: var(--muted); }
  .whoami a, .whoami .linklike { color: var(--azure); }

  /* ---------- open / passed switch on the directory ---------- */
  .segtabs { display: inline-flex; gap: 4px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 4px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
  .segtabs button { background: transparent; border: none; color: var(--muted);
    padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 650; }
  .segtabs button:hover { box-shadow: none; transform: none; color: var(--ink); }
  .segtabs button[aria-pressed="true"] { background: var(--char); color: var(--porcelain); }
  .segtabs .n { opacity: .65; font-weight: 500; }

  /* ---------- search and filters ---------- */
  .searchbar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
  @media (max-width: 980px) { .searchbar { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .searchbar { grid-template-columns: 1fr; } }
  /* Two filter rows on the directory: search+state+town, then sort+type+band+reset. Scoped
     above the existing 980px breakpoint so mobile keeps the plain .searchbar collapse above. */
  @media (min-width: 981px) {
    .searchbar.filters-row1 { grid-template-columns: 2fr 1fr 1fr; }
    .searchbar.filters-row2 { grid-template-columns: 1fr 1fr auto; }
  }
  .resultcount { font-size: 12.5px; color: var(--muted); margin-top: 14px; font-weight: 600; }

  /* ---------- notice source: a file or a link ---------- */
  .srcrow { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: end; margin-top: 16px; }
  @media (max-width: 640px) { .srcrow { grid-template-columns: 1fr; } .srcor { text-align: left; } }
  .srcname { font-size: 12px; color: var(--muted); margin-top: 7px; }
  .srcor { font-size: 12.5px; color: var(--faint); padding-bottom: 11px; }
  details.settings summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--muted); }

  /* ---------- admin card overflow menu ---------- */
  details.more { display: inline-block; vertical-align: top; }
  details.more summary { cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--azure);
    list-style: none; padding: 10px 16px; }
  details.more summary::-webkit-details-marker { display: none; }
  details.more[open] summary { color: var(--ink); }

  /* ---------- who to contact, on the property card ---------- */
  .brokerpanel { margin-top: 16px; padding: 14px 16px; background: var(--sunk);
    border: 1px solid var(--line); border-radius: var(--r-md); }
  .bp-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 700; }
  .bp-head a { color: var(--azure); text-transform: none; letter-spacing: 0; margin-left: 10px; font-weight: 600; }
  .bp-table { margin-top: 6px; }
  .bp-table td { border-bottom: 1px solid var(--line); padding: 8px 8px 8px 0; vertical-align: middle; }
  .bp-table tr:last-child td { border-bottom: none; }
  .bp-table tr:hover td { background: transparent; }
  .bp-table tr.done td { opacity: 0.5; }
  .bp-meta { font-size: 11.5px; color: var(--muted); margin-left: 8px; }
  .bp-actions { white-space: nowrap; text-align: right; }
  .bp-actions a, .bp-actions button { margin-left: 10px; font-size: 12px; color: var(--azure); }
  .rowlinks { margin-top: 4px; }
  .rowlinks a { font-size: 11.5px; color: var(--azure); margin-right: 12px; font-weight: 600; }
  #editorPanel textarea { min-height: 110px; }
  ol { line-height: 1.8; padding-left: 20px; }

  /* ---------- photos ---------- */
  .thumbrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
  .thumbrow img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
  .thumbwrap { position: relative; display: inline-block; }
  .thumbwrap.pending img { opacity: 0.6; border-style: dashed; }
  .thumb-x { position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; padding: 0;
    border-radius: 50%; background: var(--char); color: var(--porcelain); border: none;
    font-size: 13px; line-height: 1; cursor: pointer; }
  .thumb-x:hover { transform: none; box-shadow: none; background: var(--pink); }
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
  .gallery img { width: 100%; height: 158px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); }

  /* ---------- contacts modal ---------- */
  .modal-backdrop[hidden] { display: none; }
  .modal-backdrop { position: fixed; inset: 0; background: rgba(61,59,48,.5); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 100; }
  .modal-box { background: var(--panel); border-radius: var(--r-xl); max-width: 800px; width: 100%;
    max-height: 86vh; overflow-y: auto; padding: 26px 28px; box-shadow: 0 24px 60px rgba(61,59,48,.3); }
  .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
  .modal-body table { margin-top: 0; }

  /* ---------- area map and nearby ---------- */
  .areamap { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: var(--r-md);
    display: block; background: var(--sunk); overflow: hidden; z-index: 0; }
  /* Leaflet ships its own font stack and link colours; keep the map furniture in ours. */
  .leaflet-container { font-family: var(--font); background: var(--sunk); }
  .leaflet-control-attribution { font-size: 10.5px; }
  .leaflet-control-attribution a { color: var(--azure); }
  @media (max-width: 560px) { .areamap { height: 240px; } }
  /* Each category is its own card. Ragged columns of underlined lines read as a broken
     table; a card per category makes the grouping the obvious thing about the block. */
  .amens { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
    margin-top: 16px; align-items: start; }
  .amen { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 14px 16px 12px; }
  .amen b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 700; margin-bottom: 9px; }
  .amen ul { list-style: none; padding: 0; margin: 0; }
  .amen li { font-size: 13.5px; padding: 4px 0; line-height: 1.4;
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
  .amen-r { color: var(--tang); font-weight: 700; font-size: 12px; white-space: nowrap; }

  /* ---------- landing page ---------- */
  .hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
  .hero .cta a { text-decoration: none; }
  /* inline-block, not inline-flex: flexbox trims the trailing space in the text node
     right before the <b>, which welded "charge" to "any" with no gap between them. */
  .hero .nocom { display: inline-block; margin-top: 22px;
    background: rgba(253,255,252,.12); border: 1px solid rgba(253,255,252,.22);
    border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 650;
    color: var(--porcelain); }
  .hero .nocom b { color: var(--tang); }
  /* Same pill component as the share button, sized up to sit next to .nocom. */
  .hero .wa-share { margin: 22px 0 0 10px; font-size: 13px; padding: 7px 16px; }

  .sell { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
    margin-bottom: 20px; }
  .sell .item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 20px 22px; box-shadow: var(--shadow-sm); }
  .sell .item b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.015em;
    margin-bottom: 6px; }
  .sell .item span { font-size: 13.5px; color: var(--muted); }
  .sell .item-icon { display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; background: var(--tang-soft); color: var(--tang);
    margin-bottom: 14px; }
  .sell .item-icon-text { font-size: 11px; font-weight: 800; }
  .sell .item:nth-child(2n) .item-icon { background: var(--azure-soft); color: var(--azure); }

  .panelhead { display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .panelhead h2 { margin-bottom: 0; }
  .panelhead a { font-size: 13px; font-weight: 700; text-decoration: none; }

  /* Gallery cards on the landing page: smaller than a directory row, same information order. */
  .gallery-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
  .gcard { position: relative; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 18px; color: inherit;
    box-shadow: var(--shadow-sm); transition: box-shadow .18s, border-color .18s, transform .18s; }
  .gcard:hover { border-color: #cfd6de; box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .gcard { display: flex; flex-direction: column; }
  .gcard .vthumb { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 14px; z-index: 2; }
  /* Only some listings have a video, so the cards in a row differ in height. Pushing the
     deadline line to the bottom lines them up instead of leaving one card half empty. */
  a.gcardbody { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
  .gcard .when { margin-top: auto; padding-top: 8px; }
  a.gcardbody::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
  a.gcardbody:focus-visible { outline: 2px solid var(--azure); outline-offset: 4px; border-radius: var(--r-md); }
  .gcard h3 { font-size: 16.5px; margin-bottom: 2px; }
  .gcard .loc { font-size: 13px; color: var(--muted); }
  .gcard .price { font-size: 21px; margin-top: 12px; }
  .gcard .when { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
  .gcard .when b { color: var(--ink); font-weight: 650; }

  .strip { background: var(--char); color: var(--porcelain); border-radius: var(--r-xl);
    padding: 28px 32px; margin-bottom: 20px; display: flex; gap: 20px; flex-wrap: wrap;
    align-items: center; justify-content: space-between; }
  .strip h2 { color: var(--tang); margin-bottom: 8px; }
  .strip p { font-size: 20px; font-weight: 550; letter-spacing: -0.02em; max-width: 34ch; }
  .strip p span { color: var(--tang); }

  .faq { font-size: 14px; }
  .faq dt { font-weight: 700; margin-top: 16px; }
  .faq dt:first-child { margin-top: 0; }
  .faq dd { color: var(--muted); margin: 4px 0 0; }

  /* ---------- footer ----------
     Charcoal, so the page ends on the brand rather than fading out, and so the bank's
     number and the address are somewhere a buyer can find on any page. Markup comes from
     renderSiteFooter() in app-shell.js: one copy of this copy, not one per page. */
  .sitefoot { margin-top: 56px; background: var(--char); color: var(--porcelain);
    border-radius: var(--r-xl); padding: 34px 36px 22px; font-size: 13.5px; }
  .foot-in { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: 28px 40px; }
  @media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; gap: 24px; }
    .sitefoot { padding: 28px 22px 18px; } }
  .foot-brand .lockup { color: var(--porcelain); font-size: 23px; }
  .foot-brand p { margin-top: 12px; color: rgba(253,255,252,.66); max-width: 40ch; line-height: 1.6; }
  .foot-brand .foot-wa { display: flex; align-items: center; gap: 7px; color: rgba(253,255,252,.5); font-size: 12.5px; }
  .foot-col b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--tang); margin-bottom: 10px; }
  .foot-col a, .foot-col span { display: block; color: rgba(253,255,252,.8); text-decoration: none;
    margin-bottom: 7px; line-height: 1.5; }
  .foot-col a:hover { color: var(--tang); }
  .foot-base { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(253,255,252,.14);
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; align-items: center;
    font-size: 12px; color: rgba(253,255,252,.5); }
  /* Operator sign in lives here rather than in the nav: on-ground staff are told to look
     at the bottom of any page, and a buyer arriving from WhatsApp never trips over it. */
  .foot-op { color: rgba(253,255,252,.6); text-decoration: none;
    border: 1px solid rgba(253,255,252,.22); border-radius: 999px; padding: 5px 14px; font-weight: 600; }
  .foot-op:hover { color: var(--char); background: var(--porcelain); border-color: var(--porcelain); }