:root {
    --ink: #171717;
    --paper: #f4f0e9;
    --orange: #f0642d;
    --blue: #214c59;
    --muted: #6f706c;
    --line: rgba(23, 23, 23, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.lp-header { align-items: center; display: flex; justify-content: space-between; max-width: 1240px; margin: auto; padding: 26px 5vw; }
.lp-brand img { display: block; filter: brightness(0) saturate(100%); height: 43px; object-fit: contain; width: auto; }
.lp-header-link { border-bottom: 1px solid var(--ink); font-size: .82rem; font-weight: 700; letter-spacing: .05em; padding-bottom: 5px; text-transform: uppercase; }
.lp-header-link span, .lp-button span { color: var(--orange); font-size: 1.2em; margin-left: 8px; }
.lp-hero { animation: reveal-up .8s ease both; background: var(--paper); min-height: 680px; overflow: hidden; padding: 76px 5vw 105px; position: relative; }
.lp-hero::after { background: var(--orange); border-radius: 50%; content: ''; height: 400px; opacity: .11; position: absolute; right: -130px; top: 80px; width: 400px; }
.lp-hero-grid { align-items: center; display: grid; gap: 7vw; grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr); margin: auto; max-width: 1240px; position: relative; z-index: 1; }
.eyebrow { color: var(--orange); font-size: .72rem; font-weight: 700; letter-spacing: .18em; margin: 0 0 25px; text-transform: uppercase; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }
h1 { font-size: clamp(3.2rem, 6.1vw, 6.2rem); letter-spacing: -.06em; line-height: .93; margin: 0; max-width: 760px; }
.lp-lead { color: #52534f; font-size: 1.12rem; line-height: 1.75; margin: 32px 0; max-width: 590px; }
.lp-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 28px; }
.lp-button { display: inline-flex; font-size: .78rem; font-weight: 700; letter-spacing: .05em; padding: 18px 24px; text-transform: uppercase; transition: transform .2s, box-shadow .2s; }
.lp-button:hover { box-shadow: 7px 7px 0 var(--ink); transform: translate(-3px, -3px); }
.lp-button-primary { background: var(--orange); color: #fff; }
.lp-button-primary span { color: #fff; }
.lp-text-link { border-bottom: 1px solid var(--ink); font-size: .82rem; font-weight: 700; padding-bottom: 5px; }
.lp-text-link span { color: var(--orange); margin-left: 6px; }
.lp-proof { align-items: center; color: var(--muted); display: flex; font-size: .8rem; gap: 9px; margin-top: 52px; }
.proof-dot { background: #68a883; border-radius: 50%; height: 8px; width: 8px; }
.lp-hero-visual { min-height: 485px; padding: 45px 25px 10px; position: relative; }
.visual-browser { animation: float-browser 5s ease-in-out infinite; background: #fff; box-shadow: 24px 25px 0 rgba(33, 76, 89, .14); margin: auto; max-width: 460px; transform: rotate(3deg); }
.browser-bar { align-items: center; background: #e7e4de; display: flex; gap: 6px; padding: 11px 14px; }
.browser-bar span { background: #a8a39a; border-radius: 50%; height: 7px; width: 7px; }
.browser-bar small { color: #88857e; font-size: .55rem; margin-left: 10px; }
.browser-content { background: var(--blue); color: #fff; min-height: 360px; padding: 48px 40px; }
.mini-label { color: #f5bb83; font-size: .59rem; font-weight: 700; letter-spacing: .18em; }
.browser-content h2 { font-size: 3.1rem; letter-spacing: -.07em; line-height: .92; margin: 32px 0 19px; }
.browser-content h2 em { color: #f5bb83; font-style: normal; }
.browser-content p { color: rgba(255,255,255,.72); font-size: .78rem; line-height: 1.6; max-width: 190px; }
.mini-button { background: var(--orange); display: inline-block; font-size: .62rem; font-weight: 700; margin-top: 17px; padding: 12px 15px; text-transform: uppercase; }
.mini-button span { margin-left: 13px; }
.mini-stats { align-items: baseline; border-left: 1px solid rgba(255,255,255,.35); display: flex; flex-direction: column; margin-top: 28px; padding-left: 14px; }
.mini-stats strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; }.mini-stats span { color: rgba(255,255,255,.65); font-size: .62rem; }
.visual-caption { background: var(--orange); color: #fff; font-size: .65rem; font-weight: 700; left: 7px; letter-spacing: .12em; padding: 12px 15px; position: absolute; text-transform: uppercase; top: 12px; transform: rotate(-6deg); z-index: 2; }.visual-note { align-items: center; color: var(--muted); display: flex; font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; gap: 10px; position: absolute; }.visual-note span { font-family: 'DM Sans', sans-serif; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.note-one { bottom: 18px; left: -5px; }.note-two { right: -12px; top: 155px; transform: rotate(90deg); }
.lp-intro, .lp-results, .lp-faq { animation: reveal-up .8s ease both; align-items: end; background: #fff; display: grid; gap: 8vw; grid-template-columns: 1fr 1fr; padding: 125px 10vw 110px; }.section-heading h2 { font-size: clamp(2.8rem, 5vw, 5rem); letter-spacing: -.07em; line-height: .92; margin: 0; }.section-heading h2 span, .lp-final-cta h2 span { color: var(--orange); }.intro-copy { color: var(--muted); font-size: 1.05rem; line-height: 1.75; max-width: 430px; }.intro-copy p { margin: 0 0 18px; }
.lp-benefits { display: grid; grid-template-columns: repeat(3, 1fr); }.benefit-card { min-height: 330px; padding: 50px 4vw; transition: transform .3s ease, box-shadow .3s ease; }.benefit-card:nth-child(1), .benefit-card:nth-child(4) { background: #e3d8c8; }.benefit-card:nth-child(3), .benefit-card:nth-child(6) { background: #d7e1dc; }.benefit-card-dark { background: var(--blue); color: #fff; }.benefit-card:hover { box-shadow: inset 0 -8px 0 var(--orange); transform: translateY(-8px); }.benefit-number { color: var(--orange); font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; }.benefit-card h3 { font-size: 1.65rem; letter-spacing: -.04em; margin: 75px 0 15px; }.benefit-card p { color: var(--muted); line-height: 1.65; max-width: 290px; }.benefit-card-dark p { color: rgba(255,255,255,.7); }
.result-list { border-top: 1px solid var(--line); }.result-list div { border-bottom: 1px solid var(--line); padding: 20px 0; }.result-list strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; }.result-list p { color: var(--muted); line-height: 1.6; margin: 7px 0 0; max-width: 390px; }
.lp-process { background: var(--ink); color: #fff; display: grid; gap: 10vw; grid-template-columns: .8fr 1fr; padding: 120px 10vw; }.section-heading-light .eyebrow { color: #f5bb83; }.section-heading-light h2 span { color: #f5bb83; }.process-list { border-top: 1px solid rgba(255,255,255,.25); }.process-step { align-items: start; border-bottom: 1px solid rgba(255,255,255,.25); display: grid; gap: 30px; grid-template-columns: 42px 1fr; padding: 23px 0; }.process-step strong { color: #f5bb83; font-size: .85rem; }.process-step h3 { font-size: 1.25rem; margin: 0 0 6px; }.process-step p { color: rgba(255,255,255,.6); font-size: .88rem; margin: 0; }
.lp-faq { align-items: start; }.faq-list details { border-bottom: 1px solid var(--line); padding: 21px 0; }.faq-list summary { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 600; list-style: none; padding-right: 30px; position: relative; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { color: var(--orange); content: '+'; font-size: 1.5rem; position: absolute; right: 0; top: -7px; }.faq-list details[open] summary::after { content: '\2212'; }.faq-list p { color: var(--muted); line-height: 1.65; margin: 14px 0 0; max-width: 500px; }
.lp-final-cta { background: var(--orange); color: #fff; padding: 130px 5vw; text-align: center; }.lp-final-cta .eyebrow { color: #fff; }.lp-final-cta h2 { font-size: clamp(2.8rem, 6vw, 6rem); letter-spacing: -.07em; line-height: .92; margin: 0 auto 27px; }.lp-final-cta h2 span { color: var(--ink); }.lp-final-cta > p:not(.eyebrow) { font-size: 1rem; margin: 0 auto 35px; }.lp-button-light { background: #fff; color: var(--ink); }.lp-button-light span { color: var(--orange); }.lp-footer { align-items: center; background: #fff; color: var(--muted); display: flex; font-size: .75rem; justify-content: space-between; padding: 25px 5vw; }.lp-footer a { color: var(--ink); font-weight: 700; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-browser { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 850px) { .lp-hero-grid, .lp-intro, .lp-results, .lp-process, .lp-faq { grid-template-columns: 1fr; }.lp-hero { padding-top: 55px; }.lp-hero-visual { margin-top: 20px; }.lp-intro, .lp-results, .lp-faq { gap: 45px; padding: 85px 8vw; }.lp-process { gap: 55px; padding: 85px 8vw; }.lp-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-header { padding: 20px 6vw; }.lp-brand img { height: 32px; }.lp-header-link { font-size: .62rem; }.lp-header-link span { display: none; }.lp-hero { padding: 55px 6vw 75px; }.lp-hero-grid { display: block; }.lp-hero-visual { margin: 45px -10px 0; min-height: 405px; padding: 40px 15px 10px; }.visual-browser { max-width: 340px; }.browser-content { min-height: 300px; padding: 34px 27px; }.browser-content h2 { font-size: 2.4rem; }.note-two { right: -34px; top: 125px; }.lp-actions { align-items: flex-start; flex-direction: column; gap: 22px; }.lp-button { font-size: .68rem; }.lp-benefits { display: block; }.benefit-card { min-height: 270px; padding: 40px 9vw; }.benefit-card h3 { margin-top: 55px; }.lp-final-cta { padding: 90px 7vw; }.lp-footer { align-items: flex-start; flex-direction: column; gap: 13px; } }