/* bind-cover.css
 *
 * Product-demo chrome, extracted from content on 2026-09-01. This styles a
 * PICTURE OF THE PRODUCT, not the website. Nothing in here may reference a
 * website token, and nothing in here belongs in style.css.
 *
 * Was inline in: wp_block 19 (the homepage product pillars).
 *
 * The "Bind Cover?" dialog. It was called policy-admin-bind until 31 August,
 * which collided with a DIFFERENT component of the same name on page 218:
 * they shared one .pa- selector with different rule bodies. Renamed and split.
 *
 * SPLIT BY MEASURED CONTAINMENT, NOT BY NAME. scripts/css-scope.sh asked the
 * DOM which elements each rule matches and whether they all sit inside a demo
 * container. Five rules stayed behind: .gn-pil-inner and .gn-pil-widget, which
 * are the website's pillars section, and .pa-card, .gn-cursor-ripple and
 * .gn-badge-oncover, which match nothing and so cannot be proved to belong
 * here. gn-badge has a rule in style.css, so that one is website.
 *
 * It also carries the one rule naming three demo containers at once
 * (.gn-bind-outer, .gc-outer, .gf-outer at <=600px). That rule only ever
 * existed on the homepage, where all three demos appear together, so it rides
 * with this one rather than needing a shared file.
 */

.gn-bind-outer { --pa-accent: #00B2B1; --pa-cta: #E10054; --pa-cta-hover: #F1B53D; --pa-ink: #2F3351; --pa-pale-steel: #9FB6D4; --pa-primary: #004EAA; --pa-purple: #B24EBE; --pa-steel: #547EC1; --pa-white: #FFFFFF; --pa-accent-press: #00A09F; }
.gn-bind-outer { width: 100%; position: relative; overflow: hidden; }
.gn-bind-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.gn-bind-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: contain; z-index: 0; pointer-events: none; opacity: 0.9; }
.gn-bind-stage { position: relative; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.8s ease; }
.gn-bind-stage.gn-visible { opacity: 1; }
.gn-cursor { position: absolute; z-index: 9999; opacity: 0; pointer-events: none; filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.25)); transition: left 0.6s cubic-bezier(0.4,0,0.2,1), top 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; }
.gn-cursor.gn-show { opacity: 1; }
.gn-card { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
.gn-card-main { top: 80px; left: 60px; width: 340px; z-index: 2; animation: gnFadeIn 0.5s ease forwards; }
.gn-card-cover { top: 190px; left: 240px; width: 340px; z-index: 4; box-shadow: 0 8px 32px rgba(0,0,0,0.12); animation: gnSlideRight 0.4s ease forwards; }
.gn-card-dialog { top: 55%; left: 55%; transform: translate(-50%,-50%); width: 340px; z-index: 20; box-shadow: 0 16px 48px rgba(0,0,0,0.18); animation: gnDialogIn 0.35s ease forwards; }
.gn-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--pa-accent); color: #fff; padding: 12px 28px; border-radius: 12px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 24px rgba(0,178,177,0.35); display: flex; align-items: center; gap: 10px; z-index: 30; white-space: nowrap; animation: gnToastIn 0.35s ease forwards; }
.gn-doc { position: absolute; bottom: 40px; right: 40px; width: 220px; background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.14); overflow: hidden; z-index: 25; animation: gnDocIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease; }
.gn-doc.gn-doc-sent { transform: scale(0.3) translate(100px,-200px); opacity: 0; }
.gn-doc-hdr { background: var(--pa-cta); padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.gn-doc-logo { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }
.gn-doc-ref { color: rgba(255,255,255,0.7); font-size: 9px; font-weight: 600; }
.gn-doc-body { padding: 14px; }
.gn-doc-title { font-size: 18px; font-weight: 700; color: var(--pa-ink); margin-bottom: 10px; }
.gn-doc-detail { font-size: 10px; color: var(--pa-pale-steel); margin-bottom: 2px; line-height: 1.5; }
.gn-doc-detail strong { color: var(--pa-ink); }
.gn-doc-premium { margin-top: 10px; background: var(--pa-cta-hover); border-radius: 8px; padding: 10px 12px; text-align: center; }
.gn-doc-amount { font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.gn-doc-ipt { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.05em; }
.gn-doc-footer { padding: 8px 14px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.gn-doc-page { font-size: 9px; color: var(--pa-pale-steel); }
.gn-doc-url { font-size: 9px; color: var(--pa-pale-steel); }
.gn-send-btn { position: absolute; bottom: 50px; left: 60px; z-index: 25; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 24px; border: none; background: var(--pa-cta); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(225,0,84,0.3); animation: gnFadeIn 0.4s ease forwards; transition: all 0.15s ease; }
.gn-send-btn.gn-press { transform: scale(0.95); }
.gn-sent-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--pa-ink); color: #fff; padding: 14px 28px; border-radius: 12px; font-weight: 700; font-size: 13px; box-shadow: 0 8px 32px rgba(47,51,81,0.35); display: flex; align-items: center; gap: 10px; z-index: 35; white-space: nowrap; animation: gnToastIn 0.35s ease forwards; }
@keyframes gnFadeIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gnSlideRight { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gnDialogIn { from { transform: translate(-50%,-50%) translateY(16px) scale(0.97); opacity: 0; } to { transform: translate(-50%,-50%) translateY(0) scale(1); opacity: 1; } }
@keyframes gnToastIn { from { transform: translate(-50%,-50%) translateY(10px); opacity: 0; } to { transform: translate(-50%,-50%) translateY(0); opacity: 1; } }
@keyframes gnDocIn { from { transform: translateY(40px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes gnFieldGlow { 0% { border-color: #e2e8f0; } 50% { border-color: var(--pa-primary); box-shadow: 0 0 0 3px rgba(0,78,170,0.12); } 100% { border-color: #e2e8f0; } }
.gn-hdr { background: var(--pa-ink); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; }
.gn-hdr-id { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; }
.gn-hdr-badge { padding: 3px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; transition: all 0.4s ease; }
.gn-subhdr { background: var(--pa-steel); padding: 7px 16px; color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 600; }
.gn-body-inner { padding: 14px 16px 18px !important; }
.gn-info-bar { background: #f8fafc; padding: 8px 12px; margin-bottom: 12px; font-size: 11px; color: var(--pa-ink); line-height: 1.5; }
.gn-amounts { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.gn-amounts-label { font-size: 10px; color: var(--pa-pale-steel); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.gn-amounts-val { font-size: 13px; color: var(--pa-ink); font-weight: 600; }
.gn-amounts-big { font-size: 28px; font-weight: 700; color: var(--pa-ink); line-height: 1; }
.gn-amounts-sub { font-size: 10px; color: var(--pa-primary); font-weight: 600; }
.gn-tabs { display: flex; border-bottom: 2px solid #e2e8f0; margin-bottom: 12px; }
.gn-tab { padding: 7px 16px; font-size: 12px; cursor: pointer; transition: all 0.3s ease; margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--pa-pale-steel); font-weight: 400; }
.gn-tab.gn-active { color: var(--pa-ink); font-weight: 700; border-bottom-color: var(--pa-primary); }
.gn-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.gn-row-l { color: var(--pa-pale-steel); }
.gn-row-r { color: var(--pa-ink); font-weight: 600; }
.gn-cover-hdr { padding: 12px 18px; border-bottom: 1px solid #e2e8f0; font-weight: 700; font-size: 14px; color: var(--pa-ink); }
.gn-cover-body { padding: 16px 18px; }
.gn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.gn-field-label { font-size: 10px; font-weight: 700; color: var(--pa-cta); display: block; margin-bottom: 4px; letter-spacing: 0.03em; }
.gn-field-box { border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--pa-ink); display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.gn-field-box.gn-empty { color: var(--pa-pale-steel); font-weight: 400; }
.gn-field-box.gn-highlight { background: rgba(241,181,61,0.08); }
.gn-field-box.gn-glow { animation: gnFieldGlow 1.5s ease forwards; }
.gn-quickset { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 16px; }
.gn-quickset span { font-size: 10px; color: var(--pa-pale-steel); padding: 3px 8px; border: 1px solid #e5e7eb; border-radius: 6px; }
.gn-actions { display: flex; justify-content: flex-end; gap: 8px; }
.gn-btn { font-family: inherit; cursor: pointer; border-radius: 8px; font-size: 12px; font-weight: 600; }
.gn-btn-cancel { padding: 7px 18px; border: 1px solid #d1d5db; background: #fff; color: var(--pa-ink); }
.gn-btn-incept { padding: 7px 18px; border: none; background: var(--pa-primary); color: #fff; font-weight: 700; transition: all 0.15s ease; }
.gn-btn-incept.gn-hover { background: var(--pa-ink); }
.gn-btn-incept.gn-press { transform: scale(0.95); }
.gn-dlg-hdr { padding: 12px 18px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.gn-dlg-title { font-weight: 700; font-size: 14px; color: var(--pa-ink); }
.gn-dlg-close { color: var(--pa-pale-steel); font-size: 18px; line-height: 1; cursor: pointer; }
.gn-dlg-body { padding: 24px 22px; text-align: center; }
.gn-dlg-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,178,177,0.1); border: 2px solid var(--pa-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.gn-dlg-heading { font-weight: 700; font-size: 16px; color: var(--pa-ink); margin-bottom: 10px; }
.gn-dlg-text { font-size: 13px; color: var(--pa-pale-steel); line-height: 1.6; margin-bottom: 22px; }
.gn-dlg-text strong { color: var(--pa-ink); }
.gn-dlg-btns { display: flex; justify-content: center; gap: 10px; }
.gn-btn-no { padding: 8px 28px; border: 1.5px solid var(--pa-ink); border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--pa-ink); font-family: inherit; cursor: pointer; }
.gn-btn-yes { padding: 8px 28px; border: none; border-radius: 8px; background: var(--pa-accent); color: #fff; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.15s ease; }
.gn-btn-yes.gn-press { transform: scale(0.95); background: var(--pa-accent-press); }
.gn-hidden { display: none; }
.gn-bind-wrap { width: 680px; height: 680px; position: relative; font-family: var(--wp--preset--font-family--body); transform-origin: top left; }
.gn-badge-quoted { background: var(--pa-cta-hover); color: var(--pa-ink); }@media (max-width: 600px) {


  .gn-bind-outer, .gc-outer, .gf-outer { width: 100%; max-width: 100%; overflow: hidden; }
}

/* §413: the card's header is rounded itself. */
.gn-card > .gn-hdr:first-child { border-radius: 14px 14px 0 0; }