/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.contents{display:contents}.flex{display:flex}.hidden{display:none}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.text-wrap{text-wrap:wrap}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}@font-face{font-family:Montserrat;src:url(/brand/fonts/Montserrat-Variable.woff2)format("woff2"),url(/brand/fonts/Montserrat-Variable.ttf)format("truetype");font-style:normal;font-weight:400 800;font-display:swap}@font-face{font-family:Inter;src:url(/brand/fonts/Inter-Variable.woff2)format("woff2"),url(/brand/fonts/Inter-Variable.ttf)format("truetype");font-style:normal;font-weight:400 700;font-display:swap}:root{--paper:#f5f5f5;--mist:#e6e6e6;--gray:#bfbfbf;--graphite:#4a4a4a;--black:#0f0f0f;--bordeaux:#4a0e17;--orange:#e55a2e;--blue:#a7c6e8;--green:#c8ddc6;--sand:#e3c17e;--terracotta:#c97064;--hairline:#4a0e172e;--font-display:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-meta:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--page-progress:0;--hero-open:0;--hero-scroll:0;--method-progress:0}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--bordeaux);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.6;overflow-x:clip}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px}::selection{color:var(--paper);background:var(--orange)}img{max-width:100%;display:block}h1,h2,h3,p{text-wrap:pretty}.page-progress{z-index:130;width:calc(var(--page-progress) * 100%);background:var(--orange);transform-origin:0;height:3px;position:fixed;inset:0 auto auto 0}.site-header{z-index:120;height:78px;color:var(--paper);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#4a0e17f5;border-bottom:1px solid #e55a2e6b;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(28px,4.5vw,64px);display:grid;position:fixed;inset:0 0 auto}.brand{width:104px}.brand img{width:100%}.site-header nav{color:#f5f5f5b8;letter-spacing:.09em;text-transform:uppercase;gap:clamp(22px,3vw,44px);font-size:11px;font-weight:500;display:flex}.site-header nav a,.header-cta{transition:color .18s,background .18s}.site-header nav a:hover{color:var(--orange)}.header-cta{min-height:42px;color:var(--orange);border:1px solid var(--orange);letter-spacing:.08em;text-transform:uppercase;border-radius:0 24px 0 0;justify-self:end;align-items:center;gap:10px;padding:0 18px;font-size:11px;font-weight:500;display:inline-flex}.header-cta:hover{color:var(--bordeaux);background:var(--orange)}.hero{height:225svh;min-height:1480px;color:var(--bordeaux);background:var(--paper);position:relative}.hero-stage{background:var(--paper);isolation:isolate;height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden}.hero-wedges{z-index:6;pointer-events:none;position:absolute;inset:0;overflow:hidden}.hero-wedge{will-change:transform;width:max(74vw,980px);max-width:none;height:auto;transition:transform .16s cubic-bezier(.22,.72,.22,1);position:absolute;top:50%}.hero-wedge-left{transform:translate3d(calc(var(--hero-open) * -46vw), calc(-50% + var(--hero-open) * 10vh), 0) rotate(180deg);left:-18vw}.hero-wedge-right{transform:translate3d(calc(var(--hero-open) * 46vw), calc(-50% - var(--hero-open) * 10vh), 0);right:-18vw}.hero-copy{z-index:3;text-align:center;width:min(920px,78vw);opacity:calc((var(--hero-open) - .08) * 1.8);transform:translate(-50%, calc(-42% + 64px - var(--hero-open) * 64px));transition:opacity .18s,transform .18s cubic-bezier(.22,.72,.22,1);position:absolute;top:51%;left:50%}.hero-copy .eyebrow{display:inline-block}.eyebrow{color:var(--orange);font-family:var(--font-meta);letter-spacing:.16em;text-transform:uppercase;margin:0 0 24px;padding-left:17px;font-size:11.5px;font-weight:500;line-height:1.4;position:relative}.eyebrow:before{content:"";background:var(--orange);width:7px;height:7px;position:absolute;top:.42em;left:0}.hero h1,.vision h2,.section-heading h2,.method-copy h2,.architecture-heading h2,.cartography h2,.proof h2,.faq h2,.closing h2{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-weight:400}.hero h1{max-width:920px;color:var(--bordeaux);font-size:clamp(48px,5vw,72px);line-height:1.02}em{color:var(--orange);font-style:normal}.hero-lead,.lede{max-width:60ch;font-size:clamp(18px,1.6vw,21px);line-height:1.45}.hero-lead{max-width:660px;color:var(--graphite);margin:28px 0 0}.hero-lead,.hero-support{margin-inline:auto}.hero-support{color:#4a4a4ad1;max-width:590px;margin-top:14px;margin-bottom:0;font-size:14px;line-height:1.6}.hero-actions{justify-content:center;align-items:center;gap:28px;margin-top:36px;display:flex}.button{letter-spacing:.08em;text-transform:uppercase;border-radius:3px;justify-content:center;align-items:center;gap:10px;min-height:50px;padding:0 24px;font-size:11px;font-weight:500;transition:color .18s,background .18s,transform .18s;display:inline-flex}.button:hover{transform:translateY(-2px)}.button-signal{color:var(--paper);background:var(--orange)}.button-signal:hover{color:var(--orange);background:var(--paper)}.button-demo{min-width:226px;color:var(--bordeaux);background:0 0;border:1px solid #4a0e17b3;border-radius:0 24px 0 0}.button-demo span{color:var(--orange);font-size:14px}.button-demo:hover{color:var(--paper);background:var(--bordeaux)}.button-paper{color:var(--bordeaux);background:var(--paper)}.button-paper:hover{color:var(--paper);background:var(--orange)}.text-link{border-bottom:1px solid var(--orange);align-items:center;gap:10px;padding-bottom:4px;font-size:13px;display:inline-flex}.text-link-inverse{color:var(--paper)}.hero-actions .text-link{min-width:206px;color:var(--bordeaux);letter-spacing:.11em;text-transform:uppercase;border-color:#4a0e173d;justify-content:center;padding-bottom:12px;font-size:10px;font-weight:500}.vision{isolation:isolate;background:var(--paper);padding:140px clamp(28px,6vw,96px);position:relative;overflow:hidden}.vision>*{z-index:1;position:relative}.complexity-intro{max-width:1400px;margin:0 auto}.complexity-intro .eyebrow{margin-top:0}.complexity-copy{min-width:0;max-width:980px}.complexity-copy h2{color:var(--bordeaux)}.complexity-copy h2 em{color:var(--orange);font-style:normal}.vision h2,.section-heading h2,.architecture-heading h2,.cartography h2,.proof h2,.faq h2{letter-spacing:-.015em;max-width:980px;font-size:clamp(38px,4vw,60px);line-height:1.1}.complexity-copy .lede{max-width:680px;color:var(--graphite);margin:32px 0 0;font-size:18px;line-height:1.55}.complexity-copy .lede strong{color:var(--bordeaux);font-weight:600}.complexity-points{grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:88px auto 0;display:grid}.complexity-points article{border:1px solid #4a0e176b;border-radius:0 34px 0 0;flex-direction:column;min-height:296px;padding:32px 36px 36px;display:flex}.complexity-points article>img{width:68px;height:68px}.complexity-points h3,.map-grid h3{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2}.complexity-points h3{max-width:15ch;color:var(--bordeaux);letter-spacing:.01em;text-transform:uppercase;margin:52px 0 14px;font-size:21px}.complexity-points article>p:last-child{max-width:36ch;color:var(--graphite);margin:0;font-size:15px;line-height:1.55}.meta{color:var(--orange);font-family:var(--font-meta);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:12.5px}.section-heading{max-width:1400px;margin:0 auto;padding:140px clamp(28px,6vw,96px) 72px}.section-heading .eyebrow{margin-top:0}.problem{background:var(--paper);border-top:1px solid var(--mist)}.method-heading-copy{min-width:0;max-width:980px}.method-heading-copy h2 em{color:var(--orange)}.method-heading-copy .lede{max-width:620px;color:var(--graphite);margin:30px 0 0;font-size:16px;line-height:1.6}.problem-layout{grid-template-columns:minmax(320px,.72fr) minmax(520px,1.28fr);gap:56px;max-width:1400px;margin:0 auto;padding:0 clamp(28px,6vw,96px) 140px;display:grid}.problem-step{opacity:.28;flex-direction:column;justify-content:center;min-height:72vh;transition:opacity .42s,transform .42s;display:flex;transform:translate(-18px)}.problem-step.is-active{opacity:1;transform:translate(0)}.problem-step h3,.product-step h3{font-family:var(--font-display);letter-spacing:-.015em;margin:20px 0 24px;font-size:clamp(32px,3.2vw,52px);font-weight:400;line-height:1.1}.problem-step>span,.product-step>span{max-width:56ch;color:var(--graphite);font-size:16px;line-height:1.6}.problem-media{min-height:296vh}.media-window{background:var(--mist);border:1px solid var(--mist);height:72vh;position:sticky;top:13vh;overflow:hidden}.media-window>img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .56s,transform .82s;position:absolute;inset:0;transform:scale(1.04)}.media-window:after{content:"";z-index:2;pointer-events:none;background:linear-gradient(#0000,#12070975);height:23%;position:absolute;inset:auto 0 0}.media-window>img.is-active{opacity:1;transform:scale(1)}.media-caption{z-index:4;color:#fff;font-family:var(--font-meta);letter-spacing:.08em;text-shadow:0 1px 10px #1e060c6b;text-transform:uppercase;border-top:1px solid #ffffffe0;justify-content:space-between;margin:0;padding-top:12px;font-size:10px;display:flex;position:absolute;bottom:20px;left:22px;right:22px}.media-caption span{color:#fff}.platform-overview{color:var(--bordeaux);background:var(--paper);border-top:1px solid var(--mist);padding:140px clamp(28px,6vw,96px) 160px}.platform-carousel-shell{max-width:1400px;margin:0 auto}.platform-carousel-heading{max-width:820px}.platform-carousel-heading h2{color:var(--bordeaux);font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(40px,4.4vw,66px);font-weight:400;line-height:1.06}.platform-carousel-heading .lede{max-width:570px;color:var(--graphite);margin:32px 0 0;font-size:16px;line-height:1.6}.platform-audience{gap:14px;margin-top:34px;display:flex}.platform-audience .button,.platform-audience button{min-height:48px;font-family:var(--font-meta);letter-spacing:.11em;text-transform:uppercase;border-radius:0 24px 0 0;justify-content:center;align-items:center;gap:10px;padding:0 26px;font-size:10px;display:inline-flex}.platform-audience button{color:#4a0e1757;cursor:not-allowed;background:0 0;border:1px solid #4a0e1726}.platform-tabs{margin-top:88px}.platform-tabs>p{color:var(--gray);font-family:var(--font-meta);letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px;font-size:9.5px}.platform-tabs>div{border-bottom:1px solid #4a0e1733;grid-template-columns:repeat(4,1fr);display:grid}.platform-tabs button{min-height:124px;color:var(--graphite);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:0 18px 0 0;flex-direction:column;align-items:flex-start;gap:15px;margin:0 4px;padding:22px 20px 18px;transition:background .22s,box-shadow .22s,transform .26s;display:flex;position:relative}.platform-tabs button:after{content:"";background:0 0;height:2px;position:absolute;bottom:-1px;left:0;right:0}.platform-tabs button:hover{background:#ffffff8f}.platform-tabs button.is-active{z-index:2;color:var(--bordeaux);background:#fff;transform:translateY(-8px);box-shadow:0 12px 28px #4a0e1717}.platform-tabs button.is-active:after{background:var(--orange)}.platform-tabs button>span{letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:10px;font-size:13px;font-weight:600;display:flex}.platform-tabs button>span i{border:1px solid #4a0e178c;width:8px;height:8px}.platform-tabs button.is-active>span i{background:var(--orange);border-color:var(--orange)}.platform-tabs button small{max-width:29ch;color:var(--graphite);font-size:12px;line-height:1.45}.platform-carousel-panel{grid-template-columns:minmax(280px,.62fr) minmax(560px,1.38fr);align-items:center;gap:70px;padding-top:90px;display:grid}.platform-carousel-copy{align-self:center;animation:.52s cubic-bezier(.16,1,.3,1) both contentIn}.platform-carousel-copy h3{max-width:18ch;color:var(--bordeaux);font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 28px;font-size:clamp(32px,3.3vw,50px);font-weight:400;line-height:1.08}.platform-carousel-copy>p:not(.product-tool){max-width:48ch;color:var(--graphite);margin:0;font-size:15px;line-height:1.6}.platform-carousel-visual{min-width:0;animation:.58s cubic-bezier(.16,1,.3,1) both contentIn}.macbook-mockup{filter:drop-shadow(0 24px 34px #4a0e1724);width:100%;margin-top:auto;padding:18px 3.5% 10px}.macbook-lid{background:linear-gradient(145deg,#fff 0%,#f5f3ee 62%,#e6e3dc 100%);border:1px solid #ffffffeb;border-radius:16px 16px 6px 6px;padding:14px 14px 12px;position:relative;box-shadow:inset 0 0 0 1px #4a0e1714,0 1px #fffc}.macbook-camera{z-index:3;background:#4a0e173d;border-radius:50%;width:4px;height:4px;position:absolute;top:5px;left:50%;transform:translate(-50%)}.macbook-screen{aspect-ratio:16/9.6;background:#f7f6f2;border:1px solid #4a0e1726;border-radius:7px;position:relative;overflow:hidden}.carousel-screen-bar{z-index:5;height:36px;color:var(--gray);font-family:var(--font-meta);letter-spacing:.08em;text-transform:uppercase;background:#fffffff5;border-bottom:1px solid #4a0e1714;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px;font-size:8px;display:grid;position:absolute;inset:0 0 auto}.carousel-screen-bar>span{gap:5px;display:flex}.carousel-screen-bar>span i{background:#dedbd4;border-radius:50%;width:6px;height:6px}.carousel-screen-bar strong{color:var(--bordeaux);gap:9px;font-weight:500;display:flex}.carousel-screen-bar strong em{color:var(--orange)}.carousel-screen-bar small{font-size:inherit;justify-self:end}.platform-scene-carousel{top:36px}.macbook-base{background:linear-gradient(#fff 0%,#e9e6df 60%,#d8d4cc 100%);border:1px solid #ffffffd9;border-radius:1px 1px 60% 60%;width:108%;height:14px;position:relative;left:-4%;box-shadow:inset 0 -1px #4a0e171f}.macbook-base i{background:#d8d4cc;border-radius:0 0 5px 5px;width:14%;height:4px;position:absolute;top:-1px;left:43%}.platform-carousel-caption{max-width:76ch;color:var(--gray);text-align:center;margin:12px auto 0;font-size:11px;line-height:1.45}.method{height:390vh;color:var(--paper);background:var(--bordeaux);position:relative}.method-sticky{grid-template-rows:auto auto 1fr;height:100svh;padding:7vh clamp(28px,6vw,96px) 5vh;display:grid;position:sticky;top:0;overflow:hidden}.method-topline{justify-content:space-between;align-items:flex-end;gap:48px;display:flex}.method-intro-heading .eyebrow{margin-bottom:16px}.method-intro-heading h2{color:var(--paper);font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;line-height:1.08}.method-intro-heading h2 em{color:var(--orange);font-style:normal}.method-topline>p:last-child{color:#f5f5f58f;max-width:42ch;margin:0;font-size:13px;line-height:1.55}.method-progress{grid-template-columns:repeat(4,1fr);margin:24px 0 28px;display:grid;position:relative}.method-progress:before,.method-progress-fill{content:"";height:2px;position:absolute;top:10px;left:0}.method-progress:before{background:#f5f5f533;right:0}.method-progress-fill{width:calc(var(--method-progress) * 100%);background:var(--orange)}.method-progress button{z-index:1;color:#f5f5f566;text-align:left;cursor:pointer;background:0 0;border:0;justify-items:start;gap:7px;padding:0;display:grid;position:relative}.method-progress button i{background:var(--bordeaux);border:2px solid #f5f5f552;width:22px;height:22px}.method-progress button.is-active{color:var(--paper)}.method-progress button.is-active i{background:var(--orange);border-color:var(--orange)}.method-progress button span{font-family:var(--font-meta);font-size:10px}.method-progress button strong{letter-spacing:.09em;text-transform:uppercase;font-size:11px;font-weight:600}.method-content{grid-template-columns:.72fr 1.28fr;gap:56px;min-height:0;display:grid}.method-copy{align-self:center;max-width:580px;animation:.5s both contentIn}.stage-tag{color:var(--orange);font-family:var(--font-meta);letter-spacing:.08em;text-transform:uppercase;margin:0 0 24px;font-size:10.5px}.method-number{color:#f5f5f547;font-family:var(--font-meta);margin:0 0 12px;font-size:12.5px}.method-copy h2{color:var(--paper);text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(38px,4.2vw,60px);line-height:1.1}.method-copy>p:not(.stage-tag,.method-number){color:#f5f5f5ad;max-width:56ch;font-size:16px;line-height:1.6}.method-copy .text-link{margin-top:16px}.method-image{background:var(--paper);min-height:0;position:relative;overflow:hidden}.method-image>img:not(.method-graphic){object-fit:cover;opacity:0;filter:saturate(.1)contrast(1.08);width:100%;height:100%;transition:opacity .54s,transform .8s;position:absolute;inset:0;transform:scale(1.04)}.method-image>img.is-active{opacity:1;transform:scale(1)}.method-graphic{z-index:3;object-fit:contain;opacity:.9;width:62%;height:124%;position:absolute;bottom:-12%;right:-20%}.product{background:var(--paper);padding-bottom:140px}.product-heading{align-items:start;padding-bottom:80px}.product-heading-copy{min-width:0}.product-heading-copy .lede{max-width:680px;color:var(--graphite);margin:28px 0 0;font-size:16px;line-height:1.6}.product-principles{border-top:1px solid #4a0e1742;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;padding-top:28px;display:grid}.product-principles h3{color:var(--bordeaux);font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;padding-left:16px;font-size:16px;font-weight:600;position:relative}.product-principles h3:before{content:"";background:var(--orange);width:7px;height:7px;position:absolute;top:.42em;left:0}.product-principles p{color:var(--graphite);margin:0;font-size:14px;line-height:1.55}.product-layout{grid-template-columns:minmax(560px,1.25fr) minmax(320px,.75fr);gap:64px;max-width:1400px;margin:0 auto;padding:0 clamp(28px,6vw,96px);display:grid}.product-visual{align-self:start;position:sticky;top:11vh}.product-screen{background:var(--black);border:1px solid var(--black);position:relative;overflow:hidden}.screen-bar{z-index:5;color:#f5f5f5a8;background:var(--black);height:48px;font-family:var(--font-meta);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #f5f5f51f;justify-content:space-between;align-items:center;padding:0 20px;font-size:9px;display:flex;position:relative}.screen-bar span:last-child{color:var(--orange)}.screen-stack{aspect-ratio:1440/810;background:#eef0f3;width:100%;position:relative;overflow:hidden}.platform-scene{animation:.42s both platformSceneIn;position:absolute;inset:0;overflow:hidden}.platform-scene img{opacity:0;height:auto;animation:.9s cubic-bezier(.16,1,.3,1) forwards platformLayerIn;display:block;position:absolute;transform:translateY(12px)scale(.97)}@keyframes platformSceneIn{0%{opacity:.68}to{opacity:1}}@keyframes platformLayerIn{to{opacity:1;transform:none}}.screen-progress{z-index:6;grid-template-columns:repeat(4,1fr);gap:6px;display:grid;position:absolute;bottom:18px;left:20px;right:20px}.screen-progress i{background:#f5f5f538;height:2px}.screen-progress i.is-active{background:var(--orange)}.product-caption{max-width:66ch;color:var(--graphite);margin:14px 0 0;font-size:13px;line-height:1.5;transition:opacity .24s}.product-caption span{color:var(--gray);font-family:var(--font-meta);letter-spacing:.1em;text-transform:uppercase;margin-top:6px;font-size:9px;display:block}.product-step{opacity:.25;flex-direction:column;justify-content:center;min-height:70vh;transition:opacity .42s,transform .42s;display:flex;transform:translate(16px)}.product-step.is-active{opacity:1;transform:translate(0)}.product-verb{color:var(--orange);font-family:var(--font-display);letter-spacing:.09em;text-transform:uppercase;margin:18px 0 0;font-size:15px;font-weight:600}.product-tool{max-width:46ch;color:var(--bordeaux);border-left:3px solid var(--orange);margin:24px 0 0;padding:2px 0 2px 16px;font-size:14px;line-height:1.6}.product-tool em{color:var(--orange);font-style:normal}.architecture{background:var(--mist);padding:140px clamp(28px,5vw,80px)}.architecture-heading{grid-template-columns:.5fr 1.5fr;gap:28px;max-width:1400px;margin:0 auto 96px;display:grid}.architecture-heading .eyebrow{margin-top:10px}.architecture-gallery{grid-template-columns:repeat(12,1fr);align-items:start;gap:28px;max-width:1400px;margin:0 auto;display:grid}.architecture-card{margin:0}.architecture-card-a{grid-column:1/span 7}.architecture-card-b{grid-column:9/span 4;margin-top:120px}.architecture-card-c{grid-column:3/span 7;margin-top:-70px}.image-frame{background:var(--paper);position:relative;overflow:hidden}.image-frame-full{aspect-ratio:13/7}.architecture-card-b .image-frame{aspect-ratio:7/13}.image-frame>img:first-child{object-fit:cover;filter:saturate(.1)contrast(1.08);width:100%;height:100%;transition:transform .65s}.architecture-card:hover .image-frame>img:first-child{transform:scale(1.025)}.image-frame-trace>img:last-child{object-fit:contain;opacity:.92;width:100%;height:120%;position:absolute;top:-10%;right:-36%}.architecture-card figcaption{color:var(--graphite);border-top:1px solid var(--bordeaux);justify-content:space-between;gap:20px;padding-top:12px;font-size:12px;display:flex}.architecture-card figcaption span{color:var(--orange);font-family:var(--font-meta);text-transform:uppercase}.cartography{background:var(--paper);padding:140px clamp(28px,6vw,96px)}.cartography-intro{grid-template-columns:.5fr 1.5fr;gap:28px;max-width:1400px;margin:0 auto 96px;display:grid}.cartography-intro .eyebrow{margin-top:10px}.cartography-intro .lede{color:var(--graphite);grid-column:2;margin:24px 0 0}.map-grid{grid-template-columns:repeat(2,1fr);gap:28px;max-width:1400px;margin:0 auto;display:grid}.map-grid article{background:var(--paper);border:1px solid var(--mist);min-height:480px;position:relative;overflow:hidden}.map-grid article>img{object-fit:cover;opacity:.7;width:100%;height:100%;transition:transform .65s,opacity .3s;position:absolute;inset:0}.map-grid article:hover>img{opacity:1;transform:scale(1.02)}.map-grid article>div{z-index:2;border-top:1px solid var(--bordeaux);background:#f5f5f5f0;padding:20px 22px;position:absolute;bottom:20px;left:20px;right:20px}.map-grid h3{margin:10px 0 4px}.map-grid span{color:var(--graphite);font-size:13px}.outcomes{background:var(--paper);border-top:1px solid var(--mist);padding:140px clamp(28px,6vw,96px)}.outcomes-heading,.outcomes-grid,.testimonials-layout,.about{max-width:1400px;margin-inline:auto}.outcomes-heading h2,.testimonials-copy h2,.about-copy h2{max-width:920px;color:var(--bordeaux);font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(38px,4vw,60px);font-weight:400;line-height:1.08}.outcomes-grid{border-top:1px solid var(--mist);grid-template-columns:repeat(4,1fr);gap:0;margin-top:96px;display:grid}.outcomes-grid article{border-right:1px solid var(--mist);min-height:190px;padding:24px 28px 20px 0}.outcomes-grid article+article{padding-left:28px}.outcomes-grid article:last-child{border-right:0}.outcomes-grid h3{color:var(--bordeaux);letter-spacing:.08em;text-transform:uppercase;margin:18px 0 12px;font-size:12px;font-weight:700}.outcomes-grid article>p:last-child{max-width:34ch;color:var(--graphite);margin:0;font-size:13px;line-height:1.55}.testimonials{border-top:1px solid var(--mist);background:#f7f5f2;padding:140px clamp(28px,6vw,96px) 0}.testimonials-layout{grid-template-columns:.95fr 1.05fr;align-items:center;gap:clamp(56px,9vw,140px);display:grid}.testimonials-copy>p:not(.eyebrow){max-width:56ch;color:var(--graphite);margin:32px 0 0;font-size:15px;line-height:1.65}.testimonials-copy>a,.about-copy>a{color:var(--bordeaux);font-family:var(--font-meta);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #4a0e1757;align-items:center;gap:9px;margin-top:30px;padding-bottom:7px;font-size:10px;font-weight:600;display:inline-flex}.testimonials-copy>a span,.about-copy>a span{color:var(--orange)}.testimonial-card{margin:0}.testimonial-card blockquote{color:var(--bordeaux);font-family:var(--font-display);background:#fff;border:1px solid #4a0e1714;border-radius:0 28px 0 0;margin:0;padding:clamp(30px,4vw,48px);font-size:clamp(22px,2vw,30px);line-height:1.35;box-shadow:0 18px 46px #4a0e1717}.testimonial-card figcaption{align-items:center;gap:12px;margin-top:22px;display:flex}.client-avatar{width:44px;height:44px;color:var(--paper);background:var(--bordeaux);font-family:var(--font-meta);border-radius:50%;flex:none;place-items:center;font-size:9px;display:grid}.testimonial-card figcaption>span:last-child{gap:3px;display:grid}.testimonial-card figcaption strong,.testimonial-card figcaption small{font-size:11px}.testimonial-card figcaption small{color:var(--gray)}.stats{border-top:1px solid var(--mist);grid-template-columns:repeat(4,1fr);max-width:1400px;margin:112px auto 0;display:grid}.stats article{border-right:1px solid var(--mist);flex-direction:column;justify-content:space-between;min-height:150px;padding:22px 22px 18px 0;display:flex}.stats article+article{padding-left:22px}.stats article:last-child{border-right:0}.stats strong{color:var(--bordeaux);font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(38px,3.8vw,56px);font-weight:700;line-height:1}.stats span{max-width:26ch;color:var(--graphite);font-size:11px;line-height:1.45}.about{background:var(--paper);grid-template-columns:1fr minmax(360px,.66fr);align-items:center;gap:clamp(64px,10vw,160px);padding:150px clamp(28px,6vw,96px);display:grid}.about-copy>p:not(.eyebrow){max-width:62ch;color:var(--graphite);margin:38px 0 0;font-size:15px;line-height:1.7}.founder-card{background:#fff;border:1px solid #4a0e1714;border-radius:0 32px 0 0;margin:0;overflow:hidden;box-shadow:0 20px 50px #4a0e171a}.founder-card>img{aspect-ratio:4/3;object-fit:cover;object-position:center 24%;filter:grayscale()contrast(1.02);width:100%;display:block}.founder-card-copy{padding:22px 24px 26px}.founder-card-copy>div{justify-content:space-between;align-items:start;gap:24px;display:flex}.founder-card-copy p{gap:4px;margin:0;display:grid}.founder-card-copy strong,.founder-card-copy>div>span{font-family:var(--font-meta);letter-spacing:.1em;text-transform:uppercase;font-size:9px}.founder-card-copy p span{color:var(--graphite);font-size:11px}.founder-card-copy>div>span{color:var(--gray)}.founder-card-copy blockquote{color:var(--graphite);border-left:2px solid var(--orange);margin:22px 0 0;padding:2px 0 2px 16px;font-size:13px;line-height:1.55}.faq{border-top:1px solid var(--mist);background:#f7f5f2;grid-template-columns:.72fr 1.28fr;gap:72px;padding:140px clamp(28px,6vw,96px);display:grid}.faq-list{gap:12px;display:grid}.faq details{background:#ffffff6b;border:1px solid #4a0e171f}.faq details[open]{background:#fff;box-shadow:0 12px 32px #4a0e170f}.faq summary{cursor:pointer;padding:24px 56px 24px 26px;font-weight:500;list-style:none;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:var(--orange);font-family:var(--font-display);font-size:24px;position:absolute;top:18px;right:24px}.faq details[open] summary:after{content:"−"}.faq details p{max-width:68ch;color:var(--graphite);margin:-2px 56px 28px 26px;font-size:14px;line-height:1.6}.closing{min-height:clamp(560px,35.714vw,760px);color:var(--paper);background:#100d0d;position:relative;overflow:hidden}.closing-photo{object-fit:cover;object-position:70% center;width:100%;height:100%;position:absolute;inset:0}.closing-shell{z-index:2;flex-direction:column;width:min(1400px,100% - clamp(56px,10vw,160px));min-height:clamp(560px,35.714vw,760px);margin:0 auto;padding-top:clamp(110px,14vh,160px);display:flex;position:relative}.closing-content{width:min(620px,52vw);margin-left:clamp(0px,7vw,108px)}.closing h2{max-width:620px;color:var(--paper);letter-spacing:-.035em;text-shadow:0 2px 20px #00000038;margin:0;font-size:clamp(38px,3.4vw,54px);font-weight:400;line-height:1.08}.closing-location{color:#f5f5f5d1;font-family:var(--font-meta);letter-spacing:.08em;text-transform:uppercase;margin:28px 0 0;font-size:10px}.closing-footer{color:#f5f5f5d6;letter-spacing:.01em;text-shadow:0 1px 8px #00000059;border-top:1px solid #f5f5f538;margin-top:auto;font-size:11px;line-height:1.55}.footer-grid{grid-template-columns:1.25fr .6fr .7fr .8fr;gap:clamp(32px,5vw,80px);padding:42px 0 38px;display:grid}.footer-brand img{width:78px;height:auto}.footer-brand p{color:#f5f5f5a8;max-width:34ch;margin:22px 0 0}.footer-column{flex-direction:column;align-items:flex-start;gap:7px;display:flex}.footer-column strong{color:var(--paper);font-family:var(--font-meta);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;font-size:9px;font-weight:500}.footer-column a{transition:color .18s}.footer-column a:hover{color:var(--orange)}.footer-bottom{color:#f5f5f57a;font-family:var(--font-meta);letter-spacing:.04em;border-top:1px solid #f5f5f529;justify-content:space-between;gap:24px;padding:18px 0 22px;font-size:8px;display:flex}[data-reveal]{opacity:0;transition:opacity .65s,transform .72s;transform:translateY(24px)}[data-reveal].is-visible{opacity:1;transform:translateY(0)}@keyframes graphicBreath{0%,to{transform:scale(.985)}50%{transform:scale(1.015)}}@keyframes axisTrace{0%{transform-origin:top;opacity:0;transform:scaleY(0)}25%{opacity:1}64%{transform-origin:top;opacity:1;transform:scaleY(1)}65%{transform-origin:bottom}to{transform-origin:bottom;opacity:0;transform:scaleY(0)}}@keyframes marcoPulse{0%,to{opacity:.65;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}@keyframes cuePulse{0%,to{transform-origin:top;opacity:.45;transform:scaleY(.45)}50%{transform-origin:top;opacity:1;transform:scaleY(1)}}@keyframes contentIn{0%{opacity:.2;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=1080px){.site-header{grid-template-columns:1fr 1fr}.site-header nav{display:none}.hero-copy{width:min(700px,70vw)}.hero-wedge{width:max(86vw,900px)}.hero-wedge-left{left:-28vw}.hero-wedge-right{right:-28vw}.problem-layout,.product-layout{grid-template-columns:1fr 1.08fr}.method-content{grid-template-columns:.88fr 1.12fr}.platform-carousel-panel{grid-template-columns:.72fr 1.28fr;gap:42px}.platform-tabs button{padding-inline:14px}.stats{grid-template-columns:repeat(2,1fr)}.stats article:nth-child(2){border-right:0}.stats article:nth-child(n+3){border-top:1px solid var(--mist)}}@media (width<=760px){.site-header{height:68px;padding-inline:20px}.brand{width:88px}.header-cta{min-height:34px;padding-inline:10px;font-size:9px}.hero{height:210svh;min-height:1360px}.hero-stage{min-height:620px}.hero-copy{width:calc(100vw - 44px);max-width:calc(100vw - 44px);top:52%;left:50%}.hero h1{font-size:clamp(42px,12.5vw,58px)}.hero-wedge{width:max(132vw,660px)}.hero-wedge-left{transform:translate3d(calc(var(--hero-open) * -46vw), calc(-50% + var(--hero-open) * 8vh), 0) rotate(180deg);left:-52vw}.hero-wedge-right{transform:translate3d(calc(var(--hero-open) * 46vw), calc(-50% - var(--hero-open) * 8vh), 0);right:-52vw}.hero-actions{flex-direction:column;align-items:center;gap:18px}.vision,.platform-overview,.outcomes,.testimonials,.about,.architecture,.cartography,.proof,.faq{padding:104px 22px}.complexity-intro,.section-heading,.testimonials-layout,.about,.architecture-heading,.cartography-intro,.proof-intro,.faq{grid-template-columns:1fr}.vision h2,.section-heading h2,.architecture-heading h2,.cartography h2,.proof h2,.faq h2{font-size:38px}.complexity-copy .lede,.cartography-intro .lede{grid-column:1}.complexity-points{grid-template-columns:1fr;margin-top:64px}.complexity-points article{border:1px solid #4a0e176b;min-height:250px;padding:30px 24px 32px}.complexity-points h3{margin-top:42px}.section-heading{padding:104px 22px 48px}.problem-layout{padding:0 22px 104px;display:block}.problem-media{pointer-events:none;height:58vh;min-height:0;margin-bottom:-58vh;position:sticky;top:11vh}.media-window{opacity:.28;height:58vh;top:0}.problem-steps{z-index:4;position:relative}.problem-step{min-height:76vh}.platform-carousel-heading h2{font-size:38px}.platform-audience{flex-direction:column;align-items:flex-start}.platform-audience .button,.platform-audience button{width:min(100%,260px)}.platform-tabs{margin-top:68px;overflow:hidden}.platform-tabs>div{scroll-snap-type:x proximity;grid-template-columns:repeat(4,minmax(220px,1fr));padding-top:10px;overflow-x:auto}.platform-tabs button{scroll-snap-align:start}.platform-carousel-panel{grid-template-columns:1fr;gap:46px;padding-top:64px}.platform-carousel-copy h3{font-size:38px}.macbook-mockup{padding-inline:0}.carousel-screen-bar{grid-template-columns:auto 1fr}.carousel-screen-bar strong{justify-self:end}.carousel-screen-bar small{display:none}.outcomes-heading h2,.testimonials-copy h2,.about-copy h2{font-size:38px}.outcomes-grid{grid-template-columns:1fr;margin-top:64px}.outcomes-grid article,.outcomes-grid article+article{border-right:0;border-bottom:1px solid var(--mist);min-height:0;padding:26px 0 30px}.testimonials-layout,.about{gap:64px}.testimonial-card blockquote{font-size:22px}.founder-card{width:100%;max-width:520px}.method{height:360vh}.method-sticky{padding:9vh 22px 5vh}.method-topline>p:last-child,.method-progress button strong{display:none}.method-content{grid-template-columns:1fr}.method-copy{z-index:4;border-top:1px solid var(--orange);background:#4a0e17e6;align-self:end;padding:22px;position:relative}.method-copy h2{font-size:38px}.method-image{position:absolute;inset:22vh 22px 5vh}.product{padding-bottom:104px}.product-layout{flex-direction:column;padding:0 22px;display:flex}.product-principles{grid-template-columns:1fr;gap:28px}.product-visual{z-index:3;width:100%;top:9vh}.product-steps{margin-top:-5vh}.product-step{min-height:74vh;padding-top:38vh}.architecture-heading,.cartography-intro{margin-bottom:64px}.architecture-gallery,.map-grid{flex-direction:column;display:flex}.architecture-card,.map-grid article{width:100%;margin:0 0 36px}.architecture-card .image-frame,.map-grid article{aspect-ratio:2/3;min-height:0}.stats{grid-template-columns:1fr;margin-top:64px}.stats article{border-right:0;border-top:1px solid var(--mist);min-height:190px;padding-left:0!important}.closing-content{width:100%;margin-left:0}.closing h2{font-size:clamp(42px,12vw,58px)}.closing-photo{object-position:66% center}.closing-shell{width:calc(100% - 44px);min-height:860px;padding-top:120px}.footer-grid{grid-template-columns:repeat(2,1fr);gap:34px 22px;padding-block:34px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}}@media (prefers-reduced-motion:reduce){:root{--hero-open:.86}html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation:none!important}.platform-scene img{opacity:1!important;transform:none!important}.hero{height:100svh;min-height:720px}.hero-copy{opacity:1;transform:translate(-50%,-50%)!important}.hero-wedge-left{transform:translate(-29vw,-42%)rotate(180deg)!important}.hero-wedge-right{transform:translate(29vw,-58%)!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

/* === Ajustes do Rafael (sobrepõem o CSS do designer acima) ===
   Reveal mais lento e com mais percurso. Original: .65s fade / .72s subida / 24px. */
[data-reveal]{opacity:0;transition:opacity 1.3s cubic-bezier(.22,.61,.36,1),transform 1.5s cubic-bezier(.22,.61,.36,1);transform:translateY(34px)}

/* === Header transparente com recorte pelas cunhas (pedido do Rafael) ===
   Fundo vinho removido; fica só a borda inferior de 1px vinho. O conteúdo tem
   duas camadas: a base em LARANJA (visível sobre o fundo claro) e um clone em
   BRANCO (.header-blend) mascarado pelas duas cunhas — a máscara é sincronizada
   por JS com a posição real das cunhas, então a troca de cor corta a palavra
   exatamente na borda do desenho. */
.site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--bordeaux)}
.site-header nav{color:var(--orange)}
.site-header nav a:hover{color:var(--bordeaux)}
.header-blend{position:absolute;inset:0;border-bottom:0;pointer-events:none;background:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url(/brand/graphics/cunha-laranja.svg),url(/brand/graphics/cunha-laranja-flip.svg);mask-image:url(/brand/graphics/cunha-laranja.svg),url(/brand/graphics/cunha-laranja-flip.svg)}
.header-blend nav{color:var(--paper)}
.header-blend nav a:hover{color:var(--paper)}
.header-blend .header-cta{color:var(--paper);border-color:var(--paper)}

/* === Rodada 2 do header (Rafael): sem divisor, sem menu, CTA fundo branco === */
.site-header{border-bottom:0}
.site-header nav{display:none}
.header-cta{background:var(--paper)}
/* CTA opaco não participa do recorte — o clone esconde o dele pra não pintar
   branco sobre branco. */
.header-blend .header-cta{visibility:hidden}

/* Sem o menu do meio, o header vira 2 colunas: logo | botão (na direita). */
.site-header{grid-template-columns:1fr auto}

/* === Véu branco do topo (Rafael): conteúdo some suavemente antes de encostar
   na logo. Fica ATRÁS do conteúdo do header (z-index -1) e só existe depois
   do hero — a opacidade é controlada por JS conforme o hero sai da tela. */
.header-fade{position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(to bottom,var(--paper) 0%,var(--paper) 30%,rgba(245,245,245,0) 100%)}

/* Véu do topo, versão suave: mais baixo (150→110px), quase sem trecho 100%
   branco (30%→10%) e queda em curva (vários stops) em vez de reta. */
.header-fade{height:110px;background:linear-gradient(to bottom,var(--paper) 0%,var(--paper) 10%,rgba(245,245,245,.85) 32%,rgba(245,245,245,.55) 55%,rgba(245,245,245,.25) 78%,rgba(245,245,245,0) 100%)}

/* === Plataforma vira palco de scroll (Rafael): seção "O método" removida; a
   Plataforma herda o título e as 4 etapas passam SOZINHAS conforme o scroll
   (o clique nas abas continua funcionando). O shell fica grudado na tela
   enquanto a seção alta rola por baixo. */
.platform-overview{height:380svh;padding-top:0;padding-bottom:0;position:relative}
.platform-carousel-shell{position:sticky;top:0;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:92px;padding-bottom:36px}
.platform-tabs{margin-top:44px}
.platform-carousel-panel{padding-top:44px}

/* === Palco sticky v2 (Rafael): quem gruda é só régua de etapas + mockup
   (.platform-stage). O título "Quatro etapas..." rola embora antes. Cards das
   etapas compactados pra régua + MacBook + legenda caberem numa tela. */
.platform-carousel-shell{position:static;min-height:0;display:block;padding-top:110px;padding-bottom:0}
.platform-stage{position:sticky;top:0;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:66px 0 18px}
.platform-tabs{margin-top:0}
.platform-tabs p{margin-bottom:10px}
.platform-tabs button{min-height:0;gap:8px;padding:12px 14px 12px}
.platform-tabs button small{font-size:11px;line-height:1.35;max-width:34ch}
.platform-tabs button.is-active{transform:translateY(-4px)}
.platform-carousel-panel{padding-top:26px;gap:40px}
.platform-carousel-caption{margin-top:14px}

/* Aperto fino pro palco caber até em viewport de 720px de altura. */
.platform-stage{padding:46px 0 14px}
.platform-carousel-panel{padding-top:16px}
.platform-carousel-caption{margin-top:10px}

/* O trilho do sticky: o shell precisa preencher a seção inteira (380svh),
   senão o palco só gruda pelos poucos px de sobra do shell. */
.platform-carousel-shell{height:100%}

/* Troca de etapa anima também os textos da esquerda (h3 → corpo → destaque,
   em cascata), no mesmo espírito das camadas do mockup. */
.platform-carousel-copy.scene-swap > * {
  animation: sceneCopyIn .55s cubic-bezier(.22,.61,.36,1) backwards;
}
.platform-carousel-copy.scene-swap > :nth-child(2){animation-delay:.09s}
.platform-carousel-copy.scene-swap > :nth-child(3){animation-delay:.18s}
@keyframes sceneCopyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.platform-carousel-copy.scene-swap > *{animation:none}}

/* Compensa o trilho que agora só começa quando o palco trava: seção mais alta
   pra cada etapa manter ~meia tela de scroll. */
.platform-overview{height:440svh}

/* Botão "Acessar" (login do app) ao lado do "Conheça a plataforma": mesmo
   pill, curva espelhada na LATERAL INFERIOR ESQUERDA (o Conheça tem a curva
   superior direita). O clone branco do header esconde os dois (.header-cta). */
.header-actions{display:flex;align-items:center;gap:10px;justify-self:end}
.header-cta-acessar{border-radius:0 0 0 24px}

/* Sem o card de depoimento (placeholder removido — ainda não há clientes pra
   citar), a seção vira coluna única: o texto ocupa a largura de leitura e as
   estatísticas seguem logo abaixo como bloco de prova. */
.testimonials-layout{grid-template-columns:1fr;gap:0}
.testimonials-copy{max-width:680px}

/* === Atendimento próximo, uso do espaço (Rafael): texto à esquerda e as 4
   estatísticas em bloco 2x2 preenchendo a direita (antes a coluna ficava
   vazia). Os stats moraram DENTRO do layout agora. */
.testimonials-layout{grid-template-columns:.95fr 1.05fr;gap:clamp(48px,7vw,110px);align-items:center}
.testimonials-layout .stats{grid-template-columns:1fr 1fr;margin:0;border-top:0;max-width:none}
.testimonials-layout .stats article{border-top:1px solid var(--mist);min-height:170px;padding:24px 24px 18px 0}
.testimonials-layout .stats article:nth-child(2n){border-right:0}
@media (max-width: 900px){
  .testimonials-layout{grid-template-columns:1fr;gap:48px}
  .testimonials-layout .stats{grid-template-columns:1fr 1fr}
}

/* (revertido a pedido do Rafael: o laranja das cunhas NUNCA some — quem
   espera o laranja sair da tela é o véu branco, controlado no site.js) */

/* Respiro nas divisórias do bloco 2x2 (Rafael): a coluna da direita ganha
   afastamento da linha vertical; números e textos não encostam mais nela. */
.testimonials-layout .stats article:nth-child(2n){padding-left:32px}
.testimonials-layout .stats article:nth-child(2n+1){padding-right:32px}

/* Links "Falar com a INVVE" (Atendimento próximo e Quem somos) ganham reação
   ao hover: cor e sublinhado viram laranja, seta dá o passinho diagonal. */
.testimonials-copy>a,.about-copy>a{transition:color .18s,border-color .18s}
.testimonials-copy>a span,.about-copy>a span{transition:transform .18s}
.testimonials-copy>a:hover,.about-copy>a:hover{color:var(--orange);border-bottom-color:var(--orange)}
.testimonials-copy>a:hover span,.about-copy>a:hover span{transform:translate(2px,-2px)}

/* === Vida nos elementos (Rafael 03/08) === */
/* "Conhecer a plataforma" (hero) e demais text-links reagem ao mouse */
.text-link{transition:color .18s,border-color .18s}
.text-link:hover{color:var(--orange);border-color:var(--orange)}
.text-link-inverse:hover{color:var(--orange)}
/* Cards da "Complexidade do mercado": levantam e o ícone dá um giro curto */
.complexity-points article{transition:transform .28s,box-shadow .28s,border-color .28s}
.complexity-points article:hover{transform:translateY(-6px);border-color:#e55a2e99;box-shadow:0 16px 34px #4a0e1712}
.complexity-points article img{transition:transform .28s}
.complexity-points article:hover img{transform:scale(1.12) rotate(-4deg)}
/* Titulos com a escrita do invve.com.br (receita extraida do site real):
   cada letra SOBE de baixo com blur se dissipando, escalonada 24ms por
   caractere (transform 880ms / opacity 700ms / blur 880ms, easing suave).
   .tw-reset zera sem transicao pra REPLAY quando a secao volta a tela. */
.tw-word{white-space:nowrap}
.tw-clip{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .1em .92em;margin:-.12em -.1em -.92em}
.tw-char{display:inline-block;opacity:0;transform:translate3d(0,.72em,0);filter:blur(6px);will-change:transform,opacity,filter;backface-visibility:hidden;transition-property:transform,opacity,filter;transition-duration:600ms,480ms,600ms;transition-timing-function:cubic-bezier(.22,.61,.36,1),cubic-bezier(.22,.61,.36,1),cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--tw-linha,0ms) + var(--tw-i,0)*var(--tw-passo,13ms))}
.tw-on .tw-char{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.tw-reset .tw-char{transition:none!important;opacity:0!important;transform:translate3d(0,.72em,0)!important;filter:blur(6px)!important}
@media (prefers-reduced-motion:reduce){.tw-char{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}}

/* === Modal de agendamento (Cal.com) — estética da casa === */
.agenda-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.agenda-modal[hidden]{display:none}
.agenda-overlay{position:absolute;inset:0;background:#4a0e17cc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.agenda-panel{position:relative;display:flex;flex-direction:column;width:min(980px,94vw);height:min(760px,88svh);background:var(--paper);border:1px solid #e55a2e66;border-radius:0 32px 0 0;box-shadow:0 30px 80px #4a0e1740;opacity:0;transform:translateY(26px);transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1)}
.agenda-modal.aberto .agenda-overlay{opacity:1}
.agenda-modal.aberto .agenda-panel{opacity:1;transform:translateY(0)}
.agenda-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 14px;border-bottom:1px solid var(--mist)}
.agenda-cabecalho .eyebrow{margin:0 0 4px}
.agenda-cabecalho strong{color:var(--bordeaux);font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.agenda-fechar{flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--paper);color:var(--orange);border:1px solid var(--orange);border-radius:0 14px 0 0;font-size:20px;line-height:1;cursor:pointer;transition:color .18s,background .18s}
.agenda-fechar:hover{background:var(--orange);color:var(--paper)}
.agenda-iframe{flex:1;width:100%;border:0;border-radius:0 0 0 0;background:#fff}
@media (prefers-reduced-motion:reduce){.agenda-overlay,.agenda-panel{transition:none}}

/* Aceleração geral leve (Rafael): reveal e cascatas ~15% mais rápidos. */
[data-reveal]{transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.25s cubic-bezier(.22,.61,.36,1)}
.platform-carousel-copy.scene-swap > *{animation-duration:.45s}
.platform-carousel-copy.scene-swap > :nth-child(2){animation-delay:.07s}
.platform-carousel-copy.scene-swap > :nth-child(3){animation-delay:.14s}
/* Subfrases digitam por PALAVRA (mesmo movimento sobe+blur), começando um
   instante depois do título da seção. */
.tw-sub{--tw-linha:900ms;--tw-passo:30ms}

/* ============================================================
   PALCO VIVO — cena "Analise" (briefing do Mateus no Canva)
   Fundo = tela real da viabilidade, ampliada e desfocada (contexto).
   Frente = peças de VERDADE em HTML/SVG: hover+tooltip no gráfico,
   flutuação leve e arrasto dentro do palco. Sem moldura de MacBook:
   a moldura espremia tudo e impedia qualquer interação.
   ============================================================ */
.platform-carousel-panel.cena-viva{grid-template-columns:.52fr 1.48fr;gap:36px}
.platform-carousel-panel.cena-viva .platform-carousel-visual{margin-right:calc(-1*clamp(28px,6vw,96px))}
.palco{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:0 34px 0 0;background:linear-gradient(155deg,#fbfaf8,#efece7)}
.palco[hidden]{display:none}
.palco-fundo{position:absolute;top:-8%;left:-8%;width:116%;height:116%;object-fit:cover;object-position:center 12%;filter:blur(10px) saturate(.8);opacity:.4}
.palco-veu{position:absolute;inset:0;background:radial-gradient(115% 85% at 46% 38%,#f7f5f200 22%,#f7f5f2e6 82%,#f7f5f2 100%)}
.palco-etiqueta{position:absolute;top:3.2cqw;left:3.4cqw;margin:0;display:flex;gap:.7em;font-family:var(--font-meta);font-size:clamp(9px,1.05cqw,13px);letter-spacing:.16em;text-transform:uppercase;color:#4a0e1785}
.palco-etiqueta em{color:var(--orange);font-style:normal}
.palco-pecas{position:absolute;inset:0}

/* --- peças flutuantes --------------------------------------- */
.peca{position:absolute;margin:0;cursor:grab;touch-action:none;will-change:transform}
.peca:active{cursor:grabbing}
.peca-inner{background:#fff;border:1px solid #4a0e1712;box-shadow:0 16px 40px #4a0e1714,0 2px 6px #4a0e170a;border-radius:0 16px 0 0;animation:pecaFlutua var(--dur,9s) ease-in-out infinite;animation-delay:var(--atraso,0s)}
.peca.arrastando{z-index:6}
.peca.arrastando .peca-inner{animation:none;box-shadow:0 26px 60px #4a0e1726}
@keyframes pecaFlutua{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@media (prefers-reduced-motion:reduce){.peca-inner{animation:none}}

.peca-rotulo{margin:0;font-family:var(--font-meta);font-size:clamp(8px,.95cqw,11px);letter-spacing:.15em;text-transform:uppercase;color:#4a0e1799}
.peca-valor{margin:.28em 0 0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--bordeaux);font-size:clamp(20px,2.9cqw,40px)}
.peca-sub{margin:.5em 0 0;font-size:clamp(9px,1.05cqw,13px);color:var(--graphite)}

/* KPI simples (Margem / Lucro) */
.peca-kpi .peca-inner{padding:1.5cqw 1.8cqw 1.6cqw}

/* Veredito com donut */
.peca-veredito .peca-inner{display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 1.8cqw}
.peca-veredito svg{flex:none;width:clamp(52px,7cqw,96px);height:auto}
.veredito-num{font-family:var(--font-display);font-weight:700;fill:var(--bordeaux)}
.veredito-de{font-family:var(--font-meta);fill:#4a0e1780}

/* Gráfico de fluxo de caixa */
.peca-grafico .peca-inner{padding:1.4cqw 1.6cqw 1.1cqw}
.grafico-topo{display:flex;align-items:baseline;justify-content:space-between;gap:1cqw;margin-bottom:.7cqw}
.grafico-titulo{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(11px,1.35cqw,17px);color:var(--bordeaux)}
.grafico-legenda{display:flex;gap:1cqw;font-family:var(--font-meta);font-size:clamp(8px,.9cqw,11px);letter-spacing:.1em;text-transform:uppercase;color:#4a0e1780}
.grafico-legenda i{display:inline-block;width:.8em;height:.8em;margin-right:.45em;vertical-align:-.05em}
.grafico-wrap{position:relative}
.grafico-wrap svg{display:block;width:100%;height:auto;overflow:visible}
.g-grade{stroke:#4a0e1712;stroke-width:1}
.g-zero{stroke:#4a0e1730;stroke-width:1}
.g-marco{stroke:#4a0e1726;stroke-width:1;stroke-dasharray:3 4}
.g-rotulo{font-family:var(--font-meta);font-size:8px;fill:#4a0e1770}
.g-marco-rotulo{font-family:var(--font-meta);font-size:8px;fill:#4a0e1785}
.g-linha{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-cursor{stroke:#4a0e1740;stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s}
.g-ponto{opacity:0;transition:opacity .15s}
.grafico-wrap.ativo .g-cursor,.grafico-wrap.ativo .g-ponto{opacity:1}
.grafico-dica{position:absolute;top:0;left:0;pointer-events:none;opacity:0;transform:translate(-50%,-118%);transition:opacity .16s;background:#fff;border:1px solid #4a0e1717;box-shadow:0 10px 26px #4a0e1720;border-radius:0 10px 0 0;padding:.55em .75em;white-space:nowrap}
.grafico-wrap.ativo .grafico-dica{opacity:1}
.grafico-dica b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(11px,1.35cqw,17px);color:var(--green-forte,#0e9256);letter-spacing:-.01em}
.grafico-dica b.negativo{color:#cf4a45}
.grafico-dica small{display:block;font-family:var(--font-meta);font-size:clamp(8px,.9cqw,11px);letter-spacing:.1em;color:#4a0e1785;text-transform:uppercase}

/* Empilhado no mobile: sem palco absoluto, sem arrasto. */
@media (max-width:900px){
  .platform-carousel-panel.cena-viva{grid-template-columns:1fr}
  .platform-carousel-panel.cena-viva .platform-carousel-visual{margin-right:0}
  .palco{aspect-ratio:auto;padding:64px 16px 20px;border-radius:0 22px 0 0}
  .palco-pecas{position:static;display:grid;gap:14px} /* palco ANTIGO (nao usado) */
  /* As peças continuam FLUTUANDO dentro da tela do notebook também no
     celular (Rafael, 04/08): "mesmo que fique pequenas coisas, tem que
     manter como estava no desktop". A regra antiga empilhava tudo. */
  .peca{cursor:default}
  .peca-inner{animation:none}
}

/* Ajuste de encaixe do palco vivo: a ALTURA manda (nunca estoura a tela) e a
   largura sai da proporção; a coluna de texto ganha ar e o título encolhe um
   passo pra não virar 6 linhas. */
.platform-carousel-panel.cena-viva{grid-template-columns:.6fr 1.4fr;align-items:center}
.platform-carousel-panel.cena-viva .platform-carousel-copy h3{font-size:clamp(22px,2.5vw,34px)}
.palco{height:min(58svh,580px);width:auto;max-width:100%;margin-left:auto}
@media (max-width:900px){.palco{height:auto;width:100%}}

/* Rodada 2 do palco (Rafael): seção mais larga, fundo mostrando a viabilidade
   INTEIRA (menos zoom, menos blur, mais presença) e cards enxutos — sem a
   folga à direita que sobrava. */
.platform-carousel-panel.cena-viva{grid-template-columns:.46fr 1.54fr;gap:30px}
.palco{height:min(64svh,660px)}
.palco-fundo{top:-3%;left:-3%;width:106%;height:106%;object-fit:cover;object-position:center;filter:blur(7px) saturate(.85);opacity:.5}
.palco-veu{background:radial-gradient(120% 92% at 48% 42%,#f7f5f200 34%,#f7f5f2d9 84%,#f7f5f2 100%)}
.peca-kpi .peca-inner{padding:1.2cqw 1.3cqw 1.2cqw}
.peca-valor{font-size:clamp(18px,2.4cqw,32px)}
.peca-veredito .peca-inner{gap:1cqw;padding:1.1cqw 1.3cqw}
.peca-veredito svg{width:clamp(46px,6cqw,80px)}
.peca-grafico .peca-inner{padding:1.2cqw 1.3cqw .9cqw}

/* ============================================================
   RODADA 3 (Rafael 04/08): o MacBook volta a ser a moldura — só um pouco
   maior — e o FUNDO DA TELA dele passa a ser a tela cheia da etapa,
   desfocada no nível do Canva. As peças interativas (gráfico, KPIs, veredito)
   vivem DENTRO dessa tela, arrastáveis.
   ============================================================ */
.palco{display:none}
.platform-carousel-panel,.platform-carousel-panel.cena-viva{grid-template-columns:.64fr 1.36fr;gap:44px;align-items:center}
.platform-carousel-panel.cena-viva .platform-carousel-visual{margin-right:0}
.platform-carousel-panel.cena-viva .platform-carousel-copy h3{font-size:clamp(24px,2.9vw,42px)}
.macbook-mockup{padding:14px 0 8px}
/* papel de parede: a tela inteira da etapa, opaca e desfocada */
.platform-scene img.cena-fundo{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:blur(3px) saturate(.9);opacity:.4;animation:none;transform:none;border-radius:0}
/* as peças passam a medir pelo container da tela do notebook */
.platform-scene-carousel{container-type:inline-size}
.peca-kpi .peca-inner{padding:1.6cqw 1.8cqw}
.peca-valor{font-size:clamp(15px,3cqw,30px)}
.peca-rotulo{font-size:clamp(7px,1.15cqw,11px)}
.peca-sub{font-size:clamp(8px,1.25cqw,12px)}
.peca-veredito .peca-inner{gap:1.3cqw;padding:1.4cqw 1.7cqw}
.peca-veredito svg{width:clamp(38px,7cqw,74px)}
.peca-grafico .peca-inner{padding:1.5cqw 1.7cqw 1.1cqw}
.grafico-titulo{font-size:clamp(9px,1.6cqw,16px)}
.grafico-legenda{font-size:clamp(7px,1.05cqw,11px)}
.grafico-dica b{font-size:clamp(10px,1.6cqw,16px)}
.grafico-dica small{font-size:clamp(7px,1.05cqw,11px)}

/* Fundo da tela mais presente (estava apagado demais): 40% -> 66% e desfoque
   um pouco menor, pra dar pra reconhecer a tela sem competir com as peças. */
.platform-scene img.cena-fundo{opacity:.66;filter:blur(2.4px) saturate(.95)}

/* Meio-termo: 66% -> 55%. */
.platform-scene img.cena-fundo{opacity:.55}

/* ============================================================
   RODADA 4 (Rafael 04/08) — "dê um passo atrás": peças fiéis à tela do app.
   Gráfico panorâmico sem título/legenda, donut com GRADIENTE de cor, fontes
   no tamanho real, e as 4 etapas com elementos que funcionam.
   ============================================================ */
/* fundo mais visível, como no Canva */
.platform-scene img.cena-fundo{opacity:.78;filter:blur(1.6px) saturate(1)}

/* --- tipografia das peças (padrão do app: rótulo cinza, valor preto) --- */
.peca-inner{border-radius:12px;box-shadow:0 14px 34px #4a0e1712,0 1px 3px #4a0e170f;border-color:#4a0e170f}
.peca-rotulo{font-size:clamp(7px,1.25cqw,13px);letter-spacing:.16em;color:#8a8580}
.peca-valor{color:#141414;font-size:clamp(16px,3.6cqw,40px);letter-spacing:-.03em}
.peca-sub{color:#8a8580;font-size:clamp(8px,1.35cqw,14px)}
.peca-kpi .peca-inner{padding:1.5cqw 1.9cqw 1.6cqw}
.peca-frase{margin:.35em 0 0;font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(9px,1.7cqw,19px);letter-spacing:-.01em}

/* --- gráfico: papel do app (sem título, panorâmico, fontes maiores) --- */
.peca-grafico .peca-inner{padding:1.1cqw 1.2cqw .8cqw}
.g-rotulo{font-size:13px;fill:#9b9691}
.g-marco-rotulo{font-size:12px;fill:#b3aea8}
.g-grade{stroke:#4a0e170f}
.g-zero{stroke:#4a0e1726}
.g-marco{stroke:#4a0e1726;stroke-dasharray:3 4}
.g-linha{stroke-width:2.4}
.grafico-dica{transform:translate(-50%,-124%);border-radius:10px;padding:.6em .8em;box-shadow:0 12px 30px #4a0e171f;border-color:#4a0e1712}
.grafico-dica small{display:block;font-family:var(--font-body);font-size:clamp(8px,1.3cqw,14px);letter-spacing:0;text-transform:none;color:#9b9691;margin-bottom:.15em}
.grafico-dica p{display:flex;align-items:center;gap:.4em;margin:.12em 0 0}
.grafico-dica b{font-family:var(--font-body);font-size:clamp(9px,1.55cqw,17px);font-weight:700;letter-spacing:-.01em}
.grafico-dica p span{font-size:clamp(8px,1.3cqw,14px);color:#6b6660}
.grafico-dica p i{width:.55em;height:.55em;border-radius:50%;display:inline-block}

/* --- donut do veredito com gradiente (vermelho → verde), como no app --- */
.peca-veredito .peca-inner{display:flex;align-items:center;gap:1.5cqw;padding:1.4cqw 1.8cqw}
.donut{flex:none;width:clamp(44px,8.6cqw,96px);aspect-ratio:1;border-radius:50%;position:relative;
  background:conic-gradient(#0e9256 0%,#8ab34a 18%,#e0c63e 36%,#e58a3a 58%,#cf4a45 var(--pct,81%),#e7e4de var(--pct,81%),#e7e4de 100%);
  -webkit-mask:radial-gradient(circle,#0000 61%,#000 62%);mask:radial-gradient(circle,#0000 61%,#000 62%);
  transform:scaleX(-1)}
.donut-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center;transform:scaleX(-1)}
.donut-centro strong{display:block;font-family:var(--font-display);font-weight:700;color:#141414;font-size:clamp(15px,3.1cqw,34px);line-height:1;letter-spacing:-.03em}
.donut-centro small{display:block;font-family:var(--font-meta);color:#9b9691;font-size:clamp(6px,1cqw,11px);letter-spacing:.12em;margin-top:.25em}

/* --- fontes de funding: hover verde; clique fixa (pedido do Mateus) --- */
.peca-funding .peca-inner{padding:1.2cqw 1.5cqw 1.3cqw;transition:background .18s,border-color .18s,box-shadow .18s}
.peca-funding:hover .peca-inner,.peca-funding.fixado .peca-inner{background:#f0faf4;border-color:#0e925640}
.peca-funding.fixado .peca-inner{box-shadow:0 14px 34px #0e925620,0 0 0 1px #0e925633}
.funding-topo{display:flex;align-items:center;gap:.7cqw}
.funding-topo strong{font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(9px,1.65cqw,18px);letter-spacing:-.01em}
.tag-uso{font-family:var(--font-meta);font-size:clamp(6px,.95cqw,10px);letter-spacing:.1em;text-transform:uppercase;color:#0e9256;background:#0e925617;border-radius:4px;padding:.25em .5em}
.funding-custo{margin-left:auto;text-align:right;line-height:1.15}
.funding-custo small{display:block;font-family:var(--font-meta);font-size:clamp(6px,.95cqw,10px);letter-spacing:.1em;text-transform:uppercase;color:#9b9691}
.funding-custo b{font-family:var(--font-display);font-weight:700;color:#0e9256;font-size:clamp(10px,1.85cqw,20px);letter-spacing:-.02em}
.funding-desc{margin:.5em 0 0;color:#6b6660;font-size:clamp(7px,1.25cqw,13px);line-height:1.4;max-width:46ch}

/* --- investidores do pipeline --- */
.peca-investidor .peca-inner{padding:1.1cqw 1.4cqw 1.2cqw}
.inv-topo{display:flex;align-items:center;gap:.7cqw}
.inv-alca{width:.5em;height:1em;flex:none;background:
  radial-gradient(circle,#c9c4bd 42%,#0000 43%) 0 0/50% 33.3% repeat}
.inv-topo strong{font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(9px,1.7cqw,19px);letter-spacing:-.01em}
.inv-match{font-family:var(--font-meta);font-size:clamp(7px,1.15cqw,12px);font-weight:600;border-radius:20px;padding:.2em .6em}
.inv-match.alto{color:#0e9256;background:#0e925618}
.inv-match.medio{color:#c98a1e;background:#e0a63e22}
.inv-match.baixo{color:#cf4a45;background:#cf4a4518}
.inv-valor{margin-left:auto;font-family:var(--font-display);font-weight:700;color:#141414;font-size:clamp(9px,1.7cqw,19px);letter-spacing:-.02em}
.inv-acao{margin:.55em 0 0;color:#6b6660;font-size:clamp(7px,1.3cqw,14px);display:flex;gap:.4em}
.inv-acao span{color:#9b9691}

/* --- barras previsto × realizado, com período clicável --- */
.peca-barras .peca-inner{padding:1.1cqw 1.3cqw .9cqw}
.barras-topo{display:flex;align-items:center;gap:1cqw;margin-bottom:.6cqw}
.barras-topo strong{font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(9px,1.5cqw,16px)}
.barras-topo strong span{color:#9b9691;font-weight:400}
.barras-periodos{margin-left:auto;display:flex;gap:.3cqw;background:#f2f0ec;border-radius:20px;padding:.2em}
.barras-periodos button{font-family:var(--font-meta);font-size:clamp(7px,1.1cqw,12px);color:#6b6660;background:0 0;border:0;border-radius:20px;padding:.3em .8em;cursor:pointer;transition:background .16s,color .16s}
.barras-periodos button.on{background:#141414;color:#fff}
.barras-wrap svg{display:block;width:100%;height:auto}

/* ============================================================
   RODADA 5 (Rafael 04/08): gráfico FIEL ao app (fonte do sistema, linhas
   verticais sutis, marco "hoje"), cards enxutos, donut com o número de volta
   (a máscara estava comendo o centro) e papel de parede arrastável.
   ============================================================ */
/* — gráfico: mesma tipografia da tela do app (Inter, não mono) — */
.g-rotulo{font-family:var(--font-body);font-size:14px;fill:#a19c96;letter-spacing:0}
.g-marco-rotulo{font-family:var(--font-body);font-size:12px;fill:#b8b3ad;letter-spacing:0}
.g-marco{stroke:#4a0e1720;stroke-width:1;stroke-dasharray:2 4}
.g-hoje{stroke:#4a0e1745;stroke-dasharray:5 4}
.g-grade{stroke:#4a0e170d}
.g-linha{stroke-width:2.2}

/* — cards menores: menos caixa pra pouca informação — */
.peca-valor{font-size:clamp(14px,2.9cqw,32px)}
.peca-rotulo{font-size:clamp(6px,1.05cqw,11px)}
.peca-sub{font-size:clamp(7px,1.15cqw,12px)}
.peca-kpi .peca-inner{padding:1.1cqw 1.4cqw 1.2cqw}

/* — donut: número de volta (centro FORA da máscara) — */
.peca-veredito .peca-inner{gap:1.1cqw;padding:1.1cqw 1.4cqw}
.donut-wrap{flex:none;position:relative;width:clamp(38px,7.4cqw,82px);aspect-ratio:1}
.donut{width:100%;height:100%}
.donut-centro{transform:none}
.donut-centro strong{font-size:clamp(13px,2.7cqw,30px)}
.donut-centro small{font-size:clamp(5px,.88cqw,10px)}
.peca-frase{font-size:clamp(8px,1.5cqw,17px)}

/* — papel de parede: trilho arrastável na vertical — */
.cena-trilho{position:absolute;inset:0;overflow:hidden;cursor:grab}
.cena-trilho.puxando{cursor:grabbing}
.platform-scene img.cena-fundo{position:absolute;left:0;top:0;width:100%;height:auto;object-fit:fill;will-change:transform}

/* ============================================================
   RODADA 6 (Rafael 04/08) — padronização geral:
   • cards enxutos (padding e fontes menores em TODAS as cenas)
   • gráficos com o cabeçalho real do app (título + subtítulo + controles)
   • funil da captação funcional (nº ↔ R$) e match explicado no hover
   • barras previsto×executado no formato original (nav, períodos, séries)
   ============================================================ */
/* — padrão dos cards — */
.peca-inner{border-radius:11px;box-shadow:0 12px 30px #4a0e1710,0 1px 3px #4a0e170d}
.peca-kpi .peca-inner{padding:.9cqw 1.15cqw 1cqw}
.peca-rotulo{font-size:clamp(6px,.98cqw,10px);letter-spacing:.14em}
.peca-valor{font-size:clamp(13px,2.5cqw,27px)}
.peca-sub{font-size:clamp(6px,1.02cqw,11px)}

/* — cabeçalho dos gráficos de linha (igual ao app) — */
.graf-cabec{display:flex;align-items:flex-start;justify-content:space-between;gap:1cqw;margin-bottom:.7cqw}
.graf-cabec strong{display:block;font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(9px,1.5cqw,16px);letter-spacing:-.01em}
.graf-cabec small{display:block;margin-top:.15em;color:#9b9691;font-size:clamp(6px,1.02cqw,11px)}
.graf-toggle{flex:none;display:flex;gap:.2cqw;background:#f2f0ec;border-radius:20px;padding:.18em}
.graf-toggle button{font-family:var(--font-body);font-size:clamp(6px,1cqw,11px);color:#6b6660;background:0 0;border:0;border-radius:20px;padding:.3em .8em;cursor:pointer;white-space:nowrap;transition:background .16s,color .16s}
.graf-toggle button.on{background:#141414;color:#fff}
.peca-grafico .peca-inner{padding:1cqw 1.1cqw .75cqw}

/* — funding: fontes menores e custo colado no conteúdo — */
.peca-funding .peca-inner{padding:.9cqw 1.15cqw 1cqw}
.funding-topo{gap:.5cqw}
.funding-topo strong{font-size:clamp(8px,1.4cqw,15px)}
.tag-uso{font-size:clamp(5px,.85cqw,9px);padding:.2em .45em}
.funding-custo small{font-size:clamp(5px,.82cqw,9px)}
.funding-custo b{font-size:clamp(9px,1.55cqw,17px)}
.funding-desc{margin-top:.35em;font-size:clamp(6px,1.02cqw,11px);line-height:1.35;max-width:40ch}

/* — investidor: card compacto + explicação do match no hover — */
.peca-investidor .peca-inner{padding:.75cqw 1.1cqw .8cqw}
.inv-topo{gap:.55cqw}
.inv-topo strong{font-size:clamp(8px,1.45cqw,16px)}
.inv-match{position:relative;cursor:help;font-size:clamp(6px,1cqw,11px);padding:.18em .5em}
.inv-valor{font-size:clamp(8px,1.45cqw,16px)}
.inv-acao{margin-top:.4em;font-size:clamp(6px,1.05cqw,12px)}
.match-dica{position:absolute;left:50%;bottom:calc(100% + .5em);transform:translateX(-50%);z-index:9;
  min-width:16em;display:grid;gap:.25em;padding:.7em .8em;background:#fff;border:1px solid #4a0e1712;
  border-radius:9px;box-shadow:0 14px 34px #4a0e1724;opacity:0;visibility:hidden;transition:opacity .16s;
  font-family:var(--font-body);font-size:clamp(6px,1cqw,11px);color:#4a4a4a;text-align:left;font-weight:400}
.inv-match:hover .match-dica,.inv-match:focus-visible .match-dica{opacity:1;visibility:visible}
.match-dica em{font-family:var(--font-meta);font-style:normal;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:#9b9691;margin-bottom:.2em}
.match-dica span{padding-left:1.1em;position:relative}
.match-dica span:before{position:absolute;left:0;font-weight:700}
.match-dica .ok{color:#2c6a4c}.match-dica .ok:before{content:"✓";color:#0e9256}
.match-dica .nao{color:#8a5a58}.match-dica .nao:before{content:"×";color:#cf4a45}

/* — funil da captação — */
.peca-funil .peca-inner{padding:.9cqw 1.15cqw 1cqw}
.funil-cabec{display:flex;align-items:center;gap:1cqw;margin-bottom:.7cqw}
.funil-cabec strong{font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(8px,1.4cqw,15px)}
.funil-modo{margin-left:auto;font-family:var(--font-body);font-size:clamp(6px,.98cqw,11px);color:#6b6660;background:#f2f0ec;border:0;border-radius:20px;padding:.3em .8em;cursor:pointer;white-space:nowrap}
.funil-modo:hover{background:#e7e4de}
.funil-barra{display:flex;gap:2px;height:clamp(8px,1.4cqw,15px);border-radius:20px;overflow:hidden}
.funil-barra span{display:block;transition:flex .4s cubic-bezier(.22,.61,.36,1)}
.funil-legenda{list-style:none;margin:.7cqw 0 0;padding:0;display:grid;gap:.28em}
.funil-legenda li{display:flex;align-items:center;gap:.45em;font-size:clamp(6px,1.02cqw,11px);color:#6b6660}
.funil-legenda i{width:.55em;height:.55em;border-radius:2px;flex:none}
.funil-legenda b{margin-left:auto;color:#141414;font-family:var(--font-display);font-weight:600}
.funil-total{margin:.6cqw 0 0;padding-top:.5cqw;border-top:1px solid #4a0e170f;font-size:clamp(6px,1.02cqw,11px);color:#9b9691}

/* — barras: cabeçalho, nav, períodos e séries como na tela — */
.peca-barras .peca-inner{padding:.9cqw 1.1cqw .8cqw}
.barras-cabec{padding-bottom:.6cqw;border-bottom:1px solid #4a0e170f}
.barras-cabec strong{font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(8px,1.45cqw,16px)}
.barras-cabec strong span{color:#9b9691;font-weight:400}
.barras-controles{display:flex;align-items:center;gap:.6cqw;margin:.7cqw 0 .5cqw}
.barras-nav{display:flex;gap:.3cqw}
.barras-nav button{width:clamp(13px,2.1cqw,24px);aspect-ratio:1;display:grid;place-content:center;border:0;border-radius:50%;background:#f2f0ec;color:#4a4a4a;font-size:clamp(7px,1.2cqw,13px);cursor:pointer;line-height:1}
.barras-nav button:hover{background:#e7e4de}
.barras-periodos{display:flex;gap:.25cqw;background:0 0;border-radius:0;padding:0}
.barras-periodos button{font-family:var(--font-body);font-size:clamp(6px,1cqw,11px);color:#9b9691;background:0 0;border:1px solid #0000;border-radius:20px;padding:.3em .75em;cursor:pointer}
.barras-periodos button.on{background:#f2f0ec;color:#141414;border-color:#4a0e1712}
.barras-series{margin-left:auto;display:flex;gap:.35cqw}
.barras-series button{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-body);font-size:clamp(6px,1cqw,11px);color:#6b6660;background:#f7f5f2;border:0;border-radius:20px;padding:.3em .75em;cursor:pointer;opacity:.55;transition:opacity .16s}
.barras-series button.on{opacity:1}
.barras-series button i{width:.55em;height:.55em;border-radius:50%;background:#b9d9c8}
.barras-series button.escuro i{background:#0e9256}
.barras-wrap svg{display:block;width:100%;height:auto}

/* ============================================================
   RODADA 7 (Rafael 04/08): gráficos com a configuração REAL do app.
   ============================================================ */
/* toggle de cenário vira legenda quando há 2 séries */
.graf-toggle button i{width:.5em;height:.5em;border-radius:50%;display:inline-block;margin-right:.35em}
.graf-toggle button:not(.on){opacity:.5}
.graf-toggle button:not(.on) i{filter:grayscale(1)}

/* funil da captação (geometria do app) */
.peca-funil .peca-inner{padding:.9cqw 1.15cqw 1cqw}
.funil-cabec{display:flex;align-items:center;gap:1cqw;margin-bottom:.6cqw}
.funil-cabec strong{font-family:var(--font-display);font-weight:600;color:#141414;font-size:clamp(8px,1.4cqw,15px)}
.funil-modo{margin-left:auto;display:flex;gap:.15cqw;background:#f2f0ec;border-radius:20px;padding:.18em}
.funil-modo button{font-family:var(--font-body);font-size:clamp(6px,1cqw,11px);color:#6b6660;background:0 0;border:0;border-radius:20px;padding:.3em .8em;cursor:pointer;white-space:nowrap}
.funil-modo button.on{background:#141414;color:#fff}
.funil-tela svg{display:block;width:100%;height:auto}
.fn-etapa{font-family:var(--font-body);font-size:13px;font-weight:600;fill:#141414}
.fn-rot{font-family:var(--font-body);font-size:12px;fill:#9b9691}

/* períodos das barras: colados no nav (o margin-left:auto antigo empurrava pro meio) */
.barras-periodos{margin-left:0}

/* Rodada 8: eixos/marcos na intensidade do app (usa --foreground, não cinza
   claro) e grade um pouco mais presente. */
.g-rotulo{fill:#3f3b37}
.g-marco-rotulo{fill:#6f6a65}
.g-grade{stroke:#4a0e1714}
.g-zero{stroke:#4a0e1730}
.g-marco{stroke:#4a0e1733}
.g-hoje{stroke:#4a0e1759}

/* ============================================================
   Nada dentro do "computadorzinho" é selecionável (Rafael 04/08): arrastar
   um card ou dar duplo clique estava grifando textos soltos em laranja.
   Vale pras 4 etapas — a seleção continua normal no resto da página.
   ============================================================ */
.macbook-screen,.macbook-screen *{-webkit-user-select:none;user-select:none}
.macbook-screen img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.cena-trilho{pointer-events:auto}

/* ============================================================
   ESTRUTURE — cards de funding (Rafael 04/08): sem hover verde (só o mais
   barato fica destacado), card comprimido (sem o vão no meio) e fontes
   um passo menores.
   ============================================================ */
.peca-funding:hover .peca-inner{background:#fff;border-color:#4a0e170f;box-shadow:0 14px 34px #4a0e1712,0 1px 3px #4a0e170f}
.peca-funding.fixado .peca-inner{background:#f0faf4;border-color:#0e925640;box-shadow:0 14px 34px #0e925618,0 0 0 1px #0e925630}
.peca-funding .peca-inner{padding:.95cqw 1.15cqw 1cqw}
.funding-topo{gap:.5cqw;align-items:baseline}
.funding-topo strong{font-size:clamp(8px,1.35cqw,15px)}
.tag-uso{font-size:clamp(5px,.8cqw,9px);padding:.2em .45em}
.funding-custo small{font-size:clamp(5px,.8cqw,9px)}
.funding-custo b{font-size:clamp(8px,1.5cqw,17px)}
.funding-desc{margin-top:.35em;font-size:clamp(6px,1.05cqw,11px);line-height:1.35;max-width:38ch}

/* O card passa a ter a largura do CONTEÚDO (shrink-to-fit) e o custo cola no
   título com gap fixo — era o margin-left:auto que abria o vão no meio. */
.peca-funding{width:auto!important;max-width:46%}
.peca-funding .peca-inner{display:inline-block}
.funding-custo{margin-left:1.6cqw}
.funding-desc{max-width:34ch}

/* Cabeçalho do gráfico de cenários (Estruture) — igual à tela do app:
   rótulo à esquerda, GRÁFICO|TABELA à direita e legenda centralizada. */
.graf-cabec-cenarios{align-items:center;margin-bottom:.35cqw}
.graf-etiqueta{margin:0;font-family:var(--font-meta);font-size:clamp(6px,.95cqw,11px);letter-spacing:.14em;text-transform:uppercase;color:#8a8580}
.graf-vistas{position:relative;margin-left:auto;display:flex;gap:.2cqw;background:#f2f0ec;border-radius:6px;padding:.18em}
.graf-vistas button{font-family:var(--font-body);font-size:clamp(6px,1cqw,11px);color:#6b6660;background:0 0;border:0;border-radius:5px;padding:.28em .7em;cursor:pointer;white-space:nowrap}
.graf-vistas button.on{background:#fff;color:#141414;box-shadow:0 1px 2px #4a0e1714}
.graf-dica-tabela{position:absolute;right:0;top:calc(100% + .5em);z-index:4;width:max-content;max-width:26ch;background:#141414;color:#fff;font-family:var(--font-body);font-size:clamp(6px,1cqw,11px);line-height:1.35;border-radius:8px;padding:.5em .7em;opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .16s,transform .16s}
.graf-vistas button[data-vista="tb"]:hover ~ .graf-dica-tabela,
.graf-vistas button[data-vista="tb"]:focus-visible ~ .graf-dica-tabela{opacity:1;transform:translateY(0)}
.graf-legenda{display:flex;justify-content:center;gap:1.4cqw;margin-bottom:.2cqw}
.graf-legenda button{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-body);font-size:clamp(6px,1.05cqw,12px);color:#3f3b37;background:0 0;border:0;cursor:pointer;padding:.15em .2em}
.graf-legenda button i{width:.55em;height:.55em;border-radius:50%}
.graf-legenda button:not(.on){opacity:.42}
.graf-legenda button:not(.on) i{filter:grayscale(1)}

/* Tooltip do gráfico não pode encolher perto da borda direita (Rafael 04/08):
   sem largura própria, o elemento absoluto usa shrink-to-fit e o navegador
   espremia o texto em várias linhas. max-content trava a largura natural —
   ele vaza e é cortado, igual acontece do lado esquerdo. */
.grafico-dica{width:max-content;max-width:none}
.grafico-dica p{flex-wrap:nowrap;white-space:nowrap}
.grafico-dica b,.grafico-dica small,.grafico-dica p span{white-space:nowrap}

/* Tooltip do custo por R$ 1 mil (Estruture) — mesma mecânica do Smart Match:
   explica DE ONDE vem o número, que é o raciocínio da tela de funding. */
.funding-custo{position:relative;cursor:help;outline:none}
.custo-dica{position:absolute;right:0;bottom:calc(100% + .6em);z-index:9;display:flex;flex-direction:column;gap:.35em;
  width:max-content;max-width:34ch;text-align:left;background:#fff;border:1px solid #4a0e1714;border-radius:10px;
  box-shadow:0 16px 38px #4a0e1726;padding:.7em .8em;opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s;
  font-family:var(--font-body);font-size:clamp(6px,1.05cqw,12px);line-height:1.45;color:#3f3b37;white-space:normal;font-weight:400}
.funding-custo:hover .custo-dica,.funding-custo:focus-visible .custo-dica{opacity:1;visibility:visible}
.custo-dica em{font-family:var(--font-meta);font-style:normal;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:#9b9691}
.custo-selo{align-self:flex-start;font-family:var(--font-meta);font-size:.82em;letter-spacing:.08em;text-transform:uppercase;
  color:#0e9256;background:#0e925617;border-radius:4px;padding:.25em .5em}

/* =========================================================================
   RODADA 9 - Capte (Rafael 04/08): funil idêntico ao da tela de captação
   (gradiente por banda, rótulo "n · %", legenda de fechamento e tooltip por
   etapa) + cards de investidor enxutos, no mesmo padrão da Estruture.
   ========================================================================= */

/* -- legenda de fechamento (soma das etapas, muda com Quantidade x Valor) -- */
.funil-chaves{list-style:none;margin:.55cqw 0 0;padding:.55cqw 0 0;border-top:1px solid #4a0e170e;
  display:flex;flex-wrap:wrap;gap:.35cqw 1.5cqw;font-family:var(--font-body);
  font-size:clamp(6px,1cqw,11px);color:#6b6660}
.funil-chaves li{display:flex;align-items:center;gap:.45em;white-space:nowrap}
.funil-chaves i{width:.52em;height:.52em;border-radius:50%;flex:none}
.funil-chaves b{color:#141414;font-weight:600}
.funil-chaves .perda,.funil-chaves .perda b{color:#cf4a45}

/* -- tooltip por etapa: área invisível sobre a barra + o rótulo dela -- */
.funil-tela{position:relative}
.fn-alvo{position:absolute;cursor:help}
.fn-dica{position:absolute;transform:translateX(-50%);z-index:12;
  display:flex;flex-direction:column;gap:.3em;width:max-content;text-align:left;
  background:#fff;border:1px solid #4a0e1714;border-radius:10px;box-shadow:0 16px 38px #4a0e1726;
  padding:.7em .8em;opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s;
  font-family:var(--font-body);font-size:clamp(6px,1.05cqw,12px);line-height:1.4;color:#3f3b37;font-weight:400}
.fn-dica.fim{transform:none}
.fn-alvo:hover .fn-dica{opacity:1;visibility:visible}
.fn-dica em{font-family:var(--font-meta);font-style:normal;font-size:.85em;letter-spacing:.12em;
  text-transform:uppercase;color:#9b9691}
.fn-dica > span{display:flex;justify-content:space-between;gap:1.8em;color:#6b6660}
.fn-dica b{color:#141414;font-weight:600}
.fn-dica .perda,.fn-dica .perda b{color:#cf4a45}

/* -- investidor: card sem sobra interna, fontes menores (mesmo tratamento
      que os cards de funding levaram na Estruture) -- */
.peca-investidor{width:auto!important;max-width:44%}
.peca-investidor .peca-inner{display:inline-block;padding:.6cqw .85cqw .65cqw}
.inv-topo{gap:.45cqw}
.inv-topo strong{font-size:clamp(7px,1.2cqw,13px)}
.inv-match{font-size:clamp(5px,.85cqw,9px);padding:.16em .45em}
.inv-valor{margin-left:1.4cqw;font-size:clamp(7px,1.2cqw,13px)}
.inv-acao{margin-top:.3em;font-size:clamp(5px,.9cqw,10px)}
.inv-alca{width:.42em}
.match-dica{min-width:0;width:max-content;max-width:30ch;border-radius:10px;
  box-shadow:0 16px 38px #4a0e1726;font-size:clamp(6px,1.05cqw,12px);line-height:1.4}

/* =========================================================================
   RODADA 10 - alcance do hover (Rafael 04/08): "só no valor faz eu pensar que
   muitas pessoas nem vão ver que tem esse hover". O gatilho passa a ser o CARD
   INTEIRO (funding e investidor) e, no funil, o gráfico inteiro por faixas.
   O card sob o mouse sobe na pilha para a dica nunca abrir atrás do vizinho.
   ========================================================================= */
.peca-funding:hover,.peca-investidor:hover{z-index:20}
.peca-funding:hover .custo-dica,.funding-custo:focus-visible .custo-dica{opacity:1;visibility:visible}
.peca-investidor:hover .match-dica,.inv-match:focus-visible .match-dica{opacity:1;visibility:visible}
.peca-funding .funding-custo,.peca-investidor .inv-match{cursor:inherit}

/* =========================================================================
   RODADA 11 - papel de parede fixo (Rafael 04/08): o fundo deixa de ser
   arrastável. Fica ancorado no topo e cortado pelo trilho - exatamente o
   enquadramento que já aparecia antes de qualquer arrasto.
   ========================================================================= */
.cena-trilho{cursor:default;pointer-events:none}
.cena-trilho.puxando{cursor:default}

/* =========================================================================
   RODADA 12 - Acompanhe (Rafael 04/08): mesma lógica das outras três cenas.
   Dica por mês no gráfico de barras, KPI que encolhe pro conteúdo (a fonte já
   era a mesma - o que destoava era a sobra do card) e hover explicando o número.
   ========================================================================= */

/* -- dica do mês: faixa invisível por coluna, cobrindo a altura do plot -- */
.barras-wrap{position:relative}
.bar-alvo{position:absolute;cursor:help}
.bar-dica{position:absolute;top:6%;z-index:12;display:flex;flex-direction:column;gap:.3em;
  width:max-content;text-align:left;background:#fff;border:1px solid #4a0e1714;border-radius:10px;
  box-shadow:0 16px 38px #4a0e1726;padding:.7em .8em;opacity:0;visibility:hidden;
  transition:opacity .16s,visibility .16s;font-family:var(--font-body);
  font-size:clamp(6px,1.05cqw,12px);line-height:1.4;color:#3f3b37;font-weight:400}
.bar-dica.meio{transform:translateX(-50%)}
.bar-alvo:hover .bar-dica{opacity:1;visibility:visible}
.bar-dica em{font-family:var(--font-meta);font-style:normal;font-size:.85em;letter-spacing:.12em;
  text-transform:uppercase;color:#9b9691}
.bar-dica > span{display:flex;align-items:center;gap:.5em;color:#6b6660;white-space:nowrap}
.bar-dica i{width:.5em;height:.5em;border-radius:50%;flex:none}
.bar-dica b{margin-left:auto;padding-left:1.4em;color:#141414;font-weight:600}

/* -- setas da janela de meses -- */
.barras-nav button:disabled{opacity:.3;cursor:default}

/* -- KPI: sem sobra interna e com a explicação do número no hover do card -- */
.peca-kpi.enxuto{width:auto!important;max-width:44%}
.peca-kpi.enxuto .peca-inner{display:inline-block}
.peca-kpi .peca-inner{position:relative}
.kpi-dica{position:absolute;right:0;bottom:calc(100% + .6em);z-index:12;display:flex;flex-direction:column;gap:.35em;
  width:max-content;max-width:34ch;text-align:left;background:#fff;border:1px solid #4a0e1714;border-radius:10px;
  box-shadow:0 16px 38px #4a0e1726;padding:.7em .8em;opacity:0;visibility:hidden;
  transition:opacity .16s,visibility .16s;font-family:var(--font-body);
  font-size:clamp(6px,1.05cqw,12px);line-height:1.45;color:#3f3b37;white-space:normal;font-weight:400}
.peca-kpi:hover{z-index:20}
.peca-kpi:hover .kpi-dica{opacity:1;visibility:visible}
.kpi-dica em{font-family:var(--font-meta);font-style:normal;font-size:.85em;letter-spacing:.12em;
  text-transform:uppercase;color:#9b9691}
.bar-dica .bar-nota{display:block;color:#9b9691;font-style:italic;padding-top:.15em}
/* dica do Veredito segue a mesma mecânica do KPI (Rafael 04/08: os cards da
   primeira cena tinham ficado sem explicação nenhuma) */
.peca-veredito .peca-inner{position:relative}
.peca-veredito:hover{z-index:20}
.peca-veredito:hover .kpi-dica{opacity:1;visibility:visible}
/* dica sem espaço acima vira para baixo (card no topo da tela) */
.kpi-dica.abaixo,.custo-dica.abaixo,.match-dica.abaixo{bottom:auto;top:calc(100% + .6em)}
/* remate do Smart Match: a decisão que o percentual sugere */
.match-remate{display:block;margin-top:.45em;padding-top:.45em;border-top:1px solid #4a0e170f;
  color:#3f3b37;font-style:italic}

/* =========================================================================
   RODADA 13 - fechamento (Rafael 04/08): foto nova em 4K + grão de filme.
   Duas camadas entre a foto (z 0) e o conteúdo (z 2): uma sombra que fecha as
   bordas e puxa a leitura para a esquerda, e o grão por cima dela. O grão é
   feTurbulence inline - sem arquivo extra e sem requisição de rede.
   ========================================================================= */
.closing-photo{filter:saturate(1.04) contrast(1.03)}
.closing:before,.closing:after{content:"";position:absolute;inset:0;pointer-events:none}
.closing:before{z-index:1;background:
  linear-gradient(90deg,#0806068c 0%,#08060647 28%,#08060612 50%,#08060600 66%),
  radial-gradient(130% 100% at 66% 34%,#08060600 42%,#08060647 80%,#08060680 100%),
  linear-gradient(180deg,#08060647 0%,#08060600 20%,#08060600 60%,#080606a6 100%)}
/* O grão deixou de ser camada CSS: ruído de 1px em hard-light virava
   "pontinho branco" (Rafael, 04/08). Agora ele está REVELADO NA FOTO -
   ruído gaussiano suavizado, do mesmo tipo que a foto do invve.com.br tem. */
.closing:after{display:none}

/* =========================================================================
   MOBILE - BLOCO A (Rafael 04/08). Diagnóstico: o CSS não tinha NENHUMA regra
   abaixo de 760px, então o celular recebia o layout de tablet espremido.
   Tudo daqui pra baixo vive dentro de media queries que o desktop nunca vê.
   ========================================================================= */

/* ---- A5. Sem mouse: hover não abre nada; quem abre é o toque ------------
   Vale para qualquer aparelho sem ponteiro fino (celular e tablet). */
@media (hover: none) {
  /* CORRIGIDO na rodada 21. Estas duas regras brigavam e a errada ganhava:
     `.peca-kpi:hover .kpi-dica` vale 0,3,0 (duas classes + a pseudo-classe) e
     `.dica-aberta .kpi-dica` vale 0,2,0. Como o toque deixa o :hover PRESO no
     ultimo elemento tocado, a peca tocada entrava em :hover, a regra de
     desligar vencia a de abrir, e a dica nunca aparecia no celular - era esse
     o "nenhum tem hover" que o Rafael via. :where() zera o peso das classes na
     primeira regra (fica so o :hover, 0,1,0) e a de abrir passa a ganhar. */
  :where(.peca-funding, .peca-investidor, .peca-kpi, .peca-veredito,
         .fn-alvo, .bar-alvo, .funding-custo, .inv-match):hover
    :where(.custo-dica, .match-dica, .kpi-dica, .fn-dica, .bar-dica) {
    opacity: 0; visibility: hidden;
  }

  .dica-aberta .custo-dica,
  .dica-aberta .match-dica,
  .dica-aberta .kpi-dica,
  .dica-aberta .fn-dica,
  .dica-aberta .bar-dica { opacity: 1; visibility: visible; }
  .dica-aberta { z-index: 30; }

  /* pista de que dá pra tocar */
  .peca-funding, .peca-investidor, .peca-kpi, .peca-veredito, .fn-alvo, .bar-alvo { cursor: pointer; }
}

@media (max-width: 760px) {
  /* ---- A1. Cunhas do hero -------------------------------------------------
     Antes: 132vw (660px) de largura com transform !important - as duas se
     encontravam no meio e pintavam a tela inteira de laranja, escondendo
     título, subtítulo e botão. Agora são duas faixas nos cantos, o laranja
     continua presente o tempo todo e o meio fica livre para o texto. */
  .hero-wedge { width: min(78vw, 420px); }
  .hero-wedge-left {
    left: -30vw; top: 0;
    transform: translate3d(calc(var(--hero-open) * -14vw), calc(-42% + var(--hero-open) * 4vh), 0) rotate(180deg) !important;
  }
  .hero-wedge-right {
    right: -30vw; top: auto; bottom: 0;
    transform: translate3d(calc(var(--hero-open) * 14vw), calc(38% - var(--hero-open) * 4vh), 0) !important;
  }

  /* ---- A2. Hero: a abertura pelo scroll VOLTA (Rafael, rodada 3) ---------
     O que eu tinha feito era travar --hero-open em 1, o que matava o efeito.
     Aqui o efeito fica, s\u00f3 que o percurso cai de 2,1 telas para 1,7 e o
     texto entra um pouco mais cedo (a curva do desktop come\u00e7ava negativa e
     era o que sumia com o t\u00edtulo no primeiro quadro). */
  .hero { height: 170svh; min-height: 1000px; }
  .hero-stage { height: 100svh; min-height: 560px; }
  /* o texto só entra quando as cunhas já abriram o centro - antes disso
     ele aparecia POR BAIXO do laranja */
  /* o texto só acende quando as cunhas já saíram do centro */
  .hero-copy { opacity: clamp(0, calc(var(--hero-open) * 3.8 - 2.66), 1); }
  /* faixa livre mais estreita (as cunhas agora param mais dentro da tela):
     o título diminui um pouco para não deixar palavra órfã na linha */
  .hero h1 { font-size: clamp(25px, 7vw, 29px); line-height: 1.16; }
  .hero-lead { font-size: 15px; line-height: 1.5; max-width: 34ch; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .button { min-height: 48px; justify-content: center; }
  /* ---- B2 (antecipado). Alvos de toque do header ------------------------ */
  .site-header .button, .header-actions .button { min-height: 44px; }

  /* ---- A3. Abas: carrossel com encaixe, sem corte e sem barra cinza ------
     Antes: 4 abas de 212px (848px em linha) num container overflow visible -
     as três últimas ficavam fora da tela e o navegador desenhava a barra de
     rolagem nativa por cima do card. */
  #platform-tabs-buttons {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 22px;
    padding: 2px 22px 8px; margin-inline: -22px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  #platform-tabs-buttons::-webkit-scrollbar { display: none; }
  #platform-tabs-buttons > button {
    flex: 0 0 78%; scroll-snap-align: center; min-height: 44px;
    white-space: normal;
  }
  .platform-tabs > p { padding-inline: 0; }

  /* ---- A4. Palco: o COMPUTADOR continua sendo o computador ---------------
     Rafael, 04/08 (rodada 3): "quero que o computador seja mais no formato de
     computador mesmo, mesmo que fique bem pequeno, igual estava antes... os
     itens dentro do computador do jeito que estavam". Ent\u00e3o a moldura, o
     papel de parede e as pe\u00e7as flutuando por cima voltam - a \u00fanica mudan\u00e7a
     de celular \u00e9 o notebook ocupar 100% da largura e o palco n\u00e3o ser mais
     um scrollytelling de 4,4 telas. */
  /* o palco volta a GRUDAR enquanto as 4 etapas passam, como no desktop
     (Rafael, rodada 6) - a seção precisa de curso de scroll para isso */
  .platform-overview { height: 330svh; padding-block: 0; }
  .platform-carousel-shell { height: 100%; position: static; min-height: 0; padding-top: 0; }
  .platform-stage {
    position: sticky; top: 0; min-height: 100svh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center; padding: 84px 0 16px;
  }
  .platform-carousel-panel { display: flex; flex-direction: column; gap: 18px; }
  .platform-carousel-copy { order: 1; }
  .platform-carousel-visual { order: 2; width: 100%; }
  .platform-carousel-copy h3 { font-size: clamp(24px, 7vw, 30px); line-height: 1.16; }
  .platform-carousel-copy p { font-size: 15px; line-height: 1.55; }
  .macbook-mockup { width: 100%; }

  /* as 4 etapas todas \u00e0 vista, em 2x2 - carrossel com peek saiu (Rafael) */
  #platform-tabs-buttons {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    overflow: visible; padding: 0; margin: 0;
  }
  #platform-tabs-buttons > button { width: 100%; min-height: 44px; height: 100%; }
  #platform-tabs-buttons > button small { font-size: 11px; line-height: 1.35; }
  /* O palco é um flex de 100svh: quando o conteúdo passa da tela, o flex
     ENCOLHE os filhos - as abas eram comprimidas e o overflow:hidden delas
     cortava a descrição no meio da frase. As abas passam a não encolher e a
     não cortar; quem cede espaço é o painel. */
  .platform-tabs { flex: none; overflow: visible; }
  #platform-tabs-buttons { align-items: stretch; }
  .platform-carousel-panel { min-height: 0; }
}

/* =========================================================================
   MOBILE - BLOCOS B e C (Rafael 04/08): legibilidade, área de toque e ritmo.
   ========================================================================= */
@media (max-width: 760px) {
  /* ---- B1. Escala tipográfica -------------------------------------------
     Piso de 12px para QUALQUER texto (a página tinha 5, 6, 8, 9, 10 e 11px)
     e títulos que paravam de crescer: os H2 estavam todos em 38px. */
  .vision h2, .outcomes h2, .testimonials h2, .about h2, .faq h2,
  .platform-carousel-heading h2 { font-size: clamp(25px, 7vw, 30px); line-height: 1.16; }
  .closing h2 { font-size: clamp(28px, 8vw, 34px); line-height: 1.14; }
  .eyebrow { font-size: 11px; letter-spacing: .16em; }
  .lede, .vision p, .outcomes p, .about p, .faq p { font-size: 15px; line-height: 1.55; }
  .vision h3, .outcomes h3 { font-size: 17px; }
  section:not(.platform-overview) :is(p, li, dd, dt, figcaption) { max-width: 66ch; }
  .closing-footer, .closing-footer a, .closing-location { font-size: 12px; }
  section:not(.platform-overview) small, .meta, .tag { font-size: 12px; }

  /* ---- B2. Alvos de toque (WCAG 2.2 AA pede 24; a meta aqui é 44) -------
     Eram 14 alvos abaixo de 44px, sendo os links do rodapé com 17px. */
  a, button, summary, [role="button"] { touch-action: manipulation; }
  .closing-footer a, .closing-footer li a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .closing-footer ul { display: grid; gap: 2px; }
  .site-header .header-cta, .header-actions .header-cta,
  .site-header .button, .hero-actions .text-link {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .faq summary, .faq button { min-height: 48px; }
  /* controles dentro das peças: 34px de altura com área de toque de 44 via
     pseudo-elemento (aumentar o botão quebraria o desenho do gráfico) */
  .graf-toggle button, .funil-modo button, .barras-periodos button,
  .barras-series button, .graf-legenda button, .graf-vistas button { position: relative; }
  .graf-toggle button::after, .funil-modo button::after, .barras-periodos button::after,
  .barras-series button::after, .graf-legenda button::after, .graf-vistas button::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  /* piso de fonte: rótulo micro em 11px (com tracking), texto em 12px.
     A página tinha 5, 6, 8, 9 e 10px espalhados - inclusive no texto dos
     botões do header e nos títulos de coluna do rodapé. */
  
  .header-cta, .header-cta span { font-size: 11px; }
  .hero-actions .text-link, .text-link, .text-link-inverse { font-size: 12px !important; }
  .founder-card-copy a, .founder-card-copy a span,
  .founder-card a, .founder-card a span, .founder-card-copy div span { font-size: 11px; }
  .platform-tabs > p { font-size: 11px; }
  
  .footer-column strong, .founder-card-copy span, .founder-card-copy strong { font-size: 11px; }
  .footer-bottom span { font-size: 11px; }
  .testimonials-copy a span, .about-copy a span { font-size: 12px; }
  /* links de texto ("Falar com a invve") também precisam de área de toque */
  .testimonials-copy a, .about-copy a { min-height: 44px; display: inline-flex; align-items: center; }

  /* ---- B3. Ritmo vertical -------------------------------------------------
     Todas as seções carregavam o padding de desktop: 104px em cima e 104
     embaixo. Só isso valia ~1,5 tela de rolagem vazia. */
  .vision, .outcomes, .testimonials, .about, .faq { padding-block: 64px; }
  .vision > * + *, .outcomes > * + * { margin-top: 0; }

  /* ---- C1. Estatísticas em coluna única ---------------------------------- */
  /* C1 virou 2 por linha na rodada 3 - a regra antiga (1 coluna) ficava com
     especificidade maior (.testimonials .stats) e vencia mesmo com important */
  .testimonials article { width: 100% !important; }
}

/* =========================================================================
   BLOCO T - TABLET (761-1080px). Não estava quebrado, estava espremido: era o
   layout de desktop reduzido - cards de resultados em 2 colunas de 165px e
   as 4 abas com 157px cada para título + duas linhas de descrição.
   ========================================================================= */
@media (min-width: 761px) and (max-width: 1080px) {
  .vision-grid, .vision > div:has(article), .outcomes-grid,
  .outcomes > div:has(article) { grid-template-columns: repeat(2, 1fr) !important; }
  .vision article, .outcomes article { min-width: 0; }

  /* abas 2x2: 330px cada em vez de 157 */
  #platform-tabs-buttons { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #platform-tabs-buttons > button { width: 100%; min-height: 44px; }

  /* o texto sobe e o palco usa a largura toda - devolve ~40% de tamanho
     para a maquete, que estava com 389px de largura */
  .platform-carousel-panel { display: flex; flex-direction: column; gap: 22px; }
  .platform-carousel-copy { order: 1; max-width: 62ch; }
  .platform-carousel-visual { order: 2; width: 100%; }
  .platform-carousel-copy h3 { font-size: clamp(28px, 4.4vw, 38px); }
  .platform-stage { padding-block: 40px 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   BLOCO P - NOTEBOOK (1081-1400px). Mesmo sintoma que o doc do zoom do app
   descreve ("o notebook encolhia a interface e continuava desenhando o layout
   de tablet"), só que aqui a queda é de FONTE: o clamp das peças chegava a
   10,4px em 1280px. O piso sobe para o palco continuar legível.
   ========================================================================= */
@media (min-width: 1081px) and (max-width: 1400px) {
  .peca-rotulo { font-size: clamp(10px, .95cqw, 11px); }
  .peca-sub, .grafico-legenda, .funil-legenda li, .funil-chaves,
  .funil-total, .graf-cabec small { font-size: clamp(10.5px, 1.05cqw, 13px); }
  .grafico-titulo, .funil-cabec strong, .barras-cabec strong,
  .graf-cabec strong { font-size: clamp(13px, 1.5cqw, 17px); }
  .funding-topo strong, .inv-topo strong, .inv-valor, .peca-frase { font-size: clamp(13px, 1.7cqw, 19px); }
  .funding-desc, .inv-acao, .grafico-dica p span { font-size: clamp(10.5px, 1.3cqw, 14px); }
  .funding-custo b { font-size: clamp(14px, 1.85cqw, 20px); }
  .custo-dica, .kpi-dica, .fn-dica, .bar-dica, .match-dica { font-size: clamp(10.5px, 1.05cqw, 12px); }
  .tag-uso, .funding-custo small, .donut-centro small { font-size: clamp(8.5px, .95cqw, 10px); }
  .funil-modo button, .graf-toggle button, .graf-legenda button,
  .barras-periodos button, .barras-series button { font-size: clamp(10px, 1cqw, 11px); }
}

/* =========================================================================
   MOBILE - CORREÇÕES DA RODADA 2 (prints do Rafael, 04/08)
   ========================================================================= */
@media (max-width: 760px) {
  /* 1. HEADER TRANSPARENTE COMENDO O CONTEÚDO
     O header é fixo e sem fundo: em cima da seção clara os títulos passavam
     por baixo dele e ficavam ilegíveis ("Nunca tivemos tanta informação"
     cortado ao meio pela logo e pelos botões). Ganha fundo sólido. */
  /* O header segue TRANSPARENTE com o recorte pelas cunhas, igual ao desktop
     (Rafael: "o de cima com fundo branco está errado, não tem esse no
     computador"). O véu branco continua entrando depois que o hero passa,
     que é o que garante leitura nas seções claras.

     A logo/botões em BRANCO: no desktop isso vem de um clone recortado pela
     geometria das cunhas. No celular a cunha é esticada no eixo Y (scaleY),
     e a máscara deixa de casar com a forma - a logo sumia (laranja sobre
     laranja). Como aqui o fundo atrás do header é UNIFORME (as duas cunhas
     fecham a tela inteira no início), não é preciso recortar nada: o clone
     branco aparece INTEIRO enquanto o laranja está atrás e desaparece
     conforme as cunhas abrem. */
  /* O recorte DENTRO da logo (parte sobre o laranja em branco, parte sobre o
     claro em laranja) é o comportamento do desktop e volta aqui. O que
     quebrava era a máscara: o SVG da cunha mantém a própria proporção e,
     esticado, deixava de casar com a forma. A versão "-esticada" do arquivo
     tem preserveAspectRatio="none" - deforma junto e a máscara bate. */
  .site-header .header-blend {
    -webkit-mask-image: url(/brand/graphics/cunha-laranja-esticada.svg), url(/brand/graphics/cunha-laranja-flip-esticada.svg);
    mask-image: url(/brand/graphics/cunha-laranja-esticada.svg), url(/brand/graphics/cunha-laranja-flip-esticada.svg);
  }
  /* título do hero não pode deixar "do" sozinho numa linha */
  .hero h1 { text-wrap: balance; }
  .vision h2, .outcomes h2, .about h2, .faq h2, .closing h2,
  .platform-carousel-heading h2, .platform-carousel-copy h3 { text-wrap: balance; }
  /* e o conteúdo que ancora por # não pode nascer embaixo dele */
  html { scroll-padding-top: 76px; }
  .vision, .platform-overview, .outcomes, .testimonials, .about, .faq { scroll-margin-top: 76px; }

  /* 4. HERO: cunhas no tamanho do celular, abrindo com o scroll ----------- */
  /* No desktop o estado zero é a TELA INTEIRA laranja e as cunhas abrem
     como cortina. Aqui era só um pedaço nos cantos - não fazia sentido
     (Rafael). Cunhas grandes o bastante para fechar a tela em open=0 e
     percurso longo o bastante para liberar o texto em open=1. */
  /* A cunha tem proporção fixa: numa tela ESTREITA e ALTA, a largura que
     fecha o centro deixa faixas brancas em cima e embaixo (era a "moldura
     branca" que sobrava no topo). Aqui ela é esticada na vertical para
     cobrir a tela inteira, como cobre no desktop. */
  /* O SVG da cunha mantém a própria proporção mesmo com object-fit, então
     esticar a CAIXA não adianta - a forma continuava no meio e sobravam
     faixas brancas em cima e embaixo. Quem estica de verdade é o scaleY,
     aplicado junto do deslocamento (abaixo). */
  .hero-wedge { width: max(118vw, 440px); height: 116vh; }
  .hero-wedge-left {
    left: -22vw; top: 50%; bottom: auto;
    transform: translate3d(calc(var(--hero-open) * -82vw), calc(-50% + var(--hero-open) * 7vh), 0) rotate(180deg) !important;
  }
  .hero-wedge-right {
    right: -22vw; top: 50%; bottom: auto;
    transform: translate3d(calc(var(--hero-open) * 82vw), calc(-50% - var(--hero-open) * 7vh), 0) !important;
  }
  /* o texto vive na faixa que sobra entre as duas cunhas abertas */
  .hero-copy { width: min(266px, 100vw - 120px) !important; max-width: none !important; }
  .hero-copy { top: 50% !important; }
  /* 5. VISÃO: um card por linha, ícone AO LADO do título e a frase embaixo
     (2+1 numa grade de dois deixava o terceiro card órfão - Rafael) ------- */
  .complexity-points { grid-template-columns: 1fr !important; gap: 8px; margin-top: 18px; }
  .complexity-points article {
    min-height: 0; padding: 12px 14px 14px; border-radius: 0 20px 0 0;
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico tit" "txt txt";
    align-items: center; gap: 4px 10px;
  }
  .complexity-points article img { grid-area: ico; width: 24px; height: auto; margin: 0; }
  .complexity-points article h3 { grid-area: tit; font-size: 13px; line-height: 1.15; margin: 0; }
  .complexity-points article p { grid-area: txt; font-size: 12px; line-height: 1.4; margin: 0; }
  .complexity-intro { margin-bottom: 0; }
  .complexity-copy .lede { margin-bottom: 0; }
  /* 7. ESTATÍSTICAS: duas por linha e sem o vazio entre número e frase ----- */
  .stats, .testimonials .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px 14px; }
  /* o vazio entre número e frase vinha de min-height:190px + space-between */
  .stats article {
    min-height: 0 !important; justify-content: flex-start;
    padding: 12px 12px 14px 0 !important; border-top: 1px solid var(--mist);
  }
  .stats article:nth-child(2n) { padding-left: 12px !important; padding-right: 0 !important; border-right: 0; }
  .stats article:nth-child(2n+1) { padding-right: 12px !important; border-right: 1px solid var(--mist); }
  .stats li, .stats > div { padding-block: 10px; }
  .stats strong { display: block; margin-bottom: 2px; line-height: 1.05; font-size: clamp(22px, 6.5vw, 30px); }
  .stats span, .stats p { margin-top: 0; font-size: 12px; line-height: 1.35; }
  /* 8. FECHAMENTO: rótulo claro sobre a parte CLARA da foto
     Em tela estreita o recorte da foto joga a água e o céu justamente atrás
     do rodapé - o texto branco sumia. Véu escuro mais firme embaixo e o
     enquadramento puxado para o lado do concreto. */
  .closing-photo { object-position: 78% center; }
  .closing:before {
    background:
      linear-gradient(180deg, #080606a6 0%, #08060633 26%, #08060659 58%, #080606f2 100%),
      linear-gradient(90deg, #080606a6 0%, #08060647 40%, #08060626 100%) !important;
  }
  .closing h2 { margin-top: 8px; }
  .closing-footer { padding-top: 18px; }

  /* 9. "Atendimento próximo": bloco com sobra grande entre o texto e o link */
  .testimonials-copy { padding-block: 0; }
  .testimonials-copy > * + * { margin-top: 14px; }
}

/* 10. QUEM SOMOS: o card do Mateus estava encostado à esquerda (Rafael) */
@media (max-width: 760px) {
  .founder-card { margin-inline: auto; }
  .about-grid, .about > div:has(.founder-card) { justify-items: center; }
  /* a foto usa object-position "center 24%": em 4/3 num card estreito isso
     joga o Mateus para a esquerda. No celular o recorte volta ao centro. */
  .founder-card > img { aspect-ratio: 1/1; object-position: 50% 18%; }
}

/* 11. RODAPé em três colunas (Rafael): NAVEGAR / CONTATO / COMEÇAR lado a
   lado - em duas colunas a seção ficava alta à toa. */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px 10px; padding-block: 26px; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }   /* a assinatura ocupa a linha inteira */
  .footer-column { gap: 2px; }
  .footer-column strong { margin-bottom: 4px; }
  .closing-footer a, .closing-footer li a { min-height: 36px; }
  .footer-column a { font-size: 12px; line-height: 1.3; }
}

/* 12. FECHAMENTO: o título tinha meia tela de ar em cima e embaixo até a
   régua e a logo (Rafael). */
@media (max-width: 760px) {
  /* 60 e não 96: a seção inteira encolheu na rodada 30 (Rafael: "está muito
     grande"), e este era o último respiro sobrando no topo. */
  .closing-shell { padding-top: 60px !important; min-height: 0 !important; }
  .closing { min-height: 0; }
  .closing-content { margin-bottom: 0; }
  .closing h2 { margin-top: 0; }
  .closing-location { margin-top: 14px; }
  .closing-footer { margin-top: 22px; padding-top: 16px; }
}

/* 13. As cunhas do celular usam a versão que DEFORMA (preserveAspectRatio
   none): numa tela estreita e alta a forma precisa esticar para fechar a
   tela, e a máscara do header usa exatamente o mesmo arquivo. */
@media (max-width: 760px) {
  /* as duas usam o MESMO arquivo (a esquerda ganha rotate(180) no transform,
     como no desktop); a máscara do header usa o par normal + flip */
  .hero-wedge { content: url(/brand/graphics/cunha-laranja-esticada.svg); }
}

/* 14. Palco no celular: barra do topo não pode comer a primeira peça, e as
   dicas de toque saem de cena.
   - A barra "01/04" tem 36px fixos. Na tela do notebook em ~173px de altura
     isso é 1/5 da cena: o card que fica em 12% do topo (Margem) nascia atrás
     dela. O padding empurra as peças (absolutas) para baixo da barra.
   - As dicas: com as fontes proporcionais, o texto dentro do palco fica em
     ~5px. Um tooltip nesse tamanho não serve para ler, e o card tem 90px de
     largura - não há onde abrir. No celular o palco é uma VITRINE (mostra a
     cara da tela do app); quem explica é o texto da seção, que está logo
     acima em tamanho de leitura. O arraste das peças já era desligado abaixo
     de 900px (disputaria o gesto com a rolagem da página).
   ========================================================================= */
/* REVOGADO na rodada 21: o toque no card abre a MESMA dica do computador
   (o codigo ja existia em "4e. Toque no lugar do hover"; era o display:none
   daqui que impedia). O palco no celular deixa de ser vitrine e volta a ser a
   mesma peca interativa do desktop, como o Rafael vem pedindo. */

/* =========================================================================
   15. PALCO DO CELULAR = DESKTOP REDUZIDO (zoom)
   A tela do notebook mantém a largura de projeto (790px) e recebe um zoom
   calculado em JS para caber na largura disponível. Assim 1cqw volta a valer
   o mesmo do desktop e padding/gap/raio (que estão em px) encolhem junto -
   era isso que deformava os cards.
   ========================================================================= */
@media (max-width: 760px) {
  .macbook-lid { overflow: hidden; }
  /* o zoom saiu da TELA e foi para o MOCKUP inteiro (rodada 17d): assim a
     moldura e a base escalam junto, em vez de a tela encolher dentro de uma
     moldura de tamanho fixo. */
}

/* =========================================================================
   16. HOVER GRUDADO EM TELA DE TOQUE (Rafael: "estruture tá mais branco por
   algum motivo"). A aba tem `:hover{background:#ffffff8f}`. No celular, o
   toque deixa o estado :hover PRESO no último botão tocado - ele ficava
   esbranquiçado como se estivesse meio selecionado. Em aparelho sem ponteiro
   fino, hover de fundo não existe; só o .is-active pinta.
   ========================================================================= */
@media (hover: none) {
  .platform-tabs button:hover { background: 0 0; }
  .platform-tabs button.is-active,
  .platform-tabs button.is-active:hover { background: #fff; }
  .complexity-points article:hover,
  .outcomes article:hover,
  .faq li:hover, .faq summary:hover { background: inherit; box-shadow: none; }
  .button:hover, .header-cta:hover, .text-link:hover { background: inherit; }
}

/* =========================================================================
   17. RODADA DO CELULAR DE VERDADE (Rafael, 04/08)
   Primeira rodada feita olhando a tela: Chromium com emulacao de aparelho em
   360x640, 375x667, 393x852, 412x915, 430x932 e iPad. Tudo abaixo saiu de
   medida, nao de suposicao.
   ========================================================================= */

/* ---- 17a. As barras do navegador acompanham a secao ---------------------
   O iOS 26 ignora <meta name="theme-color"> e tinge a barra de status e a
   barra de ferramentas com o background-color de elementos fixed/sticky
   colados nas bordas, caindo para o <body>. Nosso cabecalho e transparente de
   proposito, entao o Safari nao tinha de onde tirar cor: pintava as duas de
   branco (Rafael: "essas barras brancas em cima e embaixo"). Mudanca por JS
   depois da primeira pintura NAO atualiza a barra - o unico caminho que
   funciona e animacao ligada ao scroll, em CSS puro.
   O fundo do <body> fica embaixo de todas as secoes (todas tem cor propria),
   entao isso nao muda um pixel do que se ve: muda so o que o Safari copia. */
@keyframes barras-do-navegador {
  0%,   5%  { background-color: #E55A2E; }   /* hero fechado: tela toda laranja */
  10%, 92%  { background-color: #f5f5f5; }   /* miolo: papel */
  97%, 100% { background-color: #100D0D; }   /* fechamento: foto escura */
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 1080px) {
    html, body {
      animation: barras-do-navegador linear both;
      animation-timeline: scroll(root);
    }
  }
}

/* ---- 17b. Cabecalho: o botao estava POR CIMA da logo --------------------
   Ampliei o cabecalho 3x: "CONHECA A PLATAFORMA" quebra em duas linhas, a
   caixa cresce para a esquerda e cobre o fim do "invve". Some a sobreposicao
   e a altura cai de 68 para ~54px - que e altura que volta para o conteudo em
   TODAS as secoes, nao so na Plataforma. */
@media (max-width: 760px) {
  .site-header { padding-inline: 16px; }
  .site-header > nav { display: none; }              /* ja estava fora do fluxo visual */
  .brand { flex: 0 0 auto; }
  .brand img { width: 84px; height: auto; }
  .header-actions { flex: 0 1 auto; gap: 6px; min-width: 0; }
  .site-header .header-cta {
    font-size: 9.5px; letter-spacing: .1em; line-height: 1.25;
    padding: 7px 10px; min-height: 40px; gap: 6px; white-space: normal;
  }
  .site-header .header-cta span { font-size: 10px; }
  /* o primeiro botao e o que quebra em duas linhas: teto de largura para ele
     nunca invadir a logo */
  .site-header .header-actions > .header-cta:first-child { max-width: 124px; }
  .site-header .header-cta-acessar { white-space: nowrap; }
}

/* ---- 17c. O veu do cabecalho clareando a foto do fechamento -------------
   .header-fade e um veu claro que entra depois do hero para dar leitura nas
   secoes de papel. Sobre a secao escura do fechamento ele vira um retangulo
   branco no topo da foto (Rafael: "aquela mascara aparecendo na ultima
   secao"). A primeira tentativa foi APAGAR o veu no fim - e a verificacao
   mostrou o preco: a ultima pergunta do FAQ passava por baixo do cabecalho e
   ficava ilegivel. O veu nao pode sumir, tem que TROCAR DE LADO: claro nas
   secoes de papel, escuro sobre a foto. Mesma tecnica do 17a.

   ATUALIZACAO (Rafael, 04/08): a troca de cor incomodou mais do que a mascara
   — "mantem como e na pagina inteira, ou seja, um gradiente pra branco". A
   animacao saiu; o veu e claro do topo ao rodape. */

/* ---- 17d. Plataforma: a secao inteira cabe na tela ----------------------
   Medida no iPhone 14 Pro (852px de altura): cabecalho 68 + abas 246 +
   titulo/paragrafo/destaque ~300 = 614. Sobravam 238px para o notebook, e no
   aparelho real (com as barras do Safari) ~140 - dai "nem da pra ver o
   computadorzinho". Aqui o palco vira uma coluna com orcamento explicito:
   abas e titulo tomam o minimo, e TODO o resto e do notebook. */
@media (max-width: 760px), (max-width: 1080px) and (orientation: portrait) {
  .platform-stage {
    position: sticky; top: 0; height: 100svh; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 62px 0 14px; gap: 10px;
  }

  /* abas: o rotulo "Escolha uma etapa para explorar" some (a seta ja diz o
     que fazer e ele custava 30px), e a descricao de cada etapa cai para duas
     linhas com teto - eram 4 linhas em alguns aparelhos */
  .platform-tabs { flex: none; overflow: visible; }
  .platform-tabs > p { display: none; }
  #platform-tabs-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-items: stretch; }
  #platform-tabs-buttons > button {
    width: 100%; height: 100%; min-height: 0; padding: 8px 9px 9px;
  }
  #platform-tabs-buttons > button strong,
  #platform-tabs-buttons > button b { font-size: 12px; letter-spacing: .06em; }
  #platform-tabs-buttons > button small {
    font-size: 10.5px; line-height: 1.3; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* o painel e quem cede espaco; o notebook e quem fica com ele */
  .platform-carousel-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .platform-carousel-copy { flex: none; }
  .platform-carousel-copy h3 { font-size: clamp(19px, 5.6vw, 24px); line-height: 1.14; margin: 0; }
  .platform-carousel-copy p {
    font-size: 13px; line-height: 1.45; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* o destaque em barra laranja e a legenda embaixo do notebook saem do
     enquadramento sticky: sao 90px que faziam o notebook nao caber */
  .platform-carousel-copy .product-tool { display: none; }
  .platform-carousel-caption { display: none; }

  .platform-carousel-visual {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; align-items: center; justify-content: center;
  }
  /* o mockup INTEIRO (moldura + tela + base) mantem a largura de projeto e
     recebe o zoom - antes o zoom estava so na tela, dentro de uma moldura de
     tamanho fixo */
  .macbook-mockup {
    width: var(--mac-largura, 790px); flex: none;
    zoom: var(--mac-zoom, .44); margin: 0 auto;
  }
  .macbook-screen { width: auto; zoom: 1; }
}

/* ---- 17e. Rodape: tres colunas sem esmagar o e-mail ---------------------
   Em 393px, "contato@invve.com.br" nao cabe numa coluna de 1/3 e encostava na
   coluna vizinha. A coluna do contato ganha o dobro de espaco. */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: .85fr 1.3fr .85fr !important; gap: 18px 10px; }
  .footer-column a, .footer-column p { overflow-wrap: anywhere; }
  .footer-column a { font-size: 11.5px; }
}

/* ---- 17f. Ajuste fino, olhando a foto da 17e ----------------------------
   Duas coisas apareceram na verificação:
   (a) o notebook parava a 22px de cada borda, e essa margem é 11% da largura
       da tela - como é a LARGURA que limita o zoom (não a altura), cada pixel
       lateral vira tamanho de notebook. Colado nas bordas ele cresce 12%.
   (b) sobrava altura vazia entre o texto e o notebook justamente nos
       aparelhos altos. Em vez de deixar o buraco, o destaque em barra laranja
       volta - mas só onde couber, por consulta de ALTURA (é isso que faz a
       seção se adequar a cada aparelho em vez de a um modelo escolhido). */
@media (max-width: 760px), (max-width: 1080px) and (orientation: portrait) {
  /* a largura tem que vir do PAI, nunca do conteúdo: com `width:auto` a vaga
     media o mockup já escalado, o mockup era escalado pela vaga e o cálculo
     travava num ponto fixo - o zoom saía 0,4405 em qualquer aparelho. */
  .platform-carousel-visual { padding-inline: 0; margin-inline: -22px; width: calc(100% + 44px); }
  .platform-carousel-panel { gap: 6px; }
}
@media (min-height: 740px) and (max-width: 760px), (min-height: 740px) and (max-width: 1080px) and (orientation: portrait) {
  .platform-carousel-copy .product-tool {
    display: block; font-size: 12.5px; line-height: 1.4; margin-top: 8px;
  }
  .platform-carousel-copy p { -webkit-line-clamp: 4; }
}
/* telas curtas (iPhone SE, Galaxy antigo): o título também cede */
@media (max-width: 760px) and (max-height: 700px) {
  .platform-carousel-copy h3 { font-size: clamp(17px, 5vw, 20px); }
  .platform-carousel-copy p { -webkit-line-clamp: 2; font-size: 12.5px; }
  .platform-stage { padding-top: 56px; }
}

/* ---- 17g. Cabeçalho ainda grande demais (Rafael: "muito muito grandes") -
   Ampliei de novo depois da 17b: o botão duplo ainda ocupa 60% da barra.
   Fonte, respiro e altura caem mais um degrau; a logo acompanha. */
@media (max-width: 760px) {
  .site-header { padding-block: 8px; }
  .brand img { width: 76px; }
  .site-header .header-cta {
    font-size: 8.8px; letter-spacing: .08em; padding: 6px 9px; min-height: 34px; gap: 4px;
  }
  .site-header .header-actions > .header-cta:first-child { max-width: 112px; }
  .site-header .header-cta span { font-size: 9px; }
}

/* ---- 17h. Cabeçalho: a coluna fantasma do menu e a altura de 68px --------
   Medido: o cabeçalho é uma grade de três colunas (logo · menu · botões). No
   celular o menu está escondido, mas a coluna continua existindo e empurrando
   os botões para fora — o "Acessar" terminava exatamente em 393px, encostado
   na borda. E a altura de 68px vinha do piso de 44px que eu tinha dado à logo
   e aos botões na rodada de área de toque; com dois botões lado a lado nessa
   largura, 44 é grande demais e come altura de todas as seções. */
@media (max-width: 760px) {
  .site-header {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 8px; padding-block: 6px;
  }
  .brand { min-height: 0 !important; }
  .site-header .header-cta, .header-actions .header-cta { min-height: 34px !important; }
  .header-actions { flex: 0 1 auto; justify-content: flex-end; }
}

/* ---- 17i. O notebook colado nas bordas estava alargando a PÁGINA ---------
   Medido: com o notebook em `width: 100% + 44px` o cabeçalho fixo passou a ter
   409px numa tela de 393 — o navegador alarga o viewport de layout quando algo
   estoura na horizontal, e tudo que é `fixed` cresce junto. Some com
   `overflow-x: clip` na seção: ao contrário de `hidden`, `clip` não cria um
   container de rolagem, então o `position: sticky` do palco continua valendo. */
@media (max-width: 760px), (max-width: 1080px) and (orientation: portrait) {
  .platform-overview { overflow-x: clip; }
}

/* ---- 17j. Tablet: o mesmo palco de tela cheia, com folego -------------
   No iPad o palco nao era sticky e o notebook nascia duas telas abaixo das
   abas - a secao nao existia como cena. As regras do 17d passaram a valer ate
   1080px; aqui so o que muda por ter mais espaco: tipografia maior, o rotulo
   das abas de volta e a descricao inteira (nao ha por que cortar em 2 linhas
   numa tela de 768).
   So em RETRATO: no iPad deitado (1024x768) a altura util cai para ~300px e o
   zoom por altura encolhia o notebook a 28% - ficava um selo no meio da tela.
   Deitado, a tela e larga e baixa como a de um computador, entao o layout de
   duas colunas do desktop e que serve. */
@media (min-width: 761px) and (max-width: 1080px) and (orientation: portrait) {
  /* o curso de scroll que faz o palco GRUDAR - sem ele o sticky nao tem onde
     se segurar e a secao volta a ser uma lista comprida (era o que o iPad
     estava mostrando) */
  .platform-overview { height: 330svh; padding-block: 0; }
  .platform-carousel-shell { height: 100%; position: static; min-height: 0; padding-top: 0; }
  .platform-carousel-heading { display: none; }   /* o titulo da secao vive fora do palco e come uma tela inteira */
  .platform-stage { padding: 96px 0 24px; gap: 18px; }
  .platform-tabs > p { display: block; font-size: 12px; margin-bottom: 8px; }
  #platform-tabs-buttons { gap: 10px; }
  #platform-tabs-buttons > button { padding: 12px 14px 13px; }
  #platform-tabs-buttons > button small { font-size: 12.5px; -webkit-line-clamp: 3; }
  .platform-carousel-copy h3 { font-size: clamp(26px, 3.4vw, 34px); }
  .platform-carousel-copy p { font-size: 15px; -webkit-line-clamp: 3; }
  .platform-carousel-copy .product-tool { display: block; font-size: 14px; margin-top: 10px; }
  .platform-carousel-visual { margin-inline: -32px; width: calc(100% + 64px); }
}

/* ---- 17k. A altura do cabeçalho é FIXA no CSS base ----------------------
   Encolher a logo e os botões não mexeu num milímetro: `.site-header` tem
   altura declarada (68px), então padding e conteúdo menores não mudam nada.
   Aqui ela passa a seguir o conteúdo — e as âncoras (#visao, #produto…)
   acompanham, senão o alvo nasce por baixo da barra. */
@media (max-width: 760px) {
  .site-header { height: auto !important; }
  html { scroll-padding-top: 58px; }
  .vision, .platform-overview, .outcomes, .testimonials, .about, .faq { scroll-margin-top: 58px; }
  .platform-stage { padding-top: 54px; }
}

/* =========================================================================
   18. ESCALA E RITMO ÚNICOS NO CELULAR (Rafael: "está me parecendo amador")
   Ele estava certo, e dá pra medir. Levantei todo texto renderizado em 393px:
   37 combinações diferentes de tamanho/entrelinha. Só no corpo havia 18, 17,
   16, 15, 14, 13,5, 13 e 12 px — e o MESMO 15px aparecia com cinco entrelinhas
   diferentes (22,5 / 23,3 / 24 / 24,8 / 25,5). Isso é o que o olho lê como
   "amador": não é um espaçamento errado, é a ausência de sistema.
   Aqui a página passa a ter UMA escala (razão 1,25, ancorada em 15px) e UM
   ritmo (múltiplos de 4). Só no celular.
   ========================================================================= */
@media (max-width: 760px) {
  /* ---- 18a. Escala tipográfica -----------------------------------------
     display 30 · título 26 · subtítulo 17 · corpo 15 · apoio 13 · micro 11 */
  .hero h1 { font-size: 30px; line-height: 1.14; letter-spacing: -.01em; }
  .vision h2, .outcomes h2, .testimonials h2, .about h2, .faq h2,
  .platform-carousel-heading h2, .closing h2 {
    font-size: 26px; line-height: 1.18; letter-spacing: -.012em;
  }
  .platform-carousel-copy h3 { font-size: 21px; line-height: 1.18; letter-spacing: -.01em; }
  .vision h3, .outcomes h3, .faq summary, .faq h3, .testimonials h3, .about h3 {
    font-size: 17px; line-height: 1.3;
  }
  .lede, .hero-lead, .vision p, .outcomes p, .about p, .faq p,
  .testimonials p, .closing p, .platform-carousel-copy p {
    font-size: 15px; line-height: 1.55;
  }
  .complexity-points article p, .outcomes article p, .product-tool,
  .founder-card-copy p, .stats span, .stats p {
    font-size: 13px; line-height: 1.5;
  }
  .eyebrow, .closing-location, .footer-column strong {
    font-size: 11px; line-height: 1.4; letter-spacing: .16em;
  }

  /* ---- 18b. Ritmo vertical ---------------------------------------------
     Um passo só (4px) e três distâncias: 12 entre rótulo e título, 16 entre
     título e texto, 32 entre o bloco de texto e o conteúdo que ele apresenta.
     Antes cada seção resolvia isso por conta própria. */
  .vision, .outcomes, .testimonials, .about, .faq { padding-block: 56px; }
  .vision .eyebrow, .outcomes .eyebrow, .testimonials .eyebrow,
  .about .eyebrow, .faq .eyebrow, .platform-carousel-heading .eyebrow { margin-bottom: 12px; }
  .vision h2, .outcomes h2, .testimonials h2, .about h2, .faq h2,
  .platform-carousel-heading h2 { margin-bottom: 16px; }
  .vision .lede, .outcomes .lede, .testimonials .lede, .about .lede,
  .faq .lede, .platform-carousel-heading .lede { margin-bottom: 32px; }
  .vision-grid, .outcomes-grid, .complexity-points, .stats, .faq ul, .faq ol { margin-top: 0; }

  /* ---- 18c. Quebras de linha do desktop --------------------------------
     Cinco títulos carregam <br> escritos para uma tela larga. Em 393px eles
     forçam a quebra no lugar errado: "Nunca tivemos / tanta informação. /
     Nunca foi tão difícil / tomar uma decisão." — quatro linhas de larguras
     desiguais. Sem o <br>, `text-wrap: balance` distribui sozinho. */
  .vision h2 br, .outcomes h2 br, .testimonials h2 br, .about h2 br,
  .faq h2 br, .platform-carousel-heading h2 br, .closing h2 br { display: none; }
  .vision h2 em, .outcomes h2 em, .testimonials h2 em,
  .platform-carousel-heading h2 em { display: inline; }

  /* ---- 18d. O vazio entre o texto da seção e o palco -------------------- */
  .platform-carousel-heading { padding-bottom: 0; margin-bottom: 0; }
}

/* ---- 18e. Segunda passada: os que escaparam pelo seletor ----------------
   Re-auditando depois da 18a ainda sobravam 15/24, 15/24,8, 15/25,5, 14/22,4
   e 13/19,5 convivendo. São parágrafos sem classe ou com classe do tema
   (.tw-sub). Aqui a regra vira posicional: todo texto corrido FORA do palco
   segue a escala; o que está dentro da tela do notebook é conteúdo do produto
   e não entra (ele já escala por zoom). */
@media (max-width: 760px) {
  /* os :not() somavam especificidade (seis classes = 0,6,2) e essa regra
     "geral" passou a vencer as dos cards - o texto dentro de card saía em 15px,
     do mesmo tamanho da subfrase, e a hierarquia sumia. :where() zera o peso
     do que esta dentro dele: o seletor volta a valer 0,0,2. */
  section:not(.platform-overview) p:not(:where(.eyebrow, .meta, .closing-location, .peca-frase, .peca-sub, .peca-rotulo)),
  .platform-carousel-heading p, .platform-carousel-copy p {
    font-size: 15px; line-height: 1.55;
  }
  /* apoio (dentro de card, legenda de número, ferramenta) */
  .complexity-points article p, .outcomes article p, .product-tool,
  .founder-card-copy p, .stats span, .stats p, .faq li p, .faq p.resposta {
    font-size: 13px; line-height: 1.5;
  }
  /* títulos curtos de card: entrelinha do sistema, não 1,15 */
  #platform-tabs-buttons > button strong,
  #platform-tabs-buttons > button b,
  .complexity-points article h3 { line-height: 1.25; }
  /* links do rodapé estavam em 11,5px — abaixo do piso de leitura */
  .closing-footer a, .footer-column a { font-size: 13px; line-height: 1.5; }
}

/* ---- 18f. O rótulo de seção ainda saía em 15px --------------------------
   `.eyebrow` (0,1,0) perdia para `.vision p` (0,1,1) — o rótulo "PLATAFORMA
   INVVE", "O QUE MUDA", "QUEM SOMOS" vinha do mesmo tamanho do texto corrido,
   com o tracking de um micro-rótulo. Ele é o degrau mais baixo da escala. */
@media (max-width: 760px) {
  section p.eyebrow, .platform-carousel-heading p.eyebrow, p.eyebrow {
    font-size: 11px; line-height: 1.4; letter-spacing: .16em;
  }
}

/* =========================================================================
   19. HIERARQUIA DENTRO DA SEÇÃO E ALTURA DE CARD (Rafael, 04/08)
   "Título bem grandão, subfrase, informações" — e o texto das informações
   estava do mesmo tamanho da subfrase, então os três degraus viravam dois.
   Junto: seções de duas telas para um assunto só.
   Medido antes: cada item de "O que muda" tinha 198px (56 deles só de ar) e
   cada pergunta do FAQ, 260px.
   ========================================================================= */
@media (max-width: 760px) {
  /* ---- 19a. O terceiro degrau: informação < subfrase -------------------- */
  .outcomes-grid article p, .complexity-points article p,
  .faq .faq-list p, .faq details p, .stats article p, .stats span,
  .founder-card-copy p, .product-tool {
    font-size: 13px; line-height: 1.5;
  }
  /* o título do item também cede um passo: 17 -> 15,5 (fica acima do corpo
     do card e abaixo da subfrase da seção) */
  .outcomes-grid article h3, .faq summary { font-size: 15.5px; line-height: 1.3; }

  /* ---- 19b. Ar dentro dos itens ----------------------------------------
     "O que muda": 26px em cima + 30 embaixo por item, mais 18 entre o número
     e o título. São 74px de respiro em um bloco de 3 linhas de texto. */
  .outcomes-grid article { padding-block: 16px 18px; }
  .outcomes-grid article h3 { margin-top: 8px; margin-bottom: 6px; }
  .outcomes-heading { margin-bottom: 4px; }

  /* FAQ: a pergunta tinha 92px de caixa para duas linhas de texto */
  .faq summary, .faq details > summary { padding-block: 14px; min-height: 0; }
  .faq details p { margin-bottom: 16px; }
  .faq-list { gap: 8px; }

  /* Visão: o card já era compacto; só o texto desce um degrau (19a) */
  .complexity-points article { padding: 11px 13px 12px; }
}

/* ---- 19c. O card da Visão resistia por um seletor mais específico -------
   Inspecionando as regras que casavam com o texto do card, quem vencia era
   `.complexity-points article > p:last-child` (0,2,2) — mais específica que
   todas as minhas (0,2,1). Mesmo seletor, agora com o valor do sistema. */
@media (max-width: 760px) {
  .complexity-points article > p:last-child { font-size: 13px; line-height: 1.5; }
}

/* ---- 19d. Últimos resíduos da escala -----------------------------------
   Sobravam 13/1,55 convivendo com 13/1,5 e um 12,5 solto. O degrau de apoio
   é 13/1,5 e ponto. */
@media (max-width: 760px) {
  .outcomes p, .vision p, .faq p, .about p, .testimonials p, .closing p, .product-tool {
    text-wrap: pretty;
  }
  .complexity-points article p, .outcomes-grid article p, .faq details p,
  .founder-card-copy p, .product-tool, .stats span, .stats p {
    line-height: 1.5;
  }
  .product-tool { font-size: 13px; }
}

/* =========================================================================
   20. EFEITOS MAIS CURTOS NO CELULAR (Rafael: "às vezes travando, às vezes
   demorando um pouco pra aparecer")
   A conta do que estava acontecendo: cada letra entra com 13ms de atraso em
   relação à anterior e 600ms de duração. Num título de 50 letras isso já é
   1,25s. A subfrase esperava (letras × 12 + 250) = mais 850ms antes de
   começar, e então repetia a própria cascata. Uma seção levava ~2,3s para
   terminar de aparecer — no computador é elegante, no celular o dedo já
   passou. Aqui tudo encolhe pela metade, sem mudar o desenho do efeito.
   ========================================================================= */
@media (max-width: 760px) {
  .tw-char { --tw-passo: 6ms; transition-duration: 380ms, 300ms, 380ms; }
  [data-reveal] {
    transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .48s cubic-bezier(.22,.61,.36,1);
    transform: translateY(18px);
  }
}
/* quem pediu menos movimento continua tendo menos movimento */
@media (prefers-reduced-motion: reduce) {
  .tw-char, [data-reveal] { transition-duration: .01ms !important; }
}

/* ---- 20b. Título e subfrase do palco: espaçamento e tamanho -------------
   Medido: o h3 vinha em 21px e o parágrafo colava nele (6px), enquanto sobrava
   ar em cima e embaixo do par. Fica desalinhado do resto da página, onde a
   distância título→texto é 16. O título cede um passo (19px) e o par ganha o
   respiro do sistema. */
@media (max-width: 760px) {
  .platform-carousel-copy h3 { font-size: 19px; line-height: 1.2; margin-bottom: 12px; }
  .platform-carousel-copy p { margin-top: 0; }
  .platform-carousel-panel { gap: 12px; }
  .platform-stage { gap: 14px; }
}

/* =========================================================================
   21. O CONTEÚDO DO MOCKUP NÃO É TEXTO DA PÁGINA (Rafael, 5ª vez pedindo)
   Achei a causa comparando a MESMA cena lado a lado, desktop x celular,
   ampliadas: "Financiamento à produção PJ" cabia numa linha no computador e
   quebrava em duas no celular; "EM USO" virava "EM / USO"; "CUSTO / R$ 1 MIL"
   virava duas linhas; e o "81" saía de dentro do anel do Veredito.
   O motivo não era o zoom: eram as MINHAS regras de piso de fonte. Para
   garantir 11-12px de leitura na página, escrevi seletores como `small`,
   `.tag-uso`, `.donut-centro small` e `.graf-etiqueta`. Todos existem dentro
   da tela do notebook. Lá o texto vale ~7px de layout (proporcional ao
   container) e ser empurrado para 11px é 57% maior — a caixa não muda, então
   o texto quebra e desalinha.
   O conteúdo do mockup é uma MAQUETE de interface, não texto para ler: ele
   escala inteiro pelo zoom e tem que manter as proporções do desktop. Este
   bloco garante isso mesmo que alguma regra futura escape.
   ========================================================================= */
@media (max-width: 1080px) {
  .macbook-screen :is(p, li, dd, dt, figcaption) { max-width: none; }
  /* a área de toque de 44px que dei aos controles da página criava caixas
     invisíveis gigantes dentro do palco, empurrando as peças vizinhas */
  .macbook-screen :is(.graf-toggle, .funil-modo, .barras-periodos, .barras-series, .graf-legenda, .graf-vistas) button::after {
    content: none;
  }
}

/* =========================================================================
   22. A DICA DO PALCO NO CELULAR — a original, so que menos estreita
   Tentei de tudo para deixar a dica "legivel" no celular: aumentar 2,6x,
   inverter o zoom, position: fixed, e por fim uma faixa grande no rodape da
   janela. O Rafael viu todas e reprovou: "o grande esta uma bosta, nunca deve
   aparecer. E sempre o pequeno". Ele tem razao — a dica faz parte da MAQUETE
   do app, e uma faixa de 14px colada no rodape nao pertence aquele desenho.
   O que incomodava era so a caixa estreita demais, que empilhava o texto numa
   coluna fina. Entao a unica mudanca e essa: a caixa fica mais larga (de ~170
   para 280px de layout), o texto ganha linhas mais cheias, e nada mais muda.
   ========================================================================= */
@media (max-width: 1080px) {
  .macbook-screen :is(.custo-dica, .kpi-dica, .match-dica, .fn-dica, .bar-dica) {
    max-width: 280px;
  }
}

/* ---- 23. Duas inconsistências que o Rafael pegou no aparelho -------------

   (a) "PLATAFORMA INVVE" colado no separador. Medido: todas as seções têm
       56px de respiro no topo — .vision, .outcomes, .about, .faq. A
       .platform-overview tem ZERO, porque eu zerei o padding dela para o palco
       sticky ter curso de scroll. O respiro volta pelo cabeçalho da seção, que
       fica fora do trecho que gruda.

   (b) O modal do "Agende uma conversa" nascia torto. Medido: o modal tem 24px
       de padding de cada lado (espaço interno de 342px numa tela de 390), mas
       o painel de dentro vinha com 367px — mais largo que o lugar onde ele
       cabe. Sobrava à esquerda e vazava 1px à direita, e o olho lê isso como
       "deslocado". O painel passa a caber no container, e a moldura encolhe
       para dar mais tela ao calendário. */
@media (max-width: 760px) {
  .platform-carousel-heading { padding-top: 56px; }

  .agenda-modal { padding: 12px; }
  .agenda-panel {
    width: 100%; max-width: 100%; min-width: 0;
    margin-inline: auto;
  }
}

/* ---- 24. Esqueleto do modal de agendamento -------------------------------
   O Cal.com leva alguns segundos para responder, e até lá o painel era um
   retângulo branco — a pessoa não sabe se travou (Rafael, 04/08). Enquanto ele
   não carrega, o painel mostra o DESENHO do que vem: foto, nome, título,
   duração e a grade do calendário. Some sozinho no `load` do iframe. */
/* o corpo e o lugar do calendario: o esqueleto e o iframe dividem esse espaco,
   sem encostar no cabecalho (o titulo quebra em duas linhas no celular) */
.agenda-corpo { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.agenda-corpo .agenda-iframe { flex: 1 1 auto; width: 100%; }
.agenda-esqueleto {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 22px; overflow: hidden;
  background: var(--paper);
}
.agenda-pronta .agenda-esqueleto { opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s .28s; }
.agenda-esqueleto .ae-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.agenda-esqueleto .ae-foto { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.agenda-esqueleto .ae-linha { display: block; height: 12px; border-radius: 6px; }
.agenda-esqueleto .ae-nome { width: 132px; height: 13px; }
.agenda-esqueleto .ae-titulo { width: 62%; height: 22px; border-radius: 8px; margin-bottom: 2px; }
.agenda-esqueleto .ae-curta { width: 74%; }
.agenda-esqueleto .ae-metas { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.agenda-esqueleto .ae-meta { width: 148px; height: 11px; }
.agenda-esqueleto .ae-grade {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mist);
}
.agenda-esqueleto .ae-grade > span { height: 26px; border-radius: 7px; }
.agenda-esqueleto .ae-aviso {
  margin-top: auto; padding-top: 16px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #4a0e1766;
}
/* o brilho que atravessa: diz "está vindo", não "travou" */
.agenda-esqueleto :is(.ae-foto, .ae-linha, .ae-grade > span) {
  background: linear-gradient(100deg, #e7e4de 20%, #f3f1ed 42%, #e7e4de 64%);
  background-size: 260% 100%;
  animation: ae-brilho 1.35s linear infinite;
}
@keyframes ae-brilho { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
  .agenda-esqueleto :is(.ae-foto, .ae-linha, .ae-grade > span) { animation: none; background: #e7e4de; }
}
@media (max-width: 760px) {
  .agenda-esqueleto { padding: 20px 16px; }   /* o `top` saiu: agora quem ancora e o .agenda-corpo */
  .agenda-esqueleto .ae-grade > span { height: 22px; }
}

/* ---- 25. O "81 de 100" vazando do anel — só no Safari --------------------
   O Rafael apontou isso sete vezes e eu nunca reproduzi, porque eu só olhava
   em Chromium. Medido nos dois motores, dentro do palco escalado:

     Chrome:  anel 58px de layout · número 21,3px  → proporção 0,37 (igual ao PC)
     Safari:  anel 38px de layout · número 18,2px  → proporção 0,48 → estoura

   O anel é `width: clamp(38px, 7.4cqw, 82px)` e o número `clamp(13px, 2.7cqw,
   30px)`. O WebKit não resolve o `cqw` dentro de um elemento com `zoom` e cai
   no PISO — o anel encolhe para 38px, mas o número (cujo piso é 13) continua em
   18. O anel murcha e o texto não.
   Aqui os dois saem de px fixos, iguais aos que o desktop calcula. Sem cqw, sem
   diferença entre motores. */
@media (max-width: 1080px) {
  .macbook-screen .donut-wrap { width: 62px; }
  .macbook-screen .donut-centro strong { font-size: 18px; }
  /* O "de 100" sai no celular. Mesmo com o anel de volta ao tamanho certo, ele
     continuava espremido na borda de baixo — e a ~3px na tela nao era legivel
     de qualquer jeito. Sem ele o numero fica sozinho e centrado, sem nada para
     quebrar. A escala nao se perde: o anel ja mostra a proporcao, e a dica do
     card diz "80 muito atrativo · 60 solido · 45 fragil". */
  .macbook-screen .donut-centro small { display: none; }
}

/* ---- 26. O notebook estava sendo espremido no celular -------------------
   Medido nos 14 aparelhos da bancada (webkit + chromium, com e sem a barra do
   navegador). O gasto de altura do palco é FIXO e não olha o aparelho:

     padding 68  +  abas 157  +  título/parágrafo 128  +  gaps 16  =  369px

   Numa janela de 456px (iPhone SE com a barra aberta) sobram 60px para o
   notebook — ele sai com 91px de largura, um selo. Só o iPhone 13 sem barra e
   o 14 Pro Max chegavam ao tamanho que a LARGURA permitia; todo o resto ficava
   preso pela altura:

     iPhone SE (barra)   zoom 0,115  →  podia 0,405
     iPhone 12 Mini      zoom 0,233  →  podia 0,475
     iPhone 13 (barra)   zoom 0,300  →  podia 0,494
     Galaxy S9+ (barra)  zoom 0,287  →  podia 0,405

   O maior gasto são as abas: 157px de uma grade 2x2 em que cada card carrega
   duas linhas de descrição a 10,5px. Essa descrição repete o parágrafo do
   painel que aparece logo abaixo dela, na mesma tela. Quando a altura é curta,
   ela sai e a aba fica só com o nome da etapa. */
@media (max-width: 760px), (max-width: 1080px) and (orientation: portrait) {
  #platform-tabs-buttons > button small { display: none; }
  #platform-tabs-buttons > button { padding: 7px 9px; }
  .platform-stage { padding-top: 48px; }
}
/* onde há altura de sobra, a descrição volta — mesmo critério do destaque em
   barra laranja da 17f */
@media (min-height: 740px) and (max-width: 760px),
       (min-height: 740px) and (max-width: 1080px) and (orientation: portrait) {
  #platform-tabs-buttons > button small { display: -webkit-box; }
  #platform-tabs-buttons > button { padding: 8px 9px 9px; }
  .platform-stage { padding-top: 54px; }
}

/* telas MUITO baixas (iPhone SE com a barra aberta: 456px de janela). Depois
   de enxugar as abas o notebook ainda ficava em 0,283 contra os 0,405 que a
   largura permitia. Aqui o título e o parágrafo cedem o último pedaço: o
   título perde um degrau de corpo e o parágrafo cai para duas linhas curtas.
   Assim que a pessoa rola e a barra do navegador recolhe, a janela passa de
   560 e tudo volta ao normal. */
@media (max-height: 560px) and (max-width: 760px),
       (max-height: 560px) and (max-width: 1080px) and (orientation: portrait) {
  /* o título é de um corpo leve e claro; o parágrafo é escuro e de peso normal.
     Encolher os dois junto invertia a hierarquia — o parágrafo pesava mais que
     o título. Aqui a distância entre eles AUMENTA (1,6x contra 1,35x). */
  .platform-carousel-copy h3 { font-size: 17px; line-height: 1.1; }
  /* o corpo do parágrafo é ajustado no fim do arquivo, junto com as outras
     faixas de altura — o seletor lá precisa de peso maior (ver comentário) */
  .platform-carousel-panel { gap: 4px; }
  .platform-stage { padding-top: 44px; padding-bottom: 10px; gap: 6px; }
}

/* ---- 27. A dica encaixava contra um alvo em movimento -------------------
   A bancada acusava a dica vazando ~4px da tela do notebook, mas num aparelho
   diferente a cada rodada — sinal de corrida, não de layout. A causa: a peça
   flutua o tempo todo (`pecaFlutua`, ±9px), e `encaixarDicaNaTela()` calcula
   UM deslocamento contra o retângulo do instante. Meio segundo depois a peça
   já subiu e leva a dica junto.
   Enquanto a dica está aberta a flutuação para. O encaixe passa a mirar um
   alvo parado, e de quebra o card não escorrega debaixo do dedo de quem está
   lendo. Ao fechar, volta a flutuar. */
.peca.dica-aberta .peca-inner { animation-play-state: paused; }

/* As três faixas de altura do parágrafo, todas com o peso 0,2,2 e em ordem do
   geral para o específico — com peso igual, quem vem depois vence.
   Sem isso o parágrafo ficava em 15px em qualquer aparelho: as regras da 17f
   usavam `.platform-carousel-copy p` (0,1,1) e perdiam caladas. */
@media (max-width: 760px), (max-width: 1080px) and (orientation: portrait) {
  .platform-carousel-copy > p:not(.product-tool) { font-size: 13px; line-height: 1.45; }
}
@media (max-width: 760px) and (max-height: 700px),
       (max-width: 1080px) and (max-height: 700px) and (orientation: portrait) {
  .platform-carousel-copy > p:not(.product-tool) {
    font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2;
  }
}
@media (max-height: 560px) and (max-width: 760px),
       (max-height: 560px) and (max-width: 1080px) and (orientation: portrait) {
  .platform-carousel-copy > p:not(.product-tool) {
    font-size: 10.5px; line-height: 1.4; margin-top: 4px; -webkit-line-clamp: 2;
  }
}

/* ---- 28. Celular deitado: sem palco de tela cheia -----------------------
   iPhone 13 na horizontal são 342px de altura. Descontando o cabeçalho, as
   abas e o texto, sobravam ~90px e o notebook saía com 134px de largura — o
   mesmo selo que o palco veio consertar no retrato. Numa janela dessa altura
   não existe enquadramento de tela cheia que funcione: aqui a seção volta a
   ser uma seção comum, o notebook toma a largura toda e a página rola.
   (`ajustarZoomDoPalco` combina com isto: nessa faixa o zoom vem só da
   largura.) */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 1080px) {
  .platform-stage {
    position: static; height: auto; min-height: 0;
    padding: 20px 0 24px; justify-content: flex-start;
  }
  .platform-carousel-panel { min-height: 0; }
  .platform-carousel-visual { flex: none; min-height: 0; }
  #platform-tabs-buttons { grid-template-columns: repeat(4, 1fr); }
  .platform-carousel-copy > p:not(.product-tool) { font-size: 12px; -webkit-line-clamp: 3; }
  .platform-carousel-copy h3 { font-size: 20px; }
}

/* ---- 29. Ajustes finos pedidos pelo Rafael ------------------------------
   (a) O "81" do Veredito mais um degrau menor dentro do anel.
   (b) Na cena Capte (Fundo S.A., Gustavo Martins, Family Office), o ✓ e o ×
       de cada critério ficavam colados no texto. O ícone é um `:before`
       ancorado em `left:0` e o texto começa no `padding-left` — aumentar esse
       recuo é exatamente abrir o espaço entre os dois, sem mexer no balão. */
@media (max-width: 1080px) {
  .macbook-screen .donut-centro strong { font-size: 15px; }
}
.match-dica span { padding-left: 1.55em; }

/* ---- 30. Fechamento/rodape enxuto no celular ----------------------------
   Medido no iPhone 13: a secao tomava 688px, dos quais 441 so de rodape. O
   paragrafo da marca e a coordenada estavam em 15px (o mesmo corpo do texto
   das secoes), "Agendar demonstracao" quebrava em tres linhas e a coluna do
   contato encostava na vizinha.
   A causa dos 15px e a de sempre: as regras que eu tinha escrito (12px em
   `.closing-footer` e 11,5px em `.footer-column a`) pesam 0,1,0 e 0,2,0 e
   perdiam para `section:not(.platform-overview) p:not(:where(...))` (0,1,2) e
   `.closing p` (0,1,1). Aqui os seletores sobem de peso de proposito. */
@media (max-width: 760px) {
  .closing-shell { padding-top: 64px; min-height: 0; }
  .closing-content h2 { font-size: 22px; line-height: 1.16; }
  .closing .closing-location { font-size: 10px; margin-top: 16px; letter-spacing: .1em; }

  .closing-footer { padding-top: 12px; line-height: 1.5; }
  .closing-footer .footer-brand img { width: 62px; }
  .closing-footer .footer-brand p { font-size: 11.5px; line-height: 1.5; margin-top: 8px; }
  .closing-footer .footer-grid { gap: 14px 12px; }
  .closing-footer .footer-column { gap: 5px; }
  .closing-footer .footer-column strong { font-size: 9.5px; letter-spacing: .1em; }
  .closing-footer .footer-column a,
  .closing-footer .footer-column span { font-size: 11px; line-height: 1.45; }
  .closing-footer .footer-bottom { font-size: 9.5px; line-height: 1.45; padding-block: 10px; gap: 4px; }
}
/* dois que ainda perdiam por peso: o recuo do topo da secao e o rodape legal */
@media (max-width: 760px) {
  .closing .closing-shell { padding-top: 60px; }
  .closing-footer .footer-bottom span { font-size: 9.5px; }
}