/* Utility layer recovered from the design-tool runtime.
 *
 * PROVENANCE: these rules were shipped by `support.js` (the DC runtime), not by the
 * prototypes' own <style> blocks. Dropping that runtime — correct, it bundles React
 * to render <x-dc> — silently took this stylesheet with it, so every element using
 * these atomic classes lost its styling while still carrying the class attribute.
 *
 * What that broke, before this was restored:
 *   - homepage hero CTAs sat flush against each other  (.fx .ac .gap12 .wrap)
 *   - homepage "Who we are" image lost its top margin  (.mt16)
 *   - the footer read "Privacy PolicyTerms of Service" on ALL pages (.fx .gap16)
 *
 * Copied verbatim so the design values stay exact. Emitted FIRST in global.css so
 * the design's own semantic rules win any genuine collision.
 *
 * NOTE ON `.wrap`: the prototypes ALSO define `.wrap` as the page container
 * (max-width/margin/padding). The two are complementary, not competing — different
 * properties — so both apply, exactly as they did in the prototype. Do not "fix"
 * this by renaming either one.
 */

/* layout */
.fx { display: flex }
.col { display: flex; flex-direction: column }
.grid { display: grid }
.ac { align-items: center }
.jc { justify-content: center }
.jb { justify-content: space-between }
.f1 { flex: 1 }
.noshrink { flex-shrink: 0 }
.wrap { flex-wrap: wrap }

/* type */
.fw5 { font-weight: 500 }
.fw6 { font-weight: 600 }
.fw7 { font-weight: 700 }
.fw8 { font-weight: 800 }
.fs11 { font-size: 11px }
.fs12 { font-size: 12px }
.fs13 { font-size: 13px }
.fs14 { font-size: 14px }
.fs15 { font-size: 15px }
.fs16 { font-size: 16px }
.fs20 { font-size: 20px }
.fs22 { font-size: 22px }
.upper { text-transform: uppercase }
.tc { text-align: center }
.nowrap { white-space: nowrap }

/* spacing */
.gap8 { gap: 8px }
.gap10 { gap: 10px }
.gap12 { gap: 12px }
.gap16 { gap: 16px }
.gap24 { gap: 24px }
.m0 { margin: 0 }
.mt8 { margin-top: 8px }
.mt12 { margin-top: 12px }
.mt16 { margin-top: 16px }
.mb8 { margin-bottom: 8px }
.mb12 { margin-bottom: 12px }
.mb16 { margin-bottom: 16px }

/* misc */
.posrel { position: relative }
.posabs { position: absolute }
.round { border-radius: 50% }
.ohide { overflow: hidden }
.bbox { box-sizing: border-box }
.pointer { cursor: pointer }
.w100 { width: 100% }
.b0 { border: none }


/* Shared across every page. Extracted from the .dc.html prototypes -
   design values are carried over verbatim. */
body{margin:0;background:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#101a2e}
a{color:#7b4e8f;text-decoration:none}
a:hover{color:#5a3a6d}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.si{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
.navi{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px}
.nlinks{display:flex;gap:2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nlink{color:#55607a;padding:9px 14px;border-radius:999px}
.nlink:hover{color:#101a2e;background:#f2eef8}
.non{color:#7b4e8f}
.logoimg{height:42px;display:block;background:#fff;border-radius:10px;padding:4px 10px;box-sizing:border-box}
.navcta{display:inline-flex;align-items:center;gap:10px;background:#101a2e;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:7px 8px 7px 20px;cursor:pointer;transition:transform .2s}
.navcta:hover{transform:translateY(-1px);color:#fff}
.navctai{width:38px;height:38px;border-radius:50%;background:#c9a8dc;color:#101a2e;display:flex;align-items:center;justify-content:center}
.navctai svg{width:18px;height:18px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:0;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.pillg{background:transparent;color:#e6ddf0}
.pillg .spark{display:none}
.pillw{background:transparent;color:#7b4e8f}
.pillw .spark{display:none}
.spark{color:#c9a8dc;font-size:12px}
.ihero{position:relative;background:transparent;color:#101a2e;padding:64px 0 40px;overflow:hidden}
.hglow{display:none}
.ih1{font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:22px 0 16px;color:#101a2e}
.ih1 .si{color:#7b4e8f;font-weight:400}
.ilead{font-size:15.5px;line-height:1.75;color:#55607a;max-width:640px;margin:0}
.ihero .pillg{background:transparent;color:#7b4e8f}
.ihero .btnw{background:#c9a8dc;color:#221233}
.sec{padding:88px 0}
.ch{text-align:center;max-width:720px;margin:0 auto}
.h2{font-size:38px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:14px 0 16px}
.h2 .si{font-weight:400;color:#7b4e8f}
.acc{color:#7b4e8f}
.lead{font-size:14.5px;line-height:1.8;color:#55607a;margin:0 0 14px}
.vline{width:1px;height:52px;background:#ddd7cb;margin:28px auto 0}
.btnp{display:inline-flex;align-items:center;gap:10px;background:#c9a8dc;color:#221233;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;border-radius:999px;cursor:pointer;transition:transform .2s}
.btnp:hover{transform:translateY(-1px);color:#221233}
.btnw{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#101a2e;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:13px 24px;border-radius:999px;cursor:pointer;transition:transform .2s}
.btnw:hover{transform:translateY(-1px);color:#101a2e}
.gsec{position:relative;overflow:hidden;background:#101a2e;color:#fff;padding:80px 0;border-radius:28px;margin:0 20px}
.gsec .h2{color:#fff}
.gsec .h2 .si{color:#e0c8ef}
.gsec .lead{color:rgba(255,255,255,.78)}
.gsec .vline{background:rgba(255,255,255,.2)}
.nacc{color:#c9a8dc}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:36px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #ddd7cb;background:#fff;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700;color:#101a2e}
.softsec{background:#faf7f0}
.foot{background:#101a2e;padding:64px 0 28px;color:#9aa4ba;border-radius:28px 28px 0 0;margin:80px 20px 0}
.fgrid{display:grid;grid-template-columns:.7fr .8fr 1fr 1.3fr;gap:44px}
.fh{color:#fff;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.flink{color:#9aa4ba}
.flink:hover{color:#c9a8dc}
.foot .logoimg{background:transparent;border-radius:0;padding:0;filter:grayscale(1) brightness(0) invert(1);opacity:.9}
.subh{font-family:'Instrument Serif',serif;font-size:24px;line-height:1.25;color:#fff;margin:22px 0 18px}
.subh .si{color:#e0c8ef}
.ccin{display:flex;gap:6px;background:#fff;border-radius:999px;padding:5px 5px 5px 16px;align-items:center;max-width:320px}
.ccfield{border:none;outline:none;flex:1;font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;color:#101a2e;min-width:0;background:transparent}
.ccbtn{width:36px;height:36px;border-radius:50%;background:#c9a8dc;color:#221233;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.ccbtn:hover{background:#d8bce7}
.ccbtn svg{width:15px;height:15px}
.fcont{display:flex;flex-direction:column;gap:12px;font-size:13.5px}
.fcl{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.fcl svg{width:15px;height:15px;color:currentColor;flex:none;margin-top:2px}
.socials{display:flex;gap:10px;margin-top:18px}
.soc{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;cursor:pointer}
.soc:hover{color:#c9a8dc;border-color:#c9a8dc}
.fnote{font-size:11.5px;line-height:1.65;color:#6b7690;margin-top:44px}
.fbar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;margin-top:16px;font-size:12px;color:#7d88a0}
.fbl{color:#7d88a0}
.fbl:hover{color:#c9a8dc}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
/* ---- mobile nav (hamburger + full-screen panel) ---- */
.burger{display:none;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:44px;height:44px;padding:0;background:none;border:none;border-radius:0;cursor:pointer}
.burger:hover .bl{background:#7b4e8f}
.bl{display:block;width:18px;height:2px;border-radius:2px;background:#101a2e}
.mscrim{position:fixed;inset:0;z-index:199;background:rgba(16,26,46,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .38s ease,visibility .38s ease;cursor:pointer}
.mscrim.open{opacity:1;visibility:visible}
.mnav{position:fixed;top:0;right:0;bottom:0;z-index:200;display:flex;flex-direction:column;width:60%;min-width:290px;padding:20px 30px 48px;box-sizing:border-box;background:#101a2e;box-shadow:-24px 0 60px rgba(16,26,46,.32);transform:translateX(101%);visibility:hidden;overflow-y:auto;transition:transform .44s cubic-bezier(.4,0,.2,1),visibility .44s}
.mnav.open{transform:none;visibility:visible}
.mnavtop{display:flex;align-items:center;justify-content:flex-end}
.mlogo{height:42px;width:auto;background:#fff;border-radius:12px;padding:4px 10px;box-sizing:content-box}
.mclose{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;background:none;border:none;border-radius:0;cursor:pointer}
.mclose:hover .bl{background:#c9a8dc}
.mclose .bl{position:absolute;width:17px;background:#fff}
.mclose .bl:first-child{transform:rotate(45deg)}
.mclose .bl:last-child{transform:rotate(-45deg)}
.mnavin{width:100%;margin:22px 0 0;padding-bottom:8px}
.mlink{display:block;padding:14px 0;border-bottom:none;font-size:25px;font-weight:700;letter-spacing:-.015em;color:#fff;text-decoration:none;transition:color .2s,padding-left .22s}
.mlink:hover{color:#c9a8dc;padding-left:8px}
.mlink.mon{color:#c9a8dc}
.mnavcta{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:8px 9px 8px 22px;border-radius:999px;background:#c9a8dc;color:#221233;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:transform .2s}
.mnavctai{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:#101a2e;color:#fff}
.mnavctai svg{width:19px;height:19px}
.mtel{display:block;margin-top:22px;font-size:13.5px;font-weight:700;color:#9aa4ba;text-decoration:none}
.mtel:hover{color:#c9a8dc}
@media (max-width:520px){.mnav{width:86%}.mlink{font-size:22px;padding:14px 2px}}
html,body{overflow-x:hidden;max-width:100%}
img,svg,video{max-width:100%}
.fcard{background:transparent;border-radius:0;padding:0;color:#101a2e}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.fld{display:flex;flex-direction:column;gap:6px}
.flbl{font-size:11px;font-weight:700;letter-spacing:.06em;color:#101a2e}
.fin{border:none;border-bottom:1px solid #d8cfc0;border-radius:0;padding:11px 2px;font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;background:transparent;color:#101a2e;transition:border-color .2s}
.fin::placeholder{color:#a99f8e}
.fin:focus{outline:none;border-bottom:2px solid #101a2e}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:10px;line-height:1.55;color:#6b7285;margin-top:14px}
.cbox{margin-top:2px;accent-color:#7b4e8f}
.mapframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.12) contrast(1.02)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard{display:block;color:#101a2e}
.bimg{border-radius:16px;overflow:hidden;height:220px;background:#e8e3d6}
.bmeta{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700;color:#8a8676;margin:16px 0 8px}
.bmeta span{display:inline-flex;align-items:center;gap:6px}
.bmeta i{width:13px;height:13px;vertical-align:-2px}
.bt{font-size:16.5px;line-height:1.45;font-weight:800;margin:0;color:#101a2e}
.bcard:hover .bt{color:#7b4e8f}
.subw{background:#101a2e;border-radius:28px;padding:56px;color:#fff;text-align:center}
.subw .h2{color:#fff}
.subw .h2 .si{color:#e0c8ef}
.subx{font-size:14px;color:rgba(255,255,255,.78);margin:0 auto 26px;max-width:480px;line-height:1.7}
.subin{display:flex;gap:6px;background:#fff;border-radius:999px;padding:6px 6px 6px 18px;align-items:center;max-width:420px;margin:0 auto}
.subf{border:none;outline:none;flex:1;font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;color:#101a2e;min-width:0}
.subb{background:#c9a8dc;color:#221233;font-size:13px;font-weight:800;padding:11px 20px;border-radius:999px;cursor:pointer;white-space:nowrap}
.subb:hover{background:#d8bce7}
@media (max-width:1023px){.wrap{padding:0 24px}.ih1{font-size:34px}.h2{font-size:30px}.gsec{margin:0 10px}.foot{margin:60px 10px 0}.fgrid{grid-template-columns:1fr 1fr}.bgrid{grid-template-columns:1fr}.subw{padding:40px 24px}}
.btny{display:inline-flex;align-items:center;gap:12px;background:#c9a8dc;color:#221233;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:8px 9px 8px 22px;cursor:pointer;transition:transform .2s}
.btny:hover{transform:translateY(-1px);color:#221233}
.btnyi{width:40px;height:40px;border-radius:50%;background:#101a2e;color:#fff;display:flex;align-items:center;justify-content:center}
.btnyi i{width:19px;height:19px}
.btnyi svg{width:19px;height:19px}

/* Hand-authored additions appended to the generated global.css.
 *
 * Form feedback. The prototypes had no wired forms, so the design has no rule for
 * submission states; these use the existing palette rather than new colours.
 */
.formmsg {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 700;
}
.formmsg[data-kind="ok"] {
  color: #7b4e8f;
}
.formmsg[data-kind="error"] {
  color: #b03636;
}
.formmsg[data-kind="pending"] {
  color: #55607a;
}

/* On the dark footer and the dark subscribe band, the ink-toned variants are
   unreadable — lift them onto the panel's own accent instead. */
.foot .formmsg[data-kind="ok"],
.subw .formmsg[data-kind="ok"] {
  color: #c9a8dc;
}
.foot .formmsg[data-kind="pending"],
.subw .formmsg[data-kind="pending"] {
  color: #9aa4ba;
}
.foot .formmsg[data-kind="error"],
.subw .formmsg[data-kind="error"] {
  color: #f0a3a3;
}

/* Span-based buttons get real button semantics from forms.js; make that visible. */
[role="button"]:focus-visible {
  outline: 2px solid #7b4e8f;
  outline-offset: 2px;
}

/* Legal pages: draft-review notice, shown only while LEGAL_REVIEWED is False in
   tools/convert_dc.py. Restrained rather than alarming - it has to be honest without
   making a client demo look broken. */
.legalnote {
  margin: 0 0 30px;
  padding: 16px 20px;
  border-left: 3px solid #c9a8dc;
  border-radius: 0 12px 12px 0;
  background: #f6f4f8;
  font-size: 13px;
  line-height: 1.65;
  color: #55607a;
}

/* "Last updated" line at the end of a legal document. */
.pupdated {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid #ddd7cb;
  font-size: 12.5px;
  color: #6d6757;
}

/* Hero CTAs must match height; derived from the .btnyi badge + .btny padding so it tracks ICON_SCALE. border-box so padding is inside the height, not added to it. */
.btny,.btngh{min-height:56px;box-sizing:border-box}