/* ==========================================================================
   Tecla System — shell, hero, sections
   ========================================================================== */

/* ---------- Utility bar -------------------------------------------------- */
.utility{background:var(--ink-deep);color:rgba(255,255,255,.72);font-size:var(--fs-xs)}
.utility .container{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;min-height:36px}
.utility a{transition:color .15s var(--ease)}
.utility a:hover{color:#fff}
.utility__sep{width:1px;height:14px;background:rgba(255,255,255,.2)}
@media (max-width:1023px){.utility{display:none}}

/* ---------- Header ------------------------------------------------------- */
.header{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--line)}
.header.is-stuck{box-shadow:0 4px 20px rgba(60,51,94,.08)}
.header__inner{display:flex;align-items:center;gap:1.25rem;min-height:var(--header-h)}
.header__logo{flex:none;display:flex;align-items:center}
.header__logo img{height:46px;width:auto}
@media (max-width:600px){.header__logo img{height:38px}}
.header__spacer{flex:1}
.header__cta{display:flex;align-items:center;gap:.6rem;flex:none}
@media (max-width:1023px){.header__cta .btn--outline{display:none}}

/* ---------- Primary nav (desktop) --------------------------------------- */
.nav{display:flex;align-items:center;gap:.15rem}
@media (max-width:1023px){.nav{display:none}}

.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem .8rem;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:500;color:var(--ink);
  transition:background .15s var(--ease),color .15s var(--ease);cursor:pointer;
  background:none;border:0;white-space:nowrap;
}
/* Tighten the bar between 1024 and 1200 so nothing wraps to a second line */
@media (min-width:1024px) and (max-width:1199px){
  .nav__link{padding:.6rem .55rem;font-size:var(--fs-xs)}
  .header__logo img{height:40px}
  .header__inner{gap:.75rem}
}
.nav__link:hover,.nav__item.is-open .nav__link{background:var(--sand-lite);color:var(--ink-deep)}
.nav__link[aria-current="page"]{color:var(--pillar-ink);font-weight:700}
.nav__caret{width:9px;height:9px;transition:transform .2s var(--ease);flex:none}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}

.mega{
  /* Anchored to the LEFT edge of its nav item and opening rightwards. Centring it
     on the trigger (the previous behaviour) pushed the 920px Products panel off
     the left of the screen between 1024 and 1280px. */
  position:absolute;top:calc(100% + 10px);left:0;right:auto;transform:translateY(-6px);
  max-width:calc(100vw - 2rem);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:1.5rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  z-index:950;
}
.nav__item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* The last menu sits close to the right edge, so it opens leftwards instead. */
.nav .nav__item:last-of-type .mega{left:auto;right:0}
/* The Products panel is 920px wide — too wide to hang off its own nav item without
   running past the right edge below 1280px. It is anchored to the page container
   instead, which keeps it inside the gutters at every width. */
.header__inner{position:relative}
.nav__item[data-menu="products"]{position:static}
.mega--products{width:min(920px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;left:0}
.mega--solutions{width:min(680px,92vw);display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem 1.5rem}
.mega--company{width:min(300px,92vw);display:grid;gap:.2rem}

.mega__col-head{
  display:flex;align-items:center;gap:.5rem;padding-bottom:.6rem;margin-bottom:.5rem;
  border-bottom:2px solid var(--pillar);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.mega__col-head small{
  margin-left:auto;font-size:10px;letter-spacing:.06em;font-weight:500;color:var(--muted);text-transform:none;
}
.mega__link{display:block;padding:.55rem .6rem;border-radius:var(--r-sm);transition:background .14s var(--ease)}
.mega__link:hover{background:var(--sand-lite)}
.mega__link strong{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
/* Direct child only: the "Flagship" badge is also a <span>, nested inside the
   <strong>, and display:block was stretching it across the whole column. */
.mega__link > span{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.45;margin-top:.1rem}
.mega__link .badge{margin-left:.4rem;vertical-align:middle}
.mega__foot{
  grid-column:1/-1;margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}

/* ---------- Mobile drawer ------------------------------------------------ */
.burger{
  display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative;transition:background .15s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);
  transition:transform .2s var(--ease),top .2s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1023px){.burger{display:flex}}

.drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:880;background:#fff;
  overflow-y:auto;overscroll-behavior:contain;padding:1.25rem var(--gutter) 3rem;
  transform:translateX(100%);transition:transform .28s var(--ease);visibility:hidden;
}
.drawer.is-open{transform:none;visibility:visible}
@media (min-width:1024px){.drawer{display:none}}

.drawer__group{border-bottom:1px solid var(--line)}
.drawer__toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;background:none;border:0;cursor:pointer;
  font-size:var(--fs-lg);font-weight:500;color:var(--ink);text-align:left;
}
.drawer__toggle .nav__caret{width:12px;height:12px}
.drawer__toggle[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
.drawer__panel{display:none;padding-bottom:1rem}
.drawer__panel.is-open{display:block}
.drawer__sub{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pillar-ink);margin:1rem 0 .35rem;
}
.drawer__link{display:block;padding:.6rem .75rem;border-left:2px solid var(--line);color:var(--ink-soft);font-size:var(--fs-sm)}
.drawer__link:hover{border-color:var(--pillar);color:var(--ink);background:var(--sand-lite)}
.drawer__cta{margin-top:1.75rem;display:grid;gap:.6rem}

/* ---------- Hero --------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;background:var(--blend-c);color:#fff;
  padding-block:clamp(3.5rem,8vw,7rem);
}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--tex-light);opacity:.55;z-index:0}
.hero > *{position:relative;z-index:2}
.hero__deco{
  position:absolute;right:-8%;top:-14%;width:min(720px,62%);z-index:1;opacity:.28;
  pointer-events:none;
}
@media (max-width:1023px){.hero__deco{right:-25%;top:auto;bottom:-8%;width:120%;opacity:.32}}
.hero h1{font-size:var(--fs-4xl);color:#fff;max-width:17ch}
.hero .lede{max-width:52ch;margin-top:var(--sp-5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.hero__note{margin-top:var(--sp-5);font-size:var(--fs-xs);color:rgba(255,255,255,.6)}

/* page hero (inner pages) */
.phero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-block:clamp(2.75rem,6vw,5rem)}
.phero::before{content:"";position:absolute;inset:0;background-image:var(--tex-light);opacity:.75}
.phero > *{position:relative;z-index:1}
.phero h1{font-size:var(--fs-3xl);color:#fff;max-width:20ch}
.phero .lede{max-width:60ch;margin-top:var(--sp-4)}

/* product hero */
.prodhero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-block:clamp(2.75rem,6vw,5rem)}
.prodhero::before{content:"";position:absolute;inset:0;background-image:var(--tex-light);opacity:.7}
.prodhero::after{
  content:"";position:absolute;inset:auto -10% -55% 45%;height:120%;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pillar) 42%,transparent),transparent 72%);
  pointer-events:none;
}
.prodhero > *{position:relative;z-index:1}
.prodhero__logo{height:64px;width:auto;margin-bottom:var(--sp-5)}
@media (max-width:600px){.prodhero__logo{height:52px}}
.prodhero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center}
/* Product heroes with no screenshot yet: one column, with the measure capped so
   the text does not run the full width of the page. */
.prodhero__grid--solo{grid-template-columns:1fr}
.prodhero__grid--solo > div{max-width:68ch}
@media (max-width:1023px){.prodhero__grid{grid-template-columns:1fr}}

/* ---------- Breadcrumb --------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:var(--fs-xs);margin-bottom:var(--sp-5)}
.crumbs a{color:rgba(255,255,255,.62)}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(255,255,255,.42)}
.crumbs [aria-current]{color:rgba(255,255,255,.9)}

/* ---------- Proof band --------------------------------------------------- */
.proof{border-bottom:1px solid var(--line);background:#fff;padding-block:var(--sp-6)}
.proof__head{
  text-align:center;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-5);
}

/* ---------- Pillars (Capture · Discover · Monetise) --------------------- */
.pillars{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(3,1fr)}
@media (max-width:767px){.pillars{grid-template-columns:1fr}}

.pillar{
  position:relative;padding:clamp(2rem,4vw,3rem) clamp(1.25rem,2.5vw,2rem) clamp(3rem,5vw,4rem);
  color:#fff;background:var(--pillar);
  clip-path:polygon(0 0, 50% 13%, 100% 0, 100% 87%, 50% 100%, 0 87%);
  transition:transform .25s var(--ease);
}
.pillar:hover{transform:translateY(-4px)}
.pillar[data-pillar="capture"]{background:var(--purple)}
.pillar[data-pillar="discover"]{background:var(--coral);color:var(--ink-deep)}
.pillar[data-pillar="monetise"]{background:var(--yellow);color:var(--ink-deep)}
.pillar__n{
  font-family:var(--font-serif);font-size:var(--fs-2xl);line-height:1;display:block;
  margin-top:clamp(.5rem,1.5vw,1rem);
}
.pillar__sub{font-size:var(--fs-lg);font-weight:300;opacity:.92;margin-top:.2rem}
.pillar__list{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:.4rem}
.pillar__list li{
  font-size:var(--fs-xs);font-weight:500;padding:.24rem .58rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.20);
}
.pillar[data-pillar="monetise"] .pillar__list li,
.pillar[data-pillar="discover"] .pillar__list li{background:rgba(60,51,94,.15)}

/* product span bars, mirroring the brand diagram */
.spans{margin-top:clamp(1.5rem,3vw,2.5rem);display:grid;gap:.6rem}
.span-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1rem;align-items:center}
@media (max-width:767px){.span-row{grid-template-columns:1fr;gap:.4rem}}
.span-row__label{display:flex;align-items:center;gap:.5rem}
.span-row__label img{height:30px;width:auto}
.span-row__track{position:relative;height:16px;border-radius:8px;background:var(--sand);overflow:hidden}
.span-row__bar{
  position:absolute;top:0;bottom:0;border-radius:8px;
  left:calc(var(--from) * 33.333%);right:calc((3 - var(--to)) * 33.333%);
}
.span-row__bar[data-from="capture"]{background:linear-gradient(90deg,var(--purple),var(--coral) 48%,var(--yellow))}
.span-row__bar[data-from="discover"]{background:linear-gradient(90deg,var(--coral),var(--yellow))}
.span-row__bar[data-from="monetise"]{background:var(--yellow)}
.span-row__note{font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem}

/* ---------- Flagship spotlight ------------------------------------------ */
.flagship{position:relative;overflow:hidden;background:var(--ink-deep);color:rgba(255,255,255,.82)}
.flagship::before{content:"";position:absolute;inset:0;background-image:var(--tex-light);opacity:.8}
.flagship::after{
  content:"";position:absolute;width:70%;height:150%;right:-20%;top:-30%;
  background:radial-gradient(closest-side,rgba(120,163,252,.34),transparent 70%);pointer-events:none;
}
.flagship > *{position:relative;z-index:1}

/* ---------- CTA band ----------------------------------------------------- */
.ctaband{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:var(--ink) url('../img/brand/mesh-gradient.jpg') center/cover no-repeat;
}
.ctaband::before{content:"";position:absolute;inset:0;background:rgba(46,39,73,.62)}
.ctaband > *{position:relative;z-index:1}
.ctaband h2{color:#fff;max-width:20ch;margin-inline:auto}
.ctaband .lede{max-width:56ch;margin:var(--sp-4) auto 0}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:var(--sp-6)}

/* ---------- Events ------------------------------------------------------- */
.event-card{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.25rem;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.25rem,2.4vw,1.6rem);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.event-card:hover{border-color:var(--coral);box-shadow:var(--shadow-2)}
@media (max-width:479px){.event-card{grid-template-columns:1fr}}
.event-date{
  text-align:center;border-radius:var(--r-sm);padding:.7rem .4rem;
  background:var(--sand);color:var(--ink);
}
.event-date b{display:block;font-family:var(--font-serif);font-size:1.65rem;line-height:1}
.event-date span{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:.15rem}
.event-date small{display:block;font-size:11px;color:var(--muted);margin-top:.1rem}
.event-card h3{font-size:var(--fs-lg);font-weight:700}
.event-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:var(--fs-sm);color:var(--muted);margin-top:.4rem}
.event-card__next{border-color:var(--coral);border-width:2px}

/* ---------- Footer ------------------------------------------------------- */
.footer{background:var(--ink-deep);color:rgba(255,255,255,.66);padding-block:clamp(3rem,6vw,4.5rem) 0;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;background-image:var(--tex-light);opacity:.5}
.footer > *{position:relative;z-index:1}
.footer a{transition:color .15s var(--ease)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1.4fr repeat(3,1fr)}
@media (max-width:1023px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer__grid{grid-template-columns:1fr}}
.footer__logo{height:90px;width:auto;margin-bottom:var(--sp-5)}
.footer h4{
  color:#fff;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:var(--sp-4);
}
.footer li{margin-bottom:.55rem;font-size:var(--fs-sm)}
.footer address{font-style:normal;font-size:var(--fs-sm);line-height:1.75}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:var(--fs-xs);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer__social{display:flex;gap:.6rem}
.footer__social a{
  width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
}
.footer__social a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32)}
.footer__social svg{width:16px;height:16px;fill:currentColor}

/* ---------- Dark-surface text (contrast) --------------------------------
   Any section painted on ink/gradient inherits light copy, so a stray
   .lede or .muted can never fall back to the dark-on-dark defaults. */
.hero, .phero, .prodhero, .flagship, .ctaband, .section--ink, .footer{ color-scheme:dark }
.hero p, .phero p, .prodhero p, .flagship p, .ctaband p, .section--ink p{color:rgba(255,255,255,.84)}
.hero .lede, .phero .lede, .prodhero .lede, .flagship .lede, .ctaband .lede, .section--ink .lede{color:rgba(255,255,255,.92)}
.hero .muted, .phero .muted, .prodhero .muted, .flagship .muted, .ctaband .muted, .section--ink .muted{color:rgba(255,255,255,.66)}
.hero h1,.hero h2,.hero h3, .phero h1, .prodhero h1, .flagship h2, .flagship h3,
.ctaband h2, .section--ink h2, .section--ink h3, .section--ink h4{color:#fff}
.hero .eyebrow, .flagship .eyebrow, .ctaband .eyebrow, .section--ink .eyebrow, .prodhero .eyebrow{color:var(--pillar-lite)}
.hero .eyebrow::before, .flagship .eyebrow::before, .ctaband .eyebrow::before,
.section--ink .eyebrow::before, .prodhero .eyebrow::before{background:var(--pillar-lite)}
.prodhero h1{font-size:var(--fs-3xl);color:#fff}
.hero .eyebrow{color:var(--blue)}
.hero .eyebrow::before{background:var(--blue)}
.flagship strong, .section--ink strong, .ctaband strong{color:#fff}

/* ---------- Spec table --------------------------------------------------- */
.specs{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.specs caption{text-align:left;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding-bottom:.85rem}
.specs th,.specs td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{width:34%;color:var(--ink);font-weight:700;white-space:nowrap}
.specs td{color:var(--muted)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
@media (max-width:600px){
  .specs th,.specs td{display:block;width:auto;white-space:normal}
  .specs th{border-bottom:0;padding-bottom:.15rem}
  .specs td{padding-top:0}
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Deployment strip -------------------------------------------- */
.deploy{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
@media (max-width:767px){.deploy{grid-template-columns:1fr}}
.deploy > div{background:#fff;padding:clamp(1.25rem,2.5vw,1.75rem)}
.deploy h3{font-size:var(--fs-base);font-weight:700;margin-bottom:.35rem}
.deploy p{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- Zig-zag capability rows ------------------------------------- */
.zig{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr 1fr;
  padding-block:clamp(2rem,4vw,3.25rem)}
.zig + .zig{border-top:1px solid var(--line)}
.zigs .zig:nth-child(even):not(.zig--split) .zig__text{order:2}
.zig--solo{grid-template-columns:1fr}
.zig--solo .zig__text{max-width:68ch}
@media (max-width:900px){
  .zig{grid-template-columns:1fr}
  .zigs .zig:nth-child(even):not(.zig--split) .zig__text{order:0}
}
.zig__text h3{font-size:var(--fs-2xl);margin-bottom:var(--sp-4)}
.zig__num{font-family:var(--font-serif);font-size:var(--fs-xl);color:var(--pillar-ink);
  display:block;margin-bottom:.35rem}

/* ---------- Integration columns ----------------------------------------- */
.integrations{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:1023px){.integrations{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.integrations{grid-template-columns:1fr}}
.integrations h3{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);padding-bottom:.6rem;margin-bottom:.75rem;border-bottom:2px solid var(--pillar)}
.integrations li{font-size:var(--fs-sm);color:var(--muted);padding:.28rem 0}

/* ---------- Related products -------------------------------------------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:767px){.related{grid-template-columns:1fr}}

/* ---------- Notice / disclosure box ------------------------------------- */
.notice{border-left:3px solid var(--pillar);background:var(--sand-lite);
  padding:1.1rem 1.35rem;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-sm)}
.notice strong{color:var(--ink)}

/* ---------- Plan comparison --------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,1.75rem)}
@media (max-width:767px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.25rem);background:#fff;position:relative;overflow:hidden}
.plan--featured{border-color:var(--yellow);border-width:2px;box-shadow:var(--shadow-2)}
.plan--featured::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--blend-d)}
.plan__name{font-family:var(--font-serif);font-size:var(--fs-2xl);color:var(--ink);line-height:1}
.plan__for{font-size:var(--fs-sm);color:var(--muted);margin-top:.35rem}
.plan__list{margin-top:var(--sp-5)}
.plan__list li{display:flex;gap:.7rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.plan__list li:last-child{border-bottom:0}
.plan__list b{color:var(--ink);flex:none;min-width:8.5rem}
.plan__list span{color:var(--muted)}

/* ---------- People / team ----------------------------------------------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
@media (max-width:767px){.roles{grid-template-columns:1fr}}
.roles > div{background:#fff;padding:clamp(1.1rem,2.2vw,1.5rem)}
.roles h3{font-size:var(--fs-base);font-weight:700;margin-bottom:.2rem}
.roles p{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- Partner groups ----------------------------------------------- */
.pgroup{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.75rem,3vw,2.5rem);align-items:start}
.pgroup + .pgroup{border-top:1px solid var(--line)}
@media (max-width:767px){.pgroup{grid-template-columns:1fr;gap:1rem}}
.pgroup h3{font-size:var(--fs-lg);font-weight:700}
.pgroup p{font-size:var(--fs-sm);color:var(--muted);margin-top:.3rem}
.pgroup ul{display:flex;flex-wrap:wrap;gap:.5rem}
.pgroup li{border:1px solid var(--line);border-radius:var(--r-sm);padding:.45rem .85rem;
  font-size:var(--fs-sm);font-weight:500;color:var(--ink);background:#fff}

/* ---------- Form pages ---------------------------------------------------- */
.formgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.formgrid{grid-template-columns:1fr}}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.5vw,2.5rem);box-shadow:var(--shadow-1)}
.fieldset{border:0;padding:0;margin:0}
.fieldset legend{font-size:var(--fs-sm);font-weight:700;color:var(--ink);padding:0;margin-bottom:.6rem}
.checkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}
@media (max-width:520px){.checkgrid{grid-template-columns:1fr}}
.checkgrid label{display:flex;gap:.6rem;align-items:center;font-size:var(--fs-sm);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.55rem .7rem;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.checkgrid label:hover{border-color:var(--pillar);background:var(--sand-lite)}
.checkgrid input{width:16px;height:16px;flex:none;accent-color:var(--ink)}
.checkgrid input:checked + span{font-weight:700;color:var(--ink)}
.contact-list li{display:flex;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.contact-list li:last-child{border-bottom:0}
.contact-list b{min-width:7rem;flex:none;color:var(--ink)}

/* ---------- Legal / long-form prose -------------------------------------- */
.prose{max-width:70ch}
.prose h2{font-size:var(--fs-xl);margin:clamp(2rem,4vw,2.75rem) 0 .75rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-base);font-weight:700;margin:1.5rem 0 .4rem}
.prose p{color:var(--ink-soft)}
.prose blockquote{margin:1rem 0;padding-left:1.25rem;border-left:3px solid var(--pillar);color:var(--muted)}
.prose ul{list-style:disc;padding-left:1.25rem;margin:.5rem 0 1rem}
.prose li{margin-bottom:.4rem;color:var(--ink-soft)}
.prose a{color:var(--pillar-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ---------- Inner-page hero decoration ---------------------------------- */
.phero::after{
  content:"";position:absolute;right:-4%;top:-22%;width:min(560px,44%);aspect-ratio:1039/1007;
  background:url('../img/brand/pattern-white.svg') no-repeat center/contain;
  opacity:.2;pointer-events:none;z-index:0;
}
@media (max-width:900px){.phero::after{display:none}}

/* Separator between event meta items */
.event-meta span + span::before{content:"·";margin-right:.75rem;color:var(--wgray-3)}

/* ---------- Key-feature checklist --------------------------------------- */
.keyfeatures{columns:3;column-gap:clamp(1.5rem,3vw,3rem)}
@media (max-width:1023px){.keyfeatures{columns:2}}
@media (max-width:640px){.keyfeatures{columns:1}}
.keyfeatures li{
  break-inside:avoid;display:flex;gap:.65rem;padding:.5rem 0;
  font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5;
}
.keyfeatures li::before{
  content:"";flex:none;width:10px;height:10px;margin-top:.42rem;background:var(--pillar);
  clip-path:polygon(0 0,50% 32%,100% 0,100% 68%,50% 100%,0 68%);
}
.kf-group{margin-bottom:1.75rem;break-inside:avoid}
.kf-group h3{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pillar-ink);padding-bottom:.5rem;margin-bottom:.35rem;border-bottom:1px solid var(--line);
}

/* ---------- Screenshot gallery ------------------------------------------ */
.gallery{display:grid;gap:clamp(1.25rem,3vw,2.25rem)}
.gallery--1{grid-template-columns:1fr}
.gallery--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.gallery--2{grid-template-columns:1fr}}
.gallery figure{margin:0}
.gallery figcaption{margin-top:.85rem;font-size:var(--fs-sm);color:var(--muted);max-width:60ch}
.gallery figcaption strong{display:block;color:var(--ink);font-weight:700;margin-bottom:.15rem}
.gallery--wide{grid-template-columns:1fr}
.gallery--wide .shot-frame{box-shadow:var(--shadow-3)}

/* Hero screenshot gets room to breathe */
.prodhero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.prodhero .shot-frame{transform:perspective(1600px) rotateY(-2.5deg)}
@media (max-width:1023px){.prodhero .shot-frame{transform:none}}

/* ---------- Spec table: grouped ----------------------------------------- */
.specs tbody th[colspan]{
  background:var(--sand-lite);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--pillar-ink);padding-top:1.1rem;padding-bottom:.6rem;white-space:normal;width:auto;
}

/* ---------- Event archive ------------------------------------------------ */
.event-year + .event-year{margin-top:clamp(1.75rem,3vw,2.5rem)}
.event-year__n{
  font-family:var(--font-serif);font-size:var(--fs-xl);color:var(--pillar-ink);
  padding-bottom:.5rem;margin-bottom:.35rem;border-bottom:2px solid var(--pillar);
}
.event-rows li{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr) 120px;
  gap:1rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
}
.event-row__name{font-weight:700;color:var(--ink)}
.event-row__where,.event-row__city{color:var(--muted)}
.event-row__when{color:var(--muted);text-align:right;white-space:nowrap}
@media (max-width:767px){
  .event-rows li{grid-template-columns:1fr auto;gap:.15rem 1rem}
  .event-row__name{grid-column:1}
  .event-row__when{grid-column:2;grid-row:1;text-align:right}
  .event-row__where{grid-column:1/-1}
  .event-row__city{grid-column:1/-1}
}

/* Capability row with no screenshot: heading left, prose right, full width used */
.zig--split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.zig--split .zig__text{max-width:none}
.zig--split .zig__body p{color:var(--muted)}
.zig--split .zig__body > *:first-child{margin-top:0}
@media (max-width:900px){.zig--split{grid-template-columns:1fr}}

/* ---------- "Is / is not" comparison ------------------------------------ */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.75rem)}
@media (max-width:860px){.vs{grid-template-columns:1fr}}
.vs__col{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.vs__col--is{border-color:var(--pillar);border-width:2px}
.vs__head{
  padding:.85rem 1.15rem;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--ink);
}
.vs__col--is .vs__head{background:var(--pillar);color:var(--ink-deep)}
.vs__col ul{padding:1.15rem}
.vs__col li{display:flex;gap:.7rem;padding:.55rem 0;font-size:var(--fs-sm);line-height:1.55}
.vs__col li + li{border-top:1px solid var(--line)}
.vs__col li b{color:var(--ink);display:block}
.vs__col li span{color:var(--muted)}
.vs__col li::before{content:"";flex:none;width:10px;height:10px;margin-top:.42rem;background:var(--wgray-3);
  clip-path:polygon(0 0,50% 32%,100% 0,100% 68%,50% 100%,0 68%)}
.vs__col--is li::before{background:var(--pillar)}

/* ---------- Asset hierarchy --------------------------------------------- */
.hier{counter-reset:h;display:grid;gap:0}
.hier li{
  counter-increment:h;display:grid;grid-template-columns:auto minmax(0,200px) minmax(0,1fr);
  gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.hier li:last-child{border-bottom:0}
@media (max-width:700px){.hier li{grid-template-columns:auto minmax(0,1fr)} .hier li p{grid-column:2}}
.hier li::before{
  content:counter(h);font-family:var(--font-serif);font-size:var(--fs-lg);color:var(--pillar-ink);
  min-width:1.4rem;
}
.hier b{color:var(--ink);font-size:var(--fs-base)}
.hier p{color:var(--muted);font-size:var(--fs-sm);margin:0}
.hier li:nth-child(n+2) b{padding-left:0}

/* ---------- Four-pillar cards -------------------------------------------- */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
@media (max-width:767px){.quad{grid-template-columns:1fr}}
.quad > div{background:#fff;padding:clamp(1.25rem,2.5vw,1.85rem)}
.quad__n{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pillar-ink);display:block;margin-bottom:.35rem;
}
.quad h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:.6rem}
.quad li{display:flex;gap:.6rem;padding:.35rem 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
.quad li::before{content:"";flex:none;width:9px;height:9px;margin-top:.42rem;background:var(--pillar);
  clip-path:polygon(0 0,50% 32%,100% 0,100% 68%,50% 100%,0 68%)}

/* ---------- Technology stack rows ---------------------------------------- */
.stack{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.stack__row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.stack__row:last-child{border-bottom:0}
@media (max-width:700px){.stack__row{grid-template-columns:1fr;gap:.25rem}}
.stack__k{font-weight:700;color:var(--ink);font-size:var(--fs-sm)}
.stack__k small{display:block;font-weight:500;color:var(--pillar-ink);font-size:var(--fs-xs);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem}
.stack__v{color:var(--muted);font-size:var(--fs-sm)}

/* ---------- AI workflow scenarios ---------------------------------------- */
.scenario{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.scenario:hover{border-color:var(--pillar);box-shadow:var(--shadow-1)}
.scenario + .scenario{margin-top:clamp(1rem,2vw,1.5rem)}
.scenario__head{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:baseline;
  padding:clamp(1.1rem,2.2vw,1.5rem);border-bottom:1px solid var(--line);background:var(--sand-lite);
}
.scenario__n{font-family:var(--font-serif);font-size:var(--fs-xl);color:var(--pillar-ink);line-height:1}
.scenario__head h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.scenario__who{
  font-size:var(--fs-xs);color:var(--muted);margin-top:.3rem;letter-spacing:.02em;
}
.scenario__body{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,2rem);
  padding:clamp(1.1rem,2.2vw,1.6rem);
}
@media (max-width:820px){.scenario__body{grid-template-columns:1fr}}
.scenario__body h4{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.4rem;
}
.scenario__body p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.scenario__body > div + div{margin-top:0}
.scenario__col > div + div{margin-top:1.1rem}
.scenario__body ul li{
  display:flex;gap:.6rem;padding:.3rem 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.55;
}
.scenario__body ul li::before{
  content:"";flex:none;width:9px;height:9px;margin-top:.42rem;background:var(--pillar);
  clip-path:polygon(0 0,50% 32%,100% 0,100% 68%,50% 100%,0 68%);
}
.scenario__body ul li b{color:var(--ink);font-weight:700}
.scenario__body ul li > span{min-width:0}
.scenario__out{
  margin-top:1.1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);
  background:var(--green-4);border-left:3px solid var(--green);
}
.scenario__out h4{color:#155F4A}
.scenario__out p{color:#1C6B54}

.cat-head{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:.75rem;margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
  border-bottom:2px solid var(--pillar);
}
.cat-head h2{font-size:var(--fs-2xl)}
.cat-head span{font-size:var(--fs-sm);color:var(--muted);margin-left:auto}

/* ---------- Addressed markets -------------------------------------------- */
.markets{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.2vw,1.5rem)}
@media (max-width:860px){.markets{grid-template-columns:1fr}}
.market{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;height:100%;
  display:flex;flex-direction:column;
}
.market__head{
  padding:1rem 1.15rem;border-bottom:1px solid var(--line);background:var(--sand-lite);
}
.market__head h3{font-size:var(--fs-base);font-weight:700;letter-spacing:-.005em}
.market__body{padding:1.15rem;display:grid;gap:.9rem}
.market__body h4{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pillar-ink);margin-bottom:.25rem;
}
.market__body p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.market__value{
  margin-top:auto;padding:.9rem 1.15rem;background:var(--sand-lite);border-top:1px solid var(--line);
}
.market__value h4{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.25rem;
}
.market__value p{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55}

/* ---------- Numbered capability blocks (solutions) ----------------------- */
.wf{display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:1fr 1fr}
@media (max-width:860px){.wf{grid-template-columns:1fr}}
.wf__item{border-left:3px solid var(--pillar);padding:.15rem 0 .15rem 1.15rem}
.wf__item h3{font-size:var(--fs-base);font-weight:700;margin-bottom:.35rem}
.wf__item p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}

/* ---------- Customer logo wall ------------------------------------------ */
/* Logos arrive as SVG and PNG, in different colours and proportions. Normalise
   them optically: cap the height, desaturate, and let colour back in on hover
   so the row reads as one band rather than a scrapbook. */
.logo-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(2rem,5vw,4.5rem);
}
.logo-wall img{
  height:clamp(26px,3.2vw,38px);width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:opacity .2s var(--ease),filter .2s var(--ease);
}
.logo-wall img:hover{filter:grayscale(0);opacity:1}
/* DAZN's corporate mark is a square badge, not a wordmark: at the same height
   it reads much heavier than the others, so it is scaled down to match. */
.logo-wall img[src$="dazn.png"]{height:clamp(24px,2.9vw,34px)}
@media (prefers-reduced-motion:reduce){.logo-wall img{transition:none}}