:root {
    --navy: #16243f;
    --navy-soft: #223353;
    --ink: #1f2937;
    --slate: #55647a;
    --slate-light: #626e82;
    --blue: #1f8fd4;
    --blue-dark: #0f5c96;
    --blue-fill: #e8f1fc;
    --green: #1f936a;
    --green-ink: #156c3f;
    --red: #c0392b;
    --red-fill: #fbe9e9;
    --amber: #d9930a;
    --amber-ink: #8f5e09;
    --amber-fill: #fbf1e0;
    --violet: #563590;
    --card: #ffffff;
    --line: #e6ebf3;
    --line-strong: #d3dce8;

    --g-blue: linear-gradient(135deg, #eef4fc 0%, #f3f1fb 52%, #fdf3f6 100%);
    --g-green: linear-gradient(135deg, #ecf7f1 0%, #f4f8f5 60%, #eef5fb 100%);
    --g-amber: linear-gradient(135deg, #fdf5e8 0%, #fbf6ef 55%, #f6f1fb 100%);

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
    --wrap: 1140px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { font-family: var(--sans); background: var(--card); color: var(--ink); line-height: 1.62; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }

  h1, h2, h3 { color: var(--navy); letter-spacing: -0.025em; text-wrap: balance; font-weight: 800; }
  h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.03; }
  h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.07; }
  h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
  .lede { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--slate); max-width: 46ch; }

  .plabel { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 17px; font-weight: 700; font-size: 14px; color: var(--navy); box-shadow: 0 3px 12px rgba(20,36,63,0.05); }
  .plabel .d { width: 9px; height: 9px; border-radius: 50%; }
  .plabel--dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; box-shadow: none; }

  .pbtn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 28px; font-weight: 600; font-size: 15.5px; cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, background .15s, border-color .15s; }
  .pbtn:active { transform: translateY(1px); }
  .pbtn--navy { background: var(--navy); color: #fff; }
  .pbtn--navy:hover { background: #0f1b30; }
  .pbtn--light { background: #fff; color: var(--navy); border-color: var(--line-strong); }
  .pbtn--light:hover { border-color: var(--slate-light); }
  .pbtn--sm { padding: 9px 18px; font-size: 14px; }
  .pbtn--white { background: #fff; color: var(--navy); }
  .pbtn--white:hover { background: #eef2f8; }
  .pbtn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
  .pbtn--ghost:hover { border-color: #fff; }
  a.pbtn:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

  .nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(20,36,63,0.06); }
  .nav__in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; color: var(--navy); }
  .nav__links { display: flex; align-items: center; gap: 26px; }
  .nav__links a:not(.pbtn) { font-size: 14.5px; color: var(--slate); font-weight: 500; }
  .nav__links a:not(.pbtn):hover { color: var(--navy); }
  .nav__links a.pbtn--navy { color: #fff; }
  @media (max-width: 940px) { .nav__links a:not(.pbtn) { display: none; } }

  .browser { background: #fff; border-radius: 15px; box-shadow: 0 44px 90px -34px rgba(20,36,63,0.42), 0 8px 24px -12px rgba(20,36,63,0.18); overflow: hidden; border: 1px solid rgba(20,36,63,0.06); }
  .browser__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: #f6f8fc; border-bottom: 1px solid var(--line); }
  .browser__bar .dot { width: 11px; height: 11px; border-radius: 50%; }
  .browser__bar .url { margin: 0 auto; font-size: 12.5px; color: var(--slate-light); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 26px; display: inline-flex; align-items: center; gap: 7px; }
  .browser__bar .url::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--slate-light); border-radius: 2px; }
  .browser__body { padding: 20px; }

  .band { padding: 100px 0; }
  @media (max-width: 720px) { .band { padding: 62px 0; } }
  .band--blue { background: var(--g-blue); }
  .band--green { background: var(--g-green); }
  .band--amber { background: var(--g-amber); }

  .show { display: grid; grid-template-columns: 1fr 1.12fr; gap: 60px; align-items: center; }
  .show.rev { grid-template-columns: 1.12fr 1fr; }
  .show.rev .show__txt { order: 2; }
  @media (max-width: 900px) { .show, .show.rev { grid-template-columns: 1fr; gap: 36px; } .show.rev .show__txt { order: 0; } }
  .show__txt .plabel { margin-bottom: 22px; }
  .show__txt h2 { margin-bottom: 18px; }
  .show__txt .lede { max-width: 42ch; }
  .show__cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

  /* hero */
  .hero { background: var(--g-blue); padding: 86px 0 92px; overflow: hidden; }
  .hero__grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 52px; align-items: center; }
  @media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }
  .hero .plabel { margin-bottom: 24px; }
  .hero h1 { max-width: 14ch; }
  .hero h1 .u { color: var(--blue); }
  .hero__sub { margin-top: 22px; }
  .hero__cta { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }

  /* hero stat strip (from design 1) */
  .statstrip { margin-top: 50px; }
  .statstrip__note { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--slate); margin-bottom: 16px; }
  .statstrip__note .sd { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
  .scards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (max-width: 760px) { .scards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px) { .scards { grid-template-columns: 1fr; } }
  .scard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); }
  .scard__n { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
  .scard__l { font-size: 12.5px; color: var(--slate); display: flex; align-items: center; gap: 7px; margin-top: 3px; }
  .scard__l .d { width: 7px; height: 7px; border-radius: 50%; }

  /* hero diagram card */
  .diacard { background: #fff; border-radius: 15px; border: 1px solid rgba(20,36,63,0.06); box-shadow: 0 44px 90px -34px rgba(20,36,63,0.42), 0 8px 24px -12px rgba(20,36,63,0.16); overflow: hidden; }
  .diacard__cap { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; background: #f6f8fc; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-light); }
  .diacard__cap b { color: var(--navy); font-weight: 700; }
  .diacard svg { display: block; width: 100%; height: auto; padding: 18px; }

  .req { animation: flow 3.6s linear infinite; }
  .req.r3 { animation-delay: 1.6s; }
  .req.r4 { animation-delay: 2.4s; }
  .req.pass { animation: flowpass 3.6s linear infinite; animation-delay: 1.05s; }
  @keyframes flow { 0%{transform:translateX(0);opacity:0} 8%{opacity:1} 36%{transform:translateX(143px);opacity:1} 50%{transform:translateX(143px);opacity:1} 58%{transform:translateX(143px);opacity:0} 100%{transform:translateX(143px);opacity:0} }
  @keyframes flowpass { 0%{transform:translateX(0);opacity:0} 8%{opacity:1} 100%{transform:translateX(360px);opacity:1} }
  .fwpulse { animation: fwp 3s ease-in-out infinite; transform-origin: center; }
  @keyframes fwp { 0%,100%{opacity:0.92} 50%{opacity:1} }
  /* firewall bar changes colour: red when it blocks, green when it lets through */
  .flash { opacity: 0; }
  .flash-red { animation: flashRed 3.6s ease-in-out infinite; }
  .flash-green { animation: flashGreen 3.6s ease-in-out infinite; }
  @keyframes flashRed { 0%,30%{opacity:0} 38%{opacity:0.92} 47%{opacity:0} 76%{opacity:0} 84%{opacity:0.92} 93%{opacity:0} 100%{opacity:0} }
  @keyframes flashGreen { 0%,58%{opacity:0} 67%{opacity:0.9} 78%{opacity:0} 100%{opacity:0} }
  @media (prefers-reduced-motion: reduce) { .req, .req.pass, .fwpulse, .flash-red, .flash-green { animation: none; } .req, .req.pass { opacity: 1; } }

  /* attack chips (problem section) */
  .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
  .chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: 0 3px 12px rgba(20,36,63,0.05); }
  .chip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

  /* dark log mock (problem section) */
  .logmock { background: #0f1c33; border-radius: 15px; overflow: hidden; box-shadow: 0 44px 90px -38px rgba(15,28,51,0.55); border: 1px solid #1c2c49; }
  .logmock__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: #132340; border-bottom: 1px solid #1c2c49; }
  .logmock__bar .dot { width: 11px; height: 11px; border-radius: 50%; }
  .logmock__bar .f { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: #7f92b0; }
  .logmock__body { padding: 16px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 2; }
  .logline { color: #8397b7; display: flex; gap: 12px; white-space: nowrap; }
  .logline .c { width: 34px; flex: 0 0 auto; font-weight: 700; }
  .logline .bad .c, .logline .bad { }
  .logline.bad .c { color: #e0605a; }
  .logline.bad .p { color: #b9c6dd; }
  .logline.ok .c { color: #5bbd7e; }
  .logline.ok { color: #a9c6df; }
  .logline.ok .p { color: #d3e0f1; }
  .logline .n { color: #8ea1c0; margin-left: auto; }

  /* architecture flow (vor dem shop) */
  .flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
  .flownode { background: #fff; border: 1px solid var(--line-strong); border-radius: 15px; padding: 20px 22px; min-width: 190px; max-width: 236px; box-shadow: 0 8px 24px -14px rgba(20,36,63,0.24); display: flex; flex-direction: column; justify-content: center; }
  .flownode__k { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--slate-light); display: flex; align-items: center; gap: 7px; }
  .flownode__k .d { width: 8px; height: 8px; border-radius: 50%; }
  .flownode__t { font-weight: 800; color: var(--navy); font-size: 16px; margin-top: 8px; letter-spacing: -0.01em; }
  .flownode__s { font-size: 12.5px; color: var(--slate); margin-top: 5px; line-height: 1.45; }
  .flownode--mid { background: var(--navy); border-color: var(--navy); align-items: center; text-align: center; }
  .flownode--mid .flownode__k { color: #9fb3d4; justify-content: center; }
  .flownode--mid .big { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-top: 6px; }
  .flownode--mid .flownode__s { color: #aebfd6; }
  .flownode--ok { border-color: #a7d9c2; }
  .flownode--ok .flownode__t { color: var(--green-ink); }
  .flownode--block { border-color: #e6b7b0; }
  .flownode--block .flownode__t { color: var(--red); }
  .flowsplit { display: flex; flex-direction: column; gap: 12px; }
  .flowsplit .flownode { flex: 1; }
  .flowarrow { display: flex; align-items: center; color: var(--slate-light); }
  @media (max-width: 720px) { .flowarrow { transform: rotate(90deg); } .flownode, .flowsplit { width: 100%; max-width: none; } .flow { flex-direction: column; align-items: stretch; } }
  .flownote { text-align: center; margin: 30px auto 0; color: var(--slate); font-size: 15px; max-width: 62ch; }
  .flownote b { color: var(--navy); font-weight: 700; }

  /* mock table */
  .mtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .mtbl th { text-align: left; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-light); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--line); }
  .mtbl td { padding: 10px 12px; border-bottom: 1px solid #f1f4f9; color: var(--slate); }
  .mtbl tr:last-child td { border-bottom: none; }
  .mn { font-family: var(--mono); color: var(--ink); }
  .tg { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
  .tg--r { background: var(--red-fill); color: var(--red); }
  .tg--b { background: var(--blue-fill); color: var(--blue-dark); }
  .tg--a { background: var(--amber-fill); color: var(--amber-ink); }
  .tg--g { background: #e9f6ef; color: var(--green-ink); }

  /* mock timeline */
  .mtl { list-style: none; position: relative; }
  .mtl::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
  .mtl li { display: grid; grid-template-columns: 10px 1fr; column-gap: 14px; padding: 6px 0; }
  .mtl .d { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; box-shadow: 0 0 0 3px #fff; background: var(--red); }
  .mtl li.trg .d { background: var(--violet); }
  .mtl__t { font-family: var(--mono); font-size: 11px; color: var(--slate-light); }
  .mtl__e { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .mtl__p { font-family: var(--mono); font-size: 12px; color: var(--slate); }
  .mtl__tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: #efe9f7; color: var(--violet); }

  /* features */
  .fhead { text-align: center; max-width: 660px; margin: 0 auto 48px; }
  .fhead .plabel { margin-bottom: 18px; }
  .grp { margin-top: 38px; }
  .grp:first-of-type { margin-top: 0; }
  .grp__hd { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
  .grp__hd .d { width: 10px; height: 10px; border-radius: 3px; }
  .grp__hd h3 { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); font-weight: 700; }
  .fgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media (max-width: 900px) { .fgrid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }
  .fc { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 26px 24px 22px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.14); display: flex; flex-direction: column; min-height: 216px; }
  .fc__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; background: var(--blue-fill); }
  .fc.a .fc__ic { background: var(--amber-fill); }
  .fc.g .fc__ic { background: #e9f6ef; }
  .fc h3 { margin-bottom: 7px; }
  .fc p { font-size: 14px; color: var(--slate); line-height: 1.55; margin-bottom: 20px; }
  .fc__tag { margin-top: auto; align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; background: var(--blue-fill); color: var(--blue-dark); }
  .fc.a .fc__tag { background: var(--amber-fill); color: var(--amber-ink); }
  .fc.g .fc__tag { background: #e9f6ef; color: var(--green-ink); }

  /* overview / dashboard */
  .kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
  @media (max-width: 720px) { .kpis { grid-template-columns: repeat(2,1fr); } }
  .kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.12); }
  .kpi__n { font-size: 27px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
  .kpi__l { font-size: 13px; color: var(--slate); margin-top: 2px; }
  .kpi__s { font-size: 11.5px; color: var(--slate-light); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
  .kpi__s .d { width: 7px; height: 7px; border-radius: 50%; }

  .dash { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
  @media (max-width: 640px) { .dash { grid-template-columns: 1fr; } }
  .dash__hd { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .spark { width: 100%; height: auto; display: block; }
  .spark__cur { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--navy); }
  .spark__lbl text { font-family: var(--mono); font-size: 9.5px; fill: var(--slate-light); text-anchor: middle; }

  /* privacy panel */
  .privacy { background: linear-gradient(150deg, #223353 0%, var(--navy) 58%, #101b30 100%); border-radius: 22px; padding: 56px 48px; box-shadow: 0 44px 96px -44px rgba(15,28,51,0.55); }
  @media (max-width: 720px) { .privacy { padding: 42px 26px; } }
  .privacy__hd { text-align: center; max-width: 620px; margin: 0 auto 38px; }
  .privacy__hd .plabel { margin-bottom: 18px; }
  .privacy__hd h2 { color: #fff; margin-bottom: 14px; }
  .privacy__hd p { color: #aebfd6; font-size: 16px; }
  .pcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media (max-width: 720px) { .pcards { grid-template-columns: 1fr; } }
  .pcard { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 15px; padding: 26px 24px; }
  .pcard__ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
  .pcard h3 { color: #fff; margin-bottom: 8px; }
  .pcard p { color: #aebfd6; font-size: 14px; line-height: 1.55; }

  /* layers */
  .lay { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  @media (max-width: 760px) { .lay { grid-template-columns: 1fr; } }
  .lc { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 28px 24px; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.12); }
  .lc.mid { border-color: #93c9ec; box-shadow: 0 8px 26px -14px rgba(31,143,212,0.4); }
  .lc__k { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-light); font-weight: 700; }
  .lc.mid .lc__k { color: var(--blue-dark); }
  .lc h3 { margin: 11px 0 7px; }
  .lc p { font-size: 13.5px; color: var(--slate); line-height: 1.5; }

  /* pricing */
  .plans { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
  @media (max-width: 900px) { .plans { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 520px) { .plans { grid-template-columns: 1fr; } }
  .plan { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; box-shadow: 0 4px 16px -10px rgba(20,36,63,0.12); }
  .plan.feat { border-color: var(--navy); box-shadow: 0 14px 34px -16px rgba(22,36,63,0.3); }
  .plan__n { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
  .plan__p { font-size: 30px; font-weight: 800; color: var(--navy); margin: 10px 0 3px; letter-spacing: -0.02em; }
  .plan__p small { font-size: 13px; font-weight: 500; color: var(--slate-light); margin-left: 6px; }
  .plan__d { font-size: 12.5px; color: var(--slate); min-height: 36px; }
  .plan ul { list-style: none; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
  .plan li { font-size: 13px; color: var(--slate); display: flex; gap: 8px; }
  .plan li svg { flex: 0 0 auto; margin-top: 3px; }
  .plan__badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--blue-dark); color: #fff; padding: 3px 9px; border-radius: 999px; }
  .ptoggle { display: inline-flex; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px; gap: 4px; box-shadow: 0 3px 12px rgba(20,36,63,0.05); }
  .ptoggle__b { border: none; background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--slate); padding: 8px 22px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
  .ptoggle__b.is-active { background: var(--navy); color: #fff; }
  .ptoggle__b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .plan .pm { display: none; }
  .pricing--month .plans .py { display: none; }
  .pricing--month .plans .pm { display: inline; }

  .faq { max-width: 760px; margin: 0 auto; }
  .faq details { background: #fff; border: 1px solid var(--line); border-radius: 13px; margin-bottom: 12px; box-shadow: 0 3px 12px -8px rgba(20,36,63,0.1); }
  .faq summary { cursor: pointer; list-style: none; padding: 20px 52px 20px 22px; font-weight: 700; font-size: 16px; color: var(--navy); position: relative; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 22px; top: 18px; color: var(--blue); font-size: 22px; }
  .faq details[open] summary::after { content: "\2013"; }
  .faq p { padding: 0 22px 22px; color: var(--slate); font-size: 15px; line-height: 1.62; }

  .cta { background: linear-gradient(150deg, #223353 0%, var(--navy) 60%, #101b30 100%); color: #dbe4f2; text-align: center; padding: 108px 0; }
  .cta h2 { color: #fff; max-width: 20ch; margin: 0 auto; }
  .cta .lede { color: #aebfd6; margin: 18px auto 0; max-width: 48ch; }
  .cta__b { display: flex; gap: 13px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

  .footer { background: #fff; border-top: 1px solid var(--line); padding: 46px 0 40px; }
  .footer__top { display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
  .footer__links { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: var(--slate); }
  .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 13.5px; color: var(--slate-light); }
  .footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
  .footer a:hover { color: var(--navy); }
  .dvimg { display: inline-block; background: url(logo.png) left center/contain no-repeat; flex: 0 0 auto; }
  .dvimg--nav { width: 170px; height: 43px; }
  .dvimg--foot { width: 173px; height: 44px; }
  .brand__sep { width: 1px; height: 24px; background: var(--line-strong); }
  .brand__prod { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--slate); letter-spacing: -0.01em; }
  .brand__shield { flex: 0 0 auto; }
  @media (max-width: 600px) { .brand__sep, .brand__prod { display: none; } }
  .chartleg { display: flex; gap: 14px; }
  .chartleg .cl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--slate); }
  .chartleg .cl i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

  .legal { max-width: 760px; margin: 0 auto; }
  .legal h1 { font-size: clamp(30px,4vw,42px); line-height: 1.1; margin-bottom: 18px; }
  .legal h2 { font-size: 20px; color: var(--navy); margin: 34px 0 10px; }
  .legal h3 { font-size: 16px; color: var(--navy); margin: 24px 0 6px; }
  .legal h4 { font-size: 14px; color: var(--navy); font-weight: 700; margin: 16px 0 4px; }
  .legal p { color: var(--slate); margin-bottom: 12px; font-size: 15px; line-height: 1.65; }
  .legal ul { margin: 0 0 12px 20px; color: var(--slate); font-size: 15px; line-height: 1.65; }
  .legal li { margin-bottom: 6px; }
  .legal a { color: var(--blue-dark); word-break: break-word; }
  .legal__src { font-size: 12.5px; color: var(--slate-light); margin-top: 24px; }
  .legal__back { margin-top: 34px; font-weight: 600; }

  body.short { min-height: 100vh; display: flex; flex-direction: column; }
  body.short main { flex: 1 0 auto; }
  body.short .footer { flex-shrink: 0; }