/* CoconutJL 1.1.1 — compact connection card and database-authored phone tutorials. */
.cjl-connection-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px 28px;background:linear-gradient(120deg,#174d37,#0a3828);border:1px solid #6e8250;border-radius:24px;padding:27px 28px;margin:0 0 42px;box-shadow:inset 0 1px 0 #dbe8a818}
.cjl-connection-copy{display:flex;align-items:center;gap:18px;flex:1 1 490px;min-width:0}.cjl-connection-copy>div{min-width:0}.cjl-connection-shield{display:flex;align-items:center;justify-content:center;flex:0 0 54px;width:54px;height:64px;border-radius:18px;background:#2a5537;border:1px solid #6e8650;color:var(--gold)}.cjl-connection-labels{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:8px}.cjl-connection-labels .eyebrow{font-size:10px;letter-spacing:.15em;margin:0}.cjl-device-label{font-size:11px;line-height:1.5;color:#e0eadb}.cjl-connection-copy h2{font-size:25px;letter-spacing:-.035em;line-height:1.3;margin:0 0 7px}.cjl-connection-copy p{font-size:14px;line-height:1.75;color:#deeadc;margin:0;max-width:650px}.cjl-connection-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px;flex:0 1 auto;min-width:0}.cjl-connection-actions .button{font-size:13px;min-height:49px;padding:12px 20px;white-space:normal;text-align:center}.button.cjl-vpn-download{background:linear-gradient(180deg,#ffe8a3 0%,#f1c468 48%,#b77b2a 100%);color:#082114;border:1px solid #f4d889;box-shadow:inset 0 1px 0 #fff5d6aa,0 5px 20px #001e1433}.button.cjl-vpn-download:hover{background:linear-gradient(180deg,#fff0bd,#f9d98a 52%,#d5a354);color:#102b1c}.button.cjl-vpn-tutorial{border-color:#c1bc79;background:#123d2a;color:#fff2bb}.button.cjl-vpn-tutorial:hover{background:#25533a;color:#fff8dc}.button.cjl-vpn-tutorial:disabled{opacity:.6;cursor:default}.cjl-vpn-fallback{flex-basis:100%;font-size:13px;margin:0}
#cjl-vpn-dialog{width:min(980px,calc(100vw - 36px));height:min(90vh,1000px);height:min(90dvh,1000px);max-height:calc(100dvh - 24px);padding:0;border-radius:24px;border:1px solid #8a8c59;background:#082f22;color:var(--ink);overflow:hidden}
#cjl-vpn-dialog[open]{display:flex;flex-direction:column}#cjl-vpn-dialog::backdrop{background:#00150de0;backdrop-filter:blur(6px)}#cjl-vpn-dialog .dialog-head{flex:0 0 auto;background:linear-gradient(120deg,#174d37,#0c3425);padding:22px 26px;border-bottom:1px solid var(--line)}#cjl-vpn-dialog .dialog-head>div{min-width:0}#cjl-vpn-dialog .dialog-head h2{font-size:clamp(22px,3vw,32px);line-height:1.25;margin:0 0 6px}#cjl-vpn-dialog .dialog-head p{font-size:13px;color:var(--muted);margin:0}#cjl-vpn-dialog .dialog-head .icon-button{flex:0 0 44px;min-height:44px;align-self:flex-start}#cjl-vpn-dialog .vpn-tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:15px 24px;background:#0b3526;border-bottom:1px solid var(--line)}#cjl-vpn-dialog .vpn-tabs button{border-radius:14px;font-size:15px;font-weight:700;min-width:0}#cjl-vpn-dialog .vpn-tabs button[aria-selected=true]{background:linear-gradient(180deg,#ffe4a2,#dca74e);color:#173722;border-color:#f8dc8b}#cjl-vpn-dialog .dialog-content{flex:1 1 auto;min-height:0;max-height:none;padding:22px 24px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}#cjl-vpn-dialog [role=tabpanel]{min-width:0}#cjl-vpn-dialog .cjl-vpn-platform>h2,#cjl-vpn-dialog .cjl-vpn-platform>.wp-block-group__inner-container>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#cjl-vpn-dialog .cjl-vpn-platform{padding:0;margin:0}
.cjl-vpn-steps,.cjl-vpn-steps>.wp-block-group__inner-container{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.cjl-vpn-step{min-width:0;background:linear-gradient(145deg,#13432e,#0b3324);border:1px solid #617948;border-radius:21px;padding:20px;margin:0!important;display:flex;flex-direction:column;align-items:stretch}.cjl-vpn-step>h3,.cjl-vpn-step>.wp-block-group__inner-container>h3{font-size:18px;text-align:center;color:#f9e2a0;background:#2a5032;border:1px solid #68814b;padding:10px;border-radius:30px;margin:0 0 16px;line-height:1.5}.cjl-vpn-step>p,.cjl-vpn-step>.wp-block-group__inner-container>p{font-size:15px;line-height:1.75;color:#e3eddf;margin:0 0 18px;min-height:79px}.cjl-vpn-step-media{width:100%;max-width:340px;margin:0 auto!important;align-self:center;display:block}.cjl-vpn-phone-crop{position:relative;overflow:hidden;width:100%;background:#060806;border-radius:clamp(18px,4vw,37px);isolation:isolate}.cjl-vpn-phone-crop>img{position:absolute;max-width:none!important;display:block;object-fit:contain;margin:0;border:0;border-radius:0!important}.cjl-vpn-platform{scroll-margin-top:calc(var(--header-h) + var(--admin-h) + 20px);margin-block:38px}.cjl-vpn-platform>h2{font-size:28px;margin-bottom:24px}.cjl-vpn-dialog-footer{flex:0 0 auto;padding:14px 24px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#0b3526}.cjl-vpn-dialog-footer p{font-size:12px;text-align:center;margin:0 0 10px;color:var(--muted)}.cjl-vpn-dialog-footer .button{width:100%;min-height:45px;border-radius:14px;font-size:14px}
@media(max-width:700px){.cjl-connection-card{padding:22px;gap:20px;border-radius:21px;margin-bottom:36px;display:block}.cjl-connection-copy{gap:14px;align-items:flex-start}.cjl-connection-shield{flex-basis:44px;width:44px;height:52px;border-radius:15px}.cjl-connection-shield svg{width:27px;height:27px}.cjl-connection-labels{gap:5px 10px;margin-bottom:9px}.cjl-connection-labels .eyebrow{font-size:9px;letter-spacing:.1em}.cjl-device-label{font-size:10px}.cjl-connection-copy h2{font-size:22px;line-height:1.35}.cjl-connection-copy p{font-size:14px;line-height:1.75}.cjl-connection-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.cjl-connection-actions .button{min-width:0;width:100%;padding:11px 10px;min-height:54px;font-size:13px;border-radius:16px;overflow-wrap:break-word}.cjl-vpn-fallback{margin-top:16px}#cjl-vpn-dialog{width:calc(100vw - 16px);height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:18px}#cjl-vpn-dialog .dialog-head{padding:17px 16px;gap:8px}#cjl-vpn-dialog .dialog-head h2{font-size:23px}#cjl-vpn-dialog .dialog-head p{font-size:12px}#cjl-vpn-dialog .vpn-tabs{padding:12px 16px;gap:10px}#cjl-vpn-dialog .dialog-content{padding:16px;scrollbar-gutter:auto}.cjl-vpn-dialog-footer{padding:12px 16px max(13px,env(safe-area-inset-bottom))}}
@media(max-width:600px){.cjl-vpn-steps,.cjl-vpn-steps>.wp-block-group__inner-container{grid-template-columns:minmax(0,1fr)}.cjl-vpn-step{padding:18px 15px}.cjl-vpn-step>p,.cjl-vpn-step>.wp-block-group__inner-container>p{min-height:0;font-size:15px;margin-bottom:18px}.cjl-vpn-step-media{max-width:290px}.cjl-vpn-step>h3,.cjl-vpn-step>.wp-block-group__inner-container>h3{font-size:17px;margin-bottom:14px}.cjl-vpn-phone-crop{border-radius:32px}}
@media(prefers-reduced-motion:reduce){#cjl-vpn-dialog,.cjl-connection-card{animation:none!important;transition:none!important}}

/* WordPress legacy Group wrappers must span the parent grid. */
.cjl-vpn-steps>.wp-block-group__inner-container{grid-column:1 / -1;min-width:0;width:100%;max-width:none;margin:0!important}
.cjl-vpn-step>.wp-block-group__inner-container{display:flex;flex-direction:column;align-items:stretch;min-width:0;width:100%;max-width:none;margin:0!important}
.cjl-vpn-step>p:empty,.cjl-vpn-step>.wp-block-group__inner-container>p:empty{display:none}
