/* ===========================================================================
   BUILD YOUR OWN ERP WITH AI — page stylesheet
   ---------------------------------------------------------------------------
   Loaded only on /build-your-own-erp/, so nothing here can reach another page.
   Every colour is a var() from the active theme's :root, which is why this one
   file is correct in both the blue and the green palette without a themed copy.

   All motion sits behind prefers-reduced-motion at the foot of the file.
   =========================================================================== */

.bye{--bye-ink:#06210f;--bye-ink2:#0d3620;--bye-line:var(--border);--bye-soft:#f5faf6}

/* ── shared section furniture ─────────────────────────────────────────── */
.bye-head{max-width:720px;margin:0 auto 46px;text-align:center}
.bye-head h2{font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.028em;font-weight:800;margin:10px 0 14px}
.bye-head p{color:var(--muted);font-size:16px;line-height:1.7}
.bye-head.light h2{color:#fff}
.bye-head.light p{color:rgba(255,255,255,.76)}
.eyebrow.light{color:var(--orange)}
.bye-note{max-width:760px;margin:38px auto 0;text-align:center;font-size:14px;line-height:1.75;
  color:var(--muted);background:var(--bye-soft);border:1px solid var(--bye-line);border-radius:14px;padding:16px 20px}
.bye-note b{color:var(--text)}
.btn.full{display:flex;width:100%;justify-content:center;margin-top:10px}

/* ── hero ─────────────────────────────────────────────────────────────── */
.bye-hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 520px at 78% -10%,rgba(140,198,63,.16),transparent 62%),
  linear-gradient(165deg,#052a16 0%,#06351d 46%,#04240f 100%);
  padding:128px 0 92px}
.bye-hero-bg{position:absolute;inset:0;pointer-events:none}
.bye-hero-bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.34}
.bye-hero-bg span:nth-child(1){width:440px;height:440px;left:-120px;top:-90px;background:var(--blue2)}
.bye-hero-bg span:nth-child(2){width:380px;height:380px;right:-80px;bottom:-140px;background:var(--orange)}
.bye-hero-in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}

.bye-badge{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  color:var(--orange);background:rgba(140,198,63,.12);border:1px solid rgba(140,198,63,.34);
  padding:7px 14px;border-radius:999px;margin-bottom:22px}
.bye-hero h1{font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:#fff;margin:0 0 20px}
.bye-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--orange),#d6f08a);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bye-lede{font-size:17px;line-height:1.66;color:rgba(255,255,255,.82);max-width:530px;margin:0 0 12px}
.bye-sub{font-size:15px;font-weight:600;color:var(--orange);margin:0 0 28px}
.bye-hero-act{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
/* The price chip used to anchor this row. Without it the line is pure text,
   so it stacks rather than sitting in a row. */
.bye-hero-meta{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.bye-price{font-size:30px;font-weight:800;letter-spacing:-1px;color:#fff}
.bye-trust{font-size:11.5px;font-weight:700;letter-spacing:.09em;color:rgba(255,255,255,.62);text-transform:uppercase}
.bye-trust.dim{font-weight:600;letter-spacing:.04em;text-transform:none;color:rgba(255,255,255,.44);font-size:12.5px}

/* ── hero panel: the four weeks ───────────────────────────────────────── */
.bye-weekcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:20px;
  padding:20px;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 26px 70px rgba(0,0,0,.3)}
.bye-weekcard-head{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.bye-weekcard-head b{color:#fff;font-size:13.5px}
.bye-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(140,198,63,.2)}
.bye-weekcard-tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.5);text-transform:uppercase}

.bye-wsteps{list-style:none;padding:0;margin:0}
.bye-wlabel{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:rgba(140,198,63,.8);
  padding:10px 0 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.bye-wlabel:first-child{border-top:0;margin-top:0;padding-top:4px}
/* A rail down the numbers ties the four weeks into one run rather than four
   unrelated boxes. Drawn on the item so the last one can stop it. */
.bye-wstep{position:relative;display:grid;grid-template-columns:34px 1fr;gap:13px;padding:11px 0}
.bye-wstep::before{content:"";position:absolute;left:16px;top:34px;bottom:-13px;width:1px;
  background:rgba(255,255,255,.14)}
.bye-wstep:last-child::before{display:none}
/* The rail should break at a week boundary rather than run through the label. */
.bye-wstep:has(+ .bye-wlabel)::before{display:none}
.bye-wstep-n{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.5);font-size:11.5px;font-weight:800;
  transition:background .4s ease,border-color .4s ease,color .4s ease}
.bye-wstep-body{min-width:0}
.bye-wstep-body>b{display:block;color:rgba(255,255,255,.62);font-size:14px;font-weight:700;margin-bottom:5px;
  transition:color .4s ease}
.bye-wstep-row{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:baseline;margin-top:3px;
  font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.44);transition:color .45s ease}
.bye-wstep-row i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.1em;
  color:rgba(255,255,255,.34);text-align:right}
.bye-wstep-row.ai i{color:rgba(140,198,63,.75)}

/* The active week: number lights up, and its two lines open. Only one is open
   at a time, which keeps the card a fixed-ish height instead of jumping. */
.bye-wstep.on .bye-wstep-n{background:var(--orange);border-color:var(--orange);color:var(--bye-ink);
  box-shadow:0 0 0 4px rgba(140,198,63,.16)}
.bye-wstep.on .bye-wstep-body>b{color:#fff}
.bye-wstep.on .bye-wstep-row{color:rgba(255,255,255,.8)}
/* Weeks already walked past stay marked, so the card reads as progress. */
.bye-wstep.done .bye-wstep-n{background:rgba(140,198,63,.22);border-color:rgba(140,198,63,.45);color:var(--orange)}
.bye-wstep.done .bye-wstep-body>b{color:rgba(255,255,255,.88)}
.bye-wstep.done .bye-wstep-row{color:rgba(255,255,255,.6)}
/* The rail fills in behind the weeks already walked. */
.bye-wstep.done::before{background:rgba(140,198,63,.4)}

.bye-weekcard-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:14px;margin-top:6px;border-top:1px solid rgba(255,255,255,.12)}
.bye-weekcard-foot small{color:rgba(255,255,255,.45);font-size:11px;line-height:1.5;flex:1;min-width:150px}
.bye-live{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.42);font-size:11.5px;font-weight:700;
  transition:background .5s ease,border-color .5s ease,color .5s ease}
.bye-live i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .5s ease}
.bye-live.on{background:rgba(140,198,63,.16);border-color:rgba(140,198,63,.45);color:#eaf7d4}
.bye-live.on i{background:var(--orange);box-shadow:0 0 0 3px rgba(140,198,63,.25)}

/* ── the big question ─────────────────────────────────────────────────── */
.bye-q{background:var(--bye-ink);padding:92px 0;text-align:center}
.bye-q-ask{font-size:clamp(25px,4vw,46px);line-height:1.12;letter-spacing:-.033em;font-weight:800;color:#fff;margin:0 0 20px}
.bye-q-sub{max-width:620px;margin:0 auto 46px;color:rgba(255,255,255,.66);font-size:16px;line-height:1.72}
.bye-q-big{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.027em;margin:0 0 34px;
  background:linear-gradient(100deg,var(--orange),#d6f08a);-webkit-background-clip:text;background-clip:text;color:transparent}
.bye-q-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;padding:0;margin:0 0 38px}
.bye-q-steps li{display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 14px}
.bye-q-steps span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);color:var(--bye-ink);font-size:13px;font-weight:800}
.bye-q-steps b{color:#fff;font-size:13.5px;line-height:1.45;text-align:center}
/* The theme's global .btn-outline carries background:#ffffff — its white-on-
   dark variant is scoped to .cr-card, which does not apply here. Setting only
   the text colour to white therefore produced white-on-white: a pill with an
   invisible label. The background has to be cleared explicitly. */
.btn-outline.light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline.light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ── who is it for ────────────────────────────────────────────────────── */
.bye-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bye-who-card{background:#fff;border:1px solid var(--bye-line);border-radius:16px;padding:24px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.bye-who-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(3,82,36,.1);border-color:var(--blue2)}
.bye-who-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;font-size:16px;
  background:var(--grad-brand);color:#fff;margin-bottom:14px}
.bye-who-card h3{font-size:16.5px;font-weight:800;letter-spacing:-.4px;margin:0 0 8px}
.bye-who-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.68}

/* ── imagine this ─────────────────────────────────────────────────────── */
.bye-imagine{background:linear-gradient(165deg,#062d18,#04220f);padding:92px 0}
/* Two panes and an arrow: requirement in, structure out. It was a pair of
   stacked chat bubbles, which sprawled across the full width, left the section
   mostly empty and buried the one idea that matters — that the second panel is
   the first one transformed. Side by side, the arrow does that work. */
.bye-convo{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;
  gap:22px;align-items:stretch}
.bye-pane{display:flex;flex-direction:column;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px}
/* Push the closing note to the foot of each pane so the two columns end level
   however long the lists are. */
.bye-pane-note{margin-top:auto}
.bye-pane.out{background:rgba(140,198,63,.09);border-color:rgba(140,198,63,.28)}
.bye-pane-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.bye-pane-tag{font-size:10px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.1);border-radius:999px;padding:5px 11px}
.bye-pane-tag.ai{color:var(--bye-ink);background:var(--orange)}
.bye-pane-head small{font-size:11.5px;color:rgba(255,255,255,.44)}
.bye-pane-lede{margin:0 0 14px;color:#fff;font-size:15px;font-weight:650;line-height:1.5}
.bye-pane-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.bye-pane-list li{position:relative;padding-left:18px;color:rgba(255,255,255,.76);font-size:13.5px;line-height:1.55}
.bye-pane-list li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.34)}

/* The arrow points right between the panes, and down once they stack. */
.bye-pane-arrow{display:grid;place-items:center;color:var(--orange)}
.bye-pane-arrow svg{width:30px;height:30px}

/* A tidy two-column grid, so a trailing module cannot sit alone on a row the
   way it did when these were free-wrapping chips. */
.bye-convo-mods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.bye-convo-mods span{display:block;background:rgba(140,198,63,.13);border:1px solid rgba(140,198,63,.3);
  border-radius:10px;padding:9px 11px;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;
  transition-delay:calc(var(--i) * 70ms)}
.bye-convo.on .bye-convo-mods span{opacity:1;transform:none}
.bye-convo-mods b{display:block;color:#eaf7d4;font-size:12.5px;font-weight:700;line-height:1.3}
.bye-convo-mods small{display:block;color:rgba(255,255,255,.5);font-size:10.5px;margin-top:2px;line-height:1.4}
.bye-pane-note{padding-top:14px;margin-bottom:0;border-top:1px solid rgba(140,198,63,.22);
  color:rgba(255,255,255,.58);font-size:12px;line-height:1.6}
.bye-pane-note.plain{border-top-color:rgba(255,255,255,.1)}
.bye-pane-list{margin-bottom:16px}
.bye-convo-foot{max-width:700px;margin:30px auto 0;text-align:center;color:rgba(255,255,255,.6);font-size:14px;line-height:1.7}

/* ── curriculum steps ─────────────────────────────────────────────────── */
.bye-steps{display:grid;gap:16px;max-width:900px;margin:0 auto}
.bye-step{display:grid;grid-template-columns:120px 1fr;gap:24px;background:#fff;border:1px solid var(--bye-line);
  border-radius:18px;padding:26px 28px;transition:border-color .3s ease,box-shadow .3s ease}
.bye-step:hover{border-color:var(--blue2);box-shadow:0 16px 40px rgba(3,82,36,.08)}
.bye-step-n{border-right:1px solid var(--bye-line);padding-right:20px}
.bye-step-n span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
.bye-step-n b{display:block;font-size:38px;line-height:1;font-weight:800;letter-spacing:-2px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.bye-step-body h3{font-size:19px;font-weight:800;letter-spacing:-.5px;margin:0 0 6px}
.bye-step-body>p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.66}
.bye-step-body ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.bye-step-body li{background:var(--bye-soft);border:1px solid var(--bye-line);border-radius:8px;
  padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--text)}

/* ── idea to ERP ──────────────────────────────────────────────────────── */
.bye-pipe{background:var(--bye-ink2);padding:92px 0;overflow:hidden}
.bye-pipe-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);gap:0;list-style:none;
  padding:0 0 12px;margin:0;overflow-x:auto;scrollbar-width:thin}
.bye-pipe-step{position:relative;padding:0 18px;text-align:center;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * 110ms)}
.bye-pipe-rail.on .bye-pipe-step{opacity:1;transform:none}
.bye-pipe-step::after{content:"";position:absolute;top:20px;right:-10px;width:20px;height:2px;
  background:linear-gradient(90deg,rgba(140,198,63,.6),rgba(140,198,63,.12))}
.bye-pipe-step:last-child::after{display:none}
.bye-pipe-num{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 12px;border-radius:12px;
  background:rgba(140,198,63,.14);border:1px solid rgba(140,198,63,.36);color:var(--orange);
  font-size:13px;font-weight:800}
.bye-pipe-step b{display:block;color:#fff;font-size:13.5px;font-weight:700;line-height:1.36;margin-bottom:6px}
.bye-pipe-step small{display:block;color:rgba(255,255,255,.52);font-size:11.5px;line-height:1.55}
.bye-pipe-step:last-child .bye-pipe-num{background:var(--orange);border-color:var(--orange);color:var(--bye-ink)}

/* ── module grid ──────────────────────────────────────────────────────── */
.bye-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bye-tile{position:relative;text-align:left;background:#fff;border:1px solid var(--bye-line);border-radius:14px;
  padding:18px;font:inherit;cursor:pointer;overflow:hidden;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
.bye-tile b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--text)}
.bye-tile small{display:block;margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--muted);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .32s ease,opacity .28s ease,margin-top .32s ease}
.bye-tile:hover,.bye-tile:focus-visible,.bye-tile[aria-expanded="true"]{
  border-color:var(--blue2);box-shadow:0 14px 34px rgba(3,82,36,.1);transform:translateY(-3px)}
.bye-tile:hover small,.bye-tile:focus-visible small,.bye-tile[aria-expanded="true"] small{max-height:120px;opacity:1}

/* ── industry flows ───────────────────────────────────────────────────── */
.bye-ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bye-ind-card{background:#fff;border:1px solid var(--bye-line);border-radius:18px;padding:26px}
.bye-ind-card h3{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue2);margin:0 0 18px}
.bye-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;padding:0;margin:0;counter-reset:f}
.bye-flow li{position:relative;background:var(--bye-soft);border:1px solid var(--bye-line);border-radius:9px;
  padding:9px 13px;font-size:13px;font-weight:650;color:var(--text)}
.bye-flow li:not(:last-child)::after{content:"\2192";margin-left:11px;color:var(--blue2);font-weight:700}

/* ── four weeks ───────────────────────────────────────────────────────── */
.bye-weeks-rail{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  max-width:920px;margin:0 auto}
.bye-weeks-line{position:absolute;left:0;right:0;top:36px;height:2px;background:var(--bye-line)}
.bye-weeks-line i{display:block;height:100%;width:0;background:var(--grad-brand);transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.bye-weeks-rail.on .bye-weeks-line i{width:100%}
.bye-week{position:relative;background:#fff;border:1px solid var(--bye-line);border-radius:16px;padding:24px 22px}
.bye-week-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;color:#fff;
  background:var(--grad-brand);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.bye-week h3{font-size:16.5px;font-weight:800;letter-spacing:-.4px;margin:0 0 8px}
.bye-week p{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.68}
.bye-week-list{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid var(--bye-line);
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.bye-week-list li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--text)}
.bye-week-list li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--blue2)}

/* ── price ────────────────────────────────────────────────────────────── */
.bye-price-sec{background:linear-gradient(165deg,#04240f,#063019);padding:96px 0}
.bye-price-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.bye-price-copy h2{font-size:clamp(24px,3.2vw,38px);line-height:1.13;letter-spacing:-.032em;font-weight:800;
  color:#fff;margin:10px 0 14px}
.bye-price-copy>p{color:rgba(255,255,255,.74);font-size:16px;line-height:1.7;margin:0 0 30px}
.bye-inc-title{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin:0 0 16px}
.bye-inc{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;list-style:none;padding:0;margin:0}
.bye-inc li{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.84);font-size:13.5px;line-height:1.55}
.bye-inc span{color:var(--orange);font-weight:800;flex:none}
.bye-card{background:#fff;border-radius:22px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.34)}
.bye-card-top{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--bye-line);margin-bottom:20px}
.bye-card-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--blue2);
  background:var(--bye-soft);border:1px solid var(--bye-line);border-radius:999px;padding:6px 14px;margin-bottom:16px}
.bye-card-fee{font-size:44px;line-height:1;font-weight:800;letter-spacing:-1.8px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.bye-card-sub{margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--muted)}
.bye-card-list{list-style:none;padding:0;margin:0 0 22px}
.bye-card-list li{position:relative;padding:8px 0 8px 24px;font-size:13.5px;color:var(--text);line-height:1.5}
.bye-card-list li::before{content:"\2713";position:absolute;left:0;top:8px;color:var(--blue2);font-weight:800}
.bye-card-foot{margin:16px 0 0;font-size:11.5px;line-height:1.62;color:var(--muted);text-align:center}

/* ── why genzerp ──────────────────────────────────────────────────────── */
.bye-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bye-why-card{background:#fff;border:1px solid var(--bye-line);border-radius:16px;padding:24px}
.bye-why-n{display:block;font-size:26px;font-weight:800;letter-spacing:-1.2px;color:var(--bye-line);margin-bottom:10px}
.bye-why-card h3{font-size:15.5px;font-weight:800;letter-spacing:-.3px;margin:0 0 8px}
.bye-why-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.68}

/* ── final cta ────────────────────────────────────────────────────────── */
.bye-final{background:
  radial-gradient(900px 420px at 50% 0%,rgba(140,198,63,.16),transparent 64%),
  linear-gradient(165deg,#052a16,#03200d);padding:96px 0;text-align:center}
.bye-final h2{font-size:clamp(25px,3.8vw,44px);line-height:1.12;letter-spacing:-.034em;font-weight:800;color:#fff;margin:0 0 18px}
.bye-final>.container>p{max-width:620px;margin:0 auto 34px;color:rgba(255,255,255,.72);font-size:16px;line-height:1.72}
.bye-final-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bye-final-note{margin:26px 0 0;font-size:13.5px;color:rgba(255,255,255,.55);display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bye-final-note a{color:var(--orange);font-weight:600}

/* ── sticky mobile CTA ────────────────────────────────────────────────── */
/* Hidden above 860px and never rendered at all until the hero has scrolled
   past, so it cannot sit on top of the hero's own buttons. The body gets
   padding to match, so it can never cover the footer either. */
.bye-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));background:rgba(4,36,15,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(140,198,63,.3);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.bye-sticky.on{transform:none}
.bye-sticky[hidden]{display:none}
.bye-sticky div{flex:1;min-width:0}
.bye-sticky b{display:block;color:#fff;font-size:13px;font-weight:700;line-height:1.3}
.bye-sticky span{display:block;color:var(--orange);font-size:14px;font-weight:800;margin-top:1px}
.bye-sticky .btn{flex:none;padding:10px 16px;font-size:13px}

/* ── lead form modal ──────────────────────────────────────────────────── */
/* z-index has to clear .site-header, which is sticky at 1000 — at 120 the
   header painted straight over the dialog and ate its title. */
.bye-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:16px}
/* A class selector beats the UA's [hidden]{display:none}, so the display:grid
   above would keep the backdrop laid over the whole page — invisible, but
   still swallowing every click on the page beneath it. Restore it explicitly.
   Same for the sticky bar, which sets display:flex at mobile widths. */
.bye-modal[hidden]{display:none}
.bye-modal-bg{position:absolute;inset:0;background:rgba(4,24,12,.62);backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .3s ease}
.bye-modal.on .bye-modal-bg{opacity:1}
/* A column, not a single scrolling block: the heading stays put, only the
   fields scroll, and the submit button is pinned where a thumb expects it.
   Before this the dialog simply grew past the viewport and cut its own button
   off the bottom of the screen. */
.bye-modal-box{position:relative;display:flex;flex-direction:column;width:min(620px,100%);
  max-height:min(92vh,780px);background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 110px rgba(0,0,0,.4);
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .32s ease,transform .32s ease}
.bye-modal.on .bye-modal-box{opacity:1;transform:none}
.bye-modal-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--bye-soft);color:var(--muted);font-size:22px;line-height:1;cursor:pointer;transition:background .2s ease}
.bye-modal-x:hover{background:var(--border);color:var(--text)}
.bye-form-wrap{display:flex;flex-direction:column;min-height:0;flex:1}
/* display:flex above is a class selector, so it outranks the UA's
   [hidden]{display:none} and the form stayed on screen underneath the success
   panel. Any element given a display here needs the hidden case spelled out. */
.bye-form-wrap[hidden]{display:none}
#byeForm[hidden]{display:none}
.bye-form-head{flex:none;padding:26px 26px 14px;border-bottom:1px solid var(--bye-line)}
.bye-form-wrap h2{font-size:21px;font-weight:800;letter-spacing:-.7px;margin:0 0 6px}
.bye-form-lede{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
#byeForm{display:flex;flex-direction:column;min-height:0;flex:1}
.bye-form-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 26px;-webkit-overflow-scrolling:touch}
.bye-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.bye-form-grid .field.full{grid-column:1/-1}
.bye-form-act{flex:none;padding:14px 26px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--bye-line);background:#fff}
.bye-form-act .btn{margin-top:0}
.bye-form-foot{margin:10px 0 0;font-size:11px;line-height:1.55;color:var(--muted);text-align:center}

/* Language: three chips read faster than a dropdown, and show at a glance
   that the choice exists. Radios underneath, so it works without JS. */
.bye-lang{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bye-lang label{position:relative;min-width:0}
.bye-lang input{position:absolute;opacity:0;width:0;height:0}
/* --bye-line is nearly white, which left an unchosen chip looking like plain
   text rather than something you can tap. A tinted fill plus a firmer border
   makes all three read as options before one of them is picked. */
.bye-lang span{display:block;text-align:center;padding:10px 12px;border:1px solid #b9d4bf;
  background:var(--bye-soft);border-radius:10px;font-size:13px;font-weight:650;color:var(--text);
  cursor:pointer;white-space:nowrap;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.bye-lang span:hover{border-color:var(--blue2)}
.bye-lang input:checked + span{background:var(--grad-brand);border-color:transparent;color:#fff}
.bye-lang input:focus-visible + span{outline:2px solid var(--blue2);outline-offset:2px}
.bye-done{padding:28px 26px}
.bye-done{text-align:center}
.bye-done-ico{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  background:var(--grad-brand);color:#fff;font-size:26px}
.bye-done h2{font-size:22px;font-weight:800;letter-spacing:-.7px;margin:0 0 10px}
.bye-done p{margin:0 0 22px;color:var(--muted);font-size:14.5px;line-height:1.7}
body.bye-locked{overflow:hidden}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:1024px){
  .bye-hero{padding:104px 0 76px}
  .bye-hero-in{grid-template-columns:1fr;gap:40px}
  .bye-lede{max-width:none}
  .bye-price-grid{grid-template-columns:1fr;gap:34px}
  .bye-who-grid,.bye-why-grid{grid-template-columns:repeat(2,1fr)}
  .bye-grid{grid-template-columns:repeat(3,1fr)}
  .bye-weeks-line{display:none}
}
@media (max-width:860px){
  .bye-sticky{display:flex}
  /* Room for the bar, so it never sits on the footer's last line. */
  body:has(.bye-sticky.on){padding-bottom:74px}
  .bye-q-steps{grid-template-columns:repeat(2,1fr)}
  .bye-ind-grid{grid-template-columns:1fr}
  .bye-inc{grid-template-columns:1fr}
  .bye-convo{grid-template-columns:1fr;gap:14px}
  .bye-pane-arrow{transform:rotate(90deg)}
}
@media (max-width:640px){
  .bye-hero{padding:92px 0 64px}
  .bye-hero-act .btn,.bye-final-act .btn{width:100%;justify-content:center}
  .bye-hero-meta{gap:10px}
  .bye-q,.bye-imagine,.bye-pipe,.bye-price-sec,.bye-final{padding:64px 0}
  .bye-who-grid,.bye-why-grid,.bye-grid,.bye-weeks-rail{grid-template-columns:1fr}
  .bye-step{grid-template-columns:1fr;gap:16px}
  .bye-step-n{display:flex;align-items:baseline;gap:10px;border-right:0;border-bottom:1px solid var(--bye-line);
    padding:0 0 12px}
  .bye-step-n b{font-size:28px}
  .bye-weekcard{padding:16px}
  .bye-form-grid{grid-template-columns:1fr}
  .bye-card{padding:24px}
  .bye-card-fee{font-size:42px}
  /* The rail scrolls sideways on its own; the page must not. */
  .bye-pipe-rail{grid-auto-columns:minmax(150px,68vw)}
  .bye-flow li:not(:last-child)::after{margin-left:8px}
}

/* ── motion off ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .bye-convo-mods span,.bye-pipe-step,.bye-wstep-n,.bye-wstep-row,.bye-live,
  .bye-weeks-line i,.bye-tile,.bye-who-card,.bye-step,.bye-sticky,
  .bye-modal-bg,.bye-modal-box{transition:none!important;animation:none!important}
  .bye-convo-mods span,.bye-pipe-step{opacity:1!important;transform:none!important}
  .bye-wstep-n{box-shadow:none!important}
  .bye-weeks-line i{width:100%!important}
}

/* ── the four kinds of software ───────────────────────────────────────── */
/* Sits above the module grid: the modules are the same either way, but the
   thing you end up with is not, and that distinction was missing. */
.bye-kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.bye-kind{background:var(--grad-brand);border-radius:16px;padding:22px;color:#fff}
.bye-kind h3{font-size:15px;font-weight:800;letter-spacing:.02em;margin:0 0 8px;text-transform:uppercase}
.bye-kind p{margin:0;font-size:13px;line-height:1.62;color:rgba(255,255,255,.88)}
.bye-kinds-note{text-align:center;color:var(--muted);font-size:14px;margin:0 0 26px}
@media (max-width:1024px){ .bye-kinds{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .bye-kinds{grid-template-columns:1fr} }

/* ── modal on small screens ───────────────────────────────────────────── */
@media (max-width:640px){
  .bye-modal{padding:0;place-items:end stretch}
  /* Rises from the bottom like a sheet, which is where a thumb already is. */
  .bye-modal-box{width:100%;max-height:94vh;border-radius:18px 18px 0 0}
  .bye-form-head{padding:20px 18px 12px}
  .bye-form-scroll{padding:16px 18px}
  .bye-form-act{padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
  .bye-form-grid{grid-template-columns:1fr;gap:12px}
  .bye-done{padding:24px 18px}
  .bye-modal-x{right:10px;top:10px}
}

/* ── language note in the programme column ────────────────────────────── */
.bye-lang-note{margin:0 0 26px;padding:14px 16px;border-radius:12px;
  background:rgba(140,198,63,.1);border:1px solid rgba(140,198,63,.28);
  color:rgba(255,255,255,.8);font-size:13.5px;line-height:1.6}
.bye-lang-note b{color:var(--orange)}

/* The Gujarati label is the longest; below ~380px three across gets cramped. */
@media (max-width:400px){
  .bye-lang{grid-template-columns:1fr}
  .bye-lang span{white-space:normal}
}

/* ── seam between two dark sections ───────────────────────────────────── */
/* "What You Get" now sits directly above "The Method", and both are dark
   green — with nothing between them the page reads as one continuous slab and
   loses its structure at that point. An adjacent-sibling rule so it applies
   only where the two actually meet, and their stacked vertical padding is
   trimmed so the join is not an empty screen. */
.bye-price-sec + .bye-imagine{border-top:1px solid rgba(140,198,63,.2);padding-top:74px}
.bye-price-sec:has(+ .bye-imagine){padding-bottom:74px}
@media (max-width:640px){
  .bye-price-sec + .bye-imagine{padding-top:52px}
  .bye-price-sec:has(+ .bye-imagine){padding-bottom:52px}
}

/* ── "no coding" badge ────────────────────────────────────────────────── */
/* The single biggest objection for the audience this page is aimed at, so it
   gets its own chip in the first screen rather than a line of body copy. */
.bye-nocode{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(140,198,63,.14);border:1px solid rgba(140,198,63,.4);border-radius:999px;
  padding:7px 14px;color:#eaf7d4;font-size:13px;font-weight:700}
.bye-nocode i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--orange);color:var(--bye-ink);font-size:10px;font-style:normal;font-weight:800}

/* ── WhatsApp float vs the sticky bar ─────────────────────────────────── */
/* Both are fixed to the bottom-right, so once the sticky bar appears the
   WhatsApp bubble lands on top of its button and clips the label to
   "Get De…". Lift the bubble clear while the bar is showing, and keep the
   bar's own text out from under it. Scoped to this page: .bye-sticky exists
   nowhere else, so no other page is affected. */
body:has(.bye-sticky.on) .wa-float{bottom:calc(84px + env(safe-area-inset-bottom));
  transition:bottom .35s cubic-bezier(.4,0,.2,1)}
.bye-sticky{padding-right:16px}
@media (max-width:640px){
  /* Leave a lane on the right so the button never runs under the bubble. */
  .bye-sticky{padding-right:14px}
  .bye-sticky .btn{padding:10px 14px}
}

/* Two trust chips in the hero; they wrap rather than shrink on narrow screens. */
.bye-chips{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){ .bye-chips .bye-nocode{font-size:12px;padding:6px 12px} }

/* Two columns of week detail stop fitting once the card drops below ~430px:
   nearly every item wraps to a second line and the list looks ragged. */
@media (max-width:480px){
  .bye-week-list{grid-template-columns:1fr;gap:9px}
}

/* ── hero headline on very small screens ──────────────────────────────── */
/* The <br> pins "With AI." to its own line, so line one has to hold
   "Build Your Own ERP" whole. Measured: it needs 307px, and a 320px screen
   only offers 294px — hence the orphaned "ERP" on a third line. Trimming the
   floor of the clamp is enough; every width above this was already fine. */
@media (max-width:375px){
  .bye-hero h1{font-size:29px}
}