/* Try-before-sign-up additions to the homepage. landing.css owns everything else. */
.try-note { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: #bdc8d0; }

.try-stage { min-width: 0; width: 100%; max-width: 600px; justify-self: center; }

/* Chart picker: one quiet segmented control, not three boxes. */
.try-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 16px; padding: 4px; gap: 2px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(6, 14, 24, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.try-tabs button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.68); font: 600 15px Inter, sans-serif; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background 120ms cubic-bezier(0.2, 0, 0.2, 1), color 120ms cubic-bezier(0.2, 0, 0.2, 1); }
.try-tabs button:hover { color: #fff; }
.try-tabs button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: #fff; }
.try-tabs button:focus-visible,
.try-toggle:focus-visible,
.try-edit:focus-visible { outline: 2px solid #45dce8; outline-offset: 2px; }

/* One card: the chart, then a slim control strip. The frame itself is landing.css's .hero-v2-media. */
.try-card-frame { display: flex; flex-direction: column; }
.try-screen { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #000; }
.try-poster,
.try-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.try-poster { object-fit: cover; transition: opacity 240ms ease; }
.try-frame { opacity: 0; background: #000; transition: opacity 240ms ease; }
.try-screen.is-live .try-poster { opacity: 0; }
.try-screen.is-live .try-frame { opacity: 1; }

.try-bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: #070b11; }
.try-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: background 120ms cubic-bezier(0.2, 0, 0.2, 1); }
.try-toggle:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.try-toggle:disabled { opacity: 0.45; cursor: default; }
.try-toggle .try-icon-play { display: none; margin-left: 2px; }
.try-toggle[data-state="paused"] .try-icon-play { display: block; }
.try-toggle[data-state="paused"] .try-icon-pause { display: none; }

.try-scrub { --try-fill: 0%; flex: 1; min-width: 0; height: 20px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.try-scrub:disabled { opacity: 0.45; cursor: default; }
.try-scrub::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #45dce8 0%, #25b8ff var(--try-fill), rgba(255, 255, 255, 0.16) var(--try-fill)); }
.try-scrub::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #45dce8 0%, #25b8ff var(--try-fill), rgba(255, 255, 255, 0.16) var(--try-fill)); }
.try-scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.try-scrub::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.try-time { flex: none; min-width: 34px; font: 500 12.5px Inter, sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55); }
.try-edit { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 120ms cubic-bezier(0.2, 0, 0.2, 1), border-color 120ms cubic-bezier(0.2, 0, 0.2, 1); }
.try-edit:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.45); color: #fff; }

.try-examples { padding-top: 72px; padding-bottom: 24px; }
.try-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.try-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 22px; border: 1px solid #ffffff20; border-radius: 14px; background: #10151e; color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.try-card:hover,
.try-card:focus-visible { border-color: #35cdd9; transform: translateY(-2px); }
.try-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; background: #000; }
.try-card-type { margin-top: 6px; font-size: 14px; color: #b7c3ce; }
.try-card h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.try-card p { margin: 0; font-size: 16px; line-height: 1.6; color: #c4cdd6; }
.try-card-go { margin-top: auto; padding-top: 8px; font-size: 16px; font-weight: 600; color: #5fdbea; }

@media (min-width: 901px) {
  .try-stage { max-width: min(600px, calc(100svh - 230px)); }
}
@media (max-width: 900px) {
  .try-cards { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .try-note { font-size: 17px; }
  .try-tabs { width: 100%; }
  .try-tabs button { flex: 1; min-height: 40px; padding: 0 8px; font-size: 13.5px; }
  .try-bar { gap: 10px; padding: 8px 10px; }
  .try-time { display: none; }
  .try-toggle, .try-edit { height: 40px; }
  .try-toggle { width: 40px; }
  .try-examples { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .try-poster, .try-frame, .try-card, .try-tabs button, .try-toggle, .try-edit { transition: none; }
}