/* Flat 2.0 product stories. Each main panel owns one offset shadow. */
body.landing-composition #top :is(#capabilities, #retro, #ai).rebuild-section { padding: 96px 0; color: #252724; background: #f8f5ec; }
body.landing-composition #top #retro.rebuild-section { background: #f0eff0; }
body.landing-composition #top #ai.rebuild-section { background: #fff; }
body.landing-composition #top .rebuild-section :is(h2,h3,h4,p,figure) { margin: 0; }
body.landing-composition #top .rebuild-heading { margin-bottom: 40px; max-width: 850px; }
body.landing-composition #top .rebuild-heading .familiar-eyebrow { margin-bottom: 24px; }
body.landing-composition #top .rebuild-heading h2 { font: 600 clamp(28px,3vw,40px)/1.15 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
body.landing-composition #top .rebuild-heading > p { margin-top: 20px; max-width: 790px; color: #50534d; font: 400 18px/28px var(--font-sans); }

/* Center every section introduction except hero, pricing, and the final CTA. */
body.landing-composition #top #overview .section-heading, body.landing-composition #top #problem .section-heading, body.landing-composition #top :is(#capabilities,  #retro,  #ai) .rebuild-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  text-align: center;
}
body.landing-composition #top #overview .section-heading > :is(h2,  p), body.landing-composition #top #problem .section-heading > :is(h2,  p), body.landing-composition #top :is(#capabilities,  #retro,  #ai) .rebuild-heading > :is(h2,  p) {
  margin-inline: auto;
  text-align: center;
}
body.landing-composition #top .rebuild-section h3 { font: 600 24px/32px var(--font-sans); color: #252724; }
body.landing-composition #top .rebuild-section h4 { font: 600 18px/26px var(--font-sans); color: #252724; }
body.landing-composition #top .rebuild-section p { color: #50534d; font: 400 16px/24px var(--font-sans); }
body.landing-composition #top .rebuild-copy > p { margin-top: 12px; }
body.landing-composition #top .rebuild-copy > h4 { margin-top: 28px; }
body.landing-composition #top :is(.rebuild-feature-panel,.rebuild-retro-panel,.rebuild-ai-panel) { border: 0; border-radius: 24px; box-shadow: 4px 5px 0 #171817; background: #fff; overflow: hidden; }
body.landing-composition #top .rebuild-goals { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 40px; align-items: center; padding: 36px; }
body.landing-composition #top .rebuild-demo { min-width: 0; overflow: hidden; border-radius: 14px; background: #eeefea; }
body.landing-composition #top .rebuild-demo :is(img,video) { display: block; width: 100%; height: auto; }
body.landing-composition #top .rebuild-decomposition { padding: 36px; background: #eae9ea; }
body.landing-composition #top .rebuild-decomposition > .rebuild-copy { max-width: 740px; margin-bottom: 24px; }
body.landing-composition #top .rebuild-fragments { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
body.landing-composition #top .rebuild-fragments article { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 14px; background: #fff; min-width: 0; }
body.landing-composition #top .rebuild-fragment-image { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 180px; margin-top: auto; padding-top: 16px; }
body.landing-composition #top .rebuild-fragment-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
body.landing-composition #top .rebuild-fragment-image img + img { max-height: 70px; }
body.landing-composition #top .rebuild-fragment-image:has(img + img) img { max-height: 72px; }
body.landing-composition #top .rebuild-tools { margin-top: 40px; }
body.landing-composition #top .rebuild-tools p { margin-top: 8px; }
body.landing-composition #top .rebuild-tools ul { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 20px 0 0; padding: 0; list-style: none; color: #42453f; font-size: 16px; }
body.landing-composition #top .rebuild-integrations { margin-top: 40px; padding: 32px; border-radius: 20px; background: #eae9ea; scroll-margin-top: 96px; }
body.landing-composition #top .rebuild-connected { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-top: 28px; }
body.landing-composition #top .rebuild-connected p { margin-top: 8px; }
body.landing-composition #top .rebuild-upcoming { margin-top: 28px; color: #50534d; font-size: 14px; line-height: 22px; }
body.landing-composition #top .rebuild-action { margin-top: 40px; text-align: center; }
body.landing-composition #top .rebuild-retro-panel { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); padding: 36px; gap: 48px; align-items: center; }
body.landing-composition #top .rebuild-retro-entry { margin: 20px 0 32px; max-width: 360px; }
body.landing-composition #top .rebuild-retro-entry img { display: block; width: 100%; height: auto; }
body.landing-composition #top .rebuild-questions { display: grid; gap: 16px; margin: 24px 0 0; padding-left: 24px; color: #42453f; font: 500 18px/26px var(--font-sans); }
body.landing-composition #top .rebuild-retro-proof { min-width: 0; padding: 20px; border-radius: 16px; background: #eeefea; }
body.landing-composition #top .rebuild-retro-proof img { width: 100%; height: auto; display: block; }
body.landing-composition #top .rebuild-retro-proof figcaption { margin-top: 12px; color: #50534d; font-size: 13px; line-height: 20px; }
body.landing-composition #top .rebuild-ai-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px; gap: 20px; background: #eae9ea; }
body.landing-composition #top :is(.rebuild-ai-task,.rebuild-ai-retro) { padding: 28px; border-radius: 16px; background: #fff; min-width: 0; }
body.landing-composition #top .rebuild-ai-task .rebuild-demo { margin-top: 24px; max-width: 440px; margin-inline: auto; }
body.landing-composition #top .rebuild-ai-retro { display: flex; flex-direction: column; }
body.landing-composition #top .rebuild-summary-flow { margin-block: auto; padding: 32px 0; text-align: center; }
body.landing-composition #top .rebuild-summary-flow > p { border-radius: 12px; background: #f0eff0; padding: 20px; font-size: 18px; }
body.landing-composition #top .rebuild-summary-flow > span { display: block; padding: 16px; color: #555a50; font-size: 28px; }
body.landing-composition #top .rebuild-summary-flow ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.landing-composition #top .rebuild-summary-flow li { border-radius: 10px; padding: 14px 20px; background: #f8f5ec; color: #42453f; text-align: left; font-size: 18px; }
body.landing-composition #top .rebuild-ai-control p { margin-top: 12px; }
body.landing-composition #top .rebuild-ai-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; counter-reset: ai-process; list-style: none; padding: 0; margin: 40px 0; }
body.landing-composition #top .rebuild-ai-steps li { position: relative; padding-left: 36px; counter-increment: ai-process; }
body.landing-composition #top .rebuild-ai-steps li::before { content: counter(ai-process); position: absolute; left: 0; top: 1px; font: 500 20px/28px var(--font-sans); color: #656a60; }
body.landing-composition #top .rebuild-ai-steps h3 { font-size: 18px; line-height: 26px; }
body.landing-composition #top .rebuild-ai-steps p { margin-top: 12px; }
body.landing-composition #top .rebuild-ai-footer { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px; border-radius: 16px; background: #f8f5ec; }
body.landing-composition #top .rebuild-ai-footer > div { max-width: 700px; }
body.landing-composition #top .rebuild-ai-footer h3 { font-size: 20px; line-height: 28px; }
body.landing-composition #top .rebuild-ai-footer p { margin-top: 8px; }
/* Founder and pricing: distinct parent surfaces, calm inner content. */









body.landing-composition #top #price { background: #f0eff0; }
body.landing-composition #top #price .pricing-layout { grid-template-columns: minmax(0,1fr); gap: 40px; justify-items: center; align-items: start; }
body.landing-composition #top #price .pricing-intro { display: block; position: static; width: 100%; max-width: 640px; padding: 0; text-align: center; }
body.landing-composition #top #price .pricing-intro :is(.title, .subtitle) { max-width: none; margin-inline: auto; text-align: center; }
body.landing-composition #top #price .pricing-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 20px; border-radius: 24px; background: #fff; box-shadow: 4px 5px 0 #171817; width: 100%; max-width: 1080px; margin-inline: auto; }
body.landing-composition #top #price .price-card { padding: 24px; background: #f5f4f1; border: 0; box-shadow: none; }
body.landing-composition #top #price .price-card.featured { background: #eeefea; }
body.landing-composition #top #price .price-description { color: #50534d; }
/* The last action is intentionally just a light registration form. */










@media(max-width:1100px) {
 body.landing-composition #top #price .pricing-layout { grid-template-columns: 1fr; }
 body.landing-composition #top .rebuild-fragments article { padding: 20px; }
}
@media(max-width:800px) {
 body.landing-composition #top :is(.rebuild-goals,.rebuild-retro-panel,.rebuild-ai-panel) { grid-template-columns: 1fr; }
 body.landing-composition #top .rebuild-fragments { grid-template-columns: 1fr; }
 body.landing-composition #top .rebuild-fragment-image { max-width: 360px; width: 100%; align-self: center; }
 body.landing-composition #top .rebuild-connected { grid-template-columns: 1fr; gap: 24px; }
 body.landing-composition #top .rebuild-ai-steps { grid-template-columns: 1fr; gap: 24px; }
 body.landing-composition #top .rebuild-ai-footer { flex-direction: column; align-items: flex-start; }
 
 
}
@media(max-width:600px) {
 body.landing-composition #top :is(#capabilities, #retro, #ai).rebuild-section { padding-block: 72px; }
 body.landing-composition #top .rebuild-heading > p { font-size: 16px; line-height: 24px; }
 body.landing-composition #top :is(.rebuild-goals,.rebuild-decomposition,.rebuild-retro-panel,.rebuild-integrations) { padding: 24px 20px; gap: 24px; }
 body.landing-composition #top .rebuild-ai-panel { padding: 12px; gap: 12px; }
 body.landing-composition #top :is(.rebuild-ai-task,.rebuild-ai-retro) { padding: 20px 16px; }
 body.landing-composition #top :is(.rebuild-feature-panel,.rebuild-retro-panel,.rebuild-ai-panel) { border-radius: 20px; box-shadow: 3px 4px 0 #171817; }
 body.landing-composition #top .rebuild-retro-proof { padding: 8px; }
 
 
 body.landing-composition #top #price .pricing-cards { grid-template-columns: 1fr; padding: 12px; }
 body.landing-composition #top #price .price-card { padding: 24px 20px; }
 
 
 
 
 
}

body.landing-composition #top .rebuild-section :is(h2,[id]) { scroll-margin-top: 96px; }
/* Capabilities reference: lead proof, compact examples, then one utility strip. */
body.landing-composition #top #capabilities .rebuild-heading { max-width: 1100px; margin-bottom: 32px; }
body.landing-composition #top #capabilities .rebuild-feature-panel { border-radius: 20px; }
body.landing-composition #top #capabilities .rebuild-goals { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; padding: 24px 28px; }
body.landing-composition #top #capabilities .rebuild-goals .rebuild-copy { max-width: none; }
body.landing-composition #top #capabilities .rebuild-goals h3 { font-size: 28px; line-height: 36px; }
body.landing-composition #top #capabilities .rebuild-goals h4 { margin-top: 20px; padding-top: 0; border: 0; }
body.landing-composition #top #capabilities .capabilities-goal-proof { min-width: 0; overflow: hidden; border-radius: 14px; background: #f0eff0; }
body.landing-composition #top #capabilities .capabilities-goal-proof img { display: block; width: 100%; height: auto; aspect-ratio: 1.55; object-fit: cover; }
body.landing-composition #top #capabilities .rebuild-decomposition { margin-top: 20px; padding: 24px; border-radius: 20px; background: #eae9ea; }
body.landing-composition #top #capabilities .rebuild-decomposition > .rebuild-copy { max-width: none; margin-bottom: 20px; }
body.landing-composition #top #capabilities .rebuild-decomposition > .rebuild-copy p { margin-top: 8px; }
body.landing-composition #top #capabilities .rebuild-fragments { gap: 16px; }
body.landing-composition #top #capabilities .rebuild-fragments article { padding: 20px; gap: 8px; }
body.landing-composition #top #capabilities .rebuild-fragments h4 { font-size: 20px; line-height: 28px; }
body.landing-composition #top #capabilities .rebuild-fragments p { font-size: 15px; line-height: 22px; }
body.landing-composition #top #capabilities .rebuild-fragment-image { height: 128px; padding-top: 12px; align-items: flex-start; justify-content: flex-end; }
body.landing-composition #top #capabilities .rebuild-fragment-image img { width: 100%; max-width: 320px; max-height: 116px; object-fit: contain; object-position: left bottom; }
body.landing-composition #top #capabilities .capabilities-toolbox { margin-top: 20px; padding: 28px 32px; border-radius: 20px; background: #fff; }
body.landing-composition #top #capabilities .rebuild-tools { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1.35fr); column-gap: 28px; margin: 0; }
body.landing-composition #top #capabilities .rebuild-tools h3 { grid-column: 1; }
body.landing-composition #top #capabilities .rebuild-tools p { grid-column: 1; margin-top: 8px; font-size: 14px; line-height: 20px; }
body.landing-composition #top #capabilities .rebuild-tools ul { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-content: flex-end; gap: 8px; margin: 0; }
body.landing-composition #top #capabilities .rebuild-tools li { padding: 10px 14px; border-radius: 10px; background: #f0eff0; font-size: 14px; line-height: 20px; }
body.landing-composition #top #capabilities .rebuild-integrations { margin-top: 24px; padding: 24px 0 0; border-radius: 0; border-top: 1px solid #e5e5df; background: none; }
body.landing-composition #top #capabilities .rebuild-integrations > .rebuild-copy { display: none; }
body.landing-composition #top #capabilities .rebuild-connected { margin: 0; gap: 24px; }
body.landing-composition #top #capabilities .rebuild-connected h4 { font-size: 16px; line-height: 24px; }
body.landing-composition #top #capabilities .rebuild-connected p { font-size: 14px; line-height: 22px; }
body.landing-composition #top #capabilities .rebuild-upcoming { margin-top: 16px; }
body.landing-composition #top #capabilities .rebuild-action { margin-top: 32px; }
@media(max-width:1000px) {
 body.landing-composition #top #capabilities .rebuild-goals { gap: 28px; }
 body.landing-composition #top #capabilities .rebuild-tools { grid-template-columns: 1fr; }
 body.landing-composition #top #capabilities .rebuild-tools ul { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 20px; }
}
@media(max-width:800px) {
 body.landing-composition #top #capabilities .rebuild-goals { grid-template-columns: 1fr; }
 body.landing-composition #top #capabilities .rebuild-goals .rebuild-copy { max-width: none; }
 body.landing-composition #top #capabilities .rebuild-fragment-image { margin-top: 8px; align-self: flex-start; height: auto; min-height: 100px; }
 body.landing-composition #top #capabilities .rebuild-fragment-image img { max-height: none; }
}
@media(max-width:600px) {
 body.landing-composition #top #capabilities :is(.rebuild-goals,.capabilities-toolbox) { padding: 24px 20px; }
 body.landing-composition #top #capabilities .rebuild-decomposition { padding: 20px 12px 12px; }
 body.landing-composition #top #capabilities .rebuild-decomposition > .rebuild-copy { padding-inline: 8px; }
 body.landing-composition #top #capabilities .rebuild-fragments article { padding: 20px; }
}
/* Familiar product icons and original service logos support scanning. */
body.landing-composition #top #capabilities .rebuild-decomposition { background: #f4ebcf; }
body.landing-composition #top #capabilities .capability-heading { display: flex; align-items: center; gap: 14px; }
body.landing-composition #top #capabilities .capability-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #eeefea; color: #424b35; }
body.landing-composition #top #capabilities .capability-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.landing-composition #top #capabilities .rebuild-decomposition .capability-heading > .capability-icon { background: #fff8e5; }
body.landing-composition #top #capabilities .rebuild-tools li { display: inline-flex; align-items: center; gap: 8px; }
body.landing-composition #top #capabilities .rebuild-tools li .capability-icon { width: 20px; height: 20px; border-radius: 0; background: none; }
body.landing-composition #top #capabilities .rebuild-tools li svg { width: 18px; height: 18px; }
body.landing-composition #top #capabilities .capabilities-integrations-title { margin-bottom: 20px; font-size: 18px; line-height: 26px; }
body.landing-composition #top #capabilities .rebuild-connected { grid-template-columns: repeat(4,minmax(0,1fr)); }
body.landing-composition #top #capabilities .capabilities-integration h4 { display: flex; align-items: center; gap: 10px; }
body.landing-composition #top #capabilities .capabilities-integration img { flex: none; object-fit: contain; width: 28px; height: 28px; }
@media(max-width:1000px) {
 body.landing-composition #top #capabilities .rebuild-connected { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 body.landing-composition #top #capabilities .rebuild-connected { grid-template-columns: 1fr; }
 body.landing-composition #top #capabilities .capability-heading { gap: 12px; }
}

/* Compact explanations for recurring tasks and task templates. */
body.landing-composition #top #capabilities .rebuild-fragments .capability-heading { align-items: center; gap: 10px; }
body.landing-composition #top #capabilities .rebuild-fragments .capability-icon { width: 32px; height: 32px; border-radius: 8px; }

/* A separate AI use case, with compact product evidence. */
body.landing-composition #top .rebuild-ai-elephant { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 32px; padding: 28px; border-radius: 16px; background: #fff; min-width: 0; }
body.landing-composition #top .rebuild-elephant-proof { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); align-items: center; gap: 12px; }
body.landing-composition #top .rebuild-elephant-proof figure { margin: 0; min-width: 0; }
body.landing-composition #top .rebuild-elephant-proof figcaption { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: #50534d; }
body.landing-composition #top .rebuild-elephant-proof img { display: block; width: 100%; height: auto; border-radius: 8px; }
body.landing-composition #top .rebuild-elephant-arrow { color: #50534d; font-size: 24px; }
@media (max-width: 800px) {
 body.landing-composition #top .rebuild-ai-elephant { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px; }
 body.landing-composition #top .rebuild-elephant-proof { max-width: 560px; }
}
@media (max-width: 480px) {
 body.landing-composition #top .rebuild-elephant-proof { grid-template-columns: 1fr; max-width: 298px; margin-inline: auto; }
 body.landing-composition #top .rebuild-elephant-arrow { justify-self: center; transform: rotate(90deg); }
}

/* Retro: one editorial panel, with a smaller real product recording. */
body.landing-composition #top #retro.rebuild-section { background: #eee8f2; }
body.landing-composition #top .retro-showcase { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: 48px; padding: 44px; border-radius: 24px; background: #fff; box-shadow: 4px 5px 0 #171817; }
body.landing-composition #top .retro-showcase-copy { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
body.landing-composition #top h3.retro-showcase-title { max-width: 480px; margin: 0 0 32px; font-size: 24px; line-height: 32px; font-weight: 600; }
body.landing-composition #top .retro-benefits { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
body.landing-composition #top .retro-benefits li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; }
body.landing-composition #top .retro-benefit-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f4ebcf; color: #424b35; }
body.landing-composition #top .retro-benefit-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.landing-composition #top .retro-benefits h4 { margin: 0; font-size: 18px; line-height: 25px; font-weight: 600; }
body.landing-composition #top .retro-benefits p { margin: 6px 0 0; font-size: 16px; line-height: 24px; color: #50534d; }
body.landing-composition #top .retro-showcase-action { margin-top: auto; padding-top: 48px; }
body.landing-composition #top .retro-showcase-media { width: 100%; max-width: 480px; min-width: 0; margin: 0; justify-self: center; }
body.landing-composition #top .retro-video-frame { overflow: hidden; border: 1px solid #e4e3dc; border-radius: 16px; background: #f0efea; aspect-ratio: 8 / 9; }
body.landing-composition #top .retro-video-frame :is(video,img) { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1000px) {
 body.landing-composition #top .retro-showcase { gap: 28px; padding: 28px; }
}
@media (max-width: 800px) {
 body.landing-composition #top .retro-showcase { grid-template-columns: 1fr; gap: 36px; }
 body.landing-composition #top .retro-showcase-media { max-width: 440px; }
 body.landing-composition #top .retro-showcase-action { margin-top: 32px; padding-top: 0; }
}
@media (max-width: 480px) {
 body.landing-composition #top .retro-showcase { padding: 24px 18px; border-radius: 20px; box-shadow: 3px 4px 0 #171817; }
 body.landing-composition #top .retro-benefits li { grid-template-columns: 32px minmax(0,1fr); gap: 12px; }
 body.landing-composition #top .retro-benefit-icon { width: 32px; height: 32px; }
 body.landing-composition #top .retro-showcase-action .button { width: 100%; padding-inline: 12px; font-size: 16px; }
}

/* Compact capability proof and utility groups. */
body.landing-composition #top #capabilities .capabilities-goal-proof { width: 100%; max-width: none; justify-self: stretch; border: 1px solid #e4e3dc; background: #eeefea; }
body.landing-composition #top #capabilities .capabilities-goal-proof :is(video,img) { display: block; width: 100%; height: auto; aspect-ratio: 64 / 35; object-fit: contain; }
body.landing-composition #top #capabilities .rebuild-fragments article { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
body.landing-composition #top #capabilities .rebuild-fragments h4 { align-items: flex-start; font-size: 18px; line-height: 25px; }
body.landing-composition #top #capabilities .capability-screenshot { display: flex; align-items: center; justify-content: center; height: 196px; margin-top: 8px; padding: 12px; overflow: hidden; border: 1px solid #dedfd7; border-radius: 12px; background: #f8f9f5; }
body.landing-composition #top #capabilities .capability-screenshot img { display: block; width: 100%; height: auto; max-height: 170px; object-fit: contain; border-radius: 6px; }
body.landing-composition #top #capabilities .capabilities-toolbox { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 32px; padding: 24px 28px; }
body.landing-composition #top #capabilities .rebuild-tools { display: block; }
body.landing-composition #top #capabilities .rebuild-tools h3 { font-size: 20px; line-height: 28px; }
body.landing-composition #top #capabilities .rebuild-tools ul { justify-content: flex-start; margin-top: 16px; gap: 8px; }
body.landing-composition #top #capabilities .rebuild-integrations { margin: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid #e5e5df; }
body.landing-composition #top #capabilities .capabilities-integrations-title { margin-bottom: 16px; font-size: 18px; line-height: 28px; }
body.landing-composition #top #capabilities .rebuild-connected { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; }
body.landing-composition #top #capabilities .rebuild-upcoming { font-size: 13px; line-height: 20px; }
@media (max-width: 800px) {
 body.landing-composition #top #capabilities .capabilities-goal-proof { max-width: 560px; justify-self: center; }
 body.landing-composition #top #capabilities .capabilities-toolbox { grid-template-columns: 1fr; gap: 24px; }
 body.landing-composition #top #capabilities .rebuild-integrations { border-left: 0; border-top: 1px solid #e5e5df; padding: 24px 0 0; }
 body.landing-composition #top #capabilities .capability-screenshot { height: 200px; }
}
@media (max-width: 480px) {
 body.landing-composition #top #capabilities .rebuild-connected { grid-template-columns: 1fr; gap: 14px; }
 body.landing-composition #top #capabilities :is(.rebuild-goals,.capabilities-toolbox) { padding: 20px; }
 body.landing-composition #top #capabilities .capability-screenshot { height: 180px; padding: 10px; }
}

/* Wireframe composition, limited to the three requested sections. */
body.landing-composition #top #problem .comparison-table { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 4px 5px 0 #171817; }
body.landing-composition #top #problem .comparison-legend { grid-template-columns: 40% 60%; margin: 0; padding-block: 20px; border-bottom: 1px solid #e4e3dc; }
body.landing-composition #top #problem .familiar-list { gap: 0; }
body.landing-composition #top #problem .comparison-row { grid-template-columns: 40% 60%; border-radius: 0; box-shadow: none; }
body.landing-composition #top #problem .comparison-row + .comparison-row { border-top: 1px solid #e4e3dc; }
body.landing-composition #top #problem .comparison-row .familiar-card { padding: 28px; min-width: 0; }
body.landing-composition #top #problem .comparison-row .familiar-card--problem { border-right: 1px solid #e4e3dc; }
body.landing-composition #top #problem .comparison-row .comparison-answer { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 24px; }
body.landing-composition #top #problem .familiar-copy h3 { min-height: 0; }
body.landing-composition #top #problem .familiar-quote { margin: 24px 0 0; padding: 20px; }
body.landing-composition #top #problem .comparison-proof { margin: 0; width: 100%; max-width: none; height: 180px; padding: 12px; }
body.landing-composition #top #problem .familiar-solution-list { margin-left: 0; }
body.landing-composition #top #capabilities .capability-directory { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 4px 5px 0 #171817; }
body.landing-composition #top #capabilities .capability-directory-main { padding: 28px 32px 8px; }
body.landing-composition #top #capabilities .capability-directory-intro { padding-bottom: 24px; border-bottom: 1px solid #e4e3dc; }
body.landing-composition #top #capabilities .capability-directory-row { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 32px; padding-block: 28px; }
body.landing-composition #top #capabilities .capability-directory-row + .capability-directory-row { border-top: 1px solid #e4e3dc; }
body.landing-composition #top #capabilities .capability-directory-label h3 { font-size: 20px; line-height: 28px; }
body.landing-composition #top #capabilities .capability-directory-label p { margin-top: 8px; }
body.landing-composition #top #capabilities .capability-directory-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
body.landing-composition #top #capabilities .capability-directory-row:last-child .capability-directory-items { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.landing-composition #top #capabilities .capability-directory-item { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; align-items: start; }
body.landing-composition #top #capabilities .capability-directory-item p { margin-top: 8px; }
body.landing-composition #top #capabilities .capability-directory-item .capability-icon { width: 36px; height: 36px; border-radius: 8px; }
body.landing-composition #top #capabilities .capability-directory-row:nth-child(3) .capability-icon { background: #f4ebcf; }
body.landing-composition #top #capabilities .capability-directory-integrations { padding: 28px 32px; background: #f0eff0; border-top: 1px solid #e4e3dc; scroll-margin-top: 96px; }
body.landing-composition #top #capabilities .capability-directory-integration-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
body.landing-composition #top #capabilities .capability-directory-integration-heading p { margin: 0; }
body.landing-composition #top #capabilities .capability-directory .rebuild-connected { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
body.landing-composition #top #capabilities .capability-directory .capabilities-integration { padding: 16px; border-radius: 12px; background: #fff; }
body.landing-composition #top #ai .ai-scenarios { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
body.landing-composition #top #ai .ai-scenario { display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: 20px; background: #f8f5ec; box-shadow: 4px 5px 0 #171817; }
body.landing-composition #top #ai .ai-scenario-copy h3 { margin: 0; min-height: 64px; }
body.landing-composition #top #ai .ai-scenario-copy p { margin: 12px 0 24px; min-height: 96px; }
body.landing-composition #top #ai .ai-scenario-media { width: 100%; aspect-ratio: 3/4; margin-top: auto; overflow: hidden; border-radius: 12px; background: #fff; }
body.landing-composition #top #ai .ai-scenario-media :is(picture,video,img) { display: block; width: 100%; height: 100%; object-fit: contain; }
body.landing-composition #top #ai .ai-scenario-note { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 36px; padding: 28px 32px; border-radius: 20px; background: #f8f5ec; }
body.landing-composition #top #ai .ai-scenario-note > div { max-width: 760px; }
body.landing-composition #top #ai .ai-scenario-note h3 { font-size: 20px; line-height: 28px; }
body.landing-composition #top #ai .ai-scenario-note p { margin-top: 8px; }
body.landing-composition #top #ai .ai-scenario-note .button { flex-shrink: 0; }
@media(max-width:1100px) {
 body.landing-composition #top #problem .comparison-row .comparison-answer { grid-template-columns: 1fr; }
 body.landing-composition #top #problem .comparison-proof { max-width: 400px; }
 body.landing-composition #top #capabilities .capability-directory .rebuild-connected { grid-template-columns: repeat(2,minmax(0,1fr)); }
 body.landing-composition #top #ai .ai-scenarios { gap: 16px; }
 body.landing-composition #top #ai .ai-scenario { padding: 20px; }
}
@media(max-width:800px) {
 body.landing-composition #top #problem .comparison-legend { display: grid; grid-template-columns: 40% 60%; }
 body.landing-composition #top #problem .comparison-legend-arrow { display: none; }
 body.landing-composition #top #capabilities .capability-directory-row { grid-template-columns: 1fr; gap: 24px; }
 body.landing-composition #top #ai .ai-scenarios { grid-template-columns: 1fr; gap: 24px; }
 body.landing-composition #top #ai .ai-scenario-copy :is(h3,p) { min-height: 0; }
 body.landing-composition #top #ai .ai-scenario-media { max-width: 420px; align-self: center; }
 body.landing-composition #top #ai .ai-scenario-note { flex-direction: column; align-items: flex-start; }
}
@media(max-width:600px) {
 body.landing-composition #top #problem .comparison-row { grid-template-columns: 1fr; }
 body.landing-composition #top #problem .comparison-legend { display: flex; gap: 12px; padding: 20px; }
 body.landing-composition #top #problem .comparison-legend-arrow { display: inline; }
 body.landing-composition #top #problem .comparison-legend > span { padding: 0; }
 body.landing-composition #top #problem .comparison-row .familiar-card { padding: 24px 20px; border-right: 0; }
 body.landing-composition #top #capabilities :is(.capability-directory-main,.capability-directory-integrations) { padding: 24px 20px; }
 body.landing-composition #top #capabilities .capability-directory-items,
 body.landing-composition #top #capabilities .capability-directory-row:last-child .capability-directory-items,
 body.landing-composition #top #capabilities .capability-directory .rebuild-connected { grid-template-columns: 1fr; }
 body.landing-composition #top #capabilities .capability-directory-integration-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* A compact audience interlude, with three situations rather than experience ranks. */






















/* Shared tracks align each problem with its solution, regardless of title length. */
body.landing-composition #top #problem .comparison-legend { position: relative; }
body.landing-composition #top #problem .comparison-legend-arrow { display: block; position: absolute; left: 40%; top: 50%; transform: translate(-50%,-50%); padding: 0; font-size: 24px; color: #38521c; }
body.landing-composition #top #problem .comparison-row { position: relative; }
body.landing-composition #top #problem .comparison-row::after { content: '→'; position: absolute; left: 40%; top: 28px; transform: translateX(-50%); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dedfd7; border-radius: 50%; background: #fff; color: #38521c; font-size: 20px; }
@media(min-width:601px) {
 body.landing-composition #top #problem .comparison-row { grid-template-rows: auto auto auto; }
 body.landing-composition #top #problem .comparison-row .familiar-card { display: grid; grid-template-rows: subgrid; grid-row: 1 / 4; row-gap: 20px; align-items: start; }
 body.landing-composition #top #problem .familiar-card--problem { grid-column: 1; }
 body.landing-composition #top #problem .comparison-answer { grid-column: 2; }
 body.landing-composition #top #problem .comparison-row :is(.familiar-card__body,.familiar-copy) { display: contents; }
 body.landing-composition #top #problem .comparison-row h3 { grid-column: 1; grid-row: 1; margin: 0; }
 body.landing-composition #top #problem .comparison-row :is(.familiar-quote,.familiar-solution-list) { grid-column: 1; grid-row: 2; margin: 0; }
 body.landing-composition #top #problem .comparison-proof { grid-column: 2; grid-row: 1 / 4; align-self: center; }
}
@media(min-width:601px) and (max-width:1100px) {
 body.landing-composition #top #problem .comparison-proof { grid-column: 1; grid-row: 3; }
}
@media(max-width:600px) {
 body.landing-composition #top #problem .comparison-legend-arrow { position: static; transform: none; }
 body.landing-composition #top #problem .comparison-row::after { display: none; }
 body.landing-composition #top #problem .comparison-row .comparison-answer { position: relative; padding-top: 40px; align-items: start; }
 body.landing-composition #top #problem .comparison-answer::before { content: '↓'; position: absolute; top: 4px; left: 20px; color: #38521c; font-size: 24px; }
}

/* Snapshot teaser. Three quote cards (real, shortened customer quotes + a negative
   emoji each) fan in from left / top / right into one central card, whose bottom
   connector drops into the "С xplanner" badge seated on the outcome panel's top
   border. Percentages and the SVG viewBox share one coordinate space so lines stay
   pinned to the card edges at every width. Section sits on a softened sand — warm,
   but paled toward white so the cards (not the ground) carry the eye — distinct from
   both the hero's grey canvas and the saturated sand of "Знакомая ситуация" below.
   No blurred/glow shadows anywhere — flat hard offsets only, matching the rest of
   the site. Weight is deliberately solution-first: the three problem quotes carry
   the lightest shadow in the block, the outcome panel carries the loud
   --landing-accent-shadow (same weight as the hub), so the eye settles on the
   answer, not the complaint. One card radius (20px) everywhere; pills stay 999px,
   avatars stay circular. All spacing on the 4px grid. */
body.landing-composition #top #overview.snapshot-section { padding: 72px 0; background: color-mix(in srgb, #f4ebcf 28%, #fff); }
body.landing-composition #top #overview .snapshot-quote-card { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 160px; padding: 24px; border: none; border-radius: 22px; background: var(--quote-bg, #fff); box-shadow: none; text-align: left; }
body.landing-composition #top #overview .snapshot-quote-card::after { content: ""; position: absolute; bottom: -7px; left: 28px; width: 14px; height: 14px; background: var(--quote-bg, #fff); border: none; border-radius: 0 0 3px 0; transform: rotate(45deg); }
body.landing-composition #top #overview .snapshot-quote-tab { position: absolute; top: -20px; left: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 3px; width: 40px; height: 24px; border-radius: 10px 10px 10px 3px; background: #fff; border: none; }
body.landing-composition #top #overview .snapshot-quote-tab span { width: 4px; height: 4px; border-radius: 50%; background: #2d2d2d; opacity: .55; }
body.landing-composition #top #overview .snapshot-quote-emoji { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: none; overflow: hidden; }
body.landing-composition #top #overview .snapshot-quote-emoji img { width: 39px; height: 39px; object-fit: contain; }
body.landing-composition #top #overview .snapshot-quote-text { flex: 1 1 auto; min-width: 0; margin: 0; color: #2d2d2d; font: italic 400 14px/20px var(--font-sans); }
body.landing-composition #top #overview .snapshot-outcome-caption { margin: 4px 0 0; color: #6b6a63; font: 400 13px/18px var(--font-sans); }
body.landing-composition #top #overview .snapshot-closing { max-width: 480px; margin: 48px auto 0; color: #2d2d2d; font: 600 20px/28px var(--font-sans); text-align: center; }
body.landing-composition #top #overview .familiar-cta { margin-top: 32px; }
body.landing-composition #top #overview .snapshot-cta-row { position: relative; display: inline-flex; width: fit-content; margin-inline: auto; }
body.landing-composition #top #overview .snapshot-cta-doodle { position: absolute; right: calc(100% + 16px); bottom: calc(100% - 8px); display: flex; flex-direction: column; align-items: flex-end; width: max-content; pointer-events: none; }
body.landing-composition #top #overview .snapshot-cta-doodle-text { margin: 0 0 4px; color: #2d2d2d; font-family: var(--font-handnote); font-size: 19px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-align: right; }
body.landing-composition #top #overview .snapshot-cta-doodle svg { width: 60px; height: 40px; stroke: #2d2d2d; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; align-self: flex-end; }
@media (max-width: 860px) {
  body.landing-composition #top #overview .snapshot-cta-doodle { display: none; }
}
@media (max-width: 1000px) {
  body.landing-composition #top #overview .snapshot-quote-card { min-height: 0; padding: 16px; gap: 10px; }
}
@media (max-width: 620px) {
  body.landing-composition #top #overview.snapshot-section { padding: 56px 0; }
  body.landing-composition #top #overview .snapshot-quote-card { min-height: 0; padding: 16px; gap: 10px; }
}

/* Capability group headings use the same line-icon treatment as their items. */
body.landing-composition #top #capabilities .capability-group-heading { display: flex; align-items: center; gap: 10px; }
body.landing-composition #top #capabilities .capability-group-icon { display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px; color: currentColor; }
body.landing-composition #top #capabilities .capability-group-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body.landing-composition #top #overview .snapshot-outcome-media { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: 16px; object-fit: contain; object-position: left top; }

body.landing-composition #top #overview .snapshot-board { display: grid; gap: 36px; margin-top: 56px; }
body.landing-composition #top #overview .snapshot-cols, body.landing-composition #top #overview .snapshot-pair { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.3fr); align-items: center; }
body.landing-composition #top #overview .snapshot-cols { margin-bottom: -8px; }
body.landing-composition #top #overview .snapshot-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 20px 8px 8px; border-radius: 999px; background: #6b5b9e; color: #fff; font-size: 18px; font-weight: 800; white-space: nowrap; box-shadow: 2px 2px 0 rgba(23,24,23,.25); }
body.landing-composition #top #overview .snapshot-chip--muted { background: #ecebe7; color: #2d2d2d; box-shadow: none; }
body.landing-composition #top #overview .snapshot-chip-emoji { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; }
body.landing-composition #top #overview .snapshot-chip-emoji img { display: block; width: 24px; height: 24px; object-fit: contain; }
body.landing-composition #top #overview .snapshot-cols > :first-child { justify-self: start; }
body.landing-composition #top #overview .snapshot-cols > :last-child { grid-column: 3; justify-self: start; }
body.landing-composition #top #overview .snapshot-pair .snapshot-quote-card { position: relative; height: 100%; min-height: 0; }
body.landing-composition #top #overview .snapshot-pair:nth-child(2) { --quote-bg: #f2e7cc; }
body.landing-composition #top #overview .snapshot-pair:nth-child(3) { --quote-bg: #e3ead8; }
body.landing-composition #top #overview .snapshot-pair:nth-child(4) { --quote-bg: #f5dee6; }
body.landing-composition #top #overview .snapshot-pair:nth-child(5) { --quote-bg: #ecebe7; }
body.landing-composition #top #overview .snapshot-pair-arrow { justify-self: center; width: 56px; height: 24px; overflow: visible; }
body.landing-composition #top #overview .snapshot-pair-arrow path { fill: none; stroke: #9a9b96; stroke-width: .875; stroke-linecap: round; }
body.landing-composition #top #overview .snapshot-solution { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 24px; height: 100%; box-sizing: border-box; padding: 20px 24px; border-radius: 22px; background: #fff; box-shadow: var(--landing-card-shadow, 0 2px 12px rgba(23,24,23,.08)); }
body.landing-composition #top #overview .snapshot-solution-title { margin: 0; color: #2d2d2d; font: 700 20px/26px var(--font-sans); letter-spacing: -.01em; }
body.landing-composition #top #overview .snapshot-solution .snapshot-outcome-caption { margin-top: 6px; font-size: 15px; line-height: 20px; }
body.landing-composition #top #overview .snapshot-solution .snapshot-outcome-media { margin: 0; aspect-ratio: 4 / 3; max-height: 140px; object-position: center; }
@media (max-width: 860px) {
  body.landing-composition #top #overview .snapshot-cols { display: none; }
  body.landing-composition #top #overview .snapshot-board { gap: 8px; margin-top: 40px; }
  body.landing-composition #top #overview .snapshot-pair { grid-template-columns: minmax(0, 1fr); row-gap: 8px; margin-bottom: 32px; }
  body.landing-composition #top #overview .snapshot-pair-arrow { transform: rotate(90deg); margin: 8px 0; }
}
@media (max-width: 520px) {
  body.landing-composition #top #overview .snapshot-solution { grid-template-columns: minmax(0, 1fr); }
  body.landing-composition #top #overview .snapshot-solution .snapshot-outcome-media { max-height: none; }
}
body.landing-composition #top #overview .familiar-cta { padding-top: 48px; }

/* Unified system, taken from hero + pricing: flat neutral surfaces, one hard panel
   shadow, one lime accent, 48px line-icon tiles, small flat badges.
   Rhythm: paper / grey backgrounds alternate from hero to signup. */
body.landing-composition:not(.u-off) #top {
  --u-paper: #f8f5ec; --u-grey: #f0eff0; --u-card: #f5f4f1; --u-line: #e4e3dc;
  --u-ink: #252724; --u-text: #50534d; --u-icon: #424b35; --u-lime: #d8f18b;
  --u-panel-shadow: 4px 5px 0 #171817; --u-button-shadow: 2px 2px 0 #171817;
}
body.landing-composition:not(.u-off) #top :is(#overview, #capabilities, #retro, #ai) { padding: 112px 0; color: var(--u-ink); }
body.landing-composition:not(.u-off) #top :is(#capabilities, #retro) { background: var(--u-paper); }
body.landing-composition:not(.u-off) #top :is(#overview, #ai, #price) { background: var(--u-grey); }

/* Section intro: centered eyebrow, h2, lead — the same in every block. */
body.landing-composition:not(.u-off) #top :is(#overview .section-heading, #capabilities .cap2-head, .rebuild-heading) { max-width: 850px; margin: 0 auto 40px; }
body.landing-composition:not(.u-off) #top :is(#overview, #capabilities) .familiar-eyebrow { margin: 0 0 24px; }
body.landing-composition:not(.u-off) #top :is(#overview, #capabilities, #retro, #ai, #price) h2 { margin: 0; color: var(--u-ink); font: 600 clamp(28px,3vw,40px)/1.15 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
body.landing-composition:not(.u-off) #top :is(#overview .section-heading, #capabilities .cap2-head, #price .pricing-heading) > p { max-width: 720px; margin: 20px auto 0; color: var(--u-text); font: 400 18px/28px var(--font-sans); }
body.landing-composition:not(.u-off) #top #price .pricing-heading > p { margin-inline: 0; }


/* One primary button everywhere below the hero. */
body.landing-composition:not(.u-off) #top section:not(.hero) .button-primary { min-height: 44px; padding: 8px 16px; border: 1px solid #2d2d2d; border-radius: 10px; background: var(--u-lime); color: var(--u-ink); box-shadow: var(--u-button-shadow); font: 600 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top section:not(.hero) .button-primary:hover { background: #cae66f; }

/* Overview: problem → answer pairs grouped in one pricing-like panel. */
body.landing-composition:not(.u-off) #top #overview .snapshot-board { gap: 16px; margin-top: 0; padding: 20px; border-radius: 24px; background: #fff; box-shadow: var(--u-panel-shadow); }
body.landing-composition:not(.u-off) #top #overview .snapshot-cols { margin-bottom: 0; padding: 4px 4px 0; }
body.landing-composition:not(.u-off) #top #overview .snapshot-chip { min-height: 30px; gap: 8px; padding: 4px 10px; border: 1px solid #92948c; border-radius: 6px; background: var(--u-lime); color: var(--u-ink); box-shadow: none; font: 500 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top #overview .snapshot-chip--muted { background: var(--u-grey); }
body.landing-composition:not(.u-off) #top #overview .snapshot-pair { --quote-bg: var(--u-card); }
body.landing-composition:not(.u-off) #top #overview .snapshot-quote-card { gap: 14px; padding: 20px; border-radius: 12px; background: var(--u-card); }
body.landing-composition:not(.u-off) #top #overview .snapshot-quote-card::after,
body.landing-composition:not(.u-off) #top #overview .snapshot-quote-tab { display: none; }
body.landing-composition:not(.u-off) #top #overview .snapshot-quote-emoji { width: 48px; height: 48px; border-radius: 10px; background: #fff; color: var(--u-icon); }
body.landing-composition:not(.u-off) #top #overview .snapshot-quote-emoji svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.landing-composition:not(.u-off) #top #overview .snapshot-quote-text { color: #42453f; font: 400 16px/24px var(--font-sans); }
body.landing-composition:not(.u-off) #top #overview .snapshot-pair-arrow path { stroke: var(--u-text); stroke-width: 1.5; }
body.landing-composition:not(.u-off) #top #overview .snapshot-pair-arrow marker path { fill: var(--u-text); stroke: none; }
body.landing-composition:not(.u-off) #top #overview .snapshot-solution { padding: 20px 24px; border: 1px solid var(--u-line); border-radius: 12px; box-shadow: none; }
body.landing-composition:not(.u-off) #top #overview .snapshot-solution-title { font: 600 18px/26px var(--font-sans); letter-spacing: 0; }
body.landing-composition:not(.u-off) #top #overview .snapshot-solution .snapshot-outcome-media { padding: 8px; border-radius: 10px; background: var(--u-grey); }
body.landing-composition:not(.u-off) #top #overview .familiar-cta { margin-top: 0; padding-top: 40px; }

/* Who: light, three plan-like cards in one panel; no glow, no dark scene. */













/* Capabilities: neutral inner cards, pricing-size icons, no lime fill. */
body.landing-composition:not(.u-off) #top #capabilities .cap2-card { border: 0; background: #fcfbf7; box-shadow: var(--u-panel-shadow); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-goal-shell { border: 1px solid var(--u-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,24,23,.08); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-col-title { font: 600 20px/28px var(--font-sans); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-goal { padding-right: 40px; border-right: 1px solid var(--u-line); border-radius: 0; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-goal-shell { flex: 1 1 auto; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-goal-demo { display: flex; flex: 1 1 auto; flex-direction: column; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-goal-demo .product-demo__viewport { flex: 1 1 auto; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-goal-note { position: relative; width: fit-content; max-width: 100%; margin: 18px 0 0 8px; color: #8a8b85; font: 600 20px/22px "Caveat", cursive; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-goal-note svg { position: absolute; left: 100%; bottom: 2px; width: 22px; height: 26px; margin-left: 8px; transform: scaleX(-1); color: #9a9b96; }
@media (max-width: 900px) {
  body.landing-composition:not(.u-off) #top #capabilities .cap2-goal { padding-right: 0; border-right: 0; }
  body.landing-composition:not(.u-off) #top #capabilities .cap2-goal-note { margin-left: 8px; }
  body.landing-composition:not(.u-off) #top #capabilities .cap2-list-wrap { padding-top: 24px; border-top: 1px solid var(--u-line); }
}
body.landing-composition:not(.u-off) #top #capabilities .cap2-ints h3 { font: 600 20px/28px var(--font-sans); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-item + .cap2-item { border-top: 1px solid var(--u-line); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-item h4 { font: 600 16px/22px var(--font-sans); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-item p { margin-top: 4px; color: var(--u-text); font: 400 14px/20px var(--font-sans); }
body.landing-composition #top #capabilities .cap2-feature-icon { display: block; flex: 0 0 46px; width: 46px; height: 46px; object-fit: contain; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-ints { padding-top: 24px; border-top: 1px solid var(--u-line); background: none; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-ints .cap2-note { color: var(--u-text); font: 400 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-int { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 88px; padding: 14px 16px; border: 1px solid var(--u-line); border-radius: 12px; background: #fff; white-space: normal; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-int img { display: block; width: 46px; height: 46px; object-fit: contain; }
body.landing-composition:not(.u-off) #top #capabilities .cap2-int strong { display: block; font: 600 16px/22px var(--font-sans); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-int p { margin: 4px 0 0; color: var(--u-text); font: 400 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top #capabilities .cap2-action { margin-top: 40px; }

/* Retro: calm background, same icon tiles and media frame. */
body.landing-composition:not(.u-off) #top #retro.rebuild-section { background: var(--u-paper); }
body.landing-composition:not(.u-off) #top .retro-showcase { padding: 32px; }
body.landing-composition:not(.u-off) #top .retro-benefits li { grid-template-columns: 48px minmax(0,1fr); }
body.landing-composition:not(.u-off) #top .retro-benefit-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--u-grey); }
body.landing-composition:not(.u-off) #top .retro-benefit-icon svg { width: 24px; height: 24px; }
body.landing-composition #top .retro-benefits li,
body.landing-composition:not(.u-off) #top .retro-benefits li { grid-template-columns: 64px minmax(0, 1fr); }
body.landing-composition #top .retro-benefit-icon,
body.landing-composition:not(.u-off) #top .retro-benefit-icon { display: block; width: 64px; height: 64px; border-radius: 0; background: transparent; object-fit: contain; }
body.landing-composition:not(.u-off) #top .retro-video-frame { border: 0; border-radius: 12px; background: var(--u-grey); }

/* AI: the same panel as pricing; menu items read as plan cards, not lime slabs. */
body.landing-composition:not(.u-off) #top #ai .ai-showcase-media { border-radius: 12px; }
@media (min-width: 801px) {
 body.landing-composition:not(.u-off) #top #ai .ai-showcase { grid-template-columns: 400px minmax(0,1fr); gap: 20px; padding: 20px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--u-panel-shadow); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu { display: grid; grid-auto-rows: 1fr; gap: 8px; margin-bottom: 24px; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item,
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item[aria-selected="true"] { min-height: 0; gap: 16px; padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--u-text); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item:hover { background: var(--u-card); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item[aria-selected="true"] { background: var(--u-card); color: var(--u-ink); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item::before,
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item[aria-selected="true"]::before { display: block; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 0; background-color: transparent; background-size: contain; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item[aria-selected="true"]::before { background-color: transparent; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item,
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item[aria-selected="true"] { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 4px; align-content: start; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-copy { display: contents; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item::before { grid-column: 1; grid-row: 1; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-label { grid-column: 2; grid-row: 1; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item::after { grid-column: 3; grid-row: 1; margin-left: 0; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-description { grid-column: 1 / -1; grid-row: 2; }
 body.landing-composition:not(.u-off) #top #ai :is(.ai-showcase-menu-label, .ai-showcase-menu-item[aria-selected="true"] .ai-showcase-menu-label) { font: 600 20px/28px var(--font-sans); }
 body.landing-composition:not(.u-off) #top #ai :is(.ai-showcase-menu-description, .ai-showcase-menu-item[aria-selected="true"] .ai-showcase-menu-description) { font: 400 16px/24px var(--font-sans); color: var(--u-text); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-panels { border-radius: 12px; background: var(--u-card); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-panel { padding: 24px; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-copy h3 { font: 600 16px/22px var(--font-sans); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-copy p { font: 400 14px/20px var(--font-sans); color: var(--u-text); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-media { background: #fff; }
}
@media (min-width: 1001px) {
 body.landing-composition:not(.u-off) #top #ai .ai-showcase { grid-template-columns: 400px minmax(0,1fr); }
}

/* Story: already on-system; only the quote loses its italic grey bubble. */




@media (max-width: 800px) {
 
 body.landing-composition:not(.u-off) #top #overview .snapshot-board { padding: 12px; }
}
@media (max-width: 600px) {
 body.landing-composition:not(.u-off) #top :is(#overview, #capabilities, #retro, #ai) { padding: 72px 0; }
 body.landing-composition:not(.u-off) #top :is(#overview .section-heading, #capabilities .cap2-head, #price .pricing-heading) > p { font-size: 16px; line-height: 24px; }
 body.landing-composition:not(.u-off) #top #overview .snapshot-quote-card { padding: 16px; }
 body.landing-composition:not(.u-off) #top .retro-showcase { padding: 24px 18px; }
}


/* AI menu: generated lime illustrations for each scenario. */
/* Match the exported frame: no letterboxing or cropped controls at any width. */
body.landing-composition #top #ai .ai-showcase-media { height: auto; aspect-ratio: 16 / 9; }
#ai .ai-showcase-media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Product recordings keep square video edges inside the rounded browser frame. */
body.landing-composition #top #ai :is(#ai-scenario-split, #ai-scenario-checklist, #ai-scenario-retro) .ai-showcase-media,
body.landing-composition #top #ai :is(#ai-scenario-split, #ai-scenario-checklist, #ai-scenario-retro) video { border-radius: 0; }
@media (min-width: 801px) {
 body.landing-composition:not(.u-off) #top #ai #ai-menu-split::before { background-image: url("/landing/icon-u-ai-split-lime-refined.webp"); }
 body.landing-composition:not(.u-off) #top #ai #ai-menu-checklist::before { background-image: url("/landing/icon-u-ai-checklist-lime-refined.webp"); }
 body.landing-composition:not(.u-off) #top #ai #ai-menu-description::before { background-image: url("/landing/icon-u-ai-description-lime-refined.webp"); }
 body.landing-composition:not(.u-off) #top #ai #ai-menu-retro::before { background-image: url("/landing/icon-u-ai-retro-lime-refined.webp"); }
}

body.landing-composition #top #overview .snapshot-solution-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; min-width: 0; }
body.landing-composition #top #overview .snapshot-solution-copy .snapshot-outcome-caption { margin: 0; }
body.landing-composition #top #overview .snapshot-interface-illustration { display: block; width: 100%; height: auto; aspect-ratio: 5 / 1; object-fit: contain; }
@media (max-width: 1100px) {
  body.landing-composition #top #overview .snapshot-solution-copy { gap: 12px; }
}
body.landing-composition #top #overview .snapshot-problem-icon,
body.landing-composition #top #overview .snapshot-solution-icon { flex: 0 0 75px; width: 75px; height: 75px; object-fit: contain; }
body.landing-composition #top #overview .snapshot-cols, body.landing-composition #top #overview .snapshot-pair { grid-template-columns: minmax(0, 2fr) 72px minmax(0, 3fr); }
body.landing-composition:not(.u-off) #top #overview .snapshot-solution-copy .snapshot-quote-emoji { border: 1px solid var(--u-line); box-sizing: border-box; }
@media (max-width: 860px) {
  body.landing-composition #top #overview .snapshot-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Pricing illustrations match the lime landing icon set. */
body.landing-composition #top #price .pricing-plan-icon { display: block; width: 64px; height: 64px; max-width: none; border: 0; border-radius: 0; background: transparent; object-fit: contain; }

/* Retro follows the supplied two-column composition while keeping its original content and media. */
body.landing-composition #top #retro .retro-card { display: grid; grid-template-columns: minmax(0, 1.1333fr) minmax(0, 1fr); column-gap: 64px; align-items: stretch; padding: 32px; border-radius: 24px; background: #fff; box-shadow: var(--u-panel-shadow); }
body.landing-composition #top #retro .retro-showcase { display: contents; }
body.landing-composition #top #retro .retro-showcase-copy { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-self: stretch; padding: 0; }
body.landing-composition #top #retro h3.retro-showcase-title { max-width: 610px; margin: 0 0 8px; color: var(--u-ink); font: 600 24px/32px var(--font-sans); letter-spacing: -.01em; }
body.landing-composition #top #retro .retro-showcase-note { max-width: 610px; margin: 0 0 22px; color: var(--u-text); font: 400 16px/24px var(--font-sans); }
body.landing-composition #top #retro .retro-showcase-action { margin: 24px 0 0; padding: 0; }
body.landing-composition #top #retro .retro-benefits { flex: 1 1 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.landing-composition #top #retro .retro-benefits li,
body.landing-composition:not(.u-off) #top #retro .retro-benefits li { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; min-height: 338px; padding: 20px 18px; border: 1px solid var(--u-line); border-radius: 18px; background: #fff; }
body.landing-composition #top #retro .retro-benefit-icon,
body.landing-composition:not(.u-off) #top #retro .retro-benefit-icon { flex: 0 0 auto; width: 46px; height: 46px; margin-bottom: 16px; }
body.landing-composition #top #retro .retro-benefits h4 { font-size: 18px; line-height: 25px; }
body.landing-composition #top #retro .retro-benefits p { margin-top: 10px; font: 400 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top #retro .retro-shell { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--u-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(23,24,23,.08); transform: none; overflow: hidden; }
body.landing-composition:not(.u-off) #top #retro .retro-shell .screen-topbar { flex: none; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--ink-10); }
body.landing-composition:not(.u-off) #top #retro .retro-shell .screen-topbar::after { display: none; }
body.landing-composition:not(.u-off) #top #retro .retro-shell .retro-video-frame { border-radius: 0; }
body.landing-composition #top #retro .retro-showcase-media { grid-column: 2; grid-row: 1; align-self: center; width: 100%; max-width: none; }
body.landing-composition #top #retro .retro-video-frame,
body.landing-composition:not(.u-off) #top #retro .retro-video-frame { height: auto; min-height: 0; border: 0; border-radius: 20px; background: #eae9ea; aspect-ratio: 8 / 9; }

@media (max-width: 1000px) {
 body.landing-composition #top #retro .retro-card { grid-template-columns: minmax(0, 1fr); }
 body.landing-composition #top #retro .retro-showcase-copy,
 body.landing-composition #top #retro .retro-showcase-media { grid-column: 1; grid-row: auto; }
 body.landing-composition #top #retro .retro-showcase-media { margin-top: 32px; }
 body.landing-composition #top #retro .retro-video-frame,
 body.landing-composition:not(.u-off) #top #retro .retro-video-frame { min-height: 0; aspect-ratio: 8 / 9; }
}
@media (max-width: 600px) {
 body.landing-composition #top #retro .retro-card { padding: 20px 16px; border-radius: 20px; box-shadow: 3px 4px 0 #171817; }
 body.landing-composition #top #retro .retro-benefits { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 body.landing-composition #top #retro .retro-benefits li,
 body.landing-composition:not(.u-off) #top #retro .retro-benefits li { min-height: 0; padding: 18px; }
 body.landing-composition #top #retro .retro-showcase-media { margin-top: 24px; }
}
body.landing-composition #top #price .price-card-head { grid-template-columns: 64px minmax(0, 1fr); }

/* Mobile: section intros stay large, copy inside the blocks reads 4px smaller. */
@media (max-width: 640px) {
  body.landing-composition:not(.u-off) #top :is(#overview .section-heading, #price .section-heading, #price .pricing-heading, #capabilities .cap2-head, #ai .rebuild-heading, #retro .rebuild-heading) > p { font-size: 18px; line-height: 26px; }

  body.landing-composition:not(.u-off) #top #overview :is(.snapshot-quote-text,    .snapshot-outcome-caption), body.landing-composition:not(.u-off) #top #capabilities :is(.cap2-item,    .cap2-int,    .cap2-int p,    .cap2-goal p), body.landing-composition:not(.u-off) #top #ai .ai-showcase-copy p, body.landing-composition:not(.u-off) #top #retro :is(.retro-benefits li,    .retro-benefits li p), body.landing-composition:not(.u-off) #top #price :is(.price-description,    .price-list li) { font-size: 14px; line-height: 20px; }
}

/* Mobile: the outcome reads as caption first, illustration underneath. */
@media (max-width: 640px) {
  body.landing-composition #top #overview .snapshot-solution-copy { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.landing-composition #top #overview .snapshot-solution-copy .snapshot-outcome-caption { order: 1; }
  body.landing-composition #top #overview .snapshot-interface-illustration { order: 2; }
}

/* Mobile: each problem, then its arrow, then its outcome arrives on scroll.
   The arrow keeps the rotation that points it down the stacked column. */
@media (max-width: 640px) {
  html.js-reveal body.landing-composition #top #overview [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .45s ease, transform .45s ease; }
  html.js-reveal body.landing-composition #top #overview [data-reveal].is-revealed { opacity: 1; transform: none; }
  html.js-reveal body.landing-composition #top #overview .snapshot-pair-arrow[data-reveal] { transform: translateY(20px) rotate(90deg); }
  html.js-reveal body.landing-composition #top #overview .snapshot-pair-arrow[data-reveal].is-revealed { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal body.landing-composition #top #overview [data-reveal],
  html.js-reveal body.landing-composition #top #overview [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; }
  html.js-reveal body.landing-composition #top #overview .snapshot-pair-arrow[data-reveal],
  html.js-reveal body.landing-composition #top #overview .snapshot-pair-arrow[data-reveal].is-revealed { transform: rotate(90deg); }
}

/* Story steps, plan descriptions and overview captions use the same type as the integration cards. */


body.landing-composition:not(.u-off) #top #price .price-description { font: 400 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top #overview :is(.snapshot-quote-text, .snapshot-solution .snapshot-outcome-caption) { font: 400 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top #overview .snapshot-chip { font: 600 16px/22px var(--font-sans); }

/* AI menu: every scenario is a bordered card that fills the height of the panel. */
@media (min-width: 801px) {
 body.landing-composition:not(.u-off) #top #ai .ai-showcase { align-items: stretch; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-sidebar { display: flex; flex-direction: column; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu { flex: 1 1 auto; margin-bottom: 0; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item,
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item[aria-selected="true"] { align-content: center; padding: 16px 20px; border: 1px solid var(--u-line); border-radius: 12px; background: #fff; }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item:hover { background: var(--u-card); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-item[aria-selected="true"] { border-color: var(--u-ink); background: var(--u-card); }
 body.landing-composition:not(.u-off) #top #ai .ai-showcase-menu-description { grid-column: 2 / -1; }
}

/* Retro: two cards on top, the third one full width with its icon beside the text. */
body.landing-composition:not(.u-off) #top #retro .retro-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; }
body.landing-composition:not(.u-off) #top #retro .retro-benefits li { min-height: 0; }
body.landing-composition:not(.u-off) #top #retro .retro-benefits li:nth-child(3) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
body.landing-composition:not(.u-off) #top #retro .retro-benefits li:nth-child(3) .retro-benefit-icon { margin-bottom: 0; }
@media (max-width: 600px) {
 body.landing-composition:not(.u-off) #top #retro .retro-benefits { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
 body.landing-composition:not(.u-off) #top #retro .retro-benefits li:nth-child(3) { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 0; }
 body.landing-composition:not(.u-off) #top #retro .retro-benefits li:nth-child(3) .retro-benefit-icon { margin-bottom: 16px; }
}
/* Stacked layout: the recording follows the subtitle, the cards come last. */
@media (max-width: 1000px) {
 body.landing-composition #top #retro .retro-showcase-copy { display: contents; }
 body.landing-composition #top #retro .retro-showcase-title { order: 1; }
 body.landing-composition #top #retro .retro-showcase-note { order: 2; }
 body.landing-composition #top #retro .retro-showcase-media { order: 3; margin: 0 0 24px; }
 body.landing-composition #top #retro .retro-benefits { order: 4; }
 body.landing-composition #top #retro .retro-showcase-action { order: 5; }
}

/* Retro: lime backdrop behind the browser frame and a handwritten note; the frame is inset from the right edge to leave room for the arrow. */
body.landing-composition:not(.u-off) #top #retro .retro-showcase-media { position: relative; isolation: isolate; margin-top: 30px; padding-right: 60px; }
body.landing-composition:not(.u-off) #top #retro .retro-showcase-media::before { content: ""; position: absolute; z-index: -1; right: 28px; bottom: -24px; width: 82%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; background: #ecf5cf; }
body.landing-composition:not(.u-off) #top #retro .retro-shell { position: relative; z-index: 1; }
body.landing-composition:not(.u-off) #top #retro .retro-note { position: absolute; z-index: 2; right: 48px; bottom: calc(100% + 16px); width: max-content; white-space: nowrap; margin: 0; color: #8a8b85; font: 600 20px/22px "Caveat", cursive; text-align: right; }
body.landing-composition:not(.u-off) #top #retro .retro-note svg { position: absolute; top: 100%; left: calc(100% - 4px); width: 30px; height: 38px; margin-top: 2px; color: #9a9b96; }
@media (max-width: 1000px) {
 body.landing-composition:not(.u-off) #top #retro .retro-showcase-media { margin: 64px 0 24px; padding-right: 30px; }
 body.landing-composition:not(.u-off) #top #retro .retro-showcase-media::before { right: 4px; bottom: -12px; }
 body.landing-composition:not(.u-off) #top #retro .retro-note { right: 20px; }
}
@media (max-width: 480px) {
 body.landing-composition:not(.u-off) #top #retro .retro-note { max-width: 210px; white-space: normal; }
}

/* Overview: handwritten aside beside the "В xplanner" chip, arrow down to the first card. */
body.landing-composition:not(.u-off) #top #overview .snapshot-cols > :last-child { grid-row: 1; }
body.landing-composition:not(.u-off) #top #overview .snapshot-doodle { position: relative; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin-right: 96px; color: #8a8b85; font: 600 20px/22px "Caveat", cursive; white-space: nowrap; }
body.landing-composition:not(.u-off) #top #overview .snapshot-doodle svg { position: absolute; top: calc(100% - 16px); right: 100%; width: 37px; height: 42px; margin-top: 0; color: #9a9b96; }

/* Who, variants 2 and 3: two more screens after "Подходит для любого уровня планирования".
   Same intro and call to action, each inside one hard-shadow panel. */
body.landing-composition:not(.u-off) #top .level-path { padding: 112px 0; background: var(--u-grey); color: var(--u-ink); }
body.landing-composition:not(.u-off) #top .level-path .container { max-width: var(--container, 1280px); }
body.landing-composition:not(.u-off) #top .level-panel { position: relative; padding: 40px 52px 36px; border-radius: 24px; background: #fff; box-shadow: var(--u-panel-shadow); }
body.landing-composition:not(.u-off) #top .level-heading { max-width: 850px; margin: 0 auto 40px; text-align: center; }
body.landing-composition:not(.u-off) #top .level-heading h2 { margin: 0; color: var(--u-ink); font: 600 clamp(28px,2.7vw,38px)/1.15 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
body.landing-composition:not(.u-off) #top .level-heading p { max-width: 720px; margin: 16px auto 0; color: var(--u-text); font: 400 18px/28px var(--font-sans); }
body.landing-composition:not(.u-off) #top .level-action { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; text-align: center; }
body.landing-composition:not(.u-off) #top .level-action p { margin: 0; color: var(--u-text); font: 400 16px/24px var(--font-sans); }
body.landing-composition:not(.u-off) #top .level-action small { color: #6b6a63; font: 400 13px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top .level-action .button { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
body.landing-composition:not(.u-off) #top .level-note { position: absolute; color: #8a8b85; font: 600 22px/24px "Caveat", cursive; white-space: nowrap; transform: rotate(-7deg); pointer-events: none; }
body.landing-composition:not(.u-off) #top .level-note svg { position: absolute; width: 27px; height: 34px; color: #9a9b96; }

/* Variant 2: three cards climbing left to right, all standing on the same line. */
body.landing-composition:not(.u-off) #top .level-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 24px; margin: 0 -12px 0 0; padding: 0 0 0 8px; list-style: none; }
body.landing-composition:not(.u-off) #top .level-step { position: relative; display: flex; flex-direction: column; min-height: var(--h); padding: 0 26px 28px; border-radius: 18px; background: linear-gradient(180deg,#f1f7e3,#f7fbef); }
body.landing-composition:not(.u-off) #top .level-step--1 { --h: 356px; --copy: 288px; --img: 240px; --lift: -12px; }
body.landing-composition:not(.u-off) #top .level-step--2 { --h: 400px; --copy: 340px; --img: 290px; --lift: 24px; }
body.landing-composition:not(.u-off) #top .level-step--3 { --h: 440px; --copy: 296px; --img: 290px; --lift: 40px; background: linear-gradient(180deg,#ebf5d3,#f5fbe9); }
body.landing-composition:not(.u-off) #top .level-step img { display: block; width: var(--img); max-width: 100%; height: auto; aspect-ratio: 2 / 1; margin: calc(18px + var(--lift)) auto 0; }
body.landing-composition:not(.u-off) #top .level-step-badge { position: absolute; top: 18px; left: 24px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--u-lime); color: var(--u-ink); font: 700 20px/1 var(--font-sans); }
body.landing-composition:not(.u-off) #top .level-step h3 { margin: 16px 0 0; color: var(--u-ink); font: 600 16px/22px var(--font-sans); }
body.landing-composition:not(.u-off) #top .level-step p { max-width: var(--copy); margin: 8px 0 24px; color: var(--u-text); font: 400 14px/20px var(--font-sans); }
body.landing-composition:not(.u-off) #top .level-step-pill { align-self: center; margin-top: auto; padding: 0 40px; border-radius: 999px; background: rgba(23,24,23,.055); color: var(--u-ink); font: 500 15px/40px var(--font-sans); white-space: nowrap; }

body.landing-composition:not(.u-off) #top .level-step-arrow { position: absolute; top: -34px; right: 26px; color: #8a8b85; }
body.landing-composition:not(.u-off) #top .level-note--path { right: 4px; bottom: calc(100% + 46px); text-align: right; }
body.landing-composition:not(.u-off) #top .level-note--path svg { top: calc(100% + 2px); right: 34px; }

/* Variant 3: mascot on labelled steps beside the same three levels, top one first. */




















@media (max-width: 1100px) {
  body.landing-composition:not(.u-off) #top .level-panel { padding-inline: 32px; }
  body.landing-composition:not(.u-off) #top .level-steps { padding: 0; gap: 16px; }
  body.landing-composition:not(.u-off) #top .level-step { padding-inline: 20px; }
  body.landing-composition:not(.u-off) #top .level-step-badge { left: 18px; }
  
}
@media (max-width: 900px) {
  body.landing-composition:not(.u-off) #top .level-path { padding-block: 72px; }
  body.landing-composition:not(.u-off) #top .level-steps { grid-template-columns: minmax(0,1fr); align-items: stretch; max-width: 520px; margin-inline: auto; }
  body.landing-composition:not(.u-off) #top .level-step { min-height: 0; padding-bottom: 20px; --lift: 0px; }
  body.landing-composition:not(.u-off) #top .level-step-pill { margin-top: 20px; }
  body.landing-composition:not(.u-off) #top .level-step-arrow,
  body.landing-composition:not(.u-off) #top .level-note--path { display: none; }
  
  
  
  
}
@media (max-width: 640px) {
  body.landing-composition:not(.u-off) #top .level-panel { padding: 28px 16px 28px; border-radius: 20px; box-shadow: 3px 4px 0 #171817; }
  body.landing-composition:not(.u-off) #top .level-heading { margin-bottom: 28px; }
  body.landing-composition:not(.u-off) #top .level-heading p { font-size: 18px; line-height: 26px; }
  body.landing-composition:not(.u-off) #top .level-step p, body.landing-composition:not(.u-off) #top .level-action p { font-size: 14px; line-height: 20px; }
  
  
  
  body.landing-composition:not(.u-off) #top .level-action .button { width: fit-content; max-width: 100%; white-space: normal; text-align: center; }
}

/* Final call to action: copy and points on the left, lime sign-up panel on the right, soft lime shape behind. */
body.landing-composition #top .cta-final { scroll-margin-top: 72px; padding: 96px 0 112px; overflow-x: clip; background: #f8f5ec; color: #252724; }
body.landing-composition #top .cta-final-stage { position: relative; max-width: 1280px; margin: 0 auto; }
body.landing-composition #top .cta-final-blob { position: absolute; z-index: 0; left: -150px; top: -84px; width: 420px; height: 480px; fill: #e8f4c9; }
body.landing-composition #top .cta-final-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 672px; align-items: center; column-gap: 40px; padding: 30px 30px 30px 42px; border-radius: 28px; background: #fff; box-shadow: 4px 5px 0 #171817; }
body.landing-composition #top .cta-final-copy h2 { max-width: 520px; margin: 0; color: #171817; font: 700 48px/52px var(--font-sans); letter-spacing: -.035em; }
body.landing-composition #top .cta-final-copy > p { max-width: 470px; margin: 20px 0 0; color: #50534d; font: 400 18px/28px var(--font-sans); }
body.landing-composition #top .cta-final-benefits { display: grid; gap: 4px; margin: 28px 0 0; padding: 0; list-style: none; }
body.landing-composition #top .cta-final-benefits li { display: flex; align-items: center; gap: 18px; color: #4f524b; font: 400 14px/18px var(--font-sans); }
body.landing-composition #top .cta-final-icon { display: block; flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
body.landing-composition #top .cta-final-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 36px 36px 30px; border-radius: 26px; background: #f0eff0; }
body.landing-composition #top .cta-final-lead { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; margin: 0 0 6px; padding: 0 18px 0 12px; height: 37px; border-radius: 999px; background: #fff; color: #171817; font: 600 16px/22px var(--font-sans); }
body.landing-composition #top .cta-final-lead svg { width: 20px; height: 20px; }
body.landing-composition #top .cta-final-field { display: flex; align-items: center; gap: 16px; height: 70px; padding: 0 22px; border: 1px solid #d6d6cf; border-radius: 16px; background: #fff; color: #171817; }
body.landing-composition #top .cta-final-field svg { flex: none; width: 26px; height: 26px; }
body.landing-composition #top .cta-final-field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: #171817; font: 400 19px/26px var(--font-sans); }
body.landing-composition #top .cta-final-field input::placeholder { color: #6f726b; }
body.landing-composition #top .cta-final-field:focus-within { border-color: #171817; box-shadow: 0 0 0 3px rgba(205,235,122,.8); }
body.landing-composition #top .cta-final-field .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
body.landing-composition #top .cta-final-consent { margin: 2px 0 0; color: #85877f; font: 400 13px/18px var(--font-sans); }
body.landing-composition #top .cta-final-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.landing-composition #top .cta-final-submit { height: 76px; margin-top: 4px; padding: 0 24px; border: 1px solid #171817; border-radius: 16px; background: #d6ee83; color: #171817; box-shadow: 2px 4px 0 #171817; font: 700 26px/32px var(--font-sans); cursor: pointer; }
body.landing-composition #top .cta-final-submit:hover { background: #cae66f; }
body.landing-composition #top .cta-final-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; padding: 20px 0 0; border-top: 1px solid #dcdcd8; list-style: none; }
body.landing-composition #top .cta-final-trust li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; color: #4f524b; font: 400 14px/18px var(--font-sans); }
body.landing-composition #top .cta-final-trust li + li { border-left: 1px solid #dcdcd8; }
body.landing-composition #top .cta-final-tile { position: relative; display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: var(--border-hairline); border-radius: 10px; background: #fff; color: #171817; }
body.landing-composition #top .cta-final-tile svg { width: 18px; height: 18px; color: inherit; }
body.landing-composition #top .cta-final-tile i { position: absolute; left: 22px; top: -6px; width: max-content; white-space: nowrap; padding: 0 4px; border-radius: 4px; background: var(--ink); color: #fff; font: 700 8px/12px var(--font-sans); font-style: normal; letter-spacing: .02em; }
@media (max-width: 1220px) {
 body.landing-composition #top .cta-final-blob { left: -80px; }
 body.landing-composition #top .cta-final-card { grid-template-columns: minmax(0, 1fr) 520px; column-gap: 28px; }
 body.landing-composition #top .cta-final-copy h2 { font-size: 40px; line-height: 44px; }
}
@media (max-width: 960px) {
 body.landing-composition #top .cta-final { padding: 72px 0; }
 body.landing-composition #top .cta-final-stage { max-width: 560px; }
 body.landing-composition #top .cta-final-card { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: 28px 18px 18px; }
 body.landing-composition #top .cta-final-copy { padding: 0 6px; }
 body.landing-composition #top .cta-final-copy h2 { font-size: 34px; line-height: 38px; }
 body.landing-composition #top .cta-final-copy > p { font-size: 18px; line-height: 26px; }
 body.landing-composition #top .cta-final-blob { display: none; }
 body.landing-composition #top .cta-final-form { padding: 24px 18px; }
 body.landing-composition #top .cta-final-field { height: 58px; }
 body.landing-composition #top .cta-final-lead { padding-right: 14px; font-size: 14px; white-space: nowrap; }
 body.landing-composition #top .cta-final-submit { height: 64px; font-size: 22px; }
 body.landing-composition #top .cta-final-trust li { flex-direction: column; gap: 8px; padding: 0 4px; font-size: 12px; line-height: 16px; text-align: center; }
}

/* Footer: the sign-off replaces the newsletter card, written by hand. */
footer .footer-help-note { align-self: start; margin: 0; max-width: 260px; color: #B8BBB4; font-size: 16px; font-weight: 400; line-height: 24px; }
footer .footer-bottom .footer-manifesto { color: #fff; font: 700 28px/30px "Caveat", cursive; letter-spacing: 0; white-space: nowrap; }

/* Founder note: long-form story with a portrait in a soft shape, a belief strip and a signature. */
body.landing-composition #top .fn { padding: 112px 0; overflow-x: clip; background: #f8f5ec; color: #252724; }
body.landing-composition #top .fn-stage { position: relative; max-width: 1280px; margin: 0 auto; }
body.landing-composition #top .fn-bg { position: absolute; z-index: 0; border-radius: 50%; background: #eef5d8; }
body.landing-composition #top .fn-bg--left { left: -70px; bottom: 90px; width: 220px; height: 300px; }
body.landing-composition #top .fn-bg--right { right: -70px; top: 170px; width: 240px; height: 340px; }
body.landing-composition #top .fn-card { position: relative; z-index: 1; padding: 34px 44px 20px 56px; border-radius: 28px; background: #fff; box-shadow: 4px 5px 0 #171817; }
body.landing-composition #top .fn-main { display: grid; grid-template-columns: minmax(0, 1fr) 500px; align-items: start; column-gap: 32px; }
body.landing-composition #top .fn-head { position: relative; z-index: 1; max-width: 720px; margin: 0 auto 40px; text-align: center; }
body.landing-composition #top .fn-head h2 { margin: 0; color: var(--u-ink); font: 600 clamp(28px,2.7vw,38px)/1.15 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
body.landing-composition #top .fn-lead { margin: 12px 0 0; color: #6a6c65; font: 400 17px/24px var(--font-sans); }
body.landing-composition #top .fn-body { max-width: 640px; }
body.landing-composition #top .fn-body h3 { margin: 28px 0 8px; color: var(--u-ink); font: 600 16px/22px var(--font-sans); letter-spacing: -.01em; }
body.landing-composition #top .fn-body h3:first-child { margin-top: 0; }
body.landing-composition #top .fn-body p { margin: 0 0 12px; color: #50534d; font: 400 14px/20px var(--font-sans); }
body.landing-composition #top .fn-body > :last-child { margin-bottom: 0; }
body.landing-composition #top .fn-callout { margin: 4px 0 12px; padding: 12px 16px; border-left: 3px solid #7fc62e; border-radius: 0 12px 12px 0; background: #f4f8e8; color: var(--u-ink); font: 500 14px/20px var(--font-sans); }
body.landing-composition #top .fn-list { display: grid; gap: 6px; margin: 8px 0 12px; padding: 0; list-style: none; }
body.landing-composition #top .fn-list li { position: relative; padding-left: 20px; color: #50534d; font: 400 14px/20px var(--font-sans); }
body.landing-composition #top .fn-list li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #7fc62e; }
body.landing-composition #top .fn-photo { position: relative; margin: 0; }
body.landing-composition #top .fn-photo img { display: block; width: 100%; height: auto; aspect-ratio: 450 / 433; object-fit: cover; border-radius: 18px; }
body.landing-composition #top .fn-photo { border-radius: 18px; overflow: hidden; }
body.landing-composition #top .fn-tag { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 2px; padding: 12px 20px 12px 14px; border-radius: 16px; background: #f4f3ea; box-shadow: 0 6px 18px rgba(23,24,23,.08); }
body.landing-composition #top .fn-tag strong { color: #171817; font: 700 15px/20px var(--font-sans); }
body.landing-composition #top .fn-tag span { color: #4f524b; font: 400 14px/20px var(--font-sans); }
body.landing-composition #top .fn-aside { display: grid; gap: 0; align-content: start; min-width: 0; padding: 12px; border-radius: 28px; background: #f7f6f5; }
body.landing-composition #top .fn-belief { padding: 24px 16px 14px; }
body.landing-composition #top .fn-quote { display: flex; align-items: flex-start; gap: 14px; }
body.landing-composition #top .fn-quote-mark { flex: none; margin-top: 2px; color: #7fc62e; font: 700 56px/40px Georgia, serif; }
body.landing-composition #top .fn-quote p { margin: 0; color: #252724; font: 500 16px/24px var(--font-sans); letter-spacing: -.01em; text-wrap: pretty; }
@media (max-width: 1180px) {
 body.landing-composition #top .fn-main { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
 body.landing-composition #top .fn-aside { order: -1; max-width: 500px; }
 body.landing-composition #top .fn-bg { display: none; }
 body.landing-composition #top .fn-br { display: none; }
}
@media (max-width: 640px) {
 body.landing-composition #top .fn { padding-block: 72px; }
 body.landing-composition #top .fn-card { padding: 28px 18px 16px; border-radius: 22px; }
 body.landing-composition #top .fn-lead { font-size: 16px; line-height: 24px; }
 body.landing-composition #top .fn-aside { padding: 10px; }
 body.landing-composition #top .fn-belief { padding: 20px 10px 10px; }
 body.landing-composition #top .fn-quote-mark { font-size: 48px; line-height: 36px; }
 body.landing-composition #top .fn-quote p { font-size: 16px; line-height: 24px; }
}