/* A shared desktop frame, twelve different businesses, and Fork's native panel. */
.v2-page .v2-case-panel { grid-template-columns: minmax(0,.75fr) minmax(0,1.75fr); gap: 48px; }
.v2-page .v2-case-copy { max-width: 360px; }
.v2-page .v2-case-demo { min-width: 0; width: 100%; margin: 0; padding: 0; border-radius: 18px; background: #fff; --demo-ease-out: cubic-bezier(.23,1,.32,1); --demo-ease-in-out: cubic-bezier(.77,0,.175,1); }
.case-demo-viewport { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: 16px; border: 1px solid #e6e6e6; box-shadow: 0 16px 40px #1717170c; background: white; }
.case-demo-canvas { position: absolute; top: 0; left: 0; width: 1200px; height: 750px; transform-origin: top left; transform: scale(var(--case-scale,1)); }
.v2-page .case-demo-browser { display: block; width: 1200px; height: 750px; border: 0; border-radius: 0; box-shadow: none; background: #fff; aspect-ratio: auto; }
.v2-page .case-demo-bar { display: flex; height: 40px; padding: 0 20px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e8e8e8; }
.v2-page .case-demo-bar .window-dots { display: flex; gap: 5px; }
.v2-page .case-demo-bar .window-dots i { width: 6px; height: 6px; border-radius: 50%; }
.v2-page .case-demo-url { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font: 400 11px/1.4 Real,Arial,sans-serif; color: #8a8a8a; white-space: nowrap; }
.v2-page .case-demo-url svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.v2-page .case-demo-status { width: 6px; height: 6px; border-radius: 50%; background: #81987b; }
.v2-page .case-demo-workspace { display: grid; grid-template-columns: 800px 400px; height: 710px; min-height: 0; }
.v2-page .case-demo-site { position: relative; width: 800px; height: 710px; min-height: 0; overflow: hidden; background: #fff; color: #1d1d1d; font: 400 16px/1.5 Real,Arial,sans-serif; }
.v2-page .case-demo-sidebar { position: relative; width: 400px; height: 710px; min-width: 0; overflow: hidden; border-left: 1px solid #e8e8e8; border-top: 0; background: #fff; }
.v2-page .case-demo-sidebar > img { position: absolute; inset: 0; display: block; width: 400px; height: 710px; aspect-ratio: auto; object-fit: cover; object-position: top; transition: opacity 180ms var(--demo-ease-out); }
.case-native-frame { position: absolute; inset: 0; width: 400px; height: 710px; border: 0; opacity: 0; pointer-events: none; transition: opacity 180ms var(--demo-ease-out); }
.case-demo-sidebar[data-ready="true"] .case-native-frame { opacity: 1; }
.case-demo-sidebar[data-ready="true"] .case-native-fallback { opacity: 0; }
.case-demo-site > div:not(.demo-receipt) { position: absolute; inset: 0; overflow: hidden; }
.v2-page .case-demo-site h4,.v2-page .case-demo-site h5,.v2-page .case-demo-site p { margin: 0; font-family: inherit; color: inherit; letter-spacing: normal; }
.v2-page .case-demo-site h4 { font-size: 54px; font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }
.v2-page .case-demo-site h5 { font-size: 30px; font-weight: 500; line-height: 1.13; letter-spacing: -.035em; }
.v2-page .case-demo-site p { font-size: 17px; line-height: 1.55; }
.case-demo-site b,.case-demo-site strong { font-weight: 500; }
.case-demo-site em { font-style: normal; }
.demo-nav { position: relative; z-index: 2; height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 42px; border-bottom: 1px solid #22222217; }
.demo-nav > b { font-size: 30px; letter-spacing: -.06em; }
.demo-nav > span { font-size: 12px; opacity: .7; }
.demo-nav > small { font-size: 12px; }
.demo-footer { position: absolute; bottom: 78px; left: 42px; right: 42px; display: flex; justify-content: space-between; font-size: 11px; opacity: .65; }
.v2-page .case-demo-site .demo-kicker { font-size: 10px; letter-spacing: .12em; line-height: 1.5; margin-bottom: 15px; }
.demo-receipt { position: absolute; z-index: 4; bottom: 18px; left: 24px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #e5e5e5; border-radius: 24px; background: #fff; color: #141414; box-shadow: 0 4px 12px #00000006; font-size: 12px; }
.demo-receipt > span { font-size: 13px; }
.demo-text-link { display: inline-block; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid currentColor; margin-top: 20px; }
.demo-dashboard-heading { margin: 32px 42px 26px; }
.demo-dashboard-heading > p:last-child { margin-top: 15px; opacity: .65; }
.demo-chip { display: inline-flex; border: 1px solid currentColor; border-radius: 18px; padding: 3px 9px; font-size: 11px; }

/* Each scene reveals its action, then holds on the finished result. */
.v2-case-demo [data-beat] { opacity: 1; transform: translateY(0); transition: opacity 220ms var(--demo-ease-out), transform 360ms var(--demo-ease-out); }
.v2-case-demo[data-phase="0"] [data-beat],.v2-case-demo[data-phase="1"] [data-beat="2"],.v2-case-demo[data-phase="1"] [data-beat="3"],.v2-case-demo[data-phase="2"] [data-beat="3"] { opacity: 0; transform: translateY(12px); }
.v2-case-demo .demo-before,.v2-case-demo .demo-after { transition: opacity 220ms var(--demo-ease-out), transform 360ms var(--demo-ease-out); }
.v2-case-demo .demo-before { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.v2-case-demo .demo-after { opacity: 1; transform: none; }
.v2-case-demo[data-phase="0"] .demo-before,.v2-case-demo[data-phase="1"] .demo-before { opacity: 1; transform: none; }
.v2-case-demo[data-phase="0"] .demo-after,.v2-case-demo[data-phase="1"] .demo-after { opacity: 0; transform: translateY(12px); }
.v2-case-demo[data-instant="true"] [data-beat],.v2-case-demo[data-instant="true"] .demo-before,.v2-case-demo[data-instant="true"] .demo-after { transition: none; }

/* SAISON: a menu reveal with a warm, editorial composition. */
.demo-restaurant { background: #f7f2e7; color: #29221c; }
.demo-restaurant .demo-nav > b { font: 400 27px Georgia,serif; letter-spacing: .17em; }
.restaurant-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; padding: 28px 42px 24px; }
.restaurant-intro > div { padding-top: 18px; }
.v2-page .restaurant-intro h4 { font-family: Georgia,serif; font-size: 49px; letter-spacing: -.06em; }
.restaurant-intro h4 em { color: #b35b32; font-style: italic; }
.v2-page .restaurant-intro p:last-child { font-size: 14px; margin-top: 16px; }
.restaurant-intro img { width: 100%; height: 246px; object-fit: cover; object-position: 72% 50%; border-radius: 120px 120px 4px 4px; }
.demo-menu { position: relative; display: grid; grid-template-columns: .9fr 1.15fr; gap: 25px; margin: 0 42px; padding: 24px; background: #ebe2d2; }
.demo-menu > div > span { display: block; font-size: 9px; letter-spacing: .13em; margin-bottom: 11px; }
.v2-page .demo-menu h5 { font: 400 29px/1.05 Georgia,serif; letter-spacing: -.04em; }
.v2-page .menu-dishes p { font-size: 14px; border-bottom: 1px solid #30251c18; padding: 0 0 9px; margin-bottom: 9px; }
.menu-dishes small { display: block; font-size: 10px; opacity: .6; }
.demo-menu > b { position: absolute; left: 24px; bottom: 21px; font-size: 11px; }

/* ROAM: a content plan becomes a finished, image-led article. */
.demo-travel { background: #faf8f3; color: #26372f; }
.demo-travel .demo-nav > b { font: italic 600 38px Georgia,serif; }
.demo-content-plan { position: absolute; left: 42px; right: 42px; top: 128px; }
.demo-content-plan h4 { margin-bottom: 28px!important; }
.story-plan { display: flex; align-items: center; gap: 15px; border-top: 1px solid #26372f30; padding: 20px 0; }
.story-plan > span { opacity: .5; font-size: 13px; }
.story-plan > b { flex: 1; font-size: 19px; }
.story-plan > small { font-size: 11px; }
.travel-article { position: absolute; top: 110px; left: 42px; right: 42px; }
.travel-article > img { width: 100%; height: 235px; object-fit: cover; object-position: center 48%; border-radius: 2px; }
.travel-article > div { margin-top: 22px; max-width: 600px; }
.v2-page .travel-article h4 { font-family: Georgia,serif; font-size: 46px; letter-spacing: -.055em; }
.v2-page .travel-article p:not(.demo-kicker) { margin-top: 15px; font-size: 14px; max-width: 560px; }
.travel-article .demo-kicker { margin-bottom: 9px!important; }
.travel-article .demo-text-link { font-size: 12px; margin-top: 10px; }

/* VOLT: review the result, then update the live landing page headline. */
.demo-product { background: #fbfff4; color: #11180e; }
.demo-product .demo-nav > b { font-size: 35px; font-style: italic; font-weight: 700; }
.demo-product .demo-nav > small { padding: 9px 14px; border-radius: 24px; background: #b9f94a; color: #11180e; font-size: 10px; }
.experiment-hero { position: relative; height: 535px; }
.experiment-headline { position: absolute; left: 42px; top: 104px; width: 438px; height: 158px; z-index: 1; }
.v2-page .experiment-headline h4 { position: absolute; inset: 0; font-family: Hoss,Arial,sans-serif; font-size: 64px; font-weight: 700; line-height: 1.04; letter-spacing: -.06em; transition: opacity 220ms var(--demo-ease-out), transform 360ms var(--demo-ease-out); }
.experiment-headline h4 em { color: #6eb62c; }
.experiment-original { opacity: 1; transform: none; }
.experiment-winner { opacity: 0; transform: translateY(10px); }
.v2-case-demo[data-example="improve"][data-phase="3"] .experiment-original { opacity: 0; transform: translateY(-6px); }
.v2-case-demo[data-example="improve"][data-phase="3"] .experiment-winner { opacity: 1; transform: none; }
.v2-page .experiment-hero > p { position: absolute; left: 42px; top: 274px; font: 12px/1.7 'Courier New',monospace; color: #879078; letter-spacing: .02em; }
.experiment-shop { position: absolute; left: 42px; top: 355px; display: inline-flex; align-items: center; gap: 30px; padding: 14px 20px; border-radius: 28px; background: #b9f94a; font-size: 12px; font-weight: 600; }
.experiment-can { position: absolute; top: 45px; right: 30px; width: 300px; height: 445px; object-fit: contain; }
.demo-product .demo-footer { border-top: 1px solid #dce2d0; padding-top: 18px; font: 9px/1.4 'Courier New',monospace; bottom: 81px; }
.v2-case-demo[data-example="improve"][data-instant="true"] .experiment-headline h4 { transition: none; }
@media (prefers-reduced-motion:reduce) { .v2-page .experiment-headline h4 { transition: none; } }

/* ORBIT: a website signup, with qualification details in the native chat. */
.demo-leads { color: #242239; background: #f3f1fb; }
.demo-leads .demo-nav > b { font-size: 37px; letter-spacing: -.08em; }
.orbit-signup-hero { display: grid; grid-template-columns: minmax(0,1fr) 316px; gap: 30px; margin: 52px 42px 0; }
.orbit-signup-copy { padding-top: 12px; }
.v2-page .orbit-signup-copy h4 { font-size: 67px; font-weight: 600; line-height: .99; letter-spacing: -.065em; }
.orbit-signup-copy h4 em { color: #8d79c3; }
.v2-page .orbit-signup-copy > p { margin-top: 28px; font-size: 14px; line-height: 1.7; max-width: 305px; color: #878198; }
.orbit-signup-proof { margin-top: 28px; display: flex; gap: 9px; align-items: center; font-size: 11px; color: #726781; }
.orbit-signup-proof > span { display: grid; place-items: center; border: 1px solid #d5cce6; border-radius: 50%; width: 20px; height: 20px; font-size: 10px; }
.orbit-signup-form { min-width: 0; padding: 25px; background: #fff; border: 1px solid #e3deee; border-radius: 10px; pointer-events: none; }
.v2-page .orbit-signup-form h5 { font-size: 27px; font-weight: 500; letter-spacing: -.04em; }
.v2-page .orbit-signup-form > p { font-size: 10px; line-height: 1.5; color: #92899f; margin-top: 9px; margin-bottom: 24px; }
.orbit-signup-form label { display: block; font-size: 10px; color: #8c8399; margin-top: 16px; }
.orbit-signup-form input { display: block; width: 100%; border: 1px solid #e5dfef; border-radius: 5px; background: #faf9fd; padding: 11px 12px; margin-top: 7px; color: #393147; font: 12px/1.4 Real,Arial,sans-serif; outline: none; }
.orbit-signup-submit { position: relative; height: 40px; margin-top: 22px; background: #292136; color: #fff; border-radius: 5px; font-size: 11px; }
.orbit-signup-submit > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.orbit-signup-form > small { display: block; text-align: center; color: #b0a7bc; font-size: 8px; margin-top: 13px; }
.demo-leads .demo-footer { bottom: 81px; padding-top: 17px; border-top: 1px solid #ded8e9; color: #92879f; font-size: 10px; }

/* ATELIER: a document becomes useful project information. */
.demo-forms { background: #f7ede6; color: #493428; }
.demo-forms .demo-nav > b { font: italic 500 36px Georgia,serif; }
.brief-workspace { display: grid; grid-template-columns: 250px 1fr; gap: 25px; margin: 0 42px; }
.brief-document { position: relative; padding: 22px; height: 280px; background: #fffefb; border: 1px solid #decbbc; box-shadow: 0 8px 20px #49342809; transform: rotate(-3deg); }
.brief-document > span { display: inline-flex; background: #b87151; color: #fff; padding: 3px 6px; font-size: 9px; }
.v2-page .brief-document h5 { font-family: Georgia,serif; margin-top: 22px; font-size: 34px; }
.v2-page .brief-document p { font-size: 10px; margin-top: 10px; }
.document-lines { display: grid; gap: 6px; margin-top: 24px; }
.document-lines i { height: 3px; width: 100%; background: #e5d7cb; }.document-lines i:nth-child(2n) { width: 80%; }
.brief-document > small { position: absolute; bottom: 17px; left: 22px; font-size: 10px; }
.brief-details { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.demo-check { display: flex; align-items: center; gap: 14px; padding: 17px; background: #fff9f3; border: 1px solid #e6d5c8; border-radius: 6px; }
.demo-check > span { color: #9b6446; font-size: 17px; }
.demo-check small { display: block; font-size: 8px; letter-spacing: .08em; opacity: .6; margin-bottom: 6px; }
.demo-check b { display: block; font-size: 13px; }

/* SOLARA: a visitor-facing tool produces a tailored answer. */
.demo-solar { background: #f8f7ee; color: #383827; }
.demo-solar .demo-nav > b { font-size: 32px; }
.solar-copy { margin: 32px 42px 26px; }.v2-page .solar-copy h4 { font-size: 46px; }
.solar-tool { display: grid; grid-template-columns: 1fr 1fr; margin: 0 42px; border: 1px solid #e2e0c9; background: #fff; border-radius: 9px; overflow: hidden; }
.solar-inputs { padding: 24px; }.solar-inputs label { display: block; font-size: 11px; color: #8b8a74; margin-bottom: 14px; }
.solar-inputs b { display: block; font-size: 14px; color: #383827; background: #f6f5ed; padding: 10px; margin-top: 5px; border: 1px solid #e8e6d6; border-radius: 4px; }
.solar-button { display: block; text-align: center; background: #dedb75; font-size: 12px; padding: 12px; margin-top: 19px; border-radius: 4px; }
.solar-result { background: #efedbe; padding: 24px; }.solar-sun { display: block; font-size: 31px; line-height: 1; margin-bottom: 16px; }
.solar-result > small { display: block; font-size: 8px; letter-spacing: .1em; margin-bottom: 8px; }
.v2-page .solar-result h5 { font-size: 27px; }
.solar-metric { display: flex; flex-direction: column; margin-top: 20px; }.solar-metric > b { font-size: 36px; line-height: 1; letter-spacing: -.05em; }.solar-metric > span { font-size: 10px; margin-top: 6px; }
.v2-page .solar-result p { font-size: 10px; opacity: .65; margin-top: 15px; }

/* SUMMIT: the same site visibly adapts to a visitor's interest. */
.demo-outdoor { color: #fff!important; background: #243829; }
.outdoor-photo,.outdoor-shade,.hotel-photo,.hotel-wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outdoor-shade { background: linear-gradient(90deg,#101e16d9,#101e1644); }
.demo-outdoor .demo-nav { border-color: #ffffff33; }.demo-outdoor .demo-nav > b { letter-spacing: .08em; font-size: 25px; }
.visitor-choice { position: relative; display: flex; gap: 22px; align-items: center; margin: 28px 42px 0; font-size: 12px; }.visitor-choice > b { padding: 7px 12px; border: 1px solid #d9e4c7; border-radius: 30px; background: #ffffff12; }
.outdoor-copy { position: absolute; left: 42px; right: 42px; top: 235px; }.outdoor-copy .demo-before,.outdoor-copy .demo-after { position: absolute; inset: 0; }
.v2-page .outdoor-copy h4 { font-size: 64px; }.outdoor-copy h4 em { color: #dce5bd; }.v2-page .outdoor-copy p { font-size: 14px; margin-top: 18px; }
.outdoor-button { position: absolute; top: 195px; left: 0; padding: 12px 18px; border: 1px solid #ffffff77; font-size: 12px; }
.outdoor-recommendation { position: absolute; bottom: 83px; left: 42px; right: 42px; padding: 18px 22px; color: #243829; background: #f3f3e6; }
.outdoor-recommendation > span { display: block; font-size: 8px; letter-spacing: .1em; }.outdoor-recommendation > b { display: block; font-size: 20px; margin-top: 4px; }.outdoor-recommendation > small { position: absolute; right: 22px; top: 38px; font-size: 11px; }

/* DAYBREAK: one hours change propagates across the website. */
.demo-cafe { background: #fff2dd; color: #b84926; }.demo-cafe .demo-nav > b { font-size: 32px; letter-spacing: -.07em; }
.cafe-heading { display: flex; align-items: center; gap: 30px; margin: 38px 42px; }.cafe-sun { font-size: 104px; line-height: 1; }.v2-page .cafe-heading h4 { font-size: 48px; }
.cafe-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 0 42px; padding: 28px 0; border-top: 1px solid #b8492633; border-bottom: 1px solid #b8492633; }
.cafe-hours > div > span { font-size: 8px; letter-spacing: .13em; }.v2-page .cafe-hours h5 { margin-top: 12px; font-size: 34px; }.v2-page .cafe-hours > div > p { margin-top: 15px; font-size: 12px; }
.cafe-hours > div:last-child > p { display: flex; flex-direction: column; margin-top: 0; margin-bottom: 20px; }.cafe-hours p > span { font-size: 11px; margin-bottom: 6px; }.cafe-hours p > b { font-size: 26px; letter-spacing: -.04em; }
.hours-changing { position: relative; height: 66px; }.hours-changing > b { position: absolute; top: 21px; left: 0; }.cafe-hours small { font-size: 11px; }
.hours-synced { display: flex; justify-content: space-between; margin: 25px 42px; font-size: 12px; }

/* MOSS & CO: a normal garden website. Monitoring lives entirely in Fork chat. */
.demo-garden { background:#f4f2e8; color:#303b2b!important; }
.demo-garden .demo-nav > b { font:italic 36px Georgia,serif; letter-spacing:-2px; }
.garden-hero { display:grid;grid-template-columns: .9fr 1.1fr;gap:32px;margin:28px 42px;align-items:center; }
.garden-intro { font-size:10px;letter-spacing:.13em; }
.v2-page .garden-hero h4 { font:400 67px/.98 Georgia,serif;letter-spacing:-3.7px;margin:28px 0 22px; }
.garden-hero h4 em { font-style:italic;color:#727b4c; }
.v2-page .garden-hero p { font-size:15px;line-height:1.6; }
.garden-hero > img { width:100%;height:370px;object-fit:cover;object-position:center;border-radius:150px 150px 0 0; }
.garden-link { display:flex;justify-content:space-between;align-items:center;font-size:12px;border-bottom:1px solid #818976;padding:15px 0 9px;max-width:174px;margin-top:20px; }
.garden-note { display:grid;grid-template-columns:1fr 1.3fr .9fr;gap:24px;margin:36px 42px 0;padding-top:20px;border-top:1px solid #303b2b33;font-size:10px; }
.v2-page .garden-note p { font:400 20px/1.35 Georgia,serif;letter-spacing:-.5px; }
.garden-note > b { font-size:11px;line-height:1.7;text-align:right;font-weight:400; }

/* PALOMA: scan a landing page, locate three issues, then repair and verify. */
.demo-repair { color:#392b26!important;background:#f5e9dd; }
.demo-repair .demo-nav > b { font:400 26px Georgia,serif;letter-spacing:.12em; }
.repair-hero { display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:34px 42px; }
.repair-intro { padding-top:18px; }
.repair-location { font-size:9px;letter-spacing:.09em; }
.v2-page .repair-intro h4 { font:400 60px/1.04 Georgia,serif;letter-spacing:-3px;margin:32px 0 22px; }
.repair-intro h4 em { font-style:italic;color:#b3593f; }
.repair-copy { position:relative;border:1px solid transparent;padding:6px;margin:-6px; }
.v2-page .repair-copy p { font-size:14px;line-height:1.6;color:#c9b4a0;transition:color 360ms var(--demo-ease-out); }
.repair-cta { position:relative;display:block;width:192px;margin-top:28px; }
.repair-cta > span:first-child { display:flex;justify-content:space-between;padding:13px 18px;background:#b3593f;color:white;font-size:12px; }
.repair-cta small { display:block;font-size:10px;padding-top:9px;opacity:0;transform:translateY(4px);transition:opacity 240ms var(--demo-ease-out),transform 360ms var(--demo-ease-out); }
.repair-image { position:relative;height:375px;background:#e4d7c9;overflow:hidden;border:1px solid transparent; }
.repair-image > img { width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 440ms var(--demo-ease-out); }
.repair-missing { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#a38e7e;font-size:11px; }
.repair-missing svg { width:42px;height:42px; }
.repair-issue { position:absolute;display:block;z-index:2;top:-12px;right:6px;padding:4px 8px;background:#fff4ee;color:#9f3f2b;border:1px solid #c58d7a;border-radius:3px;font-size:9px;line-height:1.4;opacity:0;transform:translateY(5px);transition:opacity 180ms var(--demo-ease-out),transform 240ms var(--demo-ease-out); }
.repair-image > .repair-issue { top:12px;right:12px; }
.repair-image-fixed { position:absolute;bottom:12px;left:12px;font-size:10px;background:#fff;padding:6px 10px;border-radius:20px;opacity:0;transition:opacity 200ms var(--demo-ease-out); }
.repair-lower { display:flex;justify-content:space-between;gap:24px;padding-top:22px;margin:0 42px;border-top:1px solid #392b2633; }
.repair-lower > span { font:400 27px/1.18 Georgia,serif;letter-spacing:-.7px; }
.repair-lower > b { font-size:11px;font-weight:400;line-height:1.8; }
.repair-scan { position:absolute;left:0;right:0;top:0;height:2px;z-index:5;opacity:0;background:#b3593f80;box-shadow:0 8px 32px 5px #b3593f25;pointer-events:none; }
.repair-scan > span { position:absolute;right:20px;bottom:10px;font-size:9px;padding:5px 9px;background:#fff;border:1px solid #e0d0c4;border-radius:20px;color:#6a493b; }
.v2-case-demo[data-example="repair"][data-phase="1"] .repair-scan { opacity:1;animation:repair-page-scan 1100ms cubic-bezier(.37,0,.63,1) both; }
.v2-case-demo[data-example="repair"][data-phase="1"] .repair-issue,.v2-case-demo[data-example="repair"][data-phase="2"] .repair-cta .repair-issue { opacity:1;transform:none; }
.v2-case-demo[data-example="repair"][data-phase="1"] .repair-copy,.v2-case-demo[data-example="repair"][data-phase="1"] .repair-image { border-color:#c58d7a; }
.v2-case-demo[data-example="repair"][data-phase="2"] .repair-image > img,.v2-case-demo[data-example="repair"][data-phase="3"] .repair-image > img { opacity:1; }
.v2-case-demo[data-example="repair"][data-phase="2"] .repair-copy p,.v2-case-demo[data-example="repair"][data-phase="3"] .repair-copy p { color:#59483c; }
.v2-case-demo[data-example="repair"][data-phase="2"] .repair-image-fixed,.v2-case-demo[data-example="repair"][data-phase="3"] .repair-image-fixed,.v2-case-demo[data-example="repair"][data-phase="3"] .repair-cta small { opacity:1;transform:none; }
@keyframes repair-page-scan { from {transform:translateY(100px)} to {transform:translateY(595px)} }
@media(prefers-reduced-motion:reduce) { .repair-scan{display:none}.repair-image > img,.repair-copy p,.repair-issue,.repair-cta small,.repair-image-fixed{transition:none} }

/* MAISON: a language change preserves the whole page composition. */
.demo-hotel { color: #f6f1e7!important; background: #5a5643; }.hotel-photo { object-position: 58% 50%; }.hotel-wash { background: linear-gradient(90deg,#24251dd9,#24251d33); }.demo-hotel .demo-nav { border-color: #ffffff33; }.demo-hotel .demo-nav > b { font: 400 26px Georgia,serif; letter-spacing: .15em; }
.hotel-language { position: absolute; display: flex; align-items: center; gap: 12px; right: 42px; top: 115px; font-size: 12px; }.hotel-language > b { border: 1px solid #ffffff88; border-radius: 20px; padding: 5px 10px; }
.hotel-copy { position: absolute; left: 42px; right: 30px; top: 260px; }.hotel-copy .demo-before,.hotel-copy .demo-after { position: absolute; inset: 0; }.v2-page .hotel-copy h4 { font-family: Georgia,serif; font-size: 57px; letter-spacing: -.055em; }.v2-page .hotel-copy p { font-size: 9px; letter-spacing: .15em; margin-bottom: 22px; }.hotel-copy span { display: block; font-size: 13px; margin-top: 24px; }.hotel-copy b { display: inline-flex; padding: 12px 18px; margin-top: 24px; background: #f6f1e7; color: #3e3b2d; font-size: 12px; }

/* NORTHLINE: the client completes a simple, welcoming setup. */
.demo-onboarding { background: #eceafb; color: #343058; }.demo-onboarding .demo-nav > b { font-size: 29px; }
.onboarding-heading { position: relative; margin: 32px 42px 27px; }.welcome-star { position: absolute; top: 15px; right: 10px; color: #a49bdd; font-size: 110px; line-height: 1; }.v2-page .onboarding-heading p:last-child { font-size: 13px; margin-top: 16px; }
.onboarding-steps { display: grid; gap: 12px; margin: 0 42px; }.onboarding-steps > div { display: flex; align-items: center; gap: 18px; padding: 16px 20px; background: #ffffffbb; border: 1px solid #dad6ee; border-radius: 8px; }.onboarding-steps > div > span { font-size: 11px; color: #a39abc; }.onboarding-steps > div > div { flex: 1; }.onboarding-steps b { display: block; font-size: 16px; }.onboarding-steps small { display: block; font-size: 10px; color: #a39abc; margin-top: 3px; }.onboarding-steps strong { display: grid; place-items: center; width: 24px; height: 24px; background: #dad5f2; border-radius: 50%; color: #70679c; font-size: 12px; }

@media (max-width:1250px) { .v2-page .v2-case-panel { gap: 30px; grid-template-columns: minmax(0,.65fr) minmax(0,1.7fr); } }
@media (max-width:1050px) { .v2-page .v2-case-panel { grid-template-columns: minmax(0,1fr); gap: 32px; }.v2-page .v2-case-copy { max-width: 600px; } }
@media (max-width:679px) { .v2-page .v2-case-panel { gap: 24px; }.v2-page .v2-case-demo { padding: 0; border-radius: 10px; }.case-demo-viewport { border-radius: 10px; } }
@media (prefers-reduced-motion:reduce) { .v2-case-demo [data-beat],.v2-case-demo .demo-before,.v2-case-demo .demo-after,.case-native-frame { transition: opacity 120ms ease; } }

/* One light cloud illustration is the poster and the moving backdrop. */
.v2-page .v2-case-demo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px 28px;
  border-radius: 26px;
  background: #fff;
}
.v2-page .v2-case-demo::before,
.v2-page .v2-case-demo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.v2-page .v2-case-demo::before {
  z-index: -2;
  inset: -10% -14%;
  background: #d9eaf1 url('/lp1-assets/clouds.webp') center / cover no-repeat;
  transform: translate(8%,2%);
}
.v2-page .v2-case-demo::after {
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,#fff 0%,#ffffff00 34%), linear-gradient(0deg,#fff 0%,#ffffff00 34%);
}
#use-cases[data-clouds-ready="true"] .v2-case-demo::before {
  animation: case-cloud-drift 18s linear infinite alternate;
  animation-delay: var(--case-cloud-delay,0ms);
  animation-play-state: paused;
}
#use-cases[data-clouds-playing="true"] .v2-case-panel:not([hidden]) .v2-case-demo::before {
  animation-play-state: running;
}
@keyframes case-cloud-drift {
  from { transform: translate(8%,2%); }
  to { transform: translate(-8%,-2%); }
}
@media (max-width: 1050px) { .v2-page .v2-case-demo { padding: 26px 22px; } }
@media (max-width: 679px) { .v2-page .v2-case-demo { padding: 14px 12px; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) {
  #use-cases .v2-case-demo::before { animation: none; transform: translate(8%,2%); }
}