/* M1 Studio Growth Roadmap components: homepage hero and sections (in the main bundle,
   see tools/bundle-src/m1-home.js) and the /roadmap/ page. Uses the site's fonts
   (Fraunces, Lato, Roboto Mono), paper #f4f3ed, ink #000 and CTA blue #2563eb. */

/* ---------- Hero (replaces the scroll-sequence hero) ---------- */
.m1-hero{position:relative;text-align:center;overflow:hidden;background:#fff;border-bottom:1px solid #e6e5dd;
  padding:clamp(104px,14vh,150px) var(--u-gutter,32px) clamp(64px,8vw,104px)}
.m1-hero-copy{position:relative;z-index:2;max-width:1000px;margin:0 auto}
.m1-hero-eyebrow{justify-content:center;color:#5f5f5f;margin:0 0 20px}
.m1-hero .m1-hero-title{margin:0 auto;font-size:clamp(46px,6.6vw,104px);line-height:1.02}
.m1-hero-sub{max-width:40ch;margin:24px auto 0;color:#555;font-size:clamp(17px,1.45vw,21px);line-height:1.55}
.m1-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.m1-btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;
  border:1px solid #cfcfc8;border-radius:12px;background:#fff;color:#000;font:500 16px/24px Lato,Arial,sans-serif;
  text-decoration:none;transition:border-color .2s,color .2s}
.m1-btn-ghost:hover{border-color:#2563eb;color:#2563eb}
.m1-btn-ghost:focus-visible,.m1-text-link:focus-visible,.m1-rail-roadmap:focus-visible,.m1-faq summary:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
.m1-text-link{display:inline-block;margin-top:18px;color:#2563eb;font-size:14px;text-decoration:none}
.m1-text-link:hover{text-decoration:underline}
.m1-hero-proof{margin:26px auto 0;color:#5f5f5f;font:12px/1.7 "Roboto Mono",monospace;letter-spacing:.07em;text-transform:uppercase}

/* The roadmap "document" illustration under the hero copy. */
.m1-hero-doc{position:relative;width:min(500px,100%);height:440px;margin:60px auto 0}
.m1-doc{position:absolute;inset:0;border:1px solid #e3e2da;border-radius:18px;background:#fff;
  box-shadow:0 34px 80px -34px #1e285059}
.m1-doc-back{background:#f4f3ed;transform:rotate(-6deg) translate(-22px,16px)}
.m1-doc-mid{background:#fbfaf6;transform:rotate(3.5deg) translate(16px,6px)}
.m1-doc-front{display:flex;flex-direction:column;padding:28px 30px 24px;text-align:left}
.m1-doc-top{display:flex;justify-content:space-between;align-items:center;color:#5f5f5f;font:11px "Roboto Mono",monospace;letter-spacing:.12em}
.m1-doc-title{margin-top:24px;font:400 clamp(28px,3vw,36px)/1.06 Fraunces,Georgia,serif;letter-spacing:-.04em}
.m1-doc-title em{font-style:italic;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(120deg,#e03a3e,#c2257a 30%,#7c3aed 60%,#1d4ed8)}
.m1-doc-meta{margin-top:10px;color:#5f5f5f;font-size:12px}
.m1-doc-toc{margin:auto 0 0;padding:0;list-style:none;border-top:1px solid #eeede7}
.m1-doc-toc li{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid #f1f0ea;font-size:14px;line-height:1.35}
.m1-doc-toc span{min-width:18px;padding-top:2px;color:#2563eb;font:11px "Roboto Mono",monospace}
.m1-doc-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;color:#5f5f5f;font:11px "Roboto Mono",monospace;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Sections ---------- */
.m1-sec{padding:var(--u-space,96px) var(--u-gutter,40px)}
.m1-paper{background:#f4f3ed;color:#000}
.m1-white{background:#fff;color:#000;border-bottom:1px solid #e6e5dd}
.m1-dark{background:#000;color:#fff}
.m1-dark .f-index{color:#a7a69f}
.m1-head{max-width:780px;margin-bottom:48px}
.m1-head h2,.m1-sam h2{margin:20px 0 0;font:400 clamp(38px,4.8vw,72px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.045em}
.m1-head h2 em,.m1-sam h2 em{font-style:italic;font-weight:400}
.m1-lead{max-width:54ch;margin-top:22px;color:#555;font-size:18px;line-height:1.6}
.m1-dark .m1-lead{color:#aaa9a3}
.m1-num{color:#2563eb;font:12px/1.6 "Roboto Mono",monospace;letter-spacing:.08em}
.m1-parts,.m1-steps,.m1-ladder{margin:0;padding:0;list-style:none}

.m1-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.m1-parts li{min-height:210px;padding:28px 26px 30px;border:1px solid #deddd3;border-radius:16px;background:#fff}
.m1-parts h3{margin:34px 0 10px;font:400 26px/1.15 Fraunces,Georgia,serif;letter-spacing:-.03em}
.m1-parts p,.m1-ladder p{color:#555;font-size:15px;line-height:1.6}

.m1-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.m1-steps li{padding-top:22px;border-top:1px solid #333}
.m1-steps .m1-num{color:#7ea3ff}
.m1-steps h3{margin:18px 0 10px;font:400 28px/1.1 Fraunces,Georgia,serif;letter-spacing:-.03em}
.m1-steps p{color:#aaa9a3;font-size:15px;line-height:1.6}

.m1-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.m1-ladder li{position:relative;padding:26px 26px 28px;border:1px solid #deddd3;border-radius:16px;background:#fff}
.m1-ladder li.is-first{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}
.m1-ladder li+li:before{content:"→";position:absolute;top:50%;left:-16px;display:grid;place-items:center;width:28px;height:28px;
  border:1px solid #deddd3;border-radius:50%;background:#fff;color:#2563eb;font-size:14px;transform:translate(-50%,-50%)}
.m1-ladder h3{margin:18px 0 0;font:700 15px/1.4 Lato,Arial,sans-serif}
.m1-price{display:block;margin:8px 0 14px;font:400 56px/1 Fraunces,Georgia,serif;letter-spacing:-.045em}
.m1-price small{font:400 .36em/1 Lato,Arial,sans-serif;letter-spacing:0;color:#555}
.m1-ladder p.m1-price-sub{margin:-6px 0 12px;color:#111;font-weight:700;font-size:14px}
.m1-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:40px}
.m1-note{color:#666;font-size:14px;line-height:1.6}
.m1-note a{color:#2563eb}

.m1-sam{display:grid;grid-template-columns:minmax(220px,.75fr) 1.6fr;align-items:center;gap:clamp(32px,5vw,80px)}
.m1-sam-figure{margin:0}
.m1-sam-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid #deddd3;border-radius:18px;background:#e9e8df}
/* Homepage: two photos stacked like the hero roadmap cards. */
.m1-sam-cards{position:relative;padding:0 14% 20% 0}
.m1-sam-main{display:block}
.m1-sam-second{position:absolute;right:0;bottom:0;width:50%;transform:rotate(3.5deg);transform-origin:center}
.m1-sam-second img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:7px solid #fff;border-radius:14px;
  background:#fff;box-shadow:0 34px 80px -34px #1e285059,0 8px 24px -12px #1e285040}
.m1-sam-figure figcaption{margin-top:12px;color:#5f5f5f;font:12px/1.6 "Roboto Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.m1-sam h2{font-size:clamp(32px,3.6vw,54px);line-height:1.1}
.m1-sam-copy>p:not(.f-index):not(.m1-lead){max-width:54ch;margin-top:14px;color:#555;font-size:16px;line-height:1.7}
.m1-clients{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.m1-clients a{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border:1px solid #deddd3;border-radius:999px;
  background:#fff;color:#000;font-size:14px;text-decoration:none}
.m1-clients a:hover{border-color:#2563eb}
.m1-clients img{width:30px;height:30px;padding:3px;border-radius:50%;background:#fff;object-fit:contain}
.m1-clients a[href$="vk"] img,.m1-clients img[src$="vk-logo.svg"]{background:#000}

.m1-faq{max-width:920px;border-bottom:1px solid #ddd}
.m1-faq details{border-top:1px solid #ddd}
.m1-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;
  font:400 clamp(20px,1.8vw,24px)/1.3 Fraunces,Georgia,serif;letter-spacing:-.02em}
.m1-faq summary::-webkit-details-marker{display:none}
.m1-faq summary b{flex:none;font:300 26px/1 Lato,Arial,sans-serif;transition:transform .3s}
.m1-faq details[open] summary b{transform:rotate(45deg)}
.m1-faq details>p,.m1-faq details>div{max-width:70ch;padding:0 0 24px;color:#555;font-size:16px;line-height:1.7}
.m1-faq a{color:#2563eb}

/* ---------- Sidebar card and footer contact line (homepage) ---------- */
.m1-rail-roadmap{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid #d6d8cc;border-radius:12px;
  background:#fff;color:#000;text-decoration:none;transition:border-color .2s}
.m1-rail-roadmap:hover{border-color:#2563eb}
.m1-rail-roadmap small{color:#5f5f5f;font:11px/1.6 "Roboto Mono",monospace;letter-spacing:.08em}
.m1-rail-roadmap strong{font:400 17px/1.2 Fraunces,Georgia,serif;letter-spacing:-.02em}
.m1-rail-roadmap span{color:#2563eb;font-size:12px}
.m1-footer-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0 0 22px;font-size:14px}
.m1-footer-contact a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Responsive ---------- */
@media (width<=1100px){.m1-parts{grid-template-columns:1fr 1fr}.m1-steps{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (width<=999px){.m1-hero .m1-hero-nav{display:none}.m1-hero{padding-top:64px}}
@media (width<=860px){
  .m1-ladder{grid-template-columns:1fr}
  .m1-ladder li+li:before{top:-16px;left:50%;transform:translate(-50%,-50%) rotate(90deg)}
  .m1-sam{grid-template-columns:1fr}
  .m1-sam-figure{width:100%;max-width:320px}
}
@media (width<=700px){
  .m1-sec{padding:72px 22px}
  .m1-parts,.m1-steps{grid-template-columns:1fr}
  .m1-parts li{min-height:0;padding:24px 22px}
  .m1-parts h3{margin-top:16px}
  .m1-head{margin-bottom:36px}
  .m1-head h2{font-size:40px}
  .m1-sam h2{font-size:32px}
  .m1-lead{font-size:16px}
  .m1-hero{padding:44px 18px 60px}
  .m1-hero .m1-hero-title{margin:0;font-size:clamp(40px,11.5vw,60px);line-height:1.06}
  .m1-hero-sub{font-size:16px}
  .m1-hero-actions{flex-direction:column;align-items:stretch}
  .m1-hero-proof{font-size:11px}
  .m1-hero-doc{height:420px;margin-top:44px}
  .m1-doc-front{padding:22px 20px 18px}
  .m1-doc-back{transform:rotate(-4deg) translate(-8px,12px)}
  .m1-doc-mid{transform:rotate(2.5deg) translate(8px,4px)}
  .m1-price{font-size:46px}
  .m1-faq summary{font-size:19px}
}

/* ---------- Our own products and final CTA ---------- */
.m1-products{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.m1-product{overflow:hidden;border:1px solid #deddd3;border-radius:18px;background:#fff}
.m1-product-shot{aspect-ratio:16/10;overflow:hidden;background:#f4f3ed;border-bottom:1px solid #eeede7}
.m1-product-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.m1-product-copy{padding:24px 26px 28px}
.m1-product-name{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.m1-product-name img{width:28px;height:28px;object-fit:contain}
.m1-product h3{font:400 30px/1.1 Fraunces,Georgia,serif;letter-spacing:-.03em}
.m1-product .f-index{margin-bottom:10px;color:#5f5f5f}
.m1-product p:not(.f-index){max-width:48ch;color:#555;font-size:15px;line-height:1.6}
.m1-status{display:inline-block;margin-top:16px;padding:4px 10px;border:1px solid #deddd3;border-radius:999px;color:#5f5f5f;font:11px/1.6 "Roboto Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.m1-final{text-align:center}
.m1-final .f-index{justify-content:center}
.m1-final h2{max-width:900px;margin:20px auto 0;font:400 clamp(40px,5.6vw,84px)/1.03 Fraunces,Georgia,serif;letter-spacing:-.045em}
.m1-final h2 em{font-style:italic}
.m1-final .m1-lead{margin:24px auto 0}
.m1-final-actions{justify-content:center}
.m1-final .m1-note{margin-top:22px}
@media (width<=860px){.m1-products{grid-template-columns:1fr}}
@media (width<=700px){.m1-final h2{font-size:40px}.m1-final-actions{flex-direction:column;align-items:stretch}}

/* ---------- Legibility (launch review, 28 Sep 2026) ----------
   Gradient accent words use deeper stops, each at least 3:1 on white and on the paper
   backgrounds (#e03a3e 4.34, #c2257a 5.47, #7c3aed 5.70, #1d4ed8 6.70 on #fff).
   Small mono and sidebar labels are at least 11px (12px in page content) in a colour of
   at least 4.5:1. These override rules in index-CUNl-HT7.css, which is left unchanged. */
.fsh-title-rainbow{background-image:linear-gradient(120deg,#e03a3e,#c2257a 25%,#7c3aed 55%,#1d4ed8 80%,#e03a3e)}
body .f-canvas :is(.f-index,.f-status,.u-journey-copy>small,.f-product-story li,.f-product-story>.f-status){font-size:12px}
.f-rail .f-project-index>.f-index{color:#5f5f5f;font-size:11px}
.f-rail .f-project-shortcut small{color:#5f5f5f;font-size:11px}
.bm-sidebar .brand-contact-options__kind{color:#5f5f5f;font-size:11px}
.bm-sidebar .brand-contact-options__description{font-size:11px}
.bm-privacy-link{color:#5f5f5f;font-size:11px}
.f-rail-foot>span,.f-rail-foot>button{font-size:11px}
.eq-brand-row small,.eq-app .eq-eyebrow,.scope-mobile-total small,.scope-number{font-size:11px}
.vk-browser-bar,.vk-browser-bar>span:nth-child(2){font-size:11px}
.vk-browser-bar>span:nth-child(2){max-width:none}
.vk-view-selector>button>span{font-size:11px}
.vk-screen>span{font-size:11px}
.i-reveal-hint{font-size:11px}
.vk-interlude>div>span{color:#5f5f5f;font-size:12px}
.vk-interlude>.f-index{color:#5f5f5f}

/* ---------- Desktop sidebar layout (launch review) ----------
   At 1000px and up the fixed sidebar sits in its own white column on the right. Sections
   used to start 24px in and stop 24px short of that column, leaving white strips beside the
   dark and paper backgrounds. Now the page column runs from the left viewport edge to the
   sidebar column, which is marked by a hairline, and section content keeps its own padding. */
@media (width>=1000px){
  .f-site .f-canvas{width:calc(100% - var(--rail) - var(--f-gap)*2);margin-left:0;border-right:1px solid #e6e5dd}
}

/* "Make an enquiry" dialog: the Growth Roadmap link in the intro. */
.brand-capture__body a{color:#2563eb;text-decoration:underline;text-underline-offset:3px}

/* No-JavaScript fallback in index.html (kept out of style attributes for the CSP). */
.m1-noscript{max-width:44rem;margin:0 auto;padding:4rem 1.5rem;font-family:Lato,Arial,sans-serif;line-height:1.65;color:#000;background:#fff}
.m1-noscript h1,.m1-noscript h2{font-family:Fraunces,Georgia,serif;font-weight:400}
.m1-noscript h1{font-size:2.75rem;line-height:1.1}

/* ---------- Ladder: equal cards with aligned rows ----------
   Each card spans five rows of the list's grid and shares them (subgrid), so the names, prices
   and price notes line up across the three cards and every card is the same height. The
   descriptions share the last row and start on the same line (bottom-aligning them left a large
   gap under the short first card; for that, add .m1-ladder li>p:last-child{align-self:end}).
   Stacked below 861px. */
@media (width>=861px){
  .m1-ladder{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto) 1fr;align-items:stretch}
  .m1-ladder li{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
}
.m1-ladder .m1-price{margin-bottom:10px;font-size:clamp(40px,3.9vw,56px);white-space:nowrap}
.m1-ladder p.m1-price-sub{margin:0 0 14px}
@media (width<=860px){
  .m1-ladder{gap:36px}
  .m1-ladder li+li:before{top:-18px}
}