/* Dimensional visual system, matched to the /dxcomply-datasheet/ illustrations:
   a light face stacked on a darker offset base, navy bezels, lavender-to-white
   gradients, one soft drop shadow, and calm motion on a few objects. */
:root{--dx-navy:#1d1976;--dx-base:#0e0b44;--dx-lav:#ddd3f1;--dx-face:linear-gradient(145deg,#fff,#f1ebfc);--dx-purple:linear-gradient(145deg,#a082ff,#7339eb 42%,#361186);--dx-teal:linear-gradient(145deg,#a2fff1,#40dfcb 45%,#199a9c);--dx-red:linear-gradient(145deg,#ffaca3,#e45c63 38%,#af3047);--dx-lift:0 18px 34px -22px rgba(53,36,106,.45)}
.dx-sprite{position:absolute;width:0;height:0;overflow:hidden}
.dx-stage{margin:0;border:1px solid #ebe5f4;border-radius:22px;background:radial-gradient(ellipse at 50% 46%,#efe9f9 0%,#f8f6fc 52%,#fff 84%)}

/* Shared SVG text */
.dx-t-cap{font:800 14px 'Nunito',sans-serif;fill:#5b4a8a}

/* Timeline engine states (see page.js). Elements with data-at fade or pop in on cue. */
.dx-anim [data-at]{opacity:0;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.9,.3,1.25)}
.dx-anim [data-at].on{opacity:1}
.dx-anim .dx-out[data-at]{opacity:1}
.dx-anim .dx-out[data-at].on{opacity:0}
.dx-anim .pop{transform-box:fill-box;transform-origin:center;transform:scale(.55)}
.dx-anim .pop.on{transform:none}
.dx-anim .pop-drop{transform:translateY(-16px) scale(.8)}
.dx-anim .dx-mover{transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .4s ease}
.dx-anim .dx-progress{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:opacity .4s ease,transform 7s linear}
.dx-anim .dx-progress.on{transform:scaleX(1)}
.dx-anim .dx-progress-drift{transition:opacity .4s ease,transform 3.9s linear}
.dx-anim.no-tr,.dx-anim.no-tr *{transition:none!important}


/* Consent flow, drawn as a dimensional browser */
@media(min-width:1101px){.gap-layout{grid-template-columns:1fr minmax(0,470px)}.consent-flow{justify-self:end}}
.consent-flow{width:100%;max-width:470px}
.consent-flow{padding-bottom:16px}
.consent-flow .flow-top{padding:9px 16px}
.flow-choice{padding-top:12px}
.flow-kicker{font-size:10px}
.flow-choice h3{font-size:17px;margin:0 0 10px}
.flow-buttons button{padding:7px 8px;font-size:13px}
.consent-flow .flow-wire{height:26px;margin:6px 0 4px}
.flow-group h4{margin-bottom:6px}
.consent-flow .flow-vendor{min-height:0;padding:6px 8px;margin-top:6px;grid-template-columns:24px 1fr;gap:0 7px;box-shadow:0 3px 0 var(--dx-lav),0 10px 14px -12px rgba(53,36,106,.35)}
.consent-flow .vendor-icon{width:24px;height:24px;border-radius:7px}
.consent-flow .vendor-icon svg{width:14px;height:14px}
.consent-flow .flow-vendor>span:nth-child(2){font-size:11.5px}
.consent-flow .vendor-status{font-size:9.5px}
.consent-flow .flow-result{min-height:76px;margin-top:12px;padding:10px 12px;gap:10px}
.consent-flow .flow-result p{font-size:11.5px;line-height:1.5}
.consent-flow .result-symbol{width:22px;height:22px;font-size:12px}
.consent-flow{border:7px solid transparent;border-radius:30px;padding:0 22px 22px;background:linear-gradient(180deg,#fff,#f6f2fd) padding-box,linear-gradient(150deg,#3a35a8,#1d1976 50%,#110e55) border-box;box-shadow:8px 12px 0 var(--dx-base),0 44px 60px -34px rgba(40,24,110,.5)}
.flow-top{margin:0 -22px;border:0;border-radius:23px 23px 0 0;background:linear-gradient(90deg,#ece5fb,#e2d8f8);padding:12px 18px;justify-content:flex-start;gap:16px}
.flow-dots{display:flex;gap:7px}
.flow-dots i{width:11px;height:11px;border-radius:50%;background:#15125c}
.flow-dots i:nth-child(2){background:#6d3cce}
.flow-dots i:nth-child(3){background:#b4a5e2}
.flow-top>strong{font-size:15px;color:#2a1f6e}
.flow-brand-mark{width:20px;height:22px;font-size:11px;background:var(--dx-purple)}
.flow-url{margin-left:auto;font-size:11px;font-weight:700;color:#6f6490;background:#fff;border:1px solid #d6caf0;border-radius:99px;padding:3px 12px}
.flow-buttons{gap:14px}
.flow-buttons button{border:1.5px solid #cdbfe8;border-radius:15px;background:linear-gradient(180deg,#fff,#f4effd);color:#3d2b86;padding:12px 8px;box-shadow:0 5px 0 #cbbde6,0 12px 18px -12px rgba(53,36,106,.4);transition:transform .15s ease,box-shadow .15s ease,background .3s,color .3s}
.flow-buttons button:hover{transform:translateY(-1px)}
.flow-buttons button:active{transform:translateY(4px);box-shadow:0 1px 0 #cbbde6}
.flow-buttons button[aria-pressed=true]{background:var(--dx-purple);border-color:#aa89e6;color:#fff;box-shadow:0 5px 0 #381875,0 14px 20px -12px rgba(54,17,134,.6)}
.flow-wire{display:block;width:100%;height:46px;margin:8px 0 6px;overflow:visible}
.flow-wire path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.flow-wire .wire-track{stroke:#e2d9f4;stroke-width:3}
.flow-wire .wire-flow{stroke-width:3;stroke-dasharray:5 11;animation:wire-run 1.1s linear infinite}
.flow-wire .is-ok{stroke:#2fc4b2}
.flow-wire .is-bad{stroke:#d9557a}
.flow-wire g{transition:opacity .35s ease}
[data-choice=accept] .flow-wire .wire-reject,[data-choice=reject] .flow-wire .wire-accept{opacity:0}
@keyframes wire-run{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}
.flow-group h4{justify-content:center}
.flow-vendor{border:1.5px solid #e2d9f4;border-radius:13px;background:var(--dx-face);box-shadow:0 4px 0 var(--dx-lav),0 12px 18px -14px rgba(53,36,106,.35);margin-top:10px;transition:background .4s,border-color .4s,box-shadow .4s,transform .4s}
.vendor-icon{width:30px;height:30px;border-radius:9px;background:var(--dx-teal);color:#fff;box-shadow:0 3px 0 #15857c;display:grid;place-items:center}
.vendor-icon svg{width:17px;height:17px}
.optional .vendor-icon{background:var(--dx-purple);color:#fff;box-shadow:0 3px 0 #2d157a}
[data-choice=reject] .flow-mismatch{border-color:#f1c2d2;background:linear-gradient(145deg,#fff,#fff0f4);box-shadow:0 4px 0 #f0cad6,0 14px 22px -12px rgba(174,58,105,.45);transform:translateY(-2px)}
[data-choice=reject] .flow-mismatch .vendor-icon{background:var(--dx-red);box-shadow:0 3px 0 #88243c}
[data-choice=accept] .optional .flow-vendor{border-color:#c9ebe2;background:linear-gradient(145deg,#fff,#effbf7);box-shadow:0 4px 0 #cfeee4,0 12px 18px -14px rgba(21,133,124,.35)}
.flow-result{border:1.5px solid #f1c2d2;border-radius:15px;background:linear-gradient(145deg,#fff,#fff0f4);box-shadow:0 4px 0 #f0cad6}
.result-symbol{width:28px;height:28px;background:var(--dx-red);box-shadow:0 3px 0 #88243c}
[data-choice=accept] .flow-result{border-color:#c9ebe2;background:linear-gradient(145deg,#fff,#effbf7);box-shadow:0 4px 0 #cfeee4}
[data-choice=accept] .result-symbol{background:var(--dx-teal);box-shadow:0 3px 0 #15857c}

/* Four consent states: dimensional keys with the toggle each state implies */
.state-controls{gap:16px;margin-bottom:30px}
.state-button{position:relative;border:1.5px solid #e0d7f2;border-radius:16px;background:var(--dx-face);padding:18px 22px 17px;box-shadow:0 6px 0 var(--dx-lav),0 16px 24px -18px rgba(53,36,106,.4);transition:transform .15s ease,box-shadow .15s ease,border-color .2s,background .2s}
.state-button:hover{background:linear-gradient(145deg,#fff,#ece4fb);transform:translateY(-1px)}
.state-button.active{border-color:#aa89e6;background:linear-gradient(145deg,#faf7ff,#e9defc);box-shadow:0 3px 0 #b69ae8,0 10px 18px -14px rgba(54,17,134,.45);transform:translateY(3px)}
.key-toggle{position:absolute;top:19px;right:18px;width:34px;height:19px;border-radius:99px;background:#d8cfee;box-shadow:inset 0 2px 3px rgba(29,25,118,.18)}
.state-button strong::before{content:'';float:right;width:40px;height:20px}
.key-toggle::after{content:'';position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 3px rgba(29,25,118,.3)}
.key-toggle.t-mid::after{left:10px}
.key-toggle.t-on{background:var(--dx-purple)}
.key-toggle.t-on::after,.key-toggle.t-gpc::after{left:17.5px}
.key-toggle.t-gpc{background:var(--dx-teal)}
.audit-example{border:1.5px solid #e0d7f2;border-radius:20px;box-shadow:0 7px 0 #e6def5,0 30px 50px -36px rgba(53,36,106,.45)}
.consent-matrix .state{box-shadow:inset 0 1px 0 #ffffffb3,0 2px 0 rgba(29,25,118,.07)}
.explain-mark{background:var(--dx-purple);color:#fff;box-shadow:0 3px 0 #2d157a}

/* Coverage */
.coverage-equation>div{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.coverage-equation>div span:not(.eq-tile){grid-column:2}
.coverage-equation .eq-tile{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1.5px solid #d9cff3;background:linear-gradient(145deg,#fff,#ddd1f5);color:#6332b6;box-shadow:0 5px 0 #2f2a7a,0 14px 20px -12px rgba(53,36,106,.45)}
.eq-tile svg{width:23px;height:23px}
.coverage-equation{border-bottom:0;padding-bottom:0}
#coverage .section-heading,#capabilities .section-heading{max-width:none}
#coverage .intro,#capabilities .intro{max-width:none}

/* Capabilities: eight cards, each with a dimensional visual stage */
.cap-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
.cap-card h3{font-size:18px;line-height:1.32;margin:20px 0 8px}
.cap-card p{font-size:15px;line-height:1.6}
.cap-visual{aspect-ratio:3/2;overflow:hidden}
.cap-visual img,.cap-visual svg{display:block;width:100%;height:100%;object-fit:contain}

/* Evidence: the finding sits on a dimensional clipboard */
.finding{position:relative;margin-top:22px;border:7px solid transparent;border-radius:30px;padding:48px 32px 30px;background:linear-gradient(180deg,#fff,#f6f2fd) padding-box,linear-gradient(150deg,#3a35a8,#1d1976 50%,#110e55) border-box;box-shadow:8px 12px 0 var(--dx-base),0 44px 60px -34px rgba(40,24,110,.5)}
.finding::before{content:'';position:absolute;top:-30px;left:50%;width:128px;height:40px;transform:translateX(-50%);border-radius:14px;border:3px solid #1d1976;background:linear-gradient(180deg,#fff,#ddd1f5);box-shadow:0 5px 0 #1d1976}
.finding-heading .state.bad{border-radius:99px;padding:6px 12px;background:linear-gradient(145deg,#fff,#ffe9ef);border:1px solid #f1c2d2;box-shadow:0 3px 0 #f0cad6}
.finding{padding:46px 36px 32px}
.finding h3{margin:22px 0 24px}
.finding dl{gap:0}
.finding dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid #ece6f6;font-size:14.5px}
.finding dl>div:first-child{border-top:1px solid #ece6f6}
.finding dd{text-align:right}
.finding-route{margin-top:26px;padding-top:0;border-top:0;justify-content:space-between;align-items:center;gap:8px}
.finding-route span:not([aria-hidden]){flex:1;text-align:center;white-space:nowrap;padding:8px 10px;border-radius:10px;border:1px solid #e0d7f2;background:var(--dx-face);box-shadow:0 3px 0 var(--dx-lav)}
.finding-route span[aria-hidden]{color:#b39cf5}
.benefit-list li{border-left:0;padding-left:30px;position:relative}
.benefit-list li::before{content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:5px;background:var(--dx-purple);box-shadow:0 3px 0 #2d157a}

/* Reporting */
.regulation-inline{margin-top:30px}
.reg-count{display:flex;align-items:baseline;gap:12px;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:16px}
.reg-count strong{font-family:'Open Sans',sans-serif;font-size:46px;line-height:1;letter-spacing:-.06em;color:var(--purple)}
.regulation-list{display:flex;flex-wrap:wrap;gap:10px}
.regulation-list span,.regulation-list span:last-child{grid-column:auto;font-size:13px;font-weight:800;padding:7px 13px;border-radius:11px;border:1.5px solid #e0d7f2;background:var(--dx-face);box-shadow:0 3px 0 var(--dx-lav)}
.reporting-visual{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:18px 18px 26px}
.reporting-visual img{display:block;width:118%;max-width:none;margin:-4% -9% 0}
.reporting-visual figcaption{text-align:center;font-size:12px;color:#847a95;margin-top:-4px}

/* Getting started: dimensional step discs on a dashed route */
.steps li{position:relative}
.steps li:not(:last-child)::before{content:'';position:absolute;top:24px;left:66px;right:-36px;border-top:3px dashed #d6caf0}
.step-number{position:relative;width:50px;height:50px;border:0;border-radius:50%;background:var(--dx-purple);color:#fff;font-size:19px;box-shadow:0 5px 0 #2d157a,0 14px 22px -12px rgba(54,17,134,.6)}
.steps li:last-child .step-number{background:var(--dx-teal);color:#063f3c;box-shadow:0 5px 0 #15857c,0 14px 22px -12px rgba(21,133,124,.55)}

@media(max-width:1100px){.cap-cards{grid-template-columns:repeat(2,1fr);gap:36px 24px}.coverage-equation>div{column-gap:10px}.eq-tile{width:40px;height:40px;border-radius:12px}.eq-tile svg{width:20px;height:20px}}
@media(max-width:800px){
 .consent-flow{padding:0 16px 18px;box-shadow:6px 9px 0 var(--dx-base),0 30px 44px -30px rgba(40,24,110,.5)}
 .flow-top{margin:0 -16px;padding:10px 14px;gap:10px}
 .flow-url{display:none}
 .coverage-equation{grid-template-columns:1fr 20px 1fr}
 .reporting-visual{max-width:520px;width:100%;aspect-ratio:4/3}
 .reporting-visual img{width:100%;margin:-2% 0 0}
 .finding{box-shadow:6px 9px 0 var(--dx-base),0 30px 44px -30px rgba(40,24,110,.5)}
 .steps li:not(:last-child)::before{top:56px;bottom:-22px;left:25px;right:auto;border-top:0;border-left:3px dashed #d6caf0}
 .steps li{grid-template-columns:52px 1fr}
}
@media(max-width:480px){
 .cap-cards{grid-template-columns:1fr}
 .state-button{padding:14px 14px}
 .key-toggle{top:15px;right:12px;width:28px;height:16px}
 .key-toggle::after{width:11px;height:11px}
 .key-toggle.t-mid::after{left:8.5px}
 .key-toggle.t-on::after,.key-toggle.t-gpc::after{left:14.5px}
 .coverage-equation{grid-template-columns:1fr;gap:16px}
 .coverage-equation b{display:none}
 .finding{padding:42px 20px 24px}
 .finding dl>div{font-size:12.5px}
 .finding-route{flex-wrap:wrap}
 .finding-route span:not([aria-hidden]){flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){.flow-wire .wire-flow{animation:none}.dx-anim [data-at],.dx-anim .dx-mover{transition:none!important}}