/* Light editorial palette. Loaded after studio.css. */
:root {
  color-scheme: light;
  --bg: #fafaf8;
  --surface: #f0f0ed;
  --fg: #252522;
  --muted: #676761;
  --red: #b8442b;
  --line: #dcdcd5;
  --paper: #f0f0ed;
  --ink: #252522;
}

body { background: var(--bg); color: var(--fg); }
::selection { color: #252522; background: #f4c9bd; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline-color: #a83d27;
}
h1 em { color: var(--red); }
.intro, .demo-card > p, .carousel-copy > p,
.mcp-section p, .showcase-heading > p, .offer p,
.author, .bonus p, details p { color: #60605a; }
.eyebrow, .proofline, .hero-cost small, .art-top,
.tool-band p, .lesson p, .montage-example p,
.secondary, footer, .logo-credit, .note { color: var(--muted); }
.hero-copy > .eyebrow:before { background: #d36249; }
.hero-cost { color: var(--fg); }
.cta {
  color: #2e211b;
  background: #ee8068;
  box-shadow: 0 1px 0 #24241e0d;
}
.cta:hover { background: #e9745a; }
.cta:disabled { opacity: .78; }

/* Keep the media prominent against a quiet neutral page. */
.poster-deck:before, .poster-deck:after {
  border-color: #c5c5bc;
  background: #e4e4dd;
}
.poster-deck:after { background: #ededE7; }
.poster-deck img { box-shadow: 0 18px 40px #30302724; }
.phone-preview {
  border-color: #e2e2db;
  box-shadow: 0 18px 36px #30302724;
}
.mini-timeline {
  background: #efefea;
  border-color: #d4d4ca;
  box-shadow: 0 6px 18px #3030270d;
}
.mini-timeline span { background: #d77c65; }
.mini-timeline span:nth-child(2) { background: #b8b8a8; }
.mini-timeline span:nth-child(3) { background: #8c8c7e; }
.mini-timeline:after { background: #59594e; }
.hero-video-label { background: #fafaf8ed; color: #282824; }
.brand-product .logo-openai { filter: none; }
.brand-slash { color: #8a8a80; }
.tool-band .mcp-badge { border-color: #c7c7bd; color: #626259; }

/* Existing carousels remain usable while the new gallery loads. */
.sample.carousel, .real-carousel-preview { background: #eeeee8; }
.sample.carousel img { box-shadow: 0 15px 32px #29291e20; }
.carousel-style {
  background: transparent;
  color: #56564f;
  border-color: #c6c6bc;
}
.carousel-style:hover { border-color: #9b9b90; background: #f0f0ea; }
.carousel-style.active { background: #f3d0c5; border-color: #e1aa98; color: #57352a; }
.real-carousel-controls button, .demo-card button, .copy-prompt {
  color: var(--fg);
  background: #fff;
  border-color: #bdbdb3;
}
.real-carousel-controls button:hover, .demo-card button:hover,
.copy-prompt:hover { background: #eaeae3; border-color: #99998c; }
.carousel-loading { background: #eeeeE5a6; }
.real-carousel-preview > p { background: #f8e8de; color: #784634; }
.sample.postimly-art { background: #ecece6; color: var(--fg); }
.postimly-art .mono { color: #68685e; }
.flow-row { border-color: #ccccc0; }
.flow-row em { color: #7e5c4a; }

/* Two examples, with the video itself kept as the visual focus. */
.montage-media, .comparison-video {
  background: #ecece6;
  border-color: #d4d4ca;
  box-shadow: 0 10px 28px #3232280b;
}
.montage-media video, .comparison-video video { background: #eeeee8; }
.comparison-cover { background: #ecece6; color: var(--fg); }
.montage-comparison h3 { color: var(--fg); }
.montage-comparison p { color: #62625a; }
.video-index { background: #fafaf8ed; color: #38382f; }
.montage-gallery { scrollbar-color: #acaca0 #eaeae3; }

/* The agent workspace uses the same daylight palette as the page. */
.workspace {
  background: #fff;
  border-color: #d4d4ca;
  box-shadow: 0 12px 40px #2b2b2109;
}
.workspace-bar { background: #f4f4ef; border-color: #ddddd4; }
.workspace-bar span:last-child { color: #73533f; }
.workspace-prompt .mono { color: #a3452e; }
.workspace-prompt p { color: #40403a; }
.workspace-steps { background: #efefE8; }
.workspace-steps span { color: #a3452e; }
.workspace-steps b { color: #48483f; }
.copy-status { color: #80503a; }

.day { border-color: #a9a99a; }
.day-no { color: #9a4631; }
.lesson > span { color: #77776a; }
.author b { color: var(--fg); }
.offer .eyebrow { color: #9a4631 !important; }
.offer li { border-color: var(--line); }
.offer li:before { content: none; }
.offer > div:last-child {
  background: #eeeee8;
  border: 1px solid #ddddd2;
  color: var(--fg);
}
.offer > div:last-child p { color: #626259; }
.offer .quiet { color: #68685e !important; }
.purchase-inline { color: #81533e; }
summary { color: #30302a; }
summary:hover { color: #a3452e; }
details[open] summary { color: #a3452e; }
dialog { background: #fafaf8; border-color: #c7c7bc; }
dialog::backdrop { background: #2a2a246b; }

@media (max-width: 760px) {
  .montage-gallery { scrollbar-color: #acaca0 #eaeae3; }
}

/* Content-first hero with a separate canvas for the actual work. */
.hero{padding:55px 0 55px;gap:55px;grid-template-columns:1.08fr 1fr}.hero-copy>.eyebrow{font:600 11px/1.5 Manrope,sans-serif;text-transform:none;letter-spacing:0;color:#55514d}.hero-copy>.eyebrow:before{display:none}h1{font-size:clamp(44px,4.5vw,65px);line-height:1.07;letter-spacing:-2.8px;margin:20px 0 24px}.hero-product-title{margin:0 0 20px}.hero-product-title>span{color:var(--fg)}.hero-promise{max-width:490px}.intro{font-size:17px;line-height:1.65;margin-bottom:12px}.intro strong{font-weight:600;color:#252522}.hero-route{font-size:14px;line-height:1.7;color:#68645e;max-width:455px;margin-bottom:0}.hero .cta{border-radius:8px;padding:17px 23px;font-size:14px;box-shadow:0 4px 12px #ba55301c}.proofline{font-size:10px;color:#6e6b64}.hero-art{background:#ddd8e9;border:1px solid #d4cde1;border-radius:26px;padding:25px 22px 15px;box-shadow:inset 0 1px 0 #ffffff9c}.art-stage{aspect-ratio:.92}.poster-deck{left:3%;top:6%;width:66%;transform:rotate(-8deg)}.poster-deck:before{background:#c3bad4;border-color:#aaa0bd;transform:rotate(7deg)}.poster-deck:after{background:#eeeaf3;border-color:#b7adc8;transform:rotate(13deg)}.poster-deck img{box-shadow:0 16px 28px #34224538;border:1px solid #d7cec4}.phone-preview.real-reel-cover{width:42%;right:0;bottom:12%;border:5px solid #27252b;border-radius:20px;background:#27252b;box-shadow:0 17px 32px #281e3b4d;transform:rotate(7deg);aspect-ratio:9/16}.hero-reel{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.hero-result-label{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#51465f;font-size:12px;font-weight:600;letter-spacing:-.1px}.phone-preview:hover{transform:rotate(4deg)}
@media(max-width:1050px) and (min-width:761px){.hero{gap:28px}.hero-art{padding:15px 12px 12px}h1{font-size:49px}.intro{font-size:15px}.hero-route{font-size:13px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:29px;padding:30px 0 35px}.hero-copy>.eyebrow{font-size:10px}h1{font-size:clamp(38px,10.4vw,60px);line-height:1.07;letter-spacing:-2px;margin:18px 0 20px}.intro{font-size:16px;line-height:1.6}.hero-route{font-size:13px;line-height:1.7}.hero .cta{font-size:12px;padding:15px 17px}.hero-cost{font-size:23px}.hero-art{padding:15px 16px 13px;border-radius:22px}.art-stage{aspect-ratio:1.02;max-width:440px}.poster-deck{top:4%;width:61%;left:6%}.phone-preview.real-reel-cover{width:35%;bottom:12%;right:4%;border-width:4px;border-radius:16px}.hero-result-label{font-size:11px}.proofline{font-size:9px}.actions{gap:16px}}

/* A real carousel stack in the opening frame. */
.poster-deck{aspect-ratio:3/4;transform:none;transition:none;isolation:isolate}
.poster-deck:hover{transform:none}
.poster-deck:before,.poster-deck:after{content:none}
.poster-deck .hero-carousel-card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;border:1px solid #d7cec4;box-shadow:0 16px 28px #34224538;transition:transform .72s cubic-bezier(.2,.7,.15,1),opacity .72s ease;will-change:transform}
.poster-deck .hero-carousel-card[data-carousel-position="0"]{z-index:4;transform:rotate(-8deg);opacity:1}
.poster-deck .hero-carousel-card[data-carousel-position="1"]{z-index:3;transform:translate(3%,0) rotate(1deg) scale(.985);opacity:.95}
.poster-deck .hero-carousel-card[data-carousel-position="2"]{z-index:2;transform:translate(6%,0) rotate(7deg) scale(.97);opacity:.92}
.poster-deck .hero-carousel-card[data-carousel-position="3"]{z-index:1;transform:translate(9%,0) rotate(13deg) scale(.955);opacity:.9}
@media(prefers-reduced-motion:reduce){.poster-deck .hero-carousel-card{transition:none;will-change:auto}}

/* Article-style sales narrative: readable, measured, and part of the existing page. */
.editorial-story {
  padding: clamp(58px, 8vw, 100px) 0;
  border-top: 1px solid var(--line);
}
.story-narrow { max-width: 780px; margin: 0 auto; }
.editorial-story .eyebrow { color: var(--red); }
.editorial-story h2 {
  max-width: 850px;
  margin: 16px 0 28px;
  color: var(--fg);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.editorial-story p {
  max-width: 780px;
  margin: 0 0 20px;
  color: #60605a;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.8;
}
.story-quote {
  margin: 34px 0;
  padding: 5px 0 5px 24px;
  border-left: 3px solid var(--red);
  color: var(--fg);
  font-size: clamp(23px, 3.1vw, 34px);
  line-height: 1.35;
  letter-spacing: -.03em;
}
.story-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 52px;
  margin-top: 38px;
  border-top: 1px solid var(--line);
}
.story-blocks article { padding: 25px 0 30px; border-bottom: 1px solid var(--line); }
.story-index, .role-number {
  color: var(--red);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.story-blocks h3 {
  margin: 13px 0 9px;
  color: var(--fg);
  font-size: 23px;
  line-height: 1.22;
  letter-spacing: -.025em;
}
.editorial-story .story-blocks p { margin: 0; font-size: 15px; line-height: 1.75; }
.role-chain {
  max-width: 980px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.role-chain li {
  display: grid;
  grid-template-columns: 44px 205px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
}
.role-chain h3 { margin: 0; color: var(--fg); font-size: 18px; }
.editorial-story .role-chain p { margin: 0; font-size: 15px; line-height: 1.65; }
.story-producer-card {
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
}
.story-producer-card h2 { max-width: 760px; }
.story-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 32px 0;
  border: 1px solid #d4d4ca;
}
.story-flow span {
  padding: 17px 14px;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
  border-right: 1px solid #d4d4ca;
}
.story-flow span:last-child { border-right: 0; }
.story-flow small {
  display: block;
  margin-bottom: 8px;
  color: var(--red);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.editorial-story .story-producer-note { margin: 28px 0 0; }

@media (max-width: 760px) {
  .editorial-story { padding: 58px 0; }
  .story-narrow { width: 100%; }
  .editorial-story h2 { font-size: clamp(32px, 9vw, 43px); }
  .editorial-story p { font-size: 15px; line-height: 1.75; }
  .story-blocks { grid-template-columns: 1fr; gap: 0; margin-top: 27px; }
  .story-blocks h3 { font-size: 21px; }
  .role-chain { margin-top: 28px; }
  .role-chain li { grid-template-columns: 30px 1fr; gap: 8px 13px; padding: 18px 0; }
  .role-chain h3 { font-size: 17px; }
  .editorial-story .role-chain p { grid-column: 2; font-size: 14px; }
  .story-producer-card { padding: 25px 20px; }
  .story-flow { grid-template-columns: 1fr 1fr; }
  .story-flow span { border-bottom: 1px solid #d4d4ca; }
  .story-flow span:nth-child(2) { border-right: 0; }
  .story-flow span:nth-child(n+3) { border-bottom: 0; }
}

/* White button labels; the purchase button retains its dark label. */
body .cta,body .sticky-cta,body .homepage-carousel-card{color:#fff}
body #purchase.cta{color:#2e211b}
body .homepage-carousel-nav,body .homepage-carousel-dialog button{color:#fff}
body .homepage-carousel-nav,body .hc-viewer-head button,body .hc-viewer-controls button,body .hc-viewer-media [data-hc-error] button{background:#252522;border-color:#252522}
body .homepage-carousel-nav:hover,body .hc-viewer-head button:hover,body .hc-viewer-controls button:hover,body .hc-viewer-media [data-hc-error] button:hover{background:#44433e;border-color:#44433e}

body a.cta{background:#ee4b17;color:#fff}
body a.cta:hover{background:#d94112}

/* Center the tool logos after removing their introductory caption. */
.tool-band.branded-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(32px,6vw,90px)}
@media(max-width:760px){.tool-band.branded-tools{flex-direction:column;gap:24px}}