/* CRMBix guide pages. The first part is copied from index.html so the guides match the home page:
   change a colour, font or the nav there and here together. */
/* The two typefaces are served from this site (see /fonts/LICENSE.txt). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bricolage-grotesque-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bricolage-grotesque-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/instrument-sans-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-italic-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}

:root{
  --ink:#050c18;
  --ink2:#0b1525;
  --ink3:#111e33;
  --teal:#00e5c3;
  --teal2:#00c2a4;
  --teal3:#009f87;
  --teal-glow:rgba(0,229,195,0.1);
  --teal-glow2:rgba(0,229,195,0.18);
  --teal-border:rgba(0,229,195,0.2);
  --amber:#f5a623;
  --red:#ff4f6a;
  --purple:#8b5cf6;
  --w:#dff0f0;
  --w70:rgba(223,240,240,0.7);
  --w50:rgba(223,240,240,0.5);
  --w60:rgba(223,240,240,0.68);
  --w30:rgba(223,240,240,0.3);
  --w15:rgba(223,240,240,0.15);
  --w08:rgba(223,240,240,0.08);
  --w04:rgba(223,240,240,0.04);
  --card:rgba(11,21,37,0.85);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-d:'Bricolage Grotesque',sans-serif;
  --font-b:'Instrument Sans',sans-serif;
}

body{
  background:var(--ink);
  color:var(--w);
  font-family:var(--font-b);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--teal3);border-radius:2px}

/* ── NOISE ── */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9990;opacity:.45}

/* ══════════════════════════════════
   NAV
══════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  height:66px;padding:0 2.5rem;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(5,12,24,.82);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--w08);
  transition:border-color .3s;
}
nav.sc{border-color:var(--teal-border)}
.nav-logo{font-family:var(--font-d);font-weight:800;font-size:1.3rem;letter-spacing:-.03em;color:var(--w);text-decoration:none}
.nav-logo em{font-style:normal;color:var(--teal)}
.nav-ul{display:flex;align-items:center;gap:.2rem;list-style:none}
.nav-ul a{color:var(--w60);text-decoration:none;font-size:.875rem;font-weight:500;padding:.42rem .9rem;border-radius:6px;transition:color .2s,background .2s}
.nav-ul a:hover{color:var(--w);background:var(--w08)}
.nav-ul .ncta{background:var(--teal)!important;color:var(--ink)!important;font-weight:700!important;padding:.45rem 1.2rem!important;border-radius:6px}
.nav-ul .ncta:hover{background:var(--teal2)!important;box-shadow:0 4px 18px rgba(0,229,195,.3)!important}
.hbg{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer}
.hbg span{display:block;width:22px;height:2px;background:var(--w);border-radius:2px;transition:all .3s}
.mob-menu{display:none;position:fixed;inset:66px 0 0;background:var(--ink2);z-index:590;padding:2rem;flex-direction:column;gap:.75rem}
.mob-menu.on{display:flex}
.mob-menu a{color:var(--w70);text-decoration:none;font-size:1.05rem;font-weight:500;padding:.75rem 0;border-bottom:1px solid var(--w08)}
.mob-menu .mcta{margin-top:.75rem;background:var(--teal);color:var(--ink);text-align:center;border-radius:8px;font-weight:700;padding:.9rem}

/* ══════════════════════════════════
   GLOBAL BACKGROUNDS
══════════════════════════════════ */
.global-bg{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 75% 55% at 68% 38%,rgba(0,229,195,.08) 0%,transparent 65%),
    radial-gradient(ellipse 45% 45% at 12% 82%,rgba(139,92,246,.05) 0%,transparent 58%),
    radial-gradient(ellipse 50% 40% at 90% 88%,rgba(0,229,195,.05) 0%,transparent 55%);
}
.global-grid{
  position:fixed;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(0,229,195,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,195,.03) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 30%,black 10%,transparent 100%);
}
.btn-p{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--teal);color:var(--ink);
  font-family:var(--font-b);font-weight:700;font-size:.95rem;
  padding:.88rem 1.9rem;border-radius:8px;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .25s var(--ease);position:relative;overflow:hidden;
}
.btn-p::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent);opacity:0;transition:opacity .2s}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,229,195,.38)}
.btn-p:hover::before{opacity:1}
.btn-p .arr{transition:transform .2s}
.btn-p:hover .arr{transform:translateX(4px)}

.btn-g{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--w70);font-weight:500;font-size:.9rem;
  text-decoration:none;padding:.88rem 1.3rem;
  border-radius:8px;border:1px solid var(--w15);
  transition:all .2s;cursor:pointer;
}
.btn-g:hover{color:var(--teal);border-color:var(--teal-border);background:var(--teal-glow)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin-bottom:.9rem;
}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--teal);border-radius:1px}
.cta-wrap{max-width:780px;margin:0 auto;text-align:center}
.cta-box{
  background:linear-gradient(140deg,rgba(0,229,195,.12) 0%,rgba(11,21,37,.9) 55%);
  border:1px solid var(--teal-border);
  border-radius:20px;padding:5rem 3.5rem;
  position:relative;overflow:hidden;
}
.cta-box::before{content:'';position:absolute;top:-80px;right:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,195,.1),transparent 70%)}
.cta-box::after{content:'';position:absolute;bottom:-60px;left:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,195,.06),transparent 70%)}
.cta-box h2{font-family:var(--font-d);font-size:clamp(2rem,3.2vw,2.7rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-bottom:1rem;position:relative;z-index:1}
.cta-box h2 em{font-style:normal;color:var(--teal)}
.cta-box p{font-size:.97rem;color:var(--w70);line-height:1.72;margin-bottom:2.25rem;position:relative;z-index:1;max-width:500px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.foot{border-top:1px solid var(--w08)}
.foot-inner{max-width:1340px;margin:0 auto;padding:2.5rem 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}
.foot-logo{font-family:var(--font-d);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;color:var(--w)}
.foot-logo em{font-style:normal;color:var(--teal)}
.foot-links{display:flex;gap:1.6rem;list-style:none;flex-wrap:wrap}
.foot-links a{color:var(--w60);text-decoration:none;font-size:.82rem;transition:color .2s}
.foot-links a:hover{color:var(--teal)}
.foot-copy{font-size:.75rem;color:var(--w60)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.foot-legal{max-width:1340px;margin:0 auto;padding:0 2.5rem 2.5rem;font-size:.72rem;color:var(--w60);line-height:1.6}
.foot-copy{color:var(--w60)}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--teal);color:var(--ink);font-weight:700;padding:.7rem 1.1rem;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vid{max-width:1040px;margin:0 auto;position:relative;border:1px solid rgba(0,229,195,.22);border-radius:18px;overflow:hidden;background:#07101f;box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(0,229,195,.06)}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#07101f}
.vid-play{position:absolute;top:50%;left:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;border:none;background:var(--teal);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 44px rgba(0,229,195,.45);transition:transform .2s var(--ease)}
.vid-play:hover{transform:scale(1.07)}
.vid-play svg{width:30px;height:30px;margin-left:5px;fill:currentColor}
.vid.playing .vid-play{display:none}
.vid-cap{position:relative;z-index:1;margin:1rem 0 0;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;font-size:.8rem;color:var(--w60);line-height:1.5}
.vid-chip{font-size:.62rem;padding:.2rem .6rem;background:var(--teal-glow);color:var(--teal);border:1px solid var(--teal-border);border-radius:100px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
html{-webkit-text-size-adjust:100%}
nav{-webkit-backdrop-filter:blur(20px) saturate(160%)}
.global-grid{-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 30%,black 10%,transparent 100%)}
[hidden]{display:none!important}

@media(max-width:900px){nav{padding:0 1.25rem}.nav-ul{display:none}.hbg{display:flex}}
@media(min-width:901px) and (max-width:1000px){.nav-ul a{padding:.42rem .62rem}}
@media(max-width:700px){.cta-box{padding:3rem 1.5rem}.foot-inner{padding:2rem 1.25rem}.foot-legal{padding:0 1.25rem 2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* ══════════════════════════════════
   GUIDE PAGES
══════════════════════════════════ */
.nav-ul a[aria-current]{color:var(--w)}
.g-top{max-width:1100px;margin:0 auto;padding:7.25rem 2.5rem 0}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:var(--w60);margin-bottom:1.6rem;list-style:none}
.crumbs a{color:var(--w70);text-decoration:none}
.crumbs a:hover{color:var(--teal)}
.crumbs li+li::before{content:'/';margin-right:.5rem;color:var(--w30)}
.g-h1{font-family:var(--font-d);font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;margin-bottom:1.25rem;max-width:20ch}
.g-h1 em{font-style:normal;color:var(--teal)}
.g-lead{font-size:1.1rem;color:var(--w70);line-height:1.75;max-width:64ch;margin-bottom:2rem}
.g-btns{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:3rem}
.g-video{scroll-margin-top:90px}
.g-video .vid{max-width:none}

.g-body{max-width:800px;margin:0 auto;padding:3rem 2.5rem 1rem}
.g-body h2{font-family:var(--font-d);font-size:clamp(1.5rem,2.5vw,1.95rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:3.4rem 0 1rem;scroll-margin-top:90px}
.g-body h2:first-child{margin-top:0}
.g-body h3{font-family:var(--font-d);font-size:1.12rem;font-weight:700;letter-spacing:-.01em;margin:2rem 0 .6rem}
.g-body p,.g-body li{font-size:1rem;color:var(--w70);line-height:1.78}
.g-body p+p{margin-top:.9rem}
.g-body a{color:var(--teal);text-underline-offset:.22em}
.g-body a:hover{color:var(--w)}
.g-body strong{color:var(--w);font-weight:600}
.g-body ul{margin:.8rem 0 .8rem 1.25rem;display:flex;flex-direction:column;gap:.45rem}

.g-body .toc{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 .5rem}
.toc a{display:inline-block;font-size:.82rem;font-weight:500;color:var(--w70);text-decoration:none;padding:.35rem .8rem;border:1px solid var(--w15);border-radius:100px;transition:all .2s}
.toc a:hover{color:var(--teal);border-color:var(--teal-border);background:var(--teal-glow)}

.pains{list-style:none;margin:1rem 0 0!important;gap:.7rem!important}
.pains li{padding:.9rem 1.15rem;background:rgba(255,79,106,.055);border:1px solid rgba(255,79,106,.14);border-left:3px solid var(--red);border-radius:0 9px 9px 0;font-size:.95rem;line-height:1.55}

.steps{list-style:none;counter-reset:st;margin:1rem 0;display:flex;flex-direction:column;gap:.9rem}
.steps li{counter-increment:st;position:relative;padding-left:3rem;min-height:34px}
.steps li::before{content:counter(st);position:absolute;left:0;top:-.1rem;width:34px;height:34px;background:var(--teal-glow);border:1px solid var(--teal-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:800;font-size:.85rem;color:var(--teal)}

.tbl-wrap{overflow-x:auto;margin:1.1rem 0}
.g-body table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.g-body th,.g-body td{text-align:left;vertical-align:top;padding:.7rem .85rem;border:1px solid var(--w15);color:var(--w70);line-height:1.55}
.g-body th{color:var(--w);font-weight:600;background:var(--w04)}
.g-body td:first-child{color:var(--w);font-weight:500}

.shot{margin:1.6rem 0}
.shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--w15);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.shot figcaption{margin-top:.8rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;font-size:.82rem;color:var(--w60);line-height:1.5}
.shot.narrow{max-width:600px}

.note{margin:1.4rem 0;padding:1.3rem 1.5rem;border:1px solid var(--teal-border);border-radius:12px;background:linear-gradient(135deg,rgba(0,229,195,.08),rgba(0,229,195,.03))}
.note ul{margin-top:0;margin-bottom:0}
.sum{margin:1rem 0;padding:1.1rem 1.3rem;border:1px solid var(--w08);border-radius:12px;background:var(--card)}

.g-cta{max-width:1100px;margin:0 auto;padding:3.5rem 2.5rem 2rem}
.g-cta .cta-box{padding:3.75rem 3rem;text-align:center}
.g-more{max-width:1100px;margin:0 auto;padding:2rem 2.5rem 5.5rem}
.g-more h2{font-family:var(--font-d);font-size:1.35rem;font-weight:800;letter-spacing:-.03em;margin-bottom:1.25rem}

.g-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem}
.g-grid.three{grid-template-columns:repeat(3,1fr)}
.gc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--w08);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:all .3s var(--ease)}
.gc:hover{border-color:var(--teal-border);transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 0 1px rgba(0,229,195,.1)}
.gc img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--w08);background:#07101f}
.gc-b{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.gc .eyebrow{margin-bottom:.6rem}
.gc h2,.gc h3{font-family:var(--font-d);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 .55rem}
.gc p{font-size:.9rem;color:var(--w70);line-height:1.65;flex:1}
.gc-meta{margin-top:1.1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.8rem;font-weight:600;color:var(--teal)}
.g-grid.three .gc h3{font-size:1.05rem}
.g-grid.three .gc-b{padding:1.15rem 1.25rem 1.3rem}

.g-hub{max-width:1100px;margin:0 auto;padding:1rem 2.5rem 2rem}

@media(max-width:900px){.g-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .g-top{padding:6.25rem 1.25rem 0}
  .g-body{padding:2.5rem 1.25rem 1rem}
  .g-cta{padding:2.5rem 1.25rem 1.5rem}
  .g-cta .cta-box{padding:2.75rem 1.4rem}
  .g-more{padding:1.5rem 1.25rem 4rem}
  .g-hub{padding:.5rem 1.25rem 1.5rem}
  .g-grid,.g-grid.three{grid-template-columns:1fr}
  .g-btns{margin-bottom:2.25rem}
  .vid{border-radius:12px}
  .vid-play{width:68px;height:68px;margin:-34px 0 0 -34px}
  .steps li{padding-left:2.75rem}
}