/* TripREC one-screen product homepage; mobile flows vertically. */
:root{color-scheme:light;--paper:#fffdf9;--ink:#12151b;--muted:#535d6b;--accent:#c95830;--gold:#986117;--line:#e5e5e4;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #236fba;outline-offset:5px}svg{display:block}.symbols{position:absolute;width:0;height:0;overflow:hidden}.page{min-height:100svh;display:flex;flex-direction:column}.masthead{height:clamp(76px,10svh,104px);padding:0 5%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:9.9px;font-size:clamp(21.6px,1.98vw,28.8px);font-weight:800;letter-spacing:-.035em;color:#343A40}.brand-name{white-space:nowrap}.brand-trip,.brand-rec{color:#343A40}.brand img{display:block;width:46.8px;height:46.8px}.languages{display:flex;gap:3px;padding:4px;border-radius:30px;background:rgba(255,253,249,.75);border:1px solid rgba(255,255,255,.85);box-shadow:0 2px 8px #29485a08;font-size:15px;line-height:1}.languages span,.languages a{min-width:64px;padding:11px 16px;text-align:center;border-radius:24px}.languages span{background:var(--ink);color:#fffdf9}.languages a:hover{background:#fffdf9}.hero{flex:1;display:grid;grid-template-columns:39% 61%;align-items:center;gap:0;padding:25px 4% 40px 5%;min-height:480px;position:relative;isolation:isolate}.scenery{position:absolute;z-index:-2;top:calc(-1 * clamp(76px,10svh,104px));left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}.scenery:before{content:"";position:absolute;inset:-12px;background:url("/assets/homepage-20261001/coastal-road.webp") center/cover;filter:blur(5px)}.scenery:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fffdf9 0%,rgba(255,253,249,.98) 23%,rgba(255,253,249,.8) 38%,rgba(255,253,249,.14) 66%),linear-gradient(0deg,rgba(255,253,249,.24),transparent 55%)}.copy{position:relative;z-index:1;padding-right:22px}.copy h1{margin:0;font-size:clamp(42px,4.45vw,72px);line-height:1.18;font-weight:700;letter-spacing:-.055em}.copy h1 em{display:block;color:var(--accent);font-style:normal}.lede{margin:22px 0 0;color:var(--muted);font-size:clamp(16px,1.4vw,22px);line-height:1.75;letter-spacing:-.025em}.lede span{display:block}.honor{width:clamp(235px,22vw,325px);height:clamp(112px,9vw,140px);margin:20px auto 24px 5%;position:relative;display:flex;align-items:center;justify-content:center;color:var(--gold)}.honor .laurels{position:absolute;inset:0;width:100%;height:100%;color:#bc883c}.honor-copy{text-align:center;position:relative;padding-bottom:0}.honor strong{display:block;font-size:clamp(36px,3.65vw,56px);line-height:1.1;font-weight:750;letter-spacing:-.04em}.honor span{display:block;font-size:clamp(15px,1.5vw,22px);font-weight:600;letter-spacing:.05em;margin-top:6px}.downloads{display:flex;gap:16px;align-items:center}.store-badge{height:60px;display:block;border-radius:10px;flex:none}.store-badge img{height:100%;width:auto;display:block}.lite-badge{height:60px;min-width:206px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:13px;background:#fffdfb;border:1px solid #353943;border-radius:10px}.lite-badge svg{width:28px;height:35px;fill:var(--ink);flex:none}.lite-badge small{display:block;font-size:13px;line-height:1.3;font-weight:550;letter-spacing:-.025em}.lite-badge strong{display:block;font-size:23px;line-height:1.15;font-weight:650;letter-spacing:-.04em}.downloads a{transition:transform .18s ease,box-shadow .18s ease}.downloads a:hover{transform:translateY(-2px);box-shadow:0 4px 12px #15191f12}.product{margin:0;padding-left:12px;position:relative}.phone{width:100%;aspect-ratio:2.17;position:relative;container-type:inline-size;border:3px solid #202329;border-radius:7% / 15%;background:#111;box-shadow:0 0 0 1px #95989a,0 17px 28px -12px #17202b70}.phone:before{content:"";position:absolute;top:-5px;left:25%;width:9%;height:2px;background:#595d63;border-radius:2px}.screen{position:absolute;inset:1px;overflow:hidden;border-radius:6.5% / 14.5%;background:#7bafcd;color:white}.road{width:100%;height:100%;object-fit:cover;display:block}.island{position:absolute;left:2%;top:32%;height:36%;width:4.2%;border-radius:999px;background:#060707}.island:before{content:"";position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:#142954;top:13%;left:45%}.island:after{content:"";position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:#58d575;bottom:24%;left:45%}.recording{position:absolute;top:4%;left:7.8%;width:23%;border-radius:1cqw;background:rgba(37,57,70,.46);overflow:hidden;font-variant-numeric:tabular-nums}.record-top{padding:1.2cqw 1.5cqw .6cqw}.record-label{display:flex;align-items:center;gap:.8cqw;font-size:1.8cqw;font-weight:550;line-height:1.2}.rec-dot{width:1.8cqw;height:1.8cqw;background:#fa4a44;border-radius:50%}.wave{width:2.1cqw;height:2.1cqw;margin-left:.3cqw;stroke:currentColor;fill:none;stroke-width:1.5}.timer{display:block;font-size:4.3cqw;line-height:1.2;font-weight:700;letter-spacing:-.025em;margin-top:.5cqw}.record-meta{display:flex;align-items:center;justify-content:space-between;padding:.6cqw 1.5cqw;background:rgba(19,30,37,.22);font-size:1.65cqw;font-weight:550}.battery-info{display:flex;align-items:center;gap:.5cqw}.battery{width:2.5cqw;height:1.25cqw;border:1px solid #ffffffc0;padding:1px;position:relative;border-radius:2px}.battery:before{content:"";display:block;width:95%;height:100%;background:#64de71}.battery:after{content:"";position:absolute;right:-3px;top:25%;height:50%;width:2px;background:#ffffffc0}.top-tools{position:absolute;top:3.3%;right:18%;display:flex;gap:1.8cqw}.tool-circle{width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;background:rgba(22,40,48,.65)}.tool-circle svg{width:3.5cqw;height:3.5cqw;fill:none;stroke:currentColor;stroke-width:1.7}.control-rail{position:absolute;inset:0 0 0 auto;width:16.5%;background:rgba(17,22,25,.72);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:1.7cqw 0;color:#eee}.control-rail .tool-circle{background:rgba(17,22,25,.2);width:6.5cqw;height:6.5cqw}.control-rail .settings{color:#999}.stop{width:10cqw;height:10cqw;border: .42cqw solid #f4f4f0;border-radius:50%;display:grid;place-items:center}.stop span{display:block;width:4.2cqw;height:4.2cqw;border-radius:.65cqw;background:#ff403c}.trip-info{position:absolute;left:7.8%;bottom:5%;width:25%;background:rgba(21,34,42,.54);border-radius:.8cqw;padding:.6cqw 1.3cqw;font-variant-numeric:tabular-nums}.trip-values{display:flex;gap:1.4cqw;align-items:baseline;line-height:1.25;white-space:nowrap}.trip-values strong{font-size:3.45cqw;font-weight:700}.trip-values small{font-size:1.25cqw;font-weight:550}.street{display:flex;align-items:center;gap:.6cqw;font-size:1.7cqw;margin-top:.4cqw}.street svg{width:1.9cqw;height:1.9cqw;fill:currentColor}.map{position:absolute;right:18%;bottom:5%;width:16%;height:23%;border-radius:1.4cqw;overflow:hidden;background:#eae9dc}.map svg{width:100%;height:100%}.features{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:28px 4% 25px;list-style:none;margin:0;background:#fffefe;border-top:1px solid #f2efeb;gap:0}.features li{text-align:center;padding:0 15px;border-left:1px solid #e8e8eb}.features li:first-child{border-left:0}.feature-icon{width:42px;height:42px;margin:0 auto 12px;fill:none;stroke:#151923;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.features h2{font-size:18px;font-weight:650;margin:0 0 8px;letter-spacing:-.025em}.features p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.footer{min-height:76px;padding:16px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);background:#fffefe;font-size:12px;color:var(--muted)}.fineprint p{margin:0}.beian{font-size:11px;margin-top:4px!important}.footer nav{display:flex;align-items:center;gap:30px;white-space:nowrap;font-size:13px}.footer a:hover{color:var(--ink)}.social svg{width:20px;height:20px;fill:var(--ink)}.english .copy h1{font-size:clamp(40px,4.15vw,65px);letter-spacing:-.055em;line-height:1.08}.english .lede{font-size:clamp(16px,1.25vw,20px);max-width:38ch;line-height:1.6}.english .honor span{font-size:16px;letter-spacing:.13em;text-transform:uppercase}.english .features h2{font-size:16px}.english .features p{font-size:13px}
@media(min-width:960px) and (max-height:800px){.masthead{height:72px}.hero{min-height:410px;padding-top:10px;padding-bottom:22px}.copy h1{font-size:clamp(40px,4.15vw,64px)}.lede{margin-top:14px;font-size:18px}.honor{height:115px;margin-top:13px;margin-bottom:15px}.honor strong{font-size:46px}.honor span{font-size:18px}.store-badge,.lite-badge{height:52px}.lite-badge{min-width:190px}.features{padding-top:16px;padding-bottom:16px}.feature-icon{width:40px;height:40px;margin-bottom:8px}.features h2{font-size:16px}.features p{font-size:13px}.footer{min-height:67px}.scenery{top:-72px}}
@media(max-width:1199px){.hero{grid-template-columns:40% 60%;padding-left:4%;padding-right:3%}.masthead{padding-inline:4%}.copy{padding-right:10px}.copy h1{font-size:4.5vw}.lede{font-size:16px}.downloads{gap:10px}.store-badge,.lite-badge{height:48px}.lite-badge{min-width:166px;padding:6px 12px;gap:9px}.lite-badge svg{width:24px;height:30px}.lite-badge small{font-size:11px}.lite-badge strong{font-size:19px}.honor{width:250px;height:125px}.honor strong{font-size:42px}.honor span{font-size:17px}.features{padding-inline:3%}.features li{padding-inline:10px}.features h2{font-size:16px}.features p{font-size:13px}.english .copy h1{font-size:4.4vw}.english .features h2{font-size:14px}}
@media(max-width:959px){.masthead{height:82px}.hero{grid-template-columns:1fr;padding:25px 6% 38px;gap:38px;min-height:0}.copy{padding:0;max-width:600px;margin:0 auto;text-align:center}.copy h1,.english .copy h1{font-size:clamp(38px,6vw,56px)}.lede{font-size:18px;margin-top:18px}.english .lede{font-size:18px;margin-inline:auto}.honor{margin:22px auto;width:260px;height:126px}.downloads{justify-content:center;gap:14px}.store-badge,.lite-badge{height:54px}.lite-badge{min-width:186px}.lite-badge small{font-size:12px}.lite-badge strong{font-size:21px}.product{padding:0;width:100%;max-width:800px;margin:auto}.scenery:after{background:linear-gradient(180deg,rgba(255,253,249,.94),rgba(255,253,249,.9) 50%,rgba(255,253,249,.28))}.features{grid-template-columns:repeat(3,minmax(0,1fr));padding:26px 5%;row-gap:30px}.features li:nth-child(4){border-left:0}.features h2,.english .features h2{font-size:17px}.features p,.english .features p{font-size:14px}.footer{padding-inline:6%}.fineprint{max-width:50%}}
@media(max-width:540px){.masthead{height:76px;padding-inline:6%}.brand{gap:7.2px;font-size:21.6px}.brand img{width:38.7px;height:38.7px}.languages{font-size:13px;padding:3px}.languages span,.languages a{min-width:46px;padding:9px 11px}.hero{padding-top:20px;gap:34px;padding-bottom:30px}.copy h1{font-size:clamp(36px,9vw,47px);line-height:1.18}.english .copy h1{font-size:clamp(36px,9vw,47px)}.lede{font-size:15px;letter-spacing:-.03em;line-height:1.8}.lede span{display:block}.english .lede{font-size:16px}.honor{width:235px;height:116px;margin:21px auto}.honor strong{font-size:40px}.honor span{font-size:16px}.downloads{gap:10px}.store-badge,.lite-badge{height:48px}.lite-badge{min-width:158px;padding:7px 10px;gap:8px}.lite-badge svg{width:23px;height:28px}.lite-badge small{font-size:10px}.lite-badge strong{font-size:18px}.phone{border-width:2px;box-shadow:0 0 0 1px #7c8084,0 12px 22px -12px #17202b80}.features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:25px;padding:26px 5%}.features li:nth-child(odd){border-left:0}.features li:nth-child(even){border-left:1px solid #e8e8eb}.feature-icon{width:36px;height:36px;margin-bottom:10px}.features h2,.english .features h2{font-size:16px}.features p,.english .features p{font-size:13px}.footer{flex-direction:column;gap:18px;align-items:center;text-align:center;padding-block:22px}.fineprint{max-width:none}.footer nav{gap:28px}.scenery:before{background-position:65% center}.scenery:after{background:linear-gradient(180deg,rgba(255,253,249,.96),rgba(255,253,249,.91) 68%,rgba(255,253,249,.25))}}
@media(max-width:360px){.downloads{gap:8px}.store-badge,.lite-badge{height:42px}.lite-badge{min-width:146px}.lite-badge strong{font-size:16px}.lite-badge small{font-size:10px}.brand{font-size:19.8px}.brand img{width:34.2px;height:34.2px}}
@media(prefers-reduced-motion:reduce){.downloads a{transition:none}.downloads a:hover{transform:none}}

/* Match the vertical control positions in the recording interface. */
.control-rail{display:block;padding:0}.control-rail>div{position:absolute;left:50%;transform:translateX(-50%)}.control-rail .settings{top:6%}.control-rail .stop{top:37.5%}.control-rail>.tool-circle:nth-child(3){top:64%}.control-rail>.tool-circle:nth-child(4){top:81%}

@media(min-width:960px) and (max-height:800px){.honor{height:100px;width:250px;margin-top:12px;margin-bottom:18px}.honor strong{font-size:42px}.honor span{font-size:16px}}

.honor .since{display:block;position:relative;margin-top:8px;font-size:clamp(9px,.9vw,12px);font-weight:500;line-height:1.25;letter-spacing:.14em;color:#866b4d}

.honor .since::before{content:"";position:absolute;top:-4px;left:10%;right:10%;height:1px;background:rgba(134,107,77,.25)}

.fineprint>p:first-child{color:#6e7781}