#byleron-landing{--bl-bg:var(--c-bg,#fff);--bl-ink:var(--c-text,#18181a);--bl-muted:var(--c-text-2,#4b5563);--bl-soft:color-mix(in srgb,var(--c-primary,#3bcdaa) 10%,var(--bl-bg));--bl-line:var(--c-border,#e4e6ea);--bl-green:var(--c-link,#257a66);--bl-mint:var(--c-primary,#3bcdaa);--bl-button:var(--c-on-primary,#18181a);color:var(--bl-ink);background:var(--bl-bg);font-family:var(--font-body,Inter,system-ui,sans-serif);font-size:16px;line-height:1.55;overflow-wrap:anywhere}
#byleron-landing *{box-sizing:border-box}#byleron-landing h1,#byleron-landing h2,#byleron-landing h3,#byleron-landing p{margin:0}#byleron-landing h1{font-size:clamp(34px,5vw,58px);line-height:1.07;font-weight:600;letter-spacing:-2px;max-width:760px}#byleron-landing h2{font-size:clamp(26px,3.3vw,38px);line-height:1.16;font-weight:600;letter-spacing:-1px}#byleron-landing h3{font-size:21px;line-height:1.3;font-weight:600}#byleron-landing p{color:var(--bl-muted)}#byleron-landing .bl-wrap{max-width:1150px;margin:auto;padding:0 38px}#byleron-landing .bl-nav{display:flex;gap:28px;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--bl-line)}#byleron-landing .bl-brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.5px;font-weight:600;white-space:nowrap}#byleron-landing .bl-brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:var(--bl-mint);color:var(--bl-button);font-weight:600}#byleron-landing .bl-nav-links{display:flex;align-items:center;gap:23px;flex-wrap:wrap}#byleron-landing a{color:inherit;text-decoration:none}#byleron-landing .bl-nav-links a{font-size:14px}#byleron-landing .bl-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--bl-line);border-radius:7px;padding:11px 20px;background:var(--bl-bg);color:var(--bl-ink);font:inherit;font-weight:500;text-decoration:none}#byleron-landing .bl-action-primary{background:var(--bl-mint);color:var(--bl-button);border-color:var(--bl-mint)}#byleron-landing .bl-eyebrow{display:block;color:var(--bl-green);font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:18px}#byleron-landing .bl-hero{padding-top:65px;padding-bottom:42px;text-align:center;background:linear-gradient(180deg,var(--bl-bg),var(--bl-soft))}#byleron-landing .bl-hero h1{margin:auto}#byleron-landing .bl-hero p{max-width:680px;margin:24px auto;font-size:18px}#byleron-landing .bl-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:25px 0 14px}#byleron-landing .bl-note{font-size:13px;color:var(--bl-muted)}#byleron-landing figure{margin:0}#byleron-landing .bl-shot{overflow:hidden;border:1px solid var(--bl-line);border-radius:12px;background:#fff;box-shadow:0 15px 40px #10352a12}#byleron-landing .bl-shot img{display:block;width:100%;height:auto;margin-top:-10.5%;margin-bottom:-5.7%}#byleron-landing .bl-hero-shot{margin:37px auto 0;max-width:1020px}#byleron-landing figcaption{margin:13px 0 0;font-size:13px;color:var(--bl-muted)}#byleron-landing .bl-format{padding:23px 0;border-bottom:1px solid var(--bl-line);display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--bl-muted)}#byleron-landing .bl-section{padding-top:66px;padding-bottom:66px}#byleron-landing .bl-intro{max-width:650px;margin-bottom:35px}#byleron-landing .bl-intro p{margin-top:17px}#byleron-landing .bl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}#byleron-landing .bl-step-num{color:var(--bl-green);font-size:13px;margin-bottom:13px;display:block}#byleron-landing .bl-steps h3{font-size:18px;margin-bottom:10px}#byleron-landing .bl-steps p{font-size:14px}#byleron-landing .bl-soft{background:var(--bl-soft)}#byleron-landing .bl-split{display:grid;grid-template-columns:1fr 1.3fr;gap:45px;align-items:center}#byleron-landing .bl-split p{margin:19px 0}#byleron-landing .bl-link{font-weight:500;color:var(--bl-green);display:inline-block;margin-top:13px}#byleron-landing .bl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}#byleron-landing .bl-tab{font:inherit;font-size:14px;border:1px solid var(--bl-line);border-radius:6px;background:var(--bl-bg);color:var(--bl-ink);padding:8px 13px}#byleron-landing .bl-tab[aria-selected=true]{background:var(--bl-green);color:var(--bl-bg);border-color:var(--bl-green)}#byleron-landing [hidden]{display:none!important}#byleron-landing .bl-support{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-top:20px;border-top:1px solid var(--bl-line)}#byleron-landing .bl-support h3{margin-bottom:13px}#byleron-landing .bl-support p{font-size:15px}#byleron-landing .bl-final{text-align:center;padding:55px 26px;background:var(--bl-button);color:#fff}#byleron-landing .bl-final p{color:#c4ddd4;margin:18px auto;max-width:580px}#byleron-landing .bl-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;font-size:13px;color:var(--bl-muted)}
@media(max-width:650px){#byleron-landing .bl-wrap{padding-left:20px;padding-right:20px}#byleron-landing .bl-nav{align-items:flex-start;gap:16px;flex-direction:column}#byleron-landing .bl-nav-links{gap:17px}#byleron-landing .bl-hero{padding-top:42px}#byleron-landing h1{letter-spacing:-1px}#byleron-landing .bl-steps{grid-template-columns:1fr 1fr}#byleron-landing .bl-split,#byleron-landing .bl-support{grid-template-columns:1fr;gap:28px}#byleron-landing .bl-section{padding-top:43px;padding-bottom:43px}}
@media(max-width:370px){#byleron-landing .bl-steps{grid-template-columns:1fr}#byleron-landing .bl-action{padding:10px 15px}}
#byleron-landing .bl-three{grid-template-columns:repeat(3,1fr)}#byleron-landing #bl-guidance .bl-support{grid-template-columns:1fr}#byleron-landing #bl-pricing .bl-action{margin-top:15px}@media(max-width:650px){#byleron-landing .bl-three{grid-template-columns:1fr}}

html.dark-mode #byleron-landing{color-scheme:dark} html:not(.dark-mode) #byleron-landing{color-scheme:light}
#byleron-landing .bl-split > *{min-width:0}#byleron-landing img{max-width:100%}#byleron-landing .bl-tab{cursor:pointer}

/* Screenshots are cropped from full-resolution originals, without CSS clipping. */
#byleron-landing .bl-shot img{margin:0;width:100%;height:auto;max-width:100%}

/* Homepage reference: all material previews visible side by side. */
#byleron-landing .bl-material-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:28px 0}#byleron-landing .bl-material-card{min-width:0;border:1px solid var(--bl-line);border-radius:12px;padding:12px;background:var(--bl-bg)}#byleron-landing .bl-material-card h3{font-size:16px;margin:16px 0 8px}#byleron-landing .bl-material-card p{font-size:13px;margin:0}#byleron-landing .bl-shot{cursor:zoom-in}#byleron-landing .bl-shot:focus-visible{outline:3px solid var(--bl-mint);outline-offset:3px}
.bl-image-dialog{border:0;padding:48px 16px 16px;background:var(--c-surface,#fff);border-radius:12px;max-width:96vw;width:1400px;max-height:94vh;overflow:auto}.bl-image-dialog::backdrop{background:rgba(0,0,0,.8)}.bl-image-dialog img{display:block;width:100%;height:auto}.bl-image-dialog button{position:absolute;right:12px;top:10px;border:1px solid var(--c-border,#e4e6ea);background:var(--c-surface,#fff);color:var(--c-text,#18181a);border-radius:6px;padding:6px 12px;cursor:pointer}.bl-image-dialog p{color:var(--c-text,#172f29);margin:12px 0 0;font:14px system-ui}
@media(max-width:1100px){#byleron-landing .bl-material-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){#byleron-landing .bl-material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:440px){#byleron-landing .bl-material-grid{grid-template-columns:1fr}}

/* 4.8.36: same sidebar-width issue as the Features hero: between 651 and 1140px the page is 660-900px wide, so stack/reduce the columns that were designed for a wider page */
@media(min-width:651px) and (max-width:1140px){#byleron-landing .bl-steps:not(.bl-three){grid-template-columns:repeat(2,minmax(0,1fr))}#byleron-landing .bl-three{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}#byleron-landing .bl-split{grid-template-columns:1fr;gap:28px}}
@media(min-width:1101px) and (max-width:1240px){#byleron-landing .bl-material-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}