/* ==========================================================================
   ContraTest 2026 · Design C "Cinematic"
   Layout: a short, calm story on clean white, phone first (most visitors are on phones).
   The first screen is blue, with a small study-area screen and five feature cards.
   One line of text per item; huge Kufi type for the few headings. RTL, 1240px column.
   ========================================================================== */
:root {
  --bg: #FFFFFF;
  --bg-2: #F3F6F9;
  --bg-3: #E8EDF2;
  --ink: #152D43;
  --ink-2: #465061;
  --ink-3: #7F8898;
  --line: #E3E8EE;
  --line-2: #CDD5DF;
  --brand: #30A4DC;          /* logo blue: large type, shapes, the one accent */
  --brand-500: #2B9CD8;      /* logo blue, just deep enough for large white type (3.1:1) */
  --brand-600: #1C83C6;      /* chart series 1, links on white */
  --brand-700: #0F6CA8;      /* buttons with white text (5.6:1) */
  --brand-800: #0B4F7C;
  --ice: #E7F5FD;
  --ice-2: #CDEBFA;
  --night: #11273D;
  --night-2: #183650;
  --night-3: #21465F;
  --on-night: #E9EFF7;
  --on-night-2: #9DABBE;
  --line-night: rgba(160, 190, 230, .14);
  --series-1: #1C83C6;       /* you (validated pair, dataviz skill) */
  --series-2: #EB6834;       /* student average */
  --ok: #0E9F6E; --ok-wash: #E2F5EC;
  --bad: #D9443E; --bad-wash: #FCEBEA;

  --f-display: "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  --f-body: "Noto Sans Arabic", "Noto Sans Hebrew", Tahoma, sans-serif;

  --t-xs: .78rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.15rem; --t-xl: 1.4rem;
  --t-2xl: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  --t-3xl: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  --t-4xl: clamp(2.3rem, 1.4rem + 3.8vw, 4.2rem);
  --t-5xl: clamp(2.7rem, 1.4rem + 5.6vw, 6rem);

  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-1: 0 1px 2px rgba(21, 45, 67, .05), 0 12px 32px -18px rgba(21, 45, 67, .25);
  --shadow-2: 0 2px 6px rgba(21, 45, 67, .05), 0 40px 80px -40px rgba(21, 45, 67, .45);
  --container: 1240px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/1.8 var(--f-body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--bg); }
.cx-site { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.cx-site > main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.22; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--ice-2); }
:focus-visible { outline: 2.5px solid var(--brand-600); outline-offset: 3px; border-radius: 6px; }
.cx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-num { font-variant-numeric: tabular-nums; }
.cx-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[hidden] { display: none !important; }
.cx-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cx-container { width: 100%; max-width: calc(var(--container) + 40px); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.cc-sec { position: relative; padding-block: clamp(80px, 11vw, 160px); }
.cc-sec--tint { background: var(--bg-2); }
.cc-split-word, .cc-split-char { display: inline-block; }
.cc-progress { position: fixed; z-index: 90; top: env(safe-area-inset-top, 0px); inset-inline: 0; height: 3px; background: var(--brand); transform-origin: right; transform: scaleX(0); pointer-events: none; will-change: transform; }

/* ---------------------------------------------------------------- type pieces */
.cc-eyebrow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 7px 14px 7px 16px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 0 0 1px var(--line); font: 600 var(--t-sm)/1.3 var(--f-body); color: var(--ink-2); }
.cc-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--ice); }
.cc-dark .cc-eyebrow { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--line-night); color: var(--on-night-2); }
.cc-dark .cc-eyebrow i { box-shadow: 0 0 0 4px rgba(48, 164, 220, .18); }
.cc-head { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.cc-head--center { margin-inline: auto; justify-items: center; text-align: center; }
.cc-head h2 { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -.01em; }
.cc-head h2 em { font-style: normal; color: var(--brand); }
.cc-head p { font-size: var(--t-lg); color: var(--ink-2); max-width: 60ch; }
.cc-dark .cc-head p { color: var(--on-night-2); }

/* ---------------------------------------------------------------- buttons */
.cx-btn { --h: 54px; background: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 26px; border-radius: var(--r-pill); border: 1px solid transparent; font: 600 var(--t-md)/1 var(--f-body); white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s, box-shadow .3s, transform .3s var(--ease); will-change: transform; }
.cx-btn .cx-ic { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.cx-btn:hover .cx-ic--arrow { transform: translateX(-4px); }
.cx-btn--sm { --h: 42px; padding: 0 18px; font-size: var(--t-sm); }
.cx-btn--lg { --h: 62px; padding: 0 32px; font-size: var(--t-lg); }
.cx-btn--block { width: 100%; }
.cx-btn--primary { background: var(--brand-700); color: #fff; box-shadow: 0 10px 24px -12px rgba(15, 108, 168, .8); }
.cx-btn--primary:hover { background: var(--brand-800); }
.cx-btn--ghost { background: var(--bg); color: var(--ink); border-color: var(--line-2); }
.cx-btn--ghost:hover { border-color: var(--ink); }
.cx-btn--dark { background: var(--ink); color: #fff; }
.cx-btn--dark:hover { background: #21465F; }
.cx-btn--light, .cx-btn--gold { background: #fff; color: var(--ink); }
.cx-btn--line-night, .cx-btn--ghost-night { color: var(--on-night); border-color: rgba(233, 239, 247, .3); }
.cx-btn--line-night:hover, .cx-btn--ghost-night:hover { border-color: var(--on-night); }
.cx-btn--fb { background: #1877F2; color: #fff; }
.cx-btn__sub { font-weight: 500; font-size: var(--t-sm); color: var(--ink-3); }
.cx-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-600); font-weight: 600; }
.cx-link .cx-ic { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.cx-link:hover .cx-ic { transform: translateX(-4px); }
.cx-iconbtn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink); background: transparent; border: 0; transition: background .2s; }
.cx-iconbtn:hover { background: var(--bg-2); }
.cx-iconbtn .cx-ic { width: 20px; height: 20px; }
.cx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; background: var(--bg-2); color: var(--ink-2); }
.cx-chip--blue { background: var(--ice); color: var(--brand-700); }
.cx-chip--gold { background: var(--ink); color: #fff; }
.cx-chip--ok { background: var(--ok-wash); color: var(--ok); }

/* ---------------------------------------------------------------- header (floating pill) */
.cx-logo { display: inline-flex; flex-direction: column; align-items: flex-start; color: #6B696A; line-height: 1; }
.cx-logo .ct-logo__svg { width: 136px; height: auto; display: block; overflow: visible; }
.cx-header { position: fixed; z-index: 60; inset-inline: 0; top: calc(12px + env(safe-area-inset-top, 0px)); pointer-events: none; transition: transform .5s var(--ease); }
.cx-header.is-hidden { transform: translateY(calc(-100% - 24px)); }
.cx-header__bar { pointer-events: auto; position: relative; height: 66px; display: flex; align-items: center; gap: 18px; padding: 0 22px 0 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(21, 45, 67, .06), 0 14px 34px -20px rgba(21, 45, 67, .35); transition: height .4s var(--ease), box-shadow .3s; }
.cx-header.is-scrolled .cx-header__bar { height: 58px; box-shadow: 0 0 0 1px rgba(21, 45, 67, .07), 0 18px 40px -20px rgba(21, 45, 67, .4); }
.cx-header .cx-container { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
.cx-nav { flex: 1; display: flex; justify-content: center; }
.cx-nav > ul { position: relative; list-style: none; display: flex; align-items: center; gap: 2px; }
.cc-navpill { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: var(--r-pill); background: var(--bg-2); opacity: 0; transition: transform .35s var(--ease), width .35s var(--ease), opacity .25s; pointer-events: none; }
.cx-nav__item { position: relative; z-index: 1; }
.cx-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; background: none; border-radius: var(--r-pill); font: 600 var(--t-sm)/1 var(--f-body); color: var(--ink-2); transition: color .2s; }
.cx-nav__link:hover, .cx-nav__link[aria-expanded="true"] { color: var(--ink); }
.cx-nav__link[aria-current="page"] { color: var(--brand-700); }
.cx-nav__link[aria-current="page"]::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
.cx-nav__link .cx-ic { width: 15px; height: 15px; transition: transform .3s; }
.cx-nav__link[aria-expanded="true"] .cx-ic { transform: rotate(180deg); }
.cx-mega { position: absolute; top: calc(100% + 16px); left: 50%; width: min(820px, calc(100vw - 32px)); display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; padding: 10px; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgba(21, 45, 67, .4); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s, transform .35s var(--ease), visibility .25s; }
.cx-mega.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cx-mega__list { list-style: none; display: grid; gap: 2px; }
.cx-mega__item { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); transition: background .2s; }
.cx-mega__item:hover { background: var(--bg-2); }
.cx-mega__item.is-active { background: var(--ice); }
.cx-mega__item .cc-glyph { transition: background .2s, color .2s; }
.cx-mega__item.is-active .cc-glyph { background: var(--brand); color: var(--ink); }
.cx-mega__item > .cx-ic { width: 16px; height: 16px; color: var(--ink-3); opacity: 0; transform: translateX(6px); transition: .3s var(--ease); }
.cx-mega__item:hover > .cx-ic, .cx-mega__item.is-active > .cx-ic { opacity: 1; transform: none; }
.cx-mega__item.is-active > .cx-ic { color: var(--ink); }
.cx-mega__item strong { display: block; font: 700 var(--t-md)/1.35 var(--f-display); }
.cx-mega__item small { display: block; color: var(--ink-3); font-size: var(--t-sm); }
.cc-glyph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ice); color: var(--brand-700); font: 800 1.05rem/1 var(--f-display); flex: none; }
.cc-glyph[lang="he"] { font-family: "Noto Sans Hebrew", var(--f-body); }
.cc-glyph .cx-ic { width: 22px; height: 22px; }
/* the panel repeats the home page's exam card: logo blue art on top, white body, round navy arrow */
.cx-mega__aside { display: grid; overflow: hidden; border-radius: var(--r-md); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.cx-pkg { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; }
.cx-pkg.is-active { opacity: 1; visibility: inherit; transition: opacity .25s; }
.cx-pkg__art { display: grid; place-items: center; height: 108px; overflow: hidden; background: var(--brand); color: #fff; }
.cx-pkg__art > * { transform: scale(.94); transition: transform .5s var(--ease); }
.cx-pkg.is-active .cx-pkg__art > * { transform: none; }
.cx-pkg__art b { font: 800 3.7rem/1 var(--f-display); letter-spacing: -.01em; }
.cx-pkg__art b[lang="he"] { font-family: "Noto Sans Hebrew", var(--f-body); font-weight: 700; }
.cx-pkg__art svg { height: 84px; }
.cx-pkg__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.cx-pkg__body h3 { font: 800 var(--t-xl)/1.25 var(--f-display); }
.cx-pkg__keys { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.cx-pkg__keys li { display: grid; align-content: start; gap: 2px; padding: 9px 4px; border-radius: 12px; background: var(--bg-2); text-align: center; }
.cx-pkg__keys strong { font: 800 var(--t-lg)/1.1 var(--f-display); }
.cx-pkg__keys span { font-size: 11.5px; line-height: 1.3; color: var(--ink-3); }
.cx-pkg__feats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 8px; margin: 0; padding: 0; font-size: .8rem; line-height: 1.35; color: var(--ink-2); }
.cx-pkg__feats li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: start; }
.cx-pkg__feats .cx-ic { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ice); color: var(--brand-700); stroke-width: 2.6; }
.cx-pkg__go { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font: 700 var(--t-sm)/1 var(--f-display); color: var(--ink); }
.cx-pkg__go > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .4s var(--ease), background .3s; }
.cx-pkg__go .cx-ic { width: 17px; height: 17px; }
.cx-pkg__go:hover > span { background: var(--brand-700); transform: rotate(-12deg) scale(1.06); }
.cx-pkg__go:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: var(--r-pill); }
.cx-header__actions { display: flex; align-items: center; gap: 6px; }
.cx-cart__count { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--brand); color: #fff; font: 700 10.5px/18px var(--f-body); text-align: center; }
.cx-cart__count.is-bump { animation: cc-bump .5s var(--ease); }
@keyframes cc-bump { 40% { transform: scale(1.4); } }
.cc-login { height: 42px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; font: 600 var(--t-sm)/1 var(--f-body); color: var(--ink); }
.cc-login:hover { background: var(--bg-2); }
.cx-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font: 700 var(--t-md)/1 var(--f-display); }
/* desktop header, a little larger. The bar is taller wherever the full menu shows; the logo, menu text and buttons
   grow only from 1280px, because below that the signed-in header has no spare width. At 1040px and below the menu collapses. */
@media (min-width: 1041px) {
  .cx-header__bar { height: 74px; }
  .cx-header.is-scrolled .cx-header__bar { height: 66px; }
}
@media (min-width: 1280px) {
  .cx-header__bar { padding: 0 24px 0 12px; }
  .cx-header .ct-logo__svg { width: 148px; }
  .cx-nav__link { height: 44px; padding: 0 13px; font-size: .95rem; }
  .cx-nav__link .cx-ic { width: 16px; height: 16px; }
  .cx-header .cx-iconbtn { width: 46px; height: 46px; }
  .cx-header .cx-iconbtn .cx-ic { width: 22px; height: 22px; }
  .cc-login { height: 46px; padding: 0 16px; font-size: .95rem; }
  .cx-header .cx-btn--sm { --h: 46px; padding: 0 22px; font-size: .95rem; }
  .cx-avatar { width: 44px; height: 44px; }
}
.cx-usermenu { position: relative; }
.cx-usermenu__panel { position: absolute; top: calc(100% + 14px); inset-inline-end: 0; min-width: 230px; padding: 8px; border-radius: var(--r-md); background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .25s var(--ease); }
.cx-usermenu.is-open .cx-usermenu__panel { opacity: 1; visibility: visible; transform: none; }
.cx-usermenu__panel a, .cx-usermenu__panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font-size: var(--t-sm); color: var(--ink-2); text-align: start; }
.cx-usermenu__panel a:hover, .cx-usermenu__panel button:hover { background: var(--bg-2); color: var(--ink); }
.cx-usermenu__name { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-weight: 700; }
.cx-usermenu__name small { display: block; font-weight: 400; color: var(--ink-3); }
html:not([data-auth="user"]) [data-auth-only="user"] { display: none !important; }
html[data-auth="user"] [data-auth-only="guest"] { display: none !important; }
.cx-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); position: relative; }
.cx-burger span, .cx-burger span::before, .cx-burger span::after { position: absolute; left: 50%; width: 16px; height: 1.6px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease), background .2s; }
.cx-burger span { top: 50%; transform: translate(-50%, -50%); }
.cx-burger span::before, .cx-burger span::after { content: ""; left: 0; }
.cx-burger span::before { transform: translateY(-5px); }
.cx-burger span::after { transform: translateY(5px); }
.cx-burger[aria-expanded="true"] span { background: transparent; }
.cx-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.cx-burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }
.cx-mmenu { position: fixed; inset: 0; z-index: 55; background: var(--bg); padding: calc(110px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); display: flex; flex-direction: column; gap: 24px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.cx-mmenu.is-open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.cx-mmenu__list { list-style: none; display: grid; }
.cx-mmenu__list li { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .6s var(--ease); }
.cx-mmenu.is-open li { opacity: 1; transform: none; }
.cx-mmenu.is-open li:nth-child(2) { transition-delay: .04s; } .cx-mmenu.is-open li:nth-child(3) { transition-delay: .08s; }
.cx-mmenu.is-open li:nth-child(4) { transition-delay: .12s; } .cx-mmenu.is-open li:nth-child(5) { transition-delay: .16s; } .cx-mmenu.is-open li:nth-child(6) { transition-delay: .2s; }
.cx-mmenu__list a, .cx-mmenu__list summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font: 800 1.7rem/1.25 var(--f-display); list-style: none; cursor: pointer; }
.cx-mmenu__list summary::-webkit-details-marker { display: none; }
.cx-mmenu__sub { display: grid; padding: 6px 0 12px; }
.cx-mmenu__sub a { font: 500 var(--t-md)/1.4 var(--f-body); border: 0; padding: 9px 0; color: var(--ink-2); }
.cx-mmenu__cta { display: grid; gap: 10px; margin-top: auto; }

/* ---------------------------------------------------------------- hero */
/* From the customer's picture: copy on one side, a small study-area screen with five feature cards on the other, a white
   wave at the bottom. Site blues. The slope stays deep behind the copy, so white text passes 4.5:1 there. */
.cc-hero { position: relative; padding: calc(150px + env(safe-area-inset-top, 0px)) 0 clamp(92px, 8vw, 116px); overflow: clip; color: #fff; background: linear-gradient(160deg, var(--brand-800) 0, var(--brand-700) 50%, #1878B6 78%, var(--brand-500) 100%); }
.cc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 6vw, 96px); }
.cc-hero__copy { position: relative; z-index: 2; display: grid; justify-items: start; gap: 22px; padding-inline-start: clamp(0px, 2vw, 28px); }
.cc-hero__title { color: #fff; font-size: clamp(2.6rem, .6rem + 3.6vw, 3.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
.cc-hero__line { display: block; }
/* one word in a tilted box, changed by cc.js: the new word drops in from above while the old one leaves
   downward, and the box eases to the new word's width. GSAP moves .cc-rotor in the intro; the tilt stays on the
   box, so the two never share a transform. Words stack in one grid cell, centred even when wider than the box. */
.cc-rotor { display: block; margin-top: .22em; }
.cc-rotor__box { display: inline-grid; justify-content: center; align-items: center; overflow: hidden; padding: .1em .42em; border-radius: .34em; background: #fff; color: var(--ink); box-shadow: 0 .36em .9em -.25em rgba(6, 30, 52, .6); transform: rotate(-2deg); transition: width .5s var(--ease); }
.cc-rotor__word { grid-area: 1 / 1; justify-self: center; line-height: 1.5; white-space: nowrap; opacity: 0; transform: translateY(-110%); }
.cc-rotor__word.is-on, .cc-rotor__word.is-out { transition: transform .5s var(--ease), opacity .3s; }
.cc-rotor__word.is-on { opacity: 1; transform: none; }
.cc-rotor__word.is-out { transform: translateY(110%); }
.cc-hero__lead { font-size: var(--t-lg); color: #fff; max-width: 58ch; line-height: 1.8; }
.cc-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* free-practice.html shares .cc-hero__ctas, so the home page's own layout is scoped */
.cc-hero .cc-hero__ctas { justify-content: flex-start; align-items: center; gap: 12px 26px; margin-top: 14px; }
.cc-hero .cx-btn--light { font-weight: 700; box-shadow: 0 16px 32px -16px rgba(6, 30, 52, .7); }
.cc-hero__alt { color: #fff; font: 700 var(--t-md)/1.6 var(--f-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.cc-hero__alt:hover { text-decoration-thickness: 3px; }
.cc-hero :focus-visible { outline-color: #fff; }
.cc-hero__wave { position: absolute; inset-inline: 0; bottom: -1px; display: block; width: 100%; height: clamp(34px, 5vw, 70px); fill: var(--bg); pointer-events: none; }
/* the picture beside the copy. Sizes on the screen are in its own container units, so it scales as one piece */
.cc-hart { position: relative; z-index: 1; justify-self: center; width: min(100%, 560px); aspect-ratio: 537 / 386; }
.cc-hart__screen { position: absolute; top: 11.6%; left: 18%; width: 64%; height: 60%; padding: 1%; border-radius: 14px; background: var(--night); box-shadow: 0 34px 60px -28px rgba(6, 30, 52, .8); container-type: inline-size; color: var(--ink); will-change: transform; }
.cc-hart__screen::after { content: ""; position: absolute; top: 100%; left: 7%; right: 7%; height: 4.4%; border-radius: 0 0 14px 14px; background: linear-gradient(#EEF2F6, #B6C2CE); }
.cc-hart__ui { display: grid; grid-template-columns: 18% minmax(0, 1fr); gap: 1.4cqw; height: 100%; }
.cc-hart__rail { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; padding-top: 3.6cqw; border-radius: 2.4cqw; background: #fff; }
.cc-hart__rail svg { width: 5.2cqw; height: auto; margin-bottom: 1.6cqw; fill: var(--brand); }
.cc-hart__rail i { width: 50%; height: 1.7cqw; border-radius: 9px; background: #DCE8F0; }
.cc-hart__rail i.is-on { background: var(--brand); }
.cc-hart__main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 2.6cqw; min-height: 0; padding: 3.2cqw 3.6cqw 3.6cqw; border-radius: 2.4cqw; background: linear-gradient(160deg, #F7FAFC, #E8EEF4); }
.cc-hart__hello { font: 800 3.7cqw/1.3 var(--f-display); }
.cc-hart__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4cqw; }
.cc-hart__score, .cc-hart__next { display: grid; align-content: center; padding: 2.2cqw 3cqw; border-radius: 2.8cqw; }
.cc-hart__score { background: #fff; }
.cc-hart__next { background: var(--night-2); color: #fff; }
.cc-hart__score small, .cc-hart__next small { font-size: 2.3cqw; line-height: 1.5; color: var(--ink-3); }
.cc-hart__next small { color: var(--on-night-2); }
.cc-hart__score b { font: 800 5.8cqw/1.25 var(--f-display); }
.cc-hart__next b { font: 800 3.7cqw/1.4 var(--f-display); }
.cc-hart__next span { display: block; height: 1.3cqw; margin-top: 1.2cqw; border-radius: 9px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.cc-hart__next span i { display: block; width: 62%; height: 100%; border-radius: 9px; background: var(--brand); }
.cc-hart__bars { display: flex; align-items: flex-end; gap: 2.2cqw; min-height: 0; padding: 2.6cqw 2.6cqw 2.2cqw; border-radius: 2.8cqw; background: #fff; }
.cc-hart__bars i { flex: 1; height: var(--h); border-radius: .9cqw .9cqw 0 0; background: var(--ice-2); }
.cc-hart__bars i.is-on { background: var(--brand); }
.cc-hart__cards { margin: 0; padding: 0; list-style: none; }
.cc-hcard { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; width: max-content; min-width: 37.6%; padding: 9px 12px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(21, 45, 67, .04), 0 18px 34px -18px rgba(6, 30, 52, .65); white-space: nowrap; will-change: transform; }
.cc-hcard strong { display: block; font: 800 .97rem/1.35 var(--f-display); }
.cc-hcard small { display: block; color: var(--ink-2); font-size: var(--t-xs); line-height: 1.45; }
.cc-hcard__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--ice); color: var(--brand-600); }
.cc-hcard__ic .cx-ic { width: 20px; height: 20px; }
.cc-hcard--dict { top: 0; right: 0; }
.cc-hcard--exam { top: 0; left: 0; }
.cc-hcard--guide { top: 65%; right: 0; }
.cc-hcard--stats { top: 65%; left: 0; }
.cc-hcard--video { bottom: 0; left: 0; right: 0; margin-inline: auto; }

/* ---------------------------------------------------------------- programs (card grid; a compact list on phones) */
.cc-progs { position: relative; padding-block: clamp(80px, 10vw, 140px); }
.cc-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cc-prog { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px rgba(21, 45, 67, .06), 0 20px 44px -30px rgba(21, 45, 67, .4); overflow: hidden; transition: box-shadow .4s, transform .5s var(--ease); }
.cc-prog:hover { box-shadow: 0 0 0 1px rgba(21, 45, 67, .08), var(--shadow-2); transform: translateY(-6px); }
/* the lead card sits a little higher; "top", because GSAP and :hover own its transform */
.cc-prog--lead { top: -8px; box-shadow: 0 0 0 1px rgba(21, 45, 67, .06), 0 26px 50px -26px rgba(21, 45, 67, .5); }
.cc-prog__art { position: relative; aspect-ratio: 16 / 9.25; overflow: hidden; display: grid; place-items: center; }
.cc-prog__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cc-prog:hover .cc-prog__art img { transform: scale(1.04); }
.cc-prog__body { display: grid; gap: 4px; align-content: start; padding: 20px 26px 24px; }
.cc-prog__body h3 { font-size: var(--t-2xl); }
.cc-prog__body p { color: var(--ink-2); font-size: var(--t-sm); padding-inline-end: 58px; }
.cc-prog__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-inline-end: 58px; }
.cc-prog__chips span { padding: 5px 11px; border-radius: 10px; background: #EFF5FA; color: var(--ink); font-size: var(--t-xs); font-weight: 600; line-height: 1.5; }
.cc-prog__go { position: absolute; inset-inline-end: 24px; bottom: 24px; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 10px 18px -8px rgba(21, 45, 67, .6); transition: transform .4s var(--ease), background .25s; }
.cc-prog:hover .cc-prog__go { background: var(--brand-700); transform: rotate(-12deg) scale(1.06); }
.cc-prog--gifted .cc-prog__chips span { background: #F1EFFD; color: #5546C4; }
.cc-prog--gifted .cc-prog__go { background: #6C5AE0; box-shadow: 0 10px 18px -8px rgba(108, 90, 224, .75); }
.cc-prog--gifted:hover .cc-prog__go { background: #5546C4; }

/* the letter tiles on each exam card. Sizes follow the card's own width (cqw), so three or four tiles always fit. */
.cc-keyart { container-type: inline-size; background-size: 20px 20px, auto; }
.cc-keyart--yael { background-image: radial-gradient(rgba(28, 131, 198, .2) 1.2px, transparent 1.4px), linear-gradient(170deg, var(--ice), #D8EEF9); }
.cc-keyart--psy { background-image: radial-gradient(rgba(21, 45, 67, .13) 1.2px, transparent 1.4px), linear-gradient(170deg, var(--bg-2), #EAEFF4); }
.cc-keyart--amir { background-image: radial-gradient(rgba(255, 255, 255, .17) 1.2px, transparent 1.4px), linear-gradient(145deg, var(--night-3), var(--night)); }
.cc-keyart--hadassa { background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.4px), linear-gradient(145deg, var(--brand), var(--brand-600)); }
.cc-keyart--gifted { background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.4px), linear-gradient(160deg, #9C8FFB, #6C5AE0); }
/* the two faint arcs behind the tiles on the coloured cards */
.cc-keyart--amir::before, .cc-keyart--hadassa::before, .cc-keyart--gifted::before,
.cc-keyart--amir::after, .cc-keyart--hadassa::after, .cc-keyart--gifted::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; pointer-events: none; }
.cc-keyart--amir::before, .cc-keyart--hadassa::before, .cc-keyart--gifted::before { width: 84cqw; aspect-ratio: 1; left: -18cqw; bottom: 12%; }
.cc-keyart--amir::after, .cc-keyart--hadassa::after, .cc-keyart--gifted::after { width: 62cqw; aspect-ratio: 1; right: -20cqw; bottom: -52%; }
.cc-keys { position: relative; z-index: 1; display: flex; justify-content: center; gap: 2.5cqw; }
.cc-key { display: grid; place-items: center; width: 21.2cqw; height: 23cqw; border-radius: 5.4cqw; background: #fff; color: var(--ink); font: 800 9.6cqw/1 var(--f-display); box-shadow: 0 .9cqw 0 rgba(21, 45, 67, .13), 0 3.4cqw 5.4cqw -2.4cqw rgba(21, 45, 67, .34); transform: rotate(var(--r, 0deg)); transition: transform .45s var(--ease); }
.cc-key:nth-child(2) { transition-delay: .04s; }
.cc-key:nth-child(3) { transition-delay: .08s; }
.cc-key:nth-child(4) { transition-delay: .12s; }
.cc-key svg { width: 46%; height: auto; }
.cc-prog:hover .cc-key { transform: rotate(0deg) translateY(-1cqw); }
.cc-keys[lang="he"] .cc-key { color: var(--brand-600); font-family: "Noto Sans Hebrew", var(--f-body); font-weight: 700; }
.cc-keytag { position: absolute; z-index: 2; padding: .28em .75em; border-radius: .75em; background: #fff; color: var(--ink); font: 700 clamp(.68rem, 3.3cqw, .84rem)/1.5 var(--f-body); white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(21, 45, 67, .45); }
.cc-keytag--yael { left: 11%; top: 13%; color: var(--brand-600); font-family: "Noto Sans Hebrew", var(--f-body); transform: rotate(-8deg); }
.cc-keytag--amir { right: 8%; bottom: 8%; transform: rotate(-6deg); }
.cc-keytag--psy { left: 11%; top: 12%; transform: rotate(-6deg); }
.cc-keytag--gifted { right: 7%; top: 8%; color: #5546C4; transform: rotate(4deg); }
.cc-art--yael { background: var(--ice); }
.cc-art--yael b { font: 700 clamp(4.5rem, 2.5rem + 6vw, 8rem)/1 "Noto Sans Hebrew", var(--f-body); color: var(--brand); letter-spacing: -.02em; }
.cc-art--amir { background: var(--night); color: var(--on-night); }
.cc-art--amir b { font: 800 clamp(4rem, 2rem + 6vw, 7rem)/1 var(--f-display); direction: ltr; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .35)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-art--psy { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.cc-art--psy svg { width: 66%; overflow: visible; }
.cc-art--gifted { background: var(--brand-700); color: #fff; }
.cc-art--gifted svg { width: 56%; overflow: visible; }
.cc-prog--end { background: linear-gradient(150deg, var(--night-3), var(--night)); color: #fff; box-shadow: 0 26px 50px -30px rgba(17, 39, 61, .8); padding: 30px 28px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.cc-prog--end:hover { box-shadow: 0 26px 50px -30px rgba(17, 39, 61, .8); transform: none; }
.cc-prog__end-top { display: grid; grid-template-columns: minmax(0, 1fr) 34%; align-items: start; gap: 10px; }
.cc-prog--end h3 { font-size: var(--t-3xl); line-height: 1.2; }
.cc-prog--end p { color: var(--on-night-2); margin-top: 10px; font-size: var(--t-sm); }
.cc-prog__free { display: inline-block; margin-top: 14px; padding: 5px 14px; border-radius: 10px; background: var(--brand-500); color: #fff; font-size: var(--t-sm); font-weight: 700; }
.cc-gift { width: 100%; height: auto; overflow: visible; }
.cc-prog--end .cx-btn { border-radius: var(--r-md); }
@media (max-width: 1280px) {
  .cc-prog--end { padding: 24px 24px 22px; gap: 14px; }
  .cc-prog--end h3 { font-size: var(--t-2xl); }
  .cc-prog__free { margin-top: 10px; }
}
/* three narrow columns: a smaller title, so the longest name and sentence stay on one line */
@media (min-width: 1101px) and (max-width: 1280px) {
  .cc-prog__body { padding: 18px 22px 22px; }
  .cc-prog__body h3 { font-size: clamp(1.4rem, 2.35vw, 2rem); }
  .cc-prog__body p, .cc-prog__chips { padding-inline-end: 52px; }
  .cc-prog__go { inset-inline-end: 22px; bottom: 22px; }
}
@media (max-width: 1100px) {
  .cc-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-prog--lead { top: 0; }
}

/* ---------------------------------------------------------------- dark surface */
.cc-dark { background: var(--night); color: var(--on-night); }

/* ---------------------------------------------------------------- why: four tiles, one line each */
/* BEGIN why ContraTest */
.cc-why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.cc-why__grid > li { min-width: 0; }
.cc-why__card { position: relative; overflow: hidden; display: grid; gap: 22px; align-content: start; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px #E4EEF5; transition: box-shadow .4s, transform .5s var(--ease); }
.cc-why__card:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); transform: translateY(-4px); }
.cc-why__card--exam, .cc-why__card--study { grid-column: span 7; }
.cc-why__card--dict, .cc-why__card--stats { grid-column: span 5; }
.cc-why__card--exam, .cc-why__card--study { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; }
.cc-why__text { display: grid; justify-items: start; gap: 8px; }
.cc-why__ic { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px; background: var(--ice); color: var(--brand-700); }
.cc-why__ic .cx-ic { width: 26px; height: 26px; }
.cc-why__text h3 { margin: 0; color: var(--ink); font: 800 clamp(1.45rem, 1.05rem + 1.1vw, 2.05rem)/1.28 var(--f-display); }
.cc-why__text p { margin: 0; color: var(--ink-2); font-size: var(--t-md); line-height: 1.75; }
.cc-why__card--exam { color: #fff; background: radial-gradient(70% 110% at 0% 100%, #1F7AA8 0%, rgba(31, 122, 168, 0) 72%), linear-gradient(120deg, #14334C 0%, #11273D 100%); box-shadow: 0 34px 60px -40px rgba(17, 39, 61, .8); }
.cc-why__card--exam:hover { box-shadow: 0 40px 70px -40px rgba(17, 39, 61, .9); }
.cc-why__card--exam .cc-why__ic { background: rgba(127, 208, 245, .14); color: #8AD6F7; }
.cc-why__card--exam h3 { color: #fff; }
.cc-why__card--exam .cc-why__text p { color: #B7C6D4; }

.cc-whyx { position: relative; display: grid; gap: 12px; padding: 20px 22px 22px; border-radius: 24px; background: #fff; color: var(--ink); }
.cc-whyx__flag { position: absolute; top: -12px; inset-inline-end: -12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 11px; background: #173D57; color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .5); transform: rotate(-6deg); }
.cc-whyx__flag .cx-ic { width: 13px; height: 13px; }
.cc-whyx__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-whyx__time { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 11px; background: #FFF0EA; color: #D9502B; font-weight: 800; font-size: .92rem; }
.cc-whyx__time .cx-ic { width: 15px; height: 15px; }
.cc-whyx__count { color: var(--ink-3); font-size: .86rem; font-weight: 700; }
.cc-whyx__bar { height: 8px; overflow: hidden; border-radius: 8px; background: #EDF2F6; }
.cc-whyx__bar i { display: block; width: 60%; height: 100%; border-radius: 8px; background: #0AA0DC; }
.cc-whyx__q { margin: 2px 0 0; font-size: .95rem; font-weight: 700; line-height: 1.5; }
.cc-whyx__opts { display: grid; gap: 8px; }
.cc-whyx__opts span { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; border: 2px solid #E6EEF4; border-radius: 12px; color: var(--ink-2); font-size: .92rem; font-weight: 600; }
.cc-whyx__opts span::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid #C5D3DE; border-radius: 50%; }
.cc-whyx__opts .is-on { border-color: #0AA0DC; background: #E8F7FD; color: #0876A8; font-weight: 800; }
.cc-whyx__opts .is-on::before { border: 6px solid #0AA0DC; background: #fff; }

.cc-whyd { display: grid; padding: 6px 20px; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -24px rgba(21, 45, 67, .35), 0 0 0 1px #EEF3F7; }
.cc-whyd > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 52px; }
.cc-whyd > div + div { border-top: 1px solid #EEF3F7; }
.cc-whyd b { color: var(--ink); font-size: 1.02rem; font-weight: 700; text-align: right; }
.cc-whyd span { color: var(--ink-2); font-size: var(--t-sm); }
.cc-whyd em { display: flex; gap: 3px; direction: ltr; font-style: normal; }
.cc-whyd em i { display: block; width: 7px; height: 18px; border-radius: 4px; background: #DCE8F0; }
.cc-whyd em i.on { background: #0AA0DC; }

.cc-whys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -24px rgba(21, 45, 67, .35), 0 0 0 1px #EEF3F7; }
.cc-whys > div { display: grid; gap: 6px; text-align: center; }
.cc-whys small { color: var(--ink); font-size: .8rem; font-weight: 800; }
.cc-whys i { display: block; height: calc(var(--v) * .95px); border-radius: 11px; background: var(--c); }
.cc-whys span { color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; }

.cc-whyart { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; fill: var(--ink); }
.cc-whyart text { font-family: var(--f-body); }
.cc-whyart .b { font-family: var(--f-display); font-weight: 800; }

@media (max-width: 1040px) {
  .cc-why__card--exam, .cc-why__card--study { grid-column: span 12; }
  .cc-why__card--dict, .cc-why__card--stats { grid-column: span 6; }
}
@media (max-width: 720px) {
  .cc-why__grid { gap: 14px; }
  .cc-why__card--exam, .cc-why__card--study, .cc-why__card--dict, .cc-why__card--stats { grid-column: span 12; grid-template-columns: minmax(0, 1fr); }
  .cc-why__card { padding: 22px 18px; gap: 16px; }
  .cc-why__ic { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 4px; }
  .cc-why__ic .cx-ic { width: 22px; height: 22px; }
  .cc-whyx { margin-top: 8px; padding: 16px; }
  .cc-whyx__flag { inset-inline-end: -4px; }
  .cc-whyart { max-width: 340px; margin-inline: auto; }
}
/* END why ContraTest */

/* ---------------------------------------------------------------- video thumb (package page) */
.cc-video { display: grid; gap: 14px; }
.cc-video__thumb { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-3); }
.cc-video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cc-video:hover .cc-video__thumb img { transform: scale(1.05); }
.cc-video__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17, 39, 61, .45), transparent 50%); }
.cc-video__play { position: absolute; z-index: 1; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .95); font-size: var(--t-sm); font-weight: 600; }
.cc-video__play i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; }
.cc-video__play .cx-ic { width: 14px; height: 14px; margin-inline-end: -2px; }

.cc-stars { display: flex; gap: 2px; color: var(--brand); }
.cc-stars .cx-ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- final CTA */
.cc-final { padding-block: clamp(36px, 5vw, 72px) clamp(64px, 8vw, 110px); }
.cc-final__card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: clamp(40px, 5vw, 64px) clamp(18px, 4vw, 48px) clamp(44px, 5vw, 60px); border-radius: var(--r-xl); text-align: center; color: #fff; background: radial-gradient(ellipse 72% 92% at 50% 114%, rgba(48, 164, 220, .78), rgba(48, 164, 220, 0) 76%), linear-gradient(172deg, var(--night) 42%, var(--night-2)); box-shadow: 0 34px 70px -36px rgba(17, 39, 61, .6); }
/* a faint grid, strongest behind the heading */
.cc-final__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 30px 30px; -webkit-mask-image: radial-gradient(ellipse 58% 68% at 50% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 58% 68% at 50% 50%, #000 25%, transparent 100%); }
.cc-final__ring { position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .13); transform: translate(-50%, -50%); }
.cc-final__ring--a { left: 4.5%; top: 6%; width: 56%; }
.cc-final__ring--b { left: 96.5%; top: 101%; width: 40%; }
.cc-final__mark { position: absolute; z-index: -1; aspect-ratio: 164 / 250; height: auto; fill: #fff; opacity: .07; }
.cc-final__mark--a { right: 0; top: -19%; width: 18.5%; transform: scaleX(-1); }
.cc-final__mark--b { left: -.3%; bottom: -7.5%; width: 17%; }
.cc-final__pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding-block: 5px; padding-inline: 5px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--on-night); }
.cc-final__pillic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-500); }
.cc-final__pillic svg { width: 10px; height: 15px; fill: #fff; }
.cc-final__title { display: flex; justify-content: center; align-items: baseline; gap: .26em; margin-top: clamp(20px, 3.4vw, 40px); font: 900 clamp(2.5rem, 11vw, 6rem)/1.2 var(--f-display); white-space: nowrap; color: #fff; }
.cc-final__box { display: block; padding: 0 .4em .08em; border-radius: .26em; background: var(--brand-500); box-shadow: 0 .34em .9em -.24em rgba(48, 164, 220, .8); transform: rotate(-2.4deg); }
.cc-final__sub { margin: clamp(14px, 2vw, 22px) 0 0; font-size: var(--t-lg); line-height: 1.6; color: rgba(233, 239, 247, .86); text-wrap: balance; }
/* white text on WhatsApp's green, as in the customer's picture */
.cc-final .cx-btn--wa { --h: 72px; margin-top: clamp(22px, 3.2vw, 34px); padding-inline: 56px; color: #fff; font: 800 1.4rem/1 var(--f-display); box-shadow: 0 18px 40px -14px rgba(37, 211, 102, .75); }
.cc-final__wa { width: 26px; height: 26px; flex: none; fill: currentColor; }
.cx-btn--wa { background: #25D366; color: #06301A; box-shadow: 0 14px 30px -14px rgba(37, 211, 102, .8); }
.cx-btn--wa:hover { background: #1FBE5B; }
.cx-btn--wa .cx-ic { width: 22px; height: 22px; }
.cc-callback { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; text-align: start; }
.cc-callback .cx-btn { --h: 54px; }

/* ---------------------------------------------------------------- footer */
.cx-footer { position: relative; overflow: hidden; background: var(--bg-2); padding-top: clamp(64px, 8vw, 100px); color: var(--ink-2); }
/* each column is as wide as its content and the free space goes between them: the brand sits on the
   start edge, the contact list on the end edge, the links in the middle */
.cx-footer__top { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 40px 64px; align-items: start; padding-bottom: 40px; }
.cx-footer__links ul { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 48px; }
.cx-footer__brand p { margin-top: 16px; max-width: 34ch; font-size: var(--t-sm); line-height: 1.9; }
.cx-footer ul { list-style: none; display: grid; gap: 9px; font-size: var(--t-sm); }
.cx-footer a:hover { color: var(--brand-700); }
.cx-footer__contact a { display: inline-flex; align-items: center; gap: 10px; }
.cx-footer__contact .cx-ic { width: 17px; height: 17px; color: var(--brand-700); }
.cx-social { display: flex; gap: 8px; margin-top: 16px; }
.cx-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: 0 0 0 1px var(--line); transition: .2s; }
.cx-social a:hover { background: var(--ink); color: #fff; box-shadow: none; }
.cx-social .cx-ic { width: 18px; height: 18px; }
.cc-wordmark { font: 900 clamp(4rem, 1rem + 18vw, 19rem)/.8 var(--f-display); letter-spacing: -.04em; direction: ltr; text-align: center; color: var(--ink); margin-bottom: -.12em; user-select: none; }
.cc-wordmark span { color: var(--brand); }
.cx-footer__bottom { position: relative; z-index: 1; border-top: 1px solid var(--line); background: var(--bg-2); }
.cx-footer__bottom .cx-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: var(--t-xs); }
.cx-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.cx-footer__legal { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------------------------------------------------------------- forms */
.cx-field { display: grid; gap: 7px; min-width: 0; }
.cx-field label, .cx-field > span:first-child { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.req { color: var(--bad); }
.cx-input, .cx-select, .cx-textarea { width: 100%; min-height: 54px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font-size: var(--t-md); transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.cx-textarea { min-height: 150px; resize: vertical; }
.cx-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23465061' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 16px center; background-size: 18px; }
.cx-input::placeholder, .cx-textarea::placeholder { color: #A0A8B4; }
.cx-input:hover, .cx-select:hover, .cx-textarea:hover { border-color: var(--ink-3); }
.cx-input:focus, .cx-select:focus, .cx-textarea:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(48, 164, 220, .18); }
.cx-field.is-invalid .cx-input, .cx-field.is-invalid .cx-textarea, .cx-field.is-invalid .cx-select { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(217, 68, 62, .12); }
.cx-field__err { display: none; font-size: var(--t-xs); color: var(--bad); }
.cx-field.is-invalid .cx-field__err { display: block; }
.cx-formdone { display: none; align-items: center; gap: 12px; grid-column: 1 / -1; padding: 16px 18px; border-radius: 16px; background: var(--ok-wash); color: var(--ink); }
.cx-formdone .cx-ic { color: var(--ok); }
.is-sent .cx-formdone { display: flex; }
.is-sent > :not(.cx-formdone) { display: none; }
.cx-demo-note { display: block; font-size: var(--t-xs); color: var(--ink-3); text-align: center; }
.cx-formdone .cx-demo-note { display: inline; margin-inline-start: 6px; }
.cx-check { display: inline-flex; gap: 10px; align-items: center; font-size: var(--t-sm); }
.cx-check input { width: 18px; height: 18px; accent-color: var(--brand-700); }
.cx-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--t-xs); }
.cx-or::before, .cx-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- inner page hero */
.cc-phero { position: relative; padding-top: calc(136px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(56px, 7vw, 96px); background: radial-gradient(60% 70% at 70% 0%, var(--ice) 0%, rgba(231, 245, 253, 0) 70%), var(--bg); overflow: clip; }
.cc-phero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cc-phero__copy { display: grid; gap: 22px; justify-items: start; }
.cc-phero h1 { font-size: var(--t-5xl); letter-spacing: -.015em; line-height: 1.12; }
.cc-phero h1 em { font-style: normal; color: var(--brand); }
.cc-phero p { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.9; max-width: 58ch; }
.cc-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-sm); color: var(--ink-3); }
.cc-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.cc-crumbs li + li::before { content: "/"; color: var(--line-2); }
.cc-crumbs a:hover { color: var(--ink); }
.cc-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.cx-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-switch a { padding: 9px 16px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 0 0 1px var(--line); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); transition: .2s; }
.cx-switch a:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--ink-3); }
.cx-switch a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }
.cc-vthumb { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-2); }
.cc-vthumb img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }

/* ---------------------------------------------------------------- pricing */
.cx-pricing__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 40px; }
.cx-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cx-coupon__toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); font: 600 var(--t-sm)/1 var(--f-body); }
.cx-coupon__form { display: none; gap: 8px; }
.cx-coupon.is-open .cx-coupon__form { display: flex; }
.cx-coupon.is-open .cx-coupon__toggle { display: none; }
.cx-coupon__form .cx-input { min-height: 44px; width: 190px; padding: 8px 16px; direction: ltr; text-align: right; }
.cx-coupon__msg { font-size: var(--t-sm); color: var(--ink-3); }
.cx-group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 72px 0 24px; }
.cx-group-title:first-of-type { margin-top: 0; }
.cx-group-title h3 { font-size: var(--t-2xl); }
.cx-group-title span { color: var(--ink-3); font-size: var(--t-sm); }
.cx-plans { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.cx-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
.cx-plan { position: relative; height: 100%; display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s, transform .5s var(--ease); }
.cx-plan:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-4px); }
.cx-plan--featured { background: var(--night); color: var(--on-night); box-shadow: 0 50px 90px -50px rgba(15, 108, 168, .7); }
.cx-plan--featured:hover { box-shadow: 0 60px 100px -50px rgba(15, 108, 168, .85); }
.cx-plan__flag { position: absolute; top: 22px; inset-inline-end: 22px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: var(--t-xs); font-weight: 700; }
.cx-plan__head { display: grid; gap: 2px; padding-inline-end: 90px; }
.cx-plan__head h4 { font: 800 var(--t-2xl)/1.25 var(--f-display); }
.cx-plan__head span { color: var(--ink-3); font-size: var(--t-sm); }
.cx-plan--featured .cx-plan__head span { color: var(--on-night-2); }
.cx-plan__keys { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.cx-plan__keys li { display: grid; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--bg-2); text-align: center; }
.cx-plan--featured .cx-plan__keys li { background: rgba(255, 255, 255, .06); }
.cx-plan__keys strong { font: 800 var(--t-xl)/1 var(--f-display); direction: ltr; }
.cx-plan__keys span { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.cx-plan--featured .cx-plan__keys span { color: var(--on-night-2); }
.cx-plan__feats { list-style: none; display: grid; gap: 10px; margin-bottom: 26px; font-size: var(--t-sm); color: var(--ink-2); }
.cx-plan--featured .cx-plan__feats { color: var(--on-night-2); }
.cx-plan__feats li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.cx-plan__feats .cx-ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--ice); color: var(--brand-700); stroke-width: 2.6; }
.cx-plan--featured .cx-plan__feats .cx-ic { background: rgba(48, 164, 220, .2); color: #7FD0F5; }
.cx-plan__more { margin: -12px 0 26px; }
.cx-plan__more summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--brand-700); }
.cx-plan__more summary::-webkit-details-marker { display: none; }
.cx-plan__more summary .cx-ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.cx-plan__more[open] summary .cx-ic { transform: rotate(180deg); }
.cx-plan__more .cx-plan__feats { margin: 14px 0 0; }
.cx-plan--featured .cx-plan__more summary { color: #7FD0F5; }
.cx-plan--featured .cx-count { background: rgba(255, 255, 255, .1); color: var(--on-night-2); }
.cx-plan__foot { margin-top: auto; display: grid; gap: 12px; }
.cx-price { display: flex; align-items: baseline; gap: 8px; }
.cx-price strong { font: 900 3.4rem/1 var(--f-display); letter-spacing: -.02em; }
.cx-price em { font-style: normal; font-size: var(--t-xl); font-weight: 700; }
.cx-price span { color: var(--ink-3); font-size: var(--t-sm); }
.cx-plan--featured .cx-price span { color: var(--on-night-2); }
.cx-price__per { margin-top: -6px; font-size: var(--t-xs); color: var(--ink-3); }
.cx-plan--featured .cx-price__per { color: var(--on-night-2); }
.cx-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--r-pill); background: var(--bg-2); }
.cx-plan--featured .cx-seg { background: rgba(255, 255, 255, .07); }
.cx-seg button { position: relative; z-index: 1; min-height: 38px; border: 0; background: none; border-radius: var(--r-pill); font: 600 var(--t-sm)/1 var(--f-body); color: var(--ink-3); transition: color .2s; }
.cx-seg button[aria-pressed="true"] { color: var(--ink); }
.cx-plan--featured .cx-seg button { color: var(--on-night-2); }
.cx-plan--featured .cx-seg button[aria-pressed="true"] { color: var(--ink); }
.cx-seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 2px 8px rgba(21, 45, 67, .12); transition: inset-inline-start .45s var(--ease), width .45s var(--ease); }
.cx-seg--single { display: block; padding: 11px; text-align: center; font-size: var(--t-sm); color: var(--ink-3); }
.cx-plan--featured .cx-btn--gold { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------------- tabs, accordion, modal, toast */
.cx-tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--bg-2); }
.cx-tabs button { position: relative; z-index: 1; min-height: 42px; padding: 0 18px; border: 0; background: none; border-radius: var(--r-pill); font: 600 var(--t-sm)/1 var(--f-body); color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.cx-tabs button[aria-selected="true"] { color: var(--ink); }
.cx-tabs__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 2px 10px rgba(21, 45, 67, .1); transition: inset-inline-start .45s var(--ease), width .45s var(--ease); }
.cx-count { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--bg-3); color: var(--ink-3); font-weight: 700; }
.cx-tabpanel { animation: cc-in .5s var(--ease); }
@keyframes cc-in { from { opacity: 0; transform: translateY(10px); } }
.cx-acc { list-style: none; display: grid; gap: 10px; }
.cx-acc__item { border-radius: var(--r-md); background: var(--bg); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s; }
.cx-acc__item.is-open { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); }
.cx-acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border: 0; background: none; text-align: start; font: 700 var(--t-lg)/1.5 var(--f-display); color: var(--ink); }
.cx-acc__icon { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); transition: background .3s; }
.cx-acc__icon::before, .cx-acc__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease), background .3s; }
.cx-acc__icon::after { transform: rotate(90deg); }
.cx-acc__item.is-open .cx-acc__icon { background: var(--ink); }
.cx-acc__item.is-open .cx-acc__icon::before, .cx-acc__item.is-open .cx-acc__icon::after { background: #fff; }
.cx-acc__item.is-open .cx-acc__icon::after { transform: rotate(0); }
.cx-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.cx-acc__item.is-open .cx-acc__panel { grid-template-rows: 1fr; }
.cx-acc__panel > div { overflow: hidden; }
.cx-acc__panel p { padding: 0 24px 22px; color: var(--ink-2); line-height: 1.9; max-width: 75ch; }
.cx-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); visibility: hidden; }
.cx-modal.is-open { visibility: visible; }
.cx-modal__scrim { position: absolute; inset: 0; background: rgba(17, 39, 61, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.cx-modal.is-open .cx-modal__scrim { opacity: 1; }
.cx-modal__box { position: relative; width: min(100%, 920px); max-height: calc(100dvh - 32px); overflow: auto; display: grid; grid-template-columns: .9fr 1.1fr; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 60px 120px -40px rgba(17, 39, 61, .6); opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .35s, transform .55s var(--ease); }
.cx-modal.is-open .cx-modal__box { opacity: 1; transform: none; }
.cx-modal__art { position: relative; overflow: hidden; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--night); color: var(--on-night); }
.cx-modal__art .cx-logo { color: #F2F6FC; }
.cx-modal__art h2 { font-size: var(--t-3xl); }
.cx-modal__art ul { list-style: none; display: grid; gap: 10px; color: var(--on-night-2); font-size: var(--t-sm); }
.cx-modal__art li { display: flex; gap: 10px; align-items: center; }
.cx-modal__art li .cx-ic { color: #7FD0F5; }
.cx-modal__body { padding: 36px; display: grid; gap: 18px; align-content: start; }
.cx-modal__close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-2); display: grid; place-items: center; }
.cx-toast { position: fixed; z-index: 300; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 30px); opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--t-sm); box-shadow: var(--shadow-2); transition: .45s var(--ease); max-width: calc(100vw - 32px); }
.cx-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cx-toast .cx-ic { color: #7FD0F5; }


/* ---------------------------------------------------------------- inner page pieces */
.cc-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cc-stat { padding: 22px; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.cc-stat strong { display: block; font: 900 clamp(2.4rem, 1.7rem + 2vw, 3.4rem)/1 var(--f-display); letter-spacing: -.02em; }
.cc-stat span { color: var(--ink-2); font-size: var(--t-sm); }
.cc-stat--dark { background: var(--night); color: #fff; box-shadow: none; }
.cc-stat--dark span { color: var(--on-night-2); }
.cc-cards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cc-card { position: relative; height: 100%; display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s, transform .5s var(--ease); }
.cc-card:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); transform: translateY(-4px); }
.cc-card h3 { font-size: var(--t-xl); }
.cc-card p { color: var(--ink-2); }
.cc-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-card li { padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg-2); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.cc-band { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(30px, 4vw, 56px); border-radius: var(--r-xl); background: var(--night); color: var(--on-night); }
.cc-band h2 { font-size: var(--t-3xl); }
.cc-band p { color: var(--on-night-2); margin-top: 8px; }
.cc-band::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -260px; inset-inline-start: -180px; background: radial-gradient(circle, rgba(48, 164, 220, .35), transparent 65%); pointer-events: none; }
.cc-band > * { position: relative; }
.cx-dl { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.cx-dl__tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.cx-search { position: relative; flex: 1 1 240px; max-width: 380px; }
.cx-search .cx-ic { position: absolute; top: 50%; inset-inline-start: 18px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.cx-search .cx-input { padding-inline-start: 48px; border-radius: var(--r-pill); min-height: 50px; }
.cx-files { list-style: none; display: grid; gap: 8px; }
.cx-file { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .4s var(--ease); }
.cx-file:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); transform: translateX(-4px); }
.cx-file__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bad-wash); color: var(--bad); font: 800 10px/1 var(--f-body); }
.cx-file__title { font-weight: 600; overflow-wrap: anywhere; line-height: 1.5; }
.cx-file__title small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--t-xs); }
.cx-file__dl { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; transition: background .2s, transform .3s var(--ease); }
.cx-file__dl:hover { background: var(--brand-700); transform: translateY(2px); }
.cx-file.is-out { display: none; }
.cx-empty { padding: 32px; text-align: center; color: var(--ink-3); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line) inset; }
.cx-promo { position: relative; display: grid; gap: 14px; padding: 28px; border-radius: var(--r-xl); background: var(--night); color: var(--on-night); }
.cx-promo + .cx-promo { margin-top: 18px; background: var(--bg-2); color: var(--ink); }
.cx-promo h3 { font-size: var(--t-xl); }
.cx-promo ul { list-style: none; display: grid; gap: 9px; font-size: var(--t-sm); color: var(--on-night-2); }
.cx-promo + .cx-promo ul { color: var(--ink-2); }
.cx-promo li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.cx-promo li .cx-ic { width: 18px; height: 18px; color: #7FD0F5; }
.cx-promo + .cx-promo li .cx-ic { color: var(--brand-700); }
.cx-promo small { color: var(--on-night-2); }
.cx-faq { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; }
.cx-faq__nav { position: sticky; top: 110px; display: grid; gap: 4px; }
.cx-faq__nav button { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px; border: 0; border-radius: var(--r-md); background: none; text-align: start; font: 700 var(--t-md)/1.3 var(--f-display); color: var(--ink-3); transition: .2s; }
.cx-faq__nav button:hover { color: var(--ink); background: var(--bg-2); }
.cx-faq__nav button[aria-selected="true"] { color: var(--ink); background: var(--bg-2); }
.cx-faq__nav button[aria-selected="true"] .cx-count { background: var(--ink); color: #fff; }
.cx-help { margin-top: 18px; padding: 22px; border-radius: var(--r-lg); background: var(--night); color: var(--on-night); display: grid; gap: 12px; }
.cx-help h3 { font-size: var(--t-lg); }
.cx-help p { color: var(--on-night-2); font-size: var(--t-sm); }
.cc-phero .cx-search { max-width: 560px; width: 100%; }
.cc-phero .cx-search .cx-input { min-height: 60px; box-shadow: var(--shadow-1); border-color: var(--line); }
mark.cx-mark { background: var(--ice-2); color: inherit; }
.cx-prose { display: grid; gap: 18px; font-size: var(--t-lg); line-height: 2; color: var(--ink-2); max-width: 66ch; }
.cx-prose strong { color: var(--ink); }
.cx-prose ul, .cx-prose ol { padding-inline-start: 1.5em; }
.cc-about__intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cc-contra { position: relative; padding-block: clamp(90px, 12vw, 160px) clamp(70px, 10vw, 140px); }
.cc-contra__head .cc-head { margin-bottom: 0; }
/* the word stays at the top (sticky) while the six principles scroll under it, each lighting its letter */
.cc-contra__stick { position: sticky; z-index: 2; top: 0; padding-block: calc(84px + env(safe-area-inset-top, 0px)) clamp(26px, 4vw, 44px); background: linear-gradient(180deg, var(--night) 72%, rgba(17, 39, 61, 0)); }
.cc-contra__word { display: flex; justify-content: center; gap: .02em; direction: ltr; font: 900 clamp(3.6rem, 1rem + 10vw, 10rem)/.85 var(--f-display); letter-spacing: -.03em; }
.cc-contra__word span { color: var(--night-3); transition: color .5s; }
.cc-contra__word span.is-on { color: var(--brand); }
.cc-contra__word span.is-done { color: #fff; }
.cc-contra__cards { list-style: none; max-width: 780px; margin-inline: auto; display: grid; gap: clamp(22px, 9svh, 90px); padding-block: clamp(20px, 5svh, 50px) clamp(30px, 14svh, 140px); }
.cc-contra__card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-xl); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line-night); opacity: .4; transition: opacity .5s, background .5s, box-shadow .5s; }
.cc-contra__card.is-on { opacity: 1; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(48, 164, 220, .45); }
.cc-contra__card.is-done { opacity: .85; }
.cc-contra__letter { font: 900 3.2rem/1 var(--f-display); color: var(--night-3); direction: ltr; transition: color .5s; }
.cc-contra__card.is-on .cc-contra__letter { color: var(--brand); }
.cc-contra__card.is-done .cc-contra__letter { color: #fff; }
.cc-contra__card h3 { font-size: var(--t-2xl); color: #fff; }
.cc-contra__card h3 small { font: 600 var(--t-lg)/1 var(--f-body); color: #7FD0F5; margin-inline-start: 10px; direction: ltr; display: inline-block; }
.cc-contra__card p { color: var(--on-night-2); font-size: var(--t-md); margin-top: 6px; }
.cx-meaning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cx-meaning article { padding: 32px; display: grid; gap: 10px; border-radius: var(--r-xl); background: var(--bg-2); }
.cx-meaning h3 { font-size: var(--t-2xl); display: flex; align-items: baseline; gap: 12px; }
.cx-meaning h3 span { color: var(--brand-600); font: 700 var(--t-md)/1 var(--f-body); direction: ltr; }
.cx-meaning p { color: var(--ink-2); line-height: 1.9; }
.cx-team-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.cx-team-kpis { display: flex; gap: 36px; }
.cx-team-kpis div { display: grid; }
.cx-team-kpis strong { font: 900 var(--t-4xl)/1 var(--f-display); direction: ltr; text-align: right; }
.cx-team-kpis div > span { color: var(--ink-3); font-size: var(--t-sm); }
.cx-team { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-member { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-md); background: var(--bg); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .4s var(--ease); }
.cx-member:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); transform: translateY(-3px); }
.cx-mono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ice); color: var(--brand-700); font: 800 var(--t-lg)/1 var(--f-display); }
.cx-member strong { display: block; font: 700 var(--t-md)/1.35 var(--f-display); }
.cx-member div > span { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--t-xs); }
.cx-member em { font-style: normal; color: var(--brand-700); font-weight: 700; }
.cc-more { margin-top: 14px; }
.cc-more summary { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); font: 600 var(--t-sm)/1 var(--f-body); list-style: none; cursor: pointer; }
.cc-more summary::-webkit-details-marker { display: none; }
.cc-more summary .cx-ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.cc-more[open] summary { margin-bottom: 12px; }
.cc-more[open] summary .cx-ic { transform: rotate(180deg); }
.cx-contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; align-items: start; }
.cx-contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.cx-contact__form .cx-field--full { grid-column: 1 / -1; }
.cx-captcha { display: flex; align-items: center; gap: 14px; width: fit-content; padding: 12px 14px; border: 1px solid #D3D3D3; border-radius: 4px; background: #F9F9F9; font-size: 14px; color: #222; }
.cx-captcha input { width: 24px; height: 24px; }
.cx-captcha small { display: block; font-size: 10px; color: #777; }
.cx-contact__side { display: grid; gap: 12px; }
.cx-cinfo { display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: center; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); }
.cx-cinfo__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--bg); color: var(--brand-700); box-shadow: 0 0 0 1px var(--line); }
.cx-cinfo__icon--wa { background: #25D366; color: #fff; box-shadow: none; }
.cx-cinfo h3 { font-size: var(--t-lg); }
.cx-cinfo p { color: var(--ink-3); font-size: var(--t-sm); }
.cx-copy { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); font: 600 var(--t-sm)/1.2 var(--f-body); direction: ltr; }
.cx-copy .cx-ic { width: 15px; height: 15px; color: var(--ink-3); }

/* ---------------------------------------------------------------- preview pill + a11y launcher */
.dp { position: fixed; z-index: 400; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); font: 600 13px/1.4 var(--f-body); }
.dp__btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--r-pill); border: 0; background: var(--ink); color: #fff; box-shadow: var(--shadow-2); white-space: nowrap; }
.dp__btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(48, 164, 220, .25); }
.dp__panel { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: min(92vw, 500px); padding: 16px; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); display: none; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.dp.is-open .dp__panel { display: grid; }
.dp__panel h4 { font: 700 12px/1 var(--f-display); color: var(--brand-600); margin: 6px 0 4px; }
.dp__panel ol { list-style: none; display: grid; gap: 2px; }
.dp__panel a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--ink-2); }
.dp__panel a:hover { background: var(--bg-2); color: var(--ink); }
.dp__panel a[aria-current="page"] { background: var(--ink); color: #fff; }
.dp__note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
#ct-a11y-open { background: var(--ink) !important; border: 0 !important; color: #fff !important; box-shadow: var(--shadow-2) !important; width: 50px !important; height: 50px !important; left: max(14px, env(safe-area-inset-left, 0px)) !important; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------------------------------------------------------------- responsive */
/* ---------------------------------------------------------------- polish: fit, timing, no fighting */
.cc-contra .cc-head { margin-bottom: 0; }
/* the footer wordmark ends fully visible, resting on the legal row */
/* the word is decoration: its letters reach above its own box (line-height .8) and over the links, so it
   never takes a click */
.cc-wordmark { pointer-events: none; will-change: transform; margin-bottom: 0; padding-bottom: .06em; font-size: min(19rem, calc(min(100vw - 2 * var(--gutter-r), var(--container)) / 5.25)); }
/* magnetic buttons: GSAP moves them, so CSS must not also transition their transform */
.cx-btn.cc-magnetic { transition-property: background-color, color, border-color, box-shadow; }
/* before first paint (html.cc-pre, see <head>): the intro waits for GSAP instead of flashing */
html.cc-pre .cc-hero__title, html.cc-pre .cc-hero__lead, html.cc-pre .cc-hero__ctas,
html.cc-pre .cc-hart__screen, html.cc-pre .cc-hcard, html.cc-pre .cc-phero__copy > *, html.cc-pre .cc-phero__art { opacity: 0; }
.cc-hero__title .cc-split-word, .cc-phero h1 .cc-split-word { will-change: transform, opacity; }

/* back to top, with a ring that fills as you read */
.cc-top { position: fixed; z-index: 70; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); color: var(--ink); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .35s, transform .45s var(--ease), visibility 0s .45s, bottom .45s var(--ease); }
.cc-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s var(--ease), visibility 0s, bottom .45s var(--ease); }
.cc-top:hover { color: var(--brand-700); }
.cc-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-top circle { fill: none; stroke-width: 2.5; }
.cc-top .bg { stroke: var(--line); }
.cc-top .fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cc-top > .cx-ic { width: 18px; height: 18px; transform: rotate(180deg); }

/* sticky buy bar (package pages): between the hero and the plans */
.cc-buybar { position: fixed; z-index: 65; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(680px, calc(100% - 24px)); transform: translate(-50%, 140%); transition: transform .55s var(--ease); }
.cc-buybar.is-on { transform: translate(-50%, 0); }
.cc-buybar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; padding-inline: 22px 10px; border-radius: var(--r-pill); background: rgba(21, 45, 67, .96); color: #fff; box-shadow: 0 30px 60px -24px rgba(17, 39, 61, .6); }
.cc-buybar__txt { display: grid; min-width: 0; }
.cc-buybar__txt strong { font: 700 var(--t-md)/1.3 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-buybar__txt span { font-size: var(--t-xs); color: var(--on-night-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-buybar__txt b { color: #fff; }
.cc-buybar .cx-btn { --h: 48px; flex: none; }
/* while the bar is up, the floating buttons step above it */
html.cc-bar-on .cc-top, html.cc-bar-on .dp { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
html.cc-bar-on #ct-a11y-open { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
.dp { transition: bottom .45s var(--ease); }

@media (max-width: 1180px) {
  .cx-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .cx-nav, .cx-header__actions .cx-hide-md { display: none; }
  /* the hero stacks: copy centred, the picture under it */
  .cc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vw, 46px); }
  .cc-hero__copy { justify-items: center; padding-inline-start: 0; text-align: center; }
  .cc-hero .cc-hero__ctas { justify-content: center; }
  .cx-burger { display: inline-block; }
  .cx-header__bar { justify-content: space-between; }
  .cc-phero__grid, .cc-about__intro { grid-template-columns: minmax(0, 1fr); }
  .cc-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-dl, .cx-faq, .cx-contact { grid-template-columns: minmax(0, 1fr); }
  .cx-contact__side { order: -1; } /* WhatsApp before the long form */
  .cx-faq__nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .cx-help { display: none; }
  .cx-modal__box { grid-template-columns: minmax(0, 1fr); }
  .cx-modal__art { display: none; }
  .cx-footer__top { grid-template-columns: repeat(2, auto); }
  .cx-footer__brand { grid-column: 1 / -1; }
  /* the last row ends above the floating buttons (accessibility, back to top), so nothing covers its links */
  .cx-footer__bottom .cx-container { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) {
  .cx-header__bar { height: 60px; padding: 0 16px 0 8px; }
  .cc-hero { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
  .cc-hart { width: min(100%, 460px); aspect-ratio: 1 / .95; }
  .cc-hart__screen { top: 12%; left: 11%; width: 78%; height: 52%; }
  .cc-hcard { gap: 8px; min-width: 48%; padding: 7px 9px; border-radius: 16px; }
  .cc-hcard strong { font-size: .84rem; }
  .cc-hcard small { font-size: .72rem; }
  .cc-hcard__ic { width: 30px; height: 30px; border-radius: 9px; }
  .cc-hcard__ic .cx-ic { width: 16px; height: 16px; }
  .cc-hcard--guide, .cc-hcard--stats { top: 60%; }
  /* small phones: two cards no longer fit side by side, so the picture takes some of the margin, then the icons go */
  @media (max-width: 400px) { .cc-hart { width: calc(100% + 32px); margin-inline: -16px; } }
  @media (max-width: 340px) { .cc-hcard__ic { display: none; } }
  .cc-hero__copy { gap: 18px; }
  .cc-hero__ctas .cx-btn--lg { --h: 54px; padding: 0 22px; font-size: var(--t-md); }
  /* programs: one card per row, with a shorter picture */
  .cc-track { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cc-prog:hover { transform: none; }
  .cc-prog__art { aspect-ratio: 16 / 7.6; }
  .cc-key { width: 19cqw; height: 20.5cqw; font-size: 8.6cqw; }
  .cc-prog__body { padding: 16px 18px 18px; }
  .cc-prog__body h3 { font-size: var(--t-xl); }
  .cc-prog__go { inset-inline-end: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 13px; }
  .cc-prog__body p, .cc-prog__chips { padding-inline-end: 52px; }
  .cc-prog--end { padding: 22px 20px 20px; gap: 16px; }
  .cc-prog--end h3 { font-size: var(--t-2xl); }
  .cc-prog__end-top { grid-template-columns: minmax(0, 1fr) 96px; }
  /* why: two by two */
  .cc-callback { grid-template-columns: minmax(0, 1fr); }
  .cc-contra__stick { padding-top: calc(74px + env(safe-area-inset-top, 0px)); }
  .cc-contra__cards { gap: clamp(16px, 5svh, 48px); }
  .cc-contra__card { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .cc-contra__letter { font-size: 2.4rem; }
  /* inner pages: no breadcrumbs or decorative photos on a small screen */
  .cc-crumbs, .cc-phero__photo { display: none; }
  .cc-phero { padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
  .cx-footer__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cx-footer__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
  /* on a phone the back-to-top button stands on the design-pages button: clear both */
  .cx-footer__bottom .cx-container { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  .cx-plans, .cx-plans--2 { grid-template-columns: minmax(0, 1fr); }
  .cc-cards, .cx-meaning { grid-template-columns: minmax(0, 1fr); }
  .cx-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cx-member { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .cx-mono { width: 40px; height: 40px; font-size: var(--t-md); }
  .cx-contact__form { grid-template-columns: minmax(0, 1fr); }
  .cx-file { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; }
  .cx-file__icon { width: 42px; height: 42px; }
  .cx-acc__btn { padding: 18px; font-size: var(--t-md); }
  .cx-acc__panel p { padding: 0 18px 18px; }
  .dp { left: auto; right: max(14px, env(safe-area-inset-right, 0px)); transform: none; }
  .dp__btn { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .dp__btn span { display: none; }
  .dp__panel { left: auto; right: 0; transform: none; }
  .cc-top { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  html.cc-bar-on .cc-top { bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* trust row under pricing */
.cc-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; color: var(--ink-2); font-size: var(--t-sm); }
.cc-trust li { display: inline-flex; align-items: center; gap: 8px; }
.cc-trust .cx-ic { width: 18px; height: 18px; color: var(--brand-700); }

/* ==========================================================================
   Customer changes, round 1 (2026-11-01)
   ========================================================================== */

/* ---------------------------------------------------------------- programs: books moved to their own section */

/* ---------------------------------------------------------------- book store section (home) */
.cc-books { padding-block: clamp(20px, 3vw, 40px) clamp(64px, 8vw, 110px); }
.cc-books__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: clamp(8px, 1.5vw, 24px); padding: clamp(28px, 4vw, 60px); border-radius: var(--r-xl); color: #fff; background: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 34px 34px, radial-gradient(68% 110% at 20% 52%, #1C6593 0%, rgba(28, 101, 147, 0) 70%), linear-gradient(115deg, #0F2A41 0%, #133C5A 100%); box-shadow: 0 30px 60px -34px rgba(15, 42, 65, .6); }
.cc-books__mark { position: absolute; inset-inline-start: -24px; bottom: -92px; width: clamp(170px, 19vw, 280px); color: #fff; opacity: .05; pointer-events: none; }
.cc-books__copy { position: relative; display: grid; justify-items: start; gap: clamp(14px, 1.5vw, 22px); }
.cc-books__copy h2 { margin: 0; color: #fff; font: 900 clamp(2.5rem, 5.4vw, 5rem)/1.14 var(--f-display); }
.cc-books__copy h2 em { display: block; font-style: normal; color: #5CC6F3; }
.cc-books__tag { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35em .45em; color: #fff; font: 800 clamp(1.2rem, 2.15vw, 2rem)/1.35 var(--f-display); }
.cc-books__pill { display: inline-block; padding: .1em .55em .18em; border-radius: .55em; background: linear-gradient(180deg, #3DB4EC, #2A9FDC); box-shadow: 0 10px 26px -8px rgba(48, 164, 220, .85); transform: rotate(-2deg); }
.cc-books__box { flex: none; width: 1.35em; height: 1.35em; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.cc-books__sub { margin: 0; color: rgba(233, 239, 247, .82); font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: 1.7; }
.cc-books__cta { margin-top: clamp(4px, .8vw, 12px); border-radius: 18px; background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .6); transition: transform .25s var(--ease), box-shadow .25s, color .2s; }
.cc-books__cta:hover { background: #fff; color: var(--brand-700); transform: translateY(-2px); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7); }
.cc-books__cta:hover .cx-ic { transform: translateX(-3px); }
.cc-books__cta .cx-ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.cc-books__art { position: relative; display: block; width: 100%; max-width: 640px; height: auto; margin-block: clamp(-44px, -3vw, -12px); justify-self: center; overflow: visible; }
.cc-books__art text { font: 800 40px var(--f-display); fill: #123A57; }
@media (prefers-reduced-motion: no-preference) {
  .cc-books__float { animation: ccBooksFloat 5s ease-in-out infinite; }
  .cc-books__float--late { animation-delay: -2.5s; }
}
@keyframes ccBooksFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 860px) {
  .cc-books__panel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cc-books__art { max-width: 400px; margin-block: 0; }
}
@media (max-width: 640px) {
  .cc-books__panel { padding: 26px 18px 10px; }
  .cc-books__cta { width: 100%; }
  .cc-books__art { max-width: 320px; }
  .cc-books__mark { width: 130px; bottom: -60px; }
}

/* ---------------------------------------------------------------- students (home): two rows moved by swipe or arrows */
.cc-rail { --gap: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cc-rail + .cc-rail { margin-top: clamp(20px, 3vw, 36px); }
/* three reviews and four grade cards fit the page width, the next one shows at the page edge */
.cc-rail--said { --w: calc((min(100vw - 40px, var(--container)) - 2 * var(--gap)) / 3); }
.cc-rail--marks { --w: calc((min(100vw - 40px, var(--container)) - 3 * var(--gap)) / 4); }
.cc-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-rail__title { display: flex; align-items: center; gap: 14px; font-size: var(--t-xl); }
.cc-rail__title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--ice-2); }
.cc-rail__nav { display: flex; flex: none; gap: 10px; }
.cc-rail__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.cc-rail__btn .cx-ic { width: 18px; height: 18px; }
.cc-rail__btn--next { background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) { .cc-rail__btn:hover { background: var(--brand-700); color: #fff; box-shadow: none; } }
/* the row starts under the title. Past the page width on either side it fades within --bleed, so a wide screen shows
   the same three or four cards plus one faded card, and a last card resting at the page width is never faded */
.cc-rail__view { --pad: max(var(--gutter-r), calc((100% - var(--container)) / 2)); --bleed: 120px; --edge: linear-gradient(to right, transparent max(0px, calc(var(--pad) - var(--bleed))), #000 calc(var(--pad) - 4px), #000 calc(100% - var(--pad) + 4px), transparent min(100%, calc(100% - var(--pad) + var(--bleed)))); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); scrollbar-width: none; padding: 8px var(--pad) 26px; -webkit-mask-image: var(--edge); mask-image: var(--edge); }
.cc-rail__view::-webkit-scrollbar { display: none; }
.cc-rail__view:focus-visible { outline-offset: -3px; }
.cc-rail__track { display: flex; gap: var(--gap); width: max-content; min-width: 100%; }
/* everything fits: no arrows, cards centred */
.cc-rail.is-still .cc-rail__nav { display: none; }
.cc-rail.is-still .cc-rail__track { justify-content: center; }
/* the reviews glide (cc.js): an animation moves the row instead of scrolling, and an up or down swipe still scrolls the page */
.cc-rail.is-glide .cc-rail__view { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
.cc-rail.is-glide .cc-rail__track { will-change: transform; }

/* cards set width as well as flex basis: Safari measures the max-content row from each card's width (else its text), not its basis, so the row came out wider than its cards and the glide slid them out of view */ .cc-rv { flex: 0 0 var(--w); width: var(--w); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px 26px 20px; border-radius: var(--r-lg); background: var(--bg-2); }
.cc-rv__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cc-rv .cc-stars { color: #F5A623; }
.cc-rv__q { flex: none; width: 38px; height: 24px; fill: var(--ice-2); }
.cc-rv blockquote { flex: 1; margin: 0; font-size: var(--t-md); line-height: 1.9; color: var(--ink-2); }
.cc-rv figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.cc-rv__av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: linear-gradient(145deg, var(--brand), var(--brand-700)); color: #fff; font: 700 var(--t-lg)/1 var(--f-display); }
.cc-rv strong { display: block; font: 800 var(--t-md)/1.4 var(--f-display); color: var(--ink); }
.cc-rv small { display: block; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); }

.cc-gc { --pic: 112px; position: relative; flex: 0 0 var(--w); width: var(--w); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; margin: 0; padding-bottom: 24px; overflow: hidden; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -26px rgba(21, 45, 67, .3); text-align: center; }
.cc-gc__band { align-self: stretch; height: 104px; padding: 14px; background: linear-gradient(115deg, var(--brand-700), var(--brand-800) 45%, var(--ink)); }
.cc-gc__tag { display: block; width: fit-content; padding: 3px 12px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 var(--t-xs)/1.7 var(--f-display); }
.cc-gc__pic { flex: none; width: var(--pic); height: var(--pic); margin-top: calc(var(--pic) / -2); padding: 5px; border-radius: 50%; background: var(--bg); box-shadow: 0 10px 22px -10px rgba(21, 45, 67, .45); }
.cc-gc__pic img, .cc-gc__pic span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cc-gc__pic span { background: linear-gradient(145deg, var(--brand), var(--brand-700)); color: #fff; font: 700 2.2rem/1 var(--f-display); }
.cc-gc__score { margin-top: 18px; font: 900 clamp(3.2rem, 2.2rem + 2.2vw, 4.4rem)/1.15 var(--f-display); color: var(--ink); }
.cc-gc__score--long { font-size: var(--t-3xl); line-height: 1.6; }
.cc-gc__of { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-2); }
.cc-gc__name { margin-top: 12px; padding-inline: 14px; font: 800 var(--t-lg)/1.4 var(--f-display); color: var(--ink); }
.cc-gc__place { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding-inline: 14px; font-size: var(--t-xs); color: var(--ink-2); }
.cc-gc__place::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

@media (max-width: 1100px) {
  .cc-rail--said { --w: calc((100vw - 40px - var(--gap)) / 2); }
  .cc-rail--marks { --w: calc((100vw - 40px - 2 * var(--gap)) / 3); }
}
@media (max-width: 760px) {
  .cc-rail { --gap: 14px; }
  .cc-rail--said { --w: min(84vw, 340px); }
  .cc-rail--marks { --w: min(62vw, 250px); }
  .cc-rail__btn { width: 36px; height: 36px; }
  .cc-rv { padding: 18px 18px 16px; }
  .cc-rv blockquote { font-size: var(--t-sm); line-height: 1.8; }
  .cc-rv__av { width: 38px; height: 38px; font-size: var(--t-md); }
  .cc-gc { --pic: 92px; padding-bottom: 18px; }
  .cc-gc__band { height: 84px; padding: 10px; }
  .cc-gc__score { margin-top: 12px; font-size: 3rem; }
  .cc-gc__score--long { font-size: var(--t-2xl); }
  .cc-gc__name { font-size: var(--t-md); }
}

/* ---------------------------------------------------------------- comparison table (package page) */
.cc-compare { padding-bottom: clamp(36px, 5vw, 60px); }
.cc-cmp__picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: clamp(18px, 3vw, 30px); }
.cc-cmp__pick { position: relative; cursor: pointer; }
.cc-cmp__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cc-cmp__pick span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); transition: .2s; }
.cc-cmp__pick span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--bg) center / 12px no-repeat; }
.cc-cmp__pick input:checked + span { background: var(--ice); box-shadow: 0 0 0 1.5px var(--brand-600); color: var(--ink); }
.cc-cmp__pick input:checked + span::before { box-shadow: none; background-color: var(--brand-700); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.cc-cmp__pick input:focus-visible + span { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.cc-cmp__wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.cc-cmp { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.cc-cmp th, .cc-cmp td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.cc-cmp tbody tr:last-child th, .cc-cmp tbody tr:last-child td { border-bottom: 0; }
.cc-cmp thead th { vertical-align: top; min-width: 132px; background: var(--bg-2); }
.cc-cmp thead strong { display: block; margin-bottom: 10px; font: 700 var(--t-sm)/1.4 var(--f-display); }
.cc-cmp thead .cx-btn { --h: 36px; padding: 0 14px; font-size: var(--t-xs); }
.cc-cmp th:first-child { position: sticky; right: 0; z-index: 1; min-width: 124px; text-align: start; font-weight: 600; color: var(--ink-2); background: var(--bg); box-shadow: -1px 0 0 var(--line); }
.cc-cmp thead th:first-child { background: var(--bg-2); }
.cc-cmp td { color: var(--ink); font-weight: 600; }
.cc-cmp__yes { width: 18px; height: 18px; color: var(--ok); stroke-width: 2.6; }
.cc-cmp__no { color: var(--line-2); }
.cc-cmp [hidden] { display: none; }
.cc-compare + .cc-sec { padding-top: 0; }

/* ---------------------------------------------------------------- cart (online packages) */
.cc-cart { padding-top: calc(128px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(56px, 8vw, 110px); min-height: 72vh; }
.cc-cart h1 { font-size: var(--t-4xl); font-weight: 800; }
.cc-cart h1 em { font-style: normal; color: var(--brand); }
.cc-cart__lead { margin-top: 6px; color: var(--ink-2); }
.cc-cart__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: clamp(22px, 3vw, 36px); }
.cc-cart__list { list-style: none; display: grid; gap: 10px; }
.cc-cart__item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.cc-cart__item strong { display: block; font-weight: 700; }
.cc-cart__item small { color: var(--ink-3); font-size: var(--t-xs); }
.cc-cart__item b { font: 800 var(--t-lg)/1 var(--f-display); white-space: nowrap; }
.cc-cart__x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); cursor: pointer; }
.cc-cart__x:hover { background: var(--bad-wash); color: var(--bad); }
.cc-cart__x .cx-ic { width: 16px; height: 16px; }
.cc-cart__sum { position: sticky; top: 96px; display: grid; gap: 12px; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); }
.cc-cart__sum h2 { font-size: var(--t-lg); }
.cc-cart__total { display: flex; justify-content: space-between; align-items: baseline; }
.cc-cart__total b { font: 900 var(--t-2xl)/1 var(--f-display); }
.cc-cart__empty { padding: 28px; border-radius: var(--r-lg); background: var(--bg-2); text-align: center; color: var(--ink-2); }
.cc-cart__store { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ice); font-size: var(--t-sm); line-height: 1.7; }
.cc-cart__store .cx-ic { width: 20px; height: 20px; color: var(--brand-700); }
.cc-cart__store a { font-weight: 700; color: var(--brand-700); text-decoration: underline; }

/* ---------------------------------------------------------------- free trial page */
.cc-trial__picks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cc-trial__pick { position: relative; height: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s, background .2s; }
.cc-trial__pick:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); }
.cc-trial__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cc-trial__pick .cc-glyph { width: 52px; height: 52px; border-radius: 15px; }
.cc-trial__pick strong { display: block; font: 700 var(--t-lg)/1.35 var(--f-display); }
.cc-trial__pick small { display: block; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.cc-trial__tick { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cc-trial__pick:has(input:checked) { background: var(--ice); box-shadow: 0 0 0 2px var(--brand-600); }
.cc-trial__pick:has(input:focus-visible) { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.cc-trial__pick input:checked ~ .cc-trial__tick { background: var(--brand-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: none; }
.cc-trial__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cc-trial__form { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.cc-trial__chosen { padding: 10px 14px; border-radius: var(--r-md); background: var(--bg-2); font-size: var(--t-sm); color: var(--ink-2); }
.cc-trial__chosen b { color: var(--ink); }
.cc-trial__chosen.is-missing { background: var(--bad-wash); color: var(--bad); font-weight: 600; }
.cc-trial__how { display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--night); color: var(--on-night); }
.cc-trial__how h3 { font-size: var(--t-xl); color: #fff; }
.cc-trial__how ul { list-style: none; display: grid; gap: 12px; }
.cc-trial__how li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: var(--t-sm); line-height: 1.7; }
.cc-trial__how .cx-ic { width: 20px; height: 20px; color: #7FD0F5; }
.cc-trial__how li.is-lock .cx-ic { color: var(--on-night-2); }

/* ---------------------------------------------------------------- tablets */
@media (max-width: 1040px) {
  .cc-trial__picks, .cc-trial__grid, .cc-cart__grid { grid-template-columns: minmax(0, 1fr); }
  .cc-cart__sum { position: static; }
}

/* ---------------------------------------------------------------- phones: slightly smaller type than desktop, with air at the edges */
@media (max-width: 760px) {
  html { font-size: 15.5px; }
  :root {
    --gutter-l: max(28px, env(safe-area-inset-left, 0px));
    --gutter-r: max(28px, env(safe-area-inset-right, 0px));
    --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
    --t-2xl: 1.4rem; --t-3xl: 1.6rem; --t-4xl: 1.85rem; --t-5xl: 2.15rem;
  }
  .cx-btn { --h: 44px; }
  .cx-btn--lg { --h: 48px; padding-inline: 20px; font-size: var(--t-md); }
  .cx-header__bar { height: 54px; }
  .cx-logo .ct-logo__svg { width: 112px; }
  .cc-hero { padding-top: calc(118px + env(safe-area-inset-top, 0px)); }
  .cc-hero__title { font-size: min(9.3vw, 2.7rem); }
  .cc-hero__ctas .cx-btn--lg { --h: 48px; }
  .cc-phero { padding-top: calc(92px + env(safe-area-inset-top, 0px)); padding-bottom: 36px; }
  .cc-sec { padding-block: 52px; }
  .cc-head { gap: 10px; margin-bottom: 24px; }
  .cc-head p { font-size: var(--t-md); }
  /* programs */
  /* why */
  /* students */
  /* start */
  .cc-final { padding-block: 24px 52px; }
  .cc-final__pill { font-size: var(--t-xs); gap: 6px; }
  .cc-final__pillic { width: 22px; height: 22px; }
  .cc-final__sub { font-size: var(--t-md); }
  .cc-final__ring--a { width: 86%; }
  .cc-final__ring--b { width: 62%; }
  .cc-final__mark { opacity: .06; }
  .cc-final__mark--a { top: -8%; width: 30%; }
  .cc-final__mark--b { bottom: -6%; width: 27%; }
  .cc-final .cx-btn--wa { --h: 56px; padding-inline: 28px; font-size: 1.25rem; }
  .cc-final__wa { width: 22px; height: 22px; }
  @media (max-width: 360px) {
    .cc-final__card { padding-inline: 12px; }
    .cc-final .cx-btn--wa { padding-inline: 14px; gap: 8px; font-size: 1.21rem; }
  }
  /* books */
  .cc-books { padding-block: 8px 52px; }
  /* a little more air between the home sections on phones */
  .cc-why { padding-block: 64px; }
  .cc-said { padding-top: 64px; }
  /* package page */
  .cx-plan { padding: 18px 16px 16px; }
  .cc-stat { padding: 12px 14px; }
  .cc-stat strong { font-size: 1.7rem; }
  .cc-tiles { gap: 8px; }
  .cc-card { padding: 16px; gap: 10px; }
  .cc-band { padding: 20px; gap: 14px; }
  .cc-buybar__in { padding-inline: 16px 8px; }
  .cc-cmp th, .cc-cmp td { padding: 10px 8px; font-size: var(--t-xs); }
  .cc-cmp thead th { min-width: 104px; }
  .cc-cmp th:first-child { min-width: 92px; }
  .cc-cmp__pick span { min-height: 36px; padding: 0 10px; font-size: var(--t-xs); }
  /* footer */
  .cx-footer__top { gap: 20px; }
  /* cart */
  .cc-cart { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
  .cc-cart__item { grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 12px; }
  .cc-cart__item .cc-glyph { width: 38px; height: 38px; border-radius: 11px; }
  .cc-cart__x { width: 32px; height: 32px; }
  /* trial */
  .cc-trial__pick { grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 10px; padding: 12px; }
  .cc-trial__pick .cc-glyph { width: 42px; height: 42px; border-radius: 12px; }
  .cc-trial__pick strong { font-size: var(--t-md); }
  .cc-trial__pick small { font-size: var(--t-xs); }
}

/* ------------------------------------------------------------------
   customer changes, round 2 (2026-11-01)
   ------------------------------------------------------------------ */
.cc-art--hadassah { background: linear-gradient(160deg, #DCEFFA, #BFE3F7); }
.cc-art--hadassah b { font: 700 clamp(3.6rem, 2rem + 5vw, 6.6rem)/1 "Noto Sans Hebrew", var(--f-body); color: var(--brand-800); letter-spacing: -.01em; }
.cc-phero__art--plain { display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r-lg, 24px); box-shadow: var(--shadow-2, 0 18px 50px rgba(21, 45, 67, .14)); }

/* marks calculator, in the same look as the rest of the design */
.cc-calc-wrap [hidden] { display: none !important; }
/* the page's first screen: heading, exam tabs, then one card holding the controls and the score */
.cc-calcp { padding-top: calc(128px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(48px, 6vw, 80px); background: linear-gradient(180deg, var(--ice) 0%, #F7FBFE 64%, var(--bg) 100%); }
.cc-calcp__head { display: grid; gap: 10px; justify-items: center; margin-bottom: clamp(20px, 2.6vw, 30px); text-align: center; }
.cc-calcp__head h1 { font: 900 clamp(2.4rem, 1.5rem + 3vw, 3.7rem)/1.2 var(--f-display); }
.cc-calcp__head h1 em { font-style: normal; color: var(--brand); }
.cc-calcp__head p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--ink-2); }
.cc-calc__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto clamp(22px, 3vw, 34px); padding: 6px; background: var(--bg); border-radius: var(--r-pill, 999px); box-shadow: 0 16px 34px -20px rgba(21, 45, 67, .4), 0 0 0 1px rgba(21, 45, 67, .03); }
.cc-calc__tab { min-height: 48px; padding: 0 clamp(18px, 3vw, 30px); border: 0; border-radius: var(--r-pill, 999px); background: transparent; color: var(--ink-2); font: 700 var(--t-md)/1 var(--f-display); cursor: pointer; transition: background-color .2s, color .2s; }
.cc-calc__tab:hover { color: var(--ink); background: var(--bg-2); }
.cc-calc__tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.cc-calc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); width: min(980px, 100%); margin-inline: auto; overflow: hidden; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 44px 70px -48px rgba(21, 45, 67, .5), 0 0 0 1px rgba(21, 45, 67, .03); }
.cc-calc__card { display: grid; align-content: start; gap: 22px; padding: clamp(22px, 4.4vw, 46px); }
.cc-calc__head { display: grid; justify-items: start; gap: 10px; }
.cc-calc__head h2 { font-size: var(--t-xl); font-weight: 800; }
.cc-calc__count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.cc-calc__count button { min-width: 40px; min-height: 32px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); font-weight: 700; cursor: pointer; }
.cc-calc__count button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cc-calc__panel { display: grid; gap: 26px; }
.cc-calc__group { display: grid; gap: 6px; }
.cc-calc__group--one { padding: clamp(18px, 3vw, 30px); border-radius: var(--r-lg); background: var(--bg-2); }
.cc-calc__gtitle { font: 700 .97rem/1.5 var(--f-display); color: var(--brand-600); }
/* a chapter: name, slider, then the count, which can also be typed */
.cc-calc__row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 62px; align-items: center; gap: 16px; min-height: 56px; }
.cc-calc__label { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.cc-calc__range { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 6px; margin: 0; border-radius: 999px; background: linear-gradient(to left, var(--brand) var(--fill), var(--bg-3) var(--fill)); cursor: pointer; }
.cc-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 5px solid var(--brand); box-shadow: 0 0 0 3px rgba(48, 164, 220, .12); cursor: grab; }
.cc-calc__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 5px solid var(--brand); box-shadow: 0 0 0 3px rgba(48, 164, 220, .12); cursor: grab; }
.cc-calc__range:focus-visible { outline: 3px solid var(--brand); outline-offset: 7px; }
.cc-calc__of { display: inline-flex; align-items: baseline; gap: 0; font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }
.cc-calc__num { width: 2.1ch; padding: 0; text-align: right; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 800 1.15rem/1.3 var(--f-display); -moz-appearance: textfield; appearance: textfield; }
.cc-calc__num:hover, .cc-calc__num:focus { background: var(--ice); }
.cc-calc__num::-webkit-outer-spin-button, .cc-calc__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* a single-section exam: name, then a large count between two buttons, then the slider and its two ends */
.cc-calc__row.cc-calc__row--big { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; min-height: 0; }
.cc-calc__row--big .cc-calc__label { font: 700 var(--t-lg)/1.5 var(--f-display); color: var(--brand-600); }
.cc-calc__stepper { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 24px); }
.cc-calc__step { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink); box-shadow: 0 8px 18px -8px rgba(21, 45, 67, .4), 0 0 0 1px rgba(21, 45, 67, .05); cursor: pointer; transition: background-color .2s, opacity .2s; }
.cc-calc__step:hover { background: var(--ice); }
.cc-calc__step[aria-disabled="true"] { opacity: .45; cursor: default; }
.cc-calc__step .cx-ic { width: 18px; height: 18px; stroke-width: 3; }
.cc-calc__row--big .cc-calc__num { width: 2.5ch; padding: 0; text-align: center; font: 800 clamp(3.2rem, 2.4rem + 2vw, 4.4rem)/1.15 var(--f-display); border-radius: 12px; }
.cc-calc__row--big .cc-calc__of { gap: 5px; font-size: var(--t-sm); }
.cc-calc__row--big .cc-calc__range { margin-top: 18px; }
.cc-calc__ends { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-3); }
/* the score */
.cc-calc__res { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(24px, 3.4vw, 38px) clamp(18px, 2.4vw, 28px) clamp(26px, 3vw, 36px); color: var(--on-night); text-align: center; background: radial-gradient(ellipse 130% 78% at 28% 112%, rgba(48, 164, 220, .72) 0%, rgba(48, 164, 220, .42) 34%, rgba(48, 164, 220, .14) 66%, rgba(48, 164, 220, 0) 100%), linear-gradient(172deg, var(--night) 30%, var(--night-2)); }
.cc-calc__reslabel { font-size: var(--t-md); font-weight: 700; color: var(--on-night); }
.cc-calc__gauge { position: relative; display: grid; place-items: center; width: min(218px, 100%); aspect-ratio: 1; }
.cc-calc__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 7.6; transform: rotate(-90deg); }
.cc-calc__ringbg { stroke: rgba(255, 255, 255, .14); }
.cc-calc__ringfg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .35s var(--ease); }
.cc-calc__score { position: relative; display: grid; justify-items: center; gap: 2px; }
.cc-calc__score strong { font: 800 clamp(3.2rem, 2.4rem + 2vw, 4.4rem)/1.1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.cc-calc__score small { font-size: var(--t-xs); color: var(--on-night-2); }
.cc-calc__extra { display: grid; justify-items: center; gap: 14px; width: 100%; }
.cc-calc__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cc-calc__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: var(--t-sm); font-weight: 700; line-height: 1.4; }
.cc-calc__chip b { color: #7FD0F5; font-weight: 800; }
.cc-calc__level { display: grid; justify-items: center; gap: 10px; }
.cc-calc__lvname { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 14px; background: #fff; color: var(--ink); font: 800 var(--t-lg)/1.3 var(--f-display); }
.cc-calc__lvok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; }
.cc-calc__lvok .cx-ic { width: 13px; height: 13px; stroke-width: 3; }
.cc-calc__go, .cc-calc__more summary { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 2px solid var(--brand); color: #fff; font-size: var(--t-sm); font-weight: 700; line-height: 1.4; }
.cc-calc__go .cx-ic, .cc-calc__more summary .cx-ic { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.cc-calc__go:hover .cx-ic { transform: translateX(-3px); }
.cc-calc__more { width: 100%; }
.cc-calc__more summary { width: fit-content; margin-inline: auto; cursor: pointer; list-style: none; }
.cc-calc__more summary::-webkit-details-marker { display: none; }
.cc-calc__more[open] summary .cx-ic { transform: rotate(180deg); }
.cc-calc__bd { display: grid; margin: 12px 0 0; text-align: start; }
.cc-calc__bd > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-night); }
.cc-calc__bd dt { font-size: var(--t-xs); color: var(--on-night); }
.cc-calc__bd dd { margin: 0; display: grid; justify-items: end; font-weight: 800; color: #fff; }
.cc-calc__bd dd small { font-weight: 500; font-size: var(--t-xs); color: var(--on-night); }
.cc-calc__fine { margin: 6px 0 0; font-size: var(--t-xs); line-height: 1.7; color: var(--on-night); text-align: start; }
.cc-calc__note { max-width: 72ch; margin: clamp(16px, 2.2vw, 24px) auto 0; font-size: .84rem; line-height: 1.8; color: var(--ink-2); text-align: center; }
.cc-calc__offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.cc-calc__offer { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 3vw, 32px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg, 24px); }
.cc-calc__offer h3 { font-size: var(--t-xl); font-weight: 800; }
.cc-calc__offer ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; color: var(--ink-2); font-size: var(--t-md); }
.cc-calc__offer li { display: flex; gap: 8px; align-items: flex-start; }
.cc-calc__offer li .cx-ic { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--brand-700); }
.cc-calc__offer .cx-btn { justify-self: start; margin-top: 4px; }
@media (max-width: 760px) {
  .cc-calcp { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
  .cc-calcp__head p { font-size: var(--t-md); }
  .cc-calc__tab { min-height: 42px; padding-inline: 16px; font-size: var(--t-sm); }
  .cc-calc { grid-template-columns: minmax(0, 1fr); }
  .cc-calc__res { order: -1; gap: 14px; padding-block: 22px 26px; }
  .cc-calc__gauge { width: 172px; }
  .cc-calc__score strong { font-size: 3rem; }
  .cc-calc__ring { stroke-width: 8; }
  .cc-calc__row { grid-template-columns: 78px minmax(0, 1fr) 54px; gap: 10px; min-height: 50px; }
  .cc-calc__label { font-size: var(--t-sm); }
  .cc-calc__num { font-size: var(--t-md); }
  .cc-calc__panel { gap: 18px; }
  .cc-calc__step { width: 44px; height: 44px; }
  .cc-calc__row--big .cc-calc__num { font-size: 3rem; }
  @media (max-width: 360px) {
    .cc-calc__tabs { flex-wrap: nowrap; }
    .cc-calc__tab { padding-inline: 12px; white-space: nowrap; }
    .cc-calc__row { grid-template-columns: minmax(0, 1fr) 54px; gap: 0 10px; padding-block: 4px; }
    .cc-calc__label { grid-column: 1 / -1; }
    .cc-calc__step { width: 40px; height: 40px; }
  }
  .cc-calc__offers { grid-template-columns: minmax(0, 1fr); }
}

/* form controls and scrollbars stay light whatever theme the host or device uses */
html, body { color-scheme: light !important; }

/* ------------------------------------------------------------------
   the rest of the study area: dictionaries, essays, favourites, files,
   messages, class exams, player, profile, answer sheet (2026-11-01)
   ------------------------------------------------------------------ */
.zc-nav__badge[hidden], .cx-cart__count[hidden] { display: none; }
button.zc-mini { border: 0; font-family: inherit; cursor: pointer; }
main[data-zv] > *, main[data-zv] .zc-toolbar > * { min-width: 0; }
.zv-h { font: 800 var(--t-xl)/1.3 var(--f-display); }
.zv-gap { margin-top: 12px; }
.zv-ltr { text-align: left; }
.zv-none { padding: 28px 8px; text-align: center; color: var(--ink-3); }
.zv-backline { display: flex; }
.zv-linkbtn { border: 0; background: none; padding: 4px 2px; color: var(--brand-700); font: 600 var(--t-sm)/1.4 var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zv-linkbtn:hover { color: var(--ink); }
.zv-reset { text-align: center; }
.zv-danger { background: var(--bad); color: #fff; }
.zv-danger:hover { background: #BF3A35; }
.zv-ok { background: var(--ok); color: #fff; }
.zv-ok:hover { background: #0B8A5F; }
.zv-closed { display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 7vw, 80px) 22px; text-align: center; }
.zv-closed > .cx-ic { width: 34px; height: 34px; color: var(--ink-3); }
.zv-closed h1 { font: 800 var(--t-2xl)/1.3 var(--f-display); max-width: 24ch; }
.zv-closed p { color: var(--ink-2); }
.zv-empty { display: grid; justify-items: center; gap: 10px; padding: clamp(36px, 6vw, 64px) 22px; text-align: center; }
.zv-empty > .cx-ic { width: 32px; height: 32px; color: var(--brand); }
.zv-empty h2 { font: 800 var(--t-xl)/1.3 var(--f-display); }
.zv-empty p { max-width: 48ch; color: var(--ink-2); }
.zv-empty .cx-btn { margin-top: 6px; }

/* segmented control, same look as the site's tabs */
.zv-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 4px; border-radius: var(--r-pill); background: var(--bg-3); }
.zv-seg button, .zv-seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; transition: background .2s, color .2s; }
.zv-seg button:hover, .zv-seg a:hover { color: var(--ink); }
.zv-seg [aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 2px 10px rgba(21, 45, 67, .1); }
.zv-seg small { padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--ink-3); font-size: 11px; font-weight: 700; }
.zv-search { position: relative; flex: 1 1 240px; max-width: 380px; }
.zv-search > .cx-ic { position: absolute; top: 50%; inset-inline-start: 16px; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-3); pointer-events: none; }
.zv-search .cx-input { min-height: 46px; padding-block: 8px; padding-inline-start: 44px; border-radius: var(--r-pill); }

/* star */
.zv-star { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--bg-2); color: var(--ink-3); cursor: pointer; transition: background .2s, color .2s, transform .3s var(--ease); }
.zv-star:hover { transform: scale(1.06); color: var(--ink); }
.zv-star .cx-ic { width: 19px; height: 19px; }
.zv-star.is-on { background: #FFF4DA; color: #C98A00; }
.zv-star.is-on .cx-ic { fill: currentColor; }

/* question shown in a dialog */
.zv-dialog .zc-dialog__box { display: flex; flex-direction: column; max-height: calc(100svh - 32px); }
.zv-dialog--wide .zc-dialog__box { width: min(100%, 640px); }
.zv-dialog .zc-dialog__box > h2, .zv-dialog .zc-dialog__actions { flex: none; }
.zv-dialog__body { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding-block: 4px 8px; }
.zv-q { display: grid; gap: 14px; }
.zv-q__from { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; }
.zv-q__text { font-size: var(--t-lg); font-weight: 600; line-height: 1.6; color: var(--ink); }
.zv-q__opts { list-style: none; display: grid; gap: 6px; padding: 0; margin: 0; }
.zv-q__opts li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); }
.zv-q__opts i { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.zv-q__opts .cx-ic { flex: none; width: 16px; height: 16px; color: var(--ok); stroke-width: 3; }
.zv-q__opts .is-right { background: var(--ok-wash); font-weight: 600; }
.zv-q__sol { padding: 14px; border-radius: 14px; background: var(--ice); }
.zv-q__sol b { display: block; margin-bottom: 4px; font-family: var(--f-display); }
.zv-rowact { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* messages */
.zv-msgs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.zv-msgs__none { grid-column: 1 / -1; }
.zv-threads { list-style: none; display: grid; gap: 4px; padding: 10px; margin: 0; }
.zv-thread { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; transition: background .2s; }
.zv-thread:hover { background: var(--bg-2); }
.zv-thread.is-on { background: var(--ice); }
.zv-thread__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zv-thread__top b { font-weight: 700; }
.zv-thread__top em { padding: 2px 8px; border-radius: 999px; background: var(--brand-700); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.zv-thread__text { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.zv-thread small { color: var(--ink-3); font-size: var(--t-xs); }
.zv-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; }
.zv-chat--none { min-height: 320px; grid-template-rows: none; place-content: center; justify-items: center; color: var(--ink-3); }
.zv-chat--none .cx-ic { width: 30px; height: 30px; }
.zv-chat__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.zv-chat__head strong { display: block; font-weight: 700; }
.zv-chat__head small { color: var(--ink-3); font-size: var(--t-xs); }
.zv-chat__tools { display: inline-flex; gap: 6px; }
.zv-chat__head .zv-chat__back { display: none; }
.zv-chat__log { list-style: none; display: grid; gap: 12px; max-height: 46svh; min-height: 160px; align-content: start; overflow-y: auto; padding: 2px; margin: 0; }
.zv-chat__log li { display: grid; gap: 3px; max-width: 86%; }
.zv-chat__log p { padding: 11px 15px; border-radius: 18px; line-height: 1.6; }
.zv-chat__who { color: var(--ink-3); font-size: var(--t-xs); }
.zv-chat__log .is-them { justify-self: start; }
.zv-chat__log .is-them p { background: var(--bg-2); border-start-start-radius: 6px; }
.zv-chat__log .is-me { justify-self: end; text-align: end; }
.zv-chat__log .is-me p { background: var(--ink); color: #fff; border-start-end-radius: 6px; text-align: start; }
.zv-chat__typing p { color: var(--ink-3); }
.zv-chat__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.zv-chat__form .cx-textarea { min-height: 54px; }

/* essays */
.zv-essayrow .zc-state { margin-top: 6px; }
.zv-write { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); gap: 20px; align-items: start; }
.zv-write__main { display: grid; gap: 14px; }
.zv-write__main .zc-card__head { margin-bottom: 0; }
.zv-write__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zv-clock, .zv-count { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--bg-2); font-size: var(--t-sm); }
.zv-clock .cx-ic { width: 16px; height: 16px; }
.zv-clock b, .zv-count b { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.zv-clock.is-low { background: var(--bad-wash); color: var(--bad); }
.zv-prompt { padding: 14px 16px; border-radius: 14px; background: var(--ice); line-height: 1.7; font-weight: 500; }
.zv-editor { min-height: 340px; line-height: 1.8; }
.zv-write__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zv-write__tips { display: grid; gap: 12px; }
.zv-write__tips h2 { font: 800 var(--t-lg)/1.3 var(--f-display); }
.zv-write__tips ul { display: grid; gap: 8px; padding-inline-start: 18px; margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.zv-essay { display: grid; gap: 12px; line-height: 1.9; }
.zv-score { display: flex; align-items: baseline; gap: 6px; }
.zv-score b { font: 800 3rem/1 var(--f-display); color: var(--brand); }
.zv-score small { color: var(--ink-3); }
.zv-notes { display: grid; gap: 12px; margin: 0; }
.zv-notes dt { font-weight: 700; }
.zv-notes dd { margin: 2px 0 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }

/* class exams */
.zv-join form { display: grid; gap: 12px; }
.zv-code { max-width: 220px; letter-spacing: .4em; font: 800 var(--t-xl)/1 var(--f-display); text-align: center; }
.zv-hintcode { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--ice); font-size: var(--t-sm); }
.zv-steps { display: grid; gap: 10px; padding-inline-start: 18px; margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }
.zv-wait { display: grid; justify-items: center; gap: 12px; padding: clamp(36px, 6vw, 72px) 22px; text-align: center; }
.zv-wait__tag { padding: 5px 14px; border-radius: var(--r-pill); background: var(--ice); color: var(--brand-700); font-size: var(--t-sm); font-weight: 600; }
.zv-wait h1 { font: 800 var(--t-3xl)/1.2 var(--f-display); }
.zv-wait p { max-width: 54ch; color: var(--ink-2); }
.zv-wait__n { font: 800 clamp(3.4rem, 2rem + 6vw, 5.6rem)/1.1 var(--f-display); color: var(--brand); font-variant-numeric: tabular-nums; }
.zv-examhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; }
.zv-examhead strong { display: block; font-weight: 700; }
.zv-examhead small { color: var(--ink-3); font-size: var(--t-xs); }
.zv-qnav { display: flex; flex-wrap: wrap; gap: 6px; }
.zv-qnav .zc-chip.is-done { background: var(--ice); color: var(--brand-800); }
.zv-qnav .zc-chip.is-cur { background: var(--ink); color: #fff; box-shadow: none; }
.zv-classq { display: grid; gap: 16px; }
.zv-pick { display: grid; gap: 8px; }
.zv-pick__o { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background .2s, box-shadow .2s; }
.zv-pick__o:hover { background: var(--bg-2); }
.zv-pick__o.is-on { background: var(--ice); box-shadow: inset 0 0 0 2px var(--brand-700); font-weight: 600; }
.zv-pick__o input { width: 18px; height: 18px; accent-color: var(--brand-700); }
.zv-classq__foot { display: flex; justify-content: space-between; gap: 10px; }
.zv-perch { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; }
.zv-perch li { display: grid; gap: 2px; min-width: 76px; padding: 12px 10px; border-radius: 14px; background: var(--bg-2); text-align: center; }
.zv-perch b { font: 800 var(--t-xl)/1.1 var(--f-display); }
.zv-perch small { color: var(--ink-3); font-size: 11.5px; }
.zv-perch .ok { background: var(--ok-wash); color: var(--ok); }
.zv-perch .no { background: var(--bad-wash); color: var(--bad); }

/* lecture and video player */
.zv-watch { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, .9fr); gap: 20px; align-items: start; }
.zv-watch__main { display: grid; gap: 16px; min-width: 0; }
.zv-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px; background: var(--night); }
.zv-player img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .3s; }
.zv-player.is-playing img { opacity: 1; }
.zv-player__demo { position: absolute; top: 12px; inset-inline-end: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(17, 39, 61, .72); color: #fff; font-size: 11.5px; }
.zv-player__big { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; background: none; color: #fff; cursor: pointer; }
.zv-player__big[hidden] { display: none; }
.zv-player__big .cx-ic { box-sizing: content-box; width: 30px; height: 30px; padding: 22px; border-radius: 50%; background: var(--brand-700); transition: transform .3s var(--ease); }
.zv-player__big:hover .cx-ic { transform: scale(1.08); }
.zv-player__end { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; background: rgba(17, 39, 61, .92); color: #fff; text-align: center; }
.zv-player__end[hidden] { display: none; }
.zv-player__end b { font: 800 var(--t-xl)/1.4 var(--f-display); }
.zv-player__end p { color: var(--on-night-2); }
.zv-player__bar { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(17, 39, 61, .9), transparent); color: #fff; font-size: var(--t-xs); }
.zv-player__bar button { flex: none; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 12px/1 var(--f-body); cursor: pointer; }
.zv-player__bar button:hover { background: rgba(255, 255, 255, .28); }
.zv-player__bar .cx-ic { width: 16px; height: 16px; }
.zv-player__bar span { flex: none; font-variant-numeric: tabular-nums; }
.zv-player__bar input[type=range] { --fill: 0%; flex: 1; min-width: 40px; height: 4px; margin: 0; border-radius: 999px; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--brand) var(--fill), rgba(255, 255, 255, .3) var(--fill)); cursor: pointer; }
.zv-player__bar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.zv-player__bar input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.zv-watch__info { display: grid; gap: 14px; }
.zv-watch__info .zc-card__head { margin-bottom: 0; }
.zv-watch__info #p-done.is-on { background: var(--ok-wash); color: var(--ok); }
.zv-watch__block { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.zv-watch__block h2 { flex-basis: 100%; font: 700 var(--t-md)/1.3 var(--f-display); }
.zv-watch__list { display: grid; gap: 10px; padding: 16px; }
.zv-watch__list h2 { padding-inline: 6px; font: 800 var(--t-lg)/1.3 var(--f-display); }
.zv-watch__list ol { list-style: none; display: grid; gap: 2px; max-height: 58svh; overflow-y: auto; padding: 0; margin: 0; }
.zv-pl { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 12px; transition: background .2s; }
.zv-pl:hover { background: var(--bg-2); }
.zv-pl.is-on { background: var(--ice); }
.zv-pl__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-2); color: var(--ink-2); font: 700 var(--t-xs)/1 var(--f-display); }
.zv-pl.is-on .zv-pl__ic { background: var(--brand-700); color: #fff; }
.zv-pl__ic .cx-ic { width: 15px; height: 15px; }
.zv-pl b { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.4; }
.zv-pl small { color: var(--ink-3); font-size: var(--t-xs); }
.zv-pl.is-locked { opacity: .55; }

/* profile */
.zv-profile { display: grid; gap: 20px; }
.zv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; align-items: start; }
.zv-fields--one { grid-template-columns: minmax(0, 1fr); }
.zv-profile__save { display: flex; justify-content: flex-end; }

/* printed-exam answer sheet */
.zv-sheet__meter { max-width: none; }
.zv-sheet__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.zv-sheet__tab { display: grid; gap: 1px; min-width: 76px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); font: 700 var(--t-sm)/1.2 var(--f-body); color: var(--ink-2); cursor: pointer; }
.zv-sheet__tab small { color: var(--ink-3); font-size: 11px; font-weight: 600; }
.zv-sheet__tab.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.zv-sheet__tab.is-on small { color: var(--on-night-2); }
.zv-sheet__tab.is-full:not(.is-on) { background: var(--ok-wash); color: var(--ok); }
.zv-sheet { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; padding: 0; margin: 0; }
.zv-sheet__row { display: flex; align-items: center; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.zv-sheet__row > b { width: 24px; font-family: var(--f-display); text-align: center; }
.zv-sheet__row > div { display: flex; gap: 8px; }
.zv-bub { position: relative; cursor: pointer; }
.zv-bub input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.zv-bub span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); transition: background .15s, color .15s; }
.zv-bub:hover span { background: var(--bg-2); }
.zv-bub.is-on span { background: var(--brand-700); color: #fff; box-shadow: none; }
.zv-bub input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.zv-sheet__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* dictionaries */
.zv-dcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; transition: box-shadow .25s, transform .4s var(--ease); }
.zv-dcard:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); transform: translateY(-3px); }
.zv-dcard__art { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: var(--night); color: #fff; font: 800 2rem/1 var(--f-display); }
.zv-dcard__art--he { background: var(--ice); color: var(--brand); font-family: "Noto Sans Hebrew", var(--f-body); font-weight: 700; }
.zv-dcard strong { display: block; font: 800 var(--t-xl)/1.3 var(--f-display); }
.zv-dcard small { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-sm); }
.zv-dcard__go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; }
.zv-dcard__go .cx-ic { width: 17px; height: 17px; }
.zv-dtools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.zv-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.zv-filter button, .zv-radio span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; transition: background .2s, color .2s; }
.zv-filter button:hover, .zv-radio:hover span { background: var(--bg-3); color: var(--ink); }
.zv-filter button[aria-pressed="true"], .zv-radio input:checked + span { background: var(--ink); color: #fff; }
.zv-radio { position: relative; cursor: pointer; }
.zv-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.zv-radio input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.zv-letters { display: flex; flex-wrap: wrap; gap: 4px; padding-block: 10px; border-block: 1px solid var(--line); }
.zv-letters button { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 700 var(--t-sm)/1 var(--f-body); cursor: pointer; }
.zv-letters [lang="he"] button, .zv-letters[lang="he"] button { font-family: "Noto Sans Hebrew", var(--f-body); }
.zv-letters button:hover { background: var(--bg-2); }
.zv-letters button[aria-pressed="true"] { background: var(--brand-700); color: #fff; }
.zv-dcount { padding-block: 10px 2px; }
.zv-words { list-style: none; display: grid; padding: 0; margin: 0; }
.zv-word { display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.5fr) 92px 44px; gap: 14px; align-items: center; padding: 8px 0; }
.zv-word + .zv-word { border-top: 1px solid var(--line); }
.zv-word--nobars { grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.5fr) 92px; }
.zv-word--head { padding: 8px 0 6px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; }
.zv-word__w { font-size: var(--t-lg); font-weight: 700; }
.zv-word__w[lang="he"] { font-family: "Noto Sans Hebrew", var(--f-body); }
.zv-word__w[lang="en"] { text-align: right; }
.zv-word__m { color: var(--ink); font-size: 1.05rem; line-height: 1.6; }
/* difficulty: the old dictionary's blue hands, redrawn so they stay sharp on phones */
.zv-dots { display: inline-flex; align-items: center; gap: 2px; }
.zv-dots i { flex: none; width: 13px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22'%3E%3Cpath fill='%23CDD5DF' d='M0 7.4V3.6C0 2.4 1.6 2.3 1.8 3.5L2.4 6.6 3.4 6.4 4.3 1.2C4.5-.2 6.2-.2 6.2 1.2L6.1 5.6 7.2 5.7 9.4 1.5C10 .4 11.4 1 11 2.2L9.4 6.9C11.6 7.6 13.6 9.2 14.4 11.2 14.9 12.6 13.4 13.5 12.6 12.4 11.6 11.1 10.3 10.6 9 10.6 6.9 10.6 5.4 12.2 5.4 14 5.4 15.9 7 17.3 9 17.3 10.3 17.3 11.5 16.8 12.5 15.7 13.4 14.7 14.9 15.7 14.2 17 12.9 19.9 10.4 21.8 7.6 21.8 3.4 21.8 0 18.4 0 14.2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.zv-dots i.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22'%3E%3Cpath fill='%232B9CD8' d='M0 7.4V3.6C0 2.4 1.6 2.3 1.8 3.5L2.4 6.6 3.4 6.4 4.3 1.2C4.5-.2 6.2-.2 6.2 1.2L6.1 5.6 7.2 5.7 9.4 1.5C10 .4 11.4 1 11 2.2L9.4 6.9C11.6 7.6 13.6 9.2 14.4 11.2 14.9 12.6 13.4 13.5 12.6 12.4 11.6 11.1 10.3 10.6 9 10.6 6.9 10.6 5.4 12.2 5.4 14 5.4 15.9 7 17.3 9 17.3 10.3 17.3 11.5 16.8 12.5 15.7 13.4 14.7 14.9 15.7 14.2 17 12.9 19.9 10.4 21.8 7.6 21.8 3.4 21.8 0 18.4 0 14.2Z'/%3E%3C/svg%3E"); }
/* the Hebrew dictionaries have no prevalence data, so their one scale carries the colour: easy, medium, hard */
.zv-dots--1 i.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22'%3E%3Cpath fill='%2358B100' d='M0 7.4V3.6C0 2.4 1.6 2.3 1.8 3.5L2.4 6.6 3.4 6.4 4.3 1.2C4.5-.2 6.2-.2 6.2 1.2L6.1 5.6 7.2 5.7 9.4 1.5C10 .4 11.4 1 11 2.2L9.4 6.9C11.6 7.6 13.6 9.2 14.4 11.2 14.9 12.6 13.4 13.5 12.6 12.4 11.6 11.1 10.3 10.6 9 10.6 6.9 10.6 5.4 12.2 5.4 14 5.4 15.9 7 17.3 9 17.3 10.3 17.3 11.5 16.8 12.5 15.7 13.4 14.7 14.9 15.7 14.2 17 12.9 19.9 10.4 21.8 7.6 21.8 3.4 21.8 0 18.4 0 14.2Z'/%3E%3C/svg%3E"); }
.zv-dots--2 i.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22'%3E%3Cpath fill='%23FFA500' d='M0 7.4V3.6C0 2.4 1.6 2.3 1.8 3.5L2.4 6.6 3.4 6.4 4.3 1.2C4.5-.2 6.2-.2 6.2 1.2L6.1 5.6 7.2 5.7 9.4 1.5C10 .4 11.4 1 11 2.2L9.4 6.9C11.6 7.6 13.6 9.2 14.4 11.2 14.9 12.6 13.4 13.5 12.6 12.4 11.6 11.1 10.3 10.6 9 10.6 6.9 10.6 5.4 12.2 5.4 14 5.4 15.9 7 17.3 9 17.3 10.3 17.3 11.5 16.8 12.5 15.7 13.4 14.7 14.9 15.7 14.2 17 12.9 19.9 10.4 21.8 7.6 21.8 3.4 21.8 0 18.4 0 14.2Z'/%3E%3C/svg%3E"); }
.zv-dots--3 i.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22'%3E%3Cpath fill='%23EB0000' d='M0 7.4V3.6C0 2.4 1.6 2.3 1.8 3.5L2.4 6.6 3.4 6.4 4.3 1.2C4.5-.2 6.2-.2 6.2 1.2L6.1 5.6 7.2 5.7 9.4 1.5C10 .4 11.4 1 11 2.2L9.4 6.9C11.6 7.6 13.6 9.2 14.4 11.2 14.9 12.6 13.4 13.5 12.6 12.4 11.6 11.1 10.3 10.6 9 10.6 6.9 10.6 5.4 12.2 5.4 14 5.4 15.9 7 17.3 9 17.3 10.3 17.3 11.5 16.8 12.5 15.7 13.4 14.7 14.9 15.7 14.2 17 12.9 19.9 10.4 21.8 7.6 21.8 3.4 21.8 0 18.4 0 14.2Z'/%3E%3C/svg%3E"); }
.zv-dots small { margin-inline-start: 6px; color: var(--ink-2); font-size: var(--t-sm); white-space: nowrap; }
/* prevalence: the old dictionary's colours and meanings. Red only ever means "rarely appears", so difficulty stays blue */
.zv-prev { display: inline-flex; align-items: center; gap: 6px; }
.zv-prev i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgba(21, 45, 67, .14); }
.zv-prev small { color: var(--ink-2); font-size: var(--t-sm); white-space: nowrap; }
.zv-prev--1 i { background: #15A8ED; }
.zv-prev--2 i { background: #EB0000; }
.zv-prev--3 i { background: #FFA500; }
.zv-prev--4 i { background: #F7EF13; }
.zv-prev--5 i { background: #58B100; }
/* rows out of view skip layout and paint, which keeps a long list smooth while scrolling */
.zv-words > .zv-word { content-visibility: auto; contain-intrinsic-size: auto 54px; }
/* dictionary table on wider screens: lines between the columns, as in the old dictionary. Phones keep the stacked rows. */
@media (min-width: 761px) {
  .zv-word { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.25fr) 140px 92px; gap: 0; align-items: stretch; padding: 0; }
  .zv-word--nobars { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.25fr) 124px; }
  .zv-word + .zv-word { border-top-color: var(--line-2); }
  .zv-words { border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 12px 12px; }
  .zv-word--head { margin-top: 14px; padding: 0; border: 1px solid var(--ink); border-radius: 12px 12px 0 0; background: var(--ink); color: #fff; font-size: var(--t-sm); }
  .zv-word--head > span { padding: 9px 12px; }
  .zv-word--head > span:nth-child(n+3), .zv-word__m, .zv-word > .zv-dots, .zv-word > .zv-prev { border-inline-start: 1px solid var(--line-2); }
  .zv-word--head > span:nth-child(n+3) { border-inline-start-color: rgba(255, 255, 255, .28); }
  .zv-word--head > span:nth-child(n+4) { padding-inline: 6px; text-align: center; }
  .zv-word > .zv-star { align-self: center; justify-self: end; margin-block: 8px; }
  .zv-word__cell { align-content: center; padding: 8px 12px; }
  .zv-word__m { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; }
  .zv-word > .zv-dots, .zv-word > .zv-prev { justify-content: flex-start; padding-inline-start: 10px; }
  .zv-word > .zv-prev { padding-inline-start: 14px; }
  .zv-word--nobars > .zv-dots { padding-inline-start: 18px; }
  [data-cc-words]:has([data-dict-none]:not([hidden])) .zv-word--head, [data-cc-words]:has([data-dict-none]:not([hidden])) .zv-words { display: none; }
}
.zv-more { display: flex; justify-content: center; padding-top: 14px; }
.zv-psetup form { display: grid; gap: 22px; justify-items: start; }
.zv-psetup fieldset { display: grid; gap: 10px; min-width: 0; width: 100%; padding: 0; margin: 0; border: 0; }
.zv-psetup legend { padding: 0; margin-bottom: 10px; font: 700 var(--t-md)/1.3 var(--f-display); }
.zv-psetup .zv-letters { margin-top: 10px; }
.zv-psetup .zv-letters[hidden] { display: none; }
.zv-err { color: var(--bad); font-size: var(--t-sm); }
.zv-flash { display: grid; gap: 14px; justify-items: stretch; text-align: center; }
.zv-flash__top { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-sm); }
.zv-flash .zc-meter { max-width: none; }
.zv-flash__score b.ok { color: var(--ok); } .zv-flash__score b.no { color: var(--bad); }
.zv-flash__word { padding-top: clamp(18px, 4vw, 40px); font: 800 clamp(2.4rem, 1.6rem + 3vw, 4rem)/1.2 var(--f-display); overflow-wrap: anywhere; }
.zv-flash__word[lang="he"] { font-family: "Noto Sans Hebrew", var(--f-body); font-weight: 700; }
.zv-flash__mean { min-height: 60px; display: grid; place-items: center; padding-bottom: 8px; font-size: var(--t-xl); font-weight: 600; color: var(--brand-700); }
.zv-flash__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.zv-flash__sub { display: flex; justify-content: center; gap: 22px; }
.zv-flash .zv-perch { justify-content: center; }
.zv-left { text-align: start; }
.zv-left h3 { margin-bottom: 6px; font: 700 var(--t-md)/1.3 var(--f-display); }
.zv-flash > .cx-btn { justify-self: center; }

/* solutions screen: add to favourites */
.nx-fav { display: inline-flex; justify-self: start; width: fit-content; align-items: center; gap: 6px; margin-block: 8px; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: 600 13px/1 var(--f-body); cursor: pointer; }
.nx-fav:hover { border-color: var(--ink); }
.nx-fav.is-on { background: #FFF4DA; border-color: #E6B84A; color: #8A5E00; }
.nx-fav svg { width: 15px; height: 15px; }
.nx-fav.is-on svg { fill: currentColor; }

/* checkout */
.zv-co__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 22px; }
.zv-co__steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; }
.zv-co__steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-3); font-size: 12px; }
.zv-co__steps .is-done { background: var(--ice); color: var(--brand-700); }
.zv-co__steps .is-done b { background: var(--brand-700); color: #fff; }
.zv-co__steps .is-on { background: var(--ink); color: #fff; }
.zv-co__steps .is-on b { background: var(--brand); color: var(--ink); }
.zv-co__form { display: grid; gap: 18px; }
.zv-co__box { display: grid; gap: 14px; padding: 22px; border-radius: 22px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.zv-co__box h2 { font: 800 var(--t-lg)/1.3 var(--f-display); }
.zv-co__pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.zv-co__rows { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.zv-co__rows li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-sm); }
.zv-co__rows .is-off { color: var(--ok); font-weight: 600; }
.zv-co__coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.zv-co__coupon .cx-input { min-height: 46px; padding-block: 8px; }
.zv-co__msg { min-height: 1.4em; font-size: var(--t-xs); }
.zv-co__msg.is-ok { color: var(--ok); } .zv-co__msg.is-bad { color: var(--bad); }
.zv-co__wait { display: grid; justify-items: center; gap: 14px; padding: clamp(40px, 7vw, 80px) 16px; text-align: center; }
.zv-co__wait h2 { font: 800 var(--t-2xl)/1.3 var(--f-display); }
.zv-co__wait p { max-width: 52ch; color: var(--ink-2); }
.zv-co__spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--bg-3); border-top-color: var(--brand); animation: zv-spin .9s linear infinite; }
.zv-co__ok { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--ok-wash); color: var(--ok); }
.zv-co__ok .cx-ic { width: 34px; height: 34px; stroke-width: 2.6; }
@keyframes zv-spin { to { transform: rotate(360deg); } }

/* the design-pages control stays out of the way: a small dot until it is hovered or opened */
.dp { left: 78px; right: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: none; }
.dp__btn { padding: 11px; gap: 0; transition: padding .3s var(--ease), gap .3s var(--ease); }
.dp__btn span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s var(--ease), opacity .25s; }
.dp__btn:hover, .dp__btn:focus-visible, .dp.is-open .dp__btn { padding: 10px 18px; gap: 10px; }
.dp__btn:hover span, .dp__btn:focus-visible span, .dp.is-open .dp__btn span { max-width: 240px; opacity: 1; }
.dp__panel { left: 0; right: auto; transform: none; max-height: min(70svh, 560px); overflow-y: auto; }

@media (max-width: 1040px) {
  .zv-msgs, .zv-write, .zv-watch { grid-template-columns: minmax(0, 1fr); }
  .zv-msgs.has-open .zv-threads { display: none; }
  .zv-msgs:not(.has-open) .zv-chat { display: none; }
  .zv-chat__head .zv-chat__back { display: inline-flex; }
  .zv-watch__list ol { max-height: none; }
  .dp { left: 72px; }
}
@media (max-width: 760px) {
  .zv-seg { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: 16px; scrollbar-width: none; }
  .zv-seg::-webkit-scrollbar { display: none; }
  .zv-seg button, .zv-seg a { flex: none; padding: 0 14px; }
  .zv-search { max-width: none; flex-basis: 100%; }
  .zv-word, .zv-word--nobars { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 4px 12px; }
  .zv-word--head { display: none; }
  .zv-word .zv-star { grid-column: 1; grid-row: 1 / 3; }
  .zv-word__w, .zv-word__cell { grid-column: 2; grid-row: 1; }
  .zv-word__m { grid-column: 2; grid-row: 2; }
  .zv-word--nobars .zv-word__m { grid-column: 2 / -1; }
  .zv-dots { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; padding-top: 4px; }
  .zv-dots small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zv-prev { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; padding-top: 6px; }
  .zv-dcard { grid-template-columns: auto minmax(0, 1fr); }
  .zv-dcard__art { width: 64px; height: 64px; font-size: 1.5rem; }
  .zv-dcard__go { display: none; }
  .zv-sheet { grid-template-columns: minmax(0, 1fr); }
  .zv-chat__form { grid-template-columns: minmax(0, 1fr); }
  .zv-chat__log { max-height: 52svh; }
  .zv-rowact .zc-mini { height: 36px; padding: 0 10px; font-size: var(--t-xs); }
  .zc-row.zv-essayrow { grid-template-columns: 42px minmax(0, 1fr); }
  .zc-row.zv-essayrow > .zc-mini { grid-column: 2; width: fit-content; }
  .zv-player { border-radius: 14px; }
  .zv-player__demo { font-size: 11.5px; }
  .zv-player__bar { gap: 5px; padding: 18px 8px 6px; }
  .zv-player__bar button { min-width: 30px; height: 30px; padding: 0 4px; font-size: 12px; }
  .zv-player__big .cx-ic { width: 22px; height: 22px; padding: 16px; }
  .zv-player__bar span { font-size: 11.5px; }
  .zv-profile__save .cx-btn { width: 100%; }
  .dp { display: none; }
  main[data-zv="favorites"] .zc-row { grid-template-columns: 42px minmax(0, 1fr); }
  main[data-zv="favorites"] .zc-row > .zc-mini { grid-column: 2; width: fit-content; }
}

/* ------------------------------------------------------------------
   real site additions (live data states the mockup did not have)
   ------------------------------------------------------------------ */
.cc-note { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; font-size: var(--t-sm); }
.cc-note--ok { background: var(--ok-wash); color: var(--ok); }
.cc-note--bad { background: var(--bad-wash); color: var(--bad); }
.cc-renew { margin-top: 12px; }
.cc-renew summary { width: fit-content; list-style: none; cursor: pointer; }
.cc-renew summary::-webkit-details-marker { display: none; }
.cx-btn--yellow { background: #EFC926; color: #1B2D3B; font-weight: 700; }
.cx-btn--yellow:hover { background: #F5DB5F; }
.cc-renew > div { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--bg-2); font-size: var(--t-sm); }
.cc-renew .renewal-offer-note { margin: 0 0 12px; }
.cc-renew ul { padding: 0 !important; margin: 0; list-style: none; display: grid; gap: 8px; justify-items: start; }
/* !important: the live partial sets 5px inline on each item */
.cc-renew li { padding: 0 !important; }
/* each price is the real renewal link, so it is a filled button; the "renew" pill above it only opens this box */
.cc-renew a { display: inline-block; max-width: 100%; padding: 12px 22px; border-radius: var(--r-pill); background: var(--brand-700); color: #fff; font-weight: 700; line-height: 1.4; text-align: center; box-shadow: 0 10px 24px -12px rgba(15, 108, 168, .8); transition: background .2s, transform .2s; }
.cc-renew a:hover { background: var(--brand-800); color: #fff; transform: translateY(-1px); }
.cc-renew a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cc-renew a del { color: var(--ice); font-weight: 500; }
@media (max-width: 760px) { .cc-renew ul { justify-items: stretch; } .cc-renew a { display: block; } }
.cc-reset-line { margin-top: 14px; font-size: var(--t-xs); }
.cc-reset-line a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.cx-pkg__keys:empty { display: none; }
.zc-news img { max-width: 100%; height: auto; }

/* messages: the text may hold its own paragraphs, so the bubble is a box and not a <p> */
.zv-chat__body { padding: 11px 15px; border-radius: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.zv-chat__body p { margin: 0 0 6px; padding: 0; background: none !important; color: inherit !important; }
.zv-chat__body p:last-child { margin-bottom: 0; }
.zv-chat__body img { max-width: 100%; height: auto; }
.zv-chat__log .is-them .zv-chat__body { background: var(--bg-2); border-start-start-radius: 6px; }
.zv-chat__log .is-me .zv-chat__body { background: var(--ink); color: #fff; border-start-end-radius: 6px; text-align: start; }
.zv-chat__new { padding: 1px 7px; border-radius: 999px; background: var(--brand-700); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.zv-chat__who .zv-linkbtn { font-size: inherit; }

/* class exam: the live script builds this markup, in the design's language */
.cc-classexam { padding: 0; background: none; color: inherit; line-height: inherit; text-align: start; }
.cc-classexam h1 { margin: 0; font: inherit; color: inherit; }
.cc-classexam .zc-head h1 { font: 800 var(--t-2xl, 32px)/1.2 var(--f-display); }
.cc-classexam .zv-wait h1 { font: 800 var(--t-xl)/1.3 var(--f-display); }
.cc-classexam p { font-size: inherit; line-height: inherit; }
.cc-classexam .class-exam-clockbar { position: sticky; top: 76px; z-index: 20; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-1, 0 4px 16px rgba(20, 40, 60, .06)); }
.cc-classexam .class-exam-clockbar strong { display: block; font-weight: 700; }
.cc-classexam .class-exam-clockbar small { color: var(--ink-3); font-size: var(--t-xs); }
.cc-classexam .class-exam-clockbar > .zv-clock b { font-variant-numeric: tabular-nums; }
.cc-classexam .class-exam-clock-urgent .zv-clock { background: var(--bad-wash); color: var(--bad); }
.cc-classexam .class-exam-notice { margin-bottom: 16px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--bad-wash); color: var(--bad); font-size: var(--t-sm); }
.cc-classexam .class-exam-chapter { margin-bottom: 28px; }
.cc-classexam .class-exam-chapter-title { margin: 0 0 16px; padding: 0; border: 0; font: 800 var(--t-xl)/1.3 var(--f-display); color: var(--ink); }
.cc-classexam .class-exam-question { margin: 0 0 16px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.cc-classexam .class-exam-question legend { padding: 0; font-size: var(--t-sm); font-weight: 700; color: var(--brand-700); }
.cc-classexam .class-exam-richtext { color: var(--ink); font-size: var(--t-base, 16px); line-height: 1.8; }
.cc-classexam .class-exam-appendix { padding: 14px 16px; border: 0; border-radius: 14px; background: var(--bg-2); }
.cc-classexam .class-exam-video { border-radius: 14px; background: var(--ice); }
.cc-classexam .class-exam-video a { color: var(--brand-700); }
.cc-classexam .class-exam-answer { align-items: center; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s; }
.cc-classexam .class-exam-answer:hover { border-color: var(--brand); background: var(--bg-2); }
.cc-classexam .class-exam-answer:has(input:checked) { border-color: var(--brand-700); background: var(--ice); }
.cc-classexam .class-exam-answer input[type=radio] { margin: 0; accent-color: var(--brand-700); }
.cc-classexam .class-exam-answer-number { display: grid; place-items: center; margin: 0; background: var(--bg-2); font: 700 13px/1 var(--f-body); }
.cc-classexam input.class-exam-fill, .cc-classexam textarea.class-exam-essay-input { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; font-size: var(--t-base, 16px); }
.cc-classexam input.class-exam-fill:focus, .cc-classexam textarea.class-exam-essay-input:focus { border-color: var(--brand-700); outline: none; }
.cc-classexam .class-exam-submit-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.cc-classexam .class-exam-submit-bar p { margin: 0; }
.cc-classexam .zv-wait__n:empty { display: none; }

/* dictionaries: letters and sort headings are real links, and rows carry the live dictionary's extra forms */
.zv-letters a { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; color: var(--ink-2); font: 700 var(--t-sm)/1 var(--f-body); }
.zv-letters[lang="he"] a { font-family: "Noto Sans Hebrew", var(--f-body); }
.zv-letters a:hover { background: var(--bg-2); }
.zv-letters a[aria-current] { background: var(--brand-700); color: #fff; }
.zv-letters button:disabled { opacity: .35; cursor: not-allowed; }
.zv-letters--pick { gap: 6px; }
.zv-letters--pick .zv-radio span { min-width: 38px; justify-content: center; min-height: 36px; padding: 0 8px; }
.zv-letters--pick[lang="he"] .zv-radio span { font-family: "Noto Sans Hebrew", var(--f-body); }
.zv-letters--pick input:disabled + span { opacity: .35; cursor: not-allowed; }
.zv-word--head a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.zv-word[hidden] { display: none; }
.zv-word__cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.zv-word__root { width: 100%; color: var(--ink-3); font-size: var(--t-xs); font-family: "Noto Sans Hebrew", var(--f-body); }
.zv-word__tip { padding: 1px 8px; border-radius: 999px; background: var(--ice); color: var(--brand-700); font-size: 11px; font-weight: 600; cursor: help; }
.zv-means { padding: 0; margin: 0; list-style: decimal inside; }
.zv-forms { display: grid; gap: 2px; padding: 0; margin: 6px 0 0; list-style: none; font-size: var(--t-sm); color: var(--ink-2); }
.zv-forms[hidden] { display: none; }
.zv-forms b { color: var(--ink); font-weight: 600; }
.zv-forms b[lang="he"] { font-family: "Noto Sans Hebrew", var(--f-body); }
.zv-forms small { color: var(--brand-700); font-family: "Noto Sans Hebrew", var(--f-body); }
.zv-dtabs { margin-block: 14px 4px; }
.zv-star.favorited { background: #FFF4DA; color: #C98A00; }
.zv-star.favorited .cx-ic { fill: currentColor; }
.zv-flash__starline { display: flex; justify-content: center; }
.zv-flash__mean p { margin: 0; }
.zv-flash form { display: grid; gap: 14px; }
.zv-flash__top { align-items: center; }

/* account pages: the design's login window, standing on its own page */
.cc-auth { min-height: 70svh; padding-top: calc(124px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(48px, 7vw, 96px); background: var(--bg); }
.cc-auth .cx-container { display: grid; gap: 16px; justify-items: center; }
.cc-auth .cx-modal__box { opacity: 1; transform: none; max-height: none; overflow: hidden; }
.cc-auth > .cx-container > .cc-note { width: min(100%, 920px); margin: 0; }
.cc-auth__one { display: grid; gap: 16px; width: min(100%, 480px); padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.cc-auth__one--wide { width: min(100%, 820px); }
.cc-auth__one--center { justify-items: center; text-align: center; }
.cc-auth__one h1 { font-size: var(--t-2xl); }
.cc-auth__one .cc-note { width: 100%; margin: 0; }
.cc-auth__one .cx-logo { width: fit-content; }
.cc-auth__icon { width: 64px; height: 64px; border-radius: 20px; }
.cc-auth__muted { color: var(--ink-3); font-size: var(--t-sm); }
.cc-auth__scroll { max-height: 46svh; overflow-y: auto; padding: 16px; border-radius: 14px; background: var(--bg-2); }
.cc-article { padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: #fff; overflow-wrap: anywhere; }
.cc-article img, .cc-article iframe, .cc-article video { max-width: 100%; }
.cc-article img { height: auto; }
.cx-faq__nav a[role="tab"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-invite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cc-invite .cx-input { flex: 1 1 200px; max-width: 280px; text-align: center; font-weight: 700; letter-spacing: .08em; }
.cx-faq__nav a[role="tab"] { padding: 13px 16px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 600; }
.cx-faq__nav a[role="tab"]:hover, .cx-faq__nav a[role="tab"][aria-selected="true"] { color: var(--ink); background: var(--bg-2); }

/* package pages and cart */
.cc-was { margin: 0; color: var(--ink-3); font-size: var(--t-sm); }
.cc-was[hidden] { display: none; }
.cc-was-inline { margin-inline-end: 4px; color: var(--ink-3); font-size: .7em; font-weight: 600; }
.cc-was-inline[hidden] { display: none; }
.cx-plan__foot .cc-note { margin: 0; }
.cc-yt { position: relative; overflow: hidden; border-radius: var(--r-lg, 24px); background: var(--ink); }
.cc-yt button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cc-yt img { display: block; width: 100%; height: auto; object-fit: cover; }
.cc-yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.cc-yt__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.cc-yt__play .cx-ic { width: 72px; height: 72px; padding: 22px; border-radius: 50%; background: rgba(17, 39, 61, .72); fill: currentColor; }
.cc-more [hidden] { display: none; }
.cc-cart__tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.cc-pay { max-width: 640px; margin: clamp(22px, 3vw, 36px) auto 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.cc-cart [data-payment-message] { text-align: center; }
.cc-calc__offer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(16px, 2vw, 28px); }
.cc-calc__omedia { flex: 1 1 200px; max-width: 240px; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #F4F8FB; }
.cc-calc__omedia img { display: block; width: 100%; height: auto; }
.cc-calc__obody { flex: 999 1 260px; min-width: 0; display: grid; gap: 14px; align-content: start; }
.cc-calc__ofeats { display: grid; gap: 6px; color: var(--ink-2); font-size: var(--t-sm); }
.cc-calc__ofeats p { display: flex; gap: 8px; margin: 0; }
.cc-calc__ofeats img { display: none; }
.cc-tick::before { content: "✓"; color: var(--brand-700); font-style: normal; font-weight: 700; }
.zv-dialog [data-open-login] { font-weight: 700; }

/* lectures and videos */
.cc-rowacts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zc-lib__row[hidden] { display: none; }
.cc-player { aspect-ratio: auto; background: none; overflow: visible; border-radius: 0; }
.cc-player .contratest-video-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px; background: var(--night, #11273d); }
.cc-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cc-player .alert { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--bad-wash); color: var(--bad); }
.cc-rich { overflow-wrap: anywhere; }
.cc-rich img, .cc-rich iframe, .cc-rich video { max-width: 100%; }
.cc-rich img { height: auto; }
.cc-rich ul, .cc-rich ol, .cc-classexam .class-exam-richtext ul, .cc-classexam .class-exam-richtext ol, .cc-ads__desc ol { padding-inline-start: 1.5em; }
.zv-pl.is-done .zv-pl__ic { background: var(--ok-wash); color: var(--ok); }
.cc-files--side { gap: 8px; }
.cc-files--side .cx-file { padding: 10px 12px; }
.zc-chap__actions small { flex-basis: 100%; font-size: var(--t-xs); }

/* statistics */
.cc-plain { font-style: normal; }
.cc-seg-gap { margin-bottom: 18px; }
.cc-chart-tabs { margin-bottom: 14px; }
.cc-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cc-filter { display: grid; gap: 10px; min-width: 0; padding: 0; margin: 0 0 16px; border: 0; }
.cc-filter legend { padding: 0; margin-bottom: 10px; font: 700 var(--t-md)/1.3 var(--f-display); }
.cc-filter__more summary, .cc-filter__leafs > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--brand-700); font-size: var(--t-sm); font-weight: 600; }
.cc-filter__more summary::-webkit-details-marker, .cc-filter__leafs > summary::-webkit-details-marker { display: none; }
.cc-filter__more .cx-ic { width: 14px; height: 14px; }
.cc-filter__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--bg-2); }
.cc-filter__group { display: grid; gap: 8px; align-content: start; }
.cc-filter__leafs { display: grid; gap: 6px; }
.cc-filter__leafs > .cx-check { margin-inline-start: 22px; display: flex; margin-top: 6px; }
.cc-filter__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cc-pct { display: grid; gap: 4px; min-width: 90px; }
.cc-pct .zc-meter { height: 6px; }
.cc-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.cc-mark .cx-ic { width: 14px; height: 14px; }
.cc-mark.is-ok { background: var(--ok-wash); color: var(--ok); }
.cc-mark.is-no { background: var(--bad-wash); color: var(--bad); }
.cc-qtable td.cc-rich { max-width: 360px; }
.cc-qtable td.cc-rich img { max-height: 90px; width: auto; }
.cc-review { display: grid; gap: 12px; }
.cc-review .zc-card__head { margin-bottom: 0; }
.cc-review__more summary { cursor: pointer; color: var(--brand-700); font-weight: 600; font-size: var(--t-sm); }
.cc-review__more > div { margin-top: 10px; }
.cc-review__answer { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); }
.cc-examples { margin-top: 12px; }
.zc-score + .zc-score, main > .zc-score { margin-block: 0; }

/* scores and question maps */
.cc-score { gap: 16px; }
.cc-qmap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cc-qmap .zc-chip { display: inline-grid; place-items: center; }
.zc-chip.is-right { background: var(--ok-wash); color: var(--ok); border-color: transparent; }
.zc-chip.is-wrong { background: var(--bad-wash); color: var(--bad); border-color: transparent; }
.cc-vq { border: 1px solid var(--line); }
.cc-vq legend { float: none; padding: 0; }
.cc-vq__word { font: 800 var(--t-lg)/1.3 var(--f-display); color: var(--ink); }
.zv-essayrow .cc-examples { margin-top: 8px; }
.zv-essayrow .zc-state { display: inline-flex; }

/* ---------------------------------- the solving screen (chapters, sets, review) */
.cc-solve main .quetionbank { background: none; border: 0; padding: 0; }
.cc-solve main .quetionlistindex { margin: 0 0 16px; padding: 0; background: none; border: 0; }
.cc-solve main .quetionlistindex ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.cc-solve main .quetionlistindex ul li { position: relative; display: block; width: 40px; height: 40px; margin: 0; border-radius: 50%; background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line-2); line-height: 40px; text-align: center; font-weight: 700; font-size: var(--t-sm); transition: background .2s; }
.cc-solve main .quetionlistindex ul li a { display: block; color: var(--ink-2) !important; font-size: var(--t-sm); }
.cc-solve main .quetionlistindex ul li:hover { background: var(--bg-3) !important; }
.cc-solve main .quetionlistindex ul li.rightchoice { background: var(--ice) !important; box-shadow: inset 0 0 0 1px var(--brand); }
.cc-solve main .quetionlistindex ul li.rightchoice a { color: var(--brand-800) !important; }
.cc-solve main .quetionlistindex ul li.active, .cc-solve main .quetionlistindex ul li.current { background: var(--ink) !important; box-shadow: none; }
.cc-solve main .quetionlistindex ul li.active a, .cc-solve main .quetionlistindex ul li.current a { color: #fff !important; }
.cc-solve main .quetionlistindex ul li.correct_ans { background: var(--ok-wash) !important; box-shadow: inset 0 0 0 1px var(--ok); }
.cc-solve main .quetionlistindex ul li.correct_ans a { color: var(--ok) !important; }
.cc-solve main .quetionlistindex ul li.wrong_ans { background: var(--bad-wash) !important; box-shadow: inset 0 0 0 1px var(--bad); }
.cc-solve main .quetionlistindex ul li.wrong_ans a { color: var(--bad) !important; }
.cc-solve main .quetionlistindex ul li.xchoice::before, .cc-solve main .quetionlistindex ul li.marked::before { background-color: #E8A33D; }

.cc-solve main .quetionboard { margin: 0; padding: clamp(16px, 2.4vw, 28px); border: 0 !important; border-radius: 26px; background: var(--bg) !important; box-shadow: 0 0 0 1px var(--line); }
.cc-solve main .quetionboardheading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); background: none !important; }
.cc-solve main :is(.qbh-right, .qbh-left, .qbh-center) { float: none; width: auto; margin: 0; padding: 0; background: none; border: 0; }
.cc-solve main .qbh-right :is(h2, h3, h4, p) { margin: 0; font: 800 var(--t-lg)/1.3 var(--f-display) !important; color: var(--ink) !important; }
.cc-solve main .qbh-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-solve main .qbh-left ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cc-solve main .qbh-left li { margin: 0; padding: 0; border: 0; background: none; float: none; }
.cc-solve main .qb-timer { display: inline-flex; min-width: 0; height: auto; padding: 6px 16px; border: 0; border-radius: var(--r-pill); background: var(--bg-2) !important; box-shadow: none; color: var(--ink); font: 800 var(--t-lg)/1.3 var(--f-display) !important; font-variant-numeric: tabular-nums; }
.cc-solve main .favorits { display: inline-grid; place-items: center; width: 42px; height: 42px; margin: 0; border-radius: 12px; background: var(--bg-2); color: var(--ink-3); cursor: pointer; }
.cc-solve main .favorits.favorited, .cc-solve main .favorited .fa-star { background: #FFF4DA; color: #C98A00; }

.cc-solve main .quemain { padding: 0; }
.cc-solve main .question-container { float: none; width: 100%; padding: 0; }
.cc-solve main .expration { font-size: var(--t-lg); line-height: 1.8; color: var(--ink); }
.cc-solve main .question-content p { color: var(--ink); font-size: var(--t-lg); font-weight: 500; }
.cc-solve main .anwerslist { margin-top: 18px; font-size: var(--t-md); }
.cc-solve main .anwerslist .radio { position: relative; display: flex; align-items: center; float: none; clear: both; width: 100%; margin: 0 0 8px; padding: 12px 16px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px transparent; transition: background .2s, box-shadow .2s; }
.cc-solve main .anwerslist .radio:hover { background: var(--bg-3); }
.cc-solve main .anwerslist .radio.checked { background: var(--ice); box-shadow: inset 0 0 0 2px var(--brand-700); }
.cc-solve main .anwerslist .radio.radio-success { background: var(--ok-wash); box-shadow: inset 0 0 0 2px var(--ok); }
.cc-solve main .anwerslist .radio.radio-danger { background: var(--bad-wash); box-shadow: inset 0 0 0 2px var(--bad); }
.cc-solve main .anwerslist .radio label { flex: none; margin: 0; margin-inline-end: 12px; color: var(--ink); font-size: var(--t-md); font-weight: 600; cursor: pointer; }
.cc-solve main .anwerslist .radio > :is(p, span, div) { flex: 1; margin: 0; color: var(--ink); }
.cc-solve main .anwerslist .radio.scratched label { opacity: .45; text-decoration: line-through; }
.cc-solve main .anwerslist .btn-scratch { order: 2; min-height: 28px; padding: 0 8px !important; margin-inline-start: 8px; font-size: 11px !important; }

.cc-solve main :is(.answerdetails, .answerbody) { padding: 0; background: none; border: 0; }
.cc-solve main .answerbody { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--ice); }
.cc-solve main .anstitle { margin: 0 0 6px; font: 800 var(--t-md)/1.4 var(--f-display) !important; color: var(--ink) !important; }
.cc-solve main .ansdetail { color: var(--ink-2); line-height: 1.85; }
.cc-solve main .show_full_answer { min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 600; font-size: var(--t-sm); }
.cc-solve main .full_ans { margin-top: 12px; padding: 0; background: none; border: 0; }
.cc-solve main .remark-chart { padding: 12px; border-radius: 16px; background: var(--bg-2); }

.cc-solve main .anssubmission { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 0; background: none; border: 0; }
.cc-solve main .anssubmission > [class*="col-"] { float: none; width: auto; padding: 0; }
.cc-solve main .controlbtn { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; background: none; border: 0; }
.cc-solve main .controlbtn button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid var(--line-2) !important; border-radius: var(--r-pill) !important; background: var(--bg) !important; color: var(--ink) !important; font: 600 var(--t-sm)/1 var(--f-body) !important; box-shadow: none; cursor: pointer; transition: background .2s, border-color .2s; }
.cc-solve main .controlbtn button:hover:not(:disabled) { border-color: var(--ink) !important; }
.cc-solve main .controlbtn button:disabled { opacity: .45; cursor: default; }
.cc-solve main .controlbtn .markButton { background: #FFF4DA !important; border-color: #E6B84A !important; color: #8A5E00 !important; }
.cc-solve main .controlbtn :is(.submitButton, .finishReviewButton) { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.cc-solve main .controlbtn :is(.submitButton, .finishReviewButton):hover:not(:disabled) { background: var(--brand-700) !important; border-color: var(--brand-700) !important; }
.cc-solve .popover { border: 0; border-radius: 18px; box-shadow: var(--shadow-2); font-family: var(--f-body); }

/* the exam: the National Center's look. Same page, same script. No sidebar, gray stage, white sheet. */
html.cc-solve-exam .zc-side, html.cc-solve-exam .zc-tabbar, html.cc-solve-exam .zc-cmdk, html.cc-solve-exam .zc-shade { display: none !important; }
html.cc-solve-exam .zc { display: block; }
html.cc-solve-exam .zc-main { margin: 0; width: 100%; }
html.cc-solve-exam body, html.cc-solve-exam .zc-main { background: #E4E4E4; }
html.cc-solve-exam main .quetionboard { max-width: 980px; margin-inline: auto; border-radius: 0; font-family: Arial, Tahoma, sans-serif; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
html.cc-solve-exam main .quetionboardheading { background: linear-gradient(#F8B133, #EE9B16) !important; margin: calc(-1 * clamp(16px, 2.4vw, 28px)) calc(-1 * clamp(16px, 2.4vw, 28px)) 20px; padding: 8px 18px; border: 0; }
html.cc-solve-exam main .qbh-right :is(h2, h3, h4, p) { color: #222 !important; font: 700 var(--t-md)/1.3 Arial, Tahoma, sans-serif !important; }
html.cc-solve-exam main .quetionlistindex ul li { background: #E8E8E8 !important; box-shadow: none; }
html.cc-solve-exam main .quetionlistindex ul li.rightchoice { background: #F39C12 !important; box-shadow: none; }
html.cc-solve-exam main .quetionlistindex ul li.rightchoice a { color: #fff !important; }
html.cc-solve-exam main .quetionlistindex ul li.active { background: #fff !important; box-shadow: inset 0 0 0 2px #444; }
html.cc-solve-exam main .quetionlistindex ul li.active a { color: #222 !important; }
html.cc-solve-exam main .anwerslist .radio { border-radius: 0; background: #EEF1F2; }
html.cc-solve-exam main .anwerslist .radio:nth-child(even) { background: #F7F8F8; }
html.cc-solve-exam main .anwerslist .radio.checked { background: #DCE8F4; box-shadow: none; }
html.cc-solve-exam main .controlbtn button { border-radius: var(--r-pill) !important; background: #1F6FB5 !important; border-color: #1F6FB5 !important; color: #fff !important; }
html.cc-solve-exam main .controlbtn .markButton { background: #fff !important; border-color: #999 !important; color: #333 !important; }
html.cc-solve-exam main .qb-timer { background: none !important; color: #222; }

@media (max-width: 760px) {
  .cc-solve main .quetionlistindex ul li { width: 34px; height: 34px; line-height: 34px; }
  .cc-solve main .controlbtn button { min-height: 40px; padding: 0 12px; }
  .cc-solve main .anssubmission { display: grid; }
}

/* the clock reads left to right, whatever the page's direction */
.cc-solve main :is(.qb-timer, .timer, [data-timer]) { direction: ltr; unicode-bidi: isolate; }
html.cc-solve-exam .zc-top__logo { display: block; width: 130px; }
html.cc-solve-exam .zc-top { justify-content: space-between; background: #fff; }


/* what Bootstrap's CSS used to give this page */
.cc-solve main { --sw: min(100%, 1120px); }
.cc-solve .solving-questions, .cc-solve .container-main-div, .cc-solve .tab-content { width: 100%; }
.cc-solve .quetionbank { max-width: 1120px; margin-inline: auto; }
.cc-solve .mainqarea { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cc-solve .question-container { flex: 1 1 420px; min-width: 0; width: auto !important; }
.cc-solve .chart-container { flex: 0 1 300px; min-width: 0; }
.cc-solve .chart-canvas { min-height: 0; }
.cc-solve main img { max-width: 100%; height: auto; }
.cc-solve .qbh-center { display: flex; justify-content: center; margin-bottom: 12px; }
.cc-solve .qb-timer .hours[style*="none"] { display: none; }
.cc-solve .favorits .cx-ic { width: 19px; height: 19px; }
.cc-solve .favorits.favorited .cx-ic { fill: currentColor; }
.cc-solve .answerdetails { display: none; }
.cc-solve #feedbackButton, .cc-solve #po2 { min-height: 40px; padding: 0 14px; border: 0 !important; border-radius: var(--r-pill); background: var(--bg-2) !important; color: var(--ink); font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; }
.cc-solve .controlbtn .cx-ic { width: 16px; height: 16px; }
.cc-solve .radio input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 0; margin-inline-end: 10px; accent-color: var(--brand-700); cursor: pointer; }
.cc-solve .anwerslist .radio p { margin: 0; }
.cc-solve .btn-scratch { border: 0; border-radius: 8px; background: var(--bg-3); color: var(--ink-3); cursor: pointer; }
.cc-solve .text-answer-input { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; }
.cc-solve .hide { display: none !important; }
/* the mentor pop-up */
.cc-solve .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; width: min(92vw, 360px); max-width: 92vw; padding: 14px; background: #fff; direction: rtl; text-align: start; }
.cc-solve .popover .arrow { display: none; }
.cc-solve .popover-title { display: none; }
.cc-solve .popover .closebtn { width: 28px; margin-bottom: 6px; cursor: pointer; }
.cc-solve .popover textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; }
.cc-solve .popover .submit_question_to_support { margin-top: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; }
.cc-solve .popover .form-group { position: relative; }
.cc-solve .popover .status { background: #fff; }
.cc-solve .fade.in { opacity: 1; }
/* dialogs from the live scripts */
.cc-solve .modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow-y: auto; padding: 16px; direction: rtl; }
.cc-solve .modal.in { display: block; }
.cc-solve .modal-dialog { width: min(100%, 560px); margin: 8vh auto; }
.cc-solve .modal-dialog.modal-lg { width: min(100%, 860px); }
.cc-solve .modal-content { display: grid; gap: 14px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-2, 0 24px 60px rgba(17, 39, 61, .25)); }
.cc-solve .modal-header { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; }
.cc-solve .modal-title { margin: 0; font: 800 var(--t-lg)/1.3 var(--f-display); }
.cc-solve .modal-header .close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; }
.cc-solve .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.cc-solve .modal .btn { min-height: 44px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff; font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; }
.cc-solve .modal .btn-primary, .cc-solve .modal .btn-ok { border-color: var(--ink); background: var(--ink); color: #fff; }
.cc-solve .modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(17, 39, 61, .45); }
.cc-solve .modal-backdrop.fade { opacity: 0; }
.cc-solve .modal-backdrop.in { opacity: 1; }
.cc-solve.modal-open, .cc-solve .modal-open { overflow: hidden; }
/* essay writing */
.cc-solve #essay-container { max-width: 1120px; margin-inline: auto; }
.cc-solve .essay-intro { margin-bottom: 14px; color: var(--ink-2); }
.cc-solve .essay-title { margin: 0 0 6px; font: 800 var(--t-md)/1.4 var(--f-display); }
.cc-solve #essay-body { display: block; width: 100%; margin-top: 8px; font-size: var(--t-md); line-height: 1.8; }
.cc-solve #essay-textarea { width: 100%; min-height: 340px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; font: 400 var(--t-md)/1.8 var(--f-body); resize: vertical; }
.cc-solve #essay-textarea:focus { border-color: var(--brand-700); outline: none; }
.cc-solve .words { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: var(--t-sm); }
.cc-solve .words input { width: 64px; padding: 4px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); text-align: center; font-weight: 700; }
/* the listening section */
.cc-solve #listening-section { max-width: 980px; margin-inline: auto; }
/* the live script toggles the answer when its row is clicked, so the row takes the click, not the small circle */
.cc-solve .radio input[type="radio"] { pointer-events: none; }
.cc-solve .anwerslist .radio { cursor: pointer; }
/* the question bar: the live script marks the current question with null_ans and a reminder with xchoice */
.cc-solve main .quetionlistindex ul li.null_ans { background: var(--ink) !important; box-shadow: none; }
.cc-solve main .quetionlistindex ul li.null_ans a { color: #fff !important; }
.cc-solve main .quetionlistindex ul li.xchoice::before { content: ""; position: absolute; top: -2px; inset-inline-end: -2px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #E8A33D; }
html.cc-solve-exam main .quetionlistindex ul li.null_ans { background: #fff !important; box-shadow: inset 0 0 0 2px #444; }
html.cc-solve-exam main .quetionlistindex ul li.null_ans a { color: #222 !important; }

/* my packages */
.cc-packlist { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.cc-packrow { display: grid; grid-template-columns: 46px minmax(0, 1.2fr) minmax(0, 1.4fr) auto; align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.cc-packrow__main { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.cc-packrow__main strong { font-weight: 700; }
.cc-packrow__main small { color: var(--ink-3); font-size: var(--t-xs); }
.cc-packrow__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.cc-packrow__facts dt { color: var(--ink-3); font-size: 11.5px; }
.cc-packrow__facts dd { margin: 0; font-weight: 600; font-size: var(--t-sm); }
@media (max-width: 860px) { .cc-packrow { grid-template-columns: 46px minmax(0, 1fr); } .cc-packrow__facts, .cc-packrow__act { grid-column: 1 / -1; } }
.cc-a11y { display: grid; gap: 28px; }
.cc-a11y section { display: grid; gap: 10px; }

/* slide lectures */
.cc-reveal { position: relative; width: 100%; height: clamp(320px, 56vw, 560px); overflow: hidden; border-radius: 18px; background: #333; }
.cc-reveal .reveal { background: #333; }
.cc-reveal .reveal .controls, .cc-reveal .reveal .progress, .cc-reveal .reveal .playback { position: absolute; }
.cc-reveal .reveal .slides img { max-height: 100%; margin: 0; border: 0; box-shadow: none; }

/* -----------------------------------------------------------------------
   answer sheets, their results, the free tour and CountDown: the live markup, without Bootstrap's CSS
   ----------------------------------------------------------------------- */
.cc-sheet .container, .cc-sheet .container-main-div { width: 100%; max-width: 1120px; margin-inline: auto; padding: 0; }
.cc-sheet .row { display: flow-root; }
.cc-sheet [class*="col-"] { width: 100%; }
.cc-sheet .text-center { text-align: center; }
.cc-sheet .center-block { display: block; margin-inline: auto; }
.cc-sheet .hidden, .cc-sheet .hide { display: none !important; }
.cc-sheet .clear { clear: both; }
.cc-sheet .collapse:not(.in) { display: none; }
.cc-sheet .tab-pane:not(.active) { display: none; }
.cc-sheet ul { list-style: none; margin: 0; padding: 0; }
.cc-sheet :is(.chartblockhead, .mainheading) { margin: 0 0 16px; text-align: start; }
.cc-sheet :is(.chartblockhead, .mainheading) :is(h1, h2) { margin: 0; padding: 0; border-radius: 0; background: none; color: var(--ink); font: 800 var(--t-2xl)/1.2 var(--f-display); }
.cc-sheet .chartblockhead :is(h3, h4) { margin: 0 0 6px; padding: 0; background: none; color: var(--ink); font: 700 var(--t-md)/1.4 var(--f-display); }
.cc-sheet :is(.datafillertable, .blockboxborder, .columnchartblock, .groupscore, .pg-cont-box-main) { margin-bottom: 16px; padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.cc-sheet .table-responsive { overflow-x: auto; }
.cc-sheet .table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.cc-sheet .table :is(th, td) { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: start; }
.cc-sheet .table th { color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; }
.cc-sheet .table.text-center :is(th, td), .cc-sheet .text-center .table :is(th, td) { text-align: center; }
.cc-sheet .table a { color: var(--brand-700); }
.cc-sheet .table-hover tr:hover td { background: var(--bg-2); }
.cc-sheet .btn, .cc-sheet .con-bx-top-cont-bt, .cc-sheet .confirmbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff; color: var(--ink); font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; }
.cc-sheet .btn:hover { border-color: var(--ink); }
.cc-sheet .btn-primary, .cc-sheet .confirmbtn { border-color: var(--ink); background: var(--ink); color: #fff !important; }
.cc-sheet .btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.cc-sheet .center-block.btn { display: flex; width: fit-content; margin: 14px auto 0; }
.cc-sheet .form-control { width: 100%; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: inherit; }
.cc-sheet .form-group { display: grid; gap: 6px; margin-bottom: 12px; }
.cc-sheet .pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-sheet .pagination li { float: none !important; }
.cc-sheet .pagination li > span { padding-inline-end: 6px; border: 0; color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; }
.cc-sheet .pagination li > a { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-weight: 700; cursor: pointer; }
.cc-sheet .pagination li.active > a { background: var(--ink); color: #fff; }
.cc-sheet .timer { margin: 10px 0 4px; color: var(--ink); font: 800 var(--t-lg)/1.3 var(--f-display); direction: ltr; unicode-bidi: isolate; }
/* the answer bubbles */
.cc-sheet label.btn.q { min-width: 36px; min-height: 36px; margin: 0 0 4px; padding: 0 8px; border: 1.5px solid var(--line-2); border-radius: 50%; background: #fff; font-size: var(--t-xs); }
.cc-sheet label.btn.q.active { border: 1.5px solid var(--brand-700); background: var(--brand-700); color: #fff; box-shadow: none; }
.cc-sheet label.btn.q.true { border: 2px solid var(--ok); }
.cc-sheet label.btn.q.false { border: 2px solid var(--bad); }
.cc-sheet td.bg, .cc-sheet th.bg { background: var(--bg-2); }
.cc-sheet .opt { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }
.cc-sheet .levels { margin-top: 12px; }
.cc-sheet .confidence-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cc-sheet .confidence-buttons > div { border-radius: 14px; overflow: hidden; }
.cc-sheet .confidence-buttons label.btn { min-height: 52px; border: 0; border-radius: 0; background: transparent; font-size: var(--t-xs); line-height: 1.3; }
.cc-sheet .confidence-buttons .percent { font-weight: 800; }
/* results */
.cc-sheet :is(.resultinbox, .left_exams) { margin-bottom: 16px; padding: 24px; border-radius: 24px; background: var(--ink); color: #fff; text-align: center; }
.cc-sheet :is(.rslabel) { display: block; color: var(--on-night-2, #C5D3E0); font-size: var(--t-sm); font-weight: 600; }
.cc-sheet :is(.rsnumber, .pnumber) { display: block; margin: 8px 0; color: #fff; font: 800 clamp(3rem, 2rem + 4vw, 5rem)/1.1 var(--f-display); }
.cc-sheet .left_exams .mark { display: block; margin-top: 6px; background: none; color: #fff; font: 800 var(--t-3xl)/1 var(--f-display); }
.cc-sheet .grades { display: grid; gap: 6px; max-width: 340px; margin-inline: auto; }
.cc-sheet .sub_mark { display: flex; justify-content: space-between; padding: 0; color: #fff; font-size: var(--t-sm); }
.cc-sheet .sub_mark span { float: none; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
.cc-sheet .viewbycharttop { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: center; }
.cc-sheet .chartdatafilter p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.cc-sheet .chartindicater p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--t-xs); color: var(--ink-2); }
.cc-sheet .chartindicater span { width: 12px; height: 12px; border-radius: 3px; background: #15a8ed; }
.cc-sheet .chartindicater .blue span { background: #003b64; }
.cc-sheet .viewbychartbottom { margin-top: 12px; color: var(--ink-3); font-size: var(--t-xs); }
.cc-sheet #piechart { max-width: 100%; }
.cc-sheet .chartblockbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cc-sheet .charttitle { margin: 0 0 8px; font: 700 var(--t-sm)/1.4 var(--f-display); }
.cc-sheet canvas { max-width: 100%; }
.cc-sheet .scorehead { margin: 0 0 8px; font: 700 var(--t-md)/1.4 var(--f-display); text-align: center; }
.cc-sheet .scorebox { display: grid; gap: 12px; justify-items: center; }
.cc-sheet .scorepercent { color: var(--brand-700); font: 800 var(--t-3xl)/1.1 var(--f-display); }
.cc-sheet .trueanslist ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cc-sheet .trueanslist li a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-size: var(--t-xs); font-weight: 700; }
.cc-sheet .trueanslist li.right a { background: var(--ok-wash); color: var(--ok); }
.cc-sheet .trueanslist li.wrong a { background: var(--bad-wash); color: var(--bad); }
.cc-sheet .shareonfacebook { display: none; }
.cc-sheet .no_results_header { padding: 32px 0; text-align: center; color: var(--ink-2); font: 700 var(--t-lg)/1.4 var(--f-display); }
/* free tour cards */
.cc-sheet .pg-cont-box-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cc-sheet .pg-cont-box-main-in { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.cc-sheet .con-bx-top-hed p, .cc-sheet .con-bx-top-cont p { margin: 0; }
.cc-sheet .con-bx-top-hed p { font: 700 var(--t-md)/1.3 var(--f-display); }
.cc-sheet .con-bx-top-cont { display: grid; gap: 10px; justify-items: start; color: var(--ink-3); font-size: var(--t-sm); }
/* CountDown */
.cc-sheet .articles_index { display: grid; gap: 12px; }
.cc-sheet .article_item, .cc-sheet .pd-itm-nm-main { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.cc-sheet .image_container img, .cc-sheet .article_image img { max-width: 100%; height: auto; border-radius: 14px; }
.cc-sheet .title_div, .cc-sheet .article_title { font: 800 var(--t-lg)/1.3 var(--f-display); color: var(--ink); }
.cc-sheet .article_body { line-height: 1.9; overflow-wrap: anywhere; }
.cc-sheet .article_body img { max-width: 100%; height: auto; }
/* the same pages when they sit under the public header */
.cx-site main:has(> section .container), html.cc-sheet .cx-site main { padding-top: calc(112px + env(safe-area-inset-top, 0px)); padding-bottom: 48px; background: var(--bg); }
html.cc-sheet .cx-site main > section, html.cc-sheet .cx-site main > .contant { padding-inline: var(--gutter, 16px); }
@media (max-width: 760px) { html.cc-sheet .cx-site main > section, html.cc-sheet .cx-site main > .contant { padding-inline: var(--gutter-r) var(--gutter-l); } }
.reveal .cc-full-back { font-size: 14px !important; }

/* answer sheets: the wide table scrolls inside its own box, never the page */
html.cc-sheet .zc-content > *, html.cc-sheet .zc-main { min-width: 0; max-width: 100%; }
html.cc-sheet .cc-sheet-none { display: none; }
.cc-sheet .chapter { max-width: 100%; }
.cc-sheet .chapter .table { width: max-content; min-width: 100%; margin-inline: auto; }
.cc-sheet .chapter .table :is(th, td) { min-width: 46px; padding: 8px 5px; border: 0; }
.cc-sheet .chapter .table th a { display: block; color: var(--ink); font-weight: 700; }
html.cc-sheet [data-qnumber] { padding: 4px 8px; border-radius: 8px; }
.cc-sheet .chapter { padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.cc-sheet .chapter h3 { margin: 4px 0 10px; font: 700 var(--t-md)/1.4 var(--f-display); text-align: start; color: var(--ink); }
.cc-sheet .chapter > br { display: none; }
.cc-sheet .chapter + .chapter, .cc-sheet .chapter + .levels + .chapter { margin-top: 14px; }
.cc-sheet .text-center > .btn { margin-top: 8px; }
/* confidence: same meaning as the live colours, in Design C's soft tones */
html.cc-sheet .levels .row { max-width: 640px; margin-inline: auto; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
html.cc-sheet .confidence-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; direction: rtl; }
html.cc-sheet .confidence-buttons > div { flex: none; border-radius: 16px; }
html.cc-sheet .levels label.btn { display: block; width: 100%; height: 100%; min-height: 64px; padding: 10px 8px; border: 2px solid transparent; border-radius: 16px; background: transparent; color: var(--ink); font-size: var(--t-xs); font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; }
html.cc-sheet .levels label.btn br { display: none; }
html.cc-sheet .levels label.btn .percent { display: block; margin: 0 0 3px; font: 800 var(--t-md)/1.2 var(--f-display); direction: ltr; }
html.cc-sheet .levels label.btn.active, html.cc-sheet .levels .btn:active { border-color: var(--ink); background: transparent; color: var(--ink); box-shadow: none; }
html.cc-sheet .bg0, html.cc-sheet .DUROOS .bg0 { background: #FBDDDD; }
html.cc-sheet .bg1, html.cc-sheet .DUROOS .bg1 { background: #FCE6CF; }
html.cc-sheet .bg2, html.cc-sheet .DUROOS .bg2 { background: #FAF1C4; }
html.cc-sheet .bg3, html.cc-sheet .DUROOS .bg3 { background: #E2F4CF; }
html.cc-sheet .bg4, html.cc-sheet .DUROOS .bg4 { background: #CBEFD6; }
html.cc-sheet .EPSOS .bg0 { background: #FAF1C4; }
html.cc-sheet .EPSOS .bg1 { background: #FBDFE8; }
/* marks on the results sheets */
html.cc-sheet .table th.green { color: var(--ok); font-size: var(--t-md); }
html.cc-sheet .table th.red { color: var(--bad); font-size: var(--t-md); }
html.cc-sheet td.bg, html.cc-sheet th.bg { background: var(--bg-2); }
html.cc-sheet label.btn.q { border-style: solid; border-radius: 50%; padding: 0 8px; }
html.cc-sheet label.btn.q.active { border: 1.5px solid var(--brand-700); background: var(--brand-700); color: #fff; }
html.cc-sheet label.btn.q.true { border: 2px solid var(--ok); background: #fff; color: var(--ok); }
html.cc-sheet label.btn.q.true.active { background: var(--ok); color: #fff; }
html.cc-sheet label.btn.q.false { border: 2px solid var(--bad); background: var(--bad); color: #fff; }
/* the sheets' short dialogs keep their buttons under the text */
.cc-sheet .modal-header { display: block; text-align: center; }
.cc-sheet .modal-header > br { display: none; }
.cc-sheet .modal-header > .btn { margin: 16px 4px 0; }
.cc-sheet .modal-title { line-height: 1.6; }
/* the sheets' hidden inputs stay inside the box that scrolls */
.cc-sheet .chapter, html.cc-sheet label.btn { position: relative; }
/* the free tour's solving screen sits under the public header */
html.cc-solve .cx-site main .quetionboard { max-width: 1020px; margin-inline: auto; }
html.cc-sheet .cx-site main > section { padding-block: 0; }
/* dialogs with a close button keep the usual header; the solving screen has one card, not two */
.cc-sheet .modal-header:has(.close) { display: flex; text-align: start; }
.cc-sheet .solving-questions { padding: 0; border: 0; background: none; }

/* free tour */
.cc-ftour { padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
.cc-ftour .cc-head h1 { margin: 0; font: 800 var(--t-3xl)/1.15 var(--f-display); color: var(--ink); }
.cc-ftour__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cc-ftour__card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.cc-ftour__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cc-ftour__top h2 { margin: 0 0 4px; font: 800 var(--t-lg)/1.3 var(--f-display); color: var(--ink); }
.cc-ftour__top p { margin: 0; color: var(--ink-3); font-size: var(--t-sm); }
.cc-ftour__scores { display: flex; flex-wrap: wrap; gap: 6px; direction: ltr; }
.cc-ftour__scores span { padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg-2); font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.cc-ftour__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-ftour__actions .cx-btn { --h: 40px; padding: 0 16px; font-size: var(--t-sm); }
.cc-ftour__why { display: grid; gap: 16px; justify-items: start; max-width: 620px; }
.cc-ftour__why h2 { margin: 0; font: 800 var(--t-2xl)/1.2 var(--f-display); color: var(--ink); }
.cc-ftour__why ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cc-ftour__why li { display: flex; align-items: center; gap: 10px; }
.cc-ftour__why .cx-ic { flex: none; width: 18px; height: 18px; color: var(--ok); }
/* free tour review and statistics */
.cc-sheet .tab-content > .pg-cont-box-main { padding: 0; border: 0; background: none; }
.cc-sheet .form_group_chapters { max-width: 420px; }
.cc-sheet .form_group_chapters label { font-weight: 600; font-size: var(--t-sm); }
.cc-sheet .blockboxborder { margin-bottom: 16px; }
.cc-sheet .datafillertable .blockboxborder { padding: 0; border: 0; margin: 0; }
.cc-sheet :is(.datafillertable, .columnchartblock) .chartblockhead :is(h1, h2, h3) { font: 800 var(--t-lg)/1.3 var(--f-display); }
.cc-sheet .viewbycharttop > * { min-width: 0; }
.cc-sheet #piechart { width: 100% !important; overflow: hidden; }
.cc-sheet .chartindicater { min-width: 0; }
.cc-sheet .chartindicater p { min-width: 0; width: auto !important; float: none !important; }
.cc-sheet .chartindicater:is([style]) { display: flex; flex-wrap: wrap; gap: 4px 16px; float: none !important; margin-bottom: 10px !important; }
.cc-sheet .viewrinperhead :is(h1, h2, h3, h4, p) { margin: 0 0 8px; font: 700 var(--t-md)/1.4 var(--f-display); text-align: center; color: var(--ink); }
.cc-sheet .resultdispin { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; }
.cc-sheet .dispodd p { margin: 0 0 4px; color: var(--ink-3); font-size: var(--t-sm); }
.cc-sheet :is(.getthis, .getthat) { display: block; font: 800 var(--t-2xl)/1.2 var(--f-display); color: var(--ink); direction: ltr; }
.cc-sheet .getthis { color: var(--brand-700); }
.cc-sheet .diversionpos img { width: 28px; height: auto; }
.cc-sheet .progress { height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-2); }
.cc-sheet .progress-bar { height: 100%; border-radius: inherit; background: var(--brand-700); }
.cc-sheet i.fa { font-style: normal; font-weight: 800; }
.cc-sheet i.fa-check::before { content: "\2713"; color: var(--ok); }
.cc-sheet i.fa-times::before { content: "\2715"; color: var(--bad); }
.cc-sheet a > button:not([class]) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff; color: var(--ink); font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; }
.cc-sheet .confirmbtn { min-height: 44px; padding: 0 20px; }
.cc-sheet .scoreline { margin: 0 0 10px; color: var(--ink-3); font-size: var(--t-sm); }
.cc-sheet .groupscore + * { margin-top: 12px; }
@media (max-width: 560px) {
  .cc-sheet .table :is(th, td) { padding: 8px 6px; }
  .cc-sheet .table img { max-width: 220px; height: auto; }
}

/* long rows of filters scroll inside themselves on a phone instead of widening the page */
.zc-content > * { min-width: 0; }
.zc-pills, .zv-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.zc-pills::-webkit-scrollbar, .zv-seg::-webkit-scrollbar { display: none; }
.cc-ftour__h { margin: 0 0 6px; font: 800 var(--t-lg)/1.4 var(--f-display); color: var(--ink); }

/* the page's ad campaigns, managed from the admin area */
.cc-ads__campaign + .cc-ads__campaign { margin-top: 28px; }
.cc-ads__campaign > h2 { margin: 0 0 16px; font: 800 var(--t-2xl)/1.25 var(--f-display); color: var(--ink); text-align: center; }
.cc-ads__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 340px)); justify-content: center; gap: 16px; }
.cc-ads__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.cc-ads__img img { display: block; width: 100%; height: auto; border-radius: 14px; }
.cc-ads__title { font: 800 var(--t-md)/1.35 var(--f-display); color: var(--ink); }
.cc-ads__desc { flex: 1; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.8; overflow-wrap: anywhere; }
.cc-ads__desc ul { margin: 0; padding-inline-start: 18px; }
.cc-ads__desc img { max-width: 100%; height: auto; }

/* on phones the accessibility button sits above the study area's bottom tabs */
@media (max-width: 1040px) {
  html:not(.cc-solve-exam):has(.zc-tabbar) #ct-a11y-open { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  html:not(.cc-solve-exam):has(.zc-tabbar) #ct-a11y-panel { bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* BEGIN gifted exams screen, from the customer's design (views/shopping/_cc_gifted.php) */
.cg-hero { padding-top: calc(112px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(36px, 5vw, 72px); overflow: hidden; background: linear-gradient(rgba(27, 45, 59, .05) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(27, 45, 59, .05) 1px, transparent 1px) 0 0 / 46px 46px, #fff; }
.cg-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 110px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.cg-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(20px, 4vw, 64px); }
.cg-hero__copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: clamp(12px, 1.4vw, 18px); }
.cg-hero__copy .cc-crumbs { font-size: var(--t-xs); }
.cc-phero p.cg-for { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1.5px solid #EFC926; border-radius: var(--r-pill); background: #FDF7D6; color: #1B2D3B; font-size: var(--t-sm); font-weight: 700; }
.cc-phero h1.cg-title { margin: 0; color: var(--ink); font: 900 clamp(1.9rem, .6rem + 3.6vw, 3.8rem)/1.28 var(--f-display); }
.cg-title span { display: block; }
.cg-title em { position: relative; display: inline-block; font-style: normal; }
.cc-phero h1.cg-title em { color: #D43D5E; }
.cg-title em svg { position: absolute; inset-inline: -2%; bottom: -.17em; width: 104%; height: .22em; }
.cc-phero p.cg-lead { margin: 0; max-width: 560px; color: var(--ink-2); font-size: var(--t-md); line-height: 1.85; }
.cg-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.cg-art { position: relative; display: block; width: 100%; max-width: 560px; height: auto; justify-self: center; overflow: visible; direction: ltr; fill: var(--ink); }
.cg-art text { font-family: var(--f-body); }
.cg-art .cg-art__b { font-family: var(--f-display); font-weight: 800; }
.cg-deco { position: absolute; display: block; pointer-events: none; }
.cg-deco svg { display: block; width: 100%; height: 100%; }
.cg-deco--star { left: 0; top: -2%; width: 26px; height: 26px; }
.cg-deco--tri { left: 45%; top: 2%; width: 30px; height: 30px; }
.cg-deco--plus { left: 47%; top: 58%; width: 24px; height: 24px; }
.cg-deco--ring { left: 41%; top: 92%; width: 30px; height: 30px; }
.cg-deco--square { right: -1%; top: 84%; width: 24px; height: 24px; }

.cg-plans { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); background: #fff; scroll-margin-top: 80px; }
.cg-plans__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: clamp(22px, 3vw, 36px); }
.cg-plans__head h2 { margin: 0; color: var(--ink); font: 800 clamp(1.6rem, 1rem + 2.2vw, 2.8rem)/1.25 var(--f-display); }
.cg-plans__head h2 em { font-style: normal; color: #6C619B; }
.cg-plans__head p { margin: 6px 0 0; color: var(--ink-3); font-size: var(--t-sm); }
.cg-plans__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.cg-plans__tools .cx-coupon__toggle { height: 42px; border: 1.5px dashed #BFD3E0; border-radius: 13px; background: #fff; box-shadow: none; font-size: var(--t-sm); font-weight: 700; }
.cg-tabs { display: inline-flex; gap: 4px; max-width: 100%; padding: 5px; overflow-x: auto; border-radius: 16px; background: #F1F5F8; scrollbar-width: none; }
.cg-tabs::-webkit-scrollbar { display: none; }
.cg-tabs button { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-3); font: 700 var(--t-sm)/1 var(--f-body); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.cg-tabs button:hover { color: var(--ink); }
.cg-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(21, 45, 67, .35); }
.cg-tabs button:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 1px; }

.cg-plans__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.cg-plans__grid > li { min-width: 0; }
.cg-plans__grid > li[hidden] { display: none; }
.cg-plan--sky { --cg: #68C3D5; --cg-on: #1B2D3B; --cg-ink: #1C7C90; --cg-tint: #E3F4F7; }
.cg-plan--teal { --cg: #41B39A; --cg-on: #1B2D3B; --cg-ink: #1B7F69; --cg-tint: #E3F5F0; }
.cg-plan--purple { --cg: #6C619B; --cg-on: #fff; --cg-ink: #6C619B; --cg-tint: #ECEAF4; }
.cg-plan--pink { --cg: #D43D5E; --cg-on: #fff; --cg-ink: #D43D5E; --cg-tint: #FBE8EC; }
.cx-plan.cg-plan { padding: 0; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 26px 50px -36px rgba(21, 45, 67, .4); }
.cx-plan.cg-plan:hover { box-shadow: 0 0 0 1px var(--line-2), 0 34px 60px -34px rgba(21, 45, 67, .5); }
.cg-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 112px; padding: 16px 18px; color: var(--cg-on); background: var(--cg); }
.cg-plan__name { min-width: 0; display: grid; justify-items: start; gap: 7px; }
.cg-plan__name h3 { margin: 0; color: var(--cg-on); font: 800 clamp(1.05rem, .9rem + .4vw, 1.3rem)/1.3 var(--f-display); }
.cg-plan__name h3 span { display: block; }
.cg-plan__name em { padding: 2px 10px; border-radius: 8px; background: #fff; color: var(--cg-ink); font-size: var(--t-xs); font-style: normal; font-weight: 700; }
.cg-plan__grade { flex: none; display: grid; justify-items: center; gap: 1px; width: 66px; padding: 8px 4px 7px; border-radius: 19px; background: #fff; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35); transform: rotate(-6deg); }
.cg-plan__grade b { color: var(--cg-ink); font: 900 2rem/1 var(--f-display); }
.cg-plan__grade small { color: var(--ink-2); font-size: .68rem; font-weight: 700; }
.cg-plan__body { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 18px; }
.cg-plan .cx-plan__keys { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 16px; padding: 0; }
.cg-plan .cx-plan__keys li { padding: 11px 4px; border-radius: 13px; background: var(--cg-tint); }
.cg-plan .cx-plan__keys strong { color: var(--ink); font-size: var(--t-lg); }
.cg-plan .cx-plan__feats { gap: 10px; margin: 0 0 18px; padding: 0; color: var(--ink-2); }
.cg-plan .cx-plan__feats .cx-ic { border-radius: 7px; background: var(--cg-tint); color: var(--cg-ink); }
.cg-plan .cx-plan__foot { margin-top: auto; }
.cg-plan .cx-price strong { color: var(--ink); font: 900 clamp(2rem, 1.5rem + 1vw, 2.5rem)/1.1 var(--f-display); }
.cg-plan .cx-seg { margin-block: 12px; }
.cg-plan__buy.cx-btn { --h: 52px; border-radius: 16px; background: var(--cg); color: var(--cg-on); font-weight: 800; box-shadow: 0 16px 28px -14px var(--cg); }
.cg-plan__buy.cx-btn:hover { background: var(--cg); color: var(--cg-on); filter: brightness(1.08); }
.cg-buybar__btn.cx-btn { background: #EFC926; color: #1B2D3B; }
.cg-buybar__btn.cx-btn:hover { background: #F5DB5F; color: #1B2D3B; }

.cg-perks { list-style: none; margin: clamp(26px, 3.5vw, 44px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.cg-perks li { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: var(--t-sm); font-weight: 700; }
.cg-perks b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 15px; font-weight: 400; }
.cg-perks__blue { background: #E3F4F7; } .cg-perks__gold { background: #FBF3CC; } .cg-perks__green { background: #E3F5F0; }

@media (prefers-reduced-motion: no-preference) {
  .cg-deco { animation: cgFloat 6s ease-in-out infinite; }
  .cg-deco--tri, .cg-deco--ring { animation-delay: -3s; }
}
@keyframes cgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cg-title span { white-space: nowrap; }
@media (max-width: 1180px) {
  .cg-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cg-hero { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
  .cg-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cg-art { max-width: 400px; }
  .cg-deco--tri, .cg-deco--plus, .cg-deco--ring, .cg-deco--square { display: none; }
  .cg-deco--star { left: 2%; top: 44%; }
}
@media (max-width: 640px) {
  .cc-phero h1.cg-title { font-size: min(7.7vw, 2.4rem); }
  .cg-plans__grid { grid-template-columns: minmax(0, 1fr); }
  .cg-ctas { width: 100%; }
  .cg-ctas .cx-btn { flex: 1 1 140px; }
  .cg-plans__tools { width: 100%; }
  .cg-perks { flex-direction: column; align-items: flex-start; }
}
/* END gifted exams screen */

/* BEGIN solving screen, a step bigger (tablet and up; phones keep their sizes) */
@media (min-width: 761px) {
  .cc-solve main .quetionbank { --t-xs: .9rem; --t-sm: 1rem; --t-md: 1.15rem; --t-lg: 1.32rem; --t-xl: 1.6rem; --cc-qb-pad: clamp(20px, 2.6vw, 34px); max-width: 1280px; }
  .cc-solve main #essay-container { max-width: none; }
  .cc-solve main .quetionlistindex { margin-bottom: 20px; }
  .cc-solve main .quetionlistindex ul { gap: 8px; }
  .cc-solve main .quetionlistindex ul li { width: 46px; height: 46px; line-height: 46px; }
  .cc-solve main .quetionboard { padding: var(--cc-qb-pad); border-radius: 30px; }
  .cc-solve main .quetionboardheading { margin-bottom: 22px; padding-bottom: 18px; }
  .cc-solve main .qb-timer { padding: 8px 20px; }
  .cc-solve main .favorits { width: 48px; height: 48px; border-radius: 14px; }
  .cc-solve main .favorits .cx-ic { width: 22px; height: 22px; }
  .cc-solve main :is(#feedbackButton, #po2) { min-height: 48px; padding: 0 18px; }
  .cc-solve main .anwerslist { margin-top: 22px; }
  .cc-solve main .anwerslist .radio { margin-bottom: 10px; padding: 16px 20px; border-radius: 16px; }
  .cc-solve main .anwerslist .radio label { margin-inline-end: 14px; }
  .cc-solve main .radio input[type="radio"] { width: 24px; height: 24px; margin-inline-end: 12px; }
  .cc-solve main .anwerslist .btn-scratch { min-height: 34px; padding: 0 11px !important; font-size: 13px !important; }
  .cc-solve main .answerbody { padding: 20px 22px; border-radius: 18px; }
  .cc-solve main .show_full_answer { min-height: 48px; padding: 0 22px; }
  .cc-solve main .anssubmission { gap: 12px; margin-top: 20px; }
  .cc-solve main .controlbtn { gap: 8px; }
  .cc-solve main .controlbtn button { min-height: 52px; gap: 8px; padding: 0 24px; }
  .cc-solve main .controlbtn .cx-ic { width: 18px; height: 18px; }
  /* reading passages: a whole-pixel line height, because the line numbers are counted from it */
  .cc-solve main .appendix-formated:not(.nodirection) { width: min(100% - 70px, 720px); }
  .cc-solve main .appendix-formated p { font-size: 1.15rem !important; line-height: 33px; }
  .cc-solve main .appendix-formated > .line_num { font-size: 14px; }
  /* the exam keeps its look; its sheet and buttons grow together, and the ribbon still reaches the edges */
  html.cc-solve-exam main :is(.quetionbank, .quetionboard) { max-width: 1120px; }
  html.cc-solve-exam main .quetionboardheading { margin: calc(-1 * var(--cc-qb-pad)) calc(-1 * var(--cc-qb-pad)) 24px; padding: 10px 22px; }
  /* the free tour's narrower frame */
  html.cc-solve .cx-site main :is(.quetionbank, .quetionboard) { max-width: 1180px; }
}
/* the logo under the questions */
.cc-solve-brand { display: grid; justify-items: center; gap: 8px; margin-top: 40px; text-align: center; color: var(--ink); }
.cc-solve-brand .ct-logo__svg { display: block; width: 150px; height: auto; }
.cc-solve-brand p { margin: 0; color: var(--ink-2); font-size: var(--t-xs); line-height: 1.5; }
/* END solving screen, a step bigger */
/* BEGIN essay topic: what the student writes about, the clearest thing on the screen */
.cc-solve main .cc-essay-topic { margin-top: 18px; padding: 16px 20px 18px; border: 1.5px solid var(--ice-2); border-radius: var(--r-md); background: var(--ice); }
.cc-solve main .cc-essay-topic__label { margin-bottom: 4px; color: var(--brand-700); font: 800 var(--t-sm)/1.4 var(--f-display); }
.cc-solve main .cc-essay-topic__lead { color: var(--ink-2); font: 500 var(--t-md)/1.6 var(--f-body); }
.cc-solve main .cc-essay-topic__text { color: var(--ink); font: 700 var(--t-xl)/1.5 var(--f-body); }
.cc-solve main .cc-essay-topic--long .cc-essay-topic__text { font-size: var(--t-lg); }
.cc-solve main .cc-essay-topic__text + .cc-essay-topic__text { margin-top: 6px; }
.cc-solve main .cc-essay-topic__text + .cc-essay-topic__lead { margin-top: 14px; }
/* the sizes, fonts and colours saved in the admin's text would undo it */
.cc-solve main :is(.cc-essay-topic__text, .cc-essay-topic__lead) * { font: inherit !important; color: inherit !important; background: none !important; }
html.cc-solve-exam main .cc-essay-topic { border: 1px solid #BBB; border-radius: 0; background: #EEF1F2; }
html.cc-solve-exam main :is(.cc-essay-topic__label, .cc-essay-topic__lead, .cc-essay-topic__text) { color: #222; font-family: Arial, Tahoma, sans-serif; }
/* END essay topic */
/* BEGIN customer changes, 2026-11-05 */
/* the phone header's way in for students */
.cc-phone-entry { display: none; }
@media (max-width: 1040px) {
  .cx-header__actions .cc-phone-entry { display: inline-flex; --h: 36px; gap: 5px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
  .cc-phone-entry .cx-ic { width: 15px; height: 15px; }
}
@media (max-width: 370px) {
  .cx-header__actions .cc-phone-entry { width: 36px; padding: 0; justify-content: center; }
  .cc-phone-entry span { display: none; }
}
/* chapters, question sets and essays: the time sits in the heading row, in a colour of its own, with a small clock */
html.cc-solve:not(.cc-solve-exam) main .qb-timer { align-items: center; padding: 8px 18px; background: var(--brand-700) !important; color: #fff !important; box-shadow: 0 10px 22px -14px rgba(15, 108, 168, .95); }
html.cc-solve:not(.cc-solve-exam) main .qb-timer::before { content: ""; flex: none; width: 1.05em; height: 1.05em; margin-inline-end: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.cc-solve main .cc-qhead .qbh-center { display: flex; justify-content: center; margin: 0; }
@media (min-width: 761px) {
  .cc-solve main .cc-qhead { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .cc-solve main .cc-qhead .qbh-left { justify-self: end; }
}
@media (max-width: 760px) {
  .cc-solve main .cc-qhead .qbh-center { order: -1; flex: 1 1 100%; }
}
/* END customer changes, 2026-11-05 */
/* BEGIN computer tip: the phone dashboard's reminder that the computer is closer to the real exam */
.cc-pc-tip { display: none; }
@media (max-width: 1040px) {
  .cc-pc-tip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border: 1px solid var(--ice-2); border-radius: 14px; background: var(--ice); color: var(--ink); font-size: var(--t-sm); font-weight: 600; line-height: 1.55; }
  .cc-pc-tip .cx-ic { flex: none; width: 20px; height: 20px; color: var(--brand-700); }
}
/* END computer tip */
/* BEGIN formula sheet: the arrow under it, and the large view */
.cc-solve .popover .cc-fsheet-thumb { display: block; width: 100%; height: auto; cursor: zoom-in; }
.cc-solve .popover .cc-fsheet-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 10px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink); font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; }
.cc-solve .popover .cc-fsheet-open:hover { background: var(--bg-3); }
.cc-solve .popover .cc-fsheet-open svg { flex: none; width: 18px; height: 18px; }
/* under the dialogs (1050), so a time-up message still shows on top of it */
.cc-fsheet { position: fixed; inset: 0; z-index: 1045; display: flex; flex-direction: column; background: #152D43; direction: rtl; }
.cc-fsheet[hidden] { display: none; }
.cc-fsheet__bar { flex: none; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; color: #fff; }
.cc-fsheet__clock { margin-left: auto; direction: ltr; font: 700 18px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.cc-fsheet__btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.cc-fsheet__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.cc-fsheet__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cc-fsheet__btn:disabled { opacity: .4; cursor: default; }
.cc-fsheet__btn svg { width: 20px; height: 20px; }
/* left to right inside, so the sums that keep the same spot while zooming work in every browser */
.cc-fsheet__box { flex: 1 1 0; min-height: 0; display: flex; overflow: auto; padding: 0 12px 12px; direction: ltr; overscroll-behavior: contain; }
.cc-fsheet__box img { flex: none; margin: auto; max-width: none; height: auto; border-radius: 8px; background: #fff; }
/* END formula sheet */
/* BEGIN QA fixes 2026-11-05 */
/* pages keep their place when the scrollbar comes and goes, and a dialog no longer shifts the page */
html { scrollbar-gutter: stable; }
body.modal-open { padding-right: 0 !important; }
/* quiet text and status chips readable on white and on the light grey (4.5:1) */
:root { --ink-3: #66707F; }
/* czc.css loads after cc.css, so these need to outrank its own rules */
html body .zc-state--new { color: var(--ink-2); }
html body .zc-state--done { color: #17693A; }
html body .zc-state { align-self: flex-start; }
/* the footer's two link columns had lost their gap to a later rule */
.cx-footer .cx-footer__links ul { gap: 12px 48px; }

/* ---------------------------------- solving screens */
/* the option's number is a small badge, apart from the answer, so "5" and "1" no longer read as "51" */
.cc-solve main .anwerslist .radio label { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); font-size: 12.5px; font-weight: 700; line-height: 1; }
/* crossing out an answer crosses out the answer; the X shows it is on; the chosen answer cannot be crossed out */
.cc-solve main .anwerslist .radio.scratched label { opacity: 1; text-decoration: none; }
.cc-solve main .anwerslist .radio.scratched:not(.checked) > :is(p, span, div) { color: var(--ink-3) !important; text-decoration: line-through; text-decoration-thickness: 2px; }
.cc-solve main .anwerslist .radio.scratched:not(.checked) > :is(p, span, div) * { color: inherit !important; }
.cc-solve main .anwerslist .radio.scratched .btn-scratch { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.cc-solve main .anwerslist .radio.checked .btn-scratch { visibility: hidden; }
/* a flagged question shows it on the button too */
.cc-solve main .controlbtn .markButton.marked { background: #E8A33D !important; border-color: #C98A00 !important; color: #fff !important; }
.cc-solve main .controlbtn .markButton.marked::before { content: "\2713"; margin-inline-end: 2px; }
/* where the student is, in the heading row */
.cc-solve main .cc-qpos { display: block; margin-top: 3px; color: var(--ink-3); font: 600 var(--t-sm)/1.3 var(--f-body); }
/* practice screens: the heading row (title, clock, tools) stays in view on long texts */
@media (min-width: 761px) {
  html.cc-solve:not(.cc-solve-exam) main .cc-qhead { position: sticky; top: 68px; z-index: 6; margin-inline: calc(-1 * clamp(16px, 2.4vw, 28px)); margin-top: calc(-1 * clamp(16px, 2.4vw, 28px)); padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2.4vw, 28px) 14px; border-radius: 26px 26px 0 0; background: var(--bg) !important; }
  html.zc-topnav.cc-solve:not(.cc-solve-exam) main .cc-qhead { top: 72px; }
}
/* the saved text's own font (often a font this site does not load, so a serif) gives way to the page's */
html.cc-solve main .appendix-formated p { font-family: var(--f-body) !important; }
html.cc-solve-exam main .appendix-formated p { font-family: Arial, Tahoma, sans-serif !important; }
html.cc-solve:not(.cc-solve-exam) main :is(.question-appendix, .question-content, .anwerslist) :not(.MathJax, .MathJax *, .MathJax_Display, .MathJax_Display *, .MathJax_Preview, mjx-container, mjx-container *) { font-family: inherit !important; }
/* a long text beside its question on wide screens, as in the real exam, instead of above it */
@media (min-width: 1180px) {
  html.cc-solve:not(.cc-solve-exam) main .quemain:has(.question-appendix .appendix-formated) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  html.cc-solve:not(.cc-solve-exam) main .quemain:has(.question-appendix .appendix-formated) > .question-appendix { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow: auto; padding-inline-end: 8px; overscroll-behavior: contain; }
  html.cc-solve:not(.cc-solve-exam) main .quemain:has(.question-appendix .appendix-formated) > :is(.question-content, .anwerslist) { grid-column: 2; }
  html.cc-solve:not(.cc-solve-exam) main .quemain:has(.question-appendix .appendix-formated) .appendix-formated:not(.nodirection) { width: calc(100% - 44px); margin-inline: 40px 0; }
  html.cc-solve:not(.cc-solve-exam) main .quemain:has(.question-appendix .appendix-formated) .question-appendix img { max-width: 100%; height: auto; }
}
/* the guide's popover says what it is for */
.cc-solve .popover .cc-guide__t { margin: 0 0 8px; padding-inline-end: 34px; color: var(--ink); font: 700 var(--t-sm)/1.4 var(--f-display); }
.cc-solve .popover .closebtn { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); }
.cc-solve .popover .closebtn:hover { background: var(--bg-3); color: var(--ink); }
.cc-solve .popover .closebtn svg { width: 16px; height: 16px; }
/* review: only the student's own answer is red, the right one green with a word, the rest stay plain */
.cc-solve main .cc-review :is(.btn-scratch, .markButton) { display: none !important; }
.cc-solve main .anwerslist .radio.radio-danger:not(.checked) { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.cc-solve main .anwerslist .radio.radio-danger.checked { background: var(--bad-wash); box-shadow: inset 0 0 0 2px var(--bad); }
.cc-solve main .anwerslist .radio:is(.radio-success, .radio-danger.checked)::after { order: 3; flex: none; margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; color: #fff; font: 700 12px/1.4 var(--f-body); white-space: nowrap; }
.cc-solve main .anwerslist .radio.radio-success::after { content: "الإجابة الصحيحة"; background: var(--ok); }
.cc-solve main .anwerslist .radio.radio-success.checked::after { content: "إجابتك صحيحة"; }
.cc-solve main .anwerslist .radio.radio-danger.checked::after { content: "إجابتك"; background: var(--bad); }
html.cc-solve-exam main .anwerslist .radio.radio-danger:not(.checked) { background: #EEF1F2 !important; box-shadow: none; }
.cc-solve main .remark-chart::before { content: "كيف أجاب الطلاب على هذا السؤال (نسبة كل إجابة)"; display: block; margin: 0 0 6px; color: var(--ink-2); font: 700 var(--t-xs)/1.4 var(--f-body); }
/* the clock: no empty hours, and the last minute in red */
.cc-solve .timer.cc-nohours .hours { display: none; }
html.cc-solve main .qb-timer.cc-low { background: var(--bad) !important; color: #fff !important; }
/* exams that keep the older screen (Hadassa, gifted): the clock as a pill with its icon, and no way out by a stray click */
html.cc-solve-exam main .qb-timer { align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: #fff !important; box-shadow: inset 0 0 0 1px #CFCFCF; color: #222 !important; font: 700 20px/1.2 Arial, Tahoma, sans-serif !important; }
html.cc-solve-exam main .qb-timer::before { content: ""; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2.2'/%3E%3C/svg%3E") center / contain no-repeat; }
html.cc-solve-exam .zc-top :is([data-zc-layout], .cx-iconbtn) { display: none !important; }
html.cc-solve-exam .zc-top__logo { pointer-events: none; }
html.cc-solve-exam main .quetionlistindex ul { gap: 5px; }
html.cc-solve-exam main .quetionlistindex ul li { width: 36px; height: 36px; line-height: 36px; }
/* dialogs cover the accessibility button too */
.cc-solve .modal-backdrop { z-index: 100015 !important; }
.cc-solve .modal { z-index: 100016 !important; }
/* a short note at the foot of the screen: saved, or not saved */
.cc-solvenote { position: fixed; z-index: 100030; left: 50%; bottom: 24px; max-width: min(92vw, 460px); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 var(--t-sm)/1.4 var(--f-body); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s; }
.cc-solvenote.is-on { opacity: 1; transform: translate(-50%, 0); }
.cc-solvenote.is-bad { background: var(--bad); }
@media (max-width: 1040px) { .cc-solvenote { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.cc-essaylen { margin: 0 0 8px; color: var(--bad); font-weight: 600; }
/* essays: the word count above the box, on the right, where the instructions say it is */
.cc-solve .anwerslist .words { justify-content: flex-start; margin: 0 0 8px; }

/* ---------------------------------- lists */
/* exam rows: the same columns in every row, whatever buttons a row has */
@media (min-width: 1101px) {
  html body .zc-exam { grid-template-columns: 56px minmax(0, 1fr) 140px 140px 330px; }
}
.zc-exam .zc-state + .zc-state { margin-inline-start: 4px; }
.zc-chap .zc-state + .zc-state { margin-top: 4px; }
/* a chapter's result: what the colours mean, and an unanswered question looks unanswered */
.cc-qmap .zc-chip.is-open { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); border-style: dashed; color: var(--ink-3); }
.cc-qmap .zc-chip.is-right::after { content: "\2713"; margin-inline-start: 3px; font-size: .85em; }
.cc-qmap .zc-chip.is-wrong::after { content: "\2715"; margin-inline-start: 3px; font-size: .85em; }
.cc-qlegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 4px 0 14px; color: var(--ink-2); font-size: var(--t-xs); }
.cc-qlegend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 3px; vertical-align: -1px; }
.cc-qlegend .is-right::before { background: var(--ok); }
.cc-qlegend .is-wrong::before { background: var(--bad); }
.cc-qlegend .is-open::before { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
/* an attempt's answers: filters */
.cc-reviewfilter { margin: 0 0 16px; }
.cc-reviewfilter button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 2px 10px rgba(21, 45, 67, .1); }

/* ---------------------------------- dashboard */
.zc-grid--2-1:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.zc-hello ~ .zc-grid { align-items: start; }
.cc-note--warn { background: #FFF4DA; color: #7A5200; }
.cc-datesel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
/* the package switcher's search */
.zc-pack__find { width: calc(100% - 12px); margin: 6px; min-height: 38px; }
/* my packages: a smaller greeting, so the packages come first */
.cc-phero--compact { padding-block: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 28px); }
.cc-phero--compact h1 { font-size: clamp(28px, 3.4vw, 44px); }
.cc-packfind { max-width: 420px; margin: 0 0 14px; }

/* ---------------------------------- statistics */
.cc-selects { align-items: start; }
@media (max-width: 760px) {
  .zv-seg.cc-seg-gap { flex-wrap: wrap; overflow: visible; }
  .zv-seg.cc-seg-gap > * { flex: 1 1 40%; justify-content: center; }
}

/* ---------------------------------- dictionaries */
.zv-search[data-dict-search] { display: flex; align-items: center; gap: 8px; }
.zv-search[data-dict-search] > .cx-input { flex: 1 1 auto; min-width: 0; }
.zv-search__go { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 var(--t-sm)/1 var(--f-body); cursor: pointer; }
.zv-search__x { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); font-size: 18px; line-height: 1; text-decoration: none; }
.zv-word__tip { border: 0; cursor: pointer; font: inherit; }
.zv-word__info { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }
.zv-word__info[hidden] { display: none; }
.zv-sort { font-size: .7em; vertical-align: 1px; }
@media (min-width: 761px) {
  .zv-word--head { position: sticky; top: 68px; z-index: 3; }
}

/* ---------------------------------- lectures */
.cc-lesson-head { margin-bottom: 4px; }
.cc-lessonnav { display: flex; justify-content: space-between; gap: 12px; }
.cc-lessonnav__a { display: flex; align-items: center; gap: 10px; max-width: 48%; padding: 12px 16px; border-radius: 16px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.cc-lessonnav__a:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); }
.cc-lessonnav__a small { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.cc-lessonnav__a b { display: block; font-size: var(--t-sm); }
.cc-lessonnav__a--next { margin-inline-start: auto; text-align: end; }
.cc-lessonnav .cx-ic { flex: none; width: 18px; height: 18px; }

/* ---------------------------------- the accessibility button stays at the bottom-left at every width (the user's rule,
   2026-11-05); it is not moved into the top bars on phones and tablets */
/* desktop: a free strip at the foot of the page, so at the very end the floating button sits on empty space */
@media (min-width: 1041px) {
  .cx-footer__bottom .cx-container { padding-bottom: 84px; }
}
/* END QA fixes 2026-11-05 */
/* BEGIN rail names */
.cc-railtip { position: fixed; z-index: 100005; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font: 600 12.5px/1.3 var(--f-body); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-50%); transition: opacity .12s; }
.cc-railtip.is-on { opacity: 1; }
/* END rail names */
/* BEGIN heading wraps */
.cc-phero h1 { text-wrap: balance; }
/* END heading wraps */
/* BEGIN study-area pieces on public pages */
/* czc.css is loaded in the study area only, but public pages use these pieces too: the sign-in dialog that
   "اشترك الآن" opens for a guest, the status chips on "رزمي", small buttons and muted text. Same rules, same values. */
.zc-muted { color: var(--ink-3); font-size: var(--t-sm); }
.zc-state { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; }
.zc-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zc-state--done { background: var(--ok-wash); color: var(--ok); }
.zc-state--prog { background: var(--ice); color: var(--brand-700); }
.zc-state--new { background: var(--bg-2); color: var(--ink-3); }
.zc-mini { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bg-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); transition: background .2s; }
.zc-mini:hover { background: var(--bg-3); color: var(--ink); }
.zc-mini .cx-ic { width: 16px; height: 16px; }
.zc-dialog, .zc-cmd { position: fixed; inset: 0; z-index: 220; display: grid; place-items: start center; padding: 14vh 16px 16px; visibility: hidden; }
.zc-dialog { place-items: center; padding: 16px; }
.zc-dialog.is-open, .zc-cmd.is-open { visibility: visible; }
.zc-scrim { position: absolute; inset: 0; background: rgba(17, 39, 61, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.is-open > .zc-scrim { opacity: 1; }
.zc-dialog__box { position: relative; width: min(100%, 460px); display: grid; gap: 12px; padding: 28px; border-radius: 26px; background: var(--bg); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(14px) scale(.97); transition: .4s var(--ease); }
.zc-dialog.is-open .zc-dialog__box { opacity: 1; transform: none; }
.zc-dialog__box h2 { font-size: var(--t-2xl); }
.zc-dialog__box p { color: var(--ink-2); }
.zc-dialog__actions { display: flex; gap: 10px; margin-top: 6px; }
.zc-mini--danger { background: var(--bad-wash); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.zc-mini--danger:hover { background: var(--bad); color: #fff; }
/* END study-area pieces on public pages */