/* The four pillars: one accent per pillar, used by tabs, hero chips, showcase and the pillars map. */
:root{--p-students:#2f6fb5;--p-team:#b0663f;--p-family:#3d8a57;--p-quality:#c08a1e}
.p-students{--pc:var(--p-students)}.p-team{--pc:var(--p-team)}.p-family{--pc:var(--p-family)}.p-quality{--pc:var(--p-quality)}
.pdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pc);flex:none}
.product-tab{display:inline-flex;align-items:center;gap:9px}
.product-tab[aria-selected=true] .pdot{box-shadow:0 0 0 3px #ffffff30}
/* Pillars map */
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pillar{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px 22px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.pillar:before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--pc)}
.pillar:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px #143f4350;border-color:color-mix(in srgb,var(--pc) 35%,var(--line))}
.pillar-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;color:var(--pc);background:color-mix(in srgb,var(--pc) 11%,#fff)}
.pillar-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{font-size:20px;margin-bottom:6px;line-height:1.5}
.pillar>p{font-size:13.5px;color:var(--muted);margin-bottom:16px;line-height:1.8}
.pillar ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;font-size:13.5px}
.pillar li{display:flex;gap:10px;align-items:baseline;line-height:1.6}
.pillar li:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--pc);flex:none;transform:translateY(-2px)}
.pillar-link{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--ink)}
.pillar-link span{font-weight:400;color:var(--muted);font-size:12px}
.pillar-link:hover{color:var(--pc)}
.pillars-extra{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:18px}
.pillars-extra .sanad{grid-column:auto;margin:0}
.programs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.programs h3{font-size:17px;margin-bottom:6px}
.programs p{font-size:13px;color:var(--muted);margin-bottom:14px}
.program-chips{display:flex;flex-wrap:wrap;gap:8px}
.program-chips a{font-size:12.5px;padding:6px 13px;border-radius:30px;border:1px solid var(--line);background:var(--cream);transition:border-color .2s,background .2s}
.program-chips a:hover{border-color:var(--ink);background:#fff}
@media(max-width:1100px){.pillars-grid{grid-template-columns:repeat(2,1fr)}.pillars-extra{grid-template-columns:1fr}}
@media(max-width:580px){.pillars-grid{grid-template-columns:1fr;gap:14px}.pillar{padding:24px 22px 18px}.pillar ul{font-size:12.5px;grid-template-columns:1fr 1fr;gap:8px 14px}.pillar>p{margin-bottom:14px}.pillar-icon{width:42px;height:42px;margin-bottom:14px}.product-tab{gap:7px}.programs{padding:22px}}
/* Pricing lists: grouped, pillar-coded for Basic, additive for Pro. */
.price-card .checks{border-top:0;padding-top:0;margin:0}
.plan-list{border-top:1px solid #d7ddd0;margin-top:26px;padding-top:22px}
.premium .plan-list{border-color:#ffffff25}
.plan-group{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 12px;letter-spacing:.01em}
.premium .plan-group{color:#bfd0ca}
.plan-group:not(:first-child){margin-top:22px}
.price-card .checks li{line-height:1.7;margin-bottom:11px}
.price-card .checks li b{font-weight:600}
.pillar-checks li:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--pc);flex:none;margin-top:8px}
/* Complex (3 stages) strip under the two plans */
.complex-strip{max-width:960px;margin:0 auto 22px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:var(--cream);border:1px solid #d7ddd0;border-radius:18px;padding:26px 30px}
.complex-head{display:flex;gap:18px;align-items:flex-start}
.complex-ic{width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--sage);color:var(--ink)}
.complex-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.complex-head .eyebrow{margin-bottom:6px;font-size:12px}
.complex-head h3{font-size:20px;margin-bottom:4px;line-height:1.5}
.complex-head p:last-child{font-size:13px;color:var(--muted);margin:0}
.complex-prices{display:flex;gap:12px}
.complex-price{min-width:170px;display:flex;flex-direction:column;padding:14px 18px;border-radius:12px;border:1px solid #d7ddd0;background:#fff;transition:transform .2s,border-color .2s}
.complex-price:hover{transform:translateY(-2px);border-color:var(--ink)}
.complex-price span{font-size:12.5px;font-weight:600}
.complex-price b{font-size:34px;font-weight:600;line-height:1.25;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.complex-price small{font-size:11px;color:var(--muted)}
.complex-price.pro{background:var(--ink);border-color:var(--ink);color:#fff}
.complex-price.pro small{color:#bfd0ca}
.complex-price.pro span{color:var(--mint)}
@media(max-width:900px){.complex-strip{grid-template-columns:1fr}.complex-prices{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:580px){.complex-strip{padding:22px 20px;gap:20px}.complex-head{gap:14px}.complex-ic{width:42px;height:42px}.complex-head h3{font-size:17px}.complex-price{min-width:0;padding:12px 14px}.complex-price b{font-size:28px}}
/* Checkout: subscription scope toggle */
.option-label{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--ink)}
.scope-options{display:flex;gap:6px;padding:5px;border-radius:12px;background:#eef1ea;margin-bottom:22px}
.scope-option{flex:1;border:0;background:transparent;border-radius:9px;padding:11px 12px;font-size:14px;font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.scope-option small{font-size:11px;opacity:.8;margin-inline-start:4px}
.scope-option[aria-pressed=true]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 2px 8px #143f4314}
/* "Most requested" ribbon: warm copper-gold pill with a slow shine, sits on the card edge. */
.popular{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:7px;padding:7px 18px 7px 20px;border-radius:40px;white-space:nowrap;font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.01em;background:linear-gradient(135deg,#c9733f 0%,#e0a24c 55%,#c9733f 100%);box-shadow:0 10px 24px -8px #b8785399,0 0 0 4px #f6f4ed;overflow:hidden;isolation:isolate}
.popular svg{width:15px;height:15px;fill:#fff3d6;flex:none;animation:pop-star 3.2s ease-in-out infinite}
.popular:after{content:'';position:absolute;inset:-2px auto -2px -60%;width:45%;background:linear-gradient(100deg,transparent,#ffffff70,transparent);transform:skewX(-18deg);animation:pop-shine 3.2s ease-in-out infinite;z-index:-1}
.price-card.premium{overflow:visible;box-shadow:0 30px 60px -30px #143f4399,0 0 0 2px #e0a24c55}
.premium .popular{box-shadow:0 10px 24px -8px #b8785399,0 0 0 4px #ecefe5}
.plan-option{position:relative}
.popular-sm{top:0;left:auto;right:14px;transform:translateY(-55%);font-size:11px;padding:4px 12px 4px 13px;gap:5px;box-shadow:0 6px 14px -6px #b8785399,0 0 0 3px #fff}
.popular-sm svg{width:12px;height:12px}
.plan-option[data-plan=pro]{padding-top:20px}
.plan-option[data-plan=pro][aria-pressed=true]{padding-top:19px;border-color:#c9733f;background:#fbf4ea}
@keyframes pop-shine{0%,55%{left:-60%}85%,100%{left:120%}}
@keyframes pop-star{0%,70%,100%{transform:scale(1) rotate(0)}80%{transform:scale(1.25) rotate(-12deg)}}
/* Pro card: "everything in Basic" as a highlighted block, then a "+ adds" divider */
.includes-basic{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,#d4e8a126,#d4e8a10d);border:1px solid #d4e8a166;margin-bottom:18px}
.ib-icon{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--mint);color:var(--ink)}
.ib-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.includes-basic b{display:block;font-size:16px;font-weight:700;color:#fff;line-height:1.5}
.includes-basic small{display:block;font-size:12px;color:#bfd0ca;line-height:1.6}
.plus-divider{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;font-weight:700;color:var(--mint)}
.plus-divider span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--ink);font:700 15px/1 var(--font)}
.plus-divider:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#d4e8a155)}
/* Price unit: "per year" as a clear tag next to the amount */
.price{align-items:center;gap:14px}
.price .per{display:flex;flex-direction:column;align-items:flex-start;gap:5px;line-height:1.3}
.price .per b{font-size:14px;font-weight:600}
.price .per em{font-style:normal;font-size:13px;font-weight:700;padding:3px 12px;border-radius:20px;background:var(--sage);color:var(--ink)}
.premium .price .per em{background:var(--mint);color:var(--ink)}
.complex-price small{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.complex-price small em{font-style:normal;font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px;background:var(--sage);color:var(--ink)}
.complex-price.pro small em{background:var(--mint)}
/* Evaluation structure: 4 domains -> 11 standards -> 52 indicators, read right to left */
.hierarchy{display:flex;align-items:stretch;gap:6px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 30px -24px #143f4340;flex:none}
.hz{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:baseline;padding:12px 18px;border-radius:12px;min-width:150px}
.hz b{grid-row:span 2;font:600 40px/1 var(--font);letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums;align-self:center}
.hz span{font-size:15px;font-weight:700;line-height:1.4}
.hz small{font-size:11.5px;color:var(--muted);line-height:1.5}
.hz-main{background:var(--sage)}
.hz-main b{color:var(--copper)}
.hz-step{display:grid;place-items:center;color:#b9c5b2}
.hz-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#indicators .section-head{align-items:center}
@media(max-width:900px){#indicators .section-head{flex-direction:column;align-items:stretch}.hierarchy{width:100%}.hz{flex:1;min-width:0}}
@media(max-width:580px){.hierarchy{gap:2px;padding:6px}.hz{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 4px;gap:2px}.hz b{font-size:30px}.hz span{font-size:13px}.hz small{display:none}.hz-step svg{width:14px;height:14px}}