/* Bentley Markets web design system, v1 (2026-10-15).
   One stylesheet for every page on bentleymarkets.com. The contract lives in
   DESIGN.md at the site root and the living reference is /design-system.
   Page files only add layout for their own sections; tokens, type and
   components come from here.

   The room: warm near-black and gold, square corners, 1px hairlines.
   Type: Big Shoulders for every heading and label, Archivo for prose,
   numbers too. Bodoni appears only inside the wordmark SVG. */

/* ================================================================ tokens */
:root{
  /* surfaces, darkest to lightest */
  --well:#0f0e0c;
  --page:#141311;
  --card:#1c1b18;
  --card-2:#22201c;
  --hair:#34312b;
  --hair-2:#45413a;
  --field:#736d61;

  /* text */
  --ink:#f0ede5;
  --soft:#cfcabf;
  --sub:#aaa497;
  --dim:#8f897b;

  /* brand gold: TEXT uses --gold, FILLS use --gold-bar */
  --gold:#e5c87c;
  --gold-bar:#c9a24b;
  --gold-deep:#a8843a;
  --on-gold:#16130c;
  --gold-line:rgba(201,162,75,.45);
  --gold-wash:rgba(201,162,75,.10);

  /* signal, always paired with a word or a sign */
  --up:#6fae8f;
  --down:#d98585;

  /* paper: the light section, used once or twice a page for contrast */
  --paper:#eceae3;
  --paper-card:#f6f4ee;
  --paper-ink:#23211d;
  --paper-sub:#56514a;
  --paper-hair:#d6d1c4;
  --paper-gold:#6f5822;

  /* type families */
  --font-head:'Big Shoulders','Archivo Narrow',Impact,sans-serif;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Archivo',system-ui,sans-serif;
  /* older page CSS reads these names */
  --label:var(--font-head); --body:var(--font-body); --mono:var(--font-mono); --display:var(--font-head);

  /* type scale */
  --fs-display:clamp(3.25rem,7.6vw,6.5rem);
  --fs-h1:clamp(2.75rem,6.4vw,4.75rem);
  --fs-h2:clamp(2.25rem,5vw,3.75rem);
  --fs-h3:1.25rem;
  --fs-h4:1rem;
  --fs-lede:clamp(1.0625rem,1.7vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-micro:.75rem;

  /* space: 4px base */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
  --sec:clamp(3.5rem,8vw,6rem);
  --wrap:74rem;
  --wrap-read:48rem;
  --gut:clamp(1rem,4vw,2.5rem);
  --head-h:4rem;

  /* depth and motion */
  --shadow-shot:0 40px 80px -30px rgba(0,0,0,.8);
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:.16s;

  color-scheme:dark;
}

/* ================================================================ base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 1rem)}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--page);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
:focus-visible{outline:1px solid var(--gold-bar);outline-offset:3px}
p,li,dd{text-wrap:pretty}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.wrap.read{max-width:var(--wrap-read)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip{position:absolute;left:var(--gut);top:-4rem;z-index:100;background:var(--ink);color:var(--page);padding:.6rem 1rem;font-weight:600;text-decoration:none}
.skip:focus{top:.5rem}
.i{width:1rem;height:1rem;flex:none}

/* ================================================================ type */
h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4{font-family:var(--font-head);text-transform:uppercase;text-wrap:balance;font-optical-sizing:auto}
.display{font-weight:800;font-size:var(--fs-display);line-height:.9;letter-spacing:.005em}
h1,.h1{font-weight:800;font-size:var(--fs-h1);line-height:.92;letter-spacing:.005em}
h2,.h2{font-weight:800;font-size:var(--fs-h2);line-height:.95;letter-spacing:.01em}
h3,.h3{font-weight:700;font-size:var(--fs-h3);line-height:1.1;letter-spacing:.06em}
h4,.h4{font-weight:700;font-size:var(--fs-h4);line-height:1.2;letter-spacing:.14em}
.display em,h1 em,h2 em{font-style:normal;color:var(--gold)}

/* small letterspaced label above a heading */
.eyebrow,.label{display:block;font-family:var(--font-head);font-weight:700;font-size:.875rem;line-height:1.3;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.eyebrow{margin-bottom:.9rem}
.eyebrow.gold,.label.gold{color:var(--gold)}

.lede{font-size:var(--fs-lede);line-height:1.6;color:var(--soft);max-width:40rem}
.sub{color:var(--sub)}
.small{font-size:var(--fs-sm)}
.fine{font-size:var(--fs-xs);color:var(--dim);line-height:1.55}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
.center{text-align:center}
.center .lede{margin-inline:auto}
.prose p+p{margin-top:1rem}
.prose a,.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-bar)}
.prose a:hover,.link:hover{color:var(--gold)}

/* ================================================================ buttons
   .btn         gold fill, the one action that matters on screen
   .btn.line    hairline outline, the second choice beside it
   .btn.ink     ink fill, for paper sections and quiet primaries
   .btn.sm      compact size for the header
   .go          text link with an arrow, for "read more" moves        */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.5rem;padding:.95rem 1.6rem;
  background:var(--gold-bar);color:var(--on-gold);border:1px solid var(--gold);
  font-family:var(--font-body);font-weight:600;font-size:1.0625rem;line-height:1.2;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:background var(--t) ease-out,border-color var(--t) ease-out,color var(--t) ease-out,transform var(--t) ease-out}
.btn:hover{background:var(--gold);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn .i{width:1.05rem;height:1.05rem}
.btn.line{background:transparent;color:var(--ink);border-color:var(--hair-2)}
.btn.line:hover{border-color:var(--gold-bar);background:transparent}
.btn.ink{background:var(--ink);color:var(--page);border-color:var(--ink)}
.btn.ink:hover{background:#fff;border-color:#fff}
.btn.sm{min-height:2.75rem;padding:.55rem 1rem;font-size:.9375rem}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.go{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;font-weight:600;font-size:var(--fs-sm);color:var(--ink);text-decoration:none}
.go .i{width:.85rem;height:.85rem;transition:transform var(--t) ease-out}
.go:hover{color:var(--gold)}
.go:hover .i,a:hover>.go .i{transform:translateX(3px)}

/* trust line under a button: green square + short facts */
.micro{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin-top:1rem;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--dim);letter-spacing:.02em}
.micro span{display:inline-flex;align-items:center;gap:.45rem}
.micro span::before{content:'';width:.4rem;height:.4rem;background:var(--up)}

/* ================================================================ tags and pills */
.tag{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-micro);line-height:1.5;color:var(--sub);border:1px solid var(--hair-2);padding:.1rem .45rem}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.pill{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.6875rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .45rem .28rem;color:var(--on-gold);background:var(--gold-bar)}
.pill.line{background:transparent;color:var(--gold);border:1px solid var(--gold-line)}
.side-long,.side-short{display:inline-block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;padding:.15rem .5rem;color:var(--page)}
.side-long{background:var(--up)}
.side-short{background:var(--down)}

/* ================================================================ site header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(20,19,17,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.site-head .wrap,.site-foot .wrap{max-width:74rem}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:var(--head-h)}
.brand{display:block;flex:none;padding-block:.6rem;text-decoration:none}
.brand img{width:auto;height:1.4rem}
.site-nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.site-nav a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:0 .8rem;font-size:.9375rem;color:var(--sub);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--t) ease-out,border-color var(--t) ease-out}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--gold-bar)}
.site-head .head-cta{flex:none}
.menu-btn{display:none;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .2rem 0 .75rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.menu-btn svg{width:1.25rem;height:1.25rem}
.menu-btn .x{display:none}
.site-head.open .menu-btn .x{display:block}
.site-head.open .menu-btn .bars{display:none}
.site-nav .nav-cta{display:none}

@media (max-width:980px){
  .site-head .wrap{gap:.75rem}
  .menu-btn{display:inline-flex;margin-left:auto}
  .site-head .head-cta{order:2}
  .menu-btn{order:3;margin-left:0}
  .brand{margin-right:auto}
  .site-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:.5rem var(--gut) 1.25rem;background:var(--page);border-bottom:1px solid var(--hair-2);box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
  .site-head:not(.open) .site-nav{display:none}
  .site-nav a{min-height:3.25rem;padding:0;font-size:1.0625rem;color:var(--ink);border-bottom:1px solid var(--hair)}
  .site-nav a[aria-current]{border-bottom-color:var(--hair);color:var(--gold)}
  .site-nav .nav-cta{margin-top:1rem;border:1px solid var(--gold);color:var(--on-gold);justify-content:center}
}
@media (max-width:479px){
  .site-head .head-cta{min-height:2.5rem;padding:.4rem .8rem;font-size:.875rem}
  .brand img{height:1.2rem}
}
@media (max-width:359px){
  .site-head .head-cta{display:none}
  .site-nav .nav-cta{display:flex}
}

/* ================================================================ sections */
.sec{padding-block:var(--sec)}
.sec.tight{padding-block:clamp(2.5rem,6vw,4rem)}
.sec.rule{border-top:1px solid var(--hair)}
.sec.card{background:var(--card)}
.sec.glow{background:radial-gradient(60rem 30rem at 85% 0%,var(--gold-wash),transparent 60%),var(--page)}
.sec-head{margin-bottom:clamp(2rem,5vw,3.5rem)}
.sec-head h2{margin-bottom:1rem}
.sec-head.center h2{margin-inline:auto;max-width:22ch}

/* paper section: everything inside flips to the light palette */
.paper{background:var(--paper);color:var(--paper-ink);--ink:var(--paper-ink);--soft:var(--paper-sub);--sub:var(--paper-sub);--dim:var(--paper-sub);
  --hair:var(--paper-hair);--hair-2:var(--paper-hair);--card:var(--paper-card);--card-2:#fff;--gold:var(--paper-gold);color-scheme:light}
.paper .btn.line{color:var(--paper-ink);border-color:var(--paper-ink)}

/* ================================================================ surfaces */
.panel{background:var(--card);border:1px solid var(--hair-2)}
.panel.pad{padding:clamp(1.25rem,3vw,1.75rem)}
a.panel{display:block;text-decoration:none;transition:border-color var(--t) ease-out,background var(--t) ease-out}
a.panel:hover{border-color:var(--gold-line)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--hair-2)}
.panel-head h3{font-size:1.0625rem}
.panel-head .meta{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* a screenshot of the product in a frame */
.shot{border:1px solid var(--hair-2);background:var(--card);box-shadow:var(--shadow-shot)}
.shot.paper-edge{border-color:var(--paper-hair)}

/* hairline grid: cells separated by 1px rules, no gaps */
.grid-rules{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.grid-rules>*{background:var(--page);padding:clamp(1.25rem,3vw,1.75rem)}
.sec.card .grid-rules>*{background:var(--card)}

/* spec rows: a label and its value, for plans, product specs and data */
.spec{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--hair);font-size:var(--fs-sm)}
.spec:last-child{border-bottom:none}
.spec dt{font-family:var(--font-head);font-weight:700;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding-top:.15rem}
.spec dd{color:var(--ink)}
.spec .ok{color:var(--up)}

/* gold-ruled list: a hairline on the left of each item */
.ruled{list-style:none;display:grid;gap:1.25rem}
.ruled>li{padding-left:1rem;border-left:1px solid var(--gold-bar)}
.ruled p{color:var(--sub);font-size:var(--fs-sm);margin-top:.25rem}

/* short dash bullets */
.dash{list-style:none;display:grid;gap:.5rem;color:var(--sub);font-size:var(--fs-sm)}
.dash li{position:relative;padding-left:1.1rem}
.dash li::before{content:'';position:absolute;left:0;top:.7rem;width:.45rem;height:1px;background:var(--gold-bar)}

/* diamond bullets for a hero promise list */
.gets{list-style:none;display:grid;gap:.65rem}
.gets li{display:grid;grid-template-columns:1.3rem 1fr;gap:.7rem;align-items:start}
.gets li::before{content:'';width:.55rem;height:.55rem;border:1px solid var(--gold-bar);margin-top:.55rem;transform:rotate(45deg)}

/* a row of facts with big mono values */
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;border:1px solid var(--hair-2)}
.facts>div{padding:.75rem 1.1rem;border-right:1px solid var(--hair-2)}
.facts>div:last-child{border-right:none}
.facts b{display:block;font-family:var(--font-mono);font-weight:500;color:var(--gold);font-size:1.0625rem}
.facts span{font-family:var(--font-head);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* this is / this isn't */
.honest{display:grid;grid-template-columns:repeat(2,1fr)}
.honest h3{font-size:1.0625rem;margin-bottom:.75rem}
.honest .yes h3{color:var(--up)}
.honest .no h3{color:var(--down)}

/* a quote */
.quote{border-left:1px solid var(--gold-bar);padding-left:1.1rem}
.quote blockquote{color:var(--ink)}
.quote figcaption{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--dim);margin-top:.4rem}

/* ================================================================ FAQ */
.faq{border-top:1px solid var(--hair-2);max-width:var(--wrap-read)}
.center .faq,.faq.center{margin-inline:auto;text-align:left}
.faq details{border-bottom:1px solid var(--hair-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;padding:.95rem 0;font-weight:600;font-size:var(--fs-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font-family:var(--font-mono);font-weight:400;font-size:1.25rem;color:var(--gold);transition:transform var(--t) ease-out}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.25rem;color:var(--sub);max-width:42rem}
.faq a{color:var(--ink)}

/* ================================================================ forms */
.field label{display:block;font-family:var(--font-head);font-weight:700;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:.5rem}
.input{width:100%;min-width:0;min-height:3.5rem;padding:0 1rem;background:var(--page);color:var(--ink);border:1px solid var(--hair-2);font:inherit}
.input:focus{outline:1px solid var(--gold-bar);outline-offset:0;border-color:var(--gold-bar)}
.input::placeholder{color:var(--dim)}
.inline-form{display:flex;gap:.5rem}
.inline-form .input{flex:1}
.status{font-size:var(--fs-sm);margin-top:.75rem;min-height:1.4em}
.status[data-state="err"]{color:var(--down)}
.status[data-state="ok"]{color:var(--up)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ================================================================ video facade
   Only the thumbnail loads up front; site.js swaps in the player on press. */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--hair-2);background:#000;cursor:pointer;overflow:hidden;box-shadow:var(--shadow-shot)}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease),opacity .2s}
.yt:hover img{transform:scale(1.02);opacity:.9}
.yt .play{position:absolute;right:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem .7rem .9rem;background:var(--gold-bar);color:var(--on-gold);
  border:1px solid var(--gold);font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);transition:background var(--t),transform var(--t)}
.yt:hover .play{background:var(--gold);transform:translateY(-1px)}
.yt .play svg{width:1.25rem;height:1.25rem}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cap{margin-top:.85rem;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--dim)}
.cap b{font-weight:500;color:var(--gold);text-transform:uppercase;letter-spacing:.14em;margin-right:.5rem}

/* ================================================================ site footer */
.site-foot{border-top:1px solid var(--hair);background:var(--well);color:var(--dim);font-size:var(--fs-xs);line-height:1.6}
.site-foot .top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;padding-block:clamp(2.5rem,6vw,3.5rem)}
.site-foot .foot-brand img{height:1.3rem;width:auto;margin-bottom:1rem}
.site-foot .foot-brand p{max-width:22rem;color:var(--sub);font-size:var(--fs-sm)}
.site-foot h4{font-size:.75rem;letter-spacing:.2em;color:var(--ink);margin-bottom:.75rem}
.site-foot ul{list-style:none;display:grid;gap:.1rem}
.site-foot li a{display:inline-flex;align-items:center;min-height:2.25rem;color:var(--sub);text-decoration:none;font-size:var(--fs-sm)}
.site-foot li a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-bar)}
.site-foot .legal{border-top:1px solid var(--hair);padding-block:1.5rem 2rem;display:grid;gap:.75rem}
.site-foot .legal p{max-width:56rem}
.site-foot .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em}
.site-foot .row > :only-child{margin-left:auto}

/* ================================================================ responsive and motion */
@media (max-width:960px){
  .site-foot .top{grid-template-columns:1fr 1fr}
  .site-foot .foot-brand{grid-column:1/-1}
}
@media (max-width:600px){
  .honest{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr;gap:.2rem}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts>div:nth-child(2n){border-right:none}
  .facts>div:nth-child(-n+2){border-bottom:1px solid var(--hair-2)}
  .inline-form{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}