/* ==========================================================================
   Page content: block-based sections ("hyp-s hyp-s--{layout}" Group blocks)
   Loaded on the front end and in the block editor, so editors see the same layout.
   ========================================================================== */
.content-flow { padding-bottom: var(--section-y); }
.content-flow .hyp-s { margin-top: var(--section-y); }
.content-flow > .container > :first-child { margin-top: calc(var(--section-y) * .75); }

.hyp-s h2 { font-size: var(--text-h2); }
.hyp-s > h2, .hyp-s__text > h2 { margin-bottom: var(--space-4); max-width: 24ch; }
.hyp-s > p, .hyp-s__text > p { max-width: 72ch; color: var(--color-text); }
.hyp-s > p + p, .hyp-s__text > p + p { margin-top: var(--space-3); }
.hyp-s ul.wp-block-list { list-style: none; display: grid; gap: .6rem; margin-top: var(--space-4); }
.hyp-s ul.wp-block-list li { position: relative; padding-left: 1.9rem; }
.hyp-s ul.wp-block-list li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--color-action-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5A70' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.hyp-kicker { color: var(--color-brand-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: .05em; margin-bottom: var(--space-2) !important; }
.hyp-more a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; }
.hyp-more a::after { content: "→"; transition: transform .15s ease; }
[dir="rtl"] .hyp-more a::after { content: "←"; }
.hyp-more a:hover::after { transform: translateX(3px); }

/* Item containers */
.hyp-items { display: grid; gap: var(--space-4); margin-top: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.hyp-item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.hyp-item h3 { font-size: 1.125rem; }
.hyp-item p { color: var(--color-muted); font-size: .9375rem; }
.hyp-item .hyp-more { margin-top: auto; padding-top: var(--space-2); }
.hyp-item ul.wp-block-list { margin-top: var(--space-2); gap: .35rem; font-size: .9375rem; }
[class*="hyp-icon-"]::before {
  content: ""; display: block; width: 44px; height: 44px; margin-bottom: var(--space-2); border-radius: 10px;
  background: var(--color-action-tint);
}
[class*="hyp-icon-"]::after {
  content: ""; position: absolute; top: calc(var(--space-5) + 10px); left: calc(var(--space-5) + 10px); width: 24px; height: 24px;
  background: var(--color-action); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
[dir="rtl"] [class*="hyp-icon-"]::after { left: auto; right: calc(var(--space-5) + 10px); }

/* Lead paragraphs under the hero */
.hyp-s--lead { max-width: 68ch; }
.hyp-s--lead p { font-size: var(--text-lead); line-height: 1.65; }

/* What is … : text + product visual */
.hyp-s--whatis { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1000px) { .hyp-s--whatis { grid-template-columns: 1fr 1.05fr; } }
.hyp-s--whatis ul.wp-block-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: var(--space-5); }
.hyp-s__visual { margin: 0; padding: clamp(1rem, 2.5vw, 2rem); border-radius: 18px; background: var(--color-mist) var(--art-light-circles) center / cover; }

/* Band: dark artwork panel with a demo button */
.hyp-s--band {
  position: relative; display: grid; padding: var(--panel-pad); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-night) var(--art-night-waves) center / cover no-repeat; color: var(--color-on-night);
}
.hyp-s--band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 26, 33, .92) 0%, rgba(13, 26, 33, .7) 55%, rgba(13, 26, 33, .15) 100%); }
.hyp-s--band .hyp-s__text { position: relative; max-width: 640px; }
.hyp-s--band h2 { color: #fff; }
.hyp-s--band p { color: var(--color-on-night) !important; }
.hyp-s--band p + p { color: var(--color-on-night-muted) !important; }
.hyp-s--band .hyp-kicker { color: #FF8A80 !important; }
.hyp-s--band ul.wp-block-list li { color: var(--color-on-night); }
.hyp-s__actions { margin-top: var(--space-5); }
[dir="rtl"] .hyp-s--band::before { background: linear-gradient(270deg, rgba(13, 26, 33, .92) 0%, rgba(13, 26, 33, .7) 55%, rgba(13, 26, 33, .15) 100%); }

/* Capabilities: tabs (JS) or a card grid without JS */
.hyp-s--tabs { padding: var(--panel-pad); border-radius: var(--radius-lg); background: var(--color-mist); }
.hyp-s--tabs > .hyp-s__inner > h2 { max-width: 30ch; }
.hyp-s--tabs .tabs { margin-top: var(--space-6); }
.hyp-s--tabs .tabs__panel {
  display: grid; gap: var(--space-6); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
@media (min-width: 900px) { .hyp-s--tabs .tabs__panel { grid-template-columns: 1fr 300px; align-items: center; } }
.hyp-s--tabs .tabs__panel .hyp-item { padding: 0; border: 0; background: none; }
.hyp-s--tabs .tabs__panel .hyp-item h3 { font-size: 1.625rem; font-weight: 500; }
.hyp-s--tabs .tabs__panel .hyp-item p { font-size: 1rem; color: var(--color-text); }
.tabs__art { aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.tabs__art .icon { width: 56px; height: 56px; opacity: .9; }

/* Cards and highlights */
.hyp-s--cards, .hyp-s--highlights { }
.hyp-s--highlights .hyp-items { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.hyp-s--highlights .hyp-item { align-items: center; text-align: center; padding-top: var(--space-6); }
.hyp-s--highlights [class*="hyp-icon-"]::after { left: 50%; transform: translateX(-50%); top: calc(var(--space-6) + 10px); }

/* Benefits: heading on one side, checked list on the other */
.hyp-s--benefits { display: grid; gap: var(--space-6); padding: var(--panel-pad); border-radius: var(--radius-lg); border: 1px solid var(--color-line); }
@media (min-width: 1000px) {
  .hyp-s--benefits { grid-template-columns: 380px 1fr; align-items: start; }
  .hyp-s--benefits > h2 { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.hyp-s--benefits > p { grid-column: 1; }
.hyp-s--benefits .hyp-items { grid-column: 2; grid-row: 1 / span 3; margin: 0; grid-template-columns: 1fr; gap: 0; }
@media (max-width: 999px) { .hyp-s--benefits .hyp-items { grid-column: auto; grid-row: auto; } }
.hyp-s--benefits .hyp-item { padding: var(--space-5) 0 var(--space-5) 3.5rem; border: 0; border-bottom: 1px solid var(--color-line); border-radius: 0; background: none; }
.hyp-s--benefits .hyp-item:last-child { border-bottom: 0; }
.hyp-s--benefits [class*="hyp-icon-"]::before { position: absolute; left: 0; top: var(--space-5); width: 38px; height: 38px; margin: 0; }
.hyp-s--benefits [class*="hyp-icon-"]::after { left: 9px; top: calc(var(--space-5) + 9px); width: 20px; height: 20px; }
[dir="rtl"] .hyp-s--benefits .hyp-item { padding: var(--space-5) 3.5rem var(--space-5) 0; }
[dir="rtl"] .hyp-s--benefits [class*="hyp-icon-"]::before { left: auto; right: 0; }
[dir="rtl"] .hyp-s--benefits [class*="hyp-icon-"]::after { left: auto; right: 9px; }

/* Checklist: two-column checked list */
.hyp-s--checklist ul.wp-block-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: var(--space-6); padding: var(--space-6); background: var(--color-mist); border-radius: var(--radius-md); }

/* FAQ */
.hyp-s--faq { display: grid; gap: var(--space-2); padding: var(--panel-pad); border-radius: var(--radius-lg); background: var(--color-sand); }
.hyp-s--faq > h2 { margin-bottom: var(--space-4); }
@media (min-width: 1000px) { .hyp-s--faq { grid-template-columns: 340px 1fr; column-gap: var(--space-6); } .hyp-s--faq > h2 { grid-row: 1 / span 20; } }

/* Related links */
.hyp-s--links ul.wp-block-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hyp-s--links ul.wp-block-list li { padding: 0; }
.hyp-s--links ul.wp-block-list li::before { display: none; }
.hyp-s--links ul.wp-block-list a { display: inline-flex; padding: .5rem .95rem; border: 1px solid var(--color-line-strong); border-radius: 999px; color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.hyp-s--links ul.wp-block-list a:hover { border-color: var(--color-action); color: var(--color-action); }
.hyp-s--links > h2 { font-size: var(--text-h3); font-weight: 600; }

/* Text */
.hyp-s--text { max-width: 76ch; }

/* Plain editor content (posts, pages without sections) */
.content-flow .container > p, .content-flow .container > ul, .content-flow .container > ol, .content-flow .container > h2, .content-flow .container > h3 { max-width: 72ch; }
.content-flow .container > :not(.hyp-s) + :not(.hyp-s) { margin-top: var(--space-4); }
.content-flow .container > h2 { margin-top: var(--space-7); }
/* Icon masks for block content: .hyp-icon-{name} (generated with inc/icons.php) */
.hyp-icon-shield { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v5c0%204.5-3%208.3-7%2010-4-1.7-7-5.5-7-10V6l7-3z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E"); }
.hyp-icon-chart { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22/%3E%3C/svg%3E"); }
.hyp-icon-layers { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%205-9%205-9-5%209-5z%22/%3E%3Cpath%20d%3D%22M3%2013l9%205%209-5%22/%3E%3Cpath%20d%3D%22M3%2017.5l9%205%209-5%22%20opacity%3D%22.55%22/%3E%3C/svg%3E"); }
.hyp-icon-globe { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M3%2012h18M12%203c2.5%202.6%203.8%205.6%203.8%209s-1.3%206.4-3.8%209c-2.5-2.6-3.8-5.6-3.8-9S9.5%205.6%2012%203z%22/%3E%3C/svg%3E"); }
.hyp-icon-bolt { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202L4%2014h7l-1%208%209-12h-7l1-8z%22/%3E%3C/svg%3E"); }
.hyp-icon-link { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201%22/%3E%3Cpath%20d%3D%22M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%22/%3E%3C/svg%3E"); }
.hyp-icon-users { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.6-3.6%203.2-6%206.5-6s5.9%202.4%206.5%206%22/%3E%3Cpath%20d%3D%22M16%204.6a3.5%203.5%200%200%201%200%206.8M18%2014.3c2%20.8%203.2%202.8%203.5%205.7%22/%3E%3C/svg%3E"); }
.hyp-icon-box { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208l-9-5-9%205v8l9%205%209-5V8z%22/%3E%3Cpath%20d%3D%22M3%208l9%205%209-5M12%2013v8%22/%3E%3C/svg%3E"); }
.hyp-icon-check { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012.5l2.7%202.7L16%209.8%22/%3E%3C/svg%3E"); }

.apps .tabs__panel > .hyp-item > h3 { display: none; }
.apps .tabs__panel .apps__detail { margin: 0; }
.tabs__panel[hidden] { display: none !important; }