/* October revision: more expressive prize choreography and an app-led journey. */
.campaign-app-line { margin-top: 15px; color: var(--blue); font-size: .875rem; font-weight: 550; }
.campaign-copy .eyebrow { font-size: .75rem; }
.campaign-date, .campaign-fine { font-size: .875rem; }
.campaign-fine { line-height: 1.65; }
.campaign-grid { padding-top: 35px; }
.prize-scene { --orbit-x: 65px; --orbit-y: 44px; --watch-lift: 26px; perspective: 1250px; isolation: auto; }
.prize-object { transform: translate3d(calc(var(--mx) * var(--travel-x)), calc(var(--my) * var(--travel-y)), var(--depth)) rotateX(calc(var(--my) * -9deg)) rotateY(calc(var(--mx) * 13deg)) rotateZ(var(--turn)); }
.watch-object { width: 82%; top: 50%; left: 6%; translate: 0 -50%; --travel-x: 32px; --travel-y: 24px; --turn: -6deg; }
.prize-arrival { transform-style: preserve-3d; animation: prize-arrive 1.65s cubic-bezier(.16,1,.3,1) both; }
.replay-reset .prize-arrival { animation: none!important; }
.prize-float { transform-style: preserve-3d; }
.watch-object .prize-float { animation: watch-flight 9s cubic-bezier(.45,0,.55,1) infinite; animation-delay: -.6s; }
.card-high { top: 1%; right: -1%; width: 36%; }
.card-back { top: 29%; left: -6%; width: 33%; }
.card-front { right: -3%; bottom: 1%; width: 34%; }
.card-high .prize-arrival { animation-delay: .12s; }
.card-back .prize-arrival { animation-delay: .24s; }
.card-front .prize-arrival { animation-delay: .36s; }
.card-high .prize-float { animation: card-orbit-high 10s cubic-bezier(.45,0,.55,1) infinite; animation-delay: -1s; }
.card-back .prize-float { animation: card-orbit-back 11s cubic-bezier(.45,0,.55,1) infinite; animation-delay: -4s; }
.card-front .prize-float { animation: card-orbit-front 9s cubic-bezier(.45,0,.55,1) infinite; animation-delay: -2s; }
.motion-paused .prize-arrival, .motion-suspended .prize-arrival,
.motion-paused .prize-float, .motion-suspended .prize-float { animation-play-state: paused; }
.scene-controls { justify-content: space-between; margin-inline: 25px; gap: 14px; }
.scene-controls p, .motion-toggle { font-size: .75rem; }
.scene-controls p > span { display: none; }
.scene-buttons { display: flex; align-items: center; gap: 17px; }
.motion-toggle { min-height: 44px; }

@keyframes prize-arrive {
  from { opacity: 0; transform: translate3d(70px,130px,-230px) rotateY(-35deg) rotateZ(17deg) scale(.75); }
  to { opacity: 1; transform: translate3d(0,0,0) rotateY(0) rotateZ(0) scale(1); }
}
@keyframes watch-flight {
  0%,100% { transform: translate3d(-10px,calc(var(--watch-lift) * -1),25px) rotateX(-8deg) rotateY(-13deg) rotateZ(-7deg); }
  25% { transform: translate3d(17px,-2px,62px) rotateX(5deg) rotateY(5deg) rotateZ(1deg); }
  50% { transform: translate3d(9px,var(--watch-lift),15px) rotateX(7deg) rotateY(16deg) rotateZ(8deg); }
  75% { transform: translate3d(-17px,5px,45px) rotateX(-4deg) rotateY(1deg) rotateZ(0); }
}
@keyframes card-orbit-high {
  0%,100% { transform: translate3d(calc(var(--orbit-x) * -.35),calc(var(--orbit-y) * -.5),10px) rotateX(-14deg) rotateY(-22deg) rotateZ(-12deg); }
  25% { transform: translate3d(calc(var(--orbit-x) * .3),calc(var(--orbit-y) * .15),55px) rotateX(14deg) rotateY(-2deg) rotateZ(5deg); }
  50% { transform: translate3d(calc(var(--orbit-x) * -.1),var(--orbit-y),5px) rotateX(2deg) rotateY(24deg) rotateZ(20deg); }
  75% { transform: translate3d(calc(var(--orbit-x) * -.75),calc(var(--orbit-y) * .5),-45px) rotateX(-16deg) rotateY(0) rotateZ(2deg); }
}
@keyframes card-orbit-back {
  0%,100% { transform: translate3d(0,calc(var(--orbit-y) * -.4),-65px) rotateX(-14deg) rotateY(18deg) rotateZ(0); }
  25% { transform: translate3d(calc(var(--orbit-x) * .7),calc(var(--orbit-y) * -1),-20px) rotateX(0) rotateY(-12deg) rotateZ(19deg); }
  50% { transform: translate3d(var(--orbit-x),calc(var(--orbit-y) * .3),45px) rotateX(20deg) rotateY(-22deg) rotateZ(35deg); }
  75% { transform: translate3d(calc(var(--orbit-x) * .2),var(--orbit-y),0) rotateX(3deg) rotateY(8deg) rotateZ(13deg); }
}
@keyframes card-orbit-front {
  0%,100% { transform: translate3d(calc(var(--orbit-x) * -.45),0,30px) rotateX(16deg) rotateY(-15deg) rotateZ(8deg); }
  25% { transform: translate3d(calc(var(--orbit-x) * -.85),calc(var(--orbit-y) * -.8),-45px) rotateX(-3deg) rotateY(18deg) rotateZ(-14deg); }
  50% { transform: translate3d(calc(var(--orbit-x) * .05),calc(var(--orbit-y) * -1),35px) rotateX(-17deg) rotateY(24deg) rotateZ(-25deg); }
  75% { transform: translate3d(calc(var(--orbit-x) * .35),calc(var(--orbit-y) * .15),70px) rotateX(4deg) rotateY(-8deg) rotateZ(-4deg); }
}

.app-story { display: grid; grid-template-columns: 1.1fr .9fr; gap: 85px; align-items: center; padding-block: 110px 95px; }
.app-story-copy h2 { font-size: clamp(2.6rem,4.4vw,4rem); line-height: 1.07; }
.app-story-copy h2 span { color: var(--blue); }
.app-story-copy > p:not(.eyebrow):not(.app-trial-note) { color: var(--muted); line-height: 1.75; font-size: 1rem; max-width: 450px; margin-top: 23px; }
.app-story-copy > p + p:not(.eyebrow):not(.app-trial-note) { margin-top: 13px; }
.app-benefits { margin: 27px 0; }
.app-benefits details { border-top: 1px solid var(--line); padding-block: 17px; }
.app-benefits details:last-child { border-bottom: 1px solid var(--line); }
.app-benefits summary { font-size: 1rem; letter-spacing: -.025em; }
.app-benefits p { margin-top: 12px; color: var(--muted); font-size: .9375rem; line-height: 1.7; padding-right: 14px; }
.app-story-copy > .quiet-link { background: none; border: 0; padding: 0; color: var(--blue); }
.app-trial-note { font-size: .8125rem; color: var(--muted); margin-top: 17px; max-width: 400px; }
.app-preview-wrap { min-width: 0; }
.today-preview { background: #fbfcfe; border: 1px solid #dde5f1; box-shadow: 0 32px 80px -33px #22416d35,0 2px 9px #17305104; border-radius: 29px; padding: 26px 23px 0; max-width: 435px; margin-inline: auto; overflow: hidden; }
.today-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.today-heading span { font-size: .75rem; font-weight: 700; letter-spacing: .13em; color: #8491a5; }
.today-heading h3 { font-size: 1.55rem; margin-top: 4px; letter-spacing: -.05em; }
.today-heading i { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .75rem; font-weight: 700; font-style: normal; }
.today-plan { display: flex; align-items: center; gap: 18px; padding: 20px 17px; border-radius: 21px; color: #fff; background: linear-gradient(130deg,#2255d8,#377bff); box-shadow: 0 12px 25px #2d63f025; }
.today-ring { position: relative; flex: 0 0 70px; width: 70px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.today-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.today-ring circle { fill: none; stroke-width: 5; }
.today-ring-track { stroke: #ffffff45; }
.today-ring-fill { stroke: white; stroke-dasharray: 25 100; stroke-linecap: round; }
.today-ring b { font-size: 1.65rem; line-height: 1; }
.today-ring small { font-size: .75rem; opacity: .8; margin-top: 3px; }
.today-plan > div > span { font-size: .75rem; font-weight: 650; opacity: .78; letter-spacing: .09em; }
.today-plan h4 { font-size: 1.16rem; line-height: 1.2; letter-spacing: -.03em; margin: 6px 0; }
.today-plan p { font-size: .8125rem; opacity: .85; }
.today-streak { margin: 25px 0; }
.today-streak > div:first-child { display: flex; justify-content: space-between; gap: 16px; font-size: .8125rem; align-items: center; }
.today-streak > div > span { color: #8b98ac; font-size: .75rem; font-weight: 600; }
.streak-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-top: 13px; }
.streak-week > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.streak-week small { font-size: .75rem; color: #8795a9; }
.streak-week b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f0f4fa; font-size: .75rem; color: #d0dae9; font-weight: 600; }
.streak-week .done { color: #fff; background: var(--blue); }
.streak-week .current { background: #e9f0ff; color: var(--blue); }
.today-section-heading { font-size: .75rem; font-weight: 700; letter-spacing: .13em; color: #8491a5; margin-bottom: 12px; }
.today-actions { display: grid; gap: 9px; }
.today-actions > div { display: grid; grid-template-columns: 33px 1fr 21px; align-items: center; gap: 10px; border: 1px solid #e5eaf3; border-radius: 14px; background: white; padding: 13px 10px; }
.target-icon { display: grid; place-items: center; width: 31px; height: 31px; background: #edf3ff; color: var(--blue); font-size: 1rem; font-weight: 600; border-radius: 10px; }
.today-actions b { font-size: .875rem; line-height: 1.45; display: block; letter-spacing: -.015em; }
.today-actions small { font-size: .75rem; color: #8793a5; line-height: 1.5; margin-top: 3px; display: block; }
.today-actions i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #d6deeb; font-style: normal; display: grid; place-items: center; font-size: .75rem; }
.today-actions .is-complete i { background: #27a66a; color: #fff; border-color: #27a66a; }
.today-steps-meter { display: block; height: 3px; background: #e8eef8; border-radius: 5px; margin-top: 7px; overflow: hidden; }
.today-steps-meter span { display: block; height: 100%; width: 100%; background: var(--blue); }
.today-scan { display: flex; align-items: center; gap: 12px; padding: 18px 0; margin-top: 5px; }
.today-scan .scan-ui-icon { color: var(--blue); font-size: 1.8rem; }
.today-scan > div { flex: 1; }
.today-scan small { color: var(--blue); font-size: .75rem; font-weight: 700; }
.today-scan b { display: block; font-size: .875rem; letter-spacing: -.025em; }
.today-scan div > span { display: block; color: #8a97aa; font-size: .75rem; }
.today-tabs { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin: 0 -23px; padding: 16px 25px; background: #fff; gap: 15px; color: #8b98ad; font-size: .8125rem; }
.today-tabs .active { color: var(--blue); font-weight: 650; }
.app-example-note { font-size: .75rem; color: #8a97ab; text-align: center; line-height: 1.7; margin-top: 18px; }
.progress-section { border-top: 1px solid var(--line); padding-block: 90px; grid-template-columns: 1fr 1.05fr; gap: 70px; }
.progress-proof { max-width: 560px; align-self: center; background: #f8faff; border: 1px solid #e4eaf4; border-radius: 26px; padding: 19px; }
.proof-toolbar { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 2px 0 18px; }
.proof-toolbar > span { font-size: .75rem; letter-spacing: .08em; font-weight: 700; color: #7486a0; }
.comparison-choices { display: flex; background: #edf2f9; padding: 3px; border-radius: 9px; }
.comparison-choices button { background: transparent; border: 0; padding: 7px 10px; border-radius: 7px; color: #708199; font-size: .75rem; white-space: nowrap; }
.comparison-choices button[aria-pressed="true"] { color: var(--blue); background: white; box-shadow: 0 2px 7px #1735570a; }
.proof-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.proof-pair > div { min-width: 0; }
.proof-portrait { aspect-ratio: 640 / 909; border-radius: 15px; overflow: hidden; background: #eceef1; }
.proof-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.proof-pair > div > span { display: block; text-align: center; padding: 11px 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: #5c7393; }
.progress-proof figcaption { border-top: 1px solid #e4eaf4; margin-top: 17px; padding-top: 15px; }
.progress-proof figcaption strong { font-size: .875rem; font-weight: 500; max-width: none; }
.progress-proof figcaption > span { font-size: .75rem; }
.proof-compare { width: 70%; margin: 0 auto; aspect-ratio: 640 / 909; border-radius: 15px; }
.proof-image { object-position: 50% 0%; }
.in-app-note { color: #61738e; font-size: .875rem; margin-top: 25px; max-width: 680px; }
.entry-steps p { font-size: 1rem; }
.entry-bottom > span, .entry-bottom > a { font-size: .875rem; }
.final-preview-link { margin-top: 20px; font-size: .875rem; }
.connection-note { margin-top: 12px; font-size: .75rem; }
.next-card #participant-email { overflow-wrap: anywhere; }
.signup-account-note { font-size: .875rem; margin: -5px 0 20px; color: var(--muted); line-height: 1.6; }
.demo-notice { font-size: .75rem; color: #8a96a8; margin-top: 16px; }
.submission-steps { padding-left: 21px; color: var(--muted); font-size: .9375rem; }
.submission-steps li { margin-bottom: 13px; }
.export-placeholder { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); background: #f9fbff; padding: 18px; border-radius: 15px; margin: 24px 0; }
.export-placeholder > span { color: var(--blue); font-size: 1.7rem; }
.export-placeholder b, .export-placeholder small { display: block; }
.export-placeholder b { font-size: .9375rem; }
.export-placeholder small { font-size: .8125rem; color: var(--muted); }
@media(max-width:1100px) {
  .app-story { gap: 50px; }
  .progress-section { gap: 40px; }
  .prize-scene { --orbit-x: 48px; --orbit-y: 34px; --watch-lift: 23px; }
  .proof-toolbar { flex-wrap: wrap; gap: 10px; }
}
@media(min-width:681px) and (max-width:960px) {
  .watch-object { width: 96%; left: -1%; top: 50%; }
  .prize-scene { --orbit-x: 32px; --orbit-y: 29px; }
  .scene-controls { margin-inline: 0; flex-wrap: wrap; justify-content: center; gap: 0 12px; }
  .app-story { grid-template-columns: 1fr 1fr; gap: 30px; padding-block: 75px; }
  .app-story-copy h2 { font-size: 2.6rem; }
  .today-preview { padding-inline: 16px; }
  .today-heading h3 { font-size: 1.3rem; }
  .today-plan { padding-inline: 12px; gap: 10px; }
  .today-ring { width: 56px; height: 56px; flex-basis: 56px; }
  .today-plan h4 { font-size: 1rem; }
  .today-actions > div { grid-template-columns: 1fr 20px; }
  .target-icon { display: none; }
  .today-tabs { margin-inline: -16px; padding-inline: 16px; font-size: .75rem; gap: 8px; }
  .progress-section { gap: 30px; }
  .progress-proof { padding: 14px; }
  .proof-pair { gap: 8px; }
}
@media(max-width:680px) {
  .campaign-grid { padding-top: 32px; }
  .campaign-copy .eyebrow { font-size: .75rem; letter-spacing: .07em; }
  .campaign-date, .campaign-fine { font-size: .8125rem; }
  .campaign-app-line { font-size: .875rem; margin-top: 12px; }
  .prize-experience { margin-top: 18px; }
  .prize-scene { height: 410px; --orbit-x: 29px; --orbit-y: 29px; --watch-lift: 22px; }
  .watch-object { width: 85%; left: 6%; top: 50%; --travel-x: 19px; --travel-y: 17px; }
  .card-high { width: 33%; right: -1%; top: 2%; --travel-x: 18px; --travel-y: 14px; }
  .card-back { width: 32%; left: -4%; top: 31%; --travel-x: -10px; --travel-y: -8px; }
  .card-front { width: 33%; right: -1%; bottom: 7%; --travel-x: 19px; --travel-y: 18px; }
  .scene-controls { margin: 0 2px 12px; gap: 9px; }
  .scene-controls p, .motion-toggle { font-size: .75rem; }
  .scene-buttons { gap: 13px; }
  .app-story { grid-template-columns: 1fr; gap: 35px; padding-block: 60px; }
  .app-story-copy h2 { font-size: 2.6rem; }
  .app-story-copy > p:not(.eyebrow):not(.app-trial-note) { font-size: 1rem; }
  .app-benefits p { font-size: .9375rem; }
  .app-trial-note { font-size: .8125rem; }
  .today-preview { max-width: 430px; padding-inline: 19px; }
  .today-tabs { margin-inline: -19px; padding-inline: 19px; }
  .today-heading h3 { font-size: 1.5rem; }
  .progress-section { grid-template-columns: 1fr; padding-block: 55px; gap: 30px; }
  .progress-copy .eyebrow { font-size: .75rem; }
  .progress-proof { padding: 15px; border-radius: 22px; }
  .proof-toolbar > span { font-size: .75rem; }
  .proof-toolbar { gap: 10px; }
  .proof-pair { gap: 9px; }
  .proof-portrait { border-radius: 12px; }
  .proof-compare { width: 78%; }
  .progress-proof figcaption strong { font-size: .875rem; }
  .progress-proof figcaption > span { font-size: .75rem; }
  .entry-heading .eyebrow { font-size: .75rem; }
  .in-app-note { font-size: .875rem; margin-top: 8px; }
  .entry-bottom { margin-top: 22px; }
  .entry-bottom > span, .entry-bottom > a { font-size: .875rem; }
}
@media(max-width:375px) {
  .prize-scene { height: 365px; }
  .today-preview { padding-inline: 14px; }
  .today-heading h3 { font-size: 1.3rem; }
  .today-plan { gap: 11px; padding-inline: 12px; }
  .today-actions > div { grid-template-columns: 25px 1fr 18px; gap: 8px; padding-inline: 8px; }
  .target-icon { width: 25px; height: 28px; }
  .today-tabs { margin-inline: -14px; padding-inline: 14px; gap: 10px; }
  .streak-week { gap: 4px; }
  .app-story-copy h2 { font-size: 2.3rem; }
}
@media(prefers-reduced-motion:reduce) {
  .prize-arrival, .prize-float { animation: none!important; transform: none!important; opacity: 1!important; }
  .prize-object { transform: rotateZ(var(--turn))!important; }
}