/* ============================================================================
   TempMail.now — modern theme layer (green / black / white)
   Loaded AFTER Tailwind 2.x + FontAwesome so it overrides utility classes.
   Design language inspired by PDFBEAR (clean fixed header, card system,
   Bootstrap-icon look) recoloured to a temp-mail green palette.
   No JS hooks are changed — this file only restyles existing elements.
   ========================================================================= */

:root {
  --brand:      #12B981;   /* emerald */
  --brand-600:  #0EA06A;   /* hover   */
  --brand-700:  #0B7E52;
  --brand-050:  #EAFBF3;   /* tint bg */
  --brand-100:  #CFF5E3;
  --ink:        #0C1512;   /* near-black headings */
  --ink-700:    #24332D;
  --body:       #3B4A44;   /* body text */
  --muted:      #6B7B75;
  --line:       #E4EBE8;   /* borders */
  --bg:         #FFFFFF;   /* page background (pure white) */
  --card:       #FFFFFF;
  --danger:     #E5484D;
  --danger-bg:  #FDECEC;
  --shadow-sm:  0 1px 2px rgba(6,40,28,.06);
  --shadow:     0 8px 24px rgba(6,40,28,.07);
  --shadow-lg:  0 22px 48px rgba(6,40,28,.12);
  --radius:     14px;
  --radius-lg:  20px;
}

/* ----- Base ------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body,
body.bg-white {
  background: var(--bg) !important;
  color: var(--body);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; }
p { color: var(--body); }

a { color: var(--brand-700); }
a:hover { color: var(--brand-600); }

::selection { background: var(--brand-100); color: var(--ink); }

/* Slightly wider, more breathable main column */
.max-w-6xl { max-width: 76rem !important; }

/* The white "content card" that wraps every page: let it be transparent so
   our own section styling shows through (it was a flat white slab). */
.max-w-6xl > .w-full.bg-white.rounded-lg {
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================================
   HEADER / NAV  (was <nav class="bg-black">)
   ========================================================================= */
nav.bg-black {
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(6,40,28,.02), 0 6px 24px rgba(6,40,28,.05) !important;
  position: sticky; top: 0; z-index: 3050;
}
nav.bg-black > .max-w-6xl > .flex.justify-between { height: 66px !important; align-items: center; }

/* Brand wordmark + logo */
nav.bg-black .logo-container a { gap: .55rem; }
nav.bg-black .site-wordmark,
nav.bg-black .logo-container span {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  font-size: 1.4rem;
}
.now-accent { color: var(--brand); }
nav.bg-black .logo-container span.now-accent,
nav.bg-black .logo-container span .now-accent { color: var(--brand) !important; }
nav.bg-black .brand-mark { width: 34px; height: 34px; display: block; }

/* Nav links */
nav.bg-black .hidden.md\:flex a,
nav.bg-black .hidden.md\:flex button {
  color: var(--ink-700) !important;
  font-weight: 600;
  font-size: .95rem;
  border-radius: 9px;
}
nav.bg-black .hidden.md\:flex > a:hover,
nav.bg-black .features-button-container:hover { color: var(--brand-700) !important; }
nav.bg-black .hidden.md\:flex > a:hover { background: var(--brand-050); }
nav.bg-black .features-link { color: inherit !important; }

/* Tweet / share pill -> tidy outline button */
nav.bg-black a[href*="twitter.com/intent"] {
  border: 1px solid var(--line) !important;
  color: var(--ink-700) !important;
  border-radius: 10px !important;
  padding: .4rem .8rem !important;
}
nav.bg-black a[href*="twitter.com/intent"]:hover { background: #fff; border-color: #1DA1F2 !important; }
nav.bg-black a[href*="twitter.com/intent"]:hover svg { color:#1DA1F2 !important; }
nav.bg-black a[href*="twitter.com/intent"] svg { color: var(--ink-700) !important; }

/* Desktop dropdowns -> light cards */
nav.bg-black .features-dropdown {
  background: #fff !important;
  border: 1px solid var(--line);
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  width: 230px; margin-top: 6px; padding: 6px;
}
nav.bg-black .features-dropdown a {
  color: var(--ink-700) !important;
  border-radius: 8px;
  font-weight: 500;
}
nav.bg-black .features-dropdown a:hover { background: var(--brand-050) !important; color: var(--brand-700) !important; }

/* Mobile menu button + panel */
nav.bg-black .mobile-menu-button { color: var(--ink) !important; }
nav.bg-black .mobile-menu { background: #fff !important; border-top: 1px solid var(--line); box-shadow: var(--shadow); }
nav.bg-black .mobile-menu a,
nav.bg-black .mobile-menu span,
nav.bg-black .mobile-arrow { color: var(--ink-700) !important; }
nav.bg-black .mobile-menu a:hover { background: var(--brand-050) !important; color: var(--brand-700) !important; }
nav.bg-black .mobile-features-container,
nav.bg-black .mobile-faq-container { background: #fff !important; }
nav.bg-black .mobile-features-container.submenu-open { background: var(--brand-050) !important; }
nav.bg-black .mobile-submenu.bg-gray-900 { background: var(--brand-050) !important; }
nav.bg-black .mobile-submenu a { color: var(--ink-700) !important; }

/* Breadcrumb */
nav[aria-label="Breadcrumb"] { color: var(--muted) !important; display: flex; align-items: center; gap: .15rem; }
nav[aria-label="Breadcrumb"] .bc-icon { width: 1.05rem; height: 1.05rem; display: block; }
nav[aria-label="Breadcrumb"] .breadcrumb-home { color: var(--brand-700); display: inline-flex; align-items: center; padding: .15rem; border-radius: 6px; }
nav[aria-label="Breadcrumb"] .breadcrumb-home:hover { color: var(--brand-600); background: var(--brand-050); }
nav[aria-label="Breadcrumb"] .bc-sep { color: var(--muted); display: inline-flex; align-items: center; margin: 0 .1rem; }
nav[aria-label="Breadcrumb"] .bc-sep .bc-icon { width: .95rem; height: .95rem; }
nav[aria-label="Breadcrumb"] .breadcrumb-current { color: var(--ink-700); font-weight: 600; }

/* =========================================================================
   HERO
   ========================================================================= */
.text-center.mb-8 > h1:first-of-type,
h1.text-3xl {
  font-size: clamp(2.1rem, 5vw, 3.1rem) !important;
  font-weight: 850;
  margin-bottom: .5rem !important;
  background: linear-gradient(180deg, var(--ink), #14392b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Tagline brush strokes -> brand greens */
#stroke1 { stroke: var(--brand) !important; }
#stroke2 { stroke: #0AB27C !important; }
#stroke3 { stroke: #0E9F5C !important; }
#stroke4 { stroke: #2CD08F !important; }
.highlight-word { font-weight: 700; color: var(--ink); }

/* optional hero illustration (added in markup) */
.hero-illo { display:block; margin: .25rem auto 1.25rem; max-width: 440px; width: 100%; height:auto; }

/* hero breathing room + readable tagline */
h1.text-3xl { padding-bottom: .08em; }
.hero-copy p.text-base { font-size: 1.05rem; color: var(--body); max-width: 640px; margin: 0 auto 1.25rem; }

/* Two-column hero: copy on the left, illustration on the right (desktop) */
.hero-wrap { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; padding-top: 1rem; }
.hero-media { text-align: center; }
.hero-media .hero-illo { margin: 0 auto; max-width: 320px; }
@media (max-width: 899.98px) { .hero-media { display: none; } }   /* hero illustration hidden on mobile/stacked layout */
@media (min-width: 900px) {
  .hero-wrap { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 2.75rem; padding-top: 1.5rem; }
  .hero-copy, .hero-copy > .text-center, .hero-copy h1.text-3xl { text-align: left; }
  .hero-copy p.text-base { margin-left: 0; margin-right: 0; }
  .hero-copy #email-hero-card { margin-left: 0 !important; margin-right: 0 !important; max-width: 560px !important; }
  .hero-copy .flex.justify-center { justify-content: flex-start; }
  .hero-media { text-align: right; }
  .hero-media .hero-illo { margin: 0 0 0 auto; max-width: 500px; }
}

/* Hero explainer paragraph + CTA buttons (left column) */
.hero-lead { color: var(--body); font-size: 1.08rem; line-height: 1.7; max-width: 560px; margin: 0 auto 1.6rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.hero-btn { display: inline-flex; align-items: center; padding: .72rem 1.2rem; border-radius: 11px; font-weight: 600; font-size: .98rem; text-decoration: none; transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease; }
.hero-btn i { font-size: 1.05em; }
.hero-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 18px rgba(18,185,129,.28); }
.hero-btn-primary:hover { background: var(--brand-600); color: #fff; transform: translateY(-1px); }
.hero-btn-ghost { background: #fff; color: var(--ink-700); border: 1px solid var(--line); }
.hero-btn-ghost:hover { background: var(--brand-050); color: var(--brand-700); border-color: var(--brand-100); }
@media (min-width: 900px) {
  .hero-lead { margin-left: 0; margin-right: 0; }
  .hero-cta { justify-content: flex-start; }
}

/* The temporary-email tool, now its own centered section below the hero */
#email-tool { scroll-margin-top: 90px; }
.email-tool-section { max-width: 720px; margin: 0 auto 1.25rem; }

/* Email address card (markup adds id="email-hero-card") */
#email-hero-card,
.mb-4.p-4.border-2.border-dashed {
  border: 1px solid var(--line) !important;
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 1.15rem 1.5rem 1.5rem !important;
  max-width: 640px !important;
  margin: 0 auto 1rem !important;
}
#email-hero-card h2 {
  font-size: 1.35rem !important; font-weight: 800 !important;
  letter-spacing: -.01em; line-height: 1.25;
  color: var(--ink) !important;
  margin-top: 0 !important;      /* was inheriting .max-w-6xl h2 margin-top: 2.2rem */
  margin-bottom: .9rem !important;
}
@media (max-width: 575.98px) { #email-hero-card h2 { font-size: 1.15rem !important; } }
#temp-email {
  font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace !important;
  font-size: 1.12rem !important; font-weight: 600 !important;
  color: var(--brand-700) !important;
  background: var(--brand-050) !important;
  border: 1px solid var(--brand-100) !important;
  border-radius: 12px !important;
  padding: .72rem 1rem !important;
  text-align: center;
}
#temp-email:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(18,185,129,.25) !important; border-color: var(--brand) !important; }

/* ---- Buttons: one cohesive system ------------------------------------- */
#copy-email, #show-qr,
#delete-selected, #change-email, #refresh-inbox, #bookmark-btn {
  font-weight: 600 !important;
  border-radius: 11px !important;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease !important;
  box-shadow: var(--shadow-sm);
}
#copy-email:active, #show-qr:active, #delete-selected:active,
#change-email:active, #refresh-inbox:active, #bookmark-btn:active { transform: translateY(1px); }

/* primary = Copy */
#copy-email {
  background: var(--brand) !important; color:#fff !important;
  padding: .72rem 1.15rem !important;
  box-shadow: 0 8px 18px rgba(18,185,129,.28) !important;
}
#copy-email:hover { background: var(--brand-600) !important; }

/* secondary outline = QR */
#show-qr {
  background: #fff !important; color: var(--ink-700) !important;
  border: 1px solid var(--line) !important;
  padding: .72rem 1.05rem !important;
}
#show-qr:hover { background: var(--brand-050) !important; color: var(--brand-700) !important; border-color: var(--brand-100) !important; }

/* action row = white pills with coloured icons */
#delete-selected, #change-email, #refresh-inbox, #bookmark-btn {
  background: #fff !important;
  color: var(--ink-700) !important;
  border: 1px solid var(--line) !important;
  padding: .6rem 1rem !important;
}
#delete-selected:hover, #change-email:hover, #refresh-inbox:hover, #bookmark-btn:hover {
  border-color: var(--brand-100) !important; background: var(--brand-050) !important; color: var(--brand-700) !important;
}
#change-email svg, #refresh-inbox svg, #bookmark-btn svg { color: var(--brand) !important; }
#delete-selected { color: var(--danger) !important; }
#delete-selected svg { color: var(--danger) !important; }
#delete-selected:hover { background: var(--danger-bg) !important; border-color: #F6C6C6 !important; color: var(--danger) !important; }
.flex.justify-center.space-x-4 { flex-wrap: wrap; gap: .6rem; }

/* fetch status countdown */
#fetch-status { color: var(--muted) !important; font-size: .9rem; background: var(--brand-050); border:1px solid var(--brand-100); padding:.35rem .8rem; border-radius: 999px; }
#fetch-status .refresh-icon circle { stroke: var(--brand) !important; }

/* =========================================================================
   INBOX
   ========================================================================= */
#email-list {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
  max-width: 76rem; margin: 0 auto;
}
#email-list > .grid.grid-cols-12 {
  background: var(--brand-050) !important;
  border-bottom: 1px solid var(--brand-100) !important;
  font-weight: 700 !important; color: var(--ink-700);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
}
#email-list .divide-y > li { transition: background .12s ease; }
#email-list .divide-y > li:hover { background: var(--brand-050); }
#empty-state p { color: var(--muted) !important; }
#empty-state .refresh-icon,
#empty-state svg circle { stroke: var(--brand) !important; }
#empty-state button {
  background: var(--brand) !important; color:#fff !important;
  border-radius: 10px; padding:.5rem 1rem; font-weight:600; border:none;
  box-shadow: 0 8px 18px rgba(18,185,129,.28);
}
#empty-state button:hover { background: var(--brand-600) !important; }

/* email view links */
#email-list a { color: var(--brand-700); }

/* =========================================================================
   Generic content polish (About / testimonials / explore / FAQ pages)
   ========================================================================= */
.max-w-6xl h2 { font-size: 1.75rem; margin-top: 2.2rem; }
.max-w-6xl h3 { font-size: 1.3rem; margin-top: 1.4rem; }
.article h2, .article h3 { color: var(--ink); }
.article p, .max-w-6xl p { line-height: 1.75; }

/* Cards: elements that were plain white boxes get the card treatment */
.max-w-6xl .bg-gray-50,
.max-w-6xl .bg-white.shadow,
.max-w-6xl .bg-white.rounded-lg.shadow {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Rounded-full letter avatars / badges keep brand tint */
.max-w-6xl .rounded-full.bg-blue-500,
.max-w-6xl .rounded-full.bg-blue-600 { background: var(--brand) !important; }

/* Explore / footer link lists */
.max-w-6xl a.text-blue-600,
.max-w-6xl a.text-blue-500 { color: var(--brand-700) !important; }
.max-w-6xl a.text-blue-600:hover { color: var(--brand-600) !important; }

/* Star ratings -> keep gold but ensure visible */
.text-yellow-400, .text-yellow-500 { color: #F5B301 !important; }

/* =========================================================================
   FEATURE STRIP (base footer, 4 cards) + FOOTER
   ========================================================================= */
footer.mt-12 { margin-top: 3.5rem !important; }
footer.mt-12 .grid > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.25rem; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Hover: only the border lights green -- the inside stays white (no fill). */
footer.mt-12 .grid > div:hover { border-color: var(--brand-600); background: #fff; }

/* Never let an element GROW/GAIN a shadow on hover (mouseover). Resting shadows
   stay; hover just doesn't add one. Covers Tailwind hover:shadow-* utilities. */
.hover\:shadow:hover, .hover\:shadow-sm:hover, .hover\:shadow-md:hover,
.hover\:shadow-lg:hover, .hover\:shadow-xl:hover, .hover\:shadow-2xl:hover { box-shadow: none !important; }
footer.mt-12 svg, footer.mt-12 i { color: var(--brand) !important; }
footer.mt-12 .feature-illo { width: 84px; height: 84px; object-fit: contain; margin: 0 auto .5rem; display:block; }

/* Main footer */
footer.bg-gray-100 {
  background: var(--ink) !important;
  color: #C9D6D0 !important;
  margin-top: 3rem !important;
  border-top: 3px solid var(--brand);
}
footer.bg-gray-100 h3, footer.bg-gray-100 h4, footer.bg-gray-100 .font-bold, footer.bg-gray-100 strong { color:#fff !important; }
footer.bg-gray-100 a { color: #AEC1B8 !important; }
footer.bg-gray-100 a:hover { color: var(--brand) !important; }
footer.bg-gray-100 select {
  background:#12211B !important; color:#DCE7E1 !important;
  border:1px solid #24352D !important; border-radius:10px; padding:.5rem .7rem;
}
footer.bg-gray-100 .text-gray-500,
footer.bg-gray-100 .text-gray-600,
footer.bg-gray-100 .text-gray-400 { color:#8CA096 !important; }

/* =========================================================================
   QR modal + toasts
   ========================================================================= */
#qr-modal .bg-white, #qr-modal > div { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
#close-qr-modal { color: var(--muted); }
.toast { border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; font-weight:600; }
.toast-success { border-left: 4px solid var(--brand); }

/* =========================================================================
   Buttons used across content pages (generic CTAs)
   ========================================================================= */
.max-w-6xl a.bg-blue-500, .max-w-6xl a.bg-blue-600,
.max-w-6xl button.bg-blue-500, .max-w-6xl button.bg-blue-600 {
  background: var(--brand) !important;
}
.max-w-6xl a.bg-blue-500:hover, .max-w-6xl a.bg-blue-600:hover { background: var(--brand-600) !important; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 991.98px) {
  nav.bg-black > .max-w-6xl > .flex.justify-between { height: 58px !important; }
  #email-hero-card { padding: 1.15rem 1rem !important; }
}

/* =========================================================================
   Remove the grey divider lines (<hr>) site-wide — keep surrounding spacing
   ========================================================================= */
hr { border: 0 !important; height: 0 !important; background: transparent !important; opacity: 0 !important; }

/* =========================================================================
   HTML sitemap page (/sitemap)
   ========================================================================= */
.sitemap-page { padding-top: .5rem; padding-bottom: 2.5rem; }
.sitemap-head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.sitemap-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.sitemap-head p { color: var(--muted); font-size: 1.05rem; margin-top: .5rem; }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.sitemap-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-sm); }
.sitemap-col h2 { font-size: 1.05rem; margin: 0 0 .85rem; padding-bottom: .6rem; border-bottom: 2px solid var(--brand-050); color: var(--ink); }
.sitemap-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.sitemap-col li { margin: 0; }
.sitemap-col a { display: block; padding: .4rem .5rem; border-radius: 8px; color: var(--ink-700); font-weight: 500; text-decoration: none; }
.sitemap-col a:hover { background: var(--brand-050); color: var(--brand-700); }

/* =========================================================================
   Legacy blue accents (content pages + CTA include) → brand green
   ========================================================================= */
a.text-blue-600, a.text-blue-500 { color: var(--brand-700) !important; }
a.text-blue-600:hover, a.text-blue-500:hover { color: var(--brand-600) !important; }

#cta-section { background: var(--brand-050) !important; border-color: var(--brand-100) !important; }
#cta-section .cta-heading, #cta-section .text-blue-900 { color: var(--ink) !important; }
#cta-section .text-blue-800 { color: var(--body) !important; }
#cta-section .cta-button, #cta-section button.bg-blue-600 { background: var(--brand) !important; }
#cta-section .cta-button:hover, #cta-section button.bg-blue-600:hover { background: var(--brand-600) !important; }

/* Contact form submit + focus rings → green */
.container form button.bg-blue-600 { background: var(--brand) !important; }
.container form button.bg-blue-600:hover { background: var(--brand-600) !important; }

/* =========================================================================
   Comparison tables (.cmp-table) used on content pages
   ========================================================================= */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0 2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .96rem; background: #fff; }
.cmp-table thead th { background: var(--brand-050); color: var(--ink); font-weight: 700; text-align: left; padding: .8rem 1rem; border-bottom: 2px solid var(--brand-100); white-space: nowrap; }
.cmp-table td { padding: .75rem 1rem; border-top: 1px solid var(--line); color: var(--body); vertical-align: top; }
.cmp-table tbody tr:nth-child(even) td { background: #FAFCFB; }
.cmp-table tbody tr:hover td { background: var(--brand-050); }
.cmp-table td:first-child, .cmp-table th:first-child { font-weight: 600; color: var(--ink-700); }

/* =========================================================================
   Share page (/en/share)
   ========================================================================= */
.share-page { max-width: 880px; margin: 0 auto; }
.share-hero { text-align: center; max-width: 660px; margin: .5rem auto 2rem; }
.share-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.share-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin-top: .7rem; }
.share-page h2 { font-size: 1.4rem; margin: 2rem 0 1rem; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.share-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-700); font-weight: 600; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.share-btn i { font-size: 1.2rem; }
.share-btn:hover { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }
.share-btn.sb-x i { color: #000; } .share-btn.sb-fb i { color: #1877F2; }
.share-btn.sb-wa i { color: #25D366; } .share-btn.sb-rd i { color: #FF4500; }
.share-btn.sb-tg i { color: #229ED9; } .share-btn.sb-in i { color: #0A66C2; }
.share-btn.sb-em i { color: var(--brand); }
.share-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; margin: 1.5rem 0; }
.share-card h2 { margin-top: 0; }
.share-copyrow { display: flex; gap: .5rem; flex-wrap: wrap; }
.share-copyrow input { flex: 1; min-width: 220px; font-family: ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--brand-100); background: var(--brand-050); border-radius: 10px; padding: .72rem .9rem; color: var(--brand-700); font-weight: 600; }
#inviteMessage { width: 100%; min-height: 112px; border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; color: var(--body); resize: vertical; font: inherit; }
.share-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.share-benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.1rem; text-align: center; }
.share-benefit i { font-size: 1.9rem; color: var(--brand); }
.share-benefit h3 { font-size: 1.05rem; margin: .55rem 0 .3rem; color: var(--ink); }
.share-benefit p { color: var(--muted); font-size: .92rem; margin: 0; }
.share-faq h3 { font-size: 1.12rem; margin: 1.3rem 0 .4rem; color: var(--ink); }
.share-faq p { color: var(--body); margin: 0; }

/* =========================================================================
   Reusable content components (readability: summaries, tips, key points,
   stat bars) — used across article/content pages
   ========================================================================= */
.tldr { background: var(--brand-050); border: 1px solid var(--brand-100); border-left: 4px solid var(--brand); border-radius: 12px; padding: .95rem 1.15rem; margin: 1.1rem 0 1.6rem; }
.tldr .tldr-label { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-700); margin-bottom: .3rem; }
.tldr p { margin: 0; color: var(--ink-700); }
.tldr p + p { margin-top: .5rem; }

.keypoints { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.25rem 1.05rem; margin: 1.25rem 0; }
.keypoints .kp-label { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.keypoints ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.keypoints li { margin: .3rem 0; }

.tip { display: flex; gap: .6rem; align-items: flex-start; background: #FFFBEA; border: 1px solid #F4E4A6; border-radius: 12px; padding: .85rem 1rem; margin: 1.25rem 0; color: #6B5300; line-height: 1.6; }
.tip::before { content: "💡"; font-size: 1.1rem; line-height: 1.5; flex: 0 0 auto; }
.tip strong { color: #5A4600; }

/* article emphasis + list rhythm on content pages */
.container em, .max-w-6xl em, .article em, .share-page em { font-style: italic; color: var(--ink-700); }
.container strong, .max-w-6xl .container strong { color: var(--ink); }
.container ul, .container ol { margin: .85rem 0 1.25rem; padding-left: 1.4rem; }
.container li { margin: .4rem 0; }
.container h3 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; color: var(--ink); }

/* =========================================================================
   FAQ accordion (progressive enhancement — server HTML stays fully visible,
   JS wraps each Q&A in <details> so it's collapsible; H3 kept inside summary)
   ========================================================================= */
.faq-accordion { display: grid; gap: .6rem; margin: 1rem 0 1.5rem; }
details.faq-acc { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .15s ease; }
details.faq-acc[open] { border-color: var(--brand-100); }
details.faq-acc > summary { list-style: none; cursor: pointer; padding: .95rem 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink); }
details.faq-acc > summary::-webkit-details-marker { display: none; }
details.faq-acc > summary:hover { background: var(--brand-050); }
details.faq-acc[open] > summary { color: var(--brand-700); }
details.faq-acc > summary h3, details.faq-acc > summary h4 { margin: 0 !important; font-size: 1.05rem; font-weight: 700; color: inherit; }
details.faq-acc > summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; }
details.faq-acc[open] > summary::after { transform: rotate(-135deg); }
details.faq-acc .faq-a { padding: 0 1.15rem 1.05rem; color: var(--body); }
details.faq-acc .faq-a > :first-child { margin-top: 0; }
details.faq-acc .faq-a > :last-child { margin-bottom: 0; }

/* simple CSS stat bars (optional lightweight "chart" to break up text) */
.statbars { margin: 1.25rem 0 1.5rem; display: grid; gap: .7rem; }
.statbar-label { font-size: .9rem; color: var(--ink-700); display: flex; justify-content: space-between; margin-bottom: .25rem; font-weight: 600; }
.statbar-track { background: var(--brand-050); border: 1px solid var(--brand-100); border-radius: 999px; height: 14px; overflow: hidden; }
.statbar-fill { background: linear-gradient(90deg, var(--brand), var(--brand-600)); height: 100%; border-radius: 999px; }

/* =========================================================================
   Blog hub (/en/blog)
   ========================================================================= */
.blog-page { padding-bottom: 2.5rem; }
.blog-hero { max-width: 720px; margin: .5rem 0 2rem; }
.blog-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.blog-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin-top: .6rem; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.blog-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease; }
.blog-card:hover { border-color: var(--brand-100); }
.blog-thumb { display: block; aspect-ratio: 1200 / 630; background: var(--brand-050); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.blog-body h2 { font-size: 1.2rem; margin: 0; line-height: 1.3; }
.blog-body h2 a { color: var(--ink); text-decoration: none; }
.blog-body h2 a:hover { color: var(--brand-700); }
.blog-body p { color: var(--body); font-size: .95rem; margin: 0; }
.blog-more { color: var(--brand-700); font-weight: 600; text-decoration: none; margin-top: .2rem; }
.blog-more:hover { color: var(--brand-600); }

/* Visual-guide cards (homepage feature section + /guides hub) */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.guide-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .15s ease; }
.guide-card:hover { border-color: var(--brand-600); }
.guide-thumb { display: block; aspect-ratio: 16 / 9; background: var(--brand-050); overflow: hidden; }
.guide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.guide-body h2, .guide-body h3 { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.guide-body h2 a, .guide-body h3 a { color: var(--ink); text-decoration: none; }
.guide-body h2 a:hover, .guide-body h3 a:hover { color: var(--brand-700); }
.guide-body p { color: var(--body); font-size: .92rem; margin: 0; }

/* "Why people choose" value cards with custom SVG icons */
.why-card { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 1.35rem 1.25rem; transition: border-color .15s ease; }
.why-card:hover { border-color: var(--brand-600); background: #fff; }
.why-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; background: var(--brand-050);
  color: var(--brand-600); margin-bottom: .8rem; }
.why-ico svg { width: 24px; height: 24px; }

.draft-badge { display: inline-block; background: #fef3c7; color: #92400e; font-weight: 700;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .6rem;
  border-radius: 6px; margin: 0 0 .6rem; }

/* ---------- Blog article layout (two-column: article + sidebar) ---------- */
.article-wrap { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2.75rem;
  max-width: 1120px; margin: 0 auto; padding: 0 1rem 1rem; }
.article-main { min-width: 0; }
.article-cat { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
  font-weight: 700; color: var(--brand-700); margin: 0 0 .35rem; }
.article-cat a { color: inherit; text-decoration: none; }
.article-cat a:hover { text-decoration: underline; }
.series-link { margin: -.2rem 0 1rem; font-size: .9rem; }
.series-link a { color: var(--brand-700); text-decoration: none; font-weight: 600; }
.series-link a:hover { text-decoration: underline; }
.article-title { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .5rem; color: var(--ink); }
.article-meta { color: var(--muted, #6b7280); font-size: .9rem; margin: 0 0 1.4rem; }

/* Article body typography */
.article-body { color: var(--body); font-size: 1.03rem; line-height: 1.72; }
.article-body h2 { font-size: 1.5rem; line-height: 1.3; margin: 2.1rem 0 .7rem; color: var(--ink);
  scroll-margin-top: 90px; }
.article-body h3 { font-size: 1.16rem; margin: 1.4rem 0 .5rem; color: var(--ink); }
.article-body p { margin: 0 0 1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.article-body li { margin: .35rem 0; }
.article-body a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--brand-600); }
.article-body img { max-width: 100%; height: auto; display: block; margin: 1rem auto; border-radius: 12px; }
.article-body figure { margin: 1.6rem 0; }
.article-body figcaption { text-align: center; color: var(--muted, #6b7280); font-size: .9rem; margin-top: .5rem; }

/* Jump-to-section box */
.toc-box { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 1rem 1.2rem;
  margin: 0 0 1.8rem; background: var(--brand-50, #f0fdf4); }
.toc-box .toc-title { font-weight: 700; color: var(--ink); margin: 0 0 .5rem; font-size: .95rem; }
.toc-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.toc-box a { color: var(--brand-700); text-decoration: none; font-size: .95rem; }
.toc-box a:hover { text-decoration: underline; }

/* Read-next card */
.next-box { margin: 2.4rem 0 .5rem; padding: 1.2rem 1.3rem; border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb); background: #fff; }
.next-label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
  font-weight: 700; color: var(--muted, #6b7280); margin: 0 0 .3rem; }
.next-link { font-size: 1.15rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.next-link:hover { color: var(--brand-700); }
.next-blurb { color: var(--body); margin: .3rem 0 0; font-size: .95rem; }

/* Sidebar */
.article-side { display: flex; flex-direction: column; gap: 1.3rem; }
.side-card, .side-cta { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 1.1rem 1.2rem; }
.side-card { position: sticky; top: 84px; }
.side-title { font-weight: 700; color: var(--ink); margin: 0 0 .6rem; font-size: .95rem; }
.side-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.side-card a { color: var(--brand-700); text-decoration: none; font-size: .95rem; }
.side-card a:hover { text-decoration: underline; }
.side-cta { background: var(--brand-50, #f0fdf4); text-align: center; }
.side-cta-text { margin: 0 0 .7rem; font-weight: 600; color: var(--ink); }
.side-cta-btn { display: inline-block; background: var(--brand-600, #16a34a); color: #fff;
  font-weight: 700; padding: .6rem 1rem; border-radius: 9px; text-decoration: none; }
.side-cta-btn:hover { background: var(--brand-700, #15803d); }

@media (max-width: 900px) {
  .article-wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .article-side { order: 2; }
  .side-card { position: static; }
  .article-title { font-size: 1.7rem; }
}