[hidden]{display:none!important}
:root{
 --night:#0d2766;--deep:#081b47;--paper:#f7f2e9;--card:#fffdf8;--ink:#142238;--body:#3d4656;--muted:#5a6476;
 --line:#e2dacb;--field:#cfc6b5;--clay:#c23f68;--clay-dark:#a5304f;--gold:#ee5f89;--gold-hover:#f47a9e;--green:#1d7347;--green-bg:#e9f3ec;--err:#a32020;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans Tamil',system-ui,sans-serif;font-size:16px;line-height:1.65}
img{max-width:100%;display:block}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:var(--clay)}
h1,h2,h3{font-family:'Noto Sans Tamil',sans-serif;font-weight:800;line-height:1.35;margin:0;letter-spacing:-.005em}
p{margin:0}
.wrap{max-width:560px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--deep);padding:10px 14px;z-index:20;border-radius:6px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid #ee5f89;outline-offset:2px}

/* top */
.top{background:var(--night);color:var(--paper);display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand{color:#fffdf8;text-decoration:none;font-weight:800;letter-spacing:.01em;font-family:'Barlow Condensed',Impact,sans-serif;font-size:26px;line-height:1}
.top-link{color:var(--gold);font-size:14px;text-decoration:none;min-height:44px;display:flex;align-items:center}

/* buttons */
.btn{display:flex;justify-content:center;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:4px;font:inherit;font-weight:800;font-size:17px;text-decoration:none;cursor:pointer;border:0;text-align:center;line-height:1.3}
.btn.gold{background:var(--gold);color:var(--deep);min-height:56px;font-size:18px}.btn.gold:hover{background:var(--gold-hover)}
.btn.ghost{border:1.5px solid rgba(248,244,235,.55);color:var(--paper);background:transparent;font-weight:600;font-size:16px}
.btn.clay{background:var(--clay);color:#fffdf8}
.btn.clay:hover{background:var(--clay-dark)}
.btn.green{background:var(--green);color:#fff}
.btn.outline{background:transparent;border:1.5px solid var(--clay);color:var(--clay);min-height:46px;font-size:15px}
.btn.dashed{width:100%;background:transparent;border:1.5px dashed var(--clay);color:var(--clay);font-size:16px;margin:4px 0 16px}
.btn.text{background:transparent;color:var(--clay);font-weight:600;font-size:15px;min-height:44px;margin-top:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* hero */
.hero{background:var(--night);color:var(--paper);padding:24px 0 36px}
.hero .wrap{display:flex;flex-direction:column;gap:16px}
.badge{display:flex;align-items:center;gap:8px;color:var(--gold);font-weight:600;font-size:14px}
.badge svg{stroke:var(--gold)}
.kicker{color:var(--gold);font-size:16px;margin-bottom:-8px}
.hero h1{font-size:clamp(28px,8vw,40px);font-weight:800;color:#fffdf8}
.lede{font-size:17px;color:#dfe5f2}
.cover{margin:8px auto 4px;width:min(62%,250px)}
.cover img{width:100%;height:auto;border-radius:3px;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.price{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.price b{font-size:36px;line-height:1.2}
.price span{font-size:14px;color:#dfe5f2}
.cta-stack{display:flex;flex-direction:column;gap:10px}
.cutoff{text-align:center;font-size:14px;color:var(--gold)}
.cutoff b{color:#fff}.cutoff{color:#f6b3c7!important}

/* sections */
.band{padding:40px 0 32px}
.band h2,.gets h2,.order h2,.pledge h2{font-size:24px;margin-bottom:12px}
.band p{color:var(--body)}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:18px 0 8px}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;filter:sepia(.15)}
.small{font-size:13px;color:var(--muted)}
.facts{list-style:none;padding:0;margin:18px 0 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.facts li{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 6px;text-align:center;display:flex;flex-direction:column}
.facts b{font-size:22px;color:var(--clay);line-height:1.3}
.facts span{font-size:13px;color:var(--body)}
.note{font-size:14px;color:var(--muted)!important}

.quote{background:#e9edf5;padding:32px 0}
.quote blockquote{margin:0 0 16px;padding:0}
.quote blockquote p{font-family:'Kavivanar','Noto Serif Tamil',serif;font-size:21px;line-height:1.7;color:var(--night)}
.quote footer{font-size:14px;color:var(--muted);margin-top:8px}
.quote .wrap>p{color:var(--body)}

.gets{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0}
.gets ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:18px}
.gets li{display:flex;gap:14px;align-items:flex-start}
.gets svg{width:28px;height:28px;stroke:var(--clay);margin-top:2px}
.gets b{display:block}
.gets span{font-size:15px;color:var(--body)}

/* order */
.order{padding:40px 0 32px;outline:none}
.steps{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps li>span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--clay);color:#fffdf8;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:1px}
.steps.tight{margin:18px 0}
.late-notice{background:#fbeaea;border:1px solid #e4b4b4;color:#7a1d1d;border-radius:6px;padding:14px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px;margin:0 0 14px;min-width:0}
fieldset.card{display:flex;flex-direction:column}
legend{font-weight:700;color:var(--clay);padding:0;float:left;width:100%;margin-bottom:6px}
.recipient{position:relative}
.remove{position:absolute;top:12px;right:12px;background:transparent;border:0;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;min-height:44px;min-width:44px;cursor:pointer}
label{font-size:14px;margin:10px 0 4px;display:block}
input,textarea,select{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:6px;width:100%;padding:10px 12px;min-height:46px}
textarea{resize:vertical;min-height:0}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.field-error{color:var(--err);font-size:13px;margin-top:4px}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
.error-box{background:#fbeaea;border:1px solid #e4b4b4;border-radius:6px;padding:14px;margin-bottom:14px;color:#7a1d1d}
.error-box ul{margin:6px 0 0;padding-left:18px;font-size:14px}
.error-box a{color:#7a1d1d}
.bulk{background:var(--green-bg);border:1px solid #a9cdb6;border-radius:6px;padding:18px;margin:0 0 16px;display:flex;flex-direction:column;gap:10px;color:#24402f}
.bulk b{color:#174a2f}
.bulk p{font-size:15px}
.totals>div{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--body)}
.totals .grand{color:var(--ink);font-weight:700;font-size:19px;border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--body);margin:4px 0 18px;cursor:pointer}
.check input{width:22px;height:22px;min-height:0;flex:none;margin-top:2px;accent-color:var(--clay)}
#to-pay{width:100%;min-height:56px;font-size:18px}

.pay h3{font-size:21px;margin-bottom:14px;outline:none}
.pay .btn.green{width:100%;min-height:56px;font-size:18px}
.pay-amount{font-size:17px;margin-bottom:12px}
.pay-amount b{font-size:24px}
.upi{display:flex;flex-direction:column;gap:6px}
.upi-label{font-size:13px;color:var(--muted);letter-spacing:.04em}
.upi-id{font-size:20px;font-weight:700;word-break:break-all;font-family:system-ui,sans-serif}
.upi-name{font-size:14px;color:var(--body)}
.qr-wrap{margin-top:6px;font-size:14px}
.qr-wrap summary{cursor:pointer;color:var(--clay);min-height:44px;display:flex;align-items:center}
#upi-qr{padding:8px 0}
#upi-qr img,#upi-qr canvas{width:184px;height:184px}
.upi-missing{color:#7a1d1d;font-size:15px}

.deadline{padding:0 0 8px}
.deadline .row{display:flex;gap:14px;align-items:center;background:var(--night);color:var(--paper);border-radius:6px;padding:20px}
.deadline svg{width:34px;height:34px;stroke:var(--gold)}
.deadline b{display:block;color:#f6b3c7}
.deadline span{font-size:15px}
.deadline span b{display:inline;color:#fff}
.pledge{padding:36px 0}
.pledge p{color:var(--body)}
.foot{border-top:1px solid var(--line);padding:20px 0 110px;font-size:13px;color:var(--muted)}
.foot p{margin:2px 0}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(31,43,82,.12);display:flex;gap:10px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));transition:transform .25s}
.sticky.tucked{transform:translateY(110%)}
.sticky-price{display:flex;flex-direction:column;line-height:1.2;flex:none}
.sticky-price b{font-size:18px}
.sticky-price span{font-size:12px;color:var(--muted)}
.sticky .btn.clay{flex:1;min-height:50px;font-size:16px}
.sticky .btn.icon{width:50px;min-height:50px;padding:0;flex:none}

@media (min-width:761px){
 .hero{padding:40px 0 48px}
 .sticky{max-width:560px;margin:0 auto;border:1px solid var(--line);border-bottom:0;border-radius:6px 12px 0 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky{transition:none}}

/* saved-order states */
.btn.wide{width:100%;margin-top:10px}
.pay .done{margin-top:14px;border-color:var(--green);background:var(--green-bg)}
.pay .done b{display:block;margin-bottom:4px;color:var(--green)}

/* desktop layout */
@media (min-width:960px){
 .wrap{max-width:1120px;padding:0 40px}
 .top{padding:14px max(40px,calc((100% - 1120px)/2 + 40px))}
 .sticky{display:none}
 .foot{padding-bottom:32px}

 .hero{padding:56px 0 64px}
 .hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:64px;row-gap:18px;align-items:start}
 .hero .wrap>*{grid-column:1}
 .hero .cover{grid-column:2;grid-row:1 / span 8;align-self:center;width:min(100%,340px);margin:0 auto}
 .hero h1{font-size:52px;line-height:1.25}
 .lede{font-size:19px;max-width:34em}
 .price{flex-direction:row;align-items:baseline;gap:12px;text-align:left}
 .price b{font-size:40px}
 .price span{font-size:15px}
 .cta-stack{flex-direction:row;gap:12px}
 .cta-stack .btn{padding:0 28px;white-space:nowrap}
 .cutoff{text-align:left}

 .band{padding:72px 0 64px}
 .band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}
 .band .wrap>*{grid-column:1}
 .band .strip{grid-column:2;grid-row:1 / span 4;margin:0;gap:10px}
 .band .small{grid-column:2;grid-row:5;margin-top:8px}
 .band h2,.gets h2,.order h2,.pledge h2{font-size:30px;margin-bottom:16px}
 .band p{font-size:17px}

 .quote{padding:64px 0}
 .quote .wrap{max-width:860px}
 .quote blockquote p{font-size:26px}
 .quote .wrap>p{font-size:17px}

 .gets{padding:56px 0}
 .gets ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px 40px}

 .order{padding:72px 0 56px}
 .order .wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:56px;align-items:start}
 .order .wrap>*{grid-column:1}
 .order #gift-form,.order .pay{grid-column:2;grid-row:1 / span 4}
 .order .steps{position:sticky;top:24px}
 .order .late-notice{grid-row:3}
 .order #gift-form,.order .pay{max-width:640px}

 .deadline .row{padding:24px 32px}
 .pledge{padding:56px 0 64px}
 .pledge p{max-width:44em;font-size:17px}
}