/* AudioTray product page — uses the same sub-brand design tokens as Typewave's
   page (loaded separately, see ds/), independent of the main site's --c-*
   tokens and its own light/dark toggle. Intentionally fixed-theme, matching
   the original design. */

.ap-page{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text)}
.ap-page a:not(.ap-btn):not(.ap-btn-ghost):not(.ap-btn-secondary){color:var(--color-primary);text-decoration:none}
.ap-page a:not(.ap-btn):not(.ap-btn-ghost):not(.ap-btn-secondary):hover{color:var(--color-primary-hover);text-decoration:underline}
.ap-page ::selection{background:var(--color-primary-tint)}
.ap-page *{box-sizing:border-box}
.ap-page img{max-width:100%;display:block}

.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);padding:14px 26px;font-size:var(--text-base);font-weight:var(--weight-medium);text-decoration:none;border:1px solid var(--color-primary)}
.ap-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff;text-decoration:none}
.ap-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;color:#fff;border:1px solid var(--ink-600);border-radius:var(--radius-md);padding:14px 26px;font-size:var(--text-base);font-weight:var(--weight-medium);text-decoration:none}
.ap-btn-ghost:hover{text-decoration:none;border-color:var(--ink-400)}

/* Hero */
/* The hero follows the site theme: dark by default, light via html[data-theme="light"].
   The Vanta rings canvas is transparent, so this background shows through. */
.ap-hero{--hero-bg:var(--ink-900);--hero-veil:28,43,52;--hero-text:#fff;--hero-sub:var(--ink-300);--hero-claim:var(--ink-400);--hero-line:var(--ink-600);--hero-line-hover:var(--ink-400);--hero-pill-bg:rgba(255,255,255,.06);--hero-pill-border:var(--ink-700);--hero-accent:var(--green-500);--hero-accent-tint:rgba(158,228,147,.12);--hero-btn-bg:var(--ink-800);--hero-btn-bg-hover:var(--ink-700)}
html[data-theme="light"] .ap-hero{--hero-bg:var(--ink-0);--hero-veil:255,255,255;--hero-text:var(--ink-900);--hero-sub:var(--ink-600);--hero-claim:var(--ink-500);--hero-line:var(--ink-300);--hero-line-hover:var(--ink-500);--hero-pill-bg:rgba(255,255,255,.7);--hero-pill-border:var(--ink-200);--hero-accent:var(--green-700);--hero-accent-tint:rgba(74,158,80,.12);--hero-btn-bg:var(--ink-0);--hero-btn-bg-hover:var(--ink-100)}
.ap-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--hero-bg);color:var(--hero-text);padding:88px 48px 72px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:20px}
/* Left edge lines up with the content column below (.ap-section: 1100px max, 48px padding). */
@media (min-width:641px){.ap-hero{padding-left:max(48px,calc((100% - 1100px) / 2 + 48px));padding-right:max(48px,calc((100% - 1100px) / 2 + 48px))}}
/* With the copy on the left, move the rings into the free space on the right. */
@media (min-width:901px){.ap-hero>.ap-hero-rings{left:35%}}
.ap-hero>*{position:relative;z-index:1}
.ap-hero>.ap-hero-rings{position:absolute;inset:0;z-index:0;pointer-events:none;filter:saturate(.45);opacity:.7}
/* Darkens the rings behind the centred copy so the text stays readable. */
.ap-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--hero-veil),.85) 45%,rgba(var(--hero-veil),0) 75%)}
.ap-hero img{height:64px}
.ap-eyebrow-dark{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--hero-accent);background:var(--hero-accent-tint);padding:5px 12px;border-radius:var(--radius-pill)}
.ap-hero h1{font-size:var(--text-4xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);margin:0;max-width:760px;line-height:var(--leading-tight)}
.ap-hero-sub{font-size:var(--text-md);color:var(--hero-sub);max-width:600px;line-height:var(--leading-relaxed);margin:0}
.ap-hero-ctas{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap;justify-content:flex-start}

/* Section shells */
.ap-section{padding:72px 48px 40px;max-width:1100px;margin:0 auto}
.ap-section-sunken{background:var(--color-surface-sunken)}
.ap-section-sunken>.ap-section-inner{padding:72px 48px;max-width:1100px;margin:0 auto}
.ap-section-head{text-align:center;margin-bottom:44px}
.ap-section-head h2{font-size:var(--text-2xl);font-weight:var(--weight-semibold);margin:0 0 8px}
.ap-section-head p{color:var(--color-text-muted);margin:0;max-width:560px;margin-left:auto;margin-right:auto}

/* Steps */
.ap-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ap-step{display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center}
.ap-step-icon{width:52px;height:52px;border-radius:var(--radius-pill);background:var(--color-primary-tint);display:flex;align-items:center;justify-content:center}
.ap-step-icon svg{color:var(--color-primary)}
.ap-step-n{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.ap-step-title{font-weight:var(--weight-semibold);font-size:var(--text-md);color:var(--color-text)}
.ap-step-text{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal);max-width:280px}

/* Feature grid */
.ap-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ap-feature-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:12px}
.ap-feature-card svg{color:var(--color-primary)}
.ap-feature-card .ap-feature-title{font-weight:var(--weight-semibold);font-size:var(--text-md);color:var(--color-text)}
.ap-feature-card p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal);margin:0}

/* Orientation callout */
.ap-orientation{padding:72px 48px;max-width:900px;margin:0 auto;text-align:center}
.ap-orientation svg{color:var(--color-primary)}
.ap-orientation h2{font-size:var(--text-2xl);font-weight:var(--weight-semibold);margin:16px 0 12px;color:var(--color-text)}
.ap-orientation p{color:var(--color-text-muted);margin:0;font-size:var(--text-md);line-height:var(--leading-relaxed)}

/* Final CTA */
.ap-cta{background:var(--ink-900);color:#fff;padding:72px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.ap-cta h2{font-size:var(--text-2xl);font-weight:var(--weight-semibold);margin:0}
.ap-cta p{color:var(--ink-300);margin:0;max-width:480px}
.ap-cta-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

@media (max-width:900px){
  .ap-steps-grid,.ap-feature-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ap-hero,.ap-section,.ap-section-sunken>.ap-section-inner,.ap-cta{padding-left:24px;padding-right:24px}
  .ap-steps-grid,.ap-feature-grid{grid-template-columns:1fr}
  .ap-hero::after{background:linear-gradient(90deg,rgba(var(--hero-veil),.88) 70%,rgba(var(--hero-veil),.5))}
}

/* AudioTray additions */
.ap-hero-icon{height:64px}
/* Rotating rainbow frame around the hero icon. The radii are the icon's own
   corner radius (~19.6% of its size) plus the frame width, so the frame runs
   concentric to the icon; bottom-right stays square like the icon itself. */
@property --ap-logo-angle{syntax:"<angle>";inherits:true;initial-value:0deg}
.ap-hero-logo{--ap-logo-frame:3px;--ap-logo-rainbow:conic-gradient(from var(--ap-logo-angle),#ff5f6d,#ffc371,#f9f871,#6ef59a,#47c5ff,#7b61ff,#ff5fd2,#ff5f6d);position:relative;display:block;padding:var(--ap-logo-frame);border-radius:calc(12.5px + var(--ap-logo-frame)) calc(12.5px + var(--ap-logo-frame)) 0 calc(12.5px + var(--ap-logo-frame));animation:ap-logo-spin 4s linear infinite}
/* ::before = soft glow (dark mode only), ::after = the crisp frame on top of it */
.ap-hero-logo::before,.ap-hero-logo::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ap-logo-rainbow)}
.ap-hero-logo::before{filter:blur(14px);opacity:.55}
.ap-hero-logo .ap-hero-icon{display:block}
html[data-theme="light"] .ap-hero-logo{filter:drop-shadow(0 10px 14px rgba(28,43,52,.28)) drop-shadow(0 2px 3px rgba(28,43,52,.18))}
html[data-theme="light"] .ap-hero-logo::before{display:none}
@keyframes ap-logo-spin{to{--ap-logo-angle:360deg}}
@media (prefers-reduced-motion:reduce){.ap-hero-logo{animation:none}}
.ap-hero-claim{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--hero-claim);margin:0}
.ap-pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.ap-pill{display:inline-flex;align-items:center;gap:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:7px 14px;font-size:var(--text-sm);color:var(--color-text-muted)}
.ap-pill svg{color:var(--color-primary)}
.ap-hero .ap-pill-row{justify-content:flex-start}
.ap-hero .ap-pill{background:var(--hero-pill-bg);border-color:var(--hero-pill-border);color:var(--hero-sub);margin:0}
.ap-hero .ap-pill svg{color:var(--hero-accent)}
.ap-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--hero-btn-bg);color:var(--hero-text);border:1px solid var(--hero-line);border-radius:var(--radius-md);padding:14px 26px;font-size:var(--text-base);font-weight:var(--weight-medium);text-decoration:none}
.ap-btn-secondary:hover{background:var(--hero-btn-bg-hover);border-color:var(--hero-line-hover);color:var(--hero-text);text-decoration:none}
.ap-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* Trailer (one video per language) and screenshot gallery */
.ap-trailer{margin-top:40px}
.ap-trailer video{display:block;width:100%;aspect-ratio:16/9;background:#02060c;border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.ap-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.ap-gallery .ap-shot:first-child:nth-last-child(odd){grid-column:1 / -1}
.ap-shot{display:block;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.ap-shot:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(28,43,52,.18)}
.ap-shot img{width:100%;height:auto;aspect-ratio:16/9}
@media (max-width:640px){.ap-gallery{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ap-shot{transition:none}.ap-shot:hover{transform:none}}
.ap-compare-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:28px}
.ap-compare-card h3{font-size:var(--text-md);font-weight:var(--weight-semibold);margin:0 0 10px;color:var(--color-text)}
.ap-compare-card p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal);margin:0}
.ap-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ap-detail-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:26px}
.ap-detail-card h3{display:flex;align-items:center;gap:10px;font-size:var(--text-md);font-weight:var(--weight-semibold);margin:0 0 12px;color:var(--color-text)}
.ap-detail-card h3 svg{color:var(--color-primary);flex:none}
.ap-detail-card ul{margin:0;padding-left:18px;color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}
.ap-detail-card li{margin-bottom:6px}
.ap-detail-card code,.ap-table code{font-family:var(--font-mono);font-size:.92em;background:var(--color-surface-sunken);padding:1px 6px;border-radius:4px}
.ap-table{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;font-size:var(--text-sm)}
.ap-table th,.ap-table td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--color-border);vertical-align:top;color:var(--color-text-muted)}
.ap-table th{width:34%;color:var(--color-text);font-weight:var(--weight-semibold)}
.ap-table tr:last-child th,.ap-table tr:last-child td{border-bottom:0}
.ap-credits{max-width:760px;margin:0 auto;padding:0 48px 64px;text-align:center;color:var(--color-text-faint);font-size:var(--text-xs);line-height:var(--leading-normal)}
@media (max-width:900px){.ap-detail-grid,.ap-compare{grid-template-columns:1fr}}
@media (max-width:640px){.ap-credits{padding-left:24px;padding-right:24px}.ap-table th{width:auto}}