/* Symfio 2.1 – design „pricing“ (stránky ze sekcí, include/sy-sections.php). Převzato z vloženého <style> stránek 3147, 1188; načítá se jen na stránkách s tímto designem. */
/* =====================================================================
   Symfio – Ceník
   Tokens mirror the symfio.app theme (Tailwind build): BR Sonoma,
   ink #261738, violet #AC6AFF, lavender wash #F5F2F8 with 23px dot grid.
   Page content only: the theme renders the header, the hero (H1),
   the closing band and the footer. Every rule is compiled under #sy-pricing
   so it outranks the theme's .default-page-content styles.
   ===================================================================== */

/* The theme already declares BR Sonoma; these rules only matter when the file
   is opened on its own. Paths are root-relative, so they resolve on symfio.app. */
@font-face{font-family:"BR Sonoma";src:url("../fonts/BRSonoma-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"BR Sonoma";src:url("../fonts/BRSonoma-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BR Sonoma";src:url("../fonts/BRSonoma-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

#sy-pricing{
  --sy-ink:#261738;        /* gray-800 */
  --sy-ink-2:#3B2951;      /* gray-700 */
  --sy-soft:#6E6479;       /* small secondary text, AA on white */
  --sy-muted:#928B9B;      /* gray-400 */
  --sy-line:#E6E1EB;       /* gray-200 */
  --sy-wash:#F5F2F8;       /* purple-100 */
  --sy-violet:#AC6AFF;     /* purple-500 */
  --sy-shadow:2px 8px 31px rgba(51,0,116,.07);
  --sy-shadow-lg:12px 8px 120px rgba(51,0,116,.17);
  --sy-font:"BR Sonoma",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sy-wrap:1216px;
  --sy-gutter:clamp(16px,4cqi,32px);
  font-family:var(--sy-font);color:var(--sy-ink-2);font-size:16px;line-height:1.6;text-align:left;
  -webkit-font-smoothing:antialiased;
  /* layout responds to the block's own width, not the window */
  container:sy / inline-size;
  /* Full width: step out of the theme's narrow text column (.container > .lg:w-4/5), like WordPress "alignfull".
     Delete this line to keep the block inside the column; the layout then adapts to that width instead. */
  width:100vw;max-width:none;margin-inline:calc(50% - 50vw);
}
#sy-pricing,#sy-pricing *,#sy-pricing *::before,#sy-pricing *::after{box-sizing:border-box}
#sy-pricing ::selection{background:var(--sy-violet);color:#fff}

/* Undo what the theme's .default-page-content does to content: violet dot + indent on every list item,
   padding on paragraphs and headings, its own heading sizes, link underline animation.
   Compiled, these sit at #sy-pricing specificity: above the theme, below every component rule. */
#sy-pricing :where(h1,h2,h3,h4,h5,h6){margin:0;padding:0;font-size:inherit;font-weight:400;line-height:1.2;color:var(--sy-ink)}
#sy-pricing :where(p){margin:0;padding:0}
#sy-pricing :where(ul,ol){margin:0;padding:0;list-style:none}
#sy-pricing :where(li){margin:0;padding:0}
#sy-pricing :where(li)::before,#sy-pricing :where(li)::after{content:none}
#sy-pricing :where(dl,dd){margin:0}
#sy-pricing :where(a){color:inherit;background-image:none;font-weight:inherit;text-decoration:none}

#sy-pricing .sy-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#sy-pricing .sy-wrap{max-width:calc(var(--sy-wrap) + 2*var(--sy-gutter));margin:0 auto;padding:0 var(--sy-gutter)}
#sy-pricing .sy-ico{flex:none;width:20px;height:20px;color:var(--sy-violet)}
#sy-pricing :is(a,button,summary):focus-visible{outline:2px solid var(--sy-violet);outline-offset:3px}


/* ---------- buttons (theme: rounded-full, py-5 px-[40px], hover → violet) ---------- */
#sy-pricing .sy-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-size:16px;font-weight:400;line-height:1.4;text-decoration:none;background-image:none;border:1px solid transparent;border-radius:9999px;padding:19px 40px;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
#sy-pricing .sy-btn--block{width:100%;padding-left:20px;padding-right:20px;white-space:normal;text-align:center}
#sy-pricing .sy-btn--dot{padding:19px 28px 19px 20px;color:var(--sy-ink);background:transparent}
#sy-pricing .sy-btn--dot::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--sy-violet);transition:background-color .2s}
#sy-pricing .sy-btn--dot:hover{background:var(--sy-violet);color:#fff}
#sy-pricing .sy-btn--dot:hover::before{background:#fff}
#sy-pricing .sy-btn--dark{background:var(--sy-ink);color:#fff}
#sy-pricing .sy-btn--dark:hover{background:var(--sy-violet);border-color:var(--sy-violet)}
#sy-pricing .sy-btn--outline{background:transparent;border-color:var(--sy-ink);color:var(--sy-ink)}
#sy-pricing .sy-btn--outline:hover{background:var(--sy-violet);border-color:var(--sy-violet);color:#fff}
#sy-pricing .sy-btn--violet{background:var(--sy-violet);color:#fff}
#sy-pricing .sy-btn--violet:hover{background:#fff;color:var(--sy-ink)}

/* ---------- intro (first block of the page content, directly under the theme hero) ---------- */
#sy-pricing .sy-intro{padding:clamp(56px,6cqi,88px) 0 clamp(56px,6cqi,80px);text-align:center}
#sy-pricing .sy-intro__lead{max-width:40rem;margin:0 auto;font-size:clamp(17px,1.4cqi,19px);line-height:1.6;color:var(--sy-ink-2)}
#sy-pricing .sy-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;margin-top:40px}
#sy-pricing .sy-stats{display:flex;justify-content:center;gap:clamp(28px,6cqi,88px);margin:56px auto 0}
#sy-pricing .sy-stats div{display:flex;flex-direction:column;align-items:center}
#sy-pricing .sy-stats dt{order:2;margin-top:6px;font-size:14px;line-height:1.4;color:var(--sy-ink-2)}
#sy-pricing .sy-stats dd{order:1;margin:0;font-size:clamp(28px,3cqi,40px);line-height:1.1;color:var(--sy-ink)}

/* ---------- tiers ---------- */
#sy-pricing .sy-tiers{position:relative}
#sy-pricing .sy-tiers__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:0}
#sy-pricing .sy-tier{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sy-line);box-shadow:var(--sy-shadow);padding:40px 32px 32px;color:var(--sy-ink-2)}
@supports (grid-template-rows:subgrid){
  #sy-pricing .sy-tier{display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0}
}
#sy-pricing .sy-tier__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:40px}
#sy-pricing .sy-tier > *{min-width:0}
#sy-pricing .sy-tier h3{font-size:32px;line-height:1.2}
#sy-pricing .sy-badge{font-size:13px;line-height:1;padding:8px 12px;border-radius:9999px;background:var(--sy-violet);color:#fff;white-space:nowrap}
#sy-pricing .sy-tier__intro{padding-top:20px}
#sy-pricing .sy-tier__claim{font-size:20px;line-height:1.35;color:var(--sy-ink)}
#sy-pricing .sy-tier__desc{margin-top:10px;font-size:15px;line-height:1.6}
#sy-pricing .sy-tier__base{margin-top:28px;padding:16px 0 4px;border-top:1px solid var(--sy-line);font-size:13px;line-height:1.4;color:var(--sy-soft)}
#sy-pricing .sy-tier__list{display:flex;flex-direction:column;gap:12px;padding-top:12px}
#sy-pricing .sy-tier__list li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15px;line-height:1.45;color:var(--sy-ink)}
#sy-pricing .sy-tier__list .sy-ico{margin-top:0}
#sy-pricing .sy-soon{display:inline-block;margin-left:2px;padding:3px 8px;border:1px solid var(--sy-violet);border-radius:9999px;font-size:12px;line-height:1.2;color:var(--sy-ink);white-space:nowrap;vertical-align:1px}
#sy-pricing .sy-tier__addhead{margin-top:24px;padding-top:16px;border-top:1px solid var(--sy-line);font-size:13px;line-height:1.4;color:var(--sy-soft)}
#sy-pricing .sy-tier__list--add li{color:var(--sy-ink-2)}
#sy-pricing .sy-tier__cta{padding-top:36px;align-self:end}

#sy-pricing .sy-tier--featured{background:var(--sy-ink);border-color:var(--sy-ink);color:#CFC6DA;box-shadow:var(--sy-shadow-lg)}
#sy-pricing .sy-tier--featured h3,#sy-pricing .sy-tier--featured .sy-tier__claim,#sy-pricing .sy-tier--featured .sy-tier__list li{color:#fff}
#sy-pricing .sy-tier--featured :is(.sy-tier__base,.sy-tier__addhead){border-top-color:rgba(255,255,255,.16);color:#B7ACC6}
#sy-pricing .sy-tier--featured .sy-tier__list--add li{color:#CFC6DA}
#sy-pricing .sy-tier--featured .sy-btn--violet:focus-visible{outline-color:#fff}

/* proof of concept + pricing note */
#sy-pricing .sy-poc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px;margin-top:24px;padding:36px 40px;background:var(--sy-wash)}
#sy-pricing .sy-poc h2{font-size:24px;line-height:1.3}
#sy-pricing .sy-poc p{margin-top:10px;max-width:40rem;font-size:15px}
#sy-pricing .sy-note{max-width:46rem;margin:32px auto 0;text-align:center;font-size:14px;line-height:1.6;color:var(--sy-ink-2)}
#sy-pricing .sy-note span{display:block;margin-top:4px;color:var(--sy-soft)}

/* ---------- section scaffolding ---------- */
#sy-pricing .sy-section{padding:clamp(88px,10cqi,144px) 0}
#sy-pricing .sy-section + .sy-section{padding-top:0}
#sy-pricing .sy-head h2{font-size:clamp(38px,5cqi,64px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
#sy-pricing .sy-head p{margin-top:20px;max-width:38rem;font-size:18px;line-height:1.6}
#sy-pricing .sy-head--center{text-align:center}
#sy-pricing .sy-head--center p{margin-left:auto;margin-right:auto}

/* ---------- comparison table ---------- */
#sy-pricing .sy-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin:48px 0 8px;font-size:14px;color:var(--sy-ink-2)}
#sy-pricing .sy-legend li{display:flex;align-items:center;gap:10px}
#sy-pricing .sy-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:15px}
#sy-pricing .sy-table .sy-c{width:168px}
#sy-pricing .sy-table thead th{position:sticky;top:0;z-index:2;padding:22px 8px;background:#fff;border-bottom:1px solid var(--sy-ink);font-size:18px;font-weight:400;line-height:1.2;color:var(--sy-ink);text-align:center}
#sy-pricing .sy-table thead th.is-featured{background:var(--sy-ink);color:#fff}
#sy-pricing .sy-table tbody th{padding:15px 24px 15px 0;font-weight:400;line-height:1.45;text-align:left;color:var(--sy-ink-2);border-bottom:1px solid var(--sy-line)}
#sy-pricing .sy-table td{padding:12px 8px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--sy-line)}
#sy-pricing .sy-table td:nth-child(3){background:var(--sy-wash)}
#sy-pricing .sy-table tr.sy-grp th{padding:56px 0 16px;border-bottom:1px solid var(--sy-ink)}
#sy-pricing .sy-table tbody:first-of-type tr.sy-grp th{padding-top:36px}
#sy-pricing .sy-grp__t{display:block;font-size:22px;line-height:1.3;color:var(--sy-ink)}
#sy-pricing .sy-grp__s{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--sy-soft)}
#sy-pricing .sy-yes{display:inline-flex;vertical-align:middle}
#sy-pricing .sy-table td > *{vertical-align:middle}
#sy-pricing .sy-no{display:inline-block;width:12px;height:0;border-top:1.5px solid #857D8F;vertical-align:middle}  /* 3:1+ on white and on the tinted column */
#sy-pricing .sy-val{font-size:14px;line-height:1.35;color:var(--sy-ink)}
#sy-pricing .sy-add{display:inline-flex;align-items:center;justify-content:center;padding:5px 11px;border:1px solid var(--sy-violet);border-radius:9999px;background:#fff;font-size:12px;line-height:1.2;color:var(--sy-ink)}

/* ---------- FAQ (theme accordion: opened item → #F5F2F8, chevron flips) ---------- */
#sy-pricing .sy-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 80px;align-items:start}
#sy-pricing .sy-faq__head{position:sticky;top:40px}
#sy-pricing .sy-faq details{border-bottom:1px solid var(--sy-line);transition:background-color .3s}
#sy-pricing .sy-faq details:first-child{border-top:1px solid var(--sy-line)}
#sy-pricing .sy-faq details[open]{background:var(--sy-wash)}
#sy-pricing .sy-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;font-size:18px;line-height:1.4;color:var(--sy-ink);cursor:pointer;list-style:none}
#sy-pricing .sy-faq summary::-webkit-details-marker{display:none}
#sy-pricing .sy-faq summary:hover{color:var(--sy-violet)}
#sy-pricing .sy-chev{flex:none;color:var(--sy-ink);transition:transform .3s}
#sy-pricing .sy-faq details[open] .sy-chev{transform:rotate(180deg);color:var(--sy-violet)}
#sy-pricing .sy-faq__a{padding:0 64px 28px 24px;font-size:16px;line-height:1.65}
#sy-pricing .sy-faq__a a{color:var(--sy-ink);text-decoration:underline;text-decoration-color:var(--sy-violet);text-underline-offset:3px;background-image:none;font-weight:400}
@supports (interpolate-size:allow-keywords){
  #sy-pricing .sy-faq{interpolate-size:allow-keywords}
  #sy-pricing .sy-faq details::details-content{block-size:0;overflow:clip;transition:block-size .35s ease,content-visibility .35s allow-discrete}
  #sy-pricing .sy-faq details[open]::details-content{block-size:auto}
}

/* ---------- responsive ---------- */
@container sy (max-width:1024px){
  #sy-pricing .sy-tier{padding:32px 24px 24px}
  #sy-pricing .sy-table .sy-c{width:128px}
  #sy-pricing .sy-faq{grid-template-columns:1fr}
  #sy-pricing .sy-faq__head{position:static}
}
@container sy (max-width:900px){
  #sy-pricing .sy-tiers__grid{grid-template-columns:minmax(0,34rem);justify-content:center}
  #sy-pricing .sy-tier{margin-bottom:20px}
  #sy-pricing .sy-poc{grid-template-columns:1fr;padding:32px 24px}
}
@container sy (max-width:640px){
  #sy-pricing .sy-legend{gap:10px 20px;font-size:13px}
  #sy-pricing .sy-table{font-size:14px}
  #sy-pricing .sy-table .sy-c{width:60px}
  #sy-pricing .sy-table thead th{padding:16px 2px;font-size:12px}
  #sy-pricing .sy-table tbody th{padding:13px 12px 13px 0}
  #sy-pricing .sy-table td{padding:10px 2px}
  #sy-pricing .sy-grp__t{font-size:19px}
  #sy-pricing .sy-val{font-size:12px}
  #sy-pricing .sy-add{width:24px;height:24px;padding:0}
  #sy-pricing .sy-add .sy-add__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  #sy-pricing .sy-add::before{content:"+" / "";font-size:15px;line-height:1;color:var(--sy-violet)}
  #sy-pricing .sy-legend .sy-add{width:auto;height:auto;padding:5px 11px}
  #sy-pricing .sy-legend .sy-add .sy-add__t{position:static;width:auto;height:auto;clip:auto}
  #sy-pricing .sy-legend .sy-add::before{content:none}
  #sy-pricing .sy-faq summary{padding:20px 16px;font-size:17px}
  #sy-pricing .sy-faq__a{padding:0 16px 24px}
  #sy-pricing .sy-actions .sy-btn{width:100%}
  #sy-pricing .sy-stats{gap:20px}
  #sy-pricing .sy-stats dt{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  #sy-pricing *,#sy-pricing *::before,#sy-pricing *::after{transition:none!important;animation:none!important}
}

/* Links inside the pricing block: the page's own reset strips link styling, so restore it here.
   Buttons and chips are excluded so they keep their pill styling. */
#sy-pricing a[href]:not([class*="sy-btn"]):not([class*="sy-chip"]):not([class*="sy-circle"]) {
  color: var(--sy-ink);
  text-decoration: underline;
  text-decoration-color: var(--sy-violet);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
}
#sy-pricing a[href]:not([class*="sy-btn"]):not([class*="sy-chip"]):not([class*="sy-circle"]):hover {
  color: var(--sy-violet);
}
/* inside the dark card the ink colour would be unreadable */
#sy-pricing .sy-tier--featured a[href]:not([class*="sy-btn"]) { color: #fff; }
#sy-pricing .sy-tier--featured a[href]:not([class*="sy-btn"]):hover { color: var(--sy-violet); }
/* jen EN (/en/pricing/): užší sloupce srovnávací tabulky na mobilu */
@container sy (max-width:640px){
  html[lang^="en"] #sy-pricing .sy-table .sy-c{width:74px}
  html[lang^="en"] #sy-pricing .sy-table thead th{font-size:11.5px}
}