/* Generated at build time by scripts/webflow-fixes.mjs from webflow-fixes/. Do not edit. */
/* shared-nav (no task: Julia, one nav and footer for the whole site, 2026-10-06) */
:where(:root){--color-brand-200: 244 100% 92%;--color-brand-400: 245 90% 72%;--color-brand-500: 245 82.4% 55%;--color-brand-900: 248 75% 30%;--color-brand-strong: 245 83% 50%;--color-burgundy-200: 330 60% 90%;--color-burgundy-500: 330 100% 20%;--color-gold-200: 43 70% 90%;--color-gold-500: 43.2 65% 62.4%;--color-neutral-0: 0 0% 100%;--color-neutral-50: 210 10% 99%;--color-neutral-100: 210 10% 96%;--color-neutral-200: 210 12% 93%;--color-neutral-300: 210 10% 87%;--color-neutral-400: 210 8% 74%;--color-neutral-500: 210 6% 61%;--color-neutral-600: 210 5% 41%;--color-neutral-700: 210 5% 37%;--color-neutral-800: 210 6% 22%;--color-neutral-900: 210 8% 10%;--color-neutral-1000: 210 10% 5%;--color-surface-success-50: 136 100% 97%;--color-surface-success-100: 141 60% 75%;--color-surface-success-200: 143 55% 62%;--color-surface-success-300: 145 46% 51%;--color-surface-success-400: 148 48% 43%;--color-surface-success-500: 152 56% 44%;--color-surface-success-600: 152 45% 28%;--color-surface-caution-100: 48 96% 89%;--color-surface-caution-200: 46 96% 78%;--color-surface-caution-300: 42 96% 65%;--color-surface-caution-400: 40 94% 58%;--color-surface-caution-500: 38 92% 50%;--color-surface-caution-600: 36 88% 42%;--color-surface-caution-700: 34 84% 34%;--color-surface-danger-50: 0 100% 97%;--color-surface-danger-100: 0 79% 86%;--color-surface-danger-200: 0 79% 77%;--color-surface-danger-300: 0 72% 70%;--color-surface-danger-400: 0 68% 66%;--color-surface-danger-500: 0 72% 57%;--color-surface-danger-600: 0 63% 48%;--color-green-hairline: 152 56% 34%;--color-amber-strong: 32 92% 33%;--color-amber-strong-dark: 42 100% 72%;--color-amber-hairline: 30 74% 46%;--color-red-hairline: 0 68% 51%;--color-green-strong: var(--color-surface-success-600);--color-green-strong-dark: var(--color-surface-success-200);--color-green-hairline-dark: var(--color-surface-success-500);--color-red-strong: var(--color-surface-danger-600);--color-red-strong-dark: var(--color-surface-danger-200);--color-red-hairline-dark: var(--color-surface-danger-400)}
.site-nav,.foot-site{--color-brand-200: 244 100% 92%; 
  --color-brand-400: 245 90% 72%; 
  --color-brand-500: 245 82.4% 55%; 
  --color-brand-900: 248 75% 30%; 
  --color-brand-strong: 245 83% 50%; 
  --color-burgundy-200: 330 60% 90%; 
  --color-burgundy-500: 330 100% 20%; 
  --color-gold-200: 43 70% 90%; 
  --color-gold-500: 43.2 65% 62.4%; 
  --color-neutral-0: 0 0% 100%; 
  --color-neutral-50: 210 10% 99%; 
  --color-neutral-100: 210 10% 96%; 
  --color-neutral-200: 210 12% 93%; 
  --color-neutral-300: 210 10% 87%; 
  --color-neutral-400: 210 8% 74%; 
  --color-neutral-500: 210 6% 61%; 
  --color-neutral-600: 210 5% 41%; 
  --color-neutral-700: 210 5% 37%; 
  --color-neutral-800: 210 6% 22%; 
  --color-neutral-900: 210 8% 10%; 
  --color-neutral-1000: 210 10% 5%; 
  --color-surface-success-50: 136 100% 97%; 
  --color-surface-success-100: 141 60% 75%;
  --color-surface-success-200: 143 55% 62%;
  --color-surface-success-300: 145 46% 51%;
  --color-surface-success-400: 148 48% 43%;
  --color-surface-success-500: 152 56% 44%; 
  --color-surface-success-600: 152 45% 28%;
  --color-surface-caution-100: 48 96% 89%; 
  --color-surface-caution-200: 46 96% 78%;
  --color-surface-caution-300: 42 96% 65%;
  --color-surface-caution-400: 40 94% 58%;
  --color-surface-caution-500: 38 92% 50%; 
  --color-surface-caution-600: 36 88% 42%;
  --color-surface-caution-700: 34 84% 34%;
  --color-surface-danger-50: 0 100% 97%; 
  --color-surface-danger-100: 0 79% 86%;
  --color-surface-danger-200: 0 79% 77%;
  --color-surface-danger-300: 0 72% 70%;
  --color-surface-danger-400: 0 68% 66%;
  --color-surface-danger-500: 0 72% 57%; 
  --color-surface-danger-600: 0 63% 48%;
  --color-green-hairline: 152 56% 34%; 
  --color-amber-strong: 32 92% 33%; 
  --color-amber-strong-dark: 42 100% 72%; 
  --color-amber-hairline: 30 74% 46%; 
  --color-red-hairline: 0 68% 51%; 
  --focus-ring-gap-width: 2px; 
  --focus-ring-stroke-width: 2px; 
  --motion-duration-instant: 150ms; 
  --motion-duration-short: 220ms; 
  --motion-duration-medium: 380ms; 
  --motion-duration-page: 500ms; 
  --motion-duration-reduced: 1ms; 
  --motion-ease-guide: cubic-bezier(0.2, 0, 0, 1); 
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); 
  --motion-ease-lift: cubic-bezier(0.16, 1, 0.3, 1); 
  --motion-ease-still: cubic-bezier(0.65, 0, 0.35, 1); 
  --radius-none: 0; 
  --radius-sm: 0; 
  --radius-md: 0; 
  --radius-lg: 4px; 
  --radius-xl: 6px; 
  --radius-full: 9999px; 
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.05); 
  --shadow-md: 0 1px 2px hsl(0 0% 0% / 0.05), 0 2px 6px hsl(0 0% 0% / 0.06); 
  --shadow-lg: 0 1px 3px hsl(0 0% 0% / 0.06), 0 6px 14px hsl(0 0% 0% / 0.08); 
  --shadow-xl: 0 2px 6px hsl(0 0% 0% / 0.07), 0 14px 28px hsl(0 0% 0% / 0.10); 
  --shadow-brand: 0 0 0 1px hsl(245 82.4% 55%); 
  --shadow-focus: 0 0 0 3px hsl(245 83% 50% / 0.32); 
  --color-green-strong: var(--color-surface-success-600); 
  --color-green-strong-dark: var(--color-surface-success-200); 
  --color-green-hairline-dark: var(--color-surface-success-500); 
  --color-red-strong: var(--color-surface-danger-600); 
  --color-red-strong-dark: var(--color-surface-danger-200); 
  --color-red-hairline-dark: var(--color-surface-danger-400); 
  --focus-ring-color: var(--color-brand-strong);}
.site-nav,.foot-site{--ink:hsl(var(--color-neutral-1000));
  --n700:hsl(var(--color-neutral-800));
  --muted:hsl(var(--color-neutral-700));
  --n500:hsl(var(--color-neutral-600));
  --n400:hsl(var(--color-neutral-500));
  --n200:hsl(var(--color-neutral-200));
  --n50:hsl(var(--color-neutral-50));
  --sunken:hsl(var(--color-neutral-100));
  --white:hsl(var(--color-neutral-0));

  
  --blue:hsl(var(--color-brand-500));
  --bluetx:hsl(var(--color-brand-strong));
  --blue900:hsl(var(--color-brand-900));
  --gold:hsl(var(--color-gold-500));
  --burg:hsl(var(--color-burgundy-500));

  --blue200:hsl(var(--color-brand-200));
  --blue400:hsl(var(--color-brand-400));

  
  --blue-tint:hsl(var(--color-brand-200) / .35);
  --gold-tint:hsl(var(--color-gold-200));

  
  --danger:hsl(var(--color-surface-danger-600));
  --ok:hsl(var(--color-surface-success-600));
  --caution:hsl(var(--color-amber-strong));
  --caution-bg:hsl(var(--color-surface-caution-100));
  --ok-bg:hsl(var(--color-surface-success-100));
  --danger-bg:hsl(var(--color-surface-danger-100));
  
  --ok-soft:hsl(var(--color-surface-success-50));
  --ok-mid:hsl(var(--color-surface-success-500));
  --danger-soft:hsl(var(--color-surface-danger-50));

  
  --viz-1:var(--blue);
  --viz-2:#D98A3C;
  --viz-3:#1F9E89;
  --viz-4:#B8862B;
  --viz-5:#8A63C9;
  --viz-6:#C4536A;

  
  --map-1:hsl(var(--color-brand-500) / .08);
  --map-2:var(--blue200);
  --map-3:var(--blue400);
  --map-4:var(--blue);
  --map-5:var(--blue900);

  
  --scrim:color-mix(in srgb,var(--blue900) 12%,#000);

  
  --line:#E4E6E9;
  --line2:#BDC1C6;
  --ph:#DDE0E3;      
  --rule:#D4D7DB;    
  --foot-link:#9DA2AA;

  
  --serif:'Hedvig Letters Serif','Hedvig Letters Serif Fallback',Georgia,'Times New Roman',serif;
  --sans:'Figtree','Figtree Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  
  --guide:var(--motion-ease-guide);
  --lift:var(--motion-ease-lift);
  --still:var(--motion-ease-still);
  
  --out-quart:cubic-bezier(.25,1,.5,1);
  --tab-ease:cubic-bezier(.4,0,.2,1);
  --burger-ease:cubic-bezier(.86,0,.07,1);

  
  --container:1440px;
  --gx:40px;--pad:96px;  

  
  --space-3xs:4px;--space-2xs:8px;--space-xs:12px;--space-s:16px;--space-m:24px;--space-l:32px;
  --space-xl:40px;--space-2xl:48px;--space-3xl:64px;--space-4xl:80px;--space-5xl:96px;
  
  --step--2:clamp(0.75rem, 0.728rem + 0.0939vw, 0.8125rem);    
  --step--1:clamp(0.875rem, 0.853rem + 0.0939vw, 0.9375rem);   
  --step-0:clamp(1rem, 0.978rem + 0.0939vw, 1.0625rem);        
  --step-1:clamp(1.0625rem, 1.0405rem + 0.0939vw, 1.125rem);   
  --step-2:clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);        
  --step-3:clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);        
  --step-4:clamp(1.625rem, 1.493rem + 0.5634vw, 2rem);         
  --step-5:clamp(2rem, 1.7359rem + 1.1268vw, 2.75rem);         
  --step-6:clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);       
  --step-7:clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);          
  --space-s-m:clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);       
  --space-m-l:clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);       
  --space-l-2xl:clamp(2rem, 1.6479rem + 1.5023vw, 3rem);       
  --space-xl-3xl:clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);    
  --space-3xl-5xl:clamp(4rem, 3.2958rem + 3.0047vw, 6rem);}
@media (max-width:1023px){.site-nav,.foot-site{--gx:20px;--pad:64px}
}
:is(.site-nav,.foot-site) *,:is(.site-nav,.foot-site) *::before,:is(.site-nav,.foot-site) *::after{box-sizing:border-box}
.site-nav,.foot-site{margin:0;background:#000;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:is(.site-nav,.foot-site) img{display:block;max-width:100%}
:is(.site-nav,.foot-site) a{color:var(--bluetx)}
:is(.site-nav,.foot-site) a:hover{color:var(--blue900)}
:is(.site-nav,.foot-site) h1,:is(.site-nav,.foot-site) h2,:is(.site-nav,.foot-site) h3,:is(.site-nav,.foot-site) p{margin:0}
:is(.site-nav,.foot-site) button{font:inherit;color:inherit}
:is(.site-nav,.foot-site) [hidden]{display:none !important}
:is(.site-nav,.foot-site) .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:is(.site-nav,.foot-site) .wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gx)}
:is(.site-nav,.foot-site) .product-page{--gx:48px}
@media (max-width:1023px){:is(.site-nav,.foot-site) .product-page{--gx:40px}
}
@media (max-width:767px){:is(.site-nav,.foot-site) .product-page{--gx:20px}
}
:is(.site-nav,.foot-site) .serif{font-family:var(--serif);font-weight:400}
:is(.site-nav,.foot-site) .skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:8px 12px}
:is(.site-nav,.foot-site) .skip:focus{left:8px}
:is(.site-nav,.foot-site) :focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue)}
:is(.site-nav,.foot-site) .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border:1px solid transparent;border-radius:4px;font-family:var(--sans);font-size:16px;font-weight:400;line-height:1;letter-spacing:-.03em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease}
:is(.site-nav,.foot-site) .btn:active{transform:scale(.98)}
:is(.site-nav,.foot-site) .btn-primary{background:var(--blue);color:#fff;transition-duration:.325s}
:is(.site-nav,.foot-site) .btn-outline{background:transparent;color:var(--ink);border-color:#000}
:is(.site-nav,.foot-site) .btn-secondary{height:auto;padding:12px 20px;border-color:var(--n200);border-radius:6px;background:var(--white);color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;letter-spacing:0}
:is(.site-nav,.foot-site) .btn-inverse{background:transparent;color:#fff;border-color:#fff;transition-duration:.35s}
:is(.site-nav,.foot-site) .btn-white{background:#fff;color:var(--ink)}
:is(.site-nav,.foot-site) .btn-full{width:100%;height:52px}
:is(.site-nav,.foot-site) .btn-sm{height:40px;padding:0 16px}
:is(.site-nav,.foot-site) .btn-strong{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:0}
@media (hover:hover){:is(.site-nav,.foot-site) .btn-primary:not([disabled]):hover{background:var(--white);color:var(--blue);box-shadow:0 0 3px 2px rgba(0,0,0,.06)}
:is(.site-nav,.foot-site) .btn-outline:not([disabled]):hover,:is(.site-nav,.foot-site) .btn-secondary:not([disabled]):hover{border-color:transparent;color:var(--ink);box-shadow:0 0 5px 2px rgba(0,0,0,.08)}
:is(.site-nav,.foot-site) .btn-inverse:not([disabled]):hover{background:var(--blue);border-color:var(--blue);color:#fff}
:is(.site-nav,.foot-site) .btn-white:not([disabled]):hover{background:var(--n200);color:var(--ink)}
}
:is(.site-nav,.foot-site) .link{padding:0;border:0;background:none;color:var(--bluetx);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px}
:is(.site-nav,.foot-site) .link:hover{color:var(--blue900)}
:is(.site-nav,.foot-site) .logo{display:block;width:auto;height:32px;align-self:flex-start}
.site-nav{--nav-h:72px;--nav-hc:56px;position:sticky;top:0;z-index:50;background:transparent;color:var(--ink)}
:is(.site-nav,.foot-site) .nav-bar::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--nav-bg,transparent);transition:opacity .5s ease}
.site-nav.is-scrolled:not(.is-open) .nav-bar::before{opacity:0}
.site-nav::before,.site-nav::after{content:"";position:absolute;top:calc(var(--nav-hc) - var(--nav-h));right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease,filter .3s ease,transform .3s ease-out}
.site-nav::before{background:var(--white);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.site-nav.is-scrolled:not(.is-open)::before,.site-nav.is-scrolled:not(.is-open)::after{opacity:1}
.site-nav::after{background:var(--ink);box-shadow:0 1px 0 color-mix(in srgb,var(--white) 12%,transparent);filter:opacity(0)}
.site-nav.theme-dark::before{filter:opacity(0)}
.site-nav.theme-dark::after{filter:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-nav::before{background:color-mix(in srgb,var(--white) 72%,transparent)}
.site-nav::after{background:color-mix(in srgb,var(--ink) 72%,transparent)}
.site-nav.is-scrolled:not(.is-open)::before,.site-nav.is-scrolled:not(.is-open)::after{-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)}
@media (min-width:1024px){:is(.site-nav,.foot-site) .nav-panel{background:color-mix(in srgb,var(--white) 80%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),0 16px 40px rgba(0,0,0,.08)}
}
}
@media (prefers-reduced-transparency:reduce){.site-nav::before{background:var(--white)}
.site-nav::after{background:var(--ink)}
.site-nav.is-scrolled:not(.is-open)::before,.site-nav.is-scrolled:not(.is-open)::after{-webkit-backdrop-filter:none;backdrop-filter:none}
:is(.site-nav,.foot-site) .nav-panel{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html:has(.site-nav){scroll-padding-top:72px}
:is(.site-nav,.foot-site) .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h);transition:transform .3s ease-out}
.site-nav.is-compact:not(.is-open){pointer-events:none}
.site-nav.is-compact:not(.is-open) .nav-bar>*{pointer-events:auto}
.site-nav.is-compact:not(.is-open) .nav-bar{transform:translateY(calc((var(--nav-hc) - var(--nav-h)) / 2))}
.site-nav.is-compact:not(.is-open)::before,.site-nav.is-compact:not(.is-open)::after{transform:translateY(calc(var(--nav-hc) - var(--nav-h)))}
.site-nav.is-compact:not(.is-open) .nav-logo{transform:scale(.9)}
.site-nav.is-open .nav-bar{transition:none}
:is(.site-nav,.foot-site) .nav-logo{display:flex;flex-shrink:0;width:208px;color:var(--ink);transform-origin:left center;transition:color .3s ease,filter .3s ease,opacity .3s ease,transform .3s ease-out}
:is(.site-nav,.foot-site) .nav-logo:hover{color:var(--blue)}
:is(.site-nav,.foot-site) .nav-menu{display:flex;flex:1;align-items:center;justify-content:space-between;gap:24px}
:is(.site-nav,.foot-site) .nav-links{display:flex;align-items:center;gap:24px;margin:0 auto;padding:0;list-style:none}
:is(.site-nav,.foot-site) .nav-links>li{position:relative}
:is(.site-nav,.foot-site) .nav-link,:is(.site-nav,.foot-site) .nav-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 0;border:0;background:none;color:var(--ink);font-size:16px;line-height:16px;letter-spacing:-.03em;text-decoration:none;cursor:pointer;transition:color .3s ease,filter .3s ease,opacity .3s ease}
:is(.site-nav,.foot-site) .nav-link:hover,:is(.site-nav,.foot-site) .nav-toggle:hover{color:var(--blue)}
:is(.site-nav,.foot-site) .nav-link[aria-current]{color:var(--bluetx)}
:is(.site-nav,.foot-site) .nav-toggle svg{transition:transform 300ms ease}
:is(.site-nav,.foot-site) .nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
:is(.site-nav,.foot-site) .nav-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:680px;min-height:400px;padding:16px;border-radius:4px;background:var(--white);box-shadow:0 0 0 1px var(--n200),0 16px 40px rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 0s linear 300ms}
:is(.site-nav,.foot-site) .nav-panel.is-open{opacity:1;visibility:visible;transition:opacity 300ms ease,visibility 0s}
:is(.site-nav,.foot-site) .nav-panel:not(.is-primed) img{display:none}
:is(.site-nav,.foot-site) .nav-panel-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
:is(.site-nav,.foot-site) .nav-items{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
:is(.site-nav,.foot-site) .nav-items a{display:flex;align-items:center;gap:8px;padding:8px;border-radius:4px;color:var(--ink);text-decoration:none;transition:background-color .3s}
:is(.site-nav,.foot-site) .nav-items a:hover,:is(.site-nav,.foot-site) .nav-items a[aria-current]{background:var(--sunken);color:var(--ink)}
:is(.site-nav,.foot-site) .nav-items a[aria-current] strong{color:var(--bluetx)}
:is(.site-nav,.foot-site) .nav-icon{flex-shrink:0;width:32px;height:32px}
:is(.site-nav,.foot-site) .nav-group{margin:0 0 4px;padding:0 8px;font-size:12px;font-weight:500;line-height:1.3;color:var(--muted)}
:is(.site-nav,.foot-site) .nav-items+.nav-group{margin-top:16px}
:is(.site-nav,.foot-site) .nav-item-text{display:flex;flex-direction:column;gap:3px;min-width:0}
:is(.site-nav,.foot-site) .nav-items strong{font-size:14px;font-weight:500;line-height:1.1;letter-spacing:-.01em}
:is(.site-nav,.foot-site) .nav-item-text>span{font-size:12px;line-height:1.25;letter-spacing:-.005em;color:var(--muted)}
:is(.site-nav,.foot-site) .nav-previews{display:grid}
:is(.site-nav,.foot-site) .nav-preview{grid-area:1/1;display:flex;flex-direction:column;gap:16px;opacity:0;transition:opacity .3s ease}
:is(.site-nav,.foot-site) .nav-preview.is-active{opacity:1}
:is(.site-nav,.foot-site) .nav-preview img{width:100%;height:253px;border-radius:4px;object-fit:cover;background:var(--blue)}
:is(.site-nav,.foot-site) .nav-preview p{max-width:22rem;margin:0;font-size:12px;line-height:1.5;color:var(--ink)}
:is(.site-nav,.foot-site) .nav-preview .nav-preview-title{margin-bottom:-8px;font-family:var(--serif);font-size:16px;line-height:1.2}
@media (min-width:1024px) and (max-width:1099px){:is(.site-nav,.foot-site) .nav-links>li:first-child .nav-panel{transform:translateX(calc(-50% + 32px))}
}
:is(.site-nav,.foot-site) .nav-actions{display:flex;flex-shrink:0;gap:8px}
:is(.site-nav,.foot-site) .nav-login-toggle{gap:6px}
:is(.site-nav,.foot-site) .nav-panel-login{pointer-events:auto}
:is(.site-nav,.foot-site) .nav-sheet-head{display:flex;align-items:center;justify-content:space-between}
:is(.site-nav,.foot-site) .nav-sheet-close{display:none}
:is(.site-nav,.foot-site) .nav-login-toggle svg{transition:transform 300ms ease}
:is(.site-nav,.foot-site) .nav-login-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (min-width:1024px){:is(.site-nav,.foot-site) .nav-panel-login{left:auto;width:320px;min-height:0;transform:none}
:is(.site-nav,.foot-site) .nav-panel-login .nav-panel-inner{display:block}
}
:is(.site-nav,.foot-site) .nav-actions .btn{transition:background-color .3s ease,color .3s ease,border-color .3s ease,filter .3s ease}
@media (hover:hover){:is(.site-nav,.foot-site) .nav-actions .btn-primary:hover{background:var(--blue900);color:#fff;box-shadow:none}
:is(.site-nav,.foot-site) .nav-actions .btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.site-nav.theme-dark:not(.is-open) .nav-actions .btn-outline:hover{filter:none;background:#fff;border-color:#fff;color:var(--ink)}
}
:is(.site-nav,.foot-site) .nav-entrar{display:none}
:is(.site-nav,.foot-site) .nav-burger{display:none;position:relative;width:40px;height:40px;margin-right:-8px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;transition:color .3s ease,filter .3s ease}
:is(.site-nav,.foot-site) .nav-burger span,:is(.site-nav,.foot-site) .nav-burger::before,:is(.site-nav,.foot-site) .nav-burger::after{content:"";position:absolute;left:10px;width:20px;height:1.5px;background:currentColor;transition:transform 400ms var(--burger-ease),opacity 400ms var(--burger-ease)}
:is(.site-nav,.foot-site) .nav-burger::before{top:11px}
:is(.site-nav,.foot-site) .nav-burger span{top:19px}
:is(.site-nav,.foot-site) .nav-burger::after{top:27px}
.site-nav.is-open .nav-burger::before{transform:translateY(8px) rotate(45deg)}
.site-nav.is-open .nav-burger span{opacity:0}
.site-nav.is-open .nav-burger::after{transform:translateY(-8px) rotate(-45deg)}
html.nav-lock{overflow:hidden}
.site-nav.theme-dark:not(.is-open) :is(.nav-logo,.nav-link,.nav-toggle,.nav-burger,.nav-actions .btn-outline){filter:brightness(0) invert(1)}
.site-nav.theme-dark:not(.is-open) :is(.nav-logo,.nav-link,.nav-toggle):hover{opacity:.72}
.site-nav.theme-dark:not(.is-open) .nav-link[aria-current]{text-decoration:underline;text-underline-offset:6px}
.site-nav.theme-dark:not(.is-open) :is(.nav-logo,.nav-link,.nav-toggle,.nav-burger,.nav-entrar,.nav-actions .btn):focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px #fff}
@media (max-width:1023px){.site-nav{--nav-h:64px}
:is(.site-nav,.foot-site) .nav-bar{gap:8px}
html:has(.site-nav){scroll-padding-top:64px}
:is(.site-nav,.foot-site) .nav-logo{width:auto}
:is(.site-nav,.foot-site) .nav-logo .logo{width:auto;height:32px}
:is(.site-nav,.foot-site) .nav-entrar{position:relative;display:inline-flex;border:0;font-family:inherit;cursor:pointer;align-items:center;height:36px;margin-left:auto;padding:0 14px;border-radius:6px;background:#000;color:#fff;font-size:15px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:opacity .2s ease,filter .3s ease}
:is(.site-nav,.foot-site) .nav-entrar::before{content:"";position:absolute;inset:-4px -2px}
:is(.site-nav,.foot-site) .nav-entrar:hover{color:#fff}
:is(.site-nav,.foot-site) .nav-entrar:active{opacity:.8}
.site-nav.is-open .nav-entrar{visibility:hidden}
.site-nav.theme-dark:not(.is-open) .nav-entrar{filter:invert(1)}
.site-nav.theme-dark:not(.is-open) .nav-bar .nav-entrar:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}
:is(.site-nav,.foot-site) .nav-burger{display:block}
.site-nav.is-open,.site-nav.is-open::before,.site-nav.is-open::after,.site-nav.is-open .nav-bar::before{transition:none}
.site-nav.is-open{background:var(--white)}
:is(.site-nav,.foot-site) .nav-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;justify-content:space-between;gap:32px;padding:8px var(--gx) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;background:var(--white);border-top:1px solid var(--n200)}
.site-nav.is-open .nav-menu{display:flex}
:is(.site-nav,.foot-site) .nav-links{flex-direction:column;align-items:stretch;gap:0;margin:0}
:is(.site-nav,.foot-site) .nav-links>li{border-bottom:1px solid var(--n200)}
:is(.site-nav,.foot-site) .nav-link,:is(.site-nav,.foot-site) .nav-toggle{justify-content:space-between;width:100%;padding:20px 0;font-size:18px}
:is(.site-nav,.foot-site) .nav-panel{position:static;display:grid;grid-template-rows:0fr;transform:none;width:auto;min-height:0;padding:0;border-radius:0;box-shadow:none;opacity:1;transition:grid-template-rows 300ms ease,visibility 0s linear 300ms}
:is(.site-nav,.foot-site) .nav-panel.is-open{grid-template-rows:1fr;transition:grid-template-rows 500ms ease,visibility 0s}
:is(.site-nav,.foot-site) .nav-panel-inner{display:block;min-height:0;overflow:hidden}
:is(.site-nav,.foot-site) .nav-items{gap:0;padding-bottom:12px}
:is(.site-nav,.foot-site) .nav-items a{gap:12px;padding:10px 0;border-radius:0}
:is(.site-nav,.foot-site) .nav-items a:hover,:is(.site-nav,.foot-site) .nav-items a[aria-current]{background:none}
:is(.site-nav,.foot-site) .nav-items a:hover strong{color:var(--blue)}
:is(.site-nav,.foot-site) .nav-items strong{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
:is(.site-nav,.foot-site) .nav-item-text>span{font-size:13px;line-height:1.4}
:is(.site-nav,.foot-site) .nav-previews{display:none}
:is(.site-nav,.foot-site) .nav-actions{flex-direction:column}
:is(.site-nav,.foot-site) .nav-group{padding:8px 0 0}
:is(.site-nav,.foot-site) .nav-login{display:flex;flex-direction:column}
:is(.site-nav,.foot-site) .nav-panel.nav-panel-login{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;width:auto;min-height:0;padding:0;border-radius:0;background:color-mix(in srgb,var(--ink) 50%,transparent);box-shadow:none;opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 0s linear 300ms}
:is(.site-nav,.foot-site) .nav-panel.nav-panel-login.is-open{opacity:1;visibility:visible;transition:opacity 300ms ease,visibility 0s}
:is(.site-nav,.foot-site) .nav-panel-login .nav-panel-inner{overflow:visible;padding:8px var(--gx) calc(16px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:var(--white);transform:translateY(100%);transition:transform 300ms ease}
:is(.site-nav,.foot-site) .nav-panel-login.is-open .nav-panel-inner{transform:none;transition:transform 400ms cubic-bezier(.2,.8,.2,1)}
:is(.site-nav,.foot-site) .nav-panel-login .nav-panel-inner::before{content:"";display:block;width:36px;height:4px;margin:0 auto 4px;border-radius:2px;background:var(--n200)}
:is(.site-nav,.foot-site) .nav-panel-login .nav-group{padding:0;font-size:14px;color:var(--ink)}
:is(.site-nav,.foot-site) .nav-sheet-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-12px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
:is(.site-nav,.foot-site) .nav-panel-login .nav-items{padding:0}
:is(.site-nav,.foot-site) .nav-actions .btn{height:48px}
}
@media (prefers-reduced-motion:reduce){:is(.site-nav,.foot-site) .nav-panel,:is(.site-nav,.foot-site) .nav-panel.is-open,:is(.site-nav,.foot-site) .nav-panel-login .nav-panel-inner,:is(.site-nav,.foot-site) .nav-preview,:is(.site-nav,.foot-site) .nav-items a,:is(.site-nav,.foot-site) .nav-toggle svg,:is(.site-nav,.foot-site) .nav-login-toggle svg,:is(.site-nav,.foot-site) .nav-burger span,:is(.site-nav,.foot-site) .nav-burger::before,:is(.site-nav,.foot-site) .nav-burger::after{transition:none}
.site-nav,.site-nav::before,.site-nav::after,:is(.site-nav,.foot-site) .nav-bar,:is(.site-nav,.foot-site) .nav-bar::before,:is(.site-nav,.foot-site) .nav-logo,:is(.site-nav,.foot-site) .nav-link,:is(.site-nav,.foot-site) .nav-toggle,:is(.site-nav,.foot-site) .nav-burger,:is(.site-nav,.foot-site) .nav-entrar,:is(.site-nav,.foot-site) .nav-actions .btn{transition:none}
}
.foot-site{padding:var(--space-4xl) 0 var(--space-xl);background:#000;color:#fff}
@media (min-width:1024px){.foot-site{--gx:40px}
}
.foot-site .wrap{display:flex;flex-direction:column;gap:var(--space-4xl)}
:is(.site-nav,.foot-site) .foot-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl);padding-bottom:49px;border-bottom:1px solid rgba(255,255,255,.09)}
:is(.site-nav,.foot-site) .foot-brand{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-2xl)}
:is(.site-nav,.foot-site) .foot-brand .logo{width:auto;height:48px}
:is(.site-nav,.foot-site) .foot-brand p{max-width:578px;font-family:var(--serif);font-size:40px;line-height:41px;letter-spacing:-.03em}
:is(.site-nav,.foot-site) .foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl)}
:is(.site-nav,.foot-site) .foot-cols div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
:is(.site-nav,.foot-site) .foot-cols strong{margin-bottom:var(--space-m);font-size:18px;font-weight:600;line-height:15px;letter-spacing:-.03em}
:is(.site-nav,.foot-site) .foot-cols a{display:block;padding:2px 0 1px;font-size:16px;line-height:30px;letter-spacing:-.04em;color:var(--foot-link);text-decoration:none;transition:color .3s ease}
:is(.site-nav,.foot-site) .foot-cols a:hover{color:#fff}
:is(.site-nav,.foot-site) .legal{display:flex;flex-direction:column;gap:var(--space-2xs);max-width:960px;font-size:14px;line-height:22px;color:var(--n400)}
:is(.site-nav,.foot-site) .legal a{color:var(--n400);transition:color .2s ease}
:is(.site-nav,.foot-site) .legal a:hover{color:#fff}
@media (max-width:1023px){:is(.site-nav,.foot-site) .foot-top{grid-template-columns:minmax(0,1fr);gap:var(--space-3xl)}
:is(.site-nav,.foot-site) .foot-brand p{font-size:32px;line-height:1.1}
}
@media (max-width:767px){.foot-site{padding:var(--space-3xl) 0 var(--space-l)}
.foot-site .wrap{gap:var(--space-2xl)}
:is(.site-nav,.foot-site) .foot-top{gap:var(--space-2xl);padding-bottom:var(--space-xl)}
:is(.site-nav,.foot-site) .foot-brand{gap:var(--space-l)}
:is(.site-nav,.foot-site) .foot-brand p{font-size:26px}
:is(.site-nav,.foot-site) .foot-cols{gap:var(--space-m)}
:is(.site-nav,.foot-site) .legal{font-size:12px;line-height:18px}
}
@media (max-width:479px){:is(.site-nav,.foot-site) .foot-brand .logo{height:32px}
:is(.site-nav,.foot-site) .foot-cols{grid-template-columns:minmax(0,1fr)}
}

/* The Webflow heroes are laid out under a fixed nav, like the old navbar (z-index of .w-nav). */
html[data-rv-page] .site-nav {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* The old "black" navbar variant had a white bar from the top. */
.site-nav[data-rv-nav="black"] {
  --nav-bg: var(--white);
}

/* Webflow's li { margin-bottom } would space out the nav lists. */
:is(.site-nav, .foot-site) li {
  margin: 0;
}

/* academy-arte-stripe-privy (https://app.clickup.com/t/86e3ebwhb) */
/* "Caminhos do Produto" carousel (rivool-academy), card "Autocustódia sem complicação".
   The art is 952x400 (2.4:1) and the mobile card is portrait (~310x420). With object-fit: cover
   only the middle ~30% of the width shows ("pe x pr") and the image is upscaled ~3x on a
   @3x screen, hence the blurry logos. Here the whole art sits at the top at card width
   (~3 px per CSS px, sharp up to @3x), its top and bottom edges faded into the art's own
   background (#520029), with the text below.
   The selector matches the asset id on the Webflow CDN: if the designer uploads new art (e.g.
   a mobile-specific version), this rule stops applying on its own. */
@media screen and (max-width: 849px) {
  html[data-rv-page="rivool-academy"] .rvl3-media:has(> .rvl3-media-img[src*="6a9c65279e715ca773271cd7"]) {
    background-color: #520029;
  }
  html[data-rv-page="rivool-academy"] .rvl3-media-img[src*="6a9c65279e715ca773271cd7"] {
    top: 14%;
    bottom: auto;
    height: auto;
    aspect-ratio: 952 / 400;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  }
}
/* Narrow tablet (768-849): the card is already landscape (~480x360), but cover still clips the
   ends of "stripe" and "privy". The whole art fits at the top, above the text. From 850px
   cover shows both logos in full and is left alone. */
@media screen and (min-width: 768px) and (max-width: 849px) {
  html[data-rv-page="rivool-academy"] .rvl3-media-img[src*="6a9c65279e715ca773271cd7"] {
    top: 0;
  }
}

/* academy-hub-photos (no task: site image review, 2026-09-25 (case 20)) */
/* The man's face sits at ~75% of the width; the centered portrait crop cut it in half. */
@media screen and (max-width: 767px) {
  html[data-rv-page="rivool-academy"] .layout422_image[src$="Rectangle-4-6.webp"] {
    object-position: 85% 50%;
  }
}

/* acordeao-scroll (https://app.clickup.com/t/86e3ebw15) */
/* Scroll accordion: the initial state (from first paint, before the JS) and the transitions.
   Pinning, track height and the active item live in acordeao-scroll.js. */

/* The block takes its content's height (.faq3_component.assessor had min-height: 85rem). */
[data-rv-acc].faq3_component {
  min-height: 0;
}

/* Rows start dimmed and light up when they are the active item. */
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]) {
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]).is-open {
  opacity: 1;
}
/* On /solucoes/escritorios the id is on the question and the answer is its sibling: light both. */
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]) + [id^="faq-a-"] {
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]).is-open + [id^="faq-a-"] {
  opacity: 1;
}

/* Accordion: only the active item's answer is open. In "lista" all stay open, unclipped
   (overflow visible, as the embed had it: the text margin doesn't add to the height). */
[data-rv-acc="acordeao"] [id^="faq-a-"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
[data-rv-acc="lista"] [id^="faq-a-"] {
  overflow: visible;
}

/* Each item's image stacked in the same frame; the active one shows. The frame must be
   positioned: below 992px Webflow leaves the wrapper static and the image covered the section. */
[data-rv-acc] .layout493_image-wrapper.video {
  position: relative;
}
[data-rv-acc] [id^="faq-i-"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
[data-rv-acc] [id^="faq-i-"].is-open {
  opacity: 1;
  z-index: 1;
}

/* The item's image inside it, right below the open text (a copy the JS puts in the answer).
   Single column only; the JS sets the height (--rv-acc-imagem-h) so the pinned block fits. */
[data-rv-acc] .rv-acc-imagem {
  display: none;
}
@media screen and (max-width: 991px) {
  [data-rv-acc] .layout493_image-wrapper:has([id^="faq-i-"]),
  [data-rv-acc-imagem="unica"] .layout493_image-wrapper {
    display: none;
  }
  [data-rv-acc] .rv-acc-imagem {
    display: block;
    height: var(--rv-acc-imagem-h, 45vh);
    margin-bottom: 20px;
    overflow: hidden;
  }
  [data-rv-acc] .rv-acc-imagem img,
  [data-rv-acc] .rv-acc-imagem video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* .faq3_answer has opacity .6 (the text grey): move it to the text so the image stays solid. */
  [data-rv-acc] .faq3_answer:has(> .rv-acc-imagem) {
    opacity: 1;
  }
  [data-rv-acc] .faq3_answer:has(> .rv-acc-imagem) > :not(.rv-acc-imagem) {
    opacity: 0.6;
  }
  /* Rivool Academy: the column has min-height 85vh and space-between, which opened a gap between
     the title and item 1 once the image moves below the list. */
  [data-rv-acc] .hover_content._100 {
    min-height: 0;
  }
  [data-rv-acc] .faq3_list._100 {
    justify-content: flex-start;
  }
  /* Assessor: the grid has min-height 85vh (the desktop mockup column's height); with the
     mockup inside the item, that left a big empty space under the list. */
  [data-rv-acc] .grid.assessor {
    min-height: 0;
  }
}

/* Screen mockups (/solucoes/assessor): the image shows in full. On desktop the frame was 85vh
   tall and the (nearly square) image was clipped at the sides by object-fit: cover; now the
   frame takes the image's ratio (--rv-acc-proporcao, from the JS), capped to fit below the
   header (72px + 48px gap + 16px). contain ensures nothing is clipped. */
[data-rv-acc-encaixe="inteira"] [id^="faq-i-"],
[data-rv-acc-encaixe="inteira"] .rv-acc-imagem img {
  object-fit: contain;
}
@media screen and (min-width: 992px) {
  [data-rv-acc-encaixe="inteira"] .w-layout-grid {
    min-height: 0;
  }
  [data-rv-acc-encaixe="inteira"] .layout493_image-wrapper {
    height: auto;
    align-self: start;
  }
  [data-rv-acc-encaixe="inteira"] .layout493_image-wrapper.video {
    aspect-ratio: var(--rv-acc-proporcao, 1);
    max-height: calc(100vh - 136px);
  }
}

@media screen and (max-width: 767px) {
  [data-rv-acc-mobile="toque"] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]) {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-rv-acc] [id^="faq-"] {
    transition: none !important;
  }
}

/* background-videos (no task: site image review, 2026-09-25 (case 26)) */
.rv-video-poster,
.rv-video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rv-video-poster img {
  object-fit: cover;
  object-position: 50% 50%;
}

/* Same layer as Webflow's video (z-index -100); it comes first in the HTML, so it sits underneath. */
.w-background-video > .rv-video-poster {
  z-index: -100;
}

@media (prefers-reduced-motion: reduce) {
  [data-rv-video="hero"] video {
    display: none;
  }
}

/* Hidden behind the video, but it was still downloaded and became the mobile LCP. */
html[data-rv-page="rivool-academy"] .header-wrapper.academy {
  background-image: none;
}

/* Scrim between the video and the hero text: the lamps, sky and water of the bridge sit behind the
   white text. Tuned per page and width on the brightest frames of the loop, as light as it can be
   while the text keeps 4.5:1 (3:1 for the title). Many stops so the ramp has no visible bands. */
html[data-rv-page="sobre-nos"] [data-rv-video="hero"]::after,
html[data-rv-page="rivool-academy"] [data-rv-video="hero"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -99;
  pointer-events: none;
}

html[data-rv-page="sobre-nos"] [data-rv-video="hero"]::after {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.033) 58.3%,
    rgba(0, 0, 0, 0.114) 61.7%,
    rgba(0, 0, 0, 0.22) 65%,
    rgba(0, 0, 0, 0.326) 68.3%,
    rgba(0, 0, 0, 0.407) 71.7%,
    rgba(0, 0, 0, 0.44) 75%
  );
}

html[data-rv-page="rivool-academy"] [data-rv-video="hero"]::after {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.041) 53%,
    rgba(0, 0, 0, 0.145) 56%,
    rgba(0, 0, 0, 0.28) 59%,
    rgba(0, 0, 0, 0.415) 62%,
    rgba(0, 0, 0, 0.519) 65%,
    rgba(0, 0, 0, 0.56) 68%
  );
}

@media screen and (max-width: 991px) {
  html[data-rv-page="sobre-nos"] [data-rv-video="hero"]::after {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.03) 53.3%,
      rgba(0, 0, 0, 0.104) 56.7%,
      rgba(0, 0, 0, 0.2) 60%,
      rgba(0, 0, 0, 0.296) 63.3%,
      rgba(0, 0, 0, 0.37) 66.7%,
      rgba(0, 0, 0, 0.4) 70%
    );
  }
  html[data-rv-page="rivool-academy"] [data-rv-video="hero"]::after {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.041) 45%,
      rgba(0, 0, 0, 0.145) 50%,
      rgba(0, 0, 0, 0.28) 55%,
      rgba(0, 0, 0, 0.415) 60%,
      rgba(0, 0, 0, 0.519) 65%,
      rgba(0, 0, 0, 0.56) 70%
    );
  }
}

@media screen and (max-width: 767px) {
  html[data-rv-page="sobre-nos"] [data-rv-video="hero"]::after {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0.039) 34.2%,
      rgba(0, 0, 0, 0.137) 38.3%,
      rgba(0, 0, 0, 0.265) 42.5%,
      rgba(0, 0, 0, 0.393) 46.7%,
      rgba(0, 0, 0, 0.491) 50.8%,
      rgba(0, 0, 0, 0.53) 55%
    );
  }
  html[data-rv-page="rivool-academy"] [data-rv-video="hero"]::after {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 25%,
      rgba(0, 0, 0, 0.042) 28.3%,
      rgba(0, 0, 0, 0.148) 31.7%,
      rgba(0, 0, 0, 0.285) 35%,
      rgba(0, 0, 0, 0.422) 38.3%,
      rgba(0, 0, 0, 0.528) 41.7%,
      rgba(0, 0, 0, 0.57) 45%
    );
  }
}

/* Webflow shrinks these heroes to 70vh (tablet) and 65vh (phone), which leaves the next section
   showing under the fold on tall phones. The nav is fixed over the video, so the hero fills the
   screen; svh keeps it from jumping when the browser bar shows or hides. Min-height, so short
   screens can still grow to fit the text. */
@media screen and (max-width: 991px) {
  html[data-rv-page="index"] .section_header.home,
  html[data-rv-page="sobre-nos"] .header-wrapper > .section_header,
  html[data-rv-page="rivool-academy"] .header-wrapper > .section_header {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* carrossel-sem-flash (https://app.clickup.com/t/86e3ebwar) */
/* Photo card carousels (rvl-, rvl3-). On mobile only the active card shows, so its
   colour (blue/burgundy, same as the closed cards on desktop) only shows behind the photo
   while it loads or decodes. There it becomes a neutral dark tone, close to the photos, and
   the photo fades in briefly instead of popping. On desktop the closed cards keep the
   carousel colour. */
@media screen and (max-width: 767px) {
  .rvl-card.is-active,
  .rvl3-card.is-active {
    background-color: #231f1c;
  }
}
@media screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .rvl-card.is-active .rvl-media,
  .rvl3-card.is-active .rvl3-media {
    animation: rv-carrossel-foto-entra 0.35s ease-out both;
  }
}
@keyframes rv-carrossel-foto-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* cartao-calculadora-compacta (https://app.clickup.com/t/86e3etf7k) */
/* The embed ships its own <style> inside <body>, which loads after this file, so every
   selector is prefixed with the page + .code-embed-3 to win on specificity. */

/* #6c6f75 is the landing grey (#9da2aa) darkened in the same hue: 5.0:1 on white and
   4.5:1 on the savings tint. */
html[data-rv-page="produtos/cartao-global"] .code-embed-3 {
  --rv-ink: #18171c;
  --rv-grey: #6c6f75;
  --rv-border: #e2e2e2;
  --rv-blue: hsl(var(--color-brand-500));
  --rv-blue-tint: #f3f2fe;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .pagina {
  padding: 0;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .widget {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  padding: 24px;
  border-radius: 8px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .titulo,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-quantia,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .rodape {
  grid-column: 1 / -1;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .titulo {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-quantia {
  justify-content: flex-start;
  gap: 12px;
  margin: 4px 0 12px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia {
  flex: 0 1 280px;
  min-width: 220px;
  padding: 10px 16px;
  border-radius: 4px;
  transition: border-color 160ms ease;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia:focus-within {
  border-color: var(--rv-blue);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia .prefixo {
  font-size: 1rem;
  color: var(--rv-grey);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia input {
  font-size: 1.15rem;
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalhos {
  gap: 8px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: .95rem;
  font-weight: 400;
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho:not(.ativo):hover {
  border-color: var(--rv-ink);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho.ativo {
  color: #fff;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .divisor {
  display: none;
}

/* Releases the two cost cards into the widget grid, next to the savings card. */
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-comparativo {
  display: contents;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-comparativo {
  margin: 0;
  padding: 16px 20px 18px;
  border-radius: 4px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia {
  background: var(--rv-blue-tint);
  border-color: var(--rv-blue-tint);
}

/* One label wraps to two lines; reserving two lines keeps the numbers aligned. */
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .rot {
  display: block;
  min-height: 2.8em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-grande,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-medio {
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-grande {
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 700;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-medio {
  font-size: clamp(1.35rem, 2vw, 1.625rem);
  font-weight: 600;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .desc {
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--rv-grey);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .rodape {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rv-border);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--rv-grey);
}

@media (max-width: 900px) {
  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .widget {
    grid-template-columns: 1fr 1fr;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia {
    grid-column: 1 / -1;
  }

    html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia .rot {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .widget {
    gap: 8px;
    padding: 16px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-quantia {
    gap: 8px;
    margin-bottom: 8px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia {
    flex: none;
    min-width: 0;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalhos {
    flex-wrap: nowrap;
    gap: 6px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho {
    flex: 1 1 0;
    padding: 8px 0;
    text-align: center;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia,
  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-comparativo {
    padding: 14px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-grande {
    font-size: 2rem;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-medio {
    font-size: 1.3rem;
  }
}

/* cartao-cards-resolucao (https://app.clickup.com/t/86e3ebw7h) */
/* On mobile Webflow gives the card text 1.5rem side padding, but the photo spans the full
   width: the title ("Fim do IOF...") is indented relative to the image. On desktop the text
   is already aligned with the photo (top padding only). */
@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/cartao-global"] .sobre_card-content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* cartao-cta-calculadora (https://app.clickup.com/t/86e3ebw26) */
/* "Simular economia no cartão" CTA in the "O dinheiro rende até a hora de gastar" card (Cartão Global).
   Colour from the export's .link class; the arrow has the same shape as images/Vector-21.svg (the home
   page arrows), in currentColor so it follows the link colour. */
html[data-rv-page="produtos/cartao-global"] .rv-link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: Figtree, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

html[data-rv-page="produtos/cartao-global"] .rv-link-seta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-rv-page="produtos/cartao-global"] .rv-link-seta-icone {
  flex: none;
  transition: transform 0.2s ease;
}

html[data-rv-page="produtos/cartao-global"] .rv-link-seta:hover .rv-link-seta-icone {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  html[data-rv-page="produtos/cartao-global"] .rv-link-seta-icone {
    transition: none;
  }
}

/* cartao-hero-mobile (no task: site image review, 2026-09-25 (case 02)) */
@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/cartao-global"] .header-wrapper.cartao-global {
    background-position: 67% 50%;
  }
}

/* fonts-self-hosted (https://github.com/Rivool-Finance/rivool-site/issues/198) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_kit/fonts/figtree-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hedvig Letters Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_kit/fonts/hedvig-letters-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hedvig Letters Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_kit/fonts/hedvig-letters-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* footer-seam-and-overscroll (no task: site image review, 2026-09-25 (case 01, footer seam and overscroll)) */
/* Black under the seam row: extends the footer a few px up, behind the photo (z-index 1). */
.section_image + .footer .foot-site {
  box-shadow: 0 -4px 0 #000;
}

/* Body keeps the page white once <html> has its own background. */
body {
  background-color: #fff;
}
html.rv-past-middle {
  background-color: #000;
}

/* hero-3d (no task: Lit's Spline heroes, pilot on renda-em-dolares, 2026-10-07) */
/* /produtos/conta-global-pagamentos: the cluster of glass slabs floats above the copy, which sits at
   the bottom of the hero (headline left, lede right), as in the static render it replaces. The stage
   is square (its height --s, in % of the hero's height; the width follows): the slabs fill 0.165-0.79 of its height (frame 0 from 0.25) and 0.07-0.99 of its
   width. It is sized so they fill the screen between the nav and the copy, and anchored so their
   bottom stays just above the eyebrow. The poster is rows 15-85% of the stage, captured in a 1440 box. */
html[data-rv-page="produtos/conta-global-pagamentos"] .main-wrapper > .header-wrapper.conta-global {
  container-type: inline-size;
  overflow: hidden;
  background-image: none;
}

html[data-rv-page="produtos/conta-global-pagamentos"] .main-wrapper > .header-wrapper.conta-global:first-child > .section_header {
  justify-content: flex-end;
}

html[data-rv-page="produtos/conta-global-pagamentos"] .rv-hero3d-stage {
  --s: min(calc((100% - 400px) / 0.5), 100cqw);
  left: 50%;
  bottom: calc(100% - 110px - 0.75 * var(--s));
  height: var(--s);
  aspect-ratio: 1;
  transform: translateX(-52.7%);
}

html[data-rv-page="produtos/conta-global-pagamentos"] .rv-hero3d-poster {
  top: 15%;
}

/* Phones: the copy is stacked at the bottom and the slabs fill the band above it, 1.6x the width
   (cropped at the sides), shorter where the screen is short. */
@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/conta-global-pagamentos"] .rv-hero3d-stage {
    --s: min(calc((100% - 475px) / 0.54), 160cqw);
    bottom: calc(365px - 0.21 * var(--s));
  }
}

/* /produtos/renda-em-dolares: the arc of glass slabs rises from the bottom of the hero, under the
   centred copy, as in the static render it replaces. The hero is as tall as its copy plus a band
   for the arc (the stage hangs below it, cropped). The stage is square at every width, so the
   one poster (its top 55%, captured in a 1440 box) lines up with the canvas. */
html[data-rv-page="produtos/renda-em-dolares"] .header-wrapper.renda-dolares {
  container-type: inline-size;
  overflow: hidden;
  background-image: none;
  padding-bottom: calc(24% - 3rem);
}

html[data-rv-page="produtos/renda-em-dolares"] .section_header.dolares {
  min-height: 0;
}

html[data-rv-page="produtos/renda-em-dolares"] .rv-hero3d-stage {
  left: 0;
  width: 100cqw;
  height: 100cqw;
  bottom: -54cqw;
}

/* Phones: a taller band and the arc at 1.8x, so the slabs read at this size. The copy stays
   first and the arc starts under the lede. */
@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/renda-em-dolares"] .header-wrapper.renda-dolares {
    padding-bottom: 46%;
  }

  html[data-rv-page="produtos/renda-em-dolares"] .rv-hero3d-stage {
    left: -40cqw;
    width: 180cqw;
    height: 180cqw;
    bottom: -89cqw;
  }
}

/* /produtos/renda-em-reais: the ring of glass slabs fills the right and the bottom of the hero,
   rising from under the button to the headline's right, as in the static render it replaces. The
   stage is 3:2 at every width, so the one poster (frame 0 in a 1440x960 box) lines up with the
   canvas. On desktop the ring keeps a fixed distance from the copy column (43rem lede), so it
   never runs into the text. The .main-wrapper > outranks hero-art-webp's background. */
html[data-rv-page="produtos/renda-em-reais"] .main-wrapper > .header-wrapper.renda-reais {
  container-type: inline-size;
  overflow: hidden;
  background-image: none;
}

html[data-rv-page="produtos/renda-em-reais"] .rv-hero3d-stage {
  left: calc(46rem - 44cqw);
  top: calc(50% - 37cqw);
  width: 120cqw;
  height: 80cqw;
}

/* Tablets and phones: the copy takes the full width, so the ring is a band under it. */
@media screen and (max-width: 991px) {
  html[data-rv-page="produtos/renda-em-reais"] .main-wrapper > .header-wrapper.renda-reais {
    padding-bottom: 40cqw;
  }

  html[data-rv-page="produtos/renda-em-reais"] .rv-hero3d-stage {
    left: -43cqw;
    top: auto;
    bottom: -33cqw;
    width: 180cqw;
    height: 120cqw;
  }
}

@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/renda-em-reais"] .main-wrapper > .header-wrapper.renda-reais {
    padding-bottom: 55cqw;
  }

  html[data-rv-page="produtos/renda-em-reais"] .rv-hero3d-stage {
    left: -69cqw;
    bottom: -25cqw;
    width: 225cqw;
    height: 150cqw;
  }
}

/* /solucoes/assessor: a ring of pink glass discs, standing on its edge. The camera sizes the scene by
   the stage height (--h) and centres it; the ring sits right of centre, from 0.1h to 0.6h. The
   poster is only the ring's strip (0.08h to 0.62h of the scene, captured at 3200 tall), placed in
   scene units, so it lines up with the canvas in any stage width (--k = width / height). */
/* header.: outranks the page's hero-art-webp rule, so the old render isn't fetched. */
html[data-rv-page="solucoes/assessor"] header.header-wrapper.assessor {
  container-type: inline-size;
  overflow: hidden;
  background-image: none;
}

/* Desktop: as the static render did, the ring's left side is a column of large discs right of the
   copy, from 69% of the width, centred on the hero; the rest of the ring is off-screen. */
html[data-rv-page="solucoes/assessor"] .rv-hero3d-stage {
  --h: 116.7cqw;
  --k: 0.8;
  overflow: hidden;
  top: 50%;
  left: calc(68.75cqw - (var(--k) / 2 + 0.099) * var(--h));
  width: calc(var(--k) * var(--h));
  height: var(--h);
  margin-top: calc(var(--h) / -2);
}

html[data-rv-page="solucoes/assessor"] .rv-hero3d-poster {
  left: calc((var(--k) / 2 + 0.08) / var(--k) * 100%);
  width: calc(0.54 / var(--k) * 100%);
}

/* Phones: the whole ring, centred, as tall as the screen, behind the copy. Its middle discs stand
   edge-on and thin; a light veil over the copy band keeps the lede at AA when a disc turns behind it.
   The big discs fill the space under the nav and under the buttons. */
@media screen and (max-width: 767px) {
  html[data-rv-page="solucoes/assessor"] .rv-hero3d-stage {
    --h: 100svh;
    --k: 1.24;
    left: calc(50cqw - (var(--k) / 2 + 0.348) * var(--h));
  }

  html[data-rv-page="solucoes/assessor"] .rv-hero3d::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 12%,
      color-mix(in srgb, #fff 25%, transparent) 24%,
      color-mix(in srgb, #fff 25%, transparent) 68%,
      transparent 80%
    );
  }
}

/* /solucoes/escritorios: the ring of glass slabs fills the right and the bottom of the hero, rising
   from under the buttons to the headline's right, as in the static render it replaces. The stage
   is 3:2 at every width, so the one poster (frame 0 in a 1440x960 box) lines up with the canvas.
   The .main-wrapper > outranks hero-art-webp's background. */
html[data-rv-page="solucoes/escritorios"] .main-wrapper > .header-wrapper.escritorios {
  container-type: inline-size;
  overflow: hidden;
  background-image: none;
}

html[data-rv-page="solucoes/escritorios"] .rv-hero3d-stage {
  left: calc(49rem - 44cqw);
  top: calc(50% - 35cqw);
  width: 120cqw;
  height: 80cqw;
}

/* Tablets and phones: the copy sits at the top and the ring fills the rest of the screen under the
   buttons. The ring's top is 0.276 of the stage height down (frame 0) and its visible part 0.724, so
   the stage is sized to fill the band from --top to the bottom of the screen (at least --min, hanging
   below the hero on short screens) and centred on the ring. */
@media screen and (max-width: 991px) {
  html[data-rv-page="solucoes/escritorios"] .main-wrapper > .header-wrapper.escritorios {
    padding-bottom: 30cqw;
  }

  html[data-rv-page="solucoes/escritorios"] .main-wrapper > .header-wrapper.escritorios > header.section_header {
    min-height: 0;
    justify-content: flex-start;
  }

  html[data-rv-page="solucoes/escritorios"] .rv-hero3d-stage {
    --top: 31rem;
    --h: max(var(--min), calc((100svh - var(--top)) / 0.724));
    --min: 100cqw;
    top: calc(var(--top) - 0.276 * var(--h));
    left: calc(52cqw - 0.875 * var(--h));
    width: calc(1.5 * var(--h));
    height: var(--h);
  }
}

@media screen and (max-width: 767px) {
  html[data-rv-page="solucoes/escritorios"] .rv-hero3d-stage {
    --top: 34rem;
    --min: 110cqw;
  }
}
/* Spline heroes (hero-3d.mjs): the poster is the LCP; the canvas fades in over it on .is-live and
   out again if the scene stops. Both sit in .rv-hero3d-stage, the box the scene renders into: the
   camera sizes the scene by the canvas height and centres it, so a stage of a fixed aspect ratio
   frames it the same at every width. Decorative, behind the hero text, no pointer input. */
.rv-hero3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.rv-hero3d-stage {
  position: absolute;
}

.rv-hero3d-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
}

.rv-hero3d canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

.rv-hero3d.is-live canvas {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rv-hero3d canvas {
    transition-duration: 1ms;
  }
}

/* hero-art-webp (no task: site image review, 2026-09-25 (cases 17 and 25)) */
html[data-rv-page="solucoes/consultor"] .header-wrapper.consultor {
  background-image: url("/rivool-fixes/hero-consultor.webp");
}
/* investidores-hero-mobile's ::after inherits this. */
html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores {
  background-image: url("/rivool-fixes/hero-investidores.webp");
}

/* hero-fill (no task: Julia, one hero height for the whole site, 2026-10-08) */
/* The hero (the .header-wrapper that opens <main> on the product and solution pages) is at least one
   screen tall, at every width. Webflow shrinks it to 65-70vh on phones and some fixes let it fit its
   copy (investidores, rwa, hero-3d), which left the next section showing above the fold. svh keeps it
   from jumping with the browser bar; min-height, so a long copy still grows. The copy is centred in
   the space left above any art band the page reserves with padding-bottom. The home, sobre-nos and
   academy heroes (video) already fill the screen in background-videos.css. */
html[data-rv-page] .main-wrapper > .header-wrapper:first-child {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

html[data-rv-page] .main-wrapper > .header-wrapper:first-child > .section_header {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
}

/* Cartão: on phones the photo grows with the hero, so the copy sits at the bottom, under the card,
   instead of over the card's logo. */
@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/cartao-global"] .main-wrapper > .header-wrapper:first-child > .section_header {
    justify-content: flex-end;
  }
}

/* home-hero-escurecer (https://app.clickup.com/t/86e3ebvy3) */
/* The bridge video in the home hero gives little contrast with the title, subtitle and buttons. The
   video embed already has an empty, unstyled .content-overlay: it becomes a dark gradient only at the
   bottom, where the text is, and the rest of the video stays bright. It sits between the video and the
   header (z-index 11), and pointer-events: none keeps it from catching button clicks.
   The strength is the lowest that still gives the text 4.5:1 (3:1 for the title) on the loop's
   brightest frames, measured per width (phone, tablet, desktop). Many stops so the gradient doesn't band. */
html[data-rv-page="index"] .video-background .content-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.016) 64.2%,
    rgba(0, 0, 0, 0.057) 68.3%,
    rgba(0, 0, 0, 0.11) 72.5%,
    rgba(0, 0, 0, 0.163) 76.7%,
    rgba(0, 0, 0, 0.204) 80.8%,
    rgba(0, 0, 0, 0.22) 85%
  );
}

@media screen and (max-width: 991px) {
  html[data-rv-page="index"] .video-background .content-overlay {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.027) 53.3%,
      rgba(0, 0, 0, 0.093) 56.7%,
      rgba(0, 0, 0, 0.18) 60%,
      rgba(0, 0, 0, 0.267) 63.3%,
      rgba(0, 0, 0, 0.333) 66.7%,
      rgba(0, 0, 0, 0.36) 70%
    );
  }
}

/* On phones the text starts higher: the gradient starts earlier. */
@media screen and (max-width: 767px) {
  html[data-rv-page="index"] .video-background .content-overlay {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0.04) 35%,
      rgba(0, 0, 0, 0.14) 40%,
      rgba(0, 0, 0, 0.27) 45%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.5) 55%,
      rgba(0, 0, 0, 0.54) 60%
    );
  }
}

/* While the video loads (or if it fails) the hero background is the body white and the white text vanishes.
   A dark tone close to the darkened video's average keeps the text readable from the first frame. */
html[data-rv-page="index"] .video-background {
  background-color: #3b2c2b;
}

/* investidores-bloco-cliente (https://app.clickup.com/t/86e3ebwdg) */
/* Investidores: purple block (#cta) rewritten for the investor, without the office dashboard cards
   (investidores-bloco-cliente.mjs). On desktop the text keeps the background stripes to its right. */
@media screen and (max-width: 991px) {
  /* The card's min-height: 80vh only existed to fit the stacked cards; without them half a screen of purple was empty. */
  html[data-rv-page="solucoes/investidores"] #cta .cta_card {
    min-height: 0;
  }

  /* Stacked buttons share a width: the shorter label ("Abrir Conta") sat flush left. */
  html[data-rv-page="solucoes/investidores"] #cta .buttons-wrapper a {
    text-align: center;
  }
}

/* investidores-hero-mobile (https://app.clickup.com/t/86e3ebwbm) */
/* /solucoes/investidores hero. The 3D image is the .header-wrapper background (100% 50%, contain).
   On desktop it sits right of the text; from tablet down the text spans the full width and the
   image sits under the title, subtitle and buttons, with the PNG's straight edges (top and bottom)
   floating mid-hero. Here it moves to its own band below the buttons, anchored to the right edge
   and the hero's bottom (its base becomes the section edge, as on desktop), with the top faded
   into the background colour. The hero height follows the text, so it doesn't depend on the subtitle. */
@media screen and (max-width: 991px) {
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores {
    --rv-inv-img-h: min(60vw, 24rem);
    padding-bottom: var(--rv-inv-img-h);
    /* ::after inherits the designer's image (background-image: inherit), without repeating the file
       here; the wrapper no longer paints it. */
    background-size: 0 0;
  }

  html[data-rv-page="solucoes/investidores"] .section_header.investidores.left {
    min-height: 0;
  }

  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::after,
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rv-inv-img-h);
    pointer-events: none;
  }

  /* 70% of the width, on the right, showing the top of the image: the PNG's left edge (which cuts
     the lower pieces) stays outside the band, and the right edge runs off the screen. */
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::after {
    z-index: 0;
    background-image: inherit;
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 70% auto;
  }

  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::before {
    z-index: 1;
    background-image: linear-gradient(to bottom, #fafafa, rgba(250, 250, 250, 0) 30%);
  }
}

/* Portrait phone: the image spans the full width. */
@media screen and (max-width: 479px) {
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores {
    --rv-inv-img-h: min(90vw, 24rem);
  }

  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::after {
    background-size: cover;
  }
}

/* solucoes-cards-video (https://app.clickup.com/t/86e3ebwfd) */
/* Only videos with a poster (data-src): when stopped, the <video> hides and the poster beneath shows. */
html[data-rv-page^="solucoes/"] .rivool-tab-video[data-src] {
  object-position: var(--rv-cards-x, 50%) 50%;
  transition: opacity 0.2s ease;
}
html[data-rv-page^="solucoes/"] .rivool-tab-video.rv-cards-oculto {
  opacity: 0;
}
/* Phone: the open card (~350x420) crops the 1800x800 video at the centre and cuts the 3D,
   which sits to the right (centre at x≈1266). 75% brings the 3D into frame (390 px: ~59% of
   the objects, was ~46%). Only up to 760 px, where the layout becomes a column: on tablet and
   desktop the designer's crop stays, because 75% there pushes the 3D under the closed bands'
   titles and the text column. Applies to the video and the poster (background-position). */
@media (max-width: 760px) {
  html[data-rv-page^="solucoes/"] .rivool-tabs {
    --rv-cards-x: 75%;
  }
}
/* Same selector as the transition above: with lower specificity, that one would win. */
@media (prefers-reduced-motion: reduce) {
  html[data-rv-page^="solucoes/"] .rivool-tab-video[data-src] {
    transition: none;
  }
}

/* solutions-cta-brand (no task: site image review, 2026-09-25 (case 18)) */
/* Flat brand blue, no gradient, stripes from the brand's geo-12 at card height. Overrides the
   export's rules at every breakpoint. */
html[data-rv-page^="solucoes/"] .cta_card {
  background-color: hsl(var(--color-brand-500));
  background-image: url("/rivool-fixes/cta-geo-12.svg");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

/* Stacked on mobile, so the stripes would sit behind the text and cards. */
@media screen and (max-width: 767px) {
  html[data-rv-page^="solucoes/"] .cta_card {
    background-image: none;
  }
}

/* On flat blue the blue button disappears and the outline button's hover fills with the same
   blue: make the filled button white, and invert both on hover. */
html[data-rv-page^="solucoes/"] .cta_card .button-blue {
  background-color: #fff;
  color: hsl(var(--color-brand-500));
}

html[data-rv-page^="solucoes/"] .cta_card .button-blue:hover {
  background-color: hsl(var(--color-brand-500));
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

html[data-rv-page^="solucoes/"] .cta_card .button-white:hover {
  border-color: #fff;
  background-color: #fff;
  color: hsl(var(--color-brand-500));
}

/* update-calculator-art (no task: site image review, 2026-09-25 (case 19)) */
/* Below 992px the full-height art ran under the card text. Stack it: art on top, text below. */
@media screen and (max-width: 991px) {
  html[data-rv-page="produtos/calculadoras"] .calc-card-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  html[data-rv-page="produtos/calculadoras"] .calc-img {
    position: static;
    align-self: flex-end;
    width: auto;
    height: 12rem;
  }

  html[data-rv-page="produtos/calculadoras"] .calc_card-overlay {
    position: static;
    background-image: none;
    padding-top: 1.5rem;
  }
}

/* Without hover the card stayed at its .5 resting opacity: white text on pale lilac. */
@media (hover: none) {
  html[data-rv-page="produtos/calculadoras"] .calc-card-wrapper {
    opacity: 1;
  }
}

/* update-cta-photos (no task: site image review, 2026-09-25 (cases 14, 15 and 25)) */
/* Keeps the <img> positioned by Webflow's CSS as if the <picture> weren't there. */
picture.rv-cta-photo {
  display: contents;
}

/* update-exchange-calculator (https://github.com/Rivool-Finance/rivool-site/issues/66) */
/* The embed ships its own <style> inside <body>, which loads after this file, so every
   selector is prefixed with the page + #cambio to win on specificity. Tokens and contrast
   follow cartao-calculadora-compacta.css. */

html[data-rv-page="produtos/renda-em-dolares"] #cambio .flex-block-16 {
  --rv-ink: #18171c;
  --rv-grey: #6c6f75;
  --rv-border: #e2e2e2;
  --rv-blue: hsl(var(--color-brand-500));
  --rv-blue-tint: #f3f2fe;
  width: 100%;
  max-width: 640px;
  padding: 0;
  background: transparent;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "title title title"
    "note note note"
    "rate rate rate"
    "date date date"
    "lab-de . lab-para"
    "box-de swap box-para"
    "cta cta cta";
  column-gap: 12px;
  max-width: none;
  margin: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--rv-border);
  border-radius: 8px;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .titulo {
  grid-area: title;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .rv-exc-nota {
  grid-area: note;
  margin: 4px 0 16px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--rv-grey);
}

/* Rate and quote time read as one tinted strip. */
html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .subtitulo,
html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .rv-cambio-data {
  margin: 0;
  background: var(--rv-blue-tint);
  text-align: left;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .subtitulo {
  grid-area: rate;
  padding: 10px 14px 0;
  border-radius: 4px 4px 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--rv-grey);
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .subtitulo strong {
  font-weight: 600;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .rv-cambio-data {
  grid-area: date;
  min-height: 0;
  padding: 2px 14px 10px;
  border-radius: 0 0 4px 4px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--rv-grey);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .campo-label {
  margin: 20px 0 6px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--rv-grey);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed #label-de {
  grid-area: lab-de;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .linha-trocar + .campo-label {
  grid-area: lab-para;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed #label-de + .caixa-moeda {
  grid-area: box-de;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .linha-trocar + .campo-label + .caixa-moeda {
  grid-area: box-para;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .caixa-moeda {
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--rv-border);
  border-radius: 4px;
  transition: border-color 160ms ease;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .caixa-moeda:focus-within {
  border-color: var(--rv-blue);
}

/* The field takes what is left next to the currency picker; cambio-numeros-mobile.js
   shrinks the font when a long number would not fit. */
html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .caixa-moeda input {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .chip-moeda {
  gap: 4px;
  font-size: 1rem;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .chip-moeda .bandeira {
  font-size: 1.15rem;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .chip-moeda .seta {
  color: var(--rv-grey);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .linha-trocar {
  grid-area: swap;
  align-self: center;
  margin: 0;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .btn-trocar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--rv-border);
  border-radius: 4px;
  background: #fff;
  color: var(--rv-ink);
  transition: border-color 160ms ease, transform 160ms ease;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .btn-trocar:hover {
  border-color: var(--rv-ink);
  background: #fff;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .btn-trocar path {
  stroke: currentColor;
}

/* Side by side, the vertical swap arrows point left and right. */
html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .btn-trocar svg {
  transform: rotate(90deg);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .acoes {
  grid-area: cta;
  flex-direction: row;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rv-border);
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed a.btn-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed a.btn-primario:focus-visible,
html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .btn-trocar:focus-visible {
  outline: 2px solid var(--rv-blue);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "note"
      "rate"
      "date"
      "lab-de"
      "box-de"
      "swap"
      "lab-para"
      "box-para"
      "cta";
    padding: 16px;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .linha-trocar {
    justify-self: center;
    margin-top: 12px;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .btn-trocar svg {
    transform: none;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed #label-de {
    margin-top: 16px;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .linha-trocar + .campo-label {
    margin-top: 0;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .caixa-moeda input {
    font-size: 1.25rem;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .acoes {
    margin-top: 16px;
    padding-top: 16px;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed a.btn-primario {
    width: 100%;
  }
}

/* update-footer-cta-photo (no task: site image review, 2026-09-25 (case 01)) */
/* The SVG has the photo's 2160x900 canvas with the symbol at the exact spot it was baked in, so the
   same centered cover keeps it aligned at every width. */
.section_image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/rivool-fixes/footer-cta-symbol.svg") center / cover no-repeat;
  pointer-events: none;
}

/* update-glass-buttons (Figma 9548:5721 (Tela Inicial, Fazer login)) */
/* Liquid Glass from the app (Figma 9548:5721): 5% black fill, frost 4, light edge at -45°, no stroke.
   Refraction and dispersion have no cross-browser CSS equivalent; saturate stands in for them. */
html[data-rv-page] {
  --rv-glass-fill: rgba(0, 0, 0, 0.05);
  --rv-glass-fill-fallback: rgba(0, 0, 0, 0.28);
  --rv-glass-filter: blur(4px) saturate(1.2);
  --rv-glass-edge: inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset -1px -1px 0 rgba(255, 255, 255, 0.12);
  --rv-glass-text: #ecebff;
}

html[data-rv-page="index"] .section_header.home .button-white,
html[data-rv-page="index"] .header82_component .button-white,
html[data-rv-page="rivool-academy"] .layout422_card .button-white,
html[data-rv-page] .iof_card .button-white,
html[data-rv-page="index"] .rvl-badge,
html[data-rv-page^="solucoes/"] .rivool-tab-numero {
  border-color: transparent;
  background-color: var(--rv-glass-fill);
  -webkit-backdrop-filter: var(--rv-glass-filter);
  backdrop-filter: var(--rv-glass-filter);
  box-shadow: var(--rv-glass-edge);
  color: var(--rv-glass-text);
}

html[data-rv-page="index"] .rvl-badge,
html[data-rv-page^="solucoes/"] .rivool-tab-numero {
  --rv-glass-edge: inset 1px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 0 rgba(255, 255, 255, 0.22);
  border-radius: 4px;
}

html[data-rv-page="index"] .section_header.home .button-white:hover,
html[data-rv-page="index"] .header82_component .button-white:hover,
html[data-rv-page="rivool-academy"] .layout422_card .button-white:hover,
html[data-rv-page] .iof_card .button-white:hover {
  background-color: var(--main-purple);
  box-shadow: none;
  color: #fff;
}

html[data-rv-page="index"] .section_header.home .button-white:focus-visible,
html[data-rv-page="index"] .header82_component .button-white:focus-visible,
html[data-rv-page="rivool-academy"] .layout422_card .button-white:focus-visible,
html[data-rv-page] .iof_card .button-white:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-rv-page] {
    --rv-glass-fill: var(--rv-glass-fill-fallback);
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-rv-page] {
    --rv-glass-fill: var(--rv-glass-fill-fallback);
    --rv-glass-filter: none;
  }
}

/* Home hero: the paragraph and the button row form one block, flush on both edges. */
html[data-rv-page="index"] .section_header.home .hero-wrapeer {
  align-items: stretch;
}

html[data-rv-page="index"] .section_header.home .hero-wrapeer .desktop-buttons {
  justify-content: flex-start;
}

html[data-rv-page="index"] .section_header.home .hero-wrapeer .desktop-buttons > a {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}

/* Bottom of the button row on the H1's last baseline (17px above the grid bottom at the 4rem H1). */
@media screen and (min-width: 992px) {
  html[data-rv-page="index"] .section_header.home .header49_content-right {
    padding-bottom: 17px;
  }
}

/* Webflow sets opacity and will-change: opacity on the wrapper while it fades; both make it a
   backdrop root. */
.rv-glass-host {
  opacity: 1 !important;
  will-change: auto !important;
}

/* The mirrored fade drives opacity frame by frame; a CSS transition on it would lag behind. */
html .rv-glass-part {
  transition-property: background-color, border-color, color, box-shadow, transform;
}

/* update-hero-nav-scrim (no task: Julia, mobile polish after ondo.finance, 2026-09-26) */
/* Top of the video heroes, under the fixed nav: black fading out by the nav height plus 60px,
   eased over many stops so there is no band. The hero text further down is not touched.
   Strength is the lightest that keeps the nav at 4.5:1 on the brightest frames of each loop. */
html[data-rv-page="index"],
html[data-rv-page="sobre-nos"] {
  --rv-scrim: 0.45;
}

html[data-rv-page="rivool-academy"] {
  --rv-scrim: 0.6;
}

html[data-rv-page="index"] .video-background::before,
html[data-rv-page="sobre-nos"] [data-rv-video="hero"]::before,
html[data-rv-page="rivool-academy"] [data-rv-video="hero"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 132px;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--rv-scrim)) 0%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.978)) 10%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.889)) 20%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.767)) 30%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.622)) 40%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.467)) 50%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.322)) 60%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.2)) 70%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.1)) 80%,
    rgba(0, 0, 0, calc(var(--rv-scrim) * 0.029)) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

html[data-rv-page="index"] .video-background::before {
  z-index: 1;
}

/* Above the video and poster (-100) and the bottom scrim (-99). */
html[data-rv-page="sobre-nos"] [data-rv-video="hero"]::before,
html[data-rv-page="rivool-academy"] [data-rv-video="hero"]::before {
  z-index: -98;
}

@media screen and (max-width: 991px) {
  html[data-rv-page="index"] .video-background::before,
  html[data-rv-page="sobre-nos"] [data-rv-video="hero"]::before,
  html[data-rv-page="rivool-academy"] [data-rv-video="hero"]::before {
    height: 124px;
  }
}

/* update-hero-partners (no task: Julia, mobile polish after ondo.finance, 2026-09-26) */
/* The strip keeps its place in the DOM after the hero and is pulled up over the hero's bottom by
   its own height; the hero gets the same height as bottom padding, so the text and buttons always
   end above the logos. The logos are white PNG/SVGs: the invert that darkened them comes off. */
html[data-rv-page="index"] {
  --rv-partners-h: 120px;
}

html[data-rv-page="index"] .section_header.home {
  padding-bottom: var(--rv-partners-h);
}

html[data-rv-page="index"] .section_logo3 {
  display: flex;
  align-items: center;
  height: var(--rv-partners-h);
  margin-top: calc(-1 * var(--rv-partners-h));
  background-color: transparent;
}

html[data-rv-page="index"] .section_logo3 .padding-section-small {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

/* The white edge fades were made for the white strip; the mask above fades into the video. */
html[data-rv-page="index"] .section_logo3 .shadow-left,
html[data-rv-page="index"] .section_logo3 .shadow-rigth {
  display: none;
}

html[data-rv-page="index"] .section_logo3 .logo3_wrapper .logo3_logo {
  filter: none;
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  html[data-rv-page="index"] {
    --rv-partners-h: 72px;
  }
}

/* update-mobile-gutters (https://github.com/Rivool-Finance/rivool-site/issues/66) */
/* Carousels: the section's padding-global already sets the gutter; the slider's own 20px doubled it. */
@media screen and (max-width: 767px) {
  html[data-rv-page="index"] .rvl-slider,
  html[data-rv-page="rivool-academy"] .rvl3-slider {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Scroll accordions: margin-right 5vw is the gap to the image column; in one column it only
   pulled the list off the right gutter. */
@media screen and (max-width: 991px) {
  [data-rv-acc] .faq3_list {
    margin-right: 0;
  }
}

/* Home hero: the lede column was capped at 21.6rem, 4px short of the right gutter at 390px. */
@media screen and (max-width: 767px) {
  html[data-rv-page="index"] .section_header.home .header49_content-right {
    justify-self: stretch;
  }
  html[data-rv-page="index"] .section_header.home .hero-wrapeer {
    max-width: none;
  }
}

/* update-mobile-proportions (https://github.com/Rivool-Finance/rivool-site/issues/66) */
/* Partner strip: one optical height for every logo (--rv-logo-h times a per-logo factor for
   padding and weight), muted. */
html[data-rv-page="index"] .section_logo3 {
  --rv-logo-h: 28px;
}
html[data-rv-page="index"] .section_logo3 .logo3_logo {
  height: calc(var(--rv-logo-h) * var(--rv-logo-k, 1));
  max-height: none;
  width: auto;
  max-width: none;
  opacity: 0.55;
}
html[data-rv-page="index"] .section_logo3 .logo3_logo[src*="partner-stellar"] { --rv-logo-k: 1.5; }
html[data-rv-page="index"] .section_logo3 .logo3_logo[src*="Privy_Wordmark"] { --rv-logo-k: 0.86; }
html[data-rv-page="index"] .section_logo3 .logo3_logo[src*="partner-coinbase"] { --rv-logo-k: 0.78; }
html[data-rv-page="index"] .section_logo3 .logo3_logo[src*="partner-base"] { --rv-logo-k: 0.8; }
html[data-rv-page="index"] .section_logo3 .logo3_logo[src*="partner-ondo"] { --rv-logo-k: 0.95; }
html[data-rv-page="index"] .section_logo3 .logo3_logo[src*="partner-pods"] { --rv-logo-k: 0.98; }
html[data-rv-page="index"] .section_logo3 .logo3_logo[src*="Frame-2147223825"] { --rv-logo-k: 0.82; }

/* Marquee: the Webflow loop moves the strip a fixed 112rem, which only matched the desktop list.
   Each list now moves by its own width plus the gap, so the loop is seamless at any logo size. */
html[data-rv-page="index"] .section_logo3 {
  --rv-logo-gap: 72px;
  --rv-logo-loop: 26s;
}
html[data-rv-page="index"] .section_logo3 .logo3_component {
  transform: none !important;
}
html[data-rv-page="index"] .section_logo3 .logo3_list-2 {
  flex: none;
  grid-template-columns: repeat(8, auto);
  column-gap: var(--rv-logo-gap);
  margin-right: var(--rv-logo-gap);
  align-items: center;
  padding-top: 0;
  animation: rv-logo-marquee var(--rv-logo-loop) linear infinite;
}
html[data-rv-page="index"] .section_logo3 .logo3_wrapper {
  align-items: center;
  padding: 8px 0;
}
@keyframes rv-logo-marquee {
  to {
    transform: translate3d(calc(-100% - var(--rv-logo-gap)), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-rv-page="index"] .section_logo3 .logo3_list-2 {
    animation: none;
  }
}

@media screen and (max-width: 767px) {
  html[data-rv-page="index"] .section_logo3 {
    --rv-logo-h: 20px;
    --rv-logo-gap: 40px;
    --rv-logo-loop: 18s;
  }
}

/* Home hero: the inner padding-section-large already clears the nav, so the section's extra 170px
   top padding only pushed the content down. Height (min-height) belongs to the video hero fix. */
@media screen and (max-width: 767px) {
  html[data-rv-page="index"] .section_header.home {
    padding-top: 0;
  }
}

/* Hero buttons on phones: stacked, full width, primary first. */
@media screen and (max-width: 479px) {
  html[data-rv-page="index"] .section_header.home .hero-wrapeer .desktop-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  html[data-rv-page="index"] .section_header.home .hero-wrapeer .desktop-buttons > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
  }
  html[data-rv-page="index"] .section_header.home .hero-wrapeer .desktop-buttons > .button-blue {
    order: -1;
  }
}

/* update-yield-disclaimers (Julia's review of #85: product line next to each concrete product promise) */
html[data-rv-page] .rv-product-note {
  display: block;
  max-width: 34rem;
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

/* Inside an accordion answer or a tab the text is already secondary: keep the note close to it. */
html[data-rv-page] .faq3_answer .rv-product-note,
html[data-rv-page] .rivool-tab-desc .rv-product-note {
  opacity: 0.85;
}

html[data-rv-page="solucoes/assessor"] .rivool-tab.ativo .rivool-tab-desc:has(.rv-product-note) {
  max-height: 320px;
}

html[data-rv-page="produtos/renda-em-dolares"] .iof_card .rv-product-note {
  color: #fff;
  opacity: 0.85;
}

/* website-motion (https://github.com/Rivool-Finance/rivool-site/issues/66) */
/* The kit's entrances (pages/_kit/components/motion.css) on the tags of website-motion.mjs.
   Keyframes give only the start: each element ends on its own opacity (accordion rows sit at .4). */
html[data-rv-page] {
  --rv-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes rv-fade {
  from {
    opacity: 0;
  }
}

@keyframes rv-rise {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
}

@keyframes rv-failsafe {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-rv-at="300"] {
  --rv-at: 300ms;
}
[data-rv-at="350"] {
  --rv-at: 350ms;
}
[data-rv-at="400"] {
  --rv-at: 400ms;
}

[data-rv-mask] {
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

@media (prefers-reduced-motion: no-preference) {
  html.rv-io [data-rv="enter"]:not(.rv-done) {
    animation: rv-fade 1000ms var(--rv-out-quart) var(--rv-at, 0ms) both;
  }
  html.rv-io [data-rv="rise"]:not(.rv-done) {
    animation: rv-rise 1000ms var(--rv-out-quart) var(--rv-at, 0ms) both;
  }

  /* Waiting to enter. :not(#rv) outranks the export's class rules on opacity. */
  html.rv-io :is([data-rv="sh"], [data-rv="rv"]):not(.rv-in):not(#rv) {
    opacity: 0;
  }
  /* If website-motion.js never runs, nothing stays hidden. Needs its own `to`: rv-fade would end on
     the opacity:0 above. */
  html.rv-io:not(.rv-ready) :is([data-rv="sh"], [data-rv="rv"]):not(.rv-in) {
    animation: rv-failsafe 1ms linear 3s both;
  }
  html.rv-io :is([data-rv="sh"], [data-rv="rv"]).rv-in:not(.rv-done) {
    animation: rv-fade 1000ms var(--rv-out-quart) var(--rv-at, 0ms) both;
  }
}