@import url('/site-fonts.css');
:root{color-scheme:dark;--ink:#010205;--paper:#fbfcff;--muted:#a2a3a8;--red:#dc0527;--line:#ffffff24;--panel:#17171a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--ink);color:var(--paper);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ff8796;outline-offset:5px}button,a{touch-action:manipulation}::selection{background:var(--red);color:white}.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--red);padding:16px}.skip:focus{top:10px}.shell{width:min(1360px,calc(100% - 80px));margin:auto}.nav{position:absolute;top:24px;left:40px;right:40px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font-size:21px;font-weight:700;letter-spacing:.16em;display:flex;align-items:center;gap:12px}.mark{width:24px;height:20px;display:inline-block;background:linear-gradient(135deg,transparent 0 22%,var(--red) 23% 48%,transparent 49% 58%,var(--red) 59% 83%,transparent 84%);transform:skewX(-10deg)}.navlinks{display:flex;gap:4px;padding:5px;border:1px solid #ffffff10;background:#010205ad;border-radius:8px;backdrop-filter:blur(32px)}.navlinks a{font-size:14px;padding:11px 15px;border-radius:5px;color:#e8e9ec}.navlinks a:hover{background:#ffffff13}.language{font-size:12px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#01020566}.hero{height:max(760px,95svh);max-height:1100px;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/redline-gt.webp') center center/cover no-repeat}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#01020561,transparent 70%),linear-gradient(0deg,#010205,transparent 23%,transparent 80%,#01020544)}.hero-content{padding-top:80px;align-self:center}.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:12px;color:#b7b7bd}.eyebrow:before{content:'';width:28px;height:3px;background:var(--red)}h1,h2,h3,p{margin:0}h1{font-size:clamp(68px,7.8vw,116px);font-weight:500;line-height:.98;letter-spacing:-.065em;margin:28px 0;max-width:850px}h1 span{display:block}.intro{max-width:410px;font-size:18px;line-height:1.65;color:#d7d7dc;margin-bottom:30px}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;gap:25px;padding:13px 21px;border:1px solid var(--line);border-radius:7px;font-size:14px;font-weight:500;background:#01020588}.button.primary{background:var(--red);border-color:var(--red);color:#fff}.button:hover{background:#303034}.button.primary:hover{background:#ef163c}.release{font-size:12px;margin-top:18px;color:#a8a7ad}.hero-bottom{position:absolute;bottom:30px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:end;color:#aaa9af;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.hero-bottom strong{font-weight:400;color:#f0f0f3}.hero-bottom a{display:flex;gap:16px;align-items:center}.lineup{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;display:flex;gap:20px;justify-content:space-between;font-size:13px;color:#a8a8af}.lineup span{display:flex;gap:10px;align-items:center}.lineup b{font-weight:500;color:#fff}.section{padding:112px 0}.section-head{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;margin-bottom:54px}h2{font-weight:500;font-size:clamp(40px,5vw,68px);line-height:1.06;letter-spacing:-.045em}.section-head p,.copy{font-size:17px;line-height:1.8;color:#a9a9b1;max-width:460px}.section-head .eyebrow{margin-bottom:24px}.chapter{border-top:1px solid var(--line);display:grid;grid-template-columns:80px 1fr 1fr;gap:40px;padding:44px 0;align-items:start}.chapter .number{font-size:12px;letter-spacing:.15em;color:#fa526b;padding-top:7px}.chapter h3{font-size:31px;font-weight:400;letter-spacing:-.025em}.chapter p{font-size:15px;line-height:1.8;color:#a9a9b1;max-width:460px}.detail-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.detail-list span{font-size:11px;letter-spacing:.035em;padding:7px 10px;border:1px solid #ffffff18;border-radius:5px;color:#c8c8ce}.showcase{padding:72px 0;background:radial-gradient(ellipse at 50% 100%,#9b001c50,transparent 60%),#101013;overflow:hidden}.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start;margin-top:50px}.screens figure{margin:0}.screens img{display:block;width:100%;max-height:650px;object-fit:contain;object-position:top;border-radius:24px;filter:drop-shadow(0 22px 32px #0008)}figcaption{font-size:12px;color:#94959d;line-height:1.7;margin:24px 0 0;padding-left:4px}.screen-label{display:block;color:#f5f5f9;font-size:14px;margin-bottom:4px}.privacy-block{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.privacy-type{font-size:clamp(56px,7vw,104px);font-weight:500;line-height:1;letter-spacing:-.055em}.privacy-type em{font-style:normal;color:#ff3c58}.privacy-block .copy{margin:28px 0}.text-link{display:inline-flex;gap:22px;align-items:center;border-bottom:1px solid #ffffff55;padding:12px 0;font-size:14px}.faq{max-width:900px;margin:auto}.faq h2{margin-bottom:45px}details{border-top:1px solid var(--line);padding:0}details:last-child{border-bottom:1px solid var(--line)}summary{list-style:none;display:flex;justify-content:space-between;gap:25px;cursor:pointer;padding:26px 0;font-size:18px;line-height:1.4}summary::-webkit-details-marker{display:none}summary:after{content:'+';color:#ff5266;font-size:23px;font-weight:400}details[open] summary:after{content:'−'}details p{padding:0 40px 26px 0;font-size:15px;color:#aaaab1;line-height:1.85}.final{padding:95px 0;background:linear-gradient(125deg,#9c001b,#d80526 60%,#710014);text-align:center}.final h2{max-width:780px;margin:0 auto 25px}.final p{color:#ffccd3;line-height:1.8;margin:0 auto 28px;max-width:470px}.final .button{background:#010205;color:white;border:0}.final .release{color:#ffccd3}.footer{padding:50px 0 25px}.footer-top{display:flex;justify-content:space-between;gap:32px;align-items:center;padding-bottom:40px}.studio img{width:144px;height:auto;opacity:.9}.footer nav{display:flex;gap:25px;flex-wrap:wrap;font-size:12px;color:#b6b6bd}.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;gap:20px;justify-content:space-between;font-size:10px;line-height:1.7;color:#797a83}.fine{max-width:650px}.legal .nav{position:relative;top:auto;left:auto;right:auto;padding-top:24px}.legal-main{max-width:800px;margin:100px auto;padding:0 24px}.legal-main h1{font-size:clamp(42px,7vw,72px);margin:25px 0 30px}.legal-main h2{font-size:23px;font-weight:500;letter-spacing:-.015em;line-height:1.35;margin:38px 0 15px}.legal-main p,.legal-main li{font-size:16px;line-height:1.9;color:#b6b7bf}.legal-main p+p{margin-top:16px}.legal-main a{color:#ff697e;text-decoration:underline;text-underline-offset:4px}.legal-main ul{padding-left:23px}.legal-main .updated{font-size:12px;color:#85858d}.legal-main details{margin:10px 0}.legal-main details p{font-size:15px}.legal-main .contact-box{margin:35px 0;padding:26px;border:1px solid var(--line);border-radius:12px;background:#17171a}.legal-main .contact-box a{display:inline-block;min-height:44px;padding:10px 0}.safety-note{margin-top:30px;font-size:12px;color:#9999a2;line-height:1.8;max-width:750px}.preview-label{display:block;font-size:11px;color:#91919a;text-align:center;margin-top:30px}
@media(min-width:1700px){.hero:before{background-size:cover;background-position:center 58%}.hero-content{padding-top:0}}
@media(max-width:900px){.shell{width:calc(100% - 40px)}.nav{left:20px;right:20px;top:16px;gap:12px}.navlinks{display:none}.wordmark{font-size:17px}.hero{height:850px;max-height:1000px}.hero-content{align-self:flex-start;padding-top:170px}.hero:before{background-size:auto 100%;background-position:60% 0}.hero:after{background:linear-gradient(0deg,#010205,transparent 35%),linear-gradient(180deg,#01020555,transparent 75%)}h1{font-size:80px;max-width:700px}.intro{font-size:16px;max-width:330px}.hero-bottom{left:20px;right:20px}.section{padding:80px 0}.section-head{gap:30px;grid-template-columns:1fr}.lineup{flex-wrap:wrap;row-gap:14px}.chapter{grid-template-columns:40px 1fr;gap:20px}.chapter p{grid-column:2}.privacy-block{gap:40px}.screens{gap:20px}.screens img{border-radius:16px}.footer-top{align-items:start;flex-direction:column}.footer-bottom{flex-direction:column;gap:16px}}
@media(max-width:560px){.hero{height:850px;max-height:none}.hero-content{padding-top:145px}.hero:before{background-size:auto 78%;background-position:75% bottom}.hero:after{background:linear-gradient(180deg,#010205 0%,#01020566 30%,transparent 65%,#010205 100%)}h1{font-size:60px;letter-spacing:-.055em;margin:25px 0 20px}.intro{font-size:15px;line-height:1.7;max-width:300px}.hero .button{min-height:48px;font-size:13px}.hero .eyebrow{font-size:9px}.hero-bottom{font-size:9px}.hero-bottom strong{display:block;margin-top:6px}.lineup{display:grid;grid-template-columns:1fr 1fr;font-size:10px;padding:20px 0}.section-head p,.copy{font-size:15px}.chapter h3{font-size:26px}.chapter{padding:30px 0;column-gap:12px;row-gap:16px;grid-template-columns:30px 1fr}.chapter p{font-size:14px}.section-head{margin-bottom:35px}.screens{display:flex;overflow:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px;padding-bottom:10px;gap:20px}.screens figure{flex:0 0 75%;scroll-snap-align:center}.screens img{max-height:540px}.privacy-block{grid-template-columns:1fr;gap:25px}.privacy-type{font-size:64px}.faq summary{font-size:16px}.section{padding:65px 0}.final{padding:65px 20px}.final h2{font-size:42px}.footer nav{column-gap:20px;row-gap:18px}.legal-main{margin:65px auto}.language{font-size:10px}.legal .wordmark{font-size:15px}.legal .nav{gap:8px}.legal .language{padding:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.mark{width:30px;height:30px;background:url("assets/icon-small.png") center/contain no-repeat;transform:none;border-radius:6px}.privacy-block .text-link{display:flex;flex-wrap:wrap}.privacy-block .safety-note{flex-basis:100%;margin-top:10px;font-size:12px}

@media(max-width:900px){.hero-content{margin-top:0;margin-bottom:0}}
@media(max-width:560px){h1{font-size:clamp(48px,15.3vw,60px)}}

/* Shared studio endorsement, matching the established product-page structure. */
.site-header{position:absolute;inset:0 0 auto;z-index:20}.studio-return{background:#101013;border-bottom:1px solid var(--line)}.studio-return>a{display:flex;align-items:center;gap:16px;min-height:48px;font-size:12px;color:#b6b7bf}.studio-return img{width:144px;height:auto}.studio-return>a>span:last-child{margin-left:auto}.site-header .nav{position:relative;top:auto;left:auto;right:auto;width:calc(100% - 80px);margin:0 auto;padding-top:20px}.brand-name{display:flex;flex-direction:column;gap:5px}.brand-name small{font-size:9px;font-weight:400;letter-spacing:.07em;color:#b6b7bf}.legal .site-header{position:relative}.legal .site-header .nav{padding-top:20px}.proof-action{text-align:center;margin-top:40px}.proof-action p,.cta-note{font-size:12px;line-height:1.7;color:#b6b7bf;margin-top:12px}.final .button.primary{background:#010205}.final .cta-note{font-size:12px;margin-top:16px}.final .cta-note,.final p{color:#fff0f3}.hero .release{max-width:390px;line-height:1.7}.hero .secondary{border-color:transparent;background:transparent;padding-left:4px}.hero .actions{gap:20px}.intro{max-width:455px}.screens .screen-label{font-size:16px}.privacy-type{font-size:clamp(44px,5.3vw,78px)}.legal-main p,.legal-main li,.chapter p,.section-head p,.copy{font-size:16px}.footer nav a{min-height:44px;display:inline-flex;align-items:center}.footer nav{gap:20px}.privacy-block .text-link{text-decoration:underline;text-underline-offset:5px}.privacy-block .text-link .safety-note{text-decoration:none}
@media(max-width:900px){.site-header .nav{width:calc(100% - 40px);padding-top:16px}.hero-content{padding-top:180px}.hero{height:900px}.nav .wordmark{font-size:17px}.studio-return>a{gap:12px}.studio-return img{width:144px}.studio-return>a>span:last-child{font-size:11px}.hero .intro{font-size:16px}.hero .eyebrow{font-size:10px;letter-spacing:.12em}.lineup{font-size:12px}.hero .actions{gap:12px}.proof-action{margin-top:32px}.screens figure{flex-basis:82%}.preview-label{font-size:12px}.footer-bottom{font-size:12px}.hero-bottom{font-size:10px}}
@media(max-width:360px){.studio-return>a>span:last-child{font-size:10px}.studio-return img{width:130px}.hero-content{padding-top:176px}.brand-name small{font-size:8px}.language{padding:12px 8px}.hero{height:920px}}

details p{font-size:16px}.screen-label{margin-bottom:4px}.screens figcaption{font-size:14px}.brand-name small{font-size:10px}.hero-bottom a{min-height:44px}.lineup{font-size:12px}

.footer nav button.privacy-settings{min-height:44px}.privacy-panel h2{font-size:22px}.privacy-panel p{font-size:14px}.privacy-panel button{touch-action:manipulation}

.hero .release{color:#fbfcff;background:#010205a6;padding:8px 12px;border-radius:4px;display:table;font-size:13px}

/* The complete original photograph stays fixed; only masked background fog is animated. */
.hero-fog{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0}
.hero.fog-ready .hero-fog{opacity:1}
.hero:after{z-index:0;pointer-events:none}
.hero-content{position:relative;z-index:1}.hero-bottom{z-index:1}
@media(prefers-reduced-motion:reduce){.hero-fog{display:none}}

.fog-toggle{position:absolute;right:40px;bottom:64px;z-index:2;min-height:44px;padding:10px 14px;border:1px solid #ffffff24;border-radius:7px;background:#010205b8;color:#b6b7bf;font-size:11px;cursor:pointer}.fog-toggle[hidden]{display:none}@media(max-width:900px){.fog-toggle{right:20px;bottom:64px}}

/* Product policies follow the studio's Klarjahr document and footer structure. */
.footer.drivemoments-footer{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:36px;padding-top:56px;padding-bottom:30px}.drivemoments-footer .footer-brand p{margin-top:16px;line-height:1.7;font-size:13px;color:var(--muted)}.drivemoments-footer nav.policy-group{display:block}.policy-group h3{font-size:14px;font-weight:600;color:var(--paper);margin:0 0 10px}.policy-group ul{list-style:none;margin:0;padding:0}.policy-group a{font-size:13px;line-height:1.5}.drivemoments-footer .footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}.drivemoments-footer .footer-bottom p{font-size:12px;margin:0}.footer-safety{grid-column:1/-1;font-size:12px!important;line-height:1.7;color:var(--muted)}.legal-main{max-width:780px}.legal-main .back-link{display:inline-flex;min-height:44px;align-items:center;margin-bottom:32px;color:var(--muted);font-size:14px}.legal-main h1{font-size:clamp(42px,6vw,76px);overflow-wrap:anywhere}.legal-main h2{font-size:25px;line-height:1.3;letter-spacing:-.02em}.legal-main p{line-height:1.85}.legal-main .updated{font-size:13px;color:var(--muted);margin-bottom:28px}.policy-notice{border-left:3px solid var(--red);padding:16px 20px;background:var(--panel);margin-bottom:40px}.legal-main a:not(.back-link){text-decoration:underline;text-underline-offset:4px}.legal-main section{margin-top:32px}.legal-main section h2{margin-bottom:12px}.legal-main .contact-box h2{font-size:28px}
@media(max-width:900px){.footer.drivemoments-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.legal-main{width:calc(100% - 40px)}}
@media(max-width:400px){.footer.drivemoments-footer{grid-template-columns:minmax(0,1fr)}.drivemoments-footer .footer-bottom{align-items:flex-start;flex-direction:column}.legal-main h2{font-size:22px}}

/* DriveMoments purchase journey: product proof before the final store action. */
.mark{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background-image:url('assets/drivemoments-icon.png')}
.hero .intro{max-width:450px}.hero h1{max-width:940px}.hero .release{background:transparent;padding:0;line-height:1.7;color:#f4f2f4;max-width:440px}
.store-cta{min-height:54px;padding:15px 24px;font-weight:600;gap:14px}.availability{margin:30px auto 0;padding:22px 26px;max-width:520px;border:1px solid #ffffff55;border-radius:12px;background:#16000566}.final .availability p{margin:0 auto 10px;font-size:15px;line-height:1.6}.availability .text-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}.final .eyebrow:before{display:none}.final h2{max-width:850px;margin-left:auto;margin-right:auto}.final .cta-note{margin-bottom:0}.proof-action p{max-width:580px;margin-left:auto;margin-right:auto}.chapter p{max-width:500px}.intro,.section-head p,.copy,.chapter p{color:#c7c7cd}
@media(max-width:560px){.hero h1{font-size:clamp(40px,12vw,62px);line-height:1.03;letter-spacing:-.055em}.hero .intro{max-width:330px;font-size:16px;line-height:1.65}.hero .release{max-width:300px;font-size:13px}.hero .actions{gap:8px}.hero .button{font-size:14px}.brand-name{letter-spacing:.1em}.nav .wordmark{font-size:16px}.availability{padding:20px}.final h2{font-size:clamp(34px,10vw,48px)}.screens figure{flex-basis:86%}}

/* Journal, private sync and complete product feature story. */
.sync-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);align-items:center;gap:64px}.sync-story h2{margin:26px 0}.sync-story .copy{line-height:1.8}.sync-story .store-cta{margin-top:28px}.sync-story img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 80px #0008}.sync-story figcaption{font-size:13px;color:#b6b7bf;margin-top:16px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.feature-grid article{padding:30px;border:1px solid var(--line);border-radius:16px;background:#111115}.feature-grid h3{font-size:22px;line-height:1.3;letter-spacing:-.02em;margin:0 0 16px}.feature-grid p{font-size:16px;line-height:1.8;color:#c7c7cd}.screens img{width:100%;height:auto;object-fit:contain}.button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:5px}.chapter>div{min-width:0}
@media(max-width:1000px){.sync-story{grid-template-columns:1fr;gap:36px}.sync-story>div{max-width:650px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr;gap:16px}.feature-grid article{padding:24px}.sync-story{gap:28px}.sync-story img{border-radius:12px}.screens{scroll-padding-left:0}.chapter>div{grid-column:2}}

.creator-page figure{margin:32px 0}.creator-page figure img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px}.creator-page figcaption{font-size:13px;color:#b6b7bf;margin-top:10px}.creator-page .button{color:white!important;text-decoration:none!important}.creator-note .copy{max-width:680px;line-height:1.8;margin:24px 0}.creator-note h2{margin-top:24px}.creator-note .text-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}.screens{grid-template-columns:repeat(4,minmax(0,1fr))}

.sync-story figure{display:flex;flex-direction:column;align-items:center}.sync-story img{max-height:740px;width:auto;max-width:100%;object-fit:contain}.sync-story figcaption{align-self:center}

/* Approved Quiet Frame product identity, 2026-10-19. */
.mark{background-image:url("assets/drivemoments-mark.svg?v=quiet-frame-1");background-color:#09090b;background-size:contain;transform:none}

/* Complete feature inventory: comfortable reading at every breakpoint. */
.feature-inventory ul{padding-left:1.1em;margin:16px 0 0}.feature-inventory li{margin:0 0 .8em;line-height:1.65;color:var(--muted,#b7b8bf)}

/* The fog fades in after the photo has loaded instead of appearing at once. */
.hero-fog{transition:opacity 2.8s cubic-bezier(.33,0,.2,1)}

/* Wide screens: header, hero labels and the animation toggle share the 1360px frame of the studio bar. */
:root{--dm-gutter:max(40px,calc((100% - 1360px)/2))}
.site-header .nav{width:min(1360px,calc(100% - 80px))}
.hero-bottom{left:var(--dm-gutter);right:var(--dm-gutter)}
.fog-toggle{right:var(--dm-gutter)}
.site-header .nav.is-fixed{padding-left:var(--dm-gutter);padding-right:var(--dm-gutter)}
@media(max-width:900px){:root{--dm-gutter:20px}.site-header .nav{width:calc(100% - 40px)}}