/* Roofing Revenue System mockups, checkpoint 1. Drawing tool only, not a build. */
:root {
  --navy: #12283F; --ink: #001B37; --orange: #EB713B; --orange-lg: #DE6430; --orange-ink: #A9471A;
  --cream: #F5F3EE; --paper: #FBFAF7; --sand: #EAE6DC;
  --body: #34475C; --muted: #5E6E7F;
  --line: rgba(0,27,55,.12); --line-d: rgba(245,243,238,.14);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', system-ui, sans-serif;
  --pad: 128px; --wrap: 1200px; --narrow: 760px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
.wrap { width: var(--wrap); max-width: calc(100% - 48px); margin: 0 auto; }
.narrow { width: var(--narrow); max-width: calc(100% - 48px); margin: 0 auto; }
section { padding: var(--pad) 0; position: relative; }
.dark { background: var(--navy); color: var(--cream); }
.paper { background: var(--paper); }

/* type */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-ink); }
.eyebrow .bars { display: inline-flex; gap: 3px; }
.eyebrow .bars i { display: block; width: 5px; height: 14px; background: var(--orange); transform: skewX(-32deg); }
.dark .eyebrow { color: #F4A57F; }
h1, h2, .display { font-family: var(--display); font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
h1 { font-size: 68px; line-height: 1.0; text-wrap: balance; }
h2 { font-size: 54px; line-height: 1.04; text-wrap: balance; }
h3 { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
.lede { font-size: 20px; line-height: 1.55; color: var(--body); }
.dark .lede, .dark p { color: rgba(245,243,238,.82); }
p { color: var(--body); text-wrap: pretty; }
.mark { background: linear-gradient(transparent 62%, rgba(235,113,59,.55) 62%, rgba(235,113,59,.55) 92%, transparent 92%); padding: 0 2px; }
.label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nw { white-space: nowrap; }

/* placeholders for facts we do not have */
.ph { display: inline-flex; align-items: center; vertical-align: middle; background: #FFF1A6; color: #5A4800; border: 1px solid #ECD35A; border-radius: 5px; padding: 1px 7px; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: nowrap; font-family: var(--sans); }
.example { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--cream); border-radius: 999px; padding: 4px 11px 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.example::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.dark .example { background: var(--cream); color: var(--ink); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 62px; padding: 0 34px; border-radius: 10px; background: var(--orange); color: var(--ink); font-weight: 700; font-size: 18px; box-shadow: 0 10px 26px rgba(235,113,59,.32), inset 0 -2px 0 rgba(0,0,0,.12); white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn.sm { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 8px; box-shadow: none; }
.btn.full { width: 100%; }
.micro { font-size: 14px; color: var(--muted); margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.dark .micro { color: rgba(245,243,238,.7); }
.textlink { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.dark .textlink { color: var(--cream); }