/* Pricing page (/{locale}/pricing; page key 'institutional') and the institutional request page.
   Page-only styles, scoped to these pages; type comes from the site theme (site-theme.css).
   Gold, no mint (Noor, 2026-10-20): actions are gold buttons as in the portal and on the sign-in page,
   the institutional plans sit on the dark band of the plan comparison design, and the entity fees use the
   same card on paper so both price groups line up in one grid. */
.inst-section{scroll-margin-top:84px}
html[data-page="institutional"]{scroll-behavior:smooth}

/* Hero: the section switch jumps (smoothly) to the entity or institution prices; the current one is gold. */
.inst-hero{padding-bottom:8px!important}
.inst-heading{max-width:680px;margin:0 auto 44px;text-align:center}
.inst-heading h1{margin:0 0 14px;font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.03em;color:#0a1b1b}
.inst-heading p:not(.section-kicker){margin:0;color:#5c6b66;font-size:1.05rem;line-height:1.6}
html[data-page] body main section.inst-hero .inst-heading p.section-kicker{color:#F3D27A!important}
.inst-switch{display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:0 auto;padding:5px;border:1px solid #ddd7cb;border-radius:999px;background:#fff}
.inst-switch a{padding:9px 20px;border-radius:999px;color:#33433f!important;font-size:.92rem;font-weight:650;text-decoration:none;transition:background-color .25s ease,color .25s ease}
html[data-page] body .inst-hero .inst-switch a:hover{color:#F3D27A!important}
.inst-switch a:focus-visible{outline:2px solid #F3D27A;outline-offset:2px}

/* Two tabs, "For entities" and "For institutions": one panel at a time. Before the script runs the address
   decides (…/pricing#institutions opens the plans, anything else the entity fees), so the page never flashes
   both; after it, data-active on .inst-panels decides. Without :has() both panels simply show. */
.inst-panels:not(:has(#institutions:target)) .inst-panel[data-panel="institutions"],
.inst-panels:has(#institutions:target) .inst-panel[data-panel="entities"]{display:none}
.inst-panels[data-active] .inst-panel{display:block!important}
.inst-panels[data-active="entities"] .inst-panel[data-panel="institutions"],
.inst-panels[data-active="institutions"] .inst-panel[data-panel="entities"]{display:none!important}
/* The current tab is the gold pill (the same rule before and after the script). */
html[data-page] body .inst-hero .inst-switch a[aria-selected="true"],
html[data-page] body main:not(:has([data-active])):not(:has(#institutions:target)) .inst-hero .inst-switch a[data-tab="entities"],
html[data-page] body main:not(:has([data-active])):has(#institutions:target) .inst-hero .inst-switch a[data-tab="institutions"]{background:linear-gradient(135deg,#F6DA85 0%,#E2B04A 48%,#C9952F 100%)!important;color:#0B181A!important;box-shadow:0 4px 12px rgba(176,122,30,.2),inset 0 1px 0 rgba(255,255,255,.45)}

/* Section heads: a gold kicker, one title size for every section, a short line under it. */
.inst-head{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 0 36px}
html[data-page] body .inst-head .inst-kicker{margin:0;color:#8A5F12!important;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
html[data-page] body main section.inst-section .shell h2.inst-title{margin:0;color:#14211F!important;font-size:26px!important;line-height:32px!important;letter-spacing:-.01em!important}
html[data-page] body .inst-head p:not(.inst-kicker){margin:0;color:#5E6B68!important;font-size:1.02rem;line-height:1.6}
html[data-page][lang="ar"] body main section.inst-section .shell h2.inst-title,html[data-page][lang="fa"] body main section.inst-section .shell h2.inst-title{letter-spacing:0!important;line-height:1.35!important}
html[data-page][lang="ar"] body .inst-head .inst-kicker,html[data-page][lang="fa"] body .inst-head .inst-kicker{letter-spacing:0;font-size:13px}

/* Section grounds: entity fees and the comparison on paper, the institutional plans on the dark band. */
html[data-page] body .inst-entities,html[data-page] body .inst-compare-section{background:var(--st-paper,#FBFAF6)!important}
.inst-entities{padding:64px 0!important}
html[data-page] body .inst-band{background:var(--st-band,radial-gradient(1200px 400px at 85% -10%,#1C3A3D 0,transparent 60%),#0B181A)!important;color:#E9F1EF;padding:72px 0!important;border:0!important}
html[data-page] body .inst-band .inst-head .inst-kicker{color:#F3D27A!important}
/* The plans band keeps the plan comparison design's heading: 40px title, 17px line under it. */
html[data-page] body main section.inst-band .shell h2.inst-title{color:#fff!important;font-size:clamp(28px,3.4vw,40px)!important;line-height:1.2!important;letter-spacing:-.02em!important}
html[data-page] body .inst-band .inst-head{gap:12px;margin-bottom:40px}
html[data-page] body .inst-band .inst-head p:not(.inst-kicker){color:#B9C8C4!important;font-size:17px;line-height:27px}
.inst-compare-section{padding:64px 0 80px!important}

/* Price cards: one grid of three columns for both groups, so the entity fees line up with the plans. */
.inst-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.inst-tier{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;box-sizing:border-box;padding:28px 24px 24px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.inst-tier-featured{background:rgba(243,210,122,.06);border-color:#C9952F}
.inst-tier-featured:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#F6DA85 0%,#E2B04A 48%,#C9952F 100%)}
.inst-tier-head{display:flex;flex-direction:column;gap:6px}
html[data-page] body .inst-tier h3{margin:0;color:#fff!important;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
html[data-page] body .inst-tier .inst-tier-for{margin:0;min-height:42px;color:#B9C8C4!important;font-size:14px;line-height:21px}
.inst-tier-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0}
html[data-page] body .inst-tier-price strong{color:#F3D27A!important;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.02em}
html[data-page] body .inst-tier-price span{color:#B9C8C4!important;font-size:15px;line-height:22px}
.inst-tier-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
html[data-page] body .inst-tier-list li{position:relative;padding-inline-start:28px;color:#E9F1EF!important;font-size:14px;line-height:21px}
.inst-tier-list li:before{content:"";position:absolute;inset-inline-start:3px;top:5px;width:10px;height:5px;border-left:2.4px solid #F3D27A;border-bottom:2.4px solid #F3D27A;transform:rotate(-45deg)}
.inst-tier-foot{margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:10px}
html[data-page] body .inst-tier-note{margin:0;color:#8DA29D!important;font-size:13px;line-height:19px}

/* The same card on paper (entity fees). */
.inst-tier-light{background:#fff;border-color:#E6E3DA;box-shadow:0 1px 2px rgba(11,24,26,.04)}
html[data-page] body .inst-tier-light h3{color:#14211F!important}
html[data-page] body .inst-tier-light .inst-tier-for{color:#5E6B68!important}
html[data-page] body .inst-tier-light .inst-tier-price strong{color:#8A5F12!important}
html[data-page] body .inst-tier-light .inst-tier-price span{color:#5E6B68!important}
html[data-page] body .inst-tier-light .inst-tier-list li{color:#33433F!important}
.inst-tier-light .inst-tier-list li:before{border-color:#B07A1E}

/* Buttons: gold for the main action, a line button for the other one (white on the band, ink on paper). */
html[data-page] body :is(.inst-tier,.inst-form) .button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;box-sizing:border-box;border-radius:12px!important;font-size:15px;font-weight:700;text-decoration:none;transition:filter .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
html[data-page] body .button.button-gold{background:linear-gradient(135deg,#F6DA85 0%,#E2B04A 48%,#C9952F 100%)!important;border:1px solid #C9952F!important;color:#0B181A!important;box-shadow:0 6px 16px rgba(176,122,30,.2),inset 0 1px 0 rgba(255,255,255,.45)!important}
html[data-page] body .button.button-gold:hover{filter:brightness(1.05)}
html[data-page] body .button.button-gold:disabled{filter:grayscale(.3);opacity:.65}
html[data-page] body .inst-tier .button.button-line{background:transparent!important;border:1px solid rgba(255,255,255,.32)!important;color:#fff!important;box-shadow:none!important}
html[data-page] body .inst-tier .button.button-line:hover{border-color:#F3D27A!important;color:#F3D27A!important}
html[data-page] body .inst-tier-light .button.button-line{border-color:#0B181A!important;color:#0B181A!important}
html[data-page] body .inst-tier-light .button.button-line:hover{background:#0B181A!important;color:#fff!important}
html[data-page] body :is(.inst-tier,.inst-form) .button:focus-visible{outline:2px solid #C9952F!important;outline-offset:2px!important}

/* Plan comparison: every feature of the three plans in one table with fixed, aligned columns. */
.inst-compare-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.inst-compare-head .inst-head{margin:0}
.inst-diff{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid #E6E3DA;border-radius:999px;background:#fff;color:#14211F;font-size:14px;font-weight:600;cursor:pointer}
.inst-diff input{width:18px;height:18px;margin:0;accent-color:#B07A1E;cursor:pointer}
.inst-diff:focus-within{outline:2px solid #C9952F;outline-offset:2px}
/* position:relative keeps the screen-reader labels (absolutely positioned) inside the scroll box on narrow screens. */
.inst-table-wrap{position:relative;overflow-x:auto;border:1px solid #E6E3DA;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(11,24,26,.04)}
.inst-table-wrap:focus-visible{outline:2px solid #C9952F;outline-offset:2px}
.inst-table{width:100%;min-width:820px;table-layout:fixed;border-collapse:collapse}
.inst-table col.inst-col-feature{width:34%}
.inst-table th,.inst-table td{padding:14px 20px;text-align:start;vertical-align:middle;border-bottom:1px solid #F0EEE7}
html[data-page] body .inst-table td{color:#14211F;font-size:15px;line-height:22px;font-weight:500}
html[data-page] body .inst-table td.inst-num{font-weight:600;font-variant-numeric:tabular-nums}
.inst-table thead th{padding:20px 20px 16px;border-top:3px solid transparent;border-bottom:1px solid #E6E3DA;vertical-align:bottom}
html[data-page] body .inst-table thead th:first-child{color:#5E6B68;font-size:13px;line-height:18px;font-weight:600}
.inst-th-name{display:block;color:#14211F;font-size:17px;line-height:24px;font-weight:700}
html[data-page] body .inst-table .inst-th-price{display:block;margin-top:2px;color:#5E6B68;font-family:var(--st-mono,"IBM Plex Mono",monospace)!important;font-size:13px;line-height:19px;font-weight:500}
html[data-page] body .inst-table tbody th[scope="row"] span{display:block;color:#14211F;font-size:15px;line-height:22px;font-weight:600}
html[data-page] body .inst-table tbody th[scope="row"] small{display:block;margin-top:2px;color:#5E6B68;font-size:13px;line-height:19px;font-weight:400}
.inst-table thead th:first-child,.inst-table tbody th[scope="row"]{position:sticky;inset-inline-start:0;z-index:1;background:#fff}
html[data-page] body .inst-table .inst-group-row th{padding:12px 24px;background:#F7F5EF;color:#8A5F12;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom-color:#F0EEE7}
html[data-page][lang="ar"] body .inst-table .inst-group-row th{letter-spacing:0;font-size:13px}
/* Pro, the plan most institutions choose, is the highlighted column (as on the card). */
.inst-table thead th:nth-child(3){background:#FFFBF0;border-top-color:#C9952F}
.inst-table tbody td:nth-child(3){background:#FFFBF0}
.inst-table tbody:last-child tr:last-child>*{border-bottom:0}
.inst-yes{position:relative;display:inline-block;width:26px;height:26px;border-radius:999px;background:#FBF1DC;vertical-align:middle}
.inst-yes:after{content:"";position:absolute;left:8px;top:8px;width:9px;height:5px;border-left:2.6px solid #8A5F12;border-bottom:2.6px solid #8A5F12;transform:rotate(-45deg)}
.inst-no{display:inline-block;width:14px;height:2px;border-radius:2px;background:#C4CBC8;vertical-align:middle}
.inst-compare.inst-diff-only [data-same]{display:none}
.inst-notes{display:flex;flex-direction:column;gap:6px;margin:20px 0 0;padding-inline-start:18px;color:#5E6B68;font-size:13px;line-height:20px}

/* Smooth entrance: each block rises in once when the page opens. */
@keyframes inst-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.inst-heading,.inst-switch,.inst-head,.inst-tier,.inst-compare,.inst-form-wrap{animation:inst-rise .5s ease both}
.inst-switch{animation-delay:.06s}
.inst-tier:nth-child(2){animation-delay:.08s}
.inst-tier:nth-child(3){animation-delay:.16s}
.inst-compare{animation-delay:.1s}
@media(prefers-reduced-motion:reduce){
  html[data-page="institutional"]{scroll-behavior:auto}
  .inst-heading,.inst-switch,.inst-head,.inst-tier,.inst-compare,.inst-form-wrap{animation:none}
  .inst-switch a,:is(.inst-tier,.inst-form) .button{transition:none}
}

/* Request page */
.inst-request{max-width:760px;margin:0 auto}
.inst-back{display:inline-block;margin-bottom:14px;color:#8A5F12!important;font-size:.9rem;font-weight:650;text-decoration:none}
.inst-back:hover{text-decoration:underline}
html[dir="ltr"] .inst-back:before{content:"← "}
html[dir="rtl"] .inst-back:before{content:"→ "}
.inst-form-wrap{padding:32px;border:1px solid #E6E3DA;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(11,24,26,.04)}
.inst-form-wrap h1{margin:0 0 6px;font-size:clamp(1.5rem,3vw,1.9rem);letter-spacing:-.02em;color:#0a1b1b}
.inst-form-intro{margin:0 0 22px;color:#687771}
.inst-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inst-form-grid .field:last-child:nth-child(odd){grid-column:1/-1}
html[data-page] body .inst-form :is(input,select,textarea):focus{border-color:#B07A1E!important;box-shadow:0 0 0 3px rgba(201,149,47,.22)!important;outline:0}
.inst-form .field input[aria-invalid="true"],.inst-form .field select[aria-invalid="true"]{border-color:#b3261e!important}
.inst-form textarea{min-height:110px}
.inst-form-status{margin:0;color:#8a2a1e;font-size:.9rem}
.inst-thanks{border:1px solid #E9D3A0;border-radius:12px;background:#FBF6EA;padding:20px;outline:0}
.inst-thanks p{margin:0;color:#14211F!important;font-weight:650}

@media(max-width:1020px){
  .inst-tiers{grid-template-columns:1fr;max-width:620px}
  html[data-page] body .inst-tier .inst-tier-for{min-height:0}
}
@media(max-width:520px){
  .inst-switch a{padding:8px 14px;font-size:.86rem}
  .inst-heading{margin-bottom:30px}
  .inst-entities,.inst-compare-section{padding:48px 0!important}
  html[data-page] body .inst-band{padding:56px 0!important}
  .inst-tier{padding:24px 20px 20px}
  html[data-page] body .inst-tier-price strong{font-size:36px;line-height:40px}
  .inst-table{min-width:560px}
  .inst-table col.inst-col-feature{width:150px}
  .inst-table th,.inst-table td{padding:12px 14px}
  html[data-page] body .inst-table td{font-size:14px}
  html[data-page] body .inst-table tbody th[scope="row"] span{font-size:14px}
  .inst-form-wrap{padding:22px}
  .inst-form-grid{grid-template-columns:1fr}
}