/* DhanaaDhan Lite — the public home page (index.html).
   Built on the house design system only: the surfaces, greys, three oranges, type roles and
   the hard "sticker" shadow of design-system/ and lite.css. No new colours:
     ink #161311 · cream #FFF7F0 · white · peach #FFEDE0 · divider #e6ddd4
     brand orange #FE6403: fills, and text on ink only (6.20:1). Ink on it (6.20:1).
     AA orange #BC4901: every orange text on a light surface (4.84:1 on cream).
     greys on light: #5c534d (7.08), #786E66 (4.69) · greys on ink: #b3a89f, #8a7f77 (4.74)
   Type roles: Baloo 2 800 display clamp(30px,4vw,52px); section heading clamp(18px,2.6vw,24px);
   Inter body 17.5/1.65 (nothing fixed above 20px); JetBrains Mono 700 for labels.
   Phone first. Motion only on the wall (and a short entrance), and none at all for
   prefers-reduced-motion. */

.hm{background:#FFF7F0}
.hm main{display:block}
.hm-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,5vw,32px);box-sizing:border-box}
.hm-ink{background:#161311;color:#FFF7F0}
.hm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hm-kicker{font:700 12px 'JetBrains Mono',monospace;letter-spacing:.12em;color:#BC4901;margin:0}
.hm-h1,.hm-h2,.hm-beat,.hm-shout,.hm-turn{font:800 clamp(30px,4vw,52px)/1.04 'Baloo 2';letter-spacing:-.02em;margin:0}
.hm-h2 span,.hm-shout span{display:block}
.hm-note{font:700 12px/1.5 'JetBrains Mono',monospace;letter-spacing:.04em;color:#786E66;margin:12px 0 0}
.hm .lt-btn{width:auto;min-width:220px;display:inline-flex}

/* ── 1. hero ───────────────────────────────────────────────────────────────────────────── */
.hm-hero{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:20px 0 40px}
.hm-hero-copy{position:relative;z-index:2;padding:0 clamp(16px,5vw,32px)}
.hm-h1{margin-top:10px;max-width:15ch}
.hm-mark{background:linear-gradient(transparent 60%,#FE6403 60%,#FE6403 90%,transparent 90%);
         padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hm-sub{font:400 17.5px/1.65 'Inter';color:#5c534d;margin:14px 0 0;max-width:480px}
.hm-sub b{color:#161311;font-weight:700;white-space:nowrap}
.hm-hero-art{position:relative;z-index:1;margin:-38vw 0 -12vw}
.hm-hero-art picture,.hm-hero-img{display:block;width:100%;height:auto}
.hm-hero-cta{position:relative;z-index:2;padding:0 clamp(16px,5vw,32px)}
.hm-price{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.hm-price-big{font:800 clamp(30px,4vw,52px)/1 'Baloo 2';letter-spacing:-.02em;color:#161311}
.hm-price-big small{font:600 15px 'Inter';letter-spacing:0;color:#5c534d}
.hm-price-day{font:600 15px/1.5 'Inter';color:#161311}
.hm-price-dot{display:none}
.hm-hero-cta .lt-btn{margin-top:16px}

@media (min-width:901px){
  .hm-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;max-width:1440px;margin:0 auto;padding:0}
  .hm-hero-art{grid-area:1/1/5/2}
  .hm-hero-copy{grid-area:2/1}
  .hm-hero-cta{grid-area:3/1}
  .hm-hero-art{margin:0}
  /* the copy starts on the same line as the logo above it, and stays out of the picture */
  .hm-hero{--pl:max(32px,calc((100vw - 1160px) / 2 + 32px))}
  .hm-hero-copy,.hm-hero-cta{width:min(calc(var(--pl) + 470px),46%);padding-left:var(--pl);box-sizing:border-box}
  .hm-hero-copy{padding-top:24px}
  .hm-hero-cta{padding:28px 0 48px var(--pl)}
  .hm-sub{font-size:16px}
}

/* The picture comes alive in code, on the picture itself (no new picture): steam rising from
   the glass, our own example posts on the three blank cards, and a reply written inside the
   speech bubble. Every place is in % of the picture's box, so it stays put at every width;
   the wide picture (desktop) and the tall one (phone) each have their own numbers. */
.hm-hero-art{container-type:inline-size}
.hm-live{position:absolute;inset:0;pointer-events:none;
  --ax:66.0;--ay:10.23;--aw:8.6;--ah:10.1;--ar:-19.3;
  --bx:76.38;--by:12.07;--bw:7.2;--bh:9.3;--br:13;
  --cx:71.88;--cy:23.08;--cw:8.4;--ch:9.5;--cr:13;
  --sx:55.3;--sy:32.2;--sw:8.6;--sh:6.6;--sr:-11;--sf:.95cqw;
  --vy:17;--vh:16;--vw:5.5;--v1:66.5;--v2:70.5;--v3:74.5}
@media (max-width:900px){
  .hm-live{--ax:49.65;--ay:35.12;--aw:12.8;--ah:6.9;--ar:-17.5;
           --bx:64.67;--by:36.56;--bw:10.8;--bh:6.7;--br:12.2;
           --cx:58.13;--cy:43.91;--cw:12.4;--ch:6.8;--cr:12;
           --sx:32.73;--sy:49.4;--sw:13;--sh:4.4;--sr:-10;--sf:2.4cqw;
           --vy:39;--vh:11;--vw:7;--v1:50;--v2:55.5;--v3:61}
}
.hm-card{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
         transform:translate(-50%,-50%) rotate(calc(var(--r) * 1deg));border-radius:9%/13%;overflow:hidden;background:#FFF7F0;
         box-shadow:0 2px 3px rgba(22,19,17,.12),0 6px 14px rgba(22,19,17,.14)}
.hm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hm-card--a{--x:var(--ax);--y:var(--ay);--w:var(--aw);--h:var(--ah);--r:var(--ar)}
.hm-card--b{--x:var(--bx);--y:var(--by);--w:var(--bw);--h:var(--bh);--r:var(--br)}
.hm-card--c{--x:var(--cx);--y:var(--cy);--w:var(--cw);--h:var(--ch);--r:var(--cr)}
.hm-card-next{opacity:0}
.hm-say{position:absolute;left:calc(var(--sx) * 1%);top:calc(var(--sy) * 1%);width:calc(var(--sw) * 1%);height:calc(var(--sh) * 1%);
        transform:translate(-50%,-50%) rotate(calc(var(--sr) * 1deg));display:grid;place-items:center}
.hm-say > span{grid-area:1/1;font:700 clamp(9px,var(--sf),15px)/1.15 'Inter';color:#161311;text-align:center;opacity:0}
.hm-say > span:first-child{opacity:1}
.hm-say .hm-say-short{display:none}
/* on a phone the bubble is about 50px wide: "Thank you!" is what fits at a size a person can read */
@container (max-width:599px){
  .hm-say > span{display:none}
  .hm-say > .hm-say-short{display:block;opacity:1}
}
.hm-steam{position:absolute;top:calc(var(--vy) * 1%);width:calc(var(--vw) * 1%);height:calc(var(--vh) * 1%);opacity:0;
          border-radius:50%;background:radial-gradient(ellipse at 50% 55%,rgba(255,255,255,.95) 0,rgba(255,255,255,.6) 35%,rgba(232,220,210,.35) 55%,rgba(255,255,255,0) 72%);
          filter:blur(3px)}
.hm-steam--1{left:calc(var(--v1) * 1%)}
.hm-steam--2{left:calc(var(--v2) * 1%)}
.hm-steam--3{left:calc(var(--v3) * 1%)}
@media (prefers-reduced-motion:no-preference){
  .hm-steam{animation:hmSteam 5.4s ease-in-out infinite}
  .hm-steam--2{animation-delay:-1.8s;animation-duration:6s}
  .hm-steam--3{animation-delay:-3.6s;animation-duration:4.8s}
  @keyframes hmSteam{0%{opacity:0;transform:translate(-50%,40%) scale(.55,.7)}
                     30%{opacity:.9}
                     100%{opacity:0;transform:translate(-50%,-45%) scale(1.25,1.35) skewX(10deg)}}
  .hm-card-next{animation:hmSwap 12s ease-in-out infinite}
  .hm-card--b .hm-card-next{animation-delay:-4s}
  .hm-card--c .hm-card-next{animation-delay:-8s}
  @keyframes hmSwap{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
  .hm-say > span{animation:hmSay 12s ease-in-out infinite both}
  .hm-say > span:nth-child(2){animation-delay:4s}
  .hm-say > span:nth-child(3){animation-delay:8s}
  .hm-say > span:first-child{opacity:0}
  @keyframes hmSay{0%{opacity:0}5%,30%{opacity:1}35%,100%{opacity:0}}
}

/* ── 2. the hook: night, and three pings nobody answered ─────────────────────────────── */
.hm-hook{padding:64px 0 72px}
.hm-hook .hm-h2{max-width:14ch}
.hm-pings{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:560px}
.hm-ping{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:2px solid #FFF7F0;border-radius:16px;
         background:#161311;box-shadow:4px 4px 0 #FE6403;font:400 17.5px/1.5 'Inter';color:#FFF7F0}
.hm-ping:nth-child(2){margin-left:clamp(12px,6vw,64px)}
.hm-ping:nth-child(3){margin-left:clamp(24px,12vw,128px)}
.hm-ping b{display:block;font-weight:700;color:#FE6403}
.hm-ping-ico{flex:none;width:26px;height:26px;margin-top:2px;fill:none;stroke:#FFF7F0;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.hm-turn{margin-top:44px;max-width:22ch;font-size:clamp(24px,3vw,36px);line-height:1.15;color:#b3a89f}
.hm-turn em{font-style:normal;color:#FE6403;display:block;font-size:clamp(30px,4vw,52px);margin-top:6px}
@media (min-width:901px){
  .hm-hook .hm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;align-items:start}
  .hm-pings{margin-top:0;grid-row:span 2}
  .hm-turn{margin-top:8px}
}

/* ── 3. the team ───────────────────────────────────────────────────────────────────────── */
.hm-team{padding:72px 0 80px}
.hm-crew{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:6px}
.hm-member{display:grid;grid-template-columns:132px 1fr;gap:4px 16px;align-items:center}
.hm-member:nth-child(even){grid-template-columns:1fr 132px}
.hm-member:nth-child(even) img{grid-column:2;grid-row:1/3}
.hm-member:nth-child(even) h3,.hm-member:nth-child(even) p{grid-column:1;text-align:right}
.hm-member img{grid-row:1/3;width:132px;height:auto;display:block}
.hm-member h3{align-self:end;font:800 clamp(18px,2.6vw,24px)/1.15 'Baloo 2';margin:0}
.hm-member p{align-self:start;font:400 15px/1.55 'Inter';color:#5c534d;margin:0}
.hm-member:first-child h3::after{content:"";display:block;width:36px;height:4px;margin-top:6px;background:#FE6403;border-radius:2px}
.hm-shout{margin-top:40px;text-align:center}
.hm-shout span{color:#BC4901}
@media (min-width:901px){
  .hm-crew{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 3%}
  .hm-member,.hm-member:nth-child(even){width:22%;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hm-member:nth-child(even){margin-top:40px}
  .hm-member:nth-child(n+5){margin-top:0}
  .hm-member:nth-child(6){margin-top:40px}
  .hm-member:nth-child(even) h3,.hm-member:nth-child(even) p{text-align:center}
  .hm-member img{width:100%;max-width:280px}
  .hm-member h3{margin-top:4px}
  .hm-member p{margin-top:6px;max-width:30ch}
  .hm-member:first-child h3::after{margin:6px auto 0}
  .hm-shout{margin-top:56px}
  .hm-shout span{display:inline}
}

/* ── 4. the wall: two rows of posts drifting opposite ways ────────────────────────────── */
.hm-work{padding:72px 0 56px;overflow:hidden}
.hm-h2--huge{font-size:clamp(30px,4vw,52px)}
.hm-lede{font:400 17.5px/1.65 'Inter';color:#b3a89f;margin:10px 0 0;max-width:480px}
.hm-wall{--h:224px;--gap:16px;margin-top:34px;display:flex;flex-direction:column;gap:var(--gap)}
.hm-row{list-style:none;margin:0;padding:6px clamp(16px,5vw,32px);display:flex;gap:var(--gap);width:max-content}
/* Without the script (or with reduced motion) each row is a plain strip you can swipe. */
.hm-wall:not(.is-moving) .hm-row{width:auto;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.hm-wall:not(.is-moving) .hm-row::-webkit-scrollbar{display:none}
.hm-wall:not(.is-moving) .hm-row > li{scroll-snap-align:start}
.hm-post,.hm-reply{flex:none;height:var(--h);box-sizing:border-box;border-radius:14px}
.hm-post{width:calc(var(--h) * .8);overflow:hidden;background:#2a2521}
.hm-post img{display:block;width:100%;height:100%;object-fit:cover}
.hm-post:nth-child(3n+1){transform:rotate(-1.2deg)}
.hm-post:nth-child(3n+2){transform:rotate(.9deg)}
.hm-reply{width:calc(var(--h) * 1.18);display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:#fff;
          border:2px solid #FFF7F0;box-shadow:4px 4px 0 #FE6403;color:#161311;font:400 13.5px/1.45 'Inter';transform:rotate(.6deg)}
.hm-tag{align-self:flex-start;margin:0;padding:3px 8px;border:2px solid #161311;border-radius:99px;
        font:700 11px/1.3 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#161311;background:#FFEDE0}
.hm-said,.hm-ans{padding:8px 10px;border-radius:12px;overflow-wrap:anywhere}
.hm-said{background:#FFF7F0;border:1.5px solid #e6ddd4;border-bottom-left-radius:4px}
.hm-ans{background:#FFEDE0;border:1.5px solid #161311;border-bottom-right-radius:4px;margin-left:14px}
.hm-who{display:block;font:700 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#786E66;margin-bottom:2px}
.hm-ans .hm-who{color:#BC4901}
.hm-stars{color:#BC4901;letter-spacing:.1em;margin-left:6px}
.hm-stars i{font-style:normal;color:#786E66}
.hm-hold{margin:auto 0 0;padding:8px 10px;border:2px dashed #161311;border-radius:12px;background:#FFF7F0;
         font:700 13px/1.4 'Inter';color:#161311}
.hm-small{font:700 12px/1.5 'JetBrains Mono',monospace;letter-spacing:.04em;color:#b3a89f;margin:26px 0 0}
@media (min-width:761px){ .hm-wall{--h:340px;--gap:22px} .hm-reply{font-size:15px;padding:16px 18px;gap:10px} }

/* the copy follows the row; with no gap or padding of its own the row is exactly two equal
   halves, so moving it by half its width lands on the same picture: no jump at the loop */
.hm-wall.is-moving .hm-row{gap:0;padding-left:0;padding-right:0;animation:hmDrift var(--t,90s) linear infinite}
.hm-wall.is-moving .hm-row > li{margin-right:var(--gap)}
.hm-wall.is-moving .hm-row:nth-child(2){animation-direction:reverse;--t:110s}
.hm-wall.is-paused .hm-row,.hm-wall.is-moving:hover .hm-row,.hm-wall.is-moving:focus-within .hm-row{animation-play-state:paused}
@keyframes hmDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 5. you are still the boss: three switches, all off ───────────────────────────────── */
.hm-boss{padding:72px 0}
.hm-boss-in{display:grid;gap:34px}
.hm-rules{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:480px}
.hm-rules li{display:flex;gap:12px;font:400 17.5px/1.55 'Inter';color:#161311}
.hm-rules li::before{content:"✓";flex:none;width:24px;height:24px;margin-top:2px;border-radius:50%;background:#FE6403;
                     color:#161311;font:800 13px/24px 'Inter';text-align:center;border:2px solid #161311;box-sizing:border-box;line-height:20px}
.hm-panel{background:#fff;border:2px solid #161311;border-radius:16px;box-shadow:4px 4px 0 #161311;padding:8px 20px;max-width:440px;width:100%;box-sizing:border-box;justify-self:start}
.hm-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid #e6ddd4}
.hm-switch:first-child{border-top:0}
.hm-switch-name{font:800 clamp(18px,2.6vw,24px) 'Baloo 2';color:#161311}
.hm-switch--all{border-top:2px solid #161311}
.hm-toggle{position:relative;flex:none;width:88px;height:44px;border:2px solid #161311;border-radius:99px;background:#EFE6DC;box-sizing:border-box}
.hm-toggle span{position:absolute;top:3px;left:3px;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #161311;box-sizing:border-box;
                font:700 10px/30px 'JetBrains Mono',monospace;text-align:center;color:#161311;box-shadow:2px 2px 0 #161311}
@media (min-width:901px){ .hm-boss-in{grid-template-columns:1fr 1fr;align-items:center} .hm-panel{justify-self:end} }

/* ── 6. the value: a chai-stall bill on the orange, the list and the total said big ─────── */
.hm-value{background:#FE6403;color:#161311;padding:72px 0 80px;overflow:hidden}
.hm-value-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hm-bill{position:relative;margin-top:30px;max-width:860px;width:100%;box-sizing:border-box;background:#fff;color:#161311;text-align:left;
         border:2px solid #161311;border-radius:6px;box-shadow:6px 6px 0 #161311;padding:28px clamp(18px,4vw,44px) 30px;transform:rotate(-1deg)}
.hm-items{list-style:none;margin:0;padding:0 0 24px;border-bottom:2px dashed #161311;display:grid;gap:14px 36px}
.hm-items li{display:flex;gap:12px;align-items:flex-start;font:800 clamp(18px,2.6vw,24px)/1.2 'Baloo 2'}
.hm-items li::before{content:"✔";flex:none;width:28px;height:28px;margin-top:-1px;border-radius:50%;background:#FE6403;border:2px solid #161311;
                     box-sizing:border-box;color:#161311;font:800 13px/24px 'Inter';text-align:center}
.hm-total{margin:24px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hm-was{font:800 clamp(30px,4vw,52px)/1.05 'Baloo 2';letter-spacing:-.02em;color:#161311}
.hm-arrow{font:800 clamp(24px,3vw,36px)/1 'Inter';color:#BC4901;transform:rotate(90deg);margin-left:12px}
.hm-pay{display:inline-block;padding:10px 20px;background:#FE6403;border:2px solid #161311;border-radius:99px;box-shadow:4px 4px 0 #161311;
        font:800 clamp(24px,3vw,32px)/1.1 'Baloo 2';color:#161311;transform:rotate(-2deg)}
.hm-pay b{font-size:clamp(30px,4vw,52px);letter-spacing:-.02em}
.hm-day{margin:18px 0 0;font:600 17.5px/1.5 'Inter';color:#5c534d}
.hm-ring{position:absolute;right:-12px;bottom:-50px;width:92px;height:92px;border-radius:50%;
         border:7px solid rgba(188,73,1,.28);box-shadow:inset 0 0 0 3px rgba(188,73,1,.12);pointer-events:none}
@media (min-width:761px){
  .hm-items{grid-template-columns:1fr 1fr}
  .hm-total{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 22px}
  .hm-arrow{transform:none;margin:0}
}

/* ── 7. three beats ─────────────────────────────────────────────────────────────────────── */
.hm-beats{padding:80px 0;text-align:center}
.hm-beat span{display:block}
.hm-beat span:nth-of-type(2){color:#FE6403}
.hm-beat i{display:none}
.hm-sign{font:800 clamp(18px,2.6vw,24px) 'Baloo 2';color:#FFF7F0;margin:22px 0 0}
.hm-sign::before{content:"";display:block;width:44px;height:4px;margin:0 auto 18px;background:#FE6403;border-radius:2px}
@media (min-width:901px){ .hm-beat span{display:inline} .hm-beat i{display:inline;font-style:normal;color:#8a7f77;padding:0 .2em} }

/* ── 8. questions, as a chat ────────────────────────────────────────────────────────────── */
.hm-faq{padding:72px 0 24px}
.hm-qa{margin:0;display:grid;gap:26px}
.hm-qa > div{display:flex;flex-direction:column;gap:8px}
.hm-qa dt,.hm-qa dd{max-width:88%;padding:12px 16px;border:2px solid #161311;border-radius:16px;box-sizing:border-box;margin:0}
.hm-qa dt{align-self:flex-end;background:#FFEDE0;border-bottom-right-radius:4px;font:800 clamp(18px,2.6vw,24px)/1.2 'Baloo 2';color:#161311}
.hm-qa dd{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;font:400 17.5px/1.55 'Inter';color:#161311;box-shadow:3px 3px 0 #161311}
@media (min-width:901px){ .hm-qa{grid-template-columns:1fr 1fr;gap:34px 48px} }

/* ── 9. the close ───────────────────────────────────────────────────────────────────────── */
.hm-close{padding:48px 0 72px;text-align:center}
.hm-close .hm-h2 span{color:#BC4901}
.hm-close-img{display:block;width:100%;max-width:900px;height:auto;margin:18px auto 0}
.hm-close-cta{display:flex;flex-direction:column;align-items:center}
.hm-close-cta .lt-btn{margin-top:4px}

/* ── a short entrance for the first screen ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .hm-hero-copy,.hm-hero-cta{animation:hmUp .7s cubic-bezier(.2,.7,.2,1) both}
  .hm-hero-cta{animation-delay:.18s}
  @keyframes hmUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .hm-wall .hm-row{animation:none !important}
}