/* =========================================================================
   Bookly Ora shared theme  ·  loaded LAST on every page
   One palette, one type pair, one set of components for all page types.
   Only presentation lives here. No markup logic, links or scripts changed.
   Fonts: DM Serif Display (headings) + Mulish (body)
   ========================================================================= */

/* ---------- 1. Design tokens (shared by every page root) ---------- */
.cu,.bty,.edu,.pub,.drv,.evt,.med,.pro,.fit,.ftp,.ent,.rsc{
  --u-ink:#0f2a52;
  --u-text:#3f5679;
  --u-rose:#ff2d55;
  --u-rose-d:#e11d48;
  --u-blue:#1e90ff;
  --u-violet:#6f7dff;
  --u-mint:#12875a;
  --u-soft:#fff1f3;
  --u-sky:#eaf4ff;
  --u-paper:#f5f8fd;
  --u-line:#e6ebf3;
  --u-line-2:#cfd9ea;
  --u-radius:22px;
  --u-shadow:0 26px 44px -30px rgba(15,42,82,.55);
  --u-serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --u-sans:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- 2. Map every page family onto the shared tokens ---------- */
/* family A: drv / evt / med / pro / fit (variable driven templates) */
.drv,.evt,.med,.pro,.fit{
  --ink:var(--u-ink);--text:var(--u-text);
  --accent:var(--u-rose);--accent-d:var(--u-rose-d);--on-accent:#fff;
  --soft:var(--u-soft);--paper:var(--u-paper);
  --line:var(--u-line);--line-2:var(--u-line-2);--ok:var(--u-mint);
  --hf:var(--u-serif);--bf:var(--u-sans);--hw:400;--hls:-.01em;--r:var(--u-radius);
  --hero-bg:
    radial-gradient(60% 70% at 88% 8%,rgba(111,125,255,.24),transparent 62%),
    radial-gradient(45% 50% at 0 45%,rgba(255,45,85,.09),transparent 62%),
    linear-gradient(#f2f8ff 0,#fff 100%);
  --cta-bg:
    radial-gradient(circle at 0 0,rgba(255,45,85,.35),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(30,144,255,.40),transparent 55%),
    linear-gradient(125deg,#0f2a52 0%,#1b3f7a 55%,#3b2f94 100%);
  --cta-text:#d6e0f3;
}
/* family B: bty / edu / pub */
.bty,.edu,.pub{
  --ink:var(--u-ink);--text:var(--u-text);
  --rose:var(--u-rose);--rose-d:var(--u-rose-d);--rose-dark:var(--u-rose-d);
  --line:var(--u-line);--serif:var(--u-serif);--sans:var(--u-sans);--radius:var(--u-radius);
}
.pub{--navy:var(--u-ink);--navy-2:#1b3f7a;--blue:var(--u-blue)}
/* family C: ftp / ent / rsc (feature, enterprise, resource pages) */
.ftp,.ent,.rsc{
  --navy:var(--u-ink);--navy2:#1b3f7a;--ink:var(--u-ink);--text:var(--u-text);
  --rose:var(--u-rose);--rose-d:var(--u-rose-d);--line:var(--u-line);--paper:var(--u-paper);
  --serif:var(--u-serif);--sans:var(--u-sans);
}

/* ---------- 3. Typography: same type on every page ---------- */
.bty,.edu,.pub,.drv,.evt,.med,.pro,.fit,.ftp,.ent,.rsc{
  font-family:var(--u-sans);color:var(--u-text);font-size:16px;line-height:1.7;
  text-rendering:optimizeLegibility;
}
.bty h1,.bty h2,.edu h1,.edu h2,.pub h1,.pub h2,.drv h1,.drv h2,.evt h1,.evt h2,
.med h1,.med h2,.pro h1,.pro h2,.fit h1,.fit h2,.ftp h1,.ftp h2,.ent h1,.ent h2,.rsc h1,.rsc h2{
  font-family:var(--u-serif);font-weight:400;letter-spacing:-.012em;line-height:1.08;
  color:var(--u-ink);text-transform:none;text-wrap:balance;
}
.bty h3,.edu h3,.pub h3,.drv h3,.evt h3,.med h3,.pro h3,.fit h3,.ftp h3,.ent h3,.rsc h3{
  font-family:var(--u-sans);font-weight:800;color:var(--u-ink);letter-spacing:-.005em;
}
.bty .hero h1,.edu .hero h1,.pub .hero h1,.drv .hero h1,.evt .hero h1,.med .hero h1,
.pro .hero h1,.fit .hero h1,.ftp .hero h1,.ent .hero h1,.rsc .hero h1{
  font-size:clamp(40px,5.4vw,66px);line-height:1.04;
}
.bty .hero h1 em,.edu .hero h1 em,.pub .hero h1 em,.drv .hero h1 em,.evt .hero h1 em,
.med .hero h1 em,.pro .hero h1 em,.fit .hero h1 em{
  font-style:normal;background:linear-gradient(110deg,var(--u-blue),var(--u-violet) 55%,var(--u-rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bty .sec-head h2,.edu .sec-head h2,.pub .sec-head h2,.drv .sec-head h2,.evt .sec-head h2,
.med .sec-head h2,.pro .sec-head h2,.fit .sec-head h2,.ftp .sec-head h2,.ent .sec-head h2,.rsc .sec-head h2{
  font-size:clamp(30px,4vw,44px);
}

/* ---------- 4. Section rhythm + calm alternating backgrounds ---------- */
.bty section,.edu section,.pub section,.drv section,.evt section,.med section,.pro section,.fit section{padding:92px 0}
.ftp section,.ent section,.rsc section{padding:88px 0}
.drv .who,.evt .who,.med .who,.pro .who,.fit .who,.drv .how,.evt .how,.med .how,.pro .how,.fit .how,
.edu .how,.pub .how{background:var(--u-paper)}
.drv .hero,.evt .hero,.med .hero,.pro .hero,.fit .hero,
.bty .hero,.edu .hero,.pub .hero,.ftp .hero,.ent .hero,.rsc .hero{
  background:
    radial-gradient(60% 70% at 88% 8%,rgba(111,125,255,.22),transparent 62%),
    radial-gradient(45% 50% at 0 45%,rgba(255,45,85,.08),transparent 62%),
    linear-gradient(#f2f8ff 0,#fff 100%);
}

/* ---------- 5. Buttons: one pill style, rose primary ---------- */
.bty .btn,.edu .btn,.pub .btn,.drv .btn,.evt .btn,.med .btn,.pro .btn,.fit .btn,.ftp .btn,.ent .btn,.rsc .btn{
  border-radius:99px;font-family:var(--u-sans);font-weight:800;font-size:15px;padding:14px 28px;
  letter-spacing:.005em;
}
.drv .btn-main,.evt .btn-main,.med .btn-main,.pro .btn-main,.fit .btn-main,
.bty .btn-pink,.edu .btn-pink,.pub .btn-pink,.ftp .btn-pink,.ent .btn-pink,.rsc .btn-pink{
  background:var(--u-rose);color:#fff;box-shadow:0 12px 24px -10px rgba(255,45,85,.8);border-color:transparent;
}
.drv .btn-main:hover,.evt .btn-main:hover,.med .btn-main:hover,.pro .btn-main:hover,.fit .btn-main:hover,
.bty .btn-pink:hover,.edu .btn-pink:hover,.pub .btn-pink:hover,.ftp .btn-pink:hover,.ent .btn-pink:hover,.rsc .btn-pink:hover{
  background:var(--u-rose-d);color:#fff;transform:translateY(-2px);box-shadow:0 18px 30px -12px rgba(255,45,85,.85);
}
.drv .btn-line,.evt .btn-line,.med .btn-line,.pro .btn-line,.fit .btn-line,
.bty .btn-line,.edu .btn-line,.pub .btn-line,.ftp .btn-line,.ent .btn-line,.rsc .btn-line{
  background:#fff;color:var(--u-ink);border-color:var(--u-line-2);
}
.drv .btn-line:hover,.evt .btn-line:hover,.med .btn-line:hover,.pro .btn-line:hover,.fit .btn-line:hover,
.bty .btn-line:hover,.edu .btn-line:hover,.pub .btn-line:hover,.ftp .btn-line:hover,.ent .btn-line:hover,.rsc .btn-line:hover{
  background:var(--u-ink);color:#fff;border-color:var(--u-ink);
}
/* buttons that sit on dark panels */
.cta .box .btn-line,.band .btn-ghost,.band .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta .box .btn-line:hover,.band .btn-ghost:hover,.band .btn-line:hover{background:rgba(255,255,255,.16);color:#fff;border-color:#fff}

/* ---------- 6. Cards, tags, icons ---------- */
.drv .card,.evt .card,.med .card,.pro .card,.fit .card,
.drv .fgrid li,.evt .fgrid li,.med .fgrid li,.pro .fgrid li,.fit .fgrid li,
.ftp .card,.ent .card,.rsc .card{
  border-radius:var(--u-radius);border:1px solid var(--u-line);background:#fff;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.drv .card:hover,.evt .card:hover,.med .card:hover,.pro .card:hover,.fit .card:hover,
.drv .fgrid li:hover,.evt .fgrid li:hover,.med .fgrid li:hover,.pro .fgrid li:hover,.fit .fgrid li:hover,
.ftp .card:hover,.ent .card:hover,.rsc .card:hover{
  transform:translateY(-4px);box-shadow:var(--u-shadow);border-color:var(--u-line-2);
}
.drv .card .ic,.evt .card .ic,.med .card .ic,.pro .card .ic,.fit .card .ic,
.drv .fgrid .ic,.evt .fgrid .ic,.med .fgrid .ic,.pro .fgrid .ic,.fit .fgrid .ic,
.drv .frows .ic,.evt .frows .ic,.med .frows .ic,.pro .frows .ic,.fit .frows .ic{
  background:var(--u-soft);color:var(--u-rose-d);
}
.drv .tgs span,.evt .tgs span,.med .tgs span,.pro .tgs span,.fit .tgs span{background:var(--u-sky);color:#1b6fd6}
.drv .frows li:hover .ic,.evt .frows li:hover .ic,.med .frows li:hover .ic,.pro .frows li:hover .ic,.fit .frows li:hover .ic,
.drv .fgrid li:hover .ic,.evt .fgrid li:hover .ic,.med .fgrid li:hover .ic,.pro .fgrid li:hover .ic,.fit .fgrid li:hover .ic{
  background:var(--u-rose);color:#fff;
}

/* numbered steps */
.drv .how .n,.evt .how .n,.med .how .n,.pro .how .n,.fit .how .n{
  background:linear-gradient(135deg,var(--u-blue),var(--u-violet));font-family:var(--u-serif);
}

/* ---------- 7. FAQ: same accordion everywhere ---------- */
.bty .faq details,.edu .faq details,.pub .faq details,.drv .faq details,.evt .faq details,
.med .faq details,.pro .faq details,.fit .faq details{
  border:1px solid var(--u-line);background:#fff;border-radius:18px;
  transition:border-color .25s,box-shadow .25s;
}
.bty .faq details:hover,.edu .faq details:hover,.pub .faq details:hover,.drv .faq details:hover,
.evt .faq details:hover,.med .faq details:hover,.pro .faq details:hover,.fit .faq details:hover{
  border-color:var(--u-line-2);box-shadow:0 14px 28px -22px rgba(15,42,82,.45);
}
.bty .faq details[open],.edu .faq details[open],.pub .faq details[open],.drv .faq details[open],
.evt .faq details[open],.med .faq details[open],.pro .faq details[open],.fit .faq details[open]{
  border-color:var(--u-rose);box-shadow:0 18px 34px -24px rgba(255,45,85,.45);
}
.bty .faq summary,.edu .faq summary,.pub .faq summary,.drv .faq summary,.evt .faq summary,
.med .faq summary,.pro .faq summary,.fit .faq summary{font-weight:800;color:var(--u-ink)}
.bty .faq summary:after,.edu .faq summary:after,.pub .faq summary:after,.drv .faq summary:after,
.evt .faq summary:after,.med .faq summary:after,.pro .faq summary:after,.fit .faq summary:after{color:var(--u-rose)}
.ftp .faq details[open],.ent .faq details[open],.rsc .faq details[open]{border-color:var(--u-rose)}

/* ---------- 8. Closing call-to-action panel (same on every page) ---------- */
.drv .cta .box,.evt .cta .box,.med .cta .box,.pro .cta .box,.fit .cta .box,
.edu .cta .box,.pub .cta .box,.bty .cta .box{
  background:
    radial-gradient(circle at 0 0,rgba(255,45,85,.35),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(30,144,255,.40),transparent 55%),
    linear-gradient(125deg,#0f2a52 0%,#1b3f7a 55%,#3b2f94 100%);
  color:#d6e0f3;border-radius:36px;border:0;box-shadow:0 40px 70px -36px rgba(15,42,82,.7);
}
.bty .cta .box h2,.bty .cta .box h2 em{color:#fff}
.bty .cta .box .copy>p:not(.note),.bty .cta .box .checks li{color:#d6e0f3}
.bty .cta .box .checks li:before{color:#ff8fa5}
.bty .cta .box .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.bty .cta .box .btn-line:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.drv .cta h2,.evt .cta h2,.med .cta h2,.pro .cta h2,.fit .cta h2,.edu .cta h2,.pub .cta h2{color:#fff}
.edu .cta h2 em,.drv .cta h2 em{color:#ff8fa5;-webkit-text-fill-color:#ff8fa5;background:none}
.drv .cta,.evt .cta,.med .cta,.pro .cta,.fit .cta,.edu .cta,.pub .cta,.bty .cta{padding:0 0 92px}

/* feature / enterprise / resource bottom band */
.ftp .band,.ent .band,.rsc .band{
  background:
    radial-gradient(circle at 0 0,rgba(255,45,85,.35),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(30,144,255,.40),transparent 55%),
    linear-gradient(125deg,#0f2a52 0%,#1b3f7a 55%,#3b2f94 100%);
}
.ftp .sec-head h2:after,.ent .sec-head h2:after,.rsc .sec-head h2:after{
  background:linear-gradient(90deg,var(--u-rose),#ff8a5b);
}

/* ---------- 9. Sports & Fitness: its hero was dark; bring it in line ---------- */
.fit .hero{color:var(--u-text)}
.fit .hero h1{color:var(--u-ink);text-transform:none;font-size:clamp(40px,5.4vw,66px);line-height:1.04}
.fit .hero .lead{color:var(--u-text)}
.fit .hero .checks{color:#4a5f80}
.fit .hero .checks li:before{color:var(--u-mint)}
.fit .hero .btn-line{color:var(--u-ink);background:#fff;border-color:var(--u-line-2)}
.fit .hero .btn-line:hover{color:#fff;background:var(--u-ink);border-color:var(--u-ink)}

/* hero floating chips / mock cards share one shadow + radius */
.drv .float,.bty .float,.evt .float,.med .float,.pro .float,.fit .float{box-shadow:0 24px 40px -18px rgba(15,42,82,.45)}
.drv .float i,.evt .float i,.med .float i,.pro .float i,.fit .float i{background:var(--u-soft);color:var(--u-rose-d)}

/* dark feature sections keep white headings (education) */
.edu .dark h2{color:#fff}

/* ---------- 10. Shared photo components (new image sections) ---------- */
.ux-photos{background:#fff}
.ux-photos.tint{background:var(--u-paper)}
.ux-photos .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.ux-photos .sec-head{text-align:center;max-width:660px;margin:0 auto 44px}
.ux-photos .sec-head p{margin-top:14px;font-size:17px;color:var(--u-text)}
.ux-mosaic{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.ux-mosaic figure,.ux-strip figure{margin:0;position:relative;overflow:hidden;border-radius:var(--u-radius);
  background:var(--u-sky);box-shadow:var(--u-shadow);isolation:isolate}
.ux-mosaic img,.ux-strip img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ux-mosaic figure:hover img,.ux-strip figure:hover img{transform:scale(1.05)}
.ux-mosaic figcaption,.ux-strip figcaption{position:absolute;left:14px;bottom:14px;right:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:calc(100% - 28px);
  background:rgba(255,255,255,.94);color:var(--u-ink);font-weight:800;font-size:13.5px;line-height:1.3;
  padding:8px 14px;border-radius:14px;box-shadow:0 14px 28px -14px rgba(15,42,82,.55)}
.ux-mosaic figcaption:before,.ux-strip figcaption:before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--u-rose);box-shadow:0 0 0 4px rgba(255,45,85,.18);flex:none}
.ux-mosaic figure::after,.ux-strip figure::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;z-index:1;
  background:linear-gradient(to top,rgba(15,42,82,.45),transparent);pointer-events:none}
/* mosaic layouts: first tile is large */
.ux-mosaic .a{grid-column:span 7;aspect-ratio:16/11}
.ux-mosaic .b{grid-column:span 5;aspect-ratio:auto}
.ux-mosaic .c,.ux-mosaic .d{grid-column:span 4;aspect-ratio:4/3}
.ux-mosaic .e{grid-column:span 4;aspect-ratio:4/3}
.ux-mosaic.three .a{grid-column:span 6;aspect-ratio:4/3}
.ux-mosaic.three .b,.ux-mosaic.three .c{grid-column:span 6;aspect-ratio:4/3}
.ux-mosaic.three .c{grid-column:span 12;aspect-ratio:21/8}
.ux-mosaic.four .a{grid-column:span 8;aspect-ratio:16/10}
.ux-mosaic.four .b{grid-column:span 4;aspect-ratio:auto}
.ux-mosaic.four .c,.ux-mosaic.four .d{grid-column:span 6;aspect-ratio:16/9}
.ux-mosaic.six .a,.ux-mosaic.six .b{grid-column:span 6;aspect-ratio:16/10}
.ux-mosaic.six .c,.ux-mosaic.six .d,.ux-mosaic.six .e,.ux-mosaic.six .f{grid-column:span 3;aspect-ratio:4/3}
.ux-mosaic.five .a{grid-column:span 7;aspect-ratio:16/11}
.ux-mosaic.five .b{grid-column:span 5;aspect-ratio:auto}
.ux-mosaic.five .c,.ux-mosaic.five .d,.ux-mosaic.five .e{grid-column:span 4;aspect-ratio:4/3}
.ux-strip.two{grid-template-columns:repeat(2,1fr);margin-top:18px}
.ux-strip.two figure{aspect-ratio:16/9}
/* equal-tile strip */
.ux-strip{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ux-strip figure{aspect-ratio:4/3}
/* full-width banner photo */
.ux-banner{padding:92px 0 0!important}
.ux-banner .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.ux-banner figure{margin:0;position:relative;overflow:hidden;border-radius:32px;min-height:340px;
  box-shadow:0 40px 70px -40px rgba(15,42,82,.7);isolation:isolate}
.ux-banner img{width:100%;height:clamp(300px,38vw,470px);object-fit:cover;display:block}
.ux-banner figure::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(15,42,82,.80) 0,rgba(15,42,82,.35) 52%,transparent 80%)}
.ux-banner figcaption{position:absolute;z-index:2;left:clamp(22px,4vw,52px);top:50%;transform:translateY(-50%);
  max-width:min(460px,80%);color:#e5edfa}
.ux-banner figcaption b{display:block;font-family:var(--u-serif);font-weight:400;color:#fff;
  font-size:clamp(26px,3.6vw,42px);line-height:1.1;margin-bottom:10px;letter-spacing:-.01em}
.ux-banner figcaption span{display:block;font-size:16px;line-height:1.6}
.ux-banner figcaption a{display:inline-flex;margin-top:18px;background:var(--u-rose);color:#fff;font-weight:800;
  font-size:14.5px;padding:12px 24px;border-radius:99px;text-decoration:none;
  box-shadow:0 12px 24px -10px rgba(255,45,85,.8);transition:transform .2s,background .2s}
.ux-banner figcaption a:hover{background:var(--u-rose-d);transform:translateY(-2px)}
/* photo cards injected into industry card lists */
.ux-cardimg{margin:-26px -26px 20px;height:168px;overflow:hidden;border-radius:var(--u-radius) var(--u-radius) 0 0}
.ux-cardimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .ux-cardimg img{transform:scale(1.06)}

/* home page extras */
.cu .ux-photos.home{padding:72px 0}

@media (max-width:980px){
  .bty section,.edu section,.pub section,.drv section,.evt section,.med section,.pro section,.fit section{padding:68px 0}
  .ux-mosaic{grid-template-columns:repeat(6,1fr)}
  .ux-mosaic .a,.ux-mosaic.four .a,.ux-mosaic.six .a,.ux-mosaic.three .a{grid-column:span 6;aspect-ratio:16/10}
  .ux-mosaic .b,.ux-mosaic.four .b,.ux-mosaic.three .b{grid-column:span 3;aspect-ratio:4/3}
  .ux-mosaic.six .b{grid-column:span 6;aspect-ratio:16/10}
  .ux-mosaic .c,.ux-mosaic .d,.ux-mosaic .e,.ux-mosaic.six .c,.ux-mosaic.six .d,.ux-mosaic.six .e,.ux-mosaic.six .f,
  .ux-mosaic.four .c,.ux-mosaic.four .d,.ux-mosaic.five .c,.ux-mosaic.five .d,.ux-mosaic.five .e{grid-column:span 3;aspect-ratio:4/3}
  .ux-mosaic.five .a{grid-column:span 6;aspect-ratio:16/10}
  .ux-mosaic.five .b{grid-column:span 3;aspect-ratio:4/3}
  .ux-strip.two{grid-template-columns:1fr 1fr}
  .ux-mosaic.three .c{grid-column:span 6;aspect-ratio:16/9}
  .ux-banner{padding:68px 0 0!important}
}
@media (max-width:620px){
  .ux-mosaic{gap:12px}
  .ux-mosaic .a,.ux-mosaic .b,.ux-mosaic .c,.ux-mosaic .d,.ux-mosaic .e,.ux-mosaic .f,
  .ux-mosaic.three .a,.ux-mosaic.three .b,.ux-mosaic.three .c,
  .ux-mosaic.four .a,.ux-mosaic.four .b,.ux-mosaic.four .c,.ux-mosaic.four .d,
  .ux-mosaic.five .a,.ux-mosaic.five .b,.ux-mosaic.five .c,.ux-mosaic.five .d,.ux-mosaic.five .e,
  .ux-mosaic.six .a,.ux-mosaic.six .b,.ux-mosaic.six .c,.ux-mosaic.six .d,.ux-mosaic.six .e,.ux-mosaic.six .f{
    grid-column:span 6;aspect-ratio:4/3}
  .ux-banner figure{border-radius:24px}
  .ux-banner figcaption{max-width:88%}
  .ux-banner figure::after{background:linear-gradient(to top,rgba(15,42,82,.88) 0,rgba(15,42,82,.25) 70%,transparent)}
  .ux-banner figcaption{top:auto;bottom:22px;transform:none}
  .ux-cardimg{height:150px}
  .ux-strip.two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ux-mosaic img,.ux-strip img,.ux-cardimg img{transition:none!important}
}

/* one accent for every card icon / tag (events page used three colours) */
.evt .card:nth-child(n) .ic{color:var(--u-rose-d);background:var(--u-soft)}
.evt .card:nth-child(n) .tgs span{color:#1b6fd6;background:var(--u-sky)}

/* the hidden tab radios on Education / Sports used to stick out past the page edge (sideways scroll) */
.edu .cases,.fit .types{position:relative;overflow-x:clip}

/* home page headings use the same serif as every other page */
.cu-hero h1,.cu .sb-h2,.cu .sb-cta h2,.cu .cu-title h2,.cu .sb-feat-it h3{font-family:var(--u-serif);font-weight:400;letter-spacing:-.012em}
.cu .sb-feat-it h3{font-family:var(--u-sans);font-weight:800;letter-spacing:0}
.cu-hero h1{font-size:clamp(36px,5vw,58px);line-height:1.06}
.cu .sb-h2{font-size:clamp(30px,4vw,44px);line-height:1.1}
.ux-photos h2{font-family:var(--u-serif);font-weight:400;color:var(--u-ink);font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.cu .cu-title h2{font-size:clamp(26px,3.2vw,36px)}

/* =========================================================================
   HOME PAGE (index.html)  ·  .hm-*
   ========================================================================= */
.hm{--ink:#0f2a52;--tx:#3f5679;--cream:#f5f8fd;--peach:#eaf4ff;--peach2:#cfd9ea;--apricot:#6f7dff;--cta:#ff2d55;--cta-d:#e11d48;--line:#e6ebf3;--terra:#9aa9c4;
  --serif:"DM Serif Display",Georgia,serif;color:var(--tx)}
.hm *{box-sizing:border-box}
.hm-w{max-width:1160px;margin:0 auto;padding:0 24px}
.hm h1,.hm h2{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.015em;line-height:1.08;margin:0}
.hm h3{color:var(--ink);font-weight:800;margin:0}
.hm-eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#e11d48;background:#fff;border:1px solid var(--peach2);border-radius:99px;padding:7px 16px}
.hm-h2{font-size:clamp(30px,4vw,46px)}
.hm-lead{font-size:18px;max-width:640px;margin:14px auto 0;color:var(--tx)}
.hm-head{text-align:center;margin-bottom:48px}
.hm-sec{padding:96px 0}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;font-weight:800;font-size:16px;padding:15px 30px;text-decoration:none;border:1.5px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.hm-btn:hover{transform:translateY(-2px)}
.hm-btn-main{background:linear-gradient(135deg,#ff4d6d,#ff2d55);color:#fff;box-shadow:0 14px 28px -12px rgba(208,84,48,.8)}
.hm-btn-main:hover{box-shadow:0 20px 34px -12px rgba(208,84,48,.85)}
.hm-btn-line{background:#fff;color:var(--ink);border-color:var(--peach2)}
.hm-btn-line:hover{border-color:var(--ink)}
.hm a:focus-visible,.hm summary:focus-visible,.hm button:focus-visible{outline:3px solid #6f7dff;outline-offset:3px;border-radius:10px}

/* hero */
.hm-hero{position:relative;overflow:hidden;padding:72px 0 88px;
  background:radial-gradient(60% 70% at 100% 0,rgba(111,125,255,.7),transparent 62%),radial-gradient(40% 55% at 0 100%,rgba(253,238,228,.9),transparent 65%),linear-gradient(180deg,#f2f8ff,#fff)}
.hm-hero-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px;align-items:center}
.hm-hero h1{font-size:clamp(38px,5.2vw,64px);margin:22px 0 20px}
.hm-hero h1 em{font-style:normal;color:#ff2d55}
.hm-hero p.sub{font-size:19px;max-width:520px;margin:0 0 30px}
.hm-cta{display:flex;flex-wrap:wrap;gap:12px}
.hm-note{margin-top:18px;font-size:14px;color:#5d7090;display:flex;flex-wrap:wrap;gap:6px 18px}
.hm-note span:before{content:"✓";color:#ff2d55;font-weight:800;margin-right:6px}
.hm-demo{position:relative}
.hm-demo:before{content:"";position:absolute;inset:6% -4% -6% 6%;border-radius:30px;background:linear-gradient(135deg,#cfd9ea,#6f7dff);opacity:.55;transform:rotate(2.5deg);z-index:0}
.hm-frame{position:relative;z-index:1;border-radius:22px;overflow:hidden;background:#eaf4ff;border:1px solid rgba(15,42,82,.08);box-shadow:0 36px 70px -30px rgba(15,42,82,.5),0 10px 24px -12px rgba(15,42,82,.18);line-height:0}
.hm-frame img{display:block;width:100%;height:auto}

/* proof strip */
.hm-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hm-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hm-strip-it{padding:26px 20px;text-align:center;border-left:1px solid var(--line)}
.hm-strip-it:first-child{border-left:0}
.hm-strip-it b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink);line-height:1.1}
.hm-strip-it span{font-size:14px;color:#5d7090}

/* tabbed features */
.hm-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.hm-tab{font:inherit;font-weight:800;font-size:15px;color:var(--tx);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:11px 22px;cursor:pointer;transition:all .2s}
.hm-tab:hover{border-color:var(--apricot);color:var(--ink)}
.hm-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.hm-panel[hidden]{display:none}
.hm-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hm-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s}
.hm-card:hover{transform:translateY(-4px);box-shadow:0 26px 44px -30px rgba(15,42,82,.55);border-color:var(--peach2)}
.hm-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#eaf4ff,#cfd9ea);font-size:24px;margin-bottom:18px}
.hm-card h3{font-size:18px;margin-bottom:8px}
.hm-card p{margin:0;font-size:15.5px}
.hm-more{text-align:center;margin-top:34px}
.hm-link{font-weight:800;color:#e11d48;text-decoration:none}
.hm-link:hover{text-decoration:underline}

/* alternating rows */
.hm-alt{background:var(--cream)}
.hm-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:34px 0}
.hm-row.rev .hm-row-tx{order:2}
.hm-row h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px}
.hm-row p{font-size:17px;margin:0 0 18px}
.hm-row ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.hm-row li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink)}
.hm-row li:before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:2px;border-radius:50%;background:#cfd9ea;color:#e11d48;font-size:12px;font-weight:800}
.hm-row-img{background:linear-gradient(135deg,#eaf4ff,#cfd9ea);border-radius:28px;padding:28px;display:grid;place-items:center;min-height:300px}
.hm-row-img img{width:100%;height:auto;max-height:340px;object-fit:contain}

/* photo mosaic (existing .ux-photos) tuned to the palette */
.cu .ux-photos{background:#fff}

/* industries chips */
.hm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:900px;margin:0 auto}
.hm-chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:13px 22px;font-weight:800;color:var(--ink);text-decoration:none;transition:all .2s}
.hm-chip span{font-size:20px}
.hm-chip:hover{border-color:var(--apricot);transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(15,42,82,.5)}
.hm-tint{background:linear-gradient(180deg,#eaf4ff,#f5f8fd)}

/* steps */
.hm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.hm-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 28px 28px;text-align:center}
.hm-step:before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800}
.hm-step .hm-ic{margin:0 auto 16px}
.hm-step h3{font-size:18px;margin-bottom:6px}
.hm-step p{margin:0;font-size:15.5px}

/* FAQ */
.hm-faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.hm-faq details{background:#fff;border:1px solid var(--line);border-radius:18px;transition:border-color .2s,box-shadow .2s}
.hm-faq details[open]{border-color:var(--peach2);box-shadow:0 18px 34px -26px rgba(15,42,82,.5)}
.hm-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-weight:800;color:var(--ink);font-size:17px}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary:after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eaf4ff;color:#e11d48;font-size:20px;font-weight:700;transition:transform .2s}
.hm-faq details[open] summary:after{content:"–"}
.hm-faq details p{margin:0;padding:0 24px 22px;font-size:16px}

/* closing CTA */
.hm-cta-band{padding:24px 0 96px}
.hm-cta-box{position:relative;overflow:hidden;border-radius:32px;padding:72px 32px;text-align:center;color:#fff;
  background:radial-gradient(circle at 0 0,rgba(111,125,255,.45),transparent 55%),radial-gradient(circle at 100% 100%,rgba(30,144,255,.55),transparent 55%),linear-gradient(125deg,#0f2a52 0%,#1b3f7a 55%,#3b2f94 100%)}
.hm-cta-box h2{color:#fff;font-size:clamp(30px,4.2vw,48px);margin-bottom:12px}
.hm-cta-box p{color:#d6e0f3;font-size:18px;margin:0 0 30px}
.hm-cta-box .hm-cta{justify-content:center}
.hm-cta-box .hm-btn-main{background:#fff;color:#e11d48;box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
.hm-cta-box .hm-btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hm-cta-box .hm-btn-line:hover{background:rgba(255,255,255,.14);border-color:#fff}

@media (max-width:980px){
  .hm-hero-in{grid-template-columns:1fr;gap:44px}
  .hm-hero{padding:48px 0 64px;text-align:center}
  .hm-hero p.sub{margin-left:auto;margin-right:auto}
  .hm-cta,.hm-note{justify-content:center}
  .hm-grid3,.hm-steps{grid-template-columns:repeat(2,1fr)}
  .hm-row{grid-template-columns:1fr;gap:32px}
  .hm-row.rev .hm-row-tx{order:0}
  .hm-strip-in{grid-template-columns:repeat(2,1fr)}
  .hm-strip-it:nth-child(3){border-left:0}
  .hm-strip-it:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:620px){
  .hm-w{padding:0 18px}
  .hm-sec{padding:64px 0}
  .hm-grid3,.hm-steps{grid-template-columns:1fr}
  .hm-steps{gap:34px}
  .hm-btn{width:100%}
  .hm-frame{border-radius:14px}
  .hm-cta-box{padding:52px 22px;border-radius:24px}
  .hm-row-img{min-height:0;padding:18px}
}
@media (prefers-reduced-motion:reduce){.hm *{transition:none!important}}
.cu main.hm{padding:0;margin:0;max-width:none;width:auto}

/* ---- hero: centred, with a soft pastel glow around the booking demo only ---- */
.hm-hero{background:linear-gradient(180deg,#f2f8ff,#fff 70%);padding:72px 0 40px;text-align:center}
.hm-hero-in{display:block}
.hm-hero p.sub{margin:0 auto 30px}
.hm-cta,.hm-note{justify-content:center}
.hm-stage{position:relative;max-width:1060px;margin:56px auto 0;padding:48px 40px 28px}
.hm-stage:before,.hm-stage:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none}
.hm-stage:before{inset:-6% 48% 18% -10%;background:radial-gradient(circle,rgba(190,150,255,.8),rgba(196,160,255,0) 70%)}
.hm-stage:after{inset:-8% -10% 14% 46%;background:radial-gradient(circle,rgba(120,200,255,.8),rgba(140,208,255,0) 70%)}
.hm-glow3{position:absolute;inset:40% -8% -10% 30%;border-radius:50%;filter:blur(80px);background:radial-gradient(circle,rgba(255,206,140,.7),rgba(255,214,160,0) 70%);z-index:0;pointer-events:none}
.hm-demo{max-width:900px;margin:0 auto}
.hm-demo:before{display:none}
.hm-frame{background:#fff;border:1px solid rgba(15,42,82,.07);box-shadow:0 40px 80px -36px rgba(15,42,82,.4),0 10px 24px -14px rgba(15,42,82,.15)}
.hm-switch{position:relative;z-index:1;display:inline-flex;gap:4px;margin:26px auto 0;padding:5px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid #e6ebf3;font-size:14px;font-weight:700}
.hm-switch span{padding:8px 22px;border-radius:99px;color:#3f5679}
.hm-switch .on{background:#fff;color:#0f2a52;box-shadow:0 2px 8px rgba(15,42,82,.12)}
@media (max-width:620px){.hm-stage{padding:28px 0 12px;margin-top:36px}.hm-stage:before,.hm-stage:after{filter:blur(50px)}}