/* ============================================================
   EXO — "Playful" skin (Superr-inspired)
   Loads AFTER styles.css and overrides: rounded lowercase display,
   marker-orange, sticker doodles, hand-drawn arrows, tilted phone,
   bold orange footer band.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root{
  --paper:#FDFBF9;
  --paper-2:#F7EFE9;
  --ink:#2B1A07;          /* cocoa ink */
  --muted:#7A6A57;
  --line:rgba(43,26,7,.12);
  --card:#FFFFFF;
  --rust:#FF6F1E;         /* marker orange */
  --ember:#FF8A45;
  --glow:rgba(255,111,30,.22);
  /* candy sticker accents for the feature tabs */
  --a-food:#FF6F1E;
  --a-supp:#22C55E;
  --a-sleep:#3B82F6;
  --serif:'Fredoka', system-ui, sans-serif;
}
/* rounded, friendly, lowercase display */
.display{font-weight:600;letter-spacing:-.005em;line-height:1.04;text-transform:lowercase;}
.display em{font-style:normal;font-weight:600;color:var(--rust);}
.eyebrow{text-transform:uppercase;}            /* keep eyebrow as-is */
.brand{font-weight:600;}

/* pill buttons, marker feel */
.appstore{border-radius:999px;}
.btn{border-radius:999px;}
.btn-ghost{border-width:1.5px;border-color:var(--ink);}
.pill{border-width:1.5px;border-color:var(--line);}
.tab.active{border-color:color-mix(in srgb,var(--accent,var(--rust)) 45%,var(--line));}

/* tilt the imagery a touch (Superr = 5-8° off-axis) */
.phone-hero{transform:rotate(4deg);}
.showcase-phone .phone{transform:rotate(-3deg);}

/* ---- sticker doodles ---- */
.sticker{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(43,26,7,.14));}
.sticker svg{display:block;}

/* ---- hand-drawn note + arrow ---- */
.note{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:0;}
.note .note-txt{font-family:var(--serif);font-weight:600;font-size:clamp(17px,2vw,21px);color:var(--ink);
  transform:rotate(-7deg);white-space:nowrap;}
.note .note-arrow{width:150px;height:58px;color:var(--rust);margin-top:-2px;}
.note .note-arrow path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---- soft footer band (playful rounded corner, no loud orange) ---- */
footer{background:var(--paper-2);border:0;border-top:1px solid var(--line);
  border-radius:48px 22px 0 0;padding:36px 0 30px;margin-top:8px;color:var(--ink);}
footer .brand{color:var(--ink);}
.foot-nav a,.foot-c{color:var(--muted);}
.foot-nav a:hover{color:var(--rust);}
/* keep the in-phone app screens calm/legible regardless of skin (already constant) */

@media (max-width:880px){
  .note{display:none;}                 /* hide free-floating notes when stacked */
  .phone-hero{transform:rotate(3deg);}
}