/* =========================================================================
   RequestMe — Components
   ========================================================================= */

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-s);
  font-size: var(--text-body-s);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn-lg { height: 48px; padding-inline: var(--space-6); font-size: var(--text-body); }
.btn-sm { height: 36px; padding-inline: var(--space-4); font-size: var(--text-caption); }
.btn-block { width: 100%; }

.btn-primary { background: var(--action-primary); color: var(--text-on-brand); }
.btn-primary:hover { background: var(--action-primary-hover); }

.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--text-tertiary); }

.btn-quiet { background: transparent; color: var(--text-primary); }
.btn-quiet:hover { background: var(--bg-hover); }

.btn-on-dark { background: var(--text-inverse); color: var(--grey-950); }
.btn-on-dark:hover { background: var(--brand-100); }
.btn-ghost-on-dark { background: transparent; color: var(--text-inverse); border-color: var(--border-inverse); }
.btn-ghost-on-dark:hover { background: rgba(255,255,255,0.06); }

.btn-telegram { background: #229ed9; color: #fff; }
.btn-telegram:hover { background: #1c86ba; }

.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-s); }

/* ---- Icon (inline SVG sizing helpers) -------------------------------------- */
.icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; }
.icon-lg { width: 24px; height: 24px; }
.icon-sm { width: 16px; height: 16px; }

/* ---- Navigation ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-height);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base);
}
.site-header.is-scrolled { border-bottom-color: var(--border-hairline); }

.nav-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: var(--text-heading-m); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.nav-links { display: flex; align-items: center; gap: var(--space-8); }
.nav-links a {
  font-size: var(--text-body-s); font-weight: 500; color: var(--text-secondary);
  transition: color var(--duration-fast);
  position: relative;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-primary); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--action-primary);
}

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline); color: var(--text-secondary);
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.nav-toggle { display: none; }

@media (max-width: 900px) {
  /* No backdrop blur on mobile, for two reasons that both bite hard here:
     1. A non-none backdrop-filter makes this element the containing block for
        its position:fixed descendants. The menu panel below then resolved its
        insets against this 72px-tall header instead of the viewport, computing
        to ~zero height — which is why the nav items came out clipped and
        squashed rather than as a full-height dropdown.
     2. Blurring the backdrop of a *sticky* element forces the compositor to
        re-blur every frame while scrolling, which is a well-known source of
        flicker and tearing on mobile browsers.
     Desktop keeps the glass effect, where neither problem applies. */
  .site-header { background: var(--bg-page); backdrop-filter: none; }

  .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--bg-page);
    /* An explicit height rather than `bottom: 0`, so the panel is sized off the
       viewport no matter which ancestor ends up being its containing block.
       dvh overrides vh where supported, so the panel tracks the mobile URL bar
       expanding and collapsing instead of overshooting the screen. */
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    flex-direction: column; align-items: stretch; padding: var(--space-6); gap: 0;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-links a { padding-block: var(--space-4); border-bottom: 1px solid var(--border-hairline); font-size: var(--text-body-l); }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links .nav-mobile-cta { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-bottom: none; }
  /* 44px is the minimum comfortable tap target; the icon stays 40px visually. */
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .nav-actions .btn-ghost.nav-desktop-only, .nav-actions .btn-primary.nav-desktop-only { display: none; }
  /* Stops the page behind the open menu from scrolling — which also keeps the
     header's scroll handler idle while the menu is up. */
  html.nav-open, html.nav-open body { overflow: hidden; }
}
@media (min-width: 901px) {
  .nav-mobile-cta { display: none; }
}

/* ---- Sticky mobile CTA bar -------------------------------------------------- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--bg-page);
  border-top: 1px solid var(--border-hairline);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.mobile-cta-bar.is-visible { transform: translateY(0); }
@media (max-width: 720px) { .mobile-cta-bar { display: flex; } }

/* ---- Footer ----------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-hairline); background: var(--bg-subtle); padding-block: var(--space-16) var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-8); }
.footer-brand p { color: var(--text-secondary); max-width: 32ch; margin-top: var(--space-4); }
.footer-col h4 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: var(--text-secondary); font-size: var(--text-body-s); }
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-hairline);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  color: var(--text-tertiary); font-size: var(--text-caption);
}
.lang-switch { display: flex; gap: var(--space-2); align-items: center; }
.lang-switch button { font-size: var(--text-caption); color: var(--text-tertiary); padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); }
.lang-switch button[aria-current="true"] { color: var(--text-primary); background: var(--bg-hover); font-weight: 600; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: var(--space-4); }
}

/* ---- Cards -------------------------------------------------------------------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-m);
  padding: var(--space-6);
}
.card-interactive { transition: border-color var(--duration-fast), transform var(--duration-fast); }
.card-interactive:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.icon-tile {
  width: 44px; height: 44px; border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center;
  background: var(--action-primary-tint); color: var(--action-primary);
  margin-bottom: var(--space-4);
}

/* ---- Status pill (colour + word, never colour alone) --------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-caption); font-weight: 600;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-waiting  { color: var(--status-waiting-fg);  background: var(--status-waiting-bg); }
.status-approved { color: var(--status-approved-fg); background: var(--status-approved-bg); }
.status-rejected { color: var(--status-rejected-fg); background: var(--status-rejected-bg); }
.status-returned { color: var(--status-returned-fg); background: var(--status-returned-bg); }
.status-draft    { color: var(--status-draft-fg);    background: var(--status-draft-bg); }

/* ---- The signature line — RequestMe's core visual motif ------------------------ */
.signature-line { padding-top: var(--space-4); border-top: 1px solid var(--border-strong); }
.signature-line + .signature-line { margin-top: var(--space-5); }
.signature-line .sig-name { font-weight: 600; font-size: var(--text-body); display: flex; align-items: center; gap: var(--space-2); }
.signature-line .sig-role { color: var(--text-secondary); font-size: var(--text-body-s); margin-top: 2px; }
.signature-line .sig-reason { color: var(--brass-600); font-size: var(--text-caption); margin-top: var(--space-2); font-weight: 500; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--action-primary-tint); color: var(--action-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.signature-line.is-pending { opacity: 0.45; }
.signature-line.is-signed .sig-name::after {
  content: "✓ signed"; margin-left: auto; font-size: var(--text-caption); font-weight: 600; color: var(--status-approved-fg);
  background: var(--status-approved-bg); padding: 2px 8px; border-radius: var(--radius-full);
}
/* The row the request is sitting on right now. Without this, a mid-chain
   approver rendered identically to a plain row: the signed line above had a
   badge, the not-yet-reached line below was faded, and the one person the
   request is actually waiting on carried no signal at all — on a card whose
   whole promise is "see who will sign". The amber matches the waiting status
   pill and the same state on the printable form. */
.signature-line.is-current { border-top-color: var(--status-waiting-fg); }
.signature-line.is-current .sig-name::after {
  content: "Waiting now"; margin-left: auto; font-size: var(--text-caption); font-weight: 600; color: var(--status-waiting-fg);
  background: var(--status-waiting-bg); padding: 2px 8px; border-radius: var(--radius-full);
}
/* Stand down wherever the markup supplies its own badge. The approval screen
   renders a real <span class="sig-status-badge">Your turn</span> inside the
   name, and without this guard that row would carry two badges side by side.
   Written as "does this row already have one?" rather than as a page-scoped
   override, so any future template that provides its own badge is covered
   automatically. */
.signature-line .sig-name:has(.sig-status-badge)::after { content: none; }

/* ---- Document / preview mockup card -------------------------------------------- */
.doc-mock {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-l);
  padding: var(--space-8); box-shadow: var(--shadow-elevated);
}
.doc-mock-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-hairline); }
.doc-mock-title { font-family: var(--font-serif); font-size: var(--text-heading-l); font-weight: 500; }
.doc-mock-field { display: flex; justify-content: space-between; padding-block: var(--space-2); font-size: var(--text-body-s); border-bottom: 1px dashed var(--border-hairline); }
.doc-mock-field dt { color: var(--text-secondary); }
.doc-mock-field dd { font-weight: 600; }
.doc-mock-amount { font-family: var(--font-serif); font-size: var(--text-heading-l); }
.doc-mock-signatures { margin-top: var(--space-6); }

/* ---- Browser / phone chrome frames --------------------------------------------- */
.browser-frame {
  border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--card-border);
  background: var(--card-bg); box-shadow: var(--shadow-elevated);
}
.browser-chrome { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-fill); border-bottom: 1px solid var(--border-hairline); }
.browser-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.browser-chrome .url-pill { margin-inline: auto; background: var(--bg-page); border: 1px solid var(--border-hairline); border-radius: var(--radius-full); padding: 4px 16px; font-size: var(--text-caption); color: var(--text-tertiary); }
.browser-body { padding: var(--space-6); }

.phone-frame {
  width: 300px; max-width: 100%; border-radius: 36px; border: 8px solid var(--grey-900); background: var(--grey-900);
  box-shadow: var(--shadow-elevated); overflow: hidden;
}
.phone-notch { height: 22px; background: var(--grey-900); display: flex; align-items: center; justify-content: center; }
.phone-notch::before { content: ""; width: 70px; height: 8px; border-radius: var(--radius-full); background: #000; }
.phone-screen { background: var(--card-bg); min-height: 480px; padding: var(--space-4); }

/* ---- Tabs ------------------------------------------------------------------------ */
.tabs { display: inline-flex; gap: var(--space-1); padding: 4px; background: var(--bg-fill); border-radius: var(--radius-m); }
/* Four tab labels don't fit one row under ~420px — wrap instead of forcing
   the page into horizontal scroll. */
@media (max-width: 480px) { .tabs { flex-wrap: wrap; justify-content: center; } }
.tabs button {
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-s); font-size: var(--text-body-s); font-weight: 600; color: var(--text-secondary);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.tabs button[aria-selected="true"] { background: var(--card-bg); color: var(--text-primary); box-shadow: var(--shadow-soft); }
.tab-panel[hidden] { display: none; }

/* ---- Chip selector (request types) ------------------------------------------------ */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border-hairline);
  font-size: var(--text-body-s); font-weight: 600; color: var(--text-secondary);
}
.chip[aria-selected="true"] { background: var(--action-primary); border-color: var(--action-primary); color: #fff; }

/* ---- Accordion (FAQ) ---------------------------------------------------------------- */
.accordion-item { border-bottom: 1px solid var(--border-hairline); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding-block: var(--space-5); text-align: left; font-size: var(--text-body-l); font-weight: 600;
}
.accordion-trigger .icon { transition: transform var(--duration-base) var(--ease-standard); color: var(--text-tertiary); transform: rotate(90deg); }
.accordion-trigger[aria-expanded="true"] .icon { transform: rotate(270deg); }
.accordion-panel { overflow: hidden; max-height: 0; transition: max-height var(--duration-base) var(--ease-standard); }
.accordion-panel-inner { padding-bottom: var(--space-5); color: var(--text-secondary); max-width: 68ch; }

/* ---- Pricing --------------------------------------------------------------------------- */
.billing-switch { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2); }
.switch { position: relative; width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--border-strong); flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--duration-fast); }
.switch[aria-checked="true"] { background: var(--action-primary); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.save-badge { font-size: var(--text-caption); font-weight: 700; color: var(--status-approved-fg); background: var(--status-approved-bg); padding: 2px 8px; border-radius: var(--radius-full); }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: stretch; }
.plan-card { display: flex; flex-direction: column; padding: var(--space-6); border-radius: var(--radius-l); border: 1px solid var(--card-border); background: var(--card-bg); }
.plan-card.is-featured { border-color: var(--action-primary); box-shadow: 0 0 0 1px var(--action-primary), var(--shadow-elevated); position: relative; }
.plan-featured-tag { position: absolute; top: -13px; left: var(--space-6); background: var(--action-primary); color: #fff; font-size: var(--text-caption); font-weight: 700; padding: 3px 12px; border-radius: var(--radius-full); }
.plan-name { font-weight: 600; font-size: var(--text-heading-m); }
.plan-audience { color: var(--text-secondary); font-size: var(--text-body-s); margin-top: var(--space-2); min-height: 40px; }
.plan-price { display: flex; align-items: baseline; gap: var(--space-1); margin-block: var(--space-5); font-family: var(--font-serif); }
.plan-price .amount { font-size: 2.5rem; }
.plan-price .period { color: var(--text-tertiary); font-size: var(--text-body-s); font-family: var(--font-sans); }
.plan-users { font-size: var(--text-caption); color: var(--text-tertiary); margin-top: -12px; margin-bottom: var(--space-4); }

/* The one-time setup fee sits apart from the monthly figure so the two are
   never read as one number. */
.plan-setup {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
  border-radius: var(--radius-s);
  background: var(--bg-fill); border: 1px solid var(--border-hairline);
}
.plan-setup-label { font-size: var(--text-caption); color: var(--text-secondary); }
.plan-setup-value { font-weight: 600; font-size: var(--text-body-s); color: var(--text-primary); white-space: nowrap; }
.plan-card.is-featured .plan-setup { background: color-mix(in srgb, var(--action-primary) 7%, transparent); border-color: color-mix(in srgb, var(--action-primary) 22%, transparent); }
.plan-features { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-6); flex: 1; }
.plan-features li { display: flex; gap: var(--space-2); font-size: var(--text-body-s); align-items: flex-start; }
.plan-features .icon { color: var(--action-primary); margin-top: 2px; }

@media (max-width: 1100px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ---- Stat tiles ------------------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stat-tile .stat-value { font-family: var(--font-serif); font-size: var(--text-display-m); }
.stat-tile .stat-label { color: var(--text-secondary); font-size: var(--text-body-s); margin-top: var(--space-1); }
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr 1fr; } }

/* ---- Testimonial ------------------------------------------------------------------------ */
.testimonial-card { display: flex; flex-direction: column; gap: var(--space-5); }
.testimonial-quote { font-family: var(--font-serif); font-size: var(--text-heading-m); font-weight: 500; line-height: 1.5; }
.testimonial-person { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-fill); }
.testimonial-stat { font-size: var(--text-caption); font-weight: 700; color: var(--action-primary); background: var(--action-primary-tint); padding: 3px 10px; border-radius: var(--radius-full); align-self: flex-start; }

/* ---- Forms ------------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-body-s); font-weight: 600; }
.field .hint { font-size: var(--text-caption); color: var(--text-tertiary); }
.field input, .field select, .field textarea {
  height: 44px; padding-inline: var(--space-4); border-radius: var(--radius-s);
  border: 1px solid var(--border-strong); background: var(--bg-page); color: var(--text-primary); font-size: 16px;
}
.field textarea { height: auto; padding-block: var(--space-3); resize: vertical; min-height: 96px; font-size: var(--text-body); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--action-primary); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* ---- Misc badges / trust bar ---------------------------------------------------------------- */
.trust-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-s); color: var(--text-secondary); }
.trust-item .icon { color: var(--action-primary); }
@media (max-width: 720px) { .trust-bar { grid-template-columns: 1fr; } }

.divider { height: 1px; background: var(--border-hairline); border: none; }

/* ---- Touch targets ---------------------------------------------------------------
   Gated on (pointer: coarse) rather than a width breakpoint, because the thing
   that decides how big a control needs to be is the input device, not the
   viewport — a 1024px tablet needs these, a 700px desktop window does not.
   Desktop keeps its tighter, denser proportions untouched.
   44px is the smallest target a fingertip hits reliably on the first try. */
@media (pointer: coarse) {
  .btn-sm { height: 44px; padding-inline: var(--space-5); }
  .btn-icon { width: 44px; height: 44px; }
  .tabs button { min-height: 44px; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  /* The gap moves inside the links, so each one becomes a full-height row
     instead of a short label with dead space above and below it. */
  .footer-col ul { gap: 0; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; }
}

.back-to-top {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 80;
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg-inverse); color: var(--text-inverse);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-elevated);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--duration-base), transform var(--duration-base);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---- Skip link (a11y) ------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 200;
  background: var(--action-primary); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-s); transition: top var(--duration-fast);
}
.skip-link:focus { top: var(--space-4); }