/* ============================================================================
   CylStock - website stylesheet
   The "Clean SaaS" design from CylStock-Templates/template1-clean-saas.html,
   extended with everything a multi-page site needs that a one-page template did
   not: a drop-down menu, inner-page heroes, breadcrumbs, the blog grid and post
   page, the video gallery and its player, the FAQ, contact, search and error
   pages. Brand colours and shapes are unchanged.
   ========================================================================== */
:root{
  --navy:#0B2540;--navy2:#0d3159;--blue:#0B5FA5;--blue-l:#3E8FD0;--orange:#FF6B35;--orange-d:#E0511F;
  --ink:#0B2540;--text:#26313D;--muted:#6B7885;--line:#e6ebf1;--line2:#eef2f6;--soft:#F7F9FC;--soft2:#F3F6F9;
  --o-tint:#FFF3EC;--b-tint:#EEF5FC;--n-tint:#EEF1F6;
  --ok-bg:#e9f7ee;--ok:#1e8449;--warn-bg:#fff1e8;--warn:#c14e1c;--err:#c0392b;
  --wa:#25D366;
  --r:14px;--sh-sm:0 1px 2px rgba(11,37,64,.06),0 2px 8px rgba(11,37,64,.04);
  --sh-lg:0 2px 6px rgba(11,37,64,.05),0 24px 60px -12px rgba(11,37,64,.18);
  --hh:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 8px)}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:#fff;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.18}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--blue-l);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:var(--ink);padding:12px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

/* Icons come from one sprite (_Icons.cshtml) and are used as
   <svg class="ic"><use href="#i-name"/></svg>. The stroke style lives here so
   every icon on the site matches; an icon path that wants to be solid carries
   its own fill attribute, which beats these inherited values. */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:12px 22px;border-radius:10px;border:1px solid transparent;transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;white-space:nowrap;line-height:1.2}
.btn .ic{width:18px;height:18px}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px -6px rgba(255,107,53,.65)}
.btn-primary:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--ink);border-color:#d6dee8}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy2)}
.btn-sm{padding:9px 16px;font-size:14px}
a[aria-disabled="true"]{cursor:default}

/* ------------------------------------------------------ headings / sections */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.sec{padding:96px 0}
.sec.tight{padding:56px 0}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);margin:14px 0 14px}
.sec-head p{color:var(--muted);font-size:17px}
.hl{color:var(--orange)}

/* ----------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.hdr.scrolled{box-shadow:0 6px 24px -14px rgba(11,37,64,.25)}
.hdr-in{height:var(--hh);display:flex;align-items:center;gap:20px}
/* The logo is a JPEG on white whose artwork sits in the middle of the canvas,
   so the empty top and bottom are trimmed away rather than scaled down. */
.logo{display:block;flex:none;border-radius:6px}
/* The logo file is 600x300 with white space above and below the artwork, so the
   box is 4:1 and `cover` trims that padding instead of shrinking the mark. The
   height is what makes the small "STOCK SECURED" line readable - don't drop it. */
.logo img{height:64px;width:auto;aspect-ratio:600/150;object-fit:cover;object-position:50% 52%}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
/* nav text leans to the navy of the wordmark rather than a neutral grey */
.nav a.nl,.nav button.nl{font-size:14.5px;font-weight:600;color:#35475c;padding:8px 13px;border-radius:8px;transition:color .15s,background .15s;background:none;border:0;display:inline-flex;align-items:center;gap:5px}
.nav a.nl:hover,.nav button.nl:hover{color:var(--ink);background:var(--soft2)}
.nav a.nl.active,.nav button.nl.active,.nav a.nl[aria-current]{color:var(--ink);background:var(--soft2)}
.nav .drawer-extra{display:none}
.hdr-right{display:flex;align-items:center;gap:16px}
.phone{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--ink)}
.phone .ic{width:18px;height:18px;color:var(--blue)}
.phone:hover{color:var(--blue)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);align-items:center;justify-content:center;margin-left:auto}

/* a menu item with children */
.has-sub{position:relative}
.has-sub>.nl .ic{width:14px;height:14px;transition:transform .2s;opacity:.65}
.has-sub.open>.nl .ic{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 6px);left:0;min-width:238px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.has-sub:hover>.sub,.has-sub.open>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.sub a{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:#3b4856;padding:10px 12px;border-radius:9px}
.sub a:hover{background:var(--soft2);color:var(--blue)}
.sub a.active{background:var(--b-tint);color:var(--blue)}

/* ------------------------------------------------------------- home: hero */
.hero{position:relative;padding:72px 0 132px;background:
  radial-gradient(900px 420px at 85% 10%,rgba(62,143,208,.12),transparent 60%),
  radial-gradient(600px 300px at 5% 0%,rgba(255,107,53,.07),transparent 60%),
  linear-gradient(#fff,#F7F9FC);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 20%,transparent 75%);opacity:.8;pointer-events:none}
/* The headline and the paragraph are the client's and will keep changing, so
   the two columns are sized to cope: the text column can shrink without the
   picture squashing, long words break instead of overflowing, and the heading
   wraps evenly rather than leaving one word stranded on the last line. */
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:56px;align-items:center}
.hero-copy{min-width:0;overflow-wrap:break-word}
/* The headline carries three lines on one slide and two on the next, so the
   column is held steady rather than letting the whole hero jump about.
   (How the words move as they change is in the Movement block further down.) */
@media (min-width:1101px){ .hero-copy h1{min-height:3.24em} }
.hero-eyebrow{margin-bottom:18px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);padding:6px 14px 6px 8px;border-radius:99px;box-shadow:var(--sh-sm)}
.badge .em{width:24px;height:24px;border-radius:50%;background:var(--o-tint);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.hero h1{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.035em;line-height:1.08;margin:22px 0 20px;
  text-wrap:balance}
/* the highlighted words stay on one line only while they comfortably fit */
.hero h1 .hl{position:relative}
@media (min-width:760px){ .hero h1 .hl{white-space:nowrap} }
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.18em;background:rgba(255,107,53,.18);border-radius:4px;z-index:-1}
.hero-text{font-size:18px;color:#4a5765;max-width:540px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 28px}
.hero-ctas .btn{padding:14px 26px;font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px 7px 8px}
.chip i{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--b-tint);color:var(--blue)}
.chip i .ic{width:15px;height:15px}

/* the illustration of the software beside the headline */
.dash-wrap{position:relative;padding:10px 0 40px 24px}
.dash-wrap .toast{top:auto;bottom:0;left:-8px}
.dash{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);overflow:hidden}
.dash-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line2);background:var(--soft)}
.dash-bar span.d{width:10px;height:10px;border-radius:50%;background:#e1e7ee}
.dash-bar span.d:first-child{background:#ffb69b}
.dash-bar b{margin-left:10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.dash-body{padding:22px 22px 18px}
.dash-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:16px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.dash-top{display:flex;align-items:center;gap:22px;padding:16px;border:1px solid var(--line2);border-radius:14px;background:linear-gradient(180deg,#fff,var(--soft))}
.gauge{position:relative;width:128px;height:128px;flex:none}
.gauge svg{width:128px;height:128px;transform:rotate(-90deg)}
.gauge .trk{stroke:var(--soft2)}
.gauge .val{stroke:var(--orange);transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1)}
.gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-c b{font-size:27px;font-weight:800;color:var(--ink);line-height:1}
.gauge-c small{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted);margin-top:4px}
.dstats{flex:1;display:grid;gap:10px;min-width:0}
.dstat{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#3b4856}
.dstat .dt{width:9px;height:9px;border-radius:50%;flex:none}
.dt.orange{background:var(--orange)}.dt.blue{background:var(--blue)}.dt.muted{background:#cfd8e2}
.dstat b{margin-left:auto;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.dstat.bar{position:relative;display:block;height:4px;border-radius:4px;background:var(--soft2);margin-top:6px;overflow:hidden}
.dstat.bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.drows{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.drow{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line2);border-radius:11px;font-size:13px;font-weight:600;color:#3b4856;background:#fff}
.drow .ri{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--b-tint);color:var(--blue)}
.drow .ri .ic{width:16px;height:16px}
.drow span.t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{flex:none;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px}
.pill.success{background:var(--ok-bg);color:var(--ok)}
.pill.warning{background:var(--warn-bg);color:var(--warn)}
.toast{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px 12px 12px;box-shadow:0 18px 40px -12px rgba(11,37,64,.28);animation:floaty 5s ease-in-out infinite}
.toast .ti{width:38px;height:38px;border-radius:10px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.toast .ti .ic{width:20px;height:20px}
.toast b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.3}
.toast small{display:block;font-size:12px;color:var(--muted)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.anim-in{opacity:0;transform:translateY(10px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ------------------------------------------- hero pictures (one, or sliding)
   Takes the place of the drawn screenshot once pictures are added. A single
   picture stands still and the arrows and dots are not rendered at all. */
/* The pictures carry their own white ground and soft shadows, so they are NOT
   put in a card - a border round them would read as a second frame. They are
   never cropped either: whatever shape is uploaded is shown whole. */
.hero-slider{position:relative;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 2px 6px rgba(11,37,64,.04),0 24px 56px -22px rgba(11,37,64,.26)}
.hero-slider .slides{position:relative;aspect-ratio:1/1}
.hero-slider .slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero-slider .slide.on{opacity:1;pointer-events:auto}
.hero-slider:not(.many) .slide{position:relative;opacity:1}
.hero-slider:not(.many) .slides{aspect-ratio:auto}
.hero-slider img{width:100%;height:100%;object-fit:contain;display:block}
.hero-slider:not(.many) img{height:auto}
.hero-slider figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 16px;
  background:rgba(11,37,64,.88);color:#fff;font-size:13.5px;font-weight:700;border-radius:10px;
  backdrop-filter:blur(3px)}
.s-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -4px rgba(11,37,64,.35);opacity:0;transition:opacity .2s,background .15s}
.hero-slider:hover .s-arrow,.s-arrow:focus-visible{opacity:1}
.s-arrow:hover{background:#fff;color:var(--orange)}
.s-arrow.prev{left:12px}
.s-arrow.next{right:12px}
.s-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:7px;z-index:2}
.s-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#cfd8e2;
  transition:width .2s,background .2s}
.s-dot:hover{background:#aebbc9}
.s-dot.on{width:22px;border-radius:99px;background:var(--orange)}
@media (max-width:1100px){
  .hero-slider{max-width:560px;margin:0 auto;width:100%}
  .s-arrow{opacity:1}
}

/* ------------------------------------------------------------ numbers strip */
.stats-sec{position:relative;z-index:3;margin-top:-72px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg)}
.stats.cols-3{grid-template-columns:repeat(3,1fr)}
.stats.cols-2{grid-template-columns:repeat(2,1fr)}
.stat{padding:30px 24px;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line)}
.stat b{display:block;font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.stat:nth-child(odd) b{color:var(--orange)}
.stat small{display:block;margin-top:6px;font-size:11.5px;font-weight:800;letter-spacing:.13em;color:var(--muted)}

/* ------------------------------------------------------------------- steps */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps::before{content:"";position:absolute;top:27px;left:16.66%;right:16.66%;height:2px;background:repeating-linear-gradient(90deg,#cfdbe8 0 8px,transparent 8px 14px)}
.steps.cols-2{grid-template-columns:repeat(2,1fr)}
.steps.cols-4{grid-template-columns:repeat(4,1fr)}
.steps.cols-1{grid-template-columns:1fr}
.steps.cols-1::before,.steps.rich::before{display:none}
.step{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 26px 28px;margin-top:27px;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .2s,border-color .2s}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#d6e2ee}
.step-num{width:54px;height:54px;margin:-27px auto 20px 0;border-radius:50%;background:#fff;border:2px solid var(--orange);color:var(--orange);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #fff}
.step:nth-child(3n+2) .step-num{border-color:var(--blue);color:var(--blue)}
.step:nth-child(3n) .step-num{border-color:var(--navy);color:var(--navy)}
.step-ic{position:absolute;top:22px;right:22px;width:42px;height:42px;border-radius:11px;background:var(--soft2);color:var(--navy);display:flex;align-items:center;justify-content:center}
.step h3{font-size:19px;margin-bottom:10px;padding-right:44px}
.step p{color:var(--muted);font-size:15px}
/* the longer version on /how-it-works */
.steps.rich{grid-template-columns:1fr;gap:20px}
.steps.rich .step{padding:0 32px 30px}
.steps.rich .step h3{font-size:22px}
.steps.rich .step p{font-size:16px;max-width:760px}
.steps.rich .step-body{margin-top:14px;color:var(--muted);font-size:15.5px;max-width:760px}
.steps.rich .step-body p+p{margin-top:12px}
.steps.rich .step-body ul{display:grid;gap:9px;margin-top:12px}
.steps.rich .step-body li{display:flex;gap:10px;align-items:flex-start;color:#33404d;font-weight:600;font-size:15px}
.steps.rich .step-body li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-top:8px}

/* -------------------------------------------------------------- industries */
.ind-sec{background:var(--soft)}
.tablist{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:99px;margin-bottom:28px;box-shadow:var(--sh-sm)}
.tab{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:#3b4856;font-weight:700;font-size:14.5px;padding:10px 18px;border-radius:99px;transition:background .18s,color .18s}
.tab .ic{width:17px;height:17px}
.tab:hover{color:var(--ink);background:var(--soft2)}
.tab.active{background:var(--navy);color:#fff}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-sm);padding:40px;display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:center}
.panel.active{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:22px}
.flist{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.flist li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:600;color:#33404d}
.flist li i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--o-tint);color:var(--orange);display:flex;align-items:center;justify-content:center;margin-top:1px}
.flist li i .ic{width:13px;height:13px;stroke-width:3}
.flist.one{grid-template-columns:1fr}
.lhead{font-size:15px;font-weight:800;color:var(--ink);margin:26px 0 14px;padding-top:22px;border-top:1px dashed var(--line)}
.panel-desc{margin-top:24px;color:var(--muted);font-size:15px}
.panel-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}

/* the ring illustration */
.illu{position:relative;aspect-ratio:1/1;max-width:400px;width:100%;justify-self:center;border-radius:22px;background:
  radial-gradient(circle at 50% 50%,rgba(62,143,208,.16),transparent 60%),linear-gradient(145deg,var(--b-tint),#fff 55%,var(--o-tint));border:1px solid var(--line);overflow:hidden}
.illu::before,.illu::after{content:"";position:absolute;left:50%;top:50%;border:1.5px dashed #cdd9e6;border-radius:50%;transform:translate(-50%,-50%)}
.illu::before{width:58%;height:58%}
.illu::after{width:88%;height:88%;border-style:solid;border-color:#e3eaf2}
.illu-core{position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:26px;background:linear-gradient(145deg,var(--blue),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px -12px rgba(11,95,165,.55);z-index:1}
.illu-core .ic{width:46%;height:46%}
.illu-orb{position:absolute;width:15%;height:15%;margin:-7.5% 0 0 -7.5%;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;color:var(--blue);z-index:1;transform-origin:center}
.illu-orb .ic{width:50%;height:50%}
.illu-orb.o{color:var(--orange)}
.illu-orb.n{color:var(--navy)}
.illu-spin{position:absolute;inset:0;animation:spin 60s linear infinite}
.illu-spin .illu-orb{animation:spin 60s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.illu img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}

/* the industry cards on /industries */
.ind-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ind-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.ind-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:#d6e2ee}
.ind-card .bi{width:52px;height:52px;border-radius:14px;background:linear-gradient(145deg,var(--blue),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ind-card:nth-child(2n) .bi{background:linear-gradient(145deg,#ff9a72,var(--orange))}
.ind-card h3{font-size:21px;margin-bottom:6px}
.ind-card .k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;display:block}
.ind-card p{color:var(--muted);font-size:15px}
.ind-card .mini{display:grid;gap:8px;margin:18px 0 0}
.ind-card .mini li{display:flex;gap:9px;font-size:14.5px;font-weight:600;color:#33404d}
.ind-card .mini li i{flex:none;width:19px;height:19px;border-radius:50%;background:var(--o-tint);color:var(--orange);display:flex;align-items:center;justify-content:center;margin-top:2px}
.ind-card .mini li i .ic{width:11px;height:11px;stroke-width:3}
.ind-card .more{margin-top:auto;padding-top:20px;font-weight:700;color:var(--blue);font-size:15px;display:inline-flex;align-items:center;gap:7px}
.ind-card:hover .more{gap:11px}
.ind-card .more .ic{width:17px;height:17px;transition:transform .2s}

/* ------------------------------------------------------------------- bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(176px,auto);gap:16px}
.bc{position:relative;border-radius:18px;padding:24px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;overflow:hidden}
.bc:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.bc .bi{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex:none}
.bc h3{font-size:17px;margin-bottom:6px}
.bc p{color:var(--muted);font-size:14.5px;line-height:1.55}
.bc.navy{background:linear-gradient(160deg,var(--n-tint),#fff 70%)}
.bc.blue{background:linear-gradient(160deg,var(--b-tint),#fff 70%)}
.bc.orange{background:linear-gradient(160deg,var(--o-tint),#fff 70%)}
.bc.navy .bi{background:var(--navy);color:#fff}
.bc.blue .bi{background:var(--blue);color:#fff}
.bc.orange .bi{background:var(--orange);color:#fff}
.bc.big{grid-column:span 2;grid-row:span 2;padding:34px;background:linear-gradient(150deg,#E7F0FA 0%,#fff 55%,#FFF4EE 100%)}
.bc.big .bi{width:60px;height:60px;border-radius:16px;background:linear-gradient(145deg,var(--blue),var(--navy))}
.bc.big .bi .ic{width:30px;height:30px}
.bc.big h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:10px}
.bc.big p{font-size:16.5px;max-width:420px}
.bc.tall{grid-row:span 2}
.bc.wide{grid-column:span 2}
.big-viz{margin-top:auto;padding-top:24px;display:flex;align-items:flex-end;gap:10px;height:150px}
.big-viz span{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--blue-l),var(--blue));opacity:.85;transform-origin:bottom;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) both}
.big-viz span:nth-child(3n){background:linear-gradient(180deg,#ff9a72,var(--orange))}
.big-viz span:nth-child(4n){background:#cfd8e2}
@keyframes grow{from{transform:scaleY(.1)}}
/* the short list a card can carry, which is what fills a tall card */
.bc-list{margin-top:16px;display:grid;gap:9px}
.bc-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;font-weight:600;color:#33404d}
.bc-list li i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--o-tint);color:var(--orange);
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.bc-list li i .ic{width:11px;height:11px;stroke-width:3}
.bc.navy .bc-list li i{background:var(--n-tint);color:var(--navy)}
.bc.blue .bc-list li i{background:var(--b-tint);color:var(--blue)}

.tall-viz{margin-top:auto;padding-top:22px;display:grid;gap:8px}
.tall-viz span{display:flex;align-items:center;gap:10px}
.tall-viz span::before{content:"";width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,var(--n-tint),#dde4ee);flex:none}
.tall-viz span::after{content:"";height:8px;border-radius:6px;background:var(--line);flex:1}
.tall-viz span:nth-child(2)::after{flex:.7}.tall-viz span:nth-child(3)::after{flex:.85}

/* ---------------------------------------------------------------- demo band */
.cta-band{position:relative;border-radius:26px;padding:56px;background:
  radial-gradient(500px 240px at 100% 0%,rgba(255,107,53,.16),transparent 70%),
  radial-gradient(420px 220px at 0% 100%,rgba(62,143,208,.10),transparent 70%),#FFF6F1;border:1px solid #ffe0d1;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;overflow:hidden}
.cta-band h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:14px}
.cta-band p{color:#4a5765;font-size:17px;max-width:560px}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.checks{display:grid;gap:12px;background:#fff;border:1px solid #ffe0d1;border-radius:18px;padding:26px}
.checks li{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink);font-size:15.5px}
.checks li i{width:28px;height:28px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.checks li i .ic{width:15px;height:15px;stroke-width:3}

/* --------------------------------------------------------------------- blog */
.blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.blog-head .sec-head{margin-bottom:0}
.vlink{font-weight:700;color:var(--blue);font-size:15px;white-space:nowrap;border-bottom:2px solid rgba(11,95,165,.2);padding-bottom:2px;display:inline-flex;align-items:center;gap:6px}
.vlink:hover{border-color:var(--blue)}
.vlink .ic{width:16px;height:16px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.post-top{position:relative;height:170px;display:flex;align-items:flex-end;padding:18px;overflow:hidden}
.post-top::after{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;border:24px solid rgba(255,255,255,.14)}
.post-top.has-img::after{display:none}
.post-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g0{background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%)}
.g1{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-l) 100%)}
.g2{background:linear-gradient(135deg,#FF6B35 0%,#FF9A6B 100%)}
.post-ic{position:absolute;top:18px;left:18px;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:1}
.post-cat{position:relative;z-index:1;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:var(--ink);padding:5px 11px;border-radius:99px}
.post-b{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-b h3{font-size:18px;line-height:1.35}
.post:hover h3{color:var(--blue)}
.post-b p{color:var(--muted);font-size:14.5px}
.post-meta{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);font-weight:600;border-top:1px solid var(--line2)}
.post-meta .ic{width:16px;height:16px;color:var(--blue)}
.post.featured{grid-column:span 3;flex-direction:row}
.post.featured .post-top{width:46%;height:auto;min-height:260px;flex:none}
.post.featured .post-b{padding:34px;justify-content:center}
.post.featured .post-b h3{font-size:clamp(22px,2.4vw,28px)}
.post.featured .post-b p{font-size:16px}

/* category chips */
.chipbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.chipbar a{font-size:14px;font-weight:700;color:#3b4856;background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:99px;transition:background .15s,color .15s,border-color .15s}
.chipbar a:hover{border-color:var(--blue);color:var(--blue)}
.chipbar a.active{background:var(--navy);border-color:var(--navy);color:#fff}
.chipbar a .n{opacity:.6;font-weight:700;margin-left:4px}

/* a post's own page */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.prose{max-width:760px;font-size:17px;color:#33404d}
.prose>*+*{margin-top:18px}
.prose p{line-height:1.72}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin-top:40px}
.prose h3{font-size:20px;margin-top:30px}
.prose h4{font-size:17px;margin-top:24px}
.prose ul,.prose ol{display:grid;gap:10px;padding-left:4px}
.prose ul li{display:flex;gap:11px;align-items:flex-start}
.prose ul li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-top:9px}
.prose ol{counter-reset:p;padding-left:0}
.prose ol li{display:flex;gap:12px;counter-increment:p}
.prose ol li::before{content:counter(p);flex:none;width:24px;height:24px;border-radius:50%;background:var(--b-tint);color:var(--blue);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.prose a{color:var(--blue);font-weight:600;border-bottom:1px solid rgba(11,95,165,.3)}
.prose a:hover{border-color:var(--blue)}
.prose blockquote{margin:28px 0;padding:20px 26px;border-left:3px solid var(--orange);background:var(--o-tint);border-radius:0 14px 14px 0;font-size:17px;color:var(--ink);font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prose th,.prose td{padding:13px 16px;border-bottom:1px solid var(--line2);text-align:left}
.prose thead th{background:var(--soft);font-weight:800;color:var(--ink);font-size:13.5px;text-transform:uppercase;letter-spacing:.06em}
.prose tbody tr:last-child td{border-bottom:0}
.prose img{border-radius:14px;margin:8px 0}
.prose strong{color:var(--ink)}
.article-aside{position:sticky;top:calc(var(--hh) + 32px);display:grid;gap:18px}
.aside-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--sh-sm)}
.aside-card h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.aside-card p{font-size:15px;color:var(--muted);margin-bottom:16px}
.aside-card .btn{width:100%}
.aside-list{display:grid;gap:14px}
.aside-list a{display:grid;gap:4px}
.aside-list a b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.aside-list a:hover b{color:var(--blue)}
.aside-list a small{font-size:12.5px;color:var(--muted);font-weight:600}
.post-hero{padding:56px 0 0}
.post-hero .cat{display:inline-flex;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--o-tint);color:var(--orange-d);padding:6px 13px;border-radius:99px}
.post-hero h1{font-size:clamp(28px,4vw,46px);letter-spacing:-.03em;line-height:1.14;margin:18px 0 16px;max-width:860px}
.post-hero .lead{font-size:19px;color:#4a5765;max-width:760px}
.post-hero .by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--muted)}
.post-hero .by .ic{width:16px;height:16px;color:var(--blue)}
.post-hero .by span{display:inline-flex;align-items:center;gap:7px}
.post-cover{margin:34px 0 0;border-radius:20px;overflow:hidden;border:1px solid var(--line);max-height:440px}
.post-cover img{width:100%;height:100%;object-fit:cover}
.draft-note{display:flex;align-items:center;gap:10px;background:var(--warn-bg);color:var(--warn);border:1px solid #ffd9c4;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:700;margin-bottom:24px}
.draft-note .ic{width:18px;height:18px}

/* ------------------------------------------------------------------- videos */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vgrid.home{grid-template-columns:repeat(4,1fr)}
.vcard{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .2s;text-align:left;width:100%;padding:0}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
/* the tile is a <button>, so its two halves are spans and have to be told to
   behave as blocks - inline spans ignore the aspect ratio and the padding */
.vthumb{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(145deg,var(--navy),var(--blue))}
/* a Short stands upright; an ordinary video is wide, and squeezing it into a
   portrait tile would cut both sides off */
.vcard[data-portrait="0"] .vthumb{aspect-ratio:16/9}
.vthumb img{display:block;width:100%;height:100%;object-fit:cover}
.vthumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(11,37,64,.3);transition:transform .2s}
.vcard:hover .vthumb .play{transform:translate(-50%,-50%) scale(1.09)}
.vthumb .play .ic{width:26px;height:26px}
.vthumb .dur{position:absolute;right:10px;bottom:10px;background:rgba(11,37,64,.82);color:#fff;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.02em}
.vthumb .cat{position:absolute;left:10px;top:10px;background:#fff;color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.vthumb .short{position:absolute;right:10px;top:10px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:99px}
.vbody{display:block;padding:16px 18px 18px}
.vbody h3{font-size:15.5px;line-height:1.4}
.vcard:hover .vbody h3{color:var(--blue)}
.vbody small{display:block;margin-top:7px;font-size:12.5px;color:var(--muted);font-weight:600}

/* the player that opens over the page */
.vplayer{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(11,37,64,.85);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.vplayer[hidden]{display:none}
.vplayer.open{opacity:1}
.vplayer-box{position:relative;width:100%;max-width:980px}
.vplayer-box.portrait{max-width:420px}
.vplayer-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vplayer-box.portrait .vplayer-frame{aspect-ratio:9/16}
.vplayer-frame iframe,.vplayer-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vplayer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;color:#fff}
.vplayer-bar b{font-size:16px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vplayer-bar a{font-size:13.5px;font-weight:700;color:#cfe0f2;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vplayer-bar a:hover{color:#fff}
.vplayer-bar a .ic{width:15px;height:15px}
.vclose{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center}
.vclose:hover{background:rgba(255,255,255,.28)}
body.no-scroll{overflow:hidden}

/* ---------------------------------------------------------------------- faq */
.faq-sec{background:var(--soft)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.faq-side{position:sticky;top:calc(var(--hh) + 32px)}
.faq-side h2{font-size:clamp(28px,3.4vw,40px);margin:14px 0}
.faq-side p{color:var(--muted);font-size:17px}
.faq-side .side-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.acc{display:grid;gap:12px}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.acc-item.open{border-color:#cfdceb;box-shadow:var(--sh-sm)}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:none;border:0;padding:19px 22px;font-weight:700;font-size:16px;color:var(--ink);border-radius:14px}
.acc-q i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--soft2);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .25s,background .2s,color .2s}
.acc-q i .ic{width:16px;height:16px}
.acc-item.open .acc-q i{transform:rotate(45deg);background:var(--orange);color:#fff}
.acc-a{overflow:hidden}
.acc-a .in{padding:0 22px 20px;color:var(--muted);font-size:15px}
.acc-a .in>*+*{margin-top:12px}
.acc-a .in a{color:var(--blue);font-weight:600}

/* ------------------------------------------------------------------ pricing */
.p-hero{padding:80px 0 40px;text-align:center;background:radial-gradient(800px 360px at 50% 0%,rgba(62,143,208,.12),transparent 65%),linear-gradient(#fff,var(--soft))}
.p-hero h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.035em;line-height:1.1;margin:18px auto 18px;max-width:820px}
.p-hero p{color:#4a5765;font-size:18px;max-width:680px;margin:0 auto}
.toggle-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:34px}
.toggle{display:inline-flex;padding:5px;background:#fff;border:1px solid var(--line);border-radius:99px;box-shadow:var(--sh-sm)}
.toggle button{border:0;background:transparent;padding:10px 20px;border-radius:99px;font-weight:700;font-size:14.5px;color:#3b4856;transition:background .18s,color .18s}
.toggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.save{font-size:13px;font-weight:800;color:var(--ok);background:var(--ok-bg);padding:6px 12px;border-radius:99px}
.plans-sec{background:var(--soft);padding:24px 0 80px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plans.cols-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}
.plans.cols-4{grid-template-columns:repeat(4,1fr)}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
.plan.featured{border:2px solid var(--orange);box-shadow:0 30px 60px -24px rgba(255,107,53,.35);transform:translateY(-8px)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.12em;padding:5px 14px;border-radius:99px;white-space:nowrap}
.plan-name{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.plan h3{font-size:22px;margin:8px 0 6px}
.plan-desc{color:var(--muted);font-size:14.5px;min-height:46px}
.price{display:flex;align-items:baseline;gap:6px;margin:22px 0 4px;flex-wrap:wrap}
.price b{font-size:44px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.price .cur{font-size:24px;font-weight:800;color:var(--ink);align-self:flex-start;margin-top:4px}
.price small{color:var(--muted);font-weight:600;font-size:14px}
.gst{font-size:12.5px;color:var(--muted);margin-bottom:22px}
.plan .btn{width:100%}
.plan ul{margin-top:24px;padding-top:22px;border-top:1px solid var(--line2);display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:14.5px;color:#33404d}
.plan li i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--b-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-top:2px}
.plan li i .ic{width:12px;height:12px;stroke-width:3}
.plan li.plus{font-weight:800;color:var(--ink)}
.plan li.plus i{background:var(--o-tint);color:var(--orange)}
.p-note{text-align:center;color:var(--muted);font-size:13.5px;max-width:760px;margin:36px auto 0}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-sm)}
table.cmp{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
.cmp th,.cmp td{padding:16px 20px;text-align:center;border-bottom:1px solid var(--line2)}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp thead th{background:var(--soft);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:800}
.cmp thead th.feat{color:var(--orange)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td{background:#fbfcfe}
.cmp td{color:#33404d;font-weight:600}
.cmp td.hl-col{background:rgba(255,107,53,.04)}
.cmp tbody th{font-weight:700;color:var(--ink);text-align:left;padding:16px 20px;border-bottom:1px solid var(--line2)}
.cmp .yes{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--ok-bg);color:var(--ok);align-items:center;justify-content:center}
.cmp .yes .ic{width:14px;height:14px;stroke-width:3}
.cmp .no{color:#b8c3cf;font-weight:800}

/* -------------------------------------------------------- inner page hero */
.page-hero{padding:56px 0 48px;background:radial-gradient(760px 340px at 20% 0%,rgba(62,143,208,.11),transparent 62%),linear-gradient(#fff,var(--soft))}
.page-hero.center{text-align:center}
.page-hero h1{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.033em;line-height:1.1;margin:16px 0 16px;max-width:880px}
.page-hero.center h1{margin-left:auto;margin-right:auto}
.page-hero .lead{font-size:18.5px;color:#4a5765;max-width:720px}
.page-hero.center .lead{margin:0 auto}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:16px}
.crumbs a:hover{color:var(--blue)}
.crumbs .ic{width:13px;height:13px;opacity:.55}
.crumbs span[aria-current]{color:var(--ink)}
.page-hero.center .crumbs{justify-content:center}

/* --------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-cards{display:grid;gap:16px}
.ccard{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--sh-sm)}
.ccard .ci{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--b-tint);color:var(--blue)}
.ccard.o .ci{background:var(--o-tint);color:var(--orange)}
.ccard.w .ci{background:#e8fbf0;color:var(--wa)}
.ccard h3{font-size:16px;margin-bottom:5px}
.ccard p,.ccard a{font-size:15px;color:var(--muted);font-weight:600;display:block}
.ccard a:hover{color:var(--blue)}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--sh-sm)}
.contact-form h2{font-size:24px;margin-bottom:6px}
.contact-form>p{color:var(--muted);font-size:15px;margin-bottom:22px}

/* the demo form, used both in the panel that opens and on the contact page */
.cyl-field{margin-bottom:14px}
.cyl-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.cyl-field input,.cyl-field select,.cyl-field textarea{width:100%;font:inherit;font-size:14.5px;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.cyl-field textarea{min-height:92px;resize:vertical}
.cyl-field input:focus,.cyl-field select:focus,.cyl-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,53,.18)}
.cyl-field.invalid input,.cyl-field.invalid select{border-color:var(--err)}
.cyl-err{font-size:12px;color:var(--err);margin-top:4px}
.cyl-err:empty{display:none}
.cyl-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.cyl-submit{width:100%;margin-top:6px;font:inherit;font-weight:800;font-size:15.5px;padding:14px 20px;border:0;border-radius:10px;cursor:pointer;background:var(--orange);color:#fff;box-shadow:0 6px 18px -6px rgba(255,107,53,.65)}
.cyl-submit:hover{background:var(--orange-d)}
.cyl-submit[disabled]{opacity:.7;cursor:wait}
.cyl-status{font-size:13.5px;text-align:center;margin-top:14px;font-weight:600}
.cyl-status:empty{display:none}
.cyl-status.success{color:var(--ok)}
.cyl-status.error{color:var(--err)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the panel the Book-a-demo buttons open */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s}
.modal[hidden]{display:none}
.modal.open{opacity:1}
.modal-back{position:absolute;inset:0;background:rgba(11,37,64,.55);backdrop-filter:blur(3px)}
.modal-box{position:relative;width:100%;max-width:470px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;padding:30px 28px 26px;box-shadow:0 30px 70px rgba(11,37,64,.3);transform:translateY(14px) scale(.98);transition:transform .25s}
.modal.open .modal-box{transform:none}
.modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--line)}
.modal-title{font-size:22px;font-weight:800;margin:0 36px 6px 0;color:var(--ink)}
.modal-sub{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 20px}

/* ---------------------------------------------------------------- search */
.results{display:grid;gap:14px;max-width:860px}
.result{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;box-shadow:var(--sh-sm);transition:border-color .2s,transform .2s}
.result:hover{border-color:#cfdceb;transform:translateY(-2px)}
.result .k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.result h3{font-size:18px;margin:7px 0 6px}
.result:hover h3{color:var(--blue)}
.result p{color:var(--muted);font-size:14.5px}
.searchbox{display:flex;gap:10px;max-width:520px;margin-top:24px}
.searchbox input{flex:1;font:inherit;font-size:15px;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;background:#fff}
.searchbox input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,53,.18)}
.empty{color:var(--muted);font-size:16px;max-width:600px}

/* ---------------------------------------------------------------- footer */
.ftr{background:#fff;border-top:1px solid var(--line);padding:72px 0 0}
/* the first column is the wider one so all seven social icons sit on one line */
.ftr-grid{display:grid;grid-template-columns:1.75fr 1fr 1fr 1.4fr;gap:40px}
.ftr .logo img{height:72px}
.ftr-tag{margin-top:16px;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--orange)}
.ftr-by{margin-top:8px;color:var(--muted);font-size:14.5px;max-width:300px}
.ftr-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ftr-social a{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s,color .15s,border-color .15s,transform var(--t-fast) var(--ease)}
.ftr-social a .ic{width:21px;height:21px}
.ftr-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.ftr-social a.wa:hover{background:var(--wa);border-color:var(--wa)}
/* each network keeps its own colour on hover so the row is readable at a glance */
.ftr-social a.fb:hover{background:#1877f2;border-color:#1877f2}
.ftr-social a.ig:hover{background:#d62976;border-color:#d62976}
.ftr-social a.xt:hover{background:#0b1215;border-color:#0b1215}
.ftr-social a.li:hover{background:#0a66c2;border-color:#0a66c2}
.ftr-social a.yt:hover{background:#ff0000;border-color:#ff0000}
.ftr-social a.tg:hover{background:#2aabee;border-color:#2aabee}
.ftr h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.ftr ul{display:grid;gap:11px}
.ftr ul a,.ftr ul button{font-size:14.5px;color:#4a5765;font-weight:500;background:none;border:0;padding:0;text-align:left;font-family:inherit}
.ftr ul a:hover,.ftr ul button:hover{color:var(--blue)}
.ftr .co li{display:flex;gap:10px;font-size:14.5px;color:#4a5765}
.ftr .co li .ic{width:19px;height:19px;color:var(--blue);flex:none;margin-top:2px}
.ftr-bot{margin-top:56px;border-top:1px solid var(--line);padding:22px 0 26px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.ftr-bot nav a:hover{color:var(--blue)}
.ftr-fam{font-weight:700;color:var(--ink)}

/* -------------------------------------------------------- the edit pill
   Only ever rendered while someone is signed in to the control panel. It names
   whatever band is under the eye and opens that screen in a new tab. */
.edit-pill{position:fixed;left:0;bottom:0;transform:translateY(14px);z-index:950;
  display:inline-flex;align-items:center;gap:8px;max-width:min(460px,calc(100vw - 90px));
  background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:10px 16px 10px 13px;
  border-radius:0 12px 0 0;box-shadow:0 -4px 24px -6px rgba(11,37,64,.45);
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s,background .15s}
.edit-pill.on{opacity:1;visibility:visible;transform:none}
.edit-pill:hover{background:var(--orange)}
.edit-pill .ic{width:15px;height:15px;flex:none}
.edit-pill .k{flex:none;opacity:.7;font-weight:600}
.edit-pill b{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a faint outline round the block the pill is pointing at */
[data-edit].edit-on{outline:2px dashed rgba(255,107,53,.55);outline-offset:6px;border-radius:10px}
@media print{.edit-pill{display:none}}

/* ---------------------------------------------------- WhatsApp / errors */
.wa-fab{position:fixed;bottom:22px;right:22px;z-index:900;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.45);transition:transform .15s}
.wa-fab:hover{transform:scale(1.06)}
.wa-fab .ic{width:28px;height:28px}
.wa-pulse{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--wa);animation:waPulse 2s ease-out infinite;pointer-events:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.err-page{padding:100px 0 120px;text-align:center}
.err-page .code{font-size:clamp(64px,12vw,140px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--o-tint)}
.err-page h1{font-size:clamp(26px,3.6vw,38px);margin:-18px 0 14px}
.err-page p{color:var(--muted);font-size:17px;max-width:520px;margin:0 auto 30px}
.err-page .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ------------------------------------------------------------- responsive */
@media (max-width:1280px){
  .hdr-in{gap:14px}
  .nav a.nl,.nav button.nl{padding:8px 10px;font-size:14px}
}
@media (max-width:1160px){
  .hdr-right .phone{display:none}
}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-grid>*{min-width:0}
  .dash-wrap{max-width:560px;margin:0 auto;width:100%}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .article{grid-template-columns:minmax(0,1fr);gap:40px}
  .article-aside{position:static;grid-template-columns:1fr 1fr;display:grid;gap:16px}
  .vgrid,.vgrid.home{grid-template-columns:repeat(3,1fr)}
  .post.featured{grid-column:span 2}
}
@media (max-width:960px){
  .burger{display:inline-flex}
  .hdr-right{display:none}
  .nav{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:12px 16px 20px;box-shadow:0 20px 30px -20px rgba(11,37,64,.25);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;max-height:calc(100vh - var(--hh));overflow:auto}
  .nav.open{opacity:1;transform:none;visibility:visible}
  .nav a.nl,.nav button.nl{padding:13px 12px;font-size:16px;justify-content:space-between;width:100%}
  .nav .drawer-extra{display:grid;gap:10px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
  .nav .drawer-extra .phone{padding:6px 12px}
  .has-sub{display:grid}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 12px;padding:0 0 0 8px;display:none}
  .has-sub.open>.sub{display:grid}
  .panel{grid-template-columns:1fr;padding:30px}
  .illu{max-width:300px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr;padding:40px}
  .posts{grid-template-columns:1fr 1fr}
  .post.featured{grid-column:span 2;flex-direction:column}
  .post.featured .post-top{width:auto;height:200px;min-height:0}
  .post.featured .post-b{padding:24px}
  .faq-grid{grid-template-columns:1fr;gap:32px}
  .faq-side{position:static}
  .plans,.plans.cols-2,.plans.cols-4{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan.featured{transform:none}
  .ind-cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .vgrid,.vgrid.home{grid-template-columns:repeat(2,1fr)}
  .sec{padding:76px 0}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .sec{padding:64px 0}
  .hero{padding:44px 0 110px}
  .stats,.stats.cols-3,.stats.cols-2{grid-template-columns:1fr 1fr}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .steps,.steps.cols-2,.steps.cols-4{grid-template-columns:1fr;gap:12px}
  .steps::before{top:27px;bottom:40px;left:27px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,#cfdbe8 0 8px,transparent 8px 14px)}
  .tablist{border-radius:16px;display:grid;grid-template-columns:1fr;width:100%}
  .tab{border-radius:12px}
  .flist{grid-template-columns:1fr}
  .panel{padding:24px 20px}
  .posts{grid-template-columns:1fr}
  .post.featured{grid-column:auto}
  .blog-head{flex-direction:column;align-items:flex-start}
  .ftr-grid{grid-template-columns:1fr}
  .cta-band{padding:30px 20px;border-radius:20px}
  .bc.big{padding:26px}
  .article-aside{grid-template-columns:1fr}
  .contact-form{padding:26px 20px}
  .cyl-row{grid-template-columns:1fr}
  .page-hero{padding:40px 0 36px}
  .post-hero{padding:36px 0 0}
  .prose{font-size:16.5px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .tall-viz{display:none}
  .bc.big,.bc.wide{grid-column:auto}
  .bc.big,.bc.tall{grid-row:auto}
  .big-viz{height:100px}
  .dash-wrap{padding:58px 0 0}
  .dash-wrap .toast{top:0;bottom:auto;left:0}
  .dash-body{padding:16px 14px}
  .dash-top{flex-direction:column;align-items:stretch;gap:16px}
  .gauge{margin:0 auto}
  .hero-ctas .btn{flex:1 1 100%}
  .logo img{height:48px}
  .stat{padding:22px 10px}
  .stat small{font-size:10px;letter-spacing:.08em}
  .plan{padding:28px 20px}
  .vgrid,.vgrid.home{grid-template-columns:1fr}
  .vclose{top:auto;bottom:-46px}
}

/* ==========================================================================
   Movement
   One easing curve and one duration for the whole site, so nothing feels out
   of step. Everything here is switched off wholesale for anyone who has asked
   their system for less motion - see the block at the end.
   ========================================================================== */
:root{
  --ease:cubic-bezier(.22,.68,.24,1);   /* settles, never bounces */
  --t-fast:.18s; --t:.34s; --t-slow:.62s;
}

/* ---------------------------------------------- arriving on scroll (cyl-js) */
.cyl-js [data-reveal]{
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms)}
.cyl-js [data-reveal]:not(.in){opacity:0;transform:translateY(26px)}
.cyl-js [data-reveal="fade"]:not(.in){transform:none}
.cyl-js [data-reveal="zoom"]:not(.in){transform:scale(.95)}
.cyl-js [data-reveal="left"]:not(.in){transform:translateX(-30px)}
.cyl-js [data-reveal="right"]:not(.in){transform:translateX(30px)}
.cyl-js [data-reveal="rise"]:not(.in){transform:translateY(40px) scale(.985)}
/* cards in a grid come in one after another; the step is set by the script */
.cyl-js [data-reveal-stagger]>*{transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms)}
.cyl-js [data-reveal-stagger]:not(.in)>*{opacity:0;transform:translateY(22px)}

/* --------------------------------------------- the page settling on arrival */
.cyl-js .hdr{animation:dropIn .5s var(--ease) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-12px)}}

/* ------------------------------------------------- the hero words changing */
/* Out to the left and up, in from below - a plain cross-fade read as a flicker. */
.hero-copy h1,.hero-copy .hero-text{
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
.hero-copy.swapping h1{opacity:0;transform:translateY(-10px)}
.hero-copy.swapping .hero-text{opacity:0;transform:translateY(-6px);transition-delay:40ms}
.hero-copy.swapped-in h1{animation:wordsIn .42s var(--ease) both}
.hero-copy.swapped-in .hero-text{animation:wordsIn .42s var(--ease) both;animation-delay:70ms}
@keyframes wordsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------ small interactions */
/* the arrow on a button leans forward when the pointer is over it */
.btn .ic{transition:transform var(--t) var(--ease)}
.btn-primary:hover .ic,.vlink:hover .ic,.ind-card:hover .more .ic{transform:translateX(4px)}
.btn{will-change:transform}
.btn-primary:active,.btn-outline:active,.btn-navy:active{transform:translateY(1px)}

/* nav links grow a line underneath rather than only changing colour */
.nav a.nl,.nav button.nl{position:relative}
.nav a.nl::after,.nav button.nl::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease)}
.nav a.nl:hover::after,.nav a.nl.active::after,.nav button.nl.active::after{transform:scaleX(1)}

/* cards lift a little and their shadow deepens with them */
.step,.bc,.post,.vcard,.ind-card,.plan,.result,.ccard{
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.plan.featured:hover{transform:translateY(-12px)}
/* a picture inside a card eases in slightly as the card is hovered */
.post-top img,.vthumb img{transition:transform .5s var(--ease)}
.post:hover .post-top img,.vcard:hover .vthumb img{transform:scale(1.04)}
/* the round icon badge turns its shoulder */
.bc .bi,.ind-card .bi,.ccard .ci{transition:transform var(--t) var(--ease)}
.bc:hover .bi,.ind-card:hover .bi,.ccard:hover .ci{transform:scale(1.07) rotate(-4deg)}
/* the tick list ticks come in one after another with their card */
.bc-list li{transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}

/* the industry tabs slide their panel in rather than cutting to it */
.panel{animation:none}
.panel.active{animation:panelIn .38s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab{transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.tab:active{transform:scale(.97)}

/* the question opening */
.acc-item{transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.acc-q i{transition:transform var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)}

/* the filter chips and the pricing switch */
.chipbar a,.toggle button{transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.chipbar a:active,.toggle button:active{transform:scale(.97)}

/* the green button breathes instead of sitting still */
.wa-fab{animation:waFloat 3.4s ease-in-out infinite}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.wa-fab:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .anim-in{opacity:1;transform:none}
  .cyl-js [data-reveal]:not(.in),
  .cyl-js [data-reveal-stagger]:not(.in)>*{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* Photos are never cropped where the shape of the picture matters more than
   filling the box. */
.illu img,.ind-card img{object-fit:contain}