/* Merged homepage. Builds on /lifetime/styles.css (tokens, buttons, cards, roadmap, FAQ, video covers)
   and adds only what the new structure needs: the wider nav, the left-aligned hero with the product
   window, the quote lane, two pricing plans and a column footer. One accent, used only to mark
   what the hero sentence is about. */
/* Accent: a deep brick red with its blush fill and coral line, from the user's reference. */
:root{--accent:#9b260c;--accent-soft:#ffebe7;--accent-line:#da826f;--teal:#42b0b1;--teal-deep:#287d7e}

/* Header: logo left, eight links and the comparison menu centred, two actions right. */
/* Equal side columns keep the menu centred on the page, whatever the width of the buttons on the right. */
.home-header>.wrap{width:min(100% - 40px,1360px);grid-template-columns:1fr auto 1fr}
.home-header .brand{justify-self:start}
.home-header nav{gap:0}
.home-header .nav-link{font-size:13.5px;padding:12px 10px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.home-header .nav-link>img{width:13px;height:13px}
.header-actions{display:flex;align-items:center;gap:8px;justify-self:end}
.mobile-menu{display:none}

/* Hero: the sentence on the left with its CTA, the partners under it, the product window below. */
.home-hero{padding-top:clamp(48px,6vw,88px)}
.home-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.deal-pill{gap:10px}
.deal-pill>img{width:14px;height:14px;transform:rotate(45deg)}
.live-dot{flex:none;display:block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 18%,transparent)}
/* Smaller line above the headline, then the headline itself, balanced over two lines. */
.hero-kicker{margin-top:32px;font:400 clamp(16px,1.7vw,22px)/1.3 var(--mono);letter-spacing:.01em;color:var(--ink-3)}
.home-hero h1{font-size:clamp(36px,5.2vw,68px);line-height:1.08;margin:12px 0 24px;text-wrap:balance}
.home-hero h1 em{font-style:normal;font-weight:700}
.home-hero .hero-subscription{justify-content:center}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:32px}
/* Hero CTA hover: stays black. */
.hero-cta .button:hover{background:var(--btn)}
.cta-note{font:400 13px/1.4 var(--mono);color:var(--muted)}
/* Trial note under the hero button and every CTA block, in bold (the mono font has no bold cut, so a same-colour stroke adds the weight),
   with a crossed-out card before "No credit card". */
.cta-trial{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;-webkit-text-stroke:.35px currentColor}
.cta-trial .card-off{width:16px;height:16px;flex:none}
/* CTA under the quote lane: the two buttons side by side, centred, the note below. */
/* Same space above as the section gap below it (the quote lane adds 2px of padding). */
/* Centred: the heading on top, then the buttons and note in a compact white box of their own
   with a thin black border and a soft lift. */
.cta-block{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:calc(var(--section) - 2px);text-align:center}
.roadmap .cta-block{margin-top:var(--section)}
.cta-block-title{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.02em}
.cta-block-actions{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
.cta-block-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta-block .button-outline{border-color:var(--ink)}
/* Desktop: bigger buttons so the CTA stands out. Phones keep the defaults. */
@media(min-width:768px){
 .cta-block .button-large{font-size:14px;padding:1.125rem 2rem;min-height:3.5rem}
}
/* Label centred above the logos; the logos sit together in one long box. */
.hero-partners{margin-top:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.hero-partners .partners-intro{font-size:15px;color:var(--muted);text-align:center;white-space:nowrap}
.hero-partners .partner-row{justify-content:center;gap:40px;width:auto;padding:20px 48px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 14px 30px -22px rgba(38,37,30,.5)}
.hero-partners .partner-logo{min-height:90px;max-width:320px;padding:0 20px}
/* Logos shown bare inside the box: no card, border or shadow of their own. */
.hero-partners .partner-logo,.hero-partners .partner-logo:hover{background:none;box-shadow:none;border-radius:0}
/* Balanced logos: three equal slots, and each logo sized to about the same visible area for its shape
   (Understory 3.9:1, Kale 2.3:1, Sales Automation 8.1:1), with Kale's heavy letters nudged down and
   Sales Automation's thin script nudged up so they read as the same weight. */
@media(min-width:861px){
 .hero-partners .partner-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,1080px);gap:0}
 .hero-partners .partner-logo{max-width:none;padding:0 12px}
}
.hero-partners .partner-logo>img{height:54px;max-height:none;max-width:100%;object-fit:contain}
.hero-partners .partner-logo>img.kale{height:64px}
.hero-partners .partner-logo>img.sales-automation{height:41px}
.product-stage{width:min(100%,1080px,76vw);margin:48px auto 0;padding:clamp(10px,1.8vw,24px);border-radius:10px;background:#b6b9be url('/new/dither/dither-03.png') center/cover;image-rendering:pixelated}
.product-window{aspect-ratio:16/9;border-radius:10px;background:#141414;box-shadow:0 28px 70px rgba(0,0,0,.18),0 14px 32px rgba(0,0,0,.12),0 0 0 1px rgba(38,37,30,.12);image-rendering:auto}
.product-window .video-cover{background-size:cover;background-position:top center}
/* Hero preview: a wide, short window onto the app. The embed renders a shorter app (1280x620, see
   src/app/embed/hero-demo) so the whole thing fits, rows and chat composer included, with nothing cut off. */
.product-window{aspect-ratio:1280/620;overflow:hidden}
/* Live animation under the play button: clicks go to the cover, not the iframe. */
.video-space iframe.video-live{pointer-events:none}
.video-live ~ .video-cover{background-color:transparent}

/* Play button: circle and triangle grow together around their own centres, on every video.
   The scale goes inside transform, after the centring translate; the separate `scale`
   property scales around the untranslated box, which pulled the two apart. */
.video-cover:after{transition:background .2s ease,transform .2s var(--ease)}
.video-cover:before{transition:transform .2s var(--ease)}
.video-cover:hover:after,.video-cover:focus-visible:after{scale:none;transform:translate(-50%,-50%) scale(1.08)}
.video-cover:hover:before,.video-cover:focus-visible:before{scale:none;transform:translate(-45%,-50%) scale(1.08)}

/* Sections that are new to this page share the lifetime rhythm. */
.home-proof{padding-top:var(--section)}
.home-proof>h2{margin-bottom:28px}
.video-wall+.quote-marquee,.video-marquee+.quote-marquee{margin-top:40px}
.video-wall .video-copy h3,.video-track .video-copy h3{font-size:17px}
/* These thumbnails have their text close to the right edge; anchor right so the 16:10 crop doesn't clip it. */
[data-video-slot=davidSinclair] .video-cover,[data-video-slot=georgiStory] .video-cover{background-position:100% 50%}
/* Two-person videos: the founder leads, the guest sits quieter beside them, so the byline below reads like the solo cards. */
.video-copy .h3-with{font-weight:500;color:var(--ink-3)}
/* Four testimonial videos: four across on wide screens (two by two, then one, below). */
@media(min-width:1101px){#proof .video-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* In a byline the company is already named in the text, so badges show the mark alone. */
.feedback-wall .video-byline .company-badge:has(img[src$='alevora.svg']):after{content:none}
/* Who's speaking: company logo, then "Name, Founder of Company"; the description sits quieter below. */
.video-byline{display:flex;align-items:center;gap:10px;margin-top:10px;min-height:2.7em}
.video-byline>p{font-size:13px;line-height:1.35;color:var(--ink-2)}
.video-byline strong{font-weight:700;color:var(--ink)}
.video-byline .company-badge:has(img[src$='flowlead-icon.svg']):after{content:none}

/* Quotes: one lane drifting left, paused on hover or focus. */
.quote-marquee{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);padding:2px 0;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.feedback-wall.quote-track{display:flex;width:max-content;gap:14px;padding-right:14px;align-items:stretch;animation:quote-drift 70s linear infinite}
.quote-track>.testimonial{flex:none;width:360px}
.quote-marquee:hover .quote-track,.quote-marquee:focus-within .quote-track{animation-play-state:paused}
@keyframes quote-drift{to{transform:translate3d(-50%,0,0)}}
/* Videos drift the other way from the quotes below; three copies keep wide screens filled. */
.quote-track.video-track{animation:video-drift 60s linear infinite reverse}
@keyframes video-drift{to{transform:translate3d(-33.333%,0,0)}}
.quote-marquee.is-playing .quote-track{animation-play-state:paused}
.quote-track .quote-content{grid-template-rows:auto minmax(0,1fr) auto}
.quote-track .quote-body{grid-row:2}
.quote-track blockquote{font-size:18px}
/* Michel's current headshot (the /lifetime portrait is an older photo). */
.avatar.michel{background-image:url('/new/people/michel-de-dalnok.jpg')}
.avatar.georgi{background-image:url('/new/people/georgi-bardarov.jpg');background-size:cover;background-position:center}
.avatar.jesus{background-image:url('/new/people/jesus-vivas.jpg');background-size:cover;background-position:center 30%}
/* Alevora's badge: its mountain mark with the name beside it, like Flow Lead's. */
.feedback-wall .company-badge img[src$='alevora.svg']{height:18px;width:auto}
.feedback-wall .company-badge:has(img[src$='alevora.svg']){display:inline-flex;align-items:center;gap:6px}
.feedback-wall .company-badge:has(img[src$='alevora.svg']):after{content:'Alevora';font:700 12px/1 var(--sans);color:var(--ink)}
/* Highlighted phrases: heavier than the font's 700 so they read first; a same-colour stroke adds the weight. */
.quote-track blockquote strong{-webkit-text-stroke:.6px currentColor;paint-order:stroke fill}

/* "Used by leading outbound agencies": bold, a little larger and a darker grey so it catches the eye. */
#agencies-heading{font-weight:800;font-size:17px;color:var(--ink-3)}

#logos{padding-top:var(--section)}
.agency .tag{order:0}
.agency>img[src$='understory.svg']{max-height:28px}
.agency>img[src$='kale-acquisition.png']{max-height:40px}
.agency>img[src$='sales-automation.png']{max-height:22px}
.agency>img[src$='gtmx.png']{max-height:32px}
.agency>img[src$='dualentry.svg']{max-height:24px}


.section-lede{max-width:56ch;margin:-12px auto 28px;font-size:17px;color:var(--muted)}
.roadmap-title,.pricing-title{margin-bottom:28px}
.roadmap-card p{display:block}
/* Roadmap labels all black: "Live now" filled, "In development" outlined. The upcoming card one step
   lighter with black outlined numbers. */
.roadmap-card .roadmap-status{background:var(--ink)}
.roadmap-card.upcoming .roadmap-status{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.roadmap-card.upcoming{background:var(--card)}
.upcoming .roadmap-index{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* Banners: one mountain climbed left to right. "Shipped" shows its foot (dark hills, lower slopes),
   "Coming next" its summit and sun. Same original picture, no veil. The foot shows the lower slopes,
   stopping just above the dark hills; the summit keeps the sky at the top and is trimmed from below. */
.roadmap-card:before,.roadmap-card.upcoming:before{height:130px;background:#6f9fd2 url('/new/dither/dither-02.png') center 44%/cover;image-rendering:pixelated;filter:none;opacity:1}
.roadmap-card.upcoming:before{background-position:center 15.5%}
/* Card titles and both badges share one size, between the old 18px titles and 11px badges. */
.roadmap-card>.roadmap-head>h2{font-size:14.5px;color:var(--ink)}
.roadmap-card .roadmap-status{font-size:14.5px}
/* Both lists split their height into five equal rows, so items 01–05 and 06–10 sit level. */
.roadmap-card ol{flex:1;display:grid;grid-auto-rows:1fr}

/* The dithered pictures at their native pixel size (the /lifetime files are the same art enlarged 12x,
   about 74MB each once decoded, which made scrolling stutter). Drawn with sharp pixels they look identical. */
.feedback-wall>.testimonial:before{background-image:url('/new/dither/dither-01.png')}
.feedback-wall>.testimonial:nth-child(2):before{background-image:url('/new/dither/dither-03.png')}
.feedback-wall>.testimonial:nth-child(3):before{background-image:url('/new/dither/dither-05.png')}
.feedback-wall>.testimonial:nth-child(4):before{background-image:url('/new/dither/dither-04.png')}
.feedback-wall>.testimonial:nth-child(5):before{background-image:url('/new/dither/dither-06.png')}
.feedback-wall>.testimonial:nth-child(6):before{background-image:url('/new/dither/dither-02.png')}
.feedback-wall>.testimonial:nth-child(7):before{background-image:url('/new/dither/dither-08.png')}
.offer-panel{background-image:url('/new/dither/dither-04.png')}

/* Pricing: the two plans side by side on the dithered panel. */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px)}
.plan{display:flex;flex-direction:column;padding:28px;background:var(--surface);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.16),0 0 0 1px rgba(38,37,30,.1)}
.plan .price-head{min-height:36px}
.plan .price-head .small-heading{color:var(--ink);text-transform:uppercase;letter-spacing:.08em}
.plan .price{min-height:72px}
.plan .price>s{font-size:clamp(18px,1.8vw,22px)}
.seat-label{font:400 15px var(--mono)}
.billing-toggle{display:inline-flex;padding:3px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.billing-toggle button{border:0;background:transparent;padding:7px 12px;border-radius:999px;font:400 12px/1 var(--mono);color:var(--ink)}
.billing-toggle button[aria-pressed=true]{background:var(--ink);color:#fff}
.plan-list{margin-top:18px}
.plan-list li{position:relative;padding:9px 0 9px 26px;font-size:15px;font-weight:700;border-bottom:1px solid var(--line)}
.plan-list li:before{content:'✓';position:absolute;left:0;font:400 15px/1.4 var(--mono)}
.plan .guarantee{margin-top:16px;text-align:center;font:400 13px/1.4 var(--mono);color:var(--muted)}
.plan .purchase-button.button-outline{border-color:var(--ink)}
/* The lifetime plan is the one to buy: a black ring and deeper lift, a "Best value" tab on its top edge,
   the deadline as a live dark pink pill and the first-year saving spelled out. */
.plan-lifetime{position:relative;box-shadow:0 0 0 2px var(--ink),0 26px 56px -12px rgba(0,0,0,.34)}
.plan-flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--ink);color:#fff;font:500 11.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.plan-flag>span+span{padding-left:10px;border-left:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.75)}
.plan-lifetime .deadline{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff}
.plan-lifetime .deadline .live-dot{width:6px;height:6px;background:#fff;box-shadow:none;animation:deadline-pulse 1.6s ease-in-out infinite}
@keyframes deadline-pulse{50%{opacity:.35}}
.price-save{align-self:flex-start;margin:8px 0 6px;padding:5px 10px;border-radius:4px;background:var(--card);color:var(--ink-3);font:600 13px/1.3 var(--sans)}
.plan-lifetime .price-save{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}

/* Videos: heading with the channel link beside it. */
.home-videos{padding-top:var(--section)}
/* A thin line between each thumbnail and its title. */
.home-videos .video-copy{border-top:1px solid var(--line)}
/* Four tutorials sit in one row, like the customer stories. */
@media(min-width:1101px){#videos .video-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The count of other videos that share a card's thumbnail, linking to the playlist. */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.section-head .button>img{filter:none}
.yt-logo{width:18px;height:auto;flex:none}
.slack-logo{width:14px;height:14px;flex:none}

/* FAQ: every group open, each question folds on its own. */
/* FAQ groups slide open instead of jumping, where the browser can animate <details>. */
.faq-group{interpolate-size:allow-keywords}
.faq-group::details-content{height:0;overflow:clip;transition:height .3s var(--ease),content-visibility .3s allow-discrete}
.faq-group[open]::details-content{height:auto}

/* Footer: logo plus three link columns, copyright under a hairline. */
.home-footer{padding:96px 0 40px}
.home-footer>.wrap:first-child{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding-top:32px;border-top:1px solid var(--line)}
.home-footer .brand{align-self:start}
.home-footer nav{display:flex;flex-direction:column;gap:10px;font-size:14px}
.home-footer nav .small-heading{text-transform:uppercase;font-size:11px;margin-bottom:4px}
.home-footer nav a{color:var(--ink-3)}
.home-footer nav a:hover{color:var(--ink)}
.footer-base{margin-top:48px;font-size:13px;color:var(--muted)}

@media(max-width:1240px){
 .home-header nav{display:none}
 .home-header>.wrap{grid-template-columns:auto 1fr auto auto}
 .header-actions{grid-column:3}
 .mobile-menu{display:block;grid-column:4;position:relative}
 .mobile-menu summary{list-style:none;cursor:pointer;display:grid;gap:5px;place-content:center;width:40px;height:40px;border-radius:6px;box-shadow:0 0 0 1px var(--line-2)}
 .mobile-menu summary::-webkit-details-marker{display:none}
 .mobile-menu summary span{display:block;width:16px;height:1.5px;background:var(--ink)}
 .mobile-menu-panel{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;min-width:260px;padding:8px;background:var(--surface);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 14px 30px -14px rgba(38,37,30,.35)}
 .mobile-menu-panel a{padding:10px 12px;border-radius:6px;font-size:15px}
 .mobile-menu-panel a:not(.button):hover{background:var(--card)}
 .mobile-menu-panel .button{margin-top:6px;padding:12px}
}
@media(max-width:1100px){
 .plans{grid-template-columns:1fr}
 .feedback-wall.video-wall{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
 .hero-partners{flex-direction:column;align-items:center;gap:12px}
 .hero-partners .partner-row{width:100%;gap:12px;padding:16px 12px}
 .hero-partners .partner-logo{flex:1 1 0;min-width:0;padding:0 10px}
 .home-footer>.wrap:first-child{grid-template-columns:1fr 1fr}
 .home-footer .brand{grid-column:1/-1}
}
@media(max-width:767px){
 .roadmap-card:not(.upcoming):before{background-position:center 36%}
 .plan-lifetime{margin-top:12px}
 .plan-flag>span+span{display:none}
 .header-actions .button-outline{display:none}
 .site-header .nav-download{display:none}
 .header-actions{display:flex}
 .home-hero h1{font-size:clamp(22px,7vw,44px)}
 .hero-cta{flex-direction:column;align-items:stretch;width:100%}
 .hero-cta .button{width:100%}
 .cta-note{text-align:center}
 .hero-partners .partner-row{flex-direction:row}
 .hero-partners .partner-row{gap:4px;padding:12px 8px}
 .hero-partners .partner-logo{min-height:56px;padding:0 4px}
 .hero-partners .partner-logo>img{max-height:31px}
 .hero-partners .partner-logo>img.kale{max-height:40px}
 .hero-partners .partner-logo>img.sales-automation{max-height:21px}
 .product-stage{width:100%;padding:8px;margin-top:32px}
 .feedback-wall.video-wall{grid-template-columns:1fr}
 .quote-track>.testimonial{width:300px}
 .plan{padding:20px 16px}
 .section-lede{margin-top:-16px}
}
@media(prefers-reduced-motion:reduce){
 .quote-marquee{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
 .quote-track>[aria-hidden=true]{display:none}
}

/* Post-download dialog (site.js): the download has started, join Slack; Windows adds the SmartScreen step. */
.dl-dialog{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.dl-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);cursor:default;animation:dl-fade .18s ease}
.dl-panel{position:relative;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;padding:32px 28px 28px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 28px 70px rgba(0,0,0,.18),0 14px 32px rgba(0,0,0,.1);animation:dl-rise .22s var(--ease)}
.dl-panel.is-wide{max-width:480px}
.dl-close{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:6px;background:none;color:var(--ink-3);cursor:pointer}
.dl-close:hover{background:var(--card);color:var(--ink)}
.dl-check{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e3f1e6;color:#2f7d43}
.dl-panel h2{margin:16px 0 0;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.dl-panel>p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.dl-panel strong{color:var(--ink)}
.dl-shot{display:block;width:100%;max-width:340px;height:auto;margin:18px auto 0;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.dl-slack{width:100%;margin-top:24px;justify-content:center}
.dl-later{width:100%;height:42px;margin-top:10px;border:0;border-radius:6px;background:none;font:inherit;font-size:14px;color:var(--ink-3);cursor:pointer}
.dl-later:hover{background:var(--card);color:var(--ink)}
.dl-panel .dl-retry{margin-top:14px;text-align:center;font-size:12px}
.dl-retry a{color:var(--accent);text-decoration:underline}
@keyframes dl-fade{from{opacity:0}}
@keyframes dl-rise{from{opacity:0;transform:translateY(8px)}}

/* Agency lanes: each lane's six logos span wider than the screen, so a logo's
   repeat only comes into view after the first one has left. */
.agency-sequence>.agency{min-width:max(210px,calc((100vw + 120px) / 5.6))}
.agency-track{animation-duration:56s}
.agency-lane:nth-child(2) .agency-track{animation-duration:64s}
@media(prefers-reduced-motion:reduce){.agency-sequence>.agency{min-width:150px}}

/* Bold phrases in FAQ answers. */
.faq-question p strong{font-weight:700;color:var(--ink)}

/* Why agencies switch: four claims, each over a dithered plate with a piece of the app on it.
   No card behind them, smaller type than the section heading, plates lined up across each row. */
.benefits>h2{margin-bottom:40px}
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 28px}
.why-item{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:20px}
.why-copy{display:flex;align-items:flex-start;gap:14px}
.why-icon{flex:none;width:20px;height:20px;margin-top:2px;opacity:.85}
.why-copy h3{font-size:19px;line-height:1.25;color:var(--ink)}
.why-copy p{margin-top:4px;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-3)}
.why-plate{position:relative;display:flex;align-items:center;justify-content:center;height:320px;padding:0 32px;border-radius:8px;overflow:hidden;background:#b6b9be var(--plate) center/cover;image-rendering:pixelated}
.why-more{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-3)}
.why-more li{display:flex;align-items:center;gap:12px}
.why-more li{align-items:flex-start}
.why-more img{flex:none;width:18px;height:18px;margin-top:2px;opacity:.85}
.why-more b{color:var(--ink);font-weight:500}

/* The app pieces, rebuilt from the old homepage (src/components/Benefits.tsx) with the app's own sizes and colours. */
.vg{width:100%;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.16),0 0 0 1px rgba(38,37,30,.1);font:13.5px/1.3 var(--sans);color:#1c1917;text-align:left;image-rendering:auto;user-select:none}
.vg-build{max-width:560px}
.vg-vis{position:relative;max-width:400px}
.vg-team{max-width:400px;color:rgba(13,13,13,.85)}
/* The live graph is framed from /embed/memory-graph; its capture shows until the frame has drawn. */
.vg-memory{position:relative;max-width:545px;aspect-ratio:545/265;background:#fff url('/new/why/memory-graph.png') center/cover}
.vg-memory iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vg-prompt{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-bottom:1px solid #d9dce2;background:#f2f1ed;font-size:12.5px;white-space:nowrap}
.vg-prompt img{flex:none;width:14px;height:14px;border-radius:3px}
.vg-prompt b{font-weight:500}
.vg-prompt span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:rgba(13,13,13,.5)}
.vg-row{display:flex;height:36px;border-bottom:1px solid #ebedf1}
.vg-head{border-bottom-color:#d9dce2;color:#44403c;font-weight:500}
.vg-n{flex:none;display:grid;place-items:center;width:36px;border-right:1px solid #d9dce2;font-size:11px;font-variant-numeric:tabular-nums;color:#a8a29e}
.vg-c{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:0 12px;white-space:nowrap;overflow:hidden}
.vg-c span{overflow:hidden;text-overflow:ellipsis}
.vg-c.grow{flex:1}
.vg-c.ag{background:rgba(1,105,204,.06);border-left:1px solid #ebedf1}
.vg-build .fit{flex:none;width:108px;padding-right:28px}
.vg-build .mail{flex:none;width:190px;padding-right:28px}
.vg-vis .mail{flex:none;width:188px;padding-right:28px;border-left:1px solid #ebedf1}
.vg-vis .mail.is-stale{padding-right:48px}
.vg-head .vg-c{padding-right:12px}
.vg-t{font-size:12px;color:#a8a29e}
.vg-ico{flex:none;width:14px;height:14px;color:#a8a29e}
.vg-logos{display:flex;flex:none}
.vg-logos img{width:14px;height:14px;border-radius:4px;object-fit:contain;box-shadow:0 0 0 1px #fff}
.vg-logos img+img{margin-left:-4px}
img.px{flex:none;width:14px;height:14px;border-radius:4px;image-rendering:pixelated}
.mk{position:absolute;right:8px;top:50%;width:12px;height:12px;transform:translateY(-50%)}
.mk.ok{color:#078a52}
.mk.dash{color:#fbbf24;opacity:.85}
.mk.spin{color:#0169cc;opacity:.6;animation:vg-spin .9s linear infinite}
.mk.stale{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(245,158,11,.1);color:rgba(180,83,9,.8)}
.mk.stale svg{width:10px;height:10px}
.vg-foot{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;font-size:11.5px;color:#44403c}
.vg-pulse{flex:none;width:6px;height:6px;border-radius:50%;background:rgba(1,105,204,.75);animation:vg-pulse 1.1s ease-in-out infinite}
.vg-bar{flex:1;height:3px;border-radius:3px;background:#eef0f3;overflow:hidden}
.vg-bar i{display:block;width:70%;height:100%;border-radius:3px;background:rgba(1,105,204,.75)}
.vg-mono{font:11px/1 var(--mono);color:#a8a29e}
.vg-status{height:26px;border-bottom-color:#d9dce2}
.vg-status .vg-n{font-size:10px}
.vg-status .mail{justify-content:flex-end;gap:6px;font-size:11px;color:#78716c}
.vg-ring{flex:none;width:15px;height:15px;border-radius:50%;background:conic-gradient(#078a52 0 75%,#eef0f3 0);-webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px);mask:radial-gradient(circle,transparent 4px,#000 4.5px)}
.vg-vis em{font-size:12px;color:#d6d3d1}
.vg-run{display:flex;gap:2px;margin-left:auto;padding:4px;border-radius:6px;color:rgba(13,13,13,.5);transition:background .15s}
.vg-run svg{width:10px;height:10px}
.vg-menu{position:absolute;right:16px;top:34px;z-index:2;width:214px;white-space:nowrap;padding:6px;border-radius:8px;background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.09);box-shadow:0 8px 30px rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.06);font-size:12px;color:#44403c;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.vg-menu div{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px}
.vg-menu div.on{background:rgba(0,0,0,.03)}
.vg-menu svg{width:12px;height:12px;color:#a8a29e}
.vg-menu hr{height:1px;margin:4px 0;border:0;background:#e7e5e4}
.why-item:hover .vg-menu{opacity:1;transform:none}
.why-item:hover .vg-run{background:rgba(13,13,13,.055)}
.vg-project{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid #e7e5e4;background:#f2f1ed;white-space:nowrap}
.vg-badge{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:22.4%;background:color-mix(in srgb,#4e7a46 13%,transparent);color:color-mix(in srgb,#4e7a46 88%,black);font-size:8px;font-weight:600}
.vg-project b{font-size:14px;font-weight:600;color:#0d0d0d}
.vg-shared{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#10b981}
.vg-shared svg{width:14px;height:14px}
.vg-invite{display:flex;align-items:center;height:24px;margin-left:auto;padding:0 8px;border-radius:8px;background:#0d0d0d;color:#fff;font-size:12px;font-weight:500}
.vg-member{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-bottom:1px solid #e7e5e4}
.vg-avatar{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:11px;font-weight:600}
.vg-member.is-invited .vg-avatar{opacity:.45}
.vg-who{flex:1;display:flex;flex-direction:column;min-width:0}
.vg-who b{font-size:13px;font-weight:500;line-height:16px;color:#0d0d0d}
.vg-who span{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:15px;color:rgba(13,13,13,.5)}
.vg-who i{width:6px;height:6px;border-radius:50%;background:#10b981}
.vg-role{flex:none;padding:2px 6px;border-radius:6px;background:rgba(13,13,13,.055);color:rgba(13,13,13,.7);font-size:11px;font-weight:500}
.vg-chips{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;overflow:hidden;white-space:nowrap;font-size:11.5px;color:rgba(13,13,13,.5)}
.vg-chips i{padding:2px 8px;border-radius:999px;border:1px solid rgba(13,13,13,.08);font-style:normal;color:rgba(13,13,13,.7)}
@keyframes vg-spin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes vg-pulse{50%{opacity:.35}}
@keyframes vg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .why-item:hover .vg-row[style],.why-item:hover .vg-member{animation:vg-in .45s ease-out both;animation-delay:calc(var(--i) * 110ms)}
}
@media (prefers-reduced-motion:reduce){.mk.spin,.vg-pulse{animation:none}}
@media (max-width:860px){
  .why-grid{grid-template-columns:1fr;gap:44px}
  .why-plate{height:280px;padding:0 14px}
  .vg-build .fit{width:84px}.vg-build .mail{width:148px}
  .vg-vis .mail{width:152px}
  .why-more{grid-template-columns:1fr;gap:12px}
}
@media (max-width:480px){
  .vg-build .fit{width:68px}.vg-build .mail{width:124px}
  .vg-build .fit img,.vg-build .mail .vg-logos{display:none}
  .vg-vis .mail{width:140px}
}

/* Hero frame: the dithered canyon plate behind the product window, stretched into a wide
   letterbox of its own. Wider than the window so the landscape shows on both sides, with the
   window centred on it; the copy above stays on the plain page. */
.hero-scene .product-stage{width:min(100%,1320px);padding:clamp(28px,4vw,56px) clamp(20px,9vw,130px);border-radius:12px;background:#b6b9be url('/new/dither/dither-03.png') center 75%/cover;image-rendering:pixelated}
/* Larger than the text column: the frame runs out to the header's width. */
.hero-scene .product-stage{--stage:min(100vw - 40px,1360px);width:var(--stage);margin-left:calc(50% - var(--stage) / 2);padding:clamp(28px,4vw,56px) clamp(20px,4.5vw,64px)}
/* The walkthrough plays in the hero window: a big play button over the live demo, and a 16:9 window once it plays. */
.hero-scene .product-window .video-cover:after{width:clamp(48px,6vw,80px);height:clamp(48px,6vw,80px)}
.hero-scene .product-window .video-cover:before{width:clamp(20px,2.4vw,32px);height:clamp(20px,2.4vw,32px)}
.hero-scene .product-window.is-playing{aspect-ratio:16/9}
@media (max-width:760px){.hero-scene .product-stage{width:100%;margin-left:0;padding:14px 10px}}
/* Peakora's logo file is the wide wordmark; the square badge shows only its icon, the left square of the file. */
.company-mark img[src$='peakora.png']{object-position:0 50%;transform:scale(1.12);transform-origin:8% 50%}