/* Homepage presentation. Shared order-page styles remain in style.css. */
.homepage{--paper:#fafaf8;--ink:#202725;--muted:#626c67;--line:#d6dbd6;--teal:#315e54;background:var(--paper)}
.homepage .preview-banner{background:#eeefea;border-bottom:1px solid var(--line);color:#626c67;font-size:9px;padding:8px;letter-spacing:.12em}
.homepage .nav-shell{max-width:1440px;min-height:100px;padding:18px 5%;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.homepage .brand{width:88px}
.homepage .nav-shell nav{display:flex;gap:32px;font-size:12px}
.homepage a:focus-visible,.homepage button:focus-visible{outline:2px solid var(--teal);outline-offset:5px}
.homepage section[id]{scroll-margin-top:24px}
.homepage .hero{max-width:1440px;margin:auto;padding:54px 5% 64px;display:grid;grid-template-columns:minmax(0, .8fr) minmax(0,1.4fr);gap:48px;min-height:0;background:transparent;align-items:center}
.homepage .hero-copy{padding:0;display:block}
.homepage .eyebrow{font-family:Consolas,'Courier New',monospace;font-size:10px;font-weight:400;letter-spacing:.12em}
.homepage .hero-copy>.eyebrow{color:var(--muted);margin:0 0 32px}
.homepage .hero-heading{display:block;container-type:normal;margin:0}
.homepage .hero-heading h1{font-size:clamp(40px,4.5vw,68px);font-weight:600;line-height:1.08;letter-spacing:-.055em;margin:0}
.homepage .hero-copy>.hero-sub{margin:26px 0 0;max-width:340px;font-size:15px;line-height:1.75;color:var(--muted)}
.homepage .hero-media{min-height:0;position:static}
.homepage .hero-media>img{width:100%;height:auto;aspect-ratio:1.25;object-fit:cover}
.homepage .photo-caption{position:static;color:var(--muted);text-shadow:none;font:10px Consolas,'Courier New',monospace;letter-spacing:.1em;margin-top:12px}
.homepage .section-wrap{max-width:1440px;padding:64px 5%}
.homepage .section-wrap h2{font-size:clamp(30px,3vw,44px);font-weight:500;line-height:1.13;letter-spacing:-.045em;margin:0}
.homepage .intro{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;border-top:1px solid var(--line);align-items:start}
.homepage .intro-right{font-size:15px;line-height:1.8;max-width:710px}
.homepage .intro-right p{margin:0 0 16px}
.homepage .inline-arrow{font-size:12px;font-weight:600;margin-top:8px}
.homepage #discover{padding-bottom:64px}
.homepage #features{padding-top:48px;padding-bottom:56px;border-top:1px solid var(--line)}
.homepage .section-heading{margin-bottom:32px}
.homepage .section-heading h2 br{display:none}
.homepage .section-heading h2 br:after{content:' '}
.homepage .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.homepage .feature-grid article{border:0;border-top:1px solid var(--line);background:transparent;min-height:0;padding:24px 24px 0 0}
.homepage .feature-grid article+article{border-left:1px solid var(--line);padding-left:24px}
.homepage .feature-grid .feature-icon{margin:0 0 18px;transform:scale(.7);transform-origin:left center;height:110px;margin-bottom:-8px}
.homepage .feature-grid h3{font-size:19px;font-weight:500;letter-spacing:-.025em;margin:18px 0 12px}
.homepage .feature-grid p{font-size:14px;line-height:1.7;margin:0;color:var(--muted)}
.homepage #specifications{padding-top:56px;padding-bottom:64px;border-top:1px solid var(--line);grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px}
.homepage .spec-table{padding:0}
.homepage .spec-table>div{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;padding:12px 0;align-items:baseline}
.homepage .spec-table>div:first-child{padding-top:0}
.homepage .spec-table span{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted);line-height:1.5}
.homepage .spec-table strong{font-size:15px;line-height:1.6;color:var(--ink);font-weight:400}
.homepage .order-section{background:#f0f2ed;border-block:1px solid var(--line)}
.homepage .order-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;align-items:start}
.homepage .order-description p:not(.eyebrow){font-size:15px;font-weight:500;line-height:1.8;max-width:340px;margin-top:24px}
.homepage .order-description .fine{font-size:15px!important;font-weight:500!important}
.homepage .order-card{padding:0;background:transparent;box-shadow:none}
.homepage .order-card-top{font:10px Consolas,'Courier New',monospace;border-bottom:1px solid var(--line);padding-bottom:16px;line-height:1.5}
.homepage .card-image{display:none}
.homepage .order-meta{margin:24px 0;gap:24px}
.homepage .order-meta small{font:10px Consolas,'Courier New',monospace;letter-spacing:.08em;color:var(--muted)}
.homepage .order-meta strong{font-size:22px;font-weight:500}
.homepage .availability-note{font-size:15px;font-weight:500;line-height:1.6}
.homepage .checkout{background:var(--ink);color:white;font-size:13px;font-weight:500;padding:18px 20px}
.homepage .checkout:hover{background:var(--teal)}
.homepage .checkout:disabled{background:#d6d8d4;color:#626c67}
.homepage .checkout-note{text-align:left;font-size:15px;font-weight:400;line-height:1.7;color:var(--muted);margin-bottom:0}
.homepage .bottom-info{gap:48px;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
.homepage .orange{color:var(--muted)}
.homepage .bottom-info h3{font-size:22px;font-weight:500;margin:18px 0 12px}
.homepage .bottom-info p:not(.eyebrow){font-size:14px;line-height:1.7;max-width:340px}
.homepage footer{background:var(--paper);color:var(--muted);border-top:1px solid var(--line)}
.homepage .footer-inner{max-width:1440px;padding:24px 5%;font-size:11px}
.homepage .footer-inner button{color:var(--muted);border:0;padding:8px 0;font-size:11px}
@media(min-width:901px){.homepage .hero-media>img{max-height:580px}}
@media(max-width:900px){
 .homepage .hero{gap:28px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .homepage .hero-media{height:auto}
 .homepage .hero-heading h1{font-size:40px}
 .homepage .feature-grid article{padding-right:16px}
 .homepage .feature-grid article+article{padding-left:16px}
 .homepage .feature-grid h3{font-size:17px}
 .homepage .feature-grid .feature-icon{transform:scale(.6)}
}
@media(max-width:650px){
 .homepage .nav-shell{min-height:0;gap:18px;flex-wrap:wrap;padding:16px 6%}
 .homepage .brand{width:70px}
 .homepage .nav-shell nav{gap:16px;font-size:11px;flex-wrap:wrap;margin-left:0}
 .homepage .hero{grid-template-columns:1fr;padding:36px 6% 40px;gap:28px}
 .homepage .hero-heading h1{font-size:clamp(38px,9vw,56px)}
 .homepage .hero-copy>.eyebrow{margin-bottom:20px}
 .homepage .hero-copy>.hero-sub{max-width:450px;margin-top:20px}
 .homepage .hero-media>img{aspect-ratio:1.25}
 .homepage .section-wrap,.homepage #discover,.homepage #features,.homepage #specifications{padding:40px 6%}
 .homepage .intro,.homepage #specifications,.homepage .order-layout,.homepage .bottom-info{grid-template-columns:1fr;gap:28px}
 .homepage .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
 .homepage .feature-grid article:nth-child(3){border-left:0;padding-left:0}
 .homepage .spec-table>div{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:16px}
 .homepage .order-meta strong{font-size:19px}
 .homepage .bottom-info>div+div{padding-top:24px;border-top:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Photo-only opening section. Preserve the entire product photograph. */
.homepage .hero.hero-photo{display:block;max-width:none;width:100%;margin:0;padding:0}
.homepage .hero-photo .hero-media>img{width:100%;height:auto;max-height:none;aspect-ratio:auto}

/* Brand anchors the introduction below the product photograph. */
.homepage .intro-logo img{width:340px;max-width:100%;height:auto;mix-blend-mode:multiply}
.homepage .home-nav{justify-content:flex-end}
.homepage .home-nav nav{margin-left:auto}
@media(max-width:650px){.homepage .intro-logo img{width:240px}}

/* Give the documentation and contact links more prominence. */
.homepage .bottom-info .inline-arrow{font-size:17px;line-height:1.6;font-weight:600}

/* Each operating mode has its own open, ruled section. */
.homepage #features.mode-sections{padding:0;border:0;scroll-margin-top:24px}
.homepage .mode-section,.homepage .documentation{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;align-items:start;border-top:1px solid var(--line)}
.homepage .mode-heading .feature-icon{width:160px;height:110px;max-width:100%;margin:0 0 20px;background-image:url("assets/feature-icons.png");background-repeat:no-repeat;background-size:680px auto;mix-blend-mode:multiply}
.homepage .mode-copy p,.homepage .document-list p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 16px;max-width:710px}
.homepage .mode-copy p:last-child,.homepage .document-list p:last-child{margin-bottom:0}
.homepage .document-list article+article{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
.homepage .document-list h3{font-size:20px;font-weight:500;letter-spacing:-.025em;margin:0 0 12px}
.homepage .document-links{display:flex;gap:12px 28px;flex-wrap:wrap}
.homepage .document-list .inline-arrow{font-size:15px;line-height:1.6}
@media(max-width:650px){
 .homepage .mode-section,.homepage .documentation{grid-template-columns:1fr;gap:24px}
 .homepage .mode-heading{display:flex;align-items:center;gap:16px}
 .homepage .mode-heading .feature-icon{flex:0 0 160px;margin:0}
 .homepage .mode-heading h2{font-size:28px}
}
@media(max-width:380px){.homepage .mode-heading{display:block}.homepage .mode-heading .feature-icon{margin-bottom:16px}}

/* Sections stay hidden until scrolling brings them into view. */
@media(prefers-reduced-motion:no-preference){
 .homepage main section.reveal-pending{opacity:0;transform:translateY(70px)}
 .homepage main section.reveal-visible{opacity:1;transform:translateY(0);transition:opacity 1.5s ease,transform 1.5s cubic-bezier(.22,.61,.36,1)}
}
@media print{
 .homepage main section.reveal-pending,.homepage main section.reveal-visible{opacity:1;transform:none;transition:none}
}

/* Open spacing between sections, without divider lines. */
.homepage .intro,
.homepage .mode-section,
.homepage .documentation,
.homepage #specifications,
.homepage .order-section,
.homepage footer{border:0}
.homepage .bottom-info>div+div{border-top:0}

.homepage .intro-logo img{mix-blend-mode:normal}

/* Order and contact labels, with a brighter sage checkout button. */
.homepage .order-card-top{font-size:15px;font-weight:500}
.homepage .order-card-top .availability{font-size:15px;font-weight:700}
.homepage .order-meta small{font-size:15px;font-weight:500}
.homepage .bottom-info .eyebrow{font-size:15px;font-weight:500}
.homepage .checkout{background:#b7d3a8;color:var(--ink)}
.homepage .checkout:hover{background:#a6c795}
.homepage .checkout:disabled{background:#d6d8d4;color:#626c67}

.homepage .checkout{font-size:15px;font-weight:500}

/* Vertically center the introduction beside the logo on desktop. */
@media(min-width:651px){.homepage #discover{align-items:center}}

/* Mode titles precede their icons. */
.homepage .mode-heading .feature-icon{margin:20px 0 0}
@media(max-width:650px){.homepage .mode-heading .feature-icon{margin:0}}
@media(max-width:380px){.homepage .mode-heading .feature-icon{margin:16px 0 0}}

/* Tighter title-to-icon spacing for these three modes. */
.homepage #sampler .mode-heading .feature-icon,
.homepage #live-sampler .mode-heading .feature-icon,
.homepage #midi-loop .mode-heading .feature-icon{margin-top:0}

/* Rear photograph accompanies the technical specifications. */
.homepage .rear-photo{margin:32px 0 0}.homepage .rear-photo img{display:block;width:100%;height:auto;image-orientation:from-image}.homepage .rear-photo figcaption{margin-top:10px;font-size:12px;line-height:1.6;color:var(--muted)}

/* Approved typography: descriptions enlarged from 15px to 18px. */
.homepage .intro-right,
.homepage .mode-copy p,
.homepage .document-list p,
.homepage .order-description p:not(.eyebrow),
.homepage .checkout-note,
.homepage .bottom-info p:not(.eyebrow){
  font-size:18px;
  line-height:1.8;
}
.homepage .order-description .fine{font-size:18px!important}

/* Approved spacing: closer spacing between the four operating modes. */
.homepage #features .mode-section{padding-top:48px;padding-bottom:48px}
@media(max-width:650px){
  .homepage #features .mode-section{padding-top:30px;padding-bottom:30px}
}

/* Approved compact four-track MIDI Loop icon. */
.homepage .mode-heading .feature-icon.icon-midi-loop{background-image:url("assets/midi-loop.svg?v=compact1");background-size:contain;background-position:center;background-repeat:no-repeat}



/* Match Performance visible top inset (7.73px) and title margins. */
.homepage #midi-loop .mode-heading .feature-icon{position:static;top:auto;margin-top:20px;background-position:center -3.64px}
@media(max-width:650px){.homepage #midi-loop .mode-heading .feature-icon{margin-top:0}}
@media(max-width:380px){.homepage #midi-loop .mode-heading .feature-icon{margin-top:16px}}

/* Vector versions preserve the four symbols and animate their working parts. */
.homepage .mode-heading .feature-icon.feature-symbol{background-image:none;mix-blend-mode:normal}
.homepage .feature-icon svg{display:block;width:100%;height:100%;overflow:visible}
.homepage .icon-midi-loop svg{transform:translateY(-3.64px)}
.homepage .key-shade{opacity:0}
.homepage .sound-wave{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .homepage .music-note{animation:note-beat 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
 .homepage .note-two{animation-delay:-1.2s}
 .homepage .piano-key{transform-box:fill-box;transform-origin:center top;animation:key-beat 2.4s ease-in-out infinite;animation-delay:var(--beat)}
 .homepage .piano-key.white-key{animation-name:white-key-beat}
 .homepage .key-shade{animation:key-shade 2.4s ease-in-out infinite;animation-delay:var(--beat)}
 .homepage .tape-reel{animation:reel-turn 12s linear infinite}
 .homepage .sound-wave{animation:sound-arrive 4s linear infinite;animation-delay:var(--wave-delay,0s)}
 .homepage .loop-playhead{animation:loop-scan 4s linear infinite}
 .homepage .feature-icon svg *{animation-play-state:paused}
 .homepage .feature-icon.is-animating svg *{animation-play-state:running}
}
@keyframes note-beat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* Keep the rear edge fixed while the key tip dips, then releases. */
@keyframes key-beat{0%,12%,40%,100%{transform:scaleY(1)}20%,30%{transform:scaleY(.97)}}
@keyframes white-key-beat{0%,12%,40%,100%{transform:scaleY(1)}20%,30%{transform:scaleY(.985)}}
@keyframes key-shade{0%,12%,38%,100%{opacity:0}20%,30%{opacity:1}}
@keyframes reel-turn{to{transform:rotate(360deg)}}
@keyframes sound-arrive{0%{transform:translateX(42px);opacity:0}18%{opacity:.65}55%{opacity:.55}90%,100%{transform:translateX(0);opacity:0}}
@keyframes loop-scan{from{transform:translateX(0)}to{transform:translateX(320px)}}
@media print{.homepage .feature-icon svg *{animation:none!important}}