/*
 * Sudeeo Production Flow — styles for the production-flow sections.
 *
 * The sections are ordinary core blocks (groups, headings, paragraphs,
 * lists, buttons, details, tables); the classes below are set on them
 * through Block > Advanced > Additional CSS class(es). Everything is
 * scoped to .sudeeo-pf so it can't leak into the rest of the site.
 *
 * Image slots (.ph) are bare frames holding an Image block: select it
 * and pick from the Media Library (or swap it for a Video block). The
 * frame has no fill or border, so transparent media sits on the section.
 * Icon slots (.circle) are labelled placeholders.
 */

.sudeeo-pf {
	--page: #F7F6FD;         /* page ground, lavender-white */
	--white: #FFFFFF;
	--mist: #E5E1F8;         /* Lavender Mist */
	--mist2: #F0EDFB;
	--ink: #1B1633;          /* headings */
	--body: #4B4568;         /* running text */
	--soft: #6F6891;         /* secondary text, meets 4.5:1 on white */
	--line: #E3DFF3;
	--indigo: #472F94;       /* Sudeeo Indigo */
	--violet: #6747B4;       /* Studio Violet */
	--signal: #673AF5;       /* Signal Purple - actions */
	--magenta: #C72C91;      /* Reel Magenta - rare emphasis */
	--night: #110F1A;        /* Night Reel */
	--night2: #1D1930;
	--good: #1D8F6A;
	--warn: #B7791F;
	--bad: #C0304F;
	--grad: linear-gradient(90deg, var(--signal), var(--magenta));
	--f-b: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-m: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
	--r: 24px; --r-sm: 14px; --r-pill: 999px;
	--shadow: 0 24px 60px -28px rgba(71, 47, 148, .35);
	--shadow-sm: 0 10px 30px -18px rgba(71, 47, 148, .35);
	--gut: clamp(16px, 4vw, 40px);
	--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23673AF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
	--chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23673AF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--chev-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23673AF5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
	color-scheme: light;

	background: var(--page);
	color: var(--body);
	font-family: var(--f-b);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.sudeeo-pf, .sudeeo-pf * { box-sizing: border-box; }
.sudeeo-pf.alignfull { max-width: none; margin-inline: 0; width: auto; }
/* Block layouts add their own gaps between blocks; this design sets its own spacing. */
.sudeeo-pf :is(.is-layout-flow, .is-layout-constrained, .wp-block-group, .wp-block-details) > * { margin-block: 0; }
html:has(.sudeeo-pf) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html:has(.sudeeo-pf) { scroll-behavior: auto; }
	.sudeeo-pf * { animation: none !important; transition: none !important; }
}
.sudeeo-pf img { max-width: 100%; display: block; }
.sudeeo-pf a { color: var(--signal); }
.sudeeo-pf :is(h1, h2, h3, h4) { color: var(--ink); margin: 0; text-wrap: balance; line-height: 1.15; font-family: inherit; }
.sudeeo-pf h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -.015em; }
.sudeeo-pf h3 { font-size: 20px; font-weight: 600; letter-spacing: normal; }
.sudeeo-pf p { margin: 0; }
.sudeeo-pf :is(strong, b) { font-weight: 700; }
.sudeeo-pf .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sudeeo-pf .wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.sudeeo-pf :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 8px; }

/* ---------- shared bits ---------- */
.sudeeo-pf .tag { align-self: flex-start; width: fit-content; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-m); font-size: 11px; line-height: 1.65; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); background: var(--mist2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; }
.sudeeo-pf .lede { font-size: 18.5px; color: var(--body); max-width: 60ch; }
.sudeeo-pf .center { text-align: center; }
.sudeeo-pf .sec-head .tag { align-self: center; }
.sudeeo-pf .center .lede { margin-inline: auto; }
.sudeeo-pf .sec { padding-block: clamp(72px, 9vw, 120px); position: relative; }
.sudeeo-pf .sec > .wrap { position: relative; z-index: 1; }
.sudeeo-pf .sec-head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.sudeeo-pf .bg-white { background: var(--white); }

/* ---------- buttons (Button blocks with class pf-pri / pf-alt / pf-ghost) ---------- */
.sudeeo-pf .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sudeeo-pf .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--f-b); font-size: 15.5px; font-weight: 600; line-height: 1.65; letter-spacing: normal; text-transform: none; text-decoration: none; border-radius: var(--r-pill); padding: 13px 24px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; background: var(--signal); color: #fff; box-shadow: 0 12px 26px -12px rgba(103, 58, 245, .7); }
.sudeeo-pf .wp-block-button .wp-block-button__link[href^="#pf-"] { line-height: normal; }
.sudeeo-pf .wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); background: #5A2FE0; color: #fff; border-color: transparent; }
.sudeeo-pf .wp-block-button.pf-alt .wp-block-button__link { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: none; }
.sudeeo-pf .wp-block-button.pf-alt .wp-block-button__link:hover { background: var(--white); color: var(--ink); border-color: var(--signal); transform: none; }
.sudeeo-pf .wp-block-button.pf-ghost .wp-block-button__link { background: transparent; color: var(--signal); padding-inline: 6px; box-shadow: none; }
.sudeeo-pf .wp-block-button.pf-ghost .wp-block-button__link:hover { background: transparent; color: var(--signal); transform: none; }

/* ---------- decoration: scalloped band edge, floating dots, glow ---------- */
.sudeeo-pf .wave-top::before { content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; background: var(--white); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14c50 0 50-14 100-14s50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14v14z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14c50 0 50-14 100-14s50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14 50-14 100-14 50 14 100 14v14z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; }
.sudeeo-pf :is(.dots-canvas, .dots-connects, .dots-cast)::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55; }
.sudeeo-pf .dots-canvas::after { background: radial-gradient(circle at calc(3% + 4.5px) calc(30% + 4.5px), var(--signal) 4.5px, transparent 5px), radial-gradient(circle at calc(94% - 7px) calc(12% + 7px), var(--magenta) 7px, transparent 7.5px); }
.sudeeo-pf .dots-connects::after { background: radial-gradient(circle at calc(10% + 5px) calc(22% + 5px), var(--signal) 5px, transparent 5.5px), radial-gradient(circle at calc(88% - 4px) calc(30% + 4px), var(--magenta) 4px, transparent 4.5px), radial-gradient(circle at calc(70% - 6px) calc(84% - 6px), var(--signal) 6px, transparent 6.5px); }
.sudeeo-pf .dots-cast::after { background: radial-gradient(circle at calc(95% - 4.5px) calc(14% + 4.5px), var(--signal) 4.5px, transparent 5px), radial-gradient(circle at calc(4% + 6.5px) calc(82% - 6.5px), var(--magenta) 6.5px, transparent 7px); }

/* ---------- media slots (.ph): a bare frame, just the image or video ---------- */
.sudeeo-pf .ph { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; box-shadow: none; }
.sudeeo-pf .ph:has(img, video) { cursor: zoom-in; }
.sudeeo-pf .ph > :is(.wp-block-image, .wp-block-video) { margin: 0; width: 100%; height: 100%; background: none; }
.sudeeo-pf .ph :is(img, video) { display: block; width: 100%; height: 100%; object-fit: contain; background: none; }
/* labels and placeholder text inside a slot (.ph-t, .ph-k …) step aside once it holds an image or video */
.sudeeo-pf .ph:has(img, video) > :not(.wp-block-image, .wp-block-video) { display: none; }
.sudeeo-pf .r-16x10 { aspect-ratio: 16 / 10; }
.sudeeo-pf .r-4x3 { aspect-ratio: 4 / 3; }
.sudeeo-pf .r-9x19 { aspect-ratio: 9 / 19; }
.sudeeo-pf .r-16x9 { aspect-ratio: 16 / 9; }
.sudeeo-pf .r-1x1 { aspect-ratio: 1 / 1; }

/* ---------- image swap (.media.swap): one slot per accordion item, A shows A ---------- */
.sudeeo-pf .swap { display: grid; }
.sudeeo-pf .swap > .ph { grid-area: 1 / 1; transition: opacity .35s ease, visibility .35s; }
.sudeeo-pf .swap > .ph:not(:first-child), .sudeeo-pf .swap.is-ready > .ph { opacity: 0; visibility: hidden; }
.sudeeo-pf .swap.is-ready > .ph.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sudeeo-pf .swap > .ph { transition: none; } }

/* ---------- placeholders: icon circles ---------- */
.sudeeo-pf .circle { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: 0 0 auto; }
.sudeeo-pf .circle::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .7); pointer-events: none; }
.sudeeo-pf .circle > p { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; position: relative; z-index: 1; line-height: 1; }
.sudeeo-pf .circle:has(img)::after { display: none; }
.sudeeo-pf .circle .wp-block-image { margin: 0; width: 55%; }
.sudeeo-pf .c1 { background: linear-gradient(145deg, #7B55F7, #472F94); }
.sudeeo-pf .c2 { background: linear-gradient(145deg, #A34FE0, #6747B4); }
.sudeeo-pf .c3 { background: linear-gradient(145deg, #C72C91, #8A2BB0); }
.sudeeo-pf .c4 { background: linear-gradient(145deg, #F2A93B, #E0703A); }
.sudeeo-pf .c5 { background: linear-gradient(145deg, #3C8CE7, #673AF5); }
.sudeeo-pf .c6 { background: linear-gradient(145deg, #2FB38A, #1D7F8F); }

/* ---------- built-for strip ---------- */
.sudeeo-pf .strip { padding-block: 28px 8px; }
.sudeeo-pf .strip p { text-align: center; font-size: 14px; color: var(--soft); }
.sudeeo-pf .strip p strong { color: var(--signal); }
.sudeeo-pf .strip-list { list-style: none; padding: 0; margin: 18px 0 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.sudeeo-pf .strip-list li { font-family: var(--f-m); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); opacity: .72; margin: 0; }

/* ---------- feature circles ---------- */
.sudeeo-pf .feats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.sudeeo-pf .feat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 16px; border-radius: var(--r); transition: background .2s, box-shadow .2s; }
.sudeeo-pf .feat:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.sudeeo-pf .feat h3 { font-size: 18px; }
.sudeeo-pf .feat h3 a { color: inherit; text-decoration: none; }
.sudeeo-pf .feat p { font-size: 15px; color: var(--soft); line-height: 1.5; }
.sudeeo-pf .feat .circle p { color: #fff; font-size: 9.5px; line-height: 1; }

/* whole card clickable on the site (not in the editor, where you need to click into the blocks) */
body:not(.editor-styles-wrapper) .sudeeo-pf :is(.feat h3, .hub-t) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- feature blocks ---------- */
.sudeeo-pf .block { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.sudeeo-pf .block.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.sudeeo-pf .block.flip > .media { order: 2; }
.sudeeo-pf .block .copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sudeeo-pf .block .media { position: relative; min-width: 0; }
.sudeeo-pf .checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sudeeo-pf .checks li { position: relative; padding-left: 38px; color: var(--body); margin: 0; }
.sudeeo-pf .checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--mist2) var(--check) center / 14px no-repeat; }
.sudeeo-pf .checks strong { color: var(--ink); font-weight: 600; }

/* ---------- dark block ---------- */
.sudeeo-pf .darkband { background: var(--white); }
.sudeeo-pf .darkcard { background: var(--night); border-radius: calc(var(--r) + 8px); padding: clamp(24px, 4vw, 48px); color: #C9C4E0; position: relative; overflow: hidden; }
.sudeeo-pf .darkcard::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(103, 58, 245, .55), transparent 65%); left: -160px; top: -160px; pointer-events: none; }
.sudeeo-pf .darkcard > .block { position: relative; }
.sudeeo-pf .darkcard h2 { color: #fff; }
.sudeeo-pf .darkcard .tag { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #C9B8FF; }
.sudeeo-pf .darkcard :is(.lede, .checks li) { color: #C9C4E0; }
.sudeeo-pf .darkcard .checks strong { color: #fff; }
.sudeeo-pf .darkcard .checks li::before { background-color: rgba(255, 255, 255, .08); }
.sudeeo-pf .darkcard .wp-block-button.pf-alt .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.sudeeo-pf .darkcard .wp-block-button.pf-alt .wp-block-button__link:hover { border-color: #C9B8FF; }

/* ---------- accordions (Details blocks inside a group with class "acc") ---------- */
.sudeeo-pf .acc { display: flex; flex-direction: column; gap: 12px; counter-reset: pf-acc; }
.sudeeo-pf .pf-acc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; transition: box-shadow .2s, border-color .2s; counter-increment: pf-acc; }
.sudeeo-pf .pf-acc[open] { border-color: #CFC5F5; box-shadow: var(--shadow-sm); }
.sudeeo-pf .pf-acc > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-size: 16.5px; font-weight: 600; line-height: 1.15; color: var(--ink); cursor: pointer; }
.sudeeo-pf .pf-acc > summary::-webkit-details-marker { display: none; }
.sudeeo-pf .acc-letters .pf-acc > summary::before { content: counter(pf-acc, upper-alpha); font-family: var(--f-m); font-size: 11px; font-weight: 400; color: var(--signal); flex: 0 0 auto; }
.sudeeo-pf .pf-acc > summary::after { content: ""; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--mist2) var(--chev) center / 14px no-repeat; flex: 0 0 28px; transition: transform .25s ease, background-color .2s; }
.sudeeo-pf .pf-acc[open] > summary::after { transform: rotate(180deg); background: var(--signal) var(--chev-on) center / 14px no-repeat; }
/* while a panel slides shut (production-flow.js) it already looks closed, as in the design */
.sudeeo-pf .pf-acc.is-closing { border-color: var(--line); box-shadow: none; }
.sudeeo-pf .pf-acc.is-closing > summary::after { transform: none; background: var(--mist2) var(--chev) center / 14px no-repeat; }
.sudeeo-pf .pf-acc > :not(summary) { padding-inline: 20px; color: var(--body); font-size: 16px; }
.sudeeo-pf .pf-acc > :not(summary) + :not(summary) { margin-top: 10px; }
.sudeeo-pf .pf-acc > :last-child { padding-bottom: 20px; }
.sudeeo-pf .pf-acc .acc-list { margin: 0; padding-left: 40px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- connects row ---------- */
.sudeeo-pf .connect { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 48px); }
.sudeeo-pf .node { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sudeeo-pf .node:nth-child(even) { transform: translateY(22px); }
.sudeeo-pf .node .circle { width: 84px; height: 84px; }
.sudeeo-pf .node-name { color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.65; }
.sudeeo-pf .node-sub { margin-top: 0 !important; color: var(--soft); font-size: 13px; text-align: center; max-width: 16ch; line-height: 1.4; }
.sudeeo-pf .source { margin: 56px auto 0 !important; max-width: 760px; display: flex; align-items: center; gap: 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 12px 12px 12px 24px; box-shadow: var(--shadow-sm); }
.sudeeo-pf .source p { font-size: 15.5px; }
.sudeeo-pf .source strong { color: var(--ink); }
.sudeeo-pf .source .wp-block-buttons { margin-left: auto; flex: 0 0 auto; }

/* ---------- screen gallery ---------- */
.sudeeo-pf .gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); align-items: center; }
.sudeeo-pf .gallery .mid { transform: scale(1.12); z-index: 1; }

/* ---------- script ---------- */
.sudeeo-pf .stats { display: flex; flex-wrap: wrap; gap: 28px; }
.sudeeo-pf .stat { display: flex; flex-direction: column; gap: 2px; }
.sudeeo-pf .stat-v { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.sudeeo-pf .stat-l { font-size: 14px; color: var(--soft); }
.sudeeo-pf .keys { display: flex; flex-direction: column; gap: 14px; }
.sudeeo-pf .keycard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; box-shadow: var(--shadow-sm); }
.sudeeo-pf .keycard:nth-child(2) { margin-left: clamp(0px, 4vw, 48px) !important; }
.sudeeo-pf kbd { font-family: var(--f-m); font-size: 12.5px; background: var(--mist2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px; padding: 3px 8px; color: var(--ink); white-space: nowrap; }
.sudeeo-pf .key-t { color: var(--ink); margin-bottom: 2px !important; }
.sudeeo-pf .key-copy p { font-size: 15px; }
.sudeeo-pf .key-copy .key-t { font-size: 1em; }

/* ---------- cast & crew ---------- */
.sudeeo-pf .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sudeeo-pf .chip { font-family: var(--f-m); font-size: 11px; line-height: 1.65; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--r-pill); padding: 6px 12px; border: 1.5px solid currentColor; background: var(--white); }
.sudeeo-pf .chip.own { background: var(--signal); border-color: var(--signal); color: #fff; }
.sudeeo-pf .chip.good { color: var(--good); }
.sudeeo-pf .chip.warn { color: var(--warn); }
.sudeeo-pf .chip.none { color: var(--soft); }
.sudeeo-pf .chip.pause { color: var(--violet); }

/* ---------- plans ---------- */
.sudeeo-pf .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin-inline: auto; }
.sudeeo-pf .plan { background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; position: relative; }
.sudeeo-pf .plan.feat-plan { background: linear-gradient(160deg, #FBFAFF, #F1ECFF); border-color: #CFC5F5; box-shadow: var(--shadow); }
.sudeeo-pf .plan .name { font-family: var(--f-m); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); }
.sudeeo-pf .plan .price { font-size: 40px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.sudeeo-pf .plan .price small { font-size: 15px; font-weight: 400; color: var(--soft); letter-spacing: 0; }
.sudeeo-pf .plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sudeeo-pf .plan-list li { position: relative; padding-left: 32px; font-size: 15.5px; margin: 0; }
.sudeeo-pf .plan-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--mist2) var(--check) center / 12px no-repeat; }
.sudeeo-pf .plan-list li.no { color: var(--soft); }
.sudeeo-pf .plan-list li.no::before { background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A93B8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sudeeo-pf .plan .wp-block-buttons { margin-top: auto !important; }
.sudeeo-pf .ribbon { position: absolute; top: -14px; right: 24px; background: var(--grad); color: #fff; font-family: var(--f-m); font-size: 10.5px; line-height: 1.65; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--r-pill); padding: 6px 12px; }
.sudeeo-pf .plans-note { text-align: center; margin-top: 24px !important; font-size: 14.5px; color: var(--soft); }

/* ---------- faq ---------- */
.sudeeo-pf .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; align-items: start; }

/* ---------- hub ---------- */
.sudeeo-pf .hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sudeeo-pf .hub-card { position: relative; display: flex; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; transition: box-shadow .2s, border-color .2s; }
.sudeeo-pf .hub-card:hover { border-color: var(--signal); box-shadow: var(--shadow-sm); }
.sudeeo-pf .hub-card .circle { width: 56px; height: 56px; }
.sudeeo-pf .hub-card .circle::after { inset: 6px; }
.sudeeo-pf .hub-card .circle > p { font-size: 8px; }
.sudeeo-pf .hub-t { font-size: 17px; font-weight: 700; line-height: 1.65; }
.sudeeo-pf .hub-t a { color: var(--ink); text-decoration: none; }
.sudeeo-pf .hub-s { color: var(--soft); font-size: 14px; line-height: 1.45; }

/* ---------- cta ---------- */
.sudeeo-pf .cta { background: linear-gradient(180deg, var(--page), var(--mist)); text-align: center; }
.sudeeo-pf .cta .lede { margin: 18px auto 0 !important; }
.sudeeo-pf .cta .wp-block-buttons { justify-content: center; margin-top: 28px !important; }

/* ---------- lightbox panels ---------- */
/* On the site these are hidden: the buttons that link to #pf-levels,
   #pf-checks and #pf-roles open them in the lightbox. */
.sudeeo-pf .pf-modal { display: none; }
.sudeeo-pf .lb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sudeeo-pf .lb-cell { background: var(--page); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.sudeeo-pf .lb-cell .k { font-family: var(--f-m); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.sudeeo-pf .lb-cell strong { color: var(--ink); }
.sudeeo-pf .lb-cell p { font-size: 15.5px; }
.sudeeo-pf .lb-table { margin: 0; overflow-x: auto; }
.sudeeo-pf .lb-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.sudeeo-pf .lb-table :is(th, td) { text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sudeeo-pf .lb-table thead { border: 0; }
.sudeeo-pf .lb-table th { font-family: var(--f-m); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); font-weight: 400; background: var(--page); }
.sudeeo-pf .lb-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* the lightbox window itself (built by production-flow.js) */
.sudeeo-pf dialog.lb { border: 0; padding: 0; background: transparent; max-width: min(1080px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 32px); color: var(--body); }
.sudeeo-pf dialog.lb::backdrop { background: rgba(17, 15, 26, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sudeeo-pf .lb-card { background: var(--white); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.sudeeo-pf .lb-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px 16px 24px; border-bottom: 1px solid var(--line); }
.sudeeo-pf .lb-top h2 { font-size: 20px; font-weight: 600; }
.sudeeo-pf .lb-top .count { font-family: var(--f-m); font-size: 11.5px; letter-spacing: .12em; color: var(--soft); }
.sudeeo-pf .lb-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: grid; place-items: center; color: var(--ink); padding: 0; }
.sudeeo-pf .lb-close svg { width: 18px; height: 18px; }
.sudeeo-pf .lb-body { padding: 24px; overflow: auto; display: flex; flex-direction: column; gap: 18px; }
.sudeeo-pf .lb-body .ph { cursor: default; aspect-ratio: auto; }
.sudeeo-pf .lb-body .ph :is(img, video) { height: auto; max-height: calc(100dvh - 200px); }
.sudeeo-pf .lb-nav { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.sudeeo-pf .lb-nav[hidden] { display: none; }
.sudeeo-pf .lb-nav button { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-pill); padding: 9px 16px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sudeeo-pf .lb-nav button:hover { border-color: var(--signal); }
.sudeeo-pf .lb-nav .next { margin-left: auto; }
.sudeeo-pf .lb-nav svg { width: 16px; height: 16px; }
.sudeeo-pf .totop { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 50%; background: var(--signal); color: #fff; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(103, 58, 245, .7); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; }
.sudeeo-pf .totop.show { opacity: 1; pointer-events: auto; }
.sudeeo-pf .totop svg { width: 20px; height: 20px; }

/* ---------- in the editor: show what the site hides, so it can be edited ---------- */
.editor-styles-wrapper .sudeeo-pf .pf-modal { display: flex; flex-direction: column; gap: 14px; margin: 24px auto !important; max-width: 1080px; padding: 44px 24px 24px; background: var(--white); border: 2px dashed #C9C0EE; border-radius: var(--r); position: relative; }
.editor-styles-wrapper .sudeeo-pf .pf-modal::before { content: "Lightbox panel · hidden on the page, opens from the button that links to it"; position: absolute; top: 12px; left: 24px; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.editor-styles-wrapper .sudeeo-pf .pf-modal-title { font-size: 20px; }
.editor-styles-wrapper .sudeeo-pf .ph { cursor: default; }
.editor-styles-wrapper .sudeeo-pf .swap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: pf-swap; }
.editor-styles-wrapper .sudeeo-pf .swap > .ph { grid-area: auto; opacity: 1; visibility: visible; counter-increment: pf-swap; outline: 2px dashed #C9C0EE; outline-offset: -2px; border-radius: var(--r-sm); }
.editor-styles-wrapper .sudeeo-pf .swap > .ph::before { content: counter(pf-swap, upper-alpha); position: absolute; top: 8px; left: 8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: #fff; font-family: var(--f-m); font-size: 11px; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
	.sudeeo-pf .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sudeeo-pf .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sudeeo-pf .gallery .edge { display: none; }
}
@media (max-width: 860px) {
	.sudeeo-pf :is(.block, .block.flip) { grid-template-columns: minmax(0, 1fr); }
	.sudeeo-pf .block.flip > .media { order: 0; }
	.sudeeo-pf :is(.faq, .hub) { grid-template-columns: minmax(0, 1fr); }
	.sudeeo-pf .plans { grid-template-columns: minmax(0, 1fr); }
	.sudeeo-pf .source { flex-direction: column; align-items: flex-start; border-radius: var(--r); padding: 20px; }
	.sudeeo-pf .source .wp-block-buttons { margin-left: 0; }
}
@media (max-width: 560px) {
	.sudeeo-pf { font-size: 16px; }
	.sudeeo-pf .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sudeeo-pf .feat { padding: 18px 8px; }
	.sudeeo-pf .circle { width: 76px; height: 76px; }
	.sudeeo-pf .gallery { grid-template-columns: minmax(0, 1fr); }
	.sudeeo-pf .gallery .ph:not(.mid) { display: none; }
	.sudeeo-pf .gallery .mid { transform: none; max-width: 280px; margin-inline: auto; }
	.sudeeo-pf .keycard:nth-child(2) { margin-left: 0 !important; }
	.sudeeo-pf .lb-grid { grid-template-columns: minmax(0, 1fr); }
	.sudeeo-pf .node:nth-child(even) { transform: none; }
}