/* Yalla Vending | shared styles for every page on the site.
   Page-specific CSS (the scrub hero, the marketing sections) stays inline
   on the page that uses it. Change a brand token here and it changes everywhere. */

/* ============================================================
   TYPE, self-hosted
   Served from our own origin instead of fonts.googleapis.com. That removes two
   third-party connections from the critical path, lets our own Cache-Control
   headers apply, and keeps visitor IPs off a third party.
   Lexend, Outfit and Cairo are variable fonts, so one file covers every weight
   the site uses. The Arabic faces carry a unicode-range, so an English page
   never downloads them; the Latin faces carry none, so they cover any glyph
   they hold. font-display:swap keeps text visible while a face is in flight.
   All four families are SIL Open Font License.
   ============================================================ */
@font-face{font-family:"Lexend";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/lexend-latin.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/outfit-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"Cairo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/cairo-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-arabic-400.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plex-arabic-600.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}

/* ============================================================
   THE CONTACT SECTION AND ITS FORM
   Shared by the homepage, the gyms pages and every service page.
   ============================================================ */
.close{background:var(--accent);color:var(--on-accent)}
.close .kicker{color:rgba(44,44,44,.72)}
.close h2{color:var(--on-accent);font-size:clamp(2.1rem,1.3rem + 3.1vw,3.5rem)}
.close .lede{color:rgba(44,44,44,.82)}
.close .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.form{display:grid;gap:.9rem}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(44,44,44,.75)}
.field input{font-family:var(--body);font-size:1rem;padding:.75rem .9rem;border-radius:.6rem;
  border:1px solid rgba(44,44,44,.3);background:rgba(255,255,255,.62);color:var(--on-accent);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.field input::placeholder{color:rgba(44,44,44,.5)}
.field input:focus{background:#fff;border-color:var(--on-accent);outline:none}
.field input:focus-visible{outline:2px solid var(--on-accent);outline-offset:2px}
.field textarea{font-family:var(--body);font-size:1rem;padding:.75rem .9rem;border-radius:.6rem;
  border:1px solid rgba(44,44,44,.3);background:rgba(255,255,255,.62);color:var(--on-accent);
  resize:vertical;min-height:6.25rem;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.field textarea::placeholder{color:rgba(44,44,44,.5)}
.field textarea:focus{background:#fff;border-color:var(--on-accent);outline:none}

/* segmented choices: on an orange panel the active state inverts to charcoal */
.close .label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(44,44,44,.75)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.seg-btn{font-family:var(--body);font-weight:600;font-size:.9375rem;padding:.72rem .7rem;
  border-radius:.6rem;cursor:pointer;border:1px solid rgba(44,44,44,.34);
  background:transparent;color:var(--on-accent);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.seg-btn:hover{background:rgba(44,44,44,.12)}
.seg-btn.on{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
@media (pointer:coarse){.seg-btn{min-height:44px}}
.close .btn{background:var(--on-accent);color:var(--accent);justify-self:start;margin-top:.4rem}
.close .btn:hover{background:#1b1b1b;box-shadow:0 10px 30px rgba(44,44,44,.25)}
.form-note{margin-top:1rem;font-size:.875rem;color:rgba(44,44,44,.78)}
.form-note a{font-weight:600}
.ok{display:none;padding:1.4rem 0;font-family:var(--display);font-weight:700;font-size:1.2rem}
.sent .form{display:none}
.sent .ok{display:block}
.form-err{margin-top:1rem;font-size:.9375rem;font-weight:500;color:#7A2E12}
.form-err a{font-weight:600}
.form.sending{opacity:.6;pointer-events:none}
@media (max-width:860px){.close .grid{grid-template-columns:1fr}}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  color-scheme:dark;
  --canvas:#141210;
  --panel:#1F1C18;
  --panel-hi:#2C2825;
  --accent:#FF9831;
  --accent-hover:#FFA84D;
  --accent-muted:#5A3D1E;
  --text-primary:#FFF3D4;
  --text-secondary:#B5AC99;
  --on-accent:#2C2C2C;

  --display:'Lexend',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --gut:clamp(1.25rem,5vw,4.5rem);
  --maxw:76rem;
}

*,*::before,*::after{box-sizing:border-box}
/* the hidden attribute must beat any display rule a component sets on itself */
[hidden]{display:none!important}
html,body{overflow-x:hidden;overflow-x:clip}
html{font-family:var(--body);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* There was a fade on the whole page here. It cost up to 950 ms of Largest
   Contentful Paint on the Arabic page, because nothing counts as painted while
   it is still transparent. The sections animate themselves in on scroll, so the
   fade was buying almost nothing for the price. */

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.028em;margin:0}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* no grey flash on tap, no 300 ms wait for a double-tap that is not coming */
a,button,summary,[role="radio"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent);
  padding:.75rem 1.25rem;border-radius:0 0 .6rem 0;font-weight:600}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.kicker{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0}


/* ============================================================
   FIXED ENVIRONMENT LAYER | one place, not stacked sections
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 60% 45% at 50% 8%,rgba(255,152,49,.11),transparent 62%),
    radial-gradient(ellipse 70% 50% at 82% 78%,rgba(255,152,49,.055),transparent 66%);
  animation:envDrift 96s var(--ease) -22s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
@keyframes envDrift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1.02)}to{transform:translate3d(2.5%,1.5%,0) scale(1.06)}}


/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  padding:1rem calc(var(--gut) + env(safe-area-inset-right)) 1rem calc(var(--gut) + env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(20,18,16,.88),rgba(20,18,16,0));
  backdrop-filter:blur(2px)}
/* the brand mark IS the wordmark, so it never sits next to typed-out "Yalla" */
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.brand img{width:clamp(74px,7vw,96px);height:auto;display:block}
footer .brand img{width:clamp(96px,9vw,124px)}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-links a:not(.btn){font-size:.9rem;font-weight:500;text-decoration:none;
  color:var(--text-secondary);transition:color .3s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--text-primary)}
/* The section links fold away on a phone, but the language switch must not go
   with them: about half the people who open this site read Arabic, and hreflang
   only tells a crawler. On the narrowest screens the pill tightens instead. */
@media (max-width:860px){.nav-links a:not(.btn):not(.lang a){display:none}
  .nav-links{gap:.7rem}}
/* once scrolled the nav becomes a real bar, so it reads as designed over the orange band */
.nav.stuck{background:rgba(20,18,16,.93);border-bottom:1px solid rgba(255,243,212,.09);
  backdrop-filter:blur(14px)}

/* the English and Arabic switch, carried by every page in both languages */
.lang{display:inline-flex;align-items:center;gap:.15rem;padding:.22rem;
  border-radius:.55rem;border:1px solid rgba(255,243,212,.18);
  background:rgba(255,243,212,.04);flex:none}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;
  padding:.3rem .45rem;border-radius:.4rem;font-family:var(--mono);font-size:.6875rem;
  font-weight:500;text-decoration:none;color:var(--text-secondary);
  transition:background .3s var(--ease),color .3s var(--ease)}
.lang a:hover{color:var(--text-primary)}
.lang a[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
.lang .ar{font-family:'Segoe UI','Geeza Pro','Noto Naskh Arabic','Arial',sans-serif;font-size:.8125rem;
  letter-spacing:normal}
@media (pointer:coarse){.lang a{min-height:38px}}
/* the pill has to share the bar with the brand and the call to action */
@media (max-width:420px){
  .nav{gap:.5rem}
  .nav-links{gap:.5rem}
  .lang a{min-width:1.75rem;padding-inline:.3rem}
  .nav .btn{padding-inline:.9rem;font-size:.875rem}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:.9375rem;text-decoration:none;
  padding:.7rem 1.25rem;border-radius:.7rem;border:1px solid transparent;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,152,49,.22)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:rgba(255,243,212,.28)}
.btn-ghost:hover{background:rgba(255,243,212,.08);box-shadow:none}
@media (pointer:coarse){.btn{min-height:44px}}


/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */
.sec{position:relative;z-index:1;padding:clamp(4.5rem,10vw,8.5rem) var(--gut)}
.wrap{max-width:var(--maxw);margin-inline:auto}
.lede{margin-top:1.1rem;color:var(--text-secondary);font-size:clamp(1.0125rem,.97rem + .3vw,1.15rem);
  max-width:52ch}
h2.big{font-size:clamp(2rem,1.25rem + 2.9vw,3.4rem);max-width:17ch;margin-top:1rem}

/* entrance choreography */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.in .rise,.rise.in{opacity:1;transform:none}
.in .stg:nth-child(1){transition-delay:.06s}
.in .stg:nth-child(2){transition-delay:.16s}
.in .stg:nth-child(3){transition-delay:.26s}
.in .stg:nth-child(4){transition-delay:.36s}
.in .stg:nth-child(5){transition-delay:.46s}
/* retire the stagger once the entrance has run, at matching specificity */
.done .stg:nth-child(1),.done .stg:nth-child(2),.done .stg:nth-child(3),
.done .stg:nth-child(4),.done .stg:nth-child(5){transition-delay:0s!important}

/* the pour line: a self-drawing vertical rule echoing the falling column */
.pourline{position:absolute;left:calc(var(--gut) * .42);top:0;bottom:0;width:2px;
  pointer-events:none;overflow:hidden}
.pourline svg{width:2px;height:100%}
.pourline path{stroke:var(--accent-muted);stroke-width:2;fill:none;
  stroke-dasharray:var(--len,1000);stroke-dashoffset:calc(var(--len,1000) * (1 - var(--draw,0)))}
@media (max-width:1180px){.pourline{display:none}}

/* divider drawn from the logo's interlocking geometry */
.divider{display:flex;align-items:flex-end;gap:5px;height:26px;margin-bottom:1.6rem}
.divider i{display:block;width:5px;border-radius:2px;background:var(--accent);opacity:.85}
.divider i:nth-child(1){height:26px}
.divider i:nth-child(2){height:26px}
.divider i:nth-child(3){height:11px;background:var(--text-primary);opacity:.5}
.divider i:nth-child(4){width:26px;height:5px;background:var(--text-primary);opacity:.5}


/* ============================================================
   FOOTER
   ============================================================ */
footer{position:relative;z-index:1;
  padding:clamp(3rem,6vw,5rem) calc(var(--gut) + env(safe-area-inset-right))
          calc(2.5rem + env(safe-area-inset-bottom)) calc(var(--gut) + env(safe-area-inset-left));
  border-top:1px solid rgba(255,243,212,.1)}
.foot{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot a{color:var(--text-secondary);text-decoration:none;transition:color .3s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9375rem}
.foot .tag{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-top:.7rem}
.fineprint{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,243,212,.08);
  font-size:.8125rem;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}


/* ============================================================
   OVERLAYS: the drink detail panel, and the 10-second popup
   ============================================================ */
body.locked{overflow:hidden}
.ovl{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.25rem}
.ovl[hidden]{display:none}
.ovl-scrim{position:absolute;inset:0;background:rgba(8,7,6,.8);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s var(--ease)}
.ovl.show .ovl-scrim{opacity:1}
.ovl-card{position:relative;width:min(46rem,100%);max-height:88svh;overflow-y:auto;
  background:var(--panel);border:1px solid rgba(255,243,212,.12);border-radius:1.1rem;
  padding:clamp(1.5rem,3.4vw,2.4rem);box-shadow:0 50px 120px -30px rgba(0,0,0,.9);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.ovl.show .ovl-card{opacity:1;transform:none}
.ovl-x{position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;display:grid;place-items:center;
  border-radius:.6rem;border:1px solid rgba(255,243,212,.14);background:transparent;cursor:pointer;
  color:var(--text-secondary);transition:color .3s var(--ease),background .3s var(--ease);z-index:2}
.ovl-x:hover{color:var(--text-primary);background:rgba(255,243,212,.08)}
.ovl-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* --- drink detail --- */
.dm-badge{display:inline-block;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  padding:.22rem .5rem;border-radius:.35rem;background:rgba(255,152,49,.14);color:var(--accent)}
.dm-badge.zero{background:rgba(255,243,212,.09);color:var(--text-secondary)}
.dm h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);margin-top:.75rem;padding-right:2.5rem}
.dm-range{margin-top:.5rem;font-family:var(--mono);font-size:.8125rem;letter-spacing:.05em;
  color:var(--accent)}
.dm-tablewrap{margin-top:1.5rem;overflow-x:auto}
table.dm-t{width:100%;border-collapse:collapse;font-size:.875rem;min-width:28rem}
.dm-t th{font-family:var(--mono);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);text-align:right;padding:0 0 .55rem;font-weight:500}
.dm-t th:first-child{text-align:left}
.dm-t td{padding:.6rem 0;border-top:1px solid rgba(255,243,212,.1);text-align:right;
  font-variant-numeric:tabular-nums}
.dm-t td:first-child{text-align:left;padding-right:1.2rem;color:var(--text-secondary)}
.dm-block{margin-top:1.4rem}
.dm-label{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary)}
.dm-block p{margin-top:.4rem}
.dm-allergen{margin-top:1.4rem;padding:.9rem 1rem;border-radius:.7rem;
  background:rgba(255,152,49,.1);border:1px solid rgba(255,152,49,.32)}
.dm-allergen .dm-label{color:var(--accent)}
.dm-allergen p{margin-top:.35rem;font-weight:600}
.dm-note{margin-top:.9rem;font-size:.9375rem;color:var(--text-secondary)}
.dm-foot{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,243,212,.1);
  font-size:.8125rem;color:var(--text-secondary)}
.dm-ask{margin-top:1rem;font-size:.9375rem}
.dm-ask a{color:var(--accent);font-weight:600}

/* --- the 10-second popup --- */
.pop-card{width:min(30rem,100%);text-align:center}
/* Any overlay card that carries the mark gets it sized. This was scoped to
   .pop-card, so the download gate rendered the logo at its natural size. */
.ovl-card .popmark{width:104px;height:auto;margin:0 auto}
.pop-card .popmark{margin:0 auto}
.pop-card h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);margin-top:1rem;padding-inline:1.5rem}
.pop-card .pop-lede{margin-top:.6rem;color:var(--text-secondary);font-size:.9375rem}
.pop-wa{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  margin-top:1.4rem;padding:.9rem 1.25rem;border-radius:.75rem;font-weight:600;text-decoration:none;
  background:#25D366;color:#0A2E17;
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.pop-wa:hover{filter:brightness(1.07);transform:translateY(-2px)}
.pop-wa svg{width:19px;height:19px;fill:currentColor}
.pop-or{display:flex;align-items:center;gap:.9rem;margin:1.3rem 0 0;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary)}
.pop-or::before,.pop-or::after{content:"";flex:1;height:1px;background:rgba(255,243,212,.14)}
.pop-form{display:grid;gap:.65rem;text-align:left;margin-top:1.1rem}
.pop-form input{font-family:var(--body);font-size:1rem;padding:.72rem .9rem;border-radius:.6rem;
  border:1px solid rgba(255,243,212,.18);background:rgba(255,243,212,.05);color:var(--text-primary);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.pop-form input::placeholder{color:var(--text-secondary)}
.pop-form input:focus{outline:none;border-color:var(--accent);background:rgba(255,243,212,.09)}
.pop-form .btn{width:100%;margin-top:.15rem}
.pop-form.sending{opacity:.6;pointer-events:none}
.pop-ok{display:none;margin-top:1.3rem;font-family:var(--display);font-weight:700;font-size:1.1rem}
.pop-card.sent .pop-form,.pop-card.sent .pop-or,.pop-card.sent .pop-lede{display:none}
.pop-card.sent .pop-ok{display:block}
.pop-err{margin-top:.8rem;font-size:.875rem;color:var(--accent)}
.pop-small{margin-top:1.1rem;font-size:.75rem;color:var(--text-secondary)}
.pop-small a{color:var(--text-secondary);text-decoration:underline}


/* ============================================================
   REDUCED MOTION | final states, drives stopped, both directions
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important}
  .rise{opacity:1;transform:none}
  .pourline path{stroke-dashoffset:0}
  body{animation:none}
}
/* pinned final states applied by JS when the preference flips mid-session */
.pinned .rise{opacity:1!important;transform:none!important}
.pinned .pourline path{stroke-dashoffset:0!important}

/* pause every animation on a hidden tab, pseudo-elements included */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}