/* /dla pre-sell page, the panel's pages/dla.css (dev.xagio.net) with marketplace tokens and SVG icons. Studio design system (navy #141D37 surfaces, purple #6162F1 action, Inter, 12px radius) blended with
   the DLA brand (acid #c6f24e, Archivo display type). The showcase panels stay dark in both themes: the product logos are white-wordmark.
   The dark palette is scoped to those panels; the section heads, the value line and the chips between them sit on the page and use the
   page's own tokens, so they read in the light theme too. No hairlines on the surfaces (the lime frames are deliberate accents). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800;900&display=swap');
.dla { --acid: #c6f24e; --act: #6162F1; --act-text: #9B9CF8;
    --disp: 'Archivo', Inter, sans-serif; max-width: 1080px; margin: 0 auto; padding: 8px 0 56px; display: flex; flex-direction: column; align-items: stretch; gap: 28px; text-align: center; }
.dla h1, .dla h2, .dla h3, .dla h4, .dla p { margin: 0; }
.dla-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--act); }
html[data-theme="dark"] .dla-kicker { color: var(--act-text); }

/* the dark showcase surfaces */
.dla-hero, .dla-panel, .dla-next { --navy: #141D37; --navy-2: #1B2540; --navy-3: #0E1524; --line: #263154; --ink: #F5F7FB; --ink-2: #C9CFDD; --ink-3: #8a93a6; }
/* Without a hairline, the near-black hero and "next" panels would melt into the dark page (#12161D): lift them one step,
   and their step tiles with them. */
html[data-theme="dark"] .dla-hero, html[data-theme="dark"] .dla-next { --navy-3: #182142; --navy-2: #222D4C; }

/* hero */
.dla-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 56px 48px 40px; color: var(--ink);
    background: radial-gradient(520px 260px at 50% -40px, rgba(198,242,78,.22), transparent 70%), radial-gradient(700px 360px at 50% 120%, rgba(97,98,241,.45), transparent 70%), var(--navy-3);
    display: flex; flex-direction: column; align-items: center; }
.dla-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
.dla-hero > * { position: relative; z-index: 1; }
.dla-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--acid); background: rgba(198,242,78,.1); border: 1px solid rgba(198,242,78,.45); box-shadow: 0 0 24px rgba(198,242,78,.18); }
.dla-brand { margin-top: 22px !important; font-family: var(--disp); font-weight: 900; font-size: 20px; }
.dla-brand span { color: var(--acid); }
.dla-hero h1 { margin-top: 12px !important; font-family: var(--disp); font-weight: 900; font-size: clamp(32px, 4vw, 54px); line-height: 1.04; letter-spacing: -1.5px; color: #fff; }
.dla-hero h1 em { font-style: normal; color: var(--acid); text-shadow: 0 0 40px rgba(198,242,78,.35); }
.dla-lede { margin: 18px auto 30px !important; max-width: 680px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.dla-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 16px; color: #fff !important; text-decoration: none !important;
    background: linear-gradient(180deg, #7172f4, var(--act)); box-shadow: 0 8px 24px rgba(97,98,241,.45), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s ease, box-shadow .15s ease; }
.dla-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(97,98,241,.6), inset 0 1px 0 rgba(255,255,255,.2); }
.dla-btn-lg { padding: 17px 34px; font-size: 17px; }
.dla-stats { margin-top: 40px; width: 100%; max-width: 820px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-top: 26px; }
.dla-stats div { display: flex; flex-direction: column; gap: 6px; }
.dla-stats div + div { border-left: 1px solid var(--line); }
.dla-stats b { font-family: var(--disp); font-weight: 900; font-size: 34px; line-height: 1; color: #fff; }
.dla-stats span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* section heads */
.dla-head { padding-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dla-head h2, .dla-next h2 { font-family: var(--disp); font-weight: 900; font-size: clamp(26px, 3vw, 38px); letter-spacing: -1px; line-height: 1.1; color: var(--ink); }
.dla-head p { max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* showcase panels (dark in both themes) */
.dla-panel { border-radius: 20px; padding: 34px 34px 36px; background: var(--navy); color: var(--ink); display: flex; flex-direction: column; gap: 26px; }
.dla-panel-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dla-num { font-family: var(--disp); font-weight: 900; font-size: 15px; letter-spacing: .1em; color: var(--acid); padding: 6px 12px; border-radius: 8px; background: rgba(198,242,78,.1); }
.dla-panel-head h3 { font-family: var(--disp); font-weight: 900; font-size: 30px; letter-spacing: -.8px; color: #fff; }
.dla-panel-head p { margin-top: 6px !important; font-size: 15.5px; color: var(--ink-2); }

.dla-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dla-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px 18px 22px; border-radius: 14px;
    background: var(--navy-2); border: 1px solid transparent; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.dla-logo:hover { transform: translateY(-2px); background: #222D4C; }
.dla-logo img { height: 44px; width: auto; max-width: 92%; object-fit: contain; }
.dla-logo-sm img { height: 32px; }
.dla-logo span { font-size: 13.5px; color: var(--ink-2); }

.dla-excl { position: relative; border-radius: 16px; padding: 30px 22px 22px; border: 1px solid rgba(198,242,78,.5);
    background: radial-gradient(500px 160px at 50% 0%, rgba(198,242,78,.12), transparent 70%), var(--navy-3); box-shadow: 0 0 40px rgba(198,242,78,.08) inset; }
.dla-excl-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0a0c10; background: var(--acid); }
.dla-excl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dla-logo-ex { background: rgba(255,255,255,.03); border-color: rgba(198,242,78,.25); }
.dla-logo-ex:hover { border-color: rgba(198,242,78,.7); }

.dla-train { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dla-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px; border-radius: 14px; background: var(--navy-2); }
.dla-ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: #fff;
    background: linear-gradient(180deg, #7172f4, var(--act)); box-shadow: 0 6px 18px rgba(97,98,241,.4); }
.dla-tile h4 { font-size: 16.5px; font-weight: 700; color: #fff; }
.dla-tile p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* value */
.dla-value { padding: 26px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dla-value-num { font-family: var(--disp); font-weight: 900; font-size: clamp(64px, 9vw, 110px); line-height: .95; letter-spacing: -4px; margin-top: 6px !important;
    background: linear-gradient(180deg, #d8ff6a, #9ec13a); -webkit-background-clip: text; background-clip: text; color: transparent; }
html:not([data-theme="dark"]) .dla-value-num { background: linear-gradient(180deg, #7aa000, #4f6b00); -webkit-background-clip: text; background-clip: text; }
.dla-value-sub { font-size: 17px; color: var(--ink-2); }
.dla-chips { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dla-chips span { padding: 9px 14px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2); background: var(--white); box-shadow: var(--shadow); }
.dla-chips b { color: var(--ink); margin-left: 4px; }

/* next */
.dla-next { border-radius: 20px; padding: 44px 40px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink);
    background: radial-gradient(600px 260px at 50% 0%, rgba(97,98,241,.35), transparent 70%), var(--navy-3); }
.dla-next h2 { color: #fff; }
.dla-steps { margin: 18px 0 14px; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.dla-step { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 22px; border-radius: 14px; background: var(--navy-2); }
.dla-step > span { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 900; font-size: 18px; color: #0a0c10; background: var(--acid); box-shadow: 0 0 22px rgba(198,242,78,.4); }
.dla-step h4 { font-size: 18px; font-weight: 700; color: #fff; }
.dla-step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.dla-step p b { color: var(--acid); }
.dla-step-arrow { color: var(--act-text); font-size: 20px; }
.dla-fine { font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 1000px) { .dla-train { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dla-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dla-logos, .dla-excl-row, .dla-train { grid-template-columns: 1fr; } .dla-stats { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
    .dla-stats div:nth-child(3) { border-left: 0; } .dla-steps { grid-template-columns: 1fr; } .dla-step-arrow { transform: rotate(90deg); } .dla-hero, .dla-panel, .dla-next { padding-left: 20px; padding-right: 20px; } }
.dla-sig { margin: -14px 0 28px !important; font-size: 14px; font-weight: 600; color: var(--acid); }
/* Hero "start here" box: explains the replay right beside its button. */
.dla-start { width: 100%; max-width: 860px; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; text-align: left;
    padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(198,242,78,.35); box-shadow: 0 0 30px rgba(198,242,78,.08) inset; }
.dla-start-play { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #0a0c10;
    background: var(--acid); box-shadow: 0 0 24px rgba(198,242,78,.45); padding-left: 3px; box-sizing: border-box; }
.dla-start-tag { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acid); margin-bottom: 4px; }
.dla-start h3 { font-size: 18px; font-weight: 700; color: #fff; }
.dla-start p { margin-top: 4px !important; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.dla-start p b { color: var(--acid); }
.dla-start .dla-btn { white-space: nowrap; }
@media (max-width: 860px) { .dla-start { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
/* Byline: tells the reader who "my" is before the headline. */
.dla-by { margin-top: 14px !important; font-size: 15px; color: var(--ink-2); }
.dla-by b { color: #fff; font-weight: 700; }
.dla-hero h1 { margin-top: 10px !important; }
/* Marketplace: mk_icon() SVGs in place of Font Awesome glyphs. */
.dla .ico { width: 1em; height: 1em; display: inline-block; }
.dla-ico .ico { width: 21px; height: 21px; }
.dla-start-play .ico { width: 18px; height: 18px; margin-left: 2px; }
.dla-step-arrow.ico { width: 22px; height: 22px; align-self: center; }