/* Ané's omega-3 page. Look A · Playful (chosen 2026-10-26): phone-width page, hero + 30 s animation,
   then a numbered 7-step journey on one vertical line, testimonial, closing, sticky WhatsApp dock. */

@font-face { font-family: "Kalam"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/kalam-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500 800; font-style: normal; font-display: swap; src: url("fonts/figtree-variable.woff2") format("woff2"); }

:root {
  --bg: #FFF8F4; --card: #FFFFFF; --ink: #241B20; --muted: #6D6067; --line: #EADBD6;
  --accent: #C13F7C; --on-accent: #FFFFFF; --accent-soft: #F6D6E5;
  --pop: #F7D04A; --on-pop: #241B20; --pop-soft: #FFF1BF;
  --cool: #3F8B76; --on-cool: #FFFFFF; --cool-soft: #CFEBE0;
  --soft4: #B79AD6; --on-soft4: #241B20; --soft4-bg: #E6DAF4;
  --wa: #1FA855; --wa-soft: #D5F2DF; --chat-bg: #EFE7DE; --chat-out: #DCF7C5;
  --ghost: rgba(36,27,32,.12); --scrim: rgba(0,0,0,.25);
  --display: "Kalam", "Comic Sans MS", cursive; --display-w: 700;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif; --label-w: 700; --label-track: .08em;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg: 26px; --r-md: 22px; --r-sm: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--display); font-weight: var(--display-w); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.kicker { font: var(--label-w) 14px/1 var(--label); text-transform: uppercase; letter-spacing: var(--label-track); }

/* ---------- page ---------- */
.view { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: 130px; }
.page { max-width: 440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* hero */
.hero { background: var(--accent); color: var(--on-accent); border-radius: var(--r-lg); overflow: hidden; padding: 22px 20px 0; display: grid; gap: 12px; }
.hero .kicker { color: var(--pop); }
.hero h1 { font-size: 54px; line-height: 1.05; }
.hero h1 span { color: var(--pop); display: block; }
.nowrap { white-space: nowrap; }
.hero-photo { margin: 6px -20px 0; aspect-ratio: 1200 / 630; max-width: calc(100% + 40px); background: var(--accent-soft) url("img/hero.jpg") center / cover no-repeat; position: relative; }
.sticker { position: absolute; right: 14px; top: -8px; width: 92px; height: 92px; border-radius: 50%; background: var(--ink); color: #FFFFFF; display: grid; place-items: center; text-align: center; font: var(--display-w) 16px/1.05 var(--display); transform: rotate(-9deg); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.sticker em { font-style: normal; color: var(--pop); }

/* animation */
.player { position: relative; aspect-ratio: 9 / 16; max-width: 100%; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); cursor: pointer; border: 0; padding: 0; display: block; font: inherit; color: inherit; text-align: center; }
/* which scene is showing, not how far along: nothing here looks like a timeline you can skip on */
.dots { position: absolute; bottom: 23px; left: 16px; display: flex; gap: 6px; z-index: 3; pointer-events: none; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.45); transition: width .3s ease, background-color .3s ease; }
.dots i.on { width: 18px; background: #FFFFFF; }
.vtag, .pausehint { position: absolute; z-index: 3; font: var(--label-w) 12px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; background: var(--scrim); padding: 6px 9px; border-radius: 999px; }
.vtag { top: 12px; left: 12px; }
.pausehint { bottom: 14px; right: 14px; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 56px 22px 40px; opacity: 0; transition: opacity .45s ease; }
.scene.on { opacity: 1; }
.player.paused * { animation-play-state: paused !important; }
.scene .cap { font: var(--display-w) 44px/1.02 var(--display); }
.scene .sub { font: var(--label-w) 17px/1.15 var(--label); letter-spacing: var(--label-track); text-transform: uppercase; margin-top: 6px; }
.scene .stepno { font: var(--label-w) 15px/1 var(--label); letter-spacing: var(--label-track); text-transform: uppercase; background: rgba(255,255,255,.92); color: #241B20; padding: 7px 11px; border-radius: 999px; }
.stack { display: grid; justify-items: center; gap: 14px; }
.s1 { background: var(--accent); color: var(--on-accent); } .s1 .hl { color: var(--pop); }
.s2 { background: var(--pop); color: var(--on-pop); }
.s3 { background: var(--wa); color: #FFFFFF; }
.s4 { background: var(--cool); color: var(--on-cool); }
.s5 { background: var(--soft4); color: var(--on-soft4); }
.s6 { background: var(--ink); color: var(--bg); } .s6 .sub { color: var(--pop); }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 260px; }
.grid4 > div { background: #FFFFFF; border-radius: var(--r-md); padding: 12px 8px 10px; display: grid; justify-items: center; gap: 6px; font: var(--label-w) 15px/1 var(--label); text-transform: uppercase; letter-spacing: .03em; color: #241B20; }
.grid4 .e { font-size: 26px; line-height: 1; }
.coinrow { display: flex; gap: 10px; justify-content: center; height: 70px; align-items: end; }
.coin { width: 52px; height: 52px; border-radius: 50%; background: var(--pop); border: 4px solid rgba(0,0,0,.12); display: grid; place-items: center; font: 800 22px/1 var(--body); color: var(--on-pop); }
.ane-chip { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; color: #241B20; border-radius: 999px; padding: 8px 18px 8px 8px; font: 800 18px/1 var(--body); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 800 18px var(--body); flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .scene.on .pop { animation: pop .55s cubic-bezier(.2,1.4,.4,1) both; }
  .scene.on .pop.d1 { animation-delay: .25s; } .scene.on .pop.d2 { animation-delay: .5s; } .scene.on .pop.d3 { animation-delay: .75s; } .scene.on .pop.d4 { animation-delay: 1s; } .scene.on .pop.d5 { animation-delay: 1.4s; }
  .scene.on .drop { animation: drop 1.6s ease-in .6s infinite; }
  .scene.on .swing { animation: swing 2.4s ease-in-out infinite alternate; transform-origin: 85% 50%; }
  .scene.on .drive { animation: drive 1.4s cubic-bezier(.2,.9,.3,1) both; }
  .scene.on .coin { animation: coin .6s cubic-bezier(.3,1.5,.5,1) both; }
  .scene.on .coin:nth-child(2) { animation-delay: .35s; } .scene.on .coin:nth-child(3) { animation-delay: .7s; }
  .scene.on .pulse { animation: pulse 1.2s ease-in-out .8s infinite; }
  .wa-btn, .jump { transition: transform .15s ease; }
  .wa-btn:active, .jump:active { transform: scale(.97); }
}
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(46px); opacity: 1; } 100% { transform: translateY(52px); opacity: 0; } }
@keyframes swing { from { transform: rotate(-6deg); } to { transform: rotate(4deg); } }
@keyframes drive { from { transform: translateX(-140%); } to { transform: none; } }
@keyframes coin { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* overview */
.overview { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; display: grid; gap: 12px; }
.overview .kicker { color: var(--accent); }
.overview h2 { font-size: 28px; line-height: 1.05; }
.jumps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; position: relative; }
.jumps::before { content: ""; position: absolute; left: 7%; right: 7%; top: 17px; border-top: 2px dashed var(--line); }
.jump { text-decoration: none; cursor: pointer; display: grid; justify-items: center; gap: 6px; width: 100%; font: inherit; color: var(--ink); position: relative; }
.jump .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: var(--display-w) 18px/1 var(--display); }
.jump span:last-child { font: var(--label-w) 11.5px/1.05 var(--label); text-transform: uppercase; letter-spacing: .02em; text-align: center; }

/* journey */
.journey { list-style: none; margin: 0; padding: 0; display: grid; }
.jstep { display: grid; grid-template-columns: 40px 1fr; gap: 10px; position: relative; padding-bottom: 14px; scroll-margin-top: 130px; }
.jstep::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; border-left: 3px solid var(--line); }
.jstep:last-child::before { display: none; }
.num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: var(--display-w) 22px/1 var(--display); position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.jcard { border-radius: var(--r-md); padding: 16px 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; position: relative; }
.jcard .kicker { opacity: .8; }
.jcard h2 { font-size: 30px; line-height: 1.02; }
.jcard p { font-size: 15px; }
.jcard .fine { font-size: 13px; color: var(--muted); }
.c1 { background: var(--accent-soft); } .n1 { background: var(--accent); color: var(--on-accent); }
.c2 { background: var(--pop); color: var(--on-pop); } .n2 { background: var(--pop); color: var(--on-pop); }
.c3 { background: var(--wa-soft); } .n3 { background: var(--wa); color: #FFFFFF; }
.c4 { background: var(--cool-soft); } .n4 { background: var(--cool); color: var(--on-cool); }
.c5 { background: var(--soft4-bg); } .n5 { background: var(--soft4); color: var(--on-soft4); }
.c6 { background: var(--pop-soft); } .n6 { background: var(--pop); color: var(--on-pop); }
.c7 { background: var(--ink); color: var(--bg); } .n7 { background: var(--ink); color: var(--pop); }
.c7 .kicker { color: var(--pop); opacity: 1; }

/* step contents */
.meet { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.3; font-weight: 700; }
.benefits li { display: grid; grid-template-columns: 24px 1fr; gap: 6px; }
.flavours { display: flex; flex-wrap: wrap; gap: 6px; }
.flavours span { background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 11px; font: var(--label-w) 13.5px/1 var(--label); text-transform: uppercase; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 6px; }
.flavours i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.pricecard { background: var(--card); color: var(--ink); border-radius: var(--r-sm); padding: 14px; display: grid; gap: 6px; }
.price { font: 800 42px/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.price-sub { font-size: 13px; color: var(--muted); }
.price-then { font: 800 20px/1.1 var(--body); }
.tag { justify-self: start; background: var(--cool-soft); color: var(--cool); border-radius: 999px; padding: 6px 10px; font: var(--label-w) 13px/1 var(--label); text-transform: uppercase; letter-spacing: .04em; }
.minichat { background: var(--chat-bg); border-radius: var(--r-sm); padding: 10px; display: grid; gap: 6px; }
.minichat .m { max-width: 84%; border-radius: 10px; padding: 7px 9px; font-size: 14px; line-height: 1.3; background: #FFFFFF; color: #241B20; }
.minichat .m.me { justify-self: end; background: var(--chat-out); }
.paytrack { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.paytrack > div { background: var(--card); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 3px; }
.paytrack b { font: var(--label-w) 12.5px/1 var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.paytrack span { font: 800 20px/1.1 var(--body); font-variant-numeric: tabular-nums; }
.paytrack .then { background: var(--cool); color: var(--on-cool); } .paytrack .then b { color: inherit; opacity: .85; }
.track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.track > div { display: grid; gap: 4px; justify-items: center; }
.track .cell { width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 10px; display: grid; place-items: center; background: var(--card); }
.track .cell.box { background: var(--soft4); color: var(--on-soft4); }
.track .lab { font: var(--label-w) 11.5px/1 var(--label); text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.daily { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.daily .spoonbox { background: var(--card); border-radius: var(--r-sm); padding: 14px 12px; color: var(--pop); }

/* testimonial */
.quote { background: var(--accent-soft); border-radius: var(--r-md); padding: 20px 18px; display: grid; gap: 10px; position: relative; }
.quote .kicker { color: var(--accent); }
.quote .mark { font: var(--display-w) 72px/1 var(--display); color: var(--accent); height: 34px; overflow: hidden; }
.quote p { font-size: 16px; }
.quote .who { font-weight: 800; }

/* closing + dock */
.closing { background: var(--accent); color: var(--on-accent); border-radius: var(--r-lg); text-align: center; display: grid; justify-items: center; gap: 14px; padding: 28px 20px; }
.closing h2 { font-size: 38px; line-height: 1.1; }
/* inline-block: the highlight is one block under "Happy kids.", never painted over it */
.closing h2 span { display: inline-block; margin-top: 6px; line-height: 1.05; background: var(--pop); color: var(--on-pop); padding: 0 .2em; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.wa-btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--wa); color: #FFFFFF; font: 800 18px/1 var(--body); padding: 16px 24px; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(31,168,85,.6); text-decoration: none; }
.wa-btn.small { font-size: 16px; padding: 13px 18px; justify-self: start; }
.partner { text-align: center; font-size: 13px; color: var(--muted); padding-top: 6px; }
.credit { text-align: center; font-size: 12px; color: var(--muted); margin-top: -6px; }
.credit a { color: inherit; text-underline-offset: 2px; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, var(--bg) 40%); }
.dock-inner { max-width: 440px; margin: 0 auto; display: grid; gap: 8px; }
.dock .wa-btn { width: 100%; }
.wa-note { font-size: 13.5px; background: var(--card); color: var(--ink); border: 1.5px dashed var(--wa); border-radius: 12px; padding: 10px 12px; }


/* small phones: give the words the full card width */
@media (max-width: 360px) {
  .meet { grid-template-columns: 1fr; }
  .meet > svg { display: none; }
  .daily { grid-template-columns: 1fr; }
  .daily .spoonbox { justify-self: start; }
  .price { font-size: 32px; }
  .price small { font-size: 14px; }
  .hero h1 { font-size: 46px; }
  .overview { padding: 16px 12px; }
  .jumps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .jumps::before { top: 15px; }
  .jump .dot { width: 30px; height: 30px; font-size: 16px; }
  .jump span:last-child { font-size: 10px; letter-spacing: 0; }
}

/* ?status: only the animation, filling the screen (used to record the Status MP4) */
body.status .view { padding: 0; }
body.status .page { max-width: none; display: block; }
body.status .page > :not(#player), body.status .dock, body.status .pausehint, body.status .vtag { display: none; }
body.status #player { width: 100vw; height: 100vh; aspect-ratio: auto; max-width: none; border-radius: 0; }