:root { --green:#236349; --green-dark:#174a35; --ink:#1e342b; --muted:#7a847d; --line:#e4e8df; --cream:#f6f7f0; --error:#b33d35; }
    * { box-sizing:border-box; }
    [hidden] { display:none !important; }
    body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
    button,input { font:inherit; }
    button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
    button:focus-visible { outline:3px solid #99bd83; outline-offset:5px; }
    .site { width:min(1160px,calc(100% - 96px)); margin:auto; }
    header { height:110px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
    .brand { display:flex; align-items:center; gap:12px; font-size:23px; font-weight:700; letter-spacing:2px; }
    .brand-symbol { width:36px; height:36px; }
    .header-note { display:flex; align-items:center; gap:8px; font-size:12px; color:#6c786e; letter-spacing:1px; }
    .dot { width:6px; height:6px; border-radius:50%; background:#a2b669; }
    main { min-height:calc(100svh - 192px); display:grid; grid-template-columns:1fr 490px; gap:78px; align-items:center; padding:55px 0 60px; }
    .intro { position:relative; padding-bottom:8px; }
    .eyebrow { display:flex; align-items:center; gap:12px; color:#66776a; font-size:11px; font-weight:600; letter-spacing:2px; }
    .eyebrow::before { content:""; width:28px; height:1px; background:#7d9575; }
    h1 { font-size:62px; line-height:1.22; letter-spacing:5px; margin:26px 0 16px; font-weight:600; }
    .intro-title { margin:0; font-size:34px; font-weight:400; letter-spacing:2px; line-height:1.6; }
    .intro-title span { color:var(--green); }
    .intro-copy { margin:21px 0 0; color:var(--muted); font-size:14px; line-height:1.9; letter-spacing:.5px; }
    .journey { display:flex; align-items:center; gap:0; margin:52px 0 0; padding:0; list-style:none; }
    .journey li { position:relative; display:flex; align-items:center; gap:7px; color:#939c91; font-size:11px; white-space:nowrap; }
    .journey li:not(:last-child)::after { content:""; width:19px; height:1px; margin:0 10px; background:#d7ddcf; }
    .step-number { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid #d6ddce; font-size:10px; }
    .journey li.active { color:var(--green); font-weight:600; }
    .journey li.active .step-number { background:var(--green); color:white; border-color:var(--green); }
    .journey li.done .step-number { background:#e0e8d8; color:var(--green); border-color:#e0e8d8; }
    .botanical { margin-top:45px; width:150px; height:75px; opacity:.85; }
    .panel { border:1px solid #e6eadd; border-radius:28px; background:#fff; box-shadow:0 16px 48px -24px #31452d30; overflow:hidden; min-height:510px; }
    .screen { min-height:510px; padding:34px 36px 30px; animation:enter .3s ease both; }
    .screen:focus { outline:none; }
    @keyframes enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
    .card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .small-label { font-size:11px; letter-spacing:2px; color:var(--muted); }
    .pill { display:flex; align-items:center; gap:5px; background:#f0f4e8; color:#5d7152; font-size:10px; border-radius:20px; padding:6px 10px; }
    .offer-label { font-size:16px; font-weight:400; margin:39px 0 6px; color:#667367; }
    .amount { display:flex; align-items:baseline; color:var(--green); line-height:1; margin-left:-4px; }
    .amount strong { font-size:94px; letter-spacing:-6px; font-weight:600; font-family:Arial,"Microsoft YaHei",sans-serif; }
    .amount span { font-size:26px; margin-left:10px; }
    .offer-caption { font-size:12px; color:#90988d; margin:18px 0 27px; }
    .divider { height:1px; background:var(--line); }
    .quick-info { display:grid; grid-template-columns:1fr 1fr; margin:23px 0 29px; }
    .quick-info > div { display:flex; align-items:center; gap:9px; font-size:12px; color:#69796b; }
    .quick-info > div+div { border-left:1px solid var(--line); padding-left:26px; }
    .mini-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
    .primary { display:flex; align-items:center; justify-content:center; gap:13px; width:100%; min-height:55px; border:0; border-radius:12px; background:var(--green); color:#fff; font-size:15px; font-weight:500; letter-spacing:2px; transition:background .18s,transform .18s; }
    .primary:hover { background:var(--green-dark); }
    .primary:active { transform:translateY(1px); }
    .primary svg { width:19px; height:19px; }
    .privacy-note { display:flex; align-items:center; justify-content:center; gap:5px; font-size:10px; color:#91988b; margin:15px 0 0; line-height:1.7; }
    .privacy-note svg { width:12px; height:12px; flex:none; }
    .back { display:inline-flex; align-items:center; gap:5px; margin:0 0 24px -3px; padding:3px; border:0; background:transparent; color:#748173; font-size:12px; min-height:28px; }
    .back svg { width:16px; height:16px; }
    .form-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
    .form-meta .small-label { font-size:10px; }
    .fraction { color:#8e9988; font-size:10px; }
    h2 { margin:0; font-size:26px; font-weight:600; letter-spacing:1px; line-height:1.4; outline:none; }
    .subtitle { font-size:12px; color:#899282; line-height:1.7; margin:10px 0 25px; }
    .field { margin-bottom:17px; }
    label { display:block; font-size:12px; margin:0 0 9px; color:#53614f; }
    input { width:100%; height:51px; border:1px solid #e0e5db; border-radius:10px; padding:0 15px; background:#fafbf8; color:var(--ink); outline:none; font-size:14px; transition:border-color .15s,box-shadow .15s; }
    input::placeholder { color:#b0b6aa; font-size:12px; }
    input:focus { border-color:#6c9670; box-shadow:0 0 0 3px #2363490c; background:white; }
    input[aria-invalid="true"] { border-color:#c8695d; }
    .field-error { margin:7px 0 0; font-size:11px; color:var(--error); line-height:1.5; }
    form .primary { margin-top:25px; }
    .state-screen { display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; }
    .state-illustration { width:102px; height:102px; display:grid; place-items:center; border-radius:50%; background:#f0f4e9; margin-bottom:28px; position:relative; }
    .spinner { width:65px; height:65px; border:1.5px solid #d5dfcc; border-top-color:var(--green); border-right-color:var(--green); border-radius:50%; animation:spin 1.2s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .spinner-core { position:absolute; width:30px; height:30px; color:var(--green); }
    .state-screen h2 { font-size:22px; letter-spacing:.5px; }
    .state-screen .subtitle { margin:13px 0 0; }
    .loading-dots { display:flex; gap:7px; margin-top:37px; }
    .loading-dots i { width:5px; height:5px; background:#76916a; border-radius:50%; animation:pulse 1.2s infinite; }
    .loading-dots i:nth-child(2) { animation-delay:.2s; }
    .loading-dots i:nth-child(3) { animation-delay:.4s; }
    @keyframes pulse { 50% { opacity:.25; } }
    .result-icon { width:44px; height:44px; color:var(--green); }
    .result-title { max-width:330px; line-height:1.65; }
    .result-screen .primary { margin-top:35px; }
    .text-button { background:none; border:0; padding:12px 20px; margin-top:8px; font-size:12px; color:#7f8a78; min-height:44px; }
    footer { min-height:82px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:15px; color:#9aA192; font-size:10px; letter-spacing:.5px; }
    .footer-right { font-size:9px; letter-spacing:1.5px; }
    @media (min-width:1500px) { main { gap:130px; } }
    @media (max-width:1050px) { .site { width:calc(100% - 64px); } main { gap:35px; grid-template-columns:1fr 450px; } h1 { font-size:51px; } .intro-title { font-size:27px; } .journey { flex-wrap:wrap; row-gap:14px; } .journey li:not(:last-child)::after { width:10px; margin:0 6px; } }
    @media (max-width:800px) { .site { width:min(490px,calc(100% - 36px)); } header { height:78px; border-bottom:0; } .brand { font-size:20px; gap:9px; } .brand-symbol { width:30px; height:30px; } .header-note { font-size:10px; letter-spacing:0; } main { display:flex; flex-direction:column; gap:26px; padding:19px 0 30px; min-height:calc(100svh - 146px); align-items:stretch; } .intro { padding-bottom:0; } .eyebrow,.intro-copy,.botanical { display:none; } h1 { display:none; } .intro-title { font-size:26px; letter-spacing:1px; line-height:1.4; } .intro-title br { display:none; } .journey { margin:22px 0 0; flex-wrap:nowrap; justify-content:space-between; } .journey li { font-size:10px; gap:5px; } .journey li:not(:last-child)::after { margin:0 5px; width:8px; } .step-number { width:18px; height:18px; font-size:9px; } .panel,.screen { min-height:495px; } .panel { border-radius:22px; } .screen { padding:30px 27px 27px; } .offer-label { margin-top:36px; } footer { min-height:68px; font-size:9px; } .footer-right { display:none; } }
    @media (max-width:370px) { .site { width:calc(100% - 26px); } .screen { padding:28px 21px 25px; } .intro-title { font-size:23px; } .journey li { font-size:9px; gap:4px; } .journey li:not(:last-child)::after { width:4px; margin:0 3px; } .quick-info > div+div { padding-left:15px; } .amount strong { font-size:86px; } h2 { font-size:24px; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }