/*
 * /cet-practice landing page. Loaded after site.css, donna-kit.css and donna-home.css.
 * Every section reuses a homepage component (hero, features, workflow, proof, about, faq, cta-band);
 * this file only adds the teaser panel, 4-up grids and the before/after window panes.
 */
.cer-page .hero.cer-hero { min-height: 0; }
.cer-page .cer-hero .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.cer-page .cer-hero .hero-copy { grid-column: 1; margin-left: 0; }
.cer-page .cer-hero .hero-ctas { margin-top: 1.4rem; }
.cer-page .cer-teaser { min-width: 0; position: relative; padding: 2.6rem 1.25rem 1.1rem; background: var(--dk-white); color: var(--dk-ink); border: var(--dk-outline); border-radius: var(--dk-radius); box-shadow: var(--dk-shadow); }
.cer-page .cer-teaser h2 { position: absolute; top: -3px; left: -3px; margin: 0; padding: .15rem .7rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; background: var(--dk-mustard); color: var(--dk-on-mustard); border: var(--dk-outline); }
.cer-page .cer-teaser audio { display: block; width: 100%; }
.cer-page .cer-teaser p { font-size: .875rem; line-height: 1.5; margin: .75rem 0 0; color: var(--dk-ink); }
.cer-page .cer-teaser summary { min-height: 44px; display: flex; align-items: center; margin-top: .4rem; cursor: pointer; font-weight: 800; color: var(--dk-ink); }
.cer-page .cer-teaser details p { max-height: 14rem; overflow: auto; }
.cer-page .feature-grid.cer-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cer-page .workflow-steps.cer-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cer-page .cer-note { margin: 1.4rem auto 0; max-width: 60ch; text-align: center; color: var(--dk-ink); font-size: .95rem; }
.cer-page .workflow .cer-note, .cer-page .workflow .cer-note a { color: var(--dk-on-mustard); }
.cer-page .workflow .cer-note a, .cer-page .proof .cer-note a { font-weight: 800; }
.cer-page .cer-sample-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cer-page .cer-sample { padding: 1.4rem 1.5rem 1.6rem; color: var(--dk-ink); }
.cer-page .cer-sample + .cer-sample { border-left: var(--dk-outline-sm); background: var(--dk-lavender-tint); }
.cer-page .cer-sample h3 { margin: 0 0 .8rem; font-size: 1rem; }
.cer-page .cer-excerpt { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; line-height: 1.9; overflow-wrap: anywhere; }
.cer-page .proof { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.cer-page .proof .section-lede { text-align: center; margin: -.6rem auto 1.6rem; max-width: 60ch; }
.cer-page .about-copy a { color: var(--dk-link); font-weight: 800; }
html:not([data-theme="light"]) .cer-page .cer-teaser { border-color: var(--dk-mustard); }
html:not([data-theme="light"]) .cer-page .workflow .cer-note, html:not([data-theme="light"]) .cer-page .workflow .cer-note a { color: var(--dk-ink); }
@media (max-width: 1023px) {
  .cer-page .feature-grid.cer-grid-4, .cer-page .workflow-steps.cer-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cer-page .cer-hero .hero-inner { grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; padding-bottom: 1.4rem; }
  .cer-page .cer-hero .hero h1, .cer-page .cer-hero h1 { font-size: 2.1rem; }
  .cer-page .cer-hero .subhead { font-size: .95rem; line-height: 1.45; }
  .cer-page .cer-hero .hero-ctas { margin-top: .9rem; }
  .cer-page .cer-teaser { padding: 2.3rem .9rem .5rem; box-shadow: var(--dk-shadow-sm); }
  .cer-page .cer-teaser p { font-size: .8rem; margin-top: .5rem; }
  .cer-page .feature-grid.cer-grid-4, .cer-page .workflow-steps.cer-steps-4, .cer-page .cer-sample-grid { grid-template-columns: 1fr; }
  .cer-page .cer-sample + .cer-sample { border-left: 0; border-top: var(--dk-outline-sm); }
}
.cer-page .about-copy p + p { margin-top: .8rem; }

#cer-how .hero-media { margin-top: 2rem; }
#cer-how .cer-editor-caption { width: fit-content; max-width: min(100%, 860px); margin: 1rem auto 0; text-align: center; }

/* What you practice: same lighter surface as the CER connection (.about) section */
.cer-page .cer-practice-cards { background: var(--dk-white); color: var(--dk-ink); border-block: var(--dk-outline); }
/* How it works: centre the editor mock */
#cer-how .hero-media { width: min(100%, 860px); margin-inline: auto; }
#cer-how .hero-media .product-window { margin-inline: auto; }

/* hero aligns to the site container (donna-home.css .dk-home .hero-inner width:100% had overridden .wrap) */
html.theme-c.theme-c body.dk-home.cer-page .cer-hero .hero-inner { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--gutter); }
/* teaser card heading is a small card title, not hero-H1 sized */
html.theme-c.theme-c body.dk-home.cer-page .cer-teaser h2 { position: static; margin: 0 0 .75rem; padding: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.25; font-family: inherit; background-image: none; text-transform: none; letter-spacing: 0; background: none; border: 0; color: var(--tc-ink, var(--dk-ink)); -webkit-text-fill-color: currentColor; }
html.theme-c.theme-c body.dk-home.cer-page .cer-teaser { padding-top: 1.25rem; }
@media (max-width: 760px) { html.theme-c.theme-c body.dk-home.cer-page .cer-hero .hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; } html.theme-c.theme-c body.dk-home.cer-page .cer-hero .hero-copy { margin-left: 0; } }