/* Paste your website -> your booking app. The Log in page's look (founder,
   2026-11-06): its background and its card (marketing.css .login-page /
   .login-window) - only what that page doesn't have lives here: the paste
   box, the meter, the steps, and their booking app under the card. */
.try-page [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.try { width: 100%; box-sizing: border-box; display: grid; justify-items: center; align-content: center; gap: 34px; min-height: calc(100vh - 90px); padding: clamp(20px, 4vh, 40px) 24px 70px; }
.try { align-content: start; } /* Up high, like Google's box - not the middle of the window (founder, 2026-11-06). */
.try.is-result { padding-top: 28px; }
.try-card.login-window { width: min(500px, 100%); }
.try-card h1 { text-wrap: balance; }
.try-card .blue-text { color: var(--blue, #0b55ff); }
.try-card .subtext { max-width: 400px; }
.try-site { margin: 10px 0 16px; color: var(--blue, #0b55ff); font-weight: 800; font-size: 15px; text-align: center; word-break: break-all; }

/* The paste box: the address and Start Building side by side, on a phone too
   (founder, 2026-11-05: "Always put it on the right side"). */
.try-card .try-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border: 1px solid #d5dfec; border-radius: 14px; background: #fff; }
.try-card .try-form:focus-within { border-color: var(--blue, #0b55ff); box-shadow: 0 0 0 4px rgba(11, 85, 255, .10); }
.try-card .try-form input { min-width: 0; height: 42px; margin: 0; padding: 0 10px; border: 0; outline: 0; box-shadow: none; background: transparent; font: inherit; font-size: 15px; color: #071735; }
.try-card .try-form input::placeholder { color: #8a97ab; }
.try-card .try-form .btn { min-height: 42px; padding: 0 18px; border-radius: 10px; white-space: nowrap; }
.try-message { margin: 12px 0 0; color: #b42318; font-weight: 600; font-size: 13px; text-align: center; }
.try-message:empty { display: none; }
.try-noweb { margin: 12px 0 0; color: #718096; font-size: 13px; text-align: center; }
.try-scratch { color: var(--blue, #0b55ff); font-weight: 800; white-space: nowrap; }

/* Building: the Windows-style meter (BML blue, left to right) and what it
   found, a line at a time. */
.try-meter { height: 24px; margin: 0 0 18px; padding: 3px; border: 1px solid #b9c3d3; border-radius: 4px; background: #fff; box-shadow: inset 0 1px 2px rgba(15, 30, 60, .12); }
.try-meter > span { display: block; height: 100%; width: 0; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--blue, #0b55ff) 0 11px, transparent 11px 14px); transition: width .45s linear; }
.try-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.try-steps li { display: flex; align-items: center; gap: 10px; color: #4a5a72; font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.try-steps li.is-shown { opacity: 1; transform: none; }
.try-steps li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #c9d6e6; background: transparent; }
.try-steps li.is-done { color: #0f1c33; }
.try-steps li.is-done::before { border-color: var(--blue, #0b55ff); background: var(--blue, #0b55ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Ready: Publish and Edit in the card, their booking app under it. */
.try-actions { display: flex; gap: 10px; }
.try-actions .btn { flex: 1; min-height: 46px; border-radius: 12px; }
.try-again { margin: 16px 0 0; text-align: center; font-size: 13px; }
.try-count { margin-left: 6px; color: #617087; font-weight: 700; }
.try-link { border: 0; background: none; padding: 0; color: var(--blue, #0b55ff); font: inherit; font-weight: 700; cursor: pointer; }

/* The app at full desktop size (1100 wide), scaled to fit by js/try.js -
   never a border or box around it, never its own scroll (AGENTS.md). */
.try-stage { position: relative; width: min(1100px, 100%); }
.try-app { position: absolute; left: 0; top: 0; width: 1100px; height: 820px; border: 0; background: transparent; transform-origin: 0 0; overflow: hidden; }

@media (max-width: 900px) {
  /* Phones and tablets get the app's own phone layout, full width - never
     a shrunk desktop. */
  .try-app { position: static; width: 100%; transform: none !important; }
}
@media (max-width: 640px) {
  /* On a phone the card sits a little under the header, not in the middle
     (founder, 2026-11-08: "/start-building on mobile needs to be moved up a
     bit") - and the keyboard doesn't cover the box when it opens. */
  .try { align-content: start; min-height: calc(100vh - 80px); gap: 22px; padding: clamp(20px, 7vh, 64px) 14px 48px; }
  .try.is-result { align-content: start; padding-top: 24px; }
  .try-card.login-window { padding: 24px 20px 22px; }
  .try-card .try-form .btn { padding: 0 14px; }
}