:root{--ink:#193a2f;--green:#215b45;--paper:#f6f5ef;--muted:#788278}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px 'Segoe UI','Microsoft YaHei',sans-serif}a{color:inherit;text-decoration:none}header{height:90px;padding:0 6%;display:flex;align-items:center;justify-content:space-between}header>a:last-child{font-size:12px}.logo{font-size:30px;font-weight:800;letter-spacing:4px}.logo span{display:inline-block;font-size:9px;letter-spacing:3px;margin-left:16px;border-left:1px solid #b8c5b8;padding-left:16px;vertical-align:middle}.hero{position:relative;min-height:610px;margin:0 24px;border-radius:4px;overflow:hidden}.hero>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#102c23d9,#102c2355 65%,#102c2311)}.hero-copy{position:relative;padding:70px 6% 30px;color:#fff;max-width:850px}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:600;margin:0 0 30px}.hero h1{font-size:clamp(35px,4.5vw,66px);line-height:1.4;font-weight:500;letter-spacing:3px;margin:0 0 24px}.hero p:not(.eyebrow){font-size:16px;line-height:2.1;color:#e6eadf}.hero-bottom{margin-top:65px;border-top:1px solid #ffffff55;padding-top:22px;font-size:9px;letter-spacing:2px;display:flex;justify-content:space-between}.hero-bottom span{font-size:22px}.invitation{max-width:1130px;margin:auto;padding:95px 35px;display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}.dark{color:#7c8d70}h2{font-size:36px;line-height:1.6;font-weight:500;margin:0 0 25px}.intro>p:not(.eyebrow),.brand-story p:not(.eyebrow){font-size:14px;line-height:2.2;color:var(--muted)}small{font-size:11px;line-height:1.9;color:#8b948a}.card{background:#fff;border:1px solid #e4e8dc;border-radius:8px;padding:35px;box-shadow:0 20px 60px #253c2510}.step{font-size:10px;letter-spacing:2px;color:#81917a}h3{font-size:24px;font-weight:500;margin:25px 0 16px}.card p{font-size:13px;color:var(--muted);line-height:1.8}label{display:block;font-size:12px;margin:30px 0 10px}input{font:inherit;border:1px solid #d9dfd5;border-radius:5px;padding:15px;width:100%;outline:none}input:focus{border-color:var(--green);box-shadow:0 0 0 3px #215b4510}button{width:100%;padding:15px;border-radius:5px;border:0;background:var(--green);color:#fff;font:inherit;font-size:13px;cursor:pointer;margin-top:20px}button:disabled{opacity:.55;cursor:default}.secondary{background:#f1f4ef;color:#6e7f68;margin-top:8px}button:hover:not(:disabled){filter:brightness(1.1)}.error{color:#b65d49!important;min-height:18px}.line{display:grid;grid-template-columns:65px 1fr;gap:10px;padding:15px 0;border-bottom:1px solid #edf0e9;font-size:13px;line-height:1.8;overflow-wrap:anywhere}.line span:first-child{color:#909b89}.line a{color:var(--green);text-decoration:underline}details{margin:20px 0;font-size:12px;color:#71806b}summary{cursor:pointer}pre{font:inherit;white-space:pre-wrap;line-height:2;overflow-wrap:anywhere;background:#f7f9f4;padding:16px}.success{padding:18px;background:#eef6e9;border:1px solid #dce9d4;color:#37632a;border-radius:5px;font-size:13px;line-height:1.9;margin-top:20px}.brand-story{background:#e8ecdf;display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:65px 8%;align-items:center}.brand-story img{width:100%;height:380px;object-fit:cover;border-radius:4px}.brand-story a{display:inline-block;font-size:12px;border-bottom:1px solid #83937b;padding-bottom:10px;margin-top:25px}footer{display:flex;justify-content:space-between;align-items:center;padding:42px 6%;gap:24px}footer span:not(.logo),footer a{font-size:10px;color:#829078}footer .logo{font-size:20px}@media(min-width:1500px){main{max-width:1600px;margin:auto}}@media(max-width:750px){header{height:75px;padding:0 23px}.logo{font-size:24px}.logo span{display:none}.hero{margin:0 12px;min-height:520px}.hero-copy{padding:55px 28px 25px}.hero-bottom{font-size:8px;margin-top:55px}.shade{background:linear-gradient(90deg,#102c23cc,#102c2344)}.invitation{grid-template-columns:1fr;padding:50px 23px;gap:25px}h2{font-size:28px}.eyebrow{margin-bottom:20px}.card{padding:26px}.brand-story{grid-template-columns:1fr;padding:45px 23px;gap:30px}.brand-story img{height:280px}footer{flex-wrap:wrap;padding:30px 23px}footer a{width:100%}}
/* Narrow screens prioritize the invitation; desktop keeps the original layout. */
@media(max-width:750px){
    header{height:64px;padding:0 20px}
    main{display:flex;flex-direction:column}
    .invitation{order:0;width:100%;padding:20px 16px 32px;gap:16px}
    .intro .eyebrow,.intro>p:not(.eyebrow),.intro>small{display:none}
    .intro h2{font-size:22px;line-height:1.6;margin:0;font-weight:600}
    .intro h2 br{display:none}
    .card{min-width:0;padding:24px 20px;border-radius:12px}
    .card h3{font-size:22px;margin:16px 0 12px;overflow-wrap:anywhere}
    .card label{margin-top:22px}
    .card input{font-size:16px;min-height:50px}
    .card button{min-height:48px}
    .card .error:empty{min-height:0;margin:12px 0}
    .hero{order:1;min-height:330px;margin:0 16px 28px}
    .hero-copy{padding:34px 24px 24px}
    .hero h1{font-size:30px;letter-spacing:1px}
    .hero .eyebrow{font-size:9px;margin-bottom:20px}
    .hero p:not(.eyebrow){font-size:13px;line-height:1.9}
    .hero-bottom{margin-top:24px;font-size:7px;letter-spacing:1px}
    .brand-story{order:2;padding:36px 20px;gap:24px}
    .brand-story h2{font-size:26px}
    .brand-story img{height:240px}
    body.is-verified .intro{display:none}
    #details:not([hidden]){display:flex;flex-direction:column}
    #details>.step{order:0}
    #greeting{order:1}
    #schedule{order:2}
    #confirmation{order:3}
    #confirmButton{order:4}
    #confirmError{order:5}
    #details>details{order:6}
    #resetButton{order:7}
    .line{grid-template-columns:65px minmax(0,1fr);padding:12px 0}
    .line span:first-child{color:#71806b}
    .line a{display:inline-block;min-height:36px;padding:5px 0}
    #schedule .line:nth-child(2){background:#f1f6eb;border-radius:6px;padding:12px 10px;margin:6px -10px;font-weight:600}
    .success{white-space:pre-line}
    body.needs-confirmation{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
    body.needs-confirmation #confirmButton:not([hidden]){position:fixed;z-index:20;bottom:0;left:0;width:100%;margin:0;border-radius:0;padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 24px #193a2f20;font-size:16px;font-weight:600}
}