@import url("/css/tokens.css?v=20261110-midnight-1");

/* Friday public design system. Scoped to .fd-ui to preserve client/admin screens. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
body.fd-ui {
  /* Mask glyphs for list markers (painted with currentColor). */
  --fd-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
  --fd-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E");
  /* Compatibility aliases for existing components and API-rendered content. */
  --bg-1: var(--fd-bg); --bg-2: var(--fd-bg-alt); --bg-deep: #090d13;
  --surface-1: var(--fd-surface); --surface-2: var(--fd-surface-hover); --surface-3: var(--fd-surface-hover);
  --surface-solid: var(--fd-surface); --surface-solid-2: var(--fd-surface-hover);
  --text: var(--fd-text); --text-secondary: var(--fd-secondary);
  --muted: var(--fd-muted); --text-faint: var(--fd-muted);
  --border: var(--fd-border); --border-strong: var(--fd-border-strong);
  --border-soft: var(--fd-border); --hairline: var(--fd-border);
  --accent: var(--fd-accent); --accent-1: var(--fd-accent); --accent-2: var(--fd-accent-hover);
  --accent-3: var(--fd-link); --accent-primary: var(--fd-accent); --accent-blue: var(--fd-link);
  --accent-grad: var(--fd-accent); --accent-ring: var(--fd-focus);
  --success: var(--fd-success); --warning: var(--fd-warning); --danger: var(--fd-danger);
  --line: var(--fd-border); --card: var(--fd-surface); --soft: var(--fd-link); --ok: var(--fd-success);
  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 10px; --r-xl: 12px;
  --shadow: 0 4px 16px #0002; --shadow-sm: 0 1px 3px #0002;
  --shadow-lg: 0 12px 32px #0004; --shadow-glow: none; --shadow-inset: none;
  --t: var(--fd-transition); --t-fast: var(--fd-transition);
  color-scheme: dark;
  margin: 0;
  background: var(--fd-bg);
  color: var(--fd-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.fd-ui *, .fd-ui *::before, .fd-ui *::after { box-sizing: border-box; }
.fd-ui :is(button, input, select, textarea) { font: inherit; }
.fd-ui :is(h1, h2, h3, h4) { color: var(--fd-text); font-weight: 600; text-wrap: balance; }
.fd-ui h1 { font-size: var(--fd-h1); line-height: 1.12; letter-spacing: -.03em; }
.fd-ui h2 { font-size: var(--fd-h2); line-height: 1.22; letter-spacing: -.024em; }
.fd-ui h3 { font-size: var(--fd-h3); line-height: 1.4; letter-spacing: -.014em; }
.fd-ui h4 { font-size: var(--fd-h4); line-height: 1.5; }
.fd-ui :is(p, li, h1, h2, h3, td, th, label) { overflow-wrap: break-word; }
.fd-ui :is(main, section, article, form) { min-width: 0; }
.fd-ui img { max-width: 100%; height: auto; }
.fd-ui a { color: inherit; text-decoration: none; }
.fd-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fd-focus);
  outline-offset: 4px;
}
.fd-ui :is(main, section, [id]) { scroll-margin-top: 100px; }
.fd-ui [hidden] { display: none !important; }
.fd-ui #stars-container { display: none; }
.fd-ui .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fd-ui .fd-skip-link {
  position: fixed; z-index: 2000; left: 16px; top: 12px; padding: 10px 16px;
  background: var(--fd-text); color: var(--fd-bg); border-radius: 6px; transform: translateY(-160%);
}
.fd-ui .fd-skip-link:focus { transform: translateY(0); }
.fd-ui .animate { opacity: 1; transform: none; animation: none; transition: none; }

/* Controls: 44px targets, a stable footprint and restrained state changes. */
.fd-ui :is(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-destructive, .btn-red,
  .btn-icon, .btn-discord, .cui-btn, .mail-price-cta :where(a), .stripe-btn, .fd-button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; max-width: 100%; padding: 11px 18px;
  border: 1px solid transparent; border-radius: var(--fd-radius);
  font-family: inherit; font-size: .875rem; font-weight: 550; line-height: 1.4;
  letter-spacing: -.01em; text-align: center; text-decoration: none;
  cursor: pointer; box-shadow: none; text-shadow: none; filter: none;
  transform: none; white-space: normal;
  transition: background-color var(--fd-transition), border-color var(--fd-transition), color var(--fd-transition);
}
.fd-ui :is(.btn, .btn-primary, .cui-btn--primary, .mail-price-cta :where(a), .stripe-btn, .fd-button--primary) {
  background: var(--fd-accent); border-color: var(--fd-accent); color: #fff;
}
.fd-ui :is(.btn, .btn-primary, .cui-btn--primary, .mail-price-cta :where(a), .stripe-btn, .fd-button--primary):hover {
  background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); color: #fff;
  transform: none; box-shadow: none; filter: none;
}
.fd-ui :is(.btn-secondary, .btn-discord, .fd-button--secondary) {
  background: var(--fd-surface-hover); border-color: var(--fd-border-strong); color: var(--fd-text);
}
.fd-ui :is(.btn-outline, .btn.ghost, .fd-button--outline) {
  background: transparent; border-color: var(--fd-border-strong); color: var(--fd-text);
}
.fd-ui :is(.btn-secondary, .btn-discord, .btn-outline, .btn.ghost, .fd-button--secondary, .fd-button--outline):hover {
  background: var(--fd-surface-hover); border-color: #6c819b; color: #fff;
}
.fd-ui :is(.btn-ghost, .btn-icon, .fd-button--ghost) {
  background: transparent; border-color: transparent; color: var(--fd-secondary);
}
.fd-ui :is(.btn-ghost, .btn-icon, .fd-button--ghost):hover {
  background: var(--fd-surface-hover); border-color: transparent; color: #fff;
}
.fd-ui :is(.btn-destructive, .btn-red, .fd-button--destructive) {
  color: var(--fd-danger); background: #321c22; border-color: #73414a;
}
.fd-ui :is(.btn-destructive, .btn-red, .fd-button--destructive):hover {
  color: #fff; background: #8e2938; border-color: #a63d4b;
}
.fd-ui :is(.btn-icon, .fd-button--icon) { width: 44px; padding: 8px; flex-shrink: 0; }
.fd-ui :is(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-red, .btn-destructive, .btn-icon, .fd-button):active {
  transform: translateY(1px);
}
.fd-ui :is(button, .btn, .fd-button):is(:disabled, [aria-disabled="true"], .disabled) {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.fd-ui :is(.btn, .fd-button) svg { width: 16px; height: 16px; flex: none; }
.fd-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]), select, textarea) {
  max-width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px;
  color: var(--fd-text); background: var(--fd-bg); border: 1px solid var(--fd-border-strong);
  border-radius: 6px; box-shadow: none; line-height: 1.5; font-size: .9375rem;
  transition: border-color var(--fd-transition);
}
.fd-ui :is(input, select, textarea):focus {
  border-color: var(--fd-focus); box-shadow: 0 0 0 3px #91b9ff20;
}
.fd-ui ::placeholder { color: var(--fd-muted); opacity: 1; }
.fd-ui input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #101720 inset; -webkit-text-fill-color: var(--fd-text);
}
.fd-ui :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--fd-accent); }
.fd-ui label { font-size: .875rem; font-weight: 500; }
.fd-ui select option { background: var(--fd-bg-alt); color: var(--fd-text); }

/* Public shell: matches the existing JavaScript breakpoint of 1240px. */
body.fd-ui.has-fixed-header { padding-top: 76px; }
.fd-ui .site-header {
  /* Same left/right edges as the page container. */
  height: 76px; padding: 12px max(var(--fd-gutter), calc((100vw - var(--fd-container)) / 2 + var(--fd-gutter)));
  gap: 16px; background: var(--fd-bg); border-bottom: 1px solid var(--fd-border);
  box-shadow: none; backdrop-filter: none; font-family: inherit;
}
.fd-ui .site-header .logo { gap: 8px; }
.fd-ui .site-header .logo img { width: 38px; height: 42px; object-fit: contain; filter: none; }
.fd-ui .site-header .logo .logo-name { font-size: 1.2rem; letter-spacing: -.025em; font-weight: 650; }
.fd-ui .site-header .logo .logo-pro { color: var(--fd-muted); font-size: .65em; }
.fd-ui .site-header nav { gap: 1px; }
.fd-ui .site-header nav > a, .fd-ui .site-header nav > .dropdown > a {
  min-height: 40px; padding: 8px 10px; color: var(--fd-secondary); font-size: .8125rem; font-weight: 500;
}
.fd-ui .site-header nav a:hover, .fd-ui .site-header nav a[aria-current="page"] {
  color: #fff; background: #ffffff06;
}
.fd-ui .site-header .espace-link--bar { font-size: .8125rem; font-weight: 500; color: var(--fd-secondary); }
.fd-ui .site-header #loginBtn { background: var(--fd-surface-hover); border-color: var(--fd-border-strong); color: var(--fd-text); box-shadow: none; min-height: 40px; padding: 9px 14px; font-size: .8125rem; }
.fd-ui .site-header .dropdown-menu {
  min-width: 224px; padding: 6px; background: var(--fd-surface); border: 1px solid var(--fd-border-strong);
  border-radius: 8px; box-shadow: 0 12px 32px #0004;
}
.fd-ui .site-header .dropdown-menu a { min-height: 40px; padding: 10px 12px; font-size: .8125rem; font-weight: 450; border-radius: 4px; }
.fd-ui .site-header .dropdown-menu a:hover { background: var(--fd-surface-hover); color: #fff; }
.fd-ui .site-header .menu-toggle {
  width: 44px; height: 44px; padding: 10px; border: 1px solid var(--fd-border); border-radius: 6px;
  color: var(--fd-text); background: transparent; box-shadow: none; font-size: 1.3rem;
}
.fd-ui footer {
  padding: 56px var(--fd-gutter) 24px; margin: 0; border-top: 1px solid var(--fd-border);
  background: #0a0e14; box-shadow: none; color: var(--fd-secondary);
}
.fd-ui footer::before, .fd-ui footer::after { display: none; }
.fd-ui .footer-content {
  display: grid; grid-template-columns: 1.8fr 1fr 1.2fr 1fr; gap: 40px;
  max-width: calc(var(--fd-container) - 2 * var(--fd-gutter)); margin: 0 auto 40px; padding: 0;
}
.fd-ui .footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; gap: 12px; }
.fd-ui .footer-brand-logo { width: 40px; height: 44px; object-fit: contain; filter: none; }
.fd-ui .footer-brand-title { font-size: 1.25rem; color: #fff; letter-spacing: -.04em; font-weight: 600; }
.fd-ui .footer-description { font-size: .8125rem; line-height: 1.7; max-width: 31ch; margin-top: 12px; color: var(--fd-muted); }
.fd-ui .footer-heading { font-size: .8125rem; font-weight: 600; margin: 0 0 16px; color: #fff; }
.fd-ui .footer-heading::after { display: none; }
.fd-ui .footer-links { list-style: none; padding: 0; margin: 0; }
.fd-ui .footer-links li { margin: 0; }
.fd-ui .footer-links a { display: inline-block; padding: 5px 0; font-size: .8125rem; color: var(--fd-secondary); }
.fd-ui .footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; transform: none; }
.fd-ui .social-links { margin-top: 16px; }
.fd-ui .social-link { border-radius: 6px; width: 36px; height: 36px; background: transparent; border: 1px solid var(--fd-border); box-shadow: none; color: var(--fd-secondary); transition: border-color var(--fd-transition), color var(--fd-transition); }
.fd-ui .social-link:hover { background: transparent; border-color: var(--fd-border-strong); color: #fff; }
.fd-ui .social-link svg { width: 18px; height: 18px; }
.fd-ui .copyright { max-width: calc(var(--fd-container) - 2 * var(--fd-gutter)); margin: 0 auto; padding: 20px 0 0; text-align: left; font-size: .75rem; color: var(--fd-muted); border-top: 1px solid var(--fd-border); }
.fd-ui #cookie-banner { background: var(--fd-surface); border-color: var(--fd-border-strong); box-shadow: 0 -4px 20px #0002; font-family: inherit; }
.fd-ui #cookie-banner button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--fd-border-strong); border-radius: 6px; font: 550 .875rem/1.4 "Inter", sans-serif; color: #fff; background: #253143; box-shadow: none; }
.fd-ui #cookie-banner button:first-child { background: var(--fd-accent); border-color: var(--fd-accent); }
.fd-ui #cookie-banner a { color: var(--fd-link); }
.fd-ui .fd-notice { font-family: inherit; background: var(--fd-surface); border-color: var(--fd-border-strong); border-radius: 8px; }

/* Shared public content. Specific layouts are in public-pages.css / home.css. */
.fd-ui :is(.page, .wrap, .mail-page, .dp-page, .faq-page, .arts, .guide-page) {
  width: 100%; max-width: var(--fd-container); margin-inline: auto; padding-inline: var(--fd-gutter);
}
.fd-ui :is(.section-heading, .h2) { padding: 0; font-size: var(--fd-h2); font-weight: 600; line-height: 1.22; letter-spacing: -.024em; text-align: left; }
.fd-ui :is(.section-heading, .h2)::after { display: none; }
.fd-ui :is(.eyebrow, .fd-eyebrow, .hero-badge, .mail-kicker, .faq-kicker, .intro-badge, .biz-cta-kicker, .cta-band-eyebrow) {
  display: block; padding: 0; margin: 0 0 18px; color: var(--fd-link); background: none;
  border: 0; border-radius: 0; box-shadow: none; text-align: left;
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase;
}
.fd-ui .hero-badge::before { display: none; }
.fd-ui :is(.lead, .hero-description) { color: var(--fd-secondary); font-size: 1rem; line-height: 1.75; max-width: 60ch; }
.fd-ui :is(.card, .plan, .pack-card, .mail-price-card, .art-card) {
  border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); box-shadow: none; backdrop-filter: none;
}
.fd-ui :is(.card, .plan, .pack-card, .mail-price-card, .art-card):hover {
  transform: none; box-shadow: none; border-color: var(--fd-border-strong);
}
.fd-ui :is(.price, .amount, .mail-price, .review-score) { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.fd-ui :is(.table-wrapper, .free-table-wrap) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.fd-ui :is(.table-wrapper, .free-table-wrap):focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 4px; }
.fd-ui :is(.biz-cta, .final) { background: var(--fd-bg-alt); border: 1px solid var(--fd-border); border-radius: 8px; box-shadow: none; }
.fd-ui .biz-cta { padding: 28px; margin-top: 40px; }
.fd-ui .biz-cta > div:first-child { flex-basis: 320px; min-width: 0; }
.fd-ui .biz-cta h2 { font-size: 1.4rem; }
.fd-ui .biz-cta-kicker { margin-bottom: 8px; }
.fd-ui .biz-cta-actions { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 1240px) {
  body.fd-ui.has-fixed-header { padding-top: 68px; }
  .fd-ui .site-header { height: 68px; padding: 10px var(--fd-gutter); gap: 12px; }
  .fd-ui .site-header nav { top: 100%; padding: 16px var(--fd-gutter); max-height: calc(100dvh - 68px); background: var(--fd-bg-alt); border-bottom: 1px solid var(--fd-border); border-radius: 0; }
  .fd-ui .site-header nav > a, .fd-ui .site-header nav > .dropdown > a { font-size: .9375rem; min-height: 44px; }
  .fd-ui .site-header nav .dropdown-menu { min-width: 0; width: auto; margin: 0 0 8px 12px; background: transparent; border: 0; border-left: 1px solid var(--fd-border-strong); border-radius: 0; box-shadow: none; }
}
@media (max-width: 800px) {
  .fd-ui .footer-content { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fd-ui .footer-brand { grid-column: 1 / -1; }
  .fd-ui .footer-description { max-width: 50ch; }
}
@media (max-width: 600px) {
  .fd-ui { --fd-gutter: 20px; }
  .fd-ui h1 { font-size: clamp(1.9rem, 8vw, 2.65rem); }
  .fd-ui :is(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-icon, .btn-discord, .fd-button, .mail-price-cta :where(a)) { min-height: 44px; }
  .fd-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
  .fd-ui .site-header { padding-inline: 16px; gap: 8px; }
  .fd-ui .site-header .logo img { width: 30px; height: 36px; }
  .fd-ui .site-header .logo .logo-name { display: inline-flex; font-size: 1.05rem; }
  .fd-ui .site-header #loginBtn { padding-inline: 12px; min-height: 40px; }
  .fd-ui .site-header #auth-btn-placeholder { margin-left: auto; max-width: calc(100vw - 156px); }
  .fd-ui .biz-cta { padding: 20px; }
  .fd-ui .biz-cta-actions { width: 100%; }
}

/* State styling is driven by the existing form scripts; it never submits or disables controls. */
.fd-ui :is(.btn, .fd-button, .btn-primary, .btn-secondary)[aria-busy="true"] {
  cursor: progress;
}
.fd-ui :is(.btn, .fd-button, .btn-primary, .btn-secondary)[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: fd-button-loading 800ms linear infinite;
}
@keyframes fd-button-loading { to { transform: rotate(360deg); } }
.fd-ui :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--fd-danger); }
.fd-ui :is(.field-error, .error-message) { color: var(--fd-danger); font-size: var(--fd-small); }
.fd-ui :is(.btn, .fd-button, button):disabled:hover { transform: none; box-shadow: none; }
.fd-ui .site-header .dropdown-menu a:focus-visible { outline-offset: -2px; }
.fd-ui .site-header #loginBtn { border-radius: var(--fd-radius); }
.fd-ui .site-header .logo-name { letter-spacing: -.04em; }
.fd-ui ::selection { background: #3478f655; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fd-ui *, .fd-ui *::before, .fd-ui *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .fd-ui :is(.btn, button, input, select, textarea, .card, .plan) { border: 1px solid ButtonText; }
}

/* Disclosure states shared by pointer and keyboard navigation. */
.fd-ui .site-header .dropdown.open > .dropdown-menu { display: flex; }
.fd-ui .site-header .dropdown.fd-menu-dismissed:focus-within > .dropdown-menu { display: none; }