/* Opsiko Growth Kit — inherits the Opsiko theme tokens, with standalone fallbacks. */
.ogk-form, .ogk-magnet, .ogk-pop, .ogk-float {
	--ogk-navy: var(--navy, #1B2A5E);
	--ogk-accent: var(--orange, #C4532A);
	--ogk-accent-2: var(--orange-2, #E2703E);
	--ogk-bg: var(--paper, #FFFCF6);
	--ogk-cream: var(--cream, #FBF5EC);
	--ogk-sand: var(--sand, #F3EADB);
	--ogk-muted: var(--muted, #59628A);
	--ogk-line: var(--line-strong, rgba(27, 42, 94, .22));
	--ogk-serif: var(--serif, Georgia, serif);
	--ogk-mono: var(--mono, ui-monospace, Menlo, monospace);
	--ogk-ease: cubic-bezier(.2, .7, .2, 1);
}
.ogk-form { color: var(--ogk-navy); font-size: 15px; }
.ogk-form__head { margin-bottom: 22px; }
.ogk-form__title { margin: 0 0 6px; font: 500 26px/1.15 var(--ogk-serif); letter-spacing: -.02em; color: var(--ogk-navy); }
.ogk-form__sub { margin: 0; font: 500 11.5px/1.4 var(--ogk-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ogk-accent); }
.ogk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; }
.ogk-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ogk-field--half { grid-column: span 1; }
.ogk-field label { font-size: 13px; font-weight: 500; color: var(--ogk-navy); }
.ogk-req { color: var(--ogk-accent); }
.ogk-field input, .ogk-field select, .ogk-field textarea {
	width: 100%; min-height: 50px; padding: 12px 14px;
	border: 1px solid var(--ogk-line); border-radius: 12px; background: #fff;
	font: 400 15.5px/1.4 inherit; font-family: inherit; color: var(--ogk-navy);
	transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.ogk-field textarea { min-height: 110px; resize: vertical; }
.ogk-field input::placeholder, .ogk-field textarea::placeholder { color: #9AA0BB; }
.ogk-field input:focus, .ogk-field select:focus, .ogk-field textarea:focus { outline: none; border-color: var(--ogk-navy); box-shadow: 0 0 0 4px rgba(27, 42, 94, .08); }
.ogk-select { position: relative; }
.ogk-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.6px solid var(--ogk-muted); border-bottom: 1.6px solid var(--ogk-muted); transform: rotate(45deg); pointer-events: none; }
.ogk-select select { padding-right: 40px; cursor: pointer; }
.ogk-field.is-invalid input, .ogk-field.is-invalid select, .ogk-field.is-invalid textarea { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(192, 57, 43, .08); }
.ogk-err { margin: 0; font-size: 12.5px; color: #C0392B; min-height: 0; }
.ogk-err:empty { display: none; }
.ogk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ogk-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 18px; font-size: 13px; line-height: 1.5; color: var(--ogk-muted); cursor: pointer; }
.ogk-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ogk-accent); }
.ogk-consent a { color: var(--ogk-navy); }
.ogk-consent.is-invalid span { color: #C0392B; }
.ogk-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
	min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px;
	background: var(--ogk-accent); color: #fff; font: 500 16px/1 inherit; font-family: inherit; cursor: pointer;
	box-shadow: 0 12px 26px -14px rgba(196, 83, 42, .8);
	transition: background .25s, transform .25s var(--ogk-ease);
}
.ogk-submit:hover { background: #B0461F; transform: translateY(-1px); }
.ogk-submit svg { transition: transform .3s var(--ogk-ease); }
.ogk-submit:hover svg { transform: translateX(3px); }
.ogk-submit[disabled] { opacity: .7; cursor: progress; transform: none; }
.ogk-submit.is-loading svg { animation: ogk-spin .9s linear infinite; }
@keyframes ogk-spin { to { transform: rotate(360deg); } }
.ogk-status { margin: 12px 0 0; font-size: 14px; color: var(--ogk-muted); text-align: center; }
.ogk-status:empty { display: none; }
.ogk-status.is-error { color: #C0392B; }

.ogk-done { text-align: center; padding: 28px 8px; animation: ogk-in .5s var(--ogk-ease); }
.ogk-done__ico { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: rgba(47, 125, 91, .12); color: #2F7D5B; display: grid; place-items: center; }
.ogk-done__ico svg { width: 30px; height: 30px; }
.ogk-done h3 { margin: 0 0 10px; font: 500 26px/1.2 var(--ogk-serif); color: var(--ogk-navy); }
.ogk-done p { color: var(--ogk-muted); margin: 0 auto 20px; max-width: 40ch; }
.ogk-done .ogk-submit { width: auto; text-decoration: none; }
@keyframes ogk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Magnets */
.ogk-magnet { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0; border: 1px solid var(--ogk-line); border-radius: 22px; background: var(--ogk-bg); overflow: hidden; color: var(--ogk-navy); }
.ogk-magnet__cover { background: var(--ogk-sand); min-height: 100%; }
.ogk-magnet__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ogk-magnet__cover--ph { display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 30% 20%, rgba(196, 83, 42, .18), transparent 60%), var(--ogk-navy); }
.ogk-doc { position: relative; display: flex; flex-direction: column; gap: 8px; width: 150px; aspect-ratio: 3 / 4; padding: 18px 16px; border-radius: 8px; background: var(--ogk-cream); box-shadow: 12px 14px 0 -2px rgba(255, 255, 255, .12), 0 24px 40px -18px rgba(0, 0, 0, .6); transform: rotate(-4deg); }
.ogk-doc i { display: block; height: 5px; border-radius: 3px; background: var(--ogk-sand); }
.ogk-doc i:first-child { width: 40%; background: var(--ogk-accent); }
.ogk-doc i:nth-child(3) { width: 70%; }
.ogk-doc b { margin-top: auto; font: 500 15px/1.15 var(--ogk-serif); color: var(--ogk-navy); letter-spacing: -.01em; }
.ogk-magnet__body { padding: 30px; }
.ogk-magnet__kicker { margin: 0 0 10px; font: 500 11px/1.4 var(--ogk-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ogk-accent); }
.ogk-magnet__title { margin: 0 0 10px; font: 500 26px/1.15 var(--ogk-serif); letter-spacing: -.02em; color: var(--ogk-navy); }
.ogk-magnet__desc { margin: 0 0 16px; color: var(--ogk-muted); font-size: 15px; }
.ogk-magnet__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.ogk-magnet__list li { position: relative; padding-left: 22px; font-size: 14.5px; }
.ogk-magnet__list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 1.8px solid var(--ogk-accent); border-bottom: 1.8px solid var(--ogk-accent); transform: rotate(-45deg); }
.ogk-magnet--side { display: block; }
.ogk-magnet--side .ogk-magnet__body { padding: 24px; }
.ogk-magnet--side .ogk-magnet__title { font-size: 21px; }
.ogk-magnet--side .ogk-grid { grid-template-columns: 1fr; }
.ogk-magnet--inline { grid-template-columns: 1fr; }
.ogk-magnet--inline .ogk-magnet__cover { display: none; }
.ogk-magnets { display: grid; gap: 24px; }

/* Popup */
.ogk-pop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; }
.ogk-pop[hidden] { display: none; }
.ogk-pop__backdrop { position: absolute; inset: 0; background: rgba(15, 24, 56, .62); backdrop-filter: blur(4px); animation: ogk-fade .3s; }
.ogk-pop__dialog { position: relative; width: 100%; max-width: 820px; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 24px; animation: ogk-rise .45s var(--ogk-ease); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); }
.ogk-pop .ogk-magnet { border: 0; border-radius: 24px; }
.ogk-pop__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ogk-navy); display: grid; place-items: center; cursor: pointer; }
.ogk-pop__close:hover { background: #fff; color: var(--ogk-accent); }
@keyframes ogk-fade { from { opacity: 0; } }
@keyframes ogk-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }
body.ogk-pop-open { overflow: hidden; }

/* Floating WhatsApp */
.ogk-float { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 20px 0 16px; border-radius: 999px; background: #1F9D55; color: #fff !important; text-decoration: none; font: 500 15px/1 inherit; box-shadow: 0 14px 30px -12px rgba(31, 157, 85, .7); transition: transform .25s var(--ogk-ease); }
.ogk-float:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
	.ogk-grid { grid-template-columns: 1fr; }
	.ogk-field--half { grid-column: 1 / -1; }
	.ogk-magnet { grid-template-columns: 1fr; }
	.ogk-magnet__cover { max-height: 200px; }
	.ogk-magnet__cover--ph { padding: 24px; }
	.ogk-doc { width: 110px; }
	.ogk-magnet__body { padding: 24px 20px; }
	.ogk-pop { align-items: end; padding: 0; }
	.ogk-pop__dialog { max-height: 92vh; border-radius: 22px 22px 0 0; }
	.ogk-pop .ogk-magnet { border-radius: 22px 22px 0 0; }
	.ogk-pop .ogk-magnet__cover { display: none; }
	.ogk-float span { display: none; }
	.ogk-float { width: 54px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ogk-pop__dialog, .ogk-pop__backdrop, .ogk-done { animation: none; } }