/* The app stylesheet and the buyer portals use different names for the same colours.
   These pages load the app stylesheet, so map everything once, here, and use these. */
body.pub{
  --pg:#0b0d13;        /* page background */
  --text:#e8eaf0;      /* body text */
  --faint:#7d879e;     /* quiet text */
  --line2:#323b52;     /* stronger hairline */
  --gold-dim:#8a7238;  /* gold, held back */
}

/* Public pages. Same brand as the app, but laid out for somebody who has never
   seen it and is deciding in ten seconds whether we are serious. */

body.pub{background:var(--pg);color:var(--text);margin:0;
  font-family:Manrope,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* ---- masthead ---- */
.pub-top{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--pg);z-index:100;box-shadow:0 1px 0 rgba(0,0,0,.5)}
.pub-top .brand{display:flex;align-items:center;gap:14px;color:inherit}
.pub-top .brand img{width:76px;height:76px;border-radius:14px;display:block}
.pub-top .brand .lock{display:flex;flex-direction:column;justify-content:center;gap:4px}
.pub-top .brand .nm{display:block;font-weight:800;letter-spacing:-.022em;font-size:22px;
  line-height:1.05;color:var(--text)}
.pub-top .brand .sublock{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-weight:600;line-height:1}
.pub-top .right{display:flex;align-items:center;gap:22px}
 /* ---- the sign in dropdown ---- */
.signdrop{position:relative}
.signdrop > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;padding:9px 15px;font-size:13.5px}
.signdrop > summary::-webkit-details-marker{display:none}
.signdrop .caret{font-size:10px;transition:transform .15s ease}
.signdrop[open] .caret{transform:rotate(180deg)}
.dropmenu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:290px;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.5);overflow:hidden}
.dropmenu > a{display:block;padding:14px 18px;border-bottom:1px solid var(--line);
  color:inherit}
.dropmenu > a:hover{background:var(--panel2)}
.dropmenu > a b{display:block;font-size:15px;font-weight:700}
.dropmenu > a span{display:block;font-size:12.5px;color:var(--faint);margin-top:2px}
.dropfoot{padding:12px 18px;background:var(--pg);font-size:13px;color:var(--faint)}
.dropfoot a{color:var(--dim)}
.dropfoot a:hover{color:var(--gold)}
@media(max-width:720px){.dropmenu{width:250px}}
@media(max-width:400px){.dropmenu{width:calc(100vw - 36px)}}

/* the legal pages keep their own three links beside it */
.legalnav{display:flex;gap:18px;flex-wrap:wrap}
.legalnav a{font-size:14px;font-weight:700;color:var(--dim);white-space:nowrap}
.legalnav a:hover,.legalnav a.on{color:var(--gold)}
@media(max-width:820px){.legalnav{display:none}}

/* ---- page rhythm ---- */
.pub-wrap{max-width:1060px;margin:0 auto;padding:0 30px 90px}
@media(max-width:720px){.pub-wrap{padding:0 18px 60px}}
.pub-wrap section{padding:62px 0;border-bottom:1px solid var(--line)}
.pub-wrap section:last-of-type{border-bottom:0}
@media(max-width:720px){.pub-wrap section{padding:40px 0}}

/* the one signature: a monospace label with a gold rule, on every section */
.slab{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.slab span{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:600;white-space:nowrap}
.slab:after{content:"";flex:1;height:1px;background:linear-gradient(to right,
  var(--gold-dim),transparent)}

/* ---- hero ---- */
/* Two columns: what we say on the left, a photograph you can actually see on the
   right. Stacks on a phone with the picture first, the way a listing app opens. */
.hero{padding:66px 0 62px!important;border-bottom:1px solid var(--line)}
@media(max-width:900px){.hero{padding:34px 0 44px!important}}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;gap:30px}}
.hero-copy{min-width:0}
.hero h1{font-size:56px;line-height:1.02;letter-spacing:-.04em;font-weight:800;
  margin:0 0 20px}
@media(max-width:1000px){.hero h1{font-size:44px}}
@media(max-width:640px){.hero h1{font-size:34px;letter-spacing:-.03em}}
.hero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:18px}

.heroart{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line2);
  background:var(--panel2);box-shadow:0 26px 60px rgba(0,0,0,.42)}
.heroart img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:900px){
  .hero-in{display:flex;flex-direction:column}
  .heroart{order:-1;width:100%}
  .heroart img{aspect-ratio:16/10}
}
/* a caption strip so the photograph reads as ours rather than stock */
.heroart figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  background:linear-gradient(to top,rgba(6,7,11,.9),transparent);
  font-size:12.5px;font-weight:600;color:#e8eaf0}
.heroart figcaption span:last-child{font-family:'JetBrains Mono',monospace;color:var(--gold);
  white-space:nowrap}

/* the quiet credibility line under the hero buttons */
.creds{display:flex;gap:0;flex-wrap:wrap;margin-top:38px;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--panel)}
.creds div{flex:1;min-width:150px;padding:18px 20px;border-right:1px solid var(--line)}
.creds div:last-child{border-right:0}
.creds b{display:block;font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:700;
  letter-spacing:-.02em}
.creds span{display:block;font-size:12.5px;color:var(--faint);margin-top:4px;line-height:1.5}
@media(max-width:720px){.creds div{flex:0 0 50%;border-bottom:1px solid var(--line)}}

/* ---- full bleed hero, words sitting on the picture ---- */
 /* Sits outside the content wrapper, so it runs the full width of the window the
    way the bar above it does. */
.fullhero{position:relative;padding:0;border-bottom:1px solid var(--line);
  margin:0;width:100%;z-index:1}
.fh-art{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--panel2)}
.fh-art img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
@media(max-width:900px){.fh-art img{object-position:center 50%}}
/* dark enough on the left for white text to hold, clear enough on the right to see
   the work. Two layers rather than one so the picture is never a grey wash. */
.fh-art:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,10,15,.93) 0%,rgba(8,10,15,.84) 34%,
    rgba(8,10,15,.52) 62%,rgba(8,10,15,.30) 100%)}
/* the words sit low, so the dark is weighted to the bottom and the roofline stays clear */
.fh-art:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,10,15,.88) 0%,rgba(8,10,15,.55) 34%,
    transparent 66%)}
.fh-art.noimg{background:var(--panel)}
.fh-in{position:relative;z-index:2;max-width:1060px;margin:0 auto;
  padding:96px 30px 86px;min-height:54vh;display:flex;flex-direction:column;
  justify-content:flex-end}
@media(max-width:900px){.fh-in{padding:70px 30px 62px;min-height:0}}
@media(max-width:720px){.fh-in{padding:56px 18px 48px}}
.fh-in h1{font-size:62px;line-height:1.0;letter-spacing:-.042em;font-weight:800;
  margin:0 0 22px;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
@media(max-width:1000px){.fh-in h1{font-size:46px}}
@media(max-width:640px){.fh-in h1{font-size:34px;letter-spacing:-.03em;max-width:100%}}
.fh-in .lede{color:#cbd2e0;max-width:52ch;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.fh-in .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:18px}
/* the four figures sit on the bottom edge of the picture */
.fullhero .creds{position:relative;z-index:2;max-width:1060px;margin:0 auto;
  border-left:0;border-right:0;border-bottom:0;border-radius:0;
  background:rgba(11,13,19,.72);backdrop-filter:blur(8px)}

/* ---- the four points ---- */
.points{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:760px){.points{grid-template-columns:1fr}}
.points > div{background:var(--pg);padding:30px 28px}
@media(max-width:640px){.points > div{padding:24px 20px}}
.points .no{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold);
  font-weight:600;letter-spacing:.1em;display:block;margin-bottom:12px}
.points p{font-size:15.5px;line-height:1.72;color:var(--dim);margin:0}

/* ---- how it works ---- */
.how ol{margin:0;padding:0;list-style:none;counter-reset:step}
.how li{counter-increment:step;position:relative;padding:0 0 26px 58px;
  font-size:16px;line-height:1.7;color:var(--dim)}
.how li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:9px;width:38px;height:38px;
  display:grid;place-items:center}
.how li:not(:last-child):after{content:"";position:absolute;left:19px;top:40px;bottom:6px;
  width:1px;background:var(--line2)}
.how li b{color:var(--text);display:block;font-size:16.5px;margin-bottom:3px}

/* ---- the application ---- */
.applybox{background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  padding:38px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
@media(max-width:640px){.applybox{padding:24px 20px}}
.applybox .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.applybox .two{grid-template-columns:1fr}}
.applybox label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin:18px 0 7px}
.applybox input,.applybox select{width:100%;background:var(--pg);border:1px solid var(--line2);
  border-radius:10px;padding:14px 15px;color:var(--text);font-size:16px;font-family:inherit}
.applybox input:focus,.applybox select:focus{outline:2px solid var(--gold);
  outline-offset:1px;border-color:var(--gold)}
.applybox .btn.full{margin-top:24px;padding:16px;font-size:16px}
.applybox .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.applybox .mini{font-size:13px;color:var(--faint);margin:14px 0 0;text-align:center}

/* the app stylesheet has no .note, and these pages use one for form errors */
.pub .note{border-radius:11px;padding:13px 16px;font-size:14.5px;line-height:1.6;
  margin:0 0 16px;border:1px solid var(--line2);background:var(--panel);color:var(--dim)}
.pub .note.bad{border-color:var(--bad);color:var(--bad);background:rgba(224,96,92,.08)}
.pub .note b{color:var(--text)}

/* ---- the two doors and their forms ---- */
.twodoor{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
@media(max-width:860px){.twodoor{grid-template-columns:1fr}}
.dcard{background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  padding:32px 28px;display:flex;flex-direction:column}
.dcard.alt{background:transparent;border-style:dashed}
@media(max-width:640px){.dcard{padding:24px 20px}}
.dcard .dk{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:600}
.dcard h3{margin:10px 0 10px;font-size:25px;font-weight:800;letter-spacing:-.025em}
.dcard > p{font-size:15.5px;line-height:1.7;color:var(--dim);margin:0 0 18px}
.ticks{list-style:none;margin:0 0 20px;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14.5px;
  line-height:1.6;color:var(--dim)}
.ticks li:before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg)}
.need{background:var(--pg);border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;margin-bottom:20px}
.need b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.need span{font-size:14px;line-height:1.65;color:var(--dim)}
.dcard .btn.full{margin-top:auto;cursor:pointer}
.dcard .mini{text-align:center;font-size:12.5px;color:var(--faint);margin:10px 0 0}
.applywrap{margin-top:18px;border:1px solid var(--line2);border-radius:16px;
  background:var(--panel);overflow:hidden}
.applywrap > summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:14px;padding:20px 24px}
.applywrap > summary::-webkit-details-marker{display:none}
.applywrap > summary b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.applywrap > summary span{font-size:13px;color:var(--faint);text-align:right}
.applywrap > summary:after{content:"Open";color:var(--gold);font-size:13px;font-weight:700}
.applywrap[open] > summary:after{content:"Close"}
.applywrap[open] > summary{border-bottom:1px solid var(--line)}
.applywrap .applybox{background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:20px 24px 26px}
@media(max-width:640px){
  .applywrap > summary{padding:16px 18px}
  .applywrap .applybox{padding:16px 18px 22px}
}

/* ---- market lists ---- */
 /* one block that opens, with the states inside it */
.allmk{border:1px solid var(--line2);border-radius:16px;background:var(--panel);
  overflow:hidden}
.allmk > summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:14px;padding:20px 24px}
.allmk > summary::-webkit-details-marker{display:none}
.allmk > summary b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.allmk > summary .ct{font-size:13px;color:var(--faint);font-family:'JetBrains Mono',monospace;
  text-align:right}
.allmk > summary:after{content:"Open";color:var(--gold);font-size:13px;font-weight:700}
.allmk[open] > summary:after{content:"Close"}
.allmk[open] > summary{border-bottom:1px solid var(--line)}
.mk-in{padding:18px 24px 8px}
@media(max-width:640px){.allmk > summary{padding:16px 18px}.mk-in{padding:14px 18px 6px}}
#mkFind{width:100%;background:var(--pg);border:1px solid var(--line2);border-radius:10px;
  padding:13px 15px;color:var(--text);font-size:16px;font-family:inherit;margin-bottom:6px}
#mkFind:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.statelist details.st{border-bottom:1px solid var(--line)}
.statelist details.st:last-of-type{border-bottom:0}
.statelist summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;font-size:16.5px;font-weight:700;padding:16px 2px}
.statelist summary::-webkit-details-marker{display:none}
.statelist summary:hover{color:var(--gold)}
.statelist summary span{color:var(--faint);font-size:13px;font-weight:600;
  font-family:'JetBrains Mono',monospace}
.statelist .chips,.nearby .chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 18px}
.nearby .chips{padding-top:6px}
 /* .pill in the app stylesheet is a red badge. On these pages it is a market link,
    so it is restyled here rather than reusing that meaning. */
.pub-wrap .pill{display:inline-block;background:var(--panel);border:1px solid var(--line2);
  color:var(--dim);padding:9px 16px;font-size:14px;border-radius:22px;font-weight:600;
  transition:border-color .12s ease,color .12s ease}
.pub-wrap .pill:hover{border-color:var(--gold-dim);color:var(--text)}
.pub-wrap .pill.gold{border-color:var(--gold-dim);color:var(--gold)}
.pub-wrap .pill.gold:hover{background:var(--gold);color:#0b0d13;border-color:var(--gold)}

/* ---- footer ---- */
.pub-foot{padding:46px 0 0;margin-top:20px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.4fr 1fr;gap:34px}
@media(max-width:720px){.pub-foot{grid-template-columns:1fr;gap:22px}}
.pub-foot .who b{display:block;font-size:16.5px;font-weight:800;margin-bottom:6px}
.pub-foot .who p{font-size:13.5px;color:var(--faint);line-height:1.75;margin:0;max-width:56ch}
.pub-foot .legal{margin-top:10px!important;font-size:12.5px;line-height:1.7}
.pub-foot .flinks{margin-top:12px!important;font-size:13px}
.pub-foot .flinks a{color:var(--dim);border-bottom:1px solid var(--line2)}
.pub-foot .flinks a:hover{color:var(--gold)}
.pub-foot .flinks .sep{color:var(--line2);margin:0 8px}
 /* The copyright sits across the bottom of both columns rather than inside one. */
.pub-foot .cline{grid-column:1 / -1;margin:22px 0 0!important;padding-top:18px;
  border-top:1px solid var(--line);text-align:center;font-size:12.5px;color:var(--dim);
  max-width:none}
.pub-foot .buildline{grid-column:1 / -1;text-align:center;margin:6px 0 0!important;
  font-size:11.5px;color:var(--faint);opacity:.7;max-width:none}
.legalbody{font-size:16px;line-height:1.8;color:var(--dim);max-width:68ch}
.legalbody br + br{content:"";display:block;margin-top:14px}
.pub-foot nav{display:flex;flex-direction:column;gap:9px}
.pub-foot nav a{font-size:14.5px;color:var(--dim);font-weight:600}
.pub-foot nav a:hover{color:var(--gold)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}