.po-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent-text); }
.po-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--pu-tint); }
.po-lead { margin: 0; font-size: 1.15625rem; line-height: 1.55; color: var(--color-text-body); }
.po-tabs, .po-plans, .po-vs, .po-clusters { margin-top: clamp(28px, 4vw, 44px); }
.po-stage { position: relative; padding: 8px 0 64px; }
.po-poll { position: relative; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--pu-surface); box-shadow: var(--shadow-lg); }
.po-poll-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.po-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-text); }
.po-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.po-tag { padding: 6px 9px; border: 1px dashed var(--color-border-strong); border-radius: 8px; font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.po-poll-q { margin: var(--space-4) 0 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3125rem, 2.2vw, 1.5625rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-dark); }
.po-opts { display: grid; gap: 12px; margin-top: var(--space-5); }
.po-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px 14px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 14px; background: var(--pu-surface-2); font-size: 0.96875rem; font-weight: 700; color: var(--color-dark); }
.po-opt-you { border-color: var(--color-accent); }
.po-opt-name { position: relative; min-width: 0; overflow-wrap: anywhere; }
.po-opt-note { position: relative; flex: 0 0 auto; font-size: 0.8125rem; font-style: normal; font-weight: 600; color: var(--color-text-body); }
.po-opt-you .po-opt-note { color: var(--color-accent-text); }
.po-bar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 40%); border-radius: 0 12px 12px 0; opacity: 0.22; background: var(--c, var(--pu-c1)); }
.po-hue-1 { --c: var(--pu-c1); }
.po-hue-2 { --c: var(--pu-c2); }
.po-hue-3 { --c: var(--pu-c3); }
.po-hue-4 { --c: var(--pu-c4); }
.po-hue-5 { --c: var(--pu-c5); }
.po-lv-1 { --w: 12.5%; }
.po-lv-2 { --w: 25%; }
.po-lv-3 { --w: 37.5%; }
.po-lv-4 { --w: 50%; }
.po-lv-5 { --w: 62.5%; }
.po-lv-6 { --w: 75%; }
.po-lv-7 { --w: 87.5%; }
.po-lv-8 { --w: 100%; }
.po-poll-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 0.875rem; color: var(--color-text-subtle); }
.po-poll-foot b { color: var(--color-dark); }
.po-float { position: absolute; bottom: 0; left: -22px; width: min(270px, 74%); padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--pu-surface); box-shadow: var(--shadow-lg); transform: rotate(-2.5deg); }
.po-float .po-float-title { position: relative; margin: 0; padding-left: 26px; font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: var(--color-dark); }
.po-float .po-float-title::before { content: ""; position: absolute; top: 4px; left: 3px; width: 11px; height: 6px; border-bottom: 2.5px solid var(--pu-c4); border-left: 2.5px solid var(--pu-c4); transform: rotate(-45deg); }
.po-float p + p { margin: 4px 0 0; font-size: 0.84375rem; line-height: 1.45; color: var(--color-text-subtle); }
@media (max-width: 1100px) { .po-float { left: 12px; } }
@media (max-width: 520px) {
  .po-stage { padding-bottom: 0; }
  .po-float { position: relative; bottom: auto; left: auto; width: auto; margin: -14px 14px 0; transform: rotate(-1.5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes po-grow { from { width: 0; } }
  @keyframes po-beat { 50% { box-shadow: 0 0 0 6px transparent; transform: scale(1.25); } }
  .po-bar { animation: po-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .po-opt:nth-child(2) .po-bar { animation-delay: 0.12s; }
  .po-opt:nth-child(3) .po-bar { animation-delay: 0.24s; }
  .po-live::before { animation: po-beat 1.6s ease-in-out infinite; }
}
section.po-formats { padding-block: 48px; border-block: 1px solid var(--color-border); background: var(--pu-surface); }
.po-formats-in { display: grid; gap: var(--space-4); align-items: center; }
.po-formats-in .po-formats-lead { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: var(--color-dark); }
.po-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.po-formats .po-cloud li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--color-bg-alt); font-size: 0.90625rem; font-weight: 600; color: var(--color-text-body); }
.po-formats .po-cloud li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; background: var(--pu-c1); }
.po-formats .po-cloud li:nth-child(5n+2)::before { background: var(--pu-c2); }
.po-formats .po-cloud li:nth-child(5n+3)::before { background: var(--pu-c3); }
.po-formats .po-cloud li:nth-child(5n+4)::before { background: var(--pu-c4); }
.po-formats .po-cloud li:nth-child(5n)::before { background: var(--pu-c5); }
@media (min-width: 900px) { .po-formats-in { grid-template-columns: 220px minmax(0, 1fr); } }
.po-tabs { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--pu-surface); box-shadow: var(--shadow-sm); }
.po-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.po-tab-labels { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 16px; background: var(--color-bg-alt); }
.po-tab-labels label { flex: 1 1 auto; padding: 10px 14px; border-radius: 12px; text-align: center; font-size: 0.9375rem; font-weight: 700; color: var(--color-text-body); cursor: pointer; }
#po-pt1:checked ~ .po-tab-labels label[for="po-pt1"], #po-pt2:checked ~ .po-tab-labels label[for="po-pt2"], #po-pt3:checked ~ .po-tab-labels label[for="po-pt3"], #po-pt4:checked ~ .po-tab-labels label[for="po-pt4"] { background: var(--pu-lift); color: var(--color-dark); box-shadow: var(--shadow-sm); }
#po-pt1:focus-visible ~ .po-tab-labels label[for="po-pt1"], #po-pt2:focus-visible ~ .po-tab-labels label[for="po-pt2"], #po-pt3:focus-visible ~ .po-tab-labels label[for="po-pt3"], #po-pt4:focus-visible ~ .po-tab-labels label[for="po-pt4"] { outline: 3px solid var(--pu-focus); outline-offset: 2px; }
.po-tab-panel { display: none; gap: var(--space-5); align-items: center; padding: var(--space-5) var(--space-3) var(--space-3); }
#po-pt1:checked ~ .po-tab-panels .po-tp1, #po-pt2:checked ~ .po-tab-panels .po-tp2, #po-pt3:checked ~ .po-tab-panels .po-tp3, #po-pt4:checked ~ .po-tab-panels .po-tp4 { display: grid; }
.po-tab-panel > div { min-width: 0; }
.po-tab-panel h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.po-tab-panel p { margin: 10px 0 0; color: var(--color-text-body); }
.po-tab-panel ul { display: grid; gap: 8px; margin: var(--space-4) 0 0; padding: 0; }
.po-tab-panel ul li { position: relative; margin: 0; padding-left: 28px; font-size: 0.96875rem; font-weight: 600; color: var(--color-dark); }
.po-tab-panel ul li::before { content: ""; position: absolute; top: 0.4em; left: 3px; width: 11px; height: 6px; border-bottom: 2.5px solid var(--pu-c4); border-left: 2.5px solid var(--pu-c4); transform: rotate(-45deg); }
.po-mock { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-bg-alt); }
.po-story { max-width: 280px; margin: 0 auto; padding: 22px 18px; border-radius: 26px; background: linear-gradient(160deg, #3b1a52, #0f2a4a); color: #ffffff; }
.po-story .po-story-title { margin: 0; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: #ffffff; }
.po-story-opts { display: grid; gap: 8px; margin-top: 14px; }
.po-story-opts span { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); text-align: center; font-size: 0.9375rem; font-weight: 700; color: #1a1020; }
.po-widget { padding: 16px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--pu-surface); }
.po-widget .po-widget-title { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--color-dark); }
.po-widget .po-opts { margin-top: 12px; gap: 10px; }
@media (min-width: 860px) { .po-tab-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.po-plans { display: grid; gap: var(--space-4); }
.po-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-6) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--pu-surface); }
.po-plan-featured { border: 2px solid var(--color-accent); box-shadow: var(--shadow-lg); }
.po-flag { align-self: flex-start; margin-bottom: 12px; padding: 5px 10px; border-radius: 999px; background: var(--pu-tint); font-size: 0.78125rem; font-weight: 800; color: var(--color-accent-text); }
.po-plan .po-plan-for { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--color-text-subtle); }
.po-plan h3 { margin: 8px 0 0; font-size: 1.75rem; }
.po-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: var(--space-5); }
.po-scope i { height: 12px; border-radius: 99px; background: var(--color-border); }
.po-scope-1 i:nth-child(1), .po-scope-2 i:nth-child(-n+2), .po-scope-3 i { background: var(--color-accent); }
.po-plan .po-scope-cap { margin: 8px 0 0; font-size: 0.8125rem; font-weight: 700; color: var(--color-text-subtle); }
.po-plan-price { margin-top: var(--space-5); padding: 14px 16px; border-radius: 14px; background: var(--color-bg-alt); }
.po-plan-price strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.1875rem; line-height: 1.2; color: var(--color-dark); }
.po-plan-price span { font-size: 0.875rem; color: var(--color-text-subtle); }
.po-plan ul { display: grid; flex: 1 1 auto; align-content: start; gap: 10px; margin: var(--space-5) 0 0; padding: 0; }
.po-plan ul li { position: relative; margin: 0; padding-left: 28px; font-size: 0.96875rem; color: var(--color-text-body); }
.po-plan ul li::before { content: ""; position: absolute; top: 0.4em; left: 3px; width: 11px; height: 6px; border-bottom: 2.5px solid var(--pu-c4); border-left: 2.5px solid var(--pu-c4); transform: rotate(-45deg); }
.po-plan .po-plan-cta { width: 100%; margin-top: var(--space-6); white-space: normal; text-align: center; }
@media (min-width: 900px) { .po-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.po-vs { display: grid; gap: var(--space-4); }
.po-vs-card { min-width: 0; padding: var(--space-6) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--pu-surface); }
.po-vs-dark { border-color: transparent; background: var(--pu-ink); color: var(--pu-ink-text); }
.po-vs-card h3 { margin: 0; font-size: 1.5rem; }
.po-vs-dark h3 { color: var(--pu-ink-text); }
.po-vs-card .po-vs-sub { margin: 6px 0 0; font-size: 0.9375rem; color: var(--color-text-subtle); }
.po-vs-dark .po-vs-sub { color: var(--pu-ink-sub); }
.po-vs-card ul { display: grid; gap: 12px; margin: var(--space-5) 0 0; padding: 0; }
.po-vs-card ul li { position: relative; margin: 0; padding-left: 28px; font-size: 1rem; color: var(--color-text-body); }
.po-vs-dark ul li { color: var(--pu-ink-text); }
.po-vs-card ul li::before { content: ""; position: absolute; top: 0.72em; left: 2px; width: 12px; height: 2.5px; border-radius: 2px; background: var(--color-text-subtle); }
.po-vs-dark ul li::before { top: 0.4em; left: 3px; width: 11px; height: 6px; border-radius: 0; border-bottom: 2.5px solid var(--pu-c4); border-left: 2.5px solid var(--pu-c4); background: none; transform: rotate(-45deg); }
@media (min-width: 800px) { .po-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.po-thread-band { text-align: center; }
.po-thread-band h2, .po-thread-band .po-lead { margin-right: auto; margin-left: auto; }
.po-thread { display: grid; gap: 14px; max-width: 820px; margin: clamp(28px, 4vw, 44px) auto 0; text-align: left; }
.po-thread .po-ask-q, .po-thread .po-ask-a { max-width: 88%; margin: 0; padding: 14px 18px; font-size: 1.03125rem; line-height: 1.5; }
.po-thread .po-ask-q { justify-self: start; border: 1px solid var(--color-border); border-radius: 20px 20px 20px 6px; background: var(--pu-surface); font-weight: 700; color: var(--color-dark); }
.po-thread .po-ask-a { justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--pu-tint); color: var(--color-dark); }
.po-ask-tag { display: block; margin-top: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--color-accent-text); }
.po-clusters { display: grid; gap: var(--space-4); }
.po-cluster { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 8px); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--pu-surface); }
.po-cluster::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: var(--pu-c1); }
.po-cluster:nth-child(5n+2)::before { background: var(--pu-c2); }
.po-cluster:nth-child(5n+3)::before { background: var(--pu-c3); }
.po-cluster:nth-child(5n+4)::before { background: var(--pu-c4); }
.po-cluster:nth-child(5n)::before { background: var(--pu-c5); }
.po-cluster h3 { margin: 0; font-weight: 800; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.02em; }
.po-cluster p { margin: 0; font-size: 0.96875rem; color: var(--color-text-subtle); }
.po-cluster ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.po-cluster ul li { margin: 0; }
.po-cluster ul li a { display: inline-block; padding: 7px 11px; border-radius: 10px; background: var(--color-bg-alt); font-size: 0.90625rem; font-weight: 600; color: var(--color-text-body); text-decoration: none; }
.po-cluster ul li a:hover { background: var(--pu-tint); color: var(--color-dark); text-decoration: none; }
@media (min-width: 760px) { .po-clusters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .po-clusters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
section.po-closing > div { position: relative; width: calc(100% - 2 * var(--gutter)); max-width: 1124px; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); overflow: hidden; isolation: isolate; border-radius: 34px; background: var(--cta-bg); }
section.po-closing > div::after {
  content: ""; position: absolute; right: -40px; bottom: -30px; z-index: -1; width: 360px; height: 220px; opacity: 0.22; pointer-events: none;
  background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%, 27% 100%, 54% 100%, 81% 100%;
  background-size: 18% 45%, 18% 80%, 18% 60%, 18% 100%;
}
section.po-closing[data-band] > div > h2 { max-width: 16em; margin: 0; color: #ffffff; font-size: clamp(2rem, 4.8vw, 3.5rem); }
section.po-closing[data-band] > div > p { max-width: 30em; margin: 12px 0 0; font-size: 1.1875rem; color: #ffffff; }
@media (max-width: 899px) { section.po-closing > div::after { width: 220px; height: 140px; right: -30px; bottom: -20px; opacity: 0.14; } }
section.po-closing[data-band] > div > p .po-mail { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.po-brief { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.po-brief li { margin: 0; padding: 6px 14px; border-radius: var(--radius-full); background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.7); color: #ffffff; font-size: 0.9375rem; font-weight: 600; }
.po-rows { display: grid; gap: 12px; max-width: none; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.po-rows li { position: relative; display: grid; gap: 4px; margin: 0; padding: 16px 18px 16px 26px; border-radius: 18px; background: var(--pu-surface); border: 1px solid var(--color-border); overflow: hidden; }
.po-rows li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--pu-c1); }
.po-rows li:nth-child(5n+2)::before { background: var(--pu-c2); }
.po-rows li:nth-child(5n+3)::before { background: var(--pu-c3); }
.po-rows li:nth-child(5n+4)::before { background: var(--pu-c4); }
.po-rows li:nth-child(5n+5)::before { background: var(--pu-c5); }
.po-rows a { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--color-dark); text-decoration: none; }
.po-rows a:hover { color: var(--color-accent-text); text-decoration: underline; }
.po-note { font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-subtle); }
@media (min-width: 900px) { .po-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }