/* OctaBeam — layout and components. Colours, type and buttons come from theme.json. */

:root {
	--ob-ink: #0f172a;
	--ob-body: #475569;
	--ob-muted: #64748b;
	--ob-line: #e2e8f0;
	--ob-soft: #f8fafc;
	--ob-primary: #4f46e5;
	--ob-primary-dark: #4338ca;
	--ob-primary-soft: #eef2ff;
	--ob-radius: 16px;
	--ob-shadow: 0 30px 80px -30px rgba(30, 27, 75, 0.35);
	--ob-top: var(--wp-admin--admin-bar--height, 0px);
}

body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.ob-main--landing > .wp-block-post-content > * + * { margin-block-start: 0; }
.ob-main--page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--ob-primary); outline-offset: 2px; }

/* Header ------------------------------------------------------------------ */
.ob-site-header { position: sticky; top: var(--ob-top); z-index: 50; }
.ob-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.ob-scrolled .ob-header { border-bottom-color: var(--ob-line); box-shadow: 0 1px 12px rgba(15, 23, 42, 0.05); }
.ob-header__inner { max-width: 1120px; margin-inline: auto; min-height: 68px; padding-inline: 1.5rem; gap: 1.5rem; }
.ob-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ob-ink) !important; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; text-decoration: none !important; }
.ob-mark { flex: none; display: block; }
.ob-nav .wp-block-navigation__container { gap: 1.75rem; }
.ob-nav .wp-block-navigation-item__content:hover { color: var(--ob-primary-dark); }

/* Sections ---------------------------------------------------------------- */
.ob-hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem); background: radial-gradient(1000px 420px at 85% 0%, var(--ob-primary-soft), transparent 70%); }
.ob-hero h1 { margin-block: 0.5rem 1.25rem; }
.ob-hero__cols { gap: clamp(2rem, 5vw, 4rem); }
.ob-eyebrow { color: var(--ob-primary-dark); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; margin: 0; }
.ob-lead { color: var(--ob-body); font-size: 1.1875rem; line-height: 1.6; }
.ob-hero .wp-block-buttons { margin-top: 2rem; }

.ob-shot { margin: 0; }
.ob-shot img { display: block; width: 100%; height: auto; border-radius: var(--ob-radius); border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow); }

.ob-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.ob-section--tight { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 8vw, 6rem); }
.ob-section--soft { background: var(--ob-soft); border-block: 1px solid var(--ob-line); }
.ob-section h2 { margin-top: 0; }
.ob-section__intro { color: var(--ob-body); max-width: 600px; margin-inline: auto !important; margin-bottom: 2.5rem !important; }

.ob-page-head { padding-block: clamp(3rem, 7vw, 5rem) 0; background: radial-gradient(900px 300px at 50% 0%, var(--ob-primary-soft), transparent 70%); }
.ob-page-head h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: 0.75rem; }
.ob-page-head .ob-lead { margin-top: 0; }

/* Cards ------------------------------------------------------------------- */
.ob-cards { gap: 1.5rem; }
.ob-card { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-radius); padding: 1.75rem; }
.ob-card h2, .ob-card h3 { margin-block: 0.5rem 0.75rem; }
.ob-card p { color: var(--ob-body); margin-bottom: 0; }
.ob-card .ob-tag { margin: 0; }
.ob-card--wide { padding: clamp(1.75rem, 4vw, 2.5rem); margin-top: clamp(3rem, 7vw, 5rem); }
.ob-tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--ob-primary-soft); color: var(--ob-primary-dark); font-size: 0.8125rem; font-weight: 600; }
.ob-section > .wp-block-buttons { margin-top: 2.5rem; }

.ob-points { gap: 2rem; margin-top: 2.5rem; }
.ob-points h3 { margin-bottom: 0.5rem; }
.ob-points p { color: var(--ob-body); margin: 0; }

.ob-product { gap: clamp(2rem, 5vw, 4rem); }
.ob-product + .ob-product { margin-top: clamp(3rem, 8vw, 6rem); }
.ob-product h2 { margin-block: 0.75rem 1rem; }
.ob-product p { color: var(--ob-body); }

.ob-ticks { list-style: none; padding-left: 0; color: var(--ob-body); }
.ob-ticks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.ob-ticks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ob-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%234338ca' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat; }
.ob-ticks strong { color: var(--ob-ink); }

.ob-big-link { font-size: 1.125rem; font-weight: 600; margin-top: 1rem !important; }

.wp-block-button.is-style-outline > .wp-block-button__link { background: #fff; color: var(--ob-ink); border: 1px solid #cbd5e1; padding: calc(0.85rem - 1px) calc(1.5rem - 1px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ob-soft); color: var(--ob-ink); border-color: #94a3b8; }

/* CTA band ---------------------------------------------------------------- */
.ob-cta { padding-block: clamp(3.5rem, 8vw, 5.5rem); background: var(--ob-ink); color: #cbd5e1; }
.ob-cta h2 { color: #fff; margin-top: 0; }
.ob-cta .wp-block-buttons { margin-top: 2rem; }
.ob-btn-light > .wp-block-button__link { background: #fff; color: var(--ob-ink); }
.ob-btn-light > .wp-block-button__link:hover { background: var(--ob-primary-soft); color: var(--ob-ink); }

/* Footer ------------------------------------------------------------------ */
.ob-footer { border-top: 1px solid var(--ob-line); padding: 3rem 1.5rem 2rem; font-size: 0.9375rem; color: var(--ob-muted); }
.ob-main--landing + .ob-footer, .ob-cta + * .ob-footer { border-top: 0; }
.ob-footer__inner, .ob-footer__bottom { max-width: 1120px; margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.ob-footer__brand p { margin: 0.5rem 0 0; }
.ob-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-items: center; }
.ob-footer a:not(.ob-brand) { color: var(--ob-body); }
.ob-footer a:not(.ob-brand):hover { color: var(--ob-primary-dark); }
.ob-footer__bottom { border-top: 1px solid var(--ob-line); margin-top: 2rem; padding-top: 1.5rem; font-size: 0.875rem; }

/* Small screens ----------------------------------------------------------- */
@media (max-width: 781px) {
	.ob-product--flip { flex-direction: column-reverse; }
	.ob-cards, .ob-points { gap: 1rem; }
	.ob-header__inner { min-height: 60px; }
}

/* "Coming soon" note (shown while octacart.co is offline) */
.ob-soon { display: inline-block; margin-top: 1rem !important; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px dashed #cbd5e1; color: var(--ob-muted) !important; font-size: 0.8125rem; font-weight: 600; }
/* In the editor both versions are visible; mark the live-only ones. */
.editor-styles-wrapper .ob-when-live { outline: 1px dashed #a5b4fc; outline-offset: 4px; }