/* Brews by Rae — "the order chat" */
:root{
  --ground:#F3EADB;
  --ground-2:#FBF6EE;
  --ground-3:#EFE4D2;
  --line:#E6D9C4;
  --ink:#4A3222;
  --ink-2:#6E5640;
  --ink-3:#9A8064;
  --matcha:#5F8A42;
  --matcha-deep:#3F6B2A;
  --matcha-soft:#DDE9CF;
  --hojicha:#A86A3A;
  --straw:#E6607A;
  --honey:#C08A2D;
  --sesame:#5E5652;
  --in:#FFFFFF;
  --out:#4A3222;
  --radius:22px;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --ease:cubic-bezier(.2,.9,.25,1);
  --shadow:0 10px 30px -12px rgba(74,50,34,.22), 0 1px 3px rgba(74,50,34,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--matcha);outline-offset:3px;border-radius:6px}
a{color:var(--matcha-deep);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
p{margin:0}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#D9C9B0;border-radius:10px;border:2px solid var(--ground)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,40px);background:color-mix(in oklab,var(--ground-2) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand-mark svg{display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-family:var(--display);font-size:1.15rem;letter-spacing:-.01em}
.status{font-size:.8rem;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--matcha);box-shadow:0 0 0 0 rgba(127,166,80,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,166,80,.55)}70%{box-shadow:0 0 0 8px rgba(127,166,80,0)}100%{box-shadow:0 0 0 0 rgba(127,166,80,0)}}
.top-nav{display:flex;gap:4px}
.top-nav a{color:var(--ink-2);text-decoration:none;font-weight:500;padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.top-nav a:hover{color:var(--ink);background:var(--ground-3)}
.top-nav .ig{color:var(--matcha-deep)}
@media (max-width:640px){.top-nav a:not(.ig){display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 1rem var(--body);padding:13px 20px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .2s,border-color .2s,box-shadow .25s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink);color:#fff;box-shadow:0 8px 24px -10px rgba(74,50,34,.6)}
.btn.primary:hover{background:#2F1E13;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-3);background:var(--ground-2)}
.btn.text{background:none;color:var(--ink-3);padding-inline:8px}
.btn.text:hover{color:var(--ink)}

/* ---------- messages ---------- */
.msg{display:flex;flex-direction:column;max-width:min(560px,92%);margin:6px 0}
.msg.in{align-items:flex-start}
.msg.out{align-self:flex-end;align-items:flex-end}
.bubble{background:var(--in);padding:14px 18px;border-radius:var(--radius);border-bottom-left-radius:6px;box-shadow:var(--shadow);border:1px solid var(--line)}
.msg.out .bubble{background:var(--out);color:#fff;border-radius:var(--radius);border-bottom-right-radius:6px}
.bubble p{font-size:1.05rem}
.bubble h1{font-size:clamp(1.55rem,3.3vw,2.4rem);font-weight:600;letter-spacing:-.025em;line-height:1.12}
.meta{font-size:.78rem;color:var(--ink-3);margin:6px 8px 0}
.date-chip{align-self:center;font-size:.78rem;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:999px;margin-bottom:14px}
/* arrival choreography */
.hero .msg,.hero .hero-actions{opacity:0;transform:translateY(14px) scale(.98);animation:arrive .7s var(--ease) forwards}
.hero .msg[data-delay="1"]{animation-delay:1.2s}
.hero .msg[data-delay="2"]{animation-delay:2.1s}
.hero .hero-actions{animation-delay:2.8s}
@keyframes arrive{to{opacity:1;transform:none}}
.typing .bubble p{display:flex;gap:5px;align-items:center;min-height:1.6em}
.typing .bubble p::before{content:"";width:34px;height:10px;background:radial-gradient(circle,var(--ink-2) 3px,transparent 3.5px) 0/12px 10px repeat-x;animation:blink 1s steps(3) infinite}
.typing .bubble p{font-size:0}
@keyframes blink{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.hero .msg,.hero .hero-actions{animation:none;opacity:1;transform:none}.typing .bubble p{font-size:1.05rem}.typing .bubble p::before{display:none}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(40px,7vw,96px) clamp(16px,4vw,40px) clamp(32px,5vw,64px);max-width:1200px;margin:0 auto;min-height:calc(100svh - 70px)}
.hero-copy{display:flex;flex-direction:column}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hero-cup{display:flex;flex-direction:column;align-items:center;gap:22px}
.cup-stage{position:relative;width:min(320px,70vw);aspect-ratio:3/4;display:grid;place-items:end center}
.cup-stage .shadow{position:absolute;bottom:0;width:70%;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);filter:blur(4px)}
.cup{position:relative;width:62%;height:92%;z-index:1;display:flex;flex-direction:column;align-items:center;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.lid{width:116%;height:22px;background:linear-gradient(#F5F1E8,#D9D1C1);border-radius:12px 12px 6px 6px;position:relative;z-index:2;box-shadow:0 6px 10px -4px rgba(0,0,0,.5)}
.lid::after{content:"";position:absolute;inset:auto 10% -7px;height:8px;background:#CFC6B4;border-radius:0 0 8px 8px}
.glass{position:relative;flex:1;width:100%;border-radius:6px 6px 34px 34px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(2px);box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
.layer{width:100%;transition:flex .7s var(--ease),background .5s}
.layer.cream{flex:1.4;background:linear-gradient(#FBF5E6,#EADFC4)}
.layer.matcha{flex:2.4;background:linear-gradient(var(--matcha-soft),var(--matcha) 30%,var(--matcha-deep))}
.layer.milk{flex:3.2;background:linear-gradient(#E9DECB,#D7C6AA)}
.layer.base{flex:1.2;background:linear-gradient(#8D6A3F,#5E4224)}
.layer.straw{flex:1.6;background:linear-gradient(#F08AA0,var(--straw))}
.layer.hojicha{flex:2.4;background:linear-gradient(#C8875A,var(--hojicha))}
.layer.sesame{flex:1.4;background:linear-gradient(#7B7370,var(--sesame))}
.layer.coffee{flex:3;background:linear-gradient(#7A4B29,#3E2414)}
.ice{position:absolute;width:26%;aspect-ratio:1;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.5);border-radius:6px;mix-blend-mode:screen}
.ice.i1{left:12%;top:22%;transform:rotate(12deg)}.ice.i2{right:10%;top:34%;transform:rotate(-20deg)}.ice.i3{left:28%;top:50%;transform:rotate(35deg)}
.shine{position:absolute;left:10%;top:4%;width:10%;height:78%;border-radius:10px;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0))}
.straw{position:absolute;top:-12%;right:26%;width:14px;height:40%;background:linear-gradient(90deg,#C7D9A8,#7FA650);border-radius:6px;transform:rotate(10deg);transform-origin:bottom;z-index:3}
.cup-label{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-3deg);background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;text-align:center;box-shadow:var(--shadow);z-index:3;width:88%}
.cup-label span{display:block;font:800 1.05rem var(--display);letter-spacing:-.01em}
.cup-label small{display:block;font-size:.72rem;color:#D9C9B4}
.cup-picker{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.cup-picker button{font:500 .85rem var(--body);color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:7px 12px;border-radius:999px;cursor:pointer;transition:.2s}
.cup-picker button:hover{color:var(--ink);border-color:var(--ink-3)}
.cup-picker button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* per-drink cup states */
.cup[data-cup="straw"] .layer.base{background:linear-gradient(#F08AA0,var(--straw))}
.cup[data-cup="straw"] .layer.cream{flex:.4;background:linear-gradient(#E9DECB,#D7C6AA)}
.cup[data-cup="sesame"] .layer.matcha{background:linear-gradient(#C8875A,var(--hojicha))}
.cup[data-cup="sesame"] .layer.cream{flex:2;background:linear-gradient(#7B7370,var(--sesame))}
.cup[data-cup="sesame"] .layer.base{flex:.4;background:#5E4224}
.cup[data-cup="dirty"] .layer.cream{flex:2.2;background:linear-gradient(#6B4024,#3E2414)}
.cup[data-cup="dirty"] .layer.base{flex:.3}
.cup.mini{width:54%;height:72%;animation:none}
.cup.mini .glass{border-radius:4px 4px 18px 18px}

/* ---------- pinned hours ---------- */
.pinned{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.pin-head{display:flex;align-items:center;gap:10px;color:var(--honey);margin-bottom:18px}
.pin-head h2{font-size:1.2rem;font-weight:600;color:var(--ink);letter-spacing:0}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 10px;display:flex;flex-direction:column;gap:6px;text-align:center;transition:transform .3s var(--ease)}
.day span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.day b{font-family:var(--display);font-size:1.05rem;font-weight:600}
.day em{font-style:normal;color:var(--ink-3)}
.day.is-today{background:var(--matcha);border-color:var(--matcha);color:#fff;transform:translateY(-4px);box-shadow:0 10px 30px -10px rgba(95,138,66,.6)}
.day.is-today span{color:#E4F0D8}
.pin-note{margin-top:16px;color:var(--ink-2);max-width:62ch}
@media (max-width:720px){.week{grid-template-columns:repeat(4,1fr)}.day b{font-size:.95rem}}

/* ---------- menu ---------- */
.menu{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.menu-head{margin-bottom:28px;display:flex;flex-direction:column;gap:12px}
.menu-head p{color:var(--ink-2)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tabs button{font:600 .92rem var(--body);background:#fff;color:var(--ink-2);border:1px solid var(--line);padding:9px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.tabs button:hover{color:var(--ink);border-color:var(--ink-3)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s;animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
.item:hover{transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(74,50,34,.3)}
.item.is-hidden{display:none}
.item .swatch{width:100%;aspect-ratio:1;overflow:hidden;background:#EDE7DB;position:relative}
.item .swatch i{display:block;flex:1}
.item .who{padding:14px 16px 6px;min-width:0}
.item h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{font:700 .62rem var(--body);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--honey);color:#fff}
.badge.new{background:var(--straw);color:#fff}
.item .desc{font-size:.9rem;color:var(--ink-2);margin-top:2px}
.item .flags{font-size:.75rem;color:var(--ink-3);margin-top:4px}
.item .buy{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 14px}
.price{font-family:var(--display);font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.price small{font-weight:400;font-size:.75rem;color:var(--ink-3)}
.add{font:600 .85rem var(--body);background:var(--ink);color:#fff;border:0;padding:8px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.2s var(--ease)}
.add:hover{background:#2F1E13}
.add:active{transform:scale(.94)}
.add.is-in{background:var(--matcha);}
.stepper{display:inline-flex;align-items:center;background:var(--ground-3);border-radius:999px;overflow:hidden}
.stepper button{background:none;border:0;color:var(--ink);width:32px;height:32px;font-size:1.1rem;cursor:pointer}
.stepper button:hover{background:var(--line)}
.stepper b{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
/* options popover inline */
.opts{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 14px;border-top:1px dashed var(--line)}
.opts label{font-size:.82rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;background:var(--ground-2);border:1px solid var(--line);padding:6px 10px;border-radius:999px;cursor:pointer;border:1px solid transparent}
.opts label:has(:checked){background:var(--ink);color:#fff}
.opts input{appearance:none;width:0;height:0;margin:0}

/* ---------- how ---------- */
.how{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.how h2{margin-bottom:24px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:640px}
.steps .msg{max-width:100%}
.steps .out{align-self:flex-end}
.bubble.photo{padding:8px}
.bubble.photo p{padding:8px 10px 4px}
.fake-photo{width:220px;aspect-ratio:4/3;border-radius:14px;background:radial-gradient(circle at 30% 30%,#3A2B1F,#1B140F);display:grid;place-items:end center;padding-bottom:10px}

/* ---------- collect ---------- */
.collect{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.map-card{border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#4A3222}
.map{display:block;width:100%;height:auto}
.collect-copy{display:flex;flex-direction:column;gap:18px}
.collect-copy p{color:var(--ink-2);max-width:52ch}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.facts li{display:flex;gap:12px;align-items:center;color:var(--ink)}
.facts .ic{color:var(--matcha)}
.collect-copy .btn{align-self:flex-start}

/* ---------- instagram ---------- */
.gram{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:center}
.gram-head{display:flex;flex-direction:column;gap:16px}
.gram-head p{color:var(--ink-2)}
.gram-head .btn{align-self:flex-start}
.gram-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{aspect-ratio:1;border-radius:18px;display:grid;place-items:end center;padding-bottom:8px;overflow:hidden;transition:transform .4s var(--ease)}
.tile:hover{transform:scale(1.03) rotate(-1deg)}
.t-matcha{background:radial-gradient(circle at 30% 20%,#4E7A2E,#1E2A14)}
.t-straw{background:radial-gradient(circle at 70% 20%,#7A3040,#2A1418)}
.t-hoji{background:radial-gradient(circle at 30% 80%,#6E4A2A,#231710)}
.t-coffee{background:radial-gradient(circle at 60% 30%,#4D3421,#171009)}
.t-pud{background:radial-gradient(circle at 40% 30%,#C9A04A,#4A3412);place-items:center}
.t-text{background:#fff;border:1px solid var(--line);place-items:center;padding:16px;text-align:center}
.t-text p{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.25}
.t-text small{color:var(--ink-3);font-size:.75rem}
.tub{width:58%;aspect-ratio:1/.8;border-radius:8px 8px 20px 20px;background:linear-gradient(#FBF3DD,#E7CF9C);position:relative;box-shadow:var(--shadow)}
.tub::before{content:"";position:absolute;inset:0 0 auto;height:30%;background:#F6E7C2;border-radius:8px 8px 0 0}
.crumble{position:absolute;left:18%;top:8%;width:64%;height:18%;background:radial-gradient(circle,#B27A3A 2px,transparent 2.5px) 0 0/8px 8px}

/* ---------- footer ---------- */
.foot{padding:40px clamp(16px,4vw,40px) 140px;text-align:center;color:var(--ink-2);border-top:1px solid var(--line)}
.foot .fine{font-size:.8rem;color:var(--ink-3);margin-top:8px}

/* ---------- composer ---------- */
.composer{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(720px,calc(100% - 24px));z-index:30;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 30px 60px -20px rgba(74,50,34,.45),0 4px 14px rgba(74,50,34,.12);overflow:hidden;transition:transform .4s var(--ease),border-color .3s}
.composer.has-items{border-color:var(--matcha)}
.composer-summary{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 18px 12px 12px;background:none;border:0;color:var(--ink);cursor:pointer;text-align:left;font-family:var(--body)}
.composer-summary .count{width:40px;height:40px;border-radius:50%;background:var(--ground-3);display:grid;place-items:center;font:800 1rem var(--display);transition:.3s var(--ease)}
.has-items .count{background:var(--matcha);color:#fff}
.composer-summary .label{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.composer-summary .label b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer-summary .label small{color:var(--ink-3);font-size:.8rem}
.composer-summary .total{font:800 1.15rem var(--display);font-variant-numeric:tabular-nums}
.composer-panel{padding:4px 16px 16px;border-top:1px solid var(--line);max-height:60vh;overflow:auto}
.cart-list{list-style:none;margin:0;padding:8px 0;display:flex;flex-direction:column;gap:6px}
.cart-list li{display:flex;justify-content:space-between;gap:12px;font-size:.95rem;align-items:center}
.cart-list li span{color:var(--ink-2)}
.cart-list li b{font-variant-numeric:tabular-nums}
.cart-list .rm{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:1rem;padding:4px}
.cart-list .rm:hover{color:var(--straw)}
.cart-list .empty{color:var(--ink-3);justify-content:center;padding:12px}
.draft{margin-top:6px}
.draft-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px}
.draft-text{margin:0;font:400 .92rem/1.5 var(--body);white-space:pre-wrap;background:var(--out);color:#fff;padding:12px 16px;border-radius:18px;border-bottom-right-radius:6px;margin-left:auto;max-width:92%}
.send-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.send-row .primary{flex:1;justify-content:center}
.bump{animation:bump .4s var(--ease)}
@keyframes bump{30%{transform:translateX(-50%) scale(1.02)}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:28px}
  .hero-cup{order:-1}
  .cup-stage{width:min(240px,60vw)}
  .collect,.gram{grid-template-columns:1fr}
  .gram-grid{order:-1}
}
@media (max-width:520px){
  body{font-size:16px}
  .item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s;animation:pop .5s var(--ease) both}
  .item .swatch{width:100%;aspect-ratio:1;overflow:hidden;background:#EDE7DB;position:relative}
  .send-row .ghost{flex:1;justify-content:center}
}

/* ---------- real photography ---------- */
.brand-mark img{display:block;width:46px;height:46px;border-radius:12px;object-fit:cover;object-position:center 20%;background:#fff;border:1px solid var(--line)}
.hero-photo{width:100%;height:100%;object-fit:cover;border-radius:28px;box-shadow:var(--shadow);transition:opacity .35s var(--ease),transform .5s var(--ease);animation:float 6s ease-in-out infinite}
.hero-photo.swap{opacity:0;transform:scale(.97)}
.cup-stage{place-items:stretch}
.cup-stage .cup-label{top:auto;bottom:14px;transform:translateX(-50%) rotate(-2deg)}
.item .swatch img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.item:hover .swatch img{transform:scale(1.04)}
.chat-photo{display:block;width:220px;height:275px;object-fit:cover;border-radius:14px}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile:not(.t-text){padding:0;place-items:stretch}

.item .swatch .badge{position:absolute;top:10px;left:10px;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.item h3 .badge{display:none}
.price::before{content:"S";font-size:.8em;font-weight:600;color:var(--ink-3)}
.hero-photo,.chat-photo,.tile{border:1px solid var(--line)}
@media (max-width:520px){
  .menu-grid{grid-template-columns:1fr 1fr;gap:10px}
  .item .who{padding:10px 12px 4px}.item .buy{padding:2px 12px 12px}.item h3{font-size:.95rem}.item .desc{font-size:.8rem}
  .opts{padding:8px 10px 10px}.opts label{font-size:.74rem;padding:5px 8px}
  .add{padding:7px 11px;font-size:.8rem}
}

/* ===== Perks ===== */
.perks{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(48px,7vw,96px)}
.perks h2{margin-bottom:10px}
.perks-lead{color:var(--ink-2);max-width:56ch;margin-bottom:26px}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.tier:hover{transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(74,50,34,.3)}
.tier header{border-bottom:1px dashed var(--line);padding-bottom:14px;margin-bottom:14px}
.tier-star{display:block;font-size:.8rem;letter-spacing:.28em;color:var(--honey);margin-bottom:8px;white-space:nowrap}
.tier h3{font-family:var(--display);font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.tier .unlock{font-size:.82rem;color:var(--ink-2);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
.tier .unlock i{font-style:normal;color:var(--ink-3);opacity:.85;text-transform:none;letter-spacing:0}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tier li{position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-2)}
.tier li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--matcha-soft);border:2px solid var(--matcha)}
.tier li b{color:var(--ink)}
/* tier ladder: milk -> matcha -> honey -> espresso */
.tier.t1{background:#fff;border-color:var(--line)}
.tier.t1 .tier-star{color:var(--ink-3)}
.tier.t1 li::before{background:#fff;border-color:var(--ink-3)}
.tier.t2{background:linear-gradient(180deg,#FCFDF8,#ECF4E1);border-color:#B4CE93}
.tier.t2 .tier-star{color:var(--matcha-deep)}
.tier.t2 header{border-bottom-color:#CFE0B8}
.tier.t2 li::before{background:#fff;border-color:var(--matcha)}
.tier.t3{background:linear-gradient(180deg,#FFFCF4,#F9EED6);border-color:var(--honey)}
.tier.t3 .tier-star{color:var(--honey)}
.tier.t3 header{border-bottom-color:#E7D3A8}
.tier.t3 li::before{background:#fff;border-color:var(--honey)}
.tier.t4{background:linear-gradient(180deg,#573B27,#3E2A1B);border-color:#3E2A1B;color:#F2EBDD}
.tier.t4 .tier-star{color:#E8B85C}
.tier.t4 h3{color:#fff}
.tier.t4 .unlock,.tier.t4 li{color:#D6C4AE}
.tier.t4 .unlock i{color:#D6C4AE}
.tier.t4 li b{color:#fff}
.tier.t4 header{border-bottom-color:#6B5340}
.tier.t4 li::before{background:transparent;border-color:#E8B85C}
.perks-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:1080px){.tier{padding:18px 16px 20px}.tier h3{font-size:1.25rem}}
@media (max-width:880px){.tiers{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.tiers{grid-template-columns:1fr}}