/* The approved hero replaces the previous homepage opening. */
.home-nav{height:104px;max-width:1376px;margin:auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between;color:#171719;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.home-nav img{display:block;object-fit:contain;width:132px;height:auto}.home-nav nav{display:flex;gap:34px;font-size:16px}.home-nav a{color:inherit;text-decoration:none}.home-nav a:hover{text-decoration:underline}.home-nav a:focus-visible{outline:2px solid #c41230;outline-offset:4px}
[data-presage-hero]{display:block;color-scheme:light}
#introducing{padding-top:80px;padding-bottom:80px}
#introducing .ie-in{align-items:start;row-gap:28px}
#introducing .ie-copy{max-width:640px}
#introducing .ie-copy .ie-p{margin-top:0}
#introducing .ie-how{order:initial;margin:24px 0 0}
@media(max-width:950px){.home-nav{height:88px;padding:0 28px}}
@media(max-width:540px){.home-nav{height:80px;padding:0 20px}.home-nav img{width:104px}.home-nav nav{gap:14px;font-size:11px}#introducing{padding-top:52px;padding-bottom:52px}}
@media(max-width:360px){.home-nav{padding:0 16px}.home-nav img{width:88px}.home-nav nav{gap:10px;font-size:10px}}
/* The old demo used display:contents to move its copy around the visual.
   With the visual promoted to the hero, preserve normal reading order. */
#introducing .ie-t{display:block;order:initial;padding:0}
#introducing .ie-h,#introducing .ie-p{padding:0}
@media(max-width:899px){#introducing .ie-in{row-gap:22px}#introducing .ie-h{margin:0}}

/* Match the existing mobile picture-card / title / body pattern. */
.home-mobile-header{display:none}
@media(max-width:639px){
 .home-nav{display:none}
 .home-mobile-header{display:block;position:relative;height:88px}
 #introducing{padding-top:32px;padding-bottom:0}
 #introducing .ie-in{display:block;padding-left:calc(6.25vw + 25px);padding-right:calc(6.25vw + 25px)}
 #introducing .ie-t{margin:0}
 #introducing .ie-h{margin:0;font-size:28px;line-height:32px}
 #introducing .ie-copy .ie-p{margin:16px 0 0;font-size:17px;line-height:1.42}
 #introducing .ie-how{margin:12px 0 0}
}

/* Align the navigation and supporting copy with the revised hero. */
.home-nav{height:88px;font-family:"Geist",sans-serif}
@media(max-width:639px){
 .home-mobile-header,.home-mobile-header .hd-in{height:72px}
 #introducing{padding-top:24px}
 #introducing .ie-in{padding-left:28px;padding-right:28px}
 #introducing .ie-h{font-size:28px;line-height:1.15;letter-spacing:-.6px;font-weight:500}
 #introducing .ie-h br{display:none}
 #introducing .ie-copy .ie-p{margin-top:16px;line-height:1.55}
}

/* Mobile navigation follows the supplied device-led reference. */
@media(max-width:639px){
 .home-mobile-header{border-bottom:1px solid #eeeeef}
 .home-mobile-header .logo img{width:124px;height:auto}
 .home-mobile-header .menu-b{background:#fff;color:#171719;border:1px solid #171719;font-size:15px;height:36px;padding:0 16px}
 .home-mobile-header .menu-b:hover,.home-mobile-header .menu-b[aria-expanded="true"]{background:#f5f5f5;color:#171719}
}

/* Deepen the gray through the complete introduction, including the space
   below its link. The white card keeps the supporting copy distinct. */
#introducing{background:linear-gradient(180deg,#e3e3e3 0%,#d2d2d2 100%);padding:40px 24px 64px}
#introducing .ie-in{box-sizing:border-box;width:100%;max-width:1232px;margin-inline:auto;padding:44px 48px;background:#fff;border-radius:24px;box-shadow:0 8px 30px #00000004}
@media(max-width:899px){#introducing .ie-in{padding:36px}}
@media(max-width:639px){
 #introducing{padding:24px 20px 40px}
 #introducing .ie-in{padding:28px 24px;border-radius:20px}
 #explainer-tour{padding-top:48px}
}
@media(max-width:360px){
 #introducing{padding-inline:16px}
 #introducing .ie-in{padding:24px 20px}
}

/* Mobile header treatment from the user's hero reference. */
@media(max-width:639px){
 .home-mobile-header{border-bottom:0}
 .home-mobile-header .logo img{width:104px}
 .home-mobile-header .menu-b{background:#090909;color:#fff;border-color:#090909;padding-inline:20px}
 .home-mobile-header .menu-b:hover,.home-mobile-header .menu-b[aria-expanded="true"]{background:#292929;color:#fff}
}

/* Compact the opening so more of the unchanged devices enters the first view. */
.home-nav{height:64px}
.home-nav img{width:112px}
.home-nav nav{font-size:14px;gap:28px}
@media(max-width:639px){
 .home-mobile-header,.home-mobile-header .hd-in{height:60px}
 .home-mobile-header .logo img{width:96px}
 .home-mobile-header .menu-b{height:32px;padding-inline:18px;font-size:13px}
}

/* Homepage modules: keep each copy group together before its related visual.
   Only layout changes here; typography continues to come from home.css. */
.home-module:is(#explainer-tour,#sdk-dark,#measure) > :is(.ie-in,.f2-in,.cp-in){
 display:flex;flex-direction:column;align-items:stretch;gap:32px;max-width:960px;box-sizing:border-box;padding-inline:24px;
}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-t,.f2-t){display:block;order:0;max-width:680px;padding:0}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-h,.f2-h){margin:0}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-h,.f2-h) br{display:none}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-k,.f2-k){margin:0 0 16px}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-p,.f2-p){display:block;margin:16px 0 0;max-width:62ch}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-v,.f2-vis,.cp-r){order:1;width:100%;box-sizing:border-box}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.sd-dev,.mx-all){margin:20px 0 0}
#sdk-dark.home-module .sd-tabs{order:2;grid-column:auto;margin: -16px 0 0}
#measure.home-module .cp-r{display:block}
#measure.home-module .cp-note{padding:0;margin:20px 0 0}
@media(min-width:640px){
 #sdk-dark.home-module .ie-v{height:440px;aspect-ratio:auto}
}
@media(max-width:639px){
 .home-module:is(#explainer-tour,#sdk-dark,#measure) > :is(.ie-in,.f2-in,.cp-in){gap:28px;padding-inline:6.25vw}
 .home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-t,.f2-t){display:block;padding:0}
 .home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-h,.f2-h){margin:0}
 .home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-p,.f2-p){margin:16px 0 0}
 #sdk-dark.home-module .sd-dev{margin:16px 0 0}
 #sdk-dark.home-module .sd-tabs{margin-top:-12px}
}

/* Reference typography: bright white canvas, bold titles, generous body copy. */
body:has([data-view="site-home"]){background:#fff}
[data-view="site-home"] > :is(.ie,.f2,.cp,.pr){background:#fff}
#introducing{background:#fff}
#introducing .ie-in{box-shadow:none}
[data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-h,.f2-h){font-size:56px;line-height:1.1;font-weight:650;letter-spacing:-.035em}
[data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-p,.f2-p){font-size:32px;line-height:1.45;font-weight:400;letter-spacing:-.02em;color:#7d7d80}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-t,.f2-t){max-width:880px}
.home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-p,.f2-p){margin-top:24px;max-width:48ch}
@media(max-width:899px){
 [data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-h,.f2-h){font-size:44px}
 [data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-p,.f2-p){font-size:26px}
}
@media(max-width:639px){
 [data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-h,.f2-h){font-size:34px;line-height:1.12;letter-spacing:-.03em}
 [data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-p,.f2-p){font-size:21px;line-height:1.48}
 .home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-p,.f2-p){margin-top:20px}
}
@media(max-width:360px){
 [data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-h,.f2-h){font-size:31px}
 [data-view="site-home"] :is(.home-module,#introducing,#pricing) :is(.ie-p,.f2-p){font-size:20px}
}

/* Restore the original Drive design's desktop copy-left / visual-right grid. */
@media(min-width:900px){
 .home-module:is(#explainer-tour,#sdk-dark,#measure) > :is(.ie-in,.f2-in,.cp-in){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:32px clamp(40px,5vw,80px);width:100%;max-width:1280px;padding-inline:24px;margin-inline:auto;box-sizing:border-box}
 .home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-t,.f2-t){grid-column:1;grid-row:1;max-width:none;min-width:0}
 .home-module:is(#explainer-tour,#sdk-dark,#measure) :is(.ie-v,.f2-vis,.cp-r){grid-column:2;grid-row:1;min-width:0}
 #sdk-dark.home-module .sd-tabs{grid-column:2;grid-row:2;margin: -12px 0 0}
 #measure.home-module .cp-note{margin:20px 0 0}
}


/* Pricing, FAQs and the sign-up share one light gray band. */
[data-view="site-home"] > :is(#pricing,#faqs,#get-started){background:#f1f1f3}
[data-view="site-home"] > #pricing{padding-bottom:0}

/* Desktop: the explainer sits on white under "Discover what you can measure", on that module's grid, its video
   in a rounded gray panel like on phones (notes, Oct 28-29). */
@media(min-width:1000px){
 #explainer-tour .ie-v{height:auto;aspect-ratio:16/9;border-radius:26px;background:#f1f1f3}
}
/* Now that the explainer sits above Pricing, it keeps the gap "Two ways" used to give it. */
#explainer-tour.home-module{padding-bottom:112px}
@media(max-width:760px){#explainer-tour.home-module{padding-bottom:72px}}

/* Lower modules line up with the hero: the same content edges (hero copy at left, hero's right edge at
   right) from "Discover what you can measure" down (note, Oct 29). */
@media(min-width:1000px){
 .home-module:is(#explainer-tour,#measure) > :is(.ie-in,.cp-in),#pricing > .pr-in,footer > .wrap{box-sizing:border-box;width:100%;max-width:1600px;margin-inline:auto;padding-inline:88px}
}
/* "Discover what you can measure" (notes, Oct 29): two equal halves split at the middle of the screen. The
   text fills its half (no wide right margin) and the icon grid starts right of centre. */
@media(min-width:1000px){
 #measure.home-module > .cp-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px}
 #measure.home-module .f2-t,#measure.home-module .f2-p{max-width:none}
 #measure.home-module .f2-t{padding-right:0}
}
/* "Get to know us": the same 50/50 split as "Discover what you can measure" (notes, Oct 29). */
@media(min-width:1000px){
 #explainer-tour.home-module > .ie-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px}
 #explainer-tour.home-module :is(.ie-t,.ie-p){max-width:none}
}
/* "Discover what you can measure" (note, Oct 29): its paragraph wraps exactly where the heading ends, so the
   last letter of "measure." is the text's right edge. The paragraph doesn't size the column; the heading does. */
@media(min-width:1000px){
 #measure.home-module .f2-t{display:grid;grid-template-columns:max-content;align-content:center}
 #measure.home-module .f2-t > *{contain:inline-size}
 #measure.home-module .f2-t > .f2-h{contain:none}
}
/* "Get to know us": its paragraph stops at the same line, the width of "Discover what you can measure." */
@media(min-width:1000px){#explainer-tour.home-module .ie-p{max-width:405px}}
@media(min-width:1145px){#explainer-tour.home-module .ie-p{max-width:578px}}