/* Professional Gateway widget. Sits inside the WordPress page body, so the widget paints its own background
   (safe in the visitor's light or dark mode) and has no site chrome. */
body { background: transparent; font-size: 1rem; }
.gw { background: var(--bg-2); color: var(--text); border: var(--bw) solid var(--border); border-radius: 24px; padding: clamp(1rem, 4vw, 2.25rem); max-width: 1080px; margin: 4px auto; }
.small { font-size: .9rem; } .center { text-align: center; }
.eyebrow { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--muted); margin: 0 0 .5rem; }

.hero { text-align: center; max-width: 760px; margin: 0 auto 2rem; }
.logo-panel { background: #fff; border: var(--bw) solid var(--border); border-radius: 20px; box-shadow: var(--sh); padding: .5rem; margin: 0 auto 1.5rem; max-width: 640px; }
.logo-panel img { display: block; width: 100%; height: auto; border-radius: 14px; }
.hero-title { font-size: clamp(1.9rem, 5vw, 3rem); }
.lead { font-size: 1.15rem; color: var(--muted); }

.benefits { list-style: none; margin: 0 0 2.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.benefits .card { padding: 1.1rem 1.2rem; }
.benefits h4 { font-size: 1.15rem; margin: .4rem 0 .4rem; }
.benefits p { margin: 0; color: var(--muted); }
.ico { display: grid; place-items: center; width: 52px; height: 52px; font-size: 1.6rem; border: var(--bw) solid var(--border); border-radius: 14px; }
.b1 .ico { background: var(--lime); } .b2 .ico { background: var(--pink); } .b3 .ico { background: var(--blue); } .b4 .ico { background: var(--amber); }
.b5 .ico { background: var(--purple); }
.ico { color: #16121f; }

.join h3, .how h3 { text-align: center; font-size: clamp(1.5rem, 4vw, 2rem); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; align-items: stretch; margin-bottom: 2.25rem; }
.plan { display: flex; flex-direction: column; padding: 1.25rem; position: relative; }
.plan h4 { font-size: 1.4rem; margin: 0 0 .25rem; }
.plan.featured { background: var(--card); outline: 4px solid var(--lime-deep); outline-offset: 3px; }
.flag { display: inline-block; align-self: flex-start; background: var(--lime); color: #16121f; font-weight: 700; font-size: .8rem; padding: .2em .8em; border: 2px solid var(--border); border-radius: 999px; margin: 0 0 .7rem; }
.flag.alt { background: var(--bg-2); color: var(--text); }
.price { margin: .1rem 0 .8rem; }
.amt { font-family: var(--display); font-size: 2.3rem; line-height: 1; }
.per { color: var(--muted); font-weight: 700; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.2rem; flex: 1; }
.ticks li { padding-left: 1.7em; position: relative; margin-bottom: .45em; }
.ticks li::before { content: '\2713'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--good); }
.plan .btn { width: 100%; }
.fine { font-size: .82rem; color: var(--muted); margin: .8rem 0 0; }
.err { color: var(--bad); background: var(--bad-bg); padding: .5rem .75rem; border-radius: 10px; font-weight: 700; }

.steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.steps li { display: flex; gap: .8rem; align-items: flex-start; }
.n { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--purple-fill); color: #fff; font-family: var(--display); border: 2px solid var(--border); }

.welcome { text-align: center; max-width: 640px; margin: 0 auto; padding: 1rem 0; }
.welcome:focus { outline: none; }
.welcome-actions { margin: 1.25rem 0; }
.billing { text-align: left; margin-top: 1.5rem; background: var(--card); border: 2px solid var(--border); border-radius: 12px; padding: .7rem 1rem; }
.billing summary { cursor: pointer; font-weight: 700; }