/* ============================================================================
   Landing intro — "Your ride. Redefined." (index.html, above the shop)
   Ported from the acid-green-landing design study
   (~/Documents/ChatGPT/Think2Print3d Website Building/acid-green-landing):
   its styles.css (hero only) + photo-explorer.css, scoped under .t2l so
   nothing leaks into the rest of the site. Behaviour: js/landing.js.
   ============================================================================ */
.t2l{position:relative;background:#101210;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.t2l a{color:inherit;text-decoration:none}
.t2l button,.t2l input{font:inherit;color:inherit}
.t2l button{cursor:pointer}
.t2l button:focus-visible,.t2l a:focus-visible,.t2l input:focus-visible{outline:2px solid var(--acid);outline-offset:6px}
.t2l{--acid:#c5ff35;--ink:#101210;--paper:#f0f1e9;--muted:#969b91;--line:#ffffff21;font-family:Arial,Helvetica,sans-serif;color:var(--paper);background:var(--ink);color-scheme:dark}
.t2l *{box-sizing:border-box}



.t2l input{font:inherit}
.t2l input{-webkit-tap-highlight-color:transparent}

.t2l a:focus-visible,.t2l input:focus-visible{outline:2px solid var(--acid);outline-offset:6px}



.t2l .site-header{height:88px;padding:0 3.5%;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);position:absolute;inset:0 0 auto;z-index:20;background:#101210d9}
.t2l .brand{display:flex;align-items:center;gap:14px;white-space:nowrap}
.t2l .brand-mark{font-size:33px;font-weight:900;font-style:italic;letter-spacing:-4px;position:relative;padding-right:5px}
.t2l .brand-mark>span{font-size:16px;position:absolute;right:-5px;top:1px;color:var(--acid)}
.t2l .brand-name{font-size:14px;font-weight:800;letter-spacing:-.4px}
.t2l .brand-name>span{color:var(--acid)}
.t2l .site-header nav{display:flex;gap:29px;margin:auto;font-size:12px;color:#bfc2ba}
.t2l .site-header nav a:hover{color:var(--acid)}

.t2l .hero-topline i{display:inline-block;width:5px;height:5px;background:var(--acid);border-radius:50%;margin-right:7px}
.t2l .header-cta{border:1px solid #68705d;font-size:11px;padding:13px 18px;display:flex;gap:26px;align-items:center}
.t2l .header-cta:hover{border-color:var(--acid)}
.t2l .header-cta span{color:var(--acid);font-size:17px}
.t2l .assembly-story{height:190svh;position:relative}
.t2l .assembly-sticky{height:100svh;min-height:690px;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 75% 46%,#28302133 0,transparent 50%),#101210}
.t2l .hero-grid{position:absolute;inset:88px 0 0;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:86px 86px;mask-image:linear-gradient(90deg,transparent 25%,#000)}
.t2l .hero-topline{position:absolute;top:118px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1.1px;color:#92998a;z-index:5}
.t2l .hero-topline>span:first-child{color:#b5bbac}
.t2l .hero-copy{position:absolute;top:29%;left:5.4%;z-index:5;pointer-events:none}
.t2l .hero-copy a{pointer-events:auto}
.t2l .eyebrow{font:9px monospace;letter-spacing:2px;color:#8b9384;margin-bottom:22px}
.t2l h1{margin:0;font-size:clamp(60px,7.2vw,116px);font-weight:900;line-height:.93;letter-spacing:-.075em}
.t2l h1>span{color:var(--acid)}
.t2l .hero-copy p{font-size:14px;line-height:1.7;color:#b1b8aa;margin-top:25px;letter-spacing:.1px}
.t2l .hero-actions{margin-top:27px;display:flex;align-items:center;gap:25px}
.t2l .button-acid{display:inline-flex;justify-content:space-between;align-items:center;gap:44px;padding:17px 22px;background:var(--acid);color:#14190d;font-size:12px;font-weight:700;transition:background .2s,transform .2s}
.t2l .button-acid span{font-size:22px;line-height:1}
.t2l .button-acid:hover{background:#d8ff7a;transform:translateY(-2px)}
.t2l .text-link{font-size:11px;display:inline-flex;align-items:center;gap:20px;color:#c9cec3}
.t2l .text-link span{color:var(--acid);font-size:18px}
.t2l .model-stage{position:absolute;top:15%;left:42%;width:59%;height:70%;z-index:3;isolation:isolate}



.t2l .model-caption{position:absolute;top:3%;right:8%;font:9px/1.8 monospace;letter-spacing:1px;color:#a7af9c;pointer-events:none;z-index:3}
.t2l .model-caption small{font-size:7px;color:#5f6858;letter-spacing:.4px}
.t2l .mini-cross{color:var(--acid);font-size:16px;margin-right:7px}
.t2l .part-callout{position:absolute;right:7%;bottom:21%;display:flex;align-items:center;gap:15px;pointer-events:none;z-index:3}
.t2l .callout-dot{display:block;width:7px;height:7px;background:var(--acid);border-radius:50%;box-shadow:0 0 0 5px #c5ff3512;position:relative}
.t2l .callout-dot:before{content:'';position:absolute;width:85px;height:1px;background:linear-gradient(90deg,transparent,#84974b);right:6px;top:3px}
.t2l .part-callout div{background:#10121090;padding:5px}
.t2l .part-callout span:not(.callout-dot){font:8px monospace;letter-spacing:1.4px;color:var(--acid);display:block}
.t2l .part-callout strong{font-size:11px;font-weight:400;display:block;margin-top:7px}
.t2l .model-controls{position:absolute;bottom:2%;left:36%;display:flex;border:1px solid #505846;background:#171b13cc;z-index:4}
.t2l .model-controls button{border:0;background:transparent;color:#c7d0bb;font-size:10px;padding:10px 14px}
.t2l .model-controls button+button{border-left:1px solid #505846}
.t2l .model-controls button span{color:var(--acid);margin-right:7px}
.t2l .model-controls button:hover,.t2l .model-controls button[aria-pressed=true]{background:#c5ff3518}
.t2l .drag-label{position:absolute;bottom:-4%;left:42%;font:7px monospace;letter-spacing:1.5px;color:#717b65}
.t2l .hero-bottom{position:absolute;bottom:30px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;align-items:center;z-index:8}
.t2l .scroll-cue{display:flex;align-items:center;gap:16px;font:8px/1.8 monospace;letter-spacing:1px;color:#8a9281}
.t2l .scroll-cue b{font-weight:400;color:#d2d8c9}
.t2l .scroll-circle{display:flex;align-items:center;justify-content:center;border:1px solid #4d5742;border-radius:100%;width:38px;height:38px;font-size:20px;color:var(--acid)}
.t2l .assembly-progress{width:27%;margin-left:13%}
.t2l .assembly-progress>div{display:flex;align-items:center;justify-content:space-between;font:8px monospace;letter-spacing:1.1px;color:#949d89}
.t2l .assembly-progress output{color:var(--acid);font-size:10px}
.t2l .assembly-progress input{display:block;width:100%;height:15px;margin:9px 0 0;appearance:none;background:transparent;cursor:ew-resize}
.t2l .assembly-progress input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,var(--acid) var(--progress,0%),#455039 var(--progress,0%))}
.t2l .assembly-progress input::-moz-range-track{height:1px;background:#455039}
.t2l .assembly-progress input::-moz-range-progress{background:var(--acid);height:1px}
.t2l .assembly-progress input::-webkit-slider-thumb{appearance:none;background:var(--acid);width:4px;height:9px;margin-top:-4px}
.t2l .assembly-progress input::-moz-range-thumb{border:0;border-radius:0;background:var(--acid);width:4px;height:9px}
.t2l .hero-page{display:flex;align-items:baseline;gap:7px;font:10px monospace;color:#58634e}
.t2l .hero-page b{font-size:20px;color:#d3d7cc;font-weight:400}





.t2l #assembly-end{position:absolute;bottom:0;scroll-margin-top:100svh}

@media(min-width:1600px){.t2l .hero-copy{top:31%}.t2l .hero-copy p{font-size:17px}.t2l .hero-actions{margin-top:35px}.t2l .site-header nav{font-size:14px}}
@media(max-width:1100px){.t2l .site-header nav{gap:18px}.t2l .hero-copy{left:4%;top:30%}.t2l .hero-copy p{font-size:13px}.t2l .hero-actions{gap:18px}.t2l .button-acid{gap:25px}.t2l .model-stage{left:44%;width:58%}.t2l .part-callout{right:5%;bottom:17%}.t2l .part-callout strong{font-size:10px}.t2l .model-caption{right:7%}.t2l .callout-dot:before{width:40px}}
@media(max-width:760px){.t2l .site-header{height:72px;padding:0 5%;gap:15px}.t2l .brand-name{font-size:12px}.t2l .brand-mark{font-size:29px}.t2l .site-header nav{display:none}.t2l .header-cta{margin-left:auto;font-size:10px;padding:10px 11px;gap:10px}.t2l .hero-topline{top:96px;left:6%;font-size:7px}.t2l .hero-topline>span:last-child{display:none}.t2l .assembly-story{height:165svh}.t2l .assembly-sticky{min-height:810px;height:100svh}.t2l .hero-copy{left:6%;top:150px}.t2l .eyebrow{font-size:7px;letter-spacing:1.5px;margin-bottom:15px}.t2l h1{font-size:clamp(48px,11.5vw,84px);letter-spacing:-.07em}.t2l .hero-copy p{font-size:12px;line-height:1.6;margin-top:17px}.t2l .hero-copy p br:last-child{display:none}.t2l .hero-actions{margin-top:20px}.t2l .button-acid{padding:13px 16px;font-size:11px;gap:26px}.t2l .text-link{font-size:10px}.t2l .model-stage{top:43%;left:8%;width:92%;height:44%}.t2l .model-caption{top:2%;right:7%;font-size:7px}.t2l .model-caption small{font-size:5px}.t2l .part-callout{bottom:15%;right:4%}.t2l .part-callout strong{font-size:9px}.t2l .part-callout span:not(.callout-dot){font-size:6px}.t2l .model-controls{left:30%;bottom:-2%}.t2l .model-controls button{font-size:9px;padding:9px 12px}.t2l .drag-label{display:none}.t2l .hero-bottom{left:6%;right:6%;bottom:24px}.t2l .scroll-cue{gap:10px;font-size:6px}.t2l .scroll-circle{width:30px;height:30px;font-size:15px}.t2l .assembly-progress{width:35%;margin-left:0}.t2l .assembly-progress>div{font-size:6px;letter-spacing:.5px}.t2l .assembly-progress label{max-width:95px;line-height:1.5}.t2l .hero-page{display:none}.t2l .hero-grid{inset:72px 0 0;background-size:65px 65px}}
@media(max-width:380px){.t2l .brand-name{font-size:10px}.t2l .header-cta{padding:9px}.t2l .hero-copy{top:140px}.t2l h1{font-size:45px}.t2l .model-stage{top:44%}.t2l .hero-copy p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.t2l *{transition:none!important}.t2l .assembly-story{height:100svh}.t2l .assembly-sticky{position:relative}.t2l .scroll-cue{visibility:hidden}}
.t2l .assembly-story{min-height:calc(690px + 40svh)}
.t2l .static-story{height:auto;min-height:100svh}
.t2l .static-story .assembly-sticky{position:relative}
.t2l .static-story .assembly-progress,.t2l .static-story .scroll-cue,.t2l .static-story .part-callout{visibility:hidden}
.t2l .static-story .model-caption{display:none}
@media(max-width:760px){.t2l .assembly-story{min-height:calc(810px + 35svh)}.t2l .static-story{min-height:100svh}}
@media(prefers-reduced-motion:reduce){.t2l .assembly-story{height:auto;min-height:100svh}}
.t2l .model-stage{left:40%;width:61%;top:17%;height:68%}
.t2l .model-caption{right:6%;top:0}

.t2l .part-hotspots{position:absolute;inset:0;z-index:4;pointer-events:none}
.t2l .part-hotspot{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:7px;border:0;padding:0;background:transparent;color:var(--acid);transform:translate(-50%,-50%);pointer-events:auto;white-space:nowrap;text-align:left}
.t2l .part-hotspot>span{display:grid;place-items:center;width:25px;height:25px;background:#10160de8;border:1px solid #91b64a;border-radius:50%;font:9px monospace;box-shadow:0 0 0 4px #c5ff3509;transition:background .2s,color .2s}
.t2l .part-hotspot b{font:7px monospace;letter-spacing:.8px;background:#101210d9;padding:6px 7px;border-bottom:1px solid #c5ff3544}
.t2l .part-hotspot:hover>span,.t2l .part-hotspot[aria-pressed=true]>span{background:var(--acid);color:#101210;box-shadow:0 0 0 5px #c5ff3518}
.t2l .part-hotspot[aria-pressed=true] b{color:#ecffd0;border-color:var(--acid)}
.t2l .model-stage .part-callout{bottom:3%;right:6%;pointer-events:auto;width:234px;display:block;border-left:1px solid #c5ff3550;padding-left:15px}
.t2l .part-callout div{background:transparent;padding:0}
.t2l .part-callout #part-index{font:7px monospace;letter-spacing:1.1px;color:var(--acid)}
.t2l .part-callout #part-title{font-size:13px;margin-top:7px;line-height:1.25}
.t2l .part-callout p{font-size:10px;line-height:1.5;color:#8f9b84;margin:7px 0}
.t2l .part-callout a{display:inline-flex;align-items:center;gap:25px;font-size:9px;color:#b5c1a8}
.t2l .part-callout a:hover{color:var(--acid)}
.t2l .part-callout a span{display:inline!important;font-size:15px!important}
.t2l .model-controls{left:16%;bottom:3%}
.t2l .drag-label{left:18%;bottom:-2%}
.t2l .static-story .part-hotspots{display:none}
@media(max-width:1100px){.t2l .model-stage{left:42%;width:59%}.t2l .model-stage .part-callout{width:205px;right:4%}.t2l .part-hotspot b{font-size:6px}.t2l .model-controls{left:10%}}
@media(max-width:760px){.t2l .model-stage{left:1%;width:99%;top:44%;height:41%}.t2l .model-caption{right:6%;top:0}.t2l .model-caption small{font-size:5px}.t2l .model-stage .part-callout{width:174px;right:6%;bottom:-6%;padding-left:11px}.t2l .part-callout #part-title{font-size:11px;margin-top:5px}.t2l .part-callout #part-index{font-size:6px;letter-spacing:.6px}.t2l .part-callout p{display:none}.t2l .part-callout a{font-size:8px;margin-top:5px}.t2l .part-hotspot b{display:none}.t2l .part-hotspot>span{width:25px;height:25px;font-size:8px}.t2l .model-controls{left:5%;bottom:-5%}.t2l .model-controls button{padding:10px;font-size:8px}.t2l .model-caption{font-size:6px}}
@media(max-width:380px){.t2l .model-stage .part-callout{width:153px;right:5%}.t2l .part-callout #part-title{font-size:10px}.t2l .model-controls button{padding:8px}}
@media(min-width:1101px){.t2l .model-stage{left:40%;width:59%}}
.t2l .photo-stage{--outline-opacity:.16;isolation:auto;mix-blend-mode:lighten;left:40%;width:59%;top:17%;height:68%}
.t2l .photo-visual{position:absolute;inset:3% 0 9%;width:100%;height:88%;overflow:hidden;mix-blend-mode:lighten;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.t2l .bike-photograph{mix-blend-mode:lighten}
.t2l .bike-outline{stroke:var(--acid);stroke-width:1.5;fill:none;opacity:var(--outline-opacity);vector-effect:non-scaling-stroke}
.t2l .trace-moving{fill:none;stroke:var(--acid);stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:0;vector-effect:non-scaling-stroke}
.t2l .trace-bloom{stroke-width:7;filter:url(#outline-bloom)}
.t2l .trace-line{stroke-width:2.2;filter:url(#outline-soft)}
.t2l .trace-head{stroke:#f4ffdb;stroke-width:1.4}
.t2l .accessory-zone{fill:#c5ff3500;stroke:#c5ff35;stroke-width:1;stroke-opacity:0;transition:fill .3s,stroke-opacity .3s;vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:none}
.t2l .show-parts .accessory-zone{stroke-opacity:.28;pointer-events:all}
.t2l .show-parts .accessory-zone.is-selected{fill:#c5ff3524;stroke-opacity:.95;filter:drop-shadow(0 0 4px #c5ff3560)}
.t2l .accessory-connector{fill:none;stroke:#c5ff3570;stroke-width:.7;stroke-dasharray:3 5;opacity:0;vector-effect:non-scaling-stroke}
.t2l .show-parts .accessory-connector{opacity:.7}
.t2l .photo-hotspots{position:absolute;inset:3% 0 9%;pointer-events:none;z-index:4}
.t2l .photo-stage .part-hotspot{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s;left:var(--label-x);top:var(--label-y)}
.t2l .photo-stage.show-parts .part-hotspot{opacity:1;visibility:visible;pointer-events:auto}
.t2l .photo-stage .part-hotspot b{font-size:7px;letter-spacing:.7px}
.t2l .photo-stage .part-callout{opacity:0;visibility:hidden;transition:opacity .25s;bottom:0;right:7%;width:242px;padding-left:15px}
.t2l .photo-stage.show-parts .part-callout{opacity:1;visibility:visible}
.t2l .photo-stage .model-controls{left:14%;bottom:1%}
.t2l .photo-stage .model-controls button{min-width:103px;font-size:10px}
.t2l .photo-stage .drag-label{left:15%;bottom:-4%;font-size:7px;letter-spacing:1.3px}
.t2l .photo-stage .model-caption{right:7%;top:0}

.t2l .photo-stage:not(.show-parts) .photo-note{opacity:1}
.t2l .photo-note{position:absolute;right:7%;bottom:6%;font:8px/1.8 monospace;letter-spacing:1px;color:#77836b;opacity:0;pointer-events:none}
.t2l .steady-outline .bike-outline{opacity:.36}
@media(max-width:1100px){.t2l .photo-stage{left:41%;width:59%}.t2l .photo-stage .part-callout{width:206px;right:4%}.t2l .photo-stage .model-controls{left:7%}.t2l .photo-stage .model-controls button{min-width:88px;font-size:9px}.t2l .photo-stage .drag-label{left:8%}.t2l .photo-stage .part-hotspot b{font-size:6px}}
@media(max-width:760px){.t2l .photo-stage{left:0;width:100%;top:44%;height:41%}.t2l .photo-visual{inset:0;width:100%;height:88%}.t2l .photo-hotspots{inset:0 0 12%}.t2l .photo-stage .model-caption{top:0;right:6%;font-size:6px}.t2l .photo-stage .part-hotspot b{display:none}.t2l .photo-stage .part-hotspot>span{width:25px;height:25px}.t2l .photo-stage .part-callout{width:170px;right:5%;bottom:-7%;padding-left:10px}.t2l .photo-stage .model-controls{left:5%;bottom:-6%}.t2l .photo-stage .model-controls button{min-width:0;padding:10px 8px;font-size:8px}.t2l .photo-stage .part-callout p{display:none}.t2l .photo-stage .drag-label{display:none}.t2l .photo-note{right:6%;bottom:-4%;font-size:6px;max-width:145px;letter-spacing:.6px}.t2l .bike-outline{stroke-width:1}.t2l .trace-line{stroke-width:1.5}.t2l .trace-bloom{stroke-width:4}.t2l .trace-head{stroke-width:1}}
@media(prefers-reduced-motion:reduce){.t2l .trace-moving{display:none!important}.t2l .photo-stage .bike-outline{opacity:.3}.t2l .photo-stage .part-hotspot,.t2l .photo-stage .part-callout,.t2l .accessory-zone{transition:none}}
/* phones: the photo caption collides with the hero buttons */
@media(max-width:760px){.t2l .photo-stage .model-caption{display:none}}