/* builtcorrect.com's homepage, the Built Correct suite (index.html), and Steel's landing page (steel/index.html): the Build
   Room's fonts and colors, one page that scrolls. The Build Room keeps its own page and styles (build-room/index.html,
   style.css and room.css). */
@font-face{font-family:DM Sans;src:url(fonts/dm-sans.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:Instrument Serif;src:url(fonts/instrument-serif-italic.woff2) format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:DM Mono;src:url(fonts/dm-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{--sans:'DM Sans',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;--mono:'DM Mono',ui-monospace,monospace;
  --ink:#24382d;--ink-2:#5f7163;--muted:#7b8a78;--forest:#365e45;--forest-d:#243a2c;--lime:#d6f681;--line:#e0e6da;--paper:#fafbf5}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font:16px/1.55 var(--sans);color:var(--ink);
  background:radial-gradient(ellipse 80% 60% at 70% 0,#eef4e3 0,transparent 70%),var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid #8aaf58;outline-offset:3px;border-radius:6px}
svg{width:20px;height:20px;display:block;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
@media (min-width:720px){.wrap{padding:0 40px}}

/* the bar */
.top{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;color:#1f3127;white-space:nowrap}
.brand svg{width:24px;height:27px}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.nav a{padding:8px 12px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
.nav a:hover{background:#eef3e6;color:var(--ink)}
.nav .nav-room{background:var(--forest-d);color:#fff}
.nav .nav-room:hover{background:var(--forest);color:#fff}
/* the page you're on lights up in lime, apart from the Build Room button (Scott, Homepage Build Room message 6199) */
.nav a[aria-current=page]{background:var(--lime);color:#1d2f25}

/* the opening */
main{flex:1}
.hero{max-width:860px;padding:clamp(40px,7.5vh,104px) 0 clamp(32px,5vh,60px)}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:#a9cf55;box-shadow:0 0 0 4px #e6f2c8}
h1{margin:0;font-size:clamp(42px,6.6vw,80px);line-height:1;letter-spacing:-.045em;font-weight:600;color:#1d2f25;text-wrap:balance}
h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;color:var(--forest);padding-right:.04em}
.lede{max-width:620px;margin:24px 0 0;font-size:clamp(17px,1.55vw,19px);line-height:1.55;color:var(--ink-2);text-wrap:pretty}

/* the suite: one card each, the whole card a link */
.suite{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-bottom:clamp(56px,10vh,104px)}
.card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px 22px 22px;border:1px solid var(--line);border-radius:18px;background:#fff;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.mark{width:46px;height:46px;margin-bottom:10px;display:grid;place-items:center;border-radius:13px 0 13px 0;background:#eef3e6;color:var(--forest)}
.mark svg{width:24px;height:24px}
.kind{margin:0;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card h2{margin:0;font-size:21px;line-height:1.22;letter-spacing:-.025em;font-weight:650;color:#1d2f25;text-wrap:balance}
.card p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.card .free{font-size:14px;font-weight:600;color:var(--forest)}
.go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:650;color:var(--forest)}
.go::after{content:'';position:absolute;inset:0;border-radius:18px}
.go svg{width:18px;height:18px;transition:transform .2s}
@media (hover:hover){
  .card:has(.go):hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(36,56,45,.1);border-color:#cfdac5}
  .card:hover .go svg{transform:translateX(3px)}
}
.card--room{background:var(--forest-d);border-color:var(--forest-d)}
.card--room .mark{background:none}
.card--room .mark svg{width:31px;height:35px}
.card--room .kind{color:var(--lime)}
.card--room h2{color:#fff}
.card--room p{color:#c8d6c2}
.card--room .go{color:var(--lime)}
.card--soon{background:none;border-style:dashed;border-color:#ccd6c2}
.card--soon .mark{background:none;border:1px dashed #b9c6ad;color:var(--muted)}

/* the closing line (Scott, Homepage Build Room message 6189), set like the headline, and under it Veteran owned (message 6191) */
.motto{margin:0;text-align:center;font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:-.04em;font-weight:600;color:#1d2f25;text-wrap:balance}
.motto em{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;color:var(--forest);padding-right:.04em}
.vet{margin:0;padding:22px 0 clamp(56px,10vh,104px);text-align:center}
.vet span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.vet svg{width:15px;height:15px}

/* Steel's landing page (steel/index.html; Scott, Homepage Build Room message 6194): the bar, opening and foot above, then its
   two doors into the app, one real set's numbers, how it works, and a closing band in the Build Room card's colors */
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:1px solid var(--forest-d);border-radius:999px;
  background:var(--forest-d);color:#fff;font-size:15.5px;font-weight:650;transition:background .15s,border-color .15s}
.btn:hover{background:var(--forest);border-color:var(--forest)}
.btn svg{width:18px;height:18px}
.btn--line{background:#fff;border-color:#cfdac5;color:var(--ink)}
.btn--line:hover{background:#eef3e6;border-color:#cfdac5}
.aside{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:18px 0 0;font-size:14px;color:var(--muted)}
.aside a{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--forest)}
.aside a:hover{text-decoration:underline;text-underline-offset:4px}
.aside svg{width:16px;height:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{margin:0;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.stat b{display:block;font-size:clamp(34px,4.2vw,50px);line-height:1.05;letter-spacing:-.03em;font-weight:650;color:#1d2f25}
.stat:nth-child(2) b{color:var(--forest)}
.stat span{display:block;margin-top:6px;font-size:15px;color:var(--ink-2)}
.say{max-width:660px;margin:18px 0 0;color:var(--ink-2);text-wrap:pretty}
.steps{padding-top:clamp(56px,9vh,96px)}
.steps h2,.close h2{margin:0;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.04em;font-weight:650;color:#1d2f25;text-wrap:balance}
.steps ol{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step}
.steps li{padding:22px 24px 24px;border:1px solid var(--line);border-radius:18px;background:#fff;font-size:15px;color:var(--ink-2);counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:50%;background:var(--forest-d);color:var(--lime);font:500 14px/1 var(--mono)}
.steps li b{display:block;margin-bottom:4px;font-size:17px;line-height:1.3;color:#1d2f25}
.close{margin:clamp(56px,9vh,96px) 0 clamp(56px,10vh,104px);padding:clamp(28px,4.5vw,52px);border-radius:22px;background:var(--forest-d)}
.close h2{color:#fff}
.close h2+p{max-width:620px;margin:12px 0 0;font-size:clamp(16px,1.4vw,18px);color:#c8d6c2}
.close .btn{background:var(--lime);border-color:var(--lime);color:#1d2f25}
.close .btn:hover{background:#e3fa9f;border-color:#e3fa9f}
.close .btn--line{background:none;border-color:#56705d;color:#fff}
.close .btn--line:hover{background:rgba(255,255,255,.08);border-color:#7d9483}
.close .aside a{color:var(--lime)}

/* the foot */
.foot{border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:22px;padding-bottom:max(26px,env(safe-area-inset-bottom));font-size:13px;color:var(--muted)}
.foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a:hover{color:var(--ink)}

@media (max-width:1079px){.suite{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){
  .top{flex-wrap:wrap;gap:8px 16px;padding-top:12px;padding-bottom:6px}
  .nav{margin-left:0;width:100%}
  .hero{padding-top:36px}
  .lede{margin-top:18px}
  .suite{grid-template-columns:1fr;gap:12px}
  .card{padding:22px 20px 20px}
  .motto em{display:block}
  .acts{margin-top:26px}
  .btn{width:100%}
  .stats{grid-template-columns:1fr;gap:10px}
  .stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:16px 20px}
  .stat b{font-size:30px}
  .stat span{margin-top:0}
  .steps ol{grid-template-columns:1fr;gap:12px}
  .steps li{padding:20px}
  .close{border-radius:18px;padding:28px 20px}
  .foot nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}