:root {
  color-scheme: dark;
  --canvas: #0d1018;
  --surface: #151a25;
  --surface-2: #202838;
  --text: #f7f9fc;
  --muted: #b6c0cf;
  --border: rgba(112, 221, 240, .18);
  --blue: #46d9ed;
  --blue-soft: rgba(70, 217, 237, .12);
  --green: #7ce6b2;
  --green-soft: rgba(124, 230, 178, .12);
  --orange: #ffd63d;
  --orange-soft: rgba(255, 214, 61, .11);
  --red: #ff3f9d;
  --red-soft: rgba(255, 63, 157, .12);
  --code: #080b11;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.24);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 82% -10%, rgba(255, 63, 157, .08), transparent 30%),
    radial-gradient(circle at 12% 18%, rgba(70, 217, 237, .06), transparent 26%),
    var(--canvas);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img, video { max-width: 100%; }
button, input, textarea, select { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--canvas);
}
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(14px);
}
.header-inner {
  max-width: var(--max);
  min-height: 68px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 760;
  text-decoration: none;
  letter-spacing: -.02em;
}
.brand-mark {
  width: 52px;
  height: 42px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.site-nav a:hover { background: var(--surface); color: var(--text); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--text); border-radius: 2px; }

.doc-shell { min-height: calc(100vh - 180px); }
.doc-content {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 88px;
}
.doc-content:has(.home-page) { width: 100%; max-width: none; padding-top: 0; }
.doc-content > :first-child { margin-top: 0; }
.doc-content h1, .doc-content h2, .doc-content h3 { line-height: 1.2; letter-spacing: -.025em; scroll-margin-top: 96px; }
.doc-content h1 { margin: 0 0 20px; font-size: clamp(36px, 6vw, 54px); }
.doc-content h2 { margin: 48px 0 16px; font-size: 28px; }
.doc-content h3 { margin: 32px 0 12px; font-size: 20px; }
.doc-content p, .doc-content li { color: var(--muted); }
.doc-content strong { color: var(--text); }
.doc-content hr { margin: 48px 0; border: 0; border-top: 1px solid var(--border); }
.doc-content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--orange-soft);
}
.doc-content blockquote p { margin: 0; color: var(--text); }
.doc-content code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); font: .9em/1.4 Consolas, Menlo, monospace; }
.doc-content pre { overflow-x: auto; padding: 18px; border-radius: var(--radius); background: var(--code); color: #f7f7f7; border: 1px solid rgba(255,255,255,.1); }
.doc-content pre code { padding: 0; background: transparent; color: inherit; }
.doc-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; }
.doc-content th, .doc-content td { min-width: 140px; padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-content th { color: var(--text); background: var(--surface); font-size: 14px; }

.license-contact-grid {
  display: grid;
  gap: 12px;
  margin: 24px 0 40px;
}
.license-contact-card {
  min-height: 72px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.license-contact-card:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--border));
  background: var(--blue-soft);
  transform: translateY(-1px);
}
.license-contact-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 35%, transparent);
  outline-offset: 3px;
}
.license-contact-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
}
.license-contact-icon img { width: 24px; height: 24px; }
.license-contact-copy { min-width: 0; display: grid; line-height: 1.35; }
.license-contact-copy strong { font-size: 15px; }
.license-contact-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.license-contact-arrow { color: var(--blue); font-size: 20px; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .license-contact-card { transition: none; }
}

.home-page { overflow: hidden; }
.hero {
  padding: 84px 32px 72px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at 80% 10%, var(--blue-soft), transparent 34%), var(--canvas);
}
.hero-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--blue); font-size: 13px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.hero h1 { max-width: 650px; margin: 0 0 20px; font-size: clamp(46px, 6vw, 74px); line-height: 1.02; letter-spacing: -.055em; }
.hero p { max-width: 620px; margin: 0 0 30px; color: var(--muted); font-size: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid var(--border); border-radius: 9px; background: var(--canvas); color: var(--text); font-weight: 700; text-decoration: none; }
.button.primary { border-color: var(--blue); background: var(--blue); color: #071014; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.video-card { padding: 10px; border: 1px solid var(--border); border-radius: 18px; background: var(--canvas); box-shadow: var(--shadow); }
.video-card video { display: block; width: 100%; border-radius: 11px; background: #111; aspect-ratio: 16/9; }
.hero-screenshots { position: relative; min-height: 390px; isolation: isolate; }
.hero-shot { position: absolute; overflow: hidden; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: #111720; box-shadow: 0 22px 44px rgba(0,0,0,.34); cursor: zoom-in; appearance: none; text-align: left; }
.hero-shot img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.hero-shot--back { top: 6px; right: 0; width: 82%; transform: translate3d(0,0,0); opacity: .68; filter: saturate(.82) brightness(.84); }
.hero-shot--front { z-index: 1; bottom: 0; left: 0; width: 86%; transform: translate3d(0,0,0); border-color: color-mix(in srgb, var(--blue) 34%, rgba(255,255,255,.2)); }
.hero-shot--front::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.05); border-radius: inherit; }
.hero-screenshots::before { content: ""; position: absolute; z-index: -1; top: 15%; right: 5%; width: 64%; height: 66%; border-radius: 50%; background: rgba(70,217,237,.13); filter: blur(44px); }
.hero-screenshots:hover .hero-shot--back { transform: translate3d(5px, -5px, 0); }
.hero-screenshots:hover .hero-shot--front { transform: translate3d(-3px, -4px, 0); }
.hero-shot--back, .hero-shot--front { transition: transform .35s ease, filter .35s ease, opacity .35s ease, box-shadow .35s ease; }
.hero-shot:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.hero-shot:hover { box-shadow: 0 28px 54px rgba(0,0,0,.42), 0 0 0 1px rgba(70,217,237,.22); }
.hero-shot::before { content: "Click to preview"; position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(6,10,16,.76); color: var(--text); font: 700 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: .04em; opacity: .88; }
.image-lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5,8,13,.88); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.image-lightbox[hidden] { display: none !important; }
.image-lightbox.is-open { opacity: 1; pointer-events: auto; }
.image-lightbox__image { display: block; max-width: min(94vw, 1500px); max-height: 86vh; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: lightbox-zoom .26s cubic-bezier(.2,.8,.2,1); }
.image-lightbox__close { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(13,16,24,.78); color: var(--text); font-size: 28px; line-height: 1; cursor: pointer; }
.image-lightbox__close:hover { background: rgba(255,255,255,.13); }
@keyframes lightbox-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
body.image-lightbox-open { overflow: hidden; }

.trust-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--muted); font-size: 13px; }
.trust-row span::before { content: "✓"; margin-right: 6px; color: var(--green); font-weight: 800; }

.section { padding: 72px 32px; }
.section.soft { background: var(--surface); border-block: 1px solid var(--border); }
.section-inner { max-width: var(--max); margin: 0 auto; }
.section-heading { max-width: 690px; margin-bottom: 32px; }
.section-heading h2 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 46px); }
.section-heading p { margin: 0; color: var(--muted); font-size: 18px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--canvas); }
.card .icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }
.steps { counter-reset: steps; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; padding-top: 54px; }
.step::before { counter-increment: steps; content: counter(steps); position: absolute; top: 0; left: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--text); color: var(--canvas); font-weight: 800; }
.step h3 { margin: 0 0 8px; }
.step p { margin: 0; color: var(--muted); }
.pricing-section { position: relative; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(155deg, var(--surface), var(--canvas));
}
.price-card.featured {
  border-color: color-mix(in srgb, var(--red) 62%, var(--border));
  box-shadow: 0 0 0 1px rgba(255,63,157,.12), 0 18px 44px rgba(0,0,0,.22);
}
.price-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--red-soft);
  color: #ff78b9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.price-duration { color: var(--text); font-size: 18px; font-weight: 760; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 18px 0 6px; }
.price-usd { color: var(--text); font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.price-local { color: var(--blue); font-size: 16px; font-weight: 700; }
.price-meta { min-height: 26px; margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.price-features { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.price-features li { position: relative; padding-left: 24px; color: var(--muted); font-size: 14px; }
.price-features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }
.price-button { width: 100%; margin-top: auto; }
.pricing-note { max-width: 780px; margin: 24px auto 0; color: var(--muted); font-size: 13px; text-align: center; }

.faq-section .section-heading { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.faq-list { max-width: 880px; display: grid; gap: 12px; margin-left: auto; margin-right: auto; }
.faq-item { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--canvas); }
.faq-item summary {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 20px;
  transition: transform .18s ease, background-color .18s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--red-soft); color: #ff78b9; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-answer { padding: 16px 20px 18px; }
.faq-answer p { margin: 0; color: var(--muted); }
.faq-load-more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.faq-load-more { min-width: 220px; border-color: color-mix(in srgb, var(--blue) 48%, var(--border)); background: var(--blue-soft); }
.faq-load-more[hidden] { display: none; }

.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .62s ease, transform .62s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }

.notice { display: grid; grid-template-columns: 1fr auto; gap: 28px 32px; align-items: center; padding: 32px; border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--border)); border-radius: 16px; background: linear-gradient(145deg, var(--orange-soft), var(--canvas)); }
.notice-copy { max-width: 760px; }
.notice h2 { margin: 0 0 8px; font-size: 26px; }
.notice p { margin: 0; color: var(--text); }
.platform-showcase { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--orange) 24%, var(--border)); text-align: center; }
.platform-kicker { margin-bottom: 14px; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.platform-list { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.platform-badge {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 24px rgba(0,0,0,.14);
}
.platform-badge img { width: 42px; height: 42px; object-fit: contain; }
.platform-badge span { display: grid; text-align: left; line-height: 1.25; }
.platform-badge strong { color: var(--text); font-size: 15px; }
.platform-badge small { color: var(--muted); font-size: 11px; }
.payment-showcase { max-width: 1080px; margin-top: 18px; }
.payment-kicker { color: var(--blue); }
.payment-list { max-width: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.payment-badge { min-width: 0; }
.payment-badge img { width: 42px; height: 42px; object-fit: contain; }
.payment-badge:nth-child(5) img,
.payment-badge:nth-child(6) img { width: 52px; height: 52px; }
.platform-showcase,
.payment-showcase { border: 0; background: transparent; box-shadow: none; }
.platform-showcase { padding-bottom: 8px; }
.payment-showcase { margin-top: 0; padding-top: 8px; }

.site-footer { max-width: var(--max); margin: 0 auto; padding: 32px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 32px; color: var(--muted); font-size: 14px; }
.footer-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.footer-logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
}
.footer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.footer-brand strong { color: var(--text); }
.site-footer p { margin: 4px 0 0; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.footer-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 9px;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.footer-link:hover { color: var(--text); background: var(--surface); transform: translateY(-1px); }
.footer-link-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue);
}
.footer-link-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-link-icon svg.fill-icon { fill: currentColor; stroke: none; }
.footer-link-icon .fill-dot { fill: currentColor; stroke: none; }

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .header-inner { padding: 0 20px; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 60px; left: 16px; right: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--canvas); box-shadow: var(--shadow); }
  .site-nav.is-open { display: grid; }
  .site-nav a { width: 100%; }
  .hero { padding: 56px 24px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-screenshots { min-height: 350px; max-width: 660px; width: 100%; margin: 0 auto; }
  .card-grid, .steps, .pricing-grid { grid-template-columns: 1fr; }
  .price-card { max-width: 620px; width: 100%; }
  .section { padding: 56px 24px; }
  .notice { grid-template-columns: 1fr; }
  .site-footer { padding: 28px 24px; flex-direction: column; }
}

@media (max-width: 520px) {
  .doc-content { width: min(100% - 32px, 760px); padding: 40px 0 64px; }
  .hero h1 { font-size: 44px; }
  .hero-screenshots { min-height: 250px; }
  .hero-shot--back { width: 83%; }
  .hero-shot--front { width: 88%; }
  .actions .button { width: 100%; }
  .trust-row { display: grid; }
  .price-card { padding: 24px; }
  .price-usd { font-size: 42px; }
  .price-badge { position: static; width: fit-content; margin-bottom: 14px; }
  .faq-item summary { padding: 15px 16px; }
  .faq-answer { padding: 15px 16px 17px; }
  .platform-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .platform-badge { min-height: 100px; flex-direction: column; gap: 8px; padding: 12px 6px; }
  .platform-badge span { text-align: center; }
  .payment-list { grid-auto-flow: column; grid-auto-columns: 150px; grid-template-columns: none; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: inline mandatory; }
  .payment-badge { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .scroll-reveal { opacity: 1 !important; transform: none !important; }
}


/* Icon motion: small, purposeful cues that also work without motion. */
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--green-soft), 0 0 0 0 rgba(124, 230, 178, .45); }
  55% { box-shadow: 0 0 0 5px var(--green-soft), 0 0 0 9px rgba(124, 230, 178, 0); }
}
@keyframes icon-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-2deg); }
}
@keyframes windows-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(70, 217, 237, 0)); transform: perspective(100px) rotateY(0); }
  50% { filter: drop-shadow(0 0 8px rgba(70, 217, 237, .5)); transform: perspective(100px) rotateY(-9deg); }
}
@keyframes linux-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-4px) rotate(-3deg); }
  70% { transform: translateY(-1px) rotate(2deg); }
}
@keyframes arrow-nudge {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(3px); }
}

.eyebrow--live::before { animation: live-pulse 2.3s ease-out infinite; }
.brand-mark img, .footer-logo img { animation: icon-float 4.5s ease-in-out infinite; }
.platform-badge img { animation: icon-float 4.8s ease-in-out infinite; }
.platform-badge:nth-child(2) img { animation-delay: -.9s; }
.platform-badge:nth-child(3) img { animation-delay: -1.8s; }
.payment-badge:nth-child(2) img { animation-delay: -.7s; }
.payment-badge:nth-child(3) img { animation-delay: -1.4s; }
.payment-badge:nth-child(4) img { animation-delay: -2.1s; }
.payment-badge:nth-child(5) img { animation-delay: -2.8s; }
.payment-badge:nth-child(6) img { animation-delay: -3.5s; }
.platform-badge:hover img, .payment-badge:hover img { animation-play-state: paused; transform: translateY(-5px) scale(1.07); filter: drop-shadow(0 0 8px rgba(70, 217, 237, .45)); }
.footer-link:hover .footer-link-icon { animation: icon-float .65s ease-in-out; }
.footer-link:hover .footer-link-icon svg { transform: scale(1.12); }

.download-grid { display: grid; gap: 12px; margin: 24px 0 32px; }
.download-card {
  min-height: 88px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--surface), var(--canvas));
  color: var(--text);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.download-card:not(.download-card--disabled):hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blue) 62%, var(--border)); box-shadow: 0 12px 26px rgba(0, 0, 0, .22); background: linear-gradient(145deg, var(--surface-2), var(--canvas)); }
.download-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 40%, transparent); outline-offset: 3px; }
.download-icon { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--blue-soft); }
.download-icon svg, .download-icon img { width: 36px; height: 36px; object-fit: contain; }
.download-icon--windows svg { fill: var(--blue); animation: windows-glow 3.5s ease-in-out infinite; transform-origin: center; }
.download-icon--linux img { animation: linux-bob 3.7s ease-in-out infinite; }
.download-icon--arm img { animation: icon-float 4.4s ease-in-out infinite; opacity: .65; }
.download-copy { min-width: 0; display: grid; gap: 3px; line-height: 1.35; }
.download-copy strong { font-size: 16px; }
.download-copy small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.download-action { color: var(--blue); font-size: 14px; font-weight: 780; white-space: nowrap; }
.download-action span { display: inline-block; margin-left: 4px; animation: arrow-nudge 1.7s ease-in-out infinite; }
.download-card:hover .download-icon--windows svg, .download-card:focus-visible .download-icon--windows svg { animation-duration: .8s; }
.download-card:hover .download-icon--linux img, .download-card:focus-visible .download-icon--linux img { animation-duration: .85s; }
.download-card--disabled { opacity: .65; cursor: not-allowed; }
.download-card--disabled .download-action { color: var(--muted); }
.download-card--disabled .download-action span { animation: none; }

@media (max-width: 520px) {
  .download-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .download-icon { width: 48px; height: 48px; border-radius: 12px; }
  .download-icon svg, .download-icon img { width: 31px; height: 31px; }
  .download-action { grid-column: 2; margin-top: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow--live::before, .brand-mark img, .footer-logo img, .platform-badge img, .download-icon svg, .download-icon img, .download-action span, .footer-link:hover .footer-link-icon { animation: none !important; }
  .platform-badge:hover img, .payment-badge:hover img { transform: none; filter: none; }
  .image-lightbox, .image-lightbox__image { transition: none; animation: none; }
  .hero-shot::before { content: "Tap to preview"; }
}

/* Modern documentation tables and copyable code samples. */
.doc-content table {
  display: table;
  width: 100%;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.doc-content th, .doc-content td { padding: 14px 16px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent); }
.doc-content th { background: rgba(70, 217, 237, .09); color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.doc-content th:first-child { border-top-left-radius: 13px; }
.doc-content th:last-child { border-top-right-radius: 13px; }
.doc-content tbody tr { transition: background-color .18s ease; }
.doc-content tbody tr:hover { background: rgba(70, 217, 237, .055); }
.doc-content tbody tr:last-child td { border-bottom: 0; }
.doc-content tbody tr:last-child td:first-child { border-bottom-left-radius: 13px; }
.doc-content tbody tr:last-child td:last-child { border-bottom-right-radius: 13px; }
.doc-content td code { color: #b8f4ff; }

.code-sample { position: relative; margin: 24px 0; }
.code-sample pre { margin: 0; padding: 50px 18px 18px; border: 0; box-shadow: none; }
.code-sample-label { position: absolute; top: 14px; left: 18px; color: var(--muted); font: 700 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.copy-code-button { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 750 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; cursor: pointer; transition: transform .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease; }
.copy-code-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.10); }
.copy-code-button:focus-visible { outline: 3px solid rgba(255,255,255,.3); outline-offset: 2px; }
.copy-code-button.is-copied { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.copy-code-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  .doc-content table { display: block; overflow-x: auto; white-space: normal; }
  .doc-content th, .doc-content td { min-width: 160px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-content tbody tr, .copy-code-button { transition: none; }
}


/* Color-coded HTTP methods make API reference tables faster to scan. */
.http-method {
  display: inline-flex;
  min-width: 56px;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 6px;
  font: 800 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: .04em;
}
.http-method--get { background: rgba(70,217,237,.14); color: var(--blue); }
.http-method--post { background: rgba(255,63,157,.14); color: #ff85be; }
.http-method--put { background: var(--orange-soft); color: var(--orange); }
.http-method--patch { background: rgba(166,118,255,.16); color: #c4a6ff; }
.http-method--delete { background: var(--red-soft); color: #ff82bd; }
.http-method--head, .http-method--options { background: rgba(255,255,255,.10); color: var(--text); }
.http-method--dynamic { background: var(--green-soft); color: var(--green); }
.doc-content td:has(.http-method) { width: 1%; white-space: nowrap; }

/* Google trial page */
[hidden] { display: none !important; }
.trial-shell { max-width: 760px; margin: 18px auto 48px; }
.trial-intro { max-width: 650px; margin-bottom: 28px; }
.trial-intro h1 { margin: 0 0 12px; }
.trial-lede { max-width: 620px; font-size: 18px; }
.trial-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--muted); }
.trial-points li::before { content: '✓'; color: var(--green); font-weight: 800; margin-right: 8px; }
.trial-points strong { color: var(--text); }
.trial-card { display: grid; gap: 20px; padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, var(--surface), var(--canvas)); box-shadow: 0 16px 32px rgba(0,0,0,.14); }
.trial-card__heading { display: flex; align-items: flex-start; gap: 13px; }
.trial-card h2 { margin: 0 0 5px; font-size: 19px; }
.trial-card__heading p { margin: 0; color: var(--muted); font-size: 14px; }
.trial-step { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 800; }
.trial-step--done { background: var(--green-soft); color: var(--green); }
.trial-status { padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.trial-status--success { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: var(--green-soft); color: var(--text); }
.trial-status--error { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: var(--red-soft); color: var(--text); }
.google-signin { min-height: 44px; }
.trial-account { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.trial-account__identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
.trial-account__identity div { min-width: 0; display: grid; gap: 2px; }
.trial-account__identity small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.trial-avatar { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 800; }
.trial-action, .trial-license { display: grid; gap: 16px; padding-top: 4px; border-top: 1px solid var(--border); }
.trial-license { gap: 13px; }
.trial-license label { font-weight: 750; }
.trial-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.trial-key-row input { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--canvas); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.trial-note, .trial-terms { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.trial-terms { margin-top: 18px; }
.button--primary { justify-self: start; background: var(--blue); color: #071117; }
.button--primary:hover { filter: brightness(1.08); }
.button--secondary, .button--ghost { border: 1px solid var(--border); }
.button--secondary { background: var(--surface-2); color: var(--text); }
.button--ghost { background: transparent; color: var(--muted); }
.button:disabled { cursor: wait; opacity: .65; }
@media (max-width: 560px) { .trial-card { padding: 20px; } .trial-account { align-items: flex-start; flex-direction: column; } .trial-key-row { grid-template-columns: 1fr; } .trial-key-row .button { width: 100%; } }

/* Free trial: centered Google sign-in and softer surfaces */
.trial-shell { max-width: 800px; margin: 30px auto 52px; }
.trial-intro { max-width: 650px; margin: 0 auto 34px; text-align: center; }
.trial-intro .eyebrow, .trial-points { justify-content: center; }
.trial-lede { margin-left: auto; margin-right: auto; }
.trial-card { position: relative; overflow: hidden; padding: 32px; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border)); border-radius: 22px; background: linear-gradient(145deg, rgba(20,31,44,.96), rgba(11,17,27,.98)); box-shadow: 0 20px 48px rgba(0,0,0,.24); }
.trial-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .85; }
.trial-card__heading { justify-content: center; text-align: center; }
.trial-card__heading > div { max-width: 430px; }
.trial-status { max-width: 520px; width: 100%; justify-self: center; text-align: center; border-radius: 12px; }
.google-signin { display: flex; min-height: 78px; align-items: center; justify-content: center; padding: 16px; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border)); border-radius: 16px; background: linear-gradient(135deg, rgba(70,217,237,.09), rgba(255,255,255,.025)); }
.google-signin > div { display: flex !important; justify-content: center; max-width: 100%; }
.google-signin iframe { border-radius: 10px !important; box-shadow: 0 7px 18px rgba(0,0,0,.18); }
.trial-action { justify-items: center; text-align: center; }
.trial-license { border-radius: 14px; padding: 20px; background: rgba(124,230,178,.06); border: 1px solid color-mix(in srgb, var(--green) 36%, var(--border)); }
.trial-account { border-radius: 14px; }
.trial-terms { max-width: 600px; margin: 20px auto 0; text-align: center; }
@media (max-width: 560px) { .trial-intro { text-align: left; } .trial-intro .eyebrow, .trial-points { justify-content: flex-start; } .trial-card { padding: 22px 16px; border-radius: 18px; } .trial-card__heading { justify-content: flex-start; text-align: left; } .google-signin { padding: 14px 8px; } }

/* Append to the end of assets/css/site.css */
.trial-shell--v5{max-width:720px;margin:36px auto 56px}.trial-shell--v5 .trial-hero{text-align:center;margin:0 auto 30px}.trial-hero__logo{width:72px;height:72px;object-fit:contain;margin:0 auto 14px;filter:drop-shadow(0 8px 18px rgba(70,217,237,.2))}.trial-shell--v5 .eyebrow{justify-content:center;margin-bottom:10px}.trial-shell--v5 h1{margin:0 0 10px}.trial-shell--v5 .trial-lede{max-width:510px;margin:0 auto;color:var(--muted);font-size:17px}.trial-perks{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}.trial-perks span{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.035);font-size:13px;color:var(--muted)}.trial-perks b{color:var(--text)}.trial-shell--v5 .trial-card{display:grid;gap:14px;padding:10px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,var(--surface),var(--canvas));box-shadow:0 14px 34px rgba(0,0,0,.16)}.trial-shell--v5 .trial-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;border-radius:13px;background:rgba(255,255,255,.025)}.trial-shell--v5 .trial-step{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:13px;font-weight:800}.trial-shell--v5 .trial-step--done{background:var(--green-soft);color:var(--green)}.trial-row__copy h2,.trial-license h2{margin:0 0 3px;font-size:17px}.trial-row__copy p,.trial-license p{margin:0;color:var(--muted);font-size:13px}.trial-shell--v5 .google-signin{display:flex;justify-content:flex-end;min-width:220px}.trial-shell--v5 .google-signin iframe{border-radius:9px!important;box-shadow:0 4px 12px rgba(0,0,0,.14)}.trial-shell--v5 .trial-status{padding:11px 14px;border-radius:10px;text-align:left}.trial-shell--v5 .trial-account{margin:4px 8px;padding:13px 14px;border-radius:12px}.trial-shell--v5 .trial-license{display:grid;gap:12px;margin:4px;padding:18px;border-radius:13px;background:rgba(124,230,178,.06);border:1px solid color-mix(in srgb,var(--green) 34%,var(--border))}.trial-license__head{display:flex;gap:13px;align-items:center}.trial-key-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.trial-key-row input{min-width:0;padding:11px;border:1px solid var(--border);border-radius:9px;background:var(--canvas);color:var(--text);font-family:ui-monospace,monospace}.trial-shell--v5 .trial-terms{text-align:center;color:var(--muted);font-size:13px;margin-top:18px}@media(max-width:620px){.trial-shell--v5{margin-top:20px}.trial-shell--v5 .trial-row{grid-template-columns:30px minmax(0,1fr);align-items:start}.trial-shell--v5 .google-signin,.trial-shell--v5 .trial-row .button{grid-column:2;justify-content:flex-start;margin-top:3px}.trial-shell--v5 .google-signin{min-width:0}.trial-key-row{grid-template-columns:1fr}.trial-key-row .button{width:100%}}


/* Trial perk icons: compact, animated, and accessible */
.trial-shell--v5 .trial-hero__logo { display:none; }
.trial-shell--v5 .trial-perks { gap:10px; }
.trial-shell--v5 .trial-perk { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid var(--border); color:var(--muted); font-size:13px; }
.trial-shell--v5 .trial-perk svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:var(--blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.trial-shell--v5 .trial-perk b { color:var(--text); }
.trial-perk--day svg { animation: trial-clock 3s ease-in-out infinite; transform-origin:center; }
.trial-perk--device svg { animation: trial-device 2.8s ease-in-out infinite; }
.trial-perk--shield svg { animation: trial-shield 3.2s ease-in-out infinite; stroke:var(--green); }
@keyframes trial-clock { 0%,100%{transform:rotate(0)} 35%{transform:rotate(12deg)} 65%{transform:rotate(-8deg)} }
@keyframes trial-device { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes trial-shield { 0%,100%{transform:scale(1)} 50%{transform:scale(1.11)} }
@media (prefers-reduced-motion:reduce){.trial-perk svg{animation:none!important}}

.trial-rule{display:flex;align-items:center;gap:9px;margin:4px 8px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--blue) 26%,var(--border));border-radius:11px;background:rgba(70,217,237,.06);color:var(--muted);font-size:13px}.trial-rule svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.trial-rule--plain{margin:8px 12px 2px;padding:0;border:0;background:transparent}.trial-step--google{background:#fff!important;color:#4285f4!important;font-weight:900}.trial-row--signin{grid-template-columns:34px auto!important;justify-content:center}.trial-row--signin .google-signin{grid-column:auto!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important}.trial-row--signin .google-signin iframe{box-shadow:none!important}
/* Final minimal trial layout: no outer card, centered Google entry */
.trial-shell--v5 .trial-card{display:contents!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.trial-shell--v5 .trial-card::before{display:none!important}.trial-row--signin,.trial-row--signin .trial-row__copy,.trial-row--signin .trial-step{display:none!important}.trial-row--signin .google-signin{display:flex!important;justify-content:center!important;align-items:center!important;margin:16px auto 20px!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.trial-rule,.trial-rule--plain{display:flex!important;justify-content:center!important;align-items:center!important;width:fit-content!important;margin:14px auto 2px!important;padding:0!important;border:0!important;background:transparent!important;text-align:center!important}.trial-account,.trial-action,.trial-license{border:0!important;background:transparent!important;box-shadow:none!important}
/* Keep the actual Google login button; hide only its text/card */
.trial-row--signin{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:16px auto 20px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.trial-row--signin .trial-row__copy,.trial-row--signin .trial-step{display:none!important}
.trial-row--signin .google-signin{display:flex!important;justify-content:center!important;align-items:center!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
/* Hide initial secure-sign-in status: it is used by JavaScript but has no visual card. */
.trial-shell--v5 .trial-status{display:none!important}
/* JavaScript toggles this attribute after sign-in/sign-out. */
.trial-shell--v5 .google-signin[hidden]{display:none!important}


/* License validation examples: Rouge syntax theme. */
.doc-content .highlight { margin: 24px 0; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); background: var(--code); overflow: auto; }
.doc-content .highlight pre { margin: 0; padding: 50px 18px 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.doc-content .highlight code { background: transparent; color: #d8dee9; }
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp { color: #6f7c91; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .nt { color: #c792ea; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa, .highlight .dl { color: #c3e88d; }
.highlight .mi, .highlight .mf, .highlight .mh, .highlight .il { color: #f78c6c; }
.highlight .nf, .highlight .fm, .highlight .nb, .highlight .nx, .highlight .na { color: #82aaff; }
.highlight .o, .highlight .p { color: #89ddff; }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: #f07178; }
.highlight .nc, .highlight .ne, .highlight .nn { color: #ffcb6b; }


/* Compact, logo-driven license example picker. */
.license-examples { margin: 28px 0 34px; }
.license-example-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.license-example-tab { min-height: 72px; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 9px 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font: 700 12px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; cursor: pointer; transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease; }
.license-example-tab:hover { transform: translateY(-1px); color: var(--text); background: rgba(255,255,255,.04); }
.license-example-tab.is-active { border-color: color-mix(in srgb, var(--blue) 42%, var(--border)); background: var(--blue-soft); color: var(--text); }
.license-example-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 42%, transparent); outline-offset: 2px; }
.license-language-logo { display: block; width: 38px; height: 28px; }
.license-language-logo--curl { width: 52px; }
.license-language-logo--php { width: 48px; }
.license-example-panel[hidden] { display: none; }
.license-example-panel > .highlight, .license-example-panel > .code-sample { margin: 12px 0 0; }
@media (max-width: 520px) { .license-example-tabs { gap: 6px; padding: 6px; } .license-example-tab { min-height: 64px; font-size: 11px; } .license-language-logo { transform: scale(.88); } .license-example-panel .highlight pre, .license-example-panel pre { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .license-example-tab { transition: none; } .license-example-tab:hover { transform: none; } }

/* Final alignment for the compact license language picker. */
.license-example-tabs { align-items: stretch; }
.license-example-tab { grid-template-rows: 32px 14px; align-items: center; min-height: 76px; gap: 7px; }
.license-logo-frame { width: 56px; height: 32px; display: grid; place-items: center; }
.license-language-logo { width: 32px; height: 32px; overflow: visible; }
.license-language-logo--curl { width: 56px; height: 32px; }
.license-language-logo--php { width: 52px; height: 32px; }
.license-example-tab > span:last-child { align-self: center; white-space: nowrap; }
.license-example-panel .highlight { margin-top: 12px; }
@media (max-width: 520px) { .license-example-tab { grid-template-rows: 30px 14px; min-height: 72px; gap: 6px; } .license-logo-frame { transform: scale(.94); } }

/* SVG language marks use one consistent visual grid. */
.license-example-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.license-logo-frame { background: transparent; }
.license-logo-frame img { display: block; max-width: 56px; max-height: 32px; width: auto; height: 32px; object-fit: contain; }
.license-logo-frame img.license-language-logo--curl { width: 56px; }
.license-logo-frame img.license-language-logo--php { width: 52px; }
@media (max-width: 620px) { .license-example-tabs { gap: 4px; padding: 5px; } .license-example-tab { min-width: 0; min-height: 70px; padding: 7px 2px; font-size: 10px; } .license-logo-frame { width: 42px; } .license-logo-frame img { max-width: 42px; height: 28px; } .license-logo-frame img.license-language-logo--curl { width: 42px; } .license-logo-frame img.license-language-logo--php { width: 42px; } }

/* External UXWing marks and a lightweight terminal glyph for cURL. */
.license-logo-frame--curl { display: grid; place-items: center; background: #0b3046; border-radius: 7px; }
.license-curl-mark { color: #f6fbff; font: 800 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -1px; }

/* Feature navigation: previous and next cards anchor each side. */
.continue-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 22px 0 4px; }
.continue-reading-card { min-height: 94px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.continue-reading-card:hover { border-color: color-mix(in srgb, var(--blue) 52%, var(--border)); background: var(--blue-soft); transform: translateY(-2px); }
.continue-reading-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 42%, transparent); outline-offset: 3px; }
.continue-reading-card--next { align-items: flex-end; text-align: right; }
.continue-reading-label { color: var(--blue); font: 750 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.continue-reading-card strong { max-width: 100%; font-size: 16px; line-height: 1.35; }
@media (max-width: 600px) { .continue-reading { grid-template-columns: 1fr; gap: 10px; } .continue-reading-card { min-height: 78px; padding: 15px 16px; } }
@media (prefers-reduced-motion: reduce) { .continue-reading-card { transition: none; } .continue-reading-card:hover { transform: none; } }


/* Postman-style licensing API reference. */
.api-endpoint-card {
  margin: 24px 0 32px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(70,217,237,.07), rgba(255,255,255,.018));
}
.api-endpoint-card__request {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--border);
}
.api-endpoint-card__request code {
  min-width: 0;
  overflow-wrap: anywhere;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.api-endpoint-card__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.api-endpoint-card__meta div {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.api-endpoint-card__meta div:last-child { border-right: 0; }
.api-endpoint-card__meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.api-endpoint-card__meta strong { font-size: 13px; }

.api-status-table-wrap { margin: 24px 0 34px; overflow-x: auto; border-radius: 14px; }
.doc-content .api-status-table { min-width: 690px; margin: 0; }
.doc-content .api-status-table th:first-child,
.doc-content .api-status-table td:first-child { width: 1%; white-space: nowrap; }
.doc-content .api-status-table th:nth-child(2),
.doc-content .api-status-table td:nth-child(2) { width: 1%; white-space: nowrap; }
.api-status {
  display: inline-flex;
  min-width: 78px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: 800 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: .025em;
  white-space: nowrap;
}
.api-status--success {
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: var(--green-soft);
  color: var(--green);
}
.api-status--warning {
  border-color: color-mix(in srgb, var(--orange) 34%, transparent);
  background: var(--orange-soft);
  color: var(--orange);
}
.api-status--danger {
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
  background: var(--red-soft);
  color: #ff82bd;
}

.api-response-list { display: grid; gap: 10px; margin: 24px 0 38px; }
.api-response {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.api-response[open] { border-color: color-mix(in srgb, var(--blue) 30%, var(--border)); }
.api-response summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.api-response summary::-webkit-details-marker { display: none; }
.api-response summary:hover { background: rgba(70,217,237,.045); }
.api-response summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 36%, transparent); outline-offset: -3px; }
.api-response summary > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.api-response summary strong { font-size: 14px; }
.api-response summary small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.api-response__chevron { color: var(--muted); font-size: 20px; transition: transform .18s ease; }
.api-response[open] .api-response__chevron { transform: rotate(180deg); }
.api-response__body { border-top: 1px solid var(--border); background: var(--code); }
.api-response__body > .code-sample,
.api-response__body > pre { margin: 0; border-radius: 0; }
.api-response__body > .code-sample pre { border-radius: 0; }

@media (max-width: 620px) {
  .api-endpoint-card__request { align-items: flex-start; flex-direction: column; }
  .api-endpoint-card__meta { grid-template-columns: 1fr; }
  .api-endpoint-card__meta div { border-right: 0; border-bottom: 1px solid var(--border); }
  .api-endpoint-card__meta div:last-child { border-bottom: 0; }
  .api-response summary { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  .api-response__chevron { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .api-response__chevron { transition: none; }
}


/* Expired trial state: remove the key and present a clear terminal state. */
.trial-shell--v5 .trial-license--expired,
.trial-shell--v5 .trial-license--unavailable {
  display: grid !important;
  gap: 14px !important;
  margin: 8px 4px !important;
  padding: 20px !important;
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--border)) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(255,63,157,.09), rgba(255,255,255,.018)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
}
.trial-shell--v5 .trial-step--expired {
  background: var(--red-soft) !important;
  color: #ff82bd !important;
}
.trial-expired-message {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--border));
  border-radius: 11px;
  background: rgba(255,63,157,.055);
}
.trial-expired-message[hidden] { display: none !important; }
.trial-expired-message svg {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  fill: none;
  stroke: #ff82bd;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trial-expired-message strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 14px; }
.trial-expired-message p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 560px) {
  .trial-shell--v5 .trial-license--expired,
  .trial-shell--v5 .trial-license--unavailable { margin: 8px 0 !important; padding: 16px !important; }
  .trial-expired-message { grid-template-columns: 26px minmax(0, 1fr); padding: 12px; }
  .trial-expired-message svg { width: 21px; height: 21px; }
}


/* Google, GitHub, and Microsoft sign-in options for the free trial. */
.trial-login-options {
  width: min(100%, 320px);
  display: grid;
  gap: 12px;
  justify-items: stretch;
}
.trial-login-options[hidden],
.trial-row--signin[hidden],
.github-signin[hidden],
.microsoft-signin[hidden],
.trial-login-divider[hidden] { display: none !important; }
.trial-login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}
.trial-login-divider::before,
.trial-login-divider::after {
  content: '';
  height: 1px;
  background: var(--border);
}
.trial-login-divider span { padding: 0 2px; }
.provider-signin {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, #ffffff 22%, var(--border));
  border-radius: 8px;
  background: #24292f;
  color: #ffffff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.provider-signin:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.42);
  background: #30363d;
  color: #ffffff;
}
.provider-signin:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent);
  outline-offset: 3px;
}
.provider-signin svg { width: 21px; height: 21px; flex: 0 0 21px; }
.github-signin svg { fill: currentColor; }
.trial-avatar--github { background: #24292f; color: #ffffff; font-size: 11px; }
.microsoft-signin { background: #ffffff; border-color: #8c8c8c; color: #2f2f2f; }
.microsoft-signin:hover { background: #f5f5f5; border-color: #5f5f5f; color: #111111; }
.trial-avatar--microsoft { background: #ffffff; border: 1px solid #8c8c8c; color: #2f2f2f; font-size: 10px; }
.trial-shell--v5 .trial-status--error { display: block !important; margin: 10px auto; text-align: center; }
@media (max-width: 420px) {
  .trial-login-options { width: 100%; }
  .provider-signin { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .provider-signin { transition: none; }
  .provider-signin:hover { transform: none; }
}


/* Authenticated member portal and admin console. */
.doc-content:has(.portal){width:min(1180px,calc(100% - 40px));padding-top:36px}.portal{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px}.portal-nav{position:sticky;top:92px;align-self:start;display:grid;gap:8px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.portal-nav>div{display:grid;gap:3px;padding:4px 6px 14px;border-bottom:1px solid var(--border)}.portal-nav small{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.08em}.portal-nav span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}.portal-nav button,.portal-nav a{min-height:44px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:650 14px/1 inherit;text-align:left;text-decoration:none;display:flex;align-items:center;cursor:pointer}.portal-nav button:hover,.portal-nav a:hover,.portal-nav .is-active{background:var(--blue-soft);color:var(--text)}.portal-main{min-width:0;padding:8px 0 64px}.portal-main h1{margin-bottom:28px}.portal-main section>h2{margin-top:0}.portal-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.portal-stats article,.portal-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(145deg,var(--surface),rgba(255,255,255,.018))}.portal-stats article{min-height:112px;align-items:flex-start;flex-direction:column}.portal-stats small,.portal-card small{display:block;color:var(--muted);font-size:12px}.portal-stats strong{font-size:20px}.portal-list{display:grid;gap:10px;margin-top:18px}.portal-card>div:first-child{min-width:0}.portal-card code{overflow:auto;max-width:48%;white-space:nowrap}.portal-form{display:grid;gap:14px;max-width:620px;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.portal-form--inline{grid-template-columns:2fr 1fr 1fr auto;max-width:none;align-items:end}.portal-form label{display:grid;gap:6px;color:var(--text);font-size:13px;font-weight:700}.portal-form input,.portal-form select{min-height:44px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--canvas);color:var(--text)}.portal-result,.portal-status{margin-top:16px;color:var(--muted);overflow-wrap:anywhere}.portal-actions{display:flex;flex-wrap:wrap;gap:6px}.portal-actions button{min-height:36px;padding:0 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text);cursor:pointer}.portal-badge{padding:5px 8px;border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:11px}.portal-badge--approved{background:var(--green-soft);color:var(--green)}.portal-badge--pending{background:var(--orange-soft);color:var(--orange)}.portal-badge--rejected{background:var(--red-soft);color:#ff82bd}@media(max-width:760px){.doc-content:has(.portal){width:min(100% - 28px,760px);padding-top:22px}.portal{grid-template-columns:1fr}.portal-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.portal-nav>div{grid-column:1/-1}.portal-main{padding-top:0}.portal-stats{grid-template-columns:1fr}.portal-form--inline{grid-template-columns:1fr}.portal-card{align-items:flex-start;flex-direction:column}.portal-card code{max-width:100%;width:100%}}


/* Member Portal v2 — independent routes, editable payments, and custom confirmation UI. */
.portal-modal[hidden], .portal-toast[hidden], [hidden] { display: none !important; }
.portal-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.portal-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 7, 14, .78); backdrop-filter: blur(9px); }
.portal-modal__dialog { position: relative; width: min(460px, 100%); padding: 28px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border)); border-radius: 20px; background: linear-gradient(145deg, #151d2b, #0d121c); box-shadow: 0 32px 90px rgba(0,0,0,.55); animation: portalModalIn .18s ease-out; }
.portal-modal__dialog h2 { margin: 4px 0 10px; font-size: clamp(24px, 4vw, 31px); }
.portal-modal__dialog > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.portal-modal__icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); font-size: 22px; font-weight: 900; }
.portal-modal__input { display: grid; gap: 7px; margin-top: 18px; color: var(--text); font-size: 13px; font-weight: 700; }
.portal-modal__input input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--canvas); color: var(--text); }
.portal-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.button--danger { background: #d94770 !important; border-color: #ed6f91 !important; color: #fff !important; }
.portal-modal-open { overflow: hidden; }
.portal-toast { position: fixed; z-index: 1100; right: 22px; bottom: 22px; max-width: min(380px, calc(100% - 44px)); padding: 13px 17px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border)); border-radius: 11px; background: #11241f; color: #bdfbe3; box-shadow: 0 18px 50px rgba(0,0,0,.4); font-size: 14px; font-weight: 700; }
.portal-toast[data-tone="error"] { border-color: #d94770; background: #2a1420; color: #ffd1df; }
@keyframes portalModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.doc-content:has([data-member-portal]), .doc-content:has([data-admin-portal]) { width: min(1240px, calc(100% - 40px)); max-width: none; padding-top: 34px; }
.portal { grid-template-columns: 245px minmax(0, 1fr); gap: 34px; }
.portal-nav { top: 88px; border-radius: 18px; background: linear-gradient(160deg, rgba(24,34,49,.97), rgba(15,22,33,.97)); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.portal-nav__profile { padding-bottom: 16px !important; }
.portal-nav a, .portal-nav button { position: relative; }
.portal-nav a.is-active::before { content: ''; position: absolute; left: 0; width: 3px; height: 20px; border-radius: 8px; background: var(--blue); }
.portal-nav__logout { margin-top: 8px; border-top: 1px solid var(--border) !important; border-radius: 0 0 9px 9px !important; }
.portal-main { padding-top: 4px; }
.portal-main > h1 { margin: 2px 0 14px; font-size: clamp(38px, 5vw, 58px); letter-spacing: -.045em; }
.portal-lede { max-width: 760px; margin: 0 0 28px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.portal-section { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
.portal-section h2 { margin-top: 0; }
.portal-welcome { margin-top: 26px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(circle at top right, rgba(61,211,238,.09), transparent 42%), var(--surface); }
.portal-welcome h2 { margin-top: 0; }
.portal-skeleton { min-height: 80px; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: 13px; color: var(--muted); }
.portal-status[data-tone="error"] { color: #ff8eae; }
.portal-status[data-tone="success"] { color: var(--green); }

.license-hero-card, .purchase-card, .confirmation-card { position: relative; overflow: hidden; padding: clamp(22px, 4vw, 34px); border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--border)); border-radius: 20px; background: radial-gradient(circle at 92% 8%, rgba(61,211,238,.12), transparent 31%), linear-gradient(145deg, var(--surface), rgba(15,21,32,.8)); box-shadow: 0 26px 60px rgba(0,0,0,.18); }
.license-hero-card__head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.license-hero-card__head h2, .purchase-card h2, .confirmation-card h2 { margin: 4px 0 7px; font-size: clamp(26px, 4vw, 36px); }
.license-hero-card__empty { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.license-orb { width: 74px; height: 74px; flex: 0 0 74px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 22px; background: var(--blue-soft); color: var(--blue); font-size: 21px; font-weight: 900; }
.license-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.license-detail-grid > div, .license-card__meta > div { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: rgba(0,0,0,.12); }
.license-detail-grid small, .license-card__meta small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.license-key-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.license-key-row code { flex: 1; min-width: 0; padding: 14px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #090e16; color: #9eeafd; white-space: nowrap; }
.license-hidden-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(217,71,112,.08); color: #f5a8bd; }
.status-pill { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.status-pill--active, .status-pill--approved { border-color: rgba(80,227,164,.38); background: rgba(80,227,164,.1); color: #83f0c2; }
.status-pill--pending { border-color: rgba(255,196,91,.38); background: rgba(255,196,91,.1); color: #ffd78c; }
.status-pill--expired, .status-pill--revoked, .status-pill--rejected, .status-pill--disabled { border-color: rgba(217,71,112,.38); background: rgba(217,71,112,.1); color: #f59bb4; }

.purchase-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 24px; align-items: center; }
.purchase-card__icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 18px; background: rgba(61,211,238,.08); }
.purchase-card__icon img { width: 54px; height: 54px; }
.purchase-card__copy p, .purchase-card__copy small { color: var(--muted); }
.purchase-success { grid-column: 1/-1; }
.purchase-success > .button { margin-top: 16px; }

.license-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.license-card { display: grid; gap: 17px; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(150deg, var(--surface), rgba(255,255,255,.015)); }
.license-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.license-type { font-size: 16px; font-weight: 800; }
.license-card__meta { display: grid; grid-template-columns: 1fr 100px; gap: 9px; }
.portal-empty { padding: 26px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); }
.portal-empty h2 { margin-top: 0; color: var(--text); }

.topup-builder { display: grid; gap: 18px; }
.topup-builder fieldset { margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.topup-builder legend { padding: 0 8px; color: var(--text); font-size: 14px; font-weight: 800; }
.topup-builder label:not(.payment-method-card) { display: grid; gap: 7px; color: var(--text); font-size: 13px; font-weight: 700; }
.topup-builder select, .topup-builder input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--canvas); color: var(--text); }
.topup-builder fieldset > small { display: block; margin-top: 9px; color: var(--muted); }
.payment-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.payment-method-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 12px; min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.012); cursor: pointer; transition: border-color .17s ease, transform .17s ease, background .17s ease; }
.payment-method-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.payment-method-card:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(61,211,238,.2); }
.payment-method-card input { position: absolute; opacity: 0; pointer-events: none; }
.payment-method-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,0,0,.15); }
.payment-method-card__icon img { width: 42px; height: 42px; }
.payment-method-card strong, .payment-method-card small, .payment-method-card em { display: block; }
.payment-method-card small { min-height: 36px; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.payment-method-card em { margin-top: 7px; color: var(--blue); font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.payment-method-details { display: grid; gap: 15px; margin-top: 18px; padding: clamp(18px,3vw,25px); border: 1px solid color-mix(in srgb, var(--blue) 38%, var(--border)); border-radius: 15px; background: radial-gradient(circle at 92% 8%, rgba(61,211,238,.11), transparent 34%), #111a27; }
.payment-method-details__head { display: flex; align-items: center; gap: 14px; }
.payment-method-details__head h2 { margin: 2px 0 7px; font-size: 24px; }
.payment-method-details__icon { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 14px; background: rgba(0,0,0,.18); }
.payment-method-details__icon img { width: 50px; height: 50px; }
.payment-method-details__description { margin: 0; color: var(--muted); line-height: 1.65; }
.payment-method-details__instructions { padding: 16px; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; background: rgba(61,211,238,.07); }
.payment-method-details__instructions strong { display: block; margin-bottom: 7px; color: var(--blue); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.payment-method-details__instructions p { margin: 0; color: var(--text); line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.payment-method-details__contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 12px; }
.payment-method-details__contacts b { color: var(--text); }
.confirmation-card { display: grid; grid-template-columns: 72px 1fr; gap: 20px; margin-top: 24px; }
.confirmation-card__icon img { width: 64px; height: 64px; }
.confirmation-card code { display: block; margin: 14px 0; padding: 13px; border-radius: 9px; background: #090e16; color: #b8d7e7; white-space: normal; overflow-wrap: anywhere; }
.confirmation-links { display: flex; flex-wrap: wrap; gap: 9px; }
.confirmation-links .button { display: inline-flex; align-items: center; gap: 7px; }
.confirmation-links img { width: 21px; height: 21px; }

.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-alert { display: grid; gap: 5px; margin: 0 0 24px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.portal-alert--warning { border-color: rgba(255,196,91,.5); background: rgba(255,196,91,.08); color: #ffe0a3; }
.portal-alert span { color: var(--muted); line-height: 1.55; }
.portal-alert code { color: var(--text); }
.section-heading h2 { margin-bottom: 6px; }
.section-heading p { margin: 0; color: var(--muted); }
.portal-form textarea { resize: vertical; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--canvas); color: var(--text); font: inherit; }
.portal-form--compact { grid-template-columns: minmax(220px,420px) auto; align-items: end; max-width: 700px; }
.payment-editor { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: none; }
.portal-form__wide { grid-column: 1/-1; }
.switch-label { display: flex !important; grid-column: 1/-1; flex-direction: row !important; align-items: center; gap: 9px !important; }
.switch-label input { width: 18px; height: 18px; }
.payment-admin-grid { display: grid; gap: 11px; }
.payment-admin-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 17px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.payment-admin-card > img { width: 54px; height: 54px; }
.payment-admin-card small, .payment-admin-card p { display: block; margin: 3px 0; color: var(--muted); }
.topup-admin-card > div:first-child { flex: 1; }
.topup-admin-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .payment-method-grid { grid-template-columns: 1fr; }
  .license-grid { grid-template-columns: 1fr; }
  .purchase-card { grid-template-columns: auto 1fr; }
  .purchase-card > .button { grid-column: 1/-1; width: 100%; }
}
@media (max-width: 760px) {
  .doc-content:has([data-member-portal]), .doc-content:has([data-admin-portal]) { width: min(100% - 28px,760px); padding-top: 22px; }
  .portal { grid-template-columns: 1fr; gap: 24px; }
  .portal-nav { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .portal-nav__profile { grid-column: 1/-1; }
  .portal-main > h1 { font-size: 39px; }
  .portal-form--compact, .payment-editor { grid-template-columns: 1fr; }
  .portal-form__wide, .switch-label { grid-column: auto; }
  .confirmation-card { grid-template-columns: 1fr; }
  .payment-admin-card { grid-template-columns: 48px minmax(0,1fr); }
  .payment-admin-card > .button { grid-column: 1/-1; width: 100%; }
}
@media (max-width: 520px) {
  .portal-modal__dialog { padding: 22px; }
  .portal-modal__actions, .confirmation-links { flex-direction: column; }
  .portal-modal__actions .button, .confirmation-links .button { width: 100%; justify-content: center; }
  .license-hero-card__empty { align-items: flex-start; flex-direction: column; }
  .license-detail-grid { grid-template-columns: 1fr; }
  .license-key-row { align-items: stretch; flex-direction: column; }
  .license-key-row .button { width: 100%; }
  .purchase-card { grid-template-columns: 1fr; }
  .purchase-card__icon { width: 62px; height: 62px; }
  .license-card__meta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-modal__dialog { animation: none; }
  .payment-method-card { transition: none; }
  .payment-method-card:hover { transform: none; }
}

/* Landing page v2 — focused responsive product page */
.landing-v2{--lv-ink:#eef4fc;--lv-muted:#9bacbf;--lv-line:rgba(168,194,219,.16);--lv-panel:#111b29;--lv-panel-2:#152337;--lv-blue:#54a6ff;--lv-blue-strong:#2685f0;--lv-green:#73d6a4;--lv-orange:#f1a45e;--lv-violet:#b49cff;--lv-max:1160px;background:#0c1420;color:var(--lv-ink);margin:-40px 0 -64px;margin-left:calc(50% - 50vw);width:100vw}.landing-v2 *{box-sizing:border-box}.lv-shell{width:min(var(--lv-max),calc(100% - 48px));margin:0 auto}.lv-hero{position:relative;overflow:hidden;padding:92px 0 82px;background:radial-gradient(ellipse 70% 70% at 78% 26%,rgba(52,135,244,.2),transparent 68%),linear-gradient(160deg,#0c1523 0%,#0e1a2a 52%,#0b1420 100%);border-bottom:1px solid var(--lv-line)}.lv-hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:56px;align-items:center}.lv-kicker,.lv-label{margin:0 0 16px;color:#a9ccff;font:750 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.lv-kicker{display:flex;align-items:center;gap:9px}.lv-kicker span{width:8px;height:8px;border-radius:50%;background:var(--lv-green);box-shadow:0 0 0 5px rgba(115,214,164,.1)}.lv-hero h1{max-width:660px;margin:0;font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-.065em}.lv-hero h1 em{color:#7ebaff;font-style:normal}.lv-lede{max-width:600px;margin:26px 0 32px;color:var(--lv-muted);font-size:18px;line-height:1.65}.lv-actions{display:flex;flex-wrap:wrap;gap:12px}.lv-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:0 18px;border:1px solid var(--lv-line);border-radius:10px;background:rgba(255,255,255,.025);color:var(--lv-ink);font-size:14px;font-weight:750;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}.lv-button:hover{transform:translateY(-2px);border-color:rgba(125,184,255,.62);background:rgba(84,166,255,.1)}.lv-button--primary{border-color:var(--lv-blue-strong);background:linear-gradient(135deg,#318ef8,#5faaff);color:#071221;box-shadow:0 10px 28px rgba(37,128,240,.24)}.lv-button--primary:hover{background:linear-gradient(135deg,#53a4ff,#7ebaff)}.lv-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:44px 0 0}.lv-proof div{padding:13px 14px;border-left:1px solid var(--lv-line)}.lv-proof dt{margin:0 0 5px;color:#e7f1ff;font-size:13px;font-weight:750}.lv-proof dd{margin:0;color:var(--lv-muted);font-size:12px;line-height:1.4}.lv-visual{position:relative;min-height:430px}.lv-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.lv-orb--one{width:260px;height:260px;right:6%;top:2%;background:rgba(65,145,255,.16)}.lv-orb--two{width:160px;height:160px;left:2%;bottom:0;background:rgba(115,214,164,.1)}.lv-window{position:absolute;overflow:hidden;border:1px solid rgba(190,220,250,.19);border-radius:17px;background:#101a27;box-shadow:0 28px 70px rgba(0,0,0,.32)}.lv-window img{display:block;width:100%;height:100%;object-fit:cover}.lv-window--back{top:0;right:0;width:78%;opacity:.62;transform:rotate(3deg);filter:saturate(.8)}.lv-window--front{z-index:1;left:0;bottom:0;width:84%;transform:rotate(-2deg)}.lv-window__bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}.lv-window__bar i{width:7px;height:7px;border-radius:50%;background:rgba(200,220,240,.32)}.lv-window__bar i:first-child{background:#ff796d}.lv-window__bar i:nth-child(2){background:#f1c76b}.lv-window__bar i:nth-child(3){background:#73d6a4}.lv-window__bar span{margin-left:auto;color:#9cb2c9;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.lv-section{padding:96px 0;border-bottom:1px solid var(--lv-line)}.lv-section--features{background:#0e1825}.lv-heading{max-width:670px;margin-bottom:42px}.lv-heading h2,.lv-price-copy h2,.lv-notice h2{margin:0;color:var(--lv-ink);font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.047em}.lv-heading>p:last-child,.lv-price-copy>p,.lv-notice p{margin:16px 0 0;color:var(--lv-muted);font-size:16px;line-height:1.65}.lv-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.lv-feature{min-height:244px;padding:24px;border:1px solid var(--lv-line);border-radius:14px;background:linear-gradient(145deg,rgba(28,43,62,.88),rgba(16,27,41,.9));transition:transform .2s ease,border-color .2s ease}.lv-feature:hover{transform:translateY(-4px);border-color:rgba(126,186,255,.44)}.lv-feature h3{margin:18px 0 9px;font-size:18px;letter-spacing:-.02em}.lv-feature p{margin:0;color:var(--lv-muted);font-size:14px;line-height:1.58}.lv-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px}.lv-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.lv-icon--blue{color:#73b6ff;background:rgba(84,166,255,.14)}.lv-icon--violet{color:#c4b1ff;background:rgba(180,156,255,.14)}.lv-icon--orange{color:#ffc486;background:rgba(241,164,94,.14)}.lv-icon--green{color:#93e4b6;background:rgba(115,214,164,.14)}.lv-icon--gold{color:#f1cc79;background:rgba(241,201,110,.14)}.lv-icon--slate{color:#c6d5e5;background:rgba(198,213,229,.1)}.lv-section--price{background:radial-gradient(circle at 85% 15%,rgba(84,166,255,.15),transparent 35%),#0c1420}.lv-price-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,430px);gap:80px;align-items:center}.lv-price-copy{max-width:560px}.lv-text-link{display:inline-flex;gap:9px;margin-top:28px;color:#91c4ff;font-size:14px;font-weight:750;text-decoration:none}.lv-price-card{padding:28px;border:1px solid rgba(101,173,255,.48);border-radius:18px;background:linear-gradient(155deg,rgba(31,56,86,.85),rgba(16,29,45,.94));box-shadow:0 24px 70px rgba(0,0,0,.27)}.lv-price-card__top{display:flex;justify-content:space-between;align-items:center;color:#b9c8d8;font-size:13px;font-weight:750}.lv-price-tag{padding:6px 8px;border-radius:6px;background:rgba(115,214,164,.12);color:#9be7bd;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.lv-price{display:flex;align-items:flex-end;gap:9px;margin-top:24px}.lv-price strong{font-size:72px;line-height:.82;letter-spacing:-.07em}.lv-price span{padding-bottom:5px;color:#99abc0;font-size:14px;font-weight:750}.lv-price-idr{margin:14px 0 22px;color:#8dc0ff;font-size:19px;font-weight:800}.lv-price-idr span{color:#9aacbe;font-size:12px;letter-spacing:.08em}.lv-price-list{display:grid;gap:11px;margin:0 0 28px;padding:20px 0;border-top:1px solid var(--lv-line);border-bottom:1px solid var(--lv-line);list-style:none}.lv-price-list li{position:relative;padding-left:25px;color:#c0cddd;font-size:14px}.lv-price-list li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:6px;border-left:2px solid #82dfab;border-bottom:2px solid #82dfab;transform:rotate(-45deg)}.lv-button--wide{width:100%}.lv-heading--center{text-align:center;margin:0 auto 38px}.lv-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:steps}.lv-steps li{display:flex;gap:18px;padding:24px;border-top:1px solid var(--lv-line)}.lv-steps span{color:#79b9ff;font-size:13px;font-weight:800;letter-spacing:.08em}.lv-steps h3{margin:0 0 9px;font-size:17px}.lv-steps p{margin:0;color:var(--lv-muted);font-size:14px;line-height:1.6}.lv-section--notice{padding:64px 0;background:#0b121c}.lv-notice{display:flex;justify-content:space-between;align-items:center;gap:36px;padding:30px 34px;border:1px solid rgba(241,164,94,.26);border-radius:16px;background:linear-gradient(110deg,rgba(241,164,94,.07),rgba(255,255,255,.01))}.lv-notice h2{font-size:30px}.lv-notice p{max-width:690px;font-size:14px}.lv-notice .lv-label{color:#ffc486;margin-bottom:9px}@media(max-width:900px){.landing-v2{margin:-32px 0 -64px;margin-left:calc(50% - 50vw)}.lv-hero{padding:64px 0}.lv-hero__grid,.lv-price-layout{grid-template-columns:1fr;gap:46px}.lv-hero__copy{max-width:700px}.lv-visual{max-width:620px;width:100%;min-height:385px}.lv-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lv-price-card{max-width:500px}.lv-steps{grid-template-columns:1fr}.lv-steps li{padding-left:0}.lv-notice{align-items:flex-start;flex-direction:column;gap:24px}}@media(max-width:600px){.landing-v2{margin:-24px -16px -64px;width:calc(100% + 32px)}.lv-shell{width:min(100% - 32px,var(--lv-max))}.lv-hero{padding:48px 0 44px}.lv-hero h1{font-size:48px}.lv-lede{font-size:16px;margin:20px 0 26px}.lv-actions{display:grid;grid-template-columns:1fr}.lv-button{width:100%}.lv-proof{grid-template-columns:1fr;margin-top:30px}.lv-proof div{padding:10px 0;border-left:0;border-bottom:1px solid var(--lv-line)}.lv-visual{min-height:280px}.lv-window--back{width:80%}.lv-window--front{width:88%}.lv-section{padding:62px 0}.lv-heading{margin-bottom:30px}.lv-heading h2,.lv-price-copy h2{font-size:34px}.lv-feature-grid{grid-template-columns:1fr}.lv-feature{min-height:0;padding:21px}.lv-price-layout{gap:32px}.lv-price-card{padding:22px}.lv-price strong{font-size:64px}.lv-notice{padding:24px}.lv-notice h2{font-size:27px}}@media(prefers-reduced-motion:reduce){.lv-button,.lv-feature{transition:none}.lv-button:hover,.lv-feature:hover{transform:none}}

/* Unified product theme: landing, documentation, member account, and admin pages. */
:root{--canvas:#0c1420;--surface:#111b29;--surface-2:#16263a;--text:#eef4fc;--muted:#9bacbf;--border:rgba(168,194,219,.16);--blue:#54a6ff;--blue-soft:rgba(84,166,255,.13);--green:#73d6a4;--green-soft:rgba(115,214,164,.12);--orange:#f1a45e;--orange-soft:rgba(241,164,94,.12);--red:#ff718d;--red-soft:rgba(255,113,141,.12);--code:#08121f;--shadow:0 1px 2px rgba(0,0,0,.28),0 16px 40px rgba(0,0,0,.22)}body{background:radial-gradient(circle at 82% -10%,rgba(84,166,255,.1),transparent 30%),radial-gradient(circle at 12% 18%,rgba(115,214,164,.055),transparent 26%),var(--canvas)}.site-header{background:color-mix(in srgb,var(--canvas) 90%,transparent)}.site-nav a:hover{background:rgba(84,166,255,.1);color:var(--text)}.doc-content blockquote{border-left-color:var(--orange)}.portal-nav{background:linear-gradient(160deg,rgba(19,32,49,.97),rgba(12,21,33,.97))}.license-hero-card,.purchase-card,.confirmation-card{background:radial-gradient(circle at 92% 8%,rgba(84,166,255,.14),transparent 31%),linear-gradient(145deg,var(--surface),rgba(12,20,31,.9))}.portal-nav button:hover,.portal-nav a:hover,.portal-nav .is-active{background:var(--blue-soft);color:var(--text)}
/* Payment cards on the landing page. */
.lv-section--payments{background:#0e1825}.lv-payment-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:960px;margin:0 auto}.lv-payment{min-height:116px;display:grid;place-items:center;align-content:center;gap:10px;padding:16px;border:1px solid var(--lv-line);border-radius:13px;background:linear-gradient(145deg,rgba(28,43,62,.82),rgba(16,27,41,.88));color:#b9c8d8;font-size:13px;font-weight:750;transition:transform .2s ease,border-color .2s ease}.lv-payment img{width:42px;height:42px;object-fit:contain}.lv-payment:hover{transform:translateY(-4px);border-color:rgba(126,186,255,.48)}.lv-payment:nth-child(5) img,.lv-payment:nth-child(6) img{width:52px;height:52px}@media(max-width:900px){.lv-payment-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.lv-payment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lv-payment{min-height:104px}.lv-payment img{width:36px;height:36px}.lv-payment:nth-child(5) img,.lv-payment:nth-child(6) img{width:46px;height:46px}}


/* Landing starts directly below the sticky header without inherited document padding. */
.doc-content:has(.landing-v2){width:100%;max-width:none;padding-top:0}
.landing-v2{margin-top:0}
@media(max-width:900px){.landing-v2{margin-top:0}}
@media(max-width:600px){.landing-v2{margin-top:0}}


/* Comfortable mobile gutters: no zoom adjustment required at default 100% scale. */
@media(max-width:600px){.landing-v2 .lv-shell{width:min(100% - 48px,var(--lv-max))}.landing-v2 .lv-feature,.landing-v2 .lv-price-card,.landing-v2 .lv-notice{border-radius:14px}}

/* Keep the full-bleed background without introducing horizontal overflow on phones. */
@media(max-width:600px){.landing-v2{margin-right:0;margin-left:calc(50% - 50vw);width:100vw}}


/* Compact horizontal OAuth provider row: icon + provider name only. */
.trial-shell--v5 .trial-row--signin { width: 100% !important; margin: 18px auto 20px !important; }
.trial-shell--v5 .trial-login-options {
  width: auto;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.trial-shell--v5 .provider-signin,
.trial-shell--v5 .google-signin {
  width: auto !important;
  min-width: 112px !important;
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 9px;
  margin: 0 !important;
  padding: 0 15px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
  font: 700 13px/1 inherit;
  text-decoration: none;
  cursor: pointer;
}
.trial-shell--v5 .provider-signin:hover,
.trial-shell--v5 .google-signin:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--blue) 55%,var(--border)) !important; background: rgba(255,255,255,.075) !important; }
.trial-shell--v5 .provider-signin svg,
.trial-shell--v5 .google-signin svg { width: 21px; height: 21px; flex: 0 0 21px; }
.trial-shell--v5 .provider-signin--github svg { fill: #fff; }
.trial-shell--v5 .provider-signin--gitlab svg { width: 23px; height: 23px; }
.trial-shell--v5 .provider-signin[hidden],
.trial-shell--v5 .google-signin[hidden] { display: none !important; }
.trial-avatar--gitlab { background: #2b1538; color: #fc6d26; font-size: 10px; }
@media (max-width: 540px) {
  .trial-shell--v5 .trial-login-options { width: min(100%, 330px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trial-shell--v5 .provider-signin,
  .trial-shell--v5 .google-signin { width: 100% !important; min-width: 0 !important; padding: 0 11px !important; }
}
@media (max-width: 300px) {
  .trial-shell--v5 .trial-login-options { grid-template-columns: 1fr; }
}


/* Telegram OIDC provider and five-provider responsive arrangement. */
.trial-shell--v5 .provider-signin--telegram svg { width: 23px; height: 23px; }
.trial-avatar--telegram { background:#229ed9; color:#fff; font-size:10px; }
@media (max-width:540px) and (min-width:351px) {
  .trial-shell--v5 .trial-login-options { width:min(100%,360px); grid-template-columns:repeat(6,minmax(0,1fr)); }
  .trial-shell--v5 .trial-login-options > * { grid-column:span 2; font-size:12px; padding:0 7px!important; }
  .trial-shell--v5 .trial-login-options > :nth-child(4) { grid-column:2 / span 2; }
  .trial-shell--v5 .trial-login-options > :nth-child(5) { grid-column:4 / span 2; }
}
@media (max-width:350px) {
  .trial-shell--v5 .trial-login-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trial-shell--v5 .trial-login-options > :last-child { grid-column:1 / -1; width:min(100%,150px)!important; justify-self:center; }
}


/* Final OAuth arrangement: two centered rows (3 + 2) on desktop and mobile. */
.trial-shell--v5 .trial-login-options {
  width:min(100%,420px)!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
}
.trial-shell--v5 .trial-login-options > * {
  grid-column:span 2!important;
  width:100%!important;
  min-width:0!important;
}
.trial-shell--v5 .trial-login-options > :nth-child(4) { grid-column:2 / span 2!important; }
.trial-shell--v5 .trial-login-options > :nth-child(5) { grid-column:4 / span 2!important; }
@media(max-width:350px) {
  .trial-shell--v5 .trial-login-options { grid-template-columns:repeat(2,minmax(0,1fr))!important; width:min(100%,300px)!important; }
  .trial-shell--v5 .trial-login-options > * { grid-column:auto!important; }
  .trial-shell--v5 .trial-login-options > :last-child { grid-column:1 / -1!important; width:min(100%,145px)!important; justify-self:center; }
}


/* Trial feature chips below the access rule. */
.trial-feature-showcase { width:min(100%,680px); margin:28px auto 0; }
.trial-feature-showcase > .eyebrow { justify-content:center; margin:0 0 13px; color:var(--blue); }
.trial-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.trial-feature-chip { min-height:58px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--blue) 22%,var(--border)); border-radius:12px; background:linear-gradient(145deg,rgba(84,166,255,.07),rgba(255,255,255,.025)); box-shadow:0 8px 22px rgba(0,0,0,.1); }
.trial-feature-chip__icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:9px; background:var(--blue-soft); color:var(--blue); }
.trial-feature-chip__icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.trial-feature-chip strong { color:var(--text); font-size:12.5px; line-height:1.25; }
@media(max-width:560px) {
  .trial-feature-showcase { margin-top:24px; }
  .trial-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .trial-feature-chip { min-height:56px; padding:9px 10px; }
  .trial-feature-chip__icon { width:30px; height:30px; flex-basis:30px; }
}
@media(max-width:310px) { .trial-feature-grid { grid-template-columns:1fr; } }