/* DesiFitCheck design system: "Desi Pop".
   Indian pop culture rendered on a clean modern grid: truck-art colour, bandhani dots,
   marigold toran, sticker shadows, a flat jharokha arch. Bold grotesk (Bricolage Grotesque),
   Baloo 2 for Hindi and sticker text, system-ui for body.
   Shared by the app (index.html), privacy, 404 and the server-rendered pages (/o/:slug, 404).
   Base layer: override per page in app.css or the page's own <style>.
   Light = :root; dark follows the device unless data-theme="light" is set on <html>,
   and data-theme="dark" forces it. Fonts are self-hosted: no external requests. */

@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Baloo 2";src:url("/fonts/baloo-2-devanagari.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Baloo 2";src:url("/fonts/baloo-2-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root,.dfc{
  --bg:#FFF6EA;--bg-sunk:#FBEBD6;--surface:#FFFFFF;
  --ink:#1B1020;--ink-2:#4A3B4F;--ink-3:#6B5A70;
  --line:#EADCC8;--line-strong:#1B1020;
  --edge:#1B1020;           /* sticker outline */
  --focus:#1B1020;--halo:#FFF6EA;  /* two-tone focus ring: ink ring + cream halo gap (cream ring + dark halo in dark mode); works on any fill */
  --gutter:16px;--maxw:1200px;     /* shared page container: .wrap / header / sections all use these */
  --accent:#C20064;--accent-ink:#B8005F;--peacock-ink:#00706A;--accent-solid:#D4006F;--accent-press:#A80058;--on-accent:#FFFFFF;--accent-tint:#FFE0EF;
  --gold:#FFB21A;--gold-ink:#8A5300;--gold-tint:#FFF0C7;--gold-hi:#FFC94D;
  --peacock:#00796F;--peacock-solid:#00796F;--peacock-tint:#D5F2EC;
  --mehendi:#C6E04A;
  --ok:#1A7038;--warn:#8A5200;--err:#C0182E;--err-tint:#FFE3E6;
  --sh-1:2px 2px 0 var(--ink);
  --sh-2:4px 4px 0 var(--ink);
  --sh-3:0 -10px 30px -12px rgba(27,16,32,.35);
  --sh-h:5px 5px 0 var(--ink);--sh-0:1px 1px 0 var(--ink);--edge-hard:#1B1020;
  --block:#1B1020;--block-2:#2E1B38;--on-block:#FFF3E6;--on-block-2:#D9C8DC;
  --pat:rgba(212,0,111,.13);--pat-gold:rgba(255,178,26,.55);
  --arch-bg:#00796F;
  --r-sm:10px;--r-md:18px;--r-lg:28px;--r-pill:999px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
  --ease:cubic-bezier(.2,.8,.2,1);--d-1:150ms;--d-2:240ms;--d-3:400ms;
  --f-display:"Bricolage Grotesque","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-desi:"Baloo 2","Noto Sans Devanagari",system-ui,sans-serif;
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari","Noto Sans",sans-serif;
  --t-display:clamp(3.25rem,15.5vw,5.75rem);
  --t-h1:clamp(2rem,8vw,2.75rem);
  --t-h2:clamp(1.5rem,5vw,1.875rem);
  --t-h3:1.1875rem;--t-body:1rem;--t-small:.9375rem;--t-micro:.875rem;
  /* legacy names still referenced by the app screens and the shared page */
  --wine:var(--block);--wine-2:var(--block-2);
  --foil:var(--gold);
  --toran:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40' viewBox='0 0 64 40'%3E%3Cpath d='M0 3h64' stroke='%231B1020' stroke-width='2'/%3E%3Ccircle cx='16' cy='20' r='10' fill='%23FFB21A' stroke='%231B1020' stroke-width='2'/%3E%3Ccircle cx='16' cy='20' r='3.5' fill='%23D4006F'/%3E%3Cpath d='M48 5c-8 6-8 18 0 29 8-11 8-23 0-29z' fill='%2300796F' stroke='%231B1020' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M48 12v16' stroke='%231B1020' stroke-width='1.5'/%3E%3C/svg%3E");
  color-scheme:light;
}
[data-theme="dark"],[data-theme="dark"] .dfc,.dfc.dark{
  --bg:#120A17;--bg-sunk:#0C060F;--surface:#1E1426;
  --ink:#FFF3E6;--ink-2:#DCCBDD;--ink-3:#B4A1B8;
  --line:#7C6593;--line-strong:rgba(255,243,230,.5);
  --edge:rgba(255,243,230,.5);--focus:#FFF3E6;--halo:#120A17;
  --accent:#FF63B0;--accent-ink:#FF63B0;--peacock-ink:#3FD1BF;--accent-solid:#D4006F;--accent-press:#A80058;--on-accent:#FFFFFF;--accent-tint:#3E1530;
  --gold:#FFB21A;--gold-ink:#FFD36B;--gold-tint:#2E2030;--gold-hi:#FFC94D;
  --peacock:#3FD1BF;--peacock-solid:#00796F;--peacock-tint:#0F3A36;
  --mehendi:#C6E04A;
  --ok:#6FD58E;--warn:#F0B35A;--err:#FF8A94;--err-tint:#3F151C;
  --sh-1:2px 2px 0 #000;--sh-2:4px 4px 0 #000;--sh-3:0 -10px 30px -12px rgba(0,0,0,.8);--sh-h:5px 5px 0 #000;--sh-0:1px 1px 0 #000;--edge-hard:#000;
  --block:#2A1836;--block-2:#3B2349;--on-block:#FFF3E6;--on-block-2:#DCCBDD;
  --pat:rgba(255,79,163,.16);--pat-gold:rgba(255,178,26,.4);
  --arch-bg:#0B5F57;
  --toran:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40' viewBox='0 0 64 40'%3E%3Cpath d='M0 3h64' stroke='%23FFF3E6' stroke-opacity='.6' stroke-width='2'/%3E%3Ccircle cx='16' cy='20' r='10' fill='%23FFB21A' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='16' cy='20' r='3.5' fill='%23D4006F'/%3E%3Cpath d='M48 5c-8 6-8 18 0 29 8-11 8-23 0-29z' fill='%233FD1BF' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M48 12v16' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]),:root:not([data-theme="light"]) .dfc{
    --bg:#120A17;--bg-sunk:#0C060F;--surface:#1E1426;
    --ink:#FFF3E6;--ink-2:#DCCBDD;--ink-3:#B4A1B8;
    --line:#7C6593;--line-strong:rgba(255,243,230,.5);
    --edge:rgba(255,243,230,.5);--focus:#FFF3E6;--halo:#120A17;
    --accent:#FF63B0;--accent-ink:#FF63B0;--peacock-ink:#3FD1BF;--accent-solid:#D4006F;--accent-press:#A80058;--on-accent:#FFFFFF;--accent-tint:#3E1530;
    --gold:#FFB21A;--gold-ink:#FFD36B;--gold-tint:#2E2030;--gold-hi:#FFC94D;
    --peacock:#3FD1BF;--peacock-solid:#00796F;--peacock-tint:#0F3A36;
    --mehendi:#C6E04A;
    --ok:#6FD58E;--warn:#F0B35A;--err:#FF8A94;--err-tint:#3F151C;
    --sh-1:2px 2px 0 #000;--sh-2:4px 4px 0 #000;--sh-3:0 -10px 30px -12px rgba(0,0,0,.8);--sh-h:5px 5px 0 #000;--sh-0:1px 1px 0 #000;--edge-hard:#000;
    --block:#2A1836;--block-2:#3B2349;--on-block:#FFF3E6;--on-block-2:#DCCBDD;
    --pat:rgba(255,79,163,.16);--pat-gold:rgba(255,178,26,.4);
    --arch-bg:#0B5F57;
    --toran:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40' viewBox='0 0 64 40'%3E%3Cpath d='M0 3h64' stroke='%23FFF3E6' stroke-opacity='.6' stroke-width='2'/%3E%3Ccircle cx='16' cy='20' r='10' fill='%23FFB21A' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='16' cy='20' r='3.5' fill='%23D4006F'/%3E%3Cpath d='M48 5c-8 6-8 18 0 29 8-11 8-23 0-29z' fill='%233FD1BF' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M48 12v16' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
/* dark blocks (footer, app heroes) always use cream-on-aubergine; sticker shadows go gold so they read */
.on-dark{--focus:#FFF3E6;--halo:#1B1020;--edge:#FFF3E6;--line-strong:rgba(255,243,230,.5);--sh-1:2px 2px 0 var(--gold);--sh-2:4px 4px 0 var(--gold);--sh-h:5px 5px 0 var(--gold);--sh-0:1px 1px 0 var(--gold);--edge-hard:#000}

.dfc{margin:0;font-family:var(--f-ui);color:var(--ink);background:var(--bg);font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.dfc *,.dfc *::before,.dfc *::after{box-sizing:border-box}
:where(.dfc) :is(h1,h2,h3,h4,p,ul,ol,figure,dl,dd){margin:0;padding:0}
:where(.dfc) :is(ul,ol){list-style:none}
:where(.dfc) a{color:inherit}
.dfc :is(h1,h2,h3,.h1,.h2,.h3,.disp,.lede,.sec-sub,.hero-lede,.scr-lede,.sp-lede,.nf-p){text-wrap:balance}
.dfc :is(p,li,dd){text-wrap:pretty}
/* ONE focus ring for everything: 3px --focus ring, then a 3px --halo gap, both following border-radius.
   Drawn as outline (ring) + box-shadow (gap); sticker shadows are kept by listing them after the halo. */
.dfc :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.dfc :is(.btn,.chip,.otile,a.card,.row a.go,.foot-nav a,.sp-foot nav a,.navlink,.iconbtn,.seg button,.seg a,.sum-row,.flt-btn,.vs-btn,.mini-look,.lk-dot,.lk-pause,.pdisc>summary):focus-visible,
.dfc :is(input,textarea,select):focus-visible{box-shadow:0 0 0 3px var(--halo),var(--fsh,none)}
.dfc :is(.btn,.chip,a.card,.row a.go,.otile):focus-visible{--fsh:var(--sh-2)}
.dfc :is(.btn-sm,.chip,.row a.go):focus-visible{--fsh:var(--sh-1)}
.dfc .btn-quiet:focus-visible,.dfc .otile.t-steal:focus-visible{--fsh:none}
.dfc ::selection{background:var(--gold);color:#1B1020}
.screen{width:100%;min-height:100vh;min-height:100dvh;position:relative;overflow-x:clip;display:flex;flex-direction:column}
.pad{padding-left:var(--s-4);padding-right:var(--s-4)}

/* shared container: header, hero, sections, footer, privacy and 404 all hang off the same left edge */
@media (min-width:640px){:root,.dfc{--gutter:24px}}
@media (min-width:1024px){:root,.dfc{--gutter:32px}}
.wrap,.dfc .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}

/* dark mode: dark garment colours (black, navy, maroon, brown, charcoal) keep a light ring so they never vanish on dark chips/cards */
[data-theme="dark"] :is(.sw .dot,.mini-dot,.sw-mini i,.lc-sw i,.sum-row .mini-dot){box-shadow:inset 0 0 0 2px rgba(255,243,230,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.sw .dot,.mini-dot,.sw-mini i,.lc-sw i,.sum-row .mini-dot){box-shadow:inset 0 0 0 2px rgba(255,243,230,.7)}}
[data-theme="dark"] .sw .dot{box-shadow:inset 0 0 0 2px rgba(255,243,230,.7),var(--sh-1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sw .dot{box-shadow:inset 0 0 0 2px rgba(255,243,230,.7),var(--sh-1)}}

/* type */
.disp{font-family:var(--f-display);font-weight:800;letter-spacing:-.022em;line-height:1.02;text-wrap:balance;font-kerning:normal;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.disp em,.it{font-style:normal;font-weight:800;color:var(--accent)}
.h1{font-size:var(--t-h1)}.h2{font-size:var(--t-h2)}.h3{font-size:var(--t-h3);font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.eyebrow{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.label{font:700 .875rem/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.lede{font-size:1.0625rem;color:var(--ink-2);line-height:1.55}
.small{font-size:var(--t-small);color:var(--ink-2)}
.micro{font-size:var(--t-micro);color:var(--ink-2)}
.dev,.hindi{font-family:var(--f-desi);font-weight:600}
.dev{color:var(--peacock);font-size:1.0625rem}
.why{font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.price{font-variant-numeric:tabular-nums;font-weight:700}
.foil{color:var(--accent);font-style:normal}
.hl{background:linear-gradient(transparent 58%,var(--gold) 58% 92%,transparent 92%);padding:0 .08em;color:inherit}
.outline-word{color:var(--gold);-webkit-text-stroke:.07em var(--edge-hard,#1B1020);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--edge-hard,#1B1020)}

/* chrome */
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 var(--s-2) 0 var(--s-4)}
.topbar.back{padding-left:var(--s-2)}
.wordmark{font-family:var(--f-display);font-size:1.45rem;font-weight:800;letter-spacing:-.04em;text-decoration:none;color:var(--ink);line-height:1;display:inline-flex;align-items:center;min-height:44px}
.wordmark .foil,.wordmark .desi{color:var(--accent);font-style:normal;font-weight:800}
.on-dark .wordmark,.on-dark.wordmark{color:var(--on-block)}
.on-dark .wordmark .foil,.on-dark .wordmark .desi{color:#FF4FA3}
.iconbtn{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;transition:background var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.iconbtn:active{transform:scale(.92)}
.toplink{font-size:var(--t-small);font-weight:700;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;padding:0 var(--s-3);color:var(--ink-2)}
.steps{display:flex;gap:6px;align-items:center}
.steps i{width:28px;height:6px;border-radius:3px;background:var(--line)}
.steps i.on{background:var(--accent)}
.bar{position:sticky;bottom:0;margin-top:auto;padding:var(--s-5) var(--s-4) var(--s-5);background:linear-gradient(to top,var(--bg) 78%,transparent);display:flex;flex-direction:column;gap:var(--s-3);z-index:5}
.trust{display:flex;gap:var(--s-2);align-items:center;justify-content:center;font-size:var(--t-small);color:var(--ink-2)}
.trust svg{flex:none;color:var(--ok)}

/* buttons: pill, 2px ink outline, hard sticker shadow, press = sink */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-5);border-radius:var(--r-pill);border:2px solid var(--edge);background:var(--surface);color:var(--ink);box-shadow:var(--sh-2);font:700 1.0625rem/1.1 var(--f-display);letter-spacing:-.01em;text-decoration:none;cursor:pointer;text-align:center;transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),background var(--d-1) var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active{transform:translate(3px,3px);box-shadow:var(--sh-0)}
.btn svg{flex:none}
.btn-primary,.btn-gold{background:var(--accent-solid);color:var(--on-accent)}
.btn-gold{min-height:58px;font-size:1.1875rem;padding:0 28px}
.btn-secondary{background:var(--surface);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 18px;font-size:1rem;box-shadow:var(--sh-1)}
.btn-quiet{background:transparent;color:var(--accent);min-height:48px;padding:0 var(--s-3);border-color:transparent;box-shadow:none}
.btn-quiet:active{transform:none;box-shadow:none;background:var(--accent-tint)}
.btn-block{width:100%}
.btn.is-loading{pointer-events:none}
.on-dark .btn-secondary{background:var(--surface);color:var(--ink)}
.on-dark .btn-quiet{color:var(--gold);background:transparent}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}

/* chips + swatches */
.chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);border:2px solid var(--edge);background:var(--surface);color:var(--ink);font:600 .9375rem/1 var(--f-ui);cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--sh-1);transition:background var(--d-1) var(--ease),transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
.chip:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:700}
.chip[aria-pressed="true"]::before,.chip.on::before{content:"";width:10px;height:5px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg) translateY(-1px)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding:4px var(--s-4) 8px;margin:0 calc(var(--s-4) * -1);scrollbar-width:none}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px;padding:6px 4px;border:0;background:transparent;color:var(--ink-2);font:600 var(--t-micro)/1.1 var(--f-ui);cursor:pointer;border-radius:var(--r-md)}
.sw .dot{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(27,16,32,.55),var(--sh-1);display:grid;place-items:center;transition:transform var(--d-2) var(--ease)}
.sw:active .dot{transform:scale(.9)}
.sw[aria-pressed="true"]{color:var(--ink);font-weight:800}
.sw[aria-pressed="true"] .dot{outline:3px solid var(--focus);outline-offset:3px}
.sw[aria-pressed="true"] .dot::after{content:"";width:14px;height:8px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translateY(-2px);filter:drop-shadow(0 0 1px rgba(0,0,0,.8))}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-pill);padding:4px;gap:4px;box-shadow:var(--sh-1)}
.seg button,.seg a{min-height:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:700 var(--t-small)/1.1 var(--f-ui);cursor:pointer;display:grid;place-items:center;text-decoration:none;transition:background var(--d-1) var(--ease)}
.seg [aria-pressed="true"],.seg .on{background:var(--ink);color:var(--bg)}
.on-dark .seg{background:transparent}
.on-dark .seg button,.on-dark .seg a{color:var(--on-block)}
.on-dark .seg [aria-pressed="true"],.on-dark .seg .on{background:var(--gold);color:#1B1020}

/* surfaces */
.card{background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.arch{border-radius:var(--arch-r,171px) var(--arch-r,171px) 24px 24px;position:relative;overflow:hidden;border:2px solid var(--edge)}
.buti,.arch{background-color:var(--arch-bg)}
.buti{background-image:radial-gradient(circle,rgba(255,255,255,.2) 2px,transparent 2.6px),radial-gradient(circle,rgba(255,178,26,.55) 1.6px,transparent 2.2px);background-size:22px 22px,22px 22px;background-position:0 0,11px 11px}
.spot{background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(255,243,230,.18),transparent 70%)}
.frame{box-shadow:var(--sh-2)}
.ring{box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--edge)}
.zari{height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 16px);border-radius:2px}
.dots{background-image:radial-gradient(circle,var(--pat-gold) 1.6px,transparent 2.2px);background-size:14px 14px}
.temple{height:18px;background:var(--toran) repeat-x 0 0/32px 20px}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;height:20px}
.orn::before,.orn::after{content:"";flex:1;height:0;border-top:2px dotted var(--gold);opacity:.9}
.orn i{width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--edge);flex:none}
.sun{background:radial-gradient(circle,var(--gold) 0 40%,transparent 41%)}


/* patterns: regional block-print textures. Each sets only background-image (+size/position) so the
   element's own background-color stays; colour comes from --pat (set it on the element to retune). */
:where(.pat-bandhani,.pat-kolam,.pat-ajrakh,.pat-leheriya,.pat-ikat,.pat-kantha){--pat:rgba(255,178,26,.5)}
[data-theme="dark"] :where(.pat-bandhani,.pat-kolam,.pat-ajrakh,.pat-leheriya,.pat-ikat,.pat-kantha){--pat:rgba(255,178,26,.42)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :where(.pat-bandhani,.pat-kolam,.pat-ajrakh,.pat-leheriya,.pat-ikat,.pat-kantha){--pat:rgba(255,178,26,.42)}}
/* Gujarat bandhani: tie-dye dot grid, two interleaved dot sizes */
.pat-bandhani{background-image:radial-gradient(circle,var(--pat) 2px,transparent 2.6px),radial-gradient(circle,var(--pat) 1.2px,transparent 1.8px);background-size:22px 22px;background-position:0 0,11px 11px}
/* Tamil kolam: pulli dots inside a looping diamond lattice */
.pat-kolam{background-image:radial-gradient(circle,var(--pat) 2px,transparent 2.6px),radial-gradient(circle,var(--pat) 2px,transparent 2.6px),linear-gradient(45deg,transparent 46%,var(--pat) 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,var(--pat) 46% 54%,transparent 54%);background-size:28px 28px;background-position:14px 0,0 14px,0 0,0 0}
/* Sindh / Kutch ajrakh: eight-line star lattice with a ring at each hub */
.pat-ajrakh{background-image:radial-gradient(circle,transparent 0 3px,var(--pat) 3px 4.6px,transparent 4.6px),linear-gradient(45deg,transparent 48%,var(--pat) 48% 52%,transparent 52%),linear-gradient(-45deg,transparent 48%,var(--pat) 48% 52%,transparent 52%),linear-gradient(90deg,transparent 49%,var(--pat) 49% 51%,transparent 51%),linear-gradient(transparent 49%,var(--pat) 49% 51%,transparent 51%);background-size:30px 30px}
/* Rajasthani leheriya: rolling diagonal wave stripes */
.pat-leheriya{background-image:radial-gradient(circle at 50% 100%,transparent 0 9px,var(--pat) 9px 11px,transparent 11px),radial-gradient(circle at 50% 0,transparent 0 9px,var(--pat) 9px 11px,transparent 11px);background-size:40px 20px;background-position:0 0,20px 10px}

/* Odisha / Telangana ikat: resist-dyed diamond chevrons with feathered (blurred) edges, as soft stacked zig-zags */
.pat-ikat{background-image:linear-gradient(135deg,transparent 40%,var(--pat) 47% 53%,transparent 60%),linear-gradient(45deg,transparent 40%,var(--pat) 47% 53%,transparent 60%),radial-gradient(ellipse 5px 8px,var(--pat) 0 40%,transparent 100%);background-size:26px 26px,26px 26px,26px 26px;background-position:0 0,0 0,13px 13px}
/* Bengal kantha: rows of running stitch, alternate rows offset so the lines read as hand-quilted waves */
.pat-kantha{background-image:radial-gradient(ellipse 3.6px 1.1px,var(--pat) 92%,transparent),radial-gradient(ellipse 3.6px 1.1px,var(--pat) 92%,transparent);background-size:14px 12px;background-position:0 0,7px 6px}

/* bandhani: tie-dye dot grid as a background texture */
.bandhani{background-image:radial-gradient(circle,var(--pat) 2.4px,transparent 2.9px),radial-gradient(circle,var(--pat) 1.4px,transparent 1.9px);background-size:28px 28px,28px 28px;background-position:0 0,14px 14px}
/* toran: marigold garland strip */
.toran{display:block;height:40px;background:var(--toran) repeat-x 0 0/64px 40px}
.toran.thin{height:20px;background-size:32px 20px}
/* slim: the top-bar garland shared by every page after the landing (app screens, privacy, 404, shared look) */
.toran.slim{height:12px;background-size:19.2px 12px}

/* stickers + tags */
.sticker{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:2px 14px 0;border:2px solid var(--edge);border-radius:var(--r-pill);background:var(--gold);color:#1B1020;box-shadow:var(--sh-1);font:700 1.0625rem/1.1 var(--f-desi);white-space:nowrap;transform:rotate(var(--rot,-3deg))}
.sticker.mehendi{background:var(--mehendi);color:#1B1020}
.sticker.pink{background:var(--accent-solid);color:#fff}
.sticker.peacock{background:var(--peacock-tint);color:var(--peacock-ink)}
.sticker.cream{background:var(--surface);color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--gold-tint);color:var(--gold-ink);font:700 var(--t-micro)/1 var(--f-ui);letter-spacing:.03em;border:1.5px solid currentColor}
.tag.red{background:var(--accent-tint);color:var(--accent-ink)}
.tag.err{background:var(--err-tint);color:var(--err)}
.tag.ok{background:var(--peacock-tint);color:var(--peacock-ink)}
.note{display:flex;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-md);background:var(--gold-tint);border:2px dashed var(--line-strong);font-size:var(--t-small);color:var(--ink);line-height:1.5}
.note svg{flex:none;margin-top:2px;color:var(--gold-ink)}
.note.err{background:var(--err-tint);color:var(--ink);border-color:var(--err)}
.note.err svg{color:var(--err)}

/* garment tiles / item rows */
.tile{width:56px;height:56px;border-radius:var(--r-sm);background:var(--accent-tint);border:2px solid var(--edge);display:grid;place-items:center;flex:none}
.tile svg{width:38px;height:38px}
.row{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-bottom:2px dotted var(--line-strong)}
.row:last-child{border-bottom:0}
.row .nm{font-weight:700;line-height:1.25}
.row .sub{font-size:var(--t-small);color:var(--ink-2)}
.row a.go,.row .go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);text-decoration:none;font-weight:700;font-size:var(--t-small);color:#1B1020;border:2px solid var(--edge);background:var(--gold);box-shadow:var(--sh-1);transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
.row a.go:active{transform:translate(1px,1px);box-shadow:none}
.row.gone .nm{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--ink-3)}
.itemcard{display:flex;flex-direction:column;gap:var(--s-2);text-decoration:none;color:var(--ink);transition:transform var(--d-2) var(--ease)}
.itemcard:active{transform:scale(.97)}
.itemcard .pic{aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--gold-tint);border:2px solid var(--edge);box-shadow:var(--sh-2);display:grid;place-items:center;position:relative;overflow:hidden}
.itemcard .pic svg{width:58%;height:58%;filter:drop-shadow(0 6px 6px rgba(27,16,32,.2))}
.itemcard .pic .sw-mini{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-pill);padding:4px 10px 4px 5px;font-size:var(--t-micro);font-weight:700;color:var(--ink)}
.sw-mini i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(27,16,32,.4)}

/* flat-lay */
.lay-wrap{position:relative}
.lay{position:absolute;color:var(--c);transform:rotate(var(--r,0deg));filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35));animation:drop var(--d-3) var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
.lay svg{width:100%;height:100%;display:block}

/* sheet, toast, skeleton */
.sheet{background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);padding:var(--s-3) var(--s-4) var(--s-5)}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line-strong);margin:0 auto var(--s-4)}
.toast{display:flex;align-items:center;gap:var(--s-3);background:var(--ink);color:var(--bg);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:2px solid var(--edge);box-shadow:var(--sh-2);font-size:var(--t-small);font-weight:700;min-height:52px}
.toast .btn-quiet{color:var(--gold);min-height:44px;margin-left:auto}
.skel{background:linear-gradient(90deg,var(--bg-sunk) 0,var(--line) 50%,var(--bg-sunk) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm)}

/* misc legacy helpers kept for the app screens */
.masthead{display:flex;justify-content:space-between;align-items:center;border-top:3px solid currentColor;padding:6px 0;font:800 var(--t-micro)/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.stamp{width:96px;height:96px;border-radius:50%;border:2px solid var(--edge);background:var(--gold);color:#1B1020;display:grid;place-items:center;text-align:center;padding:10px;font:700 .95rem/1.1 var(--f-desi);transform:rotate(-12deg);box-shadow:var(--sh-1)}
.numeral{font-family:var(--f-display);font-size:3.5rem;line-height:.9;font-weight:800;color:var(--accent)}
.block-gold{background:var(--gold);color:#1B1020}
.block-gold .eyebrow{color:#3d2a00}
.block-maroon{background:var(--accent-solid);color:#fff}
.block-maroon .eyebrow{color:#FFE0EF}


/* micro-interactions: springy press (sink, then overshoot back), desktop-only hover lift.
   Press-in is quick and flat; release uses an overshoot curve, 180ms. All of it is off under reduced motion. */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}
.btn,.chip,a.card,.itemcard,.otile,.row a.go,.foot-nav a,.pchips li{transition:transform 180ms var(--spring),box-shadow 180ms var(--spring),background-color var(--d-1) var(--ease),color var(--d-1) var(--ease)}
.btn:active,.chip:active,a.card:active,.row a.go:active,.otile:active{transition-duration:90ms,90ms,var(--d-1),var(--d-1);transition-timing-function:ease-out;transform:translate(3px,3px);box-shadow:var(--sh-0)}
.chip:active{box-shadow:0 0 0 var(--ink)}
.btn-quiet:active{transform:none;box-shadow:none}
.itemcard:active{transform:translate(2px,2px) scale(.98)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-h)}
  .btn-primary:hover,.btn-gold:hover{background:var(--accent-press)}
  .btn-secondary:hover{background:var(--gold-tint)}
  .btn-sm:hover{box-shadow:var(--sh-h)}
  .btn-quiet:hover{transform:none;box-shadow:none;background:var(--accent-tint)}
  .chip:hover{background:var(--gold-tint);transform:translate(-1px,-2px);box-shadow:var(--sh-2)}
  .chip[aria-pressed="true"]:hover,.chip.on:hover{background:var(--ink)}
  a.card:hover{transform:translate(-2px,-3px);box-shadow:var(--sh-h)}
  .itemcard:hover{transform:translateY(-3px) rotate(-.6deg)}
  .iconbtn:hover{background:var(--bg-sunk)}
  .btn:active,.chip:active,a.card:active,.row a.go:active{transform:translate(3px,3px);box-shadow:var(--sh-0)}
  .btn-quiet:active{transform:none;box-shadow:none}
}
/* disabled: solid sunk fill, full-opacity ink-2 text, 2px dashed ink-2 border, no shadow (ink-2 on bg-sunk is >= 7:1 in both themes) */
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"],.btn.is-disabled{background:var(--bg-sunk);color:var(--ink-2);border:2px dashed var(--ink-2);box-shadow:none;cursor:not-allowed;transform:none;opacity:1}
.btn:disabled:hover,.btn:disabled:active,.btn[disabled]:hover,.btn[disabled]:active,.btn[aria-disabled="true"]:hover,.btn[aria-disabled="true"]:active,.btn.is-disabled:hover,.btn.is-disabled:active{background:var(--bg-sunk);color:var(--ink-2);transform:none;box-shadow:none}
.btn:disabled.btn-gold,.btn:disabled.btn-primary,.btn:disabled.btn-secondary{background:var(--bg-sunk);color:var(--ink-2)}

/* tinted cards (note, why-box, shared why, disclosure): one treatment in both themes, 2px edge + sticker shadow on the tint */
:is(.note,.why-box,.sp-whyc,.disclose){border:2px solid var(--edge);box-shadow:var(--sh-1)}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-26px) rotate(calc(var(--r,0deg) * 3)) scale(.94)}to{opacity:1;transform:rotate(var(--r,0deg))}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes scan{0%{top:6%}100%{top:94%}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes marq{to{transform:translateX(-50%)}}
.rise{animation:rise var(--d-3) var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.pop{animation:pop var(--d-2) var(--ease) both;animation-delay:calc(var(--i,0) * 120ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn,.chip,a.card,.itemcard,.otile,.btn:hover,.btn:active,.chip:hover,.chip:active,a.card:hover,a.card:active,.itemcard:hover,.itemcard:active,.otile:hover,.otile:active{transition:none!important}
  .btn:hover,.chip:hover,a.card:hover,.itemcard:hover,.otile:hover{transform:none!important}
  .dfc *,.dfc *::before,.dfc *::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}