/* Unlayered Pro: the home page's Pro section (#pro) and the Pro page (pro/). js/pro.js fills the
   example Agent exchange, the FAQ and the signed-in calls to action. Loaded after styles.css
   (and css/product.css on pro/). */

.pro-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- The example Agent exchange ---------- */
/* A small chat on dark blue: the conversation on top, the asks as suggestions to tap under it */

.pro-ask {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 24px;
  background: rgb(14 22 49 / 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pro-ask__body { display: grid; gap: 14px; min-height: 230px; align-content: start; }

.pro-ask__you {
  justify-self: end;
  max-width: 85%;
  margin: 0;
  padding: 11px 16px;
  border-radius: 18px 18px 6px 18px;
  background: rgb(255 255 255 / 0.1);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

.pro-ask__agent { display: grid; gap: 8px; max-width: 92%; }
.pro-ask__who { margin: 0; font-size: 14px; font-weight: 600; color: rgb(245 245 242 / 0.6); }
.pro-ask__reply { margin: 0; font-size: 16px; line-height: 1.5; color: rgb(245 245 242 / 0.85); }
.pro-ask__changed { margin: 0; font-size: 14px; line-height: 1.5; color: rgb(245 245 242 / 0.55); }

.pro-ask__pick { padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 0.08); }
.pro-ask__label { margin: 0 0 12px; font-size: 14px; color: rgb(245 245 242 / 0.6); }
.pro-ask__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Clearly tappable: filled, a hover lift, and the chosen one in white */
.pro-ask__tab {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.pro-ask__tab:hover { background: rgb(255 255 255 / 0.16); transform: translateY(-1px); }
.pro-ask__tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pro-ask__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Pro page: a clip fills the card with the asks over its bottom edge, no chat text (js/pro.js
   switches the clip with the ask). A shade along the bottom keeps the asks readable */
.pro-ask--video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  align-content: end;
  min-height: clamp(480px, 60vh, 640px);
  background: #0b1024;
}
.pro-ask__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center; /* the print head, as on the home page's hero */
  transition: opacity 0.3s ease;
}
.pro-ask__video.is-switching { opacity: 0; }
.pro-ask--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 55%, rgb(11 16 36 / 0.85));
}
.pro-ask--video .pro-ask__pick { padding-top: 0; border-top: 0; }
.pro-ask--video .pro-ask__tab:not([aria-pressed="true"]) {
  background: rgb(11 16 36 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pro-ask--video .pro-ask__tab:not([aria-pressed="true"]):hover { background: rgb(40 50 90 / 0.7); }

/* ---------- Price ---------- */

.pro-price { margin: 0; }

/* ---------- Calls to action (one block per visitor state) ---------- */

.pro-cta { margin-top: clamp(24px, 3.6vh, 36px); }
.pro-cta [hidden] { display: none !important; }
.pro-cta__row { display: flex; flex-wrap: wrap; gap: 12px; }
.pro-cta .cta__btn { font-family: inherit; }
.pro-cta__have { margin: 0 0 16px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.pro-cta__note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: rgb(245 245 242 / 0.5); }
.pro-cta__note a { color: var(--ink); border-bottom: 1px solid rgb(245 245 242 / 0.3); }

@media (max-width: 480px) {
  .pro-cta__row { flex-direction: column; }
  .pro-cta__row .cta__btn { justify-content: center; }
}

/* ---------- Home page: the Pro section after the Software panel ---------- */

/* Clear of the floating top bar when a #software link glides here */
.pro-band__card[id] { scroll-margin-top: 96px; }

/* A smaller gap above than between sections: it follows the Software card, which matches it */
.pro-band { padding: clamp(56px, 10vh, 120px) var(--gutter) 0; scroll-margin-top: 40px; }

.pro-band__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Same width and padding as the Software card above it, so the two line up */
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 72px);
  border-radius: 32px;
  border: 1px solid rgb(157 180 255 / 0.12);
  background: linear-gradient(200deg, #121d45, #0a0f1f 55%, #0b0b0b);
}

/* One slow glow behind the exchange */
.pro-band__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -5%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(77 125 255 / 0.28), transparent);
  filter: blur(40px);
  animation: drift 22s ease-in-out infinite alternate;
  pointer-events: none;
}

.pro-band__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.pro-band .panel__body { max-width: 44ch; }

/* The home page's demo, scaled up with its wider card (/pro keeps its sizes) */
.pro-band .pro-ask { padding: clamp(18px, 2.4vw, 34px); }
.pro-band .pro-ask__label, .pro-band .pro-ask__who, .pro-band .pro-ask__fine { font-size: clamp(13px, 0.95vw, 15px); }
.pro-band .pro-ask__tab { font-size: clamp(14px, 1vw, 16px); }
.pro-band .pro-ask__you { font-size: clamp(17px, 1.3vw, 20px); }
.pro-band .pro-ask__reply { font-size: clamp(16px, 1.2vw, 19px); }
.pro-band .pro-ask__changes li { font-size: clamp(14px, 1.05vw, 16px); }

/* Free | Unlayered Pro | Unlayered Enterprise, each ending in its own button, lined up along the bottom */
.pro-band__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(48px, 7vw, 88px);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.pro-plan { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 36px) clamp(0px, 3vw, 40px) 0 0; }
.pro-plan + .pro-plan { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid rgb(255 255 255 / 0.1); }
.pro-plan h3 { align-self: stretch; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 14px; font-size: clamp(22px, 1.7vw, 27px); font-weight: 500; letter-spacing: -0.02em; }
.pro-plan h3 span { font-size: clamp(15px, 1.05vw, 17px); font-weight: 400; color: rgb(245 245 242 / 0.6); }
.pro-plan--pro h3 { color: var(--ink); }
.pro-plan--pro h3 span { color: var(--accent-soft, #9db4ff); }
.pro-plan ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pro-plan li { position: relative; padding-left: 22px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: rgb(245 245 242 / 0.72); }
.pro-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgb(245 245 242 / 0.45);
}
.pro-plan--pro li::before { border: 0; background: var(--accent); }
.pro-plan--enterprise li::before { border-color: var(--accent-soft, #9db4ff); }
/* At least 28px under the list, and pushed to the bottom so the three buttons line up */
.pro-plan ul:has(+ .pro-plan__btn) { margin-bottom: 28px; }
.pro-plan__btn { margin-top: auto; }
.pro-band__foot { margin: clamp(24px, 3vw, 32px) 0 0; font-size: 14px; color: rgb(245 245 242 / 0.5); }

@media (max-width: 960px) {
  .pro-band__top { grid-template-columns: 1fr; }
}

/* Three plans need room: stacked below 900px */
@media (max-width: 900px) {
  .pro-band__plans { grid-template-columns: 1fr; }
  .pro-plan { padding-right: 0; }
  .pro-plan + .pro-plan { padding-left: 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.1); margin-top: 28px; }
}

@media (max-width: 640px) {
  .pro-band__card { border-radius: 24px; }
}

/* The Software panel's line pointing here */
.panel__pro { margin: 20px 0 0; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: rgb(245 245 242 / 0.6); }
.panel__pro a { color: var(--ink); font-weight: 600; border-bottom: 1px solid rgb(157 180 255 / 0.5); }
.panel__pro a:hover { border-color: var(--ink); }

/* ---------- Pro page ---------- */

.pro-hero2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pro-hero2 .pg-lead { font-size: clamp(17px, 1.3vw, 19px); }
.pro-hero2 .pg-lead + .pro-price { margin-top: 12px; }

/* Free vs Pro */
.pro-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.45; }
.pro-table th, .pro-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.pro-table thead th { vertical-align: bottom; padding-top: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; border-bottom-color: rgb(255 255 255 / 0.16); }
.pro-table thead th span { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.pro-table tbody th { width: 30%; font-weight: 500; color: var(--ink); }
.pro-table td { color: var(--muted); }
.pro-table tbody th, .pro-table td { color: rgb(245 245 242 / 0.85); }
.pro-table tbody th { font-weight: 500; }
/* Where Pro gives you more: the two cells read as one shaded block, no outline */
.pro-table td.is-more { background: rgb(255 255 255 / 0.06); }
.pro-table td.is-more--top { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
.pro-table td.is-more--bottom { border-radius: 0 0 14px 14px; }
.pro-legend { margin: -12px 0 28px; font-size: 14px; color: rgb(245 245 242 / 0.6); }
.pro-band { background: linear-gradient(to bottom, var(--bg), #0b1226 18%, #0b1226 82%, var(--bg)); }
.pro-table tfoot .cta__btn { color: var(--ink); }
.pro-table .cta__btn { font-family: inherit; }

@media (max-width: 680px) {
  .pro-table, .pro-table tbody, .pro-table tfoot { display: block; }
  .pro-table thead { display: none; }
  .pro-table td.is-more, .pro-table td.is-more--top, .pro-table td.is-more--bottom { border-radius: 10px; padding: 8px 10px; }
  .pro-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hair); padding: 14px 0; }
  .pro-table th, .pro-table td { border: 0; padding: 4px 12px 4px 0; font-size: 15px; }
  .pro-table tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 8px; }
  .pro-table td::before { content: attr(data-plan); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--faint); }
  .pro-table tfoot tr { border: 0; }
  .pro-table tfoot tr { grid-template-columns: 1fr; gap: 10px; }
  .pro-table tfoot td { padding: 0; }
  .pro-table tfoot td:first-child { display: none; }
  .pro-table tfoot td::before { content: none; }
}



/* FAQ */
.pro-faq { max-width: 860px; border-top: 1px solid var(--hair); }
.pro-faq__item { border-bottom: 1px solid var(--hair); }
.pro-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -0.01em;
}
.pro-faq__item summary::-webkit-details-marker { display: none; }
.pro-faq__item summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; color: var(--muted); transition: transform 0.2s; }
.pro-faq__item[open] summary::after { transform: rotate(45deg); }
.pro-faq__item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.pro-faq__item p { margin: 0; padding: 0 0 24px; max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.pro-faq__item a { color: var(--ink); border-bottom: 1px solid rgb(245 245 242 / 0.3); }

.cta__card .pro-cta { display: flex; flex-direction: column; align-items: center; margin-top: 0; }
.cta__card .pro-cta__row { justify-content: center; }

@media (max-width: 960px) {
  .pro-hero2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pro-band__card::before { animation: none; }
}

.pro-band__foot a { color: var(--ink); border-bottom: 1px solid rgb(245 245 242 / 0.3); margin-left: 4px; }
.pro-band__foot a:hover { border-color: var(--ink); }
.pro-after { margin-top: 20px; }
.pro-band .panel__title { text-wrap: balance; }
.pro-hero2 .pg-title { max-width: none; font-size: clamp(48px, 6vw, 92px); }
.pg-hero:has(.pro-hero2) { padding-top: clamp(130px, 18vh, 190px); }

/* Decorative glows bleed past the right edge; never let them make the page scroll sideways */
main { overflow-x: clip; }

/* Trial: the printing layer lines behind the Pro page's top (js/layer-lines.js) */
.layer-lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }