/* Audit-led comparison variant. Reuses the approved guide SVG masters. */
.brand-accent{color:#0f6a83}
.brand:hover .brand-accent{color:#0a596f}
.site-foot .wrap{color:#626269}
.legal-card a{text-decoration:underline;text-underline-offset:.14em}
.symbol-defs{position:absolute;overflow:hidden}
.hero .lead{max-width:780px}
.hero-action{display:inline-flex;align-items:center;gap:10px;margin:28px 0 8px;font-size:20px}
.hero .heroart{margin-top:20px}
.outside-story{background:#111216!important;color:#fff}
.outside-story .kicker{color:#7bd5e6}
.outside-story h2{max-width:950px}
.outside-story .accent{color:#65c9dd}
.outside-story .map-choice{justify-content:flex-start;align-items:center;margin:32px 0 42px}
.outside-story .map-choice label{color:#d0d5db}
.outside-story .map-choice select{background:#20242b;color:#fff;border:1px solid #647580}
.journey-line{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.7fr) minmax(0,1fr);gap:20px;align-items:start;max-width:1100px;margin:auto}
.journey-line:before{content:'';position:absolute;top:118px;left:17%;right:17%;border-top:3px solid #5ac8dc;opacity:.75}
.journey-step{position:relative;z-index:1;text-align:center;min-width:0}
.journey-step .object{display:block;width:clamp(145px,15vw,205px);height:clamp(145px,15vw,205px);margin:0 auto 18px}
.step-number{position:absolute;top:0;left:13%;font-size:18px;color:#7bd5e6;font-weight:750}
.step-label{display:block;color:#9cabb5;font-size:19px;margin-bottom:10px}
.journey-step strong{display:block;font-size:clamp(23px,2.2vw,32px);line-height:1.18;letter-spacing:-.025em}
.journey-gap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;min-height:235px;padding-top:75px}
.gap-marker{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:#f3a785;color:#1d1d1f;box-shadow:0 0 0 13px #111216}
.gap-marker span{font-size:56px;font-weight:750;line-height:1}
.journey-gap strong{max-width:270px;margin-top:24px;color:#ffd3c2;font-size:clamp(21px,1.8vw,27px);line-height:1.2}
.journey-resolution{display:flex;align-items:center;gap:18px;max-width:780px;margin:60px auto 0;padding:23px 28px;border-top:1px solid #50616b;border-bottom:1px solid #50616b}
.journey-resolution .object{width:95px;height:95px;flex:none}
.journey-resolution span{display:block;color:#7bd5e6;font-size:19px;font-weight:750;margin-bottom:5px}
.journey-resolution strong{font-size:clamp(24px,2.2vw,31px);line-height:1.2}
.story-explainer{max-width:820px;margin:25px auto 0;color:#b9c5cb;text-align:center;font-size:19px;line-height:1.45}
.process .lead{max-width:800px}
.process .workbench{margin-top:50px}
.pricing-note{max-width:900px}
.pricing-terms{max-width:900px;margin:32px auto 0;border-top:1px solid #d8dce0;padding-top:18px}
.pricing-terms summary{color:#0f6a83;font-size:18px;font-weight:700}
.pricing-terms .pricing-note{margin:16px 0 0;line-height:1.5}
.comic-section h2{font-size:clamp(43px,5.6vw,74px);line-height:1.04;letter-spacing:-.045em}
.contact-actions{margin-bottom:30px}
.contact-actions .email-button{font-weight:700;color:#0f6a83;cursor:pointer}
.contact-actions .email-button:hover,.contact-actions .email-button:focus-visible{background:#e7f6f9}
.contact .question-preview{margin-top:0}
.contact .question-preview summary{cursor:pointer}
.reply-choice{display:flex;flex-wrap:wrap;gap:12px 20px;margin:26px 0 18px;padding:18px 0;border:0;border-top:1px solid #d8dce0}
.reply-choice legend{padding:0 0 8px;font-size:21px;font-weight:700;text-align:left}
.reply-choice label{display:inline-flex;align-items:center;gap:9px;font-size:19px;cursor:pointer}
.reply-choice input{width:20px;height:20px;accent-color:#0f6a83}
.call-number{margin:0 0 18px;text-align:left}
.call-number[hidden]{display:none}
.call-number label{display:block;font-size:19px;font-weight:700;margin-bottom:8px}
.call-number input{display:block;width:min(400px,100%);padding:13px 16px;border:1px solid #c8d0d5;border-radius:12px;font:inherit;font-size:20px}
.contact .questions-send{display:inline-flex}
@media(max-width:750px){
 .hero-action{margin-top:24px}
 .outside-story .map-choice{display:block}
 .journey-line{grid-template-columns:1fr;gap:24px}
 .journey-line:before{top:88px;bottom:88px;left:50%;right:auto;border-top:0;border-left:3px solid #5ac8dc}
 .journey-step .object{width:150px;height:150px;margin-bottom:8px}
 .journey-step .step-number{position:static;display:block;transform:none;margin:0 auto 8px}
 .journey-gap{min-height:0;padding:0}
 .gap-marker{width:68px;height:68px;box-shadow:0 0 0 10px #111216}
 .gap-marker span{font-size:45px}
 .journey-gap strong{margin-top:16px;background:#111216;padding:5px}
 .journey-resolution{margin-top:45px;padding:20px 0}
 .journey-resolution .object{width:72px;height:72px}
 .reply-choice{display:grid;gap:12px}
}

/* The guide illustrations share the Pricing artwork's quiet lift on pointer hover.
   Use translate so the hero's existing rotation and centring stay intact. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .heroart .object,.process .workbench .object,.journey-step .object,.journey-gap .gap-marker,.journey-resolution .object{transition:translate .35s cubic-bezier(.25,1,.5,1)}
 .heroart .object:hover,.process .workbench .object:hover,.journey-step .object:hover,.journey-gap .gap-marker:hover,.journey-resolution .object:hover{translate:0 -6px}
}
.mobile-menu{display:none}
select:focus-visible,textarea:focus-visible{outline:3px solid #0f6a83;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.comic{scroll-snap-type:none!important}}
/* Two simultaneous perspectives, not numbered stages. */
.journey-step .step-number{left:50%;transform:translateX(-50%);white-space:nowrap;font-size:16px}
@media(max-width:750px){
 .journey-step .step-number{position:static;left:auto;transform:none;white-space:normal;text-align:center;margin:0 auto 8px}
}
@media(max-width:360px){
 .topinner{flex-wrap:wrap!important;gap:4px 8px!important}
 .topinner>.brand{flex-basis:100%;font-size:20px}
 .toplinks{width:100%!important;justify-content:space-between!important;margin-left:0!important}
 .mobile-menu>div{right:0}
}
/* Mobile review: phone-sized type and layouts, without changing the desktop composition. */
@media(max-width:600px){
 :root{--bar-height:76px;--mobile-gutter:20px}
 html{scroll-padding-top:calc(var(--bar-height) + 12px);-webkit-text-size-adjust:100%}
 body{overflow-x:hidden}
 .topbar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
 .topinner{min-height:var(--bar-height);padding:12px var(--mobile-gutter);display:flex;flex-direction:row;align-items:center;gap:12px}
 .brand{font-size:clamp(17px,4.6vw,20px);white-space:nowrap;letter-spacing:-.055em}
 .toplinks{width:auto;min-width:0;gap:12px;justify-content:flex-end;margin-left:auto;font-size:15px}
 .toplinks a{white-space:nowrap}
 .toplinks>a:not(.pill){display:none}
 .mobile-menu{position:relative;display:block}
 .mobile-menu summary{list-style:none;font-size:14px;font-weight:650;white-space:nowrap;padding:10px 2px;color:var(--ink)}
 .mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu summary:after{content:' ▾';font-size:11px}
 .mobile-menu>div{position:absolute;top:calc(100% + 8px);right:-105px;z-index:35;display:grid;width:min(270px,calc(100vw - 32px));padding:9px;border:1px solid #dbe4e8;border-radius:16px;background:#fff;box-shadow:0 14px 35px #11121624}
 .toplinks .mobile-menu>div a{display:block!important;padding:12px 14px;font-size:17px;color:var(--ink);border-radius:9px}
 .mobile-menu>div a:focus-visible,.mobile-menu>div a:hover{background:#eaf5f8}
 .toplinks .pill{font-size:14px;padding:10px 12px}
 main>.chapter{padding:60px 0!important}
 main>.chapter>.wrap,main>.hero>.wrap{width:calc(100% - var(--mobile-gutter)*2)}
 main>.hero{padding:48px 0 54px!important}
 main>.chapter h2{font-size:clamp(35px,9.1vw,47px);line-height:1.07;letter-spacing:-.045em;overflow-wrap:normal}
 main>.chapter .lead{font-size:18px;line-height:1.42;font-weight:450}
 main>.chapter .kicker,.support .kicker{font-size:16px;line-height:1.25;margin-bottom:14px}
 .hero h1{font-size:clamp(42px,10.7vw,55px);line-height:1.04;letter-spacing:-.055em}
 .hero .lead{margin-top:18px}
 .hero-action{font-size:17px;margin-top:22px}
 .heroart{height:250px;margin-top:26px}
 .hero-person{width:180px!important;height:180px!important;top:20px}
 .hero-chat{width:90px!important;height:90px!important}
 .hero-shield{width:100px!important;height:100px!important;top:96px}
 .hero-note{font-size:15px;bottom:0}
 .outside-story .map-choice{margin:24px 0 30px}
 .outside-story .map-choice label{font-size:17px;margin-bottom:8px}
 .outside-story .map-choice select{min-width:0;width:100%;font-size:17px;padding:12px 40px 12px 14px}
 .journey-line{gap:26px}
 .journey-line:before{top:70px;bottom:70px}
 .journey-step .object{width:105px;height:105px;margin-bottom:8px}
 .step-number{font-size:15px;left:calc(50% - 82px)}
 .step-label{font-size:16px;margin-bottom:5px}
 .journey-step strong{font-size:21px;line-height:1.2}
 .gap-marker{width:50px;height:50px}
 .gap-marker span{font-size:33px}
 .journey-gap strong{font-size:18px;margin-top:8px;max-width:300px}
 .journey-resolution{margin-top:34px;gap:14px}
 .journey-resolution .object{width:55px;height:55px}
 .journey-resolution span{font-size:16px}
 .journey-resolution strong{font-size:19px}
 .story-explainer{font-size:16px;line-height:1.4}
 .process .workbench{margin-top:35px;display:grid;grid-template-columns:1fr;gap:0;text-align:left}
 .process .workbench>div{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 0;border-top:1px solid #dbe4e8}
 .process .workbench .object{grid-row:1/3;width:64px;height:64px;margin:0}
 .process .workbench h3{font-size:21px;line-height:1.2;margin:0 0 5px}
 .process .workbench p{font-size:17px;line-height:1.35;margin:0}
 .process .workbench .arrow{display:none}
 .pricing-cards{margin:24px 0 18px}
 .pricing .home-price-card,.pricing .home-price-card.featured{padding:24px 0}
 .pricing .price-art{height:68px}
 .pricing .price-art .object{width:62px;height:62px}
 .pricing .price-stage{font-size:16px}
 .pricing .home-price-card h3{font-size:25px;margin:10px 0}
 .pricing .home-price{font-size:35px;line-height:1.08}
 .pricing .standard{font-size:16px;min-height:0}
 .pricing .price-blurb{font-size:17px;line-height:1.35;margin:16px 0}
 .pricing .price-cta{font-size:17px}
 .pricing .pricing-note{font-size:15px;line-height:1.45;text-align:left}
 .about-layout{gap:25px;margin-top:20px}
 .about-layout p:not(.lead){font-size:17px;line-height:1.45}
 .about-layout a{font-size:17px}
 .about-photos{gap:12px}
 .about-photos img{height:clamp(175px,49vw,240px);border-radius:16px}
 .about-photos figcaption{font-size:14px;line-height:1.25}
 .comic-section{padding:55px var(--mobile-gutter) 35px}
 .comic-section h2{font-size:clamp(35px,9vw,45px);line-height:1.08;letter-spacing:-.04em;overflow-wrap:anywhere}
 .comic-subtitle{font-size:17px;line-height:1.4}
 .comic{gap:12px}
 .comic img{width:100%;flex:0 0 100%;border-radius:12px}
 .comic-more{font-size:17px}
 .contact .lead{font-size:18px}
 .contact-actions{margin-top:26px;margin-bottom:26px;gap:10px}
 .contact-actions .button{font-size:17px;padding:15px 17px;line-height:1.25}
 .contact details{padding:17px 0}
 .contact details summary{font-size:18px;line-height:1.3}
 .contact .questions-intro,.contact .questions-note{font-size:16px}
 .question-card{padding:17px}
 .question-head{grid-template-columns:30px minmax(0,1fr);gap:10px}
 .question-head label{font-size:18px}
 .question-card textarea{font-size:17px;min-height:140px}
 .site-foot{padding:30px 0 45px;min-height:0}
 .site-foot .wrap{width:calc(100% - var(--mobile-gutter)*2)}
 .site-foot p,.site-foot a{font-size:16px!important;line-height:1.45}
 .site-foot span{display:flex;flex-wrap:wrap;gap:10px 18px}
 /* The phone-sized reading floor applies to supporting labels too. */
 .mobile-menu summary,.toplinks .pill,.hero-note,.about-photos figcaption,.question-head b,.legal-local-nav a{font-size:16px!important}
}
/* On phones these are two views of the same moment, followed by the gap. */
@media(max-width:600px){
 .journey-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start}
 .journey-line:before{display:none}
 .journey-step:first-child{grid-column:1;grid-row:1}
 .journey-step:last-child{grid-column:2;grid-row:1}
 .journey-step .step-number{font-size:16px;min-height:40px;display:flex;align-items:center;justify-content:center;margin:0 0 6px}
 .journey-step .object{width:95px;height:95px;margin:0 auto 10px}
 .journey-step .step-label{display:none}
 .journey-step strong{font-size:19px;line-height:1.22;min-height:70px}
 .journey-gap{grid-column:1/-1;grid-row:2;min-height:0;margin-top:14px;padding:23px 10px 0;border-top:1px solid #50616b}
 .gap-marker{width:52px;height:52px;box-shadow:none}
 .journey-gap strong{font-size:21px;max-width:320px;margin:12px 0 0;padding:0}
 .journey-resolution{margin-top:25px}
}
@media(max-width:360px){
 .journey-line{gap:0 10px}
 .journey-step strong{font-size:18px}
}