:root,
[data-theme="light"] {
  --blue:#2E6FF0;
  --cyan:#00CFF0;
  --gold:#F5B930;
  --gold-deep:#F0AE2E;
  --on-gold:#112240;

  --ink:#112240;
  --bg:#ffffff;
  --surface:#F5F8FD;
  --card:#ffffff;
  --muted:#536080;
  --border:#DDE4F2;
  --topbar:#0D1830;

  --gold-grad:linear-gradient(135deg,#F0DF3B 0%,#F0AE2E 100%);
  --band:linear-gradient(140deg,#4A86F5 0%,#2E6FF0 48%,#1B57CE 100%);
  /* Light mode header sits on the same light blue as the page heroes, so the
     band reads light in the light theme no matter what the OS prefers. */
  --nav-band:var(--band);
  --lift:0 6px 14px -10px rgba(17,34,64,.28);
  --lift-hi:0 18px 34px -20px rgba(17,34,64,.42);

  --ok:#1f8f56;
  --warn:#b5811a;
  --bad:#c0392f;
}

[data-theme="dark"] {
  --ink:#eef3ff;
  --bg:#022268;
  --surface:#0b2f7d;
  --card:rgba(75,120,210,.14);
  --muted:hsla(220,100%,92%,.85);
  --border:rgba(179,204,255,.12);
  --topbar:#01184d;

  --blue:#2E6FF0;
  --cyan:#00CFF0;
  --gold:#F5B930;
  --gold-deep:#F0AE2E;
  --on-gold:#112240;

  --gold-grad:linear-gradient(135deg,#F0DF3B 0%,#F0AE2E 100%);
  --band:linear-gradient(140deg,#02205F 0%,#0A3D9E 46%,#02184A 100%);
  --nav-band:linear-gradient(115deg,#0E4EAD 0%,#082C69 54%,#071F49 100%);
  --lift:0 6px 14px -10px rgba(0,12,34,.42);
  --lift-hi:0 18px 34px -20px rgba(0,12,34,.6);

  --ok:#4ecf8b;
  --warn:#e9bd52;
  --bad:#f0776a;
}

:root,
[data-theme="light"] {
  --svg-icon-color-1:var(--blue);
  --svg-icon-color-2:color-mix(in oklab, var(--blue) 30%, white);
  --svg-icon-color-3:var(--ink);
  --svg-icon-color-4:var(--gold);
  --svg-icon-color-5:color-mix(in oklab, var(--blue) 15%, white);

  --svg-illustration-primary-1:var(--blue);
  --svg-illustration-primary-2:color-mix(in oklab, var(--blue) 86%, white);
  --svg-illustration-primary-3:color-mix(in oklab, var(--blue) 74%, white);
  --svg-illustration-primary-4:color-mix(in oklab, var(--blue) 58%, white);
  --svg-illustration-primary-0:color-mix(in oklab, var(--blue) 88%, black);
  --svg-illustration-color-0:color-mix(in oklab, var(--blue) 90%, black);
  --svg-illustration-color-1:var(--blue);
  --svg-illustration-color-2:color-mix(in oklab, var(--blue) 78%, white);
  --svg-illustration-color-3:color-mix(in oklab, var(--blue) 62%, white);
  --svg-illustration-color-4:color-mix(in oklab, var(--blue) 42%, white);
  --svg-illustration-color-5:color-mix(in oklab, var(--blue) 24%, white);
  --svg-illustration-color-6:var(--ink);
  --svg-illustration-color-7:color-mix(in oklab, var(--blue) 12%, white);
  --svg-illustration-green-1:color-mix(in oklab, var(--gold) 58%, black);
  --svg-illustration-green-2:color-mix(in oklab, var(--gold) 78%, black);
  --svg-illustration-green-3:var(--gold);
  --svg-illustration-green-4:color-mix(in oklab, var(--gold) 65%, white);
  --svg-illustration-yellow-1:color-mix(in oklab, var(--gold) 88%, black);
  --svg-illustration-yellow-2:var(--gold);
  --svg-illustration-yellow-3:color-mix(in oklab, var(--gold) 68%, white);
  --svg-illustration-yellow-4:color-mix(in oklab, var(--gold) 55%, white);
  --svg-illustration-yellow-5:color-mix(in oklab, var(--gold) 40%, white);
  --svg-illustration-gray-1:#393E41;
  --svg-illustration-gray-2:#4F5357;
  --svg-illustration-gray-3:#CBCFD4;
  --svg-illustration-gray-4:#DADCDE;
  --svg-illustration-gray-5:#DCDEE1;
  --svg-illustration-gray-6:#E9EBEE;
  --svg-illustration-gray-7:#EBEDF0;
  --svg-illustration-gray-8:#EAEEF3;
  --svg-illustration-gray-w:#ffffff;
  --gray-lighter-3:#EBEDF0;
  --svg-illustration-line-color:color-mix(in oklab, var(--ink) 38%, white);
  --svg-illustration-shadow:rgba(17,34,64,.14);
  --svg-illustration-shadow-color:#000;
}

[data-theme="dark"] {
  --svg-icon-color-2:color-mix(in oklab, var(--blue) 44%, #DDE8FF);
  --svg-icon-color-3:#F3F7FF;
  --svg-icon-color-5:rgba(221,232,255,.2);

  --svg-illustration-color-6:#F3F7FF;
  --svg-illustration-color-7:rgba(221,232,255,.16);
  --svg-illustration-line-color:rgba(221,232,255,.52);
  --svg-illustration-gray-1:#c9d6f5;
  --svg-illustration-gray-2:#aabde6;
  --svg-illustration-gray-3:#3f5da6;
  --svg-illustration-gray-4:#3a569c;
  --svg-illustration-gray-5:#31508f;
  --svg-illustration-gray-6:#2c4784;
  --svg-illustration-gray-7:#274079;
  --svg-illustration-gray-8:#22386d;
  --svg-illustration-gray-w:#0d2f74;
  --svg-illustration-green-1:color-mix(in oklab, var(--gold) 58%, #061A3F);
  --svg-illustration-green-2:color-mix(in oklab, var(--gold) 78%, #061A3F);
  --svg-illustration-yellow-1:color-mix(in oklab, var(--gold) 88%, #061A3F);
  --svg-illustration-shadow-color:#061A3F;
}

/* The setup fee line under a headline price. A recurring figure never stands
   without the one time fee that comes first. */
.price-setup { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted, #536080); margin-top: 0.2rem; white-space: nowrap; }

/* The block an icon's first use carries its <symbol> definition in. It never
   takes space, and it has to beat a page's own "icon svg" sizing rules, which
   would otherwise size the definition block as though it were the icon. This
   lives here because the storefront and the ACP both load this file; it used
   to live in site/core.css, where the ACP never saw it. */
.dpn-sprite {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
