/* CLOUT landing finish. Scoped presentation; no account, wallet or payment state changes. */
.cl-landing{--cl-paper:#f7f8f1;--cl-ink:#172b20;--cl-muted:#53654c;--cl-line:#dbe2d2;--cl-sage:#718a59;color:var(--cl-ink);background:radial-gradient(ellipse at 72% 7%,#e8efd866,transparent 32%)}
.cl-landing .cr-hero{max-width:1600px;padding:20px 5% 0}
.cl-landing .cr-hero-rail{color:#617456;font-size:9px;letter-spacing:.12em;border-color:var(--cl-line);padding-bottom:15px}
.cl-landing .cr-hero-grid{grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,58px);padding:58px 0 48px;align-items:center}
.cl-landing .cr-hero-copy{max-width:530px}
.cl-landing .cr-hero-copy>.cr-label{display:inline-flex;background:#edf2e4;color:#496137;padding:9px 12px;border:1px solid #d7e1c9;border-radius:30px;font-size:9px;letter-spacing:.1em;line-height:1.5}
.cl-landing .cr-hero h1{font-size:clamp(52px,5.2vw,80px);line-height:1.05;letter-spacing:-.064em;font-weight:650;margin:23px 0 26px;text-wrap:balance}
.cl-landing .cr-hero h1>span{color:#6f865b}
.cl-landing .cr-hero .cr-hero-lead{max-width:435px;font-size:clamp(16px,1.3vw,20px);line-height:1.65;color:#31472e;letter-spacing:-.02em}
.cl-landing .cr-hero .cr-hero-sub{font-size:13px;line-height:1.85;max-width:420px;color:#53654c;margin-top:13px}
.cl-landing .cr-hero-sub a{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:#314d2b;text-decoration:underline;text-decoration-color:#95ac7c;text-underline-offset:4px}
.cl-landing .cr-hero-actions{margin-top:26px;gap:24px;flex-wrap:wrap}
.cl-landing .cr-hero-trust{font-size:10px;line-height:1.6;color:#516749;margin-top:20px;gap:19px}
.cl-landing .cr-hero-art{padding:14px 0;min-width:0}
.cl-landing .fg-film{position:relative;border-radius:22px}
.cl-landing .fg-film-stage{background:#f3f6ec;border:1px solid #d2ddc4;border-radius:21px;overflow:hidden;box-shadow:inset 0 1px 0 #fff,0 4px 8px #1b362007,0 26px 55px -27px #244c315c}
.cl-landing .fg-film video{display:block;border-radius:19px}
.cl-landing .fg-film-controls{color:#526947;margin-top:15px}
.cl-landing .fg-film-controls>span{font-size:8px;letter-spacing:.09em}
.cl-landing .fg-film-controls button,.cl-landing .fg-film-controls a{min-height:34px;border-radius:8px;padding:8px 11px;font-size:10px}
.cl-landing .fg-film-progress{height:2px;background:#dce5d0;margin-top:14px}
.cl-landing .cr-brand-strip{padding:24px 28px;background:#f9faf54d;border-color:#d7e0cb}
.cl-landing .cr-brand-strip .cr-eco-brand b{font-size:clamp(19px,1.55vw,24px);color:#243d2b}
.cl-landing .xp-strip-brand .xp-soon{display:inline-flex;gap:4px;align-items:center;border-radius:16px;font-size:9px!important;background:#edf3e4}
.cl-shortcuts{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);padding:26px 5% 0;gap:12px}
.cl-shortcuts>a{min-width:0;display:flex;align-items:center;gap:12px;padding:18px 15px;border:1px solid #dae2d0;border-radius:14px;background:linear-gradient(145deg,#fcfdf8,#f1f4e9);box-shadow:inset 0 1px 0 #fff,0 2px 4px #23372204;transition:transform .2s,border-color .2s,box-shadow .2s}
.cl-shortcuts>a:hover{transform:translateY(-3px);border-color:#a5b992;box-shadow:inset 0 1px 0 #fff,0 10px 24px -15px #31492a55}
.cl-shortcut-icon{width:38px;height:40px;border-radius:11px;background:#e6eedc;border:1px solid #d2dec5;color:#49613b;display:grid;place-items:center;flex-shrink:0}
.cl-shortcuts>a>span:nth-child(2){min-width:0;flex:1}
.cl-shortcuts b{font-size:13px;font-weight:750;letter-spacing:-.02em;color:#243a29;display:block}
.cl-shortcuts small{font-size:10px;line-height:1.55;display:block;margin-top:5px;color:#5a6c50}
.cl-shortcuts>a>svg{flex-shrink:0;color:#7b9264}
.cl-landing .cr-section{max-width:1440px;padding-left:5%;padding-right:5%}
.cl-landing .cr-section-top{padding-bottom:16px;border-color:var(--cl-line)}
.cl-landing .cr-section-top>span,.cl-landing .cr-section-top .cr-label{color:#586f48}
.cl-landing .cr-section-head{margin-bottom:32px;gap:28px}
.cl-landing .cr-section-head>p{font-size:14px;line-height:1.85;color:var(--cl-muted);max-width:430px}
.cl-landing h2{letter-spacing:-.05em;text-wrap:balance}
.cl-landing .cr-feature-grid{gap:18px}
.cl-landing .cr-feature{padding:28px;border:1px solid #d4dec9;border-radius:22px;box-shadow:inset 0 1px 0 #ffffffb3,0 8px 24px -22px #1e342369;transition:transform .28s,box-shadow .28s}
.cl-landing .cr-feature:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 #ffffff66,0 20px 38px -24px #1e34234f}
.cl-landing .cr-feature p{color:#465d3a;line-height:1.85}
.cl-landing .cr-feature-dark{background-color:#1c3526;border-color:#3e5937;box-shadow:inset 0 1px 0 #a6c28355,0 10px 22px -18px #12331c75}
.cl-landing .cr-feature-dark p{color:#dce9cc}
.cl-landing .cr-feature-dark h3{color:#f1f7e8}
.cl-landing .cr-feature-dark .cr-feature-index{color:#c1d9a6}
.cl-landing .cr-feature-index{font-size:9px;color:#557044;letter-spacing:.12em}
.cl-landing .xp-feature{gap:6%;padding-top:74px!important;padding-bottom:78px!important}
.cl-landing .xp-feature-copy h2{font-size:clamp(36px,3.7vw,58px)}
.cl-landing .xp-feature-copy h2>span{color:#6b8256}
.cl-landing .xp-feature-copy>p{max-width:500px;font-size:15px}
.cl-landing .xp-feature-copy .xp-footnote{font-size:12px!important;color:#49603b!important}
.cl-landing .xp-vision-card{background:radial-gradient(ellipse at 20% 5%,#375e37,transparent 62%),linear-gradient(145deg,#203d2c,#112c22);padding:32px 34px;border-radius:26px;border-color:#6a8656;box-shadow:inset 0 1px 0 #c8dda766,inset 0 -2px 0 #0f251ccc,0 28px 50px -30px #193e3266}
.cl-landing .xp-vision-card::after{width:350px;height:350px;right:-140px;top:85px;border-color:#d0e7ad22}
.cl-landing .xp-vision-card .xp-wordmark{margin:46px 0 23px;font-size:78px}
.cl-landing .xp-vision-card h3{font-size:29px;line-height:1.22;color:#e4f5d1}
.cl-landing .xp-vision-card .xp-pending{background:#bce19d17;color:#e6f3d6;border:1px solid #b4ce9270}
.cl-landing .cr-payment-story{gap:7%}
.cl-landing .cr-payment-stack{background:#edf1e67a;border:1px solid #d4dfc8;padding:24px;border-radius:23px;box-shadow:inset 0 1px 0 #fff}
.cl-landing .cr-payment{background-color:#203728}
.cl-landing .cr-payment-copy>span{font-size:11px}
.cl-landing .cr-payment-copy>strong{font-size:32px}
.cl-landing .cr-payment-meta{font-size:9px}
.cl-landing .cr-payment-story .cr-footnote{font-size:11px;color:#526749;max-width:390px}
.cl-landing .cr-passport-section-copy>p{color:#dce8ca;font-size:15px}
.cl-landing .cr-passport-section-copy>small{font-size:11px;color:#becda9}
.cl-landing .cr-process-grid{gap:0;border:1px solid #d6e0ca;border-radius:22px;background:#fafbf580;overflow:hidden}
.cl-landing .cr-process-grid article{padding:28px;border:0;border-right:1px solid #d6e0ca;border-radius:0}
.cl-landing .cr-process-grid article:last-child{border:0}
.cl-landing .cr-process-grid article p{color:#4e6442}
.cl-landing .cr-faq details{padding:22px 0;border-color:#d5dfc9}
.cl-landing .cr-faq summary{font-size:16px;font-weight:650;color:#263e29}
.cl-landing .cr-faq details p{color:#4c6142;font-size:14px;line-height:1.85}
.cl-landing .cr-final{border-top:1px solid #d5e1c7;background:radial-gradient(ellipse at 50% 100%,#d5e7bc66,transparent 75%)}
.cl-landing .btn{min-height:48px}
.cl-landing .cr-watch{min-height:44px}
.cl-landing :is(a,button,summary):focus-visible{outline:3px solid #5a843d;outline-offset:5px;border-radius:6px}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
 .cl-landing .cr-hero-copy>:is(.cr-label,h1,p,.cr-hero-actions,.cr-hero-trust){animation:cl-intro .65s both}
 .cl-landing .cr-hero-copy h1{animation-delay:.045s}
 .cl-landing .cr-hero-copy p{animation-delay:.09s}
 .cl-landing .cr-hero-copy .cr-hero-actions{animation-delay:.13s}
 .cl-landing .cr-hero-copy .cr-hero-trust{animation-delay:.17s}
}
@keyframes cl-intro{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1100px){
 .cl-landing .cr-hero-grid{grid-template-columns:.85fr 1.15fr;gap:25px;padding:42px 0 34px}
 .cl-landing .cr-hero h1{font-size:55px}
 .cl-landing .cr-hero-trust{font-size:9px}
 .cl-shortcuts{grid-template-columns:repeat(2,1fr)}
 .cl-landing .cr-feature{padding:23px}
}
@media(max-width:850px){
 .cl-landing .cr-hero-grid{grid-template-columns:1fr;gap:34px;padding:40px 0 26px}
 .cl-landing .cr-hero-copy{max-width:600px}
 .cl-landing .cr-hero h1{font-size:clamp(49px,8vw,67px);max-width:590px}
 .cl-landing .cr-hero .cr-hero-lead{max-width:520px;font-size:18px}
 .cl-landing .cr-hero .cr-hero-sub{max-width:530px}
 .cl-landing .cr-hero-art{padding:0;width:100%}
 .cl-landing .xp-feature{gap:30px}
 .cl-landing .cr-process-grid{grid-template-columns:1fr 1fr}
 .cl-landing .cr-process-grid article{border-bottom:1px solid #d6e0ca}
 .cl-landing .cr-process-grid article:nth-child(even){border-right:0}
 .cl-landing .cr-process-grid article:nth-child(3){border-bottom:0}
}
@media(max-width:600px){
 .cl-landing .cr-hero{padding:13px 5% 0}
 .cl-landing .cr-hero-rail{font-size:7px;letter-spacing:.075em;gap:16px;line-height:1.5}
 .cl-landing .cr-hero-rail span:last-child{text-align:right}
 .cl-landing .cr-hero-copy>.cr-label{font-size:8px;padding:8px 10px}
 .cl-landing .cr-hero h1{font-size:clamp(45px,10.8vw,63px);line-height:1.07;letter-spacing:-.06em;margin:20px 0 24px}
 .cl-landing .cr-hero .cr-hero-lead{font-size:17px}
 .cl-landing .cr-hero .cr-hero-sub{font-size:12px}
 .cl-landing .cr-hero-actions{gap:20px}
 .cl-landing .fg-film-stage{border-radius:14px}
 .cl-landing .fg-film video{border-radius:13px}
 .cl-landing .fg-film-controls{gap:9px;flex-wrap:wrap}
 .cl-landing .fg-film-controls>span{font-size:7px}
 .cl-landing .fg-film-controls>div{margin-left:auto}
 .cl-landing .cr-brand-strip{padding:22px 12px;gap:21px 12px}
 .cl-landing .cr-brand-strip .cr-eco-brand b{font-size:19px}
 .cl-landing .cr-brand-strip .xp-soon{font-size:8px!important;padding:4px 6px}
 .cl-shortcuts{padding-top:18px;gap:9px}
 .cl-shortcuts>a{padding:14px 12px;gap:10px;flex-wrap:wrap}
 .cl-shortcuts>a>svg{display:none}
 .cl-shortcut-icon{width:33px;height:35px}
 .cl-shortcuts b{font-size:12px}
 .cl-shortcuts small{font-size:9px}
 .cl-landing .xp-feature{padding-top:44px!important;padding-bottom:46px!important}
 .cl-landing .xp-vision-card{padding:26px;border-radius:22px}
 .cl-landing .xp-vision-card .xp-wordmark{font-size:64px}
 .cl-landing .cr-section{padding-top:50px;padding-bottom:50px}
 .cl-landing .cr-section-top>span:last-child{font-size:8px}
 .cl-landing .cr-section-head{gap:20px}
 .cl-landing .cr-feature{padding:25px;border-radius:20px}
 .cl-landing .cr-payment-stack{padding:15px}
 .cl-landing .cr-payment-copy>strong{font-size:27px}
 .cl-landing .cr-payment-copy>span{font-size:9px}
 .cl-landing .cr-process-grid article{padding:21px}
 .cl-landing .cr-process-grid article h3{font-size:17px}
 .cl-landing .cr-process-grid article p{font-size:12px}
 .cl-landing .cr-faq summary{font-size:14px}
 .cl-landing .cr-faq details p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
 .cl-landing *,.cl-landing *::before,.cl-landing *::after{animation:none!important;transition:none!important}
 .cl-shortcuts>a:hover,.cl-landing .cr-feature:hover{transform:none}
}
/* Let small-screen grid children shrink rather than expanding the viewport. */
.cl-landing :is(.cr-payment-story,.cr-passport-section-inner,.cr-faq)>div{min-width:0}
@media(max-width:600px){
 .cl-landing .cr-payment-story{grid-template-columns:minmax(0,1fr)}
 .cl-landing .cr-payment-stack{min-width:0;max-width:100%}
 .cl-landing .cr-payment{padding:13px 11px;gap:8px}
 .cl-landing .cr-payment-copy{padding-left:8px}
 .cl-landing .cr-payment .cr-face{width:30px;height:30px}
 .cl-landing .cr-payment .cr-journey{gap:6px}
 .cl-landing .cr-passport-section-inner{grid-template-columns:minmax(0,1fr);padding-left:5%;padding-right:5%}
 .cl-landing .cr-passport-stage{max-width:100%}
}

/* The existing film poster is also the initial surface, including reduced motion. */
.cl-landing .fg-film-stage{background-image:url("assets/clout-walkthrough-poster.jpg");background-size:contain;background-position:center;background-repeat:no-repeat}
.cl-landing .fg-film video{background-color:transparent}