@font-face {
  font-family: Inter;
  src: url('inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: Inter, system-ui, sans-serif;
  color: #202f31;
  background: #faf8f3;
  font-synthesis: none;
  --rust: #b83a19;
  --ink: #202f31;
  --muted: #625e55;
  --cream: #faf8f3;
  --line: #dadbd2;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p, h1, h2, h3 { margin: 0; }
em { font-style: normal; }
:focus-visible { outline: 3px solid #507fd0; outline-offset: 4px; }
.shell { width: min(100% - 104px, 1200px); margin-inline: auto; }

.site-header { background: var(--cream); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; font-size: 26px; font-weight: 850; letter-spacing: -.078em; }
.brand-dot { color: var(--rust); }
.brand-mark { width: 34px; height: 34px; margin-right: 10px; background: var(--rust); border-radius: 9px; position: relative; }
.brand-mark i { position: absolute; top: 9px; left: 10px; width: 14px; height: 10px; border: 1.6px solid white; border-radius: 1px; transform: rotate(-27deg) skewX(32deg); }
.brand-mark i:nth-child(1) { top: 17px; }
.brand-mark i:nth-child(2) { top: 13px; background: var(--rust); }
.brand-mark i:nth-child(3) { background: var(--rust); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--muted); font-weight: 550; }
.nav-links a:hover, .footer a:hover { text-decoration: underline; }
.login { font-size: 14px; font-weight: 720; border: 1px solid var(--line); padding: 9px 14px; border-radius: 8px; white-space: nowrap; }
.login span { margin-left: 5px; }

.hero { overflow: hidden; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 780; letter-spacing: .105em; text-transform: uppercase; }
.eyebrow span { width: 8px; height: 8px; background: currentColor; border-radius: 2px; }
.hero h1 { font-size: clamp(49px, 6.35vw, 91px); font-weight: 800; letter-spacing: -.073em; line-height: .99; margin: 21px 0; }
.hero-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.6; max-width: 470px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 11px 17px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 740; line-height: 1.25; }
.primary { background: var(--rust); color: white; }
.primary:hover { background: #9e2e12; }
.secondary { background: transparent; border-color: var(--line); color: var(--ink); }
.secondary:hover, .login:hover { background: #ffffff70; }

.status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 20px; font-size: 10px; font-weight: 720; white-space: nowrap; }
.approved { color: #215c42; background: #e3f0e5; }

.hero-agreement { color: #202f31; background: #f0efe7; }
.agreement-layout { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(330px, .9fr); align-items: center; gap: 32px; min-height: 650px; padding-block: 66px; }
.hero-agreement .eyebrow { color: #a5381c; }
.hero-agreement h1 { font-size: clamp(47px, 5.7vw, 82px); font-weight: 780; line-height: 1.02; }
.hero-agreement h1 em { color: #ab381d; white-space: nowrap; }
.hero-agreement .hero-copy > p:not(.eyebrow) { color: #465253; }
.agreement-visual { width: 100%; max-width: 525px; aspect-ratio: 1.04; position: relative; isolation: isolate; background: #dfe5df; border-radius: 21px; }
.agreement-visual::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle, #728a814c 1px, transparent 1px) 0 0 / 18px 18px; }
.paper { position: absolute; top: 10%; right: 9%; width: 55%; padding: 5%; background: #fffcf6; border: 1px solid #e7ded0; border-radius: 5px; box-shadow: 3px 15px 32px #142b2833; transform: rotate(6deg); }
.paper-mast { display: flex; justify-content: space-between; align-items: center; padding-bottom: 11px; border-bottom: 1px solid #e8e0d6; font-size: 17px; letter-spacing: -.07em; font-weight: 800; }
.paper-mast > span:last-child { font-size: 8px; letter-spacing: .03em; background: #f3e4d8; color: #98371e; padding: 4px 5px; border-radius: 3px; }
.paper-label { margin-top: 13px; font-size: 8px; font-weight: 740; letter-spacing: .09em; color: #6e6257; }
.paper-title { margin-top: 4px; font-size: clamp(15px, 2.3vw, 28px); font-weight: 800; line-height: 1.08; letter-spacing: -.054em; }
.paper-data { display: grid; gap: 10px; margin: 15px 0 0; font-size: 10px; }
.paper-data div { display: flex; justify-content: space-between; gap: 5px; border-bottom: 1px solid #ebe1d6; padding-bottom: 5px; }
.paper-data dt { color: #655a51; }
.paper-data dd { margin: 0; font-weight: 730; }
.signature { color: #354f69; font: italic 22px 'Segoe Script', 'Brush Script MT', cursive; text-align: center; padding-top: 14px; }
.paper-footer { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-top: 12px; font-size: 9px; color: #635b50; }
.phone { position: absolute; bottom: 7%; left: 7%; width: 38%; padding: 7% 3.5% 6%; color: #2b2b26; background: #fffdf7; border: 6px solid #203333; border-radius: 23px; box-shadow: 2px 13px 28px #10242153; transform: rotate(-9deg); }
.phone-cutout { position: absolute; width: 28%; height: 5px; border-radius: 10px; top: 6px; left: 36%; background: #203333; }
.phone-brand { font-size: 17px; font-weight: 850; letter-spacing: -.07em; }
.phone-label { margin-top: 14%; color: #6b5f53; font-size: 9px; }
.phone-title { margin-top: 3px; font-size: clamp(13px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.06em; }
.phone-text { margin-top: 5px; font-size: 10px; line-height: 1.4; color: #60574e; }
.phone-amount { margin-block: 8%; font-size: clamp(17px, 2.6vw, 33px); font-weight: 820; letter-spacing: -.06em; }
.phone-button, .phone-reject { display: block; text-align: center; border-radius: 5px; padding: 6px 2px; font-size: 10px; font-weight: 720; }
.phone-button { background: var(--rust); color: white; }
.phone-reject { margin-top: 4px; border: 1px solid #ded6ca; }

.section { background: var(--cream); padding-block: 70px; }
.section-top .eyebrow { color: var(--rust); margin-bottom: 10px; }
.section-top h2 { font-size: clamp(34px, 4.1vw, 57px); font-weight: 790; letter-spacing: -.065em; line-height: 1.04; }
.section-top > p:last-child:not(.eyebrow) { margin-top: 15px; color: var(--muted); line-height: 1.6; }
.video-section { background: #23322f; color: #fffaf2; }
.video-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); align-items: center; gap: 38px; }
.video-section .section-top .eyebrow, .video-section .text-action { color: #ffd0b7; }
.video-section .section-top > p:nth-of-type(2) { margin: 16px 0 10px; color: #e1e6dd; line-height: 1.6; }
.video-layout video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #161e1b; border: 1px solid #58665f; border-radius: 14px; }
.product-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.product-shot { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: #f2eee6; }
.product-shot h3 { font-size: 21px; line-height: 1.1; letter-spacing: -.045em; }
.product-shot p { margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.product-shot a { display: block; width: fit-content; max-width: 100%; align-self: center; margin-top: auto; border-radius: 9px; }
.product-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: inherit; }
.product-shot a:hover { box-shadow: 0 3px 12px #24292430; }
.job-shot { grid-column: span 2; background: #ebece4; }
.job-shot a, .pdf-shot a { width: 100%; }
.client-shot a { width: min(100%, 310px); }
.pdf-shot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); align-items: center; gap: 30px; background: #eaede6; }
.pdf-shot a { margin-top: 0; }
.text-action { color: var(--rust); font-size: 14px; font-weight: 750; padding: 7px 0; background: transparent; border: 0; text-align: left; }
.text-action:hover { text-decoration: underline; }
.plans { background: #eeeae1; border-top: 1px solid var(--line); }
.plans-layout { display: grid; grid-template-columns: 1.13fr 1fr 1fr; gap: 18px; }
.plans-layout .section-top { align-self: center; padding-right: 16px; }
.plan-card { display: flex; flex-direction: column; align-items: flex-start; padding: 23px; background: #fffdf8; border: 1px solid #ddd5c8; border-radius: 12px; }
.plan-pro { background: #f4f5ee; }
.plan-card h3 { font-size: 28px; letter-spacing: -.06em; }
.plan-card ul { flex: 1; padding-left: 16px; margin: 12px 0 20px; font-size: 14px; line-height: 1.55; }
.plan-card li + li { margin-top: 5px; }
.footer { background: var(--cream); padding: 23px 0; }
.footer .shell { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 14px; }

.demo { width: min(100% - 30px, 510px); padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); color: var(--ink); box-shadow: 0 16px 60px #0005; }
.demo::backdrop { background: #17201bd0; }
.demo-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-heading .eyebrow { color: var(--rust); }
.close-button { width: 36px; height: 36px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 7px; font-size: 21px; }
.demo h2 { margin: 8px 0 3px; font-size: 32px; letter-spacing: -.055em; }
.demo > p { font-size: 14px; color: var(--muted); }
.demo-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 15px; }
.demo-totals div { padding: 12px; background: white; border: 1px solid var(--line); border-radius: 7px; }
.demo-totals dt { font-size: 12px; color: var(--muted); }
.demo-totals dd { margin: 4px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -.05em; }
.demo .actions { margin-top: 17px; }

@media (max-width: 900px) {
  .shell { width: calc(100% - 56px); }
  .agreement-layout { min-height: 560px; gap: 21px; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .9fr); }
  .plans-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-layout .section-top { grid-column: 1 / -1; padding: 0 0 5px; }
}

@media (max-width: 640px) {
  .shell { width: calc(100% - 36px); }
  .nav { min-height: 61px; gap: 10px; }
  .brand { font-size: 23px; }
  .brand-mark { width: 32px; height: 32px; margin-right: 8px; }
  .nav-links { display: none; }
  .hero h1 { font-size: clamp(40px, 10.7vw, 59px); margin: 12px 0 14px; }
  .hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .actions { margin-top: 18px; gap: 8px; }
  .hero .button { min-height: 45px; padding-inline: 10px; gap: 6px; font-size: 12px; }
  .agreement-layout { grid-template-columns: 1fr; min-height: 0; gap: 23px; padding-block: 34px 30px; }
  .agreement-visual { width: min(100%, 390px); margin: auto; }
  .paper-title { font-size: 18px; }
  .phone-title { font-size: 16px; }
  .phone-amount { font-size: 22px; }
  .phone-button, .phone-reject { font-size: 9px; }
  .section { padding-block: 36px; }
  .video-layout, .product-shots, .pdf-shot, .plans-layout { grid-template-columns: 1fr; }
  .video-layout, .pdf-shot { gap: 16px; }
  .product-shots { margin-top: 18px; }
  .job-shot, .pdf-shot { grid-column: auto; }
  .product-shot { padding: 14px; }
}

@media (max-width: 350px) {
  .paper-data, .paper-footer, .phone-text { font-size: 8px; }
  .paper { right: 7%; }
  .signature { font-size: 16px; }
}