/* AtlasVoice website demo — TTS-254. Scoped under .avd so it never bleeds
   into the host theme. Brand: teal #184c53, accent #FF7853. */

.avd[data-avd]{--avd-teal:#184c53;--avd-teal-2:#1d6370;--avd-accent:#FF7853;--avd-ink:#1d2327;--avd-muted:#6b7280;--avd-line:#e5e7eb;--avd-bg:#f7f9f9;
  max-width:1040px;margin:0 auto;color:var(--avd-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;box-sizing:border-box;}
.avd[data-avd] *,.avd[data-avd] *::before,.avd[data-avd] *::after{box-sizing:border-box;}

/* Fields */
.avd[data-avd] .avd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.avd[data-avd] .avd-grid2{grid-template-columns:1fr;}}
.avd[data-avd] .avd-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--avd-muted);}
.avd[data-avd] .avd-field span{font-weight:500;}
.avd[data-avd] .avd-field em{font-style:normal;color:var(--avd-ink);font-weight:600;}
.avd[data-avd] .avd-field input[type=text],.avd[data-avd] .avd-field select{
  font:inherit;font-size:13px;color:var(--avd-ink);padding:7px 9px;border:1px solid var(--avd-line);
  border-radius:8px;background:#fff;width:100%;}
.avd[data-avd] .avd-field input[type=color]{width:100%;height:34px;border:1px solid var(--avd-line);border-radius:8px;
  background:#fff;padding:2px;cursor:pointer;}
.avd[data-avd] .avd-field input[type=range]{width:100%;accent-color:var(--avd-teal);}
.avd[data-avd] .avd-field input:focus,.avd[data-avd] .avd-field select:focus{outline:2px solid rgba(24,76,83,.25);border-color:var(--avd-teal);}
.avd[data-avd] .avd-field[hidden]{display:none;}

.avd[data-avd] .avd-note{font-size:12px;color:var(--avd-muted);margin:10px 0 0;line-height:1.5;}

/* ElevenLabs voice controls — clean grouped layout (spans the grid). */
.avd[data-avd] .avd-grid2 .avd-el{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;}
.avd[data-avd] .avd-el-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.avd[data-avd] .avd-el-top{grid-template-columns:1fr;}}
.avd[data-avd] .avd-el-f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--avd-muted);}
.avd[data-avd] .avd-el-f span{font-weight:500;}
.avd[data-avd] .avd-el select,.avd[data-avd] .avd-el-search,.avd[data-avd] .avd-el-id{font:inherit;font-size:13px;color:var(--avd-ink);padding:7px 9px;
  border:1px solid var(--avd-line);border-radius:8px;background:#fff;width:100%;}
.avd[data-avd] .avd-el-box{background:var(--avd-bg);border:1px solid var(--avd-line);border-radius:10px;padding:13px 14px;
  display:flex;flex-direction:column;gap:9px;}
.avd[data-avd] .avd-el-title{font-size:12px;font-weight:600;color:var(--avd-teal);text-transform:uppercase;letter-spacing:.02em;}
.avd[data-avd] .avd-el-list{padding:4px;height:auto;}
.avd[data-avd] .avd-el-list option{padding:5px 7px;border-radius:4px;}
.avd[data-avd] .avd-el-list option:checked{background:var(--avd-teal);color:#fff;}
.avd[data-avd] .avd-el-paste{border-top:1px solid var(--avd-line);padding-top:11px;display:flex;flex-direction:column;gap:7px;}
.avd[data-avd] .avd-el-paste-hint{font-size:11px;color:var(--avd-muted);}
.avd[data-avd] .avd-el-paste-row{display:flex;gap:6px;}
.avd[data-avd] .avd-el-paste-row .avd-el-id{flex:1;}
.avd[data-avd] .avd-el-use{font:inherit;font-size:13px;font-weight:500;padding:7px 16px;border:1px solid var(--avd-teal);
  background:var(--avd-teal);color:#fff;border-radius:8px;cursor:pointer;white-space:nowrap;}
.avd[data-avd] .avd-el-use:hover{filter:brightness(1.08);}
.avd[data-avd] .avd-el-use:disabled{opacity:.6;cursor:default;}
.avd[data-avd] .avd-el-err{font-size:12px;color:#b91c1c;}
.avd[data-avd] .avd-el-err[hidden]{display:none;}
.avd[data-avd] .avd-el select:focus,.avd[data-avd] .avd-el-search:focus,.avd[data-avd] .avd-el-id:focus{outline:2px solid rgba(24,76,83,.25);border-color:var(--avd-teal);}

.avd[data-avd] .avd-text{width:100%;font:inherit;font-size:14px;color:var(--avd-ink);padding:10px 12px;
  border:1px solid var(--avd-line);border-radius:10px;resize:vertical;background:#fff;}
.avd[data-avd] .avd-text:focus{outline:2px solid rgba(24,76,83,.25);border-color:var(--avd-teal);}

/* The customizable Listen button */
.avd[data-avd] .avd-listen{--bg:#184c53;--fg:#fff;--r:10px;--scale:1;
  display:flex;align-items:center;gap:10px;justify-content:center;
  width:calc(var(--scale) * 100%);font:inherit;font-size:16px;font-weight:600;
  background:var(--bg);color:var(--fg);border:0;border-radius:var(--r);
  padding:14px 20px;cursor:pointer;transition:filter .12s,transform .06s;}
.avd[data-avd] .avd-listen:hover{filter:brightness(1.08);}
.avd[data-avd] .avd-listen:active{transform:scale(.99);}
.avd[data-avd] .avd-listen__icon{font-size:14px;line-height:1;}
.avd[data-avd] .avd-listen__bars{display:none;align-items:flex-end;gap:3px;height:16px;}
.avd[data-avd] .avd-listen__bars i{width:3px;height:6px;background:currentColor;border-radius:2px;opacity:.85;
  animation:avd-eq .9s ease-in-out infinite;}
.avd[data-avd] .avd-listen__bars i:nth-child(2){animation-delay:.15s;}
.avd[data-avd] .avd-listen__bars i:nth-child(3){animation-delay:.3s;}
.avd[data-avd] .avd-listen__bars i:nth-child(4){animation-delay:.45s;}
.avd[data-avd] .avd-listen.is-playing .avd-listen__bars{display:flex;}
.avd[data-avd] .avd-listen.is-playing .avd-listen__icon{display:none;}
@keyframes avd-eq{0%,100%{height:5px;}50%{height:16px;}}

.avd[data-avd] .avd-player-mount{display:flex;justify-content:center;}
.avd[data-avd] .avd-real-btn{width:100%;}
.avd[data-avd] .avd-real-btn .avd-btn-icon{display:inline-flex;align-items:center;}
.avd[data-avd] .avd-real-btn .tts__listent_content{transition:all .3s ease;}
.avd[data-avd] .avd-plyr-wrap{width:100%;overflow:hidden;--plyr-color-main:var(--avd-teal);}
.avd[data-avd] .avd-plyr-wrap .plyr{border-radius:inherit;}
/* Default Pro (player 2): the real Pro player is content-width (tts__mx-auto)
   when idle and only stretches on play. Force it full width from the start so
   it matches the other players. The React root is an unclassed <div> between
   .tts__listent_content (a <div> here; player 1's is a <button>) and
   .tts__player, so stretch that wrapper too. */
.avd[data-avd] .tts__listent_content{width:100%;}
.avd[data-avd] div.tts__listent_content > div{flex:1 1 auto;width:100%;}
.avd[data-avd] .tts__player{width:100%;box-sizing:border-box;}

.avd[data-avd] .avd-status{font-size:12px;color:var(--avd-muted);margin-top:12px;min-height:16px;text-align:center;}

/* What gets read */
.avd[data-avd] .avd-read{background:#fff;border:1px solid var(--avd-line);border-radius:14px;overflow:hidden;}
.avd[data-avd] .avd-read__head{font-size:12px;font-weight:600;color:var(--avd-teal);padding:10px 14px;
  background:var(--avd-bg);border-bottom:1px solid var(--avd-line);}
.avd[data-avd] .avd-read__body{padding:14px;font-size:13px;color:#374151;line-height:1.6;max-height:160px;overflow:auto;}
.avd[data-avd] .avd-read__body .avd-hl{background:#fff3c4;border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px #fde68a;}

.avd[data-avd] .avd__foot{text-align:center;font-size:13px;color:var(--avd-muted);margin:22px 0 0;}
.avd[data-avd] .avd__foot a{color:var(--avd-accent);font-weight:600;text-decoration:none;}
.avd[data-avd] .avd__foot code{background:var(--avd-bg);border:1px solid var(--avd-line);border-radius:5px;padding:1px 6px;font-size:12px;}

/* Plyr spacing, re-stated for pages with a reset such as
   ".landing *{margin:0;padding:0}" placed after Plyr's CSS. Plyr's single-class
   rules (.plyr__control, .plyr__tooltip…) tie with such a reset and lose on
   order. Tag + class (0,1,1) is just enough to beat the reset while staying
   below Plyr's own compound rules (settings-menu buttons etc.); :where() scopes
   to the demo without adding weight. Values mirror assets/vendor/plyr.min.css. */
:where(.avd[data-avd]) button.plyr__control,:where(.avd[data-avd]) a.plyr__control{padding:calc(var(--plyr-control-spacing,10px) * .7);}
:where(.avd[data-avd]) div.plyr__progress{margin-right:var(--plyr-range-thumb-height,13px);}
:where(.avd[data-avd]) progress.plyr__progress__buffer{margin-top:calc((var(--plyr-range-track-height,5px)/2) * -1);
  margin-left:calc(var(--plyr-range-thumb-height,13px) * -.5);margin-right:calc(var(--plyr-range-thumb-height,13px) * -.5);padding:0;}
:where(.avd[data-avd]) span.plyr__tooltip{margin-bottom:calc(calc(var(--plyr-control-spacing,10px)/2) * 2);
  padding:calc(var(--plyr-control-spacing,10px)/2) calc(calc(var(--plyr-control-spacing,10px)/2) * 1.5);}
:where(.avd[data-avd]) div.plyr__menu__container{margin-bottom:10px;}

/* 4 · Hear your own text — opt-in section ([atlasvoice_demo try_your_text="yes"]). */
.avd[data-avd] .avd-try__badge{font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;background:#e7f3ec;color:#1f7a44;white-space:nowrap;}
.avd[data-avd] .avd-try__badge.is-empty{background:#fff1ec;color:#c2410c;}
.avd[data-avd] .avd-try__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:stretch;}
.avd[data-avd] .avd-try__textlabel{display:block;font-size:12px;font-weight:500;color:var(--avd-muted);margin-bottom:5px;}
.avd[data-avd] .avd-try__text{width:100%;font:inherit;font-size:14px;line-height:1.55;color:var(--avd-ink);padding:10px 12px;
  border:1px solid var(--avd-line);border-radius:10px;background:#fff;resize:vertical;min-height:130px;}
.avd[data-avd] .avd-try__text:focus{outline:2px solid rgba(24,76,83,.25);border-color:var(--avd-teal);}
.avd[data-avd] .avd-try__meta{display:flex;justify-content:space-between;gap:10px;margin:6px 0 12px;font-size:11.5px;color:var(--avd-muted);}
.avd[data-avd] .avd-try__count{font-variant-numeric:tabular-nums;white-space:nowrap;}
.avd[data-avd] .avd-try__count.is-near{color:#9a5b00;font-weight:600;}
.avd[data-avd] .avd-try__count.is-full{color:#c2410c;font-weight:600;}
.avd[data-avd] .avd-try__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.avd[data-avd] .avd-try__pickers{margin-bottom:14px;}
.avd[data-avd] .avd-try__go{width:100%;display:inline-flex;justify-content:center;align-items:center;font:inherit;font-size:14.5px;font-weight:600;
  padding:12px 16px;border:0;border-radius:10px;background:var(--avd-accent);color:#fff;cursor:pointer;transition:filter .12s,opacity .12s;}
.avd[data-avd] .avd-try__go:hover{filter:brightness(1.06);}
.avd[data-avd] .avd-try__go:disabled{opacity:.5;cursor:not-allowed;filter:none;}
.avd[data-avd] .avd-try__result{display:flex;border:1px dashed #cfd8d9;border-radius:12px;background:var(--avd-bg);padding:18px;min-height:260px;}
.avd[data-avd] .avd-try__result.is-ready{border-style:solid;border-color:#cfe5d8;background:#f6fbf8;}
.avd[data-avd] .avd-try__result.is-limit,.avd[data-avd] .avd-try__result.is-error{border-style:solid;border-color:#ffd6c7;background:#fff8f5;}
.avd[data-avd] .avd-try__idle,.avd[data-avd] .avd-try__busy,.avd[data-avd] .avd-try__limit{margin:auto;text-align:center;max-width:340px;}
.avd[data-avd] .avd-try__ready{width:100%;}
.avd[data-avd] .avd-try__idle-title,.avd[data-avd] .avd-try__ready-title{margin:10px 0 6px;font-size:15px;font-weight:600;color:var(--avd-ink);}
.avd[data-avd] .avd-try__ready-title{margin-top:0;display:flex;align-items:center;gap:8px;}
.avd[data-avd] .avd-try__tick{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#1f7a44;color:#fff;font-size:12px;}
.avd[data-avd] .avd-try__hint{margin:0;font-size:12.5px;color:var(--avd-muted);}
.avd[data-avd] .avd-try__steps{margin:10px 0 0;padding:0;list-style:none;counter-reset:avdstep;text-align:left;display:inline-block;}
.avd[data-avd] .avd-try__steps li{counter-increment:avdstep;font-size:12.5px;color:#4b5563;margin:5px 0;display:flex;gap:8px;align-items:center;}
.avd[data-avd] .avd-try__steps li::before{content:counter(avdstep);display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:#e3eeee;color:var(--avd-teal);font-size:11px;font-weight:700;flex-shrink:0;}
.avd[data-avd] .avd-try__wave{display:inline-flex;align-items:center;gap:4px;height:34px;}
.avd[data-avd] .avd-try__wave i{display:block;width:5px;border-radius:3px;background:#b9d3d6;height:10px;}
.avd[data-avd] .avd-try__wave i:nth-child(2),.avd[data-avd] .avd-try__wave i:nth-child(6){height:18px;}
.avd[data-avd] .avd-try__wave i:nth-child(3),.avd[data-avd] .avd-try__wave i:nth-child(5){height:26px;}
.avd[data-avd] .avd-try__wave i:nth-child(4){height:32px;}
.avd[data-avd] .avd-try__wave.is-live i{background:var(--avd-teal);animation:avd-try-wave 1s ease-in-out infinite;}
.avd[data-avd] .avd-try__wave.is-live i:nth-child(2n){animation-delay:.15s;}
.avd[data-avd] .avd-try__wave.is-live i:nth-child(3n){animation-delay:.3s;}
@keyframes avd-try-wave{0%,100%{transform:scaleY(.45);}50%{transform:scaleY(1);}}
.avd[data-avd] .avd-try__bar{height:6px;border-radius:6px;background:#dfe9ea;overflow:hidden;margin:12px 0 8px;}
.avd[data-avd] .avd-try__bar span{display:block;height:100%;width:40%;border-radius:6px;background:var(--avd-teal);animation:avd-try-bar 1.4s ease-in-out infinite;}
@keyframes avd-try-bar{0%{transform:translateX(-100%);}100%{transform:translateX(250%);}}
@media (prefers-reduced-motion:reduce){.avd[data-avd] .avd-try__wave.is-live i,.avd[data-avd] .avd-try__bar span{animation:none;}}
.avd[data-avd] .avd-try__audio{width:100%;margin:12px 0 10px;}
.avd[data-avd] .avd-try__dl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.avd[data-avd] a.avd-try__dl{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;
  background:var(--avd-teal);color:#fff;text-decoration:none;}
.avd[data-avd] a.avd-try__dl:hover{background:var(--avd-teal-2);color:#fff;}
.avd[data-avd] a.avd-try__dl::before{content:"\2193";font-weight:700;}
.avd[data-avd] .avd-try__preview-note{margin:10px 0 0;font-size:11.5px;color:#9a5b00;background:#fff6e6;border-radius:6px;padding:5px 9px;}
.avd[data-avd] .avd-try__cta{margin-top:14px;padding-top:14px;border-top:1px solid #dcebe2;}
.avd[data-avd] .avd-try__cta p{margin:0 0 10px;font-size:13px;color:#374151;}
.avd[data-avd] .avd-try__cta-row{display:flex;gap:8px;flex-wrap:wrap;}
.avd[data-avd] .avd-try__limit .avd-try__cta-row{justify-content:center;margin-top:14px;}
.avd[data-avd] a.avd-try__btn{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;text-decoration:none;
  border:1px solid var(--avd-teal);color:var(--avd-teal);background:#fff;}
.avd[data-avd] a.avd-try__btn:hover{background:var(--avd-teal);color:#fff;}
.avd[data-avd] a.avd-try__btn--primary{background:var(--avd-teal);color:#fff;}
.avd[data-avd] a.avd-try__btn--primary:hover{background:var(--avd-teal-2);border-color:var(--avd-teal-2);}
.avd[data-avd] button.avd-try__btn{display:inline-flex;align-items:center;font:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--avd-teal);color:var(--avd-teal);background:#fff;}
.avd[data-avd] .avd-try__btn--accent{background:var(--avd-accent)!important;border-color:var(--avd-accent)!important;color:#fff!important;}
.avd[data-avd] .avd-try__btn--accent:hover{filter:brightness(1.06);}

/* Optional free-account pop-up (download / daily limit). */
html.avd-try-modal-open{overflow:hidden;}
.avd[data-avd] .avd-try-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;}
.avd[data-avd] .avd-try-modal[hidden]{display:none;}
.avd[data-avd] .avd-try-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);animation:avd-fade .15s ease-out;}
.avd[data-avd] .avd-try-modal__dialog{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;
  border-radius:16px;padding:26px 26px 20px;box-shadow:0 24px 60px rgba(15,23,42,.3);animation:avd-pop .18s ease-out;text-align:left;}
@keyframes avd-fade{from{opacity:0;}to{opacity:1;}}
@keyframes avd-pop{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.avd[data-avd] .avd-try-modal__backdrop,.avd[data-avd] .avd-try-modal__dialog{animation:none;}}
.avd[data-avd] .avd-try-modal__x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;
  font-size:22px;line-height:1;color:var(--avd-muted);cursor:pointer;padding:0;}
.avd[data-avd] .avd-try-modal__x:hover{background:var(--avd-bg);color:var(--avd-ink);}
.avd[data-avd] .avd-try-modal__pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--avd-teal);background:#e3eeee;padding:3px 9px;border-radius:20px;}
.avd[data-avd] .avd-try-modal__title{margin:10px 0 6px;font-size:20px;line-height:1.25;font-weight:700;color:var(--avd-ink);}
.avd[data-avd] .avd-try-modal__lede{margin:0 0 12px;font-size:14px;color:#4b5563;line-height:1.5;}
.avd[data-avd] .avd-try-modal__perks{list-style:none;margin:0 0 16px;padding:0;}
.avd[data-avd] .avd-try-modal__perks li{position:relative;padding-left:24px;margin:7px 0;font-size:13.5px;color:#374151;}
.avd[data-avd] .avd-try-modal__perks li::before{content:"\2713";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;
  background:#1f7a44;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.avd[data-avd] .avd-try-modal__label{display:block;font-size:12px;font-weight:600;color:var(--avd-ink);margin-bottom:5px;}
.avd[data-avd] .avd-try-modal__email{width:100%;font:inherit;font-size:15px;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--avd-ink);}
.avd[data-avd] .avd-try-modal__email:focus{outline:2px solid rgba(24,76,83,.25);border-color:var(--avd-teal);}
.avd[data-avd] .avd-try-modal__consent{display:flex;align-items:flex-start;gap:8px;margin:12px 0 4px;font-size:12.5px;color:#4b5563;cursor:pointer;line-height:1.45;}
.avd[data-avd] .avd-try-modal__consent input{margin:2px 0 0;accent-color:var(--avd-teal);flex-shrink:0;}
.avd[data-avd] .avd-try-modal__err{margin:8px 0 0;font-size:12.5px;color:#b42318;}
.avd[data-avd] .avd-try-modal__go{width:100%;margin-top:14px;font:inherit;font-size:15px;font-weight:600;padding:12px 16px;border:0;border-radius:10px;
  background:var(--avd-accent);color:#fff;cursor:pointer;}
.avd[data-avd] .avd-try-modal__go:hover{filter:brightness(1.06);}
.avd[data-avd] .avd-try-modal__go:disabled{opacity:.6;cursor:wait;}
.avd[data-avd] .avd-try-modal__skip{display:block;width:100%;margin-top:8px;font:inherit;font-size:13.5px;font-weight:500;padding:9px;border:0;
  background:transparent;color:var(--avd-teal);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.avd[data-avd] .avd-try-modal__fine{margin:6px 0 0;font-size:11.5px;color:var(--avd-muted);text-align:center;}
.avd[data-avd] .avd-try-modal__fine a{color:inherit;}
.avd[data-avd] .avd-try-modal__mail{width:52px;height:52px;border-radius:50%;background:#e7f3ec;color:#1f7a44;font-size:26px;display:flex;align-items:center;justify-content:center;}
.avd[data-avd] .avd-try-modal__preview{display:block;margin-top:10px;font-size:11.5px;color:#9a5b00;background:#fff6e6;border-radius:6px;padding:5px 9px;}



/* ── Layout (2026-10 redesign): hero → grouped player list + one stage ── */
.avd[data-avd]{--avd-teal-soft:#e8f1f2;--avd-accent-soft:#fff1ec;--avd-free:#1f7a44;--avd-free-soft:#e7f3ec;}
/* Some themes capitalise every button word; the demo's copy is sentence case. */
.avd[data-avd] button,.avd[data-avd] a{text-transform:none;letter-spacing:normal;}

.avd[data-avd] .avd-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.avd[data-avd] .avd-hero__eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--avd-accent);}
.avd[data-avd] .avd-hero__title{margin:4px 0;font-size:26px;line-height:1.2;letter-spacing:-.01em;font-weight:700;color:var(--avd-ink);}
.avd[data-avd] .avd-hero__lede{margin:0;color:var(--avd-muted);max-width:56ch;font-size:15px;}
.avd[data-avd] a.avd__cta{display:inline-flex;align-items:center;gap:6px;background:var(--avd-accent);color:#fff;font-size:14px;font-weight:600;
  padding:10px 16px;border-radius:10px;text-decoration:none;white-space:nowrap;transition:filter .12s;}
.avd[data-avd] a.avd__cta:hover{filter:brightness(1.06);color:#fff;}

.avd[data-avd] .avd-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start;}

/* Player list */
.avd[data-avd] .avd-rail{display:flex;flex-direction:column;gap:14px;}
.avd[data-avd] .avd-group__title{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--avd-muted);}
.avd[data-avd] .avd-pl{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--avd-ink);padding:10px 12px;
  border:1px solid var(--avd-line);border-radius:12px;background:#fff;cursor:pointer;margin-bottom:6px;transition:border-color .12s,box-shadow .12s,background .12s;}
.avd[data-avd] .avd-pl:hover{border-color:#b9cdd0;}
.avd[data-avd] .avd-pl:focus-visible{outline:2px solid rgba(24,76,83,.35);outline-offset:2px;}
.avd[data-avd] .avd-pl.is-on{border-color:var(--avd-teal);box-shadow:0 0 0 3px rgba(24,76,83,.12);background:#fbfdfd;}
.avd[data-avd] .avd-pl__ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--avd-teal-soft);color:var(--avd-teal);}
.avd[data-avd] .avd-pl.is-on .avd-pl__ic{background:var(--avd-teal);color:#fff;}
.avd[data-avd] .avd-pl__tx{flex:1;min-width:0;}
.avd[data-avd] .avd-pl__name{display:block;font-weight:600;font-size:14px;line-height:1.25;}
.avd[data-avd] .avd-pl__desc{display:block;font-size:12px;color:var(--avd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.avd[data-avd] .avd-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.4;padding:2px 7px;border-radius:20px;flex-shrink:0;vertical-align:middle;}
.avd[data-avd] .avd-tag--free{background:var(--avd-free-soft);color:var(--avd-free);}
.avd[data-avd] .avd-tag--pro{background:var(--avd-accent-soft);color:#c2410c;}
.avd[data-avd] .avd-tag--beta{background:#eef0ff;color:#4f46e5;}

/* Stage (no overflow:hidden — Plyr's settings menu must not be clipped) */
.avd[data-avd] .avd-stage{border:1px solid var(--avd-line);border-radius:16px;background:#fff;}
.avd[data-avd] .avd-stage__head{padding:18px 20px 14px;border-bottom:1px solid var(--avd-line);border-radius:16px 16px 0 0;background:linear-gradient(180deg,#fbfdfd,#fff);}
.avd[data-avd] .avd-stage__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.avd[data-avd] .avd-stage__name{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--avd-ink);}
.avd[data-avd] .avd-stage__tags{display:inline-flex;gap:6px;}
.avd[data-avd] .avd-stage__note{margin:6px 0 0;font-size:13px;color:var(--avd-muted);}
.avd[data-avd] .avd-stage__note[hidden]{display:none;}
.avd[data-avd] .avd-stage__note a{color:var(--avd-teal);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}

.avd[data-avd] .avd-tabs{display:flex;padding:0 20px;border-bottom:1px solid var(--avd-line);}
.avd[data-avd] .avd-tab{font:inherit;font-size:14px;font-weight:600;color:var(--avd-muted);background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 2px;margin:0 18px -1px 0;cursor:pointer;}
.avd[data-avd] .avd-tab:hover{color:var(--avd-ink);}
.avd[data-avd] .avd-tab.is-on{color:var(--avd-ink);border-bottom-color:var(--avd-accent);}
.avd[data-avd] .avd-tab[hidden]{display:none;}
.avd[data-avd] .avd-pane{padding:20px;}
.avd[data-avd] .avd-pane[hidden]{display:none;}
.avd[data-avd] .avd-pane__fields{margin-bottom:16px;}
.avd[data-avd] .avd-pane__fields:empty{display:none;}
.avd[data-avd] .avd-pane .avd-read{margin-top:14px;}
.avd[data-avd] .avd-pane .avd-read[hidden]{display:none;}
.avd[data-avd] .avd-pane .avd-note:empty{display:none;}

/* "Your own text" */
.avd[data-avd] .avd-own[hidden]{display:none;}
.avd[data-avd] .avd-own__lead{margin:0 0 12px;font-size:13.5px;color:#4b5563;}
.avd[data-avd] .avd-own__field{margin-bottom:14px;}
.avd[data-avd] .avd-own--info{text-align:center;padding:18px 8px;}
.avd[data-avd] .avd-own--info .avd-own__lead{max-width:46ch;margin:0 auto 14px;}
.avd[data-avd] .avd-own__switch{font:inherit;font-size:14px;font-weight:600;padding:10px 16px;border-radius:10px;border:0;background:var(--avd-teal);color:#fff;cursor:pointer;}
.avd[data-avd] .avd-own__switch:hover{background:var(--avd-teal-2);}
.avd[data-avd] .avd-stage .avd-try__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.avd[data-avd] .avd-stage .avd-try__top .avd-own__lead{margin:0;}
.avd[data-avd] .avd-stage .avd-try__grid{grid-template-columns:1fr;gap:14px;margin-top:10px;}
.avd[data-avd] .avd-stage .avd-try__pickers{margin-bottom:12px;}

/* One closing call to action */
.avd[data-avd] .avd-stage__end{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;
  border-top:1px solid var(--avd-line);border-radius:0 0 16px 16px;background:var(--avd-bg);}
.avd[data-avd] .avd-stage__end p{margin:0;font-size:14px;color:var(--avd-ink);}
.avd[data-avd] .avd-stage__btns{display:flex;gap:8px;flex-wrap:wrap;}
.avd[data-avd] a.avd-btn{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:10px;text-decoration:none;
  border:1px solid var(--avd-teal);color:var(--avd-teal);background:#fff;}
.avd[data-avd] a.avd-btn:hover{background:var(--avd-teal);color:#fff;}
.avd[data-avd] a.avd-btn--primary{background:var(--avd-teal);color:#fff;}
.avd[data-avd] a.avd-btn--primary:hover{background:var(--avd-teal-2);border-color:var(--avd-teal-2);color:#fff;}

/* No empty strip under the player when there is no status message. */
.avd[data-avd] .avd-status:empty{display:none;}

/* Tablets and phones: one column; the player list becomes a swipeable row. */
@media (max-width:760px){
  .avd[data-avd] .avd-layout{grid-template-columns:1fr;gap:14px;}
  .avd[data-avd] .avd-hero__title{font-size:22px;}
  .avd[data-avd] a.avd__cta{width:100%;justify-content:center;}
  .avd[data-avd] .avd-rail{flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin:0 -14px;padding:2px 14px 6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
  .avd[data-avd] .avd-rail::-webkit-scrollbar{display:none;}
  .avd[data-avd] .avd-group{display:contents;}
  .avd[data-avd] .avd-group__title{display:none;}
  .avd[data-avd] .avd-pl{width:auto;flex-shrink:0;margin:0;padding:7px 12px 7px 8px;gap:8px;border-radius:999px;scroll-snap-align:start;}
  .avd[data-avd] .avd-pl__ic{width:26px;height:26px;border-radius:50%;}
  .avd[data-avd] .avd-pl__ic svg{width:14px;height:14px;}
  .avd[data-avd] .avd-pl__desc{display:none;}
  .avd[data-avd] .avd-pl__name{white-space:nowrap;font-size:13.5px;}
  .avd[data-avd] .avd-stage__head,.avd[data-avd] .avd-pane,.avd[data-avd] .avd-stage__end{padding-left:14px;padding-right:14px;}
  .avd[data-avd] .avd-tabs{padding:0 14px;}
  .avd[data-avd] .avd-try__result{min-height:180px;}
}

/* Narrow players: drop the volume slider (the mute button stays) so the
   progress bar keeps a usable width. Phones use their own volume keys. */
@media (max-width:520px){
  .avd[data-avd] .plyr__volume input[type=range]{display:none;}
  .avd[data-avd] .plyr__volume{min-width:0;width:auto;max-width:none;}
  .avd[data-avd] .avd-stage__end{flex-direction:column;align-items:stretch;}
  .avd[data-avd] .avd-stage__btns a.avd-btn{flex:1;justify-content:center;}
}
.avd[data-avd] .avd-stage__sep{color:#b6c0c8;margin:0 2px;}
/* Themes style every <button> (pill radius, shadows, min-heights); the tabs
   must stay flat with a straight underline. */
.avd[data-avd] .avd-tabs .avd-tab{border-radius:0;box-shadow:none;min-height:0;line-height:1.4;text-decoration:none;}
.avd[data-avd] .avd-tabs[hidden]{display:none;}
/* Shortcode options: one player (players="4") → no list, full-width stage;
   show_groups="no" → no group headings. */
.avd[data-avd].avd--single .avd-layout{grid-template-columns:1fr;}
.avd[data-avd].avd--single .avd-rail{display:none;}
.avd[data-avd].avd--no-groups .avd-group__title{display:none;}
.avd[data-avd] .avd-own__switch[hidden]{display:none;}