/* ============================================================
   AWGroup LP — DECO (maximalist: icons · bubbles · notes · stickers)
   layered last — go こてこて, stay (barely) readable
   ============================================================ */

/* ---------- doodle icon helper ---------- */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.14em;fill:currentColor;}
.ico.lg{width:1.5em;height:1.5em;}
.deco-rose{color:var(--rose);} .deco-aqua{color:var(--aqua-deep);}
.deco-gold{color:var(--gold-mid);} .deco-lav{color:var(--lav-deep);}

/* ---------- scatter layer (random doodles behind/around) ---------- */
.deco-scatter{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.deco-scatter .d{position:absolute;opacity:.5;animation:bobble var(--t,5s) ease-in-out var(--dl,0s) infinite;}
@keyframes bobble{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}
  50%{transform:translateY(-7px) rotate(calc(var(--r,0deg) + 8deg));}}
.scale .deco-scatter .d{opacity:.42;}

/* ---------- speech bubbles (one-liner annotations) ---------- */
.bubble{position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-disp);font-weight:700;font-size:12.5px;line-height:1.35;
  padding:9px 14px;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 8px 20px -10px rgba(120,40,90,.5);border:2px solid var(--pink-soft);z-index:6;}
.bubble .ico{color:var(--rose);font-size:15px;}
.bubble::after{content:"";position:absolute;width:13px;height:13px;background:#fff;
  border-right:2px solid var(--pink-soft);border-bottom:2px solid var(--pink-soft);
  transform:rotate(45deg);bottom:-8px;left:22px;}
.bubble--up::after{top:-8px;bottom:auto;transform:rotate(225deg);}
.bubble--rose{background:linear-gradient(120deg,#FFE3F0,#FFD0E6);border-color:#FFB7D8;color:var(--rose-ink);}
.bubble--rose::after{background:#FFD0E6;border-color:#FFB7D8;}
.bubble--aqua{background:linear-gradient(120deg,#E2F4FF,#CDEBFD);border-color:#A6DDF6;color:#1C6E92;}
.bubble--aqua::after{background:#CDEBFD;border-color:#A6DDF6;}
.bubble--lav{background:linear-gradient(120deg,#EEE6FF,#E0D2FF);border-color:#C7B2F2;color:var(--lav-deep);}
.bubble--lav::after{background:#E0D2FF;border-color:#C7B2F2;}
.bubble--gold{background:linear-gradient(120deg,#FFF4D6,#FCE9B0);border-color:#EDD17C;color:#8A6312;}
.bubble--gold::after{background:#FCE9B0;border-color:#EDD17C;}
.bubble--float{position:absolute;}
.bubble.wiggle{animation:wiggle 3.4s ease-in-out infinite;}
@keyframes wiggle{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}

/* ---------- POINT callout ---------- */
.pointflag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:900;
  font-size:12px;letter-spacing:.04em;color:#fff;padding:6px 13px 6px 11px;border-radius:999px;
  background:var(--rose-grad);box-shadow:var(--shadow-rose);}
.pointflag .ico{color:var(--gold-light);font-size:14px;}
.pointflag.aqua{background:linear-gradient(120deg,#6FC7EC,#3E9FCF);box-shadow:0 14px 26px -12px rgba(46,155,203,.6);}

/* ---------- washi tape ---------- */
.tape2{position:absolute;width:96px;height:26px;z-index:7;opacity:.9;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 9px,transparent 9px 12px),
    linear-gradient(120deg,#FFC7E0,#C9B6F2);box-shadow:0 2px 6px rgba(0,0,0,.08);}
.tape2.aqua{background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 9px,transparent 9px 12px),
    linear-gradient(120deg,#AEE3F7,#BFD0FF);}

/* ---------- ribbon banner heading ---------- */
.ribbonhead{display:inline-block;position:relative;font-family:var(--f-disp);font-weight:900;
  font-size:13px;letter-spacing:.06em;color:#fff;padding:8px 20px;background:var(--rose);
  box-shadow:0 8px 18px -8px rgba(216,30,114,.6);}
.ribbonhead::before,.ribbonhead::after{content:"";position:absolute;top:0;width:12px;height:100%;background:var(--rose);}
.ribbonhead::before{left:-11px;clip-path:polygon(0 50%,100% 0,100% 100%);}
.ribbonhead::after{right:-11px;clip-path:polygon(100% 50%,0 0,0 100%);}

/* ---------- mini caption note on photos ---------- */
.notetab{position:absolute;z-index:7;font-family:var(--f-disp);font-weight:700;font-size:11px;
  color:var(--ink);background:#fff;padding:5px 10px;border-radius:999px;
  box-shadow:0 6px 14px -7px rgba(120,40,90,.5);display:inline-flex;align-items:center;gap:5px;}
.notetab .ico{color:var(--rose);font-size:13px;}

/* ---------- dotted connector ---------- */
.dotjoin{display:block;height:18px;margin:2px auto;width:2px;
  background:repeating-linear-gradient(var(--rose) 0 4px,transparent 4px 9px);opacity:.5;}

/* ---------- sparkle burst (on reveal) ---------- */
.burst{position:absolute;width:30px;height:30px;pointer-events:none;z-index:6;color:var(--gold-light);}
.burst svg{width:100%;height:100%;animation:burstPop 1s ease-out both;}
@keyframes burstPop{0%{transform:scale(0) rotate(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1.4) rotate(40deg);opacity:0;}}

/* ---------- annotation row (chips of one-liners) ---------- */
.noterow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;}
.notechip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-disp);font-weight:700;
  font-size:12px;padding:7px 12px;border-radius:999px;background:#fff;color:var(--ink-soft);
  border:1.5px dashed var(--pink-soft);}
.notechip .ico{color:var(--rose);font-size:14px;}
.scale .notechip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;}
.scale .notechip .ico{color:var(--gold-light);}

/* ---------- decorate section eyebrows with flanking icons ---------- */
.eyebrow .ico{font-size:15px;color:var(--rose);}

/* ---------- bubble cluster around hero ---------- */
.hero__bubbles{position:absolute;inset:0;z-index:5;pointer-events:none;}
.hero__bubbles .bubble{position:absolute;pointer-events:auto;}

/* ---------- benefit group: little icon coins ---------- */
.brow .ck{position:relative;}
.bgroup__h .ic{display:inline-flex;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);
  align-items:center;justify-content:center;}
.bgroup__h .ic .ico{font-size:17px;color:#fff;}

/* ---------- flow step: cheer bubble ---------- */
.step__c .cheer{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-family:var(--f-disp);font-weight:700;font-size:12px;color:var(--rose-deep);
  background:var(--blush);padding:6px 12px;border-radius:999px;}
.step__c .cheer .ico{font-size:14px;}

/* keep it from overflowing on tiny screens */
.bubble--float{max-width:46vw;}
@media (prefers-reduced-motion:reduce){
  .deco-scatter .d,.bubble.wiggle,.burst svg{animation:none !important;}
}