/* Rickshaw-art layer for the brand home and privacy pages. Loaded after
   components.css. Demo pages never load it, so they keep their own look.
   Each brand.css sets the --folk-* surface tokens; the palette below is shared. */

:root{
  --folk-pink:#be185d;     /* white text on it measures 6.0:1 */
  --folk-pink-hi:#db2777;
  --folk-green:#16a34a;
  --folk-blue:#2563eb;
  --folk-orange:#f97316;
  --folk-yellow:#fde047;
  --folk-ink:#1e1b4b;
  --folk-cream:#fff8e1;

  --folk-band:repeating-linear-gradient(90deg,
    var(--folk-pink-hi) 0 40px, var(--folk-green) 40px 80px,
    var(--folk-blue) 80px 120px, var(--folk-orange) 120px 160px);

  --font-folk:"Galada","Hind Siliguri",cursive;
}

/* ---------- headings ---------- */

/* Galada ships one weight. Asking for 700 makes the browser smear a fake bold. */
h1,h2{font-family:var(--font-folk);font-weight:400;line-height:1.38;letter-spacing:0}
h2{color:var(--folk-ink)}
.sec-dark h2{color:var(--folk-yellow)}

.eyebrow{
  font-family:var(--font-bn);font-size:13.5px;font-weight:700;
  letter-spacing:.02em;text-transform:none;
  color:#fff;background:var(--folk-pink);
  padding:3px 13px;border-radius:999px;border:2px solid var(--folk-ink);
}
.sec-dark .eyebrow{color:var(--folk-ink);background:var(--folk-yellow);border-color:var(--folk-yellow)}

/* ---------- buttons ---------- */

.btn{border-width:2.5px}
.btn-primary{
  background:var(--folk-btn);color:var(--folk-btn-on);
  border-color:var(--folk-ink);box-shadow:3px 3px 0 var(--folk-ink);
}
.btn-primary:hover{background:var(--folk-btn-hover);color:var(--folk-btn-on);box-shadow:5px 5px 0 var(--folk-ink)}
.btn-ghost{background:#fff;color:var(--folk-ink);border-color:var(--folk-ink);box-shadow:3px 3px 0 var(--folk-ink)}
.btn-ghost:hover{background:var(--folk-cream);color:var(--folk-ink);border-color:var(--folk-ink);box-shadow:5px 5px 0 var(--folk-ink)}
.btn-wa{border-color:var(--folk-ink);box-shadow:3px 3px 0 var(--folk-ink)}
.btn-msgr{border-color:var(--folk-ink);box-shadow:3px 3px 0 var(--folk-ink)}
.btn-sm{box-shadow:2px 2px 0 var(--folk-ink)}
.sec-dark .btn-ghost{background:transparent;color:var(--folk-yellow);border-color:var(--folk-yellow);box-shadow:3px 3px 0 var(--folk-pink-hi)}
.sec-dark .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--folk-yellow)}
/* an ink shadow vanishes on the dark panels */
.sec-dark .btn-primary,.sec-dark .btn-wa,.sec-dark .btn-msgr{box-shadow:3px 3px 0 var(--folk-pink-hi)}

/* ---------- nav ---------- */

.site-nav{border-bottom:3px solid var(--folk-ink)}
.nav-links a.lang-toggle:not(.btn){border:2px solid var(--folk-ink);color:var(--folk-ink);font-weight:600}

/* ---------- hero ---------- */

/* Background layers, top to bottom: hanging scallops, the chevron row, the
   colour band, then the brand surface. */
.hero{
  position:relative;overflow:hidden;
  color:var(--folk-hero-ink);
  padding-bottom:clamp(64px,8vw,96px);
  background:
    radial-gradient(circle at 50% 0, var(--folk-scallop) 11px, transparent 12px) top left/24px 12px repeat-x,
    linear-gradient(135deg, var(--folk-chevron) 25%, transparent 25%) left bottom 16px/16px 9px repeat-x,
    linear-gradient(225deg, var(--folk-chevron) 25%, transparent 25%) left bottom 16px/16px 9px repeat-x,
    var(--folk-band) left bottom/100% 16px no-repeat,
    var(--folk-hero-bg);
}
.hero::after{
  content:"";position:absolute;z-index:0;
  right:max(2vw, calc((100vw - var(--max)) / 2 - 10px));top:50%;
  width:clamp(220px,30vw,360px);aspect-ratio:1;
  transform:translateY(-54%) rotate(-8deg);
  background:url(/shared/folk-flower.svg) center/contain no-repeat;
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--folk-hero-head);text-shadow:3px 3px 0 var(--folk-hero-shadow);max-width:13ch}
.hero .lead{color:var(--folk-hero-ink);font-weight:500;max-width:46ch}
.hero .btn{box-shadow:3px 3px 0 var(--folk-hero-btn-shadow, var(--folk-ink))}
.hero .eyebrow{background:var(--folk-tag-bg);color:var(--folk-tag-ink);border-color:var(--folk-tag-bg)}

.trust-strip{border-top:0;padding-top:4px;gap:10px}
.trust-strip > span{
  background:#fff;color:var(--folk-ink);font-weight:600;font-size:14.5px;
  border:2px solid var(--folk-ink);border-radius:999px;padding:4px 14px 4px 10px;
}
.trust-strip svg{color:var(--folk-green)}

/* phones: tuck the flower into the top corner, clear of the headline */
@media (max-width:900px){
  .hero::after{width:160px;top:-30px;right:-36px;transform:rotate(-8deg)}
}
@media (max-width:560px){
  .hero::after{width:112px;top:-26px;right:-34px}
}

/* ---------- sections ---------- */

.sec-alt{
  background:var(--folk-band) top/100% 8px no-repeat, var(--folk-cream);
}
.sec-dark{
  background:var(--folk-band) top/100% 8px no-repeat, var(--folk-dark);
}
.sec-head h2{position:relative;padding-bottom:14px}
/* little three-dot flourish under each section title */
.sec-head h2::after{
  content:"";position:absolute;left:2px;bottom:0;width:56px;height:10px;
  background:
    radial-gradient(circle, var(--folk-pink-hi) 4px, transparent 4.5px) 0 0/18px 10px no-repeat,
    radial-gradient(circle, var(--folk-green) 4px, transparent 4.5px) 19px 0/18px 10px no-repeat,
    radial-gradient(circle, var(--folk-blue) 4px, transparent 4.5px) 38px 0/18px 10px no-repeat;
}

/* ---------- cards ---------- */

.card{
  --folk-c:var(--folk-pink-hi);
  border:2.5px solid var(--folk-ink);
  box-shadow:5px 5px 0 var(--folk-c);
}
.card:hover{border-color:var(--folk-ink);box-shadow:7px 7px 0 var(--folk-c);transform:translate(-2px,-2px)}
.grid > .card:nth-child(4n+2){--folk-c:var(--folk-green)}
.grid > .card:nth-child(4n+3){--folk-c:var(--folk-blue)}
.grid > .card:nth-child(4n+4){--folk-c:var(--folk-orange)}
.sec-dark .card{border-color:var(--folk-yellow)}

.card-icon{background:var(--folk-c);color:#fff;border:2px solid var(--folk-ink)}

.demo-thumb{border-bottom:2.5px solid var(--folk-ink)}
.demo-card:hover{box-shadow:7px 7px 0 var(--folk-c)}
.demo-open{color:var(--folk-pink)}

.price-tag .price{color:var(--folk-pink)}
.price-card.featured{
  --folk-c:var(--folk-pink-hi);
  background:#fff1f7;border-color:var(--folk-ink);
  box-shadow:7px 7px 0 var(--folk-c);
}
.pill{background:var(--folk-yellow);color:var(--folk-ink);border:2px solid var(--folk-ink);font-size:13px;box-shadow:none}
.check-list li::before{background:var(--folk-green)}

/* coupon look for the add-on price strips */
.addon{
  background:#fff;color:var(--folk-ink);
  border:2.5px dashed var(--folk-pink-hi);
}
.addon b{color:var(--folk-pink)}

.step{border-top:4px solid var(--folk-ink)}
.step .step-n{color:var(--folk-pink);font-size:15px}
.sec-dark .step{border-color:var(--folk-yellow)}

.quote{border-left:4px solid var(--folk-pink-hi)}
.q-dot{background:rgba(255,255,255,.28)}
.q-dot.active{background:var(--folk-yellow)}

.founder{border:2.5px solid var(--folk-ink);box-shadow:5px 5px 0 var(--folk-green)}
.founder .avatar{background:var(--folk-yellow);color:var(--folk-ink);border:2.5px solid var(--folk-ink)}

.faq{border-top:2px solid var(--folk-ink)}
.faq details{border-bottom:2px dashed var(--line-strong)}

.field input,.field textarea,.field select{border-width:2px}
.sec-dark .field input,.sec-dark .field textarea,.sec-dark .field select{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);
}
.sec-dark .field select option{background:var(--folk-dark)}

/* ---------- offer banner ---------- */

.offer-sec{padding:clamp(40px,6vw,64px) 0;background:var(--bg)}
.offer-banner{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.3fr 1fr;gap:20px 34px;align-items:center;
  padding:clamp(26px,4vw,40px) clamp(22px,4vw,44px);
  color:#fff;
  background:
    radial-gradient(circle at 0 50%, var(--bg) 13px, transparent 14px) left center/28px 28px repeat-y,
    radial-gradient(circle at 100% 50%, var(--bg) 13px, transparent 14px) right center/28px 28px repeat-y,
    linear-gradient(115deg, var(--folk-pink) 0%, #c2410c 100%);
  border-radius:var(--radius-lg);
  border:3px solid var(--folk-ink);
  box-shadow:8px 8px 0 var(--folk-ink);
}
.offer-banner h2{color:#fff;font-size:clamp(26px,4.2vw,40px);text-shadow:3px 3px 0 var(--folk-ink);margin:8px 0 6px}
.offer-banner p{color:#fff3f8;font-size:16.5px;max-width:44ch}
.offer-banner .eyebrow{background:var(--folk-yellow);color:var(--folk-ink)}
.offer-price{
  background:var(--folk-cream);color:var(--folk-ink);
  border:3px solid var(--folk-ink);border-radius:var(--radius);
  padding:20px 22px;text-align:center;
  transform:rotate(-2deg);
}
.offer-price s{display:block;font-size:15px;color:var(--muted)}
.offer-price .price{display:block;font-size:clamp(34px,5vw,46px);font-weight:700;color:var(--folk-pink);line-height:1.15}
.offer-price .per{font-size:14px;color:var(--muted)}
.offer-save{
  display:inline-block;margin:10px 0 14px;
  background:#15803d;color:#fff;font-weight:700;font-size:15px;  /* green-700: white on it is 5.0:1 */
  padding:3px 14px;border-radius:999px;border:2px solid var(--folk-ink);
}
@media (max-width:760px){
  .offer-banner{grid-template-columns:1fr}
  .offer-price{transform:none}
}

/* ---------- footer ---------- */

.site-foot{background:var(--folk-band) top/100% 8px no-repeat, var(--folk-dark)}

/* SystemLagbe's bundle panel, the same offer told at length */
.bundle{
  margin-top:30px;
  padding:clamp(24px,3.4vw,36px);
  background:
    radial-gradient(circle at 50% 0, var(--folk-pink-hi) 9px, transparent 10px) top left/20px 10px repeat-x,
    var(--folk-cream);
  border:3px solid var(--folk-ink);border-radius:var(--radius-lg);
  box-shadow:8px 8px 0 var(--folk-pink-hi);
}
.bundle .addon{border-style:solid;border-color:var(--folk-ink);font-size:16.5px}
.bundle h3{font-family:var(--font-folk);font-weight:400;color:var(--folk-ink)}