/* Phone layout: compact hero, studio first, full-width voice cards. */
.headline-row>.gradient-text{display:block}
.hero h1>.headline-row+br{display:none}
.settings summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;cursor:pointer;font-size:11px;color:#c3acd8;min-height:36px;margin-bottom:10px}
.settings summary::-webkit-details-marker{display:none}
.settings summary>span{font-size:17px;transition:transform .2s}
.settings[open] summary>span{transform:rotate(45deg)}
@media(max-width:767px){
  html{scroll-padding-top:85px}
  body{overflow-wrap:break-word}
  main{display:flex;flex-direction:column}
  .shell{width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:600px}
  .header{padding-top:env(safe-area-inset-top)}
  .nav-inner{height:64px;padding:0 max(16px,env(safe-area-inset-left));gap:12px}
  .header .brand{font-size:21px;gap:8px;letter-spacing:-.9px}
  .header .brand img{width:30px;height:30px}
  .header nav{display:none}
  .nav-cta{min-height:44px;padding:8px 12px;font-size:10px;gap:8px}
  .hero{order:1;display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:22px;padding:29px 0 26px}
  .hero:before{inset:0 -16px}
  .hero-copy{text-align:center}
  .eyebrow{font-size:8px;letter-spacing:.8px;min-height:27px;padding:6px 10px}
  .hero h1{font-size:clamp(29px,8.1vw,43px);line-height:1.18;letter-spacing:-1.5px;margin:17px 0 14px}
  .headline-row{display:block;white-space:nowrap}
  .headline-row>.gradient-text{display:inline}
  .hero h1>.headline-row+br{display:none}
  .hero-description{font-size:12px;line-height:1.8;color:#b6aec7}
  .hero-actions{display:grid;grid-template-columns:1.1fr 1fr;gap:9px;margin:21px 0 17px}
  .primary-link,.secondary-link{min-width:0;min-height:48px;font-size:11px;gap:8px;padding:0 10px;border-radius:10px}
  .primary-link svg:last-child{margin-left:0}
  .hero-actions svg{width:15px;height:15px}
  .hero-proof{justify-content:center;font-size:9px;gap:15px;flex-wrap:nowrap}
  .hero-proof>span{gap:4px;white-space:nowrap}
  .hero-visual{height:182px;width:100%;border-radius:17px;margin:0;background:radial-gradient(ellipse at 80% 50%,#49326844,transparent 80%),linear-gradient(130deg,#20192c,#15121f)}
  .orbit-label{top:13px;left:15px;font-size:6px;letter-spacing:.7px}
  #sound-scene,.hero-visual #sound-scene{width:47%;height:212px;left:auto;right:0;top:-14px}
  #sound-scene:not([data-scene=ready]):before{width:120px;height:120px;top:44px}
  .floating-note,.orb-caption{display:none}
  .hero-visual .demo-glass{left:15px;right:auto;bottom:15px;width:57%;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none}
  .demo-top{gap:8px;justify-content:flex-start}
  .demo-lang{display:none}
  .demo-badge{font-size:7px;padding:4px 6px}
  .hero-visual .demo-glass>p{font-size:13px;line-height:1.6;margin:10px 0 12px;letter-spacing:-.2px}
  .demo-player{gap:10px}
  .hero-play{width:44px;height:44px}
  .demo-player .wave-bars{height:25px}
  .demo-player .wave-bars i:nth-child(n+19){display:none}
  .demo-voice{display:none}
  .section-divider{order:2;padding:14px 0;font-size:6px;letter-spacing:.5px}
  .studio-section{order:3;padding:28px 0 36px}
  .studio-section .section-heading{display:block;margin-bottom:18px}
  .kicker{font-size:8px;letter-spacing:1px;margin-bottom:9px}
  .studio-section .section-heading h2{font-size:25px;line-height:1.25;letter-spacing:-1px}
  .status{display:inline-flex;max-width:none;font-size:10px;margin-top:10px;padding:6px 10px;line-height:1.5}
  .workspace{border-radius:16px}
  .workspace-top{display:none}
  .workspace-top-right{font-size:8px}
  .studio{display:flex;flex-direction:column}
  .editor{width:100%;padding:16px;border-right:0;min-width:0}
  .editor-top{gap:8px;margin-bottom:12px}
  .editor-top>label{font-size:12px}
  .quiet{font-size:10px;min-height:44px}
  .text-frame textarea{font-size:16px;line-height:1.75;height:160px;min-height:140px;padding:15px;flex:auto;scroll-margin-top:90px}
  .text-bottom{font-size:9px;padding:10px 14px;color:#ab9abc}
  .editor-tools{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;margin-top:11px}
  .toolbar-label{display:none}
  .editor-tools button{padding:8px 5px;font-size:9px;min-height:44px;color:#c1afcf}
  .voice-panel{width:100%;padding:16px;border-top:1px solid #ffffff0e}
  .voice-panel>h3{display:none}
  .voice-panel .search{display:none}
  .voice-tabs{margin:0 0 12px}
  .voice-tabs button{min-height:40px;font-size:10px;color:#b0a0c0}
  .voice-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .voice-card{flex-direction:column;text-align:center;gap:7px;min-width:0;padding:13px 4px 11px;min-height:102px;border-radius:10px}
  .voice-card .avatar{width:35px;height:35px}
  .voice-info{gap:5px;width:100%}
  .voice-info strong{font-size:11px;white-space:nowrap}
  .voice-info small{font-size:8px;color:#b1a0bf;white-space:nowrap}
  .voice-card .choice-mark{position:absolute;top:6px;right:6px;width:15px;height:15px}
  .voice-list:has([data-category=reference]:not([hidden])){grid-template-columns:1fr}
  .voice-card[data-category=reference]{flex-direction:row;text-align:left;padding:12px;min-height:66px;gap:10px}
  .voice-card[data-category=reference] .voice-info small{white-space:normal}
  .voice-card[data-category=reference] .choice-mark{position:static;margin-left:auto}
  .settings{margin-top:15px;padding-top:8px}
  .settings summary{min-height:44px;margin:0;font-size:12px;color:#c2abd6}
  .settings-content{padding:9px 0 3px}
  .settings label{font-size:10px;color:#b7a1ca}
  .settings select{font-size:16px;min-height:44px;padding:8px 10px;color:#d3bde4}
  .settings-row{gap:10px;margin-top:12px}
  .panel-note{display:none}
  .editor-footer{width:100%;padding:14px 16px;display:grid;grid-template-columns:1fr;gap:13px}
  .selected{display:none}
  .generate{width:100%;min-height:50px;padding:0 18px;font-size:13px;gap:13px;margin:0;border-radius:10px}
  .generate svg{width:18px;height:18px}
  .message{width:100%;font-size:10px;text-align:center;padding:0 16px 14px;color:#b39ac9}
  .result{padding:14px;scroll-margin-top:85px}
  .download{min-height:44px;font-size:12px;padding-top:10px}
  .voices-section{order:4;padding:14px 0 36px}
  .section-heading{display:block;margin-bottom:20px}
  .section-heading h2{font-size:24px;letter-spacing:-.9px}
  .section-heading>p{font-size:11px;margin-top:11px;line-height:1.7}
  .section-heading>p br{display:none}
  .samples-grid{display:grid;grid-template-columns:1fr;gap:12px;overflow:visible;padding:0;scroll-snap-type:none}
  .sample-card{width:100%;min-width:0;padding:18px;display:grid;grid-template-columns:1fr auto;gap:0 12px}
  .sample-header{grid-column:1/-1;gap:12px}
  .sample-header .avatar{width:44px;height:44px}
  .sample-header h3{font-size:15px}
  .sample-header p{font-size:10px}
  .sample-header .preview-play{width:44px;height:44px}
  .sample-description{grid-column:1/-1;margin:12px 0;font-size:11px}
  .sample-wave{grid-column:1;padding:10px 0;border-bottom:0;min-width:0;gap:8px}
  .sample-wave .wave-bars{height:27px}
  .sample-wave .wave-bars i{max-height:24px;width:2px}
  .sample-wave>span:last-child{display:none}
  .choose-voice{grid-column:2;gap:7px;padding:0;min-height:44px;font-size:9px;width:auto;align-self:center;white-space:nowrap}
  .choose-voice svg{width:13px;height:13px}
  .how-section{order:5;padding:20px 0 36px}
  .steps{grid-template-columns:1fr;gap:21px}
  .steps article{gap:14px}
  .steps p{font-size:11px;line-height:1.8}
  .closing{order:6;display:block;padding:24px;margin-bottom:30px}
  .closing h2{font-size:22px;line-height:1.45}
  .closing .primary-link{display:flex;width:100%;margin-top:19px}
  footer{padding-bottom:calc(24px + env(safe-area-inset-bottom));gap:12px;font-size:10px}
  footer p{display:none}
}
@media(max-width:359px){
 .hero h1{font-size:29px;letter-spacing:-1.6px}
 .hero-proof{gap:9px;font-size:8px}
 .hero-actions .primary-link,.hero-actions .secondary-link{font-size:10px;gap:6px;padding:0 7px}
 .hero-actions .primary-link svg:first-child{display:none}
 .hero-visual .demo-glass>p{font-size:12px}
 .studio-section .section-heading h2{font-size:23px}
 .voice-info strong{font-size:10px}
 .voice-info small{font-size:7px}
 .editor-tools button{font-size:8px}
 .sample-wave .wave-bars i:nth-child(n+21){display:none}
 .choose-voice{font-size:8px;gap:5px}
}

/* Transparent horizontal brand lockup. */
.brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand img,.header .brand img,footer .brand img{display:block;object-fit:contain;background:none;border:0;border-radius:0;box-shadow:none;width:180px;height:64px;flex-shrink:0}
footer .brand img{width:158px;height:60px}
@media(max-width:767px){
 .header .brand img{width:160px;height:60px}
 .nav-inner{gap:8px}
 footer .brand img{width:144px;height:55px}
}