/* globaly.agency additions on top of site.css (src/global/layout.mjs): wordmark, USD plan cards, proposal band and form. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200; font-display: swap; src: url(../fonts/pjs-200.woff2) format("woff2"); }

.nav .logo, .gx-logo { text-decoration: none; }
.gx-logo { display: inline-flex; align-items: center; font: 800 22px/1 var(--font); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.gx-logo img { width: 34px; height: 34px; margin-right: 3px; } /* plus the icon art's ~7% side padding */
.gx-logo .dot { color: var(--blue); }
.gx-logo .ag { font-weight: 200; }
.nav .logo .gx-logo img { height: 34px; width: 34px; } /* site.css sizes .nav .logo img for the full logo */
footer .gx-logo { color: #fff; margin-bottom: 12px; }
@media (max-width: 760px) { .gx-logo { font-size: 19px; } .gx-logo img, .nav .logo .gx-logo img { width: 30px; height: 30px; } }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tier { border: 2px solid var(--ink); border-radius: 22px; padding: 28px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.tier h3 { margin: 0; }
.tier.pop { background: var(--blue); color: #fff; border-color: var(--blue); }
.tier .amt { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tier .amt small { font-size: 1rem; font-weight: 500; opacity: .75; }
.tier p { margin: 0; }
.tier ul { margin: 0; padding-left: 18px; line-height: 1.7; }
.tier .btn { margin-top: auto; }
.tier.pop .btn { --bg: #fff; --fg: var(--blue); }
.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 22px; }
.addons div { border: 1.5px dashed rgba(11, 11, 15, .3); border-radius: 14px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; background: #fff; }
.tiers-note { text-align: center; color: var(--muted); margin-top: 14px; }

.prop { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.prop .ph img { width: 100%; height: auto; border-radius: 22px; display: block; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; }

.gform { display: grid; gap: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 22px; padding: 28px; }
.gform label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.gform input, .gform select, .gform textarea { font: 400 16px var(--font); padding: 12px 14px; border: 1.5px solid rgba(11, 11, 15, .2); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.gform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gform fieldset { border: 0; padding: 0; margin: 0; }
.gform legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.gform .checks { display: flex; flex-wrap: wrap; gap: 8px; }
.gform .checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; border: 1.5px solid rgba(11, 11, 15, .15); border-radius: 99px; padding: 6px 12px; }
.gform .checks input { width: auto; }
.gform .hp { position: absolute; left: -9999px; }
.gform .err { background: #fff1f0; border: 1.5px solid #e5484d; color: #a3171c; border-radius: 12px; padding: 10px 14px; margin: 0; }
.gform .small { color: var(--muted); font-size: .85rem; margin: 0; }
.sent { text-align: center; justify-items: center; }
.sent .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 2rem; }
@media (max-width: 760px) { .prop, .gform .row { grid-template-columns: 1fr; } }
.price-head { display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: 32px; align-items: center; margin-bottom: 28px; }
.price-head .sec-head { margin-bottom: 0; text-align: left; }
.price-head .ph img { width: 100%; height: auto; border-radius: 22px; display: block; }
@media (max-width: 760px) { .price-head { grid-template-columns: 1fr; } }