/* Saddl content modules, October 2026.
   Six reusable modules for the rewritten content pages. They use brand tokens from cinema.css
   and do not change any existing class.
   Load this file after the existing page stylesheets. */

.cinema .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cinema .cm-section{padding-block:48px;border-top:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-section > :first-child{margin-top:0}
.cinema .cm-head{display:grid;gap:18px;margin-bottom:32px}
.cinema .cm-head h2,.cinema .cm-section h2{margin:0;font:600 clamp(36px,4.2vw,62px)/1.02 SaddlDisplay,"Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:-.035em;max-width:24ch;color:var(--saddl-ink,#28332D)}
.cinema .cm-head p{margin:0;max-width:62ch;color:var(--saddl-muted,#536457);font-size:17px;line-height:1.65}
.cinema .cm-kicker{display:flex;align-items:center;gap:12px;margin:0;color:var(--saddl-muted,#536457);font-size:13px}
.cinema .cm-kicker::before{content:"";width:28px;height:1px;background:var(--saddl-terracotta,#BC452F);flex-shrink:0}
.cinema .cm-section h3{margin:0;font:600 26px/1.15 SaddlDisplay,"Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:-.01em;color:var(--saddl-ink,#28332D)}
.cinema .cm-section p{margin:0}
.cinema .cm-section p + p{margin-top:14px}
.cinema .cm-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;color:var(--saddl-ink,#28332D);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-color:var(--saddl-terracotta,#BC452F);text-underline-offset:6px}

/* 1. Answer card: the short answer, right under the headline */
.cinema .cm-answer{margin:32px 0 8px;padding:24px 26px;background:var(--saddl-pale-sage,#E4EADC);border-radius:var(--saddl-radius-sm,4px);max-width:880px}
.cinema .cm-answer h2{margin:0 0 10px;font:600 13px/1.4 SaddlBody,"Manrope",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--saddl-muted,#536457);max-width:none}
.cinema .cm-answer p{margin:0;font-size:18px;line-height:1.65;color:var(--saddl-ink,#28332D);max-width:68ch}
.cinema .cm-answer p + p{margin-top:12px;font-size:16px;color:var(--saddl-muted,#536457)}

/* 2. Facts strip: label and value pairs */
.cinema .cm-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin:0;border-top:1px solid var(--saddl-rule,#C9C9BD);border-bottom:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-facts > div{padding:20px 22px 22px 0;border-right:1px solid var(--saddl-rule,#C9C9BD);margin-right:22px}
.cinema .cm-facts > div:last-child{border-right:0;margin-right:0}
.cinema .cm-facts dt{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--saddl-muted,#536457)}
.cinema .cm-facts dd{margin:0;font-size:16px;line-height:1.45;font-weight:600;color:var(--saddl-ink,#28332D)}
.cinema .cm-facts dd span{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--saddl-muted,#536457)}

.cinema .cm-facts.cm-facts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cinema .cm-facts.cm-facts-3 > div{margin-right:22px;border-right:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-facts.cm-facts-3 > div:nth-child(3n){border-right:0;margin-right:0}
.cinema .cm-facts.cm-facts-3 > div:nth-child(-n+3){border-bottom:1px solid var(--saddl-rule,#C9C9BD)}

/* 3. Proof strip: three numbers with marketplace and period */
.cinema .cm-proof{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,2fr);gap:32px;align-items:start;padding:28px 30px;background:var(--saddl-stone,#ECE9DF);border-radius:var(--saddl-radius-sm,4px)}
.cinema .cm-proof + .cm-proof{margin-top:16px}
.cinema .cm-proof-copy .cm-proof-label,.cinema .cm-proof-label{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a43c28}
.cinema .cm-proof h3{margin-top:10px;font-size:26px}
.cinema .cm-proof-copy p{margin-top:10px;color:var(--saddl-muted,#536457);font-size:15px;line-height:1.6}
.cinema .cm-proof-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-left:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-proof-metrics > div{padding:4px 18px;border-right:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-proof-metrics > div:last-child{border-right:0}
.cinema .cm-proof-metrics dd{margin:0;font:600 clamp(30px,2.7vw,44px)/1 SaddlDisplay,"Barlow Condensed","Arial Narrow",sans-serif;color:var(--saddl-ink,#28332D);white-space:nowrap}
.cinema .cm-proof-metrics > div:first-child dd{color:#a43c28}
.cinema .cm-proof-metrics dt{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--saddl-muted,#536457)}
.cinema .cm-proof-note{grid-column:1/-1;max-width:none;margin:0;padding-top:14px;border-top:1px solid var(--saddl-rule,#C9C9BD);font-size:13px;color:var(--saddl-muted,#536457)}
.cinema .cm-proof-note a{color:var(--saddl-ink,#28332D);font-weight:600;text-underline-offset:5px}

/* 4. Comparison table: rows stack into labelled cards on small screens */
.cinema .cm-table-wrap{margin:0}
.cinema .cm-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.cinema .cm-table caption{caption-side:top;text-align:left;padding-bottom:14px;font-size:13px;color:var(--saddl-muted,#536457)}
.cinema .cm-table th,.cinema .cm-table td{padding:16px 18px 16px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-table thead th{padding-top:0;border-bottom:2px solid var(--saddl-sage,#819582);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--saddl-muted,#536457)}
.cinema .cm-table tbody th{font-weight:600;color:var(--saddl-ink,#28332D);width:22%}
.cinema .cm-table td{color:var(--saddl-muted,#536457)}
.cinema .cm-table .cm-us{color:var(--saddl-ink,#28332D);font-weight:600}
.cinema .cm-table thead .cm-us{color:var(--saddl-ink,#28332D);border-bottom-color:var(--saddl-terracotta,#BC452F)}

/* 5. Decision flow: signal, decision, owner, follow-through */
.cinema .cm-flow{padding:40px 36px;background:var(--saddl-forest,#26352E);border-radius:var(--saddl-radius-sm,4px);color:var(--saddl-paper,#F5F3ED)}
.cinema .cm-flow .cm-kicker{color:var(--saddl-mist,#D4DFD5)}
.cinema .cm-flow .cm-kicker::before{background:var(--saddl-peach,#E7B494)}
.cinema .cm-flow h2,.cinema .cm-flow h3{color:var(--saddl-paper,#F5F3ED)}
.cinema .cm-flow .cm-head p{color:var(--saddl-mist,#D4DFD5)}
.cinema .cm-flow ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.cinema .cm-flow li{position:relative;padding-top:22px;border-top:2px solid #627467}
.cinema .cm-flow li::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:2px;background:var(--saddl-peach,#E7B494)}
.cinema .cm-flow li > span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--saddl-peach,#E7B494)}
.cinema .cm-flow li h3{margin-top:12px;font-size:24px}
.cinema .cm-flow li p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--saddl-mist,#D4DFD5)}
.cinema .cm-flow-note{margin:28px 0 0;font-size:13px;color:var(--saddl-mist,#D4DFD5)}

/* 6. FAQ accordion */
.cinema .cm-faq{margin:0;border-top:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-faq details{border-bottom:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:20px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:600;line-height:1.4;color:var(--saddl-ink,#28332D)}
.cinema .cm-faq summary::-webkit-details-marker{display:none}
.cinema .cm-faq summary::after{content:"+";flex-shrink:0;font-size:24px;font-weight:400;line-height:1;color:var(--saddl-terracotta,#BC452F)}
.cinema .cm-faq details[open] summary::after{content:"\2212"}
.cinema .cm-faq details > div{padding:0 0 22px;max-width:72ch}
.cinema .cm-faq details > div p{color:var(--saddl-muted,#536457);font-size:16px;line-height:1.7}

/* Shared helpers: numbered grid (beliefs, commitments) and fit columns */
.cinema .cm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;margin:0;padding:0;list-style:none}
.cinema .cm-grid.cm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cinema .cm-grid > li{padding-top:20px;border-top:1px solid var(--saddl-sage,#819582)}
.cinema .cm-grid > li > span{display:block;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.08em;color:#a43c28}
.cinema .cm-grid > li p{margin-top:10px;color:var(--saddl-muted,#536457);font-size:16px;line-height:1.65}
.cinema .cm-grid > li .cm-evidence{margin-top:14px;padding-left:14px;border-left:2px solid var(--saddl-peach,#E7B494);font-size:14px;color:var(--saddl-ink,#28332D)}
.cinema .cm-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cinema .cm-fit > div{padding:26px 28px;border-radius:var(--saddl-radius-sm,4px);background:var(--saddl-pale-sage,#E4EADC)}
.cinema .cm-fit > div + div{background:var(--saddl-stone,#ECE9DF)}
.cinema .cm-fit ul{margin:14px 0 0;padding:0;list-style:none}
.cinema .cm-fit li{position:relative;padding:10px 0 10px 26px;border-top:1px solid rgba(40,51,45,.12);font-size:16px;line-height:1.55;color:var(--saddl-ink,#28332D)}
.cinema .cm-fit li:first-child{border-top:0}
.cinema .cm-fit li::before{content:"\2713";position:absolute;left:0;top:10px;font-weight:700;color:#3f584c}
.cinema .cm-fit > div + div li::before{content:"\2013";color:#a43c28}
.cinema .cm-quote{margin:0;padding:28px 0 0;border-top:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-quote blockquote{margin:0;font:600 clamp(26px,2.6vw,36px)/1.15 SaddlDisplay,"Barlow Condensed","Arial Narrow",sans-serif;color:var(--saddl-ink,#28332D);max-width:30ch}
.cinema .cm-quote figcaption{margin-top:14px;font-size:14px;color:var(--saddl-muted,#536457)}

/* About page: one lesson line per timeline chapter (the timeline sits on Forest) */
.cinema .chapter-lesson{margin-top:14px;padding-left:14px;border-left:2px solid var(--saddl-peach,#E7B494);font-size:15px;line-height:1.6;color:var(--saddl-mist,#D4DFD5)}
.cinema .chapter-lesson strong{color:var(--saddl-peach,#E7B494);font-weight:600}
.cinema .cm-name{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:start;padding:32px 34px;background:var(--saddl-pale-sage,#E4EADC);border-radius:var(--saddl-radius-sm,4px)}
.cinema .cm-name p{color:var(--saddl-ink,#28332D);font-size:17px;line-height:1.7}

@media(max-width:1000px){
.cinema .cm-proof{grid-template-columns:1fr;gap:22px}
.cinema .cm-flow ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
.cinema .cm-name{grid-template-columns:1fr;gap:16px}
}
@media(max-width:760px){
.cinema .cm-section{padding-block:36px}
.cinema .cm-answer{padding:20px}
.cinema .cm-answer p{font-size:17px}
.cinema .cm-facts,.cinema .cm-facts.cm-facts-3{grid-template-columns:1fr 1fr}
.cinema .cm-facts.cm-facts-3 > div{border-right:0;margin-right:0}
.cinema .cm-facts > div{border-right:0;margin-right:0;padding:16px 12px 16px 0;border-bottom:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-facts > div:nth-last-child(-n+2){border-bottom:0}
.cinema .cm-proof{padding:22px 20px}
.cinema .cm-proof-metrics{grid-template-columns:1fr;border-left:0}
.cinema .cm-proof-metrics > div{padding:14px 0;border-right:0;border-top:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-flow{padding:30px 22px}
.cinema .cm-flow ol{grid-template-columns:1fr}
.cinema .cm-grid,.cinema .cm-grid.cm-grid-3,.cinema .cm-fit{grid-template-columns:1fr;gap:24px}
.cinema .cm-fit > div{padding:22px 20px}
.cinema .cm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cinema .cm-table,.cinema .cm-table tbody,.cinema .cm-table tr,.cinema .cm-table th,.cinema .cm-table td{display:block;width:100%}
.cinema .cm-table tr{padding:16px 0;border-bottom:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-table tbody th{width:100%;padding:0 0 8px;border:0;font-size:17px}
.cinema .cm-table td{padding:6px 0;border:0}
.cinema .cm-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--saddl-muted,#536457)}
.cinema .cm-table td.cm-us::before{color:#a43c28}
}
@media(max-width:480px){
.cinema .cm-facts,.cinema .cm-facts.cm-facts-3{grid-template-columns:1fr}
.cinema .cm-facts > div,.cinema .cm-facts > div:nth-last-child(-n+2){border-bottom:1px solid var(--saddl-rule,#C9C9BD)}
.cinema .cm-facts > div:last-child{border-bottom:0}
}