/* Findb Studio 1.0.311 — Pages UX Architecture Foundation + Premium Disclosure Polish
   Additive, Pages-scoped presentation layer. */

.pages-ux311{
  --pages-ux-4:4px;
  --pages-ux-8:8px;
  --pages-ux-12:12px;
  --pages-ux-16:16px;
  --pages-ux-24:24px;
  --pages-ux-32:32px;
  --pages-ux-surface:rgba(12,13,19,.84);
  --pages-ux-surface-strong:#0d0e15;
  --pages-ux-line:rgba(255,255,255,.075);
  --pages-ux-line-strong:rgba(255,255,255,.13);
  --pages-ux-purple:#8b5cf6;
  --pages-ux-purple-soft:rgba(139,92,246,.14);
  --pages-ux-copy:#f7f5fb;
  --pages-ux-muted:#9693a2;
}

/* -------------------------------------------------------------------------- */
/* Main information architecture                                               */
/* -------------------------------------------------------------------------- */
.pages-ux311 .pages-editor-layout{gap:24px}

.pages-ux311 .pages-ux-area-card{margin-bottom:0!important;animation:pages-ux-in .18s ease both}
.pages-ux311 .pages-ux-area-head{margin-bottom:22px}
.pages-ux311 .pages-ux-area-head h2{font-size:23px;letter-spacing:-.025em}
.pages-ux311 .pages-ux-area-head p{max-width:580px;line-height:1.55;color:#918e9d!important}
.pages-ux311 .pages-editor-layout>main{display:block;min-width:0}
@keyframes pages-ux-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}

/* -------------------------------------------------------------------------- */
/* Design — progressive disclosure                                             */
/* -------------------------------------------------------------------------- */
.pages-ux311 .pages-theme-presets{margin-bottom:22px}
.pages-ux311 .pages-design-sections{display:grid;gap:10px}
.pages-ux311 .pages-design-section{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--pages-ux-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.010))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.pages-ux311 .pages-design-section>summary{min-height:74px;padding:15px 16px!important;margin:0!important;transition:background .16s ease,border-color .16s ease}
.pages-ux311 .pages-design-section>summary:hover{background:rgba(255,255,255,.022)}
.pages-ux311 .pages-design-section[open]>summary{background:linear-gradient(145deg,rgba(139,92,246,.075),rgba(255,255,255,.012));box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.pages-ux311 .pages-design-section>summary>span{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:9px;align-items:center}
.pages-ux311 .pages-design-section>summary>span>b{grid-row:1/4;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(139,92,246,.10);color:#bba9ff;font-size:9px;letter-spacing:.06em}
.pages-ux311 .pages-design-section>summary>span>strong{font-size:14px;color:#f8f6fc}
.pages-ux311 .pages-design-section>summary>span>small{font-size:10px;color:#85818f}
.pages-ux311 .pages-ux-summary-state{grid-column:2;display:block;margin-top:3px;color:#b7afc6;font-size:10px;font-style:normal;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pages-ux311 .pages-design-section>summary>i{width:24px!important;height:24px!important;display:grid!important;place-items:center!important;font-size:0!important;color:transparent!important;flex:0 0 24px!important}
.pages-ux311 .pages-design-section>summary>i::before{content:'';display:block;width:7px;height:7px;border-right:1.45px solid rgba(203,198,216,.62);border-bottom:1.45px solid rgba(203,198,216,.62);transform:translateY(-1px) rotate(45deg);transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .18s ease}
.pages-ux311 .pages-design-section[open]>summary>i::before{transform:translateY(2px) rotate(225deg);border-color:rgba(225,220,238,.82)}
.pages-ux311 .pages-design-section-body{padding:18px 16px 20px!important}
.pages-ux311 .pages-theme-group{gap:16px}
.pages-ux311 .pages-theme-group+.pages-theme-group{margin-top:18px}

/* -------------------------------------------------------------------------- */
/* Profile — contextual groups                                                 */
/* -------------------------------------------------------------------------- */
.pages-ux311 .pages-profile-form{gap:10px}
.pages-ux311 .pages-ux-profile-disclosure{
  position:relative;isolation:isolate;display:block;
  padding:0!important;overflow:hidden;
  border:1px solid var(--pages-ux-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.010))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.016)!important;
}
.pages-ux311 .pages-ux-profile-disclosure>summary{min-height:68px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer}
.pages-ux311 .pages-ux-profile-disclosure>summary::-webkit-details-marker{display:none}
.pages-ux311 .pages-ux-profile-disclosure>summary>span{display:grid;gap:3px;min-width:0}
.pages-ux311 .pages-ux-profile-disclosure>summary strong{font-size:14px;color:#f8f6fc}
.pages-ux311 .pages-ux-profile-disclosure>summary small{font-size:10px;color:#878391;line-height:1.4}
.pages-ux311 .pages-ux-profile-disclosure>summary>.pages-ux-chevron{width:8px;height:8px;display:block;flex:0 0 8px;margin-right:4px;border-right:1.45px solid rgba(203,198,216,.62);border-bottom:1.45px solid rgba(203,198,216,.62);transform:translateY(-2px) rotate(45deg);transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .18s ease}
.pages-ux311 .pages-ux-profile-disclosure[open]>summary{background:linear-gradient(145deg,rgba(139,92,246,.065),rgba(255,255,255,.012));box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.pages-ux311 .pages-ux-profile-disclosure[open]>summary>.pages-ux-chevron{transform:translateY(2px) rotate(225deg);border-color:rgba(225,220,238,.82)}
.pages-ux311 .pages-ux-profile-disclosure-body{padding:16px}
.pages-ux311 .pages-ux-embedded-group{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
.pages-ux311 .pages-contact-section.pages-ux-profile-disclosure{padding:0!important}
.pages-ux311 .pages-contact-section.pages-ux-profile-disclosure>summary{margin:0!important}
.pages-ux311 .pages-contact-section.pages-ux-profile-disclosure>.pages-contact-grid{padding:16px}
.pages-ux311 .pages-source-section{margin-top:10px;border-style:dashed;background:rgba(255,255,255,.012)!important}

/* -------------------------------------------------------------------------- */
/* Structure / content spacing                                                 */
/* -------------------------------------------------------------------------- */
.pages-ux311 .pages-page-setup-grid{gap:10px}
.pages-ux311 .pages-setup-control{padding:16px!important}
.pages-ux311 .pages-block-list{gap:9px}
.pages-ux311 .pages-block-card{box-shadow:none!important}
.pages-ux311 .pages-block-card:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.12)!important}

/* -------------------------------------------------------------------------- */
/* Block composer — one consistent grammar                                     */
/* -------------------------------------------------------------------------- */
.pages-modal.pages-ux-composer{max-width:720px!important}
.pages-ux-composer .pages-modal-head{padding-bottom:16px}
.pages-ux-composer-index{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:10px 0 12px;
  margin:0 0 4px;
  background:linear-gradient(180deg,#0c0d13 72%,rgba(12,13,19,0));
}
.pages-ux-composer-index::-webkit-scrollbar{display:none}
.pages-ux-composer-index button{flex:0 0 auto;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025);color:#8e8a99;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:800;cursor:pointer}
.pages-ux-composer-index button:hover{border-color:rgba(139,92,246,.24);color:#d7d0e8;background:rgba(139,92,246,.075)}
.pages-ux-composer .pages-composer-form{gap:10px!important}
.pages-ux-composer .pages-ux-composer-section{
  position:relative;isolation:isolate;padding:0!important;overflow:hidden;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.027),rgba(255,255,255,.009))!important;
  box-shadow:0 11px 30px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.pages-ux-composer .pages-composer-section-head{
  position:relative;
  min-height:70px;
  padding:14px 44px 14px 16px!important;
  cursor:pointer;
  user-select:none;
  transition:background .16s ease;
  border-bottom:0!important;
}
.pages-ux-composer .pages-composer-section-head::after{content:'';position:absolute;right:18px;top:50%;width:7px;height:7px;border-right:1.45px solid rgba(203,198,216,.72);border-bottom:1.45px solid rgba(203,198,216,.72);transform:translateY(-30%) rotate(225deg);transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .18s ease}
.pages-ux-composer .pages-ux-composer-section.is-collapsed .pages-composer-section-head::after{transform:translateY(-70%) rotate(45deg);border-color:rgba(169,165,181,.62)}
.pages-ux-composer .pages-composer-section-head:hover{background:rgba(255,255,255,.02)}
.pages-ux-composer .pages-composer-section-head:focus-visible{outline:2px solid #9677ff;outline-offset:-2px}
.pages-ux-composer .pages-composer-section-head>span{font-size:9px!important;line-height:1;text-transform:uppercase;letter-spacing:.11em;color:#8b72e8!important;font-weight:850}
.pages-ux-composer .pages-composer-section-head>strong{font-size:15px!important;color:#f7f5fb!important}
.pages-ux-composer .pages-composer-section-head>small{font-size:10px!important;line-height:1.45;color:#817e8d!important}
.pages-ux-composer .pages-composer-section-body{padding:16px!important;border-top:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);animation:pages-ux-in .16s ease both}
.pages-ux-composer .pages-ux-composer-section.is-collapsed>.pages-composer-section-body{display:none!important}
.pages-ux-composer .pages-composer-typography-section,.pages-ux-composer .pages-ux-created-typography-section{border-color:rgba(117,146,255,.13)!important}
.pages-ux-composer .pages-ux-created-motion-section{border-color:rgba(196,123,255,.13)!important}
.pages-ux-composer .pages-composer-subgroup{margin-top:0!important;padding-top:0!important;border-top:0!important}
.pages-ux-composer .pages-composer-more{margin-top:10px}
.pages-ux-composer .pages-confirm-actions{position:sticky;bottom:0;z-index:7;margin:16px -2px -2px;padding:12px 2px 2px;background:linear-gradient(180deg,rgba(10,11,16,0),#0a0b10 28%)}

/* The proprietary Findb Sons player keeps its own internal visual rules; this layer only organizes its composer sections. */

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */
@media(max-width:900px){
  .pages-ux311 .pages-editor-layout{display:block!important}
  .pages-ux311 .pages-editor-layout>aside{margin-top:18px}
}
@media(max-width:680px){
  .pages-ux311{--pages-mobile-edge:12px}
  .pages-ux311 .pages-ux-area-card{padding:16px!important;border-radius:20px!important}
  .pages-ux311 .pages-ux-area-head{gap:12px;margin-bottom:16px}
  .pages-ux311 .pages-ux-area-head h2{font-size:21px}
  .pages-ux311 .pages-ux-area-head p{font-size:11px;line-height:1.5}
  .pages-ux311 .pages-theme-presets{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .pages-ux311 .pages-theme-card{min-height:76px}
  .pages-ux311 .pages-design-section>summary{min-height:72px;padding:14px!important}
  .pages-ux311 .pages-design-section-body{padding:15px 14px 17px!important}
  .pages-ux311 .pages-ux-summary-state{max-width:230px}
  .pages-ux311 .pages-contact-grid{grid-template-columns:1fr!important}
  .pages-ux311 .pages-ux-profile-disclosure>summary{padding:14px}
  .pages-ux311 .pages-ux-profile-disclosure-body,.pages-ux311 .pages-contact-section.pages-ux-profile-disclosure>.pages-contact-grid{padding:14px}
  .pages-ux311 .pages-editor-layout>aside{display:none!important}
  .pages-modal.pages-ux-composer{width:100%!important;max-width:100%!important;border-radius:24px 24px 0 0!important}
  .pages-ux-composer-index{margin-left:-2px;margin-right:-2px;padding-top:8px}
  .pages-ux-composer .pages-composer-section-head{min-height:66px;padding:13px 42px 13px 14px!important}
  .pages-ux-composer .pages-composer-section-body{padding:14px!important}
}
@media(prefers-reduced-motion:reduce){
  .pages-ux311 .pages-ux-area-card,.pages-ux-composer .pages-composer-section-body{animation:none!important}
}


/* -------------------------------------------------------------------------- */
/* Typography Engine v2 — Studio controls + lightweight mini-preview           */
/* -------------------------------------------------------------------------- */
.pages-ux311 .pages-typography-global-grid{display:grid;gap:12px}
.pages-ux311 .pages-typography-global-role,.pages-ux-composer .pages-typography-role{padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.014);display:grid;gap:13px}
.pages-ux311 .pages-typography-global-role>header,.pages-ux-composer .pages-typography-role-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pages-ux311 .pages-typography-global-role>header>div,.pages-ux-composer .pages-typography-role-head>div{display:grid;gap:3px;min-width:0}
.pages-ux311 .pages-typography-global-role>header strong,.pages-ux-composer .pages-typography-role-head strong{font-size:13px;color:#f7f5fb}
.pages-ux311 .pages-typography-global-role>header small,.pages-ux-composer .pages-typography-role-head small{font-size:10px;line-height:1.42;color:#878391}
.pages-ux-composer .pages-typography-role-custom{display:grid;gap:13px}
.pages-ux311 .pages-typography-advanced,.pages-ux-composer .pages-typography-advanced{margin:2px 0 0;border-top:1px solid rgba(255,255,255,.055);padding-top:10px}
.pages-ux311 .pages-typography-advanced>summary,.pages-ux-composer .pages-typography-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;color:#aaa6b4}
.pages-ux311 .pages-typography-advanced>summary::-webkit-details-marker,.pages-ux-composer .pages-typography-advanced>summary::-webkit-details-marker{display:none}
.pages-ux311 .pages-typography-advanced>summary span,.pages-ux-composer .pages-typography-advanced>summary span{display:grid;gap:2px}
.pages-ux311 .pages-typography-advanced>summary strong,.pages-ux-composer .pages-typography-advanced>summary strong{font-size:11px;color:#d8d4e0}
.pages-ux311 .pages-typography-advanced>summary small,.pages-ux-composer .pages-typography-advanced>summary small{font-size:9px;color:#777382}
.pages-ux311 .pages-typography-advanced>summary b,.pages-ux-composer .pages-typography-advanced>summary b{font-size:15px;font-weight:500;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.pages-ux311 .pages-typography-advanced[open]>summary b,.pages-ux-composer .pages-typography-advanced[open]>summary b{transform:rotate(90deg)}
.pages-ux311 .pages-typography-advanced>div,.pages-ux-composer .pages-typography-advanced>div{display:grid;gap:12px;padding-top:12px}
.pages-ux311 .pages-typography-scope-note{margin-top:2px;padding:12px 13px;border-radius:14px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.12);font-size:10px;line-height:1.48;color:#aaa3b9}
.pages-phone{--pages-button-font:var(--pages-font);--pages-button-weight:600;--pages-body-line-height:1.55;--pages-heading-line-height:1.10;--pages-button-line-height:1.20;--pages-body-letter-spacing:0px;--pages-heading-letter-spacing:0px;--pages-button-letter-spacing:0px}
.pages-phone .pages-preview-name{font-family:var(--pages-heading-font);font-size:var(--pages-heading-size);font-weight:var(--pages-heading-weight);line-height:var(--pages-heading-line-height);letter-spacing:var(--pages-heading-letter-spacing)}
.pages-phone .pages-preview-bio,.pages-phone .pages-preview-block.text p{font-family:var(--pages-font);font-size:var(--pages-body-size);font-weight:var(--pages-body-weight);line-height:var(--pages-body-line-height);letter-spacing:var(--pages-body-letter-spacing)}
.pages-phone .pages-preview-block.text>strong,.pages-phone .pages-preview-gallery>strong,.pages-phone .pages-preview-media-block>strong{font-family:var(--pages-heading-font);font-weight:var(--pages-heading-weight);line-height:var(--pages-heading-line-height);letter-spacing:var(--pages-heading-letter-spacing)}
.pages-phone .pages-preview-block.link .pages-link-copy>strong,.pages-phone .pages-preview-block.compact .pages-action-copy,.pages-phone .pages-preview-links{font-family:var(--pages-button-font);font-size:var(--pages-button-size);font-weight:var(--pages-button-weight);line-height:var(--pages-button-line-height);letter-spacing:var(--pages-button-letter-spacing)}
.pages-phone .pages-preview-block.link .pages-link-copy>small{font-family:var(--pages-font);font-size:var(--pages-body-size);font-weight:var(--pages-body-weight);line-height:var(--pages-body-line-height);letter-spacing:var(--pages-body-letter-spacing)}
@media (prefers-reduced-motion:reduce){.pages-ux311 .pages-design-section>summary>i::before,.pages-ux311 .pages-ux-profile-disclosure>summary>.pages-ux-chevron,.pages-ux-composer .pages-composer-section-head::after{transition:none!important}}
