@import url("novelight-plan-badges.css");

/* NOVELIGHT brand refinement for public dark surfaces.
   Uses the existing approved logo asset; no replacement or generated artwork. */
body.novelight-public-dark {
  --brand-display-font: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "Noto Serif CJK JP", Georgia, "Times New Roman", serif;
  --brand-reading-font: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "Noto Serif CJK JP", Georgia, serif;
  font-family: var(--brand-reading-font);
  font-size: 16px;
  letter-spacing: 0.015em;
}

body.novelight-public-dark h1,
body.novelight-public-dark h2,
body.novelight-public-dark h3,
body.novelight-public-dark .site-nav a,
body.novelight-public-dark .btn,
body.novelight-public-dark button,
body.novelight-public-dark .name,
body.novelight-public-dark .plan-name,
body.novelight-public-dark .price,
body.novelight-public-dark .section-kicker,
body.novelight-public-dark .eyebrow {
  font-family: var(--brand-display-font);
}

/* Header: keep the approved book-and-light logo exact, but adapt its white artwork
   cleanly to the dark header without redrawing or replacing the asset. */
body.novelight-public-dark .public-header-inner {
  width: min(1380px, calc(100% - 48px));
  min-height: 90px;
  gap: 34px;
}
body.novelight-public-dark .logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  min-width: 250px;
  overflow: hidden;
  line-height: 0;
}
body.novelight-public-dark .logo img,
body.novelight-public-dark .novelight-brand-logo-image {
  display: block;
  width: auto;
  height: 58px;
  max-width: 270px;
  object-fit: contain;
  object-position: left center;
  filter: invert(1) sepia(.78) saturate(3.2) hue-rotate(348deg) brightness(1.24) contrast(1.04);
  mix-blend-mode: screen;
}
body.novelight-public-dark .site-nav {
  gap: 30px;
}
body.novelight-public-dark .site-nav a {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .035em;
}
body.novelight-public-dark .site-nav a[aria-current="page"]::after {
  bottom: 15px;
  height: 2px;
  box-shadow: 0 0 10px rgba(240,203,114,.42);
}
body.novelight-public-dark .header-actions {
  gap: 11px;
}
body.novelight-public-dark .header-search {
  width: 44px;
  height: 44px;
  font-size: 28px;
}
body.novelight-public-dark .btn {
  min-height: 46px;
  padding: 10px 19px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .025em;
}

/* Public typography: raise the reading floor instead of leaving tiny UI copy. */
body.novelight-public-dark .eyebrow,
body.novelight-public-dark .section-kicker {
  font-size: 13px;
  letter-spacing: .17em;
}
body.novelight-page-index.novelight-public-dark .hero p {
  font-size: 17px;
}
body.novelight-public-dark .shelf-head h2,
body.novelight-public-dark .section-head h2 {
  font-size: clamp(28px, 3vw, 38px);
}
body.novelight-public-dark .shelf-head p,
body.novelight-public-dark .section-head p {
  font-size: 15px;
  line-height: 1.8;
}
body.novelight-public-dark .shelf-more {
  font-size: 14px;
}
body.novelight-public-dark .novel-title {
  font-family: var(--brand-display-font);
  font-size: 15px;
}
body.novelight-public-dark .novel-author {
  font-size: 12px;
}
body.novelight-public-dark .meta,
body.novelight-public-dark .genre {
  font-size: 11px;
}
body.novelight-public-dark .feature h3 {
  font-family: var(--brand-display-font);
  font-size: 19px;
}
body.novelight-public-dark .feature p {
  font-size: 14px;
}
body.novelight-public-dark .cta p {
  font-size: 15px;
}
body.novelight-public-dark .footer-inner {
  font-size: 12px;
}

/* Pricing: stronger hierarchy and less line-heavy separation. */
body.novelight-page-pricing.novelight-public-dark .pricing-main {
  width: min(1280px, calc(100% - 48px));
  padding-bottom: 88px;
}
body.novelight-page-pricing.novelight-public-dark .pricing-hero {
  padding: 72px 0 42px;
  border-bottom: 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(214,164,71,.08), transparent 31%),
    radial-gradient(circle at 80% 22%, rgba(39,73,118,.13), transparent 28%);
  text-align: center;
}
body.novelight-page-pricing .pricing-hero h1 {
  margin: 4px 0 10px;
  font-size: clamp(48px,5.2vw,68px);
  font-weight: 700;
  letter-spacing: .055em;
  text-shadow: 0 0 24px rgba(214,164,71,.08);
}
body.novelight-page-pricing .pricing-lead {
  margin: 0 0 12px;
  font-size: clamp(21px,2.2vw,28px);
  font-weight: 600;
  letter-spacing: .04em;
}
body.novelight-page-pricing .pricing-sub {
  max-width: 820px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.9;
}
body.novelight-page-pricing.novelight-public-dark .pricing-plans {
  gap: 22px;
  padding-top: 68px;
}
body.novelight-page-pricing.novelight-public-dark .pricing-card {
  min-height: 720px;
  padding: 42px 30px 30px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 3%, rgba(55,91,139,.11), transparent 30%),
    linear-gradient(180deg,#091728 0%,#07121f 100%);
}
body.novelight-page-pricing .pricing-card.standard {
  border: 2px solid #e0aa3a;
  background:
    radial-gradient(circle at 50% 10%, rgba(214,164,71,.15), transparent 33%),
    radial-gradient(circle at 50% 35%, rgba(38,73,119,.12), transparent 40%),
    linear-gradient(180deg,#0c1d32 0%,#071321 100%);
  box-shadow: 0 0 0 1px rgba(240,203,114,.13), 0 0 38px rgba(214,164,71,.19), 0 22px 46px rgba(0,0,0,.34);
}
body.novelight-page-pricing .recommendation-ribbon {
  top: -20px;
  min-width: 154px;
  padding: 9px 25px;
  border: 1px solid rgba(255,224,137,.55);
  border-radius: 5px 5px 13px 13px;
  background: linear-gradient(180deg,#f3cf70 0%,#d49727 100%);
  box-shadow: 0 7px 20px rgba(0,0,0,.32), 0 0 20px rgba(214,164,71,.18);
  font-size: 14px;
  letter-spacing: .08em;
}

body.novelight-page-pricing .name {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: .035em;
}
body.novelight-page-pricing .desc {
  min-height: 52px;
  margin: 9px 0 20px;
  font-size: 14px;
  line-height: 1.8;
}
body.novelight-public-dark .beta-label {
  margin-top: 9px;
  padding: 5px 10px;
  font-size: 12px;
}
body.novelight-public-dark .original-price,
body.novelight-public-dark .old-price {
  margin-top: 9px;
  color: #a6afbb;
  font-size: 13px;
  text-decoration: none;
}
body.novelight-page-pricing .price {
  margin: 4px 0 16px;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: .015em;
}
body.novelight-page-pricing .price small {
  font-size: 14px;
}
body.novelight-page-pricing .renewal {
  min-height: 25px;
  margin: 7px 0 14px;
  font-size: 12px;
  line-height: 1.7;
}
body.novelight-page-pricing .limit {
  margin-bottom: 17px;
  font-size: 14px;
}
body.novelight-page-pricing .features {
  margin-bottom: 28px;
}
body.novelight-page-pricing .features li {
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.65;
}
body.novelight-page-pricing .features li::before {
  margin-right: 8px;
  font-size: 15px;
}
body.novelight-page-pricing button {
  min-height: 56px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .025em;
}
body.novelight-page-pricing .billing {
  margin-top: 40px;
  padding: 28px 30px;
  font-size: 13px;
  line-height: 1.9;
}
body.novelight-page-pricing .billing strong {
  font-family: var(--brand-display-font);
  font-size: 17px;
}
body.novelight-page-pricing .legal {
  gap: 18px;
  font-size: 13px;
}
body.novelight-page-pricing .status {
  font-size: 14px;
}

/* Keep the home pricing preview visually consistent with the full pricing page. */
body.novelight-page-index.novelight-public-dark .plan-name {
  font-size: 26px;
}
body.novelight-page-index.novelight-public-dark .price {
  font-size: 40px;
}
body.novelight-page-index.novelight-public-dark .plan ul {
  font-size: 14px;
}
body.novelight-page-index.novelight-public-dark .plan-note {
  font-size: 13px;
}
body.novelight-page-index.novelight-public-dark .plan-cta {
  min-height: 48px;
  font-size: 14px;
}

@media (max-width: 1180px) {
  body.novelight-public-dark .public-header-inner { gap: 20px; }
  body.novelight-public-dark .logo { min-width: 218px; }
  body.novelight-public-dark .logo img,
  body.novelight-public-dark .novelight-brand-logo-image { height: 50px; max-width: 230px; }
  body.novelight-public-dark .desktop-nav { gap: 18px; }
  body.novelight-public-dark .desktop-nav a { font-size: 14px; }
  body.novelight-public-dark .btn { padding-inline: 14px; font-size: 14px; }
}

@media (max-width: 900px) {
  body.novelight-public-dark .public-header-inner { min-height: 76px; }
  body.novelight-public-dark .logo { min-width: 0; }
  body.novelight-public-dark .logo img,
  body.novelight-public-dark .novelight-brand-logo-image { height: 46px; max-width: 250px; }
  body.novelight-page-pricing.novelight-public-dark .pricing-plans { gap: 34px; }
  body.novelight-page-pricing.novelight-public-dark .pricing-card { min-height: 0; }
}

@media (max-width: 640px) {
  body.novelight-public-dark { font-size: 15px; }
  body.novelight-public-dark .public-header-inner { min-height: 68px; }
  body.novelight-public-dark .logo img,
  body.novelight-public-dark .novelight-brand-logo-image { height: 40px; max-width: 56vw; }
  body.novelight-page-pricing.novelight-public-dark .pricing-main { width: min(100% - 28px, 1280px); }
  body.novelight-page-pricing.novelight-public-dark .pricing-hero { padding: 52px 0 28px; }
  body.novelight-page-pricing .pricing-hero h1 { font-size: clamp(40px,12vw,54px); }
  body.novelight-page-pricing .pricing-lead { font-size: 20px; }
  body.novelight-page-pricing .pricing-sub { font-size: 14px; }
  body.novelight-page-pricing.novelight-public-dark .pricing-card { padding: 36px 23px 25px; }
  body.novelight-page-pricing .name { font-size: 29px; }
  body.novelight-page-pricing .price { font-size: 46px; }
  body.novelight-page-pricing .features li { font-size: 14px; }
  body.novelight-page-pricing button { font-size: 14px; }
  body.novelight-public-dark .shelf-head p,
  body.novelight-public-dark .section-head p { font-size: 14px; }
  body.novelight-public-dark .novel-title { font-size: 14px; }
}

@media (max-width: 380px) {
  body.novelight-public-dark .logo img,
  body.novelight-public-dark .novelight-brand-logo-image { max-width: 62vw; }
}

/* Keep the native mobile details menu in a predictable, clickable layer. */
@media (max-width: 900px) {
  body.novelight-public-dark .public-header-inner {
    display: flex;
    align-items: center;
  }
  body.novelight-public-dark .header-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }
  body.novelight-public-dark .mobile-menu {
    position: relative;
    z-index: 60;
  }
  body.novelight-public-dark .mobile-menu:not([open]) > nav {
    display: none;
  }
  body.novelight-public-dark .mobile-menu[open] > nav {
    z-index: 70;
    display: grid;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}