/* Original implementation from rendered measurements, not reference source code.
   Desktop 1440×900 / mobile 390×844, zoom 100%. See docs/FIDELITY-REVIEW.md. */
:root { --app-canvas:#131313; --app-card:#181818; --app-surface:#181818; --app-elevated:#202020; --app-highlight:#252525; --app-border:#ffffff0d; }
body { letter-spacing:-.025em; }
h1,h2,.hero h1,.section-heading h2,.benefits>h2,.invitation-card h2,.footer-inner>h2 {font-weight:500;letter-spacing:-.03em;}
.hero h1 {max-width:829px;line-height:.95;letter-spacing:-.035em;}
.hero {padding-top:155px; min-height:1322px;}
.hero-copy>p {margin:28px auto 36px;line-height:25px;letter-spacing:-.02em;}
.header-inner {max-width:1300px;height:67px;padding-left:40px;gap:16px;}
.brand-link img {width:108px;height:34px;object-fit:contain;}
.desktop-navigation {gap:14px;}
.header-actions {gap:12px;}
.preview-tag {display:none;}
.site-header,.site-header.is-scrolled {background:var(--app-canvas);}
.button {font-weight:500;box-shadow:none;transition:opacity .15s ease;}
.button:hover {opacity:.9;transform:none;filter:none;box-shadow:none;}
.hero-actions .button {font-size:17px;line-height:24px;height:54px;min-width:194px;padding:15px 30px;}
.hero-actions .button-secondary {min-width:220px;}
.header-actions .button {background:var(--sage);color:#20301b;border:0;min-width:135px;}
.workflow {margin-top:88px;}
.workflow-tabs {display:flex;align-items:center;justify-content:center;gap:16px;}
.workflow-tabs button {font-size:21px;line-height:31.5px;padding:12px 24px;flex:1;}
.workflow-tabs button+button {position:relative;border:0;}
.workflow-tabs button+button::before {content:'';position:absolute;left:-8px;top:16px;bottom:16px;width:1px;background:#ffffff18;}
.workflow-progress {margin:18px auto 24px;}
.workflow-stage {height:350px;}
.campaign-track {position:relative;width:100%;height:326px;left:0;transform:none;display:block;}
.hero-card {position:absolute;left:50%;top:0;width:280px;height:326px;border-width:4px;border-radius:16px;transform-origin:50% 0;transition:transform .55s cubic-bezier(.25,.46,.45,.94),opacity .55s;}
.hero-card .campaign-art {height:188px;}
.hero-card .campaign-info {padding:12px 12px 6px;}
.hero-card .campaign-owner {font-size:11px;}
.hero-card .campaign-info h3 {font-size:14px;line-height:20px;min-height:40px;margin:6px 0 10px;font-weight:500;}
.hero-card .campaign-meta {font-size:10px;}

.results {height:411.2px;min-height:0;padding:48px 16px 0;position:relative;}
.results h2 {font-size:80px;font-weight:500;line-height:1;letter-spacing:-.03em;}
.results>p {font-size:29px;line-height:37px;margin:20px 0;}
.results>.material-caption {position:absolute;bottom:62px;left:16px;right:16px;margin:0;}
.benefits {padding-top:64px;}
.benefits>h2 {font-size:52px;line-height:52px;margin-bottom:56px;}
.benefit-card {border-radius:20px;}
.benefit-copy {bottom:28px;}
.benefit-copy h3 {font-size:23px;line-height:27.6px;letter-spacing:-.035em;margin-bottom:8px;}
.benefit-copy p {font-size:15px;line-height:21px;letter-spacing:-.018em;}
.brief-preview {position:relative;transform:translateY(24px);padding:24px;border-radius:24px;}
.brief-preview::after {content:'';position:absolute;bottom:-20px;right:84px;width:23px;height:31px;background:var(--app-text);clip-path:polygon(0 0,0 90%,28% 68%,47% 100%,66% 88%,47% 60%,88% 58%);filter:drop-shadow(0 2px 2px #0008);}
.section-action {margin-top:56px;}
.section-action .button {min-height:56px;border-radius:99px;}
.review-orbit {width:120px;height:120px;top:22px;border-width:12px;}
.review-orbit>div {transform:none;border:0;position:relative;}
.review-orbit .icon {transform:none;}
.review-ring {position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.review-ring circle {fill:none;stroke:var(--sage);stroke-width:12;stroke-dasharray:251.3;stroke-dashoffset:251.3;}
.benefit-review.is-observed .review-ring circle {animation:review-complete 1.6s cubic-bezier(.2,0,.2,1) forwards;}
@keyframes review-complete {to {stroke-dashoffset:0;}}
.creative-bars {left:30%;right:15%;height:115px;gap:10px;}
.creative-bars i {transform:scaleY(0);transform-origin:bottom;}
.benefit-possibility.is-observed .creative-bars i {animation:bars-arrive .6s ease-out forwards;animation-delay:calc(var(--bar,0)*.1s);}
.creative-bars i:nth-child(2){--bar:1}.creative-bars i:nth-child(3){--bar:2}.creative-bars i:nth-child(4){--bar:3}.creative-bars i:nth-child(5){--bar:4}
@keyframes bars-arrive {to {transform:scaleY(1);}}
.formats {height:200svh;margin-top:56px;}
.formats-sticky {height:100svh;max-height:none;top:0;max-width:1260.8px;}
.format-texts {width:467px;height:100%;padding:0;}
.format-copy {left:0;right:0;gap:18px;}
.format-copy p {font-size:26px;line-height:39px;letter-spacing:-.03em;}
.format-collage {left:61%;top:50%;height:670px;transform:translateY(-50%);}
.stories {padding-top:64px;}
.stories .section-heading {position:relative;}
.stories .section-heading h2 {line-height:1;max-width:560px;margin:24px auto 0;}
.stories .section-heading>.material-caption {position:absolute;top:100%;left:0;right:0;margin-top:10px;font-size:10px;}
.stories-marquee {margin-top:56px;}
.story-video {height:462px;border-radius:28px;}
.story-video::before,.story-video::after {display:none;}
.story-symbol {background:none;border:0;border-radius:0;width:40px;height:40px;}
.story-symbol .icon {fill:currentColor;stroke:none;width:30px;height:30px;}
.story-caption {left:24px;bottom:24px;}
.story-caption strong {font-size:23px;}
.quote-grid {max-width:992px;gap:24px;margin-top:72px;}
.story-quote {min-height:180px;border-radius:20px;padding:24px;position:relative;}
.quote-person {margin-bottom:16px;}
.story-quote>p {margin-bottom:0;line-height:24px;font-size:16px;}
.pending-label {position:absolute;bottom:8px;font-size:9px;}
.story-invite {min-height:180px;padding:24px;}
.story-invite>p {display:none;}
.story-invite h3 {font-size:32px;line-height:1.05;font-weight:500;}
.invitation {padding-top:64px;}
.invitation-card {padding:80px 72px;min-height:614px;border-radius:40px;background:linear-gradient(180deg,#252525 0%,#33412e 38%,#71985f 100%);}
.invitation-card h2 {font-size:52px;line-height:1;max-width:640px;}
.invitation-card>p {max-width:416px;line-height:24px;margin-top:24px;color:#ededed;}
.invitation-features {margin:44px 0;gap:24px 48px;}
.invitation-features>span,.invitation-note {color:#ededed;}
.invitation-note {position:absolute;bottom:32px;}
.faq {padding-top:64px;padding-bottom:136px;}
.faq-question {font-size:19px;line-height:28.5px;padding:27px 32px;letter-spacing:-.02em;font-weight:500;}
.faq-answer p {line-height:25px;padding-left:32px;padding-right:32px;}
.faq-list {margin-top:48px;gap:16px;}
.faq-item {border-radius:20px;}
.footer-inner>h2 {letter-spacing:-.02em;max-width:440px;margin-left:auto;margin-right:auto;}
.mobile-menu-actions .button-quiet {order:-1;}
body[data-motion='paused'] .status-track,body[data-motion='paused'] .review-ring circle,body[data-motion='paused'] .creative-bars i {animation-play-state:paused;}
@media(min-width:761px) {.hero {height:1322.375px;}.preview-badge{display:none;}}
@media(max-width:760px) {
 .header-inner {width:calc(100% - 80px);height:67px;padding:0;}
 .brand-link img {width:108px;height:34px;}
 .hero {height:1050.46875px;min-height:0;padding:128px 0 0;}
 .hero-copy {padding:0 20px;}
 .hero h1 {font-size:34px;line-height:.95;letter-spacing:-.045em;}
 .hero-copy>p {font-size:16px;line-height:23px;margin:20px auto 32px;}
 .hero-actions {gap:8px;}
 .hero-actions .button {font-size:14px;line-height:21px;min-width:0;max-width:none;height:52px;padding:14px 10px;}
 .workflow {margin-top:44px;}
 .workflow-tabs {gap:0;}
 .workflow-tabs button {font-size:16px;line-height:24px;padding:12px 4px;}
 .workflow-tabs button+button::before {left:0;top:12px;bottom:12px;}
 .workflow-progress {margin:12px auto 24px;}
 .workflow-stage {height:260px;}
 .campaign-track {height:260px;}
 .hero-card {width:240px;height:280px;}
 .hero-card .campaign-art {height:160px;}
 .hero-card .campaign-info {padding:8px;}
 .hero-card .campaign-info h3 {font-size:13px;line-height:18px;min-height:36px;}
 .hero-card .campaign-owner {font-size:9px;}
 .hero-card .campaign-meta {font-size:9px;}
 .workflow-caption {margin-top:22px;}
 .results {height:282px;padding:32px 16px 0;}
 .results h2 {font-size:40px;line-height:40px;}
 .results>p {font-size:20px;line-height:28px;margin:20px auto;max-width:none;}
 .results>.material-caption {bottom:32px;}
 .period-tabs {width:300px;}
 .period-tabs button {min-height:48px;}
 .benefits {padding-top:24px;}
 .benefits>h2 {font-size:34px;line-height:34px;margin-bottom:32px;}
 .benefit-card {border-radius:20px;}
 .benefit-copy p {font-size:14px;line-height:21px;}
 .brief-preview {transform:none;}
 .formats {height:auto;margin:40px 16px 0;}
 .formats-sticky {height:auto;position:static;}
 .format-texts {height:auto;width:100%;}
 .format-copy {padding:24px 0;gap:16px;}
 .format-copy p {font-size:16px;line-height:24px;}
 .format-copy:first-child {padding-top:0;}
 .stories {padding-top:64px;}
 .stories .section-heading h2 {font-size:34px;line-height:34px;max-width:358px;margin-top:24px;}
 .stories .section-heading>.material-caption {font-size:9px;}
 .stories-marquee {margin-top:32px;}
 .story-video {width:320px;height:293px;border-radius:24px;}
 .story-caption {left:20px;bottom:20px;}
 .story-caption strong {font-size:19px;}
 .quote-grid {margin-top:32px;gap:16px;}
 .story-quote {min-height:168px;padding:20px;border-radius:20px;}
 .story-quote>p {font-size:14px;line-height:21px;}
 .pending-label {font-size:8px;bottom:7px;}
 .story-invite {min-height:180px;padding:20px;}
 .invitation {padding-top:64px;}
 .invitation-card {padding:32px 24px;min-height:501px;border-radius:24px;}
 .invitation-card h2 {font-size:34px;line-height:34px;max-width:310px;letter-spacing:-.04em;}
 .invitation-card>p {font-size:14px;line-height:21px;margin-top:24px;}
 .invitation-features {margin:28px 0;gap:18px;}
 .invitation-note {bottom:14px;font-size:9px;}
 .faq {padding-top:64px;padding-bottom:80px;}
 .faq .section-heading h2 {font-size:34px;line-height:34px;}
 .faq-list {margin-top:32px;gap:12px;}
 .faq-question {font-size:16px;line-height:24px;padding:20px;}
 .faq-answer p {font-size:14px;line-height:21px;padding-left:20px;padding-right:20px;}
 .footer-inner>h2 {font-size:36px;line-height:39.6px;max-width:310px;}
 .mobile-menu-header img {width:108px;height:34px;}
 .mobile-audience {margin-top:44px;}
 .mobile-menu nav {gap:20px;}
 .mobile-menu nav>button,.mobile-menu summary {font-size:28px;font-weight:600;letter-spacing:-.04em;}
}
@media(prefers-reduced-motion:reduce){
 .review-ring circle{stroke-dashoffset:0;animation:none!important;}
 .creative-bars i{transform:none;animation:none!important;}
 .status-track{animation:none!important;}
 .formats{height:auto;}.formats-sticky{height:auto;}.format-texts{height:auto;}
}
/* Second comparison pass: section rhythm and measured portrait-video aspect ratio. */
@media(min-width:761px){
 .formats {margin-bottom:64px;}
 .stories {padding-bottom:64px;}
 .quote-grid {margin-top:96px;}
 .story-quote {min-height:184.2px;}
 .faq .section-heading h2 {line-height:52px;}
 .faq {padding-bottom:136px;}
}
.footer-shape {width:190px;height:190px;border:44px solid var(--sage);border-radius:50%;box-shadow:none;}
.shape-one {left:calc(50% - 650px);top:-132px;transform:rotate(-20deg);}
.shape-two {right:calc(50% - 650px);top:-132px;transform:rotate(20deg);}
.shape-three {left:calc(50% - 660px);bottom:-120px;width:190px;height:190px;}
.shape-four {right:calc(50% - 660px);bottom:-120px;}
@media(max-width:760px){
 .benefits>h2 {margin-bottom:40px;}
 .formats {margin-top:68px;margin-left:24px;margin-right:24px;}
 .format-copy {gap:16px;}
 .format-copy>.icon {width:20px;height:20px;}
 .stories {padding-bottom:32px;}
 .stories-marquee {margin-top:40px;}
 .story-video {width:389.333px;height:292px;}
 .quote-grid {margin-top:64px;}
 .story-quote {min-height:144px;padding-bottom:28px;}
 .story-invite {min-height:180px;}
 .footer-shape {width:110px;height:110px;border-width:24px;}
 .shape-one {left:-45px;top:-68px;}.shape-two {right:-45px;top:-68px;}
 .shape-three {left:-40px;bottom:-68px;}.shape-four{right:-40px;bottom:-68px;}
}
@media(max-width:760px){
 .formats {padding-bottom:48px;}
 .format-copy {padding-top:28px;padding-bottom:28px;}
 .format-copy:first-child {padding-top:0;}
 .mobile-format-action {margin-top:39px;}
 .mobile-format-action .button {min-height:50.5px;}
 .stories {padding-top:48px;}
 .stories .eyebrow {min-height:23px;line-height:15px;padding:4px 8px;}
 .invitation {padding-top:48px;padding-bottom:48px;}
 .invitation-card {min-height:469px;padding-top:48px;padding-bottom:48px;}
 .invitation-features {grid-template-columns:max-content max-content;gap:20px 22px;margin:36px 0;}
 .invitation-card .button-row {align-items:flex-start;gap:10px;}
 .invitation-card .button {flex:none;min-height:48.5px;padding:12px 20px;}
 .invitation-note {bottom:12px;}
}
@media(max-width:760px){
 .format-copy,.format-copy.is-current {padding-top:28px;padding-bottom:28px;}
 .format-copy:first-child {padding-top:0;}
 .workflow {margin-top:48px;}
 .workflow-tabs button {padding-top:8px;padding-bottom:8px;line-height:24px;}
 .workflow-progress {margin-top:16px;}
 .workflow-stage,.campaign-track {height:326px;}
 .hero-card {width:280px;height:326px;}
 .hero-card .campaign-art {height:188px;}
 .hero-card .campaign-info {padding:12px;}
 .hero-card .campaign-info h3 {font-size:14px;line-height:20px;min-height:40px;}
 .hero-card .campaign-owner {font-size:11px;}
 .workflow-caption {position:absolute;top:100%;left:20px;right:20px;margin:8px auto 0;font-size:9px;}
 .brands-area {margin-top:48px;}
}
.section-heading {line-height:1;}
@media(max-width:760px){.stories {padding-bottom:68px;}}
@media(min-width:761px){
 .faq {padding-top:61.4px;padding-bottom:212px;}
 .faq-list {gap:18px;}
 .faq-question {padding-top:26px;padding-bottom:26px;}
 .faq-more {margin-top:66px;}
}
@media(max-width:760px){
 .faq-question {line-height:22.4px;padding:18px 20px;}
 .faq-answer p {font-size:15px;line-height:24px;}
 .faq-item.is-open .faq-question {padding-bottom:8px;}
 .faq-item.is-open .faq-answer p {padding-bottom:22px;}
}
@media(min-width:761px){
 .invitation {padding-bottom:64px;}
 .invitation-card {min-height:550px;}
}
.invitation-card .button {background:#252525;color:#f5f5f5;border-color:#ffffff20;}
.invitation-card .button-secondary {background:#ffffff24;color:#fff;border-color:transparent;}
@media(max-width:760px){.header-inner{width:calc(100% - 32px);}}
.invitation-card .button-secondary {background:#252525b3;color:#fff;}
.invitation-note {color:#172111;}
/* Preserve the observed portrait media area; no fake player or unauthorized video. */
.preview-dialog.is-video-preview {width:min(42.75svh,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border-radius:16px;overflow:auto;}
.pending-video-frame {width:100%;aspect-ratio:9/16;display:grid;place-items:center;background:#1b1b1b;color:#b5b5b5;font-size:12px;}
.is-video-preview>.eyebrow {display:none;}
.preview-dialog.is-video-preview h2 {font-size:16px;line-height:20px;letter-spacing:-.02em;margin:14px 16px 8px;}
.preview-dialog.is-video-preview p {font-size:12px;line-height:17px;margin:0 16px 16px;}
.is-video-preview .dialog-close {position:sticky;float:right;top:8px;margin-bottom:-44px;margin-right:8px;z-index:2;border-radius:50%;background:#252525;}
@media(min-width:761px){
 .format-collage {left:63%;}
 .format-collage .campaign-art {height:140px;}
 .format-collage .campaign-info h3 {font-size:14px;line-height:20px;min-height:40px;margin:5px 0 8px;}
 .collage-a {top:85px;}
 .collage-b {top:245px;}
 .collage-c {top:330px;}
}
/* Keep the translated hero actions inside narrow phones without truncation. */
@media(max-width:360px){.hero-actions .button{font-size:12px;padding-inline:8px;}}

/* Full-page comparison: consistent icon scale and mobile separators. */
.format-copy > .icon {color:var(--app-text);width:26px;height:26px;flex-shrink:0;}
.faq-question > .icon {width:20px;height:20px;stroke-width:2;color:var(--app-text);}
.mobile-format-action .button .icon {display:none;}
.mobile-menu-actions .button-quiet {order:0;}
@media(max-width:760px) {
 .hero-copy>p {min-height:46px;}
 .benefit-review .review-orbit {width:100px;height:100px;border-width:10px;top:20px;}
 .formats {margin-left:16px;margin-right:16px;}
 .format-copy,.format-copy.is-current {padding-left:8px;padding-right:8px;border-bottom:1px solid #ffffff14;}
 .format-copy:last-child {border-bottom:0;}
 .format-copy > .icon {width:20px;height:20px;}
 .faq-list {margin-top:36px;}
 .mobile-format-action .button {min-width:166px;}
}