/* =====================================================================
   REVCHK — public site
   A clean, corporate stylesheet written as one system rather than a pile
   of overrides. The admin has its own sheet; nothing here affects it.

   Palette is taken from the logo:
     navy #16324F · green #46B12F · leaf #7FC11A · blue #0F8ED1 · amber #FCBE10

   Rules that are never broken:
     - Amber is a rule, an underline or a small badge. Never behind text.
     - Green backgrounds carry white text at button weight only.
     - Body copy is navy or slate on white. Every pair clears WCAG AA.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------- tokens */
:root {
  --navy:      #16324F;
  --navy-900:  #0E2338;
  --navy-700:  #274A6B;
  --ink:       #1B3A54;
  --slate:     #55697E;
  --slate-400: #8497A9;
  --line:      #E3EAF0;
  --line-soft: #EFF3F7;
  --wash:      #F6F9FB;
  --white:     #FFFFFF;

  --green:     #46B12F;
  --green-600: #3A9727;
  --green-700: #2F7D1F;
  --green-50:  #EDF7E9;
  --leaf:      #7FC11A;
  --blue:      #0F8ED1;
  --blue-50:   #E7F4FC;
  --amber:     #FCBE10;
  --red:       #C8452B;
  --red-50:    #FCEEEB;

  --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px; --s10: 120px;

  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(16,40,64,.05);
  --shadow:    0 2px 4px rgba(16,40,64,.04), 0 8px 24px rgba(16,40,64,.06);
  --shadow-lg: 0 8px 16px rgba(16,40,64,.06), 0 24px 56px rgba(16,40,64,.10);

  --container: 1160px;
}

/* ------------------------------------------------------- foundations */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; color: var(--navy); }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

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

/* ---------------------------------------------------------- layout */
/* Columns use flexbox with margin gutters rather than grid `gap`, so the
   layout holds up on older mobile browsers as well as current ones. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px)  { .container { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1200px) { .container { padding-left: 40px; padding-right: 40px; } }

.container-narrow { max-width: 760px; }

.section { padding-top: var(--s8); padding-bottom: var(--s8); }
@media (min-width: 768px) { .section { padding-top: var(--s9); padding-bottom: var(--s9); } }
.section-wash { background: var(--wash); }
.section-tight { padding-top: var(--s7); padding-bottom: var(--s7); }

.stack > * + * { margin-top: var(--s4); }

/* Row / column system -------------------------------------------------
   .row wraps columns and pulls its own gutter back; every .col carries
   half the gutter on each side and a bottom margin. */
.row {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -10px; margin-right: -10px;
}
.row > .col { width: 100%; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }
.row.tight { margin-left: -6px; margin-right: -6px; }
.row.tight > .col { padding-left: 6px; padding-right: 6px; margin-bottom: 12px; }
.row.align-center { -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.row.no-bottom > .col { margin-bottom: 0; }

@media (min-width: 640px) {
  .col-sm-6 { width: 50%; }
}
@media (min-width: 900px) {
  .row { margin-left: -14px; margin-right: -14px; }
  .row > .col { padding-left: 14px; padding-right: 14px; margin-bottom: 28px; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333%; }
  .col-md-5 { width: 41.6667%; }
  .col-md-8 { width: 66.6667%; }
}
@media (min-width: 1000px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
}

/* Equal-height cards inside a row */
.row.stretch { -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }
.row.stretch > .col > .card { height: 100%; }

.section-head { margin-bottom: var(--s6); }
.section-head .lead { margin-top: var(--s3); }

/* --------------------------------------------------------- type */
.eyebrow {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green-700); background: var(--green-50);
  padding: 7px 14px; border-radius: 999px; margin-bottom: var(--s4);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 8px;
}

.h-xl { font-size: 2.05rem; line-height: 1.1; font-weight: 800; }
.h-lg { font-size: 1.6rem; line-height: 1.2; font-weight: 800; }
.h-md { font-size: 1.2rem; line-height: 1.32; font-weight: 700; }
.h-sm { font-size: 1.05rem; line-height: 1.4; font-weight: 700; }

.lead { font-size: 1.04rem; line-height: 1.66; color: var(--slate); }
.muted { color: var(--slate); }
.tiny  { font-size: .82rem; color: var(--slate); }
.measure { max-width: 62ch; }

.rule {
  width: 56px; height: 4px; border-radius: 2px;
  background: var(--amber); margin-bottom: var(--s4);
}

/* ------------------------------------------------------- buttons */
.btn {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-family: var(--body); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 15px 26px; border-radius: var(--r); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(70,177,47,.28); }
.btn-primary:hover { background: var(--green-600); color: #fff; box-shadow: 0 6px 18px rgba(70,177,47,.32); }

.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-900); color: #fff; }

.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { background: var(--wash); border-color: var(--slate-400); color: var(--navy); }

.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(255,255,255,.4); }

.btn-sm { padding: 10px 18px; font-size: .92rem; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

.btn-group {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin: 0 -6px;
}
.btn-group > .btn { margin: 0 6px 12px; }
@media (max-width: 479px) { .btn-group > .btn { width: 100%; } }

/* -------------------------------------------------------- header */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  height: 68px;
}
@media (min-width: 900px) { .masthead-in { height: 82px; } }

.logo { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; flex: 0 0 auto; }
.logo img { height: 32px; width: auto; }
@media (min-width: 900px) { .logo img { height: 40px; } }

.mainnav { display: none; }
@media (min-width: 900px) {
  .mainnav { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
  .mainnav a {
    color: var(--navy); font-weight: 600; font-size: .95rem; text-decoration: none;
    position: relative; padding-top: 6px; padding-bottom: 6px; margin-left: var(--s6);
  }
  .mainnav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--green); transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
  }
  .mainnav a:hover::after, .mainnav a.current::after { transform: scaleX(1); }
}

.head-actions { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.head-actions > * { margin-left: var(--s3); }
.head-actions > *:first-child { margin-left: 0; }
.head-phone {
  display: none; font-weight: 700; color: var(--navy); font-size: .95rem;
}
@media (min-width: 1080px) { .head-phone { display: -webkit-inline-box; display: inline-flex; -webkit-align-items: center; align-items: center; } }
.head-phone svg { width: 17px; height: 17px; color: var(--green); margin-right: 8px; }
@media (max-width: 899px) { .head-actions .btn { display: none; } }

.burger {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; padding: 0;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--navy);
}
.burger span { position: relative; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top: 6px; }

.mobilenav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobilenav.open { display: block; }
.mobilenav a {
  display: block; padding: 15px 20px; color: var(--navy); font-weight: 600;
  border-bottom: 1px solid var(--line-soft); text-decoration: none;
}
.mobilenav .btn { margin: var(--s4) 20px var(--s5); width: calc(100% - 40px); }

/* ---------------------------------------------------------- hero */
.hero { padding-top: var(--s7); padding-bottom: var(--s8); overflow: hidden; }
@media (min-width: 900px) { .hero { padding-top: var(--s9); padding-bottom: var(--s9); } }

.hero-grid {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.hero-grid > * { width: 100%; }
.hero-grid > *:first-child { margin-bottom: var(--s7); }
@media (min-width: 980px) { .hero-grid > *:first-child { margin-bottom: 0; } }
@media (min-width: 980px) {
  .hero-grid { margin-left: -20px; margin-right: -20px; }
  .hero-grid > * { padding-left: 20px; padding-right: 20px; }
  .hero-grid > *:first-child { width: 54%; }
  .hero-grid > *:last-child  { width: 46%; }
}

.hero h1 { margin-bottom: var(--s4); }
.hero h1 em { font-style: normal; color: var(--green); }
.hero .lead { margin-bottom: var(--s5); max-width: 46ch; }

.trustrow {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.trustrow div {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  width: 100%; margin-bottom: 10px;
  font-size: .93rem; font-weight: 600; color: var(--navy);
}
.trustrow svg { width: 18px; height: 18px; color: var(--green); flex: 0 0 18px; margin-right: 9px; }
@media (min-width: 620px) {
  .trustrow div { width: auto; margin-bottom: 0; margin-right: var(--s6); }
  .trustrow div:last-child { margin-right: 0; }
}

/* The hero visual: a worked example, which is the strongest thing we
   can show a seller. Built in markup so it stays sharp and responsive. */
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.quote-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--leaf), var(--green) 35%, var(--blue) 75%, var(--amber));
}
.quote-head { padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--line-soft); }
.quote-head .label { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-400); }
.quote-head h3 { font-size: 1.15rem; margin-top: 6px; }

.quote-lines { padding: var(--s3) var(--s5) var(--s4); }
.quote-lines .qrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--s3); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-soft); font-size: .97rem;
}
.quote-lines .qrow:last-child { border-bottom: 0; }
.quote-lines .qrow dt { color: var(--slate); margin: 0; padding-right: var(--s4); }
.quote-lines .qrow dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.quote-lines .qrow.minus dd { color: var(--slate); }

.quote-total {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  background: var(--green-50); padding: var(--s5); border-top: 1px solid rgba(70,177,47,.22);
}
.quote-total .lbl { font-weight: 700; color: var(--green-700); }
.quote-total .amt { font-family: var(--display); font-weight: 800; font-size: 1.85rem; color: var(--green-700); }

.quote-foot { padding: var(--s4) var(--s5); font-size: .84rem; color: var(--slate); background: var(--wash); }

/* -------------------------------------------------------- cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5);
}
.card-pad-lg { padding: var(--s6); }
.card-raised { box-shadow: var(--shadow); border-color: var(--line-soft); }

.grid {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -10px; margin-right: -10px;
}
.grid > * { width: 100%; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }
@media (min-width: 640px) {
  .grid-2 > * { width: 50%; }
  .grid-4 > * { width: 50%; }
}
@media (min-width: 900px) {
  .grid { margin-left: -14px; margin-right: -14px; }
  .grid > * { padding-left: 14px; padding-right: 14px; margin-bottom: 28px; }
  .grid-3 > * { width: 33.3333%; }
  .grid-4 > * { width: 25%; }
}

.split {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -18px; margin-right: -18px;
}
.split > * { width: 100%; padding-left: 18px; padding-right: 18px; margin-bottom: var(--s6); }
@media (min-width: 900px) {
  .split > *:first-child { width: 57%; margin-bottom: 0; }
  .split > *:last-child  { width: 43%; margin-bottom: 0; }
}

.section-head { margin-bottom: var(--s6); }
.section-head .lead { margin-top: var(--s3); }

/* ------------------------------------------------------- process */
.steps { counter-reset: n; }
.step { position: relative; padding-left: 0; }
.step .n {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--navy); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  margin-bottom: var(--s4);
}
.step h3 { margin-bottom: 7px; }
.step p { color: var(--slate); font-size: .95rem; }

/* ------------------------------------------------- category grid */
.cats {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -6px; margin-right: -6px;
}

.cat {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4); font-weight: 600; font-size: .93rem; color: var(--navy);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cat:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.cat svg { width: 22px; height: 22px; color: var(--green); flex: 0 0 22px; margin-right: var(--s3); }

/* ---------------------------------------------------- marketplace */
.markets {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -8px; margin-right: -8px;
}
.markets > * { width: 100%; }
.market { margin: 0 8px 16px; }
@media (min-width: 700px)  { .markets > * { width: 50%; } }
@media (min-width: 1100px) { .markets > * { width: 25%; } }

.market {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.market:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.market .ic {
  flex: 0 0 46px; height: 46px; border-radius: var(--r); margin-right: var(--s4);
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: var(--blue-50);
}
.market .ic svg { width: 24px; height: 24px; }
.market strong { display: block; color: var(--navy); font-size: 1rem; }
.market span { display: block; color: var(--slate); font-size: .86rem; margin-top: 2px; }
.market .arw { margin-left: auto; color: var(--blue); font-size: 1.3rem; line-height: 1; }

/* ---------------------------------------------------------- forms */
.field { margin-bottom: var(--s4); }
.field > label {
  display: block; font-weight: 600; font-size: .92rem; color: var(--navy); margin-bottom: 7px;
}
.req { color: var(--red); }

.input, .textarea, .select {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--navy);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 13px 15px; transition: border-color .14s ease, box-shadow .14s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(70,177,47,.14);
}
.textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355697E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
  padding-right: 42px;
}
.field.bad .input, .field.bad .textarea, .field.bad .select { border-color: var(--red); }
.err { display: block; color: var(--red); font-size: .85rem; margin-top: 6px; font-weight: 500; }
.hint { display: block; color: var(--slate); font-size: .85rem; margin-top: 6px; }

.check {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  font-size: .93rem; line-height: 1.5; cursor: pointer;
}
.check input { width: 19px; height: 19px; margin: 2px 11px 0 0; flex: 0 0 19px; accent-color: var(--green); }

.form-row {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -8px; margin-right: -8px;
}
.form-row > .field { width: 100%; padding-left: 8px; padding-right: 8px; }
@media (min-width: 620px) { .form-row > .field { width: 50%; } }

.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ------------------------------------------------------- notices */
.notice { border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s4); font-size: .95rem; border-left: 4px solid; }
.notice p { margin: 0; }
.notice-success { background: var(--green-50); border-color: var(--green); color: #205417; }
.notice-info    { background: var(--blue-50);  border-color: var(--blue);  color: #0B4C72; }
.notice-warn    { background: #FFF8E4;         border-color: var(--amber); color: #6B4E00; }
.notice-error   { background: var(--red-50);   border-color: var(--red);   color: #8A2C18; }

/* ----------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  padding: var(--s5) 0; font-weight: 700; font-size: 1.02rem; color: var(--navy);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 1.5rem; font-weight: 500; color: var(--green); line-height: 1; flex: 0 0 auto;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding-bottom: var(--s5); color: var(--slate); max-width: 68ch; }

/* --------------------------------------------------------- prose */
.prose h2 { font-size: 1.4rem; margin: var(--s7) 0 var(--s3); }
.prose h3 { font-size: 1.1rem; margin: var(--s6) 0 var(--s2); }
.prose p, .prose li { color: var(--slate); line-height: 1.72; max-width: 70ch; }
.prose p { margin-bottom: var(--s4); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose > *:first-child { margin-top: 0; }

/* ---------------------------------------------------------- table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.simple { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 420px; }
table.simple th, table.simple td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.simple thead th { background: var(--wash); font-weight: 700; color: var(--navy); font-size: .88rem; }
table.simple tbody tr:last-child td { border-bottom: 0; }
table.simple .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ------------------------------------------------------- cta band */
.cta-band { background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: var(--s7) var(--s5); text-align: center; }

@media (min-width: 768px) { .cta-band { padding: var(--s8) var(--s7); } }
.cta-band h2 { color: #fff; margin-bottom: var(--s3); }
.cta-band p { color: rgba(255,255,255,.82); max-width: 52ch; margin-left: auto; margin-right: auto; margin-bottom: var(--s5); }
.cta-band .btn-group { justify-content: center; }

/* --------------------------------------------------------- footer */
.footer { background: var(--navy); color: rgba(255,255,255,.78); padding-top: var(--s8); padding-bottom: var(--s5); }
.footer-grid {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -16px; margin-right: -16px;
}
.footer-grid > * { width: 100%; padding-left: 16px; padding-right: 16px; margin-bottom: var(--s6); }
@media (min-width: 700px) {
  .footer-grid > *            { width: 20%; margin-bottom: 0; }
  .footer-grid > *:first-child { width: 40%; }
}
.footer h4 { color: #fff; font-size: .87rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: var(--s4); }
.footer a { display: block; color: rgba(255,255,255,.78); padding-top: 6px; padding-bottom: 6px; font-size: .95rem; text-decoration: none; }
.footer a:hover { color: var(--leaf); text-decoration: none; }
.footer .blurb { font-size: .93rem; line-height: 1.65; max-width: 34ch; margin-top: var(--s4); }
.footer-mark img { height: 44px; width: auto; }
.footer-base {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.14);
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-justify-content: space-between; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.6);
}
.footer-base > span { margin-right: var(--s5); margin-bottom: var(--s2); }

/* --------------------------------------------------------- misc */
.page-header { padding-top: var(--s7); padding-bottom: var(--s6); border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .page-header { padding-top: var(--s8); padding-bottom: var(--s7); } }
.page-header h1 { margin-bottom: var(--s3); }

.center { text-align: center; }
.mt-0 { margin-top: 0; }

.empty-state { text-align: center; padding: var(--s8) var(--s5); color: var(--slate); }
.empty-state h2 { margin-bottom: var(--s3); }

@media print {
  .masthead, .footer, .btn { display: none !important; }
}

/* ------------------------------------------------- responsive type
   clamp() is not safe on older mobile browsers, so the scale steps
   through breakpoints instead. */
@media (min-width: 768px) {
  .h-xl { font-size: 2.7rem; }
  .h-lg { font-size: 2rem; }
  .h-md { font-size: 1.32rem; }
  .lead { font-size: 1.12rem; }
}
@media (min-width: 1100px) {
  .h-xl { font-size: 3.25rem; line-height: 1.06; }
  .h-lg { font-size: 2.25rem; }
  .lead { font-size: 1.15rem; }
}

/* Long headings should not run the full measure on wide screens. */
@media (min-width: 980px) { .hero h1 { max-width: 13ch; } }

/* --- Row trailing-margin compensation ------------------------------
   Columns carry a bottom margin for wrapped rows, which leaves dead
   space under the final row. Pull it back on the container. */
.grid  { margin-bottom: -20px; }
.cats  { margin-bottom: -12px; }
.markets { margin-bottom: -16px; }
@media (min-width: 900px) { .grid { margin-bottom: -28px; } }

/* --- Category tiles ------------------------------------------------
   Inside the narrower split column, two across reads better than three
   and stops short labels breaking over three lines. */
.cat {
  min-height: 60px;
  line-height: 1.35;
  -webkit-align-items: center; align-items: center;
}

/* Full-width category lists (outside a split) can run wider. */

/* =====================================================================
   Compatibility layer
   The inner pages were written against the previous class names. Rather
   than rewrite every template at once, those names are mapped onto the
   new system here so the whole site is visually consistent.
   ===================================================================== */

.wrap, .wrap-narrow {
  width: 100%; max-width: var(--container);
  margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
}
.wrap-narrow { max-width: 760px; }
@media (min-width: 768px)  { .wrap, .wrap-narrow { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1200px) { .wrap { padding-left: 40px; padding-right: 40px; } }

.page-head {
  padding-top: var(--s7); padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s7);
}
@media (min-width: 768px) { .page-head { padding-top: var(--s8); padding-bottom: var(--s6); } }
.page-head h1 { font-size: 2.05rem; line-height: 1.12; font-weight: 800; margin-bottom: var(--s3); }
@media (min-width: 768px) { .page-head h1 { font-size: 2.7rem; } }

.lede { font-size: 1.06rem; line-height: 1.66; color: var(--slate); max-width: 62ch; }
@media (min-width: 768px) { .lede { font-size: 1.14rem; } }

.eyebrow + h1 { margin-top: 0; }

.small  { font-size: .93rem; color: var(--slate); line-height: 1.6; }
.required { color: var(--red); }
.mono { font-variant-numeric: tabular-nums; }

.btn-quiet { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-quiet:hover { background: var(--wash); border-color: var(--slate-400); color: var(--navy); }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }

/* Old markup used .row for button clusters. */
.row {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -6px; margin-right: -6px;
}
.row > .btn, .row > a.btn { margin: 0 6px 12px; }
.row-between {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
}

/* Old FAQ markup */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  padding: var(--s5) 0; font-weight: 700; font-size: 1.02rem; color: var(--navy);
  cursor: pointer; list-style: none; font-family: var(--display);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.5rem; font-weight: 500; color: var(--green); line-height: 1; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding-bottom: var(--s5); color: var(--slate); max-width: 68ch; margin: 0; line-height: 1.7; }

/* Old chip/tag lists */
.chips {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -5px;
}
.chip, .chips > label, .taglist span {
  display: inline-block; margin: 0 5px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-size: .9rem; font-weight: 600; color: var(--navy);
  text-decoration: none;
}
.chip:hover { border-color: var(--green); text-decoration: none; }
.chip .count { color: var(--slate); font-weight: 500; }

/* Old step list */
.steps { list-style: none; padding: 0; margin: 0; }
.steps .step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4); }
.steps .step h3 { font-size: 1.05rem; margin-bottom: 7px; }
.steps .step p { color: var(--slate); margin: 0; }

/* Old tile / deal blocks */
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); text-align: center;
}
.tile .lab { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.tile .num { display: block; font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--navy); margin: 8px 0 4px; line-height: 1; }
.tile-accent .num { color: var(--green); }
.tile-money .num { color: var(--green); }
.deal-split {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px;
}
.deal-split > * { width: 100%; margin: 0 10px 20px; }
@media (min-width: 620px) { .deal-split > * { width: calc(50% - 20px); } }

/* Old tables */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
table.data th, table.data td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.data thead th { background: var(--wash); font-weight: 700; font-size: .86rem; color: var(--navy); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .right { text-align: right; }
table.data .strong { font-weight: 700; }

/* Old empty state */
.empty { text-align: center; padding: var(--s8) var(--s5); color: var(--slate); }
.empty h2, .empty h3 { margin-bottom: var(--s3); }

/* Definition lists */
.spec { margin: 0; }
.spec dt { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); margin-top: var(--s4); }
.spec dd { margin: 3px 0 0; color: var(--navy); font-weight: 500; }

.center { text-align: center; }
.hide { position: absolute; left: -9999px; }

/* =====================================================================
   Texture and depth
   The page was flat white. These add quiet background structure without
   putting anything behind body copy.
   ===================================================================== */

.hero {
  position: relative;
  background-color: #fff;
  background-image:
    radial-gradient(circle at 88% 8%,  rgba(15,142,209,.10) 0%, rgba(15,142,209,0) 45%),
    radial-gradient(circle at 2% 22%,  rgba(127,193,26,.13) 0%, rgba(127,193,26,0) 42%),
    radial-gradient(circle at 60% 100%, rgba(252,190,16,.09) 0%, rgba(252,190,16,0) 50%);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
}

/* A faint engineering grid, which suits a firm that catalogues things. */
.section-wash {
  background-color: var(--wash);
  background-image:
    linear-gradient(rgba(22,50,79,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,50,79,.035) 1px, transparent 1px);
  background-size: 44px 44px;
}

.band-navy {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 12% 15%, rgba(127,193,26,.20) 0%, rgba(127,193,26,0) 45%),
    radial-gradient(circle at 88% 85%, rgba(15,142,209,.26) 0%, rgba(15,142,209,0) 48%);
  color: #fff;
}
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy .lead, .band-navy p { color: rgba(255,255,255,.84); }

/* ------------------------------------------------------- stats band */
.stats {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -12px; margin-right: -12px;
}
.stats > div { width: 50%; padding: 0 12px; margin-bottom: var(--s5); text-align: center; }
@media (min-width: 860px) { .stats > div { width: 25%; margin-bottom: 0; } }
.stats .fig {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.3rem; line-height: 1; color: #fff; margin-bottom: 8px;
}
.stats .cap { display: block; font-size: .9rem; color: rgba(255,255,255,.78); }
@media (min-width: 860px) { .stats .fig { font-size: 2.9rem; } }

/* --------------------------------------------------- listing cards */
.listings {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -10px; margin-right: -10px; margin-bottom: -20px;
}
.listings > * { width: 100%; padding: 0 10px; margin-bottom: 20px; }
@media (min-width: 560px)  { .listings > * { width: 50%; } }
@media (min-width: 1000px) { .listings > * { width: 25%; } }

.listing {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; height: 100%;
  text-decoration: none; position: relative;
  -webkit-transition: all .18s ease; transition: all .18s ease;
}
.listing:hover {
  border-color: var(--green); box-shadow: var(--shadow-lg);
  -webkit-transform: translateY(-4px); transform: translateY(-4px);
  text-decoration: none;
}
.listing-shot { position: relative; background: var(--wash); overflow: hidden; }
.listing-shot img {
  width: 100%; height: auto; display: block;
  -webkit-transition: transform .35s ease; transition: transform .35s ease;
}
.listing:hover .listing-shot img { -webkit-transform: scale(1.04); transform: scale(1.04); }

.listing-flag {
  position: absolute; top: 12px; left: 12px;
  background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
}
.listing-flag.sold { background: var(--red); }
.listing-flag.avail { background: var(--green); }

.listing-body { padding: var(--s4); }
.listing-body h3 {
  font-size: .99rem; line-height: 1.35; margin-bottom: 6px; color: var(--navy);
  display: block; max-height: 2.7em; overflow: hidden;
}
.listing-meta { font-size: .82rem; color: var(--slate); margin-bottom: var(--s3); }
.listing-foot {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  padding-top: var(--s3); border-top: 1px solid var(--line-soft);
}
.listing-price { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--navy); }
.listing-cta { font-size: .84rem; font-weight: 700; color: var(--green); }

/* ------------------------------------------------ value calculator */
.calc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s6); box-shadow: var(--shadow-lg);
}
.calc .calc-label {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: baseline; align-items: baseline;
  margin-bottom: var(--s4);
}
.calc .calc-label span { font-weight: 600; color: var(--slate); font-size: .95rem; }
.calc .calc-label strong {
  font-family: var(--display); font-weight: 800; font-size: 1.9rem; color: var(--navy);
}
.calc input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  border-radius: 999px; background: var(--line); outline: none; margin: 0 0 var(--s5);
}
.calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px;
  border-radius: 50%; background: var(--green); cursor: pointer;
  border: 4px solid #fff; box-shadow: 0 2px 8px rgba(16,40,64,.25);
}
.calc input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--green);
  cursor: pointer; border: 4px solid #fff;
}
.calc-out {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.calc-out > div { width: 50%; }
.calc-out > div:first-child { padding-right: 6px; }
.calc-out > div:last-child  { padding-left: 6px; }
.calc-out .box { border-radius: var(--r); padding: var(--s4); text-align: center; }
.calc-out .box.keep { background: var(--green-50); }
.calc-out .box.fee  { background: var(--wash); }
.calc-out .box .k { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.calc-out .box .v { display: block; font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.calc-out .box.keep .v { color: var(--green-700); }
.calc-out .box.fee .v  { color: var(--navy); }

/* --------------------------------------------------- micro-motion */
.card, .market, .cat { -webkit-transition: all .18s ease; transition: all .18s ease; }
.card-raised:hover { box-shadow: var(--shadow-lg); }
.step .n { -webkit-transition: transform .2s ease; transition: transform .2s ease; }
.card.step:hover .n { -webkit-transform: scale(1.08); transform: scale(1.08); }

/* Footer wordmark: the white knockout, sized for the navy ground. */
.footer-mark img { height: 34px; width: auto; }
@media (min-width: 700px) { .footer-mark img { height: 40px; } }

/* Category tiles are direct children of .cats, so their own margins have to
   be inside the declared width or they wrap one per row. */

/* Flex items default to min-width:auto, so a nested negative-margin grid can
   force its column wider than its declared width and push a sibling onto the
   next line. Allowing them to shrink keeps two-column sections intact. */
.split > *, .grid > *, .row > .col, .hero-grid > *, .listings > *, .markets > * {
  min-width: 0;
}
.cats { max-width: 100%; }

/* --------------------------------------------------- clearance band */
.clearance {
  margin-top: var(--s7);
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(127,193,26,.22) 0%, rgba(127,193,26,0) 46%),
    radial-gradient(circle at 92% 84%, rgba(15,142,209,.28) 0%, rgba(15,142,209,0) 48%);
  border-radius: var(--r-xl);
  padding: var(--s6) var(--s5);
  color: #fff;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
}
@media (min-width: 900px) { .clearance { padding: var(--s7); } }
.clearance-text { width: 100%; margin-bottom: var(--s5); }
.clearance-act  { width: 100%; }
@media (min-width: 900px) {
  .clearance-text { width: 62%; margin-bottom: 0; padding-right: var(--s6); }
  .clearance-act  { width: 38%; text-align: right; }
}
.clearance h3 { color: #fff; margin-bottom: var(--s3); }
.clearance p  { color: rgba(255,255,255,.84); margin: 0; }

/* --------------------------------------------------- category tiles
   Each tile sits in a plain wrapper that carries the width, so the
   tile's own spacing never affects the column maths. */
.cats > div { width: 50%; padding: 0 6px; margin-bottom: 12px; }
@media (min-width: 640px)  { .cats > div { width: 33.3333%; } }
@media (min-width: 1000px) { .cats-wide > div { width: 25%; } }
.cats .cat { width: 100%; margin: 0; height: 100%; }

/* --------------------------------------------------------- search bar */
.searchbar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); box-shadow: var(--shadow-sm);
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -6px; margin-right: -6px;
}
.searchbar > * { margin: 0 6px 12px; }
.searchbar-main { position: relative; width: 100%; }
.searchbar-main svg {
  position: absolute; left: 14px; top: 50%; margin-top: -10px;
  width: 20px; height: 20px; color: var(--slate-400);
}
.searchbar-main .input { padding-left: 44px; }
.searchbar-side { width: 100%; }
.searchbar .btn { width: 100%; }
@media (min-width: 760px) {
  .searchbar > * { margin-bottom: 0; }
  .searchbar-main { width: 46%; }
  .searchbar-side { width: 26%; }
  .searchbar .btn { width: 22%; }
  .searchbar > * { margin-left: 6px; margin-right: 6px; }
}
@media (min-width: 1040px) {
  /* One row: search, three filters, button. Percentages total under 100
     so the 12px gutters never force a wrap. */
  .searchbar-main { width: 30%; }
  .searchbar-side { width: 18%; }
  .searchbar .btn { width: 14%; }
}

.filterline {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-top: var(--s4);
}
.filterline-left { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.filterline-left .tiny { margin-right: var(--s4); }
.clearlink { font-size: .88rem; font-weight: 600; color: var(--blue); }

.pager {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: center; align-items: center;
  margin-top: var(--s7);
}
.pager a, .pager .pager-now {
  padding: 11px 18px; border-radius: var(--r); font-weight: 600; font-size: .93rem;
  margin: 0 6px; text-decoration: none;
}
.pager a { background: #fff; border: 1px solid var(--line); color: var(--navy); }
.pager a:hover { border-color: var(--green); text-decoration: none; }
.pager .pager-now { color: var(--slate); }

/* ------------------------------------------------------- item page */
.crumbs { padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; color: var(--slate); }
.crumbs a { color: var(--slate); }
.crumbs a:hover { color: var(--navy); }
.crumbs span { margin: 0 6px; color: var(--slate-400); }

.itemgrid {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-left: -14px; margin-right: -14px;
}
.itemgrid > * { width: 100%; padding: 0 14px; margin-bottom: var(--s6); }
@media (min-width: 900px) {
  .itemgrid-media { width: 58%; margin-bottom: 0; }
  .itemgrid-info  { width: 42%; margin-bottom: 0; }
}

.shot-main {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--wash);
}
.shot-main img { width: 100%; height: auto; display: block; }

.shot-strip {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin: 10px -5px 0;
}
.shot-thumb {
  width: 25%; margin: 0; padding: 0 5px 10px; border: 0; background: none; cursor: pointer;
}
.shot-thumb img { width: 100%; height: auto; border: 2px solid var(--line); border-radius: var(--r-sm); }
.shot-thumb.is-current img { border-color: var(--green); }

.itemref {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate); background: var(--wash);
  padding: 6px 11px; border-radius: 999px; margin-bottom: var(--s3);
}
.itemprice { margin: var(--s4) 0; }
.itemprice .amount { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--navy); }
.pilltag { display: inline-block; margin-left: 10px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.pilltag.sold { background: var(--red-50); color: var(--red); }

.itemfacts { margin: 0 0 var(--s5); border-top: 1px solid var(--line); }
.itemfacts > div {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.itemfacts dt { margin: 0; color: var(--slate); font-size: .92rem; }
.itemfacts dd { margin: 0; font-weight: 600; font-size: .95rem; text-align: right; }

.buyblock {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); background: var(--wash);
}
.buylink {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px; margin-bottom: 8px; text-decoration: none;
  -webkit-transition: all .16s ease; transition: all .16s ease;
}
.buylink:last-child { margin-bottom: 0; }
.buylink:hover { border-color: var(--blue); text-decoration: none; -webkit-transform: translateX(2px); transform: translateX(2px); }
.bl-ic { flex: 0 0 26px; margin-right: 12px; }
.bl-ic svg { width: 24px; height: 24px; }
.bl-txt strong { display: block; color: var(--navy); font-size: .95rem; }
.bl-txt span { display: block; color: var(--slate); font-size: .84rem; }
.bl-go { margin-left: auto; color: var(--blue); font-size: 1.2rem; }

.money-input { position: relative; }
.money-input span {
  position: absolute; left: 14px; top: 50%; margin-top: -10px;
  color: var(--slate); font-weight: 600; line-height: 1;
}
.money-input .input { padding-left: 30px; }

/* ---------------------------------------------------- distance search */
.nearnote {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  background: var(--blue-50); border-radius: var(--r);
  padding: 12px 16px; margin-top: var(--s4); font-size: .93rem; color: #0B4C72;
}
.nearnote svg { width: 18px; height: 18px; margin-right: 9px; color: var(--blue); flex: 0 0 18px; }
.nearnote strong { color: #083D5C; }
.nearnote .clearlink { margin-left: auto; }
.distance {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--blue-50); color: #0B4C72; font-size: .78rem; font-weight: 700;
}

/* ===================================================================
   Image zoom
   Desktop: the pointer drives a magnified view of the same photograph.
   Touch: no hover exists, so a tap opens a full-screen viewer instead.
   =================================================================== */
.shot-main { cursor: zoom-in; }
.shot-main img { -webkit-transition: opacity .12s ease; transition: opacity .12s ease; }

.shot-main.is-zooming {
  background-repeat: no-repeat;
  background-size: 220%;
}
.shot-main.is-zooming img { opacity: 0; }

.zoom-hint {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  background: rgba(22,50,79,.82); color: #fff;
  padding: 7px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  pointer-events: none;
}
.zoom-hint svg { width: 15px; height: 15px; margin-right: 7px; }
.shot-main.is-zooming .zoom-hint { opacity: 0; }
.on-touch { display: none; }
@media (hover: none) {
  .on-desktop { display: none; }
  .on-touch { display: inline; }
  .shot-main { cursor: default; }
}

/* Full-screen viewer, used on touch and as a fallback */
.lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(14,35,56,.94);
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%; max-height: 88vh; border-radius: var(--r);
  -webkit-transition: transform .2s ease; transition: transform .2s ease;
  -webkit-transform-origin: center center; transform-origin: center center;
}
.lightbox.zoomed { -webkit-overflow-scrolling: touch; overflow: auto; }
.lightbox.zoomed img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.16); color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.lightbox-note {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.75); font-size: .84rem;
}

/* ===================================================================
   Offer modal
   The form is a normal section in the page, so it still works with no
   JavaScript. The script lifts it into a dialog: a centred panel on
   desktop, a full-height sheet on a phone where that reads better.
   =================================================================== */
.btn-lg { padding: 17px 28px; font-size: 1.05rem; }

.offer-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 190;
  background: rgba(14,35,56,.55);
}
.offer-backdrop[hidden] { display: none; }

.offer-panel.is-modal {
  position: fixed; z-index: 195;
  left: 0; right: 0; bottom: 0; top: auto;
  max-height: 92vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.offer-panel.is-modal .offer-card {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-bottom: 0;
  box-shadow: 0 -12px 44px rgba(16,40,64,.22);
  position: relative;
}
@media (min-width: 720px) {
  .offer-panel.is-modal {
    top: 50%; bottom: auto; left: 50%; right: auto;
    width: 560px; max-width: calc(100vw - 40px);
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    max-height: 88vh;
  }
  .offer-panel.is-modal .offer-card { border-radius: var(--r-xl); border-bottom: 1px solid var(--line); }
}

.offer-close { display: none; }
.offer-panel.is-modal .offer-close {
  display: block; position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  font-size: 1.4rem; line-height: 1; color: var(--slate); cursor: pointer;
}
.offer-panel.is-modal .offer-close:hover { background: var(--wash); color: var(--navy); }

/* A phone sheet gets a grab handle so it reads as something you can dismiss. */
@media (max-width: 719px) {
  .offer-panel.is-modal .offer-card::before {
    content: ''; display: block; width: 44px; height: 4px; border-radius: 2px;
    background: var(--line); margin: 0 auto var(--s4);
  }
}
body.modal-open { overflow: hidden; }

/* ===================================================================
   Hero background
   A generated illustration of listings, offers and payments, sitting
   behind the hero so the page reads as an active marketplace.

   Legibility comes first: the artwork is held at low opacity and a
   white gradient is laid over the side the text occupies, so nothing
   is ever read against detail.
   =================================================================== */
.hero { position: relative; overflow: hidden; }

.hero-art {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  background-image: url('/assets/img/hero-activity.jpg');
  background-size: cover;
  background-position: center right;
  opacity: .72;
}
/* Wash the left-hand side to near-white so the headline sits on plain ground. */
.hero-veil {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  background: -webkit-linear-gradient(left, #fff 0%, #fff 42%, rgba(255,255,255,.88) 54%, rgba(255,255,255,.34) 76%, rgba(255,255,255,.20) 100%);
  background: linear-gradient(to right, #fff 0%, #fff 42%, rgba(255,255,255,.88) 54%, rgba(255,255,255,.34) 76%, rgba(255,255,255,.20) 100%);
}
.hero > .container { position: relative; z-index: 2; }

/* On a phone the artwork sits behind a full wash — the text takes the
   whole width there, so detail underneath would only hurt. */
@media (max-width: 900px) {
  .hero-art { opacity: .40; background-position: center; }
  .hero-veil {
    background: -webkit-linear-gradient(top, rgba(255,255,255,.90) 0%, rgba(255,255,255,.84) 60%, rgba(255,255,255,.90) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,.90) 0%, rgba(255,255,255,.84) 60%, rgba(255,255,255,.90) 100%);
  }
}

/* ------------------------------------------------------- clearances */
.clearance-strip {
  position: relative; z-index: 2;
  margin-top: var(--s7);
  border-top: 1px solid var(--line);
  padding-top: var(--s6);
}
.clearance-strip .ct-head {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-bottom: var(--s4);
}
.clearance-strip .ct-head svg {
  width: 26px; height: 26px; color: var(--green); margin-right: 12px; flex: 0 0 26px;
}
.clearance-strip h2 { font-size: 1.24rem; font-weight: 800; }
.clearance-strip p { color: var(--slate); font-size: 1rem; max-width: 62ch; margin-bottom: var(--s4); }

.ct-types {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -5px var(--s4);
}
.ct-types span {
  display: inline-block; margin: 0 5px 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-size: .9rem; font-weight: 600; color: var(--navy);
}
.ct-types span strong { color: var(--green-700); }

/* ===================================================================
   Page banner
   The inner pages get the same background treatment as the homepage
   hero, so the site holds together. The wash keeps type on clean ground.
   =================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  padding-top: var(--s8); padding-bottom: var(--s7);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
@media (min-width: 768px) { .page-hero { padding-top: var(--s9); padding-bottom: var(--s8); } }
.page-hero .hero-art {
  background-position: center right;
  opacity: .58;
}
.page-hero .hero-veil {
  background: -webkit-linear-gradient(left, #fff 0%, #fff 40%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.40) 80%, rgba(255,255,255,.26) 100%);
  background: linear-gradient(to right, #fff 0%, #fff 40%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.40) 80%, rgba(255,255,255,.26) 100%);
}
@media (max-width: 900px) {
  .page-hero .hero-art { opacity: .30; background-position: center; }
  .page-hero .hero-veil {
    background: -webkit-linear-gradient(top, rgba(255,255,255,.90) 0%, rgba(255,255,255,.86) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,.90) 0%, rgba(255,255,255,.86) 100%);
  }
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: 2.05rem; line-height: 1.12; font-weight: 800; margin-bottom: var(--s3); }
@media (min-width: 768px) { .page-hero h1 { font-size: 2.9rem; } }

/* --------------------------------------------------- feature blocks */
.feature {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
}
.feature .fi {
  flex: 0 0 46px; height: 46px; border-radius: 13px; margin-right: var(--s4);
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: var(--green-50);
}
.feature .fi svg { width: 23px; height: 23px; color: var(--green-700); }
.feature.blue .fi { background: var(--blue-50); }
.feature.blue .fi svg { color: var(--blue-dk, #0B72AA); }
.feature h3 { font-size: 1.02rem; margin-bottom: 5px; }
.feature p { color: var(--slate); font-size: .94rem; margin: 0; }

/* ------------------------------------------------------- timeline */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px;
  background: -webkit-linear-gradient(top, var(--leaf), var(--green) 40%, var(--blue));
  background: linear-gradient(to bottom, var(--leaf), var(--green) 40%, var(--blue));
}
.tl-item { position: relative; padding-bottom: var(--s6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -26px; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green);
}
.tl-item .when {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-700); background: var(--green-50);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
}
.tl-item h3 { font-size: 1.06rem; margin-bottom: 6px; }
.tl-item p { color: var(--slate); font-size: .95rem; margin: 0; }

/* ------------------------------------------------- split fee bar */
.feebar { margin: var(--s5) 0; }
.feebar-track {
  display: -webkit-box; display: -webkit-flex; display: flex;
  height: 62px; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.feebar-you {
  background: var(--green); color: #fff;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
}
.feebar-us {
  background: var(--navy); color: #fff;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.feebar-key {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: var(--s3);
}
.feebar-key span { font-size: .88rem; color: var(--slate); margin-right: var(--s5); }
.feebar-key b { color: var(--navy); }

/* ------------------------------------------------- included / not */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  padding: 10px 0; font-size: .95rem; color: var(--navy);
  border-bottom: 1px solid var(--line-soft);
}
.tick-list li:last-child { border-bottom: 0; }
.tick-list svg { width: 19px; height: 19px; flex: 0 0 19px; margin-right: 12px; margin-top: 2px; }
.tick-list.yes svg { color: var(--green); }
.tick-list.no svg { color: var(--slate-400); }
.tick-list.no li { color: var(--slate); }

/* A range input reports a wide intrinsic size, which makes a flex column
   refuse to shrink and drops its sibling onto the next line. Pinning the
   input's width keeps two-column layouts intact wherever the calculator
   appears. */
.calc input[type=range] { max-width: 100%; min-width: 0; }
.split > *, .hero-grid > * { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.card { min-width: 0; }

/* The share calculator reads better as its own centred block than squeezed
   into a column beside body copy. */
.calc-standalone { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ===================================================================
   Seller portal
   The reporting a seller actually wants: what they have, what it made,
   what they have been paid, and what is still coming.
   =================================================================== */
.portal-who { font-weight: 600; font-size: .92rem; color: var(--slate); margin-right: var(--s3); }
@media (max-width: 720px) { .portal-who { display: none; } }

.portal-head { padding-top: var(--s7); padding-bottom: var(--s5); }
.portal-head h1 { font-size: 1.8rem; font-weight: 800; }
@media (min-width: 768px) { .portal-head h1 { font-size: 2.3rem; } }

.money-tiles {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.money-tiles > div { width: 50%; padding: 0 6px; margin-bottom: 12px; }
@media (min-width: 900px) { .money-tiles > div { width: 25%; } }
.mt {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); height: 100%;
}
.mt .k {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 8px;
}
.mt .v {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.7rem; line-height: 1; color: var(--navy);
}
.mt .s { display: block; font-size: .84rem; color: var(--slate); margin-top: 8px; }
.mt.good { background: var(--green-50); border-color: rgba(70,177,47,.28); }
.mt.good .v { color: var(--green-700); }
.mt.wait { background: #FFF8E4; border-color: rgba(252,190,16,.4); }
.mt.wait .v { color: #6B4E00; }

.portal-tabs {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: var(--s5);
}
.portal-tabs a {
  padding: 12px 0; margin-right: var(--s6); font-weight: 600; font-size: .95rem;
  color: var(--slate); text-decoration: none; border-bottom: 3px solid transparent;
}
.portal-tabs a.on { color: var(--navy); border-bottom-color: var(--green); }
.portal-tabs a:hover { color: var(--navy); text-decoration: none; }

.prow {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); margin-bottom: 12px; text-decoration: none;
}
.prow:hover { border-color: var(--green); text-decoration: none; box-shadow: var(--shadow-sm); }
.prow .pic {
  flex: 0 0 62px; height: 62px; border-radius: var(--r); overflow: hidden;
  background: var(--wash); margin-right: var(--s4);
}
.prow .pic img { width: 62px; height: 62px; object-fit: cover; }
.prow .body { -webkit-box-flex: 1; -webkit-flex: 1 1 200px; flex: 1 1 200px; min-width: 0; }
.prow .body strong { display: block; color: var(--navy); font-size: .98rem; }
.prow .body span { display: block; font-size: .83rem; color: var(--slate); margin-top: 3px; }
.prow .figs { text-align: right; margin-left: auto; padding-left: var(--s4); }
.prow .figs .big { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.prow .figs .sub { display: block; font-size: .8rem; color: var(--slate); margin-top: 3px; }
@media (max-width: 620px) {
  .prow .figs { width: 100%; margin-left: 0; padding-left: 0; margin-top: var(--s3); text-align: left; }
}

.tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
}
.tag-live   { background: var(--green-50); color: var(--green-700); }
.tag-sold   { background: var(--blue-50); color: #0B4C72; }
.tag-prep   { background: var(--wash); color: var(--slate); }
.tag-wait   { background: #FFF8E4; color: #6B4E00; }
.tag-paid   { background: var(--green-50); color: var(--green-700); }
.tag-ended  { background: var(--red-50); color: var(--red); }
.tag-here   { background: var(--navy); color: #fff; }
.tag-yours  { background: #fff; color: var(--navy); border: 1px solid var(--line); }

.breakdown { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.breakdown .br {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft); font-size: .96rem;
}
.breakdown .br:last-child { border-bottom: 0; }
.breakdown .br span:first-child { color: var(--slate); }
.breakdown .br span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.breakdown .br.minus span:last-child { color: var(--slate); }
.breakdown .br.total { background: var(--green-50); }
.breakdown .br.total span { color: var(--green-700); font-weight: 800; }
.breakdown .br.total span:last-child { font-size: 1.15rem; }

.login-wrap {
  min-height: 100vh;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  padding: 24px; background: var(--wash);
}
.login-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s7) var(--s6); width: 100%; max-width: 420px; box-shadow: var(--shadow-lg);
}
.login-card img.logo-img { height: 34px; width: auto; margin: 0 auto var(--s5); display: block; }
.login-card h1 { font-size: 1.4rem; text-align: center; margin-bottom: 6px; }
.login-card .sub { text-align: center; color: var(--slate); font-size: .93rem; margin-bottom: var(--s5); }

/* Terms shown at signup: readable in place, and scrollable so the accept
   box is never pushed off the screen. */
.terms-box { margin-top: var(--s5); }
.terms-scroll {
  max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4);
  background: var(--wash); font-size: .88rem;
}
.terms-scroll .prose h2 { font-size: 1rem; margin: var(--s4) 0 6px; }
.terms-scroll .prose p, .terms-scroll .prose li { font-size: .88rem; line-height: 1.6; }
.login-card { max-width: 520px; }

/* ------------------------------------------------ storage decisions */
.decide-box {
  border: 1px solid rgba(252,190,16,.5); background: #FFF8E4;
  border-radius: var(--r-lg); padding: var(--s5);
}
.decide-box h2 { color: #6B4E00; margin-bottom: 8px; }
.decide-box > p { color: #6B4E00; font-size: .95rem; margin-bottom: var(--s5); max-width: 70ch; }
.decide-row {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4); margin-bottom: 10px;
}
.decide-what { -webkit-box-flex: 1; -webkit-flex: 1 1 240px; flex: 1 1 240px; min-width: 0; }
.decide-what strong { display: block; color: var(--navy); }
.decide-what .tiny { display: block; margin-top: 3px; }
.decide-acts {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-left: auto;
}
.decide-acts .btn { margin: 4px 0 0 8px; }
@media (max-width: 620px) {
  .decide-acts { margin-left: 0; width: 100%; margin-top: var(--s3); }
  .decide-acts .btn { margin: 0 8px 8px 0; }
}

/* ------------------------------------------------------- support view
   Deliberately loud. Staff must never mistake a customer's account for
   their own, or think a figure on screen is theirs to change. */
.support-bar {
  background: var(--amber); color: var(--navy);
  border-bottom: 2px solid rgba(22,50,79,.18);
  position: relative; z-index: 60;
}
.support-in {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  padding: 11px 0;
}
.support-text { font-size: .92rem; -webkit-box-flex: 1; -webkit-flex: 1 1 260px; flex: 1 1 260px; }
.support-in .btn {
  background: var(--navy); color: #fff; border-color: var(--navy);
  margin-left: auto; padding: 8px 16px; font-size: .86rem;
}
.support-in .btn:hover { background: var(--navy-900); color: #fff; }
@media (max-width: 620px) {
  .support-in .btn { margin-left: 0; margin-top: 8px; }
}

/* Agent portal: a small badge so it is obvious which account you are in. */
.agent-badge {
  display: inline-block; margin-left: 10px; padding: 4px 10px; border-radius: 999px;
  background: var(--blue-50); color: #0B4C72; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ------------------------------------------------- agent recruitment */
.agent-band {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 8% 20%, rgba(15,142,209,.34) 0%, rgba(15,142,209,0) 48%),
    radial-gradient(circle at 92% 80%, rgba(127,193,26,.26) 0%, rgba(127,193,26,0) 46%);
  border-radius: var(--r-xl); padding: var(--s6) var(--s5); color: #fff;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
}
@media (min-width: 900px) { .agent-band { padding: var(--s7); } }
.ab-text { width: 100%; margin-bottom: var(--s5); }
.ab-act  { width: 100%; }
@media (min-width: 900px) {
  .ab-text { width: 66%; margin-bottom: 0; padding-right: var(--s6); }
  .ab-act  { width: 34%; text-align: right; }
}
.agent-band h2 { color: #fff; margin-bottom: var(--s3); }
.agent-band p  { color: rgba(255,255,255,.86); margin: 0; max-width: 62ch; }

/* The four-column footer becomes five with the sign-in column. */
@media (min-width: 700px) {
  .footer-grid > *             { width: 18%; }
  .footer-grid > *:first-child { width: 28%; }
}

/* How payment works, on the item page. */
.paynote {
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  background: var(--blue-50); border-radius: var(--r);
  padding: var(--s4); margin-bottom: var(--s4);
}
.paynote h3 { margin-bottom: 6px; color: #0B4C72; }
.paynote p { color: #0B4C72; font-size: .9rem; margin: 0; }

/* Doorstep payment, agent side. Same components as the admin screen. */
.waiting-box {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  background: var(--wash); border: 1px dashed var(--line); border-radius: var(--r);
  padding: 20px; color: var(--slate); font-size: .95rem;
}
.pulse {
  width: 12px; height: 12px; border-radius: 50%; background: var(--blue);
  margin-right: 12px; flex: 0 0 12px;
  -webkit-animation: pulse 1.4s infinite; animation: pulse 1.4s infinite;
}
@-webkit-keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.cand {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  background: var(--green-50); border: 2px solid var(--green); border-radius: var(--r-lg);
  padding: 16px; margin-bottom: 10px;
}
.cand-what { -webkit-box-flex: 1; -webkit-flex: 1 1 180px; flex: 1 1 180px; }
.cand-what strong { display: block; font-size: 1.5rem; color: var(--green-700); line-height: 1.2; }
.cand-what .tiny { display: block; margin-top: 3px; }
.cand form { margin-left: auto; }
@media (max-width: 560px) {
  .cand form { margin-left: 0; width: 100%; margin-top: 12px; }
  .cand .btn { width: 100%; }
}
.cand-new { -webkit-animation: landed .5s ease; animation: landed .5s ease; }
@-webkit-keyframes landed { from { -webkit-transform: scale(.97); opacity: .4; } }
@keyframes landed { from { transform: scale(.97); opacity: .4; } }