:root{--cream:#faf9f5;--paper:#fffefb;--ink:#1b1c1a;--muted:#676e65;--lime:#bdff65;--lime2:#98eb4f;--deep:#161b17;--border:#e6e7e0;--round:26px;--max:1210px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{text-decoration:none}img{max-width:100%;display:block}button,input{font:inherit}::selection{background:#cfff8c;color:#131513}:focus-visible{outline:3px solid #8dda39;outline-offset:4px}.skip-link{position:absolute;top:-60px;left:20px;background:white;z-index:100;padding:12px}.skip-link:focus{top:10px}
.site-header{width:min(var(--max),calc(100% - 76px));height:82px;display:flex;align-items:center;gap:65px;margin:auto}.brand{display:flex;align-items:center;overflow:hidden;width:166px;flex-shrink:0}.brand img,.footer-brand img{mix-blend-mode:multiply;width:100%;height:auto}.nav{display:flex;gap:31px;font-size:13px;font-weight:600;color:#555c56}.nav a:hover,.nav a.active{color:#171c15}.nav a.active{font-weight:800}.top-cta{margin-left:auto;font-size:13px;padding:13px 20px;border:1px solid #1e251e;border-radius:22px;background:#fff;white-space:nowrap;font-weight:700;box-shadow:0 4px 12px #00000009}.top-cta:hover{background:#e5ffca}.top-cta span{padding-left:7px}
.hero{display:grid;grid-template-columns:42% 58%;min-height:600px;max-width:1440px;margin:0 auto 0;overflow:hidden}.hero-copy{padding:66px 6vw 52px max(6vw,calc((100vw - 1210px)/2));position:relative}.eyebrow,.kicker{letter-spacing:.17em;font-size:10px;font-weight:800;color:#666e63}.eyebrow{display:flex;align-items:center;gap:7px;font-size:9px;white-space:nowrap}.eyebrow b{color:#b4beb2}.eyebrow-dot{height:6px;width:6px;display:inline-block;border-radius:50%;background:#a5e65e}.hero h1{margin:23px 0 15px;font-family:Georgia,"Times New Roman",serif;line-height:.99;letter-spacing:-.05em;font-weight:700;font-size:clamp(46px,5vw,77px)}.hero h1 em,.product-copy h2 em,.automation-section h2 em,.inner-hero h1 em{font-style:normal;color:#589732}.hero-lead{font-size:15px;line-height:1.55;max-width:380px;color:#4c514a;margin:0 0 28px}.welcome-panel{border:1px solid #eaebe6;background:#fff;max-width:392px;padding:24px 25px 18px;border-radius:19px;box-shadow:0 15px 38px #1f2b1d0d}.welcome-mark{font-size:24px;color:#86be41;float:right}.panel-overline{font-size:9px;letter-spacing:.16em;font-weight:800;color:#788172;margin:0 0 10px}.welcome-panel h2{font:700 27px/1.12 Georgia,serif;letter-spacing:-.03em;margin:0 0 7px}.welcome-panel>p:not(.panel-overline){font-size:12px;color:#6d736a;margin:0 0 18px;line-height:1.5}.btn{display:inline-flex;justify-content:center;align-items:center;gap:18px;border-radius:10px;font-size:13px;font-weight:800;padding:14px 20px;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-dark{background:#141715;color:white}.btn-dark:hover{background:#333a31}.btn-lime{background:var(--lime);color:#171c11}.btn-lime:hover{background:#d1ff9a}.btn.full{display:flex;justify-content:space-between}.signin-note{text-align:center;color:#7a8176;font-size:11px;margin-top:17px}.signin-note a{color:#283b26;font-weight:700;text-decoration:underline;text-underline-offset:3px}.hero-footnote{font-size:10px;color:#91958d;margin:18px 0 0}.hero-visual{min-height:600px;position:relative;overflow:hidden;border-radius:22px 0 0 22px;background:#1b2721}.hero-video{width:100%;height:100%;object-fit:cover;object-position:48% center;position:absolute;inset:0}.video-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#0c101008 35%,#111a205d 100%),linear-gradient(0deg,#101b2166 0,transparent 22%)}.demo-caption{position:absolute;left:5%;bottom:20px;font-size:9px;color:#fff9;letter-spacing:.14em;font-weight:700}.live-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c4ff66;margin-right:7px;box-shadow:0 0 10px #bcff81}.float-card{position:absolute;display:flex;align-items:center;gap:11px;background:#fffef7ee;border:1px solid #ffffffaa;border-radius:12px;padding:13px 14px;box-shadow:0 14px 42px #0004;backdrop-filter:blur(10px);min-width:180px;max-width:230px}.float-card strong{font-size:12px;display:block;white-space:nowrap}.float-card small{font-size:10px;color:#677065;display:block;padding-top:3px}.bubble{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;flex-shrink:0;font-size:16px}.bubble-green{background:#e4fbc6;color:#477f20}.bubble-orange{background:#fff1db;color:#d67c14}.card-arr{margin-left:auto;color:#669841;font-weight:800}.signal-card{top:14%;left:8%;animation:overlayA 18.56s linear infinite}.score-card{top:34%;right:5%;animation:overlayB 18.56s linear infinite}.publish-card{bottom:16%;right:9%;animation:overlayC 18.56s linear infinite}@keyframes overlayA{0%,4%,32%,100%{opacity:0;transform:translateY(12px)}8%,28%{opacity:1;transform:translateY(0)}}@keyframes overlayB{0%,32%,40%,70%,100%{opacity:0;transform:translateY(12px)}44%,65%{opacity:1;transform:translateY(0)}}@keyframes overlayC{0%,67%,75%,97%,100%{opacity:0;transform:translateY(12px)}79%,93%{opacity:1;transform:translateY(0)}}
.section-wrap{max-width:var(--max);margin:0 auto}.steps{padding:84px 0 86px}.section-heading.center{text-align:center}.kicker{font-size:10px}.section-heading h2,.auto-title-row h2{font:700 clamp(30px,3.1vw,43px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:14px 0 10px}.section-heading p{color:#6a7168;font-size:14px;margin:0}.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:43px}.step-card{background:#fff;border:1px solid #e6e8e3;padding:22px 20px 18px;border-radius:17px;box-shadow:0 8px 24px #233b1a05;min-height:315px}.step-top{display:flex;align-items:center;justify-content:space-between}.number{font-size:12px;color:#88917f;font-weight:800}.step-icon{font-size:24px;color:#3f8f26;background:#eaffd8;width:42px;height:42px;border-radius:12px;display:grid;place-items:center}.step-card h3{font:700 23px Georgia,serif;margin:21px 0 9px}.step-card p{margin:0 0 20px;font-size:12px;line-height:1.55;color:#656d65;min-height:38px}.mini-panel{height:109px;border-radius:11px;background:#141d1c;padding:16px;position:relative;overflow:hidden}.mini-bar{display:block;height:6px;width:38%;border-radius:5px;background:#71b84f;margin-bottom:14px}.mini-line{display:block;border-radius:6px;background:#475752;height:5px;margin-bottom:10px}.mini-line.a{width:84%}.mini-line.b{width:63%}.mini-line.c{width:91%}.mini-pill{position:absolute;right:12px;bottom:11px;font-size:7px;letter-spacing:.05em;background:#bdf875;color:#203517;padding:5px 8px;border-radius:6px;font-weight:800}.radar-ring{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);border:1px solid #3a7e53;border-radius:50%;width:70px;height:70px}.radar-ring.r2{width:110px;height:110px;opacity:.45}.radar-center{position:absolute;left:51%;top:46%;width:10px;height:10px;background:#d5ff76;border-radius:50%;box-shadow:0 0 20px #a8e75e}.radar-note{position:absolute;left:15px;bottom:12px;color:#a9c3a9;font-size:8px;letter-spacing:.1em}.mini-tabs{display:flex;gap:5px;color:#c6d0cb;font-size:9px;margin-bottom:15px}.mini-tabs i{font-style:normal;background:#2a3534;padding:5px 9px;border-radius:9px}.mini-tabs i:first-child{color:#242e20;background:#b0f476}.published{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#dfffd0;font-size:11px}.check-big{width:34px;height:34px;border-radius:50%;background:#b6f66f;color:#304b1f;display:grid;place-items:center;font-weight:900;margin-bottom:11px}.visual-disclaimer{text-align:center;margin:18px 0 0;color:#969b91;font-size:10px}
.product-band{background:linear-gradient(115deg,#f5f8ec 3%,#fdfbf5 49%,#e8fbd4 99%);padding:80px 0}.product-grid{display:grid;grid-template-columns:40% 60%;align-items:center;gap:40px}.product-copy h2{font:700 clamp(37px,4.2vw,58px)/1.07 Georgia,serif;letter-spacing:-.055em;margin:18px 0}.product-copy p{font-size:14px;line-height:1.65;color:#626962;max-width:405px}.text-link{font-size:13px;font-weight:800;display:inline-block;border-bottom:1px solid #283726;padding:7px 0}.text-link span{margin-left:9px}.product-shot{position:relative;border:1px solid #3b483b;border-radius:18px;box-shadow:0 32px 65px #31481d35;background:#141a15;padding:18px 15px;transform:perspective(1200px) rotateY(-2deg)}.product-shot img{width:100%;border-radius:9px}.shot-tag{display:inline-flex;align-items:center;gap:8px;color:#e1f7cf;font-size:9px;letter-spacing:.11em;font-weight:700;padding:0 2px 12px}.tag-dot{height:7px;width:7px;border-radius:100%;background:#b9f872}
.ebook-band{min-height:405px;margin-top:0;margin-bottom:0;max-width:none;display:grid;grid-template-columns:32% 40% 28%;padding:47px max(6vw,calc((100vw - 1210px)/2));background:#111512;color:#f9f9f4;align-items:center;gap:32px;overflow:hidden}.ebook-cover{max-width:245px;margin:0 auto;transform:rotate(-7deg);box-shadow:0 24px 34px #0009}.ebook-cover img{width:100%;border-radius:5px}.ebook-copy{padding:0 10px}.kicker.lime{color:#a4e95b}.ebook-copy h2{font-size:clamp(42px,5vw,65px);letter-spacing:-.05em;margin:12px 0 0;line-height:1;font-weight:900}.ebook-copy h2 span{color:#c9463e}.ebook-copy h3{font-size:21px;font-weight:450;margin:5px 0 12px}.ebook-copy>p{font-size:13px;line-height:1.7;color:#c5c9c1;max-width:395px}.ebook-copy .btn{margin-top:10px}.ebook-copy .ebook-caption{color:#8e9a8f;font-size:10px}.ebook-quote{font:italic 25px/1.5 Georgia,serif;color:#e6eae0;transform:rotate(-6deg)}.ebook-quote em{color:#b9ef78}
.automation-section{padding:81px 0 94px}.auto-title-row{display:flex;align-items:center;justify-content:space-between;gap:22px}.auto-title-row h2{margin-top:11px}.automation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:25px}.auto-card{background:#fff;border:1px solid #e6e9e2;border-radius:18px;padding:21px;min-height:248px;box-shadow:0 11px 22px #2c3e2d07;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}.auto-card:hover{transform:translateY(-4px);box-shadow:0 19px 28px #2c3e2d15}.auto-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#e4fad3;font-size:25px;color:#518b31}.auto-card h3{font-size:16px;letter-spacing:-.02em;margin:19px 0 8px}.auto-card p{font-size:12px;line-height:1.65;color:#777e75;margin:0 0 28px}.auto-meta{color:#5d6a59;margin-top:auto;font-size:11px;font-weight:700;display:flex;justify-content:space-between}.footer{border-top:1px solid #e6e7e0;max-width:var(--max);padding:25px 0 35px;margin:auto;display:flex;align-items:center;gap:45px}.footer-brand{width:128px}.footer>div{display:flex;gap:20px;font-size:11px;color:#596157}.footer small{margin-left:auto;color:#899188;font-size:10px}
.inner-page{min-height:100vh;display:flex;flex-direction:column}.inner-page main{flex:1}.inner-hero{padding:95px 0 110px}.inner-hero h1{font:700 clamp(44px,5.1vw,75px)/1 Georgia,serif;letter-spacing:-.06em;margin:25px 0 28px}.inner-hero>p,.ebook-page-grid p{color:#616b60;font-size:15px;line-height:1.75;max-width:670px}.inner-lead{font-size:20px!important;color:#313b32!important}.ebook-page-grid{display:grid;grid-template-columns:55% 45%;align-items:center;gap:60px}.large-cover img{max-height:650px;max-width:410px;margin:auto;box-shadow:0 35px 70px #0003;border-radius:5px}.availability{display:flex;flex-direction:column;background:#eef6e7;border:1px solid #cfe6b5;padding:18px;border-radius:14px;margin:28px 0;gap:7px;max-width:460px}.availability strong{font-size:14px}.availability span{font-size:12px;color:#61725d}.large-auto-grid{margin-top:47px}.auto-note{margin-top:27px!important;font-size:12px!important;color:#788077!important}
@media(max-width:1280px){.section-wrap,.footer{width:calc(100% - 72px)}.hero-copy{padding-left:5vw;padding-right:3vw}.ebook-band{padding-left:6vw;padding-right:6vw}}@media(max-width:980px){.hero{grid-template-columns:45% 55%}.hero h1{font-size:53px}.hero-copy{padding-top:47px}.hero-visual{min-height:620px}.float-card{min-width:auto;padding:10px}.float-card strong{font-size:10px}.float-card small{font-size:9px}.step-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:1fr;gap:34px}.product-shot{transform:none}.ebook-band{grid-template-columns:28% 1fr}.ebook-quote{display:none}.ebook-cover{max-width:210px}}@media(max-width:720px){.site-header{width:calc(100% - 36px);height:68px;gap:12px}.brand{width:119px}.nav{gap:10px;margin:auto;font-size:10px}.top-cta{font-size:10px;padding:10px 12px}.hero{grid-template-columns:1fr}.hero-copy{padding:46px 24px 38px}.hero h1{font-size:clamp(49px,12vw,66px)}.hero-lead{font-size:15px}.hero-footnote{max-width:320px}.welcome-panel{max-width:none}.hero-visual{min-height:380px;border-radius:18px;margin:0 14px 0}.hero-video{display:block}.hero-visual{background-image:url('assets/gexna-hero-poster.webp');background-position:center;background-size:cover}.float-card{min-width:150px;max-width:186px;padding:8px 10px}.signal-card{left:3%;top:12%}.score-card{right:3%;top:42%}.publish-card{right:7%;bottom:15%}.section-wrap,.footer{width:calc(100% - 36px)}.steps{padding:68px 0}.step-grid{gap:12px}.step-card{min-height:290px;padding:16px}.step-card h3{font-size:21px}.step-card p{font-size:11px}.product-band{padding:65px 0}.product-copy h2{font-size:48px}.ebook-band{padding:42px 25px;grid-template-columns:110px 1fr;gap:20px}.ebook-cover{width:110px}.ebook-copy{padding:0}.ebook-copy h2{font-size:34px}.ebook-copy h3{font-size:15px}.ebook-copy>p{font-size:11px}.ebook-copy .btn{font-size:11px;padding:12px}.automation-section{padding:62px 0}.automation-grid{grid-template-columns:1fr}.auto-title-row{align-items:flex-start;flex-direction:column}.auto-card{min-height:205px}.footer{flex-wrap:wrap;gap:15px}.footer small{margin-left:0;width:100%}.ebook-page-grid{grid-template-columns:1fr;gap:38px}.inner-hero{padding:70px 0}.inner-hero h1{font-size:50px}}@media(max-width:460px){.nav{gap:8px}.nav a:first-child{display:none}.brand{width:114px}.top-cta{padding:9px}.eyebrow{font-size:8px;letter-spacing:.1em}.step-grid{grid-template-columns:1fr}.step-card{min-height:auto}.ebook-band{grid-template-columns:95px 1fr;padding:35px 18px}.ebook-cover{width:95px}}
@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.float-card{opacity:1!important;transform:none!important}.score-card{display:none}.publish-card{display:none}}


/* GEXNA V6 — timeline overlays tied to actual video playback, never drifting CSS loops. */
.hero-visual .float-card { animation:none; opacity:0; transform:translate3d(0,14px,0) scale(.985); pointer-events:none;
  transition:opacity .48s ease,transform .65s cubic-bezier(.22,.68,.2,1); will-change:opacity,transform; }
.hero-visual .float-card.is-visible { opacity:1; transform:translate3d(0,0,0) scale(1); }
.hero-visual .signal-card { top:12%;left:7%; }
.hero-visual .score-card { top:30%;right:5%; }
.hero-visual .generate-card { bottom:30%;left:7%; }
.hero-visual .publish-card { bottom:14%;right:7%; }
/* Keep a clear focal point on mobile rather than four animated floating cards. */
@media(max-width:720px) {
  .hero-visual .float-card { display:none; }
  .hero-visual .signal-card { display:flex; top:13%;left:4%;opacity:1;transform:none; }
  .hero-visual .demo-caption { bottom:14px;font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-visual .float-card { transition:none!important;animation:none!important; }
  .hero-visual .signal-card { opacity:1!important;transform:none!important; }
  .hero-visual .score-card,.hero-visual .generate-card,.hero-visual .publish-card { display:none!important; }
}

/* ===== GEXNA V6.1: Balanced split hero, tuned for real desktop viewports =====
   Prior version used a too-narrow text column and oversized full-height video.
   These overrides are deliberately isolated for straightforward integration. */
@media (min-width: 1101px) {
  .hero {
    width: min(1210px, calc(100% - 76px));
    max-width: 1210px;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    column-gap: clamp(24px, 3.3vw, 50px);
    min-height: 0;
    overflow: visible;
    margin: 0 auto 50px;
  }
  .hero-copy {
    min-width: 0;
    padding: 28px 18px 24px 0;
  }
  .hero h1 {
    font-size: clamp(50px, 4.3vw, 69px);
    line-height: 1.03;
    letter-spacing: -.052em;
    margin: 25px 0 18px;
  }
  .hero-lead { max-width: 480px; font-size: 16px; line-height: 1.65; margin-bottom: 26px; }
  .welcome-panel { max-width: 425px; padding: 25px 29px 22px; }
  .welcome-panel h2 { font-size: 28px; }
  .hero-footnote { margin-top: 22px; }
  .hero-visual {
    width: 100%;
    height: clamp(465px, 35vw, 530px);
    min-height: 0;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(18,28,20,.14);
  }
  .hero-video { object-position: 50% center; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .hero {
    width: calc(100% - 52px);
    max-width: 100%;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items:center;
    column-gap: 20px;
    min-height:0;
    margin:0 auto 40px;
    overflow:visible;
  }
  .hero-copy { min-width:0; padding: 24px 12px 26px 0; }
  .hero h1 { font-size: clamp(46px, 5.3vw, 61px); line-height:1.02; }
  .hero-lead { max-width:420px; font-size:14px; }
  .welcome-panel { max-width:420px; padding:21px 23px; }
  .hero-visual { height:475px; min-height:0; border-radius:22px; }
  .float-card { max-width: 175px; padding:9px; }
  .float-card strong { font-size:10px; }
  .float-card small { font-size:9px; }
}
@media (max-width: 820px) {
  .hero { display:grid; width:calc(100% - 36px); max-width:100%; grid-template-columns:1fr;
    gap:25px; margin:0 auto 35px; overflow:visible; min-height:0; }
  .hero-copy { padding:26px 0 0; }
  .hero h1 { font-size:clamp(48px, 9.3vw, 68px); line-height:1.04; }
  .hero-lead { max-width:540px; }
  .welcome-panel { max-width:475px; }
  .hero-visual { height:420px; min-height:0; border-radius:20px; margin:0; }
}
@media (max-width:720px) {
  .hero-visual { height:365px; min-height:0; }
}
@media (max-width:460px) {
  .hero { width:calc(100% - 32px); }
  .hero-copy { padding-top:21px; }
  .hero h1 { font-size:clamp(46px, 11vw, 59px); }
  .hero-visual { height:300px; }
}
/* Wrap the tagline rather than force it into narrow columns. */
.eyebrow { white-space:normal; flex-wrap:wrap; row-gap:4px; }
/* Percentage columns + gap previously caused hidden overflows below the hero. */
.product-grid { grid-template-columns: minmax(0,2fr) minmax(0,3fr); }
.ebook-band { grid-template-columns: minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.85fr); }
@media (max-width:980px) { .product-grid { grid-template-columns: 1fr; } .ebook-band { grid-template-columns: minmax(0,1fr) minmax(0,2.2fr); } }
@media (max-width:720px) { .ebook-band { grid-template-columns: 110px minmax(0,1fr); } }
@media (max-width:460px) { .ebook-band { grid-template-columns: 95px minmax(0,1fr); } }

/* ===============================================================
   GEXNA V6.2 — REAL PRODUCT SCREENS & 3-STEP WORKFLOW
   All UI images in this layout are documentary crops of real Gexna
   screenshots supplied by the product owner, not generated dashboards.
   =============================================================== */
.steps.section-wrap{padding-top:87px;padding-bottom:81px}
.section-heading.center p{max-width:620px;margin-left:auto;margin-right:auto;line-height:1.7}
.step-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin-top:38px}
.step-card-real{padding:23px 22px 21px;min-height:510px;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;box-shadow:0 14px 30px rgba(18,27,18,.055)}
.step-card-real h3{font-size:30px;letter-spacing:-.035em;margin:16px 0 8px}
.step-card-real .number{font-size:10px;letter-spacing:.13em;color:#577a42}
.step-card-real .step-lead{font-weight:750;color:#202821;font-size:14px;margin-bottom:9px;min-height:0}
.step-card-real p:not(.step-lead){font-size:12.6px;line-height:1.66;min-height:116px;max-width:360px;margin:0 0 15px;color:#636c63}
.step-card-real .step-icon{width:40px;height:40px;font-size:22px}
.screen-link{position:relative;display:block;overflow:hidden;border:0;padding:0;text-align:left;cursor:zoom-in;background:#121915;color:inherit;width:100%;isolation:isolate}
.screen-link:focus-visible{outline:3px solid #7fac40;outline-offset:3px}
.step-image{height:225px;margin-top:auto;border-radius:13px;box-shadow:0 10px 20px #18231b2b}
.step-image img{width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .4s ease}
.step-image:hover img,.module-image:hover img{transform:scale(1.035)}
.step-image.generate-screen img{object-fit:contain;object-position:center 21%;padding:0 28px;background:radial-gradient(ellipse at 60% 30%,#31432a,#0e1511 77%)}
.step-image.publish-screen img{object-fit:contain;object-position:center center;padding:28px 16px;background:radial-gradient(ellipse at 50% 10%,#34422e,#111912 80%)}
.image-hint{position:absolute;bottom:10px;right:10px;background:#f9fdf2ed;color:#243221;font-size:10px;font-weight:800;letter-spacing:.005em;border:1px solid #ffffffbc;padding:8px 10px;border-radius:8px;box-shadow:0 6px 18px #0002}
.real-screen-caption{font-size:11px;color:#7e877b;text-align:center;margin:23px auto 0;line-height:1.5}
/* Product band: feature cards make all four modules visible in HTML. */
.product-band{padding:79px 0 92px;background:linear-gradient(128deg,#f4f8ef 3%,#fffef8 50%,#e9f8d9 100%)}
.modules-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:54px;margin-bottom:33px}
.modules-heading .product-copy h2{margin:15px 0 0;font-size:clamp(42px,4.3vw,59px);max-width:650px}
.modules-intro{padding-bottom:6px}
.modules-intro p{font-size:15px;line-height:1.74;color:#596258;margin:0 0 17px;max-width:470px}
.modules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.module-card{background:#fffefa;border:1px solid #dfe7d9;border-radius:20px;overflow:hidden;box-shadow:0 15px 32px #2f3c2310;transition:transform .25s,box-shadow .25s}
.module-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px #2f3c2324}
.module-image{height:248px;border-radius:0;border-bottom:1px solid #283527}
.module-image img{height:100%;width:100%;object-fit:cover;object-position:center 18%;transition:transform .35s ease}
.module-card:nth-child(3) .module-image img{object-position:center top}
.module-card:nth-child(4) .module-image img{object-fit:contain;padding:4px 10px;background:radial-gradient(ellipse at 50% 25%,#2c3a29,#101711 85%);object-position:center 18%}
.module-text{padding:23px 25px 25px}
.module-no{font-size:10px;letter-spacing:.145em;font-weight:800;color:#6e875d}
.module-text h3{font:700 29px/1.14 Georgia,serif;letter-spacing:-.03em;margin:10px 0 9px}
.module-text p{margin:0;color:#626b61;font-size:13px;line-height:1.66;max-width:470px}
/* Actual product UI cards appear over the creator footage, not inside the video encoding. */
.hero-visual .float-card{display:none!important}
.hero-flow-overlay,.demo-x-card{z-index:4;position:absolute;background:#101611ed;color:#f4f7ee;box-shadow:0 20px 54px #04090496;border:1px solid #b9e68260;backdrop-filter:blur(14px);border-radius:15px;overflow:hidden;opacity:0;pointer-events:none;transform:translate3d(0,13px,0) scale(.97);transition:opacity .44s ease,transform .62s cubic-bezier(.22,.68,.2,1);}
.hero-flow-overlay.is-visible,.demo-x-card.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.hero-flow-overlay{width:clamp(190px,20vw,255px);padding:10px;left:4.5%;bottom:11%}
.hero-flow-overlay.overlay-publish{bottom:13%;left:5%;width:245px}
.hero-flow-overlay .overlay-eyebrow{display:block;color:#bfff83;letter-spacing:.12em;font-weight:850;font-size:9px;padding:2px 3px 9px}
.overlay-screenshot{background:#101814;overflow:hidden;border:1px solid #42533d;border-radius:9px;height:120px}
.overlay-screenshot img{height:100%;width:100%;object-fit:cover;object-position:center center;display:block}
.overlay-generate .overlay-screenshot img{object-fit:cover;object-position:center 10%}
.overlay-publish .publish-btn-clip{height:64px}
.overlay-publish .publish-btn-clip img{object-fit:contain;padding:4px}
.overlay-foot{display:flex;flex-direction:column;gap:2px;padding:9px 2px 2px}
.overlay-foot strong{font-size:12px;color:#f9fff4;font-weight:750}
.overlay-foot span{font-size:10px;color:#c5d9c2}
.demo-x-card{width:clamp(255px,22vw,312px);right:4%;bottom:11%;padding:13px 15px;border-color:#ffffff81;background:#fdfef8f4;color:#171d19}
.demo-x-top{display:flex;align-items:center;gap:10px}
.demo-avatar{width:29px;height:29px;border-radius:50%;background:#c2f58c;display:grid;place-items:center;color:#1f4816;font-weight:900}
.demo-x-top strong{font-size:11px;display:block}
.demo-x-top small{font-size:9px;color:#77806f;display:block;margin-top:1px}
.demo-x-symbol{font-size:19px;color:#18231c;margin-left:auto}
.demo-x-card p{font-size:12px;line-height:1.45;margin:12px 0 11px;color:#303b30}
.demo-x-metrics{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #e4e7dd;padding-top:10px;color:#57665a;font-size:10px}
.demo-x-metrics b{font-size:11px;color:#222d25;font-variant-numeric:tabular-nums}
.demo-metrics-note{display:block;color:#78816e;font-size:8px;margin-top:9px;text-align:center;font-weight:700}
.hero-visual .demo-caption{z-index:5;left:4%;bottom:12px;white-space:normal;line-height:1.4;max-width:270px;font-size:8px}
/* Full-size image viewer, uses existing image files and native <dialog>. */
.screen-dialog{border:1px solid #4b5c48;border-radius:16px;padding:0;background:#121a15;color:#e6eee0;width:min(1100px,94vw);max-height:91vh;box-shadow:0 30px 90px #0008}
.screen-dialog::backdrop{background:rgba(6,11,7,.78);backdrop-filter:blur(6px)}
.screen-dialog-top{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #38493b;letter-spacing:.13em;font-size:10px;color:#b6dab3;font-weight:800}
.dialog-close{background:#28372b;border:1px solid #617a5b;color:white;border-radius:9px;padding:10px 13px;cursor:pointer;font-size:11px}
.screen-dialog-scroll{overflow:auto;max-height:calc(91vh - 67px);background:#101512}
.screen-dialog-scroll img{width:100%;height:auto;max-width:none;object-fit:contain}
@media(max-width:1100px){
 .hero-flow-overlay{width:205px;bottom:10%}
 .demo-x-card{width:250px;right:3%;bottom:8%}
 .demo-x-metrics{gap:7px}
 .modules-heading{gap:25px}
}
@media(max-width:980px){
 .step-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .step-card-real{padding:16px;min-height:510px}
 .step-card-real p:not(.step-lead){font-size:11.5px}
 .step-card-real h3{font-size:25px}
 .step-image{height:195px}
 .modules-grid{gap:15px}
 .module-image{height:210px}
 .module-text{padding:20px}
 .hero-flow-overlay{left:3%;width:195px}
}
@media(max-width:820px){
 .modules-heading{grid-template-columns:1fr;gap:12px}
 .modules-intro p{max-width:650px}
 .hero-flow-overlay{left:4%;width:250px}
}
@media(max-width:720px){
 .steps.section-wrap{padding-top:68px;padding-bottom:65px}
 .step-grid-three{grid-template-columns:1fr;gap:15px;margin-top:29px}
 .step-card-real{min-height:auto;padding:20px}
 .step-card-real p:not(.step-lead){font-size:13px;min-height:0;margin-bottom:17px}
 .step-image{height:235px}
 .modules-grid{grid-template-columns:1fr;gap:16px}
 .module-image{height:230px}
 .module-text h3{font-size:27px}
 .product-band{padding:62px 0 69px}
 .modules-heading .product-copy h2{font-size:clamp(40px,8vw,53px)}
 .hero-visual .hero-flow-overlay,.hero-visual .demo-x-card{display:none}
 .hero-visual .overlay-discover{display:block;opacity:1;transform:none;bottom:13%;left:4%;width:185px;padding:7px}
 .overlay-screenshot{height:80px}
 .hero-flow-overlay .overlay-eyebrow{font-size:7px;padding-bottom:5px}
 .overlay-foot{padding:6px 2px 1px}
 .overlay-foot strong{font-size:10px}.overlay-foot span{font-size:9px}
}
@media(max-width:430px){
 .step-image{height:205px}
 .module-image{height:195px}
 .hero-visual .overlay-discover{bottom:17%;width:170px}
}
@media(prefers-reduced-motion:reduce){
 .hero-visual .hero-flow-overlay,.hero-visual .demo-x-card{transition:none!important}
 .hero-visual .overlay-discover{opacity:1!important;transform:none!important}
 .hero-visual .overlay-generate,.hero-visual .overlay-publish,.hero-visual .demo-x-card{display:none!important}
 .screen-link img,.module-card{transition:none!important}
}

/* ==========================================================
   GEXNA V6.3 — REAL MOTION PRODUCT EXCERPTS + FULL WALKTHROUGH
   V6 background actor film unchanged; product footage from owner's
   authentic 49-second screen recording.  No generated interfaces.
   ========================================================== */
.hero-motion-card{width:clamp(235px,24vw,315px);bottom:10%;left:4%;padding:11px;}
.hero-motion-card.overlay-select{width:clamp(245px,25vw,322px);bottom:12%;left:4%}
.hero-motion-card.overlay-publish{width:clamp(240px,24vw,305px);bottom:12%;left:5%}
.hero-motion-card .overlay-eyebrow{font-size:9px;letter-spacing:.09em;white-space:normal;line-height:1.35}
.hero-motion-card .overlay-motion{display:block;width:100%;height:156px;object-fit:contain;background:#0c1410;border-radius:9px;border:1px solid #405440}
.hero-motion-card .overlay-motion-fallback{display:none;width:100%;height:125px;object-fit:cover;border-radius:8px;}
.hero-motion-card .overlay-foot{padding:9px 3px 2px;gap:3px}
.hero-motion-card .overlay-foot strong{font-size:13px}
.hero-motion-card .overlay-foot span{font-size:10px}
.demo-x-live-clip{width:clamp(250px,25vw,345px);padding:12px;right:3.5%;bottom:9%;background:#fffff6ed}
.demo-x-live-clip .x-motion{display:block;width:100%;height:144px;background:#060906;object-fit:contain;border-radius:9px;margin:10px 0 8px}
.demo-x-live-clip .demo-x-metrics{font-variant-numeric:tabular-nums}
.demo-x-live-clip .demo-metrics-note{color:#5e675f;line-height:1.35;font-size:9px}
.hero-visual .demo-caption{font-size:8px;max-width:330px;letter-spacing:.1em}

.full-workflow-demo{margin-top:59px;background:linear-gradient(132deg,#f2f7ec,#fcfcf7 60%,#e8f4df);border:1px solid #dde8d1;padding:32px;border-radius:25px;box-shadow:0 15px 40px rgba(37,53,34,.075)}
.walkthrough-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:end;margin:0 0 23px}
.walkthrough-intro .kicker{color:#6c8a51;font-size:10px}
.walkthrough-intro h3{font:700 clamp(32px,3vw,44px)/1.15 Georgia,serif;letter-spacing:-.04em;margin:13px 0 0;color:#1c271e;max-width:740px}
.walkthrough-intro h3 em{font-style:normal;color:#598d38}
.walkthrough-intro p{font-size:13px;line-height:1.75;color:#59665a;margin:0 0 1px;max-width:445px}
.walkthrough-intro p strong{font-weight:750;color:#233727}
.walkthrough-layout{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(265px,.72fr);gap:17px;align-items:stretch}
.walkthrough-player{border-radius:16px;overflow:hidden;background:#0c1410;position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center}
.walkthrough-video{width:100%;display:block;aspect-ratio:16/9;max-height:none;background:#111914;object-fit:contain;cursor:pointer}
.walkthrough-video:focus-visible{outline:3px solid #adf879;outline-offset:-3px}
.walkthrough-video-label{padding:12px 18px;background:#111c15;color:#cad9c4;letter-spacing:.1em;font-size:9px;font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.recorded-dot{width:7px;height:7px;border-radius:50%;background:#bff588;display:inline-block}
.walkthrough-chapters{background:#fffefb;border:1px solid #e0e8da;border-radius:16px;padding:15px 12px;display:flex;flex-direction:column;min-width:0}
.walkthrough-chapters-top{font-size:10px;letter-spacing:.16em;color:#6c895c;font-weight:900;padding:7px 8px 12px}
.chapter-link{border:1px solid transparent;border-radius:12px;display:flex;align-items:center;text-align:left;gap:11px;padding:13px 10px;background:transparent;color:#263426;cursor:pointer;width:100%;min-height:65px;transition:background .2s ease,border-color .2s ease}
.chapter-link:not(:last-child){border-bottom:1px solid #edf1e8;border-radius:9px}
.chapter-link:hover,.chapter-link.chapter-active{background:#eef7e7;border-color:#d2e5c6}
.chapter-link:focus-visible{outline:3px solid #98ce67;outline-offset:1px}
.chapter-link>.chapter-time{font-variant-numeric:tabular-nums;white-space:nowrap;background:#e6f1de;color:#446737;font-size:10px;font-weight:900;padding:6px 8px;border-radius:7px}
.chapter-link>span:nth-child(2){flex:1;min-width:0}
.chapter-link strong{font-size:12px;display:block;line-height:1.45}
.chapter-link small{font-size:10px;display:block;color:#69746b;line-height:1.45;margin-top:3px}
.chapter-link>span:last-child{font-size:16px;color:#719d56}
.walkthrough-disclaimer{font-size:10.5px;line-height:1.7;color:#748172;margin:16px 3px 0}
@media(max-width:1100px){
 .hero-motion-card{width:245px;bottom:9%}
 .demo-x-live-clip{width:260px}
 .hero-motion-card .overlay-motion{height:130px}
 .walkthrough-layout{grid-template-columns:minmax(0,1.35fr) minmax(235px,.75fr)}
 .full-workflow-demo{padding:23px}
 .chapter-link{padding:10px 7px;gap:8px}
}
@media(max-width:820px){
 .walkthrough-intro{grid-template-columns:1fr;gap:11px}
 .walkthrough-intro p{max-width:670px}
 .walkthrough-layout{grid-template-columns:1fr}
 .walkthrough-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .walkthrough-chapters-top{grid-column:1/-1}
 .chapter-link:not(:last-child){border-bottom:1px solid transparent}
}
@media(max-width:720px){
 .hero-visual .hero-flow-overlay,.hero-visual .demo-x-card{display:none!important}
 .hero-visual .overlay-scan{display:block!important;opacity:1!important;transform:none!important;width:210px;bottom:12%;left:4%;padding:8px}
 .hero-motion-card .overlay-motion{display:none}
 .hero-motion-card .overlay-motion-fallback{display:block;height:95px}
 .hero-motion-card .overlay-eyebrow{font-size:7px}
 .hero-motion-card .overlay-foot{padding:6px 2px 1px}
 .hero-motion-card .overlay-foot strong{font-size:10px}
 .hero-motion-card .overlay-foot span{font-size:9px}
 .full-workflow-demo{margin-top:35px;border-radius:17px;padding:17px}
 .walkthrough-intro h3{font-size:clamp(27px,6vw,36px)}
 .walkthrough-intro p{font-size:12px}
 .walkthrough-video-label{font-size:8px;padding:11px}
 .walkthrough-disclaimer{font-size:9.5px}
}
@media(max-width:480px){
 .walkthrough-chapters{display:flex;gap:1px;padding:10px}
 .chapter-link{min-height:61px}
 .hero-visual .overlay-scan{width:183px;bottom:14%}
 .hero-motion-card .overlay-motion-fallback{height:75px}
 .walkthrough-intro h3{font-size:29px}
}
@media(prefers-reduced-motion:reduce){
 .hero-visual .hero-flow-overlay,.hero-visual .demo-x-card{display:none!important;transition:none!important}
 .hero-visual .overlay-scan{display:block!important;opacity:1!important;transform:none!important}
 .hero-motion-card .overlay-motion{display:none!important}
 .hero-motion-card .overlay-motion-fallback{display:block!important}
 .chapter-link{transition:none}
}


/* ==========================================================
   GEXNA V6.4 · REBALANCED REAL-APP HERO SEQUENCE
   The V6 actor footage stays untouched. Motion snippets are
   smaller, readable and deliberately move around the frame.
   ========================================================== */
@media (min-width:1101px){
  .hero{max-width:1300px;width:min(1300px,calc(100% - 72px));grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:38px;}
  .hero-copy{padding-right:0;}
  .hero-visual{height:clamp(474px,36vw,548px);}
  .hero-lead{max-width:510px;}
}
.hero-motion-card{
  width:min(240px,43%);padding:9px;border-radius:13px;
  box-shadow:0 10px 32px rgba(0,0,0,.45);
  background:rgba(13,22,16,.92);
  bottom:auto;left:auto;top:auto;right:auto;
}
.hero-flow-overlay.overlay-publish{width:min(232px,42%);left:auto;bottom:auto;}
.hero-motion-card.overlay-select{width:min(234px,43%);left:auto;bottom:auto;}
.hero-motion-card.overlay-scan{top:11%;left:5%;right:auto;bottom:auto;}
.hero-motion-card.overlay-select{bottom:10%;right:5%;left:auto;top:auto;}
.hero-motion-card.overlay-generate{
  left:50%;bottom:8%;right:auto;top:auto;width:min(268px,47%);
  --shift-x:-50%;
}
.hero-motion-card.overlay-publish{top:9%;right:5%;left:auto;bottom:auto;}
/* Keep horizontal alignment through the entrance/exit transition. */
.hero-flow-overlay.overlay-generate{transform:translate3d(-50%,13px,0) scale(.975)}
.hero-flow-overlay.overlay-generate.is-visible{transform:translate3d(-50%,0,0) scale(1)}
.hero-motion-card .overlay-eyebrow{font-size:9px;letter-spacing:.07em;padding:2px 2px 6px;color:#caff96}
.hero-motion-card .overlay-motion{
  width:100%;height:119px;object-fit:cover;object-position:center center;
  border-radius:8px;background:#101712;border:1px solid #51684a;
}
.hero-motion-card.overlay-generate .overlay-motion{height:135px;object-fit:cover;object-position:50% 50%;}
.hero-motion-card.overlay-select .overlay-motion{height:121px;object-fit:cover;object-position:55% 50%;}
.hero-motion-card .overlay-foot{padding:8px 3px 2px;gap:4px}
.hero-motion-card .overlay-foot strong{font-size:14px;line-height:1.25}
.hero-motion-card .overlay-foot span{font-size:11px;line-height:1.3}
.hero-visual .demo-caption{left:5%;bottom:9px;font-size:8px;max-width:280px;letter-spacing:.07em;text-shadow:0 1px 2px #000}
.demo-x-live-clip.demo-x-v64{
  left:5%;right:auto;top:10%;bottom:auto;
  width:min(280px,49%);padding:13px 13px 10px;
  background:rgba(255,255,251,.97);border:1px solid #f0f2e7;
  box-shadow:0 14px 36px rgba(0,0,0,.32);
}
.demo-x-v64 .demo-avatar{background:#c2f58c;width:29px;height:29px;font-size:16px;flex-shrink:0;color:#183114}
.demo-x-v64 .demo-x-user{min-width:0;flex:1;line-height:1.32}
.demo-x-v64 .demo-x-top strong{font-size:12px;line-height:1.25}
.demo-x-v64 .demo-x-top small{font-size:9px;line-height:1.25;margin-top:3px}
.demo-x-v64 .demo-x-content{padding:12px 0 10px}
.demo-x-v64 .demo-x-content p{font-size:13px;line-height:1.47;margin:0 0 8px;color:#1e2820;font-weight:600}
.demo-x-v64 .demo-x-content .demo-x-secondary{font-size:11px;font-weight:450;line-height:1.45;color:#536055;margin:0}
.demo-x-v64 .demo-x-metrics{padding-top:9px;gap:6px;font-size:11px;white-space:nowrap}
.demo-x-v64 .demo-x-metrics b{font-size:12px;color:#17241a}
.demo-x-v64 .demo-metrics-note{font-size:9px;margin-top:10px;text-align:left;line-height:1.35;color:#505b51;font-weight:650}
.demo-sample-pill{background:#e4f5d9;border-radius:5px;padding:3px 5px;font-size:8px;color:#376b25;font-weight:900;margin-right:3px;letter-spacing:.05em}
/* Chapters stay click-to-seek; timestamps intentionally hidden from their labels. */
.walkthrough-chapters .chapter-link{gap:12px;padding:13px 14px}
.walkthrough-chapters .chapter-link>span:first-child{flex:1;min-width:0}
.walkthrough-chapters .chapter-link>span:nth-child(2){flex:0 0 auto}
.walkthrough-chapters .chapter-link strong{font-size:13px}
.walkthrough-chapters .chapter-link small{font-size:11px}
@media(min-width:821px) and (max-width:1100px){
  .hero-motion-card,.hero-motion-card.overlay-select{width:min(198px,44%);}
  .hero-motion-card.overlay-generate{width:min(208px,47%);}
  .hero-flow-overlay.overlay-publish{width:min(200px,44%);}
  .hero-motion-card .overlay-motion{height:99px}
  .hero-motion-card.overlay-select .overlay-motion{height:100px}
  .hero-motion-card.overlay-generate .overlay-motion{height:104px}
  .hero-motion-card .overlay-eyebrow{font-size:8px}
  .hero-motion-card .overlay-foot strong{font-size:12px}
  .hero-motion-card .overlay-foot span{font-size:10px}
  .demo-x-live-clip.demo-x-v64{width:min(210px,48%);padding:10px}
  .demo-x-v64 .demo-x-content p{font-size:11px}
  .demo-x-v64 .demo-x-content .demo-x-secondary{font-size:9px}
  .demo-x-v64 .demo-x-metrics{font-size:9px}
  .demo-x-v64 .demo-x-metrics b{font-size:10px}
  .demo-x-v64 .demo-metrics-note{font-size:8px}
}
@media(max-width:820px) and (min-width:721px){
  .hero-motion-card{width:240px}
  .hero-motion-card.overlay-select{width:240px}
  .hero-motion-card.overlay-generate{width:270px}
  .hero-flow-overlay.overlay-publish{width:230px}
  .demo-x-live-clip.demo-x-v64{width:260px}
}
@media(max-width:720px){
  /* Mobile shows the static REAL-APP discovery screenshot on V6 poster. */
  .hero-visual .overlay-scan{width:188px;left:4%;right:auto;top:auto;bottom:13%}
  .hero-visual .overlay-scan .overlay-motion-fallback{height:92px;object-fit:cover}
  .hero-visual .overlay-scan .overlay-foot strong{font-size:11px}
  .hero-visual .overlay-scan .overlay-foot span{font-size:9px}
}
@media(max-width:430px){
  .hero-visual .overlay-scan{width:172px;bottom:14%}
  .hero-visual .overlay-scan .overlay-motion-fallback{height:73px}
}
@media(prefers-reduced-motion:reduce){
  .hero-flow-overlay.overlay-generate.is-visible{transform:translate3d(-50%,0,0) scale(1)}
}
/* V6.4 final card gets its own distinct position, separate from Discover. */
@media(min-width:821px){.demo-x-live-clip.demo-x-v64{top:25%;}}
/* Results anchor low-left: actor's face remains unobstructed in closing shot. */
@media(min-width:821px){.demo-x-live-clip.demo-x-v64{top:auto;bottom:8%;}}


/* ===== GEXNA V5: accurate product images, calmer hero overlays & worldwide sources ===== */
.hero-visual .hero-photo-overlay{position:absolute;z-index:8;max-width:54%;width:clamp(230px,43%,305px);left:auto;right:auto;top:auto;bottom:auto;padding:10px;background:#101813ed;border:1px solid #9acb77aa;border-radius:13px;box-shadow:0 12px 32px #0008;transition:opacity .48s ease,transform .56s ease;pointer-events:none}
.hero-visual .flow-scan{top:10%;left:5%;}
.hero-visual .flow-generate{right:4%;bottom:10%;}
.hero-visual .flow-publish{right:5%;top:13%;}
.hero-photo-overlay .flow-kicker{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:850;color:#f4f9ee;letter-spacing:.015em;padding:2px 1px 10px}
.flow-num{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#c0f68e;color:#1b3a1a;font-weight:900;font-size:11px}
.hero-photo-overlay .flow-image{background:#0f1611;border:1px solid #425441;border-radius:7px;overflow:hidden;width:100%;height:165px;display:flex;align-items:center;justify-content:center}
.hero-photo-overlay .flow-image img{object-fit:contain;width:100%;height:100%;display:block}
.hero-photo-overlay .image-scan img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.24)}
.hero-photo-overlay .image-generate img{object-fit:contain;padding:3px}
.hero-photo-overlay .image-publish img{object-fit:contain;padding:4px}
.hero-photo-overlay .flow-explainer{font-size:10px;color:#cce5c4;line-height:1.4;padding:9px 2px 2px}
.hero-visual .v5-results{width:min(320px,53%);max-width:53%;top:7%;bottom:auto;left:5%;right:auto;z-index:9;padding:14px 14px 13px;background:#fbfef9fa;box-shadow:0 14px 38px #0008}
.hero-visual .v5-results .demo-x-content p{font-size:14px;line-height:1.4}
.hero-visual .v5-results .demo-x-secondary{font-size:11px}
.hero-visual .v5-results .demo-x-metrics{padding-top:12px;}
.hero-visual .v5-results .demo-x-metrics b{font-size:12px}
.hero-visual .demo-caption{display:none!important}
/* no promotional badges over product images */
.image-hint{background:#f8fbee;color:#355328}
.real-screen-caption{display:none}
.walkthrough-video-label{display:none}
.screen-dialog-top{letter-spacing:.07em}
.automation-workflow-list{display:grid;grid-template-columns:1fr;gap:32px;margin-top:38px}
.workflow-feature{border:1px solid #dde6d7;background:#fffefa;border-radius:22px;padding:26px;box-shadow:0 15px 40px #2b3a270d}
.workflow-feature-header{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:20px}
.workflow-feature-header h2{font:700 clamp(22px,2.4vw,34px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:10px 0 12px}
.workflow-feature-header p{font-size:13.5px;line-height:1.65;color:#626e61;max-width:710px;margin:0}
.workflow-go{white-space:nowrap;flex-shrink:0}
.workflow-map-link{background:#19241d;border-radius:15px;display:block;overflow:hidden}
.workflow-map-link img{width:100%;height:auto;display:block}
.workflow-caption{font-size:11px;line-height:1.7;color:#738071;margin-top:12px}
.workflow-caption a{color:#356823;font-weight:750;text-decoration:underline}
.auto-map-mini{margin:15px -5px -4px;border-radius:10px;overflow:hidden;background:#172018;border:1px solid #526b4f}
.auto-map-mini img{width:100%;height:95px;object-fit:cover;object-position:center}
.auto-map-mini span{font-size:10px;padding:9px 10px;color:#d1e4cd;display:block}
.auto-map-mini strong{color:#c6ff97}
.n8n-schematic-note{font-size:11px;margin:15px 0 0;color:#71816d}
@media(max-width:1050px){.hero-visual .hero-photo-overlay{width:min(225px,46%)}.hero-photo-overlay .flow-image{height:115px}.hero-visual .v5-results{width:min(255px,51%)}.hero-visual .v5-results .demo-x-content p{font-size:11px}}
@media(max-width:720px){.hero-visual .hero-photo-overlay{display:none!important}.hero-visual .flow-scan{display:block!important;opacity:1;transform:none;top:auto;bottom:13%;left:4%;width:200px;max-width:55%}.hero-photo-overlay .flow-image{height:93px}.hero-visual .v5-results{display:none!important}.workflow-feature-header{display:block}.workflow-go{margin-top:20px}.workflow-feature{padding:18px}.auto-map-mini img{height:75px}}
@media(prefers-reduced-motion:reduce){.hero-visual .hero-photo-overlay{display:none!important}.hero-visual .flow-scan{display:block!important;opacity:1!important;transform:none!important}.hero-visual .v5-results{display:none!important}}


/* ===== GEXNA V6: author-supplied n8n maps + restrained hero sequence ===== */
/* Show the WHOLE actual canvas image, not an SVG abstraction or center-crop. */
.auto-map-mini{background:#f7f8f3;border-color:#d8e2d5;}
.auto-map-mini img{width:100%;height:151px;max-height:151px;object-fit:contain;object-position:center;background:#f7f8f3;}
.auto-map-mini span{color:#3a5235;background:#f0f6ea;border-top:1px solid #dce7d3;}
.auto-map-mini strong{color:#2d6521;}
.workflow-map-link{background:#f6f8f1;border:1px solid #e4e9db;padding:12px;cursor:zoom-in;}
.workflow-map-link img{width:100%;height:auto;max-height:none;object-fit:contain;image-rendering:auto;border-radius:8px;}
.workflow-map-link:focus-visible{outline:3px solid #7dcf42;outline-offset:4px;}
/* Desktop overlays at 70% of V5: width, inner screenshots, and spacing. */
@media(min-width:721px){
 .hero-visual .hero-photo-overlay{width:clamp(161px,30.1%,213.5px);max-width:37.8%;padding:7px;border-radius:9px;}
 .hero-photo-overlay .flow-kicker{font-size:10px;gap:5px;padding:1px 0 7px;}
 .hero-photo-overlay .flow-num{width:18px;height:18px;border-radius:5px;font-size:8px;}
 .hero-photo-overlay .flow-image{height:116px;border-radius:6px;}
 .hero-photo-overlay .flow-explainer{font-size:8.5px;line-height:1.37;padding:6px 1px 1px;}
 .hero-visual .flow-scan{top:13%;left:4%;}
 .hero-visual .flow-generate{right:4%;bottom:12%;}
 .hero-visual .flow-publish{right:4%;top:14%;}
 /* X example +25% versus effective V5 width: min(320px,53%) -> min(400px,66.25%). */
 .hero-visual .v5-results{width:min(400px,66.25%);max-width:66.25%;padding:18px 18px 16px;left:3.5%;top:auto;bottom:7%;border-radius:17px;}
 .hero-visual .v5-results .demo-x-content p{font-size:17px;line-height:1.4;}
 .hero-visual .v5-results .demo-x-secondary{font-size:13.5px;}
 .hero-visual .v5-results .demo-x-metrics{padding-top:15px;}
 .hero-visual .v5-results .demo-x-metrics b{font-size:15px;}
 .hero-visual .v5-results .demo-x-user strong{font-size:14px;}
 .hero-visual .v5-results .demo-x-user small{font-size:11px;}
}
@media(min-width:721px) and (max-width:1050px){
 .hero-visual .hero-photo-overlay{width:min(157.5px,32.2%);max-width:32.2%;padding:7px;}
 .hero-photo-overlay .flow-image{height:80.5px;}
 .hero-visual .v5-results{width:min(318.75px,63.75%);max-width:63.75%;}
 .hero-visual .v5-results .demo-x-content p{font-size:13.75px;}
}
@media(max-width:720px){
 .hero-visual .flow-scan{width:140px;max-width:38.5%;padding:6px;}
 .hero-photo-overlay .flow-image{height:65px;}
 .hero-photo-overlay .flow-kicker{font-size:10px;padding-bottom:6px;}
 .hero-photo-overlay .flow-num{width:18px;height:18px;font-size:8px;}
 .hero-photo-overlay .flow-explainer{font-size:8px;padding:5px 1px 1px;}
 .auto-map-mini img{height:136px;max-height:136px;}
 .workflow-map-link{padding:6px;}
}


/* ===== GEXNA V7: pricing section + refined final hook card ===== */
.hero-visual .v5-results{width:min(256px,42.4%);max-width:42.4%;}
@media(min-width:821px) and (max-width:1100px){.hero-visual .v5-results{width:min(220px,41%);max-width:41%;}}
@media(max-width:820px) and (min-width:721px){.hero-visual .v5-results{width:min(228px,42%);max-width:42%;}}

.plans-band{padding:72px 0 76px}
.plans-headline{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:end;margin-bottom:28px}
.plans-headline h2{margin:12px 0 0;font-size:clamp(34px,3.8vw,52px);line-height:1.1;letter-spacing:-.04em;color:#1b271d}
.plans-headline p{margin:0;color:#5b665d;font-size:14px;line-height:1.75;max-width:520px}
.plans-headline p strong{color:#223227}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{background:linear-gradient(180deg,#18211a,#121914);border:1px solid #273128;border-radius:18px;padding:22px 18px 18px;color:#f2f6ec;box-shadow:0 16px 34px rgba(0,0,0,.16);display:flex;flex-direction:column;min-height:100%}
.plan-card-featured{border-color:#b9ec69;box-shadow:0 16px 38px rgba(107,147,59,.15)}
.plan-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.plan-top h3{margin:0;font-size:31px;line-height:1.1;font-family:Georgia,serif;letter-spacing:-.03em}
.plan-price{font-size:16px;font-weight:800;white-space:nowrap;color:#fff4df}
.plan-price span{font-weight:500;color:#c6d0c6}
.plan-badge{display:inline-block;margin-top:7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#0f2910;background:#c3f582;border-radius:999px;padding:5px 8px;font-weight:900}
.plan-card ul{margin:0 0 18px;padding-left:18px;color:#ced7cc;display:grid;gap:12px;font-size:15px;line-height:1.55;flex:1}
.plan-card li::marker{color:#9dd85d}
.plan-card .btn{margin-top:auto}
.plan-note{margin:11px 2px 0;color:#98a79a;font-size:12px;line-height:1.55}
.plans-footnotes{margin-top:20px;display:grid;gap:12px;color:#768374;font-size:12px;line-height:1.7}
.plans-inline-link{margin-top:18px}
.plans-page-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);gap:28px;align-items:center}
.plans-reference-card{background:linear-gradient(160deg,#142117,#101612);border:1px solid #29372c;border-radius:20px;padding:14px;box-shadow:0 16px 34px rgba(0,0,0,.15)}
.plans-reference-card img{display:block;width:100%;height:auto;border-radius:14px}
@media(max-width:980px){
  .plans-grid{grid-template-columns:1fr;gap:16px}
  .plans-headline,.plans-page-hero{grid-template-columns:1fr;gap:16px}
}
@media(max-width:720px){
  .plans-band{padding:58px 0 62px}
  .plan-card{padding:18px 16px 16px}
  .plan-top h3{font-size:28px}
  .plan-card ul{font-size:14px}
}


/* ===== GEXNA V8: promo plan prices, no plan screenshot hero, better post screenshots ===== */
.plan-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.plan-price .old-price{color:#d9dbd3;text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.95;font-weight:700}
.plan-price .new-price{color:#fff;font-weight:900}
.plan-badge{background:transparent;color:#b9ec69;padding:0;border-radius:0;letter-spacing:0;font-size:12px;font-weight:800;text-transform:none}
.plans-page-hero{display:block;max-width:900px}
.plans-page-hero .inner-lead{max-width:760px}
.plans-page-hero .btn{margin-top:10px}
.hero-photo-overlay .image-generate img,.hero-photo-overlay .image-publish img{object-fit:cover;object-position:center top;padding:0}
.step-card-real .generate-screen img,.step-card-real .publish-screen img{object-fit:cover;object-position:center top}
.module-card:last-child .module-image img{object-fit:cover;padding:0;background:none;object-position:center top}
/* Final hero X card: 15% smaller again and moved to upper-left. */
.hero-visual .v5-results{width:min(218px,36%);max-width:36%;top:6%;left:4.5%;right:auto;bottom:auto;padding:12px 12px 11px}
.hero-visual .v5-results .demo-x-content p{font-size:12px;line-height:1.38}
.hero-visual .v5-results .demo-x-secondary{font-size:10px}
.hero-visual .v5-results .demo-x-metrics{font-size:9px;gap:8px;padding-top:10px}
.hero-visual .v5-results .demo-x-metrics b{font-size:11px}
@media(min-width:821px) and (max-width:1100px){
  .hero-visual .v5-results{width:min(192px,35%);max-width:35%;top:5%;left:4%;padding:10px}
}
@media(max-width:820px) and (min-width:721px){
  .hero-visual .v5-results{width:min(200px,37%);max-width:37%;top:5%;left:4%;padding:10px}
}


/* V8 publication: responsive layout corrections; supplied media stay unchanged. */
.ebook-page-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ebook-page-grid>*,.plans-headline>*,.plans-page-hero>*,.plan-top>*{min-width:0}
.large-cover img{width:100%;max-width:410px;height:auto;object-fit:contain}
.plan-top{flex-wrap:wrap;row-gap:12px}
.plan-price{max-width:100%;white-space:normal;column-gap:8px;row-gap:4px}
.plan-price .old-price,.plan-price .new-price{white-space:nowrap}
.plan-cta-disabled{border:0;width:100%;opacity:.72;cursor:default}
.plan-cta-disabled:hover{transform:none}
.plan-cta-disabled.btn-dark:hover{background:#141715}
.plan-cta-disabled.btn-lime:hover{background:var(--lime)}
@media(max-width:1100px){
 .site-header{gap:clamp(16px,3vw,36px)}
 .nav{gap:clamp(12px,2vw,24px)}
}
@media(max-width:980px){
 .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;gap:8px 16px;padding:14px 0 8px}
 .site-header .brand{width:140px;max-width:100%;grid-column:1;grid-row:1}
 .site-header .top-cta{grid-column:2;grid-row:1;margin:0;font-size:12px;padding:12px 15px}
 .site-header .nav{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0;font-size:13px}
 .site-header .nav a,.site-header .nav a:first-child{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 2px}
 .plan-top{align-items:baseline}
 .plan-price{justify-content:flex-start}
 .ebook-page-grid{gap:30px}
}
@media(max-width:720px){
 .site-header{width:calc(100% - 36px)}
 .site-header .brand{width:128px}
 .site-header .nav{column-gap:clamp(10px,4vw,24px)}
 .inner-hero{padding:44px 0 54px}
 .inner-hero h1{font-size:clamp(38px,9vw,50px);line-height:1.04;overflow-wrap:break-word;margin:20px 0 24px}
 .inner-lead{font-size:18px!important;line-height:1.55!important}
 .plans-page-hero .inner-lead{max-width:100%}
 .plans-band{padding:46px 0 50px}
 .plans-headline h2{font-size:clamp(30px,7.7vw,42px)}
 .plan-top h3{font-size:28px}
 .plan-price{font-size:16px;line-height:1.5}
 .plan-price>span:last-child{flex-basis:100%;font-size:13px}
 .plan-card ul{font-size:14px;line-height:1.6;gap:10px}
 .plan-card .btn{min-height:46px}
 .ebook-page-grid{grid-template-columns:minmax(0,1fr);gap:34px}
 .ebook-page-grid .large-cover{width:100%;max-width:330px;justify-self:center}
 .availability{width:100%;max-width:100%}
 .availability span,.ebook-page-grid p{overflow-wrap:break-word}
 .footer>div{flex-wrap:wrap;column-gap:16px;row-gap:12px;min-width:0}
 .workflow-go{max-width:100%;white-space:normal;text-align:center}
}
@media(max-width:360px){
 .site-header .brand{width:112px}
 .site-header .top-cta{font-size:11px;padding:11px 12px}
 .site-header .nav{font-size:12px;column-gap:12px}
 .plan-card{padding:18px 15px 16px}
 .plan-top{flex-direction:column;gap:10px}
 .plans-footnotes{font-size:11px}
}

/* Homepage plan comparison: prices below titles, with equal card emphasis. */
#plans-preview .plan-top{flex-direction:column;align-items:flex-start;gap:12px}
#plans-preview .plan-price{justify-content:flex-start}

/* Mobile hero: show the active timeline card while preserving reduced-motion fallback. */
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
  .hero-visual .hero-photo-overlay{display:block!important;opacity:0;transform:translate3d(0,12px,0);width:140px;max-width:38.5%;padding:6px;}
  .hero-visual .hero-photo-overlay.is-visible{opacity:1;transform:none;}
  .hero-visual .v5-results{display:block!important;width:min(218px,70%);max-width:70%;}
}

/* Mobile only: halve the final hook results card, including its contents. */
@media(max-width:720px){
  .hero-visual .v5-results{scale:.5;transform-origin:top left;}
}

/* X workflow collection: reuse the existing automation card and map layout. */
.x-automations{margin-top:64px;padding-top:46px;border-top:1px solid #dde6d7}
.x-automations>h2{font:700 clamp(32px,4vw,52px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:12px 0 18px}
.x-automations .workflow-feature-header h3{font:700 clamp(22px,2.4vw,34px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:10px 0 12px}
@media(max-width:720px){.x-automations{margin-top:44px;padding-top:32px}}