:root { --ink:#172f3b; --muted:#52656c; --paper:#f7f5ee; --white:#fff; --blue:#175d70; --blue-dark:#104554; --line:#dce2df; --orange:#aa4b2a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; } button,input,textarea { font:inherit; } img { max-width:100%; } h1,h2,h3,p { overflow-wrap:break-word; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
.skip-link { position:absolute; left:20px; top:-100px; z-index:2; padding:10px 18px; background:white; } .skip-link:focus { top:12px; }
.site-header { max-width:1240px; min-height:94px; margin:auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.wordmark { display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; } .wordmark img { display:block; width:205px; height:auto; }
nav { display:flex; align-items:center; gap:25px; } nav a { text-decoration:none; font-size:14px; font-weight:650; } nav a:hover,.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
nav .nav-cta { padding:11px 17px; border:1px solid var(--ink); border-radius:5px; }
.hero { max-width:1240px; margin:auto; padding:65px 32px 76px; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:55px; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.13em; }
h1 { margin:20px 0 25px; font:clamp(44px,4.6vw,65px)/1.06 Georgia,serif; letter-spacing:-.045em; }
h1 em,h2 em { font-weight:400; color:var(--blue); } .hero-copy>p { max-width:580px; font-size:18px; color:var(--muted); }
.hero-copy .hero-summary { font-size:16px; } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin:29px 0 22px; }
.button { min-height:50px; padding:13px 21px; border:0; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; gap:20px; text-decoration:none; font-weight:700; cursor:pointer; }
.button.primary { color:#fff; background:var(--blue); } .button.primary:hover { background:var(--blue-dark); } .button:disabled { opacity:.65; cursor:wait; }
.text-link { font-size:14px; font-weight:700; text-underline-offset:5px; } .text-link span { margin-left:8px; }
.trust-row { display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12px; color:var(--muted); } .trust-row span::before { content:'✓'; margin-right:7px; color:var(--blue); }
.hero-visual { min-width:0; padding:32px 22px 22px; background:#e7ece6; border-radius:8px; }
.visual-caption { display:flex; align-items:center; gap:9px; margin-bottom:31px; font-size:9px; font-weight:750; letter-spacing:.08em; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#33735e; flex-shrink:0; }
.tablet { background:#263638; padding:13px; border-radius:25px; border:2px solid #435253; box-shadow:0 22px 30px #20382d24; transform:rotate(-2deg); }
.tablet-screen { background:#f8faf7; border-radius:13px; overflow:hidden; }
.preview-top { padding:18px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; letter-spacing:.07em; }
.preview-top>span { font-size:20px; font-weight:700; text-align:right; letter-spacing:0; } .preview-top small { display:block; font-size:9px; font-weight:400; color:var(--muted); }
.preview-body { padding:30px 23px 20px; } .preview-body .eyebrow { font-size:8px; }
.preview-body h2 { font-size:30px; margin:5px 0 0; letter-spacing:-.035em; } .preview-body>p { margin:0 0 23px; font-size:12px; color:var(--muted); }
.punch-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.punch-options>span { min-height:68px; padding:14px 10px; display:flex; align-items:center; justify-content:space-between; gap:5px; border:1px solid #ced9d3; border-radius:6px; font-size:11px; font-weight:650; background:#edf2ed; }
.punch-options .punch-in { background:var(--blue); color:#fff; border-color:var(--blue); } .punch-options b { font-size:17px; } .preview-foot { display:flex; align-items:center; gap:6px; margin-top:23px; color:var(--muted); font-size:9px; }
.device-note { margin:29px 0 0; text-align:center; font:italic 17px Georgia,serif; } .device-note>span { font-size:25px; margin-right:5px; } .illustration-note { margin:12px 0 0; font-size:10px; text-align:center; color:var(--muted); }
.proof { padding:28px 24px; border-block:1px solid var(--line); text-align:center; } .proof>span { font-size:10px; font-weight:750; letter-spacing:.12em; color:var(--muted); }
.proof p { margin:9px 0 0; font-size:15px; font-weight:600; } .proof i { font-style:normal; padding:0 22px; color:#88968c; }
.section { max-width:1180px; margin:auto; padding:95px 32px; }
h2 { font:clamp(34px,3.7vw,48px)/1.15 Georgia,serif; letter-spacing:-.035em; } .section-heading { max-width:670px; margin-bottom:38px; } .section-heading h2,.story-heading h2,.contact-copy h2 { margin:15px 0 22px; } .section-heading p,.contact-copy>p { font-size:17px; color:var(--muted); }
.story { display:grid; grid-template-columns:1fr 1.1fr; gap:90px; } .story-heading h2 { font-size:clamp(42px,4.5vw,58px); }
.founder-note { display:flex; gap:13px; align-items:center; margin-top:38px; } .founder-mark { display:grid; place-items:center; width:43px; height:43px; background:#e6ebe3; border-radius:50%; font:24px Georgia,serif; } .founder-note p { margin:0; font-size:11px; color:var(--muted); } .founder-note strong { font-weight:600; }
.story-copy p { margin:0 0 20px; color:var(--muted); } .story-copy .intro { font-size:19px; color:var(--ink); } blockquote { margin:28px 0; border-left:3px solid var(--orange); padding:3px 0 3px 23px; font:italic 24px/1.4 Georgia,serif; }
.benefits { padding-top:18px; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #cbd5cf; }
.feature-grid article { padding:29px 25px 0 0; } .feature-grid article+article { border-left:1px solid #cbd5cf; padding-left:28px; } .icon { color:var(--orange); font-size:10px; letter-spacing:.09em; font-weight:800; } .feature-grid h3 { margin:21px 0 11px; font-size:20px; line-height:1.3; } .feature-grid p { font-size:15px; color:var(--muted); }
.workflow { background:var(--ink); color:#fff; padding:86px max(32px,calc((100% - 1116px)/2)); } .workflow .eyebrow { color:#b3d5ca; } .workflow .section-heading>p { color:#c0d0d2; }
.workflow>ol { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin:43px 0 55px; padding:0; list-style:none; }
.workflow>ol>li { display:flex; align-items:flex-start; gap:15px; } .workflow>ol>li>span { flex:0 0 32px; height:32px; display:grid; place-items:center; border:1px solid #688088; border-radius:50%; font-size:13px; }
.workflow h3 { margin:0 0 10px; font-size:18px; } .workflow p { color:#c0d0d2; font-size:15px; } .workflow li p { margin:0; }
.multi-terminal { border-top:1px solid #47606a; padding-top:45px; display:grid; grid-template-columns:1fr 1fr; gap:90px; } .multi-terminal h3 { margin-top:15px; font:32px/1.2 Georgia,serif; } .multi-terminal p { max-width:450px; }
.day-route { list-style:none; margin:0; padding:0; } .day-route li { display:flex; align-items:baseline; gap:22px; padding:12px 0; border-bottom:1px solid #47606a; } .day-route li>span { font-size:12px; color:#b3d5ca; font-variant-numeric:tabular-nums; } .day-route strong { font-size:14px; } .day-route small { display:block; font-size:12px; color:#c0d0d2; }
.pricing { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:90px; } .pricing .section-heading { margin:0; } .pricing .text-link { display:inline-block; margin-top:12px; }
.price-card { background:#e8ede5; border:1px solid #ced8cb; border-radius:7px; padding:34px; } .price-number { margin:15px 0; font:84px/1 Georgia,serif; letter-spacing:-.06em; } .price-number span { font:25px Georgia,serif; letter-spacing:-.02em; } .price-card>p { font-size:15px; color:var(--muted); } .setup-price { border-top:1px solid #c3cfc0; padding-top:22px; margin-top:25px; display:flex; align-items:center; gap:19px; } .setup-price strong { font:35px Georgia,serif; white-space:nowrap; } .setup-price span { font-size:14px; } .price-card .price-note { font-size:12px; margin-bottom:0; }
.faq { padding-top:0; display:grid; grid-template-columns:1fr 1.3fr; gap:60px; } .faq details { border-bottom:1px solid #cbd5cf; } .faq summary { padding:19px 0; font-size:16px; font-weight:650; cursor:pointer; } .faq details p { color:var(--muted); font-size:15px; margin:0 0 22px; }
.contact-section { padding:85px max(32px,calc((100% - 1116px)/2)); display:grid; grid-template-columns:1fr 1.1fr; gap:85px; background:#e9eee8; border-top:1px solid var(--line); }
.contact-copy ul { padding:0; list-style:none; font-size:14px; } .contact-copy li { margin:11px 0; } .contact-copy li::before { content:'✓'; margin-right:9px; color:var(--blue); font-weight:800; }
.lead-form { padding:30px; border:1px solid #d5ded5; border-radius:8px; background:#fff; }
.field { display:grid; gap:7px; margin-bottom:18px; } .field label { font-size:13px; font-weight:700; } .field small,.form-note { color:var(--muted); font-weight:400; }
input,textarea { min-width:0; width:100%; padding:11px 12px; border:1px solid #acbdb9; border-radius:5px; color:var(--ink); background:#fff; } input:focus,textarea:focus { outline:3px solid #175d7026; border-color:var(--blue); } textarea { resize:vertical; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .website-field { position:absolute; left:-10000px; } .lead-form .button { width:100%; } .form-note { margin:12px 0 0; font-size:11px; text-align:center; } .form-message { min-height:24px; margin:12px 0 0; font-weight:700; text-align:center; } .form-message.success { color:#176b46; } .form-message.error { color:#a73535; }
footer { max-width:1180px; margin:auto; padding:36px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); } footer p { font-size:13px; } footer>div { display:flex; gap:22px; font-size:13px; }
@media (max-width:1000px) { nav { gap:17px; } nav a:nth-child(-n+3) { display:none; } .hero { gap:30px; } .story,.pricing,.multi-terminal { gap:45px; } .contact-section { gap:40px; } .hero-visual { padding-inline:16px; } .visual-caption { font-size:8px; } }
@media (max-width:760px) { .hero { grid-template-columns:1fr; padding-top:38px; gap:40px; } .hero-visual { width:100%; max-width:510px; margin:auto; padding:28px; } h1 { font-size:clamp(43px,7.6vw,60px); } .story,.pricing,.faq,.contact-section { grid-template-columns:1fr; gap:30px; } .story-heading h2 br:last-of-type { display:none; } .founder-note { margin-top:20px; } .feature-grid { grid-template-columns:1fr; } .feature-grid article,.feature-grid article+article { padding:25px 0 10px; border-left:0; } .feature-grid article+article { border-top:1px solid #cbd5cf; } .workflow>ol { grid-template-columns:1fr; gap:28px; } .multi-terminal { grid-template-columns:1fr; gap:20px; } .section { padding-block:65px; } .benefits { padding-top:0; } .faq { padding-top:0; } .faq .section-heading { margin-bottom:0; } .proof i { padding:0 7px; } .proof p { font-size:13px; } .contact-section,.workflow { padding-block:65px; } }
@media (max-width:440px) { .site-header { padding:16px 20px; gap:15px; min-height:78px; } .wordmark img { width:157px; } nav { gap:12px; } nav a { font-size:12px; } nav .nav-cta { display:none; } .hero,.section { padding-inline:22px; } .hero { padding-bottom:48px; } .hero-copy>p { font-size:17px; } .hero-actions { align-items:stretch; flex-direction:column; gap:17px; } .hero-actions .text-link { text-align:center; } .hero-visual { padding:24px 17px 18px; } .preview-body { padding:23px 15px 17px; } .tablet { padding:10px; } .punch-options { gap:7px; } .punch-options>span { font-size:10px; padding:10px 8px; } .device-note { font-size:15px; } .contact-section,.workflow { padding-inline:22px; } .price-card { padding:26px; } .two { grid-template-columns:1fr; gap:0; } .lead-form { padding:24px 18px; } footer { padding:30px 22px; align-items:flex-start; flex-direction:column; gap:15px; } footer p { margin:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.privacy-footer { max-width:1180px; margin:auto; padding:0 32px 24px; }
.privacy-footer button { border:0; background:none; color:var(--ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer; font-size:13px; padding:10px 0; }
.consent-panel { position:fixed; z-index:10; right:20px; bottom:20px; width:min(520px,calc(100% - 40px)); max-height:calc(100dvh - 40px); overflow:auto; padding:24px; border:1px solid #acbdb9; border-radius:8px; background:#fff; box-shadow:0 8px 36px #172f3b30; }
.consent-panel[hidden],.privacy-footer button[hidden] { display:none; }
.consent-panel h2 { font:700 20px/1.3 system-ui,sans-serif; letter-spacing:0; margin:0 0 12px; }
.consent-panel p,.consent-panel summary { font-size:13px; line-height:1.6; }
.consent-panel summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.consent-actions { display:flex; gap:12px; margin-top:14px; }
.consent-actions button { flex:1; min-height:48px; padding:10px; border:1px solid var(--blue); border-radius:5px; background:var(--blue); color:white; font-weight:650; cursor:pointer; }
.consent-actions button:hover { background:var(--blue-dark); }
@media(max-width:440px) { .consent-panel { bottom:12px; right:12px; width:calc(100% - 24px); padding:18px; max-height:calc(100dvh - 24px); } }