/* Home-page try panel (#3900). Lingual design-system tokens (static/ds), with
   literal fallbacks matching the light theme the home page uses. */
.try-foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule, #C9BDA8); }
.try-voice, .hero .primary.try-now {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font: inherit;
}
.try-voice {
  border: 0; border-radius: 999px; background: var(--ink, #1A1612); color: var(--paper, #FAF6EE);
  padding: .6rem 1.1rem .6rem .9rem; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: .95rem;
}
.hero .primary.try-now { border: 0; }
.hero .cta-row .secondary {
  color: var(--rubric, #8B1A1A); font-weight: 500; text-decoration: none; font-family: Inter, system-ui, sans-serif;
  align-self: center;
}

.try-panel {
  position: relative; display: flex; flex-direction: column; height: min(46rem, 82vh); min-height: 36rem;
  background: var(--paper, #FAF6EE); border: 1px solid var(--rule, #C9BDA8); border-radius: .9rem;
  box-shadow: 0 16px 44px -18px rgba(26, 22, 18, .35); overflow: hidden;
  font-family: Inter, system-ui, sans-serif; color: var(--ink, #1A1612);
}
.try-strip { background: var(--highlight, #F2E9D5); border-bottom: 1px solid var(--rule, #C9BDA8); padding: .8rem 1rem .6rem; }
.try-strip-row { display: flex; align-items: center; justify-content: space-between; }
.try-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--rubric, #8B1A1A);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.try-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule, #C9BDA8); }
.try-dot.on { background: var(--rubric, #8B1A1A); }
.try-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--ink-muted, #6B5D52); cursor: pointer; padding: 0 .2rem; }
.try-progress { display: flex; gap: 4px; margin-top: .55rem; }
.try-progress i { flex: 1; height: 3px; border-radius: 2px; background: var(--rule, #C9BDA8); }
.try-progress i.done { background: var(--rubric, #8B1A1A); }
.try-progress i.now { background: var(--rubric, #8B1A1A); opacity: .45; }

.try-stage { position: relative; flex: 1; min-height: 0; }
.try-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--paper, #FAF6EE); }

.try-card { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: var(--highlight, #F2E9D5);
  border: 1px solid var(--rule, #C9BDA8); border-radius: .8rem; padding: 1rem; }
.try-mic { display: grid; justify-items: center; gap: .7rem; text-align: center; }
.try-mic p { margin: 0; color: var(--ink-muted, #6B5D52); font-family: "Crimson Pro", Georgia, serif; font-size: 1.02rem; }
.try-mic-big { width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rubric, #8B1A1A); color: var(--paper, #FAF6EE); display: grid; place-items: center; }
.try-mic-big svg { width: 2rem; height: 2rem; }
.try-say { display: flex; align-items: center; gap: .8rem; }
.try-meter { display: flex; gap: 3px; align-items: center; }
.try-meter i { width: 3px; border-radius: 2px; background: var(--rubric, #8B1A1A); height: 6px; animation: try-level 1s ease-in-out infinite; }
.try-meter i:nth-child(2) { animation-delay: .15s; } .try-meter i:nth-child(3) { animation-delay: .3s; }
.try-meter i:nth-child(4) { animation-delay: .45s; } .try-meter i:nth-child(5) { animation-delay: .6s; }
@keyframes try-level { 50% { height: 18px; } }
.try-say-text small { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted, #6B5D52); }
.try-say-text span { font-family: "Crimson Pro", Georgia, serif; font-size: 1.05rem; }
.try-import p, .try-busy p { margin: 0 0 .8rem; font-family: "Crimson Pro", Georgia, serif; font-size: 1.05rem; }
.try-busy h3 { margin: 0 0 .4rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.4rem; }
.try-busy-acts { display: flex; gap: .6rem; flex-wrap: wrap; }
.try-pill { border: 0; border-radius: 999px; background: var(--ink, #1A1612); color: var(--paper, #FAF6EE);
  padding: .55rem 1rem; font: 500 .9rem Inter, system-ui, sans-serif; cursor: pointer; }
.try-pill.light { background: transparent; color: var(--ink, #1A1612); border: 1px solid var(--rule, #C9BDA8); }

/* Coach marks: the dark-theme surface, so the guide never reads as product UI. */
.try-coach { position: absolute; left: 1rem; right: 1rem; max-width: 26rem; margin: 0 auto; z-index: 3;
  background: #14110D; color: #ECE6D8; border-radius: .6rem; padding: .9rem 1rem .75rem;
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, .45); }
.try-coach.try-yield { visibility: hidden; }
.try-coach-step { color: #D9886A; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.try-coach-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.3rem; line-height: 1.15; margin: .15rem 0 .25rem; }
.try-coach-body { font-size: .86rem; line-height: 1.45; color: #B9AE9C; }
.try-coach-acts { display: flex; justify-content: space-between; align-items: center; margin-top: .55rem; }
.try-skip { background: none; border: 0; color: #B9AE9C; font: .8rem Inter, system-ui, sans-serif; cursor: pointer; padding: .2rem 0; }
.try-cta { border: 0; border-radius: 999px; background: #ECE6D8; color: #14110D; font: 600 .82rem Inter, system-ui, sans-serif;
  padding: .4rem .9rem; cursor: pointer; }
.try-cta:disabled { opacity: .45; cursor: default; }
.try-arrow { position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; display: none; }
.try-coach.below .try-arrow { display: block; top: -7px; border-bottom: 8px solid #14110D; }
.try-coach.above .try-arrow { display: block; bottom: -7px; border-top: 8px solid #14110D; }
.try-ring { position: absolute; z-index: 2; border: 2px solid var(--rubric, #8B1A1A); pointer-events: none; }

.try-convert { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  background: var(--highlight, #F2E9D5); border-top: 1px solid var(--rule, #C9BDA8); padding: .7rem 1rem; font-size: .86rem; color: var(--ink-muted, #6B5D52); }
.try-link { background: none; border: 0; color: var(--rubric, #8B1A1A); font: 600 .86rem Inter, system-ui, sans-serif; cursor: pointer; padding: 0; }

/* Signup sheet: the shipped signup fields, Confirm only when both are filled. */
.try-sheet-wrap { position: absolute; inset: 0; z-index: 5; background: rgba(26, 22, 18, .28); display: flex; align-items: flex-end; }
.try-sheet { position: relative; box-sizing: border-box; margin: .5rem; flex: 1; min-width: 0; grid-template-columns: minmax(0, 1fr); background: var(--paper, #FAF6EE); border: 1px solid var(--rule, #C9BDA8);
  border-radius: .9rem; padding: 1.1rem 1.1rem 1.2rem; display: grid; gap: .7rem; }
.try-sheet .try-close { position: absolute; top: .6rem; right: .7rem; }
.try-sheet h3 { margin: 0; padding-right: 1.5rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.5rem; line-height: 1.1; }
.try-sheet-body { margin: 0; font-family: "Crimson Pro", Georgia, serif; color: var(--ink-muted, #6B5D52); }
.try-carry { display: flex; gap: .4rem; flex-wrap: wrap; }
.try-carry span { background: var(--highlight, #F2E9D5); border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; }
.try-input { box-sizing: border-box; width: 100%; font: 1rem Inter, system-ui, sans-serif; padding: .7rem .8rem; border: 1px solid var(--rule, #C9BDA8);
  border-radius: 4px; background: #fff; color: var(--ink, #1A1612); min-width: 0; }
.try-field-label { font-size: .8rem; color: var(--ink-muted, #6B5D52); }
.try-slug { display: flex; }
.try-slug .try-input { flex: 1; width: auto; text-align: right; border-radius: 4px 0 0 4px; }
.try-suffix { border: 1px solid var(--rule, #C9BDA8); border-left: 0; border-radius: 0 4px 4px 0; padding: .7rem .7rem;
  font-size: .9rem; color: var(--ink-muted, #6B5D52); background: var(--paper, #FAF6EE); }
.try-avail { font-size: .8rem; min-height: 1em; }
.try-avail.ok { color: var(--status-ok, #2E7D32); }
.try-avail.bad { color: var(--rubric, #8B1A1A); }
.try-confirm { border: 0; border-radius: 4px; padding: .9rem; font: 600 1rem Inter, system-ui, sans-serif; cursor: pointer;
  background: var(--rubric, #8B1A1A); color: var(--paper, #FAF6EE); }
.try-confirm:disabled { background: var(--rule, #C9BDA8); cursor: default; }
.try-msg { font-size: .85rem; color: var(--ink, #1A1612); }
.try-msg a, .try-fine a { color: var(--rubric, #8B1A1A); }
.try-fine { font-size: .78rem; color: var(--ink-muted, #6B5D52); }

/* Phones: the panel becomes a full-screen sheet over the page. */
@media (max-width: 779px) {
  html.try-open, html.try-open body { overflow: hidden; }
  html.try-open .try-panel { position: fixed; inset: 0; z-index: 1000; height: auto; min-height: 0; border: 0; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  html.try-open .try-strip { padding-top: calc(.8rem + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .try-meter i { animation: none; height: 10px; } }