/* Homepage editorial previews and the Pro → Staff recording workflow. */
.lp-refined :is(#blog, #guides) :is(.blog-card-grid, .en-guides-grid) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 24px;
}
.lp-refined :is(#blog, #guides) .home-guide-card {
  display: flex; flex-direction: column; grid-column: auto; min-width: 0; min-height: 0;
  padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none; text-decoration: none; transition: border-color .2s;
}
.lp-refined :is(#blog, #guides) .home-guide-thumb {
  display: block; width: 100%; margin: 0 0 18px; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 10px; background: #0e2431;
}
.home-guide-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-refined :is(#blog, #guides) .home-guide-card h3 { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.6; letter-spacing: -.02em; }
.lp-refined :is(#blog, #guides) .home-guide-card p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.8; }
.lp-refined #blog .home-guide-card .blog-card-meta { margin: 0 0 8px; font-size: .6875rem; letter-spacing: .05em; }
.lp-refined :is(#blog, #guides) .home-guide-card:hover { transform: none; border-color: #167d8d; }
.lp-refined :is(#blog, #guides) .home-guide-card:focus-visible { outline: 3px solid #167d8d; outline-offset: 5px; }
.plan-depth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; margin: 28px 0 40px; padding: 32px; border: 1px solid #dce7eb; border-radius: 16px; background: #f5f9fa; color: #162b3b; }
.plan-depth .eyebrow { margin: 0 0 18px; color: #30646f; font-size: .75rem; font-weight: 700; }
.plan-depth h3 { margin: 0 0 12px; font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 750; line-height: 1.5; letter-spacing: -.025em; }
.plan-depth p { margin: 0; font-size: .9375rem; line-height: 1.85; color: #475a68; }
.plan-depth-pro { margin: 0 0 24px; padding: 0 0 22px; border-bottom: 1px solid #d5e0e5; }
.plan-depth .plan-depth-pro h3 { font-size: 1.125rem; color: #425260; }
.plan-depth-benefits { display: grid; gap: 14px; margin: 22px 0 10px; padding: 0; list-style: none; }
.plan-depth-benefits li { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid #4a9cab; }
.plan-depth-benefits strong { font-size: .9375rem; line-height: 1.6; }
.plan-depth-benefits span { color: #475a68; font-size: .875rem; line-height: 1.8; }
.plan-depth-link { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; color: #146779; font-size: .875rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.plan-depth-proof { min-width: 0; width: 100%; margin: 0; }
.plan-depth-proof > a { display: block; padding: 8px; border: 1px solid #d5e0e5; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px #18394c0d; }
.plan-depth-proof img { display: block; width: 100%; height: auto; border-radius: 6px; }
.plan-depth-proof figcaption { margin: 10px 0 16px; color: #5b6d7a; font-size: .75rem; line-height: 1.6; }
.plan-depth-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0 0 12px; list-style: none; }
.plan-depth-steps li { display: flex; gap: 8px; align-items: baseline; padding: 10px 8px; background: #e6f0f2; border-radius: 6px; }
.plan-depth-steps span { color: #437987; font: 600 .75rem/1.5 Inter, sans-serif; }
.plan-depth-steps strong { font-size: .8125rem; line-height: 1.6; }
.plan-depth p.plan-depth-note { font-size: .75rem; line-height: 1.8; }
.plan-depth p.plan-depth-team { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid #d5e0e5; font-size: .8125rem; }
.plan-depth a:focus-visible { outline: 3px solid #167d8d; outline-offset: 4px; }
.plan-distinct-row { background: #f0f7f8; }
@media (max-width: 1100px) {
  .lp-refined :is(#blog, #guides) :is(.blog-card-grid, .en-guides-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-depth { padding: 24px; gap: 24px; }
}
@media (max-width: 760px) {
  .plan-depth { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; margin-top: 20px; }
  .plan-depth h3 { font-size: 1.25rem; }
  .plan-depth-pro { margin-bottom: 20px; padding-bottom: 20px; }
  .plan-depth-proof { max-width: 520px; justify-self: center; }
}
@media (max-width: 600px) {
  .lp-refined :is(#blog, #guides) :is(.blog-card-grid, .en-guides-grid) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-refined :is(#blog, #guides) .home-guide-card h3 { font-size: 1.125rem; }
  .lp-refined :is(#blog, #guides) .home-guide-card p { font-size: .9375rem; }
  .plan-depth-steps li { flex-direction: column; gap: 2px; }
}
[data-theme="dark"] .plan-depth { background: #13232d; color: #ecf3f6; border-color: #334854; }
[data-theme="dark"] .plan-depth p,
[data-theme="dark"] .plan-depth-benefits span,
[data-theme="dark"] .plan-depth-proof figcaption { color: #bdccd5; }
[data-theme="dark"] .plan-depth .eyebrow,
[data-theme="dark"] .plan-depth-link { color: #93d4df; }
[data-theme="dark"] .plan-depth .plan-depth-pro h3 { color: #dae5eb; }
[data-theme="dark"] .plan-depth-pro,
[data-theme="dark"] .plan-depth p.plan-depth-team { border-color: #334854; }
[data-theme="dark"] .plan-depth-steps li { background: #203945; }
[data-theme="dark"] .plan-depth-steps span { color: #93d4df; }
[data-theme="dark"] .plan-distinct-row { background: #142f3a; }
/* Keep the optional feature comparison available on phones as well. */
html[lang] .lp-refined .plans-section .plan-comparison-disclosure { display: block; }