:root {
  --teal: #125C60; --pine: #1D4A3E; --gold: #9C7838; --champ: #D9BC85; --coral: #F47764; --aqua: #2FC2B8; --deep-aqua: #127A75;
  --light-aqua: #BFEDE9; --sage: #E3ECE4; --cream: #F7F1E6; --choc: #3F2B22; --mute: #6E5E52; --line: #E2D7C4;
  --sec: #125C60; --sec-soft: #E3ECE4; --sec-on: #fff;
  --display: "Manrope", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--choc); font: 16px/1.5 var(--body); }
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); padding: 12px 20px 10px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.logo { height: 22px; width: auto; display: block; }
.logo-link { display: inline-block; border-radius: 6px; line-height: 0; }
.logo-link:focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; }
.back { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--teal); font: 600 14px var(--body); border-radius: 999px; padding: 7px 14px; min-height: 36px; cursor: pointer; }
.back { transition: background .2s, color .2s, border-color .2s; }
.back:hover, .back:focus-visible { background: var(--teal); border-color: var(--teal); color: #fff; }
.progress { height: 6px; border-radius: 6px; background: var(--sage); margin-top: 10px; overflow: hidden; }
.bar { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--aqua) 45%, var(--champ) 75%, var(--coral)); background-size: 560px 100%; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.screen { flex: 1; padding: 8px 20px 28px; animation: in .35s ease both; }
@keyframes in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
h1, h2, h3 { font-family: var(--display); color: var(--teal); margin: 0; letter-spacing: -.3px; }
h1 { font-size: 34px; line-height: 1.08; font-weight: 800; margin: 10px 0 12px; }
h2 { font-size: 24px; line-height: 1.2; font-weight: 700; margin: 6px 0 10px; }
h3, .h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
h1:focus, h2:focus { outline: none; }
.eyebrow { font: 700 12px var(--body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.eyebrow.ico { color: var(--teal); }
.eyebrow.ico .pico { color: var(--sec); }
.pico { width: 18px; height: 18px; flex: none; }
.lede { font-size: 17px; color: var(--choc); margin: 10px 0 18px; }
.hint { color: var(--mute); font-size: 14px; margin: -4px 0 12px; }
.legal { color: var(--mute); font-size: 13px; line-height: 1.5; }
.legal.center { text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.email { color: inherit; background: none; border: 0; padding: 0; font-weight: inherit; }
.note { background: var(--sage); color: var(--pine); border-radius: 14px; padding: 10px 14px; font-size: 14px; }
.err { color: #A3402F; font-weight: 600; font-size: 14px; }
.cheer { color: var(--deep-aqua); font-weight: 700; font-size: 14px; margin: 6px 0 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.qtext { display: flex; gap: 10px; align-items: baseline; }
h2.qtext { margin: 8px 0 12px; } h3.qtext { margin: 14px 0 10px; color: var(--pine); }
.qn { font: 800 12px var(--display); color: var(--sec-on); background: var(--sec); border-radius: 999px; padding: 3px 8px; transform: translateY(-3px); flex: none; }
.chosen { background: var(--cream); border-left: 3px solid var(--champ); border-radius: 0 12px 12px 0; padding: 10px 14px; font-weight: 600; color: var(--pine); margin: 0 0 6px; }

/* Buttons */
.btn { appearance: none; display: block; width: 100%; border: 0; border-radius: 16px; background: var(--teal); color: #fff; font: 700 17px var(--display); padding: 16px 20px; min-height: 54px; cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s; box-shadow: 0 6px 18px rgba(18,92,96,.22); }
.btn:hover { background: var(--pine); } .btn:active { transform: scale(.98); }
.btn:disabled { background: #B9C9C6; box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--teal); border: 1.5px solid var(--teal); box-shadow: none; }
.btn.ghost:hover { background: var(--sage); }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.foot { position: sticky; bottom: 0; padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 14px); background: linear-gradient(rgba(255,255,255,0), #fff 30%); margin-top: 8px; }

/* Options */
.opts { display: grid; gap: 10px; } .opts.two { grid-template-columns: 1fr 1fr; }
.opt { appearance: none; text-align: left; display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; color: var(--choc); border: 1.5px solid var(--line); border-radius: 16px; padding: 13px 15px; min-height: 52px; font: 500 16px var(--body); cursor: pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .2s; }
.opt:hover { border-color: var(--sec); }
.opt[aria-pressed="true"] { border-color: var(--sec); background: var(--sec-soft); box-shadow: 0 0 0 1px var(--sec) inset; font-weight: 600; }
.mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid #C8BBA8; display: grid; place-items: center; background: #fff; transition: background .15s, border-color .15s; }
.opt.multi .mark { border-radius: 7px; }
.mark svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .25s ease .05s; }
.opt[aria-pressed="true"] .mark { background: var(--sec); border-color: var(--sec); }
.opt[aria-pressed="true"] .mark svg { stroke: var(--sec-on); stroke-dashoffset: 0; }
.pop { animation: pop .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(.96); } 100% { transform: scale(1); } }

/* Picture tiles (texture) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles .opt { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px 12px; position: relative; }
.tiles .mark { position: absolute; top: 10px; right: 10px; }
.tile-art { display: block; width: 100%; background: var(--cream); border-radius: 12px; }
.tex { display: block; width: 100%; height: 92px; }
.tiles .lbl { font-weight: 700; font-family: var(--display); color: var(--teal); }
.tiles small { color: var(--mute); font-size: 12.5px; line-height: 1.3; }
.tiles .opt[aria-pressed="true"] .tile-art { background: #fff; }
.tiles .opt[aria-pressed="true"] .tex path { animation: draw .8s ease both; stroke-dasharray: 400; }
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }

/* Icon cards (style) */
.icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.icons .opt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; position: relative; min-height: 112px; }
.icons .mark { position: absolute; top: 10px; right: 10px; }
.icon-art { width: 44px; height: 44px; border-radius: 12px; background: var(--cream); display: grid; place-items: center; transition: background .2s, transform .3s; }
.oico { width: 34px; height: 34px; }
.icons .lbl { font-size: 14.5px; line-height: 1.3; }
.icons .opt[aria-pressed="true"] .icon-art { background: #fff; transform: rotate(-6deg) scale(1.06); }

/* Choice cards (Q15) */
.cards { display: grid; gap: 10px; }
.cards .opt { padding: 15px; }
.card-num { font: 800 15px var(--display); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
.cards .opt:nth-child(1) .card-num { background: var(--teal); } .cards .opt:nth-child(2) .card-num { background: var(--gold); }
.cards .opt:nth-child(3) .card-num { background: var(--coral); color: var(--choc); } .cards .opt:nth-child(4) .card-num { background: var(--deep-aqua); }
.cards .opt:nth-child(5) .card-num { background: var(--pine); }
.cards .mark { order: 3; margin-left: auto; }

/* Slider */
.slider { background: var(--cream); border-radius: 18px; padding: 16px 16px 12px; text-align: center; }
.slider-val { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px dashed var(--champ); font: 800 28px var(--display); color: var(--mute); margin-bottom: 8px; }
.touched .slider-val { background: var(--sec); color: var(--sec-on); border: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--sec) var(--p, 50%), #fff var(--p, 50%)); border: 1px solid var(--line); margin: 10px 0; }
.item:not(.touched) input[type=range] { background: #fff; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--sec); box-shadow: 0 2px 8px rgba(18,92,96,.3); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--sec); cursor: pointer; }
.slider-dots { display: flex; justify-content: space-between; padding: 0 2px; }
.slider-dots button { appearance: none; border: 0; background: none; font: 600 14px var(--body); color: var(--mute); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.slider-dots button:hover { background: #fff; }
.ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); margin-top: 4px; }

/* Text, fields */
textarea, .field input, input.other { width: 100%; font: 16px var(--body); color: var(--choc); border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 14px; background: #fff; }
textarea:focus, .field input:focus, input.other:focus { border-color: var(--sec); outline: none; box-shadow: 0 0 0 3px var(--light-aqua); }
input.other { margin-top: 10px; }
.fields { display: grid; gap: 12px; margin-top: 8px; }
.field { display: grid; gap: 6px; } .flabel { font-weight: 600; font-size: 14px; color: var(--pine); }
.item { margin-bottom: 14px; }

/* Welcome */
.welcome-top { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; text-align: center; }
.welcome-top .eyebrow { justify-content: center; margin-top: 4px; }
.welcome-top + h1 { text-align: center; }
.app-icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 8px 20px rgba(18,92,96,.25); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-4px) rotate(-2deg); } }
.hero-wrap { margin: 6px 0 4px; }
.hero { width: 100%; height: auto; aspect-ratio: 320 / 150; max-height: 260px; display: block; overflow: visible; }
.hero .hstrand { stroke-dasharray: 360; animation: hdraw 1.6s cubic-bezier(.4,0,.2,1) both, hsway 5.5s ease-in-out infinite alternate; }
@keyframes hdraw { from { stroke-dashoffset: 360; } to { stroke-dashoffset: 0; } }
@keyframes hsway { from { transform: translateY(-2.5px); } to { transform: translateY(2.5px); } }
.fadeup { animation: fadeup .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sway { animation: sway 6s ease-in-out infinite alternate; transform-origin: center; }
@keyframes sway { to { transform: translateY(6px) scaleY(1.06); } }
.parts { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.parts li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--cream); font-size: 14px; font-weight: 600; color: var(--pine); }
.parts .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--on); }
.parts .dot .pico { width: 15px; height: 15px; }
.pro-card { margin-top: 22px; border-radius: 22px; padding: 18px; background: linear-gradient(135deg, var(--sage), var(--cream)); border: 1px solid var(--line); }
.pro-card p { margin: 8px 0 14px; color: var(--choc); }
.pro-eyebrow { display: flex; gap: 8px; align-items: center; font: 700 12px var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }

/* Part intro */
.part-card { border-radius: 26px; padding: 22px 20px 20px; margin-top: 8px; position: relative; overflow: hidden; }
.part-card h1 { color: inherit; margin: 12px 0 6px; }
.part-card .lede { color: inherit; opacity: .95; }
.part-badge { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--body); letter-spacing: 1.4px; text-transform: uppercase; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px 6px 8px; }
.part-art-wrap { margin: 4px -20px; } .part-art { width: 100%; height: 120px; display: block; }
.part-art path, .part-art circle, .part-art rect { stroke-dasharray: 600; animation: draw2 1.4s ease both; }
.part-art.people path, .part-art.people circle, .part-art.people rect { stroke-dasharray: none; animation: none; }
.part-art.people { height: auto; aspect-ratio: 300 / 124; max-height: 230px; }
.part-art.people .rise { animation: rise .5s cubic-bezier(.2,.9,.3,1.3) both; transform-box: fill-box; transform-origin: 50% 100%; }
.part-art.people .sway { animation: psway 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.part-art.people g:nth-child(even) .sway { animation-duration: 3.9s; animation-direction: reverse; }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes psway { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-3px); } }
.fact-art.crowd .cpop { animation: cpop .45s cubic-bezier(.2,.9,.3,1.4) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes cpop { from { opacity: 0; transform: translateY(8px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes swayg { 0%, 100% { transform: translateY(0) skewX(0deg); } 50% { transform: translateY(2px) skewX(-2.5deg); } }
.part-art.textures { height: auto; aspect-ratio: 290 / 110; max-height: 220px; padding: 0 4px; box-sizing: border-box; }
.part-art.textures .sway-g { animation: swayg 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.tex .think { animation: think 2.6s ease-in-out infinite; transform-box: fill-box; }
.tex .think.t2 { animation-delay: .5s; }
@keyframes think { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(-3px); opacity: 1; } }
.part-art.beforeafter { height: auto; aspect-ratio: 280 / 120; max-height: 230px; }
.part-art.beforeafter path, .part-art.beforeafter circle, .part-art.beforeafter rect { stroke-dasharray: none; animation: none; }
.part-art.beforeafter .mass { animation: fadein .6s ease .2s both !important; }
.part-art.beforeafter .dr.hl { stroke: #6E4A35; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.part-art.beforeafter .dr { stroke-dasharray: 60; animation: draw6 .5s ease both; }
.part-art.beforeafter .dr.lose { animation-name: draw6, fall; animation-duration: .5s, 1.1s; animation-timing-function: ease, ease-in; animation-fill-mode: both, forwards; }
.part-art.beforeafter .shed { opacity: 0; animation: shed 4.5s ease-in 3.2s infinite; transform-box: fill-box; }
.part-art.beforeafter .arrow { animation: nudge 2.4s ease-in-out infinite; }
@keyframes draw6 { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes fall { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(14px) rotate(8deg); } }
@keyframes shed { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 60% { opacity: .9; transform: translate(8px, 36px) rotate(30deg); } 75%, 100% { opacity: 0; transform: translate(10px, 44px) rotate(34deg); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.fact-art.shed { width: 190px; height: 95px; }
.fact-art.shed .drift { animation: drift 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(3px, 6px) rotate(6deg); } }
.fact-bar { display: flex; gap: 6px; margin: -2px 0 12px; } .fact-bar span { height: 6px; width: 34px; border-radius: 6px; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-hdr { display: inline-flex; gap: 6px; flex: none; width: auto; height: 46px; padding: 6px; border-radius: 14px; background: var(--cream); animation: float 5s ease-in-out infinite; }
.hico { width: 34px; height: 34px; }
.oi { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--cream); display: grid; place-items: center; transition: transform .25s, background .2s; }
.oi .mico { width: 22px; height: 22px; }
.opt[aria-pressed="true"] .oi { background: #fff; transform: rotate(-5deg) scale(1.06); }
.part-card.pop-part { padding-bottom: 22px; box-shadow: 0 14px 34px rgba(244,119,100,.35); animation: cardin .45s cubic-bezier(.2,.9,.3,1.25) both; }
.part-card.pop-part::before { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: #D9BC85; opacity: .55; }
.part-card.pop-part::after { content: ""; position: absolute; width: 90px; height: 90px; left: -30px; bottom: -30px; border-radius: 50%; border: 2px solid #2FC2B8; }
.part-card.pop-part > * { position: relative; z-index: 1; }
.part-card.pop-part h1 { font-size: 46px; font-weight: 800; letter-spacing: -1px; }
.part-card.pop-part .part-badge, .part-card.pop-part .meta span { background: rgba(255,255,255,.35); }
.part-art.sunrise path, .part-art.sunrise circle, .part-art.sunrise rect { stroke-dasharray: none; animation: none; }
.part-art.sunrise .ray { stroke-dasharray: 80; animation: draw4 .9s ease both, glow 3.6s ease-in-out 1s infinite; }
.part-art.sunrise .twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes draw4 { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes twinkle { 0%, 100% { opacity: .4; scale: .7; } 50% { opacity: 1; scale: 1.15; } }
.fact-art.grow { width: 200px; height: 99px; }
.fact-card .fact-top .rise { stroke-dasharray: 140; animation: draw5 1.1s ease both; }
@keyframes draw5 { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
.iq-badge { width: 40px; height: 40px; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes draw2 { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.meta { display: flex; gap: 10px; font-size: 14px; font-weight: 600; }
.meta span { background: rgba(255,255,255,.18); border-radius: 999px; padding: 5px 12px; }
.intro .foot, .done .foot { margin-top: 16px; }
.done .foot { position: static; background: none; }

/* Fact card */
.fact-card { border-radius: 26px; padding: 22px 22px 18px; margin-top: 12px; position: relative; overflow: hidden; animation: cardin .42s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes cardin { 0% { opacity: 0; transform: scale(.9); } 70% { opacity: 1; transform: scale(1.025); } 100% { opacity: 1; transform: scale(1); } }
.fact-card .big { font-variant-numeric: tabular-nums; }
.fact-card .fact-top { animation: artin .7s ease 1.25s both; }
.fact-card .fact-top path:not(.drift):not(.rise), .fact-card .fact-top rect { stroke-dasharray: 260; animation: draw3 1s ease 1.25s both; }
@keyframes artin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes draw3 { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
.fact-bar span { animation: artin .5s ease 1.3s both; }
@keyframes rise { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.fact-card .big { font: 800 52px/1 var(--display); color: inherit; margin: 6px 0 10px; letter-spacing: -1px; }
.fact-card p { font-size: 18px; margin: 0 0 14px; font-weight: 500; }
.fact-card small { font-size: 12px; opacity: .85; }
.fact-art { width: 150px; height: 76px; display: block; position: relative; z-index: 1; }
.fact-card { min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end; }
.fact-card > * { position: relative; z-index: 1; }
.fact-card::before, .fact-card::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid currentColor; opacity: .22; }
.fact-card::before { width: 260px; height: 260px; right: -90px; top: -90px; }
.fact-card::after { width: 170px; height: 170px; right: -40px; top: -40px; opacity: .3; }
.fact-card .fact-top { flex: 1; }
.fact-card .src { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fact-card .src img { width: 28px; height: 28px; opacity: .9; }

/* Snapshot */
.snapshot { background: linear-gradient(160deg, var(--cream), #fff 60%); border: 1px solid var(--line); border-radius: 26px; padding: 18px; margin: 10px 0 14px; }
.snap-rings svg { width: 170px; height: 170px; display: block; margin: 0 auto; }
.ring { animation: ring 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ring { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.snapshot h2 { text-align: center; margin-top: 8px; }
.snap-spend { background: var(--teal); color: #fff; border-radius: 18px; padding: 14px 16px; margin: 10px 0; display: grid; gap: 2px; }
.snap-spend .lab { font: 700 11px var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--champ); }
.snap-spend b { font: 800 36px var(--display); } .snap-spend small { font-size: 12px; opacity: .9; }
.chips { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.chips li { border-radius: 14px; padding: 10px 14px; display: grid; gap: 2px; animation: rise .45s ease both; }
.chips i { font-style: normal; font: 700 11px var(--body); letter-spacing: 1.2px; text-transform: uppercase; opacity: .8; }
.chips span { font-weight: 600; }
.snapshot h3 { margin: 14px 0 6px; }
.tip { background: #fff; border-left: 3px solid var(--coral); border-radius: 0 12px 12px 0; padding: 10px 12px; margin: 8px 0; font-size: 15px; animation: rise .45s ease both; }

/* Confetti */
.confetti { position: fixed; left: 50%; top: 38%; pointer-events: none; z-index: 20; }
.confetti span { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: burst 1.4s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes burst { from { transform: translate(0,0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 160px)) rotate(var(--r)); opacity: 0; } }

@media (min-width: 600px) { .screen { padding: 12px 28px 32px; } .top { padding: 14px 28px 10px; } .icons { grid-template-columns: repeat(3, 1fr); } .part-art-wrap { margin-left: -28px; margin-right: -28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* v3: wide and split fact cards */
.fact-card.wide .fact-art.shelf, .fact-card.split .fact-art.cal { width: 100%; height: auto; }
.fact-art.crowd { width: 230px; height: 115px; }
.fact-card.wide .fact-art.shelf { aspect-ratio: 292 / 104; max-height: 190px; margin: 0 0 6px; }
.fact-card.wide .fact-top, .fact-card.split .fact-top { animation: none; }
.fact-card .fact-top .prod, .fact-card .fact-top .pg { animation: prodpop .5s cubic-bezier(.2,.9,.3,1.4) both; transform-box: fill-box; transform-origin: 50% 100%; }
.fact-card .fact-top .shelf rect, .fact-card .fact-top .cal rect, .fact-card .fact-top .cal path:not(.trail) { stroke-dasharray: none !important; animation: none !important; }
@keyframes prodpop { from { opacity: 0; transform: translateY(16px) scale(.5); } to { opacity: 1; transform: none; } }
.fact-card.split .fact-art.cal { aspect-ratio: 230 / 100; max-width: 345px; }
.fact-tip { display: flex; gap: 10px; align-items: flex-start; background: #FFFFFF; color: #1D4A3E; border-radius: 16px; padding: 12px 14px; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4; margin: 4px 0 14px !important; box-shadow: 0 4px 14px rgba(18,92,96,.12); animation: cardin .45s ease 1.6s both; }
.fact-tip svg { flex: none; margin-top: 1px; }
.fact-card.split { justify-content: flex-start; }
@media (min-width: 600px) {
  .fact-card.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 26px; align-items: center; }
  .fact-card.split .fact-tip, .fact-card.split .src { grid-column: 1 / -1; }
}
.snap-rings .snap-core { animation: cpop .6s cubic-bezier(.2,.9,.3,1.4) .7s both; transform-box: fill-box; transform-origin: center; }

/* v4: calm "changes" intro on white */
.part-art.calmflow { height: auto; aspect-ratio: 280 / 128; max-height: 230px; }
.part-art.calmflow path, .part-art.calmflow circle { stroke-dasharray: none; animation: none; }
.part-art.calmflow .flow { stroke-dasharray: 320; animation: calmdraw 2.4s cubic-bezier(.4,0,.2,1) both; }
.part-art.calmflow .drift { animation: calmdrift 9s ease-in-out 2.6s infinite; transform-box: fill-box; transform-origin: 0 50%; }
.part-art.calmflow .moon { animation: calmfade 1.6s ease both; }
@keyframes calmdraw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
@keyframes calmdrift { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-2px) scaleY(1.06); } }
@keyframes calmfade { from { opacity: 0; } to { opacity: 1; } }
.part-card.calm-part { border: 1.5px solid #DCE7E1; box-shadow: 0 8px 24px rgba(18,92,96,.07); }
.part-card.calm-part .part-badge, .part-card.calm-part .meta span { background: #EEF5F2; color: #125C60; }