/* Shared shell for the local onboarding flow.
   Text pages are unified into one left-aligned, fixed-width column.
   Interactive builders (offer / equity) keep their own centered design. */

:root{ color-scheme: dark; --flow-w: 760px;
  /* uniform top + bottom margins on EVERY page (text pages and builders alike).
     generous bottom so the last button never sits at the edge and you can always
     scroll well past it (accounts for mobile browser bars). */
  --flow-top: 150px;
  /* exactly this much space below the last button/text on EVERY page */
  --flow-bottom: 80px; }

/* ---- Smooth page-to-page transition ----
   Native cross-document crossfade (old page dissolves into the new one) where the
   browser supports it — no JS, no freeze. Gentle fade-in fallback elsewhere. */
@view-transition{ navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.5s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
@supports not (view-transition-name: none){
  @keyframes flowIn{ from{ opacity:0 } to{ opacity:1 } }
  body{ animation: flowIn .5s ease both; }
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:#000; color:#fff; }
body{
  font-family:'Lausanne','Helvetica Neue',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
  /* no min-height:100vh — the page is exactly its content height so the gap
     below the last element is always exactly --flow-bottom (60px), not more. */
}

/* The consistent content column — same width + same left edge on every page.
   Top margin 150px; matching 150px bottom when the column is the last block
   (pages whose Continue lives in .flow-nav get their bottom margin from the nav). */
.flow-col{ max-width:var(--flow-w); width:100%; margin:0 auto; padding:var(--flow-top) 32px 0; }
.flow-col:last-child{ padding-bottom:var(--flow-bottom); }

/* ---- TEXT PAGES: force one left-start alignment + one width ---- */
body.flow-left .flow-page > div{
  max-width:100% !important; width:auto !important;
  margin:0 !important; padding:0 !important; min-height:0 !important;
  display:block !important; text-align:left !important;
  align-items:stretch !important; justify-content:flex-start !important;
}
body.flow-left .flow-page > div *{ text-align:left !important; }
/* un-center inner wrappers that center via margin:auto */
body.flow-left .flow-page > div > div,
body.flow-left .flow-page > div > section,
body.flow-left .flow-page > div > main,
body.flow-left .flow-page > div > header,
body.flow-left .flow-page > div > footer,
body.flow-left .flow-page > div > p,
body.flow-left .flow-page > div > h1,
body.flow-left .flow-page > div > h2,
body.flow-left .flow-page > div > ul,
body.flow-left .flow-page > div > ol{
  margin-left:0 !important; margin-right:auto !important; max-width:100% !important;
}

/* Every forward button on the text pages is the SAME .flow-continue pill,
   centered with the same spacing above it. */
body.flow-left .flow-page .flow-continue{
  display:block !important;
  width:-moz-fit-content !important; width:fit-content !important;
  margin:40px auto 0 !important;
  text-align:center !important;
}

/* ---- BUILDER PAGES: same top + bottom margins as every other page.
   Kill the vertical-centering slack so the gap below the last button is exactly
   --flow-bottom (not centering leftover). Content sits top-aligned like text pages. */
body.flow-builder .flow-page{ padding-top:var(--flow-top); padding-bottom:var(--flow-bottom); }
body.flow-builder .sk, body.flow-builder .eq-root{ min-height:0 !important; justify-content:flex-start !important; }

/* ---- Bottom-center Continue ---- */
.flow-nav{ max-width:var(--flow-w); margin:0 auto; padding:56px 32px var(--flow-bottom); text-align:center; }
/* One identical button on every page — !important so each page's own font/size
   rules can't alter it. */
.flow-continue{
  display:inline-block;
  padding:13px 44px !important; border-radius:999px !important;
  border:1px solid rgba(255,255,255,.32) !important; background:transparent !important; color:#fff !important;
  font-family:Georgia,'Times New Roman',serif !important; font-style:italic !important; font-weight:400 !important;
  font-size:15px !important; letter-spacing:normal !important; text-transform:none !important; line-height:normal !important;
  text-decoration:none !important; cursor:pointer; transition:border-color .35s ease, background .35s ease;
}
.flow-continue:hover{ border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.04); }
/* High-specificity override so per-page font rules (e.g. step1's `.ob a`) can't
   change the unified button font/size. */
body.flow-left .flow-page .flow-continue,
body.flow-builder .flow-page .flow-continue,
body .flow-nav .flow-continue{
  font-family:Georgia,'Times New Roman',serif !important; font-style:italic !important;
  font-weight:400 !important; font-size:15px !important; letter-spacing:normal !important;
  text-transform:none !important; color:#fff !important;
}
.flow-end{
  display:inline-block; font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:13px; color:rgba(255,255,255,.5); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:2px; transition:color .2s;
}
.flow-end:hover{ color:#fff; }

/* remove the stray light/dark theme toggle ("LIGHT") from the published flow */
.lp-tog, .lp-cb{ display:none !important; }

/* tiny progress dots, top-right */
.flow-dots{ position:fixed; top:18px; right:22px; display:flex; gap:7px; z-index:50; }
.flow-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.22); }
.flow-dots i.on{ background:rgba(255,255,255,.85); }

@media(max-width:600px){ :root{ --flow-top:134px; } .flow-col{ padding-left:20px; padding-right:20px; } .flow-nav{ padding-left:20px; padding-right:20px; } }