.cmf-page { color: #242424; background: #f8f8f6; }
.cmf-page .shell { width: min(1440px, calc(100% - clamp(32px, 6vw, 96px))); }
.cmf-page figure { margin: 0; }
.cmf-page img { display: block; max-width: 100%; height: auto; }
.cmf-intro-meta, .cmf-eyebrow, .cmf-label, .cmf-section-head > span, .cmf-endnote, .cmf-footer {
  font-size: 9px; line-height: 1.5; letter-spacing: .09em;
}
.cmf-intro-meta, .cmf-endnote, .cmf-footer { display: flex; justify-content: space-between; gap: 24px; }
.cmf-intro-meta { padding-top: 36px; color: #777; }
.cmf-intro-meta a { color: #242424; }
.cmf-intro { max-width: 720px; margin: 0 auto; padding: clamp(120px, 16vw, 230px) 24px clamp(125px, 17vw, 230px); text-align: center; }
.cmf-eyebrow { margin: 0 0 25px; color: #777; }
.cmf-intro h1 { margin: 0; font-size: clamp(32px, 5.5vw, 72px); font-weight: 300; line-height: .95; letter-spacing: -.07em; }
.cmf-deck { max-width: 560px; margin: clamp(35px, 5vw, 75px) auto 0; font-size: clamp(15px, 1.7vw, 22px); line-height: 1.4; letter-spacing: -.025em; }
.cmf-page .cmf-hero { margin: 22px calc(50% - 50vw) 0; background: #191d1c; }
.cmf-hero img { width: 100%; }
.cmf-section { padding-top: clamp(160px, 21vw, 300px); }
.cmf-section-head { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; margin-bottom: clamp(48px, 7vw, 100px); }
.cmf-section-head > span { padding-top: 7px; color: #777; }
.cmf-section-head h2 { margin: 0; font-size: clamp(20px, 2.1vw, 30px); font-weight: 400; line-height: 1.22; letter-spacing: -.04em; }
.cmf-brief .cmf-section-head { grid-template-columns: 1fr; justify-items: center; gap: 28px; margin: 0 auto; text-align: center; }
.cmf-brief-story { width: 100%; }
.cmf-brief-story h2 { max-width: none; font-size: clamp(30px, 4.5vw, 60px); line-height: 1.2; }
.cmf-brief-story p { margin: 28px 0 0; color: #777; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; }
.cmf-label { color: #777; }
.cmf-directions { padding-top: clamp(100px, 12vw, 180px); }
.cmf-trim-story { display: grid; grid-template-columns: 3fr 1fr; gap: 32px; margin-bottom: 48px; padding: 30px 0; }
.cmf-ascent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.cmf-ascent li, .cmf-special-trim { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 16px; }
.cmf-trim-icon { width: 80px; height: 80px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cmf-trim-icon .cmf-mountain { stroke: #b7b7b2; }
.cmf-trim-icon circle { fill: currentColor; stroke: #f8f8f6; stroke-width: 2; }
.cmf-trim-story strong { font-size: 14px; font-weight: 500; line-height: 1.5; }
.cmf-special-trim { padding-left: 28px; border-left: 1px solid #d7d7d3; }
@media (max-width: 760px) {
  .cmf-trim-story { grid-template-columns: 1fr; gap: 28px; }
  .cmf-ascent { gap: 12px; }
  .cmf-special-trim { padding: 24px 0 0; border-left: 0; border-top: 1px solid #d7d7d3; }
}
@media (max-width: 520px) {
  .cmf-trim-icon { width: 64px; height: 64px; }
  .cmf-trim-story strong { font-size: 12px; }
}
.cmf-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #d7d7d3; border: 1px solid #d7d7d3; }
.cmf-tabs :is(button,a) { min-width: 0; min-height: 82px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px clamp(12px, 2vw, 28px); border: 0; color: #777; background: #f8f8f6; font: inherit; font-size: 10px; letter-spacing: .08em; text-align: left; cursor: pointer; transition: background .3s ease, color .3s ease; }
.cmf-tabs :is(button,a) strong { font-size: clamp(12px, 1.2vw, 16px); font-weight: 500; letter-spacing: .02em; }
.cmf-tabs :is(button,a):hover { background: #eeeee9; color: #242424; }
.cmf-tabs :is(button,a)[aria-current="location"] { background: #242424; color: #fff; }
.cmf-tabs :is(button,a):focus-visible { outline: 2px solid #242424; outline-offset: 3px; z-index: 1; }
.cmf-panel { padding-top: clamp(65px, 9vw, 140px); }
.cmf-panel[hidden] { display: none; }
.cmf-panel-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 8vw, 110px); align-items: end; margin-bottom: clamp(35px, 5vw, 75px); }
.cmf-panel-intro h3 { margin: 22px 0 0; font-size: clamp(21px, 2.5vw, 36px); font-weight: 400; line-height: 1.15; letter-spacing: -.04em; }
.cmf-panel-intro p { width: 100%; max-width: 450px; justify-self: end; margin: 0; text-align: right; font-size: clamp(12px, 1.15vw, 15px); line-height: 1.7; }
.cmf-main-render { background: #171a19; }
.cmf-main-render img { width: 100%; }
.cmf-panel-details { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); column-gap: clamp(28px, 5vw, 80px); row-gap: 32px; align-items: start; margin-top: clamp(90px, 12vw, 180px); }
.cmf-panel-details figure { min-width: 0; background: #171a19; }
.cmf-panel-details figure img { width: 100%; }
.cmf-panel-details .cmf-palette-image { background: transparent; }
.cmf-materials { grid-column: 1 / -1; width: 100%; }
.cmf-panel-details .cmf-board { width: auto; max-height: 360px; margin: 0; object-fit: contain; object-position: left top; mix-blend-mode: multiply; }
.cmf-materials ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.cmf-materials li { padding: 13px 0; border-top: 1px solid #d7d7d3; font-size: 11px; line-height: 1.4; }
.cmf-endnote { align-items: baseline; margin: clamp(180px, 22vw, 320px) 0 60px; padding-top: 22px; border-top: 1px solid #d7d7d3; }
.cmf-endnote a { padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.cmf-footer { padding: 26px 0 34px; border-top: 1px solid #d7d7d3; }
.cmf-top { position: fixed; right: clamp(18px, 3vw, 42px); bottom: clamp(18px, 3vw, 42px); z-index: 20; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #242424; border-radius: 50%; background: #f8f8f6; color: #242424; font: 22px/1 Arial, sans-serif; }
.cmf-top:hover { background: #242424; color: #fff; }
.cmf-top:focus-visible { outline: 2px solid #242424; outline-offset: 4px; }
@media (max-width: 760px) {
  .cmf-section-head { grid-template-columns: 1fr; gap: 20px; }
  .cmf-panel-intro, .cmf-panel-details { grid-template-columns: 1fr; }
  .cmf-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmf-board { max-width: 330px; }
}
@media (max-width: 520px) {
  .cmf-materials ul { grid-template-columns: 1fr; gap: 0; }
  .cmf-intro-meta, .cmf-endnote { flex-wrap: wrap; }
  .cmf-intro h1 { font-size: 8.5vw; }
  .cmf-tabs :is(button,a) { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) { .cmf-tabs :is(button,a) { transition: none; } }

/* Trim navigation follows the complete material story. */
.cmf-tabs { margin-top: clamp(56px, 7vw, 100px); }
.cmf-panel-intro { scroll-margin-top: 32px; }


.cmf-moodboard { display:grid; grid-template-columns:1fr 3fr; gap:clamp(24px,4vw,64px); margin-bottom:clamp(80px,10vw,150px); }
.cmf-mood-copy h3 { margin:24px 0; font-size:clamp(20px,2vw,28px); font-weight:400; line-height:1.3; letter-spacing:-.04em; }
.cmf-mood-copy p { max-width:260px; font-size:12px; line-height:1.8; }
.cmf-mood-copy .cmf-mood-meta { margin-top:32px; color:#777; font-size:10px; }
.cmf-mood-grid { display:grid; gap:8px; align-content:start; min-width:0; }
.cmf-mood-row { display:flex; gap:8px; align-items:flex-start; min-width:0; }
.cmf-page .cmf-mood-tile { min-width:0; margin:0; }
.cmf-mood-tile svg { display:block; width:100%; height:100%; }
@media(max-width:760px) { .cmf-moodboard { grid-template-columns:1fr; gap:32px; } .cmf-mood-copy p { max-width:480px; } }

.cmf-panel .cmf-moodboard { align-items:start; }
.cmf-panel .cmf-mood-grid { width:100%; justify-self:stretch; max-width:100%; }
.cmf-mood-copy > :last-child { margin-bottom:0; }

@media(min-width:761px) {
  .cmf-panel .cmf-mood-grid { display:flex; gap:8px; align-items:flex-start; }
  .cmf-panel .cmf-mood-row { display:contents; }
}

/* Upright stacked swatches: one card lifts from the stack each cycle. */
#panel-basecamp .cmf-panel-details {grid-template-columns:1fr;}
.cmf-material-motion {margin-top:48px;min-width:0;}
.material-heading {display:flex;justify-content:space-between;align-items:center;gap:24px;}
.material-heading p {font-size:clamp(22px,3vw,36px);margin:18px 0 0;}
.material-motion-toggle {font:inherit;font-size:12px;background:transparent;border:1px solid #ccc;padding:10px 15px;border-radius:30px;cursor:pointer;color:inherit;}
.material-stage {position:relative;height:clamp(480px,52vw,720px);perspective:1600px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 32% 95%,#fff 0%,#f4f4f2 38%,#dededb 100%);margin-top:32px;}
.material-stage::after {content:"";position:absolute;left:25%;bottom:7%;width:50%;height:7%;background:#0002;filter:blur(22px);border-radius:50%;z-index:-1;}
.material-slot {position:absolute;width:clamp(175px,25%,320px);aspect-ratio:1;top:49%;animation:material-lift 6s cubic-bezier(.45,0,.25,1) infinite;transform-style:preserve-3d;}
.material-slot-1 {left:29%;top:53%;animation-delay:0s;z-index:3;}
.material-slot-2 {left:38%;top:49%;animation-delay:-4s;z-index:2;}
.material-slot-3 {left:47%;top:45%;animation-delay:-2s;z-index:1;}
.material-sample {width:100%;height:100%;padding:0;display:block;position:relative;border:1px solid #626365;border-radius:2px;background:#303236;cursor:pointer;transform:rotateX(2deg) rotateY(-24deg) rotateZ(5deg);transform-style:preserve-3d;box-shadow:2px 0 #333,4px 0 #202122,6px 0 #111,16px 18px 24px -16px #0005;transition:filter .25s,outline-color .25s;}
.material-sample::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#fff2,transparent 38%,#0002);box-shadow:inset 1px 1px 1px #fff3;}
.material-sample svg {width:100%;height:100%;display:block;border-radius:2px;overflow:hidden;}
.material-slot.is-selected .material-sample,.material-sample:focus-visible {outline:2px solid #8c9991;outline-offset:6px;filter:brightness(1.15);}
.material-readout {display:flex;align-items:center;justify-content:center;gap:16px;min-height:40px;font-size:15px;margin-top:22px;}
.material-color-chip {height:16px;width:16px;background:#303236;border-radius:50%;border:1px solid #0002;}
.material-hex {font-family:monospace;color:#747474;}
.material-instruction {text-align:center;font-size:11px;color:#858585;margin:12px 0 0;}
.cmf-material-motion.is-paused .material-slot,.cmf-material-motion.is-outside .material-slot,.material-stage:hover .material-slot,.material-stage:focus-within .material-slot {animation-play-state:paused;}
@keyframes material-lift {0%,5%{translate:0 0;}12%,27%{translate:0 -92%;}34%,100%{translate:0 0;}}
@media(max-width:600px){.material-stage{height:480px;}.material-slot{width:42%;min-width:0;}.material-slot-1{left:17%;}.material-slot-2{left:29%;}.material-slot-3{left:41%;}.material-heading{gap:12px;}.material-motion-toggle{font-size:10px;padding:9px;}.material-readout{gap:10px;font-size:12px;}.material-instruction{font-size:10px;}}
@media(prefers-reduced-motion:reduce){.material-slot{animation:none;}.material-motion-toggle{display:none;}.material-slot-1{translate:-30% -65%;}.material-slot-3{translate:30% -30%;}}


/* Compact original-photo swatches, without a scene backdrop or hover lift. */
.material-stage {height:clamp(390px,38vw,520px);background:none;overflow:visible;perspective:1600px;}
.material-stage::after {display:none;}
.material-slot {width:clamp(145px,19%,220px);}
.material-slot-1 {left:32%;top:50%;}
.material-slot-2 {left:40%;top:47%;}
.material-slot-3 {left:48%;top:44%;}
.material-sample {transition:filter .25s,outline-color .25s;box-shadow:2px 0 #333,4px 0 #202122,5px 0 #111,9px 12px 18px -14px #0004;}
.material-sample::after {background:linear-gradient(115deg,#fff1,transparent 38%,#0001);}
@media(max-width:600px){.material-stage{height:370px;}.material-slot{width:32%;min-width:0;}.material-slot-1{left:23%;}.material-slot-2{left:34%;}.material-slot-3{left:45%;}}
@media(prefers-reduced-motion:reduce){.material-slot-1{translate:-30% -45%;}.material-slot-3{translate:30% -25%;}}

.cmf-panel-details:has(.cmf-material-motion) {grid-template-columns:1fr;}
.material-stage-multi .material-slot {left:calc(22% + var(--sample-index) * 9%);top:calc(52% - var(--sample-index) * 3%);z-index:calc(10 - var(--sample-index));}
@media(max-width:600px){.material-stage-multi .material-slot{width:28%;left:calc(9% + var(--sample-index) * 11%);}}
@media(prefers-reduced-motion:reduce){.material-stage-multi .material-slot{translate:0 0;}}

.material-sample {isolation:isolate;}
.material-sample .material-texture {filter:grayscale(1) brightness(var(--texture-brightness,1));mix-blend-mode:luminosity;}

/* Keep trim selection beside the active direction throughout its content. */
.cmf-explorer { display:grid; grid-template-columns:180px minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; margin-top:clamp(65px,9vw,140px); }
.cmf-explorer .cmf-tabs { position:sticky; top:32px; grid-template-columns:1fr; margin-top:0; max-height:calc(100dvh - 64px); overflow-y:auto; }
.cmf-explorer .cmf-tabs :is(button,a) { min-height:72px; padding:18px 16px; align-items:center; }
.cmf-explorer .cmf-panel { min-width:0; padding-top:0; }
@media(max-width:760px) {
.cmf-explorer { grid-template-columns:112px minmax(0,1fr); gap:20px; }
.cmf-explorer .cmf-tabs { top:16px; max-height:calc(100dvh - 32px); }
.cmf-explorer .cmf-tabs :is(button,a) { min-height:64px; padding:14px 10px; gap:8px; font-size:9px; }
.cmf-explorer .cmf-tabs :is(button,a) strong { font-size:12px; }
.cmf-explorer .cmf-panel-intro p { text-align:left; justify-self:start; }
}
@media(max-width:520px) {
.cmf-explorer { grid-template-columns:84px minmax(0,1fr); gap:14px; }
.cmf-explorer .cmf-tabs :is(button,a) { flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
}
/* Buildbook research, redrawn for a presentation rather than a spreadsheet. */
.cmf-research-deck { margin:24px 0 0; max-width:540px; font-size:clamp(15px,1.5vw,20px); line-height:1.6; color:#70716b; }
.benchmark-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,42px); }
.benchmark-card { border-top:1px solid #b9bbb2; padding-top:22px; min-width:0; }
.benchmark-card h3 { font-size:clamp(20px,2vw,28px); font-weight:400; line-height:1.2; letter-spacing:-.04em; margin:20px 0 28px; }
.cmf-page .benchmark-card img { width:100%; height:clamp(100px,10vw,155px); object-fit:cover; background:#dadbd4; }
.benchmark-palette { display:flex; height:12px; gap:3px; margin:14px 0 26px; }
.benchmark-palette i { flex:1; background:var(--swatch); }
.benchmark-card > p, .benchmark-lesson p { font-size:13px; line-height:1.8; margin:0; }
.benchmark-card > p { min-height:116px; color:#61635d; }
.benchmark-lesson { border-top:1px solid #dedfd8; margin-top:24px; padding-top:20px; }
.benchmark-lesson > span, .persona-response > span { display:block; margin-bottom:10px; font-size:10px; letter-spacing:.07em; color:#74776b; }
.cmf-page .cmf-source-note { font-size:10px; line-height:1.7; color:#797b73; margin:28px 0 0; max-width:900px; }
.benchmark-opportunity { background:#e8ebe3; padding:clamp(28px,5vw,72px); margin-top:64px; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,7vw,100px); }
.benchmark-opportunity > .cmf-label { grid-column:1/-1; }
.benchmark-opportunity h3 { font-size:clamp(28px,4vw,54px); font-weight:400; line-height:1.15; letter-spacing:-.05em; margin:30px 0; }
.benchmark-opportunity > p { align-self:center; max-width:440px; font-size:clamp(15px,1.5vw,20px); line-height:1.6; }
.cmf-identity-line { grid-column:1/-1; border-top:1px solid #bbc3b3; padding-top:26px; display:flex; gap:24px; align-items:center; font-size:11px; }
.cmf-identity-line svg { flex:1; width:100px; height:24px; fill:none; stroke:#7b8770; stroke-width:1; }
.cmf-persona-expansion { display:grid; grid-template-columns:1fr 2fr; gap:clamp(32px,8vw,120px); border-top:1px solid #b9bbb2; padding-top:48px; }
.persona-intent h3 { font-size:clamp(32px,4vw,54px); line-height:1.15; font-weight:400; letter-spacing:-.045em; margin:28px 0; }
.persona-intent > p { font-size:14px; line-height:1.8; max-width:360px; }
.persona-scenarios article { padding:0 0 32px; margin-bottom:32px; border-bottom:1px solid #d7d7d3; }
.persona-scenarios article:last-child { margin-bottom:0; }
.persona-scenarios h4 { font-size:24px; line-height:1.3; font-weight:400; letter-spacing:-.03em; margin:18px 0; }
.persona-scenarios p { font-size:14px; line-height:1.8; margin:0; max-width:620px; }
.persona-response { padding-left:20px; margin-top:24px; border-left:2px solid #9aa58d; }
.persona-response p { color:#62665b; }
.cmf-expression-board { margin-top:clamp(80px,10vw,150px); }
.expression-heading { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; margin-bottom:48px; }
.expression-heading > span { grid-column:1/-1; }
.expression-heading h3 { margin:24px 0 0; font-size:clamp(26px,3vw,40px); font-weight:400; letter-spacing:-.04em; }
.expression-heading > p { font-size:14px; line-height:1.8; margin:24px 0 0; max-width:500px; }
.expression-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.expression-grid article { background:#eeeee8; padding:24px; min-width:0; display:flex; flex-direction:column; }

.expression-swatches { display:flex; gap:6px; margin-bottom:34px; height:64px; }
.expression-swatches i { flex:1; background:var(--swatch); }
.expression-swatches i:first-child { flex:2; }
.expression-grid h4 { font-size:clamp(20px,2vw,27px); font-weight:400; line-height:1.25; letter-spacing:-.04em; margin:24px 0 18px; }
.expression-grid p { font-size:13px; line-height:1.8; margin:0 0 28px; }
.expression-cue { margin-top:auto; border-top:1px solid #c9ccc1; padding-top:18px; font-size:10px; letter-spacing:.04em; }
@media(max-width:1000px) {
.benchmark-grid,.expression-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; }
.benchmark-card > p { min-height:0; }
.cmf-page .benchmark-card img { height:180px; }
.cmf-persona-expansion { grid-template-columns:1fr 1.6fr; gap:40px; }
}
@media(max-width:600px) {
.benchmark-grid,.expression-grid,.cmf-persona-expansion,.expression-heading,.benchmark-opportunity { grid-template-columns:1fr; }
.benchmark-card { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.benchmark-card > .cmf-label,.benchmark-card > h3,.benchmark-lesson { grid-column:1/-1; }
.cmf-page .benchmark-card img { height:120px; grid-column:1; }
.benchmark-palette { grid-column:1; margin-top:10px; margin-bottom:0; }
.benchmark-card > p { grid-column:2; grid-row:3/5; font-size:12px; }
.benchmark-lesson { margin-top:24px; }
.benchmark-opportunity { margin-top:40px; }
.benchmark-opportunity h3 { margin-bottom:12px; }
.cmf-identity-line { gap:12px; font-size:9px; margin-top:20px; }
.expression-grid { gap:16px; }
.expression-swatches { height:52px; margin-bottom:24px; }
}

/* Consistent comparison rows and concise presentation copy. */
.benchmark-card { display:grid; grid-template-columns:1fr; grid-template-rows:30px 62px 140px 30px 54px auto; gap:0; align-content:start; }
.benchmark-card h3 { margin:10px 0 22px; font-size:clamp(20px,2vw,28px); }
.cmf-page .benchmark-card img { width:100%; height:140px; object-fit:cover; }
.benchmark-palette { height:10px; margin:10px 0; }
.benchmark-card > p { min-height:0; font-size:12px; line-height:1.7; margin:10px 0 0; }
.benchmark-lesson { margin-top:20px; padding-top:18px; }
.benchmark-lesson p { font-size:13px; line-height:1.65; }
@media(max-width:1000px) { .benchmark-card { grid-template-rows:30px 62px 140px 30px 54px auto; } }
@media(max-width:600px) {
.benchmark-card { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto 140px 30px auto auto; }
.benchmark-card > .cmf-label,.benchmark-card > h3,.benchmark-lesson,.benchmark-card > p,.benchmark-palette,.cmf-page .benchmark-card img { grid-column:1; grid-row:auto; }
.cmf-page .benchmark-card img { height:140px; }
.benchmark-card h3 { margin:18px 0 24px; }
.benchmark-card > p { margin-top:10px; }
}

/* Preserve the full supplied dashboard photos at every screen size. */
.benchmark-card { grid-template-rows:30px 62px auto 30px 54px auto; }
.cmf-page .benchmark-card img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:contain; object-position:center; }
@media(max-width:600px) { .benchmark-card { grid-template-rows:auto auto auto 30px auto auto; } }

/* Benchmark cards show vehicle names, full photos, and CMF takeaways. */
.benchmark-card { grid-template-rows:auto auto auto; }
.benchmark-card > .cmf-label { margin-bottom:18px; }

.benchmark-opportunity > p { justify-self:end; text-align:right; }

.expression-heading > p { justify-self:end; text-align:right; }

/* Overall CMF audience demographics. */
.cmf-user-demographics { max-width:260px; margin:24px 0; }
.cmf-user-demographics > div { display:flex; justify-content:space-between; gap:24px; padding:9px 0; border-bottom:1px solid #d8d8d3; font-size:12px; line-height:1.5; }
.cmf-user-demographics dt { color:#666; }
.cmf-user-demographics dd { margin:0; font-variant-numeric:tabular-nums; }

.cmf-audience-charts { display:grid; grid-template-columns:1fr 1.35fr .85fr; gap:clamp(24px,4vw,64px); margin-top:80px; padding-top:36px; border-top:1px solid #bdbdb7; }
.cmf-audience-card { min-width:0; }
.cmf-audience-card h3 { margin:16px 0 32px; font-size:22px; }
.cmf-gender-values { display:flex; justify-content:space-between; gap:16px; margin-bottom:24px; }
.cmf-gender-values strong { display:block; font-size:clamp(32px,4vw,54px); line-height:1.1; color:#b34c65; }
.cmf-gender-values > :last-child { text-align:right; }
.cmf-gender-values > :last-child strong { color:#427c82; }
.cmf-gender-values span,.cmf-age-heading p span { display:block; margin-top:8px; font-size:11px; color:#777; }
.cmf-gender-bar { display:flex; height:8px; overflow:hidden; border-radius:6px; background:#e8e8e3; }
.cmf-gender-bar i:first-child { width:23%; background:#b34c65; }
.cmf-gender-bar i:last-child { width:77%; background:#427c82; }
.cmf-age-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.cmf-age-heading p { margin:0; text-align:right; }
.cmf-age-heading p strong { font-size:32px; line-height:1.1; }
.cmf-age-row { display:grid; grid-template-columns:52px 1fr 38px; gap:14px; align-items:center; margin-bottom:20px; font-size:13px; }
.cmf-age-row > span { color:#777; }
.cmf-age-row > strong { text-align:right; font-weight:400; }
.cmf-chart-track { height:7px; border-radius:6px; background:#e8e8e3; overflow:hidden; }
.cmf-chart-track i { display:block; height:100%; border-radius:inherit; background:#b34c65; }
.cmf-age-row:nth-child(2) i { opacity:.65; }.cmf-age-row:nth-child(3) i { opacity:.85; }.cmf-age-row:nth-child(4) i { opacity:.55; }.cmf-age-row:nth-child(5) i { opacity:.4; }
.cmf-country-value { display:block; margin:24px 0; color:#b34c65; font-size:clamp(40px,5vw,68px); line-height:1.1; }
.cmf-audience-card > p { margin-top:24px; color:#777; font-size:14px; line-height:1.7; }
.cmf-audience-chart-source { grid-column:1/-1; margin:0; color:#777; font-size:11px; line-height:1.7; }
@media(max-width:900px) { .cmf-audience-charts {grid-template-columns:1fr 1fr;} .cmf-audience-card:last-of-type {grid-column:1/-1;max-width:440px;} }
@media(max-width:560px) { .cmf-audience-charts {grid-template-columns:1fr;gap:40px;} .cmf-audience-card:last-of-type {grid-column:auto;} }

/* Share the moodboard column geometry so the user heading aligns with its images. */
.cmf-user > .cmf-section-head { grid-template-columns:1fr 3fr; column-gap:clamp(24px,4vw,64px); }
@media(max-width:760px) { .cmf-user > .cmf-section-head { grid-template-columns:1fr; } }

/* Consistent strip height across all four trim moodboards. */
@media(min-width:761px) {
  .cmf-panel .cmf-mood-grid { height:clamp(180px,18vw,260px); align-items:stretch; }
  .cmf-panel .cmf-mood-grid .cmf-mood-tile { height:100%; aspect-ratio:auto !important; overflow:hidden; }
}

/* Material rationale: concise overview with deeper technical specifications. */
.cmf-technical-strategy { margin:48px 0; padding:36px 0; border-top:1px solid #cbd0c6; border-bottom:1px solid #cbd0c6; }
.cmf-technical-strategy h3 { font-size:clamp(26px,3vw,42px); font-weight:400; margin:20px 0 32px; }
.cmf-tech-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.cmf-tech-principles article>span { font-size:10px; color:#74776b; }
.cmf-tech-principles h4 { font-size:19px; font-weight:400; margin:14px 0; }
.cmf-tech-principles p,.cmf-tech-notes p { font-size:13px; line-height:1.8; color:#565c54; }
.cmf-tech-notes { margin-top:30px; border-top:1px solid #d6d9d0; padding-top:20px; }
.cmf-tech-notes summary { cursor:pointer; font-size:13px; padding:8px 0; }
.cmf-tech-notes>div { max-width:850px; padding-top:8px; }
.cmf-tech-source a { text-decoration:underline; text-underline-offset:3px; }
.cmf-tech-spec { margin:30px 0 48px; padding-top:24px; border-top:1px solid #cbd0c6; }
.cmf-tech-status { font-size:11px; line-height:1.7; color:#74776b; margin:12px 0 20px; }
.cmf-tech-scroll { overflow-x:auto; }
.cmf-tech-spec table { width:100%; border-collapse:collapse; font-size:12px; line-height:1.75; text-align:left; }
.cmf-tech-spec th,.cmf-tech-spec td { padding:16px 16px 16px 0; border-bottom:1px solid #dedfd8; vertical-align:top; }
.cmf-tech-spec thead th { font-size:10px; color:#74776b; font-weight:400; }
.cmf-tech-spec tbody th { width:22%; font-weight:400; }
.cmf-tech-spec td:nth-child(2) { width:27%; }
.cmf-tech-spec small { display:block; color:#74776b; font-size:10px; }
.cmf-tech-spec i { display:inline-block; width:10px; height:10px; margin-right:8px; background:var(--chip); }
@media(max-width:700px) { .cmf-tech-principles { grid-template-columns:1fr; gap:16px; } .cmf-tech-spec table { min-width:560px; } .cmf-tech-principles h4 { margin:10px 0; } }

/* Icon-led material strategy */
.cmf-line-icon{width:48px;height:48px;display:block;color:#596453;flex-shrink:0}
.cmf-tech-principles article{padding:24px;background:#eef0e9;border-radius:2px}
.cmf-tech-principles h4{margin:20px 0 8px;font-size:19px}
.cmf-tech-principles p{margin:0;font-size:12px;line-height:1.5}
.cmf-surface-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:22px}
.cmf-surface-card{padding:20px;background:#eef0e9;min-width:0}
.cmf-surface-mark{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.cmf-surface-mark>span{width:32px;height:32px;border:1px solid #0001;border-radius:50%}
.cmf-surface-card h4{font-size:15px;font-weight:400;margin:0 0 8px}
.cmf-surface-card p{font-size:11px;line-height:1.5;color:#687060;margin:0 0 16px}
.cmf-surface-use{font-size:11px;line-height:1.5;border-top:1px solid #d5d9ce;padding-top:12px;display:block}
.cmf-validation{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0}
.cmf-validation>span{display:flex;align-items:center;gap:10px;font-size:12px}
.cmf-validation .cmf-line-icon{width:22px;height:22px}
@media(max-width:480px){.cmf-surface-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cmf-surface-card{padding:14px}.cmf-surface-use{font-size:10px}}

/* All trim sections remain visible; the sidebar is an anchor navigation. */
.cmf-panel-stack { min-width:0; }
.cmf-explorer .cmf-tabs a { text-decoration:none; }
.cmf-panel-stack > .cmf-panel { scroll-margin-top:32px; }
.cmf-panel-stack > .cmf-panel + .cmf-panel { margin-top:clamp(72px,10vw,140px); padding-top:40px; border-top:1px solid #cbd0c6; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Static material samples: every surface remains visible and still. */
.cmf-material-motion .material-stage { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(18px,3vw,36px); height:auto; min-height:0; padding:24px 8px; perspective:none; overflow:visible; }
.cmf-material-motion .material-stage .material-slot { position:relative; inset:auto; width:clamp(105px,17%,180px); min-width:0; aspect-ratio:1; animation:none; translate:none; transform:none; }
.cmf-material-motion .material-sample { transform:none; box-shadow:none; }
.cmf-material-motion * { animation:none!important; transition:none!important; }
@media(max-width:600px) { .cmf-material-motion .material-stage .material-slot { width:calc(50% - 18px); max-width:150px; } }