/* Blog surface. Loads after od.css, which carries the design-system tokens. */

.od-blog{max-width:760px;margin:0 auto;padding:56px 40px 0}
.od-blog-wide{max-width:1100px;margin:0 auto;padding:56px 40px 0}

.od-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.42);margin-bottom:24px}
.od-crumbs a{color:rgba(255,255,255,.62)}
.od-crumbs a:hover{color:var(--od-pink-soft)}
.od-crumbs span[aria-hidden]{color:rgba(255,255,255,.25)}

.od-byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;font-size:13px;color:rgba(255,255,255,.45)}
.od-byline a{color:rgba(255,255,255,.7)}
.od-byline a:hover{color:var(--od-pink-soft)}
.od-byline .od-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.28)}

.od-prose{margin-top:40px;font-family:var(--font-body);font-size:17px;line-height:29px;color:rgba(255,255,255,.78)}
.od-prose>*+*{margin-top:22px}
.od-prose h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3.4vw,34px);line-height:1;color:var(--od-text-primary);margin-top:56px}
.od-prose h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.05;color:var(--od-text-primary);margin-top:38px}
.od-prose p{text-wrap:pretty}
.od-prose strong{color:var(--od-text-primary);font-weight:700}
.od-prose a{color:var(--od-pink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.od-prose a:hover{color:var(--od-pink-soft)}
.od-prose ul,.od-prose ol{padding-left:22px}
.od-prose li+li{margin-top:10px}
.od-prose li::marker{color:rgba(255,255,255,.35)}
.od-prose blockquote{border-left:2px solid var(--od-pink);padding:4px 0 4px 20px;color:rgba(255,255,255,.62);font-style:italic}
.od-prose hr{border:none;border-top:1px solid var(--od-border-subtle);margin-top:48px}
.od-prose figure figcaption{margin-top:10px;font-size:13px;color:rgba(255,255,255,.42)}
.od-prose img{border-radius:var(--od-radius-lg)}

.od-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.od-prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;line-height:22px}
.od-prose th,.od-prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--od-border-subtle);vertical-align:top}
.od-prose th{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--od-text-primary);white-space:nowrap}
.od-prose tbody tr:last-child td{border-bottom:none}

.od-callout{background:var(--od-surface);border:1px solid var(--od-border-subtle);border-radius:var(--od-radius-lg);padding:20px 22px;font-size:16px;line-height:25px}
.od-callout strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:14px;letter-spacing:.02em;margin-bottom:6px}

.od-toc{background:var(--od-surface);border:1px solid var(--od-border-subtle);border-radius:var(--od-radius-lg);padding:20px 22px;margin-top:40px}
.od-toc>strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.6);margin-bottom:12px}
.od-toc ol{margin:0;padding-left:20px;font-size:15px;line-height:24px}
.od-toc li+li{margin-top:8px}
.od-toc a{color:rgba(255,255,255,.72)}
.od-toc a:hover{color:var(--od-pink-soft)}

.od-faq{margin-top:20px;border-top:1px solid var(--od-border-subtle)}
.od-faq details{border-bottom:1px solid var(--od-border-subtle)}
.od-faq summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.od-faq summary::-webkit-details-marker{display:none}
.od-faq summary h3{margin:0;font-size:18px;line-height:25px;text-transform:none;font-family:var(--font-body);font-weight:500;color:var(--od-text-primary)}
.od-faq summary::after{content:"+";flex-shrink:0;font-size:20px;line-height:25px;color:rgba(255,255,255,.4)}
.od-faq details[open] summary::after{content:"\2013"}
.od-faq details>div{padding:0 0 18px;font-size:16px;line-height:25px;color:rgba(255,255,255,.7)}

.od-postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:40px}
.od-postcard{display:flex;flex-direction:column;gap:10px;background:var(--od-surface);border:1px solid var(--od-border-subtle);border-radius:var(--od-radius-lg);padding:24px;transition:border-color var(--od-dur) var(--od-ease),background var(--od-dur) var(--od-ease)}
.od-postcard:hover{border-color:rgba(255,255,255,.22);background:var(--od-surface-raised)}
.od-postcard h2,.od-postcard h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:20px;line-height:22px;color:var(--od-text-primary);margin:0}
.od-postcard p{font-size:15px;line-height:23px;color:rgba(255,255,255,.6);margin:0}
.od-postcard .od-note{margin-top:auto;padding-top:6px}

.od-endcta{margin-top:64px;background:var(--od-surface);border:1px solid var(--od-border-subtle);border-radius:var(--od-radius-xl);padding:36px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.od-endcta p{font-size:16px;line-height:25px;color:rgba(255,255,255,.68);margin:0}

.od-related{margin-top:56px;padding-top:32px;border-top:1px solid var(--od-border-subtle)}
.od-related>strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.6);margin-bottom:16px}
.od-related ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.od-related a{font-size:16px;color:rgba(255,255,255,.78)}
.od-related a:hover{color:var(--od-pink-soft)}

@media (max-width:768px){
  .od-blog,.od-blog-wide{padding:36px 20px 0}
  .od-prose{font-size:16px;line-height:27px}
  .od-prose h2{margin-top:44px}
  .od-endcta{padding:26px}
}