/* Own implementation of effects observed in the supplied Nov 9 recordings.
   The charcoal/green substitution is intentional. No reference source/assets. */
.hero {isolation:isolate;background:var(--app-canvas);}


.step-panel {animation:none;}
/* The format timeline owns blur, translation and visibility. CSS transitions
   would ease the sampled frames again and make interruption lag behind scroll. */
.format-copy,.format-copy.is-current {transition:none;}
.format-collage,.collage-card {transition:none;}
.collage-card {will-change:transform,filter;}

.brief-preview {background:var(--app-elevated);box-shadow:0 2px 2px #00000008;}
.brief-preview::after {animation:brief-cursor 3s ease-in-out infinite;}
.brief-preview .visual-button {animation:brief-press 3s ease-in-out infinite;}
@keyframes brief-cursor {0%,30%,100%{transform:translate(12px,10px)}46%,65%{transform:translate(0,-9px) scale(.92)}78%{transform:translate(0,-9px)}}
@keyframes brief-press {0%,45%,72%,100%{transform:scale(1)}52%,62%{transform:scale(.97);filter:brightness(.94)}}
.filter-window {mask-image:linear-gradient(#000 28%,#0009 55%,transparent 94%);}
.filter-track {background:var(--app-elevated);border:0;}
.review-orbit {border-color:#373737;box-shadow:none;transform:translateX(-50%) rotate(-16deg);}
.review-orbit .icon {position:absolute;}
.review-orbit .review-check {opacity:0;}
.benefit-review.is-observed .review-ring circle {animation:review-cycle 2.8s ease-in-out infinite;}
.benefit-review.is-observed .review-orbit .icon:not(.review-check) {animation:review-eye 2.8s ease infinite;}
.benefit-review.is-observed .review-check {animation:review-check 2.8s ease infinite;}
@keyframes review-cycle {0%{stroke-dashoffset:251.3}48%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:251.3}}
@keyframes review-eye {0%,50%,100%{opacity:1;transform:scale(1)}58%,89%{opacity:0;transform:scale(.7)}}
@keyframes review-check {0%,50%,100%{opacity:0;transform:scale(.7)}65%,86%{opacity:1;transform:scale(1)}}
.creative-bars {mask-image:linear-gradient(#000 10%,#0009 60%,transparent 100%);}
.creative-bars i {background:linear-gradient(#b8dfa9,#b8dfa920);}
.status-track>span {background:linear-gradient(180deg,#b8dfa9,#92bb81);color:#20301b;box-shadow:inset 0 1px 2px #ffffff35;}
.status-track>span:nth-child(3n+2) {background:linear-gradient(180deg,#6c8aab,#466489);color:#f4f5f0;}
.status-track>span:nth-child(3n) {background:linear-gradient(180deg,#b8dfa9,#92bb81);color:#20301b;}
.site-footer {padding:96px 24px 0;isolation:isolate;background:var(--app-canvas);}
.footer-inner {background:var(--app-card);border-radius:32px 32px 0 0;min-height:566px;padding:89px 90px 32px;}
.footer-main {margin:72px 0 44px;gap:28px;}
.footer-main img {width:108px;}
.footer-socials {display:flex;gap:20px;align-items:center;}
.footer-social {padding:0;width:28px;height:32px;justify-content:center;}
.footer-social svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.footer-main nav {gap:28px;font-size:14px;}
.footer-legal {gap:24px;}
.footer-legal button,.copyright {font-size:14px;}
.footer-ribbons {position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;}
.ribbon {position:absolute;overflow:visible;width:200px;height:180px;fill:none;}
.ribbon-face {stroke:#b8dfa9;stroke-width:48;}
.ribbon-shadow {stroke:#1f1f1f;stroke-width:48;}
.ribbon-fold {fill:#83a375;}
.ribbon-one {left:calc(50% - 665px);top:88px;}
.ribbon-two {right:calc(50% - 665px);top:58px;}
.ribbon-three {left:calc(50% - 710px);bottom:-90px;width:210px;height:210px;}
.ribbon-four {right:calc(50% - 695px);bottom:-58px;width:210px;height:230px;}
body[data-motion='paused'] .brief-preview::after,body[data-motion='paused'] .brief-preview .visual-button,body[data-motion='paused'] .review-orbit .icon,body[data-motion='paused'] .format-collage {animation-play-state:paused;}
@media(max-width:1100px) and (min-width:761px){.footer-inner{padding-left:55px;padding-right:55px}.footer-main{flex-wrap:wrap}.footer-main nav{margin-left:auto}.footer-socials{gap:14px}}
@media(max-width:760px){


 .format-copy,.format-copy.is-current {filter:none;transform:none;}
 .site-footer {padding:86px 16px 0;}
 .footer-inner {padding:70px 20px 40px;min-height:670px;border-radius:24px 24px 0 0;}
 .footer-main {margin:55px 0 33px;gap:20px;}
 .footer-socials {gap:18px;}
 .footer-main nav {gap:18px;font-size:12px;}
 .footer-legal {gap:16px;flex-wrap:wrap;}
 .footer-legal button,.copyright {font-size:11px;}
 .ribbon-one {width:110px;height:99px;left:-24px;top:80px;}
 .ribbon-two {width:110px;height:99px;right:-24px;top:64px;}
 .ribbon-three {width:130px;height:130px;left:-44px;bottom:-44px;}
 .ribbon-four {width:130px;height:143px;right:-45px;bottom:-32px;}
}
@media(prefers-reduced-motion:reduce){
 .step-panel,.format-collage.is-changing,.brief-preview::after,.brief-preview .visual-button,.benefit-review.is-observed .review-ring circle,.benefit-review.is-observed .review-orbit .icon {animation:none!important;}
 .format-copy,.format-copy.is-current{filter:none;transform:none;transition:none;}
 .review-ring circle{stroke-dashoffset:0;}.review-check{opacity:0;}
}
.step-panel {position:absolute;inset:0;}
.step-panel.is-leaving {pointer-events:none;animation:none;}
@media(prefers-reduced-motion:reduce){.step-panel.is-leaving{animation:none!important;}}
@media(min-width:761px){.footer-main{max-width:860px;margin:72px auto 44px;}.footer-main nav{gap:24px;}}
.footer-inner>.button-row .button:first-child {min-width:156px;background:radial-gradient(ellipse at 50% 100%,#494642,#191919 72%);box-shadow:inset 0 0 0 1px #ffffff24,inset 0 2px 7px #ffffff12;color:#f4f5f0;}
.footer-inner>.button-row .button:last-child {min-width:175px;}
.footer-social[aria-label^='YouTube'] svg rect,.footer-social[aria-label^='LinkedIn'] svg rect {fill:currentColor;}
.footer-social[aria-label^='YouTube'] svg path {stroke:#292929;fill:#292929;}
.footer-social[aria-label^='LinkedIn'] svg path {stroke:#292929;}
@media(max-width:760px){.footer-inner>.button-row .button:first-child,.footer-inner>.button-row .button:last-child{min-width:0;}}
.benefits.is-offscreen .filter-track,.benefits.is-offscreen .status-track,.benefits.is-offscreen .creative-bars i,.benefits.is-offscreen .review-ring circle,.benefits.is-offscreen .review-orbit .icon,.benefits.is-offscreen .brief-preview::after,.benefits.is-offscreen .visual-button{animation-play-state:paused;}
/* The reference's haze lies above the lower card faces, not only behind them. */


@media(max-width:760px){
 .footer-inner{min-height:613px;padding-top:43px;}
 .footer-inner>h2{margin-bottom:20px;}
 .footer-inner>.button-row .button{min-height:42px;padding-top:10px;padding-bottom:10px;font-size:14px;}
 .footer-main{margin-top:68px;margin-bottom:56px;}
 .footer-main nav{font-size:14px;gap:20px;}
 .copyright{font-size:14px;line-height:25px;margin-bottom:20px;}
 .footer-legal button{font-size:14px;}
 .ribbon-three,.ribbon-four{display:none;}
}
.brief-preview::after{right:120px;}
.brief-preview::before{content:'';position:absolute;right:120px;bottom:18px;width:25px;height:32px;opacity:0;pointer-events:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 32'%3E%3Cpath d='M8 17V4c0-4 5-4 5 0v10c1-3 5-3 5 1 2-2 5-1 5 2v6l-5 8H9L2 20c-2-4 2-6 4-3l2 3Z' fill='white' stroke='%23252525' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");animation:brief-hand 3s ease-in-out infinite;}
@keyframes brief-cursor{0%,25%,100%{transform:translate(12px,10px);opacity:1}44%{transform:translate(0,-38px);opacity:1}46%,72%{transform:translate(0,-38px);opacity:0}78%{transform:translate(0,-38px);opacity:1}}
@keyframes brief-hand{0%,44%,78%,100%{opacity:0}46%,72%{opacity:1}}
body[data-motion='paused'] .brief-preview::before,.benefits.is-offscreen .brief-preview::before{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.brief-preview::before{animation:none!important;}}
.section-action .button{min-width:174px;background:radial-gradient(ellipse at 50% 100%,#494642,#191919 72%);box-shadow:inset 0 0 0 1px #ffffff24,inset 0 2px 7px #ffffff12;color:#f4f5f0;}
.section-action .button .icon{display:none;}


.footer-main nav a{white-space:nowrap;}
@media(max-width:360px){.footer-main nav{gap:12px;font-size:12px;}}
/* Nov 9 second audit: measured typography and missing layers. */
body{letter-spacing:normal;}
.benefit-card{background:var(--app-card);box-shadow:none;border:0;}
.benefit-flexible,.benefit-possibility,.benefit-clear{background:var(--app-card);}
.benefit-copy h3{letter-spacing:-.02em;font-weight:600;}
.benefit-copy p{font-weight:500;letter-spacing:-.01em;}
.brief-preview{height:270px;border:0;border-radius:24px;background:var(--app-elevated);box-shadow:0 2px 2px #00000008;transform:translateY(24px);}
.brief-head{margin-bottom:24px;}
.brief-head>span:first-child{font-size:18px;font-weight:600;letter-spacing:-.02em;}
.round-icon{width:52px;height:52px;border:2px solid #ffffff0c;}
.brief-preview h3{font-weight:500;letter-spacing:-.02em;line-height:20px;margin:0 0 8px;}
.brief-preview>p{font-weight:500;line-height:24px;letter-spacing:-.01em;}
.visual-button{position:absolute;left:24px;right:36px;bottom:18px;height:46px;margin:0;font-size:16px;font-weight:500;padding:0;}
.visual-button .icon{display:none;}
.filter-window{left:25%;width:65%;height:220px;top:-30px;mask-image:linear-gradient(#000 20%,#0006 42%,transparent 70%);}
.filter-track{background:var(--app-elevated);border:0;padding:0 14px;}
.filter-track>div{gap:12px;padding:12px 0;}
.filter-track span,.filter-track b{font-size:13px;font-weight:500;line-height:16px;letter-spacing:-.01em;}
.review-orbit{border-color:#343434;top:22px;}
.review-percent{font-size:23px;line-height:28px;color:var(--sage);font-weight:600;letter-spacing:-.04em;}
.benefit-review.is-observed .review-ring circle{animation:review-complete 1.6s cubic-bezier(.2,0,.2,1) forwards;}
.benefit-review.is-observed .review-percent{animation:progress-confirm 3.4s ease both;}
.benefit-review.is-observed .review-check{animation:check-confirm 3.4s ease both;}
@keyframes progress-confirm{0%,49%,100%{opacity:1;transform:scale(1)}55%,77%{opacity:0;transform:scale(.7)}}
@keyframes check-confirm{0%,49%,100%{opacity:0;transform:scale(.7)}60%,74%{opacity:1;transform:scale(1)}}
.creative-bars{left:28px;right:auto;width:260px;max-width:calc(100% - 56px);gap:16px;height:120px;top:28px;mask-image:linear-gradient(#000 0%,#0007 65%,transparent 100%);}
.creative-bars i{background:linear-gradient(#b8dfa9,#b8dfa91a);}
.creative-bars i:nth-child(1){height:20%;--bar:0}.creative-bars i:nth-child(2){height:35%;--bar:1}.creative-bars i:nth-child(3){height:52%;--bar:2}.creative-bars i:nth-child(4){height:69%;--bar:3}.creative-bars i:nth-child(5){height:83%;--bar:4}.creative-bars i:nth-child(6){height:100%;--bar:5}
.status-window{top:38px;mask-image:none;}
.status-track{position:relative;left:calc(50% - 76px);gap:10px;animation:status-step 7.2s cubic-bezier(.22,.75,.3,1) infinite;}
@keyframes status-step{0%,28%{transform:translateX(-648px)}33.333%,61.333%{transform:translateX(-486px)}66.666%,94.666%{transform:translateX(-324px)}100%{transform:translateX(-162px)}}
.status-track>span{height:46px;min-width:152px;width:152px;flex:none;border-radius:12px;gap:8px;justify-content:flex-start;padding:0 8px 0 12px;border:1px solid #2525250f;overflow:clip;}
.status-track>span>span{display:flex;flex-direction:column;text-align:left;gap:5px;min-width:0;}
.status-track b{font-size:13px;font-weight:600;line-height:13px;letter-spacing:-.02em;}
.status-track small{font-size:9px;font-weight:500;line-height:9px;opacity:.8;}
.status-track .icon{width:28px;height:18px;flex:none;stroke:none;}

.workflow-caption{color:#f4f5f0;font-size:11px;line-height:16px;}
.period-tabs{padding:0;width:426px;background:#2b2b2b;}
.period-tabs button{font-size:24px;line-height:24px;font-weight:500;letter-spacing:normal;min-height:64px;border-radius:16px;}
.period-tabs button[aria-selected='true']{background:#333;border:0;box-shadow:0 2px 3px #0000000a;}
.invitation-card{background:linear-gradient(180deg,var(--app-canvas) 0%,#3e4c37 18%,#7f9e6e 48%,#b8dfa9 78%,#a6d992 100%);box-shadow:none;border:0;}
.invitation-card>p{font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.01em;}
.invitation-features{grid-template-columns:max-content max-content;gap:26px 70px;}
.invitation-features>span{color:#283c21;font-size:16px;font-weight:500;line-height:24px;}
.invitation-features .icon{width:22px;height:22px;stroke-width:2;}
.invitation-card .button{font-size:16px;min-height:54px;padding:16px 24px;}
.invitation-card .button-dark{background:radial-gradient(ellipse at 50% 100%,#494642,#191919 72%);color:#fff;box-shadow:inset 0 0 0 1px #ffffff24,inset 0 2px 7px #ffffff12;}
.invitation-card .button-secondary{background:#ffffff38;color:#23351c;border:0;}
.receipt-preview{width:600px;height:280px;background:var(--app-card);border:0;padding:44px 24px;gap:0;clip-path:polygon(0.000000% 8%,1.785714% 0%,3.571429% 8%,5.357143% 0%,7.142857% 8%,8.928571% 0%,10.714286% 8%,12.500000% 0%,14.285714% 8%,16.071429% 0%,17.857143% 8%,19.642857% 0%,21.428571% 8%,23.214286% 0%,25.000000% 8%,26.785714% 0%,28.571429% 8%,30.357143% 0%,32.142857% 8%,33.928571% 0%,35.714286% 8%,37.500000% 0%,39.285714% 8%,41.071429% 0%,42.857143% 8%,44.642857% 0%,46.428571% 8%,48.214286% 0%,50.000000% 8%,51.785714% 0%,53.571429% 8%,55.357143% 0%,57.142857% 8%,58.928571% 0%,60.714286% 8%,62.500000% 0%,64.285714% 8%,66.071429% 0%,67.857143% 8%,69.642857% 0%,71.428571% 8%,73.214286% 0%,75.000000% 8%,76.785714% 0%,78.571429% 8%,80.357143% 0%,82.142857% 8%,83.928571% 0%,85.714286% 8%,87.500000% 0%,89.285714% 8%,91.071429% 0%,92.857143% 8%,94.642857% 0%,96.428571% 8%,98.214286% 0%,100.000000% 8%,100.000000% 92%,98.214286% 100%,96.428571% 92%,94.642857% 100%,92.857143% 92%,91.071429% 100%,89.285714% 92%,87.500000% 100%,85.714286% 92%,83.928571% 100%,82.142857% 92%,80.357143% 100%,78.571429% 92%,76.785714% 100%,75.000000% 92%,73.214286% 100%,71.428571% 92%,69.642857% 100%,67.857143% 92%,66.071429% 100%,64.285714% 92%,62.500000% 100%,60.714286% 92%,58.928571% 100%,57.142857% 92%,55.357143% 100%,53.571429% 92%,51.785714% 100%,50.000000% 92%,48.214286% 100%,46.428571% 92%,44.642857% 100%,42.857143% 92%,41.071429% 100%,39.285714% 92%,37.500000% 100%,35.714286% 92%,33.928571% 100%,32.142857% 92%,30.357143% 100%,28.571429% 92%,26.785714% 100%,25.000000% 92%,23.214286% 100%,21.428571% 92%,19.642857% 100%,17.857143% 92%,16.071429% 100%,14.285714% 92%,12.500000% 100%,10.714286% 92%,8.928571% 100%,7.142857% 92%,5.357143% 100%,3.571429% 92%,1.785714% 100%,0.000000% 92%);}
.receipt-preview .demo-kicker{display:none;}
.receipt-preview>strong{font-size:64px;line-height:1.1;letter-spacing:-.04em;margin:12px 0 6px;}
.receipt-preview .receipt-steps{display:none;}
.receipt-preview small{margin-top:20px;}
.story-quote{background:transparent;border:1px solid #ffffff0a;box-shadow:none;}
.faq-item{background:var(--app-card);border:1px solid #ffffff08;}
.faq-question:hover{background:#ffffff04;}
.site-header.is-scrolled{border-bottom-color:transparent;}
.footer-main nav a{border-radius:99px;padding:5px 12px;transition:background .16s,color .16s;margin:0 -12px;}
.footer-main nav a:hover{background:#ffffff0a;text-decoration:none;}
.ribbon-shadow{stroke:#ffffff09;}
body[data-motion='paused'] .review-percent,.benefits.is-offscreen .review-percent{animation-play-state:paused;}
@media(max-width:760px){
 .brief-preview{transform:none;height:250px;}
 .brief-preview>p{font-size:14px;line-height:21px;}
 .brief-head{margin-bottom:20px;}
 .period-tabs button{font-size:18px;line-height:24px;min-height:48px;}
 .invitation-features{gap:20px 22px;}
 .invitation-features>span{font-size:14px;}
 .invitation-card>p{font-size:14px;line-height:21px;}
 .invitation-card .button{min-height:48px;font-size:14px;padding:12px 20px;}
 .receipt-preview{width:calc(100% - 40px);height:260px;padding:35px 16px;}
 .receipt-preview>strong{font-size:44px;}
 .footer-main nav a{padding:5px 6px;margin:0 -6px;}
}
@media(prefers-reduced-motion:reduce){.benefit-review.is-observed .review-percent,.benefit-review.is-observed .review-check{animation:none!important;}.review-check{opacity:0;}.review-percent{opacity:1;}}
.hero-copy>p,.nav-link{font-weight:500;letter-spacing:-.01em;}
.invitation-features .icon{color:currentColor;}
.invitation-card .button-glass{background:#ffffff38;color:#23351c;border:0;}
.invitation-card .button-dark{min-width:164px;}
.invitation-card .button-glass{min-width:180px;}
@media(max-width:760px){.invitation-card .button-dark,.invitation-card .button-glass{min-width:0;}.footer-legal{column-gap:20px;row-gap:6px;}.footer-inner{padding-bottom:32px;}}
.ribbon-face{stroke:url(#katano-ribbon-gradient);}
.ribbon-fold{fill:#c7e3b7;}
.ribbon-three{left:calc(50% - 715px);}
@media(max-width:760px){.ribbon-three{left:-44px;}}

/* Mobile reference uses its own internal scale, not desktop text in narrower cards. */
@media(max-width:760px){
 .benefit-copy{left:18px;right:16px;bottom:20px;}
 .benefit-copy h3{font-size:17px;line-height:19.55px;margin-bottom:6px;}
 .benefit-copy p{font-size:13px;line-height:18.2px;max-width:280px;}
 .brief-preview{position:absolute;top:64px;left:16px;right:16px;width:auto;height:213px;margin:0;padding:18px 16px;transform:none;}
 .brief-head{height:40px;margin-bottom:14px;}
 .brief-head>span:first-child{font-size:20px;}
 .brief-preview .round-icon{width:40px;height:40px;}
 .brief-preview h3{font-size:16px;line-height:16px;margin-bottom:8px;}
 .brief-preview>p{font-size:13px;line-height:19.5px;letter-spacing:-.02em;}
 .visual-button{left:16px;right:auto;width:220px;max-width:calc(100% - 32px);font-size:16px;}
 .filter-window{left:auto;right:14px;width:172px;}
 .creative-bars{left:18px;max-width:calc(100% - 36px);height:100px;gap:10px;}
 .workflow-caption{padding-right:48px;}
}

@media(max-width:760px){
 .invitation-card>p{font-size:15px;line-height:22.5px;}
 .invitation-features{margin:30px 0 36px;gap:18px 22px;}
 .invitation-features>span{font-size:15px;line-height:22.5px;}
 .invitation-card .button-row{gap:12px;}
 .invitation-card .button-dark{min-width:158px;height:48.5px;min-height:48.5px;font-size:16px;line-height:24px;padding:12px 20px;}
 .invitation-card .button-glass{min-width:174px;height:46.5px;min-height:46.5px;font-size:15px;line-height:22.5px;padding:12px 20px;}
 .footer-main{margin-bottom:44px;}
 .footer-inner>.button-row .button:first-child{min-width:144px;}
 .footer-inner>.button-row .button:last-child{min-width:161px;padding-left:12px;padding-right:12px;}
}
@media(max-width:360px){
 .footer-inner>.button-row .button:first-child,.footer-inner>.button-row .button:last-child{min-width:0;font-size:12px;padding-left:10px;padding-right:10px;}
 .invitation-features{column-gap:12px;}
 .invitation-features>span{font-size:13px;gap:8px;}
 .invitation-features .icon{width:18px;height:18px;}
}
@media(min-width:761px){
 .footer-inner>h2{margin-bottom:32px;}
 .footer-main{margin-bottom:50px;}
}

.results>p{font-size:32px;line-height:35.2px;font-weight:500;margin:20px 0 34px;}
@media(max-width:760px){.results>p{font-size:20px;line-height:22px;margin:20px auto 22px;}}
/* Match the reference's macOS text rasterization, while retaining licensed Inter. */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
@media(min-width:761px){
 .brief-preview{padding:18px 24px;}
 .brief-head{margin-bottom:18px;}
 .brief-head>span:first-child{font-size:20px;}
 .visual-button{right:auto;width:220px;max-width:calc(100% - 48px);}
}
/* Reference FAQ-to-footer gap: 100px desktop and 0px on mobile. */
.faq-more{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:8px;font-size:16px;line-height:27.2px;font-weight:500;}
.faq-more .inline-link{padding:2px 8px;border:0;border-radius:8px;background:#b8dfa90d;color:var(--sage);font-size:inherit;line-height:inherit;}
@media(min-width:761px){.faq{padding-bottom:100px;}}
@media(max-width:760px){.faq{padding-bottom:0;}.faq-more{padding-top:4px;font-size:14px;line-height:23.8px;}}
@media(max-width:360px){.faq-more{font-size:12px;gap:6px;}}

/* Verified-content edition: omit unsupported sections without reserving space.
   The retained cards, typography and motion keep their existing composition. */
.hero {height:auto;min-height:0;padding-bottom:64px;}
.workflow-caption {position:static;margin:18px auto 0;max-width:620px;padding:0 24px;}
.footer-inner {min-height:0;}
.footer-main {max-width:860px;}
.copyright {margin-bottom:0;}
.mobile-menu nav {margin-top:40px;}
.mobile-menu nav>a {font-size:28px;font-weight:600;letter-spacing:-.04em;}
.benefit-review.is-observed .review-check {animation:verified-check 1.6s ease both;}
@keyframes verified-check {0%,65%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
@media(max-width:760px){
 .hero {padding-bottom:48px;}
 .workflow-caption {margin-top:16px;padding:0 32px;}
 .footer-inner {min-height:0;padding-bottom:80px;}
 .copyright {padding:0 24px;}
 .footer-main {gap:24px;}
 .faq {padding-bottom:24px;}
}
@media(prefers-reduced-motion:reduce){
 .benefit-review .review-check {opacity:1;transform:none;animation:none!important;}
}

/* Precision pass 09/11: rendered comparison, own geometry, KATANO palette.
   These rules explicitly replace the older App-control skin where it differs. */
.hero h1,.benefits>h2,.invitation-card h2,.faq .section-heading h2,.footer-inner>h2 {font-weight:600;}
.hero-actions .button,.footer-inner>.button-row .button {letter-spacing:-.03em;}
.hero-actions .button-primary,.brief-preview .visual-button {
 background:radial-gradient(ellipse 65% 90% at 50% 0,#cce9bf 0%,#cce9bf00 70%),#b8dfa9;
 color:#20301b;border:0;box-shadow:none;
}
.hero-actions .button-quiet {background:#303030;border:0;box-shadow:none;}
@media(min-width:761px){.hero-actions .button-quiet{min-width:220px;}}
.hero-actions .button:hover {box-shadow:none;filter:none;transform:none;opacity:.9;}
/* Campaign art comes from the owner's recovered catalogue, without live metrics. */
.campaign-art::after {background:none;}
.hero-card .campaign-art img {object-position:center 40%;}
.hero-card {border-color:#343434;background:var(--app-card);}
.campaign-owner {display:flex;align-items:center;gap:6px;}
.campaign-publisher-mark {width:20px;height:20px;object-fit:cover;border-radius:5px;}
.hero-card .campaign-info {padding:10px 12px 12px;}
.hero-card .campaign-info h3 {font-size:15px;line-height:20px;font-weight:600;min-height:0;margin:8px 0 3px;}
.campaign-artist {font-size:11px;line-height:16px;color:#bcbcbc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 12px;}
.campaign-meta {color:#bcbcbc;}



.workflow-caption {color:#b9b9b9;}
.collage-card .campaign-card {background:var(--app-card);}
.collage-card .campaign-info h3 {margin:8px 0 4px;min-height:0;}
.collage-card .campaign-artist {margin-bottom:12px;}
/* Ribbons follow the panel edges at every width. Filled curves keep the bevel
   attached to its arc; no proprietary SVG paths or assets are used. */
.site-footer {--footer-edge:max(24px,calc((100% - 1220px)/2));}
.footer-inner {padding-top:89px;padding-bottom:102px;}
.ribbon {overflow:visible;}
.ribbon-face {fill:url(#katano-ribbon-gradient);stroke:none;}
.ribbon-shadow {fill:#00000012;stroke:none;}
.ribbon-fold {fill:#c5e2b6;stroke:none;}
.ribbon-ring {fill:none;stroke:url(#katano-ribbon-gradient);stroke-width:48;}
.ribbon-one {left:calc(var(--footer-edge) - 56px);top:88px;width:190px;height:145px;}
.ribbon-two {right:calc(var(--footer-edge) - 15px);top:48px;width:190px;height:180px;}
.ribbon-three {left:calc(var(--footer-edge) - 96px);bottom:-94px;width:188px;height:188px;}
.ribbon-four {right:calc(var(--footer-edge) - 74px);bottom:-55px;width:210px;height:230px;}
@media(max-width:1100px) and (min-width:761px){
 .benefits {width:calc(100% - 80px);}
 .brief-preview {position:absolute;top:64px;left:16px;right:16px;width:auto;height:250px;padding:18px 16px;transform:none;}
 .brief-head {margin-bottom:16px;}
 .brief-head>span:first-child {font-size:14px;line-height:18px;}
 .brief-preview .round-icon {width:36px;height:36px;flex-shrink:0;}
 .brief-preview h3 {font-size:16px;line-height:18px;}
 .brief-preview>p {font-size:13px;line-height:19.5px;}
 .brief-preview .visual-button {left:16px;max-width:calc(100% - 32px);font-size:14px;}
 .benefit-copy h3 {font-size:20px;}
 .benefit-copy p {font-size:14px;line-height:20px;}
}
@media(max-width:760px){


 .hero-actions .button-quiet {min-width:0;}
 .site-footer {--footer-edge:16px;}
 .footer-inner {padding-top:43px;padding-bottom:80px;}
 .ribbon-one {left:calc(var(--footer-edge) - 40px);top:75px;width:110px;height:84px;}
 .ribbon-two {right:calc(var(--footer-edge) - 25px);top:64px;width:110px;height:104px;}
 .ribbon-three,.ribbon-four {display:none;}
 .workflow-caption {font-size:11px;line-height:16px;padding:0 24px;}
}

@media (min-width:761px) and (max-width:1023px) {
 .header-inner {width:calc(100% - 64px);padding:0;justify-content:space-between;}
 .desktop-navigation,.header-actions {display:none;}
 .menu-toggle {display:block;margin-right:-4px;}
}

/* Light finish: a concentrated upper reflection, softer falloff, no outer glow.
   Own CSS translation of the observed reference lighting into KATANO green. */
:root {
 --creator-action-surface:radial-gradient(ellipse 66% 108% at 50% -12%,#f0f7d9 0%,#dceec79e 38%,#dceec700 78%),linear-gradient(180deg,#b8dfa9 0%,#aad198 100%);
 --creator-quiet-surface:radial-gradient(ellipse 115% 110% at 18% -28%,#ffffff10 0%,#ffffff00 74%),linear-gradient(165deg,#333533 0%,#2e302e 100%);
 --creator-dark-surface:radial-gradient(ellipse 80% 100% at 50% 125%,#555b50 0%,#262a2500 74%),linear-gradient(180deg,#20221f,#171917);
}
.hero-actions .button-primary,.header-actions .button,.mobile-menu .button-primary,.brief-preview .visual-button {
 background:var(--creator-action-surface);
 box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #5274431c;
 border:0;color:#20301b;
}
.hero-actions .button-quiet,.footer-inner>.button-row .button:last-child {
 background:var(--creator-quiet-surface);
 box-shadow:inset 0 1px 0 #ffffff0c;
 border:0;
}
.section-action .button,.invitation-card .button-dark,.footer-inner>.button-row .button:first-child,.mobile-format-action .button-dark {
 background:var(--creator-dark-surface);
 box-shadow:inset 0 0 0 1px #ffffff24,inset 0 2px 5px #ffffff09;
 color:#f4f5f0;
}
.hero-actions .button:hover,.header-actions .button:hover,.section-action .button:hover,.footer-inner>.button-row .button:hover {
 opacity:.94;filter:brightness(1.035);transform:none;
}
.hero-actions .button-primary:hover,.header-actions .button:hover {box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #5274431c;}
.hero-actions .button-quiet:hover {box-shadow:inset 0 1px 0 #ffffff0c;}
.workflow-progress {background:#ffffff07;}
.workflow-progress span {background:linear-gradient(90deg,#d7ebc2 0%,#b8dfa9 45%,#a4cd92 100%);box-shadow:inset 0 1px 0 #ffffff25;}


.invitation-card {background:radial-gradient(ellipse 100% 70% at 50% 110%,#b8dfa932,transparent 100%),linear-gradient(180deg,var(--app-canvas) 0%,#33402d 38%,#4f6d40 78%,#86ac70 100%);}
.invitation-features>span {color:#f4f5f0;}

.invitation-card .button-glass {background:linear-gradient(145deg,#ffffff40,#ffffff20);box-shadow:inset 0 1px 0 #ffffff2b;}

.creative-bars i {background:linear-gradient(180deg,#d5e9bf 0%,#b8dfa9 18%,#b8dfa915 100%);}
.status-track>span,.status-track>span:nth-child(3n) {background:var(--creator-action-surface);box-shadow:inset 0 1px 0 #ffffff35;}
.status-track>span:nth-child(3n+2) {background:radial-gradient(100% 70% at 50% 0%,#ffffff59 0%,#ffffff00 70%),#1a67e5;color:#fff;}
.button {transition:opacity .16s ease,filter .16s ease,box-shadow .16s ease;}
/* Receipt is an explicitly illustrative amount, not a balance or payment. */
.earnings-preview {padding:30px 24px;background:var(--app-card);box-shadow:none;}
.earnings-preview .estimate-kicker {font-size:15px;line-height:21px;font-weight:500;color:#c3c4be;margin:0 0 10px;}
.estimate-campaign {display:flex;align-items:center;justify-content:center;gap:9px;max-width:100%;font-size:17px;font-weight:600;line-height:24px;color:#f0f1ed;}
.estimate-campaign img {width:48px;height:27px;object-fit:cover;border-radius:5px;flex:none;}
.estimate-campaign span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.earnings-preview>strong {font-size:64px;line-height:.95;font-weight:600;letter-spacing:-.045em;margin:12px 0 6px;color:#f4f5f0;}
.receipt-preview.earnings-preview>.estimate-label {font-size:15px;line-height:21px;font-weight:500;color:#c3c4be;}
.workflow-caption {max-width:680px;min-height:32px;}
.workflow-caption [hidden] {display:none;}
@media(max-width:760px) {
 .earnings-preview {height:236px;padding:27px 18px;}
 .earnings-preview .estimate-kicker {font-size:13px;line-height:19px;}
 .estimate-campaign {font-size:14px;line-height:21px;gap:7px;}
 .estimate-campaign img {width:38px;height:24px;}
 .earnings-preview>strong {font-size:48px;line-height:.95;margin:14px 0 6px;}
 .receipt-preview.earnings-preview>.estimate-label {font-size:13px;line-height:19px;}
 .workflow-caption {min-height:48px;padding:0 28px;}
}
/* A continuous light field, built from forest, leaf and pale sage instead of
   tinting the canvas with one translucent green. Broad lobes keep the receipt
   readable while the bottom and outer edges dissolve back into the canvas. */
.hero::before {
 content:'';position:absolute;z-index:-1;pointer-events:none;
 inset:370px -14% -30px;
 background:
  radial-gradient(ellipse 30% 31% at 14% 39%,#d8edbcaa 0%,#c7e6a86b 30%,#b8dfa91a 69%,#b8dfa900 100%),
  radial-gradient(ellipse 32% 32% at 86% 43%,#d3eabd99 0%,#b8dfa95c 32%,#b8dfa915 69%,#b8dfa900 100%),
  radial-gradient(ellipse 48% 40% at 17% 61%,#5c965bb3 0%,#45784f70 42%,#234d3500 100%),
  radial-gradient(ellipse 48% 43% at 84% 67%,#75a568a8 0%,#4e7f515c 43%,#234d3500 100%),
  radial-gradient(ellipse 82% 42% at 50% 65%,#274d37b3 0%,#203d2b70 50%,#17332200 100%);
 filter:blur(42px);
 mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 66%,transparent 100%);
}
.discover-panel {overflow:hidden;align-items:flex-start;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(#000 58%,#000d 79%,transparent 100%);mask-composite:intersect;}
.discover-panel::after {content:'';position:absolute;inset:80px 0 0;pointer-events:none;z-index:4;background:linear-gradient(180deg,#c7e6a800 0%,#c7e6a812 45%,#5c965b16 74%,#274d3700 100%);}
.site-header,.site-header.is-scrolled {background:var(--app-canvas);border:0;box-shadow:none;backdrop-filter:none;}
.header-actions>.header-signin {background:none;border:0;cursor:pointer;font-size:14px;line-height:21px;font-weight:500;color:#dededb;padding:8px 0;}
.status-track .icon {fill:currentColor;stroke:none;width:28px;height:18px;}
.access-notice {max-width:min(440px,calc(100% - 32px));padding:28px;border:1px solid #ffffff16;border-radius:20px;background:var(--app-card);color:#ededed;box-shadow:0 20px 70px #0004;}
.access-notice::backdrop {background:#0008;backdrop-filter:blur(4px);}
.access-notice h2 {font-size:24px;line-height:1.2;margin-bottom:12px;}
.access-notice p {font-size:15px;line-height:23px;color:#bdbdb8;margin-bottom:20px;}
.access-notice .button {background:var(--creator-action-surface);color:#20301b;}
@media(max-width:760px){.hero::before{inset:330px -42% -25px;filter:blur(30px);}.discover-panel{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(#000 60%,#000d 82%,transparent 100%);}}

/* The observed post and receipt views start at the top of the shared stage. */
#step-panel-1,#step-panel-2 {align-items:flex-start;}

@media(prefers-reduced-motion:reduce){.status-track{transform:translateX(-162px);}}

/* These declarations must outrank the entry-animation shorthands above: pause
   applies even while the ring or bars are still drawing, not just after entry. */
body[data-motion='paused'] .benefit-review .review-ring circle,
body[data-motion='paused'] .benefit-possibility .creative-bars i,
.benefits.is-offscreen .benefit-review .review-ring circle {
 animation-play-state:paused;
}