.how-hero{position:relative;text-align:left;background:#f5f7fa;padding:58px 0 72px;overflow:hidden}
.how-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:58px;align-items:center;min-height:500px}
.how-hero-copy{max-width:650px}
.how-hero h1{font-size:clamp(48px,5.2vw,70px);line-height:1.04;letter-spacing:-2.8px;font-weight:600;margin:19px 0 24px}
.how-hero h1 span{color:var(--brand-indigo)}
.how-hero-lead{max-width:580px;font-size:21px;line-height:1.5;color:#52636f}
.how-hero-promise{display:flex;align-items:center;gap:10px;margin-top:20px!important;color:#334656;font-size:16px;font-weight:600}
.how-hero-promise i{color:var(--brand-indigo)}
.how-hero .btn{display:inline-flex;align-items:center;gap:12px;margin-top:27px}
.how-hero-visual{position:relative;margin:0;padding:10px;background:#fff;border:1px solid #e3e7ec;border-radius:8px;box-shadow:0 24px 56px #222f3e18;transform:perspective(1300px) rotateY(-2deg)}
.how-hero-visual>img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top left;border-radius:4px}
.how-hero-visual figcaption{display:flex;align-items:center;gap:12px;padding:14px 7px 4px;color:#334656}
.hero-caption-mark{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#e8f7fa;color:var(--brand-indigo);font-size:17px;flex:none}
.how-hero-visual figcaption strong,.how-hero-visual figcaption small{display:block}
.how-hero-visual figcaption strong{font-size:15px;font-weight:600}
.how-hero-visual figcaption small{margin-top:2px;font-size:13px;color:#70808a}
.section-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:55px;align-items:end}
.section-heading h2,.difference-intro h2,.next-step-section h2{font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:-1.4px;font-weight:600;margin-top:14px}
.section-heading>p{font-size:19px;line-height:1.55;color:#60717e}
.method-section{padding:82px 0 88px;background:#f5f7fa}
.journey-section{padding:88px 0 95px;background:#fff}
.journey-heading{margin-bottom:31px}
.workflow-list{max-width:1120px;margin:0 auto}
.workflow-step{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:62px;align-items:center;padding:47px 0;border-top:1px solid #e5eaed}
.workflow-step--reverse .workflow-copy{order:2}
.workflow-step--reverse .workflow-image{order:1}
.workflow-copy{max-width:430px}
.workflow-number{font-size:19px;line-height:1.2;font-weight:600;color:var(--brand-indigo)}
.workflow-kicker{margin-top:15px!important;font-size:13px;line-height:1.2;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#72818a}
.workflow-copy h3{font-size:29px;line-height:1.15;letter-spacing:-.4px;font-weight:600;margin-top:9px}
.workflow-copy>p:last-child{font-size:17px;line-height:1.55;color:#60717e;margin-top:14px}
.workflow-image{margin:0;padding:8px;background:#f5f7fa;border:1px solid #e3e7ec;border-radius:6px;box-shadow:0 13px 32px #222f3e0b}
.workflow-image img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top left;border-radius:3px}
.workflow-image figcaption{padding:10px 4px 2px;font-size:13px;color:#71808a}
.workflow-output{padding:16px;background:#f5f7fa}
.output-sheet{max-width:820px;margin:0 auto;padding:24px 30px;background:#fff;border:1px solid #e3e7ec;box-shadow:0 6px 22px #222f3e0a;color:#222f3e}
.output-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-bottom:15px;border-bottom:1px solid #e3e7ec;font-size:12px;color:#70808a}
.output-toolbar span:last-child{display:inline-flex;align-items:center;gap:7px;color:#1378a2;font-weight:600}
.output-kicker{margin-top:20px!important;color:#1378a2;font-size:10px;line-height:1.3;font-weight:700;letter-spacing:.9px}
.output-kicker span{padding:0 5px;color:#a3b0b8}
.output-sheet h4{margin-top:9px;font-size:25px;line-height:1.2;font-weight:600;letter-spacing:-.4px}
.output-summary{max-width:630px;margin-top:8px!important;color:#60717e;font-size:14px;line-height:1.45}
.output-rule{height:2px;margin-top:18px;background:#21abcf}
.output-sheet h5{margin:17px 0 6px;font-size:15px;font-weight:600}
.output-principle{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:9px 0;border-top:1px solid #e6ebee;font-size:13px;line-height:1.4}
.output-principle strong{font-weight:600}
.output-principle span{color:#60717e}
.output-label{display:inline-block;margin-top:17px!important;padding:4px 8px;border-radius:3px;background:#eef7f9;color:#1378a2;font-size:10px;line-height:1.2;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.difference-section{background:#222f3e;color:#fff;padding:84px 0 78px}
.difference-section .eyebrow{color:#79d6e9}
.difference-intro{max-width:750px;margin-bottom:36px}
.difference-intro h2{margin-top:13px}
.difference-intro>p:last-child{max-width:680px;margin-top:16px;font-size:19px;line-height:1.55;color:#c5d2db}
.difference-table-wrap{overflow-x:auto;border:1px solid #526574;border-radius:5px}
.difference-table{width:100%;border-collapse:collapse;text-align:left}
.difference-table th,.difference-table td{padding:17px 21px;vertical-align:top;border-bottom:1px solid #526574;font-size:16px;line-height:1.45}
.difference-table thead th{font-size:14px;color:#79d6e9;font-weight:600;background:#1d2936}
.difference-table tbody th{width:16%;color:#fff;font-size:16px;font-weight:600;white-space:nowrap}
.difference-table tbody td{width:42%;color:#c5d2db}
.difference-table tbody td:last-child{color:#fff}
.difference-table tbody tr:last-child>*{border-bottom:0}
.difference-footnote{display:flex;align-items:center;gap:11px;margin-top:20px!important;color:#d3e0e6;font-size:15px}
.difference-footnote i{color:#79d6e9}
.next-step-section{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:55px;padding-top:78px;padding-bottom:84px}
.next-step-section h2{max-width:620px}
.next-step-section>div:last-child>p{max-width:500px;margin-bottom:21px;font-size:19px;line-height:1.55;color:#60717e}
.next-step-section .btn{display:inline-flex;align-items:center;gap:11px}
.how-detail-link{display:inline-flex;align-items:center;gap:11px;margin-top:23px;color:#79d6e9;text-decoration:none}
.how-detail-link:hover{color:#fff}
@media(max-width:1050px){.how-hero-grid{grid-template-columns:1fr 1fr;gap:35px;min-height:420px}.how-hero h1{font-size:clamp(44px,5.5vw,60px)}.section-heading{gap:35px}.workflow-step{gap:38px}.workflow-copy h3{font-size:26px}}
@media(max-width:700px){.how-hero{padding:37px 0 48px}.how-hero-grid{grid-template-columns:1fr;gap:30px;min-height:0}.how-hero h1{font-size:clamp(43px,10vw,58px);letter-spacing:-1.8px;margin:14px 0 18px}.how-hero-lead{font-size:19px}.how-hero-visual{transform:none}.how-hero-visual figcaption{padding:11px 3px 2px}.section-heading{grid-template-columns:1fr;gap:17px}.section-heading h2,.difference-intro h2,.next-step-section h2{font-size:36px;letter-spacing:-.8px}.section-heading>p{font-size:17px}.method-section,.journey-section{padding:58px 0 63px}.journey-heading{margin-bottom:19px}.workflow-step{grid-template-columns:1fr;gap:20px;padding:29px 0 35px}.workflow-step--reverse .workflow-copy,.workflow-step--reverse .workflow-image{order:initial}.workflow-copy h3{font-size:25px}.workflow-copy>p:last-child{font-size:16px}.workflow-image{padding:6px}.workflow-image img{aspect-ratio:1.55/1}.workflow-output{padding:6px}.output-sheet{padding:17px 17px}.output-sheet h4{font-size:21px}.output-principle{grid-template-columns:85px 1fr;gap:10px;font-size:12px}.difference-section{padding:59px 0 56px}.difference-intro{margin-bottom:25px}.difference-intro>p:last-child{font-size:17px}.difference-table{min-width:690px}.difference-table th,.difference-table td{padding:13px 15px;font-size:14px}.difference-table thead th{font-size:12px}.difference-table tbody th{font-size:14px}.difference-footnote{font-size:14px;align-items:flex-start;line-height:1.45}.next-step-section{grid-template-columns:1fr;gap:20px;padding-top:57px;padding-bottom:61px}.next-step-section>div:last-child>p{font-size:17px}.how-detail-link{margin-top:19px}}


.difference-visual{width:100%;max-width:620px;aspect-ratio:1.27/1;margin:0 auto;overflow:hidden;border:1px solid #526574;border-radius:8px;background:#1d2936;box-shadow:0 18px 42px #101b2733}
.difference-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
html.has-scroll-reveal .difference-visual[data-reveal-on-view]{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
html.has-scroll-reveal .difference-visual[data-reveal-on-view].is-visible{opacity:1;transform:none}
@media(max-width:1050px){.difference-visual{max-width:760px}}
@media(max-width:700px){.difference-visual{max-width:none;aspect-ratio:1.16/1}}
@media(prefers-reduced-motion:reduce){html.has-scroll-reveal .difference-visual[data-reveal-on-view]{opacity:1;transform:none;transition:none}}

/* A more tangible comparison: generic AI leaves the workflow to the user; Vivet brings a method. */
.difference-showcase{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:54px;row-gap:30px;align-items:center}
.difference-intro{max-width:none;margin:0}
.difference-intro h2{max-width:620px;margin-top:14px;font-size:clamp(40px,4.2vw,54px);line-height:1.05;letter-spacing:-1.7px}
.difference-subhead{margin-top:20px!important;color:#fff;font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.3px}
.difference-intro .difference-lead{max-width:620px;margin-top:13px!important;color:#c5d2db;font-size:17px;line-height:1.55}
.difference-intro .difference-focus{display:flex;align-items:flex-start;gap:11px;margin-top:20px!important;padding:2px 0 2px 15px;border-left:3px solid #79d6e9;color:#dce7ec;font-size:15px;line-height:1.5}
.difference-focus i{margin-top:4px;color:#79d6e9}
.difference-focus strong{color:#fff;font-weight:600}
.difference-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.difference-path{min-width:0;padding:21px 18px 17px;border:1px solid #526574;border-radius:6px;background:#2a3745;color:#fff}
.difference-path--vivet{border-color:#79d6e9;background:#fff;color:#222f3e;box-shadow:0 10px 26px #101b271a}
.difference-path-kicker{font-size:11px;line-height:1.2;font-weight:700;letter-spacing:1px;color:#a7bac6}
.difference-path--vivet .difference-path-kicker{color:#1378a2}
.difference-path h3{min-height:54px;margin-top:12px;font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.3px}
.difference-path ol{margin:16px 0 0;padding:0;list-style:none}
.difference-path li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:7px;align-items:start;padding:11px 0;border-top:1px solid #526574;color:#e0e8ed;font-size:14px;line-height:1.4}
.difference-path--vivet li{border-color:#e3e7ec;color:#334656}
.difference-path-number{font-size:11px;line-height:1.6;font-weight:700;color:#79d6e9}
.difference-path--vivet .difference-path-number{color:#1378a2}
.difference-path-note{min-height:43px;margin-top:7px!important;padding-top:12px;border-top:1px solid #526574;color:#b9c8d1;font-size:12px;line-height:1.4}
.difference-path--vivet .difference-path-note{border-color:#e3e7ec;color:#52636f}
.difference-showcase .difference-footnote{grid-column:1/-1;align-items:flex-start;gap:12px;margin-top:2px!important;padding-top:21px;border-top:1px solid #526574;color:#d3e0e6;font-size:16px;line-height:1.5}
.difference-showcase .difference-footnote i{margin-top:3px;flex:none}
.difference-showcase .difference-footnote strong{color:#fff;font-weight:600}
@media(max-width:1050px){.difference-showcase{grid-template-columns:1fr;row-gap:30px}.difference-intro{max-width:800px}.difference-paths{max-width:850px}}
@media(max-width:700px){.difference-showcase{row-gap:24px}.difference-intro h2{font-size:36px;letter-spacing:-.8px}.difference-subhead{margin-top:16px!important;font-size:21px}.difference-intro .difference-lead{font-size:17px}.difference-paths{grid-template-columns:1fr}.difference-path{padding:19px 18px 15px}.difference-path h3{min-height:0;font-size:21px}.difference-path ol{margin-top:12px}.difference-path li{padding:10px 0}.difference-path-note{min-height:0}.difference-showcase .difference-footnote{font-size:14px}}