/* Dojostreams shared site chrome (ADR 0026): fonts, page base, the desktop announcement bar + header, the phone
 * "Frost" header with its glass-sheet menu, and the footer. Used by the theme's own page templates (trial page
 * ADR 0025, guides page ADR 0026), whose <body> carries .dj-site; loaded before the page's own stylesheet. Moved
 * unchanged from assets/trial/trial.css (selectors .dj-trial → .dj-site). */

/* ================= fonts (the site's own self-hosted Lexend and DM Sans, Latin subset) ================= */
@font-face{font-family:'Lexend';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/lexend-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Arial sized to the brand fonts' width while they load, so text wraps the same before and after (no layout shift).
 * Ratios measured in Chrome on the page's own text: Lexend 1.06–1.11 × Arial, DM Sans 1.01–1.04 × Arial. */
@font-face{font-family:dj-lexend-fb;src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:107%;ascent-override:93%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:dj-dmsans-fb;src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:102%;ascent-override:97%;descent-override:30%;line-gap-override:0%}

/* ================= page base ================= */
.dj-site{margin:0;background:#ECECF4;color:#2F1C6A;font-family:'DM Sans',dj-dmsans-fb,system-ui,sans-serif;-webkit-text-size-adjust:100%}
.dj-site main{display:block;overflow-x:clip}
.dj-site a{color:#5A2FE0}
.dj-site a:hover{color:#2F1C6A}
.dj-site .wrap{max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.dj-site .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dj-site .skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:12px 16px;border-radius:12px;background:#fff;font:600 15px Lexend,dj-lexend-fb,sans-serif}
.dj-site .skip:focus{left:12px}
/* No grey/blue flash on tap (Android Chrome's default tap highlight); keyboard focus rings stay. */
.dj-site a,.dj-site button,.dj-site label,.dj-site input,.dj-site select,.dj-site textarea,.dj-site summary{-webkit-tap-highlight-color:transparent}
.dj-site .ib:focus-visible,.dj-site .dhd a:focus-visible,.dj-site .ft a:focus-visible{outline:2px solid #673DE6;outline-offset:3px}

/* which header shows where */
.dj-site .annc,.dj-site .dhd{display:none}
@media (min-width:1100px){.dj-site .annc,.dj-site .dhd{display:block}}
@media (min-width:1200px){.dj-site .wrap{padding:0 24px}}

/* ================= desktop announcement bar + header (from 1100 px) ================= */
.dj-site .annc{background:#2F1C6A}
.dj-site .annc .wrap{min-height:40px;display:flex;align-items:center;justify-content:center;gap:8px;color:#ECE8FF;text-align:center;flex-wrap:wrap;font:400 14px/1.5 'DM Sans',dj-dmsans-fb,sans-serif}
.dj-site .annc a{color:#fff}
.dj-site .dhd{position:relative;z-index:3;background:rgba(255,255,255,.9);border-bottom:1px solid #F0EEF8}
.dj-site .dhd-in{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.dj-site .dlogo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#171420;font:600 16px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.1em}
.dj-site .dlogo:hover{color:#171420}
.dj-site .nav{display:flex;gap:28px;flex-wrap:wrap}
.dj-site .nav a,.dj-site .dlive{color:#2F1C6A;text-decoration:none;font:500 15px Lexend,dj-lexend-fb,sans-serif;min-height:44px;display:flex;align-items:center}
.dj-site .nav a[aria-current]{color:#5A2FE0;box-shadow:inset 0 -2px 0 #673DE6}
.dj-site .dhd-r{display:flex;align-items:center;gap:20px}
.dj-site .dcta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:999px;background:linear-gradient(180deg,#7350F0 0%,#673DE6 100%);color:#fff;font:600 15px Lexend,dj-lexend-fb,sans-serif;text-decoration:none;box-shadow:0 10px 24px -12px rgba(103,61,230,.6)}
.dj-site .dcta:hover{color:#fff;background:linear-gradient(180deg,#6A45EA 0%,#5E35DB 100%)}

/* ================= phone header (below 1100 px): sticky "Frost" glass =================
 * Pinned to the top while scrolling; transparent over the hero at the top, then a white frosted layer, a lavender
 * bottom line and a soft shadow fade in once the page has scrolled 8 px (trial.js toggles .is-scrolled). It overlaps
 * the hero (margin-bottom:-64px; the hero gets 64 px of top padding). No ancestor clips it (main's overflow-x:clip
 * does not contain it: the header sits outside main). */
.dj-site .hdr{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:100;height:64px;margin-bottom:-64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px;isolation:isolate}
.dj-site .hdr::before,.dj-site .hdr::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s cubic-bezier(.2,.8,.2,1)}
.dj-site .hdr::before{z-index:-2;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%)}
.dj-site .hdr::after{z-index:-1;box-shadow:inset 0 -1px 0 rgba(236,234,248,.95),0 10px 26px -18px rgba(47,28,106,.35)}
.dj-site .hdr.is-scrolled::before,.dj-site .hdr.is-scrolled::after{opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dj-site .hdr::before{background:rgba(255,255,255,.96)}}
@media (prefers-reduced-motion:reduce){.dj-site .hdr::before,.dj-site .hdr::after{transition:none}}
.dj-site .hdr .logo:focus-visible{outline:2px solid #673DE6;outline-offset:3px;border-radius:8px}
@media (min-width:1100px){.dj-site .hdr{display:none}} /* desktop keeps its own header */
/* ================= phone menu ("Extension · Clear"): the Frost header grows into one glass sheet =================
 * The sheet starts behind the 64 px bar and unfolds downward (clip-path), so bar and menu read as one piece; once it
 * has unfolded, the bar's own glass fades away (no seam). trial.js toggles .open on .hdr, .dj-menu and .dj-scrim. */
.dj-site .burger path{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .25s}
.dj-site .hdr.open .burger .l1{transform:translateY(5px) rotate(45deg)}
.dj-site .hdr.open .burger .l2{opacity:0;transform:scaleX(.3)}
.dj-site .hdr.open .burger .l3{transform:translateY(-5px) rotate(-45deg)}
.dj-site .hdr.open .burger{background:#F0EDFF;border-color:#E4DFFA;color:#4B25C9;box-shadow:none}
.dj-site .hdr .ib:focus-visible{outline:2px solid #673DE6;outline-offset:2px}
.dj-site .hdr.open::before{opacity:0;transition:opacity .15s linear .32s}
.dj-site .hdr.open::after{box-shadow:none}
.dj-site.dj-menu-open{overflow:hidden}
.dj-site .dj-scrim{position:fixed;inset:0;z-index:98;background:rgba(23,20,32,.1);opacity:0;transition:opacity .45s cubic-bezier(.2,.8,.2,1)}
.dj-site .dj-scrim[hidden]{display:none}
.dj-site .dj-scrim.open{opacity:1}
.dj-site .dj-menu{position:fixed;left:0;right:0;top:var(--wp-admin--admin-bar--height,0px);z-index:99;box-sizing:border-box;padding:66px 10px 14px;border-radius:0 0 26px 26px;max-height:100dvh;overflow:auto;background:radial-gradient(120% 55% at 0% 0%,rgba(255,255,255,.32),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.71) 0%,rgba(244,245,255,.6) 100%);-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.75),0 34px 64px -28px rgba(47,28,106,.38);clip-path:inset(0 0 calc(100% - 64px) 0 round 0 0 26px 26px);opacity:0;visibility:hidden;transition:clip-path .42s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,1,1) .08s,visibility 0s linear .45s}
.dj-site .dj-menu.open{clip-path:inset(0 0 0 0 round 0 0 26px 26px);opacity:1;visibility:visible;transition:clip-path .65s cubic-bezier(.16,1,.3,1),opacity .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s}
.dj-site .dj-menu::before{content:"";position:absolute;left:24px;right:24px;top:64px;height:1px;opacity:0;transition:opacity .4s .25s;background:linear-gradient(90deg,rgba(225,221,245,0),rgba(225,221,245,.9) 20%,rgba(225,221,245,.9) 80%,rgba(225,221,245,0))}
.dj-site .dj-menu.open::before{opacity:1}
.dj-site .mlist{list-style:none;margin:0;padding:2px 0 0;display:flex;flex-direction:column;gap:2px}
.dj-site .mi{opacity:0;transform:translateY(-8px);transition:opacity .18s,transform .25s}
.dj-site .dj-menu.open .mi{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.16,1,.3,1)}
.dj-site .dj-menu.open .mi:nth-child(1){transition-delay:.10s}
.dj-site .dj-menu.open .mi:nth-child(2){transition-delay:.14s}
.dj-site .dj-menu.open .mi:nth-child(3){transition-delay:.18s}
.dj-site .dj-menu.open .mi:nth-child(4){transition-delay:.22s}
.dj-site .dj-menu.open .mi:nth-child(5){transition-delay:.26s}
.dj-site .dj-menu.open .mi:nth-child(6){transition-delay:.30s}
.dj-site .dj-menu.open .mfoot{transition-delay:.34s}
.dj-site .dj-menu.open .mnote{transition-delay:.38s}
.dj-site .mrow{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 14px;border-radius:14px;text-decoration:none;font:500 17px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A;transition:background-color .2s,color .2s}
.dj-site .mrow>span{display:flex;align-items:center;gap:10px}
.dj-site .mrow:hover{background:rgba(255,255,255,.55);color:#2F1C6A}
.dj-site .mrow:focus-visible{outline:2px solid #673DE6;outline-offset:-2px}
.dj-site .mrow .chev{flex:none;color:#B9B3D6;transition:transform .25s cubic-bezier(.2,.8,.2,1),color .2s}
.dj-site .mrow:hover .chev{transform:translateX(2px);color:#673DE6}
.dj-site .mrow.cur{background:rgba(240,237,255,.78);color:#5A2FE0}
.dj-site .mrow.cur .chev{color:#673DE6}
.dj-site .cdot{width:6px;height:6px;border-radius:50%;background:#673DE6;box-shadow:0 0 0 3px rgba(103,61,230,.15)}
.dj-site .mfoot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding:12px 6px 4px;border-top:1px solid rgba(255,255,255,.7)}
.dj-site .mbtn,.dj-site .mbtn2{height:50px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:600 15px Lexend,dj-lexend-fb,sans-serif}
.dj-site .mbtn{background:linear-gradient(180deg,#7350F0 0%,#673DE6 100%);color:#fff;box-shadow:0 10px 24px -12px rgba(103,61,230,.6)}
.dj-site .mbtn:hover{color:#fff}
.dj-site .mbtn2{background:rgba(255,255,255,.7);border:1.5px solid rgba(217,214,238,.9);color:#2F1C6A;font-weight:500}
.dj-site .mbtn:focus-visible,.dj-site .mbtn2:focus-visible,.dj-site .mnote a:focus-visible{outline:2px solid #673DE6;outline-offset:2px}
.dj-site .mnote{margin:6px 0 4px;text-align:center;font:400 13px/1.45 'DM Sans',dj-dmsans-fb,sans-serif;color:#5E6175}
@media (prefers-reduced-motion:reduce){
	.dj-site .dj-menu,.dj-site .dj-menu.open,.dj-site .mi,.dj-site .dj-menu.open .mi,.dj-site .dj-scrim,.dj-site .burger path,.dj-site .hdr.open::before{transition:opacity .01s!important;transform:none!important}
	.dj-site .dj-menu,.dj-site .dj-menu.open{clip-path:none!important}
}
@media (min-width:1100px){.dj-site .burger,.dj-site .dj-menu,.dj-site .dj-scrim{display:none!important}}
.dj-site .hdr .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#171420;font:600 14px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.1em;min-height:44px}
.dj-site .hdr .ib{box-sizing:border-box;width:44px;height:44px;border-radius:999px;border:1px solid #E4E1F5;background:#FFFFFF;color:#2F1C6A;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 4px 12px -6px rgba(47,28,106,.25)}

/* ---- footer ---- */
.dj-site .ft{background:#ECECF4;padding:40px 0 32px;color:#2F1C6A}
.dj-site .ftw{display:flex;flex-direction:column;gap:28px}
.dj-site .ftr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.dj-site .ftb{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.dj-site .ftb svg{width:36px;height:36px}
.dj-site .fcol{display:flex;flex-direction:column}
.dj-site .fh{font:600 15px Lexend,dj-lexend-fb,sans-serif;margin-bottom:4px;color:#2F1C6A}
.dj-site .fcol a{color:#494C4F;text-decoration:none;font:400 15px 'DM Sans',dj-dmsans-fb,sans-serif;min-height:40px;display:flex;align-items:center}
.dj-site .fcol a:hover{color:#2F1C6A}
.dj-site .ftc{border-top:1px solid #D9D6EE;padding-top:18px;color:#494C4F}
@media (min-width:1200px){
	.dj-site .ft{padding:72px 0 40px}
	.dj-site .ftw{gap:48px}
	.dj-site .ftr{display:flex;flex-wrap:wrap;gap:40px 64px}
	.dj-site .ftb{flex:2 1 320px;max-width:420px;gap:16px;margin:0}
	.dj-site .ftb svg{width:40px;height:40px}
	.dj-site .fcol{flex:1 1 160px;gap:6px}
	.dj-site .fh{font-size:17px;margin-bottom:6px}
	.dj-site .fcol a{min-height:36px}
	.dj-site .ftc{padding-top:24px}
}