/* Drive product page: native CSS, shared Dloper components and restrained blue accents. */
.drive-page {
    --color-accent: #2563eb;
    --drive-blue: var(--color-accent);
    --drive-line: color-mix(in srgb, var(--color-text) 12%, transparent);
    --drive-muted: #62656c;
    --drive-soft: #f5f7fc;
    --drive-banner-height: 44px;
    background: #fff;
    color: var(--color-text);
    padding-top: 0;
}
.drive-page [hidden] { display: none !important; }
.drive-page main { padding-top: 0; }
.drive-page .site-header { position: sticky; top: 0; }
.drive-page .drive-announcement { position: relative; background: var(--drive-blue); color: #fff; min-height: var(--drive-banner-height); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 24px; }
.drive-announcement a { color: inherit; font-size: .8rem; line-height: 1.5; text-decoration: none; }
.drive-announcement a:hover { text-decoration: underline; text-underline-offset: 4px; }
.drive-announcement strong { margin-left: 12px; padding-left: 12px; border-left: 1px solid #ffffff80; font-weight: 650; white-space: nowrap; }
.drive-container { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.drive-page main h1, .drive-page main h2 { font-family: var(--font-display); font-weight: 650; letter-spacing: -.055em; line-height: 1.04; text-wrap: balance; white-space: pre-line; }
.drive-page main h1 { font-size: clamp(3rem, 6.2vw, 5.5rem); margin: 24px 0; }
.drive-page main h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin: 16px 0 24px; }
.drive-page p { line-height: 1.65; }
.drive-page .drive-eyebrow { font-size: .72rem; font-weight: 650; letter-spacing: .18em; color: var(--drive-muted); margin: 0; }
.drive-hero { padding-top: clamp(60px, 7vw, 108px); text-align: center; }
.drive-product-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.2rem; }
.drive-product-name img { object-fit: contain; }
.drive-lead { max-width: 630px; margin: 0 auto; color: var(--drive-muted); font-size: 1.18rem; }
.drive-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.drive-page .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 23px; min-height: 48px; text-decoration: none; font-size: .95rem; font-weight: 650; border-radius: var(--radius-md); }
.drive-page .btn-primary { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); }
.drive-page .btn-primary:hover { background: #303033; }
.drive-page .btn-outline { background: transparent; color: var(--color-text); border: 1px solid #c6c8cc; }
.drive-page .btn-outline:hover { border-color: var(--color-text); background: #f3f3f4; color: var(--color-text); }
.drive-page .drive-small { font-size: .8rem; color: var(--drive-muted); margin-top: 16px; }
.drive-shot { margin: 0; background: var(--drive-soft); border: 1px solid var(--drive-line); border-radius: var(--radius-lg); overflow: hidden; }
.drive-shot-top { min-height: 46px; display: flex; gap: 16px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--drive-line); background: #fff; color: var(--drive-muted); font-size: .74rem; text-align: left; }
.drive-shot-dots { letter-spacing: 3px; color: #c5c9d3; font-size: .6rem; }
.drive-shot-space { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 330px; padding: 32px; background-image: linear-gradient(#e4e8f144 1px, transparent 1px), linear-gradient(90deg,#e4e8f144 1px,transparent 1px); background-size: 40px 40px; }
.drive-shot-space img { width: 64px; height: 64px; object-fit: contain; }
.drive-shot-space p { margin: 0; font-weight: 600; font-size: 1.1rem; text-align: center; }
.drive-shot-note { font-size: .75rem; color: var(--drive-muted); }
.drive-shot figcaption { border-top: 1px solid var(--drive-line); background: #fff; padding: 14px 20px; font-size: .8rem; color: var(--drive-muted); text-align: left; line-height: 1.5; }
.drive-shot-large { margin-top: 64px; box-shadow: 0 16px 64px #1f3a7010; }
.drive-shot-large .drive-shot-space { min-height: 450px; }
.drive-intro { padding-block: 120px 80px; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 90px; align-items: center; border-bottom: 1px solid var(--drive-line); }
.drive-intro .drive-eyebrow { grid-column: 1 / -1; }
.drive-intro > p:last-child { font-size: 1.1rem; color: var(--drive-muted); }
.drive-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 72px; padding-block: 100px; align-items: center; }
.drive-feature + .drive-feature { border-top: 1px solid var(--drive-line); }
.drive-feature-reverse { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.drive-feature-reverse .drive-feature-copy { order: 2; }
.drive-feature-copy > p:not(.drive-eyebrow) { font-size: 1.05rem; color: var(--drive-muted); }
.drive-feature-list { padding: 0; list-style: none; display: grid; gap: 14px; margin: 28px 0 0; font-size: .92rem; }
.drive-feature-list li { display: flex; align-items: baseline; gap: 12px; }
.drive-feature-list li::before { content: '✓'; color: var(--drive-blue); }
.drive-security { background: var(--drive-soft); border-block: 1px solid var(--drive-line); padding-block: 100px; }
.drive-security-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; margin-top: 56px; }
.drive-security h3 { font-size: 1.05rem; margin-bottom: 16px; letter-spacing: -.02em; }
.drive-security-grid p { color: var(--drive-muted); font-size: .95rem; }
.drive-pricing { padding-block: 120px; text-align: center; }
.drive-pricing > p:not(.drive-eyebrow) { color: var(--drive-muted); }
.drive-pricing-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin: 40px 0; }
.drive-pricing-controls fieldset { display: flex; border: 1px solid var(--drive-line); border-radius: var(--radius-md); padding: 4px; gap: 4px; margin: 0; background: #f6f6f7; }
.drive-pricing-controls label { display: flex; position: relative; cursor: pointer; margin: 0; }
.drive-pricing-controls input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.drive-pricing-controls label > span { padding: 11px 18px; font-size: .85rem; border-radius: var(--radius-sm); color: var(--drive-muted); }
.drive-pricing-controls input:checked + span { background: #fff; color: var(--color-text); box-shadow: var(--shadow-subtle); }
.drive-pricing-controls input:focus-visible + span { outline: 2px solid var(--drive-blue); outline-offset: 2px; }
.drive-save { color: var(--drive-blue); font-size: .8rem; }
.drive-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; text-align: left; }
.drive-plan { border: 1px solid var(--drive-line); border-radius: var(--radius-lg); padding: 28px; background: #fff; min-width: 0; }
.drive-plan:first-child { border-top: 3px solid var(--drive-blue); padding-top: 26px; }
.drive-plan h3 { font-size: 1.5rem; letter-spacing: -.03em; margin: 0 0 12px; }
.drive-plan-description { min-height: 78px; font-size: .9rem; color: var(--drive-muted); margin: 0; }
.drive-price { min-height: 110px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.drive-price strong { font-size: clamp(2rem,3vw,2.8rem); line-height: 1.1; letter-spacing: -.055em; font-weight: 650; }
.drive-price > span { color: var(--drive-muted); font-size: .75rem; }
.drive-plan .btn { width: 100%; margin: 12px 0 24px; }
.drive-plan ul { list-style: none; padding: 24px 0 0; margin: 0; border-top: 1px solid var(--drive-line); display: grid; gap: 16px; font-size: .85rem; line-height: 1.5; }
.drive-plan li { padding-left: 20px; position: relative; }
.drive-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--drive-muted); }
.drive-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; border-top: 1px solid var(--drive-line); padding-block: 90px; }
.drive-faq h2 { font-size: clamp(2rem,3vw,2.8rem); margin-top: 0; }
.drive-faq details { border-bottom: 1px solid var(--drive-line); padding: 22px 0; }
.drive-faq details:first-child { padding-top: 0; }
.drive-faq summary { font-weight: 600; font-size: 1rem; cursor: pointer; line-height: 1.5; }
.drive-faq details p { color: var(--drive-muted); font-size: .95rem; margin: 16px 0 0; }
.drive-closing { border-top: 1px solid var(--drive-line); padding-block: 90px 110px; text-align: center; }
.drive-closing p { color: var(--drive-muted); }
.drive-access { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 100px; min-height: 75dvh; }
.drive-access h1 { font-size: clamp(3rem,5vw,4.5rem); }
.drive-access > div > p:not(.drive-eyebrow) { color: var(--drive-muted); font-size: 1.1rem; max-width: 38ch; }
.drive-text-link { display: inline-flex; margin-top: 24px; color: var(--color-text); }
.drive-access-form { padding: 32px; border: 1px solid var(--drive-line); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.drive-access-form label { font-size: .85rem; font-weight: 600; }
.drive-access-form input, .drive-access-form textarea { min-width: 0; width: 100%; padding: 12px; border: 1px solid #c6c8cc; background: #fff; border-radius: var(--radius-sm); color: var(--color-text); font: inherit; font-size: 1rem; margin-bottom: 8px; }
.drive-access-form textarea { resize: vertical; }
.drive-access-form a { color: var(--color-text); }
.drive-access-form p { margin: 0; }
.drive-page a:focus-visible, .drive-page summary:focus-visible, .drive-access-form input:focus-visible, .drive-access-form textarea:focus-visible, .drive-access-form button:focus-visible { outline: 2px solid var(--drive-blue); outline-offset: 4px; }
@media (max-width: 900px) {
    .drive-feature, .drive-feature-reverse, .drive-intro, .drive-faq, .drive-access { grid-template-columns: minmax(0,1fr); gap: 36px; }
    .drive-feature-reverse .drive-feature-copy { order: 0; }
    .drive-security-grid { gap: 24px; }
    .drive-plan-grid { gap: 12px; }
    .drive-plan { padding: 20px; }
    .drive-plan:first-child { padding-top: 18px; }
    .drive-plan .btn { padding-inline: 10px; font-size: .85rem; }
}
@media (max-width: 620px) {
    .drive-container { width: calc(100% - 40px); }
    .drive-announcement a { font-size: .72rem; }
    .drive-announcement strong { margin-left: 6px; padding-left: 6px; }
    .drive-hero { padding-top: 48px; }
    .drive-page main h1 { font-size: clamp(2.7rem, 10vw, 3.5rem); }
    .drive-lead { font-size: 1rem; }
    .drive-shot-large { margin-top: 40px; }
    .drive-shot-large .drive-shot-space { min-height: 260px; }
    .drive-shot-space { min-height: 260px; padding: 24px 16px; }
    .drive-intro, .drive-feature, .drive-security, .drive-pricing, .drive-faq, .drive-closing, .drive-access { padding-block: 64px; }
    .drive-security-grid, .drive-plan-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
    .drive-security-grid { margin-top: 36px; }
    .drive-plan { padding: 28px; }
    .drive-plan:first-child { padding-top: 26px; }
    .drive-plan-description { min-height: 0; }
    .drive-pricing-controls { gap: 12px; }
    .drive-access-form { padding: 22px; }
}

/* The original label keeps its layout space; only the centered copy fades in. */
.drive-header-product {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 148px;
    min-height: 40px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--drive-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-subtle);
    font-size: .88rem;
    font-weight: 650;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
    transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.drive-header-product img { width: 28px; height: 28px; object-fit: contain; }
.drive-product-name { transition: opacity 180ms cubic-bezier(.23, 1, .32, 1); }
.can-show-drive-product.has-drive-product .drive-header-product { opacity: 1; transform: translate(-50%, -50%); }
.drive-page:has(.can-show-drive-product.has-drive-product) .drive-hero .drive-product-name { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .drive-header-product { transform: translate(-50%, -50%); transition: opacity 125ms cubic-bezier(.23, 1, .32, 1); }
    .drive-product-name { transition-duration: 125ms; }
}

/* A real anchor preserves keyboard activation and native back-to-top navigation. */
.drive-header-product { color: var(--color-text); text-decoration: none; }
.can-show-drive-product.has-drive-product .drive-header-product { pointer-events: auto; }
#drive-top { scroll-margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
    .drive-header-product:hover { background: var(--drive-soft); color: var(--color-text); }
}

/* Original product captures retain their full frame and can be opened at full size. */
.drive-shot-image { background: #111; }
.drive-screenshot-link { display: block; overflow: hidden; cursor: zoom-in; }
.drive-screenshot-link > img { display: block; width: 100%; height: auto; }
.drive-shot-image figcaption { display: grid; gap: 6px; }
.drive-shot-release { font-size: .7rem; color: var(--drive-muted); }
.drive-page .drive-screenshot-link:focus-visible { outline-offset: -4px; }