/* ---------- tokens : dark is the design's home, light is a full second set ---------- */
  :root {
    --bg:        #0b0b0d;
    --panel:     #16171b;
    --panel-2:   #101115;
    --line:      #26282f;
    --line-soft: #1c1e24;
    --text:      #f2f3f5;
    --dim:       #9aa0aa;
    --dimmer:    #6d737d;
    --accent:    #2f6fed;
    --accent-lo: #1e4fd6;
    --accent-ink:#ffffff;
    --glow:      rgba(47,111,237,.22);

    --display: "Archivo", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --body:    "Public Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --pad: clamp(20px, 5vw, 40px);
    --max: 1060px;
    --r:   14px;
  }

  :root[data-theme="light"] {
    --bg:        #fbfbfd;
    --panel:     #ffffff;
    --panel-2:   #f2f3f7;
    --line:      #dfe1e9;
    --line-soft: #eceef4;
    --text:      #111219;
    --dim:       #565d6b;
    --dimmer:    #838a97;
    --accent:    #2454cf;
    --accent-lo: #1a3fa8;
    --accent-ink:#ffffff;
    --glow:      rgba(36,84,207,.14);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg:        #fbfbfd;
      --panel:     #ffffff;
      --panel-2:   #f2f3f7;
      --line:      #dfe1e9;
      --line-soft: #eceef4;
      --text:      #111219;
      --dim:       #565d6b;
      --dimmer:    #838a97;
      --accent:    #2454cf;
      --accent-lo: #1a3fa8;
      --accent-ink:#ffffff;
      --glow:      rgba(36,84,207,.14);
    }
  }

  /* ---------- base ---------- */
  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .display {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0;
  }

  p { margin: 0; }

  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--pad);
  }

  .eyebrow {
    font-family: var(--display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dimmer);
  }

  /* ---------- header ---------- */
  header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
  }

  .bar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 50px;
  }

  .mark {
    display: block;
    width: 92px;
    aspect-ratio: 1754 / 407;
    flex-shrink: 0;
    background-color: var(--text);
    -webkit-mask: url("/assets/bowss-wordmark.png") no-repeat center / contain;
            mask: url("/assets/bowss-wordmark.png") no-repeat center / contain;
    transition: opacity .18s;
  }

  .mark:hover { opacity: .78; }

  .nav-wrap {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
  }

  .nav-cats, .nav-aux { display: flex; gap: 20px; font-size: .92rem; }

  .nav-cats a, .nav-aux a {
    color: var(--dim);
    text-decoration: none;
    transition: color .18s;
  }

  .nav-cats a:hover, .nav-aux a:hover { color: var(--text); }

  .nav-cats a[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
  }

  /* thin divider between browse and company menus */
  .nav-aux {
    border-left: 1px solid var(--line);
    padding-left: 26px;
  }

  .menu-btn { display: none; }

  /* Desktop: the browse menu is the site's main navigation — it sits left,
     beside the logo, and reads larger than the aux links. Mobile keeps the
     stacked dropdown untouched. */
  @media (min-width: 901px) {
    .bar { position: relative; }
    .nav-cats { font-size: 1.12rem; font-weight: 600; gap: 26px; }
    .nav-wrap { margin-left: 34px; flex: 1; }
    .nav-aux { margin-left: auto; }
    /* The header alone goes full-bleed: logo hugs the left screen edge and
       the aux/CTA group the right (same --pad breathing room), while page
       content below stays inside the 1060px container. */
    header .wrap { max-width: none; }
  }

  /* category pages (Media / Shop / Fashion / Local): focused browse header —
     no For Business / Help / download button, categories centred on desktop,
     and the header scrolls away instead of sticking */
  body.cat-page header { position: static; }
  body.cat-page .nav-aux,
  body.cat-page header .btn-nav { display: none; }
  @media (min-width: 901px) {
    body.cat-page .nav-cats { position: absolute; left: 50%; transform: translateX(-50%); }
  }

  @media (max-width: 900px) {
    .menu-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      width: 40px;
      height: 40px;
      padding: 9px;
      background: none;
      border: 1px solid var(--line);
      border-radius: 9px;
      cursor: pointer;
      order: 2;
    }
    .menu-btn span {
      display: block;
      height: 2px;
      border-radius: 1px;
      background: var(--text);
    }
    .nav-ctas { order: 1; margin-left: auto; }
    .btn-nav { padding: 10px 14px; font-size: .85rem; }
    .nav-wrap {
      display: none;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      margin-left: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      padding: 8px var(--pad) 14px;
    }
    .nav-wrap.open { display: flex; }
    .nav-cats, .nav-aux { flex-direction: column; gap: 0; font-size: 1rem; }
    .nav-cats a, .nav-aux a { padding: 11px 2px; border-bottom: 1px solid var(--line-soft); }
    .nav-aux { border-left: 0; padding-left: 0; margin-top: 6px; }
  }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 11px;
    font-family: var(--display);
    font-weight: 600;
    font-size: .96rem;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform .16s, box-shadow .22s, background .18s;
  }

  .btn-fill {
    background: linear-gradient(140deg, var(--accent), var(--accent-lo));
    color: var(--accent-ink);
    box-shadow: 0 8px 26px var(--glow);
  }

  .btn-fill:hover { transform: translateY(-1px); box-shadow: 0 12px 32px var(--glow); }

  .btn-line {
    border-color: var(--line);
    background: var(--panel);
    color: var(--text);
  }

  .btn-line:hover { border-color: var(--dimmer); }

  /* not a link — announcement only */
  .btn-soon { cursor: default; color: var(--dim); }
  .btn-soon:hover { border-color: var(--line); }

  /* ---------- hero ---------- */
  /* centred title with the benefit words scattered around it; the band is
     full bleed so the words spread to the screen edges */
  .hero-band {
    position: relative;
    overflow: hidden;
  }

  .hero {
    padding: clamp(100px, 16vw, 210px) 0 clamp(30px, 4vw, 56px);
  }

  .hero-core { text-align: center; }

  .hero h1 {
    font-size: clamp(2.5rem, 7vw, 4.3rem);
    line-height: 1.06;
  }

  .hero h1 em {
    font-style: normal;
    color: var(--accent);
  }

  .lede {
    margin-top: 20px;
    font-size: clamp(1.04rem, 2.1vw, 1.2rem);
    color: var(--dim);
    max-width: 84ch; /* the hero sentence fits on one line on desktop */
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }

  /* the scattered benefits — quiet, tilted, mixed weights and sizes so they
     read as background texture around the title, never competing with it */
  .adv {
    position: absolute;
    color: var(--dimmer);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }

  /* top band — the full width title line sits at roughly y 25 to 45%, so
     everything scattered lives above or below that band */
  .adv-cookies  { left: 2%;   top: 7%;    transform: rotate(-7deg); font-style: italic; font-size: .95rem; }
  .adv-everyone { left: 24%;  top: 1%;    transform: rotate(-4deg); font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
  .adv-grow     { left: 48%;  top: 8%;    transform: rotate(-8deg); font-size: .85rem; }
  .adv-discover { right: 22%; top: 2%;    transform: rotate(5deg);  font-style: italic; font-size: 1rem; }
  .adv-trackers { right: 3%;  top: 8%;    transform: rotate(3deg);  font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
  .adv-popups   { right: 27%; bottom: 5%; transform: rotate(-5deg); font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
  /* below the title, beside the lede and buttons */
  .adv-typing   { left: 30%;  bottom: 3%; transform: rotate(3deg);  font-size: 1.05rem; }
  .adv-reviewed { right: 3%;  top: 56%;   transform: rotate(4deg);  font-size: .95rem; }
  .adv-data     { left: 6%;   bottom: 17%; transform: rotate(-3deg); font-style: italic; font-size: .95rem; }
  .adv-bowss    { right: 5%;  bottom: 15%; transform: rotate(-6deg); font-family: var(--display); font-weight: 700; font-size: 1.45rem; }
  /* bottom band, below the buttons */
  .adv-trio     { left: 3%;   bottom: 1%; transform: rotate(-2deg); font-family: var(--display); font-weight: 500; font-size: .85rem; line-height: 1.5; }
  .adv-outside  { left: 3%;   top: 58%;   transform: rotate(-3deg); font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
  .adv-second   { left: 6%;   top: 16%;   transform: rotate(2deg);  font-size: .9rem; }

  @media (max-width: 900px) {
    .adv { display: none; }
  }

  .cta-note {
    font-size: .85rem;
    color: var(--dimmer);
    flex-basis: 100%;
    margin-top: 4px;
  }

  /* ---------- top profile header demo — same layout as bowssbusiness.com:
                 centred stat row with the profile picture in the middle ---------- */
  .profile-demo { margin-top: clamp(28px, 5vw, 46px); }

  .pd-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    flex-wrap: nowrap;
  }

  .pd-stat { text-align: center; min-width: 64px; }

  .pd-stat b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }

  .pd-stat span { display: block; font-size: 14px; color: var(--dim); margin-top: 4px; }

  .pd-avatar {
    width: 150px; height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    flex: 0 0 auto;
  }

  .pd-note {
    margin-top: 16px;
    text-align: center;
    font-size: .85rem;
    color: var(--dimmer);
  }

  .pd-note a { color: var(--accent); text-decoration: none; }
  .pd-note a:hover { text-decoration: underline; }

  /* ---------- nav CTA pair: Download app + Sign in / account ---------- */
  .nav-ctas { display: flex; align-items: center; gap: 10px; }

  .acct { position: relative; }

  .acct-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font: inherit;
    max-width: 190px;
  }

  .acct-btn img {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-left: -4px;
  }

  .acct-btn img[hidden] { display: none; }

  .acct-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .acct-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    z-index: 60;
  }

  .acct-name {
    padding: 8px 10px;
    font-weight: 600;
    font-size: .92rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .acct-menu button {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    border-radius: 8px;
    cursor: pointer;
  }

  .acct-menu button:hover { background: var(--panel-2); }

  /* ---------- sign-in modal ---------- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
  }

  .modal-overlay[hidden] { display: none; }

  .modal {
    position: relative;
    width: min(400px, 100%);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px 26px 24px;
  }

  .modal h3 { font-size: 1.3rem; }

  .modal-sub { margin-top: 8px; color: var(--dim); font-size: .92rem; }

  .modal input {
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: .95rem;
  }

  .modal input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }

  .modal-err { margin-top: 10px; min-height: 1.2em; font-size: .88rem; color: #d33; }

  .modal-submit { width: 100%; margin-top: 6px; justify-content: center; text-align: center; }

  .modal-links {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .88rem;
  }

  .modal-links a { color: var(--dim); text-decoration: none; }
  .modal-links a:hover { color: var(--text); }

  .modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: 0;
    background: none;
    color: var(--dim);
    cursor: pointer;
    padding: 6px;
  }

  .modal-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
  .modal-close:hover { color: var(--text); }

  @media (max-width: 640px) {
    .pd-row { gap: 16px; }
    .pd-stat { min-width: 46px; }
    .pd-stat b { font-size: 19px; }
    .pd-stat span { font-size: 11px; }
    .pd-avatar { width: 78px; height: 78px; }
  }

  /* ---------- section frame ---------- */
  section { padding-block: clamp(46px, 8vw, 82px); }

  .rule { border-top: 1px solid var(--line-soft); }

  .head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 38px;
  }

  .head h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }

  .head p { color: var(--dim); }

  /* ---------- feature grid ---------- */
  .grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .card h3 { font-size: 1.06rem; font-weight: 600; }

  .card p { color: var(--dim); font-size: .93rem; }

  .card .icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    margin-bottom: 6px;
    color: var(--accent);
  }

  .card .icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }

  /* ---------- business band ---------- */
  .band {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(28px, 5vw, 46px);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
  }

  .band-copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }

  .band-copy h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }

  .band-copy p { color: var(--dim); max-width: 44ch; }

  /* ---------- policies ---------- */
  .docs {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
  }

  .doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    text-decoration: none;
    background: var(--panel);
    border-bottom: 1px solid var(--line-soft);
    transition: background .16s;
  }

  .doc:last-child { border-bottom: 0; }

  .doc:hover { background: var(--panel-2); }

  .doc-name { font-weight: 500; font-size: .96rem; }

  .doc-desc { color: var(--dimmer); font-size: .85rem; margin-left: auto; text-align: right; }

  @media (max-width: 560px) {
    .doc { flex-wrap: wrap; gap: 4px; }
    .doc-desc { margin-left: 0; text-align: left; flex-basis: 100%; }
  }

  .doc .arrow { color: var(--dimmer); flex-shrink: 0; }

  /* ---------- help ---------- */
  .help-cols {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .help-cols a.card { text-decoration: none; transition: border-color .18s; }
  .help-cols a.card:hover { border-color: var(--dimmer); }

  /* ---------- footer ---------- */
  footer {
    border-top: 1px solid var(--line-soft);
    padding-block: 40px 96px;
    color: var(--dimmer);
    font-size: .87rem;
  }

  .foot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    align-items: baseline;
  }

  .foot-row nav { display: flex; gap: 20px; flex-wrap: wrap; }
  .foot-row nav a { color: var(--dimmer); text-decoration: none; font-size: .87rem; }
  .foot-row nav a:hover { color: var(--text); }
  .foot-legal { flex-basis: 100%; }

  /* ---------- mobile app bar : the "strong suggest, no force" pattern ---------- */
  .appbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 13px;
    padding: 11px 12px 11px 14px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    box-shadow: 0 12px 34px rgba(0,0,0,.34);
    transform: translateY(140%);
    transition: transform .42s cubic-bezier(.22,1,.36,1);
  }

  .appbar.up { transform: translateY(0); }

  @media (max-width: 720px) { .appbar { display: flex; } }

  .appbar-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #fff url("/assets/bowss-app-icon.png") no-repeat center / cover;
    border: 1px solid var(--line);
  }

  .appbar-copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .appbar-copy strong { font-family: var(--display); font-size: .93rem; font-weight: 600; }
  .appbar-copy span { color: var(--dimmer); font-size: .78rem; }

  .appbar .btn { padding: 10px 17px; font-size: .87rem; margin-left: auto; }

  .appbar-x {
    background: none;
    border: 0;
    color: var(--dimmer);
    padding: 6px;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
  }

  .appbar-x svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .appbar { transform: translateY(0); }
  }

/* ---------- policy pages ---------- */
.policy-head { padding: clamp(40px, 7vw, 68px) 0 26px; }

.policy-head h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  margin-top: 14px;
}

.policy-head .lede { margin-top: 14px; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  color: var(--dim);
  text-decoration: none;
  margin-bottom: 22px;
}

.back:hover { color: var(--text); }

.policy-body {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: clamp(14px, 3vw, 26px);
  margin-bottom: 64px;
  overflow-x: auto;
}

/* Termly's embed script injects an iframe here and keeps its height in sync. */
.policy-body iframe {
  width: 100%;
  border: 0;
  display: block;
  background: #fff;
  border-radius: 8px;
  color-scheme: light;
  min-height: 60vh;
}

.policy-body.doc iframe { height: 80vh; min-height: 520px; }

.policy-fallback {
  padding: 30px 22px;
  text-align: center;
  color: var(--dim);
  font-size: .92rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.policy-note {
  color: var(--dimmer);
  font-size: .85rem;
  margin-bottom: 20px;
}

/* PDF viewer needs its own fixed viewport height. */
.policy-body.pdf iframe { height: 85vh; min-height: 460px; }


/* ---------- category chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-block;
  padding: 4px 10px;
  line-height: 1.45;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font-size: .88rem;
  text-decoration: none;
  transition: border-color .16s, color .16s;
}

a.chip:hover { border-color: var(--dimmer); color: var(--text); }

.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* app-style category chips: each level carries its own colour (gold mains,
   blue subs, grey sub-subs) — filled when active, outlined otherwise */
.chips-l1 .chip, .chips-l2 .chip, .chips-l3 .chip { font-weight: 600; background: var(--panel); }
.chips-l1 .chip { color: #dfa211; border-color: rgba(224, 166, 22, .5); }
.chips-l1 .chip.on { background: #e6a817; border-color: #e6a817; color: #fff; }
.chips-l2 .chip { color: #007aff; border-color: rgba(0, 122, 255, .45); }
.chips-l2 .chip.on { background: #007aff; border-color: #007aff; color: #fff; }
.chips-l3 .chip { color: var(--text); border-color: var(--line); }
.chips-l3 .chip.on { background: #8e8e93; border-color: #8e8e93; color: #fff; }

/* the city the feed is scoped to, app-style: green, top right, sitting on
   the same line as the main category row (which is centred and full-bleed) */
main.wrap { position: relative; }
.city-pin {
  position: absolute;
  top: 7px;
  right: calc(50% - 50vw + clamp(20px, 3vw, 44px));
  z-index: 30;
}

.pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
  font-family: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: #00af00;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}

.pin-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-btn svg { flex-shrink: 0; }

.pin-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}

.pin-panel[hidden] { display: none; }

.pin-panel label {
  display: grid;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--dim);
}

.pin-panel select {
  font: inherit;
  font-size: .92rem;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}
@media (max-width: 900px) { .city-pin { display: none; } }

.chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0;
  margin-bottom: 3px;
  -webkit-overflow-scrolling: touch;
}

.chips-scroll .chip { white-space: nowrap; }

/* desktop: keep the chip rows on ONE line but let them run the full screen
   width (same 50vw break-out as the video band), so every category fits
   before any scrolling is needed */
@media (min-width: 761px) {
  .chips-scroll {
    margin-inline: calc(50% - 50vw);
    padding-inline: clamp(20px, 3vw, 44px);
  }
}

/* fashion has few categories per row, so its rows read better centred;
   "safe" falls back to start-aligned when a long row overflows */
body.cats-centered .chips-scroll { justify-content: safe center; }

.loc-region { padding-block: 18px 26px; }

.loc-region h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dim);
  margin-bottom: 12px;
}

.soon-note { margin-top: 14px; color: var(--accent); font-size: .92rem; font-weight: 500; }

/* ---------- post cards ---------- */
.pgrid {
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: 6px;
  margin-bottom: 64px;
}

/* post cards mirror the app's feed anatomy: handle top-left and price
   top-right above the image, the action icon strip below it — no card box,
   the image IS the card */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  transition: transform .16s;
}

.pcard:hover { transform: translateY(-2px); }

/* billboards: the app's big banner treatment — full grid width with a wide
   image, sitting above the row posts (the feed returns billboards first) */
.pcard.billboard { grid-column: 1 / -1; }
.pcard.billboard .pc-img { aspect-ratio: 2.2 / 1; max-height: 360px; }
.pcard.billboard .pc-user { font-size: 1.05rem; }

.pc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.pc-user { color: var(--text); font-size: .95rem; font-weight: 600; }

.pc-price {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pc-img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background-color: var(--panel-2);
  background-size: cover;
  background-position: center;
}


.pempty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: clamp(28px, 6vw, 48px);
  margin-bottom: 64px;
  max-width: 560px;
}

.pempty h2 { font-size: 1.25rem; margin-bottom: 10px; }
.pempty p { color: var(--dim); }


/* ---------- theme toggle ---------- */
/* only shown to signed-in visitors (body.signed-in is stamped by the
   homepage auth script); signed-out visitors follow their OS theme */
.theme-btn { display: none; }
body.signed-in .theme-btn { display: block; }
.theme-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

.theme-btn:hover { border-color: var(--dimmer); }

/* ---------- app category colours in the header nav ---------- */
.nav-cats a:nth-child(1) { color: var(--text); }     /* Media */
.nav-cats a:nth-child(2) { color: #a80505; }         /* Shop */
.nav-cats a:nth-child(3) { color: var(--text); }     /* Home */
.nav-cats a:nth-child(4) { color: #007aff; }         /* Fashion */
.nav-cats a:nth-child(5) { color: #00af00; }         /* Local */

.nav-cats a:hover { filter: brightness(1.25); color: inherit; }

/* current page: black underline in light mode, white in dark (both are --text) */
.nav-cats a[aria-current="page"] {
  font-weight: 600;
  border-bottom: 2px solid var(--text);
  padding-bottom: 3px;
}

/* ---------- homepage: who / how / why ---------- */
.steps {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 22px;
}

.step .num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.step h3 { margin-top: 12px; font-size: 1.05rem; }
.step p { margin-top: 8px; color: var(--dim); font-size: .95rem; }

/* dashed drop-zones for screenshots / video until real media goes in */
.media-slot {
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dimmer);
  font-size: .85rem;
  padding: 12px;
}

.media-slot.video { margin-top: 40px; aspect-ratio: 16 / 9; }

/* real media dropped into the slots inherits the frame */
.media-slot img, .media-slot video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r) - 4px);
}

/* app screenshots as a phone trio: the middle one leads, the sides lean in */
.shots {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2.5vw, 26px);
}

.phone-frame {
  width: clamp(96px, 21vw, 210px);
  aspect-ratio: 9 / 19.5;
  border-radius: clamp(18px, 2.6vw, 34px);
  border: 6px solid #1a1b20;
  background: #0b0b0d;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .32), 0 0 0 1px rgba(0, 0, 0, .16);
  transition: transform .25s ease;
}

.phone-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.phone-frame.mid { width: clamp(112px, 24vw, 240px); z-index: 2; }
.phone-frame.left  { transform: rotate(-5deg) translateY(12px); }
.phone-frame.right { transform: rotate(5deg) translateY(12px); }
.phone-frame.left:hover  { transform: rotate(-2deg) translateY(4px); }
.phone-frame.right:hover { transform: rotate(2deg) translateY(4px); }
.phone-frame.mid:hover { transform: translateY(-6px); }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
}


/* ---------- nav: flagship sizing and spacing ---------- */
.bar { height: 74px; gap: 30px; }

.nav-cats { gap: 36px; font-size: 1rem; font-weight: 500; align-items: center; }

.nav-aux { gap: 28px; font-size: .97rem; padding-left: 30px; }

.nav-wrap { gap: 34px; }

.nav-cats a { padding: 8px 1px; line-height: 1; }

.nav-cats a[aria-current="page"] { padding-bottom: 6px; }

.nav-home { display: inline-flex; align-items: center; }

/* widen the current-page underline under the narrow B glyph
   (needs the a.nav-home specificity to beat `.nav-cats a`) */
.nav-cats a.nav-home { padding-left: 9px; padding-right: 9px; }

.nav-home svg { display: block; }

@media (max-width: 900px) {
  .bar { height: 62px; }
  .nav-cats, .nav-aux { font-size: 1rem; }
  .nav-home svg { width: 22px; height: 22px; }
}

/* landscape demo video — full-bleed band, edge to edge of the screen
   (50vw margins break it out of the centred wrap; html overflow-x is
   clipped so the scrollbar width can't cause sideways scroll) */
html { overflow-x: clip; }

.video-frame { margin: 0 calc(50% - 50vw); }

/* the hero band runs straight into the video, no divider or padding between */
#how { padding-top: 0; }

.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}


/* ---------- home: the Bowss B, painted in the theme's text colour ---------- */
.nav-b {
  display: block;
  /* the asset is cropped tight to the glyph (38x96), so the box matches the
     visible B exactly and the current-page underline sits flush under it */
  height: 22px;
  aspect-ratio: 38 / 96;
  /* collapse the layout height to match the 1rem text tabs so the
     current-page underline sits on the same line as the other tabs */
  margin: -3px 0;
  background-color: var(--text);
  -webkit-mask: url('/assets/bowss-icon-b.png?v=2') no-repeat center / contain;
          mask: url('/assets/bowss-icon-b.png?v=2') no-repeat center / contain;
}

.nav-home:hover .nav-b { background-color: var(--dim); }

/* who-are-we prose block */
.prose {
  margin-top: 26px;
  display: grid;
  gap: 15px;
  color: var(--dim);
}

.prose strong { color: var(--text); }

/* ---------- hero entrance + ambient motion ---------- */
/* One calm, staggered reveal: headline, then lede, then buttons; the
   scattered words fade in after and drift gently forever. The drift uses the
   `translate` property so it composes with each word's rotate() transform. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-rise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes hero-drift {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
  }

  .hero h1        { animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) both; }
  .hero .lede     { animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) .15s both; }
  .hero .hero-cta { animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) .3s both; }

  .adv {
    opacity: 0;
    animation: hero-rise .9s ease-out .55s both, hero-drift 8s ease-in-out 1.4s infinite;
  }

  /* vary timing so the words breathe out of sync, not as a flock */
  .hero-band .adv:nth-of-type(even) { animation-duration: .9s, 11s; animation-delay: .75s, 2.1s; }
  .hero-band .adv:nth-of-type(3n)  { animation-duration: .9s, 9.5s; animation-delay: .95s, 2.8s; }
  .hero-band .adv:nth-of-type(4n)  { animation-duration: .9s, 12.5s; animation-delay: 1.1s, 1.7s; }
}

/* ---------- feature bento: varied tile sizes, soft panels, one accent ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 22px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  transition: transform .22s ease, box-shadow .22s ease;
}

.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .12); }

.tile-wide { grid-column: span 2; }

.tile h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: -.02em;
}

.tile p {
  color: var(--dim);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 46ch;
}

.t-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.t-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the anchor tile: brand blue, white type */
.tile-accent {
  background: linear-gradient(140deg, var(--accent), var(--accent-lo));
  border-color: transparent;
  box-shadow: 0 14px 40px var(--glow);
}

.tile-accent h3 { color: #fff; }
.tile-accent p { color: rgba(255, 255, 255, .82); max-width: 52ch; }
.tile-accent .t-icon { background: rgba(255, 255, 255, .16); border-color: transparent; }
.tile-accent .t-icon svg { stroke: #fff; }

/* the four category colours, worn as dots */
.t-dots { display: flex; align-items: center; gap: 8px; height: 46px; margin-bottom: 6px; }
.t-dots i { width: 14px; height: 14px; border-radius: 50%; }
html[data-theme="dark"] .t-dots i:first-child { background: #f2f3f5 !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .t-dots i:first-child { background: #f2f3f5 !important; }
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .tile-wide { grid-column: span 1; }
}


/* ---------- the promise strip: three quiet badges ---------- */
.no-strip { padding-block: clamp(10px, 2vw, 18px) clamp(40px, 6vw, 64px); }

.no-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2.5vw, 20px);
}

.no-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text);
}

.no-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- scroll reveals + browse cascade ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 24px;
    /* transform and box-shadow ride along so hover effects stay smooth */
    transition:
      opacity .7s cubic-bezier(.2, .7, .3, 1),
      translate .7s cubic-bezier(.2, .7, .3, 1),
      scale .9s cubic-bezier(.2, .7, .3, 1),
      transform .25s ease,
      box-shadow .25s ease;
  }

  .reveal.in { opacity: 1; translate: 0 0; }

  /* the full-bleed video also eases up from 96% size */
  .video-frame.reveal { scale: .96; }
  .video-frame.reveal.in { scale: 1; }

  /* category pages: new cards cascade in when a chip is tapped */
  @keyframes card-in {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
  }
  .pgrid .pcard { animation: card-in .5s cubic-bezier(.2, .7, .3, 1) both; }

  /* chips give a tiny press when tapped */
  .chip { transition: border-color .16s, color .16s, scale .15s ease; }
  .chip:active { scale: .93; }
}

/* clean hero: no scattered words, just one soft glow behind the headline
   (theme-aware via --glow) */
.hero-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  width: min(900px, 92vw);
  height: 500px;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  pointer-events: none;
}

/* product peek: tops of the three phones, cropped by the hero's bottom edge
   (the band's overflow: hidden does the cropping) */
.hero-peek {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 30px);
  height: clamp(150px, 22vw, 280px);
  margin-top: clamp(28px, 4vw, 48px);
}

.hero-peek .phone-frame { width: clamp(140px, 18vw, 230px); flex-shrink: 0; }
.hero-peek .mid { width: clamp(160px, 20vw, 250px); margin-top: -26px; z-index: 2; }

/* ---------- help page polish ---------- */
.help-cols .tile { text-decoration: none; }
.help-cols .tile-accent p:first-of-type { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.doc { transition: background .18s; }
.doc:hover { background: var(--panel-2); }
.doc .arrow { transition: translate .2s ease; }
.doc:hover .arrow { translate: 4px 0; color: var(--text); }

/* help page: tighter rhythm between the title and its two sections */
.help-page .policy-head { padding: clamp(24px, 4vw, 40px) 0 0; }
.help-page section { padding-block: clamp(26px, 4vw, 46px); }
.help-page .head { margin-bottom: 22px; }

/* breathing room between the header rule and the first category row */
body.cat-page main { padding-top: clamp(8px, 1.3vw, 15px); }

/* ---------- billboard carousel: swipes sideways, like the app ---------- */
.bb-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bb-strip::-webkit-scrollbar { display: none; }

/* fixed card width inside a full-screen lane: on wide monitors a second
   (and third) billboard rides alongside the first */
.bb-strip .pcard {
  flex: 0 0 min(570px, 90vw);
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: no-preference) {
  .bb-strip .pcard { animation: card-in .5s cubic-bezier(.2, .7, .3, 1) both; }
}

/* browse content runs almost the full screen width, like the chip rows */
body.cat-page .bb-strip,
body.cat-page .pgrid {
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(20px, 3vw, 44px);
}