:root { --ink:#0c1d2d; --navy:#082438; --blue:#106c7c; --mint:#c2eee3; --paper:#f7f9f7; --line:#d8e1e2; --muted:#5a6b75; --gold:#f5bd59; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Alexandria",Tahoma,sans-serif; font-size:16px; line-height:1.7; }
button,a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.container { width:min(1140px,calc(100% - 48px)); margin:auto; }
.nav { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.35rem; letter-spacing:-.04em; }
.brand-mark { width:37px; height:37px; display:grid; place-items:center; border-radius:12px; color:var(--white); background:var(--navy); font-size:1.15rem; }
.nav-links { display:flex; align-items:center; gap:29px; color:#40535e; font-size:.9rem; font-weight:600; }
.nav-links a:hover { color:var(--blue); }
.nav-cta,.primary-button,.primary-link { border:0; background:var(--navy); color:var(--white); border-radius:12px; padding:12px 18px; font-size:.9rem; font-weight:700; box-shadow:none; transition:.2s ease; }
.nav-cta:hover,.primary-button:hover,.primary-link:hover { background:#15435b; transform:translateY(-2px); }
.hero { min-height:655px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:54px; padding:62px 0 78px; }
.eyebrow { margin:0 0 15px; color:var(--blue); font-weight:800; letter-spacing:.01em; font-size:.78rem; }
.eyebrow span { display:inline-block; width:25px; height:2px; vertical-align:middle; margin-left:8px; background:var(--gold); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:660px; margin-bottom:20px; font-size:clamp(2.7rem,5vw,4.75rem); line-height:1.19; letter-spacing:-.075em; }
h1 em { color:var(--blue); font-style:normal; }
.hero-text { max-width:605px; color:var(--muted); font-size:1.1rem; line-height:2; }
.hero-actions { display:flex; gap:21px; align-items:center; margin:31px 0 24px; }
.primary-link { display:inline-flex; align-items:center; gap:17px; padding:14px 19px; }
.primary-link span,.primary-button span { font-size:1.1rem; }
.text-button { background:transparent; border:0; color:var(--navy); border-bottom:1px solid var(--navy); padding:4px 0; font-weight:700; font-size:.9rem; }
.trust-row { display:flex; flex-wrap:wrap; gap:13px 22px; color:#40535e; font-size:.76rem; font-weight:600; }
.trust-row span:first-child { color:var(--blue); }
.hero-panel { position:relative; isolation:isolate; padding:23px; max-width:455px; margin-inline:auto; border:1px solid rgba(12,29,45,.1); border-radius:25px; background:#fff; box-shadow:0 25px 75px rgba(9,42,58,.12); transform:rotate(-2deg); }
.hero-panel::before { content:""; position:absolute; z-index:-1; width:90%; height:88%; inset:32px auto auto 12px; border-radius:25px; background:var(--mint); transform:rotate(7deg); }
.panel-top { display:flex; align-items:center; gap:8px; padding:0 1px 18px; color:#314851; font-weight:700; font-size:.78rem; }
.online-dot { width:9px; height:9px; border-radius:50%; background:#2db587; }
.source-pill { margin-right:auto; padding:4px 9px; border-radius:20px; background:#edf4f3; color:var(--blue); font-size:.7rem; }
.chat-bubble { max-width:88%; padding:13px 15px; margin-bottom:17px; border-radius:17px 17px 3px 17px; background:#e4f5ef; font-size:.84rem; line-height:1.9; }
.draft-card { padding:14px; border:1px solid #d3e4e0; border-radius:17px; background:#fbfffe; }
.draft-head,.organized-head { display:flex; gap:8px; align-items:center; margin-bottom:11px; color:#244752; font-size:.78rem; }
.draft-head>span,.organized-head>span { width:24px; height:24px; display:grid; place-items:center; background:var(--mint); color:#0e5c63; border-radius:8px; }
.draft-head small,.organized-head small { margin-right:auto; color:#a45f16; font-weight:700; font-size:.63rem; }
.draft-line { display:flex; justify-content:space-between; padding:8px 2px; border-bottom:1px dashed #dce6e5; font-size:.76rem; }
.draft-line b { color:var(--blue); }
.draft-meta { display:flex; gap:13px; padding:11px 1px; color:#536972; font-size:.64rem; }
.draft-card button { width:100%; border:0; border-radius:9px; padding:10px; background:var(--navy); color:#fff; font-family:inherit; font-size:.7rem; font-weight:700; }
.draft-card button span { float:left; }
.human-note { margin:14px 0 1px; color:#637179; font-size:.65rem; text-align:center; }
.human-note span { color:#249476; font-weight:900; }
.proof { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px; padding:22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#40535e; font-size:.8rem; font-weight:600; }
.proof p { margin:0; }.proof i { width:5px; height:5px; border-radius:50%; background:var(--gold); }
.benefits-section { padding:128px 0; background:var(--navy); color:#fff; overflow:hidden; }.benefits-intro { display:grid; grid-template-columns:1.2fr .8fr; gap:75px; align-items:end; }.benefits-intro .eyebrow { color:var(--mint); }.benefits-intro .section-title h2 { margin:0; color:#fff; }.benefits-intro>p { margin:0 0 6px; color:#bacbd0; font-size:.91rem; line-height:2; }.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:47px 0 51px; }.benefit-grid article { min-height:214px; padding:21px; border:1px solid rgba(194,238,227,.22); border-radius:17px; background:rgba(255,255,255,.035); transition:transform .2s ease, background .2s ease; }.benefit-grid article:hover { transform:translateY(-5px); background:rgba(255,255,255,.075); }.benefit-icon { display:grid; place-items:center; width:37px; height:37px; margin-bottom:25px; border-radius:11px; color:var(--navy); background:var(--mint); font-size:1.08rem; font-weight:800; }.benefit-grid h3 { margin-bottom:8px; font-size:.98rem; }.benefit-grid p { margin:0; color:#b9cbd0; font-size:.74rem; line-height:1.95; }.old-new { display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; border:1px solid rgba(194,238,227,.24); border-radius:18px; background:rgba(194,238,227,.24); }.old-work,.new-work { padding:25px; background:#102f43; }.new-work { background:#0c4d57; }.comparison-label { margin:0 0 17px; color:var(--gold); font-size:.7rem; font-weight:800; }.new-work .comparison-label { color:var(--mint); }.old-new>div>div { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.1); }.old-new>div>div span { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:7px; color:#102f43; background:#b9c7c8; font-size:.57rem; font-weight:800; }.new-work>div span { background:var(--mint); }.old-new>div>div p { margin:0; color:#dde8e9; font-size:.77rem; }
.example-section { padding:130px 0; background:#eef4f2; }.section-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }.section-title h2 { margin-bottom:17px; font-size:clamp(2rem,3.8vw,3.2rem); letter-spacing:-.065em; line-height:1.3; }.section-title>p:not(.eyebrow) { color:var(--muted); max-width:440px; }
.flow-shell { padding:19px; border:1px solid #d1dfdc; border-radius:22px; background:#fff; box-shadow:0 18px 35px rgba(9,42,58,.06); }
.source-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:5px; background:#eef3f2; border-radius:11px; }.source-tab { border:0; border-radius:8px; padding:9px 5px; background:transparent; color:#65757d; font-size:.73rem; font-weight:700; }.source-tab.active { background:#fff; color:var(--navy); box-shadow:0 2px 7px rgba(14,43,55,.09); }
.message-state { display:flex; gap:13px; margin-top:20px; padding:15px; border-radius:15px; background:#edf9f5; }.message-icon { display:grid; place-items:center; width:35px; height:35px; flex:0 0 35px; border-radius:11px; background:#cbf0df; color:#138064; font-weight:800; }.message-state small { color:#5e7772; font-size:.68rem; }.message-state p { margin:4px 0 0; font-size:.81rem; line-height:1.85; }.flow-arrow { text-align:center; color:#6e8885; line-height:1.5; font-size:1.15rem; }
.organized-state { padding:15px; border:1px solid #d7e7e3; border-radius:15px; }.organized-line { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed #dae5e3; font-size:.75rem; }.organized-line strong { color:#116b70; }.organized-detail { display:flex; flex-wrap:wrap; gap:9px; padding-top:11px; color:#60747b; font-size:.66rem; }.organized-detail span { padding:3px 7px; border-radius:5px; background:#eff4f3; }.warning { display:flex; align-items:center; gap:7px; margin-top:13px; color:#8d5d17; font-size:.67rem; font-weight:600; }.warning span { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#fff2ce; }
.cashier-state { display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; color:#fff; background:var(--navy); }.cashier-state>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.35); border-radius:9px; }.cashier-state strong { font-size:.75rem; }.cashier-state p { margin:2px 0 0; color:#c3d2d7; font-size:.63rem; }.cashier-state b { margin-right:auto; color:var(--mint); font-size:.61rem; white-space:nowrap; }
.start-section { padding:130px 0; }.centered { text-align:center; }.centered>p:not(.eyebrow) { margin-inline:auto; }.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:970px; margin:50px auto 0; }.plan-card { position:relative; padding:34px; border-radius:21px; border:1px solid var(--line); background:#fff; }.start-plan { background:var(--navy); border-color:var(--navy); color:#fff; overflow:hidden; }.start-plan::after { content:""; position:absolute; width:250px; height:250px; border-radius:50%; background:rgba(194,238,227,.12); left:-90px; bottom:-130px; }.plan-label { display:inline-block; padding:5px 10px; border:1px solid currentColor; border-radius:30px; color:var(--mint); font-size:.72rem; font-weight:800; }.pro-plan .plan-label { color:var(--blue); }.plan-card h3 { max-width:360px; margin:20px 0 11px; font-size:1.37rem; line-height:1.65; letter-spacing:-.04em; }.plan-card>p { max-width:370px; min-height:58px; color:#b9cbd0; font-size:.82rem; }.pro-plan>p { color:var(--muted); }.plan-card ul { display:grid; gap:10px; min-height:142px; padding:0; margin:22px 0 28px; list-style:none; font-size:.78rem; }.plan-card li::before { content:"✓"; margin-left:9px; color:var(--mint); font-weight:800; }.pro-plan li::before { color:var(--blue); }.secondary-button { border:1px solid #a9c3c4; border-radius:11px; background:transparent; color:var(--navy); padding:11px 15px; font-weight:700; font-size:.8rem; }.secondary-button span { margin-right:10px; }
.steps-section { padding:112px 0; background:#d7eee8; }.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; margin-top:44px; }.steps article { min-height:175px; padding:20px; border-top:2px solid #507d7b; }.steps span { color:var(--blue); font-weight:800; font-size:.78rem; }.steps h3 { margin:13px 0 7px; font-size:1.04rem; }.steps p { margin:0; color:#486166; font-size:.76rem; line-height:1.85; }
.questions { padding:130px 0; display:grid; grid-template-columns:.68fr 1.32fr; gap:90px; align-items:start; }.faq-list { border-top:1px solid var(--line); }.faq-list details { border-bottom:1px solid var(--line); padding:19px 0; }.faq-list summary { display:flex; list-style:none; justify-content:space-between; gap:15px; color:var(--navy); font-size:.91rem; font-weight:800; cursor:pointer; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:var(--blue); font-size:1.15rem; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list p { max-width:650px; margin:13px 0 0; color:var(--muted); font-size:.8rem; }
.final-cta { padding:110px 0; text-align:center; color:#fff; background:var(--navy); }.final-cta .eyebrow { color:var(--mint); }.final-cta h2 { margin-bottom:18px; font-size:clamp(2.2rem,4vw,3.7rem); line-height:1.3; letter-spacing:-.07em; }.final-cta>div>p:not(.eyebrow) { max-width:570px; margin:0 auto 26px; color:#b8c8ce; font-size:.9rem; }.light-button { background:var(--mint); color:var(--navy); }.light-button:hover { background:#ecfffa; }
.footer { min-height:105px; display:flex; align-items:center; gap:20px; color:#5d707a; font-size:.73rem; }.footer p { margin:0; }.footer>span { margin-right:auto; }
.trial-modal { width:min(490px,calc(100% - 36px)); border:0; border-radius:22px; padding:35px; color:var(--navy); text-align:center; box-shadow:0 24px 80px rgba(0,0,0,.27); }.trial-modal::backdrop { background:rgba(4,24,36,.55); backdrop-filter:blur(4px); }.close-modal { position:absolute; top:14px; left:15px; border:0; background:transparent; color:#687880; font-size:1.6rem; }.modal-symbol { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 15px; border-radius:15px; background:var(--navy); color:#fff; font-weight:800; }.trial-modal h2 { margin-bottom:10px; font-size:1.45rem; letter-spacing:-.05em; }.trial-modal p { color:var(--muted); font-size:.82rem; }.modal-points { display:grid; gap:7px; margin:22px 0; padding:15px; border-radius:12px; background:#edf7f4; color:#286160; font-size:.74rem; font-weight:700; }.modal-close { width:100%; }
.start-body { min-height:100vh; background:#e9f1ef; }.start-shell { min-height:100vh; display:grid; grid-template-columns:350px 1fr; }.setup-side { display:flex; flex-direction:column; padding:34px; color:#fff; background:var(--navy); }.white-brand .brand-mark { color:var(--navy); background:var(--mint); }.setup-intro { margin-top:80px; }.setup-intro .eyebrow { color:var(--mint); }.setup-intro h1 { margin:0 0 16px; font-size:2.15rem; line-height:1.42; letter-spacing:-.07em; }.setup-intro>p { color:#b8cbd0; font-size:.78rem; line-height:2; }.setup-steps { display:grid; gap:4px; padding:0; margin:44px 0 auto; list-style:none; }.setup-steps li { display:flex; align-items:center; gap:12px; padding:12px 8px; opacity:.48; }.setup-steps li.active { padding-right:13px; border-radius:13px; opacity:1; background:rgba(194,238,227,.12); }.setup-steps li.done { opacity:.82; }.setup-steps li>span { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border:1px solid #74909b; border-radius:50%; color:#b8cbd0; font-size:.68rem; font-weight:800; }.setup-steps li.active>span,.setup-steps li.done>span { border-color:var(--mint); color:var(--navy); background:var(--mint); }.setup-steps strong { display:block; font-size:.76rem; }.setup-steps small { display:block; margin-top:1px; color:#afc3c9; font-size:.62rem; }.back-link { display:inline-block; color:#c5d5d9; font-size:.72rem; }.setup-main { width:min(720px,100%); padding:38px 56px 55px; margin:auto; }.setup-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:69px; color:#5c7078; font-size:.72rem; font-weight:700; }.demo-label { display:flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid #cededb; border-radius:20px; color:#48716e; font-size:.62rem; }.demo-label i { width:7px; height:7px; border-radius:50%; background:#42a482; }.setup-panel { animation:enter .25s ease; }.setup-panel h2 { margin:0 0 12px; font-size:clamp(1.8rem,3vw,2.55rem); letter-spacing:-.07em; line-height:1.35; }.panel-lead { max-width:550px; margin-bottom:33px; color:var(--muted); font-size:.86rem; line-height:2; }.field-label { display:block; margin:22px 0 8px; color:#2f4a54; font-size:.76rem; font-weight:800; }.field-label span { margin-right:5px; color:#8b9ba0; font-size:.62rem; font-weight:500; } input,select { width:100%; border:1px solid #cbdad7; border-radius:12px; padding:14px; outline:none; color:var(--navy); background:#fff; font:inherit; font-size:.85rem; } input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(16,108,124,.11); }.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.choice { min-height:49px; border:1px solid #cbdad7; border-radius:11px; color:#3d5660; background:#fff; font-size:.74rem; font-weight:700; }.choice.active { border-color:var(--navy); color:#fff; background:var(--navy); }.form-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:13px; }.sample-tip { display:flex; gap:11px; align-items:flex-start; padding:15px; margin-top:24px; border-radius:13px; background:#d9f0e8; color:#205d5b; }.sample-tip span { display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px; border-radius:7px; background:#b4e5d6; }.sample-tip p { margin:0; font-size:.72rem; line-height:1.9; }.channel-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.channel-list label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; padding:12px; border:1px solid #cadbd7; border-radius:11px; background:#fff; cursor:pointer; }.channel-list input { width:16px; height:16px; accent-color:var(--blue); }.channel-list span { font-size:.74rem; font-weight:800; }.channel-list small { grid-column:2; color:#6d8086; font-size:.6rem; }.approval-box { display:flex; gap:11px; align-items:flex-start; padding:16px; margin-top:25px; border:1px solid #adcfc4; border-radius:14px; background:#f6fffc; }.approval-box>span { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border-radius:50%; color:#0d6556; background:var(--mint); font-weight:800; }.approval-box strong { font-size:.78rem; }.approval-box p { margin:3px 0 0; color:#62777e; font-size:.67rem; }.setup-actions { display:flex; justify-content:space-between; gap:12px; margin-top:55px; }.back-button,.next-button { border:0; border-radius:11px; padding:13px 17px; font-weight:800; font-size:.76rem; }.back-button { color:#566d75; background:transparent; }.back-button:disabled { opacity:.35; cursor:not-allowed; }.next-button { min-width:118px; color:#fff; background:var(--navy); }.next-button span { margin-right:11px; font-size:1rem; }.demo-result { overflow:hidden; border:1px solid #c9ddd7; border-radius:19px; background:#fff; box-shadow:0 16px 34px rgba(9,42,58,.07); }.demo-message { max-width:82%; padding:16px; margin:17px; border-radius:15px 15px 2px 15px; background:#e0f4ed; }.demo-message small { color:#62817c; font-size:.62rem; }.demo-message p { margin:5px 0 0; font-size:.76rem; line-height:1.9; }.result-arrow { padding:0 34px; color:#74908c; }.result-draft { padding:17px; border-top:1px solid #d9e8e5; }.result-head { display:flex; gap:8px; align-items:center; font-size:.72rem; }.result-head>span { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; color:#075d61; background:var(--mint); }.result-head b { color:var(--blue); }.result-head small { margin-right:auto; color:#a56517; font-size:.6rem; }.result-row { display:flex; justify-content:space-between; padding:14px 0 10px; margin-top:10px; border-bottom:1px dashed #d5e1df; font-size:.78rem; }.result-row b { color:var(--blue); }.result-tags { display:flex; flex-wrap:wrap; gap:7px; padding:12px 0; }.result-tags span { padding:3px 7px; border-radius:5px; color:#587178; background:#edf4f2; font-size:.61rem; }.result-alert { display:flex; gap:7px; align-items:center; color:#875d1e; font-size:.64rem; font-weight:700; }.result-alert>span { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#fff0ce; }.result-summary { display:flex; gap:10px; padding:15px; margin-top:16px; border-radius:12px; color:#2f655e; background:#d9f1e8; }.result-summary>span { font-weight:900; }.result-summary p { margin:0; font-size:.73rem; line-height:1.9; } @keyframes enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) { .nav { min-height:74px; }.nav-links { display:none; }.nav-cta { padding:10px 12px; font-size:.75rem; }.hero { grid-template-columns:1fr; gap:48px; padding-top:50px; }.hero-panel { width:min(100%,455px); }.section-grid,.questions,.benefits-intro { grid-template-columns:1fr; gap:38px; }.plan-grid { grid-template-columns:1fr; }.benefit-grid { grid-template-columns:1fr 1fr; }.steps { grid-template-columns:1fr 1fr; }.questions { padding:85px 0; }.footer { flex-wrap:wrap; padding:24px 0; }.footer>span { width:100%; margin:0; } }
@media (max-width:800px) { .start-shell { grid-template-columns:1fr; }.setup-side { min-height:auto; padding:25px; }.setup-intro { margin-top:35px; }.setup-steps { display:flex; margin:25px 0; overflow-x:auto; }.setup-steps li { min-width:145px; }.back-link { display:none; }.setup-main { padding:35px 25px 45px; }.setup-top { margin-bottom:42px; } }
@media (max-width:500px) { .container { width:min(100% - 30px,1140px); }.brand { font-size:1.15rem; }.brand-mark { width:33px; height:33px; }.hero { min-height:auto; padding-bottom:62px; }.hero-text { font-size:.96rem; }.hero-actions { align-items:flex-start; flex-direction:column; gap:15px; }.trust-row { display:grid; gap:7px; }.proof { justify-content:flex-start; padding:18px 15px; }.proof i { display:none; }.benefits-section { padding:80px 0; }.benefit-grid,.old-new { grid-template-columns:1fr; }.benefit-grid { margin:33px 0; }.old-new { gap:1px; }.flow-shell { padding:12px; }.source-tab { font-size:.63rem; }.cashier-state b { display:none; }.start-section,.example-section { padding:80px 0; }.plan-card { padding:25px; }.steps { grid-template-columns:1fr; }.steps article { min-height:0; }.final-cta { padding:80px 0; } }
@media (max-width:500px) { .setup-main { padding:27px 17px 35px; }.setup-side { padding:21px 17px; }.setup-intro h1 { font-size:1.7rem; }.setup-top { align-items:flex-start; flex-direction:column; margin-bottom:35px; }.choice-grid,.form-grid,.channel-list { grid-template-columns:1fr; }.setup-actions { margin-top:38px; }.demo-message { max-width:92%; }.result-head { align-items:flex-start; flex-wrap:wrap; }.result-head small { margin-right:33px; }.setup-steps { margin-bottom:0; } }