/**
 * Repetitia public website presentation.
 *
 * The customer-facing website intentionally uses the same visual vocabulary as
 * billing_website: Roboto, compact dark surfaces, blue action accents, rounded
 * controls, and restrained borders. The administrator site is not a design
 * reference for this surface.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  color-scheme: dark;
  font-family: Roboto, Arial, sans-serif;
  background: #111318;
  color: #e3e2e9;
  --page-background: #111318;
  --surface: #1b1b1f;
  --surface-raised: #202126;
  --surface-highlight: #262833;
  --border: #45464f;
  --border-strong: #565867;
  --text: #e3e2e9;
  --text-strong: #f7f7ff;
  --text-muted: #c7c6d0;
  --accent: #2d86f3;
  --accent-hover: #5aa1ff;
  --accent-soft: #a9c7ff;
  --danger: #ffb4ab;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--page-background); color: var(--text); }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }

.section-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgb(69 70 79 / 72%);
  background: rgb(17 19 24 / 94%);
  backdrop-filter: blur(12px);
}
.site-header__inner { width: min(1120px, calc(100% - 32px)); min-height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-link { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 170px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a, .text-button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 500; text-decoration: none; }
.site-nav a:hover, .text-button:hover { color: var(--text-strong); }

.hero { min-height: 580px; padding: 80px 0 64px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr); gap: 52px; align-items: center; }
.hero__copy h1 { max-width: 720px; margin: 0 0 18px; color: var(--text-strong); font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.03; }
.section-label { margin: 0 0 8px; color: var(--accent-soft); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lead { max-width: 680px; margin: 0; color: var(--text-muted); font-size: 1.08rem; line-height: 1.65; }
.hero__actions, .support-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.primary-button, .secondary-button {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 999px; cursor: pointer; font-size: 0.94rem; font-weight: 500; line-height: 1.2; text-decoration: none;
}
.primary-button { border: 0; background: var(--accent); color: #fff; }
.primary-button:hover:not(:disabled) { background: var(--accent-hover); }
.secondary-button { border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-strong); }
.secondary-button:hover { border-color: var(--accent-soft); }
.primary-button:focus-visible, .secondary-button:focus-visible, .text-button:focus-visible, .icon-button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.primary-button:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }

.product-preview { display: grid; gap: 16px; transform: rotate(1deg); }
.preview-card { border: 1px solid var(--border-strong); border-radius: 20px; background: linear-gradient(145deg, var(--surface-highlight), var(--surface-raised)); box-shadow: 0 18px 44px rgb(0 0 0 / 24%); }
.preview-card--study { padding: 28px; }
.preview-card--browse { width: 82%; justify-self: end; padding: 22px; transform: rotate(-2deg); }
.preview-kicker { margin: 0 0 10px; color: var(--accent-soft); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.preview-prompt { margin: 0; color: var(--text-strong); font-size: 1.18rem; line-height: 1.45; }
.preview-rating-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; }
.preview-rating-row span { padding: 9px 8px; border: 1px solid var(--border); border-radius: 999px; background: #1b1b1f; color: var(--text-muted); font-size: 0.8rem; text-align: center; }

.content-section { padding: 64px 0; border-top: 1px solid rgb(69 70 79 / 52%); }
.content-section h2 { max-width: 760px; margin: 0 0 28px; color: var(--text-strong); font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 500; letter-spacing: -0.025em; }
.feature-grid, .plan-grid, .platform-grid { display: grid; gap: 16px; }
.feature-grid { grid-template-columns: repeat(4, 1fr); }
.feature-card, .plan-card, .platform-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.feature-card { padding: 20px; }
.feature-card h3 { margin: 0 0 10px; color: var(--text-strong); font-size: 1.04rem; }
.feature-card p { margin: 0; color: var(--text-muted); line-height: 1.55; }

.plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-card { padding: 26px; }
.plan-card--scholar { border-color: var(--border-strong); background: linear-gradient(145deg, var(--surface-highlight), var(--surface)); }
.plan-name { margin: 0 0 8px; color: var(--accent-soft); font-weight: 700; }
.plan-price { margin: 0; color: var(--text-strong); font-size: 2.1rem; font-weight: 500; }
.plan-note, .pricing-loading, .pricing-error { color: var(--text-muted); }
.plan-card ul { margin: 22px 0 0; padding-left: 20px; color: var(--text); line-height: 1.7; }
.plan-card .primary-button { margin-top: 22px; }
.scholar-pricing { min-height: 74px; }
.scholar-price-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; }
.scholar-price { margin: 0; color: var(--text-strong); font-size: 1.75rem; font-weight: 500; }
.scholar-price span { color: var(--text-muted); font-size: 0.92rem; font-weight: 400; }
.pricing-policy { margin: 10px 0 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.pricing-error { margin: 0; color: var(--danger); }

.platform-grid { grid-template-columns: repeat(4, 1fr); }
.platform-card { display: grid; gap: 7px; padding: 20px; text-decoration: none; }
.platform-card:hover { border-color: var(--accent-soft); }
.platform-card strong { color: var(--text-strong); font-size: 1.05rem; }
.platform-card span { color: var(--text-muted); font-size: 0.9rem; }

.support-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.support-band h2 { margin-bottom: 10px; }
.support-band p:not(.section-label) { max-width: 680px; margin: 0; color: var(--text-muted); line-height: 1.55; }
.support-band__actions { margin-top: 0; flex-shrink: 0; }

.site-footer { border-top: 1px solid var(--border); background: #0d0f13; }
.site-footer__inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--text-muted); }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text-strong); }

.login-dialog { width: min(480px, calc(100% - 28px)); padding: 22px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgb(0 0 0 / 48%); }
.login-dialog::backdrop { background: rgb(0 0 0 / 66%); backdrop-filter: blur(3px); }
.login-dialog__close-row { display: flex; justify-content: flex-end; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); cursor: pointer; font-size: 1.45rem; line-height: 1; }
.login-dialog h2 { margin: 0 0 10px; color: var(--text-strong); font-size: 1.45rem; }
.dialog-copy { margin: 0 0 20px; color: var(--text-muted); line-height: 1.5; }
.login-dialog form:not(.login-dialog__close-row) { display: grid; gap: 10px; }
.login-dialog label { color: var(--text-strong); font-weight: 500; }
.login-dialog input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: #111318; color: var(--text-strong); }
.dialog-secondary-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 15px; }
.status-message { margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-raised); color: var(--text-muted); line-height: 1.4; }
.status-message.error { color: var(--danger); }

.legal-shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 72px; }
.legal-shell .brand-logo { margin-bottom: 34px; }
.legal-shell h1 { color: var(--text-strong); font-weight: 500; }
.legal-shell h2 { margin-top: 32px; color: var(--text-strong); font-size: 1.1rem; }
.legal-shell p, .legal-shell li { color: var(--text-muted); line-height: 1.65; }
.legal-shell a { color: var(--accent-soft); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 58px; }
  .product-preview { width: min(620px, 100%); }
  .feature-grid, .platform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .site-header__inner { min-height: 64px; }
  .brand-logo { width: 145px; }
  .site-nav a { display: none; }
  .hero { min-height: 0; padding: 44px 0 50px; gap: 34px; }
  .hero__copy h1 { font-size: 2.35rem; }
  .feature-grid, .plan-grid, .platform-grid { grid-template-columns: 1fr; }
  .support-band, .site-footer__inner { align-items: flex-start; flex-direction: column; }
  .site-footer__inner { padding: 24px 0; }
}


/* Public-site marketing polish. */
.hero--single { grid-template-columns: minmax(0, 760px); min-height: 470px; }
.anchor-section { scroll-margin-top: 92px; }
.nav-login-button { min-height: 40px; padding: 9px 16px; }
.plan-name { text-align: center; font-size: clamp(1.65rem, 4vw, 2.15rem); color: var(--text-strong); }
.plan-price, .plan-note { text-align: center; }
.platform-card { align-items: center; justify-items: center; min-height: 150px; text-align: center; }
.platform-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent-soft); }
.platform-icon svg { width: 48px; height: 48px; fill: currentColor; }
.footer-brand { display: inline-flex; align-items: center; }
.site-footer .brand-logo { width: 132px; height: auto; }
@media (max-width: 720px) { .anchor-section { scroll-margin-top: 78px; } .nav-login-button { width: 100%; } }