/*
 * 21X — Public Brand Guidelines page (/corporate-guidelines/)
 * A web-native, on-brand rendering of the CORPORATE sections of the
 * "21X Design System & Brand Guidelines v1.1" PDF: brand foundation, logo,
 * colour, typography and imagery. The internal web/system/deck sections
 * (UI components, slide modules, spacing/shadow tokens, governance) are
 * intentionally NOT published here.
 *
 * All scoped under .tox-dg. Rendered by [twentyonex_design_guide] (plugin).
 */

.tox-dg {
    /* ---- brand tokens (from the guide) ---- */
    --dg-blue-950:#0A1C33; --dg-blue-900:#102A4D; --dg-blue-800:#1B3D6E;
    --dg-blue-700:#234B8A; --dg-blue-600:#2B5CA8; --dg-blue-500:#2278C0;
    --dg-blue-400:#1DACE4; --dg-blue-300:#5BC3ED; --dg-blue-200:#9BD9F4;
    --dg-blue-100:#CFECFA; --dg-blue-50:#EAF6FD;
    --dg-ink-950:#05080D; --dg-ink-900:#0C1119; --dg-ink-800:#161C26;
    --dg-ink-700:#2A313D; --dg-ink-600:#434B59; --dg-ink-500:#5F6878;
    --dg-ink-400:#828B9B; --dg-ink-300:#A8B0BD; --dg-ink-200:#CDD3DC;
    --dg-ink-150:#DFE3EA; --dg-ink-100:#EBEEF3; --dg-ink-50:#F4F6F9;
    --dg-surface:#F6F8FB; --dg-white:#FFFFFF;
    --dg-mag-700:#8E2F8F; --dg-mag-600:#B3199F; --dg-mag-500:#D63CC0;
    --dg-mag-400:#E56BD4; --dg-mag-100:#FBE4F6;
    --dg-up:#12B76A; --dg-down:#F04438; --dg-warn:#F79009; --dg-info:#1DACE4;
    --dg-grad-x: linear-gradient(135deg,#1DACE4 0%,#2B5CA8 100%);
    --dg-grad-mag: linear-gradient(90deg,#1DACE4 0%,#2B5CA8 50%,#B3199F 100%);

    font-family:"Grandview","Helvetica Neue",Arial,sans-serif;
    color:var(--dg-ink-800);
    background:var(--dg-surface);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
}
/* Break out of the theme's constrained content column → full-bleed page.
   NOTE: the previous `left:50% + margin-left:-50vw` pattern only lines up when
   the parent is exactly as wide as the viewport. On a narrower content column
   (e.g. a 1040px container at a 1280px viewport) it pushed the whole guide
   ~120px off the left edge — "you can only see half the page". The
   `calc(50% - 50vw)` margins self-correct for any parent width. */
/* The content column on this page is NOT centred (measured: 960px starting at
   x=40 in a 1280 viewport), so every 100vw full-bleed formula shifts the guide
   off the left edge. Let the guide's own ancestors span the full width instead
   and keep the guide itself at a plain 100%. */
/* IMPORTANT: scope to the PAGE CONTENT (.elementor-location-single), never the
   header — the nav island is also an .e-con, and an unscoped rule blew it up to
   full width on this page. */
body.tox-dg-page .elementor-location-single .elementor-element.e-con,
body.tox-dg-page .elementor-location-single .e-con > .e-con-inner,
body.tox-dg-page .elementor-location-single .elementor-element-41cedde,
body.tox-dg-page .elementor-location-single .elementor-element:has(> .elementor-widget-container > .tox-dg),
body.tox-dg-page .elementor-location-single .elementor-widget-shortcode,
body.tox-dg-page .elementor-location-single .elementor-widget-shortcode > .elementor-widget-container{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
}
.tox-dg{
    width:100%; max-width:100%; position:relative;
    margin-left:0; margin-right:0;
}
.tox-dg *{box-sizing:border-box;}
.tox-dg__wrap{max-width:1160px; margin:0 auto; padding:0 24px;}

/* ===== Section scaffolding ===== */
.tox-dg__section{padding:72px 0; border-top:1px solid var(--dg-ink-150);}
.tox-dg__section:first-of-type{border-top:none;}
.tox-dg__eyebrow{
    font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--dg-blue-600); margin:0 0 10px;
}
.tox-dg h2.tox-dg__h{
    font-family:"Grandview",sans-serif; font-weight:700;
    font-size:clamp(28px,4vw,48px); line-height:1.1; letter-spacing:-.01em;
    color:var(--dg-ink-950); margin:0 0 14px;
}
.tox-dg__lead{
    font-size:clamp(16px,1.6vw,20px); color:var(--dg-ink-600);
    max-width:820px; margin:0 0 36px;
}
.tox-dg__lead strong{color:var(--dg-ink-900); font-weight:700;}

/* ===== Cover ===== */
.tox-dg__cover{
    background:
        radial-gradient(120% 140% at 85% -10%, rgba(29,172,228,.16), transparent 55%),
        linear-gradient(180deg,#0C1119 0%, #05080D 100%);
    color:#fff; padding:96px 0 88px;
}
.tox-dg__cover .tox-dg__eyebrow{color:var(--dg-blue-300);}
.tox-dg__cover h1{
    font-family:"Grandview",sans-serif; font-weight:700;
    font-size:clamp(40px,7vw,76px); line-height:1.04; letter-spacing:-.02em;
    margin:0 0 8px; color:#fff;
}
.tox-dg__cover h1 .g{
    background:linear-gradient(90deg,#1DACE4 0%,#5BC3ED 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.tox-dg__cover p{color:rgba(255,255,255,.72); font-size:clamp(16px,1.8vw,20px); max-width:640px; margin:18px 0 0;}
.tox-dg__cover .tox-dg__meta{
    margin-top:34px; display:flex; gap:26px; flex-wrap:wrap;
    font-size:13px; color:rgba(255,255,255,.55);
}
.tox-dg__cover .tox-dg__meta b{color:rgba(255,255,255,.9); font-weight:700;}

/* ===== generic card ===== */
.tox-dg__cards{display:grid; gap:18px;}
.tox-dg__cards--3{grid-template-columns:repeat(3,1fr);}
.tox-dg__cards--4{grid-template-columns:repeat(4,1fr);}
.tox-dg__cards--2{grid-template-columns:repeat(2,1fr);}
.tox-dg__card{
    background:var(--dg-white); border:1px solid var(--dg-ink-150);
    border-radius:12px; padding:24px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.tox-dg__card h3{font-size:20px; font-weight:700; color:var(--dg-ink-950); margin:0 0 8px;}
.tox-dg__card .k{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dg-ink-400); margin:0 0 10px;}
.tox-dg__card p{margin:0; color:var(--dg-ink-600); font-size:15px;}

/* pills / tags */
.tox-dg__pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.tox-dg__pill{
    background:var(--dg-blue-50); color:var(--dg-blue-700);
    border:1px solid var(--dg-blue-100); border-radius:999px;
    font-size:13px; font-weight:700; letter-spacing:.04em; padding:8px 16px;
}

/* ===== Logo ===== */
.tox-dg__logogrid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.tox-dg__logobox{
    border-radius:14px; border:1px solid var(--dg-ink-150);
    min-height:220px; display:flex; align-items:center; justify-content:center; padding:40px;
}
.tox-dg__logobox img{width:min(70%,320px); height:auto; display:block;}
.tox-dg__logobox--light{background:var(--dg-white);}
.tox-dg__logobox--ink{background:var(--dg-ink-950); border-color:var(--dg-ink-800);}
.tox-dg__cap{font-size:14px; color:var(--dg-ink-500); margin:10px 2px 0;}
.tox-dg__cap b{color:var(--dg-ink-800);}

.tox-dg__variants{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px;}
.tox-dg__variant{background:var(--dg-white); border:1px solid var(--dg-ink-150); border-radius:12px; padding:20px;}
.tox-dg__variant .sw{height:120px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.tox-dg__variant .sw img{width:min(60%,220px); height:auto;}
.tox-dg__variant .sw--light{background:var(--dg-white); border:1px solid var(--dg-ink-100);}
.tox-dg__variant .sw--ink{background:var(--dg-ink-950);}
.tox-dg__variant h4{margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dg-ink-900);}
.tox-dg__variant p{margin:0; font-size:14px; color:var(--dg-ink-500);}

/* Do / Don't */
.tox-dg__dodont{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.tox-dg__dd{background:var(--dg-white); border:1px solid var(--dg-ink-150); border-radius:12px; overflow:hidden;}
.tox-dg__dd .fig{height:110px; display:flex; align-items:center; justify-content:center;}
.tox-dg__dd .fig img{width:60%; height:auto;}
.tox-dg__dd .body{padding:14px 16px 18px;}
.tox-dg__dd .tag{font-size:13px; font-weight:700; margin:0 0 4px;}
.tox-dg__dd .tag--no{color:var(--dg-down);}
.tox-dg__dd .tag--yes{color:var(--dg-up);}
.tox-dg__dd p{margin:0; font-size:13px; color:var(--dg-ink-500);}

/* ===== Colour ===== */
.tox-dg__swatches{display:grid; grid-template-columns:repeat(11,1fr); gap:8px;}
.tox-dg__swatches--ink{grid-template-columns:repeat(7,1fr);}
.tox-dg__swatches--mag{grid-template-columns:repeat(5,1fr); max-width:640px;}
.tox-dg__sw{border-radius:10px; overflow:hidden; border:1px solid var(--dg-ink-150); background:var(--dg-white);}
.tox-dg__sw .chip{height:76px;}
.tox-dg__sw .meta{padding:8px 8px 10px;}
.tox-dg__sw .name{font-size:12px; font-weight:700; color:var(--dg-ink-900); display:block;}
.tox-dg__sw .hex{font-size:11px; color:var(--dg-ink-400); letter-spacing:.02em;}
.tox-dg__anchor{outline:2px solid var(--dg-blue-600); outline-offset:2px;}

.tox-dg__gradients{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.tox-dg__grad{border-radius:12px; overflow:hidden; border:1px solid var(--dg-ink-150); background:var(--dg-white);}
.tox-dg__grad .band{height:120px;}
.tox-dg__grad .meta{padding:14px 16px 18px;}
.tox-dg__grad .meta b{display:block; font-size:15px; color:var(--dg-ink-950);}
.tox-dg__grad .meta code{font-size:12px; color:var(--dg-ink-500); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

.tox-dg__semantic{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.tox-dg__sem{border-radius:12px; overflow:hidden; border:1px solid var(--dg-ink-150);}
.tox-dg__sem .head{height:70px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px;}
.tox-dg__sem .meta{background:var(--dg-white); padding:12px 14px;}
.tox-dg__sem .meta .name{font-weight:700; font-size:14px; color:var(--dg-ink-900);}
.tox-dg__sem .meta .hex{font-size:12px; color:var(--dg-ink-400);}

/* ===== Typography ===== */
.tox-dg__weights{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tox-dg__weight{background:var(--dg-white); border:1px solid var(--dg-ink-150); border-radius:12px; padding:22px 24px;}
.tox-dg__weight .demo{font-size:30px; color:var(--dg-ink-950); margin-bottom:8px;}
.tox-dg__weight .lbl{font-size:13px; color:var(--dg-ink-500);}
.tox-dg__scale{background:var(--dg-white); border:1px solid var(--dg-ink-150); border-radius:12px; overflow:hidden;}
.tox-dg__scale .row{display:flex; align-items:baseline; gap:22px; padding:14px 22px; border-top:1px solid var(--dg-ink-100);}
.tox-dg__scale .row:first-child{border-top:none;}
.tox-dg__scale .tok{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--dg-blue-600); width:88px; flex:0 0 auto;}
.tox-dg__scale .px{font-size:12px; color:var(--dg-ink-400); width:52px; flex:0 0 auto;}
.tox-dg__scale .ex{font-weight:700; color:var(--dg-ink-950); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ===== Imagery ===== */
.tox-dg__imagery{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:stretch;}
.tox-dg__glass{
    border-radius:14px; min-height:300px; position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end; padding:36px;
    color:var(--dg-ink-950);
    background:
        linear-gradient(135deg, rgba(255,255,255,.6), rgba(234,246,253,.3)),
        conic-gradient(from 210deg at 70% 20%, #eaf2fb, #f6f8fb, #e7eef8, #f2f6fc, #eaf2fb),
        var(--dg-surface);
    border:1px solid var(--dg-ink-150);
}
.tox-dg__glass .eb{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dg-blue-600); margin-bottom:8px;}
.tox-dg__glass .hl{font-family:"Grandview",sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,40px); line-height:1.08; letter-spacing:-.01em;}
.tox-dg__inkcard{
    background:var(--dg-ink-950); border-radius:14px; padding:32px;
    display:flex; align-items:center; justify-content:center;
}
.tox-dg__inkcard img{width:min(70%,260px); height:auto;}
.tox-dg__note{
    margin-top:18px; background:var(--dg-blue-50); border:1px solid var(--dg-blue-100);
    border-radius:12px; padding:16px 20px; color:var(--dg-ink-700); font-size:14px;
}
.tox-dg__note b{color:var(--dg-ink-900);}

/* ===== Responsive ===== */
@media (max-width:900px){
    .tox-dg__cards--3,.tox-dg__cards--4,.tox-dg__dodont,.tox-dg__semantic{grid-template-columns:repeat(2,1fr);}
    .tox-dg__logogrid,.tox-dg__gradients,.tox-dg__variants,.tox-dg__imagery{grid-template-columns:1fr;}
    .tox-dg__weights{grid-template-columns:1fr;}
    .tox-dg__swatches{grid-template-columns:repeat(6,1fr);}
    .tox-dg__swatches--ink{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:560px){
    .tox-dg__cards--3,.tox-dg__cards--4,.tox-dg__dodont,.tox-dg__semantic{grid-template-columns:1fr;}
    .tox-dg__swatches,.tox-dg__swatches--ink,.tox-dg__swatches--mag{grid-template-columns:repeat(3,1fr);}
    .tox-dg__scale .ex{font-size:20px!important;}
}

/* ============================================================
   Downloads — brand asset download buttons (2026-08)
   ============================================================ */
.tox-dg__dlwrap{ display:flex; gap:14px; flex-wrap:wrap; }
.tox-dg__dl{
    display:inline-flex; align-items:center; gap:12px; text-decoration:none;
    font-family:"Grandview",sans-serif; font-weight:700; font-size:15px; line-height:1;
    border-radius:12px; padding:16px 22px;
    transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.tox-dg__dl svg{ width:20px; height:20px; flex:0 0 auto; }
.tox-dg__dl .tox-dg__dlmeta{ display:flex; flex-direction:column; gap:3px; }
.tox-dg__dl .tox-dg__dlfmt{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.72; }
.tox-dg__dl--primary{
    background:linear-gradient(135deg,#2b5ca8 0%,#1dace4 175%); color:#fff;
    box-shadow:0 10px 24px rgba(43,92,168,.30);
}
.tox-dg__dl--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(43,92,168,.42); }
.tox-dg__dl--ghost{ background:var(--dg-white); color:var(--dg-ink-900); border:1px solid var(--dg-ink-150); }
.tox-dg__dl--ghost:hover{ border-color:var(--dg-blue-400); transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.08); }
/* small per-logo format chips */
.tox-dg__dlmini{ display:flex; gap:8px; margin-top:12px; }
.tox-dg__chip{
    display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    font-size:12px; font-weight:700; letter-spacing:.02em;
    color:var(--dg-blue-700); background:var(--dg-blue-50); border:1px solid var(--dg-blue-100);
    border-radius:9px; padding:8px 13px; transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.tox-dg__chip:hover{ background:var(--dg-blue-100); border-color:var(--dg-blue-400); transform:translateY(-1px); }
.tox-dg__chip svg{ width:14px; height:14px; }
@media (max-width:560px){ .tox-dg__dlwrap{ flex-direction:column; } .tox-dg__dl{ width:100%; } }

/* One clear page heading: the dark cover IS the title. The theme single-template
   renders the post title as an extra H1 above it (container 83db647) — collapse it
   WITHOUT display:none so document flow/offsets stay intact. */
.elementor-element-83db647 {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* The primary "Brand guidelines / PDF" button inherited the theme link colour
   (#2563EB), rendering blue text + blue icon on the blue gradient. Force white. */
.tox-dg a.tox-dg__dl--primary,
.tox-dg a.tox-dg__dl--primary .tox-dg__dlmeta span,
.tox-dg a.tox-dg__dl--primary .tox-dg__dlfmt { color: #ffffff !important; }
.tox-dg a.tox-dg__dl--primary svg { stroke: #ffffff !important; color: #ffffff !important; }
.tox-dg a.tox-dg__dl--primary .tox-dg__dlfmt { opacity: .85 !important; }