/* customers.halaisms.com — bundled stylesheet. Edit the parts, not this. */
/* ===== site.css ===== */
/* ===========================================================
   customers.halaisms.com — design draft
   Same brand as halaisms.com (maroon + gold, El Messiri + Tajawal),
   but its own layout: warm paper ground, one dark immersive band,
   card-first sections, swipe rows on phones.
   =========================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-300-ar-540fbf22.woff2') format('woff2');font-weight:300;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-300-latin-aa4852cf.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-400-ar-d595af28.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-400-latin-f18eb734.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-500-ar-899cfbe6.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-500-latin-7256be46.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-700-ar-10367de7.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Tajawal';src:url('fonts/tajawal-700-latin-e9c38c11.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'El Messiri';src:url('fonts/el-messiri-500-700-ar-8e5cb926.woff2') format('woff2');font-weight:500 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'El Messiri';src:url('fonts/el-messiri-500-700-latin-1b157786.woff2') format('woff2');font-weight:500 700;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --red:#7C1626;
  --red-deep:#5A1526;
  --gold:#C9971F;
  --gold-bright:#E0B627;
  --ink:#1A1416;
  --text:#574D4F;
  --text-soft:#6F6466;   /* was #857A7C — 3.88:1 on paper, now 5.2:1 (WCAG AA) */
  --paper:#FAF7F4;
  --surface:#FFFFFF;
  --surface-2:#F3EEE9;
  --line:#E7DFD8;
  --chrome:#17100F;
  --radius:20px;
  --radius-lg:28px;
  --shadow:0 26px 60px -28px rgba(50,20,25,.35);
  --shadow-sm:0 12px 28px -16px rgba(50,20,25,.3);
  --wrap:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; overflow-x:hidden; background:var(--paper); color:var(--text);
  font-family:'Tajawal',system-ui,sans-serif; font-size:17px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:'El Messiri','Tajawal',serif; color:var(--ink); margin:0; line-height:1.35; text-wrap:balance;}
h1{font-size:clamp(2.2rem,5.4vw,4.1rem); font-weight:500; letter-spacing:-.01em;}
h2{font-size:clamp(1.65rem,3.2vw,2.6rem); font-weight:500;}
h3{font-size:1.18rem; font-weight:600;}
p{margin:0;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
.section{padding:clamp(76px,9vw,136px) 0;}
.section.tight{padding:clamp(56px,6.5vw,96px) 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.7;}
.lede{font-size:1.06rem; color:var(--text); max-width:62ch;}
.muted{color:var(--text-soft);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; font-weight:500; font-size:.98rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 14px 30px -14px rgba(124,22,38,.75);}
.btn-primary:hover{background:var(--red-deep);}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface);}
.btn-ghost:hover{border-color:var(--gold);}
.btn-gold{background:var(--gold); color:#20160a; box-shadow:0 14px 30px -14px rgba(201,151,31,.8);}
.btn-gold:hover{background:var(--gold-bright);}
.btn-line-light{border-color:rgba(255,255,255,.34); color:#fff;}
.btn-line-light:hover{border-color:#fff; background:rgba(255,255,255,.08);}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(250,247,244,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.site-head .bar{display:flex; align-items:center; gap:26px; padding:14px 28px; max-width:var(--wrap); margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{height:38px; width:auto;}
.brand b{font-family:'El Messiri',serif; font-size:1.02rem; color:var(--ink); font-weight:600; display:block; line-height:1.3;}
.brand span{font-size:.7rem; color:var(--text-soft); letter-spacing:.06em;}
.site-nav{display:flex; gap:22px; margin-inline-start:auto; font-size:.93rem;}
.site-nav a{text-decoration:none; color:var(--text); padding:6px 0; position:relative;}
.site-nav a::after{content:""; position:absolute; inset-inline:0; bottom:0; height:1.5px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .3s ease;}
.site-nav a:hover::after,.site-nav a.active::after{transform:scaleX(1);}
.site-nav a.active{color:var(--ink); font-weight:500;}
/* the one link that leaves for the main HALA site — set apart, not underlined gold */
.site-nav a.nav-out{
  color:var(--text-soft); margin-inline-start:4px; padding-inline-start:20px;
  border-inline-start:1px solid var(--line);
}
.site-nav a.nav-out::after{display:none;}
.site-nav a.nav-out:hover{color:var(--red);}
.head-cta{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none;}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--chrome); color:#fff;
  padding:clamp(70px,9vw,120px) 0 clamp(90px,11vw,150px);
}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(60% 70% at 78% 18%, rgba(201,151,31,.30), transparent 62%),
             radial-gradient(70% 80% at 12% 82%, rgba(124,22,38,.62), transparent 66%);
}
.hero::after{
  content:""; position:absolute; inset-inline:0; bottom:-1px; height:70px;
  background:linear-gradient(to bottom, transparent, var(--paper));
}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
.hero h1{color:#fff; font-weight:400;}
.hero h1 b{font-weight:700; color:var(--gold-bright);}
.hero p{color:rgba(255,255,255,.76); margin-top:20px; font-size:1.08rem; max-width:52ch;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px;}
.hero-stats{display:flex; gap:34px; margin-top:44px; flex-wrap:wrap;}
.hero-stats div{border-inline-start:2px solid rgba(201,151,31,.55); padding-inline-start:14px;}
.hero-stats b{display:block; font-family:'El Messiri',serif; font-size:1.7rem; color:#fff; font-weight:600; line-height:1.2;}
.hero-stats span{font-size:.82rem; color:rgba(255,255,255,.62);}
.hero-card{position:relative;}
.hero-card img{border-radius:var(--radius-lg); box-shadow:0 40px 80px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.12);}
.hero-badge{
  position:absolute; inset-inline-start:-18px; bottom:26px; background:var(--gold);
  color:#20160a; border-radius:18px; padding:14px 20px; box-shadow:var(--shadow);
  font-weight:700; font-family:'El Messiri',serif; line-height:1.25; text-align:center;
}
.hero-badge b{display:block; font-size:1.9rem;}
.hero-badge span{font-size:.78rem; font-weight:500;}

/* ---------- swipe row (phones) ---------- */
.row-scroll{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.cat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; display:flex; flex-direction:column; gap:12px; text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.cat:hover{transform:translateY(-5px); border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); box-shadow:var(--shadow-sm);}
.cat .ic{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--surface-2); color:var(--red);}
.cat b{font-family:'El Messiri',serif; font-size:1.03rem; color:var(--ink); font-weight:600;}
.cat span{font-size:.85rem; color:var(--text-soft);}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s;}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px 26px;}
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; top:-18px; inset-inline-start:26px;
  width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-family:'El Messiri',serif; font-weight:700; font-size:1.05rem;
  box-shadow:0 10px 22px -12px rgba(124,22,38,.9);
}
.step h3{margin-top:10px;}
.step p{margin-top:8px; font-size:.95rem;}

/* ---------- tiers ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:end;}
.tier{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; display:flex; flex-direction:column; gap:14px; position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.tier:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.tier .name{font-family:'El Messiri',serif; font-size:1.25rem; font-weight:600; color:var(--ink);}
.tier .price{font-family:'El Messiri',serif; font-size:2.5rem; font-weight:700; color:var(--red); line-height:1;}
.tier .price small{font-size:.9rem; font-weight:500; color:var(--text-soft); font-family:'Tajawal',sans-serif;}
.tier ul{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:9px; font-size:.93rem;}
.tier li{display:flex; gap:9px; align-items:flex-start;}
.tier li::before{content:"✓"; color:var(--gold); font-weight:700;}
.tier.featured{background:var(--chrome); border-color:transparent; color:rgba(255,255,255,.8); transform:translateY(-12px);}
.tier.featured .name,.tier.featured .price{color:#fff;}
.tier.featured .price small{color:rgba(255,255,255,.6);}
.tier.featured li::before{color:var(--gold-bright);}
.tier .tag{
  position:absolute; top:18px; inset-inline-end:22px; background:var(--gold); color:#20160a;
  font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.04em;
}

/* ---------- calculator ---------- */
.calc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,44px); display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; box-shadow:var(--shadow-sm);}
.calc label{display:block; font-size:.9rem; color:var(--text-soft); margin-bottom:10px;}
.calc .field + .field{margin-top:26px;}
.calc input[type=range]{width:100%; accent-color:var(--red);}
.calc .val{font-family:'El Messiri',serif; font-weight:700; color:var(--ink); font-size:1.05rem;}
.calc-out{background:linear-gradient(150deg,var(--red-deep),var(--red)); color:#fff; border-radius:var(--radius); padding:34px 28px; text-align:center;}
.calc-out span{font-size:.85rem; color:rgba(255,255,255,.72);}
.calc-out b{display:block; font-family:'El Messiri',serif; font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700; line-height:1.1; margin:6px 0;}
.calc-out em{font-style:normal; font-size:.78rem; color:rgba(255,255,255,.6);}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px;}
.quote p{font-size:1rem; color:var(--ink); line-height:1.9;}
.quote .who{margin-top:16px; font-size:.85rem; color:var(--text-soft); display:flex; align-items:center; gap:10px;}
.quote .av{width:34px; height:34px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font-weight:700; color:var(--red); font-size:.8rem;}

/* ---------- blog cards ---------- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.post{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.post:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--gold) 40%,var(--line));}
.post .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--surface-2);}
.post .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.post:hover .thumb img{transform:scale(1.05);}
.post .body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post .cat-tag{font-size:.72rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; font-weight:600;}
.post h3{font-size:1.1rem; line-height:1.55;}
.post p{font-size:.92rem; color:var(--text-soft);}
.post .meta{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:.8rem; color:var(--text-soft); display:flex; justify-content:space-between;}
.post.feature{grid-column:1 / -1; flex-direction:row;}
.post.feature .thumb{flex:1.1; aspect-ratio:auto;}
.post.feature .body{flex:1; padding:clamp(24px,3vw,40px);}
.post.feature h3{font-size:clamp(1.3rem,2.4vw,1.9rem); font-family:'El Messiri',serif;}

/* ---------- article ---------- */
.article-hero{background:var(--chrome); color:#fff; padding:clamp(56px,7vw,92px) 0 clamp(80px,9vw,120px); position:relative; overflow:hidden;}
.article-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 80% 10%, rgba(201,151,31,.26), transparent 60%), radial-gradient(70% 90% at 10% 90%, rgba(124,22,38,.5), transparent 65%);}
.article-hero .wrap{position:relative; z-index:2; max-width:840px;}
.article-hero h1{color:#fff; font-weight:500; margin-top:16px;}
.article-hero .meta{margin-top:22px; color:rgba(255,255,255,.64); font-size:.88rem; display:flex; gap:18px; flex-wrap:wrap;}
.article-body{max-width:760px; margin:0 auto; padding:0 28px;}
.article-cover{max-width:940px; margin:-70px auto 0; padding:0 28px; position:relative; z-index:3;}
.article-cover img{border-radius:var(--radius-lg); box-shadow:var(--shadow); border:1px solid var(--line);}
.prose{font-size:1.06rem; line-height:2; color:var(--text);}
.prose > * + *{margin-top:22px;}
.prose h2{font-size:1.55rem; margin-top:52px;}
.prose h3{font-size:1.16rem; margin-top:34px;}
.prose strong{color:var(--ink); font-weight:600;}
.prose ul,.prose ol{padding-inline-start:22px; margin-top:16px;}
.prose li{margin-top:9px;}
.prose blockquote{
  margin:34px 0; padding:24px 26px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); border-inline-start:3px solid var(--gold);
  color:var(--ink); font-size:1.02rem;
}
.prose a{color:var(--red); text-underline-offset:3px;}
.prose .flow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--surface-2); border-radius:var(--radius); padding:18px 20px; font-size:.95rem;}
.prose .flow span{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 14px; white-space:nowrap;}
.prose .flow i{color:var(--gold); font-style:normal;}

/* ---------- cta band ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--chrome); color:#fff;
  padding:clamp(34px,5vw,58px); display:flex; gap:28px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 85% 20%, rgba(201,151,31,.28), transparent 60%);}
.cta-band > *{position:relative; z-index:2;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.72); margin-top:10px;}

/* ---------- footer ---------- */
.site-foot{background:var(--chrome); color:rgba(255,255,255,.66); margin-top:clamp(60px,8vw,100px); padding:64px 0 28px;}
.site-foot .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.site-foot h4{color:#fff; font-size:.98rem; margin-bottom:14px;}
.site-foot a{color:rgba(255,255,255,.66); text-decoration:none; display:block; padding:5px 0; font-size:.92rem;}
.site-foot a:hover{color:var(--gold-bright);}
.site-foot .fine{margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr; gap:40px;}
  .hero-card{max-width:440px;}
  .calc{grid-template-columns:1fr; gap:28px;}
  .steps,.tiers,.quotes,.posts{grid-template-columns:1fr;}
  .tier.featured{transform:none;}
  .post.feature{flex-direction:column;}
  .site-nav{display:none;}
  .site-foot .cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .wrap{padding:0 18px;}
  /* card groups become swipe rows rather than tall stacks */
  .row-scroll,.steps,.tiers,.quotes,.posts{
    display:grid; grid-auto-flow:column; grid-auto-columns:78%;
    overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    scrollbar-width:none;
  }
  .row-scroll::-webkit-scrollbar,.steps::-webkit-scrollbar,.tiers::-webkit-scrollbar,.quotes::-webkit-scrollbar,.posts::-webkit-scrollbar{display:none;}
  .row-scroll > *,.steps > *,.tiers > *,.quotes > *,.posts > *{scroll-snap-align:start;}
  .posts{grid-auto-columns:86%;}
  .post.feature{grid-column:auto;}
  .hero-stats{gap:20px;}
  .site-foot .cols{grid-template-columns:1fr;}
}


/* ===== site2.css ===== */
/* ===========================================================
   customers.halaisms.com — v2 additions
   Built for the buying decision: proof first, numbers you can
   check, and enough motion that the page feels alive.
   Loads after site.css.
   =========================================================== */

/* ---------- hero extras ---------- */
.hero{padding-bottom:clamp(60px,7vw,90px);}
.hero-card{perspective:1200px;}
.hero-card .tilt{
  transform:rotateY(-9deg) rotateX(4deg); transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.8);
  animation:float 7s ease-in-out infinite;
}
.hero-card:hover .tilt{transform:rotateY(0) rotateX(0) scale(1.02);}
@keyframes float{0%,100%{translate:0 0;}50%{translate:0 -14px;}}
.trust-line{display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; color:rgba(255,255,255,.62); font-size:.86rem;}
.trust-line span{display:flex; align-items:center; gap:7px;}
.trust-line svg{color:var(--gold-bright); flex:none;}

/* ---------- partner marquee ---------- */
.marquee{
  overflow:hidden; padding:20px 0; background:var(--surface);
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex; gap:56px; width:max-content; animation:slide 42s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee img{height:46px; width:auto; object-fit:contain; opacity:.9; transition:transform .3s ease, opacity .3s ease;}
.marquee img:hover{opacity:1; transform:scale(1.08);}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} .hero-card .tilt{animation:none;} }

/* ---------- value / price compare ---------- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.vcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.vcard:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.vcard .ph{aspect-ratio:16/10; overflow:hidden; position:relative;}
.vcard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.vcard:hover .ph img{transform:scale(1.07);}
.vcard .ph b{
  position:absolute; inset-block-start:14px; inset-inline-start:14px;
  background:var(--gold); color:#20160a; border-radius:999px; padding:6px 14px;
  font-size:.84rem; font-weight:700;
}
.vcard .in{padding:22px; display:flex; flex-direction:column; gap:12px;}
.vcard h3{font-size:1.06rem;}
.price-row{display:flex; align-items:baseline; gap:12px; font-family:'El Messiri',serif;}
.price-row .was{color:var(--text-soft); text-decoration:line-through; font-size:1.05rem;}
.price-row .now{color:var(--red); font-size:1.7rem; font-weight:700;}
.price-row .save{margin-inline-start:auto; font-size:.8rem; color:#2E7D52; background:#EAF6EF; border-radius:999px; padding:4px 10px; font-family:'Tajawal',sans-serif;}

/* ---------- break-even ---------- */
.breakeven{
  background:linear-gradient(140deg,var(--chrome),#241618); color:#fff;
  border-radius:var(--radius-lg); padding:clamp(28px,4vw,48px);
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.breakeven::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 85% 15%, rgba(201,151,31,.26), transparent 60%);}
.breakeven > *{position:relative; z-index:2;}
.breakeven h2{color:#fff;}
.breakeven p{color:rgba(255,255,255,.72); margin-top:12px;}
.be-steps{display:grid; gap:14px;}
.be-step{display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px 18px;}
.be-step b{font-family:'El Messiri',serif; font-size:1.25rem; color:var(--gold-bright); min-width:74px;}
.be-step span{font-size:.93rem; color:rgba(255,255,255,.8);}
.be-bar{height:10px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:6px;}
.be-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius:999px; transition:width 1.4s cubic-bezier(.2,.7,.2,1);}
/* bars fill from CSS once the block reveals — no timers, so it also works in print/preview */
.breakeven.in .be-bar i{width:var(--w,100%);}
.breakeven.in .be-step:nth-child(2) .be-bar i{transition-delay:.25s;}
.breakeven.in .be-step:nth-child(3) .be-bar i{transition-delay:.5s;}

/* ---------- counters ---------- */
.counters{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.counter{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 18px;}
.counter b{display:block; font-family:'El Messiri',serif; font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--red); font-weight:700; line-height:1.15;}
.counter span{font-size:.88rem; color:var(--text-soft);}

/* ---------- loyalty / perks ---------- */
.perks{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.perk{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; display:flex; flex-direction:column; gap:10px;}
.perk .ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,var(--red),var(--red-deep)); color:var(--gold-bright);}
.perk h3{font-size:1rem;}
.perk p{font-size:.9rem; color:var(--text-soft);}

/* ---------- calculator visual ---------- */
.calc-bars{margin-top:22px; display:grid; gap:12px;}
.calc-bar{display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:12px; font-size:.86rem;}
.calc-bar .track{height:12px; background:rgba(255,255,255,.16); border-radius:999px; overflow:hidden;}
.calc-bar .track i{display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.2,.7,.2,1);}
.calc-bar.cost .track i{background:rgba(255,255,255,.4);}
.calc-bar.save .track i{background:linear-gradient(90deg,var(--gold),var(--gold-bright));}

/* ---------- faq ---------- */
.faq{display:grid; gap:12px; max-width:860px; margin:0 auto;}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 24px; font-weight:600; color:var(--ink);
  display:flex; justify-content:space-between; gap:16px; align-items:center; font-family:'El Messiri',serif;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .plus{color:var(--gold); font-size:1.3rem; transition:transform .3s ease; line-height:1;}
.faq details[open] summary .plus{transform:rotate(45deg);}
.faq .a{padding:0 24px 22px; color:var(--text); font-size:.97rem; line-height:1.9;}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{
  position:fixed; inset-inline:0; bottom:0; z-index:70; display:none;
  background:rgba(23,16,15,.96); backdrop-filter:blur(10px);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.12);
  align-items:center; justify-content:space-between; gap:12px;
}
.sticky-cta span{color:#fff; font-size:.9rem;}
.sticky-cta b{color:var(--gold-bright);}

/* ---------- quotes v2 ---------- */
.quote{position:relative; padding-top:34px;}
.quote::before{
  content:"”"; position:absolute; top:6px; inset-inline-start:24px;
  font-family:'El Messiri',serif; font-size:3.4rem; color:var(--gold); opacity:.45; line-height:1;
}
.stars{color:var(--gold); font-size:.9rem; letter-spacing:.14em; margin-bottom:8px;}

/* ---------- section head helper ---------- */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .value-grid,.counters,.perks{grid-template-columns:repeat(2,1fr);}
  .breakeven{grid-template-columns:1fr; gap:26px;}
}
@media (max-width:640px){
  .value-grid,.perks{
    display:grid; grid-auto-flow:column; grid-auto-columns:80%;
    overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    scrollbar-width:none;
  }
  .value-grid::-webkit-scrollbar,.perks::-webkit-scrollbar{display:none;}
  .value-grid > *,.perks > *{scroll-snap-align:start;}
  .counters{grid-template-columns:repeat(2,1fr); gap:12px;}
  .sticky-cta{display:flex;}
  /* the sticky bar carries the CTA on phones, so the header stays light */
  .head-cta{display:none;}
  .brand img{height:32px;}
  .brand b{font-size:.95rem;}
  .brand span span{display:none;}
  body{padding-bottom:76px;}
  .marquee img{height:32px;}
}


/* ===== site3.css ===== */
/* ===========================================================
   customers.halaisms.com — v3
   The gold thread that carries the eye from section to section,
   and a partner strip that never ends.
   Loads after site2.css.
   =========================================================== */

/* ---------- the journey thread (same behaviour as the About page) ---------- */
.j-story{position:relative; --rail:38px;}
.j-story > section{position:relative;}
.j-thread{
  position:absolute; top:0; bottom:0; inset-inline-start:var(--rail);
  width:2px; background:var(--line); z-index:2; display:none;
}
.j-thread-fill{
  position:absolute; inset-inline-start:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold)); border-radius:2px;
}
.j-node{
  position:absolute; top:92px; inset-inline-start:var(--rail);
  width:13px; height:13px; margin-inline-start:-5.5px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line); z-index:3; display:none;
  transition:border-color .45s ease, background .45s ease, box-shadow .45s ease, transform .45s ease;
}
.j-node.lit{
  border-color:var(--gold); background:var(--gold);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); transform:scale(1.12);
}
@media (min-width:1180px){
  .j-thread, .j-node{display:block;}
  .j-story .wrap{padding-inline-start:96px;}
}
/* a section can carry the thread's number so the journey reads as steps */
.step-mark{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--gold); color:var(--gold); font-family:'El Messiri',serif;
  font-size:.86rem; font-weight:700; margin-inline-end:10px; vertical-align:middle;
}

/* ---------- partner strip ---------- */
.marquee{
  padding:clamp(34px,4vw,54px) 0; background:linear-gradient(180deg,var(--surface),var(--paper));
  border-block:1px solid var(--line);
}
.marquee .mq-head{
  max-width:var(--wrap); margin:0 auto 22px; padding:0 28px;
  display:flex; align-items:center; gap:14px; color:var(--text-soft); font-size:.82rem;
}
.marquee .mq-head::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent);}
.mq-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{display:flex; width:max-content; gap:0; animation:mq-rtl 52s linear infinite; will-change:transform;}
/* the trailing gap lives inside the group, so one group is exactly half the
   track and the 50% loop lands pixel-perfect */
.mq-group{display:flex; align-items:center; gap:64px; padding-inline-end:64px; flex:none;}
.marquee:hover .marquee-track{animation-play-state:paused;}
/* no boxes: the logos sit straight on the strip */
.mq-item{flex:none; display:grid; place-items:center; height:72px;}
/* each logo carries its own optical height (--h), so a wide wordmark and a
   square mark read at the same weight instead of the same pixel height */
.mq-item img{
  height:var(--h,52px); width:auto; max-width:none; object-fit:contain;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.mq-item:hover img{transform:scale(1.08);}
/* RTL: the duplicate sits to the left, so travelling from +50% to 0 keeps the
   strip full while the logos move leftwards */
@keyframes mq-rtl{from{transform:translateX(50%);} to{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none; transform:translateX(50%);} }
/* ---------- section heads with a step number ---------- */
.sec-num{display:flex; align-items:center; gap:12px;}

@media (max-width:640px){
  .thread{height:70px;}
  .mq-group{gap:44px; padding-inline-end:44px;}
  .mq-item{height:56px;}
  .mq-item img{height:calc(var(--h,52px) * .78);}
}


/* ===== site4.css ===== */
/* ===========================================================
   customers.halaisms.com — v4: screens
   Three real layouts instead of one that shrinks:
   desktop grid → tablet two-up → phone swipe rows.
   Loads last, so it wins over the earlier breakpoints.
   =========================================================== */

/* ---------- laptop / small desktop ---------- */
@media (max-width:1180px){
  :root{--wrap:1040px;}
  .hero .wrap{gap:40px;}
  .perks{grid-template-columns:repeat(2,1fr);}
}

/* ---------- tablet: two-up, never one giant column ---------- */
@media (max-width:980px) and (min-width:641px){
  .hero .wrap{grid-template-columns:1fr; gap:36px;}
  .hero-card{max-width:520px; margin-inline:auto;}
  .value-grid,.steps,.tiers,.quotes,.posts,.perks{grid-template-columns:repeat(2,1fr) !important;}
  .counters{grid-template-columns:repeat(4,1fr);}
  .tier.featured{transform:none;}
  .post.feature{flex-direction:row;}
  .calc{grid-template-columns:1fr; gap:26px;}
  .breakeven{grid-template-columns:1fr; gap:26px;}
  .site-nav{display:flex; gap:16px; font-size:.86rem;}
  .site-nav a:nth-child(n+5){display:none;}   /* keep the bar on one line */
}

/* ---------- phone: swipe instead of stack ---------- */
@media (max-width:640px){
  body{font-size:16px;}
  .wrap{padding:0 16px;}
  .section{padding:clamp(52px,12vw,76px) 0;}
  .section.tight{padding:clamp(40px,9vw,58px) 0;}
  .thread{height:56px;}
  .thread.short{height:44px;}
  h1{font-size:clamp(1.95rem,8.4vw,2.6rem);}
  h2{font-size:clamp(1.35rem,5.6vw,1.75rem);}
  .lede{font-size:.98rem;}

  /* hero fits one screen better */
  .hero{padding:44px 0 54px;}
  .hero p{font-size:1rem; margin-top:14px;}
  .hero-actions{margin-top:24px; gap:10px;}
  .hero-actions .btn{flex:1 1 auto; justify-content:center;}
  .trust-line{gap:10px 18px; margin-top:22px; font-size:.8rem;}
  .hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:26px;}
  .hero-stats div{padding-inline-start:10px;}
  .hero-stats span{font-size:.72rem; line-height:1.5;}
  .hero-stats b{font-size:1.35rem;}
  .hero-card{margin-top:26px;}
  .hero-badge{inset-inline-start:auto; inset-inline-end:14px; bottom:14px; padding:10px 14px;}
  .hero-badge b{font-size:1.4rem;}

  /* every card group becomes a swipe row that bleeds to the edges */
  .value-grid,.steps,.tiers,.quotes,.posts,.perks,.row-scroll{
    display:grid !important;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    grid-template-columns:none !important;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:16px;
    padding:4px 16px 6px;
    margin-inline:-16px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .value-grid::-webkit-scrollbar,.steps::-webkit-scrollbar,.tiers::-webkit-scrollbar,
  .quotes::-webkit-scrollbar,.posts::-webkit-scrollbar,.perks::-webkit-scrollbar,
  .row-scroll::-webkit-scrollbar{display:none;}
  .value-grid > *,.steps > *,.tiers > *,.quotes > *,.posts > *,.perks > *,.row-scroll > *{
    scroll-snap-align:start;
  }
  .tiers{grid-auto-columns:80%;}
  .quotes{grid-auto-columns:82%;}
  .perks{grid-auto-columns:70%;}
  .posts{grid-auto-columns:86%;}
  .post.feature{flex-direction:column; grid-column:auto;}
  .tier.featured{transform:none;}
  .steps .step{padding-top:34px;}

  /* swipe affordance: dots the script fills in */
  .dots{display:flex; gap:6px; justify-content:center; margin-top:14px;}
  .dots i{width:6px; height:6px; border-radius:50%; background:var(--line); transition:width .3s ease, background .3s ease;}
  .dots i.on{width:20px; background:var(--gold);}
  .swipe-hint{
    display:flex; align-items:center; gap:6px; justify-content:flex-end;
    font-size:.76rem; color:var(--text-soft); margin-top:10px;
  }
  .swipe-hint svg{animation:nudge 1.8s ease-in-out infinite;}
  @keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(-5px);}}

  /* section heads stack cleanly */
  .sec-head{flex-direction:column; align-items:flex-start; gap:14px;}
  .sec-head .btn{width:100%; justify-content:center;}

  /* the money blocks stay readable */
  .breakeven{padding:24px 18px;}
  .be-step{flex-direction:column; align-items:flex-start; gap:6px; padding:12px 14px;}
  .be-step b{min-width:0;}
  .calc{padding:22px 18px;}
  .calc-out{padding:24px 18px;}
  .calc-bar{grid-template-columns:72px 1fr auto; font-size:.8rem;}
  .counters{grid-template-columns:repeat(2,1fr); gap:10px;}
  .counter{padding:18px 12px;}

  /* FAQ */
  .faq summary{padding:16px 18px; font-size:.97rem;}
  .faq .a{padding:0 18px 18px; font-size:.92rem;}

  /* footer */
  .site-foot{padding:44px 0 22px;}
  .site-foot .cols{grid-template-columns:1fr; gap:26px;}
  .site-foot .fine{flex-direction:column; gap:6px;}

  /* article */
  .article-hero{padding:44px 0 70px;}
  .article-cover{margin-top:-52px; padding:0 16px;}
  .prose{font-size:1rem;}
  .prose .flow{font-size:.88rem; padding:14px 16px;}
}

/* ---------- very small phones ---------- */
@media (max-width:380px){
  .value-grid,.steps,.quotes,.posts{grid-auto-columns:90%;}
  .perks{grid-auto-columns:78%;}
  .hero-stats{gap:14px;}
  .hero-stats b{font-size:1.2rem;}
  .sticky-cta span{font-size:.82rem;}
}

/* ---------- landscape phones ---------- */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .hero{padding:34px 0 40px;}
  .hero .wrap{grid-template-columns:1.2fr .8fr; gap:24px;}
  .hero-card{margin-top:0;}
}

/* ---------- footer: two link columns instead of four stacked ---------- */
@media (max-width:640px){
  .site-foot .cols{grid-template-columns:repeat(2,1fr) !important; gap:26px 18px;}
  .site-foot .cols > *:first-child{grid-column:1 / -1;}
}


/* ===== bill.css ===== */
/* ===========================================================
   customers.halaisms.com — the receipt
   The one section that argues the whole product in a single
   object: the bill you would have paid, re-printed with the
   card applied. Paper, dotted leaders, monospace amounts,
   and an ink stamp for what stayed in your pocket.
   =========================================================== */

.bill-wrap{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,64px); align-items:center;}

/* ---------- the side that talks ---------- */
.bill-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.bill-tab{
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  border-radius:999px; padding:9px 17px; font:inherit; font-size:.88rem; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,1.4,.4,1);
}
.bill-tab:hover{border-color:var(--gold); color:var(--ink); transform:translateY(-2px);}
.bill-tab.on{background:var(--red); border-color:var(--red); color:#fff;}
.bill-lede{margin-top:24px; font-size:1.02rem; color:var(--text); max-width:40ch;}
.bill-points{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px;}
.bill-points li{position:relative; padding-inline-start:26px; font-size:.95rem; color:var(--text);}
.bill-points li::before{
  content:""; position:absolute; inset-inline-start:0; top:.55em; width:9px; height:9px;
  border-radius:50%; border:2px solid var(--gold);
}

/* ---------- the paper ---------- */
.bill-stage{position:relative; display:grid; place-items:center; padding:18px 0;}
.bill-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 52%, rgba(124,22,38,.08), transparent 72%);
}
.bill{
  --paper-white:#FFFDF8;
  position:relative; width:min(430px,100%); background:var(--paper-white);
  padding:34px 30px 26px; transform:rotate(-1.1deg);
  box-shadow:0 34px 60px -30px rgba(50,20,25,.5), 0 2px 5px rgba(50,20,25,.09);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.bill-stage:hover .bill{transform:rotate(0deg) translateY(-4px);}
/* the faint tooth of real till paper */
.bill::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bill-edge{position:absolute; inset-inline:0; width:100%; height:7px; fill:var(--paper-white); display:block;}
.bill-edge.top{top:-6px;}
.bill-edge.bottom{bottom:-6px;}

.bill-top{text-align:center; display:grid; gap:5px; padding-bottom:18px; border-bottom:1px dashed #D8CEC4;}
.bill-mark{
  display:inline-grid; place-items:center; justify-self:center; width:40px; height:40px; border-radius:50%;
  background:var(--red); color:var(--gold-bright); font-family:'El Messiri',serif; font-weight:700; font-size:1rem;
}
.bill-top b{font-family:'El Messiri',serif; font-size:1.12rem; color:var(--ink); font-weight:600; margin-top:4px;}
.bill-meta{font-size:.76rem; color:var(--text-soft); letter-spacing:.02em;}

.bill-lines{list-style:none; margin:0; padding:18px 0; display:grid; gap:12px; border-bottom:1px dashed #D8CEC4;}
.bill-lines li{display:flex; align-items:baseline; gap:10px; font-size:.95rem; color:var(--text);}
/* the dotted leader that every printed bill has */
.bill-lines li::after{
  content:""; order:1; flex:1; height:1em;
  border-bottom:1.5px dotted #CFC4B8; transform:translateY(-.3em);
}
.bill-lines li span{order:0;}
.bill-lines li b{order:2; font-weight:500; color:var(--ink);}
.bill-lines li b,.bill-sum b{
  font-family:ui-monospace,'Segoe UI Mono','Cascadia Mono','Courier New',monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  direction:ltr; unicode-bidi:isolate;
}

.bill-sum{padding:16px 0 4px; display:grid; gap:11px;}
.bill-sum .row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:.95rem; color:var(--text);}
.bill-sum .row b{font-size:1rem; color:var(--ink);}
.bill-sum .off{color:var(--red);}
.bill-sum .off b{color:var(--red); font-weight:700;}
.bill-sum .off i{
  font-style:normal; background:rgba(124,22,38,.09); border-radius:999px;
  padding:1px 8px; font-size:.78rem; margin-inline-start:4px;
  direction:ltr; unicode-bidi:isolate; display:inline-block;
}
.bill-sum .total{
  margin-top:6px; padding-top:13px; border-top:2px solid var(--ink);
  font-family:'El Messiri',serif; font-size:1.06rem; color:var(--ink);
}
.bill-sum .total b{font-size:1.5rem; font-weight:700;}

/* stamped on the clear strip under the total — never across the amounts */
.bill-stamp{
  display:inline-block; margin:20px 0 2px; transform:rotate(-5deg); transform-origin:right center;
  border:2px dashed var(--red); color:var(--red); border-radius:12px;
  padding:8px 15px; font-family:'El Messiri',serif; font-weight:600; font-size:.88rem;
  opacity:.92;
}
.bill-stamp b{font-size:1.05rem; font-weight:700;}

.bill-code{
  height:30px; margin-top:16px;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 13px, var(--ink) 13px 14px, transparent 14px 18px);
  opacity:.82;
}
.bill-foot{margin-top:12px; text-align:center; font-size:.74rem; color:var(--text-soft);}

/* ---------- re-printing ---------- */
.bill.printing .bill-lines li,
.bill.printing .bill-sum .row{animation:print .5s cubic-bezier(.2,.7,.2,1) both;}
.bill.printing .bill-lines li:nth-child(2){animation-delay:.045s;}
.bill.printing .bill-lines li:nth-child(3){animation-delay:.09s;}
.bill.printing .bill-lines li:nth-child(4){animation-delay:.135s;}
.bill.printing .bill-sum .row:nth-child(2){animation-delay:.16s;}
.bill.printing .bill-sum .row:nth-child(3){animation-delay:.2s;}
@keyframes print{from{opacity:0; transform:translateY(-9px);} to{opacity:1; transform:none;}}
.bill-stamp.restamp{animation:restamp .55s cubic-bezier(.2,1.5,.35,1) both;}
@keyframes restamp{
  from{opacity:0; transform:rotate(-22deg) scale(1.7);}
  70%{opacity:.92; transform:rotate(-2deg) scale(.95);}
  to{opacity:.92; transform:rotate(-5deg) scale(1);}
}

/* ---------- narrower screens ---------- */
@media (max-width:1000px){
  .bill-wrap{grid-template-columns:1fr; gap:34px;}
  .bill-stage{order:-1;}
  .bill{width:min(430px,100%);}
}
@media (max-width:640px){
  .bill{padding:28px 22px 22px; transform:none;}
  .bill-stamp{padding:7px 12px; font-size:.82rem;}
  .bill-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px;}
  .bill-tabs::-webkit-scrollbar{display:none;}
  .bill-tab{flex:none;}
}
@media (prefers-reduced-motion:reduce){
  .bill,.bill-stage:hover .bill{transition:none; transform:none;}
  .bill.printing .bill-lines li,.bill.printing .bill-sum .row,.bill-stamp.restamp{animation:none;}
}


/* ===== cats.css ===== */
/* ===========================================================
   customers.halaisms.com — where the card works
   A mosaic instead of six identical cards: one lead tile, two
   wide ones, and a pair of small ones, with the copy set on the
   photograph rather than in a caption under it.
   Loads after site4.css so the phone rules here win.
   =========================================================== */

.cat-mosaic{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px;
  gap:14px; grid-auto-flow:dense;
}
.cat{
  position:relative; overflow:hidden; border-radius:var(--radius); background:var(--ink);
  isolation:isolate; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.cat:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.cat img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.94) contrast(1.03);
  transition:transform 1s cubic-bezier(.2,.7,.2,1); will-change:transform;
}
.cat:hover img{transform:scale(1.07);}
.cat::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(200deg, rgba(124,22,38,.35), rgba(201,151,31,.16));
  mix-blend-mode:soft-light;
}
.cat::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(18,11,13,.88) 4%, rgba(18,11,13,.34) 52%, rgba(18,11,13,.06));
}
.cat-in{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px 22px 20px; color:#fff;
}
.cat .rule{
  width:24px; height:2px; background:var(--gold); border-radius:2px; margin-bottom:12px;
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.cat:hover .rule{width:58px;}
.cat h3{font-family:'El Messiri',serif; font-size:1.1rem; font-weight:600; color:#fff; line-height:1.35;}
.cat p{
  font-size:.87rem; color:rgba(255,255,255,.76); max-width:34ch;
  opacity:0; max-height:0; margin-top:0; overflow:hidden; transform:translateY(7px);
  transition:opacity .35s ease, max-height .5s cubic-bezier(.2,.7,.2,1),
             margin-top .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.cat:hover p{opacity:1; max-height:6em; margin-top:7px; transform:none;}

/* the shapes that break the grid */
.cat.lead{grid-column:span 2; grid-row:span 2;}
.cat.wide{grid-column:span 2;}
.cat.lead h3{font-size:1.85rem;}
.cat.lead p{opacity:1; max-height:6em; margin-top:8px; transform:none; font-size:.95rem;}
.cat.lead .rule{width:44px;}
.cat.lead:hover .rule{width:84px;}

/* a phone reads the copy without hovering, so it is always shown */
@media (hover:none){
  .cat p{opacity:1; max-height:6em; margin-top:7px; transform:none;}
}

@media (max-width:1000px){
  .cat-mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:168px;}
  .cat.lead,.cat.wide{grid-column:span 2;}
  .cat.lead{grid-row:span 1;}
}
@media (max-width:640px){
  .cat-mosaic{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; scroll-padding-inline-start:16px;
    /* same edge-to-edge bleed the other phone rows use */
    padding:4px 16px 6px; margin-inline:-16px;
  }
  .cat-mosaic::-webkit-scrollbar{display:none;}
  .cat{flex:0 0 80%; scroll-snap-align:start; aspect-ratio:4/3; border-radius:18px;}
  .cat.lead h3{font-size:1.35rem;}
  /* two lines is all a tile needs at this size */
  .cat p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
}


/* ===== fun.css ===== */
/* ===========================================================
   customers.halaisms.com — v5, the playful layer
   Everything here is delight on top of a page that already works:
   the hero says a new word every few seconds, prices count down in
   front of you, the calculator throws gold when it wins, and the
   thread that carries the eye now has a lit head.
   Loads last. Every effect is off under prefers-reduced-motion.
   =========================================================== */

/* ---------- reading progress, hairline under the header ---------- */
.scroll-prog{
  position:absolute; inset-block-end:-1px; inset-inline-start:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 10px rgba(224,182,39,.6); z-index:5; transition:width .12s linear;
}
.site-head{position:sticky;}

/* ---------- the hero says a different word every few seconds ---------- */
.rot{
  display:inline-grid; vertical-align:bottom; position:relative;
  padding-inline:2px; overflow:hidden;
}
.rot > span{
  grid-area:1/1; color:var(--gold-bright); font-weight:700; white-space:nowrap;
  opacity:0; transform:translateY(.62em) rotate(2deg); transform-origin:bottom right;
  transition:opacity .38s ease, transform .52s cubic-bezier(.2,.8,.2,1);
}
.rot > span.is-on{opacity:1; transform:none;}
.rot > span.is-out{opacity:0; transform:translateY(-.62em) rotate(-2deg);}
.rot::after{
  content:""; position:absolute; inset-inline:2px; bottom:.06em; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.85; transform-origin:right; animation:rot-line 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes rot-line{
  0%,10%{transform:scaleX(0);}
  26%,78%{transform:scaleX(1);}
  94%,100%{transform:scaleX(0);}
}

/* ---------- hero card: follows the pointer, catches the light ---------- */
.hero-card .tilt{
  transform:rotateY(var(--ry,-9deg)) rotateX(var(--rx,4deg));
  position:relative;
}
.hero-card:hover .tilt{transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(1.02);}
.hero-card .tilt.is-tracking{transition:transform .14s ease-out; animation-play-state:paused;}
.hero-card .tilt::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.42) 48%,transparent 60%);
  transform:translateX(-120%); animation:sheen 7s ease-in-out 2.2s infinite;
}
@keyframes sheen{0%{transform:translateX(-120%);} 18%,100%{transform:translateX(120%);}}

/* the 50% badge lands like a stamp once the page has settled */
.hero-badge{animation:stamp .6s cubic-bezier(.2,1.5,.35,1) .5s both;}
@keyframes stamp{
  from{opacity:0; transform:scale(1.9) rotate(-14deg);}
  70%{opacity:1; transform:scale(.94) rotate(2deg);}
  to{opacity:1; transform:scale(1) rotate(-3deg);}
}
.hero-badge{transform:rotate(-3deg);}
.hero-badge:hover{transform:rotate(0) scale(1.06); transition:transform .3s cubic-bezier(.2,.9,.3,1.3);}

/* ---------- buttons answer back ---------- */
.btn{position:relative; overflow:hidden;}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-130%); transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::after{transform:translateX(130%);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-gold.is-calling{animation:call 1.1s ease-in-out;}
@keyframes call{
  0%,100%{transform:none; box-shadow:0 14px 30px -14px rgba(201,151,31,.8);}
  30%{transform:translateY(-3px) scale(1.04); box-shadow:0 20px 40px -14px rgba(224,182,39,.95);}
  60%{transform:translateY(0) scale(.99);}
}

/* ---------- cards lean toward you ---------- */
.value-grid,.perks,.tiers{perspective:1100px;}
.vcard,.perk{transform-style:preserve-3d;}
.vcard.is-tilt,.perk.is-tilt{
  transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .16s ease-out, box-shadow .3s ease;
}
.vcard .ph b{transition:transform .35s cubic-bezier(.2,1.4,.4,1);}
.vcard:hover .ph b{transform:scale(1.12) rotate(-3deg);}

/* ---------- the price falls in front of you ---------- */
.price-row.p-anim .was{text-decoration:none; position:relative;}
.price-row.p-anim .was::after{
  content:""; position:absolute; inset-inline:-2px; top:52%; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.price-row.p-anim.is-done .was::after{transform:scaleX(1);}
.price-row.p-anim .now{display:inline-block;}
.price-row.p-anim .save{opacity:0; transform:scale(.7) translateY(4px); transition:opacity .3s ease, transform .45s cubic-bezier(.2,1.6,.4,1);}
.price-row.p-anim.is-done .save{opacity:1; transform:none;}

/* ---------- step numbers pop when the step arrives ---------- */
.step-mark{transition:transform .5s cubic-bezier(.2,1.5,.35,1), background .5s ease, color .5s ease;}
.step-mark.lit{background:var(--gold); color:#fff; border-color:var(--gold); transform:scale(1.14) rotate(-6deg);}

/* ---------- the calculator is a toy ---------- */
.presets{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.preset{
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  border-radius:999px; padding:8px 15px; font:inherit; font-size:.85rem; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,1.4,.4,1), border-color .25s ease, color .25s ease, background .25s ease;
}
.preset:hover{border-color:var(--gold); color:var(--ink); transform:translateY(-2px);}
.preset.on{background:var(--red); border-color:var(--red); color:#fff;}
.preset-hint{font-size:.82rem; color:var(--text-soft); margin-top:16px;}
.calc-out{position:relative; overflow:hidden;}
.calc-out b{font-variant-numeric:tabular-nums;}
.calc-out b.bump{animation:bump .42s cubic-bezier(.2,1.5,.35,1);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.11);}100%{transform:scale(1);}}
.mult{
  display:inline-block; margin-inline-start:8px; background:rgba(224,182,39,.22); color:var(--gold-bright);
  border:1px solid rgba(224,182,39,.45); border-radius:999px; padding:2px 10px; font-size:.78rem;
  font-family:'El Messiri',serif; font-weight:700; vertical-align:middle;
}
.coin{
  position:absolute; top:26%; inset-inline-start:50%; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #FFF3C4, var(--gold-bright) 45%, var(--gold) 70%, #8A6410);
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.45); pointer-events:none;
  animation:coin-fly var(--d,1.1s) cubic-bezier(.25,.5,.35,1) forwards;
}
@keyframes coin-fly{
  0%{opacity:0; transform:translate(0,0) scale(.3);}
  14%{opacity:1; transform:translate(calc(var(--x,0px) * .22), calc(var(--y,120px) * -.22)) scale(1.05);}
  72%{opacity:1;}
  100%{opacity:0; transform:translate(var(--x,0px),var(--y,140px)) scale(.85) rotate(var(--r,180deg));}
}

/* ---------- the featured tier catches a gold sweep ---------- */
.tier.featured{position:relative; overflow:hidden;}
.tier.featured::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(224,182,39,.16) 50%,transparent 66%);
  transform:translateX(-130%); animation:sheen 9s ease-in-out 3s infinite;
}
.tier .price{transition:transform .35s cubic-bezier(.2,1.4,.4,1);}
.tier:hover .price{transform:scale(1.06);}

/* ---------- the thread now has a lit head ---------- */
.j-thread-fill::after{
  content:""; position:absolute; inset-inline-start:50%; bottom:0; width:11px; height:11px;
  margin-inline-start:-5.5px; border-radius:50%; background:var(--gold-bright);
  box-shadow:0 0 0 4px rgba(224,182,39,.22), 0 0 16px 3px rgba(224,182,39,.55);
  animation:head-pulse 2.4s ease-in-out infinite;
}
@keyframes head-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(224,182,39,.20), 0 0 14px 2px rgba(224,182,39,.45);}
  50%{box-shadow:0 0 0 8px rgba(224,182,39,.10), 0 0 22px 5px rgba(224,182,39,.70);}
}

/* ---------- counters land, they don't just stop ---------- */
.counter b.done{animation:bump .5s cubic-bezier(.2,1.5,.35,1);}
.counter{transition:transform .3s cubic-bezier(.2,1.2,.4,1), border-color .3s ease;}
.counter:hover{transform:translateY(-4px); border-color:var(--gold);}

/* ---------- the sticky bar reminds you it is there ---------- */
.sticky-cta{animation:rise .5s cubic-bezier(.2,1.2,.3,1) both;}
@keyframes rise{from{transform:translateY(120%);} to{transform:translateY(0);}}

/* ---------- keep it calm when the visitor asks for calm ---------- */
@media (prefers-reduced-motion:reduce){
  .rot::after,.hero-card .tilt::after,.tier.featured::after,.j-thread-fill::after{animation:none;}
  .hero-badge,.sticky-cta{animation:none;}
  .btn::after{display:none;}
  .coin{display:none;}
  .rot > span{transition:none;}
}