:root { color-scheme:light; --ink:#122118; --muted:#5d6a62; --paper:#f4f7f2; --card:#fff; --line:#dce5dc; --green:#176b45; --green-dark:#0c4c30; --shadow:0 14px 40px rgba(17,47,30,.08) }
* { box-sizing:border-box }
body { position:relative; margin:0; min-width:320px; overflow-x:hidden; background:radial-gradient(circle at 6% 0%,rgba(55,151,101,.13),transparent 24rem),var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55 }
.site-header,main,footer { position:relative; z-index:1 }
.site-header { border-bottom:1px solid rgba(23,107,69,.16); background:rgba(244,247,242,.9); backdrop-filter:blur(12px) }
.header-inner,main,.footer-inner { width:min(1180px,calc(100% - 2rem)); margin-inline:auto }
.header-inner { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--ink); font-size:1.08rem; font-weight:800; letter-spacing:-.025em; text-decoration:none }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--ink); color:#fff; font-size:1rem }
.header-note { margin:0; color:var(--muted); font-size:.9rem; text-align:right }
main { padding:clamp(1.4rem,3vw,2.8rem) 0 3.5rem }
.shelf-heading { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; margin-bottom:1.15rem }
.page-title { margin:0; font-size:clamp(1.75rem,4vw,2.7rem); line-height:1.06; letter-spacing:-.045em }
.intro { max-width:34rem; margin:.45rem 0 0; color:var(--muted) }
.offer-count { flex:none; margin:0 0 .15rem; color:var(--muted); font-size:.9rem }
.offer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem }
.offer-card { --accent:#176b45; position:relative; min-height:340px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:var(--shadow); transition:transform .2s ease,box-shadow .2s ease }
.offer-card::before { content:""; height:5px; background:var(--accent) }
.offer-card:hover { transform:translateY(-3px); box-shadow:0 18px 48px rgba(17,47,30,.12) }
.welcome-card { --accent:#2589dc; isolation:isolate; background:linear-gradient(145deg,#f7fbff 0%,#dceeff 100%) }
.welcome-card .card-body { position:relative; overflow:hidden; padding:1.15rem 1.25rem 10.75rem; text-align:center }
.welcome-kicker { display:block; margin-bottom:.35rem; color:#176aa9; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase }
.welcome-card .card-title { font-size:1.28rem }
.welcome-copy { position:relative; z-index:2; margin:.6rem auto 0; max-width:19rem; color:#3f5d72; font-size:.93rem }
.welcome-visual { position:absolute; z-index:1; inset:auto 0 0; height:11rem; overflow:hidden; pointer-events:none }
.welcome-visual img { position:absolute; left:50%; bottom:-4.5rem; width:250px; height:auto; transform:translateX(-50%); filter:drop-shadow(0 0 7px rgba(255,255,255,.98)) drop-shadow(0 0 18px rgba(255,255,255,.82)); user-select:none }
.mail-card { --accent:#2589dc; background:linear-gradient(145deg,#f7fbff 0%,#dceeff 100%) }
.mail-card .description { margin-bottom:.8rem }
.mail-form { display:flex; flex-direction:column; gap:.65rem; margin-top:auto }
.mail-label { color:var(--ink); font-size:.84rem; font-weight:760 }
.mail-input { width:100%; min-height:44px; border:1px solid #abc9df; border-radius:12px; background:#fff; color:var(--ink); padding:.7rem .8rem; font:inherit }
.mail-input:focus { border-color:var(--accent); outline:3px solid color-mix(in srgb,var(--accent) 26%,white) }
.mail-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:0; border-radius:12px; background:var(--ink); color:#fff; padding:.7rem .9rem; font:inherit; font-size:.92rem; font-weight:760; cursor:pointer; transition:background .2s ease }
.mail-button:hover { background:var(--green-dark) }
.mail-button:focus-visible { outline:3px solid #8bcca9; outline-offset:3px }
.mail-button:disabled { cursor:wait; opacity:.7 }
.mail-button svg { width:18px; height:18px }
.mail-fine-print { margin:0; color:var(--muted); font-size:.76rem; line-height:1.4 }
.mail-message { min-height:1.35rem; margin:0; font-size:.82rem; font-weight:700 }
.mail-message.success { color:#0c6b3d }
.mail-message.error { color:#a33a2d }
.bot-field { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important }
.card-body { height:100%; display:flex; flex-direction:column; padding:1.25rem }
.card-top { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:1rem }
.card-actions { display:flex; align-items:center; gap:.45rem }
.icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--accent) 13%,white); color:var(--accent) }
.icon svg { width:21px; height:21px }
.category { padding:.3rem .62rem; border-radius:999px; background:#f1f4f0; color:var(--muted); font-size:.76rem; font-weight:750; letter-spacing:.035em; text-transform:uppercase }
.share-link { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#f1f4f0; color:var(--muted); transition:background .2s ease,color .2s ease }
.share-link:hover { background:color-mix(in srgb,var(--accent) 13%,white); color:var(--accent) }
.share-link:focus-visible { outline:3px solid #8bcca9; outline-offset:2px }
.share-link svg { width:17px; height:17px }
.card-title { margin:0; font-size:1.28rem; line-height:1.2; letter-spacing:-.025em }
.description { margin:.65rem 0 1rem; color:var(--muted); font-size:.95rem }
.reward { margin:auto 0 0; padding:.9rem 1rem; border-radius:14px; background:color-mix(in srgb,var(--accent) 9%,white) }
.reward-label { display:block; color:var(--muted); font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase }
.reward-value { display:block; margin-top:.1rem; color:var(--accent); font-size:1.08rem; font-weight:800 }
.details { margin:.75rem 0 0; color:var(--muted); font-size:.82rem; white-space:pre-line }
.offer-link,.offer-unavailable { min-height:44px; display:inline-flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:.7rem .9rem; border-radius:12px; font-size:.92rem; font-weight:760 }
.offer-link { background:var(--ink); color:#fff; text-decoration:none; transition:background .2s ease }
.offer-link:hover { background:var(--green-dark) }
.offer-link:focus-visible { outline:3px solid #8bcca9; outline-offset:3px }
.offer-link svg { width:18px; height:18px }
.offer-unavailable { justify-content:center; background:#eef1ed; color:#738077 }
.status { grid-column:1/-1; margin:2rem 0; padding:1rem; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--muted); text-align:center }
footer { padding:1.25rem 0 2.2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem }
.share-strip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; margin-bottom:1rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:center }
.share-copy { margin:0; color:var(--ink); font-size:.95rem; font-weight:750 }
.share-widget { width:100%; min-width:0; max-width:100%; min-height:38px; display:flex; align-items:center; justify-content:center }
.share-widget > * { max-width:100% }
.share-fallback { margin:0; overflow-wrap:anywhere }
.footer-note { margin:0 }
.offer-page { width:min(560px,calc(100% - 2rem)); padding-top:1.4rem }
.breadcrumbs { margin:0 0 1rem; font-size:.88rem }
.breadcrumbs a { color:var(--green-dark); font-weight:700; text-decoration-thickness:.08em; text-underline-offset:.16em }
.offer-page .offer-card:hover { transform:none; box-shadow:var(--shadow) }
.offer-page .share-strip { margin-top:1rem; box-shadow:0 8px 24px rgba(17,47,30,.05) }
.not-found { padding:clamp(2rem,7vw,5rem) 0; text-align:center }
.not-found .intro { margin:.75rem auto 1.5rem }
.home-link { display:inline-flex; border-radius:12px; background:var(--ink); color:#fff; padding:.7rem 1rem; font-weight:750; text-decoration:none }
@media (max-width:880px) { .offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:580px) { .header-inner{min-height:58px}.header-note{display:none}.shelf-heading{align-items:start;flex-direction:column;gap:.4rem}.offer-grid{grid-template-columns:1fr}.offer-card{min-height:0}.welcome-card{min-height:340px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important } }