/* v10 - carry the campaign invite's visual language onto the landing page.
   Palette, wave transition, cyan ring and translucent pill are all sampled
   from the invite artwork so the two read as one campaign. */

:root{
  --inv-navy:#232A66;
  --inv-mid:#23409A;
  --inv-blue:#2059B2;
  --inv-sky:#1E82C6;
  --inv-cyan:#2CA6DC;
  --inv-aqua:#41C4EE;
  --inv-ring:#9DD3DB;
  --inv-paper:#F7F8FB;
  --inv-ink:#17203A;
  --inv-orange:#F47822;
}

/* ---------- the blue field: same gradient ramp as the invite ---------- */
.field.top,
.field.bottom,
.sec.demo{
  background:linear-gradient(105deg,
    var(--inv-navy) 0%, #242C74 22%, var(--inv-mid) 42%,
    var(--inv-blue) 58%, var(--inv-sky) 76%, var(--inv-cyan) 90%, var(--inv-aqua) 100%);
}
.field.bottom{
  background:linear-gradient(285deg,
    var(--inv-navy) 0%, #242C74 22%, var(--inv-mid) 42%,
    var(--inv-blue) 58%, var(--inv-sky) 76%, var(--inv-cyan) 90%, var(--inv-aqua) 100%);
}

/* the invite's faint concentric arcs, low in the field */
.field.top .arcs,
.sec.demo .aura{
  position:absolute;inset:0;pointer-events:none;opacity:1;
  background-image:
    radial-gradient(760px 600px at -6% 108%, rgba(255,255,255,.055), rgba(255,255,255,0) 62%),
    radial-gradient(560px 440px at -2% 104%, rgba(255,255,255,.05), rgba(255,255,255,0) 64%),
    radial-gradient(380px 300px at 2% 100%, rgba(255,255,255,.045), rgba(255,255,255,0) 66%);
}
.field.top .glow i,
.sec.demo .aura i,
.sec.demo .streams{display:none}

/* ---------- wave, not a straight edge, between field and paper ---------- */
.field.top{position:relative;padding-bottom:0}
.field.bottom .glow i{display:none}
.field.top::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px;
  background:var(--inv-paper);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,120 L1200,120 L1200,72 C1010,67 840,60 620,48 C420,37 195,24 0,18 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,120 L1200,120 L1200,72 C1010,67 840,60 620,48 C420,37 195,24 0,18 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
main.paper{background:var(--inv-paper)}

.sec.demo{position:relative;overflow:hidden}
.sec.demo::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:104px;z-index:2;
  background:var(--inv-paper);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 104' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,86 C1010,81 840,74 620,62 C420,51 195,38 0,32 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 104' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,86 C1010,81 840,74 620,62 C420,51 195,38 0,32 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.sec.demo::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:104px;z-index:2;
  background:var(--inv-paper);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 104' preserveAspectRatio='none'><path d='M0,104 L1200,104 L1200,72 C1010,67 840,60 620,48 C420,37 195,24 0,18 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 104' preserveAspectRatio='none'><path d='M0,104 L1200,104 L1200,72 C1010,67 840,60 620,48 C420,37 195,24 0,18 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.field.bottom{position:relative;overflow:hidden;padding-top:96px}
.field.bottom::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:104px;
  background:var(--inv-paper);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 104' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,86 C1010,81 840,74 620,62 C420,51 195,38 0,32 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 104' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,86 C1010,81 840,74 620,62 C420,51 195,38 0,32 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}

/* ---------- speakers: the invite's pale cyan ring ---------- */
.speakers .ring{
  border:4px solid var(--inv-ring);
  box-shadow:0 18px 40px -18px rgba(8,14,46,.42);
  background:#EDF1F6;
}
.speakers .ring img{border-radius:50%}
.spk .rl{color:var(--inv-sky);font-weight:700;letter-spacing:.01em}

/* ---------- meta chips + facts: the invite's translucent pill ---------- */
.bar .meta span,
.field .facts > div{
  background:rgba(171,230,229,.17);
  border:1px solid rgba(210,238,240,.42);
  border-radius:999px;
}
.field .facts > div{padding:12px 22px}
.bar .meta span{padding:7px 16px}
.field .facts dt{color:rgba(255,255,255,.62)}
.field .facts dd,
.bar .meta span{color:#fff}
.field .facts dd.accent{color:#BDE9F5}

/* ---------- buttons ---------- */
.btn{background:var(--inv-orange);border-radius:8px;border:0;
  box-shadow:0 16px 32px -14px rgba(244,120,34,.72)}
.btn:hover{background:#E06A18;box-shadow:0 18px 34px -12px rgba(244,120,34,.85)}
.btn span{color:#fff}

/* ---------- hero tool marks, as on the invite ---------- */
.tools figure{opacity:.95}
.tools img{height:26px;filter:none}
.tools figcaption{font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em}

/* ---------- agent cards on the blue ---------- */
.sec.demo .agents li{
  background:#fff;border:0;border-radius:14px;
  box-shadow:0 30px 60px -32px rgba(6,12,44,.75);
}
.sec.demo .agents h3,
.sec.demo .agents .he{color:var(--inv-ink)}
.sec.demo .agents .desc{color:#4A5670}
.sec.demo .agents .mod{color:var(--inv-sky)}
.sec.demo .agents .n{color:var(--inv-orange)}
.sec.demo .more{color:rgba(255,255,255,.8)}

/* ---------- figures ---------- */
.figures .fig b{color:var(--inv-navy)}
.figures .fig small{color:#6B7A93}

/* ---------- footer lockup ---------- */
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .sapmark{height:26px;width:auto;display:block}

@media (max-width:820px){
  .field.top{padding-bottom:64px}
  .field.top::after,.sec.demo::before,.sec.demo::after,.field.bottom::before{height:64px}
  .field.bottom{padding-top:64px}
}